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}
| <div className="empty-state-logo"> | ||
| {iconUri && ( | ||
| <img | ||
| src={iconUri} |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
- 在主 README 中添加 VS Code 扩展部分，介绍扩展的功能和用途 - 更新 VS Code 扩展的 README，详细说明调试和开发指南 - 优化扩展开发流程说明，提供两种调试选项
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: