release: nanokvm@2.3.4

feat: support keyboard leader key functionality
chore: added image version number v1.4.2
2026-11-13 03:15:51 -06:00 · 2026-01-26 17:56:52 +08:00 · 2026-01-26 17:10:16 +08:00 · 2026-01-26 11:23:17 +08:00 · 2026-01-26 11:12:19 +08:00 · 2026-01-26 10:46:57 +08:00
37 changed files with 1582 additions and 265 deletions
--- a/.github/workflows/issue-tracker.yml
+++ b/.github/workflows/issue-tracker.yml
@@ -2,7 +2,7 @@ name: Issue Tracker

 on:
  issues:
-    types: [opened, reopened]
+    types: [opened, reopened, closed]

 jobs:
  track-issue:
@@ -28,8 +28,10 @@ jobs:
            --arg state "${{ github.event.issue.state }}" \
            --arg created_at "${{ github.event.issue.created_at }}" \
            --arg updated_at "${{ github.event.issue.updated_at }}" \
+            --arg closed_at "${{ github.event.issue.closed_at }}" \
            --arg url "${{ github.event.issue.html_url }}" \
            --arg user_login "${{ github.event.issue.user.login }}" \
+            --arg repository "${{ github.repository }}" \
            --argjson labels "$RAW_LABELS" \
            --argjson assignees "$RAW_ASSIGNEES" \
            '{
@@ -42,11 +44,13 @@ jobs:
                state: $state,
                created_at: $created_at,
                updated_at: $updated_at,
+                closed_at: $closed_at,
                url: $url,
                user: { login: $user_login },
                labels: $labels,
                assignees: $assignees
-              }
+              },
+              repository: { name: $repository },
            }')

          RESPONSE=$(curl -s -w "\n%{http_code}" -X POST "$API_URL" \
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,42 @@
-## 2.3.2 (2025-01-08)
+## 2.3.4 (2026-01-26)
+
+### Features
+
+* Introduced `Leader Key` functionality to bypass local browser shortcut interception
+
+### Bug Fixes
+
+* Fixed an issue where the Right Shift key was not being recognized on Windows system
+* Fixed a bug where the menu bar would fail to close correctly
+
+### Localization
+
+* Updated Traditional Chinese translations (thanks to [@j796160836](https://github.com/j796160836))
+* Updated Korean translations (thanks to [@kmw0410](https://github.com/kmw0410))
+
+## 2.3.3 (2026-01-16)
+
+### Features
+
+* Added support for setting the display mode of the menu bar
+
+### Bug Fixes
+
+* Fixed a keyboard issue where IME composition events were not handled correctly
+* Resolved an issue where the `AltGr` key was not recognized on the Windows system
+* Fixed a bug where `Command` key combinations were not fully released on the macOS system
+* Fixed input issues with the `IntlBackslash` key on the German virtual keyboard
+
+### Localization
+
+* Updated Korean translations (thanks to [@kmw0410](https://github.com/kmw0410))
+
+### Chores
+
+* Bump react-router-dom from 6.27.0 to 6.30.3
+* Updated eslint
+
+## 2.3.2 (2026-01-08)

 ### Features

--- a/server/proto/hid.go
+++ b/server/proto/hid.go
@@ -29,3 +29,11 @@ type AddShortcutReq struct {
 type DeleteShortcutReq struct {
 	ID string `validate:"required"`
 }
+
+type SetLeaderKeyReq struct {
+	Key string `validate:"omitempty"`
+}
+
+type GetLeaderKeyRsp struct {
+	Key string `json:"key"`
+}
--- a/server/router/hid.go
+++ b/server/router/hid.go
@@ -17,6 +17,9 @@ func hidRouter(r *gin.Engine) {
 	api.POST("/hid/shortcut", service.AddShortcut)      // add shortcut
 	api.DELETE("/hid/shortcut", service.DeleteShortcut) // delete shortcut

+	api.GET("/hid/shortcut/leader-key", service.GetLeaderKey)  // set shortcut leader key
+	api.POST("/hid/shortcut/leader-key", service.SetLeaderKey) // set shortcut leader key
+
 	api.GET("/hid/mode", service.GetHidMode)  // get hid mode
 	api.POST("/hid/mode", service.SetHidMode) // set hid mode
 	api.POST("/hid/reset", service.ResetHid)  // reset hid
--- a/server/service/hid/leader_key.go
+++ b/server/service/hid/leader_key.go
@@ -0,0 +1,63 @@
+package hid
+
+import (
+	"os"
+	"strings"
+
+	"NanoKVM-Server/proto"
+	"github.com/gin-gonic/gin"
+	log "github.com/sirupsen/logrus"
+)
+
+const (
+	LeaderKeyFile = "/etc/kvm/leader-key"
+)
+
+func (s *Service) SetLeaderKey(c *gin.Context) {
+	var req proto.SetLeaderKeyReq
+	var rsp proto.Response
+
+	if err := proto.ParseFormRequest(c, &req); err != nil {
+		rsp.ErrRsp(c, -1, "invalid arguments")
+		return
+	}
+
+	if req.Key == "" {
+		err := os.Remove(LeaderKeyFile)
+		if err != nil && !os.IsNotExist(err) {
+			rsp.ErrRsp(c, -2, "reset failed")
+			return
+		}
+	} else {
+		err := os.WriteFile(LeaderKeyFile, []byte(req.Key), 0o644)
+		if err != nil {
+			rsp.ErrRsp(c, -3, "write failed")
+			return
+		}
+	}
+
+	rsp.OkRsp(c)
+	log.Debugf("set leader key: %s", req.Key)
+}
+
+func (s *Service) GetLeaderKey(c *gin.Context) {
+	var rsp proto.Response
+
+	data, err := os.ReadFile(LeaderKeyFile)
+	if err != nil {
+		if os.IsNotExist(err) {
+			rsp.OkRspWithData(c, &proto.GetLeaderKeyRsp{
+				Key: "",
+			})
+			return
+		}
+		rsp.ErrRsp(c, -1, "read leader key failed")
+		return
+	}
+
+	rsp.OkRspWithData(c, &proto.GetLeaderKeyRsp{
+		Key: strings.Replace(string(data), "\n", "", -1),
+	})
+
+	log.Debugf("get leader key successful")
+}
--- a/server/service/vm/info.go
+++ b/server/service/vm/info.go
@@ -1,11 +1,12 @@
 package vm

 import (
-	"NanoKVM-Server/config"
 	"fmt"
 	"os"
 	"strings"

+	"NanoKVM-Server/config"
+
 	"github.com/gin-gonic/gin"
 	log "github.com/sirupsen/logrus"

@@ -19,6 +20,7 @@ var imageVersionMap = map[string]string{
 	"2024-11-13-09-59-9c961a.img": "v1.3.0",
 	"2025-02-17-19-08-3649fe.img": "v1.4.0",
 	"2025-04-17-14-21-98d17d.img": "v1.4.1",
+	"2026-01-05-1_4_1.img":        "v1.4.2",
 }

 func (s *Service) GetInfo(c *gin.Context) {
--- a/web/.eslintrc.cjs
+++ b/web/.eslintrc.cjs
@@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-    'prettier',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    '@typescript-eslint/no-explicit-any': 'off',
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -0,0 +1,32 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
+
+export default tseslint.config(
+    { ignores: ['dist', 'public/mockServiceWorker.js'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            '@typescript-eslint/no-explicit-any': 'off',
+            'react-hooks/exhaustive-deps': 'warn',
+            'react-refresh/only-export-components': [
+                'warn',
+                { allowConstantExport: true },
+            ],
+        },
+    },
+    eslintConfigPrettier
+)
--- a/web/package.json
+++ b/web/package.json
@@ -7,7 +7,7 @@
    "dev": "vite",
    "mocked": "vite --mode mocked",
    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives",
    "preview": "vite preview"
  },
  "dependencies": {
@@ -31,7 +31,7 @@
    "react-helmet-async": "^2.0.5",
    "react-i18next": "^14.1.3",
    "react-responsive": "^10.0.0",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^6.30.3",
    "react-simple-keyboard": "^3.8.19",
    "semver": "^7.6.3",
    "vaul": "^0.9.9",
@@ -39,6 +39,7 @@
    "yocto-queue": "^1.2.1"
  },
  "devDependencies": {
+    "@eslint/js": "^9.39.2",
    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
    "@types/crypto-js": "^4.2.2",
    "@types/js-cookie": "^3.0.6",
@@ -55,12 +56,14 @@
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^17.0.0",
    "msw": "^2.6.0",
    "postcss": "^8.4.47",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.9",
    "tailwindcss": "^3.4.18",
    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.53.0",
    "vite": "7.1.11",
    "vite-tsconfig-paths": "^4.3.2"
  },
@@ -69,4 +72,4 @@
      "public"
    ]
  }
-}
+}
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -69,8 +69,8 @@ importers:
        specifier: ^10.0.0
        version: 10.0.0(react@18.3.1)
      react-router-dom:
-        specifier: ^6.27.0
-        version: 6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^6.30.3
+        version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      react-simple-keyboard:
        specifier: ^3.8.19
        version: 3.8.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -87,6 +87,9 @@ importers:
        specifier: ^1.2.1
        version: 1.2.1
    devDependencies:
+      '@eslint/js':
+        specifier: ^9.39.2
+        version: 9.39.2
      '@ianvs/prettier-plugin-sort-imports':
        specifier: ^4.7.0
        version: 4.7.0(prettier@3.4.2)
@@ -135,6 +138,9 @@ importers:
      eslint-plugin-react-refresh:
        specifier: ^0.4.16
        version: 0.4.16(eslint@9.39.1(jiti@1.21.7))
+      globals:
+        specifier: ^17.0.0
+        version: 17.0.0
      msw:
        specifier: ^2.6.0
        version: 2.6.0(@types/node@22.9.0)(typescript@5.6.3)
@@ -153,6 +159,9 @@ importers:
      typescript:
        specifier: ^5.6.3
        version: 5.6.3
+      typescript-eslint:
+        specifier: ^8.53.0
+        version: 8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)
      vite:
        specifier: 7.1.11
        version: 7.1.11(@types/node@22.9.0)(jiti@1.21.7)(yaml@2.6.0)
@@ -498,10 +507,20 @@ packages:
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0

+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
  '@eslint-community/regexpp@4.12.1':
    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}

+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
  '@eslint/config-array@0.21.1':
    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -522,6 +541,10 @@ packages:
    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@eslint/js@9.39.2':
+    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
  '@eslint/object-schema@2.1.7':
    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -959,8 +982,8 @@ packages:
      react: '>=16.9.0'
      react-dom: '>=16.9.0'

-  '@remix-run/router@1.20.0':
-    resolution: {integrity: sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==}
+  '@remix-run/router@1.23.2':
+    resolution: {integrity: sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==}
    engines: {node: '>=14.0.0'}

  '@rolldown/pluginutils@1.0.0-beta.27':
@@ -1138,6 +1161,14 @@ packages:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

+  '@typescript-eslint/eslint-plugin@8.53.0':
+    resolution: {integrity: sha512-eEXsVvLPu8Z4PkFibtuFJLJOTAV/nPdgtSjkGoPpddpFk3/ym2oy97jynY6ic2m6+nc5M8SE1e9v/mHKsulcJg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.53.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
  '@typescript-eslint/parser@8.48.0':
    resolution: {integrity: sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1145,22 +1176,45 @@ packages:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

+  '@typescript-eslint/parser@8.53.0':
+    resolution: {integrity: sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
  '@typescript-eslint/project-service@8.48.0':
    resolution: {integrity: sha512-Ne4CTZyRh1BecBf84siv42wv5vQvVmgtk8AuiEffKTUo3DrBaGYZueJSxxBZ8fjk/N3DrgChH4TOdIOwOwiqqw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

+  '@typescript-eslint/project-service@8.53.0':
+    resolution: {integrity: sha512-Bl6Gdr7NqkqIP5yP9z1JU///Nmes4Eose6L1HwpuVHwScgDPPuEWbUVhvlZmb8hy0vX9syLk5EGNL700WcBlbg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
  '@typescript-eslint/scope-manager@8.48.0':
    resolution: {integrity: sha512-uGSSsbrtJrLduti0Q1Q9+BF1/iFKaxGoQwjWOIVNJv0o6omrdyR8ct37m4xIl5Zzpkp69Kkmvom7QFTtue89YQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@typescript-eslint/scope-manager@8.53.0':
+    resolution: {integrity: sha512-kWNj3l01eOGSdVBnfAF2K1BTh06WS0Yet6JUgb9Cmkqaz3Jlu0fdVUjj9UI8gPidBWSMqDIglmEXifSgDT/D0g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
  '@typescript-eslint/tsconfig-utils@8.48.0':
    resolution: {integrity: sha512-WNebjBdFdyu10sR1M4OXTt2OkMd5KWIL+LLfeH9KhgP+jzfDV/LI3eXzwJ1s9+Yc0Kzo2fQCdY/OpdusCMmh6w==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

+  '@typescript-eslint/tsconfig-utils@8.53.0':
+    resolution: {integrity: sha512-K6Sc0R5GIG6dNoPdOooQ+KtvT5KCKAvTcY8h2rIuul19vxH5OTQk7ArKkd4yTzkw66WnNY0kPPzzcmWA+XRmiA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
  '@typescript-eslint/type-utils@8.48.0':
    resolution: {integrity: sha512-zbeVaVqeXhhab6QNEKfK96Xyc7UQuoFWERhEnj3mLVnUWrQnv15cJNseUni7f3g557gm0e46LZ6IJ4NJVOgOpw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1168,16 +1222,33 @@ packages:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

+  '@typescript-eslint/type-utils@8.53.0':
+    resolution: {integrity: sha512-BBAUhlx7g4SmcLhn8cnbxoxtmS7hcq39xKCgiutL3oNx1TaIp+cny51s8ewnKMpVUKQUGb41RAUWZ9kxYdovuw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
  '@typescript-eslint/types@8.48.0':
    resolution: {integrity: sha512-cQMcGQQH7kwKoVswD1xdOytxQR60MWKM1di26xSUtxehaDs/32Zpqsu5WJlXTtTTqyAVK8R7hvsUnIXRS+bjvA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@typescript-eslint/types@8.53.0':
+    resolution: {integrity: sha512-Bmh9KX31Vlxa13+PqPvt4RzKRN1XORYSLlAE+sO1i28NkisGbTtSLFVB3l7PWdHtR3E0mVMuC7JilWJ99m2HxQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
  '@typescript-eslint/typescript-estree@8.48.0':
    resolution: {integrity: sha512-ljHab1CSO4rGrQIAyizUS6UGHHCiAYhbfcIZ1zVJr5nMryxlXMVWS3duFPSKvSUbFPwkXMFk1k0EMIjub4sRRQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

+  '@typescript-eslint/typescript-estree@8.53.0':
+    resolution: {integrity: sha512-pw0c0Gdo7Z4xOG987u3nJ8akL9093yEEKv8QTJ+Bhkghj1xyj8cgPaavlr9rq8h7+s6plUJ4QJYw2gCZodqmGw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
  '@typescript-eslint/utils@8.48.0':
    resolution: {integrity: sha512-yTJO1XuGxCsSfIVt1+1UrLHtue8xz16V8apzPYI06W0HbEbEWHxHXgZaAgavIkoh+GeV6hKKd5jm0sS6OYxWXQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1185,10 +1256,21 @@ packages:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

+  '@typescript-eslint/utils@8.53.0':
+    resolution: {integrity: sha512-XDY4mXTez3Z1iRDI5mbRhH4DFSt46oaIFsLg+Zn97+sYrXACziXSQcSelMybnVZ5pa1P6xYkPr5cMJyunM1ZDA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
  '@typescript-eslint/visitor-keys@8.48.0':
    resolution: {integrity: sha512-T0XJMaRPOH3+LBbAfzR2jalckP1MSG/L9eUtY0DEzUyVaXJ/t6zN0nR7co5kz0Jko/nkSYCBRkz1djvjajVTTg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@typescript-eslint/visitor-keys@8.53.0':
+    resolution: {integrity: sha512-LZ2NqIHFhvFwxG0qZeLL9DvdNAHPGCY5dIRwBhyYeU+LfLhcStE1ImjsuTG/WaVh3XysGaeLW8Rqq7cGkPCFvw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
  '@vitejs/plugin-react@4.7.0':
    resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
    engines: {node: ^14.18.0 || >=16.0.0}
@@ -1787,6 +1869,10 @@ packages:
    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
    engines: {node: '>=18'}

+  globals@17.0.0:
+    resolution: {integrity: sha512-gv5BeD2EssA793rlFWVPMMCqefTlpusw6/2TbAVMy0FzcG8wKJn4O+NqJ4+XWmmwrayJgw5TzrmWjFgmz1XPqw==}
+    engines: {node: '>=18'}
+
  globalthis@1.0.4:
    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
    engines: {node: '>= 0.4'}
@@ -2705,15 +2791,15 @@ packages:
    peerDependencies:
      react: '>=16.8.0'

-  react-router-dom@6.27.0:
-    resolution: {integrity: sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==}
+  react-router-dom@6.30.3:
+    resolution: {integrity: sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      react: '>=16.8'
      react-dom: '>=16.8'

-  react-router@6.27.0:
-    resolution: {integrity: sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==}
+  react-router@6.30.3:
+    resolution: {integrity: sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      react: '>=16.8'
@@ -2814,6 +2900,11 @@ packages:
    engines: {node: '>=10'}
    hasBin: true

+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
  set-function-length@1.2.2:
    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
    engines: {node: '>= 0.4'}
@@ -2941,6 +3032,12 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4'

+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
  ts-interface-checker@0.1.13:
    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}

@@ -2991,6 +3088,13 @@ packages:
  typedarray-to-buffer@3.1.5:
    resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}

+  typescript-eslint@8.53.0:
+    resolution: {integrity: sha512-xHURCQNxZ1dsWn0sdOaOfCSQG0HKeqSj9OexIxrz6ypU6wHYOdX2I3D2b8s8wFSsSOYJb+6q283cLiLlkEsBYw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
  typescript@5.6.3:
    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
    engines: {node: '>=14.17'}
@@ -3498,8 +3602,15 @@ snapshots:
      eslint: 9.39.1(jiti@1.21.7)
      eslint-visitor-keys: 3.4.3

+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.1(jiti@1.21.7))':
+    dependencies:
+      eslint: 9.39.1(jiti@1.21.7)
+      eslint-visitor-keys: 3.4.3
+
  '@eslint-community/regexpp@4.12.1': {}

+  '@eslint-community/regexpp@4.12.2': {}
+
  '@eslint/config-array@0.21.1':
    dependencies:
      '@eslint/object-schema': 2.1.7
@@ -3532,6 +3643,8 @@ snapshots:

  '@eslint/js@9.39.1': {}

+  '@eslint/js@9.39.2': {}
+
  '@eslint/object-schema@2.1.7': {}

  '@eslint/plugin-kit@0.4.1':
@@ -3933,7 +4046,7 @@ snapshots:
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)

-  '@remix-run/router@1.20.0': {}
+  '@remix-run/router@1.23.2': {}

  '@rolldown/pluginutils@1.0.0-beta.27': {}

@@ -4078,6 +4191,22 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@typescript-eslint/eslint-plugin@8.53.0(@typescript-eslint/parser@8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3))(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.53.0
+      '@typescript-eslint/type-utils': 8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.53.0
+      eslint: 9.39.1(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.6.3)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
  '@typescript-eslint/parser@8.48.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)':
    dependencies:
      '@typescript-eslint/scope-manager': 8.48.0
@@ -4090,6 +4219,18 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@typescript-eslint/parser@8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.53.0
+      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/typescript-estree': 8.53.0(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.53.0
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@1.21.7)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
  '@typescript-eslint/project-service@8.48.0(typescript@5.6.3)':
    dependencies:
      '@typescript-eslint/tsconfig-utils': 8.48.0(typescript@5.6.3)
@@ -4099,15 +4240,33 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@typescript-eslint/project-service@8.53.0(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.53.0(typescript@5.6.3)
+      '@typescript-eslint/types': 8.53.0
+      debug: 4.4.3
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
  '@typescript-eslint/scope-manager@8.48.0':
    dependencies:
      '@typescript-eslint/types': 8.48.0
      '@typescript-eslint/visitor-keys': 8.48.0

+  '@typescript-eslint/scope-manager@8.53.0':
+    dependencies:
+      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/visitor-keys': 8.53.0
+
  '@typescript-eslint/tsconfig-utils@8.48.0(typescript@5.6.3)':
    dependencies:
      typescript: 5.6.3

+  '@typescript-eslint/tsconfig-utils@8.53.0(typescript@5.6.3)':
+    dependencies:
+      typescript: 5.6.3
+
  '@typescript-eslint/type-utils@8.48.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)':
    dependencies:
      '@typescript-eslint/types': 8.48.0
@@ -4120,8 +4279,22 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@typescript-eslint/type-utils@8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/typescript-estree': 8.53.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.6.3)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
  '@typescript-eslint/types@8.48.0': {}

+  '@typescript-eslint/types@8.53.0': {}
+
  '@typescript-eslint/typescript-estree@8.48.0(typescript@5.6.3)':
    dependencies:
      '@typescript-eslint/project-service': 8.48.0(typescript@5.6.3)
@@ -4137,6 +4310,21 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@typescript-eslint/typescript-estree@8.53.0(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.53.0(typescript@5.6.3)
+      '@typescript-eslint/tsconfig-utils': 8.53.0(typescript@5.6.3)
+      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/visitor-keys': 8.53.0
+      debug: 4.4.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.6.3)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
  '@typescript-eslint/utils@8.48.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)':
    dependencies:
      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@1.21.7))
@@ -4148,11 +4336,27 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@typescript-eslint/utils@8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.1(jiti@1.21.7))
+      '@typescript-eslint/scope-manager': 8.53.0
+      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/typescript-estree': 8.53.0(typescript@5.6.3)
+      eslint: 9.39.1(jiti@1.21.7)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
  '@typescript-eslint/visitor-keys@8.48.0':
    dependencies:
      '@typescript-eslint/types': 8.48.0
      eslint-visitor-keys: 4.2.1

+  '@typescript-eslint/visitor-keys@8.53.0':
+    dependencies:
+      '@typescript-eslint/types': 8.53.0
+      eslint-visitor-keys: 4.2.1
+
  '@vitejs/plugin-react@4.7.0(vite@7.1.11(@types/node@22.9.0)(jiti@1.21.7)(yaml@2.6.0))':
    dependencies:
      '@babel/core': 7.28.5
@@ -4952,6 +5156,8 @@ snapshots:

  globals@14.0.0: {}

+  globals@17.0.0: {}
+
  globalthis@1.0.4:
    dependencies:
      define-properties: 1.2.1
@@ -5833,16 +6039,16 @@ snapshots:
      react: 18.3.1
      shallow-equal: 3.1.0

-  react-router-dom@6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router-dom@6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
    dependencies:
-      '@remix-run/router': 1.20.0
+      '@remix-run/router': 1.23.2
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)
-      react-router: 6.27.0(react@18.3.1)
+      react-router: 6.30.3(react@18.3.1)

-  react-router@6.27.0(react@18.3.1):
+  react-router@6.30.3(react@18.3.1):
    dependencies:
-      '@remix-run/router': 1.20.0
+      '@remix-run/router': 1.23.2
      react: 18.3.1

  react-simple-keyboard@3.8.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -5969,6 +6175,8 @@ snapshots:

  semver@7.6.3: {}

+  semver@7.7.3: {}
+
  set-function-length@1.2.2:
    dependencies:
      define-data-property: 1.1.4
@@ -6141,6 +6349,10 @@ snapshots:
    dependencies:
      typescript: 5.6.3

+  ts-api-utils@2.4.0(typescript@5.6.3):
+    dependencies:
+      typescript: 5.6.3
+
  ts-interface-checker@0.1.13: {}

  tsconfck@3.1.4(typescript@5.6.3):
@@ -6195,6 +6407,17 @@ snapshots:
    dependencies:
      is-typedarray: 1.0.0

+  typescript-eslint@8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.53.0(@typescript-eslint/parser@8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3))(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.53.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.53.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.6.3)
+      eslint: 9.39.1(jiti@1.21.7)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
  typescript@5.6.3: {}

  unbox-primitive@1.0.2:
--- a/web/src/api/hid.ts
+++ b/web/src/api/hid.ts
@@ -43,3 +43,13 @@ export function deleteShortcut(id: string) {
  };
  return http.delete('/api/hid/shortcut', data);
 }
+
+// get shortcut leader key
+export function getLeaderKey() {
+  return http.get('/api/hid/shortcut/leader-key');
+}
+
+// set shortcut leader key
+export function setLeaderKey(key: string) {
+  return http.post('/api/hid/shortcut/leader-key', { key });
+}
--- a/web/src/hooks/useMenuBounds.ts
+++ b/web/src/hooks/useMenuBounds.ts
@@ -0,0 +1,55 @@
+import { RefObject, useCallback, useEffect, useState } from 'react';
+import { useAtomValue } from 'jotai';
+
+import { menuDisabledItemsAtom } from '@/jotai/settings.ts';
+
+export interface MenuBounds {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+export function useMenuBounds(
+  nodeRef: RefObject<HTMLDivElement | null>,
+  isMenuExpanded: boolean
+): MenuBounds {
+  const menuDisabledItems = useAtomValue(menuDisabledItemsAtom);
+  const [menuBounds, setMenuBounds] = useState<MenuBounds>({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  });
+
+  const handleResize = useCallback(() => {
+    if (!nodeRef.current) return;
+
+    const elementRect = nodeRef.current.getBoundingClientRect();
+    const width = (window.innerWidth - elementRect.width) / 2;
+
+    setMenuBounds({
+      left: -width,
+      top: -10,
+      right: width,
+      bottom: window.innerHeight - elementRect.height - 10
+    });
+  }, [nodeRef]);
+
+  // Update bounds on mount and resize
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+
+  // Update bounds when menu items or expansion state change
+  useEffect(() => {
+    handleResize();
+  }, [menuDisabledItems, isMenuExpanded, handleResize]);
+
+  return menuBounds;
+}
--- a/web/src/hooks/useMenuVisibility.ts
+++ b/web/src/hooks/useMenuVisibility.ts
@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+
+import { getMenuDisabledItems, getMenuDisplayMode } from '@/lib/localstorage.ts';
+import {
+  menuDisabledItemsAtom,
+  menuDisplayModeAtom,
+  submenuOpenCountAtom
+} from '@/jotai/settings.ts';
+
+const HIDE_TIMEOUT = 5000;
+
+export interface MenuVisibilityState {
+  isInitialized: boolean;
+  isMenuExpanded: boolean;
+  isMenuHidden: boolean;
+  isMenuMoved: boolean;
+  handleHovered: (hovered: boolean) => void;
+  handleMoved: () => void;
+  setIsMenuExpanded: (expanded: boolean) => void;
+}
+
+export function useMenuVisibility(): MenuVisibilityState {
+  const [menuDisplayMode, setMenuDisplayMode] = useAtom(menuDisplayModeAtom);
+  const setMenuDisabledItems = useSetAtom(menuDisabledItemsAtom);
+  const submenuOpenCount = useAtomValue(submenuOpenCountAtom);
+
+  const [isMenuExpanded, setIsMenuExpanded] = useState(true);
+  const [isMenuMoved, setIsMenuMoved] = useState(false);
+  const [isMenuHovered, setIsMenuHovered] = useState(false);
+  const [isMenuHidden, setIsMenuHidden] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const startCountdown = useCallback(() => {
+    if (menuDisplayMode !== 'auto' || submenuOpenCount > 0 || !isMenuExpanded || isMenuMoved) {
+      return;
+    }
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(() => {
+      setIsMenuHidden(true);
+    }, HIDE_TIMEOUT);
+  }, [menuDisplayMode, submenuOpenCount, isMenuExpanded, isMenuMoved]);
+
+  const stopCountdown = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  // Initialize menu settings
+  useEffect(() => {
+    const displayMode = getMenuDisplayMode();
+    setMenuDisplayMode(displayMode);
+
+    const items = getMenuDisabledItems();
+    setMenuDisabledItems(items);
+
+    if (displayMode === 'off') {
+      setIsMenuExpanded(false);
+    }
+
+    setIsInitialized(true);
+
+    return () => {
+      stopCountdown();
+    };
+  }, []);
+
+  // Handle display mode changes
+  useEffect(() => {
+    setIsMenuHidden(false);
+
+    if (menuDisplayMode === 'auto') {
+      startCountdown();
+    } else {
+      stopCountdown();
+    }
+  }, [menuDisplayMode, startCountdown, stopCountdown]);
+
+  // Handle hover and submenu state
+  useEffect(() => {
+    if (submenuOpenCount === 0 && !isMenuHovered) {
+      startCountdown();
+    } else {
+      stopCountdown();
+    }
+  }, [submenuOpenCount, isMenuHovered, startCountdown, stopCountdown]);
+
+  // Handle hover state
+  const handleHovered = useCallback((hovered: boolean) => {
+    setIsMenuHovered(hovered);
+    if (hovered) {
+      setIsMenuHidden(false);
+    }
+  }, []);
+
+  const handleMoved = useCallback(() => {
+    if (!isMenuMoved) {
+      setIsMenuMoved(true);
+    }
+  }, [isMenuMoved]);
+
+  return {
+    isMenuExpanded,
+    isMenuHidden,
+    isMenuMoved,
+    isInitialized,
+    handleHovered,
+    handleMoved,
+    setIsMenuExpanded
+  };
+}
--- a/web/src/i18n/locales/en.ts
+++ b/web/src/i18n/locales/en.ts
@@ -92,6 +92,34 @@ const en = {
        captureTips:
          'Capturing system-level keys (such as the Windows key) requires full-screen permission.',
        enterFullScreen: 'Toggle full-screen mode.'
+      },
+      leaderKey: {
+        title: 'Leader Key',
+        desc: 'Bypass browser restrictions and send system shortcuts directly to the remote host.',
+        howToUse: 'How to Use',
+        simultaneous: {
+          title: 'Simultaneous Mode',
+          desc1: 'Press and hold the Leader Key, then press the shortcut.',
+          desc2: 'Intuitive, but may conflict with system shortcuts.'
+        },
+        sequential: {
+          title: 'Sequential Mode',
+          desc1:
+            'Press the Leader Key → press the shortcut in sequence → press the Leader Key again.',
+          desc2: 'Requires more steps, but completely avoids system conflicts.'
+        },
+        enable: 'Enable Leader Key',
+        tip: 'When assigned as a Leader Key, this key functions exclusively as a shortcut trigger and loses its default behavior.',
+        placeholder: 'Please press the Leader Key',
+        shiftRight: 'Right Shift',
+        ctrlRight: 'Right Ctrl',
+        metaRight: 'Right Win',
+        submit: 'Submit',
+        recorder: {
+          rec: 'REC',
+          activate: 'Activate keys',
+          input: 'Please press the shortcut...'
+        }
      }
    },
    mouse: {
@@ -243,10 +271,18 @@ const en = {
        display: 'Display',
        language: 'Language',
        languageDesc: 'Select the language for the interface',
-        menuBar: 'Menu Bar',
-        menuBarDesc: 'Display icons in the menu bar',
        webTitle: 'Web Title',
-        webTitleDesc: 'Customize the web page title'
+        webTitleDesc: 'Customize the web page title',
+        menuBar: {
+          title: 'Menu Bar',
+          mode: 'Display Mode',
+          modeDesc: 'Display menu bar on the screen',
+          modeOff: 'Off',
+          modeAuto: 'Auto hide',
+          modeAlways: 'Always visible',
+          icons: 'Submenu Icons',
+          iconsDesc: 'Display submenu icons in the menu bar'
+        }
      },
      device: {
        title: 'Device',
--- a/web/src/i18n/locales/ko.ts
+++ b/web/src/i18n/locales/ko.ts
@@ -217,10 +217,19 @@ const ko = {
        title: '디자인',
        display: '표시',
        language: '언어',
-        menuBar: '메뉴 바',
-        menuBarDesc: '메뉴 바에 아이콘을 표시',
+        languageDesc: '인터페이스 언어를 선택하세요',
        webTitle: '웹 제목',
-        webTitleDesc: '웹 페이지 제목 사용자 지정'
+        webTitleDesc: '웹 페이지 제목 사용자 지정',
+        menuBar: {
+          title: '메뉴 바',
+          mode: '표시 모드',
+          modeDesc: '메뉴 바를 화면에 표시합니다',
+          modeOff: '꺼짐',
+          modeAuto: '자동 숨기기',
+          modeAlways: '항상 보이기',
+          icons: '하위 메뉴 아이콘',
+          iconsDesc: '메뉴 바에 하위 메뉴 아이콘을 표시합니다'
+        }
      },
      device: {
        title: '장치',
@@ -336,7 +345,14 @@ const ko = {
        cancel: '취소',
        preview: '미리보기 업데이트',
        previewDesc: '새로운 기능과 개선 사항에 미리 접근하세요',
-        previewTip: '미리보기 버전에는 버그나 완성되지 않은 기능이 포함될 수 있으니 주의하세요!'
+        previewTip: '미리보기 버전에는 버그나 완성되지 않은 기능이 포함될 수 있으니 주의하세요!',
+        offline: {
+          title: '오프라인 업데이트',
+          desc: '로컬 설치 패키지를 통한 업데이트',
+          upload: '업로드',
+          invalidName: '유효하지 않은 파일 이름 형식입니다. GitHub 릴리즈에서 다운로드하세요.',
+          updateFailed: '업데이트에 실패했습니다. 재시도하세요.'
+        }
      },
      account: {
        title: '계정',
--- a/web/src/i18n/locales/tr.ts
+++ b/web/src/i18n/locales/tr.ts
@@ -94,7 +94,7 @@ const tr = {
      resetHid: 'İnsan Arayüz Cihazı\'nı sıfırlayın',
      hidOnly: {
        title: 'Sadece İnsan Arayüz Cihazı modu',
-        desc: "Eğer fare ve klavye çalışmayı bırakırsa ve İnsan Arayüz Cihazı\'nı sıfırlamak sorunu çözmezse bunun sebebi cihazınız ve NanoKVM arasındaki bir uyumluluk sorunu olabilir. Uyumluluğu arttırmak için Sadece İnsan Arayüz Cihazı modunu kullanın.",
+        desc: "Eğer fare ve klavye çalışmayı bırakırsa ve İnsan Arayüz Cihazı'nı sıfırlamak sorunu çözmezse bunun sebebi cihazınız ve NanoKVM arasındaki bir uyumluluk sorunu olabilir. Uyumluluğu arttırmak için Sadece İnsan Arayüz Cihazı modunu kullanın.",
        tip1: 'Sadece İnsan Arayüz Cihazı modunu aktifleştirmek, sanal U-disk’i ve sanal ağı devre dışı bırakacaktır.',
        tip2: 'Sadece İnsan Arayüz Cihazı modunda disk imajı bağlama özelliği devre dışı bırakılır',
        tip3: 'NanoKVM mod değişiminden sonra kendiliğinden yeniden başlatılacaktır',
--- a/web/src/i18n/locales/zh.ts
+++ b/web/src/i18n/locales/zh.ts
@@ -81,6 +81,33 @@ const zh = {
        save: '保存',
        captureTips: '捕获系统级按键（如 Windows 键）需要全屏权限。',
        enterFullScreen: '切换全屏模式。'
+      },
+      leaderKey: {
+        title: '引导键',
+        desc: '绕过浏览器限制，向远程主机发送被系统拦截的快捷键。',
+        howToUse: '使用方法',
+        simultaneous: {
+          title: '组合按键模式',
+          desc1: '按住引导键不放，同时按下目标快捷键。',
+          desc2: '操作直观，但少数快捷键可能因系统占用而无法生效。'
+        },
+        sequential: {
+          title: '序列输入模式',
+          desc1: '点击【引导键】开始 → 依次点击【快捷键】→ 点击【引导键】结束。',
+          desc2: '步骤较多，但能完美避开系统键位冲突。'
+        },
+        enable: '启用引导键',
+        tip: '设为引导键后，该按键将仅用于触发快捷键，不再作为普通按键使用。',
+        placeholder: '请按下引导键',
+        shiftRight: '右 Shift',
+        ctrlRight: '右 Ctrl',
+        metaRight: '右 Win',
+        submit: '确定',
+        recorder: {
+          rec: '录制中',
+          activate: '激活按键',
+          input: '请按下快捷键...'
+        }
      }
    },
    mouse: {
@@ -212,10 +239,18 @@ const zh = {
        display: '显示',
        language: '语言',
        languageDesc: '选择界面语言',
-        menuBar: '菜单栏',
-        menuBarDesc: '是否在菜单栏中显示图标',
        webTitle: '网页标题',
-        webTitleDesc: '自定义网站页面标题'
+        webTitleDesc: '自定义网站页面标题',
+        menuBar: {
+          title: '菜单栏',
+          mode: '显示方式',
+          modeDesc: '菜单栏在屏幕上的显示方式',
+          modeOff: '关闭',
+          modeAuto: '自动隐藏',
+          modeAlways: '始终显示',
+          icons: '菜单图标',
+          iconsDesc: '是否在菜单栏中显示子菜单图标'
+        }
      },
      device: {
        title: '设备',
--- a/web/src/i18n/locales/zh_tw.ts
+++ b/web/src/i18n/locales/zh_tw.ts
@@ -14,7 +14,7 @@ const zh_tw = {
      placeholderPassword2: '請再次輸入密碼',
      noEmptyUsername: '使用者名稱不能為空',
      noEmptyPassword: '密碼不能為空',
-      noAccount: '取得使用者資訊失敗，請重新整理網頁或重設密碼',
+      noAccount: '找不到使用者，請重新整理網頁或重設密碼',
      invalidUser: '使用者名稱或密碼錯誤',
      error: '非預期性錯誤',
      changePassword: '更改密碼',
@@ -33,26 +33,28 @@ const zh_tw = {
        reset4: 'SSH 預設帳號：',
        change1: '請注意，此操作將同時更新下列密碼：',
        change2: '網頁登入密碼',
-        change3: 'root user密碼 (SSH登入密碼)',
+        change3: 'root user 密碼 (SSH登入密碼)',
        change4: '如果您忘記密碼，需要長按 NanoKVM 上的 BOOT 按鍵來重設密碼。'
      }
    },
    wifi: {
      title: 'Wi-Fi',
-      description: '設定 NanoKVM WiFi',
+      description: '設定 NanoKVM Wi-Fi',
      success: '請檢查 NanoKVM 的網路狀態，並存取新的 IP 位址。',
      failed: '操作失敗，請重試。',
+      invalidMode: '目前模式不支援設定網路。請先前往裝置啟用 Wi-Fi 配置模式。',
      confirmBtn: '確定',
      finishBtn: '完成'
    },
    screen: {
+      scale: '缩放',
      title: '螢幕',
      video: '編碼格式',
-      videoDirectTips: '本模式需先啟用HTTPS，請前往「設定 -> 設備」中開啟',
+      videoDirectTips: '本模式需先啟用 HTTPS，請前往「設定 -> 設備」中開啟',
      resolution: '解析度',
      auto: '自動',
      autoTips:
-        '在特定解析度下可能會出現畫面撕裂或滑鼠偏移的情況。考慮調整遠端主機的解析度或停用自動模式。',
+        '在某些特定解析度下可能會出現畫面撕裂或滑鼠偏移的情況。請調整遠端主機的解析度或停用自動模式。',
      fps: '更新頻率',
      customizeFps: '自定義',
      quality: '品質',
@@ -61,17 +63,26 @@ const zh_tw = {
      qualityMedium: '中',
      qualityLow: '低',
      frameDetect: '影格檢測',
-      frameDetectTip: '計算影格之間的差異。當遠端主機畫面未偵測到任何變更時，停止傳輸視訊串流。',
+      frameDetectTip: '計算影格之間的差異。當遠端主機畫面未偵測到任何變更時，停止視訊傳輸串流。',
      resetHdmi: '重置 HDMI'
    },
    keyboard: {
-      title: 'Keyboard',
+      title: '鍵盤',
      paste: '貼上',
-      tips: '僅支援標準鍵盤字母和符號',
+      tips: '僅支援標準鍵盤的字母和符號',
      placeholder: '請輸入內容',
      submit: '送出',
      virtual: '虛擬鍵盤',
-      ctrlaltdel: 'Ctrl+Alt+Del'
+      ctrlaltdel: 'Ctrl+Alt+Del',
+      shortcut: {
+        title: '快捷鍵',
+        custom: '自定義',
+        capture: '點選此處錄製快捷鍵',
+        clear: '清空',
+        save: '儲存',
+        captureTips: '錄製系統級按鍵（如 Windows 鍵）需要全螢幕的權限。',
+        enterFullScreen: '切換全螢幕模式。'
+      }
    },
    mouse: {
      title: '滑鼠',
@@ -85,53 +96,63 @@ const zh_tw = {
      mode: '滑鼠模式',
      absolute: '絕對模式',
      relative: '相對模式',
+      direction: '滾輪方向',
+      scrollUp: '向上',
+      scrollDown: '向下',
      speed: '滾輪速度',
      fast: '快',
      slow: '慢',
-      requestPointer: '使用相對模式。請按一下桌面以取得滑鼠游標。',
+      requestPointer: '正在使用滑鼠相對模式。請按一下桌面以取得滑鼠游標。',
      resetHid: '重設 HID',
      hidOnly: {
        title: 'HID-Only 模式',
-        desc: "如果您的滑鼠和鍵盤停止回應，且重設 HID 無效，可能是 NanoKVM 與裝置間的相容性問題。請嘗試啟用 HID-Only 模式以獲得更好的相容性。",
-        tip1: '啟用 HID-Only 模式將會卸載虛擬隨身碟和虛擬網卡',
-        tip2: '在 HID-Only 模式下，映像掛載功能將被停用',
+        desc: "如果您的滑鼠和鍵盤沒有反應，且重設 HID 無效，可能是 NanoKVM 與您的裝置間有相容性問題。請嘗試啟用 HID-Only 模式以獲得更好的相容性。",
+        tip1: '啟用 HID-Only 模式將會停用虛擬隨身碟和虛擬網卡的功能',
+        tip2: '在 HID-Only 模式下，映像檔掛載功能將被停用',
        tip3: 'NanoKVM 將在切換模式後自動重新啟動',
        enable: '啟用 HID-Only 模式',
        disable: '停用 HID-Only 模式'
      }
    },
    image: {
-      title: '映像',
+      title: '映像檔',
      loading: '載入中...',
      empty: '未找到任何內容',
      cdrom: '以CD-ROM模式掛載',
+      mountMode: '掛載模式',
      mountFailed: '掛載失敗',
-      mountDesc: '在某些系統中，在掛載映像之前需要中斷遠端主機上的虛擬磁碟。',
-      refresh: 'Refresh the image list',
+      mountDesc: '在某些系統中，需要在遠端主機中彈出虛擬硬碟後再掛載映像檔。',
+      unmountFailed: '解除安裝失敗',
+      unmountDesc: '在某些系統中，需要在遠端主機中手動彈出後再解除安裝映像。',
+      refresh: '重新整理映像檔列表',
+      attention: '注意',
+      deleteConfirm: '確定要刪除該映像檔嗎？',
+      okBtn: '確定',
+      cancelBtn: '取消',
      tips: {
        title: '如何上傳',
        usb1: '透過 USB 將 NanoKVM 連接到您的電腦。',
        usb2: '確保已安裝虛擬磁碟（設定 - 虛擬磁碟）。',
-        usb3: '開啟電腦上的虛擬磁碟，將映像檔案複製到虛擬磁碟的根目錄下。',
+        usb3: '開啟電腦上的虛擬磁碟，將映象檔案複製到虛擬磁碟的根目錄下。',
        scp1: '確保 NanoKVM 和您的電腦位於同一區域網路。',
        scp2: '開啟電腦上的終端機，使用 SCP 指令將映像檔案上傳到 NanoKVM 的 /data 目錄下。',
        scp3: '範例：scp your-image-path root@your-nanokvm-ip:/data',
        tfCard: 'microSD 卡',
        tf1: '此方法適用於 Linux 系統',
-        tf2: '從 NanoKVM 取得 microSD 卡（FULL 版本請先拆開外殼）。',
-        tf3: '將 microSD 卡插入讀卡機並連接至電腦。',
-        tf4: '將映像檔案複製到 microSD 卡的 /data 目錄下。',
-        tf5: '將 microSD 卡重新插入 NanoKVM。'
+        tf2: '從 NanoKVM 拔出 microSD 卡（FULL 版本請先拆開外殼）。',
+        tf3: '使用 USB 讀卡機將 microSD 卡連接至電腦。',
+        tf4: '將映像檔複製到 microSD 卡的 /data 目錄下。',
+        tf5: '將 microSD 卡重新插回 NanoKVM。'
      }
    },
    script: {
-      title: '腳本',
+      title: '指令碼',
      upload: '上傳',
      run: '執行',
      runBackground: '背景執行',
      runFailed: '執行失敗',
      attention: '注意',
-      delDesc: '確定刪除該檔案？',
+      delDesc: '確定要刪除該檔案嗎？',
      confirm: '確定',
      cancel: '取消',
      delete: '刪除',
@@ -164,22 +185,22 @@ const zh_tw = {
      ok: '確定'
    },
    download: {
-      title: '下载映像',
-      input: '請輸入映像檔的下載URL',
+      title: '下载映像檔',
+      input: '請輸入映像檔的下載 URL',
      ok: '確定',
      disabled: '/data 為唯讀目錄，無法下載映像檔'
    },
    power: {
-      title: '電源',
-      showConfirm: 'Confirmation',
-      showConfirmTip: 'Power operations require an extra confirmation',
+      title: '電源控制',
+      showConfirm: '顯示確認框',
+      showConfirmTip: '電源操作需要二次確認',
      reset: '重新啟動',
      power: '電源',
      powerShort: '電源 (短按)',
      powerLong: '電源 (長按)',
-      resetConfirm: '執行重新啟動按鍵操作?',
-      powerConfirm: '執行電源按鍵操作?',
-      okBtn: '是',
+      resetConfirm: '確認執行重新啟動的按鍵操作嗎？',
+      powerConfirm: '確認執行電源的按鍵操作嗎？',
+      okBtn: '確認',
      cancelBtn: '取消'
    },
    settings: {
@@ -191,8 +212,8 @@ const zh_tw = {
        mdns: 'mDNS',
        application: '應用程式版本',
        applicationTip: 'NanoKVM 網頁程式版本',
-        image: '映像版本',
-        imageTip: 'NanoKVM 系统镜像版本',
+        image: '韌體版本',
+        imageTip: 'NanoKVM 系统韌體版本',
        deviceKey: '設備序號',
        community: '社群',
        hostname: '主機名稱',
@@ -207,10 +228,20 @@ const zh_tw = {
        title: '外觀',
        display: '顯示',
        language: '語言',
-        menuBar: '選單列',
+        languageDesc: '選擇介面語言',
        menuBarDesc: '是否在選單列中顯示圖案',
        webTitle: '網頁標題',
-        webTitleDesc: '自訂網頁標題'
+        webTitleDesc: '自訂網頁標題',
+        menuBar: {
+          title: '選單列',
+          mode: '顯示方式',
+          modeDesc: '選單欄在螢幕上的顯示方式',
+          modeOff: '關閉',
+          modeAuto: '自動隱藏',
+          modeAlways: '始終顯示',
+          icons: '選單圖示',
+          iconsDesc: '是否在選單欄中顯示子選單圖示'
+        }
      },
      device: {
        title: '設備',
@@ -218,57 +249,80 @@ const zh_tw = {
          title: 'OLED',
          description: '設定 OLED 螢幕自動睡眠時間',
          0: '永不',
-          15: '15秒',
-          30: '30秒',
-          60: '1分鐘',
-          180: '3分鐘',
-          300: '5分鐘',
-          600: '10分鐘',
-          1800: '30分鐘',
-          3600: '1小時'
+          15: '15 秒',
+          30: '30 秒',
+          60: '1 分鐘',
+          180: '3 分鐘',
+          300: '5 分鐘',
+          600: '10 分鐘',
+          1800: '30 分鐘',
+          3600: '1 小時'
        },
        wifi: {
          title: 'Wi-Fi',
          description: '設定 Wi-Fi',
-          setBtn: '設定'
+          setBtn: '設定',
+          apMode: 'AP 模式已啟用，該模式下僅支援掃描 QRCode 配網',
+          connect: '連線 Wi-Fi',
+          connectDesc1: '請輸入網路名稱和密碼',
+          connectDesc2: '請輸入密碼以連線此網路',
+          disconnect: '是否要中斷該網路連線？',
+          failed: '連線失敗，請重試',
+          ssid: 'SSID 名稱',
+          password: '密碼',
+          joinBtn: '加入',
+          confirmBtn: '確定',
+          cancelBtn: '取消'
        },
        ssh: {
-          description: '啟用SSH',
+          description: '啟用 SSH 伺服器',
          tip: '啟用前請務必設定強密碼（帳號 - 更改密碼）'
        },
        tls: {
-          description: '啟用 HTTPS',
-          tip: '啟用 HTTPS 可以提高安全性，但可能會增加延遲，特別是使用 MJPEG 編碼格式時。'
+          description: '啟用 HTTPS 協議',
+          tip: '啟用 HTTPS 可以提高安全性，但可能會增加傳輸延遲，特別是使用 MJPEG 格式傳輸時。'
        },
        advanced: '進階設定',
        swap: {
          title: 'Swap',
          disable: '停用',
-          description: '設定Swap檔大小',
+          description: '設定 Swap 檔大小',
          tip: "啟用此功能可能會減少SD卡的使用壽命！"
        },
        mouseJiggler: {
-          title: 'Mouse Jiggler',
+          title: '滑鼠抖動模式 (Mouse Jiggler)',
          description: '避免遠端主機進入休眠狀態',
          disable: '停用',
          absolute: '絕對模式',
          relative: '相對模式'
        },
        mdns: {
-          description: '啟用mDNS服務',
+          description: '啟用 mDNS 發現服務',
          tip: "若無需求，建議關閉此功能"
        },
        hdmi: {
          description: '啟用 HDMI/螢幕 輸出'
        },
+        autostart: {
+          title: '啟動時指令碼設定',
+          description: '管理能夠在 NanoKVM 啟動時自動執行的相關指令碼',
+          new: '建立新指令碼',
+          deleteConfirm: '確定要刪除該檔案嗎？',
+          yes: '是',
+          no: '否',
+          scriptName: 'Script 名稱',
+          scriptContent: 'Script 內容',
+          settings: '設定'
+        },
        hidOnly: 'HID-Only 模式',
+        hidOnlyDesc: '該模式下不再打開虛擬隨身碟，僅保留基礎的 鍵盤/滑鼠 的控制功能。',
        disk: '虛擬隨身碟',
        diskDesc: '在遠端主機上連接虛擬隨身碟',
        network: '虛擬網卡',
        networkDesc: '在遠端主機上新增虛擬網卡',
        reboot: '重新啟動',
-        rebootDesc: '你確定要重新啟動 NanoKVM?',
-        okBtn: '是',
+        rebootDesc: '您確定要重新啟動 NanoKVM?',
+        okBtn: '確定',
        cancelBtn: '取消'
      },
      tailscale: {
@@ -278,6 +332,10 @@ const zh_tw = {
          tip: '當記憶體使用量超過限制時，會更積極的進行垃圾回收來嘗試釋放記憶體。若使用 Tailscale 建議設定為 50MB，於重啟 Tailscale 後生效。',
          disable: '關閉'
        },
+        swap: {
+          title: 'Swap',
+          tip: '如果啟用記憶體最佳化後依然存在問題，可以嘗試開啟 Swap。啟用後會將交換檔案設定為 256MB，可以在「設定 - 裝置」中修改該選項。'
+        },
        restart: '確定要重啟 Tailscale 嗎？',
        stop: '確定要停止 Tailscale 嗎？',
        stopDesc: '此操作將會登出帳號，並停止開機自動啟動。',
@@ -290,9 +348,11 @@ const zh_tw = {
        download: '下載',
        package: '安裝包',
        unzip: '並解壓縮它',
-        upTailscale: '將 Tailscale 上傳到 NanoKVM 目錄 /usr/bin/',
-        upTailscaled: '將 Tailscale 上傳到 NanoKVM 目錄 /usr/sbin/',
+        upTailscale: '將 Tailscale 上傳到 NanoKVM 的 /usr/bin/ 資料夾',
+        upTailscaled: '將 Tailscale 上傳到 NanoKVM 的 /usr/sbin/ 資料夾',
        refresh: '重新整理頁面',
+        notRunning: 'Tailscale 尚未執行',
+        run: '啟動',
        notLogin: '設備尚未綁定。請登入並將該裝置綁定到您的帳戶。',
        urlPeriod: '此網址有效期限為 10 分鐘',
        login: '登入',
@@ -302,24 +362,33 @@ const zh_tw = {
        deviceIP: '裝置 IP',
        account: '帳號',
        logout: '登出',
-        logoutDesc: '確認登出?',
+        logoutDesc: '確認要登出嗎？',
        uninstall: '移除 Tailscale',
+        uninstallDesc: '確定要解除安裝 Tailscale 嗎？',
+        reboot: '重啟',
+        rebootDesc: '您確定要重啟 NanoKVM 嗎？',
        okBtn: '確認',
        cancelBtn: '取消'
      },
      update: {
        title: '檢查更新',
-        queryFailed: '取得版本失敗',
+        queryFailed: '取得版本號失敗',
        updateFailed: '更新失敗。請重試。',
-        isLatest: '您已經擁有最新版本。',
-        available: '有可用更新。確定要更新嗎？',
-        updating: '正在更新。請稍等...',
+        isLatest: '您已經是最新版本。',
+        available: '發現有可用更新。您確定要更新嗎？',
+        updating: '更新中，請稍候...',
        confirm: '確定',
        cancel: '取消',
        preview: '預覽更新',
-        previewDesc: '搶先體驗新功能和改進',
-        previewTip:
-          '請注意，預覽版本可能包含錯誤或功能不完整！'
+        previewDesc: '預覽版本，搶先體驗新功能和改進',
+        previewTip: '請注意，預覽版本可能包含一些不穩定因素或未完善的功能！',
+        offline: {
+          title: '離線更新',
+          desc: '透過本地安裝包進行更新',
+          upload: '上傳',
+          invalidName: '檔名格式錯誤，請前往 GitHub 釋出頁下載安裝包。',
+          updateFailed: '更新失敗，請重試'
+        }
      },
      account: {
        title: '帳號',
@@ -327,9 +396,9 @@ const zh_tw = {
        password: '密碼',
        updateBtn: '修改',
        logoutBtn: '登出',
-        logoutDesc: '你確定要登出嗎?',
-        okBtn: '是',
-        cancelBtn: '取消'
+        logoutDesc: '您確定要登出嗎?',
+        confirm: '確定',
+        cancel: '取消'
      }
    },
    error: {
--- a/web/src/jotai/keyboard.ts
+++ b/web/src/jotai/keyboard.ts
@@ -5,3 +5,6 @@ export const isKeyboardEnableAtom = atom(true);

 // is the virtual keyboard opened
 export const isKeyboardOpenAtom = atom(false);
+
+// leader key code for bypassing browser shortcuts (empty string means disabled)
+export const leaderKeyAtom = atom('');
--- a/web/src/jotai/settings.ts
+++ b/web/src/jotai/settings.ts
@@ -8,3 +8,6 @@ export const submenuOpenCountAtom = atom(0);

 // web title
 export const webTitleAtom = atom('');
+
+// menu display mode: 'off' | 'auto' | 'always'
+export const menuDisplayModeAtom = atom<string>('auto');
--- a/web/src/lib/browser.ts
+++ b/web/src/lib/browser.ts
@@ -0,0 +1,61 @@
+export type System = 'Windows' | 'macOS' | 'Linux' | 'Unknown';
+
+export interface BrowserInfo {
+  os: System;
+  isChrome: boolean;
+}
+
+export function getOperatingSystem(): System {
+  if (typeof window === 'undefined') {
+    return 'Unknown';
+  }
+
+  if ('userAgentData' in navigator) {
+    // @ts-expect-error check userAgentData.platform
+    const platform = navigator.userAgentData?.platform?.toLowerCase();
+    if (platform) {
+      if (platform === 'windows') return 'Windows';
+      if (platform === 'macos') return 'macOS';
+      if (platform === 'linux' || platform === 'android') return 'Linux';
+    }
+  }
+
+  // Fallback to User Agent
+  const userAgent = navigator.userAgent;
+
+  if (/Win/i.test(userAgent)) return 'Windows';
+  if (/Mac|iPhone|iPod|iPad/i.test(userAgent)) return 'macOS';
+  if (/Linux|Android/i.test(userAgent)) return 'Linux';
+
+  return 'Unknown';
+}
+
+export function isChromeBrowser(): boolean {
+  if (typeof window === 'undefined' || !window.navigator) {
+    return false;
+  }
+
+  if ('userAgentData' in navigator) {
+    // @ts-expect-error userAgentData.brands
+    return navigator.userAgentData?.brands?.some(
+      (brand: any) => brand.brand === 'Google Chrome' || brand.brand === 'Chromium'
+    );
+  }
+
+  const userAgent = navigator.userAgent;
+  const vendor = navigator.vendor;
+
+  return (
+    /Chrome|Chromium/.test(userAgent) &&
+    /Google Inc/.test(vendor) &&
+    !/Edg/.test(userAgent) &&
+    !/OPR/.test(userAgent)
+  );
+}
+
+export function getBrowserInfo(): BrowserInfo {
+  return {
+    os: getOperatingSystem(),
+    isChrome: isChromeBrowser()
+  };
+}
--- a/web/src/lib/localstorage.ts
+++ b/web/src/lib/localstorage.ts
@@ -17,6 +17,7 @@ const KEYBOARD_SYSTEM_KEY = 'nano-kvm-keyboard-system';
 const KEYBOARD_LANGUAGE_KEY = 'nano-kvm-keyboard-language';
 const SKIP_MODIFY_PASSWORD_KEY = 'nano-kvm-skip-modify-password';
 const MENU_DISABLED_ITEMS_KEY = 'nano-kvm-menu-disabled-items';
+const MENU_AUTO_HIDE_KEY = 'nano-kvm-menu-auto-hide';
 const POWER_CONFIRM_KEY = 'nano-kvm-power-confirm';

 type ItemWithExpiry = {
@@ -212,6 +213,15 @@ export function getMenuDisabledItems(): string[] {
  return value ? JSON.parse(value) : [];
 }

+export function getMenuDisplayMode(): string {
+  const value = localStorage.getItem(MENU_AUTO_HIDE_KEY);
+  return value || 'auto';
+}
+
+export function setMenuDisplayMode(mode: string) {
+  localStorage.setItem(MENU_AUTO_HIDE_KEY, mode);
+}
+
 export function getPowerConfirm() {
  const enabled = localStorage.getItem(POWER_CONFIRM_KEY);
  return enabled === 'true';
--- a/web/src/pages/desktop/keyboard/index.tsx
+++ b/web/src/pages/desktop/keyboard/index.tsx
@@ -1,75 +1,140 @@
 import { useEffect, useRef } from 'react';
 import { useAtomValue } from 'jotai';

+import { getOperatingSystem } from '@/lib/browser.ts';
 import { KeyboardReport } from '@/lib/keyboard.ts';
+import { isModifier } from '@/lib/keymap';
 import { client, MessageEvent } from '@/lib/websocket.ts';
 import { isKeyboardEnableAtom } from '@/jotai/keyboard.ts';

+import { Recorder } from './recorder.tsx';
+import { useAltGr } from './useAltGr.ts';
+import { useLeaderKey } from './useLeaderKey.ts';
+import { normalizeKeyCode } from './utils.ts';
+
 export const Keyboard = () => {
+  const os = getOperatingSystem();
+
  const isKeyboardEnabled = useAtomValue(isKeyboardEnableAtom);

  const keyboardRef = useRef(new KeyboardReport());
  const pressedKeys = useRef(new Set<string>());
+  const isComposing = useRef(false);
+
+  // Send key event helper
+  const sendKeyEvent = (type: 'keydown' | 'keyup', code: string) => {
+    const kb = keyboardRef.current;
+    const report = type === 'keydown' ? kb.keyDown(code) : kb.keyUp(code);
+    sendReport(report);
+  };
+
+  // Init leader key handler
+  const leaderKey = useLeaderKey(pressedKeys, sendKeyEvent);
+  const leaderKeyRef = useRef(leaderKey);
+  leaderKeyRef.current = leaderKey;
+
+  // Init AltGr key handler
+  const altGr = useAltGr(os, pressedKeys, sendKeyEvent);
+  const altGrRef = useRef(altGr);
+  altGrRef.current = altGr;

  useEffect(() => {
-    if (!isKeyboardEnabled) {
-      releaseKeys();
-      return;
-    }
-
    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);
+    document.addEventListener('compositionstart', handleCompositionStart);
+    document.addEventListener('compositionend', handleCompositionEnd);
    window.addEventListener('blur', handleBlur);
    document.addEventListener('visibilitychange', handleVisibilityChange);

-    // Key down event
    function handleKeyDown(event: KeyboardEvent) {
      if (!isKeyboardEnabled) return;
+      if (isComposing.current || event.isComposing) return;

      event.preventDefault();
      event.stopPropagation();

-      const code = event.code;
-      if (pressedKeys.current.has(code)) {
+      const code = normalizeKeyCode(event, os);
+      if (!code || pressedKeys.current.has(code)) return;
+
+      // Handle leader key
+      const leaderHandled = leaderKeyRef.current.handleKeyDown(code);
+      if (leaderHandled) {
        return;
      }

+      // Handle AltGr key
+      altGrRef.current.handleKeyDown(code, event.timeStamp);
+
      pressedKeys.current.add(code);
-      handleKeyEvent({ type: 'keydown', code });
+      sendKeyEvent('keydown', code);
    }

-    // Key up event
    function handleKeyUp(event: KeyboardEvent) {
      if (!isKeyboardEnabled) return;
+      if (isComposing.current || event.isComposing) return;

      event.preventDefault();
      event.stopPropagation();

-      const code = event.code;
+      const code = normalizeKeyCode(event, os);
+      if (!code) return;
+
+      // Handle leader key release
+      const leaderHandled = leaderKeyRef.current.handleKeyUp(code);
+      if (leaderHandled) {
+        return;
+      }
+
+      // Handle AltGr key release
+      const altGrHandled = altGrRef.current.handleKeyUp(code);
+      if (altGrHandled) {
+        return;
+      }
+
+      // Release Meta combinations (macOS compatibility)
+      if (code === 'MetaLeft' || code === 'MetaRight') {
+        releaseMetaCombinations();
+      }
+
      pressedKeys.current.delete(code);
-      handleKeyEvent({ type: 'keyup', code });
+      sendKeyEvent('keyup', code);
+    }
+
+    function handleCompositionStart() {
+      isComposing.current = true;
+    }
+
+    function handleCompositionEnd() {
+      isComposing.current = false;
    }

-    // Release all keys when window loses focus
    function handleBlur() {
      releaseKeys();
    }

-    // Release all keys before window closes
    function handleVisibilityChange() {
      if (document.hidden) {
        releaseKeys();
      }
    }

-    // Release all keys
+    function releaseMetaCombinations() {
+      const keysToRelease = Array.from(pressedKeys.current).filter((code) => !isModifier(code));
+      for (const key of keysToRelease) {
+        sendKeyEvent('keyup', key);
+        pressedKeys.current.delete(key);
+      }
+    }
+
    function releaseKeys() {
      pressedKeys.current.forEach((code) => {
-        handleKeyEvent({ type: 'keyup', code });
+        sendKeyEvent('keyup', code);
      });
-
      pressedKeys.current.clear();

+      leaderKeyRef.current.reset();
+      altGrRef.current.reset();
+
      const report = keyboardRef.current.reset();
      sendReport(report);
    }
@@ -77,23 +142,23 @@ export const Keyboard = () => {
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.removeEventListener('keyup', handleKeyUp);
+      document.removeEventListener('compositionstart', handleCompositionStart);
+      document.removeEventListener('compositionend', handleCompositionEnd);
      window.removeEventListener('blur', handleBlur);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
+
+      releaseKeys();
    };
  }, [isKeyboardEnabled]);

-  // Keyboard handler
-  function handleKeyEvent(event: { type: 'keydown' | 'keyup'; code: string }) {
-    const kb = keyboardRef.current;
-    const report = event.type === 'keydown' ? kb.keyDown(event.code) : kb.keyUp(event.code);
-    sendReport(report);
-  }
-
-  // Send keyboard report
  function sendReport(report: Uint8Array) {
    const data = new Uint8Array([MessageEvent.Keyboard, ...report]);
    client.send(data);
  }

-  return <></>;
+  return (
+    <>
+      <Recorder recordMode={leaderKey.recordMode} recordedKeys={leaderKey.recordedKeys} />
+    </>
+  );
 };
--- a/web/src/pages/desktop/keyboard/recorder.tsx
+++ b/web/src/pages/desktop/keyboard/recorder.tsx
@@ -0,0 +1,61 @@
+import { useTranslation } from 'react-i18next';
+
+interface RecorderProps {
+  recordMode: boolean;
+  recordedKeys: string[];
+}
+
+export const Recorder = ({ recordMode, recordedKeys }: RecorderProps) => {
+  const { t } = useTranslation();
+
+  if (!recordMode) {
+    return <></>;
+  }
+
+  return (
+    <div className="animate-in fade-in slide-in-from-top-4 pointer-events-none fixed right-5 top-5 z-[9999] flex min-w-[150px] flex-col gap-2 rounded-xl border border-white/10 bg-black/60 p-4 shadow-2xl backdrop-blur-md transition-all duration-200">
+      {recordedKeys.length === 0 ? (
+        <>
+          <div className="flex items-center gap-2">
+            <div className="relative flex size-2.5">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-amber-400 opacity-75"></span>
+              <span className="relative inline-flex size-2.5 rounded-full bg-amber-500"></span>
+            </div>
+            <span className="text-xs font-semibold tracking-wider text-white/90">
+              {t('keyboard.leaderKey.recorder.rec')}
+            </span>
+          </div>
+
+          <div className="flex flex-wrap gap-2 pt-1">
+            <span className="text-sm italic text-white/50">
+              {t('keyboard.leaderKey.recorder.input')}
+            </span>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex items-center gap-2">
+            <div className="relative flex size-2.5">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+              <span className="relative inline-flex size-2.5 rounded-full bg-green-500"></span>
+            </div>
+            <span className="text-xs text-white/90">
+              {t('keyboard.leaderKey.recorder.activate')}
+            </span>
+          </div>
+
+          <div className="flex flex-wrap gap-2 pt-1">
+            {recordedKeys.map((key) => (
+              <span
+                key={key}
+                className="flex items-center justify-center rounded border-b-2 border-white/20 bg-white/10 px-2 py-0.5 font-mono text-sm font-medium text-white shadow-sm"
+              >
+                {key}
+              </span>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
--- a/web/src/pages/desktop/keyboard/useAltGr.ts
+++ b/web/src/pages/desktop/keyboard/useAltGr.ts
@@ -0,0 +1,77 @@
+import React, { useRef } from 'react';
+
+const ALTGR_THRESHOLD_MS = 10;
+
+interface AltGrState {
+  active: boolean;
+  ctrlLeftTimestamp: number;
+}
+
+export interface AltGrHandlers {
+  handleKeyDown: (code: string, timestamp: number) => void;
+  handleKeyUp: (code: string) => boolean;
+  reset: () => void;
+  isActive: () => boolean;
+}
+
+export function useAltGr(
+  os: string,
+  pressedKeys: React.MutableRefObject<Set<string>>,
+  sendKeyEvent: (type: 'keydown' | 'keyup', code: string) => void
+): AltGrHandlers {
+  const state = useRef<AltGrState | null>(null);
+
+  if (os === 'Windows' && !state.current) {
+    state.current = { active: false, ctrlLeftTimestamp: 0 };
+  }
+
+  const handleKeyDown = (code: string, timestamp: number): void => {
+    if (!state.current) return;
+
+    // When AltGr is pressed, browsers send ControlLeft followed immediately by AltRight
+    if (code === 'ControlLeft') {
+      state.current.ctrlLeftTimestamp = timestamp;
+      return;
+    }
+
+    if (code === 'AltRight') {
+      const timeDiff = timestamp - state.current.ctrlLeftTimestamp;
+      if (timeDiff < ALTGR_THRESHOLD_MS && pressedKeys.current.has('ControlLeft')) {
+        pressedKeys.current.delete('ControlLeft');
+        sendKeyEvent('keyup', 'ControlLeft');
+        state.current.active = true;
+        return;
+      }
+    }
+  };
+
+  const handleKeyUp = (code: string): boolean => {
+    if (!state.current?.active) {
+      return false;
+    }
+
+    if (code === 'ControlLeft') {
+      pressedKeys.current.delete('ControlLeft');
+      return true;
+    }
+
+    if (code === 'AltRight') {
+      pressedKeys.current.delete('ControlLeft');
+      state.current.active = false;
+      return false;
+    }
+
+    return false;
+  };
+
+  const reset = () => {
+    if (state.current) {
+      state.current.active = false;
+      state.current.ctrlLeftTimestamp = 0;
+    }
+  };
+
+  const isActive = () => state.current?.active ?? false;
+
+  return { handleKeyDown, handleKeyUp, reset, isActive };
+}
--- a/web/src/pages/desktop/keyboard/useLeaderKey.ts
+++ b/web/src/pages/desktop/keyboard/useLeaderKey.ts
@@ -0,0 +1,132 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useAtom } from 'jotai';
+
+import * as api from '@/api/hid.ts';
+import { isModifier } from '@/lib/keymap';
+import { leaderKeyAtom } from '@/jotai/keyboard.ts';
+
+interface LeaderKeyState {
+  code: string;
+  startTime: number;
+  recordMode: boolean;
+  recordModifiers: string[];
+}
+
+interface LeaderKeyHandlers {
+  handleKeyDown: (code: string) => boolean;
+  handleKeyUp: (code: string) => boolean;
+  reset: () => void;
+  recordMode: boolean;
+  recordedKeys: string[];
+}
+
+const RECORD_MODE_THRESHOLD_MS = 350;
+
+export function useLeaderKey(
+  pressedKeys: React.MutableRefObject<Set<string>>,
+  sendKeyEvent: (type: 'keydown' | 'keyup', code: string) => void
+): LeaderKeyHandlers {
+  const [leaderKeyCode, setLeaderKeyCode] = useAtom(leaderKeyAtom);
+
+  const [recordMode, setRecordMode] = useState(false);
+  const [recordedKeys, setRecordedKeys] = useState<string[]>([]);
+
+  const leaderState = useRef<LeaderKeyState>({
+    code: '',
+    startTime: 0,
+    recordMode: false,
+    recordModifiers: []
+  });
+
+  // Get leader key
+  useEffect(() => {
+    api.getLeaderKey().then((rsp: any) => {
+      if (rsp.code === 0 && rsp.data?.key !== undefined) {
+        setLeaderKeyCode(rsp.data.key);
+      }
+    });
+  }, [setLeaderKeyCode]);
+
+  // Update leader key
+  useEffect(() => {
+    leaderState.current.code = leaderKeyCode;
+  }, [leaderKeyCode]);
+
+  const handleKeyDown = (code: string): boolean => {
+    const leader = leaderState.current;
+
+    // Leader key pressed
+    if (leader.code && code === leader.code) {
+      if (!leader.recordMode) {
+        // Enter record mode
+        leader.startTime = Date.now();
+        leader.recordMode = true;
+        setRecordMode(true);
+      }
+
+      pressedKeys.current.add(code);
+      return true;
+    }
+
+    // Record mode
+    if (leader.recordMode) {
+      if (isModifier(code)) {
+        // Modifier: send keydown immediately and track it
+        if (!leader.recordModifiers.includes(code)) {
+          leader.recordModifiers.push(code);
+          setRecordedKeys([...leaderState.current.recordModifiers]);
+          sendKeyEvent('keydown', code);
+        }
+      } else {
+        // Non-modifier: send keydown + keyup immediately
+        sendKeyEvent('keydown', code);
+        sendKeyEvent('keyup', code);
+      }
+
+      pressedKeys.current.add(code);
+      return true;
+    }
+
+    return false;
+  };
+
+  const handleKeyUp = (code: string): boolean => {
+    const leader = leaderState.current;
+
+    // Leader key released
+    if (leader.code && code === leader.code) {
+      if (leader.recordMode && Date.now() - leader.startTime > RECORD_MODE_THRESHOLD_MS) {
+        // Exit record mode
+        reset();
+      }
+
+      pressedKeys.current.delete(code);
+      return true;
+    }
+
+    // In record mode, handle keyup
+    if (leader.recordMode && code !== leader.code) {
+      pressedKeys.current.delete(code);
+      return true;
+    }
+
+    return false;
+  };
+
+  const reset = () => {
+    const leader = leaderState.current;
+
+    for (const key of leader.recordModifiers) {
+      sendKeyEvent('keyup', key);
+    }
+
+    leader.startTime = 0;
+    leader.recordMode = false;
+    leader.recordModifiers = [];
+
+    setRecordMode(false);
+    setRecordedKeys([]);
+  };
+
+  return { handleKeyDown, handleKeyUp, reset, recordMode, recordedKeys };
+}
--- a/web/src/pages/desktop/keyboard/utils.ts
+++ b/web/src/pages/desktop/keyboard/utils.ts
@@ -0,0 +1,26 @@
+export function normalizeKeyCode(event: KeyboardEvent, os?: string): string {
+  if (event.code) {
+    return event.code;
+  }
+
+  // Fallback: use event.key + event.location to determine the key
+  // event.location: 1 = left, 2 = right, 0 = standard (non-positional)
+  if (event.key === 'Shift') {
+    if (event.location === 0 && os === 'Windows') {
+      return 'ShiftRight';
+    }
+    return event.location === 2 ? 'ShiftRight' : 'ShiftLeft';
+  }
+
+  if (event.key === 'Control') {
+    return event.location === 2 ? 'ControlRight' : 'ControlLeft';
+  }
+  if (event.key === 'Alt') {
+    return event.location === 2 ? 'AltRight' : 'AltLeft';
+  }
+  if (event.key === 'Meta') {
+    return event.location === 2 ? 'MetaRight' : 'MetaLeft';
+  }
+
+  return event.code;
+}
--- a/web/src/pages/desktop/menu/index.tsx
+++ b/web/src/pages/desktop/menu/index.tsx
@@ -1,12 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import { Divider } from 'antd';
 import clsx from 'clsx';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { GripVerticalIcon } from 'lucide-react';
 import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';

-import { getMenuDisabledItems } from '@/lib/localstorage.ts';
-import { menuDisabledItemsAtom, submenuOpenCountAtom } from '@/jotai/settings.ts';
+import { menuDisabledItemsAtom } from '@/jotai/settings.ts';
+import { useMenuBounds } from '@/hooks/useMenuBounds.ts';
+import { useMenuVisibility } from '@/hooks/useMenuVisibility.ts';

 import { DownloadImage } from './download.tsx';
 import { Fullscreen } from './fullscreen';
@@ -21,99 +22,25 @@ import { Settings } from './settings';
 import { Terminal } from './terminal';
 import { Wol } from './wol';

-const HIDE_TIMEOUT = 8000;
-
 export const Menu = () => {
-  const [menuDisabledItems, setMenuDisabledItems] = useAtom(menuDisabledItemsAtom);
-  const submenuOpenCount = useAtomValue(submenuOpenCountAtom);
-
-  const [isMenuExpanded, setIsMenuExpanded] = useState(true);
-  const [isMenuMoved, setIsMenuMoved] = useState(false);
-  const [isMenuHovered, setIsMenuHovered] = useState(false);
-  const [isMenuHidden, setIsMenuHidden] = useState(false);
-  const [menuBounds, setMenuBounds] = useState({ left: 0, right: 0, top: 0, bottom: 0 });
-
  const nodeRef = useRef<HTMLDivElement | null>(null);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

-  // init menu
-  useEffect(() => {
-    const items = getMenuDisabledItems();
-    setMenuDisabledItems(items);
+  const menuDisabledItems = useAtomValue(menuDisabledItemsAtom);

-    startCountdown();
-    handleResize();
+  const {
+    isInitialized,
+    isMenuExpanded,
+    isMenuHidden,
+    handleHovered,
+    handleMoved,
+    setIsMenuExpanded
+  } = useMenuVisibility();

-    window.addEventListener('resize', handleResize);
+  const menuBounds = useMenuBounds(nodeRef, isMenuExpanded);

-    return () => {
-      stopCountdown();
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  // handle menu bounds
-  useEffect(() => {
-    handleResize();
-  }, [menuDisabledItems, isMenuExpanded]);
-
-  // handle hide timer
-  useEffect(() => {
-    if (submenuOpenCount === 0 && !isMenuHovered) {
-      startCountdown();
-      return;
-    }
-
-    stopCountdown();
-  }, [submenuOpenCount, isMenuHovered]);
-
-  function handleResize() {
-    if (!nodeRef.current) return;
-
-    const elementRect = nodeRef.current.getBoundingClientRect();
-    const width = (window.innerWidth - elementRect.width) / 2;
-
-    setMenuBounds({
-      left: -width,
-      top: -10,
-      right: width,
-      bottom: window.innerHeight - elementRect.height - 10
-    });
-  }
-
-  function startCountdown() {
-    if (submenuOpenCount > 0 || !isMenuExpanded || isMenuMoved) {
-      return;
-    }
-
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-
-    timerRef.current = setTimeout(() => {
-      setIsMenuHidden(true);
-    }, HIDE_TIMEOUT);
-  }
-
-  function stopCountdown() {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  }
-
-  function handleMoved(_e: DraggableEvent, data: DraggableData) {
+  function onDragStop(_e: DraggableEvent, data: DraggableData) {
    if (data.x === 0 && data.y === 0) return;
-    if (isMenuMoved) return;
-
-    setIsMenuMoved(true);
-  }
-
-  function handleHovered(hovered: boolean) {
-    setIsMenuHovered(hovered);
-    if (hovered) {
-      setIsMenuHidden(false);
-    }
+    handleMoved();
  }

  function isEnabled(item: string) {
@@ -126,11 +53,14 @@ export const Menu = () => {
      bounds={menuBounds}
      handle="strong"
      positionOffset={{ x: '-50%', y: '0%' }}
-      onStop={handleMoved}
+      onStop={onDragStop}
    >
      <div
        ref={nodeRef}
-        className="fixed left-1/2 top-[10px] z-[1000] -translate-x-1/2"
+        className={clsx(
+          'fixed left-1/2 top-[10px] z-[1000] -translate-x-1/2 transition-opacity duration-300',
+          isInitialized ? 'opacity-100' : 'opacity-0'
+        )}
        onMouseEnter={() => handleHovered(true)}
        onMouseLeave={() => handleHovered(false)}
        onBlur={() => handleHovered(false)}
@@ -144,7 +74,6 @@ export const Menu = () => {
        <div className="sticky top-[10px] flex w-full justify-center">
          <div
            className={clsx(
-              'h-[36px] items-center rounded bg-neutral-800/80 transition-all duration-300',
              'h-[36px] items-center rounded bg-neutral-800/80 pl-1 pr-2 transition-all duration-300',
              isMenuExpanded ? 'flex' : 'hidden',
              isMenuHidden ? '-translate-y-[110%] opacity-80' : 'translate-y-0 opacity-100'
--- a/web/src/pages/desktop/menu/keyboard/index.tsx
+++ b/web/src/pages/desktop/menu/keyboard/index.tsx
@@ -1,8 +1,10 @@
+import { Divider } from 'antd';
 import { KeyboardIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

 import { MenuItem } from '@/components/menu-item.tsx';

+import { LeaderKey } from './leader-key.tsx';
 import { Paste } from './paste.tsx';
 import { Shortcuts } from './shortcuts';
 import { VirtualKeyboard } from './virtual-keyboard.tsx';
@@ -10,17 +12,19 @@ import { VirtualKeyboard } from './virtual-keyboard.tsx';
 export const Keyboard = () => {
  const { t } = useTranslation();

+  const content = (
+    <div className="flex flex-col space-y-1">
+      <Paste />
+      <VirtualKeyboard />
+      <Shortcuts />
+
+      <Divider style={{ margin: '5px 0', opacity: 0.5 }} />
+
+      <LeaderKey />
+    </div>
+  );
+
  return (
-    <MenuItem
-      title={t('keyboard.title')}
-      icon={<KeyboardIcon size={18} />}
-      content={
-        <div className="flex flex-col space-y-1">
-          <Paste />
-          <VirtualKeyboard />
-          <Shortcuts />
-        </div>
-      }
-    />
+    <MenuItem title={t('keyboard.title')} icon={<KeyboardIcon size={18} />} content={content} />
  );
 };
--- a/web/src/pages/desktop/menu/keyboard/leader-key.tsx
+++ b/web/src/pages/desktop/menu/keyboard/leader-key.tsx
@@ -0,0 +1,205 @@
+import { useEffect, useState } from 'react';
+import { Button, Input, Modal, Switch } from 'antd';
+import clsx from 'clsx';
+import { useAtom, useSetAtom } from 'jotai';
+import {
+  ArrowBigUpIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  CommandIcon,
+  KeyboardIcon,
+  KeyIcon
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import * as api from '@/api/hid.ts';
+import { isKeyboardEnableAtom, leaderKeyAtom } from '@/jotai/keyboard.ts';
+
+export const LeaderKey = () => {
+  const { t } = useTranslation();
+
+  const setIsKeyboardEnable = useSetAtom(isKeyboardEnableAtom);
+  const [leaderKey, setLeaderKey] = useAtom(leaderKeyAtom);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLeaderKeyEnable, setIsLeaderKeyEnable] = useState(false);
+  const [tempLeaderKey, setTempLeaderKey] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const [isDocCollapsed, setIsDocCollapsed] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const optionalKeys = [
+    {
+      value: 'ShiftRight',
+      label: t('keyboard.leaderKey.shiftRight'),
+      icon: <ArrowBigUpIcon size={16} />
+    },
+    {
+      value: 'ControlRight',
+      label: t('keyboard.leaderKey.ctrlRight'),
+      icon: <ChevronUpIcon size={16} />
+    },
+    {
+      value: 'MetaRight',
+      label: t('keyboard.leaderKey.metaRight'),
+      icon: <CommandIcon size={16} />
+    }
+  ];
+
+  useEffect(() => {
+    if (!isFocused) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      setTempLeaderKey(event.code);
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isFocused]);
+
+  function openModal() {
+    setIsKeyboardEnable(false);
+    setIsLeaderKeyEnable(!!leaderKey);
+    setTempLeaderKey(leaderKey);
+    setIsDocCollapsed(true);
+    setIsModalOpen(true);
+  }
+
+  function closeModal() {
+    setIsKeyboardEnable(true);
+    setIsModalOpen(false);
+  }
+
+  function submit() {
+    if (isLoading) return;
+
+    const key = isLeaderKeyEnable ? tempLeaderKey : '';
+    if (key === leaderKey) {
+      closeModal();
+      return;
+    }
+
+    setIsLoading(true);
+
+    api
+      .setLeaderKey(key)
+      .then((rsp) => {
+        if (rsp.code === 0) {
+          setLeaderKey(key);
+          closeModal();
+        }
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }
+
+  return (
+    <>
+      <div
+        className="flex cursor-pointer select-none items-center space-x-2 rounded py-1 pl-2 pr-5 hover:bg-neutral-700/70"
+        onClick={openModal}
+      >
+        <KeyIcon size={18} />
+        <span>{t('keyboard.leaderKey.title')}</span>
+      </div>
+
+      <Modal width={510} keyboard={false} footer={null} open={isModalOpen} onCancel={closeModal}>
+        <div className="my-3 flex flex-col space-y-3">
+          {/* title */}
+          <div className="flex flex-col space-y-1">
+            <span className="text-lg"> {t('keyboard.leaderKey.title')}</span>
+            <span className="text-xs text-neutral-500">{t('keyboard.leaderKey.desc')}</span>
+          </div>
+
+          {/* Document */}
+          <div className="rounded-lg bg-neutral-800 py-3">
+            <div
+              className="flex cursor-pointer items-center justify-between px-5"
+              onClick={() => setIsDocCollapsed((c) => !c)}
+            >
+              <span>{t('keyboard.leaderKey.howToUse')}</span>
+              <div
+                className={clsx(
+                  'transition-300 size-[18px] text-neutral-500 transition',
+                  isDocCollapsed ? 'rotate-0' : 'rotate-90'
+                )}
+              >
+                <ChevronRightIcon size={18} />
+              </div>
+            </div>
+
+            {!isDocCollapsed && (
+              <ul className="list-outside space-y-3">
+                {['simultaneous', 'sequential'].map((key) => (
+                  <li>
+                    <div className="flex flex-col space-y-2 pr-1">
+                      <span className="">{t(`keyboard.leaderKey.${key}.title`)}</span>
+                      <span className="text-sm text-neutral-400">
+                        {t(`keyboard.leaderKey.${key}.desc1`)}
+                      </span>
+                      <span className="text-sm text-neutral-400">
+                        {t(`keyboard.leaderKey.${key}.desc2`)}
+                      </span>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          {/* Switch */}
+          <div className="flex items-center justify-between rounded-lg bg-neutral-800 px-5 py-3">
+            <span className="select-none">{t('keyboard.leaderKey.enable')}</span>
+            <Switch value={isLeaderKeyEnable} onChange={setIsLeaderKeyEnable} />
+          </div>
+
+          {/* Keyboard recorder */}
+          {isLeaderKeyEnable && (
+            <div className="flex flex-col space-y-5 rounded-lg bg-neutral-800 px-5 py-5">
+              <span className="text-sm text-neutral-400">{t('keyboard.leaderKey.tip')}</span>
+              <Input
+                value={tempLeaderKey}
+                className="flex-1"
+                placeholder={t('keyboard.leaderKey.placeholder')}
+                prefix={<KeyboardIcon size={16} className="text-neutral-500" />}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+              />
+
+              <div className="flex items-center justify-center space-x-3">
+                {optionalKeys.map((key) => (
+                  <div
+                    key={key.value}
+                    className={clsx(
+                      'flex w-28 cursor-pointer items-center justify-center space-x-1 rounded py-1 shadow-lg shadow-neutral-800 outline',
+                      key.value === tempLeaderKey
+                        ? 'text-neutral-300 outline-blue-500'
+                        : 'text-neutral-500 outline-neutral-700 hover:shadow-xl hover:outline-neutral-600'
+                    )}
+                    onClick={() => setTempLeaderKey((k) => (k === key.value ? '' : key.value))}
+                  >
+                    {key.icon}
+                    <span>{key.label}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="flex w-full justify-center pt-5">
+            <Button className="w-24" type="primary" loading={isLoading} onClick={submit}>
+              {t('keyboard.leaderKey.submit')}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
--- a/web/src/pages/desktop/menu/settings/appearance/index.tsx
+++ b/web/src/pages/desktop/menu/settings/appearance/index.tsx
@@ -2,7 +2,8 @@ import { Divider } from 'antd';
 import { useTranslation } from 'react-i18next';

 import { Language } from './language.tsx';
-import { MenuBar } from './menu-bar.tsx';
+import { MenuIcons } from './menu-icons.tsx';
+import { MenuMode } from './menu-mode.tsx';
 import { WebTitle } from './web-title.tsx';

 export const Appearance = () => {
@@ -19,7 +20,9 @@ export const Appearance = () => {

      <Divider className="opacity-50" style={{ margin: '32px 0' }} />

-      <MenuBar />
+      <div className="text-neutral-400">{t('settings.appearance.menuBar.title')}</div>
+      <MenuMode />
+      <MenuIcons />
    </>
  );
 };
--- a/web/src/pages/desktop/menu/settings/appearance/menu-icons.tsx
+++ b/web/src/pages/desktop/menu/settings/appearance/menu-icons.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import * as ls from '@/lib/localstorage.ts';
 import { menuDisabledItemsAtom } from '@/jotai/settings.ts';

-export const MenuBar = () => {
+export const MenuIcons = () => {
  const { t } = useTranslation();

  const [menuDisabledItems, setMenuDisabledItems] = useAtom(menuDisabledItemsAtom);
@@ -43,13 +43,15 @@ export const MenuBar = () => {
  }

  return (
-    <>
+    <div className="mt-8 flex flex-col space-y-5">
      <div className="flex flex-col">
-        <span className="text-neutral-400">{t('settings.appearance.menuBar')}</span>
-        <span className="text-xs text-neutral-500">{t('settings.appearance.menuBarDesc')}</span>
+        <span className="text-neutral-400">{t('settings.appearance.menuBar.icons')}</span>
+        <span className="text-xs text-neutral-500">
+          {t('settings.appearance.menuBar.iconsDesc')}
+        </span>
      </div>

-      <div className="mt-8 flex flex-col space-y-5">
+      <div className="mt-5 flex flex-col space-y-5">
        {items.map((item) => (
          <div key={item.key} className="flex items-center justify-between">
            <div className="flex items-center space-x-2 text-neutral-400">
@@ -66,6 +68,6 @@ export const MenuBar = () => {
          </div>
        ))}
      </div>
-    </>
+    </div>
  );
 };
--- a/web/src/pages/desktop/menu/settings/appearance/menu-mode.tsx
+++ b/web/src/pages/desktop/menu/settings/appearance/menu-mode.tsx
@@ -0,0 +1,38 @@
+import { Segmented } from 'antd';
+import { useAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
+
+import * as storage from '@/lib/localstorage.ts';
+import { menuDisplayModeAtom } from '@/jotai/settings.ts';
+
+export const MenuMode = () => {
+  const { t } = useTranslation();
+
+  const [menuDisplayMode, setMenuDisplayMode] = useAtom(menuDisplayModeAtom);
+
+  const options = [
+    // { value: 'off', label: t('settings.appearance.menuBar.modeOff') },
+    { value: 'auto', label: t('settings.appearance.menuBar.modeAuto') },
+    { value: 'always', label: t('settings.appearance.menuBar.modeAlways') }
+  ];
+
+  function handleChange(mode: string) {
+    if (mode === menuDisplayMode) return;
+
+    setMenuDisplayMode(mode);
+    storage.setMenuDisplayMode(mode);
+  }
+
+  return (
+    <div className="mt-5 flex w-full items-center justify-between">
+      <div className="flex flex-col">
+        <span className="text-neutral-400">{t('settings.appearance.menuBar.mode')}</span>
+        <span className="text-xs text-neutral-500">
+          {t('settings.appearance.menuBar.modeDesc')}
+        </span>
+      </div>
+
+      <Segmented value={menuDisplayMode} options={options} onChange={handleChange} />
+    </div>
+  );
+};
--- a/web/src/pages/desktop/menu/settings/update/index.tsx
+++ b/web/src/pages/desktop/menu/settings/update/index.tsx
@@ -13,8 +13,6 @@ type UpdateProps = {
  setIsLocked: (isClosable: boolean) => void;
 };

-// type Status = '' | 'loading' | 'updating' | 'outdated' | 'latest' | 'failed';
-
 export const Update = ({ setIsLocked }: UpdateProps) => {
  const { t } = useTranslation();

@@ -85,7 +83,7 @@ export const Update = ({ setIsLocked }: UpdateProps) => {
      <div className="text-base">{t('settings.update.title')}</div>
      <Divider className="opacity-50" />

-      <Preview />
+      <Preview checkForUpdates={checkForUpdates} />
      <Offline
        status={status}
        setStatus={setStatus}
--- a/web/src/pages/desktop/menu/settings/update/preview.tsx
+++ b/web/src/pages/desktop/menu/settings/update/preview.tsx
@@ -5,7 +5,11 @@ import { useTranslation } from 'react-i18next';

 import * as api from '@/api/application.ts';

-export const Preview = () => {
+interface PreviewProps {
+  checkForUpdates: () => void;
+}
+
+export const Preview = ({ checkForUpdates }: PreviewProps) => {
  const { t } = useTranslation();

  const [isLoading, setIsLoading] = useState(false);
@@ -48,6 +52,7 @@ export const Preview = () => {
        }

        setIsEnabled(enable);
+        checkForUpdates();
      })
      .finally(() => {
        setIsLoading(false);
--- a/web/src/pages/desktop/virtual-keyboard/index.tsx
+++ b/web/src/pages/desktop/virtual-keyboard/index.tsx
@@ -137,7 +137,6 @@ export const VirtualKeyboard = () => {
      // Tausch
      if (base === 'KeyZ') return getKeycode('KeyY');
      if (base === 'KeyY') return getKeycode('KeyZ');
-      if (base === 'IntlBackslash') return getKeycode('IntlBackslash_qwertz');
      // all other labels use their own code
      return getKeycode(base);
    }
--- a/web/src/pages/desktop/virtual-keyboard/virtual-keys.ts
+++ b/web/src/pages/desktop/virtual-keyboard/virtual-keys.ts
@@ -79,11 +79,11 @@ export const keyboardOptions = {

    KeyY_qwertz: 'Y',
    KeyZ_qwertz: 'Z',
-    
+
    KeyQ_qwertz: 'Q<br/>@',
    KeyE_qwertz: 'E<br/>€',
    BracketRight_qwertz: '+~*',
-    Backslash_qwertz: '#<br/>\'',
+    Backslash_qwertz: "#<br/>'",
    IntlBackslash_qwertz: '<|>',
    Comma_qwertz: ',<br/>;',
    Period_qwertz: '.<br/>:',
@@ -91,11 +91,11 @@ export const keyboardOptions = {
    '{controlleft_qwertz}': 'STRG',
    '{altright_qwertz}': 'ALT GR',
    '{controlright_qwertz}': 'STRG',
-    
+
    BracketLeft_qwertz: 'Ü',
    Semicolon_qwertz: 'Ö',
    Quote_qwertz: 'Ä',
-    
+
    '{tab}': 'Tab',
    KeyQ: 'Q',
    KeyW: 'W',
@@ -336,7 +336,7 @@ export const modifierKeys = [
  '{altright}',
  '{metaright}',
  '{winright}',
-  
+
  // DE-spezifische Modifier-Tokens (für qwertz-Layout)
  '{controlleft_qwertz}',
  '{controlright_qwertz}',
Author	SHA1	Message	Date
wj-xiao	4af32fc703	release: nanokvm@2.3.4	2026-01-26 17:56:52 +08:00
wj-xiao	a611e5ef56	feat: support keyboard leader key functionality	2026-01-26 17:10:16 +08:00
wj-xiao	94051c3037	chore: added image version number v1.4.2	2026-01-26 11:23:17 +08:00
wj-xiao	d5cd706078	fix: compatible with non-standard modifier keys	2026-01-26 11:12:19 +08:00
wj-xiao	7460ebfd07	fix: the menu bar cannot be closed	2026-01-26 10:46:57 +08:00
wj-xiao	e3877308a0	fix: trigger update check when switching preview updates	2026-01-26 10:28:27 +08:00
wenjie	7c28fb8124	Merge pull request #737 from kmw0410/main update korean translation	2026-01-26 10:08:02 +08:00
wenjie	b18873364f	Merge pull request #733 from j796160836/feature/update_zh_tw Update zh_tw translation	2026-01-26 10:07:37 +08:00
kmw0410	016a7d8a51	update korean translation	2026-01-25 22:04:24 +09:00
Johnny Sung	585f1bc2b5	feat: update zh_tw translation	2026-01-20 01:59:53 +08:00
wj-xiao	4fcc4c3747	release: nanokvm@2.3.3	2026-01-16 15:32:14 +08:00
wj-xiao	0d2c52adc3	feat: the menu bar supports setting the display mode	2026-01-16 11:47:56 +08:00
wj-xiao	af256e7f92	fix: compatible with IME composition	2026-01-15 17:04:17 +08:00
wj-xiao	84830421ee	fix: compatible with Windows AltGr key	2026-01-15 16:45:48 +08:00
wj-xiao	9b278cdb0e	fix: compatible with macOS's command key combinations	2026-01-14 17:58:25 +08:00
wj-xiao	9b40a5cf86	chore: update eslint	2026-01-14 17:58:25 +08:00
wj-xiao	b8d980be33	fix: the IntlBackslash key does not work on German virtual keyboard	2026-01-14 17:58:25 +08:00
wenjie	195037af87	Merge pull request #728 from imguoguo/main ci: add missing parameters and push when issue closed	2026-01-14 15:48:07 +08:00
Guoguo	c98000069a	ci: add missing parameters and push when issue closed	2026-01-14 07:43:19 +00:00
wenjie	2bd277b57d	Merge pull request #725 from kmw0410/main update korean translation	2026-01-14 10:30:40 +08:00
wj-xiao	4852ed813b	chore: bump react-router-dom from 6.27.0 to 6.30.3	2026-01-14 10:27:08 +08:00
wj-xiao	fb08df9e4e	fix: correct erroneous release date	2026-01-12 19:53:26 +08:00
kmw0410	64f3b49e21	update korean translation	2026-01-12 09:11:56 +09:00