feat(ui): send mouse wheel via binary HID-RPC when available

Mirror the existing rel/abs mouse pattern: when the HID-RPC binary
channel is ready, send a WheelReportMessage (0x04) over the
unreliable-ordered channel instead of the wheelReport JSON-RPC call.
Falls back to JSON-RPC during the WebRTC/handshake window or against
older firmware that does not dispatch the binary opcode.

Also fix two pre-existing oxlint warnings in the same files
(restrict-template-expressions) forced by lint-staged.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: mcuelenaere

ui/src/hooks/hidRpc.ts

@@ -240,7 +240,7 @@ export class KeyboardMacroReportMessage extends RpcMessage {
       // Ensure the keys are within the KEYS_LENGTH range
       const keys = step.keys;
       if (keys.length > this.KEYS_LENGTH) {
-        throw new Error(`Keys ${keys} is not within the hidKeyBufferSize range`);
+        throw new Error(`Keys ${keys.join(",")} is not within the hidKeyBufferSize range`);
       } else if (keys.length < this.KEYS_LENGTH) {
         keys.push(...Array(this.KEYS_LENGTH - keys.length).fill(0));
       }
@@ -400,6 +400,25 @@ export class KeypressKeepAliveMessage extends RpcMessage {
   }
 }
 
+export class WheelReportMessage extends RpcMessage {
+  deltaY: number;
+  deltaX: number;
+
+  constructor(deltaY: number, deltaX: number) {
+    super(HID_RPC_MESSAGE_TYPES.WheelReport);
+    this.deltaY = deltaY;
+    this.deltaX = deltaX;
+  }
+
+  marshal(): Uint8Array {
+    return new Uint8Array([
+      this.messageType,
+      fromInt8ToUint8(this.deltaY),
+      fromInt8ToUint8(this.deltaX),
+    ]);
+  }
+}
+
 export const messageRegistry = {
   [HID_RPC_MESSAGE_TYPES.Handshake]: HandshakeMessage,
   [HID_RPC_MESSAGE_TYPES.KeysDownState]: KeysDownStateMessage,

ui/src/hooks/useHidRpc.ts

@@ -15,6 +15,7 @@ import {
   MouseReportMessage,
   PointerReportMessage,
   RpcMessage,
+  WheelReportMessage,
   unmarshalHidRpcMessage,
 } from "./hidRpc";
 
@@ -273,6 +274,16 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
     [sendMessage],
   );
 
+  const reportWheelEvent = useCallback(
+    (deltaY: number, deltaX: number) => {
+      // Wheel events are motion-like — a single dropped detent self-corrects
+      // via the next event, so we ride the unreliable-ordered channel for
+      // lower latency, matching how mouse motion is sent.
+      sendMessage(new WheelReportMessage(deltaY, deltaX), { useUnreliableChannel: true });
+    },
+    [sendMessage],
+  );
+
   const reportKeyboardMacroEvent = useCallback(
     (steps: KeyboardMacroStep[]) => {
       sendMessage(new KeyboardMacroReportMessage(false, steps.length, steps));
@@ -314,7 +325,7 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
     };
 
     const errorHandler = (e: Event) => {
-      console.error(`Error on rpcHidChannel '${rpcHidChannel.label}': ${e}`);
+      console.error(`Error on rpcHidChannel '${rpcHidChannel.label}': ${e.type}`);
     };
 
     rpcHidChannel.addEventListener("message", messageHandler);
@@ -331,6 +342,7 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
     reportKeypressEvent,
     reportAbsMouseEvent,
     reportRelMouseEvent,
+    reportWheelEvent,
     reportKeyboardMacroEvent,
     cancelOngoingKeyboardMacro,
     reportKeypressKeepAlive,

ui/src/hooks/useMouse.ts

@@ -25,7 +25,7 @@ export default function useMouse() {
 
   // RPC hooks
   const { send } = useJsonRpc();
-  const { reportAbsMouseEvent, reportRelMouseEvent, rpcHidReady } = useHidRpc();
+  const { reportAbsMouseEvent, reportRelMouseEvent, reportWheelEvent, rpcHidReady } = useHidRpc();
   // Mouse-related
 
   const sendRelMouseMovement = useCallback(
@@ -142,15 +142,20 @@ export default function useMouse() {
 
       if (wheelY === 0 && wheelX === 0) return;
 
-      send("wheelReport", { wheelY, wheelX });
+      if (rpcHidReady) {
+        reportWheelEvent(wheelY, wheelX);
+      } else {
+        // kept for backward compatibility
+        send("wheelReport", { wheelY, wheelX });
+      }
 
       // Apply blocking delay based of throttling settings
       if (scrollThrottling && !blockWheelEvent) {
         setBlockWheelEvent(true);
         setTimeout(() => setBlockWheelEvent(false), scrollThrottling);
       }
     },
-    [send, blockWheelEvent, scrollThrottling, invertScroll],
+    [send, reportWheelEvent, rpcHidReady, blockWheelEvent, scrollThrottling, invertScroll],
   );
 
   const resetMousePosition = useCallback(() => {