wip(vscode-ide-companion): 实现 quick win 功能

- 将 WebView 调整到编辑器右侧
- 添加 ChatHeader 组件，实现会话下拉菜单
- 替换模态框为紧凑型下拉菜单
- 更新会话切换逻辑，显示当前标题
- 清理旧的会话选择器样式
基于 Claude Code v2.0.43 UI 分析实现。

TODO_QUICK_WIN_FEATURES.md

@@ -0,0 +1,563 @@
+# Quick Win 功能迁移 - 任务清单
+
+> **项目**: 从 Claude Code VSCode Extension 迁移 UI 功能到 vscode-ide-companion
+>
+> **开始日期**: 2025-11-18
+>
+> **预计完成**: 2025-11-19
+
+---
+
+## 📋 任务概览
+
+| 阶段     | 状态      | 完成度 |
+| -------- | --------- | ------ |
+| 需求分析 | ✅ 完成   | 100%   |
+| 代码实现 | ✅ 完成   | 100%   |
+| 手动测试 | ⏳ 进行中 | 0%     |
+| 代码审查 | ⏳ 待开始 | 0%     |
+| 文档更新 | ✅ 完成   | 100%   |
+
+---
+
+## ✅ 已完成的任务
+
+### 阶段 1: 需求分析与技术调研 (已完成)
+
+- [x] 分析 Claude Code v2.0.43 压缩代码
+- [x] 提取 HTML 结构和 CSS 样式
+- [x] 通过字符串锚点定位混淆的 JS 代码
+- [x] 创建技术分析文档
+  - [x] `docs-tmp/CLAUDE_CODE_DEEP_ANALYSIS.md`
+  - [x] `docs-tmp/EXTRACTABLE_CODE_FROM_CLAUDE.md`
+  - [x] `docs-tmp/HTML_TO_JS_MAPPING.md`
+  - [x] `MIGRATION_FEASIBILITY.md`
+
+### 阶段 2: Quick Win 功能实现 (已完成)
+
+#### 2.1 WebView 位置调整
+
+- [x] 修改 `WebViewProvider.ts` 中的 ViewColumn
+  - **位置**: `src/WebViewProvider.ts:89`
+  - **改动**: `vscode.ViewColumn.One` → `vscode.ViewColumn.Beside`
+  - **测试**: 需要验证 WebView 是否在编辑器右侧打开
+
+#### 2.2 ChatHeader 组件开发
+
+- [x] 创建 ChatHeader 组件文件
+  - [x] `src/webview/components/ChatHeader.tsx` (217 行)
+  - [x] `src/webview/components/ChatHeader.css` (193 行)
+- [x] 实现核心功能
+  - [x] Session 下拉选择器（左侧）
+  - [x] 当前 Session 标题显示
+  - [x] 下拉菜单动画效果
+  - [x] 时间格式化（相对时间）
+  - [x] 新建 Session 按钮（右侧）
+  - [x] Spacer 布局
+- [x] 交互功能
+  - [x] 点击外部关闭下拉菜单
+  - [x] Escape 键关闭下拉菜单
+  - [x] 悬停高亮效果
+  - [x] Session 切换功能
+
+#### 2.3 后端集成
+
+- [x] 更新 `WebViewProvider.ts`
+  - [x] 获取 session 详情逻辑 (line 659-669)
+  - [x] 发送 session 数据到 WebView (line 697-700)
+- [x] 更新 `App.tsx`
+  - [x] 添加 `currentSessionTitle` 状态 (line 58-60)
+  - [x] 移除旧的模态框代码 (删除 279-338 行)
+  - [x] 集成 ChatHeader 组件 (line 289-303)
+  - [x] 更新 session 切换处理逻辑 (line 218-226)
+- [x] 清理 `App.css`
+  - [x] 删除旧的 session selector 样式 (删除 158 行)
+
+#### 2.4 文档编写
+
+- [x] 创建实现总结文档
+  - [x] `IMPLEMENTATION_SUMMARY.md` (306 行)
+- [x] 创建任务清单文档
+  - [x] `TODO_QUICK_WIN_FEATURES.md` (本文件)
+
+---
+
+## ⏳ 待完成的任务
+
+### 阶段 3: 测试验证 (优先级: P0 - 必须)
+
+#### 3.1 本地构建测试
+
+```bash
+# 在项目根目录执行
+cd /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code
+npm run build
+```
+
+**验收标准**:
+
+- [ ] 构建成功，没有 TypeScript 错误
+- [ ] 生成的 dist 文件完整
+- [ ] 没有 ESLint 警告（可忽略已存在的错误）
+
+**预计时间**: 5 分钟
+
+---
+
+#### 3.2 VSCode 调试测试
+
+```bash
+# 在 VSCode 中按 F5 启动调试
+# 或者通过命令面板: Debug: Start Debugging
+```
+
+**测试检查清单**:
+
+##### A. WebView 位置测试
+
+- [ ] 打开一个代码文件
+- [ ] 触发 WebView 打开命令
+- [ ] ✅ **验证**: WebView 应该在编辑器右侧打开
+- [ ] ✅ **验证**: 代码编辑器和 WebView 可以同时看到
+- [ ] 测试边界情况:
+  - [ ] 没有打开文件时打开 WebView
+  - [ ] 已有分屏编辑器时打开 WebView
+
+##### B. ChatHeader 显示测试
+
+- [ ] WebView 打开后，检查 Header 区域
+- [ ] ✅ **验证**: Header 显示在顶部
+- [ ] ✅ **验证**: 左侧显示 "Past Conversations" 或当前 Session 标题
+- [ ] ✅ **验证**: 右侧显示加号按钮
+- [ ] ✅ **验证**: 布局正确（左中右三栏）
+
+##### C. Session 下拉菜单测试
+
+- [ ] 点击左侧的 Session 按钮
+- [ ] ✅ **验证**: 下拉菜单应该显示
+- [ ] ✅ **验证**: 下拉菜单有淡入动画
+- [ ] ✅ **验证**: 菜单内容:
+  - [ ] 顶部显示 "Recent Sessions"
+  - [ ] 右上角有 "New" 按钮
+  - [ ] 显示 Session 列表（如果有）
+- [ ] 测试交互:
+  - [ ] 悬停在 Session 项上，应该高亮
+  - [ ] 点击 Session 项，应该切换并关闭菜单
+  - [ ] 点击菜单外部，应该关闭菜单
+  - [ ] 按 Escape 键，应该关闭菜单
+
+##### D. 新建 Session 测试
+
+- [ ] 点击右侧的加号按钮
+- [ ] ✅ **验证**: 创建新 Session
+- [ ] ✅ **验证**: 消息列表清空
+- [ ] ✅ **验证**: Header 标题更新为 "Past Conversations" 或清空
+
+##### E. Session 切换测试
+
+- [ ] 创建多个 Session（发送不同的消息）
+- [ ] 打开 Session 下拉菜单
+- [ ] ✅ **验证**: 显示多个 Session 项
+- [ ] ✅ **验证**: 每个 Session 显示:
+  - [ ] Session 标题
+  - [ ] 时间（例如 "5m ago"）
+  - [ ] 消息数量（例如 "3 messages"）
+- [ ] 点击切换到另一个 Session
+- [ ] ✅ **验证**: Header 标题更新为当前 Session
+- [ ] ✅ **验证**: 消息列表加载正确的历史消息
+
+##### F. 长标题处理测试
+
+- [ ] 创建一个有很长标题的 Session
+- [ ] ✅ **验证**: 标题应该被截断，显示省略号（...）
+- [ ] ✅ **验证**: 悬停时应该显示完整标题（通过 title 属性）
+
+##### G. 主题兼容性测试
+
+- [ ] 切换到浅色主题 (Light Theme)
+- [ ] ✅ **验证**: 所有颜色和对比度正确
+- [ ] 切换到深色主题 (Dark Theme)
+- [ ] ✅ **验证**: 所有颜色和对比度正确
+- [ ] 测试其他主题（可选）
+
+##### H. 响应式测试
+
+- [ ] 调整 WebView 宽度
+- [ ] ✅ **验证**: Header 布局不应该错乱
+- [ ] ✅ **验证**: 下拉菜单宽度自适应
+- [ ] ✅ **验证**: Session 标题在窄屏下正确截断
+
+**预计时间**: 30-45 分钟
+
+---
+
+#### 3.3 问题记录与修复
+
+**发现的问题** (在测试过程中填写):
+
+| 序号 | 问题描述 | 严重程度 | 状态 | 修复说明 |
+| ---- | -------- | -------- | ---- | -------- |
+| 1    |          |          |      |          |
+| 2    |          |          |      |          |
+| 3    |          |          |      |          |
+
+**严重程度定义**:
+
+- 🔴 P0: 阻断问题，必须修复
+- 🟡 P1: 重要问题，建议修复
+- 🟢 P2: 次要问题，可延后修复
+
+---
+
+### 阶段 4: 代码审查与优化 (优先级: P1 - 建议)
+
+#### 4.1 代码审查检查清单
+
+- [ ] 代码风格符合项目规范
+- [ ] TypeScript 类型定义完整
+- [ ] 没有 console.log 调试语句
+- [ ] 没有注释掉的代码
+- [ ] 变量命名清晰有意义
+- [ ] 函数复杂度合理（单个函数 < 50 行）
+- [ ] CSS 类名符合 BEM 规范
+- [ ] 没有重复代码
+
+#### 4.2 性能优化检查
+
+- [ ] 事件监听器正确清理
+- [ ] useEffect 依赖数组正确
+- [ ] 没有不必要的重渲染
+- [ ] CSS 动画使用 GPU 加速属性
+
+#### 4.3 可访问性检查
+
+- [ ] 按钮有合适的 title 属性
+- [ ] 图标有 aria-hidden 属性
+- [ ] 键盘导航功能正常
+- [ ] 焦点状态可见
+
+**预计时间**: 1-2 小时
+
+---
+
+### 阶段 5: 文档完善 (优先级: P1 - 建议)
+
+#### 5.1 代码注释
+
+- [ ] ChatHeader.tsx 添加关键逻辑注释
+- [ ] App.tsx 更新相关注释
+- [ ] WebViewProvider.ts 更新注释
+
+#### 5.2 用户文档
+
+- [ ] 更新 README.md（如果需要）
+- [ ] 添加使用说明（如果需要）
+- [ ] 添加截图或 GIF 演示（可选）
+
+**预计时间**: 30 分钟
+
+---
+
+### 阶段 6: 代码提交与合并 (优先级: P0 - 必须)
+
+#### 6.1 Git 提交
+
+```bash
+# 1. 查看修改
+git status
+git diff
+
+# 2. 添加文件
+git add packages/vscode-ide-companion/src/webview/components/ChatHeader.tsx
+git add packages/vscode-ide-companion/src/webview/components/ChatHeader.css
+git add packages/vscode-ide-companion/src/webview/App.tsx
+git add packages/vscode-ide-companion/src/webview/App.css
+git add packages/vscode-ide-companion/src/WebViewProvider.ts
+git add IMPLEMENTATION_SUMMARY.md
+git add TODO_QUICK_WIN_FEATURES.md
+
+# 3. 提交
+git commit -m "feat(vscode-ide-companion): implement Quick Win features
+
+- Move WebView to right side (ViewColumn.Beside)
+- Add ChatHeader component with session dropdown
+- Replace modal with compact dropdown menu
+- Update session switching to show current title
+- Clean up old session selector styles
+
+Based on Claude Code v2.0.43 UI analysis.
+
+🤖 Generated with Claude (Sonnet 4.5)
+Co-Authored-By: Claude <noreply@anthropic.com>"
+```
+
+**检查清单**:
+
+- [ ] 所有修改的文件已添加到暂存区
+- [ ] 提交信息清晰描述改动
+- [ ] 提交信息包含 Co-Authored-By
+- [ ] 没有包含不相关的修改
+
+#### 6.2 推送到远程
+
+```bash
+# 推送到当前分支
+git push origin feat/jinjing/implement-ui-from-cc-vscode-extension
+```
+
+#### 6.3 创建 Pull Request（如果需要）
+
+- [ ] 在 GitHub 创建 Pull Request
+- [ ] 填写 PR 描述（参考 IMPLEMENTATION_SUMMARY.md）
+- [ ] 添加测试截图或视频
+- [ ] 请求代码审查
+
+**预计时间**: 15 分钟
+
+---
+
+## 🎯 未来增强功能 (可选)
+
+### P1 - 高优先级（建议在 1-2 周内完成）
+
+#### 功能增强
+
+- [ ] **Session 搜索/过滤**
+  - [ ] 添加搜索框到下拉菜单
+  - [ ] 实时过滤 Session 列表
+  - [ ] 支持搜索 Session 标题和 ID
+  - **预计时间**: 2-3 小时
+
+- [ ] **键盘导航增强**
+  - [ ] ArrowUp/ArrowDown 在 Session 列表中导航
+  - [ ] Enter 键选择当前高亮的 Session
+  - [ ] Tab 键在 UI 元素间切换
+  - **预计时间**: 1-2 小时
+
+- [ ] **Session 图标**
+  - [ ] 在下拉按钮中添加 Session 图标
+  - [ ] 在列表项中添加图标
+  - **预计时间**: 30 分钟
+
+#### Bug 修复
+
+- [ ] **修复已存在的 TypeScript 错误**
+  - [ ] `QwenAgentManager.onToolCall` 类型定义
+  - [ ] `update` 参数类型定义
+  - [ ] `currentSessionId` 属性定义
+  - **位置**: `src/WebViewProvider.ts:44, 233`
+  - **预计时间**: 1 小时
+
+---
+
+### P2 - 中等优先级（可在 1 个月内完成）
+
+#### Session 管理增强
+
+- [ ] **删除 Session**
+  - [ ] 在列表项添加删除按钮
+  - [ ] 确认对话框
+  - [ ] 删除后更新列表
+  - **预计时间**: 2 小时
+
+- [ ] **重命名 Session**
+  - [ ] 内联编辑功能
+  - [ ] 双击标题进入编辑模式
+  - [ ] Enter 保存，Escape 取消
+  - **预计时间**: 3 小时
+
+- [ ] **Session 分组**
+  - [ ] 按日期分组（今天、昨天、上周）
+  - [ ] 添加分组标题
+  - [ ] 折叠/展开分组
+  - **预计时间**: 4 小时
+
+#### UI 优化
+
+- [ ] **Session 预览**
+  - [ ] 在列表项显示第一条消息预览
+  - [ ] 限制预览长度
+  - [ ] 悬停显示完整预览
+  - **预计时间**: 2 小时
+
+- [ ] **动画优化**
+  - [ ] 优化下拉菜单动画曲线
+  - [ ] 添加列表项滑入动画
+  - [ ] 添加加载指示器
+  - **预计时间**: 1-2 小时
+
+---
+
+### P3 - 低优先级（可选功能）
+
+#### 高级功能
+
+- [ ] **Session 标签/标记**
+  - [ ] 为 Session 添加标签
+  - [ ] 按标签过滤
+  - [ ] 标签管理界面
+  - **预计时间**: 6-8 小时
+
+- [ ] **导出 Session**
+  - [ ] 导出为 Markdown
+  - [ ] 导出为 JSON
+  - [ ] 导出为 PDF
+  - **预计时间**: 4-6 小时
+
+- [ ] **Session 收藏/置顶**
+  - [ ] 收藏重要 Session
+  - [ ] 置顶功能
+  - [ ] 收藏列表单独显示
+  - **预计时间**: 3-4 小时
+
+#### 测试
+
+- [ ] **单元测试**
+  - [ ] ChatHeader 组件测试
+  - [ ] Session 切换逻辑测试
+  - [ ] 下拉菜单交互测试
+  - **预计时间**: 4-6 小时
+
+- [ ] **E2E 测试**
+  - [ ] 完整用户流程测试
+  - [ ] 截图对比测试
+  - **预计时间**: 6-8 小时
+
+---
+
+## 📊 时间估算
+
+### 核心任务（必须完成）
+
+| 任务     | 状态 | 预计时间       | 实际时间 |
+| -------- | ---- | -------------- | -------- |
+| 需求分析 | ✅   | 2h             | ~2h      |
+| 代码实现 | ✅   | 4h             | ~4h      |
+| 测试验证 | ⏳   | 0.5-1h         | -        |
+| 代码审查 | ⏳   | 1-2h           | -        |
+| 提交合并 | ⏳   | 0.25h          | -        |
+| **总计** |      | **7.75-9.25h** | **~6h**  |
+
+### 可选增强（未来计划）
+
+| 优先级 | 功能数量 | 预计时间 |
+| ------ | -------- | -------- |
+| P1     | 4 项     | 5-7h     |
+| P2     | 5 项     | 12-15h   |
+| P3     | 6 项     | 23-32h   |
+
+---
+
+## 🐛 已知问题
+
+### 阻断问题 (P0)
+
+_无_
+
+### 重要问题 (P1)
+
+1. **TypeScript 类型错误**（已存在，非本次改动引入）
+   - 位置: `src/WebViewProvider.ts:44, 233`
+   - 影响: 编译时有警告
+   - 优先级: P1
+   - 计划: 单独修复
+
+### 次要问题 (P2)
+
+_待测试后填写_
+
+---
+
+## 📝 测试报告模板
+
+测试完成后，请在此记录测试结果:
+
+### 测试环境
+
+- **操作系统**: macOS / Windows / Linux
+- **VSCode 版本**:
+- **Node.js 版本**:
+- **测试日期**:
+
+### 测试结果摘要
+
+- **通过测试项**: **_ / _**
+- **失败测试项**: \_\_\_
+- **跳过测试项**: \_\_\_
+
+### 详细测试记录
+
+_测试完成后，将上面 "待完成的任务 > 阶段 3.2" 中的检查清单复制到这里，并标记测试结果_
+
+### 发现的问题
+
+_参考 "阶段 3.3 问题记录与修复" 中的表格_
+
+---
+
+## ✅ 完成标准
+
+### 核心功能验收
+
+- [ ] WebView 在编辑器右侧正确打开
+- [ ] ChatHeader 正确显示和布局
+- [ ] Session 下拉菜单功能完整
+- [ ] Session 切换正常工作
+- [ ] 新建 Session 功能正常
+- [ ] 没有明显的 UI 错误或闪烁
+
+### 代码质量验收
+
+- [ ] 构建无错误
+- [ ] 代码通过 Lint 检查
+- [ ] 类型定义完整
+- [ ] 没有内存泄漏（事件监听器正确清理）
+
+### 文档验收
+
+- [ ] IMPLEMENTATION_SUMMARY.md 完整
+- [ ] TODO_QUICK_WIN_FEATURES.md 更新
+- [ ] 代码注释充分
+
+### 用户体验验收
+
+- [ ] 操作流畅，无卡顿
+- [ ] 界面美观，与 VSCode 风格一致
+- [ ] 交互符合用户预期
+- [ ] 键盘导航正常
+
+---
+
+## 📞 联系人
+
+**实现者**: Claude (Sonnet 4.5)
+**项目负责人**: @jinjing
+**代码审查**: _待指定_
+
+---
+
+## 📌 备注
+
+### 设计参考
+
+- 基于 Claude Code v2.0.43 完整分析
+- 参考文档:
+  - `docs-tmp/HTML_TO_JS_MAPPING.md`
+  - `docs-tmp/EXTRACTABLE_CODE_FROM_CLAUDE.md`
+  - `IMPLEMENTATION_SUMMARY.md`
+
+### Git 分支
+
+- 当前分支: `feat/jinjing/implement-ui-from-cc-vscode-extension`
+- 目标分支: `main`
+
+### 相关 Issue
+
+- _如果有 GitHub Issue，在此链接_
+
+---
+
+**文档版本**: v1.0
+**创建日期**: 2025-11-18
+**最后更新**: 2025-11-18
+**文档状态**: 📝 进行中