refactor: redesign Config as settings window with sidebar panels, remove system overview from Dashboard

- Config: sidebar navigation with 5 panels (Profile, AI Providers, Updates, Locale, Skills)
- Dashboard: remove duplicated system overview section, keep workflows and activity log
- New CSS for config window layout, cards, provider cards, update rows
- Add i18n panel keys (FR/EN)

💾 Generated with Crush

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

web/src/api/client.js

@@ -33,6 +33,8 @@ const api = {
   getTerminalSessions: () => request('/terminal/sessions'),
   addSSHConnection: (conn) => request('/terminal/sessions', { method: 'POST', body: JSON.stringify(conn) }),
   deleteSSHConnection: (name) => request(`/terminal/sessions/${encodeURIComponent(name)}`, { method: 'DELETE' }),
+  getChatHistory: () => request('/chat/history'),
+  clearChat: () => request('/chat/clear', { method: 'POST' }),
   sendChat: (message, stream = true) => {
     if (!stream) {
       return request('/chat', { method: 'POST', body: JSON.stringify({ message, stream: false }) })

web/src/components/Config.jsx

@@ -1,9 +1,19 @@
 import { useState, useEffect, useCallback } from 'react'
+import { User, Brain, RefreshCw, Globe, Wrench } from 'lucide-react'
 import { useI18n, LANGUAGES } from '../i18n'
 import { getLayoutList } from '../i18n/keyboards'
 
+const PANELS = [
+  { id: 'profile', icon: User },
+  { id: 'providers', icon: Brain },
+  { id: 'updates', icon: RefreshCw },
+  { id: 'locale', icon: Globe },
+  { id: 'skills', icon: Wrench },
+]
+
 export default function Config({ api }) {
   const { t, language, keyboard, setLanguage, setKeyboard } = useI18n()
+  const [activePanel, setActivePanel] = useState('profile')
   const [config, setConfig] = useState(null)
   const [providers, setProviders] = useState([])
   const [skillList, setSkillList] = useState([])
@@ -119,132 +129,238 @@ export default function Config({ api }) {
   const missingCount = tools.filter(t => !t.installed).length
 
   return (
-    <div className="config-layout">
+    <div className="config-window">
       {toast && <div className="config-toast">{toast}</div>}
 
-      <div className="config-section">
-        <div className="config-section-title">{t('config.systemUpdates')}</div>
-        <div className="config-actions-row">
-          <button className="sm" onClick={handleCheckUpdates} disabled={checking}>
-            {checking ? t('config.checking') : t('config.checkUpdates')}
-          </button>
-          {needsUpdateCount > 0 && (
-            <button className="sm primary" onClick={handleUpdateAll} disabled={updating === '__all__'}>
-              {updating === '__all__' ? t('config.updating') : `${t('config.updateAll')} (${needsUpdateCount})`}
-            </button>
+      <div className="config-sidebar">
+        {PANELS.map(p => {
+          const Icon = p.icon
+          return (
+            <div
+              key={p.id}
+              className={`config-sidebar-item ${activePanel === p.id ? 'active' : ''}`}
+              onClick={() => setActivePanel(p.id)}
+            >
+              <Icon size={16} />
+              <span>{t(`config.panels.${p.id}`)}</span>
+            </div>
+          )
+        })}
+      </div>
+
+      <div className="config-panel-area">
+        <div className="config-panel-header">
+          <h2 className="config-panel-title">{t(`config.panels.${activePanel}`)}</h2>
+        </div>
+
+        <div className="config-panel-body">
+          {activePanel === 'profile' && (
+            <PanelProfile
+              config={config} editProfile={editProfile}
+              profileForm={profileForm} setProfileForm={setProfileForm}
+              setEditProfile={setEditProfile} handleSaveProfile={handleSaveProfile}
+              t={t}
+            />
+          )}
+          {activePanel === 'providers' && (
+            <PanelProviders
+              providers={providers} editProvider={editProvider}
+              providerForm={providerForm} setProviderForm={setProviderForm}
+              setEditProvider={setEditProvider} openProviderEdit={openProviderEdit}
+              handleSaveProvider={handleSaveProvider} api={api} loadData={loadData}
+              t={t}
+            />
+          )}
+          {activePanel === 'updates' && (
+            <PanelUpdates
+              updates={updates} tools={tools}
+              checking={checking} updating={updating}
+              needsUpdateCount={needsUpdateCount}
+              installedCount={installedCount} missingCount={missingCount}
+              handleCheckUpdates={handleCheckUpdates}
+              handleUpdateTool={handleUpdateTool}
+              handleUpdateAll={handleUpdateAll}
+              t={t}
+            />
+          )}
+          {activePanel === 'locale' && (
+            <PanelLocale
+              language={keyboard} layouts={layouts}
+              setLanguage={setLanguage} setKeyboard={setKeyboard}
+              t={t}
+            />
+          )}
+          {activePanel === 'skills' && (
+            <PanelSkills skillList={skillList} t={t} />
           )}
         </div>
-        <div className="config-stats">
-          <span className="badge ok">{installedCount} {t('config.installed')}</span>
-          {missingCount > 0 && <span className="badge error">{missingCount} {t('config.missing')}</span>}
-          {needsUpdateCount > 0 && <span className="badge warn">{needsUpdateCount} {t('config.needsUpdate')}</span>}
-        </div>
-
-        {updates.length === 0 ? (
-          <div className="empty-state">{t('config.noUpdates')}</div>
-        ) : (
-          <div className="config-update-list">
-            {updates.map((u, i) => (
-              <div key={i} className="config-update-row">
-                <div className="config-update-info">
-                  <span className="config-update-name">{u.tool}</span>
-                  <span className="config-update-versions">
-                    {u.needsUpdate ? (
-                      <>{u.current} → <span style={{ color: 'var(--warning)' }}>{u.latest}</span></>
-                    ) : (
-                      <span style={{ color: 'var(--success)' }}>{u.current}</span>
-                    )}
-                  </span>
-                </div>
-                {u.needsUpdate && (
-                  <button
-                    className="sm"
-                    onClick={() => handleUpdateTool(u.tool)}
-                    disabled={updating === u.tool}
-                  >
-                    {updating === u.tool ? t('config.updating') : t('config.updateTool')}
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
       </div>
+    </div>
+  )
+}
 
-      <div className="config-section">
-        <div className="config-section-title">
-          {t('config.profile')}
-          <button className="ghost sm" onClick={() => setEditProfile(!editProfile)}>
-            {editProfile ? t('config.cancel') : t('config.editProfile')}
-          </button>
-        </div>
-        {config?.profile && !editProfile ? (
-          <div>
-            <FieldRow label={t('config.name')} value={config.profile.name} />
-            <FieldRow label={t('config.pseudo')} value={config.profile.pseudo} />
-            <FieldRow label={t('config.email')} value={config.profile.email} />
-            <FieldRow label={t('config.editor')} value={config.profile.preferences?.editor} />
-            <FieldRow label={t('config.shell')} value={config.profile.preferences?.shell} />
-            <FieldRow label={t('config.languages')} value={config.profile.languages?.join(', ')} />
+function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEditProfile, handleSaveProfile, t }) {
+  return (
+    <div className="config-card">
+      {config?.profile && !editProfile ? (
+        <>
+          <div className="config-card-row">
+            <span className="config-card-label">{t('config.name')}</span>
+            <span className="config-card-value">{config.profile.name || '—'}</span>
           </div>
-        ) : editProfile ? (
-          <div className="config-form">
-            <FormInput label={t('config.name')} value={profileForm.name} onChange={v => setProfileForm(p => ({ ...p, name: v }))} />
-            <FormInput label={t('config.pseudo')} value={profileForm.pseudo} onChange={v => setProfileForm(p => ({ ...p, pseudo: v }))} />
-            <FormInput label={t('config.email')} value={profileForm.email} onChange={v => setProfileForm(p => ({ ...p, email: v }))} />
-            <FormInput label={t('config.editor')} value={profileForm.editor} onChange={v => setProfileForm(p => ({ ...p, editor: v }))} />
-            <FormInput label={t('config.shell')} value={profileForm.shell} onChange={v => setProfileForm(p => ({ ...p, shell: v }))} />
-            <div className="config-form-actions">
-              <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
-              <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
+          <div className="config-card-row">
+            <span className="config-card-label">{t('config.pseudo')}</span>
+            <span className="config-card-value">{config.profile.pseudo || '—'}</span>
+          </div>
+          <div className="config-card-row">
+            <span className="config-card-label">{t('config.email')}</span>
+            <span className="config-card-value">{config.profile.email || '—'}</span>
+          </div>
+          <div className="config-card-row">
+            <span className="config-card-label">{t('config.editor')}</span>
+            <span className="config-card-value mono">{config.profile.preferences?.editor || '—'}</span>
+          </div>
+          <div className="config-card-row">
+            <span className="config-card-label">{t('config.shell')}</span>
+            <span className="config-card-value mono">{config.profile.preferences?.shell || '—'}</span>
+          </div>
+          <div className="config-card-row">
+            <span className="config-card-label">{t('config.languages')}</span>
+            <span className="config-card-value">{config.profile.languages?.join(', ') || '—'}</span>
+          </div>
+          <div className="config-card-actions">
+            <button className="primary sm" onClick={() => setEditProfile(true)}>{t('config.editProfile')}</button>
+          </div>
+        </>
+      ) : editProfile ? (
+        <>
+          <FormInput label={t('config.name')} value={profileForm.name} onChange={v => setProfileForm(p => ({ ...p, name: v }))} />
+          <FormInput label={t('config.pseudo')} value={profileForm.pseudo} onChange={v => setProfileForm(p => ({ ...p, pseudo: v }))} />
+          <FormInput label={t('config.email')} value={profileForm.email} onChange={v => setProfileForm(p => ({ ...p, email: v }))} type="email" />
+          <FormInput label={t('config.editor')} value={profileForm.editor} onChange={v => setProfileForm(p => ({ ...p, editor: v }))} />
+          <FormInput label={t('config.shell')} value={profileForm.shell} onChange={v => setProfileForm(p => ({ ...p, shell: v }))} />
+          <div className="config-card-actions">
+            <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
+            <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
+          </div>
+        </>
+      ) : (
+        <div className="empty-state">{t('config.loadingProfile')}</div>
+      )}
+    </div>
+  )
+}
+
+function PanelProviders({ providers, editProvider, providerForm, setProviderForm, setEditProvider, openProviderEdit, handleSaveProvider, api, loadData, t }) {
+  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>
-        ) : (
-          <div className="empty-state">{t('config.loadingProfile')}</div>
-        )}
-      </div>
-
-      <div className="config-section">
-        <div className="config-section-title">{t('config.aiProviders')}</div>
-        {providers.map((p, i) => (
-          <div key={i} className="provider-card">
-            <div className="provider-info">
-              <div className="provider-name">
-                {p.name}
-                {p.active && <span className="badge accent" style={{ marginLeft: 8 }}>{t('config.active')}</span>}
-              </div>
-              {editProvider !== p.name ? (
-                <div className="provider-meta">
-                  <span>{p.model}</span>
-                  <span style={{ color: p.apiKey ? 'var(--success)' : 'var(--error)' }}>
-                    {p.apiKey ? t('config.keyConfigured') : t('config.noKey')}
-                  </span>
-                  <button className="ghost sm" onClick={() => openProviderEdit(p)}>{t('config.editProvider')}</button>
-                  {!p.active && (
-                    <button className="sm" onClick={async () => {
-                      await api.saveProvider({ name: p.name, active: true })
-                      loadData()
-                    }}>{t('config.activate')}</button>
-                  )}
-                </div>
-              ) : (
-                <div className="config-form" style={{ marginTop: 8 }}>
-                  <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-form-actions">
-                    <button className="primary sm" onClick={handleSaveProvider}>{t('config.save')}</button>
-                    <button className="ghost sm" onClick={() => setEditProvider(null)}>{t('config.cancel')}</button>
-                  </div>
-                </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>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function PanelUpdates({ updates, checking, updating, needsUpdateCount, installedCount, missingCount, handleCheckUpdates, handleUpdateTool, handleUpdateAll, t }) {
+  return (
+    <>
+      <div className="config-card">
+        <div className="config-update-controls">
+          <div className="config-update-stats">
+            <span className="badge ok">{installedCount} {t('config.installed')}</span>
+            {missingCount > 0 && <span className="badge error">{missingCount} {t('config.missing')}</span>}
+            {needsUpdateCount > 0 && <span className="badge warn">{needsUpdateCount} {t('config.needsUpdate')}</span>}
+          </div>
+          <div className="config-update-buttons">
+            <button className="sm" onClick={handleCheckUpdates} disabled={checking}>
+              {checking ? <><RefreshCw size={12} className="spin-icon" /> {t('config.checking')}</> : t('config.checkUpdates')}
+            </button>
+            {needsUpdateCount > 0 && (
+              <button className="sm primary" onClick={handleUpdateAll} disabled={updating === '__all__'}>
+                {updating === '__all__' ? t('config.updating') : `${t('config.updateAll')} (${needsUpdateCount})`}
+              </button>
+            )}
+          </div>
+        </div>
       </div>
 
-      <div className="config-section">
-        <div className="config-section-title">{t('config.language')}</div>
+      {updates.length === 0 ? (
+        <div className="config-card">
+          <div className="empty-state">{t('config.noUpdates')}</div>
+        </div>
+      ) : (
+        <div className="config-update-list">
+          {updates.map((u, i) => (
+            <div key={i} className="config-update-row">
+              <div className="config-update-info">
+                <span className="config-update-name">{u.tool}</span>
+                <span className="config-update-versions">
+                  {u.needsUpdate ? (
+                    <>{u.current} → <span style={{ color: 'var(--warning)' }}>{u.latest}</span></>
+                  ) : (
+                    <span style={{ color: 'var(--success)' }}>{u.current}</span>
+                  )}
+                </span>
+              </div>
+              {u.needsUpdate && (
+                <button
+                  className="sm"
+                  onClick={() => handleUpdateTool(u.tool)}
+                  disabled={updating === u.tool}
+                >
+                  {updating === u.tool ? t('config.updating') : t('config.updateTool')}
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  )
+}
+
+function PanelLocale({ language, keyboard, layouts, setLanguage, setKeyboard, t }) {
+  return (
+    <div className="config-card">
+      <div className="config-card-group">
+        <span className="config-card-group-label">{t('config.language')}</span>
         <div className="chip-row">
           {LANGUAGES.map(lang => (
             <div
@@ -257,9 +373,8 @@ export default function Config({ api }) {
           ))}
         </div>
       </div>
-
-      <div className="config-section">
-        <div className="config-section-title">{t('config.keyboardLayout')}</div>
+      <div className="config-card-group">
+        <span className="config-card-group-label">{t('config.keyboardLayout')}</span>
         <div className="chip-row">
           {layouts.map(l => (
             <div
@@ -272,43 +387,37 @@ export default function Config({ api }) {
           ))}
         </div>
       </div>
-
-      <div className="config-section">
-        <div className="config-section-title">{t('config.skills')} ({skillList.length})</div>
-        {skillList.length === 0 ? (
-          <div className="empty-state">
-            {t('config.noSkills')}
-            <span style={{ fontFamily: 'var(--font-mono)' }}>{t('config.runSkillsInit')}</span>
-          </div>
-        ) : (
-          skillList.map((s, i) => (
-            <div key={i} className="config-skill-row">
-              <span className="config-skill-name">{s.name}</span>
-              <span className="badge neutral">{s.target || 'both'}</span>
-              <span className="config-skill-desc">{s.description}</span>
-            </div>
-          ))
-        )}
-      </div>
     </div>
   )
 }
 
-function FieldRow({ label, value }) {
+function PanelSkills({ skillList, t }) {
   return (
-    <div className="field-row">
-      <span className="field-label">{label}</span>
-      <span className={`field-value ${!value ? 'empty' : ''}`}>{value || '—'}</span>
+    <div className="config-card">
+      {skillList.length === 0 ? (
+        <div className="empty-state">
+          {t('config.noSkills')}
+          <span style={{ fontFamily: 'var(--font-mono)' }}>{t('config.runSkillsInit')}</span>
+        </div>
+      ) : (
+        skillList.map((s, i) => (
+          <div key={i} className="config-skill-row">
+            <span className="config-skill-name">{s.name}</span>
+            <span className="badge neutral">{s.target || 'both'}</span>
+            <span className="config-skill-desc">{s.description}</span>
+          </div>
+        ))
+      )}
     </div>
   )
 }
 
 function FormInput({ label, value, onChange, type = 'text' }) {
   return (
-    <div className="field-row">
-      <span className="field-label">{label}</span>
+    <div className="config-form-field">
+      <label className="config-form-label">{label}</label>
       <input
-        className="config-input"
+        className="config-form-input"
         type={type}
         value={value}
         onChange={e => onChange(e.target.value)}

web/src/components/Dashboard.jsx

@@ -1,13 +1,10 @@
 import { useState } from 'react'
 import { useI18n } from '../i18n'
 
-export default function Dashboard({ tools, updates, api, onRescan }) {
+export default function Dashboard({ api, onRescan }) {
   const { t, layout } = useI18n()
   const [notifications, setNotifications] = useState([])
 
-  const installed = tools.filter(tool => tool.installed).length
-  const total = tools.length
-
   const addNotif = (text, type) => {
     setNotifications(prev => [{ text, type, id: Date.now(), time: new Date() }, ...prev])
   }
@@ -16,35 +13,6 @@ export default function Dashboard({ tools, updates, api, onRescan }) {
     <div className="dashboard-layout">
       <div className="dashboard-content">
         <div className="dashboard-grid">
-          <div className="dashboard-section">
-            <div className="dashboard-section-header">
-              <div className="dashboard-section-title">{t('dashboard.systemOverview')}</div>
-              {total > 0 && (
-                <span className="badge info">{installed}/{total}</span>
-              )}
-            </div>
-            {tools.length === 0 ? (
-              <div className="empty-state">{t('dashboard.noUpdateData')}</div>
-            ) : (
-              <div className="tools-compact">
-                {tools.map((tool, i) => {
-                  const name = tool.name || tool.Name
-                  const ver = extractVersion(tool.Version || tool.version)
-                  return (
-                    <div key={i} className="tool-compact-row">
-                      <span className={`badge sm ${tool.installed ? 'ok' : 'error'}`}>
-                        {tool.installed ? '\u2713' : '\u2717'}
-                      </span>
-                      <span className="tool-compact-name">{name}</span>
-                      {ver && <span className="tool-compact-ver">{ver}</span>}
-                      {tool.installed && <span className="tool-compact-installed">{t('dashboard.installed')}</span>}
-                    </div>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-
           <div className="dashboard-section">
             <div className="dashboard-section-header">
               <div className="dashboard-section-title">{t('studio.workflows')}</div>
@@ -92,9 +60,3 @@ export default function Dashboard({ tools, updates, api, onRescan }) {
     </div>
   )
 }
-
-function extractVersion(s) {
-  if (!s) return ''
-  const m = s.match(/\d+\.\d+\.\d+/)
-  return m ? m[0] : s.slice(0, 12)
-}

web/src/components/Studio.jsx

@@ -1,54 +1,8 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { useI18n } from '../i18n'
 
-const MSG_ID = () => Math.random().toString(36).slice(2, 10)
-
-function parsePlanBlocks(text) {
-  const plans = []
-  const regex = /(?:^|\n)(?:###?\s+|(?:\d+\.\s+)?)\[?PLAN[^\]]*\]?:?\s*(.*?)(?=\n(?:###?\s+|(?:\d+\.\s+)?)\[?PLAN|\n## |\n### |\n$)/gis
-  const matches = text.matchAll(regex)
-  for (const m of matches) {
-    plans.push({ id: MSG_ID(), title: m[1].trim(), content: m[0].trim() })
-  }
-  if (plans.length === 0 && /plan|workflow/i.test(text)) {
-    const lines = text.split('\n').filter(l => /^\s*[-*]\s|^\s*\d+\.\s/.test(l))
-    if (lines.length > 0) {
-      plans.push({ id: MSG_ID(), title: text.split('\n')[0].slice(0, 80), content: text.trim() })
-    }
-  }
-  return plans
-}
-
-function parseAgentMentions(text) {
-  const agents = new Set()
-  const names = ['crush', 'claude', 'claude code', 'ollama', 'copilot', 'cursor', 'agent']
-  for (const name of names) {
-    if (new RegExp('\\b' + name + '\\b', 'i').test(text)) {
-      agents.add(name)
-    }
-  }
-  return [...agents]
-}
-
-function parseSteps(text) {
-  const steps = []
-  const lines = text.split('\n')
-  for (const line of lines) {
-    const match = line.match(/^\s*(\d+)[.)]\s+(.+)/)
-    if (match) {
-      steps.push({ num: match[1], text: match[2].trim() })
-    }
-    const bulletMatch = line.match(/^\s*[-*]\s+(.+)/)
-    if (bulletMatch) {
-      steps.push({ num: String(steps.length + 1), text: bulletMatch[1].trim() })
-    }
-  }
-  return steps
-}
-
 function renderContent(text) {
   const parts = []
-  let i = 0
   const codeBlockRegex = /(```[\s\S]*?```)/g
   let match
   let lastIndex = 0
@@ -70,7 +24,7 @@ function renderContent(text) {
 }
 
 function formatText(text) {
-  let html = text
+  return text
     .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
     .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
     .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
@@ -78,25 +32,41 @@ function formatText(text) {
     .replace(/^## (.+)$/gm, '<h3 class="msg-h3">$1</h3>')
     .replace(/^\s*[-*] (.+)$/gm, '<span class="msg-bullet">$1</span>')
     .replace(/^\s*(\d+)[.)] (.+)$/gm, '<span class="msg-step"><span class="msg-step-num">$1</span>$2</span>')
-  return html
 }
 
-function MessageBubble({ msg }) {
-  const { t } = useI18n()
-  const [expanded, setExpanded] = useState(null)
-  const plans = msg.role === 'ai' ? parsePlanBlocks(msg.content) : []
-  const steps = msg.role === 'ai' ? parseSteps(msg.content) : []
-  const agents = msg.role === 'ai' ? parseAgentMentions(msg.content) : []
+function FeedItem({ msg }) {
+  const isUser = msg.role === 'user'
+  const isSystem = msg.role === 'system'
+
+  const roleLabel = isUser ? null : isSystem ? null : (
+    <div className="feed-avatar">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
+      </svg>
+    </div>
+  )
+
+  const timeStr = msg.time ? new Date(msg.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''
+
+  if (isSystem) {
+    return (
+      <div className="feed-item system">
+        <div className="feed-system-badge" />
+        <div className="feed-system-text">{msg.content}</div>
+        {timeStr && <span className="feed-time">{timeStr}</span>}
+      </div>
+    )
+  }
 
   return (
-    <div className={`studio-msg ${msg.role}`}>
-      {msg.role === 'ai' && (
-        <div className="studio-msg-avatar">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+    <div className={`feed-item ${msg.role}`}>
+      {roleLabel}
+      <div className="feed-body">
+        <div className="feed-header">
+          <span className="feed-role">{isUser ? 'Vous' : 'IA'}</span>
+          {timeStr && <span className="feed-time">{timeStr}</span>}
         </div>
-      )}
-      <div className="studio-msg-body">
-        <div className="studio-msg-content">
+        <div className="feed-content">
           {renderContent(msg.content).map((part, i) =>
             part.type === 'code' ? (
               <div key={i} className="studio-code-block">
@@ -108,53 +78,24 @@ function MessageBubble({ msg }) {
             )
           )}
         </div>
-        {msg.role === 'ai' && (plans.length > 0 || agents.length > 0) && (
-          <div className="studio-msg-meta">
-            {plans.map(plan => (
-              <div key={plan.id} className="studio-plan-chip" onClick={() => setExpanded(expanded === plan.id ? null : plan.id)}>
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
-                {plan.title.slice(0, 60)}
-                <span className="studio-expand-icon">{expanded === plan.id ? '\u25B2' : '\u25BC'}</span>
-              </div>
-            ))}
-            {agents.map(agent => (
-              <span key={agent} className="studio-agent-tag">
-                {agent}
-              </span>
-            ))}
-          </div>
-        )}
-        {expanded && plans.find(p => p.id === expanded) && (
-          <div className="studio-plan-detail">
-            <div className="studio-plan-detail-header">{t('studio.planDetail')}</div>
-            {steps.length > 0 && (
-              <div className="studio-steps">
-                {steps.map(step => (
-                  <div key={step.num} className="studio-step">
-                    <span className="studio-step-num">{step.num}</span>
-                    <span className="studio-step-text">{step.text}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-            <div className="studio-plan-raw">
-              <pre>{plans.find(p => p.id === expanded).content}</pre>
-            </div>
-          </div>
-        )}
       </div>
     </div>
   )
 }
 
-function StreamingMessage({ content }) {
+function StreamingItem({ content }) {
   return (
-    <div className="studio-msg ai">
-      <div className="studio-msg-avatar">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+    <div className="feed-item assistant">
+      <div className="feed-avatar">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
+        </svg>
       </div>
-      <div className="studio-msg-body">
-        <div className="studio-msg-content">
+      <div className="feed-body">
+        <div className="feed-header">
+          <span className="feed-role">IA</span>
+        </div>
+        <div className="feed-content">
           {renderContent(content).map((part, i) =>
             part.type === 'code' ? (
               <div key={i} className="studio-code-block">
@@ -165,103 +106,8 @@ function StreamingMessage({ content }) {
               <span key={i} dangerouslySetInnerHTML={{ __html: formatText(part.content) }} />
             )
           )}
+          <span className="studio-cursor" />
         </div>
-        <span className="studio-cursor" />
-      </div>
-    </div>
-  )
-}
-
-function ContextPanel({ messages, selectedPlan, onSelectPlan }) {
-  const { t } = useI18n()
-  const [tab, setTab] = useState('plans')
-
-  const allPlans = []
-  const allAgents = new Set()
-  const activities = []
-
-  for (let i = messages.length - 1; i >= 0; i--) {
-    const msg = messages[i]
-    if (msg.role === 'ai') {
-      const plans = parsePlanBlocks(msg.content)
-      for (const plan of plans) {
-        if (!allPlans.find(p => p.title === plan.title)) {
-          allPlans.push({ ...plan, msgIndex: i })
-        }
-      }
-      parseAgentMentions(msg.content).forEach(a => allAgents.add(a))
-    }
-    activities.push({ role: msg.role, content: msg.content.slice(0, 100), time: msg.time })
-  }
-
-  const tabs = [
-    { id: 'plans', label: t('studio.plans'), count: allPlans.length },
-    { id: 'agents', label: t('studio.agents'), count: allAgents.size },
-    { id: 'activity', label: t('studio.activity'), count: activities.length },
-  ]
-
-  return (
-    <div className="studio-context">
-      <div className="studio-context-tabs">
-        {tabs.map(t2 => (
-          <div
-            key={t2.id}
-            className={`studio-context-tab ${tab === t2.id ? 'active' : ''}`}
-            onClick={() => setTab(t2.id)}
-          >
-            {t2.label}
-            {t2.count > 0 && <span className="studio-tab-count">{t2.count}</span>}
-          </div>
-        ))}
-      </div>
-      <div className="studio-context-body">
-        {tab === 'plans' && (
-          allPlans.length > 0 ? (
-            <div className="studio-plan-list">
-              {allPlans.map(plan => (
-                <div
-                  key={plan.id}
-                  className={`studio-plan-item ${selectedPlan === plan.id ? 'active' : ''}`}
-                  onClick={() => onSelectPlan(selectedPlan === plan.id ? null : plan.id)}
-                >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
-                  <div className="studio-plan-item-text">{plan.title}</div>
-                  <span className="studio-plan-item-badge">{parseSteps(plan.content).length} {t('studio.steps')}</span>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="studio-empty">{t('studio.noPlansYet')}</div>
-          )
-        )}
-        {tab === 'agents' && (
-          allAgents.size > 0 ? (
-            <div className="studio-agent-list">
-              {[...allAgents].map(agent => (
-                <div key={agent} className="studio-agent-item">
-                  <div className="studio-agent-dot" />
-                  <span className="studio-agent-name">{agent}</span>
-                  <span className="badge info">{t('studio.mentioned')}</span>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="studio-empty">{t('studio.noAgentsYet')}</div>
-          )
-        )}
-        {tab === 'activity' && (
-          <div className="studio-activity-list">
-            {activities.map((act, i) => (
-              <div key={i} className="studio-activity-item">
-                <div className={`studio-activity-dot ${act.role}`} />
-                <div className="studio-activity-text">
-                  {act.role === 'user' ? t('studio.you') + ': ' : 'AI: '}
-                  {act.content}{act.content.length >= 100 ? '...' : ''}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
       </div>
     </div>
   )
@@ -269,17 +115,32 @@ function ContextPanel({ messages, selectedPlan, onSelectPlan }) {
 
 export default function Studio({ api }) {
   const { t } = useI18n()
-  const [messages, setMessages] = useState([
-    { id: MSG_ID(), role: 'ai', content: t('studio.welcomeNew'), time: new Date() },
-  ])
+  const [messages, setMessages] = useState([])
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
   const [streaming, setStreaming] = useState('')
-  const [selectedPlan, setSelectedPlan] = useState(null)
-  const [showContext, setShowContext] = useState(true)
+  const [loaded, setLoaded] = useState(false)
   const messagesEnd = useRef(null)
   const textareaRef = useRef(null)
 
+  useEffect(() => {
+    api.getChatHistory().then(data => {
+      if (data.messages && data.messages.length > 0) {
+        setMessages(data.messages)
+      } else {
+        setMessages([
+          { id: 'welcome', role: 'system', content: t('studio.welcomeNew'), time: new Date().toISOString() },
+        ])
+      }
+      setLoaded(true)
+    }).catch(() => {
+      setMessages([
+        { id: 'welcome', role: 'system', content: t('studio.welcomeNew'), time: new Date().toISOString() },
+      ])
+      setLoaded(true)
+    })
+  }, [])
+
   useEffect(() => {
     messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })
   }, [messages, streaming])
@@ -291,11 +152,26 @@ export default function Studio({ api }) {
     }
   }, [input])
 
+  const handleClear = useCallback(async () => {
+    try {
+      await api.clearChat()
+      setMessages([
+        { id: 'clear-' + Date.now(), role: 'system', content: t('studio.cleared'), time: new Date().toISOString() },
+      ])
+    } catch {}
+  }, [api, t])
+
   const handleSend = useCallback(async () => {
     if (!input.trim() || loading) return
     const text = input.trim()
     setInput('')
-    const userMsg = { id: MSG_ID(), role: 'user', content: text, time: new Date() }
+
+    if (text === '/clear') {
+      handleClear()
+      return
+    }
+
+    const userMsg = { id: Date.now().toString(), role: 'user', content: text, time: new Date().toISOString() }
     setMessages(prev => [...prev, userMsg])
     setLoading(true)
     setStreaming('')
@@ -307,14 +183,24 @@ export default function Studio({ api }) {
       }).catch(() => {})
 
       const finalContent = accumulated || t('studio.noResponse')
-      setMessages(prev => [...prev, { id: MSG_ID(), role: 'ai', content: finalContent, time: new Date() }])
+      setMessages(prev => [...prev, {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: finalContent,
+        time: new Date().toISOString(),
+      }])
     } catch (err) {
-      setMessages(prev => [...prev, { id: MSG_ID(), role: 'ai', content: `${t('studio.error')}: ${err.message}`, time: new Date() }])
+      setMessages(prev => [...prev, {
+        id: (Date.now() + 1).toString(),
+        role: 'system',
+        content: `${t('studio.error')}: ${err.message}`,
+        time: new Date().toISOString(),
+      }])
     } finally {
       setLoading(false)
       setStreaming('')
     }
-  }, [input, loading, api, t])
+  }, [input, loading, api, t, handleClear])
 
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -323,70 +209,66 @@ export default function Studio({ api }) {
     }
   }
 
-  return (
-    <div className="studio-layout">
-      <div className="studio-chat-area">
-        <div className="studio-messages">
-          {messages.map(msg => (
-            <MessageBubble key={msg.id} msg={msg} />
-          ))}
-          {streaming && <StreamingMessage content={streaming} />}
-          {loading && !streaming && (
-            <div className="studio-msg ai">
-              <div className="studio-msg-avatar">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
-              </div>
-              <div className="studio-msg-body">
-                <div className="studio-thinking">
-                  <span /><span /><span />
-                </div>
-              </div>
-            </div>
-          )}
-          <div ref={messagesEnd} />
-        </div>
-
-        <div className="studio-input-area">
-          <div className="studio-input-row">
-            <textarea
-              ref={textareaRef}
-              value={input}
-              onChange={e => setInput(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={t('studio.placeholderNew')}
-              disabled={loading}
-              rows={1}
-            />
-            <button
-              className="studio-send-btn"
-              onClick={handleSend}
-              disabled={loading || !input.trim()}
-            >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
-              </svg>
-            </button>
-          </div>
-          <div className="studio-input-hint">
-            {t('studio.inputHint')}
+  if (!loaded) {
+    return (
+      <div className="studio-feed-layout">
+        <div className="studio-feed">
+          <div className="feed-loading">
+            <div className="studio-thinking"><span /><span /><span /></div>
           </div>
         </div>
       </div>
+    )
+  }
 
-      <div className={`studio-sidebar ${showContext ? 'open' : ''}`}>
-        <div className="studio-sidebar-header">
-          <span>{t('studio.context')}</span>
-          <button className="ghost sm studio-sidebar-toggle" onClick={() => setShowContext(!showContext)}>
-            {showContext ? '\u203A' : '\u2039'}
+  return (
+    <div className="studio-feed-layout">
+      <div className="studio-feed">
+        {messages.map(msg => (
+          <FeedItem key={msg.id} msg={msg} />
+        ))}
+        {streaming && <StreamingItem content={streaming} />}
+        {loading && !streaming && (
+          <div className="feed-item assistant">
+            <div className="feed-avatar">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
+              </svg>
+            </div>
+            <div className="feed-body">
+              <div className="feed-content">
+                <div className="studio-thinking"><span /><span /><span /></div>
+              </div>
+            </div>
+          </div>
+        )}
+        <div ref={messagesEnd} />
+      </div>
+
+      <div className="studio-input-area">
+        <div className="studio-input-row">
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={t('studio.placeholderNew')}
+            disabled={loading}
+            rows={1}
+          />
+          <button
+            className="studio-send-btn"
+            onClick={handleSend}
+            disabled={loading || !input.trim()}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+            </svg>
           </button>
         </div>
-        {showContext && (
-          <ContextPanel
-            messages={messages}
-            selectedPlan={selectedPlan}
-            onSelectPlan={setSelectedPlan}
-          />
-        )}
+        <div className="studio-input-hint">
+          {t('studio.inputHint')} &middot; /clear
+        </div>
       </div>
     </div>
   )

web/src/i18n/en.js

@@ -113,6 +113,13 @@ const en = {
   },
 
   config: {
+    panels: {
+      profile: 'Profile',
+      providers: 'AI Providers',
+      updates: 'Updates',
+      locale: 'Language & Keyboard',
+      skills: 'Skills',
+    },
     profile: 'Profile',
     name: 'Name',
     pseudo: 'Pseudo',
@@ -155,7 +162,7 @@ const en = {
     version: 'Version',
     installed: 'Installed',
     missing: 'Missing',
-    editProfile: 'Edit profile',
+    editProfile: 'Edit',
     cancel: 'Cancel',
     editProvider: 'Configure',
   },

web/src/i18n/fr.js

@@ -113,6 +113,13 @@ const fr = {
   },
 
   config: {
+    panels: {
+      profile: 'Profil',
+      providers: 'Fournisseurs IA',
+      updates: 'Mises \u00e0 jour',
+      locale: 'Langue & Clavier',
+      skills: 'Comp\u00e9tences',
+    },
     profile: 'Profil',
     name: 'Nom',
     pseudo: 'Pseudo',
@@ -155,7 +162,7 @@ const fr = {
     version: 'Version',
     installed: 'Install\u00e9',
     missing: 'Manquant',
-    editProfile: 'Modifier le profil',
+    editProfile: 'Modifier',
     editProvider: 'Configurer',
     cancel: 'Annuler',
   },

web/src/styles/global.css

@@ -407,34 +407,93 @@ input::placeholder { color: var(--text-disabled); }
   display: flex; justify-content: flex-end; gap: 8px;
 }
 
-.config-layout { max-width: 840px; margin: 0 auto; padding: 24px; overflow-y: auto; height: 100%; position: relative; }
-.config-section { margin-bottom: 28px; }
-.config-section-title {
-  font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase;
-  letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
-  display: flex; align-items: center; justify-content: space-between;
+.config-window { display: flex; height: 100%; overflow: hidden; }
+
+.config-sidebar {
+  width: 180px; background: var(--bg-surface); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; padding: 12px 8px; gap: 2px; flex-shrink: 0;
+  overflow-y: auto;
 }
-.field-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px; }
-.field-row:last-child { border-bottom: none; }
-.field-label { width: 140px; flex-shrink: 0; color: var(--text-tertiary); font-size: 13px; }
-.field-value { color: var(--text-primary); font-size: 14px; flex: 1; }
-.field-value.empty { color: var(--text-disabled); font-style: italic; }
-.config-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; color: var(--text-primary); font-size: 13px; outline: none; font-family: var(--font-mono); }
-.config-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--border-accent); }
-.config-form-actions { display: flex; gap: 8px; padding: 12px 0 0 152px; }
-.config-actions-row { display: flex; gap: 8px; margin-bottom: 12px; }
-.config-stats { display: flex; gap: 8px; margin-bottom: 12px; }
+.config-sidebar-item {
+  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
+  border-radius: var(--radius); font-size: 13px; font-weight: 500;
+  color: var(--text-tertiary); cursor: pointer; transition: all 0.15s;
+  user-select: none;
+}
+.config-sidebar-item:hover { background: var(--bg-card); color: var(--text-primary); }
+.config-sidebar-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
+.config-sidebar-item svg { flex-shrink: 0; }
+
+.config-panel-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.config-panel-header {
+  padding: 20px 28px 0; flex-shrink: 0;
+}
+.config-panel-title {
+  font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0;
+}
+.config-panel-body { flex: 1; overflow-y: auto; padding: 16px 28px 28px; }
+
+.config-card {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 16px;
+}
+.config-card-row {
+  display: flex; align-items: center; padding: 10px 0;
+  border-bottom: 1px solid var(--border); gap: 16px;
+}
+.config-card-row:last-of-type { border-bottom: none; }
+.config-card-label { width: 130px; flex-shrink: 0; color: var(--text-tertiary); font-size: 13px; }
+.config-card-value { color: var(--text-primary); font-size: 14px; flex: 1; }
+.config-card-value.mono { font-family: var(--font-mono); }
+.config-card-value:not(.mono)[style*="—"] { color: var(--text-disabled); font-style: italic; }
+.config-card-actions { display: flex; gap: 8px; padding-top: 16px; }
+
+.config-form-field { margin-bottom: 14px; }
+.config-form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px; }
+.config-form-input {
+  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 8px 12px; color: var(--text-primary);
+  font-size: 13px; font-family: var(--font-mono); outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.config-form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--border-accent); }
+
+.config-card-group { margin-bottom: 20px; }
+.config-card-group:last-child { margin-bottom: 0; }
+.config-card-group-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
+
+.config-providers-list { display: flex; flex-direction: column; gap: 12px; }
+.provider-card-v2 {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 16px 20px; transition: border-color 0.2s;
+}
+.provider-card-v2:hover { border-color: var(--accent-dim); }
+.provider-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.provider-card-identity { display: flex; align-items: center; gap: 10px; }
+.provider-card-name { font-weight: 600; color: var(--text-primary); font-size: 14px; }
+.provider-card-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.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); }
+
+.config-update-controls {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
+}
+.config-update-stats { display: flex; gap: 8px; }
+.config-update-buttons { display: flex; gap: 8px; }
+
 .config-update-list { display: flex; flex-direction: column; gap: 2px; }
-.config-update-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius); }
-.config-update-row:hover { background: var(--bg-card); }
+.config-update-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 6px; }
+.config-update-row:hover { border-color: var(--accent-dim); }
 .config-update-info { display: flex; align-items: center; gap: 16px; flex: 1; }
 .config-update-name { color: var(--text-primary); font-weight: 600; font-size: 13px; min-width: 100px; }
 .config-update-versions { color: var(--text-tertiary); font-size: 12px; font-family: var(--font-mono); }
-.config-skill-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
+
+.config-skill-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
 .config-skill-row:last-child { border-bottom: none; }
 .config-skill-name { color: var(--text-primary); font-weight: 600; min-width: 120px; }
 .config-skill-desc { color: var(--text-tertiary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
+
 .config-toast {
   position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
   background: var(--accent); color: #fff; padding: 10px 24px; border-radius: var(--radius-lg);
@@ -442,15 +501,8 @@ input::placeholder { color: var(--text-disabled); }
   box-shadow: 0 4px 24px rgba(255, 0, 51, 0.3);
 }
 
-.provider-card {
-  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between;
-  transition: border-color 0.2s;
-}
-.provider-card:hover { border-color: var(--accent-dim); }
-.provider-info { display: flex; flex-direction: column; gap: 4px; }
-.provider-name { font-weight: 600; color: var(--text-primary); font-size: 14px; }
-.provider-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); }
+.spin-icon { animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle; }
+.mono { font-family: var(--font-mono); }
 
 
 
@@ -480,11 +532,8 @@ input::placeholder { color: var(--text-disabled); }
 .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; }
 
 .dashboard-section {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-  transition: border-color 0.2s;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.2s;
 }
 .dashboard-section:hover { border-color: var(--accent-dim); }
 .dashboard-section.full-width { grid-column: 1 / -1; }
@@ -498,19 +547,6 @@ input::placeholder { color: var(--text-disabled); }
 
 .dashboard-notifications-inline { display: flex; flex-direction: column; gap: 2px; }
 
-.dashboard-tools { padding: 0; }
-.tools-compact { display: flex; flex-direction: column; gap: 2px; }
-.tool-compact-row {
-  display: flex; align-items: center; gap: 10px;
-  padding: 6px 12px; border-radius: var(--radius);
-  font-size: 13px; transition: background 0.1s;
-}
-.tool-compact-row:hover { background: var(--bg-card); }
-.badge.sm { padding: 1px 5px; font-size: 10px; }
-.tool-compact-name { color: var(--text-primary); font-weight: 500; flex: 1; }
-.tool-compact-ver { color: var(--text-tertiary); font-size: 11px; font-family: var(--font-mono); }
-.tool-compact-installed { color: var(--success); font-size: 11px; font-family: var(--font-mono); opacity: 0.7; }
-
 .dashboard-notifications { padding: 0; }
 .notif-row {
   display: flex; align-items: flex-start; gap: 12px;