@mastra/playground-ui 5.1.21-alpha.0 → 5.1.21-alpha.2

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1, startTransition } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Circle, ChevronDown, Braces, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, Plus, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Maximize, Workflow, AlertCircleIcon, Users, Brain, NetworkIcon, SearchIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle, ChevronUp } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Circle, ChevronDown, Braces, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, CircleCheck, EditIcon, Plus, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleX, Minus, Maximize, Workflow, AlertCircleIcon, Users, Brain, NetworkIcon, SearchIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle, ChevronUp } 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';
@@ -35,6 +35,8 @@ import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
 import { C as Colors } from './colors-DrbbnW3f.js';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
@@ -52,8 +54,6 @@ import z$1, { z, ZodObject } from 'zod';
 import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
 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 { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -7790,20 +7790,365 @@ const ScorerEntity = ({ scorer }) => {
   ] });
 };
 
+const openaiModels = [
+  "o1",
+  "o1-2024-12-17",
+  "o3-mini",
+  "o3-mini-2025-01-31",
+  "o3",
+  "o3-2025-04-16",
+  "o4-mini",
+  "o4-mini-2025-04-16",
+  "codex-mini-latest",
+  "computer-use-preview",
+  "gpt-4.1",
+  "gpt-4.1-2025-04-14",
+  "gpt-4.1-mini",
+  "gpt-4.1-mini-2025-04-14",
+  "gpt-4.1-nano",
+  "gpt-4.1-nano-2025-04-14",
+  "gpt-4o",
+  "gpt-4o-2024-05-13",
+  "gpt-4o-2024-08-06",
+  "gpt-4o-2024-11-20",
+  "gpt-4o-audio-preview",
+  "gpt-4o-audio-preview-2024-10-01",
+  "gpt-4o-audio-preview-2024-12-17",
+  "gpt-4o-search-preview",
+  "gpt-4o-search-preview-2025-03-11",
+  "gpt-4o-mini-search-preview",
+  "gpt-4o-mini-search-preview-2025-03-11",
+  "gpt-4o-mini",
+  "gpt-4o-mini-2024-07-18",
+  "gpt-4-turbo",
+  "gpt-4-turbo-2024-04-09",
+  "gpt-4-turbo-preview",
+  "gpt-4-0125-preview",
+  "gpt-4-1106-preview",
+  "gpt-4",
+  "gpt-4-0613",
+  "gpt-4.5-preview",
+  "gpt-4.5-preview-2025-02-27",
+  "gpt-3.5-turbo-0125",
+  "gpt-3.5-turbo",
+  "gpt-3.5-turbo-1106",
+  "chatgpt-4o-latest",
+  "gpt-5",
+  "gpt-5-2025-08-07",
+  "gpt-5-mini",
+  "gpt-5-mini-2025-08-07",
+  "gpt-5-nano",
+  "gpt-5-nano-2025-08-07",
+  "gpt-5-chat-latest"
+];
+const anthropicModels = [
+  "claude-opus-4-20250514",
+  "claude-sonnet-4-20250514",
+  "claude-3-7-sonnet-20250219",
+  "claude-3-5-sonnet-latest",
+  "claude-3-5-sonnet-20241022",
+  "claude-3-5-sonnet-20240620",
+  "claude-3-5-haiku-latest",
+  "claude-3-5-haiku-20241022",
+  "claude-3-opus-latest",
+  "claude-3-opus-20240229",
+  "claude-3-sonnet-20240229",
+  "claude-3-haiku-20240307"
+];
+const googleModels = [
+  "gemini-1.5-flash",
+  "gemini-1.5-flash-latest",
+  "gemini-1.5-flash-001",
+  "gemini-1.5-flash-002",
+  "gemini-1.5-flash-8b",
+  "gemini-1.5-flash-8b-latest",
+  "gemini-1.5-flash-8b-001",
+  "gemini-1.5-pro",
+  "gemini-1.5-pro-latest",
+  "gemini-1.5-pro-001",
+  "gemini-1.5-pro-002",
+  "gemini-2.0-flash",
+  "gemini-2.0-flash-001",
+  "gemini-2.0-flash-live-001",
+  "gemini-2.0-flash-lite",
+  "gemini-2.0-pro-exp-02-05",
+  "gemini-2.0-flash-thinking-exp-01-21",
+  "gemini-2.0-flash-exp",
+  "gemini-2.5-pro",
+  "gemini-2.5-flash",
+  "gemini-2.5-flash-lite",
+  "gemini-2.5-pro-exp-03-25",
+  "gemini-2.5-flash-preview-04-17",
+  "gemini-exp-1206",
+  "gemma-3-12b-it",
+  "gemma-3-27b-it"
+];
+const xAIModels = [
+  "grok-4",
+  "grok-4-0709",
+  "grok-4-latest",
+  "grok-3",
+  "grok-3-latest",
+  "grok-3-fast",
+  "grok-3-fast-latest",
+  "grok-3-mini",
+  "grok-3-mini-latest",
+  "grok-3-mini-fast",
+  "grok-3-mini-fast-latest",
+  "grok-2-vision-1212",
+  "grok-2-vision",
+  "grok-2-vision-latest",
+  "grok-2-image-1212",
+  "grok-2-image",
+  "grok-2-image-latest",
+  "grok-2-1212",
+  "grok-2",
+  "grok-2-latest",
+  "grok-vision-beta",
+  "grok-beta"
+];
+const groqModels = [
+  "gemma2-9b-it",
+  "llama-3.1-8b-instant",
+  "llama-3.3-70b-versatile",
+  "meta-llama/llama-guard-4-12b",
+  "openai/gpt-oss-120b",
+  "openai/gpt-oss-20b",
+  "deepseek-r1-distill-llama-70b",
+  "meta-llama/llama-4-maverick-17b-128e-instruct",
+  "meta-llama/llama-4-scout-17b-16e-instruct",
+  "meta-llama/llama-prompt-guard-2-22m",
+  "meta-llama/llama-prompt-guard-2-86m",
+  "mistral-saba-24b",
+  "moonshotai/kimi-k2-instruct",
+  "qwen/qwen3-32b",
+  "llama-guard-3-8b",
+  "llama3-70b-8192",
+  "llama3-8b-8192",
+  "mixtral-8x7b-32768",
+  "qwen-qwq-32b",
+  "qwen-2.5-32b",
+  "deepseek-r1-distill-qwen-32b"
+];
+
+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;
+
+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 Models = {
+  openai: {
+    models: openaiModels?.map((model) => ({ provider: "openai", model, icon: "openai.chat" })),
+    icon: "openai.chat"
+  },
+  anthropic: {
+    models: anthropicModels?.map((model) => ({ provider: "anthropic", model, icon: "anthropic.messages" })),
+    icon: "anthropic.messages"
+  },
+  google: {
+    models: googleModels?.map((model) => ({ provider: "google", model, icon: "GOOGLE" })),
+    icon: "GOOGLE"
+  },
+  xAi: {
+    models: xAIModels?.map((model) => ({ provider: "xai", model, icon: "X_GROK" })),
+    icon: "X_GROK"
+  },
+  groq: {
+    models: groqModels?.map((model) => ({ provider: "groq", model, icon: "GROQ" })),
+    icon: "GROQ"
+  }
+};
+const AgentMetadataModelSwitcher = ({
+  defaultProvider,
+  defaultModel,
+  updateModel,
+  closeEditor,
+  modelProviders
+}) => {
+  const [selectedModel, setSelectedModel] = useState(defaultModel);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedProvider, setSelectedProvider] = useState(() => {
+    if (defaultProvider) {
+      const providerOnly = defaultProvider.split(".")[0];
+      return providerOnly;
+    }
+    return "";
+  });
+  const [loading, setLoading] = useState(false);
+  const modelsList = Object.entries(Models).filter(([provider]) => modelProviders.includes(provider));
+  const allModels = modelsList.flatMap(([_, { models }]) => models);
+  const providersList = modelsList.map(([provider, { icon }]) => ({ provider, icon }));
+  const model = allModels.find((model2) => model2.model === selectedModel);
+  const handleSave = async () => {
+    setLoading(true);
+    const providerToUse = model?.provider ?? selectedProvider;
+    await updateModel({ provider: providerToUse, modelId: selectedModel });
+    setLoading(false);
+    closeEditor();
+  };
+  const filteredModels = allModels.filter((model2) => model2.model.includes(selectedModel));
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: model?.provider ?? selectedProvider,
+        onValueChange: setSelectedProvider,
+        disabled: !!model?.provider,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "max-w-[150px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select provider" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: providersList.map((provider) => /* @__PURE__ */ jsx(SelectItem, { value: provider.provider, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Icon, { children: providerMapToIcon[provider.icon] }),
+            provider.provider
+          ] }) }, provider.provider)) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Popover, { open: showSuggestions, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "model-input",
+          list: "model-suggestions",
+          className: "flex-1",
+          type: "text",
+          value: selectedModel,
+          onChange: (e) => {
+            setSelectedModel(e.target.value);
+            setShowSuggestions(true);
+          },
+          placeholder: "Enter model name or select from suggestions..."
+        }
+      ) }),
+      filteredModels.length > 0 && /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          className: "flex flex-col gap-2 w-[var(--radix-popover-trigger-width)] max-h-[calc(var(--radix-popover-content-available-height)-50px)] overflow-y-auto",
+          children: filteredModels.map((model2) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-2 cursor-pointer hover:bg-surface5 p-2",
+              onClick: () => {
+                setSelectedModel(model2.model);
+                setShowSuggestions(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { children: providerMapToIcon[model2.icon] }),
+                model2.model
+              ]
+            },
+            model2.provider + model2.model
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleSave, className: "text-icon3 hover:text-icon6", children: /* @__PURE__ */ jsx(Icon, { children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(CircleCheck, {}) }) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: loading ? "Saving..." : "Save new model" })
+    ] })
+  ] }) });
+};
+
 const AgentMetadata = ({
   agent,
   promptSlot,
   hasMemoryEnabled,
   computeToolLink,
-  computeWorkflowLink
+  computeWorkflowLink,
+  updateModel,
+  modelProviders
 }) => {
+  const [isEditingModel, setIsEditingModel] = useState(false);
   const providerIcon = providerMapToIcon[agent.provider || "openai.chat"];
   const agentTools = agent.tools ?? {};
   const tools = Object.keys(agentTools).map((key) => agentTools[key]);
   const agentWorkflows = agent.workflows ?? {};
   const workflows = Object.keys(agentWorkflows).map((key) => agentWorkflows[key]);
   return /* @__PURE__ */ jsxs(AgentMetadataWrapper, { children: [
-    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Model", children: /* @__PURE__ */ jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: agent.modelId || "N/A" }) }),
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Model", children: isEditingModel ? /* @__PURE__ */ jsx(
+      AgentMetadataModelSwitcher,
+      {
+        defaultProvider: agent.provider,
+        defaultModel: agent.modelId,
+        updateModel,
+        closeEditor: () => setIsEditingModel(false),
+        modelProviders
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: agent.modelId || "N/A" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setIsEditingModel(true), className: "text-icon3 hover:text-icon6", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(EditIcon, {}) }) })
+    ] }) }),
     /* @__PURE__ */ jsx(
       AgentMetadataSection,
       {
@@ -11874,23 +12219,6 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
 }
 Calendar.displayName = "Calendar";
 
-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,
@@ -12076,65 +12404,6 @@ const DateField = ({ inputProps, field, error, id }) => {
   );
 };
 
-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;
-
 const SelectField = ({ field, inputProps, error, id, value }) => {
   const { key, ...props } = inputProps;
   return /* @__PURE__ */ jsxs(
@@ -12352,11 +12621,38 @@ function inferFieldType(schema, fieldConfig) {
   return "string";
 }
 
+function extractNumberConstraints(schema) {
+  const constraints = {};
+  let baseSchema = getBaseSchema(schema);
+  if (baseSchema._def && baseSchema._def.checks) {
+    for (const check of baseSchema._def.checks) {
+      if (check.kind === "min" && check.inclusive) {
+        constraints.min = check.value;
+      } else if (check.kind === "max" && check.inclusive) {
+        constraints.max = check.value;
+      } else if (check.kind === "multipleOf") {
+        constraints.step = check.value;
+      }
+    }
+  }
+  return constraints;
+}
 function parseField(key, schema) {
   const baseSchema = getBaseSchema(schema);
-  const fieldConfig = getFieldConfigInZodStack(schema);
+  let fieldConfig = getFieldConfigInZodStack(schema);
   const type = inferFieldType(baseSchema, fieldConfig);
   const defaultValue = getDefaultValueInZodStack(schema);
+  if (type === "number" && baseSchema instanceof z.ZodNumber) {
+    const constraints = extractNumberConstraints(schema);
+    if (Object.keys(constraints).length > 0) {
+      if (!fieldConfig) {
+        fieldConfig = {};
+      }
+      if (typeof fieldConfig === "object") {
+        fieldConfig.inputProps = { ...fieldConfig?.inputProps, ...constraints };
+      }
+    }
+  }
   const options = baseSchema._def?.values;
   let optionValues = [];
   if (options) {