Merge 84e4b44df0 into 584768bacf

chore: remove /device/ui-config.js endpoint (#678 )
feat(ui): reboot device (#421 ) (#505 )
2025-07-10 12:23:30 +02:00 · 2025-07-10 12:04:47 +02:00 · 2025-07-10 00:02:13 +02:00 · 2025-07-09 23:58:46 +02:00 · 2025-07-09 23:57:51 +02:00 · 2025-07-09 23:53:44 +02:00
17 changed files with 509 additions and 209 deletions
--- a/internal/usbgadget/config.go
+++ b/internal/usbgadget/config.go
@ -30,8 +30,8 @@ var defaultGadgetConfig = map[string]gadgetConfigItem{
 		attrs: gadgetAttributes{
 			"bcdUSB":    "0x0200", // USB 2.0
 			"idVendor":  "0x1d6b", // The Linux Foundation
-			"idProduct": "0104",   // Multifunction Composite Gadget
-			"bcdDevice": "0100",
+			"idProduct": "0x0104", // Multifunction Composite Gadget
+			"bcdDevice": "0x0100", // USB2
 		},
 		configAttrs: gadgetAttributes{
 			"MaxPower": "250", // in unit of 2mA
--- a/jsonrpc.go
+++ b/jsonrpc.go
@ -685,6 +685,7 @@ type DCPowerState struct {
 	Voltage      float64 `json:"voltage"`
 	Current      float64 `json:"current"`
 	Power        float64 `json:"power"`
+	RestoreState int     `json:"restoreState"`
 }

 func rpcGetDCPowerState() (DCPowerState, error) {
@ -700,6 +701,15 @@ func rpcSetDCPowerState(enabled bool) error {
 	return nil
 }

+func rpcSetDCRestoreState(state int) error {
+	logger.Info().Int("state", state).Msg("Setting DC restore state")
+	err := setDCRestoreState(state)
+	if err != nil {
+		return fmt.Errorf("failed to set DC restore state: %w", err)
+	}
+	return nil
+}
+
 func rpcGetActiveExtension() (string, error) {
 	return config.ActiveExtension, nil
 }
@ -1088,6 +1098,7 @@ var rpcHandlers = map[string]RPCHandler{
 	"getBacklightSettings":   {Func: rpcGetBacklightSettings},
 	"getDCPowerState":        {Func: rpcGetDCPowerState},
 	"setDCPowerState":        {Func: rpcSetDCPowerState, Params: []string{"enabled"}},
+	"setDCRestoreState":      {Func: rpcSetDCRestoreState, Params: []string{"state"}},
 	"getActiveExtension":     {Func: rpcGetActiveExtension},
 	"setActiveExtension":     {Func: rpcSetActiveExtension, Params: []string{"extensionId"}},
 	"getATXState":            {Func: rpcGetATXState},
--- a/serial.go
+++ b/serial.go
@ -142,6 +142,7 @@ var dcState DCPowerState
 func runDCControl() {
 	scopedLogger := serialLogger.With().Str("service", "dc_control").Logger()
 	reader := bufio.NewReader(port)
+	hasRestoreFeature := false
 	for {
 		line, err := reader.ReadString('\n')
 		if err != nil {
@ -151,7 +152,13 @@ func runDCControl() {

 		// Split the line by semicolon
 		parts := strings.Split(strings.TrimSpace(line), ";")
-		if len(parts) != 4 {
+		if len(parts) == 5 {
+			scopedLogger.Debug().Str("line", line).Msg("Detected DC extension with restore feature")
+			hasRestoreFeature = true
+		} else if len(parts) == 4 {
+			scopedLogger.Debug().Str("line", line).Msg("Detected DC extension without restore feature")
+			hasRestoreFeature = false
+		} else {
 			scopedLogger.Warn().Str("line", line).Msg("Invalid line")
 			continue
 		}
@ -163,6 +170,17 @@ func runDCControl() {
 			continue
 		}
 		dcState.IsOn = powerState == 1
+		if hasRestoreFeature {
+			restoreState, err := strconv.Atoi(parts[4])
+			if err != nil {
+				scopedLogger.Warn().Err(err).Msg("Invalid restore state")
+				continue
+			}
+			dcState.RestoreState = restoreState
+		} else {
+			// -1 means not supported
+			dcState.RestoreState = -1
+		}
 		milliVolts, err := strconv.ParseFloat(parts[1], 64)
 		if err != nil {
 			scopedLogger.Warn().Err(err).Msg("Invalid voltage")
@ -210,6 +228,25 @@ func setDCPowerState(on bool) error {
 	return nil
 }

+func setDCRestoreState(state int) error {
+	_, err := port.Write([]byte("\n"))
+	if err != nil {
+		return err
+	}
+	command := "RESTORE_MODE_OFF\n"
+	switch state {
+	case 1:
+		command = "RESTORE_MODE_ON\n"
+	case 2:
+		command = "RESTORE_MODE_LAST_STATE\n"
+	}
+	_, err = port.Write([]byte(command))
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
 var defaultMode = &serial.Mode{
 	BaudRate: 115200,
 	DataBits: 8,
--- a/ui/src/components/ActionBar.tsx
+++ b/ui/src/components/ActionBar.tsx
@ -262,23 +262,6 @@ export default function Actionbar({
              }}
            />
          </div>
-          {/* {useSettingsStore().actionBarCtrlAltDel && (
-            <div className="hidden lg:block">
-              <Button
-              size="XS"
-              theme="light"
-              text="Ctrl + Alt + Del"
-              LeadingIcon={FaLock}
-              onClick={() => {
-                sendKeyboardEvent(
-                [keys["Delete"]],
-                [modifiers["ControlLeft"], modifiers["AltLeft"]],
-                );
-                setTimeout(resetKeyboardState, 100);
-              }}
-              />
-            </div>
-            )} */}
          <div>
            <Button
              size="XS"
--- a/ui/src/components/InfoBar.tsx
+++ b/ui/src/components/InfoBar.tsx
@ -41,6 +41,12 @@ export default function InfoBar() {
  const keyboardLedStateSyncAvailable = useHidStore(state => state.keyboardLedStateSyncAvailable);
  const keyboardLedSync = useSettingsStore(state => state.keyboardLedSync);
  
+  const isShiftActive = useHidStore(state => state.isShiftActive);
+  const isCtrlActive = useHidStore(state => state.isCtrlActive);
+  const isAltActive = useHidStore(state => state.isAltActive);
+  const isMetaActive = useHidStore(state => state.isMetaActive);
+  const isAltGrActive = useHidStore(state => state.isAltGrActive);
+
  const isTurnServerInUse = useRTCStore(state => state.isTurnServerInUse);

  const usbState = useHidStore(state => state.usbState);
@ -135,6 +141,56 @@ export default function InfoBar() {
              {keyboardLedSync === "browser" ? "Browser" : "Host"}
            </div>
          ) : null}
+          <div
+            className={cx(
+              "shrink-0 p-1 px-1.5 text-xs",
+              isShiftActive
+                ? "text-black dark:text-white"
+                : "text-slate-800/20 dark:text-slate-300/20",
+            )}
+          >
+            Shift
+          </div>
+          <div
+            className={cx(
+              "shrink-0 p-1 px-1.5 text-xs",
+              isCtrlActive
+                ? "text-black dark:text-white"
+                : "text-slate-800/20 dark:text-slate-300/20",
+            )}
+          >
+            Ctrl
+          </div>
+          <div
+            className={cx(
+              "shrink-0 p-1 px-1.5 text-xs",
+              isAltActive
+                ? "text-black dark:text-white"
+                : "text-slate-800/20 dark:text-slate-300/20",
+            )}
+          >
+            Alt
+          </div>
+          <div
+            className={cx(
+              "shrink-0 p-1 px-1.5 text-xs",
+              isMetaActive
+                ? "text-black dark:text-white"
+                : "text-slate-800/20 dark:text-slate-300/20",
+            )}
+          >
+            Meta
+          </div>
+          <div
+            className={cx(
+              "shrink-0 p-1 px-1.5 text-xs",
+              isAltGrActive
+                ? "text-black dark:text-white"
+                : "text-slate-800/20 dark:text-slate-300/20",
+            )}
+          >
+            AltGr
+          </div>
          <div
            className={cx(
              "shrink-0 p-1 px-1.5 text-xs",
--- a/ui/src/components/VirtualKeyboard.tsx
+++ b/ui/src/components/VirtualKeyboard.tsx
@ -27,6 +27,7 @@ const AttachIcon = ({ className }: { className?: string }) => {

 function KeyboardWrapper() {
  const [layoutName, setLayoutName] = useState("default");
+  const [depressedButtons, setDepressedButtons] = useState("");

  const keyboardRef = useRef<HTMLDivElement>(null);
  const showAttachedVirtualKeyboard = useUiStore(
@ -54,6 +55,21 @@ function KeyboardWrapper() {

  const setIsCapsLockActive = useHidStore(state => state.setIsCapsLockActive);

+  const isShiftActive = useHidStore(state => state.isShiftActive);
+  const setIsShiftActive = useHidStore(state => state.setIsShiftActive);
+
+  const isCtrlActive = useHidStore(state => state.isCtrlActive);
+  const setIsCtrlActive = useHidStore(state => state.setIsCtrlActive);
+
+  const isAltActive = useHidStore(state => state.isAltActive);
+  const setIsAltActive = useHidStore(state => state.setIsAltActive);
+
+  const isMetaActive = useHidStore(state => state.isMetaActive);
+  const setIsMetaActive = useHidStore(state => state.setIsMetaActive);
+
+  const isAltGrActive = useHidStore(state => state.isAltGrActive);
+  const setIsAltGrActive = useHidStore(state => state.setIsAltGrActive);
+
  const startDrag = useCallback((e: MouseEvent | TouchEvent) => {
    if (!keyboardRef.current) return;
    if (e instanceof TouchEvent && e.touches.length > 1) return;
@ -123,18 +139,29 @@ function KeyboardWrapper() {
    };
  }, [endDrag, onDrag, startDrag]);

-  const onKeyDown = useCallback(
-    (key: string) => {
-      const isKeyShift = key === "{shift}" || key === "ShiftLeft" || key === "ShiftRight";
-      const isKeyCaps = key === "CapsLock";
-      const cleanKey = key.replace(/[()]/g, "");
-      const keyHasShiftModifier = key.includes("(");
+  useEffect(() => {
+    // if you have the CapsLock "down", then the shift state is inverted
+    const effectiveShift = isCapsLockActive ? false === isShiftActive : isShiftActive;
+    setLayoutName(effectiveShift ? "shift" : "default");
+  },
+    [setLayoutName, isCapsLockActive, isShiftActive]
+  );

-      // Handle toggle of layout for shift or caps lock
-      const toggleLayout = () => {
-        setLayoutName(prevLayout => (prevLayout === "default" ? "shift" : "default"));
-      };
+  // this causes the buttons to look depressed/clicked depending on the sticky state
+  useEffect(() => {
+    let buttons = "None ";  // make sure we name at least one (fake) button
+    if (isCapsLockActive) buttons += "CapsLock ";
+    if (isShiftActive) buttons += "ShiftLeft ShiftRight ";
+    if (isCtrlActive) buttons += "ControlLeft ControlRight ";
+    if (isAltActive) buttons += "AltLeft AltRight ";
+    if (isMetaActive) buttons += "MetaLeft MetaRight ";
+    setDepressedButtons(buttons.trimEnd());
+  },
+    [setDepressedButtons, isCapsLockActive, isShiftActive, isCtrlActive, isAltActive, isMetaActive, isAltGrActive]
+  );

+  const onKeyPress = useCallback((key: string) => {
+    // handle the fake combo keys first
    if (key === "CtrlAltDelete") {
      sendKeyboardEvent(
        [keys["Delete"]],
@ -164,39 +191,71 @@ function KeyboardWrapper() {
      return;
    }

-      if (isKeyShift || isKeyCaps) {
-        toggleLayout();
+    // strip away the parens for shifted characters
+    const cleanKey = key.replace(/[()]/g, "");

-        if (isCapsLockActive) {
-          if (!isKeyboardLedManagedByHost) {
-            setIsCapsLockActive(false);
-          }
-          sendKeyboardEvent([keys["CapsLock"]], []);
+    const passthrough = ["PrintScreen", "SystemRequest", "Pause", "Break", "ScrollLock", "Enter", "Space"].find((value) => value === cleanKey);
+
+    if (passthrough) {
+      emitkeycode(cleanKey);
      return;
    }
-      }

-      // Handle caps lock state change
-      if (isKeyCaps && !isKeyboardLedManagedByHost) {
+    // adjust the sticky state of the Shift/Ctrl/Alt/Meta/AltGr
+    if (key === "CapsLock" && !isKeyboardLedManagedByHost)
      setIsCapsLockActive(!isCapsLockActive);
+    else if (key === "ShiftLeft" || key === "ShiftRight")
+      setIsShiftActive(!isShiftActive);
+    else if (key === "ControlLeft" || key === "ControlRight")
+      setIsCtrlActive(!isCtrlActive);
+    else if (key === "AltLeft" || key === "AltRight")
+      setIsAltActive(!isAltActive);
+    else if (key === "MetaLeft" || key === "MetaRight")
+      setIsMetaActive(!isMetaActive);
+    else if (key === "AltGr")
+      setIsAltGrActive(!isAltGrActive);
+
+    emitkeycode(cleanKey);
+
+    function emitkeycode(key: string) {
+      const effectiveMods: number[] = [];
+
+      if (isShiftActive)
+        effectiveMods.push(modifiers["ShiftLeft"]);
+
+      if (isCtrlActive)
+        effectiveMods.push(modifiers["ControlLeft"]);
+
+      if (isAltActive)
+        effectiveMods.push(modifiers["AltLeft"]);
+
+      if (isMetaActive)
+        effectiveMods.push(modifiers["MetaLeft"]);
+
+      if (isAltGrActive) {
+        effectiveMods.push(modifiers["MetaRight"]);
+        effectiveMods.push(modifiers["CtrlLeft"]);
      }

-      // Collect new active keys and modifiers
-      const newKeys = keys[cleanKey] ? [keys[cleanKey]] : [];
-      const newModifiers =
-        keyHasShiftModifier && !isCapsLockActive ? [modifiers["ShiftLeft"]] : [];
-
-      // Update current keys and modifiers
-      sendKeyboardEvent(newKeys, newModifiers);
-
-      // If shift was used as a modifier and caps lock is not active, revert to default layout
-      if (keyHasShiftModifier && !isCapsLockActive) {
-        setLayoutName("default");
+      const keycode = keys[key];
+      if (keycode) {
+        // send the keycode with modifiers
+        sendKeyboardEvent([keycode], effectiveMods);
      }

-      setTimeout(resetKeyboardState, 100);
+      // release the key (if one pressed), but retain the modifiers
+      setTimeout(() => sendKeyboardEvent([], effectiveMods), 50);
+    }
  },
-    [isCapsLockActive, isKeyboardLedManagedByHost, sendKeyboardEvent, resetKeyboardState, setIsCapsLockActive],
+    [isKeyboardLedManagedByHost,
+      setIsCapsLockActive, isCapsLockActive,
+      setIsShiftActive, isShiftActive,
+      setIsCtrlActive, isCtrlActive,
+      setIsAltActive, isAltActive,
+      setIsMetaActive, isMetaActive,
+      setIsAltGrActive, isAltGrActive,
+      sendKeyboardEvent, resetKeyboardState
+    ],
  );

  const virtualKeyboard = useHidStore(state => state.isVirtualKeyboardEnabled);
@ -276,12 +335,16 @@ function KeyboardWrapper() {
                    <Keyboard
                      baseClass="simple-keyboard-main"
                      layoutName={layoutName}
-                      onKeyPress={onKeyDown}
+                      onKeyPress={onKeyPress}
                      buttonTheme={[
                        {
                          class: "combination-key",
                          buttons: "CtrlAltDelete AltMetaEscape CtrlAltBackspace",
                        },
+                        {
+                          class: "depressed-key",
+                          buttons: depressedButtons
+                        },
                      ]}
                      display={keyDisplayMap}
                      layout={{
@ -305,8 +368,6 @@ function KeyboardWrapper() {
                        ],
                      }}
                      disableButtonHold={true}
-                      syncInstanceInputs={true}
-                      debug={false}
                    />

                    <div className="controlArrows">
@ -314,25 +375,24 @@ function KeyboardWrapper() {
                        baseClass="simple-keyboard-control"
                        theme="simple-keyboard hg-theme-default hg-layout-default"
                        layoutName={layoutName}
-                        onKeyPress={onKeyDown}
+                        onKeyPress={onKeyPress}
                        display={keyDisplayMap}
                        layout={{
-                          default: ["PrintScreen ScrollLock Pause", "Insert Home Pageup", "Delete End Pagedown"],
-                          shift: ["(PrintScreen) ScrollLock (Pause)", "Insert Home Pageup", "Delete End Pagedown"],
+                          default: ["PrintScreen ScrollLock Pause", "Insert Home PageUp", "Delete End PageDown"],
+                          shift: ["(PrintScreen) ScrollLock (Pause)", "Insert Home PageUp", "Delete End PageDown"],
                        }}
-                        syncInstanceInputs={true}
-                        debug={false}
+                        disableButtonHold={true}
                      />
                      <Keyboard
                        baseClass="simple-keyboard-arrows"
                        theme="simple-keyboard hg-theme-default hg-layout-default"
-                        onKeyPress={onKeyDown}
+                        onKeyPress={onKeyPress}
                        display={keyDisplayMap}
                        layout={{
                          default: ["ArrowUp", "ArrowLeft ArrowDown ArrowRight"],
+                          shift: ["ArrowUp", "ArrowLeft ArrowDown ArrowRight"],
                        }}
-                        syncInstanceInputs={true}
-                        debug={false}
+                        disableButtonHold={true}
                      />
                    </div>
                  </div>
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@ -71,6 +71,15 @@ export default function WebRTCVideo() {
  const hdmiError = ["no_lock", "no_signal", "out_of_range"].includes(hdmiState);
  const isVideoLoading = !isPlaying;

+  // Keyboard related states
+  const { 
+    setIsShiftActive,
+    setIsCtrlActive,
+    setIsAltActive,
+    setIsMetaActive,
+    setIsAltGrActive
+  } = useHidStore();
+
  const [blockWheelEvent, setBlockWheelEvent] = useState(false);

  // Misc states and hooks
@ -423,6 +432,12 @@ export default function WebRTCVideo() {
        setIsScrollLockActive(e.getModifierState("ScrollLock"));
      }

+      setIsShiftActive(e.getModifierState("Shift"))
+      setIsCtrlActive(e.getModifierState("Control"))
+      setIsAltActive(e.getModifierState("Alt"))
+      setIsMetaActive(e.getModifierState("Meta"))
+      setIsAltGrActive(e.getModifierState("AltGraph"))
+
      if (code == "IntlBackslash" && ["`", "~"].includes(key)) {
        code = "Backquote";
      } else if (code == "Backquote" && ["§", "±"].includes(key)) {
@ -452,12 +467,17 @@ export default function WebRTCVideo() {
      sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]);
    },
    [
-      handleModifierKeys,
-      sendKeyboardEvent,
      isKeyboardLedManagedByHost,
      setIsNumLockActive,
      setIsCapsLockActive,
      setIsScrollLockActive,
+      setIsShiftActive,
+      setIsCtrlActive,
+      setIsAltActive,
+      setIsMetaActive,
+      setIsAltGrActive,
+      handleModifierKeys,
+      sendKeyboardEvent
    ],
  );

@ -472,6 +492,12 @@ export default function WebRTCVideo() {
        setIsScrollLockActive(e.getModifierState("ScrollLock"));
      }

+      setIsShiftActive(e.getModifierState("Shift"))
+      setIsCtrlActive(e.getModifierState("Control"))
+      setIsAltActive(e.getModifierState("Alt"))
+      setIsMetaActive(e.getModifierState("Meta"))
+      setIsAltGrActive(e.getModifierState("AltGraph"))
+
      // Filtering out the key that was just released (keys[e.code])
      const newKeys = prev.activeKeys.filter(k => k !== keys[e.code]).filter(Boolean);

@ -484,12 +510,17 @@ export default function WebRTCVideo() {
      sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]);
    },
    [
-      handleModifierKeys,
-      sendKeyboardEvent,
      isKeyboardLedManagedByHost,
      setIsNumLockActive,
      setIsCapsLockActive,
      setIsScrollLockActive,
+      setIsShiftActive,
+      setIsCtrlActive,
+      setIsAltActive,
+      setIsMetaActive,
+      setIsAltGrActive,
+      handleModifierKeys,
+      sendKeyboardEvent
    ],
  );

--- a/ui/src/components/extensions/DCPowerControl.tsx
+++ b/ui/src/components/extensions/DCPowerControl.tsx
@ -8,12 +8,14 @@ import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "@/notifications";
 import FieldLabel from "@components/FieldLabel";
 import LoadingSpinner from "@components/LoadingSpinner";
+import {SelectMenuBasic} from "@components/SelectMenuBasic";

 interface DCPowerState {
  isOn: boolean;
  voltage: number;
  current: number;
  power: number;
+  restoreState: number;
 }

 export function DCPowerControl() {
@ -43,6 +45,20 @@ export function DCPowerControl() {
      getDCPowerState(); // Refresh state after change
    });
  };
+  const handleRestoreChange = (state: number) => {
+    // const state = powerState?.restoreState === 0 ? 1 : powerState?.restoreState === 1 ? 2 : 0;
+    send("setDCRestoreState", { state }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set DC power state: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      getDCPowerState(); // Refresh state after change
+    });
+  };
+
+

  useEffect(() => {
    getDCPowerState();
@ -63,7 +79,7 @@ export function DCPowerControl() {
          <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
        </Card>
      ) : (
-        <Card className="h-[160px] animate-fadeIn opacity-0">
+        <Card className="animate-fadeIn opacity-0">
          <div className="space-y-4 p-3">
            {/* Power Controls */}
            <div className="flex items-center space-x-2">
@ -84,6 +100,21 @@ export function DCPowerControl() {
                onClick={() => handlePowerToggle(false)}
              />
            </div>
+            {powerState.restoreState > -1 ? (
+              <div className="flex items-center">
+                <SelectMenuBasic
+                    size="SM"
+                    label="Restore Power Loss"
+                    value={powerState.restoreState}
+                    onChange={e => handleRestoreChange(parseInt(e.target.value))}
+                    options={[
+                      { value: '0', label: "Power OFF" },
+                      { value: '1', label: "Power ON" },
+                      { value: '2', label: "Last State" },
+                    ]}
+                />
+              </div>
+            ) : null}
            <hr className="border-slate-700/30 dark:border-slate-600/30" />

            {/* Status Display */}
--- a/ui/src/hooks/stores.ts
+++ b/ui/src/hooks/stores.ts
@ -308,9 +308,6 @@ interface SettingsState {
  keyboardLayout: string;
  setKeyboardLayout: (layout: string) => void;

-  actionBarCtrlAltDel: boolean;
-  setActionBarCtrlAltDel: (enabled: boolean) => void;
-
  keyboardLedSync: KeyboardLedSync;
  setKeyboardLedSync: (sync: KeyboardLedSync) => void;

@ -359,9 +356,6 @@ export const useSettingsStore = create(
      keyboardLayout: "en-US",
      setKeyboardLayout: layout => set({ keyboardLayout: layout }),

-      actionBarCtrlAltDel: false,
-      setActionBarCtrlAltDel: enabled => set({ actionBarCtrlAltDel: enabled }),
-
      keyboardLedSync: "auto",
      setKeyboardLedSync: sync => set({ keyboardLedSync: sync }),

@ -481,6 +475,21 @@ export interface HidState {
  isVirtualKeyboardEnabled: boolean;
  setVirtualKeyboardEnabled: (enabled: boolean) => void;

+  isShiftActive: boolean;
+  setIsShiftActive: (enabled: boolean) => void;
+
+  isCtrlActive: boolean;
+  setIsCtrlActive: (enabled: boolean) => void;
+
+  isAltActive: boolean;
+  setIsAltActive: (enabled: boolean) => void;
+
+  isMetaActive: boolean;
+  setIsMetaActive: (enabled: boolean) => void;
+
+  isAltGrActive: boolean;
+  setIsAltGrActive: (enabled: boolean) => void;
+
  isPasteModeEnabled: boolean;
  setPasteModeEnabled: (enabled: boolean) => void;

@ -527,6 +536,21 @@ export const useHidStore = create<HidState>((set, get) => ({
  isVirtualKeyboardEnabled: false,
  setVirtualKeyboardEnabled: enabled => set({ isVirtualKeyboardEnabled: enabled }),

+  isShiftActive: false,
+  setIsShiftActive: enabled => set({ isShiftActive: enabled }),
+
+  isCtrlActive: false,
+  setIsCtrlActive: enabled => set({ isCtrlActive: enabled }),
+
+  isAltActive: false,
+  setIsAltActive: enabled => set({ isAltActive: enabled }),
+
+  isMetaActive: false,
+  setIsMetaActive: enabled => set({ isMetaActive: enabled }),
+
+  isAltGrActive: false,
+  setIsAltGrActive: enabled => set({ isAltGrActive: enabled }),
+
  isPasteModeEnabled: false,
  setPasteModeEnabled: enabled => set({ isPasteModeEnabled: enabled }),

--- a/ui/src/index.css
+++ b/ui/src/index.css
@ -222,6 +222,10 @@ video::-webkit-media-controls {
  background: none;
 }

+.simple-keyboard .hg-button.depressed-key {
+  @apply border-gray-800! border-b-gray-600! border-t-gray-900! bg-gray-700!;
+}
+
 .simple-keyboard .hg-button.selectedButton {
  background: rgba(5, 25, 70, 0.53);
  @apply text-white;
--- a/ui/src/keyboardMappings.ts
+++ b/ui/src/keyboardMappings.ts
@ -5,14 +5,14 @@ export const keys = {
  ArrowLeft: 0x50,
  ArrowRight: 0x4f,
  ArrowUp: 0x52,
-  Backquote: 0x35,
+  Backquote: 0x35,    // aka Grave
  Backslash: 0x31,
  Backspace: 0x2a,
-  BracketLeft: 0x2f,
-  BracketRight: 0x30,
+  BracketLeft: 0x2f,  // aka LeftBrace
+  BracketRight: 0x30, // aka RightBrace
  CapsLock: 0x39,
  Comma: 0x36,
-  ContextMenu: 0,
+  Compose: 0x65,
  Delete: 0x4c,
  Digit0: 0x27,
  Digit1: 0x1e,
@ -41,6 +41,18 @@ export const keys = {
  F11: 0x44,
  F12: 0x45,
  F13: 0x68,
+  F14: 0x69,
+  F15: 0x6a,
+  F16: 0x6b,
+  F17: 0x6c,
+  F18: 0x6d,
+  F19: 0x6e,
+  F20: 0x6f,
+  F21: 0x70,
+  F22: 0x71,
+  F23: 0x72,
+  F24: 0x73,
+  HashTilde: 0x32,
  Home: 0x4a,
  Insert: 0x49,
  IntlBackslash: 0x64,
@ -70,37 +82,58 @@ export const keys = {
  KeyX: 0x1b,
  KeyY: 0x1c,
  KeyZ: 0x1d,
+  KeypadComma: 0x85,
+  KeypadEqual: 0x86,
+  KeyRO: 0x87,
+  KatakanaHiragana: 0x88,
+  Yen: 0x89,
+  Henkan: 0x8a,
+  Muhenkan: 0x8b,
+  KPJPComma: 0x8c,
+  International7: 0x8d,
+  International8: 0x8e,
+  International9: 0x8f,
+  Hangeul: 0x90,
+  Hanja: 0x91,
+  Katakana: 0x92,
+  Hiragana: 0x93,
+  Zenkakuhankaku:0x94,
+  KeypadLeftParen: 0xb6,
+  KeypadRightParen: 0xb7,
  KeypadExclamation: 0xcf,
  Minus: 0x2d,
-  NumLock: 0x53,
-  Numpad0: 0x62,
-  Numpad1: 0x59,
-  Numpad2: 0x5a,
-  Numpad3: 0x5b,
-  Numpad4: 0x5c,
+  None: 0x00,
+  NumLock: 0x53,  // and Clear
+  Numpad0: 0x62,  // and Insert
+  Numpad1: 0x59,  // and End
+  Numpad2: 0x5a,  // and Down Arrow
+  Numpad3: 0x5b,  // and Page Down
+  Numpad4: 0x5c,  // and Left Arrow
  Numpad5: 0x5d,
-  Numpad6: 0x5e,
-  Numpad7: 0x5f,
-  Numpad8: 0x60,
-  Numpad9: 0x61,
-  NumpadAdd: 0x57,
-  NumpadDivide: 0x54,
+  Numpad6: 0x5e,  // and Right Arrow
+  Numpad7: 0x5f,  // and Home
+  Numpad8: 0x60,  // and Up Arrow
+  Numpad9: 0x61,  // and Page Up
+  NumpadPlus: 0x57,
+  NumpadSlash: 0x54,
  NumpadEnter: 0x58,
  NumpadEqual: 0x67,
-  NumpadMultiply: 0x55,
-  NumpadSubtract: 0x56,
-  NumpadDecimal: 0x63,
+  NumpadAsterisk: 0x55,
+  NumpadMinus: 0x56,
+  NumpadDecimal: 0x63,  // aka NumpadDot and Delete
+  Overflow: 0x01,
  PageDown: 0x4e,
  PageUp: 0x4b,
-  Period: 0x37,
+  Period: 0x37,     // aka Dot
  PrintScreen: 0x46,
  Pause: 0x48,
-  Quote: 0x34,
+  Power: 0x66,
+  Quote: 0x34,      // aka Apostrophe
  ScrollLock: 0x47,
  Semicolon: 0x33,
  Slash: 0x38,
  Space: 0x2c,
-  SystemRequest: 0x9a,
+  SystemRequest: 0x9a,  // aka Attention
  Tab: 0x2b,
 } as Record<string, number>;

@ -131,23 +164,23 @@ export const keyDisplayMap: Record<string, string> = {
  AltMetaEscape: "Alt + Meta + Escape",
  CtrlAltBackspace: "Ctrl + Alt + Backspace",
  Escape: "esc",
-  Tab: "tab",
-  Backspace: "backspace",
-  "(Backspace)": "backspace",
+  Tab: "tab ⇥",
+  Backspace: "backspace ⌫",
  Enter: "enter",
-  CapsLock: "caps lock",
-  ShiftLeft: "shift",
-  ShiftRight: "shift",
-  ControlLeft: "ctrl",
-  AltLeft: "alt",
-  AltRight: "alt",
-  MetaLeft: "meta",
-  MetaRight: "meta",
+  CapsLock: "caps lock ⇪",
+  ShiftLeft: "shift ⇧",
+  ShiftRight: "⇧ shift",
+  ControlLeft: "ctrl ⌃",
+  ControlRight: "⌃ ctrl",
+  AltLeft: "alt ⌥",
+  AltRight: "⌥ alt",
+  MetaLeft: "meta ⌘", // "meta ⊞" for windows
+  MetaRight: "⌘ meta",// "≣ meta" for windows
  Space: " ",
-  Insert: "insert",
+  Insert: "ins",
  Home: "home",
  PageUp: "page up",
-  Delete: "delete",
+  Delete: "del ⌦",
  End: "end",
  PageDown: "page down",
  ArrowLeft: "←",
@ -213,13 +246,12 @@ export const keyDisplayMap: Record<string, string> = {
  Numpad0: "Num 0", Numpad1: "Num 1", Numpad2: "Num 2",
  Numpad3: "Num 3", Numpad4: "Num 4", Numpad5: "Num 5",
  Numpad6: "Num 6", Numpad7: "Num 7", Numpad8: "Num 8",
-  Numpad9: "Num 9", NumpadAdd: "Num +", NumpadSubtract: "Num -",
-  NumpadMultiply: "Num *", NumpadDivide: "Num /", NumpadDecimal: "Num .",
+  Numpad9: "Num 9", NumpadPlus: "Num +", NumpadMinus: "Num -",
+  NumpadAsterisk: "Num *", NumpadSlash: "Num /", NumpadDecimal: "Num .",
  NumpadEqual: "Num =", NumpadEnter: "Num Enter",
  NumLock: "Num Lock",

  // Modals
  PrintScreen: "prt sc", ScrollLock: "scr lk", Pause: "pause",
-  "(PrintScreen)": "sys rq", "(Pause)": "break",
-  SystemRequest: "sys rq", Break: "break"
+  "(PrintScreen)": "sys rq", "(Pause)": "break"
 };
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@ -42,6 +42,7 @@ import SettingsHardwareRoute from "./routes/devices.$id.settings.hardware";
 import SettingsVideoRoute from "./routes/devices.$id.settings.video";
 import SettingsAppearanceRoute from "./routes/devices.$id.settings.appearance";
 import * as SettingsGeneralIndexRoute from "./routes/devices.$id.settings.general._index";
+import SettingsGeneralRebootRoute from "./routes/devices.$id.settings.general.reboot";
 import SettingsGeneralUpdateRoute from "./routes/devices.$id.settings.general.update";
 import SettingsNetworkRoute from "./routes/devices.$id.settings.network";
 import SecurityAccessLocalAuthRoute from "./routes/devices.$id.settings.access.local-auth";
@ -140,6 +141,10 @@ if (isOnDevice) {
                  index: true,
                  element: <SettingsGeneralIndexRoute.default />,
                },
+                {
+                  path: "reboot",
+                  element: <SettingsGeneralRebootRoute />,
+                },
                {
                  path: "update",
                  element: <SettingsGeneralUpdateRoute />,
--- a/ui/src/routes/devices.$id.settings.ctrlaltdel.tsx
+++ b/ui/src/routes/devices.$id.settings.ctrlaltdel.tsx
@ -1,28 +0,0 @@
-
-import { Checkbox } from "@/components/Checkbox";
-import { SettingsPageHeader } from "@/components/SettingsPageheader";
-import { useSettingsStore } from "@/hooks/stores";
-
-import { SettingsItem } from "./devices.$id.settings";
-
-export default function SettingsCtrlAltDelRoute() {
-  const enableCtrlAltDel = useSettingsStore(state => state.actionBarCtrlAltDel);
-  const setEnableCtrlAltDel = useSettingsStore(state => state.setActionBarCtrlAltDel);
-
-  return (
-    <div className="space-y-4">
-      <SettingsPageHeader
-        title="Action Bar"
-        description="Customize the action bar of your JetKVM interface"
-      />
-      <div className="space-y-4">
-        <SettingsItem title="Enable Ctrl-Alt-Del" description="Enable the Ctrl-Alt-Del key on the virtual keyboard">
-          <Checkbox
-            checked={enableCtrlAltDel}
-            onChange={e => setEnableCtrlAltDel(e.target.checked)}
-          />
-        </SettingsItem>
-      </div>
-    </div>
-  );
-}
--- a/ui/src/routes/devices.$id.settings.general._index.tsx
+++ b/ui/src/routes/devices.$id.settings.general._index.tsx
@ -92,6 +92,21 @@ export default function SettingsGeneralRoute() {
              />
            </SettingsItem>
          </div>
+
+          <div className="mt-2 flex items-center justify-between gap-x-2">
+            <SettingsItem
+              title="Reboot Device"
+              description="Power cycle the JetKVM"
+            />
+            <div>
+              <Button
+                size="SM"
+                theme="light"
+                text="Reboot Device"
+                onClick={() => navigateTo("./reboot")}
+              />
+            </div>
+          </div>
        </div>
      </div>
    </div>
--- a/ui/src/routes/devices.$id.settings.general.reboot.tsx
+++ b/ui/src/routes/devices.$id.settings.general.reboot.tsx
@ -0,0 +1,66 @@
+import { useNavigate } from "react-router-dom";
+import { useCallback } from "react";
+
+import { useJsonRpc } from "@/hooks/useJsonRpc";
+import { Button } from "@components/Button";
+
+export default function SettingsGeneralRebootRoute() {
+  const navigate = useNavigate();
+  const [send] = useJsonRpc();
+
+  const onConfirmUpdate = useCallback(() => {
+    // This is where we send the RPC to the golang binary
+    send("reboot", {force: true});
+  }, [send]);
+
+  {
+    /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
+  }
+  return <Dialog onClose={() => navigate("..")} onConfirmUpdate={onConfirmUpdate} />;
+}
+
+export function Dialog({
+  onClose,
+  onConfirmUpdate,
+}: {
+  onClose: () => void;
+  onConfirmUpdate: () => void;
+}) {
+
+  return (
+    <div className="pointer-events-auto relative mx-auto text-left">
+      <div>
+          <ConfirmationBox
+            onYes={onConfirmUpdate}
+            onNo={onClose}
+          />
+      </div>
+    </div>
+  );
+}
+
+function ConfirmationBox({
+  onYes,
+  onNo,
+}: {
+  onYes: () => void;
+  onNo: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-start justify-start space-y-4 text-left">
+      <div className="text-left">
+        <p className="text-base font-semibold text-black dark:text-white">
+          Reboot JetKVM
+        </p>
+        <p className="text-sm text-slate-600 dark:text-slate-300">
+          Do you want to proceed with rebooting the system?
+        </p>
+
+        <div className="mt-4 flex gap-x-2">
+          <Button size="SM" theme="light" text="Yes" onClick={onYes} />
+          <Button size="SM" theme="blank" text="No" onClick={onNo} />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/ui/src/routes/devices.$id.settings.hardware.tsx
+++ b/ui/src/routes/devices.$id.settings.hardware.tsx
@ -116,15 +116,6 @@ export default function SettingsHardwareRoute() {
            }}
          />
        </SettingsItem>
-        {/* <SettingsItem
-          title="Enable Ctrl+Alt+Del Action Bar"
-          description="Enable or disable the action bar action for sending a Ctrl+Alt+Del to the host"
-        >
-          <Checkbox
-            checked={actionBarConfig.ctrlAltDel}
-            onChange={onActionBarItemChange("ctrlAltDel")}
-          />
-        </SettingsItem> */}
        {settings.backlightSettings.max_brightness != 0 && (
          <>
            <SettingsItem
--- a/web.go
+++ b/web.go
@ -97,9 +97,6 @@ func setupRouter() *gin.Engine {
 	// We use this to determine if the device is setup
 	r.GET("/device/status", handleDeviceStatus)

-	// We use this to provide the UI with the device configuration
-	r.GET("/device/ui-config.js", handleDeviceUIConfig)
-
 	// We use this to setup the device in the welcome page
 	r.POST("/device/setup", handleSetup)

@ -694,21 +691,6 @@ func handleCloudState(c *gin.Context) {
 	c.JSON(http.StatusOK, response)
 }

-func handleDeviceUIConfig(c *gin.Context) {
-	config, _ := json.Marshal(gin.H{
-		"CLOUD_API":      config.CloudURL,
-		"DEVICE_VERSION": builtAppVersion,
-	})
-	if config == nil {
-		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to marshal config"})
-		return
-	}
-
-	response := fmt.Sprintf("window.JETKVM_CONFIG = %s;", config)
-
-	c.Data(http.StatusOK, "text/javascript; charset=utf-8", []byte(response))
-}
-
 func handleSetup(c *gin.Context) {
 	// Check if the device is already set up
 	if config.LocalAuthMode != "" || config.HashedPassword != "" {
Author	SHA1	Message	Date
Marc Brooks	443aff5152	Merge `84e4b44df0` into `584768bacf`	2025-07-10 12:23:30 +02:00
Aveline	584768bacf	chore: remove /device/ui-config.js endpoint (#678 )	2025-07-10 12:04:47 +02:00
adammkelly	488276f3a8	feat(ui): reboot device (#421 ) (#505 )	2025-07-10 00:02:13 +02:00
Patrick Hofmann	7267347261	feat(dc-power-extension): power restore mode in DCPowerControl component (#672 ) * DC-extension: Supporting to set the power restore mode in DCPowerControl component * fixing lint issue	2025-07-09 23:58:46 +02:00
Marc Brooks	393bc122d4	chore: fix the base usb configuration (#610 ) In reviewing the config.go settings for idProduct and bcdDevice are not formatted correctly. All examples on GitHub have 0x0104 and 0x0100 respectively. The idProduct value gets overwritten with valid values when you change the configuration (because they are correct in the options), but until you do the USB initialization will not be correct.	2025-07-09 23:57:51 +02:00
Marc Brooks	6d13e1be12	chore: remove ActionBar-Ctrl-Alt-Del (#669 )	2025-07-09 23:53:44 +02:00
Marc Brooks	84e4b44df0	Treats all modifiers as "sticky" keys for use with just touch/mouse Made the operation keys look more like a keyboard Add persistent state management for the Shift/Ctrl/Alt/Meta Add infoBar indicators for Shift/Ctr/Alt/Meta/AltGr Remove redundant Break it's actually on keyboard as (Pause) Add a style for the virtual keyboard "depressed" buttons. Delete the no-longer-needed button variants Added missing keycodes Added modifier tracking for all the other keys Ensures the InfoBar tracks for physical and virtual keyboard Shows what buttons are depressed for sticky keys Now treats all the Shift/Control/Alt/Meta/AltGr keys as if they were sticky keys so users can click the button and hit the next key,	2025-06-17 11:19:00 -05:00