feat(config): split profile into Personal Info + Preferences sections, centered

- Profile panel now shows two distinct cards with section titles
- Personal Info (name, pseudo, email, languages) and Preferences
  (editor, shell, theme, etc.) are visually separated
- Content centered with max-width 540px
- Added i18n keys for section titles

💘 Generated with Crush

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

internal/api/handlers_info.go

@@ -477,25 +477,16 @@ func (s *Server) handleProvidersQuota(w http.ResponseWriter, r *http.Request) {
 				}
 			}
 		case "zai":
-			if p.APIKey == "" {
-				q.Error = "no API key"
-				results = append(results, q)
-				continue
-			}
-			req, _ := http.NewRequest("GET", "https://api.z.ai/api/monitor/usage/quota/limit", nil)
-			req.Header.Set("Authorization", "Bearer "+p.APIKey)
-			req.Header.Set("Accept", "application/json")
-			resp, err := client.Do(req)
-			if err != nil {
-				q.Error = err.Error()
+			// Z.AI (GLM) est utilisé uniquement via Crush, pas de quota check externe
+			q.Healthy = true
+			q.Data = map[string]interface{}{"note": "crush-only"}
+		case "claude", "anthropic":
+			// Claude Code n'a pas d'API externe, vérifier l'installation
+			claudePath := "/usr/bin/claude"
+			if _, err := os.Stat(claudePath); err == nil {
+				q.Healthy = true
 			} else {
-				body, _ := io.ReadAll(resp.Body)
-				resp.Body.Close()
-				var data map[string]interface{}
-				if json.Unmarshal(body, &data) == nil {
-					q.Data = data
-					q.Healthy = true
-				}
+				q.Error = "claude code not installed"
 			}
 		default:
 			q.Error = "quota not supported"

web/src/components/Config.jsx

@@ -220,28 +220,47 @@ function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEdi
 
   if (!profile) {
     return (
-      <div className="config-card">
-        <div className="empty-state">{t('config.loadingProfile')}</div>
+      <div className="config-profile-center">
+        <div className="config-card">
+          <div className="empty-state">{t('config.loadingProfile')}</div>
+        </div>
       </div>
     )
   }
 
+  const personalKeys = Object.entries(profile).filter(([k, v]) => k !== 'preferences' && typeof v !== 'object')
+  const personalObj = Object.fromEntries(personalKeys)
+  const preferences = profile.preferences || null
+
   return (
-    <div className="config-card">
-      <RenderFields obj={profile} path="" editing={editProfile} onChange={updateField} t={t} />
-      <div className="config-card-actions">
-        {editProfile ? (
-          <>
-            <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
-            <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
-          </>
+    <div className="config-profile-center">
+      <div className="config-card">
+        <div className="section-title">{t('config.profileInfo') || 'Informations personnelles'}</div>
+        <RenderFields obj={personalObj} path="" editing={editProfile} onChange={updateField} t={t} />
+      </div>
+      <div className="config-card">
+        <div className="section-title">{t('config.profilePrefs') || 'Préférences'}</div>
+        {preferences ? (
+          <RenderFields obj={preferences} path="preferences" editing={editProfile} onChange={updateField} t={t} />
         ) : (
-          <button className="primary sm" onClick={() => {
-            setProfileForm(config.profile ? JSON.parse(JSON.stringify(config.profile)) : {})
-            setEditProfile(true)
-          }}>{t('config.editProfile')}</button>
+          <div className="config-card-row"><span className="config-card-value" style={{ color: 'var(--text-disabled)' }}>—</span></div>
         )}
       </div>
+      <div className="config-card">
+        <div className="config-card-actions" style={{ justifyContent: 'center' }}>
+          {editProfile ? (
+            <>
+              <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
+              <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
+            </>
+          ) : (
+            <button className="primary sm" onClick={() => {
+              setProfileForm(config.profile ? JSON.parse(JSON.stringify(config.profile)) : {})
+              setEditProfile(true)
+            }}>{t('config.editProfile')}</button>
+          )}
+        </div>
+      </div>
     </div>
   )
 }
@@ -249,19 +268,10 @@ function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEdi
 function RenderFields({ obj, path, editing, onChange, t }) {
   if (!obj || typeof obj !== 'object') return null
 
-  return Object.entries(obj).map(([key, value]) => {
+  return Object.entries(obj).filter(([, v]) => v === null || typeof v !== 'object').map(([key, value]) => {
     const fieldPath = path ? `${path}.${key}` : key
     const label = getFieldLabel(key, t)
 
-    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-      return (
-        <div key={key} className="config-card-group">
-          <span className="config-card-group-label">{label}</span>
-          <RenderFields obj={value} path={fieldPath} editing={editing} onChange={onChange} t={t} />
-        </div>
-      )
-    }
-
     if (editing) {
       if (typeof value === 'boolean') {
         return (
@@ -353,8 +363,7 @@ function PanelProviders({ providers, editProvider, providerForm, setProviderForm
             <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>}
+                {p.active && <span className="badge ok" style={{ marginLeft: 6 }}>active</span>}
                 {isValidationTarget && validationStatus?.valid && <span className="badge ok">{t('config.keyValid')}</span>}
                 {isValidationTarget && !validationStatus?.valid && <span className="badge error">{validationStatus?.error}</span>}
               </div>

web/src/components/Studio.jsx

@@ -285,6 +285,8 @@ export default function Studio({ api }) {
   const [streamToolCalls, setStreamToolCalls] = useState([])
   const [loaded, setLoaded] = useState(false)
   const [tokenInfo, setTokenInfo] = useState({ used: 0, max: 100000, summarizeAt: 80000 })
+  const [contextCollapsed, setContextCollapsed] = useState(false)
+  const [messagesCollapsed, setMessagesCollapsed] = useState(false)
   const messagesEnd = useRef(null)
   const textareaRef = useRef(null)
   const abortRef = useRef(null)
@@ -336,12 +338,18 @@ export default function Studio({ api }) {
 
   const handleSummarize = useCallback(async () => {
     setMessages(prev => [...prev, { id: Date.now().toString(), role: 'system', content: 'Résumé de la conversation en cours...', time: new Date().toISOString() }])
+    setContextCollapsed('animating')
     try {
       const data = await api.summarizeChat()
       setTokenInfo(prev => ({ ...prev, used: data.tokens || 0 }))
-      setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: 'system', content: '✓ Conversation résumée automatiquement. Le contexte a été compressé.', time: new Date().toISOString() }])
+      setTimeout(() => {
+        setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: 'system', content: '✓ Conversation résumée automatiquement. Le contexte a été compressé.', time: new Date().toISOString(), compressed: true }])
+        setContextCollapsed(true)
+        setMessagesCollapsed(true)
+      }, 600)
     } catch (err) {
       setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: 'system', content: `Erreur de résumé: ${err.message}`, time: new Date().toISOString() }])
+      setContextCollapsed(false)
     }
   }, [api])
 
@@ -396,7 +404,7 @@ export default function Studio({ api }) {
     if (text === '/model') {
       api.getProviders().then(data => {
         const active = data.providers?.find(p => p.active)
-        const modelMsg = active ? `Provider: ${active.name}\nModèle: ${active.model}` : 'Aucun provider actif configuré'
+        const modelMsg = active ? active.name : 'Aucun provider actif configuré'
         setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: modelMsg, time: new Date().toISOString() }])
       }).catch(() => {
         setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: 'Erreur: impossible de récupérer les providers', time: new Date().toISOString() }])
@@ -525,6 +533,34 @@ export default function Studio({ api }) {
     }
   }
 
+  const handleToggleCollapsed = useCallback(() => {
+    setMessagesCollapsed(prev => !prev)
+  }, [])
+
+  const renderMessages = () => {
+    if (messagesCollapsed && messages.length > 4) {
+      const visibleCount = 4
+      const hiddenCount = messages.length - visibleCount
+      return (
+        <>
+          {messages.slice(0, visibleCount).map(msg => (
+            <FeedItem key={msg.id} msg={msg} />
+          ))}
+          <div className="feed-collapsed-messages" onClick={handleToggleCollapsed}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+            </svg>
+            <span className="feed-collapsed-text">{hiddenCount} messages antérieurs compressés</span>
+            <span className="feed-collapsed-count">clic pour développer</span>
+          </div>
+        </>
+      )
+    }
+    return messages.map(msg => (
+      <FeedItem key={msg.id} msg={msg} />
+    ))
+  }
+
   if (!loaded) {
     return (
       <div className="studio-feed-layout">
@@ -540,27 +576,31 @@ export default function Studio({ api }) {
   return (
     <div className="studio-feed-layout">
       <div className="studio-feed">
-        {messages.map(msg => (
-          <FeedItem key={msg.id} msg={msg} />
-        ))}
+        {renderMessages()}
         {(streaming || streamThinking || loading || streamToolCalls.length > 0) && (
           <StreamingItem content={streaming} thinking={streamThinking} toolCalls={streamToolCalls} />
         )}
-        <div ref={messagesEnd} />
+        <div ref={messagesEnd} style={{ height: '24px' }} />
       </div>
 
       <div className="studio-input-area">
-        <div className="studio-token-bar">
-          <div className="studio-token-track">
+        <div className={`studio-token-bar ${contextCollapsed === true ? 'compressed' : ''}`}>
+          <div className={`studio-token-track ${contextCollapsed === true ? 'compressed' : ''}`}>
             <div
-              className={`studio-token-fill ${tokenInfo.used >= tokenInfo.summarizeAt ? 'warn' : ''}`}
+              className={`studio-token-fill ${tokenInfo.used >= tokenInfo.summarizeAt ? 'warn' : ''} ${contextCollapsed === true ? 'compressed' : ''} ${contextCollapsed === 'animating' ? 'animating' : ''}`}
               style={{ width: `${Math.min(100, (tokenInfo.used / tokenInfo.max) * 100)}%` }}
             />
           </div>
-          <span className="studio-token-text">
+          <span className={`studio-token-text ${contextCollapsed === true ? 'compressed' : ''}`}>
             {(tokenInfo.used / 1000).toFixed(1)}k / {(tokenInfo.max / 1000).toFixed(0)}k tokens
-            {tokenInfo.used >= tokenInfo.summarizeAt && ' · résumé automatique déclenché'}
+            {contextCollapsed === true && ' · compressé'}
+            {tokenInfo.used >= tokenInfo.summarizeAt && contextCollapsed !== true && ' · résumé auto.'}
           </span>
+          {contextCollapsed === true && (
+            <button className="ghost sm" onClick={handleToggleCollapsed} style={{ marginLeft: '8px', fontSize: '10px' }}>
+              voir plus
+            </button>
+          )}
         </div>
         <div className="studio-input-row">
           <textarea

web/src/i18n/en.js

@@ -182,6 +182,8 @@ const en = {
     installed: 'Installed',
     missing: 'Missing',
     editProfile: 'Edit',
+    profileInfo: 'Personal Info',
+    profilePrefs: 'Preferences',
     cancel: 'Cancel',
     editProvider: 'Configure',
     validateKey: 'Validate',

web/src/i18n/fr.js

@@ -182,6 +182,8 @@ const fr = {
     installed: 'Install\u00e9',
     missing: 'Manquant',
     editProfile: 'Modifier',
+    profileInfo: 'Informations personnelles',
+    profilePrefs: 'Préférences',
     editProvider: 'Configurer',
     validateKey: 'Valider',
     validating: 'V\u00e9rification...',

web/src/styles/global.css

@@ -435,6 +435,10 @@ input::placeholder { color: var(--text-disabled); }
 
 .config-panel-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
 .config-panel-body { flex: 1; overflow-y: auto; padding: 16px 28px 28px; }
+.config-profile-center {
+  max-width: 540px; margin: 0 auto; width: 100%;
+  display: flex; flex-direction: column; gap: 12px;
+}
 
 .config-card {
   background: var(--bg-card); border: 1px solid var(--border);
@@ -622,6 +626,7 @@ input::placeholder { color: var(--text-disabled); }
 .dash-cmd-text {
   font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  flex: 1; min-width: 0;
 }
 
 /* Services */
@@ -804,6 +809,12 @@ input::placeholder { color: var(--text-disabled); }
 .studio-token-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s, background 0.3s; }
 .studio-token-fill.warn { background: var(--warning); }
 .studio-token-fill.compressed { height: 2px; }
+.studio-token-fill.animating { animation: compress-pulse 0.6s ease-in-out; }
+@keyframes compress-pulse {
+  0% { height: 3px; opacity: 1; }
+  50% { height: 5px; opacity: 0.8; background: var(--accent-light); }
+  100% { height: 2px; opacity: 1; }
+}
 .studio-token-text { font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); white-space: nowrap; }
 .studio-token-text.compressed { font-size: 9px; }
 .studio-token-track.compressed { height: 2px; }