update the app.py file

app.py

@@ -1336,178 +1336,226 @@ with gr.Blocks(
         font=("Inter", "system-ui", "sans-serif")
     ),
     css="""
-    /* Global improvements */
-    .gradio-container {
+    /* Global dark theme with simpler, basic colors */
+    body, .gradio-container {
         font-family: 'Inter', system-ui, -apple-system, sans-serif;
+        background: #020617;
+        color: #e5e7eb;
     }
-    
+
+    /* Remove default card backgrounds so our custom sections stand out */
+    .gradio-container .block {
+        background: transparent;
+    }
+
     /* Header styling */
     .header-section {
-        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
-        padding: 32px 24px;
-        border-radius: 16px;
+        background: #020617;
+        padding: 28px 24px;
+        border-radius: 18px;
         margin-bottom: 24px;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-        border: 1px solid rgba(148, 163, 184, 0.1);
+        box-shadow: 0 18px 60px rgba(15, 23, 42, 0.9);
+        border: 1px solid rgba(148, 163, 184, 0.25);
     }
-    
+
     .header-section h1 {
-        background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        font-size: 2.5rem;
+        color: #e5e7eb;
+        font-size: 2.4rem;
         font-weight: 700;
-        margin-bottom: 12px;
+        margin-bottom: 8px;
+        letter-spacing: 0.02em;
     }
-    
-    /* Input fields styling */
+
+    .header-section p {
+        color: #cbd5f5;
+        font-size: 0.98rem;
+        max-width: 720px;
+    }
+
+    /* Input fields strip */
     .input-container {
-        background: rgba(255, 255, 255, 0.05);
-        padding: 20px;
-        border-radius: 12px;
-        border: 1px solid rgba(148, 163, 184, 0.2);
-        backdrop-filter: blur(10px);
+        background: #020617;
+        padding: 18px 20px 22px 20px;
+        border-radius: 14px;
+        border: 1px solid rgba(148, 163, 184, 0.35);
+        backdrop-filter: blur(18px);
+        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.9);
+        margin-bottom: 18px;
     }
-    
-    /* Stat cards with better gradients */
+
+    /* Tenant / role cards */
+    .tenant-card,
+    .role-card {
+        background: #020617;
+        border-radius: 14px;
+        padding: 16px 16px 14px 16px;
+        border: 1px solid rgba(148, 163, 184, 0.6);
+        box-shadow: 0 8px 26px rgba(15, 23, 42, 0.9);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+    }
+
+    .tenant-card:hover,
+    .role-card:hover {
+        border-color: #38bdf8;
+        box-shadow: 0 12px 36px rgba(56, 189, 248, 0.35);
+        transform: translateY(-1px);
+    }
+
+    .field-label-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        border-radius: 999px;
+        background: #0f172a;
+        color: #e5e7eb;
+        font-size: 0.8rem;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        border: 1px solid #38bdf8;
+    }
+
+    .field-label-pill span.icon {
+        font-size: 1rem;
+    }
+
+    .field-label-subtitle {
+        margin-top: 8px;
+        color: #9ca3af;
+        font-size: 0.8rem;
+    }
+
+    /* Left/right columns in Chat tab */
+    .chat-row > .col:nth-child(1) {
+        min-width: 0;
+    }
+
+    /* Stat cards */
     .stat-card {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 24px;
+        background: #020617;
+        padding: 22px;
         border-radius: 16px;
         color: white;
-        text-align: center;
-        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        text-align: left;
+        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.9);
+        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+        border: 1px solid rgba(248, 250, 252, 0.25);
     }
     .stat-card:hover {
-        transform: translateY(-4px) scale(1.02);
-        box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
+        transform: translateY(-3px) scale(1.01);
+        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.95);
+        border-color: #38bdf8;
     }
     .stat-card h3 {
-        margin: 0 0 12px 0;
-        font-size: 14px;
-        opacity: 0.95;
-        font-weight: 500;
-        letter-spacing: 0.5px;
+        margin: 0 0 6px 0;
+        font-size: 0.78rem;
+        opacity: 0.9;
+        font-weight: 600;
+        letter-spacing: 0.16em;
         text-transform: uppercase;
     }
     .stat-card strong {
-        font-size: 32px;
+        font-size: 1.8rem;
         font-weight: 700;
         display: block;
         margin-top: 8px;
     }
-    
-    /* Enhanced summary box */
+
+    /* Summary / debug panel */
     .summary-box {
-        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
-        padding: 28px;
-        border-radius: 16px;
-        border: 1px solid rgba(148, 163, 184, 0.2);
-        max-height: 500px;
+        background: #020617;
+        padding: 24px;
+        border-radius: 18px;
+        border: 1px solid rgba(148, 163, 184, 0.7);
+        max-height: 520px;
         overflow-y: auto;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-        color: #f1f5f9;
-        backdrop-filter: blur(10px);
+        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.95);
+        color: #e5e7eb;
+        backdrop-filter: blur(18px);
+        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
     }
     .summary-box::-webkit-scrollbar {
         width: 8px;
     }
     .summary-box::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: 4px;
+        background: rgba(15, 23, 42, 1);
+        border-radius: 999px;
     }
     .summary-box::-webkit-scrollbar-thumb {
-        background: rgba(148, 163, 184, 0.3);
-        border-radius: 4px;
+        background: rgba(148, 163, 184, 0.7);
+        border-radius: 999px;
     }
-    .summary-box::-webkit-scrollbar-thumb:hover {
-        background: rgba(148, 163, 184, 0.5);
+
+    .summary-box:hover {
+        border-color: #38bdf8;
+        box-shadow: 0 22px 60px rgba(15, 23, 42, 1);
+        transform: translateY(-1px);
     }
     .summary-box h3, .summary-box h4 {
         margin-top: 0;
-        margin-bottom: 16px;
-        color: #ffffff;
-        font-weight: 600;
-    }
-    .summary-box h4 {
-        color: #e2e8f0;
-        font-size: 16px;
-        margin-top: 24px;
         margin-bottom: 12px;
+        color: #f9fafb;
+        font-weight: 600;
     }
-    .summary-box p {
-        color: #f1f5f9;
-        margin: 10px 0;
-        line-height: 1.7;
-    }
-    .summary-box ul {
-        margin: 12px 0;
-        padding-left: 28px;
-        color: #f1f5f9;
-    }
+    .summary-box p,
     .summary-box li {
-        margin: 10px 0;
-        color: #f1f5f9;
+        color: #e5e7eb;
+        margin: 8px 0;
         line-height: 1.7;
     }
     .summary-box code {
-        background-color: rgba(0, 0, 0, 0.4);
-        color: #00ff88;
-        padding: 3px 8px;
+        background-color: rgba(15, 23, 42, 0.9);
+        color: #22c55e;
+        padding: 3px 7px;
         border-radius: 6px;
         font-family: 'Fira Code', 'Courier New', monospace;
-        font-size: 13px;
-        border: 1px solid rgba(148, 163, 184, 0.2);
+        font-size: 0.78rem;
+        border: 1px solid rgba(148, 163, 184, 0.45);
     }
-    .summary-box hr {
-        border: none;
-        border-top: 1px solid rgba(148, 163, 184, 0.2);
-        margin: 20px 0;
-    }
-    .summary-box strong {
-        color: #ffffff;
-        font-weight: 600;
-    }
-    
-    /* Chart titles */
+
+    /* Chart titles / section headings */
     .chart-title {
-        margin-bottom: 12px;
+        margin-bottom: 8px;
         margin-top: 0;
         font-weight: 600;
-        color: #1e293b;
+        color: #e5e7eb;
         text-align: center;
-        font-size: 18px;
+        font-size: 1rem;
     }
-    
-    /* Button enhancements */
+
+    /* Primary buttons */
     button.primary {
-        background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+        background: #0ea5e9;
         border: none;
-        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
-        transition: all 0.3s ease;
+        box-shadow: 0 8px 26px rgba(15, 23, 42, 0.9);
+        transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
+        border-radius: 999px;
+        font-weight: 600;
     }
     button.primary:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(6, 182, 212, 0.4);
+        transform: translateY(-1px);
+        filter: brightness(1.08);
+        box-shadow: 0 12px 32px rgba(15, 23, 42, 1);
     }
-    
-    /* Tab styling */
+
+    /* Tabs */
     .tab-nav {
-        border-bottom: 2px solid rgba(148, 163, 184, 0.1);
+        border-bottom: 1px solid rgba(148, 163, 184, 0.35);
     }
-    
-    /* Role badge styling */
+
+    /* Role badges */
     .role-badge {
         display: inline-block;
-        padding: 6px 12px;
-        border-radius: 20px;
-        font-size: 12px;
+        padding: 5px 11px;
+        border-radius: 999px;
+        font-size: 0.7rem;
         font-weight: 600;
         text-transform: uppercase;
-        letter-spacing: 0.5px;
+        letter-spacing: 0.1em;
     }
     .role-viewer {
         background: linear-gradient(135deg, #64748b 0%, #475569 100%);
@@ -1525,32 +1573,77 @@ with gr.Blocks(
         background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
         color: white;
     }
-    
-    /* Improved input styling */
+
+    /* Inputs */
     input[type="text"], textarea, select {
         border-radius: 10px !important;
-        border: 2px solid rgba(148, 163, 184, 0.2) !important;
-        transition: all 0.3s ease !important;
+        border: 1px solid rgba(148, 163, 184, 0.5) !important;
+        background: rgba(15, 23, 42, 0.92) !important;
+        color: #e5e7eb !important;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
+    }
+    input[type="text"]::placeholder,
+    textarea::placeholder {
+        color: rgba(148, 163, 184, 0.65) !important;
     }
     input[type="text"]:focus, textarea:focus, select:focus {
         border-color: #06b6d4 !important;
-        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1) !important;
+        box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.65) !important;
+        background: rgba(15, 23, 42, 1) !important;
     }
-    
-    /* Card styling for sections */
+
+    /* Generic section card */
     .section-card {
-        background: rgba(255, 255, 255, 0.02);
-        padding: 24px;
+        background: #020617;
+        padding: 22px;
         border-radius: 16px;
-        border: 1px solid rgba(148, 163, 184, 0.1);
-        margin-bottom: 20px;
-        backdrop-filter: blur(10px);
+        border: 1px solid rgba(148, 163, 184, 0.4);
+        margin-bottom: 18px;
+        backdrop-filter: blur(14px);
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.95);
+        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
     }
-    
-    /* Chatbot styling */
+
+    .section-card:hover {
+        border-color: #38bdf8;
+        box-shadow: 0 18px 52px rgba(15, 23, 42, 1);
+        transform: translateY(-1px);
+    }
+
+    /* Chatbot + message bubbles */
     .chatbot {
-        border-radius: 12px !important;
-        border: 1px solid rgba(148, 163, 184, 0.2) !important;
+        border-radius: 18px !important;
+        border: 1px solid rgba(148, 163, 184, 0.7) !important;
+        background: #020617 !important;
+        box-shadow: 0 18px 60px rgba(15, 23, 42, 1);
+    }
+
+    .chatbot .message {
+        border-radius: 16px;
+        padding: 10px 14px;
+        font-size: 0.95rem;
+        line-height: 1.6;
+        max-width: 80%;
+    }
+
+    .chatbot .message.user {
+        margin-left: auto;
+        background: #0ea5e9;
+        color: #0b1020;
+        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.9);
+    }
+
+    .chatbot .message.bot {
+        margin-right: auto;
+        background: #020617;
+        border: 1px solid rgba(148, 163, 184, 0.8);
+        color: #e5e7eb;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 1);
+    }
+
+    .chatbot .message.error {
+        background: linear-gradient(135deg, rgba(239, 68, 68, 0.16) 0%, rgba(127, 29, 29, 0.9) 100%);
+        border: 1px solid rgba(248, 113, 113, 0.9);
     }
     """
 ) as demo:
@@ -1576,22 +1669,46 @@ with gr.Blocks(
         )
     
     with gr.Row(elem_classes=["input-container"]):
-        tenant_id_input = gr.Textbox(
-            label="🏢 Tenant ID",
-            placeholder="Enter your tenant ID (e.g., tenant123)",
-            value="",
-            interactive=True,
-            scale=2,
-            info="Required for all operations"
-        )
-        role_input = gr.Dropdown(
-            label="👤 User Role",
-            choices=VALID_ROLES,
-            value=DEFAULT_ROLE,
-            interactive=True,
-            scale=1,
-            info="Select your role to access appropriate features"
-        )
+        with gr.Column(scale=2, elem_classes=["tenant-card"]):
+            gr.Markdown(
+                """
+                <div class="field-label-pill">
+                    <span class="icon">🏢</span>
+                    <span>Tenant ID</span>
+                </div>
+                <div class="field-label-subtitle">
+                    Required for all operations. Use a unique ID per customer / environment.
+                </div>
+                """
+            )
+            tenant_id_input = gr.Textbox(
+                label="",
+                placeholder="Enter your tenant ID (e.g., tenant123)",
+                value="",
+                interactive=True,
+                scale=2,
+                show_label=False,
+            )
+        with gr.Column(scale=1, elem_classes=["role-card"]):
+            gr.Markdown(
+                """
+                <div class="field-label-pill">
+                    <span class="icon">👤</span>
+                    <span>User Role</span>
+                </div>
+                <div class="field-label-subtitle">
+                    Select your role to automatically unlock the right capabilities.
+                </div>
+                """
+            )
+            role_input = gr.Dropdown(
+                label="",
+                choices=VALID_ROLES,
+                value=DEFAULT_ROLE,
+                interactive=True,
+                scale=1,
+                show_label=False,
+            )
     
     with gr.Tabs():
         with gr.Tab("Chat"):
@@ -1614,45 +1731,45 @@ with gr.Blocks(
             chat_content = gr.Column(visible=True)
             
             with chat_content:
-                with gr.Row():
-                    with gr.Column(scale=2):
+                # Two-column layout: chat on the left, guidance panel on the right
+                with gr.Row(elem_classes=["chat-row"]):
+                    with gr.Column(scale=2, elem_classes=["section-card"]):
                         chatbot = gr.Chatbot(
-                        label="Chat with Agent",
-                        height=500,
-                        show_label=True,
-                        container=True,
-                        type="messages"
-                    )
-                    
-                    with gr.Row():
-                        message_input = gr.Textbox(
-                            label="Message",
-                            placeholder="Type your message here...",
-                            scale=4,
-                            show_label=False,
-                            container=False
+                            label="Chat with Agent",
+                            height=500,
+                            show_label=True,
+                            container=True,
+                            type="messages",
+                            elem_classes=["chatbot"]
                         )
-                        send_button = gr.Button("Send", variant="primary", scale=1)
+                        
+                        with gr.Row():
+                            message_input = gr.Textbox(
+                                label="Message",
+                                placeholder="Type your message here...",
+                                scale=4,
+                                show_label=False,
+                                container=False
+                            )
+                            send_button = gr.Button("Send", variant="primary", scale=1)
                 
-                    with gr.Column(scale=1):
+                    with gr.Column(scale=1, elem_classes=["summary-box"]):
                         gr.Markdown(
                             """
-                            <div style="background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); padding: 20px; border-radius: 12px; border: 1px solid rgba(6, 182, 212, 0.2);">
                             ### 📝 Chat Instructions
-                            1. Enter your **Tenant ID** and **Role** above
-                            2. Ask a question or give a task to the agent
+                            1. Enter your **Tenant ID** and **Role** above  
+                            2. Ask a question or give a task to the agent  
                             3. The MCP agent will automatically select tools (RAG, Web, etc.)
                             
                             ### ⚡ Features
-                            - ✨ Real-time streaming responses
-                            - 🧠 Multi-step planning & reasoning
-                            - 🔍 Automatic tool selection with latency prediction
-                            - 🧠 Context-aware routing (intelligent tool skipping)
-                            - 💾 Conversation memory
-                            - 📊 Reasoning visualization (see Debug tab)
-                            - ⚡ Per-tool latency estimates (RAG: 60-120ms, Web: 400-1800ms)
+                            - ✨ Real-time streaming responses  
+                            - 🧠 Multi-step planning & reasoning  
+                            - 🔍 Automatic tool selection with latency prediction  
+                            - 🧠 Context-aware routing (intelligent tool skipping)  
+                            - 💾 Conversation memory  
+                            - 📊 Reasoning visualization (see Debug tab)  
+                            - ⚡ Per-tool latency estimates (RAG: 60-120ms, Web: 400-1800ms)  
                             - 📋 Schema-validated tool outputs
-                            </div>
                             """
                         )
                         

backend/api/services/agent_orchestrator.py

@@ -386,11 +386,11 @@ Response:"""
 
         # 3) Tool selection (hybrid) - pass RAG results, memory, and admin violations in context
         # Get recent memory for context-aware routing
-        from backend.mcp_server.common.memory import get_recent_memory
+        from backend.mcp_server.common.memory import get_recent
         session_id = req.conversation_history[-1].get("session_id") if req.conversation_history else None
         recent_memory = []
         if session_id:
-            recent_memory = get_recent_memory(session_id)
+            recent_memory = get_recent(session_id)
         
         # Get admin violations if any
         admin_violations = []

backend/tests/README_RETRY_TESTS.md

@@ -263,3 +263,4 @@ For more information, see `TESTING_GUIDE.md` in the project root.
 
 
 
+