feat(studio): Tab focuses textarea, autocomplete commands

- Tab outside textarea focuses it
- Tab inside textarea autocompletes / commands (/clear, /summarize, etc.)

💘 Generated with Crush

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

internal/api/handlers_info.go

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

internal/api/handlers_shell_chat.go

@@ -1,53 +1,24 @@
 package api
 
 import (
-	"context"
 	"encoding/json"
+	"fmt"
 	"net/http"
+	"os"
+	"os/exec"
+	"runtime"
 	"strings"
 
+	"github.com/muyue/muyue/internal/agent"
 	"github.com/muyue/muyue/internal/orchestrator"
 )
 
-const maxShellToolIterations = 10
-
 type ShellChatRequest struct {
-	Message   string   `json:"message"`
-	Context   string   `json:"context,omitempty"`
-	History   []string `json:"history,omitempty"`
-	Cwd       string   `json:"cwd,omitempty"`
-	Platform  string   `json:"platform,omitempty"`
-	Stream    bool     `json:"stream"`
-}
-
-type ShellChatResponse struct {
-	Content   string        `json:"content,omitempty"`
-	ToolCalls []ToolCallInfo `json:"tool_calls,omitempty"`
-	Error     string        `json:"error,omitempty"`
-}
-
-type ToolCallInfo struct {
-	ID     string                 `json:"id"`
-	Name   string                 `json:"name"`
-	Args   map[string]interface{} `json:"args"`
-	Result *toolResponseData      `json:"result,omitempty"`
-	Error  string                 `json:"error,omitempty"`
-}
-
-func toString(v interface{}) string {
-	if v == nil {
-		return ""
-	}
-	s, _ := v.(string)
-	return s
-}
-
-func toBool(v interface{}) bool {
-	if v == nil {
-		return false
-	}
-	b, _ := v.(bool)
-	return b
+	Message  string `json:"message"`
+	Context  string `json:"context,omitempty"`
+	Cwd      string `json:"cwd,omitempty"`
+	Platform string `json:"platform,omitempty"`
+	Stream   bool   `json:"stream"`
 }
 
 func (s *Server) handleShellChat(w http.ResponseWriter, r *http.Request) {
@@ -56,6 +27,11 @@ func (s *Server) handleShellChat(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	if s.shellConvStore.AtLimit() {
+		writeError(w, "context limit reached, use /clear", http.StatusBadRequest)
+		return
+	}
+
 	var req ShellChatRequest
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		writeError(w, err.Error(), http.StatusBadRequest)
@@ -67,142 +43,237 @@ func (s *Server) handleShellChat(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	s.shellConvStore.Add("user", req.Message)
+
 	orb, err := orchestrator.New(s.config)
 	if err != nil {
 		writeError(w, err.Error(), http.StatusServiceUnavailable)
 		return
 	}
 
-	orb.SetSystemPrompt(s.buildShellSystemPrompt(req))
-	orb.SetTools(s.agentToolsJSON)
+	orb.SetSystemPrompt(s.buildShellSystemPromptV2(req))
 
 	if req.Stream {
-		s.handleShellChatStream(w, orb, req)
+		s.handleShellChatStreamV2(w, orb)
 	} else {
-		s.handleShellChatNonStream(w, orb, req)
+		s.handleShellChatNonStreamV2(w, orb)
 	}
 }
 
-func (s *Server) buildShellSystemPrompt(req ShellChatRequest) string {
+func (s *Server) buildShellSystemPromptV2(_ ShellChatRequest) string {
 	var sb strings.Builder
 
-	sb.WriteString(`Tu es l'assistant Shell de Muyue. Tu as accès à un terminal et peux aider l'utilisateur avec:
-- Exécuter des commandes shell
-- Expliquer des erreurs de commandes
-- Suggérer des commandes appropriées pour la tâche demandée
-- Lire et explorer des fichiers
-- Configurer l'environnement de développement
+	sb.WriteString(`Tu es l'Analyste Système de Muyue. Tu es un expert en administration système et développement.
+Tu aides l'utilisateur à comprendre son système, diagnostiquer des problèmes, et optimiser son environnement.
 
-Tu peux appeler des outils pour exécuter des commandes, lire des fichiers, etc. Sois précis et concis dans tes réponses.
+RÈGLES STRICTES:
+- Tu ne peux JAMAIS exécuter de commande ou de code
+- Tu ne peux que analyser, expliquer, et proposer des solutions
+- Quand tu proposes du code ou des commandes, mets-les dans des blocs de code markdown avec le langage spécifié
+- L'utilisateur pourra les copier ou les envoyer directement au terminal depuis les boutons
 
 `)
 
-	if req.Cwd != "" {
-		sb.WriteString("Répertoire courant: " + req.Cwd + "\n")
+	analysis := LoadSystemAnalysis()
+	if analysis != "" {
+		sb.WriteString("=== ANALYSE SYSTÈME ACTUELLE ===\n")
+		sb.WriteString(analysis)
+		sb.WriteString("\n=== FIN DE L'ANALYSE ===\n\n")
 	}
-	if req.Platform != "" {
-		sb.WriteString("Plateforme: " + req.Platform + "\n")
-	}
-	if req.Context != "" {
-		sb.WriteString("\nContexte du terminal:\n" + req.Context + "\n")
-	}
-	if len(req.History) > 0 {
-		sb.WriteString("\nDernières commandes exécutées:\n")
-		for _, h := range req.History {
-			sb.WriteString("  " + h + "\n")
-		}
+
+	sb.WriteString(fmt.Sprintf("OS: %s/%s\n", runtime.GOOS, runtime.GOARCH))
+	if hostname, err := os.Hostname(); err == nil {
+		sb.WriteString("Hostname: " + hostname + "\n")
 	}
 
 	return sb.String()
 }
 
-func (s *Server) handleShellChatStream(w http.ResponseWriter, orb *orchestrator.Orchestrator, req ShellChatRequest) {
+func (s *Server) handleShellChatStreamV2(w http.ResponseWriter, orb *orchestrator.Orchestrator) {
 	SetupSSEHeaders(w)
 	flusher, canFlush := w.(http.Flusher)
 	sseWriter := NewSSEWriter(w)
 
-	ctx := context.Background()
-	messages := []orchestrator.Message{
-		{Role: "user", Content: req.Message},
+	// Rebuild history into orchestrator
+	history := s.shellConvStore.Get()
+	for _, m := range history[:len(history)-1] { // all except last user msg
+		if m.Role == "system" {
+			continue
+		}
+		// Pre-load orchestrator history
+		orb.AppendHistory(orchestrator.Message{Role: m.Role, Content: m.Content})
 	}
 
-	engine := NewChatEngine(orb, s.agentRegistry, s.agentToolsJSON)
+	lastUserMsg := history[len(history)-1].Content
 
-	var toolCalls []ToolCallInfo
-	engine.OnChunk(func(data map[string]interface{}) {
-		if data == nil {
-			return
-		}
-		sseWriter.Write(data)
+	var finalContent string
+	result, err := orb.SendStream(lastUserMsg, func(chunk string) {
+		finalContent = chunk
+		sseWriter.Write(map[string]interface{}{"content": chunk})
 		if canFlush {
 			flusher.Flush()
 		}
-		if tc, ok := data["tool_call"].(map[string]interface{}); ok {
-			argsMap := make(map[string]interface{})
-			if args, ok := tc["args"].(string); ok {
-				json.Unmarshal([]byte(args), &argsMap)
-			}
-			toolCalls = append(toolCalls, ToolCallInfo{
-				ID:   toString(tc["tool_call_id"]),
-				Name: toString(tc["name"]),
-				Args: argsMap,
-			})
-		}
-		if tr, ok := data["tool_result"].(map[string]interface{}); ok {
-			tcID := toString(tr["tool_call_id"])
-			for i := range toolCalls {
-				if toolCalls[i].ID == tcID {
-					if err, ok := tr["is_error"].(bool); ok && err {
-						toolCalls[i].Error = toString(tr["content"])
-					} else {
-						toolCalls[i].Result = &toolResponseData{
-							Content: toString(tr["content"]),
-							IsError: toBool(tr["is_error"]),
-						}
-					}
-					break
-				}
-			}
-		}
 	})
 
-	finalContent, _, _, err := engine.RunWithTools(ctx, messages)
 	if err != nil {
 		sseWriter.Write(map[string]interface{}{"error": err.Error()})
 		return
 	}
 
-	if finalContent == "" && len(toolCalls) > 0 {
-		finalContent = "(opérations terminées)"
+	content := result
+	if content == "" {
+		content = finalContent
 	}
 
-	writeJSONResp, _ := json.Marshal(ShellChatResponse{
-		Content:   finalContent,
-		ToolCalls: toolCalls,
+	s.shellConvStore.Add("assistant", cleanThinkingTags(content))
+
+	sseWriter.Write(map[string]interface{}{
+		"done":   "true",
+		"tokens": s.shellConvStore.ApproxTokens(),
 	})
-	sseWriter.Write(map[string]interface{}{"done": true, "response": string(writeJSONResp)})
 }
 
-func (s *Server) handleShellChatNonStream(w http.ResponseWriter, orb *orchestrator.Orchestrator, req ShellChatRequest) {
-	ctx := context.Background()
-	messages := []orchestrator.Message{
-		{Role: "user", Content: req.Message},
+func (s *Server) handleShellChatNonStreamV2(w http.ResponseWriter, orb *orchestrator.Orchestrator) {
+	history := s.shellConvStore.Get()
+	for _, m := range history[:len(history)-1] {
+		if m.Role == "system" {
+			continue
+		}
+		orb.AppendHistory(orchestrator.Message{Role: m.Role, Content: m.Content})
 	}
 
-	engine := NewChatEngine(orb, s.agentRegistry, s.agentToolsJSON)
+	lastUserMsg := history[len(history)-1].Content
 
-	finalContent, err := engine.RunNonStream(ctx, messages)
+	result, err := orb.Send(lastUserMsg)
 	if err != nil {
 		writeError(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
 
-	if finalContent == "" {
-		finalContent = "(tool calls completed, no text response)"
+	s.shellConvStore.Add("assistant", cleanThinkingTags(result))
+	writeJSON(w, map[string]interface{}{
+		"content": result,
+		"tokens":  s.shellConvStore.ApproxTokens(),
+	})
+}
+
+func (s *Server) handleShellChatHistory(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "GET" {
+		writeError(w, "GET only", http.StatusMethodNotAllowed)
+		return
+	}
+	messages := s.shellConvStore.Get()
+	writeJSON(w, map[string]interface{}{
+		"messages":   messages,
+		"tokens":     s.shellConvStore.ApproxTokens(),
+		"max_tokens": shellMaxTokens,
+		"at_limit":   s.shellConvStore.AtLimit(),
+	})
+}
+
+func (s *Server) handleShellChatClear(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		writeError(w, "POST only", http.StatusMethodNotAllowed)
+		return
+	}
+	s.shellConvStore.Clear()
+	writeJSON(w, map[string]interface{}{
+		"status": "ok",
+		"tokens": 0,
+	})
+}
+
+func (s *Server) handleShellAnalyze(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		writeError(w, "POST only", http.StatusMethodNotAllowed)
+		return
 	}
 
-	writeJSON(w, ShellChatResponse{
-		Content:   finalContent,
-		ToolCalls: nil,
+	var sysInfo strings.Builder
+	sysInfo.WriteString("=== INFORMATIONS SYSTÈME ===\n")
+	sysInfo.WriteString(fmt.Sprintf("OS: %s/%s\n", runtime.GOOS, runtime.GOARCH))
+	if hostname, err := os.Hostname(); err == nil {
+		sysInfo.WriteString("Hostname: " + hostname + "\n")
+	}
+	if user := os.Getenv("USER"); user != "" {
+		sysInfo.WriteString("User: " + user + "\n")
+	}
+
+	if data, err := os.ReadFile("/proc/cpuinfo"); err == nil {
+		for _, line := range strings.Split(string(data), "\n") {
+			if strings.HasPrefix(line, "model name") {
+				sysInfo.WriteString("CPU: " + strings.SplitN(line, ":", 2)[1] + "\n")
+				break
+			}
+		}
+	}
+
+	if data, err := os.ReadFile("/proc/meminfo"); err == nil {
+		for _, line := range strings.Split(string(data), "\n") {
+			if strings.HasPrefix(line, "MemTotal:") || strings.HasPrefix(line, "MemAvailable:") {
+				sysInfo.WriteString(strings.TrimSpace(line) + "\n")
+			}
+		}
+	}
+
+	if out, err := exec.Command("df", "-h", "/").Output(); err == nil {
+		lines := strings.Split(string(out), "\n")
+		if len(lines) >= 2 {
+			sysInfo.WriteString("Disk: " + strings.TrimSpace(lines[1]) + "\n")
+		}
+	}
+
+	if out, err := exec.Command("ps", "aux", "--sort=-pcpu").Output(); err == nil {
+		lines := strings.Split(string(out), "\n")
+		sysInfo.WriteString(fmt.Sprintf("\nProcessus actifs (%d total):\n", len(lines)-1))
+		for i := 1; i < len(lines) && i <= 10; i++ {
+			fields := strings.Fields(lines[i])
+			if len(fields) >= 11 {
+				sysInfo.WriteString(fmt.Sprintf("  %-20s CPU:%-6s MEM:%-6s %s\n", fields[10], fields[2]+"%", fields[3]+"%", fields[0]))
+			}
+		}
+	}
+
+	if s.scanResult != nil {
+		sysInfo.WriteString("\nOutils installés:\n")
+		for _, t := range s.scanResult.Tools {
+			status := "✗"
+			if t.Installed {
+				status = "✓"
+			}
+			sysInfo.WriteString(fmt.Sprintf("  %s %s %s\n", status, t.Name, t.Version))
+		}
+	}
+
+	orb, err := orchestrator.New(s.config)
+	if err != nil {
+		writeError(w, err.Error(), http.StatusServiceUnavailable)
+		return
+	}
+	orb.SetSystemPrompt(agent.StudioSystemPrompt())
+
+	analysisPrompt := `Tu es un expert en administration système. Analyse les informations suivantes sur le système de l'utilisateur.
+Génère un rapport d'analyse concis et structuré en markdown qui inclut:
+1. Un résumé de l'état du système
+2. Les points d'attention (performance, sécurité, configuration)
+3. Des recommandations spécifiques d'optimisation
+4. Les outils manquants qui pourraient être utiles
+5. L'état du réseau et des connexions
+
+Sois concret et technique. Le rapport sera utilisé comme contexte pour un assistant terminal.
+
+` + sysInfo.String()
+
+	result, err := orb.Send(analysisPrompt)
+	if err != nil {
+		writeError(w, "analysis failed: "+err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	SaveSystemAnalysis(result)
+
+	writeJSON(w, map[string]interface{}{
+		"status":   "ok",
+		"analysis": result,
 	})
-}
+}

internal/api/server.go

@@ -17,6 +17,7 @@ type Server struct {
 	scanResult     *scanner.ScanResult
 	mux            *http.ServeMux
 	convStore      *ConversationStore
+	shellConvStore *ShellConvStore
 	agentRegistry  *agent.Registry
 	agentToolsJSON json.RawMessage
 	workflowEngine *workflow.Engine
@@ -46,6 +47,7 @@ func NewServer(cfg *config.MuyueConfig) *Server {
 	s.config = cfg
 	s.scanResult = scanner.ScanSystem()
 	s.convStore = NewConversationStore()
+	s.shellConvStore = NewShellConvStore()
 	s.agentRegistry = agent.DefaultRegistry()
 	tools := s.agentRegistry.OpenAITools()
 	toolsJSON, _ := json.Marshal(tools)
@@ -89,6 +91,9 @@ func (s *Server) routes() {
 	s.mux.HandleFunc("/api/tool/call", s.handleToolCall)
 	s.mux.HandleFunc("/api/tools/list", s.handleToolList)
 	s.mux.HandleFunc("/api/shell/chat", s.handleShellChat)
+	s.mux.HandleFunc("/api/shell/chat/history", s.handleShellChatHistory)
+	s.mux.HandleFunc("/api/shell/chat/clear", s.handleShellChatClear)
+	s.mux.HandleFunc("/api/shell/analyze", s.handleShellAnalyze)
 	s.mux.HandleFunc("/api/workflow", s.handleWorkflowCreate)
 	s.mux.HandleFunc("/api/workflow/list", s.handleWorkflowList)
 	s.mux.HandleFunc("/api/workflow/", s.handleWorkflowGet)

internal/api/shell_conversation.go

@@ -0,0 +1,121 @@
+package api
+
+import (
+	"encoding/json"
+	"os"
+	"path/filepath"
+	"sync"
+	"time"
+	"unicode/utf8"
+
+	"github.com/muyue/muyue/internal/config"
+)
+
+const shellMaxTokens = 100000
+const shellCharsPerToken = 4
+
+type ShellMessage struct {
+	ID      string `json:"id"`
+	Role    string `json:"role"`
+	Content string `json:"content"`
+	Time    string `json:"time"`
+}
+
+type ShellConvStore struct {
+	mu   sync.RWMutex
+	path string
+	msgs []ShellMessage
+}
+
+func NewShellConvStore() *ShellConvStore {
+	dir, err := config.ConfigDir()
+	if err != nil {
+		dir = "/tmp/muyue"
+	}
+	path := filepath.Join(dir, "shell_conversation.json")
+	s := &ShellConvStore{path: path}
+	s.load()
+	return s
+}
+
+func (s *ShellConvStore) load() {
+	data, err := os.ReadFile(s.path)
+	if err != nil {
+		s.msgs = []ShellMessage{}
+		return
+	}
+	json.Unmarshal(data, &s.msgs)
+	if s.msgs == nil {
+		s.msgs = []ShellMessage{}
+	}
+}
+
+func (s *ShellConvStore) save() {
+	data, _ := json.MarshalIndent(s.msgs, "", "  ")
+	os.MkdirAll(filepath.Dir(s.path), 0755)
+	os.WriteFile(s.path, data, 0600)
+}
+
+func (s *ShellConvStore) Get() []ShellMessage {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	out := make([]ShellMessage, len(s.msgs))
+	copy(out, s.msgs)
+	return out
+}
+
+func (s *ShellConvStore) Add(role, content string) ShellMessage {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	msg := ShellMessage{
+		ID:      time.Now().Format("20060102150405.000"),
+		Role:    role,
+		Content: content,
+		Time:    time.Now().Format(time.RFC3339),
+	}
+	s.msgs = append(s.msgs, msg)
+	s.save()
+	return msg
+}
+
+func (s *ShellConvStore) Clear() {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	s.msgs = []ShellMessage{}
+	s.save()
+}
+
+func (s *ShellConvStore) ApproxTokens() int {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	total := 0
+	for _, m := range s.msgs {
+		total += utf8.RuneCountInString(m.Content) / shellCharsPerToken
+	}
+	return total
+}
+
+func (s *ShellConvStore) AtLimit() bool {
+	return s.ApproxTokens() >= shellMaxTokens
+}
+
+func LoadSystemAnalysis() string {
+	dir, err := config.ConfigDir()
+	if err != nil {
+		return ""
+	}
+	data, err := os.ReadFile(filepath.Join(dir, "system_analysis.md"))
+	if err != nil {
+		return ""
+	}
+	return string(data)
+}
+
+func SaveSystemAnalysis(content string) error {
+	dir, err := config.ConfigDir()
+	if err != nil {
+		return err
+	}
+	os.MkdirAll(dir, 0755)
+	return os.WriteFile(filepath.Join(dir, "system_analysis.md"), []byte(content), 0644)
+}

web/src/api/client.js

@@ -57,6 +57,9 @@ const api = {
   getChatHistory: () => request('/chat/history'),
   clearChat: () => request('/chat/clear', { method: 'POST' }),
   summarizeChat: () => request('/chat/summarize', { method: 'POST' }),
+  getShellChatHistory: () => request('/shell/chat/history'),
+  clearShellChat: () => request('/shell/chat/clear', { method: 'POST' }),
+  analyzeSystem: () => request('/shell/analyze', { method: 'POST' }),
   sendChat: (message, stream = true, onChunk, signal) => {
     if (!stream) {
       return request('/chat', { method: 'POST', body: JSON.stringify({ message, stream: false }) })
@@ -104,8 +107,6 @@ const api = {
   sendShellChat: (message, context = {}, stream = true, onChunk) => {
     const payload = {
       message,
-      context: context.context || '',
-      history: context.history || [],
       cwd: context.cwd || '',
       platform: context.platform || '',
       stream,
@@ -127,7 +128,6 @@ const api = {
         const reader = res.body.getReader()
         const decoder = new TextDecoder()
         let full = ''
-        let toolCalls = []
         while (true) {
           const { done, value } = await reader.read()
           if (done) break
@@ -137,27 +137,15 @@ const api = {
             try {
               const data = JSON.parse(line.slice(6))
               if (data.error) { reject(new Error(data.error)); return }
-              if (data.done) {
-                resolve({ content: full, tool_calls: toolCalls })
-                return
-              }
+              if (data.done) { resolve({ content: full, tokens: data.tokens }); return }
               if (data.content) {
-                full += data.content
+                full = data.content
                 if (onChunk) onChunk(full, data)
-              } else if (data.tool_call) {
-                toolCalls.push(data.tool_call)
-                if (onChunk) onChunk(full, data, toolCalls)
-              } else if (data.tool_result) {
-                const idx = toolCalls.findIndex(tc => tc.tool_call_id === data.tool_result.id)
-                if (idx >= 0) {
-                  toolCalls[idx].result = data.tool_result
-                }
-                if (onChunk) onChunk(full, data, toolCalls)
               }
             } catch {}
           }
         }
-        resolve({ content: full, tool_calls: toolCalls })
+        resolve({ content: full })
       }).catch(reject)
     })
   },

web/src/components/App.jsx

@@ -92,16 +92,6 @@ export default function App() {
     config: [],
   }), [layout, t])
 
-  const renderContent = () => {
-    switch (activeTab) {
-      case 'dash': return <Dashboard api={api} refreshRef={dashRefreshRef} />
-      case 'studio': return <Studio api={api} />
-      case 'shell': return <Shell api={api} />
-      case 'config': return <Config api={api} />
-      default: return null
-    }
-  }
-
   return (
     <div className="app-layout">
       <header className="header">
@@ -143,8 +133,11 @@ export default function App() {
         </span>
       </header>
 
-      <main className="content fade-in" key={`${activeTab}-${TABS.length}`}>
-        {renderContent()}
+      <main className="content">
+        <div className={activeTab === 'dash' ? '' : 'tab-hidden'}><Dashboard api={api} refreshRef={dashRefreshRef} /></div>
+        <div className={activeTab === 'studio' ? '' : 'tab-hidden'}><Studio api={api} /></div>
+        <div className={activeTab === 'shell' ? '' : 'tab-hidden'}><Shell api={api} /></div>
+        <div className={activeTab === 'config' ? '' : 'tab-hidden'}><Config api={api} /></div>
       </main>
 
       <footer className="statusbar">

web/src/components/Config.jsx

@@ -220,28 +220,47 @@ function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEdi
 
   if (!profile) {
     return (
-      <div className="config-card">
-        <div className="empty-state">{t('config.loadingProfile')}</div>
+      <div className="config-profile-center">
+        <div className="config-card">
+          <div className="empty-state">{t('config.loadingProfile')}</div>
+        </div>
       </div>
     )
   }
 
+  const personalKeys = Object.entries(profile).filter(([k, v]) => k !== 'preferences' && typeof v !== 'object')
+  const personalObj = Object.fromEntries(personalKeys)
+  const preferences = profile.preferences || null
+
   return (
-    <div className="config-card">
-      <RenderFields obj={profile} path="" editing={editProfile} onChange={updateField} t={t} />
-      <div className="config-card-actions">
-        {editProfile ? (
-          <>
-            <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
-            <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
-          </>
+    <div className="config-profile-center">
+      <div className="config-card">
+        <div className="section-title">{t('config.profileInfo') || 'Informations personnelles'}</div>
+        <RenderFields obj={personalObj} path="" editing={editProfile} onChange={updateField} t={t} />
+      </div>
+      <div className="config-card">
+        <div className="section-title">{t('config.profilePrefs') || 'Préférences'}</div>
+        {preferences ? (
+          <RenderFields obj={preferences} path="preferences" editing={editProfile} onChange={updateField} t={t} />
         ) : (
-          <button className="primary sm" onClick={() => {
-            setProfileForm(config.profile ? JSON.parse(JSON.stringify(config.profile)) : {})
-            setEditProfile(true)
-          }}>{t('config.editProfile')}</button>
+          <div className="config-card-row"><span className="config-card-value" style={{ color: 'var(--text-disabled)' }}>—</span></div>
         )}
       </div>
+      <div className="config-card">
+        <div className="config-card-actions" style={{ justifyContent: 'center' }}>
+          {editProfile ? (
+            <>
+              <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
+              <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
+            </>
+          ) : (
+            <button className="primary sm" onClick={() => {
+              setProfileForm(config.profile ? JSON.parse(JSON.stringify(config.profile)) : {})
+              setEditProfile(true)
+            }}>{t('config.editProfile')}</button>
+          )}
+        </div>
+      </div>
     </div>
   )
 }
@@ -249,19 +268,10 @@ function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEdi
 function RenderFields({ obj, path, editing, onChange, t }) {
   if (!obj || typeof obj !== 'object') return null
 
-  return Object.entries(obj).map(([key, value]) => {
+  return Object.entries(obj).filter(([, v]) => v === null || typeof v !== 'object').map(([key, value]) => {
     const fieldPath = path ? `${path}.${key}` : key
     const label = getFieldLabel(key, t)
 
-    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-      return (
-        <div key={key} className="config-card-group">
-          <span className="config-card-group-label">{label}</span>
-          <RenderFields obj={value} path={fieldPath} editing={editing} onChange={onChange} t={t} />
-        </div>
-      )
-    }
-
     if (editing) {
       if (typeof value === 'boolean') {
         return (
@@ -342,19 +352,21 @@ function PanelProviders({ providers, editProvider, providerForm, setProviderForm
     setValidating(null)
   }
 
+  const displayed = providers.filter(p => p.name === 'minimax' || p.name === 'zai')
+
   return (
     <div className="config-providers-list">
-      <div className="provider-setup-hint">{t('config.setupDescription')}</div>
-      {providers.map((p, i) => {
+      {displayed.map((p, i) => {
         const isEditing = editProvider === p.name
         const isValidationTarget = validationStatus?.provider === p.name
+        const currentModel = providerForm[p.name]?.model || p.model
+
         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>}
+                <span className="provider-card-name">{p.name.toUpperCase()}</span>
+                {p.active && <span className="badge ok" style={{ marginLeft: 6 }}>active</span>}
                 {isValidationTarget && validationStatus?.valid && <span className="badge ok">{t('config.keyValid')}</span>}
                 {isValidationTarget && !validationStatus?.valid && <span className="badge error">{validationStatus?.error}</span>}
               </div>
@@ -367,7 +379,7 @@ function PanelProviders({ providers, editProvider, providerForm, setProviderForm
                   <input
                     className="config-form-input"
                     type="password"
-                    placeholder={t('config.tokenPlaceholder')}
+                    placeholder={p.apiKey ? '••••••••' : t('config.tokenPlaceholder')}
                     value={isEditing ? (providerForm[p.name]?.api_key || '') : ''}
                     onChange={e => {
                       if (!isEditing) openProviderEdit(p)
@@ -382,18 +394,29 @@ function PanelProviders({ providers, editProvider, providerForm, setProviderForm
                   <button
                     className="sm primary"
                     disabled={validating === p.name || !providerForm[p.name]?.api_key}
-                    onClick={() => handleValidate(p.name, providerForm[p.name]?.api_key, providerForm[p.name]?.model, providerForm[p.name]?.base_url)}
+                    onClick={() => handleValidate(p.name, providerForm[p.name]?.api_key, currentModel, providerForm[p.name]?.base_url)}
                   >
                     {validating === p.name ? t('config.validating') : t('config.validateKey')}
                   </button>
-                  {isValidationTarget && validationStatus?.valid && (
+                  {isEditing && (
                     <button className="sm" onClick={() => handleSaveProvider(p.name)}>{t('config.save')}</button>
                   )}
                 </div>
               </div>
               <div className="provider-card-meta" style={{ marginTop: 8 }}>
-                {p.active && <span className="badge ok" style={{ marginRight: 6 }}>active</span>}
-                {p.model && p.model !== p.name && <span className="mono">{p.model}</span>}
+                <span className="config-form-label">{t('config.model')}</span>
+                <input
+                  className="config-form-input"
+                  value={currentModel || ''}
+                  onChange={e => {
+                    setProviderForm(prev => ({
+                      ...prev,
+                      [p.name]: { ...(prev[p.name] || {}), model: e.target.value },
+                    }))
+                    setEditProvider(p.name)
+                  }}
+                  placeholder="model-name"
+                />
               </div>
             </div>
           </div>
@@ -462,6 +485,10 @@ function PanelUpdates({ updates, checking, updating, needsUpdateCount, installed
 }
 
 function PanelLocale({ language, keyboard, layouts, api, t }) {
+  const { setLanguage, setKeyboard } = useI18n()
+  const [editLocale, setEditLocale] = useState(false)
+  const [draftLang, setDraftLang] = useState(language)
+  const [draftKbd, setDraftKbd] = useState(keyboard)
   const [saving, setSaving] = useState(false)
   const [toast, setToast] = useState(null)
 
@@ -473,7 +500,10 @@ function PanelLocale({ language, keyboard, layouts, api, t }) {
   const handleSave = async () => {
     setSaving(true)
     try {
-      await api.savePreferences({ language, keyboard_layout: keyboard })
+      await api.savePreferences({ language: draftLang, keyboard_layout: draftKbd })
+      setLanguage(draftLang)
+      setKeyboard(draftKbd)
+      setEditLocale(false)
       showToast(t('config.saved'))
     } catch (err) {
       showToast(`${t('config.error')}: ${err.message}`)
@@ -481,71 +511,149 @@ function PanelLocale({ language, keyboard, layouts, api, t }) {
     setSaving(false)
   }
 
+  const currentLang = LANGUAGES.find(l => l.id === language)
+  const currentKbd = layouts.find(l => l.id === keyboard)
+
   return (
-    <div className="config-card">
+    <div className="config-profile-center">
       {toast && <div className="config-toast">{toast}</div>}
-      <div className="config-card-group">
-        <span className="config-card-group-label">{t('config.language')}</span>
-        <div className="chip-row">
-          {LANGUAGES.map(lang => (
-            <div
-              key={lang.id}
-              className={`chip ${language === lang.id ? 'active' : ''}`}
-              onClick={() => setLanguage(lang.id)}
-            >
-              {lang.name}
-            </div>
-          ))}
+      <div className="config-card">
+        <div className="config-card-row">
+          <span className="config-card-label">{t('config.language')}</span>
+          <span className="config-card-value">{currentLang?.name || language}</span>
+        </div>
+        <div className="config-card-row">
+          <span className="config-card-label">{t('config.keyboardLayout')}</span>
+          <span className="config-card-value">{currentKbd?.name || keyboard}</span>
         </div>
       </div>
-      <div className="config-card-group">
-        <span className="config-card-group-label">{t('config.keyboardLayout')}</span>
-        <div className="chip-row">
-          {layouts.map(l => (
-            <div
-              key={l.id}
-              className={`chip ${keyboard === l.id ? 'active' : ''}`}
-              onClick={() => setKeyboard(l.id)}
-            >
-              {l.name}
+      {editLocale && (
+        <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
+                  key={lang.id}
+                  className={`chip ${draftLang === lang.id ? 'active' : ''}`}
+                  onClick={() => setDraftLang(lang.id)}
+                >
+                  {lang.name}
+                </div>
+              ))}
             </div>
-          ))}
+          </div>
+          <div className="config-card-group">
+            <span className="config-card-group-label">{t('config.keyboardLayout')}</span>
+            <div className="chip-row">
+              {layouts.map(l => (
+                <div
+                  key={l.id}
+                  className={`chip ${draftKbd === l.id ? 'active' : ''}`}
+                  onClick={() => setDraftKbd(l.id)}
+                >
+                  {l.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="config-card">
+        <div className="config-card-actions" style={{ justifyContent: 'center' }}>
+          {editLocale ? (
+            <>
+              <button className="primary sm" onClick={handleSave} disabled={saving}>
+                {saving ? t('config.saving') : t('config.save')}
+              </button>
+              <button className="ghost sm" onClick={() => setEditLocale(false)}>{t('config.cancel')}</button>
+            </>
+          ) : (
+            <button className="primary sm" onClick={() => { setDraftLang(language); setDraftKbd(keyboard); setEditLocale(true) }}>{t('config.editProfile')}</button>
+          )}
         </div>
-      </div>
-      <div className="config-card-actions">
-        <button className="primary sm" onClick={handleSave} disabled={saving}>
-          {saving ? t('config.saving') : t('config.save')}
-        </button>
       </div>
     </div>
   )
 }
 
 function PanelSkills({ skillList, t }) {
+  const [selected, setSelected] = useState(null)
+
+  if (skillList.length === 0) {
+    return <div className="empty-state" style={{ color: 'var(--text-disabled)', padding: 40 }}>{t('config.noSkills')}</div>
+  }
+
   return (
-    <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>
-            {s.version && <span className="badge" style={{ fontSize: 10 }}>{s.version}</span>}
-            {s.category && <span className="badge" style={{ fontSize: 10, opacity: 0.7 }}>{s.category}</span>}
-            <span className="config-skill-desc">{s.description}</span>
-            {s.dependencies && s.dependencies.length > 0 && (
-              <div style={{ marginTop: 4, fontSize: 10, color: 'var(--muted)' }}>
-                deps: {s.dependencies.map(d => d.name).join(', ')}
-              </div>
-            )}
+    <>
+      <div className="skill-tiles">
+        {skillList.map((s, i) => (
+          <div key={i} className="skill-tile" onClick={() => setSelected(s)}>
+            <div className="skill-tile-name">{s.name}</div>
+            <div className="skill-tile-desc">{s.description}</div>
+            <div className="skill-tile-tags">
+              {s.target && <span className="badge neutral">{s.target}</span>}
+              {s.version && <span className="badge">{s.version}</span>}
+              {s.category && <span className="badge" style={{ opacity: 0.7 }}>{s.category}</span>}
+            </div>
           </div>
-        ))
+        ))}
+      </div>
+      {selected && (
+        <div className="skill-detail-overlay" onClick={() => setSelected(null)}>
+          <div className="skill-detail-panel" onClick={e => e.stopPropagation()}>
+            <div className="skill-detail-header">
+              <span className="skill-detail-name">{selected.name}</span>
+              <button className="ghost sm" onClick={() => setSelected(null)}>✕</button>
+            </div>
+            <div className="skill-detail-body">
+              <div className="skill-detail-section">
+                <div className="skill-detail-label">Description</div>
+                <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{selected.description}</div>
+              </div>
+              <div className="skill-detail-section">
+                <div className="skill-detail-label">Métadonnées</div>
+                <div className="skill-detail-meta">
+                  {selected.target && <span className="badge neutral">{selected.target}</span>}
+                  {selected.version && <span className="badge">{selected.version}</span>}
+                  {selected.category && <span className="badge">{selected.category}</span>}
+                  {selected.author && <span className="badge ghost">{selected.author}</span>}
+                  {selected.languages && selected.languages.map(l => <span key={l} className="badge ghost">{l}</span>)}
+                </div>
+              </div>
+              {selected.tags && selected.tags.length > 0 && (
+                <div className="skill-detail-section">
+                  <div className="skill-detail-label">Tags</div>
+                  <div className="chip-row">
+                    {selected.tags.map(tag => <span key={tag} className="badge">{tag}</span>)}
+                  </div>
+                </div>
+              )}
+              {selected.content && (
+                <div className="skill-detail-section">
+                  <div className="skill-detail-label">Contenu</div>
+                  <div className="skill-detail-content">{selected.content}</div>
+                </div>
+              )}
+              {selected.dependencies && selected.dependencies.length > 0 && (
+                <div className="skill-detail-section">
+                  <div className="skill-detail-label">Dépendances</div>
+                  <div className="skill-detail-deps">
+                    {selected.dependencies.map((d, i) => (
+                      <div key={i} className="skill-detail-dep">
+                        <span className="badge">{d.type}</span>
+                        <span>{d.name}</span>
+                        {d.required === false && <span style={{ fontSize: 11, color: 'var(--text-disabled)' }}>optionnel</span>}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
       )}
-    </div>
+    </>
   )
 }
 

web/src/components/Dashboard.jsx

@@ -3,6 +3,9 @@ import { useI18n } from '../i18n'
 
 const MAX_POINTS = 30
 
+const POLL_INTERVAL = 5000
+const MAX_IDLE_POLLS = 3
+
 function MiniGraph({ data, max, color, label, unit }) {
   if (!data || data.length < 2) return <div className="dash-graph-empty">collecting...</div>
   const m = max || Math.max(...data, 1)
@@ -71,13 +74,39 @@ export default function Dashboard({ api, refreshRef }) {
   useEffect(() => {
     loadData()
     if (refreshRef) refreshRef.current = loadData
-    const iv = setInterval(loadData, 5000)
-    return () => clearInterval(iv)
+    let active = true
+    let idleTicks = 0
+    const iv = setInterval(() => {
+      const hidden = document.querySelector('.dash-grid')?.closest('.tab-hidden')
+      if (hidden) {
+        idleTicks++
+        if (idleTicks >= MAX_IDLE_POLLS) return
+      } else {
+        idleTicks = 0
+      }
+      if (active) loadData()
+    }, POLL_INTERVAL)
+    return () => { active = false; clearInterval(iv) }
   }, [loadData, refreshRef])
 
   const minimax = (quota || []).find(p => p.name === 'minimax')
   const zai = (quota || []).find(p => p.name === 'zai')
 
+  const EXCLUDE_CMDS = ['ls', 'cd', 'pwd', 'clear', 'exit', 'history']
+
+  const topCmds = (() => {
+    const counts = {}
+    for (const c of recentCmds) {
+      const base = c.cmd.split(/\s+/)[0]
+      if (EXCLUDE_CMDS.includes(base) || !base) continue
+      counts[base] = (counts[base] || 0) + 1
+    }
+    return Object.entries(counts)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5)
+      .map(([cmd, count]) => ({ cmd, count }))
+  })()
+
   return (
     <div className="dash-grid">
       {/* CPU */}
@@ -161,6 +190,16 @@ export default function Dashboard({ api, refreshRef }) {
         <div className="dash-card-head">
           <span className="dash-label">Recent Commands</span>
         </div>
+        {topCmds.length > 0 && (
+          <div className="dash-cmd-top">
+            {topCmds.map((c, i) => (
+              <div key={i} className="dash-cmd-chip" onClick={() => navigator.clipboard.writeText(c.cmd)} title="Copier">
+                <span className="dash-cmd-chip-name">{c.cmd}</span>
+                <span className="dash-cmd-chip-count">{c.count}×</span>
+              </div>
+            ))}
+          </div>
+        )}
         <div className="dash-cmd-list">
           {recentCmds.length === 0 && <span className="dash-empty">No history</span>}
           {recentCmds.map((c, i) => (

web/src/components/Shell.jsx

@@ -2,11 +2,12 @@ import { useState, useRef, useEffect, useCallback } from 'react'
 import { Terminal as XTerm } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import { WebLinksAddon } from '@xterm/addon-web-links'
-import { Plus, X, Monitor, Globe, ChevronDown, Pencil, Trash2 } from 'lucide-react'
+import { Plus, X, Monitor, Globe, ChevronDown, Pencil, Trash2, Search, Copy, Send } from 'lucide-react'
 import '@xterm/xterm/css/xterm.css'
 import { useI18n } from '../i18n'
 
 const MAX_TABS = 7
+const SHELL_MAX_TOKENS = 100000
 
 const THEMES = {
   default: {
@@ -163,17 +164,35 @@ export default function Shell({ api }) {
     name: '', host: '', port: 22, user: '', key_path: '',
   })
 
-  const [aiMessages, setAiMessages] = useState([
-    { role: 'ai', content: t('shell.aiWelcome') }
-  ])
+  const [aiMessages, setAiMessages] = useState([])
   const [aiInput, setAiInput] = useState('')
   const [aiLoading, setAiLoading] = useState(false)
+  const [aiTokens, setAiTokens] = useState(0)
+  const [aiAtLimit, setAiAtLimit] = useState(false)
+  const [analyzing, setAnalyzing] = useState(false)
   const aiMessagesRef = useRef(null)
+  const aiLoadedRef = useRef(false)
 
   useEffect(() => {
     aiMessagesRef.current?.scrollTo(0, aiMessagesRef.current.scrollHeight)
   }, [aiMessages])
 
+  useEffect(() => {
+    if (aiLoadedRef.current) return
+    aiLoadedRef.current = true
+    api.getShellChatHistory().then(d => {
+      if (d.messages && d.messages.length > 0) {
+        setAiMessages(d.messages)
+      } else {
+        setAiMessages([{ role: 'assistant', content: t('shell.aiWelcome') || 'Système Analyste prêt. Tapez /help pour les commandes.' }])
+      }
+      setAiTokens(d.tokens || 0)
+      setAiAtLimit(d.at_limit || false)
+    }).catch(() => {
+      setAiMessages([{ role: 'assistant', content: 'Système Analyste prêt.' }])
+    })
+  }, [])
+
   useEffect(() => {
     api.getTerminalSessions().then(d => {
       setSshConnections(d.ssh || [])
@@ -372,57 +391,83 @@ export default function Shell({ api }) {
     }
   }
 
-  const handleAiSend = async () => {
-    if (!aiInput.trim() || aiLoading) return
-    const text = aiInput.trim()
-    setAiMessages(prev => [...prev, { role: 'user', content: text }])
-    setAiInput('')
-    setAiLoading(true)
+  const sendToTerminal = useCallback((code) => {
+    const tab = tabs.find(t => t.id === activeTab)
+    if (!tab) return
+    const entry = tabsRef.current[tab.id]
+    if (!entry?.ws || entry.ws.readyState !== WebSocket.OPEN) return
+    entry.ws.send(JSON.stringify({ type: 'input', data: code + '\r' }))
+  }, [tabs, activeTab])
 
-    const currentTab = tabs.find(t => t.id === activeTab)
-    const context = {
-      cwd: currentTab?.cwd || '',
-      platform: navigator.platform || '',
+  const handleAiSend = async () => {
+    if (!aiInput.trim() || aiLoading || aiAtLimit) return
+    const text = aiInput.trim()
+    setAiInput('')
+
+    if (text === '/clear') {
+      try {
+        await api.clearShellChat()
+        setAiMessages([{ role: 'assistant', content: t('shell.aiWelcome') || 'Contexte effacé. Prêt.' }])
+        setAiTokens(0)
+        setAiAtLimit(false)
+      } catch {}
+      return
     }
 
+    if (text === '/help') {
+      setAiMessages(prev => [...prev,
+        { role: 'user', content: text },
+        { role: 'assistant', content: 'Commandes disponibles:\n• /clear — Effacer la conversation\n• /help — Afficher l\'aide\n\nJe ne peux pas exécuter de code. Les blocs de code proposés peuvent être copiés ou envoyés directement au terminal actif.' }
+      ])
+      return
+    }
+
+    setAiMessages(prev => [...prev, { role: 'user', content: text }])
+    setAiLoading(true)
+
     try {
       let accumulated = ''
-      await api.sendShellChat(text, context, true, (partial, event) => {
-        if (event && event.tool_call) {
-          setAiMessages(prev => [...prev, {
-            role: 'tool',
-            content: `${t('shell.toolLaunched')}: ${event.tool_call.name || 'tool'}`,
-            args: event.tool_call.args ? JSON.stringify(event.tool_call.args).slice(0, 100) : '',
-          }])
-          return
-        }
-        if (event && event.tool_result) {
-          const resultText = event.tool_result.result?.content || event.tool_result.error || 'completed'
-          setAiMessages(prev => [...prev, {
-            role: 'tool_result',
-            content: resultText,
-            isError: event.tool_result.result?.is_error,
-          }])
-          return
-        }
-        if (event && event.done) return
+      await api.sendShellChat(text, {}, true, (partial) => {
         accumulated = partial
         setAiMessages(prev => {
           const filtered = prev.filter(m => !m._streaming)
-          return [...filtered, { role: 'ai', content: partial, _streaming: true }]
+          return [...filtered, { role: 'assistant', content: partial, _streaming: true }]
         })
       })
 
-      setAiMessages(prev => prev.filter(m => !m._streaming))
-      if (accumulated) {
-        setAiMessages(prev => [...prev.filter(m => !m._streaming), { role: 'ai', content: accumulated }])
-      }
+      setAiMessages(prev => {
+        const filtered = prev.filter(m => !m._streaming)
+        return [...filtered, { role: 'assistant', content: accumulated }]
+      })
+      // Refresh token count
+      api.getShellChatHistory().then(d => {
+        setAiTokens(d.tokens || 0)
+        setAiAtLimit(d.at_limit || false)
+      }).catch(() => {})
     } catch (err) {
-      setAiMessages(prev => [...prev.filter(m => !m._streaming), { role: 'ai', content: `${t('shell.error')}: ${err.message}` }])
+      if (err.message.includes('context limit')) {
+        setAiAtLimit(true)
+      }
+      setAiMessages(prev => [...prev.filter(m => !m._streaming), { role: 'assistant', content: `Erreur: ${err.message}` }])
     }
     setAiLoading(false)
   }
 
+  const handleAnalyze = async () => {
+    setAnalyzing(true)
+    setAiMessages(prev => [...prev, { role: 'system', content: 'Analyse du système en cours...' }])
+    try {
+      const d = await api.analyzeSystem()
+      setAiMessages(prev => [...prev.filter(m => m.content !== 'Analyse du système en cours...'), {
+        role: 'system',
+        content: 'Analyse système terminée et sauvegardée. Le contexte système est maintenant disponible.'
+      }])
+    } catch (err) {
+      setAiMessages(prev => prev.filter(m => m.content !== 'Analyse du système en cours...'))
+    }
+    setAnalyzing(false)
+  }
+
   return (
     <div className="shell-layout">
       <div className="shell-terminal-col">
@@ -538,13 +583,30 @@ export default function Shell({ api }) {
       </div>
 
       <div className="shell-ai-col">
-        <div className="ai-panel-header">{t('shell.aiAssistant')}</div>
+        <div className="ai-panel-header">
+          <span>Analyste Système</span>
+          <button
+            className="shell-analyze-btn"
+            onClick={handleAnalyze}
+            disabled={analyzing}
+            title="Analyser le système"
+          >
+            <Search size={13} />
+            {analyzing ? '...' : 'Analyser'}
+          </button>
+        </div>
+        <div className="shell-ai-token-bar">
+          <div className="shell-ai-token-track">
+            <div
+              className={`shell-ai-token-fill ${aiTokens >= SHELL_MAX_TOKENS * 0.8 ? 'warn' : ''}`}
+              style={{ width: `${Math.min(100, (aiTokens / SHELL_MAX_TOKENS) * 100)}%` }}
+            />
+          </div>
+          <span className="shell-ai-token-text">{Math.round(aiTokens / 1000)}k/{Math.round(SHELL_MAX_TOKENS / 1000)}k</span>
+        </div>
         <div className="ai-panel-messages" ref={aiMessagesRef}>
           {aiMessages.map((msg, i) => (
-            <div key={i} className={`ai-message ${msg.role}`}>
-              {msg.content}
-              {msg.args && <div className="tool-args">{msg.args}</div>}
-            </div>
+            <ShellAIMessage key={i} msg={msg} sendToTerminal={sendToTerminal} />
           ))}
           {aiLoading && <div style={{ textAlign: 'center', padding: 8 }}><span className="spinner" /></div>}
         </div>
@@ -553,9 +615,10 @@ export default function Shell({ api }) {
             value={aiInput}
             onChange={e => setAiInput(e.target.value)}
             onKeyDown={e => e.key === 'Enter' && handleAiSend()}
-            placeholder={t('shell.askAi')}
+            placeholder={aiAtLimit ? '/clear pour continuer' : t('shell.askAi')}
+            disabled={aiAtLimit && aiInput !== '/clear'}
           />
-          <button className="sm" onClick={handleAiSend} disabled={!aiInput.trim()}>{t('shell.send')}</button>
+          <button className="sm" onClick={handleAiSend} disabled={(!aiInput.trim() && !aiAtLimit) || (aiAtLimit && aiInput !== '/clear')}>{t('shell.send')}</button>
         </div>
       </div>
 
@@ -611,3 +674,50 @@ export default function Shell({ api }) {
     </div>
   )
 }
+
+function ShellAIMessage({ msg, sendToTerminal }) {
+  const role = msg.role === 'user' ? 'user' : msg.role === 'system' ? 'system' : 'assistant'
+  const parts = parseMarkdown(msg.content || '')
+
+  return (
+    <div className={`ai-message ${role}`}>
+      {parts.map((part, i) => {
+        if (part.type === 'code') {
+          return (
+            <div key={i} className="shell-code-block">
+              {part.lang && <div className="shell-code-lang">{part.lang}</div>}
+              <pre><code>{part.code}</code></pre>
+              <div className="shell-code-actions">
+                <button onClick={() => navigator.clipboard.writeText(part.code)} title="Copier">
+                  <Copy size={12} /> Copier
+                </button>
+                <button onClick={() => sendToTerminal(part.code)} title="Envoyer au terminal">
+                  <Send size={12} /> Terminal
+                </button>
+              </div>
+            </div>
+          )
+        }
+        return <span key={i}>{part.text}</span>
+      })}
+    </div>
+  )
+}
+
+function parseMarkdown(text) {
+  const parts = []
+  const regex = /```(\w*)\n([\s\S]*?)```/g
+  let last = 0
+  let match
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > last) {
+      parts.push({ type: 'text', text: text.slice(last, match.index) })
+    }
+    parts.push({ type: 'code', lang: match[1] || '', code: match[2].replace(/\n$/, '') })
+    last = match.index + match[0].length
+  }
+  if (last < text.length) {
+    parts.push({ type: 'text', text: text.slice(last) })
+  }
+  return parts.length > 0 ? parts : [{ type: 'text', text }]
+}

web/src/components/Studio.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
 import { useI18n } from '../i18n'
 
 const RANKS = {
@@ -53,11 +53,9 @@ function renderContent(text) {
 }
 
 function formatText(text) {
-  // First escape HTML entities
   let html = text
     .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
   
-  // Apply markdown transformations (now with escaped brackets)
   html = html
     .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
     .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
@@ -66,17 +64,17 @@ function formatText(text) {
     .replace(/^# (.+)$/gm, '<h2 class="msg-h2">$1</h2>')
     .replace(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">• $1</div>')
     .replace(/^\s*(\d+)[.)] (.+)$/gm, '<div class="msg-step"><span class="msg-step-num">$1</span> $2</div>')
+    .replace(/\n/g, '<br/>')
   
-  // Sanitize: remove event handlers and dangerous protocols
   html = html
-    .replace(/\s+on\w+=["'][^"']*["']/gi, '') // Remove on* event handlers
+    .replace(/\s+on\w+=["'][^"']*["']/gi, '')
     .replace(/javascript:/gi, '')
     .replace(/data:/gi, '')
   
   return html
 }
 
-function ThinkingBlock({ content, done }) {
+function ThinkingBlock({ content, done, raw }) {
   return (
     <div className={`feed-thinking-block ${done ? 'done' : 'active'}`}>
       <div className="feed-thinking-header">
@@ -86,7 +84,9 @@ function ThinkingBlock({ content, done }) {
         <span>Reflexion</span>
         {!done && <span className="feed-thinking-dots"><span/><span/><span/></span>}
       </div>
-      <div className="feed-thinking-content">{content}</div>
+      <div className="feed-thinking-content">
+        {raw ? <span dangerouslySetInnerHTML={{ __html: content }} /> : content}
+      </div>
     </div>
   )
 }
@@ -200,7 +200,7 @@ function FeedItem({ msg }) {
           <span className="feed-role">{rank.label}</span>
           {timeStr && <span className="feed-time">{timeStr}</span>}
         </div>
-        {msg.thinking && <ThinkingBlock content={msg.thinking} done />}
+        {msg.thinking && <ThinkingBlock content={formatText(msg.thinking)} done raw />}
         {parsedToolCalls && parsedToolCalls.map((tc, i) => {
           const resultData = parsedToolResults
             ? parsedToolResults.find(r => r.tool_call_id === tc.tool_call_id)
@@ -234,6 +234,16 @@ function StreamingItem({ content, thinking, toolCalls }) {
   const cleanContent = content.replace(/<think[^>]*>[\s\S]*?<\/think>/gi, '')
   const hasToolCalls = toolCalls && toolCalls.length > 0
 
+  const renderedContent = useMemo(() => {
+    if (!cleanContent) return []
+    return renderContent(cleanContent)
+  }, [cleanContent])
+
+  const formattedThinking = useMemo(() => {
+    if (!thinking) return ''
+    return formatText(thinking)
+  }, [thinking])
+
   return (
     <div className="feed-item assistant">
       <div className="feed-avatar ai-rank">
@@ -246,7 +256,7 @@ function StreamingItem({ content, thinking, toolCalls }) {
           </span>
           <span className="feed-role">{rank.label}</span>
         </div>
-        {thinking && <ThinkingBlock content={thinking} done={false} />}
+        {thinking && <ThinkingBlock content={formattedThinking} raw done={false} />}
         {hasToolCalls && toolCalls.map((tc, i) => (
           <ToolCallBlock key={tc.call?.tool_call_id || i} call={tc.call} result={tc.result} />
         ))}
@@ -257,7 +267,7 @@ function StreamingItem({ content, thinking, toolCalls }) {
         )}
         {cleanContent && (
           <div className="feed-content">
-            {renderContent(cleanContent).map((part, i) =>
+            {renderedContent.map((part, i) =>
               part.type === 'code' ? (
                 <div key={i} className="studio-code-block">
                   {part.lang && <div className="studio-code-lang">{part.lang}</div>}
@@ -285,7 +295,10 @@ export default function Studio({ api }) {
   const [streamToolCalls, setStreamToolCalls] = useState([])
   const [loaded, setLoaded] = useState(false)
   const [tokenInfo, setTokenInfo] = useState({ used: 0, max: 100000, summarizeAt: 80000 })
+  const [contextCollapsed, setContextCollapsed] = useState(false)
+  const [messagesCollapsed, setMessagesCollapsed] = useState(false)
   const messagesEnd = useRef(null)
+  const feedRef = useRef(null)
   const textareaRef = useRef(null)
   const abortRef = useRef(null)
 
@@ -316,6 +329,20 @@ export default function Studio({ api }) {
     messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })
   }, [messages, streaming, streamThinking, streamToolCalls])
 
+  useEffect(() => {
+    const onTab = (e) => {
+      if (e.key !== 'Tab') return
+      if (document.activeElement?.tagName === 'INPUT' || document.activeElement?.tagName === 'TEXTAREA') return
+      const feed = document.querySelector('.studio-feed-layout')
+      if (!feed?.closest('.tab-hidden')) {
+        e.preventDefault()
+        textareaRef.current?.focus()
+      }
+    }
+    window.addEventListener('keydown', onTab)
+    return () => window.removeEventListener('keydown', onTab)
+  }, [])
+
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto'
@@ -336,12 +363,18 @@ export default function Studio({ api }) {
 
   const handleSummarize = useCallback(async () => {
     setMessages(prev => [...prev, { id: Date.now().toString(), role: 'system', content: 'Résumé de la conversation en cours...', time: new Date().toISOString() }])
+    setContextCollapsed('animating')
     try {
       const data = await api.summarizeChat()
       setTokenInfo(prev => ({ ...prev, used: data.tokens || 0 }))
-      setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: 'system', content: '✓ Conversation résumée automatiquement. Le contexte a été compressé.', time: new Date().toISOString() }])
+      setTimeout(() => {
+        setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: 'system', content: '✓ Conversation résumée automatiquement. Le contexte a été compressé.', time: new Date().toISOString(), compressed: true }])
+        setContextCollapsed(true)
+        setMessagesCollapsed(true)
+      }, 600)
     } catch (err) {
       setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: 'system', content: `Erreur de résumé: ${err.message}`, time: new Date().toISOString() }])
+      setContextCollapsed(false)
     }
   }, [api])
 
@@ -396,7 +429,7 @@ export default function Studio({ api }) {
     if (text === '/model') {
       api.getProviders().then(data => {
         const active = data.providers?.find(p => p.active)
-        const modelMsg = active ? `Provider: ${active.name}\nModèle: ${active.model}` : 'Aucun provider actif configuré'
+        const modelMsg = active ? active.name : 'Aucun provider actif configuré'
         setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: modelMsg, time: new Date().toISOString() }])
       }).catch(() => {
         setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: 'Erreur: impossible de récupérer les providers', time: new Date().toISOString() }])
@@ -518,11 +551,67 @@ export default function Studio({ api }) {
     }
   }, [])
 
+  const COMMANDS = ['/clear', '/summarize', '/help', '/plan', '/export', '/model']
+
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
       handleSend()
+      return
     }
+    if (e.key === 'Tab') {
+      e.preventDefault()
+      const ta = textareaRef.current
+      if (!ta) return
+      if (document.activeElement !== ta) {
+        ta.focus()
+        return
+      }
+      const val = ta.value
+      const pos = ta.selectionStart
+      const before = val.slice(0, pos)
+      const afterSlash = before.match(/\/(\w*)$/)
+      if (afterSlash) {
+        const partial = afterSlash[0]
+        const matches = COMMANDS.filter(c => c.startsWith(partial) && c !== partial)
+        if (matches.length === 1) {
+          const completed = matches[0] + ' '
+          const newText = val.slice(0, pos - afterSlash[0].length) + completed + val.slice(pos)
+          setInput(newText)
+          requestAnimationFrame(() => {
+            ta.selectionStart = ta.selectionEnd = pos - afterSlash[0].length + completed.length
+          })
+        }
+      }
+    }
+  }
+
+  const handleToggleCollapsed = useCallback(() => {
+    setMessagesCollapsed(prev => !prev)
+  }, [])
+
+  const renderMessages = () => {
+    if (messagesCollapsed && messages.length > 4) {
+      const visibleCount = 4
+      const hiddenCount = messages.length - visibleCount
+      return (
+        <>
+          {messages.slice(0, visibleCount).map(msg => (
+            <FeedItem key={msg.id} msg={msg} />
+          ))}
+          <div className="feed-collapsed-messages" onClick={handleToggleCollapsed}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+            </svg>
+            <span className="feed-collapsed-text">{hiddenCount} messages antérieurs compressés</span>
+            <span className="feed-collapsed-count">clic pour développer</span>
+          </div>
+        </>
+      )
+    }
+    return messages.map(msg => (
+      <FeedItem key={msg.id} msg={msg} />
+    ))
   }
 
   if (!loaded) {
@@ -539,28 +628,42 @@ export default function Studio({ api }) {
 
   return (
     <div className="studio-feed-layout">
-      <div className="studio-feed">
-        {messages.map(msg => (
-          <FeedItem key={msg.id} msg={msg} />
-        ))}
-        {(streaming || streamThinking || loading || streamToolCalls.length > 0) && (
-          <StreamingItem content={streaming} thinking={streamThinking} toolCalls={streamToolCalls} />
-        )}
-        <div ref={messagesEnd} />
+      <div className="studio-feed-scroll-wrap">
+        <div className="studio-feed" ref={feedRef}>
+          {renderMessages()}
+          {(streaming || streamThinking || loading || streamToolCalls.length > 0) && (
+            <StreamingItem content={streaming} thinking={streamThinking} toolCalls={streamToolCalls} />
+          )}
+          <div ref={messagesEnd} style={{ height: '24px' }} />
+        </div>
+        <div className="studio-scroll-btns">
+          <button className="studio-scroll-btn" onClick={() => feedRef.current?.scrollTo({ top: 0, behavior: 'smooth' })} title="Remonter">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 15l-6-6-6 6"/></svg>
+          </button>
+          <button className="studio-scroll-btn" onClick={() => messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })} title="Descendre">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
+          </button>
+        </div>
       </div>
 
       <div className="studio-input-area">
-        <div className="studio-token-bar">
-          <div className="studio-token-track">
+        <div className={`studio-token-bar ${contextCollapsed === true ? 'compressed' : ''}`}>
+          <div className={`studio-token-track ${contextCollapsed === true ? 'compressed' : ''}`}>
             <div
-              className={`studio-token-fill ${tokenInfo.used >= tokenInfo.summarizeAt ? 'warn' : ''}`}
+              className={`studio-token-fill ${tokenInfo.used >= tokenInfo.summarizeAt ? 'warn' : ''} ${contextCollapsed === true ? 'compressed' : ''} ${contextCollapsed === 'animating' ? 'animating' : ''}`}
               style={{ width: `${Math.min(100, (tokenInfo.used / tokenInfo.max) * 100)}%` }}
             />
           </div>
-          <span className="studio-token-text">
+          <span className={`studio-token-text ${contextCollapsed === true ? 'compressed' : ''}`}>
             {(tokenInfo.used / 1000).toFixed(1)}k / {(tokenInfo.max / 1000).toFixed(0)}k tokens
-            {tokenInfo.used >= tokenInfo.summarizeAt && ' · résumé automatique déclenché'}
+            {contextCollapsed === true && ' · compressé'}
+            {tokenInfo.used >= tokenInfo.summarizeAt && contextCollapsed !== true && ' · résumé auto.'}
           </span>
+          {contextCollapsed === true && (
+            <button className="ghost sm" onClick={handleToggleCollapsed} style={{ marginLeft: '8px', fontSize: '10px' }}>
+              voir plus
+            </button>
+          )}
         </div>
         <div className="studio-input-row">
           <textarea

web/src/i18n/en.js

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

web/src/i18n/fr.js

@@ -136,7 +136,7 @@ const fr = {
       terminal: 'Terminal',
       updates: 'Mises \u00e0 jour',
       locale: 'Langue & Clavier',
-      skills: 'Comp\u00e9ENCES',
+      skills: 'Compétences',
       system: 'Syst\u00e8me',
     },
     profile: 'Profil',
@@ -160,7 +160,7 @@ const fr = {
     save: 'Enregistrer',
     saved: 'Enregistr\u00e9 !',
     error: 'Erreur',
-    skills: 'Comp\u00e9ENCES',
+    skills: 'Compétences',
     noSkills: 'Aucune comp\u00e9tence install\u00e9e.',
     runSkillsInit: 'Ex\u00e9cutez muyue skills init',
     language: 'Langue',
@@ -182,6 +182,8 @@ const fr = {
     installed: 'Install\u00e9',
     missing: 'Manquant',
     editProfile: 'Modifier',
+    profileInfo: 'Informations personnelles',
+    profilePrefs: 'Préférences',
     editProvider: 'Configurer',
     validateKey: 'Valider',
     validating: 'V\u00e9rification...',

web/src/styles/global.css

@@ -154,7 +154,9 @@ input::placeholder { color: var(--text-disabled); }
 
 .header-clock { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; }
 
-.content { flex: 1; overflow: hidden; }
+.content { flex: 1; overflow: hidden; position: relative; }
+.content > div { height: 100%; }
+.tab-hidden { display: none; }
 
 .statusbar {
   height: 28px;
@@ -392,11 +394,26 @@ input::placeholder { color: var(--text-disabled); }
 .connection-dot.off { background: var(--error); }
 
 .shell-ai-col { width: 320px; border-left: 1px solid var(--border); background: var(--bg-surface); display: flex; flex-direction: column; flex-shrink: 0; }
-.ai-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; color: var(--accent); }
+.ai-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; color: var(--accent); display: flex; align-items: center; justify-content: space-between; }
+.shell-analyze-btn {
+  display: flex; align-items: center; gap: 4px;
+  padding: 4px 10px; border-radius: var(--radius);
+  background: transparent; border: 1px solid var(--accent-dim);
+  color: var(--accent); font-size: 11px; font-weight: 600;
+  cursor: pointer; transition: all 0.15s;
+}
+.shell-analyze-btn:hover:not(:disabled) { background: var(--accent-bg); }
+.shell-analyze-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.shell-ai-token-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
+.shell-ai-token-track { flex: 1; height: 3px; background: var(--bg-input); border-radius: 2px; overflow: hidden; }
+.shell-ai-token-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s, background 0.3s; }
+.shell-ai-token-fill.warn { background: var(--warning); }
+.shell-ai-token-text { font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); white-space: nowrap; }
 .ai-panel-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
 .ai-message { padding: 8px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.5; word-break: break-word; }
-.ai-message.ai { background: var(--bg-card); border-left: 3px solid var(--accent); }
-.ai-message.user { background: var(--accent-bg); border-left: 3px solid var(--accent-muted); }
+.ai-message.assistant { background: var(--bg-card); border-left: 3px solid var(--accent); }
+.ai-message.system { background: var(--bg-elevated); border-left: 3px solid var(--info); font-style: italic; color: var(--text-tertiary); font-size: 12px; }
+.ai-message.assistant { background: var(--bg-card); border-left: 3px solid var(--accent); }
 .ai-message.thinking { background: var(--bg-elevated); border-left: 3px solid var(--info); font-style: italic; color: var(--text-tertiary); }
 .ai-message.tool { background: var(--bg-elevated); border-left: 3px solid var(--warning); }
 .ai-message.tool .tool-name { font-weight: 700; color: var(--warning); }
@@ -404,6 +421,31 @@ input::placeholder { color: var(--text-disabled); }
 .ai-panel-input { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); }
 .ai-panel-input input { flex: 1; font-size: 13px; padding: 6px 10px; }
 
+.shell-code-block {
+  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
+  margin: 8px 0 4px; overflow: hidden;
+}
+.shell-code-block pre {
+  padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
+  overflow-x: auto; color: var(--text-primary); margin: 0;
+}
+.shell-code-lang {
+  padding: 3px 10px; font-size: 10px; font-weight: 600; color: var(--text-tertiary);
+  background: var(--bg-surface); border-bottom: 1px solid var(--border);
+  text-transform: uppercase; letter-spacing: 0.5px;
+}
+.shell-code-actions {
+  display: flex; border-top: 1px solid var(--border); background: var(--bg-surface);
+}
+.shell-code-actions button {
+  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
+  padding: 5px 0; background: transparent; border: none; border-right: 1px solid var(--border);
+  color: var(--text-tertiary); font-size: 11px; cursor: pointer; transition: all 0.1s;
+  font-family: var(--font-sans);
+}
+.shell-code-actions button:last-child { border-right: none; }
+.shell-code-actions button:hover { background: var(--accent-bg); color: var(--accent); }
+
 .shell-modal-overlay {
   position: fixed; inset: 0; background: rgba(0,0,0,0.6);
   display: flex; align-items: center; justify-content: center; z-index: 1000;
@@ -435,6 +477,10 @@ input::placeholder { color: var(--text-disabled); }
 
 .config-panel-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
 .config-panel-body { flex: 1; overflow-y: auto; padding: 16px 28px 28px; }
+.config-profile-center {
+  max-width: 540px; margin: 0 auto; width: 100%;
+  display: flex; flex-direction: column; gap: 12px;
+}
 
 .config-card {
   background: var(--bg-card); border: 1px solid var(--border);
@@ -500,10 +546,24 @@ input::placeholder { color: var(--text-disabled); }
 .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: 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; }
+.skill-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
+.skill-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: border-color 0.15s; }
+.skill-tile:hover { border-color: var(--accent-dim); }
+.skill-tile-name { font-weight: 600; color: var(--text-primary); font-size: 14px; margin-bottom: 6px; }
+.skill-tile-desc { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.skill-tile-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
+.skill-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 50; display: flex; align-items: center; justify-content: center; }
+.skill-detail-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 90%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
+.skill-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
+.skill-detail-name { font-weight: 600; font-size: 16px; color: var(--text-primary); }
+.skill-detail-body { flex: 1; overflow-y: auto; padding: 20px; }
+.skill-detail-section { margin-bottom: 16px; }
+.skill-detail-label { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
+.skill-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; }
+.skill-detail-content { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); white-space: pre-wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; line-height: 1.6; max-height: 300px; overflow-y: auto; }
+.skill-detail-deps { display: flex; flex-direction: column; gap: 6px; }
+.skill-detail-dep { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; }
+.skill-detail-dep .badge { font-size: 10px; }
 .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
 
 .config-toast {
@@ -535,6 +595,7 @@ input::placeholder { color: var(--text-disabled); }
 .dash-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
   gap: 12px;
   padding: 16px;
   height: 100%;
@@ -602,10 +663,10 @@ input::placeholder { color: var(--text-disabled); }
 }
 .dash-proc-name {
   font-size: 11px; font-weight: 600; color: var(--text-primary);
-  font-family: var(--font-mono);
+  font-family: var(--font-mono); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .dash-proc-res {
-  font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary);
+  font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); flex-shrink: 0;
 }
 
 /* Commands */
@@ -622,8 +683,20 @@ input::placeholder { color: var(--text-disabled); }
 .dash-cmd-text {
   font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  flex: 1; min-width: 0;
 }
 
+.dash-cmd-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
+.dash-cmd-chip {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 12px; border-radius: var(--radius);
+  background: var(--bg-surface); border: 1px solid var(--border);
+  cursor: pointer; transition: all 0.15s;
+}
+.dash-cmd-chip:hover { border-color: var(--accent-dim); background: var(--accent-bg); }
+.dash-cmd-chip-name { font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); }
+.dash-cmd-chip-count { font-size: 10px; font-family: var(--font-mono); color: var(--accent); }
+
 /* Services */
 .dash-services { display: flex; flex-direction: column; gap: 6px; }
 .dash-svc-row {
@@ -703,7 +776,17 @@ input::placeholder { color: var(--text-disabled); }
 
 /* ── 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; }
+.studio-feed-scroll-wrap { flex: 1; position: relative; overflow: hidden; }
+.studio-feed { height: 100%; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
+.studio-scroll-btns { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; z-index: 10; }
+.studio-scroll-btn {
+  width: 32px; height: 32px; border-radius: 50%; padding: 0;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--bg-card); border: 1px solid var(--border);
+  color: var(--text-tertiary); cursor: pointer; transition: all 0.15s;
+  opacity: 0.7;
+}
+.studio-scroll-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-dim); opacity: 1; }
 .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); }
@@ -804,6 +887,12 @@ input::placeholder { color: var(--text-disabled); }
 .studio-token-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s, background 0.3s; }
 .studio-token-fill.warn { background: var(--warning); }
 .studio-token-fill.compressed { height: 2px; }
+.studio-token-fill.animating { animation: compress-pulse 0.6s ease-in-out; }
+@keyframes compress-pulse {
+  0% { height: 3px; opacity: 1; }
+  50% { height: 5px; opacity: 0.8; background: var(--accent-light); }
+  100% { height: 2px; opacity: 1; }
+}
 .studio-token-text { font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); white-space: nowrap; }
 .studio-token-text.compressed { font-size: 9px; }
 .studio-token-track.compressed { height: 2px; }