@ozaiya/openclaw-channel 0.10.30 → 0.10.32

package/dist/src/sandboxScreenCdp.js

@@ -47,9 +47,11 @@ const CAPTURE_TIMEOUT_MS = 1200;
 const MAX_CONSECUTIVE_TIMEOUTS = 3;
 // Backoff between CDP reconnect attempts.
 const RECONNECT_DELAY_MS = 1000;
-// Pause capturing while the relay's outbound buffer exceeds this (≈ a frame or two).
-// Bounds in-flight frames to keep the view real-time on a slow uplink.
-const BACKPRESSURE_LIMIT_BYTES = 96 * 1024;
+// Pause capturing while the relay's outbound buffer exceeds this (≈ one frame).
+// Bounds in-flight frames to keep the view real-time on a slow uplink — and,
+// just as important, keeps the socket queue shallow so TEXT (takeover control,
+// WebRTC signaling) sharing the pipe isn't stuck behind a frame backlog.
+const BACKPRESSURE_LIMIT_BYTES = 24 * 1024;
 // While paused for backpressure, re-check this often (ms).
 const BACKPRESSURE_RECHECK_MS = 25;
 // Page-side pointer probe. Synthetic CDP input (Input.dispatchMouseEvent — from
@@ -59,17 +61,37 @@ const BACKPRESSURE_RECHECK_MS = 25;
 const CURSOR_BINDING = "__ozaiyaCursorReport";
 const CURSOR_PROBE_JS = `(() => {
   if (window.__ozaiyaCursorHooked) return; window.__ozaiyaCursorHooked = 1;
-  let last = 0;
-  const report = (e, click) => {
+  let last = 0, lastTarget = null, lastShape = '';
+  const emit = (obj) => {
     const fn = window.${CURSOR_BINDING};
-    if (typeof fn !== 'function') return;
+    if (typeof fn === 'function') { try { fn(JSON.stringify(obj)); } catch {} }
+  };
+  const report = (e, click) => {
     const now = Date.now();
     if (!click && now - last < 33) return;
     last = now;
-    try { fn(JSON.stringify({ x: Math.round(e.clientX), y: Math.round(e.clientY), c: click ? 1 : 0 })); } catch {}
+    let shape;
+    if (e.target !== lastTarget) {
+      lastTarget = e.target;
+      try {
+        let s = getComputedStyle(e.target).cursor;
+        if (s === 'auto') s = (e.target.closest && e.target.closest('input,textarea,[contenteditable]')) ? 'text' : 'default';
+        if (s !== lastShape) { lastShape = s; shape = s; }
+      } catch {}
+    }
+    emit(shape ? { x: Math.round(e.clientX), y: Math.round(e.clientY), c: click ? 1 : 0, s: shape }
+               : { x: Math.round(e.clientX), y: Math.round(e.clientY), c: click ? 1 : 0 });
   };
   window.addEventListener('mousemove', (e) => report(e, false), { capture: true, passive: true });
   window.addEventListener('mousedown', (e) => report(e, true), { capture: true, passive: true });
+  const clip = () => {
+    try {
+      const t = String(document.getSelection() || '').slice(0, 65536);
+      if (t) emit({ clip: t });
+    } catch {}
+  };
+  window.addEventListener('copy', clip, { capture: true, passive: true });
+  window.addEventListener('cut', clip, { capture: true, passive: true });
 })();`;
 export async function createCdpScreencast(opts) {
     const { host, port } = opts;
@@ -86,6 +108,12 @@ export async function createCdpScreencast(opts) {
     let consecutiveTimeouts = 0;
     let pendingTimer = null;
     let reconnectTimer = null;
+    let paceTimer = null; // pacing/backpressure wait
+    let nudged = false; // input just landed — skip the pacing wait once
+    let currentTargetId = ""; // page target this socket streams
+    let knownPageIds = new Set(); // page targets that existed at attach
+    let pendingTargetPath = null; // tab-follow: dial this next connect
+    let avoidTargetId = ""; // target whose captures just kept timing out
     const send = (method, params) => {
         const id = cmdId++;
         if (!closed && ws && ws.readyState === 1) {
@@ -117,16 +145,33 @@ export async function createCdpScreencast(opts) {
     const scheduleNext = () => {
         if (closed)
             return;
+        if (paceTimer) {
+            clearTimeout(paceTimer);
+            paceTimer = null;
+        }
         // Flow control: if the relay can't drain what we've already sent, don't capture
         // more — keep checking until it clears. This adapts fps to uplink bandwidth and
         // bounds latency (instead of buffering frames the network can't ship in time).
         const bp = opts.getBackpressure?.() ?? 0;
         if (bp > BACKPRESSURE_LIMIT_BYTES) {
-            setTimeout(scheduleNext, BACKPRESSURE_RECHECK_MS);
+            paceTimer = setTimeout(scheduleNext, BACKPRESSURE_RECHECK_MS);
             return;
         }
-        const interval = opts.getMinIntervalMs?.() ?? minIntervalMs;
-        setTimeout(poll, Math.max(0, interval - (Date.now() - shotStartedAt)));
+        const interval = nudged ? 0 : (opts.getMinIntervalMs?.() ?? minIntervalMs);
+        nudged = false;
+        paceTimer = setTimeout(poll, Math.max(0, interval - (Date.now() - shotStartedAt)));
+    };
+    // Takeover input just changed the page — capture its effect NOW instead of
+    // letting click-to-photon eat the remaining pacing wait. If a shot is already
+    // inflight, the flag makes the FOLLOWING shot immediate instead (the inflight
+    // one raced the input and may predate its effect). Backpressure still applies
+    // (scheduleNext re-checks it): capturing sooner can't help a jammed uplink.
+    const nudge = () => {
+        if (closed)
+            return;
+        nudged = true;
+        if (!inflight)
+            scheduleNext();
     };
     // A capture resolved (frame arrived) or was abandoned (watchdog) — advance the loop.
     const finishShot = () => {
@@ -145,6 +190,9 @@ export async function createCdpScreencast(opts) {
             consecutiveTimeouts = 0;
             inflight = false;
             clearPending();
+            // This target won't render (e.g. a window.open popup stuck in limbo) —
+            // steer the reconnect's discovery toward a different page if one exists.
+            avoidTargetId = currentTargetId;
             const dead = ws;
             ws = null;
             try {
@@ -168,44 +216,114 @@ export async function createCdpScreencast(opts) {
         }
         if (msg.method === "Runtime.bindingCalled" && msg.params?.name === CURSOR_BINDING) {
             try {
-                const p = JSON.parse(msg.params.payload ?? "");
-                if (typeof p.x === "number" && typeof p.y === "number")
-                    opts.onCursor?.(p.x, p.y, !!p.c);
+                const p = JSON.parse(String(msg.params.payload ?? ""));
+                if (typeof p.clip === "string")
+                    opts.onClipboard?.(p.clip);
+                else if (typeof p.x === "number" && typeof p.y === "number") {
+                    opts.onCursor?.(p.x, p.y, !!p.c, typeof p.s === "string" ? p.s : undefined);
+                }
             }
             catch { /* malformed report — skip */ }
             return;
         }
+        if (msg.method === "Page.javascriptDialogOpening") {
+            // A JS dialog BLOCKS the renderer: captureScreenshot hangs (endless
+            // watchdog reconnects) and the dialog itself is browser chrome — invisible
+            // in screenshots and unreachable by Input.*. Auto-resolve: accept alerts
+            // (only option) and beforeunload (let navigation continue); dismiss
+            // confirm/prompt (never answer "yes" on the page's behalf).
+            const type = String(msg.params?.type ?? "");
+            const accept = type === "alert" || type === "beforeunload";
+            send("Page.handleJavaScriptDialog", { accept });
+            opts.log?.info?.(`[sandbox-cdp] auto-${accept ? "accepted" : "dismissed"} ${type || "dialog"}: ${String(msg.params?.message ?? "").slice(0, 120)}`);
+            return;
+        }
+        if (msg.method === "Target.targetCreated") {
+            // A tab created AFTER attach (agent automation or a takeover click on a
+            // target=_blank link) is where the action moves — follow it. The initial
+            // setDiscoverTargets burst re-announces existing tabs; knownPageIds
+            // (seeded from /json at connect) filters those out.
+            const info = msg.params?.targetInfo;
+            if (info?.type === "page" && info.targetId && !knownPageIds.has(info.targetId)) {
+                knownPageIds.add(info.targetId);
+                followTarget(info.targetId);
+            }
+            return;
+        }
+        if (msg.method === "Target.targetDestroyed") {
+            const tid = msg.params?.targetId;
+            if (typeof tid === "string")
+                knownPageIds.delete(tid);
+            // Our own target closing also closes this ws → the reconnect path
+            // re-discovers whatever page remains.
+            return;
+        }
         if (msg.id === shotId) {
             const data = msg.result?.data;
             if (data && !closed) {
                 consecutiveTimeouts = 0;
+                avoidTargetId = ""; // captures flow again — stop steering discovery
                 opts.onFrame(Buffer.from(data, "base64"));
             }
             finishShot(); // keep the stream alive whether or not this shot returned data
         }
     };
-    /** Discover the page target's ws path (Host spoofed to localhost). */
-    async function discoverPagePath() {
+    /** List page targets (Host spoofed to localhost). webSocketDebuggerUrl is
+     *  ws://localhost/devtools/page/<id> — keep only the path and dial the real
+     *  container host. */
+    async function discoverPages() {
         const json = await cdpGet(host, port, "/json");
         const targets = JSON.parse(json);
-        const page = targets.find((t) => t.type === "page" && t.webSocketDebuggerUrl);
-        if (!page?.webSocketDebuggerUrl)
-            return null;
-        // webSocketDebuggerUrl is ws://localhost/devtools/page/<id> (Host we spoofed) —
-        // keep only the path and dial the real container host.
-        return new URL(page.webSocketDebuggerUrl).pathname;
+        return targets
+            .filter((t) => t.type === "page" && t.webSocketDebuggerUrl)
+            .map((t) => ({ id: t.id ?? "", path: new URL(t.webSocketDebuggerUrl).pathname, url: t.url ?? "" }));
+    }
+    /** Pick the page to attach: prefer targets with a committed document (an
+     *  empty url = a popup stuck in limbo whose captures never answer), and skip
+     *  the target whose captures just kept timing out when there's an alternative. */
+    function pickPage(pages) {
+        const usable = pages.filter((p) => p.id !== avoidTargetId);
+        const pool = usable.length > 0 ? usable : pages;
+        return pool.find((p) => p.url !== "") ?? pool[0];
     }
+    /** A new tab opened — the action moves there, so the view follows: tear down
+     *  the current socket and dial the new target. If it isn't connectable yet,
+     *  the reconnect loop falls back to first-page discovery. */
+    const followTarget = (targetId) => {
+        if (closed || targetId === currentTargetId)
+            return;
+        opts.log?.info?.(`[sandbox-cdp] new tab ${targetId} — following`);
+        pendingTargetPath = `/devtools/page/${targetId}`;
+        const dead = ws;
+        ws = null;
+        clearPending();
+        if (paceTimer) {
+            clearTimeout(paceTimer);
+            paceTimer = null;
+        }
+        inflight = false;
+        try {
+            dead?.close();
+        }
+        catch { /* ignore */ }
+        scheduleReconnect();
+    };
     /** Open (or re-open) the CDP socket and resume the frame loop. Returns false on failure. */
     async function connect() {
         if (closed)
             return false;
-        let pageWsPath;
+        let pageWsPath = pendingTargetPath;
+        pendingTargetPath = null;
         try {
-            pageWsPath = await discoverPagePath();
+            const pages = await discoverPages();
+            knownPageIds = new Set(pages.map((p) => p.id));
+            if (!pageWsPath)
+                pageWsPath = pickPage(pages)?.path ?? null;
         }
         catch (err) {
             opts.log?.warn?.(`[sandbox-cdp] target discovery failed: ${String(err)}`);
-            return false;
+            if (!pageWsPath)
+                return false; // a tab-follow dial can proceed without /json
         }
         if (!pageWsPath) {
             opts.log?.warn?.("[sandbox-cdp] no page target");
@@ -213,6 +331,7 @@ export async function createCdpScreencast(opts) {
         }
         if (closed)
             return false;
+        currentTargetId = pageWsPath.split("/").pop() ?? "";
         const sock = new WSImpl(`ws://${host}:${port}${pageWsPath}`, { headers: { Host: "localhost" } });
         sock.binaryType = "arraybuffer";
         ws = sock;
@@ -228,16 +347,28 @@ export async function createCdpScreencast(opts) {
             }
             opts.log?.info?.("[sandbox-cdp] CDP connected — capturing frames");
             send("Page.enable");
-            if (opts.onCursor) {
-                // Pointer probe: binding + install on future documents + on the one
-                // that's already loaded (addScriptToEvaluateOnNewDocument alone only
-                // covers navigations). Runtime.enable is required for bindingCalled.
+            // Activate the attached tab: captureScreenshot won't render a background
+            // target, so a followed (or rediscovered) tab must be brought to front.
+            send("Page.bringToFront");
+            // Tab-follow: get targetCreated/Destroyed events (browser-wide, delivered
+            // to this session). The initial re-announce burst is filtered by knownPageIds.
+            send("Target.setDiscoverTargets", { discover: true });
+            if (opts.onCursor || opts.onClipboard) {
+                // Pointer/clipboard probe: binding + install on future documents + on
+                // the one that's already loaded (addScriptToEvaluateOnNewDocument alone
+                // only covers navigations). Runtime.enable is required for bindingCalled.
                 send("Runtime.enable");
                 send("Runtime.addBinding", { name: CURSOR_BINDING });
                 send("Page.addScriptToEvaluateOnNewDocument", { source: CURSOR_PROBE_JS });
                 send("Runtime.evaluate", { expression: CURSOR_PROBE_JS });
             }
             clearPending();
+            // A pacing timer from the previous socket's loop may still be pending —
+            // cancel it so reconnect doesn't leave two interleaved poll loops.
+            if (paceTimer) {
+                clearTimeout(paceTimer);
+                paceTimer = null;
+            }
             inflight = false;
             poll();
         });
@@ -274,6 +405,59 @@ export async function createCdpScreencast(opts) {
         return null;
     const MOUSE_BUTTON = ["left", "middle", "right"];
     const BUTTONS = { left: 1, right: 2, middle: 4 };
+    // CDP bitmask of buttons the viewer currently holds. CDP defaults `buttons`
+    // to 0 on mouseMoved, so a press-drag-release used to reach the page as moves
+    // with NO button held (e.buttons === 0) — drag logic that checks button state
+    // saw the handle released the moment it moved. Threading the held state
+    // through every event makes dragging real for those pages too.
+    let heldButtons = 0;
+    // ── Timed gesture replay ───────────────────────────────────────────────
+    // The viewer stamps drag events (mousedown → moves → mouseup) with the ms
+    // offset from the gesture start. The network BUNCHES events (relay queues,
+    // congestion), so dispatching on arrival hands the page a robotic burst —
+    // mousedown + every move + mouseup nearly simultaneously. Slider captchas
+    // (闲鱼/淘宝 滑块) score trajectory TIMING and reject exactly that; a drag
+    // only ever succeeded when the network happened to deliver events smoothly.
+    // Replaying on the sender's original timeline reproduces the human gesture
+    // regardless of how the events traveled. If delivery falls behind, the
+    // anchor shifts forward so the NEXT events keep their original spacing
+    // (shape preserved, total delay = network delay).
+    const dragQ = [];
+    let dragTimer = null;
+    let dragBase = 0; // wallclock anchor: event with stamp t fires at dragBase + t
+    const pumpDrag = () => {
+        dragTimer = null;
+        while (dragQ.length) {
+            const head = dragQ[0];
+            const now = Date.now();
+            const due = dragBase + head.t;
+            if (due <= now) {
+                dragQ.shift();
+                head.fire();
+                continue;
+            }
+            dragTimer = setTimeout(pumpDrag, due - now);
+            return;
+        }
+    };
+    /** Dispatch a viewer-stamped event on the sender's timeline. */
+    const fireTimed = (t, isGestureStart, fire) => {
+        const now = Date.now();
+        // (Re-)anchor on a new gesture, or when we've fallen behind with nothing
+        // queued — this event plays immediately and later ones keep their spacing.
+        if (isGestureStart || (dragQ.length === 0 && dragBase + t <= now))
+            dragBase = now - t;
+        dragQ.push({ t, fire });
+        if (!dragTimer)
+            pumpDrag();
+    };
+    /** Unstamped event: keep ordering — tail-queue behind any pending gesture. */
+    const fireOrdered = (fire) => {
+        if (dragQ.length)
+            dragQ.push({ t: dragQ[dragQ.length - 1].t, fire });
+        else
+            fire();
+    };
     // app modifier byte (shift 0x01 / ctrl 0x02 / alt 0x04 / cmd 0x08) → CDP modifiers
     // (Alt 1 / Ctrl 2 / Meta 4 / Shift 8).
     const toCdpMods = (m) => (m & 0x01 ? 8 : 0) | (m & 0x02 ? 2 : 0) | (m & 0x04 ? 1 : 0) | (m & 0x08 ? 4 : 0);
@@ -282,61 +466,140 @@ export async function createCdpScreencast(opts) {
         Enter: ["Enter", 13], Backspace: ["Backspace", 8], Tab: ["Tab", 9], Escape: ["Escape", 27],
         Delete: ["Delete", 46], " ": ["Space", 32], ArrowLeft: ["ArrowLeft", 37], ArrowUp: ["ArrowUp", 38],
         ArrowRight: ["ArrowRight", 39], ArrowDown: ["ArrowDown", 40], Home: ["Home", 36], End: ["End", 35],
-        PageUp: ["PageUp", 33], PageDown: ["PageDown", 34],
+        PageUp: ["PageUp", 33], PageDown: ["PageDown", 34], Insert: ["Insert", 45],
+        F1: ["F1", 112], F2: ["F2", 113], F3: ["F3", 114], F4: ["F4", 115], F5: ["F5", 116], F6: ["F6", 117],
+        F7: ["F7", 118], F8: ["F8", 119], F9: ["F9", 120], F10: ["F10", 121], F11: ["F11", 122], F12: ["F12", 123],
     };
     const mouseClick = (x, y, button) => {
         const b = BUTTONS[button] ?? 1;
         send("Input.dispatchMouseEvent", { type: "mousePressed", x, y, button, buttons: b, clickCount: 1 });
         send("Input.dispatchMouseEvent", { type: "mouseReleased", x, y, button, buttons: 0, clickCount: 1 });
     };
+    // Pinch (the only multitouch gesture meaningful on a desktop page) → ctrl+wheel,
+    // which Chromium treats as zoom. The viewer's multitouch stream has no
+    // reconstructable touch phases, but spread deltas map cleanly.
+    let lastPinchSpread = 0;
+    let lastPinchAt = 0;
+    const handlePinch = (touches) => {
+        if (touches.length < 2) {
+            lastPinchSpread = 0;
+            return;
+        }
+        const x0 = Number(touches[0].x), y0 = Number(touches[0].y);
+        const x1 = Number(touches[1].x), y1 = Number(touches[1].y);
+        if (!isFinite(x0) || !isFinite(x1))
+            return;
+        const spread = Math.hypot(x1 - x0, y1 - y0);
+        const now = Date.now();
+        if (lastPinchSpread > 0 && now - lastPinchAt < 300) {
+            const delta = spread - lastPinchSpread;
+            if (Math.abs(delta) > 8) {
+                send("Input.dispatchMouseEvent", {
+                    type: "mouseWheel", x: (x0 + x1) / 2, y: (y0 + y1) / 2,
+                    deltaX: 0, deltaY: delta > 0 ? -53 : 53, modifiers: 2 /* Ctrl */,
+                });
+                lastPinchSpread = spread;
+            }
+        }
+        else {
+            lastPinchSpread = spread;
+        }
+        lastPinchAt = now;
+    };
     return {
         handleInput: (data) => {
             if (closed)
                 return;
             const action = String(data.action ?? data.type ?? "");
             const x = Number(data.x ?? 0), y = Number(data.y ?? 0);
+            // Page-changing input → fast-track the next capture. Bare moves are too
+            // frequent and rarely change pixels — EXCEPT while a button is held
+            // (dragging a slider handle), when every move visibly moves the page and
+            // the viewer needs prompt frames to steer by.
+            if ((action !== "mousemove" && action !== "move") || heldButtons !== 0)
+                nudge();
+            const ts = Number(data.t);
+            const timed = Number.isFinite(ts);
+            const viaTimeline = (isStart, fire) => {
+                if (timed)
+                    fireTimed(ts, isStart, fire);
+                else
+                    fireOrdered(fire);
+            };
             if (action === "mousemove" || action === "move")
-                send("Input.dispatchMouseEvent", { type: "mouseMoved", x, y });
+                viaTimeline(false, () => send("Input.dispatchMouseEvent", { type: "mouseMoved", x, y, buttons: heldButtons }));
             else if (action === "click")
-                mouseClick(x, y, "left");
+                fireOrdered(() => mouseClick(x, y, "left"));
             else if (action === "rightclick")
-                mouseClick(x, y, "right");
+                fireOrdered(() => mouseClick(x, y, "right"));
             else if (action === "middleclick")
-                mouseClick(x, y, "middle");
+                fireOrdered(() => mouseClick(x, y, "middle"));
             else if (action === "mousedown" || action === "down") {
                 const b = MOUSE_BUTTON[Number(data.button ?? 0)] ?? "left";
-                send("Input.dispatchMouseEvent", { type: "mousePressed", x, y, button: b, buttons: BUTTONS[b], clickCount: 1 });
+                viaTimeline(true, () => { heldButtons |= BUTTONS[b]; send("Input.dispatchMouseEvent", { type: "mousePressed", x, y, button: b, buttons: heldButtons, clickCount: 1 }); });
             }
             else if (action === "mouseup" || action === "up") {
                 const b = MOUSE_BUTTON[Number(data.button ?? 0)] ?? "left";
-                send("Input.dispatchMouseEvent", { type: "mouseReleased", x, y, button: b, buttons: 0, clickCount: 1 });
+                viaTimeline(false, () => { heldButtons &= ~BUTTONS[b]; send("Input.dispatchMouseEvent", { type: "mouseReleased", x, y, button: b, buttons: heldButtons, clickCount: 1 }); });
             }
             else if (action === "scroll" || action === "wheel")
-                send("Input.dispatchMouseEvent", { type: "mouseWheel", x, y, deltaX: 0, deltaY: -Number(data.delta ?? data.deltaY ?? data.dy ?? 0) * 30 });
+                fireOrdered(() => send("Input.dispatchMouseEvent", { type: "mouseWheel", x, y, deltaX: 0, deltaY: -Number(data.delta ?? data.deltaY ?? data.dy ?? 0) * 30 }));
+            // Paste from the viewer: real text insertion into the focused element —
+            // handles IME/emoji/CJK that per-key synthesis can't.
+            else if (action === "insertText" && typeof data.text === "string")
+                send("Input.insertText", { text: data.text.slice(0, 65536) });
+            else if (action === "multitouch" && Array.isArray(data.touches))
+                handlePinch(data.touches);
         },
         handleBinaryInput: (buf) => {
             if (closed || buf.length < 1)
                 return;
             const code = buf[0];
+            // Same fast-track as handleInput: anything but a bare move (0x01) / relative
+            // move (0x02, unmapped) is about to change the page — and a move WITH a
+            // button held is a drag, which changes the page too.
+            if ((code !== 0x01 && code !== 0x02) || heldButtons !== 0)
+                nudge();
             const rx = () => buf.readInt16LE(1), ry = () => buf.readInt16LE(3);
-            if (code === 0x01 && buf.length >= 5)
-                send("Input.dispatchMouseEvent", { type: "mouseMoved", x: rx(), y: ry() });
-            else if (code === 0x03 && buf.length >= 5)
-                mouseClick(rx(), ry(), "left");
-            else if (code === 0x04 && buf.length >= 5)
-                mouseClick(rx(), ry(), "right");
-            else if (code === 0x0A && buf.length >= 5)
-                mouseClick(rx(), ry(), "middle");
+            // Optional trailing u16: ms offset from the gesture start (drag events).
+            // Mouse events are 5 bytes; 7+ means the viewer stamped a timeline.
+            const isMouse = code === 0x01 || (code >= 0x03 && code <= 0x06) || (code >= 0x08 && code <= 0x0C);
+            const ts = isMouse && code !== 0x07 && buf.length >= 7 ? buf.readUInt16LE(5) : null;
+            const viaTimeline = (isStart, fire) => {
+                if (ts !== null)
+                    fireTimed(ts, isStart, fire);
+                else
+                    fireOrdered(fire);
+            };
+            if (code === 0x01 && buf.length >= 5) {
+                const x = rx(), y = ry();
+                viaTimeline(false, () => send("Input.dispatchMouseEvent", { type: "mouseMoved", x, y, buttons: heldButtons }));
+            }
+            else if (code === 0x03 && buf.length >= 5) {
+                const x = rx(), y = ry();
+                fireOrdered(() => mouseClick(x, y, "left"));
+            }
+            else if (code === 0x04 && buf.length >= 5) {
+                const x = rx(), y = ry();
+                fireOrdered(() => mouseClick(x, y, "right"));
+            }
+            else if (code === 0x0A && buf.length >= 5) {
+                const x = rx(), y = ry();
+                fireOrdered(() => mouseClick(x, y, "middle"));
+            }
             else if ((code === 0x05 || code === 0x08 || code === 0x0B) && buf.length >= 5) {
                 const b = code === 0x08 ? "right" : code === 0x0B ? "middle" : "left";
-                send("Input.dispatchMouseEvent", { type: "mousePressed", x: rx(), y: ry(), button: b, buttons: BUTTONS[b], clickCount: 1 });
+                const x = rx(), y = ry();
+                viaTimeline(true, () => { heldButtons |= BUTTONS[b]; send("Input.dispatchMouseEvent", { type: "mousePressed", x, y, button: b, buttons: heldButtons, clickCount: 1 }); });
             }
             else if ((code === 0x06 || code === 0x09 || code === 0x0C) && buf.length >= 5) {
                 const b = code === 0x09 ? "right" : code === 0x0C ? "middle" : "left";
-                send("Input.dispatchMouseEvent", { type: "mouseReleased", x: rx(), y: ry(), button: b, buttons: 0, clickCount: 1 });
+                const x = rx(), y = ry();
+                viaTimeline(false, () => { heldButtons &= ~BUTTONS[b]; send("Input.dispatchMouseEvent", { type: "mouseReleased", x, y, button: b, buttons: heldButtons, clickCount: 1 }); });
             }
             else if (code === 0x07 && buf.length >= 6) {
-                send("Input.dispatchMouseEvent", { type: "mouseWheel", x: rx(), y: ry(), deltaX: 0, deltaY: -buf.readInt8(5) * 30 });
+                const x = rx(), y = ry(), d = buf.readInt8(5);
+                fireOrdered(() => send("Input.dispatchMouseEvent", { type: "mouseWheel", x, y, deltaX: 0, deltaY: -d * 30 }));
             }
             else if ((code === 0x10 || code === 0x11 || code === 0x12) && buf.length >= 3) {
                 const mod = buf[1], keyLen = buf[2];
@@ -345,7 +608,9 @@ export async function createCdpScreencast(opts) {
                 const isDown = code === 0x10 || code === 0x12;
                 const hasCombo = (mod & 0x0e) !== 0; // ctrl/alt/cmd held
                 const named = KEYMAP[key];
-                if (!hasCombo && key.length === 1) {
+                // Code-POINT count, not UTF-16 length: emoji/astral CJK are length 2 in
+                // JS and would otherwise fall into the named-key branch as garbage.
+                if (!hasCombo && Array.from(key).length === 1) {
                     // Printable char → 'char' inserts the text (already reflects shift).
                     if (isDown)
                         send("Input.dispatchKeyEvent", { type: "char", text: key, key, modifiers: mods });
@@ -370,6 +635,15 @@ export async function createCdpScreencast(opts) {
                 clearTimeout(reconnectTimer);
                 reconnectTimer = null;
             }
+            if (paceTimer) {
+                clearTimeout(paceTimer);
+                paceTimer = null;
+            }
+            if (dragTimer) {
+                clearTimeout(dragTimer);
+                dragTimer = null;
+            }
+            dragQ.length = 0;
             clearPending();
             try {
                 send("Page.stopScreencast");
@@ -383,4 +657,73 @@ export async function createCdpScreencast(opts) {
         },
     };
 }
+const sharedCasts = new Map();
+export async function acquireCdpScreencast(opts, viewerId, hooks) {
+    const key = `${opts.host}:${opts.port}`;
+    let entry = sharedCasts.get(key);
+    if (!entry) {
+        entry = { viewers: new Map(), session: null, starting: null };
+        sharedCasts.set(key, entry);
+    }
+    entry.viewers.set(viewerId, hooks);
+    if (!entry.session && !entry.starting) {
+        const e = entry;
+        const each = (f) => { for (const v of e.viewers.values())
+            f(v); };
+        const agg = (pickValue, pick, dflt) => {
+            let acc;
+            for (const v of e.viewers.values()) {
+                const x = pickValue(v);
+                if (x !== undefined)
+                    acc = acc === undefined ? x : pick(acc, x);
+            }
+            return acc ?? dflt;
+        };
+        e.starting = createCdpScreencast({
+            host: opts.host,
+            port: opts.port,
+            quality: opts.quality,
+            minIntervalMs: opts.minIntervalMs,
+            log: opts.log,
+            onFrame: (jpeg) => each((v) => v.onFrame(jpeg)),
+            onCursor: (x, y, c, s) => each((v) => v.onCursor?.(x, y, c, s)),
+            onClipboard: (t) => each((v) => v.onClipboard?.(t)),
+            getQuality: () => agg((v) => v.getQuality?.(), Math.max, opts.quality ?? 55),
+            getMinIntervalMs: () => agg((v) => v.getMinIntervalMs?.(), Math.min, opts.minIntervalMs ?? 60),
+            getBackpressure: () => agg((v) => v.getBackpressure?.(), Math.min, 0),
+        }).then((s) => {
+            e.session = s;
+            e.starting = null;
+            if (!s)
+                sharedCasts.delete(key);
+            return s;
+        });
+    }
+    const session = entry.session ?? (await entry.starting);
+    // Released (or init failed) while we were starting up.
+    if (!session || !entry.viewers.has(viewerId)) {
+        if (!session)
+            entry.viewers.delete(viewerId);
+        return null;
+    }
+    return session;
+}
+export function releaseCdpScreencast(host, port, viewerId) {
+    const key = `${host}:${port}`;
+    const entry = sharedCasts.get(key);
+    if (!entry)
+        return;
+    entry.viewers.delete(viewerId);
+    if (entry.viewers.size > 0)
+        return;
+    sharedCasts.delete(key);
+    const close = (s) => { try {
+        s?.close();
+    }
+    catch { /* ignore */ } };
+    if (entry.session)
+        close(entry.session);
+    else if (entry.starting)
+        void entry.starting.then(close);
+}
 //# sourceMappingURL=sandboxScreenCdp.js.map