@mastra/playground-ui 5.1.7-alpha.1 → 5.1.7-alpha.2

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, useState, useEffect, memo, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1, useId } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, ComposerPrimitive, useAttachment, AttachmentPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Minus, Maximize } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon } 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';
@@ -29,13 +29,18 @@ import { AnimatePresence } from 'motion/react';
 import { C as Colors } from './colors-CBG_Mm7P.js';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
-import { useDebouncedCallback } from 'use-debounce';
-import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, MiniMap, Background, BackgroundVariant, ReactFlowProvider, useViewport, useReactFlow, Panel } from '@xyflow/react';
+import { MarkerType, Handle, Position, useViewport, useReactFlow, Panel, useNodesState, useEdgesState, ReactFlow, MiniMap, Background, BackgroundVariant, ReactFlowProvider, Controls } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { useDebouncedCallback } from 'use-debounce';
+import { v4 } from '@lukeed/uuid';
+import prettier from 'prettier';
+import prettierPluginBabel from 'prettier/plugins/babel';
+import prettierPluginEstree from 'prettier/plugins/estree';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
 import z$1, { z, ZodObject } from 'zod';
@@ -44,11 +49,9 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { v4 } from '@lukeed/uuid';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
-import * as SliderPrimitive from '@radix-ui/react-slider';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
 import './index.css';const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
@@ -4364,10 +4367,10 @@ const AssistantMessage = ({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "h-6 pt-1", children: !isSolelyToolCall && /* @__PURE__ */ jsx(AssistantActionBar, {}) })
+    /* @__PURE__ */ jsx("div", { className: "h-6 pt-1", children: !isSolelyToolCall && /* @__PURE__ */ jsx(AssistantActionBar$1, {}) })
   ] });
 };
-const AssistantActionBar = () => {
+const AssistantActionBar$1 = () => {
   return /* @__PURE__ */ jsx(
     ActionBarPrimitive.Root,
     {
@@ -4645,28 +4648,28 @@ const Thread = ({ ToolFallback, agentName, hasMemory, showFileSupport }) => {
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsx(AssistantMessage, { ...props, ToolFallback });
   };
-  return /* @__PURE__ */ jsxs(ThreadWrapper, { children: [
+  return /* @__PURE__ */ jsxs(ThreadWrapper$1, { children: [
     /* @__PURE__ */ jsxs(ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
-      /* @__PURE__ */ jsx(ThreadWelcome, { agentName }),
+      /* @__PURE__ */ jsx(ThreadWelcome$1, { agentName }),
       /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsx(
         ThreadPrimitive.Messages,
         {
           components: {
             UserMessage,
-            EditComposer,
+            EditComposer: EditComposer$1,
             AssistantMessage: WrappedAssistantMessage
           }
         }
       ) }),
       /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsx(Composer, { hasMemory, showFileSupport })
+    /* @__PURE__ */ jsx(Composer$1, { hasMemory, showFileSupport })
   ] });
 };
-const ThreadWrapper = ({ children }) => {
+const ThreadWrapper$1 = ({ children }) => {
   return /* @__PURE__ */ jsx(ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
 };
-const ThreadWelcome = ({ agentName }) => {
+const ThreadWelcome$1 = ({ agentName }) => {
   const safeAgentName = agentName ?? "";
   const words = safeAgentName.split(" ") ?? [];
   let initials = "A";
@@ -4682,7 +4685,7 @@ const ThreadWelcome = ({ agentName }) => {
     /* @__PURE__ */ jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer = ({ hasMemory, showFileSupport }) => {
+const Composer$1 = ({ hasMemory, showFileSupport }) => {
   return /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto px-2 py-3", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
@@ -4698,8 +4701,8 @@ const Composer = ({ hasMemory, showFileSupport }) => {
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx(SpeechInput, {}),
-          /* @__PURE__ */ jsx(ComposerAction, { showFileSupport })
+          /* @__PURE__ */ jsx(SpeechInput$1, {}),
+          /* @__PURE__ */ jsx(ComposerAction$1, { showFileSupport })
         ] })
       ] })
     ] }),
@@ -4709,7 +4712,7 @@ const Composer = ({ hasMemory, showFileSupport }) => {
     ] })
   ] });
 };
-const SpeechInput = () => {
+const SpeechInput$1 = () => {
   const composerRuntime = useComposerRuntime();
   const { start, stop, isListening, transcript } = useSpeechRecognition();
   useEffect(() => {
@@ -4724,11 +4727,11 @@ const SpeechInput = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
-const ComposerAction = ({ showFileSupport }) => {
+const ComposerAction$1 = ({ showFileSupport }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showFileSupport && /* @__PURE__ */ jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
     /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsx(ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -4740,10 +4743,10 @@ const ComposerAction = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon, {}) }) }) })
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
-const EditComposer = () => {
+const EditComposer$1 = () => {
   return /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
     /* @__PURE__ */ jsx(ComposerPrimitive.Input, {}),
     /* @__PURE__ */ jsxs("div", { children: [
@@ -4752,7 +4755,7 @@ const EditComposer = () => {
     ] })
   ] });
 };
-const CircleStopIcon = () => {
+const CircleStopIcon$1 = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -4827,7 +4830,7 @@ class PDFAttachmentAdapter {
   }
 }
 
-const convertMessage$1 = (message) => {
+const convertMessage$2 = (message) => {
   return message;
 };
 const convertToAIAttachments = async (attachments) => {
@@ -5166,7 +5169,7 @@ function MastraRuntimeProvider({
   const runtime = useExternalStoreRuntime({
     isRunning,
     messages,
-    convertMessage: convertMessage$1,
+    convertMessage: convertMessage$2,
     onNew,
     adapters: {
       attachments: new CompositeAttachmentAdapter([
@@ -6475,7 +6478,7 @@ function AgentTracesInner({ className, traces, error }) {
   ] });
 }
 
-const convertMessage = (message) => {
+const convertMessage$1 = (message) => {
   return message;
 };
 function MastraNetworkRuntimeProvider({
@@ -6640,7 +6643,7 @@ function MastraNetworkRuntimeProvider({
   const runtime = useExternalStoreRuntime({
     isRunning,
     messages,
-    convertMessage,
+    convertMessage: convertMessage$1,
     onNew
   });
   return /* @__PURE__ */ jsxs(AssistantRuntimeProvider, { runtime, children: [
@@ -6879,190 +6882,95 @@ const NetworkChat = ({ agentId, memory }) => {
   return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) });
 };
 
-function WorkflowTraces({ traces, error, runId, stepName }) {
-  return /* @__PURE__ */ jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsx(WorkflowTracesInner, { traces, error, runId, stepName }) });
+const VNextNetworkChatContext = createContext(void 0);
+const VNextNetworkChatProvider = ({ children, networkId }) => {
+  const [state, setState] = useState({});
+  const handleStep = (uuid, record) => {
+    const id = record?.type === "finish" ? "finish" : record.type === "start" ? "start" : record.payload?.id;
+    if (id.includes("mapping_")) return;
+    setState((prevState) => {
+      const current = prevState[uuid];
+      const currentMetadata = current?.steps?.[id]?.metadata;
+      let startTime = currentMetadata?.startTime;
+      let endTime = currentMetadata?.endTime;
+      if (record.type === "step-start") {
+        startTime = Date.now();
+      }
+      if (record.type === "step-finish") {
+        endTime = Date.now();
+      }
+      return {
+        ...prevState,
+        [uuid]: {
+          ...current,
+          runId: current?.runId || record?.payload?.runId,
+          executionSteps: current?.steps?.[id] ? current?.executionSteps : [...current?.executionSteps || [], id],
+          steps: {
+            ...current?.steps,
+            [id]: {
+              ...current?.steps?.[id] || {},
+              [record.type]: record.payload,
+              metadata: {
+                startTime,
+                endTime
+              }
+            }
+          }
+        }
+      };
+    });
+  };
+  return /* @__PURE__ */ jsx(VNextNetworkChatContext.Provider, { value: { state, handleStep, setState }, children });
+};
+const useVNextNetworkChat = () => {
+  const context = useContext(VNextNetworkChatContext);
+  if (context === void 0) {
+    throw new Error("useVNextNetworkChat must be used within a VNextNetworkChatProvider");
+  }
+  return context;
+};
+
+function Spinner({ color = "#fff", className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("animate-spin duration-700", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
+    }
+  );
 }
-function WorkflowTracesInner({ traces, error, runId, stepName }) {
-  const hasRunRef = useRef(false);
-  const [sidebarWidth, setSidebarWidth] = useState(100);
-  const { isOpen: open, setTrace, setIsOpen, setSpan } = useContext(TraceContext);
+
+const Clock = ({ startedAt, endedAt }) => {
+  const [time, setTime] = useState(startedAt);
   useEffect(() => {
-    if (hasRunRef.current) return;
-    if (!runId || !stepName) return;
-    const matchingTrace = traces.find((trace) => trace.runId === runId);
-    if (!matchingTrace) return;
-    const matchingSpan = matchingTrace.trace.find((span) => span.name.includes(stepName));
-    if (!matchingSpan) return;
-    setTrace(matchingTrace.trace);
-    setSpan(matchingSpan);
-    setIsOpen(true);
-    hasRunRef.current = true;
-  }, [runId, traces, setTrace]);
-  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
-    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, error }) }),
-    open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
+    const interval = setInterval(() => {
+      setTime(Date.now());
+    }, 100);
+    return () => clearInterval(interval);
+  }, [startedAt]);
+  const timeDiff = endedAt ? endedAt - startedAt : time - startedAt;
+  return /* @__PURE__ */ jsxs("span", { className: "text-xs text-icon3", children: [
+    toSigFigs(timeDiff, 3),
+    "ms"
   ] });
-}
+};
 
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
 }
 
-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 res = await client.getLegacyWorkflow(workflowId).details();
-        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();
-            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);
-    }
-  };
-  return {
-    resumeLegacyWorkflow,
-    isResumingLegacyWorkflow
-  };
+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 extractConditions(group, type) {
@@ -8037,21 +7945,6 @@ function WorkflowConditionNode({ data }) {
   ] });
 }
 
-const Clock = ({ startedAt, endedAt }) => {
-  const [time, setTime] = useState(startedAt);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(Date.now());
-    }, 100);
-    return () => clearInterval(interval);
-  }, [startedAt]);
-  const timeDiff = endedAt ? endedAt - startedAt : time - startedAt;
-  return /* @__PURE__ */ jsxs("span", { className: "text-xs text-icon3", children: [
-    toSigFigs(timeDiff, 3),
-    "ms"
-  ] });
-};
-
 function WorkflowDefaultNode({
   data,
   onShowTrace,
@@ -8095,7 +7988,7 @@ function WorkflowDefaultNode({
               output: step?.output,
               error: step?.error,
               mapConfig: data.mapConfig,
-              onShowTrace: runId ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0
+              onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0
             }
           )
         ]
@@ -8157,42 +8050,62 @@ function WorkflowLoopResultNode({ data }) {
   ] });
 }
 
-function Spinner({ color = "#fff", className }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: cn("animate-spin duration-700", className),
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
-    }
-  );
-}
+const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
 
-function LegacyWorkflowNestedGraph({
-  stepGraph,
-  stepSubscriberGraph,
-  open
-}) {
-  const { nodes: initialNodes, edges: initialEdges } = contructLegacyNodesAndEdges({
-    stepGraph,
-    stepSubscriberGraph
+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$1, { 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$1, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs(Button$1, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
+      (100 * zoom).toFixed(0),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx(Button$1, { 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 }) {
+  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": WorkflowDefaultNode,
+    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode
+    "loop-result-node": WorkflowLoopResultNode,
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props })
   };
   useEffect(() => {
     if (open) {
@@ -8201,17 +8114,27 @@ function LegacyWorkflowNestedGraph({
       }, 500);
     }
   }, [open]);
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative", children: isMounted ? /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxs(
     ReactFlow,
     {
       nodes,
-      edges,
+      edges: edges.map((e) => ({
+        ...e,
+        style: {
+          ...e.style,
+          stroke: steps[`${workflowName}.${e.data?.previousStepId}`]?.status === "success" && steps[`${workflowName}.${e.data?.nextStepId}`] ? "#22c55e" : void 0
+        }
+      })),
       fitView: true,
-      fitViewOptions: { maxZoom: 0.85 },
+      fitViewOptions: {
+        maxZoom: 1
+      },
+      minZoom: 0.01,
+      maxZoom: 1,
       nodeTypes,
       onNodesChange,
       children: [
-        /* @__PURE__ */ jsx(Controls, {}),
+        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
         /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
       ]
@@ -8219,32 +8142,53 @@ function LegacyWorkflowNestedGraph({
   ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
 }
 
-const LegacyWorkflowNestedGraphContext = createContext(
+const WorkflowNestedGraphContext = createContext(
   {}
 );
-function LegacyWorkflowNestedGraphProvider({ children }) {
+function WorkflowNestedGraphProvider({ children }) {
   const [stepGraph, setStepGraph] = useState(null);
-  const [stepSubscriberGraph, setStepSubscriberGraph] = useState(null);
+  const [parentStepGraphList, setParentStepGraphList] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
   const [label, setLabel] = useState("");
+  const [fullStep, setFullStep] = useState("");
+  const [switching, setSwitching] = useState(false);
   const closeNestedGraph = () => {
-    setOpenDialog(false);
-    setStepGraph(null);
-    setStepSubscriberGraph(null);
-    setLabel("");
+    if (parentStepGraphList.length) {
+      setSwitching(true);
+      const lastStepGraph = parentStepGraphList[parentStepGraphList.length - 1];
+      setStepGraph(lastStepGraph.stepGraph);
+      setLabel(lastStepGraph.label);
+      setFullStep(lastStepGraph.fullStep);
+      setParentStepGraphList(parentStepGraphList.slice(0, -1));
+      setTimeout(() => {
+        setSwitching(false);
+      }, 500);
+    } else {
+      setOpenDialog(false);
+      setStepGraph(null);
+      setLabel("");
+      setFullStep("");
+    }
   };
   const showNestedGraph = ({
-    label: label2,
-    stepGraph: stepGraph2,
-    stepSubscriberGraph: stepSubscriberGraph2
+    label: newLabel,
+    stepGraph: newStepGraph,
+    fullStep: newFullStep
   }) => {
-    setLabel(label2);
-    setStepGraph(stepGraph2);
-    setStepSubscriberGraph(stepSubscriberGraph2);
+    if (stepGraph) {
+      setSwitching(true);
+      setParentStepGraphList([...parentStepGraphList, { stepGraph, label, fullStep }]);
+    }
+    setLabel(newLabel);
+    setFullStep(newFullStep);
+    setStepGraph(newStepGraph);
     setOpenDialog(true);
+    setTimeout(() => {
+      setSwitching(false);
+    }, 500);
   };
   return /* @__PURE__ */ jsxs(
-    LegacyWorkflowNestedGraphContext.Provider,
+    WorkflowNestedGraphContext.Provider,
     {
       value: {
         showNestedGraph,
@@ -8252,7 +8196,7 @@ 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__ */ jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[45rem] h-[45rem] max-w-[unset] bg-[#121212] p-[0.5rem]", children: [
           /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-2.5 left-2.5", children: [
             /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
             /* @__PURE__ */ jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
@@ -8260,1415 +8204,2124 @@ function LegacyWorkflowNestedGraphProvider({ children }) {
               " workflow"
             ] })
           ] }),
-          /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
-            LegacyWorkflowNestedGraph,
-            {
-              stepGraph,
-              open: openDialog,
-              stepSubscriberGraph
-            }
-          ) })
+          switching ? /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowNestedGraph, { stepGraph, open: openDialog, workflowName: fullStep }) })
         ] }) }) })
       ]
     }
   );
 }
 
-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
+}) {
+  const [isInputOpen, setIsInputOpen] = useState(false);
+  const [isOutputOpen, setIsOutputOpen] = useState(false);
+  const [isErrorOpen, setIsErrorOpen] = useState(false);
+  const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
+  const { steps, isRunning } = useCurrentRun();
+  const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
+  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig } = data;
+  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
+  const step = steps[fullLabel];
+  const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
+  const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ 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 })
-    ] }) }),
-    !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
-  });
-  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
-  const [edges] = useEdgesState(initialEdges);
-  const nodeTypes = {
-    "default-node": WorkflowDefaultNode,
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": LegacyWorkflowNestedNode
-  };
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      nodes,
-      edges,
-      nodeTypes,
-      onNodesChange,
-      fitView: true,
-      fitViewOptions: {
-        maxZoom: 0.85
-      },
-      children: [
-        /* @__PURE__ */ jsx(Controls, {}),
-        /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
-        /* @__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);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
-  }
-  if (!legacyWorkflow) {
-    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(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 });
-});
-
-const DISABLED_LABELS = ["boolean", "object", "array"];
-const FieldWrapper = ({ label, children, id, field, error }) => {
-  const isDisabled = DISABLED_LABELS.includes(field.type);
-  return /* @__PURE__ */ jsxs("div", { className: "pb-4 last:pb-0", children: [
-    !isDisabled && /* @__PURE__ */ jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3 pb-1 block", htmlFor: id, children: [
-      label,
-      field.required && /* @__PURE__ */ jsx("span", { className: "text-accent2", children: " *" })
-    ] }),
-    children,
-    field.fieldConfig?.description && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon6", children: field.fieldConfig.description }),
-    error && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-accent2", children: error })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
+          step?.status === "success" && "ring-2 ring-accent1",
+          step?.status === "failed" && "ring-2 ring-accent2"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
+            isRunning && /* @__PURE__ */ jsxs(Icon, { children: [
+              step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+              step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-icon3" }),
+              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon6 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__ */ jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
+            /* @__PURE__ */ jsx(Button, { onClick: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }), children: "View workflow" }),
+            mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " map config"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
+              ] }) })
+            ] }),
+            step?.input && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " input"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.input }) })
+              ] }) })
+            ] }),
+            step?.output && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " output"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.output }) })
+              ] }) })
+            ] }),
+            step?.error && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " error"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step?.error }) })
+              ] }) })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
   ] });
-};
+}
 
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
+function WorkflowGraphInner({ workflow, onShowTrace }) {
+  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, ...props }),
+    "condition-node": WorkflowConditionNode,
+    "after-node": WorkflowAfterNode,
+    "loop-result-node": WorkflowLoopResultNode,
+    "nested-node": WorkflowNestedNode
+  };
+  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" : void 0
+        }
+      })),
+      nodeTypes,
+      onNodesChange,
+      fitView: true,
+      fitViewOptions: {
+        maxZoom: 1
+      },
+      minZoom: 0.01,
+      maxZoom: 1,
+      children: [
+        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
+        /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
+        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 12, size: 0.5 })
+      ]
     }
-  }
-);
-const Alert = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
-Alert.displayName = "Alert";
-const AlertTitle = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", { ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })
-);
-AlertTitle.displayName = "AlertTitle";
-const AlertDescription = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
-);
-AlertDescription.displayName = "AlertDescription";
-
-const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-  /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-  /* @__PURE__ */ jsx(AlertTitle, { children: error })
-] });
+  ) });
+}
 
-const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button$1, { type: "submit", children });
+function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
+  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, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+    WorkflowGraphInner,
+    {
+      workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
+      onShowTrace
+    }
+  ) }) }, snapshot?.runId ?? workflowId);
+}
 
-const StringField = ({ inputProps, error, field, id }) => {
-  const { key, ...props } = inputProps;
-  return /* @__PURE__ */ jsx(Input, { id, className: error ? "border-destructive" : "", ...props, defaultValue: field.default });
+const useWorkflowRuns = (workflowId) => {
+  const [runs, setRuns] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const client = useMastraClient();
+  useEffect(() => {
+    const fetchWorkflow = async () => {
+      setIsLoading(true);
+      try {
+        if (!workflowId) {
+          setRuns(null);
+          setIsLoading(false);
+          return;
+        }
+        const res = await client.getWorkflow(workflowId).runs({ limit: 50 });
+        setRuns(res);
+      } catch (error) {
+        setRuns(null);
+        console.error("Error fetching workflow", error);
+        toast.error("Error fetching workflow");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchWorkflow();
+  }, [workflowId]);
+  return { runs, isLoading };
 };
 
-const NumberField = ({ inputProps, error, field, id }) => {
-  const { key, ...props } = inputProps;
+const useWorkflow = (workflowId) => {
+  const [workflow, setWorkflow] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const client = useMastraClient();
   useEffect(() => {
-    if (field.default !== void 0) {
-      props.onChange({
-        target: { value: Number(field.default), name: inputProps.name }
-      });
-    }
-  }, [field.default]);
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      id,
-      type: "number",
-      className: error ? "border-destructive" : "",
-      ...props,
-      defaultValue: field.default !== void 0 ? Number(field.default) : void 0,
-      onChange: (e) => {
-        const value = e.target.value;
-        if (value !== "" && !isNaN(Number(value))) {
-          props.onChange({
-            target: { value, name: inputProps.name }
-          });
+    const fetchWorkflow = async () => {
+      setIsLoading(true);
+      try {
+        if (!workflowId) {
+          setWorkflow(null);
+          setIsLoading(false);
+          return;
         }
-      },
-      onBlur: (e) => {
-        const value = e.target.value;
-        if (value !== "" && !isNaN(Number(value))) {
-          props.onChange({
-            target: { value: Number(value), name: inputProps.name }
-          });
+        const res = await client.getWorkflow(workflowId).details();
+        if (!res) {
+          setWorkflow(null);
+          console.error("Error fetching workflow");
+          toast.error("Error fetching workflow");
+          return;
         }
+        setWorkflow(res);
+      } catch (error) {
+        setWorkflow(null);
+        console.error("Error fetching workflow", error);
+        toast.error("Error fetching workflow");
+      } finally {
+        setIsLoading(false);
       }
-    }
-  );
+    };
+    fetchWorkflow();
+  }, [workflowId]);
+  return { workflow, isLoading };
 };
-
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
-  }
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-const BooleanField = ({ field, label, id, inputProps, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-  /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      id,
-      onCheckedChange: (checked) => {
-        const event = {
-          target: {
-            name: inputProps.name,
-            value: checked
-          }
-        };
-        inputProps.onChange(event);
+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 res = await client.getLegacyWorkflow(workflowId).details();
+        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();
+            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;
       },
-      defaultChecked: field.default,
-      disabled: inputProps.disabled || inputProps.readOnly
+      {}
+    );
+    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);
     }
-  ),
-  /* @__PURE__ */ jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3", htmlFor: id, children: [
-    label,
-    field.required && /* @__PURE__ */ jsx("span", { className: "text-accent2", children: " *" })
-  ] })
-] });
+  };
+  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);
+    }
+  };
+  return {
+    resumeLegacyWorkflow,
+    isResumingLegacyWorkflow
+  };
+};
 
-function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+const LabelMappings = {
+  "routing-step": "Decision making process",
+  "agent-step": "Agent execution",
+  "workflow-step": "Workflow execution"
+};
+const StepDropdown = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { state } = useVNextNetworkChat();
+  const message = useMessage();
+  const id = message?.metadata?.custom?.id;
+  if (!id) return /* @__PURE__ */ jsx("div", { children: "Something is wrong" });
+  const currentState = state[id];
+  const latestStepId = currentState.executionSteps[currentState.executionSteps.length - 1];
+  const hasFinished = latestStepId === "finish";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs(Button, { onClick: () => setIsExpanded(!isExpanded), children: [
+      hasFinished ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }) }),
+        "Done"
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Spinner, { className: "animate-spin" }) }),
+        "Thinking..."
+      ] }),
+      /* @__PURE__ */ jsx(Icon, { className: "ml-2", children: /* @__PURE__ */ jsx(ChevronDown, { className: clsx("transition-transform -rotate-90", isExpanded && "rotate-0") }) })
+    ] }),
+    isExpanded ? /* @__PURE__ */ jsx(Steps, { id }) : null
+  ] });
+};
+const Steps = ({ id }) => {
+  const { state } = useVNextNetworkChat();
+  const currentState = state[id];
+  return /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-px rounded-lg overflow-hidden", children: currentState.executionSteps.filter((stepId) => stepId !== "start").map((stepId, index) => /* @__PURE__ */ jsx(StepEntry, { stepId, step: currentState.steps[stepId], runId: currentState.runId }, index)) });
+};
+const StepEntry = ({ stepId, step, runId }) => {
+  const [expanded, setExpanded] = useState(false);
+  const stepResult = step["step-result"];
+  if (stepId === "finish") {
+    return /* @__PURE__ */ jsx("div", { className: "bg-surface4 py-2 px-3 text-icon6 flex items-center gap-4 justify-between", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: "Process completed" }) });
+  }
+  return /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "bg-surface4 py-2 px-3 text-icon6 flex items-center gap-4 justify-between w-full text-left",
+        onClick: () => setExpanded((s) => !s),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(StatusIcon, { status: stepResult ? stepResult?.status : "loading" }),
+            /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: LabelMappings[stepId] || stepId })
+          ] }),
+          step.metadata?.startTime && /* @__PURE__ */ jsx(StepClock, { step })
+        ]
+      }
+    ),
+    stepId === "routing-step" && expanded && /* @__PURE__ */ jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Selection reason:" }),
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.selectionReason || "N/A" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Resource ID" }),
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.resourceId || "N/A" })
+      ] })
+    ] }),
+    stepId === "workflow-step" && stepResult?.output?.resourceId ? /* @__PURE__ */ jsx(
+      WorkflowStepResultDialog,
+      {
+        open: expanded,
+        onOpenChange: setExpanded,
+        workflowId: stepResult?.output?.resourceId,
+        runId
+      }
+    ) : null
+  ] });
+};
+const WorkflowStepResultDialog = ({ open, onOpenChange, workflowId, runId }) => {
+  const { runs } = useWorkflowRuns(workflowId);
+  const { workflow, isLoading } = useWorkflow(workflowId);
+  const run = runs?.runs.find((run2) => run2.runId === runId);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsx(DialogContent, { className: "h-[90vh] w-[90%] max-w-[unset]", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 h-full", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow details" }),
+    /* @__PURE__ */ jsx(WorkflowRunProvider, { snapshot: typeof run?.snapshot === "object" ? run.snapshot : void 0, children: /* @__PURE__ */ jsx(WorkflowGraph, { workflowId, workflow, isLoading }) })
+  ] }) }) }) });
+};
+const StatusIcon = ({ status }) => {
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }) });
+  }
+  if (status === "success") {
+    return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }) });
+  }
+  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Spinner, { className: "animate-spin" }) });
+};
+const StepClock = ({ step }) => {
+  return /* @__PURE__ */ jsx(Badge$1, { children: /* @__PURE__ */ jsx(Clock, { startedAt: step.metadata.startTime, endedAt: step.metadata?.endTime }) });
+};
+
+const NextAssistantMessage = ({
+  ToolFallback: ToolFallbackCustom
+}) => {
+  const data = useMessage();
+  const isSolelyToolCall = data.content.length === 1 && data.content[0].type === "tool-call";
+  const content = data.content[0];
+  if (!content) {
+    return null;
+  }
+  const textContent = content.text;
+  if (textContent === "start") {
+    return /* @__PURE__ */ jsx(StepDropdown, {});
+  }
+  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsx(
+      MessagePrimitive.Content,
+      {
+        components: {
+          Text: MarkdownText,
+          tools: { Fallback: ToolFallbackCustom || ToolFallback$1 }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "h-6 pt-1", children: !isSolelyToolCall && /* @__PURE__ */ jsx(AssistantActionBar, {}) })
+  ] });
+};
+const AssistantActionBar = () => {
+  return /* @__PURE__ */ jsx(
+    ActionBarPrimitive.Root,
+    {
+      hideWhenRunning: true,
+      autohide: "always",
+      autohideFloat: "single-branch",
+      className: "flex gap-1 items-center transition-all",
+      children: /* @__PURE__ */ jsx(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
+        /* @__PURE__ */ jsx(MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsx(CheckIcon$1, {}) }),
+        /* @__PURE__ */ jsx(MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsx(CopyIcon, {}) })
+      ] }) })
+    }
+  );
+};
+
+const NetworkThread = ({ ToolFallback, networkName, hasMemory, showFileSupport }) => {
+  const areaRef = useRef(null);
+  useAutoscroll(areaRef, { enabled: true });
+  const WrappedAssistantMessage = (props) => {
+    return /* @__PURE__ */ jsx(NextAssistantMessage, { ...props, ToolFallback });
+  };
+  return /* @__PURE__ */ jsxs(ThreadWrapper, { children: [
+    /* @__PURE__ */ jsxs(ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(ThreadWelcome, { networkName }),
+        /* @__PURE__ */ jsx(
+          ThreadPrimitive.Messages,
+          {
+            components: {
+              UserMessage,
+              EditComposer,
+              AssistantMessage: WrappedAssistantMessage
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
+    ] }),
+    /* @__PURE__ */ jsx(Composer, { hasMemory, showFileSupport })
+  ] });
+};
+const ThreadWrapper = ({ children }) => {
+  const hasAttachments = useHasAttachments();
+  return /* @__PURE__ */ jsx(
+    ThreadPrimitive.Root,
+    {
+      className: clsx(
+        "max-w-[568px] w-full mx-auto px-4",
+        hasAttachments ? "h-[calc(100%-208px)]" : "h-[calc(100%-112px)]"
+      ),
+      children
+    }
+  );
+};
+const ThreadWelcome = ({ networkName }) => {
+  const safeNetworkName = networkName ?? "";
+  const words = safeNetworkName.split(" ") ?? [];
+  let initials = "A";
+  if (words.length === 2) {
+    initials = `${words[0][0]}${words[1][0]}`;
+  } else if (safeNetworkName.length > 0) {
+    initials = `${safeNetworkName[0]}`;
+  } else {
+    initials = "A";
+  }
+  return /* @__PURE__ */ jsx(ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
+    /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: initials }) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
+  ] }) });
+};
+const Composer = ({ hasMemory, showFileSupport }) => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
+      /* @__PURE__ */ jsx(ComposerAttachments, {}),
+      /* @__PURE__ */ jsxs("div", { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
+        /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none",
+            autoFocus: true,
+            placeholder: "Enter your message...",
+            name: "",
+            id: ""
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(SpeechInput, {}),
+          /* @__PURE__ */ jsx(ComposerAction, { showFileSupport })
+        ] })
+      ] })
+    ] }),
+    !hasMemory && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3 flex items-center gap-2 pt-0.5", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
+      "Memory is not enabled. The conversation will not be persisted."
+    ] })
+  ] });
+};
+const SpeechInput = () => {
+  const composerRuntime = useComposerRuntime();
+  const { start, stop, isListening, transcript } = useSpeechRecognition();
+  useEffect(() => {
+    if (!transcript) return;
+    composerRuntime.setText(transcript);
+  }, [composerRuntime, transcript]);
   return /* @__PURE__ */ jsx(
-    DayPicker,
+    TooltipIconButton,
     {
-      showOutsideDays,
-      className: cn("p-3", className),
-      classNames: {
-        months: "flex flex-col space-y-4 sm:space-y-0",
-        month: "space-y-4",
-        // month_caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: "text-sm text-text font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button_previous: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "absolute left-4 top-[56px] z-10"
-        ),
-        nav_button_next: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "absolute right-4 top-[56px] z-10"
-        ),
-        dropdown_month: "w-full border-collapse space-y-1",
-        weeknumber: "flex",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
-          "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected: "!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-lightGray-7/50 text-accent-foreground",
-        day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames
-      },
-      components: {
-        // IconDropdown: ({  }) => (
-        //   <CalendarIcon
-        //     className={cn('h-4 w-4', {
-        //       'rotate-180': orientation === 'up',
-        //       'rotate-90': orientation === 'left',
-        //       '-rotate-90': orientation === 'right',
-        //     })}
-        //   />
-        // ),
-      },
-      ...props
+      type: "button",
+      tooltip: isListening ? "Stop dictation" : "Start dictation",
+      variant: "ghost",
+      className: "rounded-full",
+      onClick: () => isListening ? stop() : start(),
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
-}
-Calendar.displayName = "Calendar";
+};
+const ComposerAction = ({ showFileSupport }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showFileSupport && /* @__PURE__ */ jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsx(ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsx(
+      TooltipIconButton,
+      {
+        tooltip: "Send",
+        variant: "default",
+        className: "rounded-full border-sm border-[#363636] bg-[#292929]",
+        children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon, {}) }) }) })
+  ] });
+};
+const EditComposer = () => {
+  return /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(ComposerPrimitive.Input, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button$1, { variant: "ghost", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsx(Button$1, { children: "Send" }) })
+    ] })
+  ] });
+};
+const CircleStopIcon = () => {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
+};
 
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
+const MessagesContext = createContext({
+  messages: [],
+  setMessages: () => {
+  },
+  appendToLastMessage: () => {
   }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-const DatePicker = ({
-  value,
-  setValue,
-  children,
-  className,
-  placeholder,
-  ...props
-}) => {
-  const [openPopover, setOpenPopover] = React.useState(false);
-  return /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: setOpenPopover, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children ? children : /* @__PURE__ */ jsx(
-      DefaultButton,
+});
+const MessagesProvider = ({ children }) => {
+  const [messages, setMessages] = useState([]);
+  const appendToLastMessage = (partial) => setMessages((msgs) => {
+    const lastMsg = msgs[msgs.length - 1];
+    const content = typeof lastMsg.content === "string" ? lastMsg.content : (lastMsg.content?.[0]).text;
+    return [
+      ...msgs.slice(0, -1),
       {
-        value,
-        placeholder,
-        className,
-        "data-testid": "datepicker-button"
+        ...lastMsg,
+        content: [{ type: "text", text: content + partial }]
       }
-    ) }),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        className: "backdrop-blur-4xl w-auto p-0 bg-[#171717]",
-        align: "start",
-        "data-testid": "datepicker-calendar",
-        children: /* @__PURE__ */ jsx(
-          DatePickerOnly,
-          {
-            value,
-            setValue: (v) => setValue(v ? /* @__PURE__ */ new Date(`${v}z`) : null),
-            clearable: props.clearable,
-            setOpenPopover,
-            ...props
+    ];
+  });
+  return /* @__PURE__ */ jsx(MessagesContext.Provider, { value: { messages, setMessages, appendToLastMessage }, children });
+};
+const useMessages = () => useContext(MessagesContext);
+
+const formatJSON = async (code) => {
+  const formatted = await prettier.format(code, {
+    semi: false,
+    parser: "json",
+    printWidth: 80,
+    tabWidth: 2,
+    plugins: [prettierPluginBabel, prettierPluginEstree]
+  });
+  return formatted;
+};
+
+const convertMessage = (message) => {
+  return message;
+};
+function VNextMastraNetworkRuntimeProvider({
+  children,
+  networkId,
+  memory,
+  threadId,
+  refreshThreadList,
+  initialMessages
+}) {
+  const runIdRef = useRef(void 0);
+  const [isRunning, setIsRunning] = useState(false);
+  const { messages, setMessages, appendToLastMessage } = useMessages();
+  const [currentThreadId, setCurrentThreadId] = useState(threadId);
+  const { handleStep, state, setState } = useVNextNetworkChat();
+  const id = runIdRef.current;
+  const currentState = id ? state[id] : void 0;
+  useEffect(() => {
+    if (!currentState) return;
+    const hasFinished = Boolean(currentState?.steps?.["finish"]);
+    if (!hasFinished) return;
+    const workflowStep = currentState?.steps?.["workflow-step"];
+    if (!workflowStep) return;
+    const workflowStepResult = workflowStep?.["step-result"];
+    if (!workflowStepResult) return;
+    const workflowStepResultOutput = workflowStepResult?.output;
+    if (!workflowStepResultOutput) return;
+    const run = async () => {
+      const parsedResult = JSON.parse(workflowStepResult?.output?.result ?? "{}") ?? {};
+      const runResult = parsedResult?.runResult ?? {};
+      const formatted = await formatJSON(JSON.stringify(runResult));
+      setMessages((msgs) => [
+        ...msgs,
+        { role: "assistant", content: [{ type: "text", text: `\`\`\`json
+${formatted}\`\`\`` }] }
+      ]);
+    };
+    run();
+  }, [currentState]);
+  useEffect(() => {
+    const hasNewInitialMessages = initialMessages && initialMessages?.length > messages?.length;
+    if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
+      const run = async (result, messageId) => {
+        const formatted = await formatJSON(result);
+        const finalResponse = `\`\`\`json
+${formatted}\`\`\``;
+        setMessages((currentConversation) => {
+          return currentConversation.map((message) => {
+            if (message.metadata?.custom?.id === messageId) {
+              return { ...message, content: [{ type: "text", text: finalResponse }] };
+            }
+            return message;
+          });
+        });
+      };
+      if (initialMessages && threadId && memory) {
+        for (const message of initialMessages) {
+          if (message.role === "user") {
+            setMessages((currentConversation) => [...currentConversation, message]);
           }
-        )
+          if (message.role === "assistant") {
+            const id2 = v4();
+            const formattedMessageId = v4();
+            const parts = message.parts;
+            const routingStep = parts?.[2];
+            const responseStep = parts?.[3];
+            const routingDecision = JSON.parse(routingStep?.text ?? "{}");
+            const resourceStepId = routingDecision?.resourceType === "agent" ? "agent-step" : "workflow-step";
+            let finalResponse = responseStep?.text ?? "";
+            let runId = "";
+            let runResult = {};
+            if (resourceStepId === "workflow-step") {
+              const parsedResult = JSON.parse(responseStep?.text ?? "{}") ?? {};
+              runResult = parsedResult?.runResult ?? {};
+              runId = parsedResult?.runId ?? "";
+            }
+            setState((currentState2) => {
+              return {
+                ...currentState2,
+                [id2]: {
+                  executionSteps: ["start", "routing-step", resourceStepId, "finish"],
+                  runId,
+                  steps: {
+                    start: {},
+                    "routing-step": {
+                      "step-result": {
+                        output: routingDecision,
+                        status: "success"
+                      }
+                    },
+                    [resourceStepId]: {
+                      "step-result": {
+                        output: {
+                          resourceId: routingDecision?.resourceId
+                        },
+                        status: "success"
+                      }
+                    },
+                    finish: {}
+                  }
+                }
+              };
+            });
+            setMessages((currentConversation) => {
+              return [
+                ...currentConversation,
+                {
+                  role: "assistant",
+                  metadata: {
+                    custom: {
+                      id: id2
+                    }
+                  },
+                  content: [
+                    {
+                      type: "text",
+                      text: "start"
+                    }
+                  ]
+                },
+                {
+                  role: "assistant",
+                  content: [{ type: "text", text: resourceStepId === "workflow-step" ? "" : finalResponse }],
+                  metadata: {
+                    custom: {
+                      id: formattedMessageId
+                    }
+                  }
+                }
+              ];
+            });
+            if (resourceStepId === "workflow-step") {
+              run(JSON.stringify(runResult), formattedMessageId);
+            }
+          }
+        }
+        setCurrentThreadId(threadId);
       }
-    )
+    }
+  }, [initialMessages, threadId, memory, messages]);
+  const mastra = useMastraClient();
+  const network = mastra.getVNextNetwork(networkId);
+  const onNew = async (message) => {
+    runIdRef.current = void 0;
+    if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
+    const input = message.content[0].text;
+    setMessages((currentConversation) => [...currentConversation, { role: "user", content: input }]);
+    setIsRunning(true);
+    try {
+      await network.stream(
+        {
+          message: input,
+          threadId,
+          resourceId: networkId
+        },
+        (record) => {
+          if (runIdRef.current) {
+            if (record.type === "tool-call-delta") {
+              appendToLastMessage(record.argsTextDelta);
+            } else if (record.type === "tool-call-streaming-start") {
+              setMessages((msgs) => [...msgs, { role: "assistant", content: [{ type: "text", text: "" }] }]);
+              setTimeout(() => {
+                refreshThreadList?.();
+              }, 500);
+              return;
+            } else {
+              handleStep(runIdRef.current, record);
+            }
+          } else if (record.type === "start") {
+            const id2 = v4();
+            runIdRef.current = id2;
+            setMessages((currentConversation) => {
+              return [
+                ...currentConversation,
+                {
+                  role: "assistant",
+                  metadata: {
+                    custom: {
+                      id: id2
+                    }
+                  },
+                  content: [
+                    {
+                      type: "text",
+                      text: "start"
+                    }
+                  ]
+                }
+              ];
+            });
+          }
+          setTimeout(() => {
+            refreshThreadList?.();
+          }, 500);
+        }
+      );
+      setIsRunning(false);
+    } catch (error) {
+      console.error("Error occurred in VNextMastraNetworkRuntimeProvider", error);
+      setIsRunning(false);
+    }
+  };
+  const runtime = useExternalStoreRuntime({
+    isRunning,
+    messages,
+    convertMessage,
+    onNew
+  });
+  return /* @__PURE__ */ jsxs(AssistantRuntimeProvider, { runtime, children: [
+    " ",
+    children,
+    " "
   ] });
-};
-const DatePickerOnly = ({
-  value,
-  setValue,
-  setOpenPopover,
-  clearable,
-  placeholder,
-  className,
-  ...props
+}
+
+const VNextNetworkChat = ({
+  networkId,
+  networkName,
+  threadId,
+  initialMessages,
+  memory,
+  refreshThreadList
 }) => {
-  const [inputValue, setInputValue] = React.useState(value ? format(value, "PP") : "");
-  const [selected, setSelected] = React.useState(value ? new Date(value) : void 0);
-  const debouncedDateUpdate = useDebouncedCallback((date) => {
-    if (isValid(date)) {
-      setSelected(date);
-      setValue?.(date);
-      setOpenPopover?.(false);
-    }
-  }, 2e3);
-  const handleInputChange = (e) => {
-    setInputValue(e.currentTarget.value);
-    const date = new Date(e.target.value);
-    debouncedDateUpdate(date);
+  return /* @__PURE__ */ jsx(MessagesProvider, { children: /* @__PURE__ */ jsx(VNextNetworkChatProvider, { networkId, children: /* @__PURE__ */ jsx(
+    VNextMastraNetworkRuntimeProvider,
+    {
+      networkId,
+      initialMessages: initialMessages ?? [],
+      threadId,
+      memory,
+      refreshThreadList,
+      children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(NetworkThread, { hasMemory: memory, networkName }) })
+    },
+    threadId
+  ) }, threadId) }, threadId);
+};
+
+function WorkflowTraces({ traces, error, runId, stepName }) {
+  return /* @__PURE__ */ jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsx(WorkflowTracesInner, { traces, error, runId, stepName }) });
+}
+function WorkflowTracesInner({ traces, error, runId, stepName }) {
+  const hasRunRef = useRef(false);
+  const [sidebarWidth, setSidebarWidth] = useState(100);
+  const { isOpen: open, setTrace, setIsOpen, setSpan } = useContext(TraceContext);
+  useEffect(() => {
+    if (hasRunRef.current) return;
+    if (!runId || !stepName) return;
+    const matchingTrace = traces.find((trace) => trace.runId === runId);
+    if (!matchingTrace) return;
+    const matchingSpan = matchingTrace.trace.find((span) => span.name.includes(stepName));
+    if (!matchingSpan) return;
+    setTrace(matchingTrace.trace);
+    setSpan(matchingSpan);
+    setIsOpen(true);
+    hasRunRef.current = true;
+  }, [runId, traces, setTrace]);
+  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, error }) }),
+    open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
+  ] });
+}
+
+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
   };
-  const handleDaySelect = (date) => {
-    setSelected(date);
-    setValue?.(date);
-    setOpenPopover?.(false);
-    if (date) {
-      setInputValue(format(date, "PP"));
-    } else {
-      setInputValue("");
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        setIsMounted(true);
+      }, 500);
     }
-  };
-  const handleMonthSelect = (date) => {
-    setSelected(date);
-    if (date) {
-      setInputValue(format(date, "PP"));
-    } else {
-      setInputValue("");
+  }, [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(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
+        /* @__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);
   };
   return /* @__PURE__ */ jsxs(
-    "div",
+    LegacyWorkflowNestedGraphContext.Provider,
     {
-      "aria-label": "Choose date",
-      className: "relative mt-2 flex flex-col gap-2",
-      onKeyDown: (e) => {
-        e.stopPropagation();
-        if (e.key === "Escape") {
-          setOpenPopover?.(false);
-        }
+      value: {
+        showNestedGraph,
+        closeNestedGraph
       },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "w-full px-3", children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "text",
-            value: inputValue,
-            onChange: handleInputChange,
-            placeholder,
-            className
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          Calendar,
-          {
-            mode: "single",
-            month: selected,
-            selected,
-            onMonthChange: handleMonthSelect,
-            onSelect: handleDaySelect,
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "px-3 pb-2", children: clearable && /* @__PURE__ */ jsx(
-          Button$1,
-          {
-            variant: "outline",
-            tabIndex: 0,
-            className: "w-full !opacity-50 duration-200 hover:!opacity-100",
-            onClick: () => {
-              setValue(null);
-              setSelected(void 0);
-              setInputValue("");
-              setOpenPopover?.(false);
-            },
-            children: "Clear"
-          }
-        ) })
+        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(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(
+            LegacyWorkflowNestedGraph,
+            {
+              stepGraph,
+              open: openDialog,
+              stepSubscriberGraph
+            }
+          ) })
+        ] }) }) })
       ]
     }
   );
+}
+
+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: [
+    !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 })
+    ] }) }),
+    !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
+  });
+  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
+  const [edges] = useEdgesState(initialEdges);
+  const nodeTypes = {
+    "default-node": WorkflowDefaultNode,
+    "condition-node": WorkflowConditionNode,
+    "after-node": WorkflowAfterNode,
+    "loop-result-node": WorkflowLoopResultNode,
+    "nested-node": LegacyWorkflowNestedNode
+  };
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes,
+      onNodesChange,
+      fitView: true,
+      fitViewOptions: {
+        maxZoom: 0.85
+      },
+      children: [
+        /* @__PURE__ */ jsx(Controls, {}),
+        /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
+        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 12, size: 0.5 })
+      ]
+    }
+  ) });
+}
+
+function LegacyWorkflowGraph({ workflowId }) {
+  const { legacyWorkflow, isLoading } = useLegacyWorkflow(workflowId);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
+  }
+  if (!legacyWorkflow) {
+    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(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 });
+});
+
+const DISABLED_LABELS = ["boolean", "object", "array"];
+const FieldWrapper = ({ label, children, id, field, error }) => {
+  const isDisabled = DISABLED_LABELS.includes(field.type);
+  return /* @__PURE__ */ jsxs("div", { className: "pb-4 last:pb-0", children: [
+    !isDisabled && /* @__PURE__ */ jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3 pb-1 block", htmlFor: id, children: [
+      label,
+      field.required && /* @__PURE__ */ jsx("span", { className: "text-accent2", children: " *" })
+    ] }),
+    children,
+    field.fieldConfig?.description && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon6", children: field.fieldConfig.description }),
+    error && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-accent2", children: error })
+  ] });
 };
-const DefaultButton = React.forwardRef(
-  ({ value, placeholder, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      Button$1,
-      {
-        ref,
-        variant: "outline",
-        className: cn(
-          "bg-neutral-825 border-neutral-775 w-full justify-start whitespace-nowrap rounded-md border px-2 py-0 text-left flex items-center gap-1",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" }),
-          value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PPP") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
-        ]
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
       }
-    );
+    },
+    defaultVariants: {
+      variant: "default"
+    }
   }
 );
-DefaultButton.displayName = "DefaultButton";
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", { ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })
+);
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
+);
+AlertDescription.displayName = "AlertDescription";
 
-const DateField = ({ inputProps, field, error, id }) => {
+const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+  /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+  /* @__PURE__ */ jsx(AlertTitle, { children: error })
+] });
+
+const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button$1, { type: "submit", children });
+
+const StringField = ({ inputProps, error, field, id }) => {
+  const { key, ...props } = inputProps;
+  return /* @__PURE__ */ jsx(Input, { id, className: error ? "border-destructive" : "", ...props, defaultValue: field.default });
+};
+
+const NumberField = ({ inputProps, error, field, id }) => {
   const { key, ...props } = inputProps;
-  const [value, setValue] = useState(null);
   useEffect(() => {
-    if (field.default) {
-      const date = new Date(field.default);
-      if (isValid(date)) {
-        setValue(date);
-      }
+    if (field.default !== void 0) {
+      props.onChange({
+        target: { value: Number(field.default), name: inputProps.name }
+      });
     }
-  }, [field]);
+  }, [field.default]);
   return /* @__PURE__ */ jsx(
-    DatePicker,
+    Input,
     {
       id,
+      type: "number",
       className: error ? "border-destructive" : "",
-      value,
-      setValue: (date) => {
-        const newDate = date ? new Date(date).toISOString() : date;
-        if (newDate) {
+      ...props,
+      defaultValue: field.default !== void 0 ? Number(field.default) : void 0,
+      onChange: (e) => {
+        const value = e.target.value;
+        if (value !== "" && !isNaN(Number(value))) {
           props.onChange({
-            target: { value: newDate?.toString(), name: inputProps.name }
+            target: { value, name: inputProps.name }
           });
-          setValue(new Date(newDate));
         }
       },
-      clearable: true
+      onBlur: (e) => {
+        const value = e.target.value;
+        if (value !== "" && !isNaN(Number(value))) {
+          props.onChange({
+            target: { value: Number(value), name: inputProps.name }
+          });
+        }
+      }
     }
   );
 };
 
-const Select = SelectPrimitive.Root;
-const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      SelectPrimitive.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        ),
-        children
-      }
-    )
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-mastra-el-5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     ),
     ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
-    ]
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
   }
 ));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const SelectField = ({ field, inputProps, error, id, value }) => {
-  const { key, ...props } = inputProps;
-  return /* @__PURE__ */ jsxs(
-    Select,
+const BooleanField = ({ field, label, id, inputProps, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+  /* @__PURE__ */ jsx(
+    Checkbox,
     {
-      ...props,
-      onValueChange: (value2) => {
-        const syntheticEvent = {
+      id,
+      onCheckedChange: (checked) => {
+        const event = {
           target: {
-            value: value2,
-            name: inputProps.name
+            name: inputProps.name,
+            value: checked
           }
         };
-        props.onChange(syntheticEvent);
+        inputProps.onChange(event);
+      },
+      defaultChecked: field.default,
+      disabled: inputProps.disabled || inputProps.readOnly
+    }
+  ),
+  /* @__PURE__ */ jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3", htmlFor: id, children: [
+    label,
+    field.required && /* @__PURE__ */ jsx("span", { className: "text-accent2", children: " *" })
+  ] })
+] });
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col space-y-4 sm:space-y-0",
+        month: "space-y-4",
+        // month_caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: "text-sm text-text font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "absolute left-4 top-[56px] z-10"
+        ),
+        nav_button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "absolute right-4 top-[56px] z-10"
+        ),
+        dropdown_month: "w-full border-collapse space-y-1",
+        weeknumber: "flex",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
+          "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected: "!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-lightGray-7/50 text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        // IconDropdown: ({  }) => (
+        //   <CalendarIcon
+        //     className={cn('h-4 w-4', {
+        //       'rotate-180': orientation === 'up',
+        //       'rotate-90': orientation === 'left',
+        //       '-rotate-90': orientation === 'right',
+        //     })}
+        //   />
+        // ),
       },
-      defaultValue: field.default,
-      children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { id, className: error ? "border-destructive" : "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select an option" }) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: (field.options || []).map(([key2, label]) => /* @__PURE__ */ jsx(SelectItem, { value: key2, children: label }, key2)) })
-      ]
+      ...props
     }
   );
-};
+}
+Calendar.displayName = "Calendar";
 
-const ObjectWrapper = ({ label, children }) => {
-  const hasLabel = label !== "​" && label !== "";
-  return /* @__PURE__ */ jsxs("div", { className: "", children: [
-    hasLabel && /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 flex items-center gap-1 pb-2", children: [
-      /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Braces, {}) }),
-      label
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const DatePicker = ({
+  value,
+  setValue,
+  children,
+  className,
+  placeholder,
+  ...props
+}) => {
+  const [openPopover, setOpenPopover] = React.useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: setOpenPopover, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children ? children : /* @__PURE__ */ jsx(
+      DefaultButton,
       {
-        className: hasLabel ? "flex flex-col gap-1 [&>*]:border-dashed [&>*]:border-l [&>*]:border-l-border1 [&>*]:pl-4" : "",
-        children
+        value,
+        placeholder,
+        className,
+        "data-testid": "datepicker-button"
       }
-    )
-  ] });
-};
-
-const ArrayWrapper = ({ label, children, onAddItem }) => {
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-between", children: [
-      /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 pb-2 flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Brackets, {}) }),
-        label
-      ] }),
-      /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "backdrop-blur-4xl w-auto p-0 bg-[#171717]",
+        align: "start",
+        "data-testid": "datepicker-calendar",
+        children: /* @__PURE__ */ jsx(
+          DatePickerOnly,
           {
-            onClick: onAddItem,
-            type: "button",
-            className: "text-icon3 bg-surface3 rounded-md p-1 hover:bg-surface4 hover:text-icon6 h-icon-sm w-icon-sm",
-            children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(PlusIcon, {}) })
+            value,
+            setValue: (v) => setValue(v ? /* @__PURE__ */ new Date(`${v}z`) : null),
+            clearable: props.clearable,
+            setOpenPopover,
+            ...props
           }
-        ) }),
-        /* @__PURE__ */ jsx(TooltipContent, { children: "Add item" })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children })
-  ] });
-};
-
-const ArrayElementWrapper = ({ children, onRemove }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "pl-4 border-l border-border1", children: [
-    children,
-    /* @__PURE__ */ jsxs(Button, { onClick: onRemove, type: "button", children: [
-      /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
-      "Delete"
-    ] })
+        )
+      }
+    )
   ] });
 };
-
-const RecordField = ({ inputProps, field, error, id }) => {
-  const { key, onChange, ...props } = inputProps;
-  const [pairs, setPairs] = React.useState(
-    () => Object.entries(field.default || {}).map(([key2, val]) => ({
-      id: key2 || v4(),
-      key: key2,
-      value: val
-    }))
-  );
-  React.useEffect(() => {
-    if (pairs.length === 0) {
-      setPairs([{ id: v4(), key: "", value: "" }]);
+const DatePickerOnly = ({
+  value,
+  setValue,
+  setOpenPopover,
+  clearable,
+  placeholder,
+  className,
+  ...props
+}) => {
+  const [inputValue, setInputValue] = React.useState(value ? format(value, "PP") : "");
+  const [selected, setSelected] = React.useState(value ? new Date(value) : void 0);
+  const debouncedDateUpdate = useDebouncedCallback((date) => {
+    if (isValid(date)) {
+      setSelected(date);
+      setValue?.(date);
+      setOpenPopover?.(false);
     }
-  }, [pairs]);
-  const updateForm = React.useCallback(
-    (newPairs) => {
-      const newValue = newPairs.reduce(
-        (acc, pair) => {
-          if (pair.key) {
-            acc[pair.key] = pair.value;
-          }
-          return acc;
-        },
-        {}
-      );
-      onChange?.({
-        target: { value: newValue, name: inputProps.name }
-      });
-    },
-    [onChange, inputProps.name]
-  );
-  const handleChange = (id2, field2, newValue) => {
-    setPairs((prev) => prev.map((pair) => pair.id === id2 ? { ...pair, [field2]: newValue } : pair));
-  };
-  const handleBlur = () => {
-    updateForm(pairs);
+  }, 2e3);
+  const handleInputChange = (e) => {
+    setInputValue(e.currentTarget.value);
+    const date = new Date(e.target.value);
+    debouncedDateUpdate(date);
   };
-  const addPair = () => {
-    const newPairs = [...pairs, { id: v4(), key: "", value: "" }];
-    setPairs(newPairs);
-    updateForm(newPairs);
+  const handleDaySelect = (date) => {
+    setSelected(date);
+    setValue?.(date);
+    setOpenPopover?.(false);
+    if (date) {
+      setInputValue(format(date, "PP"));
+    } else {
+      setInputValue("");
+    }
   };
-  const removePair = (id2) => {
-    const newPairs = pairs.filter((p) => p.id !== id2);
-    if (newPairs.length === 0) {
-      newPairs.push({ id: v4(), key: "", value: "" });
+  const handleMonthSelect = (date) => {
+    setSelected(date);
+    if (date) {
+      setInputValue(format(date, "PP"));
+    } else {
+      setInputValue("");
     }
-    setPairs(newPairs);
-    updateForm(newPairs);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    pairs.map((pair) => /* @__PURE__ */ jsxs("div", { className: "relative space-y-2 rounded-lg border p-4", children: [
-      /* @__PURE__ */ jsx(
-        Button$1,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          className: "absolute right-2 top-2",
-          onClick: () => removePair(pair.id),
-          children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Choose date",
+      className: "relative mt-2 flex flex-col gap-2",
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          setOpenPopover?.(false);
         }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-6", children: [
-        /* @__PURE__ */ jsx(
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-full px-3", children: /* @__PURE__ */ jsx(
           Input,
           {
-            placeholder: "Key",
-            value: pair.key,
-            onChange: (e) => handleChange(pair.id, "key", e.target.value),
-            onBlur: handleBlur
+            type: "text",
+            value: inputValue,
+            onChange: handleInputChange,
+            placeholder,
+            className
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx(
-          Input,
+          Calendar,
           {
-            placeholder: "Value",
-            value: pair.value,
-            onChange: (e) => handleChange(pair.id, "value", e.target.value),
-            onBlur: handleBlur
+            mode: "single",
+            month: selected,
+            selected,
+            onMonthChange: handleMonthSelect,
+            onSelect: handleDaySelect,
+            ...props
           }
-        )
-      ] })
-    ] }, pair.id)),
-    /* @__PURE__ */ jsxs(Button$1, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: addPair, children: [
-      /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
-      "Add Key-Value Pair"
-    ] })
-  ] });
+        ),
+        /* @__PURE__ */ jsx("div", { className: "px-3 pb-2", children: clearable && /* @__PURE__ */ jsx(
+          Button$1,
+          {
+            variant: "outline",
+            tabIndex: 0,
+            className: "w-full !opacity-50 duration-200 hover:!opacity-100",
+            onClick: () => {
+              setValue(null);
+              setSelected(void 0);
+              setInputValue("");
+              setOpenPopover?.(false);
+            },
+            children: "Clear"
+          }
+        ) })
+      ]
+    }
+  );
 };
+const DefaultButton = React.forwardRef(
+  ({ value, placeholder, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        ref,
+        variant: "outline",
+        className: cn(
+          "bg-neutral-825 border-neutral-775 w-full justify-start whitespace-nowrap rounded-md border px-2 py-0 text-left flex items-center gap-1",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" }),
+          value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PPP") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
+        ]
+      }
+    );
+  }
+);
+DefaultButton.displayName = "DefaultButton";
 
-const ShadcnUIComponents = {
-  Form,
-  FieldWrapper,
-  ErrorMessage,
-  SubmitButton,
-  ObjectWrapper,
-  ArrayWrapper,
-  ArrayElementWrapper
-};
-function AutoForm({
-  uiComponents,
-  formComponents,
-  readOnly,
-  ...props
-}) {
+const DateField = ({ inputProps, field, error, id }) => {
+  const { key, ...props } = inputProps;
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    if (field.default) {
+      const date = new Date(field.default);
+      if (isValid(date)) {
+        setValue(date);
+      }
+    }
+  }, [field]);
   return /* @__PURE__ */ jsx(
-    AutoForm$1,
+    DatePicker,
     {
-      ...props,
-      uiComponents: { ...ShadcnUIComponents, ...uiComponents },
-      formComponents: {
-        string: (props2) => /* @__PURE__ */ jsx(StringField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
-        number: (props2) => /* @__PURE__ */ jsx(NumberField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
-        boolean: (props2) => /* @__PURE__ */ jsx(BooleanField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
-        date: (props2) => /* @__PURE__ */ jsx(DateField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
-        select: (props2) => /* @__PURE__ */ jsx(SelectField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
-        record: (props2) => /* @__PURE__ */ jsx(RecordField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
-        ...formComponents
-      }
+      id,
+      className: error ? "border-destructive" : "",
+      value,
+      setValue: (date) => {
+        const newDate = date ? new Date(date).toISOString() : date;
+        if (newDate) {
+          props.onChange({
+            target: { value: newDate?.toString(), name: inputProps.name }
+          });
+          setValue(new Date(newDate));
+        }
+      },
+      clearable: true
     }
   );
-}
-
-buildZodFieldConfig();
-
-function inferFieldType(schema, fieldConfig) {
-  if (fieldConfig?.fieldType) {
-    return fieldConfig.fieldType;
-  }
-  if (schema instanceof z.ZodObject) return "object";
-  if (schema instanceof z.ZodNumber) return "number";
-  if (schema instanceof z.ZodBoolean) return "boolean";
-  if (schema instanceof z.ZodDate || schema?.isDatetime || schema?.isDate) return "date";
-  if (schema instanceof z.ZodString) return "string";
-  if (schema instanceof z.ZodEnum) return "select";
-  if (schema instanceof z.ZodNativeEnum) return "select";
-  if (schema instanceof z.ZodArray) return "array";
-  if (schema instanceof z.ZodRecord) return "record";
-  return "string";
-}
-
-function parseField(key, schema) {
-  const baseSchema = getBaseSchema(schema);
-  const fieldConfig = getFieldConfigInZodStack(schema);
-  const type = inferFieldType(baseSchema, fieldConfig);
-  const defaultValue = getDefaultValueInZodStack(schema);
-  const options = baseSchema._def?.values;
-  let optionValues = [];
-  if (options) {
-    if (!Array.isArray(options)) {
-      optionValues = Object.entries(options);
-    } else {
-      optionValues = options.map((value) => [value, value]);
-    }
-  }
-  let subSchema = [];
-  if (baseSchema instanceof z.ZodObject) {
-    subSchema = Object.entries(baseSchema.shape).map(([key2, field]) => parseField(key2, field));
-  }
-  if (baseSchema instanceof z.ZodArray) {
-    subSchema = [parseField("0", baseSchema._def.type)];
-  }
-  return {
-    key,
-    type,
-    required: !schema.isOptional(),
-    default: defaultValue,
-    description: baseSchema.description,
-    fieldConfig,
-    options: optionValues,
-    schema: subSchema
-  };
-}
-function getBaseSchema(schema) {
-  if ("innerType" in schema._def) {
-    return getBaseSchema(schema._def.innerType);
-  }
-  if ("schema" in schema._def) {
-    return getBaseSchema(schema._def.schema);
-  }
-  return schema;
-}
-function parseSchema(schema) {
-  const objectSchema = schema instanceof z.ZodEffects ? schema.innerType() : schema;
-  const shape = objectSchema.shape;
-  const fields = Object.entries(shape).map(([key, field]) => parseField(key, field));
-  return { fields };
-}
-class CustomZodProvider extends ZodProvider {
-  _schema;
-  constructor(schema) {
-    super(schema);
-    this._schema = schema;
-  }
-  parseSchema() {
-    return parseSchema(this._schema);
-  }
-}
-
-const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
+};
 
-function isEmptyZodObject(schema) {
-  if (schema instanceof ZodObject) {
-    return Object.keys(schema.shape).length === 0;
+const Select = SelectPrimitive.Root;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
   }
-  return false;
-}
-function DynamicForm({
-  schema,
-  onSubmit,
-  defaultValues,
-  isSubmitLoading,
-  submitButtonLabel,
-  className,
-  readOnly
-}) {
-  const isNotZodObject = !(schema instanceof ZodObject);
-  if (!schema) {
-    console.error("no form schema found");
-    return null;
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      SelectPrimitive.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        ),
+        children
+      }
+    )
   }
-  const normalizedSchema = (schema2) => {
-    if (isEmptyZodObject(schema2)) {
-      return z$1.object({});
-    }
-    if (isNotZodObject) {
-      return z$1.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, { 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 });
-}
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-mastra-el-5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-function resolveSerializedZodOutput(obj) {
-  return Function("z", `"use strict";return (${obj});`)(z);
-}
+const SelectField = ({ field, inputProps, error, id, value }) => {
+  const { key, ...props } = inputProps;
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      ...props,
+      onValueChange: (value2) => {
+        const syntheticEvent = {
+          target: {
+            value: value2,
+            name: inputProps.name
+          }
+        };
+        props.onChange(syntheticEvent);
+      },
+      defaultValue: field.default,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { id, className: error ? "border-destructive" : "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select an option" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: (field.options || []).map(([key2, label]) => /* @__PURE__ */ jsx(SelectItem, { value: key2, children: label }, key2)) })
+      ]
+    }
+  );
+};
 
-function CodeBlockDemo({
-  code = "",
-  language = "ts",
-  filename,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(CodeBlock$1, { 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,
+const ObjectWrapper = ({ label, children }) => {
+  const hasLabel = label !== "​" && label !== "";
+  return /* @__PURE__ */ jsxs("div", { className: "", children: [
+    hasLabel && /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 flex items-center gap-1 pb-2", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Braces, {}) }),
+      label
+    ] }),
     /* @__PURE__ */ jsx(
-      CodeBlock$1.Code,
+      "div",
       {
-        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$1.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
-          /* @__PURE__ */ jsx(CodeBlock$1.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock$1.Token, { className: "font-mono text-sm mastra-token" }) })
-        ] }) })
+        className: hasLabel ? "flex flex-col gap-1 [&>*]:border-dashed [&>*]:border-l [&>*]:border-l-border1 [&>*]:pl-4" : "",
+        children
       }
     )
   ] });
-}
+};
 
-const WorkflowCard = ({ header, children, footer }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
-    /* @__PURE__ */ jsx("div", { className: "py-1 px-2 flex items-center gap-3", children: header }),
-    children && /* @__PURE__ */ jsx("div", { className: "border-t-sm border-border1", children }),
-    footer && /* @__PURE__ */ jsx("div", { className: "py-1 px-2 border-t-sm border-border1", children: footer })
+const ArrayWrapper = ({ label, children, onAddItem }) => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-between", children: [
+      /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 pb-2 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Brackets, {}) }),
+        label
+      ] }),
+      /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onAddItem,
+            type: "button",
+            className: "text-icon3 bg-surface3 rounded-md p-1 hover:bg-surface4 hover:text-icon6 h-icon-sm w-icon-sm",
+            children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(PlusIcon, {}) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: "Add item" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children })
   ] });
 };
 
-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 ArrayElementWrapper = ({ children, onRemove }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "pl-4 border-l border-border1", children: [
+    children,
+    /* @__PURE__ */ jsxs(Button, { onClick: onRemove, type: "button", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
+      "Delete"
+    ] })
+  ] });
 };
 
-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
-    }
+const RecordField = ({ inputProps, field, error, id }) => {
+  const { key, onChange, ...props } = inputProps;
+  const [pairs, setPairs] = React.useState(
+    () => Object.entries(field.default || {}).map(([key2, val]) => ({
+      id: key2 || v4(),
+      key: key2,
+      value: val
+    }))
   );
-};
-
-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);
+  React.useEffect(() => {
+    if (pairs.length === 0) {
+      setPairs([{ id: v4(), key: "", value: "" }]);
     }
-  }, [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);
+  }, [pairs]);
+  const updateForm = React.useCallback(
+    (newPairs) => {
+      const newValue = newPairs.reduce(
+        (acc, pair) => {
+          if (pair.key) {
+            acc[pair.key] = pair.value;
+          }
+          return acc;
+        },
+        {}
+      );
+      onChange?.({
+        target: { value: newValue, name: inputProps.name }
+      });
+    },
+    [onChange, inputProps.name]
+  );
+  const handleChange = (id2, field2, newValue) => {
+    setPairs((prev) => prev.map((pair) => pair.id === id2 ? { ...pair, [field2]: newValue } : pair));
+  };
+  const handleBlur = () => {
+    updateForm(pairs);
+  };
+  const addPair = () => {
+    const newPairs = [...pairs, { id: v4(), key: "", value: "" }];
+    setPairs(newPairs);
+    updateForm(newPairs);
+  };
+  const removePair = (id2) => {
+    const newPairs = pairs.filter((p) => p.id !== id2);
+    if (newPairs.length === 0) {
+      newPairs.push({ id: v4(), key: "", value: "" });
+    }
+    setPairs(newPairs);
+    updateForm(newPairs);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    pairs.map((pair) => /* @__PURE__ */ jsxs("div", { className: "relative space-y-2 rounded-lg border p-4", children: [
+      /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "absolute right-2 top-2",
+          onClick: () => removePair(pair.id),
+          children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
         }
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        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,
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-6", children: [
+        /* @__PURE__ */ jsx(
+          Input,
           {
-            className: "w-full overflow-x-auto p-2",
-            code: JSON.stringify(step.suspendPayload, null, 2),
-            language: "json"
+            placeholder: "Key",
+            value: pair.key,
+            onChange: (e) => handleChange(pair.id, "key", e.target.value),
+            onBlur: handleBlur
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
-          DynamicForm,
+          Input,
           {
-            schema: stepSchema,
-            isSubmitLoading: isResumingWorkflow,
-            submitButtonLabel: "Resume",
-            onSubmit: (data) => {
-              handleResumeWorkflow({
-                stepId: step.stepId,
-                runId: step.runId,
-                suspendPayload: step.suspendPayload,
-                context: data
-              });
-            }
+            placeholder: "Value",
+            value: pair.value,
+            onChange: (e) => handleChange(pair.id, "value", e.target.value),
+            onBlur: handleBlur
           }
         )
-      ] });
-    }),
-    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) })
+      ] })
+    ] }, pair.id)),
+    /* @__PURE__ */ jsxs(Button$1, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: addPair, children: [
+      /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+      "Add Key-Value Pair"
     ] })
-  ] }) });
-}
-
-const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SliderPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-const ZoomSlider = forwardRef(({ className, ...props }) => {
-  const { zoom } = useViewport();
-  const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
-  return /* @__PURE__ */ jsxs(Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
-    /* @__PURE__ */ jsx(Button$1, { 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$1, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsxs(Button$1, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
-      (100 * zoom).toFixed(0),
-      "%"
-    ] }),
-    /* @__PURE__ */ jsx(Button$1, { 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 }) {
-  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, ...props }),
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...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,
+const ShadcnUIComponents = {
+  Form,
+  FieldWrapper,
+  ErrorMessage,
+  SubmitButton,
+  ObjectWrapper,
+  ArrayWrapper,
+  ArrayElementWrapper
+};
+function AutoForm({
+  uiComponents,
+  formComponents,
+  readOnly,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AutoForm$1,
     {
-      nodes,
-      edges: edges.map((e) => ({
-        ...e,
-        style: {
-          ...e.style,
-          stroke: steps[`${workflowName}.${e.data?.previousStepId}`]?.status === "success" && steps[`${workflowName}.${e.data?.nextStepId}`] ? "#22c55e" : void 0
-        }
-      })),
-      fitView: true,
-      fitViewOptions: {
-        maxZoom: 1
-      },
-      minZoom: 0.01,
-      maxZoom: 1,
-      nodeTypes,
-      onNodesChange,
-      children: [
-        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
-        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
-      ]
+      ...props,
+      uiComponents: { ...ShadcnUIComponents, ...uiComponents },
+      formComponents: {
+        string: (props2) => /* @__PURE__ */ jsx(StringField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        number: (props2) => /* @__PURE__ */ jsx(NumberField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        boolean: (props2) => /* @__PURE__ */ jsx(BooleanField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        date: (props2) => /* @__PURE__ */ jsx(DateField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        select: (props2) => /* @__PURE__ */ jsx(SelectField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        record: (props2) => /* @__PURE__ */ jsx(RecordField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        ...formComponents
+      }
     }
-  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
+  );
 }
 
-const WorkflowNestedGraphContext = createContext(
-  {}
-);
-function WorkflowNestedGraphProvider({ children }) {
-  const [stepGraph, setStepGraph] = useState(null);
-  const [parentStepGraphList, setParentStepGraphList] = useState([]);
-  const [openDialog, setOpenDialog] = useState(false);
-  const [label, setLabel] = useState("");
-  const [fullStep, setFullStep] = useState("");
-  const [switching, setSwitching] = useState(false);
-  const closeNestedGraph = () => {
-    if (parentStepGraphList.length) {
-      setSwitching(true);
-      const lastStepGraph = parentStepGraphList[parentStepGraphList.length - 1];
-      setStepGraph(lastStepGraph.stepGraph);
-      setLabel(lastStepGraph.label);
-      setFullStep(lastStepGraph.fullStep);
-      setParentStepGraphList(parentStepGraphList.slice(0, -1));
-      setTimeout(() => {
-        setSwitching(false);
-      }, 500);
+buildZodFieldConfig();
+
+function inferFieldType(schema, fieldConfig) {
+  if (fieldConfig?.fieldType) {
+    return fieldConfig.fieldType;
+  }
+  if (schema instanceof z.ZodObject) return "object";
+  if (schema instanceof z.ZodNumber) return "number";
+  if (schema instanceof z.ZodBoolean) return "boolean";
+  if (schema instanceof z.ZodDate || schema?.isDatetime || schema?.isDate) return "date";
+  if (schema instanceof z.ZodString) return "string";
+  if (schema instanceof z.ZodEnum) return "select";
+  if (schema instanceof z.ZodNativeEnum) return "select";
+  if (schema instanceof z.ZodArray) return "array";
+  if (schema instanceof z.ZodRecord) return "record";
+  return "string";
+}
+
+function parseField(key, schema) {
+  const baseSchema = getBaseSchema(schema);
+  const fieldConfig = getFieldConfigInZodStack(schema);
+  const type = inferFieldType(baseSchema, fieldConfig);
+  const defaultValue = getDefaultValueInZodStack(schema);
+  const options = baseSchema._def?.values;
+  let optionValues = [];
+  if (options) {
+    if (!Array.isArray(options)) {
+      optionValues = Object.entries(options);
     } else {
-      setOpenDialog(false);
-      setStepGraph(null);
-      setLabel("");
-      setFullStep("");
+      optionValues = options.map((value) => [value, value]);
     }
+  }
+  let subSchema = [];
+  if (baseSchema instanceof z.ZodObject) {
+    subSchema = Object.entries(baseSchema.shape).map(([key2, field]) => parseField(key2, field));
+  }
+  if (baseSchema instanceof z.ZodArray) {
+    subSchema = [parseField("0", baseSchema._def.type)];
+  }
+  return {
+    key,
+    type,
+    required: !schema.isOptional(),
+    default: defaultValue,
+    description: baseSchema.description,
+    fieldConfig,
+    options: optionValues,
+    schema: subSchema
   };
-  const showNestedGraph = ({
-    label: newLabel,
-    stepGraph: newStepGraph,
-    fullStep: newFullStep
-  }) => {
-    if (stepGraph) {
-      setSwitching(true);
-      setParentStepGraphList([...parentStepGraphList, { stepGraph, label, fullStep }]);
+}
+function getBaseSchema(schema) {
+  if ("innerType" in schema._def) {
+    return getBaseSchema(schema._def.innerType);
+  }
+  if ("schema" in schema._def) {
+    return getBaseSchema(schema._def.schema);
+  }
+  return schema;
+}
+function parseSchema(schema) {
+  const objectSchema = schema instanceof z.ZodEffects ? schema.innerType() : schema;
+  const shape = objectSchema.shape;
+  const fields = Object.entries(shape).map(([key, field]) => parseField(key, field));
+  return { fields };
+}
+class CustomZodProvider extends ZodProvider {
+  _schema;
+  constructor(schema) {
+    super(schema);
+    this._schema = schema;
+  }
+  parseSchema() {
+    return parseSchema(this._schema);
+  }
+}
+
+const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+function isEmptyZodObject(schema) {
+  if (schema instanceof ZodObject) {
+    return Object.keys(schema.shape).length === 0;
+  }
+  return false;
+}
+function DynamicForm({
+  schema,
+  onSubmit,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel,
+  className,
+  readOnly
+}) {
+  const isNotZodObject = !(schema instanceof ZodObject);
+  if (!schema) {
+    console.error("no form schema found");
+    return null;
+  }
+  const normalizedSchema = (schema2) => {
+    if (isEmptyZodObject(schema2)) {
+      return z$1.object({});
     }
-    setLabel(newLabel);
-    setFullStep(newFullStep);
-    setStepGraph(newStepGraph);
-    setOpenDialog(true);
-    setTimeout(() => {
-      setSwitching(false);
-    }, 500);
-  };
-  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-2.5 left-2.5", children: [
-            /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
-            /* @__PURE__ */ jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
-              label,
-              " workflow"
-            ] })
-          ] }),
-          switching ? /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowNestedGraph, { stepGraph, open: openDialog, workflowName: fullStep }) })
-        ] }) }) })
-      ]
+    if (isNotZodObject) {
+      return z$1.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, { 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 WorkflowNestedNode({
-  data,
-  parentWorkflowName
+function resolveSerializedZodOutput(obj) {
+  return Function("z", `"use strict";return (${obj});`)(z);
+}
+
+function CodeBlockDemo({
+  code = "",
+  language = "ts",
+  filename,
+  className
 }) {
-  const [isInputOpen, setIsInputOpen] = useState(false);
-  const [isOutputOpen, setIsOutputOpen] = useState(false);
-  const [isErrorOpen, setIsErrorOpen] = useState(false);
-  const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
-  const { steps, isRunning } = useCurrentRun();
-  const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
-  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig } = data;
-  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
-  const step = steps[fullLabel];
-  const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
-  const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsxs(
-      "div",
+  return /* @__PURE__ */ jsxs(CodeBlock$1, { 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$1.Code,
       {
-        className: cn(
-          "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
-          step?.status === "success" && "ring-2 ring-accent1",
-          step?.status === "failed" && "ring-2 ring-accent2"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
-            isRunning && /* @__PURE__ */ jsxs(Icon, { children: [
-              step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
-              step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
-              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-icon3" }),
-              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon6 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__ */ jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
-            /* @__PURE__ */ jsx(Button, { onClick: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }), children: "View workflow" }),
-            mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
-              /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " map config"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
-              ] }) })
-            ] }),
-            step?.input && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
-              /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " input"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.input }) })
-              ] }) })
-            ] }),
-            step?.output && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
-              /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " output"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.output }) })
-              ] }) })
-            ] }),
-            step?.error && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
-              /* @__PURE__ */ jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " error"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step?.error }) })
-              ] }) })
-            ] })
-          ] })
-        ]
+        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$1.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
+          /* @__PURE__ */ jsx(CodeBlock$1.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock$1.Token, { className: "font-mono text-sm mastra-token" }) })
+        ] }) })
       }
-    ),
-    !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
+    )
   ] });
 }
 
-function WorkflowGraphInner({ workflow, onShowTrace }) {
-  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, ...props }),
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": WorkflowNestedNode
-  };
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxs(
-    ReactFlow,
+const WorkflowCard = ({ header, children, footer }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
+    /* @__PURE__ */ jsx("div", { className: "py-1 px-2 flex items-center gap-3", children: header }),
+    children && /* @__PURE__ */ jsx("div", { className: "border-t-sm border-border1", children }),
+    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,
     {
-      nodes,
-      edges: edges.map((e) => ({
-        ...e,
-        style: {
-          ...e.style,
-          stroke: steps[e.data?.previousStepId]?.status === "success" && steps[e.data?.nextStepId] ? "#22c55e" : void 0
+      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"
         }
-      })),
-      nodeTypes,
-      onNodesChange,
-      fitView: true,
-      fitViewOptions: {
-        maxZoom: 1
-      },
-      minZoom: 0.01,
-      maxZoom: 1,
-      children: [
-        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
-        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 12, size: 0.5 })
-      ]
+      ),
+      children: expanded ? /* @__PURE__ */ jsx(CodeBlockDemo, { className: "w-full overflow-x-auto", code: sanitizedJsonResult || jsonResult, language: "json" }) : null
     }
-  ) });
-}
+  );
+};
 
-function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
-  const { snapshot } = useContext(WorkflowRunContext);
+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("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(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" })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
-    WorkflowGraphInner,
-    {
-      workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
-      onShowTrace
-    }
-  ) }) }, snapshot?.runId ?? workflowId);
+  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,
+      {
+        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) })
+    ] })
+  ] }) });
 }
 
 function WorkflowTrigger({
@@ -10308,5 +10961,5 @@ function usePolling({
   };
 }
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTraces, WorkflowTrigger, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTraces, WorkflowTrigger, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition };
 //# sourceMappingURL=index.es.js.map