@open-mercato/ai-assistant 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3256.1.fe3dec2464

package/dist/modules/ai_assistant/backend/config/ai-assistant/agents/AiAgentSettingsPageClient.js

@@ -24,8 +24,17 @@ import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
 import { Badge } from "@open-mercato/ui/primitives/badge";
 import { Button } from "@open-mercato/ui/primitives/button";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
 import { IconButton } from "@open-mercato/ui/primitives/icon-button";
 import { Label } from "@open-mercato/ui/primitives/label";
+import { Radio, RadioGroup } from "@open-mercato/ui/primitives/radio";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
 import { StatusBadge } from "@open-mercato/ui/primitives/status-badge";
 import { Switch } from "@open-mercato/ui/primitives/switch";
 import { Textarea } from "@open-mercato/ui/primitives/textarea";
@@ -37,6 +46,8 @@ import {
 } from "@open-mercato/ui/primitives/tooltip";
 import { EmptyState } from "@open-mercato/ui/backend/EmptyState";
 import { apiCall, apiCallOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
 import { useAiShortcuts } from "@open-mercato/ui/ai";
 const PROMPT_SECTION_IDS = [
   "role",
@@ -71,6 +82,15 @@ async function fetchAgents() {
   if (!result) throw new Error(`Failed to load agents (${status})`);
   return result;
 }
+async function fetchRuntimeSettings() {
+  const { result, status } = await apiCallOrThrow(
+    "/api/ai_assistant/settings",
+    { method: "GET", credentials: "include" },
+    { errorMessage: "Failed to load runtime settings" }
+  );
+  if (!result) throw new Error(`Failed to load runtime settings (${status})`);
+  return result;
+}
 async function fetchOverride(agentId) {
   const { result, status } = await apiCallOrThrow(
     `/api/ai_assistant/ai/agents/${encodeURIComponent(agentId)}/prompt-override`,
@@ -164,8 +184,8 @@ function PromptSectionEditor({
       className: "flex flex-col gap-2 rounded-md border border-border bg-muted/20 p-3",
       "data-ai-agent-prompt-section": sectionId,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
             /* @__PURE__ */ jsx("span", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: sectionLabel }),
             /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: override ? t(
               "ai_assistant.agents.prompt.overrideModeLabel",
@@ -223,7 +243,7 @@ function ToolRow({ tool }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "flex items-center justify-between gap-3 rounded-md border border-border bg-background px-3 py-2",
+      className: "flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background px-3 py-2",
       "data-ai-agent-tool-row": tool.name,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 min-w-0", children: [
@@ -233,7 +253,7 @@ function ToolRow({ tool }) {
             /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-mono text-muted-foreground", children: tool.name })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 flex-shrink-0", children: [
           tool.isMutation ? /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", dot: true, children: t("ai_assistant.agents.tools.mutationBadge", "Mutation") }) : /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", dot: true, children: t("ai_assistant.agents.tools.readBadge", "Read") }),
           !tool.registered ? /* @__PURE__ */ jsx(StatusBadge, { variant: "error", dot: true, children: t("ai_assistant.agents.tools.missingBadge", "Missing") }) : null,
           /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -303,6 +323,12 @@ function MutationPolicySection({ agent }) {
   const [isSaving, setIsSaving] = React.useState(false);
   const [isClearing, setIsClearing] = React.useState(false);
   const [state, setState] = React.useState({ kind: "idle" });
+  const { runMutation: runSavePolicyMutation } = useGuardedMutation({
+    contextId: `ai-agent-mutation-policy-save-${agent.id}`
+  });
+  const { runMutation: runClearPolicyMutation } = useGuardedMutation({
+    contextId: `ai-agent-mutation-policy-clear-${agent.id}`
+  });
   React.useEffect(() => {
     setSelected(currentOverride?.mutationPolicy ?? null);
     setState({ kind: "idle" });
@@ -319,78 +345,79 @@ function MutationPolicySection({ agent }) {
     setIsSaving(true);
     setState({ kind: "idle" });
     try {
-      const { ok, status, result } = await apiCall(
-        `/api/ai_assistant/ai/agents/${encodeURIComponent(agent.id)}/mutation-policy`,
-        {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          credentials: "include",
-          body: JSON.stringify({ mutationPolicy: selected })
-        }
-      );
-      const payload = result ?? {};
-      if (!ok) {
-        const message = payload.code === "escalation_not_allowed" ? payload.error ?? t(
-          "ai_assistant.agents.mutation_policy.errors.escalationNotAllowed",
-          "Cannot upgrade beyond the agent's declared policy \u2014 this is a code-level change."
-        ) : payload.error ?? `Failed to save mutation policy (${status}).`;
-        setState({ kind: "error", message });
-        return;
-      }
-      setState({
-        kind: "success",
-        message: t(
-          "ai_assistant.agents.mutation_policy.savedMessage",
-          "Mutation policy override saved."
-        )
+      await runSavePolicyMutation({
+        operation: async () => {
+          const { ok, status, result } = await apiCall(
+            `/api/ai_assistant/ai/agents/${encodeURIComponent(agent.id)}/mutation-policy`,
+            {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              credentials: "include",
+              body: JSON.stringify({ mutationPolicy: selected })
+            }
+          );
+          const payload = result ?? {};
+          if (!ok) {
+            const message = payload.code === "escalation_not_allowed" ? payload.error ?? t(
+              "ai_assistant.agents.mutation_policy.errors.escalationNotAllowed",
+              "Cannot upgrade beyond the agent's declared policy \u2014 this is a code-level change."
+            ) : payload.error ?? `Failed to save mutation policy (${status}).`;
+            throw new Error(message);
+          }
+        },
+        context: {}
       });
+      const successMessage = t(
+        "ai_assistant.agents.mutation_policy.savedMessage",
+        "Mutation policy override saved."
+      );
+      setState({ kind: "success", message: successMessage });
+      flash(successMessage, "success");
       await queryClient.invalidateQueries({
         queryKey: ["ai_assistant", "agent_settings", "mutation_policy", agent.id]
       });
     } catch (err) {
-      setState({
-        kind: "error",
-        message: err instanceof Error ? err.message : String(err)
-      });
+      const message = err instanceof Error ? err.message : String(err);
+      setState({ kind: "error", message });
+      flash(message, "error");
     } finally {
       setIsSaving(false);
     }
-  }, [agent.id, isSaving, queryClient, selected, t]);
+  }, [agent.id, isSaving, queryClient, runSavePolicyMutation, selected, t]);
   const clear = React.useCallback(async () => {
     if (isClearing) return;
     setIsClearing(true);
     setState({ kind: "idle" });
     try {
-      const { ok, status, result } = await apiCall(
-        `/api/ai_assistant/ai/agents/${encodeURIComponent(agent.id)}/mutation-policy`,
-        {
-          method: "DELETE",
-          credentials: "include"
-        }
-      );
-      const payload = result ?? {};
-      if (!ok) {
-        setState({
-          kind: "error",
-          message: payload.error ?? `Failed to clear override (${status}).`
-        });
-        return;
-      }
-      setState({
-        kind: "success",
-        message: t(
-          "ai_assistant.agents.mutation_policy.clearedMessage",
-          "Mutation policy override cleared; agent is using its code-declared policy."
-        )
+      await runClearPolicyMutation({
+        operation: async () => {
+          const { ok, status, result } = await apiCall(
+            `/api/ai_assistant/ai/agents/${encodeURIComponent(agent.id)}/mutation-policy`,
+            {
+              method: "DELETE",
+              credentials: "include"
+            }
+          );
+          const payload = result ?? {};
+          if (!ok) {
+            throw new Error(payload.error ?? `Failed to clear override (${status}).`);
+          }
+        },
+        context: {}
       });
+      const successMessage = t(
+        "ai_assistant.agents.mutation_policy.clearedMessage",
+        "Mutation policy override cleared; agent is using its code-declared policy."
+      );
+      setState({ kind: "success", message: successMessage });
+      flash(successMessage, "success");
       await queryClient.invalidateQueries({
         queryKey: ["ai_assistant", "agent_settings", "mutation_policy", agent.id]
       });
     } catch (err) {
-      setState({
-        kind: "error",
-        message: err instanceof Error ? err.message : String(err)
-      });
+      const message = err instanceof Error ? err.message : String(err);
+      setState({ kind: "error", message });
+      flash(message, "error");
     } finally {
       setIsClearing(false);
     }
@@ -401,10 +428,10 @@ function MutationPolicySection({ agent }) {
       className: "rounded-lg border border-border bg-background p-4",
       "data-ai-agent-mutation-policy": agent.id,
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3 border-b border-border pb-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border pb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
             /* @__PURE__ */ jsx(ShieldAlert, { className: "size-4 text-muted-foreground", "aria-hidden": true }),
-            /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: t("ai_assistant.agents.mutation_policy.title", "Mutation policy") }),
               /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
                 "ai_assistant.agents.mutation_policy.subtitle",
@@ -417,21 +444,23 @@ function MutationPolicySection({ agent }) {
             {
               variant: mutationPolicyStatusMap[effectivePolicy] ?? "neutral",
               dot: true,
+              className: "max-w-full whitespace-normal break-all",
               "data-ai-agent-mutation-policy-effective": true,
               children: effectivePolicy
             }
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(min(100%,12rem),1fr))] gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx("span", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.mutation_policy.codeDeclared", "Code-declared") }),
-              /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
                 /* @__PURE__ */ jsx(
                   StatusBadge,
                   {
                     variant: mutationPolicyStatusMap[codeDeclared] ?? "neutral",
                     dot: true,
+                    className: "max-w-full whitespace-normal break-all",
                     "data-ai-agent-mutation-policy-code-declared": true,
                     children: codeDeclared
                   }
@@ -443,13 +472,14 @@ function MutationPolicySection({ agent }) {
                 ) })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx("span", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.mutation_policy.tenantOverride", "Tenant override") }),
               /* @__PURE__ */ jsx("div", { className: "mt-1", children: currentOverride ? /* @__PURE__ */ jsx(
                 StatusBadge,
                 {
                   variant: mutationPolicyStatusMap[currentOverride.mutationPolicy] ?? "neutral",
                   dot: true,
+                  className: "max-w-full whitespace-normal break-all",
                   "data-ai-agent-mutation-policy-override-current": true,
                   children: currentOverride.mutationPolicy
                 }
@@ -493,10 +523,13 @@ function MutationPolicySection({ agent }) {
             ) }),
             /* @__PURE__ */ jsx(AlertDescription, { children: query.error instanceof Error ? query.error.message : String(query.error) })
           ] }) : /* @__PURE__ */ jsx(
-            "div",
+            RadioGroup,
             {
+              value: selected ?? "",
+              onValueChange: (value) => {
+                setSelected(value);
+              },
               className: "flex flex-col gap-2",
-              role: "radiogroup",
               "aria-label": t(
                 "ai_assistant.agents.mutation_policy.pickerLabel",
                 "Mutation policy override"
@@ -508,24 +541,21 @@ function MutationPolicySection({ agent }) {
                 const isSelected = selected === option;
                 return /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                    "label",
+                    "div",
                     {
-                      className: `flex items-start gap-3 rounded-md border px-3 py-2 text-sm cursor-pointer transition-colors ${wouldEscalate ? "border-border bg-muted/30 cursor-not-allowed opacity-60" : isSelected ? "border-primary bg-primary/5" : "border-border bg-background hover:bg-muted/40"}`,
+                      className: `flex items-start gap-3 rounded-md border px-3 py-2 text-sm cursor-pointer transition-colors ${wouldEscalate ? "border-border bg-muted/30 cursor-not-allowed opacity-60" : isSelected ? "border-accent-indigo bg-accent-indigo/5" : "border-border bg-background hover:bg-muted/40"}`,
+                      onClick: () => {
+                        if (wouldEscalate) return;
+                        setSelected(option);
+                      },
                       "data-ai-agent-mutation-policy-option": option,
                       "data-ai-agent-mutation-policy-option-disabled": wouldEscalate ? "true" : "false",
                       children: [
                         /* @__PURE__ */ jsx(
-                          "input",
+                          Radio,
                           {
-                            type: "radio",
-                            name: `mutation-policy-${agent.id}`,
                             value: option,
-                            checked: isSelected,
                             disabled: wouldEscalate,
-                            onChange: () => {
-                              if (wouldEscalate) return;
-                              setSelected(option);
-                            },
                             className: "mt-0.5",
                             "aria-disabled": wouldEscalate
                           }
@@ -571,7 +601,7 @@ function MutationPolicySection({ agent }) {
             ) }),
             /* @__PURE__ */ jsx(AlertDescription, { children: state.message })
           ] }) : null,
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
             /* @__PURE__ */ jsxs(
               Button,
               {
@@ -607,6 +637,509 @@ function MutationPolicySection({ agent }) {
     }
   );
 }
+function AgentModelOverrideSection({ agent }) {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const settingsQuery = useQuery({
+    queryKey: ["ai_assistant", "agent_settings", "runtime_settings"],
+    queryFn: fetchRuntimeSettings,
+    retry: false
+  });
+  const agentResolution = settingsQuery.data?.agents.find((entry) => entry.agentId === agent.id) ?? null;
+  const configuredProviders = React.useMemo(
+    () => (settingsQuery.data?.availableProviders ?? []).filter((provider) => provider.configured),
+    [settingsQuery.data?.availableProviders]
+  );
+  const [selectedProviderId, setSelectedProviderId] = React.useState("");
+  const [selectedModelId, setSelectedModelId] = React.useState("");
+  const [allowedProviders, setAllowedProviders] = React.useState(null);
+  const [allowedModelsByProvider, setAllowedModelsByProvider] = React.useState({});
+  const [allowlistDirty, setAllowlistDirty] = React.useState(false);
+  const [isSaving, setIsSaving] = React.useState(false);
+  const [isClearing, setIsClearing] = React.useState(false);
+  const [isSavingAllowlist, setIsSavingAllowlist] = React.useState(false);
+  const [state, setState] = React.useState({ kind: "idle" });
+  const { runMutation: runSaveModelOverrideMutation } = useGuardedMutation({
+    contextId: `ai-agent-model-override-save-${agent.id}`
+  });
+  const { runMutation: runClearModelOverrideMutation } = useGuardedMutation({
+    contextId: `ai-agent-model-override-clear-${agent.id}`
+  });
+  const { runMutation: runSaveModelAllowlistMutation } = useGuardedMutation({
+    contextId: `ai-agent-model-override-allowlist-${agent.id}`
+  });
+  React.useEffect(() => {
+    const override = agentResolution?.override;
+    setSelectedProviderId(override?.providerId ?? "");
+    setSelectedModelId(override?.modelId ?? "");
+    setAllowedProviders(agentResolution?.runtimeOverrideAllowlist.tenant?.allowedProviders ?? null);
+    setAllowedModelsByProvider({
+      ...agentResolution?.runtimeOverrideAllowlist.tenant?.allowedModelsByProvider ?? {}
+    });
+    setAllowlistDirty(false);
+    setState({ kind: "idle" });
+  }, [
+    agent.id,
+    agentResolution?.override?.modelId,
+    agentResolution?.override?.providerId,
+    agentResolution?.runtimeOverrideAllowlist.tenant
+  ]);
+  const selectedProvider = configuredProviders.find((provider) => provider.id === selectedProviderId);
+  const isProviderAllowedForPicker = React.useCallback(
+    (providerId) => {
+      if (allowedProviders === null) return true;
+      return allowedProviders.includes(providerId);
+    },
+    [allowedProviders]
+  );
+  const isModelAllowedForPicker = React.useCallback(
+    (providerId, modelId) => {
+      const list = allowedModelsByProvider[providerId];
+      if (list === void 0) return true;
+      return list.includes(modelId);
+    },
+    [allowedModelsByProvider]
+  );
+  const hasChange = selectedProviderId.length > 0 && selectedModelId.length > 0 && (selectedProviderId !== (agentResolution?.override?.providerId ?? "") || selectedModelId !== (agentResolution?.override?.modelId ?? ""));
+  const save = React.useCallback(async () => {
+    if (isSaving || !selectedProviderId || !selectedModelId) return;
+    setIsSaving(true);
+    setState({ kind: "idle" });
+    try {
+      await runSaveModelOverrideMutation({
+        operation: async () => {
+          const { ok, status, result } = await apiCall(
+            "/api/ai_assistant/settings",
+            {
+              method: "PUT",
+              headers: { "content-type": "application/json" },
+              credentials: "include",
+              body: JSON.stringify({
+                agentId: agent.id,
+                providerId: selectedProviderId,
+                modelId: selectedModelId
+              })
+            }
+          );
+          if (!ok) {
+            throw new Error(result?.error ?? `Failed to save model override (${status}).`);
+          }
+        },
+        context: {}
+      });
+      const successMessage = t("ai_assistant.agents.model_override.saved", "Model override saved.");
+      setState({ kind: "success", message: successMessage });
+      flash(successMessage, "success");
+      await queryClient.invalidateQueries({
+        queryKey: ["ai_assistant", "agent_settings", "runtime_settings"]
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setState({ kind: "error", message });
+      flash(message, "error");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [agent.id, isSaving, queryClient, runSaveModelOverrideMutation, selectedModelId, selectedProviderId, t]);
+  const clear = React.useCallback(async () => {
+    if (isClearing) return;
+    setIsClearing(true);
+    setState({ kind: "idle" });
+    try {
+      await runClearModelOverrideMutation({
+        operation: async () => {
+          const { ok, status, result } = await apiCall(
+            "/api/ai_assistant/settings",
+            {
+              method: "DELETE",
+              headers: { "content-type": "application/json" },
+              credentials: "include",
+              body: JSON.stringify({ agentId: agent.id })
+            }
+          );
+          if (!ok) {
+            throw new Error(result?.error ?? `Failed to clear model override (${status}).`);
+          }
+        },
+        context: {}
+      });
+      setSelectedProviderId("");
+      setSelectedModelId("");
+      const successMessage = t(
+        "ai_assistant.agents.model_override.cleared",
+        "Model override cleared; the agent is using the normal resolution chain."
+      );
+      setState({ kind: "success", message: successMessage });
+      flash(successMessage, "success");
+      await queryClient.invalidateQueries({
+        queryKey: ["ai_assistant", "agent_settings", "runtime_settings"]
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setState({ kind: "error", message });
+      flash(message, "error");
+    } finally {
+      setIsClearing(false);
+    }
+  }, [agent.id, isClearing, queryClient, runClearModelOverrideMutation, t]);
+  const toggleAllowedProvider = React.useCallback(
+    (providerId, next) => {
+      setAllowlistDirty(true);
+      setState({ kind: "idle" });
+      setAllowedProviders((current) => {
+        if (next) {
+          return current === null ? [providerId] : Array.from(/* @__PURE__ */ new Set([...current, providerId]));
+        }
+        const baseline = current === null ? configuredProviders.map((provider) => provider.id) : current;
+        return baseline.filter((id) => id !== providerId);
+      });
+    },
+    [configuredProviders]
+  );
+  const toggleAllowedModel = React.useCallback(
+    (providerId, modelId, next) => {
+      setAllowlistDirty(true);
+      setState({ kind: "idle" });
+      const provider = configuredProviders.find((entry) => entry.id === providerId);
+      const allModelIds = provider?.defaultModels.map((model) => model.id) ?? [];
+      setAllowedModelsByProvider((current) => {
+        const existing = current[providerId];
+        const baseline = existing === void 0 ? allModelIds : existing;
+        const nextModels = next ? Array.from(/* @__PURE__ */ new Set([...baseline, modelId])) : baseline.filter((id) => id !== modelId);
+        return { ...current, [providerId]: nextModels };
+      });
+    },
+    [configuredProviders]
+  );
+  const resetAllowlistDraft = React.useCallback(() => {
+    setAllowedProviders(null);
+    setAllowedModelsByProvider({});
+    setAllowlistDirty(true);
+    setState({ kind: "idle" });
+  }, []);
+  const saveAllowlist = React.useCallback(async () => {
+    if (isSavingAllowlist) return;
+    setIsSavingAllowlist(true);
+    setState({ kind: "idle" });
+    try {
+      await runSaveModelAllowlistMutation({
+        operation: async () => {
+          const { ok, status, result } = await apiCall(
+            "/api/ai_assistant/settings",
+            {
+              method: "PUT",
+              headers: { "content-type": "application/json" },
+              credentials: "include",
+              body: JSON.stringify({
+                agentId: agent.id,
+                allowedOverrideProviders: allowedProviders,
+                allowedOverrideModelsByProvider: allowedModelsByProvider
+              })
+            }
+          );
+          if (!ok) {
+            throw new Error(result?.error ?? `Failed to save chat override allowlist (${status}).`);
+          }
+        },
+        context: {}
+      });
+      setAllowlistDirty(false);
+      const successMessage = t(
+        "ai_assistant.agents.model_override.allowlistSaved",
+        "Chat override choices saved."
+      );
+      setState({ kind: "success", message: successMessage });
+      flash(successMessage, "success");
+      await queryClient.invalidateQueries({
+        queryKey: ["ai_assistant", "agent_settings", "runtime_settings"]
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setState({ kind: "error", message });
+      flash(message, "error");
+    } finally {
+      setIsSavingAllowlist(false);
+    }
+  }, [agent.id, allowedModelsByProvider, allowedProviders, isSavingAllowlist, queryClient, runSaveModelAllowlistMutation, t]);
+  const busy = isSaving || isClearing || isSavingAllowlist;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "rounded-lg border border-border bg-background p-4",
+      "data-ai-agent-model-override": agent.id,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border pb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
+            /* @__PURE__ */ jsx(Bot, { className: "size-4 text-muted-foreground", "aria-hidden": true }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: t("ai_assistant.agents.model_override.title", "Provider and model") }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
+                "ai_assistant.agents.model_override.subtitle",
+                "Override the default provider and model for this tenant and agent."
+              ) })
+            ] })
+          ] }),
+          agentResolution ? /* @__PURE__ */ jsxs(
+            StatusBadge,
+            {
+              variant: "info",
+              dot: true,
+              className: "max-w-full whitespace-normal break-all",
+              "data-ai-agent-model-override-effective": true,
+              children: [
+                agentResolution.providerId,
+                " / ",
+                agentResolution.modelId
+              ]
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(min(100%,12rem),1fr))] gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.model_override.codeDefault", "Code-declared default") }),
+              /* @__PURE__ */ jsxs("p", { className: "mt-1 break-all font-mono text-xs", children: [
+                agent.defaultProvider ?? t("ai_assistant.agents.model_override.anyProvider", "first configured"),
+                " / ",
+                agent.defaultModel ?? t("ai_assistant.agents.model_override.providerDefault", "provider default")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.model_override.tenantOverride", "Tenant override") }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 break-all font-mono text-xs text-muted-foreground", children: agentResolution?.override ? `${agentResolution.override.providerId ?? "\u2014"} / ${agentResolution.override.modelId ?? "\u2014"}` : t("ai_assistant.agents.model_override.noOverride", "No per-agent override") })
+            ] })
+          ] }),
+          settingsQuery.isLoading ? /* @__PURE__ */ jsx(
+            SettingsLoading,
+            {
+              message: t(
+                "ai_assistant.agents.model_override.loading",
+                "Loading provider catalog..."
+              )
+            }
+          ) : settingsQuery.isError ? /* @__PURE__ */ jsxs(Alert, { variant: "destructive", "data-ai-agent-model-override-load-error": true, children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(AlertTitle, { children: t(
+              "ai_assistant.agents.model_override.loadErrorTitle",
+              "Failed to load provider catalog"
+            ) }),
+            /* @__PURE__ */ jsx(AlertDescription, { children: settingsQuery.error instanceof Error ? settingsQuery.error.message : String(settingsQuery.error) })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(min(100%,12rem),1fr))] gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `ai-agent-model-provider-${agent.id}`, className: "text-xs", children: t("ai_assistant.agents.model_override.provider", "Provider") }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: selectedProviderId,
+                  onValueChange: (value) => {
+                    setSelectedProviderId(value);
+                    setSelectedModelId("");
+                    setState({ kind: "idle" });
+                  },
+                  disabled: busy || configuredProviders.length === 0,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      SelectTrigger,
+                      {
+                        id: `ai-agent-model-provider-${agent.id}`,
+                        className: "w-full min-w-0",
+                        "data-ai-agent-model-provider-select": true,
+                        children: /* @__PURE__ */ jsx(
+                          SelectValue,
+                          {
+                            placeholder: t(
+                              "ai_assistant.agents.model_override.selectProvider",
+                              "Select provider"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(SelectContent, { children: configuredProviders.map((provider) => /* @__PURE__ */ jsx(SelectItem, { value: provider.id, children: provider.name }, provider.id)) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `ai-agent-model-model-${agent.id}`, className: "text-xs", children: t("ai_assistant.agents.model_override.model", "Model") }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: selectedModelId,
+                  onValueChange: (value) => {
+                    setSelectedModelId(value);
+                    setState({ kind: "idle" });
+                  },
+                  disabled: busy || !selectedProvider,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      SelectTrigger,
+                      {
+                        id: `ai-agent-model-model-${agent.id}`,
+                        className: "w-full min-w-0",
+                        "data-ai-agent-model-select": true,
+                        children: /* @__PURE__ */ jsx(
+                          SelectValue,
+                          {
+                            placeholder: t(
+                              "ai_assistant.agents.model_override.selectModel",
+                              "Select model"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(SelectContent, { children: (selectedProvider?.defaultModels ?? []).map((model) => /* @__PURE__ */ jsx(SelectItem, { value: model.id, children: model.name }, model.id)) })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          agent.allowRuntimeModelOverride ? /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-muted/20 p-3", "data-ai-agent-model-picker-allowlist": true, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: t(
+                  "ai_assistant.agents.model_override.allowlistTitle",
+                  "Chat override choices"
+                ) }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
+                  "ai_assistant.agents.model_override.allowlistHelp",
+                  "Limit which provider/model overrides users can pick in the chat footer for this agent."
+                ) }),
+                agentResolution?.runtimeOverrideAllowlist.env ? /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx("code", { className: "font-mono text-xs", children: agentResolution.runtimeOverrideAllowlist.envVarNames.providers }),
+                  " ",
+                  t(
+                    "ai_assistant.agents.model_override.envAlsoNarrows",
+                    "also narrows this list from env."
+                  )
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsx(
+                StatusBadge,
+                {
+                  variant: agentResolution?.runtimeOverrideAllowlist.tenant ? "info" : "neutral",
+                  dot: true,
+                  children: agentResolution?.runtimeOverrideAllowlist.tenant ? t("ai_assistant.agents.model_override.allowlistCustom", "custom") : t("ai_assistant.agents.model_override.allowlistInherited", "inherited")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-col gap-3", children: configuredProviders.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
+              "ai_assistant.agents.model_override.allowlistEmpty",
+              "No configured providers are available for chat overrides."
+            ) }) : configuredProviders.map((provider) => {
+              const providerEnabled = isProviderAllowedForPicker(provider.id);
+              return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-background p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: `ai-agent-picker-provider-${agent.id}-${provider.id}`,
+                      checked: providerEnabled,
+                      onCheckedChange: (value) => toggleAllowedProvider(provider.id, value === true)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Label,
+                    {
+                      htmlFor: `ai-agent-picker-provider-${agent.id}-${provider.id}`,
+                      className: "text-sm font-medium",
+                      children: provider.name
+                    }
+                  )
+                ] }),
+                providerEnabled ? /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-[repeat(auto-fit,minmax(min(100%,12rem),1fr))] gap-2", children: provider.defaultModels.map((model) => /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    className: "flex min-w-0 items-center gap-2 text-xs",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: isModelAllowedForPicker(provider.id, model.id),
+                          onCheckedChange: (value) => toggleAllowedModel(provider.id, model.id, value === true)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "truncate font-mono", children: model.id }),
+                      model.id === provider.defaultModel ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-overline", children: t("ai_assistant.agents.model_override.defaultBadge", "default") }) : null
+                    ]
+                  },
+                  model.id
+                )) }) : null
+              ] }, provider.id);
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-end gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "outline",
+                  onClick: resetAllowlistDraft,
+                  disabled: busy,
+                  children: t("ai_assistant.agents.model_override.allowlistReset", "Inherit")
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  onClick: () => void saveAllowlist(),
+                  disabled: busy || !allowlistDirty,
+                  "data-ai-agent-model-allowlist-save": true,
+                  children: [
+                    isSavingAllowlist ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Save, { className: "size-4", "aria-hidden": true }),
+                    /* @__PURE__ */ jsx("span", { children: t("ai_assistant.agents.model_override.allowlistSave", "Save choices") })
+                  ]
+                }
+              )
+            ] })
+          ] }) : null,
+          state.kind === "success" ? /* @__PURE__ */ jsxs(Alert, { variant: "success", "data-ai-agent-model-override-state": "success", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(AlertDescription, { children: state.message })
+          ] }) : null,
+          state.kind === "error" ? /* @__PURE__ */ jsxs(Alert, { variant: "destructive", "data-ai-agent-model-override-state": "error", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(AlertDescription, { children: state.message })
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "outline",
+                onClick: () => void clear(),
+                disabled: busy || !agentResolution?.override,
+                "data-ai-agent-model-clear": true,
+                children: [
+                  isClearing ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": true }),
+                  /* @__PURE__ */ jsx("span", { children: t("ai_assistant.agents.model_override.clear", "Clear override") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                onClick: () => void save(),
+                disabled: busy || !hasChange,
+                "data-ai-agent-model-save": true,
+                children: [
+                  isSaving ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Save, { className: "size-4", "aria-hidden": true }),
+                  /* @__PURE__ */ jsx("span", { children: t("ai_assistant.agents.model_override.save", "Save override") })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 function AgentDetailPanel({ agent }) {
   const t = useT();
   const queryClient = useQueryClient();
@@ -632,6 +1165,9 @@ function AgentDetailPanel({ agent }) {
   }));
   const [isSaving, setIsSaving] = React.useState(false);
   const [saveState, setSaveState] = React.useState({ kind: "idle" });
+  const { runMutation: runSavePromptOverrideMutation } = useGuardedMutation({
+    contextId: `ai-agent-prompt-override-save-${agent.id}`
+  });
   const overrideQuery = useQuery({
     queryKey: ["ai_assistant", "agent_settings", "override", agent.id],
     queryFn: () => fetchOverride(agent.id),
@@ -709,97 +1245,107 @@ function AgentDetailPanel({ agent }) {
     setIsSaving(true);
     setSaveState({ kind: "idle" });
     try {
-      const { ok, status, result } = await apiCall(
-        `/api/ai_assistant/ai/agents/${encodeURIComponent(agent.id)}/prompt-override`,
-        {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          credentials: "include",
-          body: JSON.stringify({
-            // Send both keys so a pre-Step-5.3 server still accepts the payload.
-            sections: activeOverrides,
-            overrides: activeOverrides
-          })
-        }
-      );
-      const payload = result ?? {};
-      if (!ok) {
-        const message = payload.code === "reserved_key" ? t(
-          "ai_assistant.agents.override.errors.reservedKey",
-          "Prompt overrides cannot modify policy fields (mutationPolicy, readOnly, allowedTools, acceptedMediaTypes). Remove those sections and retry."
-        ) : payload.error ?? `Failed to save overrides (${status}).`;
-        setSaveState({ kind: "error", message });
-        return;
-      }
+      const payload = await runSavePromptOverrideMutation({
+        operation: async () => {
+          const { ok, status, result } = await apiCall(
+            `/api/ai_assistant/ai/agents/${encodeURIComponent(agent.id)}/prompt-override`,
+            {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              credentials: "include",
+              body: JSON.stringify({
+                // Send both keys so a pre-Step-5.3 server still accepts the payload.
+                sections: activeOverrides,
+                overrides: activeOverrides
+              })
+            }
+          );
+          const body = result ?? {};
+          if (!ok) {
+            const message = body.code === "reserved_key" ? t(
+              "ai_assistant.agents.override.errors.reservedKey",
+              "Prompt overrides cannot modify policy fields (mutationPolicy, readOnly, allowedTools, acceptedMediaTypes). Remove those sections and retry."
+            ) : body.error ?? `Failed to save overrides (${status}).`;
+            throw new Error(message);
+          }
+          return body;
+        },
+        context: {}
+      });
       if (payload.ok === true && typeof payload.version === "number") {
+        const successMessage = t(
+          "ai_assistant.agents.override.savedMessage",
+          "Prompt override saved."
+        );
         setSaveState({
           kind: "success",
           version: payload.version,
-          message: t(
-            "ai_assistant.agents.override.savedMessage",
-            "Prompt override saved."
-          )
+          message: successMessage
         });
+        flash(successMessage, "success");
         await queryClient.invalidateQueries({
           queryKey: ["ai_assistant", "agent_settings", "override", agent.id]
         });
         return;
       }
+      const legacyMessage = payload.message ?? t(
+        "ai_assistant.agents.prompt.pendingMessage",
+        "Prompt overrides accepted."
+      );
       setSaveState({
         kind: "success",
         version: 0,
-        message: payload.message ?? t(
-          "ai_assistant.agents.prompt.pendingMessage",
-          "Prompt overrides accepted."
-        )
+        message: legacyMessage
       });
+      flash(legacyMessage, "success");
     } catch (err) {
-      setSaveState({
-        kind: "error",
-        message: err instanceof Error ? err.message : String(err)
-      });
+      const message = err instanceof Error ? err.message : String(err);
+      setSaveState({ kind: "error", message });
+      flash(message, "error");
     } finally {
       setIsSaving(false);
     }
-  }, [activeOverrides, agent.id, isSaving, queryClient, t]);
+  }, [activeOverrides, agent.id, isSaving, queryClient, runSavePromptOverrideMutation, t]);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", "data-ai-agent-detail": agent.id, children: [
     /* @__PURE__ */ jsxs("section", { className: "rounded-lg border border-border bg-background p-4", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: agent.label }),
       /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: agent.description }),
-      /* @__PURE__ */ jsxs("dl", { className: "mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4 text-sm", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("dl", { className: "mt-4 grid grid-cols-[repeat(auto-fit,minmax(min(100%,9rem),1fr))] gap-3 text-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("dt", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.meta.module", "Module") }),
-          /* @__PURE__ */ jsx("dd", { className: "mt-1 font-mono text-xs", children: agent.moduleId })
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 break-all font-mono text-xs", children: agent.moduleId })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("dt", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.meta.id", "Agent id") }),
-          /* @__PURE__ */ jsx("dd", { className: "mt-1 font-mono text-xs", children: agent.id })
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 break-all font-mono text-xs", children: agent.id })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("dt", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.meta.executionMode", "Execution mode") }),
           /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx(StatusBadge, { variant: executionModeStatusMap[agent.executionMode], children: agent.executionMode }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("dt", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.meta.mutationPolicy", "Mutation policy") }),
           /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx(
             StatusBadge,
             {
               variant: mutationPolicyStatusMap[agent.mutationPolicy] ?? "neutral",
               dot: true,
+              className: "max-w-full whitespace-normal break-all",
               children: agent.mutationPolicy
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("dt", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.meta.readOnly", "Read-only") }),
           /* @__PURE__ */ jsx("dd", { className: "mt-1 text-xs", children: agent.readOnly ? t("ai_assistant.agents.meta.readOnlyYes", "Yes") : t("ai_assistant.agents.meta.readOnlyNo", "No") })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("dt", { className: "text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: t("ai_assistant.agents.meta.maxSteps", "Max steps") }),
           /* @__PURE__ */ jsx("dd", { className: "mt-1 font-mono text-xs", children: agent.maxSteps ?? t("ai_assistant.agents.meta.unlimited", "Unlimited") })
         ] })
       ] })
     ] }),
+    /* @__PURE__ */ jsx(AgentModelOverrideSection, { agent }),
     /* @__PURE__ */ jsx(MutationPolicySection, { agent }),
     /* @__PURE__ */ jsxs(
       "section",
@@ -807,8 +1353,8 @@ function AgentDetailPanel({ agent }) {
         className: "rounded-lg border border-border bg-background p-4",
         "data-ai-agent-prompt-editor": agent.id,
         children: [
-          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3 border-b border-border pb-3", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border pb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: t("ai_assistant.agents.prompt.title", "Prompt sections") }),
               /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
                 "ai_assistant.agents.prompt.subtitle",
@@ -888,8 +1434,8 @@ function AgentDetailPanel({ agent }) {
         className: "rounded-lg border border-border bg-background p-4",
         "data-ai-agent-tools-list": agent.id,
         children: [
-          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3 border-b border-border pb-3", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border pb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: t("ai_assistant.agents.tools.title", "Allowed tools") }),
               /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
                 "ai_assistant.agents.tools.subtitle",
@@ -911,10 +1457,10 @@ function AgentDetailPanel({ agent }) {
         className: "rounded-lg border border-border bg-background p-4",
         "data-ai-agent-override-history": agent.id,
         children: [
-          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3 border-b border-border pb-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border pb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
               /* @__PURE__ */ jsx(History, { className: "size-4 text-muted-foreground", "aria-hidden": true }),
-              /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: t("ai_assistant.agents.override.history.title", "Prompt override history") }),
                 /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
                   "ai_assistant.agents.override.history.subtitle",
@@ -952,7 +1498,7 @@ function AgentDetailPanel({ agent }) {
           ) : (overrideQuery.data?.versions ?? []).slice(0, 5).map((entry) => /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "flex items-center justify-between gap-3 rounded-md border border-border bg-background px-3 py-2",
+              className: "flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background px-3 py-2",
               "data-ai-agent-override-history-row": entry.version,
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
@@ -981,7 +1527,7 @@ function AgentDetailPanel({ agent }) {
         className: "rounded-lg border border-border bg-background p-4",
         "data-ai-agent-attachments": agent.id,
         children: [
-          /* @__PURE__ */ jsx("header", { className: "flex items-center justify-between gap-3 border-b border-border pb-3", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("header", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border pb-3", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: t("ai_assistant.agents.attachments.title", "Attachment policy") }),
             /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
               "ai_assistant.agents.attachments.subtitle",
@@ -1050,8 +1596,8 @@ function AiAgentSettingsPageClient() {
   if (!agents.length) {
     return /* @__PURE__ */ jsx(EmptyAgents, {});
   }
-  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", "data-ai-agent-settings": true, children: [
-    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-4", "data-ai-agent-settings": true, children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex min-w-0 flex-col gap-1", children: [
       /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: t("ai_assistant.agents.title", "AI Agents") }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t(
         "ai_assistant.agents.subtitle",
@@ -1063,23 +1609,31 @@ function AiAgentSettingsPageClient() {
       {
         className: "flex flex-col gap-3 rounded-lg border border-border bg-background p-3",
         "data-ai-agent-settings-picker-wrap": true,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-1", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-[min(100%,16rem)] flex-1 flex-col gap-2", children: [
             /* @__PURE__ */ jsx(Label, { htmlFor: "ai-agent-settings-picker", children: t("ai_assistant.agents.agentPickerLabel", "Agent") }),
-            /* @__PURE__ */ jsx(
-              "select",
+            /* @__PURE__ */ jsxs(
+              Select,
               {
-                id: "ai-agent-settings-picker",
-                "data-ai-agent-settings-picker": true,
-                className: "h-9 rounded-md border border-input bg-background px-3 text-sm",
                 value: selectedAgentId ?? "",
-                onChange: (event) => setSelectedAgentId(event.target.value),
-                children: agents.map((agent) => /* @__PURE__ */ jsxs("option", { value: agent.id, children: [
-                  agent.label,
-                  " (",
-                  agent.id,
-                  ")"
-                ] }, agent.id))
+                onValueChange: (value) => setSelectedAgentId(value),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SelectTrigger,
+                    {
+                      id: "ai-agent-settings-picker",
+                      "data-ai-agent-settings-picker": true,
+                      className: "w-full min-w-0",
+                      children: /* @__PURE__ */ jsx(SelectValue, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SelectContent, { children: agents.map((agent) => /* @__PURE__ */ jsxs(SelectItem, { value: agent.id, children: [
+                    agent.label,
+                    " (",
+                    agent.id,
+                    ")"
+                  ] }, agent.id)) })
+                ]
               }
             )
           ] }),