feat(auth): 添加登录状态检查，

- 未登录时不会自动打开面板命令打开也会显示需要登录 - 登录之后就回自动打开对话面板
feat: 集成 VSCode Authentication API 实现用户登录
2025-12-29 18:52:56 +08:00 · 2025-12-29 18:25:21 +08:00 · 2025-12-29 16:32:18 +08:00 · 2025-12-29 15:59:41 +08:00 · 2025-12-29 15:52:22 +08:00 · 2025-12-29 15:38:00 +08:00
18 changed files with 2350 additions and 578 deletions
--- a/12
+++ b/12
@ -0,0 +1,12 @@
 Copyright (c) 2025 IC Coder Team. All rights reserved.
 本软件及其相关文档文件（以下简称"软件"）的版权归 IC Coder 所有。
 未经版权所有者事先书面许可，不得以任何形式或方式（电子、机械、复印、录制或其他方式）
 复制、分发、传播、展示、修改或创建本软件的衍生作品。
 本软件按"原样"提供，不提供任何明示或暗示的保证，包括但不限于适销性、特定用途适用性
 和非侵权性的保证。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，
 无论是在合同诉讼、侵权行为还是其他方面。
 如需商业使用或获取许可，请联系：[pyjtkj@pyjtkj.com]
--- a/PUBLISH.md
+++ b/PUBLISH.md
@ -0,0 +1,356 @@
 # IC Coder 插件发布流程文档
 本文档详细说明如何将 IC Coder 插件发布到 VS Code 插件市场进行测试和正式发布。
 ## 目录
 - [前置准备](#前置准备)
 - [账号配置](#账号配置)
 - [插件信息完善](#插件信息完善)
 - [打包与发布](#打包与发布)
 - [版本更新](#版本更新)
 - [常见问题](#常见问题)
 ---
 ## 前置准备
 ### 环境要求
 - Node.js 和 pnpm 已安装
 - VS Code 1.80.0 或更高版本
 - 已安装 `@vscode/vsce` 工具（项目已包含）
 ### 检查清单
 在发布前，请确保以下文件和配置已准备就绪：
 - [x] `package.json` - 插件配置文件
 - [x] `README.md` - 插件说明文档
 - [x] `dist/` - 编译后的代码
 - [x] `media/` - 图标和资源文件
 - [ ] `CHANGELOG.md` - 版本更新日志（建议添加）
 - [x] `LICENSE` - 开源许可证（建议添加）
 ---
 ## 账号配置
 ### 1. 创建 Azure DevOps 账号
 1. 访问 [Azure DevOps](https://dev.azure.com)
 2. 使用 Microsoft 账号注册或登录
 3. 创建一个组织（如果还没有）
 ### 2. 生成 Personal Access Token (PAT)
 这是发布插件的关键凭证，请妥善保管。
 **步骤：**
 1. 登录 Azure DevOps
 2. 点击右上角用户图标 → **User settings** → **Personal access tokens**
 3. 点击 **New Token** 按钮
 4. 配置 Token 信息：
   - **Name**: `vscode-publisher`（或其他易识别的名称）
   - **Organization**: 选择 **All accessible organizations**
   - **Expiration**: 建议选择较长期限（如 90 天或自定义）
   - **Scopes**: 选择 **Custom defined**
     - 展开 **Marketplace**
     - 勾选 **Manage**（包含发布和管理权限）
 5. 点击 **Create** 生成 Token
 6. **重要**: 立即复制并保存 Token，页面关闭后将无法再次查看
 **Token 示例格式：**
 ```
 CO03l8nmFBBTNPDg7lN9a9fYwDdgsRIDVDwTrx6Esggi6HnzmrMTJQQJ99BLACAAAAAAAAAAAAAGAZDOVVyT
 ```
 ### 3. 创建发布者账号
 发布者账号是你在 VS Code 市场的身份标识。
 **步骤：**
 1. 访问 [VS Code Marketplace 管理页面](https://marketplace.visualstudio.com/manage)
 2. 使用 Azure DevOps 账号登录
 3. 点击 **Create publisher** 按钮
 4. 填写发布者信息：
   - **ID**: `ICCoder`（必须与 package.json 中的 `publisher` 字段一致）
   - **Name**: `IC Coder`（显示名称，可自定义）
   - **Email**: 你的联系邮箱
 5. 点击 **Create** 完成创建
 **注意事项：**
 - Publisher ID 一旦创建无法修改
 - Publisher ID 必须全局唯一
 - 建议使用有意义且专业的 ID
 ---
 ## 插件信息完善
 ### 1. 完善 package.json
 建议在 `package.json` 中添加以下字段以提升插件质量：
 ```json
 {
  "repository": {
    "type": "git",
    "url": "https://github.com/your-org/ic-coder.git"
  },
  "homepage": "https://github.com/your-org/ic-coder#readme",
  "bugs": {
    "url": "https://github.com/your-org/ic-coder/issues"
  },
  "license": "MIT"
 }
 ```
 ### 2. 创建 CHANGELOG.md
 版本更新日志帮助用户了解每个版本的变化。
 **示例内容：**
 ```markdown
 # 更新日志
 ## [0.0.2] - 2025-12-29
 ### 新增
 - 添加发送和暂停按钮功能
 - 添加一键优化按钮组件
 - 添加 Plan 开关组件
 - 添加模式选择器组件
 - 添加上下文压缩功能
 ### 改进
 - 优化用户界面交互体验
 ## [0.0.1] - 2025-12-XX
 ### 新增
 - 初始版本发布
 - Verilog 代码智能生成
 - 集成 iverilog 仿真工具
 - VCD 波形文件查看器
 ```
 ### 3. 创建 LICENSE 文件
 如果使用 MIT 许可证，创建 `LICENSE` 文件：
 ```
 MIT License
 Copyright (c) 2025 IC Coder Team
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction...
 ```
 ### 4. 优化 README.md
 确保 README 包含：
 - 清晰的功能介绍
 - 使用截图或 GIF 演示
 - 详细的使用说明
 - 系统要求
 - 常见问题解答
 ---
 ## 打包与发布
 ### 方式一：命令行发布（推荐）
 这是最便捷的发布方式，适合频繁更新。
 **步骤：**
 1. **登录发布者账号**
 ```bash
 pnpm vsce login ic-coder-team
 ```
 系统会提示输入 Personal Access Token，粘贴之前创建的 PAT。
 2. **打包插件**
 ```bash
 # 执行生产环境构建
 pnpm run package
 # 打包成 .vsix 文件
 pnpm vsce package
 ```
 这会生成 `ic-coder-plugin-0.0.2.vsix` 文件。
 3. **发布到市场**
 ```bash
 pnpm vsce publish
 ```
 发布成功后会显示插件的市场链接。
 **一键发布（跳过打包步骤）：**
 ```bash
 # 直接发布当前版本
 pnpm vsce publish
 ```
 ### 方式二：手动上传
 适合首次发布或网络环境受限的情况。
 **步骤：**
 1. 本地打包插件：
 ```bash
 pnpm run package
 pnpm vsce package[pnpm vsce package --no-dependencies]
 ```
 2. 访问 [发布者管理页面](https://marketplace.visualstudio.com/manage/publishers/ic-coder-team)
 3. 点击 **New extension** → **Visual Studio Code**
 4. 上传 `ic-coder-plugin-0.0.2.vsix` 文件
 5. 填写插件信息（如果需要）并提交
 6. 等待审核通过
 ---
 ## 版本更新
 ### 自动更新版本号
 使用 `vsce publish` 命令可以自动更新版本号并发布：
 ```bash
 # 补丁版本更新（0.0.2 → 0.0.3）
 pnpm vsce publish patch
 # 次版本更新（0.0.2 → 0.1.0）
 pnpm vsce publish minor
 # 主版本更新（0.0.2 → 1.0.0）
 pnpm vsce publish major
 ```
 ### 手动指定版本
 ```bash
 # 发布指定版本
 pnpm vsce publish 0.0.3
 ```
 ### 更新流程建议
 1. 修改代码并测试
 2. 更新 `CHANGELOG.md` 记录变更
 3. 提交代码到 Git
 4. 执行发布命令
 5. 验证市场上的插件是否正常
 ---
 ## 常见问题
 ### 1. 发布失败：Authentication failed
 **原因：** PAT Token 无效或过期
 **解决方案：**
 - 重新生成 PAT Token
 - 重新登录：`pnpm vsce login ic-coder-team`
 ### 2. 发布失败：Publisher not found
 **原因：** Publisher ID 不存在或不匹配
 **解决方案：**
 - 检查 `package.json` 中的 `publisher` 字段
 - 确认已在市场创建对应的 Publisher
 ### 3. 打包失败：Missing files
 **原因：** 必需文件缺失
 **解决方案：**
 - 确保 `dist/` 目录存在且包含编译后的代码
 - 运行 `pnpm run package` 重新构建
 ### 4. 插件审核被拒
 **常见原因：**
 - 插件名称或描述违反市场规则
 - 图标不符合要求（建议 128x128 PNG）
 - README 内容不完整
 **解决方案：**
 - 查看审核反馈邮件
 - 修改相关内容后重新发布
 ### 5. 如何撤回已发布的版本？
 ```bash
 # 取消发布指定版本
 pnpm vsce unpublish ic-coder-team.ic-coder-plugin@0.0.2
 # 取消发布整个插件（慎用）
 pnpm vsce unpublish ic-coder-team.ic-coder-plugin
 ```
 ### 6. 如何本地测试 .vsix 文件？
 ```bash
 # 在 VS Code 中安装本地 .vsix 文件
 code --install-extension ic-coder-plugin-0.0.2.vsix
 ```
 或者在 VS Code 中：
 1. 打开扩展面板
 2. 点击 `...` 菜单
 3. 选择 **Install from VSIX...**
 4. 选择 `.vsix` 文件
 ---
 ## 发布检查清单
 在正式发布前，请确认以下事项：
 - [ ] 代码已充分测试，无明显 Bug
 - [ ] `package.json` 版本号已更新
 - [ ] `CHANGELOG.md` 已记录本次更新内容
 - [ ] README.md 内容完整且准确
 - [ ] 图标和资源文件正常显示
 - [ ] 已在本地安装测试 .vsix 文件
 - [ ] 已创建 Azure DevOps PAT Token
 - [ ] 已创建 VS Code Marketplace Publisher
 - [ ] 已执行 `pnpm run package` 构建生产版本
 ---
 ## 参考资源
 - [VS Code 插件发布官方文档](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)
 - [vsce 工具文档](https://github.com/microsoft/vscode-vsce)
 - [Azure DevOps 文档](https://docs.microsoft.com/en-us/azure/devops/)
 - [VS Code 插件市场](https://marketplace.visualstudio.com/)
 ---
 **文档维护：** IC Coder Team
 **最后更新：** 2025-12-29
--- a/docs/authentication-implementation.md
+++ b/docs/authentication-implementation.md
@ -0,0 +1,573 @@
 # IC Coder 认证系统实现文档
 ## 概述
 本文档详细说明了 IC Coder 插件如何集成 VSCode Authentication API，实现用户登录功能，并在 VSCode 左下角账户区域显示登录状态。
 ## 架构设计
 ### 核心组件
 1. **ICCoderAuthenticationProvider** - 认证提供者
 2. **VSCode Authentication API** - VSCode 官方认证接口
 3. **本地 HTTP 服务器** - 处理登录回调
 4. **ICViewProvider** - 侧边栏视图（根据登录状态显示不同按钮）
 ### 工作流程
 ```
 用户点击登录
    ↓
 调用 vscode.authentication.getSession()
    ↓
 ICCoderAuthenticationProvider.createSession()
    ↓
 启动本地 HTTP 服务器（动态端口）
    ↓
 打开浏览器访问登录页面
    ↓
 用户在网站完成登录
    ↓
 网站重定向到 http://localhost:{port}/callback?token=xxx
    ↓
 本地服务器接收 token
    ↓
 创建 AuthenticationSession
    ↓
 VSCode 左下角显示账户信息
 ```
 ## 详细实现
 ### 1. Authentication Provider 实现
 文件：`src/services/icCoderAuthProvider.ts`
 #### 1.1 类定义
 ```typescript
 export class ICCoderAuthenticationProvider
  implements vscode.AuthenticationProvider
 {
  private _onDidChangeSessions =
    new vscode.EventEmitter<vscode.AuthenticationProviderAuthenticationSessionsChangeEvent>();
  public readonly onDidChangeSessions = this._onDidChangeSessions.event;
  private _sessions: vscode.AuthenticationSession[] = [];
 }
 ```
 **关键点：**
 - 实现 `vscode.AuthenticationProvider` 接口
 - 使用 `EventEmitter` 通知会话变化
 - 在内存中维护会话列表
 #### 1.2 核心方法
 ##### getSessions() - 获取会话列表
 ```typescript
 async getSessions(scopes?: readonly string[]): Promise<readonly vscode.AuthenticationSession[]> {
  return this._sessions;
 }
 ```
 ##### createSession() - 创建会话（登录）
 ```typescript
 async createSession(scopes: readonly string[]): Promise<vscode.AuthenticationSession> {
  const token = await this.login();
  const session: vscode.AuthenticationSession = {
    id: this.generateSessionId(),
    accessToken: token,
    account: {
      id: "iccoder-user",
      label: "IC Coder 用户",
    },
    scopes: [...scopes],
  };
  this._sessions.push(session);
  await this.saveSessions();
  this._onDidChangeSessions.fire({
    added: [session],
    removed: [],
    changed: [],
  });
  return session;
 }
 ```
 **关键点：**
 - 调用 `login()` 方法获取 token
 - 创建 `AuthenticationSession` 对象
 - 保存到 `globalState`
 - 触发 `onDidChangeSessions` 事件通知 VSCode
 ##### removeSession() - 删除会话（登出）
 ```typescript
 async removeSession(sessionId: string): Promise<void> {
  const sessionIndex = this._sessions.findIndex((s) => s.id === sessionId);
  if (sessionIndex > -1) {
    const session = this._sessions[sessionIndex];
    this._sessions.splice(sessionIndex, 1);
    await this.saveSessions();
    this._onDidChangeSessions.fire({
      added: [],
      removed: [session],
      changed: [],
    });
  }
 }
 ```
 ### 2. 本地 HTTP 服务器实现
 #### 2.1 动态端口分配
 ```typescript
 server.listen(0, () => {
  const address = server.address();
  const port = typeof address === "object" && address ? address.port : 3000;
  resolve({ server, port });
 });
 ```
 **关键点：**
 - 使用端口 `0` 让系统自动分配可用端口
 - 避免端口冲突问题
 - 支持多个用户同时使用
 #### 2.2 回调处理
 ```typescript
 if (url.pathname === "/callback") {
  const token = url.searchParams.get("token");
  if (token) {
    // 返回成功页面
    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
    res.end(this.getSuccessPage(iconBase64));
    // 关闭服务器
    server.close();
    // 返回 token
    if ((server as any)._loginResolve) {
      (server as any)._loginResolve(token);
    }
  }
 }
 ```
 ### 3. package.json 配置
 #### 3.1 注册 Authentication Provider
 ```json
 {
  "contributes": {
    "authentication": [
      {
        "id": "iccoder",
        "label": "IC Coder"
      }
    ]
  }
 }
 ```
 **关键点：**
 - `id` 必须与代码中使用的 ID 一致
 - `label` 会显示在 VSCode 账户菜单中
 #### 3.2 注册命令
 ```json
 {
  "contributes": {
    "commands": [
      {
        "command": "ic-coder.login",
        "title": "IC Coder: 登录账户",
        "category": "IC Coder"
      },
      {
        "command": "ic-coder.logout",
        "title": "IC Coder: 退出登录",
        "category": "IC Coder"
      }
    ]
  }
 }
 ```
 ### 4. extension.ts 注册
 #### 4.1 注册 Authentication Provider
 ```typescript
 export function activate(context: vscode.ExtensionContext) {
  // 注册 Authentication Provider
  const authProvider = new ICCoderAuthenticationProvider(context);
  context.subscriptions.push(
    vscode.authentication.registerAuthenticationProvider(
      "iccoder",
      "IC Coder",
      authProvider
    )
  );
 }
 ```
 #### 4.2 登录命令
 ```typescript
 const loginCommand = vscode.commands.registerCommand(
  "ic-coder.login",
  async () => {
    try {
      await vscode.authentication.getSession("iccoder", [], {
        createIfNone: true,
      });
    } catch (error) {
      vscode.window.showErrorMessage(`登录失败: ${error}`);
    }
  }
 );
 ```
 **关键点：**
 - `createIfNone: true` 会在没有会话时自动调用 `createSession()`
 - VSCode 会自动处理 UI 交互
 #### 4.3 登出命令
 ```typescript
 const logoutCommand = vscode.commands.registerCommand(
  "ic-coder.logout",
  async () => {
    try {
      const session = await vscode.authentication.getSession("iccoder", [], {
        createIfNone: false,
      });
      if (session) {
        await vscode.authentication.getSession("iccoder", [], {
          clearSessionPreference: true,
          forceNewSession: true,
        });
        vscode.window.showInformationMessage("已退出登录");
      }
    } catch (error) {
      vscode.window.showInformationMessage("当前未登录");
    }
  }
 );
 ```
 ### 5. ICViewProvider 集成
 #### 5.1 检查登录状态
 ```typescript
 private async checkLoginStatus(): Promise<boolean> {
  try {
    const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
    return !!session;
  } catch (error) {
    return false;
  }
 }
 ```
 #### 5.2 根据登录状态显示不同按钮
 ```typescript
 resolveWebviewView(webviewView: vscode.WebviewView) {
  this.checkLoginStatus().then((isLoggedIn) => {
    webviewView.webview.html = this.getWebviewContent(
      webviewView.webview,
      isLoggedIn
    );
  });
 }
 ```
 ```typescript
 ${isLoggedIn
  ? '<button class="btn" onclick="openChat()">开始创作</button>'
  : '<button class="btn" onclick="login()">登录账户</button>'
 }
 ```
 ### 6. 网站前端配置
 #### 6.1 检测插件登录请求
 ```javascript
 // 在登录页面检测 redirect_uri 参数
 const urlParams = new URLSearchParams(window.location.search);
 const redirectUri = urlParams.get("redirect_uri");
 if (redirectUri) {
  // 保存回调地址
  localStorage.setItem("plugin_redirect_uri", redirectUri);
 }
 ```
 #### 6.2 登录成功后重定向
 ```javascript
 // 用户登录成功，拿到 token
 const token = response.data.token;
 // 检查是否需要重定向回插件
 const redirectUri = localStorage.getItem("plugin_redirect_uri");
 if (redirectUri) {
  // 重定向回插件，带上 token
  window.location.href = `${redirectUri}?token=${token}`;
  localStorage.removeItem("plugin_redirect_uri");
 } else {
  // 正常登录流程
  router.push("/dashboard");
 }
 ```
 ## 关键技术点
 ### 1. 动态端口分配
 **问题：** 固定端口可能被占用，导致登录失败
 **解决方案：** 使用端口 `0` 让系统自动分配可用端口
 ```typescript
 server.listen(0, () => {
  const address = server.address();
  const port = typeof address === "object" && address ? address.port : 3000;
 });
 ```
 ### 2. Promise 异步等待
 **问题：** 需要等待浏览器登录完成后才能继续
 **解决方案：** 使用 Promise 包装回调逻辑
 ```typescript
 return new Promise((resolve, reject) => {
  (server as any)._loginResolve = resolve;
  (server as any)._loginReject = reject;
 });
 ```
 ### 3. 会话持久化
 **问题：** 重启 VSCode 后需要重新登录
 **解决方案：** 使用 `globalState` 保存会话
 ```typescript
 await this.context.globalState.update("icCoderSessions", this._sessions);
 ```
 ### 4. 事件通知机制
 **问题：** VSCode 需要知道会话状态变化
 **解决方案：** 使用 `EventEmitter` 触发事件
 ```typescript
 this._onDidChangeSessions.fire({
  added: [session],
  removed: [],
  changed: [],
 });
 ```
 ## 用户体验
 ### 登录流程
 1. 用户点击侧边栏"登录账户"按钮
 2. 浏览器自动打开登录页面
 3. 用户在网站完成登录
 4. 浏览器自动跳转到成功页面
 5. VSCode 左下角显示"IC Coder 用户"
 6. 侧边栏按钮变为"开始创作"
 ### 登出流程
 1. 点击 VSCode 左下角账户图标
 2. 选择"IC Coder"账户
 3. 点击"退出"按钮
 4. 或使用命令 `IC Coder: 退出登录`
 ## 常见问题
 ### Q1: 为什么不直接使用 globalState 存储 token？
 **A:** 使用 VSCode Authentication API 的优势：
 - ✅ 统一的用户体验（左下角账户区域）
 - ✅ VSCode 自动管理会话生命周期
 - ✅ 支持多账户切换
 - ✅ 更好的安全性（VSCode 负责加密存储）
 ### Q2: 如何处理 token 过期？
 **A:** 可以在 API 请求失败时：
 1. 检测 401 错误
 2. 调用 `removeSession()` 清除过期会话
 3. 提示用户重新登录
 ### Q3: 如何支持多个账户？
 **A:** 修改 `account` 对象：
 ```typescript
 account: {
  id: userInfo.id,
  label: userInfo.username,
 }
 ```
 ### Q4: 登录页面如何获取用户信息？
 **A:** 可以在登录成功后，通过 API 获取用户信息：
 ```typescript
 const userInfo = await fetch("https://api.iccoder.com/user/info", {
  headers: { Authorization: `Bearer ${token}` },
 });
 const session: vscode.AuthenticationSession = {
  account: {
    id: userInfo.id,
    label: userInfo.username,
  },
  // ...
 };
 ```
 ## 安全考虑
 ### 1. Token 存储
 - ✅ 使用 VSCode `globalState` 加密存储
 - ✅ 不在代码中硬编码敏感信息
 - ✅ Token 仅在内存和加密存储中传递
 ### 2. 本地服务器
 - ✅ 仅监听 `localhost`，不暴露到外网
 - ✅ 使用动态端口，避免固定端口被劫持
 - ✅ 接收到 token 后立即关闭服务器
 - ✅ 设置 5 分钟超时，防止服务器长期运行
 ### 3. HTTPS 考虑
 **当前实现：** 使用 HTTP 本地回调
 **生产环境建议：**
 - 网站使用 HTTPS
 - 本地回调使用 HTTP（localhost 不受浏览器限制）
 - 或使用 `vscode://` 协议（需要网站支持）
 ## 测试指南
 ### 1. 本地测试
 ```bash
 # 启动调试模式
 按 F5
 # 测试登录
 1. 打开侧边栏
 2. 点击"登录账户"
 3. 在浏览器完成登录
 4. 检查左下角是否显示账户
 # 测试登出
 1. 点击左下角账户
 2. 选择"IC Coder"
 3. 点击"退出"
 ```
 ### 2. 调试技巧
 ```typescript
 // 在 ICCoderAuthenticationProvider 中添加日志
 console.log("🔐 创建会话:", session);
 console.log("🔑 Token:", token);
 // 在 ICViewProvider 中添加日志
 console.log("🔍 登录状态:", isLoggedIn);
 ```
 ### 3. 常见错误排查
 | 错误                            | 原因            | 解决方案                           |
 | ------------------------------- | --------------- | ---------------------------------- |
 | `getSessions is not a function` | VSCode 版本过低 | 升级到 1.63.0+                     |
 | 端口被占用                      | 固定端口冲突    | 使用动态端口（已实现）             |
 | 登录后未显示账户                | 未触发事件      | 检查 `_onDidChangeSessions.fire()` |
 | 重启后需要重新登录              | 未保存会话      | 检查 `saveSessions()` 调用         |
 ## 文件结构
 ```
 ic-coder/
 ├── src/
 │   ├── services/
 │   │   └── icCoderAuthProvider.ts    # Authentication Provider 实现
 │   ├── views/
 │   │   └── ICViewProvider.ts         # 侧边栏视图（集成登录状态）
 │   └── extension.ts                  # 注册 Provider 和命令
 ├── package.json                      # 配置 authentication 和 commands
 └── docs/
    └── authentication-implementation.md  # 本文档
 ```
 ## 参考资料
 - [VSCode Authentication API](https://code.visualstudio.com/api/references/vscode-api#authentication)
 - [Authentication Provider Sample](https://github.com/microsoft/vscode-extension-samples/tree/main/authentication-sample)
 - [VSCode Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
 ## 总结
 本实现通过以下步骤完成了 VSCode Authentication API 的集成：
 1. ✅ 创建 `ICCoderAuthenticationProvider` 类实现认证逻辑
 2. ✅ 在 `package.json` 中注册 authentication provider
 3. ✅ 在 `extension.ts` 中注册 provider 和命令
 4. ✅ 实现本地 HTTP 服务器处理登录回调
 5. ✅ 使用动态端口避免冲突
 6. ✅ 集成到侧边栏视图，根据登录状态显示不同按钮
 7. ✅ 配置网站前端支持插件登录重定向
 **最终效果：**
 - 用户登录后，VSCode 左下角显示"IC Coder 用户"
 - 侧边栏根据登录状态显示"登录账户"或"开始创作"按钮
 - 支持通过账户菜单或命令进行登录/登出操作
 ---
 **文档版本：** 1.0  
 **最后更新：** 2025-12-29  
 **作者：** Roe-xin
--- a/media/ICCoder主页标志.png
+++ b/media/ICCoder主页标志.png
--- a/media/图案（方底）.png
+++ b/media/图案（方底）.png
--- a/media/侧边栏logo.png
+++ b/media/侧边栏logo.png
--- a/package.json
+++ b/package.json
@ -1,13 +1,13 @@
 {
-  "name": "ic-coder-plugin",
+  "name": "iccoder",
-  "displayName": "IC Coder plugin",
+  "displayName": "IC Coder",
  "description": "Agentic Verilog Coding Platform for Real-World FPGAs",
  "version": "0.0.2",
-  "publisher": "ic-coder-team",
+  "publisher": "ICCoder",
  "engines": {
    "vscode": "^1.80.0"
  },
-  "icon": "media/图案（方底）.png",
+  "icon": "media/icon.png",
  "categories": [
    "Other"
  ],
@ -19,6 +19,7 @@
    "eda",
    "assistant"
  ],
  "license": "SEE LICENSE IN LICENSE",
  "activationEvents": [
    "onCommand:ic-coder.openPanel",
    "onView:ic-coder-sidebar",
@ -43,36 +44,6 @@
        "command": "ic-coder.openVCDViewer",
        "title": "打开 VCD 波形查看器",
        "category": "IC Coder"
      },
      {
        "command": "ic-coder.viewHistory",
        "title": "查看会话历史",
        "category": "IC Coder"
      },
      {
        "command": "ic-coder.newSession",
        "title": "新建会话",
        "category": "IC Coder"
      },
      {
        "command": "ic-coder.exportSession",
        "title": "导出当前会话",
        "category": "IC Coder"
      },
      {
        "command": "ic-coder.deleteSession",
        "title": "删除会话",
        "category": "IC Coder"
      },
      {
        "command": "ic-coder.clearHistory",
        "title": "清空会话历史",
        "category": "IC Coder"
      },
      {
        "command": "ic-coder.searchSession",
        "title": "搜索会话",
        "category": "IC Coder"
      }
    ],
    "viewsContainers": {
@ -80,7 +51,7 @@
        {
          "id": "ic-coder-sidebar",
          "title": "IC Coder",
-          "icon": "media/侧边栏logo.png"
+          "icon": "media/sidebar-icon.png"
        }
      ]
    },
@ -93,6 +64,12 @@
        }
      ]
    },
    "authentication": [
      {
        "id": "iccoder",
        "label": "IC Coder"
      }
    ],
    "configuration": {
      "title": "IC Coder",
      "properties": {
--- a/src/constants/toolIcons.ts
+++ b/src/constants/toolIcons.ts
@ -50,3 +50,23 @@ export const SearchCode = `
    </svg>
  </span>
 `;
 /**
 * 发送按钮图标 SVG（向上箭头）
 */
 export const sendIconSvg = `
  <svg class="send-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
    <path d="M507.904 882.688c-18.432 0-33.28-14.848-33.28-33.28v-655.36c0-18.432 14.848-33.28 33.28-33.28s33.28 14.848 33.28 33.28v654.848c0 18.432-14.848 33.792-33.28 33.792z" fill="currentColor"></path>
    <path d="M787.968 502.784c-8.704 0-16.896-3.072-23.552-9.728L507.904 236.544 251.392 493.056c-12.8 12.8-34.304 12.8-47.104 0-12.8-12.8-12.8-34.304 0-47.104l280.064-280.064c6.144-6.144 14.848-9.728 23.552-9.728s17.408 3.584 23.552 9.728l280.064 280.064c12.8 12.8 12.8 34.304 0 47.104-6.656 6.656-15.36 9.728-23.552 9.728z" fill="currentColor"></path>
  </svg>
 `;
 /**
 * 暂停按钮图标 SVG（圆形边框内的方块）
 */
 export const stopIconSvg = `
  <svg class="stop-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
    <path d="M512 936a424.1 424.1 0 0 1-165.05-814.66 424.1 424.1 0 0 1 330.1 781.33A421.38 421.38 0 0 1 512 936z m0-768c-189.68 0-344 154.32-344 344s154.32 344 344 344 344-154.32 344-344-154.32-344-344-344z" fill="currentColor"></path>
    <path d="M349.75 349.75m57.15 0l210.2 0q57.15 0 57.15 57.15l0 210.2q0 57.15-57.15 57.15l-210.2 0q-57.15 0-57.15-57.15l0-210.2q0-57.15 57.15-57.15Z" fill="currentColor"></path>
  </svg>
 `;
--- a/src/extension.ts
+++ b/src/extension.ts
@ -3,12 +3,30 @@ import { ICViewProvider } from "./views/ICViewProvider";
 import { showICHelperPanel } from "./panels/ICHelperPanel";
 import { VCDViewerPanel } from "./panels/VCDViewerPanel";
 import { ChatHistoryManager } from "./utils/chatHistoryManager";
 import { ICCoderAuthenticationProvider } from "./services/icCoderAuthProvider";
 export function activate(context: vscode.ExtensionContext) {
  console.log("🎉 IC Coder 插件已激活！");
-  // 自动打开聊天面板
+  // 注册 Authentication Provider
  const authProvider = new ICCoderAuthenticationProvider(context);
  context.subscriptions.push(
    vscode.authentication.registerAuthenticationProvider(
      "iccoder",
      "IC Coder",
      authProvider
    )
  );
  // 检查登录状态，如果已登录则自动打开聊天面板
  vscode.authentication.getSession("iccoder", [], { createIfNone: false })
    .then((session) => {
      if (session) {
        vscode.commands.executeCommand("ic-coder.openChat");
      }
    }, () => {
      // 未登录，不做任何操作
    });
  // 注册命令：打开助手面板
  const openPanelCommand = vscode.commands.registerCommand(
@ -54,6 +72,40 @@ export function activate(context: vscode.ExtensionContext) {
    }
  );
  // 注册命令：用户登录
  const loginCommand = vscode.commands.registerCommand(
    "ic-coder.login",
    async () => {
      try {
        await vscode.authentication.getSession("iccoder", [], { createIfNone: true });
      } catch (error) {
        vscode.window.showErrorMessage(`登录失败: ${error}`);
      }
    }
  );
  // 注册命令：用户登出
  const logoutCommand = vscode.commands.registerCommand(
    "ic-coder.logout",
    async () => {
      try {
        const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
        if (session) {
          // 通过创建新会话并清除偏好来实现登出
          await vscode.authentication.getSession("iccoder", [], {
            clearSessionPreference: true,
            forceNewSession: true
          });
          vscode.window.showInformationMessage("已退出登录");
        } else {
          vscode.window.showInformationMessage("当前未登录");
        }
      } catch (error) {
        vscode.window.showInformationMessage("当前未登录");
      }
    }
  );
  // 注册命令：查看会话历史
  // TODO: 这些命令需要根据新的任务架构重新实现
  // 暂时注释掉，等待重新实现
@ -102,7 +154,7 @@ export function activate(context: vscode.ExtensionContext) {
  */
  // 注册侧边栏视图
-  const viewProvider = new ICViewProvider(context.extensionUri);
+  const viewProvider = new ICViewProvider(context.extensionUri, context);
  const viewRegistration = vscode.window.registerWebviewViewProvider(
    "ic-coder.mainView",
    viewProvider
@ -113,6 +165,8 @@ export function activate(context: vscode.ExtensionContext) {
    openPanelCommand,
    openChatCommand,
    openVCDViewerCommand,
    loginCommand,
    logoutCommand,
    // TODO: 等待重新实现这些命令
    // viewHistoryCommand,
    // newSessionCommand,
--- a/src/panels/ICHelperPanel.ts
+++ b/src/panels/ICHelperPanel.ts
@ -21,6 +21,26 @@ export async function showICHelperPanel(
  context: vscode.ExtensionContext,
  viewColumn?: vscode.ViewColumn
 ) {
  // 检查用户是否已登录
  try {
    const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
    if (!session) {
      vscode.window.showWarningMessage("请先登录后再使用 IC Coder", "立即登录").then((selection) => {
        if (selection === "立即登录") {
          vscode.commands.executeCommand("ic-coder.login");
        }
      });
      return;
    }
  } catch (error) {
    vscode.window.showWarningMessage("请先登录后再使用 IC Coder", "立即登录").then((selection) => {
      if (selection === "立即登录") {
        vscode.commands.executeCommand("ic-coder.login");
      }
    });
    return;
  }
  // 创建WebView面板
  const panel = vscode.window.createWebviewPanel(
    "icCoder", // 面板ID
@ -34,19 +54,21 @@ export async function showICHelperPanel(
  );
  // 为面板生成唯一ID
-  const panelId = `panel_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  const panelId = `panel_${Date.now()}_${Math.random()
    .toString(36)
    .substr(2, 9)}`;
  (panel as any).__uniqueId = panelId;
  // 设置标签页图标
  panel.iconPath = vscode.Uri.joinPath(
    context.extensionUri,
    "media",
-    "图案（方底）.png"
+    "icon.png"
  );
  // 获取页面内图标URI
  const iconUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(context.extensionUri, "media", "图案（方底）.png")
+    vscode.Uri.joinPath(context.extensionUri, "media", "icon.png")
  );
  // 设置HTML内容
@ -63,11 +85,19 @@ export async function showICHelperPanel(
          // 仅在用户发送消息时，确保面板有任务上下文
          // 如果没有，则创建新任务（仅在首次发送消息时）
          if (!historyManager.getPanelTask(panelId)) {
-            const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
+            const workspacePath =
              vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
            if (workspacePath) {
              try {
-                const taskMeta = await historyManager.createTask(workspacePath, "新对话");
+                const taskMeta = await historyManager.createTask(
-                historyManager.setPanelTask(panelId, taskMeta.taskId, workspacePath);
+                  workspacePath,
                  "新对话"
                );
                historyManager.setPanelTask(
                  panelId,
                  taskMeta.taskId,
                  workspacePath
                );
              } catch (error) {
                console.error("创建任务失败:", error);
              }
@ -123,12 +153,20 @@ export async function showICHelperPanel(
          break;
        case "loadConversationHistory":
          // 加载会话历史（支持分页）
-          loadConversationHistory(panel, message.offset || 0, message.limit || 10);
+          loadConversationHistory(
            panel,
            message.offset || 0,
            message.limit || 10
          );
          break;
        case "selectConversation":
          // 选择会话
          if (message.conversationId) {
-            selectConversation(panel, message.conversationId, context.extensionPath);
+            selectConversation(
              panel,
              message.conversationId,
              context.extensionPath
            );
          }
          break;
        // 新增：处理用户回答
@ -407,10 +445,15 @@ async function selectConversation(
    }
    // 加载任务会话
-    const taskSession = await historyManager.loadTaskSession(workspacePath, taskId);
+    const taskSession = await historyManager.loadTaskSession(
      workspacePath,
      taskId
    );
    if (!taskSession) {
-      vscode.window.showErrorMessage(`加载任务 ${taskId} 失败: 任务不存在或数据损坏`);
+      vscode.window.showErrorMessage(
        `加载任务 ${taskId} 失败: 任务不存在或数据损坏`
      );
      return;
    }
@ -427,7 +470,7 @@ async function selectConversation(
    // 清空当前聊天界面
    panel.webview.postMessage({
-      command: "clearChat"
+      command: "clearChat",
    });
    // 将会话历史消息转换为 segments 格式并发送到前端显示
@ -442,17 +485,17 @@ async function selectConversation(
        if (segments.length > 0) {
          panel.webview.postMessage({
            command: "receiveSegments",
-            segments: [...segments]
+            segments: [...segments],
          });
          segments.length = 0;
        }
        // 发送用户消息
-        const textContent = message.contents?.find(c => c.type === 'TEXT');
+        const textContent = message.contents?.find((c) => c.type === "TEXT");
-        if (textContent && 'text' in textContent) {
+        if (textContent && "text" in textContent) {
          panel.webview.postMessage({
            command: "addUserMessage",
-            text: textContent.text
+            text: textContent.text,
          });
        }
        i++;
@ -461,7 +504,7 @@ async function selectConversation(
        if (message.segments && message.segments.length > 0) {
          panel.webview.postMessage({
            command: "receiveSegments",
-            segments: message.segments
+            segments: message.segments,
          });
          i++;
        } else {
@ -469,30 +512,35 @@ async function selectConversation(
          // 收集连续的 AI 消息、工具调用和工具结果
          if (message.text) {
            segments.push({
-              type: 'text',
+              type: "text",
-              content: message.text
+              content: message.text,
            });
          }
          // 检查是否有工具调用
-          if (message.toolExecutionRequests && message.toolExecutionRequests.length > 0) {
+          if (
            message.toolExecutionRequests &&
            message.toolExecutionRequests.length > 0
          ) {
            for (const toolReq of message.toolExecutionRequests) {
              // 查找对应的工具执行结果
-              let toolResult = '';
+              let toolResult = "";
              if (i + 1 < taskSession.messages.length) {
                const nextMsg = taskSession.messages[i + 1];
-                if (nextMsg.type === MessageType.TOOL_EXECUTION_RESULT &&
+                if (
-                    nextMsg.id === toolReq.id) {
+                  nextMsg.type === MessageType.TOOL_EXECUTION_RESULT &&
                  nextMsg.id === toolReq.id
                ) {
                  toolResult = nextMsg.text;
                  i++; // 跳过工具结果消息
                }
              }
              segments.push({
-                type: 'tool',
+                type: "tool",
                toolName: toolReq.name,
                askId: toolReq.id,
-                toolResult: toolResult
+                toolResult: toolResult,
              });
            }
          }
@ -511,26 +559,31 @@ async function selectConversation(
              }
              if (nextMsg.text) {
                segments.push({
-                  type: 'text',
+                  type: "text",
-                  content: nextMsg.text
+                  content: nextMsg.text,
                });
              }
-              if (nextMsg.toolExecutionRequests && nextMsg.toolExecutionRequests.length > 0) {
+              if (
                nextMsg.toolExecutionRequests &&
                nextMsg.toolExecutionRequests.length > 0
              ) {
                for (const toolReq of nextMsg.toolExecutionRequests) {
-                  let toolResult = '';
+                  let toolResult = "";
                  if (i + 1 < taskSession.messages.length) {
                    const resultMsg = taskSession.messages[i + 1];
-                    if (resultMsg.type === MessageType.TOOL_EXECUTION_RESULT &&
+                    if (
-                        resultMsg.id === toolReq.id) {
+                      resultMsg.type === MessageType.TOOL_EXECUTION_RESULT &&
                      resultMsg.id === toolReq.id
                    ) {
                      toolResult = resultMsg.text;
                      i++; // 跳过工具结果消息
                    }
                  }
                  segments.push({
-                    type: 'tool',
+                    type: "tool",
                    toolName: toolReq.name,
                    askId: toolReq.id,
-                    toolResult: toolResult
+                    toolResult: toolResult,
                  });
                }
              }
@ -552,11 +605,13 @@ async function selectConversation(
    if (segments.length > 0) {
      panel.webview.postMessage({
        command: "receiveSegments",
-        segments: segments
+        segments: segments,
      });
    }
-    vscode.window.showInformationMessage(`已加载会话: ${taskSession.meta.taskName}`);
+    vscode.window.showInformationMessage(
      `已加载会话: ${taskSession.meta.taskName}`
    );
  } catch (error) {
    console.error("选择会话失败:", error);
    vscode.window.showErrorMessage(`加载会话失败: ${error}`);
--- a/src/services/icCoderAuthProvider.ts
+++ b/src/services/icCoderAuthProvider.ts
@ -0,0 +1,437 @@
 import * as vscode from "vscode";
 import * as http from "http";
 import * as path from "path";
 import * as fs from "fs";
 /**
 * IC Coder Authentication Provider
 * 集成到 VSCode 账户系统
 */
 export class ICCoderAuthenticationProvider
  implements vscode.AuthenticationProvider
 {
  private static readonly AUTH_TYPE = "iccoder";
  private static readonly AUTH_NAME = "IC Coder";
  private static readonly LOGIN_URL = "http://192.168.1.108:2005/login";
  private static loginServer: http.Server | null = null;
  private static currentPort: number | null = null;
  private _onDidChangeSessions =
    new vscode.EventEmitter<vscode.AuthenticationProviderAuthenticationSessionsChangeEvent>();
  public readonly onDidChangeSessions = this._onDidChangeSessions.event;
  private _sessions: vscode.AuthenticationSession[] = [];
  constructor(private readonly context: vscode.ExtensionContext) {
    // 从存储中恢复会话
    this.loadSessions();
  }
  /**
   * 从存储中加载会话
   */
  private async loadSessions(): Promise<void> {
    const storedSessions = this.context.globalState.get<
      vscode.AuthenticationSession[]
    >("icCoderSessions", []);
    this._sessions = storedSessions;
  }
  /**
   * 保存会话到存储
   */
  private async saveSessions(): Promise<void> {
    await this.context.globalState.update("icCoderSessions", this._sessions);
  }
  /**
   * 获取会话列表
   */
  async getSessions(
    scopes?: readonly string[]
  ): Promise<vscode.AuthenticationSession[]> {
    return [...this._sessions];
  }
  /**
   * 创建会话（登录）
   */
  async createSession(
    scopes: readonly string[]
  ): Promise<vscode.AuthenticationSession> {
    try {
      const token = await this.login();
      // 创建会话
      const session: vscode.AuthenticationSession = {
        id: this.generateSessionId(),
        accessToken: token,
        account: {
          id: "iccoder-user",
          label: "IC Coder 用户",
        },
        scopes: [...scopes],
      };
      this._sessions.push(session);
      await this.saveSessions();
      // 触发会话变化事件
      this._onDidChangeSessions.fire({
        added: [session],
        removed: [],
        changed: [],
      });
      vscode.window.showInformationMessage("登录成功！窗口将自动刷新...");
      // 延迟 1 秒后重新加载窗口，让用户看到成功消息
      setTimeout(() => {
        vscode.commands.executeCommand("workbench.action.reloadWindow");
      }, 1000);
      return session;
    } catch (error) {
      vscode.window.showErrorMessage(
        `登录失败: ${error instanceof Error ? error.message : String(error)}`
      );
      throw error;
    }
  }
  /**
   * 删除会话（登出）
   */
  async removeSession(sessionId: string): Promise<void> {
    const sessionIndex = this._sessions.findIndex((s) => s.id === sessionId);
    if (sessionIndex > -1) {
      const session = this._sessions[sessionIndex];
      this._sessions.splice(sessionIndex, 1);
      await this.saveSessions();
      // 触发会话变化事件
      this._onDidChangeSessions.fire({
        added: [],
        removed: [session],
        changed: [],
      });
      vscode.window.showInformationMessage("已退出登录！窗口将自动刷新...");
      // 延迟 1 秒后重新加载窗口，让用户看到成功消息
      setTimeout(() => {
        vscode.commands.executeCommand("workbench.action.reloadWindow");
      }, 1000);
    }
  }
  /**
   * 生成会话 ID
   */
  private generateSessionId(): string {
    return `iccoder-${Date.now()}-${Math.random().toString(36).substring(7)}`;
  }
  /**
   * 登录逻辑（打开浏览器并等待回调）
   */
  private async login(): Promise<string> {
    // 如果已有服务器在运行，先关闭
    if (ICCoderAuthenticationProvider.loginServer) {
      ICCoderAuthenticationProvider.loginServer.close();
      ICCoderAuthenticationProvider.loginServer = null;
    }
    // 创建本地服务器监听回调
    const { server, port } = await this.createCallbackServer();
    ICCoderAuthenticationProvider.loginServer = server;
    ICCoderAuthenticationProvider.currentPort = port;
    // 构建登录 URL
    const callbackUrl = `http://localhost:${port}/callback`;
    const loginUrl = `${
      ICCoderAuthenticationProvider.LOGIN_URL
    }?redirect_uri=${encodeURIComponent(callbackUrl)}`;
    console.log("🔐 登录服务器已启动，监听端口:", port);
    console.log("🌐 登录 URL:", loginUrl);
    // 打开浏览器登录
    await vscode.env.openExternal(vscode.Uri.parse(loginUrl));
    vscode.window.showInformationMessage(
      "请在浏览器中完成登录，登录成功后将自动返回..."
    );
    // 等待 token（通过 Promise）
    return new Promise((resolve, reject) => {
      const timeout = setTimeout(() => {
        if (ICCoderAuthenticationProvider.loginServer) {
          ICCoderAuthenticationProvider.loginServer.close();
          ICCoderAuthenticationProvider.loginServer = null;
          reject(new Error("登录超时"));
        }
      }, 5 * 60 * 1000);
      // 将 resolve 和 reject 保存到服务器上下文
      (server as any)._loginResolve = resolve;
      (server as any)._loginReject = reject;
      (server as any)._loginTimeout = timeout;
    });
  }
  /**
   * 创建本地回调服务器
   */
  private createCallbackServer(): Promise<{
    server: http.Server;
    port: number;
  }> {
    return new Promise((resolve, reject) => {
      // 读取 icon.png 并转换为 Base64
      const iconPath = path.join(
        this.context.extensionPath,
        "media",
        "icon.png"
      );
      let iconBase64 = "";
      try {
        const iconBuffer = fs.readFileSync(iconPath);
        iconBase64 = `data:image/png;base64,${iconBuffer.toString("base64")}`;
      } catch (error) {
        console.warn("无法读取 icon.png:", error);
      }
      const server = http.createServer(async (req, res) => {
        try {
          console.log("📥 收到回调请求:", req.url);
          const url = new URL(
            req.url!,
            `http://localhost:${ICCoderAuthenticationProvider.currentPort}`
          );
          console.log("📍 路径:", url.pathname);
          console.log("📋 所有参数:", Object.fromEntries(url.searchParams));
          if (url.pathname === "/callback") {
            const token = url.searchParams.get("token");
            console.log("🔑 Token:", token ? "已获取" : "未找到");
            if (token) {
              // 返回成功页面
              res.writeHead(200, {
                "Content-Type": "text/html; charset=utf-8",
              });
              res.end(this.getSuccessPage(iconBase64));
              // 关闭服务器
              server.close();
              ICCoderAuthenticationProvider.loginServer = null;
              // 清除超时
              if ((server as any)._loginTimeout) {
                clearTimeout((server as any)._loginTimeout);
              }
              // 返回 token
              if ((server as any)._loginResolve) {
                (server as any)._loginResolve(token);
              }
            } else {
              res.writeHead(400, {
                "Content-Type": "text/html; charset=utf-8",
              });
              res.end(`
                <!DOCTYPE html>
                <html>
                <head><meta charset="utf-8"><title>登录失败</title></head>
                <body><h1>❌ 登录失败</h1><p>未获取到有效的 Token</p></body>
                </html>
              `);
              if ((server as any)._loginReject) {
                (server as any)._loginReject(new Error("未获取到有效的 Token"));
              }
            }
          } else {
            res.writeHead(404);
            res.end("Not Found");
          }
        } catch (error) {
          res.writeHead(500);
          res.end("Internal Server Error");
          if ((server as any)._loginReject) {
            (server as any)._loginReject(error);
          }
        }
      });
      // 监听端口（使用 0 表示自动分配可用端口）
      server.listen(0, () => {
        const address = server.address();
        const port =
          typeof address === "object" && address ? address.port : 3000;
        resolve({ server, port });
      });
      // 处理错误
      server.on("error", (error: NodeJS.ErrnoException) => {
        reject(error);
      });
    });
  }
  /**
   * 获取登录成功页面 HTML
   */
  private getSuccessPage(iconBase64: string): string {
    return `
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登录成功 - IC Coder</title>
        <style>
          * { margin: 0; padding: 0; box-sizing: border-box; }
          body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
            overflow: hidden;
            position: relative;
          }
          .bg-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 20s infinite ease-in-out;
          }
          .bg-circle:nth-child(1) { width: 300px; height: 300px; top: -150px; left: -150px; }
          .bg-circle:nth-child(2) { width: 200px; height: 200px; bottom: -100px; right: -100px; animation-delay: 5s; }
          .bg-circle:nth-child(3) { width: 150px; height: 150px; top: 50%; right: 10%; animation-delay: 10s; }
          @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -30px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
          }
          .container {
            position: relative;
            z-index: 10;
            text-align: center;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 60px 50px;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 500px;
            animation: slideUp 0.6s ease-out;
          }
          @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
          }
          .success-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 30px;
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: scaleIn 0.5s ease-out 0.2s both;
          }
          @keyframes scaleIn {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
          }
          .checkmark {
            width: 40px;
            height: 40px;
            border: 4px solid white;
            border-radius: 50%;
            position: relative;
          }
          .checkmark::after {
            content: '';
            position: absolute;
            left: 8px;
            top: 3px;
            width: 12px;
            height: 20px;
            border: solid white;
            border-width: 0 4px 4px 0;
            transform: rotate(45deg);
          }
          h1 {
            color: #2d3748;
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 16px;
            animation: fadeIn 0.6s ease-out 0.3s both;
          }
          p {
            color: #718096;
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 30px;
            animation: fadeIn 0.6s ease-out 0.4s both;
          }
          @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
          }
          .brand {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
            animation: fadeIn 0.6s ease-out 0.5s both;
          }
          .brand-logo {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            overflow: hidden;
          }
          .brand-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .brand-text {
            color: #4a5568;
            font-size: 16px;
            font-weight: 600;
          }
        </style>
      </head>
      <body>
        <div class="bg-circle"></div>
        <div class="bg-circle"></div>
        <div class="bg-circle"></div>
        <div class="container">
          <div class="success-icon">
            <div class="checkmark"></div>
          </div>
          <h1>登录成功！</h1>
          <p>您已成功登录 IC Coder<br>现在可以返回 VSCode 继续使用</p>
          <div class="brand">
            <div class="brand-logo">
              <img src="${iconBase64}" alt="IC Coder" />
            </div>
            <span class="brand-text">IC Coder</span>
          </div>
        </div>
      </body>
      </html>
    `;
  }
 }
--- a/src/views/ICViewProvider.ts
+++ b/src/views/ICViewProvider.ts
@ -32,12 +32,12 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
  panel.iconPath = vscode.Uri.joinPath(
    context.extensionUri,
    "media",
-    "图案（方底）.png"
+    "icon.png"
  );
  // 获取页面内图标URI
  const iconUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(context.extensionUri, "media", "图案（方底）.png")
+    vscode.Uri.joinPath(context.extensionUri, "media", "icon.png")
  );
  // 设置HTML内容
  panel.webview.html = getWebviewContent(iconUri.toString());
@ -59,7 +59,12 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
          handleRenameFile(panel, message.oldPath, message.newPath);
          break;
        case "replaceInFile":
-          handleReplaceInFile(panel, message.filePath, message.searchText, message.replaceText);
+          handleReplaceInFile(
            panel,
            message.filePath,
            message.searchText,
            message.replaceText
          );
          break;
        case "insertCode":
          insertCodeToEditor(message.code);
@ -77,7 +82,11 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
          break;
        // 新增：处理用户回答
        case "submitAnswer":
-          handleUserAnswer(message.askId, message.selected, message.customInput);
+          handleUserAnswer(
            message.askId,
            message.selected,
            message.customInput
          );
          break;
        // 新增：中止对话
        case "abortDialog":
@ -94,7 +103,23 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
 * 侧边栏视图提供者
 */
 export class ICViewProvider implements vscode.WebviewViewProvider {
-  constructor(private readonly extensionUri: vscode.Uri) {}
+  constructor(
    private readonly extensionUri: vscode.Uri,
    private readonly context: vscode.ExtensionContext
  ) {}
  /**
   * 检查登录状态（使用 Authentication API）
   */
  private async checkLoginStatus(): Promise<boolean> {
    try {
      const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
      return !!session;
    } catch (error) {
      console.log("检查登录状态失败:", error);
      return false;
    }
  }
  resolveWebviewView(webviewView: vscode.WebviewView) {
    webviewView.webview.options = {
@ -102,19 +127,30 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
      localResourceRoots: [vscode.Uri.joinPath(this.extensionUri, "media")],
    };
-    webviewView.webview.html = this.getWebviewContent(webviewView.webview);
+    // 检查是否已登录（使用 Authentication API）
    this.checkLoginStatus().then((isLoggedIn) => {
      webviewView.webview.html = this.getWebviewContent(
        webviewView.webview,
        isLoggedIn
      );
    });
    // 处理侧边栏的消息
    webviewView.webview.onDidReceiveMessage((message) => {
      if (message.command === "openChat") {
        vscode.commands.executeCommand("ic-coder.openChat");
      } else if (message.command === "login") {
        vscode.commands.executeCommand("ic-coder.login");
      }
    });
  }
-  private getWebviewContent(webview: vscode.Webview): string {
+  private getWebviewContent(
    webview: vscode.Webview,
    isLoggedIn: boolean
  ): string {
    const logoUri = webview.asWebviewUri(
-      vscode.Uri.joinPath(this.extensionUri, "media", "ICCoder主页标志.png")
+      vscode.Uri.joinPath(this.extensionUri, "media", "icon.png")
    );
    return `
@ -175,7 +211,11 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
        <div class="container">
          <img src="${logoUri}" alt="IC Coder" width="120" />
          <h2>欢迎使用 IC Coder</h2>
-          <button class="btn" onclick="openChat()">开始创作</button>
+          ${
            isLoggedIn
              ? '<button class="btn" onclick="openChat()">开始创作</button>'
              : '<button class="btn" onclick="login()">登录账户</button>'
          }
        </div>
        <script>
@ -185,6 +225,11 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
            vscode.postMessage({ command: 'openChat' });
          }
          // 登录功能
          function login() {
            vscode.postMessage({ command: 'login' });
          }
          function generateCode(type) {
            const code = getCodeTemplate(type);
            vscode.postMessage({
--- a/src/views/agentModeSelector.ts
+++ b/src/views/agentModeSelector.ts
@ -0,0 +1,162 @@
 /**
 * 模式选择器组件
 * 提供 Agent/Ask/Auto 三种模式的选择功能
 */
 /**
 * 获取模式选择器的 HTML 内容
 */
 export function getModeSelectorContent(): string {
  return `
    <div class="tooltip">
      <div class="mode-select" id="modeSelect">
        <div class="mode-trigger" onclick="toggleModeDropdown()">
          <span class="mode-value" id="modeValue">Agent</span>
          <svg class="mode-arrow" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M507.8 727.728a30.016 30.016 0 0 1-21.288-8.824L231.104 463.496a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l234.128 234.128 234.16-234.128a30.088 30.088 0 0 1 42.568 0 30.088 30.088 0 0 1 0 42.568L529.08 718.904a30 30 0 0 1-21.28 8.824z" fill="#8a8a8a"/>
          </svg>
        </div>
        <div class="mode-dropdown" id="modeDropdown">
          <div class="mode-option" data-value="agent" onclick="selectMode('agent', 'Agent')">Agent</div>
          <div class="mode-option" data-value="ask" onclick="selectMode('ask', 'Ask')">Ask</div>
          <div class="mode-option" data-value="auto" onclick="selectMode('auto', 'Auto')">Auto</div>
        </div>
      </div>
      <span class="tooltiptext">切换模式</span>
    </div>
  `;
 }
 /**
 * 获取模式选择器的样式
 */
 export function getModeSelectorStyles(): string {
  return `
    /* 模式选择器样式 */
    .mode-select {
      position: relative;
      user-select: none;
    }
    .mode-trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      background: var(--vscode-input-background);
      color: var(--vscode-foreground);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: background 0.2s ease;
    }
    .mode-trigger:hover {
      background: var(--vscode-list-hoverBackground);
    }
    .mode-value {
      white-space: nowrap;
    }
    .mode-arrow {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }
    .mode-select.active .mode-arrow {
      transform: rotate(180deg);
    }
    .mode-dropdown {
      position: absolute;
      bottom: calc(100% + 2px);
      left: 0;
      min-width: 100%;
      background: var(--vscode-dropdown-background);
      border: 1px solid var(--vscode-dropdown-border);
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 1100;
      display: none;
      overflow: hidden;
    }
    .mode-select.active .mode-dropdown {
      display: block;
    }
    /* 模式选择器的选项样式 */
    .mode-option {
      padding: 6px 12px;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.2s ease;
      white-space: nowrap;
    }
    .mode-option:hover {
      background: rgba(128, 128, 128, 0.3);
    }
    .mode-option.selected {
      background: rgba(128, 128, 128, 0.5);
      color: var(--vscode-foreground);
    }
  `;
 }
 /**
 * 获取模式选择器的脚本
 */
 export function getModeSelectorScript(): string {
  return `
    // 模式选择器相关变量
    let currentMode = 'agent';
    // 切换模式下拉框显示/隐藏
    function toggleModeDropdown() {
      const modeSelect = document.getElementById('modeSelect');
      const modelSelect = document.getElementById('modelSelect');
      if (modeSelect) {
        modeSelect.classList.toggle('active');
        // 关闭模型下拉框
        if (modelSelect) {
          modelSelect.classList.remove('active');
        }
      }
    }
    // 选择模式
    function selectMode(value, label) {
      currentMode = value;
      const modeValue = document.getElementById('modeValue');
      if (modeValue) {
        modeValue.textContent = label;
      }
      // 更新选中状态
      const options = document.querySelectorAll('.mode-option');
      options.forEach(option => {
        if (option.getAttribute('data-value') === value) {
          option.classList.add('selected');
        } else {
          option.classList.remove('selected');
        }
      });
      // 关闭下拉框
      const modeSelect = document.getElementById('modeSelect');
      if (modeSelect) {
        modeSelect.classList.remove('active');
      }
    }
    // 获取当前模式
    function getCurrentMode() {
      return currentMode;
    }
    // 点击外部关闭模式下拉框
    document.addEventListener('click', (event) => {
      const modeSelect = document.getElementById('modeSelect');
      if (modeSelect && !modeSelect.contains(event.target)) {
        modeSelect.classList.remove('active');
      }
    });
  `;
 }
--- a/src/views/contextCompress.ts
+++ b/src/views/contextCompress.ts
@ -0,0 +1,249 @@
 /**
 * 上下文压缩组件
 * 提供上下文使用情况显示和压缩功能
 */
 /**
 * 获取上下文压缩组件的 HTML 内容
 */
 export function getContextCompressContent(): string {
  return `
    <!-- 上下文显示 -->
    <div class="context-display">
      <div class="context-info" onclick="toggleContextPanel()">
        <div class="database-icon">
          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" class="db-svg">
            <!-- 数据库容器主体 - 底层灰色 -->
            <path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#94a3b8" class="db-body"/>
            <!-- 填充进度效果 - 从下往上填充蓝色 -->
            <defs>
              <mask id="fill-mask">
                <rect x="0" y="0" width="1024" height="1024" id="fillRect" fill="white"/>
              </mask>
            </defs>
            <g mask="url(#fill-mask)">
              <path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#409eff" class="db-fill"/>
            </g>
          </svg>
        </div>
        <span class="context-percentage" id="contextPercentage">0%</span>
      </div>
      <!-- 上下文信息弹窗 -->
      <div id="contextPanel" class="context-panel">
        <div class="context-panel-content">
          <div class="context-info-text" id="contextInfoText">
            0k / 200k 已用上下文
          </div>
          <button class="compress-button" onclick="compressConversation()">
            压缩会话
          </button>
        </div>
      </div>
    </div>
  `;
 }
 /**
 * 获取上下文压缩组件的样式
 */
 export function getContextCompressStyles(): string {
  return `
    /* 上下文显示样式 */
    .context-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .context-info {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 40px;
      background: transparent;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      color: var(--vscode-foreground);
      transition: opacity 0.3s ease;
      box-shadow: none;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .context-info:hover {
      opacity: 0.8;
    }
    .database-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      position: relative;
    }
    .db-svg {
      width: 100%;
      height: 100%;
    }
    .db-body {
      fill: #ffffff;
    }
    .db-fill {
      fill: #409eff;
      transition: all 0.3s ease;
    }
    .context-percentage {
      font-size: 14px;
      font-weight: 500;
      color: var(--vscode-foreground);
      text-align: right;
    }
    /* 上下文信息弹窗样式 */
    .context-panel {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 8px;
      z-index: 1000;
      animation: fadeInUp 0.2s ease-out;
      display: none;
    }
    .context-panel.active {
      display: block;
    }
    .context-panel::after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #ffffff;
    }
    .context-panel-content {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      padding: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(10px);
      min-width: 160px;
    }
    .context-info-text {
      font-size: 12px;
      color: #374151;
      text-align: center;
      margin-bottom: 8px;
      white-space: nowrap;
    }
    .compress-button {
      width: 100%;
      background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 6px;
      color: white;
      font-size: 12px;
      font-weight: 500;
      padding: 6px 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .compress-button:hover {
      background: linear-gradient(145deg, #2563eb 0%, #1e40af 100%);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
    .compress-button:active {
      transform: translateY(0);
    }
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }
  `;
 }
 /**
 * 获取上下文压缩组件的脚本
 */
 export function getContextCompressScript(): string {
  return `
    // 上下文面板相关函数
    function toggleContextPanel() {
      const contextPanel = document.getElementById('contextPanel');
      if (contextPanel) {
        if (contextPanel.classList.contains('active')) {
          contextPanel.classList.remove('active');
        } else {
          contextPanel.classList.add('active');
        }
      }
    }
    function compressConversation() {
      // 发送压缩会话请求
      vscode.postMessage({ command: 'compressConversation' });
      addMessage('正在压缩会话...', 'bot');
      // 关闭面板
      const contextPanel = document.getElementById('contextPanel');
      if (contextPanel) {
        contextPanel.classList.remove('active');
      }
    }
    function updateContextDisplay(currentTokens, maxTokens) {
      const percentage = Math.min(Math.round((currentTokens / maxTokens) * 100), 100);
      // 更新百分比显示
      const contextPercentage = document.getElementById('contextPercentage');
      if (contextPercentage) {
        contextPercentage.textContent = percentage + '%';
      }
      // 更新详细信息
      const contextInfoText = document.getElementById('contextInfoText');
      if (contextInfoText) {
        const currentK = Math.round((currentTokens / 1000) * 10) / 10;
        const maxK = Math.round(maxTokens / 1000);
        contextInfoText.textContent = \`\${currentK}k / \${maxK}k 已用上下文\`;
      }
      // 更新SVG填充效果（从下往上填充）
      const fillRect = document.getElementById('fillRect');
      if (fillRect) {
        const fillHeight = (1024 * percentage) / 100;
        const fillY = 1024 - fillHeight;
        fillRect.setAttribute('y', fillY.toString());
        fillRect.setAttribute('height', fillHeight.toString());
      }
    }
    // 点击外部关闭上下文面板
    document.addEventListener('click', (event) => {
      const contextDisplay = document.querySelector('.context-display');
      const contextPanel = document.getElementById('contextPanel');
      if (contextPanel && contextPanel.classList.contains('active') && contextDisplay) {
        if (!contextDisplay.contains(event.target)) {
          contextPanel.classList.remove('active');
        }
      }
    });
  `;
 }
--- a/src/views/inputArea.ts
+++ b/src/views/inputArea.ts
@ -4,11 +4,35 @@ import {
  getModelSelectorStyles,
  getModelSelectorScript
 } from "./modelSelector";
 import {
  getModeSelectorContent,
  getModeSelectorStyles,
  getModeSelectorScript
 } from "./agentModeSelector";
 import {
  getContextButtonContent,
  getContextButtonStyles,
  getContextButtonScript
 } from "./contextButton";
 import {
  getContextCompressContent,
  getContextCompressStyles,
  getContextCompressScript
 } from "./contextCompress";
 import {
  getPlanToggleContent,
  getPlanToggleStyles,
  getPlanToggleScript
 } from "./planToggle";
 import {
  getOptimizeButtonContent,
  getOptimizeButtonStyles,
  getOptimizeButtonScript
 } from "./optimizeButton";
 import {
  sendIconSvg,
  stopIconSvg
 } from "../constants/toolIcons";
 /**
 * 获取输入区域的 HTML 内容
@ -21,16 +45,7 @@ export function getInputAreaContent(): string {
          <!-- 顶部工具栏 -->
          <div class="input-top-toolbar">
            ${getContextButtonContent()}
-
+            ${getPlanToggleContent()}
            <!-- Plan 开关 -->
            <div class="tooltip">
              <label class="plan-toggle">
                <input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
                <span class="plan-toggle-slider"></span>
                <span class="plan-toggle-label">Plan</span>
              </label>
              <span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
            </div>
          </div>
          <textarea
            id="messageInput"
@ -39,75 +54,19 @@ export function getInputAreaContent(): string {
          ></textarea>
          <div class="input-bottom-row">
            <div class="mode-selector">
-              <!-- 模式选择 -->
+              ${getModeSelectorContent()}
              <div class="tooltip">
                <div class="custom-select" id="customSelect">
                  <div class="select-trigger" onclick="toggleModeDropdown()">
                    <span class="select-value" id="selectValue">Agent</span>
                    <svg class="select-arrow" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path d="M507.8 727.728a30.016 30.016 0 0 1-21.288-8.824L231.104 463.496a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l234.128 234.128 234.16-234.128a30.088 30.088 0 0 1 42.568 0 30.088 30.088 0 0 1 0 42.568L529.08 718.904a30 30 0 0 1-21.28 8.824z" fill="#8a8a8a"/>
                    </svg>
                  </div>
                  <div class="select-dropdown" id="selectDropdown">
                    <div class="select-option" data-value="agent" onclick="selectMode('agent', 'Agent')">Agent</div>
                    <div class="select-option" data-value="ask" onclick="selectMode('ask', 'Ask')">Ask</div>
                    <div class="select-option" data-value="auto" onclick="selectMode('auto', 'Auto')">Auto</div>
                  </div>
                </div>
                <span class="tooltiptext">切换模式</span>
              </div>
              ${getModelSelectorContent()}
            </div>
            <div class="input-actions">
-              <!-- 上下文显示 -->
+              ${getContextCompressContent()}
-              <div class="context-display">
+              ${getOptimizeButtonContent()}
-                <div class="context-info" onclick="toggleContextPanel()">
+              <button id="sendButton" onclick="handleSendOrStop()">
-                  <div class="database-icon">
+                ${sendIconSvg}
-                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" class="db-svg">
+                <span style="display: none;">${stopIconSvg}</span>
                      <!-- 数据库容器主体 - 底层灰色 -->
                      <path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#94a3b8" class="db-body"/>
                      <!-- 填充进度效果 - 从下往上填充蓝色 -->
                      <defs>
                        <mask id="fill-mask">
                          <rect x="0" y="0" width="1024" height="1024" id="fillRect" fill="white"/>
                        </mask>
                      </defs>
                      <g mask="url(#fill-mask)">
                        <path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#409eff" class="db-fill"/>
                      </g>
                    </svg>
                  </div>
                  <span class="context-percentage" id="contextPercentage">0%</span>
                </div>
                <!-- 上下文信息弹窗 -->
                <div id="contextPanel" class="context-panel">
                  <div class="context-panel-content">
                    <div class="context-info-text" id="contextInfoText">
                      0k / 200k 已用上下文
                    </div>
                    <button class="compress-button" onclick="compressConversation()">
                      压缩会话
              </button>
            </div>
          </div>
        </div>
              <!-- 一键优化按钮 -->
              <div class="tooltip">
                <button id="optimizeButton" class="optimize-button" onclick="handleOptimize()">
                  <svg t="1765867478136" id="optimizeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314"><path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" p-id="2315" fill="#409eff"></path></svg>
                </button>
                <span class="tooltiptext" id="optimizeTooltip">一键优化</span>
              </div>
              <button onclick="sendMessage()">发送</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;
@ -118,8 +77,12 @@ export function getInputAreaContent(): string {
 */
 export function getInputAreaStyles(): string {
  return `
    ${getModeSelectorStyles()}
    ${getModelSelectorStyles()}
    ${getContextButtonStyles()}
    ${getContextCompressStyles()}
    ${getPlanToggleStyles()}
    ${getOptimizeButtonStyles()}
    .input-area {
      border-top: 1px solid var(--vscode-panel-border);
      padding-top: 15px;
@ -157,49 +120,6 @@ export function getInputAreaStyles(): string {
      margin-bottom: 8px;
      gap: 12px;
    }
    .plan-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .plan-toggle input[type="checkbox"] {
      display: none;
    }
    .plan-toggle-slider {
      position: relative;
      width: 36px;
      height: 20px;
      background: var(--vscode-input-background);
      border: 1px solid var(--vscode-input-border);
      border-radius: 10px;
      transition: all 0.3s ease;
    }
    .plan-toggle-slider::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      left: 2px;
      top: 2px;
      background: var(--vscode-foreground);
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    .plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider {
      background: #409eff;
      border-color: #409eff;
    }
    .plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider::before {
      transform: translateX(16px);
      background: white;
    }
    .plan-toggle-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--vscode-foreground);
    }
    .input-bottom-row {
      display: flex;
      align-items: center;
@ -213,70 +133,6 @@ export function getInputAreaStyles(): string {
      gap: 8px;
      position: relative;
    }
    /* 自定义下拉框样式（用于模式选择） */
    .custom-select {
      position: relative;
      user-select: none;
    }
    .select-trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      background: var(--vscode-input-background);
      color: var(--vscode-foreground);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: background 0.2s ease;
    }
    .select-trigger:hover {
      background: var(--vscode-list-hoverBackground);
    }
    .select-value {
      white-space: nowrap;
    }
    .select-arrow {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }
    .custom-select.active .select-arrow {
      transform: rotate(180deg);
    }
    .select-dropdown {
      position: absolute;
      bottom: calc(100% + 2px);
      left: 0;
      min-width: 100%;
      background: var(--vscode-dropdown-background);
      border: 1px solid var(--vscode-dropdown-border);
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 1100;
      display: none;
      overflow: hidden;
    }
    .custom-select.active .select-dropdown {
      display: block;
    }
    /* 模式选择器的选项样式 */
    #selectDropdown .select-option {
      padding: 6px 12px;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.2s ease;
      white-space: nowrap;
    }
    #selectDropdown .select-option:hover {
      background: rgba(128, 128, 128, 0.3);
    }
    #selectDropdown .select-option.selected {
      background: rgba(128, 128, 128, 0.5);
      color: var(--vscode-foreground);
    }
    .input-actions {
      display: flex;
      align-items: center;
@ -372,154 +228,30 @@ export function getInputAreaStyles(): string {
      border: none;
      border-radius: 4px;
      cursor: pointer;
-    }
+      transition: background 0.2s ease;
    .optimize-button {
      padding: 8px;
      background: transparent;
      color: var(--vscode-foreground);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease;
      width: 32px;
      height: 32px;
    }
-    .optimize-button:hover {
+    button:hover {
-      opacity: 0.7;
+      background: var(--vscode-button-hoverBackground);
    }
-    .optimize-button svg {
+    /* 发送按钮状态样式 */
-      width: 16px;
+    #sendButton {
      height: 16px;
    }
    .optimize-button-wrapper {
      display: flex;
      align-items: flex-end;
    }
    /* 上下文显示样式 */
    .context-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      min-width: 32px;
      padding: 6px 8px;
    }
-    .context-info {
+    #sendButton svg {
-      display: flex;
+      width: 14px;
-      align-items: center;
+      height: 14px;
      gap: 6px;
      height: 40px;
      background: transparent;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      color: var(--vscode-foreground);
      transition: opacity 0.3s ease;
      box-shadow: none;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .context-info:hover {
      opacity: 0.8;
    }
    .database-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      position: relative;
    }
    .db-svg {
      width: 100%;
      height: 100%;
    }
    .db-body {
      fill: #ffffff;
    }
    .db-fill {
      fill: #409eff;
      transition: all 0.3s ease;
    }
    .context-percentage {
      font-size: 14px;
      font-weight: 500;
      color: var(--vscode-foreground);
      text-align: right;
    }
    /* 上下文信息弹窗样式 */
    .context-panel {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 8px;
      z-index: 1000;
      animation: fadeInUp 0.2s ease-out;
      display: none;
    }
    .context-panel.active {
      display: block;
    }
-    .context-panel::after {
+    #sendButton.sending {
-      content: "";
+      background: var(--vscode-button-background);
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #ffffff;
    }
    .context-panel-content {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      padding: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(10px);
      min-width: 160px;
    }
    .context-info-text {
      font-size: 12px;
      color: #374151;
      text-align: center;
      margin-bottom: 8px;
      white-space: nowrap;
    }
    .compress-button {
      width: 100%;
      background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 6px;
      color: white;
      font-size: 12px;
      font-weight: 500;
      padding: 6px 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .compress-button:hover {
      background: linear-gradient(145deg, #2563eb 0%, #1e40af 100%);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
    .compress-button:active {
      transform: translateY(0);
    }
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    #sendButton.sending:hover {
      background: var(--vscode-button-hoverBackground);
    }
  `;
 }
@ -529,8 +261,15 @@ export function getInputAreaStyles(): string {
 */
 export function getInputAreaScript(): string {
  return `
    ${getModeSelectorScript()}
    ${getModelSelectorScript()}
    ${getContextButtonScript()}
    ${getContextCompressScript()}
    ${getPlanToggleScript()}
    ${getOptimizeButtonScript()}
    // 对话状态管理
    let isConversationActive = false;
    // 自动调整 textarea 高度
    function autoResizeTextarea() {
@ -551,64 +290,50 @@ export function getInputAreaScript(): string {
      messageInput.focus();
    }
-    // 自定义下拉框相关变量
+    // 切换发送按钮状态
-    let currentMode = 'agent';
+    function setSendButtonState(isSending) {
      const sendButton = document.getElementById('sendButton');
      const children = sendButton.children;
      const sendIconContainer = children[0]; // 第一个子元素是发送图标的 SVG
      const stopIconContainer = children[1]; // 第二个子元素是包含暂停图标的 span
-    // 切换模式下拉框显示/隐藏
+      if (isSending) {
-    function toggleModeDropdown() {
+        sendButton.classList.add('sending');
-      const customSelect = document.getElementById('customSelect');
+        sendIconContainer.style.display = 'none';
-      const modelSelect = document.getElementById('modelSelect');
+        stopIconContainer.style.display = 'block';
-      if (customSelect) {
+        isConversationActive = true;
        customSelect.classList.toggle('active');
        // 关闭模型下拉框
        if (modelSelect) {
          modelSelect.classList.remove('active');
        }
      }
    }
    // 选择模式
    function selectMode(value, label) {
      currentMode = value;
      const selectValue = document.getElementById('selectValue');
      if (selectValue) {
        selectValue.textContent = label;
      }
      // 更新选中状态
      const options = document.querySelectorAll('#selectDropdown .select-option');
      options.forEach(option => {
        if (option.getAttribute('data-value') === value) {
          option.classList.add('selected');
      } else {
-          option.classList.remove('selected');
+        sendButton.classList.remove('sending');
-        }
+        sendIconContainer.style.display = 'block';
-      });
+        stopIconContainer.style.display = 'none';
-
+        isConversationActive = false;
      // 关闭下拉框
      const customSelect = document.getElementById('customSelect');
      if (customSelect) {
        customSelect.classList.remove('active');
      }
    }
-    // 点击外部关闭下拉框
+    // 处理发送或停止
-    document.addEventListener('click', (event) => {
+    function handleSendOrStop() {
-      const customSelect = document.getElementById('customSelect');
+      if (isConversationActive) {
-
+        // 当前正在对话，执行停止操作
-      if (customSelect && !customSelect.contains(event.target)) {
+        vscode.postMessage({ command: 'abortDialog' });
-        customSelect.classList.remove('active');
+        setSendButtonState(false);
      } else {
        // 当前未在对话，执行发送操作
        sendMessage();
      }
    }
    });
    function sendMessage() {
      const text = messageInput.value.trim();
      if (!text) return;
-      const mode = currentMode;
+      const mode = getCurrentMode(); // 从模式选择器组件获取当前模式
      const model = getCurrentModel(); // 从模型选择器组件获取当前模型
      addMessage(text, 'user');
      // 切换按钮为暂停状态
      setSendButtonState(true);
      vscode.postMessage({ command: 'sendMessage', text: text, mode: mode, model: model });
      messageInput.value = '';
      autoResizeTextarea(); // 重置输入框高度
@ -617,140 +342,5 @@ export function getInputAreaScript(): string {
      // 重置优化状态
      resetOptimizeButton();
    }
    // Plan 开关处理函数
    function handlePlanToggle() {
      const planToggle = document.getElementById('planToggle');
      const planTooltip = document.getElementById('planTooltip');
      if (planToggle && planTooltip) {
        if (planToggle.checked) {
          // 开启 Plan 模式
          planTooltip.textContent = '关闭 Plan 模式';
        } else {
          // 关闭 Plan 模式
          planTooltip.textContent = '启用 Plan 模式';
        }
      }
    }
    let isOptimized = false; // 标记是否已优化
    let originalText = ''; // 保存原始文本用于撤回
    function handleOptimize() {
      if (isOptimized) {
        // 撤回操作
        messageInput.value = originalText;
        resetOptimizeButton();
      } else {
        // 优化操作
        originalText = messageInput.value; // 保存原始文本
        // 使用死数据替换输入框内容
        const optimizedTexts = [
          '请帮我优化这段代码，提高性能和可读性',
          '请分析这个问题并给出最佳解决方案',
          '请帮我重构这段代码，使其更加简洁高效',
          '请检查代码中的潜在问题并提供改进建议'
        ];
        const randomText = optimizedTexts[Math.floor(Math.random() * optimizedTexts.length)];
        messageInput.value = randomText;
        // 切换到撤回状态
        isOptimized = true;
        updateOptimizeButton();
      }
      messageInput.focus();
      autoResizeTextarea();
    }
    function updateOptimizeButton() {
      const optimizeIcon = document.getElementById('optimizeIcon');
      const optimizeTooltip = document.getElementById('optimizeTooltip');
      if (optimizeIcon && optimizeTooltip) {
        // 切换为撤回图标
        optimizeIcon.innerHTML = '<path d="M581.056 288.32H232.96l108.352-102.208c15.552-15.744 19.456-31.104 4.16-46.208-16.064-15.872-32.576-15.808-48.64 0l-145.92 144.768c-8.768 8.832-23.488 20.608-22.08 32.448l0.64 4.8-0.64 4.864c-1.344 11.776 6.4 18.24 14.848 26.816l147.648 145.216c16.064 15.808 38.08 20.992 54.144 5.12 15.296-15.104 3.84-38.208-11.328-53.504L233.152 353.6 581.056 352c126.464 0 250.944 111.488 250.944 236.16C832 712.832 707.52 832 581.056 832H246.4c-22.592 0-29.696 9.6-29.696 32.256s7.04 31.744 29.696 31.744H581.12C755.136 896 896 757.696 896 588.16c0-169.408-140.8-299.84-314.944-299.84z" fill="currentColor"/><path d="M323.392 192a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM320.192 514.048a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM237.824 896a32 32 0 1 1 0-64 32 32 0 0 1 0 64z" fill="currentColor"/>';
        optimizeTooltip.textContent = '撤回';
      }
    }
    function resetOptimizeButton() {
      const optimizeIcon = document.getElementById('optimizeIcon');
      const optimizeTooltip = document.getElementById('optimizeTooltip');
      if (optimizeIcon && optimizeTooltip) {
        // 切换回优化图标（星星图标）
        optimizeIcon.innerHTML = '<path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" fill="#409eff"/>';
        optimizeTooltip.textContent = '一键优化';
      }
      isOptimized = false;
      originalText = '';
    }
    // 上下文面板相关函数
    function toggleContextPanel() {
      const contextPanel = document.getElementById('contextPanel');
      if (contextPanel) {
        if (contextPanel.classList.contains('active')) {
          contextPanel.classList.remove('active');
        } else {
          contextPanel.classList.add('active');
        }
      }
    }
    function compressConversation() {
      // 发送压缩会话请求
      vscode.postMessage({ command: 'compressConversation' });
      addMessage('正在压缩会话...', 'bot');
      // 关闭面板
      const contextPanel = document.getElementById('contextPanel');
      if (contextPanel) {
        contextPanel.classList.remove('active');
      }
    }
    function updateContextDisplay(currentTokens, maxTokens) {
      const percentage = Math.min(Math.round((currentTokens / maxTokens) * 100), 100);
      // 更新百分比显示
      const contextPercentage = document.getElementById('contextPercentage');
      if (contextPercentage) {
        contextPercentage.textContent = percentage + '%';
      }
      // 更新详细信息
      const contextInfoText = document.getElementById('contextInfoText');
      if (contextInfoText) {
        const currentK = Math.round((currentTokens / 1000) * 10) / 10;
        const maxK = Math.round(maxTokens / 1000);
        contextInfoText.textContent = \`\${currentK}k / \${maxK}k 已用上下文\`;
      }
      // 更新SVG填充效果（从下往上填充）
      const fillRect = document.getElementById('fillRect');
      if (fillRect) {
        const fillHeight = (1024 * percentage) / 100;
        const fillY = 1024 - fillHeight;
        fillRect.setAttribute('y', fillY.toString());
        fillRect.setAttribute('height', fillHeight.toString());
      }
    }
    // 点击外部关闭上下文面板
    document.addEventListener('click', (event) => {
      const contextDisplay = document.querySelector('.context-display');
      const contextPanel = document.getElementById('contextPanel');
      if (contextPanel && contextPanel.classList.contains('active') && contextDisplay) {
        if (!contextDisplay.contains(event.target)) {
          contextPanel.classList.remove('active');
        }
      }
    });
  `;
 }
--- a/src/views/optimizeButton.ts
+++ b/src/views/optimizeButton.ts
@ -0,0 +1,117 @@
 /**
 * 一键优化按钮组件
 */
 /**
 * 获取一键优化按钮的 HTML 内容
 */
 export function getOptimizeButtonContent(): string {
  return `
    <!-- 一键优化按钮 -->
    <div class="tooltip">
      <button id="optimizeButton" class="optimize-button" onclick="handleOptimize()">
        <svg t="1765867478136" id="optimizeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314"><path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" p-id="2315" fill="#409eff"></path></svg>
      </button>
      <span class="tooltiptext" id="optimizeTooltip">一键优化</span>
    </div>
  `;
 }
 /**
 * 获取一键优化按钮的样式
 */
 export function getOptimizeButtonStyles(): string {
  return `
    /* 一键优化按钮样式 */
    .optimize-button {
      padding: 8px;
      background: transparent;
      color: var(--vscode-foreground);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease;
      width: 32px;
      height: 32px;
    }
    .optimize-button:hover {
      opacity: 0.7;
    }
    .optimize-button svg {
      width: 16px;
      height: 16px;
    }
    .optimize-button-wrapper {
      display: flex;
      align-items: flex-end;
    }
  `;
 }
 /**
 * 获取一键优化按钮的脚本
 */
 export function getOptimizeButtonScript(): string {
  return `
    let isOptimized = false; // 标记是否已优化
    let originalText = ''; // 保存原始文本用于撤回
    function handleOptimize() {
      if (isOptimized) {
        // 撤回操作
        messageInput.value = originalText;
        resetOptimizeButton();
      } else {
        // 优化操作
        originalText = messageInput.value; // 保存原始文本
        // 使用死数据替换输入框内容
        const optimizedTexts = [
          '请帮我优化这段代码，提高性能和可读性',
          '请分析这个问题并给出最佳解决方案',
          '请帮我重构这段代码，使其更加简洁高效',
          '请检查代码中的潜在问题并提供改进建议'
        ];
        const randomText = optimizedTexts[Math.floor(Math.random() * optimizedTexts.length)];
        messageInput.value = randomText;
        // 切换到撤回状态
        isOptimized = true;
        updateOptimizeButton();
      }
      messageInput.focus();
      autoResizeTextarea();
    }
    function updateOptimizeButton() {
      const optimizeIcon = document.getElementById('optimizeIcon');
      const optimizeTooltip = document.getElementById('optimizeTooltip');
      if (optimizeIcon && optimizeTooltip) {
        // 切换为撤回图标
        optimizeIcon.innerHTML = '<path d="M581.056 288.32H232.96l108.352-102.208c15.552-15.744 19.456-31.104 4.16-46.208-16.064-15.872-32.576-15.808-48.64 0l-145.92 144.768c-8.768 8.832-23.488 20.608-22.08 32.448l0.64 4.8-0.64 4.864c-1.344 11.776 6.4 18.24 14.848 26.816l147.648 145.216c16.064 15.808 38.08 20.992 54.144 5.12 15.296-15.104 3.84-38.208-11.328-53.504L233.152 353.6 581.056 352c126.464 0 250.944 111.488 250.944 236.16C832 712.832 707.52 832 581.056 832H246.4c-22.592 0-29.696 9.6-29.696 32.256s7.04 31.744 29.696 31.744H581.12C755.136 896 896 757.696 896 588.16c0-169.408-140.8-299.84-314.944-299.84z" fill="currentColor"/><path d="M323.392 192a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM320.192 514.048a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM237.824 896a32 32 0 1 1 0-64 32 32 0 0 1 0 64z" fill="currentColor"/>';
        optimizeTooltip.textContent = '撤回';
      }
    }
    function resetOptimizeButton() {
      const optimizeIcon = document.getElementById('optimizeIcon');
      const optimizeTooltip = document.getElementById('optimizeTooltip');
      if (optimizeIcon && optimizeTooltip) {
        // 切换回优化图标（星星图标）
        optimizeIcon.innerHTML = '<path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" fill="#409eff"/>';
        optimizeTooltip.textContent = '一键优化';
      }
      isOptimized = false;
      originalText = '';
    }
  `;
 }
--- a/src/views/planToggle.ts
+++ b/src/views/planToggle.ts
@ -0,0 +1,100 @@
 /**
 * Plan 开关组件
 */
 /**
 * 获取 Plan 开关的 HTML 内容
 */
 export function getPlanToggleContent(): string {
  return `
    <div class="tooltip">
      <label class="plan-toggle">
        <input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
        <span class="plan-toggle-slider"></span>
        <span class="plan-toggle-label">Plan</span>
      </label>
      <span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
    </div>
  `;
 }
 /**
 * 获取 Plan 开关的样式
 */
 export function getPlanToggleStyles(): string {
  return `
    /* Plan 开关样式 */
    .plan-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .plan-toggle input[type="checkbox"] {
      display: none;
    }
    .plan-toggle-slider {
      position: relative;
      width: 36px;
      height: 20px;
      background: var(--vscode-input-background);
      border: 1px solid var(--vscode-input-border);
      border-radius: 10px;
      transition: all 0.3s ease;
    }
    .plan-toggle-slider::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      left: 2px;
      top: 2px;
      background: var(--vscode-foreground);
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    .plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider {
      background: #409eff;
      border-color: #409eff;
    }
    .plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider::before {
      transform: translateX(16px);
      background: white;
    }
    .plan-toggle-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--vscode-foreground);
    }
  `;
 }
 /**
 * 获取 Plan 开关的脚本
 */
 export function getPlanToggleScript(): string {
  return `
    // Plan 开关处理函数
    function handlePlanToggle() {
      const planToggle = document.getElementById('planToggle');
      const planTooltip = document.getElementById('planTooltip');
      if (planToggle && planTooltip) {
        if (planToggle.checked) {
          // 开启 Plan 模式
          planTooltip.textContent = '关闭 Plan 模式';
        } else {
          // 关闭 Plan 模式
          planTooltip.textContent = '启用 Plan 模式';
        }
      }
    }
  `;
 }
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@ -347,6 +347,27 @@ export function getWebviewContent(iconUri?: string): string {
      background: var(--vscode-charts-red);
      animation: none;
    }
    /* 快捷操作按钮样式 */
    .quick-actions {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
      flex-wrap: wrap;
    }
    .quick-btn {
      padding: 8px 16px;
      background: var(--vscode-button-secondaryBackground);
      color: var(--vscode-button-secondaryForeground);
      border: 1px solid var(--vscode-button-border);
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
    }
    .quick-btn:hover {
      background: var(--vscode-button-secondaryHoverBackground);
    }
  </style>
 </head>
 <body>
@ -437,6 +458,10 @@ export function getWebviewContent(iconUri?: string): string {
          // 实时更新分段消息（按后端返回顺序）
          console.log('[WebView] 实时更新段落, segments:', message.segments);
          updateSegmentsRealtime(message.segments, message.isComplete);
          // 如果对话完成，恢复发送按钮状态
          if (message.isComplete && typeof setSendButtonState === 'function') {
            setSendButtonState(false);
          }
          break;
        case 'receiveSegments':
Author	SHA1	Message	Date
Roe-xin	f9c9fa1840	feat(auth): 添加登录状态检查， - 未登录时不会自动打开面板命令打开也会显示需要登录 - 登录之后就回自动打开对话面板	2025-12-29 18:52:56 +08:00
Roe-xin	53e91fc5a0	feat: 集成 VSCode Authentication API 实现用户登录 - 新增 Authentication Provider，登录信息显示在左下角 - 支持浏览器登录并自动回调 - 登录/登出后自动刷新窗口 - 侧边栏根据登录状态显示不同按钮	2025-12-29 18:25:21 +08:00
Roe-xin	4288607ee2	feat(icon): 更新面板和视图中的图标路径为统一的 icon.png	2025-12-29 16:32:18 +08:00
Roe-xin	d4d86df7de	fix(PUBLISH.md): 修正打包命令，添加 --no-dependencies 选项以避免依赖问题	2025-12-29 15:59:41 +08:00
Roe-xin	4b8d255207	feat(media): 添加主页和侧边栏图标，并更新 package.json 中的图标路径	2025-12-29 15:52:22 +08:00
Roe-xin	a5dba25a8e	fix(package): 修正 package.json 中的名称字段为小写	2025-12-29 15:38:00 +08:00
Roe-xin	719d1396b0	feat(license): 添加 LICENSE 文件并更新 package.json 中的许可证信息	2025-12-29 15:35:57 +08:00
Roe-xin	5b6ac43e13	feat(sendButton): 添加发送和暂停按钮图标及其状态管理功能	2025-12-29 14:41:15 +08:00
Roe-xin	f7c2d86a46	feat(optimizeButton): 添加一键优化按钮组件及其集成到输入区域	2025-12-29 12:04:38 +08:00
Roe-xin	83db55c790	feat(planToggle): 添加 Plan 开关组件及其集成到输入区域	2025-12-29 12:00:43 +08:00
Roe-xin	94d41c3da9	feat(modeSelector): 添加模式选择器组件并集成到输入区域	2025-12-29 11:53:59 +08:00
Roe-xin	83f9e2f005	feat(contextCompress): 添加上下文压缩组件及其集成到输入区域	2025-12-29 11:32:39 +08:00