feat(shell): dedicated System Analyst AI, no code execution, analyze system

- New ShellConvStore with persistent history (shell_conversation.json)
- 100k token limit — input grays out, must /clear to continue
- Commands limited to /clear and /help only
- Shell AI has NO tools — read-only analysis, never executes code
- "Analyste Système" panel with system analysis button
- System analysis uses Studio AI to write system_analysis.md,
  prepended as context on every conversation start
- Code blocks show "Copier" and "Terminal" buttons to copy or
  send code directly to the active terminal via WebSocket
- Token bar shows usage with warning at 80%

💘 Generated with Crush

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

web/src/components/Config.jsx

@@ -564,30 +564,82 @@ function PanelLocale({ language, keyboard, layouts, api, t }) {
 }
 
 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/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 = {
@@ -76,7 +76,7 @@ function formatText(text) {
   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 +86,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 +202,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 +236,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 +258,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 +269,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>}