@xbrowser/cli 1.9.8 → 1.9.9

package/dist/daemon-main.js

@@ -2,10 +2,12 @@ import {
   getPluginLoader
 } from "./chunk-PIWNMC36.js";
 import {
-  getDaemonConfig,
-  getDaemonProcessStatus,
   version
-} from "./chunk-24SY6PE5.js";
+} from "./chunk-43TEMG4U.js";
+import {
+  buildViewerUrl
+} from "./chunk-TZPKFUBT.js";
+import "./chunk-CG3D3CHY.js";
 import {
   commandLogStore,
   networkStore,
@@ -13,7 +15,7 @@ import {
 } from "./chunk-VEDJ5XSQ.js";
 import {
   SessionRecorder
-} from "./chunk-VEWTHYDG.js";
+} from "./chunk-5UGR6MUK.js";
 import {
   closeEphemeralContext,
   closeSessionByName,
@@ -29,8 +31,8 @@ import {
   resolveLaunchOpts,
   saveSessionDiskMeta,
   setActivePage
-} from "./chunk-ENCEMM7Z.js";
-import "./chunk-GM3HWQ5U.js";
+} from "./chunk-6OZWKXSW.js";
+import "./chunk-RRBXV7KE.js";
 import "./chunk-TNEN6VQ2.js";
 import {
   errMsg
@@ -38,10 +40,10 @@ import {
 import {
   detectAntiBot,
   formatDetectionMessage
-} from "./chunk-DPJNCMLC.js";
+} from "./chunk-INTQPBYF.js";
 import {
   ScreencastCapturer
-} from "./chunk-7ZDWM6T2.js";
+} from "./chunk-BNO7OKO4.js";
 import "./chunk-KFQGP6VL.js";
 
 // src/daemon/daemon-main.ts
@@ -5825,23 +5827,11 @@ function describeSelector(strategy, value, name) {
 // src/context.ts
 function attachDetectAntiBot(ctx) {
   ctx.detectAntiBot = async (page, config) => {
-    const { detectAntiBot: detectAntiBot2 } = await import("./anti-bot-MCVM6IFB.js");
+    const { detectAntiBot: detectAntiBot2 } = await import("./anti-bot-DR56Y63V.js");
     return detectAntiBot2(page, config);
   };
 }
 
-// src/utils/viewer-url.ts
-function buildViewerUrl(sessionName = "default") {
-  try {
-    const status = getDaemonProcessStatus();
-    if (!status.running) return void 0;
-    const port = status.port || getDaemonConfig().basePort;
-    return `http://localhost:${port}/preview/${encodeURIComponent(sessionName)}`;
-  } catch {
-    return void 0;
-  }
-}
-
 // src/plugin/login-guard.ts
 async function checkPluginLoginRequired(options) {
   const { site, command, commandName, ctx, page, sessionName } = options;
@@ -6575,7 +6565,7 @@ async function executeCommand(commandName, params, sessionName = "default", extr
   }
   let targetPageOverride = null;
   if (_target && extraOpts?.cdpEndpoint) {
-    const { findTargetPage } = await import("./browser-43YXUIML.js");
+    const { findTargetPage } = await import("./browser-RHWUAMTB.js");
     targetPageOverride = await findTargetPage(extraOpts.cdpEndpoint, _target);
     if (!targetPageOverride) {
       return errorResult(`Target "${_target}" not found. Use 'xbrowser targets --cdp ${extraOpts.cdpEndpoint}' to list available pages.`);
@@ -6592,7 +6582,7 @@ async function executeCommand(commandName, params, sessionName = "default", extr
     params = result.data;
   }
   if (command.scope !== "cli" && !process.env.XBROWSER_DAEMON_WORKER) {
-    const { forwardExec } = await import("./daemon-client-4HJENICO.js");
+    const { forwardExec } = await import("./daemon-client-GKEPT4NY.js");
     const result = await forwardExec(commandName, params, sessionName, extraOpts?.cdpEndpoint);
     if (result) return result;
   }
@@ -6780,6 +6770,26 @@ async function executeCommand(commandName, params, sessionName = "default", extr
     const end = Date.now();
     const duration = end - start;
     const errorMessage = errMsg(err);
+    if (session?.page && process.env.XBROWSER_RECOVERY && !extraOpts?._recoveryAttempted) {
+      try {
+        const { attemptRecovery } = await import("./recovery-EF33LKRJ.js");
+        const recovery = await attemptRecovery(
+          session.page,
+          sessionName,
+          commandName,
+          errorMessage
+        );
+        if (recovery.recovered) {
+          const retry = await executeCommand(commandName, params, sessionName, {
+            ...extraOpts,
+            skipCleanup: true,
+            _recoveryAttempted: true
+          });
+          return retry;
+        }
+      } catch {
+      }
+    }
     if (session) {
       streamCommandEvent(session.id, {
         sessionId: session.id,
@@ -7612,6 +7622,7 @@ var PlaybackEngine = class _PlaybackEngine {
 };
 
 // src/daemon/rpc-handlers.ts
+import { TipCollector as TipCollector3 } from "@dyyz1993/xcli-core";
 var activeRecorders = /* @__PURE__ */ new Map();
 var replayResumeResolvers = /* @__PURE__ */ new Map();
 function createRPCHandler() {
@@ -7640,6 +7651,8 @@ function createRPCHandler() {
         // ── Command execution ──
         case "exec":
           return handleExec(params);
+        case "plugin:exec":
+          return handlePluginExec(params);
         case "chain":
           return handleChain(params);
         case "agent:observe":
@@ -7705,10 +7718,116 @@ function createRPCHandler() {
     {
       setPreviewWS(ws) {
         previewWS = ws;
+      },
+      async handleReconnect(sessionId) {
+        if (previewWS) {
+          await previewWS.reconnectSession(sessionId);
+        }
       }
     }
   );
   return handler;
+  async function handlePluginExec(params) {
+    const command = params.command;
+    const cmdParams = params.params || {};
+    const sessionName = params.session || "default";
+    const cdp = params.cdpEndpoint;
+    const dotIdx = command.indexOf(".");
+    if (dotIdx < 0) {
+      return { success: false, data: null, message: `Invalid plugin command format: ${command}` };
+    }
+    const pluginName = command.substring(0, dotIdx);
+    const subCommand = command.substring(dotIdx + 1);
+    const loader = await getPluginLoader();
+    const site = loader.getCore().loader.getSite(pluginName);
+    if (!site) {
+      return { success: false, data: null, message: `Plugin "${pluginName}" not found` };
+    }
+    const cmdEntry = site.getCommand(subCommand);
+    if (!cmdEntry) {
+      return { success: false, data: null, message: `Unknown command "${subCommand}" for plugin "${pluginName}"` };
+    }
+    const needsBrowser = cmdEntry.scope === "page" || cmdEntry.scope === "browser";
+    let session;
+    if (needsBrowser) {
+      session = findSession(sessionName);
+      if (!session) {
+        let endpoint;
+        if (cdp) {
+          try {
+            endpoint = await resolveCDPEndpoint(cdp);
+          } catch {
+            endpoint = cdp;
+          }
+        } else {
+          try {
+            endpoint = await resolveCDPEndpoint("auto");
+          } catch {
+            endpoint = void 0;
+          }
+        }
+        session = await createSession(sessionName, void 0, endpoint ? { cdpEndpoint: endpoint } : {});
+        console.log(`[PLUGIN] Created session "${sessionName}" for plugin "${pluginName}.${subCommand}"`);
+      }
+    }
+    const ctx = {
+      args: [],
+      options: {},
+      cwd: process.cwd(),
+      page: needsBrowser ? session.page : null,
+      browser: needsBrowser ? session.context.browser() : null,
+      browserContext: needsBrowser ? session.context : null,
+      sessionId: needsBrowser ? session.id : "",
+      cdpEndpoint: cdp || (needsBrowser ? session?.cdpEndpoint : void 0),
+      storage: getPluginStorage(pluginName),
+      output: { mode: "text", showTips: true, color: true, emoji: true },
+      error: (msg) => {
+        throw new Error(msg);
+      },
+      config: {},
+      site,
+      cliName: "xbrowser",
+      waitForHuman: async () => {
+        return { solved: false, timedOut: true };
+      },
+      tips: new TipCollector3()
+    };
+    attachDetectAntiBot(ctx);
+    const loginGuard = await checkPluginLoginRequired({
+      site,
+      command: cmdEntry,
+      commandName: subCommand,
+      ctx,
+      page: needsBrowser ? session?.page : null,
+      sessionName
+    });
+    if (!loginGuard.ok) {
+      return { success: false, data: loginGuard.data ?? null, message: loginGuard.message };
+    }
+    try {
+      const result = await cmdEntry.handler(cmdParams, ctx);
+      return result;
+    } catch (err) {
+      const errorMessage = errMsg(err);
+      const { attemptRecovery } = await import("./recovery-EF33LKRJ.js");
+      const recovery = await attemptRecovery(
+        session?.page,
+        sessionName,
+        `${pluginName}.${subCommand}`,
+        errorMessage,
+        previewWS
+      );
+      if (recovery.recovered) {
+        try {
+          const retryResult = await cmdEntry.handler(cmdParams, ctx);
+          return retryResult;
+        } catch (retryErr) {
+          return { success: false, data: null, message: `Retry failed: ${errMsg(retryErr)}` };
+        }
+      }
+      return { success: false, data: null, message: errorMessage };
+    }
+  }
   function registerSessionIfNew(sessionName) {
     if (!previewWS) return;
     const session = findSession(sessionName);
@@ -7721,6 +7840,22 @@ function createRPCHandler() {
     const cdp = params.cdpEndpoint;
     const url = params.url;
     let session;
+    const existing = findSession(name);
+    if (existing) {
+      if (url && existing.page.url() !== url) {
+        await existing.page.goto(url, { waitUntil: "domcontentloaded", timeout: 15e3 }).catch(() => {
+        });
+      }
+      saveSessionDiskMeta(name, {
+        id: existing.id,
+        name: existing.name,
+        url: existing.page.url(),
+        createdAt: existing.createdAt,
+        cdpEndpoint: existing.cdpEndpoint
+      });
+      if (previewWS) previewWS.registerSession(existing.name, existing.page);
+      return existing.id;
+    }
     if (cdp) {
       const endpoint = await resolveCDPEndpoint(cdp);
       session = await createSession(name, url, { cdpEndpoint: endpoint });
@@ -8045,7 +8180,23 @@ function createRPCHandler() {
     }
     try {
       const recorder = new SessionRecorder(session.context, session.page, sessionName);
+      if (url) {
+        try {
+          await session.page.goto(url, { waitUntil: "domcontentloaded", timeout: 3e4 });
+        } catch {
+        }
+        await new Promise((r) => setTimeout(r, 1500));
+      }
       await recorder.start(url, { stream });
+      if (recorder.injectionFailed) {
+        await recorder.stop();
+        activeRecorders.delete(sessionName);
+        return {
+          ok: false,
+          error: "Action signal script injection failed \u2014 user actions will NOT be recorded. This usually means the page sandbox blocked Runtime.evaluate, or the injected script has a syntax error. Check the daemon log for details.",
+          hint: "Try: 1) reload the target page in Chrome, 2) restart daemon, 3) check daemon log for the specific error."
+        };
+      }
       activeRecorders.set(sessionName, recorder);
       return { ok: true, session: sessionName, startUrl: url || session.page.url() };
     } catch (e) {
@@ -8197,7 +8348,7 @@ function createRPCHandler() {
     if (isNewFormat) {
       try {
         const replayErrors = [];
-        const { SessionReplayer } = await import("./session-replayer-V4MP6M6I.js");
+        const { SessionReplayer } = await import("./session-replayer-LJUC4TI7.js");
         const replayer = new SessionReplayer({
           page: session.page,
           stepDelay: slowMo * 500,
@@ -8281,10 +8432,37 @@ import { EventEmitter as EventEmitter2 } from "events";
 // src/stream/frame-processor.ts
 import sharp from "sharp";
 var STATE_CONFIGS = {
-  user_interacting: { format: "jpeg", quality: 85, maxFps: 60, scale: 0.8 },
-  screen_moving: { format: "jpeg", quality: 85, maxFps: 8, scale: 0.8 },
-  static: { format: "jpeg", quality: 95, maxFps: 2, scale: 1 }
+  // Full-screen: aggressive compression for speed
+  // user_interacting: low quality + downscale — prioritize FPS over clarity
+  user_interacting: { format: "jpeg", quality: 40, maxFps: 30, scale: 0.6 },
+  // screen_moving: page is animating but user is NOT operating.
+  // Keep quality close to interacting to avoid visible flicker on state change.
+  screen_moving: { format: "jpeg", quality: 45, maxFps: 2, scale: 0.7 },
+  // static: highest quality — user is reading, bandwidth is not a concern
+  static: { format: "jpeg", quality: 95, maxFps: 1, scale: 1 }
 };
+function adjustConfigForSize(config, frameWidth, frameHeight, fullViewportWidth, fullViewportHeight) {
+  const framePixels = frameWidth * frameHeight;
+  const fullPixels = fullViewportWidth * fullViewportHeight;
+  const ratio = fullPixels > 0 ? framePixels / fullPixels : 1;
+  if (ratio < 0.3) {
+    return {
+      ...config,
+      quality: Math.min(config.quality + 40, 90),
+      // boost quality
+      scale: Math.max(config.scale, 0.9)
+      // don't downscale
+    };
+  }
+  if (ratio < 0.6) {
+    return {
+      ...config,
+      quality: Math.min(config.quality + 20, 80),
+      scale: Math.max(config.scale, 0.7)
+    };
+  }
+  return config;
+}
 var StreamStateManager = class {
   currentState = "static";
   isUserInteracting = false;
@@ -8293,9 +8471,11 @@ var StreamStateManager = class {
   frameInterval = Infinity;
   onStateChange = null;
   staticTimer = null;
-  USER_INTERACTION_TIMEOUT_MS = 1e3;
+  USER_INTERACTION_TIMEOUT_MS = 2e3;
+  // 1s → 2s: linger in interacting longer
   SCREEN_MOVING_THRESHOLD_MS = 1e3;
-  STATIC_TIMEOUT_MS = 1500;
+  STATIC_TIMEOUT_MS = 3e3;
+  // 1.5s → 3s: don't rush to static
   setStateChangeCallback(callback) {
     this.onStateChange = callback;
   }
@@ -8404,12 +8584,25 @@ var FrameProcessor = class {
     }
     let processed = sharp(buffer);
     if (cropConfig) {
-      processed = processed.extract({
-        left: Math.round(cropConfig.x),
-        top: Math.round(cropConfig.y),
-        width: Math.round(cropConfig.width),
-        height: Math.round(cropConfig.height)
-      });
+      const meta = await processed.metadata();
+      const actualW = meta.width ?? viewportWidth ?? 1;
+      const actualH = meta.height ?? viewportHeight ?? 1;
+      const refW = viewportWidth ?? actualW;
+      const refH = viewportHeight ?? actualH;
+      const scaleX = actualW / refW;
+      const scaleY = actualH / refH;
+      const cropLeft = Math.round(cropConfig.x * scaleX);
+      const cropTop = Math.round(cropConfig.y * scaleY);
+      const cropW = Math.min(Math.round(cropConfig.width * scaleX), actualW - cropLeft);
+      const cropH = Math.min(Math.round(cropConfig.height * scaleY), actualH - cropTop);
+      if (cropW > 0 && cropH > 0 && cropLeft >= 0 && cropTop >= 0) {
+        processed = processed.extract({
+          left: cropLeft,
+          top: cropTop,
+          width: cropW,
+          height: cropH
+        });
+      }
     }
     if (needsResize) {
       const newWidth = Math.round((viewportWidth ?? 0) * config.scale);
@@ -8558,11 +8751,20 @@ var StreamCoordinator = class {
     const crop = this.sessionCrops.get(sessionId);
     const cropConfig = crop ? crop.box : void 0;
     const effectiveViewport = crop ? { width: crop.box.width, height: crop.box.height } : frameViewport;
-    const processedBuffer = await this.frameProcessor.process(
-      frameData,
+    const adjustedConfig = adjustConfigForSize(
       config,
       effectiveViewport.width,
       effectiveViewport.height,
+      frameViewport.width,
+      frameViewport.height
+    );
+    const processedBuffer = await this.frameProcessor.process(
+      frameData,
+      adjustedConfig,
+      // Pass the ORIGINAL viewport (not cropped) so crop coordinates
+      // can be scaled correctly from viewport space to frame pixel space.
+      crop ? frameViewport.width : effectiveViewport.width,
+      crop ? frameViewport.height : effectiveViewport.height,
       cropConfig
     );
     const header = Buffer.from(JSON.stringify({
@@ -8734,7 +8936,18 @@ var ElementMonitor = class {
         }
         return results;
       });
-      const views = elements.map((e, i) => ({
+      const TOLERANCE_PX = 10;
+      const deduped = [];
+      const isSameSize = (a, b) => Math.abs(a.width - b.width) <= TOLERANCE_PX && Math.abs(a.height - b.height) <= TOLERANCE_PX;
+      const sorted = [...elements].sort((a, b) => a.rect.width * a.rect.height - b.rect.width * b.rect.height);
+      for (const el of sorted) {
+        const dupe = deduped.some(
+          (d) => isSameSize(d.rect, el.rect) && Math.abs(d.rect.x - el.rect.x) <= TOLERANCE_PX && Math.abs(d.rect.y - el.rect.y) <= TOLERANCE_PX
+        );
+        if (!dupe) deduped.push(el);
+      }
+      deduped.sort((a, b) => b.rect.width * b.rect.height - a.rect.width * a.rect.height);
+      const views = deduped.map((e, i) => ({
         id: "el-" + i + "-" + (e.id || e.tag),
         label: e.id || e.cls || e.tag,
         rect: e.rect
@@ -8793,10 +9006,10 @@ var SessionManager = class extends EventEmitter {
     this.screencasts.set(sessionId, {
       capturer: new ScreencastCapturer({
         interval: options?.interval ?? 100,
-        quality: options?.quality ?? 80,
+        quality: options?.quality ?? 40,
         type: options?.type ?? "jpeg",
-        width: options?.width ?? 1920,
-        height: options?.height ?? 1080
+        width: options?.width ?? 1024,
+        height: options?.height ?? 576
       }),
       page,
       clientCount: 0
@@ -8937,6 +9150,8 @@ var SessionManager = class extends EventEmitter {
       this.resetStaticSnapshotTimer(sessionId);
     });
     await sc.capturer.startCapture(sc.page, sessionId, onFrame);
+    this.streamCoordinator.takeStaticSnapshot(sessionId, sc.page, sc.clientCount).catch(() => {
+    });
   }
   async stopCapturer(sessionId) {
     const sc = this.screencasts.get(sessionId);
@@ -9387,6 +9602,15 @@ var WSServer = class extends EventEmitter2 {
   registerSession(sessionId, page, options) {
     this.sessionManager.registerSession(sessionId, page, options);
   }
+  /** Restart screencast for a session — used by viewer reconnect button. */
+  async reconnectSession(sessionId) {
+    try {
+      await this.sessionManager.stopCapturer(sessionId);
+      await new Promise((r) => setTimeout(r, 500));
+      await this.sessionManager.startCapturer(sessionId);
+    } catch {
+    }
+  }
   unregisterSession(sessionId) {
     this.sessionManager.unregisterSession(sessionId);
   }
@@ -9409,7 +9633,7 @@ var WSServer = class extends EventEmitter2 {
       });
     }
     this.sessionManager.incrementClientCount(sessionId);
-    if (this.streamCoordinator.getLastFrameViewport() && this.sessionManager.isCapturerActive(sessionId)) {
+    if (this.streamCoordinator.getLastFrameViewport()) {
       this.streamCoordinator.replayLastFrame(sessionId).catch(() => {
       });
     }
@@ -9419,7 +9643,6 @@ var WSServer = class extends EventEmitter2 {
     if (count === 0 && this.sessionManager.isCapturerActive(sessionId)) {
       this.sessionManager.stopCapturer(sessionId).then(() => {
         this.streamCoordinator.resetFrameRate();
-        this.streamCoordinator.clearLastFrame();
         this.emit("screencast-stopped", sessionId);
       }).catch(() => {
         this.emit("screencast-stopped", sessionId);
@@ -9595,6 +9818,31 @@ var WSServer = class extends EventEmitter2 {
       this.emit("human-solved", { sessionId: sessionId ?? null, clientId });
       return;
     }
+    if (msg.type === "reconnect") {
+      this.emit("reconnect-request", { sessionId: sessionId ?? null, clientId });
+      return;
+    }
+    if (msg.type === "health_ping") {
+      this.sendToClient(clientId, { type: "health_pong", ts: msg.ts });
+      return;
+    }
+    if (msg.type === "snapshot_request") {
+      const page2 = sessionId ? this.sessionManager.getPageForSession(sessionId) : void 0;
+      if (!page2) {
+        this.sendToClient(clientId, { type: "snapshot_result", data: null, error: "no page" });
+        return;
+      }
+      const fmt = msg.format === "webp" ? "webp" : "png";
+      page2.screenshot({ type: fmt, quality: fmt === "webp" ? msg.quality ?? 90 : void 0 }).then((buf) => {
+        this.sendToClient(clientId, {
+          type: "snapshot_result",
+          data: { data: buf.toString("base64"), format: fmt }
+        });
+      }).catch(() => {
+        this.sendToClient(clientId, { type: "snapshot_result", data: null, error: "screenshot failed" });
+      });
+      return;
+    }
     const ctx = {
       clientId,
       sessionId,
@@ -9681,7 +9929,7 @@ function alignHTML(sessionId, _host) {
 html,body{height:100%;overflow:hidden;background:#000}
 .viewport{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
 .viewport img#screen{display:block;width:100%;height:100%;object-fit:contain;background:#111}
-.crosshair{position:fixed;pointer-events:none;z-index:9999;width:16px;height:16px;border-radius:50%;background:rgba(255,0,0,0.8);border:2px solid #fff;transform:translate(-50%,-50%);display:none;box-shadow:0 0 6px rgba(255,0,0,0.6);transition:left 0.03s,top 0.03s}
+.crosshair{position:fixed;pointer-events:none;z-index:9999;width:16px;height:16px;border-radius:50%;background:rgba(255,0,0,0.8);border:2px solid #fff;transform:translate(-50%,-50%);display:none;box-shadow:0 0 6px rgba(255,0,0,0.6)}
 .coord{position:fixed;top:8px;left:8px;z-index:10000;font:12px/1.6 monospace;color:#0f0;background:rgba(0,0,0,0.7);padding:4px 8px;border-radius:4px;pointer-events:none;white-space:pre}
 .grid{position:fixed;pointer-events:none;z-index:9998;top:0;left:0;right:0;bottom:0;display:none}
 </style></head><body>
@@ -9773,9 +10021,17 @@ viewportEl.addEventListener('mousemove',function(e){
   var r=viewerToRemote(e.clientX,e.clientY);
   var rx=Math.max(0,Math.min(remoteViewport.width,r.x));
   var ry=Math.max(0,Math.min(remoteViewport.height,r.y));
+  // \u672C\u5730\u5149\u6807\u7ACB\u5373\u66F4\u65B0\uFF08\u96F6\u5EF6\u8FDF\u53CD\u9988\uFF09
   setCrosshair(rx,ry);
-  if(e.buttons>0&&ws&&ws.readyState===1)ws.send(JSON.stringify({type:'input_mouse',action:'move',x:rx,y:ry}));
+  // \u8282\u6D41\uFF1A\u6700\u591A\u6BCF 30ms \u53D1\u4E00\u6B21 move\uFF0C\u907F\u514D WS \u6D88\u606F\u6D2A\u6CDB
+  if(!moveThrottled&&ws&&ws.readyState===1){
+    moveThrottled=true;
+    var action=e.buttons>0?'move':'hover';
+    ws.send(JSON.stringify({type:'input_mouse',action:action,x:rx,y:ry}));
+    setTimeout(function(){moveThrottled=false;},30);
+  }
 });
+var moveThrottled=false;
 viewportEl.addEventListener('mousedown',function(e){var r=viewerToRemote(e.clientX,e.clientY);setCrosshair(r.x,r.y);if(ws&&ws.readyState===1)ws.send(JSON.stringify({type:'input_mouse',action:'down',x:r.x,y:r.y}));});
 viewportEl.addEventListener('mouseup',function(e){var r=viewerToRemote(e.clientX,e.clientY);setCrosshair(r.x,r.y);if(ws&&ws.readyState===1)ws.send(JSON.stringify({type:'input_mouse',action:'up',x:r.x,y:r.y}));});
 viewportEl.addEventListener('wheel',function(e){e.preventDefault();if(ws&&ws.readyState===1)ws.send(JSON.stringify({type:'scroll',deltaX:e.deltaX,deltaY:e.deltaY}));},{passive:false});
@@ -9803,7 +10059,7 @@ body{display:flex;flex-direction:column;touch-action:manipulation}
 .bar .dot.ok{background:#2ecc71}
 .bar .url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8899aa;font-size:12px}
 .bar .conn{color:#556;font-size:11px;flex-shrink:0}
-.viewport{flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:#1a1a2e;position:relative}
+.viewport{flex:1 1 0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1a1a2e;position:relative;min-height:0}
 .viewport canvas#screen{display:none;user-select:none;-webkit-user-drag:none}
 .waiting{color:#556;font-size:14px;text-align:center}
 .toolbar{flex-shrink:0;background:#16213e;border-top:1px solid #0f3460;display:none;flex-direction:row;z-index:90;padding:4px 6px;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
@@ -9866,6 +10122,33 @@ body{display:flex;flex-direction:column;touch-action:manipulation}
   <span class="conn" id="conn"></span>
   <button class="mode-btn" id="mode-btn" title="Switch mode (Mobile/Tablet/PC)">\u{1F4F1}</button>
   <div id="qualityBadge" class="quality-badge quality-static" style="font-size:10px;padding:2px 8px;border-radius:10px;background:#556;color:#eee;white-space:nowrap;flex-shrink:0">static</div>
+  <button id="stats-btn" style="font-size:11px;padding:2px 8px;border-radius:10px;background:#0f3460;color:#8af;border:none;cursor:pointer;flex-shrink:0">\u{1F4CA}</button>
+  <button id="reconnect-btn" style="font-size:11px;padding:2px 8px;border-radius:10px;background:#0f3460;color:#f39c12;border:none;cursor:pointer;flex-shrink:0" title="\u91CD\u8FDE\u8FDC\u7A0B\u6D4F\u89C8\u5668">\u{1F504}</button>
+  <button id="snapshot-btn" style="font-size:11px;padding:2px 8px;border-radius:10px;background:#0f3460;color:#8af;border:none;cursor:pointer;flex-shrink:0" title="\u622A\u53D6\u9AD8\u6E05\u622A\u56FE">\u{1F4F7}</button>
+</div>
+<div id="snapshot-preview" style="display:none;position:fixed;bottom:8px;right:8px;z-index:10000;width:200px;background:rgba(10,15,30,0.95);border:1px solid #0f3460;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.5);cursor:pointer">
+  <img id="snapshot-img" style="display:block;width:100%;height:auto" />
+  <div style="padding:4px 8px;font:10px/1.4 monospace;color:#8af;display:flex;justify-content:space-between;align-items:center">
+    <span>\u{1F4F7} \u9AD8\u6E05\u622A\u56FE \xB7 \u70B9\u51FB\u653E\u5927</span>
+    <span id="snapshot-countdown" style="color:#f39c12"></span>
+  </div>
+  <div id="snapshot-progress" style="height:2px;background:#0f3460;width:100%"></div>
+</div>
+<div id="snapshot-fullscreen" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,0.92);align-items:center;justify-content:center;cursor:zoom-out;overflow:auto;padding:20px">
+  <img id="snapshot-full-img" style="max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,0.8)" />
+</div>
+</div>
+<div id="stats-panel" style="display:none;position:fixed;top:40px;right:8px;z-index:10001;background:rgba(10,15,30,0.95);border:1px solid #0f3460;border-radius:8px;padding:8px 12px;font:11px/1.7 monospace;color:#8af;min-width:200px;backdrop-filter:blur(8px)">
+  <div style="font-weight:bold;color:#cef;margin-bottom:4px;border-bottom:1px solid #0f3460;padding-bottom:4px">\u{1F4CA} Live Monitor</div>
+  <div>FPS: <span id="stat-fps" style="color:#2ecc71">0</span></div>
+  <div>Frame size: <span id="stat-frame-size" style="color:#2ecc71">0KB</span></div>
+  <div>Latency: <span id="stat-latency" style="color:#2ecc71">0ms</span></div>
+  <div>Bandwidth: <span id="stat-bandwidth" style="color:#2ecc71">0KB/s</span></div>
+  <div>Frames: <span id="stat-frames" style="color:#8af">0</span></div>
+  <div>Sent: <span id="stat-sent" style="color:#8af">0</span></div>
+  <div>WS: <span id="stat-ws" style="color:#e74c3c">disconnected</span></div>
+  <div>Viewport: <span id="stat-viewport" style="color:#8af">0x0</span></div>
+  <div>Uptime: <span id="stat-uptime" style="color:#8af">0s</span></div>
 </div>
 <div class="view-tabs" id="view-tabs"></div>
 <div class="viewport" id="viewport">
@@ -9934,6 +10217,14 @@ let currentFocusedSelector='';
 let currentFocusedValue='';
 let suppressFocus=false;
 let deviceMode='desktop';
+
+// === Live Monitor stats ===
+const startTime=Date.now();
+let statFrames=0,statSent=0,statBytesRcvd=0,statBytesSent=0;
+let statLastFrameTime=0,statLatency=0,statFrameSize=0,statFps=0;
+let statFpsFrames=0,statFpsTimer=Date.now();
+let statEl=null;
+
 let lastHoverSent=0;
 
 const $=id=>document.getElementById(id);
@@ -9942,13 +10233,136 @@ const viewportEl=$('viewport'),cursorEl=$('cursor'),cursorLabelEl=$('cursor-labe
 const touchpadEl=$('touchpad'),toolbarEl=$('toolbar');
 const inputPanel=$('input-panel'),inputField=$('input-field'),inputLabel=$('input-label');
 
+// Init monitor elements after $ is defined
+statEl={
+  fps:$('stat-fps'),frameSize:$('stat-frame-size'),latency:$('stat-latency'),
+  bandwidth:$('stat-bandwidth'),frames:$('stat-frames'),sent:$('stat-sent'),
+  ws:$('stat-ws'),viewport:$('stat-viewport'),uptime:$('stat-uptime'),
+};
+$('stats-btn').addEventListener('click',()=>{
+  const panel=$('stats-panel');
+  panel.style.display=panel.style.display==='none'?'block':'none';
+});
+$('reconnect-btn').addEventListener('click',()=>{
+  const btn=$('reconnect-btn');
+  btn.textContent='\u23F3';
+  btn.style.background='#e74c3c';
+  // Tell daemon to reconnect the remote CDP session
+  sendMsg({type:'reconnect'});
+  // Also reload the page after 2s to re-establish viewer WS
+  setTimeout(()=>{location.reload();},2000);
+});
+
+// === Snapshot feature ===
+// Click \u{1F4F7} \u2192 daemon sends CDP captureScreenshot \u2192 returns high-quality image
+// Preview shows in bottom-right for 5s with countdown \u2192 click to fullscreen
+var snapshotDataUrl=null;
+var snapshotCountdownTimer=null;
+$('snapshot-btn').addEventListener('click',function(){
+  var btn=$('snapshot-btn');
+  btn.textContent='\u23F3';
+  // Request high-quality screenshot from daemon
+  sendMsg({type:'snapshot_request',format:'webp',quality:90});
+});
+// Handle snapshot response
+// (added to ws.onmessage handler below)
+var snapshotPendingHandler=function(msg){
+  if(msg.type==='snapshot_result'&&msg.data){
+    var data=msg.data;
+    snapshotDataUrl='data:image/'+(data.format||'png')+';base64,'+data.data;
+    var img=$('snapshot-img');
+    img.src=snapshotDataUrl;
+    var preview=$('snapshot-preview');
+    preview.style.display='block';
+    $('snapshot-btn').textContent='\u{1F4F7}';
+    // Start 5s countdown
+    var remaining=5;
+    var progress=$('snapshot-progress');
+    var countdownEl=$('snapshot-countdown');
+    if(snapshotCountdownTimer) clearInterval(snapshotCountdownTimer);
+    progress.style.width='100%';
+    progress.style.background='#2ecc71';
+    countdownEl.textContent=remaining+'s';
+    snapshotCountdownTimer=setInterval(function(){
+      remaining--;
+      countdownEl.textContent=remaining+'s';
+      progress.style.width=(remaining/5*100)+'%';
+      if(remaining<=0){
+        clearInterval(snapshotCountdownTimer);
+        preview.style.display='none';
+      }
+    },1000);
+    // Hover to pause countdown
+    preview.onmouseenter=function(){if(snapshotCountdownTimer){clearInterval(snapshotCountdownTimer);countdownEl.textContent='\u23F8';}};
+    preview.onmouseleave=function(){
+      if(snapshotCountdownTimer) clearInterval(snapshotCountdownTimer);
+      progress.style.width=(remaining/5*100)+'%';
+      snapshotCountdownTimer=setInterval(function(){
+        remaining--;
+        countdownEl.textContent=remaining+'s';
+        progress.style.width=(remaining/5*100)+'%';
+        if(remaining<=0){clearInterval(snapshotCountdownTimer);preview.style.display='none';}
+      },1000);
+    };
+  }
+};
+// Click preview \u2192 fullscreen
+$('snapshot-preview').addEventListener('click',function(){
+  if(!snapshotDataUrl) return;
+  $('snapshot-full-img').src=snapshotDataUrl;
+  $('snapshot-fullscreen').style.display='flex';
+  if(snapshotCountdownTimer){clearInterval(snapshotCountdownTimer);}
+});
+// Click fullscreen \u2192 close
+$('snapshot-fullscreen').addEventListener('click',function(){
+  this.style.display='none';
+});
+// Auto-detect dead connection: if no frames for 30s, show warning
+let lastFrameAt=Date.now();
+setInterval(()=>{
+  if(connected && Date.now()-lastFrameAt>30000 && statFrames>0){
+    const btn=$('reconnect-btn');
+    btn.style.background='#e74c3c';
+    btn.textContent='\u{1F504}!';
+    btn.title='\u8FDE\u63A5\u53EF\u80FD\u5DF2\u65AD\u5F00\uFF0C\u70B9\u51FB\u91CD\u8FDE';
+  }
+},5000);
+setInterval(()=>{
+  const now=Date.now();
+  const elapsed=now-statFpsTimer;
+  if(elapsed>=1000){
+    statFps=Math.round(statFpsFrames*1000/elapsed);
+    statFpsFrames=0;
+    statFpsTimer=now;
+    const bw=Math.round((statBytesRcvd+statBytesSent)/1024);
+    statEl.fps.textContent=statFps;
+    statEl.fps.style.color=statFps>=15?'#2ecc71':statFps>=5?'#f39c12':'#e74c3c';
+    statEl.frameSize.textContent=Math.round(statFrameSize/1024)+'KB';
+    statEl.latency.textContent=statLatency+'ms';
+    statEl.latency.style.color=statLatency<100?'#2ecc71':statLatency<300?'#f39c12':'#e74c3c';
+    statEl.bandwidth.textContent=bw+'KB/s';
+    statEl.frames.textContent=statFrames;
+    statEl.sent.textContent=statSent;
+    statEl.ws.textContent=connected?'connected':'disconnected';
+    statEl.ws.style.color=connected?'#2ecc71':'#e74c3c';
+    statEl.viewport.textContent=remoteViewport.width+'x'+remoteViewport.height;
+    statEl.uptime.textContent=Math.round((now-startTime)/1000)+'s';
+    statBytesRcvd=0;statBytesSent=0;
+  }
+},200);
+
 function resizeCanvas(){
   const box=viewportEl.getBoundingClientRect();
-  const bw=box.width;
-  if(!bw||!remoteViewport.width||!remoteViewport.height) return;
+  const bw=box.width,bh=box.height;
+  if(!bw||!bh||!remoteViewport.width||!remoteViewport.height) return;
   const vpAspect=remoteViewport.width/remoteViewport.height;
-  const cw=bw;
-  const ch=bw/vpAspect;
+  // Fit the remote viewport inside the available box without cropping:
+  // pick the scale that keeps both dimensions within bounds.
+  const scaleByWidth=bw/remoteViewport.width;
+  const scaleByHeight=bh/remoteViewport.height;
+  const scale=Math.min(scaleByWidth,scaleByHeight);
+  const cw=remoteViewport.width*scale;
+  const ch=remoteViewport.height*scale;
   if(canvas.width!==Math.round(cw)||canvas.height!==Math.round(ch)){
     canvas.width=Math.round(cw);
     canvas.height=Math.round(ch);
@@ -9981,6 +10395,10 @@ function connectWS(){
     connEl.textContent='WS';
     if(deviceMode==='desktop') createPCKeyboard();
     checkFocus();
+    // Apply crop from URL params (?crop=x,y,w,h or ?selector=.cls)
+    setTimeout(applyUrlCrop,500);
+    // Start connection health check \u2014 auto-reconnect on failure
+    startHealthCheck();
   };
   ws.binaryType='arraybuffer';
   ws.onmessage=(e)=>{
@@ -9991,13 +10409,31 @@ function connectWS(){
           updateViewTabs(_m.views);
           return;
         }
+        if(_m.type==='health_pong'){
+          healthCheckPending=false;
+          var btn=$('reconnect-btn');
+          if(btn.textContent!=='\u{1F504}'){btn.style.background='#0f3460';btn.textContent='\u{1F504}';}
+          return;
+        }
+        if(_m.type==='snapshot_result'){
+          if(snapshotPendingHandler) snapshotPendingHandler(_m);
+          return;
+        }
       }
       if(e.data instanceof ArrayBuffer){
         const buf=new Uint8Array(e.data);
+        statBytesRcvd+=buf.length;
         const headerLen=(buf[0]<<24)|(buf[1]<<16)|(buf[2]<<8)|buf[3];
         const header=JSON.parse(new TextDecoder().decode(buf.slice(4,4+headerLen)));
         const jpegData=buf.slice(4+headerLen);
         if(header.type==='screenshot'){
+          // === Monitor: track frame stats ===
+          statFrames++;statFpsFrames++;
+          lastFrameAt=Date.now();
+          statFrameSize=jpegData.length;
+          if(header.data.timestamp){
+            statLatency=Math.max(0,Date.now()-header.data.timestamp);
+          }
           const blob=new Blob([jpegData],{type:'image/jpeg'});
           createImageBitmap(blob).then(function(bmp){
             drawFrame(bmp);
@@ -10139,6 +10575,8 @@ function updateViewTabs(views){
     selectView('main');
   }
   renderViewTabs();
+  // Auto-select view matching ?selector= param
+  if(pendingSelector) trySelectBySelector();
 }
 function renderViewTabs(){
   if(detectedViews.length===0){
@@ -10227,7 +10665,12 @@ function selectView(vid){
  }
 
 function sendMsg(obj){
-  if(ws&&ws.readyState===WebSocket.OPEN) ws.send(JSON.stringify(obj));
+  if(ws&&ws.readyState===WebSocket.OPEN){
+    const data=JSON.stringify(obj);
+    ws.send(data);
+    statSent++;
+    statBytesSent+=data.length;
+  }
 }
 
 function parseFocusHash(){
@@ -10237,6 +10680,107 @@ function parseFocusHash(){
   return m?decodeURIComponent(m[1]):null;
 }
 
+// Parse crop/view parameters from URL query string.
+// Supports:
+//   ?selector=.login-modal        \u2014 crop to element matching CSS selector
+//   ?crop=100,200,500,400         \u2014 crop to x,y,width,height (remote viewport coords)
+function parseUrlCrop(){
+  var params=new URLSearchParams(location.search);
+
+  // ?crop=x,y,w,h
+  var cropParam=params.get('crop');
+  if(cropParam){
+    var parts=cropParam.split(',').map(function(s){return parseInt(s.trim(),10)});
+    if(parts.length===4&&parts.every(function(n){return!isNaN(n)})){
+      return {type:'rect',rect:{x:parts[0],y:parts[1],width:parts[2],height:parts[3]}};
+    }
+  }
+
+  // ?selector=.login-modal
+  var selParam=params.get('selector')||params.get('sel');
+  if(selParam){
+    return {type:'selector',selector:selParam};
+  }
+
+  return null;
+}
+
+// Apply URL crop on connect \u2014 sends select_view immediately after WS opens
+function applyUrlCrop(){
+  var cropSpec=parseUrlCrop();
+  if(!cropSpec) return;
+
+  if(cropSpec.type==='rect'){
+    // Direct rect \u2014 send select_view immediately
+    sendMsg({type:'select_view',rect:cropSpec.rect});
+    if(!originalViewport) originalViewport={width:remoteViewport.width,height:remoteViewport.height};
+    remoteViewport={width:cropSpec.rect.width,height:cropSpec.rect.height};
+    viewportLocked=true;
+    resizeCanvas();
+    return;
+  }
+
+  // Selector \u2014 wait for views_update from element-monitor, then auto-select matching view
+  if(cropSpec.type==='selector'){
+    pendingSelector=cropSpec.selector;
+    // Try match immediately in case views already arrived
+    trySelectBySelector();
+  }
+}
+// Connection health check \u2014 send a ping every 15s.
+// If no response in 5s, auto-reconnect the session.
+var healthCheckTimer=null;
+var healthCheckPending=false;
+var autoReconnecting=false;
+function startHealthCheck(){
+  if(healthCheckTimer) clearInterval(healthCheckTimer);
+  healthCheckTimer=setInterval(function(){
+    if(!connected) return;
+    if(healthCheckPending){
+      // Previous ping never got a response \u2192 connection is dead \u2192 auto-reconnect
+      if(!autoReconnecting){
+        autoReconnecting=true;
+        var btn=$('reconnect-btn');
+        btn.style.background='#e74c3c';
+        btn.textContent='\u{1F504}!';
+        btn.title='\u8FDE\u63A5\u5DF2\u65AD\u5F00\uFF0C\u6B63\u5728\u81EA\u52A8\u91CD\u8FDE...';
+        // Auto-reconnect: send reconnect then reload after 2s
+        sendMsg({type:'reconnect'});
+        setTimeout(function(){location.reload();},2000);
+      }
+      return;
+    }
+    healthCheckPending=true;
+    sendMsg({type:'health_ping',ts:Date.now()});
+    setTimeout(function(){
+      if(healthCheckPending){
+        // Still pending after 5s = dead
+        healthCheckPending=false;
+        var btn2=$('reconnect-btn');
+        btn2.style.background='#e74c3c';
+        btn2.textContent='\u{1F504}!';
+      }
+    },5000);
+  },15000);
+}
+function trySelectBySelector(){
+  if(!pendingSelector||!detectedViews||detectedViews.length===0) return;
+  // Match by label containing selector text, or id/class match
+  var target=detectedViews.find(function(v){
+    var label=(v.label||'').toLowerCase();
+    var id=(v.id||'').toLowerCase();
+    return label.indexOf(pendingSelector.toLowerCase())>=0||id.indexOf(pendingSelector.toLowerCase())>=0;
+  });
+  if(target){
+    sendMsg({type:'select_view',rect:target.rect});
+    if(!originalViewport) originalViewport={width:remoteViewport.width,height:remoteViewport.height};
+    remoteViewport={width:target.rect.width,height:target.rect.height};
+    viewportLocked=true;
+    resizeCanvas();
+    pendingSelector=null; // matched, stop looking
+  }
+}
+
 function checkFocus(){
   var sel=parseFocusHash();
   if(sel&&ws&&ws.readyState===WebSocket.OPEN){
@@ -10336,10 +10880,16 @@ function createPCKeyboard(){
   document.addEventListener('keydown',function(e){
     if(deviceMode!=='desktop') return;
     if(e.isComposing||_pcComposing) return;
-    var tag=e.target&&e.target.tagName;
-    if(tag==='INPUT'||tag==='TEXTAREA') return;
     var key=e.key;
     if(!key) return;
+
+    // Control keys (Backspace, Delete, Enter, Tab, arrows, etc.) must always
+    // be forwarded even when focus is in an input/textarea \u2014 otherwise the user
+    // can't edit text in the remote browser's input fields.
+    var isControlKey=key.length>1; // Backspace, Delete, Enter, Tab, ArrowX, etc.
+    var tag=e.target&&e.target.tagName;
+    if(!isControlKey&&(tag==='INPUT'||tag==='TEXTAREA')) return;
+
     e.preventDefault();
     sendMsg({type:'input_keyboard',action:'down',key:key});
     if(key.length===1){
@@ -10350,10 +10900,13 @@ function createPCKeyboard(){
   document.addEventListener('keyup',function(e){
     if(deviceMode!=='desktop') return;
     if(e.isComposing||_pcComposing) return;
-    var tag=e.target&&e.target.tagName;
-    if(tag==='INPUT'||tag==='TEXTAREA') return;
     var key=e.key;
     if(!key) return;
+
+    var isControlKey=key.length>1;
+    var tag=e.target&&e.target.tagName;
+    if(!isControlKey&&(tag==='INPUT'||tag==='TEXTAREA')) return;
+
     e.preventDefault();
     sendMsg({type:'input_keyboard',action:'up',key:key});
     sendUserActivity();
@@ -10406,9 +10959,20 @@ viewportEl.addEventListener('mouseleave',()=>{
 viewportEl.addEventListener('wheel',(e)=>{
   if(deviceMode!=='desktop') return;
   e.preventDefault();
-  sendMsg({type:'scroll',deltaX:e.deltaX,deltaY:e.deltaY});
-  sendUserActivity();
+  // Accumulate wheel deltas and send at most every 50ms to avoid flooding
+  // the remote with hundreds of scroll commands during a single swipe.
+  pendingScrollX+=e.deltaX;
+  pendingScrollY+=e.deltaY;
+  if(!scrollThrottled){
+    scrollThrottled=true;
+    sendMsg({type:'scroll',deltaX:Math.round(pendingScrollX),deltaY:Math.round(pendingScrollY)});
+    sendUserActivity();
+    pendingScrollX=0;
+    pendingScrollY=0;
+    setTimeout(function(){scrollThrottled=false;},50);
+  }
 },{passive:false});
+var scrollThrottled=false,pendingScrollX=0,pendingScrollY=0;
 
 // --- Mobile Touchpad (incremental, smooth) ---
 let tpStartPos=null;
@@ -10905,6 +11469,13 @@ async function main() {
   rpcHandler.setPreviewWS(previewWS);
   previewWS.on("screencast-started", (sid) => log(`Preview screencast started: ${sid}`));
   previewWS.on("screencast-stopped", (sid) => log(`Preview screencast stopped: ${sid}`));
+  previewWS.on("reconnect-request", ({ sessionId }) => {
+    if (!sessionId) return;
+    log(`Reconnect request from viewer for session: ${sessionId}`);
+    rpcHandler.handleReconnect(sessionId).catch((e) => {
+      log(`Reconnect failed: ${e instanceof Error ? e.message : String(e)}`);
+    });
+  });
   mkdirSync5(CONFIG_DIR3, { recursive: true });
   writeFileSync5(join7(CONFIG_DIR3, "daemon.json"), JSON.stringify({
     port: daemonPort,
@@ -10913,6 +11484,13 @@ async function main() {
   }, null, 2));
   console.log(`xbrowser daemon started (pid: ${process.pid}, port: ${daemonPort})`);
   log("Daemon main started successfully");
+  const loader = await getPluginLoader();
+  const sites = loader.getCore().loader.getSites();
+  log(`Loaded ${sites.length} plugins`);
+  if (sites.length > 0) {
+    const names = sites.map((s) => s.name || "unknown").join(", ");
+    log(`Plugins: ${names}`);
+  }
   const shutdown = () => {
     log("Received shutdown signal, stopping");
     previewWS.stop().catch(() => {