feat: add API key validation flow for AI provider config

- Add POST /api/providers/validate backend endpoint that sends a test
  request to the provider's chat/completions API to verify the key
- Add validateProvider to frontend API client
- Redesign PanelProviders: show token input inline with Validate button,
  display valid/invalid badge after validation, Save only appears after
  successful validation
- Add i18n keys (EN/FR) for validation flow

💾 Generated with Crush

Assisted-by: GLM-5-Turbo via Crush <crush@charm.land>

web/src/api/client.js

@@ -28,6 +28,7 @@ const api = {
   savePreferences: (prefs) => request('/preferences', { method: 'PUT', body: JSON.stringify(prefs) }),
   saveProfile: (profile) => request('/config/profile', { method: 'PUT', body: JSON.stringify(profile) }),
   saveProvider: (provider) => request('/config/provider', { method: 'PUT', body: JSON.stringify(provider) }),
+  validateProvider: (provider) => request('/providers/validate', { method: 'POST', body: JSON.stringify(provider) }),
   runUpdate: (tool) => request('/update/run', { method: 'POST', body: JSON.stringify({ tool: tool || '' }) }),
   runCommand: (command, cwd) => request('/terminal', { method: 'POST', body: JSON.stringify({ command, cwd }) }),
   getTerminalSessions: () => request('/terminal/sessions'),

web/src/components/Config.jsx

@@ -252,48 +252,79 @@ function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEdi
 }
 
 function PanelProviders({ providers, editProvider, providerForm, setProviderForm, setEditProvider, openProviderEdit, handleSaveProvider, api, loadData, t }) {
+  const [validating, setValidating] = useState(null)
+  const [validationStatus, setValidationStatus] = useState(null)
+
+  const handleValidate = async (name, apiKey, model, baseUrl) => {
+    setValidating(name)
+    setValidationStatus(null)
+    try {
+      await api.validateProvider({ name, api_key: apiKey, model, base_url: baseUrl })
+      setValidationStatus({ provider: name, valid: true })
+    } catch (err) {
+      const msg = err.message || ''
+      if (msg.includes('invalid_api_key')) {
+        setValidationStatus({ provider: name, valid: false, error: t('config.keyInvalid') })
+      } else {
+        setValidationStatus({ provider: name, valid: false, error: `${t('config.connectionFailed')}: ${msg}` })
+      }
+    }
+    setValidating(null)
+  }
+
   return (
     <div className="config-providers-list">
-      {providers.map((p, i) => (
-        <div key={i} className="config-card provider-card-v2">
-          <div className="provider-card-top">
-            <div className="provider-card-identity">
-              <span className="provider-card-name">{p.name}</span>
-              {p.active && <span className="badge accent">{t('config.active')}</span>}
-            </div>
-            <div className="provider-card-actions">
-              {editProvider !== p.name && (
-                <button className="ghost sm" onClick={() => openProviderEdit(p)}>{t('config.editProvider')}</button>
-              )}
-              {!p.active && editProvider !== p.name && (
-                <button className="sm" onClick={async () => {
-                  await api.saveProvider({ name: p.name, active: true })
-                  loadData()
-                }}>{t('config.activate')}</button>
-              )}
-            </div>
-          </div>
-
-          {editProvider !== p.name ? (
-            <div className="provider-card-meta">
-              <span className="mono">{p.model || '—'}</span>
-              <span style={{ color: p.apiKey ? 'var(--success)' : 'var(--error)' }}>
-                {p.apiKey ? t('config.keyConfigured') : t('config.noKey')}
-              </span>
-            </div>
-          ) : (
-            <div className="provider-card-form">
-              <FormInput label={t('config.apiKey')} value={providerForm.api_key} onChange={v => setProviderForm(f => ({ ...f, api_key: v }))} type="password" />
-              <FormInput label={t('config.model')} value={providerForm.model} onChange={v => setProviderForm(f => ({ ...f, model: v }))} />
-              <FormInput label={t('config.baseUrl')} value={providerForm.base_url} onChange={v => setProviderForm(f => ({ ...f, base_url: v }))} />
-              <div className="config-card-actions">
-                <button className="primary sm" onClick={handleSaveProvider}>{t('config.save')}</button>
-                <button className="ghost sm" onClick={() => setEditProvider(null)}>{t('config.cancel')}</button>
+      <div className="provider-setup-hint">{t('config.setupDescription')}</div>
+      {providers.map((p, i) => {
+        const isEditing = editProvider === p.name
+        const isValidationTarget = validationStatus?.provider === p.name
+        return (
+          <div key={i} className="config-card provider-card-v2">
+            <div className="provider-card-top">
+              <div className="provider-card-identity">
+                <span className="provider-card-name">{p.name}</span>
+                {p.apiKey && <span className="badge ok">{t('config.keyConfigured')}</span>}
+                {!p.apiKey && <span className="badge error">{t('config.noKey')}</span>}
+                {isValidationTarget && validationStatus.valid && <span className="badge ok">{t('config.keyValid')}</span>}
+                {isValidationTarget && !validationStatus.valid && <span className="badge error">{validationStatus.error}</span>}
               </div>
             </div>
-          )}
-        </div>
-      ))}
+
+            <div className="provider-card-form">
+              <div className="provider-setup-token-row">
+                <div className="provider-setup-token-input">
+                  <label className="config-form-label">{t('config.apiKey')}</label>
+                  <input
+                    className="config-form-input"
+                    type="password"
+                    placeholder={t('config.tokenPlaceholder')}
+                    value={isEditing ? providerForm.api_key : ''}
+                    onChange={e => {
+                      if (!isEditing) openProviderEdit(p)
+                      setProviderForm(f => ({ ...f, api_key: e.target.value }))
+                    }}
+                  />
+                </div>
+                <div className="provider-setup-token-actions">
+                  <button
+                    className="sm primary"
+                    disabled={validating === p.name || !providerForm.api_key}
+                    onClick={() => handleValidate(p.name, providerForm.api_key, providerForm.model, providerForm.base_url)}
+                  >
+                    {validating === p.name ? t('config.validating') : t('config.validateKey')}
+                  </button>
+                  {isValidationTarget && validationStatus.valid && (
+                    <button className="sm" onClick={handleSaveProvider}>{t('config.save')}</button>
+                  )}
+                </div>
+              </div>
+              <div className="provider-card-meta" style={{ marginTop: 8 }}>
+                <span className="mono">{p.model || '—'}</span>
+              </div>
+            </div>
+          </div>
+        )
+      })}
     </div>
   )
 }

web/src/i18n/en.js

@@ -166,6 +166,14 @@ const en = {
     editProfile: 'Edit',
     cancel: 'Cancel',
     editProvider: 'Configure',
+    validateKey: 'Validate',
+    validating: 'Validating...',
+    keyValid: 'Valid key',
+    keyInvalid: 'Invalid key',
+    connectionFailed: 'Connection failed',
+    enterToken: 'Enter your API token for {provider}',
+    tokenPlaceholder: 'sk-...',
+    setupDescription: 'Configure your AI provider token to use the assistant.',
   },
 }
 

web/src/i18n/fr.js

@@ -165,6 +165,14 @@ const fr = {
     missing: 'Manquant',
     editProfile: 'Modifier',
     editProvider: 'Configurer',
+    validateKey: 'Valider',
+    validating: 'Vérification...',
+    keyValid: 'Clé valide',
+    keyInvalid: 'Clé invalide',
+    connectionFailed: 'Connexion échouée',
+    enterToken: 'Entrez votre token API pour {provider}',
+    tokenPlaceholder: 'sk-...',
+    setupDescription: 'Configurez le token de votre fournisseur IA pour utiliser l\'assistant.',
     cancel: 'Annuler',
   },
 }

web/src/styles/global.css

@@ -475,6 +475,15 @@ input::placeholder { color: var(--text-disabled); }
 .provider-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 8px; }
 .provider-card-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
 
+.provider-setup-hint {
+  font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px;
+  padding: 10px 14px; border-radius: var(--radius); background: var(--bg-surface);
+  border-left: 3px solid var(--accent-dim);
+}
+.provider-setup-token-row { display: flex; gap: 12px; align-items: flex-end; }
+.provider-setup-token-input { flex: 1; }
+.provider-setup-token-actions { display: flex; gap: 8px; flex-shrink: 0; padding-bottom: 1px; }
+
 .config-update-controls {
   display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
 }