feat(ui): add wake host button and sleep hint to no-signal overlay

When no HDMI signal is detected, the overlay now shows:
- A hint that the target computer may be sleeping
- A "Wake Host" button that sends a spacebar press/release via HID

This helps users discover that they can wake a sleeping host directly
from the JetKVM web interface, complementing the USB remote wakeup
kernel support.

Author: jlian

ui/localization/messages/en.json

@@ -935,5 +935,8 @@
     "wake_on_lan_invalid_mac": "Invalid MAC address",
     "wake_on_lan_magic_sent_success": "Magic Packet sent successfully",
     "welcome_to_jetkvm": "Welcome to JetKVM",
-    "welcome_to_jetkvm_description": "Control any computer remotely"
+    "welcome_to_jetkvm_description": "Control any computer remotely",
+    "video_overlay_no_hdmi_try_wake": "If the target computer is sleeping, you can try waking it with a simulated keyboard press",
+    "video_overlay_no_hdmi_wake_host": "Try Wake Host",
+    "video_overlay_no_hdmi_wake_host_sending": "Sending wake signal..."
 }

ui/src/components/VideoOverlay.tsx

@@ -216,9 +216,11 @@ export function PeerConnectionDisconnectedOverlay({ show }: PeerConnectionDiscon
 interface HDMIErrorOverlayProps {
   readonly show: boolean;
   readonly hdmiState: string;
+  readonly onWakeHost?: () => void;
+  readonly isWaking?: boolean;
 }
 
-export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
+export function HDMIErrorOverlay({ show, hdmiState, onWakeHost, isWaking }: HDMIErrorOverlayProps) {
   const isNoSignal = hdmiState === "no_signal";
   const isOtherError = hdmiState === "no_lock" || hdmiState === "out_of_range";
 
@@ -247,16 +249,30 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
                         <li>{m.video_overlay_no_hdmi_ensure_cable()}</li>
                         <li>{m.video_overlay_no_hdmi_ensure_power()}</li>
                         <li>{m.video_overlay_no_hdmi_adapter_compat()}</li>
+                        <li>{m.video_overlay_no_hdmi_try_wake()}</li>
                       </ul>
                     </div>
-                    <div>
+                    <div className="flex items-center gap-x-2">
                       <LinkButton
                         to={"https://jetkvm.com/docs/getting-started/troubleshooting"}
                         theme="light"
                         text={m.video_overlay_learn_more()}
                         TrailingIcon={ArrowRightIcon}
                         size="SM"
                       />
+                      {onWakeHost && (
+                        <Button
+                          onClick={onWakeHost}
+                          text={
+                            isWaking
+                              ? m.video_overlay_no_hdmi_wake_host_sending()
+                              : m.video_overlay_no_hdmi_wake_host()
+                          }
+                          size="SM"
+                          theme="primary"
+                          disabled={isWaking}
+                        />
+                      )}
                     </div>
                   </div>
                 </div>

ui/src/components/WebRTCVideo.tsx

@@ -6,6 +6,7 @@ import { isWindows } from "@/utils";
 import useKeyboard from "@hooks/useKeyboard";
 import useMouse from "@hooks/useMouse";
 import { useRTCStore, useSettingsStore, useVideoStore } from "@hooks/stores";
+import { useJsonRpc } from "@hooks/useJsonRpc";
 import VirtualKeyboard from "@components/VirtualKeyboard";
 import Actionbar from "@components/ActionBar";
 import MacroBar from "@components/MacroBar";
@@ -23,6 +24,8 @@ import { m } from "@localizations/messages.js";
 export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssues: boolean }) {
   // Video and stream related refs and states
   const videoElm = useRef<HTMLVideoElement>(null);
+  const [isWaking, setIsWaking] = useState(false);
+  const { send } = useJsonRpc();
   const fullscreenContainerRef = useRef<HTMLDivElement>(null);
   const { mediaStream, peerConnectionState } = useRTCStore();
   const [isPlaying, setIsPlaying] = useState(false);
@@ -32,6 +35,18 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
   const isPointerLockPossible =
     window.location.protocol === "https:" || window.location.hostname === "localhost";
 
+  // Wake host handler - sends a spacebar press+release to wake sleeping host
+  const handleWakeHost = useCallback(() => {
+    setIsWaking(true);
+    // Send spacebar (HID usage 0x2C) press
+    send("keyboardReport", { keys: [0x2c, 0, 0, 0, 0, 0], modifier: 0 }, () => {
+      // Send key release
+      send("keyboardReport", { keys: [0, 0, 0, 0, 0, 0], modifier: 0 }, () => {
+        setTimeout(() => setIsWaking(false), 3000);
+      });
+    });
+  }, [send]);
+
   // Store hooks
   const settings = useSettingsStore();
   const { handleKeyPress, resetKeyboardState } = useKeyboard();
@@ -640,7 +655,12 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
                         >
                           <div className="relative h-full w-full rounded-md">
                             <LoadingVideoOverlay show={isVideoLoading} />
-                            <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} />
+                            <HDMIErrorOverlay
+                              show={hdmiError}
+                              hdmiState={hdmiState}
+                              onWakeHost={handleWakeHost}
+                              isWaking={isWaking}
+                            />
                             <NoAutoplayPermissionsOverlay
                               show={hasNoAutoPlayPermissions}
                               onPlayClick={() => {