Update app.py

app.py

@@ -1,236 +1,260 @@
+# app.py — REFACTORED FOR A LIVE, SEAMLESS, AND ROBUST UI
 import gradio as gr
 from backend import (
+    # User Management
     create_user,
     get_user_by_username,
     verify_password,
+    # Project Management
     create_project,
     get_user_projects,
     search_projects,
+    get_project,
+    # Job Queue
     queue_job,
-    get_project
 )
 import psutil
 import torch
 
-# User state is managed per-session by Gradio's queue
-user_state = {"user_id": None, "username": ""}
+# Gradio's session state will manage user data for each session
+# No global user_state dictionary needed for this approach
+# We will use gr.State to hold session-specific data
 
-# --- Backend Logic Functions ---
+# --- UI HELPER FUNCTIONS ---
 
-def page_login(username, password):
+def get_system_stats():
+    """Returns a markdown string with current RAM and VRAM usage."""
+    ram_used = round(psutil.virtual_memory().used / (1024**3), 2)
+    ram_total = round(psutil.virtual_memory().total / (1024**3), 2)
+    stats_str = f"📊 System RAM: {ram_used}GB / {ram_total}GB"
+    if torch.cuda.is_available():
+        vram_reserved = round(torch.cuda.memory_reserved() / (1024**3), 2)
+        vram_total = round(torch.cuda.get_device_properties(0).total_memory / (1024**3), 2)
+        stats_str += f" | VRAM: {vram_reserved}GB / {vram_total}GB"
+    return stats_str
+
+def format_projects_list(projects):
+    """Formats a list of project records into a readable markdown string."""
+    if not projects:
+        return "No projects yet. Start one on the left!"
+    
+    project_lines = []
+    for p in projects:
+        status_icon = {"queued": "🕒", "running": "⚙️", "completed": "✅", "failed": "❌"}.get(p['status'], "❓")
+        project_lines.append(f"{status_icon} **[{p['id']}] {p['title']}** ({p['status']})")
+    return "\n".join(project_lines)
+
+def get_project_choices(user_id):
+    """Fetches user projects and formats them for a dropdown."""
+    if not user_id:
+        return []
+    projects = get_user_projects(user_id, limit=20) # Increase limit for dropdown
+    return [(f"[{p['id']}] {p['title']}", p['id']) for p in projects] if projects else []
+
+# --- CORE LOGIC HANDLERS FOR UI ---
+
+def login_and_setup(username, password, user_state):
+    """Handles login/signup and prepares the main UI if successful."""
     user = get_user_by_username(username)
-    if user and verify_password(password, user[1]):
-        user_state["user_id"] = user[0]
-        user_state["username"] = username
-        return gr.update(visible=False), gr.update(visible=True), f"Welcome back, {username}! 👨‍💻"
+    user_id = None
+    welcome_message = ""
+
+    if user and verify_password(password, user['password_hash']):
+        user_id = user['id']
+        welcome_message = f"Welcome back, {username}! 👨‍💻"
     else:
-        # Try to create a new user
-        user_id = create_user(username, password)
-        if user_id:
-            user_state["user_id"] = user_id
-            user_state["username"] = username
-            return gr.update(visible=False), gr.update(visible=True), f"Account created! Welcome, {username}!"
+        new_user_id = create_user(username, password)
+        if new_user_id:
+            user_id = new_user_id
+            welcome_message = f"Account created! Welcome, {username}!"
         else:
-            return gr.update(), gr.update(), "Login failed or username is taken."
+            # Login failed and username is taken
+            return user_state, gr.update(), gr.update(value="Login failed or username is taken.")
 
-def page_projects():
-    if not user_state["user_id"]:
-        return "Please login first.", ""
-    projects = get_user_projects(user_state["user_id"])
-    if not projects:
-        return "No projects yet. Create one below!", ""
-
-    project_list = "\n".join([
-        f"📁 [{p[0]}] {p[1]} ({p[3]}) - {p[5]}"
-        for p in projects
-    ])
-    return project_list, ""
+    if user_id:
+        user_state['user_id'] = user_id
+        user_state['username'] = username
+        
+        projects = get_user_projects(user_id)
+        project_list_md = format_projects_list(projects)
+        dropdown_choices = get_project_choices(user_id)
+        
+        # Hide login UI, show main UI, and populate it with data
+        return (
+            user_state,
+            gr.update(visible=False), # Hide login UI
+            gr.update(visible=True),  # Show main UI
+            gr.update(value=welcome_message),
+            gr.update(value=project_list_md),
+            gr.update(choices=dropdown_choices, value=None)
+        )
+    # This path is for the failed login/signup
+    return user_state, gr.update(), gr.update()
 
-def start_new_project(prompt):
-    if not user_state["user_id"]:
-        return "❌ Please login first.", ""
 
-    projects = get_user_projects(user_state["user_id"])
-    if len(projects) >= 3:
-        return "⚠️ You can only have 3 projects. Delete one to create another.", ""
+def start_project_flow(prompt, user_state):
+    """The complete, seamless flow for starting a new project."""
+    user_id = user_state.get('user_id')
+    if not user_id:
+        return "Error: Not logged in.", "", "", None, None, gr.update()
 
-    project_id = create_project(user_state["user_id"], "New Project", prompt)
-    queue_job(project_id, user_state["user_id"], prompt)
-    
-    status_message = f"✅ Project #{project_id} started! Go to the 'Agent Conversation' tab and click 'Load My Projects' to see its logs."
+    # 1. Create project in DB
+    project_id = create_project(user_id, "New AI Project", prompt)
+    if not project_id:
+        return "Error: Could not create project.", "", "", None, None, gr.update()
+        
+    # 2. Queue the backend job
+    queue_job(project_id, user_id, prompt)
     
-    # Return updates for the UI
-    return status_message, "" # Return message and clear prompt
-
-def search_projects_ui(query):
-    if not user_state["user_id"]:
-        return "Please login first."
-    results = search_projects(user_state["user_id"], query)
-    if not results:
-        return "No matching projects."
-    return "\n".join([f"📁 [{p[0]}] {p[1]} ({p[3]})" for p in results])
-
-def update_dropdown():
-    if not user_state["user_id"]:
-        return gr.update(choices=[])
-    projects = get_user_projects(user_state["user_id"], limit=10)
-    choices = [(f"[{p[0]}] {p[1]}", p[0]) for p in projects]
-    return gr.update(choices=choices)
+    # 3. Refresh UI elements with the new project data
+    projects = get_user_projects(user_id)
+    project_list_md = format_projects_list(projects)
+    dropdown_choices = get_project_choices(user_id)
+
+    # 4. Return updates for ALL relevant components
+    return (
+        f"✅ Project #{project_id} started! Switching to logs...", # Status message
+        gr.update(value=""), # Clear the prompt box
+        gr.update(value=project_list_md), # Update dashboard project list
+        gr.update(choices=dropdown_choices, value=project_id), # Update dropdown and AUTO-SELECT the new project
+        gr.Tabs(selected="logs_tab"), # Switch to the Logs tab
+    )
+
+def refresh_all_projects(user_state):
+    """Manually refresh project lists on both tabs."""
+    user_id = user_state.get('user_id')
+    if not user_id:
+        return gr.update(), gr.update()
+        
+    projects = get_user_projects(user_id)
+    project_list_md = format_projects_list(projects)
+    dropdown_choices = get_project_choices(user_id)
     
-def show_agent_logs(project_id):
+    return gr.update(value=project_list_md), gr.update(choices=dropdown_choices)
+
+def get_live_logs(project_id):
+    """Fetches logs for the selected project. Designed for live polling."""
     if not project_id:
-        return "Select a project from the dropdown to view its logs."
+        return "⬅️ Select a project from the dropdown to see its live logs."
+    
     project = get_project(project_id)
-    if not project:
-        return "Project not found."
-    logs = project[6]  # logs field
-    if not logs:
-        return "No logs generated yet. The agent might still be working..."
-    return logs
-
-## IMPROVEMENT: Create a dedicated function for system stats.
-def update_system_stats():
-    ram_used = round(psutil.virtual_memory().used / (1024**3), 2)
-    ram_total = round(psutil.virtual_memory().total / (1024**3), 2)
-    stats_str = f"📊 System RAM: {ram_used}GB / {ram_total}GB"
-    if torch.cuda.is_available():
-        vram_used = round(torch.cuda.memory_reserved() / (1024**3), 2)
-        vram_total = round(torch.cuda.get_device_properties(0).total_memory / (1024**3), 2)
-        stats_str += f" | VRAM: {vram_used}GB / {vram_total}GB"
-    return stats_str
+    if not project or not project['logs']:
+        return f"🕒 Project #{project_id} is queued or starting... Logs will appear here shortly."
+        
+    return project['logs']
 
-# --- Gradio UI ---
+# --- GRADIO UI DEFINITION ---
 
 with gr.Blocks(title="Code Agents Pro", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🤖 Code Agents Pro — AI Software Team, Fully Automated")
+    # Session state to hold user_id and username
+    user_state = gr.State({"user_id": None, "username": ""})
+    
+    gr.Markdown("# 🤖 Code Agents Pro — Your Automated AI Software Team")
 
-    # ---- PAGE 1: LOGIN ----
-    with gr.Group() as page_login_ui:
+    # --- PAGE 1: LOGIN UI ---
+    with gr.Group(visible=True) as login_ui:
         with gr.Row():
             gr.Markdown("### 🔐 Login or Sign Up")
         username_input = gr.Textbox(label="Username", placeholder="Choose a unique username")
-        password_input = gr.Textbox(label="Password", type="password", placeholder="Minimum 6 characters")
+        password_input = gr.Textbox(label="Password", type="password", placeholder="Enter your password")
         login_btn = gr.Button("Login / Sign Up", variant="primary")
         login_msg = gr.Markdown()
 
-    # ---- PAGE 2: MAIN DASHBOARD ----
-    with gr.Tab("🚀 Projects Dashboard", visible=False) as page_main_ui:
-        with gr.Row():
-            with gr.Column(scale=2):
-                gr.Markdown("### ➕ Start New Project")
-                project_prompt = gr.Textbox(
-                    label="Describe your project goal",
-                    lines=5,
-                    placeholder="e.g., 'Build a Flask app for uploading and labeling images.'"
-                )
-                start_btn = gr.Button("🚀 Start AI Team Work", variant="primary")
-                status_msg = gr.Markdown()
-            with gr.Column(scale=3):
-                gr.Markdown("### 📁 Your Projects (Max 3)")
-                refresh_btn = gr.Button("🔄 Refresh Projects")
-                projects_display = gr.Markdown(label="Your Projects", value="Login to see your projects.")
-                with gr.Accordion("🔍 Search Projects", open=False):
-                    search_input = gr.Textbox(label="Search Query", placeholder="Type to search...")
-                    search_btn = gr.Button("Search")
-                    search_results = gr.Markdown(label="Search Results")
-
-        ram_monitor = gr.Markdown() # Placeholder for system stats
-
-    # ---- PAGE 3: AGENT CONVERSATION LOGS ----
-    with gr.Tab("🧠 Agent Conversation", visible=False) as page_logs_ui:
-        gr.Markdown("### 📜 View Agent Logs")
-        with gr.Row():
-            project_selector = gr.Dropdown(
-                label="Select Project to View Logs",
-                choices=[],
-                interactive=True,
-                allow_custom_value=False,
-                ## IMPROVEMENT: Your correct fix is here. This prevents auto-selection.
-                value=None,
-            )
-            refresh_dropdown_btn = gr.Button("🔄 Load My Projects")
+    # --- PAGE 2: MAIN APPLICATION UI (Initially Hidden) ---
+    with gr.Group(visible=False) as main_ui_container:
+        welcome_msg = gr.Markdown()
         
-        ## IMPROVEMENT: Use a styled gr.Box for better control over height and scrolling.
-        with gr.Box(elem_classes=["logs-container"]):
-            logs_display = gr.Markdown(
-                label="Agent Messages",
-                value="Select a project and click 'Load' to see the conversation.",
-                elem_classes=["monospace"]
-            )
-            
-    # ------------------------------ EVENT HANDLING ------------------------------
-
-    # Login button action
-    login_btn.click(
-        page_login,
-        inputs=[username_input, password_input],
-        outputs=[page_login_ui, page_main_ui, login_msg]
-    ).then(
-        page_projects,
-        outputs=[projects_display, search_results] # Also load projects on login
-    )
+        with gr.Tabs() as tabs:
+            # --- DASHBOARD TAB ---
+            with gr.Tab("🚀 Dashboard", id="dashboard_tab"):
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        gr.Markdown("### ✨ Start a New Project")
+                        project_prompt = gr.Textbox(
+                            label="Describe your project goal in detail",
+                            lines=8,
+                            placeholder="e.g., 'Build a Python FastAPI server with a PostgreSQL database using SQLAlchemy. It needs a /users endpoint for creating and listing users.'"
+                        )
+                        start_btn = gr.Button("🚀 Start AI Team Work", variant="primary")
+                        status_msg = gr.Markdown()
 
-    # Refresh buttons
-    refresh_btn.click(
-        page_projects,
-        outputs=[projects_display, search_results] # Clears search results on refresh
-    )
+                    with gr.Column(scale=3):
+                        gr.Markdown("### 📁 Your Projects")
+                        refresh_all_btn = gr.Button("🔄 Refresh Project List")
+                        projects_display = gr.Markdown("Login to see your projects.")
+                
+            # --- AGENT LOGS TAB ---
+            with gr.Tab("🧠 Agent Logs", id="logs_tab"):
+                gr.Markdown("### 📜 View Agent Conversation Logs")
+                project_selector = gr.Dropdown(
+                    label="Select Project to View",
+                    choices=[],
+                    interactive=True,
+                )
+                with gr.Box(elem_classes=["logs-container"]):
+                    logs_display = gr.Markdown("Logs will appear here in real-time.", elem_classes=["monospace"])
+        
+        # System stats monitor at the bottom
+        ram_monitor = gr.Markdown()
 
-    refresh_dropdown_btn.click(
-        fn=update_dropdown,
-        outputs=project_selector
-    )
+    # ------------------------------ EVENT WIRING ------------------------------
 
-    # Search button action
-    search_btn.click(
-        search_projects_ui,
-        inputs=search_input,
-        outputs=search_results
+    # 1. Login Action
+    login_btn.click(
+        fn=login_and_setup,
+        inputs=[username_input, password_input, user_state],
+        outputs=[user_state, login_ui, main_ui_container, welcome_msg, projects_display, project_selector]
     )
-
-    # Start new project button action
+    
+    # 2. Start Project Action (THE SEAMLESS FLOW)
     start_btn.click(
-        start_new_project,
-        inputs=project_prompt,
-        outputs=[status_msg, project_prompt] # Clear prompt after submission
-    ).then(
-        page_projects, # Refresh the main project list
-        outputs=[projects_display, search_results]
-    ).then(
-        update_dropdown, # Also refresh the dropdown in the logs tab
-        outputs=project_selector
+        fn=start_project_flow,
+        inputs=[project_prompt, user_state],
+        outputs=[status_msg, project_prompt, projects_display, project_selector, tabs]
     )
 
-    # When a project is selected from dropdown, show its logs
+    # 3. Manual Refresh Action
+    refresh_all_btn.click(
+        fn=refresh_all_projects,
+        inputs=[user_state],
+        outputs=[projects_display, project_selector]
+    )
+    
+    # 4. Action when dropdown value changes MANUALLY
     project_selector.change(
-        fn=show_agent_logs,
+        fn=get_live_logs,
         inputs=project_selector,
         outputs=logs_display
     )
 
-    # --- Live Updates & Styling ---
-    
-    ## IMPROVEMENT: Update system stats every 5 seconds after the app loads.
-    demo.load(update_system_stats, None, ram_monitor, every=5)
+    # 5. LIVE POLLING for system stats and logs
+    demo.load(fn=get_system_stats, outputs=ram_monitor, every=5)
+    demo.load(
+        fn=get_live_logs,
+        inputs=[project_selector], # It will use the current value of the dropdown
+        outputs=[logs_display],
+        every=3 # Refresh logs every 3 seconds
+    )
 
-    ## IMPROVEMENT: CSS for modern scrolling container and monospace font.
+    # --- CSS STYLING ---
     gr.HTML("""
     <style>
         .logs-container {
             height: 600px;
             overflow-y: auto;
-            border: 1px solid #e0e0e0;
+            border: 1px solid #E5E7EB;
             border-radius: 8px;
+            padding: 8px;
+            background-color: #F9FAFB;
         }
         .monospace {
             font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
             font-size: 14px;
             white-space: pre-wrap;
             word-wrap: break-word;
-            padding: 10px;
         }
     </style>
     """)
 
-# Use queue() for per-user state management
+# Use queue() for per-user state management, essential for multi-user apps
 demo.queue().launch(server_name="0.0.0.0", server_port=7860)