@spzxg/cli-ui 0.3.1 → 0.6.0

package/src/board/BrowserPane.tsx

@@ -1,13 +1,22 @@
 // 任务浏览器：移植自 Operator 的 BrowserPane（状态、实时画面、接管 / 交还、打开 / 关闭）。
-// 全部经 center 转发：状态和画面走 SSE，鼠标键盘走 POST；只有面板挂着且页面可见时才拉画面。
+// 全部经 center 转发：一条实时连接（GET /browser/live）里有状态、画面、弹窗和复制出的文字，鼠标键盘走 POST。
+// 旧版中枢没有这条连接时退回两条（/browser/events 状态 + /browser/frames 画面）。页面切到后台就断开，切回来再连
+// （同一域名的连接数有限，后台页面不该占着）。
 // 输入只在用户接管（control = human）时发送，节点那边也只在接管时接受。
+// 让远端操作和本机一样：
+//   · 打字是真正的按键事件（网页的 keydown / 快捷键 / 输入即搜索都能收到）；输入法、粘贴走文字插入；
+//   · 编辑快捷键（全选 / 复制 / 剪切 / 撤销）按节点的系统换成那边的按键，复制出来的文字写进你自己的剪贴板；
+//   · 按住拖动带着按键（选中文字、拖滑块）；滚轮合并发送；
+//   · 网页的 alert / confirm / prompt 画面里看不到，这里单独弹出来处理。
 // Operator 的「在节点屏幕上显示」「弹出窗口」「登录状态」是节点本机的功能，这里不提供。
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { CenterError, type BoardBackend } from "../core/client.js";
-import type { BrowserStatus } from "../core/types.js";
+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";
 
 interface FrameMeta { deviceWidth: number; deviceHeight: number }
+type Dialog = Extract<BrowserMessage, { type: "dialog" }>;
 
 const CAPABILITY_LABEL: Record<string, string> = { config: "任务配置", manual: "手动打开过", ai: "AI 自行启用" };
 const SPECIAL_KEYS: Record<string, number> = {
@@ -16,6 +25,27 @@ const SPECIAL_KEYS: Record<string, number> = {
 };
 const MOUSE_BUTTONS = ["left", "middle", "right"] as const;
 const RETRY_MS = [1_000, 3_000, 8_000, 15_000];
+const retryDelay = (attempt: number) => jitter(RETRY_MS[Math.min(attempt, RETRY_MS.length - 1)]);
+/** 看的人满了（中枢回 429）：别人退出才有位置，隔久一点再试。 */
+const FULL_RETRY_MS = 20_000;
+/** 连接失败后多久再试：还没派发不超过 3 秒；登录过期 30 秒；人满 20 秒；其余按退避（都带随机浮动，免得大家同一秒一起重连）。 */
+const nextTry = (err: { status?: number } | null | undefined, attempt: number) =>
+  err?.status === 409 ? Math.round(3_000 * (0.7 + Math.random() * 0.3)) : err && (err.status === 401 || err.status === 403) ? jitter(30_000) : err?.status === 429 ? jitter(FULL_RETRY_MS) : retryDelay(attempt);
+
+/** 接管时发了操作、这么久画面一点没变：提示「画面没有响应」，给重连。 */
+const UNRESPONSIVE_MS = 8_000;
+/** 输入队列最多攒这么多（请求卡住时不无限堆积；先丢鼠标移动）。 */
+const QUEUE_MAX = 200;
+
+/** 地址栏：没写协议的补 https://（example.com、localhost:3000）；看起来不像地址的原样交给节点。 */
+export function normalizeUrl(input: string): string {
+  const v = input.trim();
+  if (!v) return "";
+  if (/^[a-z][a-z0-9+.-]*:/i.test(v) && !/^[^/]+:\d+(\/|$)/.test(v)) return v;
+  if (/^(localhost|\d{1,3}(\.\d{1,3}){3})(:\d+)?(\/|$)/i.test(v)) return `http://${v}`;
+  if (!/\s/.test(v) && /\.[a-z]{2,}(:\d+)?(\/|$|\?|#)/i.test(v)) return `https://${v}`;
+  return v;
+}
 
 function modifiers(e: { altKey: boolean; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean }): number {
   return (e.altKey ? 1 : 0) | (e.ctrlKey ? 2 : 0) | (e.metaKey ? 4 : 0) | (e.shiftKey ? 8 : 0);
@@ -31,32 +61,160 @@ function usePageVisible(): boolean {
   return visible;
 }
 
-/** 浏览器状态：SSE 推送，断了按退避重连。 */
-function useBrowserStatus(backend: BoardBackend, jobId: string): [BrowserStatus | null, (s: BrowserStatus) => void, string | null] {
+/** 写进本机剪贴板：优先 Clipboard API，不行（没有授权、不是安全来源）退回 execCommand。 */
+async function writeClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); return true; }
+  } catch { /* 退回下面 */ }
+  try {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.style.cssText = "position:fixed;left:0;top:0;opacity:0;";
+    document.body.appendChild(area);
+    area.select();
+    const ok = document.execCommand("copy");
+    area.remove();
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+interface BrowserFeed {
+  status: BrowserStatus | null;
+  setStatus: (s: BrowserStatus) => void;
+  /** 连接出了问题（正在重连）。 */
+  streamError: string | null;
+  /** 不会自动重连了（节点拒绝、没有权限）：显示原因和「重试」。 */
+  ended: string | null;
+  /** 发输入用的 viewer id；ready = 输入能送到节点。 */
+  viewer: string | null;
+  ready: boolean;
+  frames: BrowserFramesState;
+  paused: boolean;
+  reconnect: () => void;
+  /**
+   * 最近的页面、弹窗、画面：中枢在连上时就推过来，那时画面区（要等状态是「已打开」才挂上）可能还没挂好，
+   * 挂上时从这里补上——否则地址栏一直是空的，要等下一次换页。
+   */
+  latest: MutableRefObject<{ page?: BrowserMessage; dialog?: BrowserMessage | null; frame?: BrowserMessage }>;
+}
+
+/**
+ * 浏览器的数据：状态、画面连接、viewer。新版中枢一条连接（browserLive），旧版两条。
+ * 画面和其他消息交给 sink（画面直接画到 canvas，不经 React 状态）。
+ */
+function useBrowserFeed(backend: BoardBackend, jobId: string, sink: MutableRefObject<((m: BrowserMessage) => void) | null>): BrowserFeed {
+  const visible = usePageVisible();
+  const [mode, setMode] = useState<"live" | "legacy">(backend.browserLive ? "live" : "legacy");
   const [status, setStatus] = useState<BrowserStatus | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [streamError, setStreamError] = useState<string | null>(null);
+  const [ended, setEnded] = useState<string | null>(null);
+  const [viewer, setViewer] = useState<string | null>(null);
+  const [ready, setReady] = useState(false);
+  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 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;
+    sink.current?.(m);
+  }, [sink]);
+
+  // ── 新版：一条连接 ──
   useEffect(() => {
-    setStatus(null);
+    if (mode !== "live") return;
+    if (!visible) { setViewer(null); setReady(false); setFrames({ state: "idle" }); return; }
+    let alive = true;
     let stop: (() => void) | null = null;
     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,
+        onEnd: (end) => {
+          if (end.reason === "refused") { final = true; setEnded(end.detail || "执行节点拒绝了浏览器连接"); }
+        },
+        onClose: (err) => {
+          setViewer(null);
+          setReady(false);
+          if (!alive || final) return;
+          if (isMissingRoute(err)) { setMode("legacy"); return; }
+          // 对话不存在：重连也没用。
+          if (err && err.status === 404) { setEnded(err.message); return; }
+          if (err) setStreamError(err.message);
+          // 409 还没派发：隔几秒再问；401 / 403 多半是宿主会话过期，30 秒后再试（续上会话就自己恢复）；
+          // 其余（断线、中枢重启、人太多）按退避重连。
+          timer = setTimeout(connect, nextTry(err, attempt++));
+        },
+      });
+    };
+    connect();
+    return () => { alive = false; stop?.(); if (timer) clearTimeout(timer); };
+  }, [backend, jobId, mode, visible, retry, deliver]);
+
+  // ── 旧版：状态一条（页面在后台时也断开，切回来再连：人多时少占中枢和节点的连接） ──
+  useEffect(() => {
+    if (mode !== "legacy" || !visible) return;
     let alive = true;
+    let stop: (() => void) | null = null;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let attempt = 0;
     const connect = () => {
       stop = backend.browserEvents(jobId, {
-        onStatus: (s) => { attempt = 0; setError(null); setStatus(s); },
+        onStatus: (s) => { attempt = 0; setStreamError(null); setStatus(s); },
         onClose: (err) => {
           if (!alive) return;
-          // 404 / 409：节点没开浏览器功能或还没派发，不再重试（CliBoard 会在派发后重新挂载）。
-          if (err && (err.status === 404 || err.status === 409 || err.status === 401)) { setError(err.message); return; }
-          if (err) setError(err.message);
-          timer = setTimeout(connect, RETRY_MS[Math.min(attempt++, RETRY_MS.length - 1)]);
+          if (err && err.status === 404) { setEnded(err.message); return; }
+          if (err) setStreamError(err.message);
+          timer = setTimeout(connect, nextTry(err, attempt++));
         },
       });
     };
     connect();
     return () => { alive = false; stop?.(); if (timer) clearTimeout(timer); };
-  }, [backend, jobId]);
-  return [status, setStatus, error];
+  }, [backend, jobId, mode, visible, retry]);
+
+  // ── 旧版：画面一条（浏览器开着、页面可见时） ──
+  const legacyRunning = mode === "legacy" && visible && status?.state === "running";
+  useEffect(() => {
+    if (!legacyRunning) { if (mode === "legacy") { setViewer(null); setReady(false); setFrames({ state: "idle" }); } return; }
+    let alive = true;
+    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 = () => {
+      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); },
+      });
+    };
+    connect();
+    return () => { alive = false; stop?.(); if (timer) clearTimeout(timer); };
+  }, [backend, jobId, legacyRunning, retry, deliver]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 浏览器关了：上一个页面的地址、弹窗、画面都作废，重新打开时不先闪一下旧画面。
+  const running = status?.state === "running";
+  useEffect(() => { if (!running) latest.current = {}; }, [running]);
+
+  return { status, setStatus, streamError, ended, viewer, ready, frames, paused: !visible, reconnect, latest };
 }
 
 interface ScreenHandle { draw(base64: string, meta: FrameMeta | null): void }
@@ -121,8 +279,12 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
     humanRef.current = human;
     const touch = useRef<{ id: number; x: number; y: number; lastY: number; lastX: number; moved: boolean } | null>(null);
     const lastMove = useRef(0);
+    // 按住的鼠标键：按住拖动时移动事件要带上它，网页里选中文字、拖滑块、拖拽才生效（CDP 按 button 判断是不是在拖）。
+    const pressed = useRef<(typeof MOUSE_BUTTONS)[number] | null>(null);
+    const lastPoint = useRef<{ clientX: number; clientY: number } | null>(null);
 
     const mouse = (event: string, e: { clientX: number; clientY: number; altKey: boolean; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean }, extra: Record<string, unknown> = {}) => {
+      lastPoint.current = { clientX: e.clientX, clientY: e.clientY };
       const p = point(e.clientX, e.clientY);
       if (p) send({ type: "mouse", event, ...p, modifiers: modifiers(e), ...extra });
     };
@@ -136,7 +298,8 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
         return;
       }
       (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
-      mouse("mousePressed", e, { button: MOUSE_BUTTONS[e.button] ?? "left", clickCount: e.detail || 1 });
+      pressed.current = MOUSE_BUTTONS[e.button] ?? "left";
+      mouse("mousePressed", e, { button: pressed.current, clickCount: e.detail || 1 });
     };
     const onPointerMove = (e: React.PointerEvent) => {
       if (!human) return;
@@ -156,7 +319,7 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
       }
       if (Date.now() - lastMove.current < 50) return;
       lastMove.current = Date.now();
-      mouse("mouseMoved", e);
+      mouse("mouseMoved", e, pressed.current ? { button: pressed.current } : {});
     };
     const onPointerUp = (e: React.PointerEvent) => {
       if (!human) return;
@@ -170,9 +333,23 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
         }
         return;
       }
+      pressed.current = null;
       mouse("mouseReleased", e, { button: MOUSE_BUTTONS[e.button] ?? "left", clickCount: e.detail || 1 });
     };
 
+    // 按住鼠标时切走窗口 / 标签页：松手事件收不到，远端会一直「按着」（一直在拖、选中）。补发一次松开。
+    useEffect(() => {
+      const release = () => {
+        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 });
+        pressed.current = null;
+      };
+      window.addEventListener("blur", release);
+      document.addEventListener("visibilitychange", release);
+      return () => { window.removeEventListener("blur", release); document.removeEventListener("visibilitychange", release); };
+    }, [point, send]);
+
     // 滚轮：React 的 onWheel 是被动监听，拦不住宿主页面滚动，所以用原生监听（passive: false）。
     useEffect(() => {
       const node: HTMLElement | null = el();
@@ -180,7 +357,9 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
       const onWheel = (e: WheelEvent) => {
         if (!humanRef.current) return;
         e.preventDefault();
-        mouse("mouseWheel", e, { deltaX: e.deltaX, deltaY: e.deltaY });
+        // deltaMode 1 / 2（按行 / 按页滚动的鼠标）换成像素。
+        const k = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 800 : 1;
+        mouse("mouseWheel", e, { deltaX: e.deltaX * k, deltaY: e.deltaY * k });
       };
       node.addEventListener("wheel", onWheel, { passive: false });
       return () => node.removeEventListener("wheel", onWheel);
@@ -190,7 +369,7 @@ 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; },
+      onPointerCancel: () => { touch.current = null; pressed.current = null; },
       onContextMenu: (e: React.MouseEvent) => { if (human) e.preventDefault(); },
       role: "img" as const,
       "aria-label": label,
@@ -201,9 +380,11 @@ const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label
   },
 );
 
-function Viewer({ backend, jobId, human }: { backend: BoardBackend; jobId: string; human: boolean }) {
-  const visible = usePageVisible();
-  const viewerRef = useRef<string | null>(null);
+function Viewer({ backend, jobId, human, feed, sink, onPage, onQuoteText }: {
+  backend: BoardBackend; jobId: string; human: boolean; feed: BrowserFeed; sink: MutableRefObject<((m: BrowserMessage) => void) | null>;
+  onPage?: (page: { url: string; title: string } | null) => void;
+  onQuoteText?: (text: string, page: { url: string; title: string }) => void;
+}) {
   const screenRef = useRef<ScreenHandle | null>(null);
   const keysRef = useRef<HTMLTextAreaElement | null>(null);
   const [hasFrame, setHasFrame] = useState(false);
@@ -211,91 +392,131 @@ function Viewer({ backend, jobId, human }: { backend: BoardBackend; jobId: strin
   const [addr, setAddr] = useState("");
   const [editing, setEditing] = useState(false);
   const [notice, setNotice] = useState<string | null>(null);
-  const [ended, setEnded] = useState<string | null>(null);
-  const [retry, setRetry] = useState(0);
-  const [reconnecting, setReconnecting] = useState(false);
-  // 连续失败次数：按退避重连，收到画面后清零。
-  const failures = useRef(0);
-  const reconnect = useCallback((delay?: number) => {
-    const wait = delay ?? RETRY_MS[Math.min(failures.current++, RETRY_MS.length - 1)];
-    setReconnecting(true);
-    return setTimeout(() => setRetry((n) => n + 1), wait);
+  const [dialog, setDialog] = useState<Dialog | null>(null);
+  const [promptText, setPromptText] = useState("");
+  // 在网页里复制出来的文字：除了写进剪贴板，还可以「引用到对话」。
+  const [copied, setCopied] = useState<string | null>(null);
+  // 画面没有响应：接管时发了操作，之后 UNRESPONSIVE_MS 一帧都没来。
+  const [stuck, setStuck] = useState(false);
+  const lastInputAt = useRef(0);
+  const lastFrameAt = useRef(0);
+  const noticeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const flash = useCallback((text: string, ms = 3000) => {
+    setNotice(text);
+    if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    noticeTimer.current = setTimeout(() => setNotice(null), ms);
   }, []);
+  useEffect(() => () => { if (noticeTimer.current) clearTimeout(noticeTimer.current); }, []);
 
+  // 连接上来的消息：画面直接画，其余更新界面。挂上时先补上挂上之前到的页面 / 弹窗 / 最后一帧。
+  const latest = feed.latest;
   useEffect(() => {
-    if (!visible) return;
-    setEnded(null);
-    let clear: ReturnType<typeof setTimeout> | undefined;
-    let again: ReturnType<typeof setTimeout> | undefined;
-    const flash = (text: string) => {
-      setNotice(text);
-      if (clear) clearTimeout(clear);
-      clear = setTimeout(() => setNotice(null), 3000);
+    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 stop = backend.browserFrames(jobId, {
-      onViewer: (id) => { viewerRef.current = id; setReconnecting(false); },
-      onMessage: (m) => {
-        if (m.type === "frame" && m.data) {
-          failures.current = 0;
-          screenRef.current?.draw(m.data, m.metadata ?? null);
-          setHasFrame(true);
-        } else if (m.type === "page") setPage({ url: m.url ?? "", title: m.title ?? "" });
-        else if (m.type === "error" && m.message) flash(m.message);
-      },
-      onEnd: (end) => {
-        viewerRef.current = null;
-        // 节点明确拒绝：不自动重试（多半是节点版本 / 功能开关），给「重试」按钮。其余（超时、节点断开）按退避重连。
-        if (end.reason === "refused") setEnded(end.detail || "执行节点拒绝了画面连接");
-        else if (end.reason !== "client_closed") again = reconnect();
-      },
-      onClose: (err) => {
-        viewerRef.current = null;
-        if (!err) return; // 正常结束：onEnd 已经处理
-        if (err.status === 429 || err.status === 404 || err.status === 401 || err.status === 409) setEnded(err.message);
-        else again = reconnect();
-      },
-    });
-    return () => { stop(); viewerRef.current = null; if (clear) clearTimeout(clear); if (again) clearTimeout(again); };
-  }, [backend, jobId, visible, retry, reconnect]);
+    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;
+  useEffect(() => { onPageRef.current?.(page.url ? page : null); }, [page]);
+  useEffect(() => () => onPageRef.current?.(null), []);
+  // 接管中发了操作却一直没有新画面：多半是画面连接卡住或网络很慢，说出来并给「重连」。
+  useEffect(() => {
+    if (!human) { setStuck(false); return; }
+    const t = setInterval(() => {
+      const waiting = lastInputAt.current > lastFrameAt.current && Date.now() - lastInputAt.current > UNRESPONSIVE_MS;
+      setStuck(waiting);
+    }, 1_000);
+    return () => clearInterval(t);
+  }, [human]);
 
-  // 输入按顺序发：一个请求在路上时攒着，回来后一次发完（鼠标移动只留最后一个）。
+  // 输入按顺序发：一个请求在路上时攒着，回来后一次发完（鼠标移动只留最后一个，连续的滚轮合并）。
+  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 reconnect = feed.reconnect;
   const flush = useCallback(() => {
     const viewer = viewerRef.current;
     if (inflight.current || !viewer || !queue.current.length) return;
     const batch = queue.current.splice(0, 50);
     inflight.current = true;
     backend.browserInput(jobId, viewer, batch).catch((error: unknown) => {
-      // 画面连接已失效（中枢重启、连接断开）：丢掉这批输入并重连画面，避免用户以为点了没反应。
+      // 画面连接已失效（中枢重启、连接断开）：丢掉这批输入并重连，避免用户以为点了没反应。
       if (error instanceof CenterError && (error.status === 404 || error.status === 409)) {
-        viewerRef.current = null;
         queue.current = [];
-        setNotice("画面连接已断开，正在重连…（刚才的操作没有送达，请重新操作）");
-        setTimeout(() => setNotice(null), 4000);
-        reconnect(300);
+        flash("画面连接已断开，正在重连…（刚才的操作没有送达，请重新操作）", 4000);
+        reconnect();
+        return;
+      }
+      // 其余（网络抖动、超时、中枢忙）：不自动重发——点击、回车重复送达比没送达更糟。说清楚，让用户看画面决定要不要再操作。
+      const important = batch.some((m) => m.type !== "mouse" || m.event === "mousePressed");
+      if (important) {
+        const why = error instanceof CenterError && error.status === 429 ? "操作太快，任务中心暂时没接收" : "网络不稳";
+        flash(`${why}：刚才的操作可能没有送达，请看画面确认后再操作`, 5000);
       }
     }).finally(() => { inflight.current = false; flush(); });
-  }, [backend, jobId, reconnect]);
+  }, [backend, jobId, reconnect, flash]);
   const send = useCallback((msg: Record<string, unknown>) => {
+    // 画面连接还没就绪（刚接管、正在重连）：不攒着等连上再补发——过几秒才落下的点击比没点更糟。
+    if (!viewerRef.current) {
+      if (msg.type !== "mouse" || msg.event === "mousePressed") flash("画面连接还没就绪，刚才的操作没有送达，请稍后再操作");
+      return;
+    }
+    lastInputAt.current = Date.now();
     const q = queue.current;
+    // 请求卡住时别无限攒：超了先丢鼠标移动，还超就丢最早的。
+    if (q.length >= QUEUE_MAX) {
+      const kept = q.filter((m) => !(m.type === "mouse" && m.event === "mouseMoved"));
+      q.splice(0, q.length, ...kept.slice(-(QUEUE_MAX - 1)));
+    }
     const last = q[q.length - 1];
-    if (msg.type === "mouse" && msg.event === "mouseMoved" && last?.type === "mouse" && last.event === "mouseMoved") q[q.length - 1] = msg;
-    else q.push(msg);
+    if (msg.type === "mouse" && last?.type === "mouse" && msg.event === last.event && (msg.event === "mouseMoved" || (msg.event === "mouseWheel" && msg.x === last.x && msg.y === last.y))) {
+      q[q.length - 1] = msg.event === "mouseWheel"
+        ? { ...msg, deltaX: Number(last.deltaX) + Number(msg.deltaX), deltaY: Number(last.deltaY) + Number(msg.deltaY) }
+        : msg;
+    } else q.push(msg);
     flush();
-  }, [flush]);
+  }, [flush, flash]);
 
+  // 键盘：
+  //   · 普通字符（不带 Ctrl / ⌘）作为真正的按键发出（带 text）——网页的 keydown、快捷键、输入即搜索都能收到；
+  //   · 功能键（回车、退格、方向……）照发；
+  //   · Ctrl / ⌘ 组合键照发（节点按自己的系统换成那边的快捷键；复制 / 剪切出来的文字写进你的剪贴板）；
+  //     ⌘V / Ctrl+V 例外：让本机的粘贴进到接收框，再作为文字插入；
+  //   · 输入法的组字结果、粘贴走文字插入（compositionend / input）。
   const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.nativeEvent.isComposing) return;
-    const code = SPECIAL_KEYS[e.key];
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
     const mods = modifiers(e);
-    const shortcut = (mods & 6) !== 0 && e.key.toLowerCase() !== "v";
-    if (code === undefined && !shortcut) return;
+    const shortcut = (mods & 6) !== 0;
+    if (shortcut && e.key.toLowerCase() === "v") return;
+    const special = SPECIAL_KEYS[e.key];
+    const printable = e.key.length === 1;
+    if (special === undefined && !printable && !shortcut) return;
     e.preventDefault();
-    const base = { key: e.key, code: e.code, keyCode: code ?? e.keyCode, modifiers: mods };
-    send({ type: "key", event: "keyDown", ...base, ...(e.key === "Enter" ? { text: "\r" } : {}) });
+    const keyCode = special ?? (e.keyCode || (printable ? e.key.toUpperCase().charCodeAt(0) : 0));
+    const base = { key: e.key, code: e.code, keyCode, modifiers: mods };
+    const text = e.key === "Enter" ? "\r" : printable && !shortcut ? e.key : undefined;
+    send({ type: "key", event: "keyDown", ...base, ...(text ? { text } : {}) });
     send({ type: "key", event: "keyUp", ...base });
   };
   const flushText = (el: HTMLTextAreaElement) => {
@@ -303,29 +524,61 @@ function Viewer({ backend, jobId, human }: { backend: BoardBackend; jobId: strin
     el.value = "";
   };
   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);
+  };
 
+  const { frames, paused } = feed;
+  const retrying = frames.state === "retrying";
   return (
     <div className="bp-viewer">
       <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>
-        <form className="bp-addr-form" onSubmit={(e) => { e.preventDefault(); nav({ type: "navigate", url: addr }); setEditing(false); }}>
+        <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}
             onFocus={() => setEditing(true)} onBlur={() => setEditing(false)} onChange={(e) => setAddr(e.target.value)} />
         </form>
       </div>
       <div className={`bp-screen ${human ? "live" : ""}`}>
-        {ended ? (
-          <div className="bp-empty">看不到实时画面：{ended}<br /><button className="btn btn-line btn-sm" style={{ marginTop: 8 }} onClick={() => { failures.current = 0; setRetry((n) => n + 1); }}>重试</button></div>
-        ) : null}
         {/* 画面一直挂着（收到第一帧前隐藏），解码在内存里做，不受宿主页面 CSP 的 img-src 限制。 */}
-        <Screen ref={screenRef} human={human && !ended} hidden={!hasFrame || !!ended} label={page.title || "浏览器画面"} send={send} onFocusKeys={() => keysRef.current?.focus({ preventScroll: true })} />
-        {!ended && !hasFrame && (
-          <div className="bp-empty">{!visible ? "页面不可见，已暂停画面" : reconnecting ? "画面连接中断，正在重连…" : "正在连接画面…"}</div>
+        <Screen ref={screenRef} human={human} hidden={!hasFrame} label={page.title || "浏览器画面"} send={send} onFocusKeys={() => keysRef.current?.focus({ preventScroll: true })} />
+        {!hasFrame && (
+          <div className="bp-empty">
+            {paused ? "页面不可见，已暂停画面" : retrying ? `画面连接中断，正在重连…${frames.detail ? `（${frames.detail}）` : ""}` : "正在连接画面…"}
+            {retrying && <><br /><button className="btn btn-line btn-sm" style={{ marginTop: 8 }} onClick={reconnect}>立即重试</button></>}
+          </div>
         )}
-        {notice && <div className="bp-toast">{notice}</div>}
-        {hasFrame && reconnecting && !notice && <div className="bp-toast">画面连接中断，正在重连…</div>}
+        {dialog && (
+          <div className="bp-dialog" role="dialog" aria-label="网页弹窗">
+            <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); }} />}
+              {!human && <div className="bp-dialog-hint">接管浏览器后才能处理这个弹窗。</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>
+              </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>
+            )}
+          </div>
+        )}
+        {stuck && !notice && (
+          <div className="bp-toast">画面 {Math.round(UNRESPONSIVE_MS / 1000)} 秒没有变化：网络较慢，或画面连接卡住了
+            <button className="bp-toast-btn" onClick={() => { setStuck(false); lastInputAt.current = 0; reconnect(); }}>重连画面</button>
+          </div>
+        )}
+        {hasFrame && !notice && (paused ? <div className="bp-toast">页面不可见，已暂停画面</div> : retrying ? <div className="bp-toast">画面连接中断，正在重连…</div> : null)}
       </div>
       <textarea
         ref={keysRef}
@@ -340,33 +593,71 @@ function Viewer({ backend, jobId, human }: { backend: BoardBackend; jobId: strin
   );
 }
 
-export function BrowserPane({ backend, jobId, readOnly }: { backend: BoardBackend; jobId: string; readOnly?: boolean }) {
-  const [status, setStatus, streamError] = useBrowserStatus(backend, jobId);
+export function BrowserPane({ backend, jobId, readOnly, onQuote, onQuoteText, onPage }: {
+  backend: BoardBackend; jobId: string; readOnly?: boolean;
+  /** 给了就显示「引用到对话」：把浏览器当前页面（标题 + 地址）带进下一条消息。 */
+  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 sink = useRef<((m: BrowserMessage) => void) | null>(null);
+  const feed = useBrowserFeed(backend, jobId, sink);
+  const { status, setStatus, streamError, ended } = feed;
   const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  // 放大：看板 / 弹窗里画面太小，接管后登录、填验证码看不清。接管时自动放大，交还、关闭时还原；也可以随时手动放大。
+  const [big, setBig] = useState(false);
+  useEffect(() => {
+    if (!big) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = prev; };
+  }, [big]);
   const act = async (action: "open" | "close" | "takeover" | "handback") => {
     setBusy(action);
     setError(null);
-    try { setStatus(await backend.browserAction(jobId, action)); }
+    if (action === "handback" || action === "close") setBig(false);
+    try {
+      setStatus(await backend.browserAction(jobId, action));
+      if (action === "takeover") setBig(true);
+    }
     catch (e) { setError(e instanceof Error ? e.message : String(e)); }
     finally { setBusy(null); }
   };
 
-  if (!status) return <div className="rail-pad"><div className="prev-note">{streamError ? `读取浏览器状态失败：${streamError}` : "读取浏览器状态…"}</div></div>;
+  if (!status) {
+    return (
+      <div className="rail-pad">
+        <div className="prev-note">
+          {ended ? `看不到浏览器：${ended}` : streamError ? `读取浏览器状态失败：${streamError}（正在重试）` : "读取浏览器状态…"}
+          {ended && <><br /><button className="btn btn-line btn-sm" style={{ marginTop: 8 }} onClick={feed.reconnect}>重试</button></>}
+        </div>
+      </div>
+    );
+  }
   const running = status.state === "running";
   const human = running && status.control === "human";
   const kept = human && status.handoff?.by === "kept";
-  const shownError = error ?? (status.state === "none" ? status.error : null);
+  // 状态连接断了（还在重连）时，界面上的状态可能已经过时：写出来，免得用户对着旧状态操作。
+  const shownError = error ?? (status.state === "none" ? status.error : null)
+    ?? (ended ? `浏览器连接已停止：${ended}` : streamError ? `浏览器状态连接中断，正在重连…（${streamError}）` : null);
 
+  const zoomable = running;
   return (
-    <div className="rail-pad bp">
+    <>
+    {big && zoomable && <div className="cli-ui bp-backdrop" onClick={() => setBig(false)} />}
+    <div className={`rail-pad bp ${big && zoomable ? "bp-big" : ""}`}>
       <div className="bp-head">
         <span className="rail-eyebrow">浏览器 · ego lite</span>
         <span className={`bp-badge ${running ? (human ? "human" : "ai") : ""}`}>
           {status.state === "opening" ? "正在打开" : status.state === "closing" ? "正在关闭" : !running ? "未打开" : kept ? "结果页保留中" : human ? "你在操作" : "AI 控制中"}
         </span>
         {running && status.viewers > 0 && <span className="bp-meta">{status.viewers} 人在看</span>}
+        <span style={{ flex: 1 }} />
+        {zoomable && <button className="btn btn-ghost btn-sm bp-zoom" onClick={() => setBig((b) => !b)} title={big ? "还原到看板里" : "放大画面（登录、填验证码时更清楚）"}>{big ? "还原" : "⤢ 放大"}</button>}
       </div>
 
       {kept && <div className="bp-kept">AI 已完成，把结果页留在这里供你查看。看完点「关闭浏览器」；任务之后再用浏览器时会自动收回，没人看 10 分钟后也会自动关闭。</div>}
@@ -383,13 +674,20 @@ export function BrowserPane({ backend, jobId, readOnly }: { backend: BoardBacken
 
       {running ? (
         <>
-          <Viewer backend={backend} jobId={jobId} human={human && !readOnly} />
+          <Viewer backend={backend} jobId={jobId} human={human && !readOnly} feed={feed} sink={sink} onPage={onPage} onQuoteText={onQuoteText} />
           {!readOnly && (
             <div className="prev-actions bp-actions">
               {human
                 ? <button className="btn btn-accent" disabled={!!busy} onClick={() => act("handback")}>{Icon.check()} 交还给 AI</button>
                 : <button className="btn btn-line" disabled={!!busy} onClick={() => act("takeover")}>{Icon.edit()} 接管</button>}
               <span style={{ flex: 1 }} />
+              {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 ?? "" }); }}>
+                  {Icon.board()} 引用到对话
+                </button>
+              )}
               <button className="btn btn-ghost btn-sm" disabled={!!busy} onClick={() => act("close")}>{Icon.x()} 关闭浏览器</button>
             </div>
           )}
@@ -413,6 +711,8 @@ export function BrowserPane({ backend, jobId, readOnly }: { backend: BoardBacken
         </div>
       )}
       {shownError && <div className="bp-error">{shownError}</div>}
+      {shownError && ended && <button className="btn btn-line btn-sm" onClick={feed.reconnect}>重试</button>}
     </div>
+    </>
   );
 }