feat: Implement Streamlined Flow UI redesign (Linear Layout)

app.py

@@ -1,6 +1,6 @@
 """
-DebugGenie - Onyx Pro Edition
-Clean, professional, distraction-free UI.
+DebugGenie - Streamlined Flow Edition
+Intuitive, linear workflow: Input -> Analysis -> Solution.
 """
 import os
 import gradio as gr
@@ -10,8 +10,8 @@ from theme import debuggenie_theme
 # Check if Modal URL is configured
 MODAL_API_URL = os.environ.get("MODAL_API_URL")
 
-# --- CSS ARCHITECTURE (Clean & Minimal) ---
-ONYX_PRO_CSS = """
+# --- CSS ARCHITECTURE (Streamlined) ---
+STREAMLINED_CSS = """
 /* 🌑 Base Styles */
 body {
     background-color: #09090b;
@@ -33,8 +33,8 @@ h1, h2, h3, h4, h5, h6 {
 .pro-card {
     background-color: #18181b !important;
     border: 1px solid #27272a !important;
-    border-radius: 8px !important;
-    padding: 16px !important;
+    border-radius: 12px !important;
+    padding: 24px !important;
     transition: border-color 0.2s ease;
 }
 
@@ -46,7 +46,9 @@ h1, h2, h3, h4, h5, h6 {
     background-color: #09090b !important;
     border: 1px solid #27272a !important;
     font-family: 'JetBrains Mono', monospace !important;
-    font-size: 14px !important;
+    font-size: 16px !important;
+    padding: 16px !important;
+    border-radius: 12px !important;
 }
 
 .input-area textarea:focus {
@@ -54,19 +56,36 @@ h1, h2, h3, h4, h5, h6 {
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
 }
 
-/* 💬 Chat Bubbles */
-.message-row {
-    margin-bottom: 12px;
+/* 🌊 Flow Containers */
+.flow-section {
+    margin-bottom: 40px;
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.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;
 }
 
 /* 🏷️ Badges */
 .badge {
     display: inline-flex;
     align-items: center;
-    padding: 2px 8px;
-    border-radius: 4px;
+    padding: 4px 10px;
+    border-radius: 6px;
     font-size: 12px;
-    font-weight: 500;
+    font-weight: 600;
     border: 1px solid transparent;
 }
 
@@ -82,70 +101,35 @@ h1, h2, h3, h4, h5, h6 {
     border-color: rgba(245, 158, 11, 0.2);
 }
 
-/* 📜 Custom Scrollbar (Subtle) */
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-
-::-webkit-scrollbar-track {
-    background: #09090b; 
-}
-
-::-webkit-scrollbar-thumb {
-    background: #27272a; 
-    border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #3f3f46; 
-}
-
-/* Spacing Helpers */
-.solutions-header {
-    margin-top: 24px !important;
-}
-
-.action-bar {
-    margin-top: 16px !important;
-}
-
 /* Header Responsiveness */
 .header-container {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 12px;
-    margin-bottom: 24px;
+    margin-bottom: 40px;
+    padding-top: 20px;
 }
 
 .logo-icon {
-    font-size: clamp(20px, 4vw, 28px);
+    font-size: clamp(24px, 5vw, 32px);
 }
 
 .logo-text h1 {
     margin: 0;
-    font-size: clamp(18px, 3vw, 24px);
+    font-size: clamp(20px, 4vw, 28px);
     color: #f4f4f5;
 }
 
 .logo-text p {
     margin: 0;
-    font-size: clamp(12px, 2vw, 14px);
+    font-size: clamp(14px, 2vw, 16px);
     color: #a1a1aa;
 }
-
-.version-badge {
-    font-size: 12px;
-    color: #52525b;
-    border: 1px solid #27272a;
-    padding: 4px 8px;
-    border-radius: 4px;
-    white-space: nowrap;
-}
 """
 
 def create_header():
-    """Create a clean, minimal header."""
+    """Create a centered, minimal header."""
     return gr.Markdown("""
     <div class="header-container">
         <div class="logo-icon">🧞</div>
@@ -153,20 +137,16 @@ def create_header():
             <h1>DebugGenie</h1>
             <p>Enterprise Error Analysis</p>
         </div>
-        <div style="flex-grow: 1;"></div>
-        <div class="version-badge">
-            v2.1 Onyx
-        </div>
     </div>
     """)
 
 def create_main_interface():
-    """Create the main interface with Onyx Pro layout."""
+    """Create the main interface with Streamlined Flow layout."""
     
     with gr.Blocks(
         theme=debuggenie_theme,
-        title="DebugGenie Pro",
-        css=ONYX_PRO_CSS
+        title="DebugGenie Flow",
+        css=STREAMLINED_CSS
     ) as demo:
         
         create_header()
@@ -174,159 +154,155 @@ def create_main_interface():
         # Configuration Check
         if not MODAL_API_URL:
             with gr.Row():
-                with gr.Column(elem_classes=["pro-card"]):
+                with gr.Column(elem_classes=["pro-card", "flow-section"]):
                     gr.Markdown("### ⚠️ Configuration Required")
                     gr.Markdown("Please configure `MODAL_API_URL` in Space settings.")
         else:
-            with gr.Tabs() as tabs:
+            
+            # 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
+                )
                 
-                # TAB 1: WORKSPACE
-                with gr.Tab("Workspace", id=0):
-                    
+                with gr.Accordion("Add Context (Screenshot / Files)", open=False):
                     with gr.Row():
-                        
-                        # LEFT COLUMN: Input & Context (30%)
-                        with gr.Column(scale=3):
-                            gr.Markdown("### Input Context")
-                            
-                            error_input = gr.Textbox(
-                                label="Error Trace",
-                                placeholder="Paste stack trace or error message...",
-                                lines=10,
-                                max_lines=20,
-                                elem_classes=["input-area"],
-                                show_label=False
-                            )
-                            
-                            with gr.Accordion("Additional Context", open=False):
-                                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(
-                                "Analyze Error",
-                                variant="primary",
-                                size="lg"
-                            )
-                            
-                            gr.Markdown("### History", visible=True)
-                            history_list = gr.DataFrame(
-                                headers=["Time", "Error"],
-                                datatype=["str", "str"],
-                                row_count=5,
-                                interactive=False,
-                                elem_classes=["pro-card"]
-                            )
-
-                        # RIGHT COLUMN: Analysis & Solutions (70%)
-                        with gr.Column(scale=7):
-                            
-                            # Agent Activity Feed
-                            with gr.Group(elem_classes=["pro-card"]):
-                                gr.Markdown("### Agent Collaboration")
-                                agent_status = gr.Chatbot(
-                                    label="Agent Activity",
-                                    type="messages",
-                                    height=300,
-                                    show_label=False,
-                                    bubble_full_width=False,
-                                    avatar_images=(None, "https://api.iconify.design/fluent-emoji:robot.svg")
-                                )
-                                status_bar = gr.Markdown("**Status:** Ready", elem_id="status-bar")
-
-                            # Solutions Area
-                            gr.Markdown("### Solutions", elem_classes=["solutions-header"])
-                            
-                            with gr.Row():
-                                root_cause_box = gr.Markdown(
-                                    "**Root Cause:** Waiting for analysis...",
-                                    elem_classes=["pro-card"]
-                                )
-                            
-                            with gr.Row():
-                                solution_1 = gr.Markdown(visible=False, elem_classes=["pro-card"])
-                                solution_2 = gr.Markdown(visible=False, elem_classes=["pro-card"])
-                            
-                            # Action Bar
-                            with gr.Row(elem_classes=["action-bar"]):
-                                export_btn = gr.Button("Export Report", size="sm", variant="secondary")
-                                voice_btn = gr.Button("Voice Briefing", size="sm", variant="secondary")
-                                audio_output = gr.Audio(visible=False, interactive=False)
+                        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"
+                )
 
-                # TAB 2: SETTINGS
-                with gr.Tab("Settings", id=1):
-                    with gr.Column(elem_classes=["pro-card"]):
-                        gr.Markdown("### Configuration")
-                        model_choice = gr.Dropdown(
-                            choices=["All Agents", "Claude Only", "Gemini Only"],
-                            value="All Agents",
-                            label="Active Agents"
-                        )
-                        gr.Markdown(f"**Backend:** `{MODAL_API_URL}`")
+            # 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")
+                    )
+                    status_bar = gr.Markdown("**Status:** Initializing...", elem_id="status-bar")
+
+            # 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
                 
+                # 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()
+                )
+                
                 messages = []
                 
                 # Step 1
                 progress(0.2, desc="Initializing...")
-                messages.append({"role": "assistant", "content": "🔄 **System:** Initializing analysis swarm..."})
-                yield messages, "**Status:** Initializing...", gr.update(), gr.update(), gr.update()
-                time.sleep(0.5)
+                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 messages, "**Status:** Analyzing...", gr.update(), gr.update(), gr.update()
+                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: Missing Dependency**
+                ### 🎯 Root Cause Identified
+                **Missing Dependency: `gradio`**
                 
-                The error `ModuleNotFoundError: No module named 'gradio'` indicates the package is not installed in the current environment.
+                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: `pip install gradio`
+                #### ✅ 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.
+                #### 🔄 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, 
-                    gr.update(value=sol1, visible=True), 
-                    gr.update(value=sol2, visible=True)
+                    sol1, 
+                    sol2
                 )
 
             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]
+                outputs=[
+                    analysis_section, 
+                    results_section, 
+                    agent_status, 
+                    status_bar, 
+                    root_cause_box, 
+                    solution_1, 
+                    solution_2
+                ]
             )
 
     return demo