feat:将todo的需要改为勾选框

- 为后续的todo完成打勾做准备

package.json

@@ -101,7 +101,8 @@
   "files": [
     "dist",
     "media",
-    "tools"
+    "tools",
+    "src/assets"
   ],
   "dependencies": {
     "@wavedrom/doppler": "^1.14.0",

src/config/settings.ts

@@ -1,9 +1,15 @@
 /**
  * 配置管理
- * 后端地址已预配置，用户无需手动设置
+ * 支持 dev（本地开发）和 test（测试服务器）两种环境
  */
 import * as vscode from "vscode";
 
+/** 环境类型 */
+type Environment = "dev" | "test" | "prod";
+
+/** 当前环境 - 修改这里切换环境 */
+const CURRENT_ENV: Environment = "test";
+
 /** 配置项接口 */
 export interface IccoderConfig {
   /** 后端服务地址 */
@@ -14,19 +20,40 @@ export interface IccoderConfig {
   userId: string;
 }
 
-/** 默认配置（预配置，不暴露给用户） */
+/** 环境配置 */
-const DEFAULT_CONFIG: IccoderConfig = {
+const ENV_CONFIG: Record<Environment, IccoderConfig> = {
-  backendUrl: "http://192.168.1.108:2233",
+  /** 本地开发环境 */
-  timeout: 60000,
+  dev: {
-  userId: "default-user",
+    backendUrl: "http://localhost:2233",
+    timeout: 60000,
+    userId: "default-user",
+  },
+  /** 测试服务器环境 */
+  test: {
+    backendUrl: "http://192.168.1.108:2233",
+    timeout: 60000,
+    userId: "default-user",
+  },
+  /** 生产环境 */
+  prod: {
+    backendUrl: "https://api.iccoder.com", // TODO: 替换为实际生产地址
+    timeout: 60000,
+    userId: "default-user",
+  },
 };
 
+/**
+ * 获取当前环境
+ */
+export function getCurrentEnv(): Environment {
+  return CURRENT_ENV;
+}
+
 /**
  * 获取配置项
- * 直接返回预配置的值，用户无需手动配置
  */
 export function getConfig(): IccoderConfig {
-  return { ...DEFAULT_CONFIG };
+  return { ...ENV_CONFIG[CURRENT_ENV] };
 }
 
 /**
@@ -34,7 +61,6 @@ export function getConfig(): IccoderConfig {
  */
 export function getApiUrl(path: string): string {
   const { backendUrl } = getConfig();
-  // 确保 URL 格式正确
   const baseUrl = backendUrl.endsWith("/")
     ? backendUrl.slice(0, -1)
     : backendUrl;

src/constants/toolIcons.ts

@@ -82,6 +82,11 @@ export const agentIconSvg = `
  */
 export const plannerIconSvg = `<svg t="1767143425474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10954" width="16" height="16"><path d="M860.544 633.856c-82.368 0-152.128 69.632-158.464 152h-354.88c-31.616 0-63.296-31.68-63.296-63.296V437.376c12.608 0 25.344 6.4 44.288 6.4h380.16c12.672 69.696 76.032 126.656 152.128 126.656 88.704 0 158.336-69.696 158.336-158.4s-69.632-158.4-158.336-158.4c-76.096 0-139.456 57.024-152.128 126.656h-361.216c-31.616 0-63.296-31.68-63.296-63.296v-133.12h164.736c31.68 0 63.296-22.848 63.296-54.528a55.04 55.04 0 0 0-56-56h-380.16c-31.68 0-70.72 17.984-70.72 56s31.68 54.528 63.36 54.528h133.056v538.624c0 69.696 57.088 126.656 126.72 126.656h386.56c25.344 57.088 82.368 101.376 145.728 101.376a156.8 156.8 0 0 0 158.336-158.4 156.608 156.608 0 0 0-158.208-158.272z m0-316.8c50.624 0 94.912 44.288 94.912 94.976s-44.288 94.976-94.912 94.976c-50.752 0-95.104-44.288-95.104-94.976s44.352-94.976 95.104-94.976z m0 570.24c-50.752 0-95.104-44.352-95.104-95.04s44.352-95.04 95.104-95.04c50.624 0 94.912 44.352 94.912 95.04s-44.288 95.04-94.912 95.04z" p-id="10955" fill="#8a8a8a"></path></svg>`;
 
+/**
+ * Ask 模式图标 SVG
+ */
+export const askIconSvg = `<svg t="1767143500000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#8a8a8a"/><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420.4c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8 0-25.6 10.1-49.4 28.4-67.2 18.7-18.2 43.4-28.2 71.6-28.2s52.9 10 71.6 28.2c18.3 17.8 28.4 41.6 28.4 67.2 0 29.5-12.2 55.3-36.2 76.6-23.2 20.6-61.1 45.9-82.2 60.6-17.8 12.4-28.6 32.7-28.6 54.2V640c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-35.8c0-4.1 2.6-7.8 6.5-9.2 31.3-11.6 84.8-40.6 113.8-64.8 42.6-35.6 66.2-83.5 66.2-134.8 0-39.7-17.2-76.4-48.4-103.3z" fill="#8a8a8a"/><path d="M512 716m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" fill="#8a8a8a"/></svg>`;
+
 /**
  * 保存知识库图标 SVG
  */

src/panels/ICHelperPanel.ts

@@ -12,7 +12,9 @@ import {
   handlePlanAction,
   setPendingPlanExecution,
   getCurrentTaskId,
+  setLastTaskId,
 } from "../utils/messageHandler";
+import { compactDialog } from "../services/apiClient";
 import { VCDViewerPanel } from "./VCDViewerPanel";
 import { ChatHistoryManager } from "../utils/chatHistoryManager";
 import { MessageType } from "../types/chatHistory";
@@ -58,7 +60,10 @@ export async function showICHelperPanel(
     {
       enableScripts: true,
       retainContextWhenHidden: true,
-      localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "media")],
+      localResourceRoots: [
+        vscode.Uri.joinPath(context.extensionUri, "media"),
+        vscode.Uri.joinPath(context.extensionUri, "src", "assets")
+      ],
     }
   );
 
@@ -80,8 +85,28 @@ export async function showICHelperPanel(
     vscode.Uri.joinPath(context.extensionUri, "media", "icon.png")
   );
 
+  // 获取模型图标URI
+  const autoIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Auto.png")
+  );
+  const liteIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "lite.png")
+  );
+  const syIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Sy.png")
+  );
+  const maxIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
+  );
+
   // 设置HTML内容
-  panel.webview.html = getWebviewContent(iconUri.toString());
+  panel.webview.html = getWebviewContent(
+    iconUri.toString(),
+    autoIconUri.toString(),
+    liteIconUri.toString(),
+    syIconUri.toString(),
+    maxIconUri.toString()
+  );
 
   // 处理消息
   panel.webview.onDidReceiveMessage(
@@ -116,6 +141,9 @@ export async function showICHelperPanel(
           // 切换到当前面板的任务上下文
           historyManager.switchToPanelTask(panelId);
 
+          // 显示进度条
+          panel.webview.postMessage({ type: 'showProgress' });
+
           handleUserMessage(
             panel,
             message.text,
@@ -195,6 +223,39 @@ export async function showICHelperPanel(
         case "abortDialog":
           void abortCurrentDialog();
           break;
+        // 新增：压缩会话
+        case "compressConversation":
+          {
+            const taskId = getCurrentTaskId();
+            if (taskId) {
+              compactDialog(taskId)
+                .then((result) => {
+                  if (result.success) {
+                    panel.webview.postMessage({
+                      command: "receiveMessage",
+                      text: "✅ 会话压缩完成",
+                    });
+                  } else {
+                    panel.webview.postMessage({
+                      command: "receiveMessage",
+                      text: `❌ 压缩失败: ${result.error || "未知错误"}`,
+                    });
+                  }
+                })
+                .catch((err) => {
+                  panel.webview.postMessage({
+                    command: "receiveMessage",
+                    text: `❌ 压缩失败: ${err.message || "网络错误"}`,
+                  });
+                });
+            } else {
+              panel.webview.postMessage({
+                command: "receiveMessage",
+                text: "❌ 没有活跃的会话",
+              });
+            }
+          }
+          break;
         // 处理计划操作（只做模式切换，响应已通过 submitAnswer 发送）
         case "planAction":
           if (message.action === "confirm") {
@@ -220,6 +281,109 @@ export async function showICHelperPanel(
             }
           }
           break;
+        // 添加文件上下文 - 显示工作区文件列表
+        case "addContextFile":
+          {
+            const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
+            if (!workspaceFolder) {
+              vscode.window.showWarningMessage("请先打开一个工作区");
+              break;
+            }
+
+            // 获取工作区所有文件
+            const files = await vscode.workspace.findFiles(
+              "**/*",
+              "**/node_modules/**"
+            );
+
+            panel.webview.postMessage({
+              command: "showWorkspaceFileList",
+              files: files.map((uri) => ({
+                path: uri.fsPath,
+                relativePath: vscode.workspace.asRelativePath(uri),
+              })),
+            });
+          }
+          break;
+        // 添加文件夹上下文 - 显示工作区文件夹列表
+        case "addContextFolder":
+          {
+            const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
+            if (!workspaceFolder) {
+              vscode.window.showWarningMessage("请先打开一个工作区");
+              break;
+            }
+
+            // 获取工作区所有文件夹
+            const fs = require("fs");
+            const path = require("path");
+            const folders: Array<{ path: string; relativePath: string }> = [];
+
+            function scanFolders(dir: string, baseDir: string) {
+              try {
+                const items = fs.readdirSync(dir, { withFileTypes: true });
+                for (const item of items) {
+                  if (item.isDirectory() && item.name !== "node_modules" && !item.name.startsWith(".")) {
+                    const fullPath = path.join(dir, item.name);
+                    const relativePath = path.relative(baseDir, fullPath);
+                    folders.push({ path: fullPath, relativePath });
+                    scanFolders(fullPath, baseDir);
+                  }
+                }
+              } catch (error) {
+                console.error("扫描文件夹失败:", error);
+              }
+            }
+
+            scanFolders(workspaceFolder.uri.fsPath, workspaceFolder.uri.fsPath);
+
+            panel.webview.postMessage({
+              command: "showWorkspaceFolderList",
+              folders: folders,
+            });
+          }
+          break;
+        // 添加图片上下文
+        case "addContextImage":
+          {
+            const imageUris = await vscode.window.showOpenDialog({
+              canSelectFiles: true,
+              canSelectFolders: false,
+              canSelectMany: true,
+              openLabel: "选择图片",
+              filters: {
+                "图片文件": ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp"],
+              },
+            });
+            if (imageUris && imageUris.length > 0) {
+              panel.webview.postMessage({
+                command: "contextImagesSelected",
+                images: imageUris.map((uri) => uri.fsPath),
+              });
+            }
+          }
+          break;
+        // 添加文档库上下文
+        case "addContextDocument":
+          {
+            const docUris = await vscode.window.showOpenDialog({
+              canSelectFiles: true,
+              canSelectFolders: false,
+              canSelectMany: true,
+              openLabel: "选择文档",
+              filters: {
+                "文档文件": ["pdf", "doc", "docx", "txt", "md"],
+                "所有文件": ["*"],
+              },
+            });
+            if (docUris && docUris.length > 0) {
+              panel.webview.postMessage({
+                command: "contextDocumentsSelected",
+                documents: docUris.map((uri) => uri.fsPath),
+              });
+            }
+          }
+          break;
         // 新增：检查工作区状态
         case "checkWorkspace":
           const hasWorkspace = !!(
@@ -528,6 +692,9 @@ async function selectConversation(
       return;
     }
 
+    // 设置 lastTaskId，用于压缩等操作
+    setLastTaskId(taskId);
+
     // 更新面板的任务映射，确保后续对话保存到正确的任务中
     const panelId = (panel as any).__uniqueId;
     historyManager.setPanelTask(panelId, taskId, workspacePath);

src/services/apiClient.ts

@@ -155,6 +155,26 @@ export async function stopDialog(taskId: string): Promise<StopDialogResponse> {
   });
 }
 
+/** 压缩对话响应 */
+export interface CompactDialogResponse {
+  success: boolean;
+  taskId: string;
+  message?: string;
+  error?: string;
+}
+
+/**
+ * 手动压缩对话历史
+ * POST /api/dialog/compact
+ */
+export async function compactDialog(taskId: string): Promise<CompactDialogResponse> {
+  console.log(`[API] 压缩对话: taskId=${taskId}`);
+  return request<CompactDialogResponse>('/api/dialog/compact', {
+    method: 'POST',
+    body: { taskId }
+  });
+}
+
 /**
  * 创建成功的工具结果
  */

src/services/dialogService.ts

@@ -73,6 +73,8 @@ export interface DialogCallbacks {
   onError?: (message: string) => void;
   /** 通知消息 */
   onNotification?: (message: string) => void;
+  /** 上下文使用量更新 */
+  onContextUsage?: (data: { currentTokens: number; maxTokens: number; percentage: number }) => void;
 }
 
 /**
@@ -553,6 +555,12 @@ export class DialogSession {
       onComplete: (data) => {
         this.isActive = false;
         this.finalizeTextSegment();
+
+        // 追踪 AI 消息（用于后端重启后恢复）
+        if (this.accumulatedText) {
+          historyManager.trackAiMessage(this.accumulatedText);
+        }
+
         // 发送所有段落
         callbacks.onComplete?.(this.segments);
       },
@@ -639,6 +647,11 @@ export class DialogSession {
         await historyManager.saveCompactedData(data.compactedData);
       },
 
+      onContextUsage: (data) => {
+        console.log('[DialogSession] onContextUsage:', data.currentTokens, '/', data.maxTokens);
+        callbacks.onContextUsage?.(data);
+      },
+
       onOpen: () => {
         console.log('[DialogSession] SSE 连接已建立');
       },

src/services/sseHandler.ts

@@ -27,7 +27,8 @@ import type {
   AgentStartEvent,
   AgentProgressEvent,
   AgentCompleteEvent,
-  AgentErrorEvent
+  AgentErrorEvent,
+  ContextUsageEvent
 } from '../types/api';
 import type { MemoryCompactedEvent } from '../types/memory';
 
@@ -71,6 +72,8 @@ export interface SSECallbacks {
   onAgentError?: (data: AgentErrorEvent) => void;
   /** 记忆压缩完成 */
   onMemoryCompacted?: (data: MemoryCompactedEvent) => void;
+  /** 上下文使用量更新 */
+  onContextUsage?: (data: ContextUsageEvent) => void;
   /** 连接打开 */
   onOpen?: () => void;
   /** 连接关闭 */
@@ -325,6 +328,9 @@ function dispatchEvent(
     case 'memory_compacted':
       callbacks.onMemoryCompacted?.(data as MemoryCompactedEvent);
       break;
+    case 'context_usage':
+      callbacks.onContextUsage?.(data as ContextUsageEvent);
+      break;
     default:
       console.log(`[SSE] 未知事件类型: ${eventType}`, data);
   }

src/services/userInteraction.ts

@@ -67,13 +67,13 @@ export class UserInteractionManager {
         reject
       });
 
-      // 设置超时（5分钟）
+      // 设置超时（2小时）
       setTimeout(() => {
         if (this.pendingQuestions.has(askId)) {
           this.pendingQuestions.delete(askId);
           reject(new Error('用户回答超时'));
         }
-      }, 300000);
+      }, 7200000);
     });
   }
 

src/types/api.ts

@@ -54,6 +54,7 @@ export type SSEEventType =
   | 'agent_complete'  // 子智能体完成
   | 'agent_error'     // 子智能体错误
   | 'memory_compacted' // 记忆压缩完成
+  | 'context_usage'   // 上下文使用量
   | 'complete'        // 对话完成
   | 'error'           // 错误
   | 'warning'         // 警告
@@ -181,6 +182,13 @@ export interface AgentErrorEvent {
   timestamp: number;
 }
 
+/** context_usage 事件数据 */
+export interface ContextUsageEvent {
+  currentTokens: number;
+  maxTokens: number;
+  percentage: number;
+}
+
 // ============== 工具调用协议 (MCP 格式) ==============
 
 /**

src/utils/messageHandler.ts

@@ -19,7 +19,7 @@ import { dialogManager, DialogSession } from "../services/dialogService";
 import { userInteractionManager } from "../services/userInteraction";
 import { healthCheck } from "../services/apiClient";
 
-import type { RunMode } from '../types/api';
+import type { RunMode } from "../types/api";
 
 /** 是否使用后端服务（可通过配置控制） */
 let useBackendService = true;
@@ -27,12 +27,15 @@ let useBackendService = true;
 /** 当前对话会话 */
 let currentSession: DialogSession | null = null;
 
+/** 最后一个活跃的 taskId（用于压缩等操作） */
+let lastTaskId: string | null = null;
+
 /** 待执行的计划（Plan 模式确认后自动执行） */
 let pendingPlanExecution: {
   panel: vscode.WebviewPanel;
   planTitle: string;
   extensionPath: string;
-  taskId: string;  // 保存 taskId 以便复用
+  taskId: string; // 保存 taskId 以便复用
 } | null = null;
 
 /**
@@ -45,7 +48,7 @@ export function setPendingPlanExecution(
   taskId: string
 ): void {
   pendingPlanExecution = { panel, planTitle, extensionPath, taskId };
-  console.log('[MessageHandler] 设置待执行计划:', planTitle, 'taskId:', taskId);
+  console.log("[MessageHandler] 设置待执行计划:", planTitle, "taskId:", taskId);
 }
 
 /**
@@ -90,29 +93,28 @@ export async function handleUserMessage(
       await handleUserMessageWithBackend(panel, text, extensionPath, mode);
       return;
     } catch (error) {
-      console.error("后端服务不可用，回退到本地模式:", error);
+      console.error("后端服务不可用:", error);
-      // 后端不可用时，使用本地模拟回复
+      panel.webview.postMessage({
+        command: "updateStatus",
+        text: "后端服务不可用",
+        type: "error",
+      });
+      // 恢复输入状态
+      panel.webview.postMessage({
+        command: "updateSegments",
+        segments: [],
+        isComplete: true,
+      });
+      throw error;
     }
   }
 
-  // 本地模拟回复（后端不可用时的 fallback）
+  // 如果没有 extensionPath，显示错误
-  console.log("使用本地模拟回复");
+  panel.webview.postMessage({
-  const reply = getMockReply(text);
+    command: "updateStatus",
-
+    text: "无法处理消息：缺少必要参数",
-  // 记录AI回复到历史（允许失败）
+    type: "error",
-  try {
+  });
-    const historyManager = ChatHistoryManager.getInstance();
-    await historyManager.addAiMessage(reply);
-  } catch (error) {
-    console.warn("记录AI回复历史失败:", error);
-  }
-
-  setTimeout(() => {
-    panel.webview.postMessage({
-      command: "receiveMessage",
-      text: reply,
-    });
-  }, 500);
 }
 
 /**
@@ -123,13 +125,15 @@ async function handleUserMessageWithBackend(
   text: string,
   extensionPath: string,
   mode?: RunMode,
-  reuseTaskId?: string  // 可选，复用现有 taskId（用于 Plan 模式确认后继续执行）
+  reuseTaskId?: string // 可选，复用现有 taskId（用于 Plan 模式确认后继续执行）
 ): Promise<void> {
   // 创建或复用会话
   if (!currentSession || !currentSession.active) {
     currentSession = dialogManager.createSession(extensionPath, reuseTaskId);
+    // 保存 taskId 用于后续操作（如压缩）
+    lastTaskId = currentSession.getTaskId();
     if (reuseTaskId) {
-      console.log('[MessageHandler] 复用 taskId 创建会话:', reuseTaskId);
+      console.log("[MessageHandler] 复用 taskId 创建会话:", reuseTaskId);
     }
   }
 
@@ -143,117 +147,150 @@ async function handleUserMessageWithBackend(
   });
 
   return new Promise((resolve, reject) => {
-    currentSession!.sendMessage(text, {
+    currentSession!.sendMessage(
-      onText: (fullText, isStreaming) => {
+      text,
-        // 不再单独处理文本，统一通过 onSegmentUpdate 处理
+      {
+        onText: (fullText, isStreaming) => {
+          // 不再单独处理文本，统一通过 onSegmentUpdate 处理
+        },
+
+        onSegmentUpdate: (segments) => {
+          // 实时发送段落更新，按后端返回顺序展示
+          panel.webview.postMessage({
+            command: "updateSegments",
+            segments: segments,
+          });
+        },
+
+        onToolStart: (toolName) => {
+          // 更新状态栏
+          panel.webview.postMessage({
+            command: "updateStatus",
+            text: `正在执行 ${toolName}...`,
+            type: "working",
+          });
+        },
+
+        onToolComplete: (toolName, result) => {
+          // 工具完成，不需要单独处理，通过 onSegmentUpdate 统一更新
+        },
+
+        onToolError: (toolName, error) => {
+          // 工具错误，不需要单独处理，通过 onSegmentUpdate 统一更新
+        },
+
+        onQuestion: (askId, question, options) => {
+          // 只更新状态栏，问题显示由 onSegmentUpdate 统一处理
+          panel.webview.postMessage({
+            command: "updateStatus",
+            text: "等待用户回答...",
+            type: "working",
+          });
+        },
+
+        onComplete: async (segments) => {
+          // 隐藏状态栏
+          panel.webview.postMessage({
+            command: "hideStatus",
+          });
+
+          // 最后一次发送完整的段落
+          console.log("[MessageHandler] 对话完成, 段落数:", segments.length);
+          console.log(
+            "[MessageHandler] segments 内容:",
+            JSON.stringify(segments)
+          );
+
+          const result = await panel.webview.postMessage({
+            command: "updateSegments",
+            segments: segments,
+            isComplete: true,
+          });
+          console.log("[MessageHandler] postMessage 返回值:", result);
+
+          // 保存完整的 segments 到历史记录
+          try {
+            // 将完整的 segments 保存到一条 AI 消息中
+            // 这样加载时可以完整还原对话样式
+            const textContent = segments
+              .filter((s) => s.type === "text" && s.content)
+              .map((s) => s.content)
+              .join("\n");
+
+            await historyManager.addAiMessage(textContent, undefined, segments);
+          } catch (error) {
+            console.warn("保存AI响应历史失败:", error);
+          }
+
+          // 检查是否有待执行的计划（Plan 模式确认后自动执行）
+          if (pendingPlanExecution) {
+            const {
+              panel: execPanel,
+              planTitle,
+              extensionPath: execPath,
+              taskId: reuseTaskId,
+            } = pendingPlanExecution;
+            pendingPlanExecution = null;
+            console.log(
+              "[MessageHandler] 自动执行计划:",
+              planTitle,
+              "复用 taskId:",
+              reuseTaskId
+            );
+
+            // 延迟一小段时间确保当前对话完全结束
+            setTimeout(async () => {
+              try {
+                // 复用 taskId 创建新会话，确保知识图谱数据不丢失
+                await handleUserMessageWithBackend(
+                  execPanel,
+                  `请按照刚才的计划执行：${planTitle}`,
+                  execPath,
+                  "agent",
+                  reuseTaskId // 复用 Plan 模式的 taskId
+                );
+              } catch (err) {
+                console.error("[MessageHandler] 自动执行计划失败:", err);
+              }
+            }, 500);
+          }
+
+          resolve();
+        },
+
+        onError: (message) => {
+          panel.webview.postMessage({
+            command: "hideLoading",
+          });
+          panel.webview.postMessage({
+            command: "receiveMessage",
+            text: `❌ 错误: ${message}`,
+          });
+          // 恢复输入状态
+          panel.webview.postMessage({
+            command: "updateSegments",
+            segments: [],
+            isComplete: true,
+          });
+          reject(new Error(message));
+        },
+
+        onNotification: (message) => {
+          vscode.window.showInformationMessage(message);
+        },
+
+        onContextUsage: (data) => {
+          // 发送上下文使用量到 WebView
+          panel.webview.postMessage({
+            command: "contextUsage",
+            currentTokens: data.currentTokens,
+            maxTokens: data.maxTokens,
+            percentage: data.percentage,
+          });
+        },
       },
-
+      mode
-      onSegmentUpdate: (segments) => {
+    );
-        // 实时发送段落更新，按后端返回顺序展示
-        panel.webview.postMessage({
-          command: "updateSegments",
-          segments: segments,
-        });
-      },
-
-      onToolStart: (toolName) => {
-        // 更新状态栏
-        panel.webview.postMessage({
-          command: "updateStatus",
-          text: `正在执行 ${toolName}...`,
-          type: "working",
-        });
-      },
-
-      onToolComplete: (toolName, result) => {
-        // 工具完成，不需要单独处理，通过 onSegmentUpdate 统一更新
-      },
-
-      onToolError: (toolName, error) => {
-        // 工具错误，不需要单独处理，通过 onSegmentUpdate 统一更新
-      },
-
-      onQuestion: (askId, question, options) => {
-        // 只更新状态栏，问题显示由 onSegmentUpdate 统一处理
-        panel.webview.postMessage({
-          command: "updateStatus",
-          text: "等待用户回答...",
-          type: "working",
-        });
-      },
-
-      onComplete: async (segments) => {
-        // 隐藏状态栏
-        panel.webview.postMessage({
-          command: "hideStatus",
-        });
-
-        // 最后一次发送完整的段落
-        console.log('[MessageHandler] 对话完成, 段落数:', segments.length);
-        console.log('[MessageHandler] segments 内容:', JSON.stringify(segments));
-
-        const result = await panel.webview.postMessage({
-          command: "updateSegments",
-          segments: segments,
-          isComplete: true,
-        });
-        console.log('[MessageHandler] postMessage 返回值:', result);
-
-        // 保存完整的 segments 到历史记录
-        try {
-          // 将完整的 segments 保存到一条 AI 消息中
-          // 这样加载时可以完整还原对话样式
-          const textContent = segments
-            .filter(s => s.type === 'text' && s.content)
-            .map(s => s.content)
-            .join('\n');
-
-          await historyManager.addAiMessage(textContent, undefined, segments);
-        } catch (error) {
-          console.warn("保存AI响应历史失败:", error);
-        }
-
-        // 检查是否有待执行的计划（Plan 模式确认后自动执行）
-        if (pendingPlanExecution) {
-          const { panel: execPanel, planTitle, extensionPath: execPath, taskId: reuseTaskId } = pendingPlanExecution;
-          pendingPlanExecution = null;
-          console.log('[MessageHandler] 自动执行计划:', planTitle, '复用 taskId:', reuseTaskId);
-
-          // 延迟一小段时间确保当前对话完全结束
-          setTimeout(async () => {
-            try {
-              // 复用 taskId 创建新会话，确保知识图谱数据不丢失
-              await handleUserMessageWithBackend(
-                execPanel,
-                `请按照刚才的计划执行：${planTitle}`,
-                execPath,
-                'agent',
-                reuseTaskId  // 复用 Plan 模式的 taskId
-              );
-            } catch (err) {
-              console.error('[MessageHandler] 自动执行计划失败:', err);
-            }
-          }, 500);
-        }
-
-        resolve();
-      },
-
-      onError: (message) => {
-        panel.webview.postMessage({
-          command: "hideLoading",
-        });
-        panel.webview.postMessage({
-          command: "receiveMessage",
-          text: `❌ 错误: ${message}`,
-        });
-        reject(new Error(message));
-      },
-
-      onNotification: (message) => {
-        vscode.window.showInformationMessage(message);
-      },
-    }, mode);
   });
 }
 
@@ -281,16 +318,16 @@ export async function abortCurrentDialog(): Promise<void> {
       try {
         const historyManager = ChatHistoryManager.getInstance();
         const textContent = segments
-          .filter(s => s.type === 'text' && s.content)
+          .filter((s) => s.type === "text" && s.content)
-          .map(s => s.content)
+          .map((s) => s.content)
-          .join('\n');
+          .join("\n");
 
         // 添加中止标记
-        const abortedContent = textContent + '\n\n[对话已被用户中止]';
+        const abortedContent = textContent + "\n\n[对话已被用户中止]";
         await historyManager.addAiMessage(abortedContent, undefined, segments);
-        console.log('[MessageHandler] 已保存中止前的对话内容');
+        console.log("[MessageHandler] 已保存中止前的对话内容");
       } catch (error) {
-        console.warn('[MessageHandler] 保存中止对话失败:', error);
+        console.warn("[MessageHandler] 保存中止对话失败:", error);
       }
     }
   }
@@ -298,8 +335,8 @@ export async function abortCurrentDialog(): Promise<void> {
   // 通知 WebView 重置分段消息容器
   const panel = userInteractionManager.getWebviewPanel();
   if (panel) {
-    panel.webview.postMessage({ command: 'resetSegmentedMessage' });
+    panel.webview.postMessage({ command: "resetSegmentedMessage" });
-    console.log('[MessageHandler] 已发送重置分段消息命令');
+    console.log("[MessageHandler] 已发送重置分段消息命令");
   }
 
   dialogManager.abortCurrentSession();
@@ -310,7 +347,15 @@ export async function abortCurrentDialog(): Promise<void> {
  * 获取当前会话的 taskId
  */
 export function getCurrentTaskId(): string | null {
-  return currentSession?.getTaskId() || null;
+  return currentSession?.getTaskId() || lastTaskId;
+}
+
+/**
+ * 设置最后的 taskId（加载历史会话时调用）
+ */
+export function setLastTaskId(taskId: string): void {
+  lastTaskId = taskId;
+  console.log("[MessageHandler] 设置 lastTaskId:", taskId);
 }
 
 /**
@@ -326,52 +371,52 @@ export async function handlePlanAction(
   planTitle: string,
   extensionPath: string
 ): Promise<void> {
-  console.log('[handlePlanAction] action:', action, 'planTitle:', planTitle);
+  console.log("[handlePlanAction] action:", action, "planTitle:", planTitle);
 
   switch (action) {
-    case 'confirm':
+    case "confirm":
       // 确认执行：切换到 Agent 模式并发送执行消息
       panel.webview.postMessage({
-        command: 'switchMode',
+        command: "switchMode",
-        mode: 'agent'
+        mode: "agent",
       });
       // 发送执行消息
       await handleUserMessage(
         panel,
         `请按照刚才的计划执行：${planTitle}`,
         extensionPath,
-        'agent'
+        "agent"
       );
       break;
 
-    case 'modify':
+    case "modify":
       // 修改计划：提示用户输入修改建议
       const modification = await vscode.window.showInputBox({
-        prompt: '请输入您对计划的修改建议',
+        prompt: "请输入您对计划的修改建议",
-        placeHolder: '例如：第2步需要先检查文件是否存在...',
+        placeHolder: "例如：第2步需要先检查文件是否存在...",
-        ignoreFocusOut: true
+        ignoreFocusOut: true,
       });
       if (modification) {
         await handleUserMessage(
           panel,
           `请根据以下建议修改计划：${modification}`,
           extensionPath,
-          'plan'
+          "plan"
         );
       }
       break;
 
-    case 'cancel':
+    case "cancel":
       // 取消计划：通知用户
       panel.webview.postMessage({
-        command: 'addMessage',
+        command: "addMessage",
-        text: '计划已取消。',
+        text: "计划已取消。",
-        sender: 'bot'
+        sender: "bot",
       });
       break;
 
     default:
-      console.warn('[handlePlanAction] 未知操作:', action);
+      console.warn("[handlePlanAction] 未知操作:", action);
   }
 }
 
@@ -410,7 +455,9 @@ function parseFileOperation(text: string): {
   }
 
   // 匹配重命名文件：将 xxx.ts 重命名为 yyy.ts 或 把 xxx.ts 改名为 yyy.ts（优先匹配，避免被修改匹配）
-  const renameMatch = lowerText.match(/(?:将|把)\s*(.+?\.\w+)\s*(?:重命名|改名)\s*(?:为|成)\s*(.+?\.\w+)/);
+  const renameMatch = lowerText.match(
+    /(?:将|把)\s*(.+?\.\w+)\s*(?:重命名|改名)\s*(?:为|成)\s*(.+?\.\w+)/
+  );
   if (renameMatch) {
     const oldPath = renameMatch[1].trim();
     const newPath = renameMatch[2].trim();
@@ -425,7 +472,9 @@ function parseFileOperation(text: string): {
   // 格式1: 在 xxx.ts 中将 "aaa" 替换为 "bbb"
   // 格式2: 将 xxx.ts 文件 "aaa" 替换为 "bbb"
   // 格式3: 将 xxx.ts 文件 'aaa' 替换为 'bbb'
-  const replaceMatch1 = lowerText.match(/在\s*(.+?\.\w+)\s*(?:文件)?中?\s*(?:将|把)\s*["'](.+?)["']\s*替换\s*(?:为|成)\s*["'](.+?)["']/);
+  const replaceMatch1 = lowerText.match(
+    /在\s*(.+?\.\w+)\s*(?:文件)?中?\s*(?:将|把)\s*["'](.+?)["']\s*替换\s*(?:为|成)\s*["'](.+?)["']/
+  );
   if (replaceMatch1) {
     const filePath = replaceMatch1[1].trim();
     const searchText = replaceMatch1[2].trim();
@@ -439,7 +488,9 @@ function parseFileOperation(text: string): {
   }
 
   // 格式2: 将 xxx.ts 文件 "aaa" 替换为 "bbb"
-  const replaceMatch2 = lowerText.match(/(?:将|把)\s*(.+?\.\w+)\s*(?:文件)?\s*["'](.+?)["']\s*替换\s*(?:为|成)\s*["'](.+?)["']/);
+  const replaceMatch2 = lowerText.match(
+    /(?:将|把)\s*(.+?\.\w+)\s*(?:文件)?\s*["'](.+?)["']\s*替换\s*(?:为|成)\s*["'](.+?)["']/
+  );
   if (replaceMatch2) {
     const filePath = replaceMatch2[1].trim();
     const searchText = replaceMatch2[2].trim();
@@ -767,41 +818,6 @@ export async function handleReplaceInFile(
   }
 }
 
-/**
- * 获取模拟回复
- */
-function getMockReply(question: string): string {
-  const replies = [
-    `已收到您的问题："${question}"
-
-这是一个演示版本，实际需要连接AI服务。
-
-示例回复：这是一个计数器模板：
-\`\`\`verilog
-module counter (
-  input clk,
-  input rst_n,
-  output reg [3:0] count
-);
-  always @(posedge clk or negedge rst_n) begin
-    if (!rst_n) count <= 0;
-    else count <= count + 1;
-  end
-endmodule
-\`\`\``,
-
-    `感谢提问！关于"${question}"，在真实版本中我会：
-1. 分析您的代码上下文
-2. 提供优化建议
-3. 生成完整代码
-4. 解释设计原理
-
-当前是演示版，请点击侧边栏按钮快速生成代码。`,
-  ];
-
-  return replies[Math.floor(Math.random() * replies.length)];
-}
-
 /**
  * 将代码插入到编辑器
  */
@@ -894,7 +910,8 @@ async function handleVCDGeneration(
 
         if (!projectCheck.hasTestbench) {
           errorMsg += "• ❌ 缺少 testbench 文件\n";
-          errorMsg += "\n提示: testbench 文件应包含 $dumpfile 和 $dumpvars 语句来生成 VCD 文件。\n";
+          errorMsg +=
+            "\n提示: testbench 文件应包含 $dumpfile 和 $dumpvars 语句来生成 VCD 文件。\n";
         } else {
           errorMsg += `• ✅ Testbench: ${projectCheck.testbenchFile}\n`;
         }
@@ -938,9 +955,7 @@ async function handleVCDGeneration(
           fileName: fileName,
         });
 
-        vscode.window.showInformationMessage(
+        vscode.window.showInformationMessage(`VCD 文件生成成功: ${fileName}`);
-          `VCD 文件生成成功: ${fileName}`
-        );
       } else {
         panel.webview.postMessage({
           command: "receiveMessage",

src/views/ICViewProvider.ts

@@ -24,7 +24,10 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
     {
       enableScripts: true,
       retainContextWhenHidden: true,
-      localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "media")],
+      localResourceRoots: [
+        vscode.Uri.joinPath(context.extensionUri, "media"),
+        vscode.Uri.joinPath(context.extensionUri, "src", "assets")
+      ],
     }
   );
 
@@ -39,8 +42,29 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
   const iconUri = panel.webview.asWebviewUri(
     vscode.Uri.joinPath(context.extensionUri, "media", "icon.png")
   );
+
+  // 获取模型图标URI
+  const autoIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Auto.png")
+  );
+  const liteIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "lite.png")
+  );
+  const syIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Sy.png")
+  );
+  const maxIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
+  );
+
   // 设置HTML内容
-  panel.webview.html = getWebviewContent(iconUri.toString());
+  panel.webview.html = getWebviewContent(
+    iconUri.toString(),
+    autoIconUri.toString(),
+    liteIconUri.toString(),
+    syIconUri.toString(),
+    maxIconUri.toString()
+  );
 
   // 处理消息
   panel.webview.onDidReceiveMessage(
@@ -136,13 +160,17 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
     });
 
     // 处理侧边栏的消息
-    webviewView.webview.onDidReceiveMessage((message) => {
+    webviewView.webview.onDidReceiveMessage(
-      if (message.command === "openChat") {
+      (message) => {
-        vscode.commands.executeCommand("ic-coder.openChat");
+        if (message.command === "openChat") {
-      } else if (message.command === "login") {
+          vscode.commands.executeCommand("ic-coder.openChat");
-        vscode.commands.executeCommand("ic-coder.login");
+        } else if (message.command === "login") {
-      }
+          vscode.commands.executeCommand("ic-coder.login");
-    });
+        }
+      },
+      undefined,
+      this.context.subscriptions
+    );
   }
 
   private getWebviewContent(

src/views/agentCard.ts

@@ -96,6 +96,27 @@ export function getAgentCardStyles(): string {
       padding: 8px;
       text-align: center;
     }
+    /* 低调显示的工具调用样式 */
+    .agent-step.low-profile {
+      opacity: 0.5;
+      font-size: 10px;
+      padding: 2px 6px;
+      background: transparent;
+      margin-bottom: 2px;
+    }
+    .agent-step.low-profile .step-icon {
+      opacity: 0.4;
+      font-size: 10px;
+    }
+    .agent-step.low-profile .step-name {
+      font-weight: 300;
+      color: var(--vscode-descriptionForeground);
+      opacity: 0.7;
+    }
+    .agent-step.low-profile .step-result {
+      opacity: 0.6;
+      font-size: 9px;
+    }
   `;
 }
 
@@ -119,8 +140,8 @@ export function getAgentCardScript(): string {
         'queryKnowledgeSummary': '查询知识摘要',
         'queryRules': '查询规则',
         'setModule': '设置模块',
-        'addSignal': '添加信号',
+        'addSignal': '正在分析信号定义',
-        'addSignalExample': '添加信号示例',
+        'addSignalExample': '正在处理信号示例',
         'validateKnowledgeGraph': '验证知识图谱',
         'querySignals': '查询信号',
         'addPlan': '添加计划',
@@ -147,7 +168,16 @@ export function getAgentCardScript(): string {
         const icon = step.status === 'completed' ? '✅' : step.status === 'error' ? '❌' : '🔄';
         const displayName = getAgentToolDisplayName(step.toolName);
         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">\${displayName}</span><span class="step-result">\${result}</span></div>\`;
+        // 为技术性工具调用添加低调样式（用户看不懂的）
+        const lowProfileTools = [
+          'knowledge_save', 'knowledge_load',
+          'queryKnowledgeSummary', 'queryRules', 'querySignals',
+          'setModule', 'addSignal', 'addSignalExample',
+          'validateKnowledgeGraph', 'addPlan', 'addEdge',
+          'showPlan', 'spawnExplorer'
+        ];
+        const stepClass = lowProfileTools.includes(step.toolName) ? 'agent-step low-profile' : 'agent-step';
+        return \`<div class="\${stepClass}"><span class="step-icon">\${icon}</span><span class="step-name">\${displayName}</span><span class="step-result">\${result}</span></div>\`;
       }).join('');
 
       segmentDiv.innerHTML = \`

src/views/agentModeSelector.ts

@@ -8,6 +8,12 @@
  * - Agent: 智能体自主，自动执行大部分操作
  */
 
+import {
+  plannerIconSvg,
+  askIconSvg,
+  agentIconSvg,
+} from "../constants/toolIcons";
+
 /**
  * 获取模式选择器的 HTML 内容
  */
@@ -23,16 +29,25 @@ export function getModeSelectorContent(): string {
         </div>
         <div class="mode-dropdown" id="modeDropdown">
           <div class="mode-option" data-value="plan" onclick="selectMode('plan', 'Plan')">
-            <span class="mode-option-label">Plan</span>
+            <div class="mode-option-header">
-            <span class="mode-option-desc">只读模式</span>
+              <span class="mode-option-icon">${plannerIconSvg}</span>
+              <span class="mode-option-label">Plan</span>
+            </div>
+            <span class="mode-option-desc">仅根据需求生成设计文档，之后由用户决定下一步，可以提高工程质量</span>
           </div>
           <div class="mode-option" data-value="ask" onclick="selectMode('ask', 'Ask')">
-            <span class="mode-option-label">Ask</span>
+            <div class="mode-option-header">
-            <span class="mode-option-desc">逐个确认</span>
+              <span class="mode-option-icon">${askIconSvg}</span>
+              <span class="mode-option-label">Ask</span>
+            </div>
+            <span class="mode-option-desc">仅给与智能体读权限，用于依据项目回答用户问题，或者与用户进行探讨</span>
           </div>
           <div class="mode-option selected" data-value="agent" onclick="selectMode('agent', 'Agent')">
-            <span class="mode-option-label">Agent</span>
+            <div class="mode-option-header">
-            <span class="mode-option-desc">智能体自主</span>
+              <span class="mode-option-icon">${agentIconSvg}</span>
+              <span class="mode-option-label">Agent</span>
+            </div>
+            <span class="mode-option-desc">用于快速生成工程、调试修改现有代码</span>
           </div>
         </div>
       </div>
@@ -83,7 +98,8 @@ export function getModeSelectorStyles(): string {
       position: absolute;
       bottom: calc(100% + 2px);
       left: 0;
-      min-width: 140px;
+      min-width: 200px;
+      max-width: 300px;
       background: var(--vscode-dropdown-background);
       border: 1px solid var(--vscode-dropdown-border);
       border-radius: 4px;
@@ -98,13 +114,12 @@ export function getModeSelectorStyles(): string {
     /* 模式选择器的选项样式 */
     .mode-option {
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
-      align-items: center;
+      align-items: flex-start;
       padding: 8px 12px;
       font-size: 12px;
       cursor: pointer;
       transition: background 0.2s ease;
-      white-space: nowrap;
     }
     .mode-option:hover {
       background: rgba(128, 128, 128, 0.3);
@@ -112,13 +127,31 @@ export function getModeSelectorStyles(): string {
     .mode-option.selected {
       background: rgba(64, 158, 255, 0.2);
     }
+    .mode-option-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 4px;
+    }
+    .mode-option-icon {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .mode-option-icon svg {
+      width: 16px;
+      height: 16px;
+      display: block;
+    }
     .mode-option-label {
       font-weight: 500;
     }
     .mode-option-desc {
       font-size: 10px;
       color: var(--vscode-descriptionForeground);
-      margin-left: 12px;
+      line-height: 1.4;
+      word-wrap: break-word;
+      white-space: normal;
     }
   `;
 }
@@ -157,9 +190,9 @@ export function getModeSelectorScript(): string {
       // 更新 tooltip
       if (modeTooltip) {
         const tooltipMap = {
-          'plan': '只读模式 - 只能查询分析',
+          'plan': 'plan模式',
-          'ask': '逐个确认 - 每个写操作需确认',
+          'ask': 'ask模式',
-          'agent': '智能体自主模式','
+          'agent': 'agent模式'
         };
         modeTooltip.textContent = tooltipMap[value] || '切换模式';
       }

src/views/contextButton.ts

@@ -7,14 +7,78 @@
  */
 export function getContextButtonContent(): string {
   return `
-    <div class="tooltip">
+    <div class="context-selector-wrapper">
-      <button class="add-context-button" onclick="handleAddContext()">
+      <div class="tooltip">
-        <svg t="1766915545722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" width="200" height="200">
+        <button class="add-context-button" onclick="toggleContextMenu()">
-          <path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#8a8a8a" p-id="4995"></path>
+          <svg t="1766915545722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" width="200" height="200">
-        </svg>
+            <path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#8a8a8a" p-id="4995"></path>
-        <span class="add-context-label">添加上下文</span>
+          </svg>
-      </button>
+          <span class="add-context-label">添加上下文</span>
-      <span class="tooltiptext">添加文件或代码片段作为上下文</span>
+          <svg class="dropdown-arrow" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 714.666667L213.333333 416l42.666667-42.666667L512 629.333333l256-256 42.666667 42.666667z" fill="currentColor"/>
+          </svg>
+        </button>
+        <span class="tooltiptext">添加文件、文件夹、图片或文档作为上下文</span>
+      </div>
+
+      <!-- 上拉菜单 -->
+      <div class="context-menu" id="contextMenu">
+        <!-- 主菜单 -->
+        <div class="context-menu-main" id="contextMenuMain">
+          <div class="context-menu-item" onclick="showFileList()">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z" fill="currentColor"/>
+            </svg>
+            <span>文件</span>
+            <svg class="arrow-right" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M340.864 149.312l384 384-384 384-45.248-45.248L634.368 533.312 295.616 194.56z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="context-menu-item" onclick="showFolderList()">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 298.4H521L403.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z" fill="currentColor"/>
+            </svg>
+            <span>文件夹</span>
+            <svg class="arrow-right" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M340.864 149.312l384 384-384 384-45.248-45.248L634.368 533.312 295.616 194.56z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="context-menu-item" onclick="handleAddImage()">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z m-120-240c0 55.2-44.8 100-100 100s-100-44.8-100-100 44.8-100 100-100 100 44.8 100 100z m-476 0l164 164h476L696 480 536 640l-84-84-160 160z" fill="currentColor"/>
+            </svg>
+            <span>图片</span>
+          </div>
+          <div class="context-menu-item" onclick="handleAddDocument()">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32z m-40 824H232V136h560v752z m-120-568H352c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h320c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z m0 144H352c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h320c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z m0 144H352c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h320c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+            </svg>
+            <span>文档库</span>
+          </div>
+        </div>
+
+        <!-- 文件/文件夹列表视图 -->
+        <div class="context-menu-list" id="contextMenuList" style="display: none;">
+          <div class="context-menu-list-header">
+            <button class="context-menu-back" onclick="backToMainMenu()">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" fill="currentColor"/>
+              </svg>
+            </button>
+            <span id="contextMenuListTitle">选择文件</span>
+          </div>
+          <div class="context-menu-list-body" id="contextMenuListBody">
+            <!-- 动态加载列表 -->
+          </div>
+          <div class="context-menu-list-footer">
+            <input type="text" id="contextMenuSearch" placeholder="搜索..." />
+            <div class="context-menu-list-actions">
+              <span id="contextMenuListCount">已选择 0 项</span>
+              <button class="primary" onclick="confirmSelection()">确定</button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   `;
 }
@@ -24,6 +88,12 @@ export function getContextButtonContent(): string {
  */
 export function getContextButtonStyles(): string {
   return `
+    /* 上下文选择器容器 */
+    .context-selector-wrapper {
+      position: relative;
+      display: inline-block;
+    }
+
     /* 添加上下文按钮样式 */
     .add-context-button {
       display: flex;
@@ -45,15 +115,218 @@ export function getContextButtonStyles(): string {
       border-color: var(--vscode-focusBorder);
     }
 
-    .add-context-button svg {
+    .add-context-button svg.icon {
       width: 16px;
       height: 16px;
       color: #409eff;
     }
 
+    .add-context-button .dropdown-arrow {
+      width: 12px;
+      height: 12px;
+      transition: transform 0.2s ease;
+    }
+
+    .add-context-button.active .dropdown-arrow {
+      transform: rotate(180deg);
+    }
+
     .add-context-label {
       white-space: nowrap;
     }
+
+    /* 上拉菜单样式 */
+    .context-menu {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: 0;
+      background: var(--vscode-dropdown-background);
+      border: 1px solid var(--vscode-dropdown-border);
+      border-radius: 6px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      min-width: 180px;
+      z-index: 1000;
+      display: none;
+      overflow: hidden;
+    }
+
+    .context-menu.show {
+      display: block;
+      animation: slideUp 0.2s ease;
+    }
+
+    @keyframes slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .context-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 16px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+      color: var(--vscode-foreground);
+    }
+
+    .context-menu-item:hover {
+      background: var(--vscode-list-hoverBackground);
+    }
+
+    .context-menu-item svg {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      color: var(--vscode-foreground);
+      opacity: 0.8;
+    }
+
+    .context-menu-item span {
+      font-size: 13px;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .context-menu-item .arrow-right {
+      width: 14px;
+      height: 14px;
+      opacity: 0.6;
+      margin-left: auto;
+    }
+
+    /* 列表视图样式 */
+    .context-menu-list {
+      display: flex;
+      flex-direction: column;
+      max-height: 350px;
+    }
+
+    .context-menu-list-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--vscode-panel-border);
+    }
+
+    .context-menu-back {
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: var(--vscode-foreground);
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .context-menu-back:hover {
+      background: var(--vscode-toolbar-hoverBackground);
+    }
+
+    .context-menu-back svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .context-menu-list-header span {
+      font-size: 14px;
+      font-weight: 500;
+      flex: 1;
+    }
+
+    .context-menu-list-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 4px;
+    }
+
+    .context-menu-list-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 8px;
+      cursor: pointer;
+      border-radius: 4px;
+      transition: background 0.2s ease;
+    }
+
+    .context-menu-list-item:hover {
+      background: var(--vscode-list-hoverBackground);
+    }
+
+    .context-menu-list-item.selected {
+      background: var(--vscode-list-activeSelectionBackground);
+    }
+
+    .context-menu-list-item input[type="checkbox"] {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+    }
+
+    .context-menu-list-item label {
+      flex: 1;
+      font-size: 12px;
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .context-menu-list-footer {
+      padding: 8px 12px;
+      border-top: 1px solid var(--vscode-panel-border);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .context-menu-list-footer input {
+      width: 100%;
+      padding: 6px 10px;
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 4px;
+      color: var(--vscode-input-foreground);
+      font-size: 12px;
+      box-sizing: border-box;
+    }
+
+    .context-menu-list-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .context-menu-list-footer span {
+      font-size: 12px;
+      color: var(--vscode-descriptionForeground);
+    }
+
+    .context-menu-list-footer button {
+      padding: 4px 12px;
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .context-menu-list-footer button:hover {
+      background: var(--vscode-button-hoverBackground);
+    }
   `;
 }
 
@@ -62,10 +335,174 @@ export function getContextButtonStyles(): string {
  */
 export function getContextButtonScript(): string {
   return `
-    // 添加上下文处理函数
+    // 上下文菜单状态
-    function handleAddContext() {
+    let currentListData = [];
-      // 发送添加上下文请求到扩展
+    let currentListType = '';
-      vscode.postMessage({ command: 'addContext' });
+    let selectedItems = new Set();
+
+    // 切换上下文菜单显示/隐藏
+    function toggleContextMenu() {
+      const menu = document.getElementById('contextMenu');
+      const button = document.querySelector('.add-context-button');
+
+      if (menu && button) {
+        const isShown = menu.classList.contains('show');
+
+        if (isShown) {
+          menu.classList.remove('show');
+          button.classList.remove('active');
+          backToMainMenu(); // 关闭时回到主菜单
+        } else {
+          menu.classList.add('show');
+          button.classList.add('active');
+        }
+      }
     }
+
+    // 点击外部关闭菜单
+    document.addEventListener('click', function(event) {
+      const wrapper = document.querySelector('.context-selector-wrapper');
+      const menu = document.getElementById('contextMenu');
+      const button = document.querySelector('.add-context-button');
+
+      if (wrapper && menu && button && !wrapper.contains(event.target)) {
+        menu.classList.remove('show');
+        button.classList.remove('active');
+        backToMainMenu();
+      }
+    });
+
+    // 显示文件列表
+    function showFileList() {
+      vscode.postMessage({ command: 'addContextFile' });
+    }
+
+    // 显示文件夹列表
+    function showFolderList() {
+      vscode.postMessage({ command: 'addContextFolder' });
+    }
+
+    // 返回主菜单
+    function backToMainMenu() {
+      const mainMenu = document.getElementById('contextMenuMain');
+      const listView = document.getElementById('contextMenuList');
+
+      if (mainMenu && listView) {
+        mainMenu.style.display = 'block';
+        listView.style.display = 'none';
+      }
+
+      selectedItems.clear();
+      currentListData = [];
+    }
+
+    // 切换到列表视图
+    function switchToListView(title, type, data) {
+      const mainMenu = document.getElementById('contextMenuMain');
+      const listView = document.getElementById('contextMenuList');
+      const titleEl = document.getElementById('contextMenuListTitle');
+
+      if (mainMenu && listView && titleEl) {
+        mainMenu.style.display = 'none';
+        listView.style.display = 'flex';
+        titleEl.textContent = title;
+
+        currentListType = type;
+        currentListData = data;
+        selectedItems.clear();
+
+        renderList(data);
+        updateSelectedCount();
+      }
+    }
+
+    // 渲染列表
+    function renderList(data) {
+      const body = document.getElementById('contextMenuListBody');
+      if (!body) return;
+
+      body.innerHTML = data.map((item, index) => \`
+        <div class="context-menu-list-item" onclick="toggleItemSelection(\${index})">
+          <input type="checkbox" id="item-\${index}" />
+          <label for="item-\${index}">\${item.relativePath}</label>
+        </div>
+      \`).join('');
+    }
+
+    // 切换项选择
+    function toggleItemSelection(index) {
+      const checkbox = document.getElementById('item-' + index);
+      const item = document.querySelectorAll('.context-menu-list-item')[index];
+
+      if (checkbox && item) {
+        checkbox.checked = !checkbox.checked;
+
+        if (checkbox.checked) {
+          selectedItems.add(index);
+          item.classList.add('selected');
+        } else {
+          selectedItems.delete(index);
+          item.classList.remove('selected');
+        }
+
+        updateSelectedCount();
+      }
+    }
+
+    // 更新选中数量
+    function updateSelectedCount() {
+      const countEl = document.getElementById('contextMenuListCount');
+      if (countEl) {
+        countEl.textContent = '已选择 ' + selectedItems.size + ' 项';
+      }
+    }
+
+    // 确认选择
+    function confirmSelection() {
+      const selected = Array.from(selectedItems).map(index => currentListData[index]);
+
+      if (selected.length > 0) {
+        selected.forEach(item => {
+          addContextItem(currentListType, item.path);
+        });
+      }
+
+      toggleContextMenu();
+    }
+
+    // 添加图片
+    function handleAddImage() {
+      vscode.postMessage({ command: 'addContextImage' });
+      toggleContextMenu();
+    }
+
+    // 添加文档
+    function handleAddDocument() {
+      vscode.postMessage({ command: 'addContextDocument' });
+      toggleContextMenu();
+    }
+
+    // 搜索功能
+    const searchInput = document.getElementById('contextMenuSearch');
+    if (searchInput) {
+      searchInput.addEventListener('input', function(e) {
+        const keyword = e.target.value.toLowerCase();
+        const filtered = currentListData.filter(item =>
+          item.relativePath.toLowerCase().includes(keyword)
+        );
+        renderList(filtered);
+      });
+    }
+
+    // 处理后端消息
+    window.addEventListener('message', event => {
+      const message = event.data;
+
+      if (message.command === 'showWorkspaceFileList') {
+        switchToListView('选择文件', 'file', message.files);
+      } else if (message.command === 'showWorkspaceFolderList') {
+        switchToListView('选择文件夹', 'folder', message.folders);
+      }
+    });
   `;
 }

src/views/contextDisplay.ts

@@ -0,0 +1,225 @@
+/**
+ * 上下文显示组件
+ * 用于显示已选择的文件、文件夹、图片和文档
+ */
+
+/**
+ * 获取上下文显示区域的 HTML 内容
+ */
+export function getContextDisplayContent(): string {
+  return `
+    <div class="context-display-area" id="contextDisplayArea" style="display: none;">
+      <div class="context-items-container" id="contextItemsContainer">
+        <!-- 动态添加的上下文项将显示在这里 -->
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 获取上下文显示区域的样式
+ */
+export function getContextDisplayStyles(): string {
+  return `
+    /* 上下文显示区域 */
+    .context-display-area {
+      margin-bottom: 8px;
+      padding: 8px;
+      background: rgba(128, 128, 128, 0.1);
+      border-radius: 6px;
+      border: 1px solid var(--vscode-input-border);
+    }
+
+    .context-items-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    /* 上下文项样式 */
+    .context-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px;
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 4px;
+      font-size: 12px;
+      color: var(--vscode-foreground);
+      max-width: 300px;
+      transition: all 0.2s ease;
+    }
+
+    .context-item:hover {
+      background: var(--vscode-list-hoverBackground);
+    }
+
+    .context-item svg {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      opacity: 0.8;
+    }
+
+    .context-item-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .context-item-remove {
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+      opacity: 0.6;
+      transition: opacity 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .context-item-remove:hover {
+      opacity: 1;
+      color: #f56c6c;
+    }
+
+    /* 图片预览样式 */
+    .context-item.image-item {
+      position: relative;
+    }
+
+    .context-item-preview {
+      width: 40px;
+      height: 40px;
+      object-fit: cover;
+      border-radius: 3px;
+      border: 1px solid var(--vscode-input-border);
+    }
+  `;
+}
+
+/**
+ * 获取上下文显示区域的脚本
+ */
+export function getContextDisplayScript(): string {
+  return `
+    // 存储上下文项
+    let contextItems = [];
+
+    // 获取文件图标 SVG
+    function getFileIcon() {
+      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7z" fill="currentColor"/></svg>';
+    }
+
+    // 获取文件夹图标 SVG
+    function getFolderIcon() {
+      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M880 298.4H521L403.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
+    }
+
+    // 获取图片图标 SVG
+    function getImageIcon() {
+      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
+    }
+
+    // 获取文档图标 SVG
+    function getDocumentIcon() {
+      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
+    }
+
+    // 获取删除图标 SVG
+    function getRemoveIcon() {
+      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" fill="currentColor"/></svg>';
+    }
+
+    // 提取文件名
+    function getFileName(path) {
+      return path.split(/[\\\\/]/).pop();
+    }
+
+    // 添加上下文项
+    function addContextItem(type, path) {
+      const id = Date.now() + Math.random();
+      contextItems.push({ id, type, path });
+      renderContextItems();
+    }
+
+    // 删除上下文项
+    function removeContextItem(id) {
+      contextItems = contextItems.filter(item => item.id !== id);
+      renderContextItems();
+    }
+
+    // 渲染上下文项
+    function renderContextItems() {
+      const container = document.getElementById('contextItemsContainer');
+      const displayArea = document.getElementById('contextDisplayArea');
+
+      if (!container || !displayArea) return;
+
+      if (contextItems.length === 0) {
+        displayArea.style.display = 'none';
+        return;
+      }
+
+      displayArea.style.display = 'block';
+      container.innerHTML = contextItems.map(item => {
+        let icon = '';
+        switch(item.type) {
+          case 'file': icon = getFileIcon(); break;
+          case 'folder': icon = getFolderIcon(); break;
+          case 'image': icon = getImageIcon(); break;
+          case 'document': icon = getDocumentIcon(); break;
+        }
+
+        return \`
+          <div class="context-item" title="\${item.path}">
+            \${icon}
+            <span class="context-item-name">\${getFileName(item.path)}</span>
+            <span class="context-item-remove" onclick="removeContextItem(\${item.id})">
+              \${getRemoveIcon()}
+            </span>
+          </div>
+        \`;
+      }).join('');
+    }
+
+    // 处理后端返回的文件选择结果
+    window.addEventListener('message', event => {
+      const message = event.data;
+
+      switch(message.command) {
+        case 'contextFilesSelected':
+          if (message.files && message.files.length > 0) {
+            message.files.forEach(file => addContextItem('file', file));
+          }
+          break;
+        case 'contextFoldersSelected':
+          if (message.folders && message.folders.length > 0) {
+            message.folders.forEach(folder => addContextItem('folder', folder));
+          }
+          break;
+        case 'contextImagesSelected':
+          if (message.images && message.images.length > 0) {
+            message.images.forEach(image => addContextItem('image', image));
+          }
+          break;
+        case 'contextDocumentsSelected':
+          if (message.documents && message.documents.length > 0) {
+            message.documents.forEach(doc => addContextItem('document', doc));
+          }
+          break;
+      }
+    });
+
+    // 获取所有上下文项（供发送消息时使用）
+    window.getContextItems = function() {
+      return contextItems;
+    };
+
+    // 清空上下文项（供清空对话时使用）
+    window.clearContextItems = function() {
+      contextItems = [];
+      renderContextItems();
+    };
+  `;
+}

src/views/inputArea.ts

@@ -14,6 +14,11 @@ import {
   getContextButtonStyles,
   getContextButtonScript,
 } from "./contextButton";
+import {
+  getContextDisplayContent,
+  getContextDisplayStyles,
+  getContextDisplayScript,
+} from "./contextDisplay";
 import {
   getContextCompressContent,
   getContextCompressStyles,
@@ -29,24 +34,31 @@ import { sendIconSvg, stopIconSvg } from "../constants/toolIcons";
 /**
  * 获取输入区域的 HTML 内容
  */
-export function getInputAreaContent(): string {
+export function getInputAreaContent(
+  autoIcon: string = '',
+  liteIcon: string = '',
+  syIcon: string = '',
+  maxIcon: string = ''
+): string {
   return `
-    <div class="input-area">
+    <div class="input-area centered" id="inputArea">
       <div class="input-group">
         <div class="input-wrapper">
           <!-- 顶部工具栏 -->
           <div class="input-top-toolbar">
             ${getContextButtonContent()}
           </div>
+          <!-- 上下文显示区域 -->
+          ${getContextDisplayContent()}
           <textarea
             id="messageInput"
-            placeholder="输入您的问题..."
+            placeholder="输入您的问题，按 Enter 发送，Shift + Enter 换行..."
             onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
           ></textarea>
           <div class="input-bottom-row">
             <div class="mode-selector">
               ${getModeSelectorContent()}
-              ${getModelSelectorContent()}
+              ${getModelSelectorContent(autoIcon, liteIcon, syIcon, maxIcon)}
             </div>
             <div class="input-actions">
               ${getContextCompressContent()}
@@ -71,12 +83,30 @@ export function getInputAreaStyles(): string {
     ${getModeSelectorStyles()}
     ${getModelSelectorStyles()}
     ${getContextButtonStyles()}
+    ${getContextDisplayStyles()}
     ${getContextCompressStyles()}
     ${getOptimizeButtonStyles()}
     .input-area {
       border-top: 1px solid var(--vscode-panel-border);
       padding-top: 15px;
       flex-shrink: 0;
+      transition: all 0.3s ease;
+    }
+    /* 居中模式：未发起对话时 */
+    .input-area.centered {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: calc(100% - 40px);
+      max-width: 800px;
+      border-top: none;
+      padding-top: 0;
+    }
+    /* 底部模式：发起对话后 */
+    .input-area.bottom {
+      position: relative;
+      transform: none;
     }
     .input-group {
       display: flex;
@@ -197,6 +227,11 @@ export function getInputAreaStyles(): string {
       overflow-y: auto;
       line-height: 1.5;
     }
+    textarea:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background: rgba(128, 128, 128, 0.1);
+    }
     /* 简洁的滚动条样式 */
     textarea::-webkit-scrollbar {
       width: 8px;
@@ -254,16 +289,34 @@ export function getInputAreaScript(): string {
     // 注意：getModeSelectorScript() 已在 webviewContent.ts 开头加载，这里不再重复加载
     ${getModelSelectorScript()}
     ${getContextButtonScript()}
+    ${getContextDisplayScript()}
     ${getContextCompressScript()}
     ${getOptimizeButtonScript()}
 
     // 对话状态管理
     let isConversationActive = false;
+    let hasMessages = false; // 是否已有消息
 
     // 工作区检测状态
     let hasCheckedWorkspace = false; // 是否已经检测过工作区
     let hasWorkspace = true; // 工作区状态
 
+    // 切换输入框布局模式
+    function updateInputAreaLayout() {
+      const inputArea = document.getElementById('inputArea');
+      if (!inputArea) return;
+
+      if (hasMessages) {
+        // 有消息时，移到底部
+        inputArea.classList.remove('centered');
+        inputArea.classList.add('bottom');
+      } else {
+        // 无消息时，居中显示
+        inputArea.classList.add('centered');
+        inputArea.classList.remove('bottom');
+      }
+    }
+
     // 自动调整 textarea 高度
     function autoResizeTextarea() {
       if (messageInput) {
@@ -300,11 +353,17 @@ export function getInputAreaScript(): string {
         sendIconContainer.style.display = 'none';
         stopIconContainer.style.display = 'block';
         isConversationActive = true;
+        // 禁用输入框
+        messageInput.disabled = true;
+        messageInput.placeholder = '正在处理中，请稍候...';
       } else {
         sendButton.classList.remove('sending');
         sendIconContainer.style.display = 'block';
         stopIconContainer.style.display = 'none';
         isConversationActive = false;
+        // 启用输入框
+        messageInput.disabled = false;
+        messageInput.placeholder = '输入您的问题，按 Enter 发送，Shift + Enter 换行...';
       }
     }
 
@@ -324,6 +383,11 @@ export function getInputAreaScript(): string {
       const text = messageInput.value.trim();
       if (!text) return;
 
+      // 如果正在对话中，阻止发送新消息
+      if (isConversationActive) {
+        return;
+      }
+
       // 检查工作区状态
       if (!hasWorkspace) {
         // 如果没有工作区，阻止发送并清空输入框
@@ -336,12 +400,26 @@ export function getInputAreaScript(): string {
       const model = getCurrentModel(); // 从模型选择器组件获取当前模型
       const planMode = document.getElementById('planToggle')?.checked || false;
 
+      // 获取上下文项
+      const contextItems = window.getContextItems ? window.getContextItems() : [];
+
       addMessage(text, 'user');
 
+      // 标记已有消息，切换布局到底部
+      hasMessages = true;
+      updateInputAreaLayout();
+
       // 切换按钮为暂停状态
       setSendButtonState(true);
 
-      vscode.postMessage({ command: 'sendMessage', text: text, mode: mode, model: model, planMode: planMode });
+      vscode.postMessage({
+        command: 'sendMessage',
+        text: text,
+        mode: mode,
+        model: model,
+        planMode: planMode,
+        contextItems: contextItems
+      });
       messageInput.value = '';
       autoResizeTextarea(); // 重置输入框高度
       messageInput.focus();
@@ -349,5 +427,28 @@ export function getInputAreaScript(): string {
       // 重置优化状态
       resetOptimizeButton();
     }
+
+    // 全局函数：重置输入框布局（用于清空对话时）
+    window.resetInputAreaLayout = function() {
+      hasMessages = false;
+      updateInputAreaLayout();
+    };
+
+    // 全局函数：检查是否有消息（用于页面加载时）
+    window.checkMessagesAndUpdateLayout = function() {
+      const messagesContainer = document.getElementById('messages');
+      if (messagesContainer) {
+        const messageElements = messagesContainer.querySelectorAll('.message');
+        hasMessages = messageElements.length > 0;
+        updateInputAreaLayout();
+      }
+    };
+
+    // 页面加载时检查消息状态
+    setTimeout(() => {
+      if (window.checkMessagesAndUpdateLayout) {
+        window.checkMessagesAndUpdateLayout();
+      }
+    }, 100);
   `;
 }

src/views/messageArea.ts

@@ -373,6 +373,12 @@ export function getMessageAreaStyles(): string {
         margin: 4px 0;
         padding: 4px 0;
       }
+      /* 低调显示的工具调用 - 移除边距和背景 */
+      .segment-tool.low-profile {
+        margin: 2px 0;
+        padding: 0;
+        background: none;
+      }
       .tool-segment-header {
         display: flex;
         align-items: center;
@@ -532,6 +538,23 @@ export function getMessageAreaStyles(): string {
       .tool-segment-content.collapsed {
         max-height: 0;
       }
+      /* 低调显示的工具调用样式 */
+      .segment-tool.low-profile .tool-segment-header {
+        opacity: 0.65;
+        font-size: 11px;
+      }
+      .segment-tool.low-profile .tool-segment-icon {
+        opacity: 0.55;
+        font-size: 11px;
+      }
+      .segment-tool.low-profile .tool-segment-name {
+        font-weight: 300;
+        opacity: 0.8;
+      }
+      .segment-tool.low-profile .tool-segment-result {
+        opacity: 0.7;
+        font-size: 10px;
+      }
       .segment-question {
         background: var(--vscode-textBlockQuote-background);
         border-radius: 6px;
@@ -689,8 +712,8 @@ export function getMessageAreaScript(): string {
           'queryKnowledgeSummary': '已查询知识摘要',
           'queryRules': '已查询规则',
           'setModule': '已设置模块',
-          'addSignal': '已添加信号',
+          'addSignal': '信号分析完成',
-          'addSignalExample': '已添加信号示例',
+          'addSignalExample': '信号示例处理完成',
           'validateKnowledgeGraph': '已验证知识图谱',
           'querySignals': '已查询信号',
           'addPlan': '已添加计划',
@@ -936,8 +959,30 @@ export function getMessageAreaScript(): string {
         // 清空容器并重新渲染所有段落
         currentSegmentedMessage.innerHTML = '';
 
+        // 合并连续相同的工具调用
+        const mergedSegments = [];
+        let i = 0;
+        while (i < segments.length) {
+          const segment = segments[i];
+          if (segment.type === 'tool') {
+            // 统计连续相同的工具调用
+            let count = 1;
+            while (i + count < segments.length &&
+                   segments[i + count].type === 'tool' &&
+                   segments[i + count].toolName === segment.toolName) {
+              count++;
+            }
+            // 添加合并后的段落（带计数）
+            mergedSegments.push({ ...segment, toolCount: count });
+            i += count;
+          } else {
+            mergedSegments.push(segment);
+            i++;
+          }
+        }
+
         let toolIndex = 0; // 用于跟踪工具段落的索引
-        segments.forEach((segment, index) => {
+        mergedSegments.forEach((segment, index) => {
           const segmentDiv = document.createElement('div');
           segmentDiv.className = 'message-segment segment-' + segment.type;
 
@@ -949,8 +994,23 @@ export function getMessageAreaScript(): string {
             if (segment.toolName === 'spawnExplorer') {
               return;
             }
+
+            // 为技术性工具调用添加低调样式
+            const lowProfileTools = [
+              'knowledge_save', 'knowledge_load',
+              'queryKnowledgeSummary', 'queryRules', 'querySignals',
+              'setModule', 'addSignal', 'addSignalExample',
+              'validateKnowledgeGraph', 'addPlan', 'addEdge',
+              'showPlan', 'addRule', 'updateNode', 'addStateTransition'
+            ];
+            if (lowProfileTools.includes(segment.toolName)) {
+              segmentDiv.className += ' low-profile';
+            }
+
             const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
             const toolResult = segment.toolResult || '';
+            const toolCount = segment.toolCount || 1;
+            const countSuffix = toolCount > 1 ? \` x\${toolCount}\` : '';
 
             // 检查工具结果是否过长(超过一行显示不下)
             const shouldCollapse = toolResult && toolResult.length > 60;
@@ -964,7 +1024,7 @@ export function getMessageAreaScript(): string {
             segmentDiv.innerHTML = \`
               <div class="tool-segment-header\${isCollapsed ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}" data-tool-index="\${currentToolIndex}">
                 \${shouldCollapse ? \`<span class="tool-collapse-icon">\${collapseIconSvg}</span>\` : getToolIcon(segment.toolName)}
-                <span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
+                <span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}\${countSuffix}</span>
                 \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
               </div>
               \${shouldCollapse ? \`<div class="tool-segment-content\${isCollapsed ? ' collapsed' : ''}" style="max-height:\${isCollapsed ? '0' : 'none'}"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''}
@@ -1097,9 +1157,11 @@ export function getMessageAreaScript(): string {
           console.log('[WebView] 对话完成，添加操作按钮');
           const actionsDiv = document.createElement('div');
           actionsDiv.className = 'message-actions';
+
+          // 复制按钮
           const copyBtn = document.createElement('button');
           copyBtn.className = 'action-btn';
-          copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+          copyBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M761.088 715.3152a38.7072 38.7072 0 0 1 0-77.4144 37.4272 37.4272 0 0 0 37.4272-37.4272V265.0112a37.4272 37.4272 0 0 0-37.4272-37.4272H425.6256a37.4272 37.4272 0 0 0-37.4272 37.4272 38.7072 38.7072 0 1 1-77.4144 0 115.0976 115.0976 0 0 1 114.8416-114.8416h335.4624a115.0976 115.0976 0 0 1 114.8416 114.8416v335.4624a115.0976 115.0976 0 0 1-114.8416 114.8416z" fill="currentColor"/><path d="M589.4656 883.0976H268.1856a121.1392 121.1392 0 0 1-121.2928-121.2928v-322.56a121.1392 121.1392 0 0 1 121.2928-121.344h321.28a121.1392 121.1392 0 0 1 121.2928 121.2928v322.56c1.28 67.1232-54.1696 121.344-121.2928 121.344zM268.1856 395.3152a43.52 43.52 0 0 0-43.8784 43.8784v322.56a43.52 43.52 0 0 0 43.8784 43.8784h321.28a43.52 43.52 0 0 0 43.8784-43.8784v-322.56a43.52 43.52 0 0 0-43.8784-43.8784z" fill="currentColor"/></svg><span class="action-tooltip">复制</span>\`;
           copyBtn.onclick = () => {
             const textContent = segments
               .filter(s => s.type === 'text' && s.content)
@@ -1107,7 +1169,22 @@ export function getMessageAreaScript(): string {
               .join('\\n');
             copyMessage(textContent, copyBtn);
           };
+
+          // 点赞按钮
+          const likeBtn = document.createElement('button');
+          likeBtn.className = 'action-btn';
+          likeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M923.5 411.2c-28.6-33.9-72.1-53-116.4-51.1h-68c6.4-31.6 10.1-63.9 11.2-96v-0.8c-0.5-60.9-18.7-112-51.2-144-22.6-22.2-50.8-33.7-81.5-33.3-38.3 0-69.1 11.5-91.7 34.2-26.5 26.5-39.9 66.8-39.8 119.6 0.1 40.1-19.4 83.4-52.1 115.9-32 31.8-71.7 49.3-111.8 49.3H295.6c-3 0-6 0.3-8.9 0.8v-1.2H140.8c-39.7 0-72.2 32.5-72.2 72.2v392.9c0 39.7 32.5 72.2 72.2 72.2h146.8v-0.6c2.9 0.4 5.9 0.7 8.9 0.7h464.7c33.3-0.8 65.6-13 91.1-34.4s43.1-51.1 49.6-83.8l52.3-289.1c9.4-43.4-2.1-89.6-30.7-123.5zM147.7 843.7v-344c0-9 7.3-16.3 16.3-16.3h70.4V860H164c-9 0-16.3-7.3-16.3-16.3z m726.4-324.9l-0.2 0.6-51.7 290.3c-6.7 29.1-32.3 50.2-62.2 51.3l-4.9 0.2-0.4 0.3h-440V486h7.3c61.4 0 121-25.7 168.1-72.4 48.6-48.2 76.5-111.7 76.5-174.2-0.1-31.5 4.9-51.8 15.3-62.2 7.4-7.4 18.7-10.8 35.8-10.8h0.2c9-0.1 17.4 3.6 24.9 11 16.3 16.2 25.7 47.3 25.8 85.4-1.2 41.8-7.9 83.3-19.9 123.4l-21.6 54.3h181.5c24.5-0.6 48.2 8.9 65.1 26.1 16.9 17.2 25.3 40.8 23 64.9z" fill="currentColor"/></svg><span class="action-tooltip">点赞</span>\`;
+          likeBtn.onclick = () => toggleLike(likeBtn);
+
+          // 点踩按钮
+          const dislikeBtn = document.createElement('button');
+          dislikeBtn.className = 'action-btn';
+          dislikeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M360 640c60.992 40.107 88 87.381 88 149.333 0 5.611 0.427 12.864 1.579 21.462a174.933 174.933 0 0 0 11.2 42.666c19.584 48.192 60.864 83.008 119.018 85.12 28.843 2.56 60.886-3.584 91.414-25.045 58.709-41.237 81.706-117.248 69.973-230.87h48.15V640v42.667c17.173 0 38.4-2.475 61.823-10.667 66.304-23.125 107.627-84.117 84.928-162.816l-53.674-254.55a213.333 213.333 0 0 0-208.747-169.3H207.019a85.333 85.333 0 0 0-85.078 78.783l-29.546 384A85.333 85.333 0 0 0 177.493 640H360z m-61.333-109.333v24H177.493l29.526-384h91.648v360z m85.333-360h289.664a128 128 0 0 1 125.227 101.589l54.442 258.07c21.334 67.007-64 67.007-64 67.007H640c64 277.334-54.613 256-54.613 256-52.054 0-52.054-64-52.054-64 0-92.8-43.264-167.082-129.77-222.805A42.667 42.667 0 0 1 384 530.667v-360z" fill="currentColor"/></svg><span class="action-tooltip">点踩</span>\`;
+          dislikeBtn.onclick = () => toggleDislike(dislikeBtn);
+
           actionsDiv.appendChild(copyBtn);
+          actionsDiv.appendChild(likeBtn);
+          actionsDiv.appendChild(dislikeBtn);
           currentSegmentedMessage.appendChild(actionsDiv);
 
           // 重置当前分段消息容器
@@ -1145,7 +1222,29 @@ export function getMessageAreaScript(): string {
         const container = document.createElement('div');
         container.className = 'message bot-message segmented-message';
 
-        segments.forEach((segment, index) => {
+        // 合并连续相同的工具调用
+        const mergedSegments = [];
+        let i = 0;
+        while (i < segments.length) {
+          const segment = segments[i];
+          if (segment.type === 'tool') {
+            // 统计连续相同的工具调用
+            let count = 1;
+            while (i + count < segments.length &&
+                   segments[i + count].type === 'tool' &&
+                   segments[i + count].toolName === segment.toolName) {
+              count++;
+            }
+            // 添加合并后的段落（带计数）
+            mergedSegments.push({ ...segment, toolCount: count });
+            i += count;
+          } else {
+            mergedSegments.push(segment);
+            i++;
+          }
+        }
+
+        mergedSegments.forEach((segment, index) => {
           const segmentDiv = document.createElement('div');
           segmentDiv.className = 'message-segment segment-' + segment.type;
 
@@ -1157,8 +1256,23 @@ export function getMessageAreaScript(): string {
             if (segment.toolName === 'spawnExplorer') {
               return;
             }
+
+            // 为技术性工具调用添加低调样式
+            const lowProfileTools = [
+              'knowledge_save', 'knowledge_load',
+              'queryKnowledgeSummary', 'queryRules', 'querySignals',
+              'setModule', 'addSignal', 'addSignalExample',
+              'validateKnowledgeGraph', 'addPlan', 'addEdge',
+              'showPlan', 'addRule', 'updateNode', 'addStateTransition'
+            ];
+            if (lowProfileTools.includes(segment.toolName)) {
+              segmentDiv.className += ' low-profile';
+            }
+
             const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
             const toolResult = segment.toolResult || '';
+            const toolCount = segment.toolCount || 1;
+            const countSuffix = toolCount > 1 ? \` x\${toolCount}\` : '';
 
             // 检查工具结果是否过长(超过一行显示不下)
             const shouldCollapse = toolResult && toolResult.length > 60;
@@ -1166,7 +1280,7 @@ export function getMessageAreaScript(): string {
             segmentDiv.innerHTML = \`
               <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
                 \${shouldCollapse ? \`<span class="icon-collapsed" style="display:block;width:16px;height:16px;flex-shrink:0;">\${collapseIconSvg}</span><span class="icon-expanded" style="display:none;width:16px;height:16px;flex-shrink:0;">\${collapseIconSvg}</span>\` : getToolIcon(segment.toolName)}
-                <span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
+                <span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}\${countSuffix}</span>
                 \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
               </div>
               \${shouldCollapse ? \`<div class="tool-segment-content collapsed"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''}
@@ -1241,9 +1355,11 @@ export function getMessageAreaScript(): string {
         // 添加操作按钮
         const actionsDiv = document.createElement('div');
         actionsDiv.className = 'message-actions';
+
+        // 复制按钮
         const copyBtn = document.createElement('button');
         copyBtn.className = 'action-btn';
-        copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+        copyBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M761.088 715.3152a38.7072 38.7072 0 0 1 0-77.4144 37.4272 37.4272 0 0 0 37.4272-37.4272V265.0112a37.4272 37.4272 0 0 0-37.4272-37.4272H425.6256a37.4272 37.4272 0 0 0-37.4272 37.4272 38.7072 38.7072 0 1 1-77.4144 0 115.0976 115.0976 0 0 1 114.8416-114.8416h335.4624a115.0976 115.0976 0 0 1 114.8416 114.8416v335.4624a115.0976 115.0976 0 0 1-114.8416 114.8416z" fill="currentColor"/><path d="M589.4656 883.0976H268.1856a121.1392 121.1392 0 0 1-121.2928-121.2928v-322.56a121.1392 121.1392 0 0 1 121.2928-121.344h321.28a121.1392 121.1392 0 0 1 121.2928 121.2928v322.56c1.28 67.1232-54.1696 121.344-121.2928 121.344zM268.1856 395.3152a43.52 43.52 0 0 0-43.8784 43.8784v322.56a43.52 43.52 0 0 0 43.8784 43.8784h321.28a43.52 43.52 0 0 0 43.8784-43.8784v-322.56a43.52 43.52 0 0 0-43.8784-43.8784z" fill="currentColor"/></svg><span class="action-tooltip">复制</span>\`;
         copyBtn.onclick = () => {
           const textContent = segments
             .filter(s => s.type === 'text' && s.content)
@@ -1251,7 +1367,22 @@ export function getMessageAreaScript(): string {
             .join('\\n');
           copyMessage(textContent, copyBtn);
         };
+
+        // 点赞按钮
+        const likeBtn = document.createElement('button');
+        likeBtn.className = 'action-btn';
+        likeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M923.5 411.2c-28.6-33.9-72.1-53-116.4-51.1h-68c6.4-31.6 10.1-63.9 11.2-96v-0.8c-0.5-60.9-18.7-112-51.2-144-22.6-22.2-50.8-33.7-81.5-33.3-38.3 0-69.1 11.5-91.7 34.2-26.5 26.5-39.9 66.8-39.8 119.6 0.1 40.1-19.4 83.4-52.1 115.9-32 31.8-71.7 49.3-111.8 49.3H295.6c-3 0-6 0.3-8.9 0.8v-1.2H140.8c-39.7 0-72.2 32.5-72.2 72.2v392.9c0 39.7 32.5 72.2 72.2 72.2h146.8v-0.6c2.9 0.4 5.9 0.7 8.9 0.7h464.7c33.3-0.8 65.6-13 91.1-34.4s43.1-51.1 49.6-83.8l52.3-289.1c9.4-43.4-2.1-89.6-30.7-123.5zM147.7 843.7v-344c0-9 7.3-16.3 16.3-16.3h70.4V860H164c-9 0-16.3-7.3-16.3-16.3z m726.4-324.9l-0.2 0.6-51.7 290.3c-6.7 29.1-32.3 50.2-62.2 51.3l-4.9 0.2-0.4 0.3h-440V486h7.3c61.4 0 121-25.7 168.1-72.4 48.6-48.2 76.5-111.7 76.5-174.2-0.1-31.5 4.9-51.8 15.3-62.2 7.4-7.4 18.7-10.8 35.8-10.8h0.2c9-0.1 17.4 3.6 24.9 11 16.3 16.2 25.7 47.3 25.8 85.4-1.2 41.8-7.9 83.3-19.9 123.4l-21.6 54.3h181.5c24.5-0.6 48.2 8.9 65.1 26.1 16.9 17.2 25.3 40.8 23 64.9z" fill="currentColor"/></svg><span class="action-tooltip">点赞</span>\`;
+        likeBtn.onclick = () => toggleLike(likeBtn);
+
+        // 点踩按钮
+        const dislikeBtn = document.createElement('button');
+        dislikeBtn.className = 'action-btn';
+        dislikeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M360 640c60.992 40.107 88 87.381 88 149.333 0 5.611 0.427 12.864 1.579 21.462a174.933 174.933 0 0 0 11.2 42.666c19.584 48.192 60.864 83.008 119.018 85.12 28.843 2.56 60.886-3.584 91.414-25.045 58.709-41.237 81.706-117.248 69.973-230.87h48.15V640v42.667c17.173 0 38.4-2.475 61.823-10.667 66.304-23.125 107.627-84.117 84.928-162.816l-53.674-254.55a213.333 213.333 0 0 0-208.747-169.3H207.019a85.333 85.333 0 0 0-85.078 78.783l-29.546 384A85.333 85.333 0 0 0 177.493 640H360z m-61.333-109.333v24H177.493l29.526-384h91.648v360z m85.333-360h289.664a128 128 0 0 1 125.227 101.589l54.442 258.07c21.334 67.007-64 67.007-64 67.007H640c64 277.334-54.613 256-54.613 256-52.054 0-52.054-64-52.054-64 0-92.8-43.264-167.082-129.77-222.805A42.667 42.667 0 0 1 384 530.667v-360z" fill="currentColor"/></svg><span class="action-tooltip">点踩</span>\`;
+        dislikeBtn.onclick = () => toggleDislike(dislikeBtn);
+
         actionsDiv.appendChild(copyBtn);
+        actionsDiv.appendChild(likeBtn);
+        actionsDiv.appendChild(dislikeBtn);
         container.appendChild(actionsDiv);
 
         messagesEl.appendChild(container);

src/views/modelSelector.ts

@@ -5,7 +5,12 @@
 /**
  * 获取模型选择器的 HTML 内容
  */
-export function getModelSelectorContent(): string {
+export function getModelSelectorContent(
+  autoIcon: string = "",
+  liteIcon: string = "",
+  syIcon: string = "",
+  maxIcon: string = ""
+): string {
   return `
     <!-- 模型选择 -->
     <div class="tooltip">
@@ -17,13 +22,51 @@ export function getModelSelectorContent(): string {
           </svg>
         </div>
         <div class="select-dropdown" id="modelDropdown">
-          <div class="select-option" data-value="lite" data-tooltip="快速响应，适合简单任务" onclick="selectModel('lite', 'Lite')">Lite</div>
+          <div class="select-option selected" data-value="auto" onclick="selectModel('auto', 'Auto')">
-          <div class="select-option selected" data-value="auto" data-tooltip="自动选择最佳模型" onclick="selectModel('auto', 'Auto')">Auto</div>
+            ${
-          <div class="select-option" data-value="syntaxic" data-tooltip="语法分析和代码理解" onclick="selectModel('syntaxic', 'Syntaxic')">Syntaxic</div>
+              autoIcon
-          <div class="select-option" data-value="max" data-tooltip="最强性能，复杂任务" onclick="selectModel('max', 'Max')">Max</div>
+                ? `<img src="${autoIcon}" class="model-icon" alt="Auto">`
+                : ""
+            }
+            <div class="option-content">
+              <span class="option-label">Auto</span>
+              <span class="option-desc">智能匹配最优模型</span>
+            </div>
+          </div>
+          <div class="select-option" data-value="lite" onclick="selectModel('lite', 'Lite')">
+            ${
+              liteIcon
+                ? `<img src="${liteIcon}" class="model-icon" alt="Lite">`
+                : ""
+            }
+            <div class="option-content">
+              <span class="option-label">Lite</span>
+              <span class="option-desc">基础模型，快速相应，适合简单任务</span>
+            </div>
+          </div>
+          <div class="select-option" data-value="syntaxic" onclick="selectModel('syntaxic', 'Syntaxic')">
+            ${
+              syIcon
+                ? `<img src="${syIcon}" class="model-icon" alt="Syntaxic">`
+                : ""
+            }
+            <div class="option-content">
+              <span class="option-label">Syntaxic</span>
+              <span class="option-desc">均衡成本和性能，节省credits同时保持可靠输出</span>
+            </div>
+          </div>
+          <div class="select-option" data-value="max" onclick="selectModel('max', 'Max')">
+            ${
+              maxIcon
+                ? `<img src="${maxIcon}" class="model-icon" alt="Max">`
+                : ""
+            }
+            <div class="option-content">
+              <span class="option-label">Max</span>
+              <span class="option-desc">最强性能，质量优先，适合复杂任务</span>
+            </div>
+          </div>
         </div>
-        <!-- 模型选择器的 tooltip 容器 -->
-        <div id="modelTooltip" class="model-tooltip"></div>
       </div>
       <span class="tooltiptext">选择模型</span>
     </div>
@@ -87,11 +130,13 @@ export function getModelSelectorStyles(): string {
     /* 模型选择器的选项样式 */
     #modelDropdown .select-option {
       position: relative;
-      padding: 6px 12px;
+      padding: 8px 12px;
-      font-size: 12px;
       cursor: pointer;
       transition: background 0.2s ease;
-      white-space: nowrap;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 10px;
     }
     #modelDropdown .select-option:hover {
       background: rgba(128, 128, 128, 0.3);
@@ -100,49 +145,28 @@ export function getModelSelectorStyles(): string {
       background: rgba(128, 128, 128, 0.5);
       color: var(--vscode-foreground);
     }
-    /* 模型选择器的 tooltip 样式 */
+    .model-icon {
-    .model-tooltip {
+      width: 16px;
-      position: fixed;
+      height: 16px;
-      background: #1e1e1e;
+      flex-shrink: 0;
-      color: #ffffff;
+      object-fit: contain;
-      padding: 8px 12px;
+    }
-      border-radius: 6px;
+    .option-content {
-      font-size: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+    }
+    .option-label {
+      font-size: 13px;
+      color: var(--vscode-foreground);
+      font-weight: 500;
       white-space: nowrap;
-      pointer-events: none;
-      z-index: 10000;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity 0.2s ease, visibility 0.2s ease;
     }
-    .model-tooltip.show {
+    .option-desc {
-      opacity: 1;
+      font-size: 11px;
-      visibility: visible;
+      color: var(--vscode-descriptionForeground);
-    }
+      white-space: nowrap;
-    /* tooltip 箭头 */
-    .model-tooltip::before {
-      content: "";
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-width: 7px;
-      border-style: solid;
-      border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
-      z-index: -1;
-    }
-    .model-tooltip::after {
-      content: "";
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-width: 6px;
-      border-style: solid;
-      border-color: transparent #1e1e1e transparent transparent;
-      margin-right: 1px;
     }
   `;
 }
@@ -205,46 +229,5 @@ export function getModelSelectorScript(): string {
     function getCurrentModel() {
       return currentModel;
     }
-
-    // 模型选择器 tooltip 功能
-    (function initModelTooltip() {
-      const modelDropdown = document.getElementById('modelDropdown');
-      const modelTooltip = document.getElementById('modelTooltip');
-
-      if (!modelDropdown || !modelTooltip) return;
-
-      // 为每个选项添加鼠标事件
-      const options = modelDropdown.querySelectorAll('.select-option');
-
-      options.forEach(option => {
-        option.addEventListener('mouseenter', function(e) {
-          const tooltipText = this.getAttribute('data-tooltip');
-          if (!tooltipText) return;
-
-          // 设置 tooltip 内容
-          modelTooltip.textContent = tooltipText;
-
-          // 获取选项的位置
-          const rect = this.getBoundingClientRect();
-
-          // 计算 tooltip 位置（在选项右侧）
-          const tooltipRect = modelTooltip.getBoundingClientRect();
-          const left = rect.right + 12;
-          const top = rect.top + (rect.height / 2) - (tooltipRect.height / 2);
-
-          // 设置位置
-          modelTooltip.style.left = left + 'px';
-          modelTooltip.style.top = top + 'px';
-
-          // 显示 tooltip
-          modelTooltip.classList.add('show');
-        });
-
-        option.addEventListener('mouseleave', function() {
-          // 隐藏 tooltip
-          modelTooltip.classList.remove('show');
-        });
-      });
-    })();
   `;
 }

src/views/planCard.ts

@@ -61,10 +61,30 @@ export function getPlanCardStyles(): string {
     .plan-step:last-child {
       margin-bottom: 0;
     }
-    .step-num {
+    .step-checkbox {
-      color: var(--vscode-textLink-foreground);
+      display: inline-flex;
-      font-weight: 500;
+      align-items: center;
-      margin-right: 6px;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      border: 2px solid var(--vscode-textLink-foreground);
+      border-radius: 4px;
+      background: transparent;
+      flex-shrink: 0;
+      opacity: 0.6;
+      transition: all 0.2s ease;
+    }
+    .step-checkbox.completed {
+      background: var(--vscode-textLink-foreground);
+      border-color: var(--vscode-textLink-foreground);
+      opacity: 1;
+    }
+    .step-checkbox.completed::after {
+      content: '✓';
+      color: var(--vscode-editor-background);
+      font-size: 11px;
+      font-weight: bold;
     }
     .plan-actions {
       display: flex;
@@ -151,7 +171,7 @@ export function getPlanCardScript(): string {
       }
 
       const stepsHtml = (segment.planSteps || []).map((step, i) =>
-        \`<div class="plan-step"><span class="step-num">\${i + 1}.</span> \${step}</div>\`
+        \`<div class="plan-step"><span class="step-checkbox"></span> \${step}</div>\`
       ).join('');
 
       // 选项按钮
@@ -231,7 +251,7 @@ export function getPlanCardScript(): string {
     function renderPlanCardStatic(segment, segmentDiv) {
       segmentDiv.className += ' segment-plan';
       const stepsHtml = (segment.planSteps || []).map((step, i) =>
-        \`<div class="plan-step"><span class="step-num">\${i + 1}.</span> \${step}</div>\`
+        \`<div class="plan-step"><span class="step-checkbox"></span> \${step}</div>\`
       ).join('');
 
       segmentDiv.innerHTML = \`

src/views/progressBar.ts

@@ -0,0 +1,411 @@
+/**
+ * 进度条模块
+ *
+ * 功能说明:
+ * - 显示开发流程进度: Spec -> Design代码编写 -> 仿真检查 -> AST -> Done
+ * - 支持动态更新当前进度状态
+ * - 提供视觉反馈显示已完成和进行中的步骤
+ */
+
+/**
+ * 获取进度条的 HTML 内容
+ */
+export function getProgressBarContent(): string {
+  return `
+    <div class="progress-bar-container" style="display: none;">
+      <div class="progress-bar-header">
+        <span class="progress-bar-title">开发流程</span>
+        <button class="progress-bar-toggle" title="收起/展开">
+          <span class="toggle-icon">▼</span>
+        </button>
+      </div>
+      <div class="progress-steps">
+        <div class="progress-step" data-step="spec">
+          <div class="step-circle">
+            <span class="step-number">1</span>
+            <span class="step-check">✓</span>
+          </div>
+          <div class="step-label">Spec设计文档</div>
+        </div>
+
+        <div class="progress-line"></div>
+
+        <div class="progress-step" data-step="design">
+          <div class="step-circle">
+            <span class="step-number">2</span>
+            <span class="step-check">✓</span>
+          </div>
+          <div class="step-label">Design代码编写</div>
+        </div>
+
+        <div class="progress-line"></div>
+
+        <div class="progress-step" data-step="simulation">
+          <div class="step-circle">
+            <span class="step-number">3</span>
+            <span class="step-check">✓</span>
+          </div>
+          <div class="step-label">Sim仿真检查</div>
+        </div>
+
+        <div class="progress-line"></div>
+
+        <div class="progress-step" data-step="done">
+          <div class="step-circle">
+            <span class="step-number">4</span>
+            <span class="step-check">✓</span>
+          </div>
+          <div class="step-label">Done完成</div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 获取进度条的样式
+ */
+export function getProgressBarStyles(): string {
+  return `
+    .progress-bar-container {
+      background: var(--vscode-editor-background);
+      border-bottom: 1px solid var(--vscode-panel-border);
+      margin-bottom: 5px;
+    }
+
+    .progress-bar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 20px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .progress-bar-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--vscode-foreground);
+    }
+
+    .progress-bar-toggle {
+      background: none;
+      border: none;
+      color: var(--vscode-foreground);
+      cursor: pointer;
+      padding: 2px 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.7;
+      transition: opacity 0.2s;
+    }
+
+    .progress-bar-toggle:hover {
+      opacity: 1;
+    }
+
+    .toggle-icon {
+      font-size: 10px;
+      transition: transform 0.3s ease;
+    }
+
+    .progress-bar-container.collapsed .toggle-icon {
+      transform: rotate(-90deg);
+    }
+
+    .progress-steps {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 700px;
+      margin: 0 auto;
+      padding: 0 20px 10px 20px;
+      max-height: 60px;
+      overflow: hidden;
+      transition: max-height 0.3s ease, padding 0.3s ease;
+    }
+
+    .progress-bar-container.collapsed .progress-steps {
+      max-height: 0;
+      padding: 0 20px;
+    }
+
+    .progress-step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      flex: 0 0 auto;
+    }
+
+    .step-circle {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: var(--vscode-input-background);
+      border: 2px solid var(--vscode-input-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      transition: all 0.3s ease;
+      z-index: 2;
+    }
+
+    .step-number {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--vscode-foreground);
+    }
+
+    .step-check {
+      display: none;
+      font-size: 12px;
+      color: var(--vscode-button-foreground);
+    }
+
+    .step-label {
+      margin-top: 4px;
+      font-size: 10px;
+      color: var(--vscode-descriptionForeground);
+      text-align: center;
+      white-space: nowrap;
+      transition: color 0.3s ease;
+    }
+
+    .progress-line {
+      flex: 1;
+      height: 2px;
+      background: var(--vscode-input-border);
+      margin: 0 6px;
+      position: relative;
+      top: -10px;
+      transition: background 0.3s ease;
+    }
+
+    /* 已完成状态 */
+    .progress-step.completed .step-circle {
+      background: var(--vscode-button-background);
+      border-color: var(--vscode-button-background);
+    }
+
+    .progress-step.completed .step-number {
+      display: none;
+    }
+
+    .progress-step.completed .step-check {
+      display: block;
+    }
+
+    .progress-step.completed .step-label {
+      color: var(--vscode-foreground);
+      font-weight: 500;
+    }
+
+    .progress-step.completed + .progress-line {
+      background: var(--vscode-button-background);
+    }
+
+    /* 进行中状态 */
+    .progress-step.active .step-circle {
+      background: var(--vscode-button-background);
+      border-color: var(--vscode-button-background);
+      box-shadow: 0 0 0 2px var(--vscode-button-background)33;
+      animation: pulse 2s infinite;
+    }
+
+    .progress-step.active .step-number {
+      color: var(--vscode-button-foreground);
+    }
+
+    .progress-step.active .step-label {
+      color: var(--vscode-foreground);
+      font-weight: 600;
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        box-shadow: 0 0 0 2px var(--vscode-button-background)33;
+      }
+      50% {
+        box-shadow: 0 0 0 4px var(--vscode-button-background)1a;
+      }
+    }
+
+    /* 响应式设计 */
+    @media (max-width: 768px) {
+      .progress-steps {
+        flex-wrap: wrap;
+      }
+
+      .step-label {
+        font-size: 9px;
+      }
+
+      .step-circle {
+        width: 20px;
+        height: 20px;
+      }
+
+      .step-number {
+        font-size: 9px;
+      }
+
+      .progress-line {
+        margin: 0 4px;
+      }
+    }
+  `;
+}
+
+/**
+ * 获取进度条的脚本
+ */
+export function getProgressBarScript(): string {
+  return `
+    // 进度条管理
+    const ProgressBar = {
+      steps: ['spec', 'design', 'simulation', 'done'],
+      currentStep: 'spec',
+      isCollapsed: false,
+
+      /**
+       * 初始化进度条
+       */
+      init() {
+        this.updateProgress('spec');
+        this.initToggle();
+      },
+
+      /**
+       * 初始化收起/展开功能
+       */
+      initToggle() {
+        const container = document.querySelector('.progress-bar-container');
+        const header = document.querySelector('.progress-bar-header');
+        const toggle = document.querySelector('.progress-bar-toggle');
+
+        if (!container || !header || !toggle) return;
+
+        // 点击头部或按钮都可以切换
+        const handleToggle = (e) => {
+          e.stopPropagation();
+          this.isCollapsed = !this.isCollapsed;
+
+          if (this.isCollapsed) {
+            container.classList.add('collapsed');
+          } else {
+            container.classList.remove('collapsed');
+          }
+        };
+
+        header.addEventListener('click', handleToggle);
+        toggle.addEventListener('click', handleToggle);
+      },
+
+      /**
+       * 显示进度条
+       */
+      show() {
+        const container = document.querySelector('.progress-bar-container');
+        if (container) {
+          container.style.display = 'block';
+        }
+      },
+
+      /**
+       * 隐藏进度条
+       */
+      hide() {
+        const container = document.querySelector('.progress-bar-container');
+        if (container) {
+          container.style.display = 'none';
+        }
+      },
+
+      /**
+       * 更新进度到指定步骤
+       * @param {string} stepName - 步骤名称
+       */
+      updateProgress(stepName) {
+        if (!this.steps.includes(stepName)) {
+          console.warn('Invalid step name:', stepName);
+          return;
+        }
+
+        this.currentStep = stepName;
+        const currentIndex = this.steps.indexOf(stepName);
+
+        // 更新所有步骤的状态
+        document.querySelectorAll('.progress-step').forEach((step, index) => {
+          step.classList.remove('completed', 'active');
+
+          if (index < currentIndex) {
+            step.classList.add('completed');
+          } else if (index === currentIndex) {
+            step.classList.add('active');
+          }
+        });
+
+        // 更新连接线
+        document.querySelectorAll('.progress-line').forEach((line, index) => {
+          if (index < currentIndex) {
+            line.style.background = 'var(--vscode-button-background)';
+          } else {
+            line.style.background = 'var(--vscode-input-border)';
+          }
+        });
+      },
+
+      /**
+       * 前进到下一步
+       */
+      nextStep() {
+        const currentIndex = this.steps.indexOf(this.currentStep);
+        if (currentIndex < this.steps.length - 1) {
+          this.updateProgress(this.steps[currentIndex + 1]);
+        }
+      },
+
+      /**
+       * 重置进度条
+       */
+      reset() {
+        this.updateProgress('spec');
+      },
+
+      /**
+       * 完成所有步骤
+       */
+      complete() {
+        this.updateProgress('done');
+        // 将最后一步也标记为完成
+        const lastStep = document.querySelector('.progress-step[data-step="done"]');
+        if (lastStep) {
+          lastStep.classList.remove('active');
+          lastStep.classList.add('completed');
+        }
+      }
+    };
+
+    // 初始化进度条
+    ProgressBar.init();
+
+    // 监听来自扩展的消息以更新进度
+    window.addEventListener('message', (event) => {
+      const message = event.data;
+      if (message.type === 'updateProgress') {
+        ProgressBar.updateProgress(message.step);
+      } else if (message.type === 'resetProgress') {
+        ProgressBar.reset();
+      } else if (message.type === 'completeProgress') {
+        ProgressBar.complete();
+      } else if (message.type === 'showProgress') {
+        ProgressBar.show();
+      } else if (message.type === 'hideProgress') {
+        ProgressBar.hide();
+      }
+    });
+  `;
+}

src/views/thinkingProcess.ts

@@ -0,0 +1,178 @@
+/**
+ * 思考过程组件
+ *
+ * 功能说明:
+ * - 显示 AI 的思考过程
+ * - 支持展开/折叠功能
+ * - 提供打字机效果的流式显示
+ */
+
+/**
+ * 获取思考过程组件的 HTML 内容
+ * @param thinking - 思考内容
+ * @param isExpanded - 是否默认展开
+ */
+export function getThinkingProcessContent(
+  thinking: string = "",
+  isExpanded: boolean = false
+): string {
+  return `
+    <div class="thinking-process-container ${isExpanded ? "expanded" : ""}">
+      <div class="thinking-header">
+        <div class="thinking-icon-wrapper">
+          <svg class="thinking-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <span class="thinking-title">思考过程</span>
+      </div>
+      <div class="thinking-content">
+        <div class="thinking-text">${thinking || "正在思考中..."}</div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 获取思考过程组件的样式
+ */
+export function getThinkingProcessStyles(): string {
+  return `
+    .thinking-process-container {
+      margin: 12px 0;
+      border-radius: 6px;
+      background: var(--vscode-editor-background);
+      overflow: hidden;
+      transition: all 0.3s ease;
+    }
+
+    .thinking-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 5px;
+      cursor: pointer;
+      user-select: none;
+      background: var(--vscode-input-background);
+      transition: background 0.2s ease;
+      width: 85px;
+      border-radius: 20px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .thinking-header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.1),
+        transparent
+      );
+      animation: none;
+    }
+
+    .thinking-process-container.typing .thinking-header::before {
+      animation: shine 2s ease-in-out infinite;
+    }
+
+    @keyframes shine {
+      0% {
+        left: -100%;
+      }
+      50%, 100% {
+        left: 100%;
+      }
+    }
+
+    .thinking-header:hover {
+      background: var(--vscode-list-hoverBackground);
+    }
+
+    .thinking-icon-wrapper {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.3s ease;
+    }
+
+    .thinking-process-container.expanded .thinking-icon-wrapper {
+      transform: rotate(90deg);
+    }
+
+    .thinking-icon {
+      color: var(--vscode-descriptionForeground);
+    }
+
+    .thinking-title {
+      flex: 1;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--vscode-foreground);
+    }
+
+    .thinking-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease, padding 0.3s ease;
+      padding: 0 12px;
+    }
+
+    .thinking-process-container.expanded .thinking-content {
+      max-height: 500px;
+      padding: 12px;
+      overflow-y: auto;
+    }
+
+    .thinking-text {
+      font-size: 12px;
+      line-height: 1.6;
+      color: var(--vscode-descriptionForeground);
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      padding-left: 12px;
+      border-left: 2px solid var(--vscode-textBlockQuote-border);
+      position: relative;
+    }
+
+    /* 打字机效果 */
+    .thinking-text.typing::after {
+      content: '▋';
+      animation: blink 1s step-end infinite;
+      margin-left: 2px;
+    }
+
+    @keyframes blink {
+      0%, 50% {
+        opacity: 1;
+      }
+      51%, 100% {
+        opacity: 0;
+      }
+    }
+
+    /* 滚动条样式 */
+    .thinking-content::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .thinking-content::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .thinking-content::-webkit-scrollbar-thumb {
+      background: var(--vscode-scrollbarSlider-background);
+      border-radius: 3px;
+    }
+
+    .thinking-content::-webkit-scrollbar-thumb:hover {
+      background: var(--vscode-scrollbarSlider-hoverBackground);
+    }
+  `;
+}

src/views/webviewContent.ts

@@ -17,14 +17,27 @@ import {
   getMessageAreaStyles,
   getMessageAreaScript,
 } from "./messageArea";
+import { getAgentCardStyles, getAgentCardScript } from "./agentCard";
 import {
-  getAgentCardStyles,
+  getProgressBarContent,
-  getAgentCardScript,
+  getProgressBarStyles,
-} from "./agentCard";
+  getProgressBarScript,
+} from "./progressBar";
+import { getCurrentEnv } from "../config/settings";
 /**
  * 获取 WebView 面板的 HTML 内容
  */
-export function getWebviewContent(iconUri?: string): string {
+export function getWebviewContent(
+  iconUri?: string,
+  autoIconUri?: string,
+  liteIconUri?: string,
+  syIconUri?: string,
+  maxIconUri?: string
+): string {
+  // 获取当前环境，只在 dev 和 test 环境下显示快速操作按钮
+  const currentEnv = getCurrentEnv();
+  const showQuickActions = currentEnv === "dev" || currentEnv === "test";
+
   return `<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
@@ -72,6 +85,7 @@ export function getWebviewContent(iconUri?: string): string {
     ${getAgentCardStyles()}
     ${getWaveformPreviewContent()}
     ${getConversationHistoryBarStyles()}
+    ${getProgressBarStyles()}
     ${getInputAreaStyles()}
 
     .file-editor-section {
@@ -377,6 +391,7 @@ export function getWebviewContent(iconUri?: string): string {
 </head>
 <body>
   ${getConversationHistoryBarContent()}
+  ${getProgressBarContent()}
   <div class="header">
     <div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
       <img src="${iconUri}" alt="IC Coder" style="width: 28px; height: 28px;" />
@@ -394,14 +409,18 @@ export function getWebviewContent(iconUri?: string): string {
       <span id="statusText">思考中...</span>
     </div>
 
-    <div class="quick-actions">
+    ${
+      showQuickActions
+        ? `<div class="quick-actions">
       <button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
       <button class="quick-btn" onclick="quickAction('fsm')">生成状态机</button>
       <button class="quick-btn" onclick="quickAction('testbench')">生成测试平台</button>
       <button class="quick-btn" onclick="quickAction('explore')">知识探索</button>
-    </div>
+    </div>`
+        : ""
+    }
 
-    ${getInputAreaContent()}
+    ${getInputAreaContent(autoIconUri, liteIconUri, syIconUri, maxIconUri)}
   </div>
 
   <script>
@@ -440,10 +459,9 @@ export function getWebviewContent(iconUri?: string): string {
       }
       if (modeTooltip) {
         const tooltipMap = {
-          'plan': '只读模式 - 只能查询分析',
+          'plan': 'plan模式',
-          'ask': '逐个确认 - 每个写操作需确认',
+          'ask': 'ask模式',
-          'agent': '智能体自主模式',
+          'agent': 'agent模式'
-          'auto': '完全自动 - 所有操作自动执行'
         };
         modeTooltip.textContent = tooltipMap[value] || '切换模式';
       }
@@ -571,6 +589,13 @@ export function getWebviewContent(iconUri?: string): string {
           currentSegmentedMessage = null;
           break;
 
+        case 'contextUsage':
+          // 更新上下文使用量显示
+          if (typeof updateContextDisplay === 'function') {
+            updateContextDisplay(message.currentTokens, message.maxTokens);
+          }
+          break;
+
         case 'hideLoading':
           // 隐藏加载指示器
           hideLoadingIndicator();
@@ -640,6 +665,10 @@ export function getWebviewContent(iconUri?: string): string {
           if (messagesContainer) {
             messagesContainer.innerHTML = '';
           }
+          // 重置输入框布局到居中
+          if (typeof window.resetInputAreaLayout === 'function') {
+            window.resetInputAreaLayout();
+          }
           break;
 
         case 'addUserMessage':
@@ -647,6 +676,10 @@ export function getWebviewContent(iconUri?: string): string {
           if (message.text) {
             addMessage(message.text, 'user');
           }
+          // 检查并更新输入框布局
+          if (typeof window.checkMessagesAndUpdateLayout === 'function') {
+            window.checkMessagesAndUpdateLayout();
+          }
           break;
 
         case 'addAiMessage':
@@ -654,6 +687,10 @@ export function getWebviewContent(iconUri?: string): string {
           if (message.text) {
             addMessage(message.text, 'bot');
           }
+          // 检查并更新输入框布局
+          if (typeof window.checkMessagesAndUpdateLayout === 'function') {
+            window.checkMessagesAndUpdateLayout();
+          }
           break;
 
         case 'switchMode':
@@ -686,6 +723,7 @@ export function getWebviewContent(iconUri?: string): string {
     ${getAgentCardScript()}
     ${getWaveformPreviewScript()}
     ${getConversationHistoryBarScript()}
+    ${getProgressBarScript()}
     ${getInputAreaScript()}
   </script></body>
 </html>`;