fix: simplify Gradio UI to fit single viewport

- Reduce header to 2 lines (title + one-line description)
- Remove MCP Tools tabs UI (MCP server still active at /gradio_api/mcp/)
- Simplify examples (just questions, no extra params shown)
- Minimal footer with disclaimer and MCP endpoint
- Remove unused mcp_tools imports from app.py

This fixes the header cutoff issue in HuggingFace Spaces iframe by
reducing total content to fit within standard viewport height.

docs/bugs/003_ui_viewport_redesign.md

@@ -0,0 +1,173 @@
+# Bug 003: UI Viewport Overflow - Redesign Required
+
+**Date:** November 27, 2025
+**Status:** Active
+**Severity:** High (Demo UX)
+**Related:** 001_gradio_ui_cutoff.md, 002_gradio_ui_investigation.md
+
+## Problem Summary
+
+The Gradio UI has too much content to fit in a single viewport when embedded in HuggingFace Spaces iframe. The header gets cut off on initial load due to iframe rendering behavior.
+
+**Key observation:** When user zooms out (cmd-), the iframe re-renders and everything becomes visible. This confirms it's a viewport/content overflow issue, not a pure CSS bug.
+
+## Current UI Elements (Top to Bottom)
+
+```
+1. Title: "DeepCritical"
+2. Subtitle: "AI-Powered Drug Repurposing Research Agent"
+3. Description paragraph
+4. Example questions (3 bullet points)
+5. Orchestrator Mode selector (simple/magentic)
+6. API Key input (BYOK)
+7. API Provider selector (openai/anthropic)
+8. Chatbot component (large)
+9. Examples table (4 rows with Mode, API Key, Provider columns)
+10. MCP Tools section header
+11. MCP Tools tabs (PubMed, Clinical Trials, Preprints, Search All, Analyze)
+12. Selected tool interface (Query input, Max Results slider, buttons)
+13. Footer disclaimer
+```
+
+**Problem:** This is ~13 distinct UI sections. Too much for one screen.
+
+## What Changed Recently
+
+| Component | Before | After | Purpose |
+|-----------|--------|-------|---------|
+| Orchestrator Mode | Not visible | simple/magentic toggle | Multi-agent support |
+| API Key | Not visible | Text input (password) | BYOK for paid tiers |
+| API Provider | Not visible | openai/anthropic toggle | Support both providers |
+| Backend info | None | "Free Tier (HF Inference)" banner | User knows what's running |
+
+These additions (BYOK, provider selection, mode selection) added ~100px+ of vertical space.
+
+## Root Cause Analysis
+
+1. **Iframe height constraint:** HF Spaces iframe has fixed viewport
+2. **Content overflow:** 13 sections exceed viewport height
+3. **Gradio ChatInterface:** Designed to fill available space, but when there's content above AND below, it can't calculate correctly
+4. **No scroll on initial load:** Iframe rendering doesn't trigger scroll to top
+
+## Redesign Options
+
+### Option A: Minimal Header (Recommended)
+
+Remove redundant/verbose content. Keep only essentials above the chatbot.
+
+```
+BEFORE (verbose):
+┌─────────────────────────────────────────┐
+│ 🧬 DeepCritical                         │
+│ AI-Powered Drug Repurposing Research... │
+│ Ask questions about potential drug...   │
+│ Example questions:                      │
+│ • "What drugs could be repurposed..."   │
+│ • "Is metformin effective..."           │
+│ • "What existing medications..."        │
+├─────────────────────────────────────────┤
+│ Orchestrator Mode: [simple] [magentic]  │
+│ API Key: [____________]                 │
+│ API Provider: [openai] [anthropic]      │
+├─────────────────────────────────────────┤
+│ Chatbot                                 │
+│                                         │
+└─────────────────────────────────────────┘
+
+AFTER (minimal):
+┌─────────────────────────────────────────┐
+│ 🧬 DeepCritical - Drug Repurposing AI   │
+├─────────────────────────────────────────┤
+│ Chatbot                                 │
+│                                         │
+│                                         │
+│                                         │
+├─────────────────────────────────────────┤
+│ ⚙️ Settings (accordion - collapsed)     │
+└─────────────────────────────────────────┘
+```
+
+**Changes:**
+- One-line title (no subtitle/description)
+- Examples ONLY in the chatbot examples feature (already there)
+- Config in collapsed accordion (Gradio default for additional_inputs)
+- Remove MCP Tools section entirely OR move to separate tab
+
+### Option B: Tabbed Interface
+
+```
+┌─────────────────────────────────────────┐
+│ 🧬 DeepCritical                         │
+│ [Chat] [MCP Tools] [About]              │
+├─────────────────────────────────────────┤
+│                                         │
+│ (Selected tab content fills space)      │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+**Changes:**
+- Title only
+- Tabs for different features
+- Chat tab: Just chatbot + collapsed config
+- MCP Tools tab: The individual search interfaces
+- About tab: Description, examples, links
+
+### Option C: Remove MCP Tools Section
+
+The MCP Tools section (PubMed Search, Clinical Trials, etc.) duplicates functionality available through:
+1. The main chatbot (searches automatically)
+2. Claude Desktop via MCP protocol
+
+**Rationale:** For a hackathon demo, users care about the CHAT experience. Power users can use MCP.
+
+```
+┌─────────────────────────────────────────┐
+│ 🧬 DeepCritical - Drug Repurposing AI   │
+│ Ask about drug repurposing opportunities│
+├─────────────────────────────────────────┤
+│ Chatbot                                 │
+│                                         │
+│                                         │
+├─────────────────────────────────────────┤
+│ ⚙️ Settings ▼                           │
+│ (collapsed: mode, api key, provider)    │
+├─────────────────────────────────────────┤
+│ MCP: /gradio_api/mcp/ for Claude Desktop│
+└─────────────────────────────────────────┘
+```
+
+## Recommendation
+
+**Option A + C combined:**
+
+1. **Minimal header:** One line title + one line description
+2. **Remove example bullets:** Keep only in ChatInterface examples feature
+3. **Keep config in accordion:** Already using `additional_inputs` (collapsed by default)
+4. **Remove MCP Tools UI:** Keep MCP server active, remove the tab interfaces
+5. **Minimal footer:** One line with MCP endpoint info
+
+**Estimated vertical savings:** ~400px (should fit in single viewport)
+
+## Implementation Checklist
+
+- [ ] Simplify gr.Markdown header to 2 lines max
+- [ ] Remove MCP Tools gr.Tab section from UI
+- [ ] Verify additional_inputs accordion is collapsed by default
+- [ ] Add single-line footer with MCP endpoint
+- [ ] Test in HF Spaces iframe at 100% zoom
+- [ ] Test on mobile viewport
+
+## Files to Modify
+
+```
+src/app.py  - Main UI layout changes
+```
+
+## Success Criteria
+
+- [ ] Full UI visible without scrolling at 100% zoom
+- [ ] Header ("DeepCritical") always visible
+- [ ] Chatbot functional
+- [ ] Config accessible (in accordion)
+- [ ] MCP still works (server active, just no UI tabs)

src/app.py

@@ -11,13 +11,6 @@ from pydantic_ai.providers.anthropic import AnthropicProvider
 from pydantic_ai.providers.openai import OpenAIProvider
 
 from src.agent_factory.judges import HFInferenceJudgeHandler, JudgeHandler, MockJudgeHandler
-from src.mcp_tools import (
-    analyze_hypothesis,
-    search_all_sources,
-    search_biorxiv,
-    search_clinical_trials,
-    search_pubmed,
-)
 from src.orchestrator_factory import create_orchestrator
 from src.tools.biorxiv import BioRxivTool
 from src.tools.clinicaltrials import ClinicalTrialsTool
@@ -202,168 +195,59 @@ def create_demo() -> Any:
     """
     with gr.Blocks(
         title="DeepCritical - Drug Repurposing Research Agent",
-        # fill_height=True removed to prevent header cutoff in HF Spaces
     ) as demo:
-        # 1. Title & Description (Top of page)
-        gr.Markdown("""
-        # 🧬 DeepCritical
-        ## AI-Powered Drug Repurposing Research Agent
-
-        Ask questions about potential drug repurposing opportunities.
-        The agent searches PubMed, ClinicalTrials.gov, and bioRxiv/medRxiv preprints.
-
-        **Example questions:**
-        - "What drugs could be repurposed for Alzheimer's disease?"
-        - "Is metformin effective for cancer treatment?"
-        - "What existing medications show promise for Long COVID?"
-        """)
-
-        # 2. Main chat interface
-        # Note: additional_inputs will render in an accordion below the chat input by default.
-        # This is standard Gradio ChatInterface behavior and ensures a clean layout.
+        # Minimal header (2 lines) to fit in single viewport
+        gr.Markdown(
+            "# 🧬 DeepCritical\n"
+            "*AI-powered drug repurposing research — searches PubMed, ClinicalTrials.gov & bioRxiv*"
+        )
+
+        # Main chat interface with config in collapsed accordion
         gr.ChatInterface(
             fn=research_agent,
             examples=[
-                [
-                    "What drugs could be repurposed for Alzheimer's disease?",
-                    "simple",
-                    "",
-                    "openai",
-                ],
-                [
-                    "Is metformin effective for treating cancer?",
-                    "simple",
-                    "",
-                    "openai",
-                ],
-                [
-                    "What medications show promise for Long COVID treatment?",
-                    "simple",
-                    "",
-                    "openai",
-                ],
-                [
-                    "Can statins be repurposed for neurological conditions?",
-                    "simple",
-                    "",
-                    "openai",
-                ],
+                ["What drugs could be repurposed for Alzheimer's disease?"],
+                ["Is metformin effective for treating cancer?"],
+                ["What medications show promise for Long COVID?"],
             ],
             additional_inputs=[
                 gr.Radio(
                     choices=["simple", "magentic"],
                     value="simple",
-                    label="Orchestrator Mode",
-                    info="Simple: Linear (OpenAI/Anthropic) | Magentic: Multi-Agent (OpenAI)",
+                    label="Mode",
+                    info="Simple: Linear | Magentic: Multi-Agent (OpenAI only)",
                 ),
                 gr.Textbox(
-                    label="🔑 API Key (Optional - Bring Your Own Key)",
+                    label="API Key (Optional)",
                     placeholder="sk-... or sk-ant-...",
                     type="password",
-                    info="Enter your own API key for full AI analysis. Never stored.",
+                    info="Bring your own key for premium models. Never stored.",
                 ),
                 gr.Radio(
                     choices=["openai", "anthropic"],
                     value="openai",
-                    label="API Provider",
-                    info="Select the provider for your API key",
+                    label="Provider",
                 ),
             ],
         )
 
-        # MCP Tool Interfaces (exposed via MCP protocol)
-        gr.Markdown("---\n## MCP Tools (Also Available via Claude Desktop)")
-
-        with gr.Tab("PubMed Search"):
-            gr.Interface(
-                fn=search_pubmed,
-                inputs=[
-                    gr.Textbox(label="Query", placeholder="metformin alzheimer"),
-                    gr.Slider(1, 50, value=10, step=1, label="Max Results"),
-                ],
-                outputs=gr.Markdown(label="Results"),
-                api_name="search_pubmed",
-            )
-
-        with gr.Tab("Clinical Trials"):
-            gr.Interface(
-                fn=search_clinical_trials,
-                inputs=[
-                    gr.Textbox(label="Query", placeholder="diabetes phase 3"),
-                    gr.Slider(1, 50, value=10, step=1, label="Max Results"),
-                ],
-                outputs=gr.Markdown(label="Results"),
-                api_name="search_clinical_trials",
-            )
-
-        with gr.Tab("Preprints"):
-            gr.Interface(
-                fn=search_biorxiv,
-                inputs=[
-                    gr.Textbox(label="Query", placeholder="long covid treatment"),
-                    gr.Slider(1, 50, value=10, step=1, label="Max Results"),
-                ],
-                outputs=gr.Markdown(label="Results"),
-                api_name="search_biorxiv",
-            )
-
-        with gr.Tab("Search All"):
-            gr.Interface(
-                fn=search_all_sources,
-                inputs=[
-                    gr.Textbox(label="Query", placeholder="metformin cancer"),
-                    gr.Slider(1, 20, value=5, step=1, label="Max Per Source"),
-                ],
-                outputs=gr.Markdown(label="Results"),
-                api_name="search_all",
-            )
-
-        with gr.Tab("Analyze Hypothesis"):
-            gr.Interface(
-                fn=analyze_hypothesis,
-                inputs=[
-                    gr.Textbox(label="Drug", placeholder="metformin"),
-                    gr.Textbox(label="Condition", placeholder="Alzheimer's disease"),
-                    gr.Textbox(
-                        label="Evidence Summary",
-                        placeholder="Studies show metformin reduces tau phosphorylation...",
-                        lines=5,
-                    ),
-                ],
-                outputs=gr.Markdown(label="Analysis Result"),
-                api_name="analyze_hypothesis",
-            )
-
-        gr.Markdown("""
-        ---
-        **Note**: This is a research tool and should not be used for medical decisions.
-        Always consult healthcare professionals for medical advice.
-
-        Built with PydanticAI + PubMed, ClinicalTrials.gov & bioRxiv
-
-        **MCP Server**: Available at `/gradio_api/mcp/` for Claude Desktop integration
-        """)
+        # Minimal footer
+        gr.Markdown(
+            "*Research tool only — not for medical decisions. " "MCP: `/gradio_api/mcp/`*",
+            elem_classes=["footer"],
+        )
 
     return demo
 
 
 def main() -> None:
     """Run the Gradio app with MCP server enabled."""
-    # CSS to fix the header cutoff issue in HuggingFace Spaces
-    # Adds padding to the top of the container to clear the HF banner
-    css = """
-    .gradio-container {
-        padding-top: 50px !important;
-    }
-    """
-
     demo = create_demo()
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=False,
         mcp_server=True,
-        css=css,
         ssr_mode=False,  # Fix for intermittent loading/hydration issues in HF Spaces
     )