@smartspace/chat-ui 1.14.4-pr.443.60a79cd → 1.14.4-pr.447.d73b67e

package/dist/index.js

@@ -1,8 +1,8 @@
 import MuiButton from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import { Loader2, Cpu, ChevronDown, Check, Globe, Zap, SlidersHorizontal, X, Paperclip, Mic, Square, Send, Minimize2, AlertTriangle, FileImage, FileVideo, FileAudio, FileArchive, FileCode, FileSpreadsheet, Presentation, FileText, ChevronUp, ExternalLink, Download, ShieldAlert, Copy } from 'lucide-react';
-import * as React8 from 'react';
-import { createContext, forwardRef, useImperativeHandle, useRef, useState, useEffect, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
+import { Loader2, ChevronDown, Check, Cpu, SlidersHorizontal, X, Globe, Zap, Paperclip, Mic, Square, Send, Minimize2, AlertTriangle, FileImage, FileVideo, FileAudio, FileArchive, FileCode, FileSpreadsheet, Presentation, FileText, ChevronUp, ExternalLink, Download, ShieldAlert, Copy } from 'lucide-react';
+import * as React9 from 'react';
+import React9__default, { createContext, forwardRef, useImperativeHandle, useRef, useState, useEffect, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useQuery, queryOptions, useQueryClient, useMutation, skipToken } from '@tanstack/react-query';
@@ -24,7 +24,6 @@ import '@milkdown/prose/inputrules';
 import { withJsonFormsControlProps, withJsonFormsLayoutProps, JsonForms, ResolvedJsonFormsDispatch } from '@jsonforms/react';
 import { rankWith, uiTypeIs, createAjv } from '@jsonforms/core';
 import { vanillaRenderers, vanillaCells } from '@jsonforms/vanilla-renderers';
-import { FormControl, InputLabel, Select, MenuItem, useTheme, Box, Skeleton as Skeleton$1 } from '@mui/material';
 import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/mode-json';
@@ -57,6 +56,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
+import { useTheme, Box, Skeleton as Skeleton$1 } from '@mui/material';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all5) => {
@@ -2443,6 +2443,31 @@ function useFlowRunVariables(flowRunId) {
     enabled: !!flowRunId
   });
 }
+
+// src/chat-variables/renders/fieldStyles.ts
+var scaleFor = (surface) => surface === "form" ? "comfortable" : "dense";
+var fieldLabelClass = (scale) => `block truncate font-medium text-muted-foreground ${scale === "dense" ? "mb-1 text-xs" : "mb-1.5 text-sm"}`;
+var CONTROL_BASE = "rounded-md border bg-background text-foreground transition-colors placeholder:text-muted-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60";
+var borderClass = (hasError) => hasError ? "border-destructive" : "border-input";
+var fieldControlClass = (scale, hasError) => `w-full ${CONTROL_BASE} ${borderClass(hasError)} ${scale === "dense" ? "px-2.5 py-1.5 text-xs" : "px-3 py-2 text-sm"}`;
+var fieldTriggerClass = (scale, hasError) => `w-full ${CONTROL_BASE} ${borderClass(
+  hasError
+)} flex items-center justify-between gap-2 text-left ${scale === "dense" ? "h-8 px-2.5 text-xs" : "h-10 px-3 text-sm"}`;
+var fieldNumberClass = (scale, hasError) => `${CONTROL_BASE} ${borderClass(hasError)} tabular-nums ${scale === "dense" ? "h-8 w-20 px-2 text-xs" : "h-10 w-24 px-2.5 text-sm"}`;
+var fieldHintClass = "mt-1 text-xs text-muted-foreground";
+var fieldErrorClass = "mt-1 text-xs text-destructive";
+var fieldRowClass = "flex items-center justify-between gap-3";
+var fieldRowLabelClass = (scale) => `min-w-0 flex-1 truncate font-medium text-muted-foreground ${scale === "dense" ? "text-xs" : "text-sm"}`;
+var pillClass = (opts) => `flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${opts.active ? "border-primary/30 bg-primary/10 text-primary" : "border-border/70 bg-transparent text-muted-foreground hover:bg-secondary"} ${opts.hasError ? "border-destructive text-destructive" : ""} ${opts.disabled ? "cursor-not-allowed opacity-60" : ""}`;
+var pillLabelClass = "max-w-[9rem] truncate";
+var pillValueClass = "max-w-[9rem] truncate text-foreground";
+var switchTrackClass = (on, disabled) => `peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background ${on ? "bg-primary" : "bg-input"} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`;
+var switchThumbClass = (on) => `pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform ${on ? "translate-x-5" : "translate-x-0"}`;
+var POPOVER_WIDTH_PX = 288;
+var POPOVER_MAX_HEIGHT_PX = 288;
+var popoverClass = "flex flex-col overflow-hidden rounded-xl border border-border bg-popover shadow-lg";
+var popoverRowClass = "flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-secondary/60";
+var popoverHeadingClass = "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground";
 function iconFor(label) {
   const name = (label ?? "").toLowerCase();
   if (/search|web|browse|internet/.test(name)) return Globe;
@@ -2458,7 +2483,8 @@ var BooleanRenderer = ({
   errors,
   uischema,
   visible,
-  enabled
+  enabled,
+  config
 }) => {
   const onToggle = useCallback(() => {
     handleChange(path2, !data);
@@ -2469,13 +2495,17 @@ var BooleanRenderer = ({
   const hasError = !!errors && errors.length > 0;
   const isChecked = Boolean(data);
   const Icon = iconFor(label);
+  const surface = (config ?? {}).surface ?? "form";
+  const scale = scaleFor(surface);
   const tooltip = [label, description, hasError ? errors : null].filter(Boolean).join(" \u2014 ");
-  return /* @__PURE__ */ jsxs(
+  const toggle = /* @__PURE__ */ jsx(
     "button",
     {
       id: `toggle-${path2}`,
       type: "button",
-      "aria-pressed": isChecked,
+      role: surface === "bar" ? void 0 : "switch",
+      "aria-pressed": surface === "bar" ? isChecked : void 0,
+      "aria-checked": surface === "bar" ? void 0 : isChecked,
       "aria-label": label,
       title: tooltip || void 0,
       onClick: onToggle,
@@ -2485,16 +2515,28 @@ var BooleanRenderer = ({
           e.currentTarget.blur();
         }
       },
-      className: `boolean-switch flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${isChecked ? "border-primary/30 bg-primary/10 text-primary" : "border-transparent bg-transparent text-muted-foreground hover:bg-secondary"} ${hasError ? "border-destructive text-destructive" : ""} ${isDisabled ? "cursor-not-allowed opacity-60" : ""}`,
-      children: [
+      className: surface === "bar" ? `boolean-switch ${pillClass({
+        active: isChecked,
+        hasError,
+        disabled: isDisabled
+      })}` : switchTrackClass(isChecked, isDisabled),
+      children: surface === "bar" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
         label && // Desktop-first: the app and the package each ship a full Tailwind
-        // build, so a base `hidden` can out-order `sm:inline`. `max-sm:hidden`
-        // is the form that survives both cascades.
-        /* @__PURE__ */ jsx("span", { className: "inline max-w-[9rem] truncate max-sm:hidden", children: label })
-      ]
+        // build, so a base `hidden` can out-order `sm:inline`.
+        // `max-sm:hidden` is the form that survives both cascades.
+        /* @__PURE__ */ jsx("span", { className: `inline ${pillLabelClass} max-sm:hidden`, children: label })
+      ] }) : /* @__PURE__ */ jsx("span", { className: switchThumbClass(isChecked) })
     }
   );
+  if (surface === "bar") return toggle;
+  return /* @__PURE__ */ jsxs("div", { className: "ss-jsonforms-field ss-jsonforms-boolean", children: [
+    /* @__PURE__ */ jsxs("div", { className: fieldRowClass, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: `toggle-${path2}`, className: fieldRowLabelClass(scale), children: label }),
+      toggle
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: errors })
+  ] });
 };
 var booleanRendererTester = rankWith(40, (uischema, schema) => {
   if (uischema.type !== "Control") return false;
@@ -2504,6 +2546,104 @@ var booleanRendererTester = rankWith(40, (uischema, schema) => {
   return fieldSchema?.type === "boolean";
 });
 var BooleanRendererControl = withJsonFormsControlProps(BooleanRenderer);
+var GAP_PX = 8;
+var MIN_TRIGGER_WIDTH_PX = 224;
+var MIN_PANEL_HEIGHT_PX = 180;
+var NestedPopoverContext = React9__default.createContext(null);
+function useAnchoredPopover({
+  trigger,
+  popover,
+  width,
+  maxHeight,
+  role,
+  label
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const parentRegistry = useContext(NestedPopoverContext);
+  const descendants = useRef(/* @__PURE__ */ new Set());
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((open) => !open), []);
+  const registry = useMemo(
+    () => ({
+      register: (el) => {
+        descendants.current.add(el);
+        parentRegistry?.register(el);
+      },
+      unregister: (el) => {
+        descendants.current.delete(el);
+        parentRegistry?.unregister(el);
+      }
+    }),
+    [parentRegistry]
+  );
+  useEffect(() => {
+    if (!isOpen || !parentRegistry) return;
+    const el = popover.current;
+    if (!el) return;
+    parentRegistry.register(el);
+    return () => parentRegistry.unregister(el);
+  }, [isOpen, parentRegistry, popover]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (trigger.current?.contains(target)) return;
+      if (popover.current?.contains(target)) return;
+      for (const el of descendants.current) {
+        if (el.contains(target)) return;
+      }
+      close();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    window.addEventListener("resize", close);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen, close, trigger, popover]);
+  const renderPopover = (children2) => {
+    if (!isOpen) return null;
+    const anchor = trigger.current?.getBoundingClientRect();
+    if (!anchor) return null;
+    const panelWidth = width === "trigger" ? Math.max(anchor.width, MIN_TRIGGER_WIDTH_PX) : width;
+    const spaceAbove = anchor.top - GAP_PX * 2;
+    const spaceBelow = window.innerHeight - anchor.bottom - GAP_PX * 2;
+    const openAbove = spaceAbove >= MIN_PANEL_HEIGHT_PX || spaceAbove >= spaceBelow;
+    const panelMaxHeight = Math.max(
+      0,
+      Math.min(maxHeight, openAbove ? spaceAbove : spaceBelow)
+    );
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popover,
+          role,
+          "aria-label": label,
+          className: `fixed z-50 ${popoverClass}`,
+          style: {
+            width: panelWidth,
+            maxWidth: `calc(100vw - ${GAP_PX * 4}px)`,
+            left: Math.max(
+              GAP_PX,
+              Math.min(anchor.left, window.innerWidth - panelWidth - GAP_PX)
+            ),
+            ...openAbove ? { bottom: window.innerHeight - anchor.top + GAP_PX } : { top: anchor.bottom + GAP_PX },
+            maxHeight: panelMaxHeight
+          },
+          children: /* @__PURE__ */ jsx(NestedPopoverContext.Provider, { value: registry, children: children2 })
+        }
+      ),
+      document.body
+    );
+  };
+  return { isOpen, close, toggle, renderPopover };
+}
 function hasConst(x) {
   return !!x && typeof x === "object" && "const" in x;
 }
@@ -2542,185 +2682,109 @@ var DropdownRenderer = ({
   label,
   description,
   errors,
-  uischema
+  config,
+  uischema,
+  visible
 }) => {
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const surface = (config ?? {}).surface ?? "form";
+  const scale = scaleFor(surface);
+  const { isOpen, close, toggle, renderPopover } = useAnchoredPopover({
+    trigger: triggerRef,
+    popover: listRef,
+    // A select's list lines up with its own control.
+    width: "trigger",
+    maxHeight: POPOVER_MAX_HEIGHT_PX,
+    role: "listbox",
+    label: label || "Options"
+  });
   const options = toOptions(schema);
-  const handleSelectionChange = useCallback(
-    (event) => {
-      handleChange(path2, event.target.value);
+  const select = useCallback(
+    (value) => {
+      handleChange(path2, value);
+      close();
     },
-    [handleChange, path2]
+    [handleChange, path2, close]
   );
-  const displayValue = data ?? "";
+  if (!visible) return null;
   const readOnly = uischema?.access === "Read";
   const isDisabled = !enabled || readOnly;
-  return /* @__PURE__ */ jsxs(
-    FormControl,
+  const hasError = !!errors;
+  const selected = options.find((option) => option.const === data);
+  const valueText = selected ? selected.title ?? String(selected.const) : data != null && data !== "" ? String(data) : "";
+  const triggerId = `${path2}-trigger`;
+  const isBar = surface === "bar";
+  const placeholder = `Select ${(label || "value").toLowerCase()}\u2026`;
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
     {
-      variant: "outlined",
-      size: "small",
-      fullWidth: true,
-      error: !!errors,
+      id: triggerId,
+      ref: triggerRef,
+      type: "button",
       disabled: isDisabled,
-      className: "compact-field",
-      sx: {
-        minWidth: "220px"
-      },
+      onClick: toggle,
+      "aria-haspopup": "listbox",
+      "aria-expanded": isOpen,
+      "aria-label": label,
+      title: [label, valueText, hasError ? errors : null].filter(Boolean).join(" \u2014 ") || void 0,
+      className: isBar ? `ss-jsonforms-select-trigger ${pillClass({
+        active: isOpen,
+        hasError,
+        disabled: isDisabled
+      })}` : `ss-jsonforms-select-trigger ${fieldTriggerClass(scale, hasError)}`,
       children: [
+        isBar && label && /* @__PURE__ */ jsx("span", { className: `inline ${pillLabelClass} max-sm:hidden`, children: label }),
         /* @__PURE__ */ jsx(
-          InputLabel,
+          "span",
           {
-            id: `${path2}-label`,
-            sx: {
-              color: "#6b7280",
-              fontSize: "0.875rem",
-              fontWeight: 500,
-              "&.Mui-focused": {
-                color: "#6366f1"
-              },
-              "&.Mui-error": {
-                color: "#ef4444"
-              }
-            },
-            children: label
+            className: isBar ? pillValueClass : `min-w-0 flex-1 truncate ${valueText ? "" : "text-muted-foreground"}`,
+            children: valueText || (isBar ? "\u2014" : placeholder)
           }
         ),
         /* @__PURE__ */ jsx(
-          Select,
+          ChevronDown,
           {
-            labelId: `${path2}-label`,
-            value: displayValue,
-            onChange: handleSelectionChange,
-            label,
-            sx: {
-              "& .MuiOutlinedInput-root": {
-                backgroundColor: "#fafafa",
-                borderRadius: "8px",
-                transition: "all 0.2s ease-in-out",
-                height: "40px",
-                // Same height as model dropdown
-                "& fieldset": {
-                  borderColor: "#e5e7eb",
-                  borderWidth: "1px"
-                },
-                "&:hover": {
-                  backgroundColor: "#ffffff",
-                  "& fieldset": {
-                    borderColor: "#9ca3af"
-                  }
-                },
-                "&.Mui-focused": {
-                  backgroundColor: "#ffffff",
-                  "& fieldset": {
-                    borderColor: "#6366f1",
-                    borderWidth: "2px"
-                  }
-                },
-                "&.Mui-error": {
-                  "& fieldset": {
-                    borderColor: "#ef4444"
-                  }
-                }
-              },
-              "& .MuiSelect-select": {
-                backgroundColor: "#fafafa",
-                borderRadius: "8px",
-                transition: "all 0.2s ease-in-out",
-                height: "40px",
-                display: "flex",
-                alignItems: "center",
-                paddingRight: "32px !important",
-                "&:hover": {
-                  backgroundColor: "#ffffff"
-                },
-                "&.Mui-focused": {
-                  backgroundColor: "#ffffff"
-                }
-              },
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#e5e7eb",
-                borderWidth: "1px",
-                borderRadius: "8px"
-              },
-              "&:hover .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#9ca3af"
-              },
-              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#6366f1",
-                borderWidth: "2px"
-              },
-              "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#ef4444"
-              },
-              "& .MuiSelect-icon": {
-                color: "#9ca3af",
-                "&:hover": {
-                  color: "#6b7280"
-                }
-              }
-            },
-            MenuProps: {
-              PaperProps: {
-                sx: {
-                  borderRadius: "8px",
-                  boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-                  border: "1px solid #e5e7eb",
-                  marginTop: "4px",
-                  maxHeight: "280px"
-                }
-              },
-              MenuListProps: {
-                sx: {
-                  padding: 0
-                }
-              }
-            },
-            children: options.map((option, index) => {
-              const raw2 = option.const;
-              const key = typeof raw2 === "string" || typeof raw2 === "number" ? String(raw2) : String(index);
-              const value = typeof raw2 === "string" || typeof raw2 === "number" ? raw2 : String(raw2 ?? index);
-              return /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  value,
-                  sx: {
-                    padding: "12px 16px",
-                    fontSize: "0.875rem",
-                    borderBottom: "1px solid #f3f4f6",
-                    "&:last-child": {
-                      borderBottom: "none"
-                    },
-                    "&:hover": {
-                      backgroundColor: "#f8fafc"
-                    },
-                    "&.Mui-selected": {
-                      backgroundColor: "#eff6ff",
-                      "&:hover": {
-                        backgroundColor: "#dbeafe"
-                      }
-                    }
-                  },
-                  children: option.title ?? String(raw2)
-                },
-                key
-              );
-            })
-          }
-        ),
-        (description || errors) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: "0.75rem",
-              marginTop: "4px",
-              color: errors ? "#ef4444" : "#6b7280"
-            },
-            children: errors || description
+            className: `shrink-0 opacity-50 ${isBar ? "h-3 w-3" : "h-4 w-4"}`
           }
         )
       ]
     }
   );
+  return /* @__PURE__ */ jsxs("div", { className: "ss-jsonforms-field ss-jsonforms-select compact-field", children: [
+    !isBar && label && /* @__PURE__ */ jsx("label", { htmlFor: triggerId, className: fieldLabelClass(scale), children: label }),
+    trigger,
+    !isBar && (errors || description) && /* @__PURE__ */ jsx("div", { className: errors ? fieldErrorClass : fieldHintClass, children: errors || description }),
+    renderPopover(
+      /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto py-1", children: [
+        options.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-muted-foreground", children: "No options available" }),
+        options.map((option, index) => {
+          const active = option.const === data;
+          const text6 = option.title ?? String(option.const);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": active,
+              onClick: () => select(option.const),
+              className: popoverRowClass,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    className: `h-3.5 w-3.5 shrink-0 ${active ? "text-primary" : "opacity-0"}`
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground", children: text6 })
+              ]
+            },
+            typeof option.const === "string" || typeof option.const === "number" ? String(option.const) : `option-${index}`
+          );
+        })
+      ] })
+    )
+  ] });
 };
 var dropdownRendererTester = rankWith(
   90,
@@ -2738,8 +2802,8 @@ var dropdownRendererTester = rankWith(
       return false;
     }
     const hasDropdownOptions = !!(fieldSchema.oneOf || fieldSchema.anyOf || fieldSchema.enum && Array.isArray(fieldSchema.enum));
-    const isModelSelector = typeof fieldSchema === "object" && fieldSchema && fieldSchema["x-model-selector"] === true || fieldSchema.title === "ModelId" || fieldSchema.format === "uuid";
-    return hasDropdownOptions && !isModelSelector;
+    const isModelSelector2 = typeof fieldSchema === "object" && fieldSchema && fieldSchema["x-model-selector"] === true || fieldSchema.title === "ModelId" || fieldSchema.format === "uuid";
+    return hasDropdownOptions && !isModelSelector2;
   }
 );
 var DropdownRendererControl = withJsonFormsControlProps(DropdownRenderer);
@@ -2774,7 +2838,8 @@ var JsonEditorRenderer = ({
   uischema,
   visible,
   enabled,
-  required
+  required,
+  config
 }) => {
   const [jsonValue, setJsonValue] = useState("");
   const [displayedParseError, setDisplayedParseError] = useState(
@@ -2828,43 +2893,19 @@ var JsonEditorRenderer = ({
   }
   const readOnly = uischema?.access === "Read";
   const isDisabled = !enabled || readOnly;
+  const scale = scaleFor(
+    (config ?? {}).surface ?? "form"
+  );
   return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
-    label && /* @__PURE__ */ jsxs(
-      "label",
-      {
-        style: {
-          display: "block",
-          color: "#475569",
-          fontSize: "0.875rem",
-          fontWeight: 500,
-          marginBottom: "0.375rem"
-        },
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
-        ]
-      }
-    ),
-    description && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#6b7280",
-          fontSize: "0.75rem",
-          marginBottom: "0.5rem"
-        },
-        children: description
-      }
-    ),
+    label && /* @__PURE__ */ jsxs("label", { className: fieldLabelClass(scale), children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: fieldHintClass, children: description }),
     /* @__PURE__ */ jsx(
       "div",
       {
-        style: {
-          border: errors || displayedParseError ? "1px solid #ef4444" : "1px solid #d1d5db",
-          borderRadius: "6px",
-          overflow: "hidden",
-          opacity: isDisabled ? 0.6 : 1
-        },
+        className: `overflow-hidden rounded-md border ${errors || displayedParseError ? "border-destructive" : "border-input"} ${isDisabled ? "opacity-60" : ""}`,
         children: /* @__PURE__ */ jsx(
           AceEditor,
           {
@@ -2897,28 +2938,8 @@ var JsonEditorRenderer = ({
         )
       }
     ),
-    displayedParseError && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#ef4444",
-          fontSize: "0.75rem",
-          marginTop: "0.25rem"
-        },
-        children: displayedParseError
-      }
-    ),
-    errors && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#ef4444",
-          fontSize: "0.75rem",
-          marginTop: "0.25rem"
-        },
-        children: errors
-      }
-    )
+    displayedParseError && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: displayedParseError }),
+    errors && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: errors })
   ] });
 };
 var jsonEditorTester = rankWith(
@@ -3009,14 +3030,31 @@ var ModelIdRenderer = ({
   description,
   errors,
   uischema,
-  visible
+  visible,
+  config
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
   const [searchValue, setSearchValue] = useState("");
   const [debouncedSearchValue, setDebouncedSearchValue] = useState("");
-  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
   const menuRef = useRef(null);
   const searchRef = useRef(null);
+  const surface = (config ?? {}).surface ?? "bar";
+  const scale = scaleFor(surface);
+  const isBar = surface === "bar";
+  const {
+    isOpen,
+    close: closeMenu,
+    toggle,
+    renderPopover
+  } = useAnchoredPopover({
+    trigger: triggerRef,
+    popover: menuRef,
+    // Wide enough for a provider glyph, a model name and its id underneath.
+    width: POPOVER_WIDTH_PX,
+    maxHeight: POPOVER_MAX_HEIGHT_PX,
+    role: "listbox",
+    label: "Models"
+  });
   const debounceTimerRef = useRef(
     void 0
   );
@@ -3055,35 +3093,13 @@ var ModelIdRenderer = ({
       handleChange(path2, model.id);
       setSearchValue("");
       setDebouncedSearchValue("");
-      setIsOpen(false);
+      closeMenu();
     },
-    [handleChange, path2]
+    [handleChange, path2, closeMenu]
   );
-  const close = useCallback(() => {
-    setIsOpen(false);
-    setSearchValue("");
-  }, []);
   useEffect(() => {
-    if (!isOpen) return;
-    const onPointerDown = (event) => {
-      const target = event.target;
-      if (containerRef.current && !containerRef.current.contains(target) && !(menuRef.current && menuRef.current.contains(target))) {
-        close();
-      }
-    };
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") close();
-    };
-    const onResize = () => close();
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    window.addEventListener("resize", onResize);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-      window.removeEventListener("resize", onResize);
-    };
-  }, [isOpen, close]);
+    if (!isOpen) setSearchValue("");
+  }, [isOpen]);
   useEffect(() => {
     if (isOpen) searchRef.current?.focus();
   }, [isOpen]);
@@ -3092,53 +3108,58 @@ var ModelIdRenderer = ({
   const isDisabled = !enabled || readOnly;
   const hasError = !!errors && errors.length > 0;
   const selectedName = selectedModel ? selectedModel.displayName || selectedModel.name || "" : "";
-  const triggerText = selectedName || label || "Select model";
+  const triggerText = selectedName || "Select model";
   const iconSrc = getModelIcon(selectedModel);
   const tooltip = [selectedName || label, description, hasError ? errors : null].filter(Boolean).join(" \u2014 ");
-  const anchorRect = isOpen ? containerRef.current?.getBoundingClientRect() : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: containerRef, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setIsOpen((v) => !v),
-        disabled: isDisabled,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-label": label || "Select model",
-        title: tooltip || void 0,
-        className: `flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${isOpen ? "border-primary/30 bg-primary/10 text-primary" : "border-border/70 bg-transparent text-muted-foreground hover:bg-secondary"} ${hasError ? "border-destructive text-destructive" : ""} ${isDisabled ? "cursor-not-allowed opacity-60" : ""}`,
-        children: [
-          iconSrc ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: iconSrc,
-              alt: "",
-              className: "h-3.5 w-3.5 shrink-0 object-contain"
-            }
-          ) : /* @__PURE__ */ jsx(Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "inline max-w-[9rem] truncate max-sm:hidden", children: triggerText }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })
-        ]
-      }
-    ),
-    isOpen && anchorRect && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: menuRef,
-          role: "listbox",
-          "aria-label": label || "Models",
-          className: "fixed z-50 w-72 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-border bg-popover shadow-lg",
-          style: {
-            left: Math.max(
-              8,
-              Math.min(anchorRect.left, window.innerWidth - 288 - 8)
-            ),
-            bottom: window.innerHeight - anchorRect.top + 8
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx(
+  const triggerLabel = !label || label === "ModelId" ? "Model" : label;
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      id: `${path2}-trigger`,
+      type: "button",
+      onClick: toggle,
+      disabled: isDisabled,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-label": triggerLabel,
+      title: tooltip || void 0,
+      className: isBar ? pillClass({ active: isOpen, hasError, disabled: isDisabled }) : fieldTriggerClass(scale, hasError),
+      children: [
+        iconSrc ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: iconSrc,
+            alt: "",
+            className: "h-3.5 w-3.5 shrink-0 object-contain"
+          }
+        ) : /* @__PURE__ */ jsx(Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: isBar ? `inline ${pillValueClass} max-sm:hidden` : "min-w-0 flex-1 truncate",
+            children: triggerText
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: `shrink-0 opacity-60 ${isBar ? "h-3 w-3" : "h-4 w-4"}`
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: isBar ? "ss-jsonforms-field ss-jsonforms-model relative shrink-0" : "ss-jsonforms-field ss-jsonforms-model compact-field",
+      children: [
+        !isBar && /* @__PURE__ */ jsx("label", { htmlFor: `${path2}-trigger`, className: fieldLabelClass(scale), children: triggerLabel }),
+        trigger,
+        renderPopover(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border p-2", children: /* @__PURE__ */ jsx(
               "input",
               {
                 ref: searchRef,
@@ -3150,7 +3171,7 @@ var ModelIdRenderer = ({
                 className: "h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/40"
               }
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "max-h-72 overflow-y-auto", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto", children: [
               isLoading && listModels.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }) }),
               !isLoading && listModels.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-muted-foreground", children: searchValue ? "No models found" : "No models available" }),
               listModels.map((model) => {
@@ -3163,7 +3184,7 @@ var ModelIdRenderer = ({
                     role: "option",
                     "aria-selected": active,
                     onClick: () => handleSelect(model),
-                    className: "flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-secondary/60",
+                    className: popoverRowClass,
                     children: [
                       /* @__PURE__ */ jsx(
                         Check,
@@ -3189,12 +3210,11 @@ var ModelIdRenderer = ({
                 );
               })
             ] })
-          ]
-        }
-      ),
-      document.body
-    )
-  ] });
+          ] })
+        )
+      ]
+    }
+  );
 };
 var modelIdRendererTester = rankWith(
   100,
@@ -3229,6 +3249,7 @@ var NumberRenderer = ({
   uischema,
   visible,
   enabled,
+  config,
   required
 }) => {
   const isInteger = schema?.type === "integer";
@@ -3257,40 +3278,58 @@ var NumberRenderer = ({
   const max = fieldSchema?.maximum;
   const step = isInteger ? 1 : fieldSchema?.multipleOf ?? "any";
   const tooltip = [label, description, hasError ? errors : null].filter(Boolean).join(" \u2014 ");
-  return /* @__PURE__ */ jsxs(
-    "div",
+  const surface = (config ?? {}).surface ?? "form";
+  const scale = scaleFor(surface);
+  const input = /* @__PURE__ */ jsx(
+    "input",
     {
-      className: `ss-jsonforms-field ss-jsonforms-number flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-within:border-primary/40 ${hasError ? "border-destructive" : "border-border/70"} ${isDisabled ? "opacity-60" : ""}`,
-      title: tooltip || void 0,
-      children: [
-        label && /* @__PURE__ */ jsxs(
-          "label",
-          {
-            htmlFor: `number-${path2}`,
-            className: `whitespace-nowrap ${hasError ? "text-destructive" : "text-muted-foreground"}`,
-            children: [
-              label,
-              required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: `number-${path2}`,
-            type: "number",
-            value: data ?? "",
-            onChange: handleInputChange,
-            disabled: isDisabled,
-            min,
-            max,
-            step,
-            className: "w-14 border-0 bg-transparent p-0 text-xs font-medium tabular-nums text-foreground outline-none disabled:cursor-not-allowed"
-          }
-        )
-      ]
+      id: `number-${path2}`,
+      type: "number",
+      value: data ?? "",
+      onChange: handleInputChange,
+      disabled: isDisabled,
+      min,
+      max,
+      step,
+      className: surface === "bar" ? "w-14 border-0 bg-transparent p-0 text-xs font-medium tabular-nums text-foreground outline-none disabled:cursor-not-allowed" : fieldNumberClass(scale, hasError)
     }
   );
+  if (surface === "bar") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `ss-jsonforms-field ss-jsonforms-number ${pillClass({
+          hasError,
+          disabled: isDisabled
+        })}`,
+        title: tooltip || void 0,
+        children: [
+          label && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: `number-${path2}`,
+              className: `${pillLabelClass} whitespace-nowrap ${hasError ? "text-destructive" : "text-muted-foreground"}`,
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+              ]
+            }
+          ),
+          input
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "ss-jsonforms-field ss-jsonforms-number", children: [
+    /* @__PURE__ */ jsxs("div", { className: fieldRowClass, children: [
+      /* @__PURE__ */ jsxs("label", { htmlFor: `number-${path2}`, className: fieldRowLabelClass(scale), children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+      ] }),
+      input
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: errors })
+  ] });
 };
 var numberRendererTester = rankWith(
   40,
@@ -3306,6 +3345,14 @@ var numberRendererTester = rankWith(
   }
 );
 var NumberRendererControl = withJsonFormsControlProps(NumberRenderer);
+var SCALE = {
+  comfortable: { lineHeight: 20, padding: 8 },
+  dense: { lineHeight: 16, padding: 6 }
+};
+var rowsToPx = (rows, scale) => rows * scale.lineHeight + scale.padding * 2 + 2;
+var MAX_VIEWPORT_SHARE = 0.5;
+var DEFAULT_MIN_ROWS = 3;
+var DEFAULT_MAX_ROWS = 9;
 var TextareaRenderer = ({
   data,
   handleChange,
@@ -3317,28 +3364,49 @@ var TextareaRenderer = ({
   uischema,
   visible,
   enabled,
-  required
+  required,
+  config
 }) => {
   const textareaRef = useRef(null);
+  const textareaOptions = schema["ui:textarea"] ?? {};
+  const formConfig = config ?? {};
+  const scaleName = scaleFor(formConfig.surface ?? "form");
+  const scale = SCALE[scaleName];
+  const minRows = textareaOptions.minRows ?? formConfig.minRows ?? DEFAULT_MIN_ROWS;
+  const maxRows = Math.max(
+    minRows,
+    textareaOptions.maxRows ?? formConfig.maxRows ?? DEFAULT_MAX_ROWS
+  );
+  const minHeight = rowsToPx(minRows, scale);
+  const maxHeight = rowsToPx(maxRows, scale);
+  const [viewportCap, setViewportCap] = useState(
+    () => typeof window === "undefined" ? Number.POSITIVE_INFINITY : Math.round(window.innerHeight * MAX_VIEWPORT_SHARE)
+  );
+  const ceiling = Math.max(minHeight, Math.min(maxHeight, viewportCap));
   const autoResize = useCallback(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height = `${Math.min(
-        Math.max(textareaRef.current.scrollHeight, 80),
-        // Minimum height of 80px
-        240
-        // Maximum height of 240px
-      )}px`;
-    }
-  }, []);
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(
+      Math.max(el.scrollHeight, minHeight),
+      ceiling
+    )}px`;
+  }, [minHeight, ceiling]);
   useEffect(() => {
     autoResize();
   }, [data, autoResize]);
+  useEffect(() => {
+    const onResize = () => {
+      setViewportCap(Math.round(window.innerHeight * MAX_VIEWPORT_SHARE));
+      autoResize();
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [autoResize]);
   const handleInputChange = useCallback(
     (event) => {
-      const newValue = event.target.value;
-      handleChange(path2, newValue);
-      setTimeout(autoResize, 0);
+      handleChange(path2, event.target.value);
+      autoResize();
     },
     [handleChange, path2, autoResize]
   );
@@ -3348,89 +3416,34 @@ var TextareaRenderer = ({
   const readOnly = uischema?.access === "Read";
   const isDisabled = !enabled || readOnly;
   const hasError = errors && errors.length > 0;
-  const textareaOptions = schema["ui:textarea"] ?? {};
   const placeholder = textareaOptions.placeholder || schema?.description || `Enter ${label?.toLowerCase() || "text"}...`;
-  const minRows = textareaOptions.minRows || 3;
   return /* @__PURE__ */ jsxs("div", { className: "ss-jsonforms-field ss-jsonforms-textarea", children: [
-    label && /* @__PURE__ */ jsxs(
-      "label",
-      {
-        style: {
-          display: "block",
-          color: hasError ? "#ef4444" : "#475569",
-          fontSize: "0.875rem",
-          fontWeight: 500,
-          marginBottom: "0.375rem"
-        },
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
-        ]
-      }
-    ),
-    description && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#6b7280",
-          fontSize: "0.75rem",
-          marginBottom: "0.5rem"
-        },
-        children: description
-      }
-    ),
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: path2, className: fieldLabelClass(scaleName), children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: fieldHintClass, children: description }),
     /* @__PURE__ */ jsx(
       "textarea",
       {
+        id: path2,
         ref: textareaRef,
         value: data || "",
         onChange: handleInputChange,
         placeholder,
         disabled: isDisabled,
         rows: minRows,
+        className: `resize-y ${fieldControlClass(scaleName, !!hasError)}`,
         style: {
-          width: "100%",
-          minHeight: "80px",
-          maxHeight: "240px",
-          resize: "vertical",
-          padding: "0.75rem",
-          border: hasError ? "2px solid #ef4444" : "1px solid #d1d5db",
-          borderRadius: "6px",
-          fontSize: "16px",
-          lineHeight: "1.5",
-          fontFamily: "inherit",
-          backgroundColor: isDisabled ? "#f9fafb" : "#ffffff",
-          color: isDisabled ? "#9ca3af" : "#111827",
-          outline: "none",
-          transition: "border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
-          boxShadow: hasError ? "0 0 0 1px #ef4444" : "none",
+          minHeight: `${minHeight}px`,
+          maxHeight: `${ceiling}px`,
+          // iOS zooms a focused control under 16px; the design's fields are
+          // 14px, so opt out of the adjustment rather than the design.
           WebkitTextSizeAdjust: "100%"
-        },
-        onFocus: (e) => {
-          if (!hasError) {
-            e.target.style.borderColor = "#6366f1";
-            e.target.style.boxShadow = "0 0 0 1px #6366f1";
-          }
-        },
-        onBlur: (e) => {
-          if (!hasError) {
-            e.target.style.borderColor = "#d1d5db";
-            e.target.style.boxShadow = "none";
-          }
         }
       }
     ),
-    hasError && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#ef4444",
-          fontSize: "0.75rem",
-          marginTop: "0.25rem"
-        },
-        children: errors
-      }
-    )
+    hasError && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: errors })
   ] });
 };
 var textareaRendererTester = rankWith(
@@ -3482,10 +3495,25 @@ var renderers = [
 ];
 
 // src/chat-variables/VariablesForm.vm.ts
+var MAX_INLINE_VARIABLES = 3;
+var isModelSelector = (schema) => schema.title === "ModelId" || schema["x-model-selector"] === true;
+function rowLayout(controls) {
+  const innerRow = {
+    type: "HorizontalLayout",
+    elements: controls,
+    options: { gap: "12px", alignItems: "flex-start" }
+  };
+  const ui = {
+    type: "VerticalLayout",
+    elements: [innerRow]
+  };
+  return ui;
+}
 function buildSimpleSchemaAndUi(vars, threadVars, useDefaults) {
   const names = Object.keys(vars || {});
   const properties2 = {};
   const controls = [];
+  const inlineOnly = [];
   const initialData = {};
   const $defs = {};
   for (const name of names) {
@@ -3505,19 +3533,24 @@ function buildSimpleSchemaAndUi(vars, threadVars, useDefaults) {
       control.enabled = false;
     }
     controls.push(control);
+    if (isModelSelector(properties2[name])) inlineOnly.push(control);
   }
   const schema = { type: "object", properties: properties2 };
   if (Object.keys($defs).length > 0) schema.$defs = $defs;
-  const innerRow = {
-    type: "HorizontalLayout",
-    elements: controls,
-    options: { gap: "12px", alignItems: "flex-start" }
-  };
-  const ui = {
-    type: "VerticalLayout",
-    elements: [innerRow]
+  if (controls.length <= MAX_INLINE_VARIABLES) {
+    return {
+      schema,
+      inlineControls: controls,
+      overflowControls: [],
+      initialData
+    };
+  }
+  return {
+    schema,
+    inlineControls: inlineOnly,
+    overflowControls: controls.filter((c) => !inlineOnly.includes(c)),
+    initialData
   };
-  return { schema, uiSchema: ui, initialData };
 }
 function useChatVariablesFormVm({
   workspace,
@@ -3532,26 +3565,26 @@ function useChatVariablesFormVm({
   const { mutate: updateVariableMutation } = useUpdateFlowRunVariable();
   const querySettled = !isLoading && (threadVars !== void 0 || isError);
   const shouldUseDefaults = isError || threadVars && Object.keys(threadVars).length === 0;
-  const built = React8.useMemo(() => {
+  const built = React9.useMemo(() => {
     return buildSimpleSchemaAndUi(
       workspace.variables,
       threadVars,
       shouldUseDefaults ?? false
     );
   }, [workspace.variables, threadVars, shouldUseDefaults]);
-  const [data, setData] = React8.useState(null);
-  React8.useEffect(() => {
+  const [data, setData] = React9.useState(null);
+  React9.useEffect(() => {
     if (querySettled) {
       setData(built.initialData);
       setVariables(built.initialData);
     }
   }, [querySettled, built.initialData, setVariables]);
-  const ajv = React8.useMemo(() => createAjv({ useDefaults: false }), []);
-  const prevRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const ajv = React9.useMemo(() => createAjv({ useDefaults: false }), []);
+  const prevRef = React9.useRef(null);
+  React9.useEffect(() => {
     prevRef.current = data;
   }, [data]);
-  const onChange = React8.useCallback(
+  const onChange = React9.useCallback(
     ({ data: next2 }) => {
       if (prevRef.current && !isDraftThreadId(threadId)) {
         const keys2 = Object.keys(workspace.variables || {});
@@ -3572,29 +3605,96 @@ function useChatVariablesFormVm({
     },
     [workspace.variables, setVariables, updateVariableMutation, threadId]
   );
-  const config = React8.useMemo(
+  const barConfig = React9.useMemo(
     () => ({
       restrict: true,
       trim: false,
       showUnfocusedDescription: true,
-      hideRequiredAsterisk: true
+      hideRequiredAsterisk: true,
+      surface: "bar",
+      minRows: 1,
+      maxRows: 6
     }),
     []
   );
+  const panelConfig = React9.useMemo(
+    () => ({ ...barConfig, surface: "panel" }),
+    [barConfig]
+  );
+  const inlineUiSchema = React9.useMemo(
+    () => built.inlineControls.length ? rowLayout(built.inlineControls) : null,
+    [built.inlineControls]
+  );
+  const overflowUiSchema = React9.useMemo(
+    () => built.overflowControls.length ? rowLayout(built.overflowControls) : null,
+    [built.overflowControls]
+  );
   return {
     schema: built.schema,
-    uiSchema: built.uiSchema,
+    inlineUiSchema,
+    overflowUiSchema,
+    overflowCount: built.overflowControls.length,
     data,
     renderers,
     cells,
     ajv,
     onChange,
-    config,
+    barConfig,
+    panelConfig,
     isLoading,
     isReady: querySettled,
     isHydrated: data !== null
   };
 }
+function VariablesOverflowPanel({ count, children: children2 }) {
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const { isOpen, close, toggle, renderPopover } = useAnchoredPopover({
+    trigger: triggerRef,
+    popover: panelRef,
+    width: POPOVER_WIDTH_PX,
+    maxHeight: POPOVER_MAX_HEIGHT_PX,
+    role: "dialog",
+    label: "Workspace variables"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "dialog",
+        "aria-label": `Variables (${count})`,
+        className: `flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${isOpen ? "border-primary/30 bg-primary/10 text-primary" : "border-border/70 bg-transparent text-muted-foreground hover:bg-secondary"}`,
+        children: [
+          /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "inline max-sm:hidden", children: "Variables" }),
+          /* @__PURE__ */ jsx("span", { className: "rounded-full bg-secondary px-1.5 text-[10px] leading-4 tabular-nums", children: count })
+        ]
+      }
+    ),
+    renderPopover(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: popoverHeadingClass, children: "Variables" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              "aria-label": "Close variables",
+              className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ss-variables-panel min-h-0 overflow-y-auto p-3", children: children2 })
+      ] })
+    )
+  ] });
+}
 var ChatVariablesForm = forwardRef(({ workspace, threadId, setVariables }, ref) => {
   const vm = useChatVariablesFormVm({ workspace, threadId, setVariables });
   useImperativeHandle(ref, () => ({
@@ -3610,19 +3710,32 @@ var ChatVariablesForm = forwardRef(({ workspace, threadId, setVariables }, ref)
   if (!vm.isHydrated) {
     return /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full h-8", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "w-full jsonforms-compact", children: /* @__PURE__ */ jsx(
-    JsonForms,
-    {
-      schema: vm.schema,
-      uischema: vm.uiSchema,
-      data: vm.data,
-      renderers: vm.renderers,
-      cells: vm.cells,
-      ajv: vm.ajv,
-      onChange: vm.onChange,
-      config: vm.config
-    }
-  ) });
+  const formProps = {
+    schema: vm.schema,
+    data: vm.data,
+    renderers: vm.renderers,
+    cells: vm.cells,
+    ajv: vm.ajv,
+    onChange: vm.onChange
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-1", children: [
+    vm.inlineUiSchema && /* @__PURE__ */ jsx("div", { className: "min-w-0 jsonforms-compact", children: /* @__PURE__ */ jsx(
+      JsonForms,
+      {
+        ...formProps,
+        uischema: vm.inlineUiSchema,
+        config: vm.barConfig
+      }
+    ) }),
+    vm.overflowUiSchema && /* @__PURE__ */ jsx(VariablesOverflowPanel, { count: vm.overflowCount, children: /* @__PURE__ */ jsx("div", { className: "jsonforms-compact", children: /* @__PURE__ */ jsx(
+      JsonForms,
+      {
+        ...formProps,
+        uischema: vm.overflowUiSchema,
+        config: vm.panelConfig
+      }
+    ) }) })
+  ] });
 });
 
 // src/domains/workspaces/queryKeys.ts
@@ -4094,7 +4207,7 @@ function MessageComposer(_props = {}) {
               disabled,
               placeholder: "What would you like to do?",
               className: "md-editor--bare px-5 pb-3 pt-4 text-sm",
-              minHeight: 48
+              minHeight: 24
             },
             `composer-md-${editorKey}`
           ) }),
@@ -19173,7 +19286,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React8.forwardRef(
+var Button = React9.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -19724,6 +19837,7 @@ function ChatMessageSources({
     ] })
   ] });
 }
+var USER_FORM_CONFIG = { surface: "form", minRows: 6, maxRows: 20 };
 var REVEAL_ON_HOVER = "opacity-100 focus-visible:opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100";
 var MessageBubble = (props) => {
   const {
@@ -19777,7 +19891,7 @@ var MessageBubble = (props) => {
         );
       })
     ] }),
-    showForm && /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-border pt-4", children: [
+    showForm && /* @__PURE__ */ jsxs("div", { className: "ss-chat-message__user-form mt-4 border-t border-border pt-4", children: [
       /* @__PURE__ */ jsx(
         JsonForms,
         {
@@ -19786,6 +19900,7 @@ var MessageBubble = (props) => {
           renderers,
           cells,
           readonly: userInput !== void 0,
+          config: USER_FORM_CONFIG,
           onChange: ({ data, errors }) => {
             setResponseFormData(data);
             setResponseFormValid(!errors?.length);