@spzxg/cli-ui 0.6.2 → 0.6.6

package/src/board/BrowserPane.tsx

@@ -9,14 +9,21 @@
 //   · 按住拖动带着按键（选中文字、拖滑块）；滚轮合并发送；
 //   · 网页的 alert / confirm / prompt 画面里看不到，这里单独弹出来处理。
 // Operator 的「在节点屏幕上显示」「弹出窗口」「登录状态」是节点本机的功能，这里不提供。
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, type MutableRefObject } from "react";
-import { CenterError, isMissingRoute, type BoardBackend } from "../core/client.js";
-import { jitter } from "../core/store.js";
-import type { BrowserFramesState, BrowserMessage, BrowserStatus } from "../core/types.js";
-import { Icon } from "../ui/icons.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, type MutableRefObject, type ReactNode } from "react";
+import { CenterError, isMissingRoute, type BoardBackend } from "../core/client";
+import { jitter } from "../core/store";
+import type { BrowserFramesState, BrowserMessage, BrowserStatus } from "../core/types";
+import { Icon } from "../ui/icons";
 
 interface FrameMeta { deviceWidth: number; deviceHeight: number }
 type Dialog = Extract<BrowserMessage, { type: "dialog" }>;
+type Tabs = Extract<BrowserMessage, { type: "tabs" }>;
+type Target = { targetId: string; targetEpoch: number };
+function messageTarget(message: BrowserMessage): Target | null {
+  return typeof message.targetId === "string" && message.targetId.length > 0 && Number.isSafeInteger(message.targetEpoch) && message.targetEpoch! >= 0
+    ? { targetId: message.targetId, targetEpoch: message.targetEpoch! } : null;
+}
+const sameTarget = (a: Target | null, b: Target | null) => !!a && !!b && a.targetId === b.targetId && a.targetEpoch === b.targetEpoch;
 
 const CAPABILITY_LABEL: Record<string, string> = { config: "任务配置", manual: "手动打开过", ai: "AI 自行启用" };
 const SPECIAL_KEYS: Record<string, number> = {
@@ -90,6 +97,7 @@ interface BrowserFeed {
   /** 发输入用的 viewer id；ready = 输入能送到节点。 */
   viewer: string | null;
   ready: boolean;
+  generation: number;
   frames: BrowserFramesState;
   paused: boolean;
   reconnect: () => void;
@@ -97,7 +105,7 @@ interface BrowserFeed {
    * 最近的页面、弹窗、画面：中枢在连上时就推过来，那时画面区（要等状态是「已打开」才挂上）可能还没挂好，
    * 挂上时从这里补上——否则地址栏一直是空的，要等下一次换页。
    */
-  latest: MutableRefObject<{ page?: BrowserMessage; dialog?: BrowserMessage | null; frame?: BrowserMessage }>;
+  latest: MutableRefObject<{ generation: number; protocol: boolean; tabs?: Tabs; page?: BrowserMessage; dialog?: BrowserMessage | null; frame?: BrowserMessage }>;
 }
 
 /**
@@ -112,15 +120,44 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
   const [ended, setEnded] = useState<string | null>(null);
   const [viewer, setViewer] = useState<string | null>(null);
   const [ready, setReady] = useState(false);
+  const [generation, setGeneration] = useState(0);
   const [frames, setFrames] = useState<BrowserFramesState>({ state: "idle" });
   const [retry, setRetry] = useState(0);
   const reconnect = useCallback(() => { setEnded(null); setRetry((n) => n + 1); }, []);
-  const latest = useRef<BrowserFeed["latest"]["current"]>({});
+  const latest = useRef<BrowserFeed["latest"]["current"]>({ generation: 0, protocol: false });
+  const beginViewer = useCallback(() => {
+    const previous = latest.current;
+    // Epochs belong to one stream. A recovered viewer may start at epoch 1 again.
+    // Legacy servers retain their dialog while reconnecting, as before.
+    const next = previous.generation + 1;
+    latest.current = previous.protocol ? { generation: next, protocol: true } : { ...previous, generation: next };
+    setGeneration(next);
+  }, []);
   const deliver = useCallback((m: BrowserMessage) => {
-    if (m.type === "page") latest.current.page = m;
-    else if (m.type === "dialog") latest.current.dialog = m;
-    else if (m.type === "dialog_closed") latest.current.dialog = null;
-    else if (m.type === "frame") latest.current.frame = m;
+    const cache = latest.current;
+    const target = messageTarget(m);
+    const current = cache.page ? messageTarget(cache.page) : null;
+    if (target) cache.protocol = true;
+    if (m.type === "tabs") {
+      cache.protocol = true; cache.tabs = m;
+      if (m.activeId === null) { delete cache.page; delete cache.frame; cache.dialog = null; }
+    }
+    if (m.type === "page") {
+      if (cache.protocol && !target) return;
+      if (target) {
+        cache.protocol = true;
+        if (current && (target.targetEpoch < current.targetEpoch || (target.targetEpoch === current.targetEpoch && target.targetId !== current.targetId))) return;
+        if (!sameTarget(current, target)) { delete cache.frame; cache.dialog = null; }
+      }
+      cache.page = m;
+    }
+    // A frame can arrive late or precede its page announcement. Neither is safe
+    // to display or use for coordinate input in the current page.
+    else if (cache.protocol && m.type !== "tabs" && m.type !== "error" && (!target || !sameTarget(current, target))) return;
+    else if (target && current && !sameTarget(current, target)) return;
+    if (m.type === "dialog") cache.dialog = m;
+    else if (m.type === "dialog_closed") cache.dialog = null;
+    else if (m.type === "frame") cache.frame = m;
     sink.current?.(m);
   }, [sink]);
 
@@ -133,32 +170,45 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
     let timer: ReturnType<typeof setTimeout> | undefined;
     let attempt = 0;
     const connect = () => {
-      let final = false;
-      stop = backend.browserLive!(jobId, {
-        onViewer: (id, isReady) => { attempt = 0; setViewer(id); setReady(isReady); },
-        onStatus: (s) => { attempt = 0; setStreamError(null); setStatus(s); },
-        onMessage: deliver,
-        onFrames: setFrames,
+      if (!alive) return;
+      let finished = false;
+      let seenViewer = false;
+      let stopThis: (() => void) | null = null;
+      const retire = () => {
+        if (!alive || finished) return false;
+        finished = true;
+        stopThis?.();
+        setViewer(null); setReady(false);
+        return true;
+      };
+      stopThis = backend.browserLive!(jobId, {
+        onViewer: (id, isReady) => { if (!alive || finished) return; if (!seenViewer) { seenViewer = true; beginViewer(); } attempt = 0; setViewer(id); setReady(isReady); },
+        onStatus: (s) => { if (!alive || finished) return; attempt = 0; setStreamError(null); setStatus(s); },
+        onMessage: (message) => { if (alive && !finished) deliver(message); },
+        onFrames: (state) => { if (alive && !finished) setFrames(state); },
         onEnd: (end) => {
-          if (end.reason === "refused") { final = true; setEnded(end.detail || "执行节点拒绝了浏览器连接"); }
+          if (end.reason !== "refused" && end.reason !== "client_closed") return;
+          if (!retire()) return;
+          setFrames({ state: "idle" });
+          if (end.reason === "refused") setEnded(end.detail || "执行节点拒绝了浏览器连接");
         },
         onClose: (err) => {
-          setViewer(null);
-          setReady(false);
-          if (!alive || final) return;
+          if (!retire()) return;
           if (isMissingRoute(err)) { setMode("legacy"); return; }
           // 对话不存在：重连也没用。
-          if (err && err.status === 404) { setEnded(err.message); return; }
+          if (err && [400,404,405,410,501].includes(err.status)) { setEnded(err.message); return; }
           if (err) setStreamError(err.message);
           // 409 还没派发：隔几秒再问；401 / 403 多半是宿主会话过期，30 秒后再试（续上会话就自己恢复）；
           // 其余（断线、中枢重启、人太多）按退避重连。
           timer = setTimeout(connect, nextTry(err, attempt++));
         },
       });
+      stop = stopThis;
+      if (finished) stopThis();
     };
     connect();
     return () => { alive = false; stop?.(); if (timer) clearTimeout(timer); };
-  }, [backend, jobId, mode, visible, retry, deliver]);
+  }, [backend, jobId, mode, visible, retry, deliver, beginViewer]);
 
   // ── 旧版：状态一条（页面在后台时也断开，切回来再连：人多时少占中枢和节点的连接） ──
   useEffect(() => {
@@ -168,15 +218,23 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
     let timer: ReturnType<typeof setTimeout> | undefined;
     let attempt = 0;
     const connect = () => {
-      stop = backend.browserEvents(jobId, {
-        onStatus: (s) => { attempt = 0; setStreamError(null); setStatus(s); },
+      if (!alive) return;
+      let finished = false;
+      let stopThis: (() => void) | null = null;
+      stopThis = backend.browserEvents(jobId, {
+        onStatus: (s) => { if (!alive || finished) return; attempt = 0; setStreamError(null); setStatus(s); },
+        onError: (error) => { if (alive && !finished) setStreamError(error.message); },
         onClose: (err) => {
-          if (!alive) return;
-          if (err && err.status === 404) { setEnded(err.message); return; }
+          if (!alive || finished) return;
+          finished = true;
+          stopThis?.();
+          if (err && [400,404,405,410,501].includes(err.status)) { setEnded(err.message); return; }
           if (err) setStreamError(err.message);
           timer = setTimeout(connect, nextTry(err, attempt++));
         },
       });
+      stop = stopThis;
+      if (finished) stopThis();
     };
     connect();
     return () => { alive = false; stop?.(); if (timer) clearTimeout(timer); };
@@ -190,34 +248,51 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
     let stop: (() => void) | null = null;
     let timer: ReturnType<typeof setTimeout> | undefined;
     let attempt = 0;
-    const again = (detail?: string) => {
-      setViewer(null);
-      setReady(false);
-      if (!alive) return;
-      setFrames({ state: "retrying", ...(detail ? { detail } : {}) });
-      timer = setTimeout(connect, retryDelay(attempt++));
-    };
     const connect = () => {
+      if (!alive) return;
+      let finished = false;
+      let seenViewer = false;
+      let stopThis: (() => void) | null = null;
+      const again = (detail?: string) => {
+        // A stream can emit an end event and then close; retire it only once.
+        if (!alive || finished) return;
+        finished = true;
+        stopThis?.();
+        setViewer(null);
+        setReady(false);
+        setFrames({ state: "retrying", ...(detail ? { detail } : {}) });
+        timer = setTimeout(connect, retryDelay(attempt++));
+      };
       setFrames({ state: attempt ? "retrying" : "connecting" });
-      stop = backend.browserFrames(jobId, {
-        onViewer: (id) => { attempt = 0; setViewer(id); setReady(true); setFrames({ state: "live" }); },
-        onMessage: deliver,
-        onEnd: (end) => { if (end.reason !== "client_closed") again(end.reason === "refused" ? end.detail : undefined); },
-        onClose: (err) => { if (err) again(err.message); },
+      stopThis = backend.browserFrames(jobId, {
+        onViewer: (id) => { if (!alive || finished) return; if (!seenViewer) { seenViewer = true; beginViewer(); } attempt = 0; setViewer(id); setReady(true); setFrames({ state: "live" }); },
+        onMessage: (message) => { if (alive && !finished) deliver(message); },
+        onEnd: (end) => {
+          if (end.reason !== "client_closed") { again(end.reason === "refused" ? end.detail : undefined); return; }
+          if (!alive || finished) return;
+          finished = true;
+          stopThis?.();
+          setViewer(null); setReady(false); setFrames({ state: "idle" });
+        },
+        // Clean EOF also invalidates the old viewer and needs a reconnect.
+        onClose: (err) => again(err?.message),
       });
+      stop = stopThis;
+      // Custom transports may close synchronously before returning cleanup.
+      if (finished) stopThis();
     };
     connect();
     return () => { alive = false; stop?.(); if (timer) clearTimeout(timer); };
-  }, [backend, jobId, legacyRunning, retry, deliver]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [backend, jobId, legacyRunning, retry, deliver, beginViewer]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 浏览器关了：上一个页面的地址、弹窗、画面都作废，重新打开时不先闪一下旧画面。
   const running = status?.state === "running";
-  useEffect(() => { if (!running) latest.current = {}; }, [running]);
+  useEffect(() => { if (status && !running) latest.current = { generation: latest.current.generation, protocol: false }; }, [running, status]);
 
-  return { status, setStatus, streamError, ended, viewer, ready, frames, paused: !visible, reconnect, latest };
+  return { status, setStatus, streamError, ended, viewer, ready, generation, frames, paused: !visible, reconnect, latest };
 }
 
-interface ScreenHandle { draw(base64: string, meta: FrameMeta | null): void }
+interface ScreenHandle { draw(base64: string, meta: FrameMeta | null): void; clear(): void }
 
 /** base64 → 字节。 */
 function decodeBase64(data: string): Uint8Array {
@@ -234,27 +309,38 @@ function decodeBase64(data: string): Uint8Array {
  *   · 输入用指针事件：鼠标照原样；触屏点一下 = 点击，拖动 = 滚动；接管时滚轮 / 触摸只作用于画面，不滚动宿主页面。
  *   · 画面按比例缩放，适应容器宽高（窄的侧栏、弹窗、整页都可以）。
  */
-const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label: string; send: (msg: Record<string, unknown>) => void; onFocusKeys: () => void }>(
-  function Screen({ human, hidden, label, send, onFocusKeys }, ref) {
+const Screen = forwardRef<ScreenHandle, { human: boolean; inputEpoch: number; hidden: boolean; label: string; send: (msg: Record<string, unknown>) => void; onFocusKeys: () => void }>(
+  function Screen({ human, inputEpoch, hidden, label, send, onFocusKeys }, ref) {
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
     const imgRef = useRef<HTMLImageElement | null>(null);
     const meta = useRef<FrameMeta | null>(null);
     const seq = useRef({ next: 0, drawn: 0 });
+    const imageGeneration = useRef(0);
     const [fallback] = useState(() => typeof createImageBitmap !== "function");
-    const [fallbackSrc, setFallbackSrc] = useState<string | null>(null);
+    const [fallbackFrame, setFallbackFrame] = useState<{src:string;meta:FrameMeta|null} | null>(null);
 
     useImperativeHandle(ref, () => ({
+      clear() {
+        imageGeneration.current++;
+        seq.current = { next: 0, drawn: 0 };
+        meta.current = null;
+        setFallbackFrame(null);
+        const canvas = canvasRef.current;
+        // Resetting dimensions also clears its pixels without requiring a 2d context.
+        if (canvas) canvas.width = canvas.width;
+      },
       draw(data, frameMeta) {
-        meta.current = frameMeta;
         const type = data.startsWith("iVBOR") ? "image/png" : "image/jpeg";
-        if (fallback) { setFallbackSrc(`data:${type};base64,${data}`); return; }
+        if (fallback) { setFallbackFrame({src:`data:${type};base64,${data}`,meta:frameMeta}); return; }
         const n = ++seq.current.next;
+        const generation = imageGeneration.current;
         let bytes: Uint8Array;
         try { bytes = decodeBase64(data); } catch { return; }
         createImageBitmap(new Blob([bytes as BlobPart], { type })).then((bitmap) => {
           const canvas = canvasRef.current;
-          if (!canvas || n < seq.current.drawn) { bitmap.close(); return; }
+          if (!canvas || generation !== imageGeneration.current || n < seq.current.drawn) { bitmap.close(); return; }
           seq.current.drawn = n;
+          meta.current = frameMeta;
           if (canvas.width !== bitmap.width || canvas.height !== bitmap.height) { canvas.width = bitmap.width; canvas.height = bitmap.height; }
           canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
           bitmap.close();
@@ -262,11 +348,18 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
       },
     }), [fallback]);
 
+    // Identical image bytes may accompany updated CSS viewport metadata and
+    // need not trigger another load event in the fallback image element.
+    useEffect(()=>{const img=imgRef.current;if(fallbackFrame&&img?.complete&&img.naturalWidth>0)meta.current=fallbackFrame.meta;},[fallbackFrame]);
+
     const el = () => (fallback ? imgRef.current : canvasRef.current);
     /** 屏幕坐标 → 页面 CSS 像素（按帧自带的页面尺寸换算）。 */
     const point = useCallback((clientX: number, clientY: number) => {
       const node = el();
       if (!node) return null;
+      // Network arrival is not an interactive image: never map a click onto
+      // the blank initial canvas or an image that has not decoded yet.
+      if (fallback ? !(node instanceof HTMLImageElement && node.complete && node.naturalWidth > 0) : seq.current.drawn === 0) return null;
       const r = node.getBoundingClientRect();
       if (!r.width || !r.height) return null;
       const natural = node instanceof HTMLCanvasElement ? { w: node.width, h: node.height } : { w: node.naturalWidth, h: node.naturalHeight };
@@ -290,13 +383,13 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
     };
 
     const onPointerDown = (e: React.PointerEvent) => {
-      if (!human) return;
+      if (!human || !point(e.clientX,e.clientY)) return;
       e.preventDefault();
-      onFocusKeys();
       if (e.pointerType === "touch") {
         touch.current = { id: e.pointerId, x: e.clientX, y: e.clientY, lastX: e.clientX, lastY: e.clientY, moved: false };
         return;
       }
+      onFocusKeys();
       (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
       pressed.current = MOUSE_BUTTONS[e.button] ?? "left";
       mouse("mousePressed", e, { button: pressed.current, clickCount: e.detail || 1 });
@@ -326,29 +419,35 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
       const t = touch.current;
       if (e.pointerType === "touch" && t && t.id === e.pointerId) {
         touch.current = null;
-        if (!t.moved) {
+        if (!t.moved && point(e.clientX, e.clientY)) {
+          // Send before focusing: the mobile keyboard can resize/reposition the frame.
           // 触屏点一下 = 鼠标点击
           mouse("mousePressed", e, { button: "left", clickCount: 1 });
           mouse("mouseReleased", e, { button: "left", clickCount: 1 });
+          onFocusKeys();
         }
         return;
       }
+      if (e.pointerType === "touch" || !pressed.current) return;
       pressed.current = null;
       mouse("mouseReleased", e, { button: MOUSE_BUTTONS[e.button] ?? "left", clickCount: e.detail || 1 });
     };
 
-    // 按住鼠标时切走窗口 / 标签页：松手事件收不到，远端会一直「按着」（一直在拖、选中）。补发一次松开。
-    useEffect(() => {
-      const release = () => {
+    // A new control/viewer epoch cannot inherit a drag from the previous one.
+    useEffect(()=>{touch.current=null;pressed.current=null;lastPoint.current=null;},[human,inputEpoch]);
+    const release = useCallback(() => {
+        touch.current=null;
         if (!pressed.current || !lastPoint.current) return;
         const p = point(lastPoint.current.clientX, lastPoint.current.clientY);
-        if (p) send({ type: "mouse", event: "mouseReleased", ...p, button: pressed.current, clickCount: 1, modifiers: 0 });
+        if (p && humanRef.current) send({ type: "mouse", event: "mouseReleased", ...p, button: pressed.current, clickCount: 1, modifiers: 0 });
         pressed.current = null;
-      };
+    },[point,send]);
+    // Cancellation/window blur must release the remote pointer as well.
+    useEffect(() => {
       window.addEventListener("blur", release);
       document.addEventListener("visibilitychange", release);
       return () => { window.removeEventListener("blur", release); document.removeEventListener("visibilitychange", release); };
-    }, [point, send]);
+    }, [release]);
 
     // 滚轮：React 的 onWheel 是被动监听，拦不住宿主页面滚动，所以用原生监听（passive: false）。
     useEffect(() => {
@@ -369,13 +468,13 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
       className: `bp-frame ${human ? "live" : ""}`,
       style: { display: hidden ? "none" : undefined, touchAction: human ? "none" : "auto" } as React.CSSProperties,
       onPointerDown, onPointerMove, onPointerUp,
-      onPointerCancel: () => { touch.current = null; pressed.current = null; },
+      onPointerCancel: release,
       onContextMenu: (e: React.MouseEvent) => { if (human) e.preventDefault(); },
       role: "img" as const,
       "aria-label": label,
     };
     return fallback
-      ? (fallbackSrc ? <img ref={imgRef} src={fallbackSrc} alt={label} draggable={false} {...common} /> : null)
+      ? (fallbackFrame ? <img ref={imgRef} src={fallbackFrame.src} onLoad={()=>{meta.current=fallbackFrame.meta;}} alt={label} draggable={false} {...common} /> : null)
       : <canvas ref={canvasRef} {...common} />;
   },
 );
@@ -388,14 +487,23 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
   const screenRef = useRef<ScreenHandle | null>(null);
   const keysRef = useRef<HTMLTextAreaElement | null>(null);
   const [hasFrame, setHasFrame] = useState(false);
+  const [tabs, setTabs] = useState<Tabs | null>(null);
+  const [switching, setSwitching] = useState<string | null>(null);
+  const targetRef = useRef<Target | null>(null);
+  const frameReady = useRef(false);
+  const pendingTarget = useRef<string | null>(null);
+  const pageGeneration = useRef(feed.latest.current.generation);
   const [page, setPage] = useState<{ url: string; title: string }>({ url: "", title: "" });
   const [addr, setAddr] = useState("");
   const [editing, setEditing] = useState(false);
   const [notice, setNotice] = useState<string | null>(null);
   const [dialog, setDialog] = useState<Dialog | null>(null);
   const [promptText, setPromptText] = useState("");
+  const [dialogSending, setDialogSending] = useState(false);
+  const pendingDialog = useRef<Record<string, unknown> | null>(null);
   // 在网页里复制出来的文字：除了写进剪贴板，还可以「引用到对话」。
-  const [copied, setCopied] = useState<string | null>(null);
+  const [copied, setCopied] = useState<{text:string;page:{url:string;title:string}} | null>(null);
+  const clipboardSequence=useRef(0);
   // 画面没有响应：接管时发了操作，之后 UNRESPONSIVE_MS 一帧都没来。
   const [stuck, setStuck] = useState(false);
   const lastInputAt = useRef(0);
@@ -408,32 +516,6 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
   }, []);
   useEffect(() => () => { if (noticeTimer.current) clearTimeout(noticeTimer.current); }, []);
 
-  // 连接上来的消息：画面直接画，其余更新界面。挂上时先补上挂上之前到的页面 / 弹窗 / 最后一帧。
-  const latest = feed.latest;
-  useEffect(() => {
-    const handle = (m: BrowserMessage) => {
-      if (m.type === "frame" && m.data) {
-        screenRef.current?.draw(m.data, m.metadata ?? null);
-        lastFrameAt.current = Date.now();
-        setStuck(false);
-        setHasFrame(true);
-      } else if (m.type === "page") setPage({ url: m.url ?? "", title: m.title ?? "" });
-      else if (m.type === "error" && m.message) flash(m.message);
-      else if (m.type === "dialog") { setDialog(m); setPromptText(m.defaultPrompt ?? ""); }
-      else if (m.type === "dialog_closed") setDialog(null);
-      else if (m.type === "clipboard") {
-        setCopied(m.text);
-        void writeClipboard(m.text).then((ok) => flash(ok ? "已复制到你的剪贴板" : "没能写入剪贴板（浏览器不允许），可以在网页里选中后再试", 6000));
-      }
-    };
-    const { page: lastPage, dialog: lastDialog, frame: lastFrame } = latest.current;
-    if (lastPage) handle(lastPage);
-    if (lastDialog) handle(lastDialog);
-    if (lastFrame) handle(lastFrame);
-    sink.current = handle;
-    return () => { sink.current = null; };
-  }, [sink, flash, latest]);
-
   useEffect(() => { if (!editing) setAddr(page.url); }, [page.url, editing]);
   const onPageRef = useRef(onPage);
   onPageRef.current = onPage;
@@ -451,16 +533,35 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
 
   // 输入按顺序发：一个请求在路上时攒着，回来后一次发完（鼠标移动只留最后一个，连续的滚轮合并）。
   const viewerRef = useRef<string | null>(null);
-  viewerRef.current = feed.ready ? feed.viewer : null;
   const queue = useRef<Array<Record<string, unknown>>>([]);
-  const inflight = useRef(false);
+  const controlRef = useRef(human); controlRef.current=human;
+  const mountedRef = useRef(true);
+  useEffect(()=>{mountedRef.current=true;return()=>{mountedRef.current=false;queue.current=[];};},[]);
+  useEffect(() => { if (!feed.ready || !human) { pendingDialog.current = null; setDialogSending(false); } }, [feed.ready, feed.viewer, human]);
+  const inflight = useRef<{ viewer:string; epoch:number } | null>(null);
+  const inputEpoch = useRef(0);
+  const previousControl = useRef(human);
+  const nextViewer=feed.ready?feed.viewer:null;
+  if(viewerRef.current!==nextViewer||previousControl.current!==human){
+    inputEpoch.current++;queue.current=[];inflight.current=null;
+  }
+  previousControl.current=human;
+  viewerRef.current=nextViewer;
   const reconnect = feed.reconnect;
   const flush = useCallback(() => {
     const viewer = viewerRef.current;
-    if (inflight.current || !viewer || !queue.current.length) return;
+    if (!mountedRef.current || !controlRef.current || inflight.current || !viewer || !queue.current.length) return;
     const batch = queue.current.splice(0, 50);
-    inflight.current = true;
+    const token={viewer,epoch:inputEpoch.current};
+    inflight.current = token;
     backend.browserInput(jobId, viewer, batch).catch((error: unknown) => {
+      if(!mountedRef.current||inflight.current!==token||viewerRef.current!==viewer||!controlRef.current)return;
+      if (pendingDialog.current && batch.includes(pendingDialog.current)) { pendingDialog.current = null; setDialogSending(false); }
+      if (batch.some((message) => message.type === "select_tab")) {
+        flash("页面切换未确认，正在重新连接…", 5000);
+        reconnect();
+        return;
+      }
       // 画面连接已失效（中枢重启、连接断开）：丢掉这批输入并重连，避免用户以为点了没反应。
       if (error instanceof CenterError && (error.status === 404 || error.status === 409)) {
         queue.current = [];
@@ -474,13 +575,19 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
         const why = error instanceof CenterError && error.status === 429 ? "操作太快，任务中心暂时没接收" : "网络不稳";
         flash(`${why}：刚才的操作可能没有送达，请看画面确认后再操作`, 5000);
       }
-    }).finally(() => { inflight.current = false; flush(); });
+    }).finally(() => { if(inflight.current!==token)return;inflight.current = null; flush(); });
   }, [backend, jobId, reconnect, flash]);
   const send = useCallback((msg: Record<string, unknown>) => {
+    if(!mountedRef.current||!controlRef.current)return false;
     // 画面连接还没就绪（刚接管、正在重连）：不攒着等连上再补发——过几秒才落下的点击比没点更糟。
     if (!viewerRef.current) {
       if (msg.type !== "mouse" || msg.event === "mousePressed") flash("画面连接还没就绪，刚才的操作没有送达，请稍后再操作");
-      return;
+      return false;
+    }
+    if (feed.latest.current.protocol) {
+      if (!targetRef.current || (!frameReady.current && msg.type !== "dialog") || pendingTarget.current || pageGeneration.current !== feed.latest.current.generation) return false;
+      // Preserve command identity (dialog acknowledgement tracks the queued object).
+      Object.assign(msg, targetRef.current);
     }
     lastInputAt.current = Date.now();
     const q = queue.current;
@@ -496,7 +603,102 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
         : msg;
     } else q.push(msg);
     flush();
-  }, [flush, flash]);
+    return true;
+  }, [flush, flash, feed.latest]);
+
+  const clearPage = useCallback(() => {
+    inputEpoch.current++;
+    queue.current = [];
+    inflight.current = null;
+    frameReady.current = false;
+    screenRef.current?.clear();
+    setHasFrame(false);
+    setPage({ url: "", title: "" });
+    setAddr(""); setEditing(false);
+    if (keysRef.current) keysRef.current.value = "";
+    pendingDialog.current = null; setDialogSending(false); setDialog(null); setPromptText("");
+    clipboardSequence.current++; setCopied(null); setNotice(null);
+    lastInputAt.current = 0; lastFrameAt.current = 0; setStuck(false);
+  }, []);
+  const selectTab = (id: string) => {
+    const current = targetRef.current;
+    if (!human || !feed.ready || !viewerRef.current || tabs?.canSelect !== true || !current || pendingTarget.current || id === current.targetId || pageGeneration.current !== feed.latest.current.generation) return;
+    if (!tabs.tabs.some((tab) => tab.id === id)) return;
+    clearPage();
+    pendingTarget.current = id; setSwitching(id);
+    queue.current.push({ type: "select_tab", targetId: id, expectedTargetId: current.targetId, expectedTargetEpoch: current.targetEpoch });
+    lastInputAt.current = Date.now();
+    flush();
+  };
+
+  useEffect(() => {
+    if (pageGeneration.current === feed.generation || !feed.latest.current.protocol) return;
+    pageGeneration.current = feed.generation;
+    targetRef.current = null; pendingTarget.current = null; setSwitching(null); setTabs(null);
+    clearPage();
+  }, [feed.generation, feed.latest, clearPage]);
+  useEffect(() => {
+    if (!switching) return;
+    const timer = setTimeout(() => {
+      if (!pendingTarget.current) return;
+      flash("切换页面尚未确认，正在重新连接…", 5000);
+      reconnect();
+    }, UNRESPONSIVE_MS);
+    return () => clearTimeout(timer);
+  }, [switching, flash, reconnect]);
+
+  // 连接上来的消息：画面直接画，其余更新界面。挂上时先补上挂上之前到的页面 / 弹窗 / 最后一帧。
+  const latest = feed.latest;
+  useEffect(() => {
+    const handle = (m: BrowserMessage) => {
+      if (pageGeneration.current !== latest.current.generation) {
+        pageGeneration.current = latest.current.generation;
+        if (latest.current.protocol) {
+          targetRef.current = null; pendingTarget.current = null; setSwitching(null); setTabs(null);
+          clearPage();
+        }
+      }
+      const target = messageTarget(m);
+      // Until the page announcement confirms a switch, events from the previous
+      // page may still be in transit (notably clipboard results and JS dialogs).
+      if (pendingTarget.current && m.type !== "page" && m.type !== "tabs" && m.type !== "error") return;
+      if (m.type === "tabs") {
+        setTabs(m);
+        if (m.activeId === null) { clearPage(); targetRef.current = null; pendingTarget.current = null; setSwitching(null); }
+      } else if (m.type === "page") {
+        // The old page may still announce its title while a switch is in flight.
+        if (pendingTarget.current && sameTarget(targetRef.current, target)) return;
+        if (target && !sameTarget(targetRef.current, target)) {
+          clearPage(); targetRef.current = target;
+          pendingTarget.current = null; setSwitching(null);
+        }
+        setPage({ url: m.url ?? "", title: m.title ?? "" });
+      }
+      if (m.type === "frame" && m.data) {
+        if (latest.current.protocol && (pendingTarget.current || !sameTarget(targetRef.current, target))) return;
+        screenRef.current?.draw(m.data, m.metadata ?? null);
+        frameReady.current = true;
+        lastFrameAt.current = Date.now();
+        setStuck(false);
+        setHasFrame(true);
+      } else if (m.type === "error" && m.message) { if(pendingDialog.current){pendingDialog.current=null;setDialogSending(false);} if (pendingTarget.current) reconnect(); flash(m.message); }
+      else if (m.type === "dialog") { pendingDialog.current = null; setDialogSending(false); setDialog(m); setPromptText(m.defaultPrompt ?? ""); }
+      else if (m.type === "dialog_closed") { pendingDialog.current = null; setDialogSending(false); setDialog(null); }
+      else if (m.type === "clipboard") {
+        const source=latest.current.page;
+        const sequence=++clipboardSequence.current;
+        setCopied({text:m.text,page:{url:source?.type==='page'?source.url??'':'',title:source?.type==='page'?source.title??'':''}});
+        void writeClipboard(m.text).then((ok) => {if(sequence===clipboardSequence.current)flash(ok ? "已复制到你的剪贴板" : "没能写入剪贴板（浏览器不允许），可以在网页里选中后再试", 6000);});
+      }
+    };
+    const { tabs: lastTabs, page: lastPage, dialog: lastDialog, frame: lastFrame } = latest.current;
+    if (lastTabs) handle(lastTabs);
+    if (lastPage) handle(lastPage);
+    if (lastDialog) handle(lastDialog);
+    if (lastFrame) handle(lastFrame);
+    sink.current = handle;
+    return () => { sink.current = null; clipboardSequence.current++; };
+  }, [sink, flash, latest, clearPage, reconnect]);
 
   // 键盘：
   //   · 普通字符（不带 Ctrl / ⌘）作为真正的按键发出（带 text）——网页的 keydown、快捷键、输入即搜索都能收到；
@@ -525,30 +727,43 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
   };
   const nav = (msg: Record<string, unknown>) => { if (human) send(msg); };
   const answer = (accept: boolean) => {
-    if (!dialog) return;
-    send({ type: "dialog", accept, ...(dialog.dialogType === "prompt" && accept ? { promptText } : {}) });
-    setDialog(null);
+    if (!dialog || !human || !feed.ready || pendingDialog.current) return;
+    const command = { type: "dialog", accept, ...(dialog.dialogType === "prompt" && accept ? { promptText } : {}) };
+    if (send(command)) { pendingDialog.current = command; setDialogSending(true); }
+    // Keep the dialog until the remote browser confirms dialog_closed. Failed
+    // or disconnected input must remain visible and available to retry.
   };
 
   const { frames, paused } = feed;
   const retrying = frames.state === "retrying";
+  const interactive = human && (!latest.current.protocol || (feed.ready && !!targetRef.current && hasFrame && !switching && pageGeneration.current === latest.current.generation));
+  const activeTab = switching ?? targetRef.current?.targetId ?? tabs?.activeId;
+  const listedTabs = tabs?.tabs.filter((tab, index, all) => typeof tab.id === "string" && !!tab.id && all.findIndex((candidate) => candidate.id === tab.id) === index) ?? [];
   return (
     <div className="bp-viewer">
+      {listedTabs.length > 0 && <nav className="bp-tabs" aria-label="任务浏览器页面">
+        {listedTabs.map((tab) => <button key={tab.id} className={`bp-tab${activeTab === tab.id ? " active" : ""}`} aria-pressed={activeTab === tab.id}
+          title={`${tab.title || "未命名页面"}${tab.url ? `\n${tab.url}` : ""}${!human ? "\n接管浏览器后可切换" : ""}`}
+          disabled={!human || !feed.ready || tabs?.canSelect !== true || !!switching || !targetRef.current}
+          onClick={() => selectTab(tab.id)}>
+          <span>{tab.title || tab.url || "未命名页面"}</span>{switching === tab.id && <span className="bp-tab-wait" aria-label="正在切换">…</span>}
+        </button>)}
+      </nav>}
       <div className="prev-chrome bp-chrome">
-        <button className="bp-nav" disabled={!human} onClick={() => nav({ type: "back" })} title="后退">‹</button>
-        <button className="bp-nav" disabled={!human} onClick={() => nav({ type: "forward" })} title="前进">›</button>
-        <button className="bp-nav" disabled={!human} onClick={() => nav({ type: "reload" })} title="刷新">↻</button>
+        <button className="bp-nav" disabled={!interactive} onClick={() => nav({ type: "back" })} title="后退">‹</button>
+        <button className="bp-nav" disabled={!interactive} onClick={() => nav({ type: "forward" })} title="前进">›</button>
+        <button className="bp-nav" disabled={!interactive} onClick={() => nav({ type: "reload" })} title="刷新">↻</button>
         <form className="bp-addr-form" onSubmit={(e) => { e.preventDefault(); const url = normalizeUrl(addr); if (url) nav({ type: "navigate", url }); setEditing(false); (e.currentTarget.querySelector("input") as HTMLInputElement | null)?.blur(); }}>
-          <input className="prev-addr bp-addr" value={addr} readOnly={!human} title={page.title || page.url}
+          <input className="prev-addr bp-addr" value={addr} readOnly={!interactive} title={page.title || page.url}
             onFocus={() => setEditing(true)} onBlur={() => setEditing(false)} onChange={(e) => setAddr(e.target.value)} />
         </form>
       </div>
-      <div className={`bp-screen ${human ? "live" : ""}`}>
+      <div className={`bp-screen ${interactive ? "live" : ""}`}>
         {/* 画面一直挂着（收到第一帧前隐藏），解码在内存里做，不受宿主页面 CSP 的 img-src 限制。 */}
-        <Screen ref={screenRef} human={human} hidden={!hasFrame} label={page.title || "浏览器画面"} send={send} onFocusKeys={() => keysRef.current?.focus({ preventScroll: true })} />
+        <Screen ref={screenRef} human={interactive} inputEpoch={inputEpoch.current} hidden={!hasFrame} label={page.title || "浏览器画面"} send={send} onFocusKeys={() => keysRef.current?.focus({ preventScroll: true })} />
         {!hasFrame && (
           <div className="bp-empty">
-            {paused ? "页面不可见，已暂停画面" : retrying ? `画面连接中断，正在重连…${frames.detail ? `（${frames.detail}）` : ""}` : "正在连接画面…"}
+            {switching ? "正在切换页面…" : paused ? "页面不可见，已暂停画面" : retrying ? `画面连接中断，正在重连…${frames.detail ? `（${frames.detail}）` : ""}` : "正在连接画面…"}
             {retrying && <><br /><button className="btn btn-line btn-sm" style={{ marginTop: 8 }} onClick={reconnect}>立即重试</button></>}
           </div>
         )}
@@ -557,19 +772,21 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
             <div className="bp-dialog-box">
               <div className="bp-dialog-t">网页{dialog.dialogType === "confirm" ? "请求确认" : dialog.dialogType === "prompt" ? "请求输入" : dialog.dialogType === "beforeunload" ? "询问是否离开" : "提示"}</div>
               <div className="bp-dialog-m">{dialog.message || "（没有内容）"}</div>
-              {dialog.dialogType === "prompt" && <input className="bp-dialog-in" value={promptText} disabled={!human} onChange={(e) => setPromptText(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") answer(true); }} />}
+              {dialog.dialogType === "prompt" && <input className="bp-dialog-in" value={promptText} disabled={!human || !feed.ready || dialogSending} onChange={(e) => setPromptText(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") answer(true); }} />}
               {!human && <div className="bp-dialog-hint">接管浏览器后才能处理这个弹窗。</div>}
+              {human && !feed.ready && <div className="bp-dialog-hint">画面连接恢复后可继续处理这个弹窗。</div>}
+              {dialogSending && <div className="bp-dialog-hint" role="status">正在等待网页确认…</div>}
               <div className="bp-dialog-a">
-                {dialog.dialogType !== "alert" && <button className="btn btn-line btn-sm" disabled={!human} onClick={() => answer(false)}>取消</button>}
-                <button className="btn btn-accent btn-sm" disabled={!human} onClick={() => answer(true)}>确定</button>
+                {dialog.dialogType !== "alert" && <button className="btn btn-line btn-sm" disabled={!human || !feed.ready || dialogSending} onClick={() => answer(false)}>取消</button>}
+                <button className="btn btn-accent btn-sm" disabled={!human || !feed.ready || dialogSending} onClick={() => answer(true)}>确定</button>
               </div>
             </div>
           </div>
         )}
         {notice && (
           <div className="bp-toast">{notice}
-            {copied && onQuoteText && /剪贴板/.test(notice) && (
-              <button className="bp-toast-btn" onClick={() => { onQuoteText(copied, page); setCopied(null); setNotice(null); }}>引用到对话</button>
+            {copied?.text && onQuoteText && /剪贴板/.test(notice) && (
+              <button className="bp-toast-btn" onClick={() => { onQuoteText(copied.text, copied.page); setCopied(null); setNotice(null); }}>引用到对话</button>
             )}
           </div>
         )}
@@ -584,7 +801,7 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
         ref={keysRef}
         className="bp-keys"
         aria-label="向浏览器输入"
-        disabled={!human}
+        disabled={!interactive}
         onKeyDown={onKeyDown}
         onInput={(e) => { if (!(e.nativeEvent as InputEvent).isComposing) flushText(e.currentTarget); }}
         onCompositionEnd={(e) => flushText(e.currentTarget)}
@@ -593,15 +810,27 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
   );
 }
 
-export function BrowserPane({ backend, jobId, readOnly, onQuote, onQuoteText, onPage }: {
+type BrowserPaneProps = {
   backend: BoardBackend; jobId: string; readOnly?: boolean;
+  extension?: (status: BrowserStatus, update: (status:BrowserStatus)=>void) => ReactNode;
+  footer?: ReactNode;
+  className?: string;
   /** 给了就显示「引用到对话」：把浏览器当前页面（标题 + 地址）带进下一条消息。 */
   onQuote?: (page: { url: string; title: string }) => void;
   /** 给了就能把在网页里复制（⌘C / Ctrl+C）出来的文字引用到对话。 */
   onQuoteText?: (text: string, page: { url: string; title: string }) => void;
   /** 当前页面变了（null = 浏览器没开 / 不在看）。 */
   onPage?: (page: { url: string; title: string } | null) => void;
-}) {
+};
+const browserBackendIds = new WeakMap<BoardBackend,number>();
+let nextBrowserBackendId=1;
+/** The low-level public component is safe to reuse across task/backend identity changes too. */
+export function BrowserPane(props:BrowserPaneProps) {
+  let identity=browserBackendIds.get(props.backend);
+  if(identity===undefined){identity=nextBrowserBackendId++;browserBackendIds.set(props.backend,identity);}
+  return <BrowserPaneInner key={`${identity}:${props.jobId}`} {...props}/>;
+}
+function BrowserPaneInner({ backend, jobId, readOnly, onQuote, onQuoteText, onPage, extension, footer, className }:BrowserPaneProps) {
   const sink = useRef<((m: BrowserMessage) => void) | null>(null);
   const feed = useBrowserFeed(backend, jobId, sink);
   const { status, setStatus, streamError, ended } = feed;
@@ -649,7 +878,7 @@ export function BrowserPane({ backend, jobId, readOnly, onQuote, onQuoteText, on
   return (
     <>
     {big && zoomable && <div className="cli-ui bp-backdrop" onClick={() => setBig(false)} />}
-    <div className={`rail-pad bp ${big && zoomable ? "bp-big" : ""}`}>
+    <div className={`rail-pad bp ${big && zoomable ? "bp-big" : ""} ${className??""}`}>
       <div className="bp-head">
         <span className="rail-eyebrow">浏览器 · ego lite</span>
         <span className={`bp-badge ${running ? (human ? "human" : "ai") : ""}`}>
@@ -674,7 +903,7 @@ export function BrowserPane({ backend, jobId, readOnly, onQuote, onQuoteText, on
 
       {running ? (
         <>
-          <Viewer backend={backend} jobId={jobId} human={human && !readOnly} feed={feed} sink={sink} onPage={onPage} onQuoteText={onQuoteText} />
+          <Viewer backend={backend} jobId={jobId} human={human && !readOnly} feed={feed} sink={sink} onPage={onPage} onQuoteText={onQuoteText?(text,page)=>{setBig(false);onQuoteText(text,page);}:undefined} />
           {!readOnly && (
             <div className="prev-actions bp-actions">
               {human
@@ -684,7 +913,7 @@ export function BrowserPane({ backend, jobId, readOnly, onQuote, onQuoteText, on
               {onQuote && (
                 <button className="btn btn-ghost btn-sm" title="把当前页面的标题和地址带进下一条消息（在网页里复制文字后，也可以把复制的文字引用过去）"
                   disabled={!feed.latest.current.page}
-                  onClick={() => { const p = feed.latest.current.page; if (p?.type === "page" && p.url) onQuote({ url: p.url, title: p.title ?? "" }); }}>
+                  onClick={() => { const p = feed.latest.current.page; if (p?.type === "page" && p.url) { setBig(false); onQuote({ url: p.url, title: p.title ?? "" }); } }}>
                   {Icon.board()} 引用到对话
                 </button>
               )}
@@ -710,6 +939,8 @@ export function BrowserPane({ backend, jobId, readOnly, onQuote, onQuoteText, on
           </div>
         </div>
       )}
+      {extension?.(status,setStatus)}
+      {footer}
       {shownError && <div className="bp-error">{shownError}</div>}
       {shownError && ended && <button className="btn btn-line btn-sm" onClick={feed.reconnect}>重试</button>}
     </div>