feat(mpp-vscode): add ModelSelector and unified toolbar layout

- Add ModelSelector component similar to IdeaModelSelector.kt
- Update ChatInput with toolbar: ModelSelector on left, Stop/Send on right
- Add config state management in App.tsx
- Add sendConfigUpdate, stopExecution, selectConfig in chat-view.ts
- Add new message types: configUpdate, stopExecution, selectConfig

All 63 tests passing.

Refs #31

Author: phodal

mpp-vscode/src/providers/chat-view.ts

@@ -1,21 +1,22 @@
 /**
  * Chat View Provider - Webview for chat interface
  *
- * Uses mpp-core's CodingAgent for agent-based interactions
- * Mirrors mpp-ui's AgentChatInterface and IdeaAgentViewModel architecture
- *
+ * Uses mpp-core's JsCodingAgent for agent-based interactions
  * Configuration is loaded from ~/.autodev/config.yaml (same as CLI and Desktop)
+ *
+ * Architecture mirrors:
+ * - mpp-ui/src/jsMain/typescript/modes/AgentMode.ts
+ * - mpp-idea/src/main/kotlin/cc/unitmesh/devins/idea/toolwindow/IdeaAgentViewModel.kt
  */
 
 import * as vscode from 'vscode';
 import { ConfigManager, AutoDevConfigWrapper, LLMConfig } from '../services/config-manager';
 
-// Import mpp-core bridge
 // @ts-ignore - Kotlin/JS generated module
 import MppCore from '@autodev/mpp-core';
 
-const { JsKoogLLMService, JsModelConfig } = MppCore.cc.unitmesh.llm;
-const { JsCodingAgent, JsAgentTask } = MppCore.cc.unitmesh.agent;
+// Access Kotlin/JS exports - same pattern as AgentMode.ts
+const KotlinCC = MppCore.cc.unitmesh;
 
 /**
  * Chat View Provider for the sidebar webview
@@ -64,13 +65,56 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
         case 'openConfig':
           await this.openConfigFile();
           break;
+        case 'stopExecution':
+          this.stopExecution();
+          break;
+        case 'selectConfig':
+          await this.selectConfig(message.data?.configName as string);
+          break;
       }
     });
 
     // Initialize agent from config file
     this.initializeFromConfig();
   }
 
+  /**
+   * Stop current execution
+   */
+  private stopExecution(): void {
+    if (this.isExecuting) {
+      this.isExecuting = false;
+      this.postMessage({ type: 'taskComplete', data: { success: false, message: 'Stopped by user' } });
+      this.log('Execution stopped by user');
+    }
+  }
+
+  /**
+   * Select a different config
+   */
+  private async selectConfig(configName: string): Promise<void> {
+    if (!this.configWrapper || !configName) return;
+
+    const configs = this.configWrapper.getAllConfigs();
+    const selectedConfig = configs.find(c => c.name === configName);
+
+    if (selectedConfig) {
+      // Recreate LLM service with new config
+      this.llmService = this.createLLMService(selectedConfig);
+      this.codingAgent = null; // Reset agent to use new LLM service
+
+      this.log(`Switched to config: ${configName}`);
+
+      // Send updated config state to webview
+      this.sendConfigUpdate(configName);
+
+      this.postMessage({
+        type: 'responseChunk',
+        content: `✨ Switched to: \`${selectedConfig.name}\` (${selectedConfig.provider}/${selectedConfig.model})`
+      });
+    }
+  }
+
   /**
    * Send a message programmatically
    */
@@ -88,6 +132,28 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
     this.webviewView?.webview.postMessage(message);
   }
 
+  /**
+   * Send config update to webview
+   */
+  private sendConfigUpdate(currentConfigName?: string): void {
+    if (!this.configWrapper) return;
+
+    const configs = this.configWrapper.getAllConfigs();
+    const availableConfigs = configs.map(c => ({
+      name: c.name,
+      provider: c.provider,
+      model: c.model
+    }));
+
+    this.postMessage({
+      type: 'configUpdate',
+      data: {
+        availableConfigs,
+        currentConfigName: currentConfigName || this.configWrapper.getActiveConfig()?.name || null
+      }
+    });
+  }
+
   /**
    * Initialize from ~/.autodev/config.yaml
    * Mirrors IdeaAgentViewModel.loadConfiguration()
@@ -97,6 +163,9 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
       this.configWrapper = await ConfigManager.load();
       const activeConfig = this.configWrapper.getActiveConfig();
 
+      // Send config state to webview
+      this.sendConfigUpdate();
+
       if (!activeConfig || !this.configWrapper.isValid()) {
         this.log('No valid configuration found in ~/.autodev/config.yaml');
         // Show welcome message with config instructions
@@ -125,23 +194,25 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
 
   /**
    * Create LLM service from config
+   * Same pattern as AgentMode.ts
    */
   private createLLMService(config: LLMConfig): any {
-    const modelConfig = new JsModelConfig(
-      config.provider.toUpperCase(),
+    const modelConfig = new KotlinCC.llm.JsModelConfig(
+      config.provider,  // Use lowercase provider name like AgentMode.ts
       config.model,
       config.apiKey || '',
       config.temperature ?? 0.7,
       config.maxTokens ?? 8192,
       config.baseUrl || ''
     );
-    return new JsKoogLLMService(modelConfig);
+    return new KotlinCC.llm.JsKoogLLMService(modelConfig);
   }
 
   /**
    * Initialize CodingAgent (lazy initialization)
+   * Same pattern as AgentMode.ts
    */
-  private async initializeCodingAgent(): Promise<any> {
+  private initializeCodingAgent(): any {
     if (this.codingAgent) {
       return this.codingAgent;
     }
@@ -150,13 +221,14 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
       throw new Error('LLM service not configured. Please configure ~/.autodev/config.yaml');
     }
 
-    const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || '';
+    const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || process.cwd();
     const mcpServers = this.configWrapper?.getEnabledMcpServers() || {};
 
     // Create renderer that forwards events to webview
     const renderer = this.createRenderer();
 
-    this.codingAgent = new JsCodingAgent(
+    // Create CodingAgent - same constructor as AgentMode.ts
+    this.codingAgent = new KotlinCC.agent.JsCodingAgent(
       workspacePath,
       this.llmService,
       10, // maxIterations
@@ -258,15 +330,15 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
 
     try {
       // Initialize agent if needed
-      const agent = await this.initializeCodingAgent();
-      const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || '';
+      const agent = this.initializeCodingAgent();
+      const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || process.cwd();
 
-      // Create task and execute
-      const task = new JsAgentTask(trimmedContent, workspacePath);
+      // Create task and execute - same pattern as AgentMode.ts
+      const task = new KotlinCC.agent.JsAgentTask(trimmedContent, workspacePath);
       const result = await agent.executeTask(task);
 
       // Add completion message
-      if (result.message) {
+      if (result && result.message) {
         this.messages.push({ role: 'assistant', content: result.message });
       }
 

mpp-vscode/webview/src/App.tsx

@@ -8,10 +8,16 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Timeline } from './components/Timeline';
 import { ChatInput } from './components/ChatInput';
+import { ModelConfig } from './components/ModelSelector';
 import { useVSCode, ExtensionMessage } from './hooks/useVSCode';
 import type { AgentState, ToolCallInfo, TerminalOutput, ToolCallTimelineItem } from './types/timeline';
 import './App.css';
 
+interface ConfigState {
+  availableConfigs: ModelConfig[];
+  currentConfigName: string | null;
+}
+
 const App: React.FC = () => {
   // Agent state - mirrors ComposeRenderer's state
   const [agentState, setAgentState] = useState<AgentState>({
@@ -23,6 +29,12 @@ const App: React.FC = () => {
     tasks: [],
   });
 
+  // Config state - mirrors IdeaAgentViewModel's config management
+  const [configState, setConfigState] = useState<ConfigState>({
+    availableConfigs: [],
+    currentConfigName: null
+  });
+
   const { postMessage, onMessage, isVSCode } = useVSCode();
 
   // Handle messages from extension
@@ -183,6 +195,16 @@ const App: React.FC = () => {
           maxIterations: Number(msg.data?.max) || prev.maxIterations
         }));
         break;
+
+      // Config update from extension
+      case 'configUpdate':
+        if (msg.data) {
+          setConfigState({
+            availableConfigs: (msg.data.availableConfigs as ModelConfig[]) || [],
+            currentConfigName: (msg.data.currentConfigName as string) || null
+          });
+        }
+        break;
     }
   }, []);
 
@@ -211,6 +233,16 @@ const App: React.FC = () => {
     postMessage({ type: 'openConfig' });
   }, [postMessage]);
 
+  // Handle stop execution
+  const handleStop = useCallback(() => {
+    postMessage({ type: 'stopExecution' });
+  }, [postMessage]);
+
+  // Handle config selection
+  const handleConfigSelect = useCallback((config: ModelConfig) => {
+    postMessage({ type: 'selectConfig', data: { configName: config.name } });
+  }, [postMessage]);
+
   // Check if we need to show config prompt
   const needsConfig = agentState.timeline.length === 0 &&
     agentState.currentStreamingContent.includes('No configuration found') ||
@@ -262,8 +294,14 @@ const App: React.FC = () => {
       <ChatInput
         onSend={handleSend}
         onClear={handleClear}
+        onStop={handleStop}
+        onConfigSelect={handleConfigSelect}
+        onConfigureClick={handleOpenConfig}
         disabled={agentState.isProcessing}
+        isExecuting={agentState.isProcessing}
         placeholder="Ask AutoDev anything... (use / for commands, @ for agents)"
+        availableConfigs={configState.availableConfigs}
+        currentConfigName={configState.currentConfigName}
       />
     </div>
   );

mpp-vscode/webview/src/components/ChatInput.css

@@ -1,9 +1,57 @@
 .chat-input-container {
-  padding: 12px;
+  padding: 8px 12px 12px;
   border-top: 1px solid var(--panel-border);
   background: var(--background);
 }
 
+/* Toolbar */
+.input-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toolbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--foreground);
+  opacity: 0.6;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.toolbar-button:hover:not(:disabled) {
+  opacity: 1;
+  background: var(--selection-background);
+}
+
+.toolbar-button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Input Wrapper */
 .input-wrapper {
   display: flex;
   gap: 8px;
@@ -47,15 +95,22 @@
 }
 
 .action-button {
-  width: 36px;
-  height: 36px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 6px;
+  padding: 0 12px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+
+.action-button span {
+  display: inline-block;
 }
 
 .send-button {
@@ -72,6 +127,16 @@
   cursor: not-allowed;
 }
 
+.stop-button {
+  background: var(--vscode-inputValidation-errorBackground, #5a1d1d);
+  color: var(--vscode-inputValidation-errorForeground, #f48771);
+  border: 1px solid var(--vscode-inputValidation-errorBorder, #be1100);
+}
+
+.stop-button:hover {
+  background: var(--vscode-inputValidation-errorBackground, #6a2d2d);
+}
+
 .clear-button {
   background: transparent;
   color: var(--foreground);