feat(web-ui): improve config panel layout and validation (#181)

* style(web-ui): align OpenClaw config panel layout

* fix(config): require model when adding provider

* fix(config): expose Claude model field in config modal

* test(config): cover model usage after provider edits

* fix(config): preserve legacy add-provider model fallback

* fix(web-ui): show inline Claude config validation

* fix(config): require provider credential fields

* fix(config): allow external Claude credentials without key

Author: awsl233777

cli.js

@@ -2081,12 +2081,22 @@ function addProviderToConfig(params = {}) {
     const name = typeof params.name === 'string' ? params.name.trim() : '';
     const url = typeof params.url === 'string' ? params.url.trim() : '';
     const key = typeof params.key === 'string' ? params.key.trim() : '';
+    const requireModel = !!params.requireModel;
+    const fallbackModel = (() => {
+        if (requireModel) return '';
+        const list = readModels();
+        return Array.isArray(list) && typeof list[0] === 'string' ? list[0].trim() : '';
+    })();
+    const model = typeof params.model === 'string' && params.model.trim()
+        ? params.model.trim()
+        : fallbackModel;
     const useTransform = !!params.useTransform;
     const allowManaged = !!params.allowManaged;
     const normalizedUrl = normalizeBaseUrl(url);
 
     if (!name) return { error: '名称不能为空' };
     if (!url) return { error: 'URL 不能为空' };
+    if (!model) return { error: '模型名称不能为空' };
     if (!isValidProviderName(name)) {
         return { error: '名称仅支持字母/数字/._-' };
     }
@@ -2163,6 +2173,7 @@ function addProviderToConfig(params = {}) {
         `wire_api = "responses"`,
         `requires_openai_auth = ${requiresOpenaiAuth ? 'true' : 'false'}`,
         `preferred_auth_method = "${safeKey}"`,
+        `models = [{ id = "${escapeTomlBasicString(model)}", name = "${escapeTomlBasicString(model)}" }]`,
         ...extraLines,
         `request_max_retries = 4`,
         `stream_max_retries = 10`,
@@ -2173,6 +2184,13 @@ function addProviderToConfig(params = {}) {
 
     try {
         writeConfig(newContent);
+        const models = readModels();
+        if (!models.includes(model)) {
+            writeModels([...models, model]);
+        }
+        const currentModels = readCurrentModels();
+        currentModels[name] = model;
+        writeCurrentModels(currentModels);
     } catch (e) {
         return { error: `写入配置失败: ${e.message}` };
     }
@@ -10866,7 +10884,7 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
                             result = buildConfigTemplateDiff(params || {});
                             break;
                         case 'add-provider':
-                            result = addProviderToConfig(params || {});
+                            result = addProviderToConfig({ ...(params || {}), requireModel: true });
                             break;
                         case 'update-provider':
                             result = updateProviderInConfig(params || {});

tests/e2e/test-claude-proxy.js

@@ -123,7 +123,8 @@ module.exports = async function testClaudeProxy(ctx) {
         const addProvider = await api('add-provider', {
             name: 'claude-proxy-e2e',
             url: upstreamUrl,
-            key: 'sk-claude-upstream'
+            key: 'sk-claude-upstream',
+            model: 'claude-proxy-e2e-model'
         });
         assert(addProvider.success === true, 'add-provider(claude-proxy-e2e) failed');
 

tests/e2e/test-config.js

@@ -292,7 +292,7 @@ preferred_auth_method = "shadow-key"
 
     // ========== Add Provider Tests ==========
     const addProviderInputUrl = `${mockProviderUrl}/`;
-    const addProvider = await api('add-provider', { name: 'e2e-api', url: addProviderInputUrl, key: 'sk-e2e-api' });
+    const addProvider = await api('add-provider', { name: 'e2e-api', url: addProviderInputUrl, key: 'sk-e2e-api', model: 'gpt-e2e-api' });
     assert(addProvider.success === true, 'add-provider failed');
 
     const apiListAfterAdd = await api('list');
@@ -301,6 +301,23 @@ preferred_auth_method = "shadow-key"
         : null;
     assert(addedProvider, 'add-provider not reflected in list');
     assert(addedProvider.url === mockProviderUrl, 'add-provider should persist normalized provider url');
+    assert(
+        Array.isArray(addedProvider.models) && addedProvider.models.some((model) => model && model.id === 'gpt-e2e-api'),
+        'add-provider should expose the entered model on the new provider'
+    );
+    const exportAfterAdd = await api('export-config', { includeKeys: true });
+    assert(exportAfterAdd.data && exportAfterAdd.data.currentModels && exportAfterAdd.data.currentModels['e2e-api'] === 'gpt-e2e-api', 'add-provider should persist entered model as provider current model');
+    assert(exportAfterAdd.data && Array.isArray(exportAfterAdd.data.models) && exportAfterAdd.data.models.includes('gpt-e2e-api'), 'add-provider should persist entered model in model list');
+    const addedProviderTemplate = await api('get-config-template', {
+        provider: 'e2e-api',
+        model: exportAfterAdd.data.currentModels['e2e-api']
+    });
+    assert(!addedProviderTemplate.error, `get-config-template should accept add-provider model: ${addedProviderTemplate.error || ''}`);
+    assert(addedProviderTemplate.template.includes('model_provider = "e2e-api"'), 'entered provider should be usable in generated config template');
+    assert(addedProviderTemplate.template.includes('model = "gpt-e2e-api"'), 'entered model should be used in generated config template');
+
+    const addProviderMissingModel = await api('add-provider', { name: 'test-empty-model', url: mockProviderUrl, key: 'sk-empty-model', model: '   ' });
+    assert(addProviderMissingModel.error, 'add-provider should reject empty model');
 
     const addProviderEmptyName = await api('add-provider', { name: '', url: mockProviderUrl });
     assert(addProviderEmptyName.error, 'add-provider should reject empty name');
@@ -318,6 +335,19 @@ preferred_auth_method = "shadow-key"
     assert(addProviderInvalidName.error, 'add-provider should reject invalid provider name');
     const addProviderInvalidUrl = await api('add-provider', { name: 'bad-url', url: 'not-a-url' });
     assert(addProviderInvalidUrl.error, 'add-provider should reject invalid provider url');
+
+    const cliAddBridgeNoModel = runSync(node, [cliPath, 'add', 'legacy-bridge-no-model', mockProviderUrl, 'sk-legacy-bridge', '--bridge', 'openai'], { env });
+    assert(
+        cliAddBridgeNoModel.status === 0,
+        `CLI add --bridge without model should remain backward compatible: ${cliAddBridgeNoModel.stderr || cliAddBridgeNoModel.stdout}`
+    );
+    const exportAfterLegacyBridgeAdd = await api('export-config', { includeKeys: true });
+    assert(
+        exportAfterLegacyBridgeAdd.data
+            && exportAfterLegacyBridgeAdd.data.currentModels
+            && exportAfterLegacyBridgeAdd.data.currentModels['legacy-bridge-no-model'],
+        'legacy CLI add --bridge should initialize a fallback current model'
+    );
     const cliAddInvalidUrl = runSync(node, [cliPath, 'add', 'cli-bad-url', 'not-a-url'], { env });
     assert(cliAddInvalidUrl.status !== 0, 'cli add should reject invalid provider url');
     const apiListAfterInvalidName = await api('list');
@@ -428,7 +458,8 @@ preferred_auth_method = "shadow-key"
         const legacyAddDup = await legacyApi('add-provider', {
             name: 'foo.bar',
             url: 'https://dup.example.com/v1',
-            key: 'sk-dup'
+            key: 'sk-dup',
+            model: 'gpt-dup'
         });
         assert(legacyAddDup.error, 'legacy duplicate add-provider should be rejected');
         const legacyConfigAfterDup = fs.readFileSync(legacyConfigPath, 'utf-8');

tests/e2e/test-messages.js

@@ -298,7 +298,7 @@ module.exports = async function testMessages(ctx) {
     assert(resetConfigResult.backup !== undefined || resetConfigResult.success !== undefined || resetConfigResult.error, 'reset-config should return backup/success or error');
 
     // ========== 添加提供商测试 ==========
-    const addProviderResult = await api('add-provider', { name: 'test-duplicate', url: 'http://test.com', key: 'test-key' });
+    const addProviderResult = await api('add-provider', { name: 'test-duplicate', url: 'http://test.com', key: 'test-key', model: 'gpt-test-duplicate' });
     assert(addProviderResult.success !== undefined || addProviderResult.error, 'add-provider should return success or error');
 
     const addProviderDupName = await api('add-provider', { name: '', url: 'http://test.com' });