Benutzer gemeldetes Verhalten

Beim Zugriff auf das Dashboard unter http://localhost:8080 und der Navigation zu Agent-Einstellungen zeigt die Dropdown-Liste für das primäre Modell eine umfangreiche Liste von Modellen an:

┌─────────────────────────────────────────────────────────┐
│  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                                  │
└─────────────────────────────────────────────────────────┘

Fehlerszenario

Wenn ein Benutzer ein Modell von einem nicht konfigurierten Anbieter auswählt (z.B. anthropic/claude-opus-4-5) und versucht, den Agenten zu speichern oder zu verwenden:

$ 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.

Technische Manifestation

In der Browser-Konsole rendert die Dropdown-Komponente Modelle aus src/models/supported-models.json ohne Überprüfung der Anbieterverfügbarkeit:

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

Architektonisches Problem

Die Modell-Auswahlkomponente des Dashboards (src/components/ModelSelector.tsx) lädt die vollständige Liste der unterstützten Modelle aus der statischen Modellregistrierung während der Komponenteninitialisierung:

// 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
}

Fehlende Anbieter-Verfügbarkeitsprüfung

Die Komponente ruft nicht getConfiguredProviders() oder equivalent auf, um Modelle nach Anbieterverfügbarkeit zu filtern. Die Modellregistrierung und die Anbieterkonfiguration existieren in separaten Datendomänen ohne Integration:

┌─────────────────────────────────┐
│  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          │
└─────────────────────────────────┘

Datenflusslücke

1. Benutzer öffnet Dashboard → ModelSelector-Komponente wird gemountet
2. Komponente holt alle Modelle → getSupportedModels() gibt vollständige statische Liste zurück
3. Kein API-Aufruf an Backend → Komponente fragt nicht /api/providers/status ab
4. Dropdown rendert alle Modelle → Einschließlich solcher von nicht konfigurierten Anbietern
5. Benutzer wählt ungültiges Modell → Laufzeitfehler tritt erst bei der Ausführung auf

Betroffener Codepfad

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

Option A: Modelle nach konfigurierten Anbietern filtern (Empfohlen)

Ändern Sie src/components/ModelSelector.tsx, um Modelle basierend auf der Anbieterverfügbarkeit zu filtern:

// 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
}

Option B: Visuellen Indikator für nicht konfigurierte Modelle hinzufügen

Wenn alle Modelle mit visueller Unterscheidung angezeigt bleiben sollen:

// 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>
  );
}

Option C: Backend-gesteuerte Filterung

Fügen Sie einen neuen API-Endpunkt hinzu, der nur verfügbare Modelle zurückgibt:

// 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;

Verifizierungsschritte

Nach dem Anwenden der Lösung verifizieren Sie das Verhalten durch diese Methoden:

1. Dashboard-UI-Verifizierung

# 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-Endpunkt-Verifizierung

# 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. Komponenten-Unittest

# 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. Integrationstest

# 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

Exit-Code-Verifizierung

# 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

Zu behandelnde Randfälle

• Keine Anbieter konfiguriert: Dropdown sollte leeren Zustand mit Nachricht anzeigen "Konfigurieren Sie einen Anbieter, um verfügbare Modelle zu sehen"
• Anbieter während der Sitzung konfiguriert: ModelSelector sollte Anbieterliste beim Fokus oder bei window-focus-Event neu abrufen
• API-Schlüssel des Anbieters wird ungültig: Modelle bleiben sichtbar (serverseitige Validierung behandelt Laufzeitfehler)
• Race-Condition beim Initialisieren: Lade-Skeleton anzeigen während Anbieterkonfiguration abgerufen wird

Umgebungsspezifische Überlegungen

Docker-Bereitstellung

# 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-Installation

# 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

Konfigurationsfehler

# 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-…

Verbundene Probleme

• ERR_PROVIDER_NOT_CONFIGURED: Tritt auf, wenn versucht wird, ein Modell von einem nicht konfigurierten Anbieter zu verwenden. Passiert derzeit zur Laufzeit statt auf UI-Ebene.
• ERR_API_KEY_INVALID: Anbieter ist konfiguriert, aber Anmeldedaten sind ungültig. Bezieht sich auf die Dropdown-Anzeige von Modellen, die die Konfigurationsprüfung bestehen, aber die Authentifizierung nicht.
• ERR_MODEL_NOT_FOUND: Modell-ID-Format hat sich geändert, aber Dashboard-Modelliste ist veraltet. Kann nach OpenClaw-Versions-Upgrade auftreten.

Historischer Kontext

Zugehörige Dokumentation

• Anbieter-Konfigurationshandbuch
• Dashboard-Modell-Selektor
• openclaw config-Befehle

Debugging-Befehle

# 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