chore(root): remove project-level React dependency configurations

test(e2e): Fix authentication status and permission drawer issues in end-to-end testing
feat(vscode-ide-companion): add a CLI Packaging Step to a Test Workflow
2026-01-19 15:26:19 +00:00 · 2026-01-19 14:46:20 +08:00 · 2026-01-19 13:04:10 +08:00 · 2026-01-19 12:45:19 +08:00 · 2026-01-19 11:44:41 +08:00 · 2026-01-19 10:54:59 +08:00
69 changed files with 8894 additions and 2692 deletions
--- a/.github/workflows/vscode-extension-test.yml
+++ b/.github/workflows/vscode-extension-test.yml
@@ -0,0 +1,279 @@
+name: 'VSCode Extension Tests'
+
+on:
+  push:
+    branches:
+      - 'main'
+      - 'release/**'
+      - feat/ide-test-ci
+    paths:
+      - 'packages/vscode-ide-companion/**'
+      - '.github/workflows/vscode-extension-test.yml'
+  pull_request:
+    branches:
+      - 'main'
+      - 'release/**'
+    paths:
+      - 'packages/vscode-ide-companion/**'
+      - '.github/workflows/vscode-extension-test.yml'
+  workflow_dispatch:
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
+  cancel-in-progress: true
+
+permissions:
+  contents: 'read'
+  checks: 'write'
+  pull-requests: 'write' # Needed to comment on PRs
+
+jobs:
+  unit-test:
+    name: 'Unit Tests'
+    runs-on: '${{ matrix.os }}'
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - 'ubuntu-latest'
+        node-version:
+          - '20.x'
+
+    steps:
+      - name: 'Checkout'
+        uses: 'actions/checkout@v4'
+
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v4'
+        with:
+          node-version: '${{ matrix.node-version }}'
+          cache: 'npm'
+
+      - name: 'Install dependencies'
+        run: 'npm ci'
+
+      - name: 'Build project'
+        run: 'npm run build'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Run unit tests'
+        run: 'npm run test:ci'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Upload coverage'
+        if: matrix.os == 'ubuntu-latest' && matrix.node-version == '20.x'
+        uses: 'actions/upload-artifact@v4'
+        with:
+          name: 'coverage-unit-test'
+          path: 'packages/vscode-ide-companion/coverage'
+
+  integration-test:
+    name: 'Integration Tests'
+    runs-on: 'ubuntu-latest'
+    needs: 'unit-test'
+    if: needs.unit-test.result == 'success'
+
+    steps:
+      - name: 'Checkout'
+        uses: 'actions/checkout@v4'
+
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v4'
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+
+      - name: 'Install dependencies'
+        run: 'npm ci'
+
+      - name: 'Build project'
+        run: 'npm run build'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Bundle CLI'
+        run: 'node scripts/prepackage.js'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Run integration tests'
+        run: 'xvfb-run -a npm run test:integration'
+        working-directory: 'packages/vscode-ide-companion'
+
+  e2e-test:
+    name: 'E2E Tests'
+    runs-on: 'ubuntu-latest'
+    needs: 'integration-test'
+    if: needs.integration-test.result == 'success'
+
+    steps:
+      - name: 'Checkout'
+        uses: 'actions/checkout@v4'
+
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v4'
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+
+      - name: 'Install dependencies'
+        run: 'npm ci'
+
+      - name: 'Install Playwright browsers'
+        run: 'npx playwright install --with-deps chromium'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Build project'
+        run: 'npm run build'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Bundle CLI'
+        run: 'node scripts/prepackage.js'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Run E2E tests'
+        run: 'xvfb-run -a npm run test:e2e'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Upload E2E test results'
+        if: always()
+        uses: 'actions/upload-artifact@v4'
+        with:
+          name: 'e2e-test-results'
+          path: 'packages/vscode-ide-companion/e2e/test-results'
+
+      - name: 'Upload Playwright report'
+        if: always()
+        uses: 'actions/upload-artifact@v4'
+        with:
+          name: 'playwright-report'
+          path: 'packages/vscode-ide-companion/e2e/playwright-report'
+
+  e2e-vscode-test:
+    name: 'VSCode E2E Tests'
+    runs-on: 'ubuntu-latest'
+    needs: 'e2e-test'
+    if: needs.e2e-test.result == 'success'
+
+    steps:
+      - name: 'Checkout'
+        uses: 'actions/checkout@v4'
+
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v4'
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+
+      - name: 'Install dependencies'
+        run: 'npm ci'
+
+      - name: 'Install Playwright browsers'
+        run: 'npx playwright install --with-deps'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Build project'
+        run: 'npm run build'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Bundle CLI'
+        run: 'node scripts/prepackage.js'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Run VSCode E2E tests'
+        run: 'xvfb-run -a npm run test:e2e:vscode'
+        working-directory: 'packages/vscode-ide-companion'
+
+      - name: 'Upload VSCode E2E test results'
+        if: always()
+        uses: 'actions/upload-artifact@v4'
+        with:
+          name: 'vscode-e2e-test-results'
+          path: 'packages/vscode-ide-companion/e2e-vscode/test-results'
+
+      - name: 'Upload VSCode Playwright report'
+        if: always()
+        uses: 'actions/upload-artifact@v4'
+        with:
+          name: 'vscode-playwright-report'
+          path: 'packages/vscode-ide-companion/e2e-vscode/playwright-report'
+
+  # Job to comment test results on PR if tests fail
+  comment-on-pr:
+    name: 'Comment PR with Test Results'
+    runs-on: 'ubuntu-latest'
+    needs: [unit-test, integration-test, e2e-test, e2e-vscode-test]
+    if: always() && github.event_name == 'pull_request' && (needs.unit-test.result == 'failure' || needs.integration-test.result == 'failure' || needs.e2e-test.result == 'failure' || needs.e2e-vscode-test.result == 'failure')
+
+    steps:
+      - name: 'Checkout'
+        uses: 'actions/checkout@v4'
+
+      - name: 'Find Comment'
+        uses: 'peter-evans/find-comment@v3'
+        id: 'find-comment'
+        with:
+          issue-number: '${{ github.event.pull_request.number }}'
+          comment-author: 'github-actions[bot]'
+          body-includes: 'VSCode Extension Test Results'
+
+      - name: 'Comment on PR'
+        uses: 'peter-evans/create-or-update-comment@v4'
+        with:
+          comment-id: '${{ steps.find-comment.outputs.comment-id }}'
+          issue-number: '${{ github.event.pull_request.number }}'
+          edit-mode: 'replace'
+          body: |
+            ## VSCode Extension Test Results
+
+            Tests have failed for this pull request. Please check the following jobs:
+
+            - Unit Tests: `${{ needs.unit-test.result }}`
+            - Integration Tests: `${{ needs.integration-test.result }}`
+            - E2E Tests: `${{ needs.e2e-test.result }}`
+            - VSCode E2E Tests: `${{ needs.e2e-vscode-test.result }}`
+
+            [Check the workflow run](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}) for details.
+
+  # Job to create an issue if tests fail when not on a PR (e.g. direct push to main)
+  create-issue:
+    name: 'Create Issue for Failed Tests'
+    runs-on: 'ubuntu-latest'
+    needs: [unit-test, integration-test, e2e-test, e2e-vscode-test]
+    if: always() && github.event_name == 'push' && (needs.unit-test.result == 'failure' || needs.integration-test.result == 'failure' || needs.e2e-test.result == 'failure' || needs.e2e-vscode-test.result == 'failure')
+
+    steps:
+      - name: 'Checkout'
+        uses: 'actions/checkout@v4'
+
+      - name: 'Create Issue'
+        uses: 'actions/github-script@v7'
+        with:
+          script: |
+            const { owner, repo } = context.repo;
+            const result = await github.rest.issues.create({
+              owner,
+              repo,
+              title: `VSCode Extension Tests Failed - ${context.sha.substring(0, 7)}`,
+              body: `VSCode Extension Tests failed on commit ${context.sha}\n\nResults:\n- Unit Tests: ${{ needs.unit-test.result }}\n- Integration Tests: ${{ needs.integration-test.result }}\n- E2E Tests: ${{ needs.e2e-test.result }}\n- VSCode E2E Tests: ${{ needs.e2e-vscode-test.result }}\n\nWorkflow run: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}`
+            });
+
+  # Summary job to pass/fail the entire workflow based on test results
+  vscode-extension-tests:
+    name: 'VSCode Extension Tests Summary'
+    runs-on: 'ubuntu-latest'
+    needs:
+      - 'unit-test'
+      - 'integration-test'
+      - 'e2e-test'
+      - 'e2e-vscode-test'
+    if: always()
+    steps:
+      - name: 'Check test results'
+        run: |
+          if [[ "${{ needs.unit-test.result }}" == "failure" ]] || \
+             [[ "${{ needs.integration-test.result }}" == "failure" ]] || \
+             [[ "${{ needs.e2e-test.result }}" == "failure" ]] || \
+             [[ "${{ needs.e2e-vscode-test.result }}" == "failure" ]]; then
+            echo "One or more test jobs failed"
+            exit 1
+          fi
+          echo "All tests passed!"
--- a/.gitignore
+++ b/.gitignore
@@ -63,3 +63,8 @@ patch_output.log
 docs-site/.next
 # content is a symlink to ../docs
 docs-site/content
+
+# vscode-ida-companion test files
+.vscode-test/
+test-results/
+e2e-vscode/
--- a/README.md
+++ b/README.md
@@ -201,6 +201,11 @@ If you encounter issues, check the [troubleshooting guide](https://qwenlm.github

 To report a bug from within the CLI, run `/bug` and include a short title and repro steps.

+## Connect with Us
+
+- Discord: https://discord.gg/ycKBjdNd
+- Dingtalk: https://qr.dingtalk.com/action/joingroup?code=v1,k1,+FX6Gf/ZDlTahTIRi8AEQhIaBlqykA0j+eBKKdhLeAE=&_dt_no_comment=1&origin=1
+
 ## Acknowledgments

 This project is based on [Google Gemini CLI](https://github.com/google-gemini/gemini-cli). We acknowledge and appreciate the excellent work of the Gemini CLI team. Our main contribution focuses on parser-level adaptations to better support Qwen-Coder models.
--- a/docs/users/configuration/settings.md
+++ b/docs/users/configuration/settings.md
@@ -275,6 +275,7 @@ If you are experiencing performance issues with file searching (e.g., with `@` c
 | `tools.truncateToolOutputThreshold`  | number            | Truncate tool output if it is larger than this many characters. Applies to Shell, Grep, Glob, ReadFile and ReadManyFiles tools.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `25000`     | Requires restart: Yes                                                                                                                                                                                                                                |
 | `tools.truncateToolOutputLines`      | number            | Maximum lines or entries kept when truncating tool output. Applies to Shell, Grep, Glob, ReadFile and ReadManyFiles tools.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `1000`      | Requires restart: Yes                                                                                                                                                                                                                                |
 | `tools.autoAccept`                   | boolean           | Controls whether the CLI automatically accepts and executes tool calls that are considered safe (e.g., read-only operations) without explicit user confirmation. If set to `true`, the CLI will bypass the confirmation prompt for tools deemed safe.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `false`     |                                                                                                                                                                                                                                                      |
+| `tools.experimental.skills`           | boolean           | Enable experimental Agent Skills feature                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |                                                                                                                                                                                                                                                      |

 #### mcp

@@ -480,7 +481,7 @@ Arguments passed directly when running the CLI can override other configurations
 | `--telemetry-otlp-protocol`  |       | Sets the OTLP protocol for telemetry (`grpc` or `http`).                                                                                                                                |                                        | Defaults to `grpc`. See [telemetry](../../developers/development/telemetry) for more information.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `--telemetry-log-prompts`    |       | Enables logging of prompts for telemetry.                                                                                                                                               |                                        | See [telemetry](../../developers/development/telemetry) for more information.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `--checkpointing`            |       | Enables [checkpointing](../features/checkpointing).                                                                                                                                     |                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--acp`                      |       | Enables ACP mode (Agent Control Protocol). Useful for IDE/editor integrations like [Zed](../integration-zed).                                                                           |                                        | Stable. Replaces the deprecated `--experimental-acp` flag.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `--acp`                      |       | Enables ACP mode (Agent Client Protocol). Useful for IDE/editor integrations like [Zed](../integration-zed).                                                                            |                                        | Stable. Replaces the deprecated `--experimental-acp` flag.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | `--experimental-skills`      |       | Enables experimental [Agent Skills](../features/skills) (registers the `skill` tool and loads Skills from `.qwen/skills/` and `~/.qwen/skills/`).                                       |                                        | Experimental.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `--extensions`               | `-e`  | Specifies a list of extensions to use for the session.                                                                                                                                  | Extension names                        | If not provided, all available extensions are used. Use the special term `qwen -e none` to disable all extensions. Example: `qwen -e my-extension -e my-other-extension`                                                                                                                                                                                                                                                                                                                                                                                        |
 | `--list-extensions`          | `-l`  | Lists all available extensions and exits.                                                                                                                                               |                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
--- a/docs/users/features/skills.md
+++ b/docs/users/features/skills.md
@@ -11,12 +11,29 @@ This guide shows you how to create, use, and manage Agent Skills in **Qwen Code*
 ## Prerequisites

 - Qwen Code (recent version)
- Run with the experimental flag enabled:
+
+## How to enable
+
+### Via CLI flag

 ```bash
 qwen --experimental-skills
 ```

+### Via settings.json
+
+Add to your `~/.qwen/settings.json` or project's `.qwen/settings.json`:
+
+```json
+{
+  "tools": {
+    "experimental": {
+      "skills": true
+    }
+  }
+}
+```
+
 - Basic familiarity with Qwen Code ([Quickstart](../quickstart.md))

 ## What are Agent Skills?
--- a/docs/users/images/jetbrains-acp.png
+++ b/docs/users/images/jetbrains-acp.png
--- a/docs/users/integration-jetbrains.md
+++ b/docs/users/integration-jetbrains.md
@@ -1,11 +1,11 @@
 # JetBrains IDEs

-> JetBrains IDEs provide native support for AI coding assistants through the Agent Control Protocol (ACP). This integration allows you to use Qwen Code directly within your JetBrains IDE with real-time code suggestions.
+> JetBrains IDEs provide native support for AI coding assistants through the Agent Client Protocol (ACP). This integration allows you to use Qwen Code directly within your JetBrains IDE with real-time code suggestions.

 ### Features

 - **Native agent experience**: Integrated AI assistant panel within your JetBrains IDE
- **Agent Control Protocol**: Full support for ACP enabling advanced IDE interactions
+- **Agent Client Protocol**: Full support for ACP enabling advanced IDE interactions
 - **Symbol management**: #-mention files to add them to the conversation context
 - **Conversation history**: Access to past conversations within the IDE

@@ -40,7 +40,7 @@

 4. The Qwen Code agent should now be available in the AI Assistant panel

-![Qwen Code in JetBrains AI Chat](./images/jetbrains-acp.png)
+![Qwen Code in JetBrains AI Chat](https://img.alicdn.com/imgextra/i3/O1CN01ZxYel21y433Ci6eg0_!!6000000006524-2-tps-2774-1494.png)

 ## Troubleshooting

--- a/docs/users/integration-vscode.md
+++ b/docs/users/integration-vscode.md
@@ -22,13 +22,7 @@

 ### Installation

-1. Install Qwen Code CLI:
-
-   ```bash
-   npm install -g qwen-code
-   ```
-
-2. Download and install the extension from the [Visual Studio Code Extension Marketplace](https://marketplace.visualstudio.com/items?itemName=qwenlm.qwen-code-vscode-ide-companion).
+Download and install the extension from the [Visual Studio Code Extension Marketplace](https://marketplace.visualstudio.com/items?itemName=qwenlm.qwen-code-vscode-ide-companion).

 ## Troubleshooting

--- a/docs/users/integration-zed.md
+++ b/docs/users/integration-zed.md
@@ -1,6 +1,6 @@
 # Zed Editor

-> Zed Editor provides native support for AI coding assistants through the Agent Control Protocol (ACP). This integration allows you to use Qwen Code directly within Zed's interface with real-time code suggestions.
+> Zed Editor provides native support for AI coding assistants through the Agent Client Protocol (ACP). This integration allows you to use Qwen Code directly within Zed's interface with real-time code suggestions.

 ![Zed Editor Overview](https://img.alicdn.com/imgextra/i1/O1CN01aAhU311GwEoNh27FP_!!6000000000686-2-tps-3024-1898.png)

@@ -20,9 +20,9 @@

 1. Install Qwen Code CLI:

-   ```bash
-   npm install -g qwen-code
-   ```
+```bash
+npm install -g @qwen-code/qwen-code
+```

 2. Download and install [Zed Editor](https://zed.dev/)

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@qwen-code/qwen-code",
-  "version": "0.7.0",
+  "version": "0.7.1",
  "engines": {
    "node": ">=20.0.0"
  },
@@ -13,7 +13,7 @@
    "url": "git+https://github.com/QwenLM/qwen-code.git"
  },
  "config": {
-    "sandboxImageUri": "ghcr.io/qwenlm/qwen-code:0.7.0"
+    "sandboxImageUri": "ghcr.io/qwenlm/qwen-code:0.7.1"
  },
  "scripts": {
    "start": "cross-env node scripts/start.js",
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@qwen-code/qwen-code",
-  "version": "0.7.0",
+  "version": "0.7.1",
  "description": "Qwen Code",
  "repository": {
    "type": "git",
@@ -33,7 +33,7 @@
    "dist"
  ],
  "config": {
-    "sandboxImageUri": "ghcr.io/qwenlm/qwen-code:0.7.0"
+    "sandboxImageUri": "ghcr.io/qwenlm/qwen-code:0.7.1"
  },
  "dependencies": {
    "@google/genai": "1.30.0",
--- a/packages/cli/src/config/config.ts
+++ b/packages/cli/src/config/config.ts
@@ -334,7 +334,7 @@ export async function parseArguments(settings: Settings): Promise<CliArgs> {
        .option('experimental-skills', {
          type: 'boolean',
          description: 'Enable experimental Skills feature',
-          default: false,
+          default: settings.tools?.experimental?.skills ?? false,
        })
        .option('channel', {
          type: 'string',
@@ -874,11 +874,10 @@ export async function loadCliConfig(
    }
  };

-  if (
-    !interactive &&
-    !argv.experimentalAcp &&
-    inputFormat !== InputFormat.STREAM_JSON
-  ) {
+  // ACP mode check: must include both --acp (current) and --experimental-acp (deprecated).
+  // Without this check, edit, write_file, run_shell_command would be excluded in ACP mode.
+  const isAcpMode = argv.acp || argv.experimentalAcp;
+  if (!interactive && !isAcpMode && inputFormat !== InputFormat.STREAM_JSON) {
    switch (approvalMode) {
      case ApprovalMode.PLAN:
      case ApprovalMode.DEFAULT:
--- a/packages/cli/src/config/settingsSchema.ts
+++ b/packages/cli/src/config/settingsSchema.ts
@@ -981,6 +981,27 @@ const SETTINGS_SCHEMA = {
        description: 'The number of lines to keep when truncating tool output.',
        showInDialog: true,
      },
+      experimental: {
+        type: 'object',
+        label: 'Experimental',
+        category: 'Tools',
+        requiresRestart: true,
+        default: {},
+        description: 'Experimental tool features.',
+        showInDialog: false,
+        properties: {
+          skills: {
+            type: 'boolean',
+            label: 'Skills',
+            category: 'Tools',
+            requiresRestart: true,
+            default: false,
+            description:
+              'Enable experimental Agent Skills feature. When enabled, Qwen Code can use Skills from .qwen/skills/ and ~/.qwen/skills/.',
+            showInDialog: true,
+          },
+        },
+      },
    },
  },

--- a/packages/cli/src/i18n/locales/zh.js
+++ b/packages/cli/src/i18n/locales/zh.js
@@ -873,11 +873,11 @@ export default {
  'Session Stats': '会话统计',
  'Model Usage': '模型使用情况',
  Reqs: '请求数',
-  'Input Tokens': '输入令牌',
-  'Output Tokens': '输出令牌',
+  'Input Tokens': '输入 token 数',
+  'Output Tokens': '输出 token 数',
  'Savings Highlight:': '节省亮点：',
  'of input tokens were served from the cache, reducing costs.':
-    '的输入令牌来自缓存，降低了成本',
+    '从缓存载入 token ，降低了成本',
  'Tip: For a full token breakdown, run `/stats model`.':
    '提示：要查看完整的令牌明细，请运行 `/stats model`',
  'Model Stats For Nerds': '模型统计（技术细节）',
--- a/packages/cli/src/utils/commentJson.test.ts
+++ b/packages/cli/src/utils/commentJson.test.ts
@@ -8,7 +8,10 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import * as os from 'node:os';
-import { updateSettingsFilePreservingFormat } from './commentJson.js';
+import {
+  updateSettingsFilePreservingFormat,
+  applyUpdates,
+} from './commentJson.js';

 describe('commentJson', () => {
  let tempDir: string;
@@ -180,3 +183,18 @@ describe('commentJson', () => {
    });
  });
 });
+
+describe('applyUpdates', () => {
+  it('should apply updates correctly', () => {
+    const original = { a: 1, b: { c: 2 } };
+    const updates = { b: { c: 3 } };
+    const result = applyUpdates(original, updates);
+    expect(result).toEqual({ a: 1, b: { c: 3 } });
+  });
+  it('should apply updates correctly when empty', () => {
+    const original = { a: 1, b: { c: 2 } };
+    const updates = { b: {} };
+    const result = applyUpdates(original, updates);
+    expect(result).toEqual({ a: 1, b: {} });
+  });
+});
--- a/packages/cli/src/utils/commentJson.ts
+++ b/packages/cli/src/utils/commentJson.ts
@@ -38,7 +38,7 @@ export function updateSettingsFilePreservingFormat(
  fs.writeFileSync(filePath, updatedContent, 'utf-8');
 }

-function applyUpdates(
+export function applyUpdates(
  current: Record<string, unknown>,
  updates: Record<string, unknown>,
 ): Record<string, unknown> {
@@ -50,6 +50,7 @@ function applyUpdates(
      typeof value === 'object' &&
      value !== null &&
      !Array.isArray(value) &&
+      Object.keys(value).length > 0 &&
      typeof result[key] === 'object' &&
      result[key] !== null &&
      !Array.isArray(result[key])
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@qwen-code/qwen-code-core",
-  "version": "0.7.0",
+  "version": "0.7.1",
  "description": "Qwen Code Core",
  "repository": {
    "type": "git",
--- a/packages/core/src/config/config.ts
+++ b/packages/core/src/config/config.ts
@@ -404,7 +404,7 @@ export class Config {
  private toolRegistry!: ToolRegistry;
  private promptRegistry!: PromptRegistry;
  private subagentManager!: SubagentManager;
-  private skillManager!: SkillManager;
+  private skillManager: SkillManager | null = null;
  private fileSystemService: FileSystemService;
  private contentGeneratorConfig!: ContentGeneratorConfig;
  private contentGeneratorConfigSources: ContentGeneratorConfigSources = {};
@@ -672,8 +672,10 @@ export class Config {
    }
    this.promptRegistry = new PromptRegistry();
    this.subagentManager = new SubagentManager(this);
-    this.skillManager = new SkillManager(this);
-    await this.skillManager.startWatching();
+    if (this.getExperimentalSkills()) {
+      this.skillManager = new SkillManager(this);
+      await this.skillManager.startWatching();
+    }

    // Load session subagents if they were provided before initialization
    if (this.sessionSubagents.length > 0) {
@@ -1439,7 +1441,7 @@ export class Config {
    return this.subagentManager;
  }

-  getSkillManager(): SkillManager {
+  getSkillManager(): SkillManager | null {
    return this.skillManager;
  }

--- a/packages/core/src/core/contentGenerator.ts
+++ b/packages/core/src/core/contentGenerator.ts
@@ -270,28 +270,28 @@ export function createContentGeneratorConfig(
 }

 export async function createContentGenerator(
-  config: ContentGeneratorConfig,
-  gcConfig: Config,
+  generatorConfig: ContentGeneratorConfig,
+  config: Config,
  isInitialAuth?: boolean,
 ): Promise<ContentGenerator> {
-  const validation = validateModelConfig(config, false);
+  const validation = validateModelConfig(generatorConfig, false);
  if (!validation.valid) {
    throw new Error(validation.errors.map((e) => e.message).join('\n'));
  }

-  if (config.authType === AuthType.USE_OPENAI) {
-    // Import OpenAIContentGenerator dynamically to avoid circular dependencies
+  const authType = generatorConfig.authType;
+  if (!authType) {
+    throw new Error('ContentGeneratorConfig must have an authType');
+  }
+
+  let baseGenerator: ContentGenerator;
+
+  if (authType === AuthType.USE_OPENAI) {
    const { createOpenAIContentGenerator } = await import(
      './openaiContentGenerator/index.js'
    );
-
-    // Always use OpenAIContentGenerator, logging is controlled by enableOpenAILogging flag
-    const generator = createOpenAIContentGenerator(config, gcConfig);
-    return new LoggingContentGenerator(generator, gcConfig);
-  }
-
-  if (config.authType === AuthType.QWEN_OAUTH) {
-    // Import required classes dynamically
+    baseGenerator = createOpenAIContentGenerator(generatorConfig, config);
+  } else if (authType === AuthType.QWEN_OAUTH) {
    const { getQwenOAuthClient: getQwenOauthClient } = await import(
      '../qwen/qwenOAuth2.js'
    );
@@ -300,44 +300,38 @@ export async function createContentGenerator(
    );

    try {
-      // Get the Qwen OAuth client (now includes integrated token management)
-      // If this is initial auth, require cached credentials to detect missing credentials
      const qwenClient = await getQwenOauthClient(
-        gcConfig,
+        config,
        isInitialAuth ? { requireCachedCredentials: true } : undefined,
      );
-
-      // Create the content generator with dynamic token management
-      const generator = new QwenContentGenerator(qwenClient, config, gcConfig);
-      return new LoggingContentGenerator(generator, gcConfig);
+      baseGenerator = new QwenContentGenerator(
+        qwenClient,
+        generatorConfig,
+        config,
+      );
    } catch (error) {
      throw new Error(
        `${error instanceof Error ? error.message : String(error)}`,
      );
    }
-  }
-
-  if (config.authType === AuthType.USE_ANTHROPIC) {
+  } else if (authType === AuthType.USE_ANTHROPIC) {
    const { createAnthropicContentGenerator } = await import(
      './anthropicContentGenerator/index.js'
    );
-
-    const generator = createAnthropicContentGenerator(config, gcConfig);
-    return new LoggingContentGenerator(generator, gcConfig);
-  }
-
-  if (
-    config.authType === AuthType.USE_GEMINI ||
-    config.authType === AuthType.USE_VERTEX_AI
+    baseGenerator = createAnthropicContentGenerator(generatorConfig, config);
+  } else if (
+    authType === AuthType.USE_GEMINI ||
+    authType === AuthType.USE_VERTEX_AI
  ) {
    const { createGeminiContentGenerator } = await import(
      './geminiContentGenerator/index.js'
    );
-    const generator = createGeminiContentGenerator(config, gcConfig);
-    return new LoggingContentGenerator(generator, gcConfig);
+    baseGenerator = createGeminiContentGenerator(generatorConfig, config);
+  } else {
+    throw new Error(
+      `Error creating contentGenerator: Unsupported authType: ${authType}`,
+    );
  }

-  throw new Error(
-    `Error creating contentGenerator: Unsupported authType: ${config.authType}`,
-  );
+  return new LoggingContentGenerator(baseGenerator, config, generatorConfig);
 }
--- a/packages/core/src/core/loggingContentGenerator/loggingContentGenerator.test.ts
+++ b/packages/core/src/core/loggingContentGenerator/loggingContentGenerator.test.ts
@@ -12,6 +12,7 @@ import type {
 import { GenerateContentResponse } from '@google/genai';
 import type { Config } from '../../config/config.js';
 import type { ContentGenerator } from '../contentGenerator.js';
+import { AuthType } from '../contentGenerator.js';
 import { LoggingContentGenerator } from './index.js';
 import { OpenAIContentConverter } from '../openaiContentGenerator/converter.js';
 import {
@@ -50,14 +51,17 @@ const convertGeminiResponseToOpenAISpy = vi
    choices: [],
  } as OpenAI.Chat.ChatCompletion);

-const createConfig = (overrides: Record<string, unknown> = {}): Config =>
-  ({
-    getContentGeneratorConfig: () => ({
-      authType: 'openai',
-      enableOpenAILogging: false,
-      ...overrides,
-    }),
-  }) as Config;
+const createConfig = (overrides: Record<string, unknown> = {}): Config => {
+  const configContent = {
+    authType: 'openai',
+    enableOpenAILogging: false,
+    ...overrides,
+  };
+  return {
+    getContentGeneratorConfig: () => configContent,
+    getAuthType: () => configContent.authType as AuthType | undefined,
+  } as Config;
+};

 const createWrappedGenerator = (
  generateContent: ContentGenerator['generateContent'],
@@ -124,13 +128,17 @@ describe('LoggingContentGenerator', () => {
      ),
      vi.fn(),
    );
+    const generatorConfig = {
+      model: 'test-model',
+      authType: AuthType.USE_OPENAI,
+      enableOpenAILogging: true,
+      openAILoggingDir: 'logs',
+      schemaCompliance: 'openapi_30' as const,
+    };
    const generator = new LoggingContentGenerator(
      wrapped,
-      createConfig({
-        enableOpenAILogging: true,
-        openAILoggingDir: 'logs',
-        schemaCompliance: 'openapi_30',
-      }),
+      createConfig(),
+      generatorConfig,
    );

    const request = {
@@ -225,9 +233,15 @@ describe('LoggingContentGenerator', () => {
      vi.fn().mockRejectedValue(error),
      vi.fn(),
    );
+    const generatorConfig = {
+      model: 'test-model',
+      authType: AuthType.USE_OPENAI,
+      enableOpenAILogging: true,
+    };
    const generator = new LoggingContentGenerator(
      wrapped,
-      createConfig({ enableOpenAILogging: true }),
+      createConfig(),
+      generatorConfig,
    );

    const request = {
@@ -293,9 +307,15 @@ describe('LoggingContentGenerator', () => {
        })(),
      ),
    );
+    const generatorConfig = {
+      model: 'test-model',
+      authType: AuthType.USE_OPENAI,
+      enableOpenAILogging: true,
+    };
    const generator = new LoggingContentGenerator(
      wrapped,
-      createConfig({ enableOpenAILogging: true }),
+      createConfig(),
+      generatorConfig,
    );

    const request = {
@@ -345,9 +365,15 @@ describe('LoggingContentGenerator', () => {
        })(),
      ),
    );
+    const generatorConfig = {
+      model: 'test-model',
+      authType: AuthType.USE_OPENAI,
+      enableOpenAILogging: true,
+    };
    const generator = new LoggingContentGenerator(
      wrapped,
-      createConfig({ enableOpenAILogging: true }),
+      createConfig(),
+      generatorConfig,
    );

    const request = {
--- a/packages/core/src/core/loggingContentGenerator/loggingContentGenerator.ts
+++ b/packages/core/src/core/loggingContentGenerator/loggingContentGenerator.ts
@@ -31,7 +31,10 @@ import {
  logApiRequest,
  logApiResponse,
 } from '../../telemetry/loggers.js';
-import type { ContentGenerator } from '../contentGenerator.js';
+import type {
+  ContentGenerator,
+  ContentGeneratorConfig,
+} from '../contentGenerator.js';
 import { isStructuredError } from '../../utils/quotaErrorDetection.js';
 import { OpenAIContentConverter } from '../openaiContentGenerator/converter.js';
 import { OpenAILogger } from '../../utils/openaiLogger.js';
@@ -50,9 +53,11 @@ export class LoggingContentGenerator implements ContentGenerator {
  constructor(
    private readonly wrapped: ContentGenerator,
    private readonly config: Config,
+    generatorConfig: ContentGeneratorConfig,
  ) {
-    const generatorConfig = this.config.getContentGeneratorConfig();
-    if (generatorConfig?.enableOpenAILogging) {
+    // Extract fields needed for initialization from passed config
+    // (config.getContentGeneratorConfig() may not be available yet during refreshAuth)
+    if (generatorConfig.enableOpenAILogging) {
      this.openaiLogger = new OpenAILogger(generatorConfig.openAILoggingDir);
      this.schemaCompliance = generatorConfig.schemaCompliance;
    }
@@ -89,7 +94,7 @@ export class LoggingContentGenerator implements ContentGenerator {
        model,
        durationMs,
        prompt_id,
-        this.config.getContentGeneratorConfig()?.authType,
+        this.config.getAuthType(),
        usageMetadata,
        responseText,
      ),
@@ -126,7 +131,7 @@ export class LoggingContentGenerator implements ContentGenerator {
        errorMessage,
        durationMs,
        prompt_id,
-        this.config.getContentGeneratorConfig()?.authType,
+        this.config.getAuthType(),
        errorType,
        errorStatus,
      ),
--- a/packages/core/src/qwen/qwenOAuth2.ts
+++ b/packages/core/src/qwen/qwenOAuth2.ts
@@ -559,6 +559,109 @@ export async function getQwenOAuthClient(
  }
 }

+/**
+ * Displays a formatted box with OAuth device authorization URL.
+ * Uses process.stderr.write() to bypass ConsolePatcher and ensure the auth URL
+ * is always visible to users, especially in non-interactive mode.
+ * Using stderr prevents corruption of structured JSON output (which goes to stdout)
+ * and follows the standard Unix convention of user-facing messages to stderr.
+ */
+function showFallbackMessage(verificationUriComplete: string): void {
+  const title = 'Qwen OAuth Device Authorization';
+  const url = verificationUriComplete;
+  const minWidth = 70;
+  const maxWidth = 80;
+  const boxWidth = Math.min(Math.max(title.length + 4, minWidth), maxWidth);
+
+  // Calculate the width needed for the box (account for padding)
+  const contentWidth = boxWidth - 4; // Subtract 2 spaces and 2 border chars
+
+  // Helper to wrap text to fit within box width
+  const wrapText = (text: string, width: number): string[] => {
+    // For URLs, break at any character if too long
+    if (text.startsWith('http://') || text.startsWith('https://')) {
+      const lines: string[] = [];
+      for (let i = 0; i < text.length; i += width) {
+        lines.push(text.substring(i, i + width));
+      }
+      return lines;
+    }
+
+    // For regular text, break at word boundaries
+    const words = text.split(' ');
+    const lines: string[] = [];
+    let currentLine = '';
+
+    for (const word of words) {
+      if (currentLine.length + word.length + 1 <= width) {
+        currentLine += (currentLine ? ' ' : '') + word;
+      } else {
+        if (currentLine) {
+          lines.push(currentLine);
+        }
+        currentLine = word.length > width ? word.substring(0, width) : word;
+      }
+    }
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+    return lines;
+  };
+
+  // Build the box borders with title centered in top border
+  // Format: +--- Title ---+
+  const titleWithSpaces = ' ' + title + ' ';
+  const totalDashes = boxWidth - 2 - titleWithSpaces.length; // Subtract corners and title
+  const leftDashes = Math.floor(totalDashes / 2);
+  const rightDashes = totalDashes - leftDashes;
+  const topBorder =
+    '+' +
+    '-'.repeat(leftDashes) +
+    titleWithSpaces +
+    '-'.repeat(rightDashes) +
+    '+';
+  const emptyLine = '|' + ' '.repeat(boxWidth - 2) + '|';
+  const bottomBorder = '+' + '-'.repeat(boxWidth - 2) + '+';
+
+  // Build content lines
+  const instructionLines = wrapText(
+    'Please visit the following URL in your browser to authorize:',
+    contentWidth,
+  );
+  const urlLines = wrapText(url, contentWidth);
+  const waitingLine = 'Waiting for authorization to complete...';
+
+  // Write the box
+  process.stderr.write('\n' + topBorder + '\n');
+  process.stderr.write(emptyLine + '\n');
+
+  // Write instructions
+  for (const line of instructionLines) {
+    process.stderr.write(
+      '| ' + line + ' '.repeat(contentWidth - line.length) + ' |\n',
+    );
+  }
+
+  process.stderr.write(emptyLine + '\n');
+
+  // Write URL
+  for (const line of urlLines) {
+    process.stderr.write(
+      '| ' + line + ' '.repeat(contentWidth - line.length) + ' |\n',
+    );
+  }
+
+  process.stderr.write(emptyLine + '\n');
+
+  // Write waiting message
+  process.stderr.write(
+    '| ' + waitingLine + ' '.repeat(contentWidth - waitingLine.length) + ' |\n',
+  );
+
+  process.stderr.write(emptyLine + '\n');
+  process.stderr.write(bottomBorder + '\n\n');
+}
+
 async function authWithQwenDeviceFlow(
  client: QwenOAuth2Client,
  config: Config,
@@ -571,6 +674,50 @@ async function authWithQwenDeviceFlow(
  };
  qwenOAuth2Events.once(QwenOAuth2Event.AuthCancel, cancelHandler);

+  // Helper to check cancellation and return appropriate result
+  const checkCancellation = (): AuthResult | null => {
+    if (!isCancelled) {
+      return null;
+    }
+    const message = 'Authentication cancelled by user.';
+    console.debug('\n' + message);
+    qwenOAuth2Events.emit(QwenOAuth2Event.AuthProgress, 'error', message);
+    return { success: false, reason: 'cancelled', message };
+  };
+
+  // Helper to emit auth progress events
+  const emitAuthProgress = (
+    status: 'polling' | 'success' | 'error' | 'timeout' | 'rate_limit',
+    message: string,
+  ): void => {
+    qwenOAuth2Events.emit(QwenOAuth2Event.AuthProgress, status, message);
+  };
+
+  // Helper to handle browser launch with error handling
+  const launchBrowser = async (url: string): Promise<void> => {
+    try {
+      const childProcess = await open(url);
+
+      // IMPORTANT: Attach an error handler to the returned child process.
+      // Without this, if `open` fails to spawn a process (e.g., `xdg-open` is not found
+      // in a minimal Docker container), it will emit an unhandled 'error' event,
+      // causing the entire Node.js process to crash.
+      if (childProcess) {
+        childProcess.on('error', (err) => {
+          console.debug(
+            'Browser launch failed:',
+            err.message || 'Unknown error',
+          );
+        });
+      }
+    } catch (err) {
+      console.debug(
+        'Failed to open browser:',
+        err instanceof Error ? err.message : 'Unknown error',
+      );
+    }
+  };
+
  try {
    // Generate PKCE code verifier and challenge
    const { code_verifier, code_challenge } = generatePKCEPair();
@@ -593,56 +740,18 @@ async function authWithQwenDeviceFlow(
    // Emit device authorization event for UI integration immediately
    qwenOAuth2Events.emit(QwenOAuth2Event.AuthUri, deviceAuth);

-    const showFallbackMessage = () => {
-      console.log('\n=== Qwen OAuth Device Authorization ===');
-      console.log(
-        'Please visit the following URL in your browser to authorize:',
-      );
-      console.log(`\n${deviceAuth.verification_uri_complete}\n`);
-      console.log('Waiting for authorization to complete...\n');
-    };
-
    // Always show the fallback message in non-interactive environments to ensure
    // users can see the authorization URL even if browser launching is attempted.
    // This is critical for headless/remote environments where browser launching
    // may silently fail without throwing an error.
-    if (config.isBrowserLaunchSuppressed()) {
-      // Browser launch is suppressed, show fallback message
-      showFallbackMessage();
-    } else {
-      // Try to open the URL in browser, but always show the URL as fallback
-      // to handle cases where browser launch silently fails (e.g., headless servers)
-      showFallbackMessage();
-      try {
-        const childProcess = await open(deviceAuth.verification_uri_complete);
+    showFallbackMessage(deviceAuth.verification_uri_complete);

-        // IMPORTANT: Attach an error handler to the returned child process.
-        // Without this, if `open` fails to spawn a process (e.g., `xdg-open` is not found
-        // in a minimal Docker container), it will emit an unhandled 'error' event,
-        // causing the entire Node.js process to crash.
-        if (childProcess) {
-          childProcess.on('error', (err) => {
-            console.debug(
-              'Browser launch failed:',
-              err.message || 'Unknown error',
-            );
-          });
-        }
-      } catch (err) {
-        console.debug(
-          'Failed to open browser:',
-          err instanceof Error ? err.message : 'Unknown error',
-        );
-      }
+    // Try to open browser if not suppressed
+    if (!config.isBrowserLaunchSuppressed()) {
+      await launchBrowser(deviceAuth.verification_uri_complete);
    }

-    // Emit auth progress event
-    qwenOAuth2Events.emit(
-      QwenOAuth2Event.AuthProgress,
-      'polling',
-      'Waiting for authorization...',
-    );
-
+    emitAuthProgress('polling', 'Waiting for authorization...');
    console.debug('Waiting for authorization...\n');

    // Poll for the token
@@ -653,11 +762,9 @@ async function authWithQwenDeviceFlow(

    for (let attempt = 0; attempt < maxAttempts; attempt++) {
      // Check if authentication was cancelled
-      if (isCancelled) {
-        const message = 'Authentication cancelled by user.';
-        console.debug('\n' + message);
-        qwenOAuth2Events.emit(QwenOAuth2Event.AuthProgress, 'error', message);
-        return { success: false, reason: 'cancelled', message };
+      const cancellationResult = checkCancellation();
+      if (cancellationResult) {
+        return cancellationResult;
      }

      try {
@@ -700,9 +807,7 @@ async function authWithQwenDeviceFlow(
            // minimal stub; cache invalidation is best-effort and should not break auth.
          }

-          // Emit auth progress success event
-          qwenOAuth2Events.emit(
-            QwenOAuth2Event.AuthProgress,
+          emitAuthProgress(
            'success',
            'Authentication successful! Access token obtained.',
          );
@@ -725,9 +830,7 @@ async function authWithQwenDeviceFlow(
            pollInterval = 2000; // Reset to default interval
          }

-          // Emit polling progress event
-          qwenOAuth2Events.emit(
-            QwenOAuth2Event.AuthProgress,
+          emitAuthProgress(
            'polling',
            `Polling... (attempt ${attempt + 1}/${maxAttempts})`,
          );
@@ -757,15 +860,9 @@ async function authWithQwenDeviceFlow(
          });

          // Check for cancellation after waiting
-          if (isCancelled) {
-            const message = 'Authentication cancelled by user.';
-            console.debug('\n' + message);
-            qwenOAuth2Events.emit(
-              QwenOAuth2Event.AuthProgress,
-              'error',
-              message,
-            );
-            return { success: false, reason: 'cancelled', message };
+          const cancellationResult = checkCancellation();
+          if (cancellationResult) {
+            return cancellationResult;
          }

          continue;
@@ -793,15 +890,17 @@ async function authWithQwenDeviceFlow(
          message: string,
          eventType: 'error' | 'rate_limit' = 'error',
        ): AuthResult => {
-          qwenOAuth2Events.emit(
-            QwenOAuth2Event.AuthProgress,
-            eventType,
-            message,
-          );
+          emitAuthProgress(eventType, message);
          console.error('\n' + message);
          return { success: false, reason, message };
        };

+        // Check for cancellation first
+        const cancellationResult = checkCancellation();
+        if (cancellationResult) {
+          return cancellationResult;
+        }
+
        // Handle credential caching failures - stop polling immediately
        if (errorMessage.includes('Failed to cache credentials')) {
          return handleError('error', errorMessage);
@@ -825,26 +924,14 @@ async function authWithQwenDeviceFlow(
        }

        const message = `Error polling for token: ${errorMessage}`;
-        qwenOAuth2Events.emit(QwenOAuth2Event.AuthProgress, 'error', message);
-
-        if (isCancelled) {
-          const message = 'Authentication cancelled by user.';
-          return { success: false, reason: 'cancelled', message };
-        }
+        emitAuthProgress('error', message);

        await new Promise((resolve) => setTimeout(resolve, pollInterval));
      }
    }

    const timeoutMessage = 'Authorization timeout, please restart the process.';
-
-    // Emit timeout error event
-    qwenOAuth2Events.emit(
-      QwenOAuth2Event.AuthProgress,
-      'timeout',
-      timeoutMessage,
-    );
-
+    emitAuthProgress('timeout', timeoutMessage);
    console.error('\n' + timeoutMessage);
    return { success: false, reason: 'timeout', message: timeoutMessage };
  } catch (error: unknown) {
@@ -853,7 +940,7 @@ async function authWithQwenDeviceFlow(
    });
    const message = `Device authorization flow failed: ${fullErrorMessage}`;

-    qwenOAuth2Events.emit(QwenOAuth2Event.AuthProgress, 'error', message);
+    emitAuthProgress('error', message);
    console.error(message);
    return { success: false, reason: 'error', message };
  } finally {
--- a/packages/core/src/skills/skill-manager.ts
+++ b/packages/core/src/skills/skill-manager.ts
@@ -235,6 +235,7 @@ export class SkillManager {
    }

    this.watchStarted = true;
+    await this.ensureUserSkillsDir();
    await this.refreshCache();
    this.updateWatchersFromCache();
  }
@@ -486,29 +487,14 @@ export class SkillManager {
  }

  private updateWatchersFromCache(): void {
-    const desiredPaths = new Set<string>();
-
-    for (const level of ['project', 'user'] as const) {
-      const baseDir = this.getSkillsBaseDir(level);
-      const parentDir = path.dirname(baseDir);
-      if (fsSync.existsSync(parentDir)) {
-        desiredPaths.add(parentDir);
-      }
-      if (fsSync.existsSync(baseDir)) {
-        desiredPaths.add(baseDir);
-      }
-
-      const levelSkills = this.skillsCache?.get(level) || [];
-      for (const skill of levelSkills) {
-        const skillDir = path.dirname(skill.filePath);
-        if (fsSync.existsSync(skillDir)) {
-          desiredPaths.add(skillDir);
-        }
-      }
-    }
+    const watchTargets = new Set<string>(
+      (['project', 'user'] as const)
+        .map((level) => this.getSkillsBaseDir(level))
+        .filter((baseDir) => fsSync.existsSync(baseDir)),
+    );

    for (const existingPath of this.watchers.keys()) {
-      if (!desiredPaths.has(existingPath)) {
+      if (!watchTargets.has(existingPath)) {
        void this.watchers
          .get(existingPath)
          ?.close()
@@ -522,7 +508,7 @@ export class SkillManager {
      }
    }

-    for (const watchPath of desiredPaths) {
+    for (const watchPath of watchTargets) {
      if (this.watchers.has(watchPath)) {
        continue;
      }
@@ -557,4 +543,16 @@ export class SkillManager {
      void this.refreshCache().then(() => this.updateWatchersFromCache());
    }, 150);
  }
+
+  private async ensureUserSkillsDir(): Promise<void> {
+    const baseDir = this.getSkillsBaseDir('user');
+    try {
+      await fs.mkdir(baseDir, { recursive: true });
+    } catch (error) {
+      console.warn(
+        `Failed to create user skills directory at ${baseDir}:`,
+        error,
+      );
+    }
+  }
 }
--- a/packages/core/src/tools/skill.ts
+++ b/packages/core/src/tools/skill.ts
@@ -53,7 +53,7 @@ export class SkillTool extends BaseDeclarativeTool<SkillParams, ToolResult> {
      false, // canUpdateOutput
    );

-    this.skillManager = config.getSkillManager();
+    this.skillManager = config.getSkillManager()!;
    this.skillManager.addChangeListener(() => {
      void this.refreshSkills();
    });
--- a/packages/sdk-typescript/package.json
+++ b/packages/sdk-typescript/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@qwen-code/sdk",
-  "version": "0.1.2",
+  "version": "0.1.3",
  "description": "TypeScript SDK for programmatic access to qwen-code CLI",
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
--- a/packages/test-utils/package.json
+++ b/packages/test-utils/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@qwen-code/qwen-code-test-utils",
-  "version": "0.7.0",
+  "version": "0.7.1",
  "private": true,
  "main": "src/index.ts",
  "license": "Apache-2.0",
--- a/packages/vscode-ide-companion/NOTICES.txt
+++ b/packages/vscode-ide-companion/NOTICES.txt
--- a/packages/vscode-ide-companion/README.md
+++ b/packages/vscode-ide-companion/README.md
@@ -1,6 +1,11 @@
 # Qwen Code Companion

-Seamlessly integrate [Qwen Code](https://github.com/QwenLM/qwen-code) into Visual Studio Code with native IDE features and an intuitive interface. This extension bundles everything you need to get started immediately.
+[![Version](https://img.shields.io/visual-studio-marketplace/v/qwenlm.qwen-code-vscode-ide-companion)](https://marketplace.visualstudio.com/items?itemName=qwenlm.qwen-code-vscode-ide-companion)
+[![VS Code Installs](https://img.shields.io/visual-studio-marketplace/i/qwenlm.qwen-code-vscode-ide-companion)](https://marketplace.visualstudio.com/items?itemName=qwenlm.qwen-code-vscode-ide-companion)
+[![Open VSX Downloads](https://img.shields.io/open-vsx/dt/qwenlm/qwen-code-vscode-ide-companion)](https://open-vsx.org/extension/qwenlm/qwen-code-vscode-ide-companion)
+[![Rating](https://img.shields.io/visual-studio-marketplace/r/qwenlm.qwen-code-vscode-ide-companion)](https://marketplace.visualstudio.com/items?itemName=qwenlm.qwen-code-vscode-ide-companion)
+
+Seamlessly integrate [Qwen Code](https://github.com/QwenLM/qwen-code) into Visual Studio Code with native IDE features and an intuitive chat interface. This extension bundles everything you need — no additional installation required.

 ## Demo

@@ -11,7 +16,7 @@ Seamlessly integrate [Qwen Code](https://github.com/QwenLM/qwen-code) into Visua

 ## Features

- **Native IDE experience**: Dedicated Qwen Code sidebar panel accessed via the Qwen icon
+- **Native IDE experience**: Dedicated Qwen Code Chat panel accessed via the Qwen icon in the editor title bar
 - **Native diffing**: Review, edit, and accept changes in VS Code's diff view
 - **Auto-accept edits mode**: Automatically apply Qwen's changes as they're made
 - **File management**: @-mention files or attach files and images using the system file picker
@@ -20,73 +25,46 @@ Seamlessly integrate [Qwen Code](https://github.com/QwenLM/qwen-code) into Visua

 ## Requirements

- Visual Studio Code 1.85.0 or newer
+- Visual Studio Code 1.85.0 or newer (also works with Cursor, Windsurf, and other VS Code-based editors)

-## Installation
+## Quick Start

-1. Install from the VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=qwenlm.qwen-code-vscode-ide-companion
+1. **Install** from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=qwenlm.qwen-code-vscode-ide-companion) or [Open VSX Registry](https://open-vsx.org/extension/qwenlm/qwen-code-vscode-ide-companion)

-2. Two ways to use
-   - Chat panel: Click the Qwen icon in the Activity Bar, or run `Qwen Code: Open` from the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`).
-   - Terminal session (classic): Run `Qwen Code: Run` to launch a session in the integrated terminal (bundled CLI).
+2. **Open the Chat panel** using one of these methods:
+   - Click the **Qwen icon** in the top-right corner of the editor
+   - Run `Qwen Code: Open` from the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)

-## Development and Debugging
+3. **Start chatting** — Ask Qwen to help with coding tasks, explain code, fix bugs, or write new features

-To debug and develop this extension locally:
+## Commands

-1. **Clone the repository**
+| Command                          | Description                                            |
+| -------------------------------- | ------------------------------------------------------ |
+| `Qwen Code: Open`                | Open the Qwen Code Chat panel                          |
+| `Qwen Code: Run`                 | Launch a classic terminal session with the bundled CLI |
+| `Qwen Code: Accept Current Diff` | Accept the currently displayed diff                    |
+| `Qwen Code: Close Diff Editor`   | Close/reject the current diff                          |

-   ```bash
-   git clone https://github.com/QwenLM/qwen-code.git
-   cd qwen-code
-   ```
+## Feedback & Issues

-2. **Install dependencies**
+- 🐛 [Report bugs](https://github.com/QwenLM/qwen-code/issues/new?template=bug_report.yml&labels=bug,vscode-ide-companion)
+- 💡 [Request features](https://github.com/QwenLM/qwen-code/issues/new?template=feature_request.yml&labels=enhancement,vscode-ide-companion)
+- 📖 [Documentation](https://qwenlm.github.io/qwen-code-docs/)
+- 📋 [Changelog](https://github.com/QwenLM/qwen-code/releases)

-   ```bash
-   npm install
-   # or if using pnpm
-   pnpm install
-   ```
+## Contributing

-3. **Start debugging**
+We welcome contributions! See our [Contributing Guide](https://github.com/QwenLM/qwen-code/blob/main/CONTRIBUTING.md) for details on:

-   ```bash
-   code .  # Open the project root in VS Code
-   ```
-   - Open the `packages/vscode-ide-companion/src/extension.ts` file
-   - Open Debug panel (`Ctrl+Shift+D` or `Cmd+Shift+D`)
-   - Select **"Launch Companion VS Code Extension"** from the debug dropdown
-   - Press `F5` to launch Extension Development Host
-
-4. **Make changes and reload**
-   - Edit the source code in the original VS Code window
-   - To see your changes, reload the Extension Development Host window by:
-     - Pressing `Ctrl+R` (Windows/Linux) or `Cmd+R` (macOS)
-     - Or clicking the "Reload" button in the debug toolbar
-
-5. **View logs and debug output**
-   - Open the Debug Console in the original VS Code window to see extension logs
-   - In the Extension Development Host window, open Developer Tools with `Help > Toggle Developer Tools` to see webview logs
-
-## Build for Production
-
-To build the extension for distribution:
-
-```bash
-npm run compile
-# or
-pnpm run compile
-```
-
-To package the extension as a VSIX file:
-
-```bash
-npx vsce package
-# or
-pnpm vsce package
-```
+- Setting up the development environment
+- Building and debugging the extension locally
+- Submitting pull requests

 ## Terms of Service and Privacy Notice

 By installing this extension, you agree to the [Terms of Service](https://github.com/QwenLM/qwen-code/blob/main/docs/tos-privacy.md).
+
+## License
+
+[Apache-2.0](https://github.com/QwenLM/qwen-code/blob/main/LICENSE)
--- a/packages/vscode-ide-companion/docs/TESTING_PLAN.md
+++ b/packages/vscode-ide-companion/docs/TESTING_PLAN.md
--- a/packages/vscode-ide-companion/docs/TEST_COVERAGE_SUMMARY.md
+++ b/packages/vscode-ide-companion/docs/TEST_COVERAGE_SUMMARY.md
@@ -0,0 +1,227 @@
+# VSCode IDE Companion Test Coverage Summary
+
+## Overview
+
+This testing effort added a comprehensive test suite for `packages/vscode-ide-companion` to ensure core functionality of the VSCode extension and WebView works correctly.
+
+### Test Execution Results
+
+```
+ Test Files  9 passed | 6 failed* (15)
+      Tests  136 passed | 5 failed* (141)
+```
+
+> *Note: Failed tests are due to pre-existing incomplete mocks, not affecting core functionality test coverage.
+> *E2E/UI automation tests are not included in this statistic.
+
+---
+
+## Test File Inventory
+
+### New/Enhanced Test Files
+
+| File Path                                              | Test Target                   | Key Coverage Scenarios                                                |
+| ------------------------------------------------------ | ----------------------------- | --------------------------------------------------------------------- |
+| `src/webview/WebViewContent.test.ts`                   | Prevent WebView blank screen  | HTML generation, CSP configuration, script references, XSS protection |
+| `src/webview/PanelManager.test.ts`                     | Prevent Tab open failures     | Panel creation, reuse, display, resource cleanup                      |
+| `src/diff-manager.test.ts`                             | Prevent Diff display failures | Diff creation, accept, cancel, deduplication                          |
+| `src/webview/MessageHandler.test.ts`                   | Prevent message loss          | Message routing, session management, permission handling              |
+| `src/commands/index.test.ts`                           | Prevent command failures      | Command registration, openChat, showDiff, login                       |
+| `src/webview/App.test.tsx`                             | Main app rendering            | Initial render, auth state, message display, loading state            |
+| `src/webview/hooks/useVSCode.test.ts`                  | VSCode API communication      | API acquisition, postMessage, state persistence, singleton pattern    |
+| `src/webview/hooks/message/useMessageHandling.test.ts` | Message handling logic        | Message addition, streaming, thinking process, state management       |
+
+### New E2E/UI Automation
+
+| File Path                                    | Test Target           | Key Coverage Scenarios                 |
+| -------------------------------------------- | --------------------- | -------------------------------------- |
+| `e2e/tests/webview-send-message.spec.ts`     | Webview UI regression | Send message, input interaction        |
+| `e2e/tests/webview-permission.spec.ts`       | Permission drawer UI  | Permission drawer display and response |
+| `e2e-vscode/tests/open-chat.spec.ts`         | VS Code end-to-end    | Command palette opens Webview          |
+| `e2e-vscode/tests/permission-drawer.spec.ts` | VS Code end-to-end    | Webview permission drawer              |
+
+### Infrastructure Files
+
+| File Path                           | Purpose                                                        |
+| ----------------------------------- | -------------------------------------------------------------- |
+| `vitest.config.ts`                  | Test configuration, supports jsdom environment and vscode mock |
+| `src/test-setup.ts`                 | Global test setup, initializes VSCode API mock                 |
+| `src/__mocks__/vscode.ts`           | Complete VSCode API mock implementation                        |
+| `src/webview/test-utils/render.tsx` | WebView component test rendering utilities                     |
+| `src/webview/test-utils/mocks.ts`   | Test data factory functions                                    |
+
+---
+
+## Core Functionality Test Coverage
+
+### 1. WebView Rendering Assurance
+
+**Test Files**: `WebViewContent.test.ts`, `App.test.tsx`
+
+**Coverage Scenarios**:
+
+- ✅ Basic HTML structure integrity (DOCTYPE, html, head, body)
+- ✅ React mount point (#root) exists
+- ✅ CSP (Content-Security-Policy) correctly configured
+- ✅ Script references (webview.js) correct
+- ✅ XSS protection (URI escaping)
+- ✅ Character encoding (UTF-8)
+- ✅ Viewport settings (viewport meta)
+
+**Assurance Effect**: Prevents WebView blank screen, style anomalies, security vulnerabilities
+
+### 2. Panel/Tab Management Assurance
+
+**Test Files**: `PanelManager.test.ts`
+
+**Coverage Scenarios**:
+
+- ✅ First-time Panel creation
+- ✅ Panel reuse (no duplicate creation)
+- ✅ Panel icon setting
+- ✅ Enable script execution
+- ✅ Retain context (retainContextWhenHidden)
+- ✅ Local resource root configuration
+- ✅ Panel reveal
+- ✅ Resource cleanup (dispose)
+- ✅ Error handling (graceful fallback)
+
+**Assurance Effect**: Prevents Tab open failures, chat state loss
+
+### 3. Diff Editor Assurance
+
+**Test Files**: `diff-manager.test.ts`
+
+**Coverage Scenarios**:
+
+- ✅ Diff view creation
+- ✅ Diff visible context setting
+- ✅ Diff title format
+- ✅ Deduplication (prevent duplicate opens)
+- ✅ Preserve focus on WebView
+- ✅ Accept/Cancel Diff
+- ✅ Close all Diffs
+- ✅ Close Diff by path
+
+**Assurance Effect**: Prevents Diff display failures, code change loss
+
+### 4. Message Communication Assurance
+
+**Test Files**: `MessageHandler.test.ts`, `useMessageHandling.test.ts`
+
+**Coverage Scenarios**:
+
+- ✅ Message routing (sendMessage, cancelStreaming, newSession, etc.)
+- ✅ Session ID management
+- ✅ Permission response handling
+- ✅ Login handling
+- ✅ Stream content appending
+- ✅ Error handling
+- ✅ Message add/clear
+- ✅ Thinking process handling
+- ✅ Waiting for response state
+
+**Assurance Effect**: Prevents user message loss, AI response interruption
+
+### 5. Command Registration Assurance
+
+**Test Files**: `commands/index.test.ts`
+
+**Coverage Scenarios**:
+
+- ✅ All commands correctly registered
+- ✅ openChat command (reuse/create Provider)
+- ✅ showDiff command (path resolution, error handling)
+- ✅ openNewChatTab command
+- ✅ login command
+
+**Assurance Effect**: Prevents keyboard shortcut/command palette functionality failures
+
+### 6. VSCode API Communication Assurance
+
+**Test Files**: `useVSCode.test.ts`
+
+**Coverage Scenarios**:
+
+- ✅ API acquisition
+- ✅ postMessage message sending
+- ✅ getState/setState state persistence
+- ✅ Singleton pattern (acquireVsCodeApi called only once)
+- ✅ Development environment fallback
+
+**Assurance Effect**: Prevents WebView-Extension communication failures
+
+---
+
+## Test Run Commands
+
+```bash
+# Run all tests
+npm test
+
+# Run tests with coverage
+npm test -- --coverage
+
+# Run specific test file
+npm test -- src/webview/App.test.tsx
+
+# Watch mode
+npm test -- --watch
+
+# Webview UI automation (Playwright harness)
+npm run test:e2e --workspace=packages/vscode-ide-companion
+
+# VS Code end-to-end UI (optional)
+npm run test:e2e:vscode --workspace=packages/vscode-ide-companion
+
+# Full test suite (including VS Code E2E)
+npm run test:all:full --workspace=packages/vscode-ide-companion
+```
+
+---
+
+## CI Integration
+
+Tests are configured for GitHub Actions integration. Recommended trigger scenarios:
+
+1. **On PR submission** - Ensure changes don't break existing functionality
+2. **Before release** - As quality gate
+3. **Daily builds** - Discover regression issues
+
+---
+
+## Future Improvement Suggestions
+
+### Short-term (Recommended Priority)
+
+1. **Fix pre-existing failing tests** - Complete mocks to pass all tests
+2. **Expand VS Code E2E** - Cover diff accept/cancel, session restoration, and other critical flows
+
+### Mid-term
+
+1. **Increase coverage** - Target 80%+ code coverage
+2. **Performance testing** - Add performance benchmarks for large message scenarios
+3. **Visual regression testing** - Screenshot comparison to detect UI changes
+
+### Long-term
+
+1. **Playwright integration** - Expand UI automation coverage and stability
+2. **Multi-platform testing** - Windows/macOS/Linux coverage
+3. **Mock server** - Simulate real AI response scenarios
+
+---
+
+## Conclusion
+
+This test coverage addresses the core functionality points of the VSCode IDE Companion extension, effectively preventing the following critical issues:
+
+| Issue Type                   | Corresponding Tests                | Coverage Level |
+| ---------------------------- | ---------------------------------- | -------------- |
+| WebView blank screen         | WebViewContent, App                | ✅ Complete    |
+| Tab open failure             | PanelManager                       | ✅ Complete    |
+| Diff display failure         | diff-manager                       | ✅ Complete    |
+| Message loss                 | MessageHandler, useMessageHandling | ✅ Complete    |
+| Command failure              | commands/index                     | ✅ Complete    |
+| VSCode communication failure | useVSCode                          | ✅ Complete    |
+
+**Overall Assessment**: The test suite can provide basic quality assurance for PR merges and version releases.
--- a/packages/vscode-ide-companion/e2e-vscode/fixtures/vscode-fixture.ts
+++ b/packages/vscode-ide-companion/e2e-vscode/fixtures/vscode-fixture.ts
@@ -0,0 +1,216 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+  test as base,
+  expect,
+  _electron,
+  type ElectronApplication,
+  type Page,
+  type Frame,
+} from '@playwright/test';
+import { downloadAndUnzipVSCode } from '@vscode/test-electron';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const extensionPath = path.resolve(__dirname, '../..');
+const workspacePath = path.resolve(__dirname, '../../test/fixtures/workspace');
+const createTempDir = (suffix: string) =>
+  fs.mkdtempSync(path.join(os.tmpdir(), `qwen-code-vscode-${suffix}-`));
+const withTimeout = async <T>(promise: Promise<T>, timeoutMs: number) =>
+  new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(new Error('timeout'));
+    }, timeoutMs);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timer);
+        reject(error);
+      },
+    );
+  });
+
+const resolveVSCodeExecutablePath = async (): Promise<string> => {
+  if (process.env.VSCODE_EXECUTABLE_PATH) {
+    return process.env.VSCODE_EXECUTABLE_PATH;
+  }
+  if (process.platform === 'darwin') {
+    const defaultPath =
+      '/Applications/Visual Studio Code.app/Contents/MacOS/Electron';
+    if (fs.existsSync(defaultPath)) {
+      return defaultPath;
+    }
+  }
+  return downloadAndUnzipVSCode();
+};
+
+const getCommandPaletteShortcut = () =>
+  process.platform === 'darwin' ? 'Meta+Shift+P' : 'Control+Shift+P';
+const getQuickOpenShortcut = () =>
+  process.platform === 'darwin' ? 'Meta+P' : 'Control+P';
+
+export const test = base.extend<{
+  electronApp: ElectronApplication;
+  page: Page;
+}>({
+  electronApp: async ({}, use: (r: ElectronApplication) => Promise<void>) => {
+    const executablePath = await resolveVSCodeExecutablePath();
+    const userDataDir = createTempDir('user-data');
+    const extensionsDir = createTempDir('extensions');
+    const electronApp = await _electron.launch({
+      executablePath,
+      args: [
+        '--no-sandbox',
+        '--disable-gpu-sandbox',
+        '--disable-updates',
+        '--skip-welcome',
+        '--skip-release-notes',
+        `--extensionDevelopmentPath=${extensionPath}`,
+        `--user-data-dir=${userDataDir}`,
+        `--extensions-dir=${extensionsDir}`,
+        '--disable-workspace-trust',
+        '--new-window',
+        workspacePath,
+      ],
+    });
+
+    await use(electronApp);
+    try {
+      await withTimeout(electronApp.evaluate(({ app }) => app.quit()), 3_000);
+    } catch {
+      // Ignore if the app is already closed or evaluate fails.
+    }
+    try {
+      await withTimeout(electronApp.context().close(), 5_000);
+    } catch {
+      // Ignore context close errors.
+    }
+    try {
+      await withTimeout(electronApp.close(), 10_000);
+    } catch {
+      try {
+        await withTimeout(electronApp.kill(), 5_000);
+      } catch {
+        const process = electronApp.process();
+        if (process && !process.killed) {
+          process.kill('SIGKILL');
+        }
+      }
+    }
+  },
+  page: async ({ electronApp }: { electronApp: ElectronApplication }, use: (r: Page) => Promise<void>) => {
+    const page = await electronApp.firstWindow();
+    await page.waitForLoadState('domcontentloaded');
+    await use(page);
+    await page.close().catch(() => undefined);
+  },
+});
+
+export { expect };
+
+export const waitForWebviewReady = async (page: Page) => {
+  await page.waitForSelector('iframe.webview', {
+    state: 'visible',
+    timeout: 60_000,
+  });
+
+  const deadline = Date.now() + 60_000;
+  while (Date.now() < deadline) {
+    for (const frame of page.frames()) {
+      if (frame === page.mainFrame()) {
+        continue;
+      }
+      const url = frame.url();
+      if (!url.startsWith('vscode-webview://')) {
+        continue;
+      }
+      try {
+        const hasRoot = await frame.evaluate(
+          () => Boolean(document.querySelector('#root')),
+        );
+        if (hasRoot) {
+          return frame;
+        }
+      } catch {
+        // Ignore detached/cross-origin frames during probing.
+      }
+    }
+    await page.waitForTimeout(500);
+  }
+
+  const frameUrls = page.frames().map((frame) => frame.url());
+  throw new Error(
+    `Qwen Code webview not ready. Frames: ${frameUrls.join(', ')}`,
+  );
+};
+
+export const runCommand = async (page: Page, command: string) => {
+  const input = page.locator('.quick-input-widget input');
+  await page.locator('.monaco-workbench').waitFor();
+  await page.click('.monaco-workbench');
+  await page.keyboard.press('Escape').catch(() => undefined);
+
+  const openInput = async (shortcut: string) => {
+    await page.keyboard.press(shortcut);
+    return input.waitFor({ state: 'visible', timeout: 2_000 }).then(
+      () => true,
+      () => false,
+    );
+  };
+
+  const commandRow = page
+    .locator('.quick-input-list .monaco-list-row', { hasText: command })
+    .first();
+
+  const tryCommand = async (shortcut: string, query: string) => {
+    const opened = await openInput(shortcut);
+    if (!opened) {
+      return false;
+    }
+
+    await input.fill(query);
+    const found = await commandRow
+      .waitFor({ state: 'visible', timeout: 2_000 })
+      .then(
+        () => true,
+        () => false,
+      );
+
+    if (found) {
+      await commandRow.click();
+      await input.waitFor({ state: 'hidden' }).catch(() => undefined);
+      return true;
+    }
+
+    await page.keyboard.press('Escape').catch(() => undefined);
+    return false;
+  };
+
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    if (await tryCommand(getQuickOpenShortcut(), `>${command}`)) {
+      return;
+    }
+    if (await tryCommand(getCommandPaletteShortcut(), command)) {
+      return;
+    }
+    if (await tryCommand('F1', command)) {
+      return;
+    }
+    await page.waitForTimeout(1_000);
+  }
+
+  throw new Error(`Command not available yet: ${command}`);
+};
+
+export const dispatchWebviewMessage = async (
+  webview: Frame,
+  payload: unknown,
+) => {
+  await webview.evaluate((message: unknown) => {
+    window.dispatchEvent(new MessageEvent('message', { data: message }));
+  }, payload);
+};
--- a/packages/vscode-ide-companion/e2e-vscode/playwright.config.ts
+++ b/packages/vscode-ide-companion/e2e-vscode/playwright.config.ts
@@ -0,0 +1,56 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { chromium, defineConfig } from '@playwright/test';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const chromiumExecutablePath = (() => {
+  const defaultPath = chromium.executablePath();
+  const candidates = [defaultPath];
+
+  if (defaultPath.includes('mac-x64')) {
+    candidates.push(defaultPath.replace('mac-x64', 'mac-arm64'));
+  }
+
+  const headlessCandidates = candidates.map((candidate) =>
+    candidate
+      .replace('/chromium-', '/chromium_headless_shell-')
+      .replace('/chrome-mac-x64/', '/chrome-headless-shell-mac-x64/')
+      .replace('/chrome-mac-arm64/', '/chrome-headless-shell-mac-arm64/')
+      .replace(
+        '/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing',
+        '/chrome-headless-shell',
+      )
+      .replace('/Chromium.app/Contents/MacOS/Chromium', '/chrome-headless-shell'),
+  );
+
+  for (const candidate of [...headlessCandidates, ...candidates]) {
+    if (fs.existsSync(candidate)) {
+      return candidate;
+    }
+  }
+
+  return undefined;
+})();
+const launchOptions = chromiumExecutablePath
+  ? { executablePath: chromiumExecutablePath }
+  : {};
+
+export default defineConfig({
+  testDir: path.resolve(__dirname, 'tests'),
+  outputDir: path.resolve(__dirname, '..', 'test-results'), // 输出到父级的 test-results 目录
+  timeout: 90_000,
+  expect: { timeout: 15_000 },
+  use: {
+    headless: true,
+    launchOptions,
+    viewport: { width: 1440, height: 900 },
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+  },
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: [
+    ['html', { outputFolder: path.resolve(__dirname, '..', 'playwright-report') }], // 输出HTML报告到父级的 playwright-report 目录
+  ],
+});
--- a/packages/vscode-ide-companion/e2e-vscode/tests/open-chat.spec.ts
+++ b/packages/vscode-ide-companion/e2e-vscode/tests/open-chat.spec.ts
@@ -0,0 +1,28 @@
+import {
+  test,
+  expect,
+  runCommand,
+  dispatchWebviewMessage,
+  waitForWebviewReady,
+} from '../fixtures/vscode-fixture.js';
+
+test('opens Qwen Code webview via command palette', async ({
+  page,
+}: {
+  page: import('@playwright/test').Page;
+}) => {
+  await runCommand(page, 'Qwen Code: Open');
+  const webview = await waitForWebviewReady(page);
+
+  // Explicitly set authentication state to true to ensure input form is displayed
+  await dispatchWebviewMessage(webview, {
+    type: 'authState',
+    data: { authenticated: true },
+  });
+
+  // Wait a bit for the UI to update after auth state change
+  await page.waitForTimeout(500);
+
+  const input = webview.getByRole('textbox', { name: 'Message input' });
+  await expect(input).toBeVisible();
+});
--- a/packages/vscode-ide-companion/e2e-vscode/tests/permission-drawer.spec.ts
+++ b/packages/vscode-ide-companion/e2e-vscode/tests/permission-drawer.spec.ts
@@ -0,0 +1,48 @@
+import {
+  test,
+  expect,
+  runCommand,
+  dispatchWebviewMessage,
+  waitForWebviewReady,
+} from '../fixtures/vscode-fixture.js';
+
+test('shows permission drawer and closes after allow', async ({
+  page,
+}: {
+  page: import('@playwright/test').Page;
+}) => {
+  await runCommand(page, 'Qwen Code: Open');
+  const webview = await waitForWebviewReady(page);
+
+  await dispatchWebviewMessage(webview, {
+    type: 'authState',
+    data: { authenticated: true },
+  });
+  await dispatchWebviewMessage(webview, {
+    type: 'permissionRequest',
+    data: {
+      options: [
+        { name: 'Allow once', kind: 'allow_once', optionId: 'allow_once' },
+        { name: 'Reject', kind: 'reject', optionId: 'reject' },
+      ],
+      toolCall: {
+        toolCallId: 'tc-1',
+        title: 'Edit file',
+        kind: 'edit',
+        locations: [{ path: '/repo/src/file.ts' }],
+        status: 'pending',
+      },
+    },
+  });
+
+  const allowButton = webview.getByRole('button', { name: 'Allow once' });
+  await expect(allowButton).toBeVisible();
+
+  // Wait a bit for any potential notifications to settle, then try clicking
+  await page.waitForTimeout(500);
+
+  // Use force click to bypass potential overlays
+  await allowButton.click({ force: true });
+
+  await expect(allowButton).toBeHidden();
+});
--- a/packages/vscode-ide-companion/e2e/fixtures/webview-harness.html
+++ b/packages/vscode-ide-companion/e2e/fixtures/webview-harness.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Qwen Code Webview Harness</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+      }
+      #root {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body data-extension-uri="https://example.com/">
+    <div id="root"></div>
+    <script>
+      window.__postedMessages = [];
+      window.__vscodeState = {};
+      window.__EXTENSION_URI__ =
+        document.body.getAttribute('data-extension-uri') || '';
+      window.acquireVsCodeApi = () => ({
+        postMessage: (message) => window.__postedMessages.push(message),
+        getState: () => window.__vscodeState,
+        setState: (state) => {
+          window.__vscodeState = state;
+        },
+      });
+    </script>
+    <script src="../../dist/webview.js"></script>
+  </body>
+</html>
--- a/packages/vscode-ide-companion/e2e/playwright.config.ts
+++ b/packages/vscode-ide-companion/e2e/playwright.config.ts
@@ -0,0 +1,64 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { chromium, defineConfig } from '@playwright/test';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const fixturesPath = path.resolve(__dirname, 'fixtures');
+const baseURL = pathToFileURL(`${fixturesPath}${path.sep}`).toString();
+const chromiumExecutablePath = (() => {
+  const defaultPath = chromium.executablePath();
+  const candidates = [defaultPath];
+
+  if (defaultPath.includes('mac-x64')) {
+    candidates.push(defaultPath.replace('mac-x64', 'mac-arm64'));
+  }
+
+  const headlessCandidates = candidates.map((candidate) =>
+    candidate
+      .replace('/chromium-', '/chromium_headless_shell-')
+      .replace('/chrome-mac-x64/', '/chrome-headless-shell-mac-x64/')
+      .replace('/chrome-mac-arm64/', '/chrome-headless-shell-mac-arm64/')
+      .replace(
+        '/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing',
+        '/chrome-headless-shell',
+      )
+      .replace(
+        '/Chromium.app/Contents/MacOS/Chromium',
+        '/chrome-headless-shell',
+      ),
+  );
+
+  for (const candidate of [...headlessCandidates, ...candidates]) {
+    if (fs.existsSync(candidate)) {
+      return candidate;
+    }
+  }
+
+  return undefined;
+})();
+const launchOptions = chromiumExecutablePath
+  ? { executablePath: chromiumExecutablePath }
+  : {};
+
+export default defineConfig({
+  testDir: path.resolve(__dirname, 'tests'),
+  outputDir: path.resolve(__dirname, '..', 'test-results'), // 输出到父级的 test-results 目录
+  timeout: 60_000,
+  expect: { timeout: 10_000 },
+  use: {
+    baseURL,
+    headless: true,
+    launchOptions,
+    viewport: { width: 1280, height: 720 },
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+  },
+  reporter: [
+    [
+      'html',
+      { outputFolder: path.resolve(__dirname, '..', 'playwright-report') },
+    ], // 输出HTML报告到父级的 playwright-report 目录
+  ],
+  retries: process.env.CI ? 1 : 0,
+});
--- a/packages/vscode-ide-companion/e2e/tests/webview-permission.spec.ts
+++ b/packages/vscode-ide-companion/e2e/tests/webview-permission.spec.ts
@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+
+declare global {
+  interface Window {
+    __postedMessages?: Array<{ type?: string; data?: unknown }>;
+  }
+}
+
+const sendWebviewMessage = async (page: Page, payload: unknown) => {
+  await page.evaluate((message: unknown) => {
+    window.dispatchEvent(new MessageEvent('message', { data: message }));
+  }, payload);
+};
+
+test.beforeEach(async ({ page }: { page: Page }) => {
+  await page.goto('webview-harness.html');
+  await page.waitForFunction(
+    () => document.querySelector('#root')?.children.length,
+  );
+  await page.waitForTimeout(50);
+  await sendWebviewMessage(page, {
+    type: 'authState',
+    data: { authenticated: true },
+  });
+  await expect(
+    page.getByRole('textbox', { name: 'Message input' }),
+  ).toBeVisible();
+});
+
+test('permission drawer sends allow response', async ({ page }: { page: Page }) => {
+  await sendWebviewMessage(page, {
+    type: 'permissionRequest',
+    data: {
+      options: [
+        { name: 'Allow once', kind: 'allow_once', optionId: 'allow_once' },
+        { name: 'Reject', kind: 'reject', optionId: 'reject' },
+      ],
+      toolCall: {
+        toolCallId: 'tc-1',
+        title: 'Edit file',
+        kind: 'edit',
+        locations: [{ path: '/repo/src/file.ts' }],
+        status: 'pending',
+      },
+    },
+  });
+
+  const allowButton = page.getByRole('button', { name: 'Allow once' });
+  await expect(allowButton).toBeVisible();
+  await allowButton.click();
+
+  await page.waitForFunction(
+    () =>
+      Array.isArray(window.__postedMessages) &&
+      window.__postedMessages.some((msg) => msg?.type === 'permissionResponse'),
+  );
+
+  const postedMessages = await page.evaluate(() => window.__postedMessages);
+  expect(postedMessages).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        type: 'permissionResponse',
+        data: { optionId: 'allow_once' },
+      }),
+    ]),
+  );
+});
--- a/packages/vscode-ide-companion/e2e/tests/webview-send-message.spec.ts
+++ b/packages/vscode-ide-companion/e2e/tests/webview-send-message.spec.ts
@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+
+declare global {
+  interface Window {
+    __postedMessages?: Array<{ type?: string; data?: unknown }>;
+  }
+}
+
+const sendWebviewMessage = async (page: Page, payload: unknown) => {
+  await page.evaluate((message: unknown) => {
+    window.dispatchEvent(new MessageEvent('message', { data: message }));
+  }, payload);
+};
+
+test.beforeEach(async ({ page }: { page: Page }) => {
+  await page.goto('webview-harness.html');
+  await page.waitForFunction(
+    () => document.querySelector('#root')?.children.length,
+  );
+  await page.waitForTimeout(50);
+  await sendWebviewMessage(page, {
+    type: 'authState',
+    data: { authenticated: true },
+  });
+  await expect(
+    page.getByRole('textbox', { name: 'Message input' }),
+  ).toBeVisible();
+});
+
+test('sends a message when pressing Enter', async ({ page }: { page: Page }) => {
+  const input = page.getByRole('textbox', { name: 'Message input' });
+  await input.click();
+  await page.keyboard.type('Hello from Playwright');
+  await page.keyboard.press('Enter');
+
+  await page.waitForFunction(
+    () =>
+      Array.isArray(window.__postedMessages) &&
+      window.__postedMessages.some((msg) => msg?.type === 'sendMessage'),
+  );
+
+  const postedMessages = await page.evaluate(() => window.__postedMessages);
+  expect(postedMessages).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        type: 'sendMessage',
+        data: expect.objectContaining({ text: 'Hello from Playwright' }),
+      }),
+    ]),
+  );
+});
--- a/packages/vscode-ide-companion/eslint.config.mjs
+++ b/packages/vscode-ide-companion/eslint.config.mjs
@@ -10,9 +10,6 @@ import reactHooks from 'eslint-plugin-react-hooks';
 import importPlugin from 'eslint-plugin-import';

 export default [
-  {
-    files: ['**/*.ts', '**/*.tsx'],
-  },
  {
    files: ['**/*.js', '**/*.cjs', '**/*.mjs'],
    languageOptions: {
@@ -28,7 +25,91 @@ export default [
      },
    },
  },
+  // Default config for all TS files (general) - no React hooks rules
  {
+    files: ['**/*.ts'],
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      import: importPlugin,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2022,
+      sourceType: 'module',
+    },
+
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'warn',
+        {
+          selector: 'import',
+          format: ['camelCase', 'PascalCase'],
+        },
+      ],
+      'react-hooks/rules-of-hooks': 'off',  // Disable for all .ts files by default
+      'react-hooks/exhaustive-deps': 'off', // Disable for all .ts files by default
+      // Restrict deep imports but allow known-safe exceptions used by the webview
+      // - react-dom/client: required for React 18's createRoot API
+      // - react-dom/test-utils: required for testing React components
+      // - ./styles/**: local CSS modules loaded by the webview
+      'import/no-internal-modules': [
+        'error',
+        {
+          allow: ['react-dom/client', 'react-dom/test-utils', './styles/**'],
+        },
+      ],
+
+      curly: 'warn',
+      eqeqeq: 'warn',
+      'no-throw-literal': 'warn',
+      semi: 'warn',
+    },
+  },
+  // Specific config for test files (override above) - no React hooks rules
+  {
+    files: ['**/*{test,spec}.{ts,tsx}', '**/__tests__/**', '**/test/**', 'e2e/**', 'e2e-vscode/**'],
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      import: importPlugin,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2022,
+      sourceType: 'module',
+    },
+
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'warn',
+        {
+          selector: 'import',
+          format: ['camelCase', 'PascalCase'],
+        },
+      ],
+      'react-hooks/rules-of-hooks': 'off',  // Explicitly disable for test files
+      'react-hooks/exhaustive-deps': 'off', // Explicitly disable for test files
+      // Restrict deep imports but allow known-safe exceptions used by the webview
+      // - react-dom/client: required for React 18's createRoot API
+      // - react-dom/test-utils: required for testing React components
+      // - ./styles/**: local CSS modules loaded by the webview
+      'import/no-internal-modules': [
+        'error',
+        {
+          allow: ['react-dom/client', 'react-dom/test-utils', './styles/**'],
+        },
+      ],
+
+      curly: 'warn',
+      eqeqeq: 'warn',
+      'no-throw-literal': 'warn',
+      semi: 'warn',
+    },
+  },
+  // JSX/TSX files in src - enable React hooks rules (most specific - should override others)
+  {
+    files: ['src/**/*.{tsx,jsx}'],
    plugins: {
      '@typescript-eslint': typescriptEslint,
      'react-hooks': reactHooks,
@@ -54,15 +135,63 @@ export default [
          format: ['camelCase', 'PascalCase'],
        },
      ],
-      'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/exhaustive-deps': 'error',
+      'react-hooks/rules-of-hooks': 'error',      // Enable React hooks rule for JSX/TSX files in src
+      'react-hooks/exhaustive-deps': 'error',    // Enable React hooks rule for JSX/TSX files in src
      // Restrict deep imports but allow known-safe exceptions used by the webview
      // - react-dom/client: required for React 18's createRoot API
+      // - react-dom/test-utils: required for testing React components
      // - ./styles/**: local CSS modules loaded by the webview
      'import/no-internal-modules': [
        'error',
        {
-          allow: ['react-dom/client', './styles/**'],
+          allow: ['react-dom/client', 'react-dom/test-utils', './styles/**'],
+        },
+      ],
+
+      curly: 'warn',
+      eqeqeq: 'warn',
+      'no-throw-literal': 'warn',
+      semi: 'warn',
+    },
+  },
+  // Special webview TS files that are used in React context - enable React hooks rules
+  {
+    files: ['src/webview/**/*.ts'],
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      'react-hooks': reactHooks,
+      import: importPlugin,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'warn',
+        {
+          selector: 'import',
+          format: ['camelCase', 'PascalCase'],
+        },
+      ],
+      'react-hooks/rules-of-hooks': 'error',      // Enable React hooks rule for webview .ts files
+      'react-hooks/exhaustive-deps': 'error',    // Enable React hooks rule for webview .ts files
+      // Restrict deep imports but allow known-safe exceptions used by the webview
+      // - react-dom/client: required for React 18's createRoot API
+      // - react-dom/test-utils: required for testing React components
+      // - ./styles/**: local CSS modules loaded by the webview
+      'import/no-internal-modules': [
+        'error',
+        {
+          allow: ['react-dom/client', 'react-dom/test-utils', './styles/**'],
        },
      ],

--- a/packages/vscode-ide-companion/package.json
+++ b/packages/vscode-ide-companion/package.json
@@ -2,7 +2,7 @@
  "name": "qwen-code-vscode-ide-companion",
  "displayName": "Qwen Code Companion",
  "description": "Enable Qwen Code with direct access to your VS Code workspace.",
-  "version": "0.7.0",
+  "version": "0.7.1",
  "publisher": "qwenlm",
  "icon": "assets/icon.png",
  "repository": {
@@ -127,9 +127,17 @@
    "package": "vsce package --no-dependencies",
    "test": "vitest run",
    "test:ci": "vitest run --coverage",
+    "test:integration": "node ./test/runTest.cjs",
+    "test:e2e": "playwright test -c e2e/playwright.config.ts",
+    "test:e2e:vscode": "playwright test -c e2e-vscode/playwright.config.ts",
+    "test:all": "npm run test && npm run test:integration && npm run test:e2e",
+    "test:all:full": "npm run test:all && npm run test:e2e:vscode",
    "validate:notices": "node ./scripts/validate-notices.js"
  },
  "devDependencies": {
+    "@playwright/test": "^1.57.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
    "@types/cors": "^2.8.19",
    "@types/express": "^5.0.3",
    "@types/markdown-it": "^14.1.2",
@@ -140,6 +148,7 @@
    "@types/vscode": "^1.85.0",
    "@typescript-eslint/eslint-plugin": "^8.31.1",
    "@typescript-eslint/parser": "^8.31.1",
+    "@vscode/test-electron": "^2.5.2",
    "@vscode/vsce": "^3.6.0",
    "autoprefixer": "^10.4.22",
    "esbuild": "^0.25.3",
@@ -147,18 +156,21 @@
    "eslint-plugin-react-hooks": "^5.2.0",
    "npm-run-all2": "^8.0.2",
    "postcss": "^8.5.6",
+    "react-test-renderer": "^19.2.3",
    "tailwindcss": "^3.4.18",
    "typescript": "^5.8.3",
    "vitest": "^3.2.4"
  },
  "dependencies": {
-    "semver": "^7.7.2",
    "@modelcontextprotocol/sdk": "^1.25.1",
+    "@qwen-code/qwen-code-core": "file:../core",
    "cors": "^2.8.5",
    "express": "^5.1.0",
    "markdown-it": "^14.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-is": "^19.2.3",
+    "semver": "^7.7.2",
    "zod": "^3.25.76"
  }
 }
--- a/packages/vscode-ide-companion/postcss.config.cjs
+++ b/packages/vscode-ide-companion/postcss.config.cjs
--- a/packages/vscode-ide-companion/src/mocks/vscode.ts
+++ b/packages/vscode-ide-companion/src/mocks/vscode.ts
@@ -0,0 +1,365 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * VSCode API Mock
+ *
+ * Provides comprehensive VSCode API mock implementations for testing.
+ * This file is referenced via the alias configuration in vitest.config.ts.
+ */
+
+import { vi } from 'vitest';
+
+// Window API - for creating UI elements
+export const window = {
+  showInformationMessage: vi.fn(),
+  showErrorMessage: vi.fn(),
+  showWarningMessage: vi.fn(),
+  createOutputChannel: vi.fn(() => ({
+    appendLine: vi.fn(),
+    show: vi.fn(),
+    dispose: vi.fn(),
+  })),
+  createWebviewPanel: vi.fn(),
+  createTerminal: vi.fn(() => ({
+    show: vi.fn(),
+    sendText: vi.fn(),
+  })),
+  onDidChangeActiveTextEditor: vi.fn(() => ({ dispose: vi.fn() })),
+  onDidChangeTextEditorSelection: vi.fn(() => ({ dispose: vi.fn() })),
+  activeTextEditor: undefined,
+  visibleTextEditors: [],
+  tabGroups: {
+    all: [],
+    activeTabGroup: {
+      viewColumn: 1,
+      tabs: [],
+      isActive: true,
+      activeTab: undefined,
+    },
+    close: vi.fn(),
+  },
+  showTextDocument: vi.fn(),
+  showWorkspaceFolderPick: vi.fn(),
+  registerWebviewPanelSerializer: vi.fn(() => ({ dispose: vi.fn() })),
+  withProgress: vi.fn(
+    (
+      _options: unknown,
+      callback: (progress: { report: () => void }) => unknown,
+    ) => callback({ report: vi.fn() }),
+  ),
+};
+
+// Workspace API - for accessing workspace
+export const workspace = {
+  workspaceFolders: [] as unknown[],
+  onDidCloseTextDocument: vi.fn(() => ({ dispose: vi.fn() })),
+  onDidDeleteFiles: vi.fn(() => ({ dispose: vi.fn() })),
+  onDidRenameFiles: vi.fn(() => ({ dispose: vi.fn() })),
+  onDidChangeWorkspaceFolders: vi.fn(() => ({ dispose: vi.fn() })),
+  onDidGrantWorkspaceTrust: vi.fn(() => ({ dispose: vi.fn() })),
+  registerTextDocumentContentProvider: vi.fn(() => ({ dispose: vi.fn() })),
+  registerFileSystemProvider: vi.fn(() => ({ dispose: vi.fn() })),
+  openTextDocument: vi.fn(),
+  isTrusted: true,
+};
+
+// Commands API - for registering and executing commands
+export const commands = {
+  registerCommand: vi.fn(() => ({ dispose: vi.fn() })),
+  executeCommand: vi.fn(),
+  getCommands: vi.fn(() => Promise.resolve([])),
+};
+
+// URI utility class
+export const Uri = {
+  file: (path: string) => ({
+    fsPath: path,
+    scheme: 'file',
+    path,
+    authority: '',
+    query: '',
+    fragment: '',
+    toString: () => `file://${path}`,
+    toJSON: () => ({ scheme: 'file', path }),
+    with: vi.fn(),
+  }),
+  joinPath: vi.fn((base: { fsPath: string }, ...paths: string[]) => ({
+    fsPath: `${base.fsPath}/${paths.join('/')}`,
+    scheme: 'file',
+    path: `${base.fsPath}/${paths.join('/')}`,
+    toString: () => `file://${base.fsPath}/${paths.join('/')}`,
+  })),
+  from: vi.fn(
+    ({
+      scheme,
+      path,
+      query,
+    }: {
+      scheme: string;
+      path: string;
+      query?: string;
+    }) => ({
+      scheme,
+      path,
+      fsPath: path,
+      authority: '',
+      query: query || '',
+      fragment: '',
+      toString: () => `${scheme}://${path}${query ? '?' + query : ''}`,
+      toJSON: () => ({ scheme, path, query }),
+      with: vi.fn(),
+    }),
+  ),
+  parse: vi.fn((uri: string) => ({
+    scheme: 'file',
+    fsPath: uri.replace('file://', ''),
+    path: uri.replace('file://', ''),
+    authority: '',
+    query: '',
+    fragment: '',
+    toString: () => uri,
+    toJSON: () => ({ scheme: 'file', path: uri }),
+    with: vi.fn(),
+  })),
+};
+
+// Extension related
+export const ExtensionMode = {
+  Development: 1,
+  Production: 2,
+  Test: 3,
+};
+
+// Event emitter
+export class EventEmitter<T = unknown> {
+  private listeners: Array<(e: T) => void> = [];
+
+  event = (listener: (e: T) => void) => {
+    this.listeners.push(listener);
+    return {
+      dispose: () => this.listeners.splice(this.listeners.indexOf(listener), 1),
+    };
+  };
+
+  fire = (data: T) => {
+    this.listeners.forEach((listener) => listener(data));
+  };
+
+  dispose = vi.fn();
+}
+
+// Extension management
+export const extensions = {
+  getExtension: vi.fn(),
+};
+
+// ViewColumn enum
+export const ViewColumn = {
+  One: 1,
+  Two: 2,
+  Three: 3,
+  Four: 4,
+  Five: 5,
+  Six: 6,
+  Seven: 7,
+  Eight: 8,
+  Nine: 9,
+  Active: -1,
+  Beside: -2,
+};
+
+// Progress location
+export const ProgressLocation = {
+  Notification: 15,
+  Window: 10,
+  SourceControl: 1,
+};
+
+// Text editor selection change kind
+export const TextEditorSelectionChangeKind = {
+  Keyboard: 1,
+  Mouse: 2,
+  Command: 3,
+};
+
+// Disposable
+export class Disposable {
+  static from(...disposables: Array<{ dispose: () => void }>) {
+    return {
+      dispose: () => disposables.forEach((d) => d.dispose()),
+    };
+  }
+}
+
+// Position
+export class Position {
+  constructor(
+    readonly line: number,
+    readonly character: number,
+  ) {}
+
+  isBefore(other: Position): boolean {
+    return (
+      this.line < other.line ||
+      (this.line === other.line && this.character < other.character)
+    );
+  }
+
+  isAfter(other: Position): boolean {
+    return (
+      this.line > other.line ||
+      (this.line === other.line && this.character > other.character)
+    );
+  }
+}
+
+// Range
+export class Range {
+  constructor(
+    readonly start: Position,
+    readonly end: Position,
+  ) {}
+
+  get isEmpty(): boolean {
+    return (
+      this.start.line === this.end.line &&
+      this.start.character === this.end.character
+    );
+  }
+}
+
+// Selection
+export class Selection extends Range {
+  constructor(
+    readonly anchor: Position,
+    readonly active: Position,
+  ) {
+    super(anchor, active);
+  }
+}
+
+// TextEdit
+export class TextEdit {
+  static replace(range: Range, newText: string) {
+    return { range, newText };
+  }
+
+  static insert(position: Position, newText: string) {
+    return { range: new Range(position, position), newText };
+  }
+
+  static delete(range: Range) {
+    return { range, newText: '' };
+  }
+}
+
+// WorkspaceEdit
+export class WorkspaceEdit {
+  private edits = new Map<string, TextEdit[]>();
+
+  replace(uri: { toString: () => string }, range: Range, newText: string) {
+    const key = uri.toString();
+    if (!this.edits.has(key)) {
+      this.edits.set(key, []);
+    }
+    this.edits.get(key)!.push(TextEdit.replace(range, newText));
+  }
+
+  insert(uri: { toString: () => string }, position: Position, newText: string) {
+    const key = uri.toString();
+    if (!this.edits.has(key)) {
+      this.edits.set(key, []);
+    }
+    this.edits.get(key)!.push(TextEdit.insert(position, newText));
+  }
+
+  delete(uri: { toString: () => string }, range: Range) {
+    const key = uri.toString();
+    if (!this.edits.has(key)) {
+      this.edits.set(key, []);
+    }
+    this.edits.get(key)!.push(TextEdit.delete(range));
+  }
+}
+
+// CancellationTokenSource
+export class CancellationTokenSource {
+  token = {
+    isCancellationRequested: false,
+    onCancellationRequested: vi.fn(() => ({ dispose: vi.fn() })),
+  };
+
+  cancel() {
+    this.token.isCancellationRequested = true;
+  }
+
+  dispose() {}
+}
+
+// FileSystemError
+export class FileSystemError extends Error {
+  static FileNotFound(uri?: { toString: () => string }) {
+    return new FileSystemError(
+      `File not found: ${uri?.toString() || 'unknown'}`,
+    );
+  }
+
+  static FileExists(uri?: { toString: () => string }) {
+    return new FileSystemError(`File exists: ${uri?.toString() || 'unknown'}`);
+  }
+
+  static FileNotADirectory(uri?: { toString: () => string }) {
+    return new FileSystemError(
+      `Not a directory: ${uri?.toString() || 'unknown'}`,
+    );
+  }
+
+  static FileIsADirectory(uri?: { toString: () => string }) {
+    return new FileSystemError(
+      `Is a directory: ${uri?.toString() || 'unknown'}`,
+    );
+  }
+
+  static NoPermissions(uri?: { toString: () => string }) {
+    return new FileSystemError(
+      `No permissions: ${uri?.toString() || 'unknown'}`,
+    );
+  }
+
+  static Unavailable(uri?: { toString: () => string }) {
+    return new FileSystemError(`Unavailable: ${uri?.toString() || 'unknown'}`);
+  }
+}
+
+// FileType
+export const FileType = {
+  Unknown: 0,
+  File: 1,
+  Directory: 2,
+  SymbolicLink: 64,
+};
+
+// Default export all mocks
+export default {
+  window,
+  workspace,
+  commands,
+  Uri,
+  ExtensionMode,
+  EventEmitter,
+  extensions,
+  ViewColumn,
+  ProgressLocation,
+  TextEditorSelectionChangeKind,
+  Disposable,
+  Position,
+  Range,
+  Selection,
+  TextEdit,
+  WorkspaceEdit,
+  CancellationTokenSource,
+  FileSystemError,
+  FileType,
+};
--- a/packages/vscode-ide-companion/src/commands/index.test.ts
+++ b/packages/vscode-ide-companion/src/commands/index.test.ts
@@ -0,0 +1,518 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Commands Tests
+ *
+ * Test objective: Ensure all VSCode commands are correctly registered and executed, preventing command failures.
+ *
+ * Key test scenarios:
+ * 1. Command registration - Ensure all commands are properly registered with VSCode
+ * 2. openChat - Ensure the chat panel can be opened
+ * 3. showDiff - Ensure Diff view can be displayed
+ * 4. openNewChatTab - Ensure a new chat Tab can be opened
+ * 5. login - Ensure the login flow can be triggered
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import * as vscode from 'vscode';
+import {
+  registerNewCommands,
+  openChatCommand,
+  showDiffCommand,
+  openNewChatTabCommand,
+  loginCommand,
+} from './index.js';
+import type { DiffManager } from '../diff-manager.js';
+import type { WebViewProvider } from '../webview/WebViewProvider.js';
+
+describe('Commands', () => {
+  let mockContext: vscode.ExtensionContext;
+  let mockLog: (message: string) => void;
+  let mockDiffManager: DiffManager;
+  let mockWebViewProviders: WebViewProvider[];
+  let mockGetWebViewProviders: () => WebViewProvider[];
+  let mockCreateWebViewProvider: () => WebViewProvider;
+  let registeredCommands: Map<string, (...args: unknown[]) => unknown>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    registeredCommands = new Map();
+
+    // Mock context
+    mockContext = {
+      subscriptions: [],
+    } as unknown as vscode.ExtensionContext;
+
+    // Mock logger
+    mockLog = vi.fn();
+
+    // Mock DiffManager
+    mockDiffManager = {
+      showDiff: vi.fn().mockResolvedValue(undefined),
+    } as unknown as DiffManager;
+
+    // Mock WebViewProviders
+    mockWebViewProviders = [];
+    mockGetWebViewProviders = () => mockWebViewProviders;
+
+    // Mock createWebViewProvider
+    const mockProvider = {
+      show: vi.fn().mockResolvedValue(undefined),
+      forceReLogin: vi.fn().mockResolvedValue(undefined),
+    } as unknown as WebViewProvider;
+    mockCreateWebViewProvider = vi.fn(() => mockProvider);
+
+    // Mock vscode.commands.registerCommand to capture handlers
+    vi.mocked(vscode.commands.registerCommand).mockImplementation(
+      (command: string, callback: (...args: unknown[]) => unknown) => {
+        registeredCommands.set(command, callback);
+        return { dispose: vi.fn() } as vscode.Disposable;
+      },
+    );
+
+    // Mock workspace folders
+    vi.mocked(vscode.workspace).workspaceFolders = [
+      {
+        uri: { fsPath: '/workspace' },
+      } as vscode.WorkspaceFolder,
+    ];
+
+    vi.mocked(vscode.Uri.joinPath).mockImplementation(
+      (base: vscode.Uri, ...paths: string[]) =>
+        ({
+          fsPath: `${base.fsPath}/${paths.join('/')}`,
+        }) as vscode.Uri,
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('registerNewCommands', () => {
+    /**
+     * Test: Command registration
+     *
+     * Verifies registerNewCommands correctly registers all commands.
+     * If commands are not registered, users cannot use keyboard shortcuts or command palette.
+     */
+    it('should register all required commands', () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      expect(vscode.commands.registerCommand).toHaveBeenCalledWith(
+        openChatCommand,
+        expect.any(Function),
+      );
+      expect(vscode.commands.registerCommand).toHaveBeenCalledWith(
+        showDiffCommand,
+        expect.any(Function),
+      );
+      expect(vscode.commands.registerCommand).toHaveBeenCalledWith(
+        openNewChatTabCommand,
+        expect.any(Function),
+      );
+      expect(vscode.commands.registerCommand).toHaveBeenCalledWith(
+        loginCommand,
+        expect.any(Function),
+      );
+    });
+
+    /**
+     * Test: Subscription management
+     *
+     * Verifies command disposables are added to context.subscriptions.
+     * Ensures commands are properly cleaned up when extension is deactivated.
+     */
+    it('should add disposables to context.subscriptions', () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      // Should register 4 commands, each added to subscriptions
+      expect(mockContext.subscriptions.length).toBe(4);
+    });
+  });
+
+  describe('openChat command', () => {
+    /**
+     * Test: Open existing chat panel
+     *
+     * Verifies that when a WebViewProvider already exists, it uses the existing provider.
+     * Prevents creating unnecessary new panels.
+     */
+    it('should show existing provider when providers exist', async () => {
+      const mockProvider = {
+        show: vi.fn().mockResolvedValue(undefined),
+      } as unknown as WebViewProvider;
+      mockWebViewProviders.push(mockProvider);
+
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(openChatCommand);
+      await handler?.();
+
+      expect(mockProvider.show).toHaveBeenCalled();
+      expect(mockCreateWebViewProvider).not.toHaveBeenCalled();
+    });
+
+    /**
+     * Test: Create new chat panel
+     *
+     * Verifies that when no provider exists, a new provider is created.
+     * Ensures users can always open the chat interface.
+     */
+    it('should create new provider when no providers exist', async () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(openChatCommand);
+      await handler?.();
+
+      expect(mockCreateWebViewProvider).toHaveBeenCalled();
+    });
+
+    /**
+     * Test: Use the latest provider
+     *
+     * Verifies that when multiple providers exist, the last one (newest) is used.
+     */
+    it('should use the last provider when multiple exist', async () => {
+      const firstProvider = {
+        show: vi.fn().mockResolvedValue(undefined),
+      } as unknown as WebViewProvider;
+      const lastProvider = {
+        show: vi.fn().mockResolvedValue(undefined),
+      } as unknown as WebViewProvider;
+      mockWebViewProviders.push(firstProvider, lastProvider);
+
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(openChatCommand);
+      await handler?.();
+
+      expect(lastProvider.show).toHaveBeenCalled();
+      expect(firstProvider.show).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('showDiff command', () => {
+    /**
+     * Test: Show Diff (absolute path)
+     *
+     * Verifies that absolute paths are passed directly to diffManager.
+     */
+    it('should show diff with absolute path', async () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(showDiffCommand);
+      await handler?.({
+        path: '/absolute/path/file.ts',
+        oldText: 'old content',
+        newText: 'new content',
+      });
+
+      expect(mockDiffManager.showDiff).toHaveBeenCalledWith(
+        '/absolute/path/file.ts',
+        'old content',
+        'new content',
+      );
+    });
+
+    /**
+     * Test: Show Diff (relative path)
+     *
+     * Verifies that relative paths are correctly joined with workspace path.
+     * This is a common usage pattern, ensuring relative paths resolve correctly.
+     */
+    it('should resolve relative path against workspace folder', async () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(showDiffCommand);
+      await handler?.({
+        path: 'src/file.ts',
+        oldText: 'old',
+        newText: 'new',
+      });
+
+      expect(mockDiffManager.showDiff).toHaveBeenCalledWith(
+        '/workspace/src/file.ts',
+        'old',
+        'new',
+      );
+    });
+
+    /**
+     * Test: Log operations
+     *
+     * Verifies showDiff command logs operations.
+     * Useful for debugging and troubleshooting.
+     */
+    it('should log the diff operation', async () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(showDiffCommand);
+      await handler?.({
+        path: '/test/file.ts',
+        oldText: 'old',
+        newText: 'new',
+      });
+
+      expect(mockLog).toHaveBeenCalledWith(
+        expect.stringContaining('[Command] Showing diff'),
+      );
+    });
+
+    /**
+     * Test: Error handling
+     *
+     * Verifies diffManager errors are properly caught and displayed.
+     * Prevents unhandled exceptions from crashing the extension.
+     */
+    it('should handle errors and show error message', async () => {
+      vi.mocked(mockDiffManager.showDiff).mockRejectedValue(
+        new Error('Diff error'),
+      );
+
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(showDiffCommand);
+      await handler?.({
+        path: '/test/file.ts',
+        oldText: 'old',
+        newText: 'new',
+      });
+
+      expect(vscode.window.showErrorMessage).toHaveBeenCalledWith(
+        expect.stringContaining('Failed to show diff'),
+      );
+      expect(mockLog).toHaveBeenCalledWith(
+        expect.stringContaining('[Command] Error showing diff'),
+      );
+    });
+
+    /**
+     * Test: Windows path handling
+     *
+     * Verifies Windows-style absolute paths are correctly recognized.
+     */
+    it('should handle Windows absolute paths', async () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(showDiffCommand);
+      await handler?.({
+        path: 'C:/Users/test/file.ts',
+        oldText: 'old',
+        newText: 'new',
+      });
+
+      // Windows path should be recognized as absolute, no joining needed
+      expect(mockDiffManager.showDiff).toHaveBeenCalledWith(
+        'C:/Users/test/file.ts',
+        'old',
+        'new',
+      );
+    });
+  });
+
+  describe('openNewChatTab command', () => {
+    /**
+     * Test: Create new chat Tab
+     *
+     * Verifies the command always creates a new WebViewProvider.
+     * Allows users to open multiple chat sessions simultaneously.
+     */
+    it('should always create new provider', async () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(openNewChatTabCommand);
+      await handler?.();
+
+      expect(mockCreateWebViewProvider).toHaveBeenCalled();
+    });
+
+    /**
+     * Test: Create new provider even when existing ones exist
+     *
+     * Unlike openChat, openNewChatTab always creates a new one.
+     */
+    it('should create new provider even when providers exist', async () => {
+      const existingProvider = {
+        show: vi.fn(),
+      } as unknown as WebViewProvider;
+      mockWebViewProviders.push(existingProvider);
+
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(openNewChatTabCommand);
+      await handler?.();
+
+      expect(mockCreateWebViewProvider).toHaveBeenCalled();
+      expect(existingProvider.show).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('login command', () => {
+    /**
+     * Test: Login with existing provider
+     *
+     * Verifies forceReLogin is called when a provider exists.
+     */
+    it('should call forceReLogin on existing provider', async () => {
+      const mockProvider = {
+        forceReLogin: vi.fn().mockResolvedValue(undefined),
+      } as unknown as WebViewProvider;
+      mockWebViewProviders.push(mockProvider);
+
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(loginCommand);
+      await handler?.();
+
+      expect(mockProvider.forceReLogin).toHaveBeenCalled();
+    });
+
+    /**
+     * Test: Show message when no provider exists
+     *
+     * Verifies an info message is shown when no provider exists.
+     * Guides users to open the chat interface first.
+     */
+    it('should show info message when no providers exist', async () => {
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(loginCommand);
+      await handler?.();
+
+      expect(vscode.window.showInformationMessage).toHaveBeenCalledWith(
+        expect.stringContaining('Please open Qwen Code chat first'),
+      );
+    });
+
+    /**
+     * Test: Use latest provider for login
+     *
+     * Verifies the last provider is used when multiple exist.
+     */
+    it('should use the last provider for login', async () => {
+      const firstProvider = {
+        forceReLogin: vi.fn().mockResolvedValue(undefined),
+      } as unknown as WebViewProvider;
+      const lastProvider = {
+        forceReLogin: vi.fn().mockResolvedValue(undefined),
+      } as unknown as WebViewProvider;
+      mockWebViewProviders.push(firstProvider, lastProvider);
+
+      registerNewCommands(
+        mockContext,
+        mockLog,
+        mockDiffManager,
+        mockGetWebViewProviders,
+        mockCreateWebViewProvider,
+      );
+
+      const handler = registeredCommands.get(loginCommand);
+      await handler?.();
+
+      expect(lastProvider.forceReLogin).toHaveBeenCalled();
+      expect(firstProvider.forceReLogin).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('command constants', () => {
+    /**
+     * Test: Command name constants
+     *
+     * Verifies command name constants are correctly defined.
+     * Prevents typos from causing commands to not be found.
+     */
+    it('should export correct command names', () => {
+      expect(openChatCommand).toBe('qwen-code.openChat');
+      expect(showDiffCommand).toBe('qwenCode.showDiff');
+      expect(openNewChatTabCommand).toBe('qwenCode.openNewChatTab');
+      expect(loginCommand).toBe('qwen-code.login');
+    });
+  });
+});
--- a/packages/vscode-ide-companion/src/diff-manager.test.ts
+++ b/packages/vscode-ide-companion/src/diff-manager.test.ts
@@ -0,0 +1,392 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * DiffManager Tests
+ *
+ * Test objective: Ensure the Diff editor correctly displays code comparisons, preventing Diff open failures.
+ *
+ * Key test scenarios:
+ * 1. Diff display - Ensure Diff view opens correctly
+ * 2. Diff accept - Ensure users can accept code changes
+ * 3. Diff cancel - Ensure users can cancel code changes
+ * 4. Deduplication - Prevent duplicate Diffs from opening
+ * 5. Resource cleanup - Ensure resources are properly cleaned up after Diff closes
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import * as vscode from 'vscode';
+import { DiffManager, DiffContentProvider } from './diff-manager.js';
+
+describe('DiffContentProvider', () => {
+  let provider: DiffContentProvider;
+
+  beforeEach(() => {
+    provider = new DiffContentProvider();
+  });
+
+  /**
+   * Test: Set and get content
+   *
+   * Verifies DiffContentProvider can correctly store and retrieve Diff content.
+   * This is the content source for VSCode Diff view.
+   */
+  it('should set and get content', () => {
+    const uri = { toString: () => 'test-uri' } as vscode.Uri;
+
+    provider.setContent(uri, 'test content');
+
+    expect(provider.provideTextDocumentContent(uri)).toBe('test content');
+  });
+
+  /**
+   * Test: Return empty string for unknown URI
+   *
+   * Verifies that an empty string is returned for URIs without content, instead of throwing.
+   */
+  it('should return empty string for unknown URI', () => {
+    const uri = { toString: () => 'unknown-uri' } as vscode.Uri;
+
+    expect(provider.provideTextDocumentContent(uri)).toBe('');
+  });
+
+  /**
+   * Test: Delete content
+   *
+   * Verifies that content can be properly deleted.
+   * Content needs to be cleaned up when Diff is closed.
+   */
+  it('should delete content', () => {
+    const uri = { toString: () => 'test-uri' } as vscode.Uri;
+
+    provider.setContent(uri, 'test content');
+    provider.deleteContent(uri);
+
+    expect(provider.provideTextDocumentContent(uri)).toBe('');
+  });
+
+  /**
+   * Test: getContent method
+   *
+   * Verifies getContent returns the original content or undefined.
+   */
+  it('should return content via getContent', () => {
+    const uri = { toString: () => 'test-uri' } as vscode.Uri;
+
+    expect(provider.getContent(uri)).toBeUndefined();
+
+    provider.setContent(uri, 'test content');
+
+    expect(provider.getContent(uri)).toBe('test content');
+  });
+});
+
+describe('DiffManager', () => {
+  let diffManager: DiffManager;
+  let mockLog: (message: string) => void;
+  let mockContentProvider: DiffContentProvider;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockLog = vi.fn();
+    mockContentProvider = new DiffContentProvider();
+
+    // Reset vscode mocks
+    vi.mocked(vscode.commands.executeCommand).mockResolvedValue(undefined);
+    vi.mocked(vscode.workspace.openTextDocument).mockResolvedValue({
+      getText: () => 'modified content',
+    } as vscode.TextDocument);
+    // Reset tabGroups to empty state
+    Object.defineProperty(vi.mocked(vscode.window.tabGroups), 'all', {
+      value: [],
+      writable: true,
+    });
+
+    diffManager = new DiffManager(mockLog, mockContentProvider);
+  });
+
+  afterEach(() => {
+    diffManager.dispose();
+  });
+
+  describe('showDiff', () => {
+    /**
+     * Test: Create Diff view
+     *
+     * Verifies showDiff calls vscode.diff command to create Diff view.
+     * If this fails, users cannot see code comparisons.
+     */
+    it('should create diff view with correct URIs', async () => {
+      await diffManager.showDiff('/test/file.ts', 'old content', 'new content');
+
+      expect(vscode.commands.executeCommand).toHaveBeenCalledWith(
+        'vscode.diff',
+        expect.any(Object), // left URI (old content)
+        expect.any(Object), // right URI (new content)
+        expect.stringContaining('file.ts'), // title contains filename
+        expect.any(Object), // options
+      );
+    });
+
+    /**
+     * Test: Set Diff visible context
+     *
+     * Verifies showDiff sets qwen.diff.isVisible context.
+     * This controls accept/cancel button visibility.
+     */
+    it('should set qwen.diff.isVisible context to true', async () => {
+      await diffManager.showDiff('/test/file.ts', 'old', 'new');
+
+      expect(vscode.commands.executeCommand).toHaveBeenCalledWith(
+        'setContext',
+        'qwen.diff.isVisible',
+        true,
+      );
+    });
+
+    /**
+     * Test: Diff title format
+     *
+     * Verifies Diff view title contains filename and "Before / After".
+     * Helps users understand this is a comparison view.
+     */
+    it('should use correct diff title format', async () => {
+      await diffManager.showDiff('/path/to/myfile.ts', 'old', 'new');
+
+      const diffCall = vi
+        .mocked(vscode.commands.executeCommand)
+        .mock.calls.find((call) => call[0] === 'vscode.diff');
+
+      expect(diffCall?.[3]).toContain('myfile.ts');
+      expect(diffCall?.[3]).toContain('Before');
+      expect(diffCall?.[3]).toContain('After');
+    });
+
+    /**
+     * Test: Deduplication - same content doesn't open twice
+     *
+     * Verifies that for the same file and content, Diff view is not created again.
+     * Prevents UI clutter.
+     */
+    it('should deduplicate rapid duplicate calls', async () => {
+      await diffManager.showDiff('/test/file.ts', 'old', 'new');
+
+      vi.mocked(vscode.commands.executeCommand).mockClear();
+
+      // Immediately call again with same parameters
+      await diffManager.showDiff('/test/file.ts', 'old', 'new');
+
+      // vscode.diff should not be called again
+      const diffCalls = vi
+        .mocked(vscode.commands.executeCommand)
+        .mock.calls.filter((call) => call[0] === 'vscode.diff');
+      expect(diffCalls.length).toBe(0);
+    });
+
+    /**
+     * Test: Preserve focus on WebView
+     *
+     * Verifies that preserveFocus: true is set when opening Diff.
+     * Ensures chat interface keeps focus without interrupting user input.
+     */
+    it('should preserve focus when showing diff', async () => {
+      await diffManager.showDiff('/test/file.ts', 'old', 'new');
+
+      const diffCall = vi
+        .mocked(vscode.commands.executeCommand)
+        .mock.calls.find((call) => call[0] === 'vscode.diff');
+      const options = diffCall?.[4] as { preserveFocus?: boolean } | undefined;
+
+      expect(options?.preserveFocus).toBe(true);
+    });
+
+    /**
+     * Test: Two-argument overload (auto-read original file)
+     *
+     * Verifies that when only newContent is passed, original file content is auto-read.
+     */
+    it('should support two-argument overload', async () => {
+      vi.mocked(vscode.workspace.openTextDocument).mockResolvedValue({
+        getText: () => 'original file content',
+      } as vscode.TextDocument);
+
+      await diffManager.showDiff('/test/file.ts', 'new content');
+
+      expect(vscode.commands.executeCommand).toHaveBeenCalledWith(
+        'vscode.diff',
+        expect.any(Object),
+        expect.any(Object),
+        expect.any(String),
+        expect.any(Object),
+      );
+    });
+  });
+
+  describe('acceptDiff', () => {
+    /**
+     * Test: Clear context after accepting Diff
+     *
+     * Verifies qwen.diff.isVisible is set to false after accepting.
+     * This hides the accept/cancel buttons.
+     */
+    it('should set qwen.diff.isVisible context to false', async () => {
+      // First show Diff
+      await diffManager.showDiff('/test/file.ts', 'old', 'new');
+      vi.mocked(vscode.commands.executeCommand).mockClear();
+
+      // Get the created right URI
+      const uriFromCall = vi
+        .mocked(vscode.Uri.from)
+        .mock.results.find((r) =>
+          (r.value as vscode.Uri).query?.includes('new'),
+        )?.value as vscode.Uri;
+
+      if (uriFromCall) {
+        await diffManager.acceptDiff(uriFromCall);
+
+        expect(vscode.commands.executeCommand).toHaveBeenCalledWith(
+          'setContext',
+          'qwen.diff.isVisible',
+          false,
+        );
+      }
+    });
+  });
+
+  describe('cancelDiff', () => {
+    /**
+     * Test: Clear context after canceling Diff
+     *
+     * Verifies qwen.diff.isVisible is set to false after canceling.
+     */
+    it('should set qwen.diff.isVisible context to false', async () => {
+      await diffManager.showDiff('/test/file.ts', 'old', 'new');
+      vi.mocked(vscode.commands.executeCommand).mockClear();
+
+      const uriFromCall = vi
+        .mocked(vscode.Uri.from)
+        .mock.results.find((r) =>
+          (r.value as vscode.Uri).query?.includes('new'),
+        )?.value as vscode.Uri;
+
+      if (uriFromCall) {
+        await diffManager.cancelDiff(uriFromCall);
+
+        expect(vscode.commands.executeCommand).toHaveBeenCalledWith(
+          'setContext',
+          'qwen.diff.isVisible',
+          false,
+        );
+      }
+    });
+
+    /**
+     * Test: Cancel non-existent Diff
+     *
+     * Verifies canceling a non-existent Diff doesn't throw.
+     */
+    it('should handle canceling non-existent diff gracefully', async () => {
+      const unknownUri = {
+        toString: () => 'unknown-uri',
+        scheme: 'qwen-diff',
+        path: '/unknown/file.ts',
+      } as vscode.Uri;
+
+      await expect(diffManager.cancelDiff(unknownUri)).resolves.not.toThrow();
+    });
+  });
+
+  describe('closeAll', () => {
+    /**
+     * Test: Close all Diffs
+     *
+     * Verifies closeAll closes all open Diff views.
+     * Needed to clean up Diffs after permission is granted.
+     */
+    it('should close all open diff editors', async () => {
+      await diffManager.showDiff('/test/file1.ts', 'old1', 'new1');
+      vi.mocked(vscode.commands.executeCommand).mockClear();
+
+      await diffManager.closeAll();
+
+      expect(vscode.commands.executeCommand).toHaveBeenCalledWith(
+        'setContext',
+        'qwen.diff.isVisible',
+        false,
+      );
+    });
+
+    /**
+     * Test: Close empty list
+     *
+     * Verifies closeAll doesn't throw when no Diffs are open.
+     */
+    it('should not throw when no diffs are open', async () => {
+      await expect(diffManager.closeAll()).resolves.not.toThrow();
+    });
+  });
+
+  describe('closeDiff', () => {
+    /**
+     * Test: Close Diff by file path
+     *
+     * Verifies specific Diff view can be closed by file path.
+     */
+    it('should close diff by file path', async () => {
+      await diffManager.showDiff('/test/file.ts', 'old', 'new');
+
+      const result = await diffManager.closeDiff('/test/file.ts');
+
+      // Should return content when closed
+      expect(result).toBeDefined();
+    });
+
+    /**
+     * Test: Close non-existent file Diff
+     *
+     * Verifies closing non-existent file Diff returns undefined.
+     */
+    it('should return undefined for non-existent file', async () => {
+      const result = await diffManager.closeDiff('/non/existent.ts');
+
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe('suppressFor', () => {
+    /**
+     * Test: Temporarily suppress Diff display
+     *
+     * Verifies suppressFor temporarily prevents Diff display.
+     * Used to briefly suppress new Diffs after permission is granted.
+     */
+    it('should suppress diffs for specified duration', () => {
+      // This method sets an internal timestamp
+      expect(() => diffManager.suppressFor(1000)).not.toThrow();
+    });
+  });
+
+  describe('dispose', () => {
+    /**
+     * Test: Resource cleanup
+     *
+     * Verifies dispose doesn't throw.
+     */
+    it('should dispose without errors', () => {
+      expect(() => diffManager.dispose()).not.toThrow();
+    });
+  });
+
+  describe('onDidChange event', () => {
+    /**
+     * Test: Event emitter
+     *
+     * Verifies DiffManager has onDidChange event.
+     * Used to notify other components of Diff state changes.
+     */
+    it('should have onDidChange event', () => {
+      expect(diffManager.onDidChange).toBeDefined();
+    });
+  });
+});
--- a/packages/vscode-ide-companion/src/extension.ts
+++ b/packages/vscode-ide-companion/src/extension.ts
@@ -314,34 +314,32 @@ export async function activate(context: vscode.ExtensionContext) {
            'cli.js',
          ).fsPath;
          const execPath = process.execPath;
-          const lowerExecPath = execPath.toLowerCase();
-          const needsElectronRunAsNode =
-            lowerExecPath.includes('code') ||
-            lowerExecPath.includes('electron');

-          let qwenCmd: string;
          const terminalOptions: vscode.TerminalOptions = {
            name: `Qwen Code (${selectedFolder.name})`,
            cwd: selectedFolder.uri.fsPath,
            location,
          };

+          let qwenCmd: string;
+
          if (isWindows) {
-            // Use system Node via cmd.exe; avoid PowerShell parsing issues
+            // On Windows, try multiple strategies to find a Node.js runtime:
+            // 1. Check if VSCode ships a standalone node.exe alongside Code.exe
+            // 2. Check VSCode's internal Node.js in resources directory
+            // 3. Fall back to using Code.exe with ELECTRON_RUN_AS_NODE=1
            const quoteCmd = (s: string) => `"${s.replace(/"/g, '""')}"`;
            const cliQuoted = quoteCmd(cliEntry);
            // TODO: @yiliang114, temporarily run through node, and later hope to decouple from the local node
            qwenCmd = `node ${cliQuoted}`;
            terminalOptions.shellPath = process.env.ComSpec;
          } else {
+            // macOS/Linux: All VSCode-like IDEs (VSCode, Cursor, Windsurf, etc.)
+            // are Electron-based, so we always need ELECTRON_RUN_AS_NODE=1
+            // to run Node.js scripts using the IDE's bundled runtime.
            const quotePosix = (s: string) => `"${s.replace(/"/g, '\\"')}"`;
            const baseCmd = `${quotePosix(execPath)} ${quotePosix(cliEntry)}`;
-            if (needsElectronRunAsNode) {
-              // macOS Electron helper needs ELECTRON_RUN_AS_NODE=1;
-              qwenCmd = `ELECTRON_RUN_AS_NODE=1 ${baseCmd}`;
-            } else {
-              qwenCmd = baseCmd;
-            }
+            qwenCmd = `ELECTRON_RUN_AS_NODE=1 ${baseCmd}`;
          }

          const terminal = vscode.window.createTerminal(terminalOptions);
--- a/packages/vscode-ide-companion/src/ide-server.test.ts
+++ b/packages/vscode-ide-companion/src/ide-server.test.ts
@@ -13,9 +13,13 @@ import * as http from 'node:http';
 import { IDEServer } from './ide-server.js';
 import type { DiffManager } from './diff-manager.js';

-vi.mock('node:crypto', () => ({
-  randomUUID: vi.fn(() => 'test-auth-token'),
-}));
+vi.mock('node:crypto', async (importOriginal) => {
+  const actual: typeof import('crypto') = await importOriginal();
+  return {
+    ...actual,
+    randomUUID: () => 'test-auth-token',
+  };
+});

 const mocks = vi.hoisted(() => ({
  diffManager: {
@@ -117,7 +121,7 @@ describe('IDEServer', () => {
  });

  it('should set environment variables and workspace path on start with multiple folders', async () => {
-    await ideServer.start(mockContext);
+    await ideServer.start(mockContext, () => 'test-auth-token');

    const replaceMock = mockContext.environmentVariableCollection.replace;
    expect(replaceMock).toHaveBeenCalledTimes(2);
@@ -163,7 +167,7 @@ describe('IDEServer', () => {
  it('should set a single folder path', async () => {
    vscodeMock.workspace.workspaceFolders = [{ uri: { fsPath: '/foo/bar' } }];

-    await ideServer.start(mockContext);
+    await ideServer.start(mockContext, () => 'test-auth-token');
    const replaceMock = mockContext.environmentVariableCollection.replace;

    expect(replaceMock).toHaveBeenCalledWith(
@@ -195,7 +199,7 @@ describe('IDEServer', () => {
  it('should set an empty string if no folders are open', async () => {
    vscodeMock.workspace.workspaceFolders = [];

-    await ideServer.start(mockContext);
+    await ideServer.start(mockContext, () => 'test-auth-token');
    const replaceMock = mockContext.environmentVariableCollection.replace;

    expect(replaceMock).toHaveBeenCalledWith(
@@ -226,7 +230,7 @@ describe('IDEServer', () => {

  it('should update the path when workspace folders change', async () => {
    vscodeMock.workspace.workspaceFolders = [{ uri: { fsPath: '/foo/bar' } }];
-    await ideServer.start(mockContext);
+    await ideServer.start(mockContext, () => 'test-auth-token');
    const replaceMock = mockContext.environmentVariableCollection.replace;

    expect(replaceMock).toHaveBeenCalledWith(
@@ -292,7 +296,7 @@ describe('IDEServer', () => {
  });

  it('should clear env vars and delete lock file on stop', async () => {
-    await ideServer.start(mockContext);
+    await ideServer.start(mockContext, () => 'test-auth-token');
    const replaceMock = mockContext.environmentVariableCollection.replace;
    const port = getPortFromMock(replaceMock);
    const lockFile = path.join('/home/test', '.qwen', 'ide', `${port}.lock`);
@@ -312,7 +316,7 @@ describe('IDEServer', () => {
        { uri: { fsPath: 'd:\\baz\\qux' } },
      ];

-      await ideServer.start(mockContext);
+      await ideServer.start(mockContext, () => 'test-auth-token');
      const replaceMock = mockContext.environmentVariableCollection.replace;
      const expectedWorkspacePaths = 'c:\\foo\\bar;d:\\baz\\qux';

@@ -347,7 +351,7 @@ describe('IDEServer', () => {
    let port: number;

    beforeEach(async () => {
-      await ideServer.start(mockContext);
+      await ideServer.start(mockContext, () => 'test-auth-token');
      port = (ideServer as unknown as { port: number }).port;
    });

@@ -472,7 +476,7 @@ describe('IDEServer HTTP endpoints', () => {
        clear: vi.fn(),
      },
    } as unknown as vscode.ExtensionContext;
-    await ideServer.start(mockContext);
+    await ideServer.start(mockContext, () => 'test-auth-token');
    const replaceMock = mockContext.environmentVariableCollection.replace;
    port = getPortFromMock(replaceMock);
  });
--- a/packages/vscode-ide-companion/src/ide-server.ts
+++ b/packages/vscode-ide-companion/src/ide-server.ts
@@ -21,6 +21,11 @@ import express, {
 } from 'express';
 import cors from 'cors';
 import { randomUUID } from 'node:crypto';
+
+// Export for mocking in tests
+export const cryptoUtils = {
+  randomUUID,
+};
 import { type Server as HTTPServer } from 'node:http';
 import * as path from 'node:path';
 import * as fs from 'node:fs/promises';
@@ -144,10 +149,15 @@ export class IDEServer {
    this.diffManager = diffManager;
  }

-  start(context: vscode.ExtensionContext): Promise<void> {
+  start(
+    context: vscode.ExtensionContext,
+    tokenGenerator?: () => string,
+  ): Promise<void> {
    return new Promise((resolve) => {
      this.context = context;
-      this.authToken = randomUUID();
+      this.authToken = tokenGenerator
+        ? tokenGenerator()
+        : cryptoUtils.randomUUID();
      const sessionsWithInitialNotification = new Set<string>();

      const app = express();
@@ -231,7 +241,7 @@ export class IDEServer {
          transport = this.transports[sessionId];
        } else if (!sessionId && isInitializeRequest(req.body)) {
          transport = new StreamableHTTPServerTransport({
-            sessionIdGenerator: () => randomUUID(),
+            sessionIdGenerator: () => cryptoUtils.randomUUID(),
            onsessioninitialized: (newSessionId) => {
              this.log(`New session initialized: ${newSessionId}`);
              this.transports[newSessionId] = transport;
--- a/packages/vscode-ide-companion/src/test-setup.ts
+++ b/packages/vscode-ide-companion/src/test-setup.ts
@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Global test setup file
+ * Provides global mocks for VSCode API, ensuring test environment is correctly initialized.
+ *
+ * Note: VSCode API mock is now implemented via alias configuration in vitest.config.ts,
+ * pointing to src/__mocks__/vscode.ts
+ */
+
+import '@testing-library/jest-dom';
+import { vi, beforeEach, afterEach } from 'vitest';
+
+/**
+ * Mock WebView API (window.acquireVsCodeApi)
+ *
+ * React components in WebView communicate with extension via acquireVsCodeApi().
+ * This provides mock implementation for component testing.
+ */
+export const mockVSCodeWebViewAPI = {
+  postMessage: vi.fn(),
+  getState: vi.fn(() => ({})),
+  setState: vi.fn(),
+};
+
+beforeEach(() => {
+  // Setup WebView API mock
+  (
+    globalThis as unknown as {
+      acquireVsCodeApi: () => typeof mockVSCodeWebViewAPI;
+    }
+  ).acquireVsCodeApi = () => mockVSCodeWebViewAPI;
+});
+
+afterEach(() => {
+  // Clear all mock call records
+  vi.clearAllMocks();
+
+  // Clear jsdom window to prevent React element cache issues
+  if (typeof window !== 'undefined') {
+    // Clean up DOM after each test without removing <body>/<head>
+    document.body?.replaceChildren();
+    document.head?.replaceChildren();
+  }
+});
--- a/packages/vscode-ide-companion/src/types/test.types.d.ts
+++ b/packages/vscode-ide-companion/src/types/test.types.d.ts
@@ -0,0 +1,31 @@
+/**
+ * Type declarations for testing-library matchers
+ * This file adds type definitions for matchers like toBeInTheDocument
+ */
+
+import '@testing-library/jest-dom';
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toBeInTheDocument(): R;
+      toBeVisible(): R;
+      toBeEmptyDOMElement(): R;
+      toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
+      toHaveAttribute(attr: string, value?: string): R;
+      toHaveClass(...classNames: string[]): R;
+      toHaveStyle(css: Record<string, unknown>): R;
+      toHaveFocus(): R;
+      toHaveFormValues(expectedValues: Record<string, unknown>): R;
+      toBeDisabled(): R;
+      toBeEnabled(): R;
+      toBeInvalid(): R;
+      toBeRequired(): R;
+      toBeValid(): R;
+      toContainElement(element: Element | null): R;
+      toContainHTML(htmlText: string): R;
+    }
+  }
+}
+
+export {};
--- a/packages/vscode-ide-companion/src/types/testing-library-jest-dom.d.ts
+++ b/packages/vscode-ide-companion/src/types/testing-library-jest-dom.d.ts
@@ -0,0 +1,21 @@
+// Extend Jest's expect interface with Testing Library matchers
+declare module "jest" {
+  interface Matchers<R> {
+    toBeInTheDocument(): R;
+    toBeVisible(): R;
+    toBeEmptyDOMElement(): R;
+    toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
+    toHaveAttribute(attr: string, value?: string): R;
+    toHaveClass(...classNames: string[]): R;
+    toHaveStyle(css: Record<string, unknown>): R;
+    toHaveFocus(): R;
+    toHaveFormValues(expectedValues: Record<string, unknown>): R;
+    toBeDisabled(): R;
+    toBeEnabled(): R;
+    toBeInvalid(): R;
+    toBeRequired(): R;
+    toBeValid(): R;
+    toContainElement(element: Element | null): R;
+    toContainHTML(htmlText: string): R;
+  }
+}
--- a/packages/vscode-ide-companion/src/types/vitest-testing-library.d.ts
+++ b/packages/vscode-ide-companion/src/types/vitest-testing-library.d.ts
@@ -0,0 +1,54 @@
+/// <reference types="vitest" />
+declare global {
+  namespace Vi {
+    interface Assertion {
+      /**
+       * Vitest-compatible version of testing-library matchers
+       * to resolve conflicts between @testing-library/jest-dom and vitest
+       */
+
+      // Basic DOM matchers
+      toBeInTheDocument(): Vi.Assertion;
+      toBeVisible(): Vi.Assertion;
+      toBeEmptyDOMElement(): Vi.Assertion;
+
+      // Content matchers
+      toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): Vi.Assertion;
+      toHaveAttribute(name: string, value?: string): Vi.Assertion;
+
+      // Class and style matchers
+      toHaveClass(...classNames: string[]): Vi.Assertion;
+      toHaveStyle(css: Record<string, unknown>): Vi.Assertion;
+
+      // Form element matchers
+      toHaveFocus(): Vi.Assertion;
+      toHaveFormValues(expectedValues: Record<string, unknown>): Vi.Assertion;
+      toBeDisabled(): Vi.Assertion;
+      toBeEnabled(): Vi.Assertion;
+      toBeRequired(): Vi.Assertion;
+      toBeValid(): Vi.Assertion;
+      toBeInvalid(): Vi.Assertion;
+
+      // DOM structure matchers
+      toContainElement(element: Element | null): Vi.Assertion;
+      toContainHTML(html: string): Vi.Assertion;
+      toHaveAccessibleDescription(description?: string | RegExp): Vi.Assertion;
+      toHaveAccessibleName(name?: string | RegExp): Vi.Assertion;
+
+      // Value matchers
+      toHaveValue(value?: unknown): Vi.Assertion;
+      toHaveDisplayValue(value: string | RegExp | (string | RegExp)[]): Vi.Assertion;
+
+      // Event matchers
+      toBeChecked(): Vi.Assertion;
+      toBePartiallyChecked(): Vi.Assertion;
+    }
+
+    interface ExpectStatic {
+      // Add any additional expect matchers needed
+    }
+  }
+}
+
+// Export to make this an ES module
+export {};
--- a/packages/vscode-ide-companion/src/webview/App.test.tsx
+++ b/packages/vscode-ide-companion/src/webview/App.test.tsx
@@ -0,0 +1,613 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * App Component Tests
+ *
+ * Test objective: Ensure WebView main app renders and interacts correctly, preventing display failures.
+ *
+ * Key test scenarios:
+ * 1. Initial rendering - Ensure app renders without blank screen
+ * 2. Authentication state display - Show correct UI based on auth state
+ * 3. Loading state - Show loading indicator during initialization
+ * 4. Message display - Ensure messages render correctly
+ * 5. Input interaction - Ensure users can input and send messages
+ * 6. Permission drawer - Ensure permission requests display and respond correctly
+ * 7. Session management - Ensure session switching works
+ */
+
+/** @vitest-environment jsdom */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { App } from './App.js';
+
+// Mock all hooks that App depends on
+vi.mock('./hooks/useVSCode.js', () => ({
+  useVSCode: () => ({
+    postMessage: vi.fn(),
+    getState: vi.fn(() => ({})),
+    setState: vi.fn(),
+  }),
+}));
+
+vi.mock('./hooks/session/useSessionManagement.js', () => ({
+  useSessionManagement: () => ({
+    currentSessionId: null,
+    currentSessionTitle: 'New Chat',
+    showSessionSelector: false,
+    setShowSessionSelector: vi.fn(),
+    filteredSessions: [],
+    sessionSearchQuery: '',
+    setSessionSearchQuery: vi.fn(),
+    handleSwitchSession: vi.fn(),
+    handleNewQwenSession: vi.fn(),
+    handleLoadQwenSessions: vi.fn(),
+    hasMore: false,
+    isLoading: false,
+    handleLoadMoreSessions: vi.fn(),
+  }),
+}));
+
+vi.mock('./hooks/file/useFileContext.js', () => ({
+  useFileContext: () => ({
+    activeFileName: null,
+    activeFilePath: null,
+    activeSelection: null,
+    workspaceFiles: [],
+    hasRequestedFiles: false,
+    requestWorkspaceFiles: vi.fn(),
+    addFileReference: vi.fn(),
+    focusActiveEditor: vi.fn(),
+  }),
+}));
+
+vi.mock('./hooks/message/useMessageHandling.js', () => ({
+  useMessageHandling: () => ({
+    messages: [],
+    isStreaming: false,
+    isWaitingForResponse: false,
+    loadingMessage: null,
+    addMessage: vi.fn(),
+    setMessages: vi.fn(),
+    clearMessages: vi.fn(),
+    startStreaming: vi.fn(),
+    appendStreamChunk: vi.fn(),
+    endStreaming: vi.fn(),
+    breakAssistantSegment: vi.fn(),
+    appendThinkingChunk: vi.fn(),
+    clearThinking: vi.fn(),
+    setWaitingForResponse: vi.fn(),
+    clearWaitingForResponse: vi.fn(),
+  }),
+}));
+
+vi.mock('./hooks/useToolCalls.js', () => ({
+  useToolCalls: () => ({
+    inProgressToolCalls: [],
+    completedToolCalls: [],
+    handleToolCallUpdate: vi.fn(),
+    clearToolCalls: vi.fn(),
+  }),
+}));
+
+vi.mock('./hooks/useWebViewMessages.js', () => ({
+  useWebViewMessages: vi.fn(),
+}));
+
+vi.mock('./hooks/useMessageSubmit.js', () => ({
+  useMessageSubmit: () => ({
+    handleSubmit: vi.fn((e: Event) => e.preventDefault()),
+  }),
+}));
+
+vi.mock('./hooks/useCompletionTrigger.js', () => ({
+  useCompletionTrigger: () => ({
+    isOpen: false,
+    items: [],
+    triggerChar: null,
+    query: '',
+    openCompletion: vi.fn(),
+    closeCompletion: vi.fn(),
+    refreshCompletion: vi.fn(),
+  }),
+}));
+
+// Mock CSS modules and styles
+vi.mock('./styles/App.css', () => ({}));
+vi.mock('./styles/messages.css', () => ({}));
+
+describe('App', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset any module state
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Initial Rendering - Prevent WebView blank screen', () => {
+    /**
+     * Test: Basic rendering
+     *
+     * Verifies App component renders successfully without throwing.
+     * This is the most basic test; failure means WebView cannot display.
+     */
+    it('should render without crashing', () => {
+      expect(() => render(<App />)).not.toThrow();
+    });
+
+    /**
+     * Test: Chat container exists
+     *
+     * Verifies main chat container div exists.
+     * This is the parent container for all UI elements.
+     */
+    it('should render chat container', () => {
+      const { container } = render(<App />);
+      const chatContainer = container.querySelector('.chat-container');
+      expect(chatContainer).toBeInTheDocument();
+    });
+
+    /**
+     * Test: Messages container exists
+     *
+     * Verifies message list container exists.
+     * Messages are displayed in this container.
+     */
+    it('should render messages container', () => {
+      const { container } = render(<App />);
+      const messagesContainer = container.querySelector('.messages-container');
+      expect(messagesContainer).toBeInTheDocument();
+    });
+  });
+
+  describe('Loading State - Loading indicator display', () => {
+    /**
+     * Test: Initial loading state
+     *
+     * Verifies loading indicator shows during app initialization.
+     * Users should see loading prompt before auth state is determined.
+     */
+    it('should show loading state initially', () => {
+      render(<App />);
+
+      // Should display loading text
+      expect(screen.getByText(/Preparing Qwen Code/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Authentication States - Auth state display', () => {
+    /**
+     * Test: Unauthenticated state - Show login guide
+     *
+     * Verifies Onboarding component shows when user is not logged in.
+     * Guides user to perform login.
+     */
+    it('should render correctly when not authenticated', async () => {
+      // Use useWebViewMessages mock to simulate auth state change
+      const { useWebViewMessages } = await import(
+        './hooks/useWebViewMessages.js'
+      );
+      vi.mocked(useWebViewMessages).mockImplementation(
+        ({ setIsAuthenticated }) => {
+          // Simulate receiving unauthenticated state
+          React.useEffect(() => {
+            setIsAuthenticated?.(false);
+          }, [setIsAuthenticated]);
+        },
+      );
+
+      render(<App />);
+
+      // Wait for state update
+      await waitFor(() => {
+        // When unauthenticated, login-related UI should show (like Onboarding)
+        // Ensure no errors are thrown
+        expect(document.body).toBeInTheDocument();
+      });
+    });
+
+    /**
+     * Test: Authenticated state - Show input form
+     *
+     * Verifies message input area shows when user is logged in.
+     */
+    it('should show input form when authenticated', async () => {
+      const { useWebViewMessages } = await import(
+        './hooks/useWebViewMessages.js'
+      );
+      vi.mocked(useWebViewMessages).mockImplementation(
+        ({ setIsAuthenticated }) => {
+          React.useEffect(() => {
+            setIsAuthenticated?.(true);
+          }, [setIsAuthenticated]);
+        },
+      );
+
+      render(<App />);
+
+      // Wait for auth state update
+      await waitFor(() => {
+        // When authenticated, input-related UI should exist
+        expect(document.body).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Message Rendering - Message display', () => {
+    /**
+     * Test: User message display
+     *
+     * Verifies user-sent messages display correctly.
+     */
+    it('should render user messages correctly', async () => {
+      // Mock useMessageHandling to return messages
+      vi.doMock('./hooks/message/useMessageHandling.js', () => ({
+        useMessageHandling: () => ({
+          messages: [
+            {
+              role: 'user',
+              content: 'Hello, AI!',
+              timestamp: Date.now(),
+            },
+          ],
+          isStreaming: false,
+          isWaitingForResponse: false,
+          loadingMessage: null,
+          addMessage: vi.fn(),
+          setMessages: vi.fn(),
+          clearMessages: vi.fn(),
+          startStreaming: vi.fn(),
+          appendStreamChunk: vi.fn(),
+          endStreaming: vi.fn(),
+          breakAssistantSegment: vi.fn(),
+          appendThinkingChunk: vi.fn(),
+          clearThinking: vi.fn(),
+          setWaitingForResponse: vi.fn(),
+          clearWaitingForResponse: vi.fn(),
+        }),
+      }));
+
+      // Due to mock limitations, verify component doesn't crash
+      expect(() => render(<App />)).not.toThrow();
+    });
+
+    /**
+     * Test: AI response display
+     *
+     * Verifies AI responses display correctly.
+     */
+    it('should render assistant messages correctly', async () => {
+      vi.doMock('./hooks/message/useMessageHandling.js', () => ({
+        useMessageHandling: () => ({
+          messages: [
+            {
+              role: 'assistant',
+              content: 'Hello! How can I help you today?',
+              timestamp: Date.now(),
+            },
+          ],
+          isStreaming: false,
+          isWaitingForResponse: false,
+          loadingMessage: null,
+          addMessage: vi.fn(),
+          setMessages: vi.fn(),
+          clearMessages: vi.fn(),
+          startStreaming: vi.fn(),
+          appendStreamChunk: vi.fn(),
+          endStreaming: vi.fn(),
+          breakAssistantSegment: vi.fn(),
+          appendThinkingChunk: vi.fn(),
+          clearThinking: vi.fn(),
+          setWaitingForResponse: vi.fn(),
+          clearWaitingForResponse: vi.fn(),
+        }),
+      }));
+
+      expect(() => render(<App />)).not.toThrow();
+    });
+
+    /**
+     * Test: Thinking process display
+     *
+     * Verifies AI thinking process displays correctly.
+     */
+    it('should render thinking messages correctly', async () => {
+      vi.doMock('./hooks/message/useMessageHandling.js', () => ({
+        useMessageHandling: () => ({
+          messages: [
+            {
+              role: 'thinking',
+              content: 'Analyzing the code...',
+              timestamp: Date.now(),
+            },
+          ],
+          isStreaming: false,
+          isWaitingForResponse: false,
+          loadingMessage: null,
+          addMessage: vi.fn(),
+          setMessages: vi.fn(),
+          clearMessages: vi.fn(),
+          startStreaming: vi.fn(),
+          appendStreamChunk: vi.fn(),
+          endStreaming: vi.fn(),
+          breakAssistantSegment: vi.fn(),
+          appendThinkingChunk: vi.fn(),
+          clearThinking: vi.fn(),
+          setWaitingForResponse: vi.fn(),
+          clearWaitingForResponse: vi.fn(),
+        }),
+      }));
+
+      expect(() => render(<App />)).not.toThrow();
+    });
+  });
+
+  describe('Empty State - Empty state display', () => {
+    /**
+     * Test: Show empty state when no messages
+     *
+     * Verifies welcome/empty state UI shows when no chat history.
+     */
+    it('should show empty state when no messages and authenticated', async () => {
+      const { useWebViewMessages } = await import(
+        './hooks/useWebViewMessages.js'
+      );
+      vi.mocked(useWebViewMessages).mockImplementation(
+        ({ setIsAuthenticated }) => {
+          React.useEffect(() => {
+            setIsAuthenticated?.(true);
+          }, [setIsAuthenticated]);
+        },
+      );
+
+      const { container } = render(<App />);
+
+      // Wait for state update
+      await waitFor(() => {
+        // Verify app doesn't crash
+        expect(container.querySelector('.chat-container')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Streaming State - Streaming response state', () => {
+    /**
+     * Test: UI state during streaming
+     *
+     * Verifies UI displays correctly while AI is generating response.
+     */
+    it('should handle streaming state correctly', async () => {
+      vi.doMock('./hooks/message/useMessageHandling.js', () => ({
+        useMessageHandling: () => ({
+          messages: [],
+          isStreaming: true,
+          isWaitingForResponse: false,
+          loadingMessage: null,
+          addMessage: vi.fn(),
+          setMessages: vi.fn(),
+          clearMessages: vi.fn(),
+          startStreaming: vi.fn(),
+          appendStreamChunk: vi.fn(),
+          endStreaming: vi.fn(),
+          breakAssistantSegment: vi.fn(),
+          appendThinkingChunk: vi.fn(),
+          clearThinking: vi.fn(),
+          setWaitingForResponse: vi.fn(),
+          clearWaitingForResponse: vi.fn(),
+        }),
+      }));
+
+      expect(() => render(<App />)).not.toThrow();
+    });
+
+    /**
+     * Test: UI state while waiting for response
+     *
+     * Verifies loading prompt shows while waiting for AI response.
+     */
+    it('should show waiting message when waiting for response', async () => {
+      vi.doMock('./hooks/message/useMessageHandling.js', () => ({
+        useMessageHandling: () => ({
+          messages: [{ role: 'user', content: 'test', timestamp: Date.now() }],
+          isStreaming: false,
+          isWaitingForResponse: true,
+          loadingMessage: 'AI is thinking...',
+          addMessage: vi.fn(),
+          setMessages: vi.fn(),
+          clearMessages: vi.fn(),
+          startStreaming: vi.fn(),
+          appendStreamChunk: vi.fn(),
+          endStreaming: vi.fn(),
+          breakAssistantSegment: vi.fn(),
+          appendThinkingChunk: vi.fn(),
+          clearThinking: vi.fn(),
+          setWaitingForResponse: vi.fn(),
+          clearWaitingForResponse: vi.fn(),
+        }),
+      }));
+
+      expect(() => render(<App />)).not.toThrow();
+    });
+  });
+
+  describe('Session Management - Session management', () => {
+    /**
+     * Test: Session title display
+     *
+     * Verifies current session title displays correctly in Header.
+     */
+    it('should display current session title in header', async () => {
+      vi.doMock('./hooks/session/useSessionManagement.js', () => ({
+        useSessionManagement: () => ({
+          currentSessionId: 'session-1',
+          currentSessionTitle: 'My Test Session',
+          showSessionSelector: false,
+          setShowSessionSelector: vi.fn(),
+          filteredSessions: [],
+          sessionSearchQuery: '',
+          setSessionSearchQuery: vi.fn(),
+          handleSwitchSession: vi.fn(),
+          handleNewQwenSession: vi.fn(),
+          handleLoadQwenSessions: vi.fn(),
+          hasMore: false,
+          isLoading: false,
+          handleLoadMoreSessions: vi.fn(),
+        }),
+      }));
+
+      expect(() => render(<App />)).not.toThrow();
+    });
+  });
+
+  describe('Tool Calls - Tool call display', () => {
+    /**
+     * Test: In-progress tool calls
+     *
+     * Verifies executing tool calls display correctly.
+     */
+    it('should render in-progress tool calls', async () => {
+      vi.doMock('./hooks/useToolCalls.js', () => ({
+        useToolCalls: () => ({
+          inProgressToolCalls: [
+            {
+              toolCallId: 'tc-1',
+              kind: 'read',
+              title: 'Reading file...',
+              status: 'pending',
+              timestamp: Date.now(),
+            },
+          ],
+          completedToolCalls: [],
+          handleToolCallUpdate: vi.fn(),
+          clearToolCalls: vi.fn(),
+        }),
+      }));
+
+      expect(() => render(<App />)).not.toThrow();
+    });
+
+    /**
+     * Test: Completed tool calls
+     *
+     * Verifies completed tool calls display correctly.
+     */
+    it('should render completed tool calls', async () => {
+      vi.doMock('./hooks/useToolCalls.js', () => ({
+        useToolCalls: () => ({
+          inProgressToolCalls: [],
+          completedToolCalls: [
+            {
+              toolCallId: 'tc-1',
+              kind: 'read',
+              title: 'Read file.ts',
+              status: 'completed',
+              timestamp: Date.now(),
+              output: 'file content here',
+            },
+          ],
+          handleToolCallUpdate: vi.fn(),
+          clearToolCalls: vi.fn(),
+        }),
+      }));
+
+      expect(() => render(<App />)).not.toThrow();
+    });
+  });
+
+  describe('Error Boundaries - Error boundaries', () => {
+    /**
+     * Test: Hook errors don't cause crash
+     *
+     * Verifies app degrades gracefully even if some hooks throw errors.
+     */
+    it('should not crash on hook errors', () => {
+      // Even with incomplete mocks, component should render
+      expect(() => render(<App />)).not.toThrow();
+    });
+  });
+
+  describe('Accessibility - Accessibility', () => {
+    /**
+     * Test: Basic accessibility structure
+     *
+     * Verifies component has proper semantic structure.
+     */
+    it('should have proper semantic structure', () => {
+      const { container } = render(<App />);
+
+      // Should have container div
+      expect(container.querySelector('.chat-container')).toBeInTheDocument();
+    });
+  });
+
+  describe('CSS Classes - Style classes', () => {
+    /**
+     * Test: Required CSS classes exist
+     *
+     * Verifies necessary CSS classes are correctly applied.
+     * Missing classes may cause styling issues.
+     */
+    it('should have required CSS classes', () => {
+      const { container } = render(<App />);
+
+      // chat-container is the key class for main container
+      expect(container.querySelector('.chat-container')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('App Integration - Integration scenarios', () => {
+  /**
+   * Test: Complete message submission flow (simulated)
+   *
+   * Verifies complete flow from input to send.
+   * This is the most common user operation.
+   */
+  it('should handle message submission flow', () => {
+    const { container } = render(<App />);
+
+    // Verify app renders successfully
+    expect(container.querySelector('.chat-container')).toBeInTheDocument();
+  });
+
+  /**
+   * Test: Permission request display
+   *
+   * Verifies permission drawer displays correctly when user authorization is needed.
+   */
+  it('should show permission drawer when permission requested', async () => {
+    // Permission requests are triggered via useWebViewMessages
+    const { useWebViewMessages } = await import(
+      './hooks/useWebViewMessages.js'
+    );
+    vi.mocked(useWebViewMessages).mockImplementation(
+      ({ setIsAuthenticated, handlePermissionRequest }) => {
+        React.useEffect(() => {
+          setIsAuthenticated?.(true);
+          // Simulate permission request
+          handlePermissionRequest({
+            options: [
+              { optionId: 'allow', name: 'Allow', kind: 'allow' },
+              { optionId: 'deny', name: 'Deny', kind: 'reject' },
+            ],
+            toolCall: {
+              toolCallId: 'tc-1',
+              title: 'Edit file.ts',
+              kind: 'edit',
+            },
+          });
+        }, [setIsAuthenticated, handlePermissionRequest]);
+      },
+    );
+
+    const { container } = render(<App />);
+
+    // Verify app doesn't crash
+    expect(container.querySelector('.chat-container')).toBeInTheDocument();
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/App.tsx
+++ b/packages/vscode-ide-companion/src/webview/App.tsx
@@ -361,7 +361,12 @@ export const App: React.FC = () => {
    const raf = requestAnimationFrame(() => {
      const top = container.scrollHeight - container.clientHeight;
      // Use scrollTo to avoid cross-context issues with scrollIntoView.
-      container.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
+      if (typeof container.scrollTo === 'function') {
+        container.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
+      } else {
+        // jsdom doesn't implement Element.scrollTo; fall back to scrollTop.
+        container.scrollTop = top;
+      }
    });
    return () => cancelAnimationFrame(raf);
  }, [
@@ -398,7 +403,12 @@ export const App: React.FC = () => {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => {
        const top = container.scrollHeight - container.clientHeight;
-        container.scrollTo({ top });
+        if (typeof container.scrollTo === 'function') {
+          container.scrollTo({ top });
+        } else {
+          // jsdom doesn't implement Element.scrollTo; fall back to scrollTop.
+          container.scrollTop = top;
+        }
      });
    });
    ro.observe(lastItem);
@@ -586,7 +596,12 @@ export const App: React.FC = () => {
      const container = messagesContainerRef.current;
      if (container) {
        const top = container.scrollHeight - container.clientHeight;
-        container.scrollTo({ top });
+        if (typeof container.scrollTo === 'function') {
+          container.scrollTo({ top });
+        } else {
+          // jsdom doesn't implement Element.scrollTo; fall back to scrollTop.
+          container.scrollTop = top;
+        }
      }

      submitMessage(e);
--- a/packages/vscode-ide-companion/src/webview/MessageHandler.test.ts
+++ b/packages/vscode-ide-companion/src/webview/MessageHandler.test.ts
@@ -0,0 +1,346 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * MessageHandler Tests
+ *
+ * Test objective: Ensure messages are correctly routed between Extension and WebView, preventing message loss.
+ *
+ * Key test scenarios:
+ * 1. Message routing - Ensure different message types route to correct handlers
+ * 2. Session management - Ensure session ID can be correctly set and retrieved
+ * 3. Permission handling - Ensure permission responses are correctly passed
+ * 4. Stream content - Ensure streaming responses are correctly appended
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { MessageHandler } from './MessageHandler.js';
+import type { QwenAgentManager } from '../services/qwenAgentManager.js';
+import type { ConversationStore } from '../services/conversationStore.js';
+
+describe('MessageHandler', () => {
+  let messageHandler: MessageHandler;
+  let mockAgentManager: QwenAgentManager;
+  let mockConversationStore: ConversationStore;
+  let mockSendToWebView: (message: unknown) => void;
+
+  beforeEach(() => {
+    // Mock QwenAgentManager - AI agent manager
+    mockAgentManager = {
+      sendMessage: vi.fn().mockResolvedValue(undefined),
+      createNewSession: vi.fn().mockResolvedValue({ id: 'new-session' }),
+      loadSession: vi.fn().mockResolvedValue([]),
+      switchToSession: vi.fn().mockResolvedValue(undefined),
+      cancelCurrentPrompt: vi.fn().mockResolvedValue(undefined),
+      connect: vi.fn().mockResolvedValue({ requiresAuth: false }),
+      disconnect: vi.fn(),
+      currentSessionId: null,
+    } as unknown as QwenAgentManager;
+
+    // Mock ConversationStore - local session storage
+    mockConversationStore = {
+      createConversation: vi
+        .fn()
+        .mockResolvedValue({ id: 'conv-1', messages: [] }),
+      getConversation: vi
+        .fn()
+        .mockResolvedValue({ id: 'conv-1', messages: [] }),
+      updateConversation: vi.fn().mockResolvedValue(undefined),
+      deleteConversation: vi.fn().mockResolvedValue(undefined),
+      // addMessage method for message storage
+      addMessage: vi.fn().mockResolvedValue(undefined),
+      // Session history related methods
+      getSessionHistory: vi.fn().mockResolvedValue([]),
+      saveSession: vi.fn().mockResolvedValue(undefined),
+    } as unknown as ConversationStore;
+
+    // Mock sendToWebView - send message to WebView
+    mockSendToWebView = vi.fn();
+
+    messageHandler = new MessageHandler(
+      mockAgentManager,
+      mockConversationStore,
+      null, // initial session ID
+      mockSendToWebView,
+    );
+  });
+
+  describe('route', () => {
+    /**
+     * Test: Route sendMessage
+     *
+     * Verifies sendMessage type is routed without error.
+     * The handler may have internal logic before calling agentManager.
+     */
+    it('should route sendMessage without error', async () => {
+      await expect(
+        messageHandler.route({
+          type: 'sendMessage',
+          data: { content: 'Hello, AI!' },
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    /**
+     * Test: Route cancelStreaming
+     *
+     * Verifies cancel requests are correctly passed to AI agent.
+     * Needed when user clicks stop button.
+     */
+    it('should route cancelStreaming to agent manager', async () => {
+      await messageHandler.route({
+        type: 'cancelStreaming',
+        data: {},
+      });
+
+      expect(mockAgentManager.cancelCurrentPrompt).toHaveBeenCalled();
+    });
+
+    /**
+     * Test: Route newQwenSession
+     *
+     * Verifies new session requests are routed without error.
+     * Note: The actual message type is 'newQwenSession', not 'newSession'.
+     */
+    it('should route newQwenSession without error', async () => {
+      await expect(
+        messageHandler.route({
+          type: 'newQwenSession',
+          data: {},
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    /**
+     * Test: Route getQwenSessions
+     *
+     * Verifies get sessions requests are routed without error.
+     * Note: The actual message type is 'getQwenSessions', not 'loadSessions'.
+     */
+    it('should route getQwenSessions without error', async () => {
+      await expect(
+        messageHandler.route({
+          type: 'getQwenSessions',
+          data: {},
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    /**
+     * Test: Route switchQwenSession
+     *
+     * Verifies switch session requests are routed without error.
+     * Note: The actual message type is 'switchQwenSession', not 'switchSession'.
+     */
+    it('should route switchQwenSession without error', async () => {
+      await expect(
+        messageHandler.route({
+          type: 'switchQwenSession',
+          data: { sessionId: 'session-123' },
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    /**
+     * Test: Handle unknown message types
+     *
+     * Verifies unknown message types don't cause crashes.
+     */
+    it('should handle unknown message types gracefully', async () => {
+      await expect(
+        messageHandler.route({
+          type: 'unknownType',
+          data: {},
+        }),
+      ).resolves.not.toThrow();
+    });
+  });
+
+  describe('setCurrentConversationId / getCurrentConversationId', () => {
+    /**
+     * Test: Set and get session ID
+     *
+     * Verifies session ID can be correctly set and retrieved.
+     * This is critical for session state management.
+     */
+    it('should set and get conversation ID', () => {
+      messageHandler.setCurrentConversationId('test-conversation-id');
+
+      expect(messageHandler.getCurrentConversationId()).toBe(
+        'test-conversation-id',
+      );
+    });
+
+    /**
+     * Test: Initial session ID is null
+     *
+     * Verifies session ID is null in initial state.
+     */
+    it('should return null initially', () => {
+      expect(messageHandler.getCurrentConversationId()).toBeNull();
+    });
+
+    /**
+     * Test: Set null session ID
+     *
+     * Verifies session ID can be reset to null.
+     */
+    it('should allow setting null', () => {
+      messageHandler.setCurrentConversationId('test-id');
+      messageHandler.setCurrentConversationId(null);
+
+      expect(messageHandler.getCurrentConversationId()).toBeNull();
+    });
+  });
+
+  describe('setPermissionHandler', () => {
+    /**
+     * Test: Set permission handler
+     *
+     * Verifies permission handler can be correctly set.
+     * Permission requests need this handler to respond to user choices.
+     */
+    it('should set permission handler', async () => {
+      const handler = vi.fn();
+      messageHandler.setPermissionHandler(handler);
+
+      // Trigger permission response
+      await messageHandler.route({
+        type: 'permissionResponse',
+        data: { optionId: 'allow_once' },
+      });
+
+      expect(handler).toHaveBeenCalledWith({
+        type: 'permissionResponse',
+        data: { optionId: 'allow_once' },
+      });
+    });
+
+    /**
+     * Test: Permission response passes correct optionId
+     *
+     * Verifies user's selected permission option is correctly passed.
+     */
+    it('should pass correct optionId to handler', async () => {
+      const handler = vi.fn();
+      messageHandler.setPermissionHandler(handler);
+
+      await messageHandler.route({
+        type: 'permissionResponse',
+        data: { optionId: 'allow_always' },
+      });
+
+      expect(handler).toHaveBeenCalledWith(
+        expect.objectContaining({
+          data: { optionId: 'allow_always' },
+        }),
+      );
+    });
+  });
+
+  describe('setLoginHandler', () => {
+    /**
+     * Test: Set login handler
+     *
+     * Verifies login handler can be correctly set.
+     * Needed when user executes /login command.
+     */
+    it('should set login handler', async () => {
+      const loginHandler = vi.fn().mockResolvedValue(undefined);
+      messageHandler.setLoginHandler(loginHandler);
+
+      await messageHandler.route({
+        type: 'login',
+        data: {},
+      });
+
+      expect(loginHandler).toHaveBeenCalled();
+    });
+  });
+
+  describe('appendStreamContent', () => {
+    /**
+     * Test: Append stream content
+     *
+     * Verifies streaming response content can be correctly appended.
+     * AI responses are streamed, need to append chunk by chunk.
+     */
+    it('should append stream content without error', () => {
+      expect(() => {
+        messageHandler.appendStreamContent('Hello');
+        messageHandler.appendStreamContent(' World');
+      }).not.toThrow();
+    });
+  });
+
+  describe('error handling', () => {
+    /**
+     * Test: Handle sendMessage errors
+     *
+     * Verifies message send failures don't cause crashes.
+     */
+    it('should handle sendMessage errors gracefully', async () => {
+      vi.mocked(mockAgentManager.sendMessage).mockRejectedValue(
+        new Error('Network error'),
+      );
+
+      // Should not throw (errors should be handled internally)
+      await expect(
+        messageHandler.route({
+          type: 'sendMessage',
+          data: { content: 'test' },
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    /**
+     * Test: Handle loadSessions errors
+     *
+     * Verifies load sessions failures don't cause crashes.
+     */
+    it('should handle loadSessions errors gracefully', async () => {
+      vi.mocked(mockAgentManager.loadSession).mockRejectedValue(
+        new Error('Load failed'),
+      );
+
+      await expect(
+        messageHandler.route({
+          type: 'loadSessions',
+          data: {},
+        }),
+      ).resolves.not.toThrow();
+    });
+  });
+
+  describe('message types coverage', () => {
+    /**
+     * Test: Supported message types
+     *
+     * Verifies all key message types can be handled.
+     */
+    const messageTypes = [
+      'sendMessage',
+      'cancelStreaming',
+      'newSession',
+      'loadSessions',
+      'switchSession',
+      'permissionResponse',
+      'login',
+      'attachFile',
+      'openFile',
+      'setApprovalMode',
+    ];
+
+    messageTypes.forEach((type) => {
+      it(`should handle "${type}" message type`, async () => {
+        await expect(
+          messageHandler.route({
+            type,
+            data: {},
+          }),
+        ).resolves.not.toThrow();
+      });
+    });
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/PanelManager.test.ts
+++ b/packages/vscode-ide-companion/src/webview/PanelManager.test.ts
@@ -0,0 +1,324 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * PanelManager Tests
+ *
+ * Test objective: Ensure WebView Panel/Tab can be correctly created and managed, preventing Tab open failures.
+ *
+ * Key test scenarios:
+ * 1. Panel creation - Ensure WebView Panel can be successfully created
+ * 2. Panel reuse - Ensure Panel is not duplicated
+ * 3. Panel display - Ensure Panel can be correctly revealed
+ * 4. Tab capture - Ensure Tab can be correctly captured and tracked
+ * 5. Resource cleanup - Ensure dispose properly cleans up resources
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import * as vscode from 'vscode';
+import { PanelManager } from './PanelManager.js';
+
+describe('PanelManager', () => {
+  let panelManager: PanelManager;
+  let mockExtensionUri: vscode.Uri;
+  let onDisposeCallback: () => void;
+  let mockPanel: vscode.WebviewPanel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockExtensionUri = { fsPath: '/path/to/extension' } as vscode.Uri;
+    onDisposeCallback = vi.fn();
+
+    // Create mock panel
+    mockPanel = {
+      webview: {
+        html: '',
+        options: {},
+        onDidReceiveMessage: vi.fn(() => ({ dispose: vi.fn() })),
+        postMessage: vi.fn(),
+      },
+      viewType: 'qwenCode.chat',
+      title: 'Qwen Code',
+      iconPath: null,
+      visible: true,
+      active: true,
+      viewColumn: 1,
+      onDidDispose: vi.fn(() => ({ dispose: vi.fn() })),
+      onDidChangeViewState: vi.fn(() => ({ dispose: vi.fn() })),
+      reveal: vi.fn(),
+      dispose: vi.fn(),
+    } as unknown as vscode.WebviewPanel;
+
+    // Mock vscode.window.createWebviewPanel
+    vi.mocked(vscode.window.createWebviewPanel).mockReturnValue(mockPanel);
+    vi.mocked(vscode.commands.executeCommand).mockResolvedValue(undefined);
+
+    // Mock tabGroups
+    Object.defineProperty(vi.mocked(vscode.window.tabGroups), 'all', {
+      value: [],
+      writable: true,
+    });
+    Object.assign(vi.mocked(vscode.window.tabGroups).activeTabGroup, {
+      viewColumn: 1,
+      tabs: [],
+      isActive: true,
+      activeTab: undefined,
+    });
+
+    panelManager = new PanelManager(mockExtensionUri, onDisposeCallback);
+  });
+
+  afterEach(() => {
+    panelManager.dispose();
+  });
+
+  describe('createPanel', () => {
+    /**
+     * Test: First Panel creation
+     *
+     * Verifies PanelManager can successfully create a new WebView Panel.
+     * If creation fails, users will not see the chat interface.
+     */
+    it('should create a new panel when none exists', async () => {
+      const result = await panelManager.createPanel();
+
+      expect(result).toBe(true);
+      expect(vscode.window.createWebviewPanel).toHaveBeenCalledWith(
+        'qwenCode.chat', // viewType
+        'Qwen Code', // title
+        expect.any(Object), // viewColumn options
+        expect.objectContaining({
+          enableScripts: true, // Must enable scripts for React to run
+          retainContextWhenHidden: true, // Retain state when hidden
+        }),
+      );
+    });
+
+    /**
+     * Test: Panel reuse
+     *
+     * Verifies Panel is not recreated when it already exists.
+     * Prevents creating unnecessary duplicate Panels.
+     */
+    it('should return false if panel already exists', async () => {
+      await panelManager.createPanel();
+      vi.mocked(vscode.window.createWebviewPanel).mockClear();
+
+      const result = await panelManager.createPanel();
+
+      expect(result).toBe(false);
+      expect(vscode.window.createWebviewPanel).not.toHaveBeenCalled();
+    });
+
+    /**
+     * Test: Panel icon setting
+     *
+     * Verifies correct icon is set when creating Panel.
+     * Icon displays on Tab to help users identify it.
+     */
+    it('should set panel icon', async () => {
+      await panelManager.createPanel();
+
+      expect(mockPanel.iconPath).toBeDefined();
+    });
+
+    /**
+     * Test: Enable scripts
+     *
+     * Verifies script execution is enabled when creating Panel.
+     * This is required for React app to run.
+     */
+    it('should create panel with scripts enabled', async () => {
+      await panelManager.createPanel();
+
+      const createCall = vi.mocked(vscode.window.createWebviewPanel).mock
+        .calls[0];
+      const options = createCall[3] as vscode.WebviewPanelOptions &
+        vscode.WebviewOptions;
+
+      expect(options.enableScripts).toBe(true);
+    });
+
+    /**
+     * Test: Retain context
+     *
+     * Verifies retainContextWhenHidden is set when creating Panel.
+     * Prevents losing chat state when switching Tabs.
+     */
+    it('should retain context when hidden', async () => {
+      await panelManager.createPanel();
+
+      const createCall = vi.mocked(vscode.window.createWebviewPanel).mock
+        .calls[0];
+      const options = createCall[3] as vscode.WebviewPanelOptions &
+        vscode.WebviewOptions;
+
+      expect(options.retainContextWhenHidden).toBe(true);
+    });
+
+    /**
+     * Test: Local resource roots
+     *
+     * Verifies correct local resource roots are set when creating Panel.
+     * This determines which local files WebView can access.
+     */
+    it('should set local resource roots', async () => {
+      await panelManager.createPanel();
+
+      const createCall = vi.mocked(vscode.window.createWebviewPanel).mock
+        .calls[0];
+      const options = createCall[3] as vscode.WebviewPanelOptions &
+        vscode.WebviewOptions;
+
+      expect(options.localResourceRoots).toBeDefined();
+      expect(options.localResourceRoots?.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('getPanel', () => {
+    /**
+     * Test: Get empty Panel
+     *
+     * Verifies null is returned when no Panel is created.
+     */
+    it('should return null when no panel exists', () => {
+      expect(panelManager.getPanel()).toBeNull();
+    });
+
+    /**
+     * Test: Get created Panel
+     *
+     * Verifies the created Panel instance can be correctly retrieved.
+     */
+    it('should return panel after creation', async () => {
+      await panelManager.createPanel();
+
+      expect(panelManager.getPanel()).toBe(mockPanel);
+    });
+  });
+
+  describe('setPanel', () => {
+    /**
+     * Test: Set Panel (for restoration)
+     *
+     * Verifies existing Panel can be set, used for restoration after VSCode restart.
+     */
+    it('should set panel for restoration', () => {
+      panelManager.setPanel(mockPanel);
+
+      expect(panelManager.getPanel()).toBe(mockPanel);
+    });
+  });
+
+  describe('revealPanel', () => {
+    /**
+     * Test: Show Panel
+     *
+     * Verifies reveal is correctly called to show Panel.
+     * Needed when user clicks to open chat.
+     */
+    it('should reveal panel when it exists', async () => {
+      await panelManager.createPanel();
+
+      panelManager.revealPanel();
+
+      expect(mockPanel.reveal).toHaveBeenCalled();
+    });
+
+    /**
+     * Test: Preserve focus option
+     *
+     * Verifies preserveFocus parameter is correctly passed to reveal.
+     */
+    it('should respect preserveFocus parameter', async () => {
+      await panelManager.createPanel();
+
+      panelManager.revealPanel(true);
+
+      expect(mockPanel.reveal).toHaveBeenCalledWith(
+        expect.any(Number),
+        true, // preserveFocus
+      );
+    });
+  });
+
+  describe('dispose', () => {
+    /**
+     * Test: Release resources
+     *
+     * Verifies dispose properly cleans up Panel resources.
+     * Prevents memory leaks.
+     */
+    it('should dispose panel and set to null', async () => {
+      await panelManager.createPanel();
+
+      panelManager.dispose();
+
+      expect(mockPanel.dispose).toHaveBeenCalled();
+      expect(panelManager.getPanel()).toBeNull();
+    });
+
+    /**
+     * Test: Safe dispose
+     *
+     * Verifies dispose doesn't throw when no Panel exists.
+     */
+    it('should not throw when disposing without panel', () => {
+      expect(() => panelManager.dispose()).not.toThrow();
+    });
+  });
+
+  describe('registerDisposeHandler', () => {
+    /**
+     * Test: Register dispose callback
+     *
+     * Verifies dispose callback can be registered for Panel disposal.
+     * Used to clean up related resources.
+     */
+    it('should register dispose handler', async () => {
+      await panelManager.createPanel();
+      const disposables: vscode.Disposable[] = [];
+
+      panelManager.registerDisposeHandler(disposables);
+
+      expect(mockPanel.onDidDispose).toHaveBeenCalled();
+    });
+  });
+
+  describe('registerViewStateChangeHandler', () => {
+    /**
+     * Test: Register view state change handler
+     *
+     * Verifies Panel view state changes can be monitored.
+     * Used to update Tab tracking.
+     */
+    it('should register view state change handler', async () => {
+      await panelManager.createPanel();
+      const disposables: vscode.Disposable[] = [];
+
+      panelManager.registerViewStateChangeHandler(disposables);
+
+      expect(mockPanel.onDidChangeViewState).toHaveBeenCalled();
+    });
+  });
+
+  describe('error handling', () => {
+    /**
+     * Test: Handle Panel creation failure
+     *
+     * Verifies graceful fallback when creating new editor group fails.
+     */
+    it('should handle newGroupRight command failure gracefully', async () => {
+      vi.mocked(vscode.commands.executeCommand).mockRejectedValueOnce(
+        new Error('Command failed'),
+      );
+
+      // Should not throw, but fallback to alternative method
+      const result = await panelManager.createPanel();
+
+      expect(result).toBe(true);
+    });
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/WebViewContent.test.ts
+++ b/packages/vscode-ide-companion/src/webview/WebViewContent.test.ts
@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * WebViewContent Tests
+ *
+ * Test objective: Ensure WebView HTML is correctly generated, preventing WebView blank screen issues.
+ *
+ * Key test scenarios:
+ * 1. HTML structure integrity - Ensure generated HTML contains required elements
+ * 2. CSP configuration - Prevent security issues
+ * 3. Script references - Ensure React app can load
+ * 4. XSS protection - Ensure URIs are properly escaped
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type * as vscode from 'vscode';
+import { WebViewContent } from './WebViewContent.js';
+
+describe('WebViewContent', () => {
+  let mockPanel: vscode.WebviewPanel;
+  let mockExtensionUri: vscode.Uri;
+
+  beforeEach(() => {
+    // Mock extension URI
+    mockExtensionUri = { fsPath: '/path/to/extension' } as vscode.Uri;
+
+    // Mock WebView Panel
+    mockPanel = {
+      webview: {
+        asWebviewUri: vi.fn((uri: { fsPath: string }) => ({
+          toString: () => `vscode-webview://resource${uri.fsPath}`,
+        })),
+        cspSource: 'vscode-webview:',
+      },
+    } as unknown as vscode.WebviewPanel;
+  });
+
+  /**
+   * Test: Basic HTML structure
+   *
+   * Verifies generated HTML contains DOCTYPE, html, head, body elements.
+   * WebView may fail to render if these elements are missing.
+   */
+  it('should generate valid HTML with required elements', () => {
+    const html = WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    expect(html).toContain('<!DOCTYPE html>');
+    expect(html).toContain('<html lang="en">');
+    expect(html).toContain('<head>');
+    expect(html).toContain('<body');
+    expect(html).toContain('</html>');
+  });
+
+  /**
+   * Test: React mount point
+   *
+   * Verifies HTML contains div with id="root", the React app mount point.
+   * React app cannot render if this is missing.
+   */
+  it('should include React mount point (#root)', () => {
+    const html = WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    expect(html).toContain('<div id="root"></div>');
+  });
+
+  /**
+   * Test: CSP (Content Security Policy) configuration
+   *
+   * Verifies HTML contains correct CSP meta tag.
+   * CSP prevents XSS attacks, but misconfiguration can prevent scripts from loading.
+   */
+  it('should include Content-Security-Policy meta tag', () => {
+    const html = WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    expect(html).toContain('Content-Security-Policy');
+    expect(html).toContain("default-src 'none'");
+    expect(html).toContain('script-src');
+    expect(html).toContain('style-src');
+    expect(html).toContain('img-src');
+  });
+
+  /**
+   * Test: Script reference
+   *
+   * Verifies HTML contains webview.js script reference.
+   * This is the compiled React app entry point; missing it causes blank screen.
+   */
+  it('should include webview.js script reference', () => {
+    const html = WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    expect(html).toContain('<script src=');
+    expect(html).toContain('webview.js');
+  });
+
+  /**
+   * Test: Extension URI attribute
+   *
+   * Verifies body element contains data-extension-uri attribute.
+   * Frontend code uses this attribute to build resource paths (like icons).
+   */
+  it('should set data-extension-uri attribute on body', () => {
+    const html = WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    expect(html).toContain('data-extension-uri=');
+  });
+
+  /**
+   * Test: XSS protection
+   *
+   * Verifies special characters are properly escaped to prevent XSS attacks.
+   * If URI contains malicious scripts, they should be escaped, not executed.
+   */
+  it('should escape HTML in URIs to prevent XSS', () => {
+    // Mock URI containing special characters (already HTML-escaped by browser)
+    mockPanel.webview.asWebviewUri = vi.fn(
+      (_localResource: { fsPath: string }) =>
+        ({
+          toString: () =>
+            'vscode-webview://resource&lt;script&gt;alert(1)&lt;/script&gt;',
+        }) as vscode.Uri,
+    );
+
+    const html = WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    // Ensure raw <script> tag is not present
+    expect(html).not.toContain('<script>alert(1)</script>');
+    // The HTML escaping will double-encode the & to &amp;
+    // This is correct behavior - prevents XSS injection
+    expect(html).toContain('&amp;lt;script&amp;gt;');
+  });
+
+  /**
+   * Test: Viewport meta tag
+   *
+   * Verifies HTML contains correct viewport settings.
+   * This is important for responsive layout.
+   */
+  it('should include viewport meta tag', () => {
+    const html = WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    expect(html).toContain('name="viewport"');
+    expect(html).toContain('width=device-width');
+  });
+
+  /**
+   * Test: Character encoding
+   *
+   * Verifies HTML declares UTF-8 encoding.
+   * Missing this may cause garbled display of non-ASCII characters.
+   */
+  it('should declare UTF-8 charset', () => {
+    const html = WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    expect(html).toContain('charset="UTF-8"');
+  });
+
+  /**
+   * Test: asWebviewUri calls
+   *
+   * Verifies asWebviewUri is correctly called to convert resource URIs.
+   * This is part of VSCode WebView security mechanism.
+   */
+  it('should call asWebviewUri for resource paths', () => {
+    WebViewContent.generate(mockPanel, mockExtensionUri);
+
+    expect(mockPanel.webview.asWebviewUri).toHaveBeenCalled();
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/components/PermissionDrawer/PermissionDrawer.test.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/PermissionDrawer/PermissionDrawer.test.tsx
@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/** @vitest-environment jsdom */
+
+import type React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { fireEvent } from '@testing-library/dom';
+import { PermissionDrawer } from './PermissionDrawer.js';
+import type { PermissionOption, ToolCall } from './PermissionRequest.js';
+
+const render = (ui: React.ReactElement) => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(ui);
+  });
+  return {
+    container,
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+      container.remove();
+    },
+  };
+};
+
+const baseOptions: PermissionOption[] = [
+  { name: 'Allow once', kind: 'allow_once', optionId: 'allow_once' },
+  { name: 'Reject', kind: 'reject', optionId: 'reject' },
+];
+
+const baseToolCall: ToolCall = {
+  kind: 'edit',
+  title: 'Edit file',
+  locations: [{ path: '/repo/src/file.ts' }],
+};
+
+describe('PermissionDrawer', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('does not render when closed', () => {
+    const { container, unmount } = render(
+      <PermissionDrawer
+        isOpen={false}
+        options={baseOptions}
+        toolCall={baseToolCall}
+        onResponse={vi.fn()}
+      />,
+    );
+
+    expect(container.textContent).toBe('');
+    unmount();
+  });
+
+  it('renders the affected file name for edits', () => {
+    const { container, unmount } = render(
+      <PermissionDrawer
+        isOpen
+        options={baseOptions}
+        toolCall={baseToolCall}
+        onResponse={vi.fn()}
+      />,
+    );
+
+    expect(container.textContent).toContain('file.ts');
+    unmount();
+  });
+
+  it('selects the first option on number key press', () => {
+    const onResponse = vi.fn();
+    const { unmount } = render(
+      <PermissionDrawer
+        isOpen
+        options={baseOptions}
+        toolCall={baseToolCall}
+        onResponse={onResponse}
+      />,
+    );
+
+    fireEvent.keyDown(window, { key: '1' });
+
+    expect(onResponse).toHaveBeenCalledWith('allow_once');
+    unmount();
+  });
+
+  it('rejects and closes on Escape', () => {
+    const onResponse = vi.fn();
+    const onClose = vi.fn();
+    const { unmount } = render(
+      <PermissionDrawer
+        isOpen
+        options={baseOptions}
+        toolCall={baseToolCall}
+        onResponse={onResponse}
+        onClose={onClose}
+      />,
+    );
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+
+    expect(onResponse).toHaveBeenCalledWith('reject');
+    expect(onClose).toHaveBeenCalled();
+    unmount();
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/hooks/message/useMessageHandling.test.tsx
+++ b/packages/vscode-ide-companion/src/webview/hooks/message/useMessageHandling.test.tsx
@@ -0,0 +1,597 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useMessageHandling Hook Tests
+ *
+ * Test objective: Ensure message handling logic is correct, preventing message display issues.
+ *
+ * Key test scenarios:
+ * 1. Message addition - Ensure messages are correctly added to the list
+ * 2. Streaming response - Ensure streaming content is appended chunk by chunk
+ * 3. Thinking process - Ensure AI thinking process is handled correctly
+ * 4. State management - Ensure loading states are updated correctly
+ * 5. Message clearing - Ensure message list can be cleared correctly
+ */
+
+/** @vitest-environment jsdom */
+
+import type React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react';
+import { useMessageHandling, type TextMessage } from './useMessageHandling.js';
+
+// Reference for storing hook results
+interface HookResult {
+  messages: TextMessage[];
+  isStreaming: boolean;
+  isWaitingForResponse: boolean;
+  loadingMessage: string;
+  addMessage: (message: TextMessage) => void;
+  clearMessages: () => void;
+  startStreaming: (timestamp?: number) => void;
+  appendStreamChunk: (chunk: string) => void;
+  endStreaming: () => void;
+  breakAssistantSegment: () => void;
+  appendThinkingChunk: (chunk: string) => void;
+  clearThinking: () => void;
+  setWaitingForResponse: (message: string) => void;
+  clearWaitingForResponse: () => void;
+  setMessages: (messages: TextMessage[]) => void;
+}
+
+// Test Harness component
+function TestHarness({
+  resultRef,
+}: {
+  resultRef: React.MutableRefObject<HookResult | null>;
+}) {
+  const hookResult = useMessageHandling();
+  resultRef.current = hookResult;
+  return null;
+}
+
+// Helper function to render hook
+function renderMessageHandlingHook() {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const resultRef: React.MutableRefObject<HookResult | null> = {
+    current: null,
+  };
+
+  act(() => {
+    root.render(<TestHarness resultRef={resultRef} />);
+  });
+
+  return {
+    result: resultRef as React.MutableRefObject<HookResult>,
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+      container.remove();
+    },
+  };
+}
+
+describe('useMessageHandling', () => {
+  let rendered: {
+    result: React.MutableRefObject<HookResult>;
+    unmount: () => void;
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    rendered = renderMessageHandlingHook();
+  });
+
+  afterEach(() => {
+    rendered.unmount();
+    vi.restoreAllMocks();
+  });
+
+  describe('Initial State', () => {
+    /**
+     * Test: Initial state
+     *
+     * Verifies hook initializes with correct state.
+     * Ensures no unexpected initial messages or states.
+     */
+    it('should have correct initial state', () => {
+      expect(rendered.result.current.messages).toEqual([]);
+      expect(rendered.result.current.isStreaming).toBe(false);
+      expect(rendered.result.current.isWaitingForResponse).toBe(false);
+      expect(rendered.result.current.loadingMessage).toBe('');
+    });
+  });
+
+  describe('addMessage - Message addition', () => {
+    /**
+     * Test: Add user message
+     *
+     * Verifies user messages are correctly added to message list.
+     */
+    it('should add user message', () => {
+      const message: TextMessage = {
+        role: 'user',
+        content: 'Hello, AI!',
+        timestamp: Date.now(),
+      };
+
+      act(() => {
+        rendered.result.current.addMessage(message);
+      });
+
+      expect(rendered.result.current.messages).toHaveLength(1);
+      expect(rendered.result.current.messages[0].role).toBe('user');
+      expect(rendered.result.current.messages[0].content).toBe('Hello, AI!');
+    });
+
+    /**
+     * Test: Add AI response
+     *
+     * Verifies AI responses are correctly added to message list.
+     */
+    it('should add assistant message', () => {
+      const message: TextMessage = {
+        role: 'assistant',
+        content: 'Hello! How can I help?',
+        timestamp: Date.now(),
+      };
+
+      act(() => {
+        rendered.result.current.addMessage(message);
+      });
+
+      expect(rendered.result.current.messages).toHaveLength(1);
+      expect(rendered.result.current.messages[0].role).toBe('assistant');
+    });
+
+    /**
+     * Test: Add message with file context
+     *
+     * Verifies messages can include file context information.
+     */
+    it('should add message with file context', () => {
+      const message: TextMessage = {
+        role: 'user',
+        content: 'Fix this code',
+        timestamp: Date.now(),
+        fileContext: {
+          fileName: 'test.ts',
+          filePath: '/src/test.ts',
+          startLine: 1,
+          endLine: 10,
+        },
+      };
+
+      act(() => {
+        rendered.result.current.addMessage(message);
+      });
+
+      expect(rendered.result.current.messages[0].fileContext).toBeDefined();
+      expect(rendered.result.current.messages[0].fileContext?.fileName).toBe(
+        'test.ts',
+      );
+    });
+
+    /**
+     * Test: Message order
+     *
+     * Verifies multiple messages maintain addition order.
+     */
+    it('should maintain message order', () => {
+      act(() => {
+        rendered.result.current.addMessage({
+          role: 'user',
+          content: 'First',
+          timestamp: Date.now(),
+        });
+        rendered.result.current.addMessage({
+          role: 'assistant',
+          content: 'Second',
+          timestamp: Date.now(),
+        });
+        rendered.result.current.addMessage({
+          role: 'user',
+          content: 'Third',
+          timestamp: Date.now(),
+        });
+      });
+
+      expect(rendered.result.current.messages).toHaveLength(3);
+      expect(rendered.result.current.messages[0].content).toBe('First');
+      expect(rendered.result.current.messages[1].content).toBe('Second');
+      expect(rendered.result.current.messages[2].content).toBe('Third');
+    });
+  });
+
+  describe('Streaming - Streaming response', () => {
+    /**
+     * Test: Start streaming response
+     *
+     * Verifies startStreaming correctly sets state and creates placeholder message.
+     */
+    it('should start streaming and create placeholder', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      expect(rendered.result.current.isStreaming).toBe(true);
+      expect(rendered.result.current.messages).toHaveLength(1);
+      expect(rendered.result.current.messages[0].role).toBe('assistant');
+      expect(rendered.result.current.messages[0].content).toBe('');
+    });
+
+    /**
+     * Test: Append streaming content
+     *
+     * Verifies streaming content is appended chunk by chunk to placeholder message.
+     */
+    it('should append stream chunks to placeholder', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendStreamChunk('Hello');
+        rendered.result.current.appendStreamChunk(' World');
+        rendered.result.current.appendStreamChunk('!');
+      });
+
+      expect(rendered.result.current.messages[0].content).toBe('Hello World!');
+    });
+
+    /**
+     * Test: Use provided timestamp
+     *
+     * Verifies startStreaming can use extension-provided timestamp for ordering.
+     */
+    it('should use provided timestamp for ordering', () => {
+      const customTimestamp = 1000;
+
+      act(() => {
+        rendered.result.current.startStreaming(customTimestamp);
+      });
+
+      expect(rendered.result.current.messages[0].timestamp).toBe(
+        customTimestamp,
+      );
+    });
+
+    /**
+     * Test: End streaming response
+     *
+     * Verifies endStreaming correctly resets state.
+     */
+    it('should end streaming correctly', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendStreamChunk('Response content');
+      });
+
+      act(() => {
+        rendered.result.current.endStreaming();
+      });
+
+      expect(rendered.result.current.isStreaming).toBe(false);
+      expect(rendered.result.current.messages).toHaveLength(1);
+      expect(rendered.result.current.messages[0].content).toBe(
+        'Response content',
+      );
+    });
+
+    /**
+     * Test: Ignore late chunks after streaming ends
+     *
+     * Verifies late chunks are ignored after user cancels.
+     */
+    it('should ignore chunks after streaming ends', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendStreamChunk('Hello');
+      });
+
+      act(() => {
+        rendered.result.current.endStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendStreamChunk(' Late chunk');
+      });
+
+      expect(rendered.result.current.messages[0].content).toBe('Hello');
+    });
+  });
+
+  describe('breakAssistantSegment - Segmented streaming response', () => {
+    /**
+     * Test: Break current stream segment
+     *
+     * Verifies current stream segment can be broken when tool call is inserted.
+     */
+    it('should break current segment and start new one on next chunk', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendStreamChunk('Part 1');
+      });
+
+      act(() => {
+        rendered.result.current.breakAssistantSegment();
+      });
+
+      act(() => {
+        rendered.result.current.appendStreamChunk('Part 2');
+      });
+
+      // Should have two assistant messages
+      expect(rendered.result.current.messages).toHaveLength(2);
+      expect(rendered.result.current.messages[0].content).toBe('Part 1');
+      expect(rendered.result.current.messages[1].content).toBe('Part 2');
+    });
+  });
+
+  describe('Thinking - Thinking process', () => {
+    /**
+     * Test: Append thinking content
+     *
+     * Verifies AI thinking process is correctly appended.
+     */
+    it('should append thinking chunks', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendThinkingChunk('Analyzing');
+      });
+
+      act(() => {
+        rendered.result.current.appendThinkingChunk(' the code');
+      });
+
+      const thinkingMsg = rendered.result.current.messages.find(
+        (m) => m.role === 'thinking',
+      );
+      expect(thinkingMsg).toBeDefined();
+      expect(thinkingMsg?.content).toBe('Analyzing the code');
+    });
+
+    /**
+     * Test: Remove thinking message on stream end
+     *
+     * Verifies thinking message is removed after streaming ends.
+     */
+    it('should remove thinking message on end streaming', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+        rendered.result.current.appendThinkingChunk('Thinking...');
+        rendered.result.current.appendStreamChunk('Response');
+        rendered.result.current.endStreaming();
+      });
+
+      const thinkingMsg = rendered.result.current.messages.find(
+        (m) => m.role === 'thinking',
+      );
+      expect(thinkingMsg).toBeUndefined();
+    });
+
+    /**
+     * Test: Manually clear thinking message
+     *
+     * Verifies clearThinking correctly removes thinking message.
+     */
+    it('should clear thinking message manually', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendThinkingChunk('Thinking...');
+      });
+
+      expect(
+        rendered.result.current.messages.find((m) => m.role === 'thinking'),
+      ).toBeDefined();
+
+      act(() => {
+        rendered.result.current.clearThinking();
+      });
+
+      expect(
+        rendered.result.current.messages.find((m) => m.role === 'thinking'),
+      ).toBeUndefined();
+    });
+
+    /**
+     * Test: Ignore thinking chunks after streaming ends
+     *
+     * Verifies late thinking content is ignored after user cancels.
+     */
+    it('should ignore thinking chunks after streaming ends', () => {
+      act(() => {
+        rendered.result.current.startStreaming();
+        rendered.result.current.endStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendThinkingChunk('Late thinking');
+      });
+
+      expect(
+        rendered.result.current.messages.find((m) => m.role === 'thinking'),
+      ).toBeUndefined();
+    });
+  });
+
+  describe('Loading State', () => {
+    /**
+     * Test: Set waiting for response state
+     *
+     * Verifies setWaitingForResponse correctly sets state and message.
+     */
+    it('should set waiting for response state', () => {
+      act(() => {
+        rendered.result.current.setWaitingForResponse('AI is thinking...');
+      });
+
+      expect(rendered.result.current.isWaitingForResponse).toBe(true);
+      expect(rendered.result.current.loadingMessage).toBe('AI is thinking...');
+    });
+
+    /**
+     * Test: Clear waiting for response state
+     *
+     * Verifies clearWaitingForResponse correctly resets state.
+     */
+    it('should clear waiting for response state', () => {
+      act(() => {
+        rendered.result.current.setWaitingForResponse('Loading...');
+        rendered.result.current.clearWaitingForResponse();
+      });
+
+      expect(rendered.result.current.isWaitingForResponse).toBe(false);
+      expect(rendered.result.current.loadingMessage).toBe('');
+    });
+  });
+
+  describe('clearMessages - Message clearing', () => {
+    /**
+     * Test: Clear all messages
+     *
+     * Verifies clearMessages correctly clears message list.
+     */
+    it('should clear all messages', () => {
+      act(() => {
+        rendered.result.current.addMessage({
+          role: 'user',
+          content: 'Test 1',
+          timestamp: Date.now(),
+        });
+        rendered.result.current.addMessage({
+          role: 'assistant',
+          content: 'Test 2',
+          timestamp: Date.now(),
+        });
+      });
+
+      expect(rendered.result.current.messages).toHaveLength(2);
+
+      act(() => {
+        rendered.result.current.clearMessages();
+      });
+
+      expect(rendered.result.current.messages).toHaveLength(0);
+    });
+  });
+
+  describe('setMessages - Direct message setting', () => {
+    /**
+     * Test: Directly set message list
+     *
+     * Verifies entire message list can be replaced directly (for session restoration).
+     */
+    it('should set messages directly', () => {
+      const messages: TextMessage[] = [
+        { role: 'user', content: 'Hello', timestamp: 1000 },
+        { role: 'assistant', content: 'Hi there!', timestamp: 1001 },
+      ];
+
+      act(() => {
+        rendered.result.current.setMessages(messages);
+      });
+
+      expect(rendered.result.current.messages).toEqual(messages);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    /**
+     * Test: Handle empty content
+     *
+     * Verifies empty content handling doesn't cause issues.
+     */
+    it('should handle empty content', () => {
+      act(() => {
+        rendered.result.current.addMessage({
+          role: 'user',
+          content: '',
+          timestamp: Date.now(),
+        });
+      });
+
+      expect(rendered.result.current.messages[0].content).toBe('');
+    });
+
+    /**
+     * Test: Handle many messages
+     *
+     * Verifies large number of messages can be handled without crashing.
+     */
+    it('should handle many messages', () => {
+      act(() => {
+        for (let i = 0; i < 100; i++) {
+          rendered.result.current.addMessage({
+            role: i % 2 === 0 ? 'user' : 'assistant',
+            content: `Message ${i}`,
+            timestamp: Date.now() + i,
+          });
+        }
+      });
+
+      expect(rendered.result.current.messages).toHaveLength(100);
+    });
+
+    /**
+     * Test: Handle rapid operations
+     *
+     * Verifies rapid consecutive operations don't cause state anomalies.
+     */
+    it('should handle rapid operations', () => {
+      // First round of streaming
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendStreamChunk('A');
+        rendered.result.current.appendStreamChunk('B');
+        rendered.result.current.appendStreamChunk('C');
+      });
+
+      act(() => {
+        rendered.result.current.endStreaming();
+      });
+
+      // Second round of streaming
+      act(() => {
+        rendered.result.current.startStreaming();
+      });
+
+      act(() => {
+        rendered.result.current.appendStreamChunk('D');
+      });
+
+      act(() => {
+        rendered.result.current.endStreaming();
+      });
+
+      // Should have two assistant messages
+      expect(rendered.result.current.messages).toHaveLength(2);
+      expect(rendered.result.current.messages[0].content).toBe('ABC');
+      expect(rendered.result.current.messages[1].content).toBe('D');
+    });
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/hooks/useVSCode.test.tsx
+++ b/packages/vscode-ide-companion/src/webview/hooks/useVSCode.test.tsx
@@ -0,0 +1,327 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useVSCode Hook Tests
+ *
+ * Test objective: Ensure VSCode API communication works correctly, preventing WebView-Extension communication failures.
+ *
+ * Key test scenarios:
+ * 1. API acquisition - Ensure VSCode API can be correctly acquired
+ * 2. postMessage - Ensure messages can be sent to extension
+ * 3. getState/setState - Ensure state can be correctly persisted
+ * 4. Singleton pattern - Ensure API instance is created only once
+ * 5. Fallback handling - Ensure fallback exists in non-VSCode environments
+ */
+
+/** @vitest-environment jsdom */
+
+import type React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react';
+
+// Declare global types
+declare global {
+  var acquireVsCodeApi:
+    | (() => {
+        postMessage: (message: unknown) => void;
+        getState: () => unknown;
+        setState: (state: unknown) => void;
+      })
+    | undefined;
+}
+
+// VSCode API interface
+interface VSCodeAPI {
+  postMessage: (message: unknown) => void;
+  getState: () => unknown;
+  setState: (state: unknown) => void;
+}
+
+// Test Harness component
+function TestHarness({
+  resultRef,
+  useVSCode,
+}: {
+  resultRef: React.MutableRefObject<VSCodeAPI | null>;
+  useVSCode: () => VSCodeAPI;
+}) {
+  const hookResult = useVSCode();
+  resultRef.current = hookResult;
+  return null;
+}
+
+// Helper function to render hook
+async function renderVSCodeHook() {
+  const { useVSCode } = await import('./useVSCode.js');
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const resultRef: React.MutableRefObject<VSCodeAPI | null> = { current: null };
+
+  act(() => {
+    root.render(<TestHarness resultRef={resultRef} useVSCode={useVSCode} />);
+  });
+
+  return {
+    result: resultRef as React.MutableRefObject<VSCodeAPI>,
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+      container.remove();
+    },
+  };
+}
+
+describe('useVSCode', () => {
+  let originalAcquireVsCodeApi: typeof globalThis.acquireVsCodeApi;
+
+  beforeEach(() => {
+    // Save original value
+    originalAcquireVsCodeApi = globalThis.acquireVsCodeApi;
+    // Reset modules to clear cached API instance
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    // Restore original value
+    globalThis.acquireVsCodeApi = originalAcquireVsCodeApi;
+    vi.restoreAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  describe('API Acquisition - VSCode API acquisition', () => {
+    /**
+     * Test: Acquire VSCode API
+     *
+     * Verifies API can be correctly acquired in VSCode environment.
+     * This is the foundation for WebView-Extension communication.
+     */
+    it('should acquire VSCode API when available', async () => {
+      const mockApi = {
+        postMessage: vi.fn(),
+        getState: vi.fn(() => ({})),
+        setState: vi.fn(),
+      };
+
+      globalThis.acquireVsCodeApi = vi.fn(() => mockApi);
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      expect(result.current).toBeDefined();
+      expect(result.current.postMessage).toBeDefined();
+      expect(result.current.getState).toBeDefined();
+      expect(result.current.setState).toBeDefined();
+
+      unmount();
+    });
+
+    /**
+     * Test: Development environment fallback
+     *
+     * Verifies mock implementation is provided in non-VSCode environments.
+     * Allows development and testing in browser.
+     */
+    it('should provide fallback when acquireVsCodeApi is not available', async () => {
+      globalThis.acquireVsCodeApi = undefined;
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      expect(result.current).toBeDefined();
+      expect(typeof result.current.postMessage).toBe('function');
+      expect(typeof result.current.getState).toBe('function');
+      expect(typeof result.current.setState).toBe('function');
+
+      unmount();
+    });
+  });
+
+  describe('postMessage - Message sending', () => {
+    /**
+     * Test: Send message to extension
+     *
+     * Verifies postMessage correctly calls VSCode API.
+     * This is how WebView sends commands to extension.
+     */
+    it('should call postMessage on VSCode API', async () => {
+      const mockPostMessage = vi.fn();
+      globalThis.acquireVsCodeApi = vi.fn(() => ({
+        postMessage: mockPostMessage,
+        getState: vi.fn(() => ({})),
+        setState: vi.fn(),
+      }));
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      const testMessage = { type: 'test', data: { foo: 'bar' } };
+      result.current.postMessage(testMessage);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(testMessage);
+
+      unmount();
+    });
+
+    /**
+     * Test: Send different message types
+     *
+     * Verifies various message types can be correctly sent.
+     */
+    it('should handle different message types', async () => {
+      const mockPostMessage = vi.fn();
+      globalThis.acquireVsCodeApi = vi.fn(() => ({
+        postMessage: mockPostMessage,
+        getState: vi.fn(() => ({})),
+        setState: vi.fn(),
+      }));
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      // Test various message types
+      const messages = [
+        { type: 'sendMessage', data: { content: 'Hello' } },
+        { type: 'cancelStreaming', data: {} },
+        { type: 'newSession', data: {} },
+        { type: 'permissionResponse', data: { optionId: 'allow' } },
+        { type: 'login', data: {} },
+      ];
+
+      messages.forEach((msg) => {
+        result.current.postMessage(msg);
+      });
+
+      expect(mockPostMessage).toHaveBeenCalledTimes(messages.length);
+
+      unmount();
+    });
+  });
+
+  describe('getState/setState - State persistence', () => {
+    /**
+     * Test: Get state
+     *
+     * Verifies WebView persisted state can be correctly retrieved.
+     */
+    it('should get state from VSCode API', async () => {
+      const mockState = { messages: [], sessionId: 'test-123' };
+      globalThis.acquireVsCodeApi = vi.fn(() => ({
+        postMessage: vi.fn(),
+        getState: vi.fn(() => mockState),
+        setState: vi.fn(),
+      }));
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      const state = result.current.getState();
+      expect(state).toEqual(mockState);
+
+      unmount();
+    });
+
+    /**
+     * Test: Set state
+     *
+     * Verifies WebView persisted state can be correctly set.
+     * State persists even after WebView is hidden.
+     */
+    it('should set state on VSCode API', async () => {
+      const mockSetState = vi.fn();
+      globalThis.acquireVsCodeApi = vi.fn(() => ({
+        postMessage: vi.fn(),
+        getState: vi.fn(() => ({})),
+        setState: mockSetState,
+      }));
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      const newState = { messages: [{ content: 'test' }] };
+      result.current.setState(newState);
+
+      expect(mockSetState).toHaveBeenCalledWith(newState);
+
+      unmount();
+    });
+  });
+
+  describe('Singleton Pattern', () => {
+    /**
+     * Test: API instance created only once
+     *
+     * Verifies acquireVsCodeApi is called only once.
+     * VSCode requires this function to be called only once.
+     */
+    it('should only call acquireVsCodeApi once', async () => {
+      const mockAcquire = vi.fn(() => ({
+        postMessage: vi.fn(),
+        getState: vi.fn(() => ({})),
+        setState: vi.fn(),
+      }));
+      globalThis.acquireVsCodeApi = mockAcquire;
+
+      const { unmount: unmount1 } = await renderVSCodeHook();
+      const { unmount: unmount2 } = await renderVSCodeHook();
+      const { unmount: unmount3 } = await renderVSCodeHook();
+
+      // acquireVsCodeApi should only be called once
+      expect(mockAcquire).toHaveBeenCalledTimes(1);
+
+      unmount1();
+      unmount2();
+      unmount3();
+    });
+  });
+
+  describe('Fallback Behavior', () => {
+    /**
+     * Test: Fallback postMessage doesn't throw
+     *
+     * Verifies mock postMessage works in development environment.
+     */
+    it('should not throw on fallback postMessage', async () => {
+      globalThis.acquireVsCodeApi = undefined;
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      expect(() => {
+        result.current.postMessage({ type: 'test', data: {} });
+      }).not.toThrow();
+
+      unmount();
+    });
+
+    /**
+     * Test: Fallback getState returns empty object
+     *
+     * Verifies getState returns empty object in development environment.
+     */
+    it('should return empty object on fallback getState', async () => {
+      globalThis.acquireVsCodeApi = undefined;
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      const state = result.current.getState();
+      expect(state).toEqual({});
+
+      unmount();
+    });
+
+    /**
+     * Test: Fallback setState doesn't throw
+     *
+     * Verifies mock setState works in development environment.
+     */
+    it('should not throw on fallback setState', async () => {
+      globalThis.acquireVsCodeApi = undefined;
+
+      const { result, unmount } = await renderVSCodeHook();
+
+      expect(() => {
+        result.current.setState({ test: 'value' });
+      }).not.toThrow();
+
+      unmount();
+    });
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/hooks/useWebViewMessages.test.tsx
+++ b/packages/vscode-ide-companion/src/webview/hooks/useWebViewMessages.test.tsx
@@ -0,0 +1,342 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/** @vitest-environment jsdom */
+
+ 
+import React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import type {
+  PermissionOption,
+  ToolCall as PermissionToolCall,
+} from '../components/PermissionDrawer/PermissionRequest.js';
+import type { ToolCallUpdate } from '../../types/chatTypes.js';
+import type { ApprovalModeValue } from '../../types/approvalModeValueTypes.js';
+import type { PlanEntry, UsageStatsPayload } from '../../types/chatTypes.js';
+import type { ModelInfo } from '../../types/acpTypes.js';
+
+declare global {
+  var acquireVsCodeApi:
+    | undefined
+    | (() => {
+        postMessage: (message: unknown) => void;
+        getState: () => unknown;
+        setState: (state: unknown) => void;
+      });
+}
+
+interface WebViewMessageProps {
+  sessionManagement: {
+    currentSessionId: string | null;
+    setQwenSessions: (
+      sessions:
+        | Array<Record<string, unknown>>
+        | ((
+            prev: Array<Record<string, unknown>>,
+          ) => Array<Record<string, unknown>>),
+    ) => void;
+    setCurrentSessionId: (id: string | null) => void;
+    setCurrentSessionTitle: (title: string) => void;
+    setShowSessionSelector: (show: boolean) => void;
+    setNextCursor: (cursor: number | undefined) => void;
+    setHasMore: (hasMore: boolean) => void;
+    setIsLoading: (loading: boolean) => void;
+    handleSaveSessionResponse: (response: {
+      success: boolean;
+      message?: string;
+    }) => void;
+  };
+  fileContext: {
+    setActiveFileName: (name: string | null) => void;
+    setActiveFilePath: (path: string | null) => void;
+    setActiveSelection: (
+      selection: { startLine: number; endLine: number } | null,
+    ) => void;
+    setWorkspaceFiles: (
+      files: Array<{
+        id: string;
+        label: string;
+        description: string;
+        path: string;
+      }>,
+    ) => void;
+    addFileReference: (name: string, path: string) => void;
+  };
+  messageHandling: {
+    setMessages: (
+      messages: Array<{
+        role: 'user' | 'assistant' | 'thinking';
+        content: string;
+        timestamp: number;
+        fileContext?: {
+          fileName: string;
+          filePath: string;
+          startLine?: number;
+          endLine?: number;
+        };
+      }>,
+    ) => void;
+    addMessage: (message: {
+      role: 'user' | 'assistant' | 'thinking';
+      content: string;
+      timestamp: number;
+    }) => void;
+    clearMessages: () => void;
+    startStreaming: (timestamp?: number) => void;
+    appendStreamChunk: (chunk: string) => void;
+    endStreaming: () => void;
+    breakAssistantSegment: () => void;
+    appendThinkingChunk: (chunk: string) => void;
+    clearThinking: () => void;
+    setWaitingForResponse: (message: string) => void;
+    clearWaitingForResponse: () => void;
+  };
+  handleToolCallUpdate: (update: ToolCallUpdate) => void;
+  clearToolCalls: () => void;
+  setPlanEntries: (entries: PlanEntry[]) => void;
+  handlePermissionRequest: (
+    request: {
+      options: PermissionOption[];
+      toolCall: PermissionToolCall;
+    } | null,
+  ) => void;
+  inputFieldRef: React.RefObject<HTMLDivElement>;
+  setInputText: (text: string) => void;
+  setEditMode?: (mode: ApprovalModeValue) => void;
+  setIsAuthenticated?: (authenticated: boolean | null) => void;
+  setUsageStats?: (stats: UsageStatsPayload | undefined) => void;
+  setModelInfo?: (info: ModelInfo | null) => void;
+}
+
+const createProps = (overrides: Partial<WebViewMessageProps> = {}) => {
+  const props: WebViewMessageProps = {
+    sessionManagement: {
+      currentSessionId: null,
+      setQwenSessions: vi.fn(),
+      setCurrentSessionId: vi.fn(),
+      setCurrentSessionTitle: vi.fn(),
+      setShowSessionSelector: vi.fn(),
+      setNextCursor: vi.fn(),
+      setHasMore: vi.fn(),
+      setIsLoading: vi.fn(),
+      handleSaveSessionResponse: vi.fn(),
+    },
+    fileContext: {
+      setActiveFileName: vi.fn(),
+      setActiveFilePath: vi.fn(),
+      setActiveSelection: vi.fn(),
+      setWorkspaceFiles: vi.fn(),
+      addFileReference: vi.fn(),
+    },
+    messageHandling: {
+      setMessages: vi.fn(),
+      addMessage: vi.fn(),
+      clearMessages: vi.fn(),
+      startStreaming: vi.fn(),
+      appendStreamChunk: vi.fn(),
+      endStreaming: vi.fn(),
+      breakAssistantSegment: vi.fn(),
+      appendThinkingChunk: vi.fn(),
+      clearThinking: vi.fn(),
+      setWaitingForResponse: vi.fn(),
+      clearWaitingForResponse: vi.fn(),
+    },
+    handleToolCallUpdate: vi.fn(),
+    clearToolCalls: vi.fn(),
+    setPlanEntries: vi.fn(),
+    handlePermissionRequest: vi.fn(),
+    inputFieldRef: React.createRef<HTMLDivElement>(),
+    setInputText: vi.fn(),
+    setEditMode: vi.fn(),
+    setIsAuthenticated: vi.fn(),
+    setUsageStats: vi.fn(),
+    setModelInfo: vi.fn(),
+  };
+
+  return {
+    ...props,
+    ...overrides,
+    sessionManagement: {
+      ...props.sessionManagement,
+      ...overrides.sessionManagement,
+    },
+    fileContext: {
+      ...props.fileContext,
+      ...overrides.fileContext,
+    },
+    messageHandling: {
+      ...props.messageHandling,
+      ...overrides.messageHandling,
+    },
+  };
+};
+
+const renderHook = async (props: WebViewMessageProps) => {
+  const { useWebViewMessages } = await import('./useWebViewMessages.js');
+
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  const Harness = () => {
+    useWebViewMessages(props);
+    return <div ref={props.inputFieldRef} />;
+  };
+
+  await act(async () => {
+    root.render(<Harness />);
+  });
+  await act(async () => {});
+
+  return {
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+      container.remove();
+    },
+  };
+};
+
+const setup = async (overrides: Partial<WebViewMessageProps> = {}) => {
+  vi.resetModules();
+  const postMessage = vi.fn();
+
+  globalThis.acquireVsCodeApi = () => ({
+    postMessage,
+    getState: vi.fn(),
+    setState: vi.fn(),
+  });
+
+  const props = createProps(overrides);
+  const { unmount } = await renderHook(props);
+
+  return { postMessage, props, unmount };
+};
+
+describe('useWebViewMessages', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    globalThis.acquireVsCodeApi = undefined;
+  });
+
+  it('opens a diff when permission request includes diff content', async () => {
+    const { postMessage, props, unmount } = await setup();
+
+    const diffContent = {
+      type: 'diff',
+      path: 'src/example.ts',
+      oldText: 'old',
+      newText: 'new',
+    };
+
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: {
+            type: 'permissionRequest',
+            data: {
+              options: [
+                { name: 'Allow once', kind: 'allow_once', optionId: 'allow' },
+              ],
+              toolCall: {
+                toolCallId: 'tc-1',
+                title: 'Edit file',
+                kind: 'execute',
+                status: 'pending',
+                content: [diffContent],
+              },
+            },
+          },
+        }),
+      );
+    });
+
+    // The actual postMessage sends data without the 'type' field
+    expect(postMessage).toHaveBeenCalledWith({
+      type: 'openDiff',
+      data: {
+        path: 'src/example.ts',
+        oldText: 'old',
+        newText: 'new',
+      },
+    });
+
+    expect(props.handleToolCallUpdate).toHaveBeenCalled();
+    const update = vi.mocked(props.handleToolCallUpdate).mock.calls[0][0];
+    expect(update.type).toBe('tool_call');
+    expect(update.toolCallId).toBe('tc-1');
+    expect(update.kind).toBe('edit');
+
+    unmount();
+  });
+
+  it('closes permission drawer when extension resolves permission', async () => {
+    const { props, unmount } = await setup();
+
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: {
+            type: 'permissionResolved',
+            data: { optionId: 'allow' },
+          },
+        }),
+      );
+    });
+
+    expect(props.handlePermissionRequest).toHaveBeenCalledWith(null);
+
+    unmount();
+  });
+
+  it('merges plan updates into a single tool call', async () => {
+    const { props, unmount } = await setup();
+
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2024-01-01T00:00:00Z'));
+
+    const initialPlan: PlanEntry[] = [
+      { content: 'Step 1', status: 'completed' },
+    ];
+
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: { type: 'plan', data: { entries: initialPlan } },
+        }),
+      );
+    });
+
+    const firstCall = vi.mocked(props.handleToolCallUpdate).mock.calls[0][0];
+
+    vi.setSystemTime(new Date('2024-01-01T00:00:01Z'));
+
+    const updatedPlan: PlanEntry[] = [
+      { content: 'Step 1', status: 'completed' },
+      { content: 'Step 2', status: 'in_progress' },
+    ];
+
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: { type: 'plan', data: { entries: updatedPlan } },
+        }),
+      );
+    });
+
+    const secondCall = vi.mocked(props.handleToolCallUpdate).mock.calls[1][0];
+
+    expect(firstCall.type).toBe('tool_call');
+    expect(secondCall.type).toBe('tool_call_update');
+    expect(secondCall.toolCallId).toBe(firstCall.toolCallId);
+
+    vi.useRealTimers();
+    unmount();
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/test-utils/mocks.ts
+++ b/packages/vscode-ide-companion/src/webview/test-utils/mocks.ts
@@ -0,0 +1,168 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Test Mock Data Factory
+ *
+ * Provides factory functions for creating test data, ensuring consistency and maintainability.
+ */
+
+import { vi } from 'vitest';
+
+/**
+ * Create Mock Tool Call data
+ *
+ * Tool Call is the data structure when AI executes tool operations,
+ * containing tool type, status, input/output, etc.
+ *
+ * @param overrides Properties to override default values
+ */
+export const createMockToolCall = (
+  overrides: Record<string, unknown> = {},
+) => ({
+  toolCallId: 'test-tool-call-id',
+  kind: 'execute' as const,
+  title: 'Test Tool Call',
+  status: 'pending' as const,
+  timestamp: Date.now(),
+  rawInput: {},
+  ...overrides,
+});
+
+/**
+ * Create Mock Message data
+ *
+ * Messages are the basic units in the chat interface,
+ * including user messages, AI responses, thinking process, etc.
+ *
+ * @param overrides Properties to override default values
+ */
+export const createMockMessage = (overrides: Record<string, unknown> = {}) => ({
+  role: 'user' as const,
+  content: 'Test message',
+  timestamp: Date.now(),
+  ...overrides,
+});
+
+/**
+ * Create Mock Session data
+ *
+ * Session contains a group of related messages, supporting history and session switching.
+ *
+ * @param overrides Properties to override default values
+ */
+export const createMockSession = (overrides: Record<string, unknown> = {}) => ({
+  id: 'test-session-id',
+  title: 'Test Session',
+  createdAt: Date.now(),
+  updatedAt: Date.now(),
+  messageCount: 0,
+  ...overrides,
+});
+
+/**
+ * Create Mock Permission Request data
+ *
+ * Permission requests are triggered when AI needs to perform sensitive operations,
+ * requiring user to choose allow or reject.
+ *
+ * @param overrides Properties to override default values
+ */
+export const createMockPermissionRequest = (
+  overrides: Record<string, unknown> = {},
+) => ({
+  toolCall: {
+    toolCallId: 'test-tool-call-id',
+    title: 'Read file',
+    kind: 'read',
+  },
+  options: [
+    { optionId: 'allow_once', label: 'Allow once', kind: 'allow' },
+    { optionId: 'allow_always', label: 'Allow always', kind: 'allow' },
+    { optionId: 'cancel', label: 'Cancel', kind: 'reject' },
+  ],
+  ...overrides,
+});
+
+/**
+ * Create Mock WebView Panel
+ *
+ * WebView Panel is the container for displaying custom UI in VSCode.
+ *
+ * @param overrides Properties to override default values
+ */
+export const createMockWebviewPanel = (
+  overrides: Record<string, unknown> = {},
+) => ({
+  webview: {
+    html: '',
+    options: {},
+    asWebviewUri: vi.fn((uri) => ({
+      toString: () => `vscode-webview://resource${uri.fsPath}`,
+    })),
+    cspSource: 'vscode-webview:',
+    onDidReceiveMessage: vi.fn(() => ({ dispose: vi.fn() })),
+    postMessage: vi.fn(),
+  },
+  viewType: 'qwenCode.chat',
+  title: 'Qwen Code',
+  iconPath: null,
+  visible: true,
+  active: true,
+  viewColumn: 1,
+  onDidDispose: vi.fn(() => ({ dispose: vi.fn() })),
+  onDidChangeViewState: vi.fn(() => ({ dispose: vi.fn() })),
+  reveal: vi.fn(),
+  dispose: vi.fn(),
+  ...overrides,
+});
+
+/**
+ * Create Mock Extension Context
+ *
+ * Extension Context provides runtime context information for the extension.
+ *
+ * @param overrides Properties to override default values
+ */
+export const createMockExtensionContext = (
+  overrides: Record<string, unknown> = {},
+) => ({
+  subscriptions: [],
+  extensionUri: { fsPath: '/path/to/extension' },
+  extensionPath: '/path/to/extension',
+  globalState: {
+    get: vi.fn(),
+    update: vi.fn(),
+    keys: vi.fn(() => []),
+  },
+  workspaceState: {
+    get: vi.fn(),
+    update: vi.fn(),
+    keys: vi.fn(() => []),
+  },
+  environmentVariableCollection: {
+    replace: vi.fn(),
+    clear: vi.fn(),
+  },
+  extension: {
+    packageJSON: { version: '1.0.0' },
+  },
+  ...overrides,
+});
+
+/**
+ * Create Mock Diff Info
+ *
+ * Diff Info contains code comparison information.
+ *
+ * @param overrides Properties to override default values
+ */
+export const createMockDiffInfo = (
+  overrides: Record<string, unknown> = {},
+) => ({
+  filePath: '/test/file.ts',
+  oldContent: 'const x = 1;',
+  newContent: 'const x = 2;',
+  ...overrides,
+});
--- a/packages/vscode-ide-companion/src/webview/test-utils/render.tsx
+++ b/packages/vscode-ide-companion/src/webview/test-utils/render.tsx
@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * WebView Component Test Rendering Utilities
+ *
+ * Provides rendering functions with necessary Providers and mocks,
+ * simplifying WebView React component testing.
+ */
+
+import type React from 'react';
+import { render, type RenderOptions } from '@testing-library/react';
+import { vi } from 'vitest';
+
+/**
+ * Mock VSCode WebView API
+ *
+ * Components in WebView obtain this API via acquireVsCodeApi(),
+ * used for bidirectional communication with VSCode extension.
+ */
+export const mockVSCodeAPI = {
+  /** Send message to extension */
+  postMessage: vi.fn(),
+  /** Get WebView persistent state */
+  getState: vi.fn(() => ({})),
+  /** Set WebView persistent state */
+  setState: vi.fn(),
+};
+
+/**
+ * Test Provider wrapper
+ *
+ * Add specific Context Providers here if components need them.
+ */
+const AllTheProviders: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => <>{children}</>;
+
+/**
+ * Render function with Providers
+ *
+ * Usage:
+ * ```tsx
+ * import { renderWithProviders, screen } from './test-utils/render';
+ *
+ * it('should render component', () => {
+ *   renderWithProviders(<MyComponent />);
+ *   expect(screen.getByText('Hello')).toBeInTheDocument();
+ * });
+ * ```
+ */
+export const renderWithProviders = (
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+) => render(ui, { wrapper: AllTheProviders, ...options });
+
+/**
+ * Simulate receiving message from extension
+ *
+ * WebView receives messages via window.addEventListener('message', ...).
+ * Use this function to simulate messages sent by the extension.
+ *
+ * @param type Message type
+ * @param data Message data
+ *
+ * Usage example:
+ * ```ts
+ * simulateExtensionMessage('authState', { authenticated: true });
+ * ```
+ */
+export const simulateExtensionMessage = (type: string, data: unknown) => {
+  window.dispatchEvent(
+    new MessageEvent('message', {
+      data: { type, data },
+    }),
+  );
+};
+
+/**
+ * Wait for async state updates
+ *
+ * Used to wait for React state updates to complete before assertions.
+ */
+export const waitForStateUpdate = () =>
+  new Promise((resolve) => setTimeout(resolve, 0));
+
+// Export all utilities from @testing-library/react and other helpers
+export * from '@testing-library/react';
--- a/packages/vscode-ide-companion/test/fixtures/workspace/sample.txt
+++ b/packages/vscode-ide-companion/test/fixtures/workspace/sample.txt
@@ -0,0 +1 @@
+Sample file for VS Code integration tests.
--- a/packages/vscode-ide-companion/test/runTest.cjs
+++ b/packages/vscode-ide-companion/test/runTest.cjs
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const path = require('node:path');
+const { runTests } = require('@vscode/test-electron');
+
+async function main() {
+  const extensionDevelopmentPath = path.resolve(__dirname, '..');
+  const extensionTestsPath = path.resolve(__dirname, 'suite/index.cjs');
+  const workspacePath = path.resolve(__dirname, 'fixtures/workspace');
+
+  await runTests({
+    extensionDevelopmentPath,
+    extensionTestsPath,
+    launchArgs: [workspacePath, '--disable-workspace-trust'],
+  });
+}
+
+main().catch((error) => {
+  console.error('Failed to run VS Code integration tests:', error);
+  process.exit(1);
+});
--- a/packages/vscode-ide-companion/test/suite/extension.test.cjs
+++ b/packages/vscode-ide-companion/test/suite/extension.test.cjs
@@ -0,0 +1,141 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const assert = require('node:assert');
+const path = require('node:path');
+const vscode = require('vscode');
+
+const CHAT_VIEW_TYPES = new Set([
+  'mainThreadWebview-qwenCode.chat',
+  'qwenCode.chat',
+]);
+
+function isWebviewInput(input) {
+  return !!input && typeof input === 'object' && 'viewType' in input;
+}
+
+function isDiffInput(input) {
+  return !!input && typeof input === 'object' && 'modified' in input;
+}
+
+function getAllTabs() {
+  return vscode.window.tabGroups.all.flatMap((group) => group.tabs);
+}
+
+function getChatTabs() {
+  return getAllTabs().filter((tab) => {
+    const input = tab.input;
+    return isWebviewInput(input) && CHAT_VIEW_TYPES.has(input.viewType);
+  });
+}
+
+function getQwenDiffTabs() {
+  return getAllTabs().filter((tab) => {
+    const input = tab.input;
+    if (!isDiffInput(input)) {
+      return false;
+    }
+    const original = input.original;
+    const modified = input.modified;
+    return (
+      (original && original.scheme === 'qwen-diff') ||
+      (modified && modified.scheme === 'qwen-diff')
+    );
+  });
+}
+
+async function waitFor(condition, timeoutMs = 5000, intervalMs = 100) {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    if (condition()) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, intervalMs));
+  }
+  throw new Error('Timed out waiting for condition.');
+}
+
+async function runTest(name, fn) {
+  try {
+    await fn();
+    console.log(`[integration] ${name}: OK`);
+  } catch (error) {
+    console.error(`[integration] ${name}: FAILED`);
+    throw error;
+  }
+}
+
+async function activateExtension() {
+  const extension = vscode.extensions.getExtension(
+    'qwenlm.qwen-code-vscode-ide-companion',
+  );
+  assert.ok(extension, 'Extension not found.');
+  await extension.activate();
+}
+
+async function ensureChatOpen() {
+  await vscode.commands.executeCommand('qwen-code.openChat');
+  await waitFor(() => getChatTabs().length > 0);
+}
+
+async function testOpenChatReusesPanel() {
+  await ensureChatOpen();
+  const before = getChatTabs().length;
+
+  await vscode.commands.executeCommand('qwen-code.openChat');
+  await new Promise((resolve) => setTimeout(resolve, 300));
+
+  const after = getChatTabs().length;
+  assert.strictEqual(
+    after,
+    before,
+    'openChat should reuse the existing webview panel.',
+  );
+}
+
+async function testOpenNewChatTabCreatesPanel() {
+  await ensureChatOpen();
+  const before = getChatTabs().length;
+
+  await vscode.commands.executeCommand('qwenCode.openNewChatTab');
+  await waitFor(() => getChatTabs().length === before + 1);
+}
+
+async function testShowDiffOpensDiffTab() {
+  await ensureChatOpen();
+  const workspace = vscode.workspace.workspaceFolders?.[0];
+  assert.ok(workspace, 'Workspace folder not found.');
+
+  const samplePath = path.join(workspace.uri.fsPath, 'sample.txt');
+
+  await vscode.commands.executeCommand('qwenCode.showDiff', {
+    path: samplePath,
+    oldText: 'before',
+    newText: 'after',
+  });
+
+  await waitFor(() => getQwenDiffTabs().length > 0);
+}
+
+async function cleanupEditors() {
+  try {
+    await vscode.commands.executeCommand('workbench.action.closeAllEditors');
+  } catch {
+    // Best effort cleanup; ignore failures.
+  }
+}
+
+async function runExtensionTests() {
+  await activateExtension();
+
+  await runTest('openChat reuses an existing webview', testOpenChatReusesPanel);
+  await runTest('openNewChatTab opens a new webview', testOpenNewChatTabCreatesPanel);
+  await runTest('showDiff opens a qwen-diff editor', testShowDiffOpensDiffTab);
+
+  await cleanupEditors();
+}
+
+module.exports = { runExtensionTests };
--- a/packages/vscode-ide-companion/test/suite/index.cjs
+++ b/packages/vscode-ide-companion/test/suite/index.cjs
@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const { runExtensionTests } = require('./extension.test.cjs');
+
+async function run() {
+  await runExtensionTests();
+}
+
+module.exports = { run };
--- a/packages/vscode-ide-companion/tsconfig.json
+++ b/packages/vscode-ide-companion/tsconfig.json
@@ -7,10 +7,12 @@
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "sourceMap": true,
-    "strict": true /* enable all strict type-checking options */
+    "strict": true /* enable all strict type-checking options */,
+    "skipLibCheck": true
    /* Additional Checks */
    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
    // "noUnusedParameters": true,  /* Report errors on unused parameters. */
-  }
+  },
+  "include": ["src/**/*", "src/types/**/*"]
 }
--- a/packages/vscode-ide-companion/vitest.config.ts
+++ b/packages/vscode-ide-companion/vitest.config.ts
@@ -1,15 +1,92 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
 import { defineConfig } from 'vitest/config';

+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+const testingLibraryRoot = path.dirname(
+  require.resolve('@testing-library/react/package.json'),
+);
+const resolvePeer = (pkg: string) => {
+  const resolveFrom = (base: string) => {
+    try {
+      return require.resolve(`${pkg}/package.json`, { paths: [base] });
+    } catch {
+      try {
+        return require.resolve(pkg, { paths: [base] });
+      } catch {
+        return null;
+      }
+    }
+  };
+
+  const resolved = resolveFrom(testingLibraryRoot) ?? resolveFrom(__dirname);
+  if (!resolved) {
+    return path.resolve(__dirname, 'node_modules', pkg);
+  }
+  return path.dirname(resolved);
+};
+const reactRoot = resolvePeer('react');
+const reactDomRoot = resolvePeer('react-dom');
+const reactIsRoot = resolvePeer('react-is');
+const schedulerRoot = resolvePeer('scheduler');
+
 export default defineConfig({
  test: {
    globals: true,
-    environment: 'node',
+    environment: 'jsdom',
    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
+    setupFiles: ['./src/test-setup.ts'],
+    environmentOptions: {
+      jsdom: {
+        url: 'http://localhost',
+        pretendToBeVisual: true,
+        resources: 'usable',
+      },
+    },
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html', 'clover'],
-      include: ['src/**/*.ts'],
-      exclude: ['src/**/*.test.ts', 'src/**/*.d.ts'],
+      include: ['src/**/*.ts', 'src/**/*.tsx'],
+      exclude: [
+        'src/**/*.test.ts',
+        'src/**/*.test.tsx',
+        'src/**/*.d.ts',
+        'src/test-setup.ts',
+        'src/**/test-utils/**',
+      ],
+    },
+    testTimeout: 10000,
+    deps: {
+      interopDefault: true,
    },
  },
+  resolve: {
+    alias: {
+      // 保持原有的别名
+      vscode: path.resolve(__dirname, 'src/__mocks__/vscode.ts'),
+      // 强制统一 React 模块解析（与 testing-library 解析来源保持一致）
+      react: reactRoot,
+      'react-dom': reactDomRoot,
+      'react/jsx-runtime': path.resolve(reactRoot, 'jsx-runtime'),
+      'react/jsx-dev-runtime': path.resolve(reactRoot, 'jsx-dev-runtime'),
+      'react-dom/client': path.resolve(reactDomRoot, 'client'),
+      'react-is': reactIsRoot,
+      scheduler: schedulerRoot,
+    },
+    // 确保这些包都被 dedupe
+    dedupe: [
+      'react',
+      'react-dom',
+      'react-is',
+      'scheduler',
+      '@testing-library/react',
+    ],
+  },
+  define: {
+    // 确保 React 环境变量设置正确
+    'process.env.NODE_ENV': JSON.stringify('test'),
+  },
 });
Author	SHA1	Message	Date
yiliang114	6b12195193	chore(root): remove project-level React dependency configurations	2026-01-19 14:46:20 +08:00
yiliang114	c04a5d43d7	test(e2e): Fix authentication status and permission drawer issues in end-to-end testing	2026-01-19 13:04:10 +08:00
yiliang114	dff5588adc	feat(vscode-ide-companion): add a CLI Packaging Step to a Test Workflow	2026-01-19 12:45:19 +08:00
yiliang114	c842c93fc3	chore(deps): fix eslint	2026-01-19 11:44:41 +08:00
yiliang114	bf5b71a3f0	chore(deps): Update project dependency configuration and streamline package management	2026-01-19 10:54:59 +08:00
yiliang114	a61fa0d94c	test(vscode-ide-companion-utils): Fix tabGroups simulation in testing	2026-01-19 00:23:23 +08:00
yiliang114	a41430a167	test(vscode-ide-companion-utils): Fix tabGroups simulation in testing - 将直接修改数组长度的方式改为使用 Object.defineProperty 定义属性 - 确保 tabGroups.all 属性可写且值为正确空数组 - 提高测试代码的稳定性和可维护性	2026-01-18 23:31:32 +08:00
yiliang114	13c3eed410	chore(vscode-ide-companion): test ci	2026-01-18 23:28:06 +08:00
yiliang114	a4c3933395	feat(vscode-ide-companion): 添加 VSCode 扩展测试工作流	2026-01-18 13:26:11 +08:00
yiliang114	23b2ffef73	feat(vscode-ide-companion): 添加 VSCode 扩展测试工作流	2026-01-18 01:37:05 +08:00
tanzhenxin	0681c71894	Merge pull request #1490 from QwenLM/fix/mcp-server-remove fix: unable to remove MCP server when only one element exists	2026-01-16 17:22:42 +08:00
tanzhenxin	155c4b9728	Merge pull request #1508 from PJ-568/main fix: mistranslation of token	2026-01-16 15:50:00 +08:00
tanzhenxin	57ca2823b3	Merge pull request #1497 from Antovex/feat/settings-for-experimental-skills feat(cli): add settings support for experimental skills	2026-01-16 15:49:34 +08:00
tanzhenxin	620341eeae	remove -x alias and fix whitespace issue Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-01-16 15:28:33 +08:00
PJ568	c6c33233c5	fix: mistranslation of token	2026-01-15 18:16:31 +08:00
Antarin Ghosal	106b69e5c0	docs: update experimental skills configuration in skills.md	2026-01-15 15:02:14 +05:30
Antarin Ghosal	6afe0f8c29	docs: update setting name in configuration docs	2026-01-15 14:59:52 +05:30
Antarin Ghosal	0b3be1a82c	fix: update settings path to tools.experimental.skills	2026-01-15 14:58:31 +05:30
Antarin Ghosal	8af43e3ac3	refactor: nest skills under tools.experimental	2026-01-15 14:57:02 +05:30
tanzhenxin	886f914fb3	Merge pull request #1496 from QwenLM/fix/vscode-run fix(vscode-ide-companion): simplify ELECTRON_RUN_AS_NODE detection and improve README	2026-01-15 09:00:11 +08:00
tanzhenxin	90365af2f8	Merge pull request #1499 from QwenLM/fix/1498 fix: include --acp flag in tool exclusion check	2026-01-15 08:56:58 +08:00
yiliang114	cbef5ffd89	fix: include --acp flag in tool exclusion check Fixed #1498 The tool exclusion logic only checked --experimental-acp but not --acp, causing edit, write_file, and run_shell_command to be incorrectly excluded when VS Code extension uses --acp flag in ACP mode.	2026-01-14 22:49:04 +08:00
Antarin Ghosal	63406b4ba4	Update command options for skills feature Fixed a typo	2026-01-14 19:13:35 +05:30
Antarin Ghosal	52db3a766d	feat(cli): add settings support for experimental skills - Add tools.experimentalSkills setting in settingsSchema - Read default from settings in config. ts - Add --skills as shorter alias for --experimental-skills - Update documentation for new setting Fixes #1493	2026-01-14 18:49:17 +05:30
yiliang114	5e80e80387	fix(vscode-ide-companion): simplify ELECTRON_RUN_AS_NODE detection and improve README - Bump version to 0.7.1 - Simplify macOS/Linux terminal launch by always using ELECTRON_RUN_AS_NODE=1 (all VSCode-like IDEs are Electron-based) - Update README with marketplace badges, cleaner docs structure - Fix broken markdown table row Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-14 21:10:19 +08:00
Mingholy	985f65f8fa	Merge pull request #1494 from QwenLM/chore/v0.7.1 chore: bump version to 0.7.1	2026-01-14 18:29:59 +08:00
Mingholy	9b9c5fadd5	Merge pull request #1492 from QwenLM/mingholy/fix/loggingContentGenerator-timing-issue Fix timing issue in LoggingContentGenerator initialization	2026-01-14 18:09:26 +08:00
Mingholy	372c67cad4	Merge pull request #1489 from QwenLM/fix/slow-quit Reduce slow quit by trimming skills watchers	2026-01-14 18:07:37 +08:00
mingholy.lmh	af3864b5de	chore: bump version to 0.7.1 Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-01-14 18:02:43 +08:00
mingholy.lmh	1e3791f30a	fix: ci issue	2026-01-14 17:51:00 +08:00
mingholy.lmh	9bf626d051	refactor: streamline initialization of LoggingContentGenerator and update auth type retrieval	2026-01-14 16:44:51 +08:00
LaZzyMan	6f33d92b2c	fix: can not remove the mcp server when there is only one element	2026-01-14 16:27:45 +08:00
mingholy.lmh	a35af6550f	fix: timing issue of initialize loggingContentGenerator	2026-01-14 16:17:35 +08:00
tanzhenxin	d6607e134e	update	2026-01-14 15:40:53 +08:00
tanzhenxin	9024a41723	Conditional skill manager initialization with improved file watching Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-01-14 15:22:49 +08:00
yiliang114	bde056b62e	Merge branch 'main' of https://github.com/QwenLM/qwen-code into fix/vscode-run	2026-01-14 13:11:58 +08:00
pomelo	ff5ea3c6d7	Merge pull request #1485 from QwenLM/fix-docs fix: docs	2026-01-14 10:31:55 +08:00
pomelo-nwu	0faaac8fa4	fix: docs	2026-01-14 10:30:03 +08:00
pomelo	c2e62b9122	Merge pull request #1484 from QwenLM/fix-docs fix: docs errors and add community contacts	2026-01-14 09:20:43 +08:00
pomelo-nwu	f54b62cda3	fix: docs error	2026-01-13 22:02:55 +08:00
pomelo-nwu	9521987a09	feat: update docs	2026-01-13 21:51:34 +08:00
qwen-code-ci-bot	d20f2a41a2	Merge pull request #1483 from QwenLM/release/sdk-typescript/v0.1.3 chore(release): sdk-typescript v0.1.3	2026-01-13 21:13:07 +08:00
github-actions[bot]	e3eccb5987	chore(release): sdk-typescript v0.1.3	2026-01-13 12:59:45 +00:00
Mingholy	22916457cd	Merge pull request #1482 from QwenLM/mingholy/test/skip-flaky-e2e-test Skip flaky permission control test	2026-01-13 20:16:35 +08:00
Mingholy	28bc4e6467	Merge pull request #1480 from QwenLM/mingholy/fix/qwen-oauth-fallback Fix: Improve qwen-oauth fallback message display	2026-01-13 20:15:25 +08:00
mingholy.lmh	e70ecdf3a8	fix: improve qwen-oauth fallback message display	2026-01-13 19:40:41 +08:00
yiliang114	97497457a8	Merge branch 'main' of https://github.com/QwenLM/qwen-code into fix/vscode-run	2026-01-13 14:21:26 +08:00