release-2.5.0 (#994)

* feat(sshid) - sshid.io equivalent for termix (#919) * feat(ssh-id): database schema, migrations and field encryption Adds ssh_identities, ssh_identity_keys and ssh_identity_ca tables (public keys stored plaintext for the unauthenticated resolver; CA private key registered for per-user field encryption), with UNIQUE(user_id), an index on ssh_identity_keys(identity_id), and idempotent CREATE TABLE migrations. * feat(ssh-id): backend API — resolver, key management, CA and certificates Mounts /sshid (nginx route added). Public text/plain authorized_keys resolver (+ exact /:algo filter, HTML viewer) and CA public-key endpoint; no-store + noindex headers on every resolver response including early 404s. Authenticated management: claim/rename/delete handle, add/import/generate/enable/delete keys, and a per-user CA (create/rotate/delete) with pure-Node OpenSSH certificate issuance. Audit logging on all mutations; UNIQUE races map to a precise 409. Unit tests for key parsing and certificate signing (ssh-keygen-validated). * feat(ssh-id): frontend panel, API client and i18n SSH ID panel wired into the app rail and AppShell: claim handle, resolver URL + curl one-liner, key list, generate, paste/import, CA enable/rotate/remove with server trust command, and per-key certificate issuance. API client re-exported through main-axios.ts; all strings i18n'd. * style(ssh-id): align panel and resolver page with Termix theme - Rebuild the SSH ID sidebar panel with the theme's square components (SectionCard / SettingRow / FakeSwitch) instead of rounded ad-hoc cards; use accent-brand and destructive tokens rather than raw red/green. - Fix panel scrolling: move overflow to a block scroll container so the cards keep their natural height instead of being clipped. - Restyle the public resolver HTML page (/sshid/u/:handle) to the Termix dark theme: square corners, #18181b/#303032 palette, #f59145 accent, uppercase section labels. - Tidy copy: 'Save To Credentials' label, drop the redundant generate intro, and correct the generate tooltip (the key is stored when saving to vault). * feat: rename to Termix ID, improve UI, backend inconsistencies, and general bug fixes --------- Co-authored-by: LukeGus <bugattiguy527@gmail.com> * ci(deps): bump actions/checkout from 6 to 7 in the github-actions group (#922) Bumps the github-actions group with 1 update: [actions/checkout](https://github.com/actions/checkout). Updates `actions/checkout` from 6 to 7 - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](https://github.com/actions/checkout/compare/v6...v7) --- updated-dependencies: - dependency-name: actions/checkout dependency-version: '7' dependency-type: direct:production update-type: version-update:semver-major dependency-group: github-actions ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump the dev-patch-updates group with 11 updates (#923) Bumps the dev-patch-updates group with 11 updates: | Package | From | To | | --- | --- | --- | | [@codemirror/search](https://github.com/codemirror/search) | `6.7.0` | `6.7.1` | | [@codemirror/view](https://github.com/codemirror/view) | `6.43.0` | `6.43.1` | | [@tailwindcss/vite](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-vite) | `4.3.0` | `4.3.1` | | [@vitest/coverage-v8](https://github.com/vitest-dev/vitest/tree/HEAD/packages/coverage-v8) | `4.1.8` | `4.1.9` | | [@vitest/ui](https://github.com/vitest-dev/vitest/tree/HEAD/packages/ui) | `4.1.8` | `4.1.9` | | [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) | `0.5.2` | `0.5.3` | | [lint-staged](https://github.com/lint-staged/lint-staged) | `17.0.7` | `17.0.8` | | [prettier](https://github.com/prettier/prettier) | `3.8.3` | `3.8.4` | | [sharp](https://github.com/lovell/sharp) | `0.35.1` | `0.35.2` | | [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss) | `4.3.0` | `4.3.1` | | [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest) | `4.1.8` | `4.1.9` | Updates `@codemirror/search` from 6.7.0 to 6.7.1 - [Changelog](https://github.com/codemirror/search/blob/main/CHANGELOG.md) - [Commits](https://github.com/codemirror/search/commits) Updates `@codemirror/view` from 6.43.0 to 6.43.1 - [Changelog](https://github.com/codemirror/view/blob/main/CHANGELOG.md) - [Commits](https://github.com/codemirror/view/commits) Updates `@tailwindcss/vite` from 4.3.0 to 4.3.1 - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.3.1/packages/@tailwindcss-vite) Updates `@vitest/coverage-v8` from 4.1.8 to 4.1.9 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md) - [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.9/packages/coverage-v8) Updates `@vitest/ui` from 4.1.8 to 4.1.9 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md) - [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.9/packages/ui) Updates `eslint-plugin-react-refresh` from 0.5.2 to 0.5.3 - [Release notes](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/releases) - [Changelog](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/CHANGELOG.md) - [Commits](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/compare/v0.5.2...v0.5.3) Updates `lint-staged` from 17.0.7 to 17.0.8 - [Release notes](https://github.com/lint-staged/lint-staged/releases) - [Changelog](https://github.com/lint-staged/lint-staged/blob/main/CHANGELOG.md) - [Commits](https://github.com/lint-staged/lint-staged/compare/v17.0.7...v17.0.8) Updates `prettier` from 3.8.3 to 3.8.4 - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/3.8.3...3.8.4) Updates `sharp` from 0.35.1 to 0.35.2 - [Release notes](https://github.com/lovell/sharp/releases) - [Commits](https://github.com/lovell/sharp/compare/v0.35.1...v0.35.2) Updates `tailwindcss` from 4.3.0 to 4.3.1 - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.3.1/packages/tailwindcss) Updates `vitest` from 4.1.8 to 4.1.9 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md) - [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.9/packages/vitest) --- updated-dependencies: - dependency-name: "@codemirror/search" dependency-version: 6.7.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@codemirror/view" dependency-version: 6.43.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@tailwindcss/vite" dependency-version: 4.3.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@vitest/coverage-v8" dependency-version: 4.1.9 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@vitest/ui" dependency-version: 4.1.9 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: eslint-plugin-react-refresh dependency-version: 0.5.3 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: lint-staged dependency-version: 17.0.8 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: prettier dependency-version: 3.8.4 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: sharp dependency-version: 0.35.2 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: tailwindcss dependency-version: 4.3.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: vitest dependency-version: 4.1.9 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump nanoid in the prod-patch-updates group (#925) Bumps the prod-patch-updates group with 1 update: [nanoid](https://github.com/ai/nanoid). Updates `nanoid` from 5.1.11 to 5.1.15 - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](https://github.com/ai/nanoid/compare/5.1.11...5.1.15) --- updated-dependencies: - dependency-name: nanoid dependency-version: 5.1.15 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: prod-patch-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump the major-updates group with 5 updates (#926) Bumps the major-updates group with 5 updates: | Package | From | To | | --- | --- | --- | | [js-yaml](https://github.com/nodeca/js-yaml) | `4.2.0` | `5.0.0` | | [@eslint/js](https://github.com/eslint/eslint/tree/HEAD/packages/js) | `9.39.4` | `10.0.1` | | [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) | `25.9.2` | `26.0.0` | | [concurrently](https://github.com/open-cli-tools/concurrently) | `9.2.1` | `10.0.3` | | [eslint](https://github.com/eslint/eslint) | `9.39.4` | `10.5.0` | Updates `js-yaml` from 4.2.0 to 5.0.0 - [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md) - [Commits](https://github.com/nodeca/js-yaml/compare/4.2.0...5.0.0) Updates `@eslint/js` from 9.39.4 to 10.0.1 - [Release notes](https://github.com/eslint/eslint/releases) - [Commits](https://github.com/eslint/eslint/commits/v10.0.1/packages/js) Updates `@types/node` from 25.9.2 to 26.0.0 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Updates `concurrently` from 9.2.1 to 10.0.3 - [Release notes](https://github.com/open-cli-tools/concurrently/releases) - [Commits](https://github.com/open-cli-tools/concurrently/compare/v9.2.1...v10.0.3) Updates `eslint` from 9.39.4 to 10.5.0 - [Release notes](https://github.com/eslint/eslint/releases) - [Commits](https://github.com/eslint/eslint/compare/v9.39.4...v10.5.0) --- updated-dependencies: - dependency-name: js-yaml dependency-version: 5.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: major-updates - dependency-name: "@eslint/js" dependency-version: 10.0.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates - dependency-name: "@types/node" dependency-version: 26.0.0 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates - dependency-name: concurrently dependency-version: 10.0.3 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates - dependency-name: eslint dependency-version: 10.5.0 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(ssh): add HashiCorp Vault SSH signer authentication * fix: small fixes to vault feature to align with Termix codebase * chore: add view docs links for vault/termix id * fix: file upload fails with 400 and missing schema migrations on upgrade (#929) Two bugs introduced in v2.4.1: 1. uploadFileStream uses fileManagerApi.post() which triggers axios's transformRequest to JSON-serialize the FormData because the instance default Content-Type is application/json. Change to postForm() which sets Content-Type: multipart/form-data so the browser XHR sends the correct multipart body with boundary. 2. Two schema items added to schema.ts were not included in migrateSchema() in db/index.ts, causing 500 errors on existing installations upgrading from v2.4.0: - user_preferences.status_color_scheme (no such column) - dashboard_service_links table (no such table) Fixes #928 Co-authored-by: sash <sash@fominykh.io> * fix: support PuTTY PPK ssh keys (#930) * fix: chunk large file manager uploads (#932) * fix: route dashboard hosts by protocol (#934) * fix: resolve tunnel endpoints reliably (#935) * Fix Electron OIDC browser auth failures (#936) * Allow RDP connections without stored credentials (#937) * Sync role credential shares for OIDC users (#938) * Fix terminal link dialog layering (#940) * Confirm large files before opening editor (#942) * Confirm closing active host connections (#943) * Preserve file path case in file manager UI (#941) * fix: preserve unicode guacamole tokens (#933) * Persist VNC authentication settings (#944) * Fix Guacamole websocket base path (#946) * Promote file manager terminals to tabs (#939) * Guard Guacamole disconnect during startup (#945) * chore: increment ver * feat: bitwarden ssh agent integration * feat: serial connections support * fix: various small bug fixes * feat: open all sessions in a folder and terminal custom theme color support * feat: cross host file manager clipboard and several small bug fixes * feat: tailscale/wireguard support and added a new status state for when backend is checking status * feat: grafana like server stats history, new alert system, ntfy/webhook support * feat: new grid and widget based homepage function * feat: new donate button in dashboard * fix: alert ui incorrectly using termix css and fixed issue with alert system not loading * chore: fix ci checks (#966) * Fix dashboard service link creation (#950) * Fix jump host SOCKS5 proxy selection (#951) * Fix jump host SOCKS5 proxy selection * fix: type jump host socks proxy config * Fix tmux detection path handling (#949) * Support GUACD_URL environment config (#952) * Retry autostart tunnel host fetches (#953) * Retry autostart tunnel host fetches * chore: format tunnel route * Fix PUID html ownership in Docker entrypoint (#954) * feat: allow custom tunnel endpoints (#977) * fix: skip metrics start for non-ssh hosts (#976) * Fix Proxmox import auth fallback (#956) * Fix Proxmox import auth fallback * chore: format proxmox import auth * Fix SSH heading syntax highlighting (#955) * Fix SSH heading syntax highlighting * chore: format terminal highlighter * Initialize auth before fullscreen terminal routes (#957) * Add WebAuthn passkey authentication (#959) * chore: add Biome tooling (#965) * chore: add biome tooling * chore: support tailwind syntax in biome * Fix VNC required argument handshake (#968) * Prioritize host results in command palette search (#969) * Prevent sidebar host hover layout shift (#970) * Add terminal font zoom with mouse wheel (#971) * Add host temperature metrics card (#972) * Make file downloads reliable in desktop app (#973) * Add app rail hover expansion setting (#974) * fix: use correct translation key for nav.close (#964) * fix(tunnel): skip endpoint credential validation for direct tunnels (#963) * fix: SSH port connection bug (#975) * fix: chunked upload for files >=1.5GB to bypass browser ArrayBuffer limit (#948) * feat: support SSH agent auth across SSH features (#960) * feat: add Podman container runtime support (#958) * chore: update readme and release notes * fix: stabilize Windows app icon (#978) * Add safe host sharing export (#979) * Add external editor support for file manager (#985) * Rework SSH credential password handling (#984) * Support password fallback for SSH key credentials * Complete SSH credential password fallback * Fix runtime base path for auth callbacks (#982) * Fix TUI terminal output highlighting (#983) Co-authored-by: LukeGus <bugattiguy527@gmail.com> * Add app fullscreen mode (#993) * Fix host metrics startup polling (#986) * chore: update release notes * fix: line chart text overlap * chore: update RELEASE_NOTES.md * chore: add donation goal to readme * chore: update readme * fix: hide full-screen button in electron app * fix: failed unit tests * chore: lint, format, and bump version to 2.5.0 * chore: remove timeout from crowdin translate * chore: sync Crowdin translations for 2.5.0 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: DivByZero <mr.oplus@yahoo.fr> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: devdanetra <46488477+devdanetra@users.noreply.github.com> Co-authored-by: Aleksandr Fominykh <neoformalex@users.noreply.github.com> Co-authored-by: sash <sash@fominykh.io> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com>
2026-07-15 21:03:47 +00:00 · 2026-06-29 13:28:26 -05:00
parent fd27a366d0
commit 9de904dd4c
348 changed files with 125184 additions and 76537 deletions
@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+} from "react";
 import {
  GuacamoleDisplay,
  type GuacamoleDisplayHandle,
@@ -22,67 +28,71 @@ interface GuacamoleAppProps {
  protocol?: "rdp" | "vnc" | "telnet";
 }

-const GuacamoleApp: React.FC<GuacamoleAppProps> = ({
-  hostId,
-  tabId,
-  protocol,
-}) => {
-  const { t } = useTranslation();
-  const [hostConfig, setHostConfig] = useState<SSHHost | null>(null);
-  const [loading, setLoading] = useState(true);
+export interface GuacamoleAppHandle {
+  disconnect: () => void;
+  isConnected: () => boolean;
+}

-  useEffect(() => {
-    if (!hostId) {
-      setLoading(false);
-      return;
+const GuacamoleApp = React.forwardRef<GuacamoleAppHandle, GuacamoleAppProps>(
+  function GuacamoleApp({ hostId, tabId, protocol }, ref) {
+    const { t } = useTranslation();
+    const [hostConfig, setHostConfig] = useState<SSHHost | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+      if (!hostId) {
+        setLoading(false);
+        return;
+      }
+      getSSHHosts()
+        .then((hosts) => {
+          const host = hosts.find((h) => h.id === parseInt(hostId, 10));
+          setHostConfig(host ?? null);
+        })
+        .catch(() => setHostConfig(null))
+        .finally(() => setLoading(false));
+    }, [hostId]);
+
+    if (loading) {
+      return (
+        <div className="relative w-full h-full">
+          <SimpleLoader visible={true} message={t("common.loading")} />
+        </div>
+      );
    }
-    getSSHHosts()
-      .then((hosts) => {
-        const host = hosts.find((h) => h.id === parseInt(hostId, 10));
-        setHostConfig(host ?? null);
-      })
-      .catch(() => setHostConfig(null))
-      .finally(() => setLoading(false));
-  }, [hostId]);

-  if (loading) {
-    return (
-      <div className="relative w-full h-full">
-        <SimpleLoader visible={true} message={t("common.loading")} />
-      </div>
-    );
-  }
-
-  if (!hostConfig || !hostId) {
-    return (
-      <div
-        className="flex flex-col items-center justify-center h-full gap-4"
-        style={{ backgroundColor: "var(--bg-base)" }}
-      >
-        <AlertCircle
-          className="size-10"
-          style={{ color: "var(--foreground)" }}
-        />
-        <span
-          className="text-sm font-semibold"
-          style={{ color: "var(--foreground)" }}
+    if (!hostConfig || !hostId) {
+      return (
+        <div
+          className="flex flex-col items-center justify-center h-full gap-4"
+          style={{ backgroundColor: "var(--bg-base)" }}
        >
-          {t("guacamole.hostNotFound")}
-        </span>
-      </div>
-    );
-  }
+          <AlertCircle
+            className="size-10"
+            style={{ color: "var(--foreground)" }}
+          />
+          <span
+            className="text-sm font-semibold"
+            style={{ color: "var(--foreground)" }}
+          >
+            {t("guacamole.hostNotFound")}
+          </span>
+        </div>
+      );
+    }

-  return (
-    <GuacamoleAppInner
-      hostId={parseInt(hostId, 10)}
-      hostConfig={hostConfig}
-      hostName={hostConfig.name || hostConfig.ip || String(hostId)}
-      tabId={tabId}
-      protocol={protocol}
-    />
-  );
-};
+    return (
+      <GuacamoleAppInner
+        hostId={parseInt(hostId, 10)}
+        hostConfig={hostConfig}
+        hostName={hostConfig.name || hostConfig.ip || String(hostId)}
+        tabId={tabId}
+        protocol={protocol}
+        ref={ref}
+      />
+    );
+  },
+);

 interface GuacamoleAppInnerProps {
  hostId: number;
@@ -92,13 +102,13 @@ interface GuacamoleAppInnerProps {
  protocol?: "rdp" | "vnc" | "telnet";
 }

-const GuacamoleAppInner: React.FC<GuacamoleAppInnerProps> = ({
-  hostId,
-  hostConfig,
-  hostName,
-  tabId,
-  protocol,
-}) => {
+const GuacamoleAppInner = React.forwardRef<
+  GuacamoleAppHandle,
+  GuacamoleAppInnerProps
+>(function GuacamoleAppInner(
+  { hostId, hostConfig, hostName, tabId, protocol },
+  ref,
+) {
  const { t } = useTranslation();
  const [token, setToken] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
@@ -106,6 +116,11 @@ const GuacamoleAppInner: React.FC<GuacamoleAppInnerProps> = ({
  const [retryCount, setRetryCount] = useState(0);
  const displayRef = useRef<GuacamoleDisplayHandle>(null);

+  useImperativeHandle(ref, () => ({
+    disconnect: () => displayRef.current?.disconnect(),
+    isConnected: () => displayRef.current?.isConnected() === true,
+  }));
+
  useEffect(() => {
    setToken(null);
    setError(null);
@@ -127,7 +142,7 @@ const GuacamoleAppInner: React.FC<GuacamoleAppInnerProps> = ({
        }
      })
      .catch((err) => setError(err?.message || t("guacamole.failedToConnect")));
-  }, [hostId, protocol, retryCount, t]);
+  }, [hostConfig.connectionType, hostId, hostName, protocol, retryCount, t]);

  const handleReconnect = useCallback(() => {
    setConnectionError(null);
@@ -242,6 +257,6 @@ const GuacamoleAppInner: React.FC<GuacamoleAppInnerProps> = ({
      <GuacamoleToolbar displayRef={displayRef} protocol={resolvedProtocol} />
    </div>
  );
-};
+});

 export default GuacamoleApp;
@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import { buildGuacamoleWebSocketBaseUrl } from "./guacamole-websocket-url.js";
+
+const httpsLocation = {
+  protocol: "https:",
+  host: "termix.example.com",
+} as Location;
+
+describe("buildGuacamoleWebSocketBaseUrl", () => {
+  it("uses the same origin guacamole websocket path in production web builds", () => {
+    expect(
+      buildGuacamoleWebSocketBaseUrl({
+        isDev: false,
+        isElectronApp: false,
+        isEmbeddedApp: false,
+        basePath: "",
+        location: httpsLocation,
+      }),
+    ).toBe("wss://termix.example.com/guacamole/websocket/");
+  });
+
+  it("preserves the runtime base path for proxied web deployments", () => {
+    expect(
+      buildGuacamoleWebSocketBaseUrl({
+        isDev: false,
+        isElectronApp: false,
+        isEmbeddedApp: false,
+        basePath: "/termix",
+        location: httpsLocation,
+      }),
+    ).toBe("wss://termix.example.com/termix/guacamole/websocket/");
+  });
+
+  it("keeps direct local websocket access for development and embedded electron", () => {
+    expect(
+      buildGuacamoleWebSocketBaseUrl({
+        isDev: true,
+        isElectronApp: false,
+        isEmbeddedApp: false,
+        basePath: "/termix",
+        location: httpsLocation,
+      }),
+    ).toBe("ws://localhost:30008");
+
+    expect(
+      buildGuacamoleWebSocketBaseUrl({
+        isDev: false,
+        isElectronApp: true,
+        isEmbeddedApp: true,
+        basePath: "/termix",
+        location: httpsLocation,
+      }),
+    ).toBe("ws://127.0.0.1:30008");
+  });
+
+  it("uses the configured remote server URL for electron remote mode", () => {
+    expect(
+      buildGuacamoleWebSocketBaseUrl({
+        isDev: false,
+        isElectronApp: true,
+        isEmbeddedApp: false,
+        configuredServerUrl: "https://termix.example.com/termix/",
+        basePath: "",
+        location: httpsLocation,
+      }),
+    ).toBe("wss://termix.example.com/termix/guacamole/websocket/");
+  });
+});
@@ -10,6 +10,8 @@ import Guacamole from "guacamole-common-js";
 import { useTranslation } from "react-i18next";
 import { getGuacamoleToken, isElectron, isEmbeddedMode } from "@/main-axios.ts";
 import { SimpleLoader } from "@/lib/SimpleLoader.tsx";
+import { getBasePath } from "@/lib/base-path.ts";
+import { buildGuacamoleWebSocketBaseUrl } from "./guacamole-websocket-url.ts";

 export type GuacamoleConnectionType = "rdp" | "vnc" | "telnet";

@@ -30,6 +32,7 @@ export interface GuacamoleConnectionConfig {

 export interface GuacamoleDisplayHandle {
  disconnect: () => void;
+  isConnected: () => boolean;
  sendKey: (keysym: number, pressed: boolean) => void;
  sendMouse: (x: number, y: number, buttonMask: number) => void;
  setClipboard: (data: string) => void;
@@ -64,15 +67,28 @@ export const GuacamoleDisplay = forwardRef<
  const windowFocusedRef = useRef(
    typeof document === "undefined" ? true : document.hasFocus(),
  );
+  const hasInitiatedRef = useRef(false);
+  const isMountedRef = useRef(false);
+  const isConnectingRef = useRef(false);
  const [isReady, setIsReady] = useState(false);
  const [hasError, setHasError] = useState(false);

+  const disconnectClient = useCallback(() => {
+    const client = clientRef.current;
+    clientRef.current = null;
+    isConnectingRef.current = false;
+    if (!client) return;
+
+    try {
+      client.disconnect();
+    } catch (error) {
+      console.warn("Failed to disconnect Guacamole client", error);
+    }
+  }, []);
+
  useImperativeHandle(ref, () => ({
-    disconnect: () => {
-      if (clientRef.current) {
-        clientRef.current.disconnect();
-      }
-    },
+    disconnect: disconnectClient,
+    isConnected: () => isReady && !hasError,
    sendKey: (keysym: number, pressed: boolean) => {
      if (clientRef.current) {
        clientRef.current.sendKeyEvent(pressed ? 1 : 0, keysym);
@@ -138,29 +154,15 @@ export const GuacamoleDisplay = forwardRef<
        const width = connectionConfig.width ?? containerWidth ?? 1280;
        const height = connectionConfig.height ?? containerHeight ?? 720;

-        const wsBase = isDev
-          ? `ws://localhost:30008`
-          : isElectron()
-            ? (() => {
-                const configuredUrl = (
-                  window as { configuredServerUrl?: string }
-                ).configuredServerUrl;
-
-                // Embedded mode or no configured remote server: connect directly
-                // to the local guacamole websocket service.
-                if (isEmbeddedMode() || !configuredUrl) {
-                  return "ws://127.0.0.1:30008";
-                }
-
-                const wsProtocol = configuredUrl.startsWith("https://")
-                  ? "wss://"
-                  : "ws://";
-                const wsHost = configuredUrl
-                  .replace(/^https?:\/\//, "")
-                  .replace(/\/$/, "");
-                return `${wsProtocol}${wsHost}/guacamole/websocket/`;
-              })()
-            : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/guacamole/websocket/`;
+        const wsBase = buildGuacamoleWebSocketBaseUrl({
+          isDev,
+          isElectronApp: isElectron(),
+          isEmbeddedApp: isEmbeddedMode(),
+          configuredServerUrl: (window as { configuredServerUrl?: string })
+            .configuredServerUrl,
+          basePath: getBasePath(),
+          location: window.location,
+        });

        const params = new URLSearchParams({
          token,
@@ -274,6 +276,10 @@ export const GuacamoleDisplay = forwardRef<
    await new Promise<void>((resolve) =>
      requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
    );
+    if (!isMountedRef.current) {
+      isConnectingRef.current = false;
+      return;
+    }

    // The tab's DOM node can still be display:none (and report 0x0) when this
    // tab is restored in the background. Measuring then would force the
@@ -294,6 +300,10 @@ export const GuacamoleDisplay = forwardRef<
      await new Promise<void>((resolve) =>
        requestAnimationFrame(() => resolve()),
      );
+      if (!isMountedRef.current) {
+        isConnectingRef.current = false;
+        return;
+      }
      ({ width: containerWidth, height: containerHeight } = measureContainer());
    }

@@ -303,6 +313,10 @@ export const GuacamoleDisplay = forwardRef<
    }

    const wsUrl = await getWebSocketUrl(containerWidth, containerHeight);
+    if (!isMountedRef.current) {
+      isConnectingRef.current = false;
+      return;
+    }
    if (!wsUrl) {
      isConnectingRef.current = false;
      return;
@@ -325,12 +339,13 @@ export const GuacamoleDisplay = forwardRef<
    displayElement.style.outline = "none";

    display.onresize = () => {
+      if (!isMountedRef.current) return;
      rescaleDisplay(true);
      setIsReady(true);
    };

    const protocol = connectionConfig.protocol ?? connectionConfig.type;
-    if (protocol === "telnet") {
+    if (protocol === "telnet" && isMountedRef.current) {
      setIsReady(true);
    }

@@ -374,6 +389,7 @@ export const GuacamoleDisplay = forwardRef<
    refreshKeyboardHandlers();

    client.onstatechange = (state: number) => {
+      if (!isMountedRef.current) return;
      switch (state) {
        case 0:
          break;
@@ -405,6 +421,7 @@ export const GuacamoleDisplay = forwardRef<
    };

    client.onerror = (error: Guacamole.Status) => {
+      if (!isMountedRef.current) return;
      const errorMessage = error.message || t("guacamole.connectionError");
      setIsReady(false);
      setHasError(true);
@@ -447,7 +464,17 @@ export const GuacamoleDisplay = forwardRef<
      stream.sendAck("OK", Guacamole.Status.Code.SUCCESS);
    };

-    client.connect();
+    try {
+      client.connect();
+    } catch (error) {
+      isConnectingRef.current = false;
+      if (!isMountedRef.current) return;
+      setIsReady(false);
+      setHasError(true);
+      onError?.(
+        error instanceof Error ? error.message : t("guacamole.connectionError"),
+      );
+    }
  }, [
    getWebSocketUrl,
    onConnect,
@@ -460,10 +487,6 @@ export const GuacamoleDisplay = forwardRef<
    t,
  ]);

-  const hasInitiatedRef = useRef(false);
-  const isMountedRef = useRef(false);
-  const isConnectingRef = useRef(false);
-
  useEffect(() => {
    isMountedRef.current = true;

@@ -521,13 +544,10 @@ export const GuacamoleDisplay = forwardRef<
      if (resizeTimeoutRef.current) {
        clearTimeout(resizeTimeoutRef.current);
      }
-      if (clientRef.current) {
-        clientRef.current.disconnect();
-        clientRef.current = null;
-      }
+      disconnectClient();
      displayElementRef.current = null;
    };
-  }, []);
+  }, [disconnectClient]);

  useEffect(() => {
    if (!containerRef.current) return;
@@ -0,0 +1,31 @@
+export function buildGuacamoleWebSocketBaseUrl({
+  isDev,
+  isElectronApp,
+  isEmbeddedApp,
+  configuredServerUrl,
+  basePath,
+  location,
+}: {
+  isDev: boolean;
+  isElectronApp: boolean;
+  isEmbeddedApp: boolean;
+  configuredServerUrl?: string;
+  basePath: string;
+  location: Pick<Location, "protocol" | "host">;
+}) {
+  if (isDev) return "ws://localhost:30008";
+  if (isElectronApp) {
+    if (isEmbeddedApp || !configuredServerUrl) return "ws://127.0.0.1:30008";
+
+    const wsProtocol = configuredServerUrl.startsWith("https://")
+      ? "wss://"
+      : "ws://";
+    const wsHost = configuredServerUrl
+      .replace(/^https?:\/\//, "")
+      .replace(/\/$/, "");
+    return `${wsProtocol}${wsHost}/guacamole/websocket/`;
+  }
+
+  const wsProtocol = location.protocol === "https:" ? "wss" : "ws";
+  return `${wsProtocol}://${location.host}${basePath}/guacamole/websocket/`;
+}