feat(chat): 收拢式AI思考/执行过程可视化 + 修复span(name)重复传参导致技能/MCP执行崩溃

frontend/src/pages/front/ChatPage.tsx

@@ -895,6 +895,7 @@ const ChatPage: React.FC = () => {
             createdAt: data.assistant_message.created_at || new Date().toISOString(),
             used_skills: data.assistant_message.used_skills || [],
             used_mcp: data.assistant_message.used_mcp || [],
+            process_steps: data.assistant_message.process_steps || [],
           });
         }
         return [...filtered, ...newMsgs];
@@ -1168,6 +1169,7 @@ const ChatPage: React.FC = () => {
                 // Real used_skills from API response
                 const usedSkills: string[] = (msg.role === 'assistant' && msg.used_skills) ? msg.used_skills : [];
                 const usedMcp: string[] = (msg.role === 'assistant' && msg.used_mcp) ? msg.used_mcp : [];
+                const steps: any[] = (msg as any).process_steps || [];
                 // 模糊创作意图确认卡片
                 const clarify = msg.role === 'assistant' ? parseClarify(msg.content) : null;
                 return (
@@ -1235,6 +1237,34 @@ const ChatPage: React.FC = () => {
                         )}
                       </div>
                     )}
+                    {msg.role === 'assistant' && steps.length > 0 && (
+                      <details className="ai-process" open={false}>
+                        <summary className="ai-process-summary">
+                          <span className="ai-process-badge">🧠</span>
+                          思考 / 执行过程（{steps.length} 步，点击展开）
+                        </summary>
+                        <div className="ai-process-list">
+                          {steps.map((s: any, i: number) => (
+                            <div key={i} className={`ai-process-item ai-process-${s.type}`}>
+                              <span className="ai-process-ico">
+                                {s.type === 'thinking' ? '💡' : s.type === 'skill' ? '🛠' : '🔌'}
+                              </span>
+                              <div className="ai-process-body">
+                                {s.type === 'thinking' && (
+                                  <><b className="ai-process-title">思考</b><p className="ai-process-text">{s.text}</p></>
+                                )}
+                                {s.type === 'skill' && (
+                                  <><b className="ai-process-title">调用技能：{s.name}</b><p className="ai-process-text">{(s.result || '').slice(0, 400)}</p></>
+                                )}
+                                {s.type === 'mcp' && (
+                                  <><b className="ai-process-title">MCP · {s.server}：{s.name}</b><p className="ai-process-text">{(s.result || '').slice(0, 400)}</p></>
+                                )}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </details>
+                    )}
                     <div className={`message-meta ${msg.role}`}>
                       <span className="message-time">{formatTime(msg.createdAt)}</span>
                       <span className="message-tokens">{msg.tokenUsed} tokens</span>