@spzxg/cli-ui 0.6.1 → 0.6.5

package/dist/cli-ui.js

@@ -1,4 +1,4 @@
-import { C as a, b as i, d as r, e as t, f as o, h as C, i as l, j as n, k as m, m as d, l as u, n as w, o as B, p as f } from "./cli-ui-embed-Dk2QGHxn.js";
+import { C as a, b as i, d as r, e as t, f as o, h as C, i as l, j as n, k as m, m as d, l as u, n as w, o as B, p as f } from "./cli-ui-embed-BmLN2Jjg.js";
 export {
   a as CliBoard,
   i as CliBrowserView,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@spzxg/cli-ui",
-  "version": "0.6.1",
+  "version": "0.6.5",
   "type": "module",
-  "description": "任务中心（cli-task-center）对话任务的前端积木：cli-msglist 消息对话列表、cli-chat 对话，数据全部来自 center 服务。",
+  "description": "相互联动的 CliMsgList、CliChat、CliBoard，支持任务中枢和完整 Operator 工作区。",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "exports": {
@@ -10,7 +10,9 @@
     "./elements": "./src/elements.tsx",
     "./styles.css": "./src/styles.css",
     "./embed": "./src/embed.ts",
-    "./dist/*": "./dist/*"
+    "./dist/*": "./dist/*",
+    "./operator": "./src/operator/index.ts",
+    "./operator.css": "./src/operator.base.css"
   },
   "files": [
     "dist",
@@ -18,7 +20,8 @@
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
     "!src/test-setup.ts",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json --noEmit",
@@ -27,15 +30,15 @@
     "demo": "node demo/mock-center.mjs & vite --config demo/vite.config.ts",
     "css:sync": "node scripts/scope-css.mjs",
     "build:embed": "vite build --config vite.embed.config.ts",
-    "prepublishOnly": "npm run lint && npm test && npm run build:embed"
+    "prepublishOnly": "npm run css:sync && npm run lint && npm test && npm run build:embed"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^25.0.1",
     "postcss": "^8.5.32",
@@ -48,6 +51,9 @@
     "mammoth": "^1.13.0",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "@xterm/xterm": "^6.0.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0"
   }
 }

package/src/board/BrowserPane.tsx

@@ -9,11 +9,11 @@
 //   · 按住拖动带着按键（选中文字、拖滑块）；滚轮合并发送；
 //   · 网页的 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" }>;
@@ -133,28 +133,40 @@ 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 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; 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); };
@@ -168,15 +180,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,21 +210,37 @@ 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 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; 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); };
@@ -212,7 +248,7 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
 
   // 浏览器关了：上一个页面的地址、弹窗、画面都作废，重新打开时不先闪一下旧画面。
   const running = status?.state === "running";
-  useEffect(() => { if (!running) latest.current = {}; }, [running]);
+  useEffect(() => { if (status && !running) latest.current = {}; }, [running, status]);
 
   return { status, setStatus, streamError, ended, viewer, ready, frames, paused: !visible, reconnect, latest };
 }
@@ -234,20 +270,19 @@ 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 [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, () => ({
       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;
         let bytes: Uint8Array;
         try { bytes = decodeBase64(data); } catch { return; }
@@ -255,6 +290,7 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
           const canvas = canvasRef.current;
           if (!canvas || 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 +298,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,7 +333,7 @@ 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") {
@@ -333,22 +376,26 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
         }
         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 +416,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} />;
   },
 );
@@ -394,8 +441,11 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
   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);
@@ -418,12 +468,14 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
         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 === "error" && m.message) { if(pendingDialog.current){pendingDialog.current=null;setDialogSending(false);} 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") {
-        setCopied(m.text);
-        void writeClipboard(m.text).then((ok) => flash(ok ? "已复制到你的剪贴板" : "没能写入剪贴板（浏览器不允许），可以在网页里选中后再试", 6000));
+        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 { page: lastPage, dialog: lastDialog, frame: lastFrame } = latest.current;
@@ -431,7 +483,7 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
     if (lastDialog) handle(lastDialog);
     if (lastFrame) handle(lastFrame);
     sink.current = handle;
-    return () => { sink.current = null; };
+    return () => { sink.current = null; clipboardSequence.current++; };
   }, [sink, flash, latest]);
 
   useEffect(() => { if (!editing) setAddr(page.url); }, [page.url, editing]);
@@ -451,16 +503,30 @@ 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 (error instanceof CenterError && (error.status === 404 || error.status === 409)) {
         queue.current = [];
@@ -474,13 +540,14 @@ 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;
     }
     lastInputAt.current = Date.now();
     const q = queue.current;
@@ -496,6 +563,7 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
         : msg;
     } else q.push(msg);
     flush();
+    return true;
   }, [flush, flash]);
 
   // 键盘：
@@ -525,9 +593,11 @@ 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;
@@ -545,7 +615,7 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
       </div>
       <div className={`bp-screen ${human ? "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={human} 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}）` : ""}` : "正在连接画面…"}
@@ -557,19 +627,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>
         )}
@@ -593,15 +665,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 +733,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 +758,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 +768,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 +794,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>

package/src/board/ChangesPane.tsx

@@ -1,8 +1,8 @@
 // 改动：移植自 Operator 的 TaskChanges（只读部分：分支、统计、文件列表、逐文件 diff）。
 // 合并 / 解决冲突 / 建 PR 是 Operator 里的操作，经中枢的对话任务不提供。
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { BoardBackend } from "../core/client.js";
-import type { DiffFile, DiffResult } from "../core/types.js";
+import type { BoardBackend } from "../core/client";
+import type { DiffFile, DiffResult } from "../core/types";
 
 const STATUS_LABEL: Record<string, string> = { A: "新增", M: "修改", D: "删除", R: "重命名", "?": "未跟踪" };
 const COLLAPSE_LINES = 400;