diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index b6651f4bb..d127ec8ab 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -53,6 +53,7 @@
     "Linux": "Linux",
     "Other": "Other",
     "Device": "Device",
+    "Tool": "Tools",
     "Player": "Player",
     "Windows": "Windows",
     "DirectoryService": "Directory Service",
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
index c15c300e5..e79f523f7 100644
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@@ -58,6 +58,7 @@
     "Device": "设备",
     "Web": "Web",
     "Other": "其他",
+    "Tool": "工具",
     "Favorite": "收藏",
     "OfflinePlayer": "离线播放器",
     "Player": "播放器"
diff --git a/package.json b/package.json
index c173cb2eb..e7365da1d 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "reset": "rm -rf node_modules .nuxt dist && cd src-tauri && cargo clean"
   },
   "dependencies": {
+    "@cyolosecurity/asciinema-player": "3.6.3-3",
     "@nuxt/fonts": "0.12.1",
     "@nuxt/icon": "2.0.0",
     "@nuxt/ui": "^4.2.1",
@@ -44,6 +45,9 @@
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-shell": "^2.3.3",
     "@tauri-apps/plugin-store": "^2.4.1",
+    "fflate": "^0.8.2",
+    "guacamole-common-js-jumpserver": "1.1.0-c",
+    "js-untar": "^2.0.0",
     "mitt": "^3.0.1",
     "nuxt": "^4.2.1",
     "pinia": "^3.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4cd0bd9e..b426f7734 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
 
   .:
     dependencies:
+      '@cyolosecurity/asciinema-player':
+        specifier: 3.6.3-3
+        version: 3.6.3-3
       '@nuxt/fonts':
         specifier: 0.12.1
         version: 0.12.1(@netlify/blobs@9.1.2)(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(vite@7.2.7(@types/node@24.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.2))
@@ -53,6 +56,15 @@ importers:
       '@tauri-apps/plugin-store':
         specifier: ^2.4.1
         version: 2.4.1
+      fflate:
+        specifier: ^0.8.2
+        version: 0.8.3
+      guacamole-common-js-jumpserver:
+        specifier: 1.1.0-c
+        version: 1.1.0-c
+      js-untar:
+        specifier: ^2.0.0
+        version: 2.0.0
       mitt:
         specifier: ^3.0.1
         version: 3.0.1
@@ -329,6 +341,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.29.2':
+    resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -379,6 +395,9 @@ packages:
     resolution: {integrity: sha512-+tv3z+SPp+gqTIcImN9o0hqE9xyfQjI1XD9pL6NuKjua9B1y7mNYv0S9cP+QEbA4ppVgGZEmKOvHX5G5Ei1CVA==}
     engines: {node: '>=18.0.0'}
 
+  '@cyolosecurity/asciinema-player@3.6.3-3':
+    resolution: {integrity: sha512-5hImQEuQ7rqb1RpFz9BoJ+KLwyEMZUmPNAayoUovunUX+ERGZgOUjyT1QYCU4MifphJ+rJA0Z2nsJ4mX2zbivA==}
+
   '@dxup/nuxt@0.2.2':
     resolution: {integrity: sha512-RNpJjDZs9+JcT9N87AnOuHsNM75DEd58itADNd/s1LIF6BZbTLZV0xxilJZb55lntn4TYvscTaXLCBX2fq9CXg==}
 
@@ -1150,7 +1169,7 @@ packages:
       '@nuxt/content': ^3.0.0
       joi: ^18.0.0
       superstruct: ^2.0.0
-      typescript: ^5.6.3
+      typescript: npm:tslite@latest
       valibot: ^1.0.0
       vue-router: ^4.5.0
       yup: ^1.7.0
@@ -1200,7 +1219,6 @@ packages:
   '@oxc-minify/binding-darwin-arm64@0.102.0':
     resolution: {integrity: sha512-BDLiH41ZctNND38+GCEL3ZxFn9j7qMZJLrr6SLWMt8xlG4Sl64xTkZ0zeUy4RdVEatKKZdrRIhFZ2e5wPDQT6Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
     os: [darwin]
 
   '@oxc-minify/binding-darwin-arm64@0.96.0':
@@ -1238,36 +1256,42 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-arm64-musl@0.96.0':
     resolution: {integrity: sha512-rNqoFWOWaxwMmUY5fspd/h5HfvgUlA3sv9CUdA2MpnHFiyoJNovR7WU8tGh+Yn0qOAs0SNH0a05gIthHig14IA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-minify/binding-linux-riscv64-gnu@0.96.0':
     resolution: {integrity: sha512-3paajIuzGnukHwSI3YBjYVqbd72pZd8NJxaayaNFR0AByIm8rmIT5RqFXbq8j2uhtpmNdZRXiu0em1zOmIScWA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-s390x-gnu@0.96.0':
     resolution: {integrity: sha512-9ESrpkB2XG0lQ89JlsxlZa86iQCOs+jkDZLl6O+u5wb7ynUy21bpJJ1joauCOSYIOUlSy3+LbtJLiqi7oSQt5Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-gnu@0.96.0':
     resolution: {integrity: sha512-UMM1jkns+p+WwwmdjC5giI3SfR2BCTga18x3C0cAu6vDVf4W37uTZeTtSIGmwatTBbgiq++Te24/DE0oCdm1iQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-musl@0.96.0':
     resolution: {integrity: sha512-8b1naiC7MdP7xeMi7cQ5tb9W1rZAP9Qz/jBRqp1Y5EOZ1yhSGnf1QWuZ/0pCc+XiB9vEHXEY3Aki/H+86m2eOg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-minify/binding-wasm32-wasi@0.96.0':
     resolution: {integrity: sha512-bjGDjkGzo3GWU9Vg2qiFUrfoo5QxojPNV/2RHTlbIB5FWkkV4ExVjsfyqihFiAuj0NXIZqd2SAiEq9htVd3RFw==}
@@ -1363,72 +1387,84 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.96.0':
     resolution: {integrity: sha512-PHH4ETR1t0fymxuhpQNj3Z9t/78/zZa2Lj3Z3I0ZOd+/Ex+gtdhGoB5xYyy7lcYGAPMfZ+Gmr+dTCr1GYNZ3BA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-musl@0.95.0':
     resolution: {integrity: sha512-Pvi1lGe/G+mJZ3hUojMP/aAHAzHA25AEtVr8/iuz7UV72t/15NOgJYr9kELMUMNjPqpr3vKUgXTFmTtAxp11Qw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.96.0':
     resolution: {integrity: sha512-fjDPbZjkqaDSTBe0FM8nZ9zBw4B/NF/I0gH7CfvNDwIj9smISaNFypYeomkvubORpnbX9ORhvhYwg3TxQ60OGA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
     resolution: {integrity: sha512-pUEVHIOVNDfhk4sTlLhn6mrNENhE4/dAwemxIfqpcSyBlYG0xYZND1F3jjR2yWY6DakXZ6VSuDbtiv1LPNlOLw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.96.0':
     resolution: {integrity: sha512-59KAHd/6/LmjkdSAuJn0piKmwSavMasWNUKuYLX/UnqI5KkGIp14+LBwwaBG6KzOtIq1NrRCnmlL4XSEaNkzTg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
     resolution: {integrity: sha512-5+olaepHTE3J/+w7g0tr3nocvv5BKilAJnzj4L8tWBCLEZbL6olJcGVoldUO+3cgg1SO1xJywP5BuLhT0mDUDw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.96.0':
     resolution: {integrity: sha512-VtupojtgahY8XmLwpVpM3C1WQEgMD1JxpB8lzUtdSLwosWaaz1EAl+VXWNuxTTZusNuLBtmR+F0qql22ISi/9g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.95.0':
     resolution: {integrity: sha512-8huzHlK/N98wrnYKxIcYsK8ZGBWomQchu/Mzi6m+CtbhjWOv9DmK0jQ2fUWImtluQVpTwS0uZT06d3g7XIkJrA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.96.0':
     resolution: {integrity: sha512-8XSY9aUYY+5I4I1mhSEWmYqdUrJi3J5cCAInvEVHyTnDAPkhb+tnLGVZD696TpW+lFOLrTFF2V5GMWJVafqIUA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-musl@0.95.0':
     resolution: {integrity: sha512-bWnrLfGDcx/fab0+UQnFbVFbiykof/btImbYf+cI2pU/1Egb2x+OKSmM5Qt0nEUiIpM5fgJmYXxTopybSZOKYA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.96.0':
     resolution: {integrity: sha512-IIVNtqhA0uxKkD8Y6aZinKO/sOD5O62VlduE54FnUU2rzZEszrZQLL8nMGVZhTdPaKW5M1aeLmjcdnOs6er1Jg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-wasm32-wasi@0.95.0':
     resolution: {integrity: sha512-0JLyqkZu1HnQIZ4e5LBGOtzqua1QwFEUOoMSycdoerXqayd4LK2b7WMfAx8eCIf+jGm1Uj6f3R00nlsx8g1faQ==}
@@ -1485,7 +1521,6 @@ packages:
   '@oxc-transform/binding-darwin-arm64@0.102.0':
     resolution: {integrity: sha512-xmsBCk/NwE0khy8h6wLEexiS5abCp1ZqJUNHsAovJdGgIW21oGwhiC3VYg1vNLbq+zEXwOHuphVuNEYfBwyNTw==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
     os: [darwin]
 
   '@oxc-transform/binding-darwin-arm64@0.95.0':
@@ -1553,72 +1588,84 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-gnu@0.96.0':
     resolution: {integrity: sha512-kaqvUzNu8LL4aBSXqcqGVLFG13GmJEplRI2+yqzkgAItxoP/LfFMdEIErlTWLGyBwd0OLiNMHrOvkcCQRWadVg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-musl@0.95.0':
     resolution: {integrity: sha512-GL0ffCPW8JlFI0/jeSgCY665yDdojHxA0pbYG+k8oEHOWCYZUZK9AXL+r0oerNEWYJ8CRB+L5Yq87ZtU/YUitw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-transform/binding-linux-arm64-musl@0.96.0':
     resolution: {integrity: sha512-EiG/L3wEkPgTm4p906ufptyblBgtiQWTubGg/JEw82f8uLRroayr5zhbUqx40EgH037a3SfJthIyLZi7XPRFJw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.95.0':
     resolution: {integrity: sha512-tbH7LaClSmN3YFVo1UjMSe7D6gkb5f+CMIbj9i873UUZomVRmAjC4ygioObfzM+sj/tX0WoTXx5L1YOfQkHL6Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.96.0':
     resolution: {integrity: sha512-r01CY6OxKGtVeYnvH4mGmtkQMlLkXdPWWNXwo5o7fE2s/fgZPMpqh8bAuXEhuMXipZRJrjxTk1+ZQ4KCHpMn3Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.95.0':
     resolution: {integrity: sha512-8jMqiURWa0iTiPMg7BWaln89VdhhWzNlPyKM90NaFVVhBIKCr2UEhrQWdpBw/E9C8uWf/4VabBEhfPMK+0yS4w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.96.0':
     resolution: {integrity: sha512-4djg2vYLGbVeS8YiA2K4RPPpZE4fxTGCX5g/bOMbCYyirDbmBAIop4eOAj8vOA9i1CcWbDtmp+PVJ1dSw7f3IQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.95.0':
     resolution: {integrity: sha512-D5ULJ2uWipsTgfvHIvqmnGkCtB3Fyt2ZN7APRjVO+wLr+HtmnaWddKsLdrRWX/m/6nQ2xQdoQekdJrokYK9LtQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.96.0':
     resolution: {integrity: sha512-f6pcWVz57Y8jXa2OS7cz3aRNuks34Q3j61+3nQ4xTE8H1KbalcEvHNmM92OEddaJ8QLs9YcE0kUC6eDTbY34+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-musl@0.95.0':
     resolution: {integrity: sha512-DmCGU+FzRezES5wVAGVimZGzYIjMOapXbWpxuz8M8p3nMrfdBEQ5/tpwBp2vRlIohhABy4vhHJByl4c64ENCGQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-transform/binding-linux-x64-musl@0.96.0':
     resolution: {integrity: sha512-NSiRtFvR7Pbhv3mWyPMkTK38czIjcnK0+K5STo3CuzZRVbX1TM17zGdHzKBUHZu7v6IQ6/XsQ3ELa1BlEHPGWQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-transform/binding-wasm32-wasi@0.95.0':
     resolution: {integrity: sha512-tSo1EU4Whd1gXyae7cwSDouhppkuz6Jkd5LY8Uch9VKsHVSRhDLDW19Mq6VSwtyPxDPTJnJ2jYJWm+n8SYXiXQ==}
@@ -1683,36 +1730,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-wasm@2.5.1':
     resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
@@ -1900,56 +1953,67 @@ packages:
     resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.5':
     resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.5':
     resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.5':
     resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.5':
     resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.5':
     resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.5':
     resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.5':
     resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.5':
     resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.5':
     resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.5':
     resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.5':
     resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
@@ -2044,24 +2108,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
     resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
     resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.17':
     resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.17':
     resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
@@ -2143,30 +2211,35 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tauri-apps/cli-linux-arm64-musl@2.9.5':
     resolution: {integrity: sha512-/gRBMnphS9E8riZ0LIbBhZ9Oy16A2rx/g3DGR0DcDBvUtkLfbL0lMu4s+sY85nkn9An15+cZ1ZK6d7AIqWahLA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tauri-apps/cli-linux-riscv64-gnu@2.9.5':
     resolution: {integrity: sha512-NOzjPF9YIBodjdkFcJmqINT0k3YDoR5ANM/jg6Z6s3Zmk8ScN6inI60jTxcfgfWyITiKsPy7GJyYou3Cm2XNzw==}
     engines: {node: '>= 10'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@tauri-apps/cli-linux-x64-gnu@2.9.5':
     resolution: {integrity: sha512-SfGbwgvTphM5y+J91NyU/psleMUlyyPkZyDCFg8WU1HX8DpKUT3Vwhb/W1xpUBGb56tJgGCO46FCVkr8w4Areg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tauri-apps/cli-linux-x64-musl@2.9.5':
     resolution: {integrity: sha512-ZfeoiASAOGDzyvN+TDAg8A1pCeS082h4uc0vZKvtWUN+9QBIMfz0yJwltAv+SN/afap6NS6DVkbPV3UVuI9V5A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tauri-apps/cli-win32-arm64-msvc@2.9.5':
     resolution: {integrity: sha512-ulg7irow+ekjaK4inFHVq7m1KQebDSYNb17DFKV+h+x7qnLZymz2gHK7df2u4YyEjqvzwRd3AJpU3HNxRurSFQ==}
@@ -2258,26 +2331,26 @@ packages:
     peerDependencies:
       '@typescript-eslint/parser': ^8.49.0
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: npm:tslite@latest
 
   '@typescript-eslint/parser@8.49.0':
     resolution: {integrity: sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==}
     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: npm:tslite@latest
 
   '@typescript-eslint/project-service@8.46.3':
     resolution: {integrity: sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: npm:tslite@latest
 
   '@typescript-eslint/project-service@8.49.0':
     resolution: {integrity: sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: npm:tslite@latest
 
   '@typescript-eslint/scope-manager@8.46.3':
     resolution: {integrity: sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg==}
@@ -2291,20 +2364,20 @@ packages:
     resolution: {integrity: sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: npm:tslite@latest
 
   '@typescript-eslint/tsconfig-utils@8.49.0':
     resolution: {integrity: sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: npm:tslite@latest
 
   '@typescript-eslint/type-utils@8.49.0':
     resolution: {integrity: sha512-KTExJfQ+svY8I10P4HdxKzWsvtVnsuCifU5MvXrRwoP2KOlNZ9ADNEWWsQTJgMxLzS5VLQKDjkCT/YzgsnqmZg==}
     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: npm:tslite@latest
 
   '@typescript-eslint/types@8.46.3':
     resolution: {integrity: sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA==}
@@ -2318,27 +2391,27 @@ packages:
     resolution: {integrity: sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: npm:tslite@latest
 
   '@typescript-eslint/typescript-estree@8.49.0':
     resolution: {integrity: sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: npm:tslite@latest
 
   '@typescript-eslint/utils@8.46.3':
     resolution: {integrity: sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g==}
     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: npm:tslite@latest
 
   '@typescript-eslint/utils@8.49.0':
     resolution: {integrity: sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==}
     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: npm:tslite@latest
 
   '@typescript-eslint/visitor-keys@8.46.3':
     resolution: {integrity: sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg==}
@@ -2392,41 +2465,49 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -2472,7 +2553,7 @@ packages:
     engines: {node: '>=18'}
     peerDependencies:
       eslint: '>=8.57.0'
-      typescript: '>=5.0.0'
+      typescript: npm:tslite@latest
       vitest: '*'
     peerDependenciesMeta:
       typescript:
@@ -2549,7 +2630,7 @@ packages:
   '@vue/language-core@3.1.8':
     resolution: {integrity: sha512-PfwAW7BLopqaJbneChNL6cUOTL3GL+0l8paYP5shhgY5toBNidWnMXWM+qDwL7MC9+zDtzCF2enT8r6VPu64iw==}
     peerDependencies:
-      typescript: '*'
+      typescript: npm:tslite@latest
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -3485,7 +3566,7 @@ packages:
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=9.0.0'
-      typescript: '>=4.5'
+      typescript: npm:tslite@latest
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -3719,6 +3800,9 @@ packages:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
 
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -3911,6 +3995,9 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  guacamole-common-js-jumpserver@1.1.0-c:
+    resolution: {integrity: sha512-FKu9Cez9iy1xPy4GU+SaMDjqLR0+k1XsDO7dqi9JjJgz4pAoxQIdX2Thci8ZFGwTGdZzhVBpAqs7pebuktRSZQ==}
+
   gzip-size@7.0.0:
     resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -4119,6 +4206,9 @@ packages:
   js-tokens@9.0.1:
     resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
+  js-untar@2.0.0:
+    resolution: {integrity: sha512-7CsDLrYQMbLxDt2zl9uKaPZSdmJMvGGQ7wo9hoB3J+z/VcO2w63bXFgHVnjF1+S9wD3zAu8FBVj7EYWjTQ3Z7g==}
+
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -4238,24 +4328,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -4923,7 +5017,7 @@ packages:
   pinia@3.0.4:
     resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
     peerDependencies:
-      typescript: '>=4.5.0'
+      typescript: npm:tslite@latest
       vue: ^3.5.11
     peerDependenciesMeta:
       typescript:
@@ -5341,48 +5435,56 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: glibc
 
   sass-embedded-linux-arm@1.93.2:
     resolution: {integrity: sha512-N3+D/ToHtzwLDO+lSH05Wo6/KRxFBPnbjVHASOlHzqJnK+g5cqex7IFAp6ozzlRStySk61Rp6d+YGrqZ6/P0PA==}
     engines: {node: '>=14.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: glibc
 
   sass-embedded-linux-musl-arm64@1.93.2:
     resolution: {integrity: sha512-+3EHuDPkMiAX5kytsjEC1bKZCawB9J6pm2eBIzzLMPWbf5xdx++vO1DpT7hD4bm4ZGn0eVHgSOKIfP6CVz6tVg==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: musl
 
   sass-embedded-linux-musl-arm@1.93.2:
     resolution: {integrity: sha512-XBTvx66yRenvEsp3VaJCb3HQSyqCsUh7R+pbxcN5TuzueybZi0LXvn9zneksdXcmjACMlMpIVXi6LyHPQkYc8A==}
     engines: {node: '>=14.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: musl
 
   sass-embedded-linux-musl-riscv64@1.93.2:
     resolution: {integrity: sha512-0sB5kmVZDKTYzmCSlTUnjh6mzOhzmQiW/NNI5g8JS4JiHw2sDNTvt1dsFTuqFkUHyEOY3ESTsfHHBQV8Ip4bEA==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: musl
 
   sass-embedded-linux-musl-x64@1.93.2:
     resolution: {integrity: sha512-t3ejQ+1LEVuHy7JHBI2tWHhoMfhedUNDjGJR2FKaLgrtJntGnyD1RyX0xb3nuqL/UXiEAtmTmZY+Uh3SLUe1Hg==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: musl
 
   sass-embedded-linux-riscv64@1.93.2:
     resolution: {integrity: sha512-e7AndEwAbFtXaLy6on4BfNGTr3wtGZQmypUgYpSNVcYDO+CWxatKVY4cxbehMPhxG9g5ru+eaMfynvhZt7fLaA==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: glibc
 
   sass-embedded-linux-x64@1.93.2:
     resolution: {integrity: sha512-U3EIUZQL11DU0xDDHXexd4PYPHQaSQa2hzc4EzmhHqrAj+TyfYO94htjWOd+DdTPtSwmLp+9cTWwPZBODzC96w==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: glibc
 
   sass-embedded-unknown-all@1.93.2:
     resolution: {integrity: sha512-7VnaOmyewcXohiuoFagJ3SK5ddP9yXpU0rzz+pZQmS1/+5O6vzyFCUoEt3HDRaLctH4GT3nUGoK1jg0ae62IfQ==}
@@ -5441,10 +5543,20 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
+  seroval-plugins@1.5.4:
+    resolution: {integrity: sha512-S0xQPhUTefAhNvNWFg0c1J8qJArHt5KdtJ/cFAofo06KD1MVSeFWyl4iiu+ApDIuw0WhjpOfCdgConOfAnLgkw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
   seroval@1.3.2:
     resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
     engines: {node: '>=10'}
 
+  seroval@1.5.4:
+    resolution: {integrity: sha512-46uFvgrXTVxZcUorgSSRZ4y+ieqLLQRMlG4bnCZKW3qI6BZm7Rg4ntMW4p1mILEEBZWrFlcpp0AyIIlM6jD9iw==}
+    engines: {node: '>=10'}
+
   serve-placeholder@2.0.2:
     resolution: {integrity: sha512-/TMG8SboeiQbZJWRlfTCqMs2DD3SZgWp0kDQePz9yUuCnDfDh/92gf7/PxGhzXTKBIPASIHxFcZndoNbp6QOLQ==}
 
@@ -5504,6 +5616,9 @@ packages:
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
+  solid-js@1.9.13:
+    resolution: {integrity: sha512-6hJeJMOcEX8ktqjpDoJZEmld3ijvcvWBDtiXBm7f4332SiFN66QeAQI1REQshvyUoISsSeJ4PHDauKYbwao9JQ==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -5745,12 +5860,12 @@ packages:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
     peerDependencies:
-      typescript: '>=4.8.4'
+      typescript: npm:tslite@latest
 
   ts-declaration-location@1.0.7:
     resolution: {integrity: sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==}
     peerDependencies:
-      typescript: '>=4.0.0'
+      typescript: npm:tslite@latest
 
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
@@ -6019,7 +6134,7 @@ packages:
       optionator: ^0.9.4
       oxlint: '>=1'
       stylelint: '>=16'
-      typescript: '*'
+      typescript: npm:tslite@latest
       vite: '>=5.4.20'
       vls: '*'
       vti: '*'
@@ -6145,7 +6260,7 @@ packages:
   vue@3.5.25:
     resolution: {integrity: sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==}
     peerDependencies:
-      typescript: '*'
+      typescript: npm:tslite@latest
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -6496,6 +6611,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/runtime@7.29.2': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -6557,6 +6674,11 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
+  '@cyolosecurity/asciinema-player@3.6.3-3':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      solid-js: 1.9.13
+
   '@dxup/nuxt@0.2.2(magicast@0.5.1)':
     dependencies:
       '@dxup/unimport': 0.1.2
@@ -10239,6 +10361,8 @@ snapshots:
       web-streams-polyfill: 3.3.3
     optional: true
 
+  fflate@0.8.3: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -10473,6 +10597,8 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  guacamole-common-js-jumpserver@1.1.0-c: {}
+
   gzip-size@7.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -10663,6 +10789,8 @@ snapshots:
 
   js-tokens@9.0.1: {}
 
+  js-untar@2.0.0: {}
+
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
@@ -12377,8 +12505,14 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
+  seroval-plugins@1.5.4(seroval@1.5.4):
+    dependencies:
+      seroval: 1.5.4
+
   seroval@1.3.2: {}
 
+  seroval@1.5.4: {}
+
   serve-placeholder@2.0.2:
     dependencies:
       defu: 6.1.4
@@ -12456,6 +12590,12 @@ snapshots:
 
   smob@1.5.0: {}
 
+  solid-js@1.9.13:
+    dependencies:
+      csstype: 3.1.3
+      seroval: 1.5.4
+      seroval-plugins: 1.5.4(seroval@1.5.4)
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 18abbb2f8..3698b0108 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -10,6 +10,7 @@ dependencies = [
  "axum",
  "chrono",
  "env_logger",
+ "flate2",
  "font-kit",
  "image",
  "keyring",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index fb67b48da..5ae71bf99 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -26,6 +26,7 @@ image = "0.25.8"
 oauth2 = "5.0.0"
 axum = "0.7"
 chrono = "0.4.41"
+flate2 = "1.1.5"
 font-kit = "0.14"
 anyhow = "1.0.100"
 serde_json = "1.0"
diff --git a/src-tauri/src/commands/get_connect_methods.rs b/src-tauri/src/commands/get_connect_methods.rs
index 237f4607d..496a26e70 100644
--- a/src-tauri/src/commands/get_connect_methods.rs
+++ b/src-tauri/src/commands/get_connect_methods.rs
@@ -35,4 +35,4 @@ pub async fn get_connect_methods(app: AppHandle, site: String, bearer_token: Str
         "get-connect-methods-success",
         json!({ "status": connect_methods_data.status, "data": connect_methods_data.data }),
     );
-}
\ No newline at end of file
+}
diff --git a/src-tauri/src/commands/get_setting.rs b/src-tauri/src/commands/get_setting.rs
index c7c5e0c1d..137f74e0a 100644
--- a/src-tauri/src/commands/get_setting.rs
+++ b/src-tauri/src/commands/get_setting.rs
@@ -22,7 +22,7 @@ pub async fn get_setting(app: AppHandle, site: String, bearer_token: String) {
 
     if !setting_data.success {
         error!("获取 Setting 数据失败");
-        
+
         let _ = app.emit(
             "get-setting-failure",
             json!({ "status": setting_data.status }),
diff --git a/src-tauri/src/commands/logout.rs b/src-tauri/src/commands/logout.rs
index 181658994..b96047e1d 100644
--- a/src-tauri/src/commands/logout.rs
+++ b/src-tauri/src/commands/logout.rs
@@ -16,7 +16,7 @@ pub async fn logout(app: AppHandle, _name: String, site: String) -> Result<(), S
 
 async fn revoke_and_clear_tokens(_app: &AppHandle, site: &str) -> anyhow::Result<()> {
     let token_service = TokenService::new(site.to_string());
-    
+
     if let Some(entry) = token_service.load().await? {
         if let Some(refresh) = entry.refresh_token {
             let client_id = entry
diff --git a/src-tauri/src/commands/mod.rs b/src-tauri/src/commands/mod.rs
index bb7c126de..04666c2ef 100644
--- a/src-tauri/src/commands/mod.rs
+++ b/src-tauri/src/commands/mod.rs
@@ -15,4 +15,5 @@ pub(crate) mod requests;
 pub mod set_favorite;
 pub mod unfavorite;
 pub mod update_config;
+pub mod video_player;
 pub mod window_controls;
diff --git a/src-tauri/src/commands/pull_up.rs b/src-tauri/src/commands/pull_up.rs
index 7c71d635a..301208012 100644
--- a/src-tauri/src/commands/pull_up.rs
+++ b/src-tauri/src/commands/pull_up.rs
@@ -139,7 +139,7 @@ pub fn pull_up(_app: AppHandle, url: String) -> Result<(), String> {
 
     // 使用通道来在后台线程和主线程之间通信
     let (tx, rx) = std::sync::mpsc::channel::<String>();
-    
+
     // 在后台线程中读取 stderr，检查是否有错误输出
     thread::spawn(move || {
         let reader = BufReader::new(stderr);
@@ -208,14 +208,14 @@ pub fn pull_up(_app: AppHandle, url: String) -> Result<(), String> {
 
         thread::sleep(Duration::from_millis(100));
     }
-    
+
     // 最后再检查一次是否有错误消息（防止在循环结束后才收到错误）
     if let Ok(error_msg) = rx.try_recv() {
         let err_msg = format!("Client error: {}", error_msg);
         error!("{}", err_msg);
         return Err(err_msg);
     }
-    
+
     // 如果进程仍在运行，这是正常的，让它在后台继续运行
     // 后续的错误会通过事件发送给前端
 
diff --git a/src-tauri/src/commands/requests.rs b/src-tauri/src/commands/requests.rs
index 80e4b8efa..0b36cbe3c 100644
--- a/src-tauri/src/commands/requests.rs
+++ b/src-tauri/src/commands/requests.rs
@@ -19,7 +19,6 @@ pub trait MaybeJson {
     }
 }
 
-
 #[derive(Debug, Serialize)]
 pub struct ApiResponse {
     pub status: u16,
@@ -42,7 +41,6 @@ where
     }
 }
 
-
 impl MaybeJson for () {
     fn apply(self, rb: reqwest::RequestBuilder) -> reqwest::RequestBuilder {
         rb
diff --git a/src-tauri/src/commands/video_player.rs b/src-tauri/src/commands/video_player.rs
new file mode 100644
index 000000000..c076ed890
--- /dev/null
+++ b/src-tauri/src/commands/video_player.rs
@@ -0,0 +1,159 @@
+use flate2::read::GzDecoder;
+use serde::Serialize;
+use std::fs::{self, File};
+use std::io::{BufReader, Read, Write};
+use std::path::{Path, PathBuf};
+use std::time::{SystemTime, UNIX_EPOCH};
+use tauri::{AppHandle, Emitter, Manager};
+
+const STREAM_CHUNK_SIZE: usize = 64 * 1024;
+
+#[derive(Clone, Serialize)]
+struct FileChunkPayload {
+    chunk: String,
+}
+
+#[derive(Clone, Serialize)]
+struct FileErrorPayload {
+    message: String,
+}
+
+fn player_temp_dir(app: &AppHandle) -> Result<PathBuf, String> {
+    let dir = app
+        .path()
+        .app_data_dir()
+        .map_err(|e| format!("Failed to resolve app data dir: {}", e))?
+        .join("videoplayer");
+
+    if !dir.exists() {
+        fs::create_dir_all(&dir).map_err(|e| format!("Failed to create temp dir: {}", e))?;
+    }
+
+    Ok(dir)
+}
+
+fn sanitize_filename(raw: &str) -> String {
+    let name = Path::new(raw)
+        .file_name()
+        .and_then(|value| value.to_str())
+        .filter(|value| !value.trim().is_empty())
+        .unwrap_or("video-player.tmp");
+
+    name.chars()
+        .map(|ch| match ch {
+            'a'..='z' | 'A'..='Z' | '0'..='9' | '.' | '_' | '-' => ch,
+            _ => '_',
+        })
+        .collect()
+}
+
+fn unique_temp_path(app: &AppHandle, file_name: &str) -> Result<PathBuf, String> {
+    let stamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map(|d| d.as_millis())
+        .unwrap_or(0);
+    let safe_name = sanitize_filename(file_name);
+    Ok(player_temp_dir(app)?.join(format!("{}_{}", stamp, safe_name)))
+}
+
+#[tauri::command]
+pub fn write_video_player_gzip_file(
+    app: AppHandle,
+    buffer: Vec<u8>,
+    file_name: String,
+) -> Result<String, String> {
+    let mut decoder = GzDecoder::new(buffer.as_slice());
+    let output_path = unique_temp_path(&app, &file_name)?;
+    let mut output_file =
+        File::create(&output_path).map_err(|e| format!("Failed to create temp file: {}", e))?;
+
+    let mut chunk = [0_u8; STREAM_CHUNK_SIZE];
+
+    loop {
+        let read = decoder
+            .read(&mut chunk)
+            .map_err(|e| format!("Failed to decompress gzip file: {}", e))?;
+
+        if read == 0 {
+            break;
+        }
+
+        output_file
+            .write_all(&chunk[..read])
+            .map_err(|e| format!("Failed to write temp file: {}", e))?;
+    }
+
+    output_file
+        .flush()
+        .map_err(|e| format!("Failed to flush temp file: {}", e))?;
+
+    Ok(output_path.to_string_lossy().to_string())
+}
+
+#[tauri::command]
+pub fn read_video_player_text_stream(
+    app: AppHandle,
+    event_id: String,
+    file_path: String,
+) -> Result<(), String> {
+    let chunk_event = format!("videoplayer://{}/chunk", event_id);
+    let end_event = format!("videoplayer://{}/end", event_id);
+    let error_event = format!("videoplayer://{}/error", event_id);
+
+    let file = match File::open(&file_path) {
+        Ok(file) => file,
+        Err(e) => {
+            let _ = app.emit(
+                &error_event,
+                FileErrorPayload {
+                    message: format!("Failed to open file: {}", e),
+                },
+            );
+            return Err(format!("Failed to open file: {}", e));
+        }
+    };
+
+    let mut reader = BufReader::new(file);
+    let mut chunk = vec![0_u8; STREAM_CHUNK_SIZE];
+
+    loop {
+        match reader.read(&mut chunk) {
+            Ok(0) => break,
+            Ok(read) => {
+                let payload = FileChunkPayload {
+                    chunk: String::from_utf8_lossy(&chunk[..read]).to_string(),
+                };
+
+                if let Err(e) = app.emit(&chunk_event, payload) {
+                    return Err(format!("Failed to emit file chunk: {}", e));
+                }
+            }
+            Err(e) => {
+                let message = format!("Failed to read file: {}", e);
+                let _ = app.emit(
+                    &error_event,
+                    FileErrorPayload {
+                        message: message.clone(),
+                    },
+                );
+                return Err(message);
+            }
+        }
+    }
+
+    app.emit(&end_event, ())
+        .map_err(|e| format!("Failed to emit stream end: {}", e))?;
+
+    Ok(())
+}
+
+#[tauri::command]
+pub fn delete_video_player_file(file_path: String) -> Result<(), String> {
+    let path = PathBuf::from(file_path);
+
+    if !path.exists() {
+        return Ok(());
+    }
+
+    fs::remove_file(&path).map_err(|e| format!("Failed to delete file: {}", e))
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 5987d0d09..b8e7c3018 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -23,6 +23,9 @@ use crate::commands::rename_asset::rename;
 use crate::commands::set_favorite::set_favorite;
 use crate::commands::unfavorite::unfavorite;
 use crate::commands::update_config::update_config_selection;
+use crate::commands::video_player::{
+    delete_video_player_file, read_video_player_text_stream, write_video_player_gzip_file,
+};
 use crate::commands::window_controls::{close_window, minimize_window, toggle_maximize_window};
 use crate::utils::is_auth_callback;
 
@@ -197,6 +200,9 @@ pub fn run() {
             update_config_selection,
             init_http_callback_server,
             get_connect_methods,
+            write_video_player_gzip_file,
+            read_video_player_text_stream,
+            delete_video_player_file,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
diff --git a/src-tauri/src/service/connect_methods.rs b/src-tauri/src/service/connect_methods.rs
index cd2b9dbea..66f52b018 100644
--- a/src-tauri/src/service/connect_methods.rs
+++ b/src-tauri/src/service/connect_methods.rs
@@ -17,4 +17,4 @@ impl ConnectMethodsService {
         let url = format!("{}/api/v1/terminal/components/connect-methods/", self.origin);
         get_with_response(&url, &self.bearer_token).await
     }
-}
\ No newline at end of file
+}
diff --git a/src-tauri/src/service/http_callback.rs b/src-tauri/src/service/http_callback.rs
index a5265d0e4..f9f23bf22 100644
--- a/src-tauri/src/service/http_callback.rs
+++ b/src-tauri/src/service/http_callback.rs
@@ -31,7 +31,7 @@ pub async fn start_http_callback_server(app_handle: AppHandle) {
     #[cfg(debug_assertions)]
     {
         let app_handle = Arc::new(app_handle);
-        
+
         let app_handle_clone = app_handle.clone();
         let app = Router::new()
             .route(
diff --git a/src-tauri/src/service/version.rs b/src-tauri/src/service/version.rs
index a5ee510a0..505f25cb0 100644
--- a/src-tauri/src/service/version.rs
+++ b/src-tauri/src/service/version.rs
@@ -17,4 +17,3 @@ impl VersionService {
         get_with_response(&url, "").await
     }
 }
-
diff --git a/ui/components/SideBar/sideBar.vue b/ui/components/SideBar/sideBar.vue
index f1827c711..c85bbc176 100644
--- a/ui/components/SideBar/sideBar.vue
+++ b/ui/components/SideBar/sideBar.vue
@@ -62,6 +62,16 @@ const sideBarItems = computed<NavigationMenuItem[]>(() => {
       icon: "gravity-ui:star",
       to: localePath("favorite"),
       disabled: isLoading.value
+    },
+    {
+      label: t("Menu.Tool"),
+      type: "label"
+    },
+    {
+      label: t("Menu.Player"),
+      icon: "line-md:play",
+      to: localePath("videoplayer"),
+      disabled: isLoading.value
     }
   ];
 });
diff --git a/ui/components/VideoPlayer/Dropzone.vue b/ui/components/VideoPlayer/Dropzone.vue
new file mode 100644
index 000000000..45a9b3c3f
--- /dev/null
+++ b/ui/components/VideoPlayer/Dropzone.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    compact?: boolean;
+  }>(),
+  {
+    compact: false
+  }
+);
+
+const emit = defineEmits<{
+  "select-files": [File[]];
+}>();
+
+function handleDrop(event: DragEvent) {
+  const files = Array.from(event.dataTransfer?.files || []);
+
+  if (files.length > 0) {
+    emit("select-files", files);
+  }
+}
+</script>
+
+<template>
+  <label
+    for="videoplayer-file-input"
+    class="group relative flex h-full w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-3xl border border-dashed border-(--ui-border) bg-[radial-gradient(circle_at_top,_rgba(26,179,148,0.16),_transparent_46%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] text-center transition hover:border-(--ui-primary) hover:bg-[radial-gradient(circle_at_top,_rgba(26,179,148,0.22),_transparent_52%),linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03))]"
+    :class="props.compact ? 'min-h-0 px-5 py-6' : 'min-h-0 px-6 py-8 md:px-8 md:py-10'"
+    @dragover.prevent
+    @drop.prevent="handleDrop"
+  >
+    <div
+      class="absolute inset-x-12 top-0 h-px bg-gradient-to-r from-transparent via-(--ui-primary) to-transparent opacity-70"
+    />
+    <div
+      class="mb-4 flex items-center justify-center rounded-2xl bg-black/20 text-(--ui-primary)"
+      :class="props.compact ? 'h-14 w-14 text-3xl' : 'h-16 w-16 md:h-18 md:w-18 text-3xl md:text-4xl'"
+    >
+      <UIcon name="line-md:upload-loop" />
+    </div>
+    <h2
+      class="font-semibold tracking-tight text-(--ui-text-highlighted)"
+      :class="props.compact ? 'text-lg' : 'text-xl md:text-2xl'"
+    >
+      导入录像文件
+    </h2>
+    <p class="mt-3 max-w-xl text-(--ui-text-muted)" :class="props.compact ? 'text-xs leading-5' : 'text-sm leading-6'">
+      支持拖入或选择 `.mp4 .gz .tar` 包。
+    </p>
+    <div :class="props.compact ? 'mt-5' : 'mt-6 md:mt-8'">
+      <UButton color="neutral" variant="soft" :size="props.compact ? 'md' : 'lg'">选择文件</UButton>
+    </div>
+  </label>
+</template>
diff --git a/ui/components/VideoPlayer/Playlist.vue b/ui/components/VideoPlayer/Playlist.vue
new file mode 100644
index 000000000..496fa52cd
--- /dev/null
+++ b/ui/components/VideoPlayer/Playlist.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { VideoPlayerItem, VideoPlayerMeta } from "~/composables/useVideoPlayerParser";
+
+const props = defineProps<{
+  activeId: string | null
+  items: VideoPlayerItem[]
+  meta?: VideoPlayerMeta
+}>();
+
+const emit = defineEmits<{
+  play: [VideoPlayerItem]
+  remove: [VideoPlayerItem]
+}>();
+
+function formatLocalStartTime(value?: string) {
+  if (!value) return "-";
+
+  const normalized = value
+    .replace(/\//g, "-")
+    .replace(" ", "T")
+    .replace(/ ([+-]\d{2})(\d{2})$/, "$1:$2");
+
+  const date = new Date(normalized);
+
+  if (Number.isNaN(date.getTime())) {
+    return value.replace(/\s+[+-]\d{4}$/, "");
+  }
+
+  return new Intl.DateTimeFormat("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  }).format(date);
+}
+
+function formatDuration(duration?: string, startAt?: string, endAt?: string) {
+  if (duration) return duration;
+  if (!startAt || !endAt) return "-";
+
+  const normalizedStart = startAt
+    .replace(/\//g, "-")
+    .replace(" ", "T")
+    .replace(/ ([+-]\d{2})(\d{2})$/, "$1:$2");
+  const normalizedEnd = endAt
+    .replace(/\//g, "-")
+    .replace(" ", "T")
+    .replace(/ ([+-]\d{2})(\d{2})$/, "$1:$2");
+
+  const start = new Date(normalizedStart);
+  const end = new Date(normalizedEnd);
+  const diff = end.getTime() - start.getTime();
+
+  if (!Number.isFinite(diff) || diff < 0) return "-";
+
+  const totalSeconds = Math.floor(diff / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return [hours, minutes, seconds].map((value) => `${value}`.padStart(2, "0")).join(":");
+}
+
+</script>
+
+<template>
+  <div
+    class="flex h-full min-h-0 flex-col rounded-2xl border-0 bg-(--ui-bg-elevated)/70 shadow-xl shadow-black/10 backdrop-blur"
+    style="padding: 15px;"
+  >
+    <div class="mb-3 flex items-center justify-between">
+      <div class="min-w-0">
+        <h3 class="truncate text-sm font-semibold tracking-wide text-(--ui-text-highlighted)">
+          播放列表
+        </h3>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="rounded-full bg-(--ui-primary)/15 px-2.5 py-1 text-xs font-medium text-(--ui-primary)">
+          {{ items.length }}
+        </span>
+        <label
+          for="videoplayer-file-input"
+          class="cursor-pointer rounded-full bg-(--ui-bg-muted) px-3 py-1 text-xs font-medium text-(--ui-text-toned) transition hover:bg-(--ui-bg-accented)"
+        >
+          添加录像
+        </label>
+      </div>
+    </div>
+
+    <div class="flex h-[calc(100%-3.2rem)] flex-col gap-2 overflow-y-auto pr-1">
+      <button
+        v-for="(item, index) in items"
+        :key="item.id"
+        class="group flex items-start justify-between rounded-2xl border px-3 py-3 text-left transition-colors duration-150"
+        :class="item.id === activeId
+          ? 'border-(--ui-primary) bg-(--ui-primary)/10'
+          : 'border-(--ui-border) bg-(--ui-bg-muted) hover:border-(--ui-primary)/50 hover:bg-(--ui-bg-accented)'"
+        @click="emit('play', item)"
+      >
+        <div class="min-w-0">
+          <div class="flex items-center gap-2">
+            <p
+              v-if="item.partTotal && item.partTotal > 1"
+              class="text-[11px] uppercase tracking-[0.18em] text-(--ui-text-dimmed)"
+            >
+              Part {{ item.partIndex }} / {{ item.partTotal }}
+            </p>
+            <span class="rounded-full bg-(--ui-bg-muted) px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-(--ui-text-toned)">
+              {{ item.type }}
+            </span>
+          </div>
+          <p class="mt-1 truncate text-sm font-medium text-(--ui-text-highlighted)">
+            {{ item.meta?.asset || item.recordingLabel || item.name }}
+          </p>
+          <p class="mt-1 truncate text-[11px] text-(--ui-text-muted)">
+            开始时间 {{ formatLocalStartTime(item.meta?.date_start) }}
+          </p>
+          <p class="mt-1 text-[11px] text-(--ui-text-muted)">
+            总时长 {{ formatDuration(item.meta?.duration, item.meta?.date_start, item.meta?.date_end) }}
+          </p>
+        </div>
+        <UButton
+          color="neutral"
+          variant="ghost"
+          icon="line-md:close-small"
+          class="opacity-70 group-hover:opacity-100"
+          @click.stop="emit('remove', item)"
+        />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/ui/components/VideoPlayer/players/AsciinemaPlayer.vue b/ui/components/VideoPlayer/players/AsciinemaPlayer.vue
new file mode 100644
index 000000000..a21edf82f
--- /dev/null
+++ b/ui/components/VideoPlayer/players/AsciinemaPlayer.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import * as AsciinemaPlayer from "@cyolosecurity/asciinema-player";
+
+const props = defineProps<{
+  source: string
+}>();
+
+const terminalRef = ref<HTMLElement | null>(null);
+
+function mountPlayer() {
+  if (!terminalRef.value) return;
+
+  terminalRef.value.innerHTML = "";
+  AsciinemaPlayer.create(props.source, terminalRef.value, {
+    fit: "both",
+    preload: true,
+    autoplay: true,
+    terminalFontSize: "14px"
+  });
+}
+
+onMounted(mountPlayer);
+watch(() => props.source, () => nextTick(mountPlayer));
+</script>
+
+<template>
+  <div class="relative isolate h-full w-full overflow-hidden bg-black">
+    <div ref="terminalRef" class="h-full w-full overflow-hidden" />
+  </div>
+</template>
+
+<style scoped>
+@import "@cyolosecurity/asciinema-player/dist/bundle/asciinema-player.css";
+
+:deep(.ap-wrapper) {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+:deep(.ap-wrapper),
+:deep(.ap-player) {
+  width: 100%;
+  height: 100%;
+}
+
+:deep(.ap-player) {
+  overflow: hidden;
+}
+
+:deep(.ap-player),
+:deep(.ap-terminal),
+:deep(.xterm) {
+  position: relative;
+  z-index: 0;
+  max-width: 100%;
+}
+
+:deep(.ap-terminal) {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+:deep(.xterm),
+:deep(.xterm-screen),
+:deep(.xterm-viewport) {
+  width: 100% !important;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+:deep(.xterm-viewport) {
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  scrollbar-gutter: stable;
+}
+
+:deep(.xterm-screen canvas) {
+  max-width: 100%;
+}
+</style>
diff --git a/ui/components/VideoPlayer/players/GuaPlayer.vue b/ui/components/VideoPlayer/players/GuaPlayer.vue
new file mode 100644
index 000000000..f5d53bbaa
--- /dev/null
+++ b/ui/components/VideoPlayer/players/GuaPlayer.vue
@@ -0,0 +1,535 @@
+<script setup lang="ts">
+import { gunzipSync } from "fflate";
+import * as Guacamole from "guacamole-common-js-jumpserver/dist/guacamole-common";
+
+const props = defineProps<{
+  source: string
+}>();
+
+const { streamTextFile } = useVideoPlayerTauri();
+
+const playerAreaRef = ref<HTMLElement | null>(null);
+const canvasRef = ref<HTMLElement | null>(null);
+const displayViewportRef = ref<HTMLElement | null>(null);
+const displayHostRef = ref<HTMLElement | null>(null);
+const loading = ref(false);
+const isPlaying = ref(false);
+const isSeeking = ref(false);
+const scale = ref(1);
+const duration = ref(0);
+const currentPosition = ref(0);
+const errorMessage = ref("");
+
+let tunnel: any = null;
+let recording: any = null;
+let display: any = null;
+let visibleBounds: { left: number, top: number, width: number, height: number } | null = null;
+
+function zeroPad(num: number) {
+  return `${num}`.padStart(2, "0");
+}
+
+function formatTime(millis: number) {
+  const totalSeconds = Math.floor(millis / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return hours > 0
+    ? `${zeroPad(hours)}:${zeroPad(minutes)}:${zeroPad(seconds)}`
+    : `${zeroPad(minutes)}:${zeroPad(seconds)}`;
+}
+
+const currentLabel = computed(() => formatTime(currentPosition.value));
+const durationLabel = computed(() => formatTime(duration.value));
+
+function detectVisibleBounds() {
+  const layer = display?.getDefaultLayer?.();
+  const canvas = layer?.getCanvas?.() as HTMLCanvasElement | undefined;
+
+  if (!canvas) {
+    return {
+      left: 0,
+      top: 0,
+      width: layer?.width || 1024,
+      height: layer?.height || 768
+    };
+  }
+
+  const width = canvas.width || layer?.width || 1024;
+  const height = canvas.height || layer?.height || 768;
+
+  try {
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+
+    if (!context) {
+      return { left: 0, top: 0, width, height };
+    }
+
+    const image = context.getImageData(0, 0, width, height).data;
+    const xStep = Math.max(2, Math.floor(width / 240));
+    const yStep = Math.max(2, Math.floor(height / 240));
+
+    const rowHasContent = (y: number) => {
+      for (let x = 0; x < width; x += xStep) {
+        const index = (y * width + x) * 4;
+        const a = image[index + 3];
+
+        if (a > 0) {
+          return true;
+        }
+      }
+
+      return false;
+    };
+
+    const columnHasContent = (x: number, top: number, bottom: number) => {
+      for (let y = top; y <= bottom; y += yStep) {
+        const index = (y * width + x) * 4;
+        const a = image[index + 3];
+
+        if (a > 0) {
+          return true;
+        }
+      }
+
+      return false;
+    };
+
+    let top = 0;
+    let bottom = height - 1;
+    let left = 0;
+    let right = width - 1;
+
+    while (top < bottom && !rowHasContent(top)) {
+      top += yStep;
+    }
+
+    while (bottom > top && !rowHasContent(bottom)) {
+      bottom -= yStep;
+    }
+
+    while (left < right && !columnHasContent(left, top, bottom)) {
+      left += xStep;
+    }
+
+    while (right > left && !columnHasContent(right, top, bottom)) {
+      right -= xStep;
+    }
+
+    if (right <= left || bottom <= top) {
+      return { left: 0, top: 0, width, height };
+    }
+
+    const paddingX = xStep * 2;
+    const paddingY = yStep * 2;
+
+    return {
+      left: Math.max(0, left - paddingX),
+      top: Math.max(0, top - paddingY),
+      width: Math.min(width, right - left + paddingX * 2),
+      height: Math.min(height, bottom - top + paddingY * 2)
+    };
+  } catch {
+    return { left: 0, top: 0, width, height };
+  }
+}
+
+function resetVisibleBounds() {
+  visibleBounds = null;
+}
+
+function mergeVisibleBounds(nextBounds: { left: number, top: number, width: number, height: number }) {
+  const layer = display?.getDefaultLayer?.();
+  const fullWidth = layer?.width || 1024;
+  const fullHeight = layer?.height || 768;
+  const nextRight = Math.min(fullWidth, nextBounds.left + nextBounds.width);
+  const nextBottom = Math.min(fullHeight, nextBounds.top + nextBounds.height);
+
+  if (!visibleBounds) {
+    visibleBounds = {
+      left: Math.max(0, nextBounds.left),
+      top: Math.max(0, nextBounds.top),
+      width: Math.max(1, nextRight - Math.max(0, nextBounds.left)),
+      height: Math.max(1, nextBottom - Math.max(0, nextBounds.top))
+    };
+    return;
+  }
+
+  const currentRight = visibleBounds.left + visibleBounds.width;
+  const currentBottom = visibleBounds.top + visibleBounds.height;
+  const left = Math.max(0, Math.min(visibleBounds.left, nextBounds.left));
+  const top = Math.max(0, Math.min(visibleBounds.top, nextBounds.top));
+  const right = Math.min(fullWidth, Math.max(currentRight, nextRight));
+  const bottom = Math.min(fullHeight, Math.max(currentBottom, nextBottom));
+
+  visibleBounds = {
+    left,
+    top,
+    width: Math.max(1, right - left),
+    height: Math.max(1, bottom - top)
+  };
+}
+
+function sampleVisibleBounds() {
+  const layer = display?.getDefaultLayer?.();
+
+  if (!layer) return;
+
+  const fullWidth = layer.width || 1024;
+  const fullHeight = layer.height || 768;
+  const nextBounds = detectVisibleBounds();
+
+  if (!nextBounds.width || !nextBounds.height) return;
+
+  const widthRatio = nextBounds.width / fullWidth;
+  const heightRatio = nextBounds.height / fullHeight;
+
+  if (widthRatio > 0.985 && heightRatio > 0.985) {
+    visibleBounds = {
+      left: 0,
+      top: 0,
+      width: fullWidth,
+      height: fullHeight
+    };
+    return;
+  }
+
+  mergeVisibleBounds(nextBounds);
+}
+
+function scheduleBoundsSampling() {
+  [80, 220, 480, 900].forEach((delay) => {
+    window.setTimeout(() => {
+      sampleVisibleBounds();
+      recomputeScale();
+    }, delay);
+  });
+}
+
+function recomputeScale() {
+  if (!display || !playerAreaRef.value || !displayHostRef.value || !displayViewportRef.value) return;
+
+  const layer = display.getDefaultLayer?.();
+  const displayElement = display.getElement?.() as HTMLElement | undefined;
+
+  if (!layer || !displayElement) return;
+
+  const bounds = visibleBounds || {
+    left: 0,
+    top: 0,
+    width: layer.width || 1024,
+    height: layer.height || 768
+  };
+  const fullWidth = layer.width || 1024;
+  const fullHeight = layer.height || 768;
+  const visibleWidth = bounds.width || fullWidth;
+  const visibleHeight = bounds.height || fullHeight;
+  const width = playerAreaRef.value.clientWidth;
+  const height = playerAreaRef.value.clientHeight;
+
+  if (!width || !height) return;
+
+  const nextScale = Math.max(0.1, Math.min(2, Math.min(width / visibleWidth, height / visibleHeight)));
+  scale.value = Number(nextScale.toFixed(3));
+  display.scale(scale.value);
+
+  displayViewportRef.value.style.width = `${Math.round(visibleWidth * scale.value)}px`;
+  displayViewportRef.value.style.height = `${Math.round(visibleHeight * scale.value)}px`;
+
+  displayElement.style.position = "absolute";
+  displayElement.style.left = `${-bounds.left * scale.value}px`;
+  displayElement.style.top = `${-bounds.top * scale.value}px`;
+  displayElement.style.transformOrigin = "0 0";
+}
+
+function togglePlayback() {
+  if (!recording) return;
+
+  if (recording.isPlaying()) {
+    recording.pause();
+    isPlaying.value = false;
+  } else {
+    recording.play();
+    isPlaying.value = true;
+  }
+}
+
+function seek(event: Event) {
+  if (!recording) return;
+
+  const value = Number((event.target as HTMLInputElement).value);
+  isSeeking.value = true;
+
+  recording.seek(value, () => {
+    currentPosition.value = value;
+    isSeeking.value = false;
+    window.setTimeout(recomputeScale, 50);
+  });
+}
+
+async function loadRecording() {
+  if (!canvasRef.value) return;
+
+  loading.value = true;
+  errorMessage.value = "";
+  resetVisibleBounds();
+
+  tunnel = new Guacamole.StaticHTTPTunnel();
+  recording = new Guacamole.SessionRecording(tunnel);
+  display = recording.getDisplay();
+
+  displayHostRef.value!.innerHTML = "";
+  displayHostRef.value!.appendChild(display.getElement());
+
+  let chunks = "";
+
+  recording.onerror = (message: string) => {
+    errorMessage.value = message;
+    loading.value = false;
+  };
+  recording.onplay = () => {
+    isPlaying.value = true;
+  };
+  recording.onpause = () => {
+    isPlaying.value = false;
+  };
+  recording.onseek = (position: number) => {
+    currentPosition.value = position;
+    sampleVisibleBounds();
+    window.setTimeout(recomputeScale, 30);
+    scheduleBoundsSampling();
+  };
+
+  if (props.source.startsWith("blob:")) {
+    try {
+      const response = await fetch(props.source);
+      const compressed = new Uint8Array(await response.arrayBuffer());
+      const output = gunzipSync(compressed);
+      chunks = new TextDecoder("utf-8").decode(output);
+
+      loading.value = false;
+      recording.connect(chunks);
+      duration.value = recording.getDuration?.() || 0;
+      recording.play();
+      currentPosition.value = 0;
+      sampleVisibleBounds();
+      window.setTimeout(recomputeScale, 80);
+      window.setTimeout(recomputeScale, 240);
+      scheduleBoundsSampling();
+    } catch (error: any) {
+      loading.value = false;
+      errorMessage.value = error?.message || String(error);
+    }
+    return;
+  }
+
+  await streamTextFile(props.source, {
+    onChunk(chunk) {
+      chunks += chunk;
+    },
+    onEnd() {
+      loading.value = false;
+      recording.connect(chunks);
+      duration.value = recording.getDuration?.() || 0;
+      recording.play();
+      currentPosition.value = 0;
+      sampleVisibleBounds();
+      window.setTimeout(recomputeScale, 80);
+      window.setTimeout(recomputeScale, 240);
+      scheduleBoundsSampling();
+    },
+    onError(message) {
+      loading.value = false;
+      errorMessage.value = message;
+    }
+  });
+}
+
+function cleanup() {
+  try {
+    recording?.pause?.();
+    recording?.disconnect?.();
+  } catch {
+    // ignore cleanup errors
+  }
+
+  if (displayHostRef.value) {
+    displayHostRef.value.innerHTML = "";
+  }
+
+  tunnel = null;
+  recording = null;
+  display = null;
+  resetVisibleBounds();
+  isPlaying.value = false;
+  currentPosition.value = 0;
+  duration.value = 0;
+}
+
+function handleResize() {
+  recomputeScale();
+}
+
+onMounted(async () => {
+  const originalToCanvas = Guacamole.Layer.prototype.toCanvas;
+  Guacamole.Layer.prototype.toCanvas = function () {
+    if (this.width === 0 || this.height === 0) {
+      const fallback = document.createElement("canvas");
+      fallback.width = Math.max(this.width || 1, 1);
+      fallback.height = Math.max(this.height || 1, 1);
+      return fallback;
+    }
+
+    try {
+      return originalToCanvas.call(this);
+    } catch {
+      const fallback = document.createElement("canvas");
+      fallback.width = Math.max(this.width || 1, 1);
+      fallback.height = Math.max(this.height || 1, 1);
+      return fallback;
+    }
+  };
+
+  window.addEventListener("resize", handleResize);
+  await loadRecording();
+});
+
+watch(() => props.source, async () => {
+  cleanup();
+  await nextTick();
+  await loadRecording();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize);
+  cleanup();
+});
+</script>
+
+<template>
+  <div class="relative isolate flex h-full min-w-0 flex-col gap-0 overflow-hidden">
+    <div ref="playerAreaRef" class="relative min-h-0 min-w-0 flex-1 overflow-hidden bg-black/70">
+      <div
+        v-if="loading"
+        class="absolute inset-0 z-10 flex items-center justify-center bg-black/40 text-sm text-white/80"
+      >
+        正在解析录像…
+      </div>
+
+      <div
+        v-if="errorMessage"
+        class="absolute inset-0 z-10 flex items-center justify-center bg-black/65 px-6 text-center text-sm text-red-200"
+      >
+        {{ errorMessage }}
+      </div>
+
+      <div ref="canvasRef" class="relative flex h-full w-full items-center justify-center overflow-hidden">
+        <div
+          ref="displayViewportRef"
+          class="relative shrink-0 overflow-hidden"
+        >
+          <div ref="displayHostRef" class="relative h-full w-full overflow-hidden" />
+        </div>
+      </div>
+    </div>
+
+    <div class="gua-controls flex items-center gap-3 rounded-none px-3 py-2">
+      <button
+        class="gua-play-button"
+        :disabled="loading || !!errorMessage"
+        type="button"
+        @click="togglePlayback"
+      >
+        <UIcon :name="isPlaying ? 'line-md:pause' : 'line-md:play-filled'" class="text-xl" />
+      </button>
+      <div class="w-22 text-xs tabular-nums text-(--ui-text-muted)">
+        {{ currentLabel }} / {{ durationLabel }}
+      </div>
+      <input
+        class="gua-range h-2 flex-1 cursor-pointer"
+        type="range"
+        min="0"
+        :max="duration"
+        :value="currentPosition"
+        :disabled="loading || isSeeking || !duration"
+        @input="seek"
+      >
+      <div class="w-16 text-right text-[11px] uppercase tracking-[0.16em] text-(--ui-text-dimmed)">
+        {{ Math.round(scale * 100) }}%
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gua-controls {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-elevated) 90%, transparent), color-mix(in srgb, var(--ui-bg) 82%, transparent));
+  border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
+}
+
+.gua-play-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--ui-color-primary-500) 18%, var(--ui-bg-accented));
+  color: var(--ui-text-highlighted);
+  transition:
+    transform 160ms ease,
+    background-color 160ms ease,
+    opacity 160ms ease;
+}
+
+.gua-play-button:hover:not(:disabled) {
+  transform: scale(1.03);
+  background: color-mix(in srgb, var(--ui-color-primary-500) 24%, var(--ui-bg-accented));
+}
+
+.gua-play-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.gua-range {
+  appearance: none;
+  background: transparent;
+}
+
+.gua-range::-webkit-slider-runnable-track {
+  height: 0.28rem;
+  border-radius: 9999px;
+  background: linear-gradient(90deg, var(--ui-color-primary-500), color-mix(in srgb, var(--ui-color-primary-500) 35%, var(--ui-border)));
+}
+
+.gua-range::-webkit-slider-thumb {
+  appearance: none;
+  margin-top: -4px;
+  width: 0.82rem;
+  height: 0.82rem;
+  border: 2px solid color-mix(in srgb, white 92%, transparent);
+  border-radius: 9999px;
+  background: var(--ui-color-primary-500);
+  box-shadow: 0 2px 10px color-mix(in srgb, black 25%, transparent);
+}
+
+.gua-range::-moz-range-track {
+  height: 0.28rem;
+  border: 0;
+  border-radius: 9999px;
+  background: linear-gradient(90deg, var(--ui-color-primary-500), color-mix(in srgb, var(--ui-color-primary-500) 35%, var(--ui-border)));
+}
+
+.gua-range::-moz-range-thumb {
+  width: 0.82rem;
+  height: 0.82rem;
+  border: 2px solid color-mix(in srgb, white 92%, transparent);
+  border-radius: 9999px;
+  background: var(--ui-color-primary-500);
+  box-shadow: 0 2px 10px color-mix(in srgb, black 25%, transparent);
+}
+</style>
diff --git a/ui/components/VideoPlayer/players/Mp4Player.vue b/ui/components/VideoPlayer/players/Mp4Player.vue
new file mode 100644
index 000000000..45cc55461
--- /dev/null
+++ b/ui/components/VideoPlayer/players/Mp4Player.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  source: string
+}>();
+</script>
+
+<template>
+  <video class="h-full w-full bg-black object-contain" controls autoplay playsinline>
+    <source :src="source" type="video/mp4">
+  </video>
+</template>
diff --git a/ui/composables/useVideoPlayerParser.ts b/ui/composables/useVideoPlayerParser.ts
new file mode 100644
index 000000000..925d9cbee
--- /dev/null
+++ b/ui/composables/useVideoPlayerParser.ts
@@ -0,0 +1,321 @@
+// @ts-expect-error library ships without useful ESM typings
+import untar from "js-untar";
+import { gunzipSync } from "fflate";
+
+export type VideoPlayerItemType = "mp4" | "cast" | "gua" | "part";
+
+export interface VideoPlayerMeta {
+  account?: string
+  user?: string
+  asset?: string
+  protocol?: string
+  command_amount?: number
+  date_end?: string
+  date_start?: string
+  duration?: string
+  files?: VideoPlayerFileMeta[]
+}
+
+export interface VideoPlayerFileMeta {
+  name?: string
+  start?: number
+  end?: number
+  duration?: number
+}
+
+interface EffectiveItemMeta extends VideoPlayerMeta {
+  fileStart?: number
+  fileEnd?: number
+  fileDuration?: number
+}
+
+export interface VideoPlayerItem {
+  id: string
+  name: string
+  source: string
+  type: VideoPlayerItemType
+  meta: VideoPlayerMeta
+  recordingId: string
+  recordingLabel: string
+  partIndex?: number
+  partTotal?: number
+  tempPath?: string
+}
+
+interface ParseResult {
+  items: VideoPlayerItem[]
+}
+
+interface UntarEntry {
+  name: string
+  buffer: ArrayBuffer
+}
+
+const REGEXP = /\.(json|replay|cast|part)(\.mp4|\.json|\.gz)?$/;
+
+function createId(prefix: string) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function stripArchiveExtension(fileName: string) {
+  return fileName
+    .replace(/\.tar$/i, "")
+    .replace(/\.cast\.gz$/i, "")
+    .replace(/\.replay\.gz$/i, "")
+    .replace(/\.part\.gz$/i, "")
+    .replace(/\.mp4$/i, "");
+}
+
+function safeParseJson(buffer: ArrayBuffer): VideoPlayerMeta | null {
+  try {
+    const text = new TextDecoder("utf-8").decode(new Uint8Array(buffer));
+    return JSON.parse(text) as VideoPlayerMeta;
+  } catch {
+    return null;
+  }
+}
+
+function formatMillisDuration(millis?: number) {
+  if (!millis || millis < 0) return undefined;
+
+  const totalSeconds = Math.floor(millis / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${hours}:${`${minutes}`.padStart(2, "0")}:${`${seconds}`.padStart(2, "0")}`;
+}
+
+function formatTimestamp(millis?: number) {
+  if (!millis || millis < 0) return undefined;
+
+  const date = new Date(millis);
+
+  if (Number.isNaN(date.getTime())) return undefined;
+
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+  const hours = `${date.getHours()}`.padStart(2, "0");
+  const minutes = `${date.getMinutes()}`.padStart(2, "0");
+  const seconds = `${date.getSeconds()}`.padStart(2, "0");
+
+  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+}
+
+function resolveItemMeta(meta: VideoPlayerMeta | null, entryName: string): EffectiveItemMeta {
+  if (!meta) return {};
+
+  const fileMeta = meta.files?.find(file => file.name === entryName);
+
+  return {
+    ...meta,
+    date_start: formatTimestamp(fileMeta?.start) || meta.date_start,
+    date_end: formatTimestamp(fileMeta?.end) || meta.date_end,
+    duration: formatMillisDuration(fileMeta?.duration) || meta.duration,
+    fileStart: fileMeta?.start,
+    fileEnd: fileMeta?.end,
+    fileDuration: fileMeta?.duration
+  };
+}
+
+function toMp4Url(buffer: ArrayBuffer) {
+  const blob = new Blob([new Uint8Array(buffer)], { type: "video/mp4" });
+  return URL.createObjectURL(blob);
+}
+
+function toCastUrl(buffer: ArrayBuffer) {
+  const blob = new Blob([buffer], { type: "application/json" });
+  return URL.createObjectURL(blob);
+}
+
+function toGzipUrl(buffer: ArrayBuffer) {
+  const blob = new Blob([buffer], { type: "application/gzip" });
+  return URL.createObjectURL(blob);
+}
+
+function withMeta(item: Omit<VideoPlayerItem, "id" | "meta">, meta: VideoPlayerMeta | null): VideoPlayerItem {
+  return {
+    id: createId(item.name),
+    meta: meta || {},
+    ...item
+  };
+}
+
+export function useVideoPlayerParser() {
+  async function buildItemFromEntry(
+    entry: UntarEntry,
+    meta: VideoPlayerMeta | null
+  ): Promise<VideoPlayerItem | null> {
+    const match = entry.name.match(REGEXP);
+    const kind = match?.[1];
+    const effectiveMeta = resolveItemMeta(meta, entry.name);
+
+    switch (kind) {
+      case "replay": {
+        const isGua = entry.name.split(".")[2] === "gz";
+
+        if (isGua) {
+          return withMeta(
+            {
+              name: entry.name,
+              source: toGzipUrl(entry.buffer),
+              type: "gua"
+            },
+            effectiveMeta
+          );
+        }
+
+        return withMeta(
+          {
+            name: entry.name,
+            source: toMp4Url(entry.buffer),
+            type: "mp4"
+          },
+          effectiveMeta
+        );
+      }
+      case "cast": {
+        const output = gunzipSync(new Uint8Array(entry.buffer));
+        return withMeta(
+          {
+            name: entry.name,
+            source: toCastUrl(output.buffer.slice(output.byteOffset, output.byteOffset + output.byteLength)),
+            type: "cast"
+          },
+          effectiveMeta
+        );
+      }
+      case "part": {
+        return withMeta(
+          {
+            name: entry.name,
+            source: toGzipUrl(entry.buffer),
+            type: "part"
+          },
+            effectiveMeta
+          );
+      }
+      default:
+        return null;
+    }
+  }
+
+  async function parseTarFile(file: File): Promise<ParseResult> {
+    const recordingId = createId(file.name);
+    const recordingLabel = stripArchiveExtension(file.name);
+    const extractedFiles = await untar(await file.arrayBuffer()).progress(() => {});
+    let meta: VideoPlayerMeta | null = null;
+    const items: VideoPlayerItem[] = [];
+
+    for (const entry of extractedFiles as UntarEntry[]) {
+      const match = entry.name.match(REGEXP);
+
+      if (!match) continue;
+
+      if (match[0] === ".replay.json" || match[1] === "json") {
+        meta = safeParseJson(entry.buffer) || meta;
+      }
+    }
+
+    for (const entry of extractedFiles as UntarEntry[]) {
+      const match = entry.name.match(REGEXP);
+
+      if (!match || match[1] === "json" || match[0] === ".replay.json") continue;
+
+      const item = await buildItemFromEntry(entry, meta);
+
+      if (item) {
+        items.push({
+          ...item,
+          recordingId,
+          recordingLabel
+        });
+      }
+    }
+
+    const hasExplicitParts = (meta?.files?.length || 0) > 1;
+
+    if (hasExplicitParts) {
+      items.forEach((item, index) => {
+        if (item.type === "part") {
+          item.partIndex = index + 1;
+          item.partTotal = items.length;
+        }
+      });
+    }
+
+    return { items };
+  }
+
+  async function parseSingleFile(file: File): Promise<ParseResult> {
+    const fileName = file.name;
+    const recordingId = createId(fileName);
+    const recordingLabel = stripArchiveExtension(fileName);
+    const items: VideoPlayerItem[] = [];
+
+    if (fileName.endsWith(".mp4")) {
+      items.push(withMeta({
+        name: fileName,
+        source: toMp4Url(await file.arrayBuffer()),
+        type: "mp4",
+        recordingId,
+        recordingLabel
+      }, null));
+      return { items };
+    }
+
+    if (fileName.endsWith(".cast.gz")) {
+      const output = gunzipSync(new Uint8Array(await file.arrayBuffer()));
+      items.push(withMeta({
+        name: fileName,
+        source: toCastUrl(output.buffer.slice(output.byteOffset, output.byteOffset + output.byteLength)),
+        type: "cast",
+        recordingId,
+        recordingLabel
+      }, null));
+      return { items };
+    }
+
+    if (fileName.endsWith(".replay.gz")) {
+      items.push(withMeta({
+        name: fileName,
+        source: URL.createObjectURL(file),
+        type: "gua",
+        recordingId,
+        recordingLabel
+      }, null));
+      return { items };
+    }
+
+    if (fileName.endsWith(".part.gz")) {
+      items.push(withMeta({
+        name: fileName,
+        source: URL.createObjectURL(file),
+        type: "part",
+        recordingId,
+        recordingLabel
+      }, null));
+      return { items };
+    }
+
+    return { items };
+  }
+
+  async function parseFiles(files: File[]) {
+    const items: VideoPlayerItem[] = [];
+
+    for (const file of files) {
+      const result = file.name.includes(".tar")
+        ? await parseTarFile(file)
+        : await parseSingleFile(file);
+      items.push(...result.items);
+    }
+
+    return items;
+  }
+
+  return {
+    parseFiles
+  };
+}
diff --git a/ui/composables/useVideoPlayerTauri.ts b/ui/composables/useVideoPlayerTauri.ts
new file mode 100644
index 000000000..214023bf1
--- /dev/null
+++ b/ui/composables/useVideoPlayerTauri.ts
@@ -0,0 +1,54 @@
+interface StreamHandlers {
+  onChunk: (chunk: string) => void
+  onEnd: () => void
+  onError: (message: string) => void
+}
+
+export function useVideoPlayerTauri() {
+  const invoke = useTauriCoreInvoke;
+  const listen = useTauriEventListen;
+
+  async function writeGzipFile(buffer: ArrayBuffer, fileName: string) {
+    return await invoke<string>("write_video_player_gzip_file", {
+      buffer: Array.from(new Uint8Array(buffer)),
+      fileName
+    });
+  }
+
+  async function deleteTempFile(filePath: string) {
+    await invoke("delete_video_player_file", { filePath });
+  }
+
+  async function streamTextFile(filePath: string, handlers: StreamHandlers) {
+    const eventId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const chunkEvent = `videoplayer://${eventId}/chunk`;
+    const endEvent = `videoplayer://${eventId}/end`;
+    const errorEvent = `videoplayer://${eventId}/error`;
+
+    const unlistenChunk = await listen(chunkEvent, (event: any) => {
+      handlers.onChunk(event.payload?.chunk || "");
+    });
+    const unlistenEnd = await listen(endEvent, () => {
+      handlers.onEnd();
+    });
+    const unlistenError = await listen(errorEvent, (event: any) => {
+      handlers.onError(event.payload?.message || "Unknown stream error");
+    });
+
+    try {
+      await invoke("read_video_player_text_stream", { eventId, filePath });
+    } catch (error: any) {
+      handlers.onError(error?.toString?.() || String(error));
+    } finally {
+      unlistenChunk();
+      unlistenEnd();
+      unlistenError();
+    }
+  }
+
+  return {
+    writeGzipFile,
+    deleteTempFile,
+    streamTextFile
+  };
+}
diff --git a/ui/pages/videoplayer.vue b/ui/pages/videoplayer.vue
new file mode 100644
index 000000000..4421113af
--- /dev/null
+++ b/ui/pages/videoplayer.vue
@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import type { VideoPlayerItem } from "~/composables/useVideoPlayerParser";
+
+definePageMeta({
+  layout: false
+});
+
+const toast = useToast();
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const isImporting = ref(false);
+const items = ref<VideoPlayerItem[]>([]);
+const activeId = ref<string | null>(null);
+const importMessage = ref("");
+const VIDEO_PLAYER_MIN_WIDTH = 1320;
+const VIDEO_PLAYER_MIN_HEIGHT = 860;
+const VIDEO_PLAYER_TARGET_WIDTH = 1480;
+const VIDEO_PLAYER_TARGET_HEIGHT = 920;
+
+const { parseFiles } = useVideoPlayerParser();
+const { deleteTempFile } = useVideoPlayerTauri();
+const { userTheme, manualSetTheme } = useThemeAdapter();
+
+const currentItem = computed(() => items.value.find((item) => item.id === activeId.value) || null);
+const currentMeta = computed(() => currentItem.value?.meta || items.value[0]?.meta || {});
+const currentIndex = computed(() => items.value.findIndex((item) => item.id === activeId.value) + 1);
+const isDarkMode = computed(() => userTheme.value === "dark");
+
+const playerComponent = computed(() => {
+  switch (currentItem.value?.type) {
+    case "cast":
+      return resolveComponent("VideoPlayerPlayersAsciinemaPlayer");
+    case "gua":
+    case "part":
+      return resolveComponent("VideoPlayerPlayersGuaPlayer");
+    case "mp4":
+      return resolveComponent("VideoPlayerPlayersMp4Player");
+    default:
+      return null;
+  }
+});
+
+const infoCards = computed(() => {
+  const meta = currentMeta.value;
+
+  return [
+    { label: "账号", value: meta.account || "-" },
+    { label: "用户", value: meta.user || "-" },
+    { label: "资产", value: meta.asset || "-" },
+    { label: "协议", value: meta.protocol || "-" },
+    { label: "开始时间", value: meta.date_start || "-" },
+    { label: "时长", value: meta.duration || formatDuration(meta.date_start, meta.date_end) },
+    { label: "片段", value: currentIndex.value > 0 ? `${currentIndex.value} / ${items.value.length}` : "-" }
+  ];
+});
+
+function formatDuration(startAt?: string, endAt?: string) {
+  if (!startAt || !endAt) return "-";
+
+  const start = new Date(startAt);
+  const end = new Date(endAt);
+  const diff = end.getTime() - start.getTime();
+
+  if (!Number.isFinite(diff) || diff < 0) return "-";
+
+  const totalSeconds = Math.floor(diff / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return [hours, minutes, seconds].map((value) => `${value}`.padStart(2, "0")).join(":");
+}
+
+async function cleanupItem(item: VideoPlayerItem) {
+  if (item.source.startsWith("blob:")) {
+    URL.revokeObjectURL(item.source);
+  }
+
+  if (item.tempPath) {
+    try {
+      await deleteTempFile(item.tempPath);
+    } catch {
+      // ignore cleanup errors
+    }
+  }
+}
+
+function selectItem(item: VideoPlayerItem) {
+  activeId.value = item.id;
+}
+
+async function removeItem(item: VideoPlayerItem) {
+  await cleanupItem(item);
+  items.value = items.value.filter((entry) => entry.id !== item.id);
+
+  if (activeId.value === item.id) {
+    activeId.value = items.value[0]?.id || null;
+  }
+}
+
+async function importFiles(files: File[]) {
+  if (files.length === 0) return;
+
+  isImporting.value = true;
+  importMessage.value = `正在导入 ${files.length} 个文件…`;
+
+  try {
+    const parsed = await parseFiles(files);
+
+    if (parsed.length === 0) {
+      importMessage.value = "";
+      toast.add({
+        title: "未识别到可播放文件",
+        description: "请导入 mp4、cast.gz、replay.gz、part.gz 或包含这些文件的 tar 包。",
+        color: "warning"
+      });
+      return;
+    }
+
+    const existingNames = new Set(items.value.map((item) => item.name));
+    const incoming = parsed.filter((item) => !existingNames.has(item.name));
+    const duplicates = parsed.length - incoming.length;
+
+    items.value.push(...incoming);
+
+    if (!activeId.value && incoming[0]) {
+      activeId.value = incoming[0].id;
+    }
+
+    importMessage.value = "";
+
+    if (duplicates > 0) {
+      toast.add({
+        title: "部分文件已跳过",
+        description: `有 ${duplicates} 个同名条目已存在，未重复导入。`,
+        color: "neutral"
+      });
+    }
+  } catch (error: any) {
+    importMessage.value = "";
+    toast.add({
+      title: "导入失败",
+      description: error?.message || String(error),
+      color: "error"
+    });
+  } finally {
+    isImporting.value = false;
+  }
+}
+
+function handleInputChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const files = Array.from(target.files || []);
+  target.value = "";
+  void importFiles(files);
+}
+
+function toggleThemeMode() {
+  manualSetTheme(isDarkMode.value ? "light" : "dark");
+}
+
+async function optimizeWindowForVideoPlayer() {
+  try {
+    const currentWindow = useTauriWindowGetCurrentWindow();
+    const minSize = new useTauriWindowLogicalSize(VIDEO_PLAYER_MIN_WIDTH, VIDEO_PLAYER_MIN_HEIGHT);
+
+    await currentWindow.setMinSize(minSize);
+
+    const currentSize = await currentWindow.innerSize();
+    const scaleFactor = await currentWindow.scaleFactor();
+    const currentLogicalWidth = currentSize.width / scaleFactor;
+    const currentLogicalHeight = currentSize.height / scaleFactor;
+    const nextWidth = Math.max(currentLogicalWidth, VIDEO_PLAYER_TARGET_WIDTH);
+    const nextHeight = Math.max(currentLogicalHeight, VIDEO_PLAYER_TARGET_HEIGHT);
+
+    if (nextWidth !== currentLogicalWidth || nextHeight !== currentLogicalHeight) {
+      await currentWindow.setSize(new useTauriWindowLogicalSize(nextWidth, nextHeight));
+    }
+  } catch (error) {
+    console.debug("optimize video player window failed", error);
+  }
+}
+
+onMounted(async () => {
+  document.title = "JumpServer Video Player";
+
+  try {
+    const currentWindow = useTauriWindowGetCurrentWindow();
+    await currentWindow.setTitle("JumpServer Video Player");
+    await optimizeWindowForVideoPlayer();
+  } catch {
+    // ignore when running in browser
+  }
+});
+
+onBeforeUnmount(async () => {
+  await Promise.all(items.value.map((item) => cleanupItem(item)));
+
+  try {
+    await useTauriWindowGetCurrentWindow().setMinSize(null);
+  } catch {
+    // ignore when running in browser
+  }
+});
+</script>
+
+<template>
+  <div class="videoplayer-page h-screen overflow-hidden">
+    <input
+      id="videoplayer-file-input"
+      ref="fileInputRef"
+      class="sr-only"
+      type="file"
+      multiple
+      accept=".mp4,.gz,.tar,.json"
+      @change="handleInputChange"
+    />
+
+    <div class="mx-auto flex h-full w-full max-w-[1700px] flex-col px-6 py-5 lg:px-8">
+      <header data-tauri-drag-region class="mb-5 flex items-center justify-between gap-4">
+        <div data-tauri-drag-region />
+
+        <div class="flex items-center gap-2">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            :icon="
+              isDarkMode
+                ? 'line-md:moon-filled-to-sunny-filled-loop-transition'
+                : 'line-md:sunny-filled-loop-to-moon-filled-transition'
+            "
+            @click="toggleThemeMode"
+          >
+            {{ isDarkMode ? "切换浅色" : "切换暗色" }}
+          </UButton>
+
+          <UButton color="neutral" variant="ghost" to="/linux">返回主界面</UButton>
+        </div>
+      </header>
+
+      <p v-if="importMessage && items.length === 0" class="mb-4 text-sm text-(--ui-text-muted)">
+        {{ importMessage }}
+      </p>
+
+      <div class="grid min-h-0 flex-1 grid-cols-[minmax(0,1.9fr)_minmax(280px,0.78fr)] gap-5">
+        <section class="grid min-h-0 min-w-0 grid-rows-[minmax(0,1.85fr)_minmax(120px,0.55fr)] gap-3">
+          <div
+            class="flex min-h-0 overflow-hidden rounded-xl border-0 bg-black shadow-xl shadow-black/10 backdrop-blur"
+          >
+            <div class="h-full min-w-0 flex-1 overflow-hidden bg-black">
+              <component :is="playerComponent" v-if="playerComponent && currentItem" :source="currentItem.source" />
+              <label
+                v-else
+                for="videoplayer-file-input"
+                class="group flex h-full w-full cursor-pointer flex-col items-center justify-center gap-4 px-6 py-6 text-center"
+              >
+                <div
+                  class="flex h-16 w-16 items-center justify-center rounded-xl bg-white/8 text-3xl text-(--ui-primary)"
+                >
+                  <UIcon name="line-md:upload-loop" />
+                </div>
+                <div class="max-w-xl">
+                  <p class="text-xl font-semibold tracking-tight text-(--ui-text-highlighted)">导入录像文件</p>
+                  <p class="mt-2 text-sm leading-6 text-(--ui-text-muted)">
+                    将录像拖入播放区，或点击这里选择 `.mp4`、`.gz`、`.tar` 文件。
+                  </p>
+                </div>
+                <div
+                  class="rounded-full border-0 bg-(--ui-bg-muted) px-4 py-2 text-sm text-(--ui-text-toned) transition group-hover:bg-(--ui-bg-accented)"
+                >
+                  选择文件
+                </div>
+              </label>
+            </div>
+          </div>
+
+          <div
+            class="min-h-0 overflow-hidden rounded-xl border-0 bg-(--ui-bg-elevated)/60 px-3 py-2 shadow-lg shadow-black/5 backdrop-blur"
+          >
+            <div class="mb-2 flex items-center gap-2">
+              <p class="text-[11px] uppercase tracking-[0.2em] text-(--ui-text-dimmed)">录像信息</p>
+              <div class="h-px flex-1 bg-(--ui-border)/60" />
+            </div>
+
+            <div class="grid grid-cols-4 gap-1.5 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2">
+              <div
+                v-for="card in infoCards"
+                :key="card.label"
+                class="rounded-lg border border-(--ui-border)/80 bg-transparent px-[3px] py-[3px]"
+              >
+                <p class="text-[10px] uppercase tracking-[0.14em] text-(--ui-text-dimmed)">
+                  {{ card.label }}
+                </p>
+                <p class="mt-0.5 truncate text-[13px] font-medium text-(--ui-text-highlighted)">
+                  {{ card.value }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <aside class="min-h-0 min-w-0 overflow-hidden">
+          <VideoPlayerPlaylist
+            v-if="items.length > 0"
+            :active-id="activeId"
+            :items="items"
+            :meta="currentMeta"
+            @play="selectItem"
+            @remove="removeItem"
+          />
+          <div
+            v-else
+            class="flex h-full min-h-0 flex-col rounded-2xl border-0 bg-(--ui-bg-elevated)/70 shadow-xl shadow-black/10 backdrop-blur"
+            style="padding: 15px"
+          >
+            <div class="mb-4">
+              <p class="text-[11px] uppercase tracking-[0.2em] text-(--ui-text-dimmed)">播放列表</p>
+            </div>
+
+            <div
+              class="flex min-h-0 flex-1 items-center justify-center rounded-xl border border-dashed border-(--ui-border) bg-(--ui-bg-muted) p-3"
+            >
+              <div class="flex max-w-[240px] flex-col items-center text-center">
+                <div
+                  class="flex h-12 w-12 items-center justify-center rounded-xl bg-(--ui-bg-accented) text-2xl text-(--ui-text-dimmed)"
+                >
+                  <UIcon name="line-md:list-3" />
+                </div>
+                <p class="mt-4 text-sm font-medium text-(--ui-text-highlighted)">暂无播放片段</p>
+                <p class="mt-2 text-xs leading-5 text-(--ui-text-muted)">导入录像后，这里会显示可切换的片段列表。</p>
+              </div>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.videoplayer-page {
+  color: var(--ui-text);
+  background:
+    radial-gradient(
+      circle at top left,
+      color-mix(in srgb, var(--ui-color-primary-500) 14%, transparent) 0%,
+      transparent 30%
+    ),
+    radial-gradient(circle at right, color-mix(in srgb, var(--ui-bg-elevated) 65%, transparent) 0%, transparent 26%),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-bg) 90%, var(--ui-bg-elevated) 10%) 0%,
+      color-mix(in srgb, var(--ui-bg) 98%, black 2%) 100%
+    );
+}
+</style>
diff --git a/ui/types/video-player.d.ts b/ui/types/video-player.d.ts
new file mode 100644
index 000000000..20d7e6302
--- /dev/null
+++ b/ui/types/video-player.d.ts
@@ -0,0 +1,17 @@
+declare module "js-untar" {
+  interface UntarEntry {
+    name: string
+    buffer: ArrayBuffer
+  }
+
+  interface UntarResult extends Promise<UntarEntry[]> {
+    progress(callback: (percent: number) => void): UntarResult
+  }
+
+  export default function untar(buffer: ArrayBuffer): UntarResult
+}
+
+declare module "guacamole-common-js-jumpserver/dist/guacamole-common" {
+  const Guacamole: any
+  export = Guacamole
+}