@spzxg/cli-ui 0.6.5 → 0.6.6

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-BmLN2Jjg.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-BAqonuoD.js";
 export {
   a as CliBoard,
   i as CliBrowserView,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spzxg/cli-ui",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "type": "module",
   "description": "相互联动的 CliMsgList、CliChat、CliBoard，支持任务中枢和完整 Operator 工作区。",
   "main": "src/index.ts",
@@ -37,23 +37,24 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/node": "^22.20.5",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "4.7.0",
     "jsdom": "^25.0.1",
     "postcss": "^8.5.32",
     "typescript": "^5.7.3",
-    "vite": "^6.0.7",
-    "vitest": "^2.1.8"
+    "vite": "6.4.5",
+    "vitest": "4.1.12"
   },
   "dependencies": {
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
     "jszip": "^3.10.2",
     "mammoth": "^1.13.0",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",
-    "remark-gfm": "^4.0.1",
-    "@xterm/xterm": "^6.0.0",
-    "@xterm/addon-fit": "^0.11.0",
-    "@xterm/addon-web-links": "^0.12.0"
+    "remark-gfm": "^4.0.1"
   }
 }

package/src/board/BrowserPane.tsx

@@ -17,6 +17,13 @@ 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]);
 
@@ -135,6 +172,7 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
     const connect = () => {
       if (!alive) return;
       let finished = false;
+      let seenViewer = false;
       let stopThis: (() => void) | null = null;
       const retire = () => {
         if (!alive || finished) return false;
@@ -144,7 +182,7 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
         return true;
       };
       stopThis = backend.browserLive!(jobId, {
-        onViewer: (id, isReady) => { if (!alive || finished) return; attempt = 0; setViewer(id); setReady(isReady); },
+        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); },
@@ -170,7 +208,7 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
     };
     connect();
     return () => { alive = false; stop?.(); if (timer) clearTimeout(timer); };
-  }, [backend, jobId, mode, visible, retry, deliver]);
+  }, [backend, jobId, mode, visible, retry, deliver, beginViewer]);
 
   // ── 旧版：状态一条（页面在后台时也断开，切回来再连：人多时少占中枢和节点的连接） ──
   useEffect(() => {
@@ -213,6 +251,7 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
     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.
@@ -226,7 +265,7 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
       };
       setFrames({ state: attempt ? "retrying" : "connecting" });
       stopThis = backend.browserFrames(jobId, {
-        onViewer: (id) => { if (!alive || finished) return; attempt = 0; setViewer(id); setReady(true); setFrames({ state: "live" }); },
+        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; }
@@ -244,16 +283,16 @@ function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefOb
     };
     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 (status && !running) latest.current = {}; }, [running, status]);
+  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 {
@@ -276,19 +315,30 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; inputEpoch: number; hi
     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 [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) {
         const type = data.startsWith("iVBOR") ? "image/png" : "image/jpeg";
         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; }
@@ -335,11 +385,11 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; inputEpoch: number; hi
     const onPointerDown = (e: React.PointerEvent) => {
       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 });
@@ -369,10 +419,12 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; inputEpoch: number; hi
       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;
       }
@@ -435,6 +487,12 @@ 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);
@@ -458,34 +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) { 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") {
-        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;
-    if (lastPage) handle(lastPage);
-    if (lastDialog) handle(lastDialog);
-    if (lastFrame) handle(lastFrame);
-    sink.current = handle;
-    return () => { sink.current = null; clipboardSequence.current++; };
-  }, [sink, flash, latest]);
-
   useEffect(() => { if (!editing) setAddr(page.url); }, [page.url, editing]);
   const onPageRef = useRef(onPage);
   onPageRef.current = onPage;
@@ -527,6 +557,11 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
     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 = [];
@@ -549,6 +584,11 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
       if (msg.type !== "mouse" || msg.event === "mousePressed") flash("画面连接还没就绪，刚才的操作没有送达，请稍后再操作");
       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;
     // 请求卡住时别无限攒：超了先丢鼠标移动，还超就丢最早的。
@@ -564,7 +604,101 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
     } else q.push(msg);
     flush();
     return true;
-  }, [flush, flash]);
+  }, [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、快捷键、输入即搜索都能收到；
@@ -602,23 +736,34 @@ function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
 
   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} inputEpoch={inputEpoch.current} 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>
         )}
@@ -656,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)}

package/src/board/FileViewer.tsx

@@ -146,6 +146,7 @@ function FileViewerInner({ backend, jobId, path, size, mtime, version = 0, reloa
   const kind: PreviewKind = previewKind(path);
   const [loaded, setLoaded] = useState<Loaded | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
   const [busy, setBusy] = useState(false);
   const [mode, setMode] = useState<"preview" | "source">("preview");
@@ -245,8 +246,13 @@ function FileViewerInner({ backend, jobId, path, size, mtime, version = 0, reloa
       const r = typeof range.getBoundingClientRect === "function" ? range.getBoundingClientRect() : { left: box.left + box.width / 2, width: 0, top: box.top + 48 };
       setSel({ text, x: Math.min(Math.max(8, r.left - box.left + r.width / 2), box.width - 8), y: Math.max(40, r.top - box.top) });
     };
-    const onUp = () => setTimeout(read, 0);
-    const onChange = () => { const s = window.getSelection(); if (!s || s.isCollapsed) setSel((cur) => (cur?.frame ? cur : null)); };
+    let selectionTimer: ReturnType<typeof setTimeout> | undefined;
+    const onUp = () => {
+      if (selectionTimer !== undefined) clearTimeout(selectionTimer);
+      selectionTimer = setTimeout(() => { selectionTimer = undefined; read(); }, 0);
+    };
+    // Native touch selection/handle changes need not generate mouseup or keyup.
+    const onChange = onUp;
     const body = bodyRef.current;
     document.addEventListener("mouseup", onUp);
     document.addEventListener("keyup", onUp);
@@ -257,6 +263,7 @@ function FileViewerInner({ backend, jobId, path, size, mtime, version = 0, reloa
     body?.addEventListener("scroll", onScroll, { passive: true });
     document.addEventListener("mousedown", onDown);
     return () => {
+      if (selectionTimer !== undefined) clearTimeout(selectionTimer);
       document.removeEventListener("mousedown", onDown);
       document.removeEventListener("mouseup", onUp);
       document.removeEventListener("keyup", onUp);
@@ -298,8 +305,8 @@ function FileViewerInner({ backend, jobId, path, size, mtime, version = 0, reloa
       const prev = loadedRef.current?.kind === "text" && textKey.current === key ? loadedRef.current : null;
       textKey.current = key;
       if (!prev) setProgress(0);
-      const full = () => loadText(backend, jobId, path, { max: TEXT_MAX, tail, onBytes: (n) => { if (alive && !prev) setProgress(n); } });
-      (prev ? refreshText(backend, jobId, path, prev, TEXT_MAX).then((r) => r ?? full(), full) : full()).then(
+      const full = () => loadText(backend, jobId, path, { max: TEXT_MAX, tail, signal: ctl.signal, onBytes: (n) => { if (alive && !prev) setProgress(n); } });
+      (prev ? refreshText(backend, jobId, path, prev, TEXT_MAX, { signal: ctl.signal }).then((r) => r ?? full(), full) : full()).then(
         (r) => {
           if (!alive) return;
           const box = bodyRef.current;
@@ -321,8 +328,9 @@ function FileViewerInner({ backend, jobId, path, size, mtime, version = 0, reloa
   }), [backend, jobId, path, name, links]);
 
   const download = async () => {
-    setBusy(true);
-    try { await downloadFile(backend, jobId, path, knownSize); } catch (e) { setError(e instanceof Error ? e.message : String(e)); } finally { setBusy(false); }
+    if (busy) return;
+    setBusy(true); setDownloadError(null);
+    try { await downloadFile(backend, jobId, path, knownSize); } catch (e) { setDownloadError(e instanceof Error ? e.message : String(e)); } finally { setBusy(false); }
   };
   const openUrl = links.url ? links.url(path) : src.url;
   const openNew = () => { if (openUrl) window.open(openUrl, "_blank", "noopener"); };
@@ -380,11 +388,15 @@ function FileViewerInner({ backend, jobId, path, size, mtime, version = 0, reloa
           {onClose && <button className="cli-fv-icon" onClick={onClose} title="关闭">{Icon.x()}</button>}
         </div>
       )}
+      {downloadError && <div className="cli-fv-trunc" role="alert">下载失败：{downloadError}
+        <button className="cli-fv-btn" disabled={busy} onClick={() => void download()}>重试下载</button>
+        <button className="cli-fv-btn" onClick={() => setDownloadError(null)} aria-label="关闭下载错误">关闭</button>
+      </div>}
       <div className={`cli-fv-b k-${kind}`} ref={bodyRef}>
         {error || src.error ? (
           <div className="cli-fv-note err">读取失败：{error ?? src.error}
             <button className="btn btn-line btn-sm" style={{ marginLeft: 8 }} onClick={retry}>重试</button>
-            <button className="btn btn-line btn-sm" style={{ marginLeft: 8 }} onClick={() => void download()}>{Icon.download()} 下载</button>
+            <button className="btn btn-line btn-sm" style={{ marginLeft: 8 }} onClick={() => void download()} disabled={busy}>{Icon.download()} 下载</button>
           </div>
         ) : kind === "binary" ? (
           <div className="cli-fv-note">这种文件不能在这里预览。
@@ -498,8 +510,9 @@ function SourceView({ backend, jobId, path, version }: { backend: BoardBackend;
   const [state, setState] = useState<{ text: string; size?: number; truncated?: boolean } | null>(null);
   useEffect(() => {
     let alive = true;
-    backend.readText(jobId, path, TEXT_MAX).then((r) => { if (alive) setState({ text: r.text, size: r.size, truncated: r.truncated }); }, (e: unknown) => { if (alive) setState({ text: `读取失败：${e instanceof Error ? e.message : String(e)}` }); });
-    return () => { alive = false; };
+    const ctl = new AbortController();
+    backend.readText(jobId, path, TEXT_MAX, { signal: ctl.signal }).then((r) => { if (alive) setState({ text: r.text, size: r.size, truncated: r.truncated }); }, (e: unknown) => { if (alive) setState({ text: `读取失败：${e instanceof Error ? e.message : String(e)}` }); });
+    return () => { alive = false; ctl.abort(); };
   }, [backend, jobId, path, version]);
   if (!state) return <div className="cli-fv-note">加载中…</div>;
   return (

package/src/board/fileWatch.ts

@@ -1,4 +1,4 @@
-import { CenterError, type BoardBackend } from '../core/client';
+import { CenterError, isMissingRoute, type BoardBackend } from '../core/client';
 import { notifyCallback } from '../core/callbacks';
 import type { FileEntry, WorkspaceChangeEvent, WorkspaceFileBatch, WorkspaceFileChange, WorkspaceWatchStatus } from '../core/types';
 import { listFolder } from './folderDownload';
@@ -15,7 +15,7 @@ export function subscribeWorkspaceFiles(backend:BoardBackend,jobId:string,listen
  let entries=registries.get(backend);if(!entries){entries=new Map();registries.set(backend,entries);}
  let entry=entries.get(jobId);const subscription={change:listener,status:options.onStatus};
  if(!entry){
-  const mode=backend.watchFiles?'events':'poll',coverage=mode==='events'?'workspace':'listed-files';
+  let mode:WorkspaceWatchStatus['mode']=backend.watchFiles?'events':'poll',coverage:WorkspaceWatchStatus['coverage']=mode==='events'?'workspace':'listed-files';
   entry={listeners:new Set(),stop:()=>{},status:{type:'files_watch',jobId,state:'connecting',mode,coverage,complete:false}};entries.set(jobId,entry);
   const owned=entry;let alive=true,baseline:Map<string,FileEntry>|null=null,limited=false,blocked=false,stopTransport:(()=>void)|null=null;
   let timer:ReturnType<typeof setTimeout>|undefined,controller:AbortController|null=null,attempt=0,generation=0;
@@ -67,7 +67,13 @@ export function subscribeWorkspaceFiles(backend:BoardBackend,jobId:string,listen
    const retire=()=>{finished=true;if(stopTransport===retire)stopTransport=null;const dispose=cleanup;cleanup=null;notifyCallback(dispose??undefined,undefined);};
    const close=(error:unknown)=>{
     if(!alive||finished||token!==generation)return;retire();if(!alive||token!==generation)return;const code=error instanceof CenterError?error.status:0;
-    blocked=[400,404,405,410,501].includes(code);const slow=[401,403,429].includes(code);
+    if(error instanceof CenterError&&(isMissingRoute(error)||(code===501&&error.code==='file_watch_unsupported'))){
+     // A directory listing has narrower coverage than native events. Establish
+     // a fresh baseline rather than reporting inaccessible paths as deleted.
+     mode='poll';coverage='listed-files';baseline=null;limited=false;attempt=0;blocked=false;
+     status('connecting',false,error.message);if(alive&&token===generation)void scan();return;
+    }
+    blocked=[400,404,405,410,413,501].includes(code);const slow=[401,403,429].includes(code);
     status(blocked||slow?'error':'reconnecting',false,error instanceof Error?error.message:undefined);
     if(!alive||token!==generation||blocked)return;
     const delay=slow?30000:Math.min(30000,1000*2**Math.min(attempt++,5));

package/src/board/frameQuote.ts

@@ -18,9 +18,9 @@ function bridgeScript(token: string) {
   return `(function(){var t=${t};function post(m){m.cliUiSel=t;try{parent.postMessage(m,"*")}catch(e){}}
 function send(){var s=getSelection(),text=s&&!s.isCollapsed?String(s).trim():"",rect=null;
 if(text&&s.rangeCount){var b=s.getRangeAt(0).getBoundingClientRect();rect={left:b.left,top:b.top,width:b.width}}post({text:text,rect:rect})}
-function later(){setTimeout(send,0)}
+var timer;function later(){clearTimeout(timer);timer=setTimeout(send,0)}
 document.addEventListener("mouseup",later);document.addEventListener("keyup",later);
-document.addEventListener("selectionchange",function(){var s=getSelection();if(!s||s.isCollapsed)post({text:""})});
+document.addEventListener("selectionchange",later);
 addEventListener("scroll",function(){post({scroll:true})},true);
 addEventListener("message",function(e){if(e.source===parent&&e.data&&e.data.cliUiClear===t){var s=getSelection();s&&s.removeAllRanges()}});
 document.addEventListener("click",function(e){var a=e.target&&e.target.closest&&e.target.closest('a[href^="#"]');if(!a)return;e.preventDefault();

package/src/board/textLoad.ts

@@ -47,12 +47,13 @@ export function incompleteUtf8Tail(bytes: Uint8Array) {
 const sameBytes = (a: Uint8Array, b: Uint8Array) => a.length === b.length && a.every((x, i) => x === b[i]);
 
 /** 第一次读：开头（或末尾）最多 max 字节。 */
-export async function loadText(backend: BoardBackend, jobId: string, path: string, opts: { max: number; tail?: boolean; onBytes?: (bytes: number) => void }): Promise<LoadedText> {
+export async function loadText(backend: BoardBackend, jobId: string, path: string, opts: { max: number; tail?: boolean; onBytes?: (bytes: number) => void; signal?: AbortSignal }): Promise<LoadedText> {
+  if (opts.signal?.aborted) throw new DOMException("文件读取已取消", "AbortError");
   if (!backend.readBytes) {
-    const r = await backend.readText(jobId, path, opts.max, { tail: opts.tail, onBytes: opts.onBytes });
+    const r = await backend.readText(jobId, path, opts.max, { tail: opts.tail, onBytes: opts.onBytes, signal: opts.signal });
     return { text: r.text, parts: [r.text], truncated: r.truncated, size: r.size, tail: !!r.tail, encoding: r.encoding, start: 0, end: 0, tailBytes: null };
   }
-  const chunk = await backend.readBytes(jobId, path, { maxBytes: opts.max, tail: opts.tail, onBytes: opts.onBytes });
+  const chunk = await backend.readBytes(jobId, path, { maxBytes: opts.max, tail: opts.tail, onBytes: opts.onBytes, signal: opts.signal });
   const { text, encoding } = decodeText(chunk.bytes, { fromMiddle: chunk.start > 0 });
   const k = encoding === "utf-8" ? incompleteUtf8Tail(chunk.bytes) : 0;
   const end = chunk.start + chunk.bytes.length - k;
@@ -67,7 +68,8 @@ export async function loadText(backend: BoardBackend, jobId: string, path: strin
  * 文件变了：能接上就只取新增的部分，返回新的内容；返回 null = 接不上（被改写 / 变短 / 不是 UTF-8 / 后端不支持），调用方整个重读。
  * 只看开头且文件比 max 大时，开头没变就不用重读（追加的在后面，本来就不显示）。
  */
-export async function refreshText(backend: BoardBackend, jobId: string, path: string, prev: LoadedText, max: number): Promise<LoadedText | null> {
+export async function refreshText(backend: BoardBackend, jobId: string, path: string, prev: LoadedText, max: number, options: { signal?: AbortSignal } = {}): Promise<LoadedText | null> {
+  if (options.signal?.aborted) throw new DOMException("文件读取已取消", "AbortError");
   if (!backend.readBytes || !prev.tailBytes) return null;
   const overlap = prev.tailBytes.length;
   const from = prev.end - overlap;
@@ -75,7 +77,7 @@ export async function refreshText(backend: BoardBackend, jobId: string, path: st
   // 末尾模式攒多了（超过 1.5 倍）：整个重读末尾，免得越攒越大。
   if (prev.tail && prev.end - prev.start > max * 1.5) return null;
   const room = headOnly ? 0 : prev.tail ? max : Math.max(0, max - (prev.end - prev.start));
-  const chunk = await backend.readBytes(jobId, path, { start: from, maxBytes: overlap + room });
+  const chunk = await backend.readBytes(jobId, path, { start: from, maxBytes: overlap + room, signal: options.signal });
   if (chunk.size < prev.end || chunk.start !== from || chunk.bytes.length < overlap) return null;
   if (!sameBytes(chunk.bytes.subarray(0, overlap), prev.tailBytes)) return null;
   const readEnd = from + chunk.bytes.length;