fix(space): stabilize runtime

Keep Safari dropdown menus above following rows. Show the Dota montage in the startup loader. Enable public share links, add agents.md, and quiet the Starlette 422 warning.

Co-authored-by: Codex <codex@openai.com>

PLAN.md

@@ -161,6 +161,11 @@ All times are `America/Los_Angeles` / PDT unless noted.
 - 2026-06-15 03:07: removed the duplicate landing-page DOTA2Tuned heading block from the assistant view while keeping the sidebar brand and tuned-model composer/result surface intact.
 - 2026-06-15 03:12: aligned the assistant view with the rest of the app pages by dropping the centered hero-style layout and making the tuned-model surface full-width, top-aligned, compactly spaced, and flush with the existing app view grid.
 - 2026-06-15 03:20: centered the startup-loader radial glow on the combined Dota icon and DOTA2Tuned text mark in both the critical first-paint fallback and hydrated loader, then changed the glow from inner Dota red `#ff6046` to outer Dota gold `#d9b166`.
+- 2026-06-15 03:42: increased the centered startup-loader radial glow by 30%, from `22rem` to `28.6rem`, while keeping the red-to-gold gradient centered on the brand mark in both loader paths.
+- 2026-06-15 04:02: diagnosed the Safari dropdown layering bug as a Gradio/Svelte stacking-chain issue: the fixed dropdown menu was nested under a `.dota-dropdown` block with `overflow: hidden` and a parent `.form` with `overflow: auto hidden`, so Safari could clip or paint the leftmost menu under later rows. Promoted the open dropdown plus its `.form`/`.row`/`.app-view` ancestors with temporary classes, forced the menu layer to fixed `z-index: 10000`, and kept ancestor overflow visible only while a menu is open.
+- 2026-06-15 04:18: added the official Dota 2 homepage montage video as the startup-loader background, using the Steam WebM/MP4 sources with muted inline autoplay and keeping the red-to-gold radial glow plus dark vignette as an overlay/fallback.
+- 2026-06-15 04:24: fixed the loader video visibility by changing the hydrated loader overlay from an opaque dark linear gradient to translucent RGBA layers and increasing the video layer opacity/brightness, so the montage remains visible behind the brand mark.
+- 2026-06-15 04:34: enabled Gradio `share=True` in both Space and CLI launch paths, added a narrow startup warning filter for Gradio's deprecated Starlette 422 constant, and added root `agents.md` with Space/API instructions for coding agents.
 
 ## Adapter Eval Notes
 

agents.md

@@ -0,0 +1,80 @@
+# DOTA2Tuned Agent Instructions
+
+DOTA2Tuned is a Hugging Face Space for Dota 2 draft help, meta analysis,
+counters, synergies, builds, match prediction, and grounded RAG answers.
+
+Space URL: `https://huggingface.co/spaces/build-small-hackathon/dota2tuned`
+
+Agents can fetch the live Space API instructions with:
+
+```bash
+curl https://huggingface.co/spaces/build-small-hackathon/dota2tuned/agents.md
+```
+
+## Python Client
+
+Use `gradio_client` for calls:
+
+```python
+from gradio_client import Client
+
+client = Client("build-small-hackathon/dota2tuned")
+answer_html, evidence_json = client.predict(
+    "What should I pick with Crystal Maiden against Phantom Assassin?",
+    api_name="/tuned_model",
+)
+```
+
+## Public Endpoints
+
+- `/tuned_model`: free-form Dota 2 question. Returns HTML answer and JSON evidence.
+- `/draft_coach`: draft recommendations. Inputs: allied hero IDs, enemy hero IDs,
+  banned hero IDs, role, and scope.
+- `/hero_meta`: patch/meta lookup. Inputs: query string, optional hero ID, optional item key.
+- `/match_predictor`: win-probability estimate. Inputs: Radiant hero IDs and Dire hero IDs.
+- `/hero_builds`: item/build page for one hero ID.
+- `/draft_lab`: compact draft card. Inputs: enemy hero IDs, role, mode.
+- `/data_status`: current local data and artifact status.
+
+## Calling Conventions
+
+Use integer Dota hero IDs for hero dropdown inputs. Common examples:
+
+- Anti-Mage: `1`
+- Crystal Maiden: `5`
+- Phantom Assassin: `44`
+- Queen of Pain: `39`
+- Shadow Fiend: `11`
+
+Use these role values: `carry`, `mid`, `offlane`, `soft support`, `hard support`.
+Use these scope values: `pro`, `high-rank`, `public`.
+
+Example draft call:
+
+```python
+markdown, evidence_json = client.predict(
+    [5],
+    [44],
+    [],
+    "hard support",
+    "pro",
+    api_name="/draft_coach",
+)
+```
+
+Example prediction call:
+
+```python
+prediction_json = client.predict(
+    [1, 2, 3, 25, 5],
+    [14, 74, 6, 26, 18],
+    api_name="/match_predictor",
+)
+```
+
+## Safety And Grounding
+
+Prefer `/tuned_model` for natural-language questions because it returns evidence
+alongside the answer. Treat generated advice as draft-support guidance, not a
+guarantee of match outcome. Do not send API tokens, Steam credentials, or private
+match data to the public Space.

app.py

@@ -46,5 +46,6 @@ if __name__ == "__main__":
         head=APP_HEAD,
         theme=gr.themes.Soft(),
         ssr_mode=False,
+        share=True,
         app_kwargs=launch_app_kwargs(),
     )

sitecustomize.py

@@ -10,6 +10,12 @@ from __future__ import annotations
 import asyncio
 import sys
 import traceback
+import warnings
+
+_STARLETTE_422_DEPRECATION_PATTERN = (
+    r"'HTTP_422_UNPROCESSABLE_ENTITY' is deprecated\. "
+    r"Use 'HTTP_422_UNPROCESSABLE_CONTENT' instead\."
+)
 
 
 def _is_benign_loop_teardown(unraisable) -> bool:
@@ -36,6 +42,7 @@ def _is_benign_loop_teardown(unraisable) -> bool:
 
 
 def _install_quiet_unraisablehook() -> None:
+    _install_quiet_starlette_422_warning()
     _install_safe_asyncio_loop_del()
     if getattr(sys.unraisablehook, "_dota2tuned_quiet_unraisablehook", False):
         return
@@ -71,4 +78,12 @@ def _install_safe_asyncio_loop_del() -> None:
     asyncio.BaseEventLoop.__del__ = safe_loop_del
 
 
+def _install_quiet_starlette_422_warning() -> None:
+    warnings.filterwarnings(
+        "ignore",
+        message=_STARLETTE_422_DEPRECATION_PATTERN,
+        category=Warning,
+    )
+
+
 _install_quiet_unraisablehook()

src/dota2tuned/cli.py

@@ -226,6 +226,7 @@ def serve() -> None:
         head=APP_HEAD,
         theme=gr.themes.Soft(),
         ssr_mode=False,
+        share=True,
         app_kwargs=launch_app_kwargs(),
     )
 

src/dota2tuned/ui/gradio_app.py

@@ -847,11 +847,21 @@ __NAV_ICON_CSS__
 }
 .dota-dropdown {
   position: relative;
+  overflow: visible !important;
   z-index: 20;
 }
 .dota-dropdown:focus-within {
   z-index: 2500;
 }
+.d2-dropdown-menu-host {
+  position: relative !important;
+  overflow: visible !important;
+  z-index: 3900 !important;
+}
+.dota-dropdown.d2-dropdown-open {
+  overflow: visible !important;
+  z-index: 5000 !important;
+}
 .dota-dropdown .wrap,
 .dota-dropdown .wrap-inner,
 .dota-dropdown .input-container {
@@ -893,15 +903,19 @@ __NAV_ICON_CSS__
   margin: 0 !important;
   transform: translateY(-50%) !important;
   background: transparent !important;
+  cursor: pointer !important;
+  pointer-events: auto !important;
   z-index: 2 !important;
 }
 .dota-dropdown .icon-wrap svg {
   width: 16px !important;
   height: 16px !important;
+  pointer-events: none !important;
 }
 .dota-dropdown ul[role="listbox"],
 .dota-dropdown .options {
-  z-index: 4000 !important;
+  position: fixed !important;
+  z-index: 10000 !important;
   pointer-events: auto !important;
   min-width: 0 !important;
   max-width: calc(100vw - 16px) !important;
@@ -1410,7 +1424,7 @@ html:not(.d2-ready) body::before {
   z-index: 2147483645;
   background:
     radial-gradient(
-      circle 22rem at 50% 50%,
+      circle 28.6rem at 50% 50%,
       rgba(255, 96, 70, 0.28) 0%,
       rgba(255, 96, 70, 0.20) 24%,
       rgba(217, 177, 102, 0.15) 52%,
@@ -1445,30 +1459,78 @@ html:not(.d2-ready) body::after {
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  background: #05060a;
+  color: #efe5bb;
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.42s ease, visibility 0.42s ease;
+}
+#d2-startup-loader::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
   background:
     radial-gradient(
-      circle 22rem at 50% 50%,
+      circle 28.6rem at 50% 50%,
       rgba(255, 96, 70, 0.28) 0%,
       rgba(255, 96, 70, 0.20) 24%,
       rgba(217, 177, 102, 0.15) 52%,
       rgba(217, 177, 102, 0.00) 74%
     ),
-    linear-gradient(180deg, #05060a 0%, #111318 56%, #090a0d 100%);
-  color: #efe5bb;
-  opacity: 1;
-  visibility: visible;
-  transition: opacity 0.42s ease, visibility 0.42s ease;
+    linear-gradient(
+      180deg,
+      rgba(5, 6, 10, 0.34) 0%,
+      rgba(17, 19, 24, 0.16) 56%,
+      rgba(9, 10, 13, 0.46) 100%
+    );
+  pointer-events: none;
+}
+#d2-startup-loader::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background:
+    linear-gradient(
+      90deg,
+      rgba(5, 6, 10, 0.30),
+      rgba(5, 6, 10, 0.08),
+      rgba(5, 6, 10, 0.30)
+    ),
+    linear-gradient(
+      180deg,
+      rgba(5, 6, 10, 0.36),
+      rgba(5, 6, 10, 0.10) 44%,
+      rgba(5, 6, 10, 0.54)
+    );
+  pointer-events: none;
 }
 #d2-startup-loader.d2-loader-exit {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }
+.d2-loader-video {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.72;
+  filter: saturate(1.1) contrast(1.06) brightness(0.78);
+  pointer-events: none;
+}
 .d2-loader-brand {
+  position: relative;
+  z-index: 3;
   display: flex;
   align-items: center;
   gap: 14px;
   font-family: "Trajan Pro", "Goudy Trajan", "Noto Sans", serif;
+  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
 }
 .d2-loader-brand img {
   width: 48px;
@@ -1495,12 +1557,31 @@ html:not(.d2-ready) body::after {
     loader.setAttribute("role", "status");
     loader.setAttribute("aria-live", "polite");
     loader.innerHTML = `
+      <video
+        class="d2-loader-video"
+        autoplay
+        muted
+        loop
+        playsinline
+        preload="auto"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <source type="video/webm" src="https://cdn.steamstatic.com/apps/dota2/videos/dota_react/homepage/dota_montage_webm.webm">
+        <source type="video/mp4" src="https://cdn.steamstatic.com/apps/dota2/videos/dota_react/homepage/dota_montage_02.mp4">
+      </video>
       <div class="d2-loader-brand">
         <img src="${logoUrl}" alt="Dota 2" decoding="async">
         <strong>DOTA2Tuned</strong>
       </div>
     `;
     document.body.prepend(loader);
+    const video = loader.querySelector(".d2-loader-video");
+    if (video) {
+      video.muted = true;
+      video.playsInline = true;
+      video.play?.().catch(() => {});
+    }
   };
   window.dota2tunedHideLoader = () => {
     const loader = document.getElementById("d2-startup-loader");
@@ -1582,7 +1663,7 @@ html:not(.d2-ready) body::before {
   z-index: 2147483645;
   background:
     radial-gradient(
-      circle 22rem at 50% 50%,
+      circle 28.6rem at 50% 50%,
       rgba(255, 96, 70, 0.28) 0%,
       rgba(255, 96, 70, 0.20) 24%,
       rgba(217, 177, 102, 0.15) 52%,
@@ -1693,8 +1774,33 @@ def _dropdown_js(choice_icon_by_label: dict[str, dict[str, str]]) -> str:
       closestElement(target, '.options, [role="listbox"]')
     );
   }};
+  const clearDropdownMenuHosts = () => {{
+    document
+      .querySelectorAll(".d2-dropdown-open, .d2-dropdown-menu-host")
+      .forEach((node) => {{
+        node.classList.remove("d2-dropdown-open", "d2-dropdown-menu-host");
+      }});
+  }};
+  const promoteDropdownMenu = (dropdown, listbox) => {{
+    if (!dropdown || !listbox || !listbox.getClientRects().length) return;
+    dropdown.classList.add("d2-dropdown-open");
+    let node = dropdown.parentElement;
+    while (node && node !== document.body) {{
+      if (
+        node.classList?.contains("form")
+        || node.classList?.contains("row")
+        || node.classList?.contains("app-view")
+        || node.classList?.contains("app-main")
+      ) {{
+        node.classList.add("d2-dropdown-menu-host");
+      }}
+      if (node.classList?.contains("app-view")) break;
+      node = node.parentElement;
+    }}
+  }};
   const syncDropdownMenus = () => {{
     const margin = 8;
+    clearDropdownMenuHosts();
     if (!document.querySelector('.dota-dropdown .options, .dota-dropdown ul[role="listbox"]')) {{
       return;
     }}
@@ -1719,6 +1825,7 @@ def _dropdown_js(choice_icon_by_label: dict[str, dict[str, str]]) -> str:
       listbox.style.left = `${{left}}px`;
       listbox.style.boxSizing = "border-box";
       listbox.style.overflowX = "hidden";
+      promoteDropdownMenu(dropdown, listbox);
     }});
   }};
   const syncSidebarView = () => {{

src/dota2tuned/ui/runtime_hooks.py

@@ -3,6 +3,12 @@ from __future__ import annotations
 import asyncio
 import sys
 import traceback
+import warnings
+
+STARLETTE_422_DEPRECATION_PATTERN = (
+    r"'HTTP_422_UNPROCESSABLE_ENTITY' is deprecated\. "
+    r"Use 'HTTP_422_UNPROCESSABLE_CONTENT' instead\."
+)
 
 
 def _is_benign_loop_teardown(unraisable) -> bool:
@@ -35,7 +41,8 @@ def _is_benign_loop_teardown(unraisable) -> bool:
 
 
 def install_quiet_unraisablehook() -> None:
-    """Silence only the benign asyncio loop-teardown noise."""
+    """Silence only known benign Gradio/Starlette runtime noise."""
+    install_quiet_starlette_422_warning()
     install_safe_asyncio_loop_del()
     if getattr(sys.unraisablehook, "_dota2tuned_quiet_unraisablehook", False):
         return
@@ -72,6 +79,30 @@ def install_safe_asyncio_loop_del() -> None:
     asyncio.BaseEventLoop.__del__ = safe_loop_del
 
 
+def install_quiet_starlette_422_warning() -> None:
+    """Suppress Gradio's deprecated Starlette 422 constant warning.
+
+    Gradio 6.18 still references Starlette's old
+    HTTP_422_UNPROCESSABLE_ENTITY constant. Starlette emits a deprecation
+    warning for that exact symbol. Define the old alias before Gradio imports
+    so Starlette's deprecation `__getattr__` path is not hit; keep the narrow
+    warning filter as a fallback for already-imported modules.
+    """
+    warnings.filterwarnings(
+        "ignore",
+        message=STARLETTE_422_DEPRECATION_PATTERN,
+        category=Warning,
+    )
+    try:
+        from starlette import status
+    except Exception:
+        return
+    if "HTTP_422_UNPROCESSABLE_ENTITY" not in vars(status):
+        status.HTTP_422_UNPROCESSABLE_ENTITY = getattr(
+            status, "HTTP_422_UNPROCESSABLE_CONTENT", 422
+        )
+
+
 def close_idle_main_event_loop() -> None:
     """Close Gradio's orphaned main-thread loop before Uvicorn runs.
 

tests/test_gradio_app.py

@@ -1,4 +1,5 @@
 import inspect
+from pathlib import Path
 from types import SimpleNamespace
 
 import gradio as gr
@@ -239,12 +240,22 @@ def test_css_keeps_dropdown_chevrons_inside_fields():
     assert ".dota-dropdown .icon-wrap" in APP_CSS
     assert "right: 8px !important" in APP_CSS
     assert "padding-right: 32px !important" in APP_CSS
+    assert "pointer-events: auto !important" in APP_CSS
+    assert "cursor: pointer !important" in APP_CSS
     assert ".dota-dropdown .secondary-wrapper" in APP_CSS
     assert "background: transparent !important" in APP_CSS
     assert ".hero-dropdown input[autocomplete=\"off\"]" not in APP_CSS
     assert "min-width: 100% !important" not in APP_CSS
 
 
+def test_css_promotes_open_dropdown_stack_for_safari():
+    assert ".d2-dropdown-menu-host" in APP_CSS
+    assert ".dota-dropdown.d2-dropdown-open" in APP_CSS
+    assert "overflow: visible !important" in APP_CSS
+    assert "position: fixed !important" in APP_CSS
+    assert "z-index: 10000 !important" in APP_CSS
+
+
 def test_css_shows_full_selected_hero_cards():
     hero_image_css = APP_CSS.split(".hero-card > img", 1)[1].split("}", 1)[0]
 
@@ -277,6 +288,14 @@ def test_loader_and_sidebar_logo_use_shared_red_flash():
 
     assert "d2-logo-red-flash" in APP_HEAD
     assert "#d2-startup-loader" in APP_HEAD
+    assert "d2-loader-video" in APP_HEAD
+    assert "dota_montage_webm.webm" in APP_HEAD
+    assert "dota_montage_02.mp4" in APP_HEAD
+    assert "autoplay" in APP_HEAD
+    assert "muted" in APP_HEAD
+    assert "loop" in APP_HEAD
+    assert "playsinline" in APP_HEAD
+    assert "video.play?.().catch" in APP_HEAD
     assert "dota2tunedHideLoader" in APP_HEAD
     assert "dota2tunedRevealWhenReady" in APP_HEAD
     assert "DOTA2Tuned" in APP_HEAD
@@ -287,10 +306,13 @@ def test_loader_and_sidebar_logo_use_shared_red_flash():
     assert "html.d2-ready .gradio-container" in APP_HEAD
     assert "html:not(.d2-ready) body::before" in APP_HEAD
     assert "html:not(.d2-ready) body::after" in APP_HEAD
-    assert "circle 22rem at 50% 50%" in APP_HEAD
+    assert "circle 28.6rem at 50% 50%" in APP_HEAD
     assert "circle at 50% 42%" not in APP_HEAD
     assert "rgba(255, 96, 70, 0.28) 0%" in APP_HEAD
     assert "rgba(217, 177, 102, 0.15) 52%" in APP_HEAD
+    assert "rgba(17, 19, 24, 0.16) 56%" in APP_HEAD
+    assert "opacity: 0.72" in APP_HEAD
+    assert "brightness(0.78)" in APP_HEAD
     assert "waitForMountedImages" in APP_HEAD
     assert "document.fonts?.ready" in APP_HEAD
     assert "25%, 75%" in logo_keyframes
@@ -386,6 +408,18 @@ def test_dropdown_js_refreshes_reused_search_option_nodes():
     assert "characterData: true" in js
 
 
+def test_dropdown_js_marks_open_menu_ancestors_for_safari():
+    js = _dropdown_js({})
+
+    assert "clearDropdownMenuHosts" in js
+    assert "promoteDropdownMenu" in js
+    assert "d2-dropdown-open" in js
+    assert "d2-dropdown-menu-host" in js
+    assert 'classList?.contains("form")' in js
+    assert 'classList?.contains("row")' in js
+    assert 'classList?.contains("app-view")' in js
+
+
 def test_app_head_preconnects_without_theme_redirect():
     assert "preconnect" in APP_HEAD
     assert "cdn.steamstatic.com" in APP_HEAD
@@ -420,7 +454,7 @@ def test_critical_head_hides_app_before_bundle_mounts():
     assert 'id="d2-critical"' in CRITICAL_HEAD
     assert "html:not(.d2-ready) .gradio-container" in CRITICAL_HEAD
     assert "visibility: hidden !important" in CRITICAL_HEAD
-    assert "circle 22rem at 50% 50%" in CRITICAL_HEAD
+    assert "circle 28.6rem at 50% 50%" in CRITICAL_HEAD
     assert "circle at 50% 42%" not in CRITICAL_HEAD
     assert "rgba(217, 177, 102, 0.15) 52%" in CRITICAL_HEAD
     assert 'classList.add("d2-loading")' in CRITICAL_HEAD
@@ -432,6 +466,11 @@ def test_launch_app_kwargs_wires_critical_head_middleware():
     assert any(getattr(m, "cls", None) is _CriticalHeadMiddleware for m in middleware)
 
 
+def test_launch_entrypoints_enable_public_share_links():
+    assert "share=True" in Path("app.py").read_text()
+    assert "share=True" in Path("src/dota2tuned/cli.py").read_text()
+
+
 def _drive_middleware(downstream):
     import asyncio
 

tests/test_runtime_hooks.py

@@ -1,8 +1,12 @@
 import asyncio
+import warnings
 
 import pytest
 
-from dota2tuned.ui.runtime_hooks import install_safe_asyncio_loop_del
+from dota2tuned.ui.runtime_hooks import (
+    install_quiet_starlette_422_warning,
+    install_safe_asyncio_loop_del,
+)
 
 
 def test_install_safe_asyncio_loop_del_suppresses_only_invalid_fd(monkeypatch):
@@ -28,3 +32,21 @@ def test_install_safe_asyncio_loop_del_preserves_other_value_errors(monkeypatch)
 
     with pytest.raises(ValueError, match="not the Gradio fd noise"):
         asyncio.BaseEventLoop.__del__(object())
+
+
+def test_install_quiet_starlette_422_warning_suppresses_only_target_message():
+    with warnings.catch_warnings(record=True) as caught:
+        warnings.simplefilter("always")
+        install_quiet_starlette_422_warning()
+        import starlette.status
+
+        assert starlette.status.HTTP_422_UNPROCESSABLE_ENTITY == 422
+        warnings.warn(
+            "'HTTP_422_UNPROCESSABLE_ENTITY' is deprecated. "
+            "Use 'HTTP_422_UNPROCESSABLE_CONTENT' instead.",
+            UserWarning,
+            stacklevel=2,
+        )
+        warnings.warn("other warning", UserWarning, stacklevel=2)
+
+    assert [str(item.message) for item in caught] == ["other warning"]