@swarmclawai/swarmclaw 1.2.3 → 1.2.4

package/src/components/auth/setup-wizard/step-agents.tsx

@@ -36,9 +36,10 @@ function ModelCombobox({
   const fetched = useRef<string | null>(null)
 
   const effectiveEndpoint = endpointOverride || provider?.endpoint || null
+  const supportsModelDiscovery = Boolean(provider && provider.setupProvider !== 'custom')
 
   const fetchModels = useCallback(async (force?: boolean) => {
-    if (!provider) return
+    if (!provider || !supportsModelDiscovery) return
     const cacheKey = `${provider.provider}|${effectiveEndpoint || ''}|${provider.credentialId || ''}`
     if (!force && fetched.current === cacheKey) return
     fetched.current = cacheKey
@@ -63,11 +64,21 @@ function ModelCombobox({
     } finally {
       setLoading(false)
     }
-  }, [provider, effectiveEndpoint])
+  }, [provider, effectiveEndpoint, supportsModelDiscovery])
 
   useEffect(() => {
+    if (!provider) {
+      setModels([])
+      setFetchError('')
+      return
+    }
+    if (!supportsModelDiscovery) {
+      setModels(provider.defaultModel ? [provider.defaultModel] : [])
+      setFetchError('')
+      return
+    }
     fetchModels()
-  }, [fetchModels])
+  }, [fetchModels, provider, supportsModelDiscovery])
 
   // Close dropdown on outside click
   useEffect(() => {
@@ -116,38 +127,40 @@ function ModelCombobox({
             </svg>
           </a>
         )}
-        <button
-          type="button"
-          onClick={() => {
-            if (models.length > 0 && !loading) {
-              setOpen(!open)
-              if (!open) setSearch(value)
-            } else {
-              fetchModels(true)
-            }
-          }}
-          disabled={loading}
-          className="text-text-3 hover:text-accent-bright transition-colors bg-transparent border-none cursor-pointer disabled:opacity-40"
-          title={models.length > 0 ? 'Show models' : 'Fetch available models'}
-        >
-          {loading ? (
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="animate-spin">
-              <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.5" opacity="0.25" />
-              <path d="M12.5 7A5.5 5.5 0 0 0 7 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-            </svg>
-          ) : models.length > 0 ? (
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-              <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          ) : (
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-              <path d="M1.5 7A5.5 5.5 0 1 1 7 12.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
-              <path d="M1.5 12.5V9.5H4.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          )}
-        </button>
+        {supportsModelDiscovery && (
+          <button
+            type="button"
+            onClick={() => {
+              if (models.length > 0 && !loading) {
+                setOpen(!open)
+                if (!open) setSearch(value)
+              } else {
+                fetchModels(true)
+              }
+            }}
+            disabled={loading}
+            className="text-text-3 hover:text-accent-bright transition-colors bg-transparent border-none cursor-pointer disabled:opacity-40"
+            title={models.length > 0 ? 'Show models' : 'Fetch available models'}
+          >
+            {loading ? (
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="animate-spin">
+                <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.5" opacity="0.25" />
+                <path d="M12.5 7A5.5 5.5 0 0 0 7 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+            ) : models.length > 0 ? (
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            ) : (
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M1.5 7A5.5 5.5 0 1 1 7 12.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+                <path d="M1.5 12.5V9.5H4.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            )}
+          </button>
+        )}
       </div>
-      {fetchError && models.length === 0 && (
+      {fetchError && models.length === 0 && supportsModelDiscovery && (
         <div className="mt-1 text-[11px] text-amber-300/80">{fetchError}</div>
       )}
       {open && filtered.length > 0 && (
@@ -423,7 +436,7 @@ export function StepAgents({
                         focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
                     />
                   </div>
-                  {matchedProvider?.provider === 'openclaw' ? (
+                  {matchedProvider?.setupProvider === 'openclaw' ? (
                     <div className="md:col-span-2">
                       <label className="block text-[12px] text-text-3 font-500 mb-1.5 ml-1">Model</label>
                       <div className="flex items-center gap-3 px-4 py-3 rounded-[12px] border border-white/[0.08] bg-bg">
@@ -448,7 +461,7 @@ export function StepAgents({
                         provider={matchedProvider}
                         endpointOverride={draft.apiEndpoint}
                         onChange={(model) => onUpdateDraft(draft.id, { model })}
-                        modelLibraryUrl={matchedProvider ? SETUP_PROVIDERS.find((sp) => sp.id === matchedProvider.provider)?.modelLibraryUrl : null}
+                        modelLibraryUrl={matchedProvider ? SETUP_PROVIDERS.find((sp) => sp.id === matchedProvider.setupProvider)?.modelLibraryUrl : null}
                       />
                     </div>
                   )}
@@ -457,7 +470,7 @@ export function StepAgents({
                       value={draft.soul}
                       onChange={(soul) => onUpdateDraft(draft.id, { soul })}
                     />
-                    {matchedProvider?.provider === 'openclaw' && (
+                    {matchedProvider?.setupProvider === 'openclaw' && (
                       <p className="mt-1.5 ml-1 text-[11px] text-text-3/70">
                         Synced to the gateway as SOUL.md on save.
                       </p>

package/src/components/auth/setup-wizard/step-connect.tsx

@@ -5,7 +5,7 @@ import { api } from '@/lib/app/api-client'
 import { dedup, errorMessage } from '@/lib/shared-utils'
 import { getDefaultModelForProvider } from '@/lib/setup-defaults'
 import { OpenClawDeployPanel } from '@/components/openclaw/openclaw-deploy-panel'
-import type { Credential, Credentials, GatewayProfile, ProviderConfig } from '@/types'
+import type { Credential, Credentials, GatewayProfile, ProviderId, ProviderConfig } from '@/types'
 import type { StepConnectProps, CheckState, ProviderCheckResponse, ConfiguredProvider } from './types'
 import {
   formatEndpointHost,
@@ -35,7 +35,9 @@ export function StepConnect({
   const [checkMessage, setCheckMessage] = useState('')
   const [checkErrorCode, setCheckErrorCode] = useState<string | null>(null)
   const [openclawDeviceId, setOpenclawDeviceId] = useState<string | null>(null)
-  const [providerSuggestedModel, setProviderSuggestedModel] = useState(provider === 'custom' ? '' : getDefaultModelForProvider(provider))
+  const [providerSuggestedModel, setProviderSuggestedModel] = useState(
+    editingProvider?.defaultModel || (provider === 'custom' ? '' : getDefaultModelForProvider(provider)),
+  )
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState('')
   const [existingCredentials, setExistingCredentials] = useState<Credential[]>([])
@@ -63,6 +65,7 @@ export function StepConnect({
   const supportsEndpoint = selectedProvider.supportsEndpoint || isCustom
   const keyIsOptional = (selectedProvider.optionalKey && !isOllamaCloud) || isCustom
   const requiresVerifiedConnection = provider === 'openclaw'
+  const canCheckConnection = !isCustom
   const openClawEndpointValue = provider === 'openclaw'
     ? (endpoint.trim() || selectedProvider.defaultEndpoint || 'http://localhost:18789/v1')
     : null
@@ -162,6 +165,11 @@ export function StepConnect({
       return
     }
 
+    if (isCustom && !providerSuggestedModel.trim()) {
+      setError('Custom providers need a default model ID.')
+      return
+    }
+
     setSaving(true)
     setError('')
     try {
@@ -187,17 +195,17 @@ export function StepConnect({
       }
 
       // Custom providers: create a ProviderConfig in the DB so agents can reference it
-      let resolvedProvider = provider
+      let resolvedProvider: ProviderId = provider
       if (isCustom) {
         const customConfig = await api<ProviderConfig>('POST', '/providers', {
           name: providerLabel.trim() || 'Custom Provider',
           baseUrl: endpoint.trim(),
-          models: providerSuggestedModel ? [providerSuggestedModel] : [],
-          requiresApiKey: !!apiKey.trim(),
+          models: providerSuggestedModel.trim() ? [providerSuggestedModel.trim()] : [],
+          requiresApiKey: hasKeyOrCredential,
           credentialId: nextCredentialId || null,
           isEnabled: true,
         })
-        resolvedProvider = customConfig.id as typeof provider
+        resolvedProvider = customConfig.id as ProviderId
       }
 
       // Build a tokenized dashboard URL for OpenClaw so step-agents can link to it
@@ -209,11 +217,12 @@ export function StepConnect({
 
       const configured: ConfiguredProvider = {
         id: crypto.randomUUID(),
+        setupProvider: provider,
         provider: resolvedProvider,
         name: providerLabel.trim() || selectedProvider.name,
         credentialId: nextCredentialId || null,
         endpoint: supportsEndpoint ? (endpoint.trim() || selectedProvider.defaultEndpoint || null) : null,
-        defaultModel: providerSuggestedModel || (isCustom ? '' : getDefaultModelForProvider(provider)),
+        defaultModel: providerSuggestedModel.trim() || (isCustom ? '' : getDefaultModelForProvider(provider)),
         gatewayProfileId: null,
         notes: providerNotes.trim() || null,
         tags: providerTags,
@@ -323,6 +332,26 @@ export function StepConnect({
           </div>
         )}
 
+        {isCustom && (
+          <div>
+            <label className="block text-[12px] text-text-3 font-500 mb-1.5 ml-1">
+              Default model
+            </label>
+            <input
+              type="text"
+              value={providerSuggestedModel}
+              onChange={(e) => setProviderSuggestedModel(e.target.value)}
+              placeholder="e.g. gpt-4o-mini"
+              className="w-full px-4 py-3 rounded-[12px] border border-white/[0.08] bg-surface
+                text-text text-[14px] font-mono outline-none transition-all duration-200
+                focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
+            />
+            <p className="mt-1.5 text-[11px] text-text-3">
+              Save the model ID you want starter agents to use with this provider. You can change it later per agent.
+            </p>
+          </div>
+        )}
+
         {provider === 'openclaw' && (
           <div className="rounded-[14px] border border-white/[0.08] bg-surface p-4 space-y-4">
             <OpenClawDeployPanel
@@ -536,17 +565,19 @@ export function StepConnect({
         >
           Back
         </button>
-        <button
-          onClick={runConnectionCheck}
-          disabled={checkState === 'checking' || saving}
-          className="px-6 py-3.5 rounded-[14px] border border-white/[0.08] bg-white/[0.03] text-text text-[14px]
-            font-display font-600 cursor-pointer hover:bg-white/[0.06] transition-all duration-200 disabled:opacity-40"
-        >
-          {checkState === 'checking' ? 'Checking...' : 'Check Connection'}
-        </button>
+        {canCheckConnection && (
+          <button
+            onClick={runConnectionCheck}
+            disabled={checkState === 'checking' || saving}
+            className="px-6 py-3.5 rounded-[14px] border border-white/[0.08] bg-white/[0.03] text-text text-[14px]
+              font-display font-600 cursor-pointer hover:bg-white/[0.06] transition-all duration-200 disabled:opacity-40"
+          >
+            {checkState === 'checking' ? 'Checking...' : 'Check Connection'}
+          </button>
+        )}
         <button
           onClick={saveProvider}
-          disabled={(requiresKey && !hasKeyOrCredential) || saving}
+          disabled={(requiresKey && !hasKeyOrCredential) || (isCustom && !providerSuggestedModel.trim()) || saving}
           className="px-8 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-display font-600
             cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
             shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"

package/src/components/auth/setup-wizard/types.ts

@@ -1,4 +1,4 @@
-import type { GatewayProfile } from '@/types'
+import type { GatewayProfile, ProviderId } from '@/types'
 import type { SetupProvider } from '@/lib/setup-defaults'
 
 export type SetupStep = 'profile' | 'providers' | 'connect' | 'agents' | 'next' | 'done'
@@ -34,7 +34,8 @@ export interface SetupWizardProps {
 
 export interface ConfiguredProvider {
   id: string
-  provider: SetupProvider
+  setupProvider: SetupProvider
+  provider: ProviderId
   name: string
   credentialId: string | null
   endpoint: string | null
@@ -56,7 +57,8 @@ export interface StarterDraftAgent {
   systemPrompt: string
   soul: string
   providerConfigId: string | null
-  provider: SetupProvider | null
+  setupProvider: SetupProvider | null
+  provider: ProviderId | null
   model: string
   credentialId: string | null
   apiEndpoint: string | null
@@ -77,7 +79,7 @@ export interface StarterDraftAgent {
 export interface CreatedAgentSummary {
   id: string
   name: string
-  provider: SetupProvider
+  provider: ProviderId
   providerName: string
 }
 

package/src/components/auth/setup-wizard/utils.test.ts

@@ -6,6 +6,7 @@ import {
   isLocalOpenClawEndpoint,
   resolveOpenClawDashboardUrl,
   getOpenClawErrorHint,
+  requiresSetupProviderVerification,
   withHttpScheme,
   buildStarterDrafts,
   preferredConfiguredProvider,
@@ -165,21 +166,24 @@ test('withHttpScheme preserves wss://', () => {
 // buildStarterDrafts — OpenClaw provider handling
 // ---------------------------------------------------------------------------
 
-function makeConfiguredProvider(overrides: Partial<ConfiguredProvider> & { provider: ConfiguredProvider['provider'] }): ConfiguredProvider {
+function makeConfiguredProvider(overrides: Partial<ConfiguredProvider> & { setupProvider: ConfiguredProvider['setupProvider']; provider?: ConfiguredProvider['provider'] }): ConfiguredProvider {
+  const { setupProvider, provider = setupProvider, ...rest } = overrides
   return {
     id: 'cp-1',
+    setupProvider,
+    provider,
     name: 'Test Provider',
     credentialId: null,
     endpoint: null,
     defaultModel: '',
     gatewayProfileId: null,
     verified: true,
-    ...overrides,
+    ...rest,
   }
 }
 
 test('buildStarterDrafts assigns OpenClaw provider to drafts', () => {
-  const cp = makeConfiguredProvider({ provider: 'openclaw', endpoint: 'http://localhost:18789' })
+  const cp = makeConfiguredProvider({ setupProvider: 'openclaw', endpoint: 'http://localhost:18789' })
   const drafts = buildStarterDrafts({
     starterKitId: 'personal_assistant',
     intentText: '',
@@ -188,12 +192,13 @@ test('buildStarterDrafts assigns OpenClaw provider to drafts', () => {
   assert.ok(drafts.length > 0, 'should produce at least one draft')
   for (const d of drafts) {
     assert.equal(d.provider, 'openclaw')
+    assert.equal(d.setupProvider, 'openclaw')
     assert.equal(d.providerConfigId, cp.id)
   }
 })
 
 test('buildStarterDrafts OpenClaw drafts use empty model (not "default")', () => {
-  const cp = makeConfiguredProvider({ provider: 'openclaw', defaultModel: '' })
+  const cp = makeConfiguredProvider({ setupProvider: 'openclaw', defaultModel: '' })
   const drafts = buildStarterDrafts({
     starterKitId: 'personal_assistant',
     intentText: '',
@@ -206,7 +211,7 @@ test('buildStarterDrafts OpenClaw drafts use empty model (not "default")', () =>
 })
 
 test('buildStarterDrafts OpenClaw drafts inherit endpoint from provider', () => {
-  const cp = makeConfiguredProvider({ provider: 'openclaw', endpoint: 'http://10.0.0.5:18789' })
+  const cp = makeConfiguredProvider({ setupProvider: 'openclaw', endpoint: 'http://10.0.0.5:18789' })
   const drafts = buildStarterDrafts({
     starterKitId: 'personal_assistant',
     intentText: '',
@@ -219,7 +224,7 @@ test('buildStarterDrafts OpenClaw drafts inherit endpoint from provider', () =>
 
 test('buildStarterDrafts carries dashboardUrl through from ConfiguredProvider', () => {
   const cp = makeConfiguredProvider({
-    provider: 'openclaw',
+    setupProvider: 'openclaw',
     endpoint: 'http://localhost:18789',
     dashboardUrl: 'http://localhost:18789?token=my-secret',
   })
@@ -228,11 +233,36 @@ test('buildStarterDrafts carries dashboardUrl through from ConfiguredProvider',
 })
 
 test('preferredConfiguredProvider picks openclaw provider for openclaw template', () => {
-  const openclawCp = makeConfiguredProvider({ id: 'oc-1', provider: 'openclaw' })
-  const openaiCp = makeConfiguredProvider({ id: 'oai-1', provider: 'openai' })
+  const openclawCp = makeConfiguredProvider({ id: 'oc-1', setupProvider: 'openclaw' })
+  const openaiCp = makeConfiguredProvider({ id: 'oai-1', setupProvider: 'openai' })
   const result = preferredConfiguredProvider(
     { id: 'tmpl-1', name: 'Test', description: '', systemPrompt: '', tools: [], recommendedProviders: ['openclaw'] },
     [openaiCp, openclawCp],
   )
   assert.equal(result?.id, 'oc-1')
 })
+
+test('buildStarterDrafts carries custom runtime provider ids alongside custom setup provider state', () => {
+  const cp = makeConfiguredProvider({
+    setupProvider: 'custom',
+    provider: 'custom-openrouter',
+    defaultModel: 'openai/gpt-4.1',
+  })
+  const drafts = buildStarterDrafts({
+    starterKitId: 'personal_assistant',
+    intentText: '',
+    configuredProviders: [cp],
+  })
+
+  for (const draft of drafts) {
+    assert.equal(draft.setupProvider, 'custom')
+    assert.equal(draft.provider, 'custom-openrouter')
+    assert.equal(draft.model, 'openai/gpt-4.1')
+  }
+})
+
+test('requiresSetupProviderVerification skips custom providers', () => {
+  assert.equal(requiresSetupProviderVerification('custom'), false)
+  assert.equal(requiresSetupProviderVerification('openclaw'), false)
+  assert.equal(requiresSetupProviderVerification('openai'), true)
+})

package/src/components/auth/setup-wizard/utils.ts

@@ -91,6 +91,10 @@ export function getOpenClawErrorHint(message: string): string | null {
   return null
 }
 
+export function requiresSetupProviderVerification(provider: SetupProvider | null | undefined): boolean {
+  return provider != null && provider !== 'openclaw' && provider !== 'custom'
+}
+
 export function preferredConfiguredProvider(
   template: StarterKitAgentTemplate,
   configuredProviders: ConfiguredProvider[],
@@ -103,12 +107,12 @@ export function preferredConfiguredProvider(
   }
 
   if (fallbackProvider) {
-    const exact = configuredProviders.find((candidate) => candidate.provider === fallbackProvider)
+    const exact = configuredProviders.find((candidate) => candidate.setupProvider === fallbackProvider)
     if (exact) return exact
   }
 
   for (const provider of template.recommendedProviders || []) {
-    const exact = configuredProviders.find((candidate) => candidate.provider === provider)
+    const exact = configuredProviders.find((candidate) => candidate.setupProvider === provider)
     if (exact) return exact
   }
 
@@ -134,14 +138,15 @@ export function buildStarterDrafts(args: {
       template,
       configuredProviders,
       previous?.providerConfigId,
-      previous?.provider,
+      previous?.setupProvider,
     )
-    const oldProvider = previous?.provider || null
+    const oldProvider = previous?.setupProvider || null
+    const previousModel = previous?.model || ''
     const oldProviderDefault = oldProvider ? getDefaultModelForProvider(oldProvider) : ''
     const nextProviderDefault = configuredProvider?.defaultModel || ''
     const shouldRefreshModel =
-      !previous?.model
-      || (oldProvider !== configuredProvider?.provider && previous.model === oldProviderDefault)
+      !previousModel.trim()
+      || (oldProvider !== configuredProvider?.setupProvider && previousModel === oldProviderDefault)
 
     return {
       id,
@@ -151,8 +156,9 @@ export function buildStarterDrafts(args: {
       systemPrompt: previous?.systemPrompt || applyIntentContext(template.systemPrompt, intentText),
       soul: previous?.soul || '',
       providerConfigId: configuredProvider?.id || null,
+      setupProvider: configuredProvider?.setupProvider || null,
       provider: configuredProvider?.provider || null,
-      model: shouldRefreshModel ? nextProviderDefault : previous.model,
+      model: shouldRefreshModel ? nextProviderDefault : previousModel,
       credentialId: configuredProvider?.credentialId || null,
       apiEndpoint: configuredProvider?.endpoint || null,
       gatewayProfileId: configuredProvider?.gatewayProfileId || null,

package/src/components/providers/provider-list.tsx

@@ -66,13 +66,13 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
   const handleToggle = async (e: React.MouseEvent, id: string, currentEnabled: boolean) => {
     e.stopPropagation()
     await api('PUT', `/providers/${id}`, { isEnabled: !currentEnabled })
-    await loadProviderConfigs()
+    await Promise.all([loadProviderConfigs(), loadProviders()])
   }
 
   const handleDelete = async (e: React.MouseEvent, id: string) => {
     e.stopPropagation()
     await api('DELETE', `/providers/${id}`)
-    await loadProviderConfigs()
+    await Promise.all([loadProviderConfigs(), loadProviders()])
   }
 
   const handleEditGateway = (id: string | null) => {
@@ -219,18 +219,27 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
     }
   }
 
-  // Merge built-in providers with custom configs
-  const builtinItems = providers.map((p) => ({
+  const customProviderConfigs = providerConfigs.filter((config) => config.type === 'custom')
+  const customConfigIds = new Set(customProviderConfigs.map((config) => config.id))
+  const builtinOverrides = new Map(
+    providerConfigs
+      .filter((config) => config.type === 'builtin')
+      .map((config) => [config.id, config]),
+  )
+
+  const builtinItems = providers
+    .filter((provider) => !customConfigIds.has(String(provider.id)))
+    .map((p) => ({
     id: p.id,
     name: p.name,
     type: 'builtin' as const,
     models: p.models,
     requiresApiKey: p.requiresApiKey,
-    isEnabled: true,
+    isEnabled: builtinOverrides.get(String(p.id))?.isEnabled !== false,
     isConnected: !p.requiresApiKey || Object.values(credentials).some((c) => c.provider === p.id),
-  }))
+    }))
 
-  const customItems = providerConfigs.map((c) => ({
+  const customItems = customProviderConfigs.map((c) => ({
     id: c.id,
     name: c.name,
     type: 'custom' as const,
@@ -241,6 +250,8 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
   }))
 
   const allItems = [...builtinItems, ...customItems]
+  const enabledItems = allItems.filter((item) => item.isEnabled)
+  const disabledItems = allItems.filter((item) => !item.isEnabled)
   const gatewayNameById = new Map(gatewayProfiles.map((gateway) => [gateway.id, gateway.name]))
   const runtimeHealthByGateway = externalAgents.reduce<Record<string, { total: number; active: number; lastHeartbeatAt: number | null }>>((acc, runtime) => {
     if (!runtime.gatewayProfileId) return acc
@@ -273,7 +284,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
         )}
       </div>
       <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
-        {allItems.map((item, idx) => (
+        {enabledItems.map((item, idx) => (
           <div
             key={item.id}
             role="button"
@@ -299,7 +310,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                   ${item.type === 'builtin' ? 'bg-white/[0.04] text-text-3' : 'bg-accent-bright/10 text-[#6366F1]'}`}>
                   {item.type === 'builtin' ? 'Built-in' : 'Custom'}
                 </span>
-                {!inSidebar && item.type === 'custom' && (
+                {!inSidebar && (
                   <>
                     <div
                       onClick={(e) => handleToggle(e, item.id, item.isEnabled)}
@@ -311,15 +322,17 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                         style={item.isEnabled ? { animation: 'spring-in 0.3s var(--ease-spring)' } : undefined}
                       />
                     </div>
-                    <button
-                      onClick={(e) => handleDelete(e, item.id)}
-                      className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
-                      title="Delete provider"
-                    >
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                        <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                      </svg>
-                    </button>
+                    {item.type === 'custom' && (
+                      <button
+                        onClick={(e) => handleDelete(e, item.id)}
+                        className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                        title="Delete provider"
+                      >
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                          <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                        </svg>
+                      </button>
+                    )}
                   </>
                 )}
                 <StatusDot
@@ -339,6 +352,67 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
           </div>
         ))}
       </div>
+      {!inSidebar && disabledItems.length > 0 && (
+        <>
+          <div className="mt-8 mb-4 flex items-center justify-between">
+            <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Disabled Providers</div>
+          </div>
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {disabledItems.map((item, idx) => (
+              <div
+                key={item.id}
+                role="button"
+                tabIndex={0}
+                onClick={() => handleEdit(item.id)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    handleEdit(item.id)
+                  }
+                }}
+                className="w-full text-left p-4 rounded-[14px] border transition-all duration-200
+                  cursor-pointer bg-surface/60 border-white/[0.06] hover:bg-white/[0.02] hover:border-white/[0.12]"
+                style={{
+                  animation: 'spring-in 0.5s var(--ease-spring) both',
+                  animationDelay: `${(enabledItems.length + idx) * 0.05}s`
+                }}
+              >
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="font-display text-[14px] font-600 text-text truncate">{item.name}</span>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <span className={`text-[10px] font-600 px-2 py-0.5 rounded-[5px] uppercase tracking-wider
+                      ${item.type === 'builtin' ? 'bg-white/[0.04] text-text-3' : 'bg-accent-bright/10 text-[#6366F1]'}`}>
+                      {item.type === 'builtin' ? 'Built-in' : 'Custom'}
+                    </span>
+                    <div
+                      onClick={(e) => handleToggle(e, item.id, item.isEnabled)}
+                      className="w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0 bg-white/[0.08]"
+                    >
+                      <div className="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-all" />
+                    </div>
+                    {item.type === 'custom' && (
+                      <button
+                        onClick={(e) => handleDelete(e, item.id)}
+                        className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                        title="Delete provider"
+                      >
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                          <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                        </svg>
+                      </button>
+                    )}
+                    <StatusDot status="idle" pulse={false} />
+                  </div>
+                </div>
+                <div className="text-[12px] text-text-3/60 font-mono truncate">
+                  {item.models.slice(0, 3).join(', ')}
+                  {item.models.length > 3 && ` +${item.models.length - 3}`}
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
 
       <div className="mt-8 mb-4 flex items-center justify-between">
         <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">OpenClaw Gateways</div>