feat(chrome-extension): enhance native host communication and network logging

- Add troubleshooting documentation for native host setup issues
- Improve native host logging to home directory with fallback to tmp
- Enhance network logging in service worker with response body capture
- Update scripts to properly reference host.js from correct path
- Increase timeout for MCP session creation and long prompts from 3 to 5 minutes
- Add getConsoleLogs functionality to sidepanel for content script capture
- Improve browser-mcp-server network logs aggregation by request ID
- Update icon assets and improve manifest configuration

refactor(chrome-extension): consolidate host.js entry point and improve path resolution

- Create unified host.js entry point that delegates to src/host.js
- Improve path resolution for host scripts in installer and runner scripts
- Add proper path existence checks for browser-mcp-server.js
- Support running from different directory structures

style(chrome-extension): improve TypeScript type safety and error handling

- Add proper type definitions for message handling in side panel
- Add null checks and error handling for message parsing
- Improve React component callback implementations

.gitignore

@@ -23,6 +23,7 @@ package-lock.json
 .idea
 *.iml
 .cursor
+.qoder
 
 # OS metadata
 .DS_Store

docs/developers/_meta.ts

@@ -11,6 +11,7 @@ export default {
     type: 'separator',
   },
   'sdk-typescript': 'Typescript SDK',
+  'sdk-java': 'Java SDK(alpha)',
   'Dive Into Qwen Code': {
     title: 'Dive Into Qwen Code',
     type: 'separator',

docs/developers/sdk-java.md

@@ -0,0 +1,312 @@
+# Qwen Code Java SDK
+
+The Qwen Code Java SDK is a minimum experimental SDK for programmatic access to Qwen Code functionality. It provides a Java interface to interact with the Qwen Code CLI, allowing developers to integrate Qwen Code capabilities into their Java applications.
+
+## Requirements
+
+- Java >= 1.8
+- Maven >= 3.6.0 (for building from source)
+- qwen-code >= 0.5.0
+
+### Dependencies
+
+- **Logging**: ch.qos.logback:logback-classic
+- **Utilities**: org.apache.commons:commons-lang3
+- **JSON Processing**: com.alibaba.fastjson2:fastjson2
+- **Testing**: JUnit 5 (org.junit.jupiter:junit-jupiter)
+
+## Installation
+
+Add the following dependency to your Maven `pom.xml`:
+
+```xml
+<dependency>
+    <groupId>com.alibaba</groupId>
+    <artifactId>qwencode-sdk</artifactId>
+    <version>{$version}</version>
+</dependency>
+```
+
+Or if using Gradle, add to your `build.gradle`:
+
+```gradle
+implementation 'com.alibaba:qwencode-sdk:{$version}'
+```
+
+## Building and Running
+
+### Build Commands
+
+```bash
+# Compile the project
+mvn compile
+
+# Run tests
+mvn test
+
+# Package the JAR
+mvn package
+
+# Install to local repository
+mvn install
+```
+
+## Quick Start
+
+The simplest way to use the SDK is through the `QwenCodeCli.simpleQuery()` method:
+
+```java
+public static void runSimpleExample() {
+    List<String> result = QwenCodeCli.simpleQuery("hello world");
+    result.forEach(logger::info);
+}
+```
+
+For more advanced usage with custom transport options:
+
+```java
+public static void runTransportOptionsExample() {
+    TransportOptions options = new TransportOptions()
+            .setModel("qwen3-coder-flash")
+            .setPermissionMode(PermissionMode.AUTO_EDIT)
+            .setCwd("./")
+            .setEnv(new HashMap<String, String>() {{put("CUSTOM_VAR", "value");}})
+            .setIncludePartialMessages(true)
+            .setTurnTimeout(new Timeout(120L, TimeUnit.SECONDS))
+            .setMessageTimeout(new Timeout(90L, TimeUnit.SECONDS))
+            .setAllowedTools(Arrays.asList("read_file", "write_file", "list_directory"));
+
+    List<String> result = QwenCodeCli.simpleQuery("who are you, what are your capabilities?", options);
+    result.forEach(logger::info);
+}
+```
+
+For streaming content handling with custom content consumers:
+
+```java
+public static void runStreamingExample() {
+    QwenCodeCli.simpleQuery("who are you, what are your capabilities?",
+            new TransportOptions().setMessageTimeout(new Timeout(10L, TimeUnit.SECONDS)), new AssistantContentSimpleConsumers() {
+
+                @Override
+                public void onText(Session session, TextAssistantContent textAssistantContent) {
+                    logger.info("Text content received: {}", textAssistantContent.getText());
+                }
+
+                @Override
+                public void onThinking(Session session, ThingkingAssistantContent thingkingAssistantContent) {
+                    logger.info("Thinking content received: {}", thingkingAssistantContent.getThinking());
+                }
+
+                @Override
+                public void onToolUse(Session session, ToolUseAssistantContent toolUseContent) {
+                    logger.info("Tool use content received: {} with arguments: {}",
+                            toolUseContent, toolUseContent.getInput());
+                }
+
+                @Override
+                public void onToolResult(Session session, ToolResultAssistantContent toolResultContent) {
+                    logger.info("Tool result content received: {}", toolResultContent.getContent());
+                }
+
+                @Override
+                public void onOtherContent(Session session, AssistantContent<?> other) {
+                    logger.info("Other content received: {}", other);
+                }
+
+                @Override
+                public void onUsage(Session session, AssistantUsage assistantUsage) {
+                    logger.info("Usage information received: Input tokens: {}, Output tokens: {}",
+                            assistantUsage.getUsage().getInputTokens(), assistantUsage.getUsage().getOutputTokens());
+                }
+            }.setDefaultPermissionOperation(Operation.allow));
+    logger.info("Streaming example completed.");
+}
+```
+
+other examples see src/test/java/com/alibaba/qwen/code/cli/example
+
+## Architecture
+
+The SDK follows a layered architecture:
+
+- **API Layer**: Provides the main entry points through `QwenCodeCli` class with simple static methods for basic usage
+- **Session Layer**: Manages communication sessions with the Qwen Code CLI through the `Session` class
+- **Transport Layer**: Handles the communication mechanism between the SDK and CLI process (currently using process transport via `ProcessTransport`)
+- **Protocol Layer**: Defines data structures for communication based on the CLI protocol
+- **Utils**: Common utilities for concurrent execution, timeout handling, and error management
+
+## Key Features
+
+### Permission Modes
+
+The SDK supports different permission modes for controlling tool execution:
+
+- **`default`**: Write tools are denied unless approved via `canUseTool` callback or in `allowedTools`. Read-only tools execute without confirmation.
+- **`plan`**: Blocks all write tools, instructing AI to present a plan first.
+- **`auto-edit`**: Auto-approve edit tools (edit, write_file) while other tools require confirmation.
+- **`yolo`**: All tools execute automatically without confirmation.
+
+### Session Event Consumers and Assistant Content Consumers
+
+The SDK provides two key interfaces for handling events and content from the CLI:
+
+#### SessionEventConsumers Interface
+
+The `SessionEventConsumers` interface provides callbacks for different types of messages during a session:
+
+- `onSystemMessage`: Handles system messages from the CLI (receives Session and SDKSystemMessage)
+- `onResultMessage`: Handles result messages from the CLI (receives Session and SDKResultMessage)
+- `onAssistantMessage`: Handles assistant messages (AI responses) (receives Session and SDKAssistantMessage)
+- `onPartialAssistantMessage`: Handles partial assistant messages during streaming (receives Session and SDKPartialAssistantMessage)
+- `onUserMessage`: Handles user messages (receives Session and SDKUserMessage)
+- `onOtherMessage`: Handles other types of messages (receives Session and String message)
+- `onControlResponse`: Handles control responses (receives Session and CLIControlResponse)
+- `onControlRequest`: Handles control requests (receives Session and CLIControlRequest, returns CLIControlResponse)
+- `onPermissionRequest`: Handles permission requests (receives Session and CLIControlRequest<CLIControlPermissionRequest>, returns Behavior)
+
+#### AssistantContentConsumers Interface
+
+The `AssistantContentConsumers` interface handles different types of content within assistant messages:
+
+- `onText`: Handles text content (receives Session and TextAssistantContent)
+- `onThinking`: Handles thinking content (receives Session and ThingkingAssistantContent)
+- `onToolUse`: Handles tool use content (receives Session and ToolUseAssistantContent)
+- `onToolResult`: Handles tool result content (receives Session and ToolResultAssistantContent)
+- `onOtherContent`: Handles other content types (receives Session and AssistantContent)
+- `onUsage`: Handles usage information (receives Session and AssistantUsage)
+- `onPermissionRequest`: Handles permission requests (receives Session and CLIControlPermissionRequest, returns Behavior)
+- `onOtherControlRequest`: Handles other control requests (receives Session and ControlRequestPayload, returns ControlResponsePayload)
+
+#### Relationship Between the Interfaces
+
+**Important Note on Event Hierarchy:**
+
+- `SessionEventConsumers` is the **high-level** event processor that handles different message types (system, assistant, user, etc.)
+- `AssistantContentConsumers` is the **low-level** content processor that handles different types of content within assistant messages (text, tools, thinking, etc.)
+
+**Processor Relationship:**
+
+- `SessionEventConsumers` → `AssistantContentConsumers` (SessionEventConsumers uses AssistantContentConsumers to process content within assistant messages)
+
+**Event Derivation Relationships:**
+
+- `onAssistantMessage` → `onText`, `onThinking`, `onToolUse`, `onToolResult`, `onOtherContent`, `onUsage`
+- `onPartialAssistantMessage` → `onText`, `onThinking`, `onToolUse`, `onToolResult`, `onOtherContent`
+- `onControlRequest` → `onPermissionRequest`, `onOtherControlRequest`
+
+**Event Timeout Relationships:**
+
+Each event handler method has a corresponding timeout method that allows customizing the timeout behavior for that specific event:
+
+- `onSystemMessage` ↔ `onSystemMessageTimeout`
+- `onResultMessage` ↔ `onResultMessageTimeout`
+- `onAssistantMessage` ↔ `onAssistantMessageTimeout`
+- `onPartialAssistantMessage` ↔ `onPartialAssistantMessageTimeout`
+- `onUserMessage` ↔ `onUserMessageTimeout`
+- `onOtherMessage` ↔ `onOtherMessageTimeout`
+- `onControlResponse` ↔ `onControlResponseTimeout`
+- `onControlRequest` ↔ `onControlRequestTimeout`
+
+For AssistantContentConsumers timeout methods:
+
+- `onText` ↔ `onTextTimeout`
+- `onThinking` ↔ `onThinkingTimeout`
+- `onToolUse` ↔ `onToolUseTimeout`
+- `onToolResult` ↔ `onToolResultTimeout`
+- `onOtherContent` ↔ `onOtherContentTimeout`
+- `onPermissionRequest` ↔ `onPermissionRequestTimeout`
+- `onOtherControlRequest` ↔ `onOtherControlRequestTimeout`
+
+**Default Timeout Values:**
+
+- `SessionEventSimpleConsumers` default timeout: 180 seconds (Timeout.TIMEOUT_180_SECONDS)
+- `AssistantContentSimpleConsumers` default timeout: 60 seconds (Timeout.TIMEOUT_60_SECONDS)
+
+**Timeout Hierarchy Requirements:**
+
+For proper operation, the following timeout relationships should be maintained:
+
+- `onAssistantMessageTimeout` return value should be greater than `onTextTimeout`, `onThinkingTimeout`, `onToolUseTimeout`, `onToolResultTimeout`, and `onOtherContentTimeout` return values
+- `onControlRequestTimeout` return value should be greater than `onPermissionRequestTimeout` and `onOtherControlRequestTimeout` return values
+
+### Transport Options
+
+The `TransportOptions` class allows configuration of how the SDK communicates with the Qwen Code CLI:
+
+- `pathToQwenExecutable`: Path to the Qwen Code CLI executable
+- `cwd`: Working directory for the CLI process
+- `model`: AI model to use for the session
+- `permissionMode`: Permission mode that controls tool execution
+- `env`: Environment variables to pass to the CLI process
+- `maxSessionTurns`: Limits the number of conversation turns in a session
+- `coreTools`: List of core tools that should be available to the AI
+- `excludeTools`: List of tools to exclude from being available to the AI
+- `allowedTools`: List of tools that are pre-approved for use without additional confirmation
+- `authType`: Authentication type to use for the session
+- `includePartialMessages`: Enables receiving partial messages during streaming responses
+- `skillsEnable`: Enables or disables skills functionality for the session
+- `turnTimeout`: Timeout for a complete turn of conversation
+- `messageTimeout`: Timeout for individual messages within a turn
+- `resumeSessionId`: ID of a previous session to resume
+- `otherOptions`: Additional command-line options to pass to the CLI
+
+### Session Control Features
+
+- **Session creation**: Use `QwenCodeCli.newSession()` to create a new session with custom options
+- **Session management**: The `Session` class provides methods to send prompts, handle responses, and manage session state
+- **Session cleanup**: Always close sessions using `session.close()` to properly terminate the CLI process
+- **Session resumption**: Use `setResumeSessionId()` in `TransportOptions` to resume a previous session
+- **Session interruption**: Use `session.interrupt()` to interrupt a currently running prompt
+- **Dynamic model switching**: Use `session.setModel()` to change the model during a session
+- **Dynamic permission mode switching**: Use `session.setPermissionMode()` to change the permission mode during a session
+
+### Thread Pool Configuration
+
+The SDK uses a thread pool for managing concurrent operations with the following default configuration:
+
+- **Core Pool Size**: 30 threads
+- **Maximum Pool Size**: 100 threads
+- **Keep-Alive Time**: 60 seconds
+- **Queue Capacity**: 300 tasks (using LinkedBlockingQueue)
+- **Thread Naming**: "qwen_code_cli-pool-{number}"
+- **Daemon Threads**: false
+- **Rejected Execution Handler**: CallerRunsPolicy
+
+## Error Handling
+
+The SDK provides specific exception types for different error scenarios:
+
+- `SessionControlException`: Thrown when there's an issue with session control (creation, initialization, etc.)
+- `SessionSendPromptException`: Thrown when there's an issue sending a prompt or receiving a response
+- `SessionClosedException`: Thrown when attempting to use a closed session
+
+## FAQ / Troubleshooting
+
+### Q: Do I need to install the Qwen CLI separately?
+
+A: yes, requires Qwen CLI 0.5.5 or higher.
+
+### Q: What Java versions are supported?
+
+A: The SDK requires Java 1.8 or higher.
+
+### Q: How do I handle long-running requests?
+
+A: The SDK includes timeout utilities. You can configure timeouts using the `Timeout` class in `TransportOptions`.
+
+### Q: Why are some tools not executing?
+
+A: This is likely due to permission modes. Check your permission mode settings and consider using `allowedTools` to pre-approve certain tools.
+
+### Q: How do I resume a previous session?
+
+A: Use the `setResumeSessionId()` method in `TransportOptions` to resume a previous session.
+
+### Q: Can I customize the environment for the CLI process?
+
+A: Yes, use the `setEnv()` method in `TransportOptions` to pass environment variables to the CLI process.
+
+## License
+
+Apache-2.0 - see [LICENSE](./LICENSE) for details.

docs/native-host-troubleshooting.md

@@ -0,0 +1,80 @@
+# Chrome 扩展 Native Host 排查步骤
+
+适用于遇到“Specified native messaging host not found.”、“Native host has exited.”、“Handshake timeout”等情况。
+
+## 1. 核对 manifest
+路径：`~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.qwen.cli.bridge.json`
+
+内容应为：
+```json
+{
+  "name": "com.qwen.cli.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "/Users/jinjing/projects/projj/github.com/QwenLM/qwen-code/packages/chrome-extension/native-host/host.js",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://kbpfhhpfobobomiighfkhojhmefogdgh/"
+  ]
+}
+```
+
+一键覆盖命令：
+```bash
+cat > "$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.qwen.cli.bridge.json" <<'EOF'
+{
+  "name": "com.qwen.cli.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "/Users/jinjing/projects/projj/github.com/QwenLM/qwen-code/packages/chrome-extension/native-host/host.js",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://kbpfhhpfobobomiighfkhojhmefogdgh/"
+  ]
+}
+EOF
+```
+
+> 修改 manifest 后务必**彻底退出并重启 Chrome**，再在扩展页点击“重新加载”插件。
+
+## 2. 确保可执行与 Node 路径
+Host 入口已设置 shebang `/usr/local/bin/node`。确保脚本可执行：
+```bash
+chmod +x /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code/packages/chrome-extension/native-host/host.js
+chmod +x /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code/packages/chrome-extension/native-host/src/host.js
+```
+
+## 3. 日志位置
+- 主日志：`~/.qwen/chrome-bridge/qwen-bridge-host.log`
+- 如果主目录不可写，回退：`/tmp/qwen-bridge-host.log` 或 `/var/folders/.../T/qwen-bridge-host.log`
+
+若文件为空，说明 host 可能没被 Chrome 拉起或启动后被立即杀掉（查看 manifest 是否正确、Chrome 是否重启）。
+
+## 4. 手动运行自检
+```bash
+node /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code/packages/chrome-extension/native-host/host.js
+```
+进程会挂起等待 stdin，无输出属正常；日志文件应记录启动信息。`Ctrl+C` 退出。
+
+## 5. 常见错误与对应操作
+- `Specified native messaging host not found.`  
+  Manifest 中 `path` 或 `allowed_origins` 不对，或 Chrome 未重启。按第 1 步覆盖，重启 Chrome。
+
+- `Native host has exited.` / `Handshake timeout`  
+  多为 manifest 不被 Chrome 接受或 host 无法启动。确认第 1、2 步，重启 Chrome，再看日志是否收到 “Received … bytes”/信号。
+
+## 6. 快速排查命令合集
+```bash
+# 查看当前 manifest
+cat "$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.qwen.cli.bridge.json"
+
+# 覆盖 manifest（见第 1 步）
+cat > "$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.qwen.cli.bridge.json" <<'EOF'
+{ ...如上... }
+EOF
+
+# 确保可执行
+chmod +x /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code/packages/chrome-extension/native-host/host.js
+chmod +x /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code/packages/chrome-extension/native-host/src/host.js
+
+# 查看日志
+cat ~/.qwen/chrome-bridge/qwen-bridge-host.log 2>/dev/null || echo "no log"
+```

docs/users/configuration/settings.md

@@ -381,7 +381,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).                                                                                                                                     |                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--experimental-acp`         |       | Enables ACP mode (Agent Control Protocol). Useful for IDE/editor integrations like [Zed](../integration-zed).                                                                           |                                        | Experimental.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `--acp`                      |       | Enables ACP mode (Agent Control 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.                                                                                                                                               |                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

docs/users/integration-zed.md

@@ -32,7 +32,7 @@
 "Qwen Code": {
   "type": "custom",
   "command": "qwen",
-  "args": ["--experimental-acp"],
+  "args": ["--acp"],
   "env": {}
 }
 ```

integration-tests/acp-integration.test.ts

@@ -80,10 +80,11 @@ type PermissionHandler = (
 
 /**
  * Sets up an ACP test environment with all necessary utilities.
+ * @param useNewFlag - If true, uses --acp; if false, uses --experimental-acp (for backward compatibility testing)
  */
 function setupAcpTest(
   rig: TestRig,
-  options?: { permissionHandler?: PermissionHandler },
+  options?: { permissionHandler?: PermissionHandler; useNewFlag?: boolean },
 ) {
   const pending = new Map<number, PendingRequest>();
   let nextRequestId = 1;
@@ -95,9 +96,13 @@ function setupAcpTest(
   const permissionHandler =
     options?.permissionHandler ?? (() => ({ optionId: 'proceed_once' }));
 
+  // Use --acp by default, but allow testing with --experimental-acp for backward compatibility
+  const acpFlag =
+    options?.useNewFlag !== false ? '--acp' : '--experimental-acp';
+
   const agent = spawn(
     'node',
-    [rig.bundlePath, '--experimental-acp', '--no-chat-recording'],
+    [rig.bundlePath, acpFlag, '--no-chat-recording'],
     {
       cwd: rig.testDir!,
       stdio: ['pipe', 'pipe', 'pipe'],
@@ -621,3 +626,99 @@ function setupAcpTest(
     }
   });
 });
+
+(IS_SANDBOX ? describe.skip : describe)(
+  'acp flag backward compatibility',
+  () => {
+    it('should work with deprecated --experimental-acp flag and show warning', async () => {
+      const rig = new TestRig();
+      rig.setup('acp backward compatibility');
+
+      const { sendRequest, cleanup, stderr } = setupAcpTest(rig, {
+        useNewFlag: false,
+      });
+
+      try {
+        const initResult = await sendRequest('initialize', {
+          protocolVersion: 1,
+          clientCapabilities: {
+            fs: { readTextFile: true, writeTextFile: true },
+          },
+        });
+        expect(initResult).toBeDefined();
+
+        // Verify deprecation warning is shown
+        const stderrOutput = stderr.join('');
+        expect(stderrOutput).toContain('--experimental-acp is deprecated');
+        expect(stderrOutput).toContain('Please use --acp instead');
+
+        await sendRequest('authenticate', { methodId: 'openai' });
+
+        const newSession = (await sendRequest('session/new', {
+          cwd: rig.testDir!,
+          mcpServers: [],
+        })) as { sessionId: string };
+        expect(newSession.sessionId).toBeTruthy();
+
+        // Verify functionality still works
+        const promptResult = await sendRequest('session/prompt', {
+          sessionId: newSession.sessionId,
+          prompt: [{ type: 'text', text: 'Say hello.' }],
+        });
+        expect(promptResult).toBeDefined();
+      } catch (e) {
+        if (stderr.length) {
+          console.error('Agent stderr:', stderr.join(''));
+        }
+        throw e;
+      } finally {
+        await cleanup();
+      }
+    });
+
+    it('should work with new --acp flag without warnings', async () => {
+      const rig = new TestRig();
+      rig.setup('acp new flag');
+
+      const { sendRequest, cleanup, stderr } = setupAcpTest(rig, {
+        useNewFlag: true,
+      });
+
+      try {
+        const initResult = await sendRequest('initialize', {
+          protocolVersion: 1,
+          clientCapabilities: {
+            fs: { readTextFile: true, writeTextFile: true },
+          },
+        });
+        expect(initResult).toBeDefined();
+
+        // Verify no deprecation warning is shown
+        const stderrOutput = stderr.join('');
+        expect(stderrOutput).not.toContain('--experimental-acp is deprecated');
+
+        await sendRequest('authenticate', { methodId: 'openai' });
+
+        const newSession = (await sendRequest('session/new', {
+          cwd: rig.testDir!,
+          mcpServers: [],
+        })) as { sessionId: string };
+        expect(newSession.sessionId).toBeTruthy();
+
+        // Verify functionality works
+        const promptResult = await sendRequest('session/prompt', {
+          sessionId: newSession.sessionId,
+          prompt: [{ type: 'text', text: 'Say hello.' }],
+        });
+        expect(promptResult).toBeDefined();
+      } catch (e) {
+        if (stderr.length) {
+          console.error('Agent stderr:', stderr.join(''));
+        }
+        throw e;
+      } finally {
+        await cleanup();
+      }
+    });
+  },
+);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwen-code/qwen-code",
-  "version": "0.6.0",
+  "version": "0.6.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.6.0"
+    "sandboxImageUri": "ghcr.io/qwenlm/qwen-code:0.6.1"
   },
   "scripts": {
     "start": "cross-env node scripts/start.js",
@@ -73,6 +73,7 @@
     "LICENSE"
   ],
   "devDependencies": {
+    "@types/chrome": "^0.1.32",
     "@types/marked": "^5.0.2",
     "@types/mime-types": "^3.0.1",
     "@types/minimatch": "^5.1.2",

packages/chrome-extension/.extension-id

@@ -0,0 +1 @@
+kbpfhhpfobobomiighfkhojhmefogdgh

packages/chrome-extension/.gitignore

@@ -0,0 +1,25 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+*.zip
+
+# Logs
+*.log
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE files
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Temporary files
+*.tmp
+.temp/
+
+packages/chrome-extension/extension/sidepanel/dist/

packages/chrome-extension/INSTALL.md

@@ -0,0 +1,84 @@
+# Installation Guide for Qwen CLI Chrome Extension
+
+This document describes how to install the Qwen CLI Chrome Extension.
+
+## Prerequisites
+
+1. **Node.js**: Install from [nodejs.org](https://nodejs.org/) (version 18 or higher)
+2. **Qwen CLI**: Install the Qwen CLI tool (optional but recommended for full functionality)
+3. **Chrome Browser**: Version 88 or higher
+
+## Installation Steps
+
+### Method 1: Full Installation (Recommended)
+
+```bash
+cd packages/chrome-extension
+npm run install:all
+```
+
+This command will:
+1. Guide you through Chrome extension installation
+2. Automatically configure the Native Host
+3. Save the Extension ID for future use
+4. Start the debugging environment
+
+### Method 2: Component Installation
+
+You can install components separately:
+
+```bash
+# Install Chrome extension only
+npm run install:extension
+
+# Configure Native Host only
+npm run install:host
+```
+
+### Method 3: Manual Installation
+
+#### Chrome Extension Installation
+
+1. Open Chrome and navigate to `chrome://extensions/`
+2. Enable "Developer mode" (toggle in top right)
+3. Click "Load unpacked"
+4. Select the `packages/chrome-extension/extension` folder
+5. Note the Extension ID that appears (you'll need this for the next step)
+
+#### Native Host Installation
+
+The Native Messaging Host allows the Chrome extension to communicate with Qwen CLI.
+
+For macOS/Linux:
+```bash
+cd packages/chrome-extension/native-host
+./scripts/smart-install.sh
+```
+
+When prompted, enter your Chrome Extension ID.
+
+For Windows:
+1. Run Command Prompt as Administrator
+2. Navigate to the `packages/chrome-extension/native-host` directory
+3. Run the installation script: `install.bat`
+4. Enter your Chrome Extension ID when prompted
+
+## Verification
+
+To verify the installation:
+
+1. Run the development environment:
+   ```bash
+   npm run dev
+   ```
+
+2. You should see Chrome launch with the extension installed and DevTools open.
+
+3. Check that the extension appears in the Chrome toolbar.
+
+## Updates
+
+To update the host configuration (if you get a new extension ID):
+```bash
+npm run update:host
+```

packages/chrome-extension/QUICK_START.md

@@ -0,0 +1,62 @@
+# Quick Start Guide for Qwen CLI Chrome Extension
+
+Get started quickly with the Qwen CLI Chrome Extension.
+
+## Installation
+
+1. **Prerequisites**: Make sure you have Node.js installed:
+   ```bash
+   node --version
+   ```
+
+2. **Install the extension and native host**:
+   ```bash
+   cd packages/chrome-extension
+   npm run install:all
+   ```
+
+## Running the Extension
+
+1. **Start development mode**:
+   ```bash
+   npm run dev
+   ```
+   This will launch Chrome with the extension loaded and open DevTools.
+
+2. **In Chrome**:
+   - Look for the Qwen CLI Chrome Extension icon in the toolbar
+   - Click the icon to open the popup interface
+
+3. **Connect to Qwen CLI** (if installed):
+   - Click "Connect to Qwen CLI" in the extension popup
+   - Click "Start Qwen CLI" to launch the AI interface
+
+## Basic Usage
+
+- **Extract Page Content**: Click "Extract Page Data" to send the current page to Qwen
+- **Take Screenshot**: Click "Capture Screenshot" to take and analyze a screenshot
+- **Monitor Network**: Ask Qwen to "show me the network requests" to view recent network activity
+- **View Console Logs**: Ask Qwen to "show me the console logs" to view browser console output
+
+## Development
+
+1. **Build the extension**:
+   ```bash
+   npm run build
+   ```
+
+2. **Watch for changes during development**:
+   ```bash
+   npm run build:ui:watch
+   ```
+
+3. **View native host logs**:
+   ```bash
+   npm run logs
+   ```
+
+## Next Steps
+
+- Check out the [Development Guide](docs/development.md) for more details on the architecture
+- Read the [Debugging Guide](docs/debugging.md) if you encounter issues
+- Learn about the [Architecture](docs/architecture.md) for deeper understanding

packages/chrome-extension/README.md

@@ -0,0 +1,204 @@
+# Qwen CLI Chrome Extension - Chrome Extension
+
+A Chrome extension that bridges your browser with Qwen CLI, enabling AI-powered analysis and interaction with web content.
+
+> This package is part of the [Qwen Code](https://github.com/QwenLM/qwen-code) mono repository.
+
+## Features
+
+- **Page Data Extraction**: Extract structured data from any webpage including text, links, images, and metadata
+- **Screenshot Capture**: Capture and analyze screenshots with AI
+- **Console & Network Monitoring**: Monitor console logs and network requests
+- **Selected Text Processing**: Send selected text to Qwen CLI for processing
+- **AI Analysis**: Leverage Qwen's AI capabilities to analyze web content
+- **MCP Server Integration**: Support for multiple MCP (Model Context Protocol) servers
+
+## Architecture
+
+```
+┌─────────────────────┐
+│  Chrome Extension   │
+│  - Content Script   │
+│  - Background Worker│
+│  - Popup UI         │
+└──────────┬──────────┘
+           │
+    Native Messaging
+           │
+    ┌──────▼──────────┐
+    │ Native Host     │
+    │ (Node.js)       │
+    └──────┬──────────┘
+           │
+    ┌──────▼──────────┐
+    │   Qwen CLI      │
+    │ + MCP Servers   │
+    └─────────────────┘
+```
+
+## Installation
+
+### Prerequisites
+
+1. **Node.js**: Install from [nodejs.org](https://nodejs.org/)
+2. **Qwen CLI**: Install the Qwen CLI tool (required for full functionality)
+3. **Chrome Browser**: Version 88 or higher
+
+### Step 1: Install the Chrome Extension
+
+1. Open Chrome and navigate to `chrome://extensions/`
+2. Enable "Developer mode" (toggle in top right)
+3. Click "Load unpacked"
+4. Select the `chrome-extension/extension` folder
+5. Note the Extension ID that appears (you'll need this for the next step)
+
+### Step 2: Install the Native Messaging Host
+
+The Native Messaging Host allows the Chrome extension to communicate with Qwen CLI.
+
+#### macOS/Linux
+
+```bash
+cd chrome-extension/native-host
+./install.sh
+```
+
+When prompted, enter your Chrome Extension ID.
+
+#### Windows
+
+1. Run Command Prompt as Administrator
+2. Navigate to the `native-host` directory:
+   ```cmd
+   cd chrome-extension\native-host
+   ```
+3. Run the installation script:
+   ```cmd
+   install.bat
+   ```
+4. Enter your Chrome Extension ID when prompted
+
+### Step 3: Configure Qwen CLI (Optional)
+
+If you want to use MCP servers with the extension:
+
+```bash
+# Add chrome-devtools MCP server
+qwen mcp add chrome-devtools
+
+# Add other MCP servers as needed
+qwen mcp add playwright-mcp
+```
+
+## Usage
+
+### Basic Usage
+
+1. Click the Qwen CLI Chrome Extension extension icon in Chrome
+2. Click "Connect to Qwen CLI" to establish connection
+3. Click "Start Qwen CLI" to launch the CLI process
+4. Use the action buttons to:
+   - Extract and analyze page data
+   - Capture screenshots
+   - Send selected text to Qwen
+   - Monitor console and network logs
+
+### Advanced Settings
+
+In the popup's "Advanced Settings" section, you can configure:
+
+- **MCP Servers**: Comma-separated list of MCP servers to load
+- **HTTP Port**: Port for Qwen CLI HTTP server (default: 8080)
+- **Auto-connect**: Automatically connect when opening the popup
+
+### API Actions
+
+The extension supports the following actions that can be sent to Qwen CLI:
+
+- `analyze_page`: Analyze extracted page data
+- `analyze_screenshot`: Analyze captured screenshot
+- `ai_analyze`: Perform AI analysis on content
+- `process_text`: Process selected text
+- Custom actions based on your MCP server configurations
+
+## Development
+
+### Project Structure
+
+```
+chrome-extension/
+├── extension/              # Chrome extension source
+│   ├── manifest.json       # Extension manifest
+│   ├── background/         # Service worker
+│   ├── content/           # Content scripts
+│   ├── popup/             # Popup UI
+│   └── icons/             # Extension icons
+├── native-host/           # Native messaging host
+│   ├── host.js           # Node.js host script
+│   ├── manifest.json     # Native host manifest
+│   └── install scripts   # Platform-specific installers
+└── docs/                  # Documentation
+```
+
+### Building from Source
+
+1. Clone the repository
+2. No build step required - the extension uses vanilla JavaScript
+3. Load the extension as unpacked in Chrome for development
+
+### Testing
+
+1. Enable Chrome Developer Tools
+2. Check the extension's background page console for logs
+3. Native host logs are written to:
+   - macOS/Linux: `/tmp/qwen-bridge-host.log`
+   - Windows: `%TEMP%\qwen-bridge-host.log`
+
+## Troubleshooting
+
+### Extension not connecting to Native Host
+
+1. Verify Node.js is installed: `node --version`
+2. Check that the Native Host is properly installed
+3. Ensure the Extension ID in the manifest matches your actual extension
+4. Check logs for errors
+
+### Qwen CLI not starting
+
+1. Verify Qwen CLI is installed: `qwen --version`
+2. Check that Qwen CLI can run normally from terminal
+3. Review Native Host logs for error messages
+
+### No response from Qwen CLI
+
+1. Ensure Qwen CLI server is running
+2. Check the configured HTTP port is not in use
+3. Verify MCP servers are properly configured
+
+## Security Considerations
+
+- The extension requires broad permissions to function properly
+- Native Messaging Host runs with user privileges
+- All communication between components uses structured JSON messages
+- No sensitive data is stored; all processing is ephemeral
+
+## Contributing
+
+Contributions are welcome! Please:
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Test thoroughly
+5. Submit a pull request
+
+## License
+
+MIT License - See LICENSE file for details
+
+## Support
+
+For issues, questions, or feature requests:
+- Open an issue on GitHub
+- Check the logs for debugging information
+- Ensure all prerequisites are properly installed

packages/chrome-extension/config/esbuild.config.js

@@ -0,0 +1,102 @@
+/**
+ * esbuild configuration for Chrome Extension Side Panel React App
+ * Bundles React components with Tailwind CSS
+ */
+
+import * as esbuild from 'esbuild';
+import * as fs from 'fs';
+import * as path from 'path';
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+const isWatch = process.argv.includes('--watch');
+const isProduction = process.argv.includes('--production');
+
+/**
+ * Custom CSS plugin that processes CSS through PostCSS/Tailwind
+ * and injects it as inline JavaScript
+ */
+const cssInjectPlugin = {
+  name: 'css-inject',
+  setup(build) {
+    build.onLoad({ filter: /\.css$/ }, async (args) => {
+      const cssPath = args.path;
+      let cssContent = await fs.promises.readFile(cssPath, 'utf8');
+
+      // Handle @import statements
+      const importRegex = /@import\s+['"]([^'"]+)['"]\s*;/g;
+      let match;
+      while ((match = importRegex.exec(cssContent)) !== null) {
+        const importPath = path.resolve(path.dirname(cssPath), match[1]);
+        if (fs.existsSync(importPath)) {
+          const importedContent = await fs.promises.readFile(importPath, 'utf8');
+          cssContent = cssContent.replace(match[0], importedContent);
+        }
+      }
+
+      // Process with PostCSS and Tailwind
+      const result = await postcss([
+        tailwindcss({
+          config: path.resolve(process.cwd(), 'config/tailwind.config.js'),
+        }),
+        autoprefixer,
+      ]).process(cssContent, {
+        from: cssPath,
+      });
+
+      // Convert to JavaScript that injects CSS
+      const minifiedCss = isProduction
+        ? result.css.replace(/\s+/g, ' ').trim()
+        : result.css;
+
+      const jsContent = `
+        (function() {
+          const style = document.createElement('style');
+          style.textContent = ${JSON.stringify(minifiedCss)};
+          document.head.appendChild(style);
+        })();
+      `;
+
+      return {
+        contents: jsContent,
+        loader: 'js',
+      };
+    });
+  },
+};
+
+async function build() {
+  const ctx = await esbuild.context({
+    entryPoints: ['src/sidepanel/index.tsx'],
+    bundle: true,
+    format: 'iife',
+    minify: isProduction,
+    sourcemap: !isProduction,
+    platform: 'browser',
+    outfile: 'extension/sidepanel/dist/sidepanel-app.js',
+    jsx: 'automatic',
+    define: {
+      'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
+    },
+    plugins: [cssInjectPlugin],
+    loader: {
+      '.tsx': 'tsx',
+      '.ts': 'ts',
+    },
+  });
+
+  if (isWatch) {
+    console.log('Watching for changes...');
+    await ctx.watch();
+  } else {
+    await ctx.rebuild();
+    await ctx.dispose();
+    console.log('Build complete!');
+  }
+}
+
+build().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

packages/chrome-extension/config/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/chrome-extension/config/tailwind.config.js

@@ -0,0 +1,53 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/sidepanel/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        qwen: {
+          orange: '#615fff',
+        },
+        'clay-orange': '#4f46e5',
+        ivory: '#f5f5ff',
+        slate: '#141420',
+        green: '#6bcf7f',
+        success: '#74c991',
+        error: '#c74e39',
+        warning: '#e1c08d',
+        loading: 'var(--app-secondary-foreground)',
+      },
+      spacing: {
+        small: '4px',
+        medium: '8px',
+        large: '12px',
+        xlarge: '16px',
+      },
+      borderRadius: {
+        small: '4px',
+        medium: '6px',
+        large: '8px',
+      },
+      animation: {
+        'completion-menu-enter': 'completion-menu-enter 0.15s ease-out',
+        'pulse-slow': 'pulse 1.5s infinite',
+        'slide-up': 'slideUp 0.3s ease-out',
+        fadeIn: 'fadeIn 0.2s ease-in',
+      },
+      keyframes: {
+        'completion-menu-enter': {
+          '0%': { opacity: '0', transform: 'translateY(4px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(100%)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};

packages/chrome-extension/docs/api-reference.md

@@ -0,0 +1,253 @@
+# API Reference for Qwen CLI Chrome Extension
+
+This document provides reference for the APIs and message formats used in the Qwen CLI Chrome Extension.
+
+## Extension to Native Host Messages
+
+The extension communicates with the native host using the following message formats:
+
+### Handshake
+```
+Request:
+{
+  "type": "handshake",
+  "version": "1.0.0"
+}
+
+Response:
+{
+  "type": "handshake_response",
+  "version": "1.0.0",
+  "qwenInstalled": boolean,
+  "qwenVersion": string,
+  "qwenStatus": "disconnected"|"connected"|"running"
+}
+```
+
+### Start Qwen CLI
+```
+Request:
+{
+  "type": "start_qwen",
+  "cwd": string,
+  "config": object (optional)
+}
+
+Response:
+{
+  "success": boolean,
+  "data": object,
+  "error": string (if success is false)
+}
+```
+
+### Send Prompt to Qwen CLI
+```
+Request:
+{
+  "type": "qwen_prompt",
+  "text": string
+}
+
+Response:
+{
+  "success": boolean,
+  "data": object,
+  "error": string (if success is false)
+}
+```
+
+### Extract Page Data
+```
+Request:
+{
+  "type": "EXTRACT_DATA"
+}
+
+Response:
+{
+  "success": boolean,
+  "data": {
+    "url": string,
+    "title": string,
+    "content": {
+      "text": string,
+      "html": string,
+      "markdown": string
+    },
+    "links": array,
+    "images": array,
+    "forms": array
+  },
+  "error": string (if success is false)
+}
+```
+
+## Browser MCP Tools
+
+The extension provides the following MCP tools to Qwen CLI:
+
+### browser_read_page
+```
+Description: Read the content of the current browser page
+Input: {}
+Output: {
+  "url": string,
+  "title": string,
+  "content": string,
+  "linksCount": number,
+  "imagesCount": number
+}
+```
+
+### browser_capture_screenshot
+```
+Description: Capture a screenshot of the current browser tab
+Input: {}
+Output: {
+  "data": string (base64 encoded PNG),
+  "mimeType": "image/png"
+}
+```
+
+### browser_get_network_logs
+```
+Description: Get network request logs from the current browser tab
+Input: {}
+Output: {
+  "text": string (JSON formatted network logs)
+}
+```
+
+### browser_get_console_logs
+```
+Description: Get console logs from the current browser tab
+Input: {}
+Output: {
+  "text": string (formatted console logs)
+}
+```
+
+## Internal Extension Messages
+
+The extension components communicate internally using these message formats:
+
+### Get Status
+```
+Request:
+{
+  "type": "GET_STATUS"
+}
+
+Response:
+{
+  "connected": boolean,
+  "status": string,
+  "availableCommands": array,
+  "mcpTools": array,
+  "internalTools": array
+}
+```
+
+### Send Message
+```
+Request:
+{
+  "type": "sendMessage",
+  "data": {
+    "text": string,
+    "cwd": string (optional)
+  }
+}
+
+Response:
+{
+  "success": boolean,
+  "error": string (if success is false)
+}
+```
+
+### Get Network Logs
+```
+Request:
+{
+  "type": "GET_NETWORK_LOGS"
+}
+
+Response:
+{
+  "success": boolean,
+  "data": array,
+  "error": string (if success is false)
+}
+```
+
+## Event Types
+
+The extension broadcasts various events:
+
+### Status Update
+```
+{
+  "type": "STATUS_UPDATE",
+  "status": string
+}
+```
+
+### Stream Start/End
+```
+{
+  "type": "streamStart"
+}
+```
+or
+```
+{
+  "type": "streamEnd"
+}
+```
+
+### Tool Progress
+```
+{
+  "type": "toolProgress",
+  "data": {
+    "name": string,
+    "stage": "start"|"end",
+    "ok": boolean,
+    "error": string (if applicable)
+  }
+}
+```
+
+## Network Log Format
+
+Network logs returned by the browser_get_network_logs tool have the following structure:
+
+```
+{
+  "method": string (e.g., "Network.requestWillBeSent"),
+  "params": {
+    "requestId": string,
+    "request": {
+      "url": string,
+      "method": string,
+      "headers": object
+    },
+    "response": {
+      "status": number,
+      "statusText": string,
+      "headers": object
+    },
+    "timestamp": number
+  }
+}
+```
+
+## Error Handling
+
+All API responses include error handling:
+
+- Success responses include a `success: true` field and result data
+- Error responses include a `success: false` field and an `error` string
+- The native host logs detailed error information for debugging

packages/chrome-extension/docs/architecture.md

@@ -0,0 +1,146 @@
+# Architecture Overview for Qwen CLI Chrome Extension
+
+This document describes the architecture of the Qwen CLI Chrome Extension.
+
+## Overview
+
+The Qwen CLI Chrome Extension connects your browser with the Qwen CLI, enabling AI-powered analysis and interaction with web content. It uses the Chrome Native Messaging API to securely communicate with the native host process.
+
+## System Architecture
+
+```
+┌─────────────────────┐
+│  Chrome Browser     │
+│  ┌─────────────────┐│
+│  │ Extension UI    ││  ← Popup/Side panel interface
+│  └─────────────────┘│
+│  ┌─────────────────┐│
+│  │ Content Script  ││  ← Page content extraction
+│  └─────────────────┘│
+│  ┌─────────────────┐│
+│  │ Background      ││  ← Service worker handling
+│  │ (Service Worker)││     messaging and logic
+│  └─────────────────┘│
+└──────────┬──────────┘
+           │
+    Native Messaging
+           │
+    ┌──────▼──────────┐
+    │ Native Host     │
+    │ (Node.js)       │  ← Bridge between extension
+    └──────┬──────────┘    and Qwen CLI
+           │
+    ┌──────▼──────────┐
+    │   Qwen CLI      │
+    │ + MCP Servers   │  ← AI processing and tools
+    └─────────────────┘
+```
+
+## Components
+
+### 1. Extension UI (Popup/Side Panel)
+
+The user interface of the extension provides:
+- Connection management to Qwen CLI
+- Action buttons for various features
+- Status information
+- Settings and configuration
+
+### 2. Content Script
+
+The content script runs on web pages and provides:
+- Page content extraction
+- Console log capture
+- Element selection and highlighting
+- Text selection utilities
+- Direct DOM interaction
+
+### 3. Background Script (Service Worker)
+
+The background service worker handles:
+- Communication with the native host
+- Message routing between components
+- Browser API interactions
+- Network monitoring (via debugger API)
+- State management
+
+### 4. Native Host (Node.js)
+
+The native host acts as a bridge between the extension and Qwen CLI:
+- Implements the Native Messaging protocol
+- Communicates with Qwen CLI using ACP (Agent Communication Protocol)
+- Handles file system operations
+- Manages MCP (Model Context Protocol) servers
+- Provides browser-specific tools via HTTP bridge
+
+### 5. Qwen CLI
+
+The main AI processing component:
+- Runs AI models and processes requests
+- Manages MCP servers
+- Provides tool access (shell commands, file operations, etc.)
+
+## Security Architecture
+
+The extension follows Chrome's security model:
+
+1. **Native Messaging Security**: Communication between extension and native host is restricted by manifest permissions
+2. **Content Security Policy**: Prevents XSS attacks and injection
+3. **Sandboxed Execution**: Native host runs with user privileges, not elevated permissions
+4. **Origin Restrictions**: Communication is limited to allowed origins
+
+## Data Flow
+
+### Page Analysis Request
+
+1. User initiates "Analyze Page" from extension UI
+2. Background script sends message to content script
+3. Content script extracts page data (text, links, images, etc.)
+4. Data is sent back to background script
+5. Background script sends data to native host
+6. Native host forwards to Qwen CLI
+7. Qwen CLI processes and responds with AI analysis
+8. Response flows back to extension UI
+
+### Network Monitoring
+
+1. Background script uses Chrome Debugger API to monitor network requests
+2. Network events are captured and stored per tab
+3. When requested, network logs are provided to Qwen CLI via native host
+4. This allows AI to analyze API calls and network activity
+
+## Communication Protocols
+
+### Native Messaging Protocol
+
+JSON-based messages exchanged between extension and native host:
+```json
+{
+  "type": "message_type",
+  "id": "request_id",
+  "data": { ... }
+}
+```
+
+### ACP (Agent Communication Protocol)
+
+Used between native host and Qwen CLI:
+- JSON-RPC over stdio
+- Content-Length framed messages
+- Request/response with error handling
+
+## Extension Permissions
+
+The extension requires specific permissions for full functionality:
+
+- `activeTab`: Access to current tab for content extraction
+- `tabs`: Tab management and information
+- `storage`: Local storage for settings and state
+- `nativeMessaging`: Communication with native host
+- `debugger`: Network request monitoring
+- `webNavigation`: Navigation event monitoring
+- `scripting`: Content script injection
+- `cookies`: Cookie access for web automation
+- `webRequest`: Network request monitoring
+- `sidePanel`: Side panel UI support
+- `host_permissions`: Access to all URLs

packages/chrome-extension/docs/debugging.md

@@ -0,0 +1,96 @@
+# Debugging Guide for Qwen CLI Chrome Extension
+
+This document outlines the debugging process for the Qwen CLI Chrome Extension.
+
+## Debugging Setup
+
+The extension provides several debugging options to help troubleshoot issues.
+
+### Development Mode
+
+To start the extension in development mode with debugging enabled:
+
+```bash
+npm run dev
+```
+
+This will:
+- Launch Chrome with the extension loaded
+- Open DevTools automatically
+- Start a test server at http://localhost:3000
+- Provide a test page for functionality verification
+
+### Native Host Logging
+
+The native host logs are stored at:
+- **macOS/Linux**: `/tmp/qwen-bridge-host.log`
+- **Windows**: `%TEMP%\qwen-bridge-host.log`
+
+To monitor the logs in real-time:
+```bash
+npm run logs
+```
+
+Or directly:
+```bash
+tail -f /tmp/qwen-bridge-host.log
+```
+
+### Chrome Extension Debugging
+
+1. Open Chrome Extensions page (`chrome://extensions/`)
+2. Enable "Developer mode"
+3. Find the Qwen CLI Chrome Extension extension
+4. Click "Inspect views" on the service worker to open DevTools for background scripts
+5. Use the popup/panel's DevTools for UI debugging
+
+## Common Debugging Scenarios
+
+### Connection Issues
+
+If the extension can't connect to the native host:
+
+1. Verify Node.js is installed: `node --version`
+2. Check the native host installation: `./native-host/scripts/smart-install.sh`
+3. Check logs: `/tmp/qwen-bridge-host.log`
+4. Verify extension ID matches the one in native host manifest
+
+### Qwen CLI Communication Issues
+
+If the extension can't communicate with Qwen CLI:
+
+1. Verify Qwen CLI is installed: `qwen --version`
+2. Check that Qwen CLI is running when the extension tries to connect
+3. Check the extension's console logs for error messages
+4. Verify the MCP server configuration
+
+### Content Script Issues
+
+If content scripts aren't working properly:
+
+1. Check the content script logs in the page's DevTools console
+2. Verify the content script is properly injected
+3. Check for CSP restrictions on the target page
+
+## Debugging Scripts
+
+The following scripts are available for debugging:
+
+- `npm run dev`: Full development environment with Chrome auto-launch
+- `npm run logs`: Tail the native host log file
+- `npm run clean`: Clean all build artifacts and logs
+- `npm run dev:chrome`: Start Chrome with extension loaded and DevTools open
+
+## Troubleshooting Tips
+
+### Check Extension Status
+Check the extension's status in the extension popup or through the API.
+
+### Verify Permissions
+Ensure all required permissions are granted in the extension settings.
+
+### Network Requests
+Monitor network requests to ensure proper communication between components.
+
+### Console Messages
+Watch console messages in both the extension's background script and content scripts.

packages/chrome-extension/docs/development.md

@@ -0,0 +1,69 @@
+# Development Guide for Qwen CLI Chrome Extension
+
+This document outlines the development process for the Qwen CLI Chrome Extension.
+
+## Directory Structure
+
+```
+packages/chrome-extension/
+├── src/                           # Source code
+│   ├── background/                # Background script source
+│   ├── content/                   # Content script source
+│   ├── sidepanel/                 # Side panel React components
+│   ├── common/                    # Shared utilities
+│   └── types/                     # TypeScript definitions
+├── extension/                     # Build output (production-ready extension)
+│   ├── background/
+│   ├── content/
+│   ├── popup/
+│   ├── sidepanel/
+│   ├── icons/
+│   └── manifest.json
+├── native-host/                   # Native messaging host
+│   ├── src/                       # Source files
+│   ├── dist/                      # Built files
+│   ├── scripts/                   # Installation scripts
+│   └── config/                    # Configuration templates
+├── docs/                          # Documentation
+├── scripts/                       # Build and development scripts
+├── test/                          # Test files
+├── config/                        # Configuration files
+├── README.md
+├── DEVELOPMENT.md                 # This file
+├── DEBUGGING.md
+├── INSTALL.md
+├── QUICK_START.md
+└── package.json
+```
+
+## Development Setup
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Start development server:
+   ```bash
+   npm run dev
+   ```
+
+## Building
+
+To build the extension:
+```bash
+npm run build
+```
+
+This will compile the source files and output the production-ready extension to the `extension/` directory.
+
+## Testing
+
+Unit tests are located in the `test/unit/` directory.
+Integration tests are located in the `test/integration/` directory.
+End-to-end tests are located in the `test/e2e/` directory.
+
+Run all tests:
+```bash
+npm run test
+```

packages/chrome-extension/extension/content/content-script.js

@@ -0,0 +1,480 @@
+/**
+ * Content Script for Qwen CLI Chrome Extension
+ * Extracts data from web pages and communicates with background script
+ */
+
+if (window.__QWEN_BRIDGE_CONTENT_SCRIPT_LOADED__) {
+  console.debug('Qwen Bridge content script already loaded, skipping.');
+} else {
+  window.__QWEN_BRIDGE_CONTENT_SCRIPT_LOADED__ = true;
+
+// Data extraction functions
+function extractPageData() {
+  const data = {
+    // Basic page info
+    url: window.location.href,
+    title: document.title,
+    domain: window.location.hostname,
+    path: window.location.pathname,
+    timestamp: new Date().toISOString(),
+
+    // Meta information
+    meta: {},
+
+    // Page content
+    content: {
+      text: '',
+      html: '',
+      markdown: ''
+    },
+
+    // Structured data
+    links: [],
+    images: [],
+    forms: [],
+
+    // Console logs
+    consoleLogs: [],
+
+    // Performance metrics
+    performance: {}
+  };
+
+  // Extract meta tags
+  document.querySelectorAll('meta').forEach(meta => {
+    const name = meta.getAttribute('name') || meta.getAttribute('property');
+    const content = meta.getAttribute('content');
+    if (name && content) {
+      data.meta[name] = content;
+    }
+  });
+
+  // Extract main content (try to find article or main element first)
+  const mainContent = document.querySelector('article, main, [role="main"]') || document.body;
+  data.content.text = extractTextContent(mainContent);
+  data.content.html = mainContent.innerHTML;
+  data.content.markdown = htmlToMarkdown(mainContent);
+
+  // Extract all links
+  document.querySelectorAll('a[href]').forEach(link => {
+    data.links.push({
+      text: link.textContent.trim(),
+      href: link.href,
+      target: link.target,
+      isExternal: isExternalLink(link.href)
+    });
+  });
+
+  // Extract all images
+  document.querySelectorAll('img').forEach(img => {
+    data.images.push({
+      src: img.src,
+      alt: img.alt,
+      title: img.title,
+      width: img.naturalWidth,
+      height: img.naturalHeight
+    });
+  });
+
+  // Extract form data (structure only, no sensitive data)
+  document.querySelectorAll('form').forEach(form => {
+    const formData = {
+      action: form.action,
+      method: form.method,
+      fields: []
+    };
+
+    form.querySelectorAll('input, textarea, select').forEach(field => {
+      formData.fields.push({
+        type: field.type || field.tagName.toLowerCase(),
+        name: field.name,
+        id: field.id,
+        placeholder: field.placeholder,
+        required: field.required
+      });
+    });
+
+    data.forms.push(formData);
+  });
+
+  // Get performance metrics
+  if (window.performance && window.performance.timing) {
+    const perf = window.performance.timing;
+    data.performance = {
+      loadTime: perf.loadEventEnd - perf.navigationStart,
+      domReady: perf.domContentLoadedEventEnd - perf.navigationStart,
+      firstPaint: getFirstPaintTime()
+    };
+  }
+
+  return data;
+}
+
+// Extract clean text content
+function extractTextContent(element) {
+  // Clone the element to avoid modifying the original
+  const clone = element.cloneNode(true);
+
+  // Remove script and style elements
+  clone.querySelectorAll('script, style, noscript').forEach(el => el.remove());
+
+  // Get text content and clean it up
+  let text = clone.textContent || '';
+
+  // Remove excessive whitespace
+  text = text.replace(/\s+/g, ' ').trim();
+
+  // Limit length to prevent excessive data
+  const maxLength = 50000; // 50KB limit
+  if (text.length > maxLength) {
+    text = text.substring(0, maxLength) + '...';
+  }
+
+  return text;
+}
+
+// Simple HTML to Markdown converter
+function htmlToMarkdown(element) {
+  const clone = element.cloneNode(true);
+
+  // Remove script and style elements
+  clone.querySelectorAll('script, style, noscript').forEach(el => el.remove());
+
+  let markdown = '';
+  const walker = document.createTreeWalker(
+    clone,
+    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
+    null,
+    false
+  );
+
+  let node;
+  let listStack = [];
+
+  while (node = walker.nextNode()) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent.trim();
+      if (text) {
+        markdown += text + ' ';
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      switch (node.tagName.toLowerCase()) {
+        case 'h1':
+          markdown += '\n# ' + node.textContent.trim() + '\n';
+          break;
+        case 'h2':
+          markdown += '\n## ' + node.textContent.trim() + '\n';
+          break;
+        case 'h3':
+          markdown += '\n### ' + node.textContent.trim() + '\n';
+          break;
+        case 'h4':
+          markdown += '\n#### ' + node.textContent.trim() + '\n';
+          break;
+        case 'h5':
+          markdown += '\n##### ' + node.textContent.trim() + '\n';
+          break;
+        case 'h6':
+          markdown += '\n###### ' + node.textContent.trim() + '\n';
+          break;
+        case 'p':
+          markdown += '\n' + node.textContent.trim() + '\n';
+          break;
+        case 'br':
+          markdown += '\n';
+          break;
+        case 'a':
+          const href = node.getAttribute('href');
+          const text = node.textContent.trim();
+          if (href) {
+            markdown += `[${text}](${href}) `;
+          }
+          break;
+        case 'img':
+          const src = node.getAttribute('src');
+          const alt = node.getAttribute('alt') || '';
+          if (src) {
+            markdown += `![${alt}](${src}) `;
+          }
+          break;
+        case 'ul':
+        case 'ol':
+          markdown += '\n';
+          listStack.push(node.tagName.toLowerCase());
+          break;
+        case 'li':
+          const listType = listStack[listStack.length - 1];
+          const prefix = listType === 'ol' ? '1. ' : '- ';
+          markdown += prefix + node.textContent.trim() + '\n';
+          break;
+        case 'code':
+          markdown += '`' + node.textContent + '`';
+          break;
+        case 'pre':
+          markdown += '\n```\n' + node.textContent + '\n```\n';
+          break;
+        case 'blockquote':
+          markdown += '\n> ' + node.textContent.trim() + '\n';
+          break;
+        case 'strong':
+        case 'b':
+          markdown += '**' + node.textContent + '**';
+          break;
+        case 'em':
+        case 'i':
+          markdown += '*' + node.textContent + '*';
+          break;
+      }
+    }
+  }
+
+  // Limit markdown length
+  const maxLength = 30000;
+  if (markdown.length > maxLength) {
+    markdown = markdown.substring(0, maxLength) + '...';
+  }
+
+  return markdown.trim();
+}
+
+// Check if link is external
+function isExternalLink(url) {
+  try {
+    const link = new URL(url);
+    return link.hostname !== window.location.hostname;
+  } catch {
+    return false;
+  }
+}
+
+// Get first paint time
+function getFirstPaintTime() {
+  if (window.performance && window.performance.getEntriesByType) {
+    const paintEntries = window.performance.getEntriesByType('paint');
+    const firstPaint = paintEntries.find(entry => entry.name === 'first-paint');
+    return firstPaint ? firstPaint.startTime : null;
+  }
+  return null;
+}
+
+// Console log interceptor
+const consoleLogs = [];
+const originalConsole = {
+  log: console.log,
+  error: console.error,
+  warn: console.warn,
+  info: console.info
+};
+
+// Intercept console methods
+['log', 'error', 'warn', 'info'].forEach(method => {
+  console[method] = function(...args) {
+    // Store the log
+    consoleLogs.push({
+      type: method,
+      message: args.map(arg => {
+        try {
+          if (typeof arg === 'object') {
+            return JSON.stringify(arg);
+          }
+          return String(arg);
+        } catch {
+          return String(arg);
+        }
+      }).join(' '),
+      timestamp: new Date().toISOString(),
+      stack: new Error().stack
+    });
+
+    // Keep only last 100 logs to prevent memory issues
+    if (consoleLogs.length > 100) {
+      consoleLogs.shift();
+    }
+
+    // Call original console method
+    originalConsole[method].apply(console, args);
+  };
+});
+
+// Get selected text
+function getSelectedText() {
+  return window.getSelection().toString();
+}
+
+// Highlight element on page
+function highlightElement(selector) {
+  try {
+    const element = document.querySelector(selector);
+    if (element) {
+      // Store original style
+      const originalStyle = element.style.cssText;
+
+      // Apply highlight
+      element.style.cssText += `
+        outline: 3px solid #FF6B6B !important;
+        background-color: rgba(255, 107, 107, 0.1) !important;
+        transition: all 0.3s ease !important;
+      `;
+
+      // Remove highlight after 3 seconds
+      setTimeout(() => {
+        element.style.cssText = originalStyle;
+      }, 3000);
+
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('Failed to highlight element:', error);
+    return false;
+  }
+}
+
+// Execute custom JavaScript in page context
+function executeInPageContext(code) {
+  try {
+    const script = document.createElement('script');
+    script.textContent = `
+      (function() {
+        try {
+          const result = ${code};
+          window.postMessage({
+            type: 'QWEN_BRIDGE_RESULT',
+            success: true,
+            result: result
+          }, '*');
+        } catch (error) {
+          window.postMessage({
+            type: 'QWEN_BRIDGE_RESULT',
+            success: false,
+            error: error.message
+          }, '*');
+        }
+      })();
+    `;
+    document.documentElement.appendChild(script);
+    script.remove();
+
+    return new Promise((resolve, reject) => {
+      const listener = (event) => {
+        if (event.data && event.data.type === 'QWEN_BRIDGE_RESULT') {
+          window.removeEventListener('message', listener);
+          if (event.data.success) {
+            resolve(event.data.result);
+          } else {
+            reject(new Error(event.data.error));
+          }
+        }
+      };
+      window.addEventListener('message', listener);
+
+      // Timeout after 5 seconds
+      setTimeout(() => {
+        window.removeEventListener('message', listener);
+        reject(new Error('Execution timeout'));
+      }, 5000);
+    });
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
+// Message listener for communication with background script
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  console.log('Content script received message:', request);
+
+  switch (request.type) {
+    case 'EXTRACT_DATA':
+      // Extract and send page data
+      const pageData = extractPageData();
+      pageData.consoleLogs = consoleLogs;
+      sendResponse({
+        success: true,
+        data: pageData
+      });
+      break;
+
+    case 'GET_CONSOLE_LOGS':
+      // Get captured console logs
+      sendResponse({
+        success: true,
+        data: consoleLogs.slice() // Return a copy
+      });
+      break;
+
+    case 'GET_SELECTED_TEXT':
+      // Get currently selected text
+      sendResponse({
+        success: true,
+        data: getSelectedText()
+      });
+      break;
+
+    case 'HIGHLIGHT_ELEMENT':
+      // Highlight an element on the page
+      const highlighted = highlightElement(request.selector);
+      sendResponse({
+        success: highlighted
+      });
+      break;
+
+    case 'EXECUTE_CODE':
+      // Execute JavaScript in page context
+      executeInPageContext(request.code)
+        .then(result => {
+          sendResponse({
+            success: true,
+            data: result
+          });
+        })
+        .catch(error => {
+          sendResponse({
+            success: false,
+            error: error.message
+          });
+        });
+      return true; // Will respond asynchronously
+
+    case 'SCROLL_TO':
+      // Scroll to specific position
+      window.scrollTo({
+        top: request.y || 0,
+        left: request.x || 0,
+        behavior: request.smooth ? 'smooth' : 'auto'
+      });
+      sendResponse({ success: true });
+      break;
+
+    case 'QWEN_EVENT':
+      // Handle events from Qwen CLI
+      console.log('Qwen event received:', request.event);
+      // Could trigger UI updates or other actions based on event
+      break;
+
+    default:
+      sendResponse({
+        success: false,
+        error: 'Unknown request type'
+      });
+  }
+});
+
+// Notify background script that content script is loaded
+chrome.runtime.sendMessage({
+  type: 'CONTENT_SCRIPT_LOADED',
+  url: window.location.href
+}).catch(() => {
+  // Ignore errors if background script is not ready
+});
+
+// Export for testing
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    extractPageData,
+    extractTextContent,
+    htmlToMarkdown,
+    getSelectedText,
+    highlightElement
+  };
+}
+}

packages/chrome-extension/extension/manifest.json

@@ -0,0 +1,61 @@
+{
+  "manifest_version": 3,
+  "name": "Qwen CLI Chrome Extension",
+  "version": "1.0.0",
+  "description": "Bridge between Chrome browser and Qwen CLI for enhanced AI interactions",
+
+  "permissions": [
+    "activeTab",
+    "tabs",
+    "storage",
+    "nativeMessaging",
+    "debugger",
+    "webNavigation",
+    "scripting",
+    "cookies",
+    "webRequest",
+    "sidePanel"
+  ],
+
+  "host_permissions": ["<all_urls>"],
+
+  "externally_connectable": {
+    "ids": ["aohjeidlpcjalobgghfkkehjbdhacjlo"],
+    "matches": ["https://*/*"]
+  },
+
+  "background": {
+    "service_worker": "background/service-worker.js"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content/content-script.js"],
+      "run_at": "document_idle"
+    }
+  ],
+
+  "action": {
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+
+  "side_panel": {
+    "default_path": "sidepanel/sidepanel.html"
+  },
+
+  "options_ui": {
+    "page": "options/options.html",
+    "open_in_tab": true
+  },
+
+  "icons": {
+    "16": "icons/icon-16.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  }
+}

packages/chrome-extension/extension/options/options.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Qwen CLI Chrome Extension - Options</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 40px 20px;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+            padding: 40px;
+        }
+
+        h1 {
+            color: #333;
+            font-size: 2em;
+            margin-bottom: 10px;
+        }
+
+        .subtitle {
+            color: #666;
+            margin-bottom: 30px;
+        }
+
+        .section {
+            margin: 30px 0;
+            padding: 25px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+
+        .section h2 {
+            color: #667eea;
+            margin-bottom: 15px;
+            font-size: 1.3em;
+        }
+
+        .option-group {
+            margin: 20px 0;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            color: #444;
+            font-weight: 500;
+        }
+
+        input[type="text"],
+        input[type="number"],
+        textarea {
+            width: 100%;
+            padding: 10px 15px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+
+        input:focus,
+        textarea:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        input[type="checkbox"] {
+            margin-right: 8px;
+        }
+
+        .checkbox-label {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+
+        button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+
+        .save-status {
+            display: inline-block;
+            margin-left: 15px;
+            color: #4caf50;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .save-status.show {
+            opacity: 1;
+        }
+
+        .help-text {
+            font-size: 12px;
+            color: #999;
+            margin-top: 5px;
+        }
+
+        .info-box {
+            background: #e3f2fd;
+            border-left: 4px solid #2196f3;
+            padding: 15px;
+            margin: 20px 0;
+            border-radius: 4px;
+        }
+
+        .info-box h3 {
+            color: #1976d2;
+            margin-bottom: 8px;
+        }
+
+        .info-box p {
+            color: #555;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>⚙️ Qwen CLI Chrome Extension Settings</h1>
+        <p class="subtitle">Configure your Chrome extension and Qwen CLI integration</p>
+
+        <div class="section">
+            <h2>🔌 Connection Settings</h2>
+
+            <div class="option-group">
+                <label for="httpPort">HTTP Server Port</label>
+                <input type="number" id="httpPort" min="1024" max="65535" value="8080">
+                <p class="help-text">Port for Qwen CLI HTTP server (default: 8080)</p>
+            </div>
+
+            <div class="option-group">
+                <label for="mcpServers">MCP Servers</label>
+                <input type="text" id="mcpServers" placeholder="chrome-devtools,playwright">
+                <p class="help-text">Comma-separated list of MCP servers to load</p>
+            </div>
+
+            <div class="option-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" id="autoConnect">
+                    <span>Auto-connect on startup</span>
+                </label>
+                <p class="help-text">Automatically connect to Qwen CLI when opening the popup</p>
+            </div>
+        </div>
+
+        <div class="section">
+            <h2>🎨 Display Settings</h2>
+
+            <div class="option-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" id="showNotifications">
+                    <span>Show notifications</span>
+                </label>
+                <p class="help-text">Display desktop notifications for important events</p>
+            </div>
+
+            <div class="option-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" id="debugMode">
+                    <span>Debug mode</span>
+                </label>
+                <p class="help-text">Show detailed debug information in console</p>
+            </div>
+        </div>
+
+        <div class="info-box">
+            <h3>ℹ️ Native Host Status</h3>
+            <p id="nativeHostStatus">Checking...</p>
+        </div>
+
+        <div class="info-box">
+            <h3>📍 Extension ID</h3>
+            <p id="extensionId">Loading...</p>
+        </div>
+
+        <button id="saveBtn">Save Settings</button>
+        <span class="save-status" id="saveStatus">✓ Settings saved</span>
+
+        <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #e0e0e0;">
+            <p style="text-align: center; color: #999; font-size: 14px;">
+                Qwen CLI Chrome Extension v1.0.0 |
+                <a href="https://github.com/QwenLM/qwen-code" style="color: #667eea;">GitHub</a> |
+                <a href="#" id="helpLink" style="color: #667eea;">Help</a>
+            </p>
+        </div>
+    </div>
+
+    <script src="options.js"></script>
+</body>
+</html>

packages/chrome-extension/extension/options/options.js

@@ -0,0 +1,80 @@
+/**
+ * Options page script for Qwen CLI Chrome Extension
+ */
+
+// Load saved settings
+async function loadSettings() {
+  const settings = await chrome.storage.local.get([
+    'httpPort',
+    'mcpServers',
+    'autoConnect',
+    'showNotifications',
+    'debugMode'
+  ]);
+
+  // Set values in form
+  document.getElementById('httpPort').value = settings.httpPort || 8080;
+  document.getElementById('mcpServers').value = settings.mcpServers || '';
+  document.getElementById('autoConnect').checked = settings.autoConnect || false;
+  document.getElementById('showNotifications').checked = settings.showNotifications || false;
+  document.getElementById('debugMode').checked = settings.debugMode || false;
+}
+
+// Save settings
+document.getElementById('saveBtn').addEventListener('click', async () => {
+  const settings = {
+    httpPort: parseInt(document.getElementById('httpPort').value) || 8080,
+    mcpServers: document.getElementById('mcpServers').value,
+    autoConnect: document.getElementById('autoConnect').checked,
+    showNotifications: document.getElementById('showNotifications').checked,
+    debugMode: document.getElementById('debugMode').checked
+  };
+
+  await chrome.storage.local.set(settings);
+
+  // Show saved status
+  const saveStatus = document.getElementById('saveStatus');
+  saveStatus.classList.add('show');
+  setTimeout(() => {
+    saveStatus.classList.remove('show');
+  }, 2000);
+});
+
+// Check Native Host status
+async function checkNativeHostStatus() {
+  try {
+    // Try to send a message to check if Native Host is installed
+    chrome.runtime.sendMessage({ type: 'GET_STATUS' }, (response) => {
+      if (chrome.runtime.lastError) {
+        document.getElementById('nativeHostStatus').textContent =
+          '❌ Not installed - Please run install script';
+      } else if (response && response.connected) {
+        document.getElementById('nativeHostStatus').textContent =
+          '✅ Connected and running';
+      } else {
+        document.getElementById('nativeHostStatus').textContent =
+          '⚠️ Installed but not connected';
+      }
+    });
+  } catch (error) {
+    document.getElementById('nativeHostStatus').textContent =
+      '❌ Error checking status';
+  }
+}
+
+// Show extension ID
+document.getElementById('extensionId').textContent = chrome.runtime.id;
+
+// Help link
+document.getElementById('helpLink').addEventListener('click', (e) => {
+  e.preventDefault();
+  chrome.tabs.create({
+    url: 'https://github.com/QwenLM/qwen-code/tree/main/packages/chrome-extension',
+  });
+});
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+  loadSettings();
+  checkNativeHostStatus();
+});

packages/chrome-extension/extension/popup/popup.css

@@ -0,0 +1,385 @@
+/* Popup Styles for Qwen CLI Chrome Extension */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 400px;
+    min-height: 500px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #333;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.container {
+    background: white;
+    min-height: 500px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+.header {
+    padding: 16px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.logo .icon {
+    width: 24px;
+    height: 24px;
+}
+
+.logo h1 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+/* Status Indicator */
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    font-size: 12px;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #ff4444;
+    animation: pulse 2s infinite;
+}
+
+.status-indicator.connected .status-dot {
+    background: #44ff44;
+}
+
+.status-indicator.connecting .status-dot {
+    background: #ffaa44;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+/* Sections */
+.section {
+    padding: 16px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.section:last-of-type {
+    border-bottom: none;
+}
+
+.section h2 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+}
+
+/* Buttons */
+.btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+    background: #f5f5f5;
+    color: #333;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: #e5e5e5;
+}
+
+.btn-small {
+    padding: 4px 12px;
+    font-size: 12px;
+}
+
+.btn-icon {
+    width: 32px;
+    height: 32px;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background 0.2s;
+}
+
+.btn-icon:hover {
+    background: #f5f5f5;
+}
+
+.btn-icon svg {
+    width: 100%;
+    height: 100%;
+    stroke: #666;
+}
+
+/* Connection Section */
+.connection-controls {
+    display: flex;
+    gap: 8px;
+}
+
+.error-message {
+    margin-top: 8px;
+    padding: 8px;
+    background: #fee;
+    color: #c00;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+/* Action Buttons */
+.action-buttons {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+}
+
+.action-btn {
+    padding: 12px;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    background: white;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #666;
+}
+
+.action-btn:hover:not(:disabled) {
+    border-color: #667eea;
+    background: #f8f9ff;
+    color: #667eea;
+}
+
+.action-btn:hover:not(:disabled) .action-icon {
+    stroke: #667eea;
+}
+
+.action-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.action-icon {
+    width: 24px;
+    height: 24px;
+    stroke: #999;
+}
+
+/* Response Section */
+.response-container {
+    background: #f9f9f9;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.response-header {
+    padding: 8px 12px;
+    background: #f0f0f0;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.response-type {
+    font-size: 12px;
+    font-weight: 600;
+    color: #666;
+}
+
+.response-content {
+    padding: 12px;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 12px;
+    color: #333;
+    max-height: 200px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+/* Settings Section */
+.settings-section details {
+    cursor: pointer;
+}
+
+.settings-section summary {
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 4px 0;
+    user-select: none;
+}
+
+.settings-section summary:hover {
+    color: #667eea;
+}
+
+.settings-content {
+    margin-top: 12px;
+}
+
+.setting-item {
+    margin-bottom: 12px;
+}
+
+.setting-item label {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 12px;
+    color: #666;
+}
+
+.setting-item input[type="text"],
+.setting-item input[type="number"] {
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.setting-item input[type="checkbox"] {
+    margin-right: 8px;
+}
+
+/* Footer */
+.footer {
+    padding: 12px 16px;
+    background: #f9f9f9;
+    border-top: 1px solid #e5e5e5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #999;
+    margin-top: auto;
+}
+
+.footer a {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.version {
+    color: #bbb;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* Loading state */
+.loading {
+    position: relative;
+    pointer-events: none;
+}
+
+.loading::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease;
+}

packages/chrome-extension/extension/popup/popup.html

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Qwen CLI Chrome Extension</title>
+    <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="logo">
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                <h1>Qwen CLI Chrome Extension</h1>
+            </div>
+            <div class="status-indicator" id="statusIndicator">
+                <span class="status-dot"></span>
+                <span class="status-text">Disconnected</span>
+            </div>
+        </header>
+
+        <!-- Connection Section -->
+        <section class="section connection-section">
+            <h2>Connection</h2>
+            <div class="connection-controls">
+                <button id="connectBtn" class="btn btn-primary">
+                    Connect to Qwen CLI
+                </button>
+                <button id="startQwenBtn" class="btn btn-secondary" disabled>
+                    Start Qwen CLI
+                </button>
+            </div>
+            <div id="connectionError" class="error-message" style="display: none;"></div>
+        </section>
+
+        <!-- Actions Section -->
+        <section class="section actions-section">
+            <h2>Quick Actions</h2>
+            <div class="action-buttons">
+                <button id="extractDataBtn" class="action-btn" disabled>
+                    <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    Extract Page Data
+                </button>
+
+                <button id="captureScreenBtn" class="action-btn" disabled>
+                    <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                    Capture Screenshot
+                </button>
+
+                <button id="analyzePageBtn" class="action-btn" disabled>
+                    <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                    Analyze with AI
+                </button>
+
+                <button id="getSelectedBtn" class="action-btn" disabled>
+                    <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                    </svg>
+                    Send Selected Text
+                </button>
+
+                <button id="networkLogsBtn" class="action-btn" disabled>
+                    <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
+                    </svg>
+                    Network Logs
+                </button>
+
+                <button id="consoleLogsBtn" class="action-btn" disabled>
+                    <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    Console Logs
+                </button>
+            </div>
+        </section>
+
+        <!-- Response Section -->
+        <section class="section response-section" id="responseSection" style="display: none;">
+            <h2>Response</h2>
+            <div class="response-container">
+                <div class="response-header">
+                    <span id="responseType" class="response-type"></span>
+                    <button id="copyResponseBtn" class="btn-icon" title="Copy to clipboard">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                        </svg>
+                    </button>
+                </div>
+                <pre id="responseContent" class="response-content"></pre>
+            </div>
+        </section>
+
+        <!-- Settings Section -->
+        <section class="section settings-section">
+            <details>
+                <summary>Advanced Settings</summary>
+                <div class="settings-content">
+                    <div class="setting-item">
+                        <label for="mcpServers">MCP Servers:</label>
+                        <input type="text" id="mcpServers" placeholder="chrome-devtools,playwright" />
+                    </div>
+                    <div class="setting-item">
+                        <label for="httpPort">HTTP Port:</label>
+                        <input type="number" id="httpPort" placeholder="8080" value="8080" />
+                    </div>
+                    <div class="setting-item">
+                        <label for="autoConnect">
+                            <input type="checkbox" id="autoConnect" />
+                            Auto-connect on startup
+                        </label>
+                    </div>
+                    <button id="saveSettingsBtn" class="btn btn-small">Save Settings</button>
+                </div>
+            </details>
+        </section>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <a href="#" id="openOptionsBtn">Options</a>
+            <span>•</span>
+            <a href="#" id="helpBtn">Help</a>
+            <span>•</span>
+            <span class="version">v1.0.0</span>
+        </footer>
+    </div>
+
+    <script src="popup.js"></script>
+</body>
+</html>

packages/chrome-extension/extension/popup/popup.js

@@ -0,0 +1,523 @@
+/**
+ * Popup Script for Qwen CLI Chrome Extension
+ * Handles UI interactions and communication with background script
+ */
+
+// UI Elements
+const statusIndicator = document.getElementById('statusIndicator');
+const statusText = statusIndicator.querySelector('.status-text');
+const connectBtn = document.getElementById('connectBtn');
+const startQwenBtn = document.getElementById('startQwenBtn');
+const connectionError = document.getElementById('connectionError');
+const responseSection = document.getElementById('responseSection');
+const responseType = document.getElementById('responseType');
+const responseContent = document.getElementById('responseContent');
+const copyResponseBtn = document.getElementById('copyResponseBtn');
+
+// Action buttons
+const extractDataBtn = document.getElementById('extractDataBtn');
+const captureScreenBtn = document.getElementById('captureScreenBtn');
+const analyzePageBtn = document.getElementById('analyzePageBtn');
+const getSelectedBtn = document.getElementById('getSelectedBtn');
+const networkLogsBtn = document.getElementById('networkLogsBtn');
+const consoleLogsBtn = document.getElementById('consoleLogsBtn');
+
+// Settings
+const mcpServersInput = document.getElementById('mcpServers');
+const httpPortInput = document.getElementById('httpPort');
+const autoConnectCheckbox = document.getElementById('autoConnect');
+const saveSettingsBtn = document.getElementById('saveSettingsBtn');
+
+// Footer links
+const openOptionsBtn = document.getElementById('openOptionsBtn');
+const helpBtn = document.getElementById('helpBtn');
+
+// State
+let isConnected = false;
+let qwenStatus = 'disconnected';
+
+// Initialize popup
+document.addEventListener('DOMContentLoaded', async () => {
+  await loadSettings();
+  await checkConnectionStatus();
+
+  // Auto-connect if enabled
+  const settings = await chrome.storage.local.get(['autoConnect']);
+  if (settings.autoConnect && !isConnected) {
+    connectToQwen();
+  }
+});
+
+// Load saved settings
+async function loadSettings() {
+  const settings = await chrome.storage.local.get([
+    'mcpServers',
+    'httpPort',
+    'autoConnect'
+  ]);
+
+  if (settings.mcpServers) {
+    mcpServersInput.value = settings.mcpServers;
+  }
+  if (settings.httpPort) {
+    httpPortInput.value = settings.httpPort;
+  }
+  if (settings.autoConnect !== undefined) {
+    autoConnectCheckbox.checked = settings.autoConnect;
+  }
+}
+
+// Save settings
+saveSettingsBtn.addEventListener('click', async () => {
+  await chrome.storage.local.set({
+    mcpServers: mcpServersInput.value,
+    httpPort: parseInt(httpPortInput.value) || 8080,
+    autoConnect: autoConnectCheckbox.checked
+  });
+
+  saveSettingsBtn.textContent = 'Saved!';
+  setTimeout(() => {
+    saveSettingsBtn.textContent = 'Save Settings';
+  }, 2000);
+});
+
+// Check connection status
+async function checkConnectionStatus() {
+  try {
+    const response = await chrome.runtime.sendMessage({ type: 'GET_STATUS' });
+    updateConnectionStatus(response.connected, response.status);
+  } catch (error) {
+    updateConnectionStatus(false, 'disconnected');
+  }
+}
+
+// Update UI based on connection status
+function updateConnectionStatus(connected, status) {
+  isConnected = connected;
+  qwenStatus = status;
+
+  // Update status indicator
+  statusIndicator.classList.toggle('connected', connected);
+  statusIndicator.classList.toggle('connecting', status === 'connecting');
+  statusText.textContent = getStatusText(status);
+
+  // Update button states
+  connectBtn.textContent = connected ? 'Disconnect' : 'Connect to Qwen CLI';
+  connectBtn.classList.toggle('btn-danger', connected);
+
+  startQwenBtn.disabled = !connected || status === 'running';
+
+  // Enable/disable action buttons
+  const actionButtons = [
+    extractDataBtn,
+    captureScreenBtn,
+    analyzePageBtn,
+    getSelectedBtn,
+    networkLogsBtn,
+    consoleLogsBtn
+  ];
+
+  actionButtons.forEach(btn => {
+    btn.disabled = !connected || status !== 'running';
+  });
+}
+
+// Get human-readable status text
+function getStatusText(status) {
+  switch (status) {
+    case 'connected':
+      return 'Connected';
+    case 'running':
+      return 'Qwen CLI Running';
+    case 'connecting':
+      return 'Connecting...';
+    case 'disconnected':
+      return 'Disconnected';
+    case 'stopped':
+      return 'Qwen CLI Stopped';
+    default:
+      return 'Unknown';
+  }
+}
+
+// Connect button handler
+connectBtn.addEventListener('click', () => {
+  if (isConnected) {
+    disconnectFromQwen();
+  } else {
+    connectToQwen();
+  }
+});
+
+// Connect to Qwen CLI
+async function connectToQwen() {
+  updateConnectionStatus(false, 'connecting');
+  connectionError.style.display = 'none';
+
+  try {
+    const response = await chrome.runtime.sendMessage({ type: 'CONNECT' });
+
+    if (response.success) {
+      updateConnectionStatus(true, response.status);
+    } else {
+      throw new Error(response.error || 'Connection failed');
+    }
+  } catch (error) {
+    console.error('Connection error:', error);
+    connectionError.textContent = `Error: ${error.message}`;
+    connectionError.style.display = 'block';
+    updateConnectionStatus(false, 'disconnected');
+  }
+}
+
+// Disconnect from Qwen CLI
+function disconnectFromQwen() {
+  // Simply close the popup to disconnect
+  // The native port will be closed when the extension unloads
+  updateConnectionStatus(false, 'disconnected');
+  window.close();
+}
+
+// Start Qwen CLI button handler
+startQwenBtn.addEventListener('click', async () => {
+  startQwenBtn.disabled = true;
+  startQwenBtn.textContent = 'Starting...';
+
+  try {
+    const settings = await chrome.storage.local.get(['mcpServers', 'httpPort']);
+    const response = await chrome.runtime.sendMessage({
+      type: 'START_QWEN_CLI',
+      config: {
+        mcpServers: settings.mcpServers ? settings.mcpServers.split(',').map(s => s.trim()) : [],
+        httpPort: settings.httpPort || 8080
+      }
+    });
+
+    if (response.success) {
+      updateConnectionStatus(true, 'running');
+      showResponse('Qwen CLI Started', response.data || 'Successfully started');
+    } else {
+      throw new Error(response.error || 'Failed to start Qwen CLI');
+    }
+  } catch (error) {
+    console.error('Start error:', error);
+    connectionError.textContent = `Error: ${error.message}`;
+    connectionError.style.display = 'block';
+  } finally {
+    startQwenBtn.textContent = 'Start Qwen CLI';
+  }
+});
+
+// Extract page data button handler
+extractDataBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Extracting page data...');
+
+    const response = await chrome.runtime.sendMessage({
+      type: 'EXTRACT_PAGE_DATA'
+    });
+
+    if (response.success) {
+      // Send to Qwen CLI
+      const qwenResponse = await chrome.runtime.sendMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'analyze_page',
+        data: response.data
+      });
+
+      if (qwenResponse.success) {
+        showResponse('Page Analysis', qwenResponse.data);
+      } else {
+        throw new Error(qwenResponse.error);
+      }
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    showError(`Failed to extract data: ${error.message}`);
+  }
+});
+
+// Capture screenshot button handler
+captureScreenBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Capturing screenshot...');
+
+    const response = await chrome.runtime.sendMessage({
+      type: 'CAPTURE_SCREENSHOT'
+    });
+
+    if (response.success) {
+      // Send to Qwen CLI
+      const qwenResponse = await chrome.runtime.sendMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'analyze_screenshot',
+        data: {
+          screenshot: response.data,
+          url: (await chrome.tabs.query({ active: true, currentWindow: true }))[0].url
+        }
+      });
+
+      if (qwenResponse.success) {
+        showResponse('Screenshot Analysis', qwenResponse.data);
+      } else {
+        throw new Error(qwenResponse.error);
+      }
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    showError(`Failed to capture screenshot: ${error.message}`);
+  }
+});
+
+// Analyze page with AI button handler
+analyzePageBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Analyzing page with AI...');
+
+    // First extract page data
+    const extractResponse = await chrome.runtime.sendMessage({
+      type: 'EXTRACT_PAGE_DATA'
+    });
+
+    if (!extractResponse.success) {
+      throw new Error(extractResponse.error);
+    }
+
+    // Send to Qwen for AI analysis
+    const qwenResponse = await chrome.runtime.sendMessage({
+      type: 'SEND_TO_QWEN',
+      action: 'ai_analyze',
+      data: {
+        pageData: extractResponse.data,
+        prompt: 'Please analyze this webpage and provide insights about its content, purpose, and any notable features.'
+      }
+    });
+
+    if (qwenResponse.success) {
+      showResponse('AI Analysis', qwenResponse.data);
+    } else {
+      throw new Error(qwenResponse.error);
+    }
+  } catch (error) {
+    showError(`Analysis failed: ${error.message}`);
+  }
+});
+
+// Get selected text button handler
+getSelectedBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Getting selected text...');
+
+    // Get active tab
+    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+    const tab = tabs[0];
+
+    if (!tab) {
+      throw new Error('No active tab found');
+    }
+
+    // Check if we can access this page
+    if (tab.url && (tab.url.startsWith('chrome://') ||
+        tab.url.startsWith('chrome-extension://') ||
+        tab.url.startsWith('edge://') ||
+        tab.url.startsWith('about:'))) {
+      throw new Error('Cannot access this page (browser internal page)');
+    }
+
+    // Try to inject content script first
+    try {
+      await chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        files: ['content/content-script.js']
+      });
+    } catch (injectError) {
+      console.log('Script injection skipped:', injectError.message);
+    }
+
+    // Get selected text from content script
+    let response;
+    try {
+      response = await chrome.tabs.sendMessage(tab.id, {
+        type: 'GET_SELECTED_TEXT'
+      });
+    } catch (msgError) {
+      throw new Error('Cannot connect to page. Please refresh the page and try again.');
+    }
+
+    if (response.success && response.data) {
+      // Send to Qwen CLI
+      const qwenResponse = await chrome.runtime.sendMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'process_text',
+        data: {
+          text: response.data,
+          context: 'selected_text'
+        }
+      });
+
+      if (qwenResponse.success) {
+        showResponse('Selected Text Processed', qwenResponse.data);
+      } else {
+        throw new Error(qwenResponse.error);
+      }
+    } else {
+      showError('No text selected. Please select some text on the page first.');
+    }
+  } catch (error) {
+    showError(`Failed to process selected text: ${error.message}`);
+  }
+});
+
+// Network logs button handler
+networkLogsBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Getting network logs...');
+
+    const response = await chrome.runtime.sendMessage({
+      type: 'GET_NETWORK_LOGS'
+    });
+
+    if (response.success) {
+      showResponse('Network Logs', JSON.stringify(response.data, null, 2));
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    showError(`Failed to get network logs: ${error.message}`);
+  }
+});
+
+// Console logs button handler
+consoleLogsBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Getting console logs...');
+
+    // Get active tab
+    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+    const tab = tabs[0];
+
+    if (!tab) {
+      throw new Error('No active tab found');
+    }
+
+    // Check if we can access this page
+    if (tab.url && (tab.url.startsWith('chrome://') ||
+        tab.url.startsWith('chrome-extension://') ||
+        tab.url.startsWith('edge://') ||
+        tab.url.startsWith('about:'))) {
+      throw new Error('Cannot access this page (browser internal page)');
+    }
+
+    // Try to inject content script first
+    try {
+      await chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        files: ['content/content-script.js']
+      });
+    } catch (injectError) {
+      console.log('Script injection skipped:', injectError.message);
+    }
+
+    // Get console logs from content script
+    let response;
+    try {
+      response = await chrome.tabs.sendMessage(tab.id, {
+        type: 'EXTRACT_DATA'
+      });
+    } catch (msgError) {
+      throw new Error('Cannot connect to page. Please refresh the page and try again.');
+    }
+
+    if (response.success) {
+      const consoleLogs = response.data.consoleLogs || [];
+      if (consoleLogs.length > 0) {
+        showResponse('Console Logs', JSON.stringify(consoleLogs, null, 2));
+      } else {
+        showResponse('Console Logs', 'No console logs captured');
+      }
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    showError(`Failed to get console logs: ${error.message}`);
+  }
+});
+
+// Copy response button handler
+copyResponseBtn.addEventListener('click', () => {
+  const text = responseContent.textContent;
+  navigator.clipboard.writeText(text).then(() => {
+    const originalTitle = copyResponseBtn.title;
+    copyResponseBtn.title = 'Copied!';
+    setTimeout(() => {
+      copyResponseBtn.title = originalTitle;
+    }, 2000);
+  });
+});
+
+// Footer link handlers
+openOptionsBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+  // Use try-catch to handle potential errors
+  try {
+    chrome.runtime.openOptionsPage(() => {
+      if (chrome.runtime.lastError) {
+        // If opening options page fails, open it in a new tab as fallback
+        console.error('Error opening options page:', chrome.runtime.lastError);
+        chrome.tabs.create({
+          url: chrome.runtime.getURL('options/options.html')
+        });
+      }
+    });
+  } catch (error) {
+    console.error('Failed to open options page:', error);
+    // Fallback: open in new tab
+    chrome.tabs.create({
+      url: chrome.runtime.getURL('options/options.html')
+    });
+  }
+});
+
+helpBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+  chrome.tabs.create({
+    url: 'https://github.com/QwenLM/qwen-code/tree/main/packages/chrome-extension',
+  });
+});
+
+// Helper functions
+function showLoading(message) {
+  responseSection.style.display = 'block';
+  responseType.textContent = 'Loading';
+  responseContent.textContent = message;
+  responseSection.classList.add('loading');
+}
+
+function showResponse(type, content) {
+  responseSection.style.display = 'block';
+  responseType.textContent = type;
+  responseContent.textContent = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
+  responseSection.classList.remove('loading');
+  responseSection.classList.add('fade-in');
+}
+
+function showError(message) {
+  responseSection.style.display = 'block';
+  responseType.textContent = 'Error';
+  responseType.style.color = '#c00';
+  responseContent.textContent = message;
+  responseSection.classList.remove('loading');
+}
+
+// Listen for status updates from background
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'STATUS_UPDATE') {
+    updateConnectionStatus(message.status !== 'disconnected', message.status);
+  } else if (message.type === 'QWEN_EVENT') {
+    // Handle events from Qwen CLI
+    console.log('Qwen event received:', message.event);
+    // Could update UI based on event
+  }
+});

packages/chrome-extension/extension/sidepanel/sidepanel.css

@@ -0,0 +1,402 @@
+/* Side Panel Styles for Qwen CLI Chrome Extension */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #333;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.container {
+    background: white;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+.header {
+    padding: 16px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.logo .icon {
+    width: 24px;
+    height: 24px;
+}
+
+.logo h1 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+/* Status Indicator */
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    font-size: 12px;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #ff4444;
+    animation: pulse 2s infinite;
+}
+
+.status-indicator.connected .status-dot {
+    background: #44ff44;
+}
+
+.status-indicator.connecting .status-dot {
+    background: #ffaa44;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+/* Sections */
+.section {
+    padding: 16px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.section:last-of-type {
+    border-bottom: none;
+}
+
+.section h2 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+}
+
+/* Buttons */
+.btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+    background: #f5f5f5;
+    color: #333;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: #e5e5e5;
+}
+
+.btn-small {
+    padding: 4px 12px;
+    font-size: 12px;
+}
+
+.btn-icon {
+    width: 32px;
+    height: 32px;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background 0.2s;
+}
+
+.btn-icon:hover {
+    background: #f5f5f5;
+}
+
+.btn-icon svg {
+    width: 100%;
+    height: 100%;
+    stroke: #666;
+}
+
+/* Connection Section */
+.connection-controls {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.error-message {
+    margin-top: 8px;
+    padding: 8px;
+    background: #fee;
+    color: #c00;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+/* Action Buttons */
+.action-buttons {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+}
+
+.action-btn {
+    padding: 12px;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    background: white;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #666;
+}
+
+.action-btn:hover:not(:disabled) {
+    border-color: #667eea;
+    background: #f8f9ff;
+    color: #667eea;
+}
+
+.action-btn:hover:not(:disabled) .action-icon {
+    stroke: #667eea;
+}
+
+.action-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.action-icon {
+    width: 24px;
+    height: 24px;
+    stroke: #999;
+}
+
+/* Response Section */
+.response-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.response-container {
+    background: #f9f9f9;
+    border-radius: 8px;
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.response-header {
+    padding: 8px 12px;
+    background: #f0f0f0;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.response-type {
+    font-size: 12px;
+    font-weight: 600;
+    color: #666;
+}
+
+.response-content {
+    padding: 12px;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 12px;
+    color: #333;
+    flex: 1;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 400px;
+}
+
+/* Settings Section */
+.settings-section details {
+    cursor: pointer;
+}
+
+.settings-section summary {
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 4px 0;
+    user-select: none;
+}
+
+.settings-section summary:hover {
+    color: #667eea;
+}
+
+.settings-content {
+    margin-top: 12px;
+}
+
+.setting-item {
+    margin-bottom: 12px;
+}
+
+.setting-item label {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 12px;
+    color: #666;
+}
+
+.setting-item input[type="text"],
+.setting-item input[type="number"] {
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.setting-item input[type="checkbox"] {
+    margin-right: 8px;
+}
+
+/* Footer */
+.footer {
+    padding: 12px 16px;
+    background: #f9f9f9;
+    border-top: 1px solid #e5e5e5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #999;
+    margin-top: auto;
+}
+
+.footer a {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.version {
+    color: #bbb;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* Loading state */
+.loading {
+    position: relative;
+    pointer-events: none;
+}
+
+.loading::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease;
+}

packages/chrome-extension/extension/sidepanel/sidepanel.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Qwen Code</title>
+    <style>
+        /* Base reset and full-height container */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        html, body, #root {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background-color: #1e1e1e;
+            color: #e0e0e0;
+        }
+        /* Loading state */
+        .loading-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            gap: 16px;
+        }
+        .loading-spinner {
+            width: 32px;
+            height: 32px;
+            border: 3px solid #333;
+            border-top-color: #615fff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .loading-text {
+            color: #888;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="root">
+        <div class="loading-container">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Loading Qwen Code...</div>
+        </div>
+    </div>
+    <script>
+        // Inject extension URI for resource loading
+        try {
+            const extensionUri = chrome.runtime.getURL('');
+            document.body.setAttribute('data-extension-uri', extensionUri);
+            window.__EXTENSION_URI__ = extensionUri;
+        } catch (e) {
+            console.warn('Failed to inject extension URI:', e);
+        }
+    </script>
+    <script src="dist/sidepanel-app.js"></script>
+</body>
+</html>

packages/chrome-extension/extension/sidepanel/sidepanel.js

@@ -0,0 +1,480 @@
+/**
+ * Side Panel Script for Qwen CLI Chrome Extension
+ * Handles UI interactions and communication with background script
+ */
+
+// UI Elements
+const statusIndicator = document.getElementById('statusIndicator');
+const statusText = statusIndicator.querySelector('.status-text');
+const connectBtn = document.getElementById('connectBtn');
+const startQwenBtn = document.getElementById('startQwenBtn');
+const connectionError = document.getElementById('connectionError');
+const responseSection = document.getElementById('responseSection');
+const responseType = document.getElementById('responseType');
+const responseContent = document.getElementById('responseContent');
+const copyResponseBtn = document.getElementById('copyResponseBtn');
+
+// Action buttons
+const extractDataBtn = document.getElementById('extractDataBtn');
+const captureScreenBtn = document.getElementById('captureScreenBtn');
+const analyzePageBtn = document.getElementById('analyzePageBtn');
+const getSelectedBtn = document.getElementById('getSelectedBtn');
+const networkLogsBtn = document.getElementById('networkLogsBtn');
+const consoleLogsBtn = document.getElementById('consoleLogsBtn');
+
+// Settings
+const mcpServersInput = document.getElementById('mcpServers');
+const httpPortInput = document.getElementById('httpPort');
+const autoConnectCheckbox = document.getElementById('autoConnect');
+const saveSettingsBtn = document.getElementById('saveSettingsBtn');
+
+// Footer links
+const openOptionsBtn = document.getElementById('openOptionsBtn');
+const helpBtn = document.getElementById('helpBtn');
+
+// State
+let isConnected = false;
+let qwenStatus = 'disconnected';
+
+// Initialize side panel
+document.addEventListener('DOMContentLoaded', async () => {
+  await loadSettings();
+  await checkConnectionStatus();
+
+  // Auto-connect if enabled
+  const settings = await chrome.storage.local.get(['autoConnect']);
+  if (settings.autoConnect && !isConnected) {
+    connectToQwen();
+  }
+});
+
+// Load saved settings
+async function loadSettings() {
+  const settings = await chrome.storage.local.get([
+    'mcpServers',
+    'httpPort',
+    'autoConnect'
+  ]);
+
+  if (settings.mcpServers) {
+    mcpServersInput.value = settings.mcpServers;
+  }
+  if (settings.httpPort) {
+    httpPortInput.value = settings.httpPort;
+  }
+  if (settings.autoConnect !== undefined) {
+    autoConnectCheckbox.checked = settings.autoConnect;
+  }
+}
+
+// Save settings
+saveSettingsBtn.addEventListener('click', async () => {
+  await chrome.storage.local.set({
+    mcpServers: mcpServersInput.value,
+    httpPort: parseInt(httpPortInput.value) || 8080,
+    autoConnect: autoConnectCheckbox.checked
+  });
+
+  saveSettingsBtn.textContent = 'Saved!';
+  setTimeout(() => {
+    saveSettingsBtn.textContent = 'Save Settings';
+  }, 2000);
+});
+
+// Check connection status
+async function checkConnectionStatus() {
+  try {
+    const response = await chrome.runtime.sendMessage({ type: 'GET_STATUS' });
+    updateConnectionStatus(response.connected, response.status);
+  } catch (error) {
+    updateConnectionStatus(false, 'disconnected');
+  }
+}
+
+// Update UI based on connection status
+function updateConnectionStatus(connected, status) {
+  isConnected = connected;
+  qwenStatus = status;
+
+  // Update status indicator
+  statusIndicator.classList.toggle('connected', connected);
+  statusIndicator.classList.toggle('connecting', status === 'connecting');
+  statusText.textContent = getStatusText(status);
+
+  // Update button states
+  connectBtn.textContent = connected ? 'Disconnect' : 'Connect to Qwen CLI';
+  connectBtn.classList.toggle('btn-danger', connected);
+
+  startQwenBtn.disabled = !connected || status === 'running';
+
+  // Enable/disable action buttons
+  const actionButtons = [
+    extractDataBtn,
+    captureScreenBtn,
+    analyzePageBtn,
+    getSelectedBtn,
+    networkLogsBtn,
+    consoleLogsBtn
+  ];
+
+  actionButtons.forEach(btn => {
+    btn.disabled = !connected || status !== 'running';
+  });
+}
+
+// Get human-readable status text
+function getStatusText(status) {
+  switch (status) {
+    case 'connected':
+      return 'Connected';
+    case 'running':
+      return 'Qwen CLI Running';
+    case 'connecting':
+      return 'Connecting...';
+    case 'disconnected':
+      return 'Disconnected';
+    case 'stopped':
+      return 'Qwen CLI Stopped';
+    default:
+      return 'Unknown';
+  }
+}
+
+// Connect button handler
+connectBtn.addEventListener('click', () => {
+  if (isConnected) {
+    disconnectFromQwen();
+  } else {
+    connectToQwen();
+  }
+});
+
+// Connect to Qwen CLI
+async function connectToQwen() {
+  updateConnectionStatus(false, 'connecting');
+  connectionError.style.display = 'none';
+
+  try {
+    const response = await chrome.runtime.sendMessage({ type: 'CONNECT' });
+
+    if (response.success) {
+      updateConnectionStatus(true, response.status);
+    } else {
+      throw new Error(response.error || 'Connection failed');
+    }
+  } catch (error) {
+    console.error('Connection error:', error);
+    connectionError.textContent = `Error: ${error.message}`;
+    connectionError.style.display = 'block';
+    updateConnectionStatus(false, 'disconnected');
+  }
+}
+
+// Disconnect from Qwen CLI
+async function disconnectFromQwen() {
+  try {
+    await chrome.runtime.sendMessage({ type: 'DISCONNECT' });
+  } catch (error) {
+    console.error('Disconnect error:', error);
+  }
+  updateConnectionStatus(false, 'disconnected');
+}
+
+// Start Qwen CLI button handler
+startQwenBtn.addEventListener('click', async () => {
+  startQwenBtn.disabled = true;
+  startQwenBtn.textContent = 'Starting...';
+
+  try {
+    const settings = await chrome.storage.local.get(['mcpServers', 'httpPort']);
+    const response = await chrome.runtime.sendMessage({
+      type: 'START_QWEN_CLI',
+      config: {
+        mcpServers: settings.mcpServers ? settings.mcpServers.split(',').map(s => s.trim()) : [],
+        httpPort: settings.httpPort || 8080
+      }
+    });
+
+    if (response.success) {
+      updateConnectionStatus(true, 'running');
+      showResponse('Qwen CLI Started', response.data || 'Successfully started');
+    } else {
+      throw new Error(response.error || 'Failed to start Qwen CLI');
+    }
+  } catch (error) {
+    console.error('Start error:', error);
+    connectionError.textContent = `Error: ${error.message}`;
+    connectionError.style.display = 'block';
+  } finally {
+    startQwenBtn.textContent = 'Start Qwen CLI';
+  }
+});
+
+// Extract page data button handler
+extractDataBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Extracting page data...');
+
+    const response = await chrome.runtime.sendMessage({
+      type: 'EXTRACT_PAGE_DATA'
+    });
+
+    if (response.success) {
+      // Send to Qwen CLI
+      const qwenResponse = await chrome.runtime.sendMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'analyze_page',
+        data: response.data
+      });
+
+      if (qwenResponse.success) {
+        showResponse('Page Analysis', qwenResponse.data);
+      } else {
+        throw new Error(qwenResponse.error);
+      }
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    showError(`Failed to extract data: ${error.message}`);
+  }
+});
+
+// Capture screenshot button handler
+captureScreenBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Capturing screenshot...');
+
+    const response = await chrome.runtime.sendMessage({
+      type: 'CAPTURE_SCREENSHOT'
+    });
+
+    if (response.success) {
+      // Send to Qwen CLI
+      const qwenResponse = await chrome.runtime.sendMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'analyze_screenshot',
+        data: {
+          screenshot: response.data,
+          url: (await chrome.tabs.query({ active: true, currentWindow: true }))[0].url
+        }
+      });
+
+      if (qwenResponse.success) {
+        showResponse('Screenshot Analysis', qwenResponse.data);
+      } else {
+        throw new Error(qwenResponse.error);
+      }
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    showError(`Failed to capture screenshot: ${error.message}`);
+  }
+});
+
+// Analyze page with AI button handler
+analyzePageBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Analyzing page with AI...');
+
+    // First extract page data
+    const extractResponse = await chrome.runtime.sendMessage({
+      type: 'EXTRACT_PAGE_DATA'
+    });
+
+    if (!extractResponse.success) {
+      throw new Error(extractResponse.error);
+    }
+
+    // Send to Qwen for AI analysis
+    const qwenResponse = await chrome.runtime.sendMessage({
+      type: 'SEND_TO_QWEN',
+      action: 'ai_analyze',
+      data: {
+        pageData: extractResponse.data,
+        prompt: 'Please analyze this webpage and provide insights about its content, purpose, and any notable features.'
+      }
+    });
+
+    if (qwenResponse.success) {
+      showResponse('AI Analysis', qwenResponse.data);
+    } else {
+      throw new Error(qwenResponse.error);
+    }
+  } catch (error) {
+    showError(`Analysis failed: ${error.message}`);
+  }
+});
+
+// Get selected text button handler
+getSelectedBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Getting selected text...');
+
+    // Get active tab
+    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+    const tab = tabs[0];
+
+    if (!tab) {
+      throw new Error('No active tab found');
+    }
+
+    // Get selected text from content script
+    const response = await chrome.tabs.sendMessage(tab.id, {
+      type: 'GET_SELECTED_TEXT'
+    });
+
+    if (response.success && response.data) {
+      // Send to Qwen CLI
+      const qwenResponse = await chrome.runtime.sendMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'process_text',
+        data: {
+          text: response.data,
+          context: 'selected_text'
+        }
+      });
+
+      if (qwenResponse.success) {
+        showResponse('Selected Text Processed', qwenResponse.data);
+      } else {
+        throw new Error(qwenResponse.error);
+      }
+    } else {
+      showError('No text selected. Please select some text on the page first.');
+    }
+  } catch (error) {
+    showError(`Failed to process selected text: ${error.message}`);
+  }
+});
+
+// Network logs button handler
+networkLogsBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Getting network logs...');
+
+    const response = await chrome.runtime.sendMessage({
+      type: 'GET_NETWORK_LOGS'
+    });
+
+    if (response.success) {
+      showResponse('Network Logs', JSON.stringify(response.data, null, 2));
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    showError(`Failed to get network logs: ${error.message}`);
+  }
+});
+
+// Console logs button handler
+consoleLogsBtn.addEventListener('click', async () => {
+  try {
+    showLoading('Getting console logs...');
+
+    // Get active tab
+    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+    const tab = tabs[0];
+
+    if (!tab) {
+      throw new Error('No active tab found');
+    }
+
+    // Get console logs from content script
+    const response = await chrome.tabs.sendMessage(tab.id, {
+      type: 'EXTRACT_DATA'
+    });
+
+    if (response.success) {
+      const consoleLogs = response.data.consoleLogs || [];
+      if (consoleLogs.length > 0) {
+        showResponse('Console Logs', JSON.stringify(consoleLogs, null, 2));
+      } else {
+        showResponse('Console Logs', 'No console logs captured');
+      }
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    showError(`Failed to get console logs: ${error.message}`);
+  }
+});
+
+// Copy response button handler
+copyResponseBtn.addEventListener('click', () => {
+  const text = responseContent.textContent;
+  navigator.clipboard.writeText(text).then(() => {
+    const originalTitle = copyResponseBtn.title;
+    copyResponseBtn.title = 'Copied!';
+    setTimeout(() => {
+      copyResponseBtn.title = originalTitle;
+    }, 2000);
+  });
+});
+
+// Footer link handlers
+openOptionsBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+  // Use try-catch to handle potential errors
+  try {
+    chrome.runtime.openOptionsPage(() => {
+      if (chrome.runtime.lastError) {
+        // If opening options page fails, open it in a new tab as fallback
+        console.error('Error opening options page:', chrome.runtime.lastError);
+        chrome.tabs.create({
+          url: chrome.runtime.getURL('options/options.html')
+        });
+      }
+    });
+  } catch (error) {
+    console.error('Failed to open options page:', error);
+    // Fallback: open in new tab
+    chrome.tabs.create({
+      url: chrome.runtime.getURL('options/options.html')
+    });
+  }
+});
+
+helpBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+  chrome.tabs.create({
+    url: 'https://github.com/QwenLM/qwen-code/tree/main/packages/chrome-extension',
+  });
+});
+
+// Helper functions
+function showLoading(message) {
+  responseSection.style.display = 'block';
+  responseType.textContent = 'Loading';
+  responseContent.textContent = message;
+  responseSection.classList.add('loading');
+}
+
+function showResponse(type, content) {
+  responseSection.style.display = 'block';
+  responseType.textContent = type;
+  responseType.style.color = '#666';
+  responseContent.textContent = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
+  responseSection.classList.remove('loading');
+  responseSection.classList.add('fade-in');
+}
+
+function showError(message) {
+  responseSection.style.display = 'block';
+  responseType.textContent = 'Error';
+  responseType.style.color = '#c00';
+  responseContent.textContent = message;
+  responseSection.classList.remove('loading');
+}
+
+// Listen for status updates from background
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'STATUS_UPDATE') {
+    updateConnectionStatus(message.status !== 'disconnected', message.status);
+  } else if (message.type === 'QWEN_EVENT') {
+    // Handle events from Qwen CLI
+    console.log('Qwen event received:', message.event);
+    // Could update UI based on event
+  }
+});

packages/chrome-extension/native-host/.extension-id

@@ -0,0 +1 @@
+kbpfhhpfobobomiighfkhojhmefogdgh

packages/chrome-extension/native-host/config/com.qwen.bridge.json.template

@@ -0,0 +1,9 @@
+{
+  "name": "com.qwen.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "__PATH__",
+  "type": "stdio",
+  "allowed_origins": [
+    "__EXTENSION_ID__"
+  ]
+}

packages/chrome-extension/native-host/host.js

@@ -0,0 +1,7 @@
+#!/usr/local/bin/node
+
+/**
+ * Native host entry point
+ * Delegates to the single source of truth in src/host.js
+ */
+require('./src/host.js');

packages/chrome-extension/native-host/manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "com.qwen.cli.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "HOST_PATH",
+  "type": "stdio",
+  "allowed_origins": ["chrome-extension://YOUR_EXTENSION_ID/"]
+}

packages/chrome-extension/native-host/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "qwen-cli-bridge-host",
+  "version": "1.0.0",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "main": "host.js",
+  "scripts": {
+    "test": "node host.js --test"
+  },
+  "keywords": [
+    "chrome-extension",
+    "native-messaging",
+    "qwen",
+    "cli",
+    "bridge"
+  ],
+  "author": "",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

packages/chrome-extension/native-host/scripts/host-wrapper.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+# 添加必要的 PATH
+export PATH="/usr/local/bin:/Users/yiliang/.npm-global/bin:$PATH"
+
+SCRIPT_DIR="$( cd "$( dirname "$0" )" && pwd )"
+HOST_SCRIPT="$SCRIPT_DIR/../host.js"
+
+LOG="/var/folders/sy/9mwf8c3n2b57__q35fyxwdhh0000gp/T/qwen-wrapper.log"
+echo "$(date): Wrapper started" >> "$LOG"
+echo "$(date): PATH=$PATH" >> "$LOG"
+
+# 使用完整路径运行 node
+exec /usr/local/bin/node "$HOST_SCRIPT" 2>> "$LOG"

packages/chrome-extension/native-host/scripts/host.bat

@@ -0,0 +1,2 @@
+@echo off
+node "%~dp0..\\host.js" %*

packages/chrome-extension/native-host/scripts/install.bat

@@ -0,0 +1,99 @@
+@echo off
+setlocal enabledelayedexpansion
+
+REM Qwen CLI Chrome Extension - Native Host Installation Script for Windows
+REM This script installs the Native Messaging host for the Chrome extension
+
+echo ========================================
+echo Qwen CLI Chrome Extension - Native Host Installer
+echo ========================================
+echo.
+
+REM Set variables
+set HOST_NAME=com.qwen.cli.bridge
+set SCRIPT_DIR=%~dp0
+set HOST_SCRIPT=%SCRIPT_DIR%host.bat
+set HOST_JS=%SCRIPT_DIR%..\host.js
+
+REM Check if Node.js is installed
+where node >nul 2>nul
+if %ERRORLEVEL% NEQ 0 (
+    echo Error: Node.js is not installed
+    echo Please install Node.js from https://nodejs.org/
+    pause
+    exit /b 1
+)
+
+REM Check if qwen CLI is installed
+where qwen >nul 2>nul
+if %ERRORLEVEL% NEQ 0 (
+    echo Warning: qwen CLI is not installed
+    echo Please install qwen CLI to use all features
+    echo Installation will continue...
+    echo.
+)
+
+REM Check if host files exist
+if not exist "%HOST_SCRIPT%" (
+    echo Error: host.bat not found in %SCRIPT_DIR%
+    pause
+    exit /b 1
+)
+
+if not exist "%HOST_JS%" (
+    echo Error: host.js not found at %HOST_JS%
+    pause
+    exit /b 1
+)
+
+REM Get extension ID
+set /p EXTENSION_ID="Enter your Chrome extension ID (found in chrome://extensions): "
+
+if "%EXTENSION_ID%"=="" (
+    echo Error: Extension ID is required
+    pause
+    exit /b 1
+)
+
+REM Create manifest
+set MANIFEST_FILE=%SCRIPT_DIR%manifest-windows.json
+echo Creating manifest: %MANIFEST_FILE%
+
+(
+echo {
+echo   "name": "%HOST_NAME%",
+echo   "description": "Native messaging host for Qwen CLI Chrome Extension",
+echo   "path": "%HOST_SCRIPT:\=\\%",
+echo   "type": "stdio",
+echo   "allowed_origins": [
+echo     "chrome-extension://%EXTENSION_ID%/"
+echo   ]
+echo }
+) > "%MANIFEST_FILE%"
+
+REM Add registry entry for Chrome
+echo.
+echo Adding registry entry for Chrome...
+reg add "HKCU\Software\Google\Chrome\NativeMessagingHosts\%HOST_NAME%" /ve /t REG_SZ /d "%MANIFEST_FILE%" /f
+
+if %ERRORLEVEL% EQU 0 (
+    echo.
+    echo ✅ Installation complete!
+    echo.
+    echo Next steps:
+    echo 1. Load the Chrome extension in chrome://extensions
+    echo 2. Enable 'Developer mode'
+    echo 3. Click 'Load unpacked' and select: %SCRIPT_DIR%..\extension
+    echo 4. Copy the extension ID and re-run this script if needed
+    echo 5. Click the extension icon and connect to Qwen CLI
+    echo.
+    echo Host manifest: %MANIFEST_FILE%
+    echo Log file location: %%TEMP%%\qwen-bridge-host.log
+) else (
+    echo.
+    echo ❌ Failed to add registry entry
+    echo Please run this script as Administrator
+)
+
+echo.
+pause

packages/chrome-extension/native-host/scripts/install.sh

@@ -0,0 +1,94 @@
+#!/bin/bash
+
+# Qwen CLI Chrome Extension - Native Host Installation Script for macOS/Linux
+# This script installs the Native Messaging host for the Chrome extension
+
+set -e
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+HOST_NAME="com.qwen.cli.bridge"
+HOST_SCRIPT="$SCRIPT_DIR/../host.js"
+
+echo "========================================"
+echo "Qwen CLI Chrome Extension - Native Host Installer"
+echo "========================================"
+echo ""
+
+# Detect OS
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    # macOS
+    TARGET_DIR="$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts"
+    BROWSER="Chrome"
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    # Linux
+    TARGET_DIR="$HOME/.config/google-chrome/NativeMessagingHosts"
+    BROWSER="Chrome"
+else
+    echo "Error: Unsupported operating system"
+    exit 1
+fi
+
+# Check if Node.js is installed
+if ! command -v node &> /dev/null; then
+    echo "Error: Node.js is not installed"
+    echo "Please install Node.js from https://nodejs.org/"
+    exit 1
+fi
+
+# Check if qwen CLI is installed
+if ! command -v qwen &> /dev/null; then
+    echo "Warning: qwen CLI is not installed"
+    echo "Please install qwen CLI to use all features"
+    echo "Installation will continue..."
+    echo ""
+fi
+
+# Create target directory if it doesn't exist
+echo "Creating directory: $TARGET_DIR"
+mkdir -p "$TARGET_DIR"
+
+# Ensure host script exists and is executable
+if [ ! -f "$HOST_SCRIPT" ]; then
+    echo "Error: host.js not found at $HOST_SCRIPT"
+    exit 1
+fi
+chmod +x "$HOST_SCRIPT"
+
+# Create the manifest file with the correct path
+MANIFEST_FILE="$TARGET_DIR/$HOST_NAME.json"
+echo "Creating manifest: $MANIFEST_FILE"
+
+# Get the extension ID (you need to update this after installing the extension)
+read -p "Enter your Chrome extension ID (found in chrome://extensions): " EXTENSION_ID
+
+if [ -z "$EXTENSION_ID" ]; then
+    echo "Error: Extension ID is required"
+    exit 1
+fi
+
+# Create the manifest
+cat > "$MANIFEST_FILE" << EOF
+{
+  "name": "$HOST_NAME",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$HOST_SCRIPT",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://$EXTENSION_ID/"
+  ]
+}
+EOF
+
+echo ""
+echo "✅ Installation complete!"
+echo ""
+echo "Next steps:"
+echo "1. Load the Chrome extension in chrome://extensions"
+echo "2. Enable 'Developer mode'"
+echo "3. Click 'Load unpacked' and select: $SCRIPT_DIR/../extension"
+echo "4. Copy the extension ID and re-run this script if needed"
+echo "5. Click the extension icon and connect to Qwen CLI"
+echo ""
+echo "Host installed at: $MANIFEST_FILE"
+echo "Log file location: /tmp/qwen-bridge-host.log"
+echo ""

packages/chrome-extension/native-host/scripts/run.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Native Host 包装脚本 - 确保 Node.js 环境正确设置
+
+# 获取脚本所在目录
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+# 设置 Node.js 路径 (使用系统中的 node)
+NODE_PATH="/usr/local/bin/node"
+
+# 如果 /usr/local/bin/node 不存在，尝试其他位置
+if [ ! -f "$NODE_PATH" ]; then
+    NODE_PATH=$(which node)
+fi
+
+# 执行 Native Host
+
+# Prefer local CLI build if available and QWEN_CLI_PATH is not set
+if [ -z "$QWEN_CLI_PATH" ]; then
+  LOCAL_CLI="$DIR/../../cli/dist/index.js"
+  if [ -f "$LOCAL_CLI" ]; then
+    export QWEN_CLI_PATH="$LOCAL_CLI"
+  fi
+fi
+
+exec "$NODE_PATH" "$DIR/../host.js"

packages/chrome-extension/native-host/scripts/smart-install.sh

@@ -0,0 +1,307 @@
+#!/bin/bash
+
+# Qwen CLI Chrome Extension - 智能 Native Host 安装器
+# 自动检测 Chrome 插件并配置 Native Host
+
+set -e
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+CYAN='\033[0;36m'
+NC='\033[0m'
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+HOST_NAME="com.qwen.cli.bridge"
+HOST_SCRIPT="$SCRIPT_DIR/../host.js"
+
+echo -e "${CYAN}╔════════════════════════════════════════════════════════════════╗${NC}"
+echo -e "${CYAN}║                                                                ║${NC}"
+echo -e "${CYAN}║        🔧 Qwen CLI Chrome Extension - Native Host 安装器                ║${NC}"
+echo -e "${CYAN}║                                                                ║${NC}"
+echo -e "${CYAN}╚════════════════════════════════════════════════════════════════╝${NC}"
+echo ""
+
+# 检测操作系统
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    OS="macOS"
+    MANIFEST_DIR="$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts"
+    EXTENSIONS_DIR="$HOME/Library/Application Support/Google/Chrome/Default/Extensions"
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    OS="Linux"
+    MANIFEST_DIR="$HOME/.config/google-chrome/NativeMessagingHosts"
+    EXTENSIONS_DIR="$HOME/.config/google-chrome/Default/Extensions"
+else
+    echo -e "${RED}✗ 不支持的操作系统${NC}"
+    exit 1
+fi
+
+echo -e "${BLUE}检测到系统：${NC} $OS"
+echo ""
+
+# 检查 Node.js
+echo -e "${BLUE}检查依赖...${NC}"
+if ! command -v node &> /dev/null; then
+    echo -e "${RED}✗ Node.js 未安装${NC}"
+    echo -e "  请访问 https://nodejs.org 安装 Node.js"
+    exit 1
+fi
+echo -e "${GREEN}✓${NC} Node.js $(node --version)"
+
+# 尝试自动检测扩展 ID
+echo -e "\n${BLUE}查找已安装的 Qwen CLI Chrome Extension 扩展...${NC}"
+
+EXTENSION_ID=""
+AUTO_DETECTED=false
+
+# 方法1: 从 Chrome 扩展目录查找
+if [[ -d "$EXTENSIONS_DIR" ]]; then
+    for ext_id in "$EXTENSIONS_DIR"/*; do
+        if [[ -d "$ext_id" ]]; then
+            ext_id_name=$(basename "$ext_id")
+            # 检查最新版本目录
+            for version_dir in "$ext_id"/*; do
+                if [[ -f "$version_dir/manifest.json" ]]; then
+                    # 检查是否是我们的扩展
+                    if grep -q "Qwen CLI Chrome Extension" "$version_dir/manifest.json" 2>/dev/null; then
+                        EXTENSION_ID="$ext_id_name"
+                        AUTO_DETECTED=true
+                        echo -e "${GREEN}✓${NC} 自动检测到扩展 ID: ${CYAN}$EXTENSION_ID${NC}"
+                        break 2
+                    fi
+                fi
+            done
+        fi
+    done
+fi
+
+# 方法2: 检查之前保存的 ID
+if [[ -z "$EXTENSION_ID" && -f "$SCRIPT_DIR/../.extension-id" ]]; then
+    EXTENSION_ID=$(cat "$SCRIPT_DIR/../.extension-id")
+    echo -e "${GREEN}✓${NC} 使用保存的扩展 ID: ${CYAN}$EXTENSION_ID${NC}"
+    AUTO_DETECTED=true
+fi
+
+# 如果自动检测失败，提供选项
+if [[ -z "$EXTENSION_ID" ]]; then
+    echo -e "${YELLOW}⚠️  未能自动检测到扩展${NC}"
+    echo ""
+    echo -e "请选择："
+    echo -e "  ${CYAN}1)${NC} 我已经安装了扩展（输入扩展 ID）"
+    echo -e "  ${CYAN}2)${NC} 我还没有安装扩展（通用配置）"
+    echo -e "  ${CYAN}3)${NC} 打开 Chrome 扩展页面查看"
+    echo ""
+    read -p "选择 (1/2/3): " CHOICE
+
+    case $CHOICE in
+        1)
+            echo ""
+            echo -e "${YELLOW}请输入扩展 ID:${NC}"
+            echo -e "${CYAN}提示: 在 chrome://extensions 页面找到 Qwen CLI Chrome Extension，ID 在扩展卡片上${NC}"
+            read -p "> " EXTENSION_ID
+            if [[ -n "$EXTENSION_ID" ]]; then
+                # 保存 ID 供以后使用
+                echo "$EXTENSION_ID" > "$SCRIPT_DIR/../.extension-id"
+                echo -e "${GREEN}✓${NC} 扩展 ID 已保存"
+            fi
+            ;;
+        2)
+            echo -e "\n${CYAN}将使用通用配置（允许所有开发扩展）${NC}"
+            EXTENSION_ID="*"
+            ;;
+        3)
+            echo -e "\n${CYAN}正在打开 Chrome 扩展页面...${NC}"
+            open "chrome://extensions" 2>/dev/null || xdg-open "chrome://extensions" 2>/dev/null || echo "请手动打开 chrome://extensions"
+            echo ""
+            echo -e "${YELLOW}找到 Qwen CLI Chrome Extension 扩展后，输入其 ID:${NC}"
+            read -p "> " EXTENSION_ID
+            if [[ -n "$EXTENSION_ID" && "$EXTENSION_ID" != "*" ]]; then
+                echo "$EXTENSION_ID" > "$SCRIPT_DIR/../.extension-id"
+            fi
+            ;;
+        *)
+            echo -e "${RED}无效的选择${NC}"
+            exit 1
+            ;;
+    esac
+fi
+
+# 创建 Native Host 目录
+echo -e "\n${BLUE}配置 Native Host...${NC}"
+mkdir -p "$MANIFEST_DIR"
+
+# 创建 manifest 文件
+MANIFEST_FILE="$MANIFEST_DIR/$HOST_NAME.json"
+
+if [[ "$EXTENSION_ID" == "*" ]]; then
+    # 通用配置
+    cat > "$MANIFEST_FILE" << EOF
+{
+  "name": "$HOST_NAME",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$HOST_SCRIPT",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://*/"
+  ]
+}
+EOF
+    echo -e "${GREEN}✓${NC} Native Host 已配置（通用模式）"
+else
+    # 特定扩展 ID 配置
+    cat > "$MANIFEST_FILE" << EOF
+{
+  "name": "$HOST_NAME",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$HOST_SCRIPT",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://$EXTENSION_ID/",
+    "chrome-extension://*/"
+  ]
+}
+EOF
+    echo -e "${GREEN}✓${NC} Native Host 已配置（扩展 ID: $EXTENSION_ID）"
+fi
+
+# 验证配置
+echo -e "\n${BLUE}验证配置...${NC}"
+
+# 检查 host.js 是否存在
+if [[ ! -f "$HOST_SCRIPT" ]]; then
+    echo -e "${RED}✗ host.js 文件不存在${NC}"
+    exit 1
+fi
+
+# 确保 host.js 可执行
+chmod +x "$HOST_SCRIPT"
+echo -e "${GREEN}✓${NC} host.js 已设置为可执行"
+
+# 检查 manifest 文件
+if [[ -f "$MANIFEST_FILE" ]]; then
+    echo -e "${GREEN}✓${NC} Manifest 文件已创建: $MANIFEST_FILE"
+else
+    echo -e "${RED}✗ Manifest 文件创建失败${NC}"
+    exit 1
+fi
+
+echo ""
+echo -e "${GREEN}╔════════════════════════════════════════════════════════════════╗${NC}"
+echo -e "${GREEN}║                                                                ║${NC}"
+echo -e "${GREEN}║                  ✅ Native Host 安装成功！                     ║${NC}"
+echo -e "${GREEN}║                                                                ║${NC}"
+echo -e "${GREEN}╚════════════════════════════════════════════════════════════════╝${NC}"
+echo ""
+
+# 显示下一步
+if [[ "$AUTO_DETECTED" == true ]]; then
+    echo -e "${CYAN}检测到扩展已安装，你可以直接使用了！${NC}"
+    echo ""
+    echo -e "使用方法："
+    echo -e "  1. 点击 Chrome 工具栏的扩展图标"
+    echo -e "  2. 点击 'Connect to Qwen CLI'"
+    echo -e "  3. 开始使用各项功能"
+else
+    echo -e "${YELLOW}下一步：${NC}"
+    echo -e "  1. 在 Chrome 中打开 ${CYAN}chrome://extensions/${NC}"
+    echo -e "  2. 开启${CYAN}「开发者模式」${NC}（右上角）"
+    echo -e "  3. 点击${CYAN}「加载已解压的扩展程序」${NC}"
+    echo -e "  4. 选择目录: ${CYAN}$SCRIPT_DIR/../extension${NC}"
+    echo -e "  5. 安装完成后，重新运行此脚本以更新配置"
+fi
+
+echo ""
+echo -e "${CYAN}提示：${NC}"
+echo -e "  • 如需重新配置，随时可以重新运行此脚本"
+echo -e "  • 日志文件位置: /tmp/qwen-bridge-host.log"
+echo -e "  • 如遇问题，请查看: $SCRIPT_DIR/../docs/debugging.md"
+echo ""
+
+# 询问是否测试连接
+if [[ "$AUTO_DETECTED" == true ]]; then
+    echo -e "${CYAN}是否测试 Native Host 连接？(y/n)${NC}"
+    read -p "> " TEST_CONNECTION
+
+    if [[ "$TEST_CONNECTION" == "y" ]] || [[ "$TEST_CONNECTION" == "Y" ]]; then
+        echo -e "\n${BLUE}测试连接...${NC}"
+
+        # 创建测试脚本
+        cat > /tmp/test-native-host.js << 'EOF'
+const chrome = {
+  runtime: {
+    connectNative: () => {
+      console.log("Chrome API not available in Node.js environment");
+      console.log("请在 Chrome 扩展中测试连接");
+    }
+  }
+};
+
+// 直接测试 host.js
+const { spawn } = require('child_process');
+const path = require('path');
+
+const hostPath = process.argv[2];
+if (!hostPath) {
+  console.error("Missing host path");
+  process.exit(1);
+}
+
+console.log("Testing host at:", hostPath);
+
+const host = spawn('node', [hostPath], {
+  stdio: ['pipe', 'pipe', 'pipe']
+});
+
+// 发送测试消息
+const testMessage = JSON.stringify({ type: 'handshake', version: '1.0.0' });
+const length = Buffer.allocUnsafe(4);
+length.writeUInt32LE(Buffer.byteLength(testMessage), 0);
+
+host.stdin.write(length);
+host.stdin.write(testMessage);
+
+// 读取响应
+let responseBuffer = Buffer.alloc(0);
+let messageLength = null;
+
+host.stdout.on('data', (data) => {
+  responseBuffer = Buffer.concat([responseBuffer, data]);
+
+  if (messageLength === null && responseBuffer.length >= 4) {
+    messageLength = responseBuffer.readUInt32LE(0);
+    responseBuffer = responseBuffer.slice(4);
+  }
+
+  if (messageLength !== null && responseBuffer.length >= messageLength) {
+    const message = JSON.parse(responseBuffer.slice(0, messageLength).toString());
+    console.log("Response received:", message);
+
+    if (message.type === 'handshake_response') {
+      console.log("✅ Native Host 响应正常");
+    }
+
+    host.kill();
+    process.exit(0);
+  }
+});
+
+host.on('error', (error) => {
+  console.error("❌ Host error:", error.message);
+  process.exit(1);
+});
+
+setTimeout(() => {
+  console.error("❌ 测试超时");
+  host.kill();
+  process.exit(1);
+}, 5000);
+EOF
+
+        node /tmp/test-native-host.js "$HOST_SCRIPT"
+        rm /tmp/test-native-host.js
+    fi
+fi
+
+echo -e "${GREEN}安装完成！${NC}"

packages/chrome-extension/native-host/scripts/start.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+# Native Host 启动脚本
+# Chrome 在 macOS 上需要这个包装脚本来正确启动 Node.js
+
+# 获取脚本所在目录
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+# 日志文件
+LOG_FILE="/tmp/qwen-bridge-host.log"
+
+# 记录启动信息
+echo "[$(date)] Native Host 启动..." >> "$LOG_FILE"
+echo "[$(date)] 工作目录: $DIR" >> "$LOG_FILE"
+echo "[$(date)] Node 路径: $(which node)" >> "$LOG_FILE"
+
+# 启动 Node.js Native Host
+exec /usr/bin/env node "$DIR/../host.js" 2>> "$LOG_FILE"

packages/chrome-extension/native-host/scripts/update-host-config.sh

@@ -0,0 +1,149 @@
+#!/bin/bash
+
+# Qwen CLI Chrome Extension - Native Host Configuration Updater
+# 用于在更换电脑或浏览器后更新Native Host配置
+
+set -e
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+HOST_NAME="com.qwen.cli.bridge"
+HOST_SCRIPT="$SCRIPT_DIR/../host.js"
+
+echo "==============================================="
+echo "Qwen CLI Chrome Extension - Native Host Configuration Updater"
+echo "==============================================="
+echo ""
+
+# Detect OS
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    OS="macOS"
+    MANIFEST_DIR="$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts"
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    OS="Linux"
+    MANIFEST_DIR="$HOME/.config/google-chrome/NativeMessagingHosts"
+else
+    echo "Error: Unsupported operating system"
+    exit 1
+fi
+
+echo "Detected OS: $OS"
+echo ""
+
+# Check if Node.js is installed
+if ! command -v node &> /dev/null; then
+    echo "Error: Node.js is not installed"
+    echo "Please install Node.js from https://nodejs.org/"
+    exit 1
+fi
+
+echo "✓ Node.js $(node --version) is installed"
+echo ""
+
+# Create Native Host directory
+echo "Creating Native Host directory..."
+mkdir -p "$MANIFEST_DIR"
+echo "✓ Directory created: $MANIFEST_DIR"
+echo ""
+
+# Check if host.js exists
+if [[ ! -f "$HOST_SCRIPT" ]]; then
+    echo "Error: host.js not found at $HOST_SCRIPT"
+    exit 1
+fi
+
+# Make host.js executable
+chmod +x "$HOST_SCRIPT"
+echo "✓ Made host.js executable"
+echo ""
+
+# Get extension ID
+echo "How would you like to configure the extension?"
+echo "1) Use specific extension ID (recommended for production)"
+echo "2) Use generic configuration (allows any development extension)"
+echo ""
+read -p "Choose option (1/2): " CONFIG_OPTION
+
+MANIFEST_FILE="$MANIFEST_DIR/$HOST_NAME.json"
+
+if [[ "$CONFIG_OPTION" == "1" ]]; then
+    echo ""
+    echo "Please enter your Chrome extension ID:"
+    echo "Tip: Find it in chrome://extensions page for Qwen CLI Chrome Extension"
+    read -p "Extension ID: " EXTENSION_ID
+
+    if [[ -z "$EXTENSION_ID" ]]; then
+        echo "Error: Extension ID is required"
+        exit 1
+    fi
+
+    # Save extension ID for future use
+    echo "$EXTENSION_ID" > "$SCRIPT_DIR/../.extension-id"
+
+    # Create manifest with specific extension ID
+    cat > "$MANIFEST_FILE" << EOF
+{
+  "name": "$HOST_NAME",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$HOST_SCRIPT",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://$EXTENSION_ID/",
+    "chrome-extension://*/"
+  ]
+}
+EOF
+    echo ""
+    echo "✓ Native Host configured for extension ID: $EXTENSION_ID"
+elif [[ "$CONFIG_OPTION" == "2" ]]; then
+    # Create manifest with generic configuration
+    cat > "$MANIFEST_FILE" << EOF
+{
+  "name": "$HOST_NAME",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$HOST_SCRIPT",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://*/"
+  ]
+}
+EOF
+    echo ""
+    echo "✓ Native Host configured with generic settings (allows any development extension)"
+else
+    echo "Invalid option"
+    exit 1
+fi
+
+echo ""
+echo "✓ Manifest file created: $MANIFEST_FILE"
+echo ""
+
+# Verify configuration
+echo "Verifying configuration..."
+if [[ -f "$MANIFEST_FILE" ]]; then
+    echo "✓ Configuration verified successfully"
+    echo ""
+    echo "Configuration details:"
+    cat "$MANIFEST_FILE"
+    echo ""
+else
+    echo "✗ Configuration verification failed"
+    exit 1
+fi
+
+echo "==============================================="
+echo "✅ Native Host configuration updated successfully!"
+echo "==============================================="
+echo ""
+echo "Next steps:"
+echo "1. Restart Chrome if it's running"
+echo "2. Navigate to chrome://extensions"
+echo "3. Reload the Qwen CLI Chrome Extension extension"
+echo "4. Click the extension icon and connect to Qwen CLI"
+echo ""
+echo "Note: Run this script whenever you:"
+echo "  • Switch to a new computer"
+echo "  • Change browsers"
+echo "  • Reinstall Chrome"
+echo "  • Get a new extension ID"
+echo ""

packages/chrome-extension/native-host/scripts/wrapper.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+exec 2>> /tmp/qwen-wrapper-error.log
+echo "$(date): Wrapper started" >> /tmp/qwen-wrapper-error.log
+echo "$(date): PWD=$PWD" >> /tmp/qwen-wrapper-error.log
+echo "$(date): Node=$(which node)" >> /tmp/qwen-wrapper-error.log
+
+# 运行实际的 host.js
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+exec /usr/local/bin/node "$SCRIPT_DIR/../host.js"

packages/chrome-extension/native-host/src/browser-mcp-server.js

@@ -0,0 +1,370 @@
+#!/usr/bin/env node
+
+/**
+ * Browser MCP Server
+ * Provides browser tools (read_page, capture_screenshot, etc.) to Qwen CLI
+ * Communicates with Native Host via HTTP to get browser data
+ */
+
+const http = require('http');
+
+const BRIDGE_URL = 'http://127.0.0.1:18765';
+
+// MCP Protocol version
+const PROTOCOL_VERSION = '2024-11-05';
+
+// Available tools
+const TOOLS = [
+  {
+    name: 'browser_read_page',
+    description:
+      'Read the content of the current browser page. Returns URL, title, text content, links, and images.',
+    inputSchema: {
+      type: 'object',
+      properties: {},
+      required: [],
+    },
+  },
+  {
+    name: 'browser_capture_screenshot',
+    description:
+      'Capture a screenshot of the current browser tab. Returns a base64-encoded PNG image.',
+    inputSchema: {
+      type: 'object',
+      properties: {},
+      required: [],
+    },
+  },
+  {
+    name: 'browser_get_network_logs',
+    description:
+      'Get network request logs from the current browser tab. Useful for debugging API calls.',
+    inputSchema: {
+      type: 'object',
+      properties: {},
+      required: [],
+    },
+  },
+  {
+    name: 'browser_get_console_logs',
+    description:
+      'Get console logs (log, error, warn, info) from the current browser tab.',
+    inputSchema: {
+      type: 'object',
+      properties: {},
+      required: [],
+    },
+  },
+];
+
+// Send request to Native Host HTTP bridge
+async function callBridge(method, params = {}) {
+  return new Promise((resolve, reject) => {
+    const data = JSON.stringify({ method, params });
+
+    const req = http.request(
+      BRIDGE_URL,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Content-Length': Buffer.byteLength(data),
+        },
+      },
+      (res) => {
+        let body = '';
+        res.on('data', (chunk) => (body += chunk));
+        res.on('end', () => {
+          try {
+            const result = JSON.parse(body);
+            if (result.success) {
+              resolve(result.data);
+            } else {
+              reject(new Error(result.error || 'Unknown error'));
+            }
+          } catch (err) {
+            reject(new Error(`Failed to parse response: ${err.message}`));
+          }
+        });
+      },
+    );
+
+    req.on('error', (err) => {
+      reject(
+        new Error(
+          `Bridge connection failed: ${err.message}. Make sure Chrome extension is running.`,
+        ),
+      );
+    });
+
+    req.write(data);
+    req.end();
+  });
+}
+
+// Handle MCP tool calls
+async function handleToolCall(name, args) {
+  switch (name) {
+    case 'browser_read_page': {
+      const data = await callBridge('read_page');
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(
+              {
+                url: data.url,
+                title: data.title,
+                content: data.content?.text || data.content?.markdown || '',
+                linksCount: data.links?.length || 0,
+                imagesCount: data.images?.length || 0,
+              },
+              null,
+              2,
+            ),
+          },
+        ],
+      };
+    }
+
+    case 'browser_capture_screenshot': {
+      const data = await callBridge('capture_screenshot');
+      return {
+        content: [
+          {
+            type: 'image',
+            data: data.dataUrl?.replace(/^data:image\/png;base64,/, '') || '',
+            mimeType: 'image/png',
+          },
+        ],
+      };
+    }
+
+    case 'browser_get_network_logs': {
+      const data = await callBridge('get_network_logs');
+      const logs = data.logs || [];
+
+      if (!logs.length) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text:
+                'No network entries captured yet. Try reloading the page or triggering a request, then run again.',
+            },
+          ],
+        };
+      }
+
+      // Aggregate by requestId to include method/url/status/headers/bodies
+      const byRequest = new Map();
+      for (const log of logs) {
+        const reqId = log.params?.requestId;
+        if (!reqId) continue;
+        const entry = byRequest.get(reqId) || { requestId: reqId };
+
+        switch (log.method) {
+          case 'Network.requestWillBeSent': {
+            entry.method = log.params?.request?.method;
+            entry.url =
+              log.params?.request?.url || log.params?.documentURL || entry.url;
+            entry.requestHeaders = log.params?.request?.headers;
+            entry.requestBody = log.params?.request?.postData;
+            entry.timestamp = log.timestamp;
+            break;
+          }
+          case 'Network.responseReceived': {
+            entry.status = log.params?.response?.status;
+            entry.statusText = log.params?.response?.statusText;
+            entry.responseHeaders = log.params?.response?.headers;
+            entry.timestamp = log.timestamp;
+            break;
+          }
+          case 'Network.responseBody': {
+            entry.responseBody = log.params?.body;
+            entry.responseBodyBase64 = log.params?.base64Encoded;
+            if (log.params?.error) entry.responseBodyError = log.params.error;
+            entry.timestamp = log.timestamp;
+            break;
+          }
+          case 'Network.loadingFailed': {
+            entry.error = log.params?.errorText || log.params?.error;
+            entry.timestamp = log.timestamp;
+            break;
+          }
+          default:
+            break;
+        }
+
+        byRequest.set(reqId, entry);
+      }
+
+      // Take the most recent 20 requests
+      const items = Array.from(byRequest.values()).slice(-20);
+      const text = `Network requests (last ${items.length}):\n${JSON.stringify(
+        items,
+        null,
+        2,
+      )}`;
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text,
+          },
+        ],
+      };
+    }
+
+    case 'browser_get_console_logs': {
+      const data = await callBridge('get_console_logs');
+      const logs = data.logs || [];
+      const formatted = logs
+        .slice(-50)
+        .map((log) => `[${log.type}] ${log.message}`)
+        .join('\n');
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `Console logs (last ${Math.min(logs.length, 50)} entries):\n${formatted || '(no logs captured)'}`,
+          },
+        ],
+      };
+    }
+
+    default:
+      throw new Error(`Unknown tool: ${name}`);
+  }
+}
+
+// JSON-RPC framing over stdio (Content-Length)
+let inputBuffer = Buffer.alloc(0);
+function writeMessage(obj) {
+  const json = Buffer.from(JSON.stringify(obj), 'utf8');
+  const header = Buffer.from(`Content-Length: ${json.length}\r\n\r\n`, 'utf8');
+  process.stdout.write(header);
+  process.stdout.write(json);
+}
+function sendResponse(id, result) {
+  writeMessage({ jsonrpc: '2.0', id, result });
+}
+function sendError(id, code, message) {
+  writeMessage({ jsonrpc: '2.0', id, error: { code, message } });
+}
+
+// Handle incoming JSON-RPC messages
+async function handleMessage(message) {
+  const { id, method, params } = message;
+
+  try {
+    switch (method) {
+      case 'initialize':
+        sendResponse(id, {
+          protocolVersion: PROTOCOL_VERSION,
+          capabilities: {
+            tools: {},
+          },
+          serverInfo: {
+            name: 'chrome-browser',
+            version: '1.0.0',
+          },
+        });
+        break;
+
+      case 'tool': {
+        // Return functionDeclarations compatible with Qwen's mcpToTool expectation
+        const functionDeclarations = TOOLS.map(t => ({
+          name: t.name,
+          description: t.description,
+          parametersJsonSchema: t.inputSchema || { type: 'object', properties: {} },
+        }));
+        sendResponse(id, { functionDeclarations });
+        break;
+      }
+
+      case 'notifications/initialized':
+        // No response needed for notifications
+        break;
+
+      case 'tools/list':
+        sendResponse(id, { tools: TOOLS });
+        break;
+
+      case 'tools/call':
+        try {
+          const result = await handleToolCall(
+            params.name,
+            params.arguments || {},
+          );
+          sendResponse(id, result);
+        } catch (err) {
+          sendResponse(id, {
+            content: [
+              {
+                type: 'text',
+                text: `Error: ${err.message}`,
+              },
+            ],
+            isError: true,
+          });
+        }
+        break;
+
+      case 'ping':
+        sendResponse(id, {});
+        break;
+
+      default:
+        if (id !== undefined) {
+          sendError(id, -32601, `Method not found: ${method}`);
+        }
+    }
+  } catch (err) {
+    if (id !== undefined) {
+      sendError(id, -32603, err.message);
+    }
+  }
+}
+
+// Main: Read JSON-RPC messages from stdin (Content-Length framed)
+process.stdin.on('data', (chunk) => {
+  inputBuffer = Buffer.concat([inputBuffer, chunk]);
+  while (true) {
+    let headerEnd = inputBuffer.indexOf('\r\n\r\n');
+    let sepLen = 4;
+    if (headerEnd === -1) {
+      headerEnd = inputBuffer.indexOf('\n\n');
+      sepLen = 2;
+    }
+    if (headerEnd === -1) return; // wait for full header
+
+    const headerStr = inputBuffer.slice(0, headerEnd).toString('utf8');
+    const match = headerStr.match(/Content-Length:\s*(\d+)/i);
+    if (!match) {
+      // drop until next header
+      inputBuffer = inputBuffer.slice(headerEnd + sepLen);
+      continue;
+    }
+    const length = parseInt(match[1], 10);
+    const totalLen = headerEnd + sepLen + length;
+    if (inputBuffer.length < totalLen) return; // wait for full body
+    const body = inputBuffer.slice(headerEnd + sepLen, totalLen);
+    inputBuffer = inputBuffer.slice(totalLen);
+    try {
+      const message = JSON.parse(body.toString('utf8'));
+      // Debug to stderr (not stdout): show basic method flow
+      try { console.error('[MCP <-]', message.method || 'response', message.id ?? ''); } catch (_) {}
+      handleMessage(message);
+    } catch (e) {
+      try { console.error('[MCP] JSON parse error:', e.message); } catch (_) {}
+      // ignore parse errors
+    }
+  }
+});
+
+// Handle errors
+process.on('uncaughtException', (err) => {
+  console.error('Uncaught exception:', err);
+});

packages/chrome-extension/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@qwen-code/chrome-bridge",
+  "version": "1.0.0",
+  "description": "Chrome extension bridge for Qwen CLI - enables AI-powered browser interactions",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/QwenLM/qwen-code.git",
+    "directory": "packages/chrome-extension"
+  },
+  "keywords": [
+    "chrome-extension",
+    "qwen",
+    "cli",
+    "bridge",
+    "native-messaging",
+    "mcp",
+    "ai"
+  ],
+  "author": "Qwen Team",
+  "license": "Apache-2.0",
+  "type": "module",
+  "files": [
+    "extension/",
+    "native-host/",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "./scripts/debug.sh",
+    "build:ui": "node config/esbuild.config.js",
+    "build:ui:watch": "node config/esbuild.config.js --watch",
+    "build": "npm run build:ui",
+    "install:extension": "./scripts/first-install.sh",
+    "install:host": "cd native-host && ./scripts/smart-install.sh",
+    "install:all": "./scripts/first-install.sh",
+    "update:host": "cd native-host && ./scripts/update-host-config.sh",
+    "dev:chrome": "open -a 'Google Chrome' --args --load-extension=$PWD/extension --auto-open-devtools-for-tabs",
+    "package": "zip -r chrome-extension.zip extension/",
+    "clean": "rm -rf dist *.zip /tmp/qwen-bridge-host.log /tmp/qwen-server.log .extension-id extension/sidepanel/dist/sidepanel-app.js extension/sidepanel/dist/sidepanel-app.js.map",
+    "logs": "tail -f /tmp/qwen-bridge-host.log"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "markdown-it": "^14.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.1.32",
+    "@types/markdown-it": "^14.1.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "autoprefixer": "^10.4.22",
+    "esbuild": "^0.25.3",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
+    "typescript": "^5.8.3"
+  }
+}

packages/chrome-extension/scripts/.extension-id

@@ -0,0 +1 @@
+kbpfhhpfobobomiighfkhojhmefogdgh

packages/chrome-extension/scripts/build.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Build script for Chrome extension package
+
+echo "Building Chrome Qwen Bridge..."
+
+# Ensure we're in the project root directory (where both scripts/ and extension/ are)
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+cd "$SCRIPT_DIR/.."
+
+# Create dist directory
+mkdir -p dist
+
+# Copy extension files to dist
+echo "Copying extension files..."
+cp -r extension dist/
+
+# Create a zip file for Chrome Web Store
+echo "Creating extension package..."
+cd dist
+zip -r ../chrome-extension.zip extension/
+cd ..
+
+echo "✅ Build complete!"
+echo "   Extension package: chrome-extension.zip"
+echo "   Extension files: dist/extension/"

packages/chrome-extension/scripts/clean.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Clean up build artifacts and temporary files for Chrome Extension
+
+echo "Cleaning up Chrome Extension build artifacts..."
+
+# Remove build output
+rm -rf extension/sidepanel/dist/sidepanel-app.js
+rm -rf extension/sidepanel/dist/sidepanel-app.js.map
+
+# Remove any zip files
+rm -f chrome-extension.zip
+
+# Remove log files
+rm -f /tmp/qwen-bridge-host.log
+rm -f /tmp/qwen-server.log
+
+# Remove saved extension ID
+rm -f .extension-id
+
+# Remove any dist directories
+rm -rf dist/
+
+echo "Cleanup complete!"

packages/chrome-extension/scripts/debug.sh

@@ -0,0 +1,357 @@
+#!/bin/bash
+
+# Qwen CLI Chrome Extension - macOS 一键调试脚本
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+
+# 获取脚本目录
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+# 检查是否首次安装
+if [[ ! -f "$SCRIPT_DIR/.extension-id" ]]; then
+    echo -e "${YELLOW}╔════════════════════════════════════════════════════════════════╗${NC}"
+    echo -e "${YELLOW}║                                                                ║${NC}"
+    echo -e "${YELLOW}║           ⚠️  检测到首次运行，需要先安装插件                   ║${NC}"
+    echo -e "${YELLOW}║                                                                ║${NC}"
+    echo -e "${YELLOW}╚════════════════════════════════════════════════════════════════╝${NC}"
+    echo ""
+    echo -e "${CYAN}即将启动首次安装向导...${NC}"
+    sleep 2
+    exec "$SCRIPT_DIR/first-install.sh"
+    exit 0
+fi
+
+# 清屏显示标题
+clear
+echo -e "${CYAN}╔════════════════════════════════════════════════════════════════╗${NC}"
+echo -e "${CYAN}║                                                                ║${NC}"
+echo -e "${CYAN}║     🚀 Qwen CLI Chrome Extension - macOS 调试环境                      ║${NC}"
+echo -e "${CYAN}║                                                                ║${NC}"
+echo -e "${CYAN}╚════════════════════════════════════════════════════════════════╝${NC}"
+echo ""
+
+# 第一步：检查环境
+echo -e "${BLUE}[1/5]${NC} 检查开发环境..."
+
+# 检查 Node.js
+if ! command -v node &> /dev/null; then
+    echo -e "${RED}✗${NC} Node.js 未安装，请先安装 Node.js"
+    echo "  访问 https://nodejs.org 下载安装"
+    exit 1
+fi
+echo -e "${GREEN}✓${NC} Node.js $(node --version)"
+
+# 检查 Chrome
+CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+if [[ ! -f "$CHROME_PATH" ]]; then
+    echo -e "${RED}✗${NC} Chrome 未找到"
+    exit 1
+fi
+echo -e "${GREEN}✓${NC} Chrome 已安装"
+
+# 第二步：配置 Native Host
+echo -e "\n${BLUE}[2/5]${NC} 配置 Native Host..."
+
+MANIFEST_DIR="$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts"
+mkdir -p "$MANIFEST_DIR"
+
+cat > "$MANIFEST_DIR/com.qwen.cli.bridge.json" << EOF
+{
+  "name": "com.qwen.cli.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$SCRIPT_DIR/../native-host/src/host.js",
+  "type": "stdio",
+  "allowed_origins": ["chrome-extension://*/"]
+}
+EOF
+
+echo -e "${GREEN}✓${NC} Native Host 已配置"
+
+# 第三步：检查 Qwen CLI
+echo -e "\n${BLUE}[3/5]${NC} 检查 Qwen CLI..."
+
+QWEN_AVAILABLE=false
+if command -v qwen &> /dev/null; then
+    QWEN_AVAILABLE=true
+    QWEN_VERSION=$(qwen --version 2>/dev/null || echo "已安装")
+    echo -e "${GREEN}✓${NC} Qwen CLI ${QWEN_VERSION}"
+    echo -e "${CYAN}→${NC} 使用 ACP 模式与 Chrome 插件通信"
+else
+    echo -e "${YELLOW}!${NC} Qwen CLI 未安装（插件基础功能仍可使用）"
+    echo -e "   安装方法: npm install -g @anthropic-ai/qwen-code"
+fi
+
+# 第四步：启动测试页面
+echo -e "\n${BLUE}[4/5]${NC} 启动测试服务器..."
+
+# 创建测试页面
+cat > /tmp/qwen-test.html << 'HTML'
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Qwen CLI Chrome Extension 测试页面</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 40px 20px;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 40px;
+            text-align: center;
+        }
+        .content {
+            padding: 40px;
+        }
+        h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }
+        .status {
+            display: inline-block;
+            padding: 5px 15px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 20px;
+            margin-top: 10px;
+        }
+        .test-section {
+            margin: 30px 0;
+            padding: 25px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+        .test-section h2 {
+            color: #667eea;
+            margin-bottom: 15px;
+        }
+        button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            margin: 5px;
+            transition: transform 0.2s;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        #console {
+            background: #1e1e1e;
+            color: #d4d4d4;
+            padding: 15px;
+            border-radius: 8px;
+            font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+            font-size: 14px;
+            min-height: 150px;
+            max-height: 300px;
+            overflow-y: auto;
+            margin-top: 15px;
+        }
+        .log-entry {
+            margin: 5px 0;
+            padding: 5px;
+            border-left: 3px solid transparent;
+        }
+        .log-entry.info { border-left-color: #3b82f6; }
+        .log-entry.warn { border-left-color: #f59e0b; color: #fbbf24; }
+        .log-entry.error { border-left-color: #ef4444; color: #f87171; }
+        .instructions {
+            background: #e0e7ff;
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 20px;
+        }
+        .instructions h3 {
+            color: #4c1d95;
+            margin-bottom: 10px;
+        }
+        .instructions ol {
+            margin-left: 20px;
+            color: #4c1d95;
+        }
+        .instructions li {
+            margin: 8px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚀 Qwen CLI Chrome Extension</h1>
+            <div class="status">调试环境已就绪</div>
+        </div>
+
+        <div class="content">
+            <div class="test-section">
+                <h2>📝 测试功能</h2>
+                <button onclick="testLog()">测试 Console Log</button>
+                <button onclick="testError()">测试 Console Error</button>
+                <button onclick="testNetwork()">测试网络请求</button>
+                <button onclick="testSelection()">测试文本选择</button>
+                <div id="console"></div>
+            </div>
+
+            <div class="test-section">
+                <h2>📄 示例内容</h2>
+                <p>这是一段可以被插件提取的示例文本。你可以选择这段文字，然后使用插件的"Send Selected Text"功能。</p>
+                <ul style="margin: 15px 0;">
+                    <li>列表项 1：Lorem ipsum dolor sit amet</li>
+                    <li>列表项 2：Consectetur adipiscing elit</li>
+                    <li>列表项 3：Sed do eiusmod tempor incididunt</li>
+                </ul>
+                <blockquote style="border-left: 4px solid #667eea; padding-left: 15px; margin: 15px 0; color: #666;">
+                    "这是一个引用块，可以测试 Markdown 转换功能。"
+                </blockquote>
+            </div>
+
+            <div class="instructions">
+                <h3>🎯 使用说明</h3>
+                <ol>
+                    <li>点击 Chrome 工具栏中的插件图标</li>
+                    <li>点击 "Connect to Qwen CLI" 建立连接</li>
+                    <li>如果安装了 Qwen CLI，点击 "Start Qwen CLI"</li>
+                    <li>使用各种功能按钮测试插件功能</li>
+                    <li>按 F12 打开 DevTools 查看详细日志</li>
+                </ol>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const consoleDiv = document.getElementById('console');
+
+        function addLog(message, type = 'info') {
+            const entry = document.createElement('div');
+            entry.className = 'log-entry ' + type;
+            const time = new Date().toLocaleTimeString();
+            entry.textContent = `[${time}] ${message}`;
+            consoleDiv.appendChild(entry);
+            consoleDiv.scrollTop = consoleDiv.scrollHeight;
+
+            // 同时输出到真实 console
+            console[type](message);
+        }
+
+        function testLog() {
+            addLog('这是一条测试日志消息', 'info');
+        }
+
+        function testError() {
+            addLog('这是一条测试错误消息', 'error');
+        }
+
+        function testNetwork() {
+            addLog('发起网络请求...', 'info');
+            fetch('https://api.github.com/zen')
+                .then(res => res.text())
+                .then(data => addLog('请求成功: ' + data, 'info'))
+                .catch(err => addLog('请求失败: ' + err.message, 'error'));
+        }
+
+        function testSelection() {
+            const selection = window.getSelection().toString();
+            if (selection) {
+                addLog('选中的文本: ' + selection, 'info');
+            } else {
+                addLog('请先选择一些文本', 'warn');
+            }
+        }
+
+        // 初始化
+        addLog('测试页面已加载', 'info');
+        addLog('插件调试环境已就绪', 'info');
+    </script>
+</body>
+</html>
+HTML
+
+# 启动 Python HTTP 服务器
+cd /tmp
+python3 -m http.server 3000 > /tmp/test-server.log 2>&1 &
+TEST_PID=$!
+sleep 1
+
+echo -e "${GREEN}✓${NC} 测试服务器已启动 (http://localhost:3000)"
+
+# 第五步：启动 Chrome
+echo -e "\n${BLUE}[5/5]${NC} 启动 Chrome 并加载插件..."
+
+"$CHROME_PATH" \
+    --load-extension="$SCRIPT_DIR/../extension" \
+    --auto-open-devtools-for-tabs \
+    --no-first-run \
+    --no-default-browser-check \
+    "http://localhost:3000/qwen-test.html" &
+
+CHROME_PID=$!
+
+echo -e "${GREEN}✓${NC} Chrome 已启动"
+
+# 显示最终状态
+echo ""
+echo -e "${GREEN}╔════════════════════════════════════════════════════════════════╗${NC}"
+echo -e "${GREEN}║                                                                ║${NC}"
+echo -e "${GREEN}║                    ✅ 调试环境启动成功！                       ║${NC}"
+echo -e "${GREEN}║                                                                ║${NC}"
+echo -e "${GREEN}╚════════════════════════════════════════════════════════════════╝${NC}"
+echo ""
+echo -e "${CYAN}📍 服务状态：${NC}"
+echo -e "   • Chrome: 运行中"
+echo -e "   • 测试页面: ${BLUE}http://localhost:3000/qwen-test.html${NC}"
+echo -e "   • 插件: 已加载到工具栏"
+
+if [ "$QWEN_AVAILABLE" = true ]; then
+    echo -e "   • Qwen CLI: 可用 (ACP 模式)"
+fi
+
+echo ""
+echo -e "${CYAN}🔍 调试位置：${NC}"
+echo -e "   • 插件日志: Chrome DevTools Console"
+echo -e "   • 后台脚本: chrome://extensions → Service Worker"
+echo -e "   • Native Host: /tmp/qwen-bridge-host.log"
+
+echo ""
+echo -e "${YELLOW}按 Ctrl+C 停止所有服务${NC}"
+echo ""
+
+# 清理函数
+cleanup() {
+    echo -e "\n${YELLOW}正在停止服务...${NC}"
+
+    # 停止进程
+    [ ! -z "$TEST_PID" ] && kill $TEST_PID 2>/dev/null
+
+    echo -e "${GREEN}✓${NC} 已停止所有服务"
+    exit 0
+}
+
+# 捕获中断信号
+trap cleanup INT TERM
+
+# 保持运行
+while true; do
+    sleep 1
+done

packages/chrome-extension/scripts/dev.js

@@ -0,0 +1,529 @@
+#!/usr/bin/env node
+
+/**
+ * 开发环境一键启动脚本
+ * 自动完成所有配置和启动步骤
+ */
+
+const { spawn, exec } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const readline = require('readline');
+
+// 颜色输出
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  red: '\x1b[31m',
+  cyan: '\x1b[36m',
+};
+
+function log(message, color = '') {
+  console.log(`${color}${message}${colors.reset}`);
+}
+
+function logStep(step, message) {
+  log(`\n[${step}] ${message}`, colors.bright + colors.blue);
+}
+
+function logSuccess(message) {
+  log(`✅ ${message}`, colors.green);
+}
+
+function logWarning(message) {
+  log(`⚠️  ${message}`, colors.yellow);
+}
+
+function logError(message) {
+  log(`❌ ${message}`, colors.red);
+}
+
+function logInfo(message) {
+  log(`ℹ️  ${message}`, colors.cyan);
+}
+
+// 检查命令是否存在
+function commandExists(command) {
+  return new Promise((resolve) => {
+    exec(`command -v ${command}`, (error) => {
+      resolve(!error);
+    });
+  });
+}
+
+// 获取 Chrome 路径
+function getChromePath() {
+  const platform = process.platform;
+
+  const chromePaths = {
+    darwin: [
+      '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+      '/Applications/Chromium.app/Contents/MacOS/Chromium',
+    ],
+    win32: [
+      'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+      'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+      process.env.LOCALAPPDATA + '\\Google\\Chrome\\Application\\chrome.exe',
+    ],
+    linux: [
+      '/usr/bin/google-chrome',
+      '/usr/bin/chromium-browser',
+      '/usr/bin/chromium',
+    ],
+  };
+
+  const paths = chromePaths[platform] || [];
+
+  for (const chromePath of paths) {
+    if (fs.existsSync(chromePath)) {
+      return chromePath;
+    }
+  }
+
+  return null;
+}
+
+// 获取扩展 ID
+function getExtensionId(extensionPath) {
+  // 这是一个简化的方法，实际的 Extension ID 是通过 Chrome 生成的
+  // 开发时可以固定使用一个 ID
+  return 'development-extension-id';
+}
+
+// 安装 Native Host
+async function installNativeHost(extensionPath) {
+  logStep(2, 'Installing Native Host...');
+
+  const hostPath = path.join(extensionPath, 'native-host');
+  const scriptPath = path.join(hostPath, 'host.js');
+
+  if (!fs.existsSync(scriptPath)) {
+    logError('Native host script not found!');
+    return false;
+  }
+
+  const platform = process.platform;
+  const hostName = 'com.qwen.cli.bridge';
+
+  let manifestDir;
+  if (platform === 'darwin') {
+    manifestDir = path.join(
+      os.homedir(),
+      'Library/Application Support/Google/Chrome/NativeMessagingHosts',
+    );
+  } else if (platform === 'linux') {
+    manifestDir = path.join(
+      os.homedir(),
+      '.config/google-chrome/NativeMessagingHosts',
+    );
+  } else if (platform === 'win32') {
+    // Windows 需要写注册表
+    logWarning(
+      'Windows requires registry modification. Please run install.bat manually.',
+    );
+    return true;
+  } else {
+    logError('Unsupported platform');
+    return false;
+  }
+
+  // 创建目录
+  if (!fs.existsSync(manifestDir)) {
+    fs.mkdirSync(manifestDir, { recursive: true });
+  }
+
+  // 创建 manifest 文件
+  const manifest = {
+    name: hostName,
+    description: 'Native messaging host for Qwen CLI Chrome Extension',
+    path: scriptPath,
+    type: 'stdio',
+    allowed_origins: [
+      'chrome-extension://jniepomhbdkeifkadbfolbcihcmfpfjo/', // 开发用 ID
+      'chrome-extension://*/', // 允许任何扩展（仅开发环境）
+    ],
+  };
+
+  const manifestPath = path.join(manifestDir, `${hostName}.json`);
+  fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+
+  logSuccess(`Native Host installed at: ${manifestPath}`);
+  return true;
+}
+
+// 检查 Qwen CLI
+async function checkQwenCli() {
+  logStep(3, 'Checking Qwen CLI...');
+
+  const qwenExists = await commandExists('qwen');
+
+  if (qwenExists) {
+    logSuccess('Qwen CLI is installed');
+
+    // 获取版本
+    return new Promise((resolve) => {
+      exec('qwen --version', (error, stdout) => {
+        if (!error && stdout) {
+          logInfo(`Version: ${stdout.trim()}`);
+        }
+        resolve(true);
+      });
+    });
+  } else {
+    logWarning('Qwen CLI is not installed');
+    logInfo(
+      'You can still use the extension, but some features will be limited',
+    );
+    return false;
+  }
+}
+
+// 启动 Qwen CLI 服务器
+function startQwenServer(port = 8080) {
+  logStep(4, 'Starting Qwen CLI Server...');
+
+  return new Promise((resolve) => {
+    // 检查端口是否被占用
+    exec(`lsof -i:${port} || netstat -an | grep ${port}`, (error, stdout) => {
+      if (stdout && stdout.length > 0) {
+        logWarning(`Port ${port} is already in use`);
+        logInfo('Qwen server might already be running');
+        resolve(null);
+        return;
+      }
+
+      // 启动服务器
+      const qwenProcess = spawn('qwen', ['server', '--port', String(port)], {
+        detached: false,
+        stdio: ['ignore', 'pipe', 'pipe'],
+      });
+
+      qwenProcess.stdout.on('data', (data) => {
+        const output = data.toString();
+        if (output.includes('Server started') || output.includes('listening')) {
+          logSuccess(`Qwen server started on port ${port}`);
+          resolve(qwenProcess);
+        }
+      });
+
+      qwenProcess.stderr.on('data', (data) => {
+        logError(`Qwen server error: ${data}`);
+      });
+
+      qwenProcess.on('error', (error) => {
+        logError(`Failed to start Qwen server: ${error.message}`);
+        resolve(null);
+      });
+
+      // 超时处理
+      setTimeout(() => {
+        logWarning('Qwen server start timeout, continuing anyway...');
+        resolve(qwenProcess);
+      }, 5000);
+    });
+  });
+}
+
+// 启动 Chrome 开发模式
+function startChrome(extensionPath, chromePath) {
+  logStep(5, 'Starting Chrome with extension...');
+
+  const args = [
+    `--load-extension=${extensionPath}`,
+    '--auto-open-devtools-for-tabs', // 自动打开 DevTools
+    '--disable-extensions-except=' + extensionPath,
+    '--no-first-run',
+    '--no-default-browser-check',
+    '--disable-default-apps',
+    '--disable-popup-blocking',
+    '--disable-translate',
+    '--disable-sync',
+    '--no-pings',
+    '--disable-background-timer-throttling',
+    '--disable-renderer-backgrounding',
+    '--disable-device-discovery-notifications',
+  ];
+
+  // 开发模式特定参数
+  if (process.env.DEBUG === 'true') {
+    args.push('--enable-logging=stderr');
+    args.push('--v=1');
+  }
+
+  // 添加测试页面
+  args.push('http://localhost:3000'); // 或其他测试页面
+
+  const chromeProcess = spawn(chromePath, args, {
+    detached: false,
+    stdio: 'inherit',
+  });
+
+  chromeProcess.on('error', (error) => {
+    logError(`Failed to start Chrome: ${error.message}`);
+  });
+
+  logSuccess('Chrome started with extension loaded');
+  logInfo('Extension should be visible in the toolbar');
+
+  return chromeProcess;
+}
+
+// 创建测试服务器
+function createTestServer(port = 3000) {
+  logStep(6, 'Starting test server...');
+
+  const http = require('http');
+  const testHtml = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Qwen CLI Chrome Extension Test Page</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        .container {
+            background: white;
+            padding: 40px;
+            border-radius: 10px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            border-bottom: 3px solid #667eea;
+            padding-bottom: 10px;
+        }
+        .test-content {
+            margin: 20px 0;
+        }
+        .test-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        .test-button:hover {
+            opacity: 0.9;
+        }
+        #console-output {
+            background: #f5f5f5;
+            padding: 10px;
+            border-radius: 5px;
+            font-family: monospace;
+            min-height: 100px;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚀 Qwen CLI Chrome Extension Test Page</h1>
+
+        <div class="test-content">
+            <h2>Test Content</h2>
+            <p>This is a test page for the Qwen CLI Chrome Extension.</p>
+            <p>Click the extension icon in your toolbar to start testing!</p>
+
+            <h3>Sample Data</h3>
+            <ul>
+                <li>Item 1: Lorem ipsum dolor sit amet</li>
+                <li>Item 2: Consectetur adipiscing elit</li>
+                <li>Item 3: Sed do eiusmod tempor incididunt</li>
+            </ul>
+
+            <h3>Test Actions</h3>
+            <button class="test-button" onclick="testLog()">Test Console Log</button>
+            <button class="test-button" onclick="testError()">Test Console Error</button>
+            <button class="test-button" onclick="testNetwork()">Test Network Request</button>
+
+            <h3>Console Output</h3>
+            <div id="console-output"></div>
+        </div>
+
+        <div class="test-content">
+            <h2>Test Form</h2>
+            <form>
+                <input type="text" placeholder="Test input" style="padding: 5px; margin: 5px;">
+                <textarea placeholder="Test textarea" style="padding: 5px; margin: 5px;"></textarea>
+                <select style="padding: 5px; margin: 5px;">
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                </select>
+            </form>
+        </div>
+
+        <div class="test-content">
+            <h2>Images</h2>
+            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzY2N2VlYSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPjIwMHgxMDA8L3RleHQ+PC9zdmc+" alt="Test Image">
+        </div>
+    </div>
+
+    <script>
+        function addOutput(message, type = 'log') {
+            const output = document.getElementById('console-output');
+            const time = new Date().toLocaleTimeString();
+            const color = type === 'error' ? 'red' : type === 'warn' ? 'orange' : 'black';
+            output.innerHTML += \`<div style="color: \${color}">[\${time}] \${message}</div>\`;
+            console[type](message);
+        }
+
+        function testLog() {
+            addOutput('This is a test log message', 'log');
+        }
+
+        function testError() {
+            addOutput('This is a test error message', 'error');
+        }
+
+        async function testNetwork() {
+            addOutput('Making network request...', 'log');
+            try {
+                const response = await fetch('https://api.github.com/users/github');
+                const data = await response.json();
+                addOutput('Network request successful: ' + JSON.stringify(data).substring(0, 100) + '...', 'log');
+            } catch (error) {
+                addOutput('Network request failed: ' + error.message, 'error');
+            }
+        }
+
+        // 自动记录一些日志
+        console.log('Test page loaded');
+        console.info('Extension test environment ready');
+    </script>
+</body>
+</html>
+  `;
+
+  const server = http.createServer((req, res) => {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(testHtml);
+  });
+
+  server.listen(port, () => {
+    logSuccess(`Test server running at http://localhost:${port}`);
+  });
+
+  return server;
+}
+
+// 主函数
+async function main() {
+  console.clear();
+  log(
+    `
+╔════════════════════════════════════════════════════════════════╗
+║                                                                ║
+║     🚀 Qwen CLI Chrome Extension - Development Environment Setup        ║
+║                                                                ║
+╚════════════════════════════════════════════════════════════════╝
+`,
+    colors.bright + colors.cyan,
+  );
+
+  const extensionPath = path.join(__dirname, 'extension');
+
+  // Step 1: 检查 Chrome
+  logStep(1, 'Checking Chrome installation...');
+  const chromePath = getChromePath();
+
+  if (!chromePath) {
+    logError('Chrome not found! Please install Google Chrome.');
+    process.exit(1);
+  }
+
+  logSuccess(`Chrome found at: ${chromePath}`);
+
+  // Step 2: 安装 Native Host
+  const nativeHostInstalled = await installNativeHost(__dirname);
+  if (!nativeHostInstalled && process.platform === 'win32') {
+    logWarning(
+      'Please run install.bat as Administrator to complete Native Host setup',
+    );
+  }
+
+  // Step 3: 检查 Qwen CLI
+  const qwenInstalled = await checkQwenCli();
+
+  // Step 4: 启动 Qwen 服务器（如果已安装）
+  let qwenProcess = null;
+  if (qwenInstalled) {
+    qwenProcess = await startQwenServer(8080);
+  }
+
+  // Step 5: 启动测试服务器
+  const testServer = createTestServer(3000);
+
+  // Step 6: 启动 Chrome
+  await new Promise((resolve) => setTimeout(resolve, 1000)); // 等待服务器启动
+  const chromeProcess = startChrome(extensionPath, chromePath);
+
+  // 设置清理处理
+  const cleanup = () => {
+    log('\n\nShutting down...', colors.yellow);
+
+    if (qwenProcess) {
+      qwenProcess.kill();
+      logInfo('Qwen server stopped');
+    }
+
+    if (testServer) {
+      testServer.close();
+      logInfo('Test server stopped');
+    }
+
+    if (chromeProcess) {
+      chromeProcess.kill();
+      logInfo('Chrome stopped');
+    }
+
+    process.exit(0);
+  };
+
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+
+  // 显示使用说明
+  log(
+    `
+╔════════════════════════════════════════════════════════════════╗
+║                         ✅ Setup Complete!                     ║
+╠════════════════════════════════════════════════════════════════╣
+║                                                                ║
+║  📍 Chrome is running with the extension loaded                ║
+║  📍 Test page: http://localhost:3000                          ║
+║  ${qwenInstalled ? '📍 Qwen server: http://localhost:8080                        ' : '📍 Qwen CLI not installed (limited functionality)              '}║
+║                                                                ║
+║  📝 How to debug:                                              ║
+║  1. Click the extension icon in Chrome toolbar                 ║
+║  2. Open Chrome DevTools (F12) to see console logs            ║
+║  3. Check background page: chrome://extensions → Details      ║
+║  4. Native Host logs: /tmp/qwen-bridge-host.log              ║
+║                                                                ║
+║  🛑 Press Ctrl+C to stop all services                         ║
+║                                                                ║
+╚════════════════════════════════════════════════════════════════╝
+`,
+    colors.bright + colors.green,
+  );
+
+  // 保持进程运行
+  await new Promise(() => {});
+}
+
+// 运行
+main().catch((error) => {
+  logError(`Fatal error: ${error.message}`);
+  process.exit(1);
+});

packages/chrome-extension/scripts/first-install.sh

@@ -0,0 +1,120 @@
+#!/bin/bash
+
+# Qwen CLI Chrome Extension - 首次安装脚本
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+CYAN='\033[0;36m'
+NC='\033[0m'
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+clear
+echo -e "${CYAN}╔════════════════════════════════════════════════════════════════╗${NC}"
+echo -e "${CYAN}║                                                                ║${NC}"
+echo -e "${CYAN}║        🎯 Qwen CLI Chrome Extension - 首次安装向导                      ║${NC}"
+echo -e "${CYAN}║                                                                ║${NC}"
+echo -e "${CYAN}╚════════════════════════════════════════════════════════════════╝${NC}"
+echo ""
+
+echo -e "${YELLOW}这是首次安装，需要手动加载插件到 Chrome。${NC}"
+echo ""
+
+# 步骤 1: 配置 Native Host
+echo -e "${BLUE}步骤 1:${NC} 配置 Native Host..."
+
+MANIFEST_DIR="$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts"
+mkdir -p "$MANIFEST_DIR"
+
+# 先创建一个临时的 manifest，允许所有扩展
+cat > "$MANIFEST_DIR/com.qwen.cli.bridge.json" << EOF
+{
+  "name": "com.qwen.cli.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$SCRIPT_DIR/../native-host/src/host.js",
+  "type": "stdio",
+  "allowed_origins": ["chrome-extension://*/"]
+}
+EOF
+
+echo -e "${GREEN}✓${NC} Native Host 已配置"
+
+# 步骤 2: 打开 Chrome 扩展页面
+echo -e "\n${BLUE}步骤 2:${NC} 打开 Chrome 扩展管理页面..."
+
+open -a "Google Chrome" "chrome://extensions"
+sleep 2
+
+echo -e "${GREEN}✓${NC} 已打开扩展管理页面"
+
+# 步骤 3: 指导用户安装
+echo ""
+echo -e "${CYAN}════════════════════════════════════════════════════════════════${NC}"
+echo -e "${YELLOW}请按照以下步骤手动安装插件：${NC}"
+echo ""
+echo -e "  1️⃣  在 Chrome 扩展页面，${GREEN}开启「开发者模式」${NC}（右上角开关）"
+echo ""
+echo -e "  2️⃣  点击 ${GREEN}「加载已解压的扩展程序」${NC} 按钮"
+echo ""
+echo -e "  3️⃣  选择以下目录："
+echo -e "      ${BLUE}$SCRIPT_DIR/../extension${NC}"
+echo ""
+echo -e "  4️⃣  ${YELLOW}重要：${NC} 记下显示的扩展 ID（类似 ${CYAN}abcdefghijklmnopqrstuvwx${NC}）"
+echo ""
+echo -e "${CYAN}════════════════════════════════════════════════════════════════${NC}"
+echo ""
+
+# 等待用户输入扩展 ID
+echo -e "${YELLOW}请输入扩展 ID（安装后显示的 ID）：${NC}"
+read -p "> " EXTENSION_ID
+
+if [[ -z "$EXTENSION_ID" ]]; then
+    echo -e "${RED}✗ 未输入扩展 ID${NC}"
+    echo -e "${YELLOW}你可以稍后手动更新 Native Host 配置${NC}"
+else
+    # 更新 manifest 文件，添加具体的扩展 ID
+    cat > "$MANIFEST_DIR/com.qwen.cli.bridge.json" << EOF
+{
+  "name": "com.qwen.cli.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$SCRIPT_DIR/../native-host/src/host.js",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://$EXTENSION_ID/",
+    "chrome-extension://*/"
+  ]
+}
+EOF
+
+    # 保存扩展 ID 供后续使用
+    echo "$EXTENSION_ID" > "$SCRIPT_DIR/.extension-id"
+
+    echo -e "${GREEN}✓${NC} Native Host 已更新，支持扩展 ID: $EXTENSION_ID"
+fi
+
+echo ""
+echo -e "${GREEN}════════════════════════════════════════════════════════════════${NC}"
+echo -e "${GREEN}                    ✅ 首次安装完成！                           ${NC}"
+echo -e "${GREEN}════════════════════════════════════════════════════════════════${NC}"
+echo ""
+echo -e "现在你可以："
+echo ""
+echo -e "  1. 运行 ${CYAN}npm run dev${NC} 启动调试环境"
+echo -e "  2. 点击 Chrome 工具栏的插件图标开始使用"
+echo ""
+echo -e "${YELLOW}提示：${NC}"
+echo -e "  • 如果看不到插件图标，点击拼图图标并固定插件"
+echo -e "  • 首次连接可能需要刷新页面"
+echo ""
+
+# 询问是否立即启动
+echo -e "${CYAN}是否立即启动调试环境？(y/n)${NC}"
+read -p "> " START_NOW
+
+if [[ "$START_NOW" == "y" ]] || [[ "$START_NOW" == "Y" ]]; then
+    echo -e "\n${GREEN}正在启动调试环境...${NC}\n"
+    exec "$SCRIPT_DIR/debug.sh"
+fi

packages/chrome-extension/scripts/set-extension-id.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+echo "🔧 配置 Native Host 使用特定扩展 ID..."
+
+EXTENSION_ID="cimaabkejokbhjkdnajgfniiolfjgbhd"
+CONFIG_FILE="$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.qwen.cli.bridge.json"
+RUN_SCRIPT="$PWD/native-host/run.sh"
+
+# 创建配置（使用特定扩展 ID）
+cat > "$CONFIG_FILE" <<EOF
+{
+  "name": "com.qwen.cli.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$RUN_SCRIPT",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://$EXTENSION_ID/"
+  ]
+}
+EOF
+
+echo "✅ 配置已更新（仅允许扩展 ID: $EXTENSION_ID）"
+echo ""
+cat "$CONFIG_FILE"

packages/chrome-extension/scripts/start.sh

@@ -0,0 +1,300 @@
+#!/bin/bash
+
+# 快速启动脚本 - 适用于 macOS/Linux
+# 一键启动所有服务进行调试
+
+set -e
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# 打印带颜色的消息
+print_info() {
+    echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+print_success() {
+    echo -e "${GREEN}[✓]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[!]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[✗]${NC} $1"
+}
+
+# 获取脚本所在目录
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+EXTENSION_DIR="$SCRIPT_DIR/extension"
+NATIVE_HOST_DIR="$SCRIPT_DIR/native-host"
+
+# 清屏并显示标题
+clear
+echo "======================================"
+echo "  Qwen CLI Chrome Extension - Quick Start"
+echo "======================================"
+echo ""
+
+# 1. 检查 Chrome 是否安装
+print_info "Checking Chrome installation..."
+
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+    if [[ ! -f "$CHROME_PATH" ]]; then
+        CHROME_PATH="/Applications/Chromium.app/Contents/MacOS/Chromium"
+    fi
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    CHROME_PATH=$(which google-chrome || which chromium-browser || which chromium || echo "")
+fi
+
+if [[ -z "$CHROME_PATH" ]] || [[ ! -f "$CHROME_PATH" ]]; then
+    print_error "Chrome not found! Please install Google Chrome first."
+    exit 1
+fi
+
+print_success "Chrome found: $CHROME_PATH"
+
+# 2. 快速安装 Native Host (如果需要)
+print_info "Setting up Native Host..."
+
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    MANIFEST_DIR="$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts"
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    MANIFEST_DIR="$HOME/.config/google-chrome/NativeMessagingHosts"
+fi
+
+mkdir -p "$MANIFEST_DIR"
+
+# 创建 manifest
+cat > "$MANIFEST_DIR/com.qwen.cli.bridge.json" << EOF
+{
+  "name": "com.qwen.cli.bridge",
+  "description": "Native messaging host for Qwen CLI Chrome Extension",
+  "path": "$NATIVE_HOST_DIR/host.js",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://*/",
+    "chrome-extension://jniepomhbdkeifkadbfolbcihcmfpfjo/"
+  ]
+}
+EOF
+
+print_success "Native Host configured"
+
+# 3. 检查 Qwen CLI
+print_info "Checking Qwen CLI..."
+
+if command -v qwen &> /dev/null; then
+    print_success "Qwen CLI is installed"
+    QWEN_VERSION=$(qwen --version 2>/dev/null || echo "unknown")
+    print_info "Version: $QWEN_VERSION"
+
+    # 尝试启动 Qwen server
+    print_info "Starting Qwen server on port 8080..."
+
+    # 检查端口是否被占用
+    if lsof -i:8080 &> /dev/null; then
+        print_warning "Port 8080 is already in use, skipping Qwen server start"
+    else
+        # 在后台启动 Qwen server
+        nohup qwen server --port 8080 > /tmp/qwen-server.log 2>&1 &
+        QWEN_PID=$!
+        sleep 2
+
+        if kill -0 $QWEN_PID 2>/dev/null; then
+            print_success "Qwen server started (PID: $QWEN_PID)"
+            echo $QWEN_PID > /tmp/qwen-server.pid
+        else
+            print_warning "Failed to start Qwen server, continuing anyway..."
+        fi
+    fi
+else
+    print_warning "Qwen CLI not installed - some features will be limited"
+fi
+
+# 4. 启动简单的测试服务器
+print_info "Starting test server..."
+
+# 创建简单的 Python HTTP 服务器
+cat > /tmp/test-server.py << 'EOF'
+#!/usr/bin/env python3
+import http.server
+import socketserver
+
+PORT = 3000
+
+html_content = """
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Qwen CLI Chrome Extension Test</title>
+    <style>
+        body {
+            font-family: Arial;
+            padding: 40px;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+        }
+        .container {
+            background: white;
+            color: #333;
+            padding: 30px;
+            border-radius: 10px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        h1 { color: #667eea; }
+        button {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            margin: 5px;
+            cursor: pointer;
+        }
+        button:hover { opacity: 0.9; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚀 Qwen CLI Chrome Extension Test Page</h1>
+        <p>Extension debugging environment is ready!</p>
+
+        <h2>Quick Tests</h2>
+        <button onclick="console.log('Test log message')">Test Console Log</button>
+        <button onclick="console.error('Test error message')">Test Console Error</button>
+        <button onclick="fetch('/api/test').catch(e => console.error(e))">Test Network Request</button>
+
+        <h2>Instructions</h2>
+        <ol>
+            <li>Click the extension icon in Chrome toolbar</li>
+            <li>Click "Connect to Qwen CLI"</li>
+            <li>Try the various features</li>
+            <li>Open DevTools (F12) to see console output</li>
+        </ol>
+
+        <h2>Sample Content</h2>
+        <p>This is sample text content that can be extracted by the extension.</p>
+        <ul>
+            <li>Item 1: Lorem ipsum dolor sit amet</li>
+            <li>Item 2: Consectetur adipiscing elit</li>
+            <li>Item 3: Sed do eiusmod tempor</li>
+        </ul>
+    </div>
+
+    <script>
+        console.log('Test page loaded successfully');
+        console.info('Ready for debugging');
+    </script>
+</body>
+</html>
+"""
+
+class MyHandler(http.server.SimpleHTTPRequestHandler):
+    def do_GET(self):
+        self.send_response(200)
+        self.send_header('Content-type', 'text/html')
+        self.end_headers()
+        self.wfile.write(html_content.encode())
+
+with socketserver.TCPServer(("", PORT), MyHandler) as httpd:
+    print(f"Test server running at http://localhost:{PORT}")
+    httpd.serve_forever()
+EOF
+
+python3 /tmp/test-server.py > /tmp/test-server.log 2>&1 &
+TEST_SERVER_PID=$!
+echo $TEST_SERVER_PID > /tmp/test-server.pid
+sleep 1
+
+print_success "Test server started at http://localhost:3000"
+
+# 5. 启动 Chrome
+print_info "Starting Chrome with extension..."
+
+# Chrome 参数
+CHROME_ARGS=(
+    "--load-extension=$EXTENSION_DIR"
+    "--auto-open-devtools-for-tabs"
+    "--no-first-run"
+    "--no-default-browser-check"
+    "--disable-default-apps"
+    "http://localhost:3000"
+)
+
+# 启动 Chrome
+"$CHROME_PATH" "${CHROME_ARGS[@]}" &
+CHROME_PID=$!
+
+print_success "Chrome started with extension loaded"
+
+# 6. 显示状态和清理指令
+echo ""
+echo "======================================"
+echo "         ✅ All Services Running"
+echo "======================================"
+echo ""
+echo "📌 Chrome: Running (PID: $CHROME_PID)"
+echo "📌 Test Page: http://localhost:3000"
+if [[ -n "${QWEN_PID:-}" ]]; then
+    echo "📌 Qwen Server: http://localhost:8080 (PID: $QWEN_PID)"
+fi
+echo "📌 Extension: Loaded in Chrome toolbar"
+echo ""
+echo "📝 Debug Locations:"
+echo "   • Extension Logs: Chrome DevTools Console"
+echo "   • Background Page: chrome://extensions → Service Worker"
+echo "   • Native Host Log: /tmp/qwen-bridge-host.log"
+if [[ -n "${QWEN_PID:-}" ]]; then
+    echo "   • Qwen Server Log: /tmp/qwen-server.log"
+fi
+echo ""
+echo "🛑 To stop all services, run: $SCRIPT_DIR/stop.sh"
+echo "   Or press Ctrl+C to stop this script"
+echo ""
+
+# 创建停止脚本
+cat > "$SCRIPT_DIR/stop.sh" << 'STOP_SCRIPT'
+#!/bin/bash
+
+echo "Stopping services..."
+
+# 停止 Qwen server
+if [[ -f /tmp/qwen-server.pid ]]; then
+    PID=$(cat /tmp/qwen-server.pid)
+    if kill -0 $PID 2>/dev/null; then
+        kill $PID
+        echo "✓ Qwen server stopped"
+    fi
+    rm /tmp/qwen-server.pid
+fi
+
+# 停止测试服务器
+if [[ -f /tmp/test-server.pid ]]; then
+    PID=$(cat /tmp/test-server.pid)
+    if kill -0 $PID 2>/dev/null; then
+        kill $PID
+        echo "✓ Test server stopped"
+    fi
+    rm /tmp/test-server.pid
+fi
+
+echo "✓ All services stopped"
+STOP_SCRIPT
+
+chmod +x "$SCRIPT_DIR/stop.sh"
+
+# 等待用户中断
+trap 'echo "Stopping services..."; $SCRIPT_DIR/stop.sh; exit 0' INT TERM
+
+# 保持脚本运行
+while true; do
+    sleep 1
+done

packages/chrome-extension/src/content/content-script.js

@@ -0,0 +1,491 @@
+/**
+ * Content Script for Qwen CLI Chrome Extension
+ * Extracts data from web pages and communicates with background script
+ */
+
+if (window.__QWEN_BRIDGE_CONTENT_SCRIPT_LOADED__) {
+  console.debug('Qwen Bridge content script already loaded, skipping.');
+} else {
+  window.__QWEN_BRIDGE_CONTENT_SCRIPT_LOADED__ = true;
+
+  // Data extraction functions
+  function extractPageData() {
+    const data = {
+      // Basic page info
+      url: window.location.href,
+      title: document.title,
+      domain: window.location.hostname,
+      path: window.location.pathname,
+      timestamp: new Date().toISOString(),
+
+      // Meta information
+      meta: {},
+
+      // Page content
+      content: {
+        text: '',
+        html: '',
+        markdown: '',
+      },
+
+      // Structured data
+      links: [],
+      images: [],
+      forms: [],
+
+      // Console logs
+      consoleLogs: [],
+
+      // Performance metrics
+      performance: {},
+    };
+
+    // Extract meta tags
+    document.querySelectorAll('meta').forEach((meta) => {
+      const name = meta.getAttribute('name') || meta.getAttribute('property');
+      const content = meta.getAttribute('content');
+      if (name && content) {
+        data.meta[name] = content;
+      }
+    });
+
+    // Extract main content (try to find article or main element first)
+    const mainContent =
+      document.querySelector('article, main, [role="main"]') || document.body;
+    data.content.text = extractTextContent(mainContent);
+    data.content.html = mainContent.innerHTML;
+    data.content.markdown = htmlToMarkdown(mainContent);
+
+    // Extract all links
+    document.querySelectorAll('a[href]').forEach((link) => {
+      data.links.push({
+        text: link.textContent.trim(),
+        href: link.href,
+        target: link.target,
+        isExternal: isExternalLink(link.href),
+      });
+    });
+
+    // Extract all images
+    document.querySelectorAll('img').forEach((img) => {
+      data.images.push({
+        src: img.src,
+        alt: img.alt,
+        title: img.title,
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+      });
+    });
+
+    // Extract form data (structure only, no sensitive data)
+    document.querySelectorAll('form').forEach((form) => {
+      const formData = {
+        action: form.action,
+        method: form.method,
+        fields: [],
+      };
+
+      form.querySelectorAll('input, textarea, select').forEach((field) => {
+        formData.fields.push({
+          type: field.type || field.tagName.toLowerCase(),
+          name: field.name,
+          id: field.id,
+          placeholder: field.placeholder,
+          required: field.required,
+        });
+      });
+
+      data.forms.push(formData);
+    });
+
+    // Get performance metrics
+    if (window.performance && window.performance.timing) {
+      const perf = window.performance.timing;
+      data.performance = {
+        loadTime: perf.loadEventEnd - perf.navigationStart,
+        domReady: perf.domContentLoadedEventEnd - perf.navigationStart,
+        firstPaint: getFirstPaintTime(),
+      };
+    }
+
+    return data;
+  }
+
+  // Extract clean text content
+  function extractTextContent(element) {
+    // Clone the element to avoid modifying the original
+    const clone = element.cloneNode(true);
+
+    // Remove script and style elements
+    clone
+      .querySelectorAll('script, style, noscript')
+      .forEach((el) => el.remove());
+
+    // Get text content and clean it up
+    let text = clone.textContent || '';
+
+    // Remove excessive whitespace
+    text = text.replace(/\s+/g, ' ').trim();
+
+    // Limit length to prevent excessive data
+    const maxLength = 50000; // 50KB limit
+    if (text.length > maxLength) {
+      text = text.substring(0, maxLength) + '...';
+    }
+
+    return text;
+  }
+
+  // Simple HTML to Markdown converter
+  function htmlToMarkdown(element) {
+    const clone = element.cloneNode(true);
+
+    // Remove script and style elements
+    clone
+      .querySelectorAll('script, style, noscript')
+      .forEach((el) => el.remove());
+
+    let markdown = '';
+    const walker = document.createTreeWalker(
+      clone,
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
+      null,
+      false,
+    );
+
+    let node;
+    let listStack = [];
+
+    while ((node = walker.nextNode())) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent.trim();
+        if (text) {
+          markdown += text + ' ';
+        }
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        switch (node.tagName.toLowerCase()) {
+          case 'h1':
+            markdown += '\n# ' + node.textContent.trim() + '\n';
+            break;
+          case 'h2':
+            markdown += '\n## ' + node.textContent.trim() + '\n';
+            break;
+          case 'h3':
+            markdown += '\n### ' + node.textContent.trim() + '\n';
+            break;
+          case 'h4':
+            markdown += '\n#### ' + node.textContent.trim() + '\n';
+            break;
+          case 'h5':
+            markdown += '\n##### ' + node.textContent.trim() + '\n';
+            break;
+          case 'h6':
+            markdown += '\n###### ' + node.textContent.trim() + '\n';
+            break;
+          case 'p':
+            markdown += '\n' + node.textContent.trim() + '\n';
+            break;
+          case 'br':
+            markdown += '\n';
+            break;
+          case 'a':
+            const href = node.getAttribute('href');
+            const text = node.textContent.trim();
+            if (href) {
+              markdown += `[${text}](${href}) `;
+            }
+            break;
+          case 'img':
+            const src = node.getAttribute('src');
+            const alt = node.getAttribute('alt') || '';
+            if (src) {
+              markdown += `![${alt}](${src}) `;
+            }
+            break;
+          case 'ul':
+          case 'ol':
+            markdown += '\n';
+            listStack.push(node.tagName.toLowerCase());
+            break;
+          case 'li':
+            const listType = listStack[listStack.length - 1];
+            const prefix = listType === 'ol' ? '1. ' : '- ';
+            markdown += prefix + node.textContent.trim() + '\n';
+            break;
+          case 'code':
+            markdown += '`' + node.textContent + '`';
+            break;
+          case 'pre':
+            markdown += '\n```\n' + node.textContent + '\n```\n';
+            break;
+          case 'blockquote':
+            markdown += '\n> ' + node.textContent.trim() + '\n';
+            break;
+          case 'strong':
+          case 'b':
+            markdown += '**' + node.textContent + '**';
+            break;
+          case 'em':
+          case 'i':
+            markdown += '*' + node.textContent + '*';
+            break;
+        }
+      }
+    }
+
+    // Limit markdown length
+    const maxLength = 30000;
+    if (markdown.length > maxLength) {
+      markdown = markdown.substring(0, maxLength) + '...';
+    }
+
+    return markdown.trim();
+  }
+
+  // Check if link is external
+  function isExternalLink(url) {
+    try {
+      const link = new URL(url);
+      return link.hostname !== window.location.hostname;
+    } catch {
+      return false;
+    }
+  }
+
+  // Get first paint time
+  function getFirstPaintTime() {
+    if (window.performance && window.performance.getEntriesByType) {
+      const paintEntries = window.performance.getEntriesByType('paint');
+      const firstPaint = paintEntries.find(
+        (entry) => entry.name === 'first-paint',
+      );
+      return firstPaint ? firstPaint.startTime : null;
+    }
+    return null;
+  }
+
+  // Console log interceptor
+  const consoleLogs = [];
+  const originalConsole = {
+    log: console.log,
+    error: console.error,
+    warn: console.warn,
+    info: console.info,
+  };
+
+  // Intercept console methods
+  ['log', 'error', 'warn', 'info'].forEach((method) => {
+    console[method] = function (...args) {
+      // Store the log
+      consoleLogs.push({
+        type: method,
+        message: args
+          .map((arg) => {
+            try {
+              if (typeof arg === 'object') {
+                return JSON.stringify(arg);
+              }
+              return String(arg);
+            } catch {
+              return String(arg);
+            }
+          })
+          .join(' '),
+        timestamp: new Date().toISOString(),
+        stack: new Error().stack,
+      });
+
+      // Keep only last 100 logs to prevent memory issues
+      if (consoleLogs.length > 100) {
+        consoleLogs.shift();
+      }
+
+      // Call original console method
+      originalConsole[method].apply(console, args);
+    };
+  });
+
+  // Get selected text
+  function getSelectedText() {
+    return window.getSelection().toString();
+  }
+
+  // Highlight element on page
+  function highlightElement(selector) {
+    try {
+      const element = document.querySelector(selector);
+      if (element) {
+        // Store original style
+        const originalStyle = element.style.cssText;
+
+        // Apply highlight
+        element.style.cssText += `
+        outline: 3px solid #FF6B6B !important;
+        background-color: rgba(255, 107, 107, 0.1) !important;
+        transition: all 0.3s ease !important;
+      `;
+
+        // Remove highlight after 3 seconds
+        setTimeout(() => {
+          element.style.cssText = originalStyle;
+        }, 3000);
+
+        return true;
+      }
+      return false;
+    } catch (error) {
+      console.error('Failed to highlight element:', error);
+      return false;
+    }
+  }
+
+  // Execute custom JavaScript in page context
+  function executeInPageContext(code) {
+    try {
+      const script = document.createElement('script');
+      script.textContent = `
+      (function() {
+        try {
+          const result = ${code};
+          window.postMessage({
+            type: 'QWEN_BRIDGE_RESULT',
+            success: true,
+            result: result
+          }, '*');
+        } catch (error) {
+          window.postMessage({
+            type: 'QWEN_BRIDGE_RESULT',
+            success: false,
+            error: error.message
+          }, '*');
+        }
+      })();
+    `;
+      document.documentElement.appendChild(script);
+      script.remove();
+
+      return new Promise((resolve, reject) => {
+        const listener = (event) => {
+          if (event.data && event.data.type === 'QWEN_BRIDGE_RESULT') {
+            window.removeEventListener('message', listener);
+            if (event.data.success) {
+              resolve(event.data.result);
+            } else {
+              reject(new Error(event.data.error));
+            }
+          }
+        };
+        window.addEventListener('message', listener);
+
+        // Timeout after 5 seconds
+        setTimeout(() => {
+          window.removeEventListener('message', listener);
+          reject(new Error('Execution timeout'));
+        }, 5000);
+      });
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+
+  // Message listener for communication with background script
+  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    console.log('Content script received message:', request);
+
+    switch (request.type) {
+      case 'EXTRACT_DATA':
+        // Extract and send page data
+        const pageData = extractPageData();
+        pageData.consoleLogs = consoleLogs;
+        sendResponse({
+          success: true,
+          data: pageData,
+        });
+        break;
+
+      case 'GET_CONSOLE_LOGS':
+        // Get captured console logs
+        sendResponse({
+          success: true,
+          data: consoleLogs.slice(), // Return a copy
+        });
+        break;
+
+      case 'GET_SELECTED_TEXT':
+        // Get currently selected text
+        sendResponse({
+          success: true,
+          data: getSelectedText(),
+        });
+        break;
+
+      case 'HIGHLIGHT_ELEMENT':
+        // Highlight an element on the page
+        const highlighted = highlightElement(request.selector);
+        sendResponse({
+          success: highlighted,
+        });
+        break;
+
+      case 'EXECUTE_CODE':
+        // Execute JavaScript in page context
+        executeInPageContext(request.code)
+          .then((result) => {
+            sendResponse({
+              success: true,
+              data: result,
+            });
+          })
+          .catch((error) => {
+            sendResponse({
+              success: false,
+              error: error.message,
+            });
+          });
+        return true; // Will respond asynchronously
+
+      case 'SCROLL_TO':
+        // Scroll to specific position
+        window.scrollTo({
+          top: request.y || 0,
+          left: request.x || 0,
+          behavior: request.smooth ? 'smooth' : 'auto',
+        });
+        sendResponse({ success: true });
+        break;
+
+      case 'QWEN_EVENT':
+        // Handle events from Qwen CLI
+        console.log('Qwen event received:', request.event);
+        // Could trigger UI updates or other actions based on event
+        break;
+
+      default:
+        sendResponse({
+          success: false,
+          error: 'Unknown request type',
+        });
+    }
+  });
+
+  // Notify background script that content script is loaded
+  chrome.runtime
+    .sendMessage({
+      type: 'CONTENT_SCRIPT_LOADED',
+      url: window.location.href,
+    })
+    .catch(() => {
+      // Ignore errors if background script is not ready
+    });
+
+  // Export for testing
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+      extractPageData,
+      extractTextContent,
+      htmlToMarkdown,
+      getSelectedText,
+      highlightElement,
+    };
+  }
+}

packages/chrome-extension/src/sidepanel/App.tsx

@@ -0,0 +1,773 @@
+/**
+ * Chrome Extension Side Panel App
+ * Simplified version adapted from vscode-ide-companion
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useVSCode } from './hooks/useVSCode.js';
+import { InputForm } from './components/layout/InputForm.js';
+import { EmptyState } from './components/layout/EmptyState.js';
+import {
+  UserMessage,
+  AssistantMessage,
+  WaitingMessage,
+} from './components/messages/index.js';
+import { PermissionDrawer } from './components/PermissionDrawer/PermissionDrawer.js';
+import type {
+  PermissionOption,
+  ToolCall,
+} from './components/PermissionDrawer/PermissionRequest.js';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: number;
+}
+
+export const App: React.FC = () => {
+  const vscode = useVSCode();
+
+  // State
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputText, setInputText] = useState('');
+  const [isConnected, setIsConnected] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
+  const [loadingMessage, setLoadingMessage] = useState<string | null>(null);
+  const [streamingContent, setStreamingContent] = useState('');
+  // Debug: cache slash-commands (available_commands_update) & MCP tools list
+  const [availableCommands, setAvailableCommands] = useState<any[]>([]);
+  const [mcpTools, setMcpTools] = useState<any[]>([]);
+  const [internalTools, setInternalTools] = useState<any[]>([]);
+  const [showToolsPanel, setShowToolsPanel] = useState(false);
+  const [authUri, setAuthUri] = useState<string | null>(null);
+  const [isComposing, setIsComposing] = useState(false);
+  const [permissionRequest, setPermissionRequest] = useState<{
+    requestId: number;
+    options: PermissionOption[];
+    toolCall: ToolCall;
+  } | null>(null);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const inputFieldRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, streamingContent]);
+
+  // Listen for messages from background script
+  useEffect(() => {
+    const handleMessage = (message: { type: string; data?: unknown }) => {
+      console.log('[App] Received message:', message);
+
+      switch (message.type) {
+        case 'STATUS_UPDATE':
+          const statusData = message.data as { status: string } | undefined;
+          if (statusData && 'status' in statusData) {
+            setIsConnected(statusData.status !== 'disconnected');
+          } else {
+            setIsConnected(false); // default to disconnected if status data is missing
+          }
+          break;
+        case 'hostInfo': {
+          console.log('[HostInfo]', (message as any).data);
+          break;
+        }
+        case 'hostLog': {
+          const line = (message as { data?: { line?: string } }).data?.line;
+          if (line) console.log('[HostLog]', line);
+          break;
+        }
+        case 'authUpdate': {
+          const uri = (message as { data?: { authUri?: string } }).data
+            ?.authUri;
+          if (uri) setAuthUri(uri);
+          break;
+        }
+        case 'availableCommands': {
+          const cmds =
+            (message as { data?: { availableCommands?: any[] } }).data
+              ?.availableCommands || [];
+          setAvailableCommands(cmds);
+          console.log('[App] Available commands:', cmds);
+          break;
+        }
+        case 'mcpTools': {
+          const tools =
+            (message as { data?: { tools?: any[] } }).data?.tools || [];
+          setMcpTools(tools);
+          console.log('[App] MCP tools:', tools);
+          break;
+        }
+        case 'internalMcpTools': {
+          const tools =
+            (message as { data?: { tools?: any[] } }).data?.tools || [];
+          setInternalTools(tools);
+          console.log('[App] Internal MCP tools:', tools);
+          break;
+        }
+
+        case 'toolProgress': {
+          const payload =
+            (
+              message as {
+                data?: {
+                  name?: string;
+                  stage?: string;
+                  ok?: boolean;
+                  error?: string;
+                };
+              }
+            ).data || ({} as any);
+          const name = payload.name || '';
+          const stage = payload.stage || '';
+          const ok = payload.ok;
+          const pretty = (n: string) => {
+            switch (n) {
+              case 'read_page':
+                return 'Read Page';
+              case 'capture_screenshot':
+                return 'Capture Screenshot';
+              case 'get_network_logs':
+                return 'Get Network Logs';
+              case 'get_console_logs':
+                return 'Get Console Logs';
+              default:
+                return n;
+            }
+          };
+          if (stage === 'start') {
+            setMessages((prev) => [
+              ...prev,
+              {
+                role: 'assistant',
+                content: `Running tool: ${pretty(name)}…`,
+                timestamp: Date.now(),
+              },
+            ]);
+          } else if (stage === 'end') {
+            const endText =
+              ok === false
+                ? `Tool failed: ${pretty(name)}${payload.error ? ` — ${payload.error}` : ''}`
+                : `Tool finished: ${pretty(name)}`;
+            setMessages((prev) => [
+              ...prev,
+              { role: 'assistant', content: endText, timestamp: Date.now() },
+            ]);
+          }
+          break;
+        }
+
+        case 'streamStart':
+          setIsStreaming(true);
+          setIsWaitingForResponse(false);
+          setStreamingContent('');
+          break;
+
+        case 'streamChunk':
+          setStreamingContent(
+            (prev) =>
+              prev +
+              ((message as { data: { chunk: string } }).data?.chunk || ''),
+          );
+          break;
+
+        case 'streamEnd':
+          if (streamingContent) {
+            setMessages((prev) => [
+              ...prev,
+              {
+                role: 'assistant',
+                content: streamingContent,
+                timestamp: Date.now(),
+              },
+            ]);
+          }
+          setIsStreaming(false);
+          setStreamingContent('');
+          break;
+
+        case 'message':
+          const msgData = (message as { data: Message }).data;
+          if (msgData) {
+            setMessages((prev) => [
+              ...prev,
+              {
+                role: msgData.role,
+                content: msgData.content,
+                timestamp: msgData.timestamp || Date.now(),
+              },
+            ]);
+          }
+          break;
+
+        case 'error':
+          setIsStreaming(false);
+          setIsWaitingForResponse(false);
+          setLoadingMessage(null);
+          break;
+
+        case 'permissionRequest':
+          // Handle permission request from Qwen CLI
+          console.log('[App] Permission request:', message);
+          const permData = (
+            message as {
+              data: {
+                requestId: number;
+                options: PermissionOption[];
+                toolCall: ToolCall;
+              };
+            }
+          ).data;
+          if (permData) {
+            setPermissionRequest({
+              requestId: permData.requestId,
+              options: permData.options,
+              toolCall: permData.toolCall,
+            });
+          }
+          break;
+      }
+    };
+
+    // Add Chrome message listener
+    if (typeof chrome !== 'undefined' && chrome.runtime) {
+      chrome.runtime.onMessage.addListener(handleMessage);
+      return () => {
+        chrome.runtime.onMessage.removeListener(handleMessage);
+      };
+    }
+  }, [streamingContent]);
+
+  // Check connection status on mount
+  useEffect(() => {
+    const checkStatus = async () => {
+      const response = (await vscode.postMessage({ type: 'GET_STATUS' })) as {
+        connected?: boolean;
+        status?: string;
+        availableCommands?: any[];
+        mcpTools?: any[];
+        internalTools?: any[];
+      } | null;
+      if (response) {
+        setIsConnected(response.connected || false);
+        if (Array.isArray(response.availableCommands)) {
+          setAvailableCommands(response.availableCommands);
+        }
+        if (Array.isArray(response.mcpTools)) {
+          setMcpTools(response.mcpTools);
+        }
+        if (Array.isArray(response.internalTools)) {
+          setInternalTools(response.internalTools);
+        }
+      }
+    };
+    checkStatus();
+  }, [vscode]);
+
+  // Handle submit
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      const text = inputText.trim();
+      if (!text || isStreaming || isWaitingForResponse) return;
+
+      // Add user message
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'user',
+          content: text,
+          timestamp: Date.now(),
+        },
+      ]);
+
+      // Clear input
+      setInputText('');
+      if (inputFieldRef.current) {
+        inputFieldRef.current.textContent = '';
+      }
+
+      // Send to background
+      setIsWaitingForResponse(true);
+      setLoadingMessage('Thinking...');
+
+      await vscode.postMessage({
+        type: 'sendMessage',
+        data: { text },
+      });
+    },
+    [inputText, isStreaming, isWaitingForResponse, vscode],
+  );
+
+  // Handle cancel
+  const handleCancel = useCallback(async () => {
+    await vscode.postMessage({ type: 'cancelStreaming', data: {} });
+    setIsStreaming(false);
+    setIsWaitingForResponse(false);
+    setLoadingMessage(null);
+  }, [vscode]);
+
+  // Handle connect
+  const handleConnect = useCallback(async () => {
+    setLoadingMessage('Connecting...');
+    const response = (await vscode.postMessage({ type: 'CONNECT' })) as {
+      success?: boolean;
+      status?: string;
+    } | null;
+    if (response?.success) {
+      setIsConnected(true);
+      setLoadingMessage(null);
+    } else {
+      setLoadingMessage('Connection failed');
+      setTimeout(() => setLoadingMessage(null), 3000);
+    }
+  }, [vscode]);
+
+  // Read current page and ask Qwen to analyze (bypasses MCP; uses content-script extractor)
+  const handleReadPage = useCallback(async () => {
+    try {
+      setIsWaitingForResponse(true);
+      setLoadingMessage('Reading page...');
+      const extract = (await vscode.postMessage({
+        type: 'EXTRACT_PAGE_DATA',
+      })) as any;
+      if (!extract || !extract.success) {
+        setIsWaitingForResponse(false);
+        setLoadingMessage(null);
+        setMessages((prev) => [
+          ...prev,
+          {
+            role: 'assistant',
+            content: `Read Page failed: ${extract?.error || 'unknown error'}`,
+            timestamp: Date.now(),
+          },
+        ]);
+        return;
+      }
+      await vscode.postMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'analyze_page',
+        data: extract.data,
+      });
+      // streamStart will arrive from service worker; keep waiting state until it starts streaming
+    } catch (err: any) {
+      setIsWaitingForResponse(false);
+      setLoadingMessage(null);
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: `Read Page error: ${err?.message || String(err)}`,
+          timestamp: Date.now(),
+        },
+      ]);
+    }
+  }, [vscode]);
+
+  // Get network logs and send to Qwen to analyze (bypasses MCP; uses debugger API)
+  const handleGetNetworkLogs = useCallback(async () => {
+    try {
+      setIsWaitingForResponse(true);
+      setLoadingMessage('Collecting network logs...');
+      const resp = (await vscode.postMessage({
+        type: 'GET_NETWORK_LOGS',
+      })) as any;
+      if (!resp || !resp.success) {
+        setIsWaitingForResponse(false);
+        setLoadingMessage(null);
+        setMessages((prev) => [
+          ...prev,
+          {
+            role: 'assistant',
+            content: `Get Network Logs failed: ${resp?.error || 'unknown error'}`,
+            timestamp: Date.now(),
+          },
+        ]);
+        return;
+      }
+      const logs = resp.data || resp.logs || [];
+      const summary = Array.isArray(logs) ? logs.slice(-50) : [];
+      const text =
+        `Network logs (last ${summary.length} entries):\n` +
+        JSON.stringify(
+          summary.map((l: any) => ({
+            method: l.method,
+            url: l.params?.request?.url || l.params?.documentURL,
+            status: l.params?.response?.status,
+            timestamp: l.timestamp,
+          })),
+          null,
+          2,
+        );
+      // Show a short message to user
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: 'Running tool: Get Network Logs…',
+          timestamp: Date.now(),
+        },
+      ]);
+      // Ask Qwen to analyze
+      await vscode.postMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'ai_analyze',
+        data: {
+          pageData: { content: { text } },
+          prompt:
+            'Please analyze these network logs, list failed or slow requests and possible causes.',
+        },
+      });
+    } catch (err: any) {
+      setIsWaitingForResponse(false);
+      setLoadingMessage(null);
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: `Get Network Logs error: ${err?.message || String(err)}`,
+          timestamp: Date.now(),
+        },
+      ]);
+    }
+  }, [vscode]);
+
+  // Handle permission response
+  const handlePermissionResponse = useCallback(
+    (optionId: string) => {
+      if (!permissionRequest) return;
+
+      console.log(
+        '[App] Sending permission response:',
+        optionId,
+        'for requestId:',
+        permissionRequest.requestId,
+      );
+      vscode.postMessage({
+        type: 'permissionResponse',
+        data: {
+          requestId: permissionRequest.requestId,
+          optionId,
+        },
+      });
+      setPermissionRequest(null);
+    },
+    [vscode, permissionRequest],
+  );
+
+  // Get console logs and send to Qwen to analyze (bypasses MCP; uses content-script capture)
+  const handleGetConsoleLogs = useCallback(async () => {
+    try {
+      setIsWaitingForResponse(true);
+      setLoadingMessage('Collecting console logs...');
+      const resp = (await vscode.postMessage({
+        type: 'GET_CONSOLE_LOGS',
+      })) as any;
+      if (!resp || !resp.success) {
+        setIsWaitingForResponse(false);
+        setLoadingMessage(null);
+        setMessages((prev) => [
+          ...prev,
+          {
+            role: 'assistant',
+            content: `Get Console Logs failed: ${resp?.error || 'unknown error'}`,
+            timestamp: Date.now(),
+          },
+        ]);
+        return;
+      }
+      const logs = resp.data || [];
+      const formatted = logs
+        .slice(-50)
+        .map((l: any) => `[${l.type}] ${l.message}`)
+        .join('\n');
+      const text = `Console logs (last ${Math.min(logs.length, 50)} entries):
+${formatted || '(no logs captured)'}`;
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: 'Running tool: Get Console Logs…',
+          timestamp: Date.now(),
+        },
+      ]);
+      await vscode.postMessage({
+        type: 'SEND_TO_QWEN',
+        action: 'ai_analyze',
+        data: {
+          pageData: { content: { text } },
+          prompt:
+            'Please analyze these console logs and summarize errors/warnings.',
+        },
+      });
+    } catch (err: any) {
+      setIsWaitingForResponse(false);
+      setLoadingMessage(null);
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: `Get Console Logs error: ${err?.message || String(err)}`,
+          timestamp: Date.now(),
+        },
+      ]);
+    }
+  }, [vscode]);
+
+  const hasContent = messages.length > 0 || isStreaming || streamingContent;
+
+  return (
+    <div className="chat-container relative flex flex-col h-screen bg-[#1e1e1e] text-white">
+      {/* Header */}
+      <div className="flex items-center justify-between p-3 border-b border-gray-700">
+        <h1 className="text-sm font-medium">Qwen Code</h1>
+        <div className="flex items-center gap-2">
+          <span
+            className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-gray-500'}`}
+          />
+          <span className="text-xs text-gray-400">
+            {isConnected
+              ? `Connected (${mcpTools.length + internalTools.length} tools)`
+              : 'Disconnected'}
+          </span>
+          {isConnected && (
+            <button
+              className="text-xs px-2 py-0.5 rounded bg-gray-700 hover:bg-gray-600"
+              onClick={handleReadPage}
+              title="Read current page"
+            >
+              Read Page
+            </button>
+          )}
+          {isConnected && (
+            <button
+              className="text-xs px-2 py-0.5 rounded bg-gray-700 hover:bg-gray-600"
+              onClick={handleGetNetworkLogs}
+              title="Get network logs"
+            >
+              Network Logs
+            </button>
+          )}
+          {isConnected && (
+            <button
+              className="text-xs px-2 py-0.5 rounded bg-gray-700 hover:bg-gray-600"
+              onClick={handleGetConsoleLogs}
+              title="Get console logs"
+            >
+              Console Logs
+            </button>
+          )}
+          {isConnected && mcpTools.length + internalTools.length > 0 && (
+            <button
+              className="text-xs px-2 py-0.5 rounded bg-gray-700 hover:bg-gray-600"
+              onClick={() => setShowToolsPanel((v) => !v)}
+              title="Show available tools"
+            >
+              Tools
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div
+        ref={messagesContainerRef}
+        className="flex-1 overflow-y-auto p-4 space-y-4"
+      >
+        {!hasContent ? (
+          <EmptyState
+            isAuthenticated={isConnected}
+            loadingMessage={!isConnected ? 'Click Connect to start' : undefined}
+          />
+        ) : (
+          <>
+            {messages.map((msg, index) =>
+              msg.role === 'user' ? (
+                <UserMessage
+                  key={index}
+                  content={msg.content}
+                  timestamp={msg.timestamp}
+                  onFileClick={() => {}}
+                />
+              ) : (
+                <AssistantMessage
+                  key={index}
+                  content={msg.content}
+                  timestamp={msg.timestamp}
+                  onFileClick={() => {}}
+                />
+              ),
+            )}
+
+            {/* Streaming message */}
+            {isStreaming && streamingContent && (
+              <AssistantMessage
+                content={streamingContent}
+                timestamp={Date.now()}
+                onFileClick={() => {}}
+              />
+            )}
+
+            {/* Waiting indicator */}
+            {isWaitingForResponse && loadingMessage && (
+              <WaitingMessage loadingMessage={loadingMessage} />
+            )}
+            {/* If streaming started but no chunks yet, show thinking indicator */}
+            {isStreaming && !streamingContent && (
+              <WaitingMessage
+                loadingMessage={loadingMessage || 'Thinking...'}
+              />
+            )}
+
+            <div ref={messagesEndRef} />
+          </>
+        )}
+      </div>
+
+      {/* Input */}
+      {isConnected ? (
+        <InputForm
+          inputText={inputText}
+          inputFieldRef={inputFieldRef as React.RefObject<HTMLDivElement>}
+          isStreaming={isStreaming}
+          isWaitingForResponse={isWaitingForResponse}
+          isComposing={isComposing}
+          editMode="default"
+          thinkingEnabled={false}
+          activeFileName={null}
+          activeSelection={null}
+          skipAutoActiveContext={true}
+          onInputChange={setInputText}
+          onCompositionStart={() => setIsComposing(true)}
+          onCompositionEnd={() => setIsComposing(false)}
+          onKeyDown={() => {}}
+          onSubmit={handleSubmit}
+          onCancel={handleCancel}
+          onToggleEditMode={() => {}}
+          onToggleThinking={() => {}}
+          onFocusActiveEditor={() => {}}
+          onToggleSkipAutoActiveContext={() => {}}
+          onShowCommandMenu={() => {}}
+          onAttachContext={() => {}}
+          completionIsOpen={false}
+          completionItems={[]}
+          onCompletionSelect={() => {}}
+          onCompletionClose={() => {}}
+        />
+      ) : (
+        <div className="p-4 border-t border-gray-700">
+          <button
+            onClick={handleConnect}
+            className="w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 rounded text-white text-sm font-medium transition-colors"
+          >
+            Connect to Qwen CLI
+          </button>
+        </div>
+      )}
+
+      {/* Permission Request Drawer */}
+      {permissionRequest && (
+        <PermissionDrawer
+          isOpen={!!permissionRequest}
+          options={permissionRequest.options}
+          toolCall={permissionRequest.toolCall}
+          onResponse={handlePermissionResponse}
+          onClose={() => setPermissionRequest(null)}
+        />
+      )}
+
+      {/* Auth Required banner */}
+      {authUri && (
+        <div className="absolute left-3 right-3 top-10 z-50 bg-[#2a2d2e] border border-yellow-600 text-yellow-200 rounded p-2 text-[12px] flex items-center justify-between gap-2">
+          <div>Authentication required. Click to sign in.</div>
+          <div className="flex items-center gap-2">
+            <button
+              className="px-2 py-0.5 rounded bg-yellow-700 hover:bg-yellow-600 text-white"
+              onClick={() => {
+                try {
+                  chrome.tabs.create({ url: authUri });
+                } catch (_) {}
+              }}
+            >
+              Open Link
+            </button>
+            <button
+              className="px-2 py-0.5 rounded bg-gray-700 hover:bg-gray-600"
+              onClick={() => setAuthUri(null)}
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Debug: Tools panel */}
+      {showToolsPanel && mcpTools.length + internalTools.length > 0 && (
+        <div className="absolute right-3 top-10 z-50 max-w-[80%] w-[360px] max-h-[50vh] overflow-auto bg-[#2a2d2e] text-[13px] text-gray-200 border border-gray-700 rounded shadow-lg p-2">
+          <div className="flex items-center justify-between mb-2">
+            <div className="font-semibold">
+              Available Tools ({mcpTools.length + internalTools.length})
+            </div>
+            <button
+              className="text-gray-400 hover:text-gray-200"
+              onClick={() => setShowToolsPanel(false)}
+            >
+              ×
+            </button>
+          </div>
+          <div className="text-[11px] text-gray-400 mb-1">
+            Internal (chrome-browser)
+          </div>
+          <ul className="space-y-1 mb-2">
+            {internalTools.map((t: any, i: number) => {
+              const name = (t && (t.name || t.tool?.name)) || String(t);
+              const desc = (t && (t.description || t.tool?.description)) || '';
+              return (
+                <li
+                  key={`internal-${i}`}
+                  className="px-2 py-1 rounded hover:bg-[#3a3d3e]"
+                >
+                  <div className="font-mono text-xs text-[#a6e22e] break-all">
+                    {name}
+                  </div>
+                  {desc && (
+                    <div className="text-[11px] text-gray-400 break-words">
+                      {desc}
+                    </div>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+          <div className="text-[11px] text-gray-400 mb-1">Discovered (MCP)</div>
+          <ul className="space-y-1">
+            {mcpTools.map((t: any, i: number) => {
+              const name = (t && (t.name || t.tool?.name)) || String(t);
+              const desc = (t && (t.description || t.tool?.description)) || '';
+              return (
+                <li
+                  key={`discovered-${i}`}
+                  className="px-2 py-1 rounded hover:bg-[#3a3d3e]"
+                >
+                  <div className="font-mono text-xs text-[#a6e22e] break-all">
+                    {name}
+                  </div>
+                  {desc && (
+                    <div className="text-[11px] text-gray-400 break-words">
+                      {desc}
+                    </div>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+

packages/chrome-extension/src/sidepanel/components/PermissionDrawer/PermissionDrawer.tsx

@@ -0,0 +1,312 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useEffect, useState, useRef } from 'react';
+import type { PermissionOption, ToolCall } from './PermissionRequest.js';
+
+interface PermissionDrawerProps {
+  isOpen: boolean;
+  options: PermissionOption[];
+  toolCall: ToolCall;
+  onResponse: (optionId: string) => void;
+  onClose?: () => void;
+}
+
+export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
+  isOpen,
+  options,
+  toolCall,
+  onResponse,
+  onClose,
+}) => {
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const [customMessage, setCustomMessage] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Correct the ref type for custom input to HTMLInputElement to avoid subsequent forced casting
+  const customInputRef = useRef<HTMLInputElement>(null);
+
+  console.log('PermissionDrawer rendered with isOpen:', isOpen, toolCall);
+  // Prefer file name from locations, fall back to content[].path if present
+  const getAffectedFileName = (): string => {
+    const fromLocations = toolCall.locations?.[0]?.path;
+    if (fromLocations) {
+      return fromLocations.split('/').pop() || fromLocations;
+    }
+    // Some tool calls (e.g. write/edit with diff content) only include path in content
+    const fromContent = Array.isArray(toolCall.content)
+      ? (
+          toolCall.content.find(
+            (c: unknown) =>
+              typeof c === 'object' &&
+              c !== null &&
+              'path' in (c as Record<string, unknown>),
+          ) as { path?: unknown } | undefined
+        )?.path
+      : undefined;
+    if (typeof fromContent === 'string' && fromContent.length > 0) {
+      return fromContent.split('/').pop() || fromContent;
+    }
+    return 'file';
+  };
+
+  // Get the title for the permission request
+  const getTitle = () => {
+    if (toolCall.kind === 'edit' || toolCall.kind === 'write') {
+      const fileName = getAffectedFileName();
+      return (
+        <>
+          Make this edit to{' '}
+          <span className="font-mono text-[var(--app-primary-foreground)]">
+            {fileName}
+          </span>
+          ?
+        </>
+      );
+    }
+    if (toolCall.kind === 'execute' || toolCall.kind === 'bash') {
+      return 'Allow this bash command?';
+    }
+    if (toolCall.kind === 'read') {
+      const fileName = getAffectedFileName();
+      return (
+        <>
+          Allow read from{' '}
+          <span className="font-mono text-[var(--app-primary-foreground)]">
+            {fileName}
+          </span>
+          ?
+        </>
+      );
+    }
+    return toolCall.title || 'Permission Required';
+  };
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isOpen) {
+        return;
+      }
+
+      // Number keys 1-9 for quick select
+      const numMatch = e.key.match(/^[1-9]$/);
+      if (
+        numMatch &&
+        !customInputRef.current?.contains(document.activeElement)
+      ) {
+        const index = parseInt(e.key, 10) - 1;
+        if (index < options.length) {
+          e.preventDefault();
+          onResponse(options[index].optionId);
+        }
+        return;
+      }
+
+      // Arrow keys for navigation
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        const totalItems = options.length + 1; // +1 for custom input
+        if (e.key === 'ArrowDown') {
+          setFocusedIndex((prev) => (prev + 1) % totalItems);
+        } else {
+          setFocusedIndex((prev) => (prev - 1 + totalItems) % totalItems);
+        }
+      }
+
+      // Enter to select
+      if (
+        e.key === 'Enter' &&
+        !customInputRef.current?.contains(document.activeElement)
+      ) {
+        e.preventDefault();
+        if (focusedIndex < options.length) {
+          onResponse(options[focusedIndex].optionId);
+        }
+      }
+
+      // Escape to cancel permission and close (align with CLI behavior)
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        const rejectOptionId =
+          options.find((o) => o.kind.includes('reject'))?.optionId ||
+          options.find((o) => o.optionId === 'cancel')?.optionId ||
+          'cancel';
+        onResponse(rejectOptionId);
+        if (onClose) {
+          onClose();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, options, onResponse, onClose, focusedIndex]);
+
+  // Focus container when opened
+  useEffect(() => {
+    if (isOpen && containerRef.current) {
+      containerRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // Reset focus to the first option when the drawer opens or the options change
+  useEffect(() => {
+    if (isOpen) {
+      setFocusedIndex(0);
+    }
+  }, [isOpen, options.length]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-[1000] p-2">
+      {/* Main container */}
+      <div
+        ref={containerRef}
+        className="relative flex flex-col rounded-large border p-2 outline-none animate-slide-up"
+        style={{
+          backgroundColor: 'var(--app-input-secondary-background)',
+          borderColor: 'var(--app-input-border)',
+        }}
+        tabIndex={0}
+        data-focused-index={focusedIndex}
+      >
+        {/* Background layer */}
+        <div
+          className="p-2 absolute inset-0 rounded-large"
+          style={{ backgroundColor: 'var(--app-input-background)' }}
+        />
+
+        {/* Title + Description (from toolCall.title) */}
+        <div className="relative z-[1] text-[1.1em] text-[var(--app-primary-foreground)] flex flex-col min-h-0">
+          <div className="font-bold text-[var(--app-primary-foreground)] mb-0.5">
+            {getTitle()}
+          </div>
+          {(toolCall.kind === 'edit' ||
+            toolCall.kind === 'write' ||
+            toolCall.kind === 'read' ||
+            toolCall.kind === 'execute' ||
+            toolCall.kind === 'bash') &&
+            toolCall.title && (
+              <div
+                /* 13px, normal font weight; normal whitespace wrapping + long word breaking; maximum 3 lines with overflow ellipsis */
+                className="text-[13px] font-normal text-[var(--app-secondary-foreground)] opacity-90 font-mono whitespace-normal break-words q-line-clamp-3 mb-2"
+                style={{
+                  fontSize: '.9em',
+                  color: 'var(--app-secondary-foreground)',
+                  marginBottom: '6px',
+                }}
+                title={toolCall.title}
+              >
+                {toolCall.title}
+              </div>
+            )}
+        </div>
+
+        {/* Options */}
+        <div className="relative z-[1] flex flex-col gap-1 pb-1">
+          {options.map((option, index) => {
+            const isFocused = focusedIndex === index;
+
+            return (
+              <button
+                key={option.optionId}
+                className={`flex items-center gap-2 px-2 py-1.5 text-left w-full box-border rounded-[4px] border-0 shadow-[inset_0_0_0_1px_var(--app-transparent-inner-border)] transition-colors duration-150 text-[var(--app-primary-foreground)] hover:bg-[var(--app-button-background)] ${
+                  isFocused
+                    ? 'text-[var(--app-list-active-foreground)] bg-[var(--app-list-active-background)] hover:text-[var(--app-button-foreground)] hover:font-bold hover:relative hover:border-0'
+                    : 'hover:bg-[var(--app-button-background)] hover:text-[var(--app-button-foreground)] hover:font-bold hover:relative hover:border-0'
+                }`}
+                onClick={() => onResponse(option.optionId)}
+                onMouseEnter={() => setFocusedIndex(index)}
+              >
+                {/* Number badge */}
+                <span className="inline-flex items-center justify-center min-w-[10px] h-5 font-semibold opacity-60">
+                  {index + 1}
+                </span>
+                {/* Option text */}
+                <span className="font-semibold">{option.name}</span>
+              </button>
+            );
+          })}
+
+          {/* Custom message input (extracted component) */}
+          {(() => {
+            const isFocused = focusedIndex === options.length;
+            const rejectOptionId = options.find((o) =>
+              o.kind.includes('reject'),
+            )?.optionId;
+            return (
+              <CustomMessageInputRow
+                isFocused={isFocused}
+                customMessage={customMessage}
+                setCustomMessage={setCustomMessage}
+                onFocusRow={() => setFocusedIndex(options.length)}
+                onSubmitReject={() => {
+                  if (rejectOptionId) {
+                    onResponse(rejectOptionId);
+                  }
+                }}
+                inputRef={customInputRef}
+              />
+            );
+          })()}
+        </div>
+      </div>
+
+      {/* Moved slide-up keyframes to Tailwind theme (tailwind.config.js) */}
+    </div>
+  );
+};
+
+/**
+ * CustomMessageInputRow: Reusable custom input row component (without hooks)
+ */
+interface CustomMessageInputRowProps {
+  isFocused: boolean;
+  customMessage: string;
+  setCustomMessage: (val: string) => void;
+  onFocusRow: () => void; // Set focus when mouse enters or input box is focused
+  onSubmitReject: () => void; // Triggered when Enter is pressed (selecting reject option)
+  inputRef: React.RefObject<HTMLInputElement | null>;
+}
+
+const CustomMessageInputRow: React.FC<CustomMessageInputRowProps> = ({
+  isFocused,
+  customMessage,
+  setCustomMessage,
+  onFocusRow,
+  onSubmitReject,
+  inputRef,
+}) => (
+  <div
+    className={`flex items-center gap-2 px-2 py-1.5 text-left w-full box-border rounded-[4px] border-0 shadow-[inset_0_0_0_1px_var(--app-transparent-inner-border)] cursor-text text-[var(--app-primary-foreground)] ${
+      isFocused ? 'text-[var(--app-list-active-foreground)]' : ''
+    }`}
+    onMouseEnter={onFocusRow}
+    onClick={() => inputRef.current?.focus()}
+  >
+    <input
+      ref={inputRef as React.LegacyRef<HTMLInputElement> | undefined}
+      type="text"
+      placeholder="Tell Qwen what to do instead"
+      spellCheck={false}
+      className="flex-1 bg-transparent border-0 outline-none text-sm placeholder:opacity-70"
+      style={{ color: 'var(--app-input-foreground)' }}
+      value={customMessage}
+      onChange={(e) => setCustomMessage(e.target.value)}
+      onFocus={onFocusRow}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey && customMessage.trim()) {
+          e.preventDefault();
+          onSubmitReject();
+        }
+      }}
+    />
+  </div>
+);

packages/chrome-extension/src/sidepanel/components/PermissionDrawer/PermissionRequest.tsx

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface PermissionOption {
+  name: string;
+  kind: string;
+  optionId: string;
+}
+
+export interface ToolCall {
+  title?: string;
+  kind?: string;
+  toolCallId?: string;
+  rawInput?: {
+    command?: string;
+    description?: string;
+    [key: string]: unknown;
+  };
+  content?: Array<{
+    type: string;
+    [key: string]: unknown;
+  }>;
+  locations?: Array<{
+    path: string;
+    line?: number | null;
+  }>;
+  status?: string;
+}
+
+export interface PermissionRequestProps {
+  options: PermissionOption[];
+  toolCall: ToolCall;
+  onResponse: (optionId: string) => void;
+}

packages/chrome-extension/src/sidepanel/components/icons/EditIcons.tsx

@@ -0,0 +1,215 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Edit mode related icons
+ */
+
+import type React from 'react';
+import type { IconProps } from './types.js';
+
+/**
+ * Edit pencil icon (16x16)
+ * Used for "Ask before edits" mode
+ */
+export const EditPencilIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Auto/fast-forward icon (16x16)
+ * Used for "Edit automatically" mode
+ */
+export const AutoEditIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M2.53 3.956A1 1 0 0 0 1 4.804v6.392a1 1 0 0 0 1.53.848l5.113-3.196c.16-.1.279-.233.357-.383v2.73a1 1 0 0 0 1.53.849l5.113-3.196a1 1 0 0 0 0-1.696L9.53 3.956A1 1 0 0 0 8 4.804v2.731a.992.992 0 0 0-.357-.383L2.53 3.956Z" />
+  </svg>
+);
+
+/**
+ * Plan mode/bars icon (16x16)
+ * Used for "Plan mode"
+ */
+export const PlanModeIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M4.5 2a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5h-1ZM10.5 2a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5h-1Z" />
+  </svg>
+);
+
+/**
+ * Code brackets icon (20x20)
+ * Used for active file indicator
+ */
+export const CodeBracketsIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06ZM11.377 2.011a.75.75 0 0 1 .612.867l-2.5 14.5a.75.75 0 0 1-1.478-.255l2.5-14.5a.75.75 0 0 1 .866-.612Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Hide context (eye slash) icon (20x20)
+ * Used to indicate the active selection will NOT be auto-loaded into context
+ */
+export const HideContextIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l14.5 14.5a.75.75 0 1 0 1.06-1.06l-1.745-1.745a10.029 10.029 0 0 0 3.3-4.38 1.651 1.651 0 0 0 0-1.185A10.004 10.004 0 0 0 9.999 3a9.956 9.956 0 0 0-4.744 1.194L3.28 2.22ZM7.752 6.69l1.092 1.092a2.5 2.5 0 0 1 3.374 3.373l1.091 1.092a4 4 0 0 0-5.557-5.557Z"
+      clipRule="evenodd"
+    />
+    <path d="m10.748 13.93 2.523 2.523a9.987 9.987 0 0 1-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 0 1 0-1.186A10.007 10.007 0 0 1 2.839 6.02L6.07 9.252a4 4 0 0 0 4.678 4.678Z" />
+  </svg>
+);
+
+/**
+ * Slash command icon (20x20)
+ * Used for command menu button
+ */
+export const SlashCommandIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M12.528 3.047a.75.75 0 0 1 .449.961L8.433 16.504a.75.75 0 1 1-1.41-.512l4.544-12.496a.75.75 0 0 1 .961-.449Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Link/attachment icon (20x20)
+ * Used for attach context button
+ */
+export const LinkIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Open diff icon (16x16)
+ * Used for opening diff in VS Code
+ */
+export const OpenDiffIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M13.5 7l-4-4v3h-6v2h6v3l4-4z" />
+  </svg>
+);

packages/chrome-extension/src/sidepanel/components/icons/FileIcons.tsx

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * File and document related icons
+ */
+
+import type React from 'react';
+import type { IconProps } from './types.js';
+
+/**
+ * File document icon (16x16)
+ * Used for file completion menu
+ */
+export const FileIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M9 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7l-5-5zm3 7V3.5L10.5 2H10v3a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zM6 3h3v2H6V3z" />
+  </svg>
+);
+
+export const FileListIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M5 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Z" />
+  </svg>
+);
+
+/**
+ * Save document icon (16x16)
+ * Used for save session button
+ */
+export const SaveDocumentIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M2.66663 2.66663H10.6666L13.3333 5.33329V13.3333H2.66663V2.66663Z" />
+    <path d="M8 10.6666V8M8 8V5.33329M8 8H10.6666M8 8H5.33329" />
+  </svg>
+);
+
+/**
+ * Folder icon (16x16)
+ * Useful for directory entries in completion lists
+ */
+export const FolderIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M1.5 3A1.5 1.5 0 0 1 3 1.5h3.086a1.5 1.5 0 0 1 1.06.44L8.5 3H13A1.5 1.5 0 0 1 14.5 4.5v7A1.5 1.5 0 0 1 13 13H3A1.5 1.5 0 0 1 1.5 11.5v-8Z" />
+  </svg>
+);

packages/chrome-extension/src/sidepanel/components/icons/NavigationIcons.tsx

@@ -0,0 +1,212 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Navigation and action icons
+ */
+
+import type React from 'react';
+import type { IconProps } from './types.js';
+
+/**
+ * Chevron down icon (20x20)
+ * Used for dropdown arrows
+ */
+export const ChevronDownIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Plus icon (20x20)
+ * Used for new session button
+ */
+export const PlusIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
+  </svg>
+);
+
+/**
+ * Small plus icon (16x16)
+ * Used for default attachment type
+ */
+export const PlusSmallIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M8 2a.5.5 0 0 1 .5.5V5h2.5a.5.5 0 0 1 0 1H8.5v2.5a.5.5 0 0 1-1 0V6H5a.5.5 0 0 1 0-1h2.5V2.5A.5.5 0 0 1 8 2Z" />
+  </svg>
+);
+
+/**
+ * Arrow up icon (20x20)
+ * Used for send message button
+ */
+export const ArrowUpIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Close X icon (14x14)
+ * Used for close buttons in banners and dialogs
+ */
+export const CloseIcon: React.FC<IconProps> = ({
+  size = 14,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      d="M1 1L13 13M1 13L13 1"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const CloseSmallIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708Z" />
+  </svg>
+);
+
+/**
+ * Search/magnifying glass icon (20x20)
+ * Used for search input
+ */
+export const SearchIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Refresh/reload icon (16x16)
+ * Used for refresh session list
+ */
+export const RefreshIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M13.3333 8C13.3333 10.9455 10.9455 13.3333 8 13.3333C5.05451 13.3333 2.66663 10.9455 2.66663 8C2.66663 5.05451 5.05451 2.66663 8 2.66663" />
+    <path d="M10.6666 8L13.3333 8M13.3333 8L13.3333 5.33333M13.3333 8L10.6666 10.6667" />
+  </svg>
+);

packages/chrome-extension/src/sidepanel/components/icons/SpecialIcons.tsx

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Special UI icons
+ */
+
+import type React from 'react';
+import type { IconProps } from './types.js';
+
+interface ThinkingIconProps extends IconProps {
+  /**
+   * Whether thinking is enabled (affects styling)
+   */
+  enabled?: boolean;
+}
+
+export const ThinkingIcon: React.FC<ThinkingIconProps> = ({
+  size = 16,
+  className,
+  enabled = false,
+  style,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      d="M8.00293 1.11523L8.35059 1.12402H8.35352C11.9915 1.30834 14.8848 4.31624 14.8848 8C14.8848 11.8025 11.8025 14.8848 8 14.8848C4.19752 14.8848 1.11523 11.8025 1.11523 8C1.11523 7.67691 1.37711 7.41504 1.7002 7.41504C2.02319 7.41514 2.28516 7.67698 2.28516 8C2.28516 11.1563 4.84369 13.7148 8 13.7148C11.1563 13.7148 13.7148 11.1563 13.7148 8C13.7148 4.94263 11.3141 2.4464 8.29492 2.29297V2.29199L7.99609 2.28516H7.9873V2.28418L7.89648 2.27539L7.88281 2.27441V2.27344C7.61596 2.21897 7.41513 1.98293 7.41504 1.7002C7.41504 1.37711 7.67691 1.11523 8 1.11523H8.00293ZM8 3.81543C8.32309 3.81543 8.58496 4.0773 8.58496 4.40039V7.6377L10.9619 8.82715C11.2505 8.97169 11.3678 9.32256 11.2236 9.61133C11.0972 9.86425 10.8117 9.98544 10.5488 9.91504L10.5352 9.91211V9.91016L10.4502 9.87891L10.4385 9.87402V9.87305L7.73828 8.52344C7.54007 8.42433 7.41504 8.22155 7.41504 8V4.40039C7.41504 4.0773 7.67691 3.81543 8 3.81543ZM2.44336 5.12695C2.77573 5.19517 3.02597 5.48929 3.02637 5.8418C3.02637 6.19456 2.7761 6.49022 2.44336 6.55859L2.2959 6.57324C1.89241 6.57324 1.56543 6.24529 1.56543 5.8418C1.56588 5.43853 1.89284 5.1123 2.2959 5.1123L2.44336 5.12695ZM3.46094 2.72949C3.86418 2.72984 4.19017 3.05712 4.19043 3.45996V3.46094C4.19009 3.86393 3.86392 4.19008 3.46094 4.19043H3.45996C3.05712 4.19017 2.72983 3.86419 2.72949 3.46094V3.45996C2.72976 3.05686 3.05686 2.72976 3.45996 2.72949H3.46094ZM5.98926 1.58008C6.32235 1.64818 6.57324 1.94276 6.57324 2.2959L6.55859 2.44336C6.49022 2.7761 6.19456 3.02637 5.8418 3.02637C5.43884 3.02591 5.11251 2.69895 5.1123 2.2959L5.12695 2.14844C5.19504 1.81591 5.48906 1.56583 5.8418 1.56543L5.98926 1.58008Z"
+      strokeWidth="0.27"
+      style={{
+        stroke: enabled
+          ? 'var(--app-qwen-ivory)'
+          : 'var(--app-secondary-foreground)',
+        fill: enabled
+          ? 'var(--app-qwen-ivory)'
+          : 'var(--app-secondary-foreground)',
+        ...style,
+      }}
+    />
+  </svg>
+);
+
+export const TerminalIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M5.14648 7.14648C5.34175 6.95122 5.65825 6.95122 5.85352 7.14648L8.35352 9.64648C8.44728 9.74025 8.5 9.86739 8.5 10C8.5 10.0994 8.47037 10.1958 8.41602 10.2773L8.35352 10.3535L5.85352 12.8535C5.65825 13.0488 5.34175 13.0488 5.14648 12.8535C4.95122 12.6583 4.95122 12.3417 5.14648 12.1465L7.29297 10L5.14648 7.85352C4.95122 7.65825 4.95122 7.34175 5.14648 7.14648Z"
+      clipRule="evenodd"
+    />
+    <path d="M14.5 12C14.7761 12 15 12.2239 15 12.5C15 12.7761 14.7761 13 14.5 13H9.5C9.22386 13 9 12.7761 9 12.5C9 12.2239 9.22386 12 9.5 12H14.5Z" />
+    <path
+      fillRule="evenodd"
+      d="M16.5 4C17.3284 4 18 4.67157 18 5.5V14.5C18 15.3284 17.3284 16 16.5 16H3.5C2.67157 16 2 15.3284 2 14.5V5.5C2 4.67157 2.67157 4 3.5 4H16.5ZM3.5 5C3.22386 5 3 5.22386 3 5.5V14.5C3 14.7761 3.22386 15 3.5 15H16.5C16.7761 15 17 14.7761 17 14.5V5.5C17 5.22386 16.7761 5 16.5 5H3.5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

packages/chrome-extension/src/sidepanel/components/icons/StatusIcons.tsx

@@ -0,0 +1,188 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Status and state related icons
+ */
+
+import type React from 'react';
+import type { IconProps } from './types.js';
+
+/**
+ * Plan completed icon (14x14)
+ * Used for completed plan items
+ */
+export const PlanCompletedIcon: React.FC<IconProps> = ({
+  size = 14,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <circle cx="7" cy="7" r="6" fill="currentColor" opacity="0.2" />
+    <path
+      d="M4 7.5L6 9.5L10 4.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+/**
+ * Plan in progress icon (14x14)
+ * Used for in-progress plan items
+ */
+export const PlanInProgressIcon: React.FC<IconProps> = ({
+  size = 14,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <circle
+      cx="7"
+      cy="7"
+      r="5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+    />
+  </svg>
+);
+
+/**
+ * Plan pending icon (14x14)
+ * Used for pending plan items
+ */
+export const PlanPendingIcon: React.FC<IconProps> = ({
+  size = 14,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <circle
+      cx="7"
+      cy="7"
+      r="5.5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+    />
+  </svg>
+);
+
+/**
+ * Warning triangle icon (20x20)
+ * Used for warning messages
+ */
+export const WarningTriangleIcon: React.FC<IconProps> = ({
+  size = 20,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * User profile icon (16x16)
+ * Used for login command
+ */
+export const UserIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
+  </svg>
+);
+
+export const SymbolIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M8 1a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 7.293V1.5A.5.5 0 0 1 8 1Z" />
+  </svg>
+);
+
+export const SelectionIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Z" />
+  </svg>
+);

packages/chrome-extension/src/sidepanel/components/icons/StopIcon.tsx

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Stop icon for canceling operations
+ */
+
+import type React from 'react';
+import type { IconProps } from './types.js';
+
+/**
+ * Stop/square icon (16x16)
+ * Used for stop/cancel operations
+ */
+export const StopIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <rect x="4" y="4" width="8" height="8" rx="1" />
+  </svg>
+);

packages/chrome-extension/src/sidepanel/components/icons/index.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export type { IconProps } from './types.js';
+export { FileIcon, FileListIcon, FolderIcon } from './FileIcons.js';
+
+// Navigation icons
+export {
+  ChevronDownIcon,
+  PlusIcon,
+  PlusSmallIcon,
+  ArrowUpIcon,
+  CloseIcon,
+  CloseSmallIcon,
+  SearchIcon,
+  RefreshIcon,
+} from './NavigationIcons.js';
+
+// Edit mode icons
+export {
+  EditPencilIcon,
+  AutoEditIcon,
+  PlanModeIcon,
+  CodeBracketsIcon,
+  HideContextIcon,
+  SlashCommandIcon,
+  LinkIcon,
+  OpenDiffIcon,
+} from './EditIcons.js';
+
+// Status icons
+export {
+  PlanCompletedIcon,
+  PlanInProgressIcon,
+  PlanPendingIcon,
+  WarningTriangleIcon,
+  UserIcon,
+  SymbolIcon,
+  SelectionIcon,
+} from './StatusIcons.js';
+
+// Special icons
+export { ThinkingIcon, TerminalIcon } from './SpecialIcons.js';
+
+// Stop icon
+export { StopIcon } from './StopIcon.js';

packages/chrome-extension/src/sidepanel/components/icons/types.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Common icon props interface
+ */
+
+import type React from 'react';
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /**
+   * Icon size (width and height)
+   * @default 16
+   */
+  size?: number;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}

packages/chrome-extension/src/sidepanel/components/layout/ChatHeader.tsx

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { ChevronDownIcon, PlusIcon } from '../icons/index.js';
+
+interface ChatHeaderProps {
+  currentSessionTitle: string;
+  onLoadSessions: () => void;
+  onNewSession: () => void;
+}
+
+export const ChatHeader: React.FC<ChatHeaderProps> = ({
+  currentSessionTitle,
+  onLoadSessions,
+  onNewSession,
+}) => (
+  <div
+    className="chat-header flex items-center select-none w-full border-b border-[var(--app-primary-border-color)] bg-[var(--app-header-background)] py-1.5 px-2.5"
+    style={{ borderBottom: '1px solid var(--app-primary-border-color)' }}
+  >
+    <button
+      className="flex items-center gap-1.5 py-0.5 px-2 bg-transparent border-none rounded cursor-pointer outline-none min-w-0 max-w-[300px] overflow-hidden text-[var(--vscode-chat-font-size,13px)] font-[var(--vscode-chat-font-family)] hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
+      onClick={onLoadSessions}
+      title="Past conversations"
+    >
+      <span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 font-medium">
+        {currentSessionTitle}
+      </span>
+      <ChevronDownIcon className="w-4 h-4 flex-shrink-0" />
+    </button>
+
+    <div className="flex-1 min-w-1"></div>
+
+    <button
+      className="flex items-center justify-center p-1 bg-transparent border-none rounded cursor-pointer outline-none hover:bg-[var(--app-ghost-button-hover-background)]"
+      onClick={onNewSession}
+      title="New Session"
+      style={{ padding: '4px' }}
+    >
+      <PlusIcon className="w-4 h-4" />
+    </button>
+  </div>
+);

packages/chrome-extension/src/sidepanel/components/layout/CompletionMenu.tsx

@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { CompletionItem } from '../../../types/completionItemTypes.js';
+
+interface CompletionMenuProps {
+  items: CompletionItem[];
+  onSelect: (item: CompletionItem) => void;
+  onClose: () => void;
+  title?: string;
+  selectedIndex?: number;
+}
+
+export const CompletionMenu: React.FC<CompletionMenuProps> = ({
+  items,
+  onSelect,
+  onClose,
+  title,
+  selectedIndex = 0,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [selected, setSelected] = useState(selectedIndex);
+  // Mount state to drive a simple Tailwind transition (replaces CSS keyframes)
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setSelected(selectedIndex), [selectedIndex]);
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setSelected((prev) => Math.min(prev + 1, items.length - 1));
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setSelected((prev) => Math.max(prev - 1, 0));
+          break;
+        case 'Enter':
+          event.preventDefault();
+          if (items[selected]) {
+            onSelect(items[selected]);
+          }
+          break;
+        case 'Escape':
+          event.preventDefault();
+          onClose();
+          break;
+        default:
+          break;
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [items, selected, onSelect, onClose]);
+
+  useEffect(() => {
+    const selectedEl = containerRef.current?.querySelector(
+      `[data-index="${selected}"]`,
+    );
+    if (selectedEl) {
+      selectedEl.scrollIntoView({ block: 'nearest' });
+    }
+  }, [selected]);
+
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      role="menu"
+      className={[
+        'completion-menu',
+        // Positioning and container styling
+        'absolute bottom-full left-0 right-0 mb-2 flex flex-col overflow-hidden',
+        'rounded-large border bg-[var(--app-menu-background)]',
+        'border-[var(--app-input-border)] max-h-[50vh] z-[1000]',
+        // Mount animation (fade + slight slide up) via keyframes
+        mounted ? 'animate-completion-menu-enter' : '',
+      ].join(' ')}
+    >
+      {/* Optional top spacer for visual separation from the input */}
+      <div className="h-1" />
+      <div
+        className={[
+          // Semantic
+          'completion-menu-list',
+          // Scroll area
+          'flex max-h-[300px] flex-col overflow-y-auto',
+          // Spacing driven by theme vars
+          'p-[var(--app-list-padding)] pb-2 gap-[var(--app-list-gap)]',
+        ].join(' ')}
+      >
+        {title && (
+          <div className="completion-menu-section-label px-3 py-1 text-[var(--app-primary-foreground)] opacity-50 text-[0.9em]">
+            {title}
+          </div>
+        )}
+        {items.map((item, index) => {
+          const isActive = index === selected;
+          return (
+            <div
+              key={item.id}
+              data-index={index}
+              role="menuitem"
+              onClick={() => onSelect(item)}
+              onMouseEnter={() => setSelected(index)}
+              className={[
+                // Semantic
+                'completion-menu-item',
+                // Hit area
+                'mx-1 cursor-pointer rounded-[var(--app-list-border-radius)]',
+                'p-[var(--app-list-item-padding)]',
+                // Active background
+                isActive ? 'bg-[var(--app-list-active-background)]' : '',
+              ].join(' ')}
+            >
+              <div className="completion-menu-item-row flex items-center justify-between gap-2">
+                {item.icon && (
+                  <span className="completion-menu-item-icon inline-flex h-4 w-4 items-center justify-center text-[var(--vscode-symbolIcon-fileForeground,#cccccc)]">
+                    {item.icon}
+                  </span>
+                )}
+                <span
+                  className={[
+                    'completion-menu-item-label flex-1 truncate',
+                    isActive
+                      ? 'text-[var(--app-list-active-foreground)]'
+                      : 'text-[var(--app-primary-foreground)]',
+                  ].join(' ')}
+                >
+                  {item.label}
+                </span>
+                {item.description && (
+                  <span
+                    className="completion-menu-item-desc max-w-[50%] truncate text-[0.9em] text-[var(--app-secondary-foreground)] opacity-70"
+                    title={item.description}
+                  >
+                    {item.description}
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

packages/chrome-extension/src/sidepanel/components/layout/EmptyState.tsx

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+
+interface EmptyStateProps {
+  isAuthenticated?: boolean;
+  loadingMessage?: string;
+}
+
+// Helper function to get extension asset URL
+function getExtensionAssetUrl(assetPath: string): string {
+  if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.getURL) {
+    return chrome.runtime.getURL(assetPath);
+  }
+  // Fallback during development or if chrome API is not available
+  return assetPath;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  isAuthenticated = false,
+  loadingMessage,
+}) => {
+  const iconSrc = getExtensionAssetUrl('icons/icon-source.png');
+
+  const description = loadingMessage
+    ? 'Preparing Qwen Code Chrome Extension...'
+    : isAuthenticated
+      ? 'What would you like to do? Ask about this codebase or we can start writing code.'
+      : 'Welcome! Please log in to start using Qwen Code.';
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-5 md:p-10">
+      <div className="flex flex-col items-center gap-8 w-full">
+        {/* Qwen Logo */}
+        <div className="flex flex-col items-center gap-6">
+          <img
+            src={iconSrc}
+            alt="Qwen Logo"
+            className="w-[60px] h-[60px] object-contain"
+            onError={(e) => {
+              // Fallback to a div with text if image fails to load
+              const target = e.target as HTMLImageElement;
+              target.style.display = 'none';
+              const parent = target.parentElement;
+              if (parent) {
+                const fallback = document.createElement('div');
+                fallback.className =
+                  'w-[60px] h-[60px] flex items-center justify-center text-2xl font-bold';
+                fallback.textContent = 'Q';
+                parent.appendChild(fallback);
+              }
+            }}
+          />
+          <div className="text-center">
+            <div className="text-[15px] text-app-primary-foreground leading-normal font-normal max-w-[400px]">
+              {description}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/chrome-extension/src/sidepanel/components/layout/FileLink.tsx

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * FileLink component - Clickable file path links
+ * Supports clicking to open files and jump to specified line and column numbers
+ */
+
+import type React from 'react';
+import { useVSCode } from '../../hooks/useVSCode.js';
+// Tailwind rewrite: styles from FileLink.css are now expressed as utility classes
+
+/**
+ * Props for FileLink
+ */
+interface FileLinkProps {
+  /** File path */
+  path: string;
+  /** Optional line number (starting from 1) */
+  line?: number | null;
+  /** Optional column number (starting from 1) */
+  column?: number | null;
+  /** Whether to show full path, default false (show filename only) */
+  showFullPath?: boolean;
+  /** Optional custom class name */
+  className?: string;
+  /** Whether to disable click behavior (use when parent element handles clicks) */
+  disableClick?: boolean;
+}
+
+/**
+ * Extract filename from full path
+ * @param path File path
+ * @returns Filename
+ */
+function getFileName(path: string): string {
+  const segments = path.split(/[/\\]/);
+  return segments[segments.length - 1] || path;
+}
+
+/**
+ * FileLink component - Clickable file link
+ *
+ * Features:
+ * - Click to open file
+ * - Support line and column number navigation
+ * - Hover to show full path
+ * - Optional display mode (full path vs filename only)
+ *
+ * @example
+ * ```tsx
+ * <FileLink path="/src/App.tsx" line={42} />
+ * <FileLink path="/src/components/Button.tsx" line={10} column={5} showFullPath={true} />
+ * ```
+ */
+export const FileLink: React.FC<FileLinkProps> = ({
+  path,
+  line,
+  column,
+  showFullPath = false,
+  className = '',
+  disableClick = false,
+}) => {
+  const vscode = useVSCode();
+
+  /**
+   * Handle click event - Send message to VSCode to open file
+   */
+  const handleClick = (e: React.MouseEvent) => {
+    // Always prevent default behavior (prevent <a> tag # navigation)
+    e.preventDefault();
+
+    if (disableClick) {
+      // If click is disabled, return directly without stopping propagation
+      // This allows parent elements to handle click events
+      return;
+    }
+
+    // If click is enabled, stop event propagation
+    e.stopPropagation();
+
+    // Build full path including line and column numbers
+    let fullPath = path;
+    if (line !== null && line !== undefined) {
+      fullPath += `:${line}`;
+      if (column !== null && column !== undefined) {
+        fullPath += `:${column}`;
+      }
+    }
+
+    console.log('[FileLink] Opening file:', fullPath);
+
+    vscode.postMessage({
+      type: 'openFile',
+      data: { path: fullPath },
+    });
+  };
+
+  // Build display text
+  const displayPath = showFullPath ? path : getFileName(path);
+
+  // Build hover tooltip (always show full path)
+  const fullDisplayText =
+    line !== null && line !== undefined
+      ? column !== null && column !== undefined
+        ? `${path}:${line}:${column}`
+        : `${path}:${line}`
+      : path;
+
+  return (
+    <a
+      href="#"
+      className={[
+        'file-link',
+        // Layout + interaction
+        // Use items-center + leading-none to vertically center within surrounding rows
+        'inline-flex items-center leading-none',
+        disableClick
+          ? 'pointer-events-none cursor-[inherit] hover:no-underline'
+          : 'cursor-pointer',
+        // Typography + color: match theme body text and fixed size
+        'text-[11px] no-underline hover:underline',
+        'text-[var(--app-primary-foreground)]',
+        // Transitions
+        'transition-colors duration-100 ease-in-out',
+        // Focus ring (keyboard nav)
+        'focus:outline focus:outline-1 focus:outline-[var(--vscode-focusBorder)] focus:outline-offset-2 focus:rounded-[2px]',
+        // Active state
+        'active:opacity-80',
+        className,
+      ].join(' ')}
+      onClick={handleClick}
+      title={fullDisplayText}
+      role="button"
+      aria-label={`Open file: ${fullDisplayText}`}
+      // Inherit font family from context so it matches theme body text.
+    >
+      <span className="file-link-path">{displayPath}</span>
+      {line !== null && line !== undefined && (
+        <span className="file-link-location opacity-70 text-[0.9em] font-normal dark:opacity-60">
+          :{line}
+          {column !== null && column !== undefined && <>:{column}</>}
+        </span>
+      )}
+    </a>
+  );
+};

packages/chrome-extension/src/sidepanel/components/layout/InputForm.tsx

@@ -0,0 +1,298 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import {
+  EditPencilIcon,
+  AutoEditIcon,
+  PlanModeIcon,
+  CodeBracketsIcon,
+  HideContextIcon,
+  // ThinkingIcon,  // Temporarily disabled
+  SlashCommandIcon,
+  LinkIcon,
+  ArrowUpIcon,
+  StopIcon,
+} from '../icons/index.js';
+import { CompletionMenu } from '../layout/CompletionMenu.js';
+import type { CompletionItem } from '../../../types/completionItemTypes.js';
+import { getApprovalModeInfoFromString } from '../../types/acpTypes.js';
+import type { ApprovalModeValue } from '../../../types/approvalModeValueTypes.js';
+
+interface InputFormProps {
+  inputText: string;
+  // Note: RefObject<T> carries nullability in its `current` property, so the
+  // generic should be `HTMLDivElement` (not `HTMLDivElement | null`).
+  inputFieldRef: React.RefObject<HTMLDivElement>;
+  isStreaming: boolean;
+  isWaitingForResponse: boolean;
+  isComposing: boolean;
+  editMode: ApprovalModeValue;
+  thinkingEnabled: boolean;
+  activeFileName: string | null;
+  activeSelection: { startLine: number; endLine: number } | null;
+  // Whether to auto-load the active editor selection/path into context
+  skipAutoActiveContext: boolean;
+  onInputChange: (text: string) => void;
+  onCompositionStart: () => void;
+  onCompositionEnd: () => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  onSubmit: (e: React.FormEvent) => void;
+  onCancel: () => void;
+  onToggleEditMode: () => void;
+  onToggleThinking: () => void;
+  onFocusActiveEditor: () => void;
+  onToggleSkipAutoActiveContext: () => void;
+  onShowCommandMenu: () => void;
+  onAttachContext: () => void;
+  completionIsOpen: boolean;
+  completionItems?: CompletionItem[];
+  onCompletionSelect?: (item: CompletionItem) => void;
+  onCompletionClose?: () => void;
+}
+
+// Get edit mode display info using helper function
+const getEditModeInfo = (editMode: ApprovalModeValue) => {
+  const info = getApprovalModeInfoFromString(editMode);
+
+  // Map icon types to actual icons
+  let icon = null;
+  switch (info.iconType) {
+    case 'edit':
+      icon = <EditPencilIcon />;
+      break;
+    case 'auto':
+      icon = <AutoEditIcon />;
+      break;
+    case 'plan':
+      icon = <PlanModeIcon />;
+      break;
+    case 'yolo':
+      icon = <AutoEditIcon />;
+      break;
+    default:
+      icon = null;
+      break;
+  }
+
+  return {
+    text: info.label,
+    title: info.title,
+    icon,
+  };
+};
+
+export const InputForm: React.FC<InputFormProps> = ({
+  inputText,
+  inputFieldRef,
+  isStreaming,
+  isWaitingForResponse,
+  isComposing,
+  editMode,
+  // thinkingEnabled,  // Temporarily disabled
+  activeFileName,
+  activeSelection,
+  skipAutoActiveContext,
+  onInputChange,
+  onCompositionStart,
+  onCompositionEnd,
+  onKeyDown,
+  onSubmit,
+  onCancel,
+  onToggleEditMode,
+  // onToggleThinking,  // Temporarily disabled
+  onToggleSkipAutoActiveContext,
+  onShowCommandMenu,
+  onAttachContext,
+  completionIsOpen,
+  completionItems,
+  onCompletionSelect,
+  onCompletionClose,
+}) => {
+  const editModeInfo = getEditModeInfo(editMode);
+  const composerDisabled = isStreaming || isWaitingForResponse;
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // ESC should cancel the current interaction (stop generation)
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    // If composing (Chinese IME input), don't process Enter key
+    if (e.key === 'Enter' && !e.shiftKey && !isComposing) {
+      // If CompletionMenu is open, let it handle Enter key
+      if (completionIsOpen) {
+        return;
+      }
+      e.preventDefault();
+      onSubmit(e);
+    }
+    onKeyDown(e);
+  };
+
+  // Selection label like "6 lines selected"; no line numbers
+  const selectedLinesCount = activeSelection
+    ? Math.max(1, activeSelection.endLine - activeSelection.startLine + 1)
+    : 0;
+  const selectedLinesText =
+    selectedLinesCount > 0
+      ? `${selectedLinesCount} ${selectedLinesCount === 1 ? 'line' : 'lines'} selected`
+      : '';
+
+  return (
+    <div className="p-1 px-4 pb-4 absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-[var(--app-primary-background)]">
+      <div className="block">
+        <form className="composer-form" onSubmit={onSubmit}>
+          {/* Inner background layer */}
+          <div className="composer-overlay" />
+
+          {/* Banner area */}
+          <div className="input-banner" />
+
+          <div className="relative flex z-[1]">
+            {completionIsOpen &&
+              completionItems &&
+              completionItems.length > 0 &&
+              onCompletionSelect &&
+              onCompletionClose && (
+                <CompletionMenu
+                  items={completionItems}
+                  onSelect={onCompletionSelect}
+                  onClose={onCompletionClose}
+                  title={undefined}
+                />
+              )}
+
+            <div
+              ref={inputFieldRef}
+              contentEditable="plaintext-only"
+              className="composer-input"
+              role="textbox"
+              aria-label="Message input"
+              aria-multiline="true"
+              data-placeholder="Ask Qwen Code …"
+              // Use a data flag so CSS can show placeholder even if the browser
+              // inserts an invisible <br> into contentEditable (so :empty no longer matches)
+              data-empty={
+                inputText.replace(/\u200B/g, '').trim().length === 0
+                  ? 'true'
+                  : 'false'
+              }
+              onInput={(e) => {
+                const target = e.target as HTMLDivElement;
+                // Filter out zero-width space that we use to maintain height
+                const text = target.textContent?.replace(/\u200B/g, '') || '';
+                onInputChange(text);
+              }}
+              onCompositionStart={onCompositionStart}
+              onCompositionEnd={onCompositionEnd}
+              onKeyDown={handleKeyDown}
+              suppressContentEditableWarning
+            />
+          </div>
+
+          <div className="composer-actions">
+            {/* Edit mode button */}
+            <button
+              type="button"
+              className="btn-text-compact btn-text-compact--primary"
+              title={editModeInfo.title}
+              onClick={onToggleEditMode}
+            >
+              {editModeInfo.icon}
+              {/* Let the label truncate with ellipsis; hide on very small screens */}
+              <span className="hidden sm:inline">{editModeInfo.text}</span>
+            </button>
+
+            {/* Active file indicator */}
+            {activeFileName && (
+              <button
+                type="button"
+                className="btn-text-compact btn-text-compact--primary"
+                title={(() => {
+                  if (skipAutoActiveContext) {
+                    return selectedLinesText
+                      ? `Active selection will NOT be auto-loaded into context: ${selectedLinesText}`
+                      : `Active file will NOT be auto-loaded into context: ${activeFileName}`;
+                  }
+                  return selectedLinesText
+                    ? `Showing Qwen Code your current selection: ${selectedLinesText}`
+                    : `Showing Qwen Code your current file: ${activeFileName}`;
+                })()}
+                onClick={onToggleSkipAutoActiveContext}
+              >
+                {skipAutoActiveContext ? (
+                  <HideContextIcon />
+                ) : (
+                  <CodeBracketsIcon />
+                )}
+                {/* Truncate file path/selection; hide label on very small screens */}
+                <span className="hidden sm:inline">
+                  {selectedLinesText || activeFileName}
+                </span>
+              </button>
+            )}
+
+            {/* Spacer */}
+            <div className="flex-1 min-w-0" />
+
+            {/* @yiliang114. closed temporarily */}
+            {/* Thinking button */}
+            {/* <button
+              type="button"
+              className={`btn-icon-compact ${thinkingEnabled ? 'btn-icon-compact--active' : ''}`}
+              title={thinkingEnabled ? 'Thinking on' : 'Thinking off'}
+              onClick={onToggleThinking}
+            >
+              <ThinkingIcon enabled={thinkingEnabled} />
+            </button> */}
+
+            {/* Command button */}
+            <button
+              type="button"
+              className="btn-icon-compact hover:text-[var(--app-primary-foreground)]"
+              title="Show command menu (/)"
+              onClick={onShowCommandMenu}
+            >
+              <SlashCommandIcon />
+            </button>
+
+            {/* Attach button */}
+            <button
+              type="button"
+              className="btn-icon-compact hover:text-[var(--app-primary-foreground)]"
+              title="Attach context (Cmd/Ctrl + /)"
+              onClick={onAttachContext}
+            >
+              <LinkIcon />
+            </button>
+
+            {/* Send/Stop button */}
+            {isStreaming || isWaitingForResponse ? (
+              <button
+                type="button"
+                className="btn-send-compact [&>svg]:w-5 [&>svg]:h-5"
+                onClick={onCancel}
+                title="Stop generation"
+              >
+                <StopIcon />
+              </button>
+            ) : (
+              <button
+                type="submit"
+                className="btn-send-compact [&>svg]:w-5 [&>svg]:h-5"
+                disabled={composerDisabled || !inputText.trim()}
+              >
+                <ArrowUpIcon />
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

packages/chrome-extension/src/sidepanel/components/layout/Onboarding.tsx

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { generateIconUrl } from '../../utils/resourceUrl.js';
+
+interface OnboardingPageProps {
+  onLogin: () => void;
+}
+
+export const Onboarding: React.FC<OnboardingPageProps> = ({ onLogin }) => {
+  const iconUri = generateIconUrl('icon.png');
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-5 md:p-10">
+      <div className="flex flex-col items-center gap-8 w-full max-w-md mx-auto">
+        <div className="flex flex-col items-center gap-6">
+          {/* Application icon container */}
+          <div className="relative">
+            <img
+              src={iconUri}
+              alt="Qwen Code Logo"
+              className="w-[80px] h-[80px] object-contain"
+            />
+          </div>
+
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-app-primary-foreground mb-2">
+              Welcome to Qwen Code
+            </h1>
+            <p className="text-app-secondary-foreground max-w-sm">
+              Unlock the power of AI to understand, navigate, and transform your
+              codebase faster than ever before.
+            </p>
+          </div>
+
+          <button
+            onClick={onLogin}
+            className="w-full px-4 py-3 bg-[#4f46e5] text-white font-medium rounded-lg shadow-sm hover:bg-[#4338ca] transition-colors duration-200"
+          >
+            Get Started with Qwen Code
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/chrome-extension/src/sidepanel/components/layout/SessionSelector.tsx

@@ -0,0 +1,156 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  getTimeAgo,
+  groupSessionsByDate,
+} from '../../utils/sessionGrouping.js';
+import { SearchIcon } from '../icons/index.js';
+
+interface SessionSelectorProps {
+  visible: boolean;
+  sessions: Array<Record<string, unknown>>;
+  currentSessionId: string | null;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onSelectSession: (sessionId: string) => void;
+  onClose: () => void;
+  hasMore?: boolean;
+  isLoading?: boolean;
+  onLoadMore?: () => void;
+}
+
+/**
+ * Session selector component
+ * Display session list and support search and selection
+ */
+export const SessionSelector: React.FC<SessionSelectorProps> = ({
+  visible,
+  sessions,
+  currentSessionId,
+  searchQuery,
+  onSearchChange,
+  onSelectSession,
+  onClose,
+  hasMore = false,
+  isLoading = false,
+  onLoadMore,
+}) => {
+  if (!visible) {
+    return null;
+  }
+
+  const hasNoSessions = sessions.length === 0;
+
+  return (
+    <>
+      <div
+        className="session-selector-backdrop fixed top-0 left-0 right-0 bottom-0 z-[999] bg-transparent"
+        onClick={onClose}
+      />
+      <div
+        className="session-dropdown fixed bg-[var(--app-menu-background)] rounded-[var(--corner-radius-small)] w-[min(400px,calc(100vw-32px))] max-h-[min(500px,50vh)] flex flex-col shadow-[0_4px_16px_rgba(0,0,0,0.1)] z-[1000] outline-none text-[var(--vscode-chat-font-size,13px)] font-[var(--vscode-chat-font-family)]"
+        tabIndex={-1}
+        style={{
+          top: '30px',
+          left: '10px',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search Box */}
+        <div className="session-search p-2 flex items-center gap-2">
+          <SearchIcon className="session-search-icon w-4 h-4 opacity-50 flex-shrink-0 text-[var(--app-primary-foreground)]" />
+          <input
+            type="text"
+            className="session-search-input flex-1 bg-transparent border-none outline-none text-[var(--app-menu-foreground)] text-[var(--vscode-chat-font-size,13px)] font-[var(--vscode-chat-font-family)] p-0 placeholder:text-[var(--app-input-placeholder-foreground)] placeholder:opacity-60"
+            placeholder="Search sessions…"
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+          />
+        </div>
+
+        {/* Session List with Grouping */}
+        <div
+          className="session-list-content overflow-y-auto flex-1 select-none p-2"
+          onScroll={(e) => {
+            const el = e.currentTarget;
+            const distanceToBottom =
+              el.scrollHeight - (el.scrollTop + el.clientHeight);
+            if (distanceToBottom < 48 && hasMore && !isLoading) {
+              onLoadMore?.();
+            }
+          }}
+        >
+          {hasNoSessions ? (
+            <div
+              className="p-5 text-center text-[var(--app-secondary-foreground)]"
+              style={{
+                padding: '20px',
+                textAlign: 'center',
+                color: 'var(--app-secondary-foreground)',
+              }}
+            >
+              {searchQuery ? 'No matching sessions' : 'No sessions available'}
+            </div>
+          ) : (
+            groupSessionsByDate(sessions).map((group) => (
+              <React.Fragment key={group.label}>
+                <div className="session-group-label p-1 px-2 text-[var(--app-primary-foreground)] opacity-50 text-[0.9em] font-medium [&:not(:first-child)]:mt-2">
+                  {group.label}
+                </div>
+                <div className="session-group flex flex-col gap-[2px]">
+                  {group.sessions.map((session) => {
+                    const sessionId =
+                      (session.id as string) ||
+                      (session.sessionId as string) ||
+                      '';
+                    const title =
+                      (session.title as string) ||
+                      (session.name as string) ||
+                      'Untitled';
+                    const lastUpdated =
+                      (session.lastUpdated as string) ||
+                      (session.startTime as string) ||
+                      '';
+                    const isActive = sessionId === currentSessionId;
+
+                    return (
+                      <button
+                        key={sessionId}
+                        className={`session-item flex items-center justify-between py-1.5 px-2 bg-transparent border-none rounded-md cursor-pointer text-left w-full text-[var(--vscode-chat-font-size,13px)] font-[var(--vscode-chat-font-family)] text-[var(--app-primary-foreground)] transition-colors duration-100 hover:bg-[var(--app-list-hover-background)] ${
+                          isActive
+                            ? 'active bg-[var(--app-list-active-background)] text-[var(--app-list-active-foreground)] font-[600]'
+                            : ''
+                        }`}
+                        onClick={() => {
+                          onSelectSession(sessionId);
+                          onClose();
+                        }}
+                      >
+                        <span className="session-item-title flex-1 overflow-hidden text-ellipsis whitespace-nowrap min-w-0">
+                          {title}
+                        </span>
+                        <span className="session-item-time opacity-60 text-[0.9em] flex-shrink-0 ml-3">
+                          {getTimeAgo(lastUpdated)}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </React.Fragment>
+            ))
+          )}
+          {hasMore && (
+            <div className="p-2 text-center opacity-60 text-[0.9em]">
+              {isLoading ? 'Loading…' : ''}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

packages/chrome-extension/src/sidepanel/components/messages/Assistant/AssistantMessage.css

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * AssistantMessage Component Styles
+ * Pseudo-elements (::before) for bullet points and (::after) for timeline connectors
+ */
+
+/* Bullet point indicator using ::before pseudo-element */
+.assistant-message-container.assistant-message-default::before,
+.assistant-message-container.assistant-message-success::before,
+.assistant-message-container.assistant-message-error::before,
+.assistant-message-container.assistant-message-warning::before,
+.assistant-message-container.assistant-message-loading::before {
+  content: '\25cf';
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  z-index: 1;
+}
+
+/* Default state - secondary foreground color */
+.assistant-message-container.assistant-message-default::before {
+  color: var(--app-secondary-foreground);
+}
+
+/* Success state - green bullet (maps to .ge) */
+.assistant-message-container.assistant-message-success::before {
+  color: #74c991;
+}
+
+/* Error state - red bullet (maps to .be) */
+.assistant-message-container.assistant-message-error::before {
+  color: #c74e39;
+}
+
+/* Warning state - yellow/orange bullet (maps to .ue) */
+.assistant-message-container.assistant-message-warning::before {
+  color: #e1c08d;
+}
+
+/* Loading state - static bullet (maps to .he) */
+.assistant-message-container.assistant-message-loading::before {
+  color: var(--app-secondary-foreground);
+  background-color: var(--app-secondary-background);
+}
+
+.assistant-message-container.assistant-message-loading::after {
+  display: none;
+}

packages/chrome-extension/src/sidepanel/components/messages/Assistant/AssistantMessage.tsx

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+import './AssistantMessage.css';
+
+interface AssistantMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+  status?: 'default' | 'success' | 'error' | 'warning' | 'loading';
+  // When true, render without the left status bullet (no ::before dot)
+  hideStatusIcon?: boolean;
+}
+
+/**
+ * AssistantMessage component - renders AI responses with Qwen Code styling
+ * Supports different states: default, success, error, warning, loading
+ */
+export const AssistantMessage: React.FC<AssistantMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+  status = 'default',
+  hideStatusIcon = false,
+}) => {
+  // Empty content not rendered directly, avoid poor visual experience from only showing ::before dot
+  if (!content || content.trim().length === 0) {
+    return null;
+  }
+
+  // Map status to CSS class (only for ::before pseudo-element)
+  const getStatusClass = () => {
+    if (hideStatusIcon) {
+      return '';
+    }
+    switch (status) {
+      case 'success':
+        return 'assistant-message-success';
+      case 'error':
+        return 'assistant-message-error';
+      case 'warning':
+        return 'assistant-message-warning';
+      case 'loading':
+        return 'assistant-message-loading';
+      default:
+        return 'assistant-message-default';
+    }
+  };
+
+  return (
+    <div
+      className={`qwen-message message-item assistant-message-container ${getStatusClass()}`}
+      style={{
+        width: '100%',
+        alignItems: 'flex-start',
+        paddingLeft: '30px',
+        userSelect: 'text',
+        position: 'relative',
+        // paddingTop: '8px',
+        // paddingBottom: '8px',
+      }}
+    >
+      <span style={{ width: '100%' }}>
+        <div
+          style={{
+            margin: 0,
+            width: '100%',
+            wordWrap: 'break-word',
+            overflowWrap: 'break-word',
+            whiteSpace: 'normal',
+          }}
+        >
+          <MessageContent
+            content={content}
+            onFileClick={onFileClick}
+            enableFileLinks={false}
+          />
+        </div>
+      </span>
+    </div>
+  );
+};

packages/chrome-extension/src/sidepanel/components/messages/MarkdownRenderer/MarkdownRenderer.css

@@ -0,0 +1,223 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Styles for MarkdownRenderer component
+ */
+
+.markdown-content {
+  /* Base styles for markdown content */
+  line-height: 1.6;
+  color: var(--app-primary-foreground);
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+
+.markdown-content h1 {
+  font-size: 1.75em;
+  border-bottom: 1px solid var(--app-primary-border-color);
+  padding-bottom: 0.3em;
+}
+
+.markdown-content h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--app-primary-border-color);
+  padding-bottom: 0.3em;
+}
+
+.markdown-content h3 {
+  font-size: 1.25em;
+}
+
+.markdown-content h4 {
+  font-size: 1.1em;
+}
+
+.markdown-content h5,
+.markdown-content h6 {
+  font-size: 1em;
+}
+
+.markdown-content p {
+  margin-top: 0;
+  /* margin-bottom: 1em; */
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding-left: 2em;
+}
+
+/* Ensure list markers are visible even with global CSS resets */
+.markdown-content ul {
+  list-style-type: disc;
+  list-style-position: outside;
+}
+
+.markdown-content ol {
+  list-style-type: decimal;
+  list-style-position: outside;
+}
+
+/* Nested list styles */
+.markdown-content ul ul {
+  list-style-type: circle;
+}
+
+.markdown-content ul ul ul {
+  list-style-type: square;
+}
+
+.markdown-content ol ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-content ol ol ol {
+  list-style-type: lower-roman;
+}
+
+/* Style the marker explicitly so themes don't hide it */
+.markdown-content li::marker {
+  color: var(--app-secondary-foreground);
+}
+
+.markdown-content li {
+  margin-bottom: 0.25em;
+}
+
+.markdown-content li > p {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.markdown-content blockquote {
+  margin: 0 0 1em;
+  padding: 0 1em;
+  border-left: 0.25em solid var(--app-primary-border-color);
+  color: var(--app-secondary-foreground);
+}
+
+.markdown-content a {
+  color: var(--app-link-foreground, #007acc);
+  text-decoration: none;
+}
+
+.markdown-content a:hover {
+  color: var(--app-link-active-foreground, #005a9e);
+  text-decoration: underline;
+}
+
+.markdown-content code {
+  font-family: var(
+    --app-monospace-font-family,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    'Courier New',
+    monospace
+  );
+  font-size: 0.9em;
+  background-color: var(--app-code-background, rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--app-primary-border-color);
+  border-radius: var(--corner-radius-small, 4px);
+  padding: 0.2em 0.4em;
+  white-space: pre-wrap; /* Support automatic line wrapping */
+  word-break: break-word; /* Break words when necessary */
+}
+
+.markdown-content pre {
+  margin: 1em 0;
+  padding: 1em;
+  overflow-x: auto;
+  background-color: var(--app-code-background, rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--app-primary-border-color);
+  border-radius: var(--corner-radius-small, 4px);
+  font-family: var(
+    --app-monospace-font-family,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    'Courier New',
+    monospace
+  );
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+
+.markdown-content pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  white-space: pre-wrap; /* Support automatic line wrapping */
+  word-break: break-word; /* Break words when necessary */
+}
+
+.markdown-content .file-path-link {
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-family: var(
+    --app-monospace-font-family,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    'Courier New',
+    monospace
+  );
+  font-size: 0.95em;
+  color: var(--app-link-foreground, #007acc);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.1s ease;
+}
+
+.markdown-content .file-path-link:hover {
+  color: var(--app-link-active-foreground, #005a9e);
+}
+
+.markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--app-primary-border-color);
+  margin: 1.5em 0;
+}
+
+.markdown-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+.markdown-content th,
+.markdown-content td {
+  padding: 0.5em 1em;
+  border: 1px solid var(--app-primary-border-color);
+  text-align: left;
+}
+
+.markdown-content th {
+  background-color: var(--app-secondary-background);
+  font-weight: 600;
+}

packages/chrome-extension/src/sidepanel/components/messages/MarkdownRenderer/MarkdownRenderer.tsx

@@ -0,0 +1,392 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * MarkdownRenderer component - renders markdown content with syntax highlighting and clickable file paths
+ */
+
+import type React from 'react';
+import MarkdownIt from 'markdown-it';
+import type { Options as MarkdownItOptions } from 'markdown-it';
+import './MarkdownRenderer.css';
+
+interface MarkdownRendererProps {
+  content: string;
+  onFileClick?: (filePath: string) => void;
+  /** When false, do not convert file paths into clickable links. Default: true */
+  enableFileLinks?: boolean;
+}
+
+/**
+ * Regular expressions for parsing content
+ */
+// Match absolute file paths like: /path/to/file.ts or C:\path\to\file.ts
+const FILE_PATH_REGEX =
+  /(?:[a-zA-Z]:)?[/\\](?:[\w\-. ]+[/\\])+[\w\-. ]+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|yaml|yml|toml|xml|html|vue|svelte)/gi;
+// Match file paths with optional line numbers like: /path/to/file.ts#7-14 or C:\path\to\file.ts#7
+const FILE_PATH_WITH_LINES_REGEX =
+  /(?:[a-zA-Z]:)?[/\\](?:[\w\-. ]+[/\\])+[\w\-. ]+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|yaml|yml|toml|xml|html|vue|svelte)#(\d+)(?:-(\d+))?/gi;
+
+/**
+ * MarkdownRenderer component - renders markdown content with enhanced features
+ */
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+  content,
+  onFileClick,
+  enableFileLinks = true,
+}) => {
+  /**
+   * Initialize markdown-it with plugins
+   */
+  const getMarkdownInstance = (): MarkdownIt => {
+    // Create markdown-it instance with options
+    const md = new MarkdownIt({
+      html: false, // Disable HTML for security
+      xhtmlOut: false,
+      breaks: true,
+      linkify: true,
+      typographer: true,
+    } as MarkdownItOptions);
+
+    return md;
+  };
+
+  /**
+   * Render markdown content to HTML
+   */
+  const renderMarkdown = (): string => {
+    try {
+      const md = getMarkdownInstance();
+
+      // Process the markdown content
+      let html = md.render(content);
+
+      // Post-process to add file path click handlers unless disabled
+      if (enableFileLinks) {
+        html = processFilePaths(html);
+      }
+
+      return html;
+    } catch (error) {
+      console.error('Error rendering markdown:', error);
+      // Fallback to plain text if markdown rendering fails
+      return escapeHtml(content);
+    }
+  };
+
+  /**
+   * Escape HTML characters for security
+   */
+  const escapeHtml = (unsafe: string): string =>
+    unsafe
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+
+  /**
+   * Process file paths in HTML to make them clickable
+   */
+  const processFilePaths = (html: string): string => {
+    // If DOM is not available, bail out to avoid breaking SSR
+    if (typeof document === 'undefined') {
+      return html;
+    }
+
+    // Build non-global variants to avoid .test() statefulness
+    const FILE_PATH_NO_G = new RegExp(
+      FILE_PATH_REGEX.source,
+      FILE_PATH_REGEX.flags.replace('g', ''),
+    );
+    const FILE_PATH_WITH_LINES_NO_G = new RegExp(
+      FILE_PATH_WITH_LINES_REGEX.source,
+      FILE_PATH_WITH_LINES_REGEX.flags.replace('g', ''),
+    );
+    // Match a bare file name like README.md (no leading slash)
+    const BARE_FILE_REGEX =
+      /[\w\-. ]+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|ya?ml|toml|xml|html|vue|svelte)/i;
+
+    // Parse HTML into a DOM tree so we don't replace inside attributes
+    const container = document.createElement('div');
+    container.innerHTML = html;
+
+    const union = new RegExp(
+      `${FILE_PATH_WITH_LINES_REGEX.source}|${FILE_PATH_REGEX.source}|${BARE_FILE_REGEX.source}`,
+      'gi',
+    );
+
+    // Convert a "path#fragment" into VS Code friendly "path:line" (we only keep the start line)
+    const normalizePathAndLine = (
+      raw: string,
+    ): { displayText: string; dataPath: string } => {
+      const displayText = raw;
+      let base = raw;
+      // Extract hash fragment like #12, #L12 or #12-34 and keep only the first number
+      const hashIndex = raw.indexOf('#');
+      if (hashIndex >= 0) {
+        const frag = raw.slice(hashIndex + 1);
+        // Accept L12, 12 or 12-34
+        const m = frag.match(/^L?(\d+)(?:-\d+)?$/i);
+        if (m) {
+          const line = parseInt(m[1], 10);
+          base = raw.slice(0, hashIndex);
+          return { displayText, dataPath: `${base}:${line}` };
+        }
+      }
+      return { displayText, dataPath: base };
+    };
+
+    const makeLink = (text: string) => {
+      const link = document.createElement('a');
+      // Pass base path (with optional :line) to the handler; keep the full text as label
+      const { dataPath } = normalizePathAndLine(text);
+      link.className = 'file-path-link';
+      link.textContent = text;
+      link.setAttribute('href', '#');
+      link.setAttribute('title', `Open ${text}`);
+      // Carry file path via data attribute; click handled by event delegation
+      link.setAttribute('data-file-path', dataPath);
+      return link;
+    };
+
+    const upgradeAnchorIfFilePath = (a: HTMLAnchorElement) => {
+      const href = a.getAttribute('href') || '';
+      const text = (a.textContent || '').trim();
+
+      // Helper: identify dot-chained code refs (e.g. vscode.commands.register)
+      // but DO NOT treat filenames/paths as code refs.
+      const isCodeReference = (str: string): boolean => {
+        if (BARE_FILE_REGEX.test(str)) {
+          return false; // looks like a filename
+        }
+        if (/[/\\]/.test(str)) {
+          return false; // contains a path separator
+        }
+        const codeRefPattern = /^[a-zA-Z_$][\w$]*(\.[a-zA-Z_$][\w$]*)+$/;
+        return codeRefPattern.test(str);
+      };
+
+      // If linkify turned a bare filename (e.g. README.md) into http://<filename>, convert it back
+      const httpMatch = href.match(/^https?:\/\/(.+)$/i);
+      if (httpMatch) {
+        try {
+          const url = new URL(href);
+          const host = url.hostname || '';
+          const pathname = url.pathname || '';
+          const noPath = pathname === '' || pathname === '/';
+
+          // Case 1: anchor text itself is a bare filename and equals the host (e.g. README.md)
+          if (
+            noPath &&
+            BARE_FILE_REGEX.test(text) &&
+            host.toLowerCase() === text.toLowerCase()
+          ) {
+            const { dataPath } = normalizePathAndLine(text);
+            a.classList.add('file-path-link');
+            a.setAttribute('href', '#');
+            a.setAttribute('title', `Open ${text}`);
+            a.setAttribute('data-file-path', dataPath);
+            return;
+          }
+
+          // Case 2: host itself looks like a filename (rare but happens), use it
+          if (noPath && BARE_FILE_REGEX.test(host)) {
+            const { dataPath } = normalizePathAndLine(host);
+            a.classList.add('file-path-link');
+            a.setAttribute('href', '#');
+            a.setAttribute('title', `Open ${text || host}`);
+            a.setAttribute('data-file-path', dataPath);
+            return;
+          }
+        } catch {
+          // fall through; unparseable URL
+        }
+      }
+
+      // Ignore other external protocols
+      if (/^(https?|mailto|ftp|data):/i.test(href)) {
+        return;
+      }
+
+      const candidate = href || text;
+
+      // Skip if it looks like a code reference
+      if (isCodeReference(candidate)) {
+        return;
+      }
+
+      if (
+        FILE_PATH_WITH_LINES_NO_G.test(candidate) ||
+        FILE_PATH_NO_G.test(candidate)
+      ) {
+        const { dataPath } = normalizePathAndLine(candidate);
+        a.classList.add('file-path-link');
+        a.setAttribute('href', '#');
+        a.setAttribute('title', `Open ${text || href}`);
+        a.setAttribute('data-file-path', dataPath);
+        return;
+      }
+
+      // Bare file name or relative path (e.g. README.md or docs/README.md)
+      if (BARE_FILE_REGEX.test(candidate)) {
+        const { dataPath } = normalizePathAndLine(candidate);
+        a.classList.add('file-path-link');
+        a.setAttribute('href', '#');
+        a.setAttribute('title', `Open ${text || href}`);
+        a.setAttribute('data-file-path', dataPath);
+      }
+    };
+
+    // Helper: identify dot-chained code refs (e.g. vscode.commands.register)
+    // but DO NOT treat filenames/paths as code refs.
+    const isCodeReference = (str: string): boolean => {
+      if (BARE_FILE_REGEX.test(str)) {
+        return false; // looks like a filename
+      }
+      if (/[/\\]/.test(str)) {
+        return false; // contains a path separator
+      }
+      const codeRefPattern = /^[a-zA-Z_$][\w$]*(\.[a-zA-Z_$][\w$]*)+$/;
+      return codeRefPattern.test(str);
+    };
+
+    const walk = (node: Node) => {
+      // Do not transform inside existing anchors
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        if (el.tagName.toLowerCase() === 'a') {
+          upgradeAnchorIfFilePath(el as HTMLAnchorElement);
+          return; // Don't descend into <a>
+        }
+        // Avoid transforming inside code/pre blocks
+        const tag = el.tagName.toLowerCase();
+        if (tag === 'code' || tag === 'pre') {
+          return;
+        }
+      }
+
+      for (let child = node.firstChild; child; ) {
+        const next = child.nextSibling; // child may be replaced
+        if (child.nodeType === Node.TEXT_NODE) {
+          const text = child.nodeValue || '';
+          union.lastIndex = 0;
+          const hasMatch = union.test(text);
+          union.lastIndex = 0;
+          if (hasMatch) {
+            const frag = document.createDocumentFragment();
+            let lastIndex = 0;
+            let m: RegExpExecArray | null;
+            while ((m = union.exec(text))) {
+              const matchText = m[0];
+              const idx = m.index;
+
+              // Skip if it looks like a code reference
+              if (isCodeReference(matchText)) {
+                // Just add the text as-is without creating a link
+                if (idx > lastIndex) {
+                  frag.appendChild(
+                    document.createTextNode(text.slice(lastIndex, idx)),
+                  );
+                }
+                frag.appendChild(document.createTextNode(matchText));
+                lastIndex = idx + matchText.length;
+                continue;
+              }
+
+              if (idx > lastIndex) {
+                frag.appendChild(
+                  document.createTextNode(text.slice(lastIndex, idx)),
+                );
+              }
+              frag.appendChild(makeLink(matchText));
+              lastIndex = idx + matchText.length;
+            }
+            if (lastIndex < text.length) {
+              frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+            }
+            node.replaceChild(frag, child);
+          }
+        } else if (child.nodeType === Node.ELEMENT_NODE) {
+          walk(child);
+        }
+        child = next;
+      }
+    };
+
+    walk(container);
+    return container.innerHTML;
+  };
+
+  // Event delegation: intercept clicks on generated file-path links
+  const handleContainerClick = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+  ) => {
+    // If file links disabled, do nothing
+    if (!enableFileLinks) {
+      return;
+    }
+    const target = e.target as HTMLElement | null;
+    if (!target) {
+      return;
+    }
+
+    // Find nearest anchor with our marker class
+    const anchor = (target.closest &&
+      target.closest('a.file-path-link')) as HTMLAnchorElement | null;
+    if (anchor) {
+      const filePath = anchor.getAttribute('data-file-path');
+      if (!filePath) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      onFileClick?.(filePath);
+      return;
+    }
+
+    // Fallback: intercept "http://README.md" style links that slipped through
+    const anyAnchor = (target.closest &&
+      target.closest('a')) as HTMLAnchorElement | null;
+    if (!anyAnchor) {
+      return;
+    }
+
+    const href = anyAnchor.getAttribute('href') || '';
+    if (!/^https?:\/\//i.test(href)) {
+      return;
+    }
+    try {
+      const url = new URL(href);
+      const host = url.hostname || '';
+      const path = url.pathname || '';
+      const noPath = path === '' || path === '/';
+
+      // Basic bare filename heuristic on the host part (e.g. README.md)
+      if (noPath && /\.[a-z0-9]+$/i.test(host)) {
+        // Prefer the readable text content if it looks like a file
+        const text = (anyAnchor.textContent || '').trim();
+        const candidate = /\.[a-z0-9]+$/i.test(text) ? text : host;
+        e.preventDefault();
+        e.stopPropagation();
+        onFileClick?.(candidate);
+      }
+    } catch {
+      // ignore
+    }
+  };
+
+  return (
+    <div
+      className="markdown-content"
+      onClick={handleContainerClick}
+      dangerouslySetInnerHTML={{ __html: renderMarkdown() }}
+      style={{
+        wordWrap: 'break-word',
+        overflowWrap: 'break-word',
+        whiteSpace: 'normal',
+      }}
+    />
+  );
+};

packages/chrome-extension/src/sidepanel/components/messages/MessageContent.tsx

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MarkdownRenderer } from './MarkdownRenderer/MarkdownRenderer.js';
+
+interface MessageContentProps {
+  content: string;
+  onFileClick?: (filePath: string) => void;
+  enableFileLinks?: boolean;
+}
+
+export const MessageContent: React.FC<MessageContentProps> = ({
+  content,
+  onFileClick,
+  enableFileLinks,
+}) => (
+  <MarkdownRenderer
+    content={content}
+    onFileClick={onFileClick}
+    enableFileLinks={enableFileLinks}
+  />
+);

packages/chrome-extension/src/sidepanel/components/messages/ThinkingMessage.tsx

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from './MessageContent.js';
+
+interface ThinkingMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+}
+
+export const ThinkingMessage: React.FC<ThinkingMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+}) => (
+  <div className="qwen-message thinking-message flex gap-0 items-start text-left py-2 flex-col relative opacity-80 italic pl-6 animate-[fadeIn_0.2s_ease-in]">
+    <div
+      className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+      style={{
+        backgroundColor:
+          'var(--app-list-hover-background, rgba(100, 100, 255, 0.1))',
+        border: '1px solid rgba(100, 100, 255, 0.3)',
+        borderRadius: 'var(--corner-radius-medium)',
+        padding: 'var(--app-spacing-medium)',
+        color: 'var(--app-primary-foreground)',
+      }}
+    >
+      <span className="inline-flex items-center gap-1 mr-2">
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.2s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.4s]"></span>
+      </span>
+      <MessageContent content={content} onFileClick={onFileClick} />
+    </div>
+  </div>
+);

packages/chrome-extension/src/sidepanel/components/messages/UserMessage.tsx

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from './MessageContent.js';
+
+interface FileContext {
+  fileName: string;
+  filePath: string;
+  startLine?: number;
+  endLine?: number;
+}
+
+interface UserMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+  fileContext?: FileContext;
+}
+
+export const UserMessage: React.FC<UserMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+  fileContext,
+}) => {
+  // Generate display text for file context
+  const getFileContextDisplay = () => {
+    if (!fileContext) {
+      return null;
+    }
+    const { fileName, startLine, endLine } = fileContext;
+    if (startLine && endLine) {
+      return startLine === endLine
+        ? `${fileName}#${startLine}`
+        : `${fileName}#${startLine}-${endLine}`;
+    }
+    return fileName;
+  };
+
+  const fileContextDisplay = getFileContextDisplay();
+
+  return (
+    <div
+      className="qwen-message user-message-container flex gap-0 my-1 items-start text-left flex-col relative"
+      style={{ position: 'relative' }}
+    >
+      <div
+        className="inline-block relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+        style={{
+          border: '1px solid var(--app-input-border)',
+          borderRadius: 'var(--corner-radius-medium)',
+          backgroundColor: 'var(--app-input-background)',
+          padding: '4px 6px',
+          color: 'var(--app-primary-foreground)',
+        }}
+      >
+        {/* For user messages, do NOT convert filenames to clickable links */}
+        <MessageContent
+          content={content}
+          onFileClick={onFileClick}
+          enableFileLinks={false}
+        />
+      </div>
+
+      {/* File context indicator */}
+      {fileContextDisplay && (
+        <div className="mt-1">
+          <div
+            role="button"
+            tabIndex={0}
+            className="mr inline-flex items-center py-0 pr-2 gap-1 rounded-sm cursor-pointer relative opacity-50"
+            onClick={() => fileContext && onFileClick?.(fileContext.filePath)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                fileContext && onFileClick?.(fileContext.filePath);
+              }
+            }}
+          >
+            <div
+              className="gr"
+              title={fileContextDisplay}
+              style={{
+                fontSize: '12px',
+                color: 'var(--app-secondary-foreground)',
+              }}
+            >
+              {fileContextDisplay}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

packages/chrome-extension/src/sidepanel/components/messages/Waiting/InterruptedMessage.tsx

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+
+interface InterruptedMessageProps {
+  text?: string;
+}
+
+// A lightweight status line similar to WaitingMessage but without the left status icon.
+export const InterruptedMessage: React.FC<InterruptedMessageProps> = ({
+  text = 'Interrupted',
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col opacity-85">
+    <div className="interrupted-item w-full relative">
+      <span className="opacity-70 italic">{text}</span>
+    </div>
+  </div>
+);

packages/chrome-extension/src/sidepanel/components/messages/Waiting/WaitingMessage.css

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import url('../Assistant/AssistantMessage.css');
+
+/* Subtle shimmering highlight across the loading text */
+@keyframes waitingMessageShimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.loading-text-shimmer {
+  /* Use the theme foreground as the base color, with a moving light band */
+  background-image: linear-gradient(
+    90deg,
+    var(--app-secondary-foreground) 0%,
+    var(--app-secondary-foreground) 40%,
+    rgba(255, 255, 255, 0.95) 50%,
+    var(--app-secondary-foreground) 60%,
+    var(--app-secondary-foreground) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent; /* text color comes from the gradient */
+  animation: waitingMessageShimmer 1.6s linear infinite;
+}
+
+.interrupted-item::after {
+  display: none;
+}

packages/chrome-extension/src/sidepanel/components/messages/Waiting/WaitingMessage.tsx

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import './WaitingMessage.css';
+import { WITTY_LOADING_PHRASES } from '../../../constants/loadingMessages.js';
+
+interface WaitingMessageProps {
+  loadingMessage: string;
+}
+
+// Rotate message every few seconds while waiting
+const ROTATE_INTERVAL_MS = 3000; // rotate every 3s per request
+
+export const WaitingMessage: React.FC<WaitingMessageProps> = ({
+  loadingMessage,
+}) => {
+  // Build a phrase list that starts with the provided message (if any), then witty fallbacks
+  const phrases = useMemo(() => {
+    const set = new Set<string>();
+    const list: string[] = [];
+    if (loadingMessage && loadingMessage.trim()) {
+      list.push(loadingMessage);
+      set.add(loadingMessage);
+    }
+    for (const p of WITTY_LOADING_PHRASES) {
+      if (!set.has(p)) {
+        list.push(p);
+      }
+    }
+    return list;
+  }, [loadingMessage]);
+
+  const [index, setIndex] = useState(0);
+
+  // Reset to the first phrase whenever the incoming message changes
+  useEffect(() => {
+    setIndex(0);
+  }, [phrases]);
+
+  // Periodically rotate to a different phrase
+  useEffect(() => {
+    if (phrases.length <= 1) {
+      return;
+    }
+    const id = setInterval(() => {
+      setIndex((prev) => {
+        // pick a different random index to avoid immediate repeats
+        let next = Math.floor(Math.random() * phrases.length);
+        if (phrases.length > 1) {
+          let guard = 0;
+          while (next === prev && guard < 5) {
+            next = Math.floor(Math.random() * phrases.length);
+            guard++;
+          }
+        }
+        return next;
+      });
+    }, ROTATE_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [phrases]);
+
+  return (
+    <div className="waiting-message-outer flex gap-0 items-start text-left py-2 flex-col opacity-85">
+      {/* Use the same left status icon (pseudo-element) style as assistant-message-container */}
+      <div className="assistant-message-container assistant-message-loading waiting-message-inner w-full items-start pl-[30px] relative">
+        <span className="waiting-message-text opacity-70 italic loading-text-shimmer">
+          {phrases[index]}
+        </span>
+      </div>
+    </div>
+  );
+};

packages/chrome-extension/src/sidepanel/components/messages/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { UserMessage } from './UserMessage.js';
+export { AssistantMessage } from './Assistant/AssistantMessage.js';
+export { ThinkingMessage } from './ThinkingMessage.js';
+export { WaitingMessage } from './Waiting/WaitingMessage.js';
+export { InterruptedMessage } from './Waiting/InterruptedMessage.js';

packages/chrome-extension/src/sidepanel/components/messages/toolcalls/Bash/Bash.css

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Execute tool call styles - Enhanced styling with semantic class names
+ */
+
+/* Root container for execute tool call output */
+.bash-toolcall-card {
+  border: 0.5px solid var(--app-input-border);
+  border-radius: 5px;
+  background: var(--app-tool-background);
+  margin: 8px 0;
+  max-width: 100%;
+  font-size: 1em;
+  align-items: start;
+}
+
+/* Content wrapper inside the card */
+.bash-toolcall-content {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 4px;
+}
+
+/* Individual input/output row */
+.bash-toolcall-row {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  border-top: 0.5px solid var(--app-input-border);
+  padding: 4px;
+}
+
+/* First row has no top border */
+.bash-toolcall-row:first-child {
+  border-top: none;
+}
+
+/* Row label (IN/OUT/ERROR) */
+.bash-toolcall-label {
+  grid-column: 1;
+  color: var(--app-secondary-foreground);
+  text-align: left;
+  opacity: 50%;
+  padding: 4px 8px 4px 4px;
+  font-family: var(--app-monospace-font-family);
+  font-size: 0.85em;
+}
+
+/* Row content area */
+.bash-toolcall-row-content {
+  grid-column: 2;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  padding: 4px;
+}
+
+/* Truncated content styling */
+.bash-toolcall-row-content:not(.bash-toolcall-full) {
+  max-height: 60px;
+  mask-image: linear-gradient(
+    to bottom,
+    var(--app-primary-background) 40px,
+    transparent 60px
+  );
+  overflow: hidden;
+}
+
+/* Preformatted content */
+.bash-toolcall-pre {
+  margin-block: 0;
+  overflow: hidden;
+  font-family: var(--app-monospace-font-family);
+  font-size: 0.85em;
+}
+
+/* Code content */
+.bash-toolcall-code {
+  margin: 0;
+  padding: 0;
+  font-family: var(--app-monospace-font-family);
+  font-size: 0.85em;
+}
+
+/* Output content with subtle styling */
+.bash-toolcall-output-subtle {
+  background-color: var(--app-code-background);
+  white-space: pre;
+  overflow-x: auto;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Error content styling */
+.bash-toolcall-error-content {
+  color: #c74e39;
+}

packages/chrome-extension/src/sidepanel/components/messages/toolcalls/Bash/Bash.tsx

@@ -0,0 +1,180 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Execute tool call component - specialized for command execution operations
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import { ToolCallContainer } from '../shared/LayoutComponents.js';
+import { safeTitle, groupContent } from '../shared/utils.js';
+import { useVSCode } from '../../../../hooks/useVSCode.js';
+import { createAndOpenTempFile } from '../../../../utils/tempFileManager.js';
+import './Bash.css';
+
+/**
+ * Specialized component for Execute/Bash tool calls
+ * Shows: Bash bullet + description + IN/OUT card
+ */
+export const ExecuteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
+  const { title, content, rawInput, toolCallId } = toolCall;
+  const commandText = safeTitle(title);
+  const vscode = useVSCode();
+
+  // Group content by type
+  const { textOutputs, errors } = groupContent(content);
+
+  // Extract command from rawInput if available
+  let inputCommand = commandText;
+  if (rawInput && typeof rawInput === 'object') {
+    const inputObj = rawInput as { command?: string };
+    inputCommand = inputObj.command || commandText;
+  } else if (typeof rawInput === 'string') {
+    inputCommand = rawInput;
+  }
+
+  // Handle click on IN section
+  const handleInClick = () => {
+    createAndOpenTempFile(
+      vscode.postMessage,
+      inputCommand,
+      'bash-input',
+      '.sh',
+    );
+  };
+
+  // Handle click on OUT section
+  const handleOutClick = () => {
+    if (textOutputs.length > 0) {
+      const output = textOutputs.join('\n');
+      createAndOpenTempFile(vscode.postMessage, output, 'bash-output', '.txt');
+    }
+  };
+
+  // Map tool status to container status for proper bullet coloring
+  const containerStatus:
+    | 'success'
+    | 'error'
+    | 'warning'
+    | 'loading'
+    | 'default' =
+    errors.length > 0
+      ? 'error'
+      : toolCall.status === 'in_progress' || toolCall.status === 'pending'
+        ? 'loading'
+        : 'success';
+
+  // Error case
+  if (errors.length > 0) {
+    return (
+      <ToolCallContainer
+        label="Bash"
+        status={containerStatus}
+        toolCallId={toolCallId}
+      >
+        {/* Branch connector summary */}
+        <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
+          <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
+          <span className="flex-shrink-0 w-full">{commandText}</span>
+        </div>
+        {/* Error card - semantic DOM + Tailwind styles */}
+        <div className="bash-toolcall-card">
+          <div className="bash-toolcall-content">
+            {/* IN row */}
+            <div
+              className="bash-toolcall-row"
+              onClick={handleInClick}
+              style={{ cursor: 'pointer' }}
+            >
+              <div className="bash-toolcall-label">IN</div>
+              <div className="bash-toolcall-row-content">
+                <pre className="bash-toolcall-pre">{inputCommand}</pre>
+              </div>
+            </div>
+
+            {/* ERROR row */}
+            <div className="bash-toolcall-row">
+              <div className="bash-toolcall-label">Error</div>
+              <div className="bash-toolcall-row-content">
+                <pre className="bash-toolcall-pre bash-toolcall-error-content">
+                  {errors.join('\n')}
+                </pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ToolCallContainer>
+    );
+  }
+
+  // Success with output
+  if (textOutputs.length > 0) {
+    const output = textOutputs.join('\n');
+    const truncatedOutput =
+      output.length > 500 ? output.substring(0, 500) + '...' : output;
+
+    return (
+      <ToolCallContainer
+        label="Bash"
+        status={containerStatus}
+        toolCallId={toolCallId}
+      >
+        {/* Branch connector summary */}
+        <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
+          <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
+          <span className="flex-shrink-0 w-full">{commandText}</span>
+        </div>
+        {/* Output card - semantic DOM + Tailwind styles */}
+        <div className="bash-toolcall-card">
+          <div className="bash-toolcall-content">
+            {/* IN row */}
+            <div
+              className="bash-toolcall-row"
+              onClick={handleInClick}
+              style={{ cursor: 'pointer' }}
+            >
+              <div className="bash-toolcall-label">IN</div>
+              <div className="bash-toolcall-row-content">
+                <pre className="bash-toolcall-pre">{inputCommand}</pre>
+              </div>
+            </div>
+
+            {/* OUT row */}
+            <div
+              className="bash-toolcall-row"
+              onClick={handleOutClick}
+              style={{ cursor: 'pointer' }}
+            >
+              <div className="bash-toolcall-label">OUT</div>
+              <div className="bash-toolcall-row-content">
+                <div className="bash-toolcall-output-subtle">
+                  <pre className="bash-toolcall-pre">{truncatedOutput}</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ToolCallContainer>
+    );
+  }
+
+  // Success without output: show command with branch connector
+  return (
+    <ToolCallContainer
+      label="Bash"
+      status={containerStatus}
+      toolCallId={toolCallId}
+    >
+      <div
+        className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1"
+        onClick={handleInClick}
+        style={{ cursor: 'pointer' }}
+      >
+        <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
+        <span className="flex-shrink-0 w-full">{commandText}</span>
+      </div>
+    </ToolCallContainer>
+  );
+};

packages/chrome-extension/src/sidepanel/components/messages/toolcalls/Edit/EditToolCall.tsx

@@ -0,0 +1,196 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Edit tool call component - specialized for file editing operations
+ */
+
+import { useMemo } from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import {
+  groupContent,
+  mapToolStatusToContainerStatus,
+} from '../shared/utils.js';
+import { FileLink } from '../../../layout/FileLink.js';
+import type { ToolCallContainerProps } from '../shared/LayoutComponents.js';
+
+export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
+  label,
+  status = 'success',
+  children,
+  toolCallId: _toolCallId,
+  labelSuffix,
+  className: _className,
+}) => (
+  <div
+    className={`qwen-message message-item ${_className || ''} relative pl-[30px] py-2 select-text toolcall-container toolcall-status-${status}`}
+  >
+    <div className="EditToolCall toolcall-content-wrapper flex flex-col gap-1 min-w-0 max-w-full">
+      <div className="flex items-baseline gap-1.5 relative min-w-0">
+        <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
+          {label}
+        </span>
+        <span className="text-[11px] text-[var(--app-secondary-foreground)]">
+          {labelSuffix}
+        </span>
+      </div>
+      {children && (
+        <div className="text-[var(--app-secondary-foreground)]">{children}</div>
+      )}
+    </div>
+  </div>
+);
+
+/**
+ * Calculate diff summary (added/removed lines)
+ */
+const getDiffSummary = (
+  oldText: string | null | undefined,
+  newText: string | undefined,
+): string => {
+  const oldLines = oldText ? oldText.split('\n').length : 0;
+  const newLines = newText ? newText.split('\n').length : 0;
+  const diff = newLines - oldLines;
+
+  if (diff > 0) {
+    return `+${diff} lines`;
+  } else if (diff < 0) {
+    return `${diff} lines`;
+  } else {
+    return 'Modified';
+  }
+};
+
+/**
+ * Specialized component for Edit tool calls
+ * Optimized for displaying file editing operations with diffs
+ */
+export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
+  const { content, locations, toolCallId } = toolCall;
+
+  // Group content by type; memoize to avoid new array identities on every render
+  const { errors, diffs } = useMemo(() => groupContent(content), [content]);
+
+  // Failed case: show explicit failed message and render inline diffs
+  if (toolCall.status === 'failed') {
+    const firstDiff = diffs[0];
+    const path = firstDiff?.path || locations?.[0]?.path || '';
+    const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+    return (
+      <div
+        className={`qwen-message message-item relative py-2 select-text toolcall-container toolcall-status-${containerStatus}`}
+      >
+        <div className="toolcall-edit-content flex flex-col gap-1 min-w-0 max-w-full">
+          <div className="flex items-center justify-between min-w-0">
+            <div className="flex items-baseline gap-2 min-w-0">
+              <span className="text-[13px] leading-none font-bold text-[var(--app-primary-foreground)]">
+                Edit
+              </span>
+              {path && (
+                <FileLink
+                  path={path}
+                  showFullPath={false}
+                  className="font-mono text-[var(--app-secondary-foreground)] hover:underline"
+                />
+              )}
+            </div>
+          </div>
+          {/* Failed state text (replace summary) */}
+          <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 flex-row items-start w-full gap-1 flex items-center">
+            <span className="flex-shrink-0 w-full">edit failed</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Error case: show error
+  if (errors.length > 0) {
+    const path = diffs[0]?.path || locations?.[0]?.path || '';
+    return (
+      <ToolCallContainer
+        label={'Edit'}
+        status="error"
+        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono hover:underline"
+            />
+          ) : undefined
+        }
+      >
+        {errors.join('\n')}
+      </ToolCallContainer>
+    );
+  }
+
+  // Success case with diff: show minimal inline preview; clicking the title opens VS Code diff
+  if (diffs.length > 0) {
+    const firstDiff = diffs[0];
+    const path = firstDiff.path || (locations && locations[0]?.path) || '';
+    const summary = getDiffSummary(firstDiff.oldText, firstDiff.newText);
+    const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+    return (
+      <div
+        className={`qwen-message message-item relative py-2 select-text toolcall-container toolcall-status-${containerStatus}`}
+      >
+        <div className="toolcall-edit-content flex flex-col gap-1 min-w-0 max-w-full">
+          <div className="flex items-center justify-between min-w-0">
+            <div className="flex items-baseline gap-1.5 min-w-0">
+              {/* Align the inline Edit label styling with shared toolcall label: larger + bold */}
+              <span className="text-[13px] leading-none font-bold text-[var(--app-primary-foreground)]">
+                Edit
+              </span>
+              {path && (
+                <FileLink
+                  path={path}
+                  showFullPath={false}
+                  className="font-mono text-[var(--app-secondary-foreground)] hover:underline"
+                />
+              )}
+            </div>
+          </div>
+          <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 flex-row items-start w-full gap-1 flex items-baseline">
+            <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
+            <span className="flex-shrink-0 w-full">{summary}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Success case without diff: show file in compact format
+  if (locations && locations.length > 0) {
+    const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+    return (
+      <ToolCallContainer
+        label={`Edit`}
+        status={containerStatus}
+        toolCallId={toolCallId}
+        labelSuffix={
+          <FileLink
+            path={locations[0].path}
+            showFullPath={false}
+            className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+          />
+        }
+      >
+        <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 flex-row items-start w-full gap-1 flex items-center">
+          <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
+          <FileLink
+            path={locations[0].path}
+            line={locations[0].line}
+            showFullPath={true}
+          />
+        </div>
+      </ToolCallContainer>
+    );
+  }
+
+  // No output, don't show anything
+  return null;
+};

packages/chrome-extension/src/sidepanel/components/messages/toolcalls/Execute/Execute.css

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Execute tool call styles - Enhanced styling with semantic class names
+ */
+
+/* Root container for execute tool call output */
+.execute-toolcall-card {
+  border: 0.5px solid var(--app-input-border);
+  border-radius: 5px;
+  background: var(--app-tool-background);
+  margin: 8px 0;
+  max-width: 100%;
+  font-size: 1em;
+  align-items: start;
+}
+
+/* Content wrapper inside the card */
+.execute-toolcall-content {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 4px;
+}
+
+/* Individual input/output row */
+.execute-toolcall-row {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  border-top: 0.5px solid var(--app-input-border);
+  padding: 4px;
+}
+
+/* First row has no top border */
+.execute-toolcall-row:first-child {
+  border-top: none;
+}
+
+/* Row label (IN/OUT/ERROR) */
+.execute-toolcall-label {
+  grid-column: 1;
+  color: var(--app-secondary-foreground);
+  text-align: left;
+  opacity: 50%;
+  padding: 4px 8px 4px 4px;
+  font-family: var(--app-monospace-font-family);
+  font-size: 0.85em;
+}
+
+/* Row content area */
+.execute-toolcall-row-content {
+  grid-column: 2;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  padding: 4px;
+}
+
+/* Truncated content styling */
+.execute-toolcall-row-content:not(.execute-toolcall-full) {
+  max-height: 60px;
+  mask-image: linear-gradient(
+    to bottom,
+    var(--app-primary-background) 40px,
+    transparent 60px
+  );
+  overflow: hidden;
+}
+
+/* Preformatted content */
+.execute-toolcall-pre {
+  margin-block: 0;
+  overflow: hidden;
+  font-family: var(--app-monospace-font-family);
+  font-size: 0.85em;
+}
+
+/* Code content */
+.execute-toolcall-code {
+  margin: 0;
+  padding: 0;
+  font-family: var(--app-monospace-font-family);
+  font-size: 0.85em;
+}
+
+/* Output content with subtle styling */
+.execute-toolcall-output-subtle {
+  background-color: var(--app-code-background);
+  white-space: pre;
+  overflow-x: auto;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Error content styling */
+.execute-toolcall-error-content {
+  color: #c74e39;
+}

packages/chrome-extension/src/sidepanel/components/messages/toolcalls/Execute/Execute.tsx

@@ -0,0 +1,173 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Execute tool call component - specialized for command execution operations
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import { safeTitle, groupContent } from '../shared/utils.js';
+import './Execute.css';
+import type { ToolCallContainerProps } from '../shared/LayoutComponents.js';
+
+export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
+  label,
+  status = 'success',
+  children,
+  toolCallId: _toolCallId,
+  labelSuffix,
+  className: _className,
+}) => (
+  <div
+    className={`ExecuteToolCall qwen-message message-item ${_className || ''} relative pl-[30px] py-2 select-text toolcall-container toolcall-status-${status}`}
+  >
+    <div className="toolcall-content-wrapper flex flex-col gap-0 min-w-0 max-w-full">
+      <div className="flex items-baseline gap-1.5 relative min-w-0">
+        <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
+          {label}
+        </span>
+        <span className="text-[11px] text-[var(--app-secondary-foreground)]">
+          {labelSuffix}
+        </span>
+      </div>
+      {children && (
+        <div className="text-[var(--app-secondary-foreground)]">{children}</div>
+      )}
+    </div>
+  </div>
+);
+
+/**
+ * Specialized component for Execute tool calls
+ * Shows: Execute bullet + description + IN/OUT card
+ */
+export const ExecuteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
+  const { title, content, rawInput, toolCallId } = toolCall;
+  const commandText = safeTitle(
+    (rawInput as Record<string, unknown>)?.description || title,
+  );
+
+  // Group content by type
+  const { textOutputs, errors } = groupContent(content);
+
+  // Extract command from rawInput if available
+  let inputCommand = commandText;
+  if (rawInput && typeof rawInput === 'object') {
+    const inputObj = rawInput as Record<string, unknown>;
+    inputCommand = (inputObj.command as string | undefined) || commandText;
+  } else if (typeof rawInput === 'string') {
+    inputCommand = rawInput;
+  }
+
+  // Map tool status to container status for proper bullet coloring
+  const containerStatus:
+    | 'success'
+    | 'error'
+    | 'warning'
+    | 'loading'
+    | 'default' =
+    errors.length > 0 || toolCall.status === 'failed'
+      ? 'error'
+      : toolCall.status === 'in_progress' || toolCall.status === 'pending'
+        ? 'loading'
+        : 'success';
+
+  // Error case
+  if (errors.length > 0) {
+    return (
+      <ToolCallContainer
+        label="Execute"
+        status={containerStatus}
+        toolCallId={toolCallId}
+        className="execute-default-toolcall"
+      >
+        {/* Branch connector summary */}
+        <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
+          <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
+          <span className="flex-shrink-0 w-full">{commandText}</span>
+        </div>
+        {/* Error card - semantic DOM + Tailwind styles */}
+        <div className="execute-toolcall-card">
+          <div className="execute-toolcall-content">
+            {/* IN row */}
+            <div className="execute-toolcall-row">
+              <div className="execute-toolcall-label">IN</div>
+              <div className="execute-toolcall-row-content">
+                <pre className="execute-toolcall-pre">{inputCommand}</pre>
+              </div>
+            </div>
+
+            {/* ERROR row */}
+            <div className="execute-toolcall-row">
+              <div className="execute-toolcall-label">Error</div>
+              <div className="execute-toolcall-row-content">
+                <pre className="execute-toolcall-pre execute-toolcall-error-content">
+                  {errors.join('\n')}
+                </pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ToolCallContainer>
+    );
+  }
+
+  // Success with output
+  if (textOutputs.length > 0) {
+    const output = textOutputs.join('\n');
+    const truncatedOutput =
+      output.length > 500 ? output.substring(0, 500) + '...' : output;
+
+    return (
+      <ToolCallContainer
+        label="Execute"
+        status={containerStatus}
+        toolCallId={toolCallId}
+      >
+        {/* Branch connector summary */}
+        <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
+          <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
+          <span className="flex-shrink-0 w-full">{commandText}</span>
+        </div>
+        {/* Output card - semantic DOM + Tailwind styles */}
+        <div className="execute-toolcall-card">
+          <div className="execute-toolcall-content">
+            {/* IN row */}
+            <div className="execute-toolcall-row">
+              <div className="execute-toolcall-label">IN</div>
+              <div className="execute-toolcall-row-content">
+                <pre className="execute-toolcall-pre">{inputCommand}</pre>
+              </div>
+            </div>
+
+            {/* OUT row */}
+            <div className="execute-toolcall-row">
+              <div className="execute-toolcall-label">OUT</div>
+              <div className="execute-toolcall-row-content">
+                <div className="execute-toolcall-output-subtle">
+                  <pre className="execute-toolcall-pre">{truncatedOutput}</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ToolCallContainer>
+    );
+  }
+
+  // Success without output: show command with branch connector
+  return (
+    <ToolCallContainer
+      label="Execute"
+      status={containerStatus}
+      toolCallId={toolCallId}
+    >
+      <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
+        <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
+        <span className="flex-shrink-0 w-full">{commandText}</span>
+      </div>
+    </ToolCallContainer>
+  );
+};

packages/chrome-extension/src/sidepanel/components/messages/toolcalls/GenericToolCall.tsx

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Generic tool call component - handles all tool call types as fallback
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from './shared/types.js';
+import {
+  ToolCallContainer,
+  ToolCallCard,
+  ToolCallRow,
+  LocationsList,
+} from './shared/LayoutComponents.js';
+import { safeTitle, groupContent } from './shared/utils.js';
+
+/**
+ * Generic tool call component that can display any tool call type
+ * Used as fallback for unknown tool call kinds
+ * Minimal display: show description and outcome
+ */
+export const GenericToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
+  const { kind, title, content, locations, toolCallId } = toolCall;
+  const operationText = safeTitle(title);
+
+  // Group content by type
+  const { textOutputs, errors } = groupContent(content);
+
+  // Error case: show operation + error in card layout
+  if (errors.length > 0) {
+    return (
+      <ToolCallCard icon="🔧">
+        <ToolCallRow label={kind}>
+          <div>{operationText}</div>
+        </ToolCallRow>
+        <ToolCallRow label="Error">
+          <div className="text-[#c74e39] font-medium">{errors.join('\n')}</div>
+        </ToolCallRow>
+      </ToolCallCard>
+    );
+  }
+
+  // Success with output: use card for long output, compact for short
+  if (textOutputs.length > 0) {
+    const output = textOutputs.join('\n');
+    const isLong = output.length > 150;
+
+    if (isLong) {
+      const truncatedOutput =
+        output.length > 300 ? output.substring(0, 300) + '...' : output;
+
+      return (
+        <ToolCallCard icon="🔧">
+          <ToolCallRow label={kind}>
+            <div>{operationText}</div>
+          </ToolCallRow>
+          <ToolCallRow label="Output">
+            <div className="whitespace-pre-wrap font-mono text-[13px] opacity-90">
+              {truncatedOutput}
+            </div>
+          </ToolCallRow>
+        </ToolCallCard>
+      );
+    }
+
+    // Short output - compact format
+    const statusFlag: 'success' | 'error' | 'warning' | 'loading' | 'default' =
+      toolCall.status === 'in_progress' || toolCall.status === 'pending'
+        ? 'loading'
+        : 'success';
+    return (
+      <ToolCallContainer
+        label={kind}
+        status={statusFlag}
+        toolCallId={toolCallId}
+      >
+        {operationText || output}
+      </ToolCallContainer>
+    );
+  }
+
+  // Success with files: show operation + file list in compact format
+  if (locations && locations.length > 0) {
+    const statusFlag: 'success' | 'error' | 'warning' | 'loading' | 'default' =
+      toolCall.status === 'in_progress' || toolCall.status === 'pending'
+        ? 'loading'
+        : 'success';
+    return (
+      <ToolCallContainer
+        label={kind}
+        status={statusFlag}
+        toolCallId={toolCallId}
+      >
+        <LocationsList locations={locations} />
+      </ToolCallContainer>
+    );
+  }
+
+  // No output - show just the operation
+  if (operationText) {
+    const statusFlag: 'success' | 'error' | 'warning' | 'loading' | 'default' =
+      toolCall.status === 'in_progress' || toolCall.status === 'pending'
+        ? 'loading'
+        : 'success';
+    return (
+      <ToolCallContainer
+        label={kind}
+        status={statusFlag}
+        toolCallId={toolCallId}
+      >
+        {operationText}
+      </ToolCallContainer>
+    );
+  }
+
+  return null;
+};

packages/chrome-extension/src/sidepanel/components/messages/toolcalls/Read/ReadToolCall.tsx

@@ -0,0 +1,177 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Read tool call component - specialized for file reading operations
+ */
+
+import type React from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import {
+  groupContent,
+  mapToolStatusToContainerStatus,
+} from '../shared/utils.js';
+import { FileLink } from '../../../layout/FileLink.js';
+import { useVSCode } from '../../../../hooks/useVSCode.js';
+import { handleOpenDiff } from '../../../../utils/diffUtils.js';
+import type { ToolCallContainerProps } from '../shared/LayoutComponents.js';
+
+export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
+  label,
+  status = 'success',
+  children,
+  toolCallId: _toolCallId,
+  labelSuffix,
+  className: _className,
+}) => (
+  <div
+    className={`ReadToolCall qwen-message message-item ${_className || ''} relative pl-[30px] py-2 select-text toolcall-container toolcall-status-${status}`}
+  >
+    <div className="toolcall-content-wrapper flex flex-col gap-1 min-w-0 max-w-full">
+      <div className="flex items-baseline gap-1.5 relative min-w-0">
+        <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
+          {label}
+        </span>
+        <span className="text-[11px] text-[var(--app-secondary-foreground)]">
+          {labelSuffix}
+        </span>
+      </div>
+      {children && (
+        <div className="text-[var(--app-secondary-foreground)] py-1">
+          {children}
+        </div>
+      )}
+    </div>
+  </div>
+);
+
+/**
+ * Specialized component for Read tool calls
+ * Optimized for displaying file reading operations
+ * Shows: Read filename (no content preview)
+ */
+export const ReadToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
+  const { content, locations, toolCallId } = toolCall;
+  const vscode = useVSCode();
+
+  // Group content by type; memoize to avoid new array identities on every render
+  const { errors, diffs } = useMemo(() => groupContent(content), [content]);
+
+  // Post a message to the extension host to open a VS Code diff tab
+  const handleOpenDiffInternal = useCallback(
+    (
+      path: string | undefined,
+      oldText: string | null | undefined,
+      newText: string | undefined,
+    ) => {
+      handleOpenDiff(vscode, path, oldText, newText);
+    },
+    [vscode],
+  );
+
+  // Auto-open diff when a read call returns diff content.
+  // Only trigger once per toolCallId so we don't spam as in-progress updates stream in.
+  useEffect(() => {
+    if (diffs.length > 0) {
+      const firstDiff = diffs[0];
+      const path = firstDiff.path || (locations && locations[0]?.path) || '';
+
+      if (
+        path &&
+        firstDiff.oldText !== undefined &&
+        firstDiff.newText !== undefined
+      ) {
+        const timer = setTimeout(() => {
+          handleOpenDiffInternal(path, firstDiff.oldText, firstDiff.newText);
+        }, 100);
+        return () => timer && clearTimeout(timer);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toolCallId]);
+
+  // Compute container status based on toolCall.status (pending/in_progress -> loading)
+  const containerStatus:
+    | 'success'
+    | 'error'
+    | 'warning'
+    | 'loading'
+    | 'default' = mapToolStatusToContainerStatus(toolCall.status);
+
+  // Error case: show error
+  if (errors.length > 0) {
+    const path = locations?.[0]?.path || '';
+    return (
+      <ToolCallContainer
+        label={'Read'}
+        className="read-tool-call-error"
+        status="error"
+        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+            />
+          ) : undefined
+        }
+      >
+        {errors.join('\n')}
+      </ToolCallContainer>
+    );
+  }
+
+  // Success case with diff: keep UI compact; VS Code diff is auto-opened above
+  if (diffs.length > 0) {
+    const path = diffs[0]?.path || locations?.[0]?.path || '';
+    return (
+      <ToolCallContainer
+        label={'Read'}
+        className="read-tool-call-success"
+        status={containerStatus}
+        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+            />
+          ) : undefined
+        }
+      >
+        {null}
+      </ToolCallContainer>
+    );
+  }
+
+  // Success case: show which file was read with filename in label
+  if (locations && locations.length > 0) {
+    const path = locations[0].path;
+    return (
+      <ToolCallContainer
+        label={'Read'}
+        className="read-tool-call-success"
+        status={containerStatus}
+        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+            />
+          ) : undefined
+        }
+      >
+        {null}
+      </ToolCallContainer>
+    );
+  }
+
+  // No file info, don't show
+  return null;
+};