@mastra/playground-ui 7.0.0-beta.15 → 7.0.0-beta.16

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @mastra/playground-ui
 
+## 7.0.0-beta.16
+
+### Patch Changes
+
+- Fix workflow observability view broken by invalid entityType parameter ([#11427](https://github.com/mastra-ai/mastra/pull/11427))
+
+  The UI workflow observability view was failing with a Zod validation error when trying to filter traces by workflow. The UI was sending `entityType=workflow`, but the backend's `EntityType` enum only accepts `workflow_run`.
+
+  **Root Cause**: The legacy value transformation was happening in the handler (after validation), but Zod validation occurred earlier in the request pipeline, rejecting the request before it could be transformed.
+
+  **Solution**:
+  - Added `z.preprocess()` to the query schema to transform `workflow` → `workflow_run` before validation
+  - Kept handler transformation for defense in depth
+  - Updated UI to use `EntityType.WORKFLOW_RUN` enum value for type safety
+
+  This maintains backward compatibility with legacy clients while fixing the validation error.
+
+  Fixes #11412
+
+- Add container queries, adjust the agent chat and use container queries to better display information on the agent sidebar ([#11408](https://github.com/mastra-ai/mastra/pull/11408))
+
+- Updated dependencies [[`3d93a15`](https://github.com/mastra-ai/mastra/commit/3d93a15796b158c617461c8b98bede476ebb43e2), [`efe406a`](https://github.com/mastra-ai/mastra/commit/efe406a1353c24993280ebc2ed61dd9f65b84b26), [`119e5c6`](https://github.com/mastra-ai/mastra/commit/119e5c65008f3e5cfca954eefc2eb85e3bf40da4), [`74e504a`](https://github.com/mastra-ai/mastra/commit/74e504a3b584eafd2f198001c6a113bbec589fd3), [`e33fdbd`](https://github.com/mastra-ai/mastra/commit/e33fdbd07b33920d81e823122331b0c0bee0bb59), [`929f69c`](https://github.com/mastra-ai/mastra/commit/929f69c3436fa20dd0f0e2f7ebe8270bd82a1529), [`6cbb549`](https://github.com/mastra-ai/mastra/commit/6cbb549475201a2fbf158f0fd7323f6495f46d08), [`8a73529`](https://github.com/mastra-ai/mastra/commit/8a73529ca01187f604b1f3019d0a725ac63ae55f)]:
+  - @mastra/core@1.0.0-beta.16
+  - @mastra/client-js@1.0.0-beta.16
+  - @mastra/react@0.1.0-beta.16
+  - @mastra/ai-sdk@1.0.0-beta.11
+
 ## 7.0.0-beta.15
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -10053,8 +10053,7 @@ function Combobox({
   emptyText = "No option found.",
   className,
   disabled = false,
-  buttonClassName,
-  contentClassName
+  variant = "default"
 }) {
   const [open, setOpen] = React__namespace.useState(false);
   const [search, setSearch] = React__namespace.useState("");
@@ -10132,78 +10131,71 @@ function Combobox({
       Button$2,
       {
         ref: triggerRef,
-        variant: "outline",
+        variant,
         role: "combobox",
         "aria-expanded": open,
-        className: cn("w-full justify-between", buttonClassName, className),
+        className: cn("w-full justify-between", className),
         disabled,
+        size: "sm",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-ui-lg", children: selectedOption ? selectedOption.label : placeholder }),
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PopoverContent,
-      {
-        className: cn("p-0", contentClassName),
-        align: "start",
-        style: { width: triggerWidth ? `${triggerWidth}px` : void 0 },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3 py-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "p-0 w-fit", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: "flex h-8 w-full rounded-md bg-transparent py-1 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 outline-none",
+            placeholder: searchPlaceholder,
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            onKeyDown: handleKeyDown,
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-controls": "combobox-options",
+            "aria-expanded": open
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: listRef,
+          id: "combobox-options",
+          role: "listbox",
+          className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
+          children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm", children: emptyText }) : filteredOptions.map((option, index) => {
+            const isSelected = value === option.value;
+            const isHighlighted = index === highlightedIndex;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                ref: inputRef,
-                className: "flex h-8 w-full rounded-md bg-transparent py-1 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 outline-none",
-                placeholder: searchPlaceholder,
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                onKeyDown: handleKeyDown,
-                role: "combobox",
-                "aria-autocomplete": "list",
-                "aria-controls": "combobox-options",
-                "aria-expanded": open
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: listRef,
-              id: "combobox-options",
-              role: "listbox",
-              className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
-              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm", children: emptyText }) : filteredOptions.map((option, index) => {
-                const isSelected = value === option.value;
-                const isHighlighted = index === highlightedIndex;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    role: "option",
-                    "aria-selected": isSelected,
-                    className: cn(
-                      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors",
-                      "hover:bg-accent hover:text-accent-foreground",
-                      isHighlighted && "bg-accent text-accent-foreground",
-                      isSelected && !isHighlighted && "bg-accent/50"
-                    ),
-                    onClick: () => handleSelect(option.value),
-                    onMouseEnter: () => setHighlightedIndex(index),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0") }),
-                      option.label
-                    ]
-                  },
-                  option.value
-                );
-              })
-            }
-          )
-        ] })
-      }
-    )
+                role: "option",
+                "aria-selected": isSelected,
+                className: cn(
+                  "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors",
+                  "hover:bg-accent hover:text-accent-foreground",
+                  isHighlighted && "bg-accent text-accent-foreground",
+                  isSelected && !isHighlighted && "bg-accent/50"
+                ),
+                onClick: () => handleSelect(option.value),
+                onMouseEnter: () => setHighlightedIndex(index),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0") }),
+                  option.label
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      )
+    ] }) })
   ] });
 }
 
@@ -10214,9 +10206,7 @@ function WorkflowCombobox({
   searchPlaceholder = "Search workflows...",
   emptyText = "No workflows found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: workflows = {}, isLoading, isError, error } = useWorkflows();
   const { navigate, paths } = useLinkComponent();
@@ -10248,8 +10238,7 @@ function WorkflowCombobox({
       emptyText,
       className,
       disabled: disabled || isLoading || isError,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
@@ -11682,7 +11671,7 @@ const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, { agentName }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsxRuntime.jsx(
         react.ThreadPrimitive.Messages,
         {
           components: {
@@ -11720,11 +11709,11 @@ const Composer = ({ hasMemory, agentId }) => {
   const { setThreadInput } = useThreadInput();
   const textareaRef = React.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4", children: /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2",
+        className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-3xl w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2",
         onClick: () => {
           textareaRef.current?.focus();
         },
@@ -12893,7 +12882,7 @@ const AgentAdvancedSettings = () => {
   };
   const collapsibleClassName = "rounded-lg border-sm border-border1 bg-surface3 overflow-clip";
   const collapsibleTriggerClassName = "text-icon3 text-ui-lg font-medium flex items-center gap-2 w-full p-[10px] justify-between";
-  const collapsibleContentClassName = "bg-surface2 p-[10px] grid grid-cols-2 gap-[10px]";
+  const collapsibleContentClassName = "bg-surface2 p-[10px] @container/collapsible";
   const buttonClass = "text-icon3 hover:text-icon6";
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { className: collapsibleClassName, open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: collapsibleTriggerClassName, children: [
@@ -12901,139 +12890,141 @@ const AgentAdvancedSettings = () => {
       /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("transition-transform", isOpen ? "rotate-0" : "-rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleContent, { className: collapsibleContentClassName, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "frequency-penalty", children: "Frequency Penalty" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "frequency-penalty",
-            type: "number",
-            step: "0.1",
-            min: "-1",
-            max: "1",
-            value: settings?.modelSettings?.frequencyPenalty ?? "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "presence-penalty", children: "Presence Penalty" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "presence-penalty",
-            type: "number",
-            step: "0.1",
-            min: "-1",
-            max: "1",
-            value: settings?.modelSettings?.presencePenalty ?? "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                presencePenalty: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "top-k", children: "Top K" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "top-k",
-            type: "number",
-            value: settings?.modelSettings?.topK || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                topK: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-tokens", children: "Max Tokens" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "max-tokens",
-            type: "number",
-            value: settings?.modelSettings?.maxTokens || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                maxTokens: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-steps", children: "Max Steps" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "max-steps",
-            type: "number",
-            value: settings?.modelSettings?.maxSteps || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                maxSteps: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-retries", children: "Max Retries" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "max-retries",
-            type: "number",
-            value: settings?.modelSettings?.maxRetries || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                maxRetries: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2 pb-2 @xs/collapsible:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "frequency-penalty", children: "Frequency Penalty" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "frequency-penalty",
+              type: "number",
+              step: "0.1",
+              min: "-1",
+              max: "1",
+              value: settings?.modelSettings?.frequencyPenalty ?? "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "presence-penalty", children: "Presence Penalty" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "presence-penalty",
+              type: "number",
+              step: "0.1",
+              min: "-1",
+              max: "1",
+              value: settings?.modelSettings?.presencePenalty ?? "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  presencePenalty: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "top-k", children: "Top K" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "top-k",
+              type: "number",
+              value: settings?.modelSettings?.topK || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  topK: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-tokens", children: "Max Tokens" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "max-tokens",
+              type: "number",
+              value: settings?.modelSettings?.maxTokens || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  maxTokens: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-steps", children: "Max Steps" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "max-steps",
+              type: "number",
+              value: settings?.modelSettings?.maxSteps || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  maxSteps: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-retries", children: "Max Retries" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "max-retries",
+              type: "number",
+              value: settings?.modelSettings?.maxRetries || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  maxRetries: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "seed", children: "Seed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "seed",
+              type: "number",
+              value: settings?.modelSettings?.seed || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  seed: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "seed", children: "Seed" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "seed",
-            type: "number",
-            value: settings?.modelSettings?.seed || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                seed: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 col-span-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "provider-options", children: "Provider Options" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -13220,7 +13211,7 @@ const AgentSettings = ({ agentId }) => {
     radioValue = settings?.modelSettings?.chatWithGenerateLegacy ? "generateLegacy" : "streamLegacy";
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 text-xs py-2 pb-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-7 @container", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Chat Method", children: /* @__PURE__ */ jsxRuntime.jsxs(
         RadioGroup,
         {
@@ -13235,7 +13226,7 @@ const AgentSettings = ({ agentId }) => {
               chatWithNetwork: value === "network"
             }
           }),
-          className: "flex flex-row gap-4",
+          className: "flex flex-col gap-4 @xs:flex-row",
           children: [
             !isSupportedModel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generateLegacy", id: "generateLegacy", className: "text-icon6" }),
@@ -13267,7 +13258,7 @@ const AgentSettings = ({ agentId }) => {
           })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 @xs:grid-cols-2 gap-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Temperature", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Slider,
@@ -15254,9 +15245,7 @@ function ScorerCombobox({
   searchPlaceholder = "Search scorers...",
   emptyText = "No scorers found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: scorers = {}, isLoading, isError, error } = useScorers();
   const { navigate, paths } = useLinkComponent();
@@ -15288,8 +15277,7 @@ function ScorerCombobox({
       emptyText,
       className,
       disabled: disabled || isLoading || isError,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
@@ -15583,8 +15571,8 @@ const AgentMetadataModelSwitcher = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col xl:flex-row items-stretch xl:items-center gap-2 w-full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "@container", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col @xs:flex-row items-stretch @xs:items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         Popover,
         {
@@ -15597,7 +15585,7 @@ const AgentMetadataModelSwitcher = ({
             }
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full xl:w-2/5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full @xs:w-2/5", children: [
               !isSearchingProvider && currentModelProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ProviderLogo, { providerId: currentModelProvider, size: 16 }),
@@ -15776,7 +15764,7 @@ const AgentMetadataModelSwitcher = ({
                 "aria-label": "Search models",
                 spellCheck: "false",
                 ref: modelInputRef,
-                className: "w-full xl:w-3/5",
+                className: "w-full @xs:w-3/5",
                 type: "text",
                 value: modelSearch || selectedModel,
                 onChange: (e) => {
@@ -16603,9 +16591,7 @@ function AgentCombobox({
   searchPlaceholder = "Search agents...",
   emptyText = "No agents found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: agents = {}, isLoading, isError, error } = useAgents();
   const { navigate, paths } = useLinkComponent();
@@ -16637,8 +16623,7 @@ function AgentCombobox({
       emptyText,
       className,
       disabled: disabled || isLoading || isError,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
@@ -17800,9 +17785,7 @@ function ToolCombobox({
   searchPlaceholder = "Search tools...",
   emptyText = "No tools found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: tools = {}, isLoading: isLoadingTools, isError: isErrorTools, error: errorTools } = useTools();
   const { data: agents = {}, isLoading: isLoadingAgents, isError: isErrorAgents, error: errorAgents } = useAgents();
@@ -17856,8 +17839,7 @@ function ToolCombobox({
       emptyText,
       className,
       disabled: disabled || isLoadingTools || isLoadingAgents || isErrorTools || isErrorAgents,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
@@ -20877,9 +20859,7 @@ function MCPServerCombobox({
   searchPlaceholder = "Search MCP servers...",
   emptyText = "No MCP servers found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: mcpServers = [], isLoading, isError, error } = useMCPServers();
   const { navigate, paths } = useLinkComponent();
@@ -20911,8 +20891,7 @@ function MCPServerCombobox({
       emptyText,
       className,
       disabled: disabled || isLoading || isError,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }