feat: add live progress during orchestrator plan generation

New SSE event orchestrator:planProgress streams phase/detail updates
from the planner to the frontend in real-time. The panel now shows
a scrollable log of planning steps instead of just "Generating plan..."

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/web/public/app.js

@@ -238,6 +238,7 @@ const _SSE_HANDLER_MAP = [
 
   // Orchestrator loop
   [SSE_EVENTS.ORCHESTRATOR_STATE_CHANGED, '_onOrchestratorStateChanged'],
+  [SSE_EVENTS.ORCHESTRATOR_PLAN_PROGRESS, '_onOrchestratorPlanProgress'],
   [SSE_EVENTS.ORCHESTRATOR_PLAN_READY, '_onOrchestratorPlanReady'],
   [SSE_EVENTS.ORCHESTRATOR_PHASE_STARTED, '_onOrchestratorPhaseStarted'],
   [SSE_EVENTS.ORCHESTRATOR_PHASE_COMPLETED, '_onOrchestratorPhaseCompleted'],

src/web/public/constants.js

@@ -280,6 +280,7 @@ const SSE_EVENTS = {
 
   // Orchestrator Loop
   ORCHESTRATOR_STATE_CHANGED: 'orchestrator:stateChanged',
+  ORCHESTRATOR_PLAN_PROGRESS: 'orchestrator:planProgress',
   ORCHESTRATOR_PLAN_READY: 'orchestrator:planReady',
   ORCHESTRATOR_PHASE_STARTED: 'orchestrator:phaseStarted',
   ORCHESTRATOR_PHASE_COMPLETED: 'orchestrator:phaseCompleted',

src/web/public/orchestrator-panel.js

@@ -42,6 +42,17 @@ Object.assign(CodemanApp.prototype, {
   _onOrchestratorStateChanged(data) {
     if (!this.orchestratorState) this.orchestratorState = {};
     this.orchestratorState.state = data.state;
+    if (data.state === 'planning') {
+      this.orchestratorState.planProgress = [];
+      this.showOrchestratorPanel();
+    }
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorPlanProgress(data) {
+    if (!this.orchestratorState) this.orchestratorState = {};
+    if (!this.orchestratorState.planProgress) this.orchestratorState.planProgress = [];
+    this.orchestratorState.planProgress.push({ phase: data.phase, detail: data.detail, time: Date.now() });
     this.renderOrchestratorPanel();
   },
 
@@ -328,7 +339,15 @@ Object.assign(CodemanApp.prototype, {
     }
 
     if (state === 'planning') {
-      return '<div class="orch-planning"><div class="orch-spinner"></div>Generating plan...</div>';
+      const progress = this.orchestratorState?.planProgress || [];
+      let progressHtml = '';
+      if (progress.length > 0) {
+        const items = progress.map(p =>
+          `<div class="orch-progress-item"><span class="orch-progress-phase">${escapeHtml(p.phase)}</span> ${escapeHtml(p.detail)}</div>`
+        ).join('');
+        progressHtml = `<div class="orch-progress-log">${items}</div>`;
+      }
+      return `<div class="orch-planning"><div class="orch-spinner"></div>Generating plan...${progressHtml}</div>`;
     }
 
     if (!plan) return '';

src/web/public/styles.css

@@ -7629,11 +7629,32 @@ kbd {
 
 .orch-planning {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 8px;
   color: #f59e0b;
   padding: 12px;
 }
+.orch-planning > .orch-spinner {
+  display: inline-block;
+}
+.orch-progress-log {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 0.8em;
+  color: var(--text-secondary);
+  max-height: 200px;
+  overflow-y: auto;
+}
+.orch-progress-item {
+  padding: 2px 0;
+  line-height: 1.3;
+}
+.orch-progress-phase {
+  color: #f59e0b;
+  font-weight: 600;
+  margin-right: 4px;
+}
 
 .orch-spinner {
   width: 14px;