feat(vscode): Enhanced Chat Input with DevIn Language Support

mpp-vscode/webview/src/App.tsx

@@ -9,6 +9,8 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Timeline } from './components/Timeline';
 import { ChatInput } from './components/ChatInput';
 import { ModelConfig } from './components/ModelSelector';
+import { SelectedFile } from './components/FileChip';
+import { CompletionItem } from './components/CompletionPopup';
 import { useVSCode, ExtensionMessage } from './hooks/useVSCode';
 import type { AgentState, ToolCallInfo, TerminalOutput, ToolCallTimelineItem } from './types/timeline';
 import './App.css';
@@ -18,6 +20,12 @@ interface ConfigState {
   currentConfigName: string | null;
 }
 
+interface CompletionResult {
+  newText: string;
+  newCursorPosition: number;
+  shouldTriggerNextCompletion: boolean;
+}
+
 const App: React.FC = () => {
   // Agent state - mirrors ComposeRenderer's state
   const [agentState, setAgentState] = useState<AgentState>({
@@ -35,6 +43,16 @@ const App: React.FC = () => {
     currentConfigName: null
   });
 
+  // Token usage state
+  const [totalTokens, setTotalTokens] = useState<number | null>(null);
+
+  // Active file state (for auto-add current file feature)
+  const [activeFile, setActiveFile] = useState<SelectedFile | null>(null);
+
+  // Completion state - from mpp-core
+  const [completionItems, setCompletionItems] = useState<CompletionItem[]>([]);
+  const [completionResult, setCompletionResult] = useState<CompletionResult | null>(null);
+
   const { postMessage, onMessage, isVSCode } = useVSCode();
 
   // Handle messages from extension
@@ -198,6 +216,43 @@ const App: React.FC = () => {
           });
         }
         break;
+
+      // Token usage update
+      case 'tokenUpdate':
+        if (msg.data?.totalTokens != null) {
+          setTotalTokens(msg.data.totalTokens as number);
+        }
+        break;
+
+      // Active file changed (for auto-add current file)
+      case 'activeFileChanged':
+        if (msg.data) {
+          setActiveFile({
+            path: msg.data.path as string,
+            name: msg.data.name as string,
+            relativePath: msg.data.path as string,
+            isDirectory: msg.data.isDirectory as boolean || false
+          });
+        }
+        break;
+
+      // Completion results from mpp-core
+      case 'completionsResult':
+        if (msg.data?.items) {
+          setCompletionItems(msg.data.items as CompletionItem[]);
+        }
+        break;
+
+      // Completion applied result
+      case 'completionApplied':
+        if (msg.data) {
+          setCompletionResult({
+            newText: msg.data.newText as string,
+            newCursorPosition: msg.data.newCursorPosition as number,
+            shouldTriggerNextCompletion: msg.data.shouldTriggerNextCompletion as boolean
+          });
+        }
+        break;
     }
   }, []);
 
@@ -206,21 +261,35 @@ const App: React.FC = () => {
     return onMessage(handleExtensionMessage);
   }, [onMessage, handleExtensionMessage]);
 
+  // Request config on mount
+  useEffect(() => {
+    postMessage({ type: 'requestConfig' });
+  }, [postMessage]);
+
   // Send message to extension
-  const handleSend = useCallback((content: string) => {
+  const handleSend = useCallback((content: string, files?: SelectedFile[]) => {
+    // Build message with file context (DevIns format)
+    let fullContent = content;
+    if (files && files.length > 0) {
+      const fileCommands = files.map(f =>
+        f.isDirectory ? `/dir:${f.relativePath}` : `/file:${f.relativePath}`
+      ).join('\n');
+      fullContent = `${fileCommands}\n\n${content}`;
+    }
+
     // 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 }
+        message: { role: 'user', content: fullContent }
       }]
     }));
 
     // Send to extension
-    postMessage({ type: 'sendMessage', content });
+    postMessage({ type: 'sendMessage', content: fullContent });
   }, [postMessage]);
 
   // Clear history
@@ -248,6 +317,48 @@ const App: React.FC = () => {
     postMessage({ type: 'selectConfig', data: { configName: config.name } });
   }, [postMessage]);
 
+  // Handle prompt optimization
+  const handlePromptOptimize = useCallback(async (prompt: string): Promise<string> => {
+    return new Promise((resolve) => {
+      // Send optimization request to extension
+      postMessage({ type: 'action', action: 'optimizePrompt', data: { prompt } });
+
+      // Listen for response
+      const handler = (event: MessageEvent) => {
+        const msg = event.data;
+        if (msg.type === 'promptOptimized' && msg.data?.optimizedPrompt) {
+          window.removeEventListener('message', handler);
+          resolve(msg.data.optimizedPrompt as string);
+        } else if (msg.type === 'promptOptimizeFailed') {
+          window.removeEventListener('message', handler);
+          resolve(prompt); // Return original on failure
+        }
+      };
+      window.addEventListener('message', handler);
+
+      // Timeout after 30 seconds
+      setTimeout(() => {
+        window.removeEventListener('message', handler);
+        resolve(prompt);
+      }, 30000);
+    });
+  }, [postMessage]);
+
+  // Handle MCP config click
+  const handleMcpConfigClick = useCallback(() => {
+    postMessage({ type: 'action', action: 'openMcpConfig' });
+  }, [postMessage]);
+
+  // Handle get completions from mpp-core
+  const handleGetCompletions = useCallback((text: string, cursorPosition: number) => {
+    postMessage({ type: 'getCompletions', data: { text, cursorPosition } });
+  }, [postMessage]);
+
+  // Handle apply completion from mpp-core
+  const handleApplyCompletion = useCallback((text: string, cursorPosition: number, completionIndex: number) => {
+    postMessage({ type: 'applyCompletion', data: { text, cursorPosition, completionIndex } });
+  }, [postMessage]);
+
   // Check if we need to show config prompt
   const needsConfig = agentState.timeline.length === 0 &&
     agentState.currentStreamingContent.includes('No configuration found') ||
@@ -310,11 +421,19 @@ const App: React.FC = () => {
         onStop={handleStop}
         onConfigSelect={handleConfigSelect}
         onConfigureClick={handleOpenConfig}
+        onMcpConfigClick={handleMcpConfigClick}
+        onPromptOptimize={handlePromptOptimize}
+        onGetCompletions={handleGetCompletions}
+        onApplyCompletion={handleApplyCompletion}
+        completionItems={completionItems}
+        completionResult={completionResult}
         disabled={agentState.isProcessing}
         isExecuting={agentState.isProcessing}
         placeholder="Ask AutoDev anything... (use / for commands, @ for agents)"
         availableConfigs={configState.availableConfigs}
         currentConfigName={configState.currentConfigName}
+        totalTokens={totalTokens}
+        activeFile={activeFile}
       />
     </div>
   );

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

@@ -1,16 +1,19 @@
 .chat-input-container {
-  padding: 8px 12px 12px;
-  border-top: 1px solid var(--panel-border);
+  position: relative;
+  border: 1px solid var(--panel-border);
+  border-radius: 8px;
   background: var(--background);
+  margin: 8px;
 }
 
-/* Toolbar */
+/* Bottom Toolbar */
 .input-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
-  padding: 0 4px;
+  padding: 6px 8px;
+  border-top: 1px solid var(--panel-border);
+  background: var(--selection-background);
 }
 
 .toolbar-left {
@@ -56,6 +59,13 @@
   display: flex;
   gap: 8px;
   align-items: flex-end;
+  padding: 8px;
+}
+
+.input-with-completion {
+  position: relative;
+  flex: 1;
+  min-width: 0;
 }
 
 .chat-textarea {
@@ -149,17 +159,47 @@
 }
 
 .input-hint {
-  margin-top: 6px;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--foreground);
-  opacity: 0.5;
+  opacity: 0.4;
+  white-space: nowrap;
 }
 
 .input-hint kbd {
-  background: var(--selection-background);
-  padding: 2px 5px;
-  border-radius: 3px;
+  background: var(--background);
+  padding: 1px 4px;
+  border-radius: 2px;
   font-family: inherit;
+  font-size: 9px;
+}
+
+/* Token indicator */
+.token-indicator {
+  font-size: 11px;
+  color: var(--foreground);
+  opacity: 0.6;
+  padding: 2px 6px;
+  background: var(--background);
+  border-radius: 4px;
+}
+
+/* Enhance button */
+.enhance-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.enhance-button.enhancing {
+  color: var(--vscode-textLink-foreground, #3794ff);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.enhance-button .enhancing-text {
   font-size: 10px;
 }
 
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}