🤖 feat: improve Bedrock provider UX

- Add AWS icon for Bedrock models in chat (reusing existing aws.svg)
- Parse Bedrock model names (e.g., global.anthropic.claude-sonnet-4-5-20250929-v1:0 → Sonnet 4.5)
- Handle both old (claude-3-5-sonnet) and new (claude-sonnet-4-5) naming formats
- Show Bedrock-specific configuration help in Settings instead of API Key/Base URL fields
- Add /provider bedrock suggestions with region, bedrockApiKey, accessKeyId, secretAccessKey
- Support bedrockApiKey in providers.jsonc (maps to AWS_BEARER_TOKEN_BEDROCK)

_Generated with mux_

Author: ibetitsmike

src/browser/assets/icons/aws.svg

@@ -1,6 +1,7 @@
 import React from "react";
 import AnthropicIcon from "@/browser/assets/icons/anthropic.svg?react";
 import OpenAIIcon from "@/browser/assets/icons/openai.svg?react";
+import AWSIcon from "@/browser/assets/icons/aws.svg?react";
 import { TooltipWrapper, Tooltip } from "@/browser/components/Tooltip";
 import { formatModelDisplayName } from "@/common/utils/ai/modelDisplay";
 
@@ -29,6 +30,8 @@ export const ModelDisplay: React.FC<ModelDisplayProps> = ({ modelString, showToo
         return <AnthropicIcon />;
       case "openai":
         return <OpenAIIcon />;
+      case "bedrock":
+        return <AWSIcon />;
       default:
         return null;
     }

src/browser/components/Messages/ModelDisplay.tsx

@@ -2,13 +2,67 @@ import React, { useState, useEffect, useCallback } from "react";
 import { ChevronDown, ChevronRight, Check, X } from "lucide-react";
 import type { ProvidersConfigMap } from "../types";
 import { SUPPORTED_PROVIDERS, PROVIDER_DISPLAY_NAMES } from "@/common/constants/providers";
+import type { ProviderName } from "@/common/constants/providers";
+
+interface FieldConfig {
+  key: string;
+  label: string;
+  placeholder: string;
+  type: "secret" | "text";
+  optional?: boolean;
+}
+
+/**
+ * Get provider-specific field configuration.
+ * Most providers use API Key + Base URL, but some (like Bedrock) have different needs.
+ */
+function getProviderFields(provider: ProviderName): FieldConfig[] {
+  if (provider === "bedrock") {
+    return [
+      { key: "region", label: "Region", placeholder: "us-east-1", type: "text" },
+      {
+        key: "bearerToken",
+        label: "Bearer Token",
+        placeholder: "AWS_BEARER_TOKEN_BEDROCK",
+        type: "secret",
+        optional: true,
+      },
+      {
+        key: "accessKeyId",
+        label: "Access Key ID",
+        placeholder: "AWS Access Key ID",
+        type: "secret",
+        optional: true,
+      },
+      {
+        key: "secretAccessKey",
+        label: "Secret Access Key",
+        placeholder: "AWS Secret Access Key",
+        type: "secret",
+        optional: true,
+      },
+    ];
+  }
+
+  // Default for most providers
+  return [
+    { key: "apiKey", label: "API Key", placeholder: "Enter API key", type: "secret" },
+    {
+      key: "baseUrl",
+      label: "Base URL",
+      placeholder: "https://api.example.com",
+      type: "text",
+      optional: true,
+    },
+  ];
+}
 
 export function ProvidersSection() {
   const [config, setConfig] = useState<ProvidersConfigMap>({});
   const [expandedProvider, setExpandedProvider] = useState<string | null>(null);
   const [editingField, setEditingField] = useState<{
     provider: string;
-    field: "apiKey" | "baseUrl";
+    field: string;
   } | null>(null);
   const [editValue, setEditValue] = useState("");
   const [saving, setSaving] = useState(false);
@@ -26,11 +80,14 @@ export function ProvidersSection() {
     setEditingField(null);
   };
 
-  const handleStartEdit = (provider: string, field: "apiKey" | "baseUrl") => {
+  const handleStartEdit = (provider: string, field: string, fieldConfig: FieldConfig) => {
     setEditingField({ provider, field });
-    // For API key, start empty since we only show masked value
-    // For baseUrl, show current value
-    setEditValue(field === "baseUrl" ? (config[provider]?.baseUrl ?? "") : "");
+    // For secrets, start empty since we only show masked value
+    // For text fields, show current value
+    const currentValue = (config[provider] as Record<string, unknown> | undefined)?.[field];
+    setEditValue(
+      fieldConfig.type === "text" && typeof currentValue === "string" ? currentValue : ""
+    );
   };
 
   const handleCancelEdit = () => {
@@ -44,8 +101,7 @@ export function ProvidersSection() {
     setSaving(true);
     try {
       const { provider, field } = editingField;
-      const keyPath = field === "apiKey" ? ["apiKey"] : ["baseUrl"];
-      await window.api.providers.setProviderConfig(provider, keyPath, editValue);
+      await window.api.providers.setProviderConfig(provider, [field], editValue);
 
       // Refresh config
       const cfg = await window.api.providers.getConfig();
@@ -57,10 +113,10 @@ export function ProvidersSection() {
     }
   }, [editingField, editValue]);
 
-  const handleClearBaseUrl = useCallback(async (provider: string) => {
+  const handleClearField = useCallback(async (provider: string, field: string) => {
     setSaving(true);
     try {
-      await window.api.providers.setProviderConfig(provider, ["baseUrl"], "");
+      await window.api.providers.setProviderConfig(provider, [field], "");
       const cfg = await window.api.providers.getConfig();
       setConfig(cfg);
     } finally {
@@ -72,6 +128,25 @@ export function ProvidersSection() {
     return config[provider]?.apiKeySet ?? false;
   };
 
+  const getFieldValue = (provider: string, field: string): string | undefined => {
+    const providerConfig = config[provider] as Record<string, unknown> | undefined;
+    if (!providerConfig) return undefined;
+    const value = providerConfig[field];
+    return typeof value === "string" ? value : undefined;
+  };
+
+  const isFieldSet = (provider: string, field: string, fieldConfig: FieldConfig): boolean => {
+    if (fieldConfig.type === "secret") {
+      // For apiKey, we have apiKeySet from the sanitized config
+      if (field === "apiKey") return config[provider]?.apiKeySet ?? false;
+      // For other secrets, check if the field exists in the raw config
+      // Since we don't expose secret values, we assume they're not set if undefined
+      const providerConfig = config[provider] as Record<string, unknown> | undefined;
+      return providerConfig?.[`${field}Set`] === true;
+    }
+    return !!getFieldValue(provider, field);
+  };
+
   return (
     <div className="space-y-2">
       <p className="text-muted mb-4 text-xs">
@@ -81,8 +156,8 @@ export function ProvidersSection() {
 
       {SUPPORTED_PROVIDERS.map((provider) => {
         const isExpanded = expandedProvider === provider;
-        const providerConfig = config[provider];
         const configured = isConfigured(provider);
+        const fields = getProviderFields(provider);
 
         return (
           <div
@@ -114,117 +189,83 @@ export function ProvidersSection() {
             {/* Provider settings */}
             {isExpanded && (
               <div className="border-border-medium space-y-3 border-t px-4 py-3">
-                {/* API Key */}
-                <div>
-                  <label className="text-muted mb-1 block text-xs">API Key</label>
-                  {editingField?.provider === provider && editingField?.field === "apiKey" ? (
-                    <div className="flex gap-2">
-                      <input
-                        type="password"
-                        value={editValue}
-                        onChange={(e) => setEditValue(e.target.value)}
-                        placeholder="Enter API key"
-                        className="bg-modal-bg border-border-medium focus:border-accent flex-1 rounded border px-2 py-1.5 font-mono text-xs focus:outline-none"
-                        autoFocus
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") void handleSaveEdit();
-                          if (e.key === "Escape") handleCancelEdit();
-                        }}
-                      />
-                      <button
-                        type="button"
-                        onClick={() => void handleSaveEdit()}
-                        disabled={saving}
-                        className="p-1 text-green-500 hover:text-green-400"
-                      >
-                        <Check className="h-4 w-4" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={handleCancelEdit}
-                        className="text-muted hover:text-foreground p-1"
-                      >
-                        <X className="h-4 w-4" />
-                      </button>
-                    </div>
-                  ) : (
-                    <div className="flex items-center justify-between">
-                      <span className="text-foreground font-mono text-xs">
-                        {providerConfig?.apiKeySet ? "••••••••" : "Not set"}
-                      </span>
-                      <button
-                        type="button"
-                        onClick={() => handleStartEdit(provider, "apiKey")}
-                        className="text-accent hover:text-accent-light text-xs"
-                      >
-                        {providerConfig?.apiKeySet ? "Change" : "Set"}
-                      </button>
-                    </div>
-                  )}
-                </div>
-
-                {/* Base URL (optional) */}
-                <div>
-                  <label className="text-muted mb-1 block text-xs">
-                    Base URL <span className="text-dim">(optional)</span>
-                  </label>
-                  {editingField?.provider === provider && editingField?.field === "baseUrl" ? (
-                    <div className="flex gap-2">
-                      <input
-                        type="text"
-                        value={editValue}
-                        onChange={(e) => setEditValue(e.target.value)}
-                        placeholder="https://api.example.com"
-                        className="bg-modal-bg border-border-medium focus:border-accent flex-1 rounded border px-2 py-1.5 font-mono text-xs focus:outline-none"
-                        autoFocus
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") void handleSaveEdit();
-                          if (e.key === "Escape") handleCancelEdit();
-                        }}
-                      />
-                      <button
-                        type="button"
-                        onClick={() => void handleSaveEdit()}
-                        disabled={saving}
-                        className="p-1 text-green-500 hover:text-green-400"
-                      >
-                        <Check className="h-4 w-4" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={handleCancelEdit}
-                        className="text-muted hover:text-foreground p-1"
-                      >
-                        <X className="h-4 w-4" />
-                      </button>
-                    </div>
-                  ) : (
-                    <div className="flex items-center justify-between">
-                      <span className="text-foreground font-mono text-xs">
-                        {providerConfig?.baseUrl ?? "Default"}
-                      </span>
-                      <div className="flex gap-2">
-                        {providerConfig?.baseUrl && (
+                {fields.map((fieldConfig) => {
+                  const isEditing =
+                    editingField?.provider === provider && editingField?.field === fieldConfig.key;
+                  const fieldValue = getFieldValue(provider, fieldConfig.key);
+                  const fieldIsSet = isFieldSet(provider, fieldConfig.key, fieldConfig);
+
+                  return (
+                    <div key={fieldConfig.key}>
+                      <label className="text-muted mb-1 block text-xs">
+                        {fieldConfig.label}
+                        {fieldConfig.optional && <span className="text-dim"> (optional)</span>}
+                      </label>
+                      {isEditing ? (
+                        <div className="flex gap-2">
+                          <input
+                            type={fieldConfig.type === "secret" ? "password" : "text"}
+                            value={editValue}
+                            onChange={(e) => setEditValue(e.target.value)}
+                            placeholder={fieldConfig.placeholder}
+                            className="bg-modal-bg border-border-medium focus:border-accent flex-1 rounded border px-2 py-1.5 font-mono text-xs focus:outline-none"
+                            autoFocus
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") void handleSaveEdit();
+                              if (e.key === "Escape") handleCancelEdit();
+                            }}
+                          />
                           <button
                             type="button"
-                            onClick={() => void handleClearBaseUrl(provider)}
+                            onClick={() => void handleSaveEdit()}
                             disabled={saving}
-                            className="text-muted hover:text-error text-xs"
+                            className="p-1 text-green-500 hover:text-green-400"
+                          >
+                            <Check className="h-4 w-4" />
+                          </button>
+                          <button
+                            type="button"
+                            onClick={handleCancelEdit}
+                            className="text-muted hover:text-foreground p-1"
                           >
-                            Clear
+                            <X className="h-4 w-4" />
                           </button>
-                        )}
-                        <button
-                          type="button"
-                          onClick={() => handleStartEdit(provider, "baseUrl")}
-                          className="text-accent hover:text-accent-light text-xs"
-                        >
-                          {providerConfig?.baseUrl ? "Change" : "Set"}
-                        </button>
-                      </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center justify-between">
+                          <span className="text-foreground font-mono text-xs">
+                            {fieldConfig.type === "secret"
+                              ? fieldIsSet
+                                ? "••••••••"
+                                : "Not set"
+                              : (fieldValue ?? "Default")}
+                          </span>
+                          <div className="flex gap-2">
+                            {fieldConfig.type === "text" && fieldValue && (
+                              <button
+                                type="button"
+                                onClick={() => void handleClearField(provider, fieldConfig.key)}
+                                disabled={saving}
+                                className="text-muted hover:text-error text-xs"
+                              >
+                                Clear
+                              </button>
+                            )}
+                            <button
+                              type="button"
+                              onClick={() =>
+                                handleStartEdit(provider, fieldConfig.key, fieldConfig)
+                              }
+                              className="text-accent hover:text-accent-light text-xs"
+                            >
+                              {fieldIsSet || fieldValue ? "Change" : "Set"}
+                            </button>
+                          </div>
+                        </div>
+                      )}
                     </div>
-                  )}
-                </div>
+                  );
+                })}
               </div>
             )}
           </div>

src/browser/components/Settings/sections/ProvidersSection.tsx

@@ -11,6 +11,13 @@ export interface ProviderConfigDisplay {
   apiKeySet: boolean;
   baseUrl?: string;
   models?: string[];
+  // Bedrock-specific fields
+  region?: string;
+  bedrockApiKeySet?: boolean;
+  accessKeyIdSet?: boolean;
+  secretAccessKeySet?: boolean;
+  // Allow additional fields for extensibility
+  [key: string]: unknown;
 }
 
 export type ProvidersConfigMap = Record<string, ProviderConfigDisplay>;