feat: Add modular UI components for Gradio 6.0 compatibility

- Create ui/ module with reusable components
- ui/styles.py: Custom CSS for consistent styling
- ui/chat_components.py: Chat tab with NAKED mode
- ui/mcp_health.py: MCP endpoint health monitoring
- ui/quick_build.py: Template circuit generation
- Update app.py to import UI styles with fallback

app.py

@@ -1,9 +1,11 @@
 """
 QAgents-Workflows: Hugging Face Space Entry Point
 Path: QAgents-workflows/app.py
-Related: client/mcp_client.py (MCP connection), orchestrators/ (agent orchestration)
+Related: ui/ module for Gradio components
+         client/mcp_client.py (MCP connection)
+         orchestrators/ (agent orchestration)
 
-Provides a Gradio interface with:
+Provides a Gradio 6.0 compatible interface with:
 - Chat UI for interacting with quantum circuit agents (NAKED mode)
 - MCP Endpoints health monitoring tab
 - Circuit generation and validation tools
@@ -18,6 +20,16 @@ import requests
 import time
 from typing import Optional, List, Dict, Any
 
+# =============================================================================
+# TRY TO IMPORT UI MODULE (provides modular components)
+# =============================================================================
+try:
+    from ui.styles import CUSTOM_CSS
+    UI_STYLES_AVAILABLE = True
+except ImportError:
+    CUSTOM_CSS = ""
+    UI_STYLES_AVAILABLE = False
+
 # Configure logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -214,7 +226,7 @@ def quick_build_circuit(template: str, num_qubits: int) -> str:
 # GRADIO INTERFACE
 # =============================================================================
 
-with gr.Blocks(title="QAgents - Quantum Circuit Assistant") as demo:
+with gr.Blocks(title="QAgents - Quantum Circuit Assistant", css=CUSTOM_CSS if UI_STYLES_AVAILABLE else None) as demo:
     
     # Header
     gr.Markdown("""

ui/__init__.py

@@ -0,0 +1,49 @@
+# Path: QAgents-workflows/ui/__init__.py
+# Relations: Used by app.py, imports from chat_components.py, mcp_health.py, quick_build.py
+# Description: UI module initialization - exports all Gradio components for the app
+"""
+UI Module: Gradio 6.0 compatible UI components for QAgents-Workflows.
+
+This module provides modular UI components that can be assembled
+into the main Gradio app. Each component is designed to work
+with the agent orchestration system.
+"""
+
+from .chat_components import (
+    create_chat_tab,
+    chat_response,
+    generate_circuit_with_naked,
+)
+
+from .mcp_health import (
+    create_mcp_health_tab,
+    check_mcp_health,
+    check_endpoint_health,
+    get_all_endpoints_health,
+    MCP_ENDPOINTS,
+)
+
+from .quick_build import (
+    create_quick_build_tab,
+    quick_build_circuit,
+)
+
+from .styles import CUSTOM_CSS
+
+__all__ = [
+    # Chat
+    "create_chat_tab",
+    "chat_response", 
+    "generate_circuit_with_naked",
+    # MCP Health
+    "create_mcp_health_tab",
+    "check_mcp_health",
+    "check_endpoint_health",
+    "get_all_endpoints_health",
+    "MCP_ENDPOINTS",
+    # Quick Build
+    "create_quick_build_tab",
+    "quick_build_circuit",
+    # Styles
+    "CUSTOM_CSS",
+]

ui/chat_components.py

@@ -0,0 +1,182 @@
+# Path: QAgents-workflows/ui/chat_components.py
+# Relations: Uses orchestrators/orchestrator.py (NakedOrchestrator)
+#            Used by __init__.py, app.py
+# Description: Chat UI components for interacting with quantum circuit agents
+"""
+Chat Components: Gradio 6.0 compatible chat interface for QAgents.
+
+Provides:
+- Chat tab creation
+- Message handling with NAKED mode orchestrator
+- Help and status commands
+"""
+
+import gradio as gr
+import logging
+from typing import List, Dict, Any, Tuple
+
+logger = logging.getLogger(__name__)
+
+
+def generate_circuit_with_naked(prompt: str) -> str:
+    """
+    Generate a quantum circuit using NAKED mode (direct LLM call).
+    This is the simplest and fastest mode.
+    
+    Args:
+        prompt: User's natural language request
+        
+    Returns:
+        Formatted response with circuit or error message
+    """
+    try:
+        # Lazy import to avoid startup issues
+        from orchestrators import create_orchestrator
+        
+        orch = create_orchestrator("naked")
+        result = orch.run(prompt)
+
+        if result.success:
+            output = f"✅ **Success** ({result.execution_time_ms:.0f}ms)\n\n"
+            if result.final_output:
+                if 'OPENQASM' in str(result.final_output) or 'qreg' in str(result.final_output):
+                    output += f"```qasm\n{result.final_output}\n```"
+                else:
+                    output += str(result.final_output)
+            return output
+        else:
+            error_msg = "\n".join(result.errors) if result.errors else "Unknown error"
+            return f"❌ **Failed** ({result.execution_time_ms:.0f}ms)\n\n{error_msg}"
+    except Exception as e:
+        logger.error(f"NAKED mode error: {e}")
+        return f"❌ **Error**: {str(e)}"
+
+
+def get_help_text() -> str:
+    """Return help text for the chat interface."""
+    return """## 🤖 QAgents Help
+
+I can help you with quantum circuits! Try asking me to:
+
+**Create Circuits:**
+- "Create a Bell state"
+- "Generate a 3-qubit GHZ state"
+- "Make a QFT circuit for 4 qubits"
+- "Build a simple superposition"
+
+**Examples:**
+- "Create a circuit that puts 2 qubits in superposition"
+- "Generate a CNOT gate between qubit 0 and 1"
+- "Build a quantum teleportation circuit"
+
+💡 **Tip:** Be specific about the number of qubits and desired operations!
+
+**Commands:**
+- `help` - Show this help message
+- `status` - Check system status"""
+
+
+def get_status_text(mcp_server_url: str) -> str:
+    """Return status text for the chat interface."""
+    try:
+        from ui.mcp_health import check_mcp_health
+        health = check_mcp_health()
+        return f"## 📊 System Status\n\n{health}\n\n**MCP Server:** `{mcp_server_url}`"
+    except Exception as e:
+        return f"## 📊 System Status\n\n🔴 **Error checking status**: {str(e)}"
+
+
+def chat_response(message: str, history: List, mcp_server_url: str = "") -> str:
+    """
+    Handle chat messages and generate responses.
+    Uses NAKED mode for circuit generation.
+    
+    Args:
+        message: User's message
+        history: Chat history
+        mcp_server_url: URL of the MCP server
+        
+    Returns:
+        Bot's response message
+    """
+    if not message.strip():
+        return ""
+
+    message_lower = message.lower().strip()
+
+    # Help command
+    if message_lower in ['help', '/help', '?']:
+        return get_help_text()
+
+    # Status command
+    if message_lower in ['status', '/status']:
+        return get_status_text(mcp_server_url)
+
+    # Generate circuit
+    logger.info(f"Generating circuit for: {message}")
+    return generate_circuit_with_naked(message)
+
+
+def create_chat_tab(mcp_server_url: str = "") -> Tuple[gr.Chatbot, gr.Textbox, gr.Button]:
+    """
+    Create the chat tab components for Gradio 6.0.
+    
+    Args:
+        mcp_server_url: URL of the MCP server for status checks
+        
+    Returns:
+        Tuple of (chatbot, textbox, send_button) components
+    """
+    gr.Markdown("### Chat with Quantum Circuit Agent")
+    gr.Markdown("Ask me to create quantum circuits! Try: *'Create a Bell state'* or *'Generate a 3-qubit GHZ state'*")
+
+    chatbot = gr.Chatbot(
+        value=[],
+        height=400,
+        label="Quantum Circuit Agent"
+    )
+
+    with gr.Row():
+        msg_input = gr.Textbox(
+            placeholder="Ask me to create a quantum circuit...",
+            label="Your Message",
+            scale=4,
+            lines=1
+        )
+        send_btn = gr.Button("Send 🚀", variant="primary", scale=1)
+
+    with gr.Row():
+        clear_btn = gr.Button("🗑️ Clear", size="sm")
+        help_btn = gr.Button("❓ Help", size="sm")
+        status_btn = gr.Button("📊 Status", size="sm")
+
+    # Chat handlers
+    def respond(message: str, chat_history: List):
+        if not message.strip():
+            return "", chat_history
+
+        bot_response = chat_response(message, chat_history, mcp_server_url)
+        chat_history.append({"role": "user", "content": message})
+        chat_history.append({"role": "assistant", "content": bot_response})
+        return "", chat_history
+
+    def show_help(chat_history: List):
+        help_text = get_help_text()
+        chat_history.append({"role": "user", "content": "help"})
+        chat_history.append({"role": "assistant", "content": help_text})
+        return chat_history
+
+    def show_status(chat_history: List):
+        status_text = get_status_text(mcp_server_url)
+        chat_history.append({"role": "user", "content": "status"})
+        chat_history.append({"role": "assistant", "content": status_text})
+        return chat_history
+
+    # Wire up events
+    send_btn.click(respond, [msg_input, chatbot], [msg_input, chatbot])
+    msg_input.submit(respond, [msg_input, chatbot], [msg_input, chatbot])
+    clear_btn.click(lambda: [], outputs=[chatbot])
+    help_btn.click(show_help, [chatbot], [chatbot])
+    status_btn.click(show_status, [chatbot], [chatbot])
+
+    return chatbot, msg_input, send_btn

ui/mcp_health.py

@@ -0,0 +1,183 @@
+# Path: QAgents-workflows/ui/mcp_health.py
+# Relations: Uses client/mcp_client.py for health checks
+#            Used by __init__.py, app.py, chat_components.py
+# Description: MCP health monitoring UI components
+"""
+MCP Health Components: Monitor QuantumArchitect-MCP endpoint availability.
+
+Provides:
+- Server health check
+- Individual endpoint health checks
+- Health status table display
+"""
+
+import os
+import gradio as gr
+import requests
+import time
+import logging
+from typing import Dict, List
+
+logger = logging.getLogger(__name__)
+
+# Default MCP Server URL
+MCP_SERVER_URL = os.environ.get(
+    "MCP_SERVER_URL",
+    "https://mcp-1st-birthday-quantumarchitect-mcp.hf.space"
+)
+
+# MCP Endpoints definitions
+MCP_ENDPOINTS = [
+    {"name": "create_circuit", "category": "Creation", "description": "Create circuit from template"},
+    {"name": "parse_qasm", "category": "Creation", "description": "Parse OpenQASM code"},
+    {"name": "build_circuit", "category": "Creation", "description": "Build custom circuit from gates"},
+    {"name": "validate_circuit", "category": "Validation", "description": "Full circuit validation"},
+    {"name": "check_hardware", "category": "Validation", "description": "Hardware compatibility check"},
+    {"name": "simulate", "category": "Simulation", "description": "Simulate with measurements"},
+    {"name": "get_statevector", "category": "Simulation", "description": "Extract statevector"},
+    {"name": "estimate_fidelity", "category": "Simulation", "description": "Hardware fidelity estimation"},
+    {"name": "score_circuit", "category": "Scoring", "description": "Circuit scoring metrics"},
+    {"name": "compare_circuits", "category": "Scoring", "description": "Compare multiple circuits"},
+    {"name": "get_gate_info", "category": "Documentation", "description": "Gate documentation"},
+    {"name": "get_algorithm_info", "category": "Documentation", "description": "Algorithm documentation"},
+    {"name": "list_hardware", "category": "Documentation", "description": "Available hardware profiles"},
+    {"name": "list_templates", "category": "Documentation", "description": "Available circuit templates"},
+]
+
+
+def check_mcp_health(server_url: str = None) -> str:
+    """
+    Check overall MCP server health.
+    
+    Args:
+        server_url: MCP server URL (uses default if not provided)
+        
+    Returns:
+        Status string with emoji indicator
+    """
+    url = server_url or MCP_SERVER_URL
+    try:
+        response = requests.get(f"{url}/", timeout=10)
+        if response.status_code == 200:
+            return f"🟢 **Connected** to MCP Server"
+        else:
+            return f"🟡 **Partial** - Status {response.status_code}"
+    except requests.exceptions.Timeout:
+        return "🟠 **Timeout** - Server slow to respond"
+    except requests.exceptions.ConnectionError:
+        return "🔴 **Disconnected** - Cannot reach server"
+    except Exception as e:
+        return f"🔴 **Error**: {str(e)[:50]}"
+
+
+def check_endpoint_health(endpoint_name: str, server_url: str = None) -> Dict:
+    """
+    Check health of a specific MCP endpoint.
+    
+    Args:
+        endpoint_name: Name of the endpoint to check
+        server_url: MCP server URL (uses default if not provided)
+        
+    Returns:
+        Dict with status, latency_ms, and error fields
+    """
+    url = server_url or MCP_SERVER_URL
+    start = time.perf_counter()
+    try:
+        endpoint_url = f"{url}/gradio_api/call/ui_{endpoint_name}"
+        response = requests.post(endpoint_url, json={"data": []}, timeout=15)
+        elapsed = (time.perf_counter() - start) * 1000
+
+        if response.status_code == 200:
+            return {"status": "🟢", "latency_ms": round(elapsed, 1), "error": None}
+        elif response.status_code == 404:
+            return {"status": "🟡", "latency_ms": round(elapsed, 1), "error": "Not found"}
+        else:
+            return {"status": "🟠", "latency_ms": round(elapsed, 1), "error": f"HTTP {response.status_code}"}
+    except requests.exceptions.Timeout:
+        return {"status": "🟠", "latency_ms": 15000, "error": "Timeout"}
+    except Exception as e:
+        elapsed = (time.perf_counter() - start) * 1000
+        return {"status": "🔴", "latency_ms": round(elapsed, 1), "error": str(e)[:50]}
+
+
+def get_all_endpoints_health(server_url: str = None) -> str:
+    """
+    Get health status of all MCP endpoints as formatted markdown.
+    
+    Args:
+        server_url: MCP server URL (uses default if not provided)
+        
+    Returns:
+        Markdown formatted table with endpoint health status
+    """
+    url = server_url or MCP_SERVER_URL
+    output_lines = [
+        "## 🔗 MCP Endpoints Health Check",
+        f"**Server:** `{url}`\n",
+        "| Endpoint | Category | Status | Latency | Error |",
+        "|----------|----------|--------|---------|-------|"
+    ]
+
+    for endpoint in MCP_ENDPOINTS:
+        health = check_endpoint_health(endpoint["name"], url)
+        error_str = health["error"] or "-"
+        output_lines.append(
+            f"| `{endpoint['name']}` | {endpoint['category']} | {health['status']} | {health['latency_ms']}ms | {error_str} |"
+        )
+
+    output_lines.append(f"\n**Last checked:** {time.strftime('%Y-%m-%d %H:%M:%S UTC')}")
+    return "\n".join(output_lines)
+
+
+def create_mcp_health_tab(server_url: str = None) -> gr.Markdown:
+    """
+    Create the MCP Health monitoring tab components.
+    
+    Args:
+        server_url: MCP server URL (uses default if not provided)
+        
+    Returns:
+        Health display Markdown component
+    """
+    url = server_url or MCP_SERVER_URL
+    
+    gr.Markdown("""
+## 🔗 MCP Endpoints Health Monitor
+
+Monitor the health and availability of QuantumArchitect-MCP endpoints.
+    """)
+
+    with gr.Row():
+        check_all_btn = gr.Button("🔄 Check All Endpoints", variant="primary")
+
+    health_display = gr.Markdown(value="Click 'Check All Endpoints' to start health check...")
+
+    gr.Markdown("---")
+    gr.Markdown("### 🔍 Check Single Endpoint")
+
+    with gr.Row():
+        endpoint_dropdown = gr.Dropdown(
+            choices=[ep["name"] for ep in MCP_ENDPOINTS],
+            label="Select Endpoint",
+            value=None,
+            scale=3
+        )
+        check_single_btn = gr.Button("Check", scale=1)
+
+    single_result = gr.Markdown(value="")
+
+    # Event handlers
+    def check_all_handler():
+        return get_all_endpoints_health(url)
+
+    def check_single_handler(endpoint_name: str) -> str:
+        if not endpoint_name:
+            return "Please select an endpoint."
+        health = check_endpoint_health(endpoint_name, url)
+        return f"**{endpoint_name}**: {health['status']} ({health['latency_ms']}ms) - {health['error'] or 'OK'}"
+
+    check_all_btn.click(check_all_handler, outputs=[health_display])
+    check_single_btn.click(check_single_handler, [endpoint_dropdown], [single_result])
+
+    return health_display

ui/quick_build.py

@@ -0,0 +1,112 @@
+# Path: QAgents-workflows/ui/quick_build.py
+# Relations: Uses client/mcp_client.py for circuit generation
+#            Used by __init__.py, app.py
+# Description: Quick circuit builder UI components
+"""
+Quick Build Components: Fast circuit generation from templates.
+
+Provides:
+- Template selection dropdown
+- Qubit count slider
+- Circuit generation via MCP client
+"""
+
+import os
+import gradio as gr
+import logging
+from typing import Optional
+
+logger = logging.getLogger(__name__)
+
+# Default MCP Server URL
+MCP_SERVER_URL = os.environ.get(
+    "MCP_SERVER_URL",
+    "https://mcp-1st-birthday-quantumarchitect-mcp.hf.space"
+)
+
+# Available templates
+CIRCUIT_TEMPLATES = [
+    "bell_state",
+    "ghz_state", 
+    "qft",
+    "grover",
+    "superposition",
+]
+
+
+def quick_build_circuit(template: str, num_qubits: int, server_url: Optional[str] = None) -> str:
+    """
+    Generate a circuit from template using MCP client.
+    
+    Args:
+        template: Template name (bell_state, ghz_state, etc.)
+        num_qubits: Number of qubits
+        server_url: MCP server URL (uses default if not provided)
+        
+    Returns:
+        QASM code or error message
+    """
+    url = server_url or MCP_SERVER_URL
+    try:
+        from client.mcp_client import get_client
+        mcp_client = get_client(url)
+        result = mcp_client.create_circuit_from_template(template, int(num_qubits))
+
+        if result.success and result.data:
+            if isinstance(result.data, dict) and 'qasm' in result.data:
+                return result.data['qasm']
+            return str(result.data)
+        return f"# Error: {result.error or 'Unknown error'}"
+    except Exception as e:
+        logger.error(f"Quick build error: {e}")
+        return f"# Error: {str(e)}"
+
+
+def create_quick_build_tab(server_url: Optional[str] = None) -> gr.Code:
+    """
+    Create the Quick Build tab components.
+    
+    Args:
+        server_url: MCP server URL (uses default if not provided)
+        
+    Returns:
+        QASM output Code component
+    """
+    url = server_url or MCP_SERVER_URL
+    
+    gr.Markdown("""
+## 🛠️ Quick Circuit Builder
+
+Generate circuits directly from templates.
+    """)
+
+    with gr.Row():
+        with gr.Column():
+            template_select = gr.Dropdown(
+                choices=CIRCUIT_TEMPLATES,
+                value="bell_state",
+                label="Circuit Template"
+            )
+            qubits_slider = gr.Slider(
+                minimum=2,
+                maximum=8,
+                value=2,
+                step=1,
+                label="Number of Qubits"
+            )
+            build_btn = gr.Button("⚡ Generate Circuit", variant="primary")
+
+        with gr.Column():
+            qasm_output = gr.Code(
+                label="Generated QASM",
+                language="python",
+                lines=15
+            )
+
+    # Event handler
+    def build_handler(template: str, num_qubits: int) -> str:
+        return quick_build_circuit(template, num_qubits, url)
+
+    build_btn.click(build_handler, [template_select, qubits_slider], [qasm_output])
+
+    return qasm_output

ui/styles.py

@@ -0,0 +1,163 @@
+# Path: QAgents-workflows/ui/styles.py
+# Relations: Used by __init__.py, app.py
+# Description: Custom CSS styles for the Gradio app interface
+"""
+Styles Module: Custom CSS for QAgents Gradio interface.
+Provides consistent styling across all UI components.
+"""
+
+CUSTOM_CSS = """
+/* Main container styling */
+.gradio-container {
+    max-width: 1200px !important;
+    margin: auto !important;
+}
+
+/* Header styling */
+.app-header {
+    text-align: center;
+    padding: 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    color: white;
+}
+
+/* Chat container */
+.chat-container {
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 1rem;
+}
+
+/* Message styling */
+.user-message {
+    background-color: #e3f2fd;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+    margin: 0.25rem 0;
+}
+
+.bot-message {
+    background-color: #f5f5f5;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+    margin: 0.25rem 0;
+}
+
+/* Code blocks in chat */
+.code-block {
+    background-color: #1e1e1e;
+    color: #d4d4d4;
+    padding: 1rem;
+    border-radius: 5px;
+    font-family: 'Fira Code', 'Consolas', monospace;
+    overflow-x: auto;
+}
+
+/* Status indicators */
+.status-connected {
+    color: #4caf50;
+    font-weight: bold;
+}
+
+.status-disconnected {
+    color: #f44336;
+    font-weight: bold;
+}
+
+.status-partial {
+    color: #ff9800;
+    font-weight: bold;
+}
+
+/* Health check table */
+.health-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.health-table th, .health-table td {
+    padding: 0.5rem;
+    text-align: left;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+/* Button styling */
+.primary-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    color: white !important;
+}
+
+.primary-btn:hover {
+    opacity: 0.9;
+}
+
+/* Tab styling */
+.tab-nav {
+    border-bottom: 2px solid #667eea;
+}
+
+/* Circuit output box */
+.circuit-output {
+    font-family: 'Fira Code', 'Consolas', monospace;
+    background-color: #f8f9fa;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    padding: 1rem;
+}
+
+/* Loading indicator */
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(102, 126, 234, 0.3);
+    border-radius: 50%;
+    border-top-color: #667eea;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 0.5rem !important;
+    }
+    
+    .app-header h1 {
+        font-size: 1.5rem;
+    }
+}
+"""
+
+# Additional component-specific styles
+CHAT_STYLES = """
+.chatbot-container {
+    min-height: 400px;
+    max-height: 600px;
+}
+"""
+
+MCP_HEALTH_STYLES = """
+.endpoint-card {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 1rem;
+    margin: 0.5rem 0;
+}
+"""
+
+QUICK_BUILD_STYLES = """
+.template-selector {
+    margin-bottom: 1rem;
+}
+
+.qubit-slider {
+    margin: 1rem 0;
+}
+"""