fix(hub): eliminate iframe flash when switching instance nav tabs

Use soft in-frame navigation and loading overlay in hub instance shell; pass embed=1 for iframe SSO opens.

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/app.css

@@ -1092,6 +1092,10 @@ body.market-chart-fs-open {
   background: var(--bg);
 }
 
+.instance-frame-shell.is-instance-nav-loading .instance-frame {
+  visibility: hidden;
+}
+
 .exchange-fullscreen {
   position: fixed;
   inset: 0;

manual_trading_hub/static/app.js

@@ -371,13 +371,20 @@
     return j.url;
   }
 
+  function setInstanceFrameNavLoading(loading) {
+    const shell = document.getElementById("instance-frame-shell");
+    if (shell) shell.classList.toggle("is-instance-nav-loading", !!loading);
+  }
+
   async function openInstance(exchangeId, nextPath, opts) {
     const options = opts || {};
     const newTab = !!options.newTab;
     const next = nextPath || "/";
     try {
       const embedded = isHubEmbedded();
-      const url = await fetchInstanceOpenUrl(exchangeId, next, { embed: embedded });
+      const url = await fetchInstanceOpenUrl(exchangeId, next, {
+        embed: embedded || !newTab,
+      });
       if (newTab) {
         window.open(url, "_blank", "noopener");
         return;
@@ -417,11 +424,14 @@
       const url = await fetchInstanceOpenUrl(
         instanceFrameCtx.exchangeId,
         instanceFrameCtx.nextPath,
-        { embed: isHubEmbedded() }
+        { embed: true }
       );
       instanceFrameUrl = url;
       const frame = document.getElementById("instance-frame");
-      if (frame) frame.src = url;
+      if (frame) {
+        setInstanceFrameNavLoading(true);
+        frame.src = url;
+      }
     } catch (e) {
       showToast(String(e), true);
     }
@@ -438,6 +448,7 @@
     closeExchangeFullscreen();
     instanceFrameUrl = url;
     if (titleEl) titleEl.textContent = title || "实例";
+    setInstanceFrameNavLoading(true);
     frame.src = url;
     shell.classList.remove("hidden");
     shell.setAttribute("aria-hidden", "false");
@@ -466,6 +477,7 @@
     if (shell) {
       shell.classList.add("hidden");
       shell.setAttribute("aria-hidden", "true");
+      shell.classList.remove("is-instance-nav-loading");
     }
     document.body.classList.remove("hub-instance-frame-open");
   }
@@ -3129,6 +3141,22 @@
     const refresh = document.getElementById("instance-frame-refresh");
     const newTab = document.getElementById("instance-frame-newtab");
     const frame = document.getElementById("instance-frame");
+    if (frame && frame.dataset.hubNavBound !== "1") {
+      frame.dataset.hubNavBound = "1";
+      frame.addEventListener("load", () => setInstanceFrameNavLoading(false));
+    }
+    if (!window.__hubInstanceFrameMsgBound) {
+      window.__hubInstanceFrameMsgBound = true;
+      window.addEventListener("message", (ev) => {
+        const d = ev.data;
+        if (!d || typeof d !== "object") return;
+        if (d.type === "instance-frame-navigating") {
+          setInstanceFrameNavLoading(true);
+        } else if (d.type === "instance-frame-ready" || d.type === "instance-theme-ready") {
+          setInstanceFrameNavLoading(false);
+        }
+      });
+    }
     if (back) back.onclick = () => closeInstanceFrame();
     if (refresh) refresh.onclick = () => refreshInstanceFrame();
     if (newTab) {

manual_trading_hub/static/index.html

@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-  <link rel="stylesheet" href="/assets/app.css?v=20260613-host-status-tone" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260614-instance-frame-nav" />
   <link rel="stylesheet" href="/assets/account_risk_badge.css?v=1" />
   <link rel="stylesheet" href="/assets/dashboard.css?v=20260612-dash-monitor-count" />
 </head>
@@ -654,6 +654,6 @@
   <script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
   <script src="/assets/ai_review_render.js?v=3"></script>
   <script src="/assets/time_close_ui.js?v=2"></script>
-  <script src="/assets/app.js?v=20260613-host-status-tone"></script>
+  <script src="/assets/app.js?v=20260614-instance-frame-nav"></script>
 </body>
 </html>