@ai-matrx/agents 0.59.213 → 0.59.215

package/dist/settings/react/index.cjs

@@ -427,116 +427,59 @@ var import_design_system2 = require("@ai-matrx/design-system");
 var import_controls = require("@ai-matrx/design-system/controls");
 
 // settings/react/settings-icons.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Svg({ className, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.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 CircleCheckGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m16 9-5.5 5.5L8 12" })
-] });
-var TriangleAlertGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("path", { d: "M12 9v4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
-] });
-var VariableGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 21s-4-3-4-9 4-9 4-9" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 3s4 3 4 9-4 9-4 9" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "15", x2: "9", y1: "9", y2: "15" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "9", x2: "15", y1: "9", y2: "15" })
-] });
-var UnlinkGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "5" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", x2: "5", y1: "8", y2: "8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", x2: "16", y1: "19", y2: "22" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "19", x2: "22", y1: "16", y2: "16" })
-] });
-var WrenchGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Svg, { className, children: /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 11v6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 11v6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 6h18" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
-] });
-var RotateCcwGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("path", { d: "M3 3v5h5" })
-] });
-var ImageGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
-] });
-var FileTextGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 9H8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 13H8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 17H8" })
-] });
-var YoutubeGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("path", { d: "m10 15 5-3-5-3z" })
-] });
+var import_icons = require("@ai-matrx/design-system/icons");
+var sized = (Glyph) => Glyph;
+var CircleCheckGlyph = sized(import_icons.CircleCheckIcon);
+var TriangleAlertGlyph = sized(import_icons.AlertTriangleIcon);
+var VariableGlyph = sized(import_icons.VariableIcon);
+var UnlinkGlyph = sized(import_icons.UnlinkIcon);
+var WrenchGlyph = sized(import_icons.WrenchIcon);
+var Trash2Glyph = sized(import_icons.Trash2Icon);
+var RotateCcwGlyph = sized(import_icons.RotateCcwIcon);
+var ImageGlyph = sized(import_icons.ImageIcon);
+var FileTextGlyph = sized(import_icons.FileTextIcon);
+var YoutubeGlyph = sized(import_icons.YoutubeIcon);
 
 // settings/react/SettingRowFrame.tsx
 var import_design_system = require("@ai-matrx/design-system");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var cn = (...parts) => parts.filter(Boolean).join(" ");
+var import_cn = require("@ai-matrx/design-system/cn");
+var import_jsx_runtime = require("react/jsx-runtime");
 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_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime2.jsx)("div", { className: "flex h-7 items-center", children: leading }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex min-h-7 min-w-0 items-center", children: label }),
-        children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("div", { className: "col-start-3 row-start-1 flex min-h-7 items-center justify-end @md:col-start-4", children: actions })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-7 items-center", children: leading }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex min-h-7 min-w-0 items-center", children: label }),
+        children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime2.jsx)(import_design_system.Label, { htmlFor, className: cn("min-w-0 truncate type-body", muted ? "text-muted-foreground" : "text-foreground"), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Label, { htmlFor, className: (0, import_cn.cn)("min-w-0 truncate type-body", muted ? "text-muted-foreground" : "text-foreground"), children });
 }
 function RowText({ children, mono }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("flex min-h-7 items-center truncate type-secondary text-muted-foreground", mono && "font-mono"), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.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_runtime2.jsxs)("section", { "data-settings-group": id, className: title ? "mt-2 border-t border-border pt-2" : void 0, children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "pb-1 type-title text-foreground", children: title }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "data-settings-group": id, className: title ? "mt-2 border-t border-border pt-2" : void 0, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "pb-1 type-title text-foreground", children: title }) : null,
     children
   ] });
 }
 
 // settings/react/InputCapabilitiesEditor.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var GATE_META = {
   image_urls: {
     label: "Image URLs",
@@ -565,24 +508,24 @@ function InputCapabilitiesEditor({
   title = "Input Capabilities",
   disabled = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SettingsGroupSection, { id: "input-capabilities", title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SettingsGroupSection, { id: "input-capabilities", title, children: [
     UI_GATE_EDITABLE_KEYS.map((key) => {
       const { label, description, Icon } = GATE_META[key];
       const switchId = `${idPrefix}-${key}`;
       const changed = changedKeys?.has(key) === true;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         SettingRowFrame,
         {
           rowKey: key,
           state: values[key] === true ? "on" : "off",
-          leading: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "h-4 w-4 text-muted-foreground" }),
-          label: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RowLabel, { htmlFor: switchId, children: label }),
-          actions: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            changed && onReset ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          leading: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "h-4 w-4 text-muted-foreground" }),
+          label: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RowLabel, { htmlFor: switchId, children: label }),
+          actions: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            changed && onReset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_controls.Button,
               {
                 variant: "quiet",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RotateCcwGlyph, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RotateCcwGlyph, {}),
                 onClick: () => onReset(key),
                 disabled,
                 "aria-label": `${resetLabel}: ${label}`,
@@ -590,7 +533,7 @@ function InputCapabilitiesEditor({
                 "data-setting-reset": key
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_controls.Switch,
               {
                 id: switchId,
@@ -600,12 +543,12 @@ function InputCapabilitiesEditor({
               }
             )
           ] }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RowText, { children: description })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RowText, { children: description })
         },
         key
       );
     }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.ErrorBox, { as: "p", className: "py-1 type-meta text-destructive", message: error }) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.ErrorBox, { as: "p", className: "py-1 type-meta text-destructive", message: error }) : null
   ] });
 }
 
@@ -613,7 +556,7 @@ function InputCapabilitiesEditor({
 var import_react = require("react");
 var import_design_system3 = require("@ai-matrx/design-system");
 var import_controls2 = require("@ai-matrx/design-system/controls");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var SELECT_MAX_OPTIONS = 12;
 function choiceFor(options) {
   if ((0, import_controls2.isAspectRatioOptionSet)(options)) return "aspect-ratio";
@@ -621,10 +564,10 @@ function choiceFor(options) {
   return "select";
 }
 function WarningIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 17h.01" })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("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: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 17h.01" })
   ] });
 }
 function flattenTypeObject(value) {
@@ -648,7 +591,7 @@ function SettingControlInput({
     const isValueMismatch = stringValue !== "" && !control.enum.includes(stringValue);
     const emit = (v) => onChange(settingKey === "response_format" ? { type: v } : v);
     const choice = choiceFor(control.enum);
-    const picker = choice === "aspect-ratio" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    const picker = choice === "aspect-ratio" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_controls2.AspectRatioSelect,
       {
         value: isValueMismatch ? "" : stringValue,
@@ -659,7 +602,7 @@ function SettingControlInput({
         id: inputId,
         placeholder: "Default"
       }
-    ) : choice === "searchable" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ) : choice === "searchable" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_controls2.OptionCombobox,
       {
         value: isValueMismatch ? "" : stringValue,
@@ -671,23 +614,23 @@ function SettingControlInput({
         placeholder: "Default"
       }
     ) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-1 items-center gap-1.5", children: [
-      picker ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-1 items-center gap-1.5", children: [
+      picker ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         import_design_system3.Select,
         {
           value: isValueMismatch ? "" : stringValue,
           onValueChange: emit,
           disabled,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_design_system3.SelectTrigger,
               {
                 id: inputId,
                 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_runtime4.jsx)(import_design_system3.SelectValue, { placeholder: isValueMismatch ? stringValue : "Default" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.SelectValue, { placeholder: isValueMismatch ? stringValue : "Default" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.SelectContent, { className: "text-xs", children: control.enum.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.SelectContent, { className: "text-xs", children: control.enum.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_design_system3.SelectItem,
               {
                 value: option,
@@ -699,9 +642,9 @@ function SettingControlInput({
           ]
         }
       ),
-      isValueMismatch && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 cursor-help text-amber-500", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WarningIcon, { className: "h-3.5 w-3.5" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.TooltipContent, { side: "top", className: "max-w-[220px] type-secondary", children: [
+      isValueMismatch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system3.Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 cursor-help text-amber-500", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WarningIcon, { className: "h-3.5 w-3.5" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system3.TooltipContent, { side: "top", className: "max-w-[220px] type-secondary", children: [
           '"',
           stringValue,
           '" is not a recognized option for this model'
@@ -710,8 +653,8 @@ function SettingControlInput({
     ] });
   }
   if (control.type === "boolean") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_design_system3.Checkbox,
         {
           id: inputId,
@@ -721,7 +664,7 @@ function SettingControlInput({
           className: "cursor-pointer"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_design_system3.Label,
         {
           htmlFor: inputId,
@@ -734,7 +677,7 @@ function SettingControlInput({
   if (control.type === "number" || control.type === "integer") {
     const numeric = typeof value === "number" ? value : void 0;
     const hasRange = control.min !== void 0 && control.max !== void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       NumberInput,
       {
         value: numeric,
@@ -752,7 +695,7 @@ function SettingControlInput({
   }
   if (control.type === "string_array") {
     const arrayValue = Array.isArray(value) ? value.join("\n") : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_design_system3.Textarea,
       {
         id: inputId,
@@ -765,7 +708,7 @@ function SettingControlInput({
     );
   }
   if (control.type === "array" || control.type === "object_array" || typeof value === "object" && value !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       JsonValueInput,
       {
         id: inputId,
@@ -775,7 +718,7 @@ function SettingControlInput({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_design_system3.Input,
     {
       id: inputId,
@@ -800,8 +743,8 @@ function JsonValueInput({
     setDraft(toText(value));
     setJsonError(null);
   }, [JSON.stringify(value)]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_design_system3.Textarea,
       {
         id,
@@ -828,7 +771,7 @@ function JsonValueInput({
         spellCheck: false
       }
     ),
-    jsonError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "type-meta text-amber-600 dark:text-amber-400", children: jsonError })
+    jsonError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "type-meta text-amber-600 dark:text-amber-400", children: jsonError })
   ] });
 }
 function NumberInput({
@@ -862,12 +805,12 @@ function NumberInput({
     } else setDraft(shown);
   };
   if (withSlider) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         className: "grid grid-cols-[1fr_4.5rem] items-center gap-2",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_design_system3.Slider,
             {
               ...min !== void 0 ? { min } : {},
@@ -885,7 +828,7 @@ function NumberInput({
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_design_system3.Input,
             {
               type: "text",
@@ -906,7 +849,7 @@ function NumberInput({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_design_system3.Input,
     {
       type: "text",
@@ -926,28 +869,28 @@ function NumberInput({
 }
 
 // settings/react/ModelSettingsPanel.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     {
-      className: cn("inline-flex h-7 w-6 shrink-0 items-center justify-center", issue ? "text-warning" : "text-success"),
+      className: (0, import_cn.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" })
+      children: issue ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TriangleAlertGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime4.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)(
+  const reset = read.changedHere && target.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_controls3.Button,
     {
       variant: "quiet",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RotateCcwGlyph, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwGlyph, {}),
       onClick: () => target.resetToInherited?.(row.key),
       disabled,
       "aria-label": `${resetLabel}: ${row.label}`,
@@ -956,20 +899,20 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
     }
   ) : null;
   if (read.state === "bound") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.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: [
+        leading: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Checkbox, { checked: true, disabled: true, "aria-label": `${row.label} is a run input` }),
+        label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowLabel, { children: row.label }),
+        actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
           reset,
-          target.unbind ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          target.unbind ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             import_controls3.Button,
             {
               variant: "quiet",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UnlinkGlyph, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UnlinkGlyph, {}),
               onClick: () => target.unbind?.(row.key, control),
               disabled,
               "aria-label": `Make ${row.label} a fixed setting`,
@@ -977,9 +920,9 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
             }
           ) : 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) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-h-7 min-w-0 items-center gap-2", "data-bound-control": row.key, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls3.Chip, { tone: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VariableGlyph, {}), label: `{{${read.variableName}}}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate type-meta text-muted-foreground", children: read.value === void 0 || read.value === null || read.value === "" ? "Model default" : formatSettingValue(read.value) })
         ] })
       }
     );
@@ -989,12 +932,12 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     SettingRowFrame,
     {
       rowKey: row.key,
       state: isOff ? "off" : read.state,
-      leading: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      leading: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_design_system4.Checkbox,
         {
           id: checkboxId,
@@ -1003,14 +946,14 @@ function ModelSettingRow({ row, control, target, idPrefix, 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)(
+      label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowLabel, { htmlFor: checkboxId, muted: !isSet, children: row.label }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StatusGlyph, { issue: read.issue, source: read.source }),
+        canBind ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_controls3.Button,
           {
             variant: "quiet",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VariableGlyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VariableGlyph, {}),
             onClick: () => target.bind?.(row.key, control),
             disabled,
             "aria-label": `Make ${row.label} a run input`,
@@ -1018,11 +961,11 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
             "data-bind-control": row.key
           }
         ) : null,
-        isSet && read.issue?.fixable && target.fix ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isSet && read.issue?.fixable && target.fix ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_controls3.Button,
           {
             variant: "quiet",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WrenchGlyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WrenchGlyph, {}),
             onClick: () => target.fix?.(row.key),
             disabled,
             "aria-label": `Fix ${row.label} automatically`,
@@ -1030,12 +973,12 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
           }
         ) : null,
         reset,
-        isSet ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isSet ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_controls3.Button,
           {
             variant: "quiet",
             removes: true,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Trash2Glyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Trash2Glyph, {}),
             onClick: () => target.clear(row.key),
             disabled,
             "aria-label": `Clear ${row.label} to not set`,
@@ -1044,8 +987,8 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
           }
         ) : null
       ] }),
-      children: isSet ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: isSet ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           SettingControlInput,
           {
             settingKey: row.key,
@@ -1056,40 +999,40 @@ function ModelSettingRow({ row, control, target, idPrefix, 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" })
+        read.issue ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "pt-1 type-meta text-warning-ink", children: read.issue.message }) : null
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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, "data-setting-reset": rowKey }) : /* @__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", "data-setting-clear": rowKey })
+      label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowLabel, { children: label }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        kind === "translated" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls3.Chip, { tone: "sky", label: "Translated", title: "Kept as set and sent as this model's closest equivalent" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls3.Chip, { tone: "warning", label: "Not on this model", title: "This model has no such setting" }),
+        onReset ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls3.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwGlyph, {}), onClick: onReset, disabled, "aria-label": `${resetLabel}: ${label}`, title: resetLabel, "data-setting-reset": rowKey }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls3.Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Trash2Glyph, {}), onClick: onClear, disabled, "aria-label": `Clear ${label}`, title: "Clear to not set", "data-setting-clear": rowKey })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowText, { mono: value !== void 0 && value !== null, children: value === void 0 || value === null ? "Not set" : isOffValue(value, null) ? "Off" : formatSettingValue(value) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowText, { mono: value !== void 0 && value !== null, children: value === void 0 || value === null ? "Not set" : isOffValue(value, null) ? "Off" : formatSettingValue(value) })
     }
   );
 }
 function ModelRow({ model, resetLabel, idPrefix, disabled }) {
   const off = disabled || model.disabled === true;
   const oneMessageId = `${idPrefix}-model-one-message`;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     SettingRowFrame,
     {
       rowKey: "model",
       state: model.value ? "set" : "unset",
-      label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { children: "Model" }),
-      actions: model.changedHere && model.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowLabel, { children: "Model" }),
+      actions: model.changedHere && model.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_controls3.Button,
         {
           variant: "quiet",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RotateCcwGlyph, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwGlyph, {}),
           onClick: () => model.resetToInherited?.(),
           disabled: off,
           "aria-label": `${resetLabel}: Model`,
@@ -1097,8 +1040,8 @@ function ModelRow({ model, resetLabel, idPrefix, disabled }) {
           "data-setting-reset": "model"
         }
       ) : null,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-h-7 min-w-0 flex-wrap items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-h-7 min-w-0 flex-wrap items-center gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_react2.ModelListDropdown,
           {
             "aria-label": "Model",
@@ -1114,8 +1057,8 @@ function ModelRow({ model, resetLabel, idPrefix, disabled }) {
             ...model.disabledTitle ? { disabledTitle: model.disabledTitle } : {}
           }
         ),
-        model.oneMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: oneMessageId, className: "flex min-h-7 items-center gap-1 type-secondary text-muted-foreground", title: "Use this model for the next message, then go back", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        model.oneMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { htmlFor: oneMessageId, className: "flex min-h-7 items-center gap-1 type-secondary text-muted-foreground", title: "Use this model for the next message, then go back", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             import_controls3.Switch,
             {
               id: oneMessageId,
@@ -1145,7 +1088,7 @@ function ModelSettingsPanel({
   const groups = controls ? buildSettingsRows(controls, values).filter((group) => group.rows.length > 0) : [];
   const extras = extraSettingKeys(controls, values, target.changedKeys);
   const resetLabel = target.resetLabel ?? "Reset to agent";
-  const extraRow = (key, kind) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const extraRow = (key, kind) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     ExtraSettingRow,
     {
       rowKey: key,
@@ -1159,17 +1102,17 @@ function ModelSettingsPanel({
     },
     key
   );
-  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)(ModelRow, { model, resetLabel, idPrefix, disabled }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-model-settings-panel": "", className: "@container flex min-w-0 flex-col", children: [
+    model ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModelRow, { model, resetLabel, idPrefix, disabled }) : null,
     notices,
     extras.unsupported.map((key) => extraRow(key, "unsupported")),
-    extras.translated.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingsGroupSection, { id: "translated", title: "Translated for this model", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-translated-settings": "", children: extras.translated.map((key) => extraRow(key, "translated")) }) }) : null,
-    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) => {
+    extras.translated.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SettingsGroupSection, { id: "translated", title: "Translated for this model", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-translated-settings": "", children: extras.translated.map((key) => extraRow(key, "translated")) }) }) : null,
+    groups.length === 0 && emptyNote ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "py-2 type-secondary text-muted-foreground", children: emptyNote }) : null,
+    groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.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 (custom !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: custom }, row.key);
       if (!row.control) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         ModelSettingRow,
         {
           row,
@@ -1181,7 +1124,7 @@ function ModelSettingsPanel({
         row.key
       );
     }) }, group.id)),
-    capabilities ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    capabilities ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       InputCapabilitiesEditor,
       {
         values: capabilities.values,