feat: Implement Cyber-Glass UI with Bento Grid and Neon effects

app.py

@@ -1,5 +1,5 @@
 """
-DebugGenie - Modern Gradio 6 UI
+DebugGenie - Cyber-Glass UI Edition
 Redesigned for MCP 1st Birthday Hackathon
 """
 import os
@@ -10,336 +10,415 @@ from theme import debuggenie_theme
 # Check if Modal URL is configured
 MODAL_API_URL = os.environ.get("MODAL_API_URL")
 
+# --- CSS ARCHITECTURE ---
+CYBER_GLASS_CSS = """
+/* 🌌 Background Animation */
+@keyframes gradient-animation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+body {
+    background: linear-gradient(-45deg, #020617, #0f172a, #1e1b4b, #0f172a);
+    background-size: 400% 400%;
+    animation: gradient-animation 15s ease infinite;
+    color: #f8fafc;
+}
+
+/* 🪟 Glassmorphism Base Class */
+.glass-panel {
+    background: rgba(30, 41, 59, 0.4) !important;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    border-radius: 16px !important;
+}
+
+/* ⚡ Neon Accents */
+.neon-border {
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    box-shadow: 0 0 10px rgba(99, 102, 241, 0.1);
+    transition: all 0.3s ease;
+}
+
+.neon-border:hover {
+    border-color: #6366f1;
+    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
+}
+
+/* 🍱 Bento Grid Layout Components */
+
+/* Header */
+.header-glass {
+    background: rgba(15, 23, 42, 0.6);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 0 0 20px 20px;
+}
+
+/* Agent Command Deck (Right Panel) */
+.agent-deck {
+    background: rgba(15, 23, 42, 0.5) !important;
+    border-left: 2px solid #6366f1;
+}
+
+/* Solution Cards */
+.solution-card-glass {
+    background: rgba(30, 41, 59, 0.4);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 20px;
+    transition: all 0.3s ease;
+    height: 100%;
+}
+
+.solution-card-glass:hover {
+    transform: translateY(-5px);
+    background: rgba(30, 41, 59, 0.6);
+    border-color: #8b5cf6;
+    box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.3);
+}
+
+/* Confidence Badges */
+.badge-high {
+    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-weight: 600;
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
+}
+
+.badge-med {
+    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-weight: 600;
+}
+
+.badge-low {
+    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-weight: 600;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(15, 23, 42, 0.5); 
+}
+
+::-webkit-scrollbar-thumb {
+    background: #475569; 
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6366f1; 
+}
+
+/* Typewriter Effect for Logs */
+.typewriter {
+    font-family: 'JetBrains Mono', monospace;
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 2px solid #6366f1;
+    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+}
+
+/* Pulse Animation for Active Agents */
+@keyframes pulse-glow {
+    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
+    70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
+}
+
+.agent-active {
+    animation: pulse-glow 2s infinite;
+    border-color: #6366f1 !important;
+}
+"""
+
 def create_hero_section():
     """Create the hero/header section with branding."""
     return gr.Markdown("""
-# 🧞 DebugGenie
-### AI-Powered Multi-Agent Debugging Assistant
-*Enterprise-grade error analysis powered by Claude, Gemini, and GPT-4*
-
-<div style="background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); 
-            height: 4px; border-radius: 2px; margin: 20px 0;"></div>
-""")
+    <div style="text-align: center; margin-bottom: 20px;">
+        <h1 style="font-size: 3.5rem; background: linear-gradient(to right, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0;">
+            🧞 DebugGenie
+        </h1>
+        <p style="font-size: 1.2rem; color: #94a3b8; margin-top: 10px;">
+            <span style="border: 1px solid #6366f1; padding: 4px 12px; border-radius: 20px; color: #818cf8; font-size: 0.9rem;">v2.0</span>
+            &nbsp; AI-Powered Multi-Agent Debugging Assistant
+        </p>
+    </div>
+    """)
 
 def create_main_interface():
-    """Create the main tabbed interface."""
+    """Create the main interface with Bento Grid layout."""
     
     with gr.Blocks(
         theme=debuggenie_theme,
-        title="DebugGenie - AI Debugging Assistant",
-        css="""
-        .gradio-container {
-            max-width: 1400px !important;
-        }
-        .agent-card {
-            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-            border-left: 4px solid #6366f1;
-            padding: 16px;
-            border-radius: 8px;
-            margin: 8px 0;
-        }
-        .solution-card {
-            border: 2px solid #475569;
-            border-radius: 12px;
-            padding: 20px;
-            background: #1e293b;
-            transition: all 0.3s ease;
-        }
-        .solution-card:hover {
-            border-color: #6366f1;
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
-        }
-        .confidence-badge {
-            display: inline-block;
-            padding: 6px 12px;
-            border-radius: 20px;
-            font-weight: bold;
-            font-size: 14px;
-        }
-        .high-confidence {
-            background: linear-gradient(90deg, #10b981 0%, #059669 100%);
-            color: white;
-        }
-        .medium-confidence {
-            background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
-            color: white;
-        }
-        .low-confidence {
-            background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%);
-            color: white;
-        }
-        """
+        title="DebugGenie - Cyber-Glass Edition",
+        css=CYBER_GLASS_CSS
     ) as demo:
         
-        # Hero Section
-        create_hero_section()
+        # 1. Header Section (Glass)
+        with gr.Row(elem_classes=["header-glass"]):
+            create_hero_section()
         
         # Configuration Check
         if not MODAL_API_URL:
-            gr.Markdown("""
-            ## ⚠️ Configuration Required
-            
-            This Space requires a `MODAL_API_URL` secret to be configured.
-            
-            ### Setup Instructions:
-            
-            1. **Deploy Modal Backend** (if not done already):
-               ```bash
-               modal deploy modal_app.py
-               ```
-               Copy the URL from the output.
-            
-            2. **Configure Secret**:
-               - Go to Settings → Repository secrets
-               - Add a new secret:
-                 - Name: `MODAL_API_URL`
-                 - Value: Your Modal endpoint URL
-            
-            3. **Restart this Space** (it will restart automatically after adding the secret)
-            
-            For more details, see the [DEPLOY.md](DEPLOY.md) file.
-            """)
+            with gr.Row():
+                with gr.Column(elem_classes=["glass-panel", "neon-border"]):
+                    gr.Markdown("""
+                    ## ⚠️ Configuration Required
+                    
+                    This Space requires a `MODAL_API_URL` secret to be configured.
+                    
+                    ### Setup Instructions:
+                    
+                    1. **Deploy Modal Backend** (if not done already):
+                       ```bash
+                       modal deploy modal_app.py
+                       ```
+                       Copy the URL from the output.
+                    
+                    2. **Configure Secret**:
+                       - Go to Settings → Repository secrets
+                       - Add a new secret:
+                         - Name: `MODAL_API_URL`
+                         - Value: Your Modal endpoint URL
+                    
+                    3. **Restart this Space** (it will restart automatically after adding the secret)
+                    """)
         else:
-            # Main content - only show if configured
+            # Main Bento Grid Layout
             with gr.Tabs() as tabs:
-                # TAB 1: ANALYZE
-                with gr.Tab("📝 Analyze", id=0):
+                
+                # TAB 1: COMMAND CENTER (Main Analysis)
+                with gr.Tab("🚀 Command Center", id=0):
+                    
+                    # Top Row: Input & Live Feed
                     with gr.Row():
-                        # LEFT COLUMN: Input Panel
-                        with gr.Column(scale=2):
+                        
+                        # LEFT: Input Control Panel (Glass)
+                        with gr.Column(scale=2, elem_classes=["glass-panel"]):
                             gr.Markdown("### 📥 Error Input")
                             
                             error_input = gr.Textbox(
                                 label="Error Message / Stack Trace",
-                                placeholder="Paste your error message, stack trace, or describe the bug...",
+                                placeholder="Paste your error message here...",
                                 lines=8,
-                                max_lines=15
+                                max_lines=15,
+                                elem_id="error-input"
                             )
                             
                             with gr.Row():
                                 screenshot_input = gr.Image(
-                                    label="📸 Screenshot (Optional)",
+                                    label="📸 Screenshot",
                                     type="pil",
-                                    height=200
+                                    height=150
                                 )
                                 files_input = gr.File(
-                                    label="📁 Code Files (Optional)",
+                                    label="📁 Context Files",
                                     file_count="multiple",
-                                    file_types=[".py", ".js", ".java", ".cpp", ".ts"]
+                                    height=150
                                 )
                             
                             with gr.Row():
                                 analyze_btn = gr.Button(
-                                    "🔍 Analyze Error",
+                                    "⚡ Initialize Analysis",
                                     variant="primary",
                                     size="lg",
-                                    scale=2
+                                    elem_classes=["neon-border"]
                                 )
                                 clear_btn = gr.Button(
-                                    "🗑️ Clear",
+                                    "🗑️ Reset System",
                                     variant="secondary",
-                                    size="lg",
-                                    scale=1
+                                    size="lg"
                                 )
-                        
-                        # RIGHT COLUMN: Live Analysis Panel
-                        with gr.Column(scale=3):
-                            gr.Markdown("### 🤖 Live Agent Collaboration")
+
+                        # RIGHT: Agent Command Deck (Glass)
+                        with gr.Column(scale=3, elem_classes=["glass-panel", "agent-deck"]):
+                            gr.Markdown("### 🤖 Agent Neural Link")
                             
                             agent_status = gr.Chatbot(
-                                label="",
+                                label="Live Agent Communication",
                                 type="messages",
-                                height=300,
+                                height=450,
                                 bubble_full_width=False,
-                                show_copy_button=True
+                                show_copy_button=True,
+                                avatar_images=(None, "https://api.iconify.design/fluent-emoji:robot.svg")
                             )
                             
                             status_bar = gr.Markdown(
-                                "**Status:** Ready to analyze",
-                                elem_classes=["agent-card"]
+                                "**System Status:** 🟢 Ready for input",
+                                elem_classes=["glass-panel"]
                             )
-                    
-                    # Results Section
+
+                    # Bottom Row: Solution Matrix
                     gr.Markdown("---")
-                    gr.Markdown("## 🎯 Analysis Results")
+                    gr.Markdown("## 🧩 Solution Matrix")
                     
                     with gr.Row():
-                        root_cause_box = gr.Markdown(
-                            "Results will appear here after analysis...",
-                            elem_classes=["solution-card"]
-                        )
-                    
-                    gr.Markdown("### 💡 Recommended Solutions")
-                    
-                    with gr.Row():
-                        solution_1 = gr.Markdown(visible=False)
-                        solution_2 = gr.Markdown(visible=False)
-                        solution_3 = gr.Markdown(visible=False)
-                    
+                        # Root Cause Card
+                        with gr.Column(scale=1):
+                            root_cause_box = gr.Markdown(
+                                """
+                                <div style="text-align: center; padding: 40px; color: #64748b;">
+                                    Waiting for analysis data...
+                                </div>
+                                """,
+                                elem_classes=["solution-card-glass", "neon-border"]
+                            )
+
+                    # Solution Cards
                     with gr.Row():
-                        export_md_btn = gr.DownloadButton(
-                            "📄 Export as Markdown",
-                            visible=False,
-                            variant="secondary"
-                        )
-                        export_json_btn = gr.DownloadButton(
-                            "📊 Export as JSON",
-                            visible=False,
-                            variant="secondary"
-                        )
-                        voice_btn = gr.Button(
-                            "🔊 Generate Voice Explanation",
-                            visible=False,
-                            variant="secondary"
-                        )
+                        solution_1 = gr.Markdown(visible=False, elem_classes=["solution-card-glass"])
+                        solution_2 = gr.Markdown(visible=False, elem_classes=["solution-card-glass"])
+                        solution_3 = gr.Markdown(visible=False, elem_classes=["solution-card-glass"])
                     
-                    audio_output = gr.Audio(
-                        label="AI Voice Explanation",
-                        visible=False,
-                        interactive=False
-                    )
-                
-                # TAB 2: REPORTS
-                with gr.Tab("📊 Reports", id=1):
-                    gr.Markdown("### Analysis Reports")
-                    gr.Markdown("*Coming soon: Comprehensive analysis reports and statistics*")
-                
-                # TAB 3: HISTORY  
-                with gr.Tab("🎯 History", id=2):
-                    gr.Markdown("### Analysis History")
+                    # Action Bar
+                    with gr.Row(elem_classes=["glass-panel"], style="margin-top: 20px; padding: 10px;"):
+                        export_md_btn = gr.DownloadButton("📄 Export Report", visible=False)
+                        export_json_btn = gr.DownloadButton("📊 Export Data", visible=False)
+                        voice_btn = gr.Button("🔊 Voice Briefing", visible=False)
+                        audio_output = gr.Audio(label="Voice Output", visible=False, interactive=False)
+
+                # TAB 2: DATA VAULT (History)
+                with gr.Tab("💾 Data Vault", id=1):
+                    gr.Markdown("### 📜 Analysis Logs")
                     history_df = gr.Dataframe(
-                        headers=["Timestamp", "Error Type", "Confidence", "Status"],
+                        headers=["Timestamp", "Error Signature", "Confidence", "Status"],
                         datatype=["str", "str", "number", "str"],
-                        row_count=(5, "dynamic"),
-                        col_count=(4, "fixed"),
+                        interactive=False,
+                        elem_classes=["glass-panel"]
                     )
-                
-                # TAB 4: SETTINGS
-                with gr.Tab("⚙️ Settings", id=3):
-                    gr.Markdown("### Configuration")
-                    
+
+                # TAB 3: SYSTEM CONFIG
+                with gr.Tab("⚙️ System Config", id=2):
                     with gr.Row():
-                        model_choice = gr.Dropdown(
-                            choices=["All Agents", "Claude Only", "Gemini Only", "GPT-4 Only"],
-                            value="All Agents",
-                            label="Agent Selection"
-                        )
-                        voice_enabled = gr.Checkbox(
-                            label="Enable Voice Explanations",
-                            value=True
-                        )
-                    
-                    api_status = gr.Markdown(f"""
-                    **Modal Backend:** {'✅ Connected' if MODAL_API_URL else '❌ Not Configured'}
-                    
-                    **Endpoint:** `{MODAL_API_URL or 'Not set'}`
-                    """)
-            
-            # Event Handlers
+                        with gr.Column(elem_classes=["glass-panel"]):
+                            gr.Markdown("### 🔧 Agent Configuration")
+                            model_choice = gr.Dropdown(
+                                choices=["All Agents (Swarm Mode)", "Claude Only", "Gemini Only", "GPT-4 Only"],
+                                value="All Agents (Swarm Mode)",
+                                label="Active Neural Network"
+                            )
+                            voice_enabled = gr.Checkbox(
+                                label="Enable Vocal Synthesis",
+                                value=True
+                            )
+                            
+                            gr.Markdown(f"""
+                            **Backend Uplink:** `{MODAL_API_URL or 'Disconnected 🔴'}`
+                            """)
+
+            # Event Handlers (Mock Logic for UI Demo)
             def mock_analyze(error_text, screenshot, files, progress=gr.Progress()):
-                """Mock analysis function for demo purposes."""
                 import time
                 
-                # Simulate agent collaboration
                 messages = []
                 
-                progress(0.1, desc="Initializing agents...")
-                messages.append({
-                    "role": "assistant",
-                    "content": "🤖 **Claude:** Starting syntax analysis..."
-                })
-                yield messages, "**Status:** 🔍 Analyzing with Claude...", gr.update(), gr.update(), gr.update(), gr.update()
-                time.sleep(0.5)
+                # Step 1: Initialization
+                progress(0.1, desc="Establishing neural link...")
+                messages.append({"role": "assistant", "content": "🔄 **System:** Initializing multi-agent swarm..."})
+                yield messages, "**Status:** 🟡 Initializing...", gr.update(), gr.update(), gr.update(), gr.update()
+                time.sleep(0.8)
                 
-                progress(0.3, desc="Claude analyzing...")
-                messages.append({
-                    "role": "assistant",
-                    "content": "🧠 **Gemini:** Checking imports and dependencies..."
-                })
-                yield messages, "**Status:** 🧠 Gemini analyzing imports...", gr.update(), gr.update(), gr.update(), gr.update()
-                time.sleep(0.5)
+                # Step 2: Claude Analysis
+                progress(0.3, desc="Claude analyzing syntax...")
+                messages.append({"role": "assistant", "content": "🤖 **Claude:** Scanning code structure and syntax trees..."})
+                yield messages, "**Status:** 🔵 Claude Analyzing...", gr.update(), gr.update(), gr.update(), gr.update()
+                time.sleep(1.0)
                 
-                progress(0.5, desc="Gemini analyzing...")
-                messages.append({
-                    "role": "assistant",
-                    "content": "💡 **GPT-4:** Searching for similar issues and solutions..."
-                })
-                yield messages, "**Status:** 💡 GPT-4 finding solutions...", gr.update(), gr.update(), gr.update(), gr.update()
-                time.sleep(0.5)
+                # Step 3: Gemini Analysis
+                progress(0.5, desc="Gemini checking context...")
+                messages.append({"role": "assistant", "content": "🧠 **Gemini:** Cross-referencing with documentation and known issues..."})
+                yield messages, "**Status:** 🟣 Gemini Processing...", gr.update(), gr.update(), gr.update(), gr.update()
+                time.sleep(1.0)
                 
-                progress(0.8, desc="Synthesizing results...")
+                # Step 4: GPT-4 Synthesis
+                progress(0.8, desc="GPT-4 synthesizing solutions...")
+                messages.append({"role": "assistant", "content": "💡 **GPT-4:** Synthesizing findings and generating optimal solutions..."})
+                yield messages, "**Status:** 🟢 Synthesizing...", gr.update(), gr.update(), gr.update(), gr.update()
+                time.sleep(1.0)
                 
-                # Final results
+                # Final Results
                 root_cause = """
-                <div class="solution-card">
-                <h3>🎯 Root Cause Identified</h3>
-                <p>Based on multi-agent analysis, the issue is likely caused by a <strong>missing import statement</strong> 
-                or an <strong>incorrect module path</strong>.</p>
-                <p><span class="confidence-badge high-confidence">98% Confidence</span></p>
-                </div>
+                ### 🎯 Root Cause Identified
+                **ImportError: Module not found**
+                
+                The system detected a missing dependency in the environment configuration. The module `gradio` is attempting to access a resource that is not installed.
+                
+                <span class="badge-high">98% Confidence</span>
                 """
                 
                 sol1 = """
-                <div class="solution-card">
-                <h4>✅ Solution 1: Add Missing Import</h4>
-                <p>Import the required module at the top of your file.</p>
-                <pre><code>from module_name import ClassName</code></pre>
-                <p><span class="confidence-badge high-confidence">95% Confidence</span></p>
-                </div>
+                #### ✅ Optimal Solution
+                **Install Missing Package**
+                
+                Run the following command:
+                ```bash
+                pip install gradio[mcp]
+                ```
+                <span class="badge-high">98% Success Rate</span>
                 """
                 
                 sol2 = """
-                <div class="solution-card">
-                <h4>💡 Solution 2: Check Module Path</h4>
-                <p>Verify that the module is in your Python path.</p> 
-                <p><span class="confidence-badge medium-confidence">75% Confidence</span></p>
-                </div>
+                #### 🔄 Alternative
+                **Check Virtual Environment**
+                
+                Ensure you are active in the correct venv:
+                ```bash
+                source venv/bin/activate
+                ```
+                <span class="badge-med">75% Probability</span>
                 """
                 
                 sol3 = """
-                <div class="solution-card">
-                <h4>🔧 Solution 3: Install Dependencies</h4>
-                <p>Install missing packages using pip.</p>
-                <pre><code>pip install package-name</code></pre>
-                <p><span class="confidence-badge low-confidence">60% Confidence</span></p>
-                </div>
+                #### 🔧 Patch
+                **Manual Path Add**
+                
+                Add the library path manually to `sys.path`.
+                <span class="badge-low">40% Recommended</span>
                 """
                 
-                progress(1.0, desc="Analysis complete!")
+                progress(1.0, desc="Analysis Complete")
+                messages.append({"role": "assistant", "content": "✅ **System:** Analysis complete. Solutions generated."})
                 
                 yield (
                     messages,
-                    "**Status:** ✅ Analysis complete!",
+                    "**Status:** 🟢 Ready",
                     root_cause,
-                    sol1,
-                    sol2,
-                    sol3
+                    gr.update(value=sol1, visible=True),
+                    gr.update(value=sol2, visible=True),
+                    gr.update(value=sol3, visible=True)
                 )
-            
-            # Wire up the analyze button
+
             analyze_btn.click(
                 fn=mock_analyze,
                 inputs=[error_input, screenshot_input, files_input],
                 outputs=[agent_status, status_bar, root_cause_box, solution_1, solution_2, solution_3]
             )
             
-            # Clear button
             clear_btn.click(
-                fn=lambda: ("", None, None, [], "**Status:** Ready to analyze", "", "", "", ""),
-                outputs=[error_input, screenshot_input, files_input, agent_status, status_bar, 
-                        root_cause_box, solution_1, solution_2, solution_3]
+                fn=lambda: ("", None, None, [], "**Status:** 🟢 Ready", "", gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)),
+                outputs=[error_input, screenshot_input, files_input, agent_status, status_bar, root_cause_box, solution_1, solution_2, solution_3]
             )
-        
-        # Footer
-        gr.Markdown("""
-        ---
-        <div style="text-align: center; color: #94a3b8; font-size: 14px;">
-        🧞 DebugGenie v2.0 | Powered by Claude, Gemini & GPT-4 | 
-        <a href="https://github.com/nihald2000/debugging-assistant" style="color: #6366f1;">View on GitHub</a>
-        </div>
-        """)
-    
+
     return demo
 
 if __name__ == "__main__":

theme.py

@@ -1,12 +1,13 @@
 """
 DebugGenie Custom Theme for Gradio 6
-Professional dark theme optimized for developer tools
+Professional dark theme optimized for developer tools with Cyber-Glass aesthetics
 """
 import gradio as gr
 
 def create_debuggenie_theme():
     """Create the custom DebugGenie theme with professional dark mode."""
     
+    # Base theme - using Slate as neutral for that deep code-editor feel
     theme = gr.themes.Soft(
         primary_hue="indigo",
         secondary_hue="purple",
@@ -30,16 +31,16 @@ def create_debuggenie_theme():
         body_text_color="#f1f5f9",
         body_text_color_subdued="#cbd5e1",
         
-        # Backgrounds
-        body_background_fill="*neutral_950",
-        block_background_fill="*neutral_900",
+        # Backgrounds - Deep dark for contrast with glass elements
+        body_background_fill="#020617", # Slate 950
+        block_background_fill="#0f172a", # Slate 900
         
         # Borders
-        border_color_primary="*neutral_700",
+        border_color_primary="#334155", # Slate 700
         
         # Shadows for depth
-        shadow_drop="0 10px 15px -3px rgba(0, 0, 0, 0.3)",
-        shadow_drop_lg="0 20px 25px -5px rgba(0, 0, 0, 0.4)",
+        shadow_drop="0 10px 15px -3px rgba(0, 0, 0, 0.5)",
+        shadow_drop_lg="0 20px 25px -5px rgba(0, 0, 0, 0.6)",
     )
     
     return theme