ui/src/components/USBConfigDialog.tsx

@@ -8,7 +8,14 @@ import { InputFieldWithLabel } from "./InputField";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useUsbConfigModalStore } from "@/hooks/stores";
 import ExtLink from "@components/ExtLink";
-import { UsbConfigState } from "@/hooks/stores"
+
+export interface UsbConfigState {
+  vendor_id: string;
+  product_id: string;
+  serial_number: string;
+  manufacturer: string;
+  product: string;
+}
 
 export default function USBConfigDialog({
   open,

ui/src/components/sidebar/settings.tsx

@@ -26,7 +26,6 @@ import { LocalDevice } from "@routes/devices.$id";
 import { useRevalidator } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
 import USBConfigDialog from "@components/USBConfigDialog";
-import { UsbConfigState } from "@/hooks/stores"
 
 export function SettingsItem({
   title,
@@ -87,6 +86,7 @@ const edids = [
   },
 ];
 
+
 export default function SettingsSidebar() {
   const setSidebarView = useUiStore(state => state.setSidebarView);
   const settings = useSettingsStore();
@@ -97,7 +97,7 @@ export default function SettingsSidebar() {
   const [jiggler, setJiggler] = useState(false);
   const [edid, setEdid] = useState<string | null>(null);
   const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
-  const [usbConfigProduct, setUsbConfigProduct] = useState("");
+  const [usbConfigJson, setUsbConfigJson] = useState("");
 
   const [isAdopted, setAdopted] = useState(false);
   const [deviceId, setDeviceId] = useState<string | null>(null);
@@ -124,84 +124,45 @@ export default function SettingsSidebar() {
     });
   }, [send]);
 
-  const syncUsbConfigProduct = useCallback(() => {
-    send("getUsbConfig", {}, resp => {
-      if ("error" in resp) {
-        console.error("Failed to load USB Config:", resp.error);
-      } else {
-        console.error("syncUsbConfigProduct#getUsbConfig result:", resp.result);
-        const usbConfigState = resp.result as UsbConfigState
-        setUsbConfigProduct(usbConfigState.product);
-      }
-    });
-  }, [send, setUsbConfigProduct]);
-
-  // Load stored usb config product from the backend
-  useEffect(() => {
-    syncUsbConfigProduct();
-  }, [syncUsbConfigProduct]);
-
   const usbConfigs = [
     {
-      label: "JetKVM Default",
+      value: JSON.stringify({
-      value: "JetKVM USB Emulation Device"
-    },
-    {
-      label: "Logitech Universal Adapter",
-      value: "Logitech USB Input Device"
-    },
-    {
-      label: "Microsoft Wireless MultiMedia Keyboard",
-      value: "Wireless MultiMedia Keyboard"
-    },
-    {
-      label: "Dell Multimedia Pro Keyboard",
-      value: "Multimedia Pro Keyboard"
-    }
-  ];
-
-  interface USBConfig {
-    vendor_id: string;
-    product_id: string;
-    serial_number: string | null;
-    manufacturer: string;
-    product: string;
-  }
-
-  type UsbConfigMap = Record<string, USBConfig>;
-
-
-  const usbConfigData: UsbConfigMap = {
-      "JetKVM USB Emulation Device": {
         vendor_id: "0x1d6b",
         product_id: "0x0104",
         serial_number: deviceId,
         manufacturer: "JetKVM",
         product: "JetKVM USB Emulation Device",
+      }),
+      label: "JetKVM Default",
     },
-      "Logitech USB Input Device": {
+    {
+      value: JSON.stringify({
         vendor_id: "0x046d",
         product_id: "0xc52b",
-        serial_number: generatedSerialNumber,
         manufacturer: "Logitech (x64)",
         product: "Logitech USB Input Device",
+      }),
+      label: "Logitech Universal Adapter",
     },
-      "Wireless MultiMedia Keyboard": {
+    {
+      value: JSON.stringify({
         vendor_id: "0x045e",
         product_id: "0x005f",
-        serial_number: generatedSerialNumber,
         manufacturer: "Microsoft",
         product: "Wireless MultiMedia Keyboard",
+      }),
+      label: "Microsoft Wireless MultiMedia Keyboard",
     },
-      "Multimedia Pro Keyboard": {
+    {
+      value: JSON.stringify({
         vendor_id: "0x413c",
         product_id: "0x2011",
-        serial_number: generatedSerialNumber,
         manufacturer: "Dell Inc.",
         product: "Multimedia Pro Keyboard",
+      }),
+      label: "Dell Multimedia Pro Keyboard",
     }
-  }
+  ];
-
 
   const handleUsbEmulationToggle = useCallback(
       (enabled: boolean) => {
@@ -276,9 +237,12 @@ export default function SettingsSidebar() {
     });
   };
 
-  const handleUsbConfigChange = (product: string) => {
+  const handleUsbConfigChange = (jsonString: string) => {
-    const usbConfig = usbConfigData[product];
+    const usbConfig = JSON.parse(jsonString);
-    console.info(`USB config: ${JSON.stringify(usbConfig)}`)
+    if (!usbConfig?.serial_number) {
+      usbConfig['serial_number'] = generatedSerialNumber
+    }
+    console.info(`Current USB serial number: ${usbConfig?.serial_number}`)
     send("setUsbConfig", { usbConfig }, resp => {
       if ("error" in resp) {
         notifications.error(
@@ -286,8 +250,8 @@ export default function SettingsSidebar() {
         );
         return;
       }
-      setUsbConfigProduct(usbConfig.product);
+      setUsbConfigJson(jsonString);
-      notifications.success(`USB Config set to ${usbConfig.manufacturer} ${usbConfig.product}`);
+      notifications.success(`USB Config set to ${usbConfig.product}`);
     });
   };
 
@@ -975,10 +939,10 @@ export default function SettingsSidebar() {
                         size="SM"
                         label=""
                         fullWidth
-                        value={usbConfigProduct}
+                        value={usbConfigJson}
                         onChange={e => {
                           if (e.target.value === "custom") {
-                            setUsbConfigProduct(e.target.value);
+                            setUsbConfigJson(e.target.value);
                           } else {
                             handleUsbConfigChange(e.target.value as string);
                           }
@@ -987,7 +951,7 @@ export default function SettingsSidebar() {
                     />
                   </SettingsItem>
               )}
-              {usbConfigProduct === "custom" && (
+              {usbConfigJson == "custom" && (
                   <SettingsItem
                       title="USB Config"
                       description="Set Custom USB Descriptors"

ui/src/hooks/stores.ts

@@ -538,14 +538,6 @@ interface UsbConfigModalState {
   setErrorMessage: (message: string | null) => void;
 }
 
-export interface UsbConfigState {
-  vendor_id: string;
-  product_id: string;
-  serial_number: string;
-  manufacturer: string;
-  product: string;
-}
-
 export const useUsbConfigModalStore = create<UsbConfigModalState>(set => ({
   modalView: "updateUsbConfig",
   errorMessage: null,