overlord/Overlord-Server/public/assets/remotedesktop.js

import { encodeMsgpack, decodeMsgpack } from "./msgpack-helpers.js";
import { checkFeatureAccess } from "./feature-gate.js";
import { WhepClient } from "./whep.js";
import { P2PClient } from "./webrtc-p2p.js";
import { AdaptiveDesktopQuality, normalizeAdaptiveProfiles } from "./rd-adaptive-quality.js";
import { createKeyboardCapture } from "./keyboard-capture.js";
import { createSharedUiSettingsSaver, loadSharedUiSettings } from "./generated/shared-ui-settings.js";

(async function () {
  const clientId = new URLSearchParams(location.search).get("clientId");
  if (!clientId) {
    alert("Missing clientId");
    return;
  }

  const allowed = await checkFeatureAccess("remote_desktop", clientId);
  if (!allowed) return;

  const clientLabel = document.getElementById("clientLabel");
  clientLabel.textContent = clientId;

  let ws = null;
  let reconnectTimer = null;
  let reconnectDelay = 1000;
  const maxReconnectDelay = 15000;

  function buildWsUrl() {
    return (location.protocol === "https:" ? "wss://" : "ws://") +
      location.host +
      "/api/clients/" +
      clientId +
      "/rd/ws";
  }

  function connectWs() {
    if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
    ws = new WebSocket(buildWsUrl());
    ws.binaryType = "arraybuffer";
    ws.addEventListener("open", onWsOpen);
    ws.addEventListener("message", onWsMessage);
    ws.addEventListener("close", onWsClose);
    ws.addEventListener("error", onWsError);
  }

  function scheduleReconnect() {
    if (reconnectTimer) return;
    reconnectTimer = setTimeout(() => {
      reconnectTimer = null;
      setStreamState("connecting", "Reconnecting");
      connectWs();
      reconnectDelay = Math.min(reconnectDelay * 1.5, maxReconnectDelay);
    }, reconnectDelay);
  }
  const displaySelect = document.getElementById("displaySelect");
  const refreshBtn = document.getElementById("refreshDisplays");
  const startBtn = document.getElementById("startBtn");
  const stopBtn = document.getElementById("stopBtn");
  const recordBtn = document.getElementById("recordBtn");
  const rdRecordingSettingsBtn = document.getElementById("rdRecordingSettingsBtn");
  const recordMode = document.getElementById("recordMode");
  const recordFps = document.getElementById("recordFps");
  const fullscreenBtn = document.getElementById("fullscreenBtn");
  const fullscreenExitBtn = document.getElementById("fullscreenExitBtn");
  const mouseCtrl = document.getElementById("mouseCtrl");
  const kbdCtrl = document.getElementById("kbdCtrl");
  const cursorCtrl = document.getElementById("cursorCtrl");
  const hideLocalCursorCtrl = document.getElementById("hideLocalCursorCtrl");
  const duplicationCtrl = document.getElementById("duplicationCtrl");
  const streamProfileSelect = document.getElementById("streamProfileSelect");
  const streamProfileDetail = document.getElementById("streamProfileDetail");
  const bitrateSelect = document.getElementById("bitrateSelect");
  const requestKeyframeBtn = document.getElementById("requestKeyframeBtn");
  const smoothingSlider = document.getElementById("smoothingSlider");
  const smoothingValue = document.getElementById("smoothingValue");
  const qualitySlider = document.getElementById("qualitySlider");
  const qualityValue = document.getElementById("qualityValue");
  const codecH264 = document.getElementById("codecH264");
  const softwareH264Ctrl = document.getElementById("softwareH264Ctrl");
  const codecMode = document.getElementById("codecMode");
  const canvas = document.getElementById("frameCanvas");
  const canvasContainer = document.getElementById("canvasContainer");
  const renderSurface = document.getElementById("renderSurface");
  const rdFileDropOverlay = document.getElementById("rdFileDropOverlay");
  const rdFileDragGhost = document.getElementById("rdFileDragGhost");
  const rdFileDragLabel = document.getElementById("rdFileDragLabel");
  const rdUploadStatus = document.getElementById("rdUploadStatus");
  const rdUploadStatusIcon = document.getElementById("rdUploadStatusIcon");
  const rdUploadStatusText = document.getElementById("rdUploadStatusText");
  const rdUploadProgressBar = document.getElementById("rdUploadProgressBar");
  const remoteCursor = document.getElementById("remoteCursor");
  const remoteCursorImage = document.getElementById("remoteCursorImage");
  const ctx = canvas.getContext("2d");
  const agentFps = document.getElementById("agentFps");
  const viewerFps = document.getElementById("viewerFps");
  const inputLatency = document.getElementById("inputLatency");
  const networkStats = document.getElementById("networkStats");
  const diagnosticsBtn = document.getElementById("diagnosticsBtn");
  const diagnosticsHud = document.getElementById("diagnosticsHud");
  const diagnosticsClose = document.getElementById("diagnosticsClose");
  const fullscreenHud = document.getElementById("fullscreenHud");
  const fsHudStateDot = document.getElementById("fsHudStateDot");
  const fsHudStatus = document.getElementById("fsHudStatus");
  const fsHudResolution = document.getElementById("fsHudResolution");
  const fsHudCodec = document.getElementById("fsHudCodec");
  const fsHudFps = document.getElementById("fsHudFps");
  const fsHudLatency = document.getElementById("fsHudLatency");
  const fsHudNetwork = document.getElementById("fsHudNetwork");
  const fsHudStatsBtn = document.getElementById("fsHudStatsBtn");
  const fsHudTuckBtn = document.getElementById("fsHudTuckBtn");
  const fsHudExitBtn = document.getElementById("fsHudExitBtn");
  const rdStateOverlay = document.getElementById("rdStateOverlay");
  const rdStateIcon = document.getElementById("rdStateIcon");
  const rdStateTitle = document.getElementById("rdStateTitle");
  const rdStateDetail = document.getElementById("rdStateDetail");
  const rdStateKeyframeBtn = document.getElementById("rdStateKeyframeBtn");
  const rdStateRestartBtn = document.getElementById("rdStateRestartBtn");
  const rdStateTransportBtn = document.getElementById("rdStateTransportBtn");
  const diagnosticEls = Object.fromEntries([
    "Summary", "Transport", "Codec", "Resolution", "Capture", "Encode", "Send", "AgentTotal",
    "Bitrate", "Rtt", "LossJitter", "JitterBuffer", "Decode", "Render", "Queue", "Dropped", "Fps", "Input",
  ].map((name) => [name, document.getElementById(`diag${name}`)]));
  const statusEl = document.getElementById("streamStatus");
  const clipboardSyncCtrl = document.getElementById("clipboardSyncCtrl");
  const privacyCtrl = document.getElementById("privacyCtrl");
  const audioCtrl = document.getElementById("audioCtrl");
  const webrtcMode = document.getElementById("webrtcMode");
  const webrtcVideo = document.getElementById("webrtcVideo");
  let whepClient = null;
  let p2pClient = null;
  let webrtcActive = false;
  let lastRemoteCursor = null;
  let remoteCursorShape = null;
  let remoteCursorImageUrl = "";
  const CANVAS_TRANSPORT_PREF_VERSION = 1;
  function getWebrtcMode() {
    return webrtcMode ? String(webrtcMode.value || "off") : "off";
  }
  let activeClientId = clientId;
  let serverRecording = null;
  let recordingTimer = null;
  let pendingRecordingDownloadId = "";
  let renderCount = 0;
  let renderWindowStart = performance.now();
  let lastFrameAt = 0;
  let desiredStreaming = false;
  let streamState = "connecting";
  let streamStatusLabel = "Connecting";
  let fullscreenHudTimer = null;
  let fullscreenHudTucked = false;
  let frameWatchTimer = null;
  let offlineTimer = null;
  let frameWidth = 0;
  let frameHeight = 0;
  let latencyAvg = null;
  let directInputActive = false;
  let smoothingPct = 0;
  let smoothPoint = null;
  let pendingMove = null;
  let moveTimer = 0;
  let lastMoveSentAt = 0;
  let frameDecodeBusy = false;
  let pendingFrame = null;
  let videoDecoder = null;
  let videoDecoderConfigKey = "";
  let pendingDecodedVideoFrame = null;
  let decodedVideoPresentationFrame = 0;
  const disabledDecoderCodecs = new Set();
  let h264StreamCodec = "";
  let canvasDecodePressure = false;
  let h264PendingTimings = [];
  let h264TimestampUs = 0;
  let prefersH264 = typeof VideoDecoder === "function";
  let negotiatedCodec = prefersH264 ? "h264" : "jpeg";
  let browserDecoderCodecs = ["jpeg", "raw"];
  let h264LowFpsStreak = 0;
  let h264FirstFrameAt = 0;
  let h264FramesSeen = 0;
  let h264KeyframeErrorStreak = 0;
  let h264RecoveryAttempts = 0;
  let h264LastDecodeWarnAt = 0;
  let h264WaitingForKeyframe = true;
  const H264_LOW_FPS_THRESHOLD = 6;
  const H264_FALLBACK_WARMUP_MS = 10000;
  const H264_MIN_FRAMES_BEFORE_FALLBACK = 120;
  const H264_LOW_FPS_STREAK_LIMIT = 120;
  const H264_KEYFRAME_ERROR_RESTART_THRESHOLD = 24;
  const H264_MAX_RECOVERY_ATTEMPTS = 1;
  const H264_DECODE_WARN_THROTTLE_MS = 2000;
  const inputBackpressureBytes = 256 * 1024;
  const inputMoveIntervalMs = 8;
  const highFrequencyInputTypes = new Set([
    "mouse_move", "mouse_down", "mouse_up", "mouse_wheel",
    "key_down", "key_up", "text_input",
  ]);
  const VIEWER_FRAME_GAP_KEYFRAME_THROTTLE_MS = 1000;
  let lastViewerKeyframeRequestAt = 0;
  const diagnostics = {
    agent: null,
    network: null,
    decodeMs: null,
    renderMs: null,
    decodeQueue: 0,
    coalescedFrames: 0,
    currentAgentFps: null,
    currentViewerFps: null,
    wsBitrateMbps: null,
    wsBytes: 0,
    wsWindowStartedAt: performance.now(),
    codec: "",
    width: 0,
    height: 0,
  };
  let encoderProfiles = [];
  let adaptiveProfileRunning = false;
  const adaptiveQuality = new AdaptiveDesktopQuality((target) => {
    sendCmd("desktop_set_profile", {
      maxHeight: target.maxHeight,
      fps: target.fps,
      source: "webrtc_auto",
      reason: target.reason,
    });
    sendCmd("desktop_set_bitrate", {
      bitrateMbps: target.bitrateMbps,
      adaptive: true,
      source: "webrtc_auto",
      reason: target.reason,
    });
    if (streamProfileDetail) {
      streamProfileDetail.textContent = `Auto: ${target.width}×${target.height} @ ${target.fps} FPS, ${target.bitrateMbps} Mbps. ${target.reason}.`;
    }
  });

  let clipboardSyncTimer = null;
  let lastClipboardText = "";
  let clipboardSyncActive = false;
  let elevationPending = false;
  let clientOs = "";
  let clientIsAdmin = false;
  let desktopFileUploadSupported = true;
  let firewallWarningAcked = false;
  let firstFrameLogged = false;

  function rdDebug(label, data = {}) {
    try {
      console.debug(`rd: ${label} ${JSON.stringify(data)}`);
    } catch {
      console.debug(`rd: ${label}`, data);
    }
  }

  function resetH264RuntimeState() {
    h264TimestampUs = 0;
    h264StreamCodec = "";
    h264PendingTimings = [];
    diagnostics.decodeQueue = 0;
    h264LowFpsStreak = 0;
    h264FirstFrameAt = 0;
    h264FramesSeen = 0;
    h264KeyframeErrorStreak = 0;
    h264WaitingForKeyframe = true;
  }

  /* ── Remote Desktop Audio (system audio from client) ── */
  const AUDIO_SAMPLE_RATE = 16000;
  const AUDIO_PLAYBACK_FRAME = 512;
  const AUDIO_MAX_BUFFER_MS = 120;
  let audioWs = null;
  let audioPlayCtx = null;
  let audioProcessorNode = null;
  let audioChunks = [];
  let audioChunkOffset = 0;

  function audioResampleInt16ToFloat32(srcInt16, srcRate, dstRate) {
    if (!srcInt16 || srcInt16.length === 0) return new Float32Array(0);
    if (srcRate === dstRate) {
      const out = new Float32Array(srcInt16.length);
      for (let i = 0; i < srcInt16.length; i++) out[i] = srcInt16[i] / 0x8000;
      return out;
    }
    const outLength = Math.max(1, Math.round((srcInt16.length * dstRate) / srcRate));
    const out = new Float32Array(outLength);
    const step = srcRate / dstRate;
    for (let i = 0; i < outLength; i++) {
      const srcPos = i * step;
      const i0 = Math.floor(srcPos);
      const i1 = Math.min(i0 + 1, srcInt16.length - 1);
      const frac = srcPos - i0;
      out[i] = (srcInt16[i0] * (1 - frac) + srcInt16[i1] * frac) / 0x8000;
    }
    return out;
  }

  function initAudioPlayback() {
    if (!audioPlayCtx) {
      audioPlayCtx = new AudioContext({ sampleRate: AUDIO_SAMPLE_RATE, latencyHint: "interactive" });
    }
    if (!audioProcessorNode) {
      audioProcessorNode = audioPlayCtx.createScriptProcessor(AUDIO_PLAYBACK_FRAME, 1, 1);
      audioProcessorNode.onaudioprocess = function (event) {
        const out = event.outputBuffer.getChannelData(0);
        out.fill(0);
        let writeIndex = 0;
        while (writeIndex < out.length && audioChunks.length > 0) {
          const head = audioChunks[0];
          const remaining = head.length - audioChunkOffset;
          if (remaining <= 0) { audioChunks.shift(); audioChunkOffset = 0; continue; }
          const take = Math.min(out.length - writeIndex, remaining);
          out.set(head.subarray(audioChunkOffset, audioChunkOffset + take), writeIndex);
          writeIndex += take;
          audioChunkOffset += take;
          if (audioChunkOffset >= head.length) { audioChunks.shift(); audioChunkOffset = 0; }
        }
      };
      audioProcessorNode.connect(audioPlayCtx.destination);
    }
  }

  function appendAudioPcm(binary) {
    if (!audioPlayCtx) initAudioPlayback();
    const samples = Math.floor(binary.byteLength / 2);
    if (samples <= 0) return;
    const src = new Int16Array(binary.buffer, binary.byteOffset, samples);
    const chunk = audioResampleInt16ToFloat32(src, AUDIO_SAMPLE_RATE, audioPlayCtx?.sampleRate || AUDIO_SAMPLE_RATE);
    if (chunk.length === 0) return;
    audioChunks.push(chunk);
    let buffered = -audioChunkOffset;
    for (const c of audioChunks) buffered += c.length;
    const rate = audioPlayCtx?.sampleRate || AUDIO_SAMPLE_RATE;
    const max = Math.max(AUDIO_PLAYBACK_FRAME, Math.round(rate * (AUDIO_MAX_BUFFER_MS / 1000)));
    while (buffered > max && audioChunks.length > 0) {
      const dropped = audioChunks.shift();
      buffered -= dropped?.length || 0;
      audioChunkOffset = 0;
    }
  }

  const audioTransport = document.getElementById("audioTransport");
  const webrtcAudio = document.getElementById("webrtcAudio");
  let audioWhep = null;
  let audioP2P = null;
  function getAudioTransport() {
    return audioTransport ? String(audioTransport.value || "off") : "off";
  }

  async function stopAudioWebrtc() {
    const w = audioWhep;
    audioWhep = null;
    if (w) { try { await w.stop(); } catch {} }
    const p = audioP2P;
    audioP2P = null;
    if (p) { try { await p.stop(); } catch {} }
  }

  async function startAudioWhep(whepPath) {
    await stopAudioWebrtc();
    audioWhep = new WhepClient({
      whepPath,
      audioEl: webrtcAudio,
      onState: (s) => console.debug("audio-webrtc[Relayed]: state", s),
    });
    try {
      await audioWhep.start();
    } catch (err) {
      console.warn("audio: WHEP start failed", err);
      audioWhep = null;
    }
  }

  function startAudioP2P() {
    if (!audioWs || audioWs.readyState !== WebSocket.OPEN) return;
    audioP2P = new P2PClient({
      audioEl: webrtcAudio,
      send: (msg) => {
        if (audioWs && audioWs.readyState === WebSocket.OPEN) {
          audioWs.send(JSON.stringify(msg));
        }
      },
      onState: (s) => console.debug("audio-webrtc[P2P]: state", s),
    });
    audioP2P.start().catch((err) => {
      console.warn("audio: P2P start failed", err);
      audioP2P = null;
    });
  }

  function connectAudio() {
    if (audioWs && audioWs.readyState === WebSocket.OPEN) return;
    const mode = getAudioTransport();
    // The WS-PCM path requires an AudioContext — only init it when we
    // actually need it (WebRTC plays through the <audio> element instead).
    if (mode === "off") {
      initAudioPlayback();
      if (audioPlayCtx?.state === "suspended") audioPlayCtx.resume();
    }
    const proto = location.protocol === "https:" ? "wss:" : "ws:";
    // Each handler captures `ws` locally instead of reading the module-scope
    // `audioWs`. When the operator switches transports, the previous socket's
    // close event fires asynchronously and would otherwise null out the
    // freshly created replacement.
    const ws = new WebSocket(proto + "//" + location.host + "/api/clients/" + encodeURIComponent(clientId) + "/desktop-audio/ws");
    audioWs = ws;
    ws.binaryType = "arraybuffer";
    ws.onopen = function () {
      const start = { type: "start", source: "system" };
      if (mode === "relayed") start.webrtc = true;
      try { ws.send(JSON.stringify(start)); } catch (err) {
        console.warn("audio: send start failed", err);
        return;
      }
      if (mode === "p2p") startAudioP2P();
    };
    ws.onmessage = function (ev) {
      if (typeof ev.data === "string") {
        let msg;
        try { msg = JSON.parse(ev.data); } catch { return; }
        if (!msg || typeof msg.type !== "string") return;
        if (msg.type === "webrtc_ready" && typeof msg.whepPath === "string") {
          startAudioWhep(msg.whepPath);
          return;
        }
        if (msg.type === "webrtc_p2p_answer" && typeof msg.sdp === "string") {
          if (audioP2P) audioP2P.onAnswer(msg.sdp);
          return;
        }
        if (msg.type === "webrtc_p2p_ice") {
          if (audioP2P) audioP2P.onRemoteCandidate(msg);
          return;
        }
        return;
      }
      const bytes = new Uint8Array(ev.data);
      // Only feed PCM into the ScriptProcessor when the WS path is the active
      // playback — WebRTC modes ignore the parallel PCM uplink.
      if (mode === "off" && bytes.byteLength > 1) appendAudioPcm(bytes);
    };
    ws.onclose = function () {
      // Stale closes from a previous switch must not stomp the current
      // socket. Only do the global teardown if this WS is still active.
      if (audioWs === ws) {
        stopAudioWebrtc();
        cleanupAudio(false);
      }
    };
    ws.onerror = function () {};
  }

  function disconnectAudio(uncheckBox = true) {
    if (audioWs) {
      try { audioWs.send(JSON.stringify({ type: "stop" })); } catch {}
      try { audioWs.close(); } catch {}
      audioWs = null;
    }
    stopAudioWebrtc();
    cleanupAudio(uncheckBox);
  }

  function cleanupAudio(uncheckBox) {
    if (audioProcessorNode) {
      audioProcessorNode.disconnect();
      audioProcessorNode.onaudioprocess = null;
      audioProcessorNode = null;
    }
    if (audioPlayCtx) {
      audioPlayCtx.close().catch(function () {});
      audioPlayCtx = null;
    }
    audioChunks = [];
    audioChunkOffset = 0;
    audioWs = null;
    if (uncheckBox && audioCtrl) audioCtrl.checked = false;
  }

  function resetH264SessionState() {
    resetH264RuntimeState();
    h264RecoveryAttempts = 0;
    h264LastDecodeWarnAt = 0;
  }

  let savedDisplay = null;
  let savedStreamProfile = "auto";

  function setSelectValue(select, value) {
    if (!select || value === undefined || value === null) return false;
    const normalized = String(value);
    const exists = Array.from(select.options || []).some((opt) => opt.value === normalized);
    if (!exists) return false;
    select.value = normalized;
    return true;
  }

  function applySavedDisplay() {
    if (savedDisplay === null || savedDisplay === undefined) return;
    setSelectValue(displaySelect, savedDisplay);
  }

  function applySharedSettings(settings) {
    if (!settings || typeof settings !== "object") return;
    savedDisplay = Number.isFinite(Number(settings.display)) ? Number(settings.display) : savedDisplay;
    savedStreamProfile = settings.streamProfile ||
      ((settings.resolution !== undefined && settings.targetFps !== undefined)
        ? `${settings.resolution}:${settings.targetFps}`
        : savedStreamProfile);
    setSelectValue(streamProfileSelect, savedStreamProfile);
    setSelectValue(bitrateSelect, settings.bitrateMbps);
    setSelectValue(webrtcMode, settings.transportPreferenceVersion === CANVAS_TRANSPORT_PREF_VERSION ? settings.webrtcMode : "off");
    setSelectValue(audioTransport, settings.audioTransport);
    setSelectValue(recordMode, settings.recordMode);
    setSelectValue(recordFps, settings.recordFps);
    if (qualitySlider && settings.quality !== undefined) qualitySlider.value = String(settings.quality);
    if (smoothingSlider && settings.smoothing !== undefined) {
      smoothingSlider.value = String(settings.smoothing);
      smoothingPct = Number(smoothingSlider.value) || 0;
    }
    if (cursorCtrl && typeof settings.cursor === "boolean") cursorCtrl.checked = settings.cursor;
    if (hideLocalCursorCtrl && typeof settings.hideLocalCursor === "boolean") hideLocalCursorCtrl.checked = settings.hideLocalCursor;
    if (duplicationCtrl && typeof settings.duplication === "boolean") duplicationCtrl.checked = settings.duplication;
    if (softwareH264Ctrl && typeof settings.softwareH264 === "boolean") softwareH264Ctrl.checked = settings.softwareH264;
    if (clipboardSyncCtrl && typeof settings.clipboardSync === "boolean") clipboardSyncCtrl.checked = settings.clipboardSync;
    if (audioCtrl && typeof settings.audio === "boolean") audioCtrl.checked = settings.audio;
    if (typeof settings.preferH264 === "boolean") {
      prefersH264 = settings.preferH264 && typeof VideoDecoder === "function";
    }
    applySavedDisplay();
  }

  function readSharedSettings() {
    const profile = selectedStreamProfile();
    return {
      display: Number(displaySelect?.value || 0),
      streamProfile: streamProfileSelect?.value || "auto",
      // Keep the legacy fields so backstage and older remote-desktop builds that
      // share these preferences continue to receive equivalent settings.
      resolution: String(profile.maxHeight),
      targetFps: String(profile.fps),
      quality: Number(qualitySlider?.value || 90),
      bitrateMbps: Number(bitrateSelect?.value || 0),
      preferH264: !!prefersH264,
      webrtcMode: getWebrtcMode(),
      transportPreferenceVersion: CANVAS_TRANSPORT_PREF_VERSION,
      mouse: !!mouseCtrl?.checked,
      keyboard: !!kbdCtrl?.checked,
      cursor: !!cursorCtrl?.checked,
      hideLocalCursor: !!hideLocalCursorCtrl?.checked,
      duplication: !!duplicationCtrl?.checked,
      softwareH264: !!softwareH264Ctrl?.checked,
      clipboardSync: !!clipboardSyncCtrl?.checked,
      privacy: !!privacyCtrl?.checked,
      audio: !!audioCtrl?.checked,
      audioTransport: getAudioTransport(),
      smoothing: Number(smoothingSlider?.value || 0),
      recordMode: recordMode?.value || "normal",
      recordFps: recordFps?.value || "",
    };
  }

  let fileTransferWs = null;
  let fileTransferConnectPromise = null;
  const pendingDesktopUploads = new Map();
  let desktopUploadHideTimer = null;

  function hasDraggedFiles(event) {
    return Array.from(event.dataTransfer?.types || []).includes("Files");
  }

  function draggedFileLabel(dataTransfer) {
    const files = Array.from(dataTransfer?.files || []);
    if (files.length === 1) return files[0].name;
    if (files.length > 1) return `${files.length} files`;
    const count = Array.from(dataTransfer?.items || []).filter((item) => item.kind === "file").length;
    return count === 1 ? "Copy file" : (count > 1 ? `Copy ${count} files` : "Copy files");
  }

  function setDesktopFileDragUi(active, event) {
    if (!rdFileDropOverlay) return;
    rdFileDropOverlay.hidden = !active;
    rdFileDropOverlay.setAttribute("aria-hidden", active ? "false" : "true");
    if (!active || !event || !rdFileDragGhost || !renderSurface) return;
    if (rdFileDragLabel) rdFileDragLabel.textContent = draggedFileLabel(event.dataTransfer);
    const rect = renderSurface.getBoundingClientRect();
    const x = Math.max(0, Math.min(rect.width - 40, event.clientX - rect.left));
    const y = Math.max(0, Math.min(rect.height - 40, event.clientY - rect.top));
    rdFileDragGhost.style.left = `${x}px`;
    rdFileDragGhost.style.top = `${y}px`;
  }

  function showDesktopUploadStatus(text, progress, state = "uploading") {
    if (!rdUploadStatus) return;
    if (desktopUploadHideTimer) {
      clearTimeout(desktopUploadHideTimer);
      desktopUploadHideTimer = null;
    }
    rdUploadStatus.hidden = false;
    if (rdUploadStatusText) rdUploadStatusText.textContent = text;
    if (rdUploadProgressBar) {
      rdUploadProgressBar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
      rdUploadProgressBar.style.background = state === "error" ? "#fb7185" : (state === "success" ? "#34d399" : "#38bdf8");
    }
    if (rdUploadStatusIcon) {
      rdUploadStatusIcon.className = state === "error"
        ? "fa-solid fa-circle-exclamation"
        : (state === "success" ? "fa-solid fa-circle-check" : "fa-solid fa-cloud-arrow-up");
      rdUploadStatusIcon.style.color = state === "error" ? "#fb7185" : (state === "success" ? "#34d399" : "#38bdf8");
    }
    if (state !== "uploading") {
      desktopUploadHideTimer = setTimeout(() => { rdUploadStatus.hidden = true; }, state === "success" ? 3500 : 6500);
    }
  }

  function rejectPendingDesktopUploads(error) {
    for (const pending of pendingDesktopUploads.values()) {
      clearTimeout(pending.timeout);
      pending.reject(error);
    }
    pendingDesktopUploads.clear();
  }

  function handleFileTransferMessage(event) {
    const msg = decodeMsgpack(event.data);
    if (!msg) return;
    if (msg.type === "command_error") {
      rejectPendingDesktopUploads(new Error(msg.error || "Remote file transfer was rejected"));
      return;
    }
    if (msg.type !== "command_result" || typeof msg.commandId !== "string") return;
    const pending = pendingDesktopUploads.get(msg.commandId);
    if (!pending) return;
    pendingDesktopUploads.delete(msg.commandId);
    clearTimeout(pending.timeout);
    if (msg.ok) pending.resolve(msg);
    else pending.reject(new Error(msg.message || "Remote file transfer failed"));
  }

  function ensureFileTransferSocket() {
    if (fileTransferWs?.readyState === WebSocket.OPEN) return Promise.resolve(fileTransferWs);
    if (fileTransferConnectPromise) return fileTransferConnectPromise;

    fileTransferConnectPromise = new Promise((resolve, reject) => {
      const protocol = location.protocol === "https:" ? "wss:" : "ws:";
      const socket = new WebSocket(`${protocol}//${location.host}/api/clients/${encodeURIComponent(clientId)}/files/ws`);
      socket.binaryType = "arraybuffer";
      const timeout = setTimeout(() => {
        try { socket.close(); } catch {}
        reject(new Error("File transfer connection timed out"));
      }, 10_000);
      socket.addEventListener("open", () => {
        clearTimeout(timeout);
        fileTransferWs = socket;
        resolve(socket);
      }, { once: true });
      socket.addEventListener("message", handleFileTransferMessage);
      socket.addEventListener("error", () => {
        if (socket.readyState !== WebSocket.OPEN) {
          clearTimeout(timeout);
          reject(new Error("File upload permission is unavailable"));
        }
      });
      socket.addEventListener("close", () => {
        clearTimeout(timeout);
        if (fileTransferWs === socket) fileTransferWs = null;
        rejectPendingDesktopUploads(new Error("File transfer connection closed"));
      });
    }).finally(() => {
      fileTransferConnectPromise = null;
    });
    return fileTransferConnectPromise;
  }

  function waitForDesktopUpload(commandId) {
    return new Promise((resolve, reject) => {
      const timeout = setTimeout(() => {
        pendingDesktopUploads.delete(commandId);
        reject(new Error("Timed out waiting for the remote file transfer"));
      }, 30 * 60 * 1000);
      pendingDesktopUploads.set(commandId, { resolve, reject, timeout });
    });
  }

  async function stageDesktopUpload(file, progressBase, progressSpan) {
    const request = await fetch("/api/file/upload/request", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ clientId, path: file.name, fileName: file.name }),
    });
    if (!request.ok) throw new Error((await request.text()) || "Upload request failed");
    const intent = await request.json();
    if (!intent?.uploadUrl) throw new Error("Upload request did not return a staging URL");

    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", intent.uploadUrl, true);
      xhr.withCredentials = true;
      xhr.responseType = "text";
      xhr.timeout = 30 * 60 * 1000;
      xhr.setRequestHeader("Content-Type", "application/octet-stream");
      xhr.upload.onprogress = (uploadEvent) => {
        const total = uploadEvent.total || file.size || 1;
        const ratio = Math.max(0, Math.min(1, uploadEvent.loaded / total));
        showDesktopUploadStatus(`Copying ${file.name} to the remote target…`, progressBase + ratio * progressSpan);
      };
      xhr.onerror = () => reject(new Error("Upload staging failed"));
      xhr.ontimeout = () => reject(new Error("Upload staging timed out"));
      xhr.onload = () => {
        if (xhr.status < 200 || xhr.status >= 300) {
          reject(new Error(xhr.responseText || "Upload staging failed"));
          return;
        }
        try {
          const staged = xhr.responseText ? JSON.parse(xhr.responseText) : {};
          if (!staged.pullUrl) throw new Error("Upload staging did not return a pull URL");
          resolve(staged);
        } catch (error) {
          reject(error);
        }
      };
      xhr.send(file);
    });
  }

  async function uploadFilesToRemoteDesktop(files, dropPoint) {
    if (!desktopFileUploadSupported) {
      throw new Error("Update the remote agent to enable integrated desktop file drop");
    }
    const socket = await ensureFileTransferSocket();
    const totalFiles = files.length;
    for (let index = 0; index < totalFiles; index += 1) {
      const file = files[index];
      const fileBase = (index / totalFiles) * 100;
      const fileSpan = 100 / totalFiles;
      showDesktopUploadStatus(`Preparing ${file.name}…`, fileBase);
      const staged = await stageDesktopUpload(file, fileBase, fileSpan * 0.72);
      const commandId = `rd-desktop-upload-${Date.now()}-${index}-${Math.random().toString(36).slice(2)}`;
      const completed = waitForDesktopUpload(commandId);
      socket.send(encodeMsgpack({
        type: "command",
        commandType: "file_upload_desktop",
        id: commandId,
        payload: {
          fileName: file.name,
          url: staged.pullUrl,
          total: file.size,
          display: Number(displaySelect?.value || 0),
          x: dropPoint.x + index * 18,
          y: dropPoint.y + index * 18,
        },
      }));
      showDesktopUploadStatus(`Dropping ${file.name} at the remote pointer…`, fileBase + fileSpan * 0.78);
      await completed;
      showDesktopUploadStatus(`Copied ${file.name} to the remote target`, fileBase + fileSpan);
    }
    showDesktopUploadStatus(`${totalFiles} file${totalFiles === 1 ? "" : "s"} copied to the remote target`, 100, "success");
  }

  function setupRemoteDesktopFileDrop() {
    if (!renderSurface) return;
    renderSurface.addEventListener("dragenter", (event) => {
      if (!hasDraggedFiles(event)) return;
      event.preventDefault();
      if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
      setDesktopFileDragUi(true, event);
    });
    renderSurface.addEventListener("dragover", (event) => {
      if (!hasDraggedFiles(event)) return;
      event.preventDefault();
      if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
      setDesktopFileDragUi(true, event);
    });
    renderSurface.addEventListener("dragleave", (event) => {
      if (!hasDraggedFiles(event)) return;
      if (event.relatedTarget instanceof Node && renderSurface.contains(event.relatedTarget)) return;
      setDesktopFileDragUi(false);
    });
    renderSurface.addEventListener("drop", async (event) => {
      if (!hasDraggedFiles(event)) return;
      event.preventDefault();
      event.stopPropagation();
      setDesktopFileDragUi(false);
      const files = Array.from(event.dataTransfer?.files || []);
      if (files.length === 0) return;
      const dropPoint = getRenderPoint(event);
      if (!dropPoint) return;
      try {
        await uploadFilesToRemoteDesktop(files, dropPoint);
      } catch (error) {
        console.error("rd: desktop file drop failed", error);
        showDesktopUploadStatus(error instanceof Error ? error.message : "Remote desktop file transfer failed", 100, "error");
      }
    });
    document.addEventListener("dragend", () => setDesktopFileDragUi(false));
  }

  applySharedSettings(await loadSharedUiSettings("remote_desktop"));
  // Interactive input is intentionally session-scoped: opening any client's
  // page must require the operator to opt in again, regardless of saved UI
  // settings. Cursor capture remains a separate persisted preference.
  if (mouseCtrl) mouseCtrl.checked = false;
  if (kbdCtrl) kbdCtrl.checked = false;
  const sharedSettingsSaver = createSharedUiSettingsSaver("remote_desktop", readSharedSettings);

  if (codecH264) {
    codecH264.checked = prefersH264;
    codecH264.disabled = typeof VideoDecoder !== "function";
  }
  if (softwareH264Ctrl) {
    softwareH264Ctrl.disabled = !prefersH264;
  }

  function setCodecModeLabel(mode, detail) {
    if (!codecMode) return;
    const suffix = detail ? ` (${detail})` : "";
    codecMode.textContent = `Codec: ${String(mode || "auto").toUpperCase()}${suffix}`;
  }

  setCodecModeLabel(prefersH264 ? "h264" : "jpeg", "preferred");

  setStreamState("connecting", "Connecting");

  function updateFpsDisplay(agentValue) {
    if (agentValue !== undefined && agentValue !== null && agentFps) {
      agentFps.textContent = String(agentValue);
      diagnostics.currentAgentFps = Number(agentValue) || null;
    }
    const now = performance.now();
    renderCount += 1;
    const elapsed = now - renderWindowStart;
    if (elapsed >= 1000 && viewerFps) {
      const fps = Math.round((renderCount * 1000) / elapsed);
      viewerFps.textContent = String(fps);
      diagnostics.currentViewerFps = fps;
      renderCount = 0;
      renderWindowStart = now;
    }
  }

  function setStreamState(state, text) {
    streamState = state;
    streamStatusLabel = text || defaultStreamLabel(state);
    if (state === "offline" || state === "disconnected" || state === "error") {
      lastRemoteCursor = null;
    }
    renderRemoteCursor();
    if (statusEl) {
      const icons = {
        connecting: '<i class="fa-solid fa-circle-notch fa-spin"></i>',
        starting: '<i class="fa-solid fa-circle-notch fa-spin"></i>',
        stopping: '<i class="fa-solid fa-circle-notch fa-spin"></i>',
        streaming: '<i class="fa-solid fa-circle text-emerald-400"></i>',
        idle: '<i class="fa-solid fa-circle text-slate-400"></i>',
        stalled: '<i class="fa-solid fa-triangle-exclamation text-amber-400"></i>',
        offline: '<i class="fa-solid fa-plug-circle-xmark text-rose-400"></i>',
        disconnected: '<i class="fa-solid fa-link-slash text-slate-400"></i>',
        error: '<i class="fa-solid fa-circle-exclamation text-rose-400"></i>',
      };
      const label = streamStatusLabel;
      statusEl.innerHTML = `${icons[state] || icons.idle} <span>${label}</span>`;
      const base = "inline-flex items-center gap-2 px-3 py-2 rounded-full border text-sm";
      const styles = {
        streaming: "bg-emerald-900/40 text-emerald-100 border-emerald-700/70",
        starting: "bg-sky-900/40 text-sky-100 border-sky-700/70",
        stopping: "bg-amber-900/40 text-amber-100 border-amber-700/70",
        stalled: "bg-amber-900/40 text-amber-100 border-amber-700/70",
        offline: "bg-rose-900/40 text-rose-100 border-rose-700/70",
        error: "bg-rose-900/40 text-rose-100 border-rose-700/70",
        disconnected: "bg-slate-800 text-slate-300 border-slate-700",
        idle: "bg-slate-800 text-slate-300 border-slate-700",
        connecting: "bg-slate-800 text-slate-300 border-slate-700",
      };
      statusEl.className = `${base} ${styles[state] || styles.idle}`;
    }

    if (canvasContainer) {
      canvasContainer.dataset.streamState = state;
    }

    if (state === "idle" || state === "offline" || state === "disconnected" || state === "error") {
      if (agentFps) agentFps.textContent = "--";
      if (viewerFps) viewerFps.textContent = "--";
      renderCount = 0;
      renderWindowStart = performance.now();
    }

    updateControls();
    checkClipboardSync();
    renderRemoteDesktopOverlays();
  }

  function updateControls() {
    const wsOpen = ws && ws.readyState === WebSocket.OPEN;
    const isStarting = streamState === "starting";
    const isStreaming = streamState === "streaming";
    const isStopping = streamState === "stopping";
    const isStalled = streamState === "stalled";
    const isBlocked = streamState === "offline" || streamState === "disconnected" || streamState === "error";
    const recordingActive = isRecording();

    if (startBtn) {
      startBtn.disabled = !wsOpen || isStarting || isStreaming || isStopping || isBlocked;
    }
    if (stopBtn) {
      stopBtn.disabled = !wsOpen || (!isStarting && !isStreaming && !isStopping && !isStalled);
    }
    if (requestKeyframeBtn) {
      requestKeyframeBtn.disabled = !wsOpen || (!isStreaming && !isStalled);
    }
    if (recordBtn) {
      recordBtn.disabled =
        !recordingActive &&
        (!wsOpen || (!isStreaming && !isStalled) || getWebrtcMode() !== "off");
    }
    if (recordMode) {
      recordMode.disabled = recordingActive;
    }
    if (recordFps) {
      recordFps.disabled = recordingActive;
    }
    if (rdRecordingSettingsBtn) {
      rdRecordingSettingsBtn.disabled = recordingActive;
    }
  }

  function isRecording() {
    return !!serverRecording && ["starting", "recording", "stopping"].includes(serverRecording.status);
  }

  function formatRecordingDuration(ms) {
    const totalSeconds = Math.max(0, Math.floor(ms / 1000));
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  }

  function numericRecordingValue(value, fallback = 0) {
    if (typeof value === "bigint") return Number(value);
    const num = Number(value);
    return Number.isFinite(num) ? num : fallback;
  }

  function normalizeRecordingSummary(recording) {
    if (!recording) return null;
    const normalized = { ...recording };
    normalized.startedAt = numericRecordingValue(recording.startedAt, Date.now());
    if (recording.stoppedAt != null) normalized.stoppedAt = numericRecordingValue(recording.stoppedAt);
    for (const key of ["sourceFps", "targetFps", "segmentSeconds", "framesWritten", "framesDropped", "framesSkipped", "bytesWritten"]) {
      if (recording[key] != null) normalized[key] = numericRecordingValue(recording[key]);
    }
    if (Array.isArray(recording.files)) {
      normalized.files = recording.files.map((file) => ({
        ...file,
        size: numericRecordingValue(file?.size),
      }));
    }
    return normalized;
  }

  function selectedRecordingFps() {
    const fps = Number(recordFps?.value || 0);
    return Number.isFinite(fps) && fps > 0
      ? Math.max(1, Math.min(120, Math.floor(fps)))
      : 0;
  }

  function setRecordingUi(active) {
    if (!recordBtn) return;
    if (active) {
      recordBtn.classList.add("recording");
      recordBtn.title = "Stop recording";
      const startedAt = numericRecordingValue(serverRecording?.startedAt, Date.now());
      const elapsed = Date.now() - startedAt;
      const label = serverRecording?.status === "stopping"
        ? "Stopping"
        : formatRecordingDuration(elapsed);
      recordBtn.innerHTML = `<i class="fa-solid fa-stop"></i><span>${label}</span>`;
    } else {
      recordBtn.classList.remove("recording");
      recordBtn.title = "Record on the server using Canvas transport";
      recordBtn.innerHTML = '<i class="fa-solid fa-circle-dot"></i><span>Record</span>';
    }
  }

  function clearRecordingTimer() {
    if (recordingTimer) {
      clearInterval(recordingTimer);
      recordingTimer = null;
    }
  }

  function ensureRecordingTimer() {
    if (recordingTimer || !isRecording()) return;
    recordingTimer = setInterval(() => setRecordingUi(true), 1000);
  }

  function downloadRecordingFile(file) {
    if (!file?.downloadUrl) return false;
    console.debug("rd: recording download", {
      name: file.name || "",
      size: file.size || 0,
      url: file.downloadUrl,
    });
    const link = document.createElement("a");
    link.href = file.downloadUrl;
    link.download = file.name || "remote-desktop-recording.mp4";
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    link.remove();
    return true;
  }

  function renderRecordingDownloads(recording) {
    if (!recording || !Array.isArray(recording.files) || recording.files.length === 0) return false;
    const mp4Files = recording.files.filter((file) => String(file?.name || "").toLowerCase().endsWith(".mp4"));
    const files = mp4Files.length ? mp4Files : recording.files;
    const latest = files[files.length - 1];
    if (!latest?.downloadUrl) return false;
    const message = recording.files.length === 1
      ? "Recording saved on the server."
      : `Recording saved on the server in ${recording.files.length} segments.`;
    console.info(message, recording.files);
    return downloadRecordingFile(latest);
  }

  function handleRecordingStatus(msg) {
    if (msg?.error) {
      alert(msg.error);
    }
    const previousId = serverRecording?.id || "";
    const previousActive = isRecording();
    serverRecording = normalizeRecordingSummary(msg?.recording);
    console.debug("rd: recording status", {
      status: serverRecording?.status || "none",
      id: serverRecording?.id || "",
      framesWritten: serverRecording?.framesWritten,
      framesSkipped: serverRecording?.framesSkipped,
      framesDropped: serverRecording?.framesDropped,
      files: Array.isArray(serverRecording?.files) ? serverRecording.files.length : 0,
      pendingDownloadId: pendingRecordingDownloadId,
    });
    const active = isRecording();
    if (active) {
      ensureRecordingTimer();
      setRecordingUi(true);
    } else {
      clearRecordingTimer();
      setRecordingUi(false);
    }
    updateControls();

    const completed =
      previousActive &&
      serverRecording &&
      serverRecording.id === previousId &&
      (serverRecording.status === "stopped" || serverRecording.status === "failed");
    const shouldDownload =
      serverRecording?.status === "stopped" &&
      pendingRecordingDownloadId &&
      (pendingRecordingDownloadId === "__pending__" || serverRecording.id === pendingRecordingDownloadId);
    if (completed || shouldDownload) {
      if (serverRecording.status === "failed") {
        alert(`Server recording failed: ${serverRecording.error || "Unknown error"}`);
        pendingRecordingDownloadId = "";
      } else if (shouldDownload) {
        if (renderRecordingDownloads(serverRecording)) {
          pendingRecordingDownloadId = "";
        } else if (serverRecording.status === "stopped") {
          alert("Server recording stopped, but no downloadable MP4 was produced.");
          pendingRecordingDownloadId = "";
        }
      }
    }
  }

  function startRecording() {
    if (isRecording()) return;
    if (getWebrtcMode() !== "off") {
      alert("Server-side recording uses the Canvas transport. Switch Transport to Canvas before recording.");
      return;
    }
    if (streamState !== "streaming" && streamState !== "stalled") {
      alert("Start the remote desktop stream before recording.");
      return;
    }
    serverRecording = {
      id: "",
      status: "starting",
      startedAt: Date.now(),
      files: [],
    };
    setRecordingUi(true);
    ensureRecordingTimer();
    updateControls();
    const requestedFps = selectedRecordingFps();
    const command = {
      compact: recordMode?.value === "compact",
    };
    if (requestedFps > 0) command.fps = requestedFps;
    console.debug("rd: recording start", {
      streamState,
      transport: getWebrtcMode(),
      requestedFps: requestedFps || "source",
      mode: recordMode?.value || "normal",
    });
    sendCmd("desktop_record_start", command);
  }

  function stopRecording() {
    if (!isRecording()) return;
    pendingRecordingDownloadId = serverRecording?.id || "__pending__";
    serverRecording = { ...serverRecording, status: "stopping" };
    setRecordingUi(true);
    updateControls();
    console.debug("rd: recording stop", {
      id: pendingRecordingDownloadId,
      framesWritten: serverRecording?.framesWritten,
      framesSkipped: serverRecording?.framesSkipped,
      framesDropped: serverRecording?.framesDropped,
    });
    sendCmd("desktop_record_stop", {});
  }

  function startClipboardSync() {
    if (clipboardSyncActive) return;
    clipboardSyncActive = true;
    lastClipboardText = "";
    sendCmd("clipboard_sync_start", {});
    clipboardSyncTimer = setInterval(async () => {
      if (!clipboardSyncCtrl || !clipboardSyncCtrl.checked || streamState !== "streaming") {
        stopClipboardSync();
        return;
      }
      try {
        const text = await navigator.clipboard.readText();
        if (text && text !== lastClipboardText) {
          lastClipboardText = text;
          sendCmd("clipboard_sync", { text });
        }
      } catch {}
    }, 1500);
  }

  function stopClipboardSync() {
    if (!clipboardSyncActive) return;
    clipboardSyncActive = false;
    if (clipboardSyncTimer) {
      clearInterval(clipboardSyncTimer);
      clipboardSyncTimer = null;
    }
    sendCmd("clipboard_sync_stop", {});
  }

  function checkClipboardSync() {
    const shouldSync = clipboardSyncCtrl && clipboardSyncCtrl.checked && streamState === "streaming";
    if (shouldSync && !clipboardSyncActive) {
      startClipboardSync();
    } else if (!shouldSync && clipboardSyncActive) {
      stopClipboardSync();
    }
  }

  if (clipboardSyncCtrl) {
    clipboardSyncCtrl.addEventListener("change", function () {
      checkClipboardSync();
      sharedSettingsSaver.scheduleSave();
    });
  }

  if (privacyCtrl) {
    privacyCtrl.addEventListener("change", function () {
      pushPrivacyToggle();
      sharedSettingsSaver.scheduleSave();
    });
  }

  function updateLatency(ms) {
    if (ms < 0 || !Number.isFinite(ms)) return;
    latencyAvg = latencyAvg == null ? ms : latencyAvg * 0.8 + ms * 0.2;
    if (inputLatency) {
      inputLatency.textContent = directInputActive ? "P2P direct" : `${Math.round(latencyAvg)} ms`;
    }
  }

  function finite(value) {
    return Number.isFinite(value) ? Number(value) : null;
  }

  function smoothed(previous, next, weight = 0.25) {
    const value = finite(next);
    if (value == null) return previous;
    return previous == null ? value : previous * (1 - weight) + value * weight;
  }

  function msText(value) {
    const number = finite(value);
    return number == null ? "-- ms" : `${number < 10 ? number.toFixed(1) : Math.round(number)} ms`;
  }

  function defaultStreamLabel(state) {
    return state === "streaming" ? "Streaming" :
      state === "starting" ? "Starting" :
        state === "stopping" ? "Stopping" :
          state === "offline" ? "Client offline" :
            state === "disconnected" ? "Disconnected" :
              state === "stalled" ? "No frames" :
                state === "idle" ? "Stopped" :
                  "Connecting";
  }

  function currentDiagnosticSnapshot() {
    const agent = diagnostics.agent || {};
    const network = diagnostics.network || {};
    const media = network.video || network.audio || {};
    const mode = getWebrtcMode();
    const transport = mode === "p2p" ? "WebRTC P2P" : mode === "relayed" ? "WebRTC server" : "Canvas WebSocket";
    const bitrate = finite(media.bitrateMbps) ?? finite(diagnostics.wsBitrateMbps);
    const fps = finite(agent.fps) ?? diagnostics.currentAgentFps;
    const viewerRate = finite(media.framesPerSecond) ?? diagnostics.currentViewerFps;
    const width = finite(media.width) ?? diagnostics.width;
    const height = finite(media.height) ?? diagnostics.height;
    return {
      agent,
      network,
      media,
      transport,
      bitrate,
      decodeMs: finite(media.decodeMs) ?? finite(diagnostics.decodeMs),
      renderMs: finite(media.processingDelayMs) ?? finite(diagnostics.renderMs),
      dropped: finite(media.framesDropped) ?? 0,
      queue: mode === "off" ? diagnostics.decodeQueue : null,
      fps,
      viewerRate,
      width,
      height,
      codec: String(media.codec || agent.format || diagnostics.codec || "--").toUpperCase(),
      resolution: width && height ? `${width}×${height}` : "--",
    };
  }

  function nextTransportValue() {
    const mode = getWebrtcMode();
    return mode === "off" ? "p2p" : mode === "p2p" ? "relayed" : "off";
  }

  function transportLabel(value) {
    return value === "p2p" ? "WebRTC P2P" : value === "relayed" ? "WebRTC Relayed" : "Canvas";
  }

  function setFullscreenHudTucked(tucked, persist = true) {
    fullscreenHudTucked = !!tucked;
    fullscreenHud?.classList.toggle("is-tucked", fullscreenHudTucked);
    fsHudTuckBtn?.setAttribute("aria-pressed", fullscreenHudTucked ? "true" : "false");
    fsHudTuckBtn?.setAttribute("title", fullscreenHudTucked ? "Show fullscreen stats" : "Tuck away fullscreen stats");
    const icon = fsHudTuckBtn?.querySelector("i");
    const label = fsHudTuckBtn?.querySelector("span");
    if (icon) {
      icon.classList.toggle("fa-chevron-down", !fullscreenHudTucked);
      icon.classList.toggle("fa-chevron-up", fullscreenHudTucked);
    }
    if (label) label.textContent = fullscreenHudTucked ? "Show" : "Hide";
    if (persist) {
      try { localStorage.setItem("overlord.rd.fullscreenHudTucked", fullscreenHudTucked ? "1" : "0"); } catch {}
    }
    renderFullscreenHud();
  }

  function showFullscreenHud(pinned = false) {
    if (!fullscreenHud) return;
    const active = isCanvasFullscreen();
    fullscreenHud.setAttribute("aria-hidden", active ? "false" : "true");
    fullscreenHud.classList.toggle("is-visible", active);
    if (fullscreenHudTimer) {
      clearTimeout(fullscreenHudTimer);
      fullscreenHudTimer = null;
    }
    if (active && !fullscreenHudTucked && !pinned && streamState === "streaming" && diagnosticsHud?.classList.contains("hidden")) {
      fullscreenHudTimer = setTimeout(() => {
        fullscreenHud.classList.remove("is-visible");
      }, 2400);
    }
  }

  function renderFullscreenHud() {
    if (!fullscreenHud) return;
    const snapshot = currentDiagnosticSnapshot();
    if (fsHudStateDot) fsHudStateDot.dataset.state = streamState;
    if (fsHudStatus) fsHudStatus.textContent = streamStatusLabel;
    if (fsHudResolution) fsHudResolution.textContent = snapshot.resolution;
    if (fsHudCodec) fsHudCodec.textContent = snapshot.codec;
    if (fsHudFps) {
      fsHudFps.textContent = `${snapshot.fps == null ? "--" : Math.round(snapshot.fps)} → ${snapshot.viewerRate == null ? "--" : Math.round(snapshot.viewerRate)} FPS`;
    }
    if (fsHudLatency) fsHudLatency.textContent = directInputActive ? "P2P direct input" : `${msText(latencyAvg)} input`;
    if (fsHudNetwork) {
      const networkParts = [];
      if (snapshot.bitrate != null) networkParts.push(`${snapshot.bitrate.toFixed(1)} Mbps`);
      if (Number.isFinite(snapshot.network.rttMs)) networkParts.push(`${Math.round(snapshot.network.rttMs)} ms`);
      if (Number.isFinite(snapshot.media.lossPercent)) networkParts.push(`${snapshot.media.lossPercent.toFixed(1)}% loss`);
      fsHudNetwork.textContent = networkParts.join(" · ") || snapshot.transport;
    }
    if (isCanvasFullscreen()) {
      fullscreenHud.setAttribute("aria-hidden", "false");
      if (fullscreenHudTucked || streamState !== "streaming" || !diagnosticsHud?.classList.contains("hidden")) {
        showFullscreenHud(true);
      }
    } else {
      fullscreenHud.classList.remove("is-visible");
      fullscreenHud.setAttribute("aria-hidden", "true");
    }
  }

  function renderStateOverlay() {
    if (!rdStateOverlay) return;
    const show = streamState !== "streaming" && streamState !== "idle";
    rdStateOverlay.hidden = !show;
    if (!show) return;

    const iconClasses = {
      connecting: "fa-solid fa-circle-notch fa-spin",
      starting: "fa-solid fa-circle-notch fa-spin",
      stopping: "fa-solid fa-circle-notch fa-spin",
      stalled: "fa-solid fa-triangle-exclamation",
      offline: "fa-solid fa-plug-circle-xmark",
      disconnected: "fa-solid fa-link-slash",
      error: "fa-solid fa-circle-exclamation",
    };
    const details = {
      connecting: "Waiting for the control connection to recover.",
      starting: "Starting capture and waiting for the first frame.",
      stopping: "Stopping the remote desktop stream.",
      stalled: "The viewer has not received a frame recently. Request a keyframe or restart the stream.",
      offline: "The client is not currently reachable.",
      disconnected: "The viewer WebSocket is disconnected.",
      error: "The remote desktop stream hit an error.",
    };
    if (rdStateIcon) rdStateIcon.className = iconClasses[streamState] || iconClasses.connecting;
    if (rdStateTitle) rdStateTitle.textContent = streamStatusLabel;
    if (rdStateDetail) rdStateDetail.textContent = details[streamState] || details.connecting;

    const canKeyframe = streamState === "stalled";
    const wsOpen = ws && ws.readyState === WebSocket.OPEN;
    if (rdStateKeyframeBtn) rdStateKeyframeBtn.hidden = !canKeyframe;
    if (rdStateRestartBtn) {
      rdStateRestartBtn.hidden = !wsOpen || streamState === "offline" || streamState === "disconnected";
      rdStateRestartBtn.textContent = "Restart stream";
    }
    if (rdStateTransportBtn) {
      rdStateTransportBtn.hidden = !wsOpen || streamState !== "stalled";
      rdStateTransportBtn.textContent = `Switch to ${transportLabel(nextTransportValue())}`;
    }
  }

  function renderRemoteDesktopOverlays() {
    renderFullscreenHud();
    renderStateOverlay();
  }

  function setDiagnosticsVisible(visible) {
    if (!diagnosticsHud) return;
    diagnosticsHud.classList.toggle("hidden", !visible);
    diagnosticsBtn?.setAttribute("aria-pressed", visible ? "true" : "false");
    try { localStorage.setItem("overlord.rd.statsHud", visible ? "1" : "0"); } catch {}
    renderFullscreenHud();
  }

  function renderDiagnostics() {
    if (!diagnosticsHud) return;
    const agent = diagnostics.agent || {};
    const network = diagnostics.network || {};
    const media = network.video || network.audio || {};
    const mode = getWebrtcMode();
    const transport = mode === "p2p" ? "WebRTC P2P" : mode === "relayed" ? "WebRTC server" : "Canvas WebSocket";
    const bitrate = finite(media.bitrateMbps) ?? finite(diagnostics.wsBitrateMbps);
    const decodeMs = finite(media.decodeMs) ?? finite(diagnostics.decodeMs);
    const renderMs = finite(media.processingDelayMs) ?? finite(diagnostics.renderMs);
    const dropped = finite(media.framesDropped) ?? 0;
    const queue = mode === "off" ? diagnostics.decodeQueue : null;
    const fps = finite(agent.fps) ?? diagnostics.currentAgentFps;
    const viewerRate = finite(media.framesPerSecond) ?? diagnostics.currentViewerFps;
    const frameBudget = 1000 / Math.max(1, fps || viewerRate || 30);

    let summary = "Pipeline healthy";
    let severity = "ok";
    if (streamState !== "streaming" && streamState !== "stalled") {
      summary = "Stream is not active";
      severity = "warn";
    } else if (finite(agent.captureMs) > frameBudget * 0.75) {
      summary = "Capture is limiting frame rate";
      severity = "bad";
    } else if (finite(agent.encodeMs) > frameBudget * 0.75) {
      summary = "Encoder is limiting frame rate";
      severity = "bad";
    } else if (decodeMs != null && decodeMs > frameBudget * 0.75) {
      const viewerKeepingUp = fps != null && viewerRate != null && viewerRate >= fps * 0.9;
      summary = viewerKeepingUp
        ? `Decoder buffering adds ${Math.round(decodeMs)} ms`
        : "Viewer decoder throughput is limiting FPS";
      severity = viewerKeepingUp ? "warn" : "bad";
    } else if ((finite(media.lossPercent) ?? 0) > 3 || (finite(network.rttMs) ?? 0) > 150 || (finite(media.jitterMs) ?? 0) > 35) {
      summary = "Network conditions are causing delay";
      severity = "bad";
    } else if ((finite(media.jitterBufferMs) ?? 0) > Math.max(80, frameBudget * 4)) {
      summary = `Browser playout buffer is adding ${Math.round(media.jitterBufferMs)} ms`;
      severity = "bad";
    } else if (
      fps != null &&
      viewerRate != null &&
      viewerRate < fps * 0.8
    ) {
      summary = `Viewer is presenting ${Math.round(viewerRate)} of ${Math.round(fps)} FPS`;
      severity = "warn";
    } else if ((queue ?? 0) > 2 || (renderMs != null && renderMs > frameBudget)) {
      summary = "Viewer render queue is backing up";
      severity = "warn";
    } else if (!diagnostics.agent && !diagnostics.network) {
      summary = "Waiting for stream telemetry";
      severity = "warn";
    }

    diagnosticEls.Summary.textContent = summary;
    diagnosticEls.Summary.dataset.severity = severity;
    diagnosticEls.Transport.textContent = transport;
    diagnosticEls.Codec.textContent = String(media.codec || agent.format || diagnostics.codec || "--").toUpperCase();
    const width = finite(media.width) ?? diagnostics.width;
    const height = finite(media.height) ?? diagnostics.height;
    diagnosticEls.Resolution.textContent = width && height ? `${width}×${height}` : "--";
    diagnosticEls.Capture.textContent = msText(agent.captureMs);
    diagnosticEls.Encode.textContent = msText(agent.encodeMs);
    diagnosticEls.Send.textContent = msText(agent.sendMs);
    diagnosticEls.AgentTotal.textContent = msText(agent.totalMs);
    diagnosticEls.Bitrate.textContent = bitrate == null ? "-- Mbps" : `${bitrate.toFixed(2)} Mbps`;
    diagnosticEls.Rtt.textContent = msText(network.rttMs);
    diagnosticEls.LossJitter.textContent = `${finite(media.lossPercent)?.toFixed(1) ?? "--"}% / ${msText(media.jitterMs)}`;
    diagnosticEls.JitterBuffer.textContent = msText(media.jitterBufferMs);
    diagnosticEls.Decode.textContent = msText(decodeMs);
    diagnosticEls.Render.textContent = msText(renderMs);
    diagnosticEls.Queue.textContent = queue == null ? "managed by browser" : String(queue);
    diagnosticEls.Dropped.textContent = `${Math.round(dropped)} / ${diagnostics.coalescedFrames}`;
    diagnosticEls.Fps.textContent = `${fps == null ? "--" : Math.round(fps)} → ${viewerRate == null ? "--" : Math.round(viewerRate)}`;
    diagnosticEls.Input.textContent = directInputActive ? "P2P direct" : msText(latencyAvg);
    renderFullscreenHud();
  }

  diagnosticsBtn?.addEventListener("click", () => setDiagnosticsVisible(diagnosticsHud?.classList.contains("hidden")));
  diagnosticsClose?.addEventListener("click", () => setDiagnosticsVisible(false));
  networkStats?.addEventListener("click", () => setDiagnosticsVisible(true));
  try { setDiagnosticsVisible(localStorage.getItem("overlord.rd.statsHud") === "1"); } catch {}
  setInterval(renderDiagnostics, 250);

  function updateNetworkStats(stats) {
    if (!networkStats || !stats) return;
    diagnostics.network = stats;
    const media = stats.video || stats.audio;
    const parts = [];
    if (Number.isFinite(media?.bitrateMbps)) parts.push(`${media.bitrateMbps.toFixed(1)} Mbps`);
    if (Number.isFinite(stats.rttMs)) parts.push(`${Math.round(stats.rttMs)} ms`);
    if (Number.isFinite(media?.lossPercent)) parts.push(`${media.lossPercent.toFixed(1)}% loss`);
    const route = [stats.protocol, stats.route].filter(Boolean).join("/");
    if (route) parts.push(route);
    networkStats.textContent = parts.join(" · ") || "Connected";
    const details = [];
    if (media?.codec) details.push(`Codec: ${media.codec}`);
    if (media?.width && media?.height) details.push(`Video: ${media.width}×${media.height}${media.framesPerSecond ? ` @ ${Math.round(media.framesPerSecond)} FPS` : ""}`);
    if (Number.isFinite(media?.jitterMs)) details.push(`Jitter: ${media.jitterMs.toFixed(1)} ms`);
    if (Number.isFinite(media?.jitterBufferMs)) details.push(`Jitter buffer: ${media.jitterBufferMs.toFixed(1)} ms`);
    if (Number.isFinite(media?.framesDropped)) details.push(`Frames dropped: ${media.framesDropped}`);
    if (Number.isFinite(stats.availableIncomingMbps)) details.push(`Available: ${stats.availableIncomingMbps.toFixed(1)} Mbps`);
    networkStats.title = details.join("\n");
    if (adaptiveProfileRunning) {
      adaptiveQuality.sample(stats, diagnostics.agent, Date.now());
    }
    renderDiagnostics();
  }

  function handleDesktopStreamStats(stats) {
    const previous = diagnostics.agent || {};
    diagnostics.agent = {
      ...stats,
      captureMs: smoothed(finite(previous.captureMs), stats.captureMs),
      encodeMs: smoothed(finite(previous.encodeMs), stats.encodeMs),
      sendMs: smoothed(finite(previous.sendMs), stats.sendMs),
      totalMs: smoothed(finite(previous.totalMs), stats.totalMs),
    };
    diagnostics.currentAgentFps = finite(stats.fps);
    diagnostics.codec = String(stats.format || diagnostics.codec || "");
    diagnostics.width = finite(stats.width) || diagnostics.width;
    diagnostics.height = finite(stats.height) || diagnostics.height;
    if (agentFps && diagnostics.currentAgentFps != null) {
      agentFps.textContent = String(Math.round(diagnostics.currentAgentFps));
    }
    renderDiagnostics();
  }

  function clearOfflineTimer() {
    if (offlineTimer) {
      clearTimeout(offlineTimer);
      offlineTimer = null;
    }
  }

  function scheduleOffline(reason) {
    clearOfflineTimer();
    setStreamState("connecting", "Reconnecting");
    offlineTimer = setTimeout(() => {
      const now = performance.now();
      if (!lastFrameAt || now - lastFrameAt > 3000) {
        if (elevationPending) return;
        desiredStreaming = false;
        setStreamState("offline", reason || "Client offline");
      }
    }, 3000);
  }

  function handleStatus(msg) {
    if (!msg || msg.type !== "status" || !msg.status) return;
    rdDebug("status", {
      status: msg.status,
      reason: msg.reason || "",
      desiredStreaming,
      streamState,
      lastFrameAgeMs: lastFrameAt ? Math.round(performance.now() - lastFrameAt) : null,
      sessionId: msg.sessionId || "",
    });
    if (msg.status === "offline") {
      scheduleOffline(msg.reason);
      return;
    }
    if (msg.status === "permissions_denied") {
      clearOfflineTimer();
      desiredStreaming = false;
      const missing = Array.isArray(msg.missing) ? msg.missing : [];
      const labels = {
        screenRecording: "Screen Recording",
        accessibility: "Accessibility",
        fullDiskAccess: "Full Disk Access",
      };
      const list = missing.map(k => labels[k] || k).join(", ");
      setStreamState("error", `macOS permissions required: ${list}`);
      showElevateOffer(missing);
      return;
    }
    if (msg.status === "connecting") {
      clearOfflineTimer();
      setStreamState("connecting", "Connecting");
      return;
    }
    if (msg.status === "starting") {
      clearOfflineTimer();
      if (desiredStreaming && streamState !== "streaming") {
        setStreamState("starting", "Starting stream");
      }
      return;
    }
    if (msg.status === "stopped") {
      clearOfflineTimer();
      desiredStreaming = false;
      lastFrameAt = 0;
      setStreamState("idle", "Stopped");
      return;
    }
    if (msg.status === "online") {
      clearOfflineTimer();
      if (elevationPending) {
        elevationPending = false;
        desiredStreaming = true;
      }
      if (desiredStreaming) {
        const shouldRequestStart = !["starting", "streaming", "stalled"].includes(streamState);
        const mode = getWebrtcMode();
        if (shouldRequestStart) {
          setStreamState("starting", "Reconnecting");
        }
        if (displaySelect && displaySelect.value !== undefined) {
          sendCmd("desktop_select_display", {
            display: parseInt(displaySelect.value, 10) || 0,
          });
        }
        pushInputToggles();
        pushCaptureToggles();
        if (qualitySlider) pushQuality(qualitySlider.value);
        pushStreamProfile();
        if (shouldRequestStart) {
          if (mode === "relayed") {
            sendCmd("desktop_start", { webrtc: true });
          } else if (mode === "p2p") {
            sendCmd("desktop_start", { canvasFlowControl: false });
            startP2P();
          } else {
            sendCmd("desktop_start", { canvasFlowControl: true });
          }
        }
      } else {
        setStreamState("idle", "Stopped");
      }
    }
  }

  function showElevateOffer(missing) {
    // Remove previous elevate banner if any
    const prev = document.getElementById("rdElevateBanner");
    if (prev) prev.remove();

    const banner = document.createElement("div");
    banner.id = "rdElevateBanner";
    banner.className = "flex flex-col items-center gap-3 p-4 rounded-lg border border-amber-700/70 bg-amber-900/30 text-amber-100 text-sm";

    const labels = {
      screenRecording: "Screen Recording",
      accessibility: "Accessibility",
      fullDiskAccess: "Full Disk Access",
    };
    const list = missing.map(k => labels[k] || k).join(", ");

    banner.innerHTML = `
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-triangle-exclamation text-amber-400"></i>
        <span><strong>macOS permissions missing:</strong> ${list}</span>
      </div>
      <div class="text-xs text-amber-300/80">
        The client needs elevated privileges to grant these permissions. Enter the user's password to elevate.
      </div>
      <div class="flex items-center gap-2">
        <input id="rdElevatePwd" type="password" placeholder="User password" autocomplete="off"
          class="px-3 py-1.5 rounded bg-slate-800 border border-slate-600 text-slate-100 text-sm focus:outline-none focus:border-amber-500" />
        <button id="rdElevateBtn" class="button primary text-sm px-4 py-1.5">
          <i class="fa-solid fa-bolt"></i> Elevate
        </button>
        <button id="rdElevateDismiss" class="button ghost text-sm px-3 py-1.5">Dismiss</button>
      </div>
      <div id="rdElevateStatus" class="text-xs text-slate-400 hidden"></div>
    `;

    // Insert banner above the canvas area
    if (canvasContainer && canvasContainer.parentNode) {
      canvasContainer.parentNode.insertBefore(banner, canvasContainer);
    }

    const elevateBtn = document.getElementById("rdElevateBtn");
    const pwdInput = document.getElementById("rdElevatePwd");
    const statusDiv = document.getElementById("rdElevateStatus");
    const dismissBtn = document.getElementById("rdElevateDismiss");

    if (dismissBtn) {
      dismissBtn.addEventListener("click", () => banner.remove());
    }

    if (elevateBtn && pwdInput) {
      elevateBtn.addEventListener("click", async () => {
        const password = pwdInput.value.trim();
        if (!password) {
          pwdInput.focus();
          return;
        }
        elevateBtn.disabled = true;
        elevateBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Elevating...';
        if (statusDiv) {
          statusDiv.classList.remove("hidden");
          statusDiv.textContent = "Sending elevation request...";
        }
        try {
          const res = await fetch(`/api/clients/${encodeURIComponent(activeClientId)}/command`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ action: "elevate", password }),
          });
          const data = await res.json();
          if (data.ok) {
            if (statusDiv) {
              statusDiv.textContent = "Elevation successful — client is restarting with elevated permissions. It will reconnect shortly.";
              statusDiv.className = "text-xs text-emerald-400";
            }
            elevateBtn.textContent = "Done";
            elevationPending = true;
            desiredStreaming = true;
          } else {
            if (statusDiv) {
              statusDiv.textContent = `Elevation failed: ${data.message || "Unknown error"}`;
              statusDiv.className = "text-xs text-rose-400";
            }
            elevateBtn.disabled = false;
            elevateBtn.innerHTML = '<i class="fa-solid fa-bolt"></i> Retry';
          }
        } catch (err) {
          if (statusDiv) {
            statusDiv.textContent = `Request failed: ${err.message}`;
            statusDiv.className = "text-xs text-rose-400";
          }
          elevateBtn.disabled = false;
          elevateBtn.innerHTML = '<i class="fa-solid fa-bolt"></i> Retry';
        }
      });
    }
  }

  function sendCmd(type, payload) {
    if (!activeClientId) {
      console.warn("No active client selected");
      return;
    }
    if (!ws || ws.readyState !== WebSocket.OPEN) {
      rdDebug("send skipped websocket not open", {
        type,
        readyState: ws ? ws.readyState : -1,
        streamState,
        desiredStreaming,
      });
      return;
    }
    const msg = { type, ...payload };
    if (highFrequencyInputTypes.has(type) && getWebrtcMode() === "p2p" && p2pClient?.sendInput(msg)) {
      return;
    }
    if (type !== "desktop_decode_pressure" && !highFrequencyInputTypes.has(type)) {
      rdDebug("send", {
        msg,
        readyState: ws.readyState,
        streamState,
        desiredStreaming,
        display: displaySelect?.value ?? "",
        quality: qualitySlider?.value ?? "",
        streamProfile: streamProfileSelect?.value ?? "",
        transport: getWebrtcMode(),
        lastFrameAgeMs: lastFrameAt ? Math.round(performance.now() - lastFrameAt) : null,
      });
    }
    ws.send(encodeMsgpack(msg));
  }

  function setWebrtcViewActive(active) {
    webrtcActive = !!active;
    if (canvas) canvas.style.display = active ? "none" : "block";
    if (webrtcVideo) webrtcVideo.style.display = active ? "block" : "none";
    renderRemoteCursor();
    if (!active && networkStats) {
      networkStats.textContent = "--";
      networkStats.title = "";
      diagnostics.network = null;
    }
  }

  function onWebrtcState(label, s) {
    console.debug(`webrtc[${label}]: state`, s);
    if (s === "connected") {
      setStreamState("streaming", `Streaming (${label})`);
    } else if (s === "failed" || s === "disconnected") {
      setWebrtcViewActive(false);
    }
  }

  // The canvas path counts WS frames via markFrameReceived + updateFpsDisplay.
  // WebRTC bypasses WS entirely, so we tap the <video>'s rendered-frame callback
  // (Chrome/Edge/Firefox 132+) to feed the same counters — otherwise the
  // frame watcher flips to "No frames" and FPS sticks at --.
  let webrtcRvfcHandle = 0;
  let webrtcFpsCount = 0;
  let webrtcFpsWindowStart = 0;
  function startWebrtcFrameTicker() {
    if (!webrtcVideo || typeof webrtcVideo.requestVideoFrameCallback !== "function") return;
    stopWebrtcFrameTicker();
    webrtcFpsCount = 0;
    webrtcFpsWindowStart = performance.now();
    const tick = (now, metadata = {}) => {
      markFrameReceived();
      if (Number.isFinite(metadata.processingDuration)) {
        diagnostics.decodeMs = smoothed(diagnostics.decodeMs, metadata.processingDuration * 1000);
      }
      if (Number.isFinite(metadata.receiveTime) && Number.isFinite(metadata.expectedDisplayTime)) {
        diagnostics.renderMs = smoothed(diagnostics.renderMs, Math.max(0, metadata.expectedDisplayTime - metadata.receiveTime));
      }
      diagnostics.width = webrtcVideo.videoWidth || diagnostics.width;
      diagnostics.height = webrtcVideo.videoHeight || diagnostics.height;
      webrtcFpsCount += 1;
      const elapsed = now - webrtcFpsWindowStart;
      if (elapsed >= 1000) {
        const fps = Math.round((webrtcFpsCount * 1000) / elapsed);
        diagnostics.currentViewerFps = fps;
        updateFpsDisplay();
        webrtcFpsCount = 0;
        webrtcFpsWindowStart = now;
      } else {
        updateFpsDisplay();
      }
      webrtcRvfcHandle = webrtcVideo.requestVideoFrameCallback(tick);
    };
    webrtcRvfcHandle = webrtcVideo.requestVideoFrameCallback(tick);
  }
  function stopWebrtcFrameTicker() {
    if (webrtcRvfcHandle && webrtcVideo && typeof webrtcVideo.cancelVideoFrameCallback === "function") {
      webrtcVideo.cancelVideoFrameCallback(webrtcRvfcHandle);
    }
    webrtcRvfcHandle = 0;
  }

  async function startWhep(whepPath) {
    await stopAllWebrtc();
    if (!webrtcVideo) return;
    whepClient = new WhepClient({
      whepPath,
      videoEl: webrtcVideo,
      onState: (s) => onWebrtcState("WebRTC Relayed", s),
      onStats: (stats) => updateNetworkStats({ ...stats, route: "Server" }),
    });
    try {
      await whepClient.start();
      setWebrtcViewActive(true);
      startWebrtcFrameTicker();
    } catch (err) {
      console.warn("webrtc: WHEP start failed, falling back to canvas", err);
      setWebrtcViewActive(false);
      whepClient = null;
    }
  }

  async function startP2P() {
    await stopAllWebrtc();
    if (!webrtcVideo) return;
    p2pClient = new P2PClient({
      videoEl: webrtcVideo,
      enableInput: true,
      send: (msg) => {
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(encodeMsgpack(msg));
        }
      },
      onState: (s) => onWebrtcState("WebRTC P2P", s),
      onStats: updateNetworkStats,
      onInputState: setDirectInputActive,
    });
    try {
      await p2pClient.start();
      setWebrtcViewActive(true);
      startWebrtcFrameTicker();
    } catch (err) {
      console.warn("webrtc: P2P start failed, falling back to canvas", err);
      setWebrtcViewActive(false);
      const c = p2pClient;
      p2pClient = null;
      if (c) { try { await c.stop(); } catch {} }
    }
  }

  async function stopAllWebrtc() {
    setDirectInputActive(false);
    stopWebrtcFrameTicker();
    setWebrtcViewActive(false);
    const w = whepClient;
    whepClient = null;
    if (w) { try { await w.stop(); } catch {} }
    const p = p2pClient;
    p2pClient = null;
    if (p) { try { await p.stop(); } catch {} }
  }

  let monitors = 1;

  function populateDisplays(count, monitorInfo) {
    displaySelect.innerHTML = "";
    const infoList = Array.isArray(monitorInfo) ? monitorInfo : null;
    monitors = (infoList && infoList.length) ? infoList.length : (count || 1);
    for (let i = 0; i < monitors; i++) {
      const opt = document.createElement("option");
      opt.value = i;
      const info = infoList && infoList[i];
      const w = info && Number(info.width);
      const h = info && Number(info.height);
      const sizeLabel = w > 0 && h > 0 ? ` (${w}x${h})` : "";
      opt.textContent = "Display " + (i + 1) + sizeLabel;
      displaySelect.appendChild(opt);
    }

    if (displaySelect.options.length) {
      displaySelect.value = displaySelect.options[0].value;
    }
    applySavedDisplay();
  }

  async function fetchClientInfo() {
    try {
      const res = await fetch("/api/clients");
      const data = await res.json();
      const client = data.items.find((c) => c.id === activeClientId);
      rdDebug("client info", {
        found: !!client,
        monitors: client?.monitors,
        monitorInfo: client?.monitorInfo,
        os: client?.os || "",
        isAdmin: !!client?.isAdmin,
      });
      if (client) {
        clientLabel.textContent = `${client.host || client.id} (${client.os || ""})`;
        clientOs = (client.os || "").toLowerCase();
        clientIsAdmin = !!client.isAdmin;
        desktopFileUploadSupported = !client.commandVersions || !!client.commandVersions.file_upload_desktop;
      }
      if (client) {
        populateDisplays(client.monitors, client.monitorInfo);
        applySavedDisplay();
        if (ws && ws.readyState === WebSocket.OPEN) requestEncoderCapabilities();
      }
      if (duplicationCtrl) {
        const os = (client?.os || "").toLowerCase();
        const isWindows = os.includes("windows") || os.includes("win");
        duplicationCtrl.disabled = !isWindows;
        if (!isWindows) {
          duplicationCtrl.checked = false;
        }
      }
    } catch (e) {
      console.warn("failed to fetch client info", e);
    }
  }

  refreshBtn.addEventListener("click", fetchClientInfo);

  function updateQualityLabel(val) {
    if (qualityValue) {
      qualityValue.textContent = `${val}%`;
    }
  }

  function updateSmoothingLabel(val) {
    if (smoothingValue) {
      smoothingValue.textContent = `${val}%`;
    }
  }

  function pushQuality(val) {
    const q = Number(val) || 90;
    const codec = q >= 100 ? "raw" : (negotiatedCodec || (prefersH264 ? "h264" : "jpeg"));
    const softwareH264 = codec === "h264" && useSoftwareH264();
    console.debug("rd: pushQuality val=", val, "q=", q, "codec=", codec, "softwareH264=", softwareH264);
    setCodecModeLabel(codec, "requested");
    if (codec === "h264" && !softwareH264) {
      ensureDuplicationForH264();
    }
    sendCmd("desktop_set_quality", { quality: q, codec, softwareH264 });
  }

  function useSoftwareH264() {
    return !!softwareH264Ctrl?.checked && prefersH264;
  }

  function ensureDuplicationForH264() {
    if (!duplicationCtrl || duplicationCtrl.disabled) return;
    const isWindows = clientOs.includes("windows") || clientOs.includes("win");
    if (!isWindows) return;
    duplicationCtrl.checked = true;
    sendCmd("desktop_set_duplication", { enabled: true });
  }

  if (codecH264) {
    codecH264.addEventListener("change", function () {
      resetH264SessionState();
      prefersH264 = !!codecH264.checked && typeof VideoDecoder === "function";
      negotiatedCodec = prefersH264 ? "h264" : "jpeg";
      if (softwareH264Ctrl) {
        softwareH264Ctrl.disabled = !prefersH264;
      }
      if (prefersH264 && !useSoftwareH264()) {
        ensureDuplicationForH264();
      }
      if (!prefersH264) {
        destroyVideoDecoder();
        h264LowFpsStreak = 0;
      }
      if (qualitySlider) {
        pushQuality(qualitySlider.value);
      }
      requestEncoderCapabilities();
      sharedSettingsSaver.scheduleSave();
    });
  }
  if (softwareH264Ctrl) {
    softwareH264Ctrl.addEventListener("change", function () {
      resetH264SessionState();
      if (qualitySlider) {
        pushQuality(qualitySlider.value);
      }
      sharedSettingsSaver.scheduleSave();
    });
  }

  function selectedStreamProfile() {
    if (streamProfileSelect?.value === "auto") {
      const best = encoderProfiles[0];
      return best ? { maxHeight: best.maxHeight, fps: best.fps } : { maxHeight: -1, fps: 120 };
    }
    const [heightValue, fpsValue] = String(streamProfileSelect?.value || "auto").split(":");
    const maxHeight = Number.parseInt(heightValue, 10);
    const fps = Number.parseInt(fpsValue, 10);
    return {
      maxHeight: Number.isFinite(maxHeight) ? maxHeight : 1080,
      fps: Number.isFinite(fps) ? Math.max(1, Math.min(240, fps)) : 60,
    };
  }

  function pushStreamProfile() {
    if (streamProfileSelect?.value === "auto") {
      const adaptiveWebrtc = getWebrtcMode() !== "off" && Number(bitrateSelect?.value || 0) === 0;
      if (adaptiveWebrtc && encoderProfiles.length) {
        adaptiveQuality.setProfiles(encoderProfiles);
        adaptiveProfileRunning = true;
        adaptiveQuality.start(Date.now());
        return;
      }
      adaptiveProfileRunning = false;
      adaptiveQuality.stop();
      const best = selectedStreamProfile();
      console.debug("rd: pushStreamProfile auto best", best);
      sendCmd("desktop_set_profile", { ...best, source: "auto_best" });
      if (streamProfileDetail) {
        const profile = encoderProfiles[0];
        streamProfileDetail.textContent = profile
          ? `Auto selected ${profile.width}×${profile.height} @ ${profile.fps} FPS (best available).`
          : "Auto selected native resolution while capabilities are loading.";
      }
      return;
    }
    adaptiveProfileRunning = false;
    adaptiveQuality.stop();
    const profile = selectedStreamProfile();
    console.debug("rd: pushStreamProfile", profile);
    sendCmd("desktop_set_profile", profile);
  }

  function pushBitrate() {
    const bitrateMbps = Math.max(0, Math.min(50, Number.parseInt(bitrateSelect?.value || "0", 10) || 0));
    if (adaptiveProfileRunning && bitrateMbps === 0) return;
    sendCmd("desktop_set_bitrate", { bitrateMbps, adaptive: false });
  }

  if (bitrateSelect) {
    bitrateSelect.addEventListener("change", function () {
      pushStreamProfile();
      pushBitrate();
      sharedSettingsSaver.scheduleSave();
    });
  }

  async function probeBrowserDecoderCodecs(transport) {
    const supported = ["jpeg", "raw"];
    if (transport === "webrtc") {
      try {
        const codecs = typeof RTCRtpReceiver !== "undefined" && typeof RTCRtpReceiver.getCapabilities === "function"
          ? (RTCRtpReceiver.getCapabilities("video")?.codecs || [])
          : [];
        for (const capability of codecs) {
          const mime = String(capability?.mimeType || "").toLowerCase();
          if (mime === "video/h264") supported.push("h264");
          if (mime === "video/h265" || mime === "video/hevc") supported.push("hevc");
        }
      } catch (err) {
        console.debug("rd: WebRTC codec capability probe failed", err);
      }
      return [...new Set(supported)];
    }

    if (typeof VideoDecoder !== "function") return supported;
    if (typeof VideoDecoder.isConfigSupported !== "function") {
      supported.push("h264");
      return supported;
    }
    const probes = [
      ["h264", "avc1.42E01E"],
      ["hevc", "hev1.1.6.L156.B0"],
    ];
    await Promise.all(probes.map(async ([name, codec]) => {
      try {
        const result = await VideoDecoder.isConfigSupported({ codec, optimizeForLatency: true });
        if (result?.supported) supported.push(name);
      } catch (err) {
        console.debug(`rd: ${name} decoder capability probe failed`, err);
      }
    }));
    return [...new Set(supported)].filter((codec) => !disabledDecoderCodecs.has(codec));
  }

  async function requestEncoderCapabilities() {
    if (streamProfileDetail) streamProfileDetail.textContent = "Checking hardware encoder profiles…";
    const mode = getWebrtcMode();
    const transport = mode === "off" ? "websocket" : "webrtc";
    const decoderCodecs = await probeBrowserDecoderCodecs(transport);
    browserDecoderCodecs = decoderCodecs;
    if (!ws || ws.readyState !== WebSocket.OPEN) return;
    sendCmd("desktop_encoder_capabilities", {
      display: Number.parseInt(displaySelect?.value || "0", 10) || 0,
      decoderCodecs,
      preferredCodecs: prefersH264 ? ["hevc", "h264", "jpeg", "raw"] : ["jpeg", "raw"],
      transport,
    });
  }

  function applyEncoderCapabilities(msg) {
    if (!msg) return;
    const selectedCodec = String(msg.selectedCodec || msg.negotiation?.selectedCodec || "").toLowerCase();
    if (selectedCodec) {
      negotiatedCodec = selectedCodec;
      const fallbacks = Array.isArray(msg.fallbackCodecs) ? msg.fallbackCodecs.join(" → ") : selectedCodec;
      setCodecModeLabel(selectedCodec, `negotiated; fallback ${fallbacks}`);
      if (codecH264) {
        const agentHasH264 = Array.isArray(msg.codecs) && msg.codecs.some((entry) => String(entry?.codec || "").toLowerCase() === "h264");
        codecH264.disabled = !browserDecoderCodecs.includes("h264") || !agentHasH264;
      }
      if (desiredStreaming && qualitySlider) pushQuality(qualitySlider.value);
    } else if (msg.transport === "webrtc") {
      console.warn("rd: no mutually supported WebRTC video codec; falling back to WebSocket canvas");
      if (webrtcMode) webrtcMode.value = "off";
      negotiatedCodec = browserDecoderCodecs.includes("h264") ? "h264" : "jpeg";
      setCodecModeLabel(negotiatedCodec, "WebRTC unavailable; WebSocket fallback");
      stopAllWebrtc();
      requestEncoderCapabilities();
    }
    if (!Array.isArray(msg.profiles) || !streamProfileSelect) return;
    const selectedDisplay = Number.parseInt(displaySelect?.value || "0", 10) || 0;
    if (Number.isFinite(Number(msg.display)) && Number(msg.display) !== selectedDisplay) return;
    const previous = streamProfileSelect.value;
    encoderProfiles = normalizeAdaptiveProfiles(msg.profiles);
    streamProfileSelect.innerHTML = "";
    const autoOption = document.createElement("option");
    autoOption.value = "auto";
    autoOption.textContent = "Auto (best)";
    autoOption.title = "Starts at the best supported profile and adapts to WebRTC congestion";
    streamProfileSelect.appendChild(autoOption);
    for (const profile of encoderProfiles) {
      const maxHeight = Number(profile.maxHeight);
      const fps = Number(profile.fps);
      if (!Number.isFinite(maxHeight) || !Number.isFinite(fps)) continue;
      const option = document.createElement("option");
      option.value = `${maxHeight}:${fps}`;
      option.textContent = String(profile.label || `${fps} FPS - ${Number(profile.height) || maxHeight}p`);
      const providers = Array.isArray(profile.providers) ? profile.providers.join(", ") : "";
      if (providers) {
        option.title = `Available through ${providers}`;
        option.dataset.providers = providers;
      }
      streamProfileSelect.appendChild(option);
    }
    const manualHighResolutionProfiles = [
      { maxHeight: 1440, fps: 30, label: "30 FPS - 1440p" },
      { maxHeight: 1440, fps: 60, label: "60 FPS - 1440p" },
      { maxHeight: 2160, fps: 30, label: "30 FPS - 2160p (4K)" },
      { maxHeight: 2160, fps: 60, label: "60 FPS - 2160p (4K)" },
    ];
    const existingProfiles = new Set(Array.from(streamProfileSelect.options, (option) => option.value));
    for (const profile of manualHighResolutionProfiles) {
      const value = `${profile.maxHeight}:${profile.fps}`;
      if (existingProfiles.has(value)) continue;
      const option = document.createElement("option");
      option.value = value;
      option.textContent = profile.label;
      option.title = "Manual high-resolution profile";
      streamProfileSelect.appendChild(option);
    }
    if (!setSelectValue(streamProfileSelect, savedStreamProfile || "auto") &&
        !setSelectValue(streamProfileSelect, previous) &&
        !setSelectValue(streamProfileSelect, "auto")) {
      streamProfileSelect.value = "auto";
    }
    savedStreamProfile = streamProfileSelect.value;
    if (streamProfileDetail) {
      const providers = streamProfileSelect.selectedOptions[0]?.dataset?.providers || "";
      const best = encoderProfiles[0];
      streamProfileDetail.textContent = streamProfileSelect.value === "auto" && best
        ? `Auto starts at ${best.width}×${best.height} @ ${best.fps} FPS and adapts on WebRTC.`
        : (providers ? `Available through ${providers}.` :
          (msg.detail || (msg.probed ? "Profiles tested on this display adapter." : "Safe fallback profiles shown.")));
    }
    if (desiredStreaming) pushStreamProfile();
  }

  if (streamProfileSelect) {
    streamProfileSelect.addEventListener("change", function () {
      savedStreamProfile = streamProfileSelect.value;
      const providers = streamProfileSelect.selectedOptions[0]?.dataset?.providers || "";
      if (streamProfileDetail && providers) streamProfileDetail.textContent = `Available through ${providers}.`;
      pushStreamProfile();
      pushBitrate();
      sharedSettingsSaver.scheduleSave();
    });
  }

  displaySelect.addEventListener("change", function () {
    console.debug("rd: select display", displaySelect.value);
    sendCmd("desktop_select_display", {
      display: parseInt(displaySelect.value, 10),
    });
    requestEncoderCapabilities();
    sharedSettingsSaver.scheduleSave();
  });

  if (webrtcMode) {
    webrtcMode.addEventListener("change", function () {
      updateControls();
      requestEncoderCapabilities();
      sharedSettingsSaver.scheduleSave();
    });
  }
  function requestManualKeyframe() {
    if (streamState !== "streaming" && streamState !== "stalled") return;
    sendCmd("desktop_request_keyframe", { reason: "manual_viewer" });
    showFullscreenHud(true);
  }
  requestKeyframeBtn?.addEventListener("click", requestManualKeyframe);


  function needsWebrtcFirewallWarning(mode) {
    if (firewallWarningAcked) return false;
    if (mode !== "relayed" && mode !== "p2p") return false;
    const isWindows = clientOs.includes("windows") || clientOs.includes("win");
    return isWindows && !clientIsAdmin;
  }

  function startDesktopStream() {
    const mode = getWebrtcMode();
    rdDebug("start click", {
      mode,
      wsReadyState: ws.readyState,
      streamState,
      desiredStreaming,
      display: displaySelect?.value ?? "",
      quality: qualitySlider?.value ?? "",
      streamProfile: streamProfileSelect?.value ?? "",
      prefersH264,
      duplication: !!duplicationCtrl?.checked,
      clientOs,
      clientIsAdmin,
    });
    if (needsWebrtcFirewallWarning(mode)) {
      if (!confirm("This agent is not elevated. Starting WebRTC will trigger a Windows Defender Firewall prompt on the target machine.\n\nContinue?")) {
        return;
      }
      firewallWarningAcked = true;
    }
    if (displaySelect && displaySelect.value !== undefined) {
      sendCmd("desktop_select_display", {
        display: parseInt(displaySelect.value, 10) || 0,
      });
    }
    if (qualitySlider) {
      pushQuality(qualitySlider.value);
    }
    if (prefersH264 && !useSoftwareH264()) {
      ensureDuplicationForH264();
    }
    pushStreamProfile();
    pushBitrate();
    desiredStreaming = true;
    lastFrameAt = 0;
    lastViewerKeyframeRequestAt = 0;
    diagnostics.coalescedFrames = 0;
    firstFrameLogged = false;
    resetH264SessionState();
    setStreamState("starting", "Starting stream");
    if (mode === "relayed") {
      // Server replies with `webrtc_ready { whepPath }`; startWhep happens then.
      sendCmd("desktop_start", { webrtc: true });
    } else if (mode === "p2p") {
      // Kick off the P2P offer asynchronously; capture starts in parallel.
      sendCmd("desktop_start", { canvasFlowControl: false });
      startP2P();
    } else {
      sendCmd("desktop_start", { canvasFlowControl: true });
    }
    if (audioCtrl && audioCtrl.checked) {
      connectAudio();
    }
  }

  function stopDesktopStream() {
    if (isRecording()) stopRecording();
    desiredStreaming = false;
    adaptiveProfileRunning = false;
    adaptiveQuality.stop();
    lastFrameAt = 0;
    setStreamState("stopping", "Stopping stream");
    disablePrivacyIfActive();
    sendCmd("desktop_stop", {});
    disconnectAudio();
    stopAllWebrtc();
    setStreamState("idle", "Stopped");
  }

  function restartDesktopStream() {
    if (!ws || ws.readyState !== WebSocket.OPEN) return;
    if (streamState === "idle") {
      startDesktopStream();
      return;
    }
    if (isRecording()) stopRecording();
    desiredStreaming = false;
    adaptiveProfileRunning = false;
    adaptiveQuality.stop();
    lastFrameAt = 0;
    setStreamState("starting", "Restarting stream");
    disablePrivacyIfActive();
    sendCmd("desktop_stop", {});
    disconnectAudio();
    stopAllWebrtc();
    setTimeout(startDesktopStream, 150);
  }

  function switchFullscreenTransport() {
    if (!webrtcMode) return;
    webrtcMode.value = nextTransportValue();
    webrtcMode.dispatchEvent(new Event("change"));
    if (streamState === "streaming" || streamState === "stalled") {
      restartDesktopStream();
    } else {
      renderRemoteDesktopOverlays();
    }
  }

  startBtn.addEventListener("click", startDesktopStream);
  stopBtn.addEventListener("click", stopDesktopStream);
  rdStateKeyframeBtn?.addEventListener("click", requestManualKeyframe);
  rdStateRestartBtn?.addEventListener("click", restartDesktopStream);
  rdStateTransportBtn?.addEventListener("click", switchFullscreenTransport);
  fsHudStatsBtn?.addEventListener("click", () => setDiagnosticsVisible(true));
  fsHudTuckBtn?.addEventListener("click", () => setFullscreenHudTucked(!fullscreenHudTucked));
  try { setFullscreenHudTucked(localStorage.getItem("overlord.rd.fullscreenHudTucked") === "1", false); }
  catch { setFullscreenHudTucked(false, false); }
  fsHudExitBtn?.addEventListener("click", exitCanvasFullscreen);
  if (recordBtn) {
    recordBtn.addEventListener("click", function () {
      if (isRecording()) stopRecording();
      else startRecording();
    });
  }
  if (recordMode) {
    recordMode.addEventListener("change", function () {
      sharedSettingsSaver.scheduleSave();
    });
  }
  if (recordFps) {
    recordFps.addEventListener("change", function () {
      sharedSettingsSaver.scheduleSave();
    });
  }
  function isCanvasFullscreen() {
    return document.fullscreenElement === canvasContainer ||
      document.webkitFullscreenElement === canvasContainer ||
      document.mozFullScreenElement === canvasContainer;
  }

  function updateFullscreenButton() {
    const active = isCanvasFullscreen();
    fullscreenBtn.setAttribute("aria-pressed", active ? "true" : "false");
    fullscreenBtn.title = active ? "Exit fullscreen" : "Enter fullscreen";
    const icon = fullscreenBtn.querySelector("i");
    const label = fullscreenBtn.querySelector("span");
    if (icon) {
      icon.classList.toggle("fa-expand", !active);
      icon.classList.toggle("fa-compress", active);
    }
    if (label) label.textContent = active ? "Exit Fullscreen" : "Fullscreen";
    if (fullscreenExitBtn) fullscreenExitBtn.setAttribute("aria-hidden", active ? "false" : "true");
  }

  function applyCanvasFullscreenState() {
    if (isCanvasFullscreen()) {
      canvasContainer.focus({ preventScroll: true });
      if (kbdCtrl && !kbdCtrl.checked) {
        kbdCtrl.checked = true;
        kbdCtrl.dispatchEvent(new Event("change"));
      }
    }
    updateFullscreenButton();
    renderRemoteCursor();
    renderRemoteDesktopOverlays();
    if (isCanvasFullscreen()) {
      showFullscreenHud(fullscreenHudTucked || streamState !== "streaming" || !diagnosticsHud?.classList.contains("hidden"));
    }
  }

  function requestCanvasFullscreen() {
    const request = canvasContainer.requestFullscreen ||
      canvasContainer.webkitRequestFullscreen ||
      canvasContainer.mozRequestFullScreen;
    if (!request) return;
    const result = request.call(canvasContainer);
    if (result && typeof result.then === "function") {
      result.then(applyCanvasFullscreenState).catch((err) => console.warn("rd: fullscreen request failed", err));
    } else {
      applyCanvasFullscreenState();
    }
  }

  function exitCanvasFullscreen() {
    const exit = document.exitFullscreen ||
      document.webkitExitFullscreen ||
      document.mozCancelFullScreen;
    if (!exit) return;
    const result = exit.call(document);
    if (result && typeof result.then === "function") {
      result.then(applyCanvasFullscreenState).catch((err) => console.warn("rd: fullscreen exit failed", err));
    } else {
      applyCanvasFullscreenState();
    }
  }

  fullscreenBtn.addEventListener("click", function () {
    if (isCanvasFullscreen()) exitCanvasFullscreen();
    else requestCanvasFullscreen();
  });
  if (fullscreenExitBtn) {
    fullscreenExitBtn.addEventListener("click", exitCanvasFullscreen);
  }
  renderSurface?.addEventListener("mousemove", () => showFullscreenHud());
  fullscreenHud?.addEventListener("mouseenter", () => showFullscreenHud(true));
  fullscreenHud?.addEventListener("focusin", () => showFullscreenHud(true));
  function pushInputToggles() {
    if (mouseCtrl) {
      sendCmd("desktop_enable_mouse", { enabled: !!mouseCtrl.checked });
    }
    if (kbdCtrl) {
      sendCmd("desktop_enable_keyboard", { enabled: !!kbdCtrl.checked });
    }
  }


  function cursorImageBytes(image) {
    if (image instanceof Uint8Array) return image;
    if (image instanceof ArrayBuffer) return new Uint8Array(image);
    if (ArrayBuffer.isView(image)) {
      return new Uint8Array(image.buffer, image.byteOffset, image.byteLength);
    }
    return null;
  }

  function renderRemoteCursor(message = lastRemoteCursor) {
    lastRemoteCursor = message;
    const imageBytes = cursorImageBytes(message?.image);
    if (message && Number(message.cursorWidth) > 0 && Number(message.cursorHeight) > 0) {
      remoteCursorShape = {
        width: Math.max(1, Number(message.cursorWidth) || 1),
        height: Math.max(1, Number(message.cursorHeight) || 1),
        hotspotX: Math.max(0, Number(message.hotspotX) || 0),
        hotspotY: Math.max(0, Number(message.hotspotY) || 0),
      };
    }
    if (remoteCursorImage && imageBytes && imageBytes.byteLength > 0) {
      if (remoteCursorImageUrl) URL.revokeObjectURL(remoteCursorImageUrl);
      remoteCursorImageUrl = URL.createObjectURL(new Blob([imageBytes], { type: "image/png" }));
      remoteCursorImage.src = remoteCursorImageUrl;
    }
    const hideLocalCursor = !!hideLocalCursorCtrl?.checked;
    const showRemoteCursor = !!cursorCtrl?.checked && !!message?.visible && !!remoteCursorShape &&
      (!mouseCtrl?.checked || hideLocalCursor);
    const localCursor = hideLocalCursor ? "none" : "default";
    canvas.style.cursor = localCursor;
    if (webrtcVideo) webrtcVideo.style.cursor = localCursor;
    if (!remoteCursor || !renderSurface || !showRemoteCursor) {
      if (remoteCursor) remoteCursor.hidden = true;
      return;
    }
    const surface = (webrtcActive || (webrtcVideo && getComputedStyle(webrtcVideo).display !== "none")) ? webrtcVideo : canvas;
    const sourceWidth = Number(message.width) || (surface === webrtcVideo ? webrtcVideo.videoWidth : canvas.width);
    const sourceHeight = Number(message.height) || (surface === webrtcVideo ? webrtcVideo.videoHeight : canvas.height);
    if (!sourceWidth || !sourceHeight) {
      remoteCursor.hidden = true;
      return;
    }
    const surfaceRect = getContainedSurfaceRect(surface, sourceWidth, sourceHeight);
    const containerRect = renderSurface.getBoundingClientRect();
    const scaleX = surfaceRect.width / sourceWidth;
    const scaleY = surfaceRect.height / sourceHeight;
    const x = surfaceRect.left - containerRect.left + (Number(message.x) || 0) * scaleX -
      remoteCursorShape.hotspotX * scaleX;
    const y = surfaceRect.top - containerRect.top + (Number(message.y) || 0) * scaleY -
      remoteCursorShape.hotspotY * scaleY;
    remoteCursor.style.width = `${remoteCursorShape.width * scaleX}px`;
    remoteCursor.style.height = `${remoteCursorShape.height * scaleY}px`;
    remoteCursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;
    remoteCursor.hidden = false;
  }

  function updateCursorPresentation() {
    renderRemoteCursor();
  }

  function pushCaptureToggles() {
    if (cursorCtrl) {
      updateCursorPresentation();
      sendCmd("desktop_enable_cursor", { enabled: !!cursorCtrl.checked });
    }
    if (duplicationCtrl && !duplicationCtrl.disabled) {
      sendCmd("desktop_set_duplication", { enabled: !!duplicationCtrl.checked });
    }
  }
  updateCursorPresentation();
  if (renderSurface && typeof ResizeObserver === "function") {
    new ResizeObserver(() => renderRemoteCursor()).observe(renderSurface);
  }

  function pushPrivacyToggle() {
    if (!privacyCtrl) return;
    sendCmd(privacyCtrl.checked ? "privacy_start" : "privacy_stop", {});
  }

  function disablePrivacyIfActive() {
    if (privacyCtrl && privacyCtrl.checked) {
      privacyCtrl.checked = false;
      sendCmd("privacy_stop", {});
    }
  }

  function isInputActive() {
    return desiredStreaming;
  }

  mouseCtrl.addEventListener("change", function () {
    pushInputToggles();
    updateCursorPresentation();
    sharedSettingsSaver.scheduleSave();
  });
  canvasContainer.setAttribute("tabindex", "0");
  const kbdCapture = createKeyboardCapture({
    container: canvasContainer,
    sendKeyDown: (e) => {
      if (isInputActive()) sendCmd("key_down", { key: e.key, code: e.code });
    },
    sendKeyUp: (e) => {
      if (isInputActive()) sendCmd("key_up", { key: e.key, code: e.code });
    },
    onTextInput: (e) => {
      if (isInputActive()) sendCmd("text_input", { text: e.key });
    },
  });
  kbdCtrl.addEventListener("change", function () {
    if (kbdCtrl.checked) kbdCapture.enable();
    else kbdCapture.disable();
    pushInputToggles();
    sharedSettingsSaver.scheduleSave();
  });
  if (kbdCtrl.checked) kbdCapture.enable();
  document.addEventListener("fullscreenchange", applyCanvasFullscreenState);
  document.addEventListener("webkitfullscreenchange", applyCanvasFullscreenState);
  document.addEventListener("mozfullscreenchange", applyCanvasFullscreenState);
  updateFullscreenButton();
  cursorCtrl.addEventListener("change", function () {
    pushCaptureToggles();
    sharedSettingsSaver.scheduleSave();
  });
  if (hideLocalCursorCtrl) {
    hideLocalCursorCtrl.addEventListener("change", function () {
      updateCursorPresentation();
      sharedSettingsSaver.scheduleSave();
    });
  }
  if (duplicationCtrl) {
    duplicationCtrl.addEventListener("change", function () {
      pushCaptureToggles();
      sharedSettingsSaver.scheduleSave();
    });
  }
  if (audioCtrl) {
    audioCtrl.addEventListener("change", function () {
      if (audioCtrl.checked) {
        connectAudio();
      } else {
        disconnectAudio();
      }
      sharedSettingsSaver.scheduleSave();
    });
  }
  if (audioTransport) {
    audioTransport.addEventListener("change", function () {
      // Reconnect with the new transport if audio is already on. Keep the
      // checkbox checked — the user is switching modes, not turning audio off.
      if (audioCtrl && audioCtrl.checked) {
        disconnectAudio(false);
        connectAudio();
      }
      sharedSettingsSaver.scheduleSave();
    });
  }

  if (qualitySlider) {
    updateQualityLabel(qualitySlider.value);
    qualitySlider.addEventListener("input", function () {
      updateQualityLabel(qualitySlider.value);
      pushQuality(qualitySlider.value);
      sharedSettingsSaver.scheduleSave();
    });
  }

  if (smoothingSlider) {
    updateSmoothingLabel(smoothingSlider.value);
    smoothingSlider.addEventListener("input", function () {
      smoothingPct = Number(smoothingSlider.value) || 0;
      updateSmoothingLabel(smoothingSlider.value);
      sharedSettingsSaver.scheduleSave();
    });
  }

  function isFramePacket(buf) {
    return buf.length >= 8 && buf[0] === 0x46 && buf[1] === 0x52 && buf[2] === 0x4d;
  }


  function markFrameReceived() {
    const now = performance.now();
    lastFrameAt = now;
    clearOfflineTimer();
    if (!firstFrameLogged) {
      firstFrameLogged = true;
      rdDebug("first frame received", {
        streamState,
        desiredStreaming,
        canvas: { width: canvas.width, height: canvas.height },
        transport: getWebrtcMode(),
      });
    }
    if (streamState !== "streaming" && desiredStreaming) {
      setStreamState("streaming", "Streaming");
    }
  }

  function drawJpegFallback(blob, target) {
    return new Promise((resolve) => {
      const img = new Image();
      const url = URL.createObjectURL(blob);
      img.onload = function () {
        if (target) {
          ctx.drawImage(img, target.x, target.y, target.w, target.h);
        } else {
          frameWidth = img.width || frameWidth;
          frameHeight = img.height || frameHeight;
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
        }
        URL.revokeObjectURL(url);
        resolve(true);
      };
      img.onerror = function () {
        URL.revokeObjectURL(url);
        resolve(false);
      };
      img.src = url;
    });
  }

  async function drawJpegSlice(slice, target) {
    const blob = new Blob([slice], { type: "image/jpeg" });
    try {
      const bitmap = await createImageBitmap(blob);
      if (target) {
        ctx.drawImage(bitmap, target.x, target.y, target.w, target.h);
      } else {
        frameWidth = bitmap.width || frameWidth;
        frameHeight = bitmap.height || frameHeight;
        canvas.width = bitmap.width;
        canvas.height = bitmap.height;
        ctx.drawImage(bitmap, 0, 0);
      }
      bitmap.close();
      return true;
    } catch {
      return drawJpegFallback(blob, target);
    }
  }

  function destroyVideoDecoder() {
    updateCanvasDecodePressure(true);
    if (decodedVideoPresentationFrame) {
      cancelAnimationFrame(decodedVideoPresentationFrame);
      decodedVideoPresentationFrame = 0;
    }
    if (pendingDecodedVideoFrame) {
      pendingDecodedVideoFrame.frame.close();
      pendingDecodedVideoFrame = null;
    }
    if (videoDecoder) {
      try {
        videoDecoder.close();
      } catch {
        // Ignore close errors when decoder is already shutting down.
      }
    }
    videoDecoder = null;
    videoDecoderConfigKey = "";
    resetH264RuntimeState();
  }

  function presentLatestDecodedVideoFrame() {
    decodedVideoPresentationFrame = 0;
    const pending = pendingDecodedVideoFrame;
    pendingDecodedVideoFrame = null;
    if (!pending) return;

    const { frame, timing, width, height } = pending;
    if (width > 0 && height > 0 && (canvas.width !== width || canvas.height !== height)) {
      canvas.width = width;
      canvas.height = height;
      frameWidth = width;
      frameHeight = height;
    }
    try {
      ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
    } finally {
      frame.close();
    }

    const renderedAt = performance.now();
    if (timing) {
      diagnostics.renderMs = smoothed(diagnostics.renderMs, Math.max(0, renderedAt - timing.receivedAt));
    }
    diagnostics.width = width;
    diagnostics.height = height;
    updateFpsDisplay();
  }

  function queueDecodedVideoFrame(frame, timing) {
    const width = frame.displayWidth || frame.codedWidth || frameWidth;
    const height = frame.displayHeight || frame.codedHeight || frameHeight;
    if (pendingDecodedVideoFrame) {
      pendingDecodedVideoFrame.frame.close();
      diagnostics.coalescedFrames += 1;
    }
    pendingDecodedVideoFrame = { frame, timing, width, height };
    if (!decodedVideoPresentationFrame) {
      decodedVideoPresentationFrame = requestAnimationFrame(presentLatestDecodedVideoFrame);
    }
  }

  function normalizeFallbackReason(reason) {
    if (!reason) return "unspecified";
    if (typeof reason === "string") return reason;
    if (reason instanceof Error) return reason.message || String(reason);
    if (typeof reason === "object") {
      if (typeof reason.message === "string" && reason.message) {
        return reason.message;
      }
      if (typeof reason.name === "string" && reason.name) {
        return reason.name;
      }
      try {
        return JSON.stringify(reason);
      } catch {
        return String(reason);
      }
    }
    return String(reason);
  }

  function fallbackToJpegCodec(reason) {
    if (!prefersH264) return;
    const reasonText = normalizeFallbackReason(reason);
    prefersH264 = false;
    negotiatedCodec = "jpeg";
    destroyVideoDecoder();
    if (codecH264) codecH264.checked = false;
    if (softwareH264Ctrl) softwareH264Ctrl.disabled = true;
    sharedSettingsSaver.scheduleSave();
    console.warn("rd: falling back to jpeg codec", reasonText);
    const q = Number(qualitySlider?.value) || 90;
    setCodecModeLabel("jpeg", "fallback");
    if (ws.readyState === WebSocket.OPEN) {
      sendCmd("desktop_set_quality", {
        quality: q,
        codec: "jpeg",
        source: "viewer_fallback",
        reason: reasonText,
      });
    }
  }

  function tryRecoverH264Stream(reason = "h264_decode_error") {
    if (!prefersH264 || !activeClientId) return false;
    if (streamState !== "streaming" && streamState !== "stalled" && streamState !== "starting") {
      return false;
    }
    if (ws.readyState !== WebSocket.OPEN) return false;
    if (h264RecoveryAttempts >= H264_MAX_RECOVERY_ATTEMPTS) return false;

    h264RecoveryAttempts += 1;
    h264KeyframeErrorStreak = 0;
    destroyVideoDecoder();

    console.warn("rd: h264 decode stuck waiting for keyframe; auto-restarting stream once", {
      reason,
      attempt: h264RecoveryAttempts
    });

    sendCmd("desktop_stop", {
      source: "rd_viewer",
      reason: "h264_recovery_stop",
    });

    setTimeout(() => {
      if (!prefersH264 || !activeClientId || ws.readyState !== WebSocket.OPEN) {
        return;
      }
      resetH264RuntimeState();
      sendCmd("desktop_start", {
        source: "rd_viewer",
        reason: "h264_recovery_restart",
        canvasFlowControl: getWebrtcMode() === "off",
      });
      const q = Number(qualitySlider?.value) || 90;
      sendCmd("desktop_set_quality", {
        quality: q,
        codec: "h264",
        softwareH264: useSoftwareH264(),
        source: "rd_viewer",
        reason: "h264_recovery_quality_push",
      });
    }, 450);

    return true;
  }

  function isKeyframeRequiredError(reason) {
    const text = normalizeFallbackReason(reason).toLowerCase();
    return text.includes("key frame is required") || text.includes("keyframe is required");
  }

  function isH264KeyFrame(data) {
    for (let i = 0; i + 4 < data.length; i++) {
      let startCodeLen = 0;
      if (data[i] === 0x00 && data[i + 1] === 0x00 && data[i + 2] === 0x01) {
        startCodeLen = 3;
      } else if (
        i + 4 < data.length &&
        data[i] === 0x00 &&
        data[i + 1] === 0x00 &&
        data[i + 2] === 0x00 &&
        data[i + 3] === 0x01
      ) {
        startCodeLen = 4;
      }
      if (!startCodeLen) continue;
      const nalIndex = i + startCodeLen;
      if (nalIndex >= data.length) break;
      const nalType = data[nalIndex] & 0x1f;
      if (nalType === 5) {
        return true;
      }
      i = nalIndex;
    }
    return false;
  }

  function isHEVCKeyFrame(data) {
    for (let i = 0; i + 5 < data.length; i++) {
      let startCodeLen = 0;
      if (data[i] === 0x00 && data[i + 1] === 0x00 && data[i + 2] === 0x01) {
        startCodeLen = 3;
      } else if (
        data[i] === 0x00 && data[i + 1] === 0x00 && data[i + 2] === 0x00 && data[i + 3] === 0x01
      ) {
        startCodeLen = 4;
      }
      if (!startCodeLen) continue;
      const nalIndex = i + startCodeLen;
      if (nalIndex >= data.length) break;
      const nalType = (data[nalIndex] >> 1) & 0x3f;
      if (nalType >= 16 && nalType <= 21) return true;
      i = nalIndex;
    }
    return false;
  }

  function h264CodecFromAnnexB(data) {
    for (let i = 0; i + 7 < data.length; i++) {
      let startCodeLength = 0;
      if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 1) startCodeLength = 3;
      else if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0 && data[i + 3] === 1) startCodeLength = 4;
      if (!startCodeLength) continue;
      const nal = i + startCodeLength;
      if ((data[nal] & 0x1f) !== 7 || nal + 3 >= data.length) continue;
      return `avc1.${[data[nal + 1], data[nal + 2], data[nal + 3]]
        .map((value) => value.toString(16).padStart(2, "0"))
        .join("")}`;
    }
    return "";
  }

  function ensureVideoDecoder(videoBytes, width, height, codecName) {
    const detectedCodec = codecName === "h264" ? h264CodecFromAnnexB(videoBytes) : "";
    const codec = codecName === "hevc"
      ? "hev1.1.6.L156.B0"
      : (detectedCodec || h264StreamCodec || "avc1.4d0034");
    const codedWidth = Math.max(0, Number(width) || 0);
    const codedHeight = Math.max(0, Number(height) || 0);
    const configKey = `${codec}:${codedWidth}x${codedHeight}`;
    if (videoDecoder && videoDecoderConfigKey === configKey) {
      return true;
    }
    if (typeof VideoDecoder !== "function") {
      return false;
    }
    try {
      if (videoDecoder) destroyVideoDecoder();
      videoDecoder = new VideoDecoder({
        output: (frame) => {
          const outputStartedAt = performance.now();
          const timing = h264PendingTimings.shift();
          h264KeyframeErrorStreak = 0;
          if (timing) {
            diagnostics.decodeMs = smoothed(diagnostics.decodeMs, Math.max(0, outputStartedAt - timing.decodeStartedAt));
          }
          diagnostics.decodeQueue = videoDecoder?.decodeQueueSize || h264PendingTimings.length;
          queueDecodedVideoFrame(frame, timing);
          updateCanvasDecodePressure();
        },
        error: (err) => {
          console.warn(`rd: ${codecName} decoder error`, err);
          if (codecName === "h264") h264WaitingForKeyframe = true;
          updateCanvasDecodePressure(true);
          setTimeout(() => {
            if (codecName === "h264" && tryRecoverH264Stream("h264_async_decoder_error")) {
              return;
            }
            fallbackFromVideoCodec(codecName, err);
          }, 0);
        },
      });
      videoDecoder.addEventListener("dequeue", () => {
        diagnostics.decodeQueue = videoDecoder?.decodeQueueSize || 0;
        updateCanvasDecodePressure();
      });
      const config = { codec, optimizeForLatency: true };
      if (codedWidth > 0 && codedHeight > 0) {
        config.codedWidth = codedWidth;
        config.codedHeight = codedHeight;
      }
      videoDecoder.configure(config);
      videoDecoderConfigKey = configKey;
      if (codecName === "h264") h264StreamCodec = codec;
      return true;
    } catch (err) {
      console.warn(`rd: ${codecName} decoder unavailable`, err);
      fallbackFromVideoCodec(codecName, err);
      destroyVideoDecoder();
      return false;
    }
  }

  function recordWsFrameBytes(byteLength) {
    diagnostics.wsBytes += Math.max(0, Number(byteLength) || 0);
    const now = performance.now();
    const elapsed = now - diagnostics.wsWindowStartedAt;
    if (elapsed >= 1000) {
      const rate = (diagnostics.wsBytes * 8) / (elapsed * 1000);
      diagnostics.wsBitrateMbps = smoothed(diagnostics.wsBitrateMbps, rate, 0.4);
      diagnostics.wsBytes = 0;
      diagnostics.wsWindowStartedAt = now;
    }
  }

  function fallbackFromVideoCodec(codec, reason) {
    if (codec === "hevc" && disabledDecoderCodecs.has("hevc")) return;
    const reasonText = normalizeFallbackReason(reason);
    if (codec === "hevc" && browserDecoderCodecs.includes("h264")) {
      disabledDecoderCodecs.add("hevc");
      browserDecoderCodecs = browserDecoderCodecs.filter((name) => name !== "hevc");
      negotiatedCodec = "h264";
      destroyVideoDecoder();
      console.warn("rd: falling back from hevc to h264", reasonText);
      setCodecModeLabel("h264", "HEVC fallback");
      if (ws.readyState === WebSocket.OPEN) {
        const q = Number(qualitySlider?.value) || 90;
        sendCmd("desktop_set_quality", {
          quality: q,
          codec: "h264",
          softwareH264: useSoftwareH264(),
          source: "viewer_fallback",
          reason: reasonText,
        });
        requestEncoderCapabilities();
      }
      return;
    }
    fallbackToJpegCodec(reasonText);
  }

  function recordCanvasFrameTiming(receivedAt, decodeStartedAt) {
    const renderedAt = performance.now();
    diagnostics.decodeMs = smoothed(diagnostics.decodeMs, Math.max(0, renderedAt - decodeStartedAt));
    diagnostics.renderMs = smoothed(diagnostics.renderMs, Math.max(0, renderedAt - receivedAt));
    diagnostics.decodeQueue = videoDecoder?.decodeQueueSize || (pendingFrame ? 1 : 0);
    diagnostics.width = frameWidth || canvas.width || diagnostics.width;
    diagnostics.height = frameHeight || canvas.height || diagnostics.height;
  }

  function updateCanvasDecodePressure(forceRelease = false) {
    const queueSize = videoDecoder?.decodeQueueSize || 0;
    const shouldApply = !forceRelease && getWebrtcMode() === "off" && queueSize > 3;
    const shouldRelease = forceRelease || getWebrtcMode() !== "off" || queueSize <= 1;
    let next = canvasDecodePressure;
    if (!canvasDecodePressure && shouldApply) next = true;
    else if (canvasDecodePressure && shouldRelease) next = false;
    if (next === canvasDecodePressure) return;
    canvasDecodePressure = next;
    sendCmd("desktop_decode_pressure", { active: next, queueSize });
  }

  async function processFrameBuffer(buf, receivedAt = performance.now()) {
    const decodeStartedAt = performance.now();
    const fps = buf[5];
    const format = buf[6];
    const headerLength = buf[3] >= 2 && buf.length >= 12 ? 12 : 8;
    const encodedWidth = headerLength === 12 ? buf[8] | (buf[9] << 8) : 0;
    const encodedHeight = headerLength === 12 ? buf[10] | (buf[11] << 8) : 0;
    if (encodedWidth > 0 && encodedHeight > 0) {
      frameWidth = encodedWidth;
      frameHeight = encodedHeight;
      diagnostics.width = encodedWidth;
      diagnostics.height = encodedHeight;
    }

    if (format === 1) {
      const jpegBytes = buf.slice(headerLength);
      setCodecModeLabel("jpeg", "active");
      diagnostics.codec = "jpeg";
      await drawJpegSlice(jpegBytes, null);
      recordCanvasFrameTiming(receivedAt, decodeStartedAt);
      updateFpsDisplay(fps);
      updateCanvasDecodePressure(true);
      return;
    }

    if (format === 2 || format === 3) {
      setCodecModeLabel(format === 3 ? "raw" : "jpeg", format === 3 ? "blocks" : "blocks");
      diagnostics.codec = format === 3 ? "raw blocks" : "jpeg blocks";
      if (buf.length < headerLength + 8) {
        updateCanvasDecodePressure(true);
        return;
      }
      const dv = new DataView(buf.buffer, buf.byteOffset + headerLength, buf.byteLength - headerLength);
      let pos = 0;
      const width = dv.getUint16(pos, true);
      pos += 2;
      const height = dv.getUint16(pos, true);
      pos += 2;
      if (width > 0 && height > 0) {
        frameWidth = width;
        frameHeight = height;
      }
      const blockCount = dv.getUint16(pos, true);
      pos += 2;
      pos += 2;

      if (
        width > 0 &&
        height > 0 &&
        (canvas.width !== width || canvas.height !== height)
      ) {
        canvas.width = width;
        canvas.height = height;
      }

      for (let i = 0; i < blockCount; i++) {
        if (pos + 12 > dv.byteLength) break;
        const x = dv.getUint16(pos, true);
        pos += 2;
        const y = dv.getUint16(pos, true);
        pos += 2;
        const w = dv.getUint16(pos, true);
        pos += 2;
        const h = dv.getUint16(pos, true);
        pos += 2;
        const len = dv.getUint32(pos, true);
        pos += 4;
        const start = headerLength + pos;
        const end = start + len;
        if (end > buf.length) break;
        const slice = buf.subarray(start, end);
        pos += len;

        if (format === 2) {
          await drawJpegSlice(slice, { x, y, w, h });
        } else if (slice.length === w * h * 4) {
          const imgData = new ImageData(new Uint8ClampedArray(slice), w, h);
          ctx.putImageData(imgData, x, y);
        }
      }

      updateFpsDisplay(fps);
      recordCanvasFrameTiming(receivedAt, decodeStartedAt);
      updateCanvasDecodePressure(true);
      return;
    }

    if (format === 4 || format === 5) {
      const codecName = format === 5 ? "hevc" : "h264";
      setCodecModeLabel(codecName, "active");
      diagnostics.codec = codecName;
      const videoBytes = buf.slice(headerLength);
      if (!videoBytes.length) {
        updateCanvasDecodePressure(true);
        return;
      }
      if (!ensureVideoDecoder(videoBytes, encodedWidth || frameWidth, encodedHeight || frameHeight, codecName)) {
        updateCanvasDecodePressure(true);
        return;
      }

      if (!h264FirstFrameAt) {
        h264FirstFrameAt = performance.now();
      }
      h264FramesSeen += 1;

      const isKey = codecName === "hevc" ? isHEVCKeyFrame(videoBytes) : isH264KeyFrame(videoBytes);
      if (codecName === "h264" && h264WaitingForKeyframe && !isKey) {
        h264KeyframeErrorStreak += 1;
        const now = performance.now();
        if (!lastViewerKeyframeRequestAt || now - lastViewerKeyframeRequestAt >= VIEWER_FRAME_GAP_KEYFRAME_THROTTLE_MS) {
          lastViewerKeyframeRequestAt = now;
          sendCmd("desktop_request_keyframe", { reason: "h264_decoder_keyframe_required" });
        }
        if (h264KeyframeErrorStreak >= H264_KEYFRAME_ERROR_RESTART_THRESHOLD) {
          const restarted = tryRecoverH264Stream("h264_keyframe_timeout");
          if (!restarted) fallbackToJpegCodec("h264_keyframe_timeout_loop");
        }
        updateCanvasDecodePressure(true);
        return;
      }
      if (codecName === "h264" && isKey) {
        h264WaitingForKeyframe = false;
      }

      // If software H264 encode on the agent cannot keep up, automatically
      // fall back to JPEG blocks for a smoother interactive stream.
      const h264ElapsedMs = performance.now() - h264FirstFrameAt;
      if (codecName === "h264" && (fps || 0) <= H264_LOW_FPS_THRESHOLD) {
        h264LowFpsStreak += 1;
      } else {
        h264LowFpsStreak = 0;
      }
      if (
        codecName === "h264" &&
        h264ElapsedMs >= H264_FALLBACK_WARMUP_MS &&
        h264FramesSeen >= H264_MIN_FRAMES_BEFORE_FALLBACK &&
        h264LowFpsStreak >= H264_LOW_FPS_STREAK_LIMIT
      ) {
        fallbackToJpegCodec(`low h264 fps (${fps})`);
        updateCanvasDecodePressure(true);
        return;
      }

      const frameIntervalUs = Math.floor(1_000_000 / Math.max(1, fps || 25));
      const chunk = new EncodedVideoChunk({
        type: isKey ? "key" : "delta",
        timestamp: h264TimestampUs,
        data: videoBytes,
      });
      h264TimestampUs += frameIntervalUs;
      try {
        h264PendingTimings.push({ receivedAt, decodeStartedAt: performance.now() });
        videoDecoder.decode(chunk);
        diagnostics.decodeQueue = videoDecoder.decodeQueueSize;
        updateCanvasDecodePressure();
      } catch (err) {
        h264PendingTimings.pop();
        if (isKeyframeRequiredError(err)) {
          if (codecName === "h264") h264WaitingForKeyframe = true;
          h264KeyframeErrorStreak += 1;
          const now = Date.now();
          if (now - h264LastDecodeWarnAt >= H264_DECODE_WARN_THROTTLE_MS) {
            h264LastDecodeWarnAt = now;
            console.warn(`rd: ${codecName} decode waiting for keyframe`, {
              streak: h264KeyframeErrorStreak,
              recoveries: h264RecoveryAttempts,
            });
          }
          if (
            codecName === "h264" &&
            h264KeyframeErrorStreak >= H264_KEYFRAME_ERROR_RESTART_THRESHOLD
          ) {
            const restarted = tryRecoverH264Stream("h264_keyframe_required");
            if (!restarted) {
              fallbackToJpegCodec("h264_keyframe_required_loop");
            }
          }
          updateCanvasDecodePressure(true);
          return;
        }
        console.warn(`rd: ${codecName} decode failed`, err);
        fallbackFromVideoCodec(codecName, err);
        updateCanvasDecodePressure(true);
      }
      return;
    }
    updateCanvasDecodePressure(true);
  }

  function flushPendingFrame() {
    if (frameDecodeBusy || !pendingFrame) {
      return;
    }
    const next = pendingFrame;
    pendingFrame = null;
    frameDecodeBusy = true;
    processFrameBuffer(next.buf, next.receivedAt).finally(() => {
      frameDecodeBusy = false;
      if (pendingFrame) {
        flushPendingFrame();
      }
    });
  }

  function onWsMessage(ev) {
    if (ev.data instanceof ArrayBuffer) {
      const buf = new Uint8Array(ev.data);
      if (isFramePacket(buf)) {
        markFrameReceived();
        recordWsFrameBytes(buf.byteLength);
        // Coalesce bursty arrivals so the renderer catches up to the newest frame.
        if (pendingFrame) diagnostics.coalescedFrames += 1;
        pendingFrame = { buf, receivedAt: performance.now() };
        flushPendingFrame();
        return;
      }

      const msg = decodeMsgpack(buf);
      if (msg && msg.type === "desktop_cursor") {
        renderRemoteCursor(msg);
        return;
      }
      if (msg && msg.type === "desktop_encoder_capabilities") {
        applyEncoderCapabilities(msg);
        return;
      }
      if (msg && msg.type === "desktop_stream_stats") {
        handleDesktopStreamStats(msg);
        return;
      }
      if (msg && msg.type === "status" && msg.status) {
        handleStatus(msg);
        return;
      }
      if (msg && msg.type === "webrtc_ready" && typeof msg.whepPath === "string") {
        startWhep(msg.whepPath);
        return;
      }
      if (msg && msg.type === "webrtc_p2p_answer" && typeof msg.sdp === "string") {
        if (p2pClient) p2pClient.onAnswer(msg.sdp);
        return;
      }
      if (msg && msg.type === "webrtc_p2p_ice") {
        if (p2pClient) p2pClient.onRemoteCandidate(msg);
        return;
      }
      if (msg && msg.type === "input_latency") {
        updateLatency(Number(msg.ms) || 0);
        return;
      }
      if (msg && msg.type === "recording_status") {
        handleRecordingStatus(msg);
        return;
      }
      if (msg && msg.type === "clipboard_content") {
        if (clipboardSyncCtrl && clipboardSyncCtrl.checked && streamState === "streaming" && msg.text) {
          lastClipboardText = msg.text;
          navigator.clipboard.writeText(msg.text).catch(() => {});
        }
        return;
      }
      return;
    }

    const msg = decodeMsgpack(ev.data);
    if (msg && msg.type === "desktop_cursor") {
      renderRemoteCursor(msg);
      return;
    }
    if (msg && msg.type === "desktop_encoder_capabilities") {
      applyEncoderCapabilities(msg);
      return;
    }
    if (msg && msg.type === "desktop_stream_stats") {
      handleDesktopStreamStats(msg);
      return;
    }
    if (msg && msg.type === "status" && msg.status) {
      handleStatus(msg);
      return;
    }
    if (msg && msg.type === "input_latency") {
      updateLatency(Number(msg.ms) || 0);
      return;
    }
    if (msg && msg.type === "recording_status") {
      handleRecordingStatus(msg);
      return;
    }
    if (msg && msg.type === "clipboard_content") {
      if (clipboardSyncCtrl && clipboardSyncCtrl.checked && streamState === "streaming" && msg.text) {
        lastClipboardText = msg.text;
        navigator.clipboard.writeText(msg.text).catch(() => {});
      }
      return;
    }
  }

  function onWsOpen() {
    reconnectDelay = 1000;
    rdDebug("ws open", {
      url: ws.url,
      readyState: ws.readyState,
      clientId,
    });
    if (qualitySlider) {
      pushQuality(qualitySlider.value);
    }
    pushBitrate();
    pushInputToggles();
    pushCaptureToggles();
    clearOfflineTimer();
    if (desiredStreaming) {
      setStreamState("starting", "Resuming stream");
      if (displaySelect && displaySelect.value !== undefined) {
        sendCmd("desktop_select_display", {
          display: parseInt(displaySelect.value, 10) || 0,
        });
      }
      pushStreamProfile();
      const mode = getWebrtcMode();
      if (mode === "relayed") {
        sendCmd("desktop_start", { webrtc: true });
      } else if (mode === "p2p") {
        sendCmd("desktop_start", { canvasFlowControl: false });
        startP2P();
      } else {
        sendCmd("desktop_start", { canvasFlowControl: true });
      }
    } else {
      setStreamState("idle", "Stopped");
    }
    sendCmd("desktop_record_status", {});
    requestEncoderCapabilities();
    fetchClientInfo().then(() => {
      if (displaySelect && displaySelect.value) {
        console.debug("rd: initial select display", displaySelect.value);
        sendCmd("desktop_select_display", {
          display: parseInt(displaySelect.value, 10),
        });
      }
    });
  }

  function onWsClose(event) {
    rdDebug("ws close", {
      code: event.code,
      reason: event.reason,
      wasClean: event.wasClean,
      streamState,
      desiredStreaming,
    });
    disconnectAudio();
    destroyVideoDecoder();
    stopAllWebrtc();
    if (desiredStreaming) {
      setStreamState("connecting", "Reconnecting");
      scheduleReconnect();
    } else {
      clearRecordingTimer();
      serverRecording = null;
      setRecordingUi(false);
      setStreamState("disconnected", "Disconnected");
    }
  }

  function onWsError(event) {
    console.warn("rd: ws error", event);
    destroyVideoDecoder();
    stopAllWebrtc();
    setStreamState("error", "WebSocket error");
  }

  connectWs();

  if (!frameWatchTimer) {
    frameWatchTimer = setInterval(() => {
      const now = performance.now();
      if (desiredStreaming) {
        if (lastFrameAt && now - lastFrameAt > 2000) {
          setStreamState("stalled", "No frames");
        } else if (!lastFrameAt && streamState === "starting") {
          setStreamState("starting", "Starting stream");
        }
      } else if (streamState !== "offline" && streamState !== "disconnected" && streamState !== "error") {
        if (lastFrameAt && now - lastFrameAt < 2000) {
          if (streamState !== "stopping") {
            setStreamState("stopping", "Stopping stream");
          }
        } else if (streamState !== "idle") {
          setStreamState("idle", "Stopped");
        }
      }
    }, 1000);
  }

  function getRenderPoint(e) {
    const surface = e.currentTarget;
    let rect = surface.getBoundingClientRect();
    if (!rect.width || !rect.height) {
      rect = canvasContainer?.getBoundingClientRect() || rect;
    }
    const targetW = surface === webrtcVideo
      ? (webrtcVideo.videoWidth || frameWidth)
      : (canvas.width || frameWidth);
    const targetH = surface === webrtcVideo
      ? (webrtcVideo.videoHeight || frameHeight)
      : (canvas.height || frameHeight);
    if (!rect.width || !rect.height || !targetW || !targetH) return null;
    rect = getContainedSurfaceRect(surface, targetW, targetH, rect);
    if (e.clientX < rect.left || e.clientX > rect.right ||
        e.clientY < rect.top || e.clientY > rect.bottom) return null;
    let x = ((e.clientX - rect.left) / rect.width) * targetW;
    let y = ((e.clientY - rect.top) / rect.height) * targetH;
    if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
    x = Math.max(0, Math.min(targetW - 1, Math.floor(x)));
    y = Math.max(0, Math.min(targetH - 1, Math.floor(y)));
    return { x, y };
  }

  function setDirectInputActive(active) {
    directInputActive = !!active;
    if (inputLatency) inputLatency.textContent = directInputActive ? "P2P direct" : msText(latencyAvg);
    renderDiagnostics();
  }

  function getContainedSurfaceRect(surface, sourceWidth, sourceHeight, elementRect = surface.getBoundingClientRect()) {
    if (!elementRect.width || !elementRect.height || !sourceWidth || !sourceHeight) return elementRect;
    const fit = getComputedStyle(surface).objectFit;
    if (fit !== "contain" && fit !== "scale-down") return elementRect;
    let scale = Math.min(elementRect.width / sourceWidth, elementRect.height / sourceHeight);
    if (fit === "scale-down") scale = Math.min(1, scale);
    const width = sourceWidth * scale;
    const height = sourceHeight * scale;
    const left = elementRect.left + (elementRect.width - width) / 2;
    const top = elementRect.top + (elementRect.height - height) / 2;
    return {
      x: left, y: top, left, top, right: left + width, bottom: top + height,
      width, height, toJSON() { return this; },
    };
  }

  function scheduleMouseMove() {
    if (moveTimer) return;
    const wait = Math.max(0, inputMoveIntervalMs - (performance.now() - lastMoveSentAt));
    if (wait === 0) flushMouseMove();
    else moveTimer = window.setTimeout(flushMouseMove, wait);
  }

  function flushMouseMove() {
    if (moveTimer) window.clearTimeout(moveTimer);
    moveTimer = 0;
    if (!isInputActive() || !pendingMove || !mouseCtrl.checked) {
      smoothPoint = null;
      return;
    }
    if (!smoothPoint) {
      smoothPoint = { x: pendingMove.x, y: pendingMove.y };
    }

    const factor = Math.max(0, Math.min(0.4, smoothingPct / 200));
    smoothPoint.x += (pendingMove.x - smoothPoint.x) * (1 - factor);
    smoothPoint.y += (pendingMove.y - smoothPoint.y) * (1 - factor);
    const sendPoint = {
      x: Math.round(smoothPoint.x),
      y: Math.round(smoothPoint.y),
    };

    if (ws && ws.bufferedAmount <= inputBackpressureBytes) {
      sendCmd("mouse_move", sendPoint);
      lastMoveSentAt = performance.now();
    }

    if (Math.abs(pendingMove.x - smoothPoint.x) > 0.5 ||
        Math.abs(pendingMove.y - smoothPoint.y) > 0.5) {
      scheduleMouseMove();
    } else {
      smoothPoint = { x: pendingMove.x, y: pendingMove.y };
    }
  }

  for (const inputSurface of [canvas, webrtcVideo]) {
    if (!inputSurface) continue;
    inputSurface.addEventListener("mousemove", function (e) {
      if (!isInputActive() || !mouseCtrl.checked) return;
      const pt = getRenderPoint(e);
      if (!pt) return;
      pendingMove = pt;
      scheduleMouseMove();
    });
    inputSurface.addEventListener("mousedown", function (e) {
      canvasContainer.focus({ preventScroll: true });
      if (!isInputActive() || !mouseCtrl.checked) return;
      const pt = getRenderPoint(e);
      if (!pt) return;
      pendingMove = pt;
      smoothPoint = { x: pt.x, y: pt.y };
      sendCmd("mouse_down", { button: e.button, ...pt });
      e.preventDefault();
    });
    inputSurface.addEventListener("mouseup", function (e) {
      if (!isInputActive() || !mouseCtrl.checked) return;
      const pt = getRenderPoint(e);
      if (!pt) return;
      pendingMove = pt;
      smoothPoint = { x: pt.x, y: pt.y };
      sendCmd("mouse_up", { button: e.button, ...pt });
      e.preventDefault();
    });
    inputSurface.addEventListener("contextmenu", function (e) {
      if (isInputActive() && mouseCtrl.checked) e.preventDefault();
    });
    inputSurface.addEventListener("wheel", function (e) {
      if (!isInputActive() || !mouseCtrl.checked) return;
      const pt = getRenderPoint(e);
      if (!pt) return;
      const delta = Math.max(-120, Math.min(120, Math.round(-e.deltaY)));
      sendCmd("mouse_wheel", { delta, x: pt.x, y: pt.y });
      e.preventDefault();
    }, { passive: false });
    inputSurface.addEventListener("click", function () {
      canvasContainer.focus({ preventScroll: true });
    });
  }

  function stopOnExit() {
    sharedSettingsSaver.saveNow();
    if (isRecording()) stopRecording();
    disablePrivacyIfActive();
    if (ws && ws.readyState === WebSocket.OPEN && desiredStreaming) {
      desiredStreaming = false;
      sendCmd("desktop_stop", {});
    }
    disconnectAudio();
    destroyVideoDecoder();
    if (fileTransferWs) {
      try { fileTransferWs.close(1000, "page hidden"); } catch {}
      fileTransferWs = null;
    }
  }

  window.addEventListener("beforeunload", stopOnExit);
  window.addEventListener("pagehide", stopOnExit);

  setupRemoteDesktopFileDrop();
  fetchClientInfo();
})();