feat: VSCode Extension Implementation #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}
…jinjing/write-and-read-file-in-vscode
packages/vscode-ide-companion/src/webview/components/layout/EmptyState.tsx
Dismissed
Show dismissed
Hide dismissed
| this.sendToWebView({ | ||
| type: 'sessionTitleUpdated', | ||
| data: { | ||
| sessionId: this.currentConversationId, |
Check failure
Code scanning / CodeQL
Insecure randomness High
There was a problem hiding this comment.
There seems to be such logic in the core directory, won't it be checked by github?
yiliang114
changed the title
…onfigurations - Remove .claude from .gitignore - Update CSS file path in eslint config - Simplify VS Code extension title - Remove unused keybinding for openChat command - Delete unused auth constants file - Simplify ACP connection by removing backend parameter - Move authMethod to acpTypes - Restrict ACP backend to Qwen only - Remove backend property from connection state - Minor formatting update in webview index.tsx
…ve mode handling - Create new approvalModeTypes.ts with ApprovalMode enum and helper functions - Replace hardcoded string literals with ApprovalModeValue type - Consolidate mode mapping logic using new helper functions
… past conversations - Add rehydratingSessionId flag to track session loading state - Route message chunks as discrete messages during rehydration instead of streaming - Update session handlers to properly manage conversation switching - Improve session manager documentation
…ening - Ignore messages during checkpoint saves in WebViewProvider - Move diff auto-opening logic from useEffect to useWebViewMessages hook - Remove unused imports and variables in EditToolCall component - Enhance tool call handling for edit operations with diff content
- Remove commented out error handling code in acpMessageHandler - Simplify session update handler by removing redundant comments - Clean up chat types interface definitions - Simplify null check in MessageRouter - Improve type safety in SettingsMessageHandler with ApprovalModeValue type
- Remove max-width constraint from EmptyState component wrapper - Improve responsive layout for empty state view
…pability - Add overloaded showDiff method to support calling with only newContent - Implement readOldContentFromFs helper to read existing file content - Simplify IDE server openDiff tool to use minimal call site - Improve diff manager documentation and code clarity
- Add NEXT_APPROVAL_MODE constant for cyclic mode mapping - Remove 'plan' mode from public toggle sequence - Simplify handleToggleEditMode implementation using NEXT_APPROVAL_MODE mapping - Update import statements to include NEXT_APPROVAL_MODE - Remove unused comment about plan mode in toggle sequence
…cleanup - Add panelGroupViewColumn tracking for precise group identification - Implement improved tab capture mechanism with delayed execution - Add robust group cleanup logic to close empty locked columns - Implement focusGroupByColumn helper for reliable group focusing - Add proper error handling and fallback mechanisms for group operations
- Remove redundant file reading logic from ide-server - Leverage diffManager's new capability to read old content internally - Simplify openDiff tool call site to pass only newContent - Update comments to reflect the simplified implementation
yiliang114
changed the title
…endency and improve cli version checking with semver package
…ui improvements chore(vscode-ide-companion): remove unused todo comment in auth state manager
pump versionm to 0.4.1 (QwenLM#1177)
…tViaCommand method refactor(vscode-ide-companion/webview): improve message handling during checkpoint saves feat(vscode-ide-companion/markdown): enhance file path link handling with line numbers support feat(vscode-ide-companion/message): add enableFileLinks prop to MessageContent component feat(vscode-ide-companion/user-message): disable file links in user messages
|
@yiliang114 Awesome work — this feature is super exciting! I've tested it thoroughly and everything works perfectly. This is going to be a huge help for so many IDE users. Thanks a ton for your contribution! |
3 participants
TLDR
qwen-code-12.10.0.4.1.1.mp4
This PR implements a comprehensive VSCode extension for Qwen Code, providing a full-featured chat interface with ACP (Agent Communication Protocol) integration. The extension enables seamless interaction with Qwen Code CLI through a modern UI, featuring file system operations, session management, real-time tool call visualization, permission controls, and extensive UI/UX improvements. This work transforms Qwen Code from a CLI-only tool into a fully integrated IDE experience.
Dive Deeper
Background
This PR introduces the VSCode IDE companion extension for Qwen Code, building upon the existing CLI tool to provide a graphical interface for AI-assisted coding. The extension implements the full ACP protocol, allowing users to interact with Qwen Code's capabilities directly within VSCode, with visual feedback, permission controls, and session management.
Core Feature Changes
Implemented Features:
acpConnection.ts)initialize,session/create,session/list,session/load,session/save,permission/request,permission/respondfs/read_text_file,fs/write_text_filesession/updatenotificationsTechnical Implementation:
chat --acpmodeReviewer Test Plan
Quick Start
Debugging Options:
cd packages/vscode-ide-companion, open in VSCode, select "Run Extension", press F5Note: The pre-launch task automatically compiles the extension. No manual build required.
Key Test Scenarios
1. CLI Detection & Installation
Test: Extension activation without CLI installed
2. ACP Connection & Session Management
Test: Create and manage chat sessions
3. File Operations & Permissions
Test: File read/write with permission control
4. Tool Call Visualization
Test: Real-time tool call status updates
5. Permission Approval Modes
Test: Cycle through approval modes
6. Authentication & Caching
Test: Auth token persistence
7. Markdown Rendering & Code Blocks
Test: Rich text and code display
8. Error Handling & Recovery
Test: Graceful error handling
9. UI Responsiveness & Theming
Test: Visual adaptation
10. Session History & Rehydration
Test: Load historical conversations
Testing Matrix
Extension Development & Debugging
Testing Coverage:
Note: This PR focuses on the VSCode extension package. The extension runs within VSCode's extension host, so traditional runtime testing (npm run, Docker, etc.) applies only to the CLI tool, not the extension itself.
Feature Checklist
✅ Completed Features
Core Infrastructure:
UI/UX Components (70+ components):
Developer Experience:
Testing & Quality:
🚧 Pending Work
Testing:
Future Enhancements:
Review Focus Areas
For Reviewers
Architecture & Design:
Code Quality:
Testing:
Performance:
Security:
User Experience:
Review Checklist
Commit Summary
This PR includes 160+ commits across multiple feature branches, consolidated into the following major areas:
Core Implementation:
UI/UX Components:
Developer Experience:
Infrastructure:
Summary
This PR delivers a production-ready VSCode extension for Qwen Code, transforming the CLI tool into a full-featured IDE integration. The implementation includes:
🎯 Core Achievements: