@mastra/playground-ui 7.0.0-beta.19 → 7.0.0-beta.20

package/dist/index.es.js

@@ -1,18 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useAssistantState, useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, useAttachment, ComposerPrimitive, AttachmentPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ShieldAlert, ChevronDown, ChevronRight, RefreshCw, Tag, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, ChevronUpIcon, X, Share2, Check, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, Repeat, Repeat1, Network, CalendarIcon, Braces, ChevronDownIcon, Brackets, PlusIcon, TrashIcon, Plus, Loader2, Circle, EyeOffIcon, EyeIcon, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Maximize, AlertCircleIcon, CirclePause, StopCircle, Cpu, SearchIcon, ChevronsUpDown, Search, ArrowRight, ArrowLeft, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, SaveIcon, ExternalLink, XIcon, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, PanelRightIcon, KeyboardIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, RefreshCcwIcon, AlertTriangleIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, ChevronsUpIcon, ChevronsDownIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash, Trash, Link2, MoveRight, Copy } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ShieldAlert, ChevronDown, ChevronRight, RefreshCw, Tag, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, ChevronUpIcon, CheckCircleIcon, X, Share2, Check, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, Repeat, Repeat1, Network, CalendarIcon, Braces, ChevronDownIcon, Brackets, PlusIcon, TrashIcon, Plus, Loader2, Circle, EyeOffIcon, EyeIcon, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Maximize, AlertCircleIcon, CirclePause, StopCircle, Cpu, SearchIcon, ChevronsUpDown, Search, ArrowRight, ArrowLeft, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, SaveIcon, ExternalLink, XIcon, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, PanelRightIcon, KeyboardIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, RefreshCcwIcon, AlertTriangleIcon, Copy, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, ChevronsUpIcon, ChevronsDownIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash, Trash, Link2, MoveRight } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment as Fragment$1, useId, Suspense, useLayoutEffect } from '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';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { unstable_memoizeMarkdownComponents, useIsMarkdownCodeBlock, MarkdownTextPrimitive } from '@assistant-ui/react-markdown';
 import '@assistant-ui/react-markdown/styles/dot.css';
 import remarkGfm from 'remark-gfm';
-import { makePrismAsyncLightSyntaxHighlighter } from '@assistant-ui/react-syntax-highlighter';
 import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { makePrismAsyncLightSyntaxHighlighter } from '@assistant-ui/react-syntax-highlighter';
 import { jsonLanguage, json } from '@codemirror/lang-json';
+import { EditorView } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror, { EditorView as EditorView$1 } from '@uiw/react-codemirror';
@@ -31,11 +30,9 @@ import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { EditorView } from '@codemirror/view';
 import { javascript } from '@codemirror/lang-javascript';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { format, isValid, formatDate, isToday } from 'date-fns';
-import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
+import { isValid, format, formatDate, isToday } from 'date-fns';
 import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -57,6 +54,7 @@ import { parse } from 'superjson';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
 import { I as IconColors } from './colors-Br49332d.js';
 import { toAISdkV5Messages, toAISdkV4Messages } from '@mastra/ai-sdk/ui';
 import Markdown from 'react-markdown';
@@ -73,52 +71,53 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 import { githubDarkInit } from '@uiw/codemirror-theme-github';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as RadixTabs from '@radix-ui/react-tabs';
 import { Separator, usePanelRef, Panel as Panel$1, useDefaultLayout, Group } from 'react-resizable-panels';
 import semver from 'semver';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config)=>(props)=>{
-        var _config_compoundVariants;
-        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-        const { variants, defaultVariants } = config;
-        const getVariantClassNames = Object.keys(variants).map((variant)=>{
-            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-            if (variantProp === null) return null;
-            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-            return variants[variant][variantKey];
-        });
-        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
-            let [key, value] = param;
-            if (value === undefined) {
-                return acc;
-            }
-            acc[key] = value;
-            return acc;
-        }, {});
-        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
-            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-            return Object.entries(compoundVariantOptions).every((param)=>{
-                let [key, value] = param;
-                return Array.isArray(value) ? value.includes({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                }[key]) : ({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                })[key] === value;
-            }) ? [
-                ...acc,
-                cvClass,
-                cvClassName
-            ] : acc;
-        }, []);
-        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    };
+const sizeClasses$1 = {
+  md: "h-button-md gap-md",
+  lg: "h-button-lg gap-lg"
+};
+const variantClasses$2 = {
+  default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6 disabled:opacity-50",
+  light: "bg-surface3 hover:bg-surface5 text-icon6 disabled:opacity-50",
+  outline: "bg-transparent hover:bg-surface2 text-icon3 hover:text-icon6 disabled:opacity-50",
+  ghost: "bg-transparent border-transparent hover:bg-surface2 text-icon3 hover:text-icon6 disabled:opacity-50"
+};
+function buttonVariants(options) {
+  const variant = options?.variant || "default";
+  const size = options?.size || "md";
+  return clsx(
+    "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
+    variantClasses$2[variant],
+    sizeClasses$1[size]
+  );
+}
+const Button = React__default.forwardRef(
+  ({ className, as, size = "md", variant = "default", ...props }, ref) => {
+    const Component = as || "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: clsx(
+          "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
+          variantClasses$2[variant],
+          sizeClasses$1[size],
+          className,
+          {
+            "cursor-not-allowed": props.disabled
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 
 const CLASS_PART_SEPARATOR = '-';
 const createClassGroupUtils = config => {
@@ -3079,39 +3078,6 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-const Button$2 = React.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
-  }
-);
-Button$2.displayName = "Button";
-
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
@@ -3132,46 +3098,43 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 const TooltipIconButton = forwardRef(
   ({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button$2,
-        {
-          variant: "ghost",
-          size: "icon",
-          ...rest,
-          className: cn("size-6 p-1", className),
-          ref,
-          "aria-label": tooltip,
-          children
-        }
-      ) }),
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ...rest, className: cn("size-6 p-1", className), ref, "aria-label": tooltip, children }) }),
       /* @__PURE__ */ jsx(TooltipContent, { side, children: tooltip })
     ] }) });
   }
 );
 TooltipIconButton.displayName = "TooltipIconButton";
 
-const Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AvatarPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
-    ...props
-  }
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, { ref, className: cn("aspect-square h-full w-full", className), ...props }));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AvatarPrimitive.Fallback,
-  {
-    ref,
-    className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
-    ...props
-  }
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+const variants = {
+  "header-md": "text-header-md leading-header-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-xs": "text-ui-xs leading-ui-xs"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
 
-const SyntaxHighlighter$3 = makePrismAsyncLightSyntaxHighlighter({
+const sizeClasses = {
+  sm: "h-avatar-sm w-avatar-sm",
+  md: "h-avatar-md w-avatar-md",
+  lg: "h-avatar-lg w-avatar-lg"
+};
+const Avatar = ({ src, name, size = "sm" }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${sizeClasses[size]} border-sm border-border1 bg-surface-3 shrink-0 overflow-hidden rounded-full flex items-center justify-center`,
+      children: src ? /* @__PURE__ */ jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-center", children: name[0].toUpperCase() })
+    }
+  );
+};
+
+const SyntaxHighlighter = makePrismAsyncLightSyntaxHighlighter({
   style: coldarkDark,
   customStyle: {
     margin: 0,
@@ -3429,7 +3392,7 @@ const defaultComponents = unstable_memoizeMarkdownComponents({
     );
   },
   CodeHeader,
-  SyntaxHighlighter: SyntaxHighlighter$3,
+  SyntaxHighlighter,
   img: ImageWithFallback
 });
 
@@ -4230,21 +4193,7 @@ const AgentNetworkCoinIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "12
   ) }) })
 ] });
 
-const variants = {
-  "header-md": "text-header-md leading-header-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-xs": "text-ui-xs leading-ui-xs"
-};
-const fonts = {
-  mono: "font-mono"
-};
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
-};
-
-const variantClasses$2 = {
+const variantClasses$1 = {
   warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200",
   destructive: "bg-red-900/20 border-sm border-red-200 text-red-200",
   info: "bg-blue-900/20 border-sm border-blue-200 text-blue-200"
@@ -4256,7 +4205,7 @@ const variantIcons = {
 };
 const Alert$1 = ({ children, variant = "destructive" }) => {
   const Ico = variantIcons[variant];
-  return /* @__PURE__ */ jsx("div", { className: clsx(variantClasses$2[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx(variantClasses$1[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
     /* @__PURE__ */ jsx(Icon, { className: "mt-0.5", children: /* @__PURE__ */ jsx(Ico, {}) }),
     /* @__PURE__ */ jsx("div", { children })
   ] }) });
@@ -4268,8 +4217,34 @@ const AlertDescription$1 = ({ children, as: As = "p" }) => {
   return /* @__PURE__ */ jsx(Txt, { as: As, variant: "ui-sm", children });
 };
 
+const variantClasses = {
+  default: "text-icon3",
+  success: "text-accent1",
+  error: "text-accent2",
+  info: "text-accent3"
+};
+const Badge = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "font-mono bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md shrink-0",
+        icon ? "pl-md pr-1.5" : "px-1.5",
+        icon || variant === "default" ? "text-icon5" : variantClasses[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: variantClasses[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
+        children
+      ]
+    }
+  );
+};
+
 const ErrorAwareText = () => {
   const part = useAssistantState(({ part: part2 }) => part2);
+  const [collapsedCompletionCheck, setCollapsedCompletionCheck] = useState(false);
   const text = part.text || "";
   const metadata = part.metadata || {};
   if (metadata?.status === "tripwire") {
@@ -4287,6 +4262,21 @@ const ErrorAwareText = () => {
       /* @__PURE__ */ jsx(AlertDescription$1, { as: "p", children: text })
     ] });
   }
+  if (metadata?.mode === "network" && metadata?.completionResult) {
+    return /* @__PURE__ */ jsxs("div", { className: "mb-2 space-y-2", children: [
+      /* @__PURE__ */ jsxs("button", { onClick: () => setCollapsedCompletionCheck((s) => !s), className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("transition-all", collapsedCompletionCheck ? "rotate-90" : "rotate-180") }) }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "info", icon: /* @__PURE__ */ jsx(CheckCircleIcon, {}), children: [
+          collapsedCompletionCheck ? "Show" : "Hide",
+          " completion check"
+        ] })
+      ] }),
+      !collapsedCompletionCheck && /* @__PURE__ */ jsxs(Alert$1, { variant: "info", children: [
+        /* @__PURE__ */ jsx(AlertTitle$1, { as: "h5", children: metadata.completionResult?.passed ? "Complete" : "Not Complete" }),
+        /* @__PURE__ */ jsx(MarkdownText, {})
+      ] })
+    ] });
+  }
   try {
     const trimmedText = text.trim();
     if (trimmedText.startsWith("__ERROR__:")) {
@@ -4357,32 +4347,37 @@ function CopyButton({
   ] });
 }
 
-const useCodemirrorTheme$2 = () => {
-  return useMemo(
-    () => draculaInit({
+const useCodemirrorTheme$1 = () => {
+  return useMemo(() => {
+    const baseTheme = draculaInit({
       settings: {
         fontFamily: "var(--geist-mono)",
         fontSize: "0.8rem",
         lineHighlight: "transparent",
         gutterBackground: "transparent",
-        background: "transparent",
-        gutterForeground: "#939393"
+        gutterForeground: "#939393",
+        background: "transparent"
       },
       styles: [{ tag: [tags.className, tags.propertyName] }]
-    }),
-    []
-  );
+    });
+    const customLineNumberTheme = EditorView.theme({
+      ".cm-editor": {
+        colorScheme: "dark",
+        backgroundColor: "transparent"
+      },
+      ".cm-lineNumbers .cm-gutterElement": {
+        color: "#939393"
+      }
+    });
+    return [baseTheme, customLineNumberTheme];
+  }, []);
 };
-const SyntaxHighlighter$2 = ({
-  data,
-  className,
-  ...props
-}) => {
-  const formattedCode = JSON.stringify(data, null, 2);
-  const theme = useCodemirrorTheme$2();
+const CodeEditor = ({ data, value, onChange, showCopyButton = true, className, ...props }) => {
+  const theme = useCodemirrorTheme$1();
+  const formattedCode = data ? JSON.stringify(data, null, 2) : value ?? "";
   return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), ...props, children: [
-    /* @__PURE__ */ jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-20" }),
-    /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] })
+    showCopyButton && /* @__PURE__ */ jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-20" }),
+    /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage], onChange })
   ] });
 };
 async function highlight(code, language) {
@@ -4399,31 +4394,6 @@ async function highlight(code, language) {
   return tokens;
 }
 
-const variantClasses$1 = {
-  default: "text-icon3",
-  success: "text-accent1",
-  error: "text-accent2",
-  info: "text-accent3"
-};
-const Badge = ({ icon, variant = "default", className, children, ...props }) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "font-mono bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md shrink-0",
-        icon ? "pl-md pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-icon5" : variantClasses$1[variant],
-        className
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: variantClasses$1[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
-        children
-      ]
-    }
-  );
-};
-
 const BadgeWrapper = ({
   children,
   initialCollapsed = true,
@@ -4513,7 +4483,7 @@ const NetworkChoiceMetadata = ({ selectionReason, open, onOpenChange, input }) =
   let inputSlot = null;
   if (input) {
     try {
-      inputSlot = typeof input === "object" ? /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: input }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: JSON.parse(input) });
+      inputSlot = typeof input === "object" ? /* @__PURE__ */ jsx(CodeEditor, { data: input }) : /* @__PURE__ */ jsx(CodeEditor, { data: JSON.parse(input) });
     } catch {
       inputSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: input });
     }
@@ -4554,33 +4524,6 @@ const NetworkChoiceMetadataDialogTrigger = ({
   ] });
 };
 
-const sizeClasses = {
-  md: "h-button-md gap-md",
-  lg: "h-button-lg gap-lg"
-};
-const variantClasses = {
-  default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6 disabled:opacity-50",
-  light: "bg-surface3 hover:bg-surface5 text-icon6 disabled:opacity-50"
-};
-const Button$1 = ({ className, as, size = "md", variant = "default", ...props }) => {
-  const Component = as || "button";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: clsx(
-        "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
-        variantClasses[variant],
-        sizeClasses[size],
-        className,
-        {
-          "cursor-not-allowed": props.disabled
-        }
-      ),
-      ...props
-    }
-  );
-};
-
 const ToolCallContext = createContext(void 0);
 function ToolCallProvider({
   children,
@@ -4613,7 +4556,7 @@ const ToolApprovalButtons = ({ toolCalled, toolCallId, toolApprovalMetadata }) =
       /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Approval required" }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
         /* @__PURE__ */ jsxs(
-          Button$1,
+          Button,
           {
             onClick: handleApprove,
             disabled: isRunning || !!toolCallApprovalStatus,
@@ -4625,7 +4568,7 @@ const ToolApprovalButtons = ({ toolCalled, toolCallId, toolApprovalMetadata }) =
           }
         ),
         /* @__PURE__ */ jsxs(
-          Button$1,
+          Button,
           {
             onClick: handleDecline,
             disabled: isRunning || !!toolCallApprovalStatus,
@@ -4655,12 +4598,12 @@ const ToolBadge = ({
   let argSlot = null;
   try {
     const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
-    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: formattedArgs, "data-testid": "tool-args" });
+    argSlot = /* @__PURE__ */ jsx(CodeEditor, { data: formattedArgs, "data-testid": "tool-args" });
   } catch {
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: args });
   }
-  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, "data-testid": "tool-result" });
-  let suspendPayloadSlot = typeof suspendPayload === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: suspendPayload }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: suspendPayload, "data-testid": "tool-suspend-payload" });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: result }) : /* @__PURE__ */ jsx(CodeEditor, { data: result, "data-testid": "tool-result" });
+  let suspendPayloadSlot = typeof suspendPayload === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: suspendPayload }) : /* @__PURE__ */ jsx(CodeEditor, { data: suspendPayload, "data-testid": "tool-suspend-payload" });
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   const toolCalled = result || toolOutput.length > 0;
@@ -4693,7 +4636,7 @@ const ToolBadge = ({
         ] }),
         toolOutput.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool output" }),
-          /* @__PURE__ */ jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: toolOutput, "data-testid": "tool-output" }) })
+          /* @__PURE__ */ jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsx(CodeEditor, { data: toolOutput, "data-testid": "tool-output" }) })
         ] }),
         /* @__PURE__ */ jsx(
           ToolApprovalButtons,
@@ -5111,6 +5054,7 @@ const useStreamWorkflow = ({ debugMode }) => {
       workflowId,
       runId,
       inputData,
+      initialState,
       requestContext: playgroundRequestContext,
       perStep
     }) => {
@@ -5126,8 +5070,9 @@ const useStreamWorkflow = ({ debugMode }) => {
       });
       const workflow = client.getWorkflow(workflowId);
       const run = await workflow.createRun({ runId });
-      const stream = await run.streamVNext({
+      const stream = await run.stream({
         inputData,
+        initialState,
         requestContext,
         closeOnSuspend: true,
         tracingOptions: settings?.tracingOptions,
@@ -5190,7 +5135,7 @@ const useStreamWorkflow = ({ debugMode }) => {
       }
       const workflow = client.getWorkflow(workflowId);
       const run = await workflow.createRun({ runId });
-      const stream = await run.observeStreamVNext();
+      const stream = await run.observeStream();
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
       }
@@ -5250,7 +5195,7 @@ const useStreamWorkflow = ({ debugMode }) => {
         requestContext.set(key, value);
       });
       const run = await workflow.createRun({ runId });
-      const stream = await run.resumeStreamVNext({
+      const stream = await run.resumeStream({
         step,
         resumeData,
         requestContext,
@@ -5477,11 +5422,11 @@ const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
   }, [isEndOfListInView, query.hasNextPage, query.isFetchingNextPage]);
   return { ...query, setEndOfListElement };
 };
-const useWorkflowRunExecutionResult = (workflowId, runId, refetchInterval) => {
+const useWorkflowRun = (workflowId, runId, refetchInterval) => {
   const client = useMastraClient();
   return useQuery({
-    queryKey: ["workflow-run-execution-result", workflowId, runId],
-    queryFn: () => client.getWorkflow(workflowId).runExecutionResult(runId),
+    queryKey: ["workflow-run", workflowId, runId],
+    queryFn: () => client.getWorkflow(workflowId).runById(runId),
     enabled: Boolean(workflowId && runId),
     gcTime: 0,
     staleTime: 0,
@@ -5571,7 +5516,7 @@ function WorkflowRunProvider({
   const [isRunning, setIsRunning] = useState(false);
   const [debugMode, setDebugMode] = useState(false);
   const refetchExecResultInterval = isRunning ? void 0 : ["success", "failed", "canceled", "bailed"].includes(result?.status ?? "") ? void 0 : 5e3;
-  const { isLoading: isLoadingRunExecutionResult, data: runExecutionResult } = useWorkflowRunExecutionResult(
+  const { isLoading: isLoadingRunExecutionResult, data: runExecutionResult } = useWorkflowRun(
     workflowId,
     initialRunId ?? "",
     refetchExecResultInterval
@@ -5586,7 +5531,8 @@ function WorkflowRunProvider({
       result: runExecutionResult?.result,
       error: runExecutionResult?.error,
       runId: initialRunId,
-      serializedStepGraph: runExecutionResult?.serializedStepGraph
+      serializedStepGraph: runExecutionResult?.serializedStepGraph,
+      value: runExecutionResult?.initialState
     } : void 0;
   }, [runExecutionResult, initialRunId]);
   const { data: workflow, isLoading, error } = useWorkflow(workflowId);
@@ -5611,7 +5557,14 @@ function WorkflowRunProvider({
   useEffect(() => {
     if (runSnapshot?.runId) {
       setResult(convertWorkflowRunStateToStreamResult(runSnapshot));
-      setPayload(runSnapshot.context?.input);
+      if (runSnapshot.value && Object.keys(runSnapshot.value).length > 0) {
+        setPayload({
+          initialState: runSnapshot.value,
+          inputData: runSnapshot.context?.input
+        });
+      } else {
+        setPayload(runSnapshot.context?.input);
+      }
       setRunId(runSnapshot.runId);
     }
   }, [runSnapshot]);
@@ -6062,6 +6015,47 @@ const constructNodesAndEdges = ({
   return { nodes: layoutedNodes, edges: layoutedEdges };
 };
 
+const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config)=>(props)=>{
+        var _config_compoundVariants;
+        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+        const { variants, defaultVariants } = config;
+        const getVariantClassNames = Object.keys(variants).map((variant)=>{
+            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+            if (variantProp === null) return null;
+            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+            return variants[variant][variantKey];
+        });
+        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
+            let [key, value] = param;
+            if (value === undefined) {
+                return acc;
+            }
+            acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
+            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+            return Object.entries(compoundVariantOptions).every((param)=>{
+                let [key, value] = param;
+                return Array.isArray(value) ? value.includes({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                }[key]) : ({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                })[key] === value;
+            }) ? [
+                ...acc,
+                cvClass,
+                cvClassName
+            ] : acc;
+        }, []);
+        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+
 const textVariants = cva("block", {
   variants: {
     variant: {
@@ -6285,39 +6279,6 @@ const useCurrentRun = () => {
   return { steps, runId: context.runId };
 };
 
-const useCodemirrorTheme$1 = () => {
-  return useMemo(() => {
-    const baseTheme = draculaInit({
-      settings: {
-        fontFamily: "var(--geist-mono)",
-        fontSize: "0.8rem",
-        lineHighlight: "transparent",
-        gutterBackground: "transparent",
-        gutterForeground: "#939393",
-        background: "transparent"
-      },
-      styles: [{ tag: [tags.className, tags.propertyName] }]
-    });
-    const customLineNumberTheme = EditorView.theme({
-      ".cm-editor": {
-        colorScheme: "dark",
-        // ensures color scheme
-        backgroundColor: "transparent"
-      },
-      ".cm-lineNumbers .cm-gutterElement": {
-        color: "#939393"
-        // ← custom line number color
-      }
-    });
-    return [baseTheme, customLineNumberTheme];
-  }, []);
-};
-const SyntaxHighlighter$1 = ({ data }) => {
-  const formattedCode = JSON.stringify(data, null, 2);
-  const theme = useCodemirrorTheme$1();
-  return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
-};
-
 const CodeDialogContent = ({
   data,
   language = "auto"
@@ -6408,7 +6369,7 @@ const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxs(Alert, { variant: "dest
   /* @__PURE__ */ jsx(AlertTitle, { children: error })
 ] });
 
-const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button$2, { type: "submit", children });
+const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button, { type: "submit", children });
 
 const inputVariants = cva(
   "flex w-full text-icon6 rounded-lg border bg-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
@@ -6520,62 +6481,44 @@ const BooleanField = ({ field, label, id, inputProps, value }) => /* @__PURE__ *
   ] })
 ] });
 
-function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+function DatePicker({ 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",
+        months: "flex flex-col space-y-4 sm:space-y-0 ",
+        month: "space-y-4 text-[0.75rem] ",
+        caption: "flex justify-between pt-1 items-center pl-2",
+        caption_label: "text-text font-medium ",
+        nav: "flex items-center",
         nav_button_previous: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "absolute left-4 top-[56px] z-10"
-        ),
-        nav_button_next: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "absolute right-4 top-[56px] z-10"
+          "flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
+        nav_button_next: cn("flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
         dropdown_month: "w-full border-collapse space-y-1",
         weeknumber: "flex",
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
           props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
           "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
         ),
         day_range_start: "day-range-start",
         day_range_end: "day-range-end",
-        day_selected: "!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-lightGray-7/50 text-accent-foreground",
+        day_selected: "!bg-primary/50 !text-primary-foreground hover:bg-primary rounded-md hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-primary/10 text-accent-foreground",
         day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
+        head_cell: "text-[0.625rem] text-muted-foreground",
         ...classNames
       },
-      components: {
-        // IconDropdown: ({  }) => (
-        //   <CalendarIcon
-        //     className={cn('h-4 w-4', {
-        //       'rotate-180': orientation === 'up',
-        //       'rotate-90': orientation === 'left',
-        //       '-rotate-90': orientation === 'right',
-        //     })}
-        //   />
-        // ),
-      },
       ...props
     }
   );
 }
-Calendar.displayName = "Calendar";
 
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
@@ -6595,163 +6538,10 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-const DatePicker$1 = ({
-  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,
-            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$2,
-          {
-            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$2,
-      {
-        ref,
-        variant: "outline",
-        className: cn(
-          "bg-neutral-825 border-neutral-775 w-full justify-start whitespace-nowrap rounded-md border px-2 py-0 text-left flex items-center gap-1",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" }),
-          value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PPP") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
-        ]
-      }
-    );
-  }
-);
-DefaultButton.displayName = "DefaultButton";
-
 const DateField = ({ inputProps, field, error, id }) => {
   const { key, ...props } = inputProps;
-  const [value, setValue] = useState(null);
+  const [value, setValue] = useState(void 0);
+  const [open, setOpen] = useState(false);
   useEffect(() => {
     if (field.default) {
       const date = new Date(field.default);
@@ -6760,24 +6550,32 @@ const DateField = ({ inputProps, field, error, id }) => {
       }
     }
   }, [field]);
-  return /* @__PURE__ */ jsx(
-    DatePicker$1,
-    {
-      id,
-      className: error ? "border-destructive" : "",
-      value,
-      setValue: (date) => {
-        const newDate = date ? new Date(date).toISOString() : date;
-        if (newDate) {
-          props.onChange({
-            target: { value: newDate?.toString(), name: inputProps.name }
-          });
-          setValue(new Date(newDate));
-        }
-      },
-      clearable: true
+  const handleSelect = (date) => {
+    setValue(date);
+    if (date) {
+      props.onChange({
+        target: { value: date.toISOString(), name: inputProps.name }
+      });
     }
-  );
+    setOpen(false);
+  };
+  const handleClear = () => {
+    setValue(void 0);
+    props.onChange({
+      target: { value: "", name: inputProps.name }
+    });
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { id, variant: "light", size: "lg", className: cn("w-full", error ? "border-destructive" : ""), 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: "Pick a date" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-auto p-0 bg-surface4", align: "start", children: [
+      /* @__PURE__ */ jsx(DatePicker, { mode: "single", selected: value, onSelect: handleSelect, month: value, onMonthChange: setValue }),
+      value && /* @__PURE__ */ jsx("div", { className: "p-3 pt-0", children: /* @__PURE__ */ jsx(Button, { variant: "light", size: "lg", className: "w-full", onClick: handleClear, children: "Clear" }) })
+    ] })
+  ] });
 };
 
 const Select$1 = SelectPrimitive.Root;
@@ -6872,7 +6670,7 @@ const ObjectWrapper = ({ label, children }) => {
         /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Braces, {}) }),
         label
       ] }),
-      /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsOpen(!isOpen), type: "button", className: "ml-auto", children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("transition-all", isOpen ? "rotate-180" : "rotate-0") }) }) })
+      /* @__PURE__ */ jsx(Button, { onClick: () => setIsOpen(!isOpen), type: "button", className: "ml-auto", children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("transition-all", isOpen ? "rotate-180" : "rotate-0") }) }) })
     ] }),
     isOpen && /* @__PURE__ */ jsx(
       "div",
@@ -6911,7 +6709,7 @@ const ArrayWrapper = ({ label, children, onAddItem }) => {
 const ArrayElementWrapper = ({ children, onRemove }) => {
   return /* @__PURE__ */ jsxs("div", { className: "pl-4 border-l border-border1", children: [
     children,
-    /* @__PURE__ */ jsxs(Button$1, { onClick: onRemove, type: "button", children: [
+    /* @__PURE__ */ jsxs(Button, { onClick: onRemove, type: "button", children: [
       /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
       "Delete"
     ] })
@@ -6970,17 +6768,7 @@ const RecordField = ({ inputProps, field, error, id }) => {
   };
   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$2,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          className: "absolute right-2 top-2",
-          onClick: () => removePair(pair.id),
-          children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
-        }
-      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", className: "absolute right-2 top-2", onClick: () => removePair(pair.id), children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }) }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-6", children: [
         /* @__PURE__ */ jsx(
           Input,
@@ -7002,7 +6790,7 @@ const RecordField = ({ inputProps, field, error, id }) => {
         )
       ] })
     ] }, pair.id)),
-    /* @__PURE__ */ jsxs(Button$2, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: addPair, children: [
+    /* @__PURE__ */ jsxs(Button, { type: "button", className: "w-full", onClick: addPair, children: [
       /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
       "Add Key-Value Pair"
     ] })
@@ -7547,7 +7335,7 @@ function DynamicForm({
       noValidate: true
     },
     uiComponents: {
-      SubmitButton: ({ children: children2 }) => onSubmit ? /* @__PURE__ */ jsx(Button$1, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children2 }) : null
+      SubmitButton: ({ children: children2 }) => onSubmit ? /* @__PURE__ */ jsx(Button, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children2 }) : null
     },
     formComponents: {
       Label: ({ value }) => /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal", children: value })
@@ -7672,14 +7460,14 @@ const JSONInput = ({
       ] }),
       /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
     ] }),
-    /* @__PURE__ */ jsx(SyntaxHighlighter, { data: inputData, onChange: setInputData }),
+    /* @__PURE__ */ jsx(JsonEditor, { data: inputData, onChange: setInputData }),
     children,
-    withoutSubmit ? null : /* @__PURE__ */ jsx(Button$1, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : submitButtonLabel })
+    withoutSubmit ? null : /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : submitButtonLabel })
   ] });
 };
-const SyntaxHighlighter = ({ data, onChange }) => {
-  const theme = useCodemirrorTheme$2();
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: [
+const JsonEditor = ({ data, onChange }) => {
+  const theme = useCodemirrorTheme$1();
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
     /* @__PURE__ */ jsx(CopyButton, { content: data, className: "absolute top-2 right-2 z-10" }),
     /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [jsonLanguage], onChange })
   ] });
@@ -7865,12 +7653,18 @@ const WorkflowTimeTravelForm = ({
     }
     try {
       const parsed = parse(stepDefinition.inputSchema);
-      return { schema: resolveSerializedZodOutput(jsonSchemaToZod(parsed)), schemaError: null };
+      const zodStateSchema = workflow?.stateSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(workflow.stateSchema))) : null;
+      const zodStepSchema = resolveSerializedZodOutput(jsonSchemaToZod(parsed));
+      const schemaToUse = zodStateSchema ? z.object({
+        inputData: zodStepSchema,
+        initialState: zodStateSchema.optional()
+      }) : zodStepSchema;
+      return { schema: schemaToUse, schemaError: null };
     } catch (err) {
       console.error("Failed to parse step schema", err);
       return { schema: z.record(z.string(), z.any()) };
     }
-  }, [stepDefinition?.inputSchema]);
+  }, [stepDefinition?.inputSchema, workflow?.stateSchema]);
   const handleSubmit = async (data) => {
     setFormError(null);
     setIsSubmitting(true);
@@ -7878,11 +7672,14 @@ const WorkflowTimeTravelForm = ({
       const parsedResume = resumeData.trim() ? JSON.parse(resumeData) : {};
       const parsedContext = contextValue.trim() ? JSON.parse(contextValue) : {};
       const parsedNestedContext = nestedContextValue.trim() ? JSON.parse(nestedContextValue) : {};
+      const { initialState, inputData: dataInputData } = data ?? {};
+      const inputData2 = workflow?.stateSchema ? dataInputData : data;
       const payload = {
         runId: prevRunId,
         workflowId,
         step: stepKey,
-        inputData: data,
+        inputData: inputData2,
+        initialState,
         resumeData: Object.keys(parsedResume)?.length > 0 ? parsedResume : void 0,
         context: Object.keys(parsedContext)?.length > 0 ? parsedContext : void 0,
         nestedStepsContext: Object.keys(parsedNestedContext)?.length > 0 ? parsedNestedContext : void 0,
@@ -8101,9 +7898,9 @@ const WorkflowStepActionBar = ({
         status === "running" && "bg-accent6Dark"
       ),
       children: [
-        onShowNestedGraph && /* @__PURE__ */ jsx(Button$1, { onClick: handleNestedGraphClick, className: cn(isNestedGraphOpen && activeButtonClass), children: "View nested graph" }),
+        onShowNestedGraph && /* @__PURE__ */ jsx(Button, { onClick: handleNestedGraphClick, className: cn(isNestedGraphOpen && activeButtonClass), children: "View nested graph" }),
         showTimeTravel && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsTimeTravelOpen(true), children: "Time travel" }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsTimeTravelOpen(true), children: "Time travel" }),
           /* @__PURE__ */ jsx(Dialog, { open: isTimeTravelOpen, onOpenChange: setIsTimeTravelOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
               "Time travel to ",
@@ -8114,7 +7911,7 @@ const WorkflowStepActionBar = ({
         ] }),
         showDebugMode && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            Button$1,
+            Button,
             {
               onClick: () => {
                 if (mapConfig) {
@@ -8143,7 +7940,7 @@ const WorkflowStepActionBar = ({
             ) })
           ] }) }),
           /* @__PURE__ */ jsx(
-            Button$1,
+            Button,
             {
               onClick: () => {
                 if (mapConfig) {
@@ -8172,9 +7969,9 @@ const WorkflowStepActionBar = ({
             ) })
           ] }) })
         ] }),
-        mapConfig && /* @__PURE__ */ jsx(Button$1, { onClick: handleMapConfigClick, className: cn(isMapConfigOpen && activeButtonClass), children: "Map config" }),
+        mapConfig && /* @__PURE__ */ jsx(Button, { onClick: handleMapConfigClick, className: cn(isMapConfigOpen && activeButtonClass), children: "Map config" }),
         input && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsInputOpen(true), children: "Input" }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
           /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
               stepName,
@@ -8184,7 +7981,7 @@ const WorkflowStepActionBar = ({
           ] }) })
         ] }),
         resumeData && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsResumeDataOpen(true), children: "Resume data" }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsResumeDataOpen(true), children: "Resume data" }),
           /* @__PURE__ */ jsx(Dialog, { open: isResumeDataOpen, onOpenChange: setIsResumeDataOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
               stepName,
@@ -8194,7 +7991,7 @@ const WorkflowStepActionBar = ({
           ] }) })
         ] }),
         (output ?? suspendOutput) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsOutputOpen(true), children: "Output" }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
           /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
               stepName,
@@ -8204,7 +8001,7 @@ const WorkflowStepActionBar = ({
           ] }) })
         ] }),
         error && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsErrorOpen(true), children: "Error" }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
           /* @__PURE__ */ jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
               stepName,
@@ -8214,7 +8011,7 @@ const WorkflowStepActionBar = ({
           ] }) })
         ] }),
         tripwire && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsTripwireOpen(true), className: "text-amber-400 hover:text-amber-300", children: "Tripwire" }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsTripwireOpen(true), className: "text-amber-400 hover:text-amber-300", children: "Tripwire" }),
           /* @__PURE__ */ jsx(Dialog, { open: isTripwireOpen, onOpenChange: setIsTripwireOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
               stepName,
@@ -8689,7 +8486,7 @@ const ZoomSlider = forwardRef(({ className, ...props }) => {
   const { zoom } = useViewport();
   const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
   return /* @__PURE__ */ jsxs(Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
     /* @__PURE__ */ jsx(
       Slider,
       {
@@ -8703,12 +8500,12 @@ const ZoomSlider = forwardRef(({ className, ...props }) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsxs(Button$2, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
+    /* @__PURE__ */ jsx(Button, { onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs(Button, { className: "min-w-20 tabular-nums", onClick: () => zoomTo(1, { duration: 300 }), children: [
       (100 * zoom).toFixed(0),
       "%"
     ] }),
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsx(Maximize, { className: "h-4 w-4" }) })
+    /* @__PURE__ */ jsx(Button, { onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsx(Maximize, { className: "h-4 w-4" }) })
   ] });
 });
 ZoomSlider.displayName = "ZoomSlider";
@@ -8879,10 +8676,7 @@ const WorkflowStatus = ({ stepId, status, result, tripwire }) => {
           onToggleExpand: () => setIsTripwireExpanded(!isTripwireExpanded),
           hasMetadata: hasTripwireMetadata
         }
-      ) : /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
-        /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
-        /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
-      ] })
+      ) : /* @__PURE__ */ jsx(CodeEditor, { data: result })
     }
   );
 };
@@ -8958,6 +8752,7 @@ function WorkflowTrigger({
   const [innerRunId, setInnerRunId] = useState("");
   const [cancelResponse, setCancelResponse] = useState(null);
   const triggerSchema = workflow?.inputSchema;
+  const stateSchema = workflow?.stateSchema;
   const handleExecuteWorkflow = async (data) => {
     try {
       if (!workflow) return;
@@ -8968,7 +8763,9 @@ function WorkflowTrigger({
       setRunId?.(run.runId);
       setInnerRunId(run.runId);
       setContextRunId(run.runId);
-      streamWorkflow({ workflowId, runId: run.runId, inputData: data, requestContext });
+      const { initialState, inputData: dataInputData } = data ?? {};
+      const inputData = stateSchema ? dataInputData : data;
+      streamWorkflow({ workflowId, runId: run.runId, inputData, initialState, requestContext });
     } catch (err) {
       setIsRunning(false);
       toast$1.error("Error executing workflow");
@@ -9022,6 +8819,11 @@ function WorkflowTrigger({
   if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
+  const zodStateSchema = stateSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stateSchema))) : null;
+  const zodSchemaToUse = zodStateSchema ? z.object({
+    inputData: zodInputSchema,
+    initialState: zodStateSchema
+  }) : zodInputSchema;
   const workflowActivePaths = streamResultToUse?.steps ?? {};
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   const doneStatuses = ["success", "failed", "canceled", "tripwire"];
@@ -9031,10 +8833,10 @@ function WorkflowTrigger({
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
         /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
       ] }),
-      !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
+      !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodSchemaToUse ? /* @__PURE__ */ jsx(
         WorkflowInputData,
         {
-          schema: zodInputSchema,
+          schema: zodSchemaToUse,
           defaultValues: payload,
           isSubmitLoading: isStreamingWorkflow,
           submitButtonLabel: "Run",
@@ -9045,7 +8847,7 @@ function WorkflowTrigger({
           withoutSubmit: !!paramsRunId
         }
       ) : !!paramsRunId ? null : /* @__PURE__ */ jsx(
-        Button$1,
+        Button,
         {
           className: "w-full",
           variant: "light",
@@ -9087,7 +8889,7 @@ function WorkflowTrigger({
         ] }, step.stepId);
       }),
       result?.status === "running" && /* @__PURE__ */ jsxs(
-        Button$1,
+        Button,
         {
           variant: "light",
           className: "w-full",
@@ -9145,13 +8947,13 @@ function WorkflowTrigger({
 const WorkflowJsonDialog = ({ result }) => {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Button$1, { variant: "light", onClick: () => setOpen(true), className: "w-full", size: "lg", children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "light", onClick: () => setOpen(true), className: "w-full", size: "lg", children: [
       /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, { className: "text-icon3" }) }),
       "Open Workflow Execution (JSON)"
     ] }),
     /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-6xl max-h-[90vh] overflow-y-auto overflow-x-hidden bg-surface2", children: [
       /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow Execution (JSON)" }),
-      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, className: "p-4" }) })
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(CodeEditor, { data: result, className: "p-4" }) })
     ] }) }) })
   ] });
 };
@@ -9613,7 +9415,7 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsx("div", { className: "flex
     titleSlot: "Configure Workflows",
     descriptionSlot: "Mastra workflows are not configured yet. You can find more information in the documentation.",
     actionSlot: /* @__PURE__ */ jsxs(
-      Button$1,
+      Button,
       {
         size: "lg",
         className: "w-full",
@@ -9640,38 +9442,7 @@ const EntityHeader = ({ icon, title, isLoading, children }) => {
   ] });
 };
 
-const Tabs$1 = TabsPrimitive.Root;
-const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: clsx("bg-muted text-muted-foreground inline-flex items-center bg-transparent", className),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "-outline-offset-2 data-[state=active]:bg-background data-[state=active]:text-foreground whitespace-nowrap text-ui-lg text-icon3 -mb-[0.5px] inline-flex items-center justify-center border-b-2 border-transparent p-3 font-medium disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-2 data-[state=active]:border-white data-[state=active]:shadow",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { ref, className: cn("mt-2 -outline-offset-2", className), ...props }));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-const PlaygroundTabs = ({
-  children,
-  defaultTab,
-  value,
-  onValueChange,
-  className
-}) => {
+const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
   const [internalTab, setInternalTab] = useState(defaultTab);
   const isControlled = value !== void 0 && onValueChange !== void 0;
   const currentTab = isControlled ? value : internalTab;
@@ -9683,17 +9454,41 @@ const PlaygroundTabs = ({
       setInternalTab(typedValue);
     }
   };
-  return /* @__PURE__ */ jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full overflow-x-auto", className), children });
+  return /* @__PURE__ */ jsx(RadixTabs.Root, { value: currentTab, onValueChange: handleTabChange, className: cn("overflow-y-auto", className), children });
 };
-const TabList$1 = ({ children, className }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
+
+const TabList = ({ children, variant = "default", className }) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(
+    RadixTabs.List,
+    {
+      className: cn(
+        "flex items-center",
+        {
+          // variant: default
+          "text-[0.9375rem]": variant === "default",
+          "[&>button]:py-[0.5rem] [&>button]:px-[1.5rem] [&>button]:font-normal [&>button]:text-icon3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
+          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:transition-colors [&>button[data-state=active]]:duration-200 [&>button[data-state=active]]:border-icon3": variant === "default",
+          // variant: buttons
+          "border border-border1 flex justify-stretch rounded-md overflow-hidden text-[0.875rem] min-h-[2.5rem]": variant === "buttons",
+          "[&>button]:flex-1 [&>button]:py-[0.5rem] [&>button]:px-[1rem] [&>button]:text-icon3": variant === "buttons",
+          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:bg-[#222]": variant === "buttons"
+        },
+        className
+      ),
+      children
+    }
+  ) });
 };
-const Tab$1 = ({ children, value, onClick, onClose }) => {
+
+const Tab = ({ children, value, onClick, onClose, className }) => {
   return /* @__PURE__ */ jsxs(
-    TabsTrigger,
+    RadixTabs.Trigger,
     {
       value,
-      className: "text-xs p-3 text-mastra-el-3 data-[state=active]:text-mastra-el-5 data-[state=active]:border-b-2 whitespace-nowrap flex-shrink-0 flex items-center gap-1.5",
+      className: cn(
+        "text-xs p-3 text-mastra-el-3 data-[state=active]:text-mastra-el-5 data-[state=active]:border-b-2 whitespace-nowrap flex-shrink-0 flex items-center justify-center gap-1.5",
+        className
+      ),
       onClick,
       children: [
         children,
@@ -9713,8 +9508,19 @@ const Tab$1 = ({ children, value, onClick, onClose }) => {
     }
   );
 };
-const TabContent$1 = ({ children, value }) => {
-  return /* @__PURE__ */ jsx(TabsContent, { value, className: "h-full overflow-auto flex flex-col", children });
+
+const TabContent = ({ children, value, className }) => {
+  return /* @__PURE__ */ jsx(
+    RadixTabs.Content,
+    {
+      value,
+      className: cn(
+        "grid py-3 overflow-y-auto ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:none",
+        className
+      ),
+      children
+    }
+  );
 };
 
 const WorkflowRunOptions = () => {
@@ -9952,12 +9758,12 @@ function WorkflowInformation({ workflowId, initialRunId }) {
       ] }),
       workflow?.isProcessorWorkflow && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(Cpu, { className: "h-3 w-3" }), className: "bg-violet-500/20 text-violet-400", children: "Processor" })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxs(PlaygroundTabs, { defaultTab: "current-run", value: tab, onValueChange: handleTabChange, className: "h-full", children: [
-      /* @__PURE__ */ jsxs(TabList$1, { children: [
-        /* @__PURE__ */ jsx(Tab$1, { value: "current-run", children: "Current Run" }),
-        /* @__PURE__ */ jsx(Tab$1, { value: "run-options", children: "Run Options" }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxs(Tabs, { defaultTab: "current-run", value: tab, onValueChange: handleTabChange, className: "h-full", children: [
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { value: "current-run", children: "Current Run" }),
+        /* @__PURE__ */ jsx(Tab, { value: "run-options", children: "Run Options" }),
         stepDetail && nodeDetailTabName && /* @__PURE__ */ jsxs(
-          Tab$1,
+          Tab,
           {
             value: "node-details",
             onClose: () => {
@@ -9971,7 +9777,7 @@ function WorkflowInformation({ workflowId, initialRunId }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(TabContent$1, { value: "current-run", children: workflowId ? initialRunId ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(TabContent, { value: "current-run", children: workflowId ? initialRunId ? /* @__PURE__ */ jsx(
         WorkflowRunDetail,
         {
           workflowId,
@@ -10004,8 +9810,8 @@ function WorkflowInformation({ workflowId, initialRunId }) {
           cancelWorkflowRun
         }
       ) : null }),
-      /* @__PURE__ */ jsx(TabContent$1, { value: "run-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) }),
-      stepDetail && /* @__PURE__ */ jsx(TabContent$1, { value: "node-details", children: /* @__PURE__ */ jsx(WorkflowStepDetailContent, {}) })
+      /* @__PURE__ */ jsx(TabContent, { value: "run-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) }),
+      stepDetail && /* @__PURE__ */ jsx(TabContent, { value: "node-details", children: /* @__PURE__ */ jsx(WorkflowStepDetailContent, {}) })
     ] }) })
   ] });
 }
@@ -10094,15 +9900,14 @@ function Combobox({
   }, [highlightedIndex]);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button$2,
+      Button,
       {
         ref: triggerRef,
-        variant,
         role: "combobox",
         "aria-expanded": open,
+        variant,
         className: cn("w-full justify-between", className),
         disabled,
-        size: "sm",
         children: [
           /* @__PURE__ */ jsx("span", { className: "truncate text-ui-lg", children: selectedOption ? selectedOption.label : placeholder }),
           /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
@@ -10203,8 +10008,7 @@ function WorkflowCombobox({
       searchPlaceholder,
       emptyText,
       className,
-      disabled: disabled || isLoading || isError,
-      variant: "ghost"
+      disabled: disabled || isLoading || isError
     }
   );
 }
@@ -10311,7 +10115,7 @@ const CollapsiblePanel = ({ collapsedSize, children, direction, ...props }) => {
         }
       },
       children: collapsed ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button$1, { onClick: expand, className: "!h-48 border-none", children: /* @__PURE__ */ jsx(Icon, { children: direction === "left" ? /* @__PURE__ */ jsx(ArrowRight, {}) : /* @__PURE__ */ jsx(ArrowLeft, {}) }) }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { onClick: expand, className: "!h-48 border-none", children: /* @__PURE__ */ jsx(Icon, { children: direction === "left" ? /* @__PURE__ */ jsx(ArrowRight, {}) : /* @__PURE__ */ jsx(ArrowLeft, {}) }) }) }) }),
         /* @__PURE__ */ jsx(TooltipContent, { children: "Expand" })
       ] }) : children
     }
@@ -10395,7 +10199,7 @@ const WorkflowBadge = ({
   const snapshot = typeof run?.snapshot === "object" ? run?.snapshot : void 0;
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
-  let suspendPayloadSlot = typeof suspendPayload === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: suspendPayload }) : /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: suspendPayload, "data-testid": "tool-suspend-payload" });
+  let suspendPayloadSlot = typeof suspendPayload === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: suspendPayload }) : /* @__PURE__ */ jsx(CodeEditor, { data: suspendPayload, "data-testid": "tool-suspend-payload" });
   if (isWorkflowLoading || !workflow) return /* @__PURE__ */ jsx(LoadingBadge, {});
   return /* @__PURE__ */ jsxs(
     BadgeWrapper,
@@ -10427,8 +10231,8 @@ const WorkflowBadgeExtended = ({ workflowId, workflow, runId }) => {
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
-      /* @__PURE__ */ jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph`, children: "Go to workflow" }),
-      runId && /* @__PURE__ */ jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph/${runId}`, children: "See run" })
+      /* @__PURE__ */ jsx(Button, { as: Link, href: `/workflows/${workflowId}/graph`, children: "Go to workflow" }),
+      runId && /* @__PURE__ */ jsx(Button, { as: Link, href: `/workflows/${workflowId}/graph/${runId}`, children: "See run" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "rounded-md overflow-hidden h-[60vh] w-full", children: /* @__PURE__ */ jsx(WorkflowGraph, { workflowId, workflow }) })
   ] });
@@ -10523,11 +10327,14 @@ const AgentBadgeWrapper = ({
   toolCallId,
   toolApprovalMetadata
 }) => {
-  const { data } = useAgentMessages({
+  const { data, isLoading } = useAgentMessages({
     threadId: result?.subAgentThreadId,
     agentId,
     memory: true
   });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingBadge, {});
+  }
   const convertedMessages = data?.messages ? toAISdkV5Messages(data.messages) : [];
   const childMessages = result?.childMessages ?? resolveToChildMessages(convertedMessages);
   return /* @__PURE__ */ jsx(
@@ -11064,7 +10871,9 @@ const ProviderLogo = ({ providerId, className = "", size = 20 }) => {
 const AssistantMessage = ({ hasModelList }) => {
   const data = useMessage();
   const messageId = data.id;
-  const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
+  const isNotAssistantTextResponse = data.content.every(
+    ({ type, metadata }) => type === "tool-call" || type === "reasoning" || type === "text" && metadata?.mode === "network" && metadata?.completionResult
+  );
   const modelMetadata = data.metadata?.custom?.modelMetadata;
   const showModelUsed = hasModelList && modelMetadata;
   return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
@@ -11078,7 +10887,7 @@ const AssistantMessage = ({ hasModelList }) => {
         }
       }
     ) }),
-    !isToolCallAndOrReasoning && /* @__PURE__ */ jsxs("div", { className: cn("h-6 pt-4 flex gap-2 items-center", { "pb-1": showModelUsed }), children: [
+    !isNotAssistantTextResponse && /* @__PURE__ */ jsxs("div", { className: cn("h-6 pt-4 flex gap-2 items-center", { "pb-1": showModelUsed }), children: [
       showModelUsed && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx(ProviderLogo, { providerId: modelMetadata.modelProvider, size: 14 }),
         /* @__PURE__ */ jsxs("span", { className: "text-ui-xs leading-ui-xs", children: [
@@ -11592,7 +11401,7 @@ const AttachFileDialog = ({ onOpenChange, open }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Button$1, { type: "submit", className: "!h-8", variant: "light", children: [
+      /* @__PURE__ */ jsxs(Button, { type: "submit", className: "!h-8", variant: "light", children: [
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Link, {}) }),
         "Add"
       ] })
@@ -11656,18 +11465,8 @@ const ThreadWrapper = ({ children }) => {
   return /* @__PURE__ */ jsx(ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", "data-testid": "thread-wrapper", children });
 };
 const ThreadWelcome = ({ agentName }) => {
-  const safeAgentName = agentName ?? "";
-  const words = safeAgentName.split(" ") ?? [];
-  let initials = "A";
-  if (words.length === 2) {
-    initials = `${words[0][0]}${words[1][0]}`;
-  } else if (safeAgentName.length > 0) {
-    initials = `${safeAgentName[0]}`;
-  } else {
-    initials = "A";
-  }
   return /* @__PURE__ */ jsx(ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
-    /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: initials }) }),
+    /* @__PURE__ */ jsx(Avatar, { name: agentName || "Agent", size: "lg" }),
     /* @__PURE__ */ jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
@@ -11717,7 +11516,6 @@ const SpeechInput = ({ agentId }) => {
     {
       type: "button",
       tooltip: isListening ? "Stop dictation" : "Start dictation",
-      variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
       children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
@@ -11732,7 +11530,6 @@ const ComposerAction = () => {
       {
         type: "button",
         tooltip: "Add attachment",
-        variant: "ghost",
         className: "rounded-full",
         onClick: () => setIsAddAttachmentDialogOpen(true),
         children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
@@ -11755,8 +11552,8 @@ const EditComposer = () => {
   return /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
     /* @__PURE__ */ jsx(ComposerPrimitive.Input, {}),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
-      /* @__PURE__ */ jsx(ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsx(Button$2, { children: "Send" }) })
+      /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border h-button-md gap-md hover:bg-surface4 text-icon3 hover:text-icon6", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border h-button-md gap-md hover:bg-surface4 text-icon3 hover:text-icon6", children: "Send" }) })
     ] })
   ] });
 };
@@ -13119,6 +12916,27 @@ const useMemorySearch = ({
     }
   });
 };
+const useCloneThread = () => {
+  const client = useMastraClient();
+  const queryClient = useQueryClient();
+  const { requestContext } = usePlaygroundStore();
+  return useMutation({
+    mutationFn: async ({ threadId, agentId, title }) => {
+      const thread = client.getMemoryThread({ threadId, agentId });
+      return thread.clone({ title, requestContext });
+    },
+    onSuccess: (_, variables) => {
+      const { agentId } = variables;
+      if (agentId) {
+        queryClient.invalidateQueries({ queryKey: ["memory", "threads", agentId, agentId] });
+      }
+      toast$1.success("Thread cloned successfully");
+    },
+    onError: () => {
+      toast$1.error("Failed to clone thread");
+    }
+  });
+};
 
 const NetworkCheckbox = ({ hasMemory, hasSubAgents }) => {
   const isNetworkAvailable = hasMemory && hasSubAgents;
@@ -13260,7 +13078,7 @@ const AgentSettings = ({ agentId }) => {
       ] })
     ] }),
     /* @__PURE__ */ jsx("section", { className: "py-7", children: /* @__PURE__ */ jsx(AgentAdvancedSettings, {}) }),
-    /* @__PURE__ */ jsxs(Button$1, { onClick: () => resetAll(), variant: "light", className: "w-full", size: "lg", children: [
+    /* @__PURE__ */ jsxs(Button, { onClick: () => resetAll(), variant: "light", className: "w-full", size: "lg", children: [
       /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(RefreshCw, {}) }),
       "Reset"
     ] })
@@ -13386,7 +13204,7 @@ const EmptyAgentsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-f
     titleSlot: "Configure Agents",
     descriptionSlot: "Mastra agents are not configured yet. You can find more information in the documentation.",
     actionSlot: /* @__PURE__ */ jsxs(
-      Button$1,
+      Button,
       {
         size: "lg",
         className: "w-full",
@@ -13463,7 +13281,7 @@ const RequestContext = () => {
         className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-2", children: /* @__PURE__ */ jsx(Button$1, { onClick: handleSaveRequestContext, children: "Save" }) })
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-2", children: /* @__PURE__ */ jsx(Button, { onClick: handleSaveRequestContext, children: "Save" }) })
   ] }) });
 };
 const RequestContextWrapper = ({ children }) => {
@@ -13471,7 +13289,7 @@ const RequestContextWrapper = ({ children }) => {
   return /* @__PURE__ */ jsxs("div", { className: "max-w-3xl p-5 overflow-y-scroll h-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "rounded-lg p-4 pb-5 bg-surface4 shadow-md space-y-3 border border-border1 mb-5", children: [
       /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: "text-icon3", children: "Mastra provides request context, which is a system based on dependency injection that enables you to configure your agents and tools with runtime variables. If you find yourself creating several different agents that do very similar things, request context allows you to combine them into one agent." }),
-      /* @__PURE__ */ jsxs(Button$1, { as: Link, to: "https://mastra.ai/en/docs/agents/runtime-variables", target: "_blank", children: [
+      /* @__PURE__ */ jsxs(Button, { as: Link, to: "https://mastra.ai/en/docs/agents/runtime-variables", target: "_blank", children: [
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ExternalLink, {}) }),
         "See documentation"
       ] })
@@ -14021,49 +13839,6 @@ function SideDialogRoot({
   ] }) });
 }
 
-const Button = React__default.forwardRef(
-  ({ className, variant = "outline", isFaded, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        className: cn(
-          "text-[.875rem] inline-flex items-center justify-center rounded-lg px-[1rem] gap-[.75rem] leading-0 border bg-transparent text-[rgba(255,255,255,0.7)] whitespace-nowrap",
-          "[&:not(:disabled):hover]:border-[rgba(255,255,255,0.25)] [&:not(:disabled):hover]:text-[rgba(255,255,255,0.9)]",
-          "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:mx-[-0.3em] [&>svg]:opacity-70 [&>svg]:shrink-0",
-          "focus:outline-none focus:shadow-[inset_0_0_0_1px_rgba(24,251,111,0.75)]",
-          className,
-          {
-            "cursor-not-allowed opacity-50": props.disabled,
-            "bg-ui-primaryBtnBg text-ui-primaryBtnText hover:bg-surface6 leading-[0] font-semibold": variant === "primary",
-            "min-h-[2rem]": variant === "ghost",
-            "min-h-[2.5rem]": variant !== "ghost",
-            "border-[rgba(255,255,255,0.15)]": variant === "outline",
-            "opacity-40": isFaded
-          }
-        ),
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
-const CombinedButtons = ({ className, children }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex items-center  text-[0.75rem] border border-border1 rounded-lg overflow-hidden",
-        "[&>button]:border-0 [&>button:not(:first-child)]:border-l [&>button:not(:first-child)]:border-border1",
-        "[&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg",
-        className
-      ),
-      children
-    }
-  );
-};
-
 function ButtonsGroup({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn(`flex gap-2 items-center`, "[&>button]:flex-grow", className), children });
 }
@@ -14136,7 +13911,7 @@ function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }
       ] }),
       /* @__PURE__ */ jsxs(ButtonsGroup, { children: [
         /* @__PURE__ */ jsx(CopyButton, { content: codeStr || "No content" }),
-        hasMultilineText && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setShowAsMultilineText(!showAsMultilineText), children: showAsMultilineText ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {}) })
+        hasMultilineText && /* @__PURE__ */ jsx(Button, { onClick: () => setShowAsMultilineText(!showAsMultilineText), children: showAsMultilineText ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {}) })
       ] })
     ] }),
     codeStr && /* @__PURE__ */ jsx("div", { className: "bg-black/20 p-[1rem] overflow-hidden rounded-xl border border-white/10 text-icon4 text-[0.875rem] break-all", children: simplified ? /* @__PURE__ */ jsx("div", { className: "text-icon4 font-mono break-all px-[0.5rem]", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsx(CodeMirror, { extensions: [json(), EditorView$1.lineWrapping], theme, value: finalCodeStr }) })
@@ -14211,11 +13986,11 @@ function SideDialogNav({ onNext, onPrevious, className }) {
         className
       ),
       children: (onNext || onPrevious) && /* @__PURE__ */ jsxs("div", { className: cn("flex gap-[1rem] items-baseline"), children: [
-        /* @__PURE__ */ jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
+        /* @__PURE__ */ jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, children: [
           "Previous",
           /* @__PURE__ */ jsx(ArrowUpIcon, {})
         ] }),
-        /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+        /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, children: [
           "Next",
           /* @__PURE__ */ jsx(ArrowDownIcon, {})
         ] })
@@ -14266,45 +14041,6 @@ function PageHeader({ title, description, icon, className }) {
   ] });
 }
 
-function DatePicker({ 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 text-[0.75rem] ",
-        caption: "flex justify-between pt-1 items-center pl-2",
-        caption_label: "text-text font-medium ",
-        nav: "flex items-center",
-        nav_button_previous: cn(
-          "flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_next: cn("flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
-        dropdown_month: "w-full border-collapse space-y-1",
-        weeknumber: "flex",
-        day: cn(
-          "relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
-          "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected: "!bg-primary/50 !text-primary-foreground hover:bg-primary rounded-md hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-primary/10 text-accent-foreground",
-        day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        head_cell: "text-[0.625rem] text-muted-foreground",
-        ...classNames
-      },
-      ...props
-    }
-  );
-}
-
 function Select({ name, onChange, defaultValue, value, options, placeholder }) {
   return /* @__PURE__ */ jsxs(Select$1, { name, onValueChange: onChange, value, children: [
     /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder || "Select..." }) }),
@@ -14585,7 +14321,8 @@ const DateTimePickerContent = ({
           /* @__PURE__ */ jsx(
             Button,
             {
-              variant: "primary",
+              variant: "light",
+              size: "lg",
               tabIndex: 0,
               onClick: () => {
                 dateInputValueIsValid ? handleApply() : handleCancel();
@@ -14593,7 +14330,7 @@ const DateTimePickerContent = ({
               children: newValueDefined ? `Apply` : `Cancel`
             }
           ),
-          newValueDefined && /* @__PURE__ */ jsx(Button, { variant: "outline", tabIndex: 0, onClick: handleClear, children: "Clear" })
+          newValueDefined && /* @__PURE__ */ jsx(Button, { tabIndex: 0, onClick: handleClear, children: "Clear" })
         ] })
       ]
     }
@@ -14601,7 +14338,7 @@ const DateTimePickerContent = ({
 };
 const DefaultTrigger = React.forwardRef(
   ({ value, placeholder, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Button, { ref, variant: "outline", className: cn("justify-start", className), ...props, children: [
+    return /* @__PURE__ */ jsxs(Button, { ref, className: cn("justify-start", className), variant: "light", size: "lg", ...props, children: [
       /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" }),
       value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PP p") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
     ] });
@@ -14673,7 +14410,7 @@ function Notification({
             children
           }
         ),
-        dismissible && /* @__PURE__ */ jsxs(Button, { variant: "ghost", onClick: () => setLocalIsVisible(false), children: [
+        dismissible && /* @__PURE__ */ jsxs(Button, { onClick: () => setLocalIsVisible(false), children: [
           /* @__PURE__ */ jsx(XIcon, {}),
           /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Dismiss" })
         ] })
@@ -15153,9 +14890,9 @@ function ScoresTools({ onEntityChange, onReset, selectedEntity, entityOptions, i
         disabled: isLoading
       }
     ),
-    /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: onReset, disabled: isLoading, children: [
-      "Reset ",
-      /* @__PURE__ */ jsx(XIcon, {})
+    /* @__PURE__ */ jsxs(Button, { variant: "light", size: "lg", className: "min-w-32", onClick: onReset, disabled: isLoading, children: [
+      "Reset",
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(XIcon, {}) })
     ] })
   ] });
 }
@@ -15242,8 +14979,7 @@ function ScorerCombobox({
       searchPlaceholder,
       emptyText,
       className,
-      disabled: disabled || isLoading || isError,
-      variant: "ghost"
+      disabled: disabled || isLoading || isError
     }
   );
 }
@@ -15312,7 +15048,7 @@ const EmptyScorersTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-
     titleSlot: "Configure Scorers",
     descriptionSlot: "Mastra scorers are not configured yet. You can find more information in the documentation.",
     actionSlot: /* @__PURE__ */ jsxs(
-      Button$1,
+      Button,
       {
         size: "lg",
         className: "w-full",
@@ -15866,7 +15602,7 @@ const AgentMetadataModelSwitcher = ({
         }
       ),
       /* @__PURE__ */ jsx(
-        Button$1,
+        Button,
         {
           variant: "light",
           size: "md",
@@ -16043,7 +15779,7 @@ const PromptEnhancer = ({ agentId }) => {
     isDirty && /* @__PURE__ */ jsxs(Alert$1, { variant: "info", children: [
       /* @__PURE__ */ jsx(AlertTitle$1, { as: "h5", children: "Experiment mode" }),
       /* @__PURE__ */ jsx(AlertDescription$1, { as: "p", children: "You're editing this agent's instructions. Changes are saved locally in your browser but won't update the agent's code." }),
-      /* @__PURE__ */ jsxs(Button$1, { variant: "light", onClick: resetPrompt, children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "light", onClick: resetPrompt, children: [
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(RefreshCcwIcon, {}) }),
         "Reset"
       ] })
@@ -16117,7 +15853,7 @@ const PromptEnhancerTextarea = ({ agentId }) => {
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center gap-2", children: [
       showWarning && /* @__PURE__ */ jsx("span", { className: "text-xs text-yellow-200", children: "No model with a configured API key found." }),
-      /* @__PURE__ */ jsxs(Button$1, { variant: "light", type: "submit", disabled: isDisabled, children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "light", type: "submit", disabled: isDisabled, children: [
         /* @__PURE__ */ jsx(Icon, { children: isPending ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(RefreshCcwIcon, {}) }),
         "Enhance prompt"
       ] })
@@ -16386,7 +16122,7 @@ const ThreadItem = ({ children, isActive, className }) => {
 };
 const ThreadDeleteButton = ({ onClick }) => {
   return /* @__PURE__ */ jsx(
-    Button$1,
+    Button,
     {
       className: "shrink-0 border-none bg-transparent opacity-0 transition-all group-focus-within:opacity-100 group-hover:opacity-100",
       onClick,
@@ -16588,8 +16324,7 @@ function AgentCombobox({
       searchPlaceholder,
       emptyText,
       className,
-      disabled: disabled || isLoading || isError,
-      variant: "ghost"
+      disabled: disabled || isLoading || isError
     }
   );
 }
@@ -16829,9 +16564,12 @@ function CodeDisplay({
 
 const AgentWorkingMemory = ({ agentId }) => {
   const { threadExists, workingMemoryData, workingMemorySource, isLoading, isUpdating, updateWorkingMemory } = useWorkingMemory();
-  const { data } = useMemoryConfig(agentId);
+  const { data, isLoading: isConfigLoading } = useMemoryConfig(agentId);
   const config = data?.config;
   const isWorkingMemoryEnabled = Boolean(config?.workingMemory?.enabled);
+  if (isLoading || isConfigLoading) {
+    return /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" });
+  }
   const { isCopied, handleCopy } = useCopyToClipboard({
     text: workingMemoryData ?? "",
     copyMessage: "Working memory copied!"
@@ -16841,9 +16579,6 @@ const AgentWorkingMemory = ({ agentId }) => {
   React__default.useEffect(() => {
     setEditValue(workingMemoryData ?? "");
   }, [workingMemoryData]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" });
-  }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
@@ -16893,24 +16628,12 @@ const AgentWorkingMemory = ({ agentId }) => {
         }
       ),
       /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: !isEditing ? /* @__PURE__ */ jsx(Fragment, { children: !threadExists ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { tabIndex: 0, children: /* @__PURE__ */ jsx(Button$2, { variant: "secondary", size: "sm", disabled: true, className: "text-xs pointer-events-none", children: "Edit Working Memory" }) }) }),
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { tabIndex: 0, children: /* @__PURE__ */ jsx(Button, { disabled: true, className: "text-xs pointer-events-none", children: "Edit Working Memory" }) }) }),
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Working memory will be available after the agent calls updateWorkingMemory" }) })
-      ] }) : /* @__PURE__ */ jsx(
-        Button$2,
-        {
-          variant: "secondary",
-          size: "sm",
-          onClick: () => setIsEditing(true),
-          disabled: isUpdating,
-          className: "text-xs",
-          children: "Edit Working Memory"
-        }
-      ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      ] }) : /* @__PURE__ */ jsx(Button, { onClick: () => setIsEditing(true), disabled: isUpdating, className: "text-xs", children: "Edit Working Memory" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
-          Button$2,
+          Button,
           {
-            variant: "default",
-            size: "sm",
             onClick: async () => {
               try {
                 await updateWorkingMemory(editValue);
@@ -16926,10 +16649,8 @@ const AgentWorkingMemory = ({ agentId }) => {
           }
         ),
         /* @__PURE__ */ jsx(
-          Button$2,
+          Button,
           {
-            variant: "secondary",
-            size: "sm",
             onClick: () => {
               setEditValue(workingMemoryData ?? "");
               setIsEditing(false);
@@ -17247,16 +16968,7 @@ const MemorySearch = ({
           className: "pl-10 pr-10 bg-surface3 border-border1"
         }
       ),
-      query && /* @__PURE__ */ jsx(
-        Button$2,
-        {
-          onClick: clearSearch,
-          variant: "ghost",
-          size: "sm",
-          className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      )
+      query && /* @__PURE__ */ jsx(Button, { onClick: clearSearch, className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
     ] }),
     (isOpen || query && (isSearching || results.length === 0)) && /* @__PURE__ */ jsx("div", { className: "mt-2 flex-1 bg-surface3 border border-border1 rounded-lg shadow-lg overflow-y-auto", children: error ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-red-500", children: error }) }) : isSearching && results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Searching..." }) }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3", children: [
       'No results found for "',
@@ -17329,7 +17041,7 @@ const MemorySearch = ({
 function AgentMemory({ agentId, threadId }) {
   const { threadInput: chatInputValue } = useThreadInput();
   const { paths, navigate } = useLinkComponent();
-  const { data } = useMemoryConfig(agentId);
+  const { data, isLoading: isConfigLoading } = useMemoryConfig(agentId);
   const config = data?.config;
   const isSemanticRecallEnabled = Boolean(config?.semanticRecall);
   const { mutateAsync: searchMemory, data: searchMemoryData } = useMemorySearch({
@@ -17338,6 +17050,14 @@ function AgentMemory({ agentId, threadId }) {
     // In playground, agentId is the resourceId
     threadId
   });
+  const { mutateAsync: cloneThread, isPending: isCloning } = useCloneThread();
+  const handleCloneThread = useCallback(async () => {
+    if (!threadId || !agentId) return;
+    const result = await cloneThread({ threadId, agentId });
+    if (result?.thread?.id) {
+      navigate(paths.agentThreadLink(agentId, result.thread.id));
+    }
+  }, [threadId, agentId, cloneThread, navigate, paths]);
   const handleResultClick = useCallback(
     (messageId, resultThreadId) => {
       if (resultThreadId && resultThreadId !== threadId) {
@@ -17356,7 +17076,24 @@ function AgentMemory({ agentId, threadId }) {
     [agentId, threadId, navigate]
   );
   const searchScope = searchMemoryData?.searchScope;
+  if (isConfigLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full p-4 gap-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-48 w-full" })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    threadId && /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-border1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-icon5", children: "Clone Thread" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-icon3 mt-1", children: "Create a copy of this conversation" })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { onClick: handleCloneThread, disabled: isCloning, children: [
+        /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4 mr-2" }),
+        isCloning ? "Cloning..." : "Clone"
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-border1", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
         /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-icon5", children: "Semantic Recall" }),
@@ -17406,21 +17143,21 @@ function AgentMemory({ agentId, threadId }) {
 }
 
 function AgentInformation({ agentId, threadId }) {
-  const { data: memory } = useMemory(agentId);
-  const hasMemory = Boolean(memory?.result);
+  const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
+  const hasMemory = !isMemoryLoading && Boolean(memory?.result);
   return /* @__PURE__ */ jsxs(AgentInformationLayout, { agentId, children: [
     /* @__PURE__ */ jsx(AgentEntityHeader, { agentId }),
     /* @__PURE__ */ jsxs(AgentInformationTabLayout, { agentId, children: [
-      /* @__PURE__ */ jsxs(TabList$1, { children: [
-        /* @__PURE__ */ jsx(Tab$1, { value: "overview", children: "Overview" }),
-        /* @__PURE__ */ jsx(Tab$1, { value: "model-settings", children: "Model Settings" }),
-        hasMemory && /* @__PURE__ */ jsx(Tab$1, { value: "memory", children: "Memory" }),
-        /* @__PURE__ */ jsx(Tab$1, { value: "tracing-options", children: "Tracing Options" })
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { value: "overview", children: "Overview" }),
+        /* @__PURE__ */ jsx(Tab, { value: "model-settings", children: "Model Settings" }),
+        hasMemory && /* @__PURE__ */ jsx(Tab, { value: "memory", children: "Memory" }),
+        /* @__PURE__ */ jsx(Tab, { value: "tracing-options", children: "Tracing Options" })
       ] }),
-      /* @__PURE__ */ jsx(TabContent$1, { value: "overview", children: /* @__PURE__ */ jsx(AgentMetadata, { agentId }) }),
-      /* @__PURE__ */ jsx(TabContent$1, { value: "model-settings", children: /* @__PURE__ */ jsx(AgentSettings, { agentId }) }),
-      hasMemory && /* @__PURE__ */ jsx(TabContent$1, { value: "memory", children: /* @__PURE__ */ jsx(AgentMemory, { agentId, threadId }) }),
-      /* @__PURE__ */ jsx(TabContent$1, { value: "tracing-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) })
+      /* @__PURE__ */ jsx(TabContent, { value: "overview", children: /* @__PURE__ */ jsx(AgentMetadata, { agentId }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "model-settings", children: /* @__PURE__ */ jsx(AgentSettings, { agentId }) }),
+      hasMemory && /* @__PURE__ */ jsx(TabContent, { value: "memory", children: /* @__PURE__ */ jsx(AgentMemory, { agentId, threadId }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "tracing-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) })
     ] })
   ] });
 }
@@ -17474,7 +17211,7 @@ const AgentInformationTabLayout = ({ children, agentId }) => {
     isMemoryLoading,
     hasMemory
   });
-  return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsx(PlaygroundTabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsx(Tabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children }) });
 };
 
 const AgentLayout = ({ agentId, children, leftSlot, rightSlot }) => {
@@ -17636,7 +17373,7 @@ const EmptyToolsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-fu
     titleSlot: "Configure Tools",
     descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
     actionSlot: /* @__PURE__ */ jsxs(
-      Button$1,
+      Button,
       {
         size: "lg",
         className: "w-full",
@@ -17728,7 +17465,13 @@ const ToolPanel = ({ toolId }) => {
     });
   };
   const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(tool?.inputSchema))) : z.object({});
-  if (isLoading || error) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48 mb-4" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })
+    ] });
+  }
+  if (error) return null;
   if (!tool)
     return /* @__PURE__ */ jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
   return /* @__PURE__ */ jsx(
@@ -17804,8 +17547,7 @@ function ToolCombobox({
       searchPlaceholder,
       emptyText,
       className,
-      disabled: disabled || isLoadingTools || isLoadingAgents || isErrorTools || isErrorAgents,
-      variant: "ghost"
+      disabled: disabled || isLoadingTools || isLoadingAgents || isErrorTools || isErrorAgents
     }
   );
 }
@@ -18093,6 +17835,7 @@ function TemplateForm({
   handleInstallTemplate,
   handleVariableChange,
   isLoadingEnvVars,
+  isInstalling,
   defaultModelProvider,
   defaultModelId,
   onModelUpdate
@@ -18180,7 +17923,7 @@ function TemplateForm({
         )
       ] })
     ] }),
-    selectedProvider && !isLoadingEnvVars && /* @__PURE__ */ jsxs(
+    selectedProvider && !isLoadingEnvVars && /* @__PURE__ */ jsx(
       Button,
       {
         className: cn(
@@ -18188,11 +17931,14 @@ function TemplateForm({
           "[&>svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon5"
         ),
         onClick: handleInstallTemplate,
-        disabled: !selectedProvider || !defaultModelProvider || !defaultModelId || errors.length > 0,
-        children: [
+        disabled: !selectedProvider || !defaultModelProvider || !defaultModelId || errors.length > 0 || isInstalling,
+        children: isInstalling ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Spinner, { className: "w-4 h-4" }),
+          " Installing..."
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           "Install ",
           /* @__PURE__ */ jsx(ArrowRightIcon, {})
-        ]
+        ] })
       }
     )
   ] }) });
@@ -19003,6 +18749,21 @@ function TraceTimeline({
   ) });
 }
 
+const CombinedButtons = ({ className, children }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center  text-[0.75rem] border border-border1 rounded-lg overflow-hidden",
+        "[&>button]:border-0 [&>button:not(:first-child)]:border-l [&>button:not(:first-child)]:border-border1",
+        "[&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg",
+        className
+      ),
+      children
+    }
+  );
+};
+
 function TraceTimelineTools({
   spans = [],
   fadedTypes,
@@ -19050,10 +18811,10 @@ function TraceTimelineTools({
           Button,
           {
             onClick: () => handleToggle(item),
-            isFaded,
+            className: isFaded ? "opacity-40" : "",
             style: { color: !isFaded ? spanUI?.color : void 0, backgroundColor: spanUI?.bgColor },
             children: [
-              spanUI?.icon && spanUI.icon,
+              spanUI?.icon && /* @__PURE__ */ jsx(Icon, { children: spanUI.icon }),
               spanUI?.label
             ]
           }
@@ -19063,15 +18824,15 @@ function TraceTimelineTools({
         Button,
         {
           onClick: () => handleToggle("other"),
-          isFaded: fadedTypes?.includes("other"),
+          className: fadedTypes?.includes("other") ? "opacity-40" : "",
           style: { color: !fadedTypes?.includes("other") ? void 0 : void 0, backgroundColor: void 0 },
           children: [
-            /* @__PURE__ */ jsx(CircleDashedIcon, {}),
+            /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleDashedIcon, {}) }),
             "Other"
           ]
         }
       ),
-      /* @__PURE__ */ jsx(Button, { onClick: onLegendReset, disabled: fadedTypes?.length === 0, children: /* @__PURE__ */ jsx(XIcon, {}) })
+      /* @__PURE__ */ jsx(Button, { onClick: onLegendReset, disabled: fadedTypes?.length === 0, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(XIcon, {}) }) })
     ] })
   ] });
 }
@@ -19161,82 +18922,6 @@ function getSpanInfo({ span }) {
   return baseInfo;
 }
 
-const TabsRoot = ({
-  children,
-  defaultTab,
-  value,
-  onValueChange,
-  className
-}) => {
-  const [internalTab, setInternalTab] = useState(defaultTab);
-  const isControlled = value !== void 0 && onValueChange !== void 0;
-  const currentTab = isControlled ? value : internalTab;
-  const handleTabChange = (newValue) => {
-    const typedValue = newValue;
-    if (isControlled) {
-      onValueChange(typedValue);
-    } else {
-      setInternalTab(typedValue);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Root,
-    {
-      value: currentTab,
-      onValueChange: handleTabChange,
-      className: cn("grid gap-8 overflow-y-auto", className),
-      children
-    }
-  );
-};
-
-const TabList = ({ children, variant = "default", className }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(
-    TabsPrimitive.List,
-    {
-      className: cn(
-        "flex items-center",
-        {
-          // variant: default
-          "text-[0.9375rem]": variant === "default",
-          "[&>button]:py-[0.5rem] [&>button]:px-[1.5rem] [&>button]:font-normal [&>button]:text-icon3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
-          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:transition-colors [&>button[data-state=active]]:duration-200 [&>button[data-state=active]]:border-icon3": variant === "default",
-          // variant: buttons
-          "border border-border1 flex justify-stretch rounded-md overflow-hidden text-[0.875rem] min-h-[2.5rem]": variant === "buttons",
-          "[&>button]:flex-1 [&>button]:py-[0.5rem] [&>button]:px-[1rem] [&>button]:text-icon3": variant === "buttons",
-          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:bg-[#222]": variant === "buttons"
-        },
-        className
-      ),
-      children
-    }
-  ) });
-};
-
-const Tab = ({ children, value, onClick, className }) => {
-  return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { value, className: cn("hover:text-icon5", className), onClick, children });
-};
-
-const TabContent = ({ children, value, className }) => {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Content,
-    {
-      value,
-      className: cn(
-        "grid overflow-y-auto ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:none",
-        className
-      ),
-      children
-    }
-  );
-};
-
-const Tabs = Object.assign(TabsRoot, {
-  List: TabList,
-  Tab,
-  Content: TabContent
-});
-
 function isTokenDetailsObject(value) {
   return typeof value === "object" && value !== null;
 }
@@ -19539,19 +19224,19 @@ function SpanTabs({
     entityType = "Workflow";
   }
   return /* @__PURE__ */ jsxs(Tabs, { defaultTab: defaultActiveTab, children: [
-    /* @__PURE__ */ jsxs(Tabs.List, { children: [
-      /* @__PURE__ */ jsx(Tabs.Tab, { value: "details", children: "Details" }),
-      /* @__PURE__ */ jsxs(Tabs.Tab, { value: "scores", children: [
+    /* @__PURE__ */ jsxs(TabList, { children: [
+      /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
+      /* @__PURE__ */ jsxs(Tab, { value: "scores", children: [
         "Scoring ",
         spanScoresData?.pagination && `(${spanScoresData.pagination.total || 0})`
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Tabs.Content, { value: "details", children: /* @__PURE__ */ jsxs(Sections, { children: [
+    /* @__PURE__ */ jsx(TabContent, { value: "details", children: /* @__PURE__ */ jsxs(Sections, { children: [
       span?.attributes?.usage ? /* @__PURE__ */ jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }) : null,
       /* @__PURE__ */ jsx(KeyValueList, { data: spanInfo, LinkComponent: Link }),
       /* @__PURE__ */ jsx(SpanDetails, { span })
     ] }) }),
-    /* @__PURE__ */ jsx(Tabs.Content, { value: "scores", children: /* @__PURE__ */ jsxs(Sections, { children: [
+    /* @__PURE__ */ jsx(TabContent, { value: "scores", children: /* @__PURE__ */ jsxs(Sections, { children: [
       /* @__PURE__ */ jsxs(Section, { children: [
         /* @__PURE__ */ jsx(Section.Header, { children: /* @__PURE__ */ jsxs(Section.Heading, { children: [
           /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
@@ -19865,9 +19550,8 @@ function TraceDialog({
                         ] }) }),
                         /* @__PURE__ */ jsxs(ButtonsGroup, { className: "w-full", children: [
                           /* @__PURE__ */ jsxs(Button, { onClick: handleToScoring, children: [
-                            "Scoring ",
-                            /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
-                            " "
+                            /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleGaugeIcon, {}) }),
+                            "Scoring"
                           ] }),
                           spanScoresData?.scores?.[0] && /* @__PURE__ */ jsxs(Button, { onClick: handleToLastScore, children: [
                             "Last score: ",
@@ -20014,7 +19698,7 @@ function TracesTools({
         disabled: isLoading
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: cn("flex gap-[1rem] items-center flex-wrap mr-auto"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex gap-[1rem] items-center flex-wrap"), children: [
       /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-[0.875rem] text-icon3"), children: "Filter by Date & time range" }),
       /* @__PURE__ */ jsx(
         DateTimePicker,
@@ -20023,7 +19707,7 @@ function TracesTools({
           value: selectedDateFrom,
           maxValue: selectedDateTo,
           onValueChange: (date) => onDateChange?.(date, "from"),
-          className: "min-w-[13rem]",
+          className: "min-w-32",
           defaultTimeStrValue: "12:00 AM",
           disabled: isLoading
         }
@@ -20035,15 +19719,15 @@ function TracesTools({
           value: selectedDateTo,
           minValue: selectedDateFrom,
           onValueChange: (date) => onDateChange?.(date, "to"),
-          className: "min-w-[13rem]",
+          className: "min-w-32",
           defaultTimeStrValue: "11:59 PM",
           disabled: isLoading
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: onReset, disabled: isLoading, children: [
-      "Reset ",
-      /* @__PURE__ */ jsx(XIcon, {})
+      ),
+      /* @__PURE__ */ jsxs(Button, { variant: "light", size: "lg", className: "min-w-32", onClick: onReset, disabled: isLoading, children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(XIcon, {}) }),
+        "Reset"
+      ] })
     ] })
   ] });
 }
@@ -20642,7 +20326,7 @@ const EmptyMCPTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full
     titleSlot: "Configure MCP servers",
     descriptionSlot: "MCP servers are not configured yet. You can find more information in the documentation.",
     actionSlot: /* @__PURE__ */ jsxs(
-      Button$1,
+      Button,
       {
         size: "lg",
         className: "w-full",
@@ -20706,7 +20390,13 @@ const MCPToolPanel = ({ toolId, serverId }) => {
     if (!tool) return;
     return await executeTool(data);
   };
-  if (isLoading || error) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48 mb-4" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })
+    ] });
+  }
+  if (error) return null;
   if (!tool)
     return /* @__PURE__ */ jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
   let zodInputSchema;
@@ -20856,8 +20546,7 @@ function MCPServerCombobox({
       searchPlaceholder,
       emptyText,
       className,
-      disabled: disabled || isLoading || isError,
-      variant: "ghost"
+      disabled: disabled || isLoading || isError
     }
   );
 }
@@ -20890,13 +20579,16 @@ const useStudioConfig = () => {
 };
 const LOCAL_STORAGE_KEY = "mastra-studio-config";
 const StudioConfigProvider = ({ children, endpoint = "http://localhost:4111" }) => {
-  const { data: instanceStatus } = useMastraInstanceStatus(endpoint);
+  const { data: instanceStatus, isLoading: isStatusLoading, error } = useMastraInstanceStatus(endpoint);
   const [config, setConfig] = useState({
     baseUrl: "",
     headers: {},
     isLoading: true
   });
   useLayoutEffect(() => {
+    if (error && !isStatusLoading) {
+      return setConfig({ baseUrl: "", headers: {}, isLoading: false });
+    }
     if (!instanceStatus?.status) return;
     const storedConfig = localStorage.getItem(LOCAL_STORAGE_KEY);
     if (storedConfig) {
@@ -20909,7 +20601,7 @@ const StudioConfigProvider = ({ children, endpoint = "http://localhost:4111" })
       return setConfig((prev) => ({ ...prev, baseUrl: endpoint, isLoading: false }));
     }
     return setConfig({ baseUrl: "", headers: {}, isLoading: false });
-  }, [instanceStatus, endpoint]);
+  }, [instanceStatus, endpoint, isStatusLoading, error]);
   const doSetConfig = (partialNewConfig) => {
     setConfig((prev) => {
       const nextConfig = { ...prev, ...partialNewConfig };
@@ -20926,7 +20618,7 @@ const HeaderListForm = ({ headers, onAddHeader, onRemoveHeader }) => {
     /* @__PURE__ */ jsxs("div", { className: "bg-surface4 rounded-lg p-4 border-sm border-border2 space-y-4", children: [
       headers.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: headers.map((header, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(HeaderListFormItem, { index, header, onRemove: () => onRemoveHeader(index) }) }, index)) }),
       /* @__PURE__ */ jsxs(
-        Button$1,
+        Button,
         {
           type: "button",
           variant: "light",
@@ -20969,7 +20661,7 @@ const HeaderListFormItem = ({ index, header, onRemove }) => {
       }
     ),
     /* @__PURE__ */ jsx(
-      Button$1,
+      Button,
       {
         type: "button",
         variant: "light",
@@ -21019,7 +20711,7 @@ const StudioConfigForm = ({ initialConfig }) => {
       }
     ),
     /* @__PURE__ */ jsx(HeaderListForm, { headers, onAddHeader: handleAddHeader, onRemoveHeader: handleRemoveHeader }),
-    /* @__PURE__ */ jsxs(Button$1, { type: "submit", variant: "light", className: "w-full", size: "lg", children: [
+    /* @__PURE__ */ jsxs(Button, { type: "submit", variant: "light", className: "w-full", size: "lg", children: [
       /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Link2, {}) }),
       "Set Configuration"
     ] })
@@ -21319,5 +21011,5 @@ const PlaygroundConfigGuard = () => {
   ] }) });
 };
 
-export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentLayout, AgentMemory, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPromptExperimentProvider, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommitIcon, CrossIcon, Crumb, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogoWithoutText, LogsIcon, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraPackagesInfo, MastraVersionFooter, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, Notification, OpenAIIcon, PageHeader, PlaygroundConfigGuard, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, RequestContext, RequestContextWrapper, Row, ScoreDialog, ScorerCombobox, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, Skeleton, SlashIcon, SpanScoreList, SpanScoring, SpanTabs, StudioConfigContext, StudioConfigForm, StudioConfigProvider, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineSpan, TraceTimelineTools, TracesList, TracesTools, TracingSettingsContext, TracingSettingsProvider, TsIcon, Txt, TxtCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowLayout, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowStepDetailContext, WorkflowStepDetailProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getMainContentContentClassName, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, useAgent, useAgentInformationSettings, useAgentInformationTab, useAgentPromptExperiment, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useDeleteWorkflowRun, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMastraPackages, useMemory, useMemoryConfig, useMemorySearch, usePackageUpdates, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useStudioConfig, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useTracingSettings, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRunExecutionResult, useWorkflowRuns, useWorkflowStepDetail, useWorkflows, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentLayout, AgentMemory, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPromptExperimentProvider, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge, BranchIcon, Breadcrumb, Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommitIcon, CrossIcon, Crumb, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogoWithoutText, LogsIcon, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraPackagesInfo, MastraVersionFooter, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, Notification, OpenAIIcon, PageHeader, PlaygroundConfigGuard, PlaygroundQueryClient, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, RequestContext, RequestContextWrapper, Row, ScoreDialog, ScorerCombobox, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, Skeleton, SlashIcon, SpanScoreList, SpanScoring, SpanTabs, StudioConfigContext, StudioConfigForm, StudioConfigProvider, Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineSpan, TraceTimelineTools, TracesList, TracesTools, TracingSettingsContext, TracingSettingsProvider, TsIcon, Txt, TxtCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowLayout, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowStepDetailContext, WorkflowStepDetailProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, buttonVariants, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getMainContentContentClassName, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, useAgent, useAgentInformationSettings, useAgentInformationTab, useAgentPromptExperiment, useAgentSettings, useAgents, useCancelWorkflowRun, useCloneThread, useCurrentRun, useDeleteThread, useDeleteWorkflowRun, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMastraPackages, useMemory, useMemoryConfig, useMemorySearch, usePackageUpdates, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useStudioConfig, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useTracingSettings, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRun, useWorkflowRuns, useWorkflowStepDetail, useWorkflows, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map