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/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>
   )