@mastra/playground-ui 1.0.0-alpha.8 → 1.0.0

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { useState, useRef, useCallback, useEffect, useLayoutEffect, Suspense, useMemo, forwardRef, memo, createContext, useContext, Fragment as Fragment$1 } from 'react';
 import { useSWRConfig } from 'swr';
 import { MastraClient } from '@mastra/client-js';
-import { Check, Copy, X, FileIcon, Paperclip, Square, ArrowUp, Dot, ArrowDown, CheckIcon, CopyIcon, ChevronLeftIcon, ChevronRightIcon, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Footprints, AlertCircleIcon } from 'lucide-react';
+import { Check, Copy, X, FileIcon, Paperclip, Square, ArrowUp, Dot, ArrowDown, CheckIcon, CopyIcon, ChevronLeftIcon, ChevronRightIcon, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Footprints, AlertCircleIcon, Plus, CalendarIcon, Loader2 } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { omit } from 'remeda';
 import { motion, AnimatePresence } from 'motion/react';
@@ -16,7 +16,7 @@ import { unstable_memoizeMarkdownComponents, useIsMarkdownCodeBlock, MarkdownTex
 import '@assistant-ui/react-markdown/styles/dot.css';
 import { makePrismAsyncSyntaxHighlighter } from '@assistant-ui/react-syntax-highlighter';
 import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { format, formatDistanceToNow } from 'date-fns';
+import { format, formatDistanceToNow, isValid } from 'date-fns';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { toast } from 'sonner';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -28,6 +28,23 @@ import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-tabl
 import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, MiniMap, Background, BackgroundVariant } 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 jsonSchemaToZod from 'json-schema-to-zod';
+import { parse } from 'superjson';
+import * as z from 'zod';
+import { z as z$1, ZodNumber, ZodBoolean, ZodDate, ZodLiteral, ZodEnum, ZodArray, ZodUnion } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useFieldArray, Controller, useWatch, useForm } from 'react-hook-form';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { Command as Command$1 } from 'cmdk';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { useDebouncedCallback } from 'use-debounce';
+import { DayPicker } from 'react-day-picker';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { v4 } from '@lukeed/uuid';
+import { CodeBlock as CodeBlock$1 } from 'react-code-block';
 
 import './index.css';function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2820,7 +2837,7 @@ const Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-function useCopyToClipboard$1({ text, copyMessage = "Copied to clipboard!" }) {
+function useCopyToClipboard$2({ text, copyMessage = "Copied to clipboard!" }) {
   const [isCopied, setIsCopied] = useState(false);
   const [error, setError] = useState("");
   const timeoutRef = useRef(null);
@@ -2841,8 +2858,8 @@ function useCopyToClipboard$1({ text, copyMessage = "Copied to clipboard!" }) {
   return { isCopied, handleCopy, error };
 }
 
-function CopyButton({ content, copyMessage, classname }) {
-  const { isCopied, handleCopy } = useCopyToClipboard$1({
+function CopyButton$1({ content, copyMessage, classname }) {
+  const { isCopied, handleCopy } = useCopyToClipboard$2({
     text: content,
     copyMessage
   });
@@ -3262,7 +3279,7 @@ const CodeBlock = ({ children, className, language, ...restProps }) => {
         children: /* @__PURE__ */ jsx(HighlightedPre, { language, className: preClass, children: code })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ jsx(CopyButton, { content: code, copyMessage: "Copied code to clipboard" }) })
+    /* @__PURE__ */ jsx("div", { className: "invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ jsx(CopyButton$1, { content: code, copyMessage: "Copied code to clipboard" }) })
   ] });
 };
 function childrenTakeAllStringContents(element) {
@@ -3754,7 +3771,7 @@ const MarkdownTextImpl = () => {
 };
 const MarkdownText = memo(MarkdownTextImpl);
 const CodeHeader = ({ language, code }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const { isCopied, copyToClipboard } = useCopyToClipboard$1();
   const onCopy = () => {
     if (!code || isCopied) return;
     copyToClipboard(code);
@@ -3801,7 +3818,7 @@ const CodeHeader = ({ language, code }) => {
     }
   );
 };
-const useCopyToClipboard = ({
+const useCopyToClipboard$1 = ({
   copiedDuration = 1500
 } = {}) => {
   const [isCopied, setIsCopied] = useState(false);
@@ -6097,44 +6114,126 @@ const useWorkflow = (workflowId, baseUrl) => {
   }, [workflowId]);
   return { workflow, isLoading };
 };
+const useExecuteWorkflow = (baseUrl) => {
+  const [isExecutingWorkflow, setIsExecutingWorkflow] = useState(false);
+  const client = new MastraClient({
+    baseUrl: baseUrl || ""
+  });
+  const executeWorkflow = async ({ workflowId, input }) => {
+    try {
+      setIsExecutingWorkflow(true);
+      const response = await client.getWorkflow(workflowId).execute(input || {});
+      return response;
+    } catch (error) {
+      console.error("Error executing workflow:", error);
+      throw error;
+    } finally {
+      setIsExecutingWorkflow(false);
+    }
+  };
+  const createWorkflowRun = async ({ workflowId, input }) => {
+    try {
+      const response = await client.getWorkflow(workflowId).startRun(input || {});
+      return response;
+    } catch (error) {
+      console.error("Error creating workflow run:", error);
+      throw error;
+    }
+  };
+  return { executeWorkflow, createWorkflowRun, isExecutingWorkflow };
+};
+const useWatchWorkflow = (baseUrl) => {
+  const [isWatchingWorkflow, setIsWatchingWorkflow] = useState(false);
+  const [watchResult, setWatchResult] = useState(null);
+  const watchWorkflow = async ({ workflowId, runId }) => {
+    try {
+      setIsWatchingWorkflow(true);
+      const client = new MastraClient({
+        baseUrl
+      });
+      const watchSubscription = client.getWorkflow(workflowId).watch({ runId });
+      if (!watchSubscription) {
+        throw new Error("Error watching workflow");
+      }
+      for await (const record of watchSubscription) {
+        setWatchResult(record);
+      }
+    } catch (error) {
+      console.error("Error watching workflow:", error);
+      throw error;
+    } finally {
+      setIsWatchingWorkflow(false);
+    }
+  };
+  return { watchWorkflow, isWatchingWorkflow, watchResult };
+};
+const useResumeWorkflow = (baseUrl) => {
+  const [isResumingWorkflow, setIsResumingWorkflow] = useState(false);
+  const resumeWorkflow = async ({
+    workflowId,
+    stepId,
+    runId,
+    context
+  }) => {
+    try {
+      setIsResumingWorkflow(true);
+      const client = new MastraClient({
+        baseUrl: baseUrl || ""
+      });
+      const response = await client.getWorkflow(workflowId).resume({ stepId, runId, context });
+      return response;
+    } catch (error) {
+      console.error("Error resuming workflow:", error);
+      throw error;
+    } finally {
+      setIsResumingWorkflow(false);
+    }
+  };
+  return { resumeWorkflow, isResumingWorkflow };
+};
 
-function extractConditions(group) {
+function extractConditions(group, type) {
   let result = [];
   if (!group) return result;
   function recurse(group2, conj) {
-    const simpleCondition = Object.entries(group2).find(([key]) => key.includes("."));
-    if (simpleCondition) {
-      const [key, queryValue] = simpleCondition;
-      const [stepId, ...pathParts] = key.split(".");
-      const ref = {
-        step: {
-          id: stepId
-        },
-        path: pathParts.join(".")
-      };
-      result.push({
-        ref,
-        query: { [queryValue === true || queryValue === false ? "is" : "eq"]: String(queryValue) },
-        conj
-      });
-    }
-    if ("ref" in group2) {
-      const { ref, query } = group2;
-      result.push({ ref, query, conj });
-    }
-    if ("and" in group2) {
-      for (const subGroup of group2.and) {
-        recurse({ ...subGroup }, "and");
+    if (typeof group2 === "string") {
+      result.push({ type, fnString: group2 });
+    } else {
+      const simpleCondition = Object.entries(group2).find(([key]) => key.includes("."));
+      if (simpleCondition) {
+        const [key, queryValue] = simpleCondition;
+        const [stepId, ...pathParts] = key.split(".");
+        const ref = {
+          step: {
+            id: stepId
+          },
+          path: pathParts.join(".")
+        };
+        result.push({
+          type,
+          ref,
+          query: { [queryValue === true || queryValue === false ? "is" : "eq"]: String(queryValue) },
+          conj
+        });
       }
-    }
-    if ("or" in group2) {
-      for (const subGroup of group2.or) {
-        recurse({ ...subGroup }, "or");
+      if ("ref" in group2) {
+        const { ref, query } = group2;
+        result.push({ type, ref, query, conj });
+      }
+      if ("and" in group2) {
+        for (const subGroup of group2.and) {
+          recurse({ ...subGroup }, "and");
+        }
+      }
+      if ("or" in group2) {
+        for (const subGroup of group2.or) {
+          recurse({ ...subGroup }, "or");
+        }
       }
     }
   }
   recurse(group);
-  return result;
+  return result.reverse();
 }
 const getLayoutedElements = (nodes, edges) => {
   const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
@@ -6144,7 +6243,7 @@ const getLayoutedElements = (nodes, edges) => {
     (node) => g.setNode(node.id, {
       ...node,
       width: node.measured?.width ?? 274,
-      height: node.measured?.height ?? 100
+      height: node.measured?.height ?? (node?.data?.isLarge ? 260 : 100)
     })
   );
   Dagre.layout(g);
@@ -6152,7 +6251,7 @@ const getLayoutedElements = (nodes, edges) => {
     nodes: nodes.map((node) => {
       const position = g.node(node.id);
       const x = position.x - (node.measured?.width ?? 274) / 2;
-      const y = position.y - (node.measured?.height ?? 100) / 2;
+      const y = position.y - (node.measured?.height ?? (node?.data?.isLarge ? 260 : 100)) / 2;
       return { ...node, position: { x, y } };
     }),
     edges
@@ -6190,16 +6289,21 @@ const contructNodesAndEdges = ({
         type: "default-node",
         id: nodes.some((node) => node.id === step2.step.id) ? `${step2.step.id}-${i}` : step2.step.id
       };
-      if (step2.config?.when) {
-        const conditions = extractConditions(step2.config.when);
+      let conditionType = "when";
+      if (step2.config?.serializedWhen) {
+        conditionType = step2.step.id === "__start_if" ? "if" : step2.step.id === "__start_else" ? "else" : "when";
+        const conditions = extractConditions(step2.config.serializedWhen, conditionType);
         const conditionStep = {
           id: crypto.randomUUID(),
           conditions,
-          type: "condition-node"
+          type: "condition-node",
+          isLarge: (conditions?.length > 1 || conditions.some(({ fnString }) => !!fnString)) && conditionType !== "else"
         };
         acc.push(conditionStep);
       }
-      acc.push(newStep);
+      if (conditionType === "when") {
+        acc.push(newStep);
+      }
       return acc;
     }, []);
     const newNodes = [...steps].map((step2, index) => {
@@ -6213,7 +6317,8 @@ const contructNodesAndEdges = ({
           label: step2.label,
           description: step2.description,
           withoutTopHandle: subscriberGraph?.[step2.id] ? false : index === 0,
-          withoutBottomHandle: subscriberGraph ? false : index === steps.length - 1
+          withoutBottomHandle: subscriberGraph ? false : index === steps.length - 1,
+          isLarge: step2.isLarge
         }
       };
     });
@@ -6245,16 +6350,21 @@ const contructNodesAndEdges = ({
             type: "default-node",
             id: nodes.some((node) => node.id === step2.step.id) ? `${step2.step.id}-${i}` : step2.step.id
           };
-          if (step2.config?.when) {
-            const conditions = extractConditions(step2.config.when);
+          let conditionType = "when";
+          if (step2.config?.serializedWhen) {
+            conditionType = step2.step.id === "__start_if" ? "if" : step2.step.id === "__start_else" ? "else" : "when";
+            const conditions = extractConditions(step2.config.serializedWhen, conditionType);
             const conditionStep = {
               id: crypto.randomUUID(),
               conditions,
-              type: "condition-node"
+              type: "condition-node",
+              isLarge: (conditions?.length > 1 || conditions.some(({ fnString }) => !!fnString)) && conditionType !== "else"
             };
             acc.push(conditionStep);
           }
-          acc.push(newStep);
+          if (conditionType === "when") {
+            acc.push(newStep);
+          }
           return acc;
         }, []);
         const newNodes = [...steps].map((step2, index) => {
@@ -6267,7 +6377,8 @@ const contructNodesAndEdges = ({
               conditions: step2.conditions,
               label: step2.label,
               description: step2.description,
-              withoutBottomHandle: originalSteps.some(({ id }) => id === step2.label && id !== step2.id) || subscriberGraph ? false : index === steps.length - 1
+              withoutBottomHandle: originalSteps.some(({ id }) => id === step2.label && id !== step2.id) || subscriberGraph ? false : index === steps.length - 1,
+              isLarge: step2.isLarge
             }
           };
         });
@@ -6337,35 +6448,80 @@ const Text = ({ className, weight, variant, as: Tag = "span", size, ...props })
   return /* @__PURE__ */ jsx(Tag, { className: cn(textVariants({ size, variant, weight, className })), ...props });
 };
 
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
 function WorkflowConditionNode({ data }) {
   const { conditions } = data;
-  return /* @__PURE__ */ jsxs("div", { className: cn("bg-mastra-bg-3 rounded-md min-w-[154.23px] max-w-[274px] flex flex-col p-2 gap-2"), children: [
-    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-    conditions.map((condition, index) => {
-      return /* @__PURE__ */ jsx(Fragment$1, { children: condition.ref.step ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "xs",
-            weight: "medium",
-            className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px]",
-            children: condition.conj?.toLocaleUpperCase() || "WHEN"
-          }
-        ),
-        /* @__PURE__ */ jsxs(Text, { size: "xs", className: " text-mastra-el-3", children: [
-          condition.ref.step.id || condition.ref.step,
-          "'s ",
-          condition.ref.path,
-          " ",
-          Object.entries(condition.query).map(([key, value]) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
-            /* @__PURE__ */ jsx(Text, { size: "xs", className: "lowercase", children: key }),
-            /* @__PURE__ */ jsx(Text, { size: "xs", children: value })
-          ] }, `${key}-${value}`))
-        ] })
-      ] }) : null }, `${condition.ref.path}-${index}`);
-    }),
-    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
-  ] });
+  const [open, setOpen] = useState(true);
+  const type = conditions[0]?.type;
+  const isCollapsible = (conditions.some((condition) => condition.fnString) || conditions?.length > 1) && type !== "else";
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open: !isCollapsible ? true : open,
+      onOpenChange: (_open) => {
+        if (isCollapsible) {
+          setOpen(_open);
+        }
+      },
+      className: cn("bg-mastra-bg-3 rounded-md w-[274px] flex flex-col p-2 gap-2"),
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              weight: "medium",
+              className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px] w-fit",
+              children: type.toUpperCase()
+            }
+          ),
+          isCollapsible && /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn("w-4 h-4 transition-transform", {
+                "transform rotate-180": open
+              })
+            }
+          )
+        ] }),
+        type === "else" ? null : /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-2", children: conditions.map((condition, index) => {
+          return condition.fnString ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
+            "pre",
+            {
+              className: `${className} relative font-mono text-sm overflow-x-auto p-3 w-full rounded-lg mt-2 dark:bg-zinc-800`,
+              style: { ...style, maxHeight: "9.62rem" },
+              children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
+                /* @__PURE__ */ jsx("span", { className: "inline-block mr-2 text-muted-foreground", children: i + 1 }),
+                line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
+              ] }, i))
+            }
+          ) }) }, `${condition.fnString}-${index}`) : /* @__PURE__ */ jsx(Fragment$1, { children: condition.ref?.step ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            index === 0 ? null : /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "xs",
+                weight: "medium",
+                className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px]",
+                children: condition.conj?.toLocaleUpperCase() || "WHEN"
+              }
+            ),
+            /* @__PURE__ */ jsxs(Text, { size: "xs", className: " text-mastra-el-3 flex-1", children: [
+              condition.ref.step.id || condition.ref.step,
+              "'s ",
+              condition.ref.path,
+              " ",
+              Object.entries(condition.query).map(([key, value]) => `${key} ${String(value)}`)
+            ] })
+          ] }) : null }, `${condition.ref?.path}-${index}`);
+        }) }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
+      ]
+    }
+  );
 }
 
 function WorkflowDefaultNode({ data }) {
@@ -6413,6 +6569,9 @@ const lodashTitleCase = (str) => {
   const camelCased = str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase());
   return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
 };
+const toTitleCase = (str, splitChar = " ") => {
+  return str.split(splitChar).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+};
 
 function WorkflowGraph({ workflowId, baseUrl }) {
   const { workflow, isLoading } = useWorkflow(workflowId, baseUrl);
@@ -6476,5 +6635,1499 @@ const WorkflowsTable = ({
   );
 };
 
-export { AgentChat, AgentEvals, AgentTraces, AgentsTable, Chat, WorkflowGraph, WorkflowTraces, WorkflowsTable };
+const transformToNestObject = (error) => {
+  const fieldErrors = {};
+  error.errors.forEach((err) => {
+    if (err.path.length > 0) {
+      const path = err.path.join(".");
+      fieldErrors[path] = {
+        type: "validation",
+        message: err.message
+      };
+    }
+  });
+  return fieldErrors;
+};
+function resolveSerializedZodOutput(obj) {
+  return Function("z", `"use strict";return (${obj});`)(z$1);
+}
+
+const customZodUnionResolver = (schemaUnion, discriminator) => {
+  return async (values) => {
+    const schema = schemaUnion?._def?.options?.find(
+      (option) => option?.shape?.[discriminator]?._def?.value === values[discriminator]
+    ) || z$1.object({ [discriminator]: z$1.string() });
+    const filteredValues = Object.fromEntries(Object.entries(values).filter(([key]) => schema?.shape?.[key]));
+    const result = schema.safeParse(filteredValues);
+    if (result.success) {
+      return { values: result.data, errors: {} };
+    } else {
+      const errors = transformToNestObject(result.error);
+      return { values: {}, errors };
+    }
+  };
+};
+
+function ArrayField({ name, control, renderField, isStringField }) {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 w-full", children: [
+    fields.map((field, index) => /* @__PURE__ */ jsxs("div", { className: "relative w-full flex items-center gap-2", children: [
+      renderField({ fieldName: `${name}.${index}`, index }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "absolute -right-2 -top-2",
+          onClick: () => remove(index),
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }, field.id)),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "w-full",
+        onClick: () => append(isStringField ? { root: "" } : {}),
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+          "Add Item"
+        ]
+      }
+    )
+  ] });
+}
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-mastra-bg-7 data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+function BooleanField({ name, control, handleFieldChange }) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: field.value,
+          onCheckedChange: (checked) => {
+            field.onChange(checked);
+            handleFieldChange?.({ key: name, value: checked });
+          }
+        }
+      )
+    }
+  );
+}
+
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, { ref, className: cn("-mx-1 h-px bg-border", className), ...props }));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+
+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;
+
+function CreatableField({ name, control, options = [], handleFieldChange, placeholder }) {
+  const [openPopover, setOpenPopover] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => {
+        const selectedValues = field.value || [];
+        const removeValue = (valueToRemove) => {
+          const newValues = selectedValues.filter((v) => v !== valueToRemove);
+          field.onChange(newValues);
+          handleFieldChange?.({ key: name, value: newValues });
+        };
+        const addValue = (value) => {
+          if (!value) return;
+          const newValues = [...selectedValues, value];
+          field.onChange(newValues);
+          handleFieldChange?.({ key: name, value: newValues });
+          setInputValue("");
+          setOpenPopover(false);
+        };
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedValues.map((value) => /* @__PURE__ */ jsxs(Badge, { className: "flex items-center gap-1", children: [
+            value,
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-4 w-4 p-0", onClick: () => removeValue(value), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+          ] }, value)) }),
+          /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: setOpenPopover, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "w-full justify-start", children: [
+              /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+              placeholder || "Add item"
+            ] }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+              /* @__PURE__ */ jsx(CommandInput, { placeholder: "Enter value...", value: inputValue, onValueChange: setInputValue }),
+              /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(CommandGroup, { children: [
+                options.filter((opt) => !selectedValues.includes(opt.value)).map((option) => /* @__PURE__ */ jsx(CommandItem, { onSelect: () => addValue(option.value), children: option.label }, option.value)),
+                inputValue && /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => addValue(inputValue), children: [
+                  'Create "',
+                  inputValue,
+                  '"'
+                ] })
+              ] }) })
+            ] }) })
+          ] })
+        ] });
+      }
+    }
+  );
+}
+
+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",
+        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"
+        ),
+        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"
+        ),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        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"
+        ),
+        range_start: "day-range-start",
+        range_end: "day-range-end",
+        selected: "!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        today: "bg-lightGray-7/50 text-accent-foreground",
+        outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        Chevron: ({ orientation }) => /* @__PURE__ */ jsx(
+          CalendarIcon,
+          {
+            className: cn("h-4 w-4", {
+              "rotate-180": orientation === "up",
+              "rotate-90": orientation === "left",
+              "-rotate-90": orientation === "right"
+            })
+          }
+        )
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+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,
+      {
+        value,
+        placeholder,
+        className,
+        "data-testid": "datepicker-button"
+      }
+    ) }),
+    /* @__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
+          }
+        )
+      }
+    )
+  ] });
+};
+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);
+    }
+  }, 2e3);
+  const handleInputChange = (e) => {
+    setInputValue(e.currentTarget.value);
+    const date = new Date(e.target.value);
+    debouncedDateUpdate(date);
+  };
+  const handleDaySelect = (date) => {
+    setSelected(date);
+    setValue?.(date);
+    setOpenPopover?.(false);
+    if (date) {
+      setInputValue(format(date, "PP"));
+    } else {
+      setInputValue("");
+    }
+  };
+  const handleMonthSelect = (date) => {
+    setSelected(date);
+    if (date) {
+      setInputValue(format(date, "PP"));
+    } else {
+      setInputValue("");
+    }
+  };
+  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);
+        }
+      },
+      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,
+          {
+            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,
+      {
+        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";
+
+function DateField({ name, control, handleFieldChange }) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          value: field.value,
+          setValue: (date) => {
+            const newDate = date ? new Date(date).toISOString() : date;
+            field.onChange(newDate);
+            handleFieldChange?.({ key: name, value: newDate });
+          }
+        }
+      )
+    }
+  );
+}
+
+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,
+  {
+    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 EnumField({ name, control, options, handleFieldChange }) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: field.value,
+          onValueChange: (value) => {
+            field.onChange(value);
+            handleFieldChange?.({ key: name, value });
+          },
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select an option" }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, className: "text-white", children: option.label }, option.value)) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+
+function StringField({ name, control, handleFieldChange, isMultiline, placeholder }) {
+  const Component = isMultiline ? Textarea : Input;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...field,
+          className: "w-full",
+          placeholder,
+          onChange: (e) => {
+            field.onChange(e);
+            handleFieldChange?.({ key: name, value: e.target.value });
+          }
+        }
+      )
+    }
+  );
+}
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+const getPath = (object, path) => {
+  if (typeof path === "string") {
+    path = path?.split(".");
+  }
+  return path?.reduce((obj, key) => obj && obj[key] !== void 0 ? obj[key] : void 0, object);
+};
+const flattenObject = (object, endKeys = [], flattenArrayValue) => {
+  let newObj = {};
+  function recurseDip(obj, path) {
+    for (const [key, value] of Object.entries(obj)) {
+      let newPath = [...path, key];
+      if (value && value.constructor === Object) {
+        const hasOnlyEndKeys = endKeys?.length ? endKeys.every((v) => Object.keys(value).includes(v)) : false;
+        if (hasOnlyEndKeys) {
+          newObj = { ...newObj, [newPath.join(".")]: value };
+        } else {
+          recurseDip(value, newPath);
+        }
+      } else if (Array.isArray(value)) {
+        const contructValue = value.reduce((a, b) => ({ ...a, [value.indexOf(b)]: b }), {});
+        recurseDip(contructValue, newPath);
+      } else {
+        newObj = { ...newObj, [newPath.join(".")]: value };
+      }
+    }
+  }
+  recurseDip(object, []);
+  return newObj;
+};
+
+var FormConfigType = /* @__PURE__ */ ((FormConfigType2) => {
+  FormConfigType2["STRING"] = "STRING";
+  FormConfigType2["NUMBER"] = "NUMBER";
+  FormConfigType2["DATE"] = "DATE";
+  FormConfigType2["ENUM"] = "ENUM";
+  FormConfigType2["ARRAY"] = "ARRAY";
+  FormConfigType2["BOOLEAN"] = "BOOLEAN";
+  FormConfigType2["RECORD"] = "RECORD";
+  FormConfigType2["OBJECT"] = "OBJECT";
+  FormConfigType2["UNION"] = "UNION";
+  FormConfigType2["CREATABLE"] = "CREATABLE";
+  FormConfigType2["SELECT"] = "SELECT";
+  FormConfigType2["MULTI_SELECT"] = "MULTI_SELECT";
+  return FormConfigType2;
+})(FormConfigType || {});
+function getFormConfigTypesFromSchemaDef({
+  schema,
+  isOptional = false
+}) {
+  if (schema instanceof z$1.ZodObject) {
+    return { type: "OBJECT" /* OBJECT */, isOptional };
+  }
+  if (schema instanceof z$1.ZodString) {
+    if (schema instanceof z$1.ZodString && schema._def.checks.some((check) => check.kind === "datetime")) {
+      return { type: "DATE" /* DATE */, isOptional };
+    }
+    return { type: "STRING" /* STRING */, isOptional };
+  } else if (schema instanceof ZodNumber) {
+    return { type: "NUMBER" /* NUMBER */, isOptional };
+  } else if (schema instanceof ZodBoolean) {
+    return { type: "BOOLEAN" /* BOOLEAN */, isOptional };
+  } else if (schema instanceof ZodDate) {
+    return { type: "DATE" /* DATE */, isOptional };
+  } else if (schema instanceof ZodLiteral) {
+    return {
+      type: "ENUM" /* ENUM */,
+      isOptional,
+      options: [{ label: schema.value, value: schema.value }]
+    };
+  } else if (schema instanceof ZodEnum) {
+    return {
+      type: "ENUM" /* ENUM */,
+      isOptional,
+      options: schema.options.map((v) => ({ label: v, value: v }))
+    };
+  } else if (schema instanceof ZodArray) {
+    return {
+      type: "ARRAY" /* ARRAY */,
+      isOptional,
+      options: schema.element instanceof ZodEnum ? schema.element.options.map((v) => ({ label: v, value: v })) : []
+    };
+  } else if (schema instanceof z$1.ZodOptional || schema instanceof z$1.ZodDefault) {
+    return getFormConfigTypesFromSchemaDef({ schema: schema._def.innerType, isOptional: true });
+  } else if (schema instanceof z$1.ZodEffects) {
+    return getFormConfigTypesFromSchemaDef({ schema: schema._def.schema, isOptional });
+  } else if (schema instanceof z$1.ZodRecord) {
+    return {
+      type: "RECORD" /* RECORD */,
+      isOptional,
+      innerSchema: schema._def.valueType
+    };
+  } else {
+    return { type: "STRING" /* STRING */, isOptional };
+  }
+}
+function schemaToFormFieldRenderer({
+  schema,
+  errors,
+  renderFieldMap,
+  schemaField,
+  renderLabel,
+  control,
+  variables,
+  onFieldChange,
+  schemaOptions,
+  values,
+  isOptional = false,
+  isNullable = false
+}) {
+  const fieldConfig = getFormConfigTypesFromSchemaDef({ schema, isOptional });
+  const parentFieldValue = schemaOptions?.parentField ? getPath(values, schemaOptions?.parentField) : "";
+  if (schemaOptions?.parentField && !parentFieldValue) {
+    return null;
+  }
+  if (!renderFieldMap) return;
+  const flattenedErrors = flattenObject(errors, ["message", "type"]);
+  const fieldOptions = schemaOptions?.parentField ? schemaOptions?.options?.[parentFieldValue] : schemaOptions?.options || fieldConfig.options;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 mt-3 w-full", children: [
+    renderLabel ? renderLabel({ isOptional: Boolean(fieldConfig.isOptional), schemaField }) : /* @__PURE__ */ jsxs(Label, { className: "flex gap-0.5 capitalize", htmlFor: schemaField, "aria-required": !fieldConfig.isOptional, children: [
+      !fieldConfig?.isOptional && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
+      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: toTitleCase(schemaField.split(".").pop() || "") })
+    ] }),
+    renderFieldMap[fieldConfig.type]({
+      name: schemaField,
+      options: fieldOptions,
+      control,
+      variables,
+      innerSchema: fieldConfig.innerSchema,
+      handleFieldChange: onFieldChange,
+      isNullable
+    }),
+    flattenedErrors?.[schemaField] ? /* @__PURE__ */ jsx(Text, { size: "xs", className: "text-red-500", children: flattenedErrors[schemaField]?.message }) : null
+  ] }, schemaField);
+}
+
+function UnionField({
+  renderDynamicForm,
+  schema,
+  handleFieldChange,
+  control,
+  formValues,
+  errors,
+  parentField,
+  action,
+  isOptional = false,
+  isNullable = false,
+  depth
+}) {
+  const fieldConfig = getFormConfigTypesFromSchemaDef({ schema, isOptional });
+  if (schema instanceof ZodUnion) {
+    const schemaOptions = schema.options;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(Label, { className: "flex gap-0.5 capitalize mb-2", htmlFor: parentField, "aria-required": !fieldConfig.isOptional, children: [
+        !fieldConfig?.isOptional && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
+        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: toTitleCase(parentField) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: schemaOptions.map((schemaOption, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        index >= 1 && /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3 text-center", size: "xs", children: "or" }),
+        /* @__PURE__ */ jsx("div", { className: "ring-1 ring-white/10 p-2 rounded-md relative", children: renderDynamicForm({
+          schema: schemaOption,
+          handleFieldChange,
+          control,
+          formValues,
+          errors,
+          parentField,
+          action,
+          isOptional,
+          isNullable,
+          depth
+        }) })
+      ] }, index)) })
+    ] });
+  }
+  return null;
+}
+
+function ObjectField({
+  renderDynamicForm,
+  schema,
+  handleFieldChange,
+  control,
+  formValues,
+  errors,
+  parentField,
+  action,
+  isArray = false,
+  isOptional = false,
+  depth
+}) {
+  const fieldConfig = getFormConfigTypesFromSchemaDef({ schema, isOptional });
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: parentField
+  });
+  function handleAddForm() {
+    append({});
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Label, { className: "flex gap-0.5 capitalize mb-2", htmlFor: parentField, "aria-required": !fieldConfig.isOptional, children: [
+      !fieldConfig?.isOptional && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
+      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: toTitleCase(parentField) })
+    ] }),
+    isArray ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: fields.map((field, index) => /* @__PURE__ */ jsxs("div", { className: "ring-1 ring-white/10 p-2 rounded-md relative", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            onClick: () => remove(index),
+            className: "absolute top-0 right-0",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "text-icon h-3.5 w-3.5" })
+          }
+        ),
+        renderDynamicForm({
+          schema: schema instanceof ZodArray ? schema.element : schema,
+          handleFieldChange,
+          control,
+          formValues,
+          errors,
+          parentField: `${parentField}.${index}`,
+          action,
+          isOptional,
+          depth
+        })
+      ] }, field.id)) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", className: "w-full text-xs h-9", onClick: handleAddForm, children: [
+        "Add ",
+        toTitleCase(parentField.split(".").pop() || "")
+      ] }) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "ring-1 ring-white/10 p-2 rounded-md relative", children: renderDynamicForm({
+      schema,
+      handleFieldChange,
+      control,
+      formValues,
+      errors,
+      parentField,
+      action,
+      isOptional,
+      depth
+    }) })
+  ] });
+}
+
+function NumberField({ name, control, handleFieldChange }) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...field,
+          type: "number",
+          onChange: (e) => {
+            const value = e.target.value === "" ? void 0 : Number(e.target.value);
+            field.onChange(value);
+            handleFieldChange?.({ key: name, value });
+          }
+        }
+      )
+    }
+  );
+}
+
+function RecordField({ name, control, handleFieldChange }) {
+  const formValue = useWatch({ control, name }) || {};
+  const [pairs, setPairs] = React.useState(
+    () => Object.entries(formValue).map(([key, value]) => ({
+      id: key || v4(),
+      key,
+      value
+    }))
+  );
+  React.useEffect(() => {
+    if (pairs.length === 0) {
+      setPairs([{ id: v4(), key: "", value: "" }]);
+    }
+  }, [pairs]);
+  const updateForm = React.useCallback(
+    (newPairs) => {
+      if (!handleFieldChange) return;
+      const value = newPairs.reduce(
+        (acc, pair) => {
+          if (pair.key) {
+            acc[pair.key] = pair.value;
+          }
+          return acc;
+        },
+        {}
+      );
+      handleFieldChange({ key: name, value });
+    },
+    [handleFieldChange, name]
+  );
+  const handleChange = (id, field, newValue) => {
+    setPairs((prev) => prev.map((pair) => pair.id === id ? { ...pair, [field]: newValue } : pair));
+  };
+  const handleBlur = () => {
+    updateForm(pairs);
+  };
+  const addPair = () => {
+    const newPairs = [...pairs, { id: v4(), key: "", value: "" }];
+    setPairs(newPairs);
+    updateForm(newPairs);
+  };
+  const removePair = (id) => {
+    const newPairs = pairs.filter((p) => p.id !== id);
+    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,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "absolute right-2 top-2",
+          onClick: () => removePair(pair.id),
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Key",
+            value: pair.key,
+            onChange: (e) => handleChange(pair.id, "key", e.target.value),
+            onBlur: handleBlur
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Value",
+            value: pair.value,
+            onChange: (e) => handleChange(pair.id, "value", e.target.value),
+            onBlur: handleBlur
+          }
+        )
+      ] })
+    ] }, pair.id)),
+    /* @__PURE__ */ jsxs(Button, { 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"
+    ] })
+  ] });
+}
+
+function getDefaultFieldMap() {
+  return {
+    [FormConfigType.STRING]: (props) => {
+      const { options, ...rest } = props;
+      if (options?.length) {
+        return /* @__PURE__ */ jsx(EnumField, { ...rest, options });
+      }
+      return /* @__PURE__ */ jsx(StringField, { ...rest });
+    },
+    [FormConfigType.NUMBER]: (props) => {
+      return /* @__PURE__ */ jsx(NumberField, { ...props });
+    },
+    [FormConfigType.BOOLEAN]: (props) => {
+      return /* @__PURE__ */ jsx(BooleanField, { ...props });
+    },
+    [FormConfigType.DATE]: (props) => {
+      return /* @__PURE__ */ jsx(DateField, { ...props });
+    },
+    [FormConfigType.ENUM]: (props) => {
+      const { options = [] } = props;
+      return /* @__PURE__ */ jsx(EnumField, { ...props, options });
+    },
+    [FormConfigType.ARRAY]: (props) => {
+      const renderField = ({ fieldName, index: _index }) => {
+        return getDefaultFieldMap()[FormConfigType.STRING]({
+          ...props,
+          name: fieldName
+        });
+      };
+      return /* @__PURE__ */ jsx(ArrayField, { ...props, renderField });
+    },
+    [FormConfigType.RECORD]: (props) => {
+      return /* @__PURE__ */ jsx(RecordField, { ...props });
+    },
+    [FormConfigType.OBJECT]: (props) => {
+      const { innerSchema, name, control, handleFieldChange } = props;
+      if (!innerSchema) return null;
+      return /* @__PURE__ */ jsx(
+        ObjectField,
+        {
+          schema: innerSchema,
+          control,
+          parentField: name,
+          handleFieldChange: (field, value) => handleFieldChange({ key: field, value }),
+          formValues: {},
+          errors: {},
+          renderDynamicForm: (props2) => resolveSchema({ ...props2, handleFieldChange })
+        }
+      );
+    },
+    [FormConfigType.UNION]: (props) => {
+      const { innerSchema, name, control, handleFieldChange } = props;
+      if (!innerSchema || !(innerSchema instanceof z.ZodUnion)) return null;
+      return /* @__PURE__ */ jsx(
+        UnionField,
+        {
+          schema: innerSchema,
+          control,
+          parentField: name,
+          handleFieldChange: (field, value) => handleFieldChange({ key: field, value }),
+          renderDynamicForm: (fieldProps) => {
+            const fieldType = getFormConfigTypesFromSchemaDef({ schema: fieldProps.schema });
+            return getDefaultFieldMap()[fieldType.type]({
+              ...props,
+              ...fieldProps,
+              control,
+              handleFieldChange
+            });
+          },
+          formValues: {},
+          errors: {}
+        }
+      );
+    },
+    [FormConfigType.CREATABLE]: (props) => {
+      return /* @__PURE__ */ jsx(CreatableField, { ...props });
+    },
+    [FormConfigType.SELECT]: (props) => {
+      const { options = [] } = props;
+      return /* @__PURE__ */ jsx(EnumField, { ...props, options });
+    },
+    [FormConfigType.MULTI_SELECT]: (props) => {
+      return /* @__PURE__ */ jsx(CreatableField, { ...props });
+    }
+  };
+}
+
+function adaptHandleFieldChange(handler) {
+  return (field, value) => handler({ key: field, value });
+}
+function resolveSchema({
+  schema,
+  parentField,
+  control,
+  formValues,
+  errors,
+  handleFieldChange,
+  isOptional = false,
+  isNullable = false,
+  depth = 0
+}) {
+  if (depth > 10) {
+    console.warn("Maximum schema resolution depth reached. Possible circular reference.");
+    return null;
+  }
+  if (schema instanceof z$1.ZodObject) {
+    return Object.entries(schema.shape).map(([field, fieldSchema]) => {
+      const currentField = parentField ? `${parentField}.${field}` : field;
+      return resolveSchemaComponent({
+        schema: fieldSchema,
+        parentField: currentField,
+        control,
+        formValues,
+        errors,
+        handleFieldChange,
+        isOptional,
+        isNullable
+      });
+    });
+  }
+  return resolveSchemaComponent({
+    schema,
+    parentField,
+    control,
+    formValues,
+    errors,
+    handleFieldChange,
+    isOptional,
+    isNullable
+  });
+}
+function resolveSchemaComponent({
+  schema,
+  parentField,
+  control,
+  formValues,
+  errors,
+  handleFieldChange,
+  isOptional = false,
+  isNullable = false
+}) {
+  if (schema instanceof z$1.ZodDefault) return null;
+  if (schema instanceof z$1.ZodOptional) {
+    return resolveSchemaComponent({
+      schema: schema._def.innerType,
+      parentField,
+      control,
+      formValues,
+      errors,
+      handleFieldChange,
+      isOptional: true,
+      isNullable
+    });
+  }
+  if (schema instanceof z$1.ZodObject) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 py-8 w-full", children: /* @__PURE__ */ jsx(
+      ObjectField,
+      {
+        schema,
+        control,
+        parentField,
+        handleFieldChange: (field, value) => handleFieldChange({ key: field, value }),
+        formValues,
+        errors,
+        isOptional,
+        renderDynamicForm: (props) => resolveSchema({ ...props, handleFieldChange })
+      }
+    ) }, parentField);
+  }
+  if (schema instanceof z$1.ZodUnion) {
+    if (schema.options.some((s) => s instanceof z$1.ZodNull)) {
+      const nonNullSchema = schema.options.find((s) => !(s instanceof z$1.ZodNull));
+      return resolveSchemaComponent({
+        schema: z$1.optional(nonNullSchema),
+        parentField,
+        control,
+        formValues,
+        errors,
+        handleFieldChange,
+        isNullable: true
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      UnionField,
+      {
+        schema,
+        control,
+        parentField,
+        handleFieldChange: adaptHandleFieldChange(handleFieldChange),
+        formValues,
+        errors,
+        isOptional,
+        isNullable,
+        renderDynamicForm: (props) => resolveSchema({
+          ...props,
+          handleFieldChange: (props2) => handleFieldChange(props2)
+        })
+      }
+    );
+  }
+  if (schema instanceof z$1.ZodArray) {
+    return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-8 py-8", children: /* @__PURE__ */ jsx(
+      ArrayField,
+      {
+        control,
+        name: parentField,
+        isStringField: schema.element instanceof z$1.ZodString,
+        renderField: (props) => {
+          const fieldSchema = schema.element;
+          let currentField = props.fieldName;
+          if (fieldSchema instanceof z$1.ZodString) {
+            currentField = `${currentField}.root`;
+          }
+          return resolveSchemaComponent({
+            schema: fieldSchema,
+            parentField: currentField,
+            control,
+            formValues,
+            errors,
+            handleFieldChange
+          });
+        }
+      }
+    ) }, parentField);
+  }
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: schemaToFormFieldRenderer({
+    schema,
+    schemaField: parentField,
+    control,
+    values: formValues,
+    errors,
+    renderFieldMap: getDefaultFieldMap(),
+    onFieldChange: handleFieldChange
+  }) }, parentField);
+}
+
+function DynamicForm({
+  schema,
+  onSubmit,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel = "Submit"
+}) {
+  const schemaTypeName = schema?._def?.typeName;
+  const discriminatedUnionSchemaOptions = schema?._def?.options;
+  const discriminatedUnionSchemaDiscriminator = schema?._def?.discriminator;
+  const wrappedSchema = schemaTypeName !== "ZodObject" ? z$1.object({ items: schema }) : schema;
+  const form = useForm({
+    resolver: schemaTypeName === "ZodDiscriminatedUnion" ? customZodUnionResolver(wrappedSchema, discriminatedUnionSchemaDiscriminator) : zodResolver(wrappedSchema),
+    defaultValues
+  });
+  const { control, handleSubmit, watch } = form;
+  const formValues = form.watch();
+  const discriminatorValue = discriminatedUnionSchemaDiscriminator ? watch(discriminatedUnionSchemaDiscriminator) : void 0;
+  const resolvedSchema = schemaTypeName === "ZodDiscriminatedUnion" ? discriminatedUnionSchemaOptions?.find(
+    (option) => option?.shape?.[discriminatedUnionSchemaDiscriminator]?._def?.value === discriminatorValue
+  ) || z$1.object({ [discriminatedUnionSchemaDiscriminator]: z$1.string() }) : wrappedSchema;
+  function handleFieldChange({ key, value }) {
+    if (key === discriminatedUnionSchemaDiscriminator) {
+      form.setValue(key, value);
+    } else {
+      form.setValue(key, value);
+    }
+  }
+  const wrappedOnSubmit = (values) => {
+    if (schemaTypeName !== "ZodObject") {
+      return onSubmit(values.items);
+    }
+    return onSubmit(values);
+  };
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(wrappedOnSubmit), className: "flex flex-col gap-4 p-4 w-full", children: [
+    resolveSchema({
+      schema: resolvedSchema,
+      parentField: "",
+      control,
+      formValues,
+      errors: form.formState.errors,
+      handleFieldChange
+    }),
+    /* @__PURE__ */ jsx(Button, { disabled: isSubmitLoading, type: "submit", children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : submitButtonLabel })
+  ] }) });
+}
+
+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,
+    /* @__PURE__ */ jsx(
+      CodeBlock$1.Code,
+      {
+        className: cn("bg-transparent h-full p-6 rounded-xl whitespace-pre-wrap", filename ? "pt-10" : "", className),
+        children: /* @__PURE__ */ jsx("div", { className: "table-row", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(CodeBlock$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" }) })
+        ] }) })
+      }
+    )
+  ] });
+}
+
+function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(() => {
+      toast.success(copyMessage);
+      setIsCopied(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    }).catch(() => {
+      toast.error("Failed to copy to clipboard.");
+    });
+  }, [text, copyMessage]);
+  return { isCopied, handleCopy };
+}
+
+function CopyButton({ content, copyMessage, classname }) {
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: content,
+    copyMessage
+  });
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("relative h-6 w-6", classname),
+      "aria-label": "Copy to clipboard",
+      onClick: handleCopy,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-100" : "scale-0") }) }),
+        /* @__PURE__ */ jsx(Copy, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-0" : "scale-100") })
+      ]
+    }
+  );
+}
+
+const WorkflowRunContext = createContext({});
+function WorkflowRunProvider({ children }) {
+  const [result, setResult] = useState(null);
+  const [payload, setPayload] = useState(null);
+  const clearData = () => {
+    setResult(null);
+    setPayload(null);
+  };
+  return /* @__PURE__ */ jsx(
+    WorkflowRunContext.Provider,
+    {
+      value: {
+        result,
+        setResult,
+        payload,
+        setPayload,
+        clearData
+      },
+      children
+    }
+  );
+}
+
+function WorkflowTrigger({
+  workflowId,
+  baseUrl,
+  setRunId
+}) {
+  const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
+  const { isLoading, workflow } = useWorkflow(workflowId, baseUrl);
+  const { createWorkflowRun } = useExecuteWorkflow(baseUrl);
+  const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow(baseUrl);
+  const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow(baseUrl);
+  const [suspendedSteps, setSuspendedSteps] = useState([]);
+  const triggerSchema = workflow?.triggerSchema;
+  const handleExecuteWorkflow = async (data) => {
+    if (!workflow) return;
+    setResult(null);
+    const { runId } = await createWorkflowRun({ workflowId, input: data });
+    setRunId?.(runId);
+    watchWorkflow({ workflowId, runId });
+  };
+  const handleResumeWorkflow = async (step) => {
+    if (!workflow) return;
+    const { stepId, runId, context } = step;
+    resumeWorkflow({
+      stepId,
+      runId,
+      context,
+      workflowId
+    });
+    watchWorkflow({ workflowId, runId });
+  };
+  const watchResultToUse = result ?? watchResult;
+  const workflowActivePaths = watchResultToUse?.activePaths ?? [];
+  useEffect(() => {
+    if (!watchResultToUse?.activePaths || !result?.runId) return;
+    const suspended = watchResultToUse.activePaths.filter((path) => watchResultToUse.context?.steps?.[path.stepId]?.status === "suspended").map((path) => ({
+      stepId: path.stepId,
+      runId: result.runId
+    }));
+    setSuspendedSteps(suspended);
+  }, [watchResultToUse, result]);
+  useEffect(() => {
+    if (watchResult) {
+      setResult(watchResult);
+    }
+  }, [watchResult]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[100px_1fr] gap-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3" })
+    ] }) }) });
+  }
+  if (!workflow) return null;
+  if (!triggerSchema) {
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-[400px]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-4 px-4", children: /* @__PURE__ */ jsx(Button, { className: "w-full", disabled: isWatchingWorkflow, onClick: () => handleExecuteWorkflow(null), children: isWatchingWorkflow ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Trigger" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3  px-4", size: "xs", children: "Output" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            classname: "absolute z-40 top-4 right-4 w-8 h-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150 ease-in-out",
+            content: JSON.stringify(result ?? {}, null, 2)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          CodeBlockDemo,
+          {
+            className: "w-[368px] overflow-x-auto",
+            code: JSON.stringify(result ?? {}, null, 2),
+            language: "json"
+          }
+        )
+      ] })
+    ] }) });
+  }
+  const zodInputSchema = resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema)));
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-[400px]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      suspendedSteps.length > 0 ? suspendedSteps?.map((step) => /* @__PURE__ */ jsxs("div", { className: "px-4", children: [
+        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
+        /* @__PURE__ */ jsx(
+          DynamicForm,
+          {
+            schema: z$1.record(z$1.string(), z$1.any()),
+            isSubmitLoading: isResumingWorkflow,
+            submitButtonLabel: "Resume",
+            onSubmit: (data) => {
+              handleResumeWorkflow({
+                stepId: step.stepId,
+                runId: step.runId,
+                context: data
+              });
+            }
+          }
+        )
+      ] })) : /* @__PURE__ */ jsx(Fragment, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3 px-4", size: "xs", children: "Input" }),
+        isResumingWorkflow ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "animate-spin w-3 h-3 text-mastra-el-accent" }),
+          " Resuming workflow"
+        ] }) : /* @__PURE__ */ jsx(Fragment, {})
+      ] }),
+      /* @__PURE__ */ jsx(
+        DynamicForm,
+        {
+          schema: zodInputSchema,
+          defaultValues: payload,
+          isSubmitLoading: isWatchingWorkflow,
+          onSubmit: (data) => {
+            setPayload(data);
+            handleExecuteWorkflow(data);
+          }
+        }
+      )
+    ] }),
+    workflowActivePaths.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3  px-4", size: "xs", children: "Status" }),
+      /* @__PURE__ */ jsx("div", { className: "px-4", children: workflowActivePaths?.map((activePath, idx) => {
+        return /* @__PURE__ */ jsx("div", { className: "flex flex-col mt-2 border  overflow-hidden", children: activePath?.stepPath?.map((sp, idx2) => {
+          const status = activePath?.status === "completed" ? "Completed" : sp === activePath?.stepId ? activePath?.status.charAt(0).toUpperCase() + activePath?.status.slice(1) : "Completed";
+          const statusIcon = status === "Completed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-yellow-500 animate-pulse rounded-full" });
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `
+                            flex items-center justify-between p-3
+                            ${idx2 !== activePath.stepPath.length - 1 ? "border-b" : ""}
+                            bg-white/5
+                          `,
+              children: [
+                /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: sp.charAt(0).toUpperCase() + sp.slice(1) }),
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: statusIcon }),
+                  status
+                ] })
+              ]
+            },
+            idx2
+          );
+        }) }, idx);
+      }) })
+    ] }),
+    result && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3  px-4", size: "xs", children: "Output" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
+        CopyButton,
+        {
+          classname: "absolute z-40 top-4 right-4 w-8 h-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150 ease-in-out",
+          content: JSON.stringify(result, null, 2)
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        CodeBlockDemo,
+        {
+          className: "w-[368px] overflow-x-auto",
+          code: JSON.stringify(result, null, 2),
+          language: "json"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export { AgentChat, AgentEvals, AgentTraces, AgentsTable, Chat, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
 //# sourceMappingURL=index.es.js.map