feat: add support for multiple chat instances in editor panels

package.json

@@ -77,6 +77,11 @@
       {
         "command": "claudix.openSettings",
         "title": "Claudix: Open Settings"
+      },
+      {
+        "command": "claudix.openChatInEditor",
+        "title": "Claudix: Open Chat in Editor",
+        "icon": "$(comment-discussion)"
       }
     ]
   },

src/extension.ts

@@ -50,6 +50,10 @@ export function activate(context: vscode.ExtensionContext) {
 
 		// Connect WebView messages to Claude Agent Service
 		webViewService.setMessageHandler((message) => {
+			// Update editor panel title if message includes panelTitle and instanceId
+			if (message.panelTitle && message.instanceId) {
+				webViewService.updatePanelTitle(message.instanceId, message.panelTitle);
+			}
 			claudeAgentService.fromClient(message);
 		});
 
@@ -79,6 +83,22 @@ export function activate(context: vscode.ExtensionContext) {
 			})
 		);
 
+		context.subscriptions.push(
+			vscode.commands.registerCommand('claudix.openChatInEditor', () => {
+				instantiationService.invokeFunction(accessorInner => {
+					const webViewServiceInner = accessorInner.get(IWebViewService);
+					const logServiceInner = accessorInner.get(ILogService);
+					try {
+						const instanceId = `chat-${Date.now()}`;
+						webViewServiceInner.openEditorPage('chat', 'Claudix Chat', instanceId);
+						logServiceInner.info(`[Command] Opened chat in editor: ${instanceId}`);
+					} catch (error) {
+						logServiceInner.error('[Command] Failed to open chat in editor', error);
+					}
+				});
+			})
+		);
+
 		logService.info('✓ Claude Agent Service 已连接 Transport');
 		logService.info('✓ WebView Service 已注册为 View Provider');
 		logService.info('✓ Settings 命令已注册');

src/services/webViewService.ts

@@ -49,6 +49,14 @@ export interface IWebViewService extends vscode.WebviewViewProvider {
 	 * @param instanceId 页面实例 ID，用于区分多标签（不传则默认为 page，实现单例）
 	 */
 	openEditorPage(page: string, title: string, instanceId?: string): void;
+
+	/**
+	 * Update editor panel title (editor panels only)
+	 *
+	 * @param instanceId Panel instance ID
+	 * @param title New title (will be truncated to 40 chars)
+	 */
+	updatePanelTitle(instanceId: string, title: string): void;
 }
 
 /**
@@ -109,8 +117,8 @@ export class WebViewService implements IWebViewService {
 	 * 广播消息到所有已注册的 WebView
 	 */
 	postMessage(message: any): void {
-		// 目前 ClaudeAgentService 只需要与侧边栏聊天视图通信
-		// 因此这里只向 host === 'sidebar' 且 page === 'chat' 的 WebView 发送消息
+		// 向所有 page === 'chat' 的 WebView 发送消息（包括侧边栏和编辑器面板）
+		// 每个 WebView 会根据 channelId 过滤自己需要的消息
 		if (this.webviews.size === 0) {
 			this.logService.warn('[WebViewService] 当前没有可用的 WebView 实例，消息将被丢弃');
 			return;
@@ -125,7 +133,7 @@ export class WebViewService implements IWebViewService {
 
 		for (const webview of this.webviews) {
 			const config = this.webviewConfigs.get(webview);
-			if (!config || config.host !== 'sidebar' || (config.page && config.page !== 'chat')) {
+			if (!config || config.page !== 'chat') {
 				continue;
 			}
 
@@ -187,6 +195,9 @@ export class WebViewService implements IWebViewService {
 			}
 		);
 
+		// Set panel icon (same as sidebar for consistency)
+		panel.iconPath = vscode.Uri.file(path.join(this.context.extensionPath, 'resources', 'claude-logo.svg'));
+
 		this.registerWebview(panel.webview, {
 			host: 'editor',
 			page,
@@ -207,6 +218,21 @@ export class WebViewService implements IWebViewService {
 		this.editorPanels.set(key, panel);
 	}
 
+	/**
+	 * Update editor panel title
+	 */
+	updatePanelTitle(instanceId: string, title: string): void {
+		const panel = this.editorPanels.get(instanceId);
+		if (!panel) {
+			return;
+		}
+
+		// Clean and truncate title
+		const cleaned = title.replace(/\s+/g, ' ').trim();
+		const truncated = cleaned.length > 40 ? cleaned.slice(0, 40) + '…' : cleaned;
+		panel.title = truncated || 'Claudix Chat';
+	}
+
 	/**
 	 * 为给定 WebView 配置选项、消息通道和 HTML
 	 */

src/shared/messages.ts

@@ -49,6 +49,8 @@ export interface IOMessage extends BaseMessage {
     channelId: string;
     message: SDKMessage | SDKUserMessage;  // SDK 消息类型
     done: boolean;                         // 是否为流的最后一条
+    panelTitle?: string;                   // Editor panel title (editor host only)
+    instanceId?: string;                   // Panel instance ID (editor host only)
 }
 
 /**

src/webview/src/core/Session.ts

@@ -232,7 +232,17 @@ export class Session {
     try {
       const channelId = this.claudeChannelId();
       if (!channelId) throw new Error('No active channel');
-      connection.sendInput(channelId, userMessage, false);
+
+      // Update editor panel title with user input
+      const bootstrap = window.CLAUDIX_BOOTSTRAP;
+      const isEditor = bootstrap?.host === 'editor' && bootstrap?.id;
+      connection.sendInput(
+        channelId,
+        userMessage,
+        false,
+        isEditor ? input : undefined,
+        isEditor ? bootstrap.id : undefined
+      );
     } catch (error) {
       this.busy(false);
       throw error;

src/webview/src/main.ts

@@ -15,6 +15,7 @@ declare global {
     CLAUDIX_BOOTSTRAP?: {
       host?: 'sidebar' | 'editor';
       page?: string;
+      id?: string;
     };
   }
 }

src/webview/src/styles/claude-theme.css

@@ -77,6 +77,7 @@ html {
 body {
   padding: 0 !important;
   margin: 0 !important;
+  background: var(--vscode-sideBar-background);
 }
 
 /* Light 主题调整 */

src/webview/src/transport/BaseTransport.ts

@@ -95,8 +95,8 @@ export abstract class BaseTransport {
     return queue;
   }
 
-  sendInput(channelId: string, message: any, done: boolean): void {
-    this.send({ type: "io_message", channelId, message, done });
+  sendInput(channelId: string, message: any, done: boolean, panelTitle?: string, instanceId?: string): void {
+    this.send({ type: "io_message", channelId, message, done, panelTitle, instanceId });
   }
 
   interruptClaude(channelId: string): void {