April 15, 2026 • 版本: v2026.4.14-beta.1

OpenClaw Dashboard 模型下拉菜单显示未配置提供商的模型

OpenClaw Dashboard 中的 Agent 模型选择下拉菜单显示所有支持的模型，而不考虑提供商的配置状态，导致用户在选择不可用模型时感到困惑。

🔍 症状

用户报告的行为

当访问 http://localhost:8080 上的 Dashboard 并导航到 Agent Settings 时，Primary Model 下拉菜单会显示一个包含大量模型的列表：

┌─────────────────────────────────────────────────────────┐
│  Primary Model                                    ▼     │
├─────────────────────────────────────────────────────────┤
│  🔍 Search models...                                     │
├─────────────────────────────────────────────────────────┤
│  ▼ Alibaba Cloud (bailian)                              │
│      bailian/kimi-k2.5                                  │
│      bailian/qwen-plus                                  │
│  ▼ Anthropic                                            │
│      anthropic/claude-opus-4-5                         │
│      anthropic/claude-sonnet-4                          │
│  ▼ Amazon Bedrock                                       │
│      bedrock/anthropic.claude-3-5-sonnet               │
│      bedrock/anthropic.claude-3-opus                    │
│  ▼ OpenAI                                               │
│      openai/gpt-4o                                       │
│      openai/gpt-4-turbo                                  │
└─────────────────────────────────────────────────────────┘

故障场景

当用户从未配置的 provider（例如 anthropic/claude-opus-4-5）中选择一个模型并尝试保存或使用 agent 时：

$ openclaw agent update --model anthropic/claude-opus-4-5
[ERROR] Provider 'anthropic' is not configured. 
        Please configure credentials in config.yaml or set environment variables.
        Run 'openclaw config list' to see current provider status.

技术表现

在浏览器控制台中，下拉组件从 src/models/supported-models.json 渲染模型，而没有检查 provider 的可用性：

[OpenClaw] Model list loaded: 127 models
[OpenClaw] Provider check skipped for dropdown population

🧠 根因分析

架构问题

Dashboard 的模型选择器组件（src/components/ModelSelector.tsx）在组件初始化期间从静态模型注册表加载所有支持的模型列表：

// src/components/ModelSelector.tsx - Line 23-45
function ModelSelector() {
  const [models, setModels] = useState<Model[]>([]);
  
  useEffect(() => {
    // Current implementation - loads ALL models
    const allModels = getSupportedModels();
    setModels(allModels);
  }, []);
  
  // ... rest of component
}

缺少 Provider 可用性检查

该组件没有调用 getConfiguredProviders() 或等效方法来按 provider 可用性过滤模型。模型注册表和 provider 配置存在于不同的数据域中，没有集成：

┌─────────────────────────────────┐
│  Models Registry                │
│  (src/models/supported-models.ts)│
│                                 │
│  • 127 models defined           │
│  • Grouped by provider          │
│  • No runtime validation        │
└───────────────┬─────────────────┘
                │
                ▼ NO INTEGRATION
┌─────────────────────────────────┐
│  Provider Configuration         │
│  (config.yaml / env vars)       │
│                                 │
│  • User-configured credentials  │
│  • Provider availability state  │
│  • NOT consulted by UI          │
└─────────────────────────────────┘

数据流缺口

用户打开 Dashboard → ModelSelector 组件挂载
组件获取所有模型 → getSupportedModels() 返回完整的静态列表
没有 API 调用到后端 → 组件不查询 /api/providers/status
下拉菜单渲染所有模型 → 包括来自未配置 providers 的模型
用户选择无效模型 → 仅在执行时才发生运行时错误

受影响的代码路径

src/
├── components/
│   └── ModelSelector.tsx        ← Does not filter by provider config
├── services/
│   └── providerService.ts       ← Contains getConfiguredProviders() but unused
└── models/
    └── supported-models.ts      ← Returns unfiltered model list

🛠️ 逐步修复

选项 A：按配置的 Providers 过滤模型（推荐）

修改 src/components/ModelSelector.tsx 以根据 provider 可用性过滤模型：

// src/components/ModelSelector.tsx - FIXED IMPLEMENTATION
import { useState, useEffect } from 'react';
import { getSupportedModels, Model } from '../models/supported-models';
import { getConfiguredProviders } from '../services/providerService';

function ModelSelector({ onModelSelect }: Props) {
  const [models, setModels] = useState<Model[]>([]);
  const [configuredProviders, setConfiguredProviders] = useState<Set<string>>(new Set());
  const [showOnlyConfigured, setShowOnlyConfigured] = useState(true);
  
  useEffect(() => {
    async function loadData() {
      // Step 1: Get list of configured providers
      const providers = await getConfiguredProviders();
      const configuredSet = new Set(providers.map(p => p.id));
      setConfiguredProviders(configuredSet);
      
      // Step 2: Load all models
      const allModels = getSupportedModels();
      
      // Step 3: Filter to only configured providers
      const filteredModels = showOnlyConfigured
        ? allModels.filter(model => configuredSet.has(model.provider))
        : allModels;
      
      setModels(filteredModels);
    }
    
    loadData();
  }, [showOnlyConfigured]);
  
  // ... rest of component
}

选项 B：为未配置的模型添加视觉指示器

如果需要保持所有模型的可见性并进行视觉区分：

// src/components/ModelSelector.tsx - ALTERNATIVE FIX
function ModelSelector({ onModelSelect }: Props) {
  const [models, setModels] = useState<Model[]>([]);
  const [configuredProviders, setConfiguredProviders] = useState<Set<string>>(new Set());
  
  useEffect(() => {
    async function loadData() {
      const providers = await getConfiguredProviders();
      setConfiguredProviders(new Set(providers.map(p => p.id)));
      setModels(getSupportedModels());
    }
    loadData();
  }, []);
  
  const isProviderConfigured = (providerId: string) => {
    return configuredProviders.has(providerId);
  };
  
  return (
    <select onChange={(e) => onModelSelect(e.target.value)}>
      {models.map(model => (
        <option 
          key={model.id}
          value={model.id}
          disabled={!isProviderConfigured(model.provider)}
          style={{
            color: isProviderConfigured(model.provider) ? 'inherit' : '#999',
            backgroundColor: isProviderConfigured(model.provider) ? 'white' : '#f5f5f5'
          }}
        >
          {model.displayName}
          {!isProviderConfigured(model.provider) && ' ⚠️ (provider not configured)'}
        </option>
      ))}
    </select>
  );
}

选项 C：后端驱动过滤

添加一个新的 API 端点，仅返回可用的模型：

// src/routes/api/models/available.ts
import { Router } from 'express';
import { getSupportedModels } from '../../models/supported-models';
import { getConfiguredProviders } from '../../services/providerService';

const router = Router();

router.get('/available', async (req, res) => {
  const configuredProviders = await getConfiguredProviders();
  const providerIds = new Set(configuredProviders.map(p => p.id));
  
  const availableModels = getSupportedModels()
    .filter(model => providerIds.has(model.provider));
  
  res.json({
    models: availableModels,
    configuredProviders: configuredProviders.map(p => p.id)
  });
});

export default router;

🧪 验证

验证步骤

应用修复后，通过以下方法验证行为：

1. Dashboard UI 验证

# Start the Dashboard
$ openclaw dashboard start

# Open browser to http://localhost:8080
# Navigate to Agent Settings → Primary Model dropdown
# 
# Expected: Only models from configured providers appear
# Example: If only bailian is configured, only bailian/* models show

2. API 端点验证

# If using Option C (backend filtering)
$ curl http://localhost:8080/api/models/available | jq

# Expected output:
{
  "models": [
    {"id": "bailian/kimi-k2.5", "provider": "bailian", ...},
    {"id": "bailian/qwen-plus", "provider": "bailian", ...}
  ],
  "configuredProviders": ["bailian"]
}

# Should NOT contain anthropic, bedrock, openai models

3. 组件单元测试

# Run the ModelSelector component tests
$ npm test -- --grep "ModelSelector"

# Expected: Test passes verifying filtering logic
✓ filters models by configured provider
✓ shows visual indicator for unconfigured models
✓ updates when provider configuration changes

4. 集成测试

# Configure a new provider and verify dropdown updates
$ openclaw config add-provider anthropic --api-key sk-ant-...

# Refresh Dashboard
# Verify anthropic models now appear in dropdown

退出码验证

# Verify no console errors in Dashboard
$ openclaw dashboard start --debug 2>&1 | grep -i "model\|provider"

[DEBUG] Loading configured providers: ["bailian"]
[DEBUG] Filtering 127 models to 2 available (bailian)
[DEBUG] ModelSelector rendered with 2 options

⚠️ 常见陷阱

需要处理的边界情况

没有配置 providers：下拉菜单应显示空状态，并带有消息"Configure a provider to see available models"
会话中配置 provider：ModelSelector 应在获得焦点或窗口焦点事件时重新获取 provider 列表
Provider API 密钥变为无效：模型保持可见（服务器端验证处理运行时错误）
初始加载时的竞态条件：获取 provider 配置时显示加载骨架

环境特定注意事项

Docker 部署

# When running in Docker, provider config is read from:
# 1. Environment variables (PRIORITY)
# 2. Mounted config.yaml at /app/config.yaml

# Verify config is mounted correctly:
$ docker exec <container-id> cat /app/config.yaml | grep -A5 providers

# Expected: Shows configured providers

macOS 安装

# Config location: ~/.openclaw/config.yaml
# Verify file permissions:
$ ls -la ~/.openclaw/config.yaml
-rw-r--r--  openclaw ~/.openclaw/config.yaml

# If permission denied, fix with:
$ chmod 644 ~/.openclaw/config.yaml

Windows (WSL2)

# Config location: ~/.openclaw/config.yaml (WSL2 path)
# Or: C:\Users\<username>\.openclaw\config.yaml

# Ensure line endings are LF, not CRLF:
$ dos2unix ~/.openclaw/config.yaml 2>/dev/null || sed -i 's/\r$//' ~/.openclaw/config.yaml

配置错误

config 中 provider ID 不正确：

# WRONG - provider ID mismatch providers: anthropic_api: type: anthropic # Should match model provider name CORRECT

providers: anthropic: type: anthropic

缺少必需字段：

# WRONG - missing api_key providers: anthropic: type: anthropic # api_key is required CORRECT

providers: anthropic: type: anthropic api_key: sk-ant-…

🔗 相关错误

历史背景

版本	问题	解决方案
v2026.3.x	Provider 下拉菜单显示所有 provider，不考虑配置	部分修复 - provider 列表已过滤，模型列表未过滤
v2026.2.x	API 凭证以明文形式存储在 config.yaml 中	添加了加密支持
v2026.1.x	大模型列表上模型选择器无响应	添加了虚拟滚动

调试命令

# List configured providers
$ openclaw config list --providers

# Test specific provider connectivity
$ openclaw provider test anthropic --model claude-3-5-sonnet

# View supported models for a provider
$ openclaw models list --provider anthropic

# Validate config.yaml
$ openclaw config validate