Space home: redirect / to HTML /demo; Gradio at /gradio; fix Gradio hero.

- Root loads the demo page; demo nav and banner link to /gradio/.
- Rebuild hero as Column + Markdown so title and pills render under Gradio 5 themes.
- CSS: force light-on-dark text inside .sde-hero-wrap for prose overrides.

Made-with: Cursor

server/demo_page.html

@@ -578,7 +578,7 @@
           </div>
         </div>
         <div class="space-actions">
-          <a class="btn-primary" href="/">Gradio UI</a>
+          <a class="btn-primary" href="/gradio/">Gradio UI</a>
           <button type="button" class="btn-ghost" id="btnOpenTab" title="Opens this demo in a full browser tab">Open full page</button>
           <a class="btn-ghost" href="https://huggingface.co/spaces/md896/sql-debug-env" target="_blank" rel="noopener">Space on Hub ↗</a>
         </div>
@@ -592,7 +592,7 @@
         <a href="#playground">Playground</a>
         <a href="#evidence">Evidence</a>
         <a href="#repro">Reproduce</a>
-        <a href="/">Gradio</a>
+        <a href="/gradio/">Gradio</a>
       </div>
     </nav>
 

server/gradio_ui.py

@@ -80,8 +80,37 @@ GRADIO_CSS = """
   border: 1px solid rgba(148, 163, 184, 0.24);
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
-.sde-hero-wrap h1 { margin: 0 0 0.35rem 0; font-size: 1.85rem; letter-spacing: -0.03em; }
-.sde-hero-wrap p { margin: 0; color: #e2e8f0; font-size: 0.95rem; line-height: 1.5; }
+/* Gradio 5 theme/prose can override colors; keep hero readable. */
+.sde-hero-wrap h1,
+.sde-hero-wrap .sde-hero-title,
+.sde-hero-wrap .prose,
+.sde-hero-wrap .prose p,
+.sde-hero-wrap .prose h1,
+.sde-hero-wrap .markdown,
+.sde-hero-wrap .markdown p {
+  color: #f8fafc !important;
+}
+.sde-hero-wrap h1,
+.sde-hero-wrap .sde-hero-title {
+  margin: 0 0 0.35rem 0;
+  font-size: 1.85rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+}
+.sde-hero-wrap p,
+.sde-hero-wrap .prose p {
+  margin: 0;
+  color: #e2e8f0 !important;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+.sde-hero-subnav { margin-bottom: 0.75rem; opacity: 0.95; }
+.sde-hero-wrap .sde-hero-subnav a,
+.sde-hero-wrap .sde-hero-subnav .prose a {
+  color: #a5f3fc !important;
+  font-weight: 600;
+}
 .sde-pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
 .sde-pill {
   display: inline-block;
@@ -368,21 +397,24 @@ def build_blocks(static_dir: Path) -> Any:
         theme=theme,
         css=GRADIO_CSS,
     ) as demo:
-        gr.HTML(
-            """
-<div class="sde-hero-wrap">
-  <h1>SQL Debug Environment</h1>
-  <p>OpenEnv-compliant SQL repair · live SQLite rewards · TRL / GRPO training on this same Space.
-     One page: benchmarks, artifacts, architecture, and a live playground.</p>
-  <div class="sde-pill-row">
-    <span class="sde-pill">OpenEnv</span>
-    <span class="sde-pill">FastAPI</span>
-    <span class="sde-pill">Gradio</span>
-    <span class="sde-pill">TRL · GRPO</span>
-  </div>
-</div>
-            """.strip()
-        )
+        with gr.Column(elem_classes=["sde-hero-wrap"]):
+            gr.Markdown(
+                "[HTML demo (main Space page)](/demo) · [OpenEnv API](/docs)",
+                elem_classes=["sde-hero-subnav"],
+            )
+            gr.Markdown(
+                "# SQL Debug Environment\n\n"
+                "OpenEnv-compliant SQL repair · live SQLite rewards · TRL / GRPO training on this same Space. "
+                "One page: benchmarks, artifacts, architecture, and a live playground."
+            )
+            gr.Markdown(
+                '<div class="sde-pill-row">'
+                '<span class="sde-pill">OpenEnv</span>'
+                '<span class="sde-pill">FastAPI</span>'
+                '<span class="sde-pill">Gradio</span>'
+                '<span class="sde-pill">TRL · GRPO</span>'
+                "</div>"
+            )
 
         gr.Markdown(
             "### First context: training proof first\n"

server/main.py

@@ -57,8 +57,8 @@ if _static_dir.is_dir():
 
 @app.get("/")
 async def space_home():
-    """Hugging Face Space opens here — send humans to the Gradio dashboard."""
-    return RedirectResponse(url="/gradio/", status_code=302)
+    """Hugging Face Space opens here — HTML demo first; Gradio lives at /gradio/."""
+    return RedirectResponse(url="/demo", status_code=302)
 
 
 @app.get("/api/info")