diff --git a/package.json b/package.json
index 3acd2c9d..58555b20 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,json}\" \"tests/**/*.ts\" \"*.{json,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,json}\" \"tests/**/*.ts\" \"*.{json,md}\"",
     "test": "node tests/run.mjs",
+    "test:screenshots": "node tests/screenshots/run.mjs",
     "format:rust": "cd src-tauri && cargo fmt",
     "format:all": "pnpm format && pnpm format:rust",
     "prepare": "husky"
diff --git a/src-tauri/src/commands/maa_core.rs b/src-tauri/src/commands/maa_core.rs
index 09eda474..8d001bff 100644
--- a/src-tauri/src/commands/maa_core.rs
+++ b/src-tauri/src/commands/maa_core.rs
@@ -811,6 +811,7 @@ pub fn destroy_instance_impl(state: &Arc<MaaState>, instance_id: &str) -> Result
         let mut instances = state.instances.lock().map_err(|e| e.to_string())?;
         let removed = instances.remove(instance_id);
         if let Some(instance) = &removed {
+            state.screenshot_service.remove_instance(instance_id);
             // Retire the old completion worker before this ID can be reused.
             instance.run_completion.retire();
             // Cancel before allowing the same ID to be created again. A callback snapshot
@@ -1859,8 +1860,7 @@ pub async fn maa_screenshot_subscribe(
         subscriber_id,
         interval_ms,
         handle,
-    );
-    Ok(())
+    )
 }
 
 /// 取消实例的实时截图订阅
diff --git a/src-tauri/src/screenshot_service.rs b/src-tauri/src/screenshot_service.rs
index 02502442..46e72e6b 100644
--- a/src-tauri/src/screenshot_service.rs
+++ b/src-tauri/src/screenshot_service.rs
@@ -64,7 +64,12 @@ impl ScreenshotService {
         subscriber_id: String,
         interval_ms: u64,
         handle: tokio::runtime::Handle,
-    ) {
+    ) -> Result<(), String> {
+        // Serialize registration with destroy/recreate of the same instance ID.
+        let instances = maa_state.instances.lock().map_err(|e| e.to_string())?;
+        if !instances.contains_key(&instance_id) {
+            return Err("Instance not found".into());
+        }
         let stream = {
             let mut streams = self.streams.lock().unwrap();
             streams
@@ -89,6 +94,7 @@ impl ScreenshotService {
             );
         }
 
+        drop(instances);
         // CAS 保证只有一个 tokio task 负责该实例的截图循环
         if stream
             .capture_running
@@ -97,6 +103,14 @@ impl ScreenshotService {
         {
             handle.spawn(capture_loop(stream, maa_state, instance_id));
         }
+        Ok(())
+    }
+
+    /// Called while holding the instances lock, before a replacement can subscribe.
+    pub fn remove_instance(&self, instance_id: &str) {
+        if let Some(stream) = self.streams.lock().unwrap().remove(instance_id) {
+            stream.subscribers.lock().unwrap().clear();
+        }
     }
 
     /// 取消订阅。截图循环将在下次迭代检测到无订阅者时自动退出。
@@ -125,102 +139,169 @@ impl ScreenshotService {
 // 截图循环（每实例至多一个 tokio task）
 // ============================================================================
 
-/// 每个实例只允许同时运行一个截图循环。
-///
-/// 使用显式 `impl Future + Send + 'static` 返回类型声明，确保编译器能正确推断
-/// Future 的 Send 性，避免 E0283 歧义。循环体内不在 `.await` 处持有任何非 Send 类型。
-fn capture_loop(
+async fn capture_loop(
     stream: Arc<InstanceScreenshotStream>,
     maa_state: Arc<MaaState>,
     instance_id: String,
-) -> impl std::future::Future<Output = ()> + Send + 'static {
-    async move {
-        log::debug!("[screenshot] capture_loop started: {}", instance_id);
-
-        loop {
-            // 1. 清理超时订阅者，计算当前最小间隔
-            //    MutexGuard 在块末尾 drop，不跨越 .await
-            let min_interval_ms: u64 = {
-                let mut subs = stream.subscribers.lock().unwrap();
-                let now = Instant::now();
-                subs.retain(|_, sub| {
-                    now.duration_since(sub.last_active).as_secs() < SUBSCRIBER_TIMEOUT_SECS
-                });
-                if subs.is_empty() {
-                    break;
-                }
-                subs.values()
-                    .map(|s| s.interval_ms)
-                    .min()
-                    .unwrap_or(1000)
-                    .max(MIN_INTERVAL_MS)
-            };
+) {
+    log::debug!("[screenshot] capture_loop started: {}", instance_id);
 
-            // 2. 检查实例状态，获取截图决策（仅用 bool 传递，不持有 Controller）
-            //    MutexGuard 在块末尾 drop，不跨越 .await
-            let (should_exit, should_screencap): (bool, bool) = {
-                match maa_state.instances.lock() {
-                    Err(_) => (true, false),
-                    Ok(instances) => match instances.get(&instance_id) {
-                        None => {
-                            log::debug!(
-                                "[screenshot] instance {} destroyed, stopping",
-                                instance_id
-                            );
-                            (true, false)
-                        }
-                        Some(inst) => {
-                            if inst.controller.is_none() {
-                                log::debug!(
-                                    "[screenshot] controller not connected for {}, stopping",
-                                    instance_id
-                                );
-                                (true, false)
-                            } else {
-                                let is_running = inst.tasker.as_ref().is_some_and(|t| t.running());
-                                // 任务运行中，管线自动更新缓存，跳过主动截图
-                                (false, !is_running)
-                            }
-                        }
-                    },
-                }
-            };
-
-            if should_exit {
+    loop {
+        let interval = {
+            // Coordinate the frame with destroy/recreate before checking this stream.
+            let instances = maa_state.instances.lock().ok();
+            let mut subs = stream.subscribers.lock().unwrap();
+            subs.retain(|_, sub| sub.last_active.elapsed().as_secs() < SUBSCRIBER_TIMEOUT_SECS);
+            let Some(interval) = subs.values().map(|s| s.interval_ms).min() else {
+                // A concurrent subscriber sees either a live loop or this idle flag.
+                stream.capture_running.store(false, Ordering::SeqCst);
                 break;
-            }
+            };
+            drop(subs);
 
-            // 3. 需要截图时，重新加锁获取 Controller 引用并调用 post_screencap
-            //    MutexGuard 及 Controller 引用均在块末尾 drop，不跨越 .await
-            if should_screencap {
-                if let Ok(instances) = maa_state.instances.lock() {
-                    if let Some(inst) = instances.get(&instance_id) {
-                        if let Some(ctrl) = inst.controller.as_ref() {
-                            let _ = ctrl.post_screencap();
-                        }
+            if let Some(inst) = instances.as_ref().and_then(|map| map.get(&instance_id)) {
+                // While running, the pipeline updates the cached frame itself.
+                if !inst.tasker.as_ref().is_some_and(|t| t.running()) {
+                    if let Some(ctrl) = inst.controller.as_ref().filter(|ctrl| ctrl.connected()) {
+                        let _ = ctrl.post_screencap();
                     }
                 }
             }
+            interval
+        };
+        // A temporarily missing controller waits for the next frame, like a connected one.
+        tokio::time::sleep(tokio::time::Duration::from_millis(interval)).await;
+    }
 
-            // 4. 等待下一帧（此处 Future 状态机仅持有 Arc<...> 和 String，均为 Send）
-            tokio::time::sleep(tokio::time::Duration::from_millis(min_interval_ms)).await;
-        }
+    log::debug!("[screenshot] capture_loop ended: {}", instance_id);
+}
 
-        // 标记循环已结束
-        stream.capture_running.store(false, Ordering::SeqCst);
-
-        // 竞态处理：若在「判断退出」与「写入 false」之间有新订阅者加入，
-        // 重新检查并在必要时重启循环，防止订阅者存在但无循环运行的窗口期。
-        let still_has_subs = !stream.subscribers.lock().unwrap().is_empty();
-        if still_has_subs
-            && stream
-                .capture_running
-                .compare_exchange(false, true, Ordering::SeqCst, Ordering::SeqCst)
-                .is_ok()
-        {
-            tokio::spawn(capture_loop(stream, maa_state, instance_id.clone()));
-        }
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::commands::{maa_core::destroy_instance_impl, types::InstanceRuntime};
+    use std::{future::Future, task::Poll, time::Duration};
 
-        log::debug!("[screenshot] capture_loop ended: {}", instance_id);
+    fn runtime() -> tokio::runtime::Runtime {
+        tokio::runtime::Builder::new_current_thread()
+            .enable_time()
+            .build()
+            .unwrap()
+    }
+
+    fn state_with_instance() -> Arc<MaaState> {
+        let state = Arc::new(MaaState::default());
+        state
+            .instances
+            .lock()
+            .unwrap()
+            .insert("fixture".into(), InstanceRuntime::default());
+        state
+    }
+
+    fn stream(last_active: Instant) -> Arc<InstanceScreenshotStream> {
+        Arc::new(InstanceScreenshotStream {
+            subscribers: Mutex::new(HashMap::from([(
+                "view".into(),
+                ScreenshotSubscriber {
+                    interval_ms: MIN_INTERVAL_MS,
+                    last_active,
+                },
+            )])),
+            capture_running: AtomicBool::new(true),
+        })
+    }
+
+    #[test]
+    fn missing_instance_cannot_leave_a_capture_stream() {
+        let runtime = runtime();
+        let state = Arc::new(MaaState::default());
+        let result = state.screenshot_service.subscribe(
+            state.clone(),
+            "missing".into(),
+            "view".into(),
+            100,
+            runtime.handle().clone(),
+        );
+        assert!(result.is_err());
+        assert!(state.screenshot_service.streams.lock().unwrap().is_empty());
+    }
+
+    #[test]
+    fn absent_controller_waits_in_the_same_capture_loop() {
+        runtime().block_on(async {
+            let state = state_with_instance();
+            let stream = stream(Instant::now());
+            let capture = capture_loop(stream.clone(), state, "fixture".into());
+            tokio::pin!(capture);
+
+            // The old implementation returned here and spawned a replacement in
+            // a tight loop. A controllerless stream must instead await its timer.
+            std::future::poll_fn(|cx| {
+                assert!(capture.as_mut().poll(cx).is_pending());
+                Poll::Ready(())
+            })
+            .await;
+            assert!(stream.capture_running.load(Ordering::SeqCst));
+        });
+    }
+
+    #[test]
+    fn expired_subscription_releases_the_running_flag() {
+        runtime().block_on(async {
+            let stream = stream(Instant::now() - Duration::from_secs(SUBSCRIBER_TIMEOUT_SECS + 1));
+            tokio::time::timeout(
+                Duration::from_secs(1),
+                capture_loop(stream.clone(), state_with_instance(), "fixture".into()),
+            )
+            .await
+            .expect("expired stream must stop");
+            assert!(stream.subscribers.lock().unwrap().is_empty());
+            assert!(!stream.capture_running.load(Ordering::SeqCst));
+        });
+    }
+
+    #[test]
+    fn recreated_instance_does_not_inherit_the_old_stream() {
+        runtime().block_on(async {
+            let state = state_with_instance();
+            let subscribe = |id: &str| {
+                state
+                    .screenshot_service
+                    .subscribe(
+                        state.clone(),
+                        "fixture".into(),
+                        id.into(),
+                        MIN_INTERVAL_MS,
+                        tokio::runtime::Handle::current(),
+                    )
+                    .unwrap();
+            };
+            subscribe("old-view");
+            let old = state.screenshot_service.streams.lock().unwrap()["fixture"].clone();
+            destroy_instance_impl(&state, "fixture").unwrap();
+            assert!(old.subscribers.lock().unwrap().is_empty());
+            assert!(state.screenshot_service.streams.lock().unwrap().is_empty());
+
+            state
+                .instances
+                .lock()
+                .unwrap()
+                .insert("fixture".into(), InstanceRuntime::default());
+            subscribe("new-view");
+            let new = state.screenshot_service.streams.lock().unwrap()["fixture"].clone();
+            assert!(!Arc::ptr_eq(&old, &new));
+            state.screenshot_service.unsubscribe("fixture", "old-view");
+            assert!(new.subscribers.lock().unwrap().contains_key("new-view"));
+
+            tokio::time::timeout(Duration::from_secs(1), async {
+                while old.capture_running.load(Ordering::SeqCst) {
+                    tokio::task::yield_now().await;
+                }
+            })
+            .await
+            .expect("retired stream must stop even after its instance ID is reused");
+            assert!(new.capture_running.load(Ordering::SeqCst));
+        });
     }
 }
diff --git a/src-tauri/src/web_server.rs b/src-tauri/src/web_server.rs
index 99093315..252eb852 100644
--- a/src-tauri/src/web_server.rs
+++ b/src-tauri/src/web_server.rs
@@ -1191,13 +1191,19 @@ async fn handle_screenshot_subscribe(
         .unwrap_or(1000);
 
     let handle = tokio::runtime::Handle::current();
-    state.maa_state.screenshot_service.subscribe(
+    if let Err(error) = state.maa_state.screenshot_service.subscribe(
         state.maa_state.clone(),
         instance_id,
         subscriber_id,
         interval_ms,
         handle,
-    );
+    ) {
+        return (
+            StatusCode::BAD_REQUEST,
+            Json(serde_json::json!({ "error": error })),
+        )
+            .into_response();
+    }
     Json(serde_json::json!({ "ok": true })).into_response()
 }
 
diff --git a/src/components/DashboardView.tsx b/src/components/DashboardView.tsx
index e64767d3..4250aec6 100644
--- a/src/components/DashboardView.tsx
+++ b/src/components/DashboardView.tsx
@@ -39,6 +39,7 @@ import { getLinuxDeviceName } from '@/utils/controller';
 import { getInterfaceLangKey } from '@/i18n';
 import { getMxuSpecialTask } from '@/types/specialTasks';
 import { isTaskCompatible } from '@/stores/helpers';
+import { useScreenshotStream } from '@/hooks/useScreenshotStream';
 import { isPretaskName, getPretaskItem, buildPretaskArgs, buildPretaskDef } from '@/types/pretasks';
 import { startGlobalCallbackListener } from '@/components/connection/callbackCache';
 import { stopInstanceTasks } from '@/services/taskStopService';
@@ -98,14 +99,7 @@ function InstanceCard({ instanceId, instanceName, isActive, onSelect }: Instance
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [isStarting, setIsStarting] = useState(false);
   const [isStopping, setIsStopping] = useState(false);
-  const streamingRef = useRef(false);
-  const lastFrameTimeRef = useRef(0);
-  const frameIntervalRef = useRef(getFrameInterval(screenshotFrameRate));
-
-  // 帧率配置变化时更新帧间隔
-  useEffect(() => {
-    frameIntervalRef.current = getFrameInterval(screenshotFrameRate);
-  }, [screenshotFrameRate]);
+  const connectionVersion = useRef(0);
 
   const connectionStatus = instanceConnectionStatus[instanceId];
   const taskStatus = instanceTaskStatus[instanceId];
@@ -456,120 +450,32 @@ function InstanceCard({ instanceId, instanceName, isActive, onSelect }: Instance
 
   // 获取最新缓存截图（后端截图循环负责更新缓存，前端无需主动触发 postScreencap）
   const captureFrame = useCallback(async (): Promise<string | null> => {
-    if (!instanceId) return null;
-
+    if (!isConnected) return null;
+    const version = connectionVersion.current;
     try {
       const imageData = await maaService.getCachedImage(instanceId);
-      return imageData || null;
+      return version === connectionVersion.current ? imageData || null : null;
     } catch {
       return null;
     }
-  }, [instanceId]);
-
-  const loopRunningRef = useRef(false);
-
-  const streamLoop = useCallback(async () => {
-    if (loopRunningRef.current) return;
-    loopRunningRef.current = true;
-
-    try {
-      let nextFrameTime = Date.now();
-
-      while (streamingRef.current) {
-        const now = Date.now();
-        const sleepTime = nextFrameTime - now;
-        if (sleepTime > 0) {
-          await new Promise((resolve) => setTimeout(resolve, sleepTime));
-        }
-
-        const frameInterval = frameIntervalRef.current;
-        if (frameInterval > 0) {
-          nextFrameTime += frameInterval;
-          if (nextFrameTime < Date.now()) {
-            nextFrameTime = Date.now() + frameInterval;
-          }
-        } else {
-          nextFrameTime = Date.now();
-        }
-
-        lastFrameTimeRef.current = Date.now();
-
-        try {
-          const imageData = await captureFrame();
-          if (imageData && streamingRef.current) {
-            setScreenshotUrl(imageData);
-          }
-        } catch {
-          // 静默处理
-        }
-      }
-    } finally {
-      loopRunningRef.current = false;
-    }
-  }, [instanceId, captureFrame]);
+  }, [instanceId, isConnected]);
 
-  // 组件卸载时停止流
+  // A new connection starts live view. A pause lasts until the next connection.
   useEffect(() => {
+    setInstanceScreenshotStreaming(instanceId, isConnected);
+    if (!isConnected) setScreenshotUrl(null);
     return () => {
-      streamingRef.current = false;
+      connectionVersion.current++;
     };
-  }, []);
+  }, [instanceId, isConnected, setInstanceScreenshotStreaming]);
 
-  // 订阅/退订后端截图循环（确保全局只有一份 post_screencap 在运行）
-  useEffect(() => {
-    if (!instanceId || !isStreaming) return;
-
-    const intervalMs = getFrameInterval(screenshotFrameRate);
-    maaService
-      .screenshotSubscribe(instanceId, `dashboard-${instanceId}`, intervalMs)
-      .catch(() => {});
-
-    return () => {
-      maaService.screenshotUnsubscribe(instanceId, `dashboard-${instanceId}`).catch(() => {});
-    };
-  }, [instanceId, isStreaming, screenshotFrameRate]);
-
-  // 响应 store 中 isStreaming 状态变化
-  useEffect(() => {
-    // 同步 ref 与 store 状态
-    streamingRef.current = isStreaming;
-
-    // 如果状态变为开启且已连接，启动流
-    if (isStreaming && isConnected) {
-      streamLoop();
-    }
-  }, [isStreaming, isConnected, streamLoop]);
-
-  // 连接后自动开始截图流
-  const prevConnectedRef = useRef(false);
-  const hasAutoStartedRef = useRef(false);
-
-  // 组件挂载或状态恢复后，如果已连接，自动启动截图流
-  useEffect(() => {
-    // 避免重复启动
-    if (hasAutoStartedRef.current) return;
-
-    if (isConnected && !isStreaming) {
-      hasAutoStartedRef.current = true;
-      streamingRef.current = true;
-      setInstanceScreenshotStreaming(instanceId, true);
-      streamLoop();
-    }
-  }, [isConnected, isStreaming, instanceId, setInstanceScreenshotStreaming, streamLoop]);
-
-  // 连接状态变化时的处理（从未连接变为已连接时重新启动）
-  useEffect(() => {
-    const wasConnected = prevConnectedRef.current;
-    prevConnectedRef.current = isConnected;
-
-    // 从未连接变为已连接时，重置自动启动标记并启动
-    if (isConnected && !wasConnected && !isStreaming) {
-      hasAutoStartedRef.current = true;
-      streamingRef.current = true;
-      setInstanceScreenshotStreaming(instanceId, true);
-      streamLoop();
-    }
-  }, [isConnected, isStreaming, instanceId, setInstanceScreenshotStreaming, streamLoop]);
+  useScreenshotStream(
+    instanceId,
+    isConnected && isStreaming,
+    getFrameInterval(screenshotFrameRate),
+    captureFrame,
+    setScreenshotUrl,
+  );
 
   // 全屏模式切换
   const toggleFullscreen = useCallback(
@@ -631,12 +537,10 @@ function InstanceCard({ instanceId, instanceName, isActive, onSelect }: Instance
       setInstanceConnectionStatus(instanceId, 'Disconnected');
       useAppStore.getState().setInstanceResourceLoaded(instanceId, false);
       setScreenshotUrl(null);
-      streamingRef.current = false;
-      setInstanceScreenshotStreaming(instanceId, false);
     } catch {
       // 静默处理
     }
-  }, [instanceId, setInstanceConnectionStatus, setInstanceScreenshotStreaming]);
+  }, [instanceId, setInstanceConnectionStatus]);
 
   // 强制刷新
   const forceRefresh = useCallback(async () => {
@@ -660,14 +564,7 @@ function InstanceCard({ instanceId, instanceName, isActive, onSelect }: Instance
           disabled: !isConnected,
           onClick: () => {
             if (!instanceId || !isConnected) return;
-            if (isStreaming) {
-              streamingRef.current = false;
-              setInstanceScreenshotStreaming(instanceId, false);
-            } else {
-              streamingRef.current = true;
-              setInstanceScreenshotStreaming(instanceId, true);
-              streamLoop();
-            }
+            setInstanceScreenshotStreaming(instanceId, !isStreaming);
           },
         },
         {
@@ -720,7 +617,6 @@ function InstanceCard({ instanceId, instanceName, isActive, onSelect }: Instance
       isStreaming,
       screenshotUrl,
       setInstanceScreenshotStreaming,
-      streamLoop,
       forceRefresh,
       saveScreenshot,
       copyScreenshot,
@@ -761,7 +657,7 @@ function InstanceCard({ instanceId, instanceName, isActive, onSelect }: Instance
         )}
 
         {/* 任务控制按钮 */}
-        {isConnected && (
+        {(isConnected || isRunning) && (
           <button
             onClick={handleStartStop}
             disabled={isStarting || isStopping || (!canRun && !isRunning)}
diff --git a/src/components/ScreenshotPanel.tsx b/src/components/ScreenshotPanel.tsx
index 7ac7cbbc..8407559f 100644
--- a/src/components/ScreenshotPanel.tsx
+++ b/src/components/ScreenshotPanel.tsx
@@ -20,15 +20,19 @@ import { ContextMenu, useContextMenu, type MenuItem } from './ContextMenu';
 import { getFrameInterval } from './FrameRateSelector';
 import { loggers } from '@/utils/logger';
 import { useIsMobile } from '@/hooks/useIsMobile';
+import { useScreenshotStream } from '@/hooks/useScreenshotStream';
 
 const log = loggers.ui;
 
 // 超时
 const withTimeout = <T,>(promise: Promise<T>, ms: number): Promise<T> => {
+  let timer: ReturnType<typeof setTimeout>;
   return Promise.race([
     promise,
-    new Promise<T>((_, reject) => setTimeout(() => reject(new Error('timeout')), ms)),
-  ]);
+    new Promise<T>((_, reject) => {
+      timer = setTimeout(() => reject(new Error('timeout')), ms);
+    }),
+  ]).finally(() => clearTimeout(timer));
 };
 
 const MAX_CONSECUTIVE_FAILURES = 20;
@@ -53,24 +57,18 @@ export function ScreenshotPanel() {
   const isPanelVisible = isMobile || sidePanelExpanded;
 
   const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [captureFailed, setCaptureFailed] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const { state: menuState, show: showMenu, hide: hideMenu } = useContextMenu();
   const fullscreenImgRef = useRef<HTMLImageElement>(null);
 
-  // 用于控制截图流的引用
-  const streamingRef = useRef(false);
-  const lastFrameTimeRef = useRef(0);
-  const frameIntervalRef = useRef(getFrameInterval(screenshotFrameRate));
-
-  // 帧率配置变化时更新帧间隔
-  useEffect(() => {
-    frameIntervalRef.current = getFrameInterval(screenshotFrameRate);
-  }, [screenshotFrameRate]);
-
+  const connectionVersion = useRef(0);
   const instanceId = activeInstanceId || '';
 
+  const connectionStatus = instanceConnectionStatus[instanceId];
+  const connected = connectionStatus === 'Connected';
+
   // 从 store 获取当前实例的截图流状态
   const isStreaming = instanceId ? (instanceScreenshotStreaming[instanceId] ?? false) : false;
 
@@ -86,16 +84,17 @@ export function ScreenshotPanel() {
 
   // 获取最新缓存截图（后端截图循环负责更新缓存，前端无需主动触发 postScreencap）
   const captureFrame = useCallback(async (): Promise<string | null> => {
-    if (!instanceId) return null;
-
+    if (!instanceId || !connected) return null;
+    const version = connectionVersion.current;
     try {
       const imageData = await withTimeout(maaService.getCachedImage(instanceId), API_TIMEOUT);
-      return imageData || null;
+      return version === connectionVersion.current ? imageData || null : null;
     } catch (err) {
+      if (version !== connectionVersion.current) return null;
       log.warn('获取截图失败:', err);
       throw err;
     }
-  }, [instanceId]);
+  }, [instanceId, connected]);
 
   // 全屏模式切换
   const toggleFullscreen = (e?: React.MouseEvent) => {
@@ -103,27 +102,6 @@ export function ScreenshotPanel() {
     setIsFullscreen(!isFullscreen);
   };
 
-  // 组件卸载时停止截图流
-  useEffect(() => {
-    return () => {
-      streamingRef.current = false;
-    };
-  }, []);
-
-  // 订阅/退订后端截图循环（确保全局只有一份 post_screencap 在运行）
-  useEffect(() => {
-    if (!instanceId || !isStreaming) return;
-
-    const intervalMs = getFrameInterval(screenshotFrameRate);
-    maaService
-      .screenshotSubscribe(instanceId, `panel-${instanceId}`, intervalMs)
-      .catch((e) => log.warn('截图订阅失败:', e));
-
-    return () => {
-      maaService.screenshotUnsubscribe(instanceId, `panel-${instanceId}`).catch(() => {});
-    };
-  }, [instanceId, isStreaming, screenshotFrameRate]);
-
   // ESC 键退出全屏
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -141,138 +119,60 @@ export function ScreenshotPanel() {
     };
   }, [isFullscreen]);
 
-  const loopRunningRef = useRef(false);
-
-  const streamLoop = useCallback(async () => {
-    if (loopRunningRef.current) return;
-    loopRunningRef.current = true;
-
-    const loopInstanceId = instanceId;
-    let nextFrameTime = Date.now();
-    let consecutiveFailures = 0;
-
-    try {
-      while (streamingRef.current) {
-        // 检查当前实例是否仍是活动实例，避免非活动 tab 刷新截图
-        const currentActiveId = useAppStore.getState().activeInstanceId;
-        if (loopInstanceId !== currentActiveId) {
-          break;
-        }
-
-        // 检查连接状态
-        const connStatus = useAppStore.getState().instanceConnectionStatus[loopInstanceId];
-        if (connStatus !== 'Connected') {
-          setError('连接已断开');
-          break;
-        }
-
-        // 等待下一帧时间
-        const now = Date.now();
-        const sleepTime = nextFrameTime - now;
-        if (sleepTime > 0) {
-          await new Promise((resolve) => setTimeout(resolve, sleepTime));
-        }
-
-        // 计算下一帧时间
-        const frameInterval = frameIntervalRef.current;
-        if (frameInterval > 0) {
-          nextFrameTime += frameInterval;
-          if (nextFrameTime < Date.now()) {
-            nextFrameTime = Date.now() + frameInterval;
-          }
-        } else {
-          nextFrameTime = Date.now();
-        }
-
-        lastFrameTimeRef.current = Date.now();
-
-        try {
-          // 后端截图循环已统一驱动 post_screencap，前端只需读取最新缓存
-          const imageData = await captureFrame();
-
-          // 再次检查是否仍是活动实例，避免更新非活动 tab 的截图
-          if (
-            imageData &&
-            streamingRef.current &&
-            loopInstanceId === useAppStore.getState().activeInstanceId
-          ) {
-            setScreenshotUrl(imageData);
-            setError(null);
-            consecutiveFailures = 0;
-          }
-        } catch (err) {
-          consecutiveFailures++;
-          log.warn(`截图失败 (${consecutiveFailures}/${MAX_CONSECUTIVE_FAILURES}):`, err);
+  const displayFrame = useCallback((frame: string) => {
+    setScreenshotUrl(frame);
+    setCaptureFailed(false);
+  }, []);
 
-          if (consecutiveFailures >= MAX_CONSECUTIVE_FAILURES) {
-            setError('截图连续失败，已停止');
-            break;
-          }
-        }
+  const handleFrameError = useCallback(
+    (error: unknown, failures: number) => {
+      log.warn(`截图失败 (${failures}/${MAX_CONSECUTIVE_FAILURES}):`, error);
+      if (failures >= MAX_CONSECUTIVE_FAILURES) {
+        setCaptureFailed(true);
+        setIsStreaming(false);
       }
+    },
+    [setIsStreaming],
+  );
 
-      // 循环结束
-      streamingRef.current = false;
-      setIsStreaming(false);
-    } finally {
-      loopRunningRef.current = false;
-    }
-  }, [instanceId, captureFrame, setIsStreaming]);
+  useScreenshotStream(
+    instanceId,
+    connected && isStreaming && screenshotPanelExpanded && isPanelVisible,
+    getFrameInterval(screenshotFrameRate),
+    captureFrame,
+    displayFrame,
+    handleFrameError,
+  );
 
-  // 开始/停止截图流
   const toggleStreaming = useCallback(
     (e?: React.MouseEvent) => {
       e?.stopPropagation();
-
-      if (!instanceId) return;
-
-      if (isStreaming) {
-        // 停止流
-        streamingRef.current = false;
-        setIsStreaming(false);
-      } else {
-        // 开始流时，如果面板是折叠状态则自动展开
-        if (!screenshotPanelExpanded) {
-          setScreenshotPanelExpanded(true);
-        }
-        streamingRef.current = true;
-        setIsStreaming(true);
-        setError(null);
-        streamLoop();
+      if (!instanceId || !connected) return;
+      if (!isStreaming) {
+        if (!screenshotPanelExpanded) setScreenshotPanelExpanded(true);
+        setCaptureFailed(false);
       }
+      setIsStreaming(!isStreaming);
     },
     [
       instanceId,
+      connected,
       isStreaming,
-      setIsStreaming,
-      streamLoop,
       screenshotPanelExpanded,
       setScreenshotPanelExpanded,
+      setIsStreaming,
     ],
   );
 
-  // 实例切换时重置截图和错误，但保留截图流状态
   useEffect(() => {
-    // 清除截图，等待新实例的截图
     setScreenshotUrl(null);
-    setError(null);
-
-    // 同步 streamingRef 与新实例的截图流状态
-    const newInstanceStreaming = instanceId
-      ? (instanceScreenshotStreaming[instanceId] ?? false)
-      : false;
-    streamingRef.current = newInstanceStreaming;
-
-    // 如果新实例的截图流是开启的，启动流循环
-    if (newInstanceStreaming && instanceId) {
-      streamLoop();
-    }
-  }, [instanceId]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // 连接成功后自动开始实时截图（仅当面板可见且未开启时）
-  const connectionStatus = instanceId ? instanceConnectionStatus[instanceId] : undefined;
-  const isResourceLoaded = instanceId ? instanceResourceLoaded[instanceId] : false;
+    setCaptureFailed(false);
+    return () => {
+      connectionVersion.current++;
+    };
+  }, [instanceId, connected]);
 
+  const isResourceLoaded = instanceResourceLoaded[instanceId];
   // 当设备已连接且资源已加载时自动折叠（与连接设置面板行为一致）
   useEffect(() => {
     if (connectionStatus === 'Connected' && isResourceLoaded) {
@@ -280,50 +180,18 @@ export function ScreenshotPanel() {
     }
   }, [connectionStatus, isResourceLoaded, setScreenshotPanelExpanded]);
 
-  // 面板折叠时暂停截图，展开时自动开始（如果已连接）
-  useEffect(() => {
-    if (!screenshotPanelExpanded || !isPanelVisible) {
-      // 折叠时暂停截图流，同步更新状态和图标
-      streamingRef.current = false;
-      setIsStreaming(false);
-    } else if (connectionStatus === 'Connected' && instanceId) {
-      // 展开且已连接时，自动开始截图
-      streamingRef.current = true;
-      setIsStreaming(true);
-      setError(null);
-      streamLoop();
-    }
-  }, [screenshotPanelExpanded, isPanelVisible]); // eslint-disable-line react-hooks/exhaustive-deps
-  const prevConnectionStatusRef = useRef<typeof connectionStatus>(undefined);
-  const hasAutoStartedRef = useRef(false);
-
-  // 组件挂载或状态恢复后，如果已连接且面板可见，自动启动截图流
+  // Opening the panel or reconnecting resumes it; switching tabs preserves
+  // an explicit pause on the destination instance.
+  const previousInstance = useRef(instanceId);
   useEffect(() => {
-    // 避免重复启动（仅在首次检测到已连接时启动）
-    if (hasAutoStartedRef.current) return;
-
-    const isConnected = connectionStatus === 'Connected';
-    if (isConnected && !isStreaming && screenshotPanelExpanded && isPanelVisible && instanceId) {
-      hasAutoStartedRef.current = true;
-      streamingRef.current = true;
-      setIsStreaming(true);
-      setError(null);
-      streamLoop();
-    }
-  }, [
-    connectionStatus,
-    instanceId,
-    screenshotPanelExpanded,
-    isPanelVisible,
-    isStreaming,
-    setIsStreaming,
-    streamLoop,
-  ]);
-
-  // 实例切换时重置自动启动标记
-  useEffect(() => {
-    hasAutoStartedRef.current = false;
-  }, [instanceId]);
+    const switched = previousInstance.current !== instanceId;
+    previousInstance.current = instanceId;
+    const saved = useAppStore.getState().instanceScreenshotStreaming[instanceId];
+    const resume =
+      connected && screenshotPanelExpanded && isPanelVisible && (!switched || saved !== false);
+    setIsStreaming(resume);
+    if (resume) setCaptureFailed(false);
+  }, [instanceId, connected, screenshotPanelExpanded, isPanelVisible, setIsStreaming]);
 
   // 保存截图
   const saveScreenshot = useCallback(async () => {
@@ -363,7 +231,7 @@ export function ScreenshotPanel() {
       const imageData = await captureFrame();
       if (imageData) {
         setScreenshotUrl(imageData);
-        setError(null);
+        setCaptureFailed(false);
       }
     } catch (err) {
       log.warn('强制刷新失败:', err);
@@ -379,7 +247,6 @@ export function ScreenshotPanel() {
       useAppStore.getState().setInstanceConnectionStatus(instanceId, 'Disconnected');
       useAppStore.getState().setInstanceResourceLoaded(instanceId, false);
       setScreenshotUrl(null);
-      streamingRef.current = false;
       setIsStreaming(false);
     } catch (err) {
       log.warn('断开连接失败:', err);
@@ -488,42 +355,6 @@ export function ScreenshotPanel() {
     ],
   );
 
-  useEffect(() => {
-    // 检测连接状态从非 Connected 变为 Connected
-    const wasConnected = prevConnectionStatusRef.current === 'Connected';
-    const isConnected = connectionStatus === 'Connected';
-    prevConnectionStatusRef.current = connectionStatus;
-
-    // 连接断开时清空截图（如切换控制器、断开连接等场景）
-    if (wasConnected && !isConnected) {
-      setScreenshotUrl(null);
-      streamingRef.current = false;
-      setIsStreaming(false);
-    }
-
-    if (
-      isConnected &&
-      !wasConnected &&
-      !isStreaming &&
-      screenshotPanelExpanded &&
-      isPanelVisible &&
-      instanceId
-    ) {
-      streamingRef.current = true;
-      setIsStreaming(true);
-      setError(null);
-      streamLoop();
-    }
-  }, [
-    connectionStatus,
-    instanceId,
-    screenshotPanelExpanded,
-    isPanelVisible,
-    isStreaming,
-    setIsStreaming,
-    streamLoop,
-  ]);
-
   return (
     <div className="bg-bg-secondary rounded-lg ring-1 ring-inset ring-border overflow-hidden">
       {/* 标题栏（可点击折叠） */}
@@ -556,10 +387,10 @@ export function ScreenshotPanel() {
               e.stopPropagation();
               toggleStreaming();
             }}
-            disabled={!instanceId}
+            disabled={!instanceId || !connected}
             className={clsx(
               'p-1 rounded-md transition-colors',
-              !instanceId
+              !instanceId || !connected
                 ? 'text-text-muted cursor-not-allowed'
                 : isStreaming
                   ? 'text-success hover:bg-bg-tertiary'
@@ -628,8 +459,8 @@ export function ScreenshotPanel() {
               ) : (
                 <div className="flex flex-col items-center gap-2 text-text-muted">
                   <Monitor className="w-10 h-10 opacity-30" />
-                  {error ? (
-                    <span className="text-xs text-error">{error}</span>
+                  {captureFailed ? (
+                    <span className="text-xs text-error">{t('screenshot.streamFailed')}</span>
                   ) : (
                     <>
                       <span className="text-xs">{t('screenshot.noScreenshot')}</span>
diff --git a/src/hooks/useScreenshotStream.ts b/src/hooks/useScreenshotStream.ts
new file mode 100644
index 00000000..9bcea232
--- /dev/null
+++ b/src/hooks/useScreenshotStream.ts
@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+import { maaService } from '@/services/maaService';
+import { generateId } from '@/stores/helpers';
+import { loggers } from '@/utils/logger';
+
+// The backend expires subscribers after 30s, even at a 30s frame interval.
+const RENEW_INTERVAL_MS = 10_000;
+
+export function useScreenshotStream(
+  instanceId: string,
+  enabled: boolean,
+  intervalMs: number,
+  captureFrame: () => Promise<string | null>,
+  onFrame: (frame: string) => void,
+  onError?: (error: unknown, consecutiveFailures: number) => void,
+) {
+  useEffect(() => {
+    if (!instanceId || !enabled) return;
+
+    // A late unsubscribe from a previous connection or another window must
+    // release only its own lease. Renewal reuses this ID.
+    const subscriberId = generateId();
+    let active = true;
+    let timer: ReturnType<typeof setTimeout>;
+    let pending: Promise<void>;
+    const subscribe = () => {
+      pending = maaService
+        .screenshotSubscribe(instanceId, subscriberId, intervalMs)
+        .catch((error) => loggers.ui.warn('截图订阅失败:', error));
+      void pending.then(() => {
+        if (active) timer = setTimeout(subscribe, RENEW_INTERVAL_MS);
+      });
+    };
+    subscribe();
+    return () => {
+      active = false;
+      clearTimeout(timer);
+      void pending
+        .then(() => maaService.screenshotUnsubscribe(instanceId, subscriberId))
+        .catch(() => {});
+    };
+  }, [instanceId, enabled, intervalMs]);
+
+  useEffect(() => {
+    if (!instanceId || !enabled) return;
+
+    let active = true;
+    let timer: ReturnType<typeof setTimeout>;
+    let failures = 0;
+    const readFrame = async () => {
+      const started = Date.now();
+      try {
+        const frame = await captureFrame();
+        if (active && frame) {
+          failures = 0;
+          onFrame(frame);
+        }
+      } catch (error) {
+        if (active) onError?.(error, ++failures);
+      }
+      if (active) timer = setTimeout(readFrame, Math.max(0, intervalMs - (Date.now() - started)));
+    };
+    void readFrame();
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [instanceId, enabled, intervalMs, captureFrame, onFrame, onError]);
+}
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index fc7419ed..74402ba3 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -494,6 +494,7 @@ export default {
 
   // Screenshot preview
   screenshot: {
+    streamFailed: 'Live screenshots stopped after repeated capture failures.',
     title: 'Live Screenshot',
     autoRefresh: 'Auto Refresh',
     noScreenshot: 'No screenshot',
diff --git a/src/i18n/locales/ja-JP.ts b/src/i18n/locales/ja-JP.ts
index 2b4bda01..86b12421 100644
--- a/src/i18n/locales/ja-JP.ts
+++ b/src/i18n/locales/ja-JP.ts
@@ -488,6 +488,7 @@ export default {
 
   // スクリーンショットプレビュー
   screenshot: {
+    streamFailed: 'スクリーンショットの取得に繰り返し失敗したため、ライブ表示を停止しました。',
     title: 'リアルタイムスクリーンショット',
     autoRefresh: '自動更新',
     noScreenshot: 'スクリーンショットがありません',
diff --git a/src/i18n/locales/ko-KR.ts b/src/i18n/locales/ko-KR.ts
index 5c8f1872..644c50ab 100644
--- a/src/i18n/locales/ko-KR.ts
+++ b/src/i18n/locales/ko-KR.ts
@@ -478,6 +478,7 @@ export default {
 
   // 스크린샷 미리보기
   screenshot: {
+    streamFailed: '스크린샷을 연속으로 가져오지 못해 실시간 표시를 중지했습니다.',
     title: '실시간 스크린샷',
     autoRefresh: '자동 새로고침',
     noScreenshot: '스크린샷이 없습니다',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 87d21c24..6ebdd7d3 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -468,6 +468,7 @@ export default {
 
   // 截图预览
   screenshot: {
+    streamFailed: '截图连续失败，已停止',
     title: '实时截图',
     autoRefresh: '自动刷新',
     noScreenshot: '暂无截图',
diff --git a/src/i18n/locales/zh-TW.ts b/src/i18n/locales/zh-TW.ts
index 6b8b99da..9ddb45ec 100644
--- a/src/i18n/locales/zh-TW.ts
+++ b/src/i18n/locales/zh-TW.ts
@@ -464,6 +464,7 @@ export default {
 
   // 截圖預覽
   screenshot: {
+    streamFailed: '截圖連續失敗，已停止',
     title: '即時截圖',
     autoRefresh: '自動重新整理',
     noScreenshot: '暫無截圖',
diff --git a/tests/screenshots/README.md b/tests/screenshots/README.md
new file mode 100644
index 00000000..9796f064
--- /dev/null
+++ b/tests/screenshots/README.md
@@ -0,0 +1,45 @@
+# Screenshot lifecycle regression
+
+Run `pnpm test:screenshots` after `pnpm install --frozen-lockfile`. This builds the
+real React components, store and screenshot hook with the existing Vite dependency,
+then runs them in a headless Chromium browser. Chrome, Edge and common Chromium
+locations are detected; set `MXU_TEST_BROWSER` to an executable path otherwise.
+The runner uses its own temporary browser profile and never opens a user profile.
+
+The fixture replaces Maa calls and blocks network requests. Browser virtual time
+covers the 30-second subscription expiry without a long wall-clock wait. It checks
+lease renewal, independent subscribers, late subscription acknowledgements,
+disconnect/reconnect, stale frames, tab switches, folding, pause and consecutive
+capture failures. These tests do not verify native screenshot contents or real
+device connectivity. They are separate from `pnpm test`, which needs no browser.
+
+Backend lifecycle tests run without a MaaFramework DLL or a connected device:
+
+```sh
+cargo test --locked --manifest-path src-tauri/Cargo.toml --lib screenshot_service::tests
+```
+
+They cover missing instances, waiting for controllers without restarting the
+capture loop, lease expiry, and retiring streams when an instance ID is reused.
+
+On Windows, Tauri's library test executable may exit before running tests with
+`STATUS_ENTRYPOINT_NOT_FOUND` (`0xc0000139`) because it lacks the desktop app's
+Common Controls v6 manifest. From a Developer PowerShell with the Windows SDK's
+`mt.exe` on `PATH`, embed the supplied manifest in a private copy of the test
+executable (the Cargo artifact is left intact):
+
+```powershell
+$artifacts = cargo test --locked --manifest-path src-tauri/Cargo.toml --lib --no-run --message-format=json | ConvertFrom-Json
+if ($LASTEXITCODE) { throw 'Cargo build failed' }
+$binary = $artifacts | Where-Object { $_.executable -and $_.target.name -eq 'mxu_lib' } | Select-Object -Last 1
+$testCopy = Join-Path ([System.IO.Path]::GetTempPath()) "mxu-screenshot-$([guid]::NewGuid()).exe"
+try {
+    Copy-Item -LiteralPath $binary.executable -Destination $testCopy
+    mt.exe -nologo -manifest tests/screenshots/test.manifest "-outputresource:$testCopy;#1"
+    if ($LASTEXITCODE) { throw 'Manifest embedding failed' }
+    & $testCopy screenshot_service::tests --nocapture
+    if ($LASTEXITCODE) { throw 'Screenshot backend tests failed' }
+} finally {
+    Remove-Item -LiteralPath $testCopy -ErrorAction SilentlyContinue
+}
+```
diff --git a/tests/screenshots/browser.jsx b/tests/screenshots/browser.jsx
new file mode 100644
index 00000000..4e9d5395
--- /dev/null
+++ b/tests/screenshots/browser.jsx
@@ -0,0 +1,292 @@
+import React from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { DashboardView } from '@/components/DashboardView';
+import { ScreenshotPanel } from '@/components/ScreenshotPanel';
+import { useAppStore } from '@/stores/appStore';
+import { maaService } from '@/services/maaService';
+import i18n from '@/i18n';
+
+const id = 'dashboard-fixture';
+const root = createRoot(document.getElementById('root'));
+const render = (element) => flushSync(() => root.render(element));
+const results = [];
+const check = (name, actual) => results.push({ name, passed: Boolean(actual) });
+const settle = (ms = 40) => new Promise((resolve) => setTimeout(resolve, ms));
+async function waitFor(predicate) {
+  for (let i = 0; i < 50 && !predicate(); i++) await settle(20);
+}
+const button = (key) =>
+  [...document.querySelectorAll('button')].find((el) => el.title === i18n.t(key));
+const screenshot = () => document.querySelector('img[alt="Screenshot"]')?.getAttribute('src');
+const pixel = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+function deferred() {
+  let resolve;
+  const promise = new Promise((done) => {
+    resolve = done;
+  });
+  return { resolve, promise };
+}
+
+async function probe() {
+  // The fixture blocks all network access, even if a new code path misses a mock.
+  window.fetch = async () => {
+    throw Error('Unexpected network access in screenshot fixture');
+  };
+  let oldFrame = deferred();
+  let lateSubscribe = deferred();
+  const leases = new Map();
+  let delaySubscription = false;
+  let subscriptions = 0,
+    removals = 0,
+    reads = 0;
+  let holdFrame = false,
+    currentFrame = pixel,
+    failReads = 0;
+  Object.assign(maaService, {
+    screenshotSubscribe: async (_instance, subscriber) => {
+      subscriptions++;
+      if (delaySubscription) {
+        delaySubscription = false;
+        await lateSubscribe.promise;
+      }
+      leases.set(subscriber, Date.now());
+    },
+    screenshotUnsubscribe: async (_instance, subscriber) => {
+      removals++;
+      leases.delete(subscriber);
+    },
+    getCachedImage: async () => {
+      reads++;
+      if (failReads > 0) {
+        failReads--;
+        throw Error('fixture read failure');
+      }
+      return holdFrame ? oldFrame.promise : currentFrame;
+    },
+    isRunning: async () => false,
+    onCallback: async () => () => {},
+  });
+  useAppStore.setState({
+    activeInstanceId: id,
+    projectInterface: {
+      name: 'Fixture',
+      controller: [{ name: 'adb', type: 'Adb' }],
+      resource: [{ name: 'r' }],
+      task: [{ name: 'task', entry: 'entry' }],
+    },
+    instances: [
+      {
+        id,
+        name: 'Fixture',
+        isRunning: true,
+        selectedTasks: [{ id: 'task-1', enabled: true, taskName: 'task', optionValues: {} }],
+      },
+    ],
+    instanceConnectionStatus: { [id]: 'Connected' },
+    instanceResourceLoaded: { [id]: true },
+    instanceTaskStatus: { [id]: 'Running' },
+    screenshotFrameRate: '5',
+  });
+  render(<DashboardView />);
+  await waitFor(() => button('taskList.stopTasks') && screenshot() === pixel);
+  check(
+    'connected card shows Stop and a live frame',
+    button('taskList.stopTasks') && screenshot() === pixel,
+  );
+  // Hold a frame in flight from this connection until its replacement has painted.
+  holdFrame = true;
+  const previousReads = reads;
+  for (let i = 0; i < 12 && reads === previousReads; i++) await settle();
+  check('old capture is in flight before disconnect', reads > previousReads);
+  const removedBeforeDisconnect = removals;
+  const subscribedBeforeDisconnect = subscriptions;
+  useAppStore.getState().setInstanceConnectionStatus(id, 'Disconnected');
+  await settle();
+  check('disconnected active run still has a Stop control', button('taskList.stopTasks'));
+  check(
+    'disconnect releases subscription and clears frame',
+    removals === removedBeforeDisconnect + 1 && !screenshot(),
+  );
+  useAppStore.getState().updateInstance(id, { isRunning: false });
+  await settle();
+  check('disconnected idle card cannot start tasks', !button('taskList.startTasks'));
+  useAppStore.getState().setInstanceResourceLoaded(id, false);
+  holdFrame = false;
+  currentFrame = pixel + '#new';
+  useAppStore.getState().setInstanceConnectionStatus(id, 'Connected');
+  await settle();
+  check('connection waits for resource before enabling Start', !button('taskList.startTasks'));
+  check(
+    'new connection subscribes and paints independently',
+    subscriptions === subscribedBeforeDisconnect + 1 && screenshot() === currentFrame,
+  );
+  const staleDashboardFrame = oldFrame;
+  oldFrame = deferred();
+  holdFrame = true;
+  staleDashboardFrame.resolve(pixel + '#stale');
+  await settle();
+  check('old frame cannot replace the new connection frame', screenshot() === currentFrame);
+  holdFrame = false;
+  oldFrame.resolve(currentFrame);
+  useAppStore.getState().setInstanceResourceLoaded(id, true);
+  await settle();
+  check(
+    'resource restoration enables Start',
+    button('taskList.startTasks') && !button('taskList.startTasks').disabled,
+  );
+
+  // Chromium advances virtual time. Backend TTL is 30s, including at the slowest frame rate.
+  useAppStore.setState({ screenshotFrameRate: '0.033' });
+  await settle();
+  const leaseIsLive = () => leases.size === 1 && Date.now() - [...leases.values()][0] < 30_000;
+  await settle(35_000);
+  check('30s frame rate Dashboard keeps its lease beyond backend TTL', leaseIsLive());
+
+  // Two independently mounted cards for the same instance must own distinct subscriptions.
+  render(
+    <>
+      <DashboardView key="one" />
+      <DashboardView key="two" />
+    </>,
+  );
+  await settle();
+  check('simultaneous Dashboard views hold independent subscriptions', leases.size === 2);
+  render(
+    <>
+      <DashboardView key="one" />
+    </>,
+  );
+  await settle();
+  check('closing one view leaves the other subscribed', leaseIsLive());
+
+  delaySubscription = true;
+  useAppStore.setState({ screenshotFrameRate: '5' });
+  await settle();
+  useAppStore.setState({ screenshotFrameRate: '0.033' });
+  await settle();
+  lateSubscribe.resolve();
+  await settle();
+  check('late subscribe acknowledgement cannot leak or remove the newer lease', leaseIsLive());
+
+  lateSubscribe = deferred();
+  delaySubscription = true;
+  useAppStore.setState({ screenshotFrameRate: '5' });
+  await settle();
+  render(null);
+  await settle();
+  lateSubscribe.resolve();
+  await settle();
+  const unmountedCount = subscriptions;
+  await settle(12_000);
+  check(
+    'unmounted Dashboard releases a late acknowledgement and does not renew',
+    leases.size === 0 && subscriptions === unmountedCount,
+  );
+  // The panel below represents a fresh backend session.
+  leases.clear();
+  useAppStore.setState({
+    instanceResourceLoaded: { [id]: false },
+    sidePanelExpanded: true,
+    screenshotPanelExpanded: true,
+    screenshotFrameRate: '0.033',
+  });
+  render(<ScreenshotPanel />);
+  await settle();
+  await settle(35_000);
+  check('expanded screenshot panel renews beyond backend TTL', leaseIsLive());
+  oldFrame = deferred();
+  holdFrame = true;
+  // The next capture is due in 25s at the slowest rate.
+  await settle(26_000);
+  useAppStore.getState().setInstanceConnectionStatus(id, 'Disconnected');
+  await settle();
+  holdFrame = false;
+  currentFrame = pixel + '#panel-reconnected';
+  useAppStore.getState().setInstanceConnectionStatus(id, 'Connected');
+  await settle();
+  check(
+    'reconnected screenshot panel paints before the old capture returns',
+    screenshot() === currentFrame,
+  );
+  const stalePanelFrame = oldFrame;
+  oldFrame = deferred();
+  holdFrame = true;
+  stalePanelFrame.resolve(pixel + '#stale-panel');
+  await settle();
+  check('old capture cannot change a reconnected screenshot panel', screenshot() === currentFrame);
+  holdFrame = false;
+  oldFrame.resolve(currentFrame);
+  // A tab switch must transfer the frame loop without waiting for the old 30s timer.
+  const other = 'dashboard-fixture-other';
+  currentFrame = pixel + '#panel-other';
+  useAppStore.setState({
+    activeInstanceId: other,
+    instanceConnectionStatus: { [id]: 'Connected', [other]: 'Connected' },
+    instanceScreenshotStreaming: { [id]: true, [other]: true },
+  });
+  await settle();
+  check(
+    'switching instances starts the selected screenshot panel immediately',
+    screenshot() === currentFrame,
+  );
+  useAppStore.getState().setScreenshotPanelExpanded(false);
+  await settle();
+  const foldedCount = subscriptions;
+  const foldedReads = reads;
+  await settle(31_000);
+  check(
+    'folded screenshot panel releases its lease and stops renewing',
+    leases.size === 0 && subscriptions === foldedCount,
+  );
+  check('folding prevents an old timer from reading another screenshot', reads === foldedReads);
+  useAppStore.setState({
+    screenshotFrameRate: '5',
+    screenshotPanelExpanded: true,
+  });
+  await settle();
+  button('screenshot.stopStream')?.click();
+  await settle();
+  const pausedReads = reads;
+  await settle(11_000);
+  check(
+    'manual panel pause keeps the screenshot and suspends reads and subscription',
+    leases.size === 0 &&
+      reads === pausedReads &&
+      screenshot() === currentFrame &&
+      button('screenshot.startStream'),
+  );
+  failReads = 19;
+  button('screenshot.startStream')?.click();
+  await settle(4100);
+  check(
+    'a successful panel capture after 19 failures keeps streaming',
+    failReads === 0 && button('screenshot.stopStream'),
+  );
+  failReads = 20;
+  await settle(4200);
+  check(
+    '20 consecutive panel failures stop capture and release the lease',
+    failReads === 0 && button('screenshot.startStream') && leases.size === 0,
+  );
+  // A pause belongs to its instance; another tab's active stream must survive.
+  useAppStore.setState({ activeInstanceId: id });
+  await settle();
+  check('returning to a streaming tab resumes immediately', leaseIsLive());
+  useAppStore.setState({ activeInstanceId: other });
+  await settle();
+  check(
+    'switching to a paused tab preserves its pause',
+    leases.size === 0 && button('screenshot.startStream'),
+  );
+  useAppStore.setState({ activeInstanceId: id });
+  await settle();
+  check("a paused tab does not clear another tab's streaming state", leaseIsLive());
+}
+
+probe()
+  .catch((error) => results.push({ name: String(error.stack || error), passed: false }))
+  .finally(() => {
+    root.unmount();
+    document.getElementById('result').textContent = btoa(JSON.stringify(results));
+  });
diff --git a/tests/screenshots/run.mjs b/tests/screenshots/run.mjs
new file mode 100644
index 00000000..8c2ed7c3
--- /dev/null
+++ b/tests/screenshots/run.mjs
@@ -0,0 +1,94 @@
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { existsSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { basename, dirname, join } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { build } from 'vite';
+
+const repo = fileURLToPath(new URL('../../', import.meta.url));
+const browser =
+  process.env.MXU_TEST_BROWSER ||
+  [
+    'C:/Program Files/Google/Chrome/Application/chrome.exe',
+    'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe',
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+    '/usr/bin/chromium',
+    '/usr/bin/chromium-browser',
+    '/usr/bin/google-chrome',
+  ].find(existsSync);
+assert.ok(browser, 'Set MXU_TEST_BROWSER to a Chromium browser executable');
+
+const scratch = mkdtempSync(join(tmpdir(), 'mxu-screenshot-test-'));
+try {
+  await build({
+    configFile: false,
+    root: repo,
+    publicDir: false,
+    logLevel: 'error',
+    resolve: { alias: { '@': join(repo, 'src') } },
+    esbuild: { jsx: 'automatic' },
+    define: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      __MXU_VERSION__: JSON.stringify('test'),
+    },
+    build: {
+      outDir: scratch,
+      emptyOutDir: false,
+      minify: false,
+      lib: {
+        entry: fileURLToPath(new URL('./browser.jsx', import.meta.url)),
+        name: 'ScreenshotTests',
+        formats: ['iife'],
+        fileName: () => 'test.js',
+      },
+    },
+  });
+  const html = join(scratch, 'test.html');
+  writeFileSync(
+    html,
+    `<!doctype html>
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; img-src data:; style-src 'unsafe-inline'">
+<div id="root"></div><pre id="result"></pre><script src="./test.js"></script>`,
+  );
+  const result = spawnSync(
+    browser,
+    [
+      '--headless',
+      '--disable-gpu',
+      '--disable-background-networking',
+      '--disable-component-update',
+      '--disable-extensions',
+      '--disable-sync',
+      '--no-first-run',
+      '--no-default-browser-check',
+      `--user-data-dir=${join(scratch, 'profile')}`,
+      '--dump-dom',
+      '--virtual-time-budget=190000',
+      pathToFileURL(html).href,
+    ],
+    {
+      windowsHide: true,
+      encoding: 'utf8',
+      timeout: 30000,
+      maxBuffer: 2 * 1024 * 1024,
+    },
+  );
+  if (result.error) throw result.error;
+  assert.equal(result.status, 0, `Browser failed: ${result.stderr.slice(-2000)}`);
+  const encoded = /<pre id="result">([a-zA-Z0-9+/=]+)<\/pre>/.exec(result.stdout)?.[1];
+  assert.ok(encoded, `Screenshot tests did not finish: ${result.stderr.slice(-2000)}`);
+  const results = JSON.parse(Buffer.from(encoded, 'base64').toString('utf8'));
+  assert.ok(results.length, 'No screenshot tests ran');
+  for (const result of results) console.log(`${result.passed ? 'PASS' : 'FAIL'} ${result.name}`);
+  assert.ok(
+    results.every((result) => result.passed),
+    'Screenshot regression failed',
+  );
+} finally {
+  // Only this run's private browser profile and generated bundle are removed.
+  assert.equal(dirname(scratch), tmpdir());
+  assert.ok(basename(scratch).startsWith('mxu-screenshot-test-'));
+  rmSync(scratch, { recursive: true, force: true, maxRetries: 4, retryDelay: 250 });
+}
diff --git a/tests/screenshots/test.manifest b/tests/screenshots/test.manifest
new file mode 100644
index 00000000..d3517547
--- /dev/null
+++ b/tests/screenshots/test.manifest
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
+  <dependency>
+    <dependentAssembly>
+      <assemblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" language="*" />
+    </dependentAssembly>
+  </dependency>
+</assembly>