cowork-os 0.3.21 → 0.3.25

package/src/renderer/components/Settings.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
-import { LLMSettingsData, ThemeMode, AccentColor } from '../../shared/types';
+import { LLMSettingsData, ThemeMode, VisualTheme, AccentColor, type LLMProviderType, type CustomProviderConfig } from '../../shared/types';
+import { CUSTOM_PROVIDER_MAP } from '../../shared/llm-provider-catalog';
 import { TelegramSettings } from './TelegramSettings';
 import { DiscordSettings } from './DiscordSettings';
 import { SlackSettings } from './SlackSettings';
@@ -15,6 +16,12 @@ import { EmailSettings } from './EmailSettings';
 import { TeamsSettings } from './TeamsSettings';
 import { GoogleChatSettings } from './GoogleChatSettings';
 import { XSettings } from './XSettings';
+import { NotionSettings } from './NotionSettings';
+import { BoxSettings } from './BoxSettings';
+import { OneDriveSettings } from './OneDriveSettings';
+import { GoogleWorkspaceSettings } from './GoogleWorkspaceSettings';
+import { DropboxSettings } from './DropboxSettings';
+import { SharePointSettings } from './SharePointSettings';
 import { SearchSettings } from './SearchSettings';
 import { UpdateSettings } from './UpdateSettings';
 import { GuardrailSettings } from './GuardrailSettings';
@@ -23,6 +30,7 @@ import { QueueSettings } from './QueueSettings';
 import { SkillsSettings } from './SkillsSettings';
 import { SkillHubBrowser } from './SkillHubBrowser';
 import { MCPSettings } from './MCPSettings';
+import { ConnectorsSettings } from './ConnectorsSettings';
 import { BuiltinToolsSettings } from './BuiltinToolsSettings';
 import { TraySettings } from './TraySettings';
 import { ScheduledTasksSettings } from './ScheduledTasksSettings';
@@ -34,17 +42,22 @@ import { ExtensionsSettings } from './ExtensionsSettings';
 import { VoiceSettings } from './VoiceSettings';
 import { MissionControlPanel } from './MissionControlPanel';
 
-type SettingsTab = 'appearance' | 'personality' | 'missioncontrol' | 'tray' | 'voice' | 'llm' | 'search' | 'telegram' | 'slack' | 'whatsapp' | 'teams' | 'morechannels' | 'updates' | 'guardrails' | 'queue' | 'skills' | 'skillhub' | 'mcp' | 'tools' | 'scheduled' | 'hooks' | 'controlplane' | 'nodes' | 'extensions';
+type SettingsTab = 'appearance' | 'personality' | 'missioncontrol' | 'tray' | 'voice' | 'llm' | 'search' | 'telegram' | 'slack' | 'whatsapp' | 'teams' | 'x' | 'morechannels' | 'integrations' | 'updates' | 'guardrails' | 'queue' | 'skills' | 'skillhub' | 'connectors' | 'mcp' | 'tools' | 'scheduled' | 'hooks' | 'controlplane' | 'nodes' | 'extensions';
 
 // Secondary channels shown inside "More Channels" tab
-type SecondaryChannel = 'discord' | 'imessage' | 'signal' | 'mattermost' | 'matrix' | 'twitch' | 'line' | 'bluebubbles' | 'email' | 'googlechat' | 'x';
+type SecondaryChannel = 'discord' | 'imessage' | 'signal' | 'mattermost' | 'matrix' | 'twitch' | 'line' | 'bluebubbles' | 'email' | 'googlechat';
+
+// App integrations shown inside "Integrations" tab
+type IntegrationChannel = 'notion' | 'box' | 'onedrive' | 'googleworkspace' | 'dropbox' | 'sharepoint';
 
 interface SettingsProps {
   onBack: () => void;
   onSettingsChanged?: () => void;
   themeMode: ThemeMode;
+  visualTheme: VisualTheme;
   accentColor: AccentColor;
   onThemeChange: (theme: ThemeMode) => void;
+  onVisualThemeChange: (theme: VisualTheme) => void;
   onAccentChange: (accent: AccentColor) => void;
   initialTab?: SettingsTab;
   onShowOnboarding?: () => void;
@@ -246,12 +259,15 @@ const sidebarItems: Array<{ tab: SettingsTab; label: string; icon: React.ReactNo
   { tab: 'telegram', label: 'Telegram', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" /></svg> },
   { tab: 'slack', label: 'Slack', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z" /><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z" /><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z" /><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z" /><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z" /><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z" /><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z" /></svg> },
   { tab: 'teams', label: 'Teams', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg> },
+  { tab: 'x', label: 'X (Twitter)', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 4l14 16" /><path d="M19 4L5 20" /></svg> },
   { tab: 'morechannels', label: 'More Channels', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg> },
+  { tab: 'integrations', label: 'Integrations', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v4" /><path d="M12 18v4" /><path d="M4.93 4.93l2.83 2.83" /><path d="M16.24 16.24l2.83 2.83" /><path d="M2 12h4" /><path d="M18 12h4" /><path d="M4.93 19.07l2.83-2.83" /><path d="M16.24 7.76l2.83-2.83" /><circle cx="12" cy="12" r="3" /></svg> },
   { tab: 'guardrails', label: 'Guardrails', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg> },
   { tab: 'queue', label: 'Task Queue', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="4" rx="1" /><rect x="3" y="10" width="18" height="4" rx="1" /><rect x="3" y="16" width="18" height="4" rx="1" /></svg> },
   { tab: 'skills', label: 'Custom Skills', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg> },
   { tab: 'skillhub', label: 'SkillHub', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /><path d="M8 12h8" /></svg> },
   { tab: 'scheduled', label: 'Scheduled Tasks', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg> },
+  { tab: 'connectors', label: 'Connectors', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="7" height="7" rx="1" /><rect x="14" y="4" width="7" height="7" rx="1" /><rect x="3" y="13" width="7" height="7" rx="1" /><rect x="14" y="13" width="7" height="7" rx="1" /></svg> },
   { tab: 'mcp', label: 'MCP Servers', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" /><path d="M7 8h2M15 8h2" /><path d="M9 12h6" /></svg> },
   { tab: 'tools', label: 'Built-in Tools', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /></svg> },
   { tab: 'hooks', label: 'Webhooks', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg> },
@@ -273,12 +289,100 @@ const secondaryChannelItems: Array<{ key: SecondaryChannel; label: string; icon:
   { key: 'matrix', label: 'Matrix', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="2" /><path d="M7 7h10M7 12h10M7 17h10" /></svg> },
   { key: 'twitch', label: 'Twitch', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 2H3v16h5v4l4-4h5l4-4V2zM11 11V7M16 11V7" /></svg> },
   { key: 'bluebubbles', label: 'BlueBubbles', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" y1="9" x2="9.01" y2="9" /><line x1="15" y1="9" x2="15.01" y2="9" /></svg> },
-  { key: 'x', label: 'X (Twitter)', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 4l14 16" /><path d="M19 4L5 20" /></svg> },
 ];
 
-export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, onThemeChange, onAccentChange, initialTab = 'appearance', onShowOnboarding, onboardingCompletedAt }: SettingsProps) {
+// App integrations configuration for "Integrations" tab
+const integrationItems: Array<{ key: IntegrationChannel; label: string; icon: React.ReactNode }> = [
+  { key: 'notion', label: 'Notion', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 7h8M8 11h8M8 15h6" /></svg> },
+  { key: 'sharepoint', label: 'SharePoint', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M7 8h10M7 12h6" /></svg> },
+  { key: 'onedrive', label: 'OneDrive', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 18h10a4 4 0 0 0 0-8 5 5 0 0 0-9.7-1.6A4 4 0 0 0 7 18z" /></svg> },
+  { key: 'googleworkspace', label: 'Google Workspace', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 7l4-4h8l4 4-8 14H8L4 7z" /></svg> },
+  { key: 'box', label: 'Box', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="3" /><path d="M7 8h10M7 12h10M7 16h6" /></svg> },
+  { key: 'dropbox', label: 'Dropbox', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 5l5 3-5 3-5-3 5-3zm10 0l5 3-5 3-5-3 5-3zM7 13l5 3-5 3-5-3 5-3zm10 0l5 3-5 3-5-3 5-3z" /></svg> },
+];
+
+const LLM_PROVIDER_ICONS: Record<string, JSX.Element> = {
+  anthropic: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+    </svg>
+  ),
+  openai: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </svg>
+  ),
+  azure: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M5 16a4 4 0 0 1 2-7.46A5 5 0 0 1 17 9h1a4 4 0 1 1 0 8H6a3 3 0 0 1-1-1z" />
+    </svg>
+  ),
+  gemini: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+    </svg>
+  ),
+  openrouter: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+    </svg>
+  ),
+  ollama: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="4" y="4" width="16" height="16" rx="2" />
+      <path d="M9 9h6v6H9z" />
+    </svg>
+  ),
+  groq: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M4 12h16" />
+      <path d="M12 4v16" />
+      <circle cx="12" cy="12" r="9" />
+    </svg>
+  ),
+  xai: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M4 4l16 16" />
+      <path d="M20 4L4 20" />
+    </svg>
+  ),
+  kimi: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" />
+    </svg>
+  ),
+  bedrock: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+    </svg>
+  ),
+};
+
+const getLLMProviderIcon = (providerType: string, customEntry?: { compatibility?: string }) => {
+  if (LLM_PROVIDER_ICONS[providerType]) {
+    return LLM_PROVIDER_ICONS[providerType];
+  }
+  if (customEntry?.compatibility === 'anthropic') {
+    return LLM_PROVIDER_ICONS.anthropic;
+  }
+  if (customEntry?.compatibility === 'openai') {
+    return LLM_PROVIDER_ICONS.openai;
+  }
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M8 12h8" />
+      <path d="M12 8v8" />
+    </svg>
+  );
+};
+
+export function Settings({ onBack, onSettingsChanged, themeMode, visualTheme, accentColor, onThemeChange, onVisualThemeChange, onAccentChange, initialTab = 'appearance', onShowOnboarding, onboardingCompletedAt }: SettingsProps) {
   const [activeTab, setActiveTab] = useState<SettingsTab>(initialTab);
   const [activeSecondaryChannel, setActiveSecondaryChannel] = useState<SecondaryChannel>('discord');
+  const [activeIntegration, setActiveIntegration] = useState<IntegrationChannel>('notion');
   const [sidebarSearch, setSidebarSearch] = useState('');
   const [settings, setSettings] = useState<LLMSettingsData>({
     providerType: 'anthropic',
@@ -314,6 +418,7 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
 
   // OpenRouter state
   const [openrouterApiKey, setOpenrouterApiKey] = useState('');
+  const [openrouterBaseUrl, setOpenrouterBaseUrl] = useState('');
   const [openrouterModel, setOpenrouterModel] = useState('anthropic/claude-3.5-sonnet');
   const [openrouterModels, setOpenrouterModels] = useState<Array<{ id: string; name: string; context_length: number }>>([]);
   const [loadingOpenRouterModels, setLoadingOpenRouterModels] = useState(false);
@@ -327,6 +432,37 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
   const [openaiOAuthConnected, setOpenaiOAuthConnected] = useState(false);
   const [openaiOAuthLoading, setOpenaiOAuthLoading] = useState(false);
 
+  // Azure OpenAI state
+  const [azureApiKey, setAzureApiKey] = useState('');
+  const [azureEndpoint, setAzureEndpoint] = useState('');
+  const [azureDeployment, setAzureDeployment] = useState('');
+  const [azureDeploymentsText, setAzureDeploymentsText] = useState('');
+  const [azureApiVersion, setAzureApiVersion] = useState('2024-02-15-preview');
+
+  // Groq state
+  const [groqApiKey, setGroqApiKey] = useState('');
+  const [groqBaseUrl, setGroqBaseUrl] = useState('');
+  const [groqModel, setGroqModel] = useState('llama-3.1-8b-instant');
+  const [groqModels, setGroqModels] = useState<Array<{ id: string; name: string }>>([]);
+  const [loadingGroqModels, setLoadingGroqModels] = useState(false);
+
+  // xAI state
+  const [xaiApiKey, setXaiApiKey] = useState('');
+  const [xaiBaseUrl, setXaiBaseUrl] = useState('');
+  const [xaiModel, setXaiModel] = useState('grok-4-fast-non-reasoning');
+  const [xaiModels, setXaiModels] = useState<Array<{ id: string; name: string }>>([]);
+  const [loadingXaiModels, setLoadingXaiModels] = useState(false);
+
+  // Kimi state
+  const [kimiApiKey, setKimiApiKey] = useState('');
+  const [kimiBaseUrl, setKimiBaseUrl] = useState('');
+  const [kimiModel, setKimiModel] = useState('kimi-k2.5');
+  const [kimiModels, setKimiModels] = useState<Array<{ id: string; name: string }>>([]);
+  const [loadingKimiModels, setLoadingKimiModels] = useState(false);
+
+  // Custom provider state
+  const [customProviders, setCustomProviders] = useState<Record<string, CustomProviderConfig>>({});
+
   // Bedrock state
   const [bedrockModel, setBedrockModel] = useState('');
   const [bedrockModels, setBedrockModels] = useState<Array<{ id: string; name: string; description: string }>>([]);
@@ -336,6 +472,78 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
     loadConfigStatus();
   }, []);
 
+  const resolveCustomProviderId = (providerType: LLMProviderType) =>
+    providerType === 'kimi-coding' ? 'kimi-code' : providerType;
+
+  const updateCustomProvider = (providerType: LLMProviderType, updates: Partial<CustomProviderConfig>) => {
+    const resolvedType = resolveCustomProviderId(providerType);
+    setCustomProviders((prev) => ({
+      ...prev,
+      [resolvedType]: {
+        ...(prev[resolvedType] || {}),
+        ...updates,
+      },
+    }));
+  };
+
+  const sanitizeCustomProviders = (providers: Record<string, CustomProviderConfig>) => {
+    const sanitized: Record<string, CustomProviderConfig> = {};
+    Object.entries(providers).forEach(([key, value]) => {
+      const apiKey = value.apiKey?.trim();
+      const model = value.model?.trim();
+      const baseUrl = value.baseUrl?.trim();
+      if (apiKey || model || baseUrl) {
+        sanitized[key] = {
+          ...(apiKey ? { apiKey } : {}),
+          ...(model ? { model } : {}),
+          ...(baseUrl ? { baseUrl } : {}),
+        };
+      }
+    });
+    return Object.keys(sanitized).length > 0 ? sanitized : undefined;
+  };
+
+  const parseAzureDeployments = (value: string): string[] => {
+    const seen = new Set<string>();
+    return value
+      .split(/[\n,]+/)
+      .map((entry) => entry.trim())
+      .filter(Boolean)
+      .filter((entry) => {
+        if (seen.has(entry)) {
+          return false;
+        }
+        seen.add(entry);
+        return true;
+      });
+  };
+
+  const buildAzureSettings = () => {
+    const deployments = parseAzureDeployments(azureDeploymentsText);
+    let deployment = azureDeployment.trim();
+    if (deployment) {
+      if (!deployments.includes(deployment)) {
+        deployments.unshift(deployment);
+      }
+    } else if (deployments.length > 0) {
+      deployment = deployments[0];
+    }
+
+    return {
+      deployment: deployment || undefined,
+      deployments: deployments.length > 0 ? deployments : undefined,
+    };
+  };
+
+  useEffect(() => {
+    if (!azureDeployment) {
+      const deployments = parseAzureDeployments(azureDeploymentsText);
+      if (deployments[0]) {
+        setAzureDeployment(deployments[0]);
+      }
+    }
+  }, [azureDeploymentsText, azureDeployment]);
+
   const loadConfigStatus = async () => {
     try {
       setLoading(true);
@@ -349,6 +557,18 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
       // Load full settings separately for bedrock config
       const loadedSettings = await window.electronAPI.getLLMSettings();
       setSettings(loadedSettings);
+      if (loadedSettings.customProviders) {
+        const normalized = { ...loadedSettings.customProviders };
+        if (normalized['kimi-coding'] && !normalized['kimi-code']) {
+          normalized['kimi-code'] = normalized['kimi-coding'];
+        }
+        if (normalized['kimi-coding']) {
+          delete normalized['kimi-coding'];
+        }
+        setCustomProviders(normalized);
+      } else {
+        setCustomProviders({});
+      }
 
       // Set form state from loaded settings
       if (loadedSettings.bedrock?.region) {
@@ -387,6 +607,9 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
       if (loadedSettings.openrouter?.apiKey) {
         setOpenrouterApiKey(loadedSettings.openrouter.apiKey);
       }
+      if (loadedSettings.openrouter?.baseUrl) {
+        setOpenrouterBaseUrl(loadedSettings.openrouter.baseUrl);
+      }
       if (loadedSettings.openrouter?.model) {
         setOpenrouterModel(loadedSettings.openrouter.model);
       }
@@ -419,6 +642,62 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
         setOpenaiAuthMethod('oauth');
       }
 
+      // Set Azure OpenAI form state
+      if (loadedSettings.azure?.apiKey) {
+        setAzureApiKey(loadedSettings.azure.apiKey);
+      }
+      if (loadedSettings.azure?.endpoint) {
+        setAzureEndpoint(loadedSettings.azure.endpoint);
+      }
+      {
+        const loadedDeployments = (loadedSettings.azure?.deployments && loadedSettings.azure.deployments.length > 0)
+          ? loadedSettings.azure.deployments
+          : (loadedSettings.azure?.deployment ? [loadedSettings.azure.deployment] : []);
+        if (loadedDeployments.length > 0) {
+          setAzureDeploymentsText(loadedDeployments.join('\n'));
+        }
+        const selectedDeployment = loadedSettings.azure?.deployment || loadedDeployments[0];
+        if (selectedDeployment) {
+          setAzureDeployment(selectedDeployment);
+        }
+      }
+      if (loadedSettings.azure?.apiVersion) {
+        setAzureApiVersion(loadedSettings.azure.apiVersion);
+      }
+
+      // Set Groq form state
+      if (loadedSettings.groq?.apiKey) {
+        setGroqApiKey(loadedSettings.groq.apiKey);
+      }
+      if (loadedSettings.groq?.baseUrl) {
+        setGroqBaseUrl(loadedSettings.groq.baseUrl);
+      }
+      if (loadedSettings.groq?.model) {
+        setGroqModel(loadedSettings.groq.model);
+      }
+
+      // Set xAI form state
+      if (loadedSettings.xai?.apiKey) {
+        setXaiApiKey(loadedSettings.xai.apiKey);
+      }
+      if (loadedSettings.xai?.baseUrl) {
+        setXaiBaseUrl(loadedSettings.xai.baseUrl);
+      }
+      if (loadedSettings.xai?.model) {
+        setXaiModel(loadedSettings.xai.model);
+      }
+
+      // Set Kimi form state
+      if (loadedSettings.kimi?.apiKey) {
+        setKimiApiKey(loadedSettings.kimi.apiKey);
+      }
+      if (loadedSettings.kimi?.baseUrl) {
+        setKimiBaseUrl(loadedSettings.kimi.baseUrl);
+      }
+      if (loadedSettings.kimi?.model) {
+        setKimiModel(loadedSettings.kimi.model);
+      }
+
       // Set Bedrock form state (access key and secret key are set earlier)
       if (loadedSettings.bedrock?.accessKeyId) {
         setAwsAccessKeyId(loadedSettings.bedrock.accessKeyId);
@@ -514,7 +793,7 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
   const loadOpenRouterModels = async (apiKey?: string) => {
     try {
       setLoadingOpenRouterModels(true);
-      const models = await window.electronAPI.getOpenRouterModels(apiKey || openrouterApiKey);
+      const models = await window.electronAPI.getOpenRouterModels(apiKey || openrouterApiKey, openrouterBaseUrl || undefined);
       setOpenrouterModels(models || []);
       // If we got models and current model isn't in the list, select the first one
       if (models && models.length > 0 && !models.some(m => m.id === openrouterModel)) {
@@ -549,6 +828,93 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
     }
   };
 
+  const loadGroqModels = async (apiKey?: string) => {
+    try {
+      setLoadingGroqModels(true);
+      const models = await window.electronAPI.getGroqModels(apiKey || groqApiKey, groqBaseUrl || undefined);
+      setGroqModels(models || []);
+      if (models && models.length > 0 && !models.some(m => m.id === groqModel)) {
+        setGroqModel(models[0].id);
+      }
+      onSettingsChanged?.();
+    } catch (error) {
+      console.error('Failed to load Groq models:', error);
+      setGroqModels([]);
+    } finally {
+      setLoadingGroqModels(false);
+    }
+  };
+
+  const loadXAIModels = async (apiKey?: string) => {
+    try {
+      setLoadingXaiModels(true);
+      const models = await window.electronAPI.getXAIModels(apiKey || xaiApiKey, xaiBaseUrl || undefined);
+      setXaiModels(models || []);
+      if (models && models.length > 0 && !models.some(m => m.id === xaiModel)) {
+        setXaiModel(models[0].id);
+      }
+      onSettingsChanged?.();
+    } catch (error) {
+      console.error('Failed to load xAI models:', error);
+      setXaiModels([]);
+    } finally {
+      setLoadingXaiModels(false);
+    }
+  };
+
+  const loadKimiModels = async (apiKey?: string) => {
+    try {
+      setLoadingKimiModels(true);
+      const models = await window.electronAPI.getKimiModels(apiKey || kimiApiKey, kimiBaseUrl || undefined);
+      setKimiModels(models || []);
+      if (models && models.length > 0 && !models.some(m => m.id === kimiModel)) {
+        setKimiModel(models[0].id);
+      }
+      onSettingsChanged?.();
+    } catch (error) {
+      console.error('Failed to load Kimi models:', error);
+      setKimiModels([]);
+    } finally {
+      setLoadingKimiModels(false);
+    }
+  };
+
+  const handleProviderSelect = (providerType: LLMProviderType) => {
+    setSettings((prev) => ({ ...prev, providerType }));
+
+    const resolvedCustomType = resolveCustomProviderId(providerType);
+    const customEntry = CUSTOM_PROVIDER_MAP.get(resolvedCustomType);
+    if (customEntry) {
+      setCustomProviders((prev) => {
+        const existing = prev[resolvedCustomType] || {};
+        const updated: CustomProviderConfig = { ...existing };
+        if (!updated.model && customEntry.defaultModel) {
+          updated.model = customEntry.defaultModel;
+        }
+        if (!updated.baseUrl && customEntry.baseUrl) {
+          updated.baseUrl = customEntry.baseUrl;
+        }
+        return { ...prev, [resolvedCustomType]: updated };
+      });
+    }
+
+    if (providerType === 'ollama') {
+      loadOllamaModels();
+    } else if (providerType === 'gemini') {
+      loadGeminiModels();
+    } else if (providerType === 'openrouter') {
+      loadOpenRouterModels();
+    } else if (providerType === 'openai') {
+      loadOpenAIModels();
+    } else if (providerType === 'groq') {
+      loadGroqModels();
+    } else if (providerType === 'xai') {
+      loadXAIModels();
+    } else if (providerType === 'kimi') {
+      loadKimiModels();
+    }
+  };
+
   const handleOpenAIOAuthLogin = async () => {
     try {
       setOpenaiOAuthLoading(true);
@@ -613,6 +979,22 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
       setSaving(true);
       setTestResult(null);
 
+      const sanitizedCustomProviders = sanitizeCustomProviders(customProviders) || {};
+      const resolvedProviderTypeForSave = resolveCustomProviderId(settings.providerType as LLMProviderType);
+      const selectedCustomEntry = CUSTOM_PROVIDER_MAP.get(resolvedProviderTypeForSave);
+      if (selectedCustomEntry) {
+        const existing = sanitizedCustomProviders[resolvedProviderTypeForSave] || {};
+        const withDefaults: CustomProviderConfig = { ...existing };
+        if (!withDefaults.model && selectedCustomEntry.defaultModel) {
+          withDefaults.model = selectedCustomEntry.defaultModel;
+        }
+        if (!withDefaults.baseUrl && selectedCustomEntry.baseUrl) {
+          withDefaults.baseUrl = selectedCustomEntry.baseUrl;
+        }
+        sanitizedCustomProviders[resolvedProviderTypeForSave] = withDefaults;
+      }
+      const azureSettings = buildAzureSettings();
+
       // Always save settings for ALL providers to preserve API keys and model selections
       // when switching between providers
       const settingsToSave: LLMSettingsData = {
@@ -648,6 +1030,7 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
         openrouter: {
           apiKey: openrouterApiKey || undefined,
           model: openrouterModel || undefined,
+          baseUrl: openrouterBaseUrl || undefined,
         },
         // Always include openai settings
         openai: {
@@ -655,6 +1038,33 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
           model: openaiModel || undefined,
           authMethod: openaiAuthMethod,
         },
+        // Always include Azure OpenAI settings
+        azure: {
+          apiKey: azureApiKey || undefined,
+          endpoint: azureEndpoint || undefined,
+          deployment: azureSettings.deployment,
+          deployments: azureSettings.deployments,
+          apiVersion: azureApiVersion || undefined,
+        },
+        // Always include Groq settings
+        groq: {
+          apiKey: groqApiKey || undefined,
+          model: groqModel || undefined,
+          baseUrl: groqBaseUrl || undefined,
+        },
+        // Always include xAI settings
+        xai: {
+          apiKey: xaiApiKey || undefined,
+          model: xaiModel || undefined,
+          baseUrl: xaiBaseUrl || undefined,
+        },
+        // Always include Kimi settings
+        kimi: {
+          apiKey: kimiApiKey || undefined,
+          model: kimiModel || undefined,
+          baseUrl: kimiBaseUrl || undefined,
+        },
+        customProviders: Object.keys(sanitizedCustomProviders).length > 0 ? sanitizedCustomProviders : undefined,
       };
 
       await window.electronAPI.saveLLMSettings(settingsToSave);
@@ -672,6 +1082,9 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
       setTesting(true);
       setTestResult(null);
 
+      const sanitizedCustomProviders = sanitizeCustomProviders(customProviders) || {};
+      const azureSettings = buildAzureSettings();
+
       const testConfig = {
         providerType: settings.providerType,
         modelKey: settings.modelKey,
@@ -699,6 +1112,7 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
         openrouter: settings.providerType === 'openrouter' ? {
           apiKey: openrouterApiKey || undefined,
           model: openrouterModel || undefined,
+          baseUrl: openrouterBaseUrl || undefined,
         } : undefined,
         openai: settings.providerType === 'openai' ? {
           apiKey: openaiAuthMethod === 'api_key' ? (openaiApiKey || undefined) : undefined,
@@ -706,6 +1120,29 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
           authMethod: openaiAuthMethod,
           // OAuth tokens are handled by the backend from stored settings
         } : undefined,
+        azure: settings.providerType === 'azure' ? {
+          apiKey: azureApiKey || undefined,
+          endpoint: azureEndpoint || undefined,
+          deployment: azureSettings.deployment,
+          deployments: azureSettings.deployments,
+          apiVersion: azureApiVersion || undefined,
+        } : undefined,
+        groq: settings.providerType === 'groq' ? {
+          apiKey: groqApiKey || undefined,
+          model: groqModel || undefined,
+          baseUrl: groqBaseUrl || undefined,
+        } : undefined,
+        xai: settings.providerType === 'xai' ? {
+          apiKey: xaiApiKey || undefined,
+          model: xaiModel || undefined,
+          baseUrl: xaiBaseUrl || undefined,
+        } : undefined,
+        kimi: settings.providerType === 'kimi' ? {
+          apiKey: kimiApiKey || undefined,
+          model: kimiModel || undefined,
+          baseUrl: kimiBaseUrl || undefined,
+        } : undefined,
+        customProviders: Object.keys(sanitizedCustomProviders).length > 0 ? sanitizedCustomProviders : undefined,
       };
 
       const result = await window.electronAPI.testLLMProvider(testConfig);
@@ -717,21 +1154,21 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
     }
   };
 
+  const resolvedProviderType = resolveCustomProviderId(settings.providerType as LLMProviderType);
+  const selectedCustomProvider = CUSTOM_PROVIDER_MAP.get(resolvedProviderType);
+  const selectedCustomConfig = selectedCustomProvider ? (customProviders[resolvedProviderType] || {}) : {};
+
   return (
     <div className="settings-page">
-      <div className="settings-page-header">
-        <h1>Settings</h1>
-      </div>
-
       <div className="settings-page-layout">
         <div className="settings-sidebar">
+          <h1 className="settings-sidebar-title">Settings</h1>
           <button className="settings-back-btn" onClick={onBack}>
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <path d="M19 12H5M12 19l-7-7 7-7" />
             </svg>
             Back
           </button>
-          <div className="settings-nav-divider" />
           <div className="settings-sidebar-search">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <circle cx="11" cy="11" r="8" />
@@ -783,720 +1220,1057 @@ export function Settings({ onBack, onSettingsChanged, themeMode, accentColor, on
               if (item.macOnly && !navigator.platform.toLowerCase().includes('mac')) return false;
               return item.label.toLowerCase().includes(sidebarSearch.toLowerCase());
             }).length === 0 && (
-              <div className="settings-nav-no-results">No matching settings</div>
-            )}
+                <div className="settings-nav-no-results">No matching settings</div>
+              )}
           </div>
         </div>
 
-        <div className="settings-content">
-          {activeTab === 'appearance' ? (
-            <AppearanceSettings
-              themeMode={themeMode}
-              accentColor={accentColor}
-              onThemeChange={onThemeChange}
-              onAccentChange={onAccentChange}
-              onShowOnboarding={onShowOnboarding}
-              onboardingCompletedAt={onboardingCompletedAt}
-            />
-          ) : activeTab === 'personality' ? (
-            <PersonalitySettings onSettingsChanged={onSettingsChanged} />
-          ) : activeTab === 'missioncontrol' ? (
-            <MissionControlPanel />
-          ) : activeTab === 'tray' ? (
-            <TraySettings />
-          ) : activeTab === 'voice' ? (
-            <VoiceSettings />
-          ) : activeTab === 'telegram' ? (
-            <TelegramSettings />
-          ) : activeTab === 'slack' ? (
-            <SlackSettings />
-          ) : activeTab === 'whatsapp' ? (
-            <WhatsAppSettings />
-          ) : activeTab === 'teams' ? (
-            <TeamsSettings />
-          ) : activeTab === 'morechannels' ? (
-            <div className="more-channels-panel">
-              <div className="more-channels-header">
-                <h2>More Channels</h2>
-                <p className="settings-description">Configure additional messaging platforms and integrations</p>
-              </div>
-              <div className="more-channels-tabs">
-                {secondaryChannelItems.map(item => (
-                  <button
-                    key={item.key}
-                    className={`more-channels-tab ${activeSecondaryChannel === item.key ? 'active' : ''}`}
-                    onClick={() => setActiveSecondaryChannel(item.key)}
-                  >
-                    {item.icon}
-                    <span>{item.label}</span>
-                  </button>
-                ))}
+        <div className="settings-content-card">
+          <div className="settings-content">
+            {activeTab === 'appearance' ? (
+              <AppearanceSettings
+                themeMode={themeMode}
+                visualTheme={visualTheme}
+                accentColor={accentColor}
+                onThemeChange={onThemeChange}
+                onVisualThemeChange={onVisualThemeChange}
+                onAccentChange={onAccentChange}
+                onShowOnboarding={onShowOnboarding}
+                onboardingCompletedAt={onboardingCompletedAt}
+              />
+            ) : activeTab === 'personality' ? (
+              <PersonalitySettings onSettingsChanged={onSettingsChanged} />
+            ) : activeTab === 'missioncontrol' ? (
+              <MissionControlPanel />
+            ) : activeTab === 'tray' ? (
+              <TraySettings />
+            ) : activeTab === 'voice' ? (
+              <VoiceSettings />
+            ) : activeTab === 'telegram' ? (
+              <TelegramSettings />
+            ) : activeTab === 'slack' ? (
+              <SlackSettings />
+            ) : activeTab === 'whatsapp' ? (
+              <WhatsAppSettings />
+            ) : activeTab === 'teams' ? (
+              <TeamsSettings />
+            ) : activeTab === 'x' ? (
+              <XSettings />
+            ) : activeTab === 'morechannels' ? (
+              <div className="more-channels-panel">
+                <div className="more-channels-header">
+                  <h2>More Channels</h2>
+                  <p className="settings-description">Configure additional messaging platforms</p>
+                </div>
+                <div className="more-channels-tabs">
+                  {secondaryChannelItems.map(item => (
+                    <button
+                      key={item.key}
+                      className={`more-channels-tab ${activeSecondaryChannel === item.key ? 'active' : ''}`}
+                      onClick={() => setActiveSecondaryChannel(item.key)}
+                    >
+                      {item.icon}
+                      <span>{item.label}</span>
+                    </button>
+                  ))}
+                </div>
+                <div className="more-channels-content">
+                  {activeSecondaryChannel === 'discord' && <DiscordSettings />}
+                  {activeSecondaryChannel === 'imessage' && <ImessageSettings />}
+                  {activeSecondaryChannel === 'signal' && <SignalSettings />}
+                  {activeSecondaryChannel === 'mattermost' && <MattermostSettings />}
+                  {activeSecondaryChannel === 'matrix' && <MatrixSettings />}
+                  {activeSecondaryChannel === 'twitch' && <TwitchSettings />}
+                  {activeSecondaryChannel === 'line' && <LineSettings />}
+                  {activeSecondaryChannel === 'bluebubbles' && <BlueBubblesSettings />}
+                  {activeSecondaryChannel === 'email' && <EmailSettings />}
+                  {activeSecondaryChannel === 'googlechat' && <GoogleChatSettings />}
+                </div>
               </div>
-              <div className="more-channels-content">
-                {activeSecondaryChannel === 'discord' && <DiscordSettings />}
-                {activeSecondaryChannel === 'imessage' && <ImessageSettings />}
-                {activeSecondaryChannel === 'signal' && <SignalSettings />}
-                {activeSecondaryChannel === 'mattermost' && <MattermostSettings />}
-                {activeSecondaryChannel === 'matrix' && <MatrixSettings />}
-                {activeSecondaryChannel === 'twitch' && <TwitchSettings />}
-                {activeSecondaryChannel === 'line' && <LineSettings />}
-                {activeSecondaryChannel === 'bluebubbles' && <BlueBubblesSettings />}
-                {activeSecondaryChannel === 'email' && <EmailSettings />}
-                {activeSecondaryChannel === 'googlechat' && <GoogleChatSettings />}
-                {activeSecondaryChannel === 'x' && <XSettings />}
+            ) : activeTab === 'integrations' ? (
+              <div className="integrations-panel">
+                <div className="integrations-header">
+                  <h2>Integrations</h2>
+                  <p className="settings-description">Connect productivity and storage tools for the agent</p>
+                </div>
+                <div className="integrations-tabs">
+                  {integrationItems.map(item => (
+                    <button
+                      key={item.key}
+                      className={`integrations-tab ${activeIntegration === item.key ? 'active' : ''}`}
+                      onClick={() => setActiveIntegration(item.key)}
+                    >
+                      {item.icon}
+                      <span>{item.label}</span>
+                    </button>
+                  ))}
+                </div>
+                <div className="integrations-content">
+                  {activeIntegration === 'notion' && <NotionSettings />}
+                  {activeIntegration === 'box' && <BoxSettings />}
+                  {activeIntegration === 'onedrive' && <OneDriveSettings />}
+                  {activeIntegration === 'googleworkspace' && <GoogleWorkspaceSettings />}
+                  {activeIntegration === 'dropbox' && <DropboxSettings />}
+                  {activeIntegration === 'sharepoint' && <SharePointSettings />}
+                </div>
               </div>
-            </div>
-          ) : activeTab === 'search' ? (
-            <SearchSettings />
-          ) : activeTab === 'updates' ? (
-            <UpdateSettings />
-          ) : activeTab === 'guardrails' ? (
-            <GuardrailSettings />
-          ) : activeTab === 'queue' ? (
-            <QueueSettings />
-          ) : activeTab === 'skills' ? (
-            <SkillsSettings />
-          ) : activeTab === 'skillhub' ? (
-            <SkillHubBrowser />
-          ) : activeTab === 'scheduled' ? (
-            <ScheduledTasksSettings />
-          ) : activeTab === 'mcp' ? (
-            <MCPSettings />
-          ) : activeTab === 'tools' ? (
-            <BuiltinToolsSettings />
-          ) : activeTab === 'hooks' ? (
-            <HooksSettings />
-          ) : activeTab === 'controlplane' ? (
-            <ControlPlaneSettings />
-          ) : activeTab === 'nodes' ? (
-            <NodesSettings />
-          ) : activeTab === 'extensions' ? (
-            <ExtensionsSettings />
-          ) : loading ? (
-            <div className="settings-loading">Loading settings...</div>
-          ) : (
-            <>
-              <div className="settings-section">
-                <h3>LLM Provider</h3>
-                <p className="settings-description">
-                  Choose which service to use for AI model calls
-                </p>
-
-                <div className="provider-options">
+            ) : activeTab === 'search' ? (
+              <SearchSettings />
+            ) : activeTab === 'updates' ? (
+              <UpdateSettings />
+            ) : activeTab === 'guardrails' ? (
+              <GuardrailSettings />
+            ) : activeTab === 'queue' ? (
+              <QueueSettings />
+            ) : activeTab === 'skills' ? (
+              <SkillsSettings />
+            ) : activeTab === 'skillhub' ? (
+              <SkillHubBrowser />
+            ) : activeTab === 'scheduled' ? (
+              <ScheduledTasksSettings />
+            ) : activeTab === 'connectors' ? (
+              <ConnectorsSettings />
+            ) : activeTab === 'mcp' ? (
+              <MCPSettings />
+            ) : activeTab === 'tools' ? (
+              <BuiltinToolsSettings />
+            ) : activeTab === 'hooks' ? (
+              <HooksSettings />
+            ) : activeTab === 'controlplane' ? (
+              <ControlPlaneSettings />
+            ) : activeTab === 'nodes' ? (
+              <NodesSettings />
+            ) : activeTab === 'extensions' ? (
+              <ExtensionsSettings />
+            ) : loading ? (
+              <div className="settings-loading">Loading settings...</div>
+            ) : (
+              <div className="llm-provider-panel">
+                <div className="llm-provider-header">
+                  <h2>LLM Provider</h2>
+                  <p className="settings-description">
+                    Choose which service to use for AI model calls
+                  </p>
+                </div>
+                <div className="llm-provider-tabs">
                   {providers.map(provider => {
-                    const isAnthropic = provider.type === 'anthropic';
-                    const isBedrock = provider.type === 'bedrock';
-                    const isOllama = provider.type === 'ollama';
-                    const isGemini = provider.type === 'gemini';
-                    const isOpenRouter = provider.type === 'openrouter';
-                    const isOpenAI = provider.type === 'openai';
+                    const providerType = provider.type as LLMProviderType;
+                    const resolvedCustomType = resolveCustomProviderId(providerType);
+                    const customEntry = CUSTOM_PROVIDER_MAP.get(resolvedCustomType);
+                    const icon = getLLMProviderIcon(providerType, customEntry);
 
                     return (
-                      <label
+                      <button
                         key={provider.type}
-                        className={`provider-option ${settings.providerType === provider.type ? 'selected' : ''}`}
+                        type="button"
+                        className={`llm-provider-tab ${settings.providerType === provider.type ? 'active' : ''} ${provider.configured ? 'configured' : ''}`}
+                        onClick={() => handleProviderSelect(providerType)}
                       >
-                        <input
-                          type="radio"
-                          name="provider"
-                          value={provider.type}
-                          checked={settings.providerType === provider.type}
-                          onChange={() => {
-                            setSettings({ ...settings, providerType: provider.type as 'anthropic' | 'bedrock' | 'ollama' | 'gemini' | 'openrouter' | 'openai' });
-                            // Load models when selecting provider
-                            if (provider.type === 'ollama') {
-                              loadOllamaModels();
-                            } else if (provider.type === 'gemini') {
-                              loadGeminiModels();
-                            } else if (provider.type === 'openrouter') {
-                              loadOpenRouterModels();
-                            } else if (provider.type === 'openai') {
-                              loadOpenAIModels();
-                            }
-                          }}
-                        />
-                        <div className="provider-option-content">
-                          <div className="provider-option-title">
-                            {provider.name}
-                            {provider.configured && (
-                              <span className="provider-configured" title="Credentials detected">
-                                [Configured]
-                              </span>
-                            )}
-                          </div>
-                          <div className="provider-option-description">
-                            {isAnthropic && provider.configured && (
-                              <>API key configured</>
-                            )}
-                            {isAnthropic && !provider.configured && (
-                              <>Enter your Anthropic API key below</>
-                            )}
-                            {isGemini && provider.configured && (
-                              <>API key configured</>
-                            )}
-                            {isGemini && !provider.configured && (
-                              <>Enter your Gemini API key below</>
-                            )}
-                            {isOpenRouter && provider.configured && (
-                              <>API key configured</>
-                            )}
-                            {isOpenRouter && !provider.configured && (
-                              <>Enter your OpenRouter API key below</>
-                            )}
-                            {isOpenAI && provider.configured && openaiOAuthConnected && (
-                              <>Connected via ChatGPT account</>
-                            )}
-                            {isOpenAI && provider.configured && !openaiOAuthConnected && (
-                              <>API key configured</>
-                            )}
-                            {isOpenAI && !provider.configured && (
-                              <>Sign in with ChatGPT or enter API key</>
-                            )}
-                            {isBedrock && provider.configured && (
-                              <>AWS credentials configured</>
-                            )}
-                            {isBedrock && !provider.configured && (
-                              <>Configure your AWS credentials below</>
-                            )}
-                            {isOllama && provider.configured && (
-                              <>Ollama server detected - configure model below</>
-                            )}
-                            {isOllama && !provider.configured && (
-                              <>Run local LLM models with Ollama</>
-                            )}
-                          </div>
-                        </div>
-                      </label>
+                        {icon}
+                        <span className="llm-provider-tab-label">{provider.name}</span>
+                        {provider.configured && (
+                          <span className="llm-provider-tab-status" title="Configured" />
+                        )}
+                      </button>
                     );
                   })}
                 </div>
-              </div>
-
-              {settings.providerType === 'anthropic' && (
-                <div className="settings-section">
-                  <h3>Model</h3>
-                  <select
-                    className="settings-select"
-                    value={settings.modelKey}
-                    onChange={(e) => setSettings({ ...settings, modelKey: e.target.value })}
-                  >
-                    {models.map(model => (
-                      <option key={model.key} value={model.key}>
-                        {model.displayName}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              )}
-
-              {settings.providerType === 'anthropic' && (
-                <div className="settings-section">
-                  <h3>Anthropic API Key</h3>
-                  <p className="settings-description">
-                    Enter your API key from{' '}
-                    <a href="https://console.anthropic.com/" target="_blank" rel="noopener noreferrer">
-                      console.anthropic.com
-                    </a>
-                  </p>
-                  <input
-                    type="password"
-                    className="settings-input"
-                    placeholder="sk-ant-..."
-                    value={anthropicApiKey}
-                    onChange={(e) => setAnthropicApiKey(e.target.value)}
-                  />
-                </div>
-              )}
-
-              {settings.providerType === 'gemini' && (
-                <>
-                  <div className="settings-section">
-                    <h3>Gemini API Key</h3>
-                    <p className="settings-description">
-                      Enter your API key from{' '}
-                      <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener noreferrer">
-                        Google AI Studio
-                      </a>
-                    </p>
-                    <div className="settings-input-group">
-                      <input
-                        type="password"
-                        className="settings-input"
-                        placeholder="AIza..."
-                        value={geminiApiKey}
-                        onChange={(e) => setGeminiApiKey(e.target.value)}
-                      />
-                      <button
-                        className="button-small button-secondary"
-                        onClick={() => loadGeminiModels(geminiApiKey)}
-                        disabled={loadingGeminiModels}
+                <div className="llm-provider-content">
+                  {settings.providerType === 'anthropic' && (
+                    <div className="settings-section">
+                      <h3>Model</h3>
+                      <select
+                        className="settings-select"
+                        value={settings.modelKey}
+                        onChange={(e) => setSettings({ ...settings, modelKey: e.target.value })}
                       >
-                        {loadingGeminiModels ? 'Loading...' : 'Refresh Models'}
-                      </button>
+                        {models.map(model => (
+                          <option key={model.key} value={model.key}>
+                            {model.displayName}
+                          </option>
+                        ))}
+                      </select>
                     </div>
-                  </div>
-
-                  <div className="settings-section">
-                    <h3>Model</h3>
-                    <p className="settings-description">
-                      Select a Gemini model. Enter your API key and click "Refresh Models" to load available models.
-                    </p>
-                    {geminiModels.length > 0 ? (
-                      <SearchableSelect
-                        options={geminiModels.map(model => ({
-                          value: model.name,
-                          label: model.displayName,
-                          description: model.description,
-                        }))}
-                        value={geminiModel}
-                        onChange={setGeminiModel}
-                        placeholder="Select a model..."
-                      />
-                    ) : (
-                      <input
-                        type="text"
-                        className="settings-input"
-                        placeholder="gemini-2.0-flash"
-                        value={geminiModel}
-                        onChange={(e) => setGeminiModel(e.target.value)}
-                      />
-                    )}
-                  </div>
-                </>
-              )}
+                  )}
 
-              {settings.providerType === 'openrouter' && (
-                <>
-                  <div className="settings-section">
-                    <h3>OpenRouter API Key</h3>
-                    <p className="settings-description">
-                      Enter your API key from{' '}
-                      <a href="https://openrouter.ai/keys" target="_blank" rel="noopener noreferrer">
-                        OpenRouter
-                      </a>
-                    </p>
-                    <div className="settings-input-group">
+                  {settings.providerType === 'anthropic' && (
+                    <div className="settings-section">
+                      <h3>Anthropic API Key</h3>
+                      <p className="settings-description">
+                        Enter your API key from{' '}
+                        <a href="https://console.anthropic.com/" target="_blank" rel="noopener noreferrer">
+                          console.anthropic.com
+                        </a>
+                      </p>
                       <input
                         type="password"
                         className="settings-input"
-                        placeholder="sk-or-..."
-                        value={openrouterApiKey}
-                        onChange={(e) => setOpenrouterApiKey(e.target.value)}
+                        placeholder="sk-ant-..."
+                        value={anthropicApiKey}
+                        onChange={(e) => setAnthropicApiKey(e.target.value)}
                       />
-                      <button
-                        className="button-small button-secondary"
-                        onClick={() => loadOpenRouterModels(openrouterApiKey)}
-                        disabled={loadingOpenRouterModels}
-                      >
-                        {loadingOpenRouterModels ? 'Loading...' : 'Refresh Models'}
-                      </button>
                     </div>
-                  </div>
+                  )}
 
-                  <div className="settings-section">
-                    <h3>Model</h3>
-                    <p className="settings-description">
-                      Select a model from OpenRouter's catalog. Enter your API key and click "Refresh Models" to load available models.
-                    </p>
-                    {openrouterModels.length > 0 ? (
-                      <SearchableSelect
-                        options={openrouterModels.map(model => ({
-                          value: model.id,
-                          label: model.name,
-                          description: `${Math.round(model.context_length / 1000)}k context`,
-                        }))}
-                        value={openrouterModel}
-                        onChange={setOpenrouterModel}
-                        placeholder="Select a model..."
-                      />
-                    ) : (
-                      <input
-                        type="text"
-                        className="settings-input"
-                        placeholder="anthropic/claude-3.5-sonnet"
-                        value={openrouterModel}
-                        onChange={(e) => setOpenrouterModel(e.target.value)}
-                      />
-                    )}
-                    <p className="settings-hint">
-                      OpenRouter provides access to many models from different providers (Claude, GPT-4, Llama, etc.) through a unified API.
-                    </p>
-                  </div>
-                </>
-              )}
+                  {settings.providerType === 'gemini' && (
+                    <>
+                      <div className="settings-section">
+                        <h3>Gemini API Key</h3>
+                        <p className="settings-description">
+                          Enter your API key from{' '}
+                          <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener noreferrer">
+                            Google AI Studio
+                          </a>
+                        </p>
+                        <div className="settings-input-group">
+                          <input
+                            type="password"
+                            className="settings-input"
+                            placeholder="AIza..."
+                            value={geminiApiKey}
+                            onChange={(e) => setGeminiApiKey(e.target.value)}
+                          />
+                          <button
+                            className="button-small button-secondary"
+                            onClick={() => loadGeminiModels(geminiApiKey)}
+                            disabled={loadingGeminiModels}
+                          >
+                            {loadingGeminiModels ? 'Loading...' : 'Refresh Models'}
+                          </button>
+                        </div>
+                      </div>
 
-              {settings.providerType === 'openai' && (
-                <>
-                  <div className="settings-section">
-                    <h3>Authentication Method</h3>
-                    <p className="settings-description">
-                      Choose how to authenticate with OpenAI
-                    </p>
-                    <div className="auth-method-tabs">
-                      <button
-                        className={`auth-method-tab ${openaiAuthMethod === 'oauth' ? 'active' : ''}`}
-                        onClick={() => setOpenaiAuthMethod('oauth')}
-                      >
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                          <circle cx="12" cy="7" r="4" />
-                        </svg>
-                        Sign in with ChatGPT
-                      </button>
-                      <button
-                        className={`auth-method-tab ${openaiAuthMethod === 'api_key' ? 'active' : ''}`}
-                        onClick={() => setOpenaiAuthMethod('api_key')}
-                      >
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                          <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
-                        </svg>
-                        API Key
-                      </button>
-                    </div>
-                  </div>
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          Select a Gemini model. Enter your API key and click "Refresh Models" to load available models.
+                        </p>
+                        {geminiModels.length > 0 ? (
+                          <SearchableSelect
+                            options={geminiModels.map(model => ({
+                              value: model.name,
+                              label: model.displayName,
+                              description: model.description,
+                            }))}
+                            value={geminiModel}
+                            onChange={setGeminiModel}
+                            placeholder="Select a model..."
+                          />
+                        ) : (
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder="gemini-2.0-flash"
+                            value={geminiModel}
+                            onChange={(e) => setGeminiModel(e.target.value)}
+                          />
+                        )}
+                      </div>
+                    </>
+                  )}
 
-                  {openaiAuthMethod === 'oauth' && (
-                    <div className="settings-section">
-                      <h3>ChatGPT Account</h3>
-                      {openaiOAuthConnected ? (
-                        <div className="oauth-connected">
-                          <div className="oauth-status">
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                              <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
-                              <path d="M22 4L12 14.01l-3-3" />
-                            </svg>
-                            <span>Connected to ChatGPT</span>
-                          </div>
-                          <p className="settings-description">
-                            Your ChatGPT account is connected. You can use GPT-4o and other models with your subscription.
-                          </p>
+                  {settings.providerType === 'openrouter' && (
+                    <>
+                      <div className="settings-section">
+                        <h3>OpenRouter API Key</h3>
+                        <p className="settings-description">
+                          Enter your API key from{' '}
+                          <a href="https://openrouter.ai/keys" target="_blank" rel="noopener noreferrer">
+                            OpenRouter
+                          </a>
+                        </p>
+                        <div className="settings-input-group">
+                          <input
+                            type="password"
+                            className="settings-input"
+                            placeholder="sk-or-..."
+                            value={openrouterApiKey}
+                            onChange={(e) => setOpenrouterApiKey(e.target.value)}
+                          />
                           <button
                             className="button-small button-secondary"
-                            onClick={handleOpenAIOAuthLogout}
-                            disabled={openaiOAuthLoading}
+                            onClick={() => loadOpenRouterModels(openrouterApiKey)}
+                            disabled={loadingOpenRouterModels}
                           >
-                            {openaiOAuthLoading ? 'Disconnecting...' : 'Disconnect Account'}
+                            {loadingOpenRouterModels ? 'Loading...' : 'Refresh Models'}
                           </button>
                         </div>
-                      ) : (
-                        <div className="oauth-login">
-                          <p className="settings-description">
-                            Sign in with your ChatGPT account to use GPT-4o, o1, and other models with your subscription.
-                          </p>
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>Base URL</h3>
+                        <p className="settings-description">
+                          Optional override for the OpenRouter API endpoint.
+                        </p>
+                        <input
+                          type="text"
+                          className="settings-input"
+                          placeholder="https://openrouter.ai/api/v1"
+                          value={openrouterBaseUrl}
+                          onChange={(e) => setOpenrouterBaseUrl(e.target.value)}
+                        />
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          Select a model from OpenRouter's catalog. Enter your API key and click "Refresh Models" to load available models.
+                        </p>
+                        {openrouterModels.length > 0 ? (
+                          <SearchableSelect
+                            options={openrouterModels.map(model => ({
+                              value: model.id,
+                              label: model.name,
+                              description: `${Math.round(model.context_length / 1000)}k context`,
+                            }))}
+                            value={openrouterModel}
+                            onChange={setOpenrouterModel}
+                            placeholder="Select a model..."
+                          />
+                        ) : (
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder="anthropic/claude-3.5-sonnet"
+                            value={openrouterModel}
+                            onChange={(e) => setOpenrouterModel(e.target.value)}
+                          />
+                        )}
+                        <p className="settings-hint">
+                          OpenRouter provides access to many models from different providers (Claude, GPT-4, Llama, etc.) through a unified API.
+                        </p>
+                      </div>
+                    </>
+                  )}
+
+                  {settings.providerType === 'openai' && (
+                    <>
+                      <div className="settings-section">
+                        <h3>Authentication Method</h3>
+                        <p className="settings-description">
+                          Choose how to authenticate with OpenAI
+                        </p>
+                        <div className="auth-method-tabs">
                           <button
-                            className="button-primary oauth-login-btn"
-                            onClick={handleOpenAIOAuthLogin}
-                            disabled={openaiOAuthLoading}
+                            className={`auth-method-tab ${openaiAuthMethod === 'oauth' ? 'active' : ''}`}
+                            onClick={() => setOpenaiAuthMethod('oauth')}
                           >
-                            {openaiOAuthLoading ? (
-                              <>
-                                <svg className="spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                                  <path d="M21 12a9 9 0 11-6.219-8.56" />
-                                </svg>
-                                Connecting...
-                              </>
-                            ) : (
-                              <>
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                                  <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
-                                  <polyline points="10 17 15 12 10 7" />
-                                  <line x1="15" y1="12" x2="3" y2="12" />
-                                </svg>
-                                Sign in with ChatGPT
-                              </>
-                            )}
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                              <circle cx="12" cy="7" r="4" />
+                            </svg>
+                            Sign in with ChatGPT
+                          </button>
+                          <button
+                            className={`auth-method-tab ${openaiAuthMethod === 'api_key' ? 'active' : ''}`}
+                            onClick={() => setOpenaiAuthMethod('api_key')}
+                          >
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                              <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+                            </svg>
+                            API Key
                           </button>
                         </div>
+                      </div>
+
+                      {openaiAuthMethod === 'oauth' && (
+                        <div className="settings-section">
+                          <h3>ChatGPT Account</h3>
+                          {openaiOAuthConnected ? (
+                            <div className="oauth-connected">
+                              <div className="oauth-status">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                  <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                                  <path d="M22 4L12 14.01l-3-3" />
+                                </svg>
+                                <span>Connected to ChatGPT</span>
+                              </div>
+                              <p className="settings-description">
+                                Your ChatGPT account is connected. You can use GPT-4o and other models with your subscription.
+                              </p>
+                              <button
+                                className="button-small button-secondary"
+                                onClick={handleOpenAIOAuthLogout}
+                                disabled={openaiOAuthLoading}
+                              >
+                                {openaiOAuthLoading ? 'Disconnecting...' : 'Disconnect Account'}
+                              </button>
+                            </div>
+                          ) : (
+                            <div className="oauth-login">
+                              <p className="settings-description">
+                                Sign in with your ChatGPT account to use GPT-4o, o1, and other models with your subscription.
+                              </p>
+                              <button
+                                className="button-primary oauth-login-btn"
+                                onClick={handleOpenAIOAuthLogin}
+                                disabled={openaiOAuthLoading}
+                              >
+                                {openaiOAuthLoading ? (
+                                  <>
+                                    <svg className="spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                      <path d="M21 12a9 9 0 11-6.219-8.56" />
+                                    </svg>
+                                    Connecting...
+                                  </>
+                                ) : (
+                                  <>
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                      <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+                                      <polyline points="10 17 15 12 10 7" />
+                                      <line x1="15" y1="12" x2="3" y2="12" />
+                                    </svg>
+                                    Sign in with ChatGPT
+                                  </>
+                                )}
+                              </button>
+                            </div>
+                          )}
+                        </div>
                       )}
-                    </div>
+
+                      {openaiAuthMethod === 'api_key' && (
+                        <div className="settings-section">
+                          <h3>OpenAI API Key</h3>
+                          <p className="settings-description">
+                            Enter your API key from{' '}
+                            <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
+                              OpenAI Platform
+                            </a>
+                          </p>
+                          <div className="settings-input-group">
+                            <input
+                              type="password"
+                              className="settings-input"
+                              placeholder="sk-..."
+                              value={openaiApiKey}
+                              onChange={(e) => setOpenaiApiKey(e.target.value)}
+                            />
+                            <button
+                              className="button-small button-secondary"
+                              onClick={() => loadOpenAIModels(openaiApiKey)}
+                              disabled={loadingOpenAIModels}
+                            >
+                              {loadingOpenAIModels ? 'Loading...' : 'Refresh Models'}
+                            </button>
+                          </div>
+                        </div>
+                      )}
+
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          {openaiAuthMethod === 'oauth' && openaiOAuthConnected
+                            ? 'Select a GPT model to use with your ChatGPT subscription.'
+                            : 'Select a GPT model. Enter your API key and click "Refresh Models" to load available models.'}
+                        </p>
+                        {openaiModels.length > 0 ? (
+                          <SearchableSelect
+                            options={openaiModels.map(model => ({
+                              value: model.id,
+                              label: model.name,
+                              description: model.description,
+                            }))}
+                            value={openaiModel}
+                            onChange={setOpenaiModel}
+                            placeholder="Select a model..."
+                          />
+                        ) : (
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder="gpt-4o-mini"
+                            value={openaiModel}
+                            onChange={(e) => setOpenaiModel(e.target.value)}
+                          />
+                        )}
+                        {openaiAuthMethod === 'oauth' && openaiOAuthConnected && (
+                          <button
+                            className="button-small button-secondary"
+                            onClick={() => loadOpenAIModels()}
+                            disabled={loadingOpenAIModels}
+                            style={{ marginTop: '8px' }}
+                          >
+                            {loadingOpenAIModels ? 'Loading...' : 'Refresh Models'}
+                          </button>
+                        )}
+                      </div>
+                    </>
                   )}
 
-                  {openaiAuthMethod === 'api_key' && (
-                    <div className="settings-section">
-                      <h3>OpenAI API Key</h3>
-                      <p className="settings-description">
-                        Enter your API key from{' '}
-                        <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
-                          OpenAI Platform
-                        </a>
-                      </p>
-                      <div className="settings-input-group">
+                  {settings.providerType === 'azure' && (
+                    <>
+                      <div className="settings-section">
+                        <h3>Azure OpenAI Endpoint</h3>
+                        <p className="settings-description">
+                          Enter your Azure OpenAI resource endpoint (for example, <code>https://your-resource.openai.azure.com</code>).
+                        </p>
+                        <input
+                          type="text"
+                          className="settings-input"
+                          placeholder="https://your-resource.openai.azure.com"
+                          value={azureEndpoint}
+                          onChange={(e) => setAzureEndpoint(e.target.value)}
+                        />
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>Azure OpenAI API Key</h3>
+                        <p className="settings-description">
+                          Enter the API key for your Azure OpenAI resource.
+                        </p>
                         <input
                           type="password"
                           className="settings-input"
-                          placeholder="sk-..."
-                          value={openaiApiKey}
-                          onChange={(e) => setOpenaiApiKey(e.target.value)}
+                          placeholder="Azure API key"
+                          value={azureApiKey}
+                          onChange={(e) => setAzureApiKey(e.target.value)}
                         />
-                        <button
-                          className="button-small button-secondary"
-                          onClick={() => loadOpenAIModels(openaiApiKey)}
-                          disabled={loadingOpenAIModels}
-                        >
-                          {loadingOpenAIModels ? 'Loading...' : 'Refresh Models'}
-                        </button>
                       </div>
-                    </div>
+
+                      <div className="settings-section">
+                        <h3>Deployment Names</h3>
+                        <p className="settings-description">
+                          Enter one or more deployment names (one per line). These appear in the model selector.
+                        </p>
+                        <textarea
+                          className="settings-input"
+                          placeholder="gpt-4o-mini\nmy-other-deployment"
+                          rows={3}
+                          value={azureDeploymentsText}
+                          onChange={(e) => setAzureDeploymentsText(e.target.value)}
+                        />
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>Default Deployment</h3>
+                        <p className="settings-description">
+                          Optional. Used for connection tests and initial selection. You can switch models in the main view.
+                        </p>
+                        <input
+                          type="text"
+                          className="settings-input"
+                          placeholder="gpt-4o-mini"
+                          value={azureDeployment}
+                          onChange={(e) => setAzureDeployment(e.target.value)}
+                        />
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>API Version</h3>
+                        <p className="settings-description">
+                          Optional override for the Azure OpenAI API version.
+                        </p>
+                        <input
+                          type="text"
+                          className="settings-input"
+                          placeholder="2024-02-15-preview"
+                          value={azureApiVersion}
+                          onChange={(e) => setAzureApiVersion(e.target.value)}
+                        />
+                      </div>
+                    </>
                   )}
 
-                  <div className="settings-section">
-                    <h3>Model</h3>
-                    <p className="settings-description">
-                      {openaiAuthMethod === 'oauth' && openaiOAuthConnected
-                        ? 'Select a GPT model to use with your ChatGPT subscription.'
-                        : 'Select a GPT model. Enter your API key and click "Refresh Models" to load available models.'}
-                    </p>
-                    {openaiModels.length > 0 ? (
-                      <SearchableSelect
-                        options={openaiModels.map(model => ({
-                          value: model.id,
-                          label: model.name,
-                          description: model.description,
-                        }))}
-                        value={openaiModel}
-                        onChange={setOpenaiModel}
-                        placeholder="Select a model..."
-                      />
-                    ) : (
-                      <input
-                        type="text"
-                        className="settings-input"
-                        placeholder="gpt-4o-mini"
-                        value={openaiModel}
-                        onChange={(e) => setOpenaiModel(e.target.value)}
-                      />
-                    )}
-                    {openaiAuthMethod === 'oauth' && openaiOAuthConnected && (
-                      <button
-                        className="button-small button-secondary"
-                        onClick={() => loadOpenAIModels()}
-                        disabled={loadingOpenAIModels}
-                        style={{ marginTop: '8px' }}
-                      >
-                        {loadingOpenAIModels ? 'Loading...' : 'Refresh Models'}
-                      </button>
-                    )}
-                  </div>
-                </>
-              )}
+                  {settings.providerType === 'groq' && (
+                    <>
+                      <div className="settings-section">
+                        <h3>Groq API Key</h3>
+                        <p className="settings-description">
+                          Enter your API key from{' '}
+                          <a href="https://console.groq.com/keys" target="_blank" rel="noopener noreferrer">
+                            Groq Console
+                          </a>
+                        </p>
+                        <div className="settings-input-group">
+                          <input
+                            type="password"
+                            className="settings-input"
+                            placeholder="gsk_..."
+                            value={groqApiKey}
+                            onChange={(e) => setGroqApiKey(e.target.value)}
+                          />
+                          <button
+                            className="button-small button-secondary"
+                            onClick={() => loadGroqModels(groqApiKey)}
+                            disabled={loadingGroqModels}
+                          >
+                            {loadingGroqModels ? 'Loading...' : 'Refresh Models'}
+                          </button>
+                        </div>
+                      </div>
 
-              {settings.providerType === 'bedrock' && (
-                <>
-                  <div className="settings-section">
-                    <h3>AWS Region</h3>
-                    <select
-                      className="settings-select"
-                      value={awsRegion}
-                      onChange={(e) => setAwsRegion(e.target.value)}
-                    >
-                      <option value="us-east-1">US East (N. Virginia)</option>
-                      <option value="us-west-2">US West (Oregon)</option>
-                      <option value="eu-west-1">Europe (Ireland)</option>
-                      <option value="eu-central-1">Europe (Frankfurt)</option>
-                      <option value="ap-northeast-1">Asia Pacific (Tokyo)</option>
-                      <option value="ap-southeast-1">Asia Pacific (Singapore)</option>
-                      <option value="ap-southeast-2">Asia Pacific (Sydney)</option>
-                    </select>
-                  </div>
+                      <div className="settings-section">
+                        <h3>Base URL</h3>
+                        <p className="settings-description">
+                          Optional override for the Groq API endpoint.
+                        </p>
+                        <input
+                          type="text"
+                          className="settings-input"
+                          placeholder="https://api.groq.com/openai/v1"
+                          value={groqBaseUrl}
+                          onChange={(e) => setGroqBaseUrl(e.target.value)}
+                        />
+                      </div>
 
-                  <div className="settings-section">
-                    <h3>AWS Credentials</h3>
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          Select a Groq model. Enter your API key and click "Refresh Models" to load available models.
+                        </p>
+                        {groqModels.length > 0 ? (
+                          <SearchableSelect
+                            options={groqModels.map(model => ({
+                              value: model.id,
+                              label: model.name,
+                            }))}
+                            value={groqModel}
+                            onChange={setGroqModel}
+                            placeholder="Select a model..."
+                          />
+                        ) : (
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder="llama-3.1-8b-instant"
+                            value={groqModel}
+                            onChange={(e) => setGroqModel(e.target.value)}
+                          />
+                        )}
+                      </div>
+                    </>
+                  )}
 
-                    <label className="settings-checkbox">
-                      <input
-                        type="checkbox"
-                        checked={useDefaultCredentials}
-                        onChange={(e) => setUseDefaultCredentials(e.target.checked)}
-                      />
-                      <span>Use default credential chain (recommended)</span>
-                    </label>
+                  {settings.providerType === 'xai' && (
+                    <>
+                      <div className="settings-section">
+                        <h3>xAI API Key</h3>
+                        <p className="settings-description">
+                          Enter your API key from{' '}
+                          <a href="https://console.x.ai/" target="_blank" rel="noopener noreferrer">
+                            xAI Console
+                          </a>
+                        </p>
+                        <div className="settings-input-group">
+                          <input
+                            type="password"
+                            className="settings-input"
+                            placeholder="xai-..."
+                            value={xaiApiKey}
+                            onChange={(e) => setXaiApiKey(e.target.value)}
+                          />
+                          <button
+                            className="button-small button-secondary"
+                            onClick={() => loadXAIModels(xaiApiKey)}
+                            disabled={loadingXaiModels}
+                          >
+                            {loadingXaiModels ? 'Loading...' : 'Refresh Models'}
+                          </button>
+                        </div>
+                      </div>
 
-                    {useDefaultCredentials ? (
-                      <div className="settings-subsection">
+                      <div className="settings-section">
+                        <h3>Base URL</h3>
                         <p className="settings-description">
-                          Uses AWS credentials from environment variables, shared credentials file (~/.aws/credentials), or IAM role.
+                          Optional override for the xAI API endpoint.
                         </p>
                         <input
                           type="text"
                           className="settings-input"
-                          placeholder="AWS Profile (optional, e.g., 'default')"
-                          value={awsProfile}
-                          onChange={(e) => setAwsProfile(e.target.value)}
+                          placeholder="https://api.x.ai/v1"
+                          value={xaiBaseUrl}
+                          onChange={(e) => setXaiBaseUrl(e.target.value)}
                         />
                       </div>
-                    ) : (
-                      <div className="settings-subsection">
+
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          Select a Grok model. Enter your API key and click "Refresh Models" to load available models.
+                        </p>
+                        {xaiModels.length > 0 ? (
+                          <SearchableSelect
+                            options={xaiModels.map(model => ({
+                              value: model.id,
+                              label: model.name,
+                            }))}
+                            value={xaiModel}
+                            onChange={setXaiModel}
+                            placeholder="Select a model..."
+                          />
+                        ) : (
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder="grok-4-fast-non-reasoning"
+                            value={xaiModel}
+                            onChange={(e) => setXaiModel(e.target.value)}
+                          />
+                        )}
+                      </div>
+                    </>
+                  )}
+
+                  {settings.providerType === 'kimi' && (
+                    <>
+                      <div className="settings-section">
+                        <h3>Kimi API Key</h3>
+                        <p className="settings-description">
+                          Enter your API key from{' '}
+                          <a href="https://platform.moonshot.ai/" target="_blank" rel="noopener noreferrer">
+                            Moonshot Platform
+                          </a>
+                        </p>
+                        <div className="settings-input-group">
+                          <input
+                            type="password"
+                            className="settings-input"
+                            placeholder="sk-..."
+                            value={kimiApiKey}
+                            onChange={(e) => setKimiApiKey(e.target.value)}
+                          />
+                          <button
+                            className="button-small button-secondary"
+                            onClick={() => loadKimiModels(kimiApiKey)}
+                            disabled={loadingKimiModels}
+                          >
+                            {loadingKimiModels ? 'Loading...' : 'Refresh Models'}
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>Base URL</h3>
+                        <p className="settings-description">
+                          Optional override for the Kimi API endpoint.
+                        </p>
                         <input
                           type="text"
                           className="settings-input"
-                          placeholder="AWS Access Key ID"
-                          value={awsAccessKeyId}
-                          onChange={(e) => setAwsAccessKeyId(e.target.value)}
+                          placeholder="https://api.moonshot.ai/v1"
+                          value={kimiBaseUrl}
+                          onChange={(e) => setKimiBaseUrl(e.target.value)}
                         />
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          Select a Kimi model. Enter your API key and click "Refresh Models" to load available models.
+                        </p>
+                        {kimiModels.length > 0 ? (
+                          <SearchableSelect
+                            options={kimiModels.map(model => ({
+                              value: model.id,
+                              label: model.name,
+                            }))}
+                            value={kimiModel}
+                            onChange={setKimiModel}
+                            placeholder="Select a model..."
+                          />
+                        ) : (
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder="kimi-k2.5"
+                            value={kimiModel}
+                            onChange={(e) => setKimiModel(e.target.value)}
+                          />
+                        )}
+                      </div>
+                    </>
+                  )}
+
+                  {selectedCustomProvider && (
+                    <>
+                      <div className="settings-section">
+                        <h3>{selectedCustomProvider.apiKeyLabel}</h3>
+                        {selectedCustomProvider.apiKeyUrl ? (
+                          <p className="settings-description">
+                            Enter your API key from{' '}
+                            <a href={selectedCustomProvider.apiKeyUrl} target="_blank" rel="noopener noreferrer">
+                              {selectedCustomProvider.name}
+                            </a>
+                          </p>
+                        ) : selectedCustomProvider.description ? (
+                          <p className="settings-description">
+                            {selectedCustomProvider.description}
+                          </p>
+                        ) : null}
                         <input
                           type="password"
                           className="settings-input"
-                          placeholder="AWS Secret Access Key"
-                          value={awsSecretAccessKey}
-                          onChange={(e) => setAwsSecretAccessKey(e.target.value)}
+                          placeholder={selectedCustomProvider.apiKeyPlaceholder || 'sk-...'}
+                          value={selectedCustomConfig.apiKey || ''}
+                          onChange={(e) => updateCustomProvider(resolvedProviderType, { apiKey: e.target.value })}
                         />
+                        {selectedCustomProvider.apiKeyOptional && (
+                          <p className="settings-hint">API key is optional for this provider.</p>
+                        )}
                       </div>
-                    )}
-                  </div>
 
-                  <div className="settings-section">
-                    <h3>Model</h3>
-                    <p className="settings-description">
-                      Select a Claude model from AWS Bedrock.{' '}
-                      <button
-                        className="button-small button-secondary"
-                        onClick={loadBedrockModels}
-                        disabled={loadingBedrockModels}
-                        style={{ marginLeft: '8px' }}
-                      >
-                        {loadingBedrockModels ? 'Loading...' : 'Refresh Models'}
-                      </button>
-                    </p>
-                    {bedrockModels.length > 0 ? (
-                      <SearchableSelect
-                        options={bedrockModels.map(model => ({
-                          value: model.id,
-                          label: model.name,
-                          description: model.description,
-                        }))}
-                        value={bedrockModel}
-                        onChange={setBedrockModel}
-                        placeholder="Select a model..."
-                      />
-                    ) : (
-                      <select
-                        className="settings-select"
-                        value={settings.modelKey}
-                        onChange={(e) => setSettings({ ...settings, modelKey: e.target.value })}
-                      >
-                        {models.map(model => (
-                          <option key={model.key} value={model.key}>
-                            {model.displayName}
-                          </option>
-                        ))}
-                      </select>
-                    )}
-                  </div>
-                </>
-              )}
+                      {(selectedCustomProvider.requiresBaseUrl || selectedCustomProvider.baseUrl) && (
+                        <div className="settings-section">
+                          <h3>Base URL</h3>
+                          <p className="settings-description">
+                            {selectedCustomProvider.requiresBaseUrl
+                              ? 'Base URL is required for this provider.'
+                              : 'Override the default base URL if needed.'}
+                          </p>
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder={selectedCustomProvider.baseUrl || 'https://...'}
+                            value={selectedCustomConfig.baseUrl || ''}
+                            onChange={(e) => updateCustomProvider(resolvedProviderType, { baseUrl: e.target.value })}
+                          />
+                        </div>
+                      )}
 
-              {settings.providerType === 'ollama' && (
-                <>
-                  <div className="settings-section">
-                    <h3>Ollama Server URL</h3>
-                    <p className="settings-description">
-                      URL of your Ollama server. Default is http://localhost:11434 for local installations.
-                    </p>
-                    <div className="settings-input-group">
-                      <input
-                        type="text"
-                        className="settings-input"
-                        placeholder="http://localhost:11434"
-                        value={ollamaBaseUrl}
-                        onChange={(e) => setOllamaBaseUrl(e.target.value)}
-                      />
-                      <button
-                        className="button-small button-secondary"
-                        onClick={() => loadOllamaModels(ollamaBaseUrl)}
-                        disabled={loadingOllamaModels}
-                      >
-                        {loadingOllamaModels ? 'Loading...' : 'Refresh Models'}
-                      </button>
-                    </div>
-                  </div>
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          Enter the model ID to use for {selectedCustomProvider.name}.
+                        </p>
+                        <input
+                          type="text"
+                          className="settings-input"
+                          placeholder={selectedCustomProvider.defaultModel || 'model-id'}
+                          value={selectedCustomConfig.model || ''}
+                          onChange={(e) => updateCustomProvider(resolvedProviderType, { model: e.target.value })}
+                        />
+                      </div>
+                    </>
+                  )}
 
-                  <div className="settings-section">
-                    <h3>Model</h3>
-                    <p className="settings-description">
-                      Select from models available on your Ollama server, or enter a custom model name.
-                    </p>
-                    {ollamaModels.length > 0 ? (
-                      <SearchableSelect
-                        options={ollamaModels.map(model => ({
-                          value: model.name,
-                          label: model.name,
-                          description: formatBytes(model.size),
-                        }))}
-                        value={ollamaModel}
-                        onChange={setOllamaModel}
-                        placeholder="Select a model..."
-                      />
-                    ) : (
-                      <input
-                        type="text"
-                        className="settings-input"
-                        placeholder="llama3.2"
-                        value={ollamaModel}
-                        onChange={(e) => setOllamaModel(e.target.value)}
-                      />
-                    )}
-                    <p className="settings-hint">
-                      Don't have models? Run <code>ollama pull llama3.2</code> to download a model.
-                    </p>
-                  </div>
+                  {settings.providerType === 'bedrock' && (
+                    <>
+                      <div className="settings-section">
+                        <h3>AWS Region</h3>
+                        <select
+                          className="settings-select"
+                          value={awsRegion}
+                          onChange={(e) => setAwsRegion(e.target.value)}
+                        >
+                          <option value="us-east-1">US East (N. Virginia)</option>
+                          <option value="us-west-2">US West (Oregon)</option>
+                          <option value="eu-west-1">Europe (Ireland)</option>
+                          <option value="eu-central-1">Europe (Frankfurt)</option>
+                          <option value="ap-northeast-1">Asia Pacific (Tokyo)</option>
+                          <option value="ap-southeast-1">Asia Pacific (Singapore)</option>
+                          <option value="ap-southeast-2">Asia Pacific (Sydney)</option>
+                        </select>
+                      </div>
 
-                  <div className="settings-section">
-                    <h3>API Key (Optional)</h3>
-                    <p className="settings-description">
-                      Only needed if connecting to a remote Ollama server that requires authentication.
-                    </p>
-                    <input
-                      type="password"
-                      className="settings-input"
-                      placeholder="Optional API key for remote servers"
-                      value={ollamaApiKey}
-                      onChange={(e) => setOllamaApiKey(e.target.value)}
-                    />
-                  </div>
-                </>
-              )}
+                      <div className="settings-section">
+                        <h3>AWS Credentials</h3>
+
+                        <label className="settings-checkbox">
+                          <input
+                            type="checkbox"
+                            checked={useDefaultCredentials}
+                            onChange={(e) => setUseDefaultCredentials(e.target.checked)}
+                          />
+                          <span>Use default credential chain (recommended)</span>
+                        </label>
+
+                        {useDefaultCredentials ? (
+                          <div className="settings-subsection">
+                            <p className="settings-description">
+                              Uses AWS credentials from environment variables, shared credentials file (~/.aws/credentials), or IAM role.
+                            </p>
+                            <input
+                              type="text"
+                              className="settings-input"
+                              placeholder="AWS Profile (optional, e.g., 'default')"
+                              value={awsProfile}
+                              onChange={(e) => setAwsProfile(e.target.value)}
+                            />
+                          </div>
+                        ) : (
+                          <div className="settings-subsection">
+                            <input
+                              type="text"
+                              className="settings-input"
+                              placeholder="AWS Access Key ID"
+                              value={awsAccessKeyId}
+                              onChange={(e) => setAwsAccessKeyId(e.target.value)}
+                            />
+                            <input
+                              type="password"
+                              className="settings-input"
+                              placeholder="AWS Secret Access Key"
+                              value={awsSecretAccessKey}
+                              onChange={(e) => setAwsSecretAccessKey(e.target.value)}
+                            />
+                          </div>
+                        )}
+                      </div>
 
-              {testResult && (
-                <div className={`test-result ${testResult.success ? 'success' : 'error'}`}>
-                  {testResult.success ? (
-                    <>
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
-                        <path d="M22 4L12 14.01l-3-3" />
-                      </svg>
-                      Connection successful!
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          Select a Claude model from AWS Bedrock.{' '}
+                          <button
+                            className="button-small button-secondary"
+                            onClick={loadBedrockModels}
+                            disabled={loadingBedrockModels}
+                            style={{ marginLeft: '8px' }}
+                          >
+                            {loadingBedrockModels ? 'Loading...' : 'Refresh Models'}
+                          </button>
+                        </p>
+                        {bedrockModels.length > 0 ? (
+                          <SearchableSelect
+                            options={bedrockModels.map(model => ({
+                              value: model.id,
+                              label: model.name,
+                              description: model.description,
+                            }))}
+                            value={bedrockModel}
+                            onChange={setBedrockModel}
+                            placeholder="Select a model..."
+                          />
+                        ) : (
+                          <select
+                            className="settings-select"
+                            value={settings.modelKey}
+                            onChange={(e) => setSettings({ ...settings, modelKey: e.target.value })}
+                          >
+                            {models.map(model => (
+                              <option key={model.key} value={model.key}>
+                                {model.displayName}
+                              </option>
+                            ))}
+                          </select>
+                        )}
+                      </div>
                     </>
-                  ) : (
+                  )}
+
+                  {settings.providerType === 'ollama' && (
                     <>
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <circle cx="12" cy="12" r="10" />
-                        <line x1="15" y1="9" x2="9" y2="15" />
-                        <line x1="9" y1="9" x2="15" y2="15" />
-                      </svg>
-                      {testResult.error || 'Connection failed'}
+                      <div className="settings-section">
+                        <h3>Ollama Server URL</h3>
+                        <p className="settings-description">
+                          URL of your Ollama server. Default is http://localhost:11434 for local installations.
+                        </p>
+                        <div className="settings-input-group">
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder="http://localhost:11434"
+                            value={ollamaBaseUrl}
+                            onChange={(e) => setOllamaBaseUrl(e.target.value)}
+                          />
+                          <button
+                            className="button-small button-secondary"
+                            onClick={() => loadOllamaModels(ollamaBaseUrl)}
+                            disabled={loadingOllamaModels}
+                          >
+                            {loadingOllamaModels ? 'Loading...' : 'Refresh Models'}
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>Model</h3>
+                        <p className="settings-description">
+                          Select from models available on your Ollama server, or enter a custom model name.
+                        </p>
+                        {ollamaModels.length > 0 ? (
+                          <SearchableSelect
+                            options={ollamaModels.map(model => ({
+                              value: model.name,
+                              label: model.name,
+                              description: formatBytes(model.size),
+                            }))}
+                            value={ollamaModel}
+                            onChange={setOllamaModel}
+                            placeholder="Select a model..."
+                          />
+                        ) : (
+                          <input
+                            type="text"
+                            className="settings-input"
+                            placeholder="llama3.2"
+                            value={ollamaModel}
+                            onChange={(e) => setOllamaModel(e.target.value)}
+                          />
+                        )}
+                        <p className="settings-hint">
+                          Don't have models? Run <code>ollama pull llama3.2</code> to download a model.
+                        </p>
+                      </div>
+
+                      <div className="settings-section">
+                        <h3>API Key (Optional)</h3>
+                        <p className="settings-description">
+                          Only needed if connecting to a remote Ollama server that requires authentication.
+                        </p>
+                        <input
+                          type="password"
+                          className="settings-input"
+                          placeholder="Optional API key for remote servers"
+                          value={ollamaApiKey}
+                          onChange={(e) => setOllamaApiKey(e.target.value)}
+                        />
+                      </div>
                     </>
                   )}
-                </div>
-              )}
 
-              <div className="settings-actions">
-                <button
-                  className="button-secondary"
-                  onClick={handleTestConnection}
-                  disabled={loading || testing}
-                >
-                  {testing ? 'Testing...' : 'Test Connection'}
-                </button>
-                <button
-                  className="button-primary"
-                  onClick={handleSave}
-                  disabled={loading || saving}
-                >
-                  {saving ? 'Saving...' : 'Save Settings'}
-                </button>
+                  {testResult && (
+                    <div className={`test-result ${testResult.success ? 'success' : 'error'}`}>
+                      {testResult.success ? (
+                        <>
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                            <path d="M22 4L12 14.01l-3-3" />
+                          </svg>
+                          Connection successful!
+                        </>
+                      ) : (
+                        <>
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <circle cx="12" cy="12" r="10" />
+                            <line x1="15" y1="9" x2="9" y2="15" />
+                            <line x1="9" y1="9" x2="15" y2="15" />
+                          </svg>
+                          <span title={testResult.error}>
+                            {(() => {
+                              const error = testResult.error || 'Connection failed';
+                              // Extract meaningful part before JSON details
+                              const jsonStart = error.indexOf(' [{');
+                              const truncated = jsonStart > 0 ? error.slice(0, jsonStart) : error;
+                              return truncated.length > 200 ? truncated.slice(0, 200) + '...' : truncated;
+                            })()}
+                          </span>
+                        </>
+                      )}
+                    </div>
+                  )}
+
+                  <div className="settings-actions">
+                    <button
+                      className="button-secondary"
+                      onClick={handleTestConnection}
+                      disabled={loading || testing}
+                    >
+                      {testing ? 'Testing...' : 'Test Connection'}
+                    </button>
+                    <button
+                      className="button-primary"
+                      onClick={handleSave}
+                      disabled={loading || saving}
+                    >
+                      {saving ? 'Saving...' : 'Save Settings'}
+                    </button>
+                  </div>
+                </div>
               </div>
-            </>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>