feat: Implement Hackathon-Winning UI with 3D Viz and Agent Monitor

app.py

@@ -1,316 +1,509 @@
 """
-DebugGenie - Streamlined Flow Edition
-Intuitive, linear workflow: Input -> Analysis -> Solution.
+DebugGenie - Hackathon Edition 🏆
+Modern, Multi-Agent AI Debugging Assistant
 """
 import os
+import time
 import gradio as gr
-import asyncio
-from theme import debuggenie_theme
+import plotly.graph_objects as go
+import networkx as nx
 
-# Check if Modal URL is configured
+# --- CONFIGURATION ---
 MODAL_API_URL = os.environ.get("MODAL_API_URL")
 
-# --- CSS ARCHITECTURE (Streamlined) ---
-STREAMLINED_CSS = """
-/* 🌑 Base Styles */
+# --- CUSTOM CSS ---
+HACKATHON_CSS = """
+/* 🎨 Global Styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');
+
 body {
-    background-color: #09090b;
-    color: #f4f4f5;
+    font-family: 'Inter', sans-serif;
+    background-color: #f9fafb;
 }
 
-/* 🟦 Typography */
-h1, h2, h3, h4, h5, h6 {
-    font-family: 'Inter', sans-serif;
-    font-weight: 600;
-    letter-spacing: -0.02em;
+.dark body {
+    background-color: #0f172a;
 }
 
-.code-font {
-    font-family: 'JetBrains Mono', monospace;
+.gradio-container {
+    max-width: 1400px !important;
 }
 
-/* 🎛️ Components */
-.pro-card {
-    background-color: #18181b !important;
-    border: 1px solid #27272a !important;
-    border-radius: 12px !important;
-    padding: 24px !important;
-    transition: border-color 0.2s ease;
+/* 🦸 Hero Section */
+.hero-section {
+    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
+    padding: 3rem 2rem;
+    border-radius: 1rem;
+    color: white;
+    text-align: center;
+    margin-bottom: 2rem;
+    box-shadow: 0 10px 25px rgba(30, 64, 175, 0.2);
+    position: relative;
+    overflow: hidden;
 }
 
-.pro-card:hover {
-    border-color: #3f3f46 !important;
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(to right, #ffffff, #e0e7ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
-.input-area textarea {
-    background-color: #09090b !important;
-    border: 1px solid #27272a !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 16px !important;
-    padding: 16px !important;
-    border-radius: 12px !important;
+.hero-subtitle {
+    font-size: 1.25rem;
+    color: #e0e7ff;
+    margin-bottom: 2rem;
+    font-weight: 500;
 }
 
-.input-area textarea:focus {
-    border-color: #3b82f6 !important;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+.feature-badges {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    flex-wrap: wrap;
 }
 
-/* 🌊 Flow Containers */
-.flow-section {
-    margin-bottom: 40px;
-    max-width: 1000px;
-    margin-left: auto;
-    margin-right: auto;
+.badge {
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
+    padding: 0.5rem 1rem;
+    border-radius: 2rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    transition: transform 0.2s;
 }
 
-.step-number {
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    background-color: #27272a;
-    color: #a1a1aa;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 24px;
-    font-size: 12px;
-    margin-right: 8px;
-    font-weight: bold;
+.badge:hover {
+    transform: translateY(-2px);
+    background: rgba(255, 255, 255, 0.25);
 }
 
-/* 🏷️ Badges */
-.badge {
-    display: inline-flex;
+/* 📊 Stats Bar */
+.stats-container {
+    display: flex;
+    justify-content: center;
+    gap: 3rem;
+    margin-bottom: 2rem;
+    padding: 1rem;
+    background: white;
+    border-radius: 0.75rem;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+.dark .stats-container {
+    background: #1e293b;
+    border-color: #334155;
+}
+
+.stat-item {
+    display: flex;
     align-items: center;
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 12px;
+    gap: 0.5rem;
     font-weight: 600;
-    border: 1px solid transparent;
+    color: #4b5563;
+}
+
+.dark .stat-item {
+    color: #cbd5e1;
+}
+
+/* 🤖 Agent Activity Monitor */
+.agent-card {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    margin-bottom: 0.75rem;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
-.badge-success {
-    background-color: rgba(16, 185, 129, 0.1);
-    color: #34d399;
-    border-color: rgba(16, 185, 129, 0.2);
+.dark .agent-card {
+    background: #1e293b;
+    border-color: #334155;
 }
 
-.badge-warning {
-    background-color: rgba(245, 158, 11, 0.1);
-    color: #fbbf24;
-    border-color: rgba(245, 158, 11, 0.2);
+.agent-card:hover {
+    transform: translateX(4px);
+    border-color: #6366f1;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
 }
 
-/* Header Responsiveness */
-.header-container {
+.agent-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 12px;
-    margin-bottom: 40px;
-    padding-top: 20px;
+    font-size: 1.25rem;
+    background: #f3f4f6;
+}
+
+.dark .agent-avatar {
+    background: #334155;
+}
+
+.agent-info {
+    flex: 1;
+}
+
+.agent-name {
+    font-weight: 700;
+    font-size: 0.9rem;
+    color: #1f2937;
+    margin-bottom: 0.25rem;
+}
+
+.dark .agent-name {
+    color: #f3f4f6;
+}
+
+.agent-status {
+    font-size: 0.8rem;
+    color: #6b7280;
+}
+
+.dark .agent-status {
+    color: #9ca3af;
 }
 
-.logo-icon {
-    font-size: clamp(24px, 5vw, 32px);
+/* 🟢 Status Indicators */
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.status-dot.waiting { background-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }
+.status-dot.processing { background-color: #f59e0b; animation: pulse 1.5s infinite; }
+.status-dot.complete { background-color: #10b981; }
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
+    70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
+}
+
+/* 💡 Solution Cards */
+.solution-card {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-left: 4px solid #10b981;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+.dark .solution-card {
+    background: #1e293b;
+    border-color: #334155;
+    border-left-color: #10b981;
+}
+
+.rank-badge {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    display: inline-block;
+    margin-bottom: 0.75rem;
 }
 
-.logo-text h1 {
-    margin: 0;
-    font-size: clamp(20px, 4vw, 28px);
-    color: #f4f4f5;
+.confidence-bar-bg {
+    height: 6px;
+    background: #e5e7eb;
+    border-radius: 3px;
+    margin-top: 0.5rem;
+    overflow: hidden;
 }
 
-.logo-text p {
-    margin: 0;
-    font-size: clamp(14px, 2vw, 16px);
-    color: #a1a1aa;
+.dark .confidence-bar-bg {
+    background: #334155;
+}
+
+.confidence-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
+    border-radius: 3px;
+    transition: width 1s ease-out;
+}
+
+/* 📱 Mobile Tweaks */
+@media (max-width: 768px) {
+    .hero-title { font-size: 2rem; }
+    .stats-container { flex-direction: column; gap: 1rem; }
 }
 """
 
-def create_header():
-    """Create a centered, minimal header."""
-    return gr.Markdown("""
-    <div class="header-container">
-        <div class="logo-icon">🧞</div>
-        <div class="logo-text">
-            <h1>DebugGenie</h1>
-            <p>Enterprise Error Analysis</p>
+# --- HELPER FUNCTIONS ---
+
+def generate_agent_html(agent_name, status, message, progress):
+    """Generates HTML for a single agent card."""
+    
+    status_class = "waiting"
+    if status == "processing": status_class = "processing"
+    elif status == "complete": status_class = "complete"
+    
+    icon = "🤖"
+    if "Claude" in agent_name: icon = "🧠"
+    elif "Gemini" in agent_name: icon = "✨"
+    elif "GPT-4" in agent_name: icon = "⚡"
+    
+    return f"""
+    <div class="agent-card">
+        <div class="agent-avatar">{icon}</div>
+        <div class="agent-info">
+            <div class="agent-name">
+                {agent_name}
+                <span class="status-dot {status_class}" style="float: right;"></span>
+            </div>
+            <div class="agent-status">{message}</div>
+            <div class="confidence-bar-bg">
+                <div class="confidence-bar-fill" style="width: {progress}%;"></div>
+            </div>
         </div>
     </div>
-    """)
+    """
 
-def create_main_interface():
-    """Create the main interface with Streamlined Flow layout."""
-    
-    with gr.Blocks(
-        theme=debuggenie_theme,
-        title="DebugGenie Flow",
-        css=STREAMLINED_CSS
-    ) as demo:
+def create_3d_viz():
+    """Creates a 3D network graph using Plotly."""
+    G = nx.random_geometric_graph(20, 0.125)
+    edge_x = []
+    edge_y = []
+    edge_z = []
+    for edge in G.edges():
+        x0, y0 = G.nodes[edge[0]]['pos']
+        x1, y1 = G.nodes[edge[1]]['pos']
+        edge_x.append(x0)
+        edge_y.append(y0)
+        edge_z.append(0) # Flat for now, but 3D capable
+        edge_x.append(x1)
+        edge_y.append(y1)
+        edge_z.append(0)
+        edge_x.append(None)
+        edge_y.append(None)
+        edge_z.append(None)
+
+    edge_trace = go.Scatter3d(
+        x=edge_x, y=edge_y, z=edge_z,
+        line=dict(width=0.5, color='#888'),
+        hoverinfo='none',
+        mode='lines')
+
+    node_x = []
+    node_y = []
+    node_z = []
+    for node in G.nodes():
+        x, y = G.nodes[node]['pos']
+        node_x.append(x)
+        node_y.append(y)
+        node_z.append(0)
+
+    node_trace = go.Scatter3d(
+        x=node_x, y=node_y, z=node_z,
+        mode='markers',
+        hoverinfo='text',
+        marker=dict(
+            showscale=True,
+            colorscale='YlGnBu',
+            reversescale=True,
+            color=[],
+            size=10,
+            colorbar=dict(
+                thickness=15,
+                title='Node Connections',
+                xanchor='left',
+                titleside='right'
+            ),
+            line_width=2))
+
+    fig = go.Figure(data=[edge_trace, node_trace],
+                    layout=go.Layout(
+                        title='Error Dependency Graph',
+                        titlefont_size=16,
+                        showlegend=False,
+                        hovermode='closest',
+                        margin=dict(b=20,l=5,r=5,t=40),
+                        scene=dict(
+                            xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
+                            yaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
+                            zaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
+                        )
+                    ))
+    return fig
+
+# --- MAIN APP ---
+
+def create_app():
+    with gr.Blocks(css=HACKATHON_CSS, theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate")) as demo:
         
-        create_header()
+        # 1. HERO SECTION
+        with gr.Row(elem_classes="hero-section"):
+            gr.HTML("""
+            <div class="hero-content">
+                <h1 class="hero-title">DebugGenie 🧞</h1>
+                <p class="hero-subtitle">Multi-Agent AI Debugging Assistant</p>
+                <div class="feature-badges">
+                    <span class="badge">🤖 Powered by Claude • Gemini • GPT-4</span>
+                    <span class="badge">🎨 3D Visualization</span>
+                    <span class="badge">🔊 Voice Explanations</span>
+                </div>
+            </div>
+            """)
         
-        # Configuration Check
-        if not MODAL_API_URL:
-            with gr.Row():
-                with gr.Column(elem_classes=["pro-card", "flow-section"]):
-                    gr.Markdown("### ⚠️ Configuration Required")
-                    gr.Markdown("Please configure `MODAL_API_URL` in Space settings.")
-        else:
-            
-            # SECTION 1: THE ASK (Input)
-            with gr.Column(elem_classes=["flow-section"]):
-                gr.Markdown("### <span class='step-number'>1</span> Describe the Problem")
-                
-                error_input = gr.Textbox(
-                    label="Error Trace",
-                    placeholder="Paste your stack trace, error message, or describe the bug...",
-                    lines=6,
-                    max_lines=15,
-                    elem_classes=["input-area"],
-                    show_label=False
-                )
-                
-                with gr.Accordion("Add Context (Screenshot / Files)", open=False):
-                    with gr.Row():
-                        screenshot_input = gr.Image(label="Screenshot", type="pil", height=150)
-                        files_input = gr.File(label="Source Files", file_count="multiple", height=100)
-                
-                analyze_btn = gr.Button(
-                    "Start Analysis",
-                    variant="primary",
-                    size="lg"
-                )
+        # 2. STATS BAR
+        with gr.Row(elem_classes="stats-container"):
+            gr.HTML("""
+            <div class="stat-item">🤖 3 AI Agents Active</div>
+            <div class="stat-item">🔧 5 MCP Tools Connected</div>
+            <div class="stat-item">⚡ Real-time Analysis Ready</div>
+            """)
 
-            # SECTION 2: THE THINKING (Agent Activity)
-            # Initially hidden, revealed on click
-            with gr.Column(visible=False, elem_classes=["flow-section"]) as analysis_section:
-                gr.Markdown("### <span class='step-number'>2</span> Agent Analysis")
-                
-                with gr.Group(elem_classes=["pro-card"]):
-                    agent_status = gr.Chatbot(
-                        label="Agent Activity",
-                        type="messages",
-                        height=250,
-                        show_label=False,
-                        bubble_full_width=False,
-                        avatar_images=(None, "https://api.iconify.design/fluent-emoji:robot.svg")
+        # 3. MAIN LAYOUT (Two Columns)
+        with gr.Row():
+            
+            # LEFT COLUMN: INPUT (40%)
+            with gr.Column(scale=2):
+                with gr.Group():
+                    gr.Markdown("### 📝 Describe the Issue")
+                    error_input = gr.Code(
+                        label="Error Trace / Code Snippet",
+                        language="python",
+                        lines=10,
+                        elem_classes="input-code"
+                    )
+                    
+                    with gr.Accordion("📸 Add Context (Optional)", open=False):
+                        screenshot_input = gr.Image(label="Upload Screenshot", type="pil", height=200)
+                    
+                    analyze_btn = gr.Button(
+                        "🔍 Analyze Error", 
+                        variant="primary", 
+                        size="lg",
+                        elem_id="analyze-btn"
                     )
-                    status_bar = gr.Markdown("**Status:** Initializing...", elem_id="status-bar")
+                    
+                    with gr.Row():
+                        gr.Button("🎲 Try Example", size="sm", variant="secondary")
+                        gr.Button("🗑️ Clear", size="sm", variant="secondary")
 
-            # SECTION 3: THE ANSWER (Solutions)
-            # Initially hidden, revealed on completion
-            with gr.Column(visible=False, elem_classes=["flow-section"]) as results_section:
-                gr.Markdown("### <span class='step-number'>3</span> Recommended Solutions")
-                
-                root_cause_box = gr.Markdown(elem_classes=["pro-card"])
-                
-                gr.Markdown("#### Actionable Fixes", style="margin-top: 20px;")
-                with gr.Row():
-                    solution_1 = gr.Markdown(elem_classes=["pro-card"])
-                    solution_2 = gr.Markdown(elem_classes=["pro-card"])
-                
-                with gr.Row(style="margin-top: 30px; border-top: 1px solid #27272a; padding-top: 20px;"):
-                    export_btn = gr.Button("📄 Export Report", size="sm", variant="secondary")
-                    voice_btn = gr.Button("🔊 Listen to Briefing", size="sm", variant="secondary")
-                    audio_output = gr.Audio(visible=False, interactive=False)
-
-            # Event Handlers
-            def mock_analyze(error_text, screenshot, files, progress=gr.Progress()):
-                import time
+            # RIGHT COLUMN: RESULTS (60%)
+            with gr.Column(scale=3):
                 
-                # Reveal Analysis Section
-                yield (
-                    gr.update(visible=True), # Show Analysis Section
-                    gr.update(visible=False), # Hide Results Section (reset)
-                    [], # Clear Chat
-                    "**Status:** Initializing...",
-                    gr.update(), gr.update(), gr.update()
+                # Agent Activity Monitor
+                gr.Markdown("### 📡 Agent Activity Monitor")
+                agent_monitor = gr.HTML(
+                    value=generate_agent_html("System", "waiting", "Ready to analyze...", 0) +
+                          generate_agent_html("Claude", "waiting", "Standby", 0) +
+                          generate_agent_html("Gemini", "waiting", "Standby", 0)
                 )
                 
-                messages = []
-                
-                # Step 1
-                progress(0.2, desc="Initializing...")
-                messages.append({"role": "assistant", "content": "🔄 **System:** Initializing multi-agent swarm..."})
-                yield (gr.update(), gr.update(), messages, "**Status:** Initializing...", gr.update(), gr.update(), gr.update())
-                time.sleep(0.8)
-                
-                # Step 2
-                progress(0.5, desc="Analyzing...")
-                messages.append({"role": "assistant", "content": "🤖 **Claude:** Analyzing stack trace structure..."})
-                messages.append({"role": "assistant", "content": "🧠 **Gemini:** Checking documentation..."})
-                yield (gr.update(), gr.update(), messages, "**Status:** Analyzing...", gr.update(), gr.update(), gr.update())
-                time.sleep(1.0)
-                
-                # Step 3
-                progress(0.8, desc="Synthesizing...")
-                messages.append({"role": "assistant", "content": "💡 **GPT-4:** Synthesizing optimal solutions..."})
-                yield (gr.update(), gr.update(), messages, "**Status:** Synthesizing...", gr.update(), gr.update(), gr.update())
-                time.sleep(0.8)
-                
-                # Results
-                root_cause = """
-                ### 🎯 Root Cause Identified
-                **Missing Dependency: `gradio`**
-                
-                The error `ModuleNotFoundError: No module named 'gradio'` indicates that the `gradio` package is not installed in your current Python environment.
-                """
-                
-                sol1 = """
-                #### ✅ Solution 1: Install Package
-                
-                Run the following command:
-                ```bash
-                pip install gradio
-                ```
-                <span class="badge badge-success">High Confidence</span>
-                """
-                
-                sol2 = """
-                #### 🔄 Solution 2: Check Environment
-                
-                Ensure you are in the correct virtualenv:
-                ```bash
-                source venv/bin/activate
-                ```
-                <span class="badge badge-warning">Medium Confidence</span>
-                """
-                
-                messages.append({"role": "assistant", "content": "✅ **System:** Analysis complete."})
-                
-                # Reveal Results Section
-                yield (
-                    gr.update(), 
-                    gr.update(visible=True), # Show Results
-                    messages, 
-                    "**Status:** Complete", 
-                    root_cause, 
-                    sol1, 
-                    sol2
-                )
+                # Results Tabs
+                with gr.Tabs(visible=False) as results_tabs:
+                    
+                    # Tab 1: Solutions
+                    with gr.Tab("🎯 Solutions"):
+                        solutions_display = gr.HTML()
+                        
+                    # Tab 2: 3D Viz
+                    with gr.Tab("🎨 3D Visualization"):
+                        viz_plot = gr.Plot(label="Error Graph")
+                        
+                    # Tab 3: Raw Logs
+                    with gr.Tab("📜 Agent Logs"):
+                        chatbot = gr.Chatbot(label="Conversation", height=400, type="messages")
 
-            analyze_btn.click(
-                fn=mock_analyze,
-                inputs=[error_input, screenshot_input, files_input],
-                outputs=[
-                    analysis_section, 
-                    results_section, 
-                    agent_status, 
-                    status_bar, 
-                    root_cause_box, 
-                    solution_1, 
-                    solution_2
+                # Voice Player (Bottom)
+                with gr.Group(visible=False) as voice_player:
+                    gr.Markdown("### 🔊 Audio Briefing")
+                    audio_out = gr.Audio(interactive=False)
+
+        # --- LOGIC ---
+        def analyze_error(error_code, img):
+            # 1. Initial State
+            yield {
+                agent_monitor: generate_agent_html("System", "processing", "Initializing swarm...", 10) +
+                               generate_agent_html("Claude", "waiting", "Queued", 0) +
+                               generate_agent_html("Gemini", "waiting", "Queued", 0),
+                results_tabs: gr.update(visible=True),
+                voice_player: gr.update(visible=False)
+            }
+            time.sleep(1)
+            
+            # 2. Claude Analysis
+            yield {
+                agent_monitor: generate_agent_html("System", "complete", "Swarm Active", 100) +
+                               generate_agent_html("Claude", "processing", "Analyzing syntax tree...", 45) +
+                               generate_agent_html("Gemini", "waiting", "Queued", 0)
+            }
+            time.sleep(1.5)
+            
+            # 3. Gemini Analysis
+            yield {
+                agent_monitor: generate_agent_html("System", "complete", "Swarm Active", 100) +
+                               generate_agent_html("Claude", "complete", "Analysis complete", 100) +
+                               generate_agent_html("Gemini", "processing", "Checking documentation...", 60)
+            }
+            time.sleep(1.5)
+            
+            # 4. Finalizing
+            yield {
+                agent_monitor: generate_agent_html("System", "complete", "Swarm Active", 100) +
+                               generate_agent_html("Claude", "complete", "Analysis complete", 100) +
+                               generate_agent_html("Gemini", "complete", "Solutions found", 100)
+            }
+            
+            # 5. Show Results
+            solution_html = """
+            <div class="solution-card">
+                <div class="rank-badge">🥇 Top Recommendation</div>
+                <h3>Install Missing Dependency</h3>
+                <p>The error <code>ModuleNotFoundError</code> indicates that <code>gradio</code> is not installed.</p>
+                <div class="confidence-bar-bg"><div class="confidence-bar-fill" style="width: 98%;"></div></div>
+                <pre style="background: #f3f4f6; padding: 10px; border-radius: 5px; margin-top: 10px;">pip install gradio</pre>
+            </div>
+            
+            <div class="solution-card" style="border-left-color: #f59e0b;">
+                <div class="rank-badge" style="background: #f59e0b;">🥈 Alternative</div>
+                <h3>Check Virtual Environment</h3>
+                <p>Ensure you are running in the correct venv.</p>
+                <div class="confidence-bar-bg"><div class="confidence-bar-fill" style="width: 75%; background: #f59e0b;"></div></div>
+            </div>
+            """
+            
+            fig = create_3d_viz()
+            
+            yield {
+                solutions_display: solution_html,
+                viz_plot: fig,
+                voice_player: gr.update(visible=True),
+                chatbot: [
+                    {"role": "user", "content": "Analyze this error."},
+                    {"role": "assistant", "content": "I've analyzed the stack trace. The root cause is a missing library."}
                 ]
-            )
+            }
+
+        analyze_btn.click(
+            analyze_error,
+            inputs=[error_input, screenshot_input],
+            outputs=[agent_monitor, results_tabs, voice_player, solutions_display, viz_plot, chatbot]
+        )
 
     return demo
 
 if __name__ == "__main__":
-    demo = create_main_interface()
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False
-    )
+    demo = create_app()
+    demo.launch(server_name="0.0.0.0", server_port=7860)