feat(vscode-ide-companion): import chat chat customEditor to vscode extension folder

[yiliang114]

Pull Request: Add Chat Interface to VSCode IDE Companion

TLDR

Added Chat interface to VSCode IDE Companion with support for interactive conversations with Qwen CLI, session management, and streaming responses.

Key Changes:

• Added WebView-based Chat UI with communication to Qwen CLI
• Support for viewing, switching, and managing session lists
• Real-time streaming message display

Dive Deeper

New Modules:

• packages/vscode-ide-companion/src/acp/AcpConnection.ts - ACP JSON-RPC protocol implementation
• packages/vscode-ide-companion/src/agents/QwenAgentManager.ts - Qwen Agent lifecycle management
• packages/vscode-ide-companion/src/services/QwenSessionReader.ts - Read local Qwen session files (~/.qwen/tmp/)
• packages/vscode-ide-companion/src/storage/ConversationStore.ts - Conversation history persistence (VSCode GlobalState)
• packages/vscode-ide-companion/src/WebViewProvider.ts - WebView lifecycle management
• packages/vscode-ide-companion/src/webview/ - React chat UI components

Build Configuration:

• Updated esbuild.js to support dual-entry bundling (extension + webview)
• Configured CSS injection plugin for stylesheet handling
• Using React 18's new JSX transform (jsx: "react-jsx")

Reviewer Test Plan

Testing Matrix

Prerequisites

1. Ensure Qwen CLI is installed: npm install -g @qwen/qwen-code
2. Configure Qwen authentication (OpenAI API Key or Qwen OAuth)

Test Steps

1. Basic Functionality Test

Build Extension

cd packages/vscode-ide-companion
npm run build

2. Session Management Test

• Click "📋 Sessions" button
• Verify existing session list is displayed
• Click "➕ New Session" to create a new session
• Switch to a historical session and verify messages load correctly

3. Tool Permission Test

• Send a request requiring file operations: "Create a new file hello.txt"
• Verify permission request popup appears
• Test allow/reject functionality

	🍏	🪟	🐧
npm run	✅	❓	❓
npx	❓	❓	❓
Docker	❓	❓	❓
Podman	❓	-	-
Seatbelt	❓	-	-

Linked issues / bugs

[github-actions]

📋 Review Summary

This PR introduces a significant new feature to the VSCode IDE Companion extension: a chat interface for interacting with the Qwen CLI. The implementation includes a React-based webview UI, ACP (Agent Communication Protocol) connection handling, session management, and conversation persistence. Overall, this is a well-structured addition that enhances the extension's capabilities.

🔍 General Feedback

• The code is well-organized with clear separation of concerns between the extension backend and webview frontend
• Good use of TypeScript for type safety throughout the implementation
• Proper error handling and logging in the ACP connection layer
• Clean React implementation with appropriate use of hooks and state management
• Good attention to UI/UX details in the chat interface with smooth animations and responsive design

🎯 Specific Feedback

🔴 Critical

No critical issues identified in this review.

🟡 High

No high priority issues identified in this review.

🟢 Medium

• File: packages/vscode-ide-companion/src/acp/AcpConnection.ts:135 - The timeout duration for session/prompt requests is hardcoded to 120000ms. Consider making this configurable or using a more adaptive approach based on the complexity of the prompt.

• File: packages/vscode-ide-companion/src/agents/QwenAgentManager.ts:70 - The fallback authentication method is hardcoded to 'qwen-oauth'. Consider making this configurable or detecting the appropriate method based on available configuration.

• File: packages/vscode-ide-companion/src/services/QwenSessionReader.ts:110 - The session title truncation length is hardcoded to 50 characters. Consider making this configurable or using a more sophisticated truncation approach that preserves word boundaries.

• File: packages/vscode-ide-companion/src/webview/App.tsx:24 - The qwenSessions state uses a generic Array<Record<string, unknown>> type. Consider defining a more specific interface for better type safety.

🔵 Low

• File: packages/vscode-ide-companion/src/acp/AcpConnection.ts:85 - The buffer handling logic could be improved to handle cases where a single JSON message spans multiple data events.

• File: packages/vscode-ide-companion/src/agents/QwenAgentManager.ts:155 - The tool call status display in handleSessionUpdate could be enhanced with more detailed status information.

• File: packages/vscode-ide-companion/src/webview/App.tsx:44 - The permission request dialog uses window.confirm which has a basic UI. Consider implementing a custom dialog for better user experience.

• File: packages/vscode-ide-companion/src/webview/App.tsx:120 - The session ID truncation to 8 characters could be made configurable or adjusted based on available space.

✅ Highlights

• Excellent implementation of the ACP protocol with proper request/response handling and timeout management
• Well-designed session management that reads from local files when the ACP protocol doesn't support session listing
• Clean React implementation with proper state management and component lifecycle handling
• Good attention to accessibility with proper ARIA attributes and semantic HTML
• Comprehensive error handling throughout the codebase with appropriate logging
• Well-structured CSS with good use of CSS variables for theming and smooth animations