Merge branch 'jetkvm:dev' into chore/embed-golint

Makefile

@@ -1,21 +1,26 @@
 BRANCH    ?= $(shell git rev-parse --abbrev-ref HEAD)
 BUILDDATE ?= $(shell date -u +%FT%T%z)
+BUILDTS   ?= $(shell date -u +%s)
 REVISION  ?= $(shell git rev-parse HEAD)
-VERSION_DEV := 0.3.8-dev$(shell date +%Y%m%d%H%M)
+VERSION_DEV := 0.3.9-dev$(shell date +%Y%m%d%H%M)
-VERSION := 0.3.7
+VERSION := 0.3.8
+
+PROMETHEUS_TAG := github.com/prometheus/common/version
+KVM_PKG_NAME := github.com/jetkvm/kvm
 
 GO_LDFLAGS := \
   -s -w \
-  -X github.com/prometheus/common/version.Branch=$(BRANCH) \
+  -X $(PROMETHEUS_TAG).Branch=$(BRANCH) \
-  -X github.com/prometheus/common/version.BuildDate=$(BUILDDATE) \
+  -X $(PROMETHEUS_TAG).BuildDate=$(BUILDDATE) \
-  -X github.com/prometheus/common/version.Revision=$(REVISION)
+  -X $(PROMETHEUS_TAG).Revision=$(REVISION) \
+  -X $(KVM_PKG_NAME).builtTimestamp=$(BUILDTS)
 
 hash_resource:
 	@shasum -a 256 resource/jetkvm_native | cut -d ' ' -f 1 > resource/jetkvm_native.sha256
 
 build_dev: hash_resource
 	@echo "Building..."
-	GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="$(GO_LDFLAGS) -X kvm.builtAppVersion=$(VERSION_DEV)" -o bin/jetkvm_app cmd/main.go
+	GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="$(GO_LDFLAGS) -X $(KVM_PKG_NAME).builtAppVersion=$(VERSION_DEV)" -o bin/jetkvm_app cmd/main.go
 
 frontend:
 	cd ui && npm ci && npm run build:device
@@ -28,7 +33,7 @@ dev_release: frontend build_dev
 
 build_release: frontend hash_resource
 	@echo "Building release..."
-	GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="$(GO_LDFLAGS) -X kvm.builtAppVersion=$(VERSION)" -o bin/jetkvm_app cmd/main.go
+	GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="$(GO_LDFLAGS) -X $(KVM_PKG_NAME).builtAppVersion=$(VERSION)" -o bin/jetkvm_app cmd/main.go
 
 release:
 	@if rclone lsf r2://jetkvm-update/app/$(VERSION)/ | grep -q "jetkvm_app"; then \

internal/usbgadget/config.go

@@ -128,6 +128,15 @@ func (u *UsbGadget) GetConfigPath(itemKey string) (string, error) {
 	return joinPath(u.kvmGadgetPath, item.configPath), nil
 }
 
+// GetPath returns the path to the item.
+func (u *UsbGadget) GetPath(itemKey string) (string, error) {
+	item, ok := u.configMap[itemKey]
+	if !ok {
+		return "", fmt.Errorf("config item %s not found", itemKey)
+	}
+	return joinPath(u.kvmGadgetPath, item.path), nil
+}
+
 func mountConfigFS() error {
 	_, err := os.Stat(gadgetPath)
 	// TODO: check if it's mounted properly

jsonrpc.go

@@ -799,6 +799,7 @@ var rpcHandlers = map[string]RPCHandler{
 	"getCloudState":          {Func: rpcGetCloudState},
 	"keyboardReport":         {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
 	"absMouseReport":         {Func: rpcAbsMouseReport, Params: []string{"x", "y", "buttons"}},
+	"relMouseReport":         {Func: rpcRelMouseReport, Params: []string{"dx", "dy", "buttons"}},
 	"wheelReport":            {Func: rpcWheelReport, Params: []string{"wheelY"}},
 	"getVideoState":          {Func: rpcGetVideoState},
 	"getUSBState":            {Func: rpcGetUSBState},

main.go

@@ -35,6 +35,8 @@ func Main() {
 	StartNativeCtrlSocketServer()
 	StartNativeVideoSocketServer()
 
+	initPrometheus()
+
 	go func() {
 		err = ExtractAndRunNativeBin()
 		if err != nil {
@@ -67,6 +69,9 @@ func Main() {
 	}()
 	//go RunFuseServer()
 	go RunWebServer()
+	if config.TLSMode != "" {
+		go RunWebSecureServer()
+	}
 	// If the cloud token isn't set, the client won't be started by default.
 	// However, if the user adopts the device via the web interface, handleCloudRegister will start the client.
 	if config.CloudToken != "" {

prometheus.go

@@ -0,0 +1,17 @@
+package kvm
+
+import (
+	"net/http"
+
+	"github.com/prometheus/client_golang/prometheus"
+	versioncollector "github.com/prometheus/client_golang/prometheus/collectors/version"
+	"github.com/prometheus/common/version"
+)
+
+var promHandler http.Handler
+
+func initPrometheus() {
+	// A Prometheus metrics endpoint.
+	version.Version = builtAppVersion
+	prometheus.MustRegister(versioncollector.NewCollector("jetkvm"))
+}

ui/src/components/InfoBar.tsx

@@ -14,6 +14,7 @@ export default function InfoBar() {
   const activeModifiers = useHidStore(state => state.activeModifiers);
   const mouseX = useMouseStore(state => state.mouseX);
   const mouseY = useMouseStore(state => state.mouseY);
+  const mouseMove = useMouseStore(state => state.mouseMove);
 
   const videoClientSize = useVideoStore(
     state => `${Math.round(state.clientWidth)}x${Math.round(state.clientHeight)}`,
@@ -62,7 +63,7 @@ export default function InfoBar() {
               </div>
             ) : null}
 
-            {settings.debugMode ? (
+            {(settings.debugMode && settings.mouseMode == "absolute") ? (
               <div className="flex w-[118px] items-center gap-x-1">
                 <span className="text-xs font-semibold">Pointer:</span>
                 <span className="text-xs">
@@ -71,6 +72,17 @@ export default function InfoBar() {
               </div>
             ) : null}
 
+            {(settings.debugMode && settings.mouseMode == "relative") ? (
+              <div className="flex w-[118px] items-center gap-x-1">
+                <span className="text-xs font-semibold">Last Move:</span>
+                <span className="text-xs">
+                  {mouseMove ?
+                    `${mouseMove.x},${mouseMove.y} ${mouseMove.buttons ? `(${mouseMove.buttons})` : ""}` :
+                    "N/A"}
+                </span>
+              </div>
+            ) : null}
+
             {settings.debugMode && (
               <div className="flex w-[156px] items-center gap-x-1">
                 <span className="text-xs font-semibold">USB State:</span>

ui/src/components/USBConfigDialog.tsx

@@ -1,117 +0,0 @@
-import { Button } from "@components/Button";
-import { InputFieldWithLabel } from "./InputField";
-import { UsbConfigState } from "@/hooks/stores";
-import { useEffect, useCallback, useState } from "react";
-import { useJsonRpc } from "../hooks/useJsonRpc";
-import { USBConfig } from "./UsbConfigSetting";
-
-export default function UpdateUsbConfigModal({
-  onSetUsbConfig,
-  onRestoreToDefault,
-}: {
-  onSetUsbConfig: (usbConfig: USBConfig) => void;
-  onRestoreToDefault: () => void;
-}) {
-  const [usbConfigState, setUsbConfigState] = useState<USBConfig>({
-    vendor_id: "",
-    product_id: "",
-    serial_number: "",
-    manufacturer: "",
-    product: "",
-  });
-
-  const [send] = useJsonRpc();
-
-  const syncUsbConfig = useCallback(() => {
-    send("getUsbConfig", {}, resp => {
-      if ("error" in resp) {
-        console.error("Failed to load USB Config:", resp.error);
-      } else {
-        setUsbConfigState(resp.result as UsbConfigState);
-      }
-    });
-  }, [send, setUsbConfigState]);
-
-  // Load stored usb config from the backend
-  useEffect(() => {
-    syncUsbConfig();
-  }, [syncUsbConfig]);
-
-  const handleUsbVendorIdChange = (value: string) => {
-    setUsbConfigState({ ...usbConfigState, vendor_id: value });
-  };
-
-  const handleUsbProductIdChange = (value: string) => {
-    setUsbConfigState({ ...usbConfigState, product_id: value });
-  };
-
-  const handleUsbSerialChange = (value: string) => {
-    setUsbConfigState({ ...usbConfigState, serial_number: value });
-  };
-
-  const handleUsbManufacturer = (value: string) => {
-    setUsbConfigState({ ...usbConfigState, manufacturer: value });
-  };
-
-  const handleUsbProduct = (value: string) => {
-    setUsbConfigState({ ...usbConfigState, product: value });
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="grid grid-cols-2 gap-4">
-        <InputFieldWithLabel
-          required
-          label="Vendor ID"
-          placeholder="Enter Vendor ID"
-          pattern="^0[xX][\da-fA-F]{4}$"
-          defaultValue={usbConfigState?.vendor_id}
-          onChange={e => handleUsbVendorIdChange(e.target.value)}
-        />
-        <InputFieldWithLabel
-          required
-          label="Product ID"
-          placeholder="Enter Product ID"
-          pattern="^0[xX][\da-fA-F]{4}$"
-          defaultValue={usbConfigState?.product_id}
-          onChange={e => handleUsbProductIdChange(e.target.value)}
-        />
-        <InputFieldWithLabel
-          required
-          label="Serial Number"
-          placeholder="Enter Serial Number"
-          defaultValue={usbConfigState?.serial_number}
-          onChange={e => handleUsbSerialChange(e.target.value)}
-        />
-        <InputFieldWithLabel
-          required
-          label="Manufacturer"
-          placeholder="Enter Manufacturer"
-          defaultValue={usbConfigState?.manufacturer}
-          onChange={e => handleUsbManufacturer(e.target.value)}
-        />
-        <InputFieldWithLabel
-          required
-          label="Product Name"
-          placeholder="Enter Product Name"
-          defaultValue={usbConfigState?.product}
-          onChange={e => handleUsbProduct(e.target.value)}
-        />
-      </div>
-      <div className="flex gap-x-2">
-        <Button
-          size="SM"
-          theme="primary"
-          text="Update USB Config"
-          onClick={() => onSetUsbConfig(usbConfigState)}
-        />
-        <Button
-          size="SM"
-          theme="light"
-          text="Restore to Default"
-          onClick={onRestoreToDefault}
-        />
-      </div>
-    </div>
-  );
-}

ui/src/components/UsbDeviceSetting.tsx

@@ -5,7 +5,10 @@ import { useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
 import { SettingsItem } from "../routes/devices.$id.settings";
 import Checkbox from "./Checkbox";
-
+import { Button } from "./Button";
+import { SelectMenuBasic } from "./SelectMenuBasic";
+import { SettingsSectionHeader } from "./SettingsSectionHeader";
+import Fieldset from "./Fieldset";
 export interface USBConfig {
   vendor_id: string;
   product_id: string;
@@ -26,12 +29,43 @@ const defaultUsbDeviceConfig: UsbDeviceConfig = {
   absolute_mouse: true,
   relative_mouse: true,
   mass_storage: true,
-}
+};
+
+const usbPresets = [
+  {
+    label: "Keyboard, Mouse and Mass Storage",
+    value: "default",
+    config: {
+      keyboard: true,
+      absolute_mouse: true,
+      relative_mouse: true,
+      mass_storage: true,
+    },
+  },
+  {
+    label: "Keyboard Only",
+    value: "keyboard_only",
+    config: {
+      keyboard: true,
+      absolute_mouse: false,
+      relative_mouse: false,
+      mass_storage: false,
+    },
+  },
+  {
+    label: "Custom",
+    value: "custom",
+  },
+];
 
 export function UsbDeviceSetting() {
   const [send] = useJsonRpc();
+  const [loading, setLoading] = useState(false);
+
+  const [usbDeviceConfig, setUsbDeviceConfig] =
+    useState<UsbDeviceConfig>(defaultUsbDeviceConfig);
+  const [selectedPreset, setSelectedPreset] = useState<string>("default");
 
-  const [usbDeviceConfig, setUsbDeviceConfig] = useState<UsbDeviceConfig>(defaultUsbDeviceConfig);
   const syncUsbDeviceConfig = useCallback(() => {
     send("getUsbDevices", {}, resp => {
       if ("error" in resp) {
@@ -40,90 +74,167 @@ export function UsbDeviceSetting() {
           `Failed to load USB devices: ${resp.error.data || "Unknown error"}`,
         );
       } else {
-        console.log("syncUsbDeviceConfig#getUsbDevices result:", resp.result);
         const usbConfigState = resp.result as UsbDeviceConfig;
         setUsbDeviceConfig(usbConfigState);
+
+        // Set the appropriate preset based on current config
+        const matchingPreset = usbPresets.find(
+          preset =>
+            preset.value !== "custom" &&
+            preset.config &&
+            Object.keys(preset.config).length === Object.keys(usbConfigState).length &&
+            Object.keys(preset.config).every(key => {
+              const configKey = key as keyof typeof preset.config;
+              return preset.config[configKey] === usbConfigState[configKey];
+            }),
+        );
+
+        setSelectedPreset(matchingPreset ? matchingPreset.value : "custom");
       }
     });
   }, [send]);
 
   const handleUsbConfigChange = useCallback(
     (devices: UsbDeviceConfig) => {
-      send("setUsbDevices", { devices }, resp => {
+      setLoading(true);
+      send("setUsbDevices", { devices }, async resp => {
         if ("error" in resp) {
           notifications.error(
             `Failed to set usb devices: ${resp.error.data || "Unknown error"}`,
           );
+          setLoading(false);
           return;
         }
-        notifications.success(
+
-          `USB Devices updated`
+        // We need some time to ensure the USB devices are updated
-        );
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        setLoading(false);
         syncUsbDeviceConfig();
+        notifications.success(`USB Devices updated`);
       });
     },
     [send, syncUsbDeviceConfig],
   );
 
-  const onUsbConfigItemChange = useCallback((key: keyof UsbDeviceConfig) => (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onUsbConfigItemChange = useCallback(
-    setUsbDeviceConfig((val) => {
+    (key: keyof UsbDeviceConfig) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      val[key] = e.target.checked;
+      setUsbDeviceConfig(prev => ({
-      handleUsbConfigChange(val);
+        ...prev,
-      return val;
+        [key]: e.target.checked,
-    });
+      }));
-  }, [handleUsbConfigChange]);
+    },
+    [],
+  );
+
+  const handlePresetChange = useCallback(
+    async (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const newPreset = e.target.value;
+      setSelectedPreset(newPreset);
+
+      if (newPreset !== "custom") {
+        const presetConfig = usbPresets.find(
+          preset => preset.value === newPreset,
+        )?.config;
+
+        if (presetConfig) {
+          handleUsbConfigChange(presetConfig);
+        }
+      }
+    },
+    [handleUsbConfigChange],
+  );
 
   useEffect(() => {
     syncUsbDeviceConfig();
   }, [syncUsbDeviceConfig]);
 
   return (
-    <>
+    <Fieldset disabled={loading} className="space-y-4">
       <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-      <div className="space-y-4">
+
-        <SettingsItem
+      <SettingsSectionHeader
-          title="Enable Keyboard"
+        title="USB Device"
-          description="Enable Keyboard"
+        description="USB devices to emulate on the target computer"
-        >
+      />
-          <Checkbox
+
-            checked={usbDeviceConfig.keyboard}
+      <SettingsItem
-            onChange={onUsbConfigItemChange("keyboard")}
+        loading={loading}
-          />
+        title="Classes"
-        </SettingsItem>
+        description="USB device classes in the composite device"
-      </div>
+      >
-      <div className="space-y-4">
+        <SelectMenuBasic
-        <SettingsItem
+          size="SM"
-          title="Enable Absolute Mouse (Pointer)"
+          label=""
-          description="Enable Absolute Mouse (Pointer)"
+          className="max-w-[292px]"
-        >
+          value={selectedPreset}
-          <Checkbox
+          fullWidth
-            checked={usbDeviceConfig.absolute_mouse}
+          onChange={handlePresetChange}
-            onChange={onUsbConfigItemChange("absolute_mouse")}
+          options={usbPresets}
-          />
+        />
-        </SettingsItem>
+      </SettingsItem>
-      </div>
+
-      <div className="space-y-4">
+      {selectedPreset === "custom" && (
-        <SettingsItem
+        <div className="ml-2 border-l border-slate-800/10 pl-4 dark:border-slate-300/20 ">
-          title="Enable Relative Mouse"
+          <div className="space-y-4">
-          description="Enable Relative Mouse"
+            <div className="space-y-4">
-        >
+              <SettingsItem title="Enable Keyboard" description="Enable Keyboard">
-          <Checkbox
+                <Checkbox
-            checked={usbDeviceConfig.relative_mouse}
+                  checked={usbDeviceConfig.keyboard}
-            onChange={onUsbConfigItemChange("relative_mouse")}
+                  onChange={onUsbConfigItemChange("keyboard")}
-          />
+                />
-        </SettingsItem>
+              </SettingsItem>
-      </div>
+            </div>
-      <div className="space-y-4">
+            <div className="space-y-4">
-        <SettingsItem
+              <SettingsItem
-          title="Enable USB Mass Storage"
+                title="Enable Absolute Mouse (Pointer)"
-          description="Sometimes it might need to be disabled to prevent issues with certain devices"
+                description="Enable Absolute Mouse (Pointer)"
-        >
+              >
-          <Checkbox
+                <Checkbox
-            checked={usbDeviceConfig.mass_storage}
+                  checked={usbDeviceConfig.absolute_mouse}
-            onChange={onUsbConfigItemChange("mass_storage")}
+                  onChange={onUsbConfigItemChange("absolute_mouse")}
-          />
+                />
-        </SettingsItem>
+              </SettingsItem>
-      </div>
+            </div>
-    </>
+            <div className="space-y-4">
+              <SettingsItem
+                title="Enable Relative Mouse"
+                description="Enable Relative Mouse"
+              >
+                <Checkbox
+                  checked={usbDeviceConfig.relative_mouse}
+                  onChange={onUsbConfigItemChange("relative_mouse")}
+                />
+              </SettingsItem>
+            </div>
+            <div className="space-y-4">
+              <SettingsItem
+                title="Enable USB Mass Storage"
+                description="Sometimes it might need to be disabled to prevent issues with certain devices"
+              >
+                <Checkbox
+                  checked={usbDeviceConfig.mass_storage}
+                  onChange={onUsbConfigItemChange("mass_storage")}
+                />
+              </SettingsItem>
+            </div>
+          </div>
+          <div className="mt-6 flex gap-x-2">
+            <Button
+              size="SM"
+              loading={loading}
+              theme="primary"
+              text="Update USB Classes"
+              onClick={() => handleUsbConfigChange(usbDeviceConfig)}
+            />
+            <Button
+              size="SM"
+              theme="light"
+              text="Restore to Default"
+              onClick={() => handleUsbConfigChange(defaultUsbDeviceConfig)}
+            />
+          </div>
+        </div>
+      )}
+    </Fieldset>
   );
 }

ui/src/components/UsbInfoSetting.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from "react";
 
 import { useCallback } from "react";
+import { Button } from "@components/Button";
+import { InputFieldWithLabel } from "./InputField";
 
 import { useEffect, useState } from "react";
 import { UsbConfigState } from "../hooks/stores";
@@ -8,7 +10,7 @@ import { useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
 import { SettingsItem } from "../routes/devices.$id.settings";
 import { SelectMenuBasic } from "./SelectMenuBasic";
-import USBConfigDialog from "./USBConfigDialog";
+import Fieldset from "./Fieldset";
 
 const generatedSerialNumber = [generateNumber(1, 9), generateHex(7, 7), 0, 1].join("&");
 
@@ -51,8 +53,9 @@ const usbConfigs = [
 
 type UsbConfigMap = Record<string, USBConfig>;
 
-export function UsbConfigSetting() {
+export function UsbInfoSetting() {
   const [send] = useJsonRpc();
+  const [loading, setLoading] = useState(false);
 
   const [usbConfigProduct, setUsbConfigProduct] = useState("");
   const [deviceId, setDeviceId] = useState("");
@@ -110,17 +113,23 @@ export function UsbConfigSetting() {
 
   const handleUsbConfigChange = useCallback(
     (usbConfig: USBConfig) => {
-      send("setUsbConfig", { usbConfig }, resp => {
+      setLoading(true);
+      send("setUsbConfig", { usbConfig }, async resp => {
         if ("error" in resp) {
           notifications.error(
             `Failed to set usb config: ${resp.error.data || "Unknown error"}`,
           );
+          setLoading(false);
           return;
         }
-        // setUsbConfigProduct(usbConfig.product);
+
+        // We need some time to ensure the USB devices are updated
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        setLoading(false);
         notifications.success(
           `USB Config set to ${usbConfig.manufacturer} ${usbConfig.product}`,
         );
+
         syncUsbConfigProduct();
       });
     },
@@ -141,18 +150,18 @@ export function UsbConfigSetting() {
   }, [send, syncUsbConfigProduct]);
 
   return (
-    <>
+    <Fieldset disabled={loading} className="space-y-4">
-      <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-
       <SettingsItem
-        title="USB Device Emulation"
+        loading={loading}
-        description="Set a Preconfigured USB Device"
+        title="Identifiers"
+        description="USB device identifiers exposed to the target computer"
       >
         <SelectMenuBasic
           size="SM"
           label=""
           className="max-w-[192px]"
           value={usbConfigProduct}
+          fullWidth
           onChange={e => {
             if (e.target.value === "custom") {
               setUsbConfigProduct(e.target.value);
@@ -165,13 +174,130 @@ export function UsbConfigSetting() {
         />
       </SettingsItem>
       {usbConfigProduct === "custom" && (
-        <USBConfigDialog
+        <div className="ml-2 space-y-4 border-l border-slate-800/10 pl-4 dark:border-slate-300/20 ">
-          onSetUsbConfig={usbConfig => handleUsbConfigChange(usbConfig)}
+          <USBConfigDialog
-          onRestoreToDefault={() =>
+            loading={loading}
-            handleUsbConfigChange(usbConfigData[usbConfigs[0].value])
+            onSetUsbConfig={usbConfig => handleUsbConfigChange(usbConfig)}
-          }
+            onRestoreToDefault={() =>
-        />
+              handleUsbConfigChange(usbConfigData[usbConfigs[0].value])
+            }
+          />
+        </div>
       )}
-    </>
+    </Fieldset>
+  );
+}
+
+function USBConfigDialog({
+  loading,
+  onSetUsbConfig,
+  onRestoreToDefault,
+}: {
+  loading: boolean;
+  onSetUsbConfig: (usbConfig: USBConfig) => void;
+  onRestoreToDefault: () => void;
+}) {
+  const [usbConfigState, setUsbConfigState] = useState<USBConfig>({
+    vendor_id: "",
+    product_id: "",
+    serial_number: "",
+    manufacturer: "",
+    product: "",
+  });
+
+  const [send] = useJsonRpc();
+
+  const syncUsbConfig = useCallback(() => {
+    send("getUsbConfig", {}, resp => {
+      if ("error" in resp) {
+        console.error("Failed to load USB Config:", resp.error);
+      } else {
+        setUsbConfigState(resp.result as UsbConfigState);
+      }
+    });
+  }, [send, setUsbConfigState]);
+
+  // Load stored usb config from the backend
+  useEffect(() => {
+    syncUsbConfig();
+  }, [syncUsbConfig]);
+
+  const handleUsbVendorIdChange = (value: string) => {
+    setUsbConfigState({ ...usbConfigState, vendor_id: value });
+  };
+
+  const handleUsbProductIdChange = (value: string) => {
+    setUsbConfigState({ ...usbConfigState, product_id: value });
+  };
+
+  const handleUsbSerialChange = (value: string) => {
+    setUsbConfigState({ ...usbConfigState, serial_number: value });
+  };
+
+  const handleUsbManufacturer = (value: string) => {
+    setUsbConfigState({ ...usbConfigState, manufacturer: value });
+  };
+
+  const handleUsbProduct = (value: string) => {
+    setUsbConfigState({ ...usbConfigState, product: value });
+  };
+
+  return (
+    <div className="">
+      <div className="grid grid-cols-2 gap-4">
+        <InputFieldWithLabel
+          required
+          label="Vendor ID"
+          placeholder="Enter Vendor ID"
+          pattern="^0[xX][\da-fA-F]{4}$"
+          defaultValue={usbConfigState?.vendor_id}
+          onChange={e => handleUsbVendorIdChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Product ID"
+          placeholder="Enter Product ID"
+          pattern="^0[xX][\da-fA-F]{4}$"
+          defaultValue={usbConfigState?.product_id}
+          onChange={e => handleUsbProductIdChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Serial Number"
+          placeholder="Enter Serial Number"
+          defaultValue={usbConfigState?.serial_number}
+          onChange={e => handleUsbSerialChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Manufacturer"
+          placeholder="Enter Manufacturer"
+          defaultValue={usbConfigState?.manufacturer}
+          onChange={e => handleUsbManufacturer(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Product Name"
+          placeholder="Enter Product Name"
+          defaultValue={usbConfigState?.product}
+          onChange={e => handleUsbProduct(e.target.value)}
+        />
+      </div>
+      <div className="mt-6 flex gap-x-2">
+        <Button
+          loading={loading}
+          size="SM"
+          theme="primary"
+          text="Update USB Identifiers"
+          onClick={() => onSetUsbConfig(usbConfigState)}
+        />
+        <Button
+          size="SM"
+          theme="light"
+          text="Restore to Default"
+          onClick={onRestoreToDefault}
+        />
+      </div>
+    </div>
   );
 }

ui/src/components/WebRTCVideo.tsx

@@ -29,6 +29,7 @@ export default function WebRTCVideo() {
   const settings = useSettingsStore();
   const { sendKeyboardEvent, resetKeyboardState } = useKeyboard();
   const setMousePosition = useMouseStore(state => state.setMousePosition);
+  const setMouseMove = useMouseStore(state => state.setMouseMove);
   const {
     setClientSize: setVideoClientSize,
     setSize: setVideoSize,
@@ -93,19 +94,44 @@ export default function WebRTCVideo() {
   );
 
   // Mouse-related
-  const sendMouseMovement = useCallback(
+  const calcDelta = (pos: number) => (Math.abs(pos) < 10 ? pos * 2 : pos);
+  const sendRelMouseMovement = useCallback(
     (x: number, y: number, buttons: number) => {
-      send("absMouseReport", { x, y, buttons });
+      if (settings.mouseMode !== "relative") return;
+      // if we ignore the event, double-click will not work
+      // if (x === 0 && y === 0 && buttons === 0) return;
+      send("relMouseReport", { dx: calcDelta(x), dy: calcDelta(y), buttons });
+      setMouseMove({ x, y, buttons });
+    },
+    [send, setMouseMove, settings.mouseMode],
+  );
 
+  const relMouseMoveHandler = useCallback(
+    (e: MouseEvent) => {
+      if (settings.mouseMode !== "relative") return;
+
+      // Send mouse movement
+      const { buttons } = e;
+      sendRelMouseMovement(e.movementX, e.movementY, buttons);
+    },
+    [sendRelMouseMovement, settings.mouseMode],
+  );
+
+  const sendAbsMouseMovement = useCallback(
+    (x: number, y: number, buttons: number) => {
+      if (settings.mouseMode !== "absolute") return;
+      send("absMouseReport", { x, y, buttons });
       // We set that for the debug info bar
       setMousePosition(x, y);
     },
-    [send, setMousePosition],
+    [send, setMousePosition, settings.mouseMode],
   );
 
-  const mouseMoveHandler = useCallback(
+  const absMouseMoveHandler = useCallback(
     (e: MouseEvent) => {
       if (!videoClientWidth || !videoClientHeight) return;
+      if (settings.mouseMode !== "absolute") return;
+
       // Get the aspect ratios of the video element and the video stream
       const videoElementAspectRatio = videoClientWidth / videoClientHeight;
       const videoStreamAspectRatio = videoWidth / videoHeight;
@@ -140,9 +166,16 @@ export default function WebRTCVideo() {
 
       // Send mouse movement
       const { buttons } = e;
-      sendMouseMovement(x, y, buttons);
+      sendAbsMouseMovement(x, y, buttons);
     },
-    [sendMouseMovement, videoClientHeight, videoClientWidth, videoWidth, videoHeight],
+    [
+      sendAbsMouseMovement,
+      videoClientHeight,
+      videoClientWidth,
+      videoWidth,
+      videoHeight,
+      settings.mouseMode,
+    ],
   );
 
   const trackpadSensitivity = useDeviceSettingsStore(state => state.trackpadSensitivity);
@@ -193,8 +226,8 @@ export default function WebRTCVideo() {
   );
 
   const resetMousePosition = useCallback(() => {
-    sendMouseMovement(0, 0, 0);
+    sendAbsMouseMovement(0, 0, 0);
-  }, [sendMouseMovement]);
+  }, [sendAbsMouseMovement]);
 
   // Keyboard-related
   const handleModifierKeys = useCallback(
@@ -329,28 +362,6 @@ export default function WebRTCVideo() {
     ],
   );
 
-  // Effect hooks
-  useEffect(
-    function setupKeyboardEvents() {
-      const abortController = new AbortController();
-      const signal = abortController.signal;
-
-      document.addEventListener("keydown", keyDownHandler, { signal });
-      document.addEventListener("keyup", keyUpHandler, { signal });
-
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      window.clearKeys = () => sendKeyboardEvent([], []);
-      window.addEventListener("blur", resetKeyboardState, { signal });
-      document.addEventListener("visibilitychange", resetKeyboardState, { signal });
-
-      return () => {
-        abortController.abort();
-      };
-    },
-    [keyDownHandler, keyUpHandler, resetKeyboardState, sendKeyboardEvent],
-  );
-
   const videoKeyUpHandler = useCallback((e: KeyboardEvent) => {
     // In fullscreen mode in chrome & safari, the space key is used to pause/play the video
     // there is no way to prevent this, so we need to simply force play the video when it's paused.
@@ -363,46 +374,6 @@ export default function WebRTCVideo() {
     }
   }, []);
 
-  useEffect(
-    function setupVideoEventListeners() {
-      let videoElmRefValue = null;
-      if (!videoElm.current) return;
-      videoElmRefValue = videoElm.current;
-      const abortController = new AbortController();
-      const signal = abortController.signal;
-
-      videoElmRefValue.addEventListener("mousemove", mouseMoveHandler, { signal });
-      videoElmRefValue.addEventListener("pointerdown", mouseMoveHandler, { signal });
-      videoElmRefValue.addEventListener("pointerup", mouseMoveHandler, { signal });
-      videoElmRefValue.addEventListener("keyup", videoKeyUpHandler, { signal });
-      videoElmRefValue.addEventListener("wheel", mouseWheelHandler, {
-        signal,
-        passive: true,
-      });
-      videoElmRefValue.addEventListener(
-        "contextmenu",
-        (e: MouseEvent) => e.preventDefault(),
-        { signal },
-      );
-      videoElmRefValue.addEventListener("playing", onVideoPlaying, { signal });
-
-      const local = resetMousePosition;
-      window.addEventListener("blur", local, { signal });
-      document.addEventListener("visibilitychange", local, { signal });
-
-      return () => {
-        if (videoElmRefValue) abortController.abort();
-      };
-    },
-    [
-      mouseMoveHandler,
-      resetMousePosition,
-      onVideoPlaying,
-      mouseWheelHandler,
-      videoKeyUpHandler,
-    ],
-  );
-
   useEffect(
     function updateVideoStream() {
       if (!mediaStream) return;
@@ -425,6 +396,120 @@ export default function WebRTCVideo() {
     ],
   );
 
+  // Setup Keyboard Events
+  useEffect(
+    function setupKeyboardEvents() {
+      const abortController = new AbortController();
+      const signal = abortController.signal;
+
+      document.addEventListener("keydown", keyDownHandler, { signal });
+      document.addEventListener("keyup", keyUpHandler, { signal });
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      window.clearKeys = () => sendKeyboardEvent([], []);
+      window.addEventListener("blur", resetKeyboardState, { signal });
+      document.addEventListener("visibilitychange", resetKeyboardState, { signal });
+
+      return () => {
+        abortController.abort();
+      };
+    },
+    [keyDownHandler, keyUpHandler, resetKeyboardState, sendKeyboardEvent],
+  );
+
+  useEffect(
+    function setupVideoEventListeners() {
+      const videoElmRefValue = videoElm.current;
+      if (!videoElmRefValue) return;
+
+      const abortController = new AbortController();
+      const signal = abortController.signal;
+
+      // To prevent the video from being paused when the user presses a space in fullscreen mode
+      videoElmRefValue.addEventListener("keyup", videoKeyUpHandler, { signal });
+
+      // We need to know when the video is playing to update state and video size
+      videoElmRefValue.addEventListener("playing", onVideoPlaying, { signal });
+
+      return () => {
+        abortController.abort();
+      };
+    },
+    [
+      absMouseMoveHandler,
+      resetMousePosition,
+      onVideoPlaying,
+      mouseWheelHandler,
+      videoKeyUpHandler,
+    ],
+  );
+
+  // Setup Absolute Mouse Events
+  useEffect(
+    function setAbsoluteMouseModeEventListeners() {
+      const videoElmRefValue = videoElm.current;
+      if (!videoElmRefValue) return;
+
+      if (settings.mouseMode !== "absolute") return;
+
+      const abortController = new AbortController();
+      const signal = abortController.signal;
+
+      videoElmRefValue.addEventListener("mousemove", absMouseMoveHandler, { signal });
+      videoElmRefValue.addEventListener("pointerdown", absMouseMoveHandler, { signal });
+      videoElmRefValue.addEventListener("pointerup", absMouseMoveHandler, { signal });
+      videoElmRefValue.addEventListener("wheel", mouseWheelHandler, {
+        signal,
+        passive: true,
+      });
+
+      // Reset the mouse position when the window is blurred or the document is hidden
+      const local = resetMousePosition;
+      window.addEventListener("blur", local, { signal });
+      document.addEventListener("visibilitychange", local, { signal });
+
+      return () => {
+        abortController.abort();
+      };
+    },
+    [absMouseMoveHandler, mouseWheelHandler, resetMousePosition, settings.mouseMode],
+  );
+
+  // Setup Relative Mouse Events
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(
+    function setupRelativeMouseEventListeners() {
+      if (settings.mouseMode !== "relative") return;
+
+      const abortController = new AbortController();
+      const signal = abortController.signal;
+
+      // We bind to the larger container in relative mode because of delta between the acceleration of the local
+      // mouse and the mouse movement of the remote mouse. This simply makes it a bit less painful to use.
+      // When we get Pointer Lock support, we can remove this.
+      const containerElm = containerRef.current;
+      if (!containerElm) return;
+
+      containerElm.addEventListener("mousemove", relMouseMoveHandler, { signal });
+      containerElm.addEventListener("pointerdown", relMouseMoveHandler, { signal });
+      containerElm.addEventListener("pointerup", relMouseMoveHandler, { signal });
+
+      containerElm.addEventListener("wheel", mouseWheelHandler, {
+        signal,
+        passive: true,
+      });
+
+      const preventContextMenu = (e: MouseEvent) => e.preventDefault();
+      containerElm.addEventListener("contextmenu", preventContextMenu, { signal });
+
+      return () => {
+        abortController.abort();
+      };
+    },
+    [settings.mouseMode, relMouseMoveHandler, mouseWheelHandler],
+  );
+
   return (
     <div className="grid h-full w-full grid-rows-layout">
       <div className="min-h-[39.5px]">
@@ -439,7 +524,12 @@ export default function WebRTCVideo() {
         </fieldset>
       </div>
 
-      <div className="h-full overflow-hidden">
+      <div
+        ref={containerRef}
+        className={cx("h-full overflow-hidden", {
+          "cursor-none": settings.mouseMode === "relative" && settings.isCursorHidden,
+        })}
+      >
         <div className="relative h-full">
           <div
             className={cx(
@@ -468,7 +558,9 @@ export default function WebRTCVideo() {
                         className={cx(
                           "outline-50 max-h-full max-w-full object-contain transition-all duration-1000",
                           {
-                            "cursor-none": settings.isCursorHidden,
+                            "cursor-none":
+                              settings.mouseMode === "absolute" &&
+                              settings.isCursorHidden,
                             "opacity-0": isLoading || isConnectionError || hdmiError,
                             "animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
                               isPlaying,

ui/src/hooks/stores.ts

@@ -197,15 +197,23 @@ export const useRTCStore = create<RTCState>(set => ({
   setTerminalChannel: channel => set({ terminalChannel: channel }),
 }));
 
+interface MouseMove {
+  x: number;
+  y: number;
+  buttons: number;
+}
 interface MouseState {
   mouseX: number;
   mouseY: number;
+  mouseMove?: MouseMove;
+  setMouseMove: (move?: MouseMove) => void;
   setMousePosition: (x: number, y: number) => void;
 }
 
 export const useMouseStore = create<MouseState>(set => ({
   mouseX: 0,
   mouseY: 0,
+  setMouseMove: (move?: MouseMove) => set({ mouseMove: move }),
   setMousePosition: (x, y) => set({ mouseX: x, mouseY: y }),
 }));
 
@@ -543,12 +551,12 @@ export interface UpdateState {
   setOtaState: (state: UpdateState["otaState"]) => void;
   setUpdateDialogHasBeenMinimized: (hasBeenMinimized: boolean) => void;
   modalView:
-    | "loading"
+  | "loading"
-    | "updating"
+  | "updating"
-    | "upToDate"
+  | "upToDate"
-    | "updateAvailable"
+  | "updateAvailable"
-    | "updateCompleted"
+  | "updateCompleted"
-    | "error";
+  | "error";
   setModalView: (view: UpdateState["modalView"]) => void;
   setUpdateErrorMessage: (errorMessage: string) => void;
   updateErrorMessage: string | null;
@@ -612,12 +620,12 @@ export const useUsbConfigModalStore = create<UsbConfigModalState>(set => ({
 
 interface LocalAuthModalState {
   modalView:
-    | "createPassword"
+  | "createPassword"
-    | "deletePassword"
+  | "deletePassword"
-    | "updatePassword"
+  | "updatePassword"
-    | "creationSuccess"
+  | "creationSuccess"
-    | "deleteSuccess"
+  | "deleteSuccess"
-    | "updateSuccess";
+  | "updateSuccess";
   setModalView: (view: LocalAuthModalState["modalView"]) => void;
 }
 

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

@@ -100,8 +100,6 @@ export function Dialog({ onClose }: { onClose: () => void }) {
         .finally(() => {
           setMountInProgress(false);
         });
-
-      navigate("..");
     });
   }
 
@@ -115,7 +113,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
       clearMountMediaState();
       syncRemoteVirtualMediaState()
         .then(() => {
-          false;
+          navigate("..");
         })
         .catch(err => {
           triggerError(err instanceof Error ? err.message : String(err));
@@ -839,7 +837,11 @@ function DeviceFileView({
                   onDelete={() => {
                     const selectedFile = onStorageFiles.find(f => f.name === file.name);
                     if (!selectedFile) return;
-                    if (window.confirm("Are you sure you want to delete " + selectedFile.name + "?")) {
+                    if (
+                      window.confirm(
+                        "Are you sure you want to delete " + selectedFile.name + "?",
+                      )
+                    ) {
                       handleDeleteFile(selectedFile);
                     }
                   }}

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

@@ -6,7 +6,7 @@ import { useJsonRpc } from "@/hooks/useJsonRpc";
 
 import notifications from "../notifications";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
-import { UsbConfigSetting } from "../components/UsbConfigSetting";
+import { UsbInfoSetting } from "../components/UsbInfoSetting";
 import { UsbDeviceSetting } from "@components/UsbDeviceSetting";
 import { FeatureFlag } from "../components/FeatureFlag";
 
@@ -131,11 +131,11 @@ export default function SettingsHardwareRoute() {
       </div>
 
       <FeatureFlag minAppVersion="0.3.8">
-        <UsbConfigSetting />
+        <UsbDeviceSetting />
       </FeatureFlag>
 
       <FeatureFlag minAppVersion="0.3.8">
-        <UsbDeviceSetting />
+        <UsbInfoSetting />
       </FeatureFlag>
     </div>
   );

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

@@ -1,23 +1,27 @@
-import { SettingsPageHeader } from "@components/SettingsPageheader";
+import MouseIcon from "@/assets/mouse-icon.svg";
-import { SettingsItem } from "./devices.$id.settings";
-import { Checkbox } from "@/components/Checkbox";
-import { GridCard } from "@/components/Card";
 import PointingFinger from "@/assets/pointing-finger.svg";
-import { CheckCircleIcon } from "@heroicons/react/16/solid";
+import { GridCard } from "@/components/Card";
+import { Checkbox } from "@/components/Checkbox";
 import { useDeviceSettingsStore, useSettingsStore } from "@/hooks/stores";
-import notifications from "@/notifications";
-import { useCallback, useEffect, useState } from "react";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { cx } from "../cva.config";
+import notifications from "@/notifications";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
+import { CheckCircleIcon } from "@heroicons/react/16/solid";
+import { useCallback, useEffect, useState } from "react";
+import { FeatureFlag } from "../components/FeatureFlag";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
 import { useFeatureFlag } from "../hooks/useFeatureFlag";
-import { FeatureFlag } from "../components/FeatureFlag";
+import { SettingsItem } from "./devices.$id.settings";
 
 type ScrollSensitivity = "low" | "default" | "high";
 
 export default function SettingsKeyboardMouseRoute() {
   const hideCursor = useSettingsStore(state => state.isCursorHidden);
   const setHideCursor = useSettingsStore(state => state.setCursorVisibility);
+
+  const mouseMode = useSettingsStore(state => state.mouseMode);
+  const setMouseMode = useSettingsStore(state => state.setMouseMode);
+
   const scrollSensitivity = useDeviceSettingsStore(state => state.scrollSensitivity);
   const setScrollSensitivity = useDeviceSettingsStore(
     state => state.setScrollSensitivity,
@@ -122,19 +126,19 @@ export default function SettingsKeyboardMouseRoute() {
         </SettingsItem>
         <div className="space-y-4">
           <SettingsItem title="Modes" description="Choose the mouse input mode" />
-          <div className="flex flex-col items-center gap-4 md:flex-row">
+          <div className="flex items-center gap-4">
             <button
-              className="group block w-full grow"
+              className="block group grow"
-              onClick={() => console.log("Absolute mouse mode clicked")}
+              onClick={() => { setMouseMode("absolute"); }}
             >
               <GridCard>
-                <div className="group flex items-center gap-x-4 px-4 py-3">
+                <div className="flex items-center px-4 py-3 group gap-x-4">
                   <img
                     className="w-6 shrink-0 dark:invert"
                     src={PointingFinger}
                     alt="Finger touching a screen"
                   />
-                  <div className="flex grow items-center justify-between">
+                  <div className="flex items-center justify-between grow">
                     <div className="text-left">
                       <h3 className="text-sm font-semibold text-black dark:text-white">
                         Absolute
@@ -143,41 +147,32 @@ export default function SettingsKeyboardMouseRoute() {
                         Most convenient
                       </p>
                     </div>
-                    <CheckCircleIcon
+                    {mouseMode === "absolute" && (
-                      className={cx(
+                      <CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500" />
-                        "h-4 w-4 text-blue-700 transition-opacity duration-300 dark:text-blue-500",
+                    )}
-                      )}
-                    />
                   </div>
                 </div>
               </GridCard>
             </button>
             <button
-              className="group block w-full grow cursor-not-allowed opacity-50"
+              className="block group grow"
-              disabled
+              onClick={() => { setMouseMode("relative"); }}
             >
               <GridCard>
-                <div className="group flex items-center gap-x-4 px-4 py-3">
+                <div className="flex items-center px-4 py-3 gap-x-4">
-                  <img
+                  <img className="w-6 shrink-0 dark:invert" src={MouseIcon} alt="Mouse icon" />
-                    className="w-6 shrink-0 dark:invert"
+                  <div className="flex items-center justify-between grow">
-                    src={PointingFinger}
-                    alt="Finger touching a screen"
-                  />
-                  <div className="flex grow items-center justify-between">
                     <div className="text-left">
                       <h3 className="text-sm font-semibold text-black dark:text-white">
                         Relative
                       </h3>
                       <p className="text-xs leading-none text-slate-800 dark:text-slate-300">
-                        Most Compatible
+                        Most Compatible (Beta)
                       </p>
                     </div>
-                    <CheckCircleIcon
+                    {mouseMode === "relative" && (
-                      className={cx(
+                      <CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500" />
-                        "hidden",
+                    )}
-                        "h-4 w-4 text-blue-700 transition-opacity duration-300 dark:text-blue-500",
-                      )}
-                    />
                   </div>
                 </div>
               </GridCard>

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

@@ -16,6 +16,7 @@ import { cx } from "../cva.config";
 import { useUiStore } from "../hooks/stores";
 import useKeyboard from "../hooks/useKeyboard";
 import { useResizeObserver } from "../hooks/useResizeObserver";
+import LoadingSpinner from "../components/LoadingSpinner";
 
 /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
 export default function SettingsRoute() {
@@ -206,7 +207,7 @@ export default function SettingsRoute() {
               </div>
             </Card>
           </div>
-          <div className="w-full md:col-span-5">
+          <div className="w-full md:col-span-6">
             {/* <AutoHeight> */}
             <Card className="dark:bg-slate-800">
               <div
@@ -230,12 +231,14 @@ export function SettingsItem({
   description,
   children,
   className,
+  loading,
 }: {
   title: string;
   description: string | React.ReactNode;
   children?: React.ReactNode;
   className?: string;
   name?: string;
+  loading?: boolean;
 }) {
   return (
     <label
@@ -245,7 +248,10 @@ export function SettingsItem({
       )}
     >
       <div className="space-y-0.5">
-        <h3 className="text-base font-semibold text-black dark:text-white">{title}</h3>
+        <div className="flex items-center gap-x-2">
+          <h3 className="text-base font-semibold text-black dark:text-white">{title}</h3>
+          {loading && <LoadingSpinner className="h-4 w-4 text-blue-500" />}
+        </div>
         <p className="text-sm text-slate-700 dark:text-slate-300">{description}</p>
       </div>
       {children ? <div>{children}</div> : null}

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

@@ -516,6 +516,10 @@ export default function KvmIdRoute() {
 
       <div
         className="isolate"
+        // onMouseMove={e => e.stopPropagation()}
+        // onMouseDown={e => e.stopPropagation()}
+        // onMouseUp={e => e.stopPropagation()}
+        // onPointerMove={e => e.stopPropagation()}
         onKeyUp={e => e.stopPropagation()}
         onKeyDown={e => {
           e.stopPropagation();

usb.go

@@ -1,8 +1,9 @@
 package kvm
 
 import (
-	"github.com/jetkvm/kvm/internal/usbgadget"
 	"time"
+
+	"github.com/jetkvm/kvm/internal/usbgadget"
 )
 
 var gadget *usbgadget.UsbGadget
@@ -33,6 +34,10 @@ func rpcAbsMouseReport(x, y int, buttons uint8) error {
 	return gadget.AbsMouseReport(x, y, buttons)
 }
 
+func rpcRelMouseReport(dx, dy int8, buttons uint8) error {
+	return gadget.RelMouseReport(dx, dy, buttons)
+}
+
 func rpcWheelReport(wheelY int8) error {
 	return gadget.AbsMouseWheelReport(wheelY)
 }

usb_mass_storage.go

@@ -15,9 +15,9 @@ import (
 	"time"
 
 	"github.com/gin-gonic/gin"
-	"github.com/psanford/httpreadat"
 	"github.com/google/uuid"
 	"github.com/pion/webrtc/v4"
+	"github.com/psanford/httpreadat"
 
 	"github.com/jetkvm/kvm/resource"
 )
@@ -27,7 +27,7 @@ func writeFile(path string, data string) error {
 }
 
 func setMassStorageImage(imagePath string) error {
-	massStorageFunctionPath, err := gadget.GetConfigPath("mass_storage_lun0")
+	massStorageFunctionPath, err := gadget.GetPath("mass_storage_lun0")
 	if err != nil {
 		return fmt.Errorf("failed to get mass storage path: %w", err)
 	}
@@ -39,7 +39,7 @@ func setMassStorageImage(imagePath string) error {
 }
 
 func setMassStorageMode(cdrom bool) error {
-	massStorageFunctionPath, err := gadget.GetConfigPath("mass_storage_lun0")
+	massStorageFunctionPath, err := gadget.GetPath("mass_storage_lun0")
 	if err != nil {
 		return fmt.Errorf("failed to get mass storage path: %w", err)
 	}
@@ -110,7 +110,7 @@ func rpcMountBuiltInImage(filename string) error {
 }
 
 func getMassStorageMode() (bool, error) {
-	massStorageFunctionPath, err := gadget.GetConfigPath("mass_storage_lun0")
+	massStorageFunctionPath, err := gadget.GetPath("mass_storage_lun0")
 	if err != nil {
 		return false, fmt.Errorf("failed to get mass storage path: %w", err)
 	}

web.go

@@ -11,10 +11,7 @@ import (
 
 	"github.com/gin-gonic/gin"
 	"github.com/google/uuid"
-	"github.com/prometheus/client_golang/prometheus"
-	versioncollector "github.com/prometheus/client_golang/prometheus/collectors/version"
 	"github.com/prometheus/client_golang/prometheus/promhttp"
-	"github.com/prometheus/common/version"
 	"golang.org/x/crypto/bcrypt"
 )
 
@@ -86,8 +83,6 @@ func setupRouter() *gin.Engine {
 	r.POST("/device/setup", handleSetup)
 
 	// A Prometheus metrics endpoint.
-	version.Version = builtAppVersion
-	prometheus.MustRegister(versioncollector.NewCollector("jetkvm"))
 	r.GET("/metrics", gin.WrapH(promhttp.Handler()))
 
 	// Protected routes (allows both password and noPassword modes)

web_tls.go

@@ -0,0 +1,132 @@
+package kvm
+
+import (
+	"crypto/ecdsa"
+	"crypto/elliptic"
+	"crypto/rand"
+	"crypto/tls"
+	"crypto/x509"
+	"crypto/x509/pkix"
+	"encoding/pem"
+	"log"
+	"math/big"
+	"net"
+	"net/http"
+	"strings"
+	"sync"
+	"time"
+)
+
+const (
+	WebSecureListen                  = ":443"
+	WebSecureSelfSignedDefaultDomain = "jetkvm.local"
+	WebSecureSelfSignedDuration      = 365 * 24 * time.Hour
+)
+
+var (
+	tlsCerts    = make(map[string]*tls.Certificate)
+	tlsCertLock = &sync.Mutex{}
+)
+
+// RunWebSecureServer runs a web server with TLS.
+func RunWebSecureServer() {
+	r := setupRouter()
+
+	server := &http.Server{
+		Addr:    WebSecureListen,
+		Handler: r,
+		TLSConfig: &tls.Config{
+			// TODO: cache certificate in persistent storage
+			GetCertificate: func(info *tls.ClientHelloInfo) (*tls.Certificate, error) {
+				hostname := WebSecureSelfSignedDefaultDomain
+				if info.ServerName != "" {
+					hostname = info.ServerName
+				} else {
+					hostname = strings.Split(info.Conn.LocalAddr().String(), ":")[0]
+				}
+
+				logger.Infof("TLS handshake for %s, SupportedProtos: %v", hostname, info.SupportedProtos)
+
+				cert := createSelfSignedCert(hostname)
+
+				return cert, nil
+			},
+		},
+	}
+	logger.Infof("Starting websecure server on %s", RunWebSecureServer)
+	err := server.ListenAndServeTLS("", "")
+	if err != nil {
+		panic(err)
+	}
+	return
+}
+
+func createSelfSignedCert(hostname string) *tls.Certificate {
+	if tlsCert := tlsCerts[hostname]; tlsCert != nil {
+		return tlsCert
+	}
+	tlsCertLock.Lock()
+	defer tlsCertLock.Unlock()
+
+	logger.Infof("Creating self-signed certificate for %s", hostname)
+
+	priv, err := ecdsa.GenerateKey(elliptic.P256(), rand.Reader)
+	if err != nil {
+		log.Fatalf("Failed to generate private key: %v", err)
+	}
+	keyUsage := x509.KeyUsageDigitalSignature
+
+	notBefore := time.Now()
+	notAfter := notBefore.AddDate(1, 0, 0)
+
+	serialNumberLimit := new(big.Int).Lsh(big.NewInt(1), 128)
+	serialNumber, err := rand.Int(rand.Reader, serialNumberLimit)
+	if err != nil {
+		logger.Errorf("Failed to generate serial number: %v", err)
+	}
+
+	dnsName := hostname
+	ip := net.ParseIP(hostname)
+	if ip != nil {
+		dnsName = WebSecureSelfSignedDefaultDomain
+	}
+
+	template := x509.Certificate{
+		SerialNumber: serialNumber,
+		Subject: pkix.Name{
+			CommonName:   hostname,
+			Organization: []string{"JetKVM"},
+		},
+		NotBefore: notBefore,
+		NotAfter:  notAfter,
+
+		KeyUsage:              keyUsage,
+		ExtKeyUsage:           []x509.ExtKeyUsage{x509.ExtKeyUsageServerAuth},
+		BasicConstraintsValid: true,
+
+		DNSNames:    []string{dnsName},
+		IPAddresses: []net.IP{},
+	}
+
+	if ip != nil {
+		template.IPAddresses = append(template.IPAddresses, ip)
+	}
+
+	derBytes, err := x509.CreateCertificate(rand.Reader, &template, &template, &priv.PublicKey, priv)
+	if err != nil {
+		logger.Errorf("Failed to create certificate: %v", err)
+	}
+
+	cert := pem.EncodeToMemory(&pem.Block{Type: "CERTIFICATE", Bytes: derBytes})
+	if cert == nil {
+		logger.Errorf("Failed to encode certificate")
+	}
+
+	tlsCert := &tls.Certificate{
+		Certificate: [][]byte{derBytes},
+		PrivateKey:  priv,
+	}
+	tlsCerts[hostname] = tlsCert
+
+	return tlsCert
+}