@ai-matrx/agents 0.59.233 → 0.59.235

package/dist/settings/react/index.cjs

@@ -23,9 +23,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   ModelSettingsPanel: () => ModelSettingsPanel,
-  SettingRowFrame: () => SettingRowFrame,
-  SettingRowLabel: () => RowLabel,
-  formatSettingValue: () => formatSettingValue,
   useEffectiveSettings: () => useEffectiveSettings,
   useSettingsEntry: () => useSettingsEntry,
   useSettingsSelector: () => useSettingsSelector
@@ -210,7 +207,7 @@ function readEffectiveSettings(entry) {
 
 // settings/react/ModelSettingsPanel.tsx
 var import_design_system4 = require("@ai-matrx/design-system");
-var import_controls3 = require("@ai-matrx/design-system/controls");
+var import_controls4 = require("@ai-matrx/design-system/controls");
 var import_react2 = require("@ai-matrx/agents/models/react");
 
 // settings/settings-catalogue.ts
@@ -326,6 +323,9 @@ var CATCHALL_EXCLUDED = /* @__PURE__ */ new Set([
   // model now declares `tools` for the tool-support capability).
   ...UI_GATE_KEYS
 ]);
+function settingControl(controls, key) {
+  return lookupControl(controls, key);
+}
 function lookupControl(controls, key) {
   if (!controls) return null;
   if (CATCHALL_EXCLUDED.has(key)) {
@@ -868,29 +868,142 @@ function NumberInput({
   );
 }
 
-// settings/react/ModelSettingsPanel.tsx
+// settings/react/VoiceSettingControl.tsx
+var import_controls3 = require("@ai-matrx/design-system/controls");
+var import_icons2 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function speakersOf(value, voices) {
+  if (!Array.isArray(value)) return [];
+  return value.map((entry, index) => {
+    const record = entry !== null && typeof entry === "object" ? entry : {};
+    return {
+      name: typeof record.name === "string" ? record.name : `Speaker ${index + 1}`,
+      voice: typeof record.voice === "string" ? record.voice : voices[0] ?? ""
+    };
+  });
+}
+function VoiceSettingControl({ voices, value, multiSpeaker, onChange, idPrefix, disabled = false }) {
+  const isMulti = Array.isArray(value);
+  const speakers = speakersOf(value, voices);
+  const single = typeof value === "string" && value ? value : voices[0] ?? "";
+  const max = multiSpeaker?.max !== void 0 && multiSpeaker.max > 0 ? multiSpeaker.max : void 0;
+  const canAdd = max === void 0 || speakers.length < max;
+  const options = voices.map((voice) => ({ value: voice, label: voice }));
+  const voiceSelect = (current, label, pick) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_controls3.Select,
+    {
+      value: current,
+      options: options.some((o) => o.value === current) ? options : [{ value: current, label: current }, ...options],
+      onValueChange: pick,
+      "aria-label": label,
+      disabled,
+      className: "min-w-0"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", "data-voice-control": "", children: [
+    multiSpeaker || isMulti ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_controls3.SegmentedControl,
+      {
+        "aria-label": "Voices",
+        value: isMulti ? "multi" : "single",
+        onValueChange: (next) => {
+          if (next === "multi" && !isMulti) {
+            onChange(
+              [
+                { name: "Speaker 1", voice: single },
+                { name: "Speaker 2", voice: voices[1] ?? single }
+              ],
+              true
+            );
+          } else if (next === "single" && isMulti) {
+            onChange(speakers[0]?.voice || voices[0] || "", false);
+          }
+        },
+        data: [
+          { value: "single", label: "One voice", disabled },
+          { value: "multi", label: "Speakers", disabled: disabled || !multiSpeaker }
+        ]
+      }
+    ) : null,
+    !isMulti ? voiceSelect(single, "Voice", (next) => onChange(next, false)) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      speakers.map((speaker, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-w-0 items-center gap-1", "data-speaker": index, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_controls3.Field,
+          {
+            id: `${idPrefix}-speaker-${index}`,
+            "aria-label": `Speaker ${index + 1} name`,
+            value: speaker.name,
+            onChange: (event) => onChange(
+              speakers.map((s, i) => i === index ? { ...s, name: event.target.value } : s),
+              true
+            ),
+            disabled,
+            className: "min-w-0 flex-1"
+          }
+        ),
+        voiceSelect(
+          speaker.voice,
+          `Speaker ${index + 1} voice`,
+          (next) => onChange(
+            speakers.map((s, i) => i === index ? { ...s, voice: next } : s),
+            true
+          )
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_controls3.Button,
+          {
+            variant: "quiet",
+            removes: true,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.XIcon, {}),
+            onClick: () => onChange(speakers.filter((_, i) => i !== index), true),
+            disabled: disabled || speakers.length <= 2,
+            "aria-label": `Remove speaker ${index + 1}`,
+            title: "Remove speaker"
+          }
+        )
+      ] }, index)),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_controls3.Button,
+        {
+          variant: "quiet",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.PlusIcon, {}),
+          onClick: () => onChange([...speakers, { name: `Speaker ${speakers.length + 1}`, voice: voices[0] ?? "" }], true),
+          disabled: disabled || !canAdd,
+          title: canAdd ? "Add a speaker" : `This model takes up to ${max} speakers`,
+          children: "Add speaker"
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// 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_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     {
       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_runtime4.jsx)(TriangleAlertGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CircleCheckGlyph, { className: "h-3.5 w-3.5" })
+      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 }) {
+function changeTogether(target, changes, controls) {
+  if (target.changeMany) target.changeMany(changes);
+  else for (const [key, value] of Object.entries(changes)) target.change(key, value, controls[key] ?? null);
+}
+function ModelSettingRow({ row, control, target, idPrefix, disabled, multiSpeaker }) {
   const read = target.read(row.key, control);
   const resetLabel = target.resetLabel ?? "Reset to agent";
-  const reset = read.changedHere && target.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_controls3.Button,
+  const reset = read.changedHere && target.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_controls4.Button,
     {
       variant: "quiet",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwGlyph, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RotateCcwGlyph, {}),
       onClick: () => target.resetToInherited?.(row.key),
       disabled,
       "aria-label": `${resetLabel}: ${row.label}`,
@@ -899,20 +1012,20 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
     }
   ) : null;
   if (read.state === "bound") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SettingRowFrame,
       {
         rowKey: row.key,
         state: "bound",
-        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: [
+        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_runtime4.jsx)(
-            import_controls3.Button,
+          target.unbind ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_controls4.Button,
             {
               variant: "quiet",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UnlinkGlyph, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UnlinkGlyph, {}),
               onClick: () => target.unbind?.(row.key, control),
               disabled,
               "aria-label": `Make ${row.label} a fixed setting`,
@@ -920,9 +1033,9 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
             }
           ) : null
         ] }),
-        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) })
+        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_controls4.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) })
         ] })
       }
     );
@@ -932,12 +1045,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_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     SettingRowFrame,
     {
       rowKey: row.key,
       state: isOff ? "off" : read.state,
-      leading: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      leading: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_design_system4.Checkbox,
         {
           id: checkboxId,
@@ -946,14 +1059,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_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,
+      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_controls4.Button,
           {
             variant: "quiet",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VariableGlyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VariableGlyph, {}),
             onClick: () => target.bind?.(row.key, control),
             disabled,
             "aria-label": `Make ${row.label} a run input`,
@@ -961,11 +1074,11 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
             "data-bind-control": row.key
           }
         ) : null,
-        isSet && read.issue?.fixable && target.fix ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_controls3.Button,
+        isSet && read.issue?.fixable && target.fix ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_controls4.Button,
           {
             variant: "quiet",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WrenchGlyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WrenchGlyph, {}),
             onClick: () => target.fix?.(row.key),
             disabled,
             "aria-label": `Fix ${row.label} automatically`,
@@ -973,12 +1086,12 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
           }
         ) : null,
         reset,
-        isSet ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_controls3.Button,
+        isSet ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_controls4.Button,
           {
             variant: "quiet",
             removes: true,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Trash2Glyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Trash2Glyph, {}),
             onClick: () => target.clear(row.key),
             disabled,
             "aria-label": `Clear ${row.label} to not set`,
@@ -987,8 +1100,18 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
           }
         ) : null
       ] }),
-      children: isSet ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      children: isSet && row.key === "tts_voice" && control.enum?.length && (multiSpeaker || Array.isArray(value)) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        VoiceSettingControl,
+        {
+          voices: control.enum.map(String),
+          value,
+          multiSpeaker: multiSpeaker ? { max: multiSpeaker.max } : null,
+          onChange: (voice, multi) => changeTogether(target, { tts_voice: voice, multi_speaker: multi }, { tts_voice: control, multi_speaker: multiSpeaker }),
+          idPrefix: `${idPrefix}-voice`,
+          disabled
+        }
+      ) : isSet ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           SettingControlInput,
           {
             settingKey: row.key,
@@ -999,40 +1122,40 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
             id: `${idPrefix}-control-${row.key}`
           }
         ),
-        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" })
+        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_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     SettingRowFrame,
     {
       rowKey,
       state: kind,
-      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 })
+      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_controls4.Chip, { tone: "sky", label: "Translated", title: "Kept as set and sent as this model's closest equivalent" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls4.Chip, { tone: "warning", label: "Not on this model", title: "This model has no such setting" }),
+        onReset ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls4.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_controls4.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 })
       ] }),
-      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) })
+      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) })
     }
   );
 }
 function ModelRow({ model, resetLabel, idPrefix, disabled }) {
   const off = disabled || model.disabled === true;
   const oneMessageId = `${idPrefix}-model-one-message`;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     SettingRowFrame,
     {
       rowKey: "model",
       state: model.value ? "set" : "unset",
-      label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowLabel, { children: "Model" }),
-      actions: model.changedHere && model.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_controls3.Button,
+      label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { children: "Model" }),
+      actions: model.changedHere && model.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_controls4.Button,
         {
           variant: "quiet",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwGlyph, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RotateCcwGlyph, {}),
           onClick: () => model.resetToInherited?.(),
           disabled: off,
           "aria-label": `${resetLabel}: Model`,
@@ -1040,8 +1163,8 @@ function ModelRow({ model, resetLabel, idPrefix, disabled }) {
           "data-setting-reset": "model"
         }
       ) : null,
-      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)(
+      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)(
           import_react2.ModelListDropdown,
           {
             "aria-label": "Model",
@@ -1058,9 +1181,9 @@ function ModelRow({ model, resetLabel, idPrefix, disabled }) {
             ...model.disabledTitle ? { disabledTitle: model.disabledTitle } : {}
           }
         ),
-        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,
+        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)(
+            import_controls4.Switch,
             {
               id: oneMessageId,
               checked: model.oneMessage.on,
@@ -1081,7 +1204,6 @@ function ModelSettingsPanel({
   idPrefix,
   model,
   notices,
-  renderRow,
   capabilities,
   emptyNote,
   disabled = false
@@ -1089,7 +1211,8 @@ 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_runtime4.jsx)(
+  const multiSpeaker = settingControl(controls, "multi_speaker");
+  const extraRow = (key, kind) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     ExtraSettingRow,
     {
       rowKey: key,
@@ -1103,29 +1226,28 @@ function ModelSettingsPanel({
     },
     key
   );
-  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,
+  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,
     notices,
     extras.unsupported.map((key) => extraRow(key, "unsupported")),
-    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_runtime4.jsx)("div", { children: custom }, row.key);
+    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) => {
       if (!row.control) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ModelSettingRow,
         {
           row,
           control: row.control,
           target,
           idPrefix,
-          disabled
+          disabled,
+          multiSpeaker
         },
         row.key
       );
     }) }, group.id)),
-    capabilities ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    capabilities ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       InputCapabilitiesEditor,
       {
         values: capabilities.values,

package/dist/settings/react/index.d.cts

@@ -167,49 +167,6 @@ interface SettingsStore {
     cancelModelSwitch(agentId: string): void;
 }
 
-/**
- * Model Settings Catalog — the single source of truth for the STANDARD
- * settings list, and the one chokepoint that decides which keys it contains.
- *
- * ── The model (two distinct surfaces) ────────────────────────────────────────
- *   1. STANDARD list  — ONLY the keys the selected model explicitly declares in
- *      its `controls` config (i.e. the parameters this model actually supports).
- *      `buildSettingsRows()` returns exactly these, grouped + ordered. Catalog
- *      keys the model does not declare are NOT shown here.
- *   2. CAUTION surface — settings the agent has SET that the model does NOT
- *      support. These are never hidden: they are flagged as "not valid for this
- *      model" and made repairable by the validation layer (the IssueTable, fed
- *      by the `unsupported_by_model` rule). They do NOT belong in the standard
- *      list — that is exactly the "showing all possible keys" bug.
- *
- * The catalog exists so the standard list's labels, grouping and order live
- * in ONE place (previously copy-pasted as `textModelSettings` /
- * `booleanSettings` / ... into three components, each filtering by
- * `getControl(key)` inline — which drifted and regressed). Components map over
- * `buildSettingsRows()`; they must not filter by model themselves (ESLint
- * enforces). The original recurring bug — set values silently dropped when a
- * model didn't support them — is fixed by the CAUTION surface, not by dumping
- * every key into the standard list.
- *
- * Guardrail: `settings-catalogue.test.ts` asserts the standard list contains
- * ONLY supported keys (never the full catalog), and `unsupported-by-model.
- * test.ts` asserts set-but-unsupported keys surface in the caution layer.
- */
-
-type SettingsGroupId = "text" | "featureFlags" | "imageVideo" | "audio" | "other";
-interface SettingsRow {
-    key: string;
-    label: string;
-    group: SettingsGroupId;
-    /** The model's control definition for this key. Standard rows are always
-     *  supported, so this is present; typed nullable for consumer convenience. */
-    control: ControlDefinition | null;
-    /** Always true for rows returned by buildSettingsRows (standard = supported). */
-    supported: boolean;
-    /** True when the current settings hold a non-null value for this key. */
-    hasValue: boolean;
-}
-
 /**
  * UI Gates — canonical model-gated UI flags.
  *
@@ -303,6 +260,11 @@ interface SettingsWriteTarget {
     read(key: string, control: ControlDefinition | null): SettingRowRead;
     /** The person edited the control. */
     change(key: string, value: unknown, control: ControlDefinition | null): void;
+    /**
+     * Several settings that are one choice, written together (the Voice row's `tts_voice` +
+     * `multi_speaker`). Without it the panel calls `change` once per key.
+     */
+    changeMany?(changes: Record<string, unknown>): void;
     /** The person ticked an unset row (store `startingValueFor`). */
     turnOn(key: string, control: ControlDefinition): void;
     /** The person cleared the row back to "not set". */
@@ -383,41 +345,13 @@ interface ModelSettingsPanelProps {
     model?: ModelRowTarget | undefined;
     /** Drawn between the model row and the groups: notices, the issue list. */
     notices?: ReactNode;
-    /** A row the host draws itself (the multi-speaker voice editor); `undefined` = the standard row. */
-    renderRow?: (row: SettingsRow) => ReactNode | undefined;
     /** The input capabilities group, under the settings groups. */
     capabilities?: CapabilitiesWriteTarget | undefined;
     /** Said where the rows would be when the model declares none (or no model is chosen). */
     emptyNote?: ReactNode;
     disabled?: boolean;
 }
-declare function ModelSettingsPanel({ controls, values, target, idPrefix, model, notices, renderRow, capabilities, emptyNote, disabled, }: ModelSettingsPanelProps): React.JSX.Element;
-
-/** A catalog value as the person reads it ("On", "auto", "1024"). */
-declare function formatSettingValue(value: unknown): string;
-interface SettingRowFrameProps {
-    /** `data-setting-row` — the setting key (or a host row name such as "model"). */
-    rowKey: string;
-    /** `data-setting-state` — unset | set | off | bound | translated | … */
-    state?: string;
-    /** The 16px leading column: the row's checkbox, or an icon. */
-    leading?: ReactNode;
-    label: ReactNode;
-    /** The control, or the row's value text. */
-    children?: ReactNode;
-    /** Fixed-width icons on the right: status, then actions. */
-    actions?: ReactNode;
-}
-/**
- * The one row geometry every line of the panel uses — setting rows, the model row, the
- * translated rows, the voice row and the input capabilities — so their edges line up.
- */
-declare function SettingRowFrame({ rowKey, state, leading, label, children, actions }: SettingRowFrameProps): React.JSX.Element;
-declare function RowLabel({ htmlFor, muted, children }: {
-    htmlFor?: string;
-    muted?: boolean;
-    children: ReactNode;
-}): React.JSX.Element;
+declare function ModelSettingsPanel({ controls, values, target, idPrefix, model, notices, capabilities, emptyNote, disabled, }: ModelSettingsPanelProps): React.JSX.Element;
 
 /** Subscribe to a slice of a settings store. `select` must return a stable value for unchanged state. */
 declare function useSettingsSelector<T>(store: SettingsStore, select: (state: AgentSettingsState) => T): T;
@@ -426,4 +360,4 @@ declare function useSettingsEntry(store: SettingsStore, agentId: string | null |
 /** Defaults merged with overrides for one agent; recomputed only when the entry changes. */
 declare function useEffectiveSettings(store: SettingsStore, agentId: string | null | undefined): Partial<AgentSettings>;
 
-export { ModelSettingsPanel, type ModelSettingsPanelProps, SettingRowFrame, type SettingRowFrameProps, RowLabel as SettingRowLabel, formatSettingValue, useEffectiveSettings, useSettingsEntry, useSettingsSelector };
+export { ModelSettingsPanel, type ModelSettingsPanelProps, useEffectiveSettings, useSettingsEntry, useSettingsSelector };