feat(vscode): implement plan functionality for mpp-vscode

- Add observePlanState method to JsCodingAgent for observing PlanStateService state changes
- Extend JsPlanSummaryData with JsTaskSummary and JsStepSummary for complete task/step info
- Add plan state observer in ChatViewProvider to sync plan updates to webview
- Add planUpdate/planCleared message handling in App.tsx
- Pass currentPlan prop to ChatInput component for PlanSummaryBar display
- Add ws as external dependency in esbuild config

Author: phodal

mpp-core/src/jsMain/kotlin/cc/unitmesh/agent/CodingAgentExports.kt

@@ -4,6 +4,7 @@ import cc.unitmesh.agent.config.JsToolConfigFile
 import cc.unitmesh.agent.render.DefaultCodingAgentRenderer
 import cc.unitmesh.llm.JsMessage
 import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.launch
 import kotlinx.coroutines.promise
 import kotlin.js.Promise
 
@@ -182,6 +183,34 @@ class JsCodingAgent(
             JsMessage(msg.role.name.lowercase(), msg.content)
         }.toTypedArray()
     }
+
+    /**
+     * Observe plan state changes and call the callback with plan summary data.
+     * Returns a function to stop observing.
+     */
+    @JsName("observePlanState")
+    fun observePlanState(callback: (JsPlanSummaryData?) -> Unit): () -> Unit {
+        val planStateService = agent.getPlanStateService()
+        if (planStateService == null) {
+            return { }
+        }
+
+        var job: kotlinx.coroutines.Job? = null
+        job = GlobalScope.launch {
+            planStateService.currentPlan.collect { plan ->
+                if (plan != null) {
+                    val summary = cc.unitmesh.agent.plan.PlanSummaryData.from(plan)
+                    callback(JsPlanSummaryData.from(summary))
+                } else {
+                    callback(null)
+                }
+            }
+        }
+
+        return {
+            job.cancel()
+        }
+    }
 }
 
 

mpp-core/src/jsMain/kotlin/cc/unitmesh/agent/RendererExports.kt

@@ -1,9 +1,57 @@
 package cc.unitmesh.agent
 
 import cc.unitmesh.agent.plan.PlanSummaryData
+import cc.unitmesh.agent.plan.StepSummary
+import cc.unitmesh.agent.plan.TaskSummary
 import cc.unitmesh.agent.render.CodingAgentRenderer
 import kotlin.js.JsExport
 
+/**
+ * JS-friendly step summary data
+ */
+@JsExport
+data class JsStepSummary(
+    val id: String,
+    val description: String,
+    val status: String
+) {
+    companion object {
+        fun from(step: StepSummary): JsStepSummary {
+            return JsStepSummary(
+                id = step.id,
+                description = step.description,
+                status = step.status.name
+            )
+        }
+    }
+}
+
+/**
+ * JS-friendly task summary data
+ */
+@JsExport
+data class JsTaskSummary(
+    val id: String,
+    val title: String,
+    val status: String,
+    val completedSteps: Int,
+    val totalSteps: Int,
+    val steps: Array<JsStepSummary>
+) {
+    companion object {
+        fun from(task: TaskSummary): JsTaskSummary {
+            return JsTaskSummary(
+                id = task.id,
+                title = task.title,
+                status = task.status.name,
+                completedSteps = task.completedSteps,
+                totalSteps = task.totalSteps,
+                steps = task.steps.map { JsStepSummary.from(it) }.toTypedArray()
+            )
+        }
+    }
+}
+
 /**
  * JS-friendly plan summary data
  */
@@ -16,7 +64,8 @@ data class JsPlanSummaryData(
     val failedSteps: Int,
     val progressPercent: Int,
     val status: String,
-    val currentStepDescription: String?
+    val currentStepDescription: String?,
+    val tasks: Array<JsTaskSummary>
 ) {
     companion object {
         fun from(summary: PlanSummaryData): JsPlanSummaryData {
@@ -28,7 +77,8 @@ data class JsPlanSummaryData(
                 failedSteps = summary.failedSteps,
                 progressPercent = summary.progressPercent,
                 status = summary.status.name,
-                currentStepDescription = summary.currentStepDescription
+                currentStepDescription = summary.currentStepDescription,
+                tasks = summary.tasks.map { JsTaskSummary.from(it) }.toTypedArray()
             )
         }
     }

mpp-vscode/package.json

@@ -138,7 +138,7 @@
   "scripts": {
     "vscode:prepublish": "npm run build",
     "build": "npm run build:extension && npm run build:webview",
-    "build:extension": "esbuild ./src/extension.ts --bundle --outfile=dist/extension.js --external:vscode --format=cjs --platform=node",
+    "build:extension": "esbuild ./src/extension.ts --bundle --outfile=dist/extension.js --external:vscode --external:ws --format=cjs --platform=node",
     "build:webview": "cd webview && npm install && npm run build",
     "watch": "npm run build:extension -- --watch",
     "package": "vsce package",

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

@@ -30,6 +30,7 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
   private isExecuting = false;
   private messages: Array<{ role: string; content: string }> = [];
   private editorChangeDisposable: vscode.Disposable | undefined;
+  private planStateUnsubscribe: (() => void) | null = null;
 
   constructor(
     private readonly context: vscode.ExtensionContext,
@@ -329,9 +330,46 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
     );
 
     this.log(`CodingAgent initialized for workspace: ${workspacePath}`);
+
+    // Start observing plan state changes
+    this.startPlanStateObserver();
+
     return this.codingAgent;
   }
 
+  /**
+   * Start observing plan state changes from CodingAgent
+   * Mirrors IdeaAgentViewModel.startPlanStateObserver()
+   */
+  private startPlanStateObserver(): void {
+    // Cancel any existing observer
+    if (this.planStateUnsubscribe) {
+      this.planStateUnsubscribe();
+      this.planStateUnsubscribe = null;
+    }
+
+    if (!this.codingAgent) {
+      return;
+    }
+
+    try {
+      // Use the observePlanState method from JsCodingAgent
+      this.planStateUnsubscribe = this.codingAgent.observePlanState((planSummary: any) => {
+        if (planSummary) {
+          this.postMessage({
+            type: 'planUpdate',
+            data: this.convertPlanSummary(planSummary)
+          });
+        } else {
+          this.postMessage({ type: 'planCleared' });
+        }
+      });
+      this.log('Plan state observer started');
+    } catch (error) {
+      this.log(`Failed to start plan state observer: ${error}`);
+    }
+  }
+
   /**
    * Create renderer that forwards events to webview
    * Mirrors TuiRenderer from mpp-ui
@@ -392,10 +430,47 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
       addLiveTerminal: () => {},
       forceStop: () => {
         self.postMessage({ type: 'taskComplete', data: { success: false, message: 'Stopped' } });
+      },
+      // Plan summary rendering - sends plan data to webview
+      renderPlanSummary: (summary: any) => {
+        self.postMessage({
+          type: 'planUpdate',
+          data: self.convertPlanSummary(summary)
+        });
       }
     };
   }
 
+  /**
+   * Convert JsPlanSummaryData to webview-compatible format
+   */
+  private convertPlanSummary(summary: any): any {
+    if (!summary) return null;
+
+    return {
+      planId: summary.planId,
+      title: summary.title,
+      totalSteps: summary.totalSteps,
+      completedSteps: summary.completedSteps,
+      failedSteps: summary.failedSteps,
+      progressPercent: summary.progressPercent,
+      status: summary.status,
+      currentStepDescription: summary.currentStepDescription,
+      tasks: Array.from(summary.tasks || []).map((task: any) => ({
+        id: task.id,
+        title: task.title,
+        status: task.status,
+        completedSteps: task.completedSteps,
+        totalSteps: task.totalSteps,
+        steps: Array.from(task.steps || []).map((step: any) => ({
+          id: step.id,
+          description: step.description,
+          status: step.status
+        }))
+      }))
+    };
+  }
+
   /**
    * Handle user message
    * Mirrors IdeaAgentViewModel.executeTask()

mpp-vscode/webview/src/App.tsx

@@ -11,6 +11,7 @@ import { ChatInput } from './components/ChatInput';
 import { ModelConfig } from './components/ModelSelector';
 import { SelectedFile } from './components/FileChip';
 import { CompletionItem } from './components/CompletionPopup';
+import { PlanData } from './components/plan';
 import { useVSCode, ExtensionMessage } from './hooks/useVSCode';
 import type { AgentState, ToolCallInfo, TerminalOutput, ToolCallTimelineItem } from './types/timeline';
 import './App.css';
@@ -53,6 +54,9 @@ const App: React.FC = () => {
   const [completionItems, setCompletionItems] = useState<CompletionItem[]>([]);
   const [completionResult, setCompletionResult] = useState<CompletionResult | null>(null);
 
+  // Plan state - mirrors mpp-idea's IdeaPlanSummaryBar
+  const [currentPlan, setCurrentPlan] = useState<PlanData | null>(null);
+
   const { postMessage, onMessage, isVSCode } = useVSCode();
 
   // Handle messages from extension
@@ -253,6 +257,20 @@ const App: React.FC = () => {
           });
         }
         break;
+
+      // Plan update from mpp-core PlanStateService
+      case 'planUpdate':
+        if (msg.data) {
+          setCurrentPlan(msg.data as unknown as PlanData);
+        } else {
+          setCurrentPlan(null);
+        }
+        break;
+
+      // Plan cleared
+      case 'planCleared':
+        setCurrentPlan(null);
+        break;
     }
   }, []);
 
@@ -434,6 +452,7 @@ const App: React.FC = () => {
         currentConfigName={configState.currentConfigName}
         totalTokens={totalTokens}
         activeFile={activeFile}
+        currentPlan={currentPlan}
       />
     </div>
   );

mpp-vscode/webview/src/hooks/useVSCode.ts

@@ -48,6 +48,9 @@ export interface ExtensionMessage {
     // Completion events
     | 'completionsResult'
     | 'completionApplied'
+    // Plan events
+    | 'planUpdate'
+    | 'planCleared'
     // Error and control
     | 'error'
     | 'historyCleared';