fix(mpp-vscode): fix VSCode API acquisition for webview communication

phodal · phodal · commit 277e397d3095 · 2025-12-03T10:25:44.000+08:00
- Acquire VSCode API in HTML before React loads to avoid duplicate acquisition error - Store API on window.vscodeApi for React to use - Remove debug logging from production code All 63 tests passing. Refs #31
diff --git a/mpp-vscode/src/providers/chat-view.ts b/mpp-vscode/src/providers/chat-view.ts
@@ -52,6 +52,7 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
 
     // Handle messages from webview
     webviewView.webview.onDidReceiveMessage(async (message) => {
+      this.log(`Received message from webview: ${JSON.stringify(message)}`);
       switch (message.type) {
         case 'sendMessage':
           await this.handleUserMessage(message.content);
@@ -244,10 +245,14 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
   /**
    * Create renderer that forwards events to webview
    * Mirrors TuiRenderer from mpp-ui
+   * Must implement JsCodingAgentRenderer interface including __doNotUseOrImplementIt
    */
   private createRenderer(): any {
     const self = this;
     return {
+      // Required by Kotlin JS export interface
+      __doNotUseOrImplementIt: {},
+
       renderIterationHeader: (current: number, max: number) => {
         self.postMessage({ type: 'iterationUpdate', data: { current, max } });
       },
@@ -294,6 +299,7 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
         self.postMessage({ type: 'responseChunk', content: `\n💡 ${advice}\n` });
       },
       renderUserConfirmationRequest: () => {},
+      addLiveTerminal: () => {},
       forceStop: () => {
         self.postMessage({ type: 'taskComplete', data: { success: false, message: 'Stopped' } });
       }
@@ -310,7 +316,7 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
       return;
     }
 
-    const trimmedContent = content.trim();
+    const trimmedContent = content?.trim();
     if (!trimmedContent) return;
 
     // Add user message to timeline
@@ -329,19 +335,14 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
     this.isExecuting = true;
 
     try {
-      // Initialize agent if needed
       const agent = this.initializeCodingAgent();
       const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || process.cwd();
-
-      // 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 && result.message) {
         this.messages.push({ role: 'assistant', content: result.message });
       }
-
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       this.log(`Error in chat: ${message}`);
@@ -491,14 +492,23 @@ configs:
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}';">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src ${webview.cspSource} 'unsafe-inline';">
   <link rel="stylesheet" href="${styleUri}">
   <title>AutoDev Chat</title>
+  <script>
+    // Acquire VSCode API ONCE and store on window BEFORE React loads
+    (function() {
+      if (typeof acquireVsCodeApi === 'function') {
+        window.vscodeApi = acquireVsCodeApi();
+        console.log('[AutoDev] VSCode API acquired and stored on window.vscodeApi');
+      }
+    })();
+  </script>
 </head>
 <body>
   <div id="root"></div>
-  <script nonce="${nonce}" src="${scriptUri}"></script>
-  <script nonce="${nonce}">
+  <script src="${scriptUri}"></script>
+  <script>
     // Fallback if React bundle not loaded
     if (!document.getElementById('root').hasChildNodes()) {
       document.getElementById('root').innerHTML = \`
diff --git a/mpp-vscode/webview/src/App.css b/mpp-vscode/webview/src/App.css
@@ -110,3 +110,26 @@
   background: var(--vscode-button-hoverBackground);
 }
 
+/* Loading indicator */
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 13px;
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--vscode-progressBar-background, #0e639c);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
diff --git a/mpp-vscode/webview/src/App.tsx b/mpp-vscode/webview/src/App.tsx
@@ -215,6 +215,18 @@ const App: React.FC = () => {
 
   // Send message to extension
   const handleSend = useCallback((content: string) => {
+    // Immediately show user message in timeline for feedback
+    setAgentState(prev => ({
+      ...prev,
+      isProcessing: true,
+      timeline: [...prev.timeline, {
+        type: 'message',
+        timestamp: Date.now(),
+        message: { role: 'user', content }
+      }]
+    }));
+
+    // Send to extension
     postMessage({ type: 'sendMessage', content });
   }, [postMessage]);
 
@@ -281,6 +293,14 @@ const App: React.FC = () => {
           onAction={handleAction}
         />
 
+        {/* Show loading indicator when processing */}
+        {agentState.isProcessing && !agentState.currentStreamingContent && (
+          <div className="loading-indicator">
+            <div className="loading-spinner"></div>
+            <span>Processing...</span>
+          </div>
+        )}
+
         {/* Show Open Config button when config is needed */}
         {needsConfig && (
           <div className="config-prompt">
diff --git a/mpp-vscode/webview/src/hooks/useVSCode.ts b/mpp-vscode/webview/src/hooks/useVSCode.ts
@@ -7,8 +7,13 @@ interface VSCodeAPI {
   setState: (state: unknown) => void;
 }
 
-// Declare the global acquireVsCodeApi function
-declare function acquireVsCodeApi(): VSCodeAPI;
+// Declare the global VSCode API on window (acquired in HTML before React loads)
+declare global {
+  interface Window {
+    vscodeApi?: VSCodeAPI;
+    acquireVsCodeApi?: () => VSCodeAPI;
+  }
+}
 
 // Message types from extension
 // Mirrors mpp-ui's ComposeRenderer events
@@ -49,13 +54,23 @@ let vscodeApi: VSCodeAPI | null = null;
 
 function getVSCodeAPI(): VSCodeAPI | null {
   if (vscodeApi) return vscodeApi;
-  
-  try {
-    vscodeApi = acquireVsCodeApi();
+
+  // First, check if API was already acquired and stored on window (by HTML script)
+  if (window.vscodeApi) {
+    vscodeApi = window.vscodeApi;
     return vscodeApi;
+  }
+
+  // Fallback: try to acquire it ourselves (only works if not already acquired)
+  try {
+    const acquireFn = window.acquireVsCodeApi;
+    if (typeof acquireFn === 'function') {
+      vscodeApi = acquireFn();
+      return vscodeApi;
+    }
+    return null;
   } catch {
     // Running outside VSCode (e.g., in browser for development)
-    console.warn('VSCode API not available, running in standalone mode');
     return null;
   }
 }
@@ -69,8 +84,6 @@ export function useVSCode() {
   const postMessage = useCallback((message: WebviewMessage) => {
     if (api) {
       api.postMessage(message);
-    } else {
-      console.log('Would send to VSCode:', message);
     }
   }, [api]);
 
