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}
- 重构 PlanDisplay 组件和样式 - 更新 PermissionRequest 组件逻辑 - 增强 PermissionDrawer 样式，提升视觉体验 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- 增强 extension.ts，集成新增功能 - 优化 ide-server.ts，改进服务端逻辑 - 更新 diff-manager.ts，提升差异管理能力 - 改进 ACP 连接和消息处理 - 更新会话处理器，支持新的交互模式 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- 在 AcpConnection 和 AcpSessionManager 中添加会话保存方法 - 在 QwenAgentManager 中实现通过 ACP 和直接保存会话的功能 - 在前端添加保存会话对话框和相关交互逻辑 - 新增 QwenSessionManager 用于直接操作文件系统保存和加载会话
… styling and responsiveness
…g and SessionManager components
移除根目录的 package-lock.json 文件，采用各子包独立管理依赖的策略
添加 Tailwind CSS、PostCSS 和 Autoprefixer 配置，为渐进式采用 Tailwind CSS 做准备
添加全局 Tailwind CSS 样式文件，包含基础层、组件层和工具层
添加 shadcn/ui 基础组件库和 cn 工具函数，包括： - Button 按钮组件 - Dialog 对话框组件 - cn 类名合并工具函数
添加 Tailwind CSS 示例组件和重构的 PermissionDrawer： - TailwindDemo: 展示 Tailwind CSS 基础用法 - PermissionDrawer.tailwind: 使用 Tailwind CSS 重构的权限抽屉组件
添加 Tailwind CSS 渐进式集成文档，包括： - 渐进式采用策略文档 - 集成计划文档 - 渐进式集成指南
…onent Move info banner UI from App.tsx to dedicated component with open settings functionality. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…onent Move info banner UI from App.tsx to dedicated component with open settings functionality.
…ttps://github.com/yiliang114/qwen-code into feat/jinjing/implement-ui-from-cc-vscode-extension
BREAKING CHANGE: Login is no longer automatic when opening webview Changes: - Remove auto-login on webview open and restore - Add /login slash command for manual authentication - Add VSCode progress notification during login process - Add warning notification when user tries to chat without login - Implement pending message auto-retry after successful login - Add NotLoggedInMessage component (for future use) - Improve InfoBanner close button styling consistency User flow: 1. Open webview - no automatic login 2. Type /login or select from completion menu to login 3. Show "Logging in to Qwen Code..." progress notification 4. After login, show success message and auto-retry pending messages 5. If user tries to chat without login, show warning with "Login Now" button 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…architecture Refactor UI message rendering by extracting message types into dedicated components. Add ChatHeader component for better session management interface. - Extract message components: UserMessage, AssistantMessage, ThinkingMessage, StreamingMessage, WaitingMessage - Add ChatHeader component with session selector and action buttons - Delete MessageContent.css and consolidate styles into App.scss - Update Tailwind config for component styling - Improve message rendering with proper TypeScript typing
…e component with Claude Code styles - Extract AssistantMessage component from inline implementation - Add status prop support (default, success, error, warning, loading) - Implement bullet point indicator using CSS pseudo-elements (::before) - Use inline styles for layout to prevent Tailwind override - Add AssistantMessage.css with pseudo-element styles for different states - Import AssistantMessage.css in ClaudeCodeStyles.css Restores Claude Code DOM structure and styling: - Outer container with padding-left: 30px for bullet spacing - Bullet point colors based on status (green, red, yellow, gray) - Loading state with pulse animation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…ew on initialization - Send activeEditorChanged message with initial editor state when WebView is created - Include fileName, filePath, and selection info if available - Applied in both side panel and editor panel initialization This ensures the WebView displays the current file context immediately on load. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- 新增 InProgressToolCall 组件用于展示进行中的工具调用状态 - 重构 InputForm 为独立组件，提升代码可维护性 - 改进 tool_call_update 处理逻辑，支持创建缺失的初始工具调用 - 添加思考块（thought chunk）日志以便调试 AI 思维过程 - 更新样式以支持新的进行中工具调用卡片显示 - 在权限请求时自动创建对应的工具调用记录 ```
…e command - Replace manual checkpoint file writing with CLI's native /chat save command - Add saveCheckpointViaCommand method to use CLI's built-in save functionality - Deprecate saveSessionViaAcp as CLI doesn't support session/save ACP method - Update saveCheckpoint to delegate to CLI command for complete context preservation - Enhanced error logging in acpSessionManager session load - Mark saveSessionViaAcp as deprecated with fallback to command-based save - Fix ESLint errors: remove unused imports and catch variables, wrap case block declarations This ensures checkpoints are saved with complete session context including tool calls, leveraging CLI's native save functionality instead of manual file operations. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
| this.sendToWebView({ | ||
| type: 'sessionTitleUpdated', | ||
| data: { | ||
| sessionId: this.currentConversationId, |
Check failure
Code scanning / CodeQL
Insecure randomness High
| {/* Qwen Logo */} | ||
| <div className="empty-state-logo"> | ||
| <img | ||
| src={iconUri} |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
…uth state 优化认证流程，支持缓存认证状态避免重复认证： - 在 qwenAgentManager 中创建会话前先进行认证 - 在 qwenConnectionHandler 中检查缓存的认证状态 - 只在没有有效缓存时触发新的认证流程 - 认证失败时清除无效缓存 - 添加详细的日志记录用于调试
…in functionality 增强 WebViewProvider 的重新登录功能： - 修复 _lastEditorState 变量声明错误（const -> let） - 在强制重新登录后添加清理等待时间 - 添加登录成功/失败的 WebView 消息通知 - 改进错误处理和日志记录 - 为用户提供更好的登录状态反馈
修复 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
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: