Add internal api get for proxy information

next.config.ts

@@ -5,6 +5,7 @@ const withNextIntl = createNextIntlPlugin();
 
 const nextConfig: NextConfig = {
     reactStrictMode: false,
+    transpilePackages: ["@novnc/novnc"],
     eslint: {
         ignoreDuringBuilds: true
     },

package-lock.json

@@ -11,11 +11,14 @@
             "dependencies": {
                 "@asteasolutions/zod-to-openapi": "8.4.1",
                 "@aws-sdk/client-s3": "3.1011.0",
+                "@devolutions/iron-remote-desktop": "https://static.pangolin.net/packages/devolutions-iron-remote-desktop-0.0.0.tgz",
+                "@devolutions/iron-remote-desktop-rdp": "https://static.pangolin.net/packages/devolutions-iron-remote-desktop-rdp-0.0.0.tgz",
                 "@faker-js/faker": "10.3.0",
                 "@headlessui/react": "2.2.9",
                 "@hookform/resolvers": "5.2.2",
                 "@monaco-editor/react": "4.7.0",
                 "@node-rs/argon2": "2.0.2",
+                "@novnc/novnc": "^1.7.0",
                 "@oslojs/crypto": "1.0.1",
                 "@oslojs/encoding": "1.1.0",
                 "@radix-ui/react-avatar": "1.1.11",
@@ -44,6 +47,9 @@
                 "@tailwindcss/forms": "0.5.11",
                 "@tanstack/react-query": "5.90.21",
                 "@tanstack/react-table": "8.21.3",
+                "@xterm/addon-fit": "^0.11.0",
+                "@xterm/addon-web-links": "^0.12.0",
+                "@xterm/xterm": "^6.0.0",
                 "arctic": "3.7.0",
                 "axios": "1.15.0",
                 "better-sqlite3": "11.9.1",
@@ -1058,7 +1064,6 @@
             "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/code-frame": "^7.29.0",
                 "@babel/generator": "^7.29.0",
@@ -1460,6 +1465,16 @@
             "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
             "license": "MIT"
         },
+        "node_modules/@devolutions/iron-remote-desktop": {
+            "version": "0.0.0",
+            "resolved": "https://static.pangolin.net/packages/devolutions-iron-remote-desktop-0.0.0.tgz",
+            "integrity": "sha512-9o7PkCw9fdvGTPs0hgsUJG10QleGgcdsSCw1ekLpUOlVXtWCuiuPH+0bPDFhLWxqbVA+8pyVhwqdOI+t1T3TNA=="
+        },
+        "node_modules/@devolutions/iron-remote-desktop-rdp": {
+            "version": "0.0.0",
+            "resolved": "https://static.pangolin.net/packages/devolutions-iron-remote-desktop-rdp-0.0.0.tgz",
+            "integrity": "sha512-O0YVpOJDwUzekH3N2QKj+48WP+56wI0sj4VmaJkGoW5XgyAj2ONn2k3i+vk17Eavx+Vg6vAg3lwYRAOK4kKIDQ=="
+        },
         "node_modules/@dotenvx/dotenvx": {
             "version": "1.54.1",
             "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.54.1.tgz",
@@ -2354,7 +2369,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2377,7 +2391,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2400,7 +2413,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2417,7 +2429,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2434,7 +2445,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2451,7 +2461,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2468,7 +2477,6 @@
             "cpu": [
                 "ppc64"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2485,7 +2493,6 @@
             "cpu": [
                 "s390x"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2502,7 +2509,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2519,7 +2525,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2536,7 +2541,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2553,7 +2557,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2576,7 +2579,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2599,7 +2601,6 @@
             "cpu": [
                 "ppc64"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2622,7 +2623,6 @@
             "cpu": [
                 "s390x"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2645,7 +2645,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2668,7 +2667,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2691,7 +2689,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "os": [
@@ -2714,7 +2711,6 @@
             "cpu": [
                 "wasm32"
             ],
-            "dev": true,
             "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
             "optional": true,
             "dependencies": {
@@ -2734,7 +2730,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "Apache-2.0 AND LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2754,7 +2749,6 @@
             "cpu": [
                 "ia32"
             ],
-            "dev": true,
             "license": "Apache-2.0 AND LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -2774,7 +2768,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "Apache-2.0 AND LGPL-3.0-or-later",
             "optional": true,
             "os": [
@@ -3034,7 +3027,6 @@
             "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": "^14.21.3 || >=16"
             },
@@ -3654,6 +3646,12 @@
                 "node": ">=12.4.0"
             }
         },
+        "node_modules/@novnc/novnc": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/@novnc/novnc/-/novnc-1.7.0.tgz",
+            "integrity": "sha512-ucEJOx4T2avIRCleodk7YobZj5O2Ga2AeLfQ69A/yjG9HHba2+PDgwSkN3FttrmG+70ZGx21sElNFouK13RzyA==",
+            "license": "MPL-2.0"
+        },
         "node_modules/@oslojs/asn1": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@oslojs/asn1/-/asn1-1.0.0.tgz",
@@ -6981,7 +6979,6 @@
             "resolved": "https://registry.npmjs.org/@react-email/text/-/text-0.1.6.tgz",
             "integrity": "sha512-TYqkioRS45wTR5il3dYk/SbUjjEdhSwh9BtRNB99qNH1pXAwA45H7rAuxehiu8iJQJH0IyIr+6n62gBz9ezmsw==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=20.0.0"
             },
@@ -8442,7 +8439,6 @@
             "version": "5.90.21",
             "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.21.tgz",
             "integrity": "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg==",
-            "peer": true,
             "dependencies": {
                 "@tanstack/query-core": "5.90.20"
             },
@@ -8558,7 +8554,6 @@
             "integrity": "sha512-NMv9ASNARoKksWtsq/SHakpYAYnhBrQgGD8zkLYk/jaK8jUGn08CfEdTRgYhMypUQAfzSP8W6gNLe0q19/t4VA==",
             "devOptional": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/node": "*"
             }
@@ -8906,7 +8901,6 @@
             "integrity": "sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/body-parser": "*",
                 "@types/express-serve-static-core": "^5.0.0",
@@ -9002,7 +8996,6 @@
             "integrity": "sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA==",
             "devOptional": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "undici-types": "~7.18.0"
             }
@@ -9030,7 +9023,6 @@
             "integrity": "sha512-gT+oueVQkqnj6ajGJXblFR4iavIXWsGAFCk3dP4Kki5+a9R4NMt0JARdk6s8cUKcfUoqP5dAtDSLU8xYUTFV+Q==",
             "devOptional": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/node": "*",
                 "pg-protocol": "*",
@@ -9056,7 +9048,6 @@
             "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
             "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
             "devOptional": true,
-            "peer": true,
             "dependencies": {
                 "csstype": "^3.2.2"
             }
@@ -9067,7 +9058,6 @@
             "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
             "devOptional": true,
             "license": "MIT",
-            "peer": true,
             "peerDependencies": {
                 "@types/react": "^19.2.0"
             }
@@ -9154,7 +9144,8 @@
             "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
             "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
             "license": "MIT",
-            "optional": true
+            "optional": true,
+            "peer": true
         },
         "node_modules/@types/ws": {
             "version": "8.18.1",
@@ -9228,7 +9219,6 @@
             "integrity": "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@typescript-eslint/scope-manager": "8.56.1",
                 "@typescript-eslint/types": "8.56.1",
@@ -9683,6 +9673,27 @@
                 "win32"
             ]
         },
+        "node_modules/@xterm/addon-fit": {
+            "version": "0.11.0",
+            "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
+            "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
+            "license": "MIT"
+        },
+        "node_modules/@xterm/addon-web-links": {
+            "version": "0.12.0",
+            "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz",
+            "integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==",
+            "license": "MIT"
+        },
+        "node_modules/@xterm/xterm": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
+            "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
+            "license": "MIT",
+            "workspaces": [
+                "addons/*"
+            ]
+        },
         "node_modules/accepts": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -9702,7 +9713,6 @@
             "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -10152,7 +10162,6 @@
             "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
             "devOptional": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/types": "^7.26.0"
             }
@@ -10224,7 +10233,6 @@
             "integrity": "sha512-Ba0KR+Fzxh2jDRhdg6TSH0SJGzb8C0aBY4hR8w8madIdIzzC6Y1+kx5qR6eS1Z+Gy20h6ZU28aeyg0z1VIrShQ==",
             "hasInstallScript": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "bindings": "^1.5.0",
                 "prebuild-install": "^7.1.1"
@@ -10353,7 +10361,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.9.0",
                 "caniuse-lite": "^1.0.30001759",
@@ -11260,7 +11267,6 @@
             "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
             "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
             "license": "ISC",
-            "peer": true,
             "engines": {
                 "node": ">=12"
             }
@@ -11701,6 +11707,7 @@
             "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.2.tgz",
             "integrity": "sha512-6obghkliLdmKa56xdbLOpUZ43pAR6xFy1uOrxBaIDjT+yaRuuybLjGS9eVBoSR/UPU5fq3OXClEHLJNGvbxKpQ==",
             "license": "(MPL-2.0 OR Apache-2.0)",
+            "peer": true,
             "engines": {
                 "node": ">=20"
             },
@@ -12335,7 +12342,6 @@
             "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "esbuild": "bin/esbuild"
             },
@@ -12421,7 +12427,6 @@
             "integrity": "sha512-COV33RzXZkqhG9P2rZCFl9ZmJ7WL+gQSCRzE7RhkbclbQPtLAWReL7ysA0Sh4c8Im2U9ynybdR56PV0XcKvqaQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.8.0",
                 "@eslint-community/regexpp": "^4.12.2",
@@ -12558,7 +12563,6 @@
             "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@rtsao/scc": "^1.1.0",
                 "array-includes": "^3.1.9",
@@ -12952,7 +12956,6 @@
             "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
             "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "accepts": "^2.0.0",
                 "body-parser": "^2.2.1",
@@ -15370,6 +15373,7 @@
             "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
             "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "dompurify": "3.2.7",
                 "marked": "14.0.0"
@@ -15380,6 +15384,7 @@
             "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
             "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "marked": "bin/marked.js"
             },
@@ -15468,7 +15473,6 @@
             "resolved": "https://registry.npmjs.org/next/-/next-15.5.15.tgz",
             "integrity": "sha512-VSqCrJwtLVGwAVE0Sb/yikrQfkwkZW9p+lL/J4+xe+G3ZA+QnWPqgcfH1tDUEuk9y+pthzzVFp4L/U8JerMfMQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@next/env": "15.5.15",
                 "@swc/helpers": "0.5.15",
@@ -16428,7 +16432,6 @@
             "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
             "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "pg-connection-string": "^2.12.0",
                 "pg-pool": "^3.13.0",
@@ -16936,7 +16939,6 @@
             "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
             "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -16968,7 +16970,6 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
             "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "scheduler": "^0.27.0"
             },
@@ -17261,7 +17262,6 @@
             "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.2.tgz",
             "integrity": "sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=18.0.0"
             },
@@ -18723,8 +18723,7 @@
             "version": "4.2.2",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
             "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/tapable": {
             "version": "2.3.2",
@@ -19199,7 +19198,6 @@
             "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
             "devOptional": true,
             "license": "Apache-2.0",
-            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -19627,7 +19625,6 @@
             "resolved": "https://registry.npmjs.org/winston/-/winston-3.19.0.tgz",
             "integrity": "sha512-LZNJgPzfKR+/J3cHkxcpHKpKKvGfDZVPS4hfJCc4cCG0CgYzvlD6yE/S3CIL/Yt91ak327YCpiF/0MyeZHEHKA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@colors/colors": "^1.6.0",
                 "@dabh/diagnostics": "^2.0.8",
@@ -19834,7 +19831,6 @@
             "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
             "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
             "license": "MIT",
-            "peer": true,
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"
             }

package.json

@@ -34,11 +34,14 @@
     "dependencies": {
         "@asteasolutions/zod-to-openapi": "8.4.1",
         "@aws-sdk/client-s3": "3.1011.0",
+        "@devolutions/iron-remote-desktop": "https://static.pangolin.net/packages/devolutions-iron-remote-desktop-0.0.0.tgz",
+        "@devolutions/iron-remote-desktop-rdp": "https://static.pangolin.net/packages/devolutions-iron-remote-desktop-rdp-0.0.0.tgz",
         "@faker-js/faker": "10.3.0",
         "@headlessui/react": "2.2.9",
         "@hookform/resolvers": "5.2.2",
         "@monaco-editor/react": "4.7.0",
         "@node-rs/argon2": "2.0.2",
+        "@novnc/novnc": "^1.7.0",
         "@oslojs/crypto": "1.0.1",
         "@oslojs/encoding": "1.1.0",
         "@radix-ui/react-avatar": "1.1.11",
@@ -67,6 +70,9 @@
         "@tailwindcss/forms": "0.5.11",
         "@tanstack/react-query": "5.90.21",
         "@tanstack/react-table": "8.21.3",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/addon-web-links": "^0.12.0",
+        "@xterm/xterm": "^6.0.0",
         "arctic": "3.7.0",
         "axios": "1.15.0",
         "better-sqlite3": "11.9.1",

server/db/pg/schema/privateSchema.ts

@@ -580,6 +580,23 @@ export const trialNotifications = pgTable("trialNotifications", {
     sentAt: bigint("sentAt", { mode: "number" }).notNull()
 });
 
+export const browserGatewayTarget = pgTable("browserGatewayTarget", {
+    browserGatewayTargetId: serial("browserGatewayTargetId").primaryKey(),
+    resourceId: integer("resourceId")
+        .references(() => resources.resourceId, {
+            onDelete: "cascade"
+        })
+        .notNull(),
+    siteId: integer("siteId")
+        .references(() => sites.siteId, {
+            onDelete: "cascade"
+        })
+        .notNull(),
+    type: varchar("type").notNull(), // "ssh", "rdp", "vnc"
+    destination: varchar("destination").notNull(),
+    destinationPort: integer("destinationPort").notNull()
+});
+
 export type Approval = InferSelectModel<typeof approvals>;
 export type Limit = InferSelectModel<typeof limits>;
 export type Account = InferSelectModel<typeof account>;
@@ -627,3 +644,6 @@ export type AlertEmailRecipients = InferSelectModel<
 >;
 export type AlertWebhookActions = InferSelectModel<typeof alertWebhookActions>;
 export type TrialNotification = InferSelectModel<typeof trialNotifications>;
+export type BrowserGatewayTarget = InferSelectModel<
+    typeof browserGatewayTarget
+>;

server/db/sqlite/schema/privateSchema.ts

@@ -588,6 +588,25 @@ export const trialNotifications = sqliteTable("trialNotifications", {
     sentAt: integer("sentAt").notNull()
 });
 
+export const browserGatewayTarget = sqliteTable("browserGatewayTarget", {
+    browserGatewayTargetId: integer("browserGatewayTargetId").primaryKey({
+        autoIncrement: true
+    }),
+    resourceId: integer("resourceId")
+        .references(() => resources.resourceId, {
+            onDelete: "cascade"
+        })
+        .notNull(),
+    siteId: integer("siteId")
+        .references(() => sites.siteId, {
+            onDelete: "cascade"
+        })
+        .notNull(),
+    type: text("type").notNull(), // "ssh", "rdp", "vnc"
+    destination: text("destination").notNull(),
+    destinationPort: integer("destinationPort").notNull()
+});
+
 export type Approval = InferSelectModel<typeof approvals>;
 export type Limit = InferSelectModel<typeof limits>;
 export type Account = InferSelectModel<typeof account>;
@@ -627,3 +646,6 @@ export type AlertEmailAction = InferSelectModel<typeof alertEmailActions>;
 export type AlertEmailRecipient = InferSelectModel<typeof alertEmailRecipients>;
 export type AlertWebhookAction = InferSelectModel<typeof alertWebhookActions>;
 export type TrialNotification = InferSelectModel<typeof trialNotifications>;
+export type BrowserGatewayTarget = InferSelectModel<
+    typeof browserGatewayTarget
+>;

server/private/lib/traefik/getTraefikConfig.ts

@@ -12,6 +12,7 @@
  */
 
 import {
+    browserGatewayTarget,
     certificates,
     db,
     domainNamespaces,
@@ -277,6 +278,115 @@ export async function getTraefikConfig(
         });
     });
 
+    // Query browser gateway targets for this exit node
+    const browserGatewayRows = await db
+        .select({
+            // Resource fields
+            resourceId: resources.resourceId,
+            resourceName: resources.name,
+            fullDomain: resources.fullDomain,
+            ssl: resources.ssl,
+            subdomain: resources.subdomain,
+            domainId: resources.domainId,
+            enabled: resources.enabled,
+            wildcard: resources.wildcard,
+            domainCertResolver: domains.certResolver,
+            preferWildcardCert: domains.preferWildcardCert,
+            domainNamespaceId: domainNamespaces.domainNamespaceId,
+            // Browser gateway target fields
+            browserGatewayTargetId: browserGatewayTarget.browserGatewayTargetId,
+            bgType: browserGatewayTarget.type,
+            // Site fields
+            siteId: sites.siteId,
+            siteType: sites.type,
+            siteOnline: sites.online,
+            subnet: sites.subnet,
+            siteExitNodeId: sites.exitNodeId
+        })
+        .from(browserGatewayTarget)
+        .innerJoin(sites, eq(sites.siteId, browserGatewayTarget.siteId))
+        .innerJoin(
+            resources,
+            eq(resources.resourceId, browserGatewayTarget.resourceId)
+        )
+        .leftJoin(domains, eq(domains.domainId, resources.domainId))
+        .leftJoin(
+            domainNamespaces,
+            eq(domainNamespaces.domainId, resources.domainId)
+        )
+        .where(
+            and(
+                eq(resources.enabled, true),
+                or(
+                    eq(sites.exitNodeId, exitNodeId),
+                    and(
+                        isNull(sites.exitNodeId),
+                        sql`(${siteTypes.includes("local") ? 1 : 0} = 1)`,
+                        eq(sites.type, "local"),
+                        sql`(${build != "saas" ? 1 : 0} = 1)`
+                    )
+                ),
+                inArray(sites.type, siteTypes)
+            )
+        );
+
+    // Group browser gateway targets by resource
+    type BrowserGatewayResourceEntry = {
+        resourceId: number;
+        name: string;
+        fullDomain: string | null;
+        ssl: boolean | null;
+        subdomain: string | null;
+        domainId: string | null;
+        enabled: boolean | null;
+        wildcard: boolean | null;
+        domainCertResolver: string | null;
+        preferWildcardCert: boolean | null;
+        targets: {
+            browserGatewayTargetId: number;
+            bgType: string;
+            siteId: number;
+            siteType: string;
+            siteOnline: boolean | null;
+            subnet: string | null;
+            siteExitNodeId: number | null;
+        }[];
+    };
+    const browserGatewayResourcesMap = new Map<
+        number,
+        BrowserGatewayResourceEntry
+    >();
+
+    for (const row of browserGatewayRows) {
+        if (filterOutNamespaceDomains && row.domainNamespaceId) {
+            continue;
+        }
+        if (!browserGatewayResourcesMap.has(row.resourceId)) {
+            browserGatewayResourcesMap.set(row.resourceId, {
+                resourceId: row.resourceId,
+                name: sanitize(row.resourceName) || "",
+                fullDomain: row.fullDomain,
+                ssl: row.ssl,
+                subdomain: row.subdomain,
+                domainId: row.domainId,
+                enabled: row.enabled,
+                wildcard: row.wildcard,
+                domainCertResolver: row.domainCertResolver,
+                preferWildcardCert: row.preferWildcardCert,
+                targets: []
+            });
+        }
+        browserGatewayResourcesMap.get(row.resourceId)!.targets.push({
+            browserGatewayTargetId: row.browserGatewayTargetId,
+            bgType: row.bgType,
+            siteId: row.siteId,
+            siteType: row.siteType,
+            siteOnline: row.siteOnline,
+            subnet: row.subnet,
+            siteExitNodeId: row.siteExitNodeId
+        });
+    }
+
     let siteResourcesWithFullDomain: {
         siteResourceId: number;
         fullDomain: string | null;
@@ -324,6 +434,12 @@ export async function getTraefikConfig(
                 domains.add(sr.fullDomain);
             }
         }
+        // Include browser gateway resource domains
+        for (const bgResource of browserGatewayResourcesMap.values()) {
+            if (bgResource.enabled && bgResource.ssl && bgResource.fullDomain) {
+                domains.add(bgResource.fullDomain);
+            }
+        }
         // get the valid certs for these domains
         validCerts = await getValidCertificatesForDomains(domains, true); // we are caching here because this is called often
         // logger.debug(`Valid certs for domains: ${JSON.stringify(validCerts)}`);
@@ -589,7 +705,7 @@ export async function getTraefikConfig(
                             resource.ssl ? entrypointHttps : entrypointHttp
                         ],
                         service: maintenanceServiceName,
-                        rule: `${rule} && (PathPrefix(\`/_next\`) || PathRegexp(\`^/__nextjs*\`))`,
+                        rule: `${rule} && (PathPrefix(\`/_next\`) || PathRegexp(\`^/__nextjs*\`) || Path(\`/favicon.ico\`)) `,
                         priority: 2001,
                         ...(resource.ssl ? { tls } : {})
                     };
@@ -925,6 +1041,185 @@ export async function getTraefikConfig(
         }
     }
 
+    // Generate Traefik config for browser gateway resources
+    const browserGatewayPort = 39999;
+    for (const [, bgResource] of browserGatewayResourcesMap.entries()) {
+        if (!bgResource.enabled) continue;
+        if (!bgResource.domainId) continue;
+        if (!bgResource.fullDomain) continue;
+
+        if (!config_output.http.routers) config_output.http.routers = {};
+        if (!config_output.http.services) config_output.http.services = {};
+
+        const fullDomain = bgResource.fullDomain;
+        const additionalMiddlewares =
+            config.getRawConfig().traefik.additional_middlewares || [];
+        const routerMiddlewares = [
+            badgerMiddlewareName,
+            ...additionalMiddlewares
+        ];
+
+        const hostRule = `Host(\`${fullDomain}\`)`;
+
+        // Build TLS config
+        let tls = {};
+        if (!privateConfig.getRawPrivateConfig().flags.use_pangolin_dns) {
+            const domainParts = fullDomain.split(".");
+            let wildCard: string;
+            if (domainParts.length <= 2) {
+                wildCard = `*.${domainParts.join(".")}`;
+            } else {
+                wildCard = `*.${domainParts.slice(1).join(".")}`;
+            }
+            if (!bgResource.subdomain) {
+                wildCard = fullDomain;
+            }
+
+            const globalDefaultResolver =
+                config.getRawConfig().traefik.cert_resolver;
+            const globalDefaultPreferWildcard =
+                config.getRawConfig().traefik.prefer_wildcard_cert;
+            const resolverName = bgResource.domainCertResolver
+                ? bgResource.domainCertResolver.trim()
+                : globalDefaultResolver;
+            const preferWildcard =
+                bgResource.preferWildcardCert !== undefined &&
+                bgResource.preferWildcardCert !== null
+                    ? bgResource.preferWildcardCert
+                    : globalDefaultPreferWildcard;
+
+            tls = {
+                certResolver: resolverName,
+                ...(preferWildcard ? { domains: [{ main: wildCard }] } : {})
+            };
+        } else {
+            const matchingCert = validCerts.find(
+                (cert) => cert.queriedDomain === fullDomain
+            );
+            if (!matchingCert) {
+                logger.debug(
+                    `No matching certificate found for browser gateway domain: ${fullDomain}`
+                );
+                continue;
+            }
+        }
+
+        const bgUiServiceName = `bg-r${bgResource.resourceId}-ui-service`;
+
+        if (bgResource.ssl) {
+            const redirectRouterName = `bg-r${bgResource.resourceId}-redirect`;
+            config_output.http.routers![redirectRouterName] = {
+                entryPoints: [config.getRawConfig().traefik.http_entrypoint],
+                middlewares: [redirectHttpsMiddlewareName],
+                service: bgUiServiceName,
+                rule: hostRule,
+                priority: 100
+            };
+        }
+
+        // Collect online sites for this resource (for any type)
+        const anySiteOnline = bgResource.targets.some((t) => t.siteOnline);
+
+        // Group targets by type and generate per-type websocket routers and services
+        const typeMap = new Map<string, typeof bgResource.targets>();
+        for (const t of bgResource.targets) {
+            if (!typeMap.has(t.bgType)) typeMap.set(t.bgType, []);
+            typeMap.get(t.bgType)!.push(t);
+        }
+
+        for (const [bgType, typedTargets] of typeMap.entries()) {
+            const bgKey = `bg-r${bgResource.resourceId}-${bgType}`;
+            const bgRouterName = `${bgKey}-router`;
+            const bgServiceName = `${bgKey}-service`;
+            const bgRule = `${hostRule} && PathPrefix(\`/gateway/${bgType}\`)`;
+
+            const servers = typedTargets
+                .filter((t) => {
+                    if (!t.siteOnline && anySiteOnline) return false;
+                    if (t.siteType === "newt") return !!t.subnet;
+                    return false; // browser gateway only supported on newt sites
+                })
+                .map((t) => ({
+                    url: `http://${t.subnet!.split("/")[0]}:${browserGatewayPort}`
+                }))
+                .filter((v, i, a) => a.findIndex((u) => u.url === v.url) === i);
+
+            config_output.http.routers![bgRouterName] = {
+                entryPoints: [
+                    bgResource.ssl
+                        ? config.getRawConfig().traefik.https_entrypoint
+                        : config.getRawConfig().traefik.http_entrypoint
+                ],
+                middlewares: routerMiddlewares,
+                service: bgServiceName,
+                rule: bgRule,
+                priority: 110, // highest - websocket path takes precedence
+                ...(bgResource.ssl ? { tls } : {})
+            };
+
+            config_output.http.services![bgServiceName] = {
+                loadBalancer: {
+                    servers
+                }
+            };
+        }
+
+        // UI: serve the browser gateway page from the internal pangolin instance.
+        // The primary type is used for the path rewrite (e.g. /rdp), mirroring
+        // how the maintenance page rewrites everything to /maintenance-screen.
+        const primaryType = typeMap.keys().next().value as string;
+        const internalHost = config.getRawConfig().server.internal_hostname;
+        const internalPort = config.getRawConfig().server.next_port;
+        const uiRewriteMiddlewareName = `bg-r${bgResource.resourceId}-ui-rewrite`;
+        const entrypoint = bgResource.ssl
+            ? config.getRawConfig().traefik.https_entrypoint
+            : config.getRawConfig().traefik.http_entrypoint;
+
+        if (!config_output.http.middlewares) {
+            config_output.http.middlewares = {};
+        }
+
+        config_output.http.middlewares![uiRewriteMiddlewareName] = {
+            replacePathRegex: {
+                regex: "^/(.*)",
+                replacement: `/${primaryType}`
+            }
+        };
+
+        config_output.http.services![bgUiServiceName] = {
+            loadBalancer: {
+                servers: [
+                    {
+                        url: `http://${internalHost}:${internalPort}`
+                    }
+                ]
+            }
+        };
+
+        // Assets router at higher priority so /_next files load without rewrite
+        config_output.http.routers![
+            `bg-r${bgResource.resourceId}-assets-router`
+        ] = {
+            entryPoints: [entrypoint],
+            middlewares: routerMiddlewares,
+            service: bgUiServiceName,
+            rule: `${hostRule} && (PathPrefix(\`/_next\`) || PathRegexp(\`^/__nextjs*\`) || Path(\`/favicon.ico\`))`,
+            priority: 101,
+            ...(bgResource.ssl ? { tls } : {})
+        };
+
+        // Catch-all router rewrites everything on the domain to /{primaryType}
+        config_output.http.routers![`bg-r${bgResource.resourceId}-ui-router`] =
+            {
+                entryPoints: [entrypoint],
+                middlewares: [...routerMiddlewares, uiRewriteMiddlewareName],
+                service: bgUiServiceName,
+                rule: hostRule,
+                priority: 100,
+                ...(bgResource.ssl ? { tls } : {})
+            };
+    }
+
     // Add Traefik routes for siteResource aliases (HTTP mode + SSL) so that
     // Traefik generates TLS certificates for those domains even when no
     // matching resource exists yet.
@@ -1040,7 +1335,7 @@ export async function getTraefikConfig(
             config_output.http.routers[`${siteResourceRouterName}-assets`] = {
                 entryPoints: [config.getRawConfig().traefik.https_entrypoint],
                 service: siteResourceServiceName,
-                rule: `Host(\`${fullDomain}\`) && (PathPrefix(\`/_next\`) || PathRegexp(\`^/__nextjs*\`))`,
+                rule: `Host(\`${fullDomain}\`) && (PathPrefix(\`/_next\`) || PathRegexp(\`^/__nextjs*\`) || Path(\`/favicon.ico\`))`,
                 priority: 101,
                 tls
             };
@@ -1143,7 +1438,7 @@ export async function getTraefikConfig(
                         config.getRawConfig().traefik.https_entrypoint
                     ],
                     service: "landing-service",
-                    rule: `Host(\`${fullDomain}\`) && (PathRegexp(\`^/auth/resource/[^/]+$\`) || PathRegexp(\`^/auth/idp/[0-9]+/oidc/callback\`) || PathPrefix(\`/_next\`) || Path(\`/auth/org\`) || PathRegexp(\`^/__nextjs*\`))`,
+                    rule: `Host(\`${fullDomain}\`) && (PathRegexp(\`^/auth/resource/[^/]+$\`) || PathRegexp(\`^/auth/idp/[0-9]+/oidc/callback\`) || PathPrefix(\`/_next\`) || Path(\`/auth/org\`) || PathRegexp(\`^/__nextjs*\`) || Path(\`/favicon.ico\`))`,
                     priority: 203,
                     tls: tls
                 };

server/routers/internal.ts

@@ -42,6 +42,8 @@ internalRouter.get("/idp", idp.listIdps);
 
 internalRouter.get("/idp/:idpId", idp.getIdp);
 
+internalRouter.get("/resource/browser-target", resource.getBrowserTarget);
+
 // Gerbil routes
 const gerbilRouter = Router();
 internalRouter.use("/gerbil", gerbilRouter);

server/routers/newt/buildConfiguration.ts

@@ -1,4 +1,6 @@
 import {
+    browserGatewayTarget,
+    BrowserGatewayTarget,
     clients,
     clientSiteResourcesAssociationsCache,
     clientSitesAssociationsCache,
@@ -233,6 +235,11 @@ export async function buildTargetConfigurationForNewtClient(
         .from(targetHealthCheck)
         .where(eq(targetHealthCheck.siteId, siteId));
 
+    const allBrowserGatewayTargets = await db
+        .select()
+        .from(browserGatewayTarget)
+        .where(eq(browserGatewayTarget.siteId, siteId));
+
     const { tcpTargets, udpTargets } = allTargets.reduce(
         (acc, target) => {
             // Filter out invalid targets
@@ -304,9 +311,17 @@ export async function buildTargetConfigurationForNewtClient(
         (target) => target !== null
     );
 
+    const browserGatewayTargets = allBrowserGatewayTargets.map((t) => ({
+        id: t.browserGatewayTargetId,
+        type: t.type,
+        destination: t.destination,
+        destinationPort: t.destinationPort
+    }));
+
     return {
         validHealthCheckTargets,
         tcpTargets,
-        udpTargets
+        udpTargets,
+        browserGatewayTargets
     };
 }

server/routers/newt/handleNewtRegisterMessage.ts

@@ -43,8 +43,13 @@ export const handleNewtRegisterMessage: MessageHandler = async (context) => {
 
     const siteId = newt.siteId;
 
-    const { publicKey, pingResults, newtVersion, backwardsCompatible, chainId } =
-        message.data;
+    const {
+        publicKey,
+        pingResults,
+        newtVersion,
+        backwardsCompatible,
+        chainId
+    } = message.data;
     if (!publicKey) {
         logger.warn("Public key not provided");
         return;
@@ -191,8 +196,12 @@ export const handleNewtRegisterMessage: MessageHandler = async (context) => {
             .where(eq(newts.newtId, newt.newtId));
     }
 
-    const { tcpTargets, udpTargets, validHealthCheckTargets } =
-        await buildTargetConfigurationForNewtClient(siteId, newtVersion);
+    const {
+        tcpTargets,
+        udpTargets,
+        validHealthCheckTargets,
+        browserGatewayTargets
+    } = await buildTargetConfigurationForNewtClient(siteId, newtVersion);
 
     logger.debug(
         `Sending health check targets to newt ${newt.newtId}: ${JSON.stringify(validHealthCheckTargets)}`
@@ -212,6 +221,7 @@ export const handleNewtRegisterMessage: MessageHandler = async (context) => {
                     tcp: tcpTargets
                 },
                 healthCheckTargets: validHealthCheckTargets,
+                browserGatewayTargets: browserGatewayTargets,
                 chainId: chainId
             }
         },

server/routers/newt/sync.ts

@@ -9,8 +9,12 @@ import {
 import { canCompress } from "@server/lib/clientVersionChecks";
 
 export async function sendNewtSyncMessage(newt: Newt, site: Site) {
-    const { tcpTargets, udpTargets, validHealthCheckTargets } =
-        await buildTargetConfigurationForNewtClient(site.siteId);
+    const {
+        tcpTargets,
+        udpTargets,
+        validHealthCheckTargets,
+        browserGatewayTargets
+    } = await buildTargetConfigurationForNewtClient(site.siteId);
 
     let exitNode: ExitNode | undefined;
     if (site.exitNodeId) {
@@ -36,7 +40,8 @@ export async function sendNewtSyncMessage(newt: Newt, site: Site) {
                 },
                 healthCheckTargets: validHealthCheckTargets,
                 peers: peers,
-                clientTargets: targets
+                clientTargets: targets,
+                browserGatewayTargets: browserGatewayTargets
             }
         },
         {

server/routers/newt/targets.ts

@@ -1,4 +1,4 @@
-import { Target, TargetHealthCheck } from "@server/db";
+import { BrowserGatewayTarget, Target, TargetHealthCheck } from "@server/db";
 import { sendToClient } from "#dynamic/routers/ws";
 import logger from "@server/logger";
 import { canCompress } from "@server/lib/clientVersionChecks";
@@ -239,3 +239,48 @@ export async function removeTargets(
         { incrementConfigVersion: true, compress: canCompress(version, "newt") }
     );
 }
+
+export async function sendBrowserGatewayTargets(
+    newtId: string,
+    targets: BrowserGatewayTarget[],
+    version?: string | null
+) {
+    if (targets.length === 0) return;
+
+    const payload = targets.map((t) => ({
+        id: t.browserGatewayTargetId,
+        resourceId: t.resourceId,
+        siteId: t.siteId,
+        type: t.type,
+        destination: t.destination,
+        destinationPort: t.destinationPort
+    }));
+
+    await sendToClient(
+        newtId,
+        {
+            type: "newt/browsergateway/add",
+            data: {
+                targets: payload
+            }
+        },
+        { incrementConfigVersion: true, compress: canCompress(version, "newt") }
+    );
+}
+
+export async function removeBrowserGatewayTarget(
+    newtId: string,
+    browserGatewayTargetId: number,
+    version?: string | null
+) {
+    await sendToClient(
+        newtId,
+        {
+            type: "newt/browsergateway/remove",
+            data: {
+                ids: [browserGatewayTargetId]
+            }
+        },
+        { incrementConfigVersion: true, compress: canCompress(version, "newt") }
+    );
+}

server/routers/resource/getBrowserTarget.ts

@@ -0,0 +1,76 @@
+import { Request, Response, NextFunction } from "express";
+import { z } from "zod";
+import { db } from "@server/db";
+import { resources, targets } from "@server/db";
+import { eq } from "drizzle-orm";
+import response from "@server/lib/response";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import { fromError } from "zod-validation-error";
+import logger from "@server/logger";
+
+const getBrowserTargetSchema = z
+    .object({
+        fullDomain: z.string().min(1, "fullDomain is required")
+    })
+    .strict();
+
+export type GetBrowserTargetResponse = {
+    ip: string;
+    port: number;
+};
+
+export async function getBrowserTarget(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsed = getBrowserTargetSchema.safeParse(req.query);
+        if (!parsed.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsed.error).toString()
+                )
+            );
+        }
+
+        const { fullDomain } = parsed.data;
+
+        const [row] = await db
+            .select({
+                ip: targets.ip,
+                port: targets.port
+            })
+            .from(targets)
+            .innerJoin(resources, eq(targets.resourceId, resources.resourceId))
+            .where(eq(resources.fullDomain, fullDomain))
+            .limit(1);
+
+        if (!row) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    "No resource found for this domain"
+                )
+            );
+        }
+
+        return response<GetBrowserTargetResponse>(res, {
+            data: { ip: row.ip, port: row.port },
+            success: true,
+            error: false,
+            message: "Browser target retrieved successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "An error occurred while retrieving the browser target"
+            )
+        );
+    }
+}

server/routers/resource/index.ts

@@ -33,3 +33,4 @@ export * from "./removeUserFromResource";
 export * from "./listAllResourceNames";
 export * from "./removeEmailFromResourceWhitelist";
 export * from "./getStatusHistory";
+export * from "./getBrowserTarget";

src/app/rdp/RdpClient.tsx

@@ -0,0 +1,542 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { toast } from "@app/hooks/useToast";
+import type {
+    UserInteraction,
+    IronError,
+    FileTransferProvider
+} from "@devolutions/iron-remote-desktop/dist";
+import type {
+    RdpFileTransferProvider,
+    FileInfo
+} from "@devolutions/iron-remote-desktop-rdp/dist";
+
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "iron-remote-desktop": React.DetailedHTMLProps<
+                React.HTMLAttributes<HTMLElement> & {
+                    scale?: string;
+                    verbose?: string;
+                    flexcenter?: string;
+                    module?: unknown;
+                },
+                HTMLElement
+            >;
+        }
+    }
+}
+
+type Target = {
+    ip: string;
+    port: number;
+};
+
+type FormState = {
+    username: string;
+    password: string;
+    domain: string;
+    kdcProxyUrl: string;
+    pcb: string;
+    desktopWidth: number;
+    desktopHeight: number;
+    enableClipboard: boolean;
+};
+
+const isIronError = (error: unknown): error is IronError => {
+    return (
+        typeof error === "object" &&
+        error !== null &&
+        typeof (error as IronError).backtrace === "function" &&
+        typeof (error as IronError).kind === "function"
+    );
+};
+
+export default function RdpClient({
+    target,
+    error
+}: {
+    target: Target | null;
+    error: string | null;
+}) {
+    const [form, setForm] = useState<FormState>({
+        username: "",
+        password: "",
+        domain: "",
+        kdcProxyUrl: "",
+        pcb: "",
+        desktopWidth: 1280,
+        desktopHeight: 720,
+        enableClipboard: true
+    });
+
+    const [showLogin, setShowLogin] = useState(true);
+    const [moduleReady, setModuleReady] = useState(false);
+    const [unicodeMode, setUnicodeMode] = useState(false);
+    const [cursorOverrideActive, setCursorOverrideActive] = useState(false);
+
+    const userInteractionRef = useRef<UserInteraction | null>(null);
+    const backendRef = useRef<unknown>(null);
+    // Holds the RdpFileTransferProvider constructor so we can create a fresh
+    // instance per session (avoids stale upload state across reconnects).
+    const fileTransferClassRef = useRef<typeof RdpFileTransferProvider | null>(
+        null
+    );
+    // Active session's provider instance; replaced on each connect.
+    const fileTransferRef = useRef<RdpFileTransferProvider | null>(null);
+    const extensionsRef = useRef<{
+        displayControl: (enable: boolean) => unknown;
+        preConnectionBlob: (pcb: string) => unknown;
+        kdcProxyUrl: (url: string) => unknown;
+    } | null>(null);
+
+    // Load the iron-remote-desktop modules client-side and register the
+    // `<iron-remote-desktop>` custom element.
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            const [coreMod, rdpMod] = await Promise.all([
+                import("@devolutions/iron-remote-desktop/dist"),
+                import("@devolutions/iron-remote-desktop-rdp/dist")
+            ]);
+            if (cancelled) return;
+
+            await rdpMod.init("INFO");
+
+            backendRef.current = rdpMod.Backend;
+            extensionsRef.current = {
+                displayControl: rdpMod.displayControl,
+                preConnectionBlob: rdpMod.preConnectionBlob,
+                kdcProxyUrl: rdpMod.kdcProxyUrl
+            };
+
+            // Store the class; a fresh instance is created per session.
+            fileTransferClassRef.current =
+                rdpMod.RdpFileTransferProvider as unknown as typeof RdpFileTransferProvider;
+
+            // Importing the package registers the custom element as a side
+            // effect. Touch the default export to avoid tree-shaking.
+            void coreMod;
+
+            setModuleReady(true);
+        })().catch((err) => {
+            console.error("Failed to load iron-remote-desktop modules", err);
+            toast({
+                variant: "destructive",
+                title: "Failed to load RDP module",
+                description: `${err}`
+            });
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    // Attach the "ready" listener synchronously the moment the custom
+    // element mounts. The custom element dispatches `ready` from its own
+    // `onMount`, so a deferred useEffect can race and miss it.
+    const remoteElementRef = (el: HTMLElement | null) => {
+        if (!el) return;
+        const onReady = (e: Event) => {
+            const event = e as CustomEvent;
+            userInteractionRef.current = event.detail.irgUserInteraction;
+        };
+        el.addEventListener("ready", onReady);
+    };
+
+    const update = <K extends keyof FormState>(key: K, value: FormState[K]) => {
+        setForm((prev) => ({ ...prev, [key]: value }));
+    };
+
+    const startSession = async () => {
+        const userInteraction = userInteractionRef.current;
+        const exts = extensionsRef.current;
+        if (!userInteraction || !exts) {
+            toast({
+                variant: "destructive",
+                title: "Not ready",
+                description: "RDP module is still initializing"
+            });
+            return;
+        }
+
+        toast({
+            title: "Connecting...",
+            description: "Connection in progress"
+        });
+
+        userInteraction.setEnableClipboard(form.enableClipboard);
+
+        // Dispose any previous session's provider and create a fresh one so
+        // there is no stale upload state from a prior connection.
+        fileTransferRef.current?.dispose();
+        const ProviderClass = fileTransferClassRef.current;
+        const fileTransfer = ProviderClass ? new ProviderClass() : null;
+        fileTransferRef.current = fileTransfer;
+
+        if (fileTransfer) {
+            // Auto-download files when the remote copies them to clipboard.
+            fileTransfer.on("files-available", (files: FileInfo[]) => {
+                const downloadable = files.filter((f) => !f.isDirectory);
+                if (downloadable.length === 0) return;
+                toast({
+                    title: `Downloading ${downloadable.length} file(s) from remote…`
+                });
+                for (let i = 0; i < files.length; i++) {
+                    const file = files[i];
+                    if (file.isDirectory) continue;
+                    const { completion } = fileTransfer.downloadFile(file, i);
+                    completion
+                        .then((blob) => {
+                            const url = URL.createObjectURL(blob);
+                            const a = document.createElement("a");
+                            a.href = url;
+                            a.download = file.name;
+                            a.click();
+                            URL.revokeObjectURL(url);
+                        })
+                        .catch((err) => {
+                            toast({
+                                variant: "destructive",
+                                title: `Download failed: ${file.name}`,
+                                description: `${err}`
+                            });
+                        });
+                }
+            });
+
+            // Notify when individual uploads complete (remote pasted a file).
+            fileTransfer.on("upload-complete", (file: File) => {
+                toast({ title: `Uploaded: ${file.name}` });
+            });
+
+            // Register with the web component so CLIPRDR extensions are
+            // wired up before connect() builds the session.
+            userInteraction.enableFileTransfer(
+                fileTransfer as unknown as FileTransferProvider
+            );
+        }
+
+        const destination = target
+            ? `${target.ip}:${target.port}`
+            : "";
+
+        const builder = userInteraction
+            .configBuilder()
+            .withUsername(form.username)
+            .withPassword(form.password)
+            .withDestination(destination)
+            .withProxyAddress(
+                `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/rdp`
+            )
+            .withServerDomain(form.domain)
+            .withAuthToken("test-token")
+            .withDesktopSize({
+                width: form.desktopWidth,
+                height: form.desktopHeight
+            })
+            .withExtension(exts.displayControl(true));
+
+        if (form.pcb !== "") {
+            builder.withExtension(exts.preConnectionBlob(form.pcb));
+        }
+        if (form.kdcProxyUrl !== "") {
+            builder.withExtension(exts.kdcProxyUrl(form.kdcProxyUrl));
+        }
+
+        try {
+            const sessionInfo = await userInteraction.connect(builder.build());
+
+            toast({ title: "Connected" });
+            setShowLogin(false);
+            userInteraction.setVisibility(true);
+
+            const termInfo = await sessionInfo.run();
+            fileTransferRef.current?.dispose();
+            fileTransferRef.current = null;
+            toast({
+                title: "Session terminated",
+                description: termInfo.reason()
+            });
+            setShowLogin(true);
+        } catch (err) {
+            setShowLogin(true);
+            if (isIronError(err)) {
+                toast({
+                    variant: "destructive",
+                    title: "Connection failed",
+                    description: err.backtrace()
+                });
+            } else {
+                toast({
+                    variant: "destructive",
+                    title: "Connection failed",
+                    description: `${err}`
+                });
+            }
+        }
+    };
+
+    const ui = () => userInteractionRef.current;
+
+    const toggleCursorKind = () => {
+        const u = ui();
+        if (!u) return;
+        if (cursorOverrideActive) {
+            u.setCursorStyleOverride(null);
+        } else {
+            u.setCursorStyleOverride('url("crosshair.png") 7 7, default');
+        }
+        setCursorOverrideActive((v) => !v);
+    };
+
+    if (error) {
+        return (
+            <div className="min-h-screen bg-background flex items-center justify-center">
+                <p className="text-destructive">{error}</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-background">
+            {showLogin && (
+                <div className="mx-auto max-w-2xl p-6">
+                    <h1 className="mb-4 text-2xl font-semibold">
+                        RDP Test Connection
+                    </h1>
+
+                    <div className="space-y-4">
+                        <Field label="Domain" id="domain">
+                            <Input
+                                id="domain"
+                                value={form.domain}
+                                onChange={(e) =>
+                                    update("domain", e.target.value)
+                                }
+                            />
+                        </Field>
+                        <Field label="Username" id="username">
+                            <Input
+                                id="username"
+                                value={form.username}
+                                onChange={(e) =>
+                                    update("username", e.target.value)
+                                }
+                            />
+                        </Field>
+                        <Field label="Password" id="password">
+                            <Input
+                                id="password"
+                                type="password"
+                                value={form.password}
+                                onChange={(e) =>
+                                    update("password", e.target.value)
+                                }
+                            />
+                        </Field>
+                        {/* 
+                        <Field label="Pre Connection Blob (optional)" id="pcb">
+                            <Input
+                                id="pcb"
+                                value={form.pcb}
+                                onChange={(e) => update("pcb", e.target.value)}
+                            />
+                        </Field> */}
+                        <div className="grid grid-cols-2 gap-4">
+                            <Field label="Desktop Width" id="desktopWidth">
+                                <Input
+                                    id="desktopWidth"
+                                    type="number"
+                                    value={form.desktopWidth}
+                                    onChange={(e) =>
+                                        update(
+                                            "desktopWidth",
+                                            Number(e.target.value) || 0
+                                        )
+                                    }
+                                />
+                            </Field>
+                            <Field label="Desktop Height" id="desktopHeight">
+                                <Input
+                                    id="desktopHeight"
+                                    type="number"
+                                    value={form.desktopHeight}
+                                    onChange={(e) =>
+                                        update(
+                                            "desktopHeight",
+                                            Number(e.target.value) || 0
+                                        )
+                                    }
+                                />
+                            </Field>
+                        </div>
+                        {/* <Field
+                            label="KDC Proxy URL (optional)"
+                            id="kdcProxyUrl"
+                        >
+                            <Input
+                                id="kdcProxyUrl"
+                                value={form.kdcProxyUrl}
+                                onChange={(e) =>
+                                    update("kdcProxyUrl", e.target.value)
+                                }
+                            />
+                        </Field> */}
+                        <div className="flex items-center gap-2">
+                            <Checkbox
+                                id="enable_clipboard"
+                                checked={form.enableClipboard}
+                                onCheckedChange={(checked) =>
+                                    update("enableClipboard", checked === true)
+                                }
+                            />
+                            <Label htmlFor="enable_clipboard">
+                                Enable Clipboard
+                            </Label>
+                        </div>
+
+                        <Button
+                            onClick={startSession}
+                            disabled={!moduleReady}
+                            className="w-full"
+                        >
+                            {moduleReady ? "Connect" : "Loading module..."}
+                        </Button>
+                    </div>
+                </div>
+            )}
+
+            <div
+                className="flex h-screen flex-col bg-neutral-900"
+                style={{ display: showLogin ? "none" : "flex" }}
+            >
+                <div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.setScale(1)}
+                    >
+                        Fit
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.setScale(2)}
+                    >
+                        Full
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.setScale(3)}
+                    >
+                        Real
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.ctrlAltDel()}
+                    >
+                        Ctrl+Alt+Del
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.metaKey()}
+                    >
+                        Meta
+                    </Button>
+                    {/* <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={toggleCursorKind}
+                    >
+                        Toggle cursor
+                    </Button> */}
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={async () => {
+                            const ft = fileTransferRef.current;
+                            if (!ft) return;
+                            const files = await ft.showFilePicker({
+                                multiple: true
+                            });
+                            if (files.length === 0) return;
+                            try {
+                                ft.uploadFiles(files);
+                                toast({
+                                    title: "Files ready to paste",
+                                    description: `${files.length} file(s) copied to remote clipboard — press Ctrl+V on the remote desktop to paste.`
+                                });
+                            } catch (err) {
+                                toast({
+                                    variant: "destructive",
+                                    title: "Upload failed",
+                                    description: `${err}`
+                                });
+                            }
+                        }}
+                    >
+                        Upload files
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={() => {
+                            ui()?.shutdown();
+                            setShowLogin(true);
+                        }}
+                    >
+                        Terminate
+                    </Button>
+                    <label className="ml-2 flex items-center gap-2">
+                        <input
+                            type="checkbox"
+                            checked={unicodeMode}
+                            onChange={(e) => {
+                                setUnicodeMode(e.target.checked);
+                                ui()?.setKeyboardUnicodeMode(e.target.checked);
+                            }}
+                        />
+                        Unicode keyboard mode
+                    </label>
+                </div>
+
+                {moduleReady && (
+                    <iron-remote-desktop
+                        ref={remoteElementRef}
+                        verbose="true"
+                        scale="fit"
+                        flexcenter="true"
+                        module={backendRef.current}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
+
+function Field({
+    label,
+    id,
+    children
+}: {
+    label: string;
+    id: string;
+    children: React.ReactNode;
+}) {
+    return (
+        <div className="space-y-1.5">
+            <Label htmlFor={id}>{label}</Label>
+            {children}
+        </div>
+    );
+}

src/app/rdp/page.tsx

@@ -0,0 +1,31 @@
+import { headers } from "next/headers";
+import { internal } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { GetBrowserTargetResponse } from "@server/routers/resource";
+import RdpClient from "./RdpClient";
+
+export const dynamic = "force-dynamic";
+
+export const metadata = {
+    title: "RDP Test"
+};
+
+export default async function RdpPage() {
+    const headersList = await headers();
+    const host = headersList.get("host") || "";
+    const hostname = host.split(":")[0];
+
+    let target: { ip: string; port: number } | null = null;
+    let error: string | null = null;
+
+    try {
+        const res = await internal.get<AxiosResponse<GetBrowserTargetResponse>>(
+            `/resource/browser-target?fullDomain=${encodeURIComponent(hostname)}`
+        );
+        target = res.data.data;
+    } catch {
+        error = "No resource found for this domain";
+    }
+
+    return <RdpClient target={target} error={error} />;
+}

src/app/ssh/SshClient.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import "@xterm/xterm/css/xterm.css";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type Target = {
+    ip: string;
+    port: number;
+};
+
+type FormState = {
+    username: string;
+    password: string;
+};
+
+export default function SshClient({
+    target,
+    error
+}: {
+    target: Target | null;
+    error: string | null;
+}) {
+    const [form, setForm] = useState<FormState>({
+        username: "",
+        password: ""
+    });
+
+    const [connected, setConnected] = useState(false);
+    const [connecting, setConnecting] = useState(false);
+    const [connectError, setConnectError] = useState<string | null>(null);
+
+    const terminalRef = useRef<HTMLDivElement>(null);
+    const xtermRef = useRef<import("@xterm/xterm").Terminal | null>(null);
+    const fitAddonRef = useRef<import("@xterm/addon-fit").FitAddon | null>(
+        null
+    );
+    const wsRef = useRef<WebSocket | null>(null);
+
+    // Mount the terminal div once connected.
+    useEffect(() => {
+        if (!connected || !terminalRef.current) return;
+
+        let cancelled = false;
+
+        (async () => {
+            const [{ Terminal }, { FitAddon }, { WebLinksAddon }] =
+                await Promise.all([
+                    import("@xterm/xterm"),
+                    import("@xterm/addon-fit"),
+                    import("@xterm/addon-web-links")
+                ]);
+            if (cancelled || !terminalRef.current) return;
+
+            const terminal = new Terminal({
+                cursorBlink: true,
+                fontSize: 14,
+                fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+                theme: {
+                    background: "#0d0d0d",
+                    foreground: "#f0f0f0"
+                },
+                scrollback: 5000
+            });
+
+            const fitAddon = new FitAddon();
+            const webLinksAddon = new WebLinksAddon();
+            terminal.loadAddon(fitAddon);
+            terminal.loadAddon(webLinksAddon);
+
+            terminal.open(terminalRef.current);
+            fitAddon.fit();
+
+            xtermRef.current = terminal;
+            fitAddonRef.current = fitAddon;
+
+            // Send user keystrokes to the WebSocket.
+            terminal.onData((data) => {
+                if (wsRef.current?.readyState === WebSocket.OPEN) {
+                    wsRef.current.send(JSON.stringify({ type: "data", data }));
+                }
+            });
+
+            // Send resize events.
+            terminal.onResize(({ cols, rows }) => {
+                if (wsRef.current?.readyState === WebSocket.OPEN) {
+                    wsRef.current.send(
+                        JSON.stringify({ type: "resize", cols, rows })
+                    );
+                }
+            });
+
+            // Send the initial size once the terminal is rendered.
+            const { cols, rows } = terminal;
+            if (wsRef.current?.readyState === WebSocket.OPEN) {
+                wsRef.current.send(
+                    JSON.stringify({ type: "resize", cols, rows })
+                );
+            }
+        })().catch(console.error);
+
+        return () => {
+            cancelled = true;
+        };
+    }, [connected]);
+
+    // Refit terminal when the window resizes.
+    useEffect(() => {
+        const onResize = () => fitAddonRef.current?.fit();
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+
+    // Cleanup on unmount.
+    useEffect(() => {
+        return () => {
+            wsRef.current?.close();
+            xtermRef.current?.dispose();
+        };
+    }, []);
+
+    function connect() {
+        setConnectError(null);
+        setConnecting(true);
+
+        const proxyAddress = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/ssh`;
+        const url = new URL(proxyAddress);
+        url.searchParams.set("host", target?.ip ?? "");
+        url.searchParams.set("port", String(target?.port ?? 22));
+        url.searchParams.set("username", form.username);
+        url.searchParams.set("authToken", "test-token");
+
+        const ws = new WebSocket(url.toString(), ["ssh"]);
+        wsRef.current = ws;
+
+        ws.onopen = () => {
+            // Send the password (or empty string) as the first frame so the
+            // proxy can complete SSH authentication before piping pty data.
+            ws.send(JSON.stringify({ type: "auth", password: form.password }));
+            setConnecting(false);
+            setConnected(true);
+        };
+
+        ws.onmessage = (evt) => {
+            if (typeof evt.data === "string") {
+                try {
+                    const msg = JSON.parse(evt.data as string) as {
+                        type: string;
+                        data?: string;
+                        error?: string;
+                    };
+                    if (msg.type === "data" && msg.data) {
+                        xtermRef.current?.write(msg.data);
+                    } else if (msg.type === "error") {
+                        xtermRef.current?.writeln(
+                            `\r\n\x1b[31mError: ${msg.error}\x1b[0m\r\n`
+                        );
+                    }
+                } catch {
+                    xtermRef.current?.write(evt.data);
+                }
+            } else if (evt.data instanceof Blob) {
+                evt.data.text().then((t) => xtermRef.current?.write(t));
+            }
+        };
+
+        ws.onerror = () => {
+            setConnecting(false);
+            setConnected(false);
+            setConnectError("WebSocket connection failed");
+        };
+
+        ws.onclose = (evt) => {
+            setConnecting(false);
+            setConnected(false);
+            xtermRef.current?.writeln(
+                `\r\n\x1b[33mConnection closed (code ${evt.code})\x1b[0m\r\n`
+            );
+        };
+    }
+
+    function disconnect() {
+        wsRef.current?.close();
+        xtermRef.current?.dispose();
+        xtermRef.current = null;
+        setConnected(false);
+    }
+
+    if (error) {
+        return (
+            <div className="flex flex-col h-screen bg-black text-white p-4 items-center justify-center">
+                <p className="text-red-400">{error}</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-screen bg-black text-white p-4 gap-4">
+            <h1 className="text-xl font-semibold text-white">SSH Terminal</h1>
+
+            {!connected && (
+                <div className="bg-neutral-900 rounded-lg p-6 max-w-lg w-full mx-auto flex flex-col gap-4">
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="flex flex-col gap-1 col-span-2">
+                            <Label
+                                htmlFor="username"
+                                className="text-neutral-300"
+                            >
+                                Username
+                            </Label>
+                            <Input
+                                id="username"
+                                value={form.username}
+                                onChange={(e) =>
+                                    setForm({
+                                        ...form,
+                                        username: e.target.value
+                                    })
+                                }
+                                placeholder="root"
+                                className="bg-neutral-800 border-neutral-700 text-white"
+                            />
+                        </div>
+
+                        <div className="flex flex-col gap-1 col-span-2">
+                            <Label
+                                htmlFor="password"
+                                className="text-neutral-300"
+                            >
+                                Password
+                            </Label>
+                            <Input
+                                id="password"
+                                type="password"
+                                value={form.password}
+                                onChange={(e) =>
+                                    setForm({
+                                        ...form,
+                                        password: e.target.value
+                                    })
+                                }
+                                className="bg-neutral-800 border-neutral-700 text-white"
+                            />
+                        </div>
+                    </div>
+
+                    {connectError && (
+                        <p className="text-red-400 text-sm">{connectError}</p>
+                    )}
+
+                    <Button
+                        onClick={connect}
+                        disabled={connecting || !form.username}
+                        className="w-full"
+                    >
+                        {connecting ? "Connecting…" : "Connect"}
+                    </Button>
+                </div>
+            )}
+
+            {connected && (
+                <div className="flex flex-col flex-1 gap-2 min-h-0">
+                    <div className="flex justify-end">
+                        <Button
+                            variant="destructive"
+                            size="sm"
+                            onClick={disconnect}
+                        >
+                            Disconnect
+                        </Button>
+                    </div>
+                    <div
+                        ref={terminalRef}
+                        className="flex-1 rounded overflow-hidden"
+                        style={{ minHeight: 0 }}
+                    />
+                </div>
+            )}
+        </div>
+    );
+}

src/app/ssh/page.tsx

@@ -0,0 +1,31 @@
+import { headers } from "next/headers";
+import { internal } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { GetBrowserTargetResponse } from "@server/routers/resource";
+import SshClient from "./SshClient";
+
+export const dynamic = "force-dynamic";
+
+export const metadata = {
+    title: "SSH Terminal"
+};
+
+export default async function SshPage() {
+    const headersList = await headers();
+    const host = headersList.get("host") || "";
+    const hostname = host.split(":")[0];
+
+    let target: { ip: string; port: number } | null = null;
+    let error: string | null = null;
+
+    try {
+        const res = await internal.get<AxiosResponse<GetBrowserTargetResponse>>(
+            `/resource/browser-target?fullDomain=${encodeURIComponent(hostname)}`
+        );
+        target = res.data.data;
+    } catch {
+        error = "No resource found for this domain";
+    }
+
+    return <SshClient target={target} error={error} />;
+}

src/app/vnc/VncClient.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "@app/hooks/useToast";
+
+type Target = {
+    ip: string;
+    port: number;
+};
+
+type FormState = {
+    password: string;
+};
+
+export default function VncClient({
+    target,
+    error
+}: {
+    target: Target | null;
+    error: string | null;
+}) {
+    const [form, setForm] = useState<FormState>({
+        password: ""
+    });
+
+    const [connected, setConnected] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rfbRef = useRef<any>(null);
+    const screenRef = useRef<HTMLDivElement>(null);
+
+    const update = <K extends keyof FormState>(key: K, value: FormState[K]) => {
+        setForm((prev) => ({ ...prev, [key]: value }));
+    };
+
+    // Disconnect and clean up the RFB instance.
+    const disconnect = () => {
+        if (rfbRef.current) {
+            rfbRef.current.disconnect();
+            rfbRef.current = null;
+        }
+        setConnected(false);
+    };
+
+    // Clean up on unmount.
+    useEffect(() => {
+        return () => disconnect();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const connect = async () => {
+        if (!target) {
+            toast({
+                variant: "destructive",
+                title: "No target",
+                description: "No resource target is available"
+            });
+            return;
+        }
+
+        if (!screenRef.current) return;
+
+        // Disconnect any existing session first.
+        disconnect();
+
+        // noVNC has no ESM default export — import the module dynamically to
+        // keep it out of the server bundle, then grab the default export.
+        let RFB: new (
+            target: HTMLElement,
+            url: string,
+            options?: Record<string, unknown>
+        ) => unknown;
+        try {
+            // @ts-expect-error — @novnc/novnc ships plain JS with no bundled types
+            const mod = await import("@novnc/novnc");
+            RFB = mod.default ?? mod;
+        } catch (err) {
+            toast({
+                variant: "destructive",
+                title: "Failed to load noVNC",
+                description: `${err}`
+            });
+            return;
+        }
+
+        // Build the proxy WebSocket URL:
+        // ws://<proxyAddress>?authToken=<token>&host=<ip>&port=<port>
+        const proxyAddress = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/vnc`;
+        const base = proxyAddress.replace(/\/$/, "");
+        const params = new URLSearchParams({
+            host: target.ip,
+            port: String(target.port),
+            authToken: "test-token"
+        });
+        const wsUrl = `${base}?${params.toString()}`;
+
+        toast({ title: "Connecting…", description: wsUrl });
+
+        // Clear the container so noVNC gets a clean mount point.
+        screenRef.current.innerHTML = "";
+
+        const options: Record<string, unknown> = {};
+        if (form.password) {
+            options.credentials = { password: form.password };
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const rfb: any = new RFB(screenRef.current, wsUrl, options);
+
+        rfb.scaleViewport = true;
+        rfb.resizeSession = true;
+
+        rfb.addEventListener("connect", () => {
+            toast({ title: "Connected" });
+            setConnected(true);
+        });
+
+        rfb.addEventListener(
+            "disconnect",
+            (e: { detail: { clean: boolean } }) => {
+                rfbRef.current = null;
+                setConnected(false);
+                toast({
+                    title: e.detail.clean ? "Disconnected" : "Connection lost",
+                    variant: e.detail.clean ? "default" : "destructive"
+                });
+            }
+        );
+
+        rfb.addEventListener(
+            "securityfailure",
+            (e: { detail: { status: number; reason?: string } }) => {
+                toast({
+                    variant: "destructive",
+                    title: "Authentication failed",
+                    description: e.detail.reason ?? `Status ${e.detail.status}`
+                });
+            }
+        );
+
+        rfbRef.current = rfb;
+    };
+
+    if (error) {
+        return (
+            <div className="min-h-screen bg-background flex items-center justify-center">
+                <p className="text-destructive">{error}</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-background">
+            {!connected && (
+                <div className="mx-auto max-w-2xl p-6">
+                    <h1 className="mb-4 text-2xl font-semibold">
+                        VNC Test Connection
+                    </h1>
+
+                    <div className="space-y-4">
+                        <Field label="Password (optional)" id="password">
+                            <Input
+                                id="password"
+                                type="password"
+                                value={form.password}
+                                onChange={(e) =>
+                                    update("password", e.target.value)
+                                }
+                            />
+                        </Field>
+
+                        <Button onClick={connect} className="w-full">
+                            Connect
+                        </Button>
+                    </div>
+                </div>
+            )}
+
+            <div
+                className="flex h-screen flex-col bg-neutral-900"
+                style={{ display: connected ? "flex" : "none" }}
+            >
+                <div className="flex items-center gap-2 bg-black p-2 text-white">
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => {
+                            if (rfbRef.current) {
+                                rfbRef.current.sendCtrlAltDel();
+                            }
+                        }}
+                    >
+                        Ctrl+Alt+Del
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => {
+                            navigator.clipboard
+                                ?.readText()
+                                .then((text) => {
+                                    rfbRef.current?.clipboardPasteFrom(text);
+                                })
+                                .catch(() => {});
+                        }}
+                    >
+                        Paste clipboard
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={disconnect}
+                    >
+                        Disconnect
+                    </Button>
+                </div>
+
+                {/* noVNC mounts a <canvas> inside this div */}
+                <div
+                    ref={screenRef}
+                    className="flex-1 overflow-hidden"
+                    style={{ background: "#000" }}
+                />
+            </div>
+        </div>
+    );
+}
+
+function Field({
+    label,
+    id,
+    children
+}: {
+    label: string;
+    id: string;
+    children: React.ReactNode;
+}) {
+    return (
+        <div className="space-y-1.5">
+            <Label htmlFor={id}>{label}</Label>
+            {children}
+        </div>
+    );
+}

src/app/vnc/page.tsx

@@ -0,0 +1,31 @@
+import { headers } from "next/headers";
+import { internal } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { GetBrowserTargetResponse } from "@server/routers/resource";
+import VncClient from "./VncClient";
+
+export const dynamic = "force-dynamic";
+
+export const metadata = {
+    title: "VNC Test"
+};
+
+export default async function VncPage() {
+    const headersList = await headers();
+    const host = headersList.get("host") || "";
+    const hostname = host.split(":")[0];
+
+    let target: { ip: string; port: number } | null = null;
+    let error: string | null = null;
+
+    try {
+        const res = await internal.get<AxiosResponse<GetBrowserTargetResponse>>(
+            `/resource/browser-target?fullDomain=${encodeURIComponent(hostname)}`
+        );
+        target = res.data.data;
+    } catch {
+        error = "No resource found for this domain";
+    }
+
+    return <VncClient target={target} error={error} />;
+}

src/types/css-modules.d.ts

@@ -0,0 +1,3 @@
+// Allow importing plain CSS files as side-effect imports (e.g. xterm.css).
+declare module "*.css" {}
+declare module "@xterm/xterm/css/xterm.css" {}