Added keyboard CTRL and CMMD keybindings outside of fullscreen mode

ui/localization/messages/da.json

@@ -384,6 +384,13 @@
     "jiggler_save_jiggler_config": "Gem Jiggler-konfiguration",
     "jiggler_timezone_description": "Tidszone for cron-plan",
     "jiggler_timezone_label": "Tidszone",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Konfigurer tastaturindstillinger for din enhed",
     "keyboard_layout_description": "Tastaturlayout for måloperativsystemet",
     "keyboard_layout_error": "Kunne ikke indstille tastaturlayout: {error}",

ui/localization/messages/de.json

@@ -384,6 +384,13 @@
     "jiggler_save_jiggler_config": "Jiggler-Konfiguration speichern",
     "jiggler_timezone_description": "Zeitzone für Cron-Zeitplan",
     "jiggler_timezone_label": "Zeitzone",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Konfigurieren Sie die Tastatureinstellungen für Ihr Gerät",
     "keyboard_layout_description": "Tastaturlayout des Zielbetriebssystems",
     "keyboard_layout_error": "Tastaturlayout konnte nicht festgelegt werden: {error}",

ui/localization/messages/en.json

@@ -389,6 +389,13 @@
     "jiggler_save_jiggler_config": "Save Jiggler Config",
     "jiggler_timezone_description": "Timezone for cron schedule",
     "jiggler_timezone_label": "Timezone",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Configure keyboard settings for your device",
     "keyboard_layout_description": "Keyboard layout of target operating system",
     "keyboard_layout_error": "Failed to set keyboard layout: {error}",

ui/localization/messages/es.json

@@ -384,6 +384,13 @@
     "jiggler_save_jiggler_config": "Guardar configuración de Jiggler",
     "jiggler_timezone_description": "Zona horaria para la programación cron",
     "jiggler_timezone_label": "Zona horaria",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Configure los ajustes del teclado para su dispositivo",
     "keyboard_layout_description": "Disposición del teclado del sistema operativo de destino",
     "keyboard_layout_error": "No se pudo establecer la distribución del teclado: {error}",

ui/localization/messages/fr.json

@@ -384,6 +384,13 @@
     "jiggler_save_jiggler_config": "Enregistrer la configuration de Jiggler",
     "jiggler_timezone_description": "Fuseau horaire pour la planification cron",
     "jiggler_timezone_label": "Fuseau horaire",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Configurer les paramètres du clavier pour votre appareil",
     "keyboard_layout_description": "Disposition du clavier du système d'exploitation cible",
     "keyboard_layout_error": "Échec de la définition de la disposition du clavier : {error}",

ui/localization/messages/it.json

@@ -384,6 +384,13 @@
     "jiggler_save_jiggler_config": "Salva la configurazione di Jiggler",
     "jiggler_timezone_description": "Fuso orario per la pianificazione cron",
     "jiggler_timezone_label": "Fuso orario",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Configura le impostazioni della tastiera per il tuo dispositivo",
     "keyboard_layout_description": "Layout della tastiera del sistema operativo di destinazione",
     "keyboard_layout_error": "Impossibile impostare il layout della tastiera: {error}",

ui/localization/messages/ja.json

@@ -389,6 +389,13 @@
     "jiggler_save_jiggler_config": "ジグラー設定を保存",
     "jiggler_timezone_description": "Cronスケジュールのタイムゾーン",
     "jiggler_timezone_label": "タイムゾーン",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "デバイスのキーボード設定を構成します",
     "keyboard_layout_description": "ターゲットOSのキーボードレイアウト",
     "keyboard_layout_error": "キーボードレイアウトの設定に失敗しました: {error}",

ui/localization/messages/nb.json

@@ -384,6 +384,13 @@
     "jiggler_save_jiggler_config": "Lagre Jiggler-konfigurasjon",
     "jiggler_timezone_description": "Tidssone for cron-plan",
     "jiggler_timezone_label": "Tidssone",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Konfigurer tastaturinnstillinger for enheten din",
     "keyboard_layout_description": "Tastaturoppsett for måloperativsystemet",
     "keyboard_layout_error": "Klarte ikke å angi tastaturoppsett: {error}",

ui/localization/messages/pt.json

@@ -389,6 +389,13 @@
     "jiggler_save_jiggler_config": "Salvar Configuração do Jiggler",
     "jiggler_timezone_description": "Fuso horário para agendamento cron",
     "jiggler_timezone_label": "Fuso Horário",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Configure as opções de teclado para o seu dispositivo",
     "keyboard_layout_description": "Layout do teclado do sistema operacional de destino",
     "keyboard_layout_error": "Falha ao definir layout do teclado: {error}",

ui/localization/messages/sv.json

@@ -384,6 +384,13 @@
     "jiggler_save_jiggler_config": "Spara Jiggler-konfiguration",
     "jiggler_timezone_description": "Tidszon för cron-schema",
     "jiggler_timezone_label": "Tidszon",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "Konfigurera tangentbordsinställningar för din enhet",
     "keyboard_layout_description": "Tangentbordslayout för måloperativsystemet",
     "keyboard_layout_error": "Misslyckades med att ställa in tangentbordslayout: {error}",

ui/localization/messages/zh-tw.json

@@ -389,6 +389,13 @@
     "jiggler_save_jiggler_config": "儲存防休眠設定",
     "jiggler_timezone_description": "Cron 排程的時區",
     "jiggler_timezone_label": "時區",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "設定您裝置的鍵盤設定",
     "keyboard_layout_description": "目標作業系統的鍵盤配置",
     "keyboard_layout_error": "設定鍵盤配置失敗：{error}",

ui/localization/messages/zh.json

@@ -384,6 +384,13 @@
     "jiggler_save_jiggler_config": "保存防休眠配置",
     "jiggler_timezone_description": "Cron 计划所使用的时区。",
     "jiggler_timezone_label": "时区",
+    "keyboard_capture_active": "Active",
+    "keyboard_capture_description": "Capture browser shortcuts (Cmd/Ctrl+Tab, Alt+Tab) and send them to the remote machine",
+    "keyboard_capture_disabled": "Keyboard Capture disabled",
+    "keyboard_capture_enabled": "Keyboard Capture enabled",
+    "keyboard_capture_fullscreen_hint": "Enter fullscreen to capture all keyboard shortcuts including Alt+Tab",
+    "keyboard_capture_limited": "Limited",
+    "keyboard_capture_title": "Keyboard Capture",
     "keyboard_description": "为您的设备配置键盘相关设置。",
     "keyboard_layout_description": "目标操作系统的键盘布局。",
     "keyboard_layout_error": "设置键盘布局失败：{error}",

ui/src/components/ActionBar.tsx

@@ -1,12 +1,21 @@
 import { Fragment, useCallback, useRef } from "react";
 import { MdOutlineContentPasteGo } from "react-icons/md";
-import { LuCable, LuHardDrive, LuMaximize, LuSettings, LuSignal } from "react-icons/lu";
+import {
+  LuCable,
+  LuHardDrive,
+  LuLock,
+  LuLockOpen,
+  LuMaximize,
+  LuSettings,
+  LuSignal,
+} from "react-icons/lu";
 import { FaKeyboard } from "react-icons/fa6";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { CommandLineIcon } from "@heroicons/react/20/solid";
 
 import { cx } from "@/cva.config";
 import { useHidStore, useMountMediaStore, useSettingsStore, useUiStore } from "@hooks/stores";
+import notifications from "@/notifications";
 import { useDeviceUiNavigation } from "@hooks/useAppNavigation";
 import { Button } from "@components/Button";
 import Container from "@components/Container";
@@ -26,7 +35,7 @@ export default function Actionbar({
   const { setDisableVideoFocusTrap, terminalType, setTerminalType, toggleSidebarView } =
     useUiStore();
   const { remoteVirtualMediaState } = useMountMediaStore();
-  const { developerMode } = useSettingsStore();
+  const { developerMode, keyboardCaptureMode, setKeyboardCaptureMode } = useSettingsStore();
 
   // This is the only way to get a reliable state change for the popover
   // at time of writing this there is no mount, or unmount event for the popover
@@ -188,6 +197,21 @@ export default function Actionbar({
               </PopoverPanel>
             </Popover>
           </div>
+          <div className="hidden lg:block">
+            <Button
+              size="XS"
+              theme={keyboardCaptureMode ? "primary" : "light"}
+              text={m.keyboard_capture_title()}
+              LeadingIcon={keyboardCaptureMode ? LuLock : LuLockOpen}
+              onClick={() => {
+                const newState = !keyboardCaptureMode;
+                setKeyboardCaptureMode(newState);
+                notifications.success(
+                  newState ? m.keyboard_capture_enabled() : m.keyboard_capture_disabled(),
+                );
+              }}
+            />
+          </div>
           <div className="hidden lg:block">
             <Button
               size="XS"

ui/src/components/InfoBar.tsx

@@ -5,6 +5,7 @@ import {
   useMouseStore,
   useRTCStore,
   useSettingsStore,
+  useUiStore,
   useVideoStore,
   VideoState,
 } from "@hooks/stores";
@@ -26,7 +27,8 @@ export default function InfoBar() {
     (state: VideoState) => `${Math.round(state.width)}x${Math.round(state.height)}`,
   );
 
-  const { debugMode, mouseMode, showPressedKeys } = useSettingsStore();
+  const { debugMode, mouseMode, showPressedKeys, keyboardCaptureMode } = useSettingsStore();
+  const { isKeyboardLockActive } = useUiStore();
   const { isPasteInProgress } = useHidStore();
   const { keyboardLedState, usbState } = useHidStore();
   const { isTurnServerInUse } = useRTCStore();
@@ -114,6 +116,17 @@ export default function InfoBar() {
               </div>
             )}
 
+            {keyboardCaptureMode && (
+              <div className="flex items-center gap-x-1">
+                <span className="text-xs font-semibold">{m.keyboard_capture_title()}:</span>
+                <span className="text-xs">
+                  {isKeyboardLockActive
+                    ? m.keyboard_capture_active()
+                    : m.keyboard_capture_limited()}
+                </span>
+              </div>
+            )}
+
             {showPressedKeys && (
               <div className="flex items-center gap-x-1">
                 <span className="text-xs font-semibold">{m.info_keys()}</span>

ui/src/components/VideoOverlay.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/16/solid";
 import { motion, AnimatePresence } from "framer-motion";
-import { LuPlay } from "react-icons/lu";
+import { LuKeyboard, LuPlay } from "react-icons/lu";
 import { BsMouseFill } from "react-icons/bs";
 
 import { m } from "@localizations/messages.js";
@@ -395,6 +395,52 @@ export function PointerLockBar({ show }: PointerLockBarProps) {
   );
 }
 
+interface KeyboardCaptureBarProps {
+  readonly show: boolean;
+}
+
+export function KeyboardCaptureBar({ show }: KeyboardCaptureBarProps) {
+  // When show goes false, unmount inner component entirely.
+  // When show goes true, inner mounts fresh with visible=true and starts auto-dismiss timer.
+  return show ? <KeyboardCaptureBarInner /> : null;
+}
+
+function KeyboardCaptureBarInner() {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setVisible(false), 8000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <AnimatePresence mode="wait">
+      {visible ? (
+        <motion.div
+          className="flex w-full items-center justify-between bg-transparent"
+          initial={{ opacity: 0, zIndex: 0 }}
+          animate={{ opacity: 1, zIndex: 20 }}
+          exit={{ opacity: 0, zIndex: 0 }}
+          transition={{ duration: 0.5, ease: "easeInOut", delay: 0.5 }}
+        >
+          <div>
+            <Card className="rounded-b-none shadow-none outline-0!">
+              <div className="flex items-center justify-between border border-slate-800/50 px-4 py-2 outline-0 backdrop-blur-xs dark:border-slate-300/20 dark:bg-slate-800">
+                <div className="flex items-center space-x-2">
+                  <LuKeyboard className="h-4 w-4 text-blue-700 dark:text-blue-500" />
+                  <span className="text-sm text-black dark:text-white">
+                    {m.keyboard_capture_fullscreen_hint()}
+                  </span>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
+
 interface RebootingOverlayProps {
   readonly show: boolean;
   readonly postRebootAction: PostRebootAction;