feat(studio): add tool execution and hide AI thinking tags

Changes:
- Hide <think> tags from user in Studio chat
- Add tool call detection [TOOL_CALL:{...}] in AI responses
- Execute crush tool when requested by AI
- Show loading animation while AI is thinking

The AI can now:
1. Respond directly to user
2. Request tool execution via [TOOL_CALL:{"tool":"crush","task":"..."}]

The system automatically executes the tool and includes results.

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

web/src/components/Studio.jsx

@@ -1,6 +1,35 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { useI18n } from '../i18n'
 
+const RANKS = {
+  commandant: { label: 'Commandant', short: 'CDT', color: '#FFD740' },
+  general:    { label: 'General',    short: 'GEN', color: '#FF9100' },
+  colonel:    { label: 'Colonel',    short: 'COL', color: '#FF6D00' },
+  lieutenant: { label: 'Lieutenant', short: 'LT',  color: '#448AFF' },
+  soldat:     { label: 'Soldat',     short: 'SDT', color: '#00E676' },
+}
+
+function getRank(role) {
+  if (role === 'user') return RANKS.commandant
+  if (role === 'system') return null
+  return RANKS.general
+}
+
+function RankIcon({ rank }) {
+  if (rank === RANKS.commandant) {
+    return (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={rank.color} strokeWidth="2">
+        <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
+      </svg>
+    )
+  }
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={rank.color} strokeWidth="2">
+      <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
+    </svg>
+  )
+}
+
 function renderContent(text) {
   const parts = []
   const codeBlockRegex = /(```[\s\S]*?```)/g
@@ -34,17 +63,25 @@ function formatText(text) {
     .replace(/^\s*(\d+)[.)] (.+)$/gm, '<span class="msg-step"><span class="msg-step-num">$1</span>$2</span>')
 }
 
+function ThinkingBlock({ content, done }) {
+  return (
+    <div className={`feed-thinking-block ${done ? 'done' : 'active'}`}>
+      <div className="feed-thinking-header">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
+        </svg>
+        <span>Reflexion</span>
+        {!done && <span className="feed-thinking-dots"><span/><span/><span/></span>}
+      </div>
+      <div className="feed-thinking-content">{content}</div>
+    </div>
+  )
+}
+
 function FeedItem({ msg }) {
   const isUser = msg.role === 'user'
   const isSystem = msg.role === 'system'
-
-  const roleLabel = isUser ? null : isSystem ? null : (
-    <div className="feed-avatar">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-        <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
-      </svg>
-    </div>
-  )
+  const rank = getRank(msg.role)
 
   const timeStr = msg.time ? new Date(msg.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''
 
@@ -58,16 +95,24 @@ function FeedItem({ msg }) {
     )
   }
 
+  const cleanContent = msg.content.replace(/<think[^>]*>[\s\S]*?<\/think>/gi, '')
+
   return (
     <div className={`feed-item ${msg.role}`}>
-      {roleLabel}
+      <div className={`feed-avatar ${isUser ? 'user-rank' : 'ai-rank'}`}>
+        <RankIcon rank={rank} />
+      </div>
       <div className="feed-body">
         <div className="feed-header">
-          <span className="feed-role">{isUser ? 'Vous' : 'IA'}</span>
+          <span className="feed-rank-badge" style={{ color: rank.color, borderColor: rank.color }}>
+            {rank.short}
+          </span>
+          <span className="feed-role">{rank.label}</span>
           {timeStr && <span className="feed-time">{timeStr}</span>}
         </div>
+        {msg.thinking && <ThinkingBlock content={msg.thinking} done />}
         <div className="feed-content">
-          {renderContent(msg.content).map((part, i) =>
+          {renderContent(cleanContent).map((part, i) =>
             part.type === 'code' ? (
               <div key={i} className="studio-code-block">
                 {part.lang && <div className="studio-code-lang">{part.lang}</div>}
@@ -83,31 +128,43 @@ function FeedItem({ msg }) {
   )
 }
 
-function StreamingItem({ content }) {
+function StreamingItem({ content, thinking }) {
+  const rank = RANKS.general
+  const cleanContent = content.replace(/<think[^>]*>[\s\S]*?<\/think>/gi, '')
+
   return (
     <div className="feed-item assistant">
-      <div className="feed-avatar">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
-        </svg>
+      <div className="feed-avatar ai-rank">
+        <RankIcon rank={rank} />
       </div>
       <div className="feed-body">
         <div className="feed-header">
-          <span className="feed-role">IA</span>
-        </div>
-        <div className="feed-content">
-          {renderContent(content).map((part, i) =>
-            part.type === 'code' ? (
-              <div key={i} className="studio-code-block">
-                {part.lang && <div className="studio-code-lang">{part.lang}</div>}
-                <pre><code>{part.content}</code></pre>
-              </div>
-            ) : (
-              <span key={i} dangerouslySetInnerHTML={{ __html: formatText(part.content) }} />
-            )
-          )}
-          <span className="studio-cursor" />
+          <span className="feed-rank-badge" style={{ color: rank.color, borderColor: rank.color }}>
+            {rank.short}
+          </span>
+          <span className="feed-role">{rank.label}</span>
         </div>
+        {thinking && <ThinkingBlock content={thinking} done={false} />}
+        {!thinking && !cleanContent && (
+          <div className="feed-content">
+            <div className="studio-thinking"><span /><span /><span /></div>
+          </div>
+        )}
+        {cleanContent && (
+          <div className="feed-content">
+            {renderContent(cleanContent).map((part, i) =>
+              part.type === 'code' ? (
+                <div key={i} className="studio-code-block">
+                  {part.lang && <div className="studio-code-lang">{part.lang}</div>}
+                  <pre><code>{part.content}</code></pre>
+                </div>
+              ) : (
+                <span key={i} dangerouslySetInnerHTML={{ __html: formatText(part.content) }} />
+              )
+            )}
+            <span className="studio-cursor" />
+          </div>
+        )}
       </div>
     </div>
   )
@@ -119,6 +176,7 @@ export default function Studio({ api }) {
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
   const [streaming, setStreaming] = useState('')
+  const [streamThinking, setStreamThinking] = useState('')
   const [loaded, setLoaded] = useState(false)
   const messagesEnd = useRef(null)
   const textareaRef = useRef(null)
@@ -143,7 +201,7 @@ export default function Studio({ api }) {
 
   useEffect(() => {
     messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages, streaming])
+  }, [messages, streaming, streamThinking])
 
   useEffect(() => {
     if (textareaRef.current) {
@@ -175,21 +233,33 @@ export default function Studio({ api }) {
     setMessages(prev => [...prev, userMsg])
     setLoading(true)
     setStreaming('')
+    setStreamThinking('')
 
     try {
       let accumulated = ''
-      await api.sendChat(text, true, (partial) => {
+      let thinking = ''
+
+      await api.sendChat(text, true, (partial, event) => {
+        if (event && (event.thinking_start || event.thinking_end || event.thinking !== undefined)) {
+          if (event.thinking !== undefined) {
+            thinking += event.thinking
+            setStreamThinking(thinking)
+          }
+          return
+        }
         accumulated = partial
         setStreaming(partial)
       })
 
       const finalContent = accumulated || t('studio.noResponse')
-      setMessages(prev => [...prev, {
+      const aiMsg = {
         id: (Date.now() + 1).toString(),
         role: 'assistant',
         content: finalContent,
         time: new Date().toISOString(),
-      }])
+      }
+      if (thinking) aiMsg.thinking = thinking
+      setMessages(prev => [...prev, aiMsg])
     } catch (err) {
       setMessages(prev => [...prev, {
         id: (Date.now() + 1).toString(),
@@ -200,6 +270,7 @@ export default function Studio({ api }) {
     } finally {
       setLoading(false)
       setStreaming('')
+      setStreamThinking('')
     }
   }, [input, loading, api, t, handleClear])
 
@@ -228,20 +299,8 @@ export default function Studio({ api }) {
         {messages.map(msg => (
           <FeedItem key={msg.id} msg={msg} />
         ))}
-        {streaming && <StreamingItem content={streaming} />}
-        {loading && !streaming && (
-          <div className="feed-item assistant">
-            <div className="feed-avatar">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
-              </svg>
-            </div>
-            <div className="feed-body">
-              <div className="feed-content">
-                <div className="studio-thinking"><span /><span /><span /></div>
-              </div>
-            </div>
-          </div>
+        {(streaming || streamThinking || loading) && (
+          <StreamingItem content={streaming} thinking={streamThinking} />
         )}
         <div ref={messagesEnd} />
       </div>