feat: allow user to disable keyboard LED synchronization (#507)

* feat: allow user to disable keyboard LED synchronization

* Update ui/src/hooks/stores.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

internal/usbgadget/hid_keyboard.go

@@ -1,8 +1,11 @@
 package usbgadget
 
 import (
+	"context"
 	"fmt"
 	"os"
+	"reflect"
+	"time"
 )
 
 var keyboardConfig = gadgetConfigItem{
@@ -36,6 +39,7 @@ var keyboardReportDesc = []byte{
 	0x81, 0x03, /*   INPUT (Cnst,Var,Abs)                 */
 	0x95, 0x05, /*   REPORT_COUNT (5)                     */
 	0x75, 0x01, /*   REPORT_SIZE (1)                      */
+
 	0x05, 0x08, /*   USAGE_PAGE (LEDs)                    */
 	0x19, 0x01, /*   USAGE_MINIMUM (Num Lock)             */
 	0x29, 0x05, /*   USAGE_MAXIMUM (Kana)                 */
@@ -54,13 +58,139 @@ var keyboardReportDesc = []byte{
 	0xc0, /* END_COLLECTION                         */
 }
 
-func (u *UsbGadget) keyboardWriteHidFile(data []byte) error {
+const (
+	hidReadBufferSize = 8
+	// https://www.usb.org/sites/default/files/documents/hid1_11.pdf
+	// https://www.usb.org/sites/default/files/hut1_2.pdf
+	KeyboardLedMaskNumLock    = 1 << 0
+	KeyboardLedMaskCapsLock   = 1 << 1
+	KeyboardLedMaskScrollLock = 1 << 2
+	KeyboardLedMaskCompose    = 1 << 3
+	KeyboardLedMaskKana       = 1 << 4
+	ValidKeyboardLedMasks     = KeyboardLedMaskNumLock | KeyboardLedMaskCapsLock | KeyboardLedMaskScrollLock | KeyboardLedMaskCompose | KeyboardLedMaskKana
+)
+
+// Synchronization between LED states and CAPS LOCK, NUM LOCK, SCROLL LOCK,
+// COMPOSE, and KANA events is maintained by the host and NOT the keyboard. If
+// using the keyboard descriptor in Appendix B, LED states are set by sending a
+// 5-bit absolute report to the keyboard via a Set_Report(Output) request.
+type KeyboardState struct {
+	NumLock    bool `json:"num_lock"`
+	CapsLock   bool `json:"caps_lock"`
+	ScrollLock bool `json:"scroll_lock"`
+	Compose    bool `json:"compose"`
+	Kana       bool `json:"kana"`
+}
+
+func getKeyboardState(b byte) KeyboardState {
+	// should we check if it's the correct usage page?
+	return KeyboardState{
+		NumLock:    b&KeyboardLedMaskNumLock != 0,
+		CapsLock:   b&KeyboardLedMaskCapsLock != 0,
+		ScrollLock: b&KeyboardLedMaskScrollLock != 0,
+		Compose:    b&KeyboardLedMaskCompose != 0,
+		Kana:       b&KeyboardLedMaskKana != 0,
+	}
+}
+
+func (u *UsbGadget) updateKeyboardState(b byte) {
+	u.keyboardStateLock.Lock()
+	defer u.keyboardStateLock.Unlock()
+
+	if b&^ValidKeyboardLedMasks != 0 {
+		u.log.Trace().Uint8("b", b).Msg("contains invalid bits, ignoring")
+		return
+	}
+
+	newState := getKeyboardState(b)
+	if reflect.DeepEqual(u.keyboardState, newState) {
+		return
+	}
+	u.log.Info().Interface("old", u.keyboardState).Interface("new", newState).Msg("keyboardState updated")
+	u.keyboardState = newState
+
+	if u.onKeyboardStateChange != nil {
+		(*u.onKeyboardStateChange)(newState)
+	}
+}
+
+func (u *UsbGadget) SetOnKeyboardStateChange(f func(state KeyboardState)) {
+	u.onKeyboardStateChange = &f
+}
+
+func (u *UsbGadget) GetKeyboardState() KeyboardState {
+	u.keyboardStateLock.Lock()
+	defer u.keyboardStateLock.Unlock()
+
+	return u.keyboardState
+}
+
+func (u *UsbGadget) listenKeyboardEvents() {
+	var path string
+	if u.keyboardHidFile != nil {
+		path = u.keyboardHidFile.Name()
+	}
+	l := u.log.With().Str("listener", "keyboardEvents").Str("path", path).Logger()
+	l.Trace().Msg("starting")
+
+	go func() {
+		buf := make([]byte, hidReadBufferSize)
+		for {
+			select {
+			case <-u.keyboardStateCtx.Done():
+				l.Info().Msg("context done")
+				return
+			default:
+				l.Trace().Msg("reading from keyboard")
 				if u.keyboardHidFile == nil {
+					l.Error().Msg("keyboardHidFile is nil")
+					time.Sleep(time.Second)
+					continue
+				}
+				n, err := u.keyboardHidFile.Read(buf)
+				if err != nil {
+					l.Error().Err(err).Msg("failed to read")
+					continue
+				}
+				l.Trace().Int("n", n).Bytes("buf", buf).Msg("got data from keyboard")
+				if n != 1 {
+					l.Trace().Int("n", n).Msg("expected 1 byte, got")
+					continue
+				}
+				u.updateKeyboardState(buf[0])
+			}
+		}
+	}()
+}
+
+func (u *UsbGadget) openKeyboardHidFile() error {
+	if u.keyboardHidFile != nil {
+		return nil
+	}
+
 	var err error
 	u.keyboardHidFile, err = os.OpenFile("/dev/hidg0", os.O_RDWR, 0666)
 	if err != nil {
 		return fmt.Errorf("failed to open hidg0: %w", err)
 	}
+
+	if u.keyboardStateCancel != nil {
+		u.keyboardStateCancel()
+	}
+
+	u.keyboardStateCtx, u.keyboardStateCancel = context.WithCancel(context.Background())
+	u.listenKeyboardEvents()
+
+	return nil
+}
+
+func (u *UsbGadget) OpenKeyboardHidFile() error {
+	return u.openKeyboardHidFile()
+}
+
+func (u *UsbGadget) keyboardWriteHidFile(data []byte) error {
+	if err := u.openKeyboardHidFile(); err != nil {
+		return err
 	}
 
 	_, err := u.keyboardHidFile.Write(data)

internal/usbgadget/usbgadget.go

@@ -3,6 +3,7 @@
 package usbgadget
 
 import (
+	"context"
 	"os"
 	"path"
 	"sync"
@@ -59,6 +60,11 @@ type UsbGadget struct {
 	relMouseHidFile *os.File
 	relMouseLock    sync.Mutex
 
+	keyboardState       KeyboardState
+	keyboardStateLock   sync.Mutex
+	keyboardStateCtx    context.Context
+	keyboardStateCancel context.CancelFunc
+
 	enabledDevices Devices
 
 	strictMode bool // only intended for testing for now
@@ -70,6 +76,8 @@ type UsbGadget struct {
 	tx     *UsbGadgetTransaction
 	txLock sync.Mutex
 
+	onKeyboardStateChange *func(state KeyboardState)
+
 	log *zerolog.Logger
 }
 
@@ -96,6 +104,8 @@ func newUsbGadget(name string, configMap map[string]gadgetConfigItem, enabledDev
 		config = &Config{isEmpty: true}
 	}
 
+	keyboardCtx, keyboardCancel := context.WithCancel(context.Background())
+
 	g := &UsbGadget{
 		name:                name,
 		kvmGadgetPath:       path.Join(gadgetPath, name),
@@ -107,6 +117,9 @@ func newUsbGadget(name string, configMap map[string]gadgetConfigItem, enabledDev
 		absMouseLock:        sync.Mutex{},
 		relMouseLock:        sync.Mutex{},
 		txLock:              sync.Mutex{},
+		keyboardStateCtx:    keyboardCtx,
+		keyboardStateCancel: keyboardCancel,
+		keyboardState:       KeyboardState{},
 		enabledDevices:      *enabledDevices,
 		lastUserInput:       time.Now(),
 		log:                 logger,

jsonrpc.go

@@ -1017,6 +1017,7 @@ var rpcHandlers = map[string]RPCHandler{
 	"setNetworkSettings":     {Func: rpcSetNetworkSettings, Params: []string{"settings"}},
 	"renewDHCPLease":         {Func: rpcRenewDHCPLease},
 	"keyboardReport":         {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
+	"getKeyboardLedState":    {Func: rpcGetKeyboardLedState},
 	"absMouseReport":         {Func: rpcAbsMouseReport, Params: []string{"x", "y", "buttons"}},
 	"relMouseReport":         {Func: rpcRelMouseReport, Params: []string{"dx", "dy", "buttons"}},
 	"wheelReport":            {Func: rpcWheelReport, Params: []string{"wheelY"}},

ui/src/components/InfoBar.tsx

@@ -36,9 +36,9 @@ export default function InfoBar() {
       console.log(`Error on DataChannel '${rpcDataChannel.label}': ${e}`);
   }, [rpcDataChannel]);
 
-  const isCapsLockActive = useHidStore(state => state.isCapsLockActive);
-  const isNumLockActive = useHidStore(state => state.isNumLockActive);
-  const isScrollLockActive = useHidStore(state => state.isScrollLockActive);
+  const keyboardLedState = useHidStore(state => state.keyboardLedState);
+  const keyboardLedStateSyncAvailable = useHidStore(state => state.keyboardLedStateSyncAvailable);
+  const keyboardLedSync = useSettingsStore(state => state.keyboardLedSync);
 
   const isTurnServerInUse = useRTCStore(state => state.isTurnServerInUse);
 
@@ -118,10 +118,24 @@ export default function InfoBar() {
               Relayed by Cloudflare
             </div>
           )}
+
+          {keyboardLedStateSyncAvailable ? (
             <div
               className={cx(
                 "shrink-0 p-1 px-1.5 text-xs",
-              isCapsLockActive
+                keyboardLedSync !== "browser"
+                  ? "text-black dark:text-white"
+                  : "text-slate-800/20 dark:text-slate-300/20",
+              )}
+              title={"Your keyboard LED state is managed by" + (keyboardLedSync === "browser" ? " the browser" : " the host")}
+            >
+              {keyboardLedSync === "browser" ? "Browser" : "Host"}
+            </div>
+          ) : null}
+          <div
+            className={cx(
+              "shrink-0 p-1 px-1.5 text-xs",
+              keyboardLedState?.caps_lock
                 ? "text-black dark:text-white"
                 : "text-slate-800/20 dark:text-slate-300/20",
             )}
@@ -131,7 +145,7 @@ export default function InfoBar() {
           <div
             className={cx(
               "shrink-0 p-1 px-1.5 text-xs",
-              isNumLockActive
+              keyboardLedState?.num_lock
                 ? "text-black dark:text-white"
                 : "text-slate-800/20 dark:text-slate-300/20",
             )}
@@ -141,13 +155,23 @@ export default function InfoBar() {
           <div
             className={cx(
               "shrink-0 p-1 px-1.5 text-xs",
-              isScrollLockActive
+              keyboardLedState?.scroll_lock
                 ? "text-black dark:text-white"
                 : "text-slate-800/20 dark:text-slate-300/20",
             )}
           >
             Scroll Lock
           </div>
+          {keyboardLedState?.compose ? (
+            <div className="shrink-0 p-1 px-1.5 text-xs">
+              Compose
+            </div>
+          ) : null}
+          {keyboardLedState?.kana ? (
+            <div className="shrink-0 p-1 px-1.5 text-xs">
+              Kana
+            </div>
+          ) : null}
         </div>
       </div>
     </div>

ui/src/components/VirtualKeyboard.tsx

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import Keyboard from "react-simple-keyboard";
+import { useShallow } from "zustand/react/shallow";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
-import { motion, AnimatePresence } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Keyboard from "react-simple-keyboard";
 
 import Card from "@components/Card";
 // eslint-disable-next-line import/order
@@ -9,12 +10,12 @@ import { Button } from "@components/Button";
 
 import "react-simple-keyboard/build/css/index.css";
 
-import { useHidStore, useUiStore } from "@/hooks/stores";
-import { cx } from "@/cva.config";
-import { keys, modifiers, keyDisplayMap } from "@/keyboardMappings";
-import useKeyboard from "@/hooks/useKeyboard";
-import DetachIconRaw from "@/assets/detach-icon.svg";
 import AttachIconRaw from "@/assets/attach-icon.svg";
+import DetachIconRaw from "@/assets/detach-icon.svg";
+import { cx } from "@/cva.config";
+import { useHidStore, useSettingsStore, useUiStore } from "@/hooks/stores";
+import useKeyboard from "@/hooks/useKeyboard";
+import { keyDisplayMap, keys, modifiers } from "@/keyboardMappings";
 
 export const DetachIcon = ({ className }: { className?: string }) => {
   return <img src={DetachIconRaw} alt="Detach Icon" className={className} />;
@@ -40,7 +41,17 @@ function KeyboardWrapper() {
   const [isDragging, setIsDragging] = useState(false);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [newPosition, setNewPosition] = useState({ x: 0, y: 0 });
-  const isCapsLockActive = useHidStore(state => state.isCapsLockActive);
+
+  const isCapsLockActive = useHidStore(useShallow(state => state.keyboardLedState?.caps_lock));
+
+  // HID related states
+  const keyboardLedStateSyncAvailable = useHidStore(state => state.keyboardLedStateSyncAvailable);
+  const keyboardLedSync = useSettingsStore(state => state.keyboardLedSync);
+  const isKeyboardLedManagedByHost = useMemo(() =>
+    keyboardLedSync !== "browser" && keyboardLedStateSyncAvailable,
+    [keyboardLedSync, keyboardLedStateSyncAvailable],
+  );
+
   const setIsCapsLockActive = useHidStore(state => state.setIsCapsLockActive);
 
   const startDrag = useCallback((e: MouseEvent | TouchEvent) => {
@@ -157,14 +168,16 @@ function KeyboardWrapper() {
         toggleLayout();
 
         if (isCapsLockActive) {
+          if (!isKeyboardLedManagedByHost) {
             setIsCapsLockActive(false);
+          }
           sendKeyboardEvent([keys["CapsLock"]], []);
           return;
         }
       }
 
       // Handle caps lock state change
-      if (isKeyCaps) {
+      if (isKeyCaps && !isKeyboardLedManagedByHost) {
         setIsCapsLockActive(!isCapsLockActive);
       }
 
@@ -183,7 +196,7 @@ function KeyboardWrapper() {
 
       setTimeout(resetKeyboardState, 100);
     },
-    [isCapsLockActive, sendKeyboardEvent, resetKeyboardState, setIsCapsLockActive],
+    [isCapsLockActive, isKeyboardLedManagedByHost, sendKeyboardEvent, resetKeyboardState, setIsCapsLockActive],
   );
 
   const virtualKeyboard = useHidStore(state => state.isVirtualKeyboardEnabled);

ui/src/components/WebRTCVideo.tsx

@@ -47,6 +47,18 @@ export default function WebRTCVideo() {
     clientHeight: videoClientHeight,
   } = useVideoStore();
 
+  // HID related states
+  const keyboardLedStateSyncAvailable = useHidStore(state => state.keyboardLedStateSyncAvailable);
+  const keyboardLedSync = useSettingsStore(state => state.keyboardLedSync);
+  const isKeyboardLedManagedByHost = useMemo(() =>
+    keyboardLedSync !== "browser" && keyboardLedStateSyncAvailable,
+    [keyboardLedSync, keyboardLedStateSyncAvailable],
+  );
+
+  const setIsNumLockActive = useHidStore(state => state.setIsNumLockActive);
+  const setIsCapsLockActive = useHidStore(state => state.setIsCapsLockActive);
+  const setIsScrollLockActive = useHidStore(state => state.setIsScrollLockActive);
+
   // RTC related states
   const peerConnection = useRTCStore(state => state.peerConnection);
 
@@ -55,10 +67,6 @@ export default function WebRTCVideo() {
   const hdmiError = ["no_lock", "no_signal", "out_of_range"].includes(hdmiState);
   const isVideoLoading = !isPlaying;
 
-  // Keyboard related states
-  const { setIsNumLockActive, setIsCapsLockActive, setIsScrollLockActive } =
-    useHidStore();
-
   // Misc states and hooks
   const disableVideoFocusTrap = useUiStore(state => state.disableVideoFocusTrap);
   const [send] = useJsonRpc();
@@ -355,9 +363,11 @@ export default function WebRTCVideo() {
 
       // console.log(document.activeElement);
 
+      if (!isKeyboardLedManagedByHost) {
         setIsNumLockActive(e.getModifierState("NumLock"));
         setIsCapsLockActive(e.getModifierState("CapsLock"));
         setIsScrollLockActive(e.getModifierState("ScrollLock"));
+      }
 
       if (code == "IntlBackslash" && ["`", "~"].includes(key)) {
         code = "Backquote";
@@ -388,11 +398,12 @@ export default function WebRTCVideo() {
       sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]);
     },
     [
+      handleModifierKeys,
+      sendKeyboardEvent,
+      isKeyboardLedManagedByHost,
       setIsNumLockActive,
       setIsCapsLockActive,
       setIsScrollLockActive,
-      handleModifierKeys,
-      sendKeyboardEvent,
     ],
   );
 
@@ -401,9 +412,11 @@ export default function WebRTCVideo() {
       e.preventDefault();
       const prev = useHidStore.getState();
 
+      if (!isKeyboardLedManagedByHost) {
         setIsNumLockActive(e.getModifierState("NumLock"));
         setIsCapsLockActive(e.getModifierState("CapsLock"));
         setIsScrollLockActive(e.getModifierState("ScrollLock"));
+      }
 
       // Filtering out the key that was just released (keys[e.code])
       const newKeys = prev.activeKeys.filter(k => k !== keys[e.code]).filter(Boolean);
@@ -417,11 +430,12 @@ export default function WebRTCVideo() {
       sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]);
     },
     [
+      handleModifierKeys,
+      sendKeyboardEvent,
+      isKeyboardLedManagedByHost,
       setIsNumLockActive,
       setIsCapsLockActive,
       setIsScrollLockActive,
-      handleModifierKeys,
-      sendKeyboardEvent,
     ],
   );
 

ui/src/hooks/stores.ts

@@ -283,6 +283,8 @@ export const useVideoStore = create<VideoState>(set => ({
   },
 }));
 
+export type KeyboardLedSync = "auto" | "browser" | "host";
+
 interface SettingsState {
   isCursorHidden: boolean;
   setCursorVisibility: (enabled: boolean) => void;
@@ -305,6 +307,9 @@ interface SettingsState {
 
   keyboardLayout: string;
   setKeyboardLayout: (layout: string) => void;
+
+  keyboardLedSync: KeyboardLedSync;
+  setKeyboardLedSync: (sync: KeyboardLedSync) => void;
 }
 
 export const useSettingsStore = create(
@@ -336,6 +341,9 @@ export const useSettingsStore = create(
 
       keyboardLayout: "en-US",
       setKeyboardLayout: layout => set({ keyboardLayout: layout }),
+
+      keyboardLedSync: "auto",
+      setKeyboardLedSync: sync => set({ keyboardLedSync: sync }),
     }),
     {
       name: "settings",
@@ -405,6 +413,21 @@ export const useMountMediaStore = create<MountMediaState>(set => ({
   setErrorMessage: message => set({ errorMessage: message }),
 }));
 
+export interface KeyboardLedState {
+  num_lock: boolean;
+  caps_lock: boolean;
+  scroll_lock: boolean;
+  compose: boolean;
+  kana: boolean;
+};
+const defaultKeyboardLedState: KeyboardLedState = {
+  num_lock: false,
+  caps_lock: false,
+  scroll_lock: false,
+  compose: false,
+  kana: false,
+};
+
 export interface HidState {
   activeKeys: number[];
   activeModifiers: number[];
@@ -423,18 +446,18 @@ export interface HidState {
   altGrCtrlTime: number; // _altGrCtrlTime
   setAltGrCtrlTime: (time: number) => void;
 
-  isNumLockActive: boolean;
-  setIsNumLockActive: (enabled: boolean) => void;
+  keyboardLedState?: KeyboardLedState;
+  setKeyboardLedState: (state: KeyboardLedState) => void;
+  setIsNumLockActive: (active: boolean) => void;
+  setIsCapsLockActive: (active: boolean) => void;
+  setIsScrollLockActive: (active: boolean) => void;
 
-  isScrollLockActive: boolean;
-  setIsScrollLockActive: (enabled: boolean) => void;
+  keyboardLedStateSyncAvailable: boolean;
+  setKeyboardLedStateSyncAvailable: (available: boolean) => void;
 
   isVirtualKeyboardEnabled: boolean;
   setVirtualKeyboardEnabled: (enabled: boolean) => void;
 
-  isCapsLockActive: boolean;
-  setIsCapsLockActive: (enabled: boolean) => void;
-
   isPasteModeEnabled: boolean;
   setPasteModeEnabled: (enabled: boolean) => void;
 
@@ -442,7 +465,7 @@ export interface HidState {
   setUsbState: (state: HidState["usbState"]) => void;
 }
 
-export const useHidStore = create<HidState>(set => ({
+export const useHidStore = create<HidState>((set, get) => ({
   activeKeys: [],
   activeModifiers: [],
   updateActiveKeysAndModifiers: ({ keys, modifiers }) => {
@@ -458,18 +481,29 @@ export const useHidStore = create<HidState>(set => ({
   altGrCtrlTime: 0,
   setAltGrCtrlTime: time => set({ altGrCtrlTime: time }),
 
-  isNumLockActive: false,
-  setIsNumLockActive: enabled => set({ isNumLockActive: enabled }),
+  setKeyboardLedState: ledState => set({ keyboardLedState: ledState }),
+  setIsNumLockActive: active => {
+    const keyboardLedState = { ...(get().keyboardLedState || defaultKeyboardLedState) };
+    keyboardLedState.num_lock = active;
+    set({ keyboardLedState });
+  },
+  setIsCapsLockActive: active => {
+    const keyboardLedState = { ...(get().keyboardLedState || defaultKeyboardLedState) };
+    keyboardLedState.caps_lock = active;
+    set({ keyboardLedState });
+  },
+  setIsScrollLockActive: active => {
+    const keyboardLedState = { ...(get().keyboardLedState || defaultKeyboardLedState) };
+    keyboardLedState.scroll_lock = active;
+    set({ keyboardLedState });
+  },
 
-  isScrollLockActive: false,
-  setIsScrollLockActive: enabled => set({ isScrollLockActive: enabled }),
+  keyboardLedStateSyncAvailable: false,
+  setKeyboardLedStateSyncAvailable: available => set({ keyboardLedStateSyncAvailable: available }),
 
   isVirtualKeyboardEnabled: false,
   setVirtualKeyboardEnabled: enabled => set({ isVirtualKeyboardEnabled: enabled }),
 
-  isCapsLockActive: false,
-  setIsCapsLockActive: enabled => set({ isCapsLockActive: enabled }),
-
   isPasteModeEnabled: false,
   setPasteModeEnabled: enabled => set({ isPasteModeEnabled: enabled }),
 

ui/src/routes/devices.$id.settings.keyboard.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 
-import { useSettingsStore } from "@/hooks/stores";
+import { KeyboardLedSync, useSettingsStore } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "@/notifications";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
@@ -12,11 +12,20 @@ import { SettingsItem } from "./devices.$id.settings";
 
 export default function SettingsKeyboardRoute() {
   const keyboardLayout = useSettingsStore(state => state.keyboardLayout);
+  const keyboardLedSync = useSettingsStore(state => state.keyboardLedSync);
   const setKeyboardLayout = useSettingsStore(
     state => state.setKeyboardLayout,
   );
+  const setKeyboardLedSync = useSettingsStore(
+    state => state.setKeyboardLedSync,
+  );
 
   const layoutOptions = Object.entries(layouts).map(([code, language]) => { return { value: code, label: language } })
+  const ledSyncOptions = [
+    { value: "auto", label: "Automatic" },
+    { value: "browser", label: "Browser Only" },
+    { value: "host", label: "Host Only" },
+  ];
 
   const [send] = useJsonRpc();
 
@@ -47,7 +56,7 @@ export default function SettingsKeyboardRoute() {
     <div className="space-y-4">
       <SettingsPageHeader
         title="Keyboard"
-        description="Configure keyboard layout settings for your device"
+        description="Configure keyboard settings for your device"
       />
 
       <div className="space-y-4">
@@ -69,6 +78,23 @@ export default function SettingsKeyboardRoute() {
           Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
         </p>
       </div>
+
+      <div className="space-y-4">
+        { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
+        <SettingsItem
+          title="LED state synchronization"
+          description="Synchronize the LED state of the keyboard with the target device"
+        >
+          <SelectMenuBasic
+            size="SM"
+            label=""
+            fullWidth
+            value={keyboardLedSync}
+            onChange={e => setKeyboardLedSync(e.target.value as KeyboardLedSync)}
+            options={ledSyncOptions}
+          />
+        </SettingsItem>
+      </div>
     </div>
   );
 }

ui/src/routes/devices.$id.settings.network.tsx

@@ -228,7 +228,6 @@ export default function SettingsNetworkRoute() {
               size="SM"
               value={networkState?.mac_address}
               error={""}
-              disabled={true}
               readOnly={true}
               className="dark:!text-opacity-60"
             />

ui/src/routes/devices.$id.tsx

@@ -19,6 +19,7 @@ import useWebSocket from "react-use-websocket";
 import { cx } from "@/cva.config";
 import {
   HidState,
+  KeyboardLedState,
   NetworkState,
   UpdateState,
   useDeviceStore,
@@ -586,6 +587,11 @@ export default function KvmIdRoute() {
   const setUsbState = useHidStore(state => state.setUsbState);
   const setHdmiState = useVideoStore(state => state.setHdmiState);
 
+  const keyboardLedState = useHidStore(state => state.keyboardLedState);
+  const setKeyboardLedState = useHidStore(state => state.setKeyboardLedState);
+
+  const setKeyboardLedStateSyncAvailable = useHidStore(state => state.setKeyboardLedStateSyncAvailable);
+
   const [hasUpdated, setHasUpdated] = useState(false);
   const { navigateTo } = useDeviceUiNavigation();
 
@@ -607,6 +613,13 @@ export default function KvmIdRoute() {
       setNetworkState(resp.params as NetworkState);
     }
 
+    if (resp.method === "keyboardLedState") {
+      const ledState = resp.params as KeyboardLedState;
+      console.log("Setting keyboard led state", ledState);
+      setKeyboardLedState(ledState);
+      setKeyboardLedStateSyncAvailable(true);
+    }
+
     if (resp.method === "otaState") {
       const otaState = resp.params as UpdateState["otaState"];
       setOtaState(otaState);
@@ -643,6 +656,29 @@ export default function KvmIdRoute() {
     });
   }, [rpcDataChannel?.readyState, send, setHdmiState]);
 
+  // request keyboard led state from the device
+  useEffect(() => {
+    if (rpcDataChannel?.readyState !== "open") return;
+    if (keyboardLedState !== undefined) return;
+    console.log("Requesting keyboard led state");
+
+    send("getKeyboardLedState", {}, resp => {
+      if ("error" in resp) {
+        // -32601 means the method is not supported
+        if (resp.error.code === -32601) {
+          setKeyboardLedStateSyncAvailable(false);
+          console.error("Failed to get keyboard led state, disabling sync", resp.error);
+        } else {
+          console.error("Failed to get keyboard led state", resp.error);
+        }
+        return;
+      }
+      console.log("Keyboard led state", resp.result);
+      setKeyboardLedState(resp.result as KeyboardLedState);
+      setKeyboardLedStateSyncAvailable(true);
+    });
+  }, [rpcDataChannel?.readyState, send, setKeyboardLedState, setKeyboardLedStateSyncAvailable, keyboardLedState]);
+
   // When the update is successful, we need to refresh the client javascript and show a success modal
   useEffect(() => {
     if (queryParams.get("updateSuccess")) {

usb.go

@@ -24,6 +24,17 @@ func initUsbGadget() {
 			time.Sleep(500 * time.Millisecond)
 		}
 	}()
+
+	gadget.SetOnKeyboardStateChange(func(state usbgadget.KeyboardState) {
+		if currentSession != nil {
+			writeJSONRPCEvent("keyboardLedState", state, currentSession)
+		}
+	})
+
+	// open the keyboard hid file to listen for keyboard events
+	if err := gadget.OpenKeyboardHidFile(); err != nil {
+		usbLogger.Error().Err(err).Msg("failed to open keyboard hid file")
+	}
 }
 
 func rpcKeyboardReport(modifier uint8, keys []uint8) error {
@@ -42,6 +53,10 @@ func rpcWheelReport(wheelY int8) error {
 	return gadget.AbsMouseWheelReport(wheelY)
 }
 
+func rpcGetKeyboardLedState() (state usbgadget.KeyboardState) {
+	return gadget.GetKeyboardState()
+}
+
 var usbState = "unknown"
 
 func rpcGetUSBState() (state string) {