beta2

gradio-web/config.py

@@ -19,7 +19,7 @@ RIGHT_TOP_LOG_SCALE = 1
 UI_GLOBAL_FONT_SIZE = "24px"
 
 # Session / queue 配置
-SESSION_TIMEOUT = 5  # 30秒无用户主动操作后，交由 gr.State TTL 自动回收 session
+SESSION_TIMEOUT = 39999  # 30秒无用户主动操作后，交由 gr.State TTL 自动回收 session
 SESSION_CONCURRENCY_ID = "session_slots"
 SESSION_CONCURRENCY_LIMIT = 2
 
@@ -84,6 +84,10 @@ UI_TEXT = {
     "actions": {
         "point_required_suffix": " 🎯",
     },
+    "progress": {
+        "episode_loading": "The episode is loading...",
+        "queue_wait": "Lots of people are playing! Please wait...",
+    },
     "errors": {
         "load_missing_task": "Error loading task: missing current_task",
         "load_invalid_task": "Error loading task: invalid task payload",
@@ -108,12 +112,12 @@ UI_ACTION_TEXT_OVERRIDES = {
         "move backward-left": "move backward-left↗︎",
         "move backward-right": "move backward-right↖︎",
     },
-    # "RouteStick": {
-    #     "move to the nearest left target by circling around the stick clockwise": "move left clockwise↘︎→↗︎ ◟→◞",
-    #     "move to the nearest right target by circling around the stick clockwise": "move right clockwise↖︎←↙︎ ◟←◞",
-    #     "move to the nearest left target by circling around the stick counterclockwise": "move left counterclockwise↗︎→↘︎ ◜→◝",
-    #     "move to the nearest right target by circling around the stick counterclockwise": "move right counterclockwise↙︎←↖︎ ◜←◝",
-    # },
+    "RouteStick": {
+        "move to the nearest left target by circling around the stick clockwise": "move left clockwise↘︎→↗︎ ◟→◞",
+        "move to the nearest right target by circling around the stick clockwise": "move right clockwise↖︎←↙︎ ◟←◞",
+        "move to the nearest left target by circling around the stick counterclockwise": "move left counterclockwise↗︎→↘︎ ◜→◝",
+        "move to the nearest right target by circling around the stick counterclockwise": "move right counterclockwise↙︎←↖︎ ◜←◝",
+    },
 }
 
 ROUTESTICK_OVERLAY_ACTION_TEXTS = [

gradio-web/gradio_callbacks.py

@@ -264,29 +264,6 @@ def show_task_hint(uid, current_hint=""):
     return get_task_hint(env_id)
 
 
-def show_loading_info():
-    """
-    显示加载环境的全屏遮罩层提示信息
-    
-    功能说明：
-    - 此函数在用户点击登录/加载任务等按钮时被调用
-    - 返回包含全屏遮罩层的 HTML 字符串，用于显示加载提示
-    - 遮罩层会覆盖整个页面，防止用户在加载过程中进行其他操作
-    - 加载完成后，回调函数会返回空字符串 "" 来清空 loading_overlay 组件，从而隐藏遮罩层
-    
-    工作流程：
-    1. 用户点击按钮（如 Login、Next Task 等）
-    2. 按钮的 click 事件首先调用此函数，显示遮罩层
-    3. 然后通过 .then() 链式调用实际的加载函数（如 login_and_load_task）
-    4. 加载函数执行完成后，返回 gr.update(visible=False) 隐藏遮罩层
-
-    Returns:
-        gr.update: 显示 loading overlay group
-    """
-    LOGGER.debug("show_loading_info: displaying loading overlay")
-    return gr.update(visible=True)
-
-
 def on_video_end(uid):
     """
     Called when the demonstration video finishes playing.
@@ -519,7 +496,6 @@ def _task_load_failed_response(uid, message):
         gr.update(visible=False),  # action_phase_group
         gr.update(visible=False),  # control_panel_group
         gr.update(value=""),  # task_hint_display
-        gr.update(visible=False),  # loading_overlay
         gr.update(interactive=False),  # reference_action_btn
     )
 
@@ -596,7 +572,6 @@ def _load_status_task(uid, status):
             gr.update(visible=True),  # action_phase_group
             gr.update(visible=True),  # control_panel_group
             gr.update(value=get_task_hint(env_id) if env_id else ""),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=False),  # reference_action_btn
         )
 
@@ -676,7 +651,6 @@ def _load_status_task(uid, status):
             gr.update(visible=False),  # action_phase_group
             gr.update(visible=False),  # control_panel_group
             gr.update(value=get_task_hint(actual_env_id)),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
@@ -701,7 +675,6 @@ def _load_status_task(uid, status):
         gr.update(visible=True),  # action_phase_group
         gr.update(visible=True),  # control_panel_group
         gr.update(value=get_task_hint(actual_env_id)),  # task_hint_display
-        gr.update(visible=False),  # loading_overlay
         gr.update(interactive=True),  # reference_action_btn
     )
 

gradio-web/state_manager.py

@@ -15,6 +15,7 @@ LOGGER = logging.getLogger("robomme.state_manager")
 
 # --- 全局会话存储 ---
 GLOBAL_SESSIONS = {}
+ACTIVE_SESSION_SLOTS = set()
 
 # --- 任务索引存储（用于进度显示） ---
 TASK_INDEX_MAP = {}  # {uid: {"task_index": int, "total_tasks": int}}
@@ -32,6 +33,7 @@ TASK_START_TIMES = {}  # {"{uid}:{env_id}:{episode_idx}": iso_timestamp}
 PLAY_BUTTON_CLICKED = {}  # {uid: bool}
 
 _state_lock = threading.Lock()
+_session_slot_condition = threading.Condition(_state_lock)
 
 
 def get_session(uid):
@@ -40,6 +42,52 @@ def get_session(uid):
         return GLOBAL_SESSIONS.get(uid)
 
 
+def reserve_session_slot(uid):
+    """
+    Block until a session slot is available for this uid.
+
+    Slots are held for the full lifetime of a ProcessSessionProxy and released
+    only after cleanup closes the worker process.
+    """
+    if not uid:
+        raise ValueError("Session uid cannot be empty")
+
+    from config import SESSION_CONCURRENCY_LIMIT
+
+    with _session_slot_condition:
+        if uid in ACTIVE_SESSION_SLOTS:
+            return
+        while len(ACTIVE_SESSION_SLOTS) >= int(SESSION_CONCURRENCY_LIMIT):
+            LOGGER.info(
+                "reserve_session_slot waiting uid=%s active_slots=%s limit=%s",
+                uid,
+                len(ACTIVE_SESSION_SLOTS),
+                SESSION_CONCURRENCY_LIMIT,
+            )
+            _session_slot_condition.wait(timeout=0.1)
+        ACTIVE_SESSION_SLOTS.add(uid)
+        LOGGER.info(
+            "reserve_session_slot acquired uid=%s active_slots=%s",
+            uid,
+            len(ACTIVE_SESSION_SLOTS),
+        )
+
+
+def release_session_slot(uid):
+    if not uid:
+        return
+
+    with _session_slot_condition:
+        if uid in ACTIVE_SESSION_SLOTS:
+            ACTIVE_SESSION_SLOTS.remove(uid)
+            LOGGER.info(
+                "release_session_slot uid=%s active_slots=%s",
+                uid,
+                len(ACTIVE_SESSION_SLOTS),
+            )
+            _session_slot_condition.notify_all()
+
+
 def create_session(uid):
     """
     为指定 session key 创建 ProcessSessionProxy。
@@ -49,11 +97,16 @@ def create_session(uid):
     if not uid:
         raise ValueError("Session uid cannot be empty")
 
-    with _state_lock:
-        session = GLOBAL_SESSIONS.get(uid)
-        if session is None:
-            session = ProcessSessionProxy()
-            GLOBAL_SESSIONS[uid] = session
+    reserve_session_slot(uid)
+    try:
+        with _state_lock:
+            session = GLOBAL_SESSIONS.get(uid)
+            if session is None:
+                session = ProcessSessionProxy()
+                GLOBAL_SESSIONS[uid] = session
+    except Exception:
+        release_session_slot(uid)
+        raise
     LOGGER.info("create_session uid=%s total_sessions=%s", uid, len(GLOBAL_SESSIONS))
     return uid
 
@@ -186,6 +239,7 @@ def cleanup_session(uid):
             LOGGER.info("cleanup_session uid=%s proxy closed", uid)
         except Exception as exc:
             LOGGER.exception("cleanup_session uid=%s proxy close failed: %s", uid, exc)
+    release_session_slot(uid)
 
     from user_manager import user_manager
 

gradio-web/test/test_queue_session_limit_e2e.py

@@ -72,11 +72,40 @@ def _minimal_load_result(uid: str, log_text: str = "ready"):
         gr.update(visible=True),
         gr.update(visible=True),
         gr.update(value="hint"),
-        gr.update(visible=False),
         gr.update(interactive=True),
     )
 
 
+def _read_progress_text(page) -> str | None:
+    return page.evaluate(
+        """() => {
+            const node = document.querySelector('.progress-text');
+            if (!node) return null;
+            const text = (node.textContent || '').trim();
+            return text || null;
+        }"""
+    )
+
+
+def _read_progress_overlay_snapshot(page) -> dict[str, float | bool | None]:
+    return page.evaluate(
+        """() => {
+            const node = document.querySelector('#native_progress_host .wrap');
+            if (!node) {
+                return { present: false, width: null, height: null, background: null };
+            }
+            const rect = node.getBoundingClientRect();
+            const style = getComputedStyle(node);
+            return {
+                present: true,
+                width: rect.width,
+                height: rect.height,
+                background: style.backgroundColor || null,
+            };
+        }"""
+    )
+
+
 def _mount_demo(demo):
     port = _free_port()
     host = "127.0.0.1"
@@ -93,7 +122,8 @@ def _mount_demo(demo):
     return root_url, demo, server, thread
 
 
-def test_gradio_queue_limits_init_loads_to_four(monkeypatch):
+def test_gradio_queue_respects_configured_limit_on_init_load(monkeypatch):
+    config = importlib.reload(importlib.import_module("config"))
     importlib.reload(importlib.import_module("gradio_callbacks"))
     ui_layout = importlib.reload(importlib.import_module("ui_layout"))
 
@@ -111,35 +141,42 @@ def test_gradio_queue_limits_init_loads_to_four(monkeypatch):
         with sync_playwright() as p:
             browser = p.chromium.launch(headless=True)
             pages = []
-            for _ in range(5):
+            total_pages = int(config.SESSION_CONCURRENCY_LIMIT) + 1
+            for _ in range(total_pages):
                 page = browser.new_page(viewport={"width": 1280, "height": 900})
                 page.goto(root_url, wait_until="domcontentloaded")
                 pages.append(page)
                 time.sleep(0.25)
 
-            snapshots = {}
-
             def _queue_snapshot_ready():
-                texts = [page.evaluate("() => document.body.innerText") for page in pages]
-                snapshots["texts"] = texts
-                first_four_ready = all("processing" in text.lower() for text in texts[:4])
-                fifth_queued = "queue:" in texts[4].lower()
-                return first_four_ready and fifth_queued
+                progress_texts = [_read_progress_text(page) for page in pages]
+                first_four_ready = all(
+                    text and config.UI_TEXT["progress"]["episode_loading"] in text
+                    for text in progress_texts[: config.SESSION_CONCURRENCY_LIMIT]
+                )
+                queued_text = progress_texts[-1] or ""
+                queued_ready = (
+                    config.UI_TEXT["progress"]["queue_wait"] in queued_text
+                    and "queue:" in queued_text.lower()
+                )
+                return first_four_ready and queued_ready
 
             _wait_until(_queue_snapshot_ready, timeout_s=10.0)
-
-            first_four = snapshots["texts"][:4]
-            fifth_text = snapshots["texts"][4]
-
-            assert all("processing" in text.lower() for text in first_four)
-            assert "queue:" in fifth_text.lower()
-
-            pages[0].wait_for_selector("#main_interface_root", state="visible", timeout=15000)
-            pages[4].wait_for_selector("#main_interface_root", state="visible", timeout=25000)
-
-            loaded_text = pages[4].evaluate("() => document.body.innerText")
-            assert "queue:" not in loaded_text.lower()
-            assert "processing" not in loaded_text.lower()
+            active_pages = [_read_progress_text(page) or "" for page in pages[: config.SESSION_CONCURRENCY_LIMIT]]
+            queued_text = _read_progress_text(pages[-1]) or ""
+
+            assert all(config.UI_TEXT["progress"]["episode_loading"] in text for text in active_pages)
+            assert config.UI_TEXT["progress"]["queue_wait"] in queued_text
+            assert "queue:" in queued_text.lower()
+            assert pages[0].evaluate("() => !!document.getElementById('loading_overlay_group')") is False
+            overlay_snapshot = _read_progress_overlay_snapshot(pages[0])
+            assert overlay_snapshot["present"] is True
+            assert overlay_snapshot["width"] and overlay_snapshot["width"] > 0
+            assert overlay_snapshot["height"] and overlay_snapshot["height"] >= 400
+            assert overlay_snapshot["background"] == "rgba(255, 255, 255, 0.92)"
+
+            _wait_until(lambda: _read_progress_text(pages[0]) is None, timeout_s=15.0)
+            _wait_until(lambda: _read_progress_text(pages[-1]) is None, timeout_s=25.0)
 
             browser.close()
     finally:
@@ -202,3 +239,207 @@ def test_gradio_state_ttl_cleans_up_idle_session(monkeypatch):
         server.should_exit = True
         thread.join(timeout=10)
         demo.close()
+
+
+def test_single_load_uses_native_episode_loading_copy(monkeypatch):
+    config = importlib.reload(importlib.import_module("config"))
+    importlib.reload(importlib.import_module("gradio_callbacks"))
+    ui_layout = importlib.reload(importlib.import_module("ui_layout"))
+
+    def fake_init_app(request):
+        uid = str(getattr(request, "session_hash", "missing"))
+        time.sleep(2.5)
+        return _minimal_load_result(uid)
+
+    monkeypatch.setattr(ui_layout, "init_app", fake_init_app)
+
+    demo = ui_layout.create_ui_blocks()
+    root_url, demo, server, thread = _mount_demo(demo)
+
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            page = browser.new_page(viewport={"width": 1280, "height": 900})
+            page.goto(root_url, wait_until="domcontentloaded")
+
+            _wait_until(
+                lambda: (_read_progress_text(page) or "").startswith(config.UI_TEXT["progress"]["episode_loading"]),
+                timeout_s=8.0,
+            )
+            assert page.evaluate("() => !!document.getElementById('loading_overlay_group')") is False
+            overlay_snapshot = _read_progress_overlay_snapshot(page)
+            assert overlay_snapshot["present"] is True
+            assert overlay_snapshot["width"] and overlay_snapshot["width"] > 0
+            assert overlay_snapshot["height"] and overlay_snapshot["height"] >= 400
+            assert overlay_snapshot["background"] == "rgba(255, 255, 255, 0.92)"
+
+            page.wait_for_selector("#main_interface_root", state="visible", timeout=15000)
+            _wait_until(lambda: _read_progress_text(page) is None, timeout_s=8.0)
+
+            browser.close()
+    finally:
+        server.should_exit = True
+        thread.join(timeout=10)
+        demo.close()
+
+
+def test_execute_does_not_use_episode_loading_copy(monkeypatch):
+    importlib.reload(importlib.import_module("gradio_callbacks"))
+    ui_layout = importlib.reload(importlib.import_module("ui_layout"))
+
+    obs = Image.new("RGB", (32, 32), color=(10, 20, 30))
+
+    def fake_init_app(request):
+        uid = str(getattr(request, "session_hash", "missing"))
+        return _minimal_load_result(uid, log_text="ready")
+
+    def fake_precheck_execute_inputs(uid, option_idx, coords_str):
+        return None
+
+    def fake_switch_to_execute_phase(uid):
+        return (
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+        )
+
+    def fake_execute_step(uid, option_idx, coords_str):
+        time.sleep(1.5)
+        return (
+            gr.update(value=obs, interactive=False),
+            "executed",
+            "BinFill (Episode 1)",
+            "Completed: 0",
+            gr.update(interactive=True),
+            gr.update(interactive=True),
+            gr.update(interactive=True),
+        )
+
+    def fake_switch_to_action_phase(uid=None):
+        return (
+            gr.update(interactive=True),
+            gr.update(),
+            gr.update(),
+            gr.update(),
+            gr.update(interactive=True),
+            gr.update(interactive=True),
+        )
+
+    monkeypatch.setattr(ui_layout, "init_app", fake_init_app)
+    monkeypatch.setattr(ui_layout, "precheck_execute_inputs", fake_precheck_execute_inputs)
+    monkeypatch.setattr(ui_layout, "switch_to_execute_phase", fake_switch_to_execute_phase)
+    monkeypatch.setattr(ui_layout, "execute_step", fake_execute_step)
+    monkeypatch.setattr(ui_layout, "switch_to_action_phase", fake_switch_to_action_phase)
+
+    demo = ui_layout.create_ui_blocks()
+    root_url, demo, server, thread = _mount_demo(demo)
+
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            page = browser.new_page(viewport={"width": 1280, "height": 900})
+            page.goto(root_url, wait_until="domcontentloaded")
+            page.wait_for_selector("#main_interface_root", state="visible", timeout=15000)
+            page.locator("#exec_btn button, button#exec_btn").first.click()
+            page.wait_for_timeout(500)
+
+            body_text = page.evaluate("() => document.body.innerText")
+            assert "The episode is loading..." not in body_text
+            assert "Lots of people are playing! Please wait..." not in body_text
+
+            browser.close()
+    finally:
+        server.should_exit = True
+        thread.join(timeout=10)
+        demo.close()
+
+
+def test_late_user_waits_for_active_session_slot_release(monkeypatch):
+    config = importlib.reload(importlib.import_module("config"))
+    state_manager = importlib.reload(importlib.import_module("state_manager"))
+    callbacks = importlib.reload(importlib.import_module("gradio_callbacks"))
+    ui_layout = importlib.reload(importlib.import_module("ui_layout"))
+
+    closed = []
+
+    class _FakeProxy:
+        def __init__(self):
+            self.env_id = None
+            self.episode_idx = None
+            self.language_goal = "goal"
+            self.available_options = [("pick", 0)]
+            self.raw_solve_options = [{"label": "a", "action": "pick", "available": False}]
+            self.demonstration_frames = []
+
+        def load_episode(self, env_id, episode_idx):
+            self.env_id = env_id
+            self.episode_idx = episode_idx
+            return Image.new("RGB", (32, 32), color=(10, 20, 30)), "loaded"
+
+        def get_pil_image(self, use_segmented=False):
+            _ = use_segmented
+            return Image.new("RGB", (32, 32), color=(10, 20, 30))
+
+        def close(self):
+            closed.append((self.env_id, self.episode_idx))
+
+    monkeypatch.setattr(state_manager, "ProcessSessionProxy", _FakeProxy)
+    monkeypatch.setattr(
+        callbacks.user_manager,
+        "init_session",
+        lambda uid: (
+            True,
+            "ok",
+            {"current_task": {"env_id": "BinFill", "episode_idx": 1}, "completed_count": 0},
+        ),
+    )
+    monkeypatch.setattr(callbacks, "get_task_hint", lambda env_id: "")
+    monkeypatch.setattr(callbacks, "should_show_demo_video", lambda env_id: False)
+
+    demo = ui_layout.create_ui_blocks()
+    root_url, demo, server, thread = _mount_demo(demo)
+
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+
+            page1 = browser.new_page(viewport={"width": 1280, "height": 900})
+            page1.goto(root_url, wait_until="domcontentloaded")
+            _wait_until(lambda: len(state_manager.GLOBAL_SESSIONS) == 1, timeout_s=15.0)
+            _wait_until(lambda: _read_progress_text(page1) is None, timeout_s=15.0)
+
+            page2 = browser.new_page(viewport={"width": 1280, "height": 900})
+            page2.goto(root_url, wait_until="domcontentloaded")
+            _wait_until(lambda: len(state_manager.GLOBAL_SESSIONS) == 2, timeout_s=15.0)
+            _wait_until(lambda: _read_progress_text(page2) is None, timeout_s=15.0)
+
+            assert len(state_manager.GLOBAL_SESSIONS) == config.SESSION_CONCURRENCY_LIMIT
+            assert len(state_manager.ACTIVE_SESSION_SLOTS) == config.SESSION_CONCURRENCY_LIMIT
+
+            page3 = browser.new_page(viewport={"width": 1280, "height": 900})
+            page3.goto(root_url, wait_until="domcontentloaded")
+
+            _wait_until(
+                lambda: (_read_progress_text(page3) or "").startswith(config.UI_TEXT["progress"]["episode_loading"]),
+                timeout_s=10.0,
+            )
+            time.sleep(1.0)
+            assert len(state_manager.GLOBAL_SESSIONS) == config.SESSION_CONCURRENCY_LIMIT
+            assert len(state_manager.ACTIVE_SESSION_SLOTS) == config.SESSION_CONCURRENCY_LIMIT
+            assert _read_progress_text(page3) is not None
+
+            page1.close()
+
+            _wait_until(lambda: len(closed) >= 1, timeout_s=10.0)
+            _wait_until(lambda: _read_progress_text(page3) is None, timeout_s=15.0)
+            _wait_until(lambda: len(state_manager.GLOBAL_SESSIONS) == config.SESSION_CONCURRENCY_LIMIT, timeout_s=10.0)
+            _wait_until(lambda: len(state_manager.ACTIVE_SESSION_SLOTS) == config.SESSION_CONCURRENCY_LIMIT, timeout_s=10.0)
+
+            browser.close()
+    finally:
+        server.should_exit = True
+        thread.join(timeout=10)
+        demo.close()

gradio-web/test/test_ui_native_layout_contract.py

@@ -36,8 +36,7 @@ def test_native_ui_css_uses_configured_global_font_size_variables(reload_module)
     assert f"--button-large-text-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
     assert f"--section-header-text-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
     assert f"--text-md: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
-    assert "#loading_overlay_group h3" in css
-    assert f"font-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
+    assert "#load_status_mode" not in css
 
 
 def test_native_ui_css_excludes_header_title_from_global_font_size(reload_module):
@@ -53,8 +52,7 @@ def test_native_ui_forces_light_theme_and_uses_light_overlay_baseline(reload_mod
     css = ui_layout.CSS
 
     assert "color-scheme: light !important;" in css
-    assert "background: rgba(255, 255, 255, 0.92) !important;" in css
-    assert "color: var(--body-text-color) !important;" in css
+    assert "#loading_overlay_group" not in css
     assert "body.dark," not in css
     assert ".dark," not in css
     assert ":root.dark" not in css
@@ -137,7 +135,6 @@ def test_native_ui_config_contains_phase_machine_and_precheck_chain(reload_modul
 
         required_ids = {
             "header_task",
-            "loading_overlay_group",
             "main_layout_row",
             "media_card",
             "log_card",
@@ -166,15 +163,13 @@ def test_native_ui_config_contains_phase_machine_and_precheck_chain(reload_modul
             if "value" in comp.get("props", {})
         ]
         assert all("_anchor" not in str(v) for v in values)
-        assert any(
-            "The episode is loading..." in str(v)
-            for v in values
-        )
         assert all(
             "Logging in and setting up environment... Please wait." not in str(v)
             for v in values
         )
         assert all("Loading environment, please wait..." not in str(v) for v in values)
+        assert "The episode is loading..." in ui_layout.PROGRESS_TEXT_REWRITE_JS
+        assert "Lots of people are playing! Please wait..." in ui_layout.PROGRESS_TEXT_REWRITE_JS
 
         log_output_comp = next(
             comp

gradio-web/test/test_ui_phase_machine_runtime_e2e.py

@@ -1043,9 +1043,6 @@ def test_unified_loading_overlay_init_flow(monkeypatch):
     fake_obs_img = Image.fromarray(fake_obs)
     calls = {"init": 0}
 
-    def fake_show_loading_info():
-        return gr.update(visible=True)
-
     def fake_init_app(_request=None):
         calls["init"] += 1
         time.sleep(0.8)
@@ -1068,11 +1065,9 @@ def test_unified_loading_overlay_init_flow(monkeypatch):
             gr.update(visible=True),   # action_phase_group
             gr.update(visible=True),   # control_panel_group
             gr.update(value="hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
-    monkeypatch.setattr(ui_layout, "show_loading_info", fake_show_loading_info)
     monkeypatch.setattr(ui_layout, "init_app", fake_init_app)
 
     demo = ui_layout.create_ui_blocks()
@@ -1098,26 +1093,29 @@ def test_unified_loading_overlay_init_flow(monkeypatch):
             page = browser.new_page(viewport={"width": 1280, "height": 900})
             page.goto(root_url, wait_until="domcontentloaded")
 
-            page.wait_for_selector("#loading_overlay_group", state="visible", timeout=2500)
-
-            overlay_text = page.evaluate(
+            page.wait_for_function(
                 """() => {
-                    const el = document.getElementById('loading_overlay_group');
-                    return el ? (el.textContent || '') : '';
+                    const node = document.querySelector('.progress-text');
+                    return !!node && (node.textContent || '').includes('The episode is loading...');
                 }"""
+                ,
+                timeout=5000,
             )
-            page.wait_for_function(
+            progress_text = page.evaluate(
                 """() => {
-                    const heading = document.querySelector('#loading_overlay_group h3');
-                    return !!heading && getComputedStyle(heading).fontSize === '32px';
-                }""",
-                timeout=5000,
+                    const node = document.querySelector('.progress-text');
+                    return node ? (node.textContent || '') : '';
+                }"""
             )
-            assert canonical_copy in overlay_text
-            assert superseded_copy not in overlay_text
+            assert canonical_copy in progress_text
+            assert superseded_copy not in progress_text
             assert legacy_copy not in page.content()
+            assert page.locator("#loading_overlay_group").count() == 0
 
-            page.wait_for_selector("#loading_overlay_group", state="hidden", timeout=15000)
+            page.wait_for_function(
+                """() => !document.querySelector('.progress-text')""",
+                timeout=15000,
+            )
             page.wait_for_selector("#main_interface_root", state="visible", timeout=15000)
             page.wait_for_function(
                 """() => {
@@ -1167,7 +1165,6 @@ def test_no_video_task_hides_manual_demo_button(monkeypatch):
             gr.update(visible=True),  # action_phase_group
             gr.update(visible=True),  # control_panel_group
             gr.update(value="hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
@@ -1274,7 +1271,6 @@ def test_point_wait_state_pulses_live_obs_and_updates_system_log(monkeypatch):
             gr.update(visible=True),  # action_phase_group
             gr.update(visible=True),  # control_panel_group
             gr.update(value="hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
@@ -1499,7 +1495,6 @@ def test_reference_action_single_click_applies_coords_without_wait_state(monkeyp
             gr.update(visible=True),  # action_phase_group
             gr.update(visible=True),  # control_panel_group
             gr.update(value="hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
@@ -1651,7 +1646,6 @@ def test_live_obs_client_resize_fills_width_and_keeps_click_mapping(monkeypatch)
             gr.update(visible=True),  # action_phase_group
             gr.update(visible=True),  # control_panel_group
             gr.update(value="hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
@@ -1879,7 +1873,6 @@ def test_header_task_shows_env_after_init(monkeypatch):
             gr.update(visible=True),  # action_phase_group
             gr.update(visible=True),  # control_panel_group
             gr.update(value="hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
@@ -1950,7 +1943,6 @@ def test_header_goal_capitalizes_displayed_value_after_init(monkeypatch):
             gr.update(visible=True),  # action_phase_group
             gr.update(visible=True),  # control_panel_group
             gr.update(value="hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
@@ -2026,7 +2018,6 @@ def test_header_task_env_normalization_and_fallback(monkeypatch, task_info_text,
             gr.update(visible=True),  # action_phase_group
             gr.update(visible=True),  # control_panel_group
             gr.update(value="hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 
@@ -2098,7 +2089,6 @@ def test_header_task_switch_to_video_task_shows_demo_phase(monkeypatch):
             gr.update(visible=not show_video),  # action_phase_group
             gr.update(visible=not show_video),  # control_panel_group
             gr.update(value="video hint" if show_video else "hint"),  # task_hint_display
-            gr.update(visible=False),  # loading_overlay
             gr.update(interactive=True),  # reference_action_btn
         )
 

gradio-web/ui_layout.py

@@ -5,6 +5,7 @@ Two-column layout: Point Selection | Right Panel.
 """
 
 import ast
+import json
 
 import gradio as gr
 
@@ -19,6 +20,7 @@ from config import (
     POINT_SELECTION_SCALE,
     RIGHT_TOP_ACTION_SCALE,
     RIGHT_TOP_LOG_SCALE,
+    UI_TEXT,
     UI_GLOBAL_FONT_SIZE,
     get_live_obs_elem_classes,
 )
@@ -36,7 +38,6 @@ from gradio_callbacks import (
     precheck_execute_inputs,
     refresh_live_obs,
     restart_episode_wrapper,
-    show_loading_info,
     switch_env_wrapper,
     switch_to_action_phase,
     switch_to_execute_phase,
@@ -49,6 +50,8 @@ PHASE_INIT = "init"
 PHASE_DEMO_VIDEO = "demo_video"
 PHASE_ACTION_POINT = "action_point"
 PHASE_EXECUTION_PLAYBACK = "execution_playback"
+LOAD_STATUS_MODE_IDLE = "idle"
+LOAD_STATUS_MODE_EPISODE_LOAD = "episode_load"
 
 APP_THEME = gr.themes.Default()
 
@@ -333,6 +336,159 @@ THEME_LOCK_JS = r"""
 """
 
 
+SET_EPISODE_LOAD_MODE_JS = f"""
+() => {{
+    window.__robommeLoadStatusMode = {json.dumps(LOAD_STATUS_MODE_EPISODE_LOAD)};
+}}
+"""
+
+
+SET_EPISODE_LOAD_MODE_IF_SWITCH_JS = f"""
+(_uid, selectedEnv, currentTaskEnv) => {{
+    const normalize = (value) => (value == null ? "" : String(value).trim().toLowerCase());
+    const nextEnv = normalize(selectedEnv);
+    const currentEnv = normalize(currentTaskEnv);
+    window.__robommeLoadStatusMode =
+        nextEnv && nextEnv !== currentEnv
+            ? {json.dumps(LOAD_STATUS_MODE_EPISODE_LOAD)}
+            : {json.dumps(LOAD_STATUS_MODE_IDLE)};
+}}
+"""
+
+
+RESET_EPISODE_LOAD_MODE_JS = f"""
+() => {{
+    window.__robommeLoadStatusMode = {json.dumps(LOAD_STATUS_MODE_IDLE)};
+}}
+"""
+
+
+PROGRESS_TEXT_REWRITE_JS = f"""
+() => {{
+    const modeEpisodeLoad = {json.dumps(LOAD_STATUS_MODE_EPISODE_LOAD)};
+    const modeIdle = {json.dumps(LOAD_STATUS_MODE_IDLE)};
+    const episodeLoadingText = {json.dumps(UI_TEXT["progress"]["episode_loading"])};
+    const queueWaitText = {json.dumps(UI_TEXT["progress"]["queue_wait"])};
+
+    window.__robommeLoadStatusMode = window.__robommeLoadStatusMode || modeIdle;
+    const getMode = () => window.__robommeLoadStatusMode || modeIdle;
+
+    const ensureOverlayStyles = () => {{
+        const host = document.getElementById("native_progress_host");
+        if (!(host instanceof HTMLElement)) {{
+            return;
+        }}
+        host.style.setProperty("position", "fixed", "important");
+        host.style.setProperty("inset", "0", "important");
+        host.style.setProperty("z-index", "9999", "important");
+        host.style.setProperty("pointer-events", "none", "important");
+        host.style.setProperty("width", "100vw", "important");
+        host.style.setProperty("height", "100vh", "important");
+        host.style.setProperty("min-height", "100vh", "important");
+        host.style.setProperty("overflow", "visible", "important");
+
+        const wrap = host.querySelector(".wrap");
+        if (wrap instanceof HTMLElement) {{
+            wrap.style.setProperty("position", "fixed", "important");
+            wrap.style.setProperty("inset", "0", "important");
+            wrap.style.setProperty("width", "100vw", "important");
+            wrap.style.setProperty("height", "100vh", "important");
+            wrap.style.setProperty("min-height", "100vh", "important");
+            wrap.style.setProperty("padding", "0", "important");
+            wrap.style.setProperty("display", "flex", "important");
+            wrap.style.setProperty("align-items", "center", "important");
+            wrap.style.setProperty("justify-content", "center", "important");
+            wrap.style.setProperty("background", "rgba(255, 255, 255, 0.92)", "important");
+            wrap.style.setProperty("backdrop-filter", "blur(2px)", "important");
+        }}
+    }};
+
+    const splitSegments = (text) =>
+        text
+            .split("|")
+            .map((part) => part.trim())
+            .filter(Boolean);
+
+    const rewriteNode = (node) => {{
+        if (!(node instanceof HTMLElement)) {{
+            return;
+        }}
+
+        const displayed = (node.innerText || node.textContent || "").trim();
+        const previousCustom = node.dataset.robommeProgressCustom || "";
+        const raw =
+            node.dataset.robommeProgressCustomized === "1" && displayed === previousCustom
+                ? node.dataset.robommeProgressRaw || displayed
+                : displayed;
+
+        if (getMode() !== modeEpisodeLoad) {{
+            if (
+                node.dataset.robommeProgressCustomized === "1" &&
+                displayed === previousCustom &&
+                node.dataset.robommeProgressRaw
+            ) {{
+                node.textContent = node.dataset.robommeProgressRaw;
+            }}
+            delete node.dataset.robommeProgressCustomized;
+            delete node.dataset.robommeProgressRaw;
+            delete node.dataset.robommeProgressCustom;
+            return;
+        }}
+
+        const normalized = raw.toLowerCase();
+        let custom = null;
+
+        if (normalized.startsWith("processing")) {{
+            const segments = splitSegments(raw);
+            const suffix = segments.length > 1 ? ` | ${{segments.slice(1).join(" | ")}}` : "";
+            custom = `${{episodeLoadingText}}${{suffix}}`;
+        }} else if (normalized.startsWith("queue:")) {{
+            custom = `${{queueWaitText}} | ${{raw}}`;
+        }}
+
+        if (!custom) {{
+            return;
+        }}
+
+        node.dataset.robommeProgressCustomized = "1";
+        node.dataset.robommeProgressRaw = raw;
+        node.dataset.robommeProgressCustom = custom;
+        if (displayed !== custom) {{
+            node.textContent = custom;
+        }}
+    }};
+
+    const rewriteAll = () => {{
+        ensureOverlayStyles();
+        document.querySelectorAll(".progress-text").forEach(rewriteNode);
+    }};
+
+    const scheduleRewrite = () => {{
+        if (window.__robommeProgressRewriteRaf) {{
+            return;
+        }}
+        window.__robommeProgressRewriteRaf = window.requestAnimationFrame(() => {{
+            window.__robommeProgressRewriteRaf = null;
+            rewriteAll();
+        }});
+    }};
+
+    if (!window.__robommeProgressRewriteInstalled) {{
+        const observer = new MutationObserver(scheduleRewrite);
+        observer.observe(document.body, {{
+            childList: true,
+            subtree: true,
+            characterData: true,
+        }});
+        window.setInterval(scheduleRewrite, 200);
+        window.__robommeProgressRewriteInstalled = true;
+    }}
+
+    scheduleRewrite();
+}}
+"""
+
+
 CSS = f"""
 :root {{
     --body-text-size: {UI_GLOBAL_FONT_SIZE} !important;
@@ -357,27 +513,28 @@ CSS = f"""
     font-size: var(--text-xxl) !important;
 }}
 
-#loading_overlay_group {{
+#native_progress_host {{
     position: fixed !important;
     inset: 0 !important;
     z-index: 9999 !important;
-    background: rgba(255, 255, 255, 0.92) !important;
-    color: var(--body-text-color) !important;
-    text-align: center !important;
+    pointer-events: none !important;
 }}
 
-#loading_overlay_group > div {{
-    min-height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+#native_progress_host .wrap {{
+    width: 100vw !important;
+    min-height: 100vh !important;
 }}
 
-#loading_overlay_group h3 {{
-    margin: 0 !important;
-    font-size: {UI_GLOBAL_FONT_SIZE} !important;
+#native_progress_host .wrap.translucent {{
+    background: rgba(255, 255, 255, 0.92) !important;
+    backdrop-filter: blur(2px);
+}}
+
+#native_progress_host .pending {{
+    min-height: 100vh !important;
 }}
 
+
 #reference_action_btn button:not(:disabled),
 button#reference_action_btn:not(:disabled) {{
     background: #1f8b4c !important;
@@ -524,7 +681,7 @@ def _with_phase_from_load(load_result):
 
 
 def _skip_load_flow():
-    return tuple(gr.skip() for _ in range(21))
+    return tuple(gr.skip() for _ in range(20))
 
 
 def _phase_visibility_updates(phase):
@@ -587,12 +744,6 @@ def create_ui_blocks():
                     elem_id="header_goal",
                 )
 
-        loading_overlay = gr.Markdown(
-            "### The episode is loading...",
-            visible=True,
-            elem_id="loading_overlay_group",
-        )
-
         uid_state = gr.State(
             value=None,
             time_to_live=SESSION_TIMEOUT,
@@ -607,7 +758,13 @@ def create_ui_blocks():
         progress_info_box = gr.Textbox(visible=False)
         goal_box = gr.Textbox(visible=False)
 
-        with gr.Column(visible=False, elem_id="main_interface_root") as main_interface:
+        with gr.Column(visible=True, elem_id="main_interface_root") as main_interface:
+            native_progress_host = gr.Markdown(
+                value="",
+                visible=True,
+                container=False,
+                elem_id="native_progress_host",
+            )
             with gr.Row(elem_id="main_layout_row"):
                 with gr.Column(scale=POINT_SELECTION_SCALE):
                     with gr.Column(elem_classes=["native-card"], elem_id="media_card"):
@@ -741,7 +898,6 @@ def create_ui_blocks():
             action_phase_group,
             control_panel_group,
             task_hint_display,
-            loading_overlay,
             reference_action_btn,
             ui_phase_state,
         ]
@@ -810,17 +966,6 @@ def create_ui_blocks():
             normalized_current_env = _normalize_env_choice(current_task_env, base_choices)
             return normalized_selected_env, normalized_current_env
 
-        def prepare_header_task_switch(selected_env, current_task_env):
-            normalized_selected_env, normalized_current_env = _normalize_selected_env(
-                selected_env,
-                current_task_env,
-            )
-            if not normalized_selected_env:
-                return gr.update(visible=False)
-            if normalized_selected_env == normalized_current_env:
-                return gr.update(visible=False)
-            return gr.update(visible=False)
-
         def maybe_switch_env_with_phase(uid, selected_env, current_task_env):
             normalized_selected_env, normalized_current_env = _normalize_selected_env(
                 selected_env,
@@ -845,18 +990,15 @@ def create_ui_blocks():
             show_progress="hidden",
         )
 
-        header_task_box.select(
-            fn=prepare_header_task_switch,
-            inputs=[header_task_box, current_task_env_state],
-            outputs=[loading_overlay],
-            queue=False,
-            show_progress="hidden",
-        ).then(
+        header_task_switch = header_task_box.select(
             fn=maybe_switch_env_with_phase,
             inputs=[uid_state, header_task_box, current_task_env_state],
             outputs=load_flow_outputs,
             concurrency_id=SESSION_CONCURRENCY_ID,
             concurrency_limit=SESSION_CONCURRENCY_LIMIT,
+            show_progress="full",
+            js=SET_EPISODE_LOAD_MODE_IF_SWITCH_JS,
+            show_progress_on=[native_progress_host],
         ).then(
             fn=_phase_visibility_updates,
             inputs=[ui_phase_state],
@@ -876,13 +1018,28 @@ def create_ui_blocks():
             queue=False,
             show_progress="hidden",
         )
+        header_task_switch.success(
+            fn=None,
+            js=RESET_EPISODE_LOAD_MODE_JS,
+            queue=False,
+            show_progress="hidden",
+        )
+        header_task_switch.failure(
+            fn=None,
+            js=RESET_EPISODE_LOAD_MODE_JS,
+            queue=False,
+            show_progress="hidden",
+        )
 
-        next_task_btn.click(
+        next_task_click = next_task_btn.click(
             fn=load_next_task_with_phase,
             inputs=[uid_state],
             outputs=load_flow_outputs,
             concurrency_id=SESSION_CONCURRENCY_ID,
             concurrency_limit=SESSION_CONCURRENCY_LIMIT,
+            show_progress="full",
+            js=SET_EPISODE_LOAD_MODE_JS,
+            show_progress_on=[native_progress_host],
         ).then(
             fn=_phase_visibility_updates,
             inputs=[ui_phase_state],
@@ -902,13 +1059,28 @@ def create_ui_blocks():
             queue=False,
             show_progress="hidden",
         )
+        next_task_click.success(
+            fn=None,
+            js=RESET_EPISODE_LOAD_MODE_JS,
+            queue=False,
+            show_progress="hidden",
+        )
+        next_task_click.failure(
+            fn=None,
+            js=RESET_EPISODE_LOAD_MODE_JS,
+            queue=False,
+            show_progress="hidden",
+        )
 
-        restart_episode_btn.click(
+        restart_episode_click = restart_episode_btn.click(
             fn=restart_episode_with_phase,
             inputs=[uid_state],
             outputs=load_flow_outputs,
             concurrency_id=SESSION_CONCURRENCY_ID,
             concurrency_limit=SESSION_CONCURRENCY_LIMIT,
+            show_progress="full",
+            js=SET_EPISODE_LOAD_MODE_JS,
+            show_progress_on=[native_progress_host],
         ).then(
             fn=_phase_visibility_updates,
             inputs=[ui_phase_state],
@@ -928,6 +1100,18 @@ def create_ui_blocks():
             queue=False,
             show_progress="hidden",
         )
+        restart_episode_click.success(
+            fn=None,
+            js=RESET_EPISODE_LOAD_MODE_JS,
+            queue=False,
+            show_progress="hidden",
+        )
+        restart_episode_click.failure(
+            fn=None,
+            js=RESET_EPISODE_LOAD_MODE_JS,
+            queue=False,
+            show_progress="hidden",
+        )
 
         video_display.end(
             fn=on_video_end_transition,
@@ -1124,11 +1308,20 @@ def create_ui_blocks():
         )
 
         demo.load(
+            fn=None,
+            js=PROGRESS_TEXT_REWRITE_JS,
+            queue=False,
+        )
+
+        init_load = demo.load(
             fn=init_app_with_phase,
             inputs=[],
             outputs=load_flow_outputs,
             concurrency_id=SESSION_CONCURRENCY_ID,
             concurrency_limit=SESSION_CONCURRENCY_LIMIT,
+            show_progress="full",
+            js=SET_EPISODE_LOAD_MODE_JS,
+            show_progress_on=[native_progress_host],
         ).then(
             fn=_phase_visibility_updates,
             inputs=[ui_phase_state],
@@ -1148,6 +1341,18 @@ def create_ui_blocks():
             queue=False,
             show_progress="hidden",
         )
+        init_load.success(
+            fn=None,
+            js=RESET_EPISODE_LOAD_MODE_JS,
+            queue=False,
+            show_progress="hidden",
+        )
+        init_load.failure(
+            fn=None,
+            js=RESET_EPISODE_LOAD_MODE_JS,
+            queue=False,
+            show_progress="hidden",
+        )
 
         demo.unload(fn=cleanup_current_request_session)
         demo.queue(max_size=None, default_concurrency_limit=None)