Update app.py

app.py

@@ -396,62 +396,184 @@ def ui_upload_memories_action_fn(uploaded_file_obj, progress=gr.Progress()):
     msg = f"Memories Upload: Processed {total_to_process}. Added: {added_count}, Format Errors: {format_error_count}, Save Errors: {save_error_count}."
     logger.info(msg); return msg
 
+# app.py
+# ... (all other Python code remains the same) ...
+
 custom_theme = gr.themes.Base(primary_hue="teal", secondary_hue="purple", neutral_hue="zinc", text_size="sm", spacing_size="md", radius_size="sm", font=["System UI", "sans-serif"])
 custom_css = """
-#component-0 {gap:0 !important;}
-body { background: linear-gradient(to bottom right, #2c3e50, #34495e); color: #ecf0f1; min-height: 100vh; margin:0; padding:0;}
-.gradio-container { background: transparent !important; max-width: 100% !important; padding: 1rem !important; box-sizing: border-box;}
-.gr-box, .gr-panel, .gr-tabs, .gr-accordion { background-color: rgba(44, 62, 80, 0.85) !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; border-radius: 8px !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
-.gr-tabitem { background-color: rgba(52, 73, 94, 0.7) !important; border-radius: 6px !important; margin-bottom: 5px !important; padding: 1em !important;}
-.gr-textbox, .gr-dropdown, .gr-button, .gr-code, .gr-chat-message, .gr-json, .gr-file input[type="file"] { border: 1px solid rgba(189, 195, 199, 0.3) !important; background-color: rgba(52, 73, 94, 0.9) !important; color: #ecf0f1 !important; border-radius: 6px !important;}
-.gr-file { background-color: rgba(52, 73, 94, 0.9) !important; border-radius: 6px !important; padding: 0.5em;}
+html, body { /* Reset browser defaults for html and body */
+    margin: 0 !important;
+    padding: 0 !important;
+    height: 100%; /* Ensure body can fill height if needed */
+    box-sizing: border-box; /* Better box model */
+}
+*, *:before, *:after { /* Apply box-sizing to all elements */
+  box-sizing: inherit;
+}
+
+body { 
+    background: linear-gradient(to bottom right, #2c3e50, #34495e); 
+    color: #ecf0f1; 
+    min-height: 100vh; /* Ensure body takes at least full viewport height */
+    font-family: 'Inter', sans-serif; /* Moved font-family here for global effect */
+}
+
+.gradio-container { 
+    background: transparent !important; 
+    max-width: 100% !important; /* Use 100% to avoid slight gaps on sides sometimes seen with 98/96% */
+    padding: 1rem !important; /* Ensure some padding around the content */
+    margin: 0 auto !important; /* Center if max-width was less than 100% */
+    min-height: 100vh; /* Make container also try to fill height */
+    display: flex; /* Helps with some layout consistencies */
+    flex-direction: column; /* Stack children vertically */
+}
+
+/* Target the very first direct child block of gradio-container to remove top margin if any */
+.gradio-container > .gr-block:first-child {
+    margin-top: 0 !important;
+}
+
+/* Target the main title markdown specifically if it's causing issues */
+.gradio-container > .gr-block.gr-markdown:first-child h1:first-child {
+    margin-top: 0 !important;
+    padding-top: 0 !important; /* Also try padding */
+}
+
+
+.gr-box, .gr-panel, .gr-tabs, .gr-accordion { 
+    background-color: rgba(44, 62, 80, 0.85) !important; 
+    border: 1px solid rgba(189, 195, 199, 0.2) !important; 
+    border-radius: 8px !important; 
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+.gr-tabitem { 
+    background-color: rgba(52, 73, 94, 0.7) !important; 
+    border-radius: 6px !important; 
+    margin-bottom: 5px !important; 
+    padding: 1em !important;
+}
+
+.gr-textbox, .gr-dropdown, .gr-button, .gr-code, .gr-chat-message, .gr-json, .gr-file input[type="file"] { 
+    border: 1px solid rgba(189, 195, 199, 0.3) !important; 
+    background-color: rgba(52, 73, 94, 0.9) !important; 
+    color: #ecf0f1 !important; 
+    border-radius: 6px !important;
+}
+.gr-file { 
+    background-color: rgba(52, 73, 94, 0.9) !important; 
+    border-radius: 6px !important; padding: 0.5em;
+}
 .gr-file > .label-text { color: #bdc3c7 !important;}
 .gr-textarea textarea, .gr-textbox input { color: #ecf0f1 !important; }
+
 .gr-button.gr-button-primary { background-color: #1abc9c !important; color: white !important; border-color: #16a085 !important; }
 .gr-button.gr-button-secondary { background-color: #9b59b6 !important; color: white !important; border-color: #8e44ad !important; }
 .gr-button.gr-button-stop { background-color: #e74c3c !important; color: white !important; border-color: #c0392b !important; }
-.gr-markdown { background-color: transparent !important; padding: 0px; }
-.gr-markdown h1, .gr-markdown h2, .gr-markdown h3 { color: #1abc9c !important; border-bottom: 1px solid rgba(189, 195, 199, 0.2) !important; padding-bottom: 0.3em; margin-top:1em; }
+
+.gr-markdown { background-color: transparent !important; padding: 0px; } /* Make markdown itself transparent if inside a styled box */
+.gr-markdown h1, .gr-markdown h2, .gr-markdown h3 { 
+    color: #1abc9c !important; 
+    border-bottom: 1px solid rgba(189, 195, 199, 0.2) !important; 
+    padding-bottom: 0.3em; 
+    margin-top: 0.8em; /* Adjust default top margin for headers within markdown */
+    margin-bottom: 0.5em;
+}
 .gr-markdown p, .gr-markdown li { color: #ecf0f1 !important; }
-.gr-markdown pre code { background-color: rgba(30, 40, 50, 0.95) !important; border: 1px solid rgba(189, 195, 199, 0.3) !important; color: #ecf0f1; border-radius: 4px; padding: 0.8em; }
-.gr-chatbot { background-color: rgba(44, 62, 80, 0.7) !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; }
-.gr-chatbot .message { background-color: rgba(52, 73, 94, 0.9) !important; color: #ecf0f1 !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; }
-.gr-chatbot .message.user { background-color: rgba(46, 204, 113, 0.8) !important; color: #2c3e50 !important; }
-.gr-input-label > .label-text, .gr-dropdown-label > .label-text, .gr-checkbox-label > .label-text { color: #bdc3c7 !important; font-size: 0.9rem !important; }
+.gr-markdown pre code { 
+    background-color: rgba(30, 40, 50, 0.95) !important; 
+    border: 1px solid rgba(189, 195, 199, 0.3) !important; 
+    color: #ecf0f1; 
+    border-radius: 4px; padding: 0.8em; 
+}
+
+.gr-chatbot { 
+    background-color: rgba(44, 62, 80, 0.7) !important; 
+    border: 1px solid rgba(189, 195, 199, 0.2) !important; 
+}
+.gr-chatbot .message { 
+    background-color: rgba(52, 73, 94, 0.9) !important; 
+    color: #ecf0f1 !important; 
+    border: 1px solid rgba(189, 195, 199, 0.2) !important; 
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; 
+}
+.gr-chatbot .message.user { 
+    background-color: rgba(46, 204, 113, 0.8) !important; 
+    color: #2c3e50 !important; 
+}
+
+.gr-input-label > .label-text, .gr-dropdown-label > .label-text, .gr-checkbox-label > .label-text { 
+    color: #bdc3c7 !important; 
+    font-size: 0.9rem !important; 
+}
 .gr-info { color: #bdc3c7 !important; font-size: 0.85rem !important; }
-#status_bar_group { background-color: rgba(44, 62, 80, 0.8) !important; padding: 8px; border-radius: 6px; margin-bottom: 10px; }
-.tabnav button { background-color: rgba(52, 73, 94, 0.8) !important; color: #ecf0f1 !important; border-bottom: 2px solid transparent !important;}
-.tabnav button.selected { background-color: rgba(44, 62, 80, 0.95) !important; color: #1abc9c !important; border-bottom: 2px solid #1abc9c !important;}
-.gr-block.gr-box { padding: 1em; } /* Add some padding to groups/boxes */
+
+#status_bar_group { /* Renamed from elem_id to elem_classes if Gradio prefers that for styling groups */
+    background-color: rgba(44, 62, 80, 0.8) !important; 
+    padding: 8px; 
+    border-radius: 6px; 
+    margin-bottom: 10px; 
+}
+/* If using elem_classes="status-bar-group" on the gr.Row instead of elem_id */
+.status-bar-group { 
+    background-color: rgba(44, 62, 80, 0.8) !important; 
+    padding: 8px; 
+    border-radius: 6px; 
+    margin-bottom: 10px; 
+}
+
+
+.tabnav button { /* Style for tab buttons */
+    background-color: rgba(52, 73, 94, 0.8) !important; 
+    color: #ecf0f1 !important; 
+    border-bottom: 2px solid transparent !important;
+    border-top-left-radius: 6px !important; /* Slightly rounded top corners */
+    border-top-right-radius: 6px !important;
+    margin-right: 2px !important; /* Small gap between tab buttons */
+}
+.tabnav button.selected { 
+    background-color: rgba(44, 62, 80, 0.95) !important; /* Match tab content background */
+    color: #1abc9c !important; 
+    border-bottom: 2px solid #1abc9c !important;
+}
+
+.gr-block.gr-box { padding: 1em; } /* General padding for groups/boxes */
+
+/* Ensure the main title Markdown doesn't have excessive top margin */
+.gradio-container > .gr-block.gr-markdown:first-of-type h1 {
+    margin-top: 0 !important; /* This is more specific */
+}
 """
 
-with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent v5.2") as demo:
-    gr.Markdown("# 🚀 AI Research Mega Agent Dashboard")
+
+
+with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent v5.3") as demo:
+    gr.Markdown("# 🚀 AI Research Mega Agent Dashboard") # This is the first visible element
     
     avail_provs = get_available_providers()
     def_prov = avail_provs[0] if avail_provs else None
     def_models = get_model_display_names_for_provider(def_prov) if def_prov else []
     def_model_disp = get_default_model_display_name_for_provider(def_prov) if def_prov else None
     
-    with gr.Row(elem_id="status_bar_group"):
+    # Moved status bar below the main title for better flow
+    with gr.Row(elem_classes="status-bar-group"): # Use elem_classes for easier targeting
         with gr.Column(scale=3): agent_stat_tb = gr.Textbox(label="Agent Status", interactive=False, lines=1, value="Initializing systems...")
         with gr.Column(scale=1): memory_backend_info_tb = gr.Textbox(label="Memory Backend", value=f"{MEMORY_STORAGE_BACKEND}", interactive=False)
         if MEMORY_STORAGE_BACKEND == "SQLITE":
-            with gr.Column(scale=2): gr.Textbox(label="SQLite Path", value=f"{MEMORY_SQLITE_PATH}", interactive=False)
+            with gr.Column(scale=2): gr.Textbox(label="SQLite Path", value=f"{MEMORY_SQLITE_PATH}", interactive=False, elem_id="sqlite_path_display") # Added elem_id for potential specific styling
         elif MEMORY_STORAGE_BACKEND == "HF_DATASET":
-            with gr.Column(scale=2): gr.Textbox(label="HF Repos", value=f"M: {MEMORY_HF_MEM_REPO}, R: {MEMORY_HF_RULES_REPO}", interactive=False)
+            with gr.Column(scale=2): gr.Textbox(label="HF Repos", value=f"M: {MEMORY_HF_MEM_REPO}, R: {MEMORY_HF_RULES_REPO}", interactive=False, elem_id="hf_repos_display")
     
     with gr.Tabs() as main_tabs:
-        with gr.TabItem("⚙️ Config & 💬 Chat", id=0):
-            with gr.Row(equal_height=False):
+        with gr.TabItem("⚙️ Agent Configuration & 💬 Chat", id=0): # Combined Config and Chat
+            with gr.Row(equal_height=False): # Allow columns to size independently
                 with gr.Column(scale=1, min_width=380): # Sidebar for config
                     gr.Markdown("## ⚙️ LLM Configuration")
-                    with gr.Group():
+                    with gr.Group(): # Removed elem_classes="compact-group" unless specifically needed for sub-styling
                         prov_sel_dd = gr.Dropdown(label="AI Provider", choices=avail_provs, value=def_prov, interactive=True)
                         model_sel_dd = gr.Dropdown(label="AI Model", choices=def_models, value=def_model_disp, interactive=True)
                         api_key_tb = gr.Textbox(label="API Key Override (Optional)", type="password", placeholder="Paste key for selected provider")
                     with gr.Group():
-                        sys_prompt_tb = gr.Textbox(label="System Prompt Base", lines=12, value=DEFAULT_SYSTEM_PROMPT, interactive=True)
+                        sys_prompt_tb = gr.Textbox(label="System Prompt Base", lines=10, value=DEFAULT_SYSTEM_PROMPT, interactive=True)
                 
                 with gr.Column(scale=2): # Main chat area
                     gr.Markdown("## 💬 AI Chat Interface")
@@ -460,33 +582,36 @@ with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent
                         user_msg_tb = gr.Textbox(show_label=False, placeholder="Ask your research question or give an instruction...", scale=7, lines=1, max_lines=5, autofocus=True)
                         send_btn = gr.Button("Send", variant="primary", scale=1, min_width=100)
             
-            with gr.Accordion("📝 Full Response / Output Details", open=False, elem_id="response_accordion"):
+            with gr.Accordion("📝 Full Response / Output Details", open=False): # Initially closed
                 fmt_report_tb = gr.Textbox(label="Full AI Response", lines=10, interactive=True, show_copy_button=True, value="*AI responses will appear here...*")
                 dl_report_btn = gr.DownloadButton("Download Report", interactive=False, visible=False) 
             detect_out_md = gr.Markdown("*Insights used or other intermediate details will show here...*")
 
         with gr.TabItem("🧠 Knowledge Base Management", id=1):
-            gr.Markdown("## Manage Stored Knowledge")
+            gr.Markdown("## Manage Stored Knowledge") # Top level header for the tab
             with gr.Row(equal_height=False):
                 with gr.Column(scale=1):
-                    gr.Markdown("### 📜 Rules (Learned Insights)")
-                    rules_disp_ta = gr.TextArea(label="View/Edit Rules (one per line or '---' separated)", lines=15, interactive=True, placeholder="Load or type rules here...")
-                    with gr.Row():
-                        view_rules_btn = gr.Button("🔄 Load/Refresh Rules"); save_edited_rules_btn = gr.Button("💾 Save Edited Rules", variant="primary")
-                    upload_rules_fobj = gr.File(label="Upload Rules File (.txt or .jsonl)", file_types=[".txt", ".jsonl"])
-                    rules_stat_tb = gr.Textbox(label="Rules Operation Status", interactive=False, lines=2, placeholder="Status of rule operations...")
-                    with gr.Row():
-                        clear_rules_btn = gr.Button("⚠️ Clear All Rules", variant="stop")
-                        save_faiss_ram_btn_kb = gr.Button("Save FAISS Indices", visible=(MEMORY_STORAGE_BACKEND == "RAM"))
+                    with gr.Box(): # Using Box for a slightly more contained look
+                        gr.Markdown("### 📜 Rules (Learned Insights)")
+                        rules_disp_ta = gr.TextArea(label="View/Edit Rules", lines=15, interactive=True, placeholder="Load or type rules here (one per line or '---' separated for multiple).")
+                        with gr.Row():
+                            view_rules_btn = gr.Button("🔄 Load/Refresh Rules View"); save_edited_rules_btn = gr.Button("💾 Save Edited Rules", variant="primary")
+                        upload_rules_fobj = gr.File(label="Upload Rules File (.txt/.jsonl)", file_types=[".txt", ".jsonl"])
+                        rules_stat_tb = gr.Textbox(label="Rules Operation Status", interactive=False, lines=2, placeholder="Status of rule operations...")
+                        with gr.Row():
+                            clear_rules_btn = gr.Button("⚠️ Clear All Rules", variant="stop")
+                            save_faiss_ram_btn_kb = gr.Button("Save FAISS Indices", visible=(MEMORY_STORAGE_BACKEND == "RAM"))
                 
                 with gr.Column(scale=1):
-                    gr.Markdown("### 📚 Memories (Past Interactions)")
-                    mems_disp_json = gr.JSON(label="View Memories (JSON format)", scale=2) # scale might not work directly on gr.JSON
-                    with gr.Row(): view_mems_btn = gr.Button("🔄 Load/Refresh Memories")
-                    upload_mems_fobj = gr.File(label="Upload Memories File (.jsonl)", file_types=[".jsonl"])
-                    mems_stat_tb = gr.Textbox(label="Memories Operation Status", interactive=False, lines=2, placeholder="Status of memory operations...")
-                    clear_mems_btn = gr.Button("⚠️ Clear All Memories", variant="stop")
+                    with gr.Box():
+                        gr.Markdown("### 📚 Memories (Past Interactions)")
+                        mems_disp_json = gr.JSON(label="View Memories (JSON format)", scale=2) 
+                        with gr.Row(): view_mems_btn = gr.Button("🔄 Load/Refresh Memories View")
+                        upload_mems_fobj = gr.File(label="Upload Memories File (.jsonl)", file_types=[".jsonl"])
+                        mems_stat_tb = gr.Textbox(label="Memories Operation Status", interactive=False, lines=2, placeholder="Status of memory operations...")
+                        clear_mems_btn = gr.Button("⚠️ Clear All Memories", variant="stop")
     
+    # --- Event Handlers (remain the same as your last correct version) ---
     def dyn_upd_model_dd(sel_prov_dyn:str): models_dyn, def_model_dyn = get_model_display_names_for_provider(sel_prov_dyn), get_default_model_display_name_for_provider(sel_prov_dyn); return gr.Dropdown(choices=models_dyn, value=def_model_dyn, interactive=True)
     prov_sel_dd.change(fn=dyn_upd_model_dd, inputs=prov_sel_dd, outputs=model_sel_dd)
     chat_ins = [user_msg_tb, main_chat_disp, prov_sel_dd, model_sel_dd, api_key_tb, sys_prompt_tb]
@@ -532,10 +657,11 @@ with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent
 
     demo.load(fn=app_load_fn, inputs=None, outputs=[agent_stat_tb, rules_disp_ta, mems_disp_json])
 
+
 if __name__ == "__main__":
-    logger.info(f"Starting Gradio AI Research Mega Agent (v5.2 with Dashboard UI & Advanced Memory: {MEMORY_STORAGE_BACKEND})...")
+    logger.info(f"Starting Gradio AI Research Mega Agent (v5.3 with UI fixes & Advanced Memory: {MEMORY_STORAGE_BACKEND})...")
     app_port, app_server = int(os.getenv("GRADIO_PORT", 7860)), os.getenv("GRADIO_SERVER_NAME", "127.0.0.1")
     app_debug, app_share = os.getenv("GRADIO_DEBUG", "False").lower()=="true", os.getenv("GRADIO_SHARE", "False").lower()=="true"
     logger.info(f"Launching Gradio server: http://{app_server}:{app_port}. Debug: {app_debug}, Share: {app_share}")
-    demo.queue().launch(server_name=app_server, server_port=app_port, debug=app_debug, share=app_share) 
+    demo.queue().launch(server_name=app_server, server_port=app_port, debug=app_debug, share=app_share) # fill_height might not be needed with body/container min-height
     logger.info("Gradio application shut down.")