refactor: send keypress as early as possible

ui/src/hooks/useKeyboard.ts

@@ -1,6 +1,12 @@
 import { useCallback, useRef } from "react";
 
-import { hidErrorRollOver, hidKeyBufferSize, KeysDownState, useHidStore, useRTCStore } from "@/hooks/stores";
+import {
+  hidErrorRollOver,
+  hidKeyBufferSize,
+  KeysDownState,
+  useHidStore,
+  useRTCStore,
+} from "@/hooks/stores";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 import { useHidRpc } from "@/hooks/useHidRpc";
 import { KeyboardLedStateMessage, KeysDownStateMessage } from "@/hooks/hidRpc";
@@ -31,7 +37,7 @@ export default function useKeyboard() {
     reportKeypressEvent: sendKeypressEventHidRpc,
     reportKeypressKeepAlive: sendKeypressKeepAliveHidRpc,
     rpcHidReady,
-  } = useHidRpc((message) => {
+  } = useHidRpc(message => {
     switch (message.constructor) {
       case KeysDownStateMessage:
         setKeysDownState((message as KeysDownStateMessage).keysDownState);
@@ -52,7 +58,9 @@ export default function useKeyboard() {
     async (state: KeysDownState) => {
       if (rpcDataChannel?.readyState !== "open" && !rpcHidReady) return;
 
-      console.debug(`Send keyboardReport keys: ${state.keys}, modifier: ${state.modifier}`);
+      console.debug(
+        `Send keyboardReport keys: ${state.keys}, modifier: ${state.modifier}`,
+      );
 
       if (rpcHidReady) {
         console.debug("Sending keyboard report via HidRPC");
@@ -60,20 +68,18 @@ export default function useKeyboard() {
         return;
       }
 
-      send("keyboardReport", { keys: state.keys, modifier: state.modifier }, (resp: JsonRpcResponse) => {
+      send(
+        "keyboardReport",
+        { keys: state.keys, modifier: state.modifier },
+        (resp: JsonRpcResponse) => {
           if ("error" in resp) {
             console.error(`Failed to send keyboard report ${state}`, resp.error);
           }
-      });
         },
-    [
-      rpcDataChannel?.readyState,
-      rpcHidReady,
-      send,
-      sendKeyboardEventHidRpc,
-    ],
       );
-
+    },
+    [rpcDataChannel?.readyState, rpcHidReady, send, sendKeyboardEventHidRpc],
+  );
 
   // executeMacro is used to execute a macro consisting of multiple steps.
   // Each step can have multiple keys, multiple modifiers and a delay.
@@ -81,10 +87,14 @@ export default function useKeyboard() {
   // After the delay, the keys and modifiers are released and the next step is executed.
   // If a step has no keys or modifiers, it is treated as a delay-only step.
   // A small pause is added between steps to ensure that the device can process the events.
-  const executeMacro = async (steps: { keys: string[] | null; modifiers: string[] | null; delay: number }[]) => {
+  const executeMacro = async (
+    steps: { keys: string[] | null; modifiers: string[] | null; delay: number }[],
+  ) => {
     for (const [index, step] of steps.entries()) {
       const keyValues = (step.keys || []).map(key => keys[key]).filter(Boolean);
-      const modifierMask: number = (step.modifiers || []).map(mod => modifiers[mod]).reduce((acc, val) => acc + val, 0);
+      const modifierMask: number = (step.modifiers || [])
+        .map(mod => modifiers[mod])
+        .reduce((acc, val) => acc + val, 0);
 
       // If the step has keys and/or modifiers, press them and hold for the delay
       if (keyValues.length > 0 || modifierMask > 0) {
@@ -119,6 +129,8 @@ export default function useKeyboard() {
       clearInterval(keepAliveTimerRef.current);
     }
 
+    sendKeypressKeepAliveHidRpc();
+
     // Create new interval timer
     keepAliveTimerRef.current = setInterval(() => {
       sendKeypressKeepAliveHidRpc();
@@ -174,7 +186,11 @@ export default function useKeyboard() {
         sendKeypress(key, press);
       } else {
         // if the keyPress api is not available, we need to handle the key locally
-        const downState = simulateDeviceSideKeyHandlingForLegacyDevices(keysDownState, key, press);
+        const downState = simulateDeviceSideKeyHandlingForLegacyDevices(
+          keysDownState,
+          key,
+          press,
+        );
         sendKeyboardEvent(downState); // then we send the full state
 
         // if we just sent ErrorRollOver, reset to empty state
@@ -194,7 +210,11 @@ export default function useKeyboard() {
   );
 
   // IMPORTANT: See the keyPressReportApiAvailable comment above for the reason this exists
-  function simulateDeviceSideKeyHandlingForLegacyDevices(state: KeysDownState, key: number, press: boolean): KeysDownState {
+  function simulateDeviceSideKeyHandlingForLegacyDevices(
+    state: KeysDownState,
+    key: number,
+    press: boolean,
+  ): KeysDownState {
     // IMPORTANT: This code parallels the logic in the kernel's hid-gadget driver
     // for handling key presses and releases. It ensures that the USB gadget
     // behaves similarly to a real USB HID keyboard. This logic is paralleled
@@ -223,7 +243,7 @@ export default function useKeyboard() {
         // and if we find a zero byte, we can place the key there (if press is true)
         if (keys[i] === key || keys[i] === 0) {
           if (press) {
-            keys[i] = key // overwrites the zero byte or the same key if already pressed
+            keys[i] = key; // overwrites the zero byte or the same key if already pressed
           } else {
             // we are releasing the key, remove it from the buffer
             if (keys[i] !== 0) {
@@ -239,13 +259,15 @@ export default function useKeyboard() {
       // If we reach here it means we didn't find an empty slot or the key in the buffer
       if (overrun) {
         if (press) {
-          console.warn(`keyboard buffer overflow current keys ${keys}, key: ${key} not added`);
+          console.warn(
+            `keyboard buffer overflow current keys ${keys}, key: ${key} not added`,
+          );
           // Fill all key slots with ErrorRollOver (0x01) to indicate overflow
           keys.length = hidKeyBufferSize;
           keys.fill(hidErrorRollOver);
         } else {
           // If we are releasing a key, and we didn't find it in a slot, who cares?
-          console.debug(`key ${key} not found in buffer, nothing to release`)
+          console.debug(`key ${key} not found in buffer, nothing to release`);
         }
       }
     }