diff --git a/docs/architecture/baselines/renderer-application-boundaries-baseline.json b/docs/architecture/baselines/renderer-application-boundaries-baseline.json
index 17006db5e4..2abd4374ca 100644
--- a/docs/architecture/baselines/renderer-application-boundaries-baseline.json
+++ b/docs/architecture/baselines/renderer-application-boundaries-baseline.json
@@ -152,7 +152,11 @@
       "specifier": "@/components/settings/ModelConfigDialog.vue"
     },
     {
-      "file": "src/renderer/settings/components/AddCustomProviderDialog.vue",
+      "file": "src/renderer/settings/components/AddProviderFlow.vue",
+      "specifier": "@/stores/modelStore"
+    },
+    {
+      "file": "src/renderer/settings/components/AddProviderFlow.vue",
       "specifier": "@/stores/providerStore"
     },
     {
@@ -459,6 +463,18 @@
       "file": "src/renderer/settings/components/ProviderApiConfig.vue",
       "specifier": "@/stores/modelCheck"
     },
+    {
+      "file": "src/renderer/settings/components/ProviderCatalog.vue",
+      "specifier": "@/components/icons/ModelIcon.vue"
+    },
+    {
+      "file": "src/renderer/settings/components/ProviderCatalog.vue",
+      "specifier": "@/stores/providerStore"
+    },
+    {
+      "file": "src/renderer/settings/components/ProviderCatalog.vue",
+      "specifier": "@/stores/theme"
+    },
     {
       "file": "src/renderer/settings/components/ProviderConfigImportDialog.vue",
       "specifier": "@/lib/utils"
@@ -483,6 +499,10 @@
       "file": "src/renderer/settings/components/ProviderModelList.vue",
       "specifier": "@/stores/uiSettingsStore"
     },
+    {
+      "file": "src/renderer/settings/components/ProviderSettingsShell.vue",
+      "specifier": "@/stores/providerStore"
+    },
     {
       "file": "src/renderer/settings/components/SettingsOverview.vue",
       "specifier": "@/stores/modelStore"
@@ -532,5 +552,5 @@
       "specifier": "@/i18n/bootstrap"
     }
   ],
-  "settingsToChatAppImportCount": 120
+  "settingsToChatAppImportCount": 125
 }
diff --git a/src/main/app/settingsRoutes.ts b/src/main/app/settingsRoutes.ts
index 148152eb9b..e763e3d2c5 100644
--- a/src/main/app/settingsRoutes.ts
+++ b/src/main/app/settingsRoutes.ts
@@ -65,6 +65,8 @@ export function createAppSettingsRoutes(deps: {
     read('artifact_think_collapse')
     read('providerOrder')
     read('providerTimestamps')
+    read('configuredProviders')
+    read('providerHealth')
     read('sidebar_group_mode')
     read('input_enabledMcpTools')
     return values
diff --git a/src/main/provider/index.ts b/src/main/provider/index.ts
index a2455655a5..773f2f9c03 100644
--- a/src/main/provider/index.ts
+++ b/src/main/provider/index.ts
@@ -922,6 +922,57 @@ export class ProviderRuntime
     return provider.getKeyStatus()
   }
 
+  /**
+   * Validates a draft provider configuration and loads its model catalog in one
+   * operation, without persisting the provider or toggling any enable flag.
+   * Used by the add-provider "Connect and load models" flow.
+   */
+  async validateDraft(draft: LLM_PROVIDER): Promise<{
+    isOk: boolean
+    errorMsg: string | null
+    models: MODEL_META[]
+  }> {
+    let instance: BaseLLMProvider | undefined
+    try {
+      // enable:false keeps the base-provider constructor from kicking off its
+      // background init fetch; check() and fetchModels() below are explicit.
+      instance = this.providerInstanceManager.createDraftInstance({ ...draft, enable: false })
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return { isOk: false, errorMsg: errorMessage, models: [] }
+    }
+    if (!instance) {
+      return { isOk: false, errorMsg: `Unsupported provider type: ${draft.apiType}`, models: [] }
+    }
+
+    try {
+      const checkResult = await instance.check()
+      if (!checkResult.isOk) {
+        return { ...checkResult, models: [] }
+      }
+
+      const models = await instance.fetchModels({ suppressErrors: false })
+      return { isOk: true, errorMsg: null, models }
+    } catch (error) {
+      // fetchModels with suppressErrors:false rethrows before any persisted
+      // write, so there is no partial catalog to clean up. Clearing here would
+      // erase an existing provider's saved models if draft.id matches it.
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return { isOk: false, errorMsg: errorMessage, models: [] }
+    } finally {
+      if (
+        'cleanup' in instance &&
+        typeof (instance as { cleanup?: unknown }).cleanup === 'function'
+      ) {
+        try {
+          ;(instance as unknown as { cleanup: () => void }).cleanup()
+        } catch (error) {
+          console.error(`Failed to clean up draft provider instance ${draft.id}:`, error)
+        }
+      }
+    }
+  }
+
   private getEnabledProviderIdsUsingProviderDb(): string[] {
     return this.providerInstanceManager
       .getProviders()
diff --git a/src/main/provider/managers/providerInstanceManager.ts b/src/main/provider/managers/providerInstanceManager.ts
index 006c657356..28a97fc4e7 100644
--- a/src/main/provider/managers/providerInstanceManager.ts
+++ b/src/main/provider/managers/providerInstanceManager.ts
@@ -315,6 +315,16 @@ export class ProviderInstanceManager {
     }
   }
 
+  /**
+   * Creates a transient instance for draft validation. The instance is not
+   * registered in the runtime maps, so validating a draft never touches the
+   * persisted provider list or an existing provider's live instance.
+   */
+  createDraftInstance(draft: LLM_PROVIDER): BaseLLMProvider | undefined {
+    if (this.closed) throw new Error('[Provider] Runtime is closed')
+    return this.createProviderInstance(draft)
+  }
+
   /**
    * Creates a provider instance while preserving backward compatibility.
    * Lookup order MUST remain id -> apiType so that legacy configs lacking ids continue to work.
diff --git a/src/main/provider/routes.ts b/src/main/provider/routes.ts
index 1f49cba051..1667c2597d 100644
--- a/src/main/provider/routes.ts
+++ b/src/main/provider/routes.ts
@@ -39,6 +39,7 @@ import {
   oauthXaiGrokLogoutRoute,
   oauthXaiGrokStartDeviceLoginRoute,
   providersAddRoute,
+  providersValidateDraftRoute,
   providersGetAcpProcessConfigOptionsRoute,
   providersGetEmbeddingDimensionsRoute,
   providersGetKeyStatusRoute,
@@ -295,6 +296,22 @@ export function createProviderRoutes(deps: {
         return result
       }
     ],
+    [
+      providersValidateDraftRoute.name,
+      async (rawInput) => {
+        const input = providersValidateDraftRoute.input.parse(rawInput)
+        const result = await providerRuntime.validateDraft(input.provider)
+        return providersValidateDraftRoute.output.parse({
+          isOk: result.isOk,
+          errorMsg: result.errorMsg,
+          models: result.models.map((model) => ({
+            id: model.id,
+            name: model.name,
+            ...(model.type ? { type: model.type } : {})
+          }))
+        })
+      }
+    ],
     [
       providersRemoveRoute.name,
       async (rawInput, context) => {
diff --git a/src/renderer/api/ProviderClient.ts b/src/renderer/api/ProviderClient.ts
index 2388cf7cda..139a8a1ed0 100644
--- a/src/renderer/api/ProviderClient.ts
+++ b/src/renderer/api/ProviderClient.ts
@@ -30,6 +30,7 @@ import {
   providersSyncModelScopeMcpServersRoute,
   providersTestConnectionRoute,
   providersUpdateRoute,
+  providersValidateDraftRoute,
   providersUpdateRateLimitRoute,
   providersWarmupAcpProcessRoute
 } from '@shared/contracts/routes'
@@ -85,6 +86,10 @@ export function createProviderClient(bridge: DeepchatBridge = getDeepchatBridge(
     return result.provider
   }
 
+  async function validateDraftProvider(provider: LLM_PROVIDER) {
+    return await bridge.invoke(providersValidateDraftRoute.name, { provider })
+  }
+
   async function removeProviderAtomic(providerId: string) {
     const result = await bridge.invoke(providersRemoveRoute.name, { providerId })
     return result.removed
@@ -293,6 +298,7 @@ export function createProviderClient(bridge: DeepchatBridge = getDeepchatBridge(
     setProviderById,
     updateProviderAtomic,
     addProviderAtomic,
+    validateDraftProvider,
     removeProviderAtomic,
     reorderProvidersAtomic,
     listModels,
diff --git a/src/renderer/settings/components/AddCustomProviderDialog.vue b/src/renderer/settings/components/AddCustomProviderDialog.vue
deleted file mode 100644
index 426259227c..0000000000
--- a/src/renderer/settings/components/AddCustomProviderDialog.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<template>
-  <Dialog v-model:open="isOpen" @update:open="onOpenChange">
-    <DialogContent class="sm:max-w-[500px]">
-      <DialogHeader>
-        <DialogTitle>{{ t('settings.provider.dialog.addCustomProvider.title') }}</DialogTitle>
-        <DialogDescription>
-          {{ t('settings.provider.dialog.addCustomProvider.description') }}
-        </DialogDescription>
-      </DialogHeader>
-      <DcForm
-        class="grid gap-4 py-4"
-        :validation-schema="validationSchema"
-        @submit="handleSubmit"
-        @error="handleSubmitError"
-      >
-        <FormField v-slot="{ componentField }" v-model="formData.name" name="name">
-          <FormItem class="grid grid-cols-4 items-start gap-4">
-            <FormLabel class="pt-2 text-right">
-              {{ t('settings.provider.dialog.addCustomProvider.name') }}
-            </FormLabel>
-            <div class="col-span-3 grid gap-2">
-              <FormControl>
-                <Input
-                  v-bind="componentField"
-                  :placeholder="t('settings.provider.dialog.addCustomProvider.namePlaceholder')"
-                />
-              </FormControl>
-              <FormMessage />
-            </div>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" v-model="formData.apiType" name="apiType">
-          <FormItem class="grid grid-cols-4 items-start gap-4">
-            <FormLabel class="pt-2 text-right">
-              {{ t('settings.provider.dialog.addCustomProvider.apiType') }}
-            </FormLabel>
-            <div class="col-span-3 grid gap-2">
-              <Select v-bind="componentField">
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue
-                      :placeholder="
-                        t('settings.provider.dialog.addCustomProvider.apiTypePlaceholder')
-                      "
-                    />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem value="openai">OpenAI</SelectItem>
-                  <SelectItem value="openai-completions">OpenAI Completions</SelectItem>
-                  <SelectItem value="gemini">Gemini</SelectItem>
-                  <SelectItem value="anthropic">Anthropic</SelectItem>
-                  <SelectItem value="ollama">Ollama</SelectItem>
-                  <SelectItem value="mistral">Mistral AI</SelectItem>
-                  <!-- <SelectItem value="groq">Groq</SelectItem>
-                    <SelectItem value="cohere">Cohere</SelectItem>
-                    <SelectItem value="zhinao">智脑</SelectItem>
-                    <SelectItem value="custom">自定义</SelectItem> -->
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </div>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" v-model="formData.apiKey" name="apiKey">
-          <FormItem class="grid grid-cols-4 items-start gap-4">
-            <FormLabel class="pt-2 text-right">
-              {{ t('settings.provider.dialog.addCustomProvider.apiKey') }}
-            </FormLabel>
-            <div class="col-span-3 grid gap-2">
-              <FormControl>
-                <Input
-                  v-bind="componentField"
-                  :placeholder="t('settings.provider.dialog.addCustomProvider.apiKeyPlaceholder')"
-                />
-              </FormControl>
-              <FormMessage />
-            </div>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" v-model="formData.baseUrl" name="baseUrl">
-          <FormItem class="grid grid-cols-4 items-start gap-4">
-            <FormLabel class="pt-2 text-right">
-              {{ t('settings.provider.dialog.addCustomProvider.baseUrl') }}
-            </FormLabel>
-            <div class="col-span-3 grid gap-2">
-              <FormControl>
-                <Input
-                  v-bind="componentField"
-                  :placeholder="t('settings.provider.dialog.addCustomProvider.baseUrlPlaceholder')"
-                />
-              </FormControl>
-              <div v-if="apiEndpointSuffix" class="text-xs text-muted-foreground">
-                {{ `${formData.baseUrl ?? ''}${apiEndpointSuffix}` }}
-              </div>
-              <FormMessage />
-            </div>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" v-model="formData.enable" name="enable">
-          <FormItem class="grid grid-cols-4 items-center gap-4">
-            <FormLabel class="text-right">
-              {{ t('settings.provider.dialog.addCustomProvider.enable') }}
-            </FormLabel>
-            <div class="col-span-3 flex items-center space-x-2">
-              <FormControl>
-                <Switch id="enable" v-bind="componentField" />
-              </FormControl>
-              <Label for="enable">
-                {{ formData.enable ? t('common.enabled') : t('common.disabled') }}
-              </Label>
-            </div>
-          </FormItem>
-        </FormField>
-        <DialogFooter>
-          <DcFormActions
-            :cancel-label="t('dialog.cancel')"
-            :submit-label="t('dialog.confirm')"
-            @cancel="closeDialog"
-          />
-        </DialogFooter>
-      </DcForm>
-    </DialogContent>
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { nanoid } from 'nanoid'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogDescription
-} from '@shadcn/components/ui/dialog'
-import { DcForm } from '@dc-ui/components/form'
-import { DcFormActions } from '@dc-ui/components/form-actions'
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage
-} from '@shadcn/components/ui/form'
-import { Input } from '@shadcn/components/ui/input'
-import { Label } from '@shadcn/components/ui/label'
-import { Switch } from '@shadcn/components/ui/switch'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@shadcn/components/ui/select'
-import type { LLM_PROVIDER } from '@shared/types/provider'
-import type { GenericValidateFunction } from 'vee-validate'
-import { useProviderStore } from '@/stores/providerStore'
-
-const { t } = useI18n()
-const providerStore = useProviderStore()
-const hasText = (value: unknown) => typeof value === 'string' && value.trim().length > 0
-const requiredRule: GenericValidateFunction = (value) =>
-  hasText(value) || t('components.promptParamsDialog.required')
-const apiKeyRule: GenericValidateFunction = (value, { form }) =>
-  form.apiType === 'ollama' || hasText(value) || t('components.promptParamsDialog.required')
-const validationSchema = {
-  name: requiredRule,
-  apiType: requiredRule,
-  apiKey: apiKeyRule,
-  baseUrl: requiredRule
-}
-
-const props = defineProps<{
-  open: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-  (e: 'provider-added', provider: LLM_PROVIDER): void
-}>()
-
-const isOpen = ref(props.open)
-const apiEndpointSuffix = computed(() => {
-  if (formData.value.apiType === 'openai') {
-    return '/responses'
-  }
-
-  if (formData.value.apiType === 'openai-completions') {
-    return '/chat/completions'
-  }
-
-  return ''
-})
-
-const formData = ref<LLM_PROVIDER>({
-  id: '',
-  name: '',
-  apiType: 'openai', // 默认选择 OpenAI
-  apiKey: '',
-  baseUrl: '',
-  enable: true
-})
-
-// 监听 open 属性变化
-watch(
-  () => props.open,
-  (newVal) => {
-    if (newVal && !isOpen.value) {
-      formData.value = {
-        id: '',
-        name: '',
-        apiType: 'openai',
-        apiKey: '',
-        baseUrl: '',
-        enable: true
-      }
-    }
-    isOpen.value = newVal
-  }
-)
-
-// 监听 isOpen 变化，同步更新到父组件
-watch(
-  () => isOpen.value,
-  (newVal) => {
-    emit('update:open', newVal)
-  }
-)
-
-watch(
-  () => formData.value.apiType,
-  (newType, oldType) => {
-    if (newType === 'ollama') {
-      if (!formData.value.baseUrl) {
-        formData.value.baseUrl = 'http://localhost:11434'
-      }
-      formData.value.apiKey = ''
-    } else if (oldType === 'ollama' && formData.value.baseUrl === 'http://localhost:11434') {
-      formData.value.baseUrl = ''
-    }
-  }
-)
-
-const onOpenChange = (open: boolean) => {
-  isOpen.value = open
-  if (!open) {
-    // 重置表单
-    resetForm()
-  }
-}
-
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    name: '',
-    apiType: 'openai',
-    apiKey: '',
-    baseUrl: '',
-    enable: true
-  }
-}
-
-const closeDialog = () => {
-  isOpen.value = false
-}
-
-const handleSubmit = async () => {
-  // 生成唯一ID
-  formData.value.id = nanoid()
-  await providerStore.addCustomProvider(formData.value)
-  emit('provider-added', formData.value)
-  closeDialog()
-}
-
-const handleSubmitError = (error: unknown) => {
-  console.error('添加自定义提供商失败', error)
-}
-</script>
diff --git a/src/renderer/settings/components/AddProviderFlow.vue b/src/renderer/settings/components/AddProviderFlow.vue
new file mode 100644
index 0000000000..0b13b84b87
--- /dev/null
+++ b/src/renderer/settings/components/AddProviderFlow.vue
@@ -0,0 +1,273 @@
+<template>
+  <section class="w-full h-full" data-testid="add-provider-flow">
+    <ScrollArea class="w-full h-full">
+      <div class="mx-auto flex max-w-2xl flex-col gap-4 p-4">
+        <div class="flex items-center gap-2">
+          <DcButton
+            variant="ghost"
+            size="sm"
+            class="h-8 w-8 p-0"
+            :aria-label="t('common.back')"
+            @click="$emit('cancel')"
+          >
+            <Icon icon="lucide:arrow-left" class="h-4 w-4" />
+          </DcButton>
+          <div class="flex flex-col">
+            <h2 class="text-lg font-semibold">
+              {{ t('settings.provider.dialog.addCustomProvider.title') }}
+            </h2>
+            <p class="text-xs text-muted-foreground">
+              {{ t('settings.provider.dialog.addCustomProvider.description') }}
+            </p>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-4 rounded-lg border border-border bg-card p-4">
+          <div class="flex flex-col gap-2">
+            <Label for="add-provider-name">
+              {{ t('settings.provider.dialog.addCustomProvider.name') }}
+            </Label>
+            <Input
+              id="add-provider-name"
+              v-model="form.name"
+              data-testid="add-provider-name"
+              :placeholder="t('settings.provider.dialog.addCustomProvider.namePlaceholder')"
+              :disabled="isBusy"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <Label for="add-provider-api-type">
+              {{ t('settings.provider.dialog.addCustomProvider.apiType') }}
+            </Label>
+            <Select v-model="form.apiType" :disabled="isBusy">
+              <SelectTrigger id="add-provider-api-type" data-testid="add-provider-api-type">
+                <SelectValue
+                  :placeholder="t('settings.provider.dialog.addCustomProvider.apiTypePlaceholder')"
+                />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="openai">OpenAI</SelectItem>
+                <SelectItem value="openai-completions">OpenAI Completions</SelectItem>
+                <SelectItem value="gemini">Gemini</SelectItem>
+                <SelectItem value="anthropic">Anthropic</SelectItem>
+                <SelectItem value="ollama">Ollama</SelectItem>
+                <SelectItem value="mistral">Mistral AI</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <Label for="add-provider-base-url">
+              {{ t('settings.provider.dialog.addCustomProvider.baseUrl') }}
+            </Label>
+            <Input
+              id="add-provider-base-url"
+              v-model="form.baseUrl"
+              data-testid="add-provider-base-url"
+              :placeholder="t('settings.provider.dialog.addCustomProvider.baseUrlPlaceholder')"
+              :disabled="isBusy"
+            />
+            <p v-if="apiEndpointSuffix" class="text-xs text-muted-foreground">
+              {{
+                t('settings.provider.urlFormat', {
+                  defaultUrl: `${normalizedBaseUrl}${apiEndpointSuffix}`
+                })
+              }}
+            </p>
+          </div>
+
+          <div v-if="form.apiType !== 'ollama'" class="flex flex-col gap-2">
+            <Label for="add-provider-api-key">
+              {{ t('settings.provider.dialog.addCustomProvider.apiKey') }}
+            </Label>
+            <Input
+              id="add-provider-api-key"
+              v-model="form.apiKey"
+              data-testid="add-provider-api-key"
+              type="password"
+              :placeholder="t('settings.provider.dialog.addCustomProvider.apiKeyPlaceholder')"
+              :disabled="isBusy"
+              @keyup.enter="connectAndLoad"
+            />
+          </div>
+
+          <DcInlineError v-if="connectError" :error="connectError" />
+
+          <div class="flex items-center gap-2">
+            <DcButton
+              data-testid="add-provider-connect"
+              :disabled="!canConnect || isBusy"
+              @click="connectAndLoad"
+            >
+              <Spinner v-if="isBusy" class="size-4" data-icon="inline-start" />
+              {{ connectButtonLabel }}
+            </DcButton>
+            <DcButton
+              v-if="phase === 'validating'"
+              data-testid="add-provider-cancel-attempt"
+              variant="outline"
+              @click="cancelAttempt"
+            >
+              {{ t('common.cancel') }}
+            </DcButton>
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { nanoid } from 'nanoid'
+import { Icon } from '@iconify/vue'
+import { Input } from '@shadcn/components/ui/input'
+import { Label } from '@shadcn/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@shadcn/components/ui/select'
+import { ScrollArea } from '@shadcn/components/ui/scroll-area'
+import { Spinner } from '@shadcn/components/ui/spinner'
+import { DcButton } from '@dc-ui/components/button'
+import { DcInlineError } from '@dc-ui/components/inline-error'
+import { useProviderStore } from '@/stores/providerStore'
+import { useModelStore } from '@/stores/modelStore'
+import type { LLM_PROVIDER } from '@shared/types/provider'
+
+const emit = defineEmits<{
+  cancel: []
+  created: [provider: LLM_PROVIDER]
+}>()
+
+const { t } = useI18n()
+const providerStore = useProviderStore()
+const modelStore = useModelStore()
+
+// One draft id per form session so retries and the final commit share the same
+// provider id, and a cancelled attempt never leaves a second half-created id.
+const draftId = nanoid()
+
+const form = ref({
+  name: '',
+  apiType: 'openai',
+  apiKey: '',
+  baseUrl: ''
+})
+
+const phase = ref<'idle' | 'validating' | 'committing'>('idle')
+const connectError = ref('')
+// Monotonic attempt counter: a cancelled or superseded attempt's result is
+// ignored instead of committing a stale draft.
+let attemptCounter = 0
+let activeAttempt = 0
+
+const isBusy = computed(() => phase.value !== 'idle')
+const normalizedBaseUrl = computed(() => form.value.baseUrl.trim().replace(/\/+$/, ''))
+const apiEndpointSuffix = computed(() => {
+  if (!normalizedBaseUrl.value) return ''
+  if (form.value.apiType === 'openai') return '/responses'
+  if (form.value.apiType === 'openai-completions') return '/chat/completions'
+  return ''
+})
+
+const canConnect = computed(() => {
+  if (!form.value.name.trim() || !form.value.baseUrl.trim()) return false
+  if (form.value.apiType !== 'ollama' && !form.value.apiKey.trim()) return false
+  return true
+})
+
+const connectButtonLabel = computed(() => {
+  switch (phase.value) {
+    case 'validating':
+      return t('settings.provider.addFlow.validating')
+    case 'committing':
+      return t('settings.provider.addFlow.loadingModels')
+    default:
+      return t('settings.provider.addFlow.connect')
+  }
+})
+
+watch(
+  () => form.value.apiType,
+  (newType, oldType) => {
+    if (newType === 'ollama') {
+      if (!form.value.baseUrl) {
+        form.value.baseUrl = 'http://localhost:11434'
+      }
+      form.value.apiKey = ''
+    } else if (oldType === 'ollama' && form.value.baseUrl === 'http://localhost:11434') {
+      form.value.baseUrl = ''
+    }
+  }
+)
+
+const buildDraft = (): LLM_PROVIDER => ({
+  id: draftId,
+  name: form.value.name.trim(),
+  apiType: form.value.apiType,
+  apiKey: form.value.apiKey.trim(),
+  baseUrl: form.value.baseUrl.trim(),
+  enable: false,
+  custom: true
+})
+
+const applyInitialRecommendations = async (providerId: string) => {
+  await modelStore.applyInitialModelRecommendations(providerId)
+}
+
+const cancelAttempt = () => {
+  // Only the validation phase is cancellable; once committing starts the
+  // persisted state must land atomically.
+  if (phase.value !== 'validating') {
+    return
+  }
+  activeAttempt = -1
+  phase.value = 'idle'
+}
+
+const connectAndLoad = async () => {
+  if (!canConnect.value || isBusy.value) {
+    return
+  }
+
+  const attempt = ++attemptCounter
+  activeAttempt = attempt
+  connectError.value = ''
+  phase.value = 'validating'
+
+  const draft = buildDraft()
+  try {
+    const result = await providerStore.validateDraftProvider(draft)
+    if (activeAttempt !== attempt) {
+      return
+    }
+    if (!result.isOk) {
+      connectError.value = result.errorMsg || t('settings.provider.addFlow.failed')
+      phase.value = 'idle'
+      return
+    }
+
+    phase.value = 'committing'
+    await providerStore.commitValidatedDraft(draft)
+    await applyInitialRecommendations(draft.id)
+    if (activeAttempt !== attempt) {
+      return
+    }
+    phase.value = 'idle'
+    emit('created', { ...draft, enable: true })
+  } catch (error) {
+    if (activeAttempt !== attempt) {
+      return
+    }
+    connectError.value =
+      error instanceof Error ? error.message : t('settings.provider.addFlow.failed')
+    phase.value = 'idle'
+  }
+}
+</script>
diff --git a/src/renderer/settings/components/BedrockProviderSettingsDetail.vue b/src/renderer/settings/components/BedrockProviderSettingsDetail.vue
index a4f95c5eb6..9dbc10111f 100644
--- a/src/renderer/settings/components/BedrockProviderSettingsDetail.vue
+++ b/src/renderer/settings/components/BedrockProviderSettingsDetail.vue
@@ -1,9 +1,9 @@
 <template>
   <ProviderSettingsShell
-    v-model:active-tab="activeTab"
     :title="t(provider.name)"
     :subtitle="region"
     :enabled-count="enabledModels.length"
+    :health="providerHealth"
   >
     <template #connection>
       <div class="flex flex-col gap-4">
@@ -228,7 +228,7 @@ const region = ref(props.provider.credential?.region || '')
 const profile = ref(props.provider.credential?.profile || '')
 const showAccessKeyId = ref(false)
 const showSecretAccessKey = ref(false)
-const activeTab = ref<'connection' | 'models' | 'advanced'>('connection')
+const providerHealth = computed(() => providerStore.getProviderHealth(props.provider.id))
 const providerModels = ref<RENDERER_MODEL_META[]>([])
 const customModels = computed(() => {
   const providerCustomModels = modelStore.customModels.find(
diff --git a/src/renderer/settings/components/ModelProviderSettings.vue b/src/renderer/settings/components/ModelProviderSettings.vue
index b0b506613a..456acbb8b1 100644
--- a/src/renderer/settings/components/ModelProviderSettings.vue
+++ b/src/renderer/settings/components/ModelProviderSettings.vue
@@ -58,17 +58,16 @@
             />
           </div>
         </div>
-        <div v-if="enabledProviders.length > 0" class="flex flex-col gap-2">
+
+        <div v-if="configuredList.length > 0" class="flex flex-col gap-2">
           <div class="text-xs font-medium text-muted-foreground px-2">
-            {{ t('settings.provider.enabled') }} ({{ enabledProviders.length }})
+            {{ t('settings.provider.sidebar.configured') }} ({{ configuredList.length }})
           </div>
           <draggable
-            v-model="enabledProviders"
+            v-model="sidebarProviders"
             item-key="id"
             handle=".drag-handle"
             class="space-y-2"
-            group="providers"
-            :move="onMoveEnabled"
             @end="handleDragEnd"
           >
             <template #item="{ element: provider }">
@@ -76,7 +75,10 @@
                 :data-provider-id="provider.id"
                 :class="[
                   'flex flex-row hover:bg-accent items-center gap-2 rounded-lg p-2 group',
-                  route.params?.providerId === provider.id ? 'bg-accent text-accent-foreground' : ''
+                  route.params?.providerId === provider.id
+                    ? 'bg-accent text-accent-foreground'
+                    : '',
+                  provider.enable ? '' : 'opacity-60'
                 ]"
                 @click="handleProviderRowClick(provider.id)"
               >
@@ -105,108 +107,101 @@
                     :dir="languageStore.dir"
                     >{{ t(provider.name) }}</span
                   >
-                  <Icon
-                    v-if="provider.custom"
-                    icon="lucide:pencil"
-                    class="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-60 hover:opacity-100! shrink-0"
-                    @click="startEditingName(provider, $event)"
-                  />
                 </template>
-                <Switch
-                  :model-value="provider.enable"
-                  @click.stop="toggleProviderStatus(provider)"
-                />
+                <span
+                  v-if="!provider.enable"
+                  class="shrink-0 rounded-full border border-border/60 px-1.5 text-[10px] text-muted-foreground"
+                >
+                  {{ t('settings.provider.sidebar.disabledTag') }}
+                </span>
+                <TooltipProvider :delay-duration="200">
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <span
+                        :data-testid="`provider-health-${provider.id}`"
+                        class="flex h-4 w-4 shrink-0 items-center justify-center"
+                        :aria-label="healthLabel(provider.id)"
+                        role="img"
+                      >
+                        <span :class="['h-2 w-2 rounded-full', healthDotClass(provider.id)]" />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>{{ healthTooltip(provider.id) }}</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <DcButton
+                      :data-testid="`provider-menu-trigger-${provider.id}`"
+                      variant="ghost"
+                      size="sm"
+                      class="h-6 w-6 shrink-0 p-0 opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100"
+                      @click.stop
+                    >
+                      <Icon icon="lucide:ellipsis" class="h-4 w-4 text-muted-foreground" />
+                    </DcButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" class="w-44">
+                    <DcDropdownActionItem
+                      :data-testid="`provider-menu-toggle-${provider.id}`"
+                      :icon="provider.enable ? 'lucide:pause' : 'lucide:play'"
+                      :label="
+                        provider.enable
+                          ? t('settings.provider.menu.disable')
+                          : t('settings.provider.menu.enable')
+                      "
+                      @select="toggleProviderStatus(provider)"
+                    />
+                    <DcDropdownActionItem
+                      v-if="provider.custom"
+                      icon="lucide:pencil"
+                      :label="t('settings.provider.menu.rename')"
+                      @select="startEditingName(provider)"
+                    />
+                    <template v-if="provider.custom">
+                      <DropdownMenuSeparator />
+                      <DcDropdownActionItem
+                        :data-testid="`provider-menu-delete-${provider.id}`"
+                        icon="lucide:trash-2"
+                        danger
+                        :label="t('settings.provider.menu.delete')"
+                        @select="requestDeleteProvider(provider)"
+                      />
+                    </template>
+                  </DropdownMenuContent>
+                </DropdownMenu>
               </div>
             </template>
           </draggable>
         </div>
 
-        <div v-if="disabledProviders.length > 0" class="flex flex-col gap-2">
-          <div class="flex items-center justify-between gap-2 px-2">
-            <div class="text-xs font-medium text-muted-foreground">
-              {{ t('settings.provider.disabled') }} ({{ disabledProviders.length }})
-            </div>
-            <DcButton
-              data-testid="disabled-providers-toggle"
-              variant="ghost"
-              size="sm"
-              class="h-6 px-2 text-xs text-muted-foreground"
-              @click="isDisabledProvidersExpanded = !isDisabledProvidersExpanded"
-            >
-              <Icon
-                :icon="isDisabledProvidersExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-                class="mr-1 h-3 w-3"
-              />
-              {{ t(isDisabledProvidersExpanded ? 'common.collapse' : 'common.expand') }}
-            </DcButton>
-          </div>
-          <draggable
-            v-if="isDisabledProvidersExpanded"
-            v-model="disabledProviders"
-            data-testid="disabled-providers-list"
-            item-key="id"
-            handle=".drag-handle"
-            class="space-y-2"
-            group="providers"
-            :move="onMoveDisabled"
-            @end="handleDragEnd"
-          >
-            <template #item="{ element: provider }">
-              <div
-                :data-provider-id="provider.id"
-                :class="[
-                  'flex flex-row hover:bg-accent items-center gap-2 rounded-lg p-2 group opacity-60',
-                  route.params?.providerId === provider.id ? 'bg-accent text-accent-foreground' : ''
-                ]"
-                @click="handleProviderRowClick(provider.id)"
-              >
-                <Icon
-                  icon="lucide:grip-vertical"
-                  class="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 cursor-move drag-handle"
-                />
-                <ModelIcon
-                  :model-id="provider.id"
-                  :custom-class="'w-4 h-4 text-muted-foreground'"
-                  :is-dark="themeStore.isDark"
-                />
-                <input
-                  v-if="editingProviderId === provider.id"
-                  ref="editInputRef"
-                  v-model="editingName"
-                  class="text-sm font-medium flex-1 min-w-0 bg-background border border-input rounded px-2 py-0.5 outline-none focus:ring-1 focus:ring-ring"
-                  :dir="languageStore.dir"
-                  @blur="saveEditingName"
-                  @keydown="handleEditKeydown"
-                  @click.stop
-                />
-                <template v-else>
-                  <span
-                    class="text-sm font-medium flex-1 min-w-0 truncate"
-                    :dir="languageStore.dir"
-                    >{{ t(provider.name) }}</span
-                  >
-                  <Icon
-                    v-if="provider.custom"
-                    icon="lucide:pencil"
-                    class="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-60 hover:opacity-100! shrink-0"
-                    @click="startEditingName(provider, $event)"
-                  />
-                </template>
-                <Switch
-                  :model-value="provider.enable"
-                  @click.stop="toggleProviderStatus(provider)"
-                />
-              </div>
-            </template>
-          </draggable>
+        <div
+          v-else-if="!showClearButton"
+          class="rounded-lg border border-dashed border-border p-4 text-center"
+        >
+          <p class="text-xs text-muted-foreground">
+            {{ t('settings.provider.sidebar.empty') }}
+          </p>
         </div>
 
-        <div class="sticky bottom-4 z-10" :dir="languageStore.dir">
+        <div class="flex flex-col gap-2" :dir="languageStore.dir">
+          <DcButton
+            data-testid="provider-browse-all"
+            variant="ghost"
+            class="w-full flex flex-row items-center justify-between gap-2 rounded-lg p-2 hover:bg-accent"
+            @click="openCatalog"
+          >
+            <span class="flex items-center gap-2">
+              <Icon icon="lucide:layout-grid" class="w-4 h-4 text-muted-foreground" />
+              <span class="text-sm font-medium">{{ t('settings.provider.browseAll') }}</span>
+            </span>
+            <span class="text-xs text-muted-foreground">{{ catalogProviders.length }}</span>
+          </DcButton>
           <DcButton
             data-testid="provider-add-button"
             variant="outline"
             class="w-full flex flex-row items-center gap-2 rounded-lg p-2 backdrop-blur-lg hover:bg-accent"
-            @click="openAddProviderDialog"
+            @click="openAddProviderFlow"
           >
             <Icon icon="lucide:plus" class="w-4 h-4 text-muted-foreground" />
             <span class="text-sm font-medium">{{ t('settings.provider.addCustomProvider') }}</span>
@@ -214,36 +209,59 @@
         </div>
       </div>
     </ScrollArea>
-    <div v-if="activeProvider" ref="providerDetailRef" class="flex min-w-0 flex-1">
-      <OllamaProviderSettingsDetail
-        v-if="activeProvider.apiType === 'ollama'"
-        :key="`ollama-${activeProvider.id}`"
-        :provider="activeProvider"
-        class="flex-1"
-        @provider-configured="handleProviderConfigured"
-        @provider-model-enabled="handleProviderModelEnabled"
-      />
-      <BedrockProviderSettingsDetail
-        v-else-if="activeProvider.apiType === 'aws-bedrock'"
-        :key="`bedrock-${activeProvider.id}`"
-        :provider="activeProvider as AWS_BEDROCK_PROVIDER"
+    <div ref="providerDetailRef" class="flex min-w-0 flex-1">
+      <AddProviderFlow
+        v-if="showAddFlow"
+        :key="addFlowKey"
         class="flex-1"
-        @provider-configured="handleProviderConfigured"
-        @provider-model-enabled="handleProviderModelEnabled"
+        @cancel="openCatalog"
+        @created="handleProviderAdded"
       />
-      <ModelProviderSettingsDetail
-        v-else
-        :key="`standard-${activeProvider.id}`"
-        :provider="activeProvider"
-        :active-onboarding-step-id="detailGuideStepId"
+      <ProviderCatalog
+        v-else-if="showCatalog"
         class="flex-1"
-        @provider-configured="handleProviderConfigured"
-        @provider-model-enabled="handleProviderModelEnabled"
+        @select="handleCatalogSelect"
+        @add-custom="openAddProviderFlow"
       />
+      <template v-else-if="activeProvider">
+        <OllamaProviderSettingsDetail
+          v-if="activeProvider.apiType === 'ollama'"
+          :key="`ollama-${activeProvider.id}`"
+          :provider="activeProvider"
+          class="flex-1"
+          @provider-configured="handleProviderConfigured"
+          @provider-model-enabled="handleProviderModelEnabled"
+        />
+        <BedrockProviderSettingsDetail
+          v-else-if="activeProvider.apiType === 'aws-bedrock'"
+          :key="`bedrock-${activeProvider.id}`"
+          :provider="activeProvider as AWS_BEDROCK_PROVIDER"
+          class="flex-1"
+          @provider-configured="handleProviderConfigured"
+          @provider-model-enabled="handleProviderModelEnabled"
+        />
+        <ModelProviderSettingsDetail
+          v-else
+          :key="`standard-${activeProvider.id}`"
+          :provider="activeProvider"
+          :active-onboarding-step-id="detailGuideStepId"
+          class="flex-1"
+          @provider-configured="handleProviderConfigured"
+          @provider-model-enabled="handleProviderModelEnabled"
+        />
+      </template>
     </div>
-    <AddCustomProviderDialog
-      v-model:open="isAddProviderDialogOpen"
-      @provider-added="handleProviderAdded"
+    <DcConfirmDialog
+      :open="Boolean(providerPendingDelete)"
+      :title="t('settings.provider.dialog.deleteProvider.title')"
+      :description="
+        t('settings.provider.dialog.deleteProvider.content', {
+          name: providerPendingDelete ? t(providerPendingDelete.name) : ''
+        })
+      "
+      :confirm-label="t('settings.provider.dialog.deleteProvider.confirm')"
+      @update:open="(value: boolean) => !value && (providerPendingDelete = null)"
+      @confirm="confirmDeleteProvider"
     />
   </div>
 
@@ -321,14 +339,28 @@ import { refDebounced } from '@vueuse/core'
 import ModelProviderSettingsDetail from './ModelProviderSettingsDetail.vue'
 import OllamaProviderSettingsDetail from './OllamaProviderSettingsDetail.vue'
 import BedrockProviderSettingsDetail from './BedrockProviderSettingsDetail.vue'
+import ProviderCatalog from './ProviderCatalog.vue'
 import ModelIcon from '@/components/icons/ModelIcon.vue'
 import { Icon } from '@iconify/vue'
-import AddCustomProviderDialog from './AddCustomProviderDialog.vue'
+import AddProviderFlow from './AddProviderFlow.vue'
 import { useI18n } from 'vue-i18n'
 import type { AWS_BEDROCK_PROVIDER, LLM_PROVIDER } from '@shared/types/provider'
-import { Switch } from '@shadcn/components/ui/switch'
 import { Input } from '@shadcn/components/ui/input'
 import { DcButton } from '@dc-ui/components/button'
+import { DcConfirmDialog } from '@dc-ui/components/confirm-dialog'
+import { DcDropdownActionItem } from '@dc-ui/components/dropdown-action-item'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@shadcn/components/ui/dropdown-menu'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@shadcn/components/ui/tooltip'
 import { Skeleton } from '@shadcn/components/ui/skeleton'
 import draggable from 'vuedraggable'
 import { ScrollArea } from '@shadcn/components/ui/scroll-area'
@@ -342,7 +374,7 @@ import { continueGuidedOnboardingFromSettings } from '../lib/guidedOnboardingSet
 
 const route = useRoute()
 const router = useRouter()
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const windowClient = createWindowClient()
 const languageStore = useLanguageStore()
 const providerStore = useProviderStore()
@@ -383,7 +415,8 @@ const startupWorkloadStore = (() => {
     return null
   }
 })()
-const isAddProviderDialogOpen = ref(false)
+const addFlowCounter = ref(0)
+const providerPendingDelete = ref<LLM_PROVIDER | null>(null)
 
 const continueProviderGuide = async (
   state: Awaited<ReturnType<typeof selectProviderGuide.completeStep>> | null | undefined
@@ -397,7 +430,7 @@ const continueProviderGuide = async (
 }
 
 const handleSelectProviderGuidePrimary = async () => {
-  const firstProviderId = visibleProviders.value[0]?.id
+  const firstProviderId = guideCandidateProviders.value[0]?.id
   if (firstProviderId && activeProvider.value?.id !== firstProviderId) {
     await setActiveProvider(firstProviderId)
     await nextTick()
@@ -494,14 +527,12 @@ const handleProviderModelEnabled = async () => {
 const searchQueryBase = ref('')
 const searchQuery = refDebounced(searchQueryBase, 150)
 const showClearButton = computed(() => searchQueryBase.value.trim().length > 0)
-const isDisabledProvidersExpanded = ref(false)
 
 const editingProviderId = ref<string | null>(null)
 const editingName = ref('')
 const editInputRef = ref<HTMLInputElement | null>(null)
 
-const startEditingName = (provider: LLM_PROVIDER, event: Event) => {
-  event.stopPropagation()
+const startEditingName = (provider: LLM_PROVIDER) => {
   editingProviderId.value = provider.id
   editingName.value = provider.name
   nextTick(() => {
@@ -546,11 +577,21 @@ const filterProviders = (providers: LLM_PROVIDER[]) => {
   return providers.filter((provider) => t(provider.name).toLowerCase().includes(query))
 }
 
-const visibleProviders = computed(() =>
+// Sidebar membership: configured providers only. The full catalog lives behind
+// "Browse all providers" and never adds unconfigured rows to the daily sidebar.
+const configuredList = computed(() =>
+  filterProviders(providerStore.configuredProviders.filter((provider) => provider.id !== 'acp'))
+)
+const catalogProviders = computed(() =>
   providerStore.sortedProviders.filter((provider) => provider.id !== 'acp')
 )
+// Guided onboarding needs a clickable provider row; before anything is
+// configured those rows live in the catalog view instead of the sidebar.
+const guideCandidateProviders = computed(() =>
+  configuredList.value.length > 0 ? configuredList.value : catalogProviders.value
+)
 const canAdvanceProviderSelection = computed(() =>
-  Boolean(activeProvider.value ?? visibleProviders.value[0])
+  Boolean(activeProvider.value ?? guideCandidateProviders.value[0])
 )
 const canAdvanceProviderApiKey = computed(() => Boolean(activeProvider.value?.apiKey?.trim()))
 const getCurrentProviderModels = () => {
@@ -584,9 +625,58 @@ const showProviderSkeleton = computed(
   () =>
     (!providerStore.initialized ||
       startupWorkloadStore?.isTaskRunning('settings.providers.summary')) &&
-    visibleProviders.value.length === 0
+    providerStore.sortedProviders.length === 0
 )
 
+// Compute each provider's health once per render instead of invoking the
+// store lookup repeatedly in healthLabel/healthTooltip/healthDotClass.
+const providerHealthMap = computed(() => {
+  const map: Record<string, { status: string; checkedAt?: number }> = {}
+  for (const provider of providerStore.configuredProviders) {
+    map[provider.id] = providerStore.getProviderHealth(provider.id)
+  }
+  return map
+})
+
+const getHealth = (providerId: string) =>
+  providerHealthMap.value[providerId] ?? { status: 'not_checked' }
+
+const healthLabel = (providerId: string) => {
+  const health = getHealth(providerId)
+  switch (health.status) {
+    case 'verified':
+      return t('settings.provider.health.verified')
+    case 'checking':
+      return t('settings.provider.health.checking')
+    case 'needs_attention':
+      return t('settings.provider.health.needsAttention')
+    default:
+      return t('settings.provider.health.notChecked')
+  }
+}
+
+const healthTooltip = (providerId: string) => {
+  const health = getHealth(providerId)
+  if (health.checkedAt) {
+    return `${healthLabel(providerId)} · ${new Date(health.checkedAt).toLocaleString(locale.value)}`
+  }
+  return healthLabel(providerId)
+}
+
+const healthDotClass = (providerId: string) => {
+  const health = getHealth(providerId)
+  switch (health.status) {
+    case 'verified':
+      return 'bg-emerald-500'
+    case 'checking':
+      return 'bg-primary animate-pulse'
+    case 'needs_attention':
+      return 'bg-amber-500'
+    default:
+      return 'bg-muted-foreground/40'
+  }
+}
+
 let guideTargetSyncPending = false
 let providerDetailMutationObserver: MutationObserver | null = null
 
@@ -642,7 +732,7 @@ const observeProviderDetailGuideTargets = () => {
 const syncGuideTargets = () => {
   const activeProviderId =
     typeof route.params.providerId === 'string' ? route.params.providerId : null
-  const firstProviderId = visibleProviders.value[0]?.id
+  const firstProviderId = guideCandidateProviders.value[0]?.id
   const detailRoot = providerDetailRef.value
 
   providerListGuideTargetRef.value = firstProviderId
@@ -660,65 +750,44 @@ const syncGuideTargets = () => {
           `[data-testid^="provider-model-toggle-${activeProviderId}-"]`
         ) as HTMLElement | null))
       : null) ??
-    (detailRoot?.querySelector(
-      '[data-testid="provider-models-tab-trigger"]'
-    ) as HTMLElement | null) ??
-    (document.querySelector('[data-testid="provider-models-tab-trigger"]') as HTMLElement | null)
+    (detailRoot?.querySelector('[data-testid="provider-models-section"]') as HTMLElement | null) ??
+    (document.querySelector('[data-testid="provider-models-section"]') as HTMLElement | null)
 }
 
-const allEnabledProviders = computed(() => visibleProviders.value.filter((p) => p.enable))
-const allDisabledProviders = computed(() => visibleProviders.value.filter((p) => !p.enable))
-
-// 分别处理启用和禁用的 providers
-const enabledProviders = computed({
-  get: () => filterProviders(allEnabledProviders.value),
+// Reordering the sidebar only rearranges configured providers; unconfigured
+// catalog entries keep their relative order at the end of the persisted order.
+const sidebarProviders = computed({
+  get: () => configuredList.value,
   set: (newProviders) => {
+    const configuredIds = new Set(providerStore.configuredProviders.map((provider) => provider.id))
     const isFiltered = searchQuery.value.trim().length > 0
+    let reorderedConfigured: LLM_PROVIDER[]
     if (isFiltered) {
       const orderMap = new Map(newProviders.map((provider, index) => [provider.id, index]))
-      const reorderedEnabled = [...allEnabledProviders.value].sort((a, b) => {
+      reorderedConfigured = [...providerStore.configuredProviders].sort((a, b) => {
         const orderA = orderMap.get(a.id) ?? Infinity
         const orderB = orderMap.get(b.id) ?? Infinity
         return orderA - orderB
       })
-      const allProviders = [...reorderedEnabled, ...allDisabledProviders.value]
-      providerStore.updateProvidersOrder(allProviders)
     } else {
-      const allProviders = [...newProviders, ...allDisabledProviders.value]
-      providerStore.updateProvidersOrder(allProviders)
+      reorderedConfigured = [
+        ...newProviders,
+        ...providerStore.configuredProviders.filter(
+          (provider) => !newProviders.some((item) => item.id === provider.id)
+        )
+      ]
     }
-  }
-})
-
-const disabledProviders = computed({
-  get: () => filterProviders(allDisabledProviders.value),
-  set: (newProviders) => {
-    const isFiltered = searchQuery.value.trim().length > 0
-    if (isFiltered) {
-      const orderMap = new Map(newProviders.map((provider, index) => [provider.id, index]))
-      const reorderedDisabled = [...allDisabledProviders.value].sort((a, b) => {
-        const orderA = orderMap.get(a.id) ?? Infinity
-        const orderB = orderMap.get(b.id) ?? Infinity
-        return orderA - orderB
+    const unconfigured = providerStore.sortedProviders.filter(
+      (provider) => !configuredIds.has(provider.id)
+    )
+    void providerStore
+      .updateProvidersOrder([...reorderedConfigured, ...unconfigured])
+      .catch((error) => {
+        console.error('Failed to reorder providers:', error)
       })
-      const allProviders = [...allEnabledProviders.value, ...reorderedDisabled]
-      providerStore.updateProvidersOrder(allProviders)
-    } else {
-      const allProviders = [...allEnabledProviders.value, ...newProviders]
-      providerStore.updateProvidersOrder(allProviders)
-    }
   }
 })
 
-watch(
-  () => [searchQuery.value.trim(), disabledProviders.value.length] as const,
-  ([query, disabledMatchCount]) => {
-    if (query.length > 0 && disabledMatchCount > 0) {
-      isDisabledProvidersExpanded.value = true
-    }
-  }
-)
-
 const setActiveProvider = (providerId: string) => {
   return router.push({
     name: 'settings-provider',
@@ -728,6 +797,18 @@ const setActiveProvider = (providerId: string) => {
   })
 }
 
+const openCatalog = () => {
+  return router.push({
+    name: 'settings-provider',
+    params: route.params,
+    query: { view: 'catalog' }
+  })
+}
+
+const handleCatalogSelect = async (providerId: string) => {
+  await handleProviderRowClick(providerId)
+}
+
 const handleProviderRowClick = async (providerId: string) => {
   await setActiveProvider(providerId)
 
@@ -740,7 +821,7 @@ const handleProviderRowClick = async (providerId: string) => {
     return
   }
 
-  const firstProviderId = visibleProviders.value[0]?.id
+  const firstProviderId = guideCandidateProviders.value[0]?.id
   if (!firstProviderId || providerId !== firstProviderId) {
     return
   }
@@ -763,7 +844,12 @@ const scrollToProvider = (providerId: string) => {
 
 const toggleProviderStatus = async (provider: LLM_PROVIDER) => {
   const willEnable = !provider.enable
-  await providerStore.updateProviderStatus(provider.id, willEnable)
+  try {
+    await providerStore.updateProviderStatus(provider.id, willEnable)
+  } catch (error) {
+    console.error('Failed to update provider status:', error)
+    return
+  }
   // 切换状态后，同时打开该服务商的详情页面
   setActiveProvider(provider.id)
 
@@ -774,6 +860,32 @@ const toggleProviderStatus = async (provider: LLM_PROVIDER) => {
   }
 }
 
+const requestDeleteProvider = (provider: LLM_PROVIDER) => {
+  providerPendingDelete.value = provider
+}
+
+const confirmDeleteProvider = async () => {
+  const provider = providerPendingDelete.value
+  if (!provider) {
+    return
+  }
+  providerPendingDelete.value = null
+  try {
+    await providerStore.removeProvider(provider.id)
+  } catch (error) {
+    console.error('Failed to delete provider:', error)
+    return
+  }
+  if (route.params.providerId === provider.id) {
+    const fallback = configuredList.value.find((item) => item.id !== provider.id)
+    if (fallback) {
+      await setActiveProvider(fallback.id)
+    } else {
+      await openCatalog()
+    }
+  }
+}
+
 const activeProvider = computed(() => {
   const provider = providerStore.providers.find((p) => p.id === route.params.providerId)
   if (provider?.id === 'acp') {
@@ -783,8 +895,27 @@ const activeProvider = computed(() => {
   return provider
 })
 
-const openAddProviderDialog = () => {
-  isAddProviderDialogOpen.value = true
+const showCatalog = computed(() => {
+  if (route.query.view === 'catalog') {
+    return true
+  }
+  // Use the unfiltered configured set so a no-match search does not replace
+  // the detail pane with the catalog view.
+  const hasConfigured = providerStore.configuredProviders.some((p) => p.id !== 'acp')
+  return !activeProvider.value && !hasConfigured
+})
+
+const showAddFlow = computed(() => route.query.view === 'add-custom')
+// A fresh key per entry gives every add attempt its own draft id.
+const addFlowKey = computed(() => `add-provider-${addFlowCounter.value}`)
+
+const openAddProviderFlow = () => {
+  addFlowCounter.value += 1
+  return router.push({
+    name: 'settings-provider',
+    params: route.params,
+    query: { view: 'add-custom' }
+  })
 }
 
 const handleProviderAdded = (provider: LLM_PROVIDER) => {
@@ -794,8 +925,8 @@ const handleProviderAdded = (provider: LLM_PROVIDER) => {
 
 onMounted(async () => {
   await providerStore.ensureInitialized()
-  if (!route.params.providerId && visibleProviders.value.length > 0) {
-    setActiveProvider(visibleProviders.value[0].id)
+  if (!route.params.providerId && !route.query.view && configuredList.value.length > 0) {
+    setActiveProvider(configuredList.value[0].id)
   }
 
   scheduleGuideTargetSync()
@@ -822,7 +953,8 @@ watch(
   () =>
     [
       route.params.providerId,
-      visibleProviders.value.map((provider) => provider.id).join('|'),
+      guideCandidateProviders.value.map((provider) => provider.id).join('|'),
+      showCatalog.value,
       selectProviderGuide.showGuide.value,
       providerApiKeyGuide.showGuide.value,
       providerModelGuide.showGuide.value,
@@ -854,32 +986,6 @@ watch(
 const handleDragEnd = () => {
   // 可以在这里添加额外的处理逻辑
 }
-
-// 处理启用区域的拖拽移动事件
-const onMoveEnabled = (evt: any) => {
-  const draggedProvider = evt.draggedContext.element
-  const relatedProvider = evt.relatedContext?.element
-  if (!draggedProvider || !draggedProvider.enable) {
-    return false
-  }
-  if (relatedProvider && !relatedProvider.enable) {
-    return false
-  }
-  return true
-}
-
-// 处理禁用区域的拖拽移动事件
-const onMoveDisabled = (evt: any) => {
-  const draggedProvider = evt.draggedContext.element
-  const relatedProvider = evt.relatedContext?.element
-  if (!draggedProvider || draggedProvider.enable) {
-    return false
-  }
-  if (relatedProvider && relatedProvider.enable) {
-    return false
-  }
-  return true
-}
 </script>
 
 <style scoped>
diff --git a/src/renderer/settings/components/ModelProviderSettingsDetail.vue b/src/renderer/settings/components/ModelProviderSettingsDetail.vue
index f1dc768854..a9452d98e8 100644
--- a/src/renderer/settings/components/ModelProviderSettingsDetail.vue
+++ b/src/renderer/settings/components/ModelProviderSettingsDetail.vue
@@ -1,9 +1,9 @@
 <template>
   <ProviderSettingsShell
-    v-model:active-tab="activeTab"
     :title="t(provider.name)"
     :subtitle="provider.baseUrl"
     :enabled-count="enabledModels.length"
+    :health="providerHealth"
   >
     <template #connection>
       <ProviderApiConfig
@@ -167,9 +167,18 @@ const enabledModels = computed(() => {
 })
 const checkResult = ref<boolean>(false)
 const showCheckModelDialog = ref(false)
-const activeTab = ref<'connection' | 'models' | 'advanced'>('connection')
-const syncActiveTabFromOnboardingStep = (stepId?: string | null) => {
-  activeTab.value = stepId === 'provider-model' ? 'models' : 'connection'
+const providerHealth = computed(() => providerStore.getProviderHealth(props.provider.id))
+// The vertical page keeps every section mounted; onboarding steps scroll to the
+// relevant section instead of switching tabs.
+const scrollToOnboardingSection = (stepId?: string | null) => {
+  if (stepId !== 'provider-model') {
+    return
+  }
+  void nextTick(() => {
+    document
+      .querySelector('[data-testid="provider-models-section"]')
+      ?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  })
 }
 
 const providerWebsites = computed<ProviderWebsites | undefined>(
@@ -227,6 +236,8 @@ const validateApiKey = async () => {
       showCheckModelDialog.value = true
       // 验证成功后刷新当前provider的模型列表
       await modelStore.refreshProviderModels(props.provider.id)
+      // 首次配置成功且用户尚未勾选任何模型时，应用确定性的初始推荐
+      await modelStore.applyInitialModelRecommendations(props.provider.id)
       return true
     } else {
       console.log('验证失败', resp.errorMsg)
@@ -314,7 +325,7 @@ const initProviderSettings = async () => {
 watch(
   () => props.provider.id,
   () => {
-    syncActiveTabFromOnboardingStep(props.activeOnboardingStepId)
+    scrollToOnboardingSection(props.activeOnboardingStepId)
     initProviderSettings()
   },
   { immediate: true }
@@ -323,7 +334,7 @@ watch(
 watch(
   () => props.activeOnboardingStepId,
   (stepId) => {
-    syncActiveTabFromOnboardingStep(stepId)
+    scrollToOnboardingSection(stepId)
   },
   { immediate: true }
 )
diff --git a/src/renderer/settings/components/ProviderApiConfig.vue b/src/renderer/settings/components/ProviderApiConfig.vue
index 0a17825a7b..a29263063b 100644
--- a/src/renderer/settings/components/ProviderApiConfig.vue
+++ b/src/renderer/settings/components/ProviderApiConfig.vue
@@ -119,7 +119,24 @@
 
       <div class="flex flex-col gap-2 w-full">
         <Label :for="`${provider.id}-apikey`" class="w-full">API Key</Label>
-        <div class="relative w-full">
+        <div v-if="showKeySummary" class="flex w-full items-center gap-2">
+          <div
+            data-testid="provider-api-key-summary"
+            class="flex h-9 flex-1 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground"
+          >
+            <span class="truncate font-mono">{{ maskedApiKey }}</span>
+          </div>
+          <DcButton
+            data-testid="provider-update-key-button"
+            variant="outline"
+            size="sm"
+            class="shrink-0 text-xs"
+            @click="startEditingKey"
+          >
+            {{ t('settings.provider.updateKey') }}
+          </DcButton>
+        </div>
+        <div v-else class="relative w-full">
           <Input
             data-testid="provider-api-key-input"
             :id="`${provider.id}-apikey`"
@@ -287,7 +304,15 @@ const apiHost = ref(props.provider.baseUrl || '')
 const keyStatus = ref<KeyStatus | null>(null)
 const isRefreshing = ref(false)
 const showApiKey = ref(false)
+const isEditingKey = ref(false)
 const baseUrlUnlocked = ref(false)
+// After setup the stored key renders as a masked summary; the full secret is
+// never shown again — replacing it goes through the explicit Update key action.
+const showKeySummary = computed(() => !isEditingKey.value && Boolean(props.provider.apiKey?.trim()))
+const maskedApiKey = computed(() => {
+  const key = props.provider.apiKey?.trim() ?? ''
+  return key.length > 8 ? `••••••••${key.slice(-4)}` : '••••••••'
+})
 const defaultBaseUrl = computed(() => props.providerWebsites?.defaultBaseUrl?.trim() || '')
 const hasDefaultBaseUrl = computed(() => defaultBaseUrl.value.length > 0)
 const isBaseUrlEditableByDefault = computed(
@@ -334,10 +359,17 @@ watch(
     apiKey.value = props.provider.apiKey || ''
     apiHost.value = props.provider.baseUrl || ''
     baseUrlUnlocked.value = false
+    isEditingKey.value = false
   },
   { immediate: true }
 )
 
+const startEditingKey = () => {
+  isEditingKey.value = true
+  apiKey.value = ''
+  showApiKey.value = false
+}
+
 const handleApiKeyChange = (value: string) => {
   emit('api-key-change', value)
 }
@@ -345,6 +377,12 @@ const handleApiKeyChange = (value: string) => {
 const handleApiKeyBlur = (event: FocusEvent) => {
   const target = event.target as HTMLInputElement | null
   if (!target) return
+  // Leaving the Update key editor empty keeps the stored key instead of wiping it.
+  if (isEditingKey.value && !target.value.trim()) {
+    isEditingKey.value = false
+    apiKey.value = props.provider.apiKey || ''
+    return
+  }
   handleApiKeyChange(target.value)
 }
 
diff --git a/src/renderer/settings/components/ProviderCatalog.vue b/src/renderer/settings/components/ProviderCatalog.vue
new file mode 100644
index 0000000000..a58ded3844
--- /dev/null
+++ b/src/renderer/settings/components/ProviderCatalog.vue
@@ -0,0 +1,130 @@
+<template>
+  <section class="w-full h-full" data-testid="provider-catalog">
+    <ScrollArea class="w-full h-full">
+      <div class="flex flex-col gap-4 p-4">
+        <div class="flex flex-col gap-1">
+          <h2 class="text-lg font-semibold">{{ t('settings.provider.catalog.title') }}</h2>
+          <p class="text-xs text-muted-foreground">
+            {{ t('settings.provider.catalog.description') }}
+          </p>
+        </div>
+
+        <div class="relative max-w-md">
+          <Input
+            v-model="searchQueryBase"
+            data-testid="provider-catalog-search"
+            :placeholder="t('settings.provider.catalog.searchPlaceholder')"
+            class="h-9 pr-8 text-sm"
+            @keydown.esc="searchQueryBase = ''"
+          />
+          <Icon
+            v-if="!searchQueryBase.trim()"
+            icon="lucide:search"
+            class="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none"
+          />
+          <button
+            v-else
+            type="button"
+            :aria-label="t('common.clear')"
+            class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            @click="searchQueryBase = ''"
+          >
+            <Icon icon="lucide:x" class="h-4 w-4" />
+          </button>
+        </div>
+
+        <button
+          data-testid="catalog-add-custom"
+          type="button"
+          class="flex items-center gap-3 rounded-lg border border-dashed border-border p-3 text-start transition-colors hover:bg-accent"
+          @click="$emit('add-custom')"
+        >
+          <Icon icon="lucide:plus" class="h-5 w-5 shrink-0 text-muted-foreground" />
+          <div class="min-w-0 flex-1">
+            <div class="truncate text-sm font-medium">
+              {{ t('settings.provider.addCustomProvider') }}
+            </div>
+            <div class="truncate text-xs text-muted-foreground">
+              {{ t('settings.provider.dialog.addCustomProvider.description') }}
+            </div>
+          </div>
+          <Icon icon="lucide:chevron-right" class="h-4 w-4 shrink-0 text-muted-foreground" />
+        </button>
+
+        <div v-if="filteredProviders.length === 0" class="py-10 text-center">
+          <p class="text-sm text-muted-foreground">
+            {{ t('settings.provider.catalog.noResults') }}
+          </p>
+        </div>
+
+        <div v-else class="grid grid-cols-1 gap-2 lg:grid-cols-2">
+          <button
+            v-for="provider in filteredProviders"
+            :key="provider.id"
+            :data-provider-id="provider.id"
+            type="button"
+            class="flex items-center gap-3 rounded-lg border border-border p-3 text-start transition-colors hover:bg-accent"
+            @click="$emit('select', provider.id)"
+          >
+            <ModelIcon
+              :model-id="provider.id"
+              :custom-class="'w-5 h-5 shrink-0 text-muted-foreground'"
+              :is-dark="themeStore.isDark"
+            />
+            <div class="min-w-0 flex-1">
+              <div class="truncate text-sm font-medium">{{ t(provider.name) }}</div>
+              <div class="truncate text-xs text-muted-foreground">
+                {{ provider.baseUrl || t('settings.provider.center.noApiUrl') }}
+              </div>
+            </div>
+            <DcBadge v-if="providerStore.isProviderConfigured(provider.id)" variant="outline">
+              {{ t('settings.provider.catalog.configured') }}
+            </DcBadge>
+            <Icon
+              v-else
+              icon="lucide:chevron-right"
+              class="h-4 w-4 shrink-0 text-muted-foreground"
+            />
+          </button>
+        </div>
+      </div>
+    </ScrollArea>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { refDebounced } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
+import { Input } from '@shadcn/components/ui/input'
+import { ScrollArea } from '@shadcn/components/ui/scroll-area'
+import { DcBadge } from '@dc-ui/components/badge'
+import ModelIcon from '@/components/icons/ModelIcon.vue'
+import { useProviderStore } from '@/stores/providerStore'
+import { useThemeStore } from '@/stores/theme'
+
+defineEmits<{
+  select: [providerId: string]
+  'add-custom': []
+}>()
+
+const { t } = useI18n()
+const providerStore = useProviderStore()
+const themeStore = useThemeStore()
+
+const searchQueryBase = ref('')
+const searchQuery = refDebounced(searchQueryBase, 150)
+
+const catalogProviders = computed(() =>
+  providerStore.sortedProviders.filter((provider) => provider.id !== 'acp')
+)
+
+const filteredProviders = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase()
+  if (!query) {
+    return catalogProviders.value
+  }
+  return catalogProviders.value.filter((provider) => t(provider.name).toLowerCase().includes(query))
+})
+</script>
diff --git a/src/renderer/settings/components/ProviderSettingsShell.vue b/src/renderer/settings/components/ProviderSettingsShell.vue
index 22829211b6..3e749e3c65 100644
--- a/src/renderer/settings/components/ProviderSettingsShell.vue
+++ b/src/renderer/settings/components/ProviderSettingsShell.vue
@@ -5,10 +5,31 @@
         <div class="rounded-lg border border-border bg-card p-4">
           <div class="flex min-w-0 flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
             <div class="min-w-0">
-              <h2 class="truncate text-lg font-semibold">{{ title }}</h2>
+              <div class="flex items-center gap-2">
+                <h2 class="truncate text-lg font-semibold">{{ title }}</h2>
+                <DcStatusPill
+                  v-if="health"
+                  data-testid="provider-health-pill"
+                  :status="healthPillStatus"
+                  :pulse="health.status === 'checking'"
+                  size="xs"
+                  :label="healthPillLabel"
+                />
+              </div>
               <p class="mt-1 truncate text-sm text-muted-foreground">
                 {{ subtitle || t('settings.provider.center.noApiUrl') }}
               </p>
+              <p
+                v-if="health?.checkedAt"
+                class="mt-1 text-xs text-muted-foreground"
+                data-testid="provider-health-checked-at"
+              >
+                {{
+                  t('settings.provider.health.lastChecked', {
+                    time: new Date(health.checkedAt).toLocaleString(locale)
+                  })
+                }}
+              </p>
             </div>
             <div class="flex shrink-0 flex-wrap items-center gap-2">
               <DcBadge variant="outline">
@@ -18,37 +39,52 @@
           </div>
         </div>
 
-        <Tabs v-model="activeTabModel" class="flex min-h-0 flex-1 flex-col gap-4">
-          <TabsList class="grid w-full grid-cols-3">
-            <TabsTrigger data-testid="provider-connection-tab-trigger" value="connection">
-              {{ t('settings.provider.center.tabs.connection') }}
-            </TabsTrigger>
-            <TabsTrigger data-testid="provider-models-tab-trigger" value="models">
-              {{ t('settings.provider.center.tabs.models') }}
-            </TabsTrigger>
-            <TabsTrigger value="advanced">
-              {{ t('settings.provider.center.tabs.advanced') }}
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="connection" class="mt-0">
-            <slot name="connection" />
-          </TabsContent>
+        <section
+          data-testid="provider-connection-section"
+          class="rounded-lg border border-border bg-card p-4"
+        >
+          <h3 class="mb-3 text-sm font-semibold">
+            {{ t('settings.provider.center.tabs.connection') }}
+          </h3>
+          <slot name="connection" />
+        </section>
 
-          <TabsContent value="models" class="mt-0">
-            <slot name="models" />
-          </TabsContent>
+        <section
+          data-testid="provider-models-section"
+          class="rounded-lg border border-border bg-card p-4"
+        >
+          <h3 class="mb-3 text-sm font-semibold">
+            {{ t('settings.provider.center.tabs.models') }}
+          </h3>
+          <slot name="models" />
+        </section>
 
-          <TabsContent value="advanced" class="mt-0">
-            <div class="flex flex-col gap-4">
+        <Collapsible v-model:open="isAdvancedOpen" class="rounded-lg border border-border bg-card">
+          <CollapsibleTrigger as-child>
+            <button
+              type="button"
+              data-testid="provider-advanced-toggle"
+              class="flex w-full items-center justify-between p-4 text-start"
+            >
+              <h3 class="text-sm font-semibold">
+                {{ t('settings.provider.center.tabs.advanced') }}
+              </h3>
+              <Icon
+                :icon="isAdvancedOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+                class="h-4 w-4 text-muted-foreground"
+              />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div class="flex flex-col gap-4 p-4 pt-0">
               <slot name="advanced">
                 <p class="text-xs leading-5 text-muted-foreground">
                   {{ t('settings.provider.center.noAdvancedConfig') }}
                 </p>
               </slot>
             </div>
-          </TabsContent>
-        </Tabs>
+          </CollapsibleContent>
+        </Collapsible>
       </div>
     </ScrollArea>
 
@@ -57,29 +93,53 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { Icon } from '@iconify/vue'
 import { ScrollArea } from '@shadcn/components/ui/scroll-area'
 import { DcBadge } from '@dc-ui/components/badge'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/components/ui/tabs'
-
-type ProviderSettingsTab = 'connection' | 'models' | 'advanced'
+import { DcStatusPill } from '@dc-ui/components/status-pill'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@shadcn/components/ui/collapsible'
+import type { ProviderHealthView } from '@/stores/providerStore'
 
 const props = defineProps<{
   title: string
   subtitle?: string
   enabledCount: number
-  activeTab: ProviderSettingsTab
+  health?: ProviderHealthView | null
 }>()
 
-const emit = defineEmits<{
-  'update:activeTab': [value: ProviderSettingsTab]
-}>()
+const { t, locale } = useI18n()
+
+const isAdvancedOpen = ref(false)
 
-const { t } = useI18n()
+const healthPillStatus = computed(() => {
+  switch (props.health?.status) {
+    case 'verified':
+      return 'success' as const
+    case 'checking':
+      return 'active' as const
+    case 'needs_attention':
+      return 'warning' as const
+    default:
+      return 'neutral' as const
+  }
+})
 
-const activeTabModel = computed<ProviderSettingsTab>({
-  get: () => props.activeTab,
-  set: (value) => emit('update:activeTab', value)
+const healthPillLabel = computed(() => {
+  switch (props.health?.status) {
+    case 'verified':
+      return t('settings.provider.health.verified')
+    case 'checking':
+      return t('settings.provider.health.checking')
+    case 'needs_attention':
+      return t('settings.provider.health.needsAttention')
+    default:
+      return t('settings.provider.health.notChecked')
+  }
 })
 </script>
diff --git a/src/renderer/src/i18n/da-DK/settings.json b/src/renderer/src/i18n/da-DK/settings.json
index 272304453d..f833132400 100644
--- a/src/renderer/src/i18n/da-DK/settings.json
+++ b/src/renderer/src/i18n/da-DK/settings.json
@@ -1136,7 +1136,40 @@
     "xaiGrokCancel": "Annuller",
     "xaiGrokOpenVerification": "Åbn bekræftelsessiden",
     "xaiGrokLoginTip": "Bruger xAI-enhedskode-OAuth til SuperGrok eller X Premium+. Tokens gemmes separat fra API-nøgler. API-nøgler fra Console understøttes stadig nedenfor.",
-    "xaiGrokApiKeyAlternative": "Eller brug en xAI Console-API-nøgle:"
+    "xaiGrokApiKeyAlternative": "Eller brug en xAI Console-API-nøgle:",
+    "browseAll": "Gennemse alle udbydere",
+    "updateKey": "Opdater nøgle",
+    "sidebar": {
+      "configured": "Konfigurerede",
+      "disabledTag": "Fra",
+      "empty": "Ingen udbydere er konfigureret endnu. Gennemse alle udbydere for at opsætte en."
+    },
+    "menu": {
+      "enable": "Aktivér",
+      "disable": "Deaktivér",
+      "rename": "Omdøb",
+      "delete": "Slet"
+    },
+    "health": {
+      "verified": "Verificeret",
+      "checking": "Kontrollerer",
+      "needsAttention": "Kræver opmærksomhed",
+      "notChecked": "Ikke kontrolleret",
+      "lastChecked": "Sidst kontrolleret {time}"
+    },
+    "catalog": {
+      "title": "Gennemse alle udbydere",
+      "description": "Vælg en udbyder for at starte opsætningen. Den vises i sidepanelet, når den er konfigureret.",
+      "searchPlaceholder": "Søg efter udbydere...",
+      "noResults": "Ingen matchende udbydere",
+      "configured": "Konfigureret"
+    },
+    "addFlow": {
+      "connect": "Forbind og indlæs modeller",
+      "validating": "Verificerer forbindelsen...",
+      "loadingModels": "Indlæser modeller...",
+      "failed": "Forbindelsen mislykkedes. Kontrollér konfigurationen og prøv igen."
+    }
   },
   "knowledgeBase": {
     "title": "Indstillinger for vidensbase",
diff --git a/src/renderer/src/i18n/de-DE/settings.json b/src/renderer/src/i18n/de-DE/settings.json
index 8435a4f42f..ce7c6923e0 100644
--- a/src/renderer/src/i18n/de-DE/settings.json
+++ b/src/renderer/src/i18n/de-DE/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "Abbrechen",
     "xaiGrokOpenVerification": "Bestätigungsseite öffnen",
     "xaiGrokLoginTip": "Verwendet xAI-Gerätecode-OAuth für SuperGrok oder X Premium+. Tokens werden getrennt von API-Schlüsseln gespeichert. Console-API-Schlüssel werden unten weiterhin unterstützt.",
-    "xaiGrokApiKeyAlternative": "Oder einen xAI Console-API-Schlüssel verwenden:"
+    "xaiGrokApiKeyAlternative": "Oder einen xAI Console-API-Schlüssel verwenden:",
+    "browseAll": "Alle Anbieter durchsuchen",
+    "updateKey": "Schlüssel aktualisieren",
+    "sidebar": {
+      "configured": "Konfiguriert",
+      "disabledTag": "Aus",
+      "empty": "Noch keine Anbieter konfiguriert. Durchsuchen Sie alle Anbieter, um einen einzurichten."
+    },
+    "menu": {
+      "enable": "Aktivieren",
+      "disable": "Deaktivieren",
+      "rename": "Umbenennen",
+      "delete": "Löschen"
+    },
+    "health": {
+      "verified": "Verifiziert",
+      "checking": "Wird geprüft",
+      "needsAttention": "Aufmerksamkeit nötig",
+      "notChecked": "Nicht geprüft",
+      "lastChecked": "Zuletzt geprüft {time}"
+    },
+    "catalog": {
+      "title": "Alle Anbieter durchsuchen",
+      "description": "Wählen Sie einen Anbieter aus, um die Einrichtung zu starten. Nach der Konfiguration erscheint er in der Seitenleiste.",
+      "searchPlaceholder": "Anbieter suchen...",
+      "noResults": "Keine passenden Anbieter",
+      "configured": "Konfiguriert"
+    },
+    "addFlow": {
+      "connect": "Verbinden und Modelle laden",
+      "validating": "Verbindung wird geprüft...",
+      "loadingModels": "Modelle werden geladen...",
+      "failed": "Verbindung fehlgeschlagen. Konfiguration prüfen und erneut versuchen."
+    }
   },
   "knowledgeBase": {
     "title": "Wissensdatenbank-Einstellungen",
diff --git a/src/renderer/src/i18n/en-US/settings.json b/src/renderer/src/i18n/en-US/settings.json
index 4feb41aa8a..9cdccca4d9 100644
--- a/src/renderer/src/i18n/en-US/settings.json
+++ b/src/renderer/src/i18n/en-US/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "Cancel",
     "xaiGrokOpenVerification": "Open verification page",
     "xaiGrokLoginTip": "Uses xAI device-code OAuth for SuperGrok or X Premium+. Tokens are stored separately from API keys. Console API keys remain supported below.",
-    "xaiGrokApiKeyAlternative": "Or use an xAI Console API key:"
+    "xaiGrokApiKeyAlternative": "Or use an xAI Console API key:",
+    "browseAll": "Browse all providers",
+    "updateKey": "Update key",
+    "sidebar": {
+      "configured": "Configured",
+      "disabledTag": "Off",
+      "empty": "No providers configured yet. Browse all providers to set one up."
+    },
+    "menu": {
+      "enable": "Enable",
+      "disable": "Disable",
+      "rename": "Rename",
+      "delete": "Delete"
+    },
+    "health": {
+      "verified": "Verified",
+      "checking": "Checking",
+      "needsAttention": "Needs attention",
+      "notChecked": "Not checked",
+      "lastChecked": "Last checked {time}"
+    },
+    "catalog": {
+      "title": "Browse all providers",
+      "description": "Pick a provider to start setting it up. It joins your sidebar once configured.",
+      "searchPlaceholder": "Search providers...",
+      "noResults": "No matching providers",
+      "configured": "Configured"
+    },
+    "addFlow": {
+      "connect": "Connect and load models",
+      "validating": "Verifying connection...",
+      "loadingModels": "Loading models...",
+      "failed": "Connection failed. Check the configuration and try again."
+    }
   },
   "knowledgeBase": {
     "title": "Knowledge Base Settings",
diff --git a/src/renderer/src/i18n/es-ES/settings.json b/src/renderer/src/i18n/es-ES/settings.json
index a74b67ce0f..5ce2396d2d 100644
--- a/src/renderer/src/i18n/es-ES/settings.json
+++ b/src/renderer/src/i18n/es-ES/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "Cancelar",
     "xaiGrokOpenVerification": "Abrir la página de verificación",
     "xaiGrokLoginTip": "Usa el OAuth con código de dispositivo de xAI para SuperGrok o X Premium+. Los tokens se almacenan por separado de las claves API. Las claves API de Console siguen siendo compatibles a continuación.",
-    "xaiGrokApiKeyAlternative": "O usa una clave API de xAI Console:"
+    "xaiGrokApiKeyAlternative": "O usa una clave API de xAI Console:",
+    "browseAll": "Explorar todos los proveedores",
+    "updateKey": "Actualizar clave",
+    "sidebar": {
+      "configured": "Configurados",
+      "disabledTag": "Apagado",
+      "empty": "Aún no hay proveedores configurados. Explore todos los proveedores para configurar uno."
+    },
+    "menu": {
+      "enable": "Activar",
+      "disable": "Desactivar",
+      "rename": "Renombrar",
+      "delete": "Eliminar"
+    },
+    "health": {
+      "verified": "Verificado",
+      "checking": "Comprobando",
+      "needsAttention": "Requiere atención",
+      "notChecked": "Sin comprobar",
+      "lastChecked": "Última comprobación {time}"
+    },
+    "catalog": {
+      "title": "Explorar todos los proveedores",
+      "description": "Elija un proveedor para empezar a configurarlo. Aparecerá en la barra lateral una vez configurado.",
+      "searchPlaceholder": "Buscar proveedores...",
+      "noResults": "No hay proveedores coincidentes",
+      "configured": "Configurado"
+    },
+    "addFlow": {
+      "connect": "Conectar y cargar modelos",
+      "validating": "Verificando la conexión...",
+      "loadingModels": "Cargando modelos...",
+      "failed": "Error de conexión. Revisa la configuración e inténtalo de nuevo."
+    }
   },
   "knowledgeBase": {
     "title": "Configuración de la base de conocimientos",
diff --git a/src/renderer/src/i18n/fa-IR/settings.json b/src/renderer/src/i18n/fa-IR/settings.json
index 5f6f85a146..123ede36dc 100644
--- a/src/renderer/src/i18n/fa-IR/settings.json
+++ b/src/renderer/src/i18n/fa-IR/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "لغو",
     "xaiGrokOpenVerification": "باز کردن صفحه تأیید",
     "xaiGrokLoginTip": "برای SuperGrok یا X Premium+ از OAuth کد دستگاه xAI استفاده می‌کند. توکن‌ها جدا از کلیدهای API ذخیره می‌شوند. کلیدهای API کنسول نیز در پایین پشتیبانی می‌شوند.",
-    "xaiGrokApiKeyAlternative": "یا از کلید API کنسول xAI استفاده کنید:"
+    "xaiGrokApiKeyAlternative": "یا از کلید API کنسول xAI استفاده کنید:",
+    "browseAll": "مرور همه ارائه‌دهندگان",
+    "updateKey": "به‌روزرسانی کلید",
+    "sidebar": {
+      "configured": "پیکربندی‌شده",
+      "disabledTag": "خاموش",
+      "empty": "هنوز هیچ ارائه‌دهنده‌ای پیکربندی نشده است. برای راه‌اندازی، همه ارائه‌دهندگان را مرور کنید."
+    },
+    "menu": {
+      "enable": "فعال کردن",
+      "disable": "غیرفعال کردن",
+      "rename": "تغییر نام",
+      "delete": "حذف"
+    },
+    "health": {
+      "verified": "تأیید شده",
+      "checking": "در حال بررسی",
+      "needsAttention": "نیاز به توجه",
+      "notChecked": "بررسی نشده",
+      "lastChecked": "آخرین بررسی {time}"
+    },
+    "catalog": {
+      "title": "مرور همه ارائه‌دهندگان",
+      "description": "یک ارائه‌دهنده را برای شروع راه‌اندازی انتخاب کنید. پس از پیکربندی در نوار کناری نمایش داده می‌شود.",
+      "searchPlaceholder": "جستجوی ارائه‌دهندگان...",
+      "noResults": "ارائه‌دهنده منطبقی یافت نشد",
+      "configured": "پیکربندی‌شده"
+    },
+    "addFlow": {
+      "connect": "اتصال و بارگیری مدل‌ها",
+      "validating": "در حال تأیید اتصال...",
+      "loadingModels": "در حال بارگیری مدل‌ها...",
+      "failed": "اتصال ناموفق بود. پیکربندی را بررسی کرده و دوباره تلاش کنید."
+    }
   },
   "knowledgeBase": {
     "title": "تنظیمات پایگاه دانش",
diff --git a/src/renderer/src/i18n/fr-FR/settings.json b/src/renderer/src/i18n/fr-FR/settings.json
index 73d1055443..4aeafef028 100644
--- a/src/renderer/src/i18n/fr-FR/settings.json
+++ b/src/renderer/src/i18n/fr-FR/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "Annuler",
     "xaiGrokOpenVerification": "Ouvrir la page de vérification",
     "xaiGrokLoginTip": "Utilise le flux OAuth par code d’appareil de xAI pour SuperGrok ou X Premium+. Les jetons sont stockés séparément des clés API. Les clés API de Console restent prises en charge ci-dessous.",
-    "xaiGrokApiKeyAlternative": "Ou utiliser une clé API xAI Console :"
+    "xaiGrokApiKeyAlternative": "Ou utiliser une clé API xAI Console :",
+    "browseAll": "Parcourir tous les fournisseurs",
+    "updateKey": "Mettre à jour la clé",
+    "sidebar": {
+      "configured": "Configurés",
+      "disabledTag": "Désactivé",
+      "empty": "Aucun fournisseur configuré. Parcourez tous les fournisseurs pour en configurer un."
+    },
+    "menu": {
+      "enable": "Activer",
+      "disable": "Désactiver",
+      "rename": "Renommer",
+      "delete": "Supprimer"
+    },
+    "health": {
+      "verified": "Vérifié",
+      "checking": "Vérification",
+      "needsAttention": "Attention requise",
+      "notChecked": "Non vérifié",
+      "lastChecked": "Dernière vérification {time}"
+    },
+    "catalog": {
+      "title": "Parcourir tous les fournisseurs",
+      "description": "Choisissez un fournisseur pour commencer la configuration. Il apparaîtra dans la barre latérale une fois configuré.",
+      "searchPlaceholder": "Rechercher des fournisseurs...",
+      "noResults": "Aucun fournisseur correspondant",
+      "configured": "Configuré"
+    },
+    "addFlow": {
+      "connect": "Connecter et charger les modèles",
+      "validating": "Vérification de la connexion...",
+      "loadingModels": "Chargement des modèles...",
+      "failed": "Échec de la connexion. Vérifiez la configuration et réessayez."
+    }
   },
   "knowledgeBase": {
     "title": "Paramètres de la base de connaissances",
diff --git a/src/renderer/src/i18n/he-IL/settings.json b/src/renderer/src/i18n/he-IL/settings.json
index 68b79120f1..bc880a4dfa 100644
--- a/src/renderer/src/i18n/he-IL/settings.json
+++ b/src/renderer/src/i18n/he-IL/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "ביטול",
     "xaiGrokOpenVerification": "פתיחת דף האימות",
     "xaiGrokLoginTip": "משתמש ב-OAuth עם קוד מכשיר של xAI עבור SuperGrok או X Premium+. האסימונים נשמרים בנפרד ממפתחות API. מפתחות API של Console עדיין נתמכים למטה.",
-    "xaiGrokApiKeyAlternative": "או להשתמש במפתח API של xAI Console:"
+    "xaiGrokApiKeyAlternative": "או להשתמש במפתח API של xAI Console:",
+    "browseAll": "עיון בכל הספקים",
+    "updateKey": "עדכון מפתח",
+    "sidebar": {
+      "configured": "מוגדרים",
+      "disabledTag": "כבוי",
+      "empty": "עדיין לא הוגדרו ספקים. עיינו בכל הספקים כדי להגדיר אחד."
+    },
+    "menu": {
+      "enable": "הפעלה",
+      "disable": "השבתה",
+      "rename": "שינוי שם",
+      "delete": "מחיקה"
+    },
+    "health": {
+      "verified": "מאומת",
+      "checking": "בבדיקה",
+      "needsAttention": "דורש טיפול",
+      "notChecked": "לא נבדק",
+      "lastChecked": "נבדק לאחרונה {time}"
+    },
+    "catalog": {
+      "title": "עיון בכל הספקים",
+      "description": "בחרו ספק כדי להתחיל בהגדרתו. הוא יופיע בסרגל הצד לאחר ההגדרה.",
+      "searchPlaceholder": "חיפוש ספקים...",
+      "noResults": "אין ספקים תואמים",
+      "configured": "מוגדר"
+    },
+    "addFlow": {
+      "connect": "התחברות וטעינת מודלים",
+      "validating": "מאמת את החיבור...",
+      "loadingModels": "טוען מודלים...",
+      "failed": "החיבור נכשל. בדקו את התצורה ונסו שוב."
+    }
   },
   "knowledgeBase": {
     "title": "הגדרות בסיס ידע",
diff --git a/src/renderer/src/i18n/id-ID/settings.json b/src/renderer/src/i18n/id-ID/settings.json
index 3262ad0cf4..e04e080f13 100644
--- a/src/renderer/src/i18n/id-ID/settings.json
+++ b/src/renderer/src/i18n/id-ID/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "Batal",
     "xaiGrokOpenVerification": "Buka halaman verifikasi",
     "xaiGrokLoginTip": "Menggunakan OAuth kode perangkat xAI untuk SuperGrok atau X Premium+. Token disimpan terpisah dari kunci API. Kunci API Console tetap didukung di bawah ini.",
-    "xaiGrokApiKeyAlternative": "Atau gunakan kunci API xAI Console:"
+    "xaiGrokApiKeyAlternative": "Atau gunakan kunci API xAI Console:",
+    "browseAll": "Jelajahi semua penyedia",
+    "updateKey": "Perbarui kunci",
+    "sidebar": {
+      "configured": "Terkonfigurasi",
+      "disabledTag": "Mati",
+      "empty": "Belum ada penyedia yang dikonfigurasi. Jelajahi semua penyedia untuk mulai menyiapkan."
+    },
+    "menu": {
+      "enable": "Aktifkan",
+      "disable": "Nonaktifkan",
+      "rename": "Ubah nama",
+      "delete": "Hapus"
+    },
+    "health": {
+      "verified": "Terverifikasi",
+      "checking": "Memeriksa",
+      "needsAttention": "Perlu perhatian",
+      "notChecked": "Belum diperiksa",
+      "lastChecked": "Terakhir diperiksa {time}"
+    },
+    "catalog": {
+      "title": "Jelajahi semua penyedia",
+      "description": "Pilih penyedia untuk mulai menyiapkannya. Penyedia akan muncul di bilah samping setelah dikonfigurasi.",
+      "searchPlaceholder": "Cari penyedia...",
+      "noResults": "Tidak ada penyedia yang cocok",
+      "configured": "Terkonfigurasi"
+    },
+    "addFlow": {
+      "connect": "Hubungkan dan muat model",
+      "validating": "Memverifikasi koneksi...",
+      "loadingModels": "Memuat model...",
+      "failed": "Koneksi gagal. Periksa konfigurasi dan coba lagi."
+    }
   },
   "knowledgeBase": {
     "title": "Pengaturan basis pengetahuan",
diff --git a/src/renderer/src/i18n/it-IT/settings.json b/src/renderer/src/i18n/it-IT/settings.json
index 7f95a8463d..98e16d345b 100644
--- a/src/renderer/src/i18n/it-IT/settings.json
+++ b/src/renderer/src/i18n/it-IT/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "Annulla",
     "xaiGrokOpenVerification": "Apri la pagina di verifica",
     "xaiGrokLoginTip": "Usa OAuth con codice dispositivo di xAI per SuperGrok o X Premium+. I token vengono archiviati separatamente dalle chiavi API. Le chiavi API di Console restano supportate qui sotto.",
-    "xaiGrokApiKeyAlternative": "Oppure usa una chiave API xAI Console:"
+    "xaiGrokApiKeyAlternative": "Oppure usa una chiave API xAI Console:",
+    "browseAll": "Sfoglia tutti i provider",
+    "updateKey": "Aggiorna chiave",
+    "sidebar": {
+      "configured": "Configurati",
+      "disabledTag": "Spento",
+      "empty": "Nessun provider configurato. Sfoglia tutti i provider per configurarne uno."
+    },
+    "menu": {
+      "enable": "Abilita",
+      "disable": "Disabilita",
+      "rename": "Rinomina",
+      "delete": "Elimina"
+    },
+    "health": {
+      "verified": "Verificato",
+      "checking": "Verifica in corso",
+      "needsAttention": "Richiede attenzione",
+      "notChecked": "Non verificato",
+      "lastChecked": "Ultimo controllo {time}"
+    },
+    "catalog": {
+      "title": "Sfoglia tutti i provider",
+      "description": "Scegli un provider per iniziare la configurazione. Comparirà nella barra laterale una volta configurato.",
+      "searchPlaceholder": "Cerca provider...",
+      "noResults": "Nessun provider corrispondente",
+      "configured": "Configurato"
+    },
+    "addFlow": {
+      "connect": "Connetti e carica i modelli",
+      "validating": "Verifica della connessione...",
+      "loadingModels": "Caricamento dei modelli...",
+      "failed": "Connessione non riuscita. Controlla la configurazione e riprova."
+    }
   },
   "knowledgeBase": {
     "title": "Impostazioni base di conoscenza",
diff --git a/src/renderer/src/i18n/ja-JP/settings.json b/src/renderer/src/i18n/ja-JP/settings.json
index 83333ca6e2..73d6151c56 100644
--- a/src/renderer/src/i18n/ja-JP/settings.json
+++ b/src/renderer/src/i18n/ja-JP/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "キャンセル",
     "xaiGrokOpenVerification": "認証ページを開く",
     "xaiGrokLoginTip": "SuperGrok または X Premium+ 向けの xAI デバイスコード OAuth を使用します。トークンは API キーとは別に保存されます。下記の Console API キーも引き続き使用できます。",
-    "xaiGrokApiKeyAlternative": "または xAI Console API キーを使用："
+    "xaiGrokApiKeyAlternative": "または xAI Console API キーを使用：",
+    "browseAll": "すべてのプロバイダーを参照",
+    "updateKey": "キーを更新",
+    "sidebar": {
+      "configured": "設定済み",
+      "disabledTag": "無効",
+      "empty": "プロバイダーがまだ設定されていません。すべてのプロバイダーを参照して設定を始めましょう。"
+    },
+    "menu": {
+      "enable": "有効にする",
+      "disable": "無効にする",
+      "rename": "名前を変更",
+      "delete": "削除"
+    },
+    "health": {
+      "verified": "検証済み",
+      "checking": "確認中",
+      "needsAttention": "要対応",
+      "notChecked": "未確認",
+      "lastChecked": "最終確認 {time}"
+    },
+    "catalog": {
+      "title": "すべてのプロバイダーを参照",
+      "description": "設定を始めるプロバイダーを選択してください。設定が完了するとサイドバーに表示されます。",
+      "searchPlaceholder": "プロバイダーを検索...",
+      "noResults": "一致するプロバイダーがありません",
+      "configured": "設定済み"
+    },
+    "addFlow": {
+      "connect": "接続してモデルを読み込む",
+      "validating": "接続を検証中...",
+      "loadingModels": "モデルを読み込み中...",
+      "failed": "接続に失敗しました。設定を確認して再試行してください。"
+    }
   },
   "knowledgeBase": {
     "title": "ナレッジベース設定",
diff --git a/src/renderer/src/i18n/ko-KR/settings.json b/src/renderer/src/i18n/ko-KR/settings.json
index 493c5e168e..fce2ea6ce2 100644
--- a/src/renderer/src/i18n/ko-KR/settings.json
+++ b/src/renderer/src/i18n/ko-KR/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "취소",
     "xaiGrokOpenVerification": "인증 페이지 열기",
     "xaiGrokLoginTip": "SuperGrok 또는 X Premium+에 xAI 기기 코드 OAuth를 사용합니다. 토큰은 API 키와 별도로 저장됩니다. 아래에서 Console API 키도 계속 사용할 수 있습니다.",
-    "xaiGrokApiKeyAlternative": "또는 xAI Console API 키 사용:"
+    "xaiGrokApiKeyAlternative": "또는 xAI Console API 키 사용:",
+    "browseAll": "모든 제공업체 보기",
+    "updateKey": "키 업데이트",
+    "sidebar": {
+      "configured": "구성됨",
+      "disabledTag": "꺼짐",
+      "empty": "아직 구성된 제공업체가 없습니다. 모든 제공업체를 둘러보고 설정을 시작하세요."
+    },
+    "menu": {
+      "enable": "활성화",
+      "disable": "비활성화",
+      "rename": "이름 바꾸기",
+      "delete": "삭제"
+    },
+    "health": {
+      "verified": "확인됨",
+      "checking": "확인 중",
+      "needsAttention": "주의 필요",
+      "notChecked": "확인 안 됨",
+      "lastChecked": "마지막 확인 {time}"
+    },
+    "catalog": {
+      "title": "모든 제공업체 보기",
+      "description": "설정할 제공업체를 선택하세요. 구성이 완료되면 사이드바에 표시됩니다.",
+      "searchPlaceholder": "제공업체 검색...",
+      "noResults": "일치하는 제공업체가 없습니다",
+      "configured": "구성됨"
+    },
+    "addFlow": {
+      "connect": "연결하고 모델 불러오기",
+      "validating": "연결 확인 중...",
+      "loadingModels": "모델 불러오는 중...",
+      "failed": "연결에 실패했습니다. 구성을 확인하고 다시 시도하세요."
+    }
   },
   "knowledgeBase": {
     "title": "지식 베이스 설정",
diff --git a/src/renderer/src/i18n/ms-MY/settings.json b/src/renderer/src/i18n/ms-MY/settings.json
index d957c178ce..3f9c605e2c 100644
--- a/src/renderer/src/i18n/ms-MY/settings.json
+++ b/src/renderer/src/i18n/ms-MY/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "Batal",
     "xaiGrokOpenVerification": "Buka halaman pengesahan",
     "xaiGrokLoginTip": "Menggunakan OAuth kod peranti xAI untuk SuperGrok atau X Premium+. Token disimpan berasingan daripada kunci API. Kunci API Console masih disokong di bawah.",
-    "xaiGrokApiKeyAlternative": "Atau gunakan kunci API xAI Console:"
+    "xaiGrokApiKeyAlternative": "Atau gunakan kunci API xAI Console:",
+    "browseAll": "Layari semua penyedia",
+    "updateKey": "Kemas kini kunci",
+    "sidebar": {
+      "configured": "Dikonfigurasi",
+      "disabledTag": "Mati",
+      "empty": "Belum ada penyedia yang dikonfigurasi. Layari semua penyedia untuk mula menyediakannya."
+    },
+    "menu": {
+      "enable": "Dayakan",
+      "disable": "Nyahdayakan",
+      "rename": "Namakan semula",
+      "delete": "Padam"
+    },
+    "health": {
+      "verified": "Disahkan",
+      "checking": "Menyemak",
+      "needsAttention": "Perlukan perhatian",
+      "notChecked": "Belum disemak",
+      "lastChecked": "Semakan terakhir {time}"
+    },
+    "catalog": {
+      "title": "Layari semua penyedia",
+      "description": "Pilih penyedia untuk mula menyediakannya. Ia akan muncul di bar sisi selepas dikonfigurasi.",
+      "searchPlaceholder": "Cari penyedia...",
+      "noResults": "Tiada penyedia sepadan",
+      "configured": "Dikonfigurasi"
+    },
+    "addFlow": {
+      "connect": "Sambung dan muatkan model",
+      "validating": "Mengesahkan sambungan...",
+      "loadingModels": "Memuatkan model...",
+      "failed": "Sambungan gagal. Semak konfigurasi dan cuba lagi."
+    }
   },
   "knowledgeBase": {
     "title": "Tetapan asas pengetahuan",
diff --git a/src/renderer/src/i18n/pl-PL/settings.json b/src/renderer/src/i18n/pl-PL/settings.json
index efc4359897..8646a49cb3 100644
--- a/src/renderer/src/i18n/pl-PL/settings.json
+++ b/src/renderer/src/i18n/pl-PL/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "Anuluj",
     "xaiGrokOpenVerification": "Otwórz stronę weryfikacji",
     "xaiGrokLoginTip": "Używa OAuth z kodem urządzenia xAI dla SuperGrok lub X Premium+. Tokeny są przechowywane oddzielnie od kluczy API. Klucze API Console są nadal obsługiwane poniżej.",
-    "xaiGrokApiKeyAlternative": "Lub użyj klucza API xAI Console:"
+    "xaiGrokApiKeyAlternative": "Lub użyj klucza API xAI Console:",
+    "browseAll": "Przeglądaj wszystkich dostawców",
+    "updateKey": "Zaktualizuj klucz",
+    "sidebar": {
+      "configured": "Skonfigurowane",
+      "disabledTag": "Wył.",
+      "empty": "Nie skonfigurowano jeszcze żadnych dostawców. Przeglądaj wszystkich dostawców, aby rozpocząć."
+    },
+    "menu": {
+      "enable": "Włącz",
+      "disable": "Wyłącz",
+      "rename": "Zmień nazwę",
+      "delete": "Usuń"
+    },
+    "health": {
+      "verified": "Zweryfikowano",
+      "checking": "Sprawdzanie",
+      "needsAttention": "Wymaga uwagi",
+      "notChecked": "Nie sprawdzono",
+      "lastChecked": "Ostatnie sprawdzenie {time}"
+    },
+    "catalog": {
+      "title": "Przeglądaj wszystkich dostawców",
+      "description": "Wybierz dostawcę, aby rozpocząć konfigurację. Po skonfigurowaniu pojawi się na pasku bocznym.",
+      "searchPlaceholder": "Szukaj dostawców...",
+      "noResults": "Brak pasujących dostawców",
+      "configured": "Skonfigurowany"
+    },
+    "addFlow": {
+      "connect": "Połącz i wczytaj modele",
+      "validating": "Weryfikacja połączenia...",
+      "loadingModels": "Wczytywanie modeli...",
+      "failed": "Połączenie nie powiodło się. Sprawdź konfigurację i spróbuj ponownie."
+    }
   },
   "knowledgeBase": {
     "title": "Ustawienia bazy wiedzy",
diff --git a/src/renderer/src/i18n/pt-BR/settings.json b/src/renderer/src/i18n/pt-BR/settings.json
index 2cd39d9c0d..5d2ac7601b 100644
--- a/src/renderer/src/i18n/pt-BR/settings.json
+++ b/src/renderer/src/i18n/pt-BR/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "Cancelar",
     "xaiGrokOpenVerification": "Abrir página de verificação",
     "xaiGrokLoginTip": "Usa o OAuth com código de dispositivo da xAI para SuperGrok ou X Premium+. Os tokens são armazenados separadamente das chaves de API. As chaves de API do Console continuam disponíveis abaixo.",
-    "xaiGrokApiKeyAlternative": "Ou use uma chave de API do xAI Console:"
+    "xaiGrokApiKeyAlternative": "Ou use uma chave de API do xAI Console:",
+    "browseAll": "Explorar todos os provedores",
+    "updateKey": "Atualizar chave",
+    "sidebar": {
+      "configured": "Configurados",
+      "disabledTag": "Desligado",
+      "empty": "Nenhum provedor configurado ainda. Explore todos os provedores para configurar um."
+    },
+    "menu": {
+      "enable": "Ativar",
+      "disable": "Desativar",
+      "rename": "Renomear",
+      "delete": "Excluir"
+    },
+    "health": {
+      "verified": "Verificado",
+      "checking": "Verificando",
+      "needsAttention": "Requer atenção",
+      "notChecked": "Não verificado",
+      "lastChecked": "Última verificação {time}"
+    },
+    "catalog": {
+      "title": "Explorar todos os provedores",
+      "description": "Escolha um provedor para começar a configurá-lo. Ele aparecerá na barra lateral após a configuração.",
+      "searchPlaceholder": "Pesquisar provedores...",
+      "noResults": "Nenhum provedor correspondente",
+      "configured": "Configurado"
+    },
+    "addFlow": {
+      "connect": "Conectar e carregar modelos",
+      "validating": "Verificando a conexão...",
+      "loadingModels": "Carregando modelos...",
+      "failed": "Falha na conexão. Verifique a configuração e tente novamente."
+    }
   },
   "knowledgeBase": {
     "title": "Configurações da Base de Conhecimento",
diff --git a/src/renderer/src/i18n/ru-RU/settings.json b/src/renderer/src/i18n/ru-RU/settings.json
index c60d3e50e6..ef89929a7b 100644
--- a/src/renderer/src/i18n/ru-RU/settings.json
+++ b/src/renderer/src/i18n/ru-RU/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "Отмена",
     "xaiGrokOpenVerification": "Открыть страницу подтверждения",
     "xaiGrokLoginTip": "Используется OAuth xAI с кодом устройства для SuperGrok или X Premium+. Токены хранятся отдельно от ключей API. Ниже по-прежнему можно использовать ключи API Console.",
-    "xaiGrokApiKeyAlternative": "Или используйте ключ API xAI Console:"
+    "xaiGrokApiKeyAlternative": "Или используйте ключ API xAI Console:",
+    "browseAll": "Просмотреть всех провайдеров",
+    "updateKey": "Обновить ключ",
+    "sidebar": {
+      "configured": "Настроенные",
+      "disabledTag": "Выкл",
+      "empty": "Провайдеры ещё не настроены. Просмотрите всех провайдеров, чтобы настроить одного."
+    },
+    "menu": {
+      "enable": "Включить",
+      "disable": "Отключить",
+      "rename": "Переименовать",
+      "delete": "Удалить"
+    },
+    "health": {
+      "verified": "Проверено",
+      "checking": "Проверка",
+      "needsAttention": "Требует внимания",
+      "notChecked": "Не проверено",
+      "lastChecked": "Последняя проверка {time}"
+    },
+    "catalog": {
+      "title": "Все провайдеры",
+      "description": "Выберите провайдера, чтобы начать настройку. После настройки он появится в боковой панели.",
+      "searchPlaceholder": "Поиск провайдеров...",
+      "noResults": "Нет подходящих провайдеров",
+      "configured": "Настроен"
+    },
+    "addFlow": {
+      "connect": "Подключить и загрузить модели",
+      "validating": "Проверка подключения...",
+      "loadingModels": "Загрузка моделей...",
+      "failed": "Не удалось подключиться. Проверьте настройки и повторите попытку."
+    }
   },
   "knowledgeBase": {
     "title": "Настройки базы знаний",
diff --git a/src/renderer/src/i18n/tr-TR/settings.json b/src/renderer/src/i18n/tr-TR/settings.json
index b7a3f1ef41..a83db06dfd 100644
--- a/src/renderer/src/i18n/tr-TR/settings.json
+++ b/src/renderer/src/i18n/tr-TR/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "İptal",
     "xaiGrokOpenVerification": "Doğrulama sayfasını aç",
     "xaiGrokLoginTip": "SuperGrok veya X Premium+ için xAI cihaz kodu OAuth kullanır. Token'lar API anahtarlarından ayrı saklanır. Console API anahtarları aşağıda desteklenmeye devam eder.",
-    "xaiGrokApiKeyAlternative": "Veya bir xAI Console API anahtarı kullanın:"
+    "xaiGrokApiKeyAlternative": "Veya bir xAI Console API anahtarı kullanın:",
+    "browseAll": "Tüm sağlayıcılara göz at",
+    "updateKey": "Anahtarı güncelle",
+    "sidebar": {
+      "configured": "Yapılandırılmış",
+      "disabledTag": "Kapalı",
+      "empty": "Henüz yapılandırılmış sağlayıcı yok. Birini kurmak için tüm sağlayıcılara göz atın."
+    },
+    "menu": {
+      "enable": "Etkinleştir",
+      "disable": "Devre dışı bırak",
+      "rename": "Yeniden adlandır",
+      "delete": "Sil"
+    },
+    "health": {
+      "verified": "Doğrulandı",
+      "checking": "Kontrol ediliyor",
+      "needsAttention": "İlgilenilmeli",
+      "notChecked": "Kontrol edilmedi",
+      "lastChecked": "Son kontrol {time}"
+    },
+    "catalog": {
+      "title": "Tüm sağlayıcılara göz at",
+      "description": "Kurulumu başlatmak için bir sağlayıcı seçin. Yapılandırıldıktan sonra kenar çubuğunda görünecek.",
+      "searchPlaceholder": "Sağlayıcı ara...",
+      "noResults": "Eşleşen sağlayıcı yok",
+      "configured": "Yapılandırıldı"
+    },
+    "addFlow": {
+      "connect": "Bağlan ve modelleri yükle",
+      "validating": "Bağlantı doğrulanıyor...",
+      "loadingModels": "Modeller yükleniyor...",
+      "failed": "Bağlantı başarısız. Yapılandırmayı kontrol edip yeniden deneyin."
+    }
   },
   "knowledgeBase": {
     "title": "Bilgi Bankası Ayarları",
diff --git a/src/renderer/src/i18n/vi-VN/settings.json b/src/renderer/src/i18n/vi-VN/settings.json
index b2f05e17ab..bbe773645e 100644
--- a/src/renderer/src/i18n/vi-VN/settings.json
+++ b/src/renderer/src/i18n/vi-VN/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "Hủy",
     "xaiGrokOpenVerification": "Mở trang xác minh",
     "xaiGrokLoginTip": "Sử dụng OAuth mã thiết bị của xAI cho SuperGrok hoặc X Premium+. Token được lưu riêng với khóa API. Khóa API Console vẫn được hỗ trợ bên dưới.",
-    "xaiGrokApiKeyAlternative": "Hoặc sử dụng khóa API xAI Console:"
+    "xaiGrokApiKeyAlternative": "Hoặc sử dụng khóa API xAI Console:",
+    "browseAll": "Duyệt tất cả nhà cung cấp",
+    "updateKey": "Cập nhật khóa",
+    "sidebar": {
+      "configured": "Đã cấu hình",
+      "disabledTag": "Tắt",
+      "empty": "Chưa có nhà cung cấp nào được cấu hình. Duyệt tất cả nhà cung cấp để bắt đầu thiết lập."
+    },
+    "menu": {
+      "enable": "Bật",
+      "disable": "Tắt",
+      "rename": "Đổi tên",
+      "delete": "Xóa"
+    },
+    "health": {
+      "verified": "Đã xác minh",
+      "checking": "Đang kiểm tra",
+      "needsAttention": "Cần chú ý",
+      "notChecked": "Chưa kiểm tra",
+      "lastChecked": "Kiểm tra lần cuối {time}"
+    },
+    "catalog": {
+      "title": "Duyệt tất cả nhà cung cấp",
+      "description": "Chọn một nhà cung cấp để bắt đầu thiết lập. Sau khi cấu hình xong sẽ hiển thị ở thanh bên.",
+      "searchPlaceholder": "Tìm nhà cung cấp...",
+      "noResults": "Không có nhà cung cấp phù hợp",
+      "configured": "Đã cấu hình"
+    },
+    "addFlow": {
+      "connect": "Kết nối và tải mô hình",
+      "validating": "Đang xác minh kết nối...",
+      "loadingModels": "Đang tải mô hình...",
+      "failed": "Kết nối thất bại. Kiểm tra cấu hình và thử lại."
+    }
   },
   "knowledgeBase": {
     "title": "Cài đặt cơ sở kiến thức",
diff --git a/src/renderer/src/i18n/zh-CN/settings.json b/src/renderer/src/i18n/zh-CN/settings.json
index c079eb787a..7d7799930e 100644
--- a/src/renderer/src/i18n/zh-CN/settings.json
+++ b/src/renderer/src/i18n/zh-CN/settings.json
@@ -1567,7 +1567,40 @@
     "xaiGrokCancel": "取消",
     "xaiGrokOpenVerification": "打开验证页面",
     "xaiGrokLoginTip": "通过 xAI 设备码 OAuth 使用 SuperGrok 或 X Premium+ 订阅。Token 单独存储，不会写入 API Key。下方仍支持控制台 API Key。",
-    "xaiGrokApiKeyAlternative": "或者使用 xAI 控制台 API Key："
+    "xaiGrokApiKeyAlternative": "或者使用 xAI 控制台 API Key：",
+    "browseAll": "浏览全部服务商",
+    "updateKey": "更新密钥",
+    "sidebar": {
+      "configured": "已配置",
+      "disabledTag": "停用",
+      "empty": "还没有配置任何服务商。浏览全部服务商开始配置。"
+    },
+    "menu": {
+      "enable": "启用",
+      "disable": "停用",
+      "rename": "重命名",
+      "delete": "删除"
+    },
+    "health": {
+      "verified": "已验证",
+      "checking": "检查中",
+      "needsAttention": "需要处理",
+      "notChecked": "未检查",
+      "lastChecked": "上次检查于 {time}"
+    },
+    "catalog": {
+      "title": "浏览全部服务商",
+      "description": "选择一个服务商开始配置，配置完成后会出现在侧边栏。",
+      "searchPlaceholder": "搜索服务商...",
+      "noResults": "没有匹配的服务商",
+      "configured": "已配置"
+    },
+    "addFlow": {
+      "connect": "连接并加载模型",
+      "validating": "正在验证连接...",
+      "loadingModels": "正在加载模型...",
+      "failed": "连接失败，请检查配置后重试。"
+    }
   },
   "knowledgeBase": {
     "title": "知识库设置",
diff --git a/src/renderer/src/i18n/zh-HK/settings.json b/src/renderer/src/i18n/zh-HK/settings.json
index eba7ecb756..6ea05bebeb 100644
--- a/src/renderer/src/i18n/zh-HK/settings.json
+++ b/src/renderer/src/i18n/zh-HK/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "取消",
     "xaiGrokOpenVerification": "開啟驗證頁面",
     "xaiGrokLoginTip": "透過 xAI 裝置代碼 OAuth 使用 SuperGrok 或 X Premium+。Token 會與 API Key 分開儲存，下方仍支援 Console API Key。",
-    "xaiGrokApiKeyAlternative": "或使用 xAI Console API Key："
+    "xaiGrokApiKeyAlternative": "或使用 xAI Console API Key：",
+    "browseAll": "瀏覽全部服務商",
+    "updateKey": "更新金鑰",
+    "sidebar": {
+      "configured": "已設定",
+      "disabledTag": "停用",
+      "empty": "尚未設定任何服務商。瀏覽全部服務商開始設定。"
+    },
+    "menu": {
+      "enable": "啟用",
+      "disable": "停用",
+      "rename": "重新命名",
+      "delete": "刪除"
+    },
+    "health": {
+      "verified": "已驗證",
+      "checking": "檢查中",
+      "needsAttention": "需要處理",
+      "notChecked": "未檢查",
+      "lastChecked": "上次檢查於 {time}"
+    },
+    "catalog": {
+      "title": "瀏覽全部服務商",
+      "description": "選擇一個服務商開始設定，設定完成後會出現在側邊欄。",
+      "searchPlaceholder": "搜尋服務商...",
+      "noResults": "沒有符合的服務商",
+      "configured": "已設定"
+    },
+    "addFlow": {
+      "connect": "連線並載入模型",
+      "validating": "正在驗證連線...",
+      "loadingModels": "正在載入模型...",
+      "failed": "連線失敗，請檢查設定後重試。"
+    }
   },
   "knowledgeBase": {
     "fastgptTitle": "FastGPT知識庫",
diff --git a/src/renderer/src/i18n/zh-TW/settings.json b/src/renderer/src/i18n/zh-TW/settings.json
index 030d4058e0..500c43db5d 100644
--- a/src/renderer/src/i18n/zh-TW/settings.json
+++ b/src/renderer/src/i18n/zh-TW/settings.json
@@ -1203,7 +1203,40 @@
     "xaiGrokCancel": "取消",
     "xaiGrokOpenVerification": "開啟驗證頁面",
     "xaiGrokLoginTip": "透過 xAI 裝置代碼 OAuth 使用 SuperGrok 或 X Premium+。Token 會與 API Key 分開儲存，下方仍支援 Console API Key。",
-    "xaiGrokApiKeyAlternative": "或使用 xAI Console API Key："
+    "xaiGrokApiKeyAlternative": "或使用 xAI Console API Key：",
+    "browseAll": "瀏覽全部服務商",
+    "updateKey": "更新金鑰",
+    "sidebar": {
+      "configured": "已設定",
+      "disabledTag": "停用",
+      "empty": "尚未設定任何服務商。瀏覽全部服務商開始設定。"
+    },
+    "menu": {
+      "enable": "啟用",
+      "disable": "停用",
+      "rename": "重新命名",
+      "delete": "刪除"
+    },
+    "health": {
+      "verified": "已驗證",
+      "checking": "檢查中",
+      "needsAttention": "需要處理",
+      "notChecked": "未檢查",
+      "lastChecked": "上次檢查於 {time}"
+    },
+    "catalog": {
+      "title": "瀏覽全部服務商",
+      "description": "選擇一個服務商開始設定，設定完成後會出現在側邊欄。",
+      "searchPlaceholder": "搜尋服務商...",
+      "noResults": "沒有符合的服務商",
+      "configured": "已設定"
+    },
+    "addFlow": {
+      "connect": "連線並載入模型",
+      "validating": "正在驗證連線...",
+      "loadingModels": "正在載入模型...",
+      "failed": "連線失敗，請檢查設定後重試。"
+    }
   },
   "knowledgeBase": {
     "title": "知識庫設置",
diff --git a/src/renderer/src/lib/icons/icon-collections.generated.ts b/src/renderer/src/lib/icons/icon-collections.generated.ts
index 3b9654e993..fd445afb60 100644
--- a/src/renderer/src/lib/icons/icon-collections.generated.ts
+++ b/src/renderer/src/lib/icons/icon-collections.generated.ts
@@ -406,6 +406,9 @@ export const lucideIconCollection = {
     'layout-dashboard': {
       body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></g>'
     },
+    'layout-grid': {
+      body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></g>'
+    },
     'library-big': {
       body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="8" height="18" x="3" y="3" rx="1"/><path d="M7 3v18m13.4-2.1c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z"/></g>'
     },
diff --git a/src/renderer/src/lib/icons/icon-whitelist.generated.ts b/src/renderer/src/lib/icons/icon-whitelist.generated.ts
index 31daf51595..74f21149e6 100644
--- a/src/renderer/src/lib/icons/icon-whitelist.generated.ts
+++ b/src/renderer/src/lib/icons/icon-whitelist.generated.ts
@@ -141,6 +141,7 @@ export const GENERATED_ICON_WHITELIST: Record<GeneratedIconCollectionKey, readon
     'layers',
     'layers-2',
     'layout-dashboard',
+    'layout-grid',
     'library-big',
     'link',
     'list-checks',
diff --git a/src/renderer/src/stores/modelStore.ts b/src/renderer/src/stores/modelStore.ts
index 9bf500965d..690b7999a9 100644
--- a/src/renderer/src/stores/modelStore.ts
+++ b/src/renderer/src/stores/modelStore.ts
@@ -1456,6 +1456,24 @@ export const useModelStore = defineStore('model', () => {
     await refreshProviderModels(providerId)
   }
 
+  // First-setup model recommendations: deterministic metadata only (the app
+  // normalizes a missing type to Chat), capped at three, and never applied when
+  // the user already has any enabled model for the provider.
+  const applyInitialModelRecommendations = async (providerId: string) => {
+    await ensureProviderModelsReady(providerId)
+    const models =
+      allProviderModels.value.find((entry) => entry.providerId === providerId)?.models ?? []
+    if (models.length === 0 || models.some((model) => model.enabled)) {
+      return
+    }
+    const recommended = models
+      .filter((model) => (model.type ?? ModelType.Chat) === ModelType.Chat)
+      .slice(0, 3)
+    for (const model of recommended) {
+      await updateModelStatus(providerId, model.id, true)
+    }
+  }
+
   const addCustomModelMutation = useIpcMutation({
     mutation: (
       providerId: string,
@@ -1501,6 +1519,7 @@ export const useModelStore = defineStore('model', () => {
     refreshStandardModels,
     refreshProviderModels,
     ensureProviderModelsReady,
+    applyInitialModelRecommendations,
     refreshAllModels,
     updateModelStatus,
     updateLocalModelStatus,
diff --git a/src/renderer/src/stores/providerStore.ts b/src/renderer/src/stores/providerStore.ts
index 18065a7142..83c2ca4bf6 100644
--- a/src/renderer/src/stores/providerStore.ts
+++ b/src/renderer/src/stores/providerStore.ts
@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
 import { createProviderClient } from '../../api/ProviderClient'
 import { createConfigClient } from '../../api/ConfigClient'
 import { useIpcQuery } from '@/composables/useIpcQuery'
+import type { ProviderHealthEntry } from '@shared/contracts/routes'
 import type { AWS_BEDROCK_PROVIDER, LLM_PROVIDER, VERTEX_PROVIDER } from '@shared/types/provider'
 
 type VoiceAIConfig = {
@@ -15,8 +16,26 @@ type VoiceAIConfig = {
   agentId: string
 }
 
+export type ProviderHealthStatus = 'not_checked' | 'checking' | 'verified' | 'needs_attention'
+
+export type ProviderHealthView = {
+  status: ProviderHealthStatus
+  checkedAt?: number
+  errorMsg?: string
+}
+
 const PROVIDER_ORDER_KEY = 'providerOrder'
 const PROVIDER_TIMESTAMP_KEY = 'providerTimestamps'
+const PROVIDER_CONFIGURED_KEY = 'configuredProviders'
+const PROVIDER_HEALTH_KEY = 'providerHealth'
+
+const hashString = (input: string): string => {
+  let hash = 5381
+  for (let i = 0; i < input.length; i++) {
+    hash = ((hash << 5) + hash + input.charCodeAt(i)) >>> 0
+  }
+  return hash.toString(16)
+}
 
 export const useProviderStore = defineStore('provider', () => {
   const configClient = createConfigClient()
@@ -37,6 +56,10 @@ export const useProviderStore = defineStore('provider', () => {
 
   const providerOrder = ref<string[]>([])
   const providerTimestamps = ref<Record<string, number>>({})
+  const configuredProviderIds = ref<string[]>([])
+  const configuredLoaded = ref(false)
+  const providerHealthCache = ref<Record<string, ProviderHealthEntry>>({})
+  const checkingProviderIds = ref<Set<string>>(new Set())
   const listenersRegistered = ref(false)
   const voiceAIConfig = ref<VoiceAIConfig | null>(null)
   const initialized = ref(false)
@@ -50,8 +73,6 @@ export const useProviderStore = defineStore('provider', () => {
     const data = defaultProvidersQuery.data.value as LLM_PROVIDER[] | undefined
     return data ?? []
   })
-  const enabledProviders = computed(() => providers.value.filter((provider) => provider.enable))
-  const disabledProviders = computed(() => providers.value.filter((provider) => !provider.enable))
 
   const ensureOrderIncludesProviders = (order: string[], list: LLM_PROVIDER[]) => {
     const seen = new Set<string>()
@@ -93,11 +114,168 @@ export const useProviderStore = defineStore('provider', () => {
     })
   }
 
-  const sortedProviders = computed(() => {
-    const sortedEnabled = sortProviders(enabledProviders.value, true)
-    const sortedDisabled = sortProviders(disabledProviders.value, false)
-    return [...sortedEnabled, ...sortedDisabled]
-  })
+  const sortedProviders = computed(() => sortProviders(providers.value, true))
+
+  const hasStoredCredentials = (provider: LLM_PROVIDER) =>
+    Boolean(provider.apiKey?.trim() || provider.oauthToken)
+
+  // "Configured" is sidebar membership: it is sticky (kept while disabled or failing)
+  // and only ever leaves through an explicit removal, never through a transient failure.
+  const isProviderConfiguredByState = (provider: LLM_PROVIDER) =>
+    provider.enable || Boolean(provider.custom) || hasStoredCredentials(provider)
+
+  const configuredIdSet = computed(() => new Set(configuredProviderIds.value))
+
+  const isProviderConfigured = (providerId: string) => configuredIdSet.value.has(providerId)
+
+  const configuredProviders = computed(() =>
+    sortedProviders.value.filter((provider) => configuredIdSet.value.has(provider.id))
+  )
+
+  const unconfiguredProviders = computed(() =>
+    sortedProviders.value.filter((provider) => !configuredIdSet.value.has(provider.id))
+  )
+
+  const loadConfiguredProviders = async () => {
+    try {
+      const saved = await configClient.getSetting(PROVIDER_CONFIGURED_KEY)
+      if (saved) {
+        configuredProviderIds.value = saved
+      }
+    } catch (error) {
+      console.error('Failed to load configured providers:', error)
+    } finally {
+      configuredLoaded.value = true
+    }
+    await syncConfiguredFromProviders(providers.value)
+  }
+
+  const saveConfiguredProviders = async () => {
+    try {
+      await configClient.setSetting(PROVIDER_CONFIGURED_KEY, [...configuredProviderIds.value])
+    } catch (error) {
+      console.error('Failed to save configured providers:', error)
+    }
+  }
+
+  const markProviderConfigured = async (providerId: string) => {
+    if (configuredIdSet.value.has(providerId)) {
+      return
+    }
+    configuredProviderIds.value = [...configuredProviderIds.value, providerId]
+    await saveConfiguredProviders()
+  }
+
+  const unmarkProviderConfigured = async (providerId: string) => {
+    if (!configuredIdSet.value.has(providerId)) {
+      return
+    }
+    configuredProviderIds.value = configuredProviderIds.value.filter((id) => id !== providerId)
+    await saveConfiguredProviders()
+  }
+
+  const syncConfiguredFromProviders = async (list: LLM_PROVIDER[]) => {
+    if (!configuredLoaded.value) {
+      return
+    }
+    const missing = list
+      .filter((provider) => isProviderConfiguredByState(provider))
+      .map((provider) => provider.id)
+      .filter((id) => !configuredIdSet.value.has(id))
+    if (missing.length === 0) {
+      return
+    }
+    configuredProviderIds.value = [...configuredProviderIds.value, ...missing]
+    await saveConfiguredProviders()
+  }
+
+  const computeHealthFingerprint = (provider: LLM_PROVIDER): string => {
+    const bedrock = provider as AWS_BEDROCK_PROVIDER
+    const vertex = provider as VERTEX_PROVIDER
+    const material = [
+      provider.apiType,
+      provider.baseUrl ?? '',
+      provider.apiKey ? hashString(provider.apiKey) : '',
+      provider.oauthToken ? hashString(provider.oauthToken) : '',
+      // Bedrock keeps its secrets in provider.credential, not apiKey.
+      bedrock.credential
+        ? hashString(
+            [
+              bedrock.credential.authMode ?? '',
+              bedrock.credential.accessKeyId ?? '',
+              bedrock.credential.secretAccessKey ?? '',
+              bedrock.credential.region ?? '',
+              bedrock.credential.profile ?? ''
+            ].join('|')
+          )
+        : '',
+      // Vertex keeps its secrets in dedicated fields.
+      vertex.projectId ? hashString(vertex.projectId) : '',
+      vertex.accountPrivateKey ? hashString(vertex.accountPrivateKey) : ''
+    ].join('|')
+    return hashString(material)
+  }
+
+  const loadProviderHealth = async () => {
+    try {
+      const saved = await configClient.getSetting(PROVIDER_HEALTH_KEY)
+      providerHealthCache.value = saved ?? {}
+    } catch (error) {
+      console.error('Failed to load provider health cache:', error)
+      providerHealthCache.value = {}
+    }
+  }
+
+  const saveProviderHealth = async () => {
+    try {
+      await configClient.setSetting(PROVIDER_HEALTH_KEY, { ...providerHealthCache.value })
+    } catch (error) {
+      console.error('Failed to save provider health cache:', error)
+    }
+  }
+
+  // Health is a cached verification result for the current configuration, not a live
+  // connection state: a stale fingerprint (config changed since the check) degrades to
+  // not_checked instead of showing a misleading verified/failed result.
+  const getProviderHealth = (providerId: string): ProviderHealthView => {
+    if (checkingProviderIds.value.has(providerId)) {
+      return { status: 'checking' }
+    }
+    const entry = providerHealthCache.value[providerId]
+    const provider = providers.value.find((item) => item.id === providerId)
+    if (!entry || !provider || entry.fingerprint !== computeHealthFingerprint(provider)) {
+      return { status: 'not_checked' }
+    }
+    return { status: entry.status, checkedAt: entry.checkedAt, errorMsg: entry.errorMsg }
+  }
+
+  const recordProviderHealth = async (
+    providerId: string,
+    fingerprint: string,
+    ok: boolean,
+    errorMsg?: string
+  ) => {
+    providerHealthCache.value = {
+      ...providerHealthCache.value,
+      [providerId]: {
+        status: ok ? 'verified' : 'needs_attention',
+        fingerprint,
+        checkedAt: Date.now(),
+        ...(ok || !errorMsg ? {} : { errorMsg })
+      }
+    }
+    await saveProviderHealth()
+  }
+
+  const clearProviderHealth = async (providerId: string) => {
+    if (!(providerId in providerHealthCache.value)) {
+      return
+    }
+    const next = { ...providerHealthCache.value }
+    delete next[providerId]
+    providerHealthCache.value = next
+    await saveProviderHealth()
+  }
 
   const loadProviderOrder = async () => {
     try {
@@ -200,9 +378,9 @@ export const useProviderStore = defineStore('provider', () => {
 
   const updateProvidersOrder = async (newProviders: LLM_PROVIDER[]) => {
     try {
-      const enabledList = newProviders.filter((provider) => provider.enable)
-      const disabledList = newProviders.filter((provider) => !provider.enable)
-      const newOrder = [...enabledList.map((p) => p.id), ...disabledList.map((p) => p.id)]
+      // Preserve the caller-supplied sequence (including interleaved enabled
+      // and disabled entries) instead of re-partitioning into groups.
+      const newOrder = newProviders.map((provider) => provider.id)
       const allIds = providers.value.map((provider) => provider.id)
       const missingIds = allIds.filter((id) => !newOrder.includes(id))
       providerOrder.value = [...newOrder, ...missingIds]
@@ -251,6 +429,9 @@ export const useProviderStore = defineStore('provider', () => {
     try {
       await saveProviderTimestamps()
       await updateProviderConfig(providerId, { enable })
+      if (enable) {
+        await markProviderConfigured(providerId)
+      }
       await optimizeProviderOrder(providerId, enable)
     } catch (error) {
       if (previousTimestamp === undefined) {
@@ -270,10 +451,28 @@ export const useProviderStore = defineStore('provider', () => {
     await refreshProviders()
   }
 
+  // Runs "Connect and load models" against a draft configuration. Nothing is
+  // persisted and no enable flag is toggled; the typed main-process boundary
+  // validates the draft with a transient provider instance.
+  const validateDraftProvider = async (draft: LLM_PROVIDER) => {
+    return await providerClient.validateDraftProvider(draft)
+  }
+
+  // Persists a successfully validated draft as a configured, available provider
+  // and records its verified health for the validated configuration.
+  const commitValidatedDraft = async (draft: LLM_PROVIDER) => {
+    const provider = { ...draft, enable: true }
+    await addCustomProvider(provider)
+    await markProviderConfigured(provider.id)
+    await recordProviderHealth(provider.id, computeHealthFingerprint(provider), true)
+  }
+
   const removeProvider = async (providerId: string) => {
     await providerClient.removeProviderAtomic(providerId)
     providerOrder.value = providerOrder.value.filter((id) => id !== providerId)
     await saveProviderOrder()
+    await unmarkProviderConfigured(providerId)
+    await clearProviderHealth(providerId)
     await refreshProviders()
   }
 
@@ -292,7 +491,35 @@ export const useProviderStore = defineStore('provider', () => {
   }
 
   const checkProvider = async (providerId: string, modelId?: string) => {
-    return await providerClient.testConnection({ providerId, modelId })
+    const provider = providers.value.find((item) => item.id === providerId)
+    // Capture the fingerprint of the configuration actually being tested so a
+    // mid-flight config change cannot attach this result to the new configuration.
+    const fingerprint = provider ? computeHealthFingerprint(provider) : null
+    checkingProviderIds.value.add(providerId)
+    try {
+      const result = await providerClient.testConnection({ providerId, modelId })
+      if (fingerprint) {
+        await recordProviderHealth(
+          providerId,
+          fingerprint,
+          result.isOk,
+          result.errorMsg ?? undefined
+        )
+      }
+      return result
+    } catch (error) {
+      if (fingerprint) {
+        await recordProviderHealth(
+          providerId,
+          fingerprint,
+          false,
+          error instanceof Error ? error.message : String(error)
+        )
+      }
+      throw error
+    } finally {
+      checkingProviderIds.value.delete(providerId)
+    }
   }
 
   const setAzureApiVersion = async (version: string) => {
@@ -356,8 +583,10 @@ export const useProviderStore = defineStore('provider', () => {
     initializationPromise.value = (async () => {
       await loadProviderTimestamps()
       await loadProviderOrder()
+      await loadProviderHealth()
       setupProviderListeners()
       await refreshProviders()
+      await loadConfiguredProviders()
       initialized.value = true
     })()
 
@@ -379,6 +608,8 @@ export const useProviderStore = defineStore('provider', () => {
     await providersQuery.refetch()
     await loadProviderOrder()
     await loadProviderTimestamps()
+    await loadProviderHealth()
+    await loadConfiguredProviders()
   }
 
   // Equivalent to the previous 80ms setTimeout debounce; only the API changes.
@@ -398,6 +629,7 @@ export const useProviderStore = defineStore('provider', () => {
     providers,
     (list) => {
       if (!list || list.length === 0) return
+      void syncConfiguredFromProviders(list)
       // Only update order if we already have an order established
       if (providerOrder.value.length === 0) {
         // If no order yet, try to load it first (or init from list if load fails/empty)
@@ -414,6 +646,13 @@ export const useProviderStore = defineStore('provider', () => {
     providers,
     defaultProviders,
     sortedProviders,
+    configuredProviders,
+    unconfiguredProviders,
+    configuredProviderIds,
+    isProviderConfigured,
+    markProviderConfigured,
+    unmarkProviderConfigured,
+    getProviderHealth,
     providerOrder,
     providerTimestamps,
     initialized,
@@ -434,6 +673,8 @@ export const useProviderStore = defineStore('provider', () => {
     loadProviderTimestamps,
     saveProviderTimestamps,
     addCustomProvider,
+    validateDraftProvider,
+    commitValidatedDraft,
     removeProvider,
     updateAwsBedrockProviderConfig,
     updateVertexProviderConfig,
diff --git a/src/shared/contracts/routes.ts b/src/shared/contracts/routes.ts
index 62c6ae110f..bdfe5d4801 100644
--- a/src/shared/contracts/routes.ts
+++ b/src/shared/contracts/routes.ts
@@ -394,6 +394,7 @@ import {
   providersSyncModelScopeMcpServersRoute,
   providersTestConnectionRoute,
   providersTestPublicConnectionRoute,
+  providersValidateDraftRoute,
   providersUpdateRateLimitRoute,
   providersUpdatePublicRoute,
   providersUpdateRoute,
@@ -992,6 +993,7 @@ const DEEPCHAT_ROUTE_CATALOG_PART_4 = {
   [providersSetByIdRoute.name]: providersSetByIdRoute,
   [providersUpdateRoute.name]: providersUpdateRoute,
   [providersAddRoute.name]: providersAddRoute,
+  [providersValidateDraftRoute.name]: providersValidateDraftRoute,
   [providersRemoveRoute.name]: providersRemoveRoute,
   [providersReorderRoute.name]: providersReorderRoute,
   [providersListModelsRoute.name]: providersListModelsRoute,
diff --git a/src/shared/contracts/routes/config.routes.ts b/src/shared/contracts/routes/config.routes.ts
index ee0cac558c..412a92a000 100644
--- a/src/shared/contracts/routes/config.routes.ts
+++ b/src/shared/contracts/routes/config.routes.ts
@@ -118,10 +118,22 @@ export const CONFIG_ENTRY_KEYS = [
   'artifact_think_collapse',
   'providerOrder',
   'providerTimestamps',
+  'configuredProviders',
+  'providerHealth',
   'sidebar_group_mode',
   'input_enabledMcpTools'
 ] as const
 
+// Cached verification result for a provider's current connection configuration.
+// `fingerprint` is derived from non-secret config so credential/endpoint changes
+// invalidate the cached result without storing the secret itself.
+export const ProviderHealthEntrySchema = z.object({
+  status: z.enum(['verified', 'needs_attention']),
+  fingerprint: z.string(),
+  checkedAt: z.number().int(),
+  errorMsg: z.string().optional()
+})
+
 export const ConfigEntryKeySchema = z.enum(CONFIG_ENTRY_KEYS)
 
 export const ConfigEntryValuesSchema = z.object({
@@ -137,6 +149,8 @@ export const ConfigEntryValuesSchema = z.object({
   artifact_think_collapse: z.boolean(),
   providerOrder: z.array(z.string()),
   providerTimestamps: z.record(z.string(), z.number().int()),
+  configuredProviders: z.array(z.string()),
+  providerHealth: z.record(z.string(), ProviderHealthEntrySchema),
   sidebar_group_mode: z.string(),
   input_enabledMcpTools: z.array(z.string())
 })
@@ -190,6 +204,14 @@ export const ConfigEntryChangeSchema = z.discriminatedUnion('key', [
     key: z.literal('providerTimestamps'),
     value: z.record(z.string(), z.number().int())
   }),
+  z.object({
+    key: z.literal('configuredProviders'),
+    value: z.array(z.string())
+  }),
+  z.object({
+    key: z.literal('providerHealth'),
+    value: z.record(z.string(), ProviderHealthEntrySchema)
+  }),
   z.object({
     key: z.literal('sidebar_group_mode'),
     value: z.string()
@@ -1006,3 +1028,4 @@ export const configSetAwsBedrockCredentialRoute = defineRouteContract({
 export type ConfigEntryKey = z.infer<typeof ConfigEntryKeySchema>
 export type ConfigEntryValues = z.infer<typeof ConfigEntryValuesSchema>
 export type ConfigEntryChange = z.infer<typeof ConfigEntryChangeSchema>
+export type ProviderHealthEntry = z.infer<typeof ProviderHealthEntrySchema>
diff --git a/src/shared/contracts/routes/providers.routes.ts b/src/shared/contracts/routes/providers.routes.ts
index 6ddb928715..dde5f7e53b 100644
--- a/src/shared/contracts/routes/providers.routes.ts
+++ b/src/shared/contracts/routes/providers.routes.ts
@@ -254,6 +254,28 @@ export const providersAddRoute = defineRouteContract({
   })
 })
 
+// Validates a draft provider configuration and loads its model catalog in a
+// single main-process operation. Nothing is persisted and no enable flag is
+// toggled: the draft only becomes a configured provider after the renderer
+// commits it on success.
+export const providersValidateDraftRoute = defineRouteContract({
+  name: 'providers.validateDraft',
+  input: z.object({
+    provider: LlmProviderSchema
+  }),
+  output: z.object({
+    isOk: z.boolean(),
+    errorMsg: z.string().nullable(),
+    models: z.array(
+      z.object({
+        id: z.string(),
+        name: z.string(),
+        type: z.string().optional()
+      })
+    )
+  })
+})
+
 export const providersRemoveRoute = defineRouteContract({
   name: 'providers.remove',
   input: z.object({
diff --git a/test/renderer/components/AddCustomProviderDialog.test.ts b/test/renderer/components/AddCustomProviderDialog.test.ts
deleted file mode 100644
index f770167f66..0000000000
--- a/test/renderer/components/AddCustomProviderDialog.test.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { defineComponent } from 'vue'
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-const { addCustomProvider } = vi.hoisted(() => ({
-  addCustomProvider: vi.fn().mockResolvedValue(undefined)
-}))
-
-vi.mock('@/stores/providerStore', () => ({
-  useProviderStore: () => ({ addCustomProvider })
-}))
-
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string) => key
-  })
-}))
-
-vi.mock('nanoid', () => ({
-  nanoid: () => 'provider-id'
-}))
-
-const passthrough = (name: string) =>
-  defineComponent({
-    name,
-    template: '<div><slot /></div>'
-  })
-
-const selectStub = defineComponent({
-  name: 'Select',
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['update:modelValue'],
-  template: `
-    <div>
-      <button type="button" data-testid="select-ollama" @click="$emit('update:modelValue', 'ollama')">
-        Ollama
-      </button>
-      <slot />
-    </div>
-  `
-})
-
-const switchStub = defineComponent({
-  name: 'Switch',
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue'],
-  template: '<button type="button" role="switch" :aria-checked="modelValue" />'
-})
-
-const formActionsStub = defineComponent({
-  name: 'DcFormActions',
-  emits: ['cancel'],
-  template: '<button type="submit">submit</button>'
-})
-
-const mountDialog = async () => {
-  const AddCustomProviderDialog = (
-    await import('../../../src/renderer/settings/components/AddCustomProviderDialog.vue')
-  ).default
-
-  const wrapper = mount(AddCustomProviderDialog, {
-    props: {
-      open: true
-    },
-    global: {
-      stubs: {
-        Dialog: passthrough('Dialog'),
-        DialogContent: passthrough('DialogContent'),
-        DialogDescription: passthrough('DialogDescription'),
-        DialogFooter: passthrough('DialogFooter'),
-        DialogHeader: passthrough('DialogHeader'),
-        DialogTitle: passthrough('DialogTitle'),
-        DcFormActions: formActionsStub,
-        Select: selectStub,
-        SelectContent: passthrough('SelectContent'),
-        SelectItem: passthrough('SelectItem'),
-        SelectTrigger: passthrough('SelectTrigger'),
-        SelectValue: passthrough('SelectValue'),
-        Switch: switchStub
-      }
-    }
-  })
-
-  return wrapper
-}
-
-describe('AddCustomProviderDialog', () => {
-  beforeEach(() => {
-    addCustomProvider.mockClear()
-  })
-
-  it('shows vee-validate errors and rejects missing required fields', async () => {
-    const wrapper = await mountDialog()
-
-    await wrapper.get('form').trigger('submit')
-    await vi.waitFor(() => {
-      expect(wrapper.findAll('[data-slot="form-message"]')).toHaveLength(3)
-    })
-
-    expect(addCustomProvider).not.toHaveBeenCalled()
-    expect(wrapper.text()).toContain('components.promptParamsDialog.required')
-  })
-
-  it('allows Ollama without an API key and uses its default base URL', async () => {
-    const wrapper = await mountDialog()
-
-    await wrapper.get('[data-testid="select-ollama"]').trigger('click')
-    await wrapper.get('input[name="name"]').setValue('Local Ollama')
-    await wrapper.get('form').trigger('submit')
-    await vi.waitFor(() => {
-      expect(addCustomProvider).toHaveBeenCalledOnce()
-    })
-
-    expect(addCustomProvider).toHaveBeenCalledWith({
-      id: 'provider-id',
-      name: 'Local Ollama',
-      apiType: 'ollama',
-      apiKey: '',
-      baseUrl: 'http://localhost:11434',
-      enable: true
-    })
-  })
-})
diff --git a/test/renderer/components/AddProviderFlow.test.ts b/test/renderer/components/AddProviderFlow.test.ts
new file mode 100644
index 0000000000..b6e4db8a70
--- /dev/null
+++ b/test/renderer/components/AddProviderFlow.test.ts
@@ -0,0 +1,136 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
+
+const passthrough = (name: string) =>
+  defineComponent({
+    name,
+    template: '<div><slot /></div>'
+  })
+
+const inputStub = defineComponent({
+  name: 'Input',
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue'],
+  template:
+    '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />'
+})
+
+async function setup(options?: {
+  validateResult?: {
+    isOk: boolean
+    errorMsg: string | null
+    models: Array<Record<string, unknown>>
+  }
+}) {
+  vi.resetModules()
+
+  const providerStore = {
+    validateDraftProvider: vi.fn().mockResolvedValue(
+      options?.validateResult ?? {
+        isOk: true,
+        errorMsg: null,
+        models: []
+      }
+    ),
+    commitValidatedDraft: vi.fn().mockResolvedValue(undefined)
+  }
+
+  const modelStore = {
+    applyInitialModelRecommendations: vi.fn().mockResolvedValue(undefined)
+  }
+
+  vi.doMock('vue-i18n', () => ({
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }))
+  vi.doMock('@/stores/providerStore', () => ({
+    useProviderStore: () => providerStore
+  }))
+  vi.doMock('@/stores/modelStore', () => ({
+    useModelStore: () => modelStore
+  }))
+
+  const AddProviderFlow = (
+    await import('../../../src/renderer/settings/components/AddProviderFlow.vue')
+  ).default
+
+  const wrapper = mount(AddProviderFlow, {
+    global: {
+      stubs: {
+        ScrollArea: passthrough('ScrollArea'),
+        Input: inputStub,
+        Label: passthrough('Label'),
+        Select: passthrough('Select'),
+        SelectTrigger: passthrough('SelectTrigger'),
+        SelectValue: true,
+        SelectContent: passthrough('SelectContent'),
+        SelectItem: passthrough('SelectItem'),
+        Spinner: true,
+        Icon: true,
+        DcButton: defineComponent({
+          name: 'DcButton',
+          props: { disabled: { type: Boolean, default: false } },
+          emits: ['click'],
+          template:
+            '<button v-bind="$attrs" type="button" :disabled="disabled" @click="$emit(\'click\')"><slot /></button>'
+        }),
+        DcInlineError: defineComponent({
+          name: 'DcInlineError',
+          props: { error: { type: String, default: '' } },
+          template: '<p v-if="error" data-testid="add-provider-error">{{ error }}</p>'
+        })
+      }
+    }
+  })
+
+  const fillForm = async () => {
+    await wrapper.get('[data-testid="add-provider-name"]').setValue('My Provider')
+    await wrapper.get('[data-testid="add-provider-base-url"]').setValue('https://api.example.com')
+    await wrapper.get('[data-testid="add-provider-api-key"]').setValue('sk-test')
+  }
+
+  return { wrapper, providerStore, modelStore, fillForm }
+}
+
+describe('AddProviderFlow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('persists nothing when validation fails and keeps the editable draft', async () => {
+    const { wrapper, providerStore, fillForm } = await setup({
+      validateResult: { isOk: false, errorMsg: 'invalid key', models: [] }
+    })
+
+    await fillForm()
+    await wrapper.get('[data-testid="add-provider-connect"]').trigger('click')
+    await flushPromises()
+
+    expect(providerStore.commitValidatedDraft).not.toHaveBeenCalled()
+    expect(wrapper.get('[data-testid="add-provider-error"]').text()).toBe('invalid key')
+    expect(
+      (wrapper.get('[data-testid="add-provider-name"]').element as HTMLInputElement).value
+    ).toBe('My Provider')
+  })
+
+  it('commits the draft and applies first-setup recommendations on success', async () => {
+    const { wrapper, providerStore, modelStore, fillForm } = await setup()
+
+    await fillForm()
+    await wrapper.get('[data-testid="add-provider-connect"]').trigger('click')
+    await flushPromises()
+
+    expect(providerStore.commitValidatedDraft).toHaveBeenCalledTimes(1)
+    const committed = providerStore.commitValidatedDraft.mock.calls[0][0]
+    expect(committed.custom).toBe(true)
+    expect(modelStore.applyInitialModelRecommendations).toHaveBeenCalledWith(committed.id)
+    expect(wrapper.emitted('created')).toHaveLength(1)
+  })
+})
diff --git a/test/renderer/components/ModelProviderSettings.test.ts b/test/renderer/components/ModelProviderSettings.test.ts
index 53da287168..95f51cd943 100644
--- a/test/renderer/components/ModelProviderSettings.test.ts
+++ b/test/renderer/components/ModelProviderSettings.test.ts
@@ -77,7 +77,8 @@ const setup = async (options?: {
   const route = reactive({
     params: {
       providerId: routeProviderId
-    }
+    },
+    query: {} as Record<string, string>
   })
 
   const provider = {
@@ -92,6 +93,20 @@ const setup = async (options?: {
   const providerStore = reactive({
     providers,
     sortedProviders: providers,
+    configuredProviders: computed(() =>
+      providers.filter(
+        (provider: { enable: boolean; apiKey: string; custom?: boolean }) =>
+          provider.enable || Boolean(provider.apiKey) || Boolean(provider.custom)
+      )
+    ),
+    isProviderConfigured: (providerId: string) =>
+      providers.some(
+        (provider: { id: string; enable: boolean; apiKey: string; custom?: boolean }) =>
+          provider.id === providerId &&
+          (provider.enable || Boolean(provider.apiKey) || Boolean(provider.custom))
+      ),
+    getProviderHealth: () => ({ status: 'not_checked' }),
+    removeProvider: vi.fn().mockResolvedValue(undefined),
     initialized: ref(true),
     ensureInitialized: vi.fn().mockResolvedValue(undefined),
     refreshProviders: vi.fn().mockResolvedValue(undefined),
@@ -117,9 +132,18 @@ const setup = async (options?: {
   })
 
   const router = {
-    push: vi.fn(async ({ params }: { params?: Record<string, string> }) => {
-      route.params.providerId = params?.providerId
-    }),
+    push: vi.fn(
+      async ({
+        params,
+        query
+      }: {
+        params?: Record<string, string>
+        query?: Record<string, string>
+      }) => {
+        route.params.providerId = params?.providerId
+        route.query = query ?? {}
+      }
+    ),
     replace: vi.fn(),
     hasRoute: vi.fn(() => false)
   }
@@ -198,7 +222,7 @@ const setup = async (options?: {
           <button data-testid="generic-detail-complete" @click="$emit('provider-configured')">
             complete
           </button>
-          <button data-testid="provider-models-tab-trigger" type="button">models</button>
+          <button data-testid="provider-models-section" type="button">models</button>
           <button
             v-for="model in providerModels"
             :key="model.id"
@@ -250,10 +274,33 @@ const setup = async (options?: {
       template: '<div data-testid="bedrock-detail" />'
     })
   }))
-  vi.doMock('../../../src/renderer/settings/components/AddCustomProviderDialog.vue', () => ({
+  vi.doMock('../../../src/renderer/settings/components/ProviderCatalog.vue', () => ({
     default: defineComponent({
-      name: 'AddCustomProviderDialog',
-      template: '<div />'
+      name: 'ProviderCatalog',
+      emits: ['select'],
+      template: `
+        <div data-testid="provider-catalog">
+          <button
+            v-for="provider in providers"
+            :key="provider.id"
+            :data-testid="'catalog-select-' + provider.id"
+            type="button"
+            @click="$emit('select', provider.id)"
+          >
+            {{ provider.id }}
+          </button>
+        </div>
+      `,
+      setup() {
+        return { providers: providerStore.providers }
+      }
+    })
+  }))
+  vi.doMock('../../../src/renderer/settings/components/AddProviderFlow.vue', () => ({
+    default: defineComponent({
+      name: 'AddProviderFlow',
+      emits: ['cancel', 'created'],
+      template: '<div data-testid="add-provider-flow" />'
     })
   }))
   vi.doMock('@/components/icons/ModelIcon.vue', () => ({
@@ -314,6 +361,27 @@ const setup = async (options?: {
         }),
         Icon: true,
         draggable: draggableStub,
+        DropdownMenu: passthrough('DropdownMenu'),
+        DropdownMenuTrigger: passthrough('DropdownMenuTrigger'),
+        DropdownMenuContent: passthrough('DropdownMenuContent'),
+        DropdownMenuSeparator: true,
+        DcDropdownActionItem: defineComponent({
+          name: 'DcDropdownActionItem',
+          props: { label: { type: String, default: '' } },
+          emits: ['select'],
+          template: '<button type="button" @click="$emit(\'select\')">{{ label }}</button>'
+        }),
+        DcConfirmDialog: defineComponent({
+          name: 'DcConfirmDialog',
+          props: { open: { type: Boolean, default: false } },
+          emits: ['update:open', 'confirm'],
+          template:
+            '<div v-if="open" data-testid="delete-provider-dialog"><button data-testid="confirm-delete-provider" @click="$emit(\'confirm\')" /></div>'
+        }),
+        TooltipProvider: passthrough('TooltipProvider'),
+        Tooltip: passthrough('Tooltip'),
+        TooltipTrigger: passthrough('TooltipTrigger'),
+        TooltipContent: passthrough('TooltipContent'),
         AnthropicProviderSettingsDetail: defineComponent({
           name: 'AnthropicProviderSettingsDetail',
           template: '<div data-testid="anthropic-detail" />'
@@ -324,7 +392,7 @@ const setup = async (options?: {
 
   await waitForGuideTargetSync()
 
-  return { wrapper, router, completeStep, modelStore }
+  return { wrapper, router, completeStep, modelStore, route }
 }
 
 describe('ModelProviderSettings', () => {
@@ -418,7 +486,7 @@ describe('ModelProviderSettings', () => {
     TEST_TIMEOUT_MS
   )
 
-  it('keeps disabled providers collapsed until the section is expanded', async () => {
+  it('shows only configured providers in the sidebar', async () => {
     const { wrapper } = await setup({
       providers: [
         {
@@ -440,42 +508,30 @@ describe('ModelProviderSettings', () => {
       ]
     })
 
-    expect(wrapper.text()).toContain('settings.provider.disabled (1)')
+    expect(wrapper.find('[data-provider-id="anthropic"]').exists()).toBe(true)
     expect(wrapper.find('[data-provider-id="mistral"]').exists()).toBe(false)
-
-    await wrapper.get('[data-testid="disabled-providers-toggle"]').trigger('click')
-
-    expect(wrapper.find('[data-provider-id="mistral"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="provider-browse-all"]').exists()).toBe(true)
   })
 
-  it('automatically expands disabled providers when search matches them', async () => {
-    const { wrapper } = await setup({
-      providers: [
-        {
-          id: 'anthropic',
-          name: 'Anthropic',
-          apiType: 'anthropic',
-          apiKey: 'test-key',
-          baseUrl: 'https://api.anthropic.com',
-          enable: true
-        },
-        {
-          id: 'mistral',
-          name: 'Mistral',
-          apiType: 'mistral',
-          apiKey: '',
-          baseUrl: 'https://api.mistral.ai',
-          enable: false
-        }
-      ]
-    })
+  it('opens the catalog view from Browse all providers and selects an entry', async () => {
+    const { wrapper, router, route } = await setup()
 
-    expect(wrapper.find('[data-provider-id="mistral"]').exists()).toBe(false)
+    await wrapper.get('[data-testid="provider-browse-all"]').trigger('click')
+    await flushPromises()
+
+    expect(router.push).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'settings-provider',
+        query: { view: 'catalog' }
+      })
+    )
+    expect(wrapper.find('[data-testid="provider-catalog"]').exists()).toBe(true)
 
-    await wrapper.get('input').setValue('mistral')
+    await wrapper.get('[data-testid="catalog-select-anthropic"]').trigger('click')
     await flushPromises()
 
-    expect(wrapper.find('[data-provider-id="mistral"]').exists()).toBe(true)
+    expect(route.params.providerId).toBe('anthropic')
+    expect(wrapper.find('[data-testid="provider-catalog"]').exists()).toBe(false)
   })
 
   it('auto-continues onboarding after the provider is configured', async () => {
@@ -580,7 +636,7 @@ describe('ModelProviderSettings', () => {
     })
 
     expect(wrapper.get('[data-testid="guided-overlay"]').attributes('data-target-testid')).toBe(
-      'provider-models-tab-trigger'
+      'provider-models-section'
     )
 
     modelStore.allProviderModels = [
@@ -610,7 +666,7 @@ describe('ModelProviderSettings', () => {
     })
 
     expect(wrapper.get('[data-testid="guided-overlay"]').attributes('data-target-testid')).toBe(
-      'provider-models-tab-trigger'
+      'provider-models-section'
     )
 
     const delayedToggle = document.createElement('button')
diff --git a/test/renderer/components/ModelProviderSettingsDetail.test.ts b/test/renderer/components/ModelProviderSettingsDetail.test.ts
index ba0f9c0717..27951c089a 100644
--- a/test/renderer/components/ModelProviderSettingsDetail.test.ts
+++ b/test/renderer/components/ModelProviderSettingsDetail.test.ts
@@ -62,7 +62,8 @@ async function setup(options?: { provider?: LLM_PROVIDER; updatedProvider?: LLM_
     checkProvider: vi.fn().mockResolvedValue({ isOk: true }),
     getAzureApiVersion: vi.fn().mockResolvedValue('2024-02-01'),
     getGeminiSafety: vi.fn().mockResolvedValue('BLOCK_MEDIUM_AND_ABOVE'),
-    removeProvider: vi.fn().mockResolvedValue(undefined)
+    removeProvider: vi.fn().mockResolvedValue(undefined),
+    getProviderHealth: vi.fn(() => ({ status: 'not_checked' }))
   }
 
   const modelStore = {
diff --git a/test/renderer/components/ProviderApiConfig.test.ts b/test/renderer/components/ProviderApiConfig.test.ts
index 4ea359fe69..38f3760d5c 100644
--- a/test/renderer/components/ProviderApiConfig.test.ts
+++ b/test/renderer/components/ProviderApiConfig.test.ts
@@ -389,7 +389,8 @@ describe('ProviderApiConfig', () => {
   it('does not emit validation from the API key enter shortcut when the provider is disabled', async () => {
     const { wrapper } = await setup({
       provider: createProvider({
-        enable: false
+        enable: false,
+        apiKey: ''
       })
     })
 
@@ -399,6 +400,35 @@ describe('ProviderApiConfig', () => {
     expect(wrapper.emitted('validate-key')).toBeUndefined()
   })
 
+  it('renders a masked key summary once configured and edits via Update key', async () => {
+    const { wrapper } = await setup({
+      provider: createProvider({ apiKey: 'sk-1234567890abcd' })
+    })
+
+    const summary = wrapper.get('[data-testid="provider-api-key-summary"]')
+    expect(summary.text()).toContain('••••••••abcd')
+    expect(summary.text()).not.toContain('sk-1234567890abcd')
+    expect(wrapper.find('[data-testid="provider-api-key-input"]').exists()).toBe(false)
+
+    await wrapper.get('[data-testid="provider-update-key-button"]').trigger('click')
+
+    const input = wrapper.get('[data-testid="provider-api-key-input"]')
+    expect((input.element as HTMLInputElement).value).toBe('')
+  })
+
+  it('keeps the stored key when the Update key editor is left empty', async () => {
+    const { wrapper } = await setup({
+      provider: createProvider({ apiKey: 'sk-1234567890abcd' })
+    })
+
+    await wrapper.get('[data-testid="provider-update-key-button"]').trigger('click')
+    await wrapper.get('[data-testid="provider-api-key-input"]').trigger('blur')
+    await flushPromises()
+
+    expect(wrapper.emitted('api-key-change')).toBeUndefined()
+    expect(wrapper.find('[data-testid="provider-api-key-summary"]').exists()).toBe(true)
+  })
+
   it('reports metadata-backed refresh failures as transient feedback', async () => {
     const { wrapper, providerClient, notifyRenderer } = await setup({
       provider: createProvider({
diff --git a/test/renderer/stores/modelStore.test.ts b/test/renderer/stores/modelStore.test.ts
index c883483889..ae066848a3 100644
--- a/test/renderer/stores/modelStore.test.ts
+++ b/test/renderer/stores/modelStore.test.ts
@@ -1037,3 +1037,75 @@ describe('modelStore.initialize', () => {
     ])
   })
 })
+
+describe('modelStore.applyInitialModelRecommendations', () => {
+  const providerModels = [
+    {
+      id: 'chat-1',
+      name: 'Chat 1',
+      group: 'g',
+      providerId: 'openai',
+      isCustom: false,
+      type: ModelType.Chat
+    },
+    {
+      id: 'embed-1',
+      name: 'Embed 1',
+      group: 'g',
+      providerId: 'openai',
+      isCustom: false,
+      type: ModelType.Embedding
+    },
+    { id: 'chat-2', name: 'Chat 2', group: 'g', providerId: 'openai', isCustom: false },
+    {
+      id: 'chat-3',
+      name: 'Chat 3',
+      group: 'g',
+      providerId: 'openai',
+      isCustom: false,
+      type: ModelType.Chat
+    },
+    {
+      id: 'chat-4',
+      name: 'Chat 4',
+      group: 'g',
+      providerId: 'openai',
+      isCustom: false,
+      type: ModelType.Chat
+    }
+  ]
+
+  it('preselects up to three chat-typed models when nothing is enabled yet', async () => {
+    const { store, modelClient } = await setupStore({
+      modelClient: {
+        getProviderModels: vi.fn(async () => providerModels),
+        getBatchModelStatus: vi.fn(async (_providerId: string, ids: string[]) =>
+          Object.fromEntries(ids.map((id) => [id, false]))
+        )
+      }
+    })
+
+    await store.applyInitialModelRecommendations('openai')
+
+    expect(modelClient.updateModelStatus.mock.calls.map((call: unknown[]) => call[1])).toEqual([
+      'chat-1',
+      'chat-2',
+      'chat-3'
+    ])
+  })
+
+  it('never overwrites an existing selection', async () => {
+    const { store, modelClient } = await setupStore({
+      modelClient: {
+        getProviderModels: vi.fn(async () => providerModels),
+        getBatchModelStatus: vi.fn(async (_providerId: string, ids: string[]) =>
+          Object.fromEntries(ids.map((id) => [id, id === 'chat-4']))
+        )
+      }
+    })
+
+    await store.applyInitialModelRecommendations('openai')
+
+    expect(modelClient.updateModelStatus).not.toHaveBeenCalled()
+  })
+})