Process flow visualizer + key skills [for validation only) V4

app.py

@@ -44,12 +44,7 @@ try:
     from src.agents.intent_agent import create_intent_agent
     from src.agents.synthesis_agent import create_synthesis_agent
     from src.agents.safety_agent import create_safety_agent
-    try:
-        from src.agents.skills_identification_agent import create_skills_identification_agent
-    except ImportError:
-        logger.warning("Skills identification agent not available, using placeholder")
-        def create_skills_identification_agent(llm_router=None):
-            return None
+    from src.agents.skills_identification_agent import create_skills_identification_agent
     from llm_router import LLMRouter
     from orchestrator_engine import MVPOrchestrator
     from context_manager import EfficientContextManager
@@ -384,35 +379,12 @@ def create_mobile_optimized_interface():
         
         # Wire up the submit handler INSIDE the gr.Blocks context
         if 'send_btn' in interface_components and 'message_input' in interface_components and 'chatbot' in interface_components:
-            # Connect the submit handler with the GPU-decorated function
-            # Include Details tab components as outputs
-            outputs = [interface_components['chatbot'], interface_components['message_input']]
-            if 'reasoning_display' in interface_components:
-                outputs.append(interface_components['reasoning_display'])
-            if 'performance_display' in interface_components:
-                outputs.append(interface_components['performance_display'])
-            if 'context_display' in interface_components:
-                outputs.append(interface_components['context_display'])
-            if 'session_info' in interface_components:
-                outputs.append(interface_components['session_info'])
-            if 'skills_tags' in interface_components:
-                outputs.append(interface_components['skills_tags'])
-                outputs.append(skills_display_row)  # Add visibility control for skills display row
+            # Store interface components globally for dynamic return values
+            global _interface_components
+            _interface_components = interface_components
             
-            # Add Process Flow outputs if available
-            if process_flow_available:
-                if 'flow_display' in interface_components:
-                    outputs.append(interface_components['flow_display'])
-                if 'flow_stats' in interface_components:
-                    outputs.append(interface_components['flow_stats'])
-                if 'performance_metrics' in interface_components:
-                    outputs.append(interface_components['performance_metrics'])
-                if 'intent_details' in interface_components:
-                    outputs.append(interface_components['intent_details'])
-                if 'synthesis_details' in interface_components:
-                    outputs.append(interface_components['synthesis_details'])
-                if 'safety_details' in interface_components:
-                    outputs.append(interface_components['safety_details'])
+            # Build outputs list dynamically
+            outputs = _build_outputs_list(interface_components, process_flow_available)
             
             # Include session_info in inputs to pass session ID
             inputs = [interface_components['message_input'], interface_components['chatbot']]
@@ -768,10 +740,90 @@ async def process_message_async(message: str, history: Optional[List], session_i
         
         return error_history, "", reasoning_data, {}, {}, session_id, ""
 
-def process_message(message: str, history: Optional[List], session_id: Optional[str] = None) -> Tuple[List, str, dict, dict, dict, str, str, str, gr.update, str, dict, dict, dict, dict, dict]:
+# Global variable to store interface components for dynamic return values
+_interface_components = {}
+
+def _build_outputs_list(interface_components: dict, process_flow_available: bool) -> list:
+    """
+    Build outputs list dynamically based on available interface components
+    """
+    outputs = [interface_components['chatbot'], interface_components['message_input']]
+    
+    # Add Details tab components
+    if 'reasoning_display' in interface_components:
+        outputs.append(interface_components['reasoning_display'])
+    if 'performance_display' in interface_components:
+        outputs.append(interface_components['performance_display'])
+    if 'context_display' in interface_components:
+        outputs.append(interface_components['context_display'])
+    if 'session_info' in interface_components:
+        outputs.append(interface_components['session_info'])
+    if 'skills_tags' in interface_components:
+        outputs.append(interface_components['skills_tags'])
+    
+    # Add Process Flow outputs if available
+    if process_flow_available:
+        if 'flow_display' in interface_components:
+            outputs.append(interface_components['flow_display'])
+        if 'flow_stats' in interface_components:
+            outputs.append(interface_components['flow_stats'])
+        if 'performance_metrics' in interface_components:
+            outputs.append(interface_components['performance_metrics'])
+        if 'intent_details' in interface_components:
+            outputs.append(interface_components['intent_details'])
+        if 'synthesis_details' in interface_components:
+            outputs.append(interface_components['synthesis_details'])
+        if 'safety_details' in interface_components:
+            outputs.append(interface_components['safety_details'])
+    
+    return outputs
+
+def _build_dynamic_return_values(result: tuple, skills_content: str, interface_components: dict, process_flow_available: bool = False, flow_updates: dict = None) -> tuple:
+    """
+    Build return values dynamically based on available interface components
+    This ensures the return values match the outputs list exactly
+    """
+    return_values = []
+    
+    # Base components (always present)
+    return_values.extend([
+        result[0],  # chatbot (history)
+        result[1],  # message_input (empty_string)
+    ])
+    
+    # Add Details tab components
+    if 'reasoning_display' in interface_components:
+        return_values.append(result[2])  # reasoning_data
+    if 'performance_display' in interface_components:
+        return_values.append(result[3])  # performance_data
+    if 'context_display' in interface_components:
+        return_values.append(result[4])  # context_data
+    if 'session_info' in interface_components:
+        return_values.append(result[5])  # session_id
+    if 'skills_tags' in interface_components:
+        return_values.append(skills_content)  # skills_content
+    
+    # Add Process Flow outputs if available
+    if process_flow_available:
+        if 'flow_display' in interface_components:
+            return_values.append(flow_updates.get("flow_display", "") if flow_updates else "")
+        if 'flow_stats' in interface_components:
+            return_values.append(flow_updates.get("flow_stats", {}) if flow_updates else {})
+        if 'performance_metrics' in interface_components:
+            return_values.append(flow_updates.get("performance_metrics", {}) if flow_updates else {})
+        if 'intent_details' in interface_components:
+            return_values.append(flow_updates.get("intent_details", {}) if flow_updates else {})
+        if 'synthesis_details' in interface_components:
+            return_values.append(flow_updates.get("synthesis_details", {}) if flow_updates else {})
+        if 'safety_details' in interface_components:
+            return_values.append(flow_updates.get("safety_details", {}) if flow_updates else {})
+    
+    return tuple(return_values)
+
+def process_message(message: str, history: Optional[List], session_id: Optional[str] = None) -> tuple:
     """
     Synchronous wrapper for async processing
-    Returns (history, empty_string, reasoning_data, performance_data, context_data, session_id, skills_html, skills_content, skills_visible_update, flow_display, flow_stats, performance_metrics, intent_details, synthesis_details, safety_details)
+    Returns dynamic tuple based on available interface components
     """
     import asyncio
     
@@ -789,24 +841,8 @@ def process_message(message: str, history: Optional[List], session_id: Optional[
         skills_html = result[6]
         skills_content, skills_visible = _update_skills_display(skills_html)
         
-        # Return all required outputs (15 total)
-        return (
-            result[0],  # history
-            result[1],  # empty_string
-            result[2],  # reasoning_data
-            result[3],  # performance_data
-            result[4],  # context_data
-            result[5],  # session_id
-            result[6],  # skills_html
-            skills_content,  # skills_content
-            gr.update(visible=skills_visible),  # skills_visible_update
-            "",  # flow_display
-            {},  # flow_stats
-            {},  # performance_metrics
-            {},  # intent_details
-            {},  # synthesis_details
-            {}   # safety_details
-        )
+        # Return dynamic values based on available components
+        return _build_dynamic_return_values(result, skills_content, _interface_components, process_flow_available)
     except Exception as e:
         logger.error(f"Error in process_message: {e}", exc_info=True)
         error_history = list(history) if history else []
@@ -835,24 +871,9 @@ def process_message(message: str, history: Optional[List], session_id: Optional[
             "confidence_calibration": {"overall_confidence": 0.2, "sync_error": True}
         }
         
-        # Return all required outputs for error case
-        return (
-            error_history,  # history
-            "",  # empty_string
-            reasoning_data,  # reasoning_data
-            {},  # performance_data
-            {},  # context_data
-            session_id,  # session_id
-            "",  # skills_html
-            "",  # skills_content
-            gr.update(visible=False),  # skills_visible_update
-            "",  # flow_display
-            {},  # flow_stats
-            {},  # performance_metrics
-            {},  # intent_details
-            {},  # synthesis_details
-            {}   # safety_details
-        )
+        # Return dynamic values for error case
+        error_result = (error_history, "", reasoning_data, {}, {}, session_id, "")
+        return _build_dynamic_return_values(error_result, "", _interface_components, process_flow_available)
 
 # Decorate the chat handler with GPU if available
 if SPACES_GPU_AVAILABLE and GPU is not None:
@@ -885,8 +906,11 @@ else:
                 performance_data = result[3]
                 context_data = result[4]
                 
-                # Create mock agent results for visualization
-                intent_result = {
+                # Create dynamic agent results for visualization
+                step_results = {}
+                
+                # Intent result
+                step_results["intent_result"] = {
                     "primary_intent": reasoning_data.get("chain_of_thought", {}).get("step_1", {}).get("hypothesis", "unknown"),
                     "confidence_scores": {"overall": reasoning_data.get("confidence_calibration", {}).get("overall_confidence", 0.7)},
                     "secondary_intents": [],
@@ -896,18 +920,31 @@ else:
                     "agent_id": "INTENT_REC_001"
                 }
                 
-                synthesis_result = {
+                # Skills result (if available)
+                if "skills_result" in reasoning_data:  # Check if skills data is in reasoning_data
+                    step_results["skills_result"] = reasoning_data["skills_result"]
+                else:
+                    step_results["skills_result"] = {
+                        "identified_skills": [],
+                        "confidence_score": 0.7,
+                        "processing_time": performance_data.get("processing_time", 0.5) * 0.2,
+                        "agent_id": "SKILLS_ID_001"
+                    }
+                
+                # Synthesis result
+                step_results["synthesis_result"] = {
                     "final_response": result[0][-1]["content"] if result[0] else "",
                     "draft_response": "",
                     "source_references": ["INTENT_REC_001"],
                     "coherence_score": 0.85,
                     "synthesis_method": "llm_enhanced",
-                    "intent_alignment": {"intent_detected": intent_result["primary_intent"], "alignment_score": 0.8},
+                    "intent_alignment": {"intent_detected": step_results["intent_result"]["primary_intent"], "alignment_score": 0.8},
                     "processing_time": performance_data.get("processing_time", 0.5) - 0.15,
                     "agent_id": "RESP_SYNTH_001"
                 }
                 
-                safety_result = {
+                # Safety result
+                step_results["safety_result"] = {
                     "original_response": result[0][-1]["content"] if result[0] else "",
                     "safety_checked_response": result[0][-1]["content"] if result[0] else "",
                     "warnings": [],
@@ -923,34 +960,22 @@ else:
                     "agent_id": "SAFETY_BIAS_001"
                 }
                 
-                # Update process flow visualization
+                # Final response
+                step_results["final_response"] = result[0][-1]["content"] if result[0] else ""
+                
+                # Update process flow visualization dynamically
                 flow_updates = update_process_flow_visualization(
                     user_input=message,
-                    intent_result=intent_result,
-                    synthesis_result=synthesis_result,
-                    safety_result=safety_result,
-                    final_response=result[0][-1]["content"] if result[0] else "",
                     session_id=session_id,
-                    processing_time=performance_data.get("processing_time", 1.0)
+                    processing_time=performance_data.get("processing_time", 1.0),
+                    **step_results
                 )
             except Exception as e:
                 logger.error(f"Error updating process flow: {e}")
                 flow_updates = {}
         
-        # Return all updates including process flow
-        if process_flow_available and flow_updates:
-            return (
-                result[0], result[1], result[2], result[3], result[4], result[5], 
-                result[6], skills_content, gr.update(visible=skills_visible),
-                flow_updates.get("flow_display", ""),
-                flow_updates.get("flow_stats", {}),
-                flow_updates.get("performance_metrics", {}),
-                flow_updates.get("intent_details", {}),
-                flow_updates.get("synthesis_details", {}),
-                flow_updates.get("safety_details", {})
-            )
-        else:
-            return result
+        # Return dynamic values including process flow
+        return _build_dynamic_return_values(result, skills_content, _interface_components, process_flow_available, flow_updates)
     chat_handler_fn = chat_handler_wrapper
 
 # Initialize orchestrator on module load
@@ -985,13 +1010,10 @@ def initialize_orchestrator():
             'safety_check': create_safety_agent(llm_router),
         }
         
-        # Add skills identification agent if available
+        # Add skills identification agent
         skills_agent = create_skills_identification_agent(llm_router)
-        if skills_agent is not None:
-            agents['skills_identification'] = skills_agent
-            logger.info("✓ Skills identification agent initialized")
-        else:
-            logger.info("⚠ Skills identification agent not available")
+        agents['skills_identification'] = skills_agent
+        logger.info("✓ Skills identification agent initialized")
         
         logger.info(f"✓ Initialized {len(agents)} agents")
         

process_flow_visualizer.py

@@ -18,6 +18,60 @@ class ProcessFlowVisualizer:
         self.flow_history = []
         self.current_session_id = None
         
+        # Dynamic flow step definitions - easily configurable for future modifications
+        self.flow_steps_config = {
+            "user_input": {
+                "icon": "👤",
+                "title": "User Input",
+                "description_template": '"{user_input[:100]}{ellipsis}"',
+                "metrics": ["input_length"]
+            },
+            "intent_recognition": {
+                "icon": "🧠",
+                "title": "Intent Recognition",
+                "description_template": "<strong>Intent:</strong> {primary_intent} | <strong>Confidence:</strong> {confidence:.2f}",
+                "metrics": ["confidence", "processing_time"],
+                "show_confidence_bar": True
+            },
+            "skills_identification": {
+                "icon": "🎯",
+                "title": "Skills Identification",
+                "description_template": "<strong>Skills Found:</strong> {skills_count} | <strong>Categories:</strong> {categories_count}",
+                "metrics": ["skills_count", "confidence_score"],
+                "show_confidence_bar": True
+            },
+            "response_synthesis": {
+                "icon": "🔄",
+                "title": "Response Synthesis",
+                "description_template": "<strong>Method:</strong> {synthesis_method} | <strong>Coherence:</strong> {coherence_score:.2f}",
+                "metrics": ["coherence_score", "synthesis_method"]
+            },
+            "safety_check": {
+                "icon": "🛡️",
+                "title": "Safety Check",
+                "description_template": "<strong>Safety Score:</strong> {safety_score:.2f} | <strong>Warnings:</strong> {warnings_count}",
+                "metrics": ["safety_score", "warnings_count"],
+                "show_confidence_bar": True
+            },
+            "final_response": {
+                "icon": "✅",
+                "title": "Final Response",
+                "description_template": "<strong>Length:</strong> {response_length} characters | <strong>Status:</strong> {status}",
+                "metrics": ["response_length", "status"]
+            }
+        }
+        
+        # Dynamic metrics configuration
+        self.metrics_config = {
+            "processing_time": {"label": "Total Processing Time", "format": "{:.2f}s"},
+            "confidence": {"label": "Intent Confidence", "format": "{:.2f}"},
+            "safety_score": {"label": "Safety Score", "format": "{:.2f}"},
+            "llm_inferences": {"label": "LLM Inferences", "format": "{}"},
+            "agents_executed": {"label": "Agents Executed", "format": "{}"},
+            "skills_count": {"label": "Skills Identified", "format": "{}"},
+            "categories_count": {"label": "Categories Found", "format": "{}"}
+        }
+        
     def create_process_flow_tab(self, interface_components: Dict[str, Any]) -> gr.TabItem:
         """
         Create the Process Flow visualization tab
@@ -118,48 +172,50 @@ class ProcessFlowVisualizer:
     
     def update_process_flow(self, 
                            user_input: str,
-                           intent_result: Dict[str, Any],
-                           synthesis_result: Dict[str, Any],
-                           safety_result: Dict[str, Any],
-                           final_response: str,
                            session_id: str,
-                           processing_time: float) -> Dict[str, Any]:
+                           processing_time: float,
+                           **step_results) -> Dict[str, Any]:
         """
         Update the process flow visualization with new data
+        Dynamically handles any number of steps and results
+        
+        Args:
+            user_input: The user's input message
+            session_id: Current session identifier
+            processing_time: Total processing time
+            **step_results: Dynamic step results (intent_result, synthesis_result, etc.)
         """
         try:
-            # Create flow entry
+            # Create flow entry with dynamic step results
             flow_entry = {
                 "timestamp": datetime.now().isoformat(),
                 "session_id": session_id,
                 "user_input": user_input,
-                "intent_result": intent_result,
-                "synthesis_result": synthesis_result,
-                "safety_result": safety_result,
-                "final_response": final_response,
                 "processing_time": processing_time,
-                "flow_id": str(uuid.uuid4())[:8]
+                "flow_id": str(uuid.uuid4())[:8],
+                **step_results  # Dynamically include all step results
             }
             
             # Add to history
             self.flow_history.append(flow_entry)
             
-            # Generate flow visualization
-            flow_html = self._generate_flow_html(flow_entry)
+            # Generate flow visualization dynamically
+            flow_html = self._generate_dynamic_flow_html(flow_entry)
             
             # Generate statistics
             stats = self._generate_flow_statistics()
             
-            # Generate performance metrics
-            performance = self._generate_performance_metrics(flow_entry)
+            # Generate performance metrics dynamically
+            performance = self._generate_dynamic_performance_metrics(flow_entry)
+            
+            # Generate dynamic details for each step
+            details = self._generate_dynamic_details(flow_entry)
             
             return {
                 "flow_display": flow_html,
                 "flow_stats": stats,
                 "performance_metrics": performance,
-                "intent_details": intent_result,
-                "synthesis_details": synthesis_result,
-                "safety_details": safety_result
+                **details  # Dynamically include all step details
             }
             
         except Exception as e:
@@ -168,10 +224,461 @@ class ProcessFlowVisualizer:
                 "flow_display": self._get_error_flow_html(str(e)),
                 "flow_stats": {"error": str(e)},
                 "performance_metrics": {"error": str(e)},
-                "intent_details": {},
-                "synthesis_details": {},
-                "safety_details": {}
+                **{f"{step}_details": {} for step in self.flow_steps_config.keys() if step != "user_input"}
+            }
+    
+    def _generate_dynamic_flow_html(self, flow_entry: Dict[str, Any]) -> str:
+        """
+        Generate HTML visualization of the process flow dynamically
+        """
+        user_input = flow_entry["user_input"]
+        processing_time = flow_entry["processing_time"]
+        
+        # Generate dynamic steps HTML
+        steps_html = self._generate_dynamic_steps_html(flow_entry)
+        
+        # Generate dynamic metrics HTML
+        metrics_html = self._generate_dynamic_metrics_html(flow_entry)
+        
+        html = f"""
+        <div class="process-flow-container">
+            <style>
+                .process-flow-container {{
+                    font-family: 'Inter', system-ui, sans-serif;
+                    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+                    border-radius: 12px;
+                    padding: 20px;
+                    margin: 10px 0;
+                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                }}
+                
+                .flow-header {{
+                    text-align: center;
+                    margin-bottom: 20px;
+                    padding: 15px;
+                    background: rgba(255, 255, 255, 0.9);
+                    border-radius: 8px;
+                    border-left: 4px solid #2196F3;
+                }}
+                
+                .flow-step {{
+                    display: flex;
+                    align-items: center;
+                    margin: 15px 0;
+                    padding: 12px;
+                    background: rgba(255, 255, 255, 0.8);
+                    border-radius: 8px;
+                    border-left: 4px solid #4CAF50;
+                    transition: all 0.3s ease;
+                }}
+                
+                .flow-step:hover {{
+                    transform: translateX(5px);
+                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+                }}
+                
+                .step-icon {{
+                    font-size: 24px;
+                    margin-right: 15px;
+                    min-width: 40px;
+                }}
+                
+                .step-content {{
+                    flex: 1;
+                }}
+                
+                .step-title {{
+                    font-weight: 600;
+                    color: #2c3e50;
+                    margin-bottom: 5px;
+                }}
+                
+                .step-details {{
+                    font-size: 14px;
+                    color: #7f8c8d;
+                    line-height: 1.4;
+                }}
+                
+                .metrics-grid {{
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                    gap: 15px;
+                    margin-top: 20px;
+                }}
+                
+                .metric-card {{
+                    background: rgba(255, 255, 255, 0.9);
+                    padding: 15px;
+                    border-radius: 8px;
+                    text-align: center;
+                    border-top: 3px solid #3498db;
+                }}
+                
+                .metric-value {{
+                    font-size: 24px;
+                    font-weight: bold;
+                    color: #2c3e50;
+                }}
+                
+                .metric-label {{
+                    font-size: 12px;
+                    color: #7f8c8d;
+                    text-transform: uppercase;
+                    letter-spacing: 1px;
+                }}
+                
+                .confidence-bar {{
+                    width: 100%;
+                    height: 8px;
+                    background: #ecf0f1;
+                    border-radius: 4px;
+                    overflow: hidden;
+                    margin-top: 5px;
+                }}
+                
+                .confidence-fill {{
+                    height: 100%;
+                    background: linear-gradient(90deg, #e74c3c 0%, #f39c12 50%, #27ae60 100%);
+                    transition: width 0.5s ease;
+                }}
+                
+                @media (max-width: 768px) {{
+                    .process-flow-container {{
+                        padding: 15px;
+                        margin: 5px 0;
+                    }}
+                    
+                    .flow-step {{
+                        flex-direction: column;
+                        text-align: center;
+                    }}
+                    
+                    .step-icon {{
+                        margin-right: 0;
+                        margin-bottom: 10px;
+                    }}
+                    
+                    .metrics-grid {{
+                        grid-template-columns: 1fr;
+                    }}
+                }}
+            </style>
+            
+            <div class="flow-header">
+                <h3>🔄 Process Flow Visualization</h3>
+                <p><strong>Session:</strong> {flow_entry["session_id"]} | 
+                   <strong>Time:</strong> {processing_time:.2f}s | 
+                   <strong>Flow ID:</strong> {flow_entry["flow_id"]}</p>
+            </div>
+            
+            {steps_html}
+            
+            {metrics_html}
+        </div>
+        """
+        
+        return html
+    
+    def _generate_dynamic_steps_html(self, flow_entry: Dict[str, Any]) -> str:
+        """
+        Generate HTML for flow steps dynamically based on available data
+        """
+        steps_html = ""
+        
+        for step_key, step_config in self.flow_steps_config.items():
+            if step_key == "user_input":
+                # Special handling for user input
+                user_input = flow_entry["user_input"]
+                ellipsis = "..." if len(user_input) > 100 else ""
+                description = step_config["description_template"].format(
+                    user_input=user_input,
+                    ellipsis=ellipsis
+                )
+            else:
+                # Handle other steps dynamically
+                step_result = flow_entry.get(f"{step_key}_result", {})
+                if not step_result:
+                    continue  # Skip steps that don't have results
+                
+                # Extract data for this step
+                step_data = self._extract_step_data(step_key, step_result, flow_entry)
+                description = step_config["description_template"].format(**step_data)
+            
+            # Generate confidence bar if needed
+            confidence_bar = ""
+            if step_config.get("show_confidence_bar") and step_key != "user_input":
+                step_result = flow_entry.get(f"{step_key}_result", {})
+                confidence_value = self._extract_confidence_value(step_key, step_result)
+                if confidence_value is not None:
+                    confidence_bar = f"""
+                        <div class="confidence-bar">
+                            <div class="confidence-fill" style="width: {confidence_value * 100}%"></div>
+                        </div>
+                    """
+            
+            steps_html += f"""
+            <div class="flow-step">
+                <div class="step-icon">{step_config["icon"]}</div>
+                <div class="step-content">
+                    <div class="step-title">{step_config["title"]}</div>
+                    <div class="step-details">
+                        {description}
+                        {confidence_bar}
+                    </div>
+                </div>
+            </div>
+            """
+        
+        return steps_html
+    
+    def _generate_dynamic_metrics_html(self, flow_entry: Dict[str, Any]) -> str:
+        """
+        Generate HTML for metrics dynamically based on available data
+        """
+        metrics_html = '<div class="metrics-grid">'
+        
+        # Calculate dynamic metrics
+        metrics_data = self._calculate_dynamic_metrics(flow_entry)
+        
+        for metric_key, metric_value in metrics_data.items():
+            if metric_key in self.metrics_config:
+                config = self.metrics_config[metric_key]
+                formatted_value = config["format"].format(metric_value)
+                label = config["label"]
+                
+                metrics_html += f"""
+                <div class="metric-card">
+                    <div class="metric-value">{formatted_value}</div>
+                    <div class="metric-label">{label}</div>
+                </div>
+                """
+        
+        metrics_html += '</div>'
+        return metrics_html
+    
+    def _extract_step_data(self, step_key: str, step_result: Dict[str, Any], flow_entry: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Extract relevant data for a specific step
+        """
+        data = {}
+        
+        if step_key == "intent_recognition":
+            data.update({
+                "primary_intent": step_result.get("primary_intent", "unknown"),
+                "confidence": step_result.get("confidence_scores", {}).get(step_result.get("primary_intent", "unknown"), 0.0),
+                "processing_time": step_result.get("processing_time", 0)
+            })
+        elif step_key == "skills_identification":
+            identified_skills = step_result.get("identified_skills", [])
+            data.update({
+                "skills_count": len(identified_skills),
+                "categories_count": len(set(skill.get("category", "unknown") for skill in identified_skills)),
+                "confidence_score": step_result.get("confidence_score", 0.0)
+            })
+        elif step_key == "response_synthesis":
+            data.update({
+                "synthesis_method": step_result.get("synthesis_method", "unknown"),
+                "coherence_score": step_result.get("coherence_score", 0.0)
+            })
+        elif step_key == "safety_check":
+            safety_analysis = step_result.get("safety_analysis", {})
+            data.update({
+                "safety_score": safety_analysis.get("overall_safety_score", 0.0),
+                "warnings_count": len(step_result.get("warnings", []))
+            })
+        elif step_key == "final_response":
+            final_response = flow_entry.get("final_response", "")
+            data.update({
+                "response_length": len(final_response),
+                "status": "Delivered successfully"
+            })
+        
+        return data
+    
+    def _extract_confidence_value(self, step_key: str, step_result: Dict[str, Any]) -> Optional[float]:
+        """
+        Extract confidence value for a step
+        """
+        if step_key == "intent_recognition":
+            return step_result.get("confidence_scores", {}).get(step_result.get("primary_intent", "unknown"), 0.0)
+        elif step_key == "skills_identification":
+            return step_result.get("confidence_score", 0.0)
+        elif step_key == "safety_check":
+            return step_result.get("safety_analysis", {}).get("overall_safety_score", 0.0)
+        return None
+    
+    def _calculate_dynamic_metrics(self, flow_entry: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Calculate metrics dynamically based on available data
+        """
+        metrics = {
+            "processing_time": flow_entry.get("processing_time", 0)
+        }
+        
+        # Count LLM inferences dynamically
+        llm_inferences = 0
+        agents_executed = 0
+        
+        for step_key in self.flow_steps_config.keys():
+            if step_key == "user_input" or step_key == "final_response":
+                continue
+            
+            step_result = flow_entry.get(f"{step_key}_result", {})
+            if step_result:
+                agents_executed += 1
+                # Each agent typically makes 1-2 LLM inferences
+                llm_inferences += step_result.get("llm_inferences", 1)
+        
+        metrics.update({
+            "llm_inferences": llm_inferences,
+            "agents_executed": agents_executed
+        })
+        
+        # Add step-specific metrics
+        intent_result = flow_entry.get("intent_result", {})
+        if intent_result:
+            metrics["confidence"] = intent_result.get("confidence_scores", {}).get(intent_result.get("primary_intent", "unknown"), 0.0)
+        
+        safety_result = flow_entry.get("safety_result", {})
+        if safety_result:
+            metrics["safety_score"] = safety_result.get("safety_analysis", {}).get("overall_safety_score", 0.0)
+        
+        skills_result = flow_entry.get("skills_result", {})
+        if skills_result:
+            metrics["skills_count"] = len(skills_result.get("identified_skills", []))
+            metrics["categories_count"] = len(set(skill.get("category", "unknown") for skill in skills_result.get("identified_skills", [])))
+        
+        return metrics
+    
+    def _generate_dynamic_details(self, flow_entry: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Generate dynamic details for each step
+        """
+        details = {}
+        
+        for step_key in self.flow_steps_config.keys():
+            if step_key == "user_input":
+                continue
+            
+            step_result = flow_entry.get(f"{step_key}_result", {})
+            if step_result:
+                details[f"{step_key}_details"] = step_result
+            else:
+                details[f"{step_key}_details"] = {}
+        
+        return details
+    
+    def _generate_dynamic_performance_metrics(self, flow_entry: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Generate performance metrics dynamically
+        """
+        performance = {
+            "overall": {
+                "total_processing_time": flow_entry.get("processing_time", 0),
+                "success_rate": 1.0
             }
+        }
+        
+        # Dynamically add metrics for each step
+        for step_key in self.flow_steps_config.keys():
+            if step_key == "user_input" or step_key == "final_response":
+                continue
+            
+            step_result = flow_entry.get(f"{step_key}_result", {})
+            if step_result:
+                step_performance = {
+                    "processing_time": step_result.get("processing_time", 0),
+                    "agent_id": step_result.get("agent_id", "unknown")
+                }
+                
+                # Add step-specific metrics
+                if step_key == "intent_recognition":
+                    step_performance["confidence"] = step_result.get("confidence_scores", {}).get(step_result.get("primary_intent", "unknown"), 0.0)
+                elif step_key == "skills_identification":
+                    step_performance["confidence_score"] = step_result.get("confidence_score", 0.0)
+                    step_performance["skills_count"] = len(step_result.get("identified_skills", []))
+                elif step_key == "response_synthesis":
+                    step_performance["coherence_score"] = step_result.get("coherence_score", 0.0)
+                    step_performance["synthesis_method"] = step_result.get("synthesis_method", "unknown")
+                elif step_key == "safety_check":
+                    step_performance["safety_score"] = step_result.get("safety_analysis", {}).get("overall_safety_score", 0.0)
+                    step_performance["warnings_count"] = len(step_result.get("warnings", []))
+                
+                performance[step_key] = step_performance
+        
+        # Calculate overall metrics
+        performance["overall"]["llm_inferences"] = sum(step_result.get("llm_inferences", 1) for step_result in [flow_entry.get(f"{step}_result", {}) for step in self.flow_steps_config.keys() if step not in ["user_input", "final_response"]] if step_result)
+        performance["overall"]["agents_executed"] = len([step_result for step_result in [flow_entry.get(f"{step}_result", {}) for step in self.flow_steps_config.keys() if step not in ["user_input", "final_response"]] if step_result])
+        
+        return performance
+    
+    def add_flow_step(self, step_key: str, step_config: Dict[str, Any]) -> None:
+        """
+        Add a new flow step dynamically for future modifications
+        
+        Args:
+            step_key: Unique identifier for the step
+            step_config: Configuration dictionary with icon, title, description_template, etc.
+        """
+        self.flow_steps_config[step_key] = step_config
+        logger.info(f"Added new flow step: {step_key}")
+    
+    def remove_flow_step(self, step_key: str) -> None:
+        """
+        Remove a flow step dynamically
+        
+        Args:
+            step_key: Identifier of the step to remove
+        """
+        if step_key in self.flow_steps_config:
+            del self.flow_steps_config[step_key]
+            logger.info(f"Removed flow step: {step_key}")
+        else:
+            logger.warning(f"Flow step not found: {step_key}")
+    
+    def add_metric(self, metric_key: str, metric_config: Dict[str, Any]) -> None:
+        """
+        Add a new metric dynamically
+        
+        Args:
+            metric_key: Unique identifier for the metric
+            metric_config: Configuration with label and format
+        """
+        self.metrics_config[metric_key] = metric_config
+        logger.info(f"Added new metric: {metric_key}")
+    
+    def get_flow_steps(self) -> Dict[str, Any]:
+        """
+        Get current flow steps configuration
+        """
+        return self.flow_steps_config.copy()
+    
+    def get_metrics_config(self) -> Dict[str, Any]:
+        """
+        Get current metrics configuration
+        """
+        return self.metrics_config.copy()
+    
+    def configure_step_order(self, step_order: List[str]) -> None:
+        """
+        Configure the order of steps in the flow
+        
+        Args:
+            step_order: List of step keys in desired order
+        """
+        # Reorder the flow_steps_config based on the provided order
+        ordered_config = {}
+        for step_key in step_order:
+            if step_key in self.flow_steps_config:
+                ordered_config[step_key] = self.flow_steps_config[step_key]
+        
+        # Add any remaining steps not in the order list
+        for step_key, step_config in self.flow_steps_config.items():
+            if step_key not in ordered_config:
+                ordered_config[step_key] = step_config
+        
+        self.flow_steps_config = ordered_config
+        logger.info(f"Reordered flow steps: {step_order}")
     
     def _generate_flow_html(self, flow_entry: Dict[str, Any]) -> str:
         """
@@ -532,18 +1039,14 @@ def create_process_flow_tab(interface_components: Dict[str, Any]) -> gr.TabItem:
     return process_flow_visualizer.create_process_flow_tab(interface_components)
 
 def update_process_flow_visualization(user_input: str,
-                                    intent_result: Dict[str, Any],
-                                    synthesis_result: Dict[str, Any],
-                                    safety_result: Dict[str, Any],
-                                    final_response: str,
                                     session_id: str,
-                                    processing_time: float) -> Dict[str, Any]:
+                                    processing_time: float,
+                                    **step_results) -> Dict[str, Any]:
     """
-    Update the process flow visualization
+    Update the process flow visualization dynamically
     """
     return process_flow_visualizer.update_process_flow(
-        user_input, intent_result, synthesis_result, safety_result,
-        final_response, session_id, processing_time
+        user_input, session_id, processing_time, **step_results
     )
 
 def clear_flow_history() -> Dict[str, Any]:

system_integrity_test.py

@@ -0,0 +1 @@
+