feat: add API key validation flow for AI provider config

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

💾 Generated with Crush

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

internal/api/handlers.go

@@ -1,9 +1,13 @@
 package api
 
 import (
+	"bytes"
 	"encoding/json"
+	"io"
 	"net/http"
 	"os/exec"
+	"strings"
+	"time"
 
 	"github.com/muyue/muyue/internal/config"
 	"github.com/muyue/muyue/internal/lsp"
@@ -529,3 +533,95 @@ func (s *Server) handleRunUpdate(w http.ResponseWriter, r *http.Request) {
 		"updated": len(needsUpdate),
 	})
 }
+
+func (s *Server) handleValidateProvider(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		writeError(w, "POST only", http.StatusMethodNotAllowed)
+		return
+	}
+	var body struct {
+		Name    string `json:"name"`
+		APIKey  string `json:"api_key"`
+		Model   string `json:"model"`
+		BaseURL string `json:"base_url"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		writeError(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+	if body.APIKey == "" {
+		writeError(w, "api_key required", http.StatusBadRequest)
+		return
+	}
+
+	baseURL := body.BaseURL
+	if baseURL == "" {
+		for _, p := range s.config.AI.Providers {
+			if p.Name == body.Name {
+				baseURL = p.BaseURL
+				break
+			}
+		}
+	}
+	if baseURL == "" {
+		switch body.Name {
+		case "minimax":
+			baseURL = "https://api.minimax.io/v1"
+		case "openai":
+			baseURL = "https://api.openai.com/v1"
+		case "anthropic":
+			baseURL = "https://api.anthropic.com/v1"
+		default:
+			baseURL = "https://api.minimax.io/v1"
+		}
+	}
+
+	model := body.Model
+	if model == "" {
+		for _, p := range s.config.AI.Providers {
+			if p.Name == body.Name {
+				model = p.Model
+				break
+			}
+		}
+	}
+	if model == "" {
+		model = "MiniMax-Text-01"
+	}
+
+	reqBody, _ := json.Marshal(map[string]interface{}{
+		"model":    model,
+		"messages": []map[string]string{{"role": "user", "content": "Hi"}},
+		"max_tokens": 5,
+		"stream":    false,
+	})
+
+	url := strings.TrimRight(baseURL, "/") + "/chat/completions"
+	req, err := http.NewRequest("POST", url, bytes.NewReader(reqBody))
+	if err != nil {
+		writeError(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	req.Header.Set("Content-Type", "application/json")
+	req.Header.Set("Authorization", "Bearer "+body.APIKey)
+
+	client := &http.Client{Timeout: 15 * time.Second}
+	resp, err := client.Do(req)
+	if err != nil {
+		writeError(w, "connection failed: "+err.Error(), http.StatusBadGateway)
+		return
+	}
+	defer resp.Body.Close()
+	respBody, _ := io.ReadAll(resp.Body)
+
+	if resp.StatusCode == http.StatusUnauthorized || resp.StatusCode == http.StatusForbidden {
+		writeError(w, "invalid_api_key", http.StatusUnauthorized)
+		return
+	}
+	if resp.StatusCode != http.StatusOK {
+		writeError(w, "api_error: "+string(respBody), http.StatusBadGateway)
+		return
+	}
+
+	writeJSON(w, map[string]interface{}{"status": "valid"})
+}

internal/api/server.go

@@ -46,6 +46,7 @@ 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/providers/validate", s.handleValidateProvider)
 	s.mux.HandleFunc("/api/update/run", s.handleRunUpdate)
 	s.mux.HandleFunc("/api/chat", s.handleChat)
 	s.mux.HandleFunc("/api/chat/history", s.handleChatHistory)

web/src/api/client.js

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

web/src/components/Config.jsx

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

web/src/i18n/en.js

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

web/src/i18n/fr.js

@@ -76,6 +76,7 @@ const fr = {
     steps: '\u00e9tapes',
     you: 'Vous',
     mentioned: 'mentionn\u00e9',
+    cleared: 'Conversation effac\u00e9e.',
   },
 
   shell: {
@@ -164,6 +165,14 @@ const fr = {
     missing: 'Manquant',
     editProfile: 'Modifier',
     editProvider: 'Configurer',
+    validateKey: 'Valider',
+    validating: 'Vérification...',
+    keyValid: 'Clé valide',
+    keyInvalid: 'Clé invalide',
+    connectionFailed: 'Connexion échouée',
+    enterToken: 'Entrez votre token API pour {provider}',
+    tokenPlaceholder: 'sk-...',
+    setupDescription: 'Configurez le token de votre fournisseur IA pour utiliser l\'assistant.',
     cancel: 'Annuler',
   },
 }

web/src/styles/global.css

@@ -475,6 +475,15 @@ input::placeholder { color: var(--text-disabled); }
 .provider-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 8px; }
 .provider-card-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
 
+.provider-setup-hint {
+  font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px;
+  padding: 10px 14px; border-radius: var(--radius); background: var(--bg-surface);
+  border-left: 3px solid var(--accent-dim);
+}
+.provider-setup-token-row { display: flex; gap: 12px; align-items: flex-end; }
+.provider-setup-token-input { flex: 1; }
+.provider-setup-token-actions { display: flex; gap: 8px; flex-shrink: 0; padding-bottom: 1px; }
+
 .config-update-controls {
   display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
 }
@@ -579,142 +588,20 @@ input::placeholder { color: var(--text-disabled); }
 @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 .fade-in { animation: fadeIn 0.2s ease-out; }
 
-/* ── Studio ── */
-.studio-layout { display: flex; height: 100%; overflow: hidden; }
-.studio-chat-area { display: flex; flex-direction: column; flex: 1; min-width: 0; }
-.studio-messages { flex: 1; overflow-y: auto; padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; }
-
-.studio-msg { display: flex; gap: 10px; max-width: 85%; animation: fadeIn 0.2s ease-out; }
-.studio-msg.user { align-self: flex-end; flex-direction: row-reverse; }
-.studio-msg.ai { align-self: flex-start; }
-
-.studio-msg-avatar {
-  width: 28px; height: 28px; border-radius: 50%; background: var(--accent-bg); color: var(--accent);
-  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
-}
-.studio-msg-body { display: flex; flex-direction: column; gap: 0; }
-.studio-msg-content { font-size: 14px; line-height: 1.7; color: var(--text-primary); word-break: break-word; }
-
-.studio-code-block {
-  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
-  overflow: hidden; margin: 8px 0;
-}
-.studio-code-block pre { padding: 12px 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; overflow-x: auto; color: var(--text-primary); margin: 0; }
-.studio-code-lang {
-  padding: 4px 12px; font-size: 11px; font-weight: 600; color: var(--text-tertiary);
-  background: var(--bg-surface); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.5px;
-}
-.inline-code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-muted); }
-
-.msg-h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 16px 0 8px; display: block; }
-.msg-h4 { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin: 12px 0 6px; display: block; }
-.msg-bullet { display: block; padding-left: 16px; position: relative; margin: 2px 0; }
-.msg-bullet::before { content: '\2022'; position: absolute; left: 4px; color: var(--accent); }
-.msg-step { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; }
-.msg-step-num { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 13px; flex-shrink: 0; min-width: 20px; }
-
-.studio-msg-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
-
-.studio-plan-chip {
-  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius);
-  background: var(--bg-card); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary);
-  cursor: pointer; transition: all 0.15s; user-select: none;
-}
-.studio-plan-chip:hover { border-color: var(--accent-dark); background: var(--bg-hover); color: var(--text-primary); }
-.studio-expand-icon { font-size: 9px; color: var(--text-tertiary); margin-left: 4px; }
-
-.studio-agent-tag {
-  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 99px;
-  background: rgba(68,138,255,0.12); color: var(--info); font-size: 11px; font-weight: 600;
-}
-
-.studio-plan-detail {
-  margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius);
-  background: var(--bg-surface); overflow: hidden;
-}
-.studio-plan-detail-header { padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
-.studio-steps { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
-.studio-step { display: flex; gap: 10px; align-items: baseline; padding: 4px 14px; }
-.studio-step-num { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 13px; flex-shrink: 0; min-width: 24px; }
-.studio-step-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
-.studio-plan-raw { padding: 8px 14px 12px; border-top: 1px solid var(--border); }
-.studio-plan-raw pre { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); white-space: pre-wrap; word-break: break-word; margin: 0; line-height: 1.5; }
-
-.studio-cursor { display: inline-block; width: 8px; height: 16px; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: blink 0.8s step-end infinite; }
-@keyframes blink { 50% { opacity: 0; } }
-
-.studio-thinking { display: flex; gap: 4px; padding: 8px 0; }
-.studio-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dim); animation: bounce 1.2s ease-in-out infinite; }
-.studio-thinking span:nth-child(2) { animation-delay: 0.15s; }
-.studio-thinking span:nth-child(3) { animation-delay: 0.3s; }
-@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-6px); opacity: 1; } }
-
-.studio-input-area { padding: 12px 20px 8px; border-top: 1px solid var(--border); background: var(--bg-surface); }
-.studio-input-row { display: flex; gap: 8px; align-items: flex-end; }
-.studio-input-row textarea {
-  flex: 1; resize: none; min-height: 42px; max-height: 200px; padding: 10px 14px;
-  font-size: 14px; line-height: 1.5; border-radius: var(--radius);
-  background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border);
-  font-family: var(--font-sans); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
-}
-.studio-input-row textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--border-accent); }
-.studio-input-row textarea::placeholder { color: var(--text-disabled); }
-
-.studio-send-btn {
-  width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center;
-  border-radius: var(--radius); background: var(--accent); color: #fff; border: 1px solid var(--accent);
-  cursor: pointer; transition: all 0.15s; flex-shrink: 0;
-}
-.studio-send-btn:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); }
-.studio-send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-
-.studio-input-hint { font-size: 11px; color: var(--text-disabled); text-align: center; margin-top: 6px; }
-
-/* ── Studio Sidebar ── */
-.studio-sidebar {
-  width: 0; border-left: 1px solid var(--border); background: var(--bg-surface);
-  overflow: hidden; transition: width 0.25s ease; flex-shrink: 0; display: flex; flex-direction: column;
-}
-.studio-sidebar.open { width: 300px; }
-
-.studio-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
-.studio-sidebar-header span { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
-.studio-sidebar-toggle { font-size: 18px; padding: 0 6px; line-height: 1; }
-
-.studio-context { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
-.studio-context-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
-.studio-context-tab {
-  flex: 1; padding: 9px 8px; font-size: 12px; font-weight: 600; color: var(--text-tertiary);
-  cursor: pointer; text-align: center; transition: all 0.15s; border-bottom: 2px solid transparent; user-select: none;
-}
-.studio-context-tab:hover { color: var(--text-primary); background: var(--bg-card); }
-.studio-context-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-.studio-tab-count { font-size: 10px; padding: 1px 5px; border-radius: 99px; background: var(--bg-card); color: var(--text-tertiary); font-family: var(--font-mono); margin-left: 4px; }
-
-.studio-context-body { flex: 1; overflow-y: auto; padding: 12px; }
-
-.studio-plan-list { display: flex; flex-direction: column; gap: 4px; }
-.studio-plan-item {
-  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius);
-  cursor: pointer; transition: all 0.15s; font-size: 13px; color: var(--text-secondary);
-}
-.studio-plan-item:hover { background: var(--bg-card); color: var(--text-primary); }
-.studio-plan-item.active { background: var(--accent-bg); border-left: 2px solid var(--accent); }
-.studio-plan-item svg { flex-shrink: 0; color: var(--text-tertiary); }
-.studio-plan-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.studio-plan-item-badge { font-size: 11px; color: var(--text-disabled); font-family: var(--font-mono); flex-shrink: 0; }
-
-.studio-agent-list { display: flex; flex-direction: column; gap: 4px; }
-.studio-agent-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius); }
-.studio-agent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex-shrink: 0; }
-.studio-agent-name { font-size: 13px; color: var(--text-secondary); flex: 1; }
-
-.studio-empty { display: flex; align-items: center; justify-content: center; padding: 32px 16px; color: var(--text-disabled); font-size: 12px; text-align: center; line-height: 1.6; }
-
-.studio-activity-list { display: flex; flex-direction: column; gap: 2px; }
-.studio-activity-item { display: flex; gap: 8px; padding: 6px 10px; border-radius: var(--radius); font-size: 12px; }
-.studio-activity-item:hover { background: var(--bg-card); }
-.studio-activity-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
-.studio-activity-dot.user { background: var(--accent-muted); }
-.studio-activity-dot.ai { background: var(--info); }
-.studio-activity-text { color: var(--text-tertiary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* ── Studio Feed ── */
+.studio-feed-layout { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+.studio-feed { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
+.feed-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
+.feed-item { display: flex; gap: 10px; padding: 8px 12px; border-radius: var(--radius); animation: fadeIn 0.15s ease-out; }
+.feed-item:hover { background: var(--bg-card); }
+.feed-item.user { background: var(--bg-card); border-left: 3px solid var(--accent-muted); }
+.feed-item.assistant { }
+.feed-item.system { align-items: center; gap: 8px; padding: 6px 12px; }
+.feed-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
+.feed-body { flex: 1; min-width: 0; }
+.feed-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
+.feed-role { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
+.feed-time { font-size: 10px; color: var(--text-disabled); font-family: var(--font-mono); }
+.feed-content { font-size: 14px; line-height: 1.7; color: var(--text-primary); word-break: break-word; }
+.feed-system-badge { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dim); flex-shrink: 0; }
+.feed-system-text { font-size: 12px; color: var(--text-tertiary); font-style: italic; flex: 1; }