@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/run-controls/RunConfigOverrides.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Badge, Button } from "@ai-matrx/design-system/controls";
 import { ConfigurationTable, ConfigurationTableRow, FieldHelp } from "../../../host/ui-slots.js";
 import { useEffect, useRef, useState } from "react";
@@ -168,148 +169,194 @@ function RunConfigOverrides({
     dispatch(setOverrides({ conversationId, changes: { [key]: value } }));
   };
   const rowsLoading = groups.length === 0 && !!effectiveModelId && !isFull && !modelDetailError;
-  return /* @__PURE__ */ React.createElement("div", { className: structured ? "min-w-0" : "border-t border-border" }, modelDetailError ? /* @__PURE__ */ React.createElement(
-    ErrorBox,
-    {
-      as: "div",
-      className: "flex items-center gap-2 px-3 py-2 text-sm",
-      message: "Model controls unavailable",
-      error: modelDetailError,
-      operation: "Load model controls",
-      origin: "chat/RunConfigOverrides"
-    },
-    /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-4 w-4 text-destructive" }),
-    /* @__PURE__ */ React.createElement("span", null, "Model controls unavailable"),
-    /* @__PURE__ */ React.createElement(FieldHelp, { label: "Model controls unavailable" }, modelDetailError),
-    /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "outline",
-        onClick: () => {
-          getModelRecords().retryModel(effectiveModelId);
-          void getModelRecords().loadModel(effectiveModelId);
-        }
-      },
-      "Retry"
-    )
-  ) : null, structured ? /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-between px-3 pb-1 pt-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-sm font-semibold text-foreground" }, "Model parameter overrides"), /* @__PURE__ */ React.createElement("span", { className: "text-xs text-foreground" }, "Overrides: ", overriddenCount)) : /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center gap-1.5 px-3 pb-1 pt-3" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-muted-foreground" }, w.heading), /* @__PURE__ */ React.createElement(InfoHint, { text: w.scopeNote, label: `About ${w.heading}` }), overriddenCount > 0 ? /* @__PURE__ */ React.createElement("span", { className: "ml-auto text-xs text-muted-foreground" }, overriddenCount, " changed") : null), /* @__PURE__ */ React.createElement(Tabs, { value: editorTab, onValueChange: setEditorTab }, structured && /* @__PURE__ */ React.createElement(TabsList, { className: "mx-3 mb-2", "aria-label": "Model override editor" }, /* @__PURE__ */ React.createElement(TabsTrigger, { value: "controls" }, "Controls"), /* @__PURE__ */ React.createElement(TabsTrigger, { value: "advanced" }, "Advanced")), /* @__PURE__ */ React.createElement(TabsContent, { value: "controls", className: "mt-0" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: structured ? "flex flex-col gap-2.5 px-3 pb-3" : "flex flex-col gap-1 px-3 pb-3"
-    },
-    structured && /* @__PURE__ */ React.createElement(OverrideRows, { structured: true, label: "Model" }, /* @__PURE__ */ React.createElement(
-      ConfigurationTableRow,
+  return /* @__PURE__ */ jsxs("div", { className: structured ? "min-w-0" : "border-t border-border", children: [
+    modelDetailError ? /* @__PURE__ */ jsxs(
+      ErrorBox,
       {
-        columns: OVERRIDE_COLUMNS,
-        cells: {
-          setting: /* @__PURE__ */ React.createElement("span", { className: "font-semibold" }, "Model"),
-          source: removals.includes("model") || modelChoiceOverridden ? overrideSource : inheritedSources?.model ?? (base.model != null ? baselineSourceLabel : "Model default"),
-          state: removals.includes("model") ? nullDefaults ? baselineDefaultLabel : "Removed" : modelChoiceOverridden ? "Overridden" : "Inherited",
-          value: /* @__PURE__ */ React.createElement(
-            ModelListDropdown,
+        as: "div",
+        className: "flex items-center gap-2 px-3 py-2 text-sm",
+        message: "Model controls unavailable",
+        error: modelDetailError,
+        operation: "Load model controls",
+        origin: "chat/RunConfigOverrides",
+        children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }),
+          /* @__PURE__ */ jsx("span", { children: "Model controls unavailable" }),
+          /* @__PURE__ */ jsx(FieldHelp, { label: "Model controls unavailable", children: modelDetailError }),
+          /* @__PURE__ */ jsx(
+            Button,
             {
-              value: effectiveModelId || null,
-              onValueChange: (model) => handleChange("model", null, model),
-              pinnedOfferingId,
-              onOfferingPinChange: (offeringId) => dispatch(setOfferingPin({ conversationId, offeringId })),
-              onClear: () => dispatch(resetModelChoice(conversationId)),
-              emptyOptionLabel: w.modelEmptyChoiceLabel ?? DEFAULT_MODEL_EMPTY_CHOICE_LABEL,
-              placeholder: w.modelEmptyChoiceLabel ?? DEFAULT_MODEL_EMPTY_CHOICE_LABEL,
-              inputModalities: [],
-              outputModalities: ["text"],
-              disabled
+              variant: "outline",
+              onClick: () => {
+                getModelRecords().retryModel(effectiveModelId);
+                void getModelRecords().loadModel(effectiveModelId);
+              },
+              children: "Retry"
             }
           )
-        }
+        ]
       }
-    )),
-    orphanedKeys.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 rounded-lg border border-amber-500/40 bg-amber-500/10 px-2 py-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1.5 text-xs font-medium text-amber-600 dark:text-amber-400" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-3.5 w-3.5" }), "Not supported by the selected model"), orphanedKeys.map((key) => /* @__PURE__ */ React.createElement("div", { key, className: "flex min-h-9 items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "flex-1 truncate text-sm text-muted-foreground" }, humanizeIdentifier(key)), /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        disabled,
-        onClick: () => dispatch(resetOverride({ conversationId, key })),
-        "aria-label": `Reset ${humanizeIdentifier(key)}`,
-        title: "Reset override",
-        className: ROW_ICON_BUTTON
-      },
-      /* @__PURE__ */ React.createElement(RotateCcw, { className: "h-4 w-4" })
-    )))),
-    rowsLoading ? /* @__PURE__ */ React.createElement("p", { className: "py-2 text-sm text-muted-foreground" }, "Loading model settings\u2026") : groups.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "py-2 text-sm text-muted-foreground" }, structured ? effectiveModelId ? "Adjustable parameters: None" : "Model: Unresolved" : effectiveModelId ? "This model doesn't declare adjustable settings." : w.noModelNote) : groups.map((group) => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: group.id,
-        className: structured ? "flex flex-col gap-2" : "flex flex-col"
-      },
-      group.label && (structured ? /* @__PURE__ */ React.createElement("p", { className: "pt-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70" }, group.label) : /* @__PURE__ */ React.createElement("p", { className: "pb-1 pt-3 text-xs font-medium text-muted-foreground" }, sentenceCaseLabel(group.label))),
-      /* @__PURE__ */ React.createElement(
-        OverrideRows,
+    ) : null,
+    structured ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between px-3 pb-1 pt-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "Model parameter overrides" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground", children: [
+        "Overrides: ",
+        overriddenCount
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1.5 px-3 pb-1 pt-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: w.heading }),
+      /* @__PURE__ */ jsx(InfoHint, { text: w.scopeNote, label: `About ${w.heading}` }),
+      overriddenCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "ml-auto text-xs text-muted-foreground", children: [
+        overriddenCount,
+        " changed"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { value: editorTab, onValueChange: setEditorTab, children: [
+      structured && /* @__PURE__ */ jsxs(TabsList, { className: "mx-3 mb-2", "aria-label": "Model override editor", children: [
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "controls", children: "Controls" }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "advanced", children: "Advanced" })
+      ] }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "controls", className: "mt-0", children: /* @__PURE__ */ jsxs(
+        "div",
         {
-          structured,
-          label: group.label || "Model parameters"
-        },
-        group.rows.map((row) => /* @__PURE__ */ React.createElement(
-          OverrideRow,
+          className: structured ? "flex flex-col gap-2.5 px-3 pb-3" : "flex flex-col gap-1 px-3 pb-3",
+          children: [
+            structured && /* @__PURE__ */ jsx(OverrideRows, { structured: true, label: "Model", children: /* @__PURE__ */ jsx(
+              ConfigurationTableRow,
+              {
+                columns: OVERRIDE_COLUMNS,
+                cells: {
+                  setting: /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Model" }),
+                  source: removals.includes("model") || modelChoiceOverridden ? overrideSource : inheritedSources?.model ?? (base.model != null ? baselineSourceLabel : "Model default"),
+                  state: removals.includes("model") ? nullDefaults ? baselineDefaultLabel : "Removed" : modelChoiceOverridden ? "Overridden" : "Inherited",
+                  value: /* @__PURE__ */ jsx(
+                    ModelListDropdown,
+                    {
+                      value: effectiveModelId || null,
+                      onValueChange: (model) => handleChange("model", null, model),
+                      pinnedOfferingId,
+                      onOfferingPinChange: (offeringId) => dispatch(setOfferingPin({ conversationId, offeringId })),
+                      onClear: () => dispatch(resetModelChoice(conversationId)),
+                      emptyOptionLabel: w.modelEmptyChoiceLabel ?? DEFAULT_MODEL_EMPTY_CHOICE_LABEL,
+                      placeholder: w.modelEmptyChoiceLabel ?? DEFAULT_MODEL_EMPTY_CHOICE_LABEL,
+                      inputModalities: [],
+                      outputModalities: ["text"],
+                      disabled
+                    }
+                  )
+                }
+              }
+            ) }),
+            orphanedKeys.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-lg border border-amber-500/40 bg-amber-500/10 px-2 py-1.5", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs font-medium text-amber-600 dark:text-amber-400", children: [
+                /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5" }),
+                "Not supported by the selected model"
+              ] }),
+              orphanedKeys.map((key) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-sm text-muted-foreground", children: humanizeIdentifier(key) }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled,
+                    onClick: () => dispatch(resetOverride({ conversationId, key })),
+                    "aria-label": `Reset ${humanizeIdentifier(key)}`,
+                    title: "Reset override",
+                    className: ROW_ICON_BUTTON,
+                    children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" })
+                  }
+                )
+              ] }, key))
+            ] }),
+            rowsLoading ? /* @__PURE__ */ jsx("p", { className: "py-2 text-sm text-muted-foreground", children: "Loading model settings\u2026" }) : groups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-2 text-sm text-muted-foreground", children: structured ? effectiveModelId ? "Adjustable parameters: None" : "Model: Unresolved" : effectiveModelId ? "This model doesn't declare adjustable settings." : w.noModelNote }) : groups.map((group) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: structured ? "flex flex-col gap-2" : "flex flex-col",
+                children: [
+                  group.label && (structured ? /* @__PURE__ */ jsx("p", { className: "pt-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children: group.label }) : /* @__PURE__ */ jsx("p", { className: "pb-1 pt-3 text-xs font-medium text-muted-foreground", children: sentenceCaseLabel(group.label) })),
+                  /* @__PURE__ */ jsx(
+                    OverrideRows,
+                    {
+                      structured,
+                      label: group.label || "Model parameters",
+                      children: group.rows.map((row) => /* @__PURE__ */ jsx(
+                        OverrideRow,
+                        {
+                          row,
+                          structured,
+                          disabled,
+                          overrideSource,
+                          removedLabel: nullDefaults ? baselineDefaultLabel : "Not set",
+                          inheritedSource: inheritedSources?.[row.key] ?? (base[row.key] != null ? baselineSourceLabel : "Model default"),
+                          value: row.key in overrides ? overrides[row.key] : removals.includes(row.key) ? nullDefaults ? nullDefaults[row.key] ?? row.control?.default : void 0 : effectiveDefault(row.key, row.control),
+                          isOverridden: row.key in overrides,
+                          isRemoved: removals.includes(row.key),
+                          onChange: (v) => handleChange(row.key, row.control, v),
+                          onReset: () => dispatch(
+                            resetOverride({ conversationId, key: row.key })
+                          ),
+                          onClear: () => dispatch(
+                            markRemoved({ conversationId, key: row.key })
+                          )
+                        },
+                        row.key
+                      ))
+                    }
+                  )
+                ]
+              },
+              group.id
+            )),
+            structured ? /* @__PURE__ */ jsx(FieldHelp, { label: "Override scope", children: w.scopeNote }) : null
+          ]
+        }
+      ) }),
+      structured && /* @__PURE__ */ jsxs(TabsContent, { value: "advanced", className: "mt-0 space-y-2 px-3 pb-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              htmlFor: `${conversationId}-override-json`,
+              className: "font-semibold",
+              children: "Overrides JSON"
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldHelp, { label: "Overrides JSON", children: "Edits the same model overrides as Controls. Omit a key to inherit; use null to remove a setting." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Textarea,
           {
-            key: row.key,
-            row,
-            structured,
+            id: `${conversationId}-override-json`,
+            "aria-label": "Model overrides JSON",
+            "aria-invalid": Boolean(jsonError),
+            "aria-describedby": jsonError ? `${conversationId}-override-error` : void 0,
+            value: jsonDraft,
+            onChange: (event) => changeJson(event.target.value),
             disabled,
-            overrideSource,
-            removedLabel: nullDefaults ? baselineDefaultLabel : "Not set",
-            inheritedSource: inheritedSources?.[row.key] ?? (base[row.key] != null ? baselineSourceLabel : "Model default"),
-            value: row.key in overrides ? overrides[row.key] : removals.includes(row.key) ? nullDefaults ? nullDefaults[row.key] ?? row.control?.default : void 0 : effectiveDefault(row.key, row.control),
-            isOverridden: row.key in overrides,
-            isRemoved: removals.includes(row.key),
-            onChange: (v) => handleChange(row.key, row.control, v),
-            onReset: () => dispatch(
-              resetOverride({ conversationId, key: row.key })
-            ),
-            onClear: () => dispatch(
-              markRemoved({ conversationId, key: row.key })
-            )
+            spellCheck: false,
+            className: "min-h-64 font-mono text-sm"
           }
-        ))
-      )
-    )),
-    structured ? /* @__PURE__ */ React.createElement(FieldHelp, { label: "Override scope" }, w.scopeNote) : null
-  )), structured && /* @__PURE__ */ React.createElement(TabsContent, { value: "advanced", className: "mt-0 space-y-2 px-3 pb-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    Label,
-    {
-      htmlFor: `${conversationId}-override-json`,
-      className: "font-semibold"
-    },
-    "Overrides JSON"
-  ), /* @__PURE__ */ React.createElement(FieldHelp, { label: "Overrides JSON" }, "Edits the same model overrides as Controls. Omit a key to inherit; use null to remove a setting.")), /* @__PURE__ */ React.createElement(
-    Textarea,
-    {
-      id: `${conversationId}-override-json`,
-      "aria-label": "Model overrides JSON",
-      "aria-invalid": Boolean(jsonError),
-      "aria-describedby": jsonError ? `${conversationId}-override-error` : void 0,
-      value: jsonDraft,
-      onChange: (event) => changeJson(event.target.value),
-      disabled,
-      spellCheck: false,
-      className: "min-h-64 font-mono text-sm"
-    }
-  ))), jsonError && /* @__PURE__ */ React.createElement(
-    ErrorBox,
-    {
-      id: `${conversationId}-override-error`,
-      className: "px-3 pb-3 text-sm text-destructive",
-      message: jsonError,
-      operation: "Edit run overrides as JSON",
-      origin: "chat/RunConfigOverrides"
-    }
-  ));
+        )
+      ] })
+    ] }),
+    jsonError && /* @__PURE__ */ jsx(
+      ErrorBox,
+      {
+        id: `${conversationId}-override-error`,
+        className: "px-3 pb-3 text-sm text-destructive",
+        message: jsonError,
+        operation: "Edit run overrides as JSON",
+        origin: "chat/RunConfigOverrides"
+      }
+    )
+  ] });
 }
 function OverrideRows({
   structured,
   label,
   children
 }) {
-  return structured ? /* @__PURE__ */ React.createElement(ConfigurationTable, { label, columns: OVERRIDE_COLUMNS }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return structured ? /* @__PURE__ */ jsx(ConfigurationTable, { label, columns: OVERRIDE_COLUMNS, children }) : /* @__PURE__ */ jsx(Fragment, { children });
 }
 function OverrideRow({
   structured = false,
@@ -326,41 +373,45 @@ function OverrideRow({
   onClear
 }) {
   const touched = isOverridden || isRemoved;
-  const clearButton = /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(CircleSlash, null), onClick: onClear, disabled: disabled || isRemoved, "aria-label": `Clear ${row.label} to not set`, title: "Clear to not set", "data-testid": `run-override-clear-${row.key}`, className: "shrink-0" });
+  const clearButton = /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(CircleSlash, {}), onClick: onClear, disabled: disabled || isRemoved, "aria-label": `Clear ${row.label} to not set`, title: "Clear to not set", "data-testid": `run-override-clear-${row.key}`, className: "shrink-0" });
   if (!row.control) return null;
   if (structured)
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ConfigurationTableRow,
       {
         columns: OVERRIDE_COLUMNS,
         cells: {
-          setting: /* @__PURE__ */ React.createElement(
+          setting: /* @__PURE__ */ jsx(
             "label",
             {
               htmlFor: `run-override-${row.key}`,
-              className: "font-semibold"
-            },
-            row.label
+              className: "font-semibold",
+              children: row.label
+            }
           ),
           source: isRemoved || isOverridden ? overrideSource : inheritedSource ?? "Unknown",
           state: isRemoved ? removedLabel : isOverridden ? "Overridden" : "Inherited",
-          value: /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement(
-            SettingControlInput,
-            {
-              explicitState: true,
-              settingKey: row.key,
-              control: row.control,
-              value,
-              onChange,
-              disabled: disabled || isRemoved,
-              id: `run-override-${row.key}`
-            }
-          )), clearButton, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(RotateCcw, null), onClick: onReset, disabled: disabled || !touched, "aria-label": `Reset ${row.label}`, className: "shrink-0" }))
+          value: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+              SettingControlInput,
+              {
+                explicitState: true,
+                settingKey: row.key,
+                control: row.control,
+                value,
+                onChange,
+                disabled: disabled || isRemoved,
+                id: `run-override-${row.key}`
+              }
+            ) }),
+            clearButton,
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: onReset, disabled: disabled || !touched, "aria-label": `Reset ${row.label}`, className: "shrink-0" })
+          ] })
         }
       }
     );
   const stacked = (row.control.type === "number" || row.control.type === "integer") && row.control.min !== void 0 && row.control.max !== void 0;
-  const label = /* @__PURE__ */ React.createElement(
+  const label = /* @__PURE__ */ jsxs(
     Label,
     {
       htmlFor: `run-override-${row.key}`,
@@ -369,36 +420,41 @@ function OverrideRow({
         stacked ? "flex-1" : "w-36 shrink-0",
         isOverridden ? "text-foreground" : "text-foreground/80"
       ),
-      title: humanizeIdentifier(row.key)
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "truncate" }, sentenceCaseLabel(row.label)),
-    isRemoved && /* @__PURE__ */ React.createElement(Badge, { className: "ml-1.5", tone: "warning" }, removedLabel)
+      title: humanizeIdentifier(row.key),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: sentenceCaseLabel(row.label) }),
+        isRemoved && /* @__PURE__ */ jsx(Badge, { className: "ml-1.5", tone: "warning", children: removedLabel })
+      ]
+    }
   );
-  const actions = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: onClear,
-      disabled: disabled || isRemoved,
-      "aria-label": `Clear ${row.label} to not set`,
-      title: "Clear to not set",
-      "data-testid": `run-override-clear-${row.key}`,
-      className: ROW_ICON_BUTTON
-    },
-    /* @__PURE__ */ React.createElement(CircleSlash, { className: "h-4 w-4" })
-  ), touched ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: onReset,
-      disabled,
-      "aria-label": `Reset ${row.label}`,
-      title: "Reset override",
-      className: ROW_ICON_BUTTON
-    },
-    /* @__PURE__ */ React.createElement(RotateCcw, { className: "h-4 w-4" })
-  ) : null);
-  const control = /* @__PURE__ */ React.createElement(
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        disabled: disabled || isRemoved,
+        "aria-label": `Clear ${row.label} to not set`,
+        title: "Clear to not set",
+        "data-testid": `run-override-clear-${row.key}`,
+        className: ROW_ICON_BUTTON,
+        children: /* @__PURE__ */ jsx(CircleSlash, { className: "h-4 w-4" })
+      }
+    ),
+    touched ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onReset,
+        disabled,
+        "aria-label": `Reset ${row.label}`,
+        title: "Reset override",
+        className: ROW_ICON_BUTTON,
+        children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" })
+      }
+    ) : null
+  ] });
+  const control = /* @__PURE__ */ jsx(
     SettingControlInput,
     {
       size: "comfortable",
@@ -410,16 +466,26 @@ function OverrideRow({
       id: `run-override-${row.key}`
     }
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         "-mx-1.5 rounded-lg px-1.5",
         stacked ? "flex flex-col pb-1.5" : "flex min-h-9 items-center gap-2 pointer-coarse:min-h-11",
         isOverridden && "bg-primary/5"
-      )
-    },
-    stacked ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex min-h-9 items-center gap-2 pointer-coarse:min-h-11" }, label, actions), control) : /* @__PURE__ */ React.createElement(React.Fragment, null, label, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, control), actions)
+      ),
+      children: stacked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 items-center gap-2 pointer-coarse:min-h-11", children: [
+          label,
+          actions
+        ] }),
+        control
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        label,
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: control }),
+        actions
+      ] })
+    }
   );
 }
 export {

package/dist/agents/components/run-controls/RunInputCapabilities.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
 import { InputCapabilitiesEditor } from "../../../host/ui-slots.js";
 import { selectInputCapabilitiesState } from "../../redux/execution-system/instance-input-capabilities/instance-input-capabilities.selectors.js";
@@ -34,26 +35,29 @@ function RunInputCapabilities({
     dispatch(resetInputCapabilityOverride({ conversationId, key }));
     void dispatch(persistInputCapabilities({ conversationId }));
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    InputCapabilitiesEditor,
-    {
-      values: effective,
-      onChange: changeCapability,
-      overriddenKeys,
-      onReset: resetCapability,
-      idPrefix: `run-ui-gate-${conversationId}`,
-      title: "Input capabilities",
-      variant: "menu"
-    }
-  ), entry?.persistence === "error" ? /* @__PURE__ */ React.createElement(
-    ErrorBox,
-    {
-      className: "px-3 pb-2 text-xs text-destructive",
-      message: "Capability changes could not be saved. Try again.",
-      operation: "Save input capabilities",
-      origin: "chat/RunInputCapabilities"
-    }
-  ) : null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InputCapabilitiesEditor,
+      {
+        values: effective,
+        onChange: changeCapability,
+        overriddenKeys,
+        onReset: resetCapability,
+        idPrefix: `run-ui-gate-${conversationId}`,
+        title: "Input capabilities",
+        variant: "menu"
+      }
+    ),
+    entry?.persistence === "error" ? /* @__PURE__ */ jsx(
+      ErrorBox,
+      {
+        className: "px-3 pb-2 text-xs text-destructive",
+        message: "Capability changes could not be saved. Try again.",
+        operation: "Save input capabilities",
+        origin: "chat/RunInputCapabilities"
+      }
+    ) : null
+  ] });
 }
 export {
   RunInputCapabilities

package/dist/agents/components/run-controls/RunModelPicker.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { RotateCcw } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
@@ -68,20 +69,23 @@ function QuickRunModelSelect({
     handleReset
   } = useModelOverride(conversationId);
   const displayModelId = isManualMode ? agentModelId ?? effectiveModel ?? baseModel ?? null : effectiveModel ?? baseModel ?? null;
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex min-w-0 items-center gap-1", className) }, /* @__PURE__ */ React.createElement(
-    ModelListDropdown,
-    {
-      value: displayModelId,
-      onValueChange: handleChange,
-      pinnedOfferingId,
-      onOfferingPinChange: handleOfferingPinChange,
-      inputModalities: [],
-      outputModalities: ["text"],
-      className: "min-w-0 flex-1",
-      disabled: isManualMode,
-      disabledTitle: MANUAL_MODE_MODEL_HINT
-    }
-  ), isOverridden && !isManualMode && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(RotateCcw, null), onClick: handleReset, title: "Reset to agent default", "aria-label": "Reset model to agent default", className: "shrink-0" }));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx(
+      ModelListDropdown,
+      {
+        value: displayModelId,
+        onValueChange: handleChange,
+        pinnedOfferingId,
+        onOfferingPinChange: handleOfferingPinChange,
+        inputModalities: [],
+        outputModalities: ["text"],
+        className: "min-w-0 flex-1",
+        disabled: isManualMode,
+        disabledTitle: MANUAL_MODE_MODEL_HINT
+      }
+    ),
+    isOverridden && !isManualMode && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: handleReset, title: "Reset to agent default", "aria-label": "Reset model to agent default", className: "shrink-0" })
+  ] });
 }
 function RunModelPicker({ conversationId }) {
   const {
@@ -93,17 +97,23 @@ function RunModelPicker({ conversationId }) {
     handleOfferingPinChange,
     handleReset
   } = useModelOverride(conversationId);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 px-3 py-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-foreground" }, "Model"), isOverridden && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(RotateCcw, null), onClick: handleReset }, "Reset to agent default")), /* @__PURE__ */ React.createElement(
-    ModelListDropdown,
-    {
-      value: effectiveModel ?? baseModel ?? null,
-      onValueChange: handleChange,
-      pinnedOfferingId,
-      onOfferingPinChange: handleOfferingPinChange,
-      inputModalities: [],
-      outputModalities: ["text"]
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: "Model" }),
+      isOverridden && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: handleReset, children: "Reset to agent default" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ModelListDropdown,
+      {
+        value: effectiveModel ?? baseModel ?? null,
+        onValueChange: handleChange,
+        pinnedOfferingId,
+        onOfferingPinChange: handleOfferingPinChange,
+        inputModalities: [],
+        outputModalities: ["text"]
+      }
+    )
+  ] });
 }
 export {
   QuickRunModelSelect,