Merge pull request #136 from microsoft/fix/progress-modal-phase-tracking

fix: progress modal phase tracking and UI improvements

Author: Dongbumlee

.flake8

@@ -2,4 +2,4 @@
 max-line-length = 88
 extend-ignore = E501
 exclude = .venv, frontend
-ignore = E722,E203, W503, G004, G200, F,E711
+ignore = E722,E203, W503, G004, G200, F,E711,E704

src/frontend/src/commonComponents/ProgressModal/progressModal.tsx

@@ -39,24 +39,26 @@ const ProgressModal: React.FC<ProgressModalProps> = ({
   migrationError = false,
   onNavigateHome
 }) => {
-  // Calculate progress percentage based on phases
+  // Calculate progress percentage based on step (stable step-level identifier)
   const getProgressPercentage = () => {
     if (migrationError) return 0; // Show 0% progress for errors
-    if (!apiData || !apiData.phase) return 0;
-    
-    const phases = ['Analysis', 'Design', 'YAML', 'Documentation'];
-    const currentPhaseIndex = phases.indexOf(apiData.phase);
-    
-    if (currentPhaseIndex === -1) return 0;
     if (processingCompleted && !migrationError) return 100;
-    
-    // Each phase represents 25% of the progress
-    const baseProgress = (currentPhaseIndex / phases.length) * 100;
-    
-    // Add some progress within the current phase based on time elapsed
-    const phaseProgress = Math.min(20, (currentPhaseIndex + 1) * 5);
-    
-    return Math.min(95, baseProgress + phaseProgress);
+    if (!apiData) return 0;
+
+    // Use apiData.step (stable: "analysis", "design", "yaml_conversion", "documentation")
+    // rather than apiData.phase which changes to sub-phase names like "Platform Enhancement"
+    const steps = ['analysis', 'design', 'yaml_conversion', 'documentation'];
+    const currentStepIndex = steps.indexOf((apiData.step || '').toLowerCase());
+
+    if (currentStepIndex === -1) return 0;
+
+    // Each step represents 25% of the progress
+    const baseProgress = (currentStepIndex / steps.length) * 100;
+
+    // Add some progress within the current step
+    const stepProgress = Math.min(20, (currentStepIndex + 1) * 5);
+
+    return Math.min(95, baseProgress + stepProgress);
   };
 
   const progressPercentage = getProgressPercentage();
@@ -180,12 +182,135 @@ const ProgressModal: React.FC<ProgressModalProps> = ({
                   borderRadius: '6px',
                   fontSize: '14px'
                 }}>
-                  <div style={{ fontWeight: '500', marginBottom: '4px' }}>Current Activity:</div>
-                  <div style={{ color: '#666' }}>
-                    {apiData.agents?.find(agent => agent.includes('speaking') || agent.includes('thinking')) || 
-                     `Working on ${currentPhase?.toLowerCase()} phase...`}
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
+                    <span style={{ fontWeight: '500' }}>Current Activity:</span>
+                    {(() => {
+                      // Show step-level elapsed time from step_timings
+                      const stepTimings = apiData.step_timings || {};
+                      const currentStep = (apiData.step || '').toLowerCase();
+                      const timing = stepTimings[currentStep];
+                      if (timing?.started_at) {
+                        try {
+                          const started = new Date(timing.started_at.replace(' UTC', 'Z'));
+                          const diffSec = Math.max(0, Math.floor((Date.now() - started.getTime()) / 1000));
+                          let elapsed = '';
+                          if (diffSec < 60) elapsed = `${diffSec}s`;
+                          else if (diffSec < 3600) elapsed = `${Math.floor(diffSec / 60)}m ${diffSec % 60}s`;
+                          else elapsed = `${Math.floor(diffSec / 3600)}h ${Math.floor((diffSec % 3600) / 60)}m`;
+                          return (
+                            <span style={{ fontSize: '12px', color: '#888' }}>
+                              ⏱ {elapsed}
+                            </span>
+                          );
+                        } catch { /* ignore */ }
+                      }
+                      return null;
+                    })()}
                   </div>
-                  {apiData.active_agent_count && apiData.total_agents && (
+                  {(() => {
+                    // Parse all active agents from raw telemetry strings
+                    const activeAgents = (apiData.agents || []).filter((agent: string) =>
+                      agent.startsWith('✓')
+                    );
+
+                    if (activeAgents.length === 0) {
+                      return (
+                        <div style={{ color: '#666' }}>
+                          Working on {currentPhase?.toLowerCase()} phase...
+                        </div>
+                      );
+                    }
+
+                    return activeAgents.map((raw: string, idx: number) => {
+                      // Strip prefix: "✓[🤔🔥] " → ""
+                      const cleaned = raw.replace(/^[✓✗]\[.*?\]\s*/, '');
+                      // Agent name: everything before first ":"
+                      const colonIdx = cleaned.indexOf(':');
+                      const agentName = colonIdx > 0 ? cleaned.substring(0, colonIdx).trim() : 'Agent';
+
+                      // Determine action from status keywords
+                      const actionIcons: Record<string, { icon: string; label: string }> = {
+                        'speaking':  { icon: '🗣️', label: 'Speaking' },
+                        'thinking':  { icon: '💭', label: 'Thinking' },
+                        'using_tool':{ icon: '🔧', label: 'Invoking Tool' },
+                        'analyzing': { icon: '🔍', label: 'Analyzing' },
+                        'responded': { icon: '✅', label: 'Responded' },
+                        'ready':     { icon: '⏳', label: 'Ready' },
+                      };
+                      const statusPart = colonIdx > 0 ? cleaned.substring(colonIdx + 1) : cleaned;
+                      let actionInfo = { icon: '⚡', label: 'Working' };
+                      for (const [key, info] of Object.entries(actionIcons)) {
+                        if (statusPart.toLowerCase().includes(key)) {
+                          actionInfo = info;
+                          break;
+                        }
+                      }
+
+                      // Extract tool name(s) from 🔧 segment
+                      const toolMatch = raw.match(/🔧\s*([^|]+)/);
+                      let toolName = '';
+                      if (toolMatch) {
+                        // Clean up: take tool names, strip long JSON args
+                        toolName = toolMatch[1]
+                          .trim()
+                          .replace(/\{[^}]*\}\.*/g, '')  // remove JSON snippets
+                          .replace(/\(.*?\)/g, '')        // remove parenthesized args
+                          .replace(/,\s*$/, '')
+                          .trim();
+                        if (toolName) {
+                          actionInfo = { icon: '🔧', label: 'Invoking Tool' };
+                        }
+                      }
+
+                      // Extract action count from 📊 segment
+                      const actionsMatch = raw.match(/📊\s*(\d+)\s*actions?/);
+                      const actionCount = actionsMatch ? parseInt(actionsMatch[1]) : 0;
+
+                      // Extract blocking info from 🚧 segment
+                      const blockingMatch = raw.match(/🚧\s*Blocking\s*(\d+)/);
+                      const blockingCount = blockingMatch ? parseInt(blockingMatch[1]) : 0;
+
+                      return (
+                        <div key={idx} style={{
+                          marginBottom: idx < activeAgents.length - 1 ? '10px' : 0,
+                          padding: '8px 10px',
+                          backgroundColor: 'white',
+                          borderRadius: '6px',
+                          border: '1px solid #e8e8e8',
+                        }}>
+                          {/* Agent name + action */}
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
+                            <span style={{ fontSize: '15px' }}>{actionInfo.icon}</span>
+                            <span style={{ fontWeight: '600', color: '#333' }}>{agentName}</span>
+                            <span style={{ 
+                              fontSize: '12px', 
+                              color: '#0078d4', 
+                              backgroundColor: '#e8f4fd',
+                              padding: '1px 8px',
+                              borderRadius: '10px',
+                              fontWeight: '500'
+                            }}>
+                              {actionInfo.label}
+                            </span>
+                          </div>
+                          {/* Tool + metrics row */}
+                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', fontSize: '12px', color: '#666' }}>
+                            {toolName && (
+                              <span style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
+                                <span>🔧</span> {toolName}
+                              </span>
+                            )}
+                            {actionCount > 0 && (
+                              <span style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
+                                <span>📊</span> {actionCount} action{actionCount !== 1 ? 's' : ''}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    });
+                  })()}
+                  {apiData.active_agent_count != null && apiData.total_agents != null && (
                     <div style={{ marginTop: '8px', fontSize: '12px', color: '#888' }}>
                       {apiData.active_agent_count}/{apiData.total_agents} agents active
                       {apiData.health_status?.includes('🟢') && ' 🟢'}

src/frontend/src/pages/processPage.tsx

@@ -130,13 +130,21 @@ const ProcessPage: React.FC = () => {
   const getPhaseMessage = (apiResponse: any) => {
     if (!apiResponse) return "";
 
-    const { phase, active_agent_count, total_agents, health_status, agents } = apiResponse;
+    const { step, phase, active_agent_count, total_agents, health_status, agents } = apiResponse;
+
+    // Map step identifiers to human-readable step names
+    const stepDisplayNames: Record<string, string> = {
+      'analysis': 'Analysis',
+      'design': 'Design',
+      'yaml_conversion': 'YAML',
+      'documentation': 'Documentation'
+    };
 
-    const phaseMessages = {
-      'Analysis': 'Analyzing workloads and dependencies, existing container images and configurations',
-      'Design': 'Designing target environment mappings to align with Azure AKS',
-      'YAML': 'Converting container specifications and orchestration configs to Azure format',
-      'Documentation': 'Generating migration report and deployment files'
+    const stepMessages: Record<string, string> = {
+      'analysis': 'Analyzing workloads and dependencies, existing container images and configurations',
+      'design': 'Designing target environment mappings to align with Azure AKS',
+      'yaml_conversion': 'Converting container specifications and orchestration configs to Azure format',
+      'documentation': 'Generating migration report and deployment files'
     };
 
     // Extract active agent information from agents array
@@ -156,11 +164,16 @@ const ProcessPage: React.FC = () => {
       agentActivity = ` - ${agentName} is thinking`;
     }
 
-    const baseMessage = phaseMessages[phase] || `${phase} phase in progress`;
+    const stepKey = (step || '').toLowerCase();
+    const stepName = stepDisplayNames[stepKey] || step || 'Processing';
+
+    // Use step-level description if phase matches the step, otherwise show sub-phase
+    const baseMessage = stepMessages[stepKey] || `${phase} phase in progress`;
+    // If phase differs from the step-level name, show the sub-phase as detail
+    const phaseDetail = (phase && phase !== stepDisplayNames[stepKey]) ? `${phase} - ` : '';
     const agentInfo = active_agent_count && total_agents ? ` (${active_agent_count}/${total_agents} agents active)` : '';
-    const healthIcon = health_status?.includes('🟢') ? ' 🟢' : '';
 
-    return `${phase} phase: ${baseMessage}${agentActivity}${agentInfo}`;
+    return `${stepName}: ${phaseDetail}${baseMessage}${agentActivity}${agentInfo}`;
   };
 
   // Polling function to check batch status
@@ -193,11 +206,19 @@ const ProcessPage: React.FC = () => {
         setLastUpdateTime(response.last_update_time);
 
         // Update current phase and generate step message
-        if (response.phase) {
+        if (response.step || response.phase) {
           const newPhaseMessage = getPhaseMessage(response);
 
           // Add the new message to steps ONLY if it's different from the last message
-          setCurrentPhase(response.phase);
+          const stepDisplayNames: Record<string, string> = {
+            'analysis': 'Analysis',
+            'design': 'Design',
+            'yaml_conversion': 'YAML',
+            'documentation': 'Documentation'
+          };
+          const stepKey = (response.step || '').toLowerCase();
+          const stepLabel = stepDisplayNames[stepKey] || response.step || response.phase || 'Processing';
+          setCurrentPhase(stepLabel);
           setPhaseSteps(prev => {
             // Check if the new message is different from the last message
             const lastMessage = prev[prev.length - 1];

src/processor/src/libs/base/orchestrator_base.py

@@ -5,10 +5,11 @@
 
 import json
 import logging
+import re
 from abc import abstractmethod
 from typing import Any, Callable, Generic, MutableMapping, Sequence, TypeVar
 
-from agent_framework import ChatAgent, ToolProtocol, ManagerSelectionResponse
+from agent_framework import ChatAgent, ManagerSelectionResponse, ToolProtocol
 
 from libs.agent_framework.agent_builder import AgentBuilder
 from libs.agent_framework.agent_framework_helper import ClientType
@@ -110,23 +111,26 @@ async def create_agents(
             # Only attach tools when provided. (Coordinator should typically have none.)
             if agent_info.tools is not None:
                 builder = (
-                    builder.with_tools(agent_info.tools)
+                    builder
+                    .with_tools(agent_info.tools)
                     .with_temperature(0.0)
                     .with_max_tokens(20_000)
                 )
 
             if agent_info.agent_name == "Coordinator":
                 # Routing-only: keep deterministic and small.
                 builder = (
-                    builder.with_temperature(0.0)
+                    builder
+                    .with_temperature(0.0)
                     .with_response_format(ManagerSelectionResponse)
                     .with_max_tokens(1_500)
                     .with_tools(agent_info.tools)  # for checking file existence
                 )
             elif agent_info.agent_name == "ResultGenerator":
                 # Structured JSON generation; deterministic and bounded.
                 builder = (
-                    builder.with_temperature(0.0)
+                    builder
+                    .with_temperature(0.0)
                     .with_max_tokens(12_000)
                     .with_tool_choice("none")
                 )
@@ -217,6 +221,19 @@ async def on_agent_response(self, response: AgentResponse):
                 coordinator_response = ManagerSelectionResponse.model_validate(
                     response_dict
                 )
+
+                # Extract phase name from instruction (e.g., "Phase 2 : Platform Enhancement - ..." -> "Platform Enhancement")
+                instruction = coordinator_response.instruction or ""
+                phase_match = re.match(
+                    r"Phase\s+\d+\s*:\s*([^-]+)", instruction, re.IGNORECASE
+                )
+                if phase_match:
+                    phase_name = phase_match.group(1).strip().title()
+                    await telemetry.update_phase(
+                        process_id=self.task_param.process_id,
+                        phase=phase_name,
+                    )
+
                 if not coordinator_response.finish:
                     if self.is_console_summarization_enabled():
                         try:

src/processor/src/steps/analysis/orchestration/prompt_coordinator.txt

@@ -29,12 +29,12 @@ STEP OVERVIEW:
 SECTION 2: WORKFLOW EXECUTION
 ═══════════════════════════════════════════════════════════════════
 
-PHASE 0: HARD-TERMINATION TRIAGE + FOUNDATION (Chief Architect FIRST)
-- To reduce total runtime, the Chief Architect should do triage and foundation work in a single turn.
-- Before any platform enhancement, the Chief Architect MUST run a file-based triage for hard-termination conditions.
+PHASE 0: HARD-TERMINATION TRIAGE (Chief Architect FIRST)
+- Before any platform enhancement or report writing, the Chief Architect MUST run a file-based triage for hard-termination conditions.
 - Required output from Chief Architect:
   - Either the exact "IMMEDIATE HARD TERMINATION RECOMMENDATION" block with file-level evidence
   - Or `TRIAGE COMPLETE: NO HARD-TERMINATION CONDITIONS FOUND` with a short evidence summary (files listed + files read)
+- Do NOT proceed to PHASE 1/2/3 until triage is complete.
 
 PHASE 1: FOUNDATION (Chief Architect)
 - Performs comprehensive source discovery and initial platform detection
@@ -266,15 +266,20 @@ ABSOLUTE RULE: Respond with single JSON object only.
 JSON SCHEMA:
 {
   "selected_participant": "<name from valid list>" | null,
-  "instruction": "<what to do>" | "complete" | "hard_blocked",
+  "instruction": "Phase X : Phase Title - <what to do>" | "complete" | "hard_blocked",
   "finish": true | false,
   "final_message": "<reason>" | null
 }
 
+IMPORTANT: When continuing work (finish=false), instruction MUST start with
+"Phase X : Phase Title - " where X is the current phase number and Phase Title
+matches the PHASE heading from Section 2. This is required for the UI to display
+phase progress.
+
 EXAMPLES:
 
 Continue work (select next participant):
-{"selected_participant": "Chief Architect", "instruction": "Begin foundation analysis", "finish": false, "final_message": null}
+{"selected_participant": "Chief Architect", "instruction": "Phase 0 : Triage - Begin hard-termination triage before any analysis", "finish": false, "final_message": null}
 
 Terminate with success:
 {"selected_participant": null, "instruction": "complete", "finish": true, "final_message": "All required sign-offs are PASS and analysis_result.md was verified."}

src/processor/src/steps/convert/orchestration/prompt_coordinator.txt

@@ -233,15 +233,20 @@ ABSOLUTE RULE: Respond with single JSON object only.
 JSON SCHEMA:
 {
   "selected_participant": "<name from valid list>" | null,
-  "instruction": "<what to do>" | "complete" | "hard_blocked",
+  "instruction": "Phase X : Phase Title - <what to do>" | "complete" | "hard_blocked",
   "finish": true | false,
   "final_message": "<reason>" | null
 }
 
+IMPORTANT: When continuing work (finish=false), instruction MUST start with
+"Phase X : Phase Title - " where X is the current phase number and Phase Title
+matches the PHASE heading from Section 2. This is required for the UI to display
+phase progress.
+
 EXAMPLES:
 
 Continue work (select next participant):
-{"selected_participant": "YAML Expert", "instruction": "Discover source YAMLs and begin conversion", "finish": false, "final_message": null}
+{"selected_participant": "YAML Expert", "instruction": "Phase 1 : Conversion - Discover source YAMLs and begin conversion", "finish": false, "final_message": null}
 
 Terminate with success:
 {"selected_participant": null, "instruction": "complete", "finish": true, "final_message": "Converted YAMLs and file_converting_result.md verified via blob tools and all required reviewers provided SIGN-OFF: PASS."}