@ai-matrx/agents 0.59.189 → 0.59.191

package/dist/settings/react/index.cjs

@@ -22,9 +22,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // settings/react/index.ts
 var react_exports = {};
 __export(react_exports, {
-  ENUM_OFF_VALUE: () => ENUM_OFF_VALUE,
+  ExtraSettingRow: () => ExtraSettingRow,
   InputCapabilitiesEditor: () => InputCapabilitiesEditor,
+  ModelSettingsPanel: () => ModelSettingsPanel,
   SettingControlInput: () => SettingControlInput,
+  SettingRowFrame: () => SettingRowFrame,
+  SettingRowLabel: () => RowLabel,
+  SettingsGroupSection: () => SettingsGroupSection,
+  formatSettingValue: () => formatSettingValue,
   useEffectiveSettings: () => useEffectiveSettings,
   useSettingsEntry: () => useSettingsEntry,
   useSettingsSelector: () => useSettingsSelector
@@ -211,9 +216,19 @@ function readEffectiveSettings(entry) {
 var import_react = require("react");
 var import_design_system = require("@ai-matrx/design-system");
 var import_controls = require("@ai-matrx/design-system/controls");
-var import_text_case = require("@ai-matrx/kit/text-case");
-var import_jsx_runtime = require("react/jsx-runtime");
+
+// settings/setting-state.ts
 var ENUM_OFF_VALUE = "none";
+function isOffValue(value, control) {
+  if (value === false) return true;
+  if (value === ENUM_OFF_VALUE) {
+    return !control || control.type === "enum";
+  }
+  return false;
+}
+
+// settings/react/SettingControlInput.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var SELECT_MAX_OPTIONS = 12;
 function choiceFor(options) {
   if ((0, import_controls.isAspectRatioOptionSet)(options)) return "aspect-ratio";
@@ -235,16 +250,13 @@ function flattenTypeObject(value) {
 }
 function SettingControlInput({
   settingKey,
-  explicitState = false,
   control,
   value,
   onChange,
   disabled = false,
-  id,
-  size = "dense"
+  id
 }) {
   const inputId = id ?? `setting-control-${settingKey}`;
-  const comfortable = size === "comfortable";
   if (control.type === "enum" && control.enum?.length) {
     const flattened = settingKey === "response_format" ? flattenTypeObject(value) : value;
     const stringValue = flattened === void 0 || flattened === null ? "" : String(flattened);
@@ -260,7 +272,7 @@ function SettingControlInput({
         variant: "inline",
         disabled,
         id: inputId,
-        placeholder: explicitState ? "Not set" : "Default"
+        placeholder: "Default"
       }
     ) : choice === "searchable" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_controls.OptionCombobox,
@@ -268,11 +280,10 @@ function SettingControlInput({
         value: isValueMismatch ? "" : stringValue,
         onChange: emit,
         options: control.enum,
-        getLabel: explicitState ? import_text_case.humanizeIdentifier : void 0,
         variant: "inline",
         disabled,
         id: inputId,
-        placeholder: explicitState ? "Not set" : "Default"
+        placeholder: "Default"
       }
     ) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-1 items-center gap-1.5", children: [
@@ -287,21 +298,16 @@ function SettingControlInput({
               import_design_system.SelectTrigger,
               {
                 id: inputId,
-                className: comfortable ? "h-9 flex-1 rounded-lg border-border bg-background px-2.5 text-sm text-foreground shadow-none focus:ring-0 pointer-coarse:h-11 [&_svg]:h-4 [&_svg]:w-4" : "h-7 flex-1 border-0 bg-transparent px-1 text-xs font-medium text-foreground/80 shadow-none hover:bg-transparent hover:text-foreground focus:ring-0 [&_svg]:h-3 [&_svg]:w-3",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_design_system.SelectValue,
-                  {
-                    placeholder: isValueMismatch ? stringValue : explicitState ? "Not set" : "Default"
-                  }
-                )
+                className: "h-7 flex-1 border-0 bg-transparent px-1 text-xs font-medium text-foreground shadow-none hover:bg-transparent focus:ring-0 pointer-coarse:h-11 [&_svg]:h-3 [&_svg]:w-3",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.SelectValue, { placeholder: isValueMismatch ? stringValue : "Default" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.SelectContent, { className: comfortable ? "text-sm" : "text-xs", children: control.enum.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.SelectContent, { className: "text-xs", children: control.enum.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_design_system.SelectItem,
               {
                 value: option,
-                className: comfortable ? "text-sm" : "py-1 text-xs",
-                children: option === ENUM_OFF_VALUE ? "Off" : explicitState ? (0, import_text_case.humanizeIdentifier)(option) : option
+                className: "py-1 text-xs",
+                children: option === ENUM_OFF_VALUE ? "Off" : option
               },
               option
             )) })
@@ -319,22 +325,12 @@ function SettingControlInput({
     ] });
   }
   if (control.type === "boolean") {
-    if (comfortable && !explicitState)
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design_system.Switch,
-        {
-          id: inputId,
-          checked: value === true,
-          onCheckedChange: (next) => onChange(next),
-          disabled
-        }
-      ) });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_design_system.Checkbox,
         {
           id: inputId,
-          checked: explicitState && value == null ? "indeterminate" : value === true,
+          checked: value === true,
           onCheckedChange: (c) => onChange(c === true),
           disabled,
           className: "cursor-pointer"
@@ -345,30 +341,12 @@ function SettingControlInput({
         {
           htmlFor: inputId,
           className: "cursor-pointer text-xs text-muted-foreground",
-          children: explicitState ? value == null ? "Unknown" : value === true ? "Yes" : "No" : value === true ? "On" : "Off"
+          children: value === true ? "On" : "Off"
         }
       )
     ] });
   }
   if (control.type === "number" || control.type === "integer") {
-    if (explicitState && typeof value !== "number")
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design_system.Input,
-        {
-          id: inputId,
-          type: "number",
-          value: "",
-          placeholder: "Not set",
-          min: control.min,
-          max: control.max,
-          step: control.type === "integer" ? 1 : "any",
-          disabled,
-          onChange: (event) => {
-            if (event.target.value !== "") onChange(Number(event.target.value));
-          },
-          className: "h-8 text-sm"
-        }
-      );
     const numeric = typeof value === "number" ? value : void 0;
     const hasRange = control.min !== void 0 && control.max !== void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -383,8 +361,7 @@ function SettingControlInput({
         step: control.type === "integer" ? 1 : 0.01,
         isInteger: control.type === "integer",
         disabled,
-        withSlider: hasRange,
-        size
+        withSlider: hasRange
       }
     );
   }
@@ -421,7 +398,7 @@ function SettingControlInput({
       value: value === void 0 || value === null ? "" : String(value),
       onChange: (e) => onChange(e.target.value),
       disabled,
-      className: comfortable ? "h-9 w-full px-2.5 text-sm pointer-coarse:h-11" : "h-7 w-full px-2 text-base sm:text-xs"
+      className: "h-7 w-full px-2 text-base pointer-coarse:h-11 sm:text-xs"
     }
   );
 }
@@ -479,11 +456,9 @@ function NumberInput({
   step = 1,
   isInteger = false,
   disabled = false,
-  withSlider = false,
-  size = "dense"
+  withSlider = false
 }) {
-  const comfortable = size === "comfortable";
-  const boxClass = comfortable ? "h-9 px-2.5 text-sm tabular-nums pointer-coarse:h-11" : "h-7 px-2 text-xs";
+  const boxClass = "h-7 px-2 text-xs tabular-nums pointer-coarse:h-11";
   const [draftState, setDraftState] = (0, import_react.useState)(() => ({
     sourceValue: value,
     text: value === void 0 ? "" : String(value)
@@ -505,7 +480,7 @@ function NumberInput({
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        className: comfortable ? "grid grid-cols-[1fr_6rem] items-center gap-3" : "grid grid-cols-[1fr_4rem] items-center gap-2",
+        className: "grid grid-cols-[1fr_4.5rem] items-center gap-2",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_design_system.Slider,
@@ -566,157 +541,566 @@ function NumberInput({
 }
 
 // settings/react/InputCapabilitiesEditor.tsx
-var import_design_system2 = require("@ai-matrx/design-system");
+var import_design_system3 = require("@ai-matrx/design-system");
+var import_controls2 = require("@ai-matrx/design-system/controls");
+
+// settings/react/settings-icons.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var cn = (...parts) => parts.filter(Boolean).join(" ");
 function Svg({ className, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children
+    }
+  );
 }
-var ImageIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+var CircleCheckGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m16 9-5.5 5.5L8 12" })
+] });
+var TriangleAlertGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 9v4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 17h.01" })
+] });
+var VariableGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 21s-4-3-4-9 4-9 4-9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 3s4 3 4 9-4 9-4 9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "15", x2: "9", y1: "9", y2: "15" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "9", x2: "15", y1: "9", y2: "15" })
+] });
+var UnlinkGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "2", x2: "5", y1: "8", y2: "8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "16", x2: "16", y1: "19", y2: "22" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "19", x2: "22", y1: "16", y2: "16" })
+] });
+var WrenchGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Svg, { className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" }) });
+var Trash2Glyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 11v6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 11v6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+] });
+var RotateCcwGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 3v5h5" })
+] });
+var ImageGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
 ] });
-var FileText = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+var FileTextGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 9H8" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 13H8" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 17H8" })
 ] });
-var Youtube = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
+var YoutubeGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m10 15 5-3-5-3z" })
 ] });
-var RotateCcw = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 3v5h5" })
-] });
+
+// settings/react/SettingRowFrame.tsx
+var import_design_system2 = require("@ai-matrx/design-system");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var cn = (...parts) => parts.filter(Boolean).join(" ");
+function formatSettingValue(value) {
+  if (typeof value === "boolean") return value ? "On" : "Off";
+  if (value !== null && typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function SettingRowFrame({ rowKey, state, leading, label, children, actions }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      "data-setting-row": rowKey,
+      "data-setting-state": state,
+      className: "grid grid-cols-[1rem_minmax(0,1fr)_auto] items-start gap-x-2 gap-y-1 py-1 @md:grid-cols-[1rem_9rem_minmax(0,1fr)_auto]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex h-7 items-center", children: leading }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex min-h-7 min-w-0 items-center", children: label }),
+        children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col-span-2 col-start-2 row-start-2 min-w-0 @md:col-span-1 @md:col-start-3 @md:row-start-1", children }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col-start-3 row-start-1 flex min-h-7 items-center justify-end @md:col-start-4", children: actions })
+      ]
+    }
+  );
+}
+function RowLabel({ htmlFor, muted, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Label, { htmlFor, className: cn("min-w-0 truncate type-body", muted ? "text-muted-foreground" : "text-foreground"), children });
+}
+function RowText({ children, mono }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("flex min-h-7 items-center truncate type-secondary text-muted-foreground", mono && "font-mono"), children });
+}
+function SettingsGroupSection({ id, title, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { "data-settings-group": id, className: title ? "mt-2 border-t border-border pt-2" : void 0, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "pb-1 type-title text-foreground", children: title }) : null,
+    children
+  ] });
+}
+
+// settings/react/InputCapabilitiesEditor.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var GATE_META = {
   image_urls: {
     label: "Image URLs",
     description: "Offer the image-URL attachment input in chat.",
-    Icon: ImageIcon
+    Icon: ImageGlyph
   },
   file_urls: {
     label: "File URLs",
     description: "Offer the file-URL attachment input in chat.",
-    Icon: FileText
+    Icon: FileTextGlyph
   },
   youtube_videos: {
     label: "YouTube videos",
     description: "Offer the YouTube-URL attachment input in chat.",
-    Icon: Youtube
+    Icon: YoutubeGlyph
   }
 };
 function InputCapabilitiesEditor({
   values,
   onChange,
-  overriddenKeys,
+  changedKeys,
   onReset,
+  resetLabel = "Reset to agent",
+  error,
   idPrefix,
   title = "Input Capabilities",
-  variant = "settings"
+  disabled = false
 }) {
-  if (variant === "menu")
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-t border-border px-3 pb-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "pb-1 pt-3 type-secondary font-medium text-muted-foreground", children: title }),
-      UI_GATE_EDITABLE_KEYS.map((key) => {
-        const { label, Icon } = GATE_META[key];
-        const overridden = overriddenKeys?.has(key) === true;
-        const switchId = `${idPrefix}-${key}`;
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "div",
-          {
-            className: cn(
-              "-mx-1.5 flex min-h-9 items-center gap-2.5 rounded-lg px-1.5 pointer-coarse:min-h-11",
-              overridden && "bg-primary/5"
-            ),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_design_system2.Label,
-                {
-                  htmlFor: switchId,
-                  className: "min-w-0 flex-1 cursor-pointer truncate text-sm font-normal text-foreground",
-                  children: label
-                }
-              ),
-              overridden && onReset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `Reset ${label} to agent default`,
-                  title: "Reset override",
-                  onClick: () => onReset(key),
-                  className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RotateCcw, { className: "h-4 w-4" })
-                }
-              ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_design_system2.Switch,
-                {
-                  id: switchId,
-                  checked: values[key] === true,
-                  onCheckedChange: (next) => onChange(key, next),
-                  className: "shrink-0"
-                }
-              )
-            ]
-          },
-          key
-        );
-      })
-    ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-t pt-2 mt-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mb-2 type-secondary font-semibold text-foreground", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-1", children: UI_GATE_EDITABLE_KEYS.map((key) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SettingsGroupSection, { id: "input-capabilities", title, children: [
+    UI_GATE_EDITABLE_KEYS.map((key) => {
       const { label, description, Icon } = GATE_META[key];
-      const checked = values[key] === true;
-      const overridden = overriddenKeys?.has(key) === true;
       const switchId = `${idPrefix}-${key}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "div",
+      const changed = changedKeys?.has(key) === true;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        SettingRowFrame,
         {
-          className: "flex items-center gap-2 rounded px-1 py-1 hover:bg-muted/20",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              import_design_system2.Label,
-              {
-                htmlFor: switchId,
-                className: "min-w-0 flex-1 cursor-pointer text-xs text-foreground",
-                children: [
-                  label,
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "block type-meta font-normal leading-tight text-muted-foreground", children: description })
-                ]
-              }
-            ),
-            overridden && onReset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_design_system2.Button,
+          rowKey: key,
+          state: values[key] === true ? "on" : "off",
+          leading: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "h-4 w-4 text-muted-foreground" }),
+          label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowLabel, { htmlFor: switchId, children: label }),
+          actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            changed && onReset ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_controls2.Button,
               {
-                variant: "ghost",
-                size: "icon",
-                className: "h-6 w-6",
-                "aria-label": `Reset ${label} to agent default`,
+                variant: "quiet",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwGlyph, {}),
                 onClick: () => onReset(key),
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RotateCcw, { className: "h-3 w-3" })
+                disabled,
+                "aria-label": `${resetLabel}: ${label}`,
+                title: resetLabel,
+                "data-setting-reset": key
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_design_system2.Switch,
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_design_system3.Switch,
               {
                 id: switchId,
-                checked,
+                checked: values[key] === true,
                 onCheckedChange: (next) => onChange(key, next),
-                className: "shrink-0 data-[state=checked]:bg-primary"
+                disabled,
+                className: "shrink-0"
               }
             )
-          ]
+          ] }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowText, { children: description })
         },
         key
       );
-    }) })
+    }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "py-1 type-meta text-destructive", children: error }) : null
+  ] });
+}
+
+// settings/react/ModelSettingsPanel.tsx
+var import_design_system4 = require("@ai-matrx/design-system");
+var import_controls3 = require("@ai-matrx/design-system/controls");
+
+// settings/settings-catalogue.ts
+var import_text_case = require("@ai-matrx/kit/text-case");
+var CONTROL_TYPES = [
+  "number",
+  "integer",
+  "boolean",
+  "string",
+  "enum",
+  "array",
+  "string_array",
+  "object_array"
+];
+function isControlDefinitionShape(value) {
+  return typeof value.type === "string" && CONTROL_TYPES.includes(value.type);
+}
+var TEXT_GROUP = [
+  { key: "response_format", label: "Response Format" },
+  { key: "stop_sequences", label: "Stop Sequences" },
+  { key: "temperature", label: "Temperature" },
+  { key: "max_output_tokens", label: "Max Output Tokens" },
+  { key: "top_p", label: "Top P" },
+  { key: "top_k", label: "Top K" },
+  { key: "thinking_budget", label: "Thinking Budget" },
+  { key: "thinking_level", label: "Thinking Level" },
+  { key: "reasoning_effort", label: "Reasoning Effort" },
+  { key: "reasoning_summary", label: "Reasoning Summary" },
+  // Deep Research agents: charts and images inside the report.
+  { key: "visualization", label: "Charts and Images" },
+  { key: "verbosity", label: "Verbosity" },
+  { key: "tool_choice", label: "Tool Choice" }
+];
+var FEATURE_FLAGS_GROUP = [
+  { key: "stream", label: "Stream Response" },
+  { key: "store", label: "Store Conversation" },
+  { key: "parallel_tool_calls", label: "Parallel Tool Calls" },
+  { key: "include_thoughts", label: "Include Thoughts" },
+  { key: "internal_web_search", label: "Internal Web Search" },
+  { key: "internal_url_context", label: "Internal URL Context" },
+  { key: "disable_safety_checker", label: "Disable Safety Checker" },
+  { key: "clear_thinking", label: "Clear Thinking" },
+  { key: "disable_reasoning", label: "Disable Reasoning" },
+  { key: "generate_audio", label: "Generate Audio" },
+  { key: "enhance_prompt", label: "Enhance Prompt" },
+  { key: "include_rai_reason", label: "Include RAI Reason" }
+];
+var IMAGE_VIDEO_GROUP = [
+  { key: "size", label: "Size" },
+  { key: "quality", label: "Quality" },
+  { key: "count", label: "Count" },
+  { key: "steps", label: "Steps" },
+  { key: "guidance_scale", label: "Guidance Scale" },
+  { key: "seed", label: "Seed" },
+  { key: "width", label: "Width" },
+  { key: "height", label: "Height" },
+  { key: "fps", label: "FPS" },
+  { key: "seconds", label: "Duration (s) [legacy string]" },
+  { key: "output_quality", label: "Output Quality" },
+  { key: "negative_prompt", label: "Negative Prompt" },
+  { key: "aspect_ratio", label: "Aspect Ratio" },
+  { key: "ratio", label: "Aspect Ratio (Together/Runway)" },
+  { key: "resolution", label: "Resolution" },
+  { key: "image_size", label: "Image Size" },
+  { key: "num_outputs", label: "Outputs" },
+  { key: "number_of_images", label: "Number of Images" },
+  { key: "render_quality", label: "Render Quality" },
+  { key: "background", label: "Background" },
+  { key: "input_fidelity", label: "Input Fidelity" },
+  { key: "output_compression", label: "Output Compression" },
+  { key: "moderation", label: "Moderation" },
+  { key: "partial_images", label: "Partial Images" },
+  { key: "output_mime_type", label: "Output MIME Type" },
+  { key: "person_generation", label: "Person Generation" },
+  { key: "image_format", label: "Image Format" },
+  { key: "style", label: "Style" },
+  { key: "reference_strength", label: "Reference Strength" },
+  { key: "duration_seconds", label: "Duration (s)" },
+  { key: "duration", label: "Duration" },
+  { key: "encode_quality", label: "Encode Quality" },
+  { key: "video_action", label: "Video Action" },
+  { key: "reference_images", label: "Reference Images" },
+  { key: "frame_images", label: "Frame Images" },
+  { key: "image_loras", label: "Image LoRAs" }
+];
+var AUDIO_GROUP = [
+  { key: "tts_voice", label: "Voice" },
+  { key: "performance_direction", label: "Performance Direction" },
+  { key: "speech_speed", label: "Speed" },
+  { key: "turn_pause_ms", label: "Pause Between Turns (ms)" },
+  { key: "language_code", label: "Language" },
+  { key: "audio_format", label: "Audio Format" }
+];
+var SETTINGS_CATALOGUE = [
+  { id: "text", label: "", entries: TEXT_GROUP },
+  { id: "featureFlags", label: "Feature Flags", entries: FEATURE_FLAGS_GROUP },
+  { id: "imageVideo", label: "Image / Video Settings", entries: IMAGE_VIDEO_GROUP },
+  { id: "audio", label: "Audio Settings", entries: AUDIO_GROUP }
+];
+var CATALOGUE_KEYS = new Set(
+  SETTINGS_CATALOGUE.flatMap((g) => g.entries.map((e) => e.key))
+);
+var CATCHALL_EXCLUDED = /* @__PURE__ */ new Set([
+  "rawControls",
+  "unmappedControls",
+  "model_id",
+  "model",
+  // chosen via the dedicated model picker, never a generic settings row
+  "multi_speaker",
+  // edited via the Voice editor alongside tts_voice
+  // Model-gated UI flags live in the ui_gates column + UiGatesEditor, never as
+  // settings rows — even when the model declares them as controls (e.g. every
+  // model now declares `tools` for the tool-support capability).
+  ...UI_GATE_KEYS
+]);
+function lookupControl(controls, key) {
+  if (!controls) return null;
+  if (CATCHALL_EXCLUDED.has(key)) {
+    if (key === "rawControls" || key === "unmappedControls") return null;
+  }
+  const candidate = controls[key];
+  if (candidate && typeof candidate === "object" && !Array.isArray(candidate)) {
+    const c = candidate;
+    if (isControlDefinitionShape(c)) {
+      return c;
+    }
+  }
+  return null;
+}
+function hasMeaningfulValue(settings, key) {
+  if (!settings) return false;
+  const v = settings[key];
+  return v !== void 0 && v !== null;
+}
+function buildSettingsRows(controls, settings) {
+  const groups = SETTINGS_CATALOGUE.map((group) => ({
+    id: group.id,
+    label: group.label,
+    rows: group.entries.flatMap((entry) => {
+      const control = lookupControl(controls, entry.key);
+      if (!control) return [];
+      return [
+        {
+          key: entry.key,
+          label: entry.label,
+          group: group.id,
+          control,
+          supported: true,
+          hasValue: hasMeaningfulValue(settings, entry.key)
+        }
+      ];
+    })
+  }));
+  const declaredExtra = [];
+  if (controls) {
+    for (const key of Object.keys(controls)) {
+      if (CATALOGUE_KEYS.has(key) || CATCHALL_EXCLUDED.has(key)) continue;
+      if (lookupControl(controls, key)) declaredExtra.push(key);
+    }
+  }
+  if (declaredExtra.length > 0) {
+    const rows = declaredExtra.sort().map((key) => ({
+      key,
+      label: (0, import_text_case.humanizeIdentifier)(key),
+      group: "other",
+      control: lookupControl(controls, key),
+      supported: true,
+      hasValue: hasMeaningfulValue(settings, key)
+    }));
+    groups.push({ id: "other", label: "Other Settings", rows });
+  }
+  return groups;
+}
+
+// settings/react/ModelSettingsPanel.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function StatusGlyph({ issue, source }) {
+  const title = issue ? issue.message : source ? `Valid \xB7 ${source}` : "Valid";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      className: cn("inline-flex h-7 w-6 shrink-0 items-center justify-center", issue ? "text-warning" : "text-success"),
+      role: "img",
+      "aria-label": title,
+      title,
+      children: issue ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TriangleAlertGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CircleCheckGlyph, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
+function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
+  const read = target.read(row.key, control);
+  const resetLabel = target.resetLabel ?? "Reset to agent";
+  const reset = read.changedHere && target.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_controls3.Button,
+    {
+      variant: "quiet",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RotateCcwGlyph, {}),
+      onClick: () => target.resetToInherited?.(row.key),
+      disabled,
+      "aria-label": `${resetLabel}: ${row.label}`,
+      title: resetLabel,
+      "data-setting-reset": row.key
+    }
+  ) : null;
+  if (read.state === "bound") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SettingRowFrame,
+      {
+        rowKey: row.key,
+        state: "bound",
+        leading: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system4.Checkbox, { checked: true, disabled: true, "aria-label": `${row.label} is a run input` }),
+        label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { children: row.label }),
+        actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          reset,
+          target.unbind ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_controls3.Button,
+            {
+              variant: "quiet",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UnlinkGlyph, {}),
+              onClick: () => target.unbind?.(row.key, control),
+              disabled,
+              "aria-label": `Make ${row.label} a fixed setting`,
+              title: "Make a fixed setting"
+            }
+          ) : null
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex min-h-7 min-w-0 items-center gap-2", "data-bound-control": row.key, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Chip, { tone: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VariableGlyph, {}), label: `{{${read.variableName}}}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate type-meta text-muted-foreground", children: read.value === void 0 || read.value === null || read.value === "" ? "Model default" : formatSettingValue(read.value) })
+        ] })
+      }
+    );
+  }
+  const isSet = read.state === "set";
+  const value = isSet ? read.value : void 0;
+  const isOff = isSet && isOffValue(value, control);
+  const checkboxId = `${idPrefix}-setting-${row.key}`;
+  const canBind = Boolean(target.bind) && (target.canBind?.(row.key) ?? true);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SettingRowFrame,
+    {
+      rowKey: row.key,
+      state: isOff ? "off" : read.state,
+      leading: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_design_system4.Checkbox,
+        {
+          id: checkboxId,
+          checked: isSet,
+          disabled,
+          onCheckedChange: (next) => next === true ? target.turnOn(row.key, control) : target.clear(row.key)
+        }
+      ),
+      label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { htmlFor: checkboxId, muted: !isSet, children: row.label }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusGlyph, { issue: read.issue, source: read.source }),
+        canBind ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_controls3.Button,
+          {
+            variant: "quiet",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VariableGlyph, {}),
+            onClick: () => target.bind?.(row.key, control),
+            disabled,
+            "aria-label": `Make ${row.label} a run input`,
+            title: "Make a run input",
+            "data-bind-control": row.key
+          }
+        ) : null,
+        isSet && read.issue?.fixable && target.fix ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_controls3.Button,
+          {
+            variant: "quiet",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WrenchGlyph, {}),
+            onClick: () => target.fix?.(row.key),
+            disabled,
+            "aria-label": `Fix ${row.label} automatically`,
+            title: "Fix automatically"
+          }
+        ) : null,
+        reset,
+        isSet ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_controls3.Button,
+          {
+            variant: "quiet",
+            removes: true,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Trash2Glyph, {}),
+            onClick: () => target.clear(row.key),
+            disabled,
+            "aria-label": `Clear ${row.label} to not set`,
+            title: "Clear to not set",
+            "data-setting-clear": row.key
+          }
+        ) : null
+      ] }),
+      children: isSet ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          SettingControlInput,
+          {
+            settingKey: row.key,
+            control,
+            value,
+            onChange: (next) => target.change(row.key, next, control),
+            disabled,
+            id: `${idPrefix}-control-${row.key}`
+          }
+        ),
+        read.issue ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "pt-1 type-meta text-warning-ink", children: read.issue.message }) : null
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowText, { children: read.modelDefault !== void 0 && read.modelDefault !== null ? `Not set \xB7 Model default: ${formatSettingValue(read.modelDefault)}` : "Not set" })
+    }
+  );
+}
+function ExtraSettingRow({ rowKey, label, value, kind, onClear, onReset, resetLabel = "Reset to agent", disabled = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SettingRowFrame,
+    {
+      rowKey,
+      state: kind,
+      label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { children: label }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        kind === "translated" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Chip, { tone: "sky", label: "Translated", title: "Kept as set and sent as this model's closest equivalent" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Chip, { tone: "warning", label: "Not on this model", title: "This model has no such setting" }),
+        onReset ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RotateCcwGlyph, {}), onClick: onReset, disabled, "aria-label": `${resetLabel}: ${label}`, title: resetLabel }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Trash2Glyph, {}), onClick: onClear, disabled, "aria-label": `Clear ${label}`, title: "Clear to not set" })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowText, { mono: true, children: isOffValue(value, null) ? "Off" : formatSettingValue(value) })
+    }
+  );
+}
+function ModelSettingsPanel({
+  controls,
+  values,
+  target,
+  idPrefix,
+  model,
+  notices,
+  renderRow,
+  capabilities,
+  emptyNote,
+  disabled = false
+}) {
+  const groups = controls ? buildSettingsRows(controls, values).filter((group) => group.rows.length > 0) : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-model-settings-panel": "", className: "@container flex min-w-0 flex-col", children: [
+    model ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingRowFrame, { rowKey: "model", label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { children: "Model" }), children: model }) : null,
+    notices,
+    groups.length === 0 && emptyNote ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "py-2 type-secondary text-muted-foreground", children: emptyNote }) : null,
+    groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingsGroupSection, { id: group.id, title: group.label || void 0, children: group.rows.map((row) => {
+      const custom = renderRow?.(row);
+      if (custom !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: custom }, row.key);
+      if (!row.control) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ModelSettingRow,
+        {
+          row,
+          control: row.control,
+          target,
+          idPrefix,
+          disabled
+        },
+        row.key
+      );
+    }) }, group.id)),
+    capabilities ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      InputCapabilitiesEditor,
+      {
+        values: capabilities.values,
+        onChange: capabilities.change,
+        changedKeys: capabilities.changedKeys,
+        onReset: capabilities.resetToInherited,
+        resetLabel: target.resetLabel,
+        error: capabilities.error,
+        idPrefix: `${idPrefix}-capability`,
+        disabled
+      }
+    ) : null
   ] });
 }