Upload folder using huggingface_hub

demo/ui.py

@@ -42,32 +42,21 @@ except ImportError:  # flat layout (HF Space container)
 # Mimics Anthropic's actual surface colors: warmer parchment background,
 # deep warm ink for text, Anthropic burnt-sienna as primary accent.
 CLAUDE_CSS = """
-/* Variables */
+/* Variables — dark mode default, warm ink + sienna accent */
 :root {
-    --lf-bg:           #f0eee6;          /* warm parchment background */
-    --lf-surface:      #faf9f5;          /* card surface, lighter than bg */
-    --lf-surface-alt:  #ffffff;
-    --lf-border:       #dcd6c7;          /* warm grey border */
-    --lf-border-soft:  #e8e2d3;
-    --lf-text:         #141413;          /* deep warm ink */
-    --lf-text-muted:   #595550;
-    --lf-text-subtle:  #8a847c;
-    --lf-accent:       #c96442;          /* Anthropic burnt sienna */
-    --lf-accent-dk:    #a8522f;
-    --lf-accent-soft:  #f4d6c5;
-    --lf-good:         #3d6b4c;
-    --lf-bad:          #a0483a;
-}
-@media (prefers-color-scheme: dark) {
-    /* keep warm palette even in dark mode — Claude itself stays warm */
-    :root {
-        --lf-bg:        #262420;
-        --lf-surface:   #2f2c26;
-        --lf-surface-alt:#393630;
-        --lf-border:    #3d3a33;
-        --lf-text:      #f0eee6;
-        --lf-text-muted:#a8a29a;
-    }
+    --lf-bg:           #1f1d1a;          /* warm near-black page */
+    --lf-surface:      #2a2824;          /* card surface */
+    --lf-surface-alt:  #332f2a;          /* elevated surface (code, plots) */
+    --lf-border:       #403b34;          /* card edge */
+    --lf-border-soft:  #332f2a;          /* soft inner divider */
+    --lf-text:         #f3f0e8;          /* warm off-white */
+    --lf-text-muted:   #b5ada0;          /* muted body */
+    --lf-text-subtle:  #857d72;          /* labels, captions */
+    --lf-accent:       #e28763;          /* brighter sienna for dark bg */
+    --lf-accent-dk:    #c96442;          /* hover / pressed */
+    --lf-accent-soft:  #4a2f22;          /* accent-tinted dark for selected bg */
+    --lf-good:         #7ab68c;
+    --lf-bad:          #d47d6a;
 }
 
 /* Page */
@@ -81,6 +70,44 @@ html, body, .gradio-container {
     max-width: 1180px !important;
     margin: 0 auto !important;
     padding: 1.75rem 1.5rem 3rem !important;
+
+    /* Override Gradio's internal theme variables so every component
+       inherits the warm palette instead of Gradio's blue-on-white defaults */
+    --body-text-color:              var(--lf-text)         !important;
+    --body-text-color-subdued:      var(--lf-text-muted)   !important;
+    --body-background-fill:         var(--lf-bg)           !important;
+    --background-fill-primary:      var(--lf-surface)      !important;
+    --background-fill-secondary:    var(--lf-bg)           !important;
+    --border-color-primary:         var(--lf-border)       !important;
+    --border-color-accent:          var(--lf-accent)       !important;
+    --input-background-fill:        var(--lf-surface)      !important;
+    --input-border-color:           var(--lf-border)       !important;
+    --input-text-color:             var(--lf-text)         !important;
+    --input-placeholder-color:      var(--lf-text-subtle)  !important;
+    --block-background-fill:        var(--lf-surface)      !important;
+    --block-border-color:           var(--lf-border-soft)  !important;
+    --block-label-background-fill:  transparent            !important;
+    --block-label-text-color:       var(--lf-text)         !important;
+    --block-title-text-color:       var(--lf-text)         !important;
+    --block-info-text-color:        var(--lf-text-muted)   !important;
+    --neutral-50:                   var(--lf-surface)      !important;
+    --neutral-100:                  var(--lf-bg)           !important;
+    --neutral-200:                  var(--lf-border-soft)  !important;
+    --neutral-300:                  var(--lf-border)       !important;
+    --neutral-400:                  var(--lf-text-subtle)  !important;
+    --neutral-500:                  var(--lf-text-muted)   !important;
+    --neutral-600:                  var(--lf-text-muted)   !important;
+    --neutral-700:                  var(--lf-text)         !important;
+    --neutral-800:                  var(--lf-text)         !important;
+    --neutral-900:                  var(--lf-text)         !important;
+    --color-accent:                 var(--lf-accent)       !important;
+    --color-accent-soft:            var(--lf-accent-soft)  !important;
+    --link-text-color:              var(--lf-accent)       !important;
+    --link-text-color-hover:        var(--lf-accent-dk)    !important;
+    --button-primary-background-fill:         var(--lf-accent)    !important;
+    --button-primary-background-fill-hover:   var(--lf-accent-dk) !important;
+    --button-primary-text-color:              #ffffff             !important;
+    --button-primary-border-color:            var(--lf-accent)    !important;
 }
 
 /* Typography — serif for headings to match Claude's Tiempos-style hero */
@@ -287,12 +314,111 @@ html, body, .gradio-container {
     font-size: 0.9rem !important;
 }
 
-/* JSON renderer */
-.gradio-container .json-holder {
+/* JSON renderer — force warm ink for every node + muted for keys */
+.gradio-container .json-holder,
+.gradio-container .json-container,
+.gradio-container .json-node {
     background: var(--lf-surface) !important;
     border: 1px solid var(--lf-border-soft) !important;
     border-radius: 8px !important;
     padding: 0.9rem !important;
+    color: var(--lf-text) !important;
+    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
+    font-size: 0.82rem !important;
+}
+.gradio-container .json-holder *,
+.gradio-container .json-container * {
+    color: var(--lf-text) !important;
+}
+.gradio-container .json-holder .key,
+.gradio-container .json-container .key {
+    color: var(--lf-accent-dk) !important;
+    font-weight: 600 !important;
+}
+.gradio-container .json-holder .string-value {
+    color: #3d6b4c !important;
+}
+.gradio-container .json-holder .number-value {
+    color: #874123 !important;
+}
+
+/* Dropdown option list (open state) — Gradio defaults to white-on-white */
+.gradio-container .options,
+.gradio-container .options .item,
+.gradio-container [role="listbox"],
+.gradio-container [role="option"] {
+    background: var(--lf-surface) !important;
+    color: var(--lf-text) !important;
+    border-color: var(--lf-border) !important;
+}
+.gradio-container [role="option"]:hover,
+.gradio-container .options .item:hover {
+    background: var(--lf-accent-soft) !important;
+    color: var(--lf-text) !important;
+}
+.gradio-container [role="option"][aria-selected="true"] {
+    background: var(--lf-accent) !important;
+    color: #ffffff !important;
+}
+
+/* Markdown rendered inside blocks */
+.gradio-container .prose,
+.gradio-container .markdown,
+.gradio-container [data-testid="markdown"] {
+    color: var(--lf-text) !important;
+}
+.gradio-container .prose p,
+.gradio-container .markdown p,
+.gradio-container [data-testid="markdown"] p {
+    color: var(--lf-text-muted) !important;
+}
+.gradio-container .prose strong,
+.gradio-container .markdown strong {
+    color: var(--lf-text) !important;
+}
+.gradio-container .prose a,
+.gradio-container .markdown a {
+    color: var(--lf-accent) !important;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+.gradio-container .prose code,
+.gradio-container .markdown code {
+    background: var(--lf-bg) !important;
+    color: var(--lf-accent-dk) !important;
+    padding: 0.12em 0.4em !important;
+    border-radius: 4px !important;
+    font-size: 0.84em !important;
+}
+
+/* Inline label / info text under inputs */
+.gradio-container .block-info,
+.gradio-container .info {
+    color: var(--lf-text-muted) !important;
+    font-size: 0.82rem !important;
+}
+
+/* Slider track+value labels */
+.gradio-container .svelte-range-slider,
+.gradio-container .min-val,
+.gradio-container .max-val,
+.gradio-container .value {
+    color: var(--lf-text) !important;
+}
+.gradio-container .value-text {
+    color: var(--lf-accent-dk) !important;
+    font-weight: 600 !important;
+}
+
+/* Radio buttons — labels should be visible */
+.gradio-container .wrap label,
+.gradio-container [role="radio"] + label {
+    color: var(--lf-text) !important;
+}
+
+/* Status badges inside obs.done etc */
+.gradio-container .status-text {
+    color: var(--lf-text) !important;
 }
 
 /* Accordion headers */
@@ -313,26 +439,59 @@ footer, .gradio-container footer { display: none !important; }
     border-radius: 5px;
 }
 .gradio-container ::-webkit-scrollbar-thumb:hover { background: var(--lf-text-subtle); }
+
+/* Sidebar column — subtle card treatment, sticky-feeling */
+.gradio-container .lf-sidebar {
+    background: var(--lf-surface) !important;
+    border: 1px solid var(--lf-border) !important;
+    border-radius: 12px !important;
+    padding: 1.25rem 1.25rem 1.1rem !important;
+    box-shadow: 0 1px 0 rgba(20,20,19,0.02);
+}
+.gradio-container .lf-sidebar h3 {
+    margin-top: 0.15rem !important;
+    margin-bottom: 0.3rem !important;
+}
+.gradio-container .lf-sidebar p {
+    font-size: 0.9rem !important;
+    margin-bottom: 0.85rem !important;
+}
+.gradio-container .lf-sidebar .block {
+    /* Sidebars nest "blocks"; flatten them so the card feel is the outer one */
+    background: transparent !important;
+    border: none !important;
+    padding: 0.35rem 0 !important;
+    border-radius: 0 !important;
+}
+.gradio-container .lf-sidebar button {
+    width: 100% !important;
+}
+
+/* Main pane plots+outputs — a bit more breathing room */
+.gradio-container .gr-plot, .gradio-container .plot-wrap {
+    background: var(--lf-surface-alt) !important;
+    border-radius: 10px !important;
+}
 """
 
-# Plotly layout template — matches the Claude palette.
-# Axes are intentionally excluded so callers can override type/log/scale
-# without kwarg collisions.
+# Plotly layout template — matches dark Claude palette.
 _PLOTLY_LAYOUT = dict(
     font=dict(family="Inter, -apple-system, system-ui, sans-serif",
-              color="#2a2319", size=12),
-    paper_bgcolor="#faf9f5",
-    plot_bgcolor="#ffffff",
+              color="#f3f0e8", size=12),
+    paper_bgcolor="#2a2824",     # card surface
+    plot_bgcolor="#1f1d1a",       # page background, slightly darker
     margin=dict(l=60, r=30, t=60, b=55),
-    hoverlabel=dict(bgcolor="#2a2319", font_color="#faf9f5",
-                    font_family="Inter", bordercolor="#2a2319"),
-    legend=dict(bgcolor="rgba(255,255,255,0.92)",
-                bordercolor="#e8e4dc", borderwidth=1),
+    hoverlabel=dict(bgcolor="#f3f0e8", font_color="#1f1d1a",
+                    font_family="Inter", bordercolor="#e28763"),
+    legend=dict(bgcolor="rgba(31,29,26,0.85)",
+                bordercolor="#403b34", borderwidth=1,
+                font=dict(color="#f3f0e8")),
 )
-_AXIS_STYLE = dict(gridcolor="#e8e4dc", zerolinecolor="#d5d0c6",
-                   showline=True, linecolor="#d5d0c6")
+_AXIS_STYLE = dict(gridcolor="#403b34", zerolinecolor="#554e45",
+                   showline=True, linecolor="#554e45",
+                   tickfont=dict(color="#b5ada0"))
 _TITLE_STYLE = dict(x=0.02, xanchor="left",
-                    font=dict(size=14, color="#2a2319"))
+                    font=dict(size=14, color="#f3f0e8", weight=500))
 
 OPT_COLORS = {
     "sgd":      "#c05450",
@@ -396,15 +555,19 @@ def _contour_plot(ls, trajectories=None, title=None, subtitle=None):
     fig.add_trace(go.Contour(
         x=xs, y=ys, z=Z,
         zmin=float(lo), zmax=float(hi),
+        # Dark-mode colorscale: deep warm valleys → glowing sienna peaks
         colorscale=[
-            [0.0, "#fdf5f0"], [0.2, "#fbe5d6"], [0.4, "#f6c9a8"],
-            [0.6, "#eea87b"], [0.8, "#d97757"], [1.0, "#b75d3f"],
+            [0.0, "#1f1d1a"], [0.15, "#2f2a22"], [0.3, "#4a2f22"],
+            [0.5, "#7a4229"], [0.7, "#c25a3a"], [0.85, "#e28763"],
+            [1.0, "#f4d6c5"],
         ],
         contours=dict(coloring="heatmap", showlabels=False),
-        line=dict(width=0.5, color="rgba(255,255,255,0.35)"),
-        colorbar=dict(title=dict(text="f(x)", font=dict(size=11)),
+        line=dict(width=0.5, color="rgba(243,240,232,0.12)"),
+        colorbar=dict(title=dict(text="f(x)",
+                                  font=dict(size=11, color="#f3f0e8")),
                       thickness=12, len=0.85,
-                      tickfont=dict(size=10), outlinewidth=0),
+                      tickfont=dict(size=10, color="#b5ada0"),
+                      outlinewidth=0),
         hovertemplate="x₁=%{x:.3f}<br>x₂=%{y:.3f}<br>f=%{z:.3f}<extra></extra>",
     ))
 
@@ -1092,56 +1255,71 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
         gr.HTML(HERO_HTML)
 
         with gr.Tabs():
-            # --- Tab 0: OpenEnv API (primary — LLM auto-run + manual) ---
+            # --- Tab 0: OpenEnv (primary — LLM auto-run + manual stepping) ---
             with gr.Tab("OpenEnv"):
-                gr.Markdown(
-                    "### Connect an LLM and let it play\n\n"
-                    "Point at any OpenAI-compatible `/v1/chat/completions` "
-                    "endpoint — Ollama, HF Router, OpenAI, a vLLM server. "
-                    "Click **Run episode** and the model drives one full "
-                    "run of the env, streaming each REPL action here in real time."
-                )
-                with gr.Row():
-                    ep_choice = gr.Dropdown(
-                        list(PRESET_ENDPOINTS.keys()),
-                        value="Ollama (localhost:11434)",
-                        label="Endpoint preset",
-                    )
-                    model_name_in = gr.Dropdown(
-                        PRESET_MODELS, value="qwen2.5:3b",
-                        label="Model name", allow_custom_value=True,
-                    )
-                with gr.Row():
-                    custom_url_in = gr.Textbox(
-                        value="", label="Custom base URL (optional)",
-                        placeholder="e.g. http://localhost:8080/v1",
-                        scale=2,
-                    )
-                    key_in = gr.Textbox(
-                        value="", label="API key (optional)",
-                        placeholder="Authorization: Bearer <key>",
-                        type="password", scale=2,
-                    )
-                with gr.Row():
-                    tier_llm = gr.Dropdown(["T0", "T1", "T2"], value="T0",
-                                           label="Tier")
-                    seed_llm = gr.Slider(0, 100, value=42, step=1, label="Seed")
-                    temp_llm = gr.Slider(0, 1.5, value=0.7, step=0.05,
-                                          label="Temperature")
-                    max_turns_llm = gr.Slider(3, 15, value=10, step=1,
-                                               label="Max turns")
-                run_btn = gr.Button("▶ Run episode", variant="primary")
-
-                with gr.Row():
-                    with gr.Column(scale=3):
+                with gr.Row(equal_height=False):
+                    # -------- SIDEBAR (left) --------
+                    with gr.Column(scale=1, min_width=340, elem_classes="lf-sidebar"):
+                        gr.Markdown("### Connect an LLM")
+                        gr.Markdown(
+                            "Point at any OpenAI-compatible "
+                            "`/v1/chat/completions` endpoint. Hit "
+                            "**▶ Run episode** and the model drives one "
+                            "full run of the env."
+                        )
+
+                        ep_choice = gr.Dropdown(
+                            list(PRESET_ENDPOINTS.keys()),
+                            value="Ollama (localhost:11434)",
+                            label="Endpoint",
+                        )
+                        model_name_in = gr.Dropdown(
+                            PRESET_MODELS, value="qwen2.5:3b",
+                            label="Model", allow_custom_value=True,
+                        )
+                        custom_url_in = gr.Textbox(
+                            value="", label="Custom base URL",
+                            placeholder="http://localhost:8080/v1",
+                        )
+                        key_in = gr.Textbox(
+                            value="", label="API key",
+                            placeholder="Bearer <key>",
+                            type="password",
+                        )
+
+                        gr.Markdown("---")
+                        gr.Markdown("### Episode config")
+
+                        tier_llm = gr.Dropdown(["T0", "T1", "T2"], value="T0",
+                                                label="Tier")
+                        seed_llm = gr.Slider(0, 100, value=42, step=1, label="Seed")
+                        temp_llm = gr.Slider(0, 1.5, value=0.7, step=0.05,
+                                              label="Temperature")
+                        max_turns_llm = gr.Slider(3, 15, value=10, step=1,
+                                                   label="Max turns")
+
+                        run_btn = gr.Button("▶ Run episode", variant="primary",
+                                             size="lg")
+
+                        gr.Markdown(
+                            "<br><small>Also available: manual stepping "
+                            "below. Reset first, then pick an action kind "
+                            "and step.</small>"
+                        )
+
+                    # -------- MAIN PANE (right) --------
+                    with gr.Column(scale=2, min_width=580):
+                        gr.Markdown("### Transcript")
                         transcript = gr.Markdown(
-                            "*Click **Run episode** to drive the env with "
-                            "the selected LLM. Transcript streams below.*",
-                            label="Transcript",
+                            "*Configure the LLM on the left and hit "
+                            "**▶ Run episode** — each turn streams here "
+                            "as the model plays.*",
                         )
-                    with gr.Column(scale=2):
-                        latest_obs = gr.JSON(label="Latest observation")
-                llm_reward_plot = gr.Plot(label="Reward breakdown (on episode end)")
+                        with gr.Row():
+                            latest_obs = gr.JSON(label="Latest observation",
+                                                  height=320)
+                        llm_reward_plot = gr.Plot(
+                            label="Reward breakdown (on episode end)")
 
                 run_btn.click(
                     _llm_auto_run,
@@ -1150,38 +1328,51 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
                     [transcript, latest_obs, llm_reward_plot],
                 )
 
-                gr.Markdown("---\n### Manual stepping")
-                gr.Markdown(
-                    "Drive the env one action at a time. Reset first, then "
-                    "pick an action kind and hit **Step**. Observations "
-                    "render as JSON — exactly what the HTTP `/step` endpoint returns."
-                )
-                with gr.Row():
-                    tier4 = gr.Dropdown(["T0", "T1", "T2"], value="T0", label="Tier")
-                    seed4 = gr.Slider(0, 100, value=42, step=1, label="Seed")
-                    reset_btn = gr.Button("Reset", variant="primary")
-                status4 = gr.Markdown("*No active env — hit **reset** to begin.*")
-                obs4_reset = gr.JSON(label="Initial observation")
+                # -------- Manual stepping section --------
+                gr.Markdown("---")
+                gr.Markdown("### Manual stepping")
+                with gr.Row(equal_height=False):
+                    with gr.Column(scale=1, min_width=340, elem_classes="lf-sidebar"):
+                        gr.Markdown(
+                            "Drive the env one action at a time. "
+                            "Reset first, then pick an action kind and step."
+                        )
+                        tier4 = gr.Dropdown(["T0", "T1", "T2"], value="T0",
+                                             label="Tier")
+                        seed4 = gr.Slider(0, 100, value=42, step=1, label="Seed")
+                        reset_btn = gr.Button("Reset env", variant="primary")
+
+                        gr.Markdown("---")
+                        kind4 = gr.Radio(
+                            ["run_baseline", "draft", "inspect", "commit"],
+                            value="run_baseline", label="Action kind")
+                        with gr.Accordion("run_baseline args", open=True):
+                            bname4 = gr.Dropdown(
+                                ["sgd", "momentum", "adam", "lbfgs"],
+                                value="adam", label="Reference optimizer")
+                        with gr.Accordion("draft args", open=False):
+                            code4 = gr.Code(value=SAMPLE_OPTIMIZER,
+                                             language="python",
+                                             label="Optimizer class", lines=10)
+                        with gr.Accordion("inspect args", open=False):
+                            didx4 = gr.Number(value=0, precision=0,
+                                                label="draft_idx")
+                            s4s = gr.Number(value=0, precision=0,
+                                             label="step_range_start")
+                            s4e = gr.Number(value=20, precision=0,
+                                             label="step_range_end")
+                        step_btn = gr.Button("Step", variant="primary")
+
+                    with gr.Column(scale=2, min_width=580):
+                        status4 = gr.Markdown(
+                            "*No active env — hit **Reset env** to begin.*")
+                        obs4_reset = gr.JSON(label="Initial observation",
+                                              height=280)
+                        status4b = gr.Markdown()
+                        obs4 = gr.JSON(label="Step observation", height=320)
+
                 reset_btn.click(_api_reset, [tier4, seed4],
                                 [obs4_reset, status4])
-
-                gr.Markdown("---")
-                kind4 = gr.Radio(["run_baseline", "draft", "inspect", "commit"],
-                                 value="run_baseline", label="Action kind")
-                with gr.Accordion("run_baseline args", open=True):
-                    bname4 = gr.Dropdown(["sgd", "momentum", "adam", "lbfgs"],
-                                         value="adam", label="Reference optimizer")
-                with gr.Accordion("draft args", open=False):
-                    code4 = gr.Code(value=SAMPLE_OPTIMIZER, language="python",
-                                    label="Optimizer class", lines=10)
-                with gr.Accordion("inspect args", open=False):
-                    didx4 = gr.Number(value=0, precision=0, label="draft_idx")
-                    s4s = gr.Number(value=0, precision=0, label="step_range_start")
-                    s4e = gr.Number(value=20, precision=0, label="step_range_end")
-
-                step_btn = gr.Button("Step", variant="primary")
-                status4b = gr.Markdown()
-                obs4 = gr.JSON(label="Observation")
                 step_btn.click(
                     _api_step,
                     [kind4, bname4, code4, didx4, s4s, s4e],
@@ -1190,19 +1381,21 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
 
             # --- Tab 1: Landscape ---
             with gr.Tab("Landscape"):
-                gr.Markdown(
-                    "Pick a landscape template and see what the agent sees "
-                    "at reset — the contour plot plus env-computed structural "
-                    "hints used to calibrate the optimizer."
-                )
-                with gr.Row():
-                    with gr.Column(scale=1, min_width=260):
+                with gr.Row(equal_height=False):
+                    with gr.Column(scale=1, min_width=320, elem_classes="lf-sidebar"):
+                        gr.Markdown("### Landscape Explorer")
+                        gr.Markdown(
+                            "Pick a template and see what the agent sees "
+                            "at reset — the 2-D contour plus env-computed "
+                            "structural hints used to calibrate the optimizer."
+                        )
                         tmpl1 = gr.Dropdown(TEMPLATES_2D_SAFE,
-                                            value="rosenbrock", label="Template")
+                                             value="rosenbrock", label="Template")
                         dim1 = gr.Slider(2, 10, value=2, step=1, label="Dim")
                         seed1 = gr.Slider(0, 100, value=0, step=1, label="Seed")
-                        go1 = gr.Button("Build landscape", variant="primary")
-                    with gr.Column(scale=2, min_width=520):
+                        go1 = gr.Button("Build landscape", variant="primary",
+                                         size="lg")
+                    with gr.Column(scale=2, min_width=580):
                         plot1 = gr.Plot(label="Contour")
                         hints1 = gr.Dataframe(
                             headers=["property", "value"],
@@ -1217,51 +1410,58 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
 
             # --- Tab 2: Baseline Race ---
             with gr.Tab("Baseline Race"):
-                gr.Markdown(
-                    "Race SGD, Momentum, L-BFGS, and **Adam with per-landscape "
-                    "LR tuning** from the same init. The tuned Adam is the "
-                    "bar the trained OptCoder has to beat."
-                )
-                with gr.Row():
-                    tmpl2 = gr.Dropdown(TEMPLATES_2D_SAFE,
-                                        value="rosenbrock", label="Template")
-                    seed2 = gr.Slider(0, 100, value=1, step=1, label="Seed")
-                    go2 = gr.Button("Race", variant="primary")
-
-                plot2a = gr.Plot(label="Contour + trajectories")
-                with gr.Row():
-                    plot2b = gr.Plot(label="f(x) vs step")
-                    plot2c = gr.Plot(label="Final f after 50 steps")
-                summary2 = gr.Markdown()
+                with gr.Row(equal_height=False):
+                    with gr.Column(scale=1, min_width=320, elem_classes="lf-sidebar"):
+                        gr.Markdown("### Baseline Race")
+                        gr.Markdown(
+                            "Race SGD, Momentum, L-BFGS, and **Adam with "
+                            "per-landscape LR tuning** from the same init. "
+                            "The tuned Adam is the bar the trained OptCoder "
+                            "has to beat."
+                        )
+                        tmpl2 = gr.Dropdown(TEMPLATES_2D_SAFE,
+                                             value="rosenbrock", label="Template")
+                        seed2 = gr.Slider(0, 100, value=1, step=1, label="Seed")
+                        go2 = gr.Button("Race", variant="primary", size="lg")
+                    with gr.Column(scale=2, min_width=580):
+                        plot2a = gr.Plot(label="Contour + trajectories")
+                        with gr.Row():
+                            plot2b = gr.Plot(label="f(x) vs step")
+                            plot2c = gr.Plot(label="Final f after 50 steps")
+                        summary2 = gr.Markdown()
                 go2.click(_baseline_race, [tmpl2, seed2],
                           [plot2a, plot2b, plot2c, summary2])
 
             # --- Tab 3: Optimizer Arena ---
             with gr.Tab("Optimizer Arena"):
-                gr.Markdown(
-                    "Paste or edit an `Optimizer` class. We run it through "
-                    "the full Phase-D arena (10 seeds × 200 steps) against "
-                    "tuned Adam on the chosen landscape and show the reward "
-                    "breakdown. `np` is pre-injected — no import lines."
-                )
-                with gr.Row():
-                    with gr.Column(scale=1, min_width=260):
+                with gr.Row(equal_height=False):
+                    with gr.Column(scale=1, min_width=340, elem_classes="lf-sidebar"):
+                        gr.Markdown("### Optimizer Arena")
+                        gr.Markdown(
+                            "Paste or edit an `Optimizer` class. We run it "
+                            "through the full Phase-D arena (10 seeds × 200 "
+                            "steps) against tuned Adam and show the reward "
+                            "breakdown.<br><small>`np` is pre-injected — "
+                            "do not write import lines.</small>"
+                        )
                         tmpl3 = gr.Dropdown(list(BUILDERS.keys()),
-                                            value="quadratic", label="Template")
+                                             value="quadratic", label="Template")
                         dim3 = gr.Slider(2, 10, value=5, step=1, label="Dim")
                         seed3 = gr.Slider(0, 100, value=42, step=1, label="Seed")
-                        go3 = gr.Button("Run arena", variant="primary")
-                    with gr.Column(scale=2, min_width=520):
+                        go3 = gr.Button("Run arena", variant="primary",
+                                         size="lg")
+                    with gr.Column(scale=2, min_width=580):
                         code3 = gr.Code(value=SAMPLE_OPTIMIZER,
-                                        language="python",
-                                        label="Optimizer class", lines=14)
-
-                with gr.Row():
-                    plot3a = gr.Plot(label="2-D trajectory (if dim = 2)")
-                    plot3b = gr.Plot(label="Mean arena progress")
-                plot3c = gr.Plot(label="Reward breakdown")
-                summary3 = gr.Markdown()
-                breakdown3 = gr.JSON(label="Full reward dict")
+                                         language="python",
+                                         label="Your Optimizer class",
+                                         lines=14)
+                        with gr.Row():
+                            plot3a = gr.Plot(label="2-D trajectory (if dim = 2)")
+                            plot3b = gr.Plot(label="Mean arena progress")
+                        plot3c = gr.Plot(label="Reward breakdown")
+                        summary3 = gr.Markdown()
+                        breakdown3 = gr.JSON(label="Full reward dict",
+                                              height=220)
                 go3.click(_arena_compare, [tmpl3, dim3, seed3, code3],
                           [plot3a, plot3b, plot3c, summary3, breakdown3])