feat(ui): redesign recent commands display and fix terminal visibility

- Dashboard: add frequency bars for top commands, click-to-copy, time display
- Shell: switch from display:none to visibility:hidden for terminal containers
- CSS: restyle command list with improved hover states and copy indicators

💘 Generated with Crush

Assisted-by: MiniMax-M2.7 via Crush <crush@charm.land>

web/src/components/Config.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
-import { User, Brain, RefreshCw, Wrench, Monitor, AlertTriangle, X } from 'lucide-react'
+import { User, Brain, RefreshCw, Wrench, Monitor, AlertTriangle } from 'lucide-react'
 import { useI18n } from '../i18n'
 
 const PANELS = [
@@ -311,16 +311,6 @@ function PanelProviders({ providers, editProvider, providerForm, setProviderForm
   const [validating, setValidating] = useState(null)
   const [keyStatus, setKeyStatus] = useState({})
 
-  useEffect(() => {
-    providers.forEach(p => {
-      if (p.apiKey && !keyStatus[p.name]) {
-        validateKey(p)
-      } else if (!p.apiKey) {
-        setKeyStatus(prev => ({ ...prev, [p.name]: { valid: false, checked: true, error: 'Aucune clé' } }))
-      }
-    })
-  }, [providers])
-
   const validateKey = async (p) => {
     setValidating(p.name)
     try {
@@ -332,6 +322,16 @@ function PanelProviders({ providers, editProvider, providerForm, setProviderForm
     setValidating(null)
   }
 
+  useEffect(() => {
+    providers.forEach(p => {
+      if (p.apiKey && !keyStatus[p.name]) {
+        validateKey(p)
+      } else if (!p.apiKey) {
+        setKeyStatus(prev => ({ ...prev, [p.name]: { valid: false, checked: true, error: 'Aucune clé' } }))
+      }
+    })
+  }, [providers])
+
   const handleValidate = async (name, apiKey, model, baseUrl) => {
     setValidating(name)
     try {
@@ -412,7 +412,7 @@ function PanelUpdates({ updates, tools, checking, updating, needsUpdateCount, in
     window.dispatchEvent(new CustomEvent('ask-ai-terminal', { detail: { message: `Installe l'outil ${tool} sur mon système. Vérifie d'abord s'il est déjà installé, puis installe-le si nécessaire avec les commandes appropriées.` } }))
   }
 
-  const missingTools = tools.filter(t => !t.installed)
+  const missingTools = tools.filter(tool => !tool.installed)
 
   return (
     <>

web/src/components/Dashboard.jsx

@@ -197,26 +197,34 @@ export default function Dashboard({ api, refreshRef }) {
       </div>
 
       {/* Recent Commands */}
-      <div className="dash-card">
+      <div className="dash-card dash-cmd-card">
         <div className="dash-card-head">
           <span className="dash-label">Recent Commands</span>
+          <span className="dash-count">{recentUnique.length}</span>
         </div>
         {topCmds.length > 0 && (
-          <div className="dash-cmd-top">
+          <div className="dash-cmd-freq">
+            <span className="dash-cmd-freq-title">Most used</span>
             {topCmds.map((c, i) => (
-              <div key={i} className={'dash-cmd-chip' + (copiedIdx === i ? ' dash-cmd-chip-copied' : '')} onClick={() => { navigator.clipboard.writeText(c.cmd); setCopiedIdx(i); setTimeout(() => setCopiedIdx(-1), 1200); }}>
-                <span className="dash-cmd-chip-name">{copiedIdx === i ? '✓ Copié' : c.cmd}</span>
-                <span className="dash-cmd-chip-count">{c.count}×</span>
+              <div key={i} className="dash-cmd-freq-row" onClick={() => copyCmd(c.cmd, `top-${i}`)} title={c.cmd}>
+                <span className="dash-cmd-freq-name">{copiedSet.has(`top-${i}`) ? '✓ Copié' : c.cmd}</span>
+                <div className="dash-cmd-freq-bar-wrap">
+                  <div className="dash-cmd-freq-bar" style={{ width: `${(c.count / maxCount) * 100}%` }} />
+                </div>
+                <span className="dash-cmd-freq-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) => (
-            <div key={i} className="dash-cmd-row" title={c.cmd}>
-              <span className="dash-cmd-shell">{c.shell}</span>
-              <span className="dash-cmd-text">{c.cmd.length > 45 ? c.cmd.slice(0, 42) + '...' : c.cmd}</span>
+          {recentUnique.length === 0 && <span className="dash-empty">No history</span>}
+          {recentUnique.map((c, i) => (
+            <div key={i} className="dash-cmd-row" onClick={() => copyCmd(c.cmd, `list-${i}`)} title={c.cmd + ' · click to copy'}>
+              <div className="dash-cmd-left">
+                <span className="dash-cmd-text">{c.cmd.length > 38 ? c.cmd.slice(0, 35) + '...' : c.cmd}</span>
+                <span className="dash-cmd-time">{relativeTime(c.ts)}</span>
+              </div>
+              <span className="dash-cmd-copy">{copiedSet.has(`list-${i}`) ? '✓' : '⎘'}</span>
             </div>
           ))}
         </div>

web/src/components/Shell.jsx

@@ -204,6 +204,7 @@ export default function Shell({ api }) {
   const tabsRef = useRef({})
   const nextIdRef = useRef(1)
   const settingsRef = useRef({ fontSize: 12, fontFamily: "'JetBrains Mono', 'Fira Code', monospace", theme: 'default' })
+  const pendingCommandsRef = useRef({})
 
   const savedTabs = (() => {
     try {
@@ -227,6 +228,8 @@ export default function Shell({ api }) {
     }
     return 1
   })
+  const activeTabRef = useRef(activeTab)
+  useEffect(() => { activeTabRef.current = activeTab }, [activeTab])
   const [sshConnections, setSshConnections] = useState([])
   const [systemTerminals, setSystemTerminals] = useState([])
   const [showMenu, setShowMenu] = useState(false)
@@ -397,7 +400,7 @@ export default function Shell({ api }) {
 
     const onResize = () => {
       const el = document.getElementById(`terminal-${tabId}`)
-      if (el && el.offsetParent !== null) {
+      if (el && el.style.visibility !== 'hidden' && el.style.position !== 'absolute') {
         fitAddon.fit()
       }
     }
@@ -408,9 +411,21 @@ export default function Shell({ api }) {
 
     const bufferSaveInterval = setInterval(() => { if (!disposed) saveBuffer() }, 5000)
 
+    console.log(`[Shell] initTerminal tab=${tabId} type=${tab.type} name="${tab.name}" shell="${tab.shell || '(default)'}"`)
     tabsRef.current[tabId] = { term, fitAddon, ws, resizeObserver, onResize, bufferSaveInterval, saveBuffer, disposed: () => disposed }
-    const origDispose = () => { disposed = true }
-    tabsRef.current[tabId]._markDisposed = origDispose
+    tabsRef.current[tabId]._markDisposed = () => { disposed = true }
+    console.log(`[Shell] initTerminal tab=${tabId} done, tabsRef keys:`, Object.keys(tabsRef.current))
+
+    const pending = pendingCommandsRef.current[tabId]
+    if (pending && pending.length > 0) {
+      console.log(`[Shell] Flushing ${pending.length} pending commands for tab ${tabId}`)
+      for (const cmd of pending) {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'input', data: cmd + '\r' }))
+        }
+      }
+      delete pendingCommandsRef.current[tabId]
+    }
   }, [])
 
   useEffect(() => {
@@ -423,23 +438,25 @@ export default function Shell({ api }) {
     const tryInit = (attempt) => {
       if (cancelled || attempt > 20) return
       const shellCol = document.querySelector('.shell-terminal-col')
-      if (!shellCol || shellCol.offsetParent === null) {
+      if (!shellCol) {
         pending.push(setTimeout(() => tryInit(attempt + 1), 150))
         return
       }
       const container = document.getElementById(`terminal-${tab.id}`)
-      if (!container || container.offsetHeight === 0) {
+      if (!container) {
         pending.push(setTimeout(() => tryInit(attempt + 1), 100))
         return
       }
       if (!tabsRef.current[tab.id]) {
         initTerminal(tab.id, tab)
       }
-      requestAnimationFrame(() => {
-        if (cancelled) return
-        const entry = tabsRef.current[tab.id]
-        if (entry) entry.fitAddon.fit()
-      })
+      if (activeTab === tab.id) {
+        requestAnimationFrame(() => {
+          if (cancelled) return
+          const entry = tabsRef.current[tab.id]
+          if (entry) entry.fitAddon.fit()
+        })
+      }
     }
 
     tryInit(0)
@@ -455,7 +472,7 @@ export default function Shell({ api }) {
         const entry = tabsRef.current[tab.id]
         if (entry) {
           const el = document.getElementById(`terminal-${tab.id}`)
-          if (el && el.offsetParent !== null) {
+          if (el && el.style.visibility !== 'hidden') {
             entry.fitAddon.fit()
           }
         }
@@ -598,23 +615,28 @@ export default function Shell({ api }) {
   }
 
   const sendToTerminal = useCallback((code, tabId) => {
-    const targetId = tabId || activeTab
+    const targetId = tabId || activeTabRef.current
     const entry = tabsRef.current[targetId]
     if (!entry) {
-      console.warn('sendToTerminal: no terminal initialized for tab', targetId)
+      console.warn(`[Shell] sendToTerminal: tab ${targetId} not ready. Queueing. tabsRef:`, Object.keys(tabsRef.current), 'activeTab:', activeTabRef.current, 'requested:', tabId)
+      if (!pendingCommandsRef.current[targetId]) pendingCommandsRef.current[targetId] = []
+      pendingCommandsRef.current[targetId].push(code)
       return
     }
     if (!entry.ws || entry.ws.readyState !== WebSocket.OPEN) {
-      console.warn('sendToTerminal: WebSocket not ready for tab', targetId)
+      console.warn(`[Shell] sendToTerminal: WS not open for tab ${targetId} (state=${entry.ws?.readyState}). Queueing.`)
+      if (!pendingCommandsRef.current[targetId]) pendingCommandsRef.current[targetId] = []
+      pendingCommandsRef.current[targetId].push(code)
       return
     }
+    console.log(`[Shell] sendToTerminal: tab ${targetId} ← ${code.length} chars`)
     entry.ws.send(JSON.stringify({ type: 'input', data: code + '\r' }))
-  }, [activeTab])
+  }, [])
 
   const focusAiTerminal = useCallback(() => {
-    const entry = tabsRef.current[activeTab]
+    const entry = tabsRef.current[activeTabRef.current]
     if (entry) entry.term.focus()
-  }, [activeTab])
+  }, [])
 
   const _sendAiMessage = useCallback(async (text, fromEvent = false) => {
     if (!text || !text.trim() || aiLoadingRef.current || aiAtLimit) return
@@ -646,7 +668,9 @@ export default function Shell({ api }) {
       return
     }
 
-    setAiMessages(prev => [...prev, { role: 'user', content: trimmed }])
+    const currentTab = activeTabRef.current
+    console.log(`[Shell] _sendAiMessage: activeTab=${currentTab}, fromEvent=${fromEvent}, text="${trimmed.slice(0, 50)}"`)
+    setAiMessages(prev => [...prev, { role: 'user', content: trimmed, _tabId: currentTab }])
     setAiLoading(true)
 
     try {
@@ -655,13 +679,13 @@ export default function Shell({ api }) {
         accumulated = partial
         setAiMessages(prev => {
           const filtered = prev.filter(m => !m._streaming)
-          return [...filtered, { role: 'assistant', content: partial, _streaming: true }]
+          return [...filtered, { role: 'assistant', content: partial, _streaming: true, _tabId: currentTab }]
         })
       })
 
       setAiMessages(prev => {
         const filtered = prev.filter(m => !m._streaming)
-        return [...filtered, { role: 'assistant', content: accumulated }]
+        return [...filtered, { role: 'assistant', content: accumulated, _tabId: currentTab }]
       })
       api.getShellChatHistory().then(d => {
         setAiTokens(d.tokens || 0)
@@ -817,7 +841,10 @@ export default function Shell({ api }) {
               key={tab.id}
               id={`terminal-${tab.id}`}
               className="shell-xterm-instance"
-              style={{ display: activeTab === tab.id ? 'block' : 'none' }}
+              style={activeTab === tab.id
+                ? { visibility: 'visible', pointerEvents: 'auto' }
+                : { visibility: 'hidden', pointerEvents: 'none' }
+              }
             />
           ))}
         </div>
@@ -858,7 +885,7 @@ export default function Shell({ api }) {
         </div>
         <div className="ai-panel-messages" ref={aiMessagesRef}>
           {aiMessages.map((msg, i) => (
-            <ShellAIMessage key={i} msg={msg} sendToTerminal={sendToTerminal} terminalTabId={activeTab} />
+            <ShellAIMessage key={i} msg={msg} sendToTerminal={sendToTerminal} terminalTabId={msg._tabId || activeTab} />
           ))}
           {aiLoading && <div style={{ textAlign: 'center', padding: 8 }}><span className="spinner" /></div>}
         </div>

web/src/components/Studio.jsx

@@ -197,7 +197,7 @@ function FeedItem({ msg }) {
     )
   }
 
-  const cleanContent = displayContent.replace(/<think[^>]*>[\s\S]*?<\/think>/gi, '')
+  let cleanContent = displayContent.replace(/<think[^>]*>[\s\S]*?<\/think>/gi, '')
 
   return (
     <div className={`feed-item ${msg.role}`}>
@@ -532,6 +532,8 @@ export default function Studio({ api }) {
         if (event && event.tool_call) {
           toolCalls = [...toolCalls, { call: event.tool_call, result: null }]
           setStreamToolCalls([...toolCalls])
+          accumulated = ''
+          setStreaming('')
           return
         }
         if (event && event.tool_result) {
@@ -558,6 +560,11 @@ export default function Studio({ api }) {
         aiMsg.content = JSON.stringify({
           content: finalContent,
           tool_calls: toolCalls.map(tc => tc.call),
+          tool_results: toolCalls.map(tc => ({
+            tool_call_id: tc.call?.tool_call_id,
+            result: tc.result?.content || '',
+            is_error: tc.result?.is_error || false,
+          })),
         })
       }
       setMessages(prev => [...prev, aiMsg])

web/src/styles/global.css

@@ -691,34 +691,38 @@ input::placeholder { color: var(--text-disabled); }
 }
 
 /* Commands */
-.dash-cmd-list { display: flex; flex-direction: column; gap: 3px; max-height: 270px; overflow-y: auto; }
+.dash-cmd-card .dash-cmd-list { max-height: 220px; }
+.dash-cmd-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
 .dash-cmd-row {
-  display: flex; align-items: center; gap: 6px;
-  padding: 3px 0; overflow: hidden;
-}
-.dash-cmd-shell {
-  font-size: 9px; font-family: var(--font-mono); color: var(--text-disabled);
-  background: var(--bg-input); padding: 1px 4px; border-radius: 3px;
-  text-transform: uppercase; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 5px 8px; border-radius: var(--radius-sm);
+  background: var(--bg-surface); cursor: pointer;
+  transition: background 0.12s;
 }
+.dash-cmd-row:hover { background: var(--accent-bg); }
+.dash-cmd-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
 .dash-cmd-text {
-  font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary);
+  font-size: 11px; font-family: var(--font-mono); color: var(--text-primary);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  flex: 1; min-width: 0;
 }
+.dash-cmd-time { font-size: 9px; color: var(--text-disabled); }
+.dash-cmd-copy { font-size: 13px; color: var(--text-disabled); flex-shrink: 0; }
+.dash-cmd-row:hover .dash-cmd-copy { color: var(--accent); }
+
+.dash-cmd-freq { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
+.dash-cmd-freq-title { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-disabled); letter-spacing: 0.05em; margin-bottom: 2px; }
+.dash-cmd-freq-row {
+  display: flex; align-items: center; gap: 8px; cursor: pointer;
+  padding: 3px 4px; border-radius: var(--radius-sm);
+  transition: background 0.12s;
+}
+.dash-cmd-freq-row:hover { background: var(--accent-bg); }
+.dash-cmd-freq-name { font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dash-cmd-freq-bar-wrap { flex: 1; height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; }
+.dash-cmd-freq-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
+.dash-cmd-freq-count { font-size: 10px; font-family: var(--font-mono); color: var(--accent); width: 28px; text-align: right; flex-shrink: 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-copied { border-color: var(--accent) !important; background: var(--accent-bg) !important; }
-.dash-cmd-chip-copied .dash-cmd-chip-name { color: var(--accent); }
-.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; }