app.py

"""
DebugGenie - Hackathon Edition 🏆
Modern, Multi-Agent AI Debugging Assistant
"""
import os
import time
import gradio as gr
import plotly.graph_objects as go
import networkx as nx

# --- CONFIGURATION ---
MODAL_API_URL = os.environ.get("MODAL_API_URL")

# --- CUSTOM CSS (Moved to launch() in Gradio 6) ---
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');

.gradio-container {
    max-width: 1400px !important;
}

/* 🦸 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);
}

.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;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #e0e7ff;
    margin-bottom: 2rem;
    font-weight: 500;
}

.feature-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.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;
}

.badge:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.25);
}

/* 📊 Stats Bar */
.stats-container {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.stat-item {
    font-weight: 600;
    color: #4b5563;
}

/* 🤖 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;
}

.agent-card:hover {
    transform: translateX(4px);
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: #f3f4f6;
}

.agent-info {
    flex: 1;
}

.agent-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.agent-status {
    font-size: 0.8rem;
    color: #6b7280;
}

/* 🟢 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);
}

.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;
}

.confidence-bar-bg {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.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; }
}
"""

# --- 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_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.extend([x0, x1, None])
        edge_y.extend([y0, y1, None])
        edge_z.extend([0, 0, 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():
    # Create Blocks with theme and css (they should be here in Gradio 6)
    with gr.Blocks(
        title="DebugGenie 🧞",
        theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
        css=HACKATHON_CSS
    ) as demo:
        
        # 1. HERO SECTION
        with gr.Row():
            gr.HTML("""
            <div class="hero-section">
                <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>
            """)
        
        # 2. STATS BAR
        gr.HTML("""
        <div class="stats-container">
            <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>
        </div>
        """)

        # 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
                    )
                    
                    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"
                    )
                    
                    with gr.Row():
                        example_btn = gr.Button("🎲 Try Example", size="sm", variant="secondary")
                        clear_btn = gr.Button("🗑️ Clear", size="sm", variant="secondary")

            # RIGHT COLUMN: RESULTS (60%)
            with gr.Column(scale=3):
                
                # 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)
                )
                
                # Results Tabs
                results_tabs = gr.Tabs(visible=False)
                with 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"
                        )

                # Voice Player (Bottom)
                voice_player = gr.Group(visible=False)
                with 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."}
                ]
            }
        
        def clear_inputs():
            return "", None
        
        def load_example():
            return """Traceback (most recent call last):
  File "app.py", line 10, in <module>
    import gradio as gr
ModuleNotFoundError: No module named 'gradio'""", None

        # Event handlers
        analyze_btn.click(
            analyze_error,
            inputs=[error_input, screenshot_input],
            outputs=[agent_monitor, results_tabs, voice_player, solutions_display, viz_plot, chatbot]
        )
        
        clear_btn.click(
            clear_inputs,
            outputs=[error_input, screenshot_input]
        )
        
        example_btn.click(
            load_example,
            outputs=[error_input, screenshot_input]
        )

    return demo

if __name__ == "__main__":
    demo = create_app()
    
    # Simple launch without theme/css (already in Blocks constructor)
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860
    )