Keep monitor alive across nav and speed up status collect.

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

control/frontend/src/App.tsx

@@ -1,5 +1,11 @@
 import { type ReactNode } from "react";
-import { NavLink, Navigate, Route, Routes } from "react-router-dom";
+import {
+  NavLink,
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+} from "react-router-dom";
 import { clearSession, getToken, getUsername } from "./api";
 import LoginPage from "./pages/Login";
 import MonitorPage from "./pages/Monitor";
@@ -38,9 +44,31 @@ function Shell({ children }: { children: ReactNode }) {
   );
 }
 
+/** 监控页保活：切设置不断 SSE、不丢卡片状态 */
+function AuthedPages() {
+  const loc = useLocation();
+  const onMonitor =
+    loc.pathname === "/" ||
+    loc.pathname === "/monitor" ||
+    loc.pathname.startsWith("/monitor/");
+  const onSettings =
+    loc.pathname === "/settings" || loc.pathname.startsWith("/settings/");
+  return (
+    <Shell>
+      <div className={onMonitor ? "page-pane" : "page-pane hidden"} aria-hidden={!onMonitor}>
+        <MonitorPage />
+      </div>
+      <div className={onSettings ? "page-pane" : "page-pane hidden"} aria-hidden={!onSettings}>
+        <SettingsPage />
+      </div>
+      {!onMonitor && !onSettings ? <Navigate to="/monitor" replace /> : null}
+    </Shell>
+  );
+}
+
 function RequireAuth({ children }: { children: ReactNode }) {
   if (!getToken()) return <Navigate to="/login" replace />;
-  return <Shell>{children}</Shell>;
+  return <>{children}</>;
 }
 
 export default function App() {
@@ -48,23 +76,13 @@ export default function App() {
     <Routes>
       <Route path="/login" element={<LoginPage />} />
       <Route
-        path="/monitor"
+        path="/*"
         element={
           <RequireAuth>
-            <MonitorPage />
+            <AuthedPages />
           </RequireAuth>
         }
       />
-      <Route
-        path="/settings"
-        element={
-          <RequireAuth>
-            <SettingsPage />
-          </RequireAuth>
-        }
-      />
-      <Route path="/" element={<Navigate to="/monitor" replace />} />
-      <Route path="*" element={<Navigate to="/monitor" replace />} />
     </Routes>
   );
 }

control/frontend/src/pages/Monitor.tsx

@@ -50,30 +50,43 @@ function hasOpenPosition(position: Record<string, unknown>): boolean {
   return OPEN_STATUSES.has(st);
 }
 
+/** 页面级快照：整页刷新前保留上次卡片，避免空白等待 */
+let cachedNodes: NodeCard[] = [];
+let cachedSseSec = 1;
+
 export default function MonitorPage() {
-  const [nodes, setNodes] = useState<NodeCard[]>([]);
+  const [nodes, setNodes] = useState<NodeCard[]>(() => cachedNodes);
   const [err, setErr] = useState("");
   const [busy, setBusy] = useState<Record<number, string>>({});
   const [selected, setSelected] = useState<Set<number>>(new Set());
-  const [sseSec, setSseSec] = useState(1);
-  const [liveState, setLiveState] = useState<"connecting" | "live" | "retry">("connecting");
+  const [sseSec, setSseSec] = useState(cachedSseSec);
+  const [liveState, setLiveState] = useState<"connecting" | "live" | "retry">(
+    cachedNodes.length ? "live" : "connecting",
+  );
   const [detailId, setDetailId] = useState<number | null>(null);
 
+  const applyNodes = useCallback((list: NodeCard[]) => {
+    cachedNodes = list;
+    setNodes(list);
+  }, []);
+
   const refresh = useCallback(async () => {
     try {
       const r = await apiFetch<{ nodes: NodeCard[] }>("/api/nodes/status/all");
-      setNodes(r.nodes || []);
+      applyNodes(r.nodes || []);
       setErr("");
     } catch (ex) {
       setErr(ex instanceof Error ? ex.message : String(ex));
     }
-  }, []);
+  }, [applyNodes]);
 
   useEffect(() => {
     apiFetch<{ sse_interval_sec?: number }>("/api/auth/me")
       .then((m) => {
         if (m.sse_interval_sec && Number(m.sse_interval_sec) > 0) {
-          setSseSec(Number(m.sse_interval_sec));
+          const sec = Number(m.sse_interval_sec);
+          cachedSseSec = sec;
+          setSseSec(sec);
         }
       })
       .catch(() => undefined);
@@ -85,7 +98,10 @@ export default function MonitorPage() {
     let timer: number | undefined;
     const ac = new AbortController();
 
-    void refresh();
+    // 无缓存时先拉一次；有缓存则等 SSE，避免切页/重挂载双倍打满策略机
+    if (!cachedNodes.length) {
+      void refresh();
+    }
 
     async function runStream() {
       while (!cancelled) {
@@ -137,7 +153,7 @@ export default function MonitorPage() {
                   if (eventName === "error") {
                     setErr(parsed.detail || "SSE 错误");
                   } else if (parsed.nodes) {
-                    setNodes(parsed.nodes);
+                    applyNodes(parsed.nodes);
                     setErr("");
                   }
                 } catch {
@@ -172,7 +188,7 @@ export default function MonitorPage() {
       ac.abort();
       if (timer != null) window.clearTimeout(timer);
     };
-  }, [refresh]);
+  }, [refresh, applyNodes]);
 
   async function act(id: number, action: "start" | "pause" | "update" | "login") {
     if (action === "update") {

control/frontend/src/styles.css

@@ -74,6 +74,10 @@ body {
   font-size: 1.25rem;
 }
 
+.page-pane.hidden {
+  display: none;
+}
+
 .meta {
   color: var(--muted);
   font-size: 0.9rem;