fix(onboarding): require fields before advancing steps

- Validate each step before allowing goNext
- Show required error message on name step if empty
- Clear error on input change

💘 Generated with Crush

Assisted-by: MiniMax-M2.7 via Crush <crush@charm.land>

internal/api/server.go

@@ -48,6 +48,8 @@ func (s *Server) routes() {
 	s.mux.HandleFunc("/api/mcp/configure", s.handleMCPConfigure)
 	s.mux.HandleFunc("/api/config/profile", s.handleSaveProfile)
 	s.mux.HandleFunc("/api/config/provider", s.handleSaveProvider)
+	s.mux.HandleFunc("/api/config/reset", s.handleResetConfig)
+	s.mux.HandleFunc("/api/starship/apply-theme", s.handleApplyStarshipTheme)
 	s.mux.HandleFunc("/api/providers/validate", s.handleValidateProvider)
 	s.mux.HandleFunc("/api/update/run", s.handleRunUpdate)
 	s.mux.HandleFunc("/api/chat", s.handleChat)

web/src/api/client.js

@@ -28,6 +28,8 @@ 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) }),
+  resetConfig: () => request('/config/reset', { method: 'POST' }),
+  applyStarshipTheme: (theme) => request('/starship/apply-theme', { method: 'POST', body: JSON.stringify({ theme }) }),
   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 }) }),

web/src/components/Config.jsx

@@ -6,7 +6,6 @@ import { getLayoutList } from '../i18n/keyboards'
 const PANELS = [
   { id: 'profile', icon: User },
   { id: 'providers', icon: Brain },
-  { id: 'terminal', icon: Monitor },
   { id: 'updates', icon: RefreshCw },
   { id: 'locale', icon: Globe },
   { id: 'skills', icon: Wrench },
@@ -26,7 +25,7 @@ export default function Config({ api }) {
   const [editProfile, setEditProfile] = useState(false)
   const [editProvider, setEditProvider] = useState(null)
   const [profileForm, setProfileForm] = useState({})
-  const [providerForm, setProviderForm] = useState({})
+  const [providerForm, setProviderForm] = useState({}) // keyed by provider name
   const [toast, setToast] = useState(null)
 
 
@@ -108,9 +107,11 @@ export default function Config({ api }) {
     }
   }
 
-  const handleSaveProvider = async () => {
+  const handleSaveProvider = async (name) => {
+    const form = providerForm[name]
+    if (!form) return
     try {
-      await api.saveProvider(providerForm)
+      await api.saveProvider({ name, ...form })
       setEditProvider(null)
       loadData()
       showToast(t('config.saved'))
@@ -120,12 +121,15 @@ export default function Config({ api }) {
   }
 
   const openProviderEdit = (p) => {
-    setProviderForm({
-      name: p.name,
-      api_key: p.apiKey || '',
-      model: p.model || '',
-      base_url: p.baseURL || '',
-    })
+    setProviderForm(prev => ({
+      ...prev,
+      [p.name]: {
+        name: p.name,
+        api_key: p.apiKey || '',
+        model: p.model || '',
+        base_url: p.baseURL || '',
+      },
+    }))
     setEditProvider(p.name)
   }
 
@@ -303,23 +307,26 @@ function PanelProviders({ providers, editProvider, providerForm, setProviderForm
                     className="config-form-input"
                     type="password"
                     placeholder={t('config.tokenPlaceholder')}
-                    value={isEditing ? providerForm.api_key : ''}
+                    value={isEditing ? (providerForm[p.name]?.api_key || '') : ''}
                     onChange={e => {
                       if (!isEditing) openProviderEdit(p)
-                      setProviderForm(f => ({ ...f, api_key: e.target.value }))
+                      setProviderForm(prev => ({
+                        ...prev,
+                        [p.name]: { ...(prev[p.name] || {}), 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)}
+                    disabled={validating === p.name || !providerForm[p.name]?.api_key}
+                    onClick={() => handleValidate(p.name, providerForm[p.name]?.api_key, providerForm[p.name]?.model, providerForm[p.name]?.base_url)}
                   >
                     {validating === p.name ? t('config.validating') : t('config.validateKey')}
                   </button>
                   {isValidationTarget && validationStatus?.valid && (
-                    <button className="sm" onClick={handleSaveProvider}>{t('config.save')}</button>
+                    <button className="sm" onClick={() => handleSaveProvider(p.name)}>{t('config.save')}</button>
                   )}
                 </div>
               </div>

web/src/components/OnboardingWizard.jsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { Sparkles, ArrowRight } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { Sparkles, ArrowRight, ArrowLeft } from 'lucide-react'
 import { useI18n, LANGUAGES } from '../i18n'
 import { getLayoutList } from '../i18n/keyboards'
 
@@ -24,16 +24,54 @@ export default function OnboardingWizard({ api, onComplete }) {
     editor: '',
   })
   const [saving, setSaving] = useState(false)
+  const [error, setError] = useState(null)
+  const [requiredError, setRequiredError] = useState(false)
 
   const current = STEPS[step]
   const layouts = getLayoutList()
 
   const goNext = () => {
-    if (step < STEPS.length - 1) setStep(step + 1)
+    if (step < STEPS.length - 1) {
+      if (!canProceed) { setRequiredError(true); return }
+      setRequiredError(false)
+      setStep(step + 1)
+    }
   }
 
+  const canProceed = (() => {
+    switch (current.key) {
+      case 'welcome': return true
+      case 'name': return answers.name.trim().length > 0
+      case 'language': return !!answers.language
+      case 'keyboard': return !!answers.keyboard
+      case 'editor': return true
+      case 'done': return true
+      default: return true
+    }
+  })()
+
+  const goPrev = () => {
+    if (step > 0) setStep(step - 1)
+  }
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === 'Escape') { goPrev(); return }
+      if (e.key === 'Enter' && current.key !== 'done') { e.preventDefault(); goNext() }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [step, current])
+
+  useEffect(() => {
+    if (current.key === 'done' && !saving) {
+      handleSave()
+    }
+  }, [step])
+
   const handleSave = async () => {
     setSaving(true)
+    setError(null)
     try {
       await api.saveProfile({
         name: answers.name,
@@ -46,9 +84,9 @@ export default function OnboardingWizard({ api, onComplete }) {
       })
       onComplete()
     } catch (err) {
-      console.error(err)
+      setError(err.message || 'Erreur lors de la sauvegarde')
+      setSaving(false)
     }
-    setSaving(false)
   }
 
   return (
@@ -82,9 +120,10 @@ export default function OnboardingWizard({ api, onComplete }) {
                 className="onboarding-input"
                 placeholder="Votre nom..."
                 value={answers.name}
-                onChange={e => setAnswers(a => ({ ...a, name: e.target.value }))}
+                onChange={e => { setAnswers(a => ({ ...a, name: e.target.value })); setRequiredError(false) }}
                 autoFocus
               />
+              {requiredError && <div className="onboarding-required">Veuillez entrer votre nom</div>}
             </div>
           )}
 
@@ -149,24 +188,46 @@ export default function OnboardingWizard({ api, onComplete }) {
 
           {current.key === 'done' && (
             <div className="onboarding-step">
-              <div className="onboarding-title">C'est parti ! 🚀</div>
-              <div className="onboarding-desc">
-                Votre profil est configur\u00e9. Vous pouvez toujours ajuster les param\u00e8tres dans l'onglet Configuration.
-              </div>
+              {saving ? (
+                <>
+                  <div className="onboarding-title">Configuration en cours...</div>
+                  <div className="onboarding-desc">Sauvegarde de vos préférences.</div>
+                </>
+              ) : error ? (
+                <>
+                  <div className="onboarding-title" style={{ color: 'var(--error)' }}>Erreur</div>
+                  <div className="onboarding-desc" style={{ color: 'var(--error)' }}>{error}</div>
+                  <button className="primary" style={{ alignSelf: 'flex-start', marginTop: 8 }} onClick={() => handleSave()}>Réessayer</button>
+                </>
+              ) : (
+                <>
+                  <div className="onboarding-title">C'est parti ! 🚀</div>
+                  <div className="onboarding-desc">
+                    Votre profil est configuré. Vous pouvez toujours ajuster les paramètres dans l'onglet Configuration.
+                  </div>
+                </>
+              )}
             </div>
           )}
         </div>
 
         <div className="onboarding-footer">
-          {current.key === 'done' ? (
-            <button className="primary" onClick={handleSave} disabled={saving}>
-              {saving ? '...' : 'Commencer'}
+          {step > 0 && step < STEPS.length - 1 && (
+            <button className="ghost" onClick={goPrev}>
+              <ArrowLeft size={14} /> Précédent
             </button>
-          ) : (
+          )}
+          <div style={{ flex: 1 }} />
+          {step < STEPS.length - 1 && (
             <button className="primary" onClick={goNext}>
               Suivant <ArrowRight size={14} />
             </button>
           )}
+          {step === STEPS.length - 1 && !saving && !error && (
+            <button className="primary" onClick={handleSave}>
+              Commencer
+            </button>
+          )}
         </div>
       </div>
 
@@ -218,6 +279,9 @@ export default function OnboardingWizard({ api, onComplete }) {
           padding: 16px 20px; border-top: 1px solid var(--border);
           background: var(--bg-surface);
         }
+        .onboarding-required {
+          font-size: 12px; color: var(--error); margin-top: 4px;
+        }
       `}</style>
     </div>
   )