Add File Read/Write Support and Enhanced UI to VSCode Extension #1059
Conversation
- 新增 fs/read_text_file 和 fs/write_text_file 方法处理 - 实现精美的 Claude 风格权限请求 UI - 优化权限请求处理逻辑，支持取消操作 - 添加日志输出以便调试
- 重构 QwenAgentManager 类,支持处理多种类型的消息更新 - 改进权限请求界面,增加详细信息展示和选项选择功能 - 新增工具调用卡片组件,用于展示工具调用相关信息 - 优化消息流处理逻辑,支持不同类型的内容块 - 调整会话切换和新会话创建的处理方式
- 新增 CliDetector 类用于检测 Qwen Code CLI 安装状态 - 在 WebViewProvider 中集成 CLI 检测逻辑 - 添加 CLI 未安装时的提示和安装引导功能 - 优化 agent 连接流程，增加 CLI 安装检测步骤
…/jinjing/write-and-read-file-in-vscode
📋 Review SummaryThis PR introduces comprehensive file read/write capabilities to the Qwen Code VSCode extension with significantly improved UI/UX. The changes include new ACP protocol handlers for file operations, CLI detection and auto-installation, authentication state management, and enhanced UI components for permission requests and tool call visualization. 🔍 General Feedback
🎯 Specific Feedback🔴 CriticalNo critical issues identified in this review. 🟡 High
🟢 Medium
🔵 Low
✅ Highlights
|
This reverts commit 91af599.
…/jinjing/write-and-read-file-in-vscode
…injing/implement-ui-from-cc-vscode-extension
|
This change has no impact on end users, as long as its scope is limited to the Therefore, it’s safe to merge all such commits for now. The implementation is still a bit rough, we can refine the details once the MVP version is ready. @pomelo-nwu |
- 将 WebView 调整到编辑器右侧 - 添加 ChatHeader 组件，实现会话下拉菜单 - 替换模态框为紧凑型下拉菜单 - 更新会话切换逻辑，显示当前标题 - 清理旧的会话选择器样式 基于 Claude Code v2.0.43 UI 分析实现。
- 抽离初始化代理连接逻辑到单独的方法中 - 优化面板恢复时的代理连接流程 - 移除 EmptyState 组件中的信息横幅 - 在 App 组件中添加可关闭的信息横幅 - 调整输入表单样式，移除冗余样式
- 抽离初始化代理连接逻辑到单独的方法中 - 优化面板恢复时的代理连接流程 - 移除 EmptyState 组件中的信息横幅 - 在 App 组件中添加可关闭的信息横幅 - 调整输入表单样式，移除冗余样式
…jinjing/implement-ui-from-cc-vscode-extension
- 更新文件命名规则，使用小写字母和下划线 - 修复部分代码导入路径 - 删除未使用的 WEBVIEW_PIN_FEATURE.md 文件
- 新增多个工具调用组件，分别处理不同类型的工具调用 - 优化工具调用卡片的样式和布局 - 添加加载状态和随机加载消息 - 重构 App 组件，支持新的工具调用显示逻辑
- 修改了 WebViewProvider 中的逻辑，先尝试通过 ACP 加载旧会话 - 如果加载失败，则创建新会话作为回退方案 - 在 AcpConnection 中添加了初始化响应的日志输出 - 在 QwenAgentManager 中添加了新的 loadSessionViaAcp 方法，用于测试 ACP 的 session/load 功能
- 在 esbuild.js 中添加 SCSS 文件处理逻辑 - 在 package.json 中添加 sass 依赖 - 新增代码使用 sass 编译 SCSS 文件，并将其注入到页面中
- 移动权限请求组件到抽屉中，优化用户体验 - 为权限选项添加编号，提高可识别性 - 实现错误对象的特殊处理，提取更有意义的错误信息 - 优化工具调用错误内容的展示，提高错误信息的可读性
- 实现了与 Claude Code 类似的代码编辑功能 - 添加了文件打开、保存等操作的支持 - 优化了消息显示，增加了代码高亮和文件路径点击功能 - 改进了用户界面，增加了编辑模式切换和思考模式功能
…jinjing/implement-ui-from-cc-vscode-extension
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
修复 webview 组件的类型安全问题： - App.tsx: 规范化工具调用状态为联合类型 - InProgressToolCall.tsx: 安全处理非字符串类型的 title 属性 - InputForm.tsx: 修正 RefObject 泛型类型声明 - ReadToolCall.tsx: 添加空 children 避免 ToolCallContainer 警告
…onfig files 添加测试基础设施和改进配置文件： - 添加 vitest.config.js 用于单元测试配置 - 配置测试覆盖率报告（v8 provider） - 修复 postcss.config.js 的 eslint 警告 - 设置测试环境为 Node.js
重构组件结构，优化目录组织： - 将 ChatHeader 从 ui/ 移动到 layouts/ 目录 - 删除未使用的 Button 和 Card 组件 - 更新 tailwind.config.js 扫描路径为 layouts/ - 简化组件目录结构，提高可维护性
…jinjing/write-and-read-file-in-vscode
- 移除了 pnpm-lock.yaml 文件的忽略规则 - 保留了 .claude 目录的忽略规则
Added new dependencies including: - @cfworker/json-schema - @parcel/watcher and related platform-specific packages - autoprefixer - browserslist - chokidar - Various other utility packages These updates likely support enhanced functionality and improved compatibility.
This reverts commit 530039c.
- Translate all Chinese comments in TypeScript files to English for better code readability - Update documentation comments to be in English - Maintain code functionality while improving internationalization 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add comprehensive unit tests for all CLI-related modules: - CliContextManager - CliVersionManager - cliDetector - CliInstaller - Fix ESLint issues by replacing @ts-ignore with @ts-expect-error - Fix any type issues in test files - Add tests for diff-manager functionality - Improve loading messages random selection stability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- 新增 AuthStateManager 类用于管理认证状态 - 修改 createNewSession 方法以使用缓存的认证信息 - 添加清除认证缓存的功能 - 优化登录命令处理，增加加载状态显示 - 新增登录成功和失败的消息处理
- 新增 CLI 版本检测功能，支持检测 CLI 版本并缓存结果 - 实现会话验证方法，用于检查当前会话是否有效 - 在连接处理中集成 CLI 版本检测和会话验证逻辑 - 优化 WebViewProvider 中的初始化流程，支持背景初始化 - 更新消息处理逻辑，增加与 CLI 相关的错误处理
- 将 "prepare1" 命令重命名为 "prepare"，以提高可读性和一致性 - 优化了包生成流程，确保在构建前生成必要的 notices
- 新增 session/list 方法支持 - 改进 session/load 方法兼容性 - 优化代理环境变量设置 - 调整 CLI 安装流程 - 移除未使用的随机加载消息功能
- 添加时间戳支持，确保消息按时间顺序排列 - 更新工具调用处理逻辑，自动添加和保留时间戳 - 修改消息渲染逻辑，将所有类型的消息合并排序后统一渲染 - 优化完成的工具调用显示，修复显示顺序问题 - 调整进行中的工具调用显示，统一到消息流中展示 - 移除重复的计划展示逻辑，避免最新块重复出现 - 重构消息处理和渲染代码，提高可维护性
| this.sendToWebView({ | ||
| type: 'sessionTitleUpdated', | ||
| data: { | ||
| sessionId: this.currentConversationId, |
Check failure
Code scanning / CodeQL
Insecure randomness High
- 移除未使用的依赖项 qwen-code - 优化 completion 刷新逻辑，避免渲染循环 - 更新 CompletionMenu 组件，增加空状态提示
- 移除旧的消息排序改进总结文档 - 重新组织消息渲染逻辑，合并所有类型的消息按时间戳排序 - 优化工具调用处理流程，添加时间戳支持 - 改进会话保存机制，直接使用SessionManager保存检查点 - 重构部分组件以提高可维护性
… updating dependencies
…er 按钮样式 - 在 tailwind.css 中正确定义可重用的 Tailwind 组件类 - 修复 ChatHeader 组件中的按钮样式，确保 hover 效果正常工作 - 修复 ESLint 配置中的 importPlugin 导入问题 - 清理 App.css 中重复的 CSS 变量定义 - 为 btn-ghost 类设置 4px border radius - 为按钮内的 span 添加左右 4px padding (使用 px-1) - 确保按钮 hover 时有背景色效果
…ve session temporarily
2 participants
TLDR
Adds comprehensive file read/write capabilities to the Qwen Code VSCode extension with significantly improved UI/UX. This PR implements file system operations via ACP protocol, automatic CLI detection and installation, visual permission requests, real-time tool call display, and authentication caching. The extension now provides a more seamless and user-friendly experience for interacting with the file system through Qwen Code.
Dive Deeper
Background
The current branch is based on #1056 and can wait for the previous PR to be merged. This PR builds upon the foundation to add essential file system capabilities and significantly improve the user experience with better visual feedback and interaction patterns.
Core Feature Changes
1. File Read/Write Support (
fs/read_text_file&fs/write_text_file)Implemented Features:
AcpConnection.tsTechnical Implementation:
offsetandlimitparameters for large files2. CLI Detection and Auto-Installation
Implemented Features:
CliDetectorutility class for automatic Qwen CLI detectionnpm install -g @qwen-code/qwen-codeUser Flow:
3. Authentication State Management
Implemented Features:
AuthStateManagerclass for managing authentication cacheqwenCode.clearAuthCachecommand for manual cache clearingBenefits:
4. Major UI/UX Improvements
Permission Request Component (
PermissionRequest.tsx)Features:
Tool Call Component (
ToolCall.tsx)Features:
pending/in_progress/completed/failedEnhanced Styling System
Features:
5. Session Management Improvements
Implemented Features:
6. Build Configuration Optimizations
Changes:
jsx: 'automatic').tsxfilesjsxImportSourceconfiguration7. Documentation Updates
Changes:
packages/vscode-ide-companion/README.md):README.md):PR-1059-description.md):Technical Details
Key Modified Files
Core Feature Files
packages/vscode-ide-companion/src/acp/AcpConnection.ts- Added file read/write protocol handlerspackages/vscode-ide-companion/src/auth/AuthStateManager.ts- New authentication cache managementpackages/vscode-ide-companion/src/utils/CliDetector.ts- New CLI detection utilitypackages/vscode-ide-companion/src/agents/QwenAgentManager.ts- Improved connection and authentication logicpackages/vscode-ide-companion/src/WebViewProvider.ts- Major refactoring with CLI detection, tool calls, and permission handlingUI Components
packages/vscode-ide-companion/src/webview/components/PermissionRequest.tsx- New permission request componentpackages/vscode-ide-companion/src/webview/components/ToolCall.tsx- New tool call display componentpackages/vscode-ide-companion/src/webview/App.tsx- Integrated new components with improved state managementpackages/vscode-ide-companion/src/webview/App.css- Added extensive styling supportConfiguration Files
packages/vscode-ide-companion/package.json- Added new commandspackages/vscode-ide-companion/esbuild.js- JSX configuration updatespackages/vscode-ide-companion/eslint.config.mjs- TSX supportpackages/vscode-ide-companion/tsconfig.json- JSX configurationpackages/vscode-ide-companion/README.md- Added comprehensive debugging guide with two approaches, debug config clarifications, and keyboard shortcutsREADME.md- Added brief VS Code Extension section with link to extension READMEReviewer Test Plan
Test Environment Setup
Clone and checkout to this branch
Install dependencies (first time only)
Start debugging (see updated README for details)
Option A: Debug from Project Root (Recommended)
packages/vscode-ide-companion/src/extension.tsfileCtrl+Shift+D/Cmd+Shift+D)F5to launch Extension Development HostOption B: Debug from Extension Directory
src/extension.tsfileCtrl+Shift+D/Cmd+Shift+D)F5to launch Extension Development HostTest Scenarios
Scenario 1: CLI Not Installed Behavior
Steps:
which qwen # If found, temporarily rename: sudo mv $(which qwen) $(which qwen).bakCleanup:
# Restore CLI if renamed: sudo mv $(which qwen).bak $(which qwen)Scenario 2: File Reading
Steps:
Please read the package.json file in this projectScenario 3: File Writing
Steps:
Please create a test.txt file in the project root with content "Hello Qwen"Cleanup:
Scenario 4: Permission Request UI
Steps:
Scenario 5: Tool Call Display
Steps:
Read README.mdCreate a new file called test.jsAdd a comment to the top of package.jsonScenario 6: Session Management
Steps:
Scenario 7: Authentication Caching
Steps:
Qwen Code: Clear Authentication CacheScenario 8: File Diff Visualization
Steps:
Add a comment "// Main entry point" at the top of the main TypeScript fileScenario 9: Error Handling
Steps:
Read the file that-does-not-exist.txtScenario 10: UI Responsiveness
Steps:
Performance Testing
Steps:
Testing Matrix
Extension Development & Debugging
Runtime Testing
Testing Notes:
Feature Checklist
Core Features
fs/read_text_file)fs/write_text_file)CLI Detection & Installation
CliDetector)Authentication Management
AuthStateManager)UI Components
PermissionRequest.tsx)ToolCall.tsx)Session Management
Build & Configuration
jsx: 'automatic'in esbuild.js).tsxfilesjsx: "react-jsx"in tsconfig.json)Testing & Quality
Documentation
Ctrl+Shift+D/Cmd+Shift+D)Known Issues & Future Work
Known Issues
Security Concern: Automatic directory creation in write operations could be misused
Hardcoded Cache Duration: Authentication cache duration is hardcoded to 24 hours
Global Installation Requirement: CLI installation requires
npm install -gwith elevated permissionsFuture Enhancements
Linked issues / bugs
Related to #1056 (depends on this PR being merged first)
This PR makes progress on improving the VSCode extension's file system capabilities and user experience. It lays the foundation for more advanced features in future PRs.
Review Notes
For Reviewers
Merge Guidelines
As noted by @tanzhenxin: "This change has no impact on end users, as long as its scope is limited to the vscode-ide-companion package—and we don't plan to publish new release to the VS Code Marketplace. Therefore, it's safe to merge all such commits for now. The implementation is still a bit rough, we can refine the details once the MVP version is ready."
Commit History
This PR includes 12 commits with the following highlights:
Summary
This PR successfully adds comprehensive file system capabilities and significantly improves the user experience of the VSCode extension through: