Restructure UI into left chat and right utility panel

app.py

@@ -22,6 +22,10 @@ DEFAULT_FREE_MODELS = [
     "meta-llama/Llama-3.1-8B-Instruct",
 ]
 DEFAULT_MODEL = os.getenv("DEFAULT_MODEL", DEFAULT_FREE_MODELS[0])
+PAPER_URL = os.getenv("PAPER_URL", "#")
+CODE_URL = os.getenv("CODE_URL", "#")
+DATASET_URL = os.getenv("DATASET_URL", "#")
+MODEL_URL = os.getenv("MODEL_URL", "#")
 
 SYSTEM_PROMPT = """You are a Deep Research assistant.
 You can think step by step, use tools, and then return a final answer.
@@ -125,6 +129,40 @@ CUSTOM_CSS = """
   color: #374151;
   margin-bottom: 8px;
 }
+
+.layout-gap {
+  gap: 12px;
+}
+
+.right-stack > * {
+  margin-bottom: 10px;
+}
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.icon-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  text-decoration: none !important;
+  color: #1f2937 !important;
+  background: #ffffff;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.icon-link:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
 """
 
 
@@ -421,58 +459,53 @@ with gr.Blocks(
     ),
     css=CUSTOM_CSS,
 ) as demo:
-    gr.HTML(
-        """
-<div class="banner-card">
-  <div class="banner-inner">
-    <div class="banner-title">QUEST Deep Research Agent</div>
-  </div>
-  <div class="banner-subtitle">
-    Multi-turn research agent with search + visit tools. Start with free models now, switch to your own model later.
-  </div>
-</div>
-"""
-    )
-    with gr.Row(elem_classes="banner-inner"):
-        with gr.Column(scale=2, elem_classes="banner-logo-wrap"):
-            gr.Image(
-                value=LOGO_PATH,
-                show_label=False,
-                container=False,
-                interactive=False,
-                show_download_button=False,
-                show_fullscreen_button=False,
-                elem_classes="banner-logo-image",
-            )
-        with gr.Column(scale=5):
-            gr.Markdown("")
-
-    with gr.Row():
-        with gr.Column(scale=5):
+    with gr.Row(elem_classes="layout-gap"):
+        with gr.Column(scale=7):
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-title">Research Question</div>')
+                gr.HTML('<div class="section-title">Chat</div>')
                 question = gr.Textbox(
                     show_label=False,
-                    placeholder="e.g. Compare top open-source deep research agents and summarize differences.",
+                    placeholder="Ask anything you want to research...",
                     lines=6,
                 )
                 with gr.Row():
                     run_btn = gr.Button("Run Research", variant="primary", size="lg")
                     stop_btn = gr.Button("Stop", variant="stop", size="lg")
                     clear_btn = gr.Button("Clear", variant="secondary", size="lg")
-                gr.Examples(
-                    examples=[
-                        ["Compare RAG and fine-tuning: trade-offs, cost, and when to use each."],
-                        ["Summarize the differences between Qwen2.5, Llama 3.1, and Mistral 7B for agent tasks."],
-                        ["What are the key design patterns for long-context research agents?"],
-                    ],
-                    inputs=question,
-                    label="Quick Examples",
+
+            with gr.Group(elem_classes="section-card"):
+                with gr.Tabs():
+                    with gr.TabItem("Result"):
+                        answer = gr.Markdown(label="Final Answer")
+                    with gr.TabItem("Record"):
+                        trace = gr.Code(label="Execution Trace (JSON)", language="json")
+
+        with gr.Column(scale=3, elem_classes="right-stack"):
+            with gr.Group(elem_classes="section-card"):
+                gr.Image(
+                    value=LOGO_PATH,
+                    show_label=False,
+                    container=False,
+                    interactive=False,
+                    show_download_button=False,
+                    show_fullscreen_button=False,
+                    elem_classes="banner-logo-image",
                 )
 
-        with gr.Column(scale=3):
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-title">Model & Runtime Settings</div>')
+                gr.HTML(
+                    f"""
+<div class="icon-grid">
+  <a class="icon-link" href="{PAPER_URL}" target="_blank" rel="noopener noreferrer">📄 Paper</a>
+  <a class="icon-link" href="{CODE_URL}" target="_blank" rel="noopener noreferrer">💻 Code</a>
+  <a class="icon-link" href="{DATASET_URL}" target="_blank" rel="noopener noreferrer">🗂️ Dataset</a>
+  <a class="icon-link" href="{MODEL_URL}" target="_blank" rel="noopener noreferrer">🧠 Model</a>
+</div>
+"""
+                )
+
+            with gr.Group(elem_classes="section-card"):
+                gr.HTML('<div class="section-title">Settings</div>')
                 model = gr.Dropdown(
                     label="Model",
                     choices=DEFAULT_FREE_MODELS,
@@ -488,12 +521,17 @@ with gr.Blocks(
                     label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1
                 )
 
-    with gr.Group(elem_classes="section-card"):
-        with gr.Tabs():
-            with gr.TabItem("Final Answer"):
-                answer = gr.Markdown(label="Final Answer")
-            with gr.TabItem("Execution Trace (JSON)"):
-                trace = gr.Code(label="Execution Trace (JSON)", language="json")
+            with gr.Group(elem_classes="section-card"):
+                gr.HTML('<div class="section-title">Recommended Dialogues</div>')
+                gr.Examples(
+                    examples=[
+                        ["Compare RAG and fine-tuning: trade-offs, cost, and when to use each."],
+                        ["Summarize the differences between Qwen2.5, Llama 3.1, and Mistral 7B for agent tasks."],
+                        ["What are the key design patterns for long-context research agents?"],
+                    ],
+                    inputs=question,
+                    label="",
+                )
 
     run_event = run_btn.click(
         fn=run_ui,