feat: 优化智能体卡片和工具显示

- 添加智能体卡片智能滚动功能：自动滚动到底部，用户向上滚动时停止，滚动到底部恢复
   - 过滤 spawnExplorer 工具，不在界面显示
   - 添加所有工具的中文名称映射（file_read、file_write、queryRules、setModule 等）
   - 优化代码结构，移除未使用的导入

src/views/messageArea.ts

@@ -15,11 +15,13 @@ import {
   fileWriteIconSvg,
   syntaxCheckIconSvg,
   SearchCode,
+  agentIconSvg,
 } from "../constants/toolIcons";
 import {
   getWaveformPreviewContent,
   getWaveformPreviewScript,
 } from "./waveformPreviewContent";
+import { getAgentCardStyles, getAgentCardScript } from "./agentCard";
 
 /**
  * 获取消息区域的 HTML 内容
@@ -528,88 +530,7 @@ export function getMessageAreaStyles(): string {
         border-radius: 4px;
         font-size: 12px;}
 
-      /* 智能体卡片样式 */
-      .segment-agent {
-        margin: 8px 0;
-      }
-      .agent-card {
-        border: 1px solid var(--vscode-input-border);
-        border-radius: 8px;
-        overflow: hidden;
-        background: var(--vscode-editor-background);
-      }
-      .agent-header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 8px 12px;
-        background: var(--vscode-sideBar-background);
-        border-bottom: 1px solid var(--vscode-input-border);
-      }
-      .agent-icon {
-        font-size: 16px;
-      }
-      .agent-name {
-        font-weight: 500;
-        flex: 1;
-      }
-      .agent-status {
-        font-size: 11px;
-        padding: 2px 8px;
-        border-radius: 10px;
-      }
-      .agent-status.running {
-        background: var(--vscode-inputValidation-infoBackground);
-        color: var(--vscode-inputValidation-infoForeground);
-      }
-      .agent-status.completed {
-        background: #28a745;
-        color: white;
-      }
-      .agent-status.error {
-        background: #dc3545;
-        color: white;
-      }
-      .agent-body {
-        padding: 8px;
-      }
-      .agent-steps-container {
-        max-height: 150px;
-        overflow-y: auto;
-        font-size: 12px;
-      }
-      .agent-step {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 4px 8px;
-        border-radius: 4px;
-        margin-bottom: 4px;
-        background: var(--vscode-list-hoverBackground);
-      }
-      .agent-step:last-child {
-        margin-bottom: 0;
-      }
-      .step-icon {
-        flex-shrink: 0;
-      }
-      .step-name {
-        font-weight: 500;
-        color: var(--vscode-foreground);
-      }
-      .step-result {
-        color: var(--vscode-descriptionForeground);
-        font-size: 11px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .agent-step-placeholder {
-        color: var(--vscode-descriptionForeground);
-        font-style: italic;
-        padding: 8px;
-        text-align: center;
-      }
+      ${getAgentCardStyles()}
 
       /* 计划卡片样式 */
       .segment-plan {
@@ -708,15 +629,31 @@ export function getMessageAreaScript(): string {
       const syntaxCheckIconSvg = \`${syntaxCheckIconSvg}\`;
       const searchCodeIconSvg = \`${SearchCode}\`;
 
+      ${getAgentCardScript()}
+
       // 工具名称映射
       function getToolDisplayName(toolName) {
         const toolNameMap = {
           'file_read': '已完成文件读取',
           'file_write': '已完成文件写入',
+          'file_delete': '已完成文件删除',
           'file_list': '已检索代码文件',
           'syntax_check': '已完成语法检查',
           'simulation': '已完成仿真',
-          'waveform_summary': '已完成波形分析'
+          'waveform_summary': '已完成波形分析',
+          'knowledge_save': '已保存知识库',
+          'knowledge_load': '已加载知识库',
+          'queryKnowledgeSummary': '已查询知识摘要',
+          'queryRules': '已查询规则',
+          'setModule': '已设置模块',
+          'addSignal': '已添加信号',
+          'addSignalExample': '已添加信号示例',
+          'validateKnowledgeGraph': '已验证知识图谱',
+          'querySignals': '已查询信号',
+          'addPlan': '已添加计划',
+          'addEdge': '已添加边',
+          'showPlan': '已显示计划',
+          'spawnExplorer': '代码探索'
         };
         return toolNameMap[toolName] || toolName;
       }
@@ -949,6 +886,10 @@ export function getMessageAreaScript(): string {
             segmentDiv.className += ' segment-text';
             segmentDiv.innerHTML = formatText(segment.content);
           } else if (segment.type === 'tool') {
+            // 过滤掉不需要显示的工具
+            if (segment.toolName === 'spawnExplorer') {
+              return;
+            }
             const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
             const toolResult = segment.toolResult || '';
 
@@ -1083,39 +1024,7 @@ export function getMessageAreaScript(): string {
             }
           } else if (segment.type === 'agent') {
             // 智能体卡片渲染
-            segmentDiv.className += ' segment-agent';
-            const statusText = segment.agentStatus === 'completed' ? '完成'
-              : segment.agentStatus === 'error' ? '错误' : '执行中';
-            const statusClass = segment.agentStatus || 'running';
-
-            const stepsHtml = (segment.agentSteps || []).map(step => {
-              const icon = step.status === 'completed' ? '✅' : step.status === 'error' ? '❌' : '🔄';
-              const result = step.toolResult ? \`: \${step.toolResult.substring(0, 50)}\${step.toolResult.length > 50 ? '...' : ''}\` : '';
-              return \`<div class="agent-step"><span class="step-icon">\${icon}</span><span class="step-name">\${step.toolName}</span><span class="step-result">\${result}</span></div>\`;
-            }).join('');
-
-            segmentDiv.innerHTML = \`
-              <div class="agent-card">
-                <div class="agent-header">
-                  <span class="agent-icon">🤖</span>
-                  <span class="agent-name">\${segment.agentName || '智能体'}</span>
-                  <span class="agent-status \${statusClass}">\${statusText}</span>
-                </div>
-                <div class="agent-body">
-                  <div class="agent-steps-container">
-                    \${stepsHtml || '<div class="agent-step-placeholder">等待执行...</div>'}
-                  </div>
-                </div>
-              </div>
-            \`;
-
-            // 自动滚动到最新步骤
-            setTimeout(() => {
-              const container = segmentDiv.querySelector('.agent-steps-container');
-              if (container) {
-                container.scrollTop = container.scrollHeight;
-              }
-            }, 0);
+            renderAgentCard(segment, segmentDiv);
           } else if (segment.type === 'plan') {
             // 计划卡片渲染（类似 askUser）
             segmentDiv.className += ' segment-plan';
@@ -1269,6 +1178,10 @@ export function getMessageAreaScript(): string {
             segmentDiv.className += ' segment-text';
             segmentDiv.innerHTML = formatText(segment.content);
           } else if (segment.type === 'tool') {
+            // 过滤掉不需要显示的工具
+            if (segment.toolName === 'spawnExplorer') {
+              return;
+            }
             const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
             const toolResult = segment.toolResult || '';
 
@@ -1347,31 +1260,7 @@ export function getMessageAreaScript(): string {
             \`;
           } else if (segment.type === 'agent') {
             // 智能体卡片渲染
-            segmentDiv.className += ' segment-agent';
-            const statusText = segment.agentStatus === 'completed' ? '完成'
-              : segment.agentStatus === 'error' ? '错误' : '执行中';
-            const statusClass = segment.agentStatus || 'running';
-
-            const stepsHtml = (segment.agentSteps || []).map(step => {
-              const icon = step.status === 'completed' ? '✅' : step.status === 'error' ? '❌' : '🔄';
-              const result = step.toolResult ? \`: \${step.toolResult.substring(0, 50)}\${step.toolResult.length > 50 ? '...' : ''}\` : '';
-              return \`<div class="agent-step"><span class="step-icon">\${icon}</span><span class="step-name">\${step.toolName}</span><span class="step-result">\${result}</span></div>\`;
-            }).join('');
-
-            segmentDiv.innerHTML = \`
-              <div class="agent-card">
-                <div class="agent-header">
-                  <span class="agent-icon">🤖</span>
-                  <span class="agent-name">\${segment.agentName || '智能体'}</span>
-                  <span class="agent-status \${statusClass}">\${statusText}</span>
-                </div>
-                <div class="agent-body">
-                  <div class="agent-steps-container">
-                    \${stepsHtml || '<div class="agent-step-placeholder">等待执行...</div>'}
-                  </div>
-                </div>
-              </div>
-            \`;
+            renderAgentCard(segment, segmentDiv);
           } else if (segment.type === 'plan') {
             // 计划卡片渲染
             segmentDiv.className += ' segment-plan';