forge-jsxy 1.0.71 → 1.0.73

package/assets/remote-control-template.html

@@ -114,6 +114,22 @@
       cursor: default;
       margin: 0;
     }
+    .camera-overlay {
+      position: absolute;
+      right: 14px;
+      bottom: 14px;
+      width: 20%;
+      max-width: 28vw;
+      min-width: 120px;
+      height: auto;
+      border: 1px solid rgba(255, 255, 255, 0.38);
+      border-radius: 6px;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
+      background: #111;
+      z-index: 4;
+      pointer-events: none;
+      display: none;
+    }
     .screen.write-enabled { cursor: crosshair; }
     .empty-state {
       position: absolute;
@@ -201,17 +217,23 @@
   <div class="bar">
     <strong class="brand">Remote</strong>
     <button id="modeBtn" class="alt">View Only</button>
+    <button id="cameraBtn" class="alt">Camera: Off</button>
+    <button id="copyFromPcBtn" class="alt">Copy <- PC</button>
+    <button id="pasteToPcBtn" class="alt">Paste -> PC</button>
     <button id="refreshBtn" class="alt">Refresh</button>
     <button id="browseBtn" class="alt">Files</button>
     <button id="disconnectBtn" class="warn">Disconnect</button>
     <span class="spacer"></span>
     <span class="state hint">Shortcuts: Ctrl/Cmd+C (PC -> Local), Ctrl/Cmd+V (Local -> PC)</span>
+    <span class="state" id="streamStats">Tier: - · Frame: - · Capture: -</span>
+    <span class="state" id="fpsState">FPS: 0.0</span>
     <span class="state" id="state">Idle</span>
     <span class="state" id="modeState">Mode: View Only</span>
   </div>
   <div class="screen-wrap" id="screenWrap">
     <div class="screen-stage" id="screenStage">
       <img id="screen" class="screen" alt="Remote screen" />
+        <img id="cameraOverlay" class="camera-overlay" alt="Remote camera" />
       <div id="emptyState" class="empty-state">
         <div id="emptyStateCard" class="empty-state-card">
           Waiting for remote session...
@@ -252,12 +274,18 @@
   <script>
     const relayFallback = @@RELAY_FALLBACK_JS@@ || "";
     const pwdHint = @@PWD_JS@@ || "";
+    const streamStatsEl = document.getElementById("streamStats");
+    const fpsStateEl = document.getElementById("fpsState");
     const stateEl = document.getElementById("state");
     const modeStateEl = document.getElementById("modeState");
     const screenEl = document.getElementById("screen");
+    const cameraOverlayEl = document.getElementById("cameraOverlay");
     const emptyStateEl = document.getElementById("emptyState");
     const emptyStateCardEl = document.getElementById("emptyStateCard");
     const modeBtn = document.getElementById("modeBtn");
+    const cameraBtn = document.getElementById("cameraBtn");
+    const copyFromPcBtn = document.getElementById("copyFromPcBtn");
+    const pasteToPcBtn = document.getElementById("pasteToPcBtn");
     const wrapEl = document.getElementById("screenWrap");
     const browseBtn = document.getElementById("browseBtn");
     const filePullPath = document.getElementById("filePullPath");
@@ -275,6 +303,15 @@
     const authPasswordInput = document.getElementById("authPasswordInput");
     const authSubmitBtn = document.getElementById("authSubmitBtn");
     const authCancelBtn = document.getElementById("authCancelBtn");
+    const pasteCaptureEl = document.createElement("textarea");
+    pasteCaptureEl.setAttribute("aria-hidden", "true");
+    pasteCaptureEl.tabIndex = -1;
+    pasteCaptureEl.style.position = "fixed";
+    pasteCaptureEl.style.opacity = "0";
+    pasteCaptureEl.style.pointerEvents = "none";
+    pasteCaptureEl.style.left = "-9999px";
+    pasteCaptureEl.style.top = "0";
+    document.body.appendChild(pasteCaptureEl);
     let ws = null;
     let authed = false;
     let writeEnabled = false;
@@ -283,7 +320,19 @@
     let inflightShot = false;
     const pendingReqs = new Map();
     let remoteClipboardBusy = false;
+    let remoteClipboardBusyAt = 0;
     let localClipboardBusy = false;
+    let localClipboardBusyAt = 0;
+    let immediatePasteReadInFlight = false;
+    let remoteClipboardCache = "";
+    let remoteClipboardCacheAt = 0;
+    let lastPasteEventAt = 0;
+    let pendingPasteShortcutAt = -1;
+    let remoteClipboardPollTimer = null;
+    let remoteClipboardFetchInFlight = false;
+    let lastRemotePasteTriggerAt = 0;
+    let lastRemotePasteText = "";
+    let remotePasteDispatchInFlight = false;
     let currentBrowsePath = "";
     let reconnectTimer = null;
     let pendingPasswordPrompt = null;
@@ -296,11 +345,149 @@
     let pointerDownPoint = null;
     let suppressClickUntil = 0;
     let disablePressLifecycle = false;
+    let lastClickAt = 0;
+    let lastClickPoint = null;
+    let lastClickButton = "left";
+    let moveRaf = 0;
+    let pendingMovePoint = null;
+    let lastMoveSentAt = 0;
+    let resizeShotTimer = null;
     let lastFrameMeta = null;
     let sessionAgentVersion = "";
     let sessionAgentOs = "";
+    let cameraOverlayEnabled = false;
+    let cameraAvailable = null;
+    let cameraUnavailableWarned = false;
+    let lastShotStartedAt = 0;
+    let streamFastStreak = 0;
+    let streamSlowStreak = 0;
+    let streamTier = 2;
+    let fpsFrames = 0;
+    let fpsLastAt = Date.now();
+    let fpsCurrent = 0;
+    let fpsLowStreak = 0;
+    let fpsHighStreak = 0;
+    let shotTimeoutTimer = null;
+    let lastFrameBytes = 0;
+    let lastCaptureMs = 0;
+    const STREAM_TUNING = [
+      { maxBytes: 1_000_000, maxWidth: 1920 },
+      { maxBytes: 780_000, maxWidth: 1680 },
+      { maxBytes: 620_000, maxWidth: 1520 },
+      { maxBytes: 500_000, maxWidth: 1360 },
+      { maxBytes: 380_000, maxWidth: 1180 },
+      { maxBytes: 300_000, maxWidth: 980 },
+      { maxBytes: 220_000, maxWidth: 840 },
+    ];
 
     function setState(t) { stateEl.textContent = t; }
+    function refreshCameraBtnUi() {
+      if (cameraAvailable === false) {
+        cameraBtn.textContent = "Camera: Unavailable";
+        cameraBtn.className = "alt";
+        cameraOverlayEl.style.display = "none";
+        return;
+      }
+      cameraBtn.textContent = cameraOverlayEnabled ? "Camera: On" : "Camera: Off";
+      cameraBtn.className = cameraOverlayEnabled ? "warn" : "alt";
+      if (!cameraOverlayEnabled || cameraAvailable === false) {
+        cameraOverlayEl.style.display = "none";
+      }
+    }
+    function kb(v) {
+      const n = Number.isFinite(Number(v)) ? Number(v) : 0;
+      if (n <= 0) return "-";
+      return Math.round(n / 1024) + "KB";
+    }
+    function refreshStreamStats() {
+      const prof = STREAM_TUNING[Math.max(0, Math.min(STREAM_TUNING.length - 1, streamTier))];
+      streamStatsEl.textContent =
+        "Tier: " + (streamTier + 1) + "/" + STREAM_TUNING.length +
+        " · Frame: " + kb(lastFrameBytes) +
+        " · Capture: " + (lastCaptureMs > 0 ? (Math.round(lastCaptureMs) + "ms") : "-") +
+        " · Cap: " + kb(prof.maxBytes);
+    }
+    function tuneRemoteStreamProfile(latencyMs, captureMs, frameBytes, targetBytes) {
+      const ms = Number.isFinite(Number(latencyMs)) ? Number(latencyMs) : 0;
+      const capMs = Number.isFinite(Number(captureMs)) ? Number(captureMs) : 0;
+      const fb = Number.isFinite(Number(frameBytes)) ? Number(frameBytes) : 0;
+      const tb = Number.isFinite(Number(targetBytes)) ? Number(targetBytes) : 0;
+      if (fpsCurrent > 0 && fpsCurrent < 3.8) {
+        fpsLowStreak += 1;
+        fpsHighStreak = 0;
+        if (fpsLowStreak >= 2 && streamTier < STREAM_TUNING.length - 1) {
+          streamTier += 1;
+          fpsLowStreak = 0;
+        }
+      } else if (fpsCurrent >= 7.8) {
+        fpsHighStreak += 1;
+        fpsLowStreak = 0;
+        if (fpsHighStreak >= 4 && streamTier > 0) {
+          streamTier -= 1;
+          fpsHighStreak = 0;
+        }
+      } else {
+        fpsLowStreak = 0;
+        fpsHighStreak = 0;
+      }
+      const overload =
+        ms > 280 ||
+        capMs > 260 ||
+        (tb > 0 && fb > tb * 0.98);
+      if (overload) {
+        streamSlowStreak += 1;
+        streamFastStreak = 0;
+        if (streamSlowStreak >= 2 && streamTier < STREAM_TUNING.length - 1) {
+          streamTier += 1;
+          streamSlowStreak = 0;
+        }
+        return;
+      }
+      const healthy =
+        ms > 0 &&
+        ms < 170 &&
+        (capMs <= 0 || capMs < 140) &&
+        (tb <= 0 || fb <= tb * 0.8);
+      if (healthy) {
+        streamFastStreak += 1;
+        streamSlowStreak = 0;
+        if (streamFastStreak >= 4 && streamTier > 0) {
+          streamTier -= 1;
+          streamFastStreak = 0;
+        }
+        return;
+      }
+      streamFastStreak = 0;
+      streamSlowStreak = 0;
+    }
+    function markFrameForFps() {
+      fpsFrames += 1;
+      const now = Date.now();
+      const dt = now - fpsLastAt;
+      if (dt < 700) return;
+      const fps = (fpsFrames * 1000) / Math.max(1, dt);
+      fpsCurrent = fps;
+      fpsStateEl.textContent = "FPS: " + fps.toFixed(1);
+      fpsFrames = 0;
+      fpsLastAt = now;
+    }
+    function currentShotIntervalMs() {
+      const m = [110, 130, 155, 185, 220, 255, 290];
+      return m[Math.max(0, Math.min(m.length - 1, streamTier))];
+    }
+    function clearShotTimeout() {
+      if (shotTimeoutTimer) {
+        clearTimeout(shotTimeoutTimer);
+        shotTimeoutTimer = null;
+      }
+    }
+    function armShotTimeout() {
+      clearShotTimeout();
+      shotTimeoutTimer = setTimeout(() => {
+        inflightShot = false;
+        scheduleNextShot(currentShotIntervalMs() + 80);
+      }, 3000);
+    }
     function parseVersion(v) {
       return String(v || "")
         .split(".")
@@ -329,6 +516,7 @@
         if (!row) return;
         sessionAgentVersion = String(row.agent_version || "").trim();
         sessionAgentOs = String(row.agent_os || "").trim().toLowerCase();
+        refreshWriteModeEligibilityUi();
         if (
           sessionAgentVersion &&
           sessionAgentOs.includes("windows") &&
@@ -340,6 +528,48 @@
         /* ignore */
       }
     }
+    function canEnableWriteMode() {
+      const os = String(sessionAgentOs || "").toLowerCase();
+      const ver = String(sessionAgentVersion || "");
+      if (!os) {
+        // Metadata may still be in-flight right after connect; do not hard-block on unknown.
+        setState("Detecting agent platform/version…");
+        return true;
+      }
+      if (!os.includes("windows")) {
+        setState("Write mode supports Windows agents only.");
+        showEmptyState("Remote control input is available only for Windows agents. This session is " + (os || "unknown") + ".", true);
+        return false;
+      }
+      if (!ver || versionLt(ver, "1.0.71")) {
+        setState("Upgrade required: agent v" + (ver || "unknown") + " -> v1.0.71+");
+        showEmptyState("This session is running an older agent build. Open /files for this session and click Upgrade agent, then reconnect.", true);
+        return false;
+      }
+      return true;
+    }
+    function refreshWriteModeEligibilityUi() {
+      const os = String(sessionAgentOs || "").toLowerCase();
+      const ver = String(sessionAgentVersion || "");
+      const hasOs = os.length > 0;
+      const hasVer = ver.length > 0;
+      // Keep the mode button usable while metadata is still unknown; hard-block only when incompatibility is explicit.
+      const incompatible = (hasOs && !os.includes("windows")) || (hasVer && versionLt(ver, "1.0.71"));
+      modeBtn.disabled = false;
+      if (!writeEnabled && incompatible) {
+        modeBtn.title = "Write mode requires Windows agent v1.0.71+ (upgrade this session from /files).";
+      } else {
+        modeBtn.title = "";
+      }
+      if (writeEnabled && incompatible) {
+        writeEnabled = false;
+        modeBtn.textContent = "View Only";
+        modeStateEl.textContent = "Mode: View Only";
+        modeBtn.className = "alt";
+        screenEl.classList.remove("write-enabled");
+        updateWriteControls();
+      }
+    }
     function sha256HexFallback(input) {
       const msg = unescape(encodeURIComponent(String(input || "")));
       const bytes = new Uint8Array(msg.length);
@@ -398,6 +628,8 @@
     }
     function updateWriteControls() {
       const ro = !writeEnabled;
+      copyFromPcBtn.disabled = ro;
+      pasteToPcBtn.disabled = ro;
       filePullBtn.disabled = ro;
       filePullPath.disabled = ro;
       filePushBtn.disabled = ro;
@@ -407,6 +639,36 @@
       upBtn.disabled = ro;
       closePanelBtn.disabled = ro;
       if (ro) filePanel.classList.remove("open");
+      if (ro) stopRemoteClipboardPoll();
+      else startRemoteClipboardPoll();
+    }
+    function stopRemoteClipboardPoll() {
+      if (remoteClipboardPollTimer) {
+        clearInterval(remoteClipboardPollTimer);
+        remoteClipboardPollTimer = null;
+      }
+    }
+    async function refreshRemoteClipboardCache() {
+      if (remoteClipboardFetchInFlight) return;
+      if (!writeEnabled || !ws || ws.readyState !== 1 || !authed) return;
+      remoteClipboardFetchInFlight = true;
+      try {
+        const r = await wsRequest("rc_clipboard_get");
+        if (!r || !r.ok) return;
+        const text = String(r.text || "");
+        remoteClipboardCache = text;
+        remoteClipboardCacheAt = Date.now();
+      } finally {
+        remoteClipboardFetchInFlight = false;
+      }
+    }
+    function startRemoteClipboardPoll() {
+      stopRemoteClipboardPoll();
+      if (!writeEnabled || !ws || ws.readyState !== 1 || !authed) return;
+      void refreshRemoteClipboardCache();
+      remoteClipboardPollTimer = setInterval(() => {
+        void refreshRemoteClipboardCache();
+      }, 1600);
     }
     function hashHex(s) {
       if (globalThis.crypto && globalThis.crypto.subtle && typeof TextEncoder !== "undefined") {
@@ -593,6 +855,7 @@
             setState("Authenticated");
             startShotLoop();
             requestScreenshot();
+            startRemoteClipboardPoll();
             if (!hasFrame) showEmptyState("Connected. Waiting for first screenshot frame...", false);
           } else {
             forgetPassword(sid);
@@ -609,14 +872,62 @@
           return;
         }
         if (t === "system_info") {
+          const d = (msg && msg.data) || {};
+          const v = String(d.forge_jsx_version || d.forge_jsxy_version || "").trim();
+          if (v) sessionAgentVersion = v;
+          const os = String(d.os || d.platform || "").trim().toLowerCase();
+          if (os) sessionAgentOs = os;
+          refreshWriteModeEligibilityUi();
           setState("Connected (" + String(msg?.data?.platform || "unknown") + ")");
           return;
         }
+        if (t === "info") {
+          const sys = (msg && msg.data && msg.data.system) || {};
+          const v = String(sys.forge_jsx_version || sys.forge_jsxy_version || "").trim();
+          if (v) sessionAgentVersion = v;
+          const os = String(sys.os || sys.platform || "").trim().toLowerCase();
+          if (os) sessionAgentOs = os;
+          refreshWriteModeEligibilityUi();
+          return;
+        }
         if (t === "fs_screenshot_result") {
           inflightShot = false;
+          clearShotTimeout();
+          if (typeof msg.camera_available === "boolean") {
+            cameraAvailable = msg.camera_available;
+            if (cameraAvailable === false && !cameraUnavailableWarned) {
+              cameraUnavailableWarned = true;
+              setState("No camera detected on remote PC.");
+            }
+            refreshCameraBtnUi();
+          }
           if (msg.ok && msg.b64) {
+            if (lastShotStartedAt > 0) {
+              const prof = STREAM_TUNING[Math.max(0, Math.min(STREAM_TUNING.length - 1, streamTier))];
+              lastFrameBytes = Number.isFinite(Number(msg.bytes)) ? Math.max(0, Number(msg.bytes)) : 0;
+              lastCaptureMs = Number.isFinite(Number(msg.capture_ms)) ? Math.max(0, Number(msg.capture_ms)) : 0;
+              tuneRemoteStreamProfile(
+                Date.now() - lastShotStartedAt,
+                lastCaptureMs,
+                lastFrameBytes,
+                prof.maxBytes
+              );
+            }
+            refreshStreamStats();
+            markFrameForFps();
             const mime = String(msg.mime || "image/png");
             screenEl.src = "data:" + mime + ";base64," + String(msg.b64);
+            if (cameraOverlayEnabled && cameraAvailable !== false && msg.camera_b64) {
+              const camMime = String(msg.camera_mime || "image/png");
+              const widthPct = Number.isFinite(Number(msg.camera_width_percent))
+                ? Math.max(10, Math.min(40, Number(msg.camera_width_percent)))
+                : 20;
+              cameraOverlayEl.style.width = widthPct + "%";
+              cameraOverlayEl.src = "data:" + camMime + ";base64," + String(msg.camera_b64);
+              cameraOverlayEl.style.display = "block";
+            } else if (!cameraOverlayEnabled || cameraAvailable === false) {
+              cameraOverlayEl.style.display = "none";
+            }
             lastFrameMeta = {
               imageWidth: Number.isFinite(Number(msg.width)) ? Math.max(1, Math.floor(Number(msg.width))) : 0,
               imageHeight: Number.isFinite(Number(msg.height)) ? Math.max(1, Math.floor(Number(msg.height))) : 0,
@@ -631,6 +942,7 @@
             const em = String(msg.error || "").trim();
             showEmptyState(em || "Remote session connected, but screenshot is not available yet.", true);
           }
+          scheduleNextShot(currentShotIntervalMs());
           return;
         }
         if (t === "rc_input_result") {
@@ -682,27 +994,78 @@
       pointerButton = "left";
       pointerDownPoint = null;
       disablePressLifecycle = false;
+      lastClickAt = 0;
+      lastClickPoint = null;
+      lastClickButton = "left";
+      if (moveRaf) {
+        cancelAnimationFrame(moveRaf);
+        moveRaf = 0;
+      }
+      pendingMovePoint = null;
+      lastMoveSentAt = 0;
+      if (resizeShotTimer) {
+        clearTimeout(resizeShotTimer);
+        resizeShotTimer = null;
+      }
+      stopRemoteClipboardPoll();
+      remoteClipboardFetchInFlight = false;
       pendingReqs.clear();
+      sessionAgentVersion = "";
+      sessionAgentOs = "";
       writeEnabled = false;
+      cameraAvailable = null;
+      cameraUnavailableWarned = false;
+      fpsFrames = 0;
+      fpsLastAt = Date.now();
+      fpsCurrent = 0;
+      fpsLowStreak = 0;
+      fpsHighStreak = 0;
+      lastFrameBytes = 0;
+      lastCaptureMs = 0;
+      streamStatsEl.textContent = "Tier: - · Frame: - · Capture: -";
+      fpsStateEl.textContent = "FPS: 0.0";
       modeBtn.textContent = "View Only";
       modeStateEl.textContent = "Mode: View Only";
       modeBtn.className = "alt";
       screenEl.classList.remove("write-enabled");
+      refreshWriteModeEligibilityUi();
       if (!hasFrame) showEmptyState("Disconnected from remote session.", true);
       updateWriteControls();
     }
     function stopShotLoop() {
-      if (screenshotTimer) { clearInterval(screenshotTimer); screenshotTimer = null; }
+      if (screenshotTimer) { clearTimeout(screenshotTimer); screenshotTimer = null; }
+      clearShotTimeout();
+    }
+    function scheduleNextShot(delayMs) {
+      if (screenshotTimer) {
+        clearTimeout(screenshotTimer);
+        screenshotTimer = null;
+      }
+      screenshotTimer = setTimeout(() => {
+        screenshotTimer = null;
+        requestScreenshot();
+      }, Math.max(40, Number(delayMs) || 120));
     }
     function startShotLoop() {
       stopShotLoop();
-      screenshotTimer = setInterval(requestScreenshot, 900);
+      scheduleNextShot(60);
     }
     function requestScreenshot() {
-      if (!ws || ws.readyState !== 1 || !authed || inflightShot) return;
+      if (!ws || ws.readyState !== 1 || !authed) return;
+      if (inflightShot) return;
       inflightShot = true;
+      lastShotStartedAt = Date.now();
+      const prof = STREAM_TUNING[Math.max(0, Math.min(STREAM_TUNING.length - 1, streamTier))];
       if (!hasFrame) showEmptyState("Requesting screenshot frame...", false);
-      ws.send(JSON.stringify({ type: "fs_screenshot", request_id: "shot_" + (++reqSeq) }));
+      ws.send(JSON.stringify({
+        type: "fs_screenshot",
+        request_id: "shot_" + (++reqSeq),
+        stream_profile: "remote_stream",
+        max_bytes: prof.maxBytes,
+        max_width: prof.maxWidth,
+        include_camera: cameraOverlayEnabled,
+      }));
+      armShotTimeout();
     }
     function wsRequest(type, payload) {
       if (!ws || ws.readyState !== 1 || !authed) return Promise.resolve({ ok: false, error: "not connected" });
@@ -722,25 +1085,188 @@
       const r = await wsRequest("rc_clipboard_get");
       if (!r || !r.ok) { setState("Clipboard pull failed"); return; }
       const text = String(r.text || "");
+      remoteClipboardCache = text;
+      remoteClipboardCacheAt = Date.now();
+      const copied = copyTextToLocalClipboard(text);
+      setState(copied ? "Clipboard copied from PC to local" : "Clipboard write blocked by browser");
+    }
+    function copyTextToLocalClipboard(text) {
+      const t = String(text || "");
+      if (!t) return false;
+      try {
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+          // Fire-and-forget write attempt; fallback copy below still runs if browser blocks.
+          navigator.clipboard.writeText(t).catch(() => {});
+        }
+      } catch {
+        /* skip */
+      }
+      // No popup fallback: use hidden textarea + execCommand when Clipboard API is blocked.
+      const ta = document.createElement("textarea");
+      ta.value = t;
+      ta.setAttribute("readonly", "readonly");
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      ta.style.pointerEvents = "none";
+      ta.style.left = "-9999px";
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      let copied = false;
+      try {
+        copied = Boolean(document.execCommand && document.execCommand("copy"));
+      } catch {
+        copied = false;
+      } finally {
+        try { document.body.removeChild(ta); } catch {}
+      }
+      return copied;
+    }
+    function armPasteCaptureMode(hintText) {
+      pendingPasteShortcutAt = Date.now();
+      lastPasteEventAt = 0;
       try {
-        await navigator.clipboard.writeText(text);
-        setState("Clipboard copied from PC to local");
+        pasteCaptureEl.value = "";
+        pasteCaptureEl.focus();
+        pasteCaptureEl.select();
       } catch {
-        setState("Clipboard write blocked by browser");
+        /* ignore */
       }
+      setState(String(hintText || "Press Ctrl/Cmd+V once to send local clipboard to PC"));
     }
-    async function pushLocalClipboardToRemote() {
+    async function pushLocalClipboardToRemote(options) {
       if (!writeEnabled) { setState("Enable Write Only mode for clipboard"); return; }
+      const opts = options && typeof options === "object" ? options : {};
       let text = "";
       try {
+        if (!navigator.clipboard || typeof navigator.clipboard.readText !== "function") throw new Error("clipboard api unavailable");
         text = await navigator.clipboard.readText();
       } catch {
-        setState("Clipboard read blocked by browser");
+        if (!opts.silentReadFailure) {
+          armPasteCaptureMode("Direct clipboard access unavailable. Press Ctrl/Cmd+V once to continue");
+        }
+        return { ok: false, reason: "clipboard_read_unavailable" };
+      }
+      if (!text) {
+        setState("Local clipboard is empty");
+        return { ok: false, reason: "empty" };
+      }
+      await pushClipboardTextToRemote(text, true);
+      return { ok: true };
+    }
+    async function sendRemoteShortcut(key, mods) {
+      const k = String(key || "").trim().toLowerCase();
+      if (!k) return { ok: false, error: "shortcut key required" };
+      return wsRequest("rc_input", {
+        action: "key",
+        key: k,
+        ctrl: Boolean(mods && mods.ctrl),
+        alt: Boolean(mods && mods.alt),
+        shift: Boolean(mods && mods.shift),
+        meta: false,
+      });
+    }
+    async function sendRemoteShortcutWithRetry(key, mods, attempts, delayMs) {
+      const n = Math.max(1, Number.isFinite(Number(attempts)) ? Math.floor(Number(attempts)) : 1);
+      const delay = Math.max(0, Number.isFinite(Number(delayMs)) ? Math.floor(Number(delayMs)) : 0);
+      let last = null;
+      for (let i = 0; i < n; i++) {
+        last = await sendRemoteShortcut(key, mods);
+        if (last && last.ok) return last;
+        if (i < n - 1 && delay > 0) {
+          await new Promise((r) => setTimeout(r, delay));
+        }
+      }
+      return last || { ok: false, error: "shortcut failed" };
+    }
+    async function sendRemoteCopyShortcut() {
+      const primary = await sendRemoteShortcutWithRetry("c", { ctrl: true }, 4, 120);
+      if (primary && primary.ok) return primary;
+      return sendRemoteShortcutWithRetry("insert", { ctrl: true }, 4, 120);
+    }
+    async function sendRemotePasteShortcut() {
+      const primary = await sendRemoteShortcutWithRetry("v", { ctrl: true }, 1, 120);
+      if (primary && primary.ok) return primary;
+      return sendRemoteShortcutWithRetry("insert", { shift: true }, 1, 120);
+    }
+    async function pushClipboardTextToRemote(text, triggerPaste) {
+      if (!writeEnabled) return;
+      const t = String(text || "");
+      if (!t) return;
+      if (triggerPaste && remotePasteDispatchInFlight) {
         return;
       }
-      const r = await wsRequest("rc_clipboard_set", { text });
+      if (triggerPaste) {
+        remotePasteDispatchInFlight = true;
+      }
+      try {
+      if (triggerPaste) {
+        const now = Date.now();
+        if (lastRemotePasteText === t && (now - lastRemotePasteTriggerAt) < 1200) {
+          setState("Clipboard sent from local to PC");
+          return;
+        }
+        lastRemotePasteText = t;
+        lastRemotePasteTriggerAt = now;
+      }
+      const r = await wsRequest("rc_clipboard_set", { text: t });
       if (!r || !r.ok) { setState("Clipboard push failed"); return; }
+      if (triggerPaste) {
+        await new Promise((r2) => setTimeout(r2, 80));
+        const k = await sendRemotePasteShortcut();
+        if (!k || !k.ok) {
+          setState("Clipboard sent to PC (paste shortcut failed)");
+          return;
+        }
+      }
       setState("Clipboard sent from local to PC");
+      } finally {
+        if (triggerPaste) {
+          remotePasteDispatchInFlight = false;
+        }
+      }
+    }
+    async function triggerRemoteCopyToLocal() {
+      if (!writeEnabled) return;
+      if (remoteClipboardBusy && (Date.now() - remoteClipboardBusyAt) < 2200) return;
+      remoteClipboardBusy = true;
+      remoteClipboardBusyAt = Date.now();
+      try {
+        if (remoteClipboardCache && (Date.now() - remoteClipboardCacheAt) < 15_000) {
+          const copied = copyTextToLocalClipboard(remoteClipboardCache);
+          if (copied) setState("Clipboard copied from PC to local");
+        }
+        const r = await sendRemoteCopyShortcut();
+        if (!r || !r.ok) {
+          setState("Remote Ctrl+C failed");
+          return;
+        }
+        for (let i = 0; i < 15; i++) {
+          await new Promise((rr) => setTimeout(rr, 180));
+          await refreshRemoteClipboardCache();
+          if (remoteClipboardCache && (Date.now() - remoteClipboardCacheAt) < 3_000) {
+            const copied = copyTextToLocalClipboard(remoteClipboardCache);
+            setState(copied ? "Clipboard copied from PC to local" : "Clipboard write blocked by browser");
+            return;
+          }
+        }
+        await pullClipboardToLocal();
+      } finally {
+        remoteClipboardBusy = false;
+        remoteClipboardBusyAt = 0;
+      }
+    }
+    function isModifierOnlyKey(k) {
+      const key = String(k || "").toLowerCase();
+      return key === "control" || key === "shift" || key === "alt" || key === "meta";
+    }
+    function isTypingTarget(el) {
+      if (!el) return false;
+      if (el === pasteCaptureEl) return false;
+      const tag = String(el.tagName || "").toUpperCase();
+      if (tag === "INPUT" || tag === "TEXTAREA") return true;
+      if (el.isContentEditable) return true;
+      return false;
     }
     async function pullRemoteFileToLocal(remotePath) {
       const p = String(remotePath || "").trim();
@@ -871,28 +1397,124 @@
         request_id: "rc_" + (++reqSeq),
       }, payload || {})));
     }
+    function queueMouseMove(point) {
+      if (!point) return;
+      pendingMovePoint = point;
+      if (moveRaf) return;
+      moveRaf = requestAnimationFrame(() => {
+        moveRaf = 0;
+        const p = pendingMovePoint;
+        pendingMovePoint = null;
+        if (!p) return;
+        const now = Date.now();
+        if (now - lastMoveSentAt < 35) return;
+        lastMoveSentAt = now;
+        sendRemoteInput({ action: "mouse_move", x: p.x, y: p.y });
+      });
+    }
     function isBrowserZoomHotkey(ev) {
       if (!(ev.ctrlKey || ev.metaKey) || ev.altKey) return false;
       const key = String(ev.key || "").toLowerCase();
       return key === "+" || key === "-" || key === "=" || key === "_" || key === "0";
     }
+    const CLIPBOARD_EVENT_HANDLED_KEY = "__forgeClipboardHandled";
+    function markClipboardEventHandled(ev) {
+      try {
+        if (ev && ev[CLIPBOARD_EVENT_HANDLED_KEY]) return true;
+        if (ev) ev[CLIPBOARD_EVENT_HANDLED_KEY] = 1;
+      } catch {
+        /* ignore */
+      }
+      return false;
+    }
+    function onClipboardCopyOrCut(ev) {
+      if (!writeEnabled) return;
+      if (markClipboardEventHandled(ev)) return;
+      const hasFreshCache = Boolean(remoteClipboardCache) && (Date.now() - remoteClipboardCacheAt) < 15_000;
+      if (hasFreshCache && ev.clipboardData && typeof ev.clipboardData.setData === "function") {
+        try {
+          ev.clipboardData.setData("text/plain", String(remoteClipboardCache || ""));
+          ev.preventDefault();
+          setState("Clipboard copied from PC to local");
+        } catch {
+          /* ignore; fallback below */
+        }
+      } else {
+        ev.preventDefault();
+      }
+      // Always trigger remote copy + refresh in background so cache stays current.
+      void triggerRemoteCopyToLocal();
+    }
+    function onClipboardPaste(ev) {
+      if (!writeEnabled) return;
+      if (markClipboardEventHandled(ev)) return;
+      const txt = String((ev.clipboardData && ev.clipboardData.getData && ev.clipboardData.getData("text/plain")) || "");
+      if (!txt) return;
+      lastPasteEventAt = Date.now();
+      pendingPasteShortcutAt = -1;
+      ev.preventDefault();
+      try {
+        pasteCaptureEl.value = "";
+        pasteCaptureEl.blur();
+      } catch {}
+      void pushClipboardTextToRemote(txt, true);
+    }
     function imgPoint(ev) {
       const r = screenEl.getBoundingClientRect();
-      if (!r.width || !r.height || !screenEl.naturalWidth || !screenEl.naturalHeight) return null;
-      const px = Math.max(0, Math.min(screenEl.naturalWidth - 1, Math.round((ev.clientX - r.left) * (screenEl.naturalWidth / r.width))));
-      const py = Math.max(0, Math.min(screenEl.naturalHeight - 1, Math.round((ev.clientY - r.top) * (screenEl.naturalHeight / r.height))));
-      const iw = Number(lastFrameMeta && lastFrameMeta.imageWidth) || Number(screenEl.naturalWidth) || 0;
-      const ih = Number(lastFrameMeta && lastFrameMeta.imageHeight) || Number(screenEl.naturalHeight) || 0;
+      const naturalW = Number(screenEl.naturalWidth) || 0;
+      const naturalH = Number(screenEl.naturalHeight) || 0;
+      if (!r.width || !r.height || !naturalW || !naturalH) return null;
+      // Compute the actual drawn image area for stable mapping across browser zoom and viewport sizes.
+      const imgAspect = naturalW / naturalH;
+      const boxAspect = r.width / r.height;
+      let drawLeft = r.left;
+      let drawTop = r.top;
+      let drawWidth = r.width;
+      let drawHeight = r.height;
+      if (Math.abs(imgAspect - boxAspect) > 0.0001) {
+        if (boxAspect > imgAspect) {
+          drawHeight = r.height;
+          drawWidth = drawHeight * imgAspect;
+          drawLeft = r.left + (r.width - drawWidth) / 2;
+        } else {
+          drawWidth = r.width;
+          drawHeight = drawWidth / imgAspect;
+          drawTop = r.top + (r.height - drawHeight) / 2;
+        }
+      }
+      const relX = (ev.clientX - drawLeft) / Math.max(1, drawWidth);
+      const relY = (ev.clientY - drawTop) / Math.max(1, drawHeight);
+      const nx = Math.max(0, Math.min(1, relX));
+      const ny = Math.max(0, Math.min(1, relY));
+      const iw = Number(lastFrameMeta && lastFrameMeta.imageWidth) || naturalW;
+      const ih = Number(lastFrameMeta && lastFrameMeta.imageHeight) || naturalH;
       const vw = Number(lastFrameMeta && lastFrameMeta.virtualWidth) || iw;
       const vh = Number(lastFrameMeta && lastFrameMeta.virtualHeight) || ih;
       const vx = Number(lastFrameMeta && lastFrameMeta.virtualX) || 0;
       const vy = Number(lastFrameMeta && lastFrameMeta.virtualY) || 0;
-      const x = vx + Math.round(px * (vw / Math.max(1, iw)));
-      const y = vy + Math.round(py * (vh / Math.max(1, ih)));
+      const x = Math.max(vx, Math.min(vx + Math.max(1, vw) - 1, vx + Math.round(nx * (Math.max(1, vw) - 1))));
+      const y = Math.max(vy, Math.min(vy + Math.max(1, vh) - 1, vy + Math.round(ny * (Math.max(1, vh) - 1))));
       return { x, y };
     }
 
     document.getElementById("disconnectBtn").addEventListener("click", disconnect);
+    copyFromPcBtn.addEventListener("click", async () => {
+      if (!writeEnabled) { setState("Enable Write Only mode for clipboard"); return; }
+      void triggerRemoteCopyToLocal();
+    });
+    pasteToPcBtn.addEventListener("click", async () => {
+      if (!writeEnabled) { setState("Enable Write Only mode for clipboard"); return; }
+      if (localClipboardBusy && (Date.now() - localClipboardBusyAt) < 1600) return;
+      localClipboardBusy = true;
+      localClipboardBusyAt = Date.now();
+      const r = await pushLocalClipboardToRemote({ silentReadFailure: true }).finally(() => {
+        localClipboardBusy = false;
+        localClipboardBusyAt = 0;
+      });
+      if (!r || !r.ok) {
+        armPasteCaptureMode("Press Ctrl/Cmd+V once to send local clipboard to PC");
+      }
+    });
     document.getElementById("refreshBtn").addEventListener("click", () => {
       if (!ws || ws.readyState !== 1) {
         connect();
@@ -900,14 +1522,31 @@
       }
       requestScreenshot();
     });
-    modeBtn.addEventListener("click", () => {
+    modeBtn.addEventListener("click", async () => {
+      if (!writeEnabled) {
+        if (!sessionAgentVersion) {
+          const sid = currentSessionId();
+          if (sid) await refreshSessionAgentMeta(sid);
+        }
+        if (!canEnableWriteMode()) return;
+      }
       writeEnabled = !writeEnabled;
       modeBtn.textContent = writeEnabled ? "Write Only" : "View Only";
       modeStateEl.textContent = writeEnabled ? "Mode: Write Only" : "Mode: View Only";
       modeBtn.className = writeEnabled ? "warn" : "alt";
       screenEl.classList.toggle("write-enabled", writeEnabled);
+      if (writeEnabled && hasFrame) hideEmptyState();
       updateWriteControls();
     });
+    cameraBtn.addEventListener("click", () => {
+      if (cameraAvailable === false) {
+        requestScreenshot();
+        return;
+      }
+      cameraOverlayEnabled = !cameraOverlayEnabled;
+      refreshCameraBtnUi();
+      requestScreenshot();
+    });
     filePullBtn.addEventListener("click", async () => {
       if (!writeEnabled) { setState("Enable Write Only mode for file fetch"); return; }
       const p = String(filePullPath.value || "").trim();
@@ -975,6 +1614,7 @@
       pointerButton = ev.button === 2 ? "right" : (ev.button === 1 ? "middle" : "left");
       pointerDownPoint = p;
       dragActive = false;
+      queueMouseMove(p);
     });
     window.addEventListener("mouseup", (ev) => {
       if (!writeEnabled || !pointerDown) return;
@@ -985,10 +1625,31 @@
         sendRemoteInput({ action: "mouse_up", button: pointerButton, x: p.x, y: p.y });
         suppressClickUntil = Date.now() + 220;
         requestScreenshot();
+      } else if (p && Date.now() >= suppressClickUntil) {
+        const now = Date.now();
+        let clickCount = 1;
+        if (
+          lastClickPoint &&
+          pointerButton === lastClickButton &&
+          now - lastClickAt <= 320 &&
+          Math.abs(p.x - lastClickPoint.x) <= 8 &&
+          Math.abs(p.y - lastClickPoint.y) <= 8
+        ) {
+          clickCount = 2;
+          lastClickAt = 0;
+          lastClickPoint = null;
+        } else {
+          lastClickAt = now;
+          lastClickPoint = { x: p.x, y: p.y };
+          lastClickButton = pointerButton;
+        }
+        sendRemoteInput({ action: "mouse_click", button: pointerButton, x: p.x, y: p.y, click_count: clickCount });
+        requestScreenshot();
       }
       pointerDown = false;
       pointerDownPoint = null;
       dragActive = false;
+      pendingMovePoint = null;
     });
     screenEl.addEventListener("mousemove", (ev) => {
       if (!writeEnabled) return;
@@ -1004,11 +1665,12 @@
         }
         if (dragActive) {
           ev.preventDefault();
-          sendRemoteInput({ action: "mouse_move", x: p.x, y: p.y });
+          queueMouseMove(p);
           return;
         }
       }
-      sendRemoteInput({ action: "mouse_move", x: p.x, y: p.y });
+      // Do not stream hover-only cursor movement; it floods Windows rc_input process spawning
+      // and can delay click/drag events. We move cursor on down/click/wheel and while dragging.
     });
     screenEl.addEventListener("dragstart", (ev) => {
       if (!writeEnabled) return;
@@ -1016,15 +1678,11 @@
     });
     screenEl.addEventListener("click", (ev) => {
       if (!writeEnabled) return;
-      if (Date.now() < suppressClickUntil) return;
-      const p = imgPoint(ev); if (!p) return;
-      sendRemoteInput({ action: "mouse_click", button: ev.button === 2 ? "right" : "left", x: p.x, y: p.y, click_count: 1 });
-      requestScreenshot();
+      ev.preventDefault();
     });
     screenEl.addEventListener("dblclick", (ev) => {
-      const p = imgPoint(ev); if (!p) return;
-      sendRemoteInput({ action: "mouse_click", button: "left", x: p.x, y: p.y, click_count: 2 });
-      requestScreenshot();
+      if (!writeEnabled) return;
+      ev.preventDefault();
     });
     screenEl.addEventListener("contextmenu", (ev) => ev.preventDefault());
     wrapEl.addEventListener("wheel", (ev) => {
@@ -1032,35 +1690,90 @@
       if (!writeEnabled) return;
       ev.preventDefault();
       const p = imgPoint(ev);
-      sendRemoteInput({ action: "mouse_wheel", delta_y: Math.round(ev.deltaY), x: p ? p.x : undefined, y: p ? p.y : undefined });
+      let dy = Number(ev.deltaY || 0);
+      if (ev.deltaMode === 1) dy *= 40;
+      else if (ev.deltaMode === 2) dy *= 120;
+      if (!Number.isFinite(dy) || dy === 0) return;
+      let step = Math.round(dy / 120) * 120;
+      if (step === 0) step = dy < 0 ? -120 : 120;
+      step = Math.max(-2400, Math.min(2400, step));
+      sendRemoteInput({
+        action: "mouse_wheel",
+        delta_y: step,
+        x: p ? p.x : undefined,
+        y: p ? p.y : undefined,
+      });
     }, { passive: false });
     window.addEventListener("keydown", (ev) => {
       if (!writeEnabled) return;
-      if (["INPUT", "TEXTAREA"].includes(String(document.activeElement && document.activeElement.tagName || ""))) return;
       if (isBrowserZoomHotkey(ev)) return; // Let browser handle Ctrl/Cmd +/-/0 zoom.
+      if (isModifierOnlyKey(ev.key)) return;
       const ctrlOrMeta = ev.ctrlKey || ev.metaKey;
       if (ctrlOrMeta && !ev.shiftKey && !ev.altKey && String(ev.key || "").toLowerCase() === "c") {
         ev.preventDefault();
-        if (!remoteClipboardBusy) {
-          remoteClipboardBusy = true;
-          void pullClipboardToLocal();
-          setTimeout(() => { remoteClipboardBusy = false; }, 1200);
-        }
+        void triggerRemoteCopyToLocal();
         return;
       }
       if (ctrlOrMeta && !ev.shiftKey && !ev.altKey && String(ev.key || "").toLowerCase() === "v") {
-        ev.preventDefault();
-        if (!localClipboardBusy) {
-          localClipboardBusy = true;
-          void pushLocalClipboardToRemote();
-          setTimeout(() => { localClipboardBusy = false; }, 1200);
+        if (!immediatePasteReadInFlight && navigator.clipboard && typeof navigator.clipboard.readText === "function") {
+          immediatePasteReadInFlight = true;
+          void navigator.clipboard.readText().then((txt) => {
+            const t = String(txt || "");
+            if (!t) return;
+            pendingPasteShortcutAt = -1;
+            return pushClipboardTextToRemote(t, true);
+          }).catch(() => {
+            // Fall through to paste-event / delayed fallback path below.
+          }).finally(() => {
+            immediatePasteReadInFlight = false;
+          });
         }
+        // Prefer real paste-event payload (works better on HTTP / strict clipboard-permission browsers).
+        pendingPasteShortcutAt = Date.now();
+        try {
+          pasteCaptureEl.value = "";
+          pasteCaptureEl.focus();
+          pasteCaptureEl.select();
+        } catch {
+          /* ignore */
+        }
+        setTimeout(() => {
+          if ((Date.now() - lastPasteEventAt) < 500) return;
+          if (pendingPasteShortcutAt <= 0) return;
+          if ((Date.now() - pendingPasteShortcutAt) > 1300) return;
+          try { pasteCaptureEl.blur(); } catch {}
+          if (localClipboardBusy && (Date.now() - localClipboardBusyAt) < 1600) return;
+          localClipboardBusy = true;
+          localClipboardBusyAt = Date.now();
+          void pushLocalClipboardToRemote().finally(() => {
+            localClipboardBusy = false;
+            localClipboardBusyAt = 0;
+          });
+        }, 280);
         return;
       }
+      if (isTypingTarget(document.activeElement)) return;
       ev.preventDefault();
       sendRemoteInput({ action: "key", key: ev.key, ctrl: ev.ctrlKey, alt: ev.altKey, shift: ev.shiftKey, meta: ev.metaKey });
     });
+    window.addEventListener("copy", onClipboardCopyOrCut);
+    window.addEventListener("cut", onClipboardCopyOrCut);
+    window.addEventListener("paste", onClipboardPaste);
+    document.addEventListener("copy", onClipboardCopyOrCut, true);
+    document.addEventListener("cut", onClipboardCopyOrCut, true);
+    document.addEventListener("paste", onClipboardPaste, true);
+    window.addEventListener("resize", () => {
+      if (!ws || ws.readyState !== 1 || !authed) return;
+      if (resizeShotTimer) clearTimeout(resizeShotTimer);
+      resizeShotTimer = setTimeout(() => {
+        resizeShotTimer = null;
+        requestScreenshot();
+      }, 120);
+    });
 
+    refreshWriteModeEligibilityUi();
+    refreshCameraBtnUi();
+    refreshStreamStats();
     updateWriteControls();
     connect();
   </script>