release-2.5.1 (#1067)

* chore(deps): bump node from 24-slim to 26-slim in /docker in the docker-major-updates group (#1021) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * chore(deps): bump node in /docker in the docker-major-updates group Bumps the docker-major-updates group in /docker with 1 update: node. Updates `node` from 24-slim to 26-slim --- updated-dependencies: - dependency-name: node dependency-version: 26-slim dependency-type: direct:production dependency-group: docker-major-updates ... Signed-off-by: dependabot[bot] <support@github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump the dev-patch-updates group with 24 updates (#1023) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * chore(deps-dev): bump the dev-patch-updates group with 24 updates Bumps the dev-patch-updates group with 24 updates: | Package | From | To | | --- | --- | --- | | [@biomejs/biome](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome) | `2.5.1` | `2.5.2` | | [@codemirror/commands](https://github.com/codemirror/commands) | `6.10.3` | `6.10.4` | | [@codemirror/view](https://github.com/codemirror/view) | `6.43.1` | `6.43.5` | | [@radix-ui/react-accordion](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/accordion) | `1.2.14` | `1.2.15` | | [@radix-ui/react-alert-dialog](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/alert-dialog) | `1.1.17` | `1.1.18` | | [@radix-ui/react-checkbox](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/checkbox) | `1.3.5` | `1.3.6` | | [@radix-ui/react-dialog](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/dialog) | `1.1.17` | `1.1.18` | | [@radix-ui/react-dropdown-menu](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/dropdown-menu) | `2.1.18` | `2.1.19` | | [@radix-ui/react-label](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/label) | `2.1.10` | `2.1.11` | | [@radix-ui/react-popover](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/popover) | `1.1.17` | `1.1.18` | | [@radix-ui/react-progress](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/progress) | `1.1.10` | `1.1.11` | | [@radix-ui/react-scroll-area](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/scroll-area) | `1.2.12` | `1.2.13` | | [@radix-ui/react-select](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/select) | `2.3.1` | `2.3.2` | | [@radix-ui/react-separator](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/separator) | `1.1.10` | `1.1.11` | | [@radix-ui/react-slider](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/slider) | `1.4.1` | `1.4.2` | | [@radix-ui/react-switch](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/switch) | `1.3.1` | `1.3.2` | | [@radix-ui/react-tabs](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/tabs) | `1.1.15` | `1.1.16` | | [@radix-ui/react-tooltip](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/tooltip) | `1.2.10` | `1.2.11` | | [@tailwindcss/vite](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-vite) | `4.3.1` | `4.3.2` | | [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react) | `6.0.2` | `6.0.3` | | [i18next](https://github.com/i18next/i18next) | `26.3.1` | `26.3.4` | | [radix-ui](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/radix-ui) | `1.6.0` | `1.6.1` | | [sharp](https://github.com/lovell/sharp) | `0.35.2` | `0.35.3` | | [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss) | `4.3.1` | `4.3.2` | Updates `@biomejs/biome` from 2.5.1 to 2.5.2 - [Release notes](https://github.com/biomejs/biome/releases) - [Changelog](https://github.com/biomejs/biome/blob/main/packages/@biomejs/biome/CHANGELOG.md) - [Commits](https://github.com/biomejs/biome/commits/@biomejs/biome@2.5.2/packages/@biomejs/biome) Updates `@codemirror/commands` from 6.10.3 to 6.10.4 - [Changelog](https://github.com/codemirror/commands/blob/main/CHANGELOG.md) - [Commits](https://github.com/codemirror/commands/commits) Updates `@codemirror/view` from 6.43.1 to 6.43.5 - [Changelog](https://github.com/codemirror/view/blob/main/CHANGELOG.md) - [Commits](https://github.com/codemirror/view/commits) Updates `@radix-ui/react-accordion` from 1.2.14 to 1.2.15 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/accordion/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/accordion) Updates `@radix-ui/react-alert-dialog` from 1.1.17 to 1.1.18 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/alert-dialog/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/alert-dialog) Updates `@radix-ui/react-checkbox` from 1.3.5 to 1.3.6 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/checkbox/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/checkbox) Updates `@radix-ui/react-dialog` from 1.1.17 to 1.1.18 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/dialog) Updates `@radix-ui/react-dropdown-menu` from 2.1.18 to 2.1.19 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/dropdown-menu/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/dropdown-menu) Updates `@radix-ui/react-label` from 2.1.10 to 2.1.11 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/label/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/label) Updates `@radix-ui/react-popover` from 1.1.17 to 1.1.18 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/popover/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/popover) Updates `@radix-ui/react-progress` from 1.1.10 to 1.1.11 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/progress/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/progress) Updates `@radix-ui/react-scroll-area` from 1.2.12 to 1.2.13 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/scroll-area) Updates `@radix-ui/react-select` from 2.3.1 to 2.3.2 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/select/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/select) Updates `@radix-ui/react-separator` from 1.1.10 to 1.1.11 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/separator/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/separator) Updates `@radix-ui/react-slider` from 1.4.1 to 1.4.2 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/slider/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/slider) Updates `@radix-ui/react-switch` from 1.3.1 to 1.3.2 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/switch/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/switch) Updates `@radix-ui/react-tabs` from 1.1.15 to 1.1.16 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/tabs/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/tabs) Updates `@radix-ui/react-tooltip` from 1.2.10 to 1.2.11 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/tooltip/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/tooltip) Updates `@tailwindcss/vite` from 4.3.1 to 4.3.2 - [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.2/packages/@tailwindcss-vite) Updates `@vitejs/plugin-react` from 6.0.2 to 6.0.3 - [Release notes](https://github.com/vitejs/vite-plugin-react/releases) - [Changelog](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite-plugin-react/commits/plugin-react@6.0.3/packages/plugin-react) Updates `i18next` from 26.3.1 to 26.3.4 - [Release notes](https://github.com/i18next/i18next/releases) - [Changelog](https://github.com/i18next/i18next/blob/master/CHANGELOG.md) - [Commits](https://github.com/i18next/i18next/compare/v26.3.1...v26.3.4) Updates `radix-ui` from 1.6.0 to 1.6.1 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/radix-ui/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/radix-ui) Updates `sharp` from 0.35.2 to 0.35.3 - [Release notes](https://github.com/lovell/sharp/releases) - [Commits](https://github.com/lovell/sharp/compare/v0.35.2...v0.35.3) Updates `tailwindcss` from 4.3.1 to 4.3.2 - [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.2/packages/tailwindcss) --- updated-dependencies: - dependency-name: "@biomejs/biome" dependency-version: 2.5.2 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@codemirror/commands" dependency-version: 6.10.4 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@codemirror/view" dependency-version: 6.43.5 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-accordion" dependency-version: 1.2.15 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-alert-dialog" dependency-version: 1.1.18 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-checkbox" dependency-version: 1.3.6 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-dialog" dependency-version: 1.1.18 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-dropdown-menu" dependency-version: 2.1.19 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-label" dependency-version: 2.1.11 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-popover" dependency-version: 1.1.18 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-progress" dependency-version: 1.1.11 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-scroll-area" dependency-version: 1.2.13 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-select" dependency-version: 2.3.2 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-separator" dependency-version: 1.1.11 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-slider" dependency-version: 1.4.2 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-switch" dependency-version: 1.3.2 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-tabs" dependency-version: 1.1.16 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@radix-ui/react-tooltip" dependency-version: 1.2.11 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@tailwindcss/vite" dependency-version: 4.3.2 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@vitejs/plugin-react" dependency-version: 6.0.3 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: i18next dependency-version: 26.3.4 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: radix-ui dependency-version: 1.6.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: sharp dependency-version: 0.35.3 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: tailwindcss dependency-version: 4.3.2 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates ... Signed-off-by: dependabot[bot] <support@github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump the prod-patch-updates group with 2 updates (#1025) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * chore(deps): bump the prod-patch-updates group with 2 updates Bumps the prod-patch-updates group with 2 updates: [axios](https://github.com/axios/axios) and [nanoid](https://github.com/ai/nanoid). Updates `axios` from 1.18.0 to 1.18.1 - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](https://github.com/axios/axios/compare/v1.18.0...v1.18.1) Updates `nanoid` from 5.1.15 to 5.1.16 - [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.15...5.1.16) --- updated-dependencies: - dependency-name: axios dependency-version: 1.18.1 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: prod-patch-updates - dependency-name: nanoid dependency-version: 5.1.16 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: prod-patch-updates ... Signed-off-by: dependabot[bot] <support@github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump the prod-minor-updates group with 3 updates (#1026) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * chore(deps): bump the prod-minor-updates group with 3 updates Bumps the prod-minor-updates group with 3 updates: [js-yaml](https://github.com/nodeca/js-yaml), [motion](https://github.com/motiondivision/motion) and [undici](https://github.com/nodejs/undici). Updates `js-yaml` from 5.0.0 to 5.2.1 - [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md) - [Commits](https://github.com/nodeca/js-yaml/compare/5.0.0...5.2.1) Updates `motion` from 12.40.0 to 12.42.2 - [Changelog](https://github.com/motiondivision/motion/blob/main/CHANGELOG.md) - [Commits](https://github.com/motiondivision/motion/compare/v12.40.0...v12.42.2) Updates `undici` from 8.5.0 to 8.7.0 - [Release notes](https://github.com/nodejs/undici/releases) - [Commits](https://github.com/nodejs/undici/compare/v8.5.0...v8.7.0) --- updated-dependencies: - dependency-name: js-yaml dependency-version: 5.2.1 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: motion dependency-version: 12.42.2 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: undici dependency-version: 8.7.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates ... Signed-off-by: dependabot[bot] <support@github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump electron from 42.4.1 to 43.0.0 in the major-updates group (#1027) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * chore(deps-dev): bump electron in the major-updates group Bumps the major-updates group with 1 update: [electron](https://github.com/electron/electron). Updates `electron` from 42.4.1 to 43.0.0 - [Release notes](https://github.com/electron/electron/releases) - [Commits](https://github.com/electron/electron/compare/v42.4.1...v43.0.0) --- updated-dependencies: - dependency-name: electron dependency-version: 43.0.0 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates ... Signed-off-by: dependabot[bot] <support@github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix MC syntax highlighting artifacts (#996) * Filter dashboard status hosts (#997) * Persist dashboard service link changes (#999) * Fix snippet text overflow (#1000) * Persist remote desktop credential auth (#1001) * Guard language switching failures (#1002) * Resolve tunnel source credentials (#1003) * Support Vault auth for monitors (#1004) * Fix Windows file delete command (#1005) * Fix release artifact checkout ref (#1006) * Fix command palette escape in fullscreen (#1008) * Fix alerts and audit log data normalization (#1010) * Fix macOS VNC protocol negotiation (#1012) * Fix port knocking before SSH connect (#1013) * Allow Escape to close link confirmation (#1014) * Prevent Electron modifier wheel zoom (#1016) * Fix credential auth optional password (#1009) * Retry transient terminal DNS lookups (#1011) * Retry transient terminal DNS lookups * Apply DNS retry to SSH entry points * Fix OIDC redirect forwarded port handling (#1007) * Preserve recent open tabs on startup (#1015) * Fix fish prompt OSC highlighting (#998) * Fix terminal font selection (#1018) * fix: font legibility (#1019) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * fix: font legibility Text was entirely unreadable in places for me. Especially with themes like Catppuccin. The muted-foreground text and the tags too similiar to the background. --------- Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: russell <git@0896c69e.com> * fix(file-manager): chunked uploads fail with 'Expected multipart/form-data request' (#1020) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * fix(file-manager): use postForm for chunked uploads so multipart content-type is sent The fileManagerApi axios instance defaults to Content-Type: application/json. Axios 1.x's default transformRequest converts a FormData body to JSON whenever the request content type is application/json, so every chunk POSTed to /ssh/uploadFileChunk arrived as a JSON body like {"chunk":{}} and the backend rejected it with 400 'Expected multipart/form-data request'. This breaks all uploads of files larger than the 1.5 GiB chunking threshold. The non-chunked path already uses postForm for /ssh/uploadFileStream; use it for the chunk path too so axios keeps the FormData intact and the browser sets the multipart boundary. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com> * feat: implement OIDC back-channel logout support with session management (#1028) * feat: implement OIDC back-channel logout support with session management * Fix OIDC back-channel logout handling * Require logout token replay identifiers --------- Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> * Add API key host enrollment endpoint (#1029) * Fix tmux detection for non-POSIX shells (#1030) * Fix OPKSSH js-yaml ESM import (#1031) * Fix Android Vietnamese IME input (#1032) * Fix Firefox RDP clipboard paste (#1033) * Fix Proxmox discovery over HTTPS (#1041) * Fix external editor actions in file preview (#1042) * Allow pinned hosts with name sorting (#1043) * Fix Firefox desktop OIDC callback (#1044) * feat(session): add recording and replay (#1049) * Fix status checks through jump hosts (#1045) * Add terminal font size shortcuts (#1047) * feat: add Open File Manager to tab right-click menu (#1051) Co-authored-by: SankeerthNara <sankeerthnara@gmail.com> * perf: frontend request cache, poll pause, and code-split shell (#1052) Host/status caching, shell code-split, SSH pool waits, host-metrics concurrency, background-tab idle, per-host status subscriptions, homepage poll quieting, and virtualized host sidebar + file manager lists. * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * Merge commit from fork * feat: save quick connect sessions as hosts (#1055) * fix: restore sudo password autofill settings (#1056) * fix: preserve file editor position on save (#1057) * fix: sync cloud preference storage mode (#1058) * fix: render RDP sessions at native pixel density (#1059) * fix: restore database import in embedded desktop mode (#1060) * Update Auto-complete.tsx (#1061) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * chore: donation bar reporting wrong result * feat: add Open File Manager to tab right-click menu (#1046) * Revert "feat: add Open File Manager to tab right-click menu (#1046)" (#1050) This reverts commit 0712fdd731. * Remove donation badge from README Removed donation badge from README. * Delete .github/workflows/donation-goal.yml * Update Auto-complete.tsx --------- Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> * feat(auth): opt-in OIDC DEK unlock for API-key requests (ALLOW_APIKEY_DATA_UNLOCK) (#1064) * chore: fix release workflow to merge docs branch * fix: svg donation generator push fail * fix: svg donation generator push fail * Update termix.rb * fix: svg donation generator push fail * chore: move donation badge to badges branch to avoid ruleset conflicts * chore: remove unneeded token from donation badge workflow * chore: debug donation badge commit step * fix: escape < character in donation SVG * fix: point donation badge to badges branch * chore: remove unused donation badge svg from main * Add Rack Genius logo to README Added Rack Genius logo to the README. * chore: improve donation goal svg generator to include stablecoins * chore: donation goal generator syntax error * chore: donation goal generator incorrect docs url usage * chore: donation bar reporting wrong result * feat: add Open File Manager to tab right-click menu (#1046) * Revert "feat: add Open File Manager to tab right-click menu (#1046)" (#1050) This reverts commit 0712fdd731. * Remove donation badge from README Removed donation badge from README. * Delete .github/workflows/donation-goal.yml * feat(auth): opt-in OIDC DEK unlock for API-key requests API keys authenticate but cannot touch the encrypted credential/host store ('User data not unlocked') unless the user has a live interactive session, making them unusable for headless automation. For OIDC users the DEK is server-derivable (deriveOIDCSystemKey), so handleApiKeyAuth can unlock it without a password. Gated behind ALLOW_APIKEY_DATA_UNLOCK (default off) because enabling it widens the blast radius of a leaked API key. OIDC-only; password users are untouched. Refs #1063 --------- Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: Sankeerth Nara <sankeerthnara@gmail.com> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> * chore: package lock sync * Add Proxmox guest auto sync (#1053) * draft: database layer refactor (#1054) * 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: start database layer refactor * docs: plan database layer refactor * docs: audit database layer refactor phase zero * chore: add database runtime adapter skeleton * chore: add settings repository skeleton * chore: add user session repository skeleton * chore: add host credential repository skeleton * chore: add field encryption boundary * chore: migrate settings route slice * chore: migrate user settings routes * chore: migrate host metrics settings routes * chore: migrate acme settings route * chore: migrate terminal settings route * chore: migrate tailscale settings read * chore: migrate guacamole settings reads * chore: migrate session timeout settings reads * chore: migrate auth route settings reads * chore: migrate host metrics settings reads * chore: migrate startup settings reads * chore: migrate user settings cleanup * chore: migrate password reset settings * chore: migrate oidc legacy settings read * chore: migrate user route settings slice * chore: migrate oidc state settings * chore: migrate user login settings reads * chore: migrate user crypto settings * chore: consolidate startup settings defaults * chore: consolidate database settings import export * chore: migrate core session auth paths * chore: migrate remaining session auth paths * chore: migrate admin user routes * chore: migrate user route admin checks * chore: migrate user lifecycle routes * chore: migrate auth user lookups * chore: migrate oidc user routes * chore: migrate api key repository paths * docs: add database gray rollout guide * chore: migrate trusted device paths * chore: migrate user session route user lookups * chore: add database repository rollout guard * chore: expose repository rollout status * chore: warn on repository rollout misconfiguration * chore: migrate remaining user lookup helpers * chore: migrate ssh user lookups * chore: migrate user settings admin lookups * chore: migrate acme ssl user lookups * chore: migrate audit log admin checks * chore: migrate oidc account user updates * chore: migrate password reset user updates * chore: migrate user deletion core records * chore: migrate snippet audit user lookups * chore: migrate ldap user sync paths * chore: migrate totp user updates * chore: migrate rbac user checks * chore: migrate rbac role paths * chore: migrate permission role lookups * chore: migrate rbac access list reads * chore: migrate shared rbac reads * chore: migrate rbac access writes * chore: migrate permission host access * chore: migrate role host access lookup * chore: migrate snippet access lookup * chore: migrate shared credential access lookups * chore: migrate host access cleanup writes * chore: migrate host list access checks * chore: migrate host access cleanup routes * chore: migrate shared credential role lookups * chore: migrate user role cleanup * chore: migrate admin role sync * chore: migrate ldap role sync * chore: migrate user role assignment * chore: migrate sso provider access * chore: migrate audit log access * chore: migrate user preference access * chore: migrate open tab access * chore: migrate dismissed alert access * chore: migrate homepage layout access * chore: migrate network topology access * chore: migrate dashboard service link access * chore: migrate command history access * chore: migrate recent activity cleanup * chore: migrate ssh credential usage access * chore: migrate transfer recent access * chore: migrate file manager bookmark access * chore: migrate c2s tunnel preset access * chore: migrate homepage item access * chore: migrate session recording access * chore: migrate tmux session tag access * chore: migrate opkssh token access * chore: migrate vault token access * chore: migrate vault profile access * chore: migrate host metrics preference access * chore: migrate host health access * chore: migrate host metrics history access * chore: migrate alert persistence access * chore: route alert host lookup through repository * chore: migrate user data export reads * chore: route host metrics stats sync through repository * chore: migrate host folder persistence * chore: migrate host resolution reads * chore: route jump host resolution reads * chore: route docker console jump host reads * chore: route docker ssh resolution reads * chore: route proxmox discovery resolution reads * chore: route file manager activity host reads * chore: route host metrics resolution reads * chore: route ssh auth credential reads * chore: route tunnel endpoint credential reads * chore: route credential deployment resolution reads * chore: route command history host flag reads * chore: route snippet execution resolution reads * chore: route terminal host resolution reads * chore: route vault oidc host resolution reads * chore: route wake on lan host reads * chore: route internal host list reads * chore: route host key verification persistence * chore: route credential read paths * chore: route credential host usage reads * chore: route credential folder rename * chore: route host owner access checks * chore: route shared credential source reads * chore: route user host credential cleanup * chore: route credential delete reads * chore: route credential update reads * chore: route host credential reads * chore: route host read paths * chore: route host projection reads * chore: route host list reads * chore: route snippet read paths * chore: route snippet folder writes * chore: route snippet crud paths * chore: route snippet bulk import * chore: route rbac ownership reads * chore: route user count reads * chore: route cleanup snippets folders * chore: route shared credential persistence * chore: route dashboard activity * chore: route guacamole host reads * chore: route host bulk lookups * chore: remove unlock-only simple db ops * chore: route host autostart persistence * chore: route ldap provisioning through users * chore: route credential encrypted writes * chore: route host encrypted writes * chore: route bulk host encrypted writes * chore: route termix id credentials * chore: route termix id ca persistence * chore: route termix identity persistence * chore: route credential system migration * chore: isolate user encryption migration storage * chore: remove legacy simple db ops * chore: isolate legacy sqlite migration copy * chore: route database settings import export * chore: route database host credential export * chore: route database host credential import * chore: route database file-manager import export * chore: route database alert usage import export * chore: route database user checks * chore: isolate auth lazy migration storage * chore: route explicit database saves * chore: initialize database save boundary * chore: route migration snapshot saves * chore: isolate sqlite import constraints * chore: route import sqlite boundary * chore: route user encryption migration store * chore: centralize current repository runtime * chore: route more current repositories * chore: route activity repository runtimes * chore: route token repository runtimes * chore: route health repository runtimes * chore: route identity repository runtimes * chore: route rbac repository runtime * chore: centralize current sqlite runtime access * chore: route user deletion key cleanup * chore: route user deletion vault cleanup * chore: route user deletion homepage cleanup * chore: route user deletion health cleanup * chore: route user deletion alert cleanup * chore: route user deletion identity cleanup * chore: add database layer preupgrade backup * Fix database repository type errors * fix: complete post-merge compile fixes for database refactor Restore missing DatabaseSaveTrigger/getDb imports, session log format fallback, OIDC provider resolution, guacamole recording insert, and passwordFallbackOnly typing after merging current dev. --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: DivByZero <mr.oplus@yahoo.fr> Co-authored-by: LukeGus <bugattiguy527@gmail.com> 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> * refactor(db): collapse repository rollout scaffolding into single factory Repositories are now the only data path. Replaces the 41 current-*-repository wrapper files, the DATABASE_LAYER_REPOSITORY_ROLLOUT flag/alias map and the unused database/runtime adapter with repositories/factory.ts, a plain DatabaseContext type and an in-memory TestSqliteDatabase test harness. * refactor(db): route remaining raw DB access through repositories proxmox, session-log, oidc-utils, webauthn and guacamole recording now use repositories (new WebauthnCredentialRepository; SsoProviderRepository listEnabled; HostRepository findDecryptedByIdAs/listProxmoxEnabled). Remaining raw access: db boot code, simple-db-ops and docker.ts, which are removed/restructured in later phases. * feat(crypto): add UserKeyManager with system-wrapped per-user DEKs New utils/user-keys.ts: one random 32-byte DEK per user, wrapped AES-256-GCM under an HKDF key derived from the system ENCRYPTION_KEY (per-user info string + AAD binding, versioned v3 wrap format stored in settings). Synchronous unwrap-on-demand with a 15-minute cache so the existing DataCrypto facade keeps its sync call sites. Not wired up yet. * feat(crypto): boot-time DEK migration to system-wrapped v3 format utils/crypto-migration/dek-migration.ts carries the legacy unwrap paths (PBKDF2 password KEK, OIDC/WebAuthn system keys, hardcoded-default fallback) and migrates every server-unwrappable DEK to the v3 wrap at startup. Password-wrapped DEKs migrate at next login or from a live session via adoptRecoveredDEK. Legacy rows are kept for now; cleanup flips on once the new path is authoritative. * refactor(crypto): make system-wrapped DEKs the authoritative key path DataCrypto and AuthManager now read keys through UserKeyManager: DEKs are always unwrappable server-side, so the in-memory unlock session, DEK-in-JWT wrapping, session-expiry data locks and ALLOW_APIKEY_DATA_UNLOCK are gone. utils/user-crypto.ts is deleted; boot migration now cleans legacy wraps. A one-release shim adopts DEKs from legacy dataKeyWrap tokens so active password users migrate without re-login. Password login migrates legacy password-wrapped DEKs via migratePasswordUserAtLogin. * refactor(crypto): remove pending share queue and credential sharing key With server-unwrappable DEKs both sides of a share are always available, so the needsReEncryption queue, CREDENTIAL_SHARING_KEY and the system_* shadow columns on ssh_credentials are gone. A one-time boot cleanup re-creates legacy pending share copies where possible (dropping unresolvable ones with a warning) and drops the legacy columns. * feat(auth): non-destructive password resets and admin reset endpoint Password resets no longer destroy user data: the DEK is system-wrapped, so forgot-password and admin resets are just a hash update plus session revoke. The wipe branch survives only for accounts that never logged in since the encryption upgrade and now requires explicit confirmDataWipe (surfaced as a 409 DATA_WIPE_REQUIRED; the reset UI asks for confirmation). Adds POST /users/admin/reset-password and removes the dead re-encryption paths. * refactor(ssh): consolidate four jump-host chain copies into one module terminal, host-metrics and docker now use ssh/jump-host-chain.ts (already shared by file-manager, tmux-monitor and docker-console); docker's inline copy also drops its raw SimpleDBOps host/credential lookups in favor of repositories. * refactor(ssh): single shared createConnectionLog helper file-manager-log.ts becomes ssh/connection-log.ts; the copies in docker.ts and host-metrics-helpers.ts are gone. * refactor(ssh): split docker module into layered directory ssh/docker/{index,routes,session-manager,container-routes,console}.ts: server boot and wiring in index, HTTP handlers in routes, SSH session registry and command execution in session-manager. Code motion only; port 30007/30009 and endpoints unchanged. Swagger now scans ssh subdirectories. * refactor(ssh): split tunnel module into layered directory ssh/tunnel/{index,routes,manager}.ts: server boot in index, HTTP handlers in routes, tunnel state and engine (connect/retry/autostart) in manager. Code motion only; port 30003 and endpoints unchanged. * refactor(backend): reorganize top-level layout - ssh/ renamed to hosts/ (it covers SSH, RDP, VNC, Telnet, Docker, metrics) - serial/serial.ts and guacamole/ moved inside hosts/ - dashboard.ts and homepage.ts moved to services/ - swagger.ts moved to utils/ with adjusted scan globs Import paths and the generate:openapi script updated; ports and endpoints unchanged. * refactor(tests): move backend tests into src/backend/tests mirror tree Backend *.test.ts files (and the test-support harness) no longer sit next to source files; they live under src/backend/tests/ mirroring the source layout. Imports rewritten accordingly; CLAUDE.md convention updated. * refactor(hosts): group host modules into per-feature directories file-manager/, metrics/ (incl. widgets, managers, alert-engine), terminal/, tmux/ and tunnel/ each own their files; docker/ gains container-runtime. Genuinely shared helpers (jump-host chain, host resolver, connection pool, opkssh, vault, serial) stay at hosts/ root. Pure file moves with import path updates; mirrored test paths follow. * refactor(backend): final cleanup pass - re-register WebAuthn passkey routes (registration was dropped in the #1054 merge, breaking passkey login) and document all six endpoints - delete utils/simple-db-ops.ts (last caller migrated to DataCrypto) - starter: use the typed serverReady export, collapse the four-way version lookup to env then package.json candidates - add OpenAPI JSDoc to c2s-tunnel-presets endpoints - strip block-divider comment banners * feat: remove legacy "data_unlocked" field * feat: refactor rbac/sharing to support new permissions and auth types * feat: refactor rbac/sharing to support new permissions and auth types * feat: add "id" to user profile hide list * chore: root cleanup * feat: add more donation references and a 30-day donation reminder * chore: update readme * feat: automate beta tests * feat: add links to milestones * fix: hoist github/google SSO defaults to module scope (#1065) * fix(ssh-tools): allow clipboard paste in key recording field (#1066) The broadcast key-recording input was marked readOnly, which makes browsers block paste entirely (no context-menu Paste, Ctrl+V does nothing). handleKeyDown also called preventDefault() unconditionally, swallowing the Ctrl+V shortcut before a paste event could even fire. Let Ctrl/Cmd+V pass through in handleKeyDown, drop readOnly, and add an onPaste handler that reads the clipboard text and broadcasts it to the selected terminals like any other captured keystroke. Signed-off-by: emreumar <emreumar@users.noreply.github.com> Co-authored-by: emreumar <emreumar@users.noreply.github.com> * chore: write release notes * chore: update release notes * chore: update readmes * chore: add crypto only reminder in en.json * fix: macOS and cask errors on release workflow * chore: sync Crowdin translations for 2.5.1 --------- Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: emreumar <emreumar@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> Co-authored-by: Russell Poovey <09.our_seekers@icloud.com> Co-authored-by: russell <git@0896c69e.com> Co-authored-by: Subedi Bibek <77529535+questbibek@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Alexander Elsner <101340634+Bensonheimer992@users.noreply.github.com> Co-authored-by: SankeerthNara <sankeerthnara@gmail.com> Co-authored-by: Stephan Groth <96803994+Kalvalax@users.noreply.github.com> Co-authored-by: DivByZero <mr.oplus@yahoo.fr> 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: lhojun <ldgs3324@gmail.com> Co-authored-by: Yunus Emre Umar <77045015+emre155@users.noreply.github.com> Co-authored-by: emreumar <emreumar@users.noreply.github.com>
2026-08-29 18:31:33 +00:00 · 2026-07-19 12:29:52 -05:00
parent fba645e92e
commit ddbdd5c437
562 changed files with 52303 additions and 23645 deletions
@@ -335,7 +335,10 @@ function DockerManagerInner({
    };

    pollContainers();
-    const interval = setInterval(pollContainers, 5000);
+    const interval = setInterval(() => {
+      if (document.visibilityState === "hidden") return;
+      void pollContainers();
+    }, 5000);

    return () => {
      cancelled = true;
@@ -50,7 +50,10 @@ export function ContainerStats({

  React.useEffect(() => {
    fetchStats();
-    const interval = setInterval(fetchStats, 2000);
+    const interval = setInterval(() => {
+      if (document.visibilityState === "hidden") return;
+      void fetchStats();
+    }, 2000);
    return () => clearInterval(interval);
  }, [fetchStats]);

@@ -90,7 +90,10 @@ export function LogViewer({

  React.useEffect(() => {
    if (!autoRefresh) return;
-    const interval = setInterval(fetchLogs, 3000);
+    const interval = setInterval(() => {
+      if (document.visibilityState === "hidden") return;
+      void fetchLogs();
+    }, 3000);
    return () => clearInterval(interval);
  }, [autoRefresh, fetchLogs]);

@@ -87,6 +87,7 @@ function FileManagerContent({
  initialPath,
  onClose,
  onOpenTerminalTab,
+  isVisible = true,
 }: FileManagerProps) {
  const { openWindow } = useWindowManager();
  const { t } = useTranslation();
@@ -268,7 +269,7 @@ function FileManagerContent({
  }, [currentHost]);

  useEffect(() => {
-    if (sshSessionId) {
+    if (sshSessionId && isVisible) {
      startKeepalive();
    } else {
      stopKeepalive();
@@ -277,7 +278,7 @@ function FileManagerContent({
    return () => {
      stopKeepalive();
    };
-  }, [sshSessionId, startKeepalive, stopKeepalive]);
+  }, [sshSessionId, isVisible, startKeepalive, stopKeepalive]);

  const initialFileOpenedRef = useRef(false);
  useEffect(() => {
@@ -3105,6 +3106,7 @@ function FileManagerInner({
  initialPath,
  onClose,
  onOpenTerminalTab,
+  isVisible = true,
 }: FileManagerProps) {
  return (
    <WindowManager>
@@ -3114,6 +3116,7 @@ function FileManagerInner({
        initialPath={initialPath}
        onClose={onClose}
        onOpenTerminalTab={onOpenTerminalTab}
+        isVisible={isVisible}
      />
    </WindowManager>
  );
@@ -1,6 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useLayoutEffect,
+} from "react";
 import { createPortal } from "react-dom";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { cn } from "@/lib/utils.ts";
 import {
  Folder,
@@ -185,6 +193,12 @@ export function FileManagerGrid({
  const { t } = useTranslation();
  const gridRef = useRef<HTMLDivElement>(null);
  const [editingName, setEditingName] = useState("");
+  const [gridCols, setGridCols] = useState(4);
+
+  const LIST_ROW_H = 41;
+  const GRID_ROW_H = 112;
+  const LIST_HEADER_H = 33;
+  const CONTENT_PAD = 16;

  const [dragState, setDragState] = useState<DragState>({
    type: "none",
@@ -192,6 +206,52 @@ export function FileManagerGrid({
    counter: 0,
  });

+  // Responsive column count for grid virtualization (matches Tailwind breakpoints roughly).
+  useEffect(() => {
+    if (viewMode !== "grid") return;
+    const el = gridRef.current;
+    if (!el) return;
+
+    const updateCols = () => {
+      const w = el.clientWidth - CONTENT_PAD * 2;
+      // gap-4 (16px) + ~min cell 96px
+      const n = Math.max(2, Math.min(8, Math.floor((w + 16) / 112)));
+      setGridCols(n);
+    };
+    updateCols();
+    const ro = new ResizeObserver(updateCols);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [viewMode]);
+
+  const gridRowCount = useMemo(
+    () => (viewMode === "grid" ? Math.ceil(files.length / gridCols) : 0),
+    [viewMode, files.length, gridCols],
+  );
+
+  const listVirtualizer = useVirtualizer({
+    count: viewMode === "list" ? files.length : 0,
+    getScrollElement: () => gridRef.current,
+    estimateSize: () => LIST_ROW_H,
+    overscan: 16,
+    getItemKey: (index) => files[index]?.path ?? index,
+    enabled: viewMode === "list" && files.length > 0,
+  });
+
+  const gridVirtualizer = useVirtualizer({
+    count: gridRowCount,
+    getScrollElement: () => gridRef.current,
+    estimateSize: () => GRID_ROW_H,
+    overscan: 6,
+    getItemKey: (index) => `row-${index}`,
+    enabled: viewMode === "grid" && files.length > 0,
+  });
+
+  useLayoutEffect(() => {
+    if (viewMode === "list") listVirtualizer.measure();
+    else gridVirtualizer.measure();
+  }, [viewMode, files.length, editingFile?.path, createIntent, gridCols]);
+
  useEffect(() => {
    const handleGlobalMouseMove = (e: MouseEvent) => {
      if (dragState.type === "internal" && dragState.files.length > 0) {
@@ -442,6 +502,77 @@ export function FileManagerGrid({
        setSelectionRect({ x, y, width, height });

        if (gridRef.current) {
+          const selectionBox = {
+            left: x,
+            top: y,
+            right: x + width,
+            bottom: y + height,
+          };
+
+          // Virtual list: only visible DOM nodes exist. For list mode compute
+          // selection from scroll position + fixed row height so drag-select
+          // still covers off-screen rows.
+          if (viewMode === "list" && files.length > 0) {
+            const scrollTop = gridRef.current.scrollTop;
+            const createExtra = createIntent ? LIST_ROW_H : 0;
+            const contentTop =
+              selectionBox.top +
+              scrollTop -
+              CONTENT_PAD -
+              LIST_HEADER_H -
+              createExtra;
+            const contentBottom =
+              selectionBox.bottom +
+              scrollTop -
+              CONTENT_PAD -
+              LIST_HEADER_H -
+              createExtra;
+            const startIdx = Math.max(0, Math.floor(contentTop / LIST_ROW_H));
+            const endIdx = Math.min(
+              files.length - 1,
+              Math.ceil(contentBottom / LIST_ROW_H),
+            );
+            if (endIdx >= startIdx) {
+              onSelectionChange(files.slice(startIdx, endIdx + 1));
+            } else {
+              onSelectionChange([]);
+            }
+            return;
+          }
+
+          if (viewMode === "grid" && files.length > 0) {
+            const scrollTop = gridRef.current.scrollTop;
+            const createExtra = createIntent ? GRID_ROW_H : 0;
+            const contentTop =
+              selectionBox.top + scrollTop - CONTENT_PAD - createExtra;
+            const contentBottom =
+              selectionBox.bottom + scrollTop - CONTENT_PAD - createExtra;
+            const startRow = Math.max(0, Math.floor(contentTop / GRID_ROW_H));
+            const endRow = Math.min(
+              gridRowCount - 1,
+              Math.ceil(contentBottom / GRID_ROW_H),
+            );
+            // Column range from X within padded content.
+            const contentLeft = selectionBox.left - CONTENT_PAD;
+            const contentRight = selectionBox.right - CONTENT_PAD;
+            const cellW =
+              (gridRef.current.clientWidth - CONTENT_PAD * 2 + 16) / gridCols;
+            const startCol = Math.max(0, Math.floor(contentLeft / cellW));
+            const endCol = Math.min(
+              gridCols - 1,
+              Math.ceil(contentRight / cellW),
+            );
+            const selected: FileItem[] = [];
+            for (let r = startRow; r <= endRow; r++) {
+              for (let c = startCol; c <= endCol; c++) {
+                const idx = r * gridCols + c;
+                if (idx >= 0 && idx < files.length) selected.push(files[idx]);
+              }
+            }
+            onSelectionChange(selected);
+            return;
+          }
+
          const fileElements =
            gridRef.current.querySelectorAll("[data-file-path]");
          const selectedPaths: string[] = [];
@@ -457,13 +588,6 @@ export function FileManagerGrid({
              bottom: elementRect.bottom - containerRect.top,
            };

-            const selectionBox = {
-              left: x,
-              top: y,
-              right: x + width,
-              bottom: y + height,
-            };
-
            const intersects = !(
              relativeElementRect.right < selectionBox.left ||
              relativeElementRect.left > selectionBox.right ||
@@ -486,7 +610,16 @@ export function FileManagerGrid({
        }
      }
    },
-    [isSelecting, selectionStart, files, onSelectionChange],
+    [
+      isSelecting,
+      selectionStart,
+      files,
+      onSelectionChange,
+      viewMode,
+      createIntent,
+      gridCols,
+      gridRowCount,
+    ],
  );

  const handleMouseUp = useCallback(
@@ -819,89 +952,126 @@ export function FileManagerGrid({
              </span>
            </div>
          ) : viewMode === "grid" ? (
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
+            <div className="flex flex-col gap-4">
              {createIntent && (
-                <CreateIntentGridItem
-                  intent={createIntent}
-                  onConfirm={onConfirmCreate}
-                  onCancel={onCancelCreate}
-                />
+                <div
+                  className="grid gap-4"
+                  style={{
+                    gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
+                  }}
+                >
+                  <CreateIntentGridItem
+                    intent={createIntent}
+                    onConfirm={onConfirmCreate}
+                    onCancel={onCancelCreate}
+                  />
+                </div>
              )}
-              {files.map((file) => {
-                const isSelected = selectedFiles.some(
-                  (f) => f.path === file.path,
-                );
-
-                return (
-                  <div
-                    key={file.path}
-                    data-file-path={file.path}
-                    draggable={true}
-                    className={cn(
-                      "group flex flex-col items-center p-3 rounded-none border-2 border-transparent transition-all cursor-pointer hover:bg-muted/50 select-none",
-                      isSelected && "bg-accent-brand/10 border-accent-brand/40",
-                      dragState.target?.path === file.path &&
-                        "bg-accent-brand/20 border-accent-brand border-dashed",
-                      dragState.files.some((f) => f.path === file.path) &&
-                        "opacity-50",
-                    )}
-                    title={file.name}
-                    onClick={(e) => handleFileClick(file, e)}
-                    onContextMenu={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onContextMenu?.(e, file);
-                    }}
-                    onDragStart={(e) => handleFileDragStart(e, file)}
-                    onDragOver={(e) => handleFileDragOver(e, file)}
-                    onDragLeave={(e) => handleFileDragLeave(e, file)}
-                    onDrop={(e) => handleFileDrop(e, file)}
-                    onDragEnd={handleFileDragEnd}
-                  >
-                    <div className="relative mb-2 pointer-events-none">
-                      {getFileIcon(file, viewMode)}
+              <div
+                className="relative w-full"
+                style={{ height: gridVirtualizer.getTotalSize() }}
+              >
+                {gridVirtualizer.getVirtualItems().map((vRow) => {
+                  const start = vRow.index * gridCols;
+                  const rowFiles = files.slice(start, start + gridCols);
+                  return (
+                    <div
+                      key={vRow.key}
+                      data-index={vRow.index}
+                      ref={gridVirtualizer.measureElement}
+                      className="absolute top-0 left-0 w-full"
+                      style={{
+                        transform: `translateY(${vRow.start}px)`,
+                      }}
+                    >
+                      <div
+                        className="grid gap-4 pb-4"
+                        style={{
+                          gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
+                        }}
+                      >
+                        {rowFiles.map((file) => {
+                          const isSelected = selectedFiles.some(
+                            (f) => f.path === file.path,
+                          );
+                          return (
+                            <div
+                              key={file.path}
+                              data-file-path={file.path}
+                              draggable={true}
+                              className={cn(
+                                "group flex flex-col items-center p-3 rounded-none border-2 border-transparent transition-all cursor-pointer hover:bg-muted/50 select-none",
+                                isSelected &&
+                                  "bg-accent-brand/10 border-accent-brand/40",
+                                dragState.target?.path === file.path &&
+                                  "bg-accent-brand/20 border-accent-brand border-dashed",
+                                dragState.files.some(
+                                  (f) => f.path === file.path,
+                                ) && "opacity-50",
+                              )}
+                              title={file.name}
+                              onClick={(e) => handleFileClick(file, e)}
+                              onContextMenu={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onContextMenu?.(e, file);
+                              }}
+                              onDragStart={(e) => handleFileDragStart(e, file)}
+                              onDragOver={(e) => handleFileDragOver(e, file)}
+                              onDragLeave={(e) => handleFileDragLeave(e, file)}
+                              onDrop={(e) => handleFileDrop(e, file)}
+                              onDragEnd={handleFileDragEnd}
+                            >
+                              <div className="relative mb-2 pointer-events-none">
+                                {getFileIcon(file, viewMode)}
+                              </div>
+                              <div className="w-full flex flex-col items-center pointer-events-none">
+                                {editingFile?.path === file.path ? (
+                                  <input
+                                    ref={editInputRef}
+                                    type="text"
+                                    value={editingName}
+                                    onChange={(e) =>
+                                      setEditingName(e.target.value)
+                                    }
+                                    onKeyDown={handleEditKeyDown}
+                                    onBlur={handleEditConfirm}
+                                    className="max-w-[120px] min-w-[60px] w-fit border border-accent-brand/60 bg-card px-2 py-1 text-xs rounded-none outline-none focus:ring-1 focus:ring-accent-brand/50 text-center pointer-events-auto"
+                                    onClick={(e) => e.stopPropagation()}
+                                    onMouseDown={(e) => e.stopPropagation()}
+                                  />
+                                ) : (
+                                  <p
+                                    className="text-[11px] font-bold tracking-tight text-center truncate w-full px-1"
+                                    title={file.name}
+                                  >
+                                    {file.name}
+                                  </p>
+                                )}
+                                {file.type === "file" &&
+                                  file.size !== undefined &&
+                                  file.size !== null && (
+                                    <p className="text-[10px] font-medium text-muted-foreground/60 mt-0.5">
+                                      {formatFileSize(file.size)}
+                                    </p>
+                                  )}
+                                {file.type === "link" && file.linkTarget && (
+                                  <p
+                                    className="text-[10px] text-accent-brand mt-0.5 truncate w-full text-center"
+                                    title={file.linkTarget}
+                                  >
+                                    → {file.linkTarget}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
                    </div>
-
-                    <div className="w-full flex flex-col items-center pointer-events-none">
-                      {editingFile?.path === file.path ? (
-                        <input
-                          ref={editInputRef}
-                          type="text"
-                          value={editingName}
-                          onChange={(e) => setEditingName(e.target.value)}
-                          onKeyDown={handleEditKeyDown}
-                          onBlur={handleEditConfirm}
-                          className="max-w-[120px] min-w-[60px] w-fit border border-accent-brand/60 bg-card px-2 py-1 text-xs rounded-none outline-none focus:ring-1 focus:ring-accent-brand/50 text-center pointer-events-auto"
-                          onClick={(e) => e.stopPropagation()}
-                          onMouseDown={(e) => e.stopPropagation()}
-                        />
-                      ) : (
-                        <p
-                          className="text-[11px] font-bold tracking-tight text-center truncate w-full px-1"
-                          title={file.name}
-                        >
-                          {file.name}
-                        </p>
-                      )}
-                      {file.type === "file" &&
-                        file.size !== undefined &&
-                        file.size !== null && (
-                          <p className="text-[10px] font-medium text-muted-foreground/60 mt-0.5">
-                            {formatFileSize(file.size)}
-                          </p>
-                        )}
-                      {file.type === "link" && file.linkTarget && (
-                        <p
-                          className="text-[10px] text-accent-brand mt-0.5 truncate w-full text-center"
-                          title={file.linkTarget}
-                        >
-                          → {file.linkTarget}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
            </div>
          ) : (
            <div className="flex flex-col">
@@ -952,91 +1122,106 @@ export function FileManagerGrid({
                  onCancel={onCancelCreate}
                />
              )}
-              {files.map((file) => {
-                const isSelected = selectedFiles.some(
-                  (f) => f.path === file.path,
-                );
-
-                return (
-                  <div
-                    key={file.path}
-                    data-file-path={file.path}
-                    draggable={true}
-                    className={cn(
-                      "grid grid-cols-[1fr_120px_150px_80px_90px] gap-2 px-4 py-2 items-center text-xs cursor-pointer border-b border-border hover:bg-muted/50 last:border-0 rounded-none select-none transition-colors",
-                      isSelected && "bg-accent-brand/10",
-                      dragState.target?.path === file.path &&
-                        "bg-accent-brand/20 border-accent-brand border-dashed",
-                      dragState.files.some((f) => f.path === file.path) &&
-                        "opacity-50",
-                    )}
-                    onClick={(e) => handleFileClick(file, e)}
-                    onContextMenu={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onContextMenu?.(e, file);
-                    }}
-                    onDragStart={(e) => handleFileDragStart(e, file)}
-                    onDragOver={(e) => handleFileDragOver(e, file)}
-                    onDragLeave={(e) => handleFileDragLeave(e, file)}
-                    onDrop={(e) => handleFileDrop(e, file)}
-                    onDragEnd={handleFileDragEnd}
-                  >
-                    <div className="flex items-center gap-3 overflow-hidden pointer-events-none">
-                      <div className="shrink-0">
-                        {getFileIcon(file, viewMode)}
-                      </div>
-                      {editingFile?.path === file.path ? (
-                        <input
-                          ref={editInputRef}
-                          type="text"
-                          value={editingName}
-                          onChange={(e) => setEditingName(e.target.value)}
-                          onKeyDown={handleEditKeyDown}
-                          onBlur={handleEditConfirm}
-                          className="flex-1 min-w-0 max-w-[200px] border border-accent-brand/60 bg-card px-2 py-1 text-xs rounded-none outline-none focus:ring-1 focus:ring-accent-brand/50 pointer-events-auto"
-                          onClick={(e) => e.stopPropagation()}
-                          onMouseDown={(e) => e.stopPropagation()}
-                        />
-                      ) : (
-                        <span
-                          className="font-bold truncate tracking-tight"
-                          title={file.name}
-                        >
-                          {file.name}
-                          {file.type === "link" && file.linkTarget && (
-                            <span className="text-accent-brand ml-1 normal-case font-normal">
-                              → {file.linkTarget}
+              <div
+                className="relative w-full"
+                style={{ height: listVirtualizer.getTotalSize() }}
+              >
+                {listVirtualizer.getVirtualItems().map((vItem) => {
+                  const file = files[vItem.index];
+                  if (!file) return null;
+                  const isSelected = selectedFiles.some(
+                    (f) => f.path === file.path,
+                  );
+                  return (
+                    <div
+                      key={vItem.key}
+                      data-index={vItem.index}
+                      ref={listVirtualizer.measureElement}
+                      className="absolute top-0 left-0 w-full"
+                      style={{
+                        transform: `translateY(${vItem.start}px)`,
+                      }}
+                    >
+                      <div
+                        data-file-path={file.path}
+                        draggable={true}
+                        className={cn(
+                          "grid grid-cols-[1fr_120px_150px_80px_90px] gap-2 px-4 py-2 items-center text-xs cursor-pointer border-b border-border hover:bg-muted/50 rounded-none select-none transition-colors",
+                          isSelected && "bg-accent-brand/10",
+                          dragState.target?.path === file.path &&
+                            "bg-accent-brand/20 border-accent-brand border-dashed",
+                          dragState.files.some((f) => f.path === file.path) &&
+                            "opacity-50",
+                        )}
+                        onClick={(e) => handleFileClick(file, e)}
+                        onContextMenu={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          onContextMenu?.(e, file);
+                        }}
+                        onDragStart={(e) => handleFileDragStart(e, file)}
+                        onDragOver={(e) => handleFileDragOver(e, file)}
+                        onDragLeave={(e) => handleFileDragLeave(e, file)}
+                        onDrop={(e) => handleFileDrop(e, file)}
+                        onDragEnd={handleFileDragEnd}
+                      >
+                        <div className="flex items-center gap-3 overflow-hidden pointer-events-none">
+                          <div className="shrink-0">
+                            {getFileIcon(file, viewMode)}
+                          </div>
+                          {editingFile?.path === file.path ? (
+                            <input
+                              ref={editInputRef}
+                              type="text"
+                              value={editingName}
+                              onChange={(e) => setEditingName(e.target.value)}
+                              onKeyDown={handleEditKeyDown}
+                              onBlur={handleEditConfirm}
+                              className="flex-1 min-w-0 max-w-[200px] border border-accent-brand/60 bg-card px-2 py-1 text-xs rounded-none outline-none focus:ring-1 focus:ring-accent-brand/50 pointer-events-auto"
+                              onClick={(e) => e.stopPropagation()}
+                              onMouseDown={(e) => e.stopPropagation()}
+                            />
+                          ) : (
+                            <span
+                              className="font-bold truncate tracking-tight"
+                              title={file.name}
+                            >
+                              {file.name}
+                              {file.type === "link" && file.linkTarget && (
+                                <span className="text-accent-brand ml-1 normal-case font-normal">
+                                  → {file.linkTarget}
+                                </span>
+                              )}
                            </span>
                          )}
+                        </div>
+
+                        <span className="text-[10px] text-muted-foreground pointer-events-none">
+                          {file.modified || "—"}
                        </span>
-                      )}
+
+                        <span className="text-[10px] text-muted-foreground truncate hidden md:block pointer-events-none">
+                          {file.owner
+                            ? `${file.owner}${file.group ? `:${file.group}` : ""}`
+                            : "—"}
+                        </span>
+
+                        <span className="text-[10px] text-right text-muted-foreground tabular-nums pointer-events-none">
+                          {file.type === "file" &&
+                          file.size !== undefined &&
+                          file.size !== null
+                            ? formatFileSize(file.size)
+                            : "—"}
+                        </span>
+
+                        <span className="text-[10px] text-right font-mono text-muted-foreground/60 pointer-events-none">
+                          {file.permissions || "—"}
+                        </span>
+                      </div>
                    </div>
-
-                    <span className="text-[10px] text-muted-foreground pointer-events-none">
-                      {file.modified || "—"}
-                    </span>
-
-                    <span className="text-[10px] text-muted-foreground truncate hidden md:block pointer-events-none">
-                      {file.owner
-                        ? `${file.owner}${file.group ? `:${file.group}` : ""}`
-                        : "—"}
-                    </span>
-
-                    <span className="text-[10px] text-right text-muted-foreground tabular-nums pointer-events-none">
-                      {file.type === "file" &&
-                      file.size !== undefined &&
-                      file.size !== null
-                        ? formatFileSize(file.size)
-                        : "—"}
-                    </span>
-
-                    <span className="text-[10px] text-right font-mono text-muted-foreground/60 pointer-events-none">
-                      {file.permissions || "—"}
-                    </span>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
            </div>
          )}

@@ -71,9 +71,34 @@ export function TransferMonitor() {
      }
    };

+    let intervalId: ReturnType<typeof setInterval> | null = null;
+
+    const start = () => {
+      if (intervalId !== null) return;
+      intervalId = setInterval(reconcileTransfers, POLL_INTERVAL_MS);
+    };
+    const stop = () => {
+      if (intervalId === null) return;
+      clearInterval(intervalId);
+      intervalId = null;
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") {
+        stop();
+        return;
+      }
+      void reconcileTransfers();
+      start();
+    };
+
    void reconcileTransfers();
-    const interval = setInterval(reconcileTransfers, POLL_INTERVAL_MS);
-    return () => clearInterval(interval);
+    if (document.visibilityState !== "hidden") start();
+    document.addEventListener("visibilitychange", onVisibility);
+
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
  }, [t, formatTransferMetrics]);

  return null;
@@ -88,6 +88,7 @@ interface FileViewerProps {
  content?: string;
  savedContent?: string;
  isLoading?: boolean;
+  isSaving?: boolean;
  isEditable?: boolean;
  resetKey?: number;
  onContentChange?: (content: string) => void;
@@ -271,6 +272,7 @@ export function FileViewer({
  content = "",
  savedContent = "",
  isLoading = false,
+  isSaving = false,
  isEditable = false,
  resetKey,
  onContentChange,
@@ -353,6 +355,7 @@ export function FileViewer({
  };

  const handleSave = () => {
+    if (isSaving) return;
    onSave?.(editedContent);
  };

@@ -407,7 +410,7 @@ export function FileViewer({
  return (
    <div className="h-full flex flex-col bg-background">
      <div className="flex-shrink-0 bg-card border-b border-border p-4">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className={cn("p-2 rounded-lg bg-muted", fileTypeInfo.color)}>
              {fileTypeInfo.icon}
@@ -434,7 +437,7 @@ export function FileViewer({
            </div>
          </div>

-          <div className="flex items-center gap-2">
+          <div className="ml-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-2">
            {isEditable && (
              <Button
                variant="ghost"
@@ -490,6 +493,7 @@ export function FileViewer({
                  variant="outline"
                  size="sm"
                  onClick={handleRevert}
+                  disabled={isSaving}
                  className="flex items-center gap-2"
                >
                  <RotateCcw className="w-4 h-4" />
@@ -499,6 +503,7 @@ export function FileViewer({
                  variant="default"
                  size="sm"
                  onClick={handleSave}
+                  disabled={isSaving}
                  className="flex items-center gap-2"
                >
                  <Save className="w-4 h-4" />
@@ -81,6 +81,7 @@ export function FileWindow({

  const [content, setContent] = useState<string>("");
  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
  const [isEditable, setIsEditable] = useState(false);
  const [pendingContent, setPendingContent] = useState<string>("");
  const [resetKey, setResetKey] = useState(0);
@@ -309,7 +310,7 @@ export function FileWindow({

  const handleSave = async (newContent: string) => {
    try {
-      setIsLoading(true);
+      setIsSaving(true);

      await ensureSSHConnection();

@@ -340,7 +341,7 @@ export function FileWindow({
        );
      }
    } finally {
-      setIsLoading(false);
+      setIsSaving(false);
    }
  };

@@ -553,6 +554,7 @@ export function FileWindow({
        content={pendingContent || content}
        savedContent={content}
        isLoading={isLoading}
+        isSaving={isSaving}
        resetKey={resetKey}
        onRevert={handleRevert}
        isEditable={isEditable}
@@ -7,6 +7,8 @@ export interface FileManagerProps {
  initialPath?: string;
  onClose?: () => void;
  onOpenTerminalTab?: (path?: string) => void;
+  /** When false, pause keepalive while the tab stays mounted in the background. */
+  isVisible?: boolean;
 }

 export type ConnectionLogPayload = Omit<LogEntry, "id" | "timestamp">;
@@ -1,33 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { formatFileSize } from "./file-manager-utils.js";
-
-describe("formatFileSize", () => {
-  it("returns a dash for undefined or null", () => {
-    expect(formatFileSize(undefined)).toBe("-");
-    expect(formatFileSize(null as unknown as number)).toBe("-");
-  });
-
-  it("returns 0 B for zero", () => {
-    expect(formatFileSize(0)).toBe("0 B");
-  });
-
-  it("formats bytes without decimals", () => {
-    expect(formatFileSize(512)).toBe("512 B");
-    expect(formatFileSize(1023)).toBe("1023 B");
-  });
-
-  it("formats kilobytes with one decimal under 10", () => {
-    expect(formatFileSize(1024)).toBe("1.0 KB");
-    expect(formatFileSize(1536)).toBe("1.5 KB");
-  });
-
-  it("rounds to whole numbers at or above 10 units", () => {
-    expect(formatFileSize(10 * 1024)).toBe("10 KB");
-    expect(formatFileSize(1024 * 1024)).toBe("1.0 MB");
-  });
-
-  it("scales up to larger units", () => {
-    expect(formatFileSize(1024 * 1024 * 1024)).toBe("1.0 GB");
-    expect(formatFileSize(1024 * 1024 * 1024 * 1024)).toBe("1.0 TB");
-  });
-});
@@ -1,69 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { act, renderHook } from "@testing-library/react";
-import { useFileSelection } from "./useFileSelection.js";
-
-type FileItem = {
-  name: string;
-  type: "file" | "directory" | "link";
-  path: string;
-};
-
-const f = (name: string): FileItem => ({
-  name,
-  type: "file",
-  path: `/dir/${name}`,
-});
-
-describe("useFileSelection", () => {
-  it("single-selects, replacing prior selection", () => {
-    const { result } = renderHook(() => useFileSelection());
-    act(() => result.current.selectFile(f("a")));
-    act(() => result.current.selectFile(f("b")));
-    expect(result.current.selectedFiles.map((x) => x.name)).toEqual(["b"]);
-    expect(result.current.getSelectedCount()).toBe(1);
-  });
-
-  it("multi-selects and toggles off on repeat", () => {
-    const { result } = renderHook(() => useFileSelection());
-    act(() => result.current.selectFile(f("a"), true));
-    act(() => result.current.selectFile(f("b"), true));
-    expect(result.current.getSelectedCount()).toBe(2);
-    act(() => result.current.selectFile(f("a"), true));
-    expect(result.current.selectedFiles.map((x) => x.name)).toEqual(["b"]);
-  });
-
-  it("reports isSelected by path", () => {
-    const { result } = renderHook(() => useFileSelection());
-    act(() => result.current.selectFile(f("a")));
-    expect(result.current.isSelected(f("a"))).toBe(true);
-    expect(result.current.isSelected(f("z"))).toBe(false);
-  });
-
-  it("selects a contiguous range regardless of direction", () => {
-    const { result } = renderHook(() => useFileSelection());
-    const files = [f("a"), f("b"), f("c"), f("d")];
-    act(() => result.current.selectRange(files, files[3], files[1]));
-    expect(result.current.selectedFiles.map((x) => x.name)).toEqual([
-      "b",
-      "c",
-      "d",
-    ]);
-  });
-
-  it("selects all and clears", () => {
-    const { result } = renderHook(() => useFileSelection());
-    const files = [f("a"), f("b")];
-    act(() => result.current.selectAll(files));
-    expect(result.current.getSelectedCount()).toBe(2);
-    act(() => result.current.clearSelection());
-    expect(result.current.getSelectedCount()).toBe(0);
-  });
-
-  it("toggleSelection adds then removes", () => {
-    const { result } = renderHook(() => useFileSelection());
-    act(() => result.current.toggleSelection(f("a")));
-    expect(result.current.isSelected(f("a"))).toBe(true);
-    act(() => result.current.toggleSelection(f("a")));
-    expect(result.current.isSelected(f("a"))).toBe(false);
-  });
-});
@@ -96,7 +96,7 @@ const GuacamoleApp = React.forwardRef<GuacamoleAppHandle, GuacamoleAppProps>(

 interface GuacamoleAppInnerProps {
  hostId: number;
-  hostConfig: Pick<SSHHost, "connectionType">;
+  hostConfig: Pick<SSHHost, "connectionType" | "guacamoleConfig">;
  hostName: string;
  tabId?: string;
  protocol?: "rdp" | "vnc" | "telnet";
@@ -213,6 +213,7 @@ const GuacamoleAppInner = React.forwardRef<
    | "rdp"
    | "vnc"
    | "telnet";
+  const configuredDpi = Number(hostConfig.guacamoleConfig?.dpi);

  return (
    <div className="relative w-full h-full">
@@ -250,6 +251,10 @@ const GuacamoleAppInner = React.forwardRef<
          token,
          protocol: resolvedProtocol,
          type: resolvedProtocol,
+          dpi:
+            Number.isFinite(configuredDpi) && configuredDpi > 0
+              ? configuredDpi
+              : undefined,
        }}
        isVisible={true}
        onError={(err) => setConnectionError(err)}
@@ -1,68 +0,0 @@
-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/");
-  });
-});
@@ -12,6 +12,12 @@ 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";
+import {
+  isFirefoxBrowser,
+  isPasteShortcut,
+  pasteTextToRemote,
+} from "./guacamole-clipboard.ts";
+import { getGuacamoleDisplaySize } from "./guacamole-display-size.ts";

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

@@ -124,13 +130,14 @@ export const GuacamoleDisplay = forwardRef<
    ): Promise<string | null> => {
      try {
        let token: string;
-        const protocol = connectionConfig.protocol ?? connectionConfig.type;
+        const connectionProtocol =
+          connectionConfig.protocol ?? connectionConfig.type;

        if (connectionConfig.token) {
          token = connectionConfig.token;
        } else {
          const data = await getGuacamoleToken({
-            protocol: protocol ?? "rdp",
+            protocol: connectionProtocol ?? "rdp",
            hostname: String(connectionConfig.hostname ?? ""),
            port: connectionConfig.port,
            username: connectionConfig.username,
@@ -151,8 +158,13 @@ export const GuacamoleDisplay = forwardRef<
          token = data.token;
        }

-        const width = connectionConfig.width ?? containerWidth ?? 1280;
-        const height = connectionConfig.height ?? containerHeight ?? 720;
+        const displaySize = getGuacamoleDisplaySize(
+          connectionConfig.width ?? containerWidth ?? 1280,
+          connectionConfig.height ?? containerHeight ?? 720,
+          connectionProtocol,
+          window.devicePixelRatio,
+          connectionConfig.dpi,
+        );

        const wsBase = buildGuacamoleWebSocketBaseUrl({
          isDev,
@@ -166,9 +178,10 @@ export const GuacamoleDisplay = forwardRef<

        const params = new URLSearchParams({
          token,
-          width: String(width),
-          height: String(height),
+          width: String(displaySize.width),
+          height: String(displaySize.height),
        });
+        if (displaySize.dpi) params.set("dpi", String(displaySize.dpi));
        return `${wsBase}?${params.toString()}`;
      } catch (error) {
        const errorMessage =
@@ -338,6 +351,32 @@ export const GuacamoleDisplay = forwardRef<
    displayElement.setAttribute("tabindex", "0");
    displayElement.style.outline = "none";

+    const useNativePasteFallback = isFirefoxBrowser();
+    if (useNativePasteFallback) {
+      displayElement.addEventListener(
+        "keydown",
+        (event) => {
+          if (isPasteShortcut(event)) {
+            event.stopImmediatePropagation();
+          }
+        },
+        true,
+      );
+      displayElement.addEventListener(
+        "paste",
+        (event) => {
+          if (clientRef.current !== client) return;
+          const text = event.clipboardData?.getData("text/plain");
+          if (!text) return;
+
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          pasteTextToRemote(client, text);
+        },
+        true,
+      );
+    }
+
    display.onresize = () => {
      if (!isMountedRef.current) return;
      rescaleDisplay(true);
@@ -403,9 +442,14 @@ export const GuacamoleDisplay = forwardRef<
          onConnect?.();
          if (containerRef.current) {
            const rect = containerRef.current.getBoundingClientRect();
-            const w = Math.round(rect.width);
-            const h = Math.round(rect.height);
-            if (w > 0 && h > 0) client.sendSize(w, h);
+            const size = getGuacamoleDisplaySize(
+              rect.width,
+              rect.height,
+              protocol,
+              window.devicePixelRatio,
+              connectionConfig.dpi,
+            );
+            client.sendSize(size.width, size.height);
          }
          rescaleDisplay(false);
          break;
@@ -484,6 +528,7 @@ export const GuacamoleDisplay = forwardRef<
    rescaleDisplay,
    connectionConfig.protocol,
    connectionConfig.type,
+    connectionConfig.dpi,
    t,
  ]);

@@ -557,10 +602,15 @@ export const GuacamoleDisplay = forwardRef<
      resizeTimeoutRef.current = setTimeout(() => {
        if (clientRef.current && containerRef.current) {
          const rect = containerRef.current.getBoundingClientRect();
-          const w = Math.round(rect.width);
-          const h = Math.round(rect.height);
-          if (w > 0 && h > 0) {
-            clientRef.current.sendSize(w, h);
+          const size = getGuacamoleDisplaySize(
+            rect.width,
+            rect.height,
+            connectionConfig.protocol ?? connectionConfig.type,
+            window.devicePixelRatio,
+            connectionConfig.dpi,
+          );
+          if (rect.width > 0 && rect.height > 0) {
+            clientRef.current.sendSize(size.width, size.height);
            rescaleDisplay(true);
          }
        }
@@ -572,11 +622,16 @@ export const GuacamoleDisplay = forwardRef<
    return () => {
      resizeObserver.disconnect();
    };
-  }, [rescaleDisplay]);
+  }, [
+    connectionConfig.dpi,
+    connectionConfig.protocol,
+    connectionConfig.type,
+    rescaleDisplay,
+  ]);

  const syncClipboard = useCallback(() => {
    const client = clientRef.current;
-    if (!client || !navigator.clipboard?.readText) return;
+    if (!client || isFirefoxBrowser() || !navigator.clipboard?.readText) return;
    navigator.clipboard
      .readText()
      .then((text) => {
@@ -0,0 +1,43 @@
+import Guacamole from "guacamole-common-js";
+
+const CONTROL_LEFT_KEYSYM = 0xffe3;
+const V_KEYSYM = 0x76;
+
+interface ClipboardOutputStream {
+  sendBlob(data: string): void;
+  sendEnd(): void;
+}
+
+export interface GuacamoleClipboardClient {
+  createClipboardStream(mimetype: string): ClipboardOutputStream;
+  sendKeyEvent(pressed: number, keysym: number): void;
+}
+
+export function isFirefoxBrowser(userAgent = navigator.userAgent): boolean {
+  return /(?:Firefox|FxiOS)\//.test(userAgent);
+}
+
+export function isPasteShortcut(
+  event: Pick<KeyboardEvent, "altKey" | "ctrlKey" | "key" | "metaKey">,
+): boolean {
+  return (
+    !event.altKey &&
+    (event.ctrlKey || event.metaKey) &&
+    event.key.toLowerCase() === "v"
+  );
+}
+
+export function pasteTextToRemote(
+  client: GuacamoleClipboardClient,
+  text: string,
+): void {
+  const stream = client.createClipboardStream("text/plain");
+  const writer = new Guacamole.StringWriter(stream);
+  writer.sendText(text);
+  writer.sendEnd();
+
+  client.sendKeyEvent(1, CONTROL_LEFT_KEYSYM);
+  client.sendKeyEvent(1, V_KEYSYM);
+  client.sendKeyEvent(0, V_KEYSYM);
+  client.sendKeyEvent(0, CONTROL_LEFT_KEYSYM);
+}
@@ -0,0 +1,39 @@
+const DEFAULT_RDP_DPI = 96;
+const MAX_DEVICE_PIXEL_RATIO = 3;
+
+export interface GuacamoleDisplaySize {
+  width: number;
+  height: number;
+  dpi?: number;
+  pixelRatio: number;
+}
+
+export function getGuacamoleDisplaySize(
+  cssWidth: number,
+  cssHeight: number,
+  protocol: string | undefined,
+  devicePixelRatio: number,
+  configuredDpi?: number,
+): GuacamoleDisplaySize {
+  const isRdp = protocol === "rdp";
+  const pixelRatio = isRdp
+    ? Math.min(
+        MAX_DEVICE_PIXEL_RATIO,
+        Math.max(1, Number.isFinite(devicePixelRatio) ? devicePixelRatio : 1),
+      )
+    : 1;
+
+  const size = {
+    width: Math.max(1, Math.round(cssWidth * pixelRatio)),
+    height: Math.max(1, Math.round(cssHeight * pixelRatio)),
+    pixelRatio,
+  };
+
+  if (!isRdp) return size;
+
+  const baseDpi =
+    configuredDpi && Number.isFinite(configuredDpi) && configuredDpi > 0
+      ? configuredDpi
+      : DEFAULT_RDP_DPI;
+  return { ...size, dpi: Math.round(baseDpi * pixelRatio) };
+}
@@ -1,80 +0,0 @@
-import { describe, it, expect } from "vitest";
-import {
-  screenToCanvas,
-  canvasToScreen,
-  zoomAroundPoint,
-} from "./canvasGeometry";
-
-const PAN = { x: 100, y: 200 };
-const ZOOM = 2;
-
-describe("screenToCanvas", () => {
-  it("inverts canvasToScreen", () => {
-    const canvas = { x: 50, y: 75 };
-    const screen = canvasToScreen(canvas.x, canvas.y, PAN, ZOOM);
-    const back = screenToCanvas(screen.x, screen.y, PAN, ZOOM);
-    expect(back.x).toBeCloseTo(canvas.x);
-    expect(back.y).toBeCloseTo(canvas.y);
-  });
-
-  it("accounts for pan offset", () => {
-    const result = screenToCanvas(100, 200, PAN, 1);
-    expect(result.x).toBe(0);
-    expect(result.y).toBe(0);
-  });
-
-  it("accounts for zoom", () => {
-    const result = screenToCanvas(300, 400, PAN, ZOOM);
-    expect(result.x).toBe((300 - 100) / 2);
-    expect(result.y).toBe((400 - 200) / 2);
-  });
-});
-
-describe("canvasToScreen", () => {
-  it("maps origin with pan offset", () => {
-    const result = canvasToScreen(0, 0, PAN, ZOOM);
-    expect(result.x).toBe(100);
-    expect(result.y).toBe(200);
-  });
-
-  it("scales by zoom", () => {
-    const result = canvasToScreen(10, 20, PAN, ZOOM);
-    expect(result.x).toBe(120);
-    expect(result.y).toBe(240);
-  });
-});
-
-describe("zoomAroundPoint", () => {
-  it("keeps the mouse point on the same canvas coordinate", () => {
-    const mouseX = 400;
-    const mouseY = 300;
-    const pan = { x: 0, y: 0 };
-    const oldZoom = 1;
-    const newZoom = 2;
-
-    const newPan = zoomAroundPoint(mouseX, mouseY, pan, oldZoom, newZoom);
-
-    // Canvas coordinate under mouse before zoom
-    const canvasBefore = screenToCanvas(mouseX, mouseY, pan, oldZoom);
-    // Canvas coordinate under mouse after zoom with newPan
-    const canvasAfter = screenToCanvas(mouseX, mouseY, newPan, newZoom);
-
-    expect(canvasAfter.x).toBeCloseTo(canvasBefore.x);
-    expect(canvasAfter.y).toBeCloseTo(canvasBefore.y);
-  });
-
-  it("returns correct pan for zoom-out", () => {
-    const mouseX = 200;
-    const mouseY = 150;
-    const pan = { x: 50, y: 50 };
-    const oldZoom = 2;
-    const newZoom = 1;
-
-    const newPan = zoomAroundPoint(mouseX, mouseY, pan, oldZoom, newZoom);
-    const canvasBefore = screenToCanvas(mouseX, mouseY, pan, oldZoom);
-    const canvasAfter = screenToCanvas(mouseX, mouseY, newPan, newZoom);
-
-    expect(canvasAfter.x).toBeCloseTo(canvasBefore.x);
-    expect(canvasAfter.y).toBeCloseTo(canvasBefore.y);
-  });
-});
@@ -1,39 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { snapToGrid, snapToGridFloor } from "./snapToGrid";
-import { GRID_SIZE } from "@/types/homepage-types";
-
-describe("snapToGrid", () => {
-  it("snaps to nearest grid multiple", () => {
-    expect(snapToGrid(0)).toBe(0);
-    expect(snapToGrid(GRID_SIZE)).toBe(GRID_SIZE);
-    expect(snapToGrid(GRID_SIZE * 2)).toBe(GRID_SIZE * 2);
-  });
-
-  it("rounds to nearest (up when exactly halfway)", () => {
-    expect(snapToGrid(GRID_SIZE / 2)).toBe(GRID_SIZE);
-    expect(snapToGrid(GRID_SIZE * 1.5)).toBe(GRID_SIZE * 2);
-  });
-
-  it("rounds down when below halfway", () => {
-    expect(snapToGrid(GRID_SIZE * 0.4)).toBe(0);
-    expect(snapToGrid(GRID_SIZE * 1.4)).toBe(GRID_SIZE);
-  });
-
-  it("works with negative values", () => {
-    expect(snapToGrid(-GRID_SIZE)).toBe(-GRID_SIZE);
-    expect(snapToGrid(-GRID_SIZE * 0.4)).toBeCloseTo(0);
-  });
-});
-
-describe("snapToGridFloor", () => {
-  it("always rounds down to floor multiple", () => {
-    expect(snapToGridFloor(GRID_SIZE - 1)).toBe(0);
-    expect(snapToGridFloor(GRID_SIZE)).toBe(GRID_SIZE);
-    expect(snapToGridFloor(GRID_SIZE + 1)).toBe(GRID_SIZE);
-    expect(snapToGridFloor(GRID_SIZE * 2 - 1)).toBe(GRID_SIZE);
-  });
-
-  it("handles zero", () => {
-    expect(snapToGridFloor(0)).toBe(0);
-  });
-});
@@ -0,0 +1,50 @@
+/**
+ * setInterval that pauses while the document is hidden and fires once on resume.
+ * Returns a cleanup function for useEffect.
+ */
+export function runVisibleInterval(
+  tick: () => void,
+  intervalMs: number,
+): () => void {
+  let intervalId: ReturnType<typeof setInterval> | null = null;
+
+  const start = () => {
+    if (intervalId !== null || intervalMs <= 0) return;
+    intervalId = setInterval(() => {
+      if (document.visibilityState === "hidden") return;
+      tick();
+    }, intervalMs);
+  };
+
+  const stop = () => {
+    if (intervalId === null) return;
+    clearInterval(intervalId);
+    intervalId = null;
+  };
+
+  const onVisibility = () => {
+    if (document.visibilityState === "hidden") {
+      stop();
+      return;
+    }
+    tick();
+    start();
+  };
+
+  if (
+    typeof document === "undefined" ||
+    document.visibilityState !== "hidden"
+  ) {
+    start();
+  }
+  if (typeof document !== "undefined") {
+    document.addEventListener("visibilitychange", onVisibility);
+  }
+
+  return () => {
+    stop();
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", onVisibility);
+    }
+  };
+}
@@ -61,8 +61,35 @@ function AlertFeedWidget({

  useEffect(() => {
    fetchData();
-    const iv = setInterval(fetchData, 30_000);
-    return () => clearInterval(iv);
+
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+    const start = () => {
+      if (intervalId !== null) return;
+      intervalId = setInterval(() => {
+        if (document.visibilityState === "hidden") return;
+        void fetchData();
+      }, 30_000);
+    };
+    const stop = () => {
+      if (intervalId === null) return;
+      clearInterval(intervalId);
+      intervalId = null;
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") {
+        stop();
+        return;
+      }
+      void fetchData();
+      start();
+    };
+
+    if (document.visibilityState !== "hidden") start();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
  }, [maxItems, showAcknowledged]);

  const handleAck = async (id: number) => {
@@ -8,6 +8,7 @@ import type {
 } from "@/types/homepage-types";
 import { GRID_SIZE } from "@/types/homepage-types";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 function getMonthData(year: number, month: number, startOnMonday: boolean) {
  const firstDay = new Date(year, month, 1).getDay();
@@ -27,8 +28,7 @@ function CalendarWidget({
  const [viewMonth, setViewMonth] = useState(now.getMonth());

  useEffect(() => {
-    const iv = setInterval(() => setNow(new Date()), 60_000);
-    return () => clearInterval(iv);
+    return runVisibleInterval(() => setNow(new Date()), 60_000);
  }, []);

  const { daysInMonth, offset } = getMonthData(
@@ -1,18 +1,20 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Clock } from "lucide-react";
 import { registerWidget } from "./WidgetRegistry";
 import type { ClockConfig, WidgetComponentProps } from "@/types/homepage-types";
 import { GRID_SIZE } from "@/types/homepage-types";
 import { WidgetTitle } from "./WidgetTitle";
+import { usePageVisibleInterval } from "@/hooks/use-page-visible-interval";

 function ClockWidget({ widget, config }: WidgetComponentProps<ClockConfig>) {
  const { timezone, showSeconds, format } = config;
  const [now, setNow] = useState(new Date());

-  useEffect(() => {
-    const iv = setInterval(() => setNow(new Date()), 1000);
-    return () => clearInterval(iv);
-  }, []);
+  // Minute-level is enough without seconds; pause when the tab is backgrounded.
+  usePageVisibleInterval(
+    () => setNow(new Date()),
+    showSeconds ? 1_000 : 30_000,
+  );

  const opts: Intl.DateTimeFormatOptions = {
    hour: "2-digit",
@@ -69,8 +69,32 @@ function CountdownWidget({
      }
    };
    update();
-    const iv = setInterval(update, 1000);
-    return () => clearInterval(iv);
+
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+    const start = () => {
+      if (intervalId !== null) return;
+      intervalId = setInterval(update, 1000);
+    };
+    const stop = () => {
+      if (intervalId === null) return;
+      clearInterval(intervalId);
+      intervalId = null;
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") {
+        stop();
+        return;
+      }
+      update();
+      start();
+    };
+
+    if (document.visibilityState !== "hidden") start();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
  }, [targetDate]);

  const titleBar = (
@@ -9,6 +9,7 @@ import type {
 import { GRID_SIZE } from "@/types/homepage-types";
 import { homepageApi } from "@/main-axios";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 function resolvePath(obj: unknown, path: string): unknown {
  return path.split(".").reduce((acc: unknown, key) => {
@@ -70,8 +71,9 @@ function CustomApiWidget({

  useEffect(() => {
    fetchData();
-    const iv = setInterval(fetchData, interval * 1000);
-    return () => clearInterval(iv);
+    return runVisibleInterval(() => {
+      void fetchData();
+    }, interval * 1000);
  }, [url, interval]);

  const accent =
@@ -10,6 +10,7 @@ import { GRID_SIZE } from "@/types/homepage-types";
 import { getRecentActivity } from "@/api/dashboard-api";
 import type { RecentActivityItem } from "@/api/dashboard-api";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 function relativeTime(ts: string): string {
  const diff = Date.now() - new Date(ts).getTime();
@@ -43,8 +44,9 @@ function DockerActivityWidget({

  useEffect(() => {
    fetchData();
-    const iv = setInterval(fetchData, 30_000);
-    return () => clearInterval(iv);
+    return runVisibleInterval(() => {
+      void fetchData();
+    }, 30_000);
  }, [maxItems]);

  if (loading) {
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { LayoutGrid } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { registerWidget } from "./WidgetRegistry";
@@ -8,9 +8,9 @@ import type {
 } from "@/types/homepage-types";
 import { GRID_SIZE } from "@/types/homepage-types";
 import { getSSHHosts } from "@/api/ssh-host-management-api";
-import { getAllServerStatuses } from "@/api/host-metrics-status-api";
 import type { SSHHostWithStatus } from "@/main-axios";
 import { WidgetTitle } from "./WidgetTitle";
+import { usePageVisibleInterval } from "@/hooks/use-page-visible-interval";

 function getAccentColor(): string {
  return (
@@ -44,39 +44,27 @@ function HostGridWidget({
  const [hosts, setHosts] = useState<SSHHostWithStatus[]>([]);
  const [loading, setLoading] = useState(true);

-  const fetchData = async () => {
+  // getSSHHosts already attaches cached server status — no second /status call.
+  const fetchData = useCallback(async () => {
    try {
-      const [allHosts, statuses] = await Promise.all([
-        getSSHHosts(),
-        getAllServerStatuses().catch(
-          () => ({}) as Record<number, { status: string }>,
-        ),
-      ]);
+      const allHosts = await getSSHHosts();
      const filtered =
        hostIds.length > 0
          ? allHosts.filter((h) => hostIds.includes(h.id))
          : allHosts;
-      const withStatus = filtered.map((h) => ({
-        ...h,
-        status:
-          (statuses as Record<number, { status: string }>)[h.id]?.status ??
-          h.status ??
-          "unknown",
-      }));
-      setHosts(withStatus);
+      setHosts(filtered);
    } catch {
      /* ignore */
    } finally {
      setLoading(false);
    }
-  };
-
-  useEffect(() => {
-    fetchData();
-    const iv = setInterval(fetchData, 10_000);
-    return () => clearInterval(iv);
  }, [hostIds.join(",")]);

+  // Align with global status cadence; pause when the tab is hidden.
+  usePageVisibleInterval(() => {
+    void fetchData();
+  }, 30_000);
+
  if (loading) {
    return (
      <div className="flex items-center justify-center w-full h-full text-xs text-muted-foreground">
@@ -130,10 +130,37 @@ function HostStatusWidget({
    };

    poll();
-    const iv = setInterval(poll, 10000);
+
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+    const start = () => {
+      if (intervalId !== null) return;
+      // Align with global status cadence; metrics do not need sub-10s when hidden.
+      intervalId = setInterval(() => {
+        if (document.visibilityState === "hidden") return;
+        void poll();
+      }, 30_000);
+    };
+    const stop = () => {
+      if (intervalId === null) return;
+      clearInterval(intervalId);
+      intervalId = null;
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") {
+        stop();
+        return;
+      }
+      void poll();
+      start();
+    };
+
+    if (document.visibilityState !== "hidden") start();
+    document.addEventListener("visibilitychange", onVisibility);
+
    return () => {
      cancelled = true;
-      clearInterval(iv);
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, [hostId, needsMetrics]);

@@ -12,6 +12,7 @@ import { getMetricsHistory } from "@/api/host-metrics-api";
 import { getSSHHosts } from "@/api/ssh-host-management-api";
 import type { MetricsHistoryRow } from "@/api/host-metrics-api";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 function getAccentColor(): string {
  return (
@@ -161,8 +162,9 @@ function MetricsChartWidget({

  useEffect(() => {
    fetchData();
-    const iv = setInterval(fetchData, 60_000);
-    return () => clearInterval(iv);
+    return runVisibleInterval(() => {
+      void fetchData();
+    }, 60_000);
  }, [hostId, metric, range]);

  const accent = getAccentColor();
@@ -9,6 +9,7 @@ import type {
 import { GRID_SIZE } from "@/types/homepage-types";
 import { homepageApi } from "@/main-axios";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 interface PingResult {
  ok: boolean;
@@ -72,8 +73,9 @@ function PingStatusWidget({

  useEffect(() => {
    fetchAll();
-    const iv = setInterval(fetchAll, interval * 1000);
-    return () => clearInterval(iv);
+    return runVisibleInterval(() => {
+      void fetchAll();
+    }, interval * 1000);
  }, [JSON.stringify(urls), interval]);

  if (urls.length === 0) {
@@ -18,6 +18,7 @@ import { GRID_SIZE } from "@/types/homepage-types";
 import { getRecentActivity } from "@/api/dashboard-api";
 import type { RecentActivityItem } from "@/api/dashboard-api";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 function relativeTime(ts: string): string {
  const diff = Date.now() - new Date(ts).getTime();
@@ -75,8 +76,9 @@ function RecentActivityWidget({

  useEffect(() => {
    fetchData();
-    const iv = setInterval(fetchData, 60_000);
-    return () => clearInterval(iv);
+    return runVisibleInterval(() => {
+      void fetchData();
+    }, 60_000);
  }, [maxItems, filterTypes.join(",")]);

  if (loading) {
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { Zap, Terminal, FolderOpen, Container } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { registerWidget } from "./WidgetRegistry";
@@ -8,9 +8,9 @@ import type {
 } from "@/types/homepage-types";
 import { GRID_SIZE } from "@/types/homepage-types";
 import { getSSHHosts } from "@/api/ssh-host-management-api";
-import { getAllServerStatuses } from "@/api/host-metrics-status-api";
 import type { SSHHostWithStatus } from "@/main-axios";
 import { WidgetTitle } from "./WidgetTitle";
+import { usePageVisibleInterval } from "@/hooks/use-page-visible-interval";

 function getAccentColor(): string {
  return (
@@ -51,40 +51,25 @@ function SshQuickConnectWidget({
  const [hosts, setHosts] = useState<SSHHostWithStatus[]>([]);
  const [loading, setLoading] = useState(true);

-  const fetchData = async () => {
+  const fetchData = useCallback(async () => {
    try {
-      const [allHosts, statuses] = await Promise.all([
-        getSSHHosts(),
-        getAllServerStatuses().catch(
-          () => ({}) as Record<number, { status: string }>,
-        ),
-      ]);
+      const allHosts = await getSSHHosts();
      const filtered =
        hostIds.length > 0
          ? allHosts.filter((h) => hostIds.includes(h.id))
          : allHosts;
-      setHosts(
-        filtered.map((h) => ({
-          ...h,
-          status:
-            (statuses as Record<number, { status: string }>)[h.id]?.status ??
-            h.status ??
-            "unknown",
-        })),
-      );
+      setHosts(filtered);
    } catch {
      /* ignore */
    } finally {
      setLoading(false);
    }
-  };
-
-  useEffect(() => {
-    fetchData();
-    const iv = setInterval(fetchData, 10_000);
-    return () => clearInterval(iv);
  }, [hostIds.join(",")]);

+  usePageVisibleInterval(() => {
+    void fetchData();
+  }, 30_000);
+
  if (loading) {
    return (
      <div className="flex items-center justify-center w-full h-full text-xs text-muted-foreground">
@@ -10,6 +10,7 @@ import { GRID_SIZE } from "@/types/homepage-types";
 import { getVersionInfo, getDatabaseHealth } from "@/api/system-status-api";
 import { getUptime } from "@/api/dashboard-api";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 interface InfoRowProps {
  label: string;
@@ -65,8 +66,9 @@ function SystemOverviewWidget({

  useEffect(() => {
    fetchData();
-    const iv = setInterval(fetchData, 300_000);
-    return () => clearInterval(iv);
+    return runVisibleInterval(() => {
+      void fetchData();
+    }, 300_000);
  }, [showVersion, showDbHealth, showUptime]);

  const accent =
@@ -9,6 +9,7 @@ import type {
 import { GRID_SIZE } from "@/types/homepage-types";
 import { getUptime } from "@/api/dashboard-api";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 function formatUptime(seconds: number): {
  days: number;
@@ -43,14 +44,12 @@ function TermixUptimeWidget({
      })
      .catch(() => setError(true));

-    const iv = setInterval(() => {
+    return runVisibleInterval(() => {
      if (baseRef.current !== null) {
        const elapsed = (Date.now() - startRef.current) / 1000;
        setSeconds(Math.floor(baseRef.current + elapsed));
      }
    }, 1000);
-
-    return () => clearInterval(iv);
  }, []);

  if (error) {
@@ -14,6 +14,7 @@ import type {
 } from "@/types/homepage-types";
 import { GRID_SIZE } from "@/types/homepage-types";
 import { WidgetTitle } from "./WidgetTitle";
+import { runVisibleInterval } from "../use-visible-interval";

 interface WttrCurrent {
  temp_C: string;
@@ -77,10 +78,15 @@ function WeatherWidget({
      }
    };
    fetchWeather();
-    const interval = setInterval(fetchWeather, 10 * 60 * 1000);
+    const stop = runVisibleInterval(
+      () => {
+        void fetchWeather();
+      },
+      10 * 60 * 1000,
+    );
    return () => {
      cancelled = true;
-      clearInterval(interval);
+      stop();
    };
  }, [location]);

@@ -286,8 +286,8 @@ function HostMetricsInner({
  }, [hostConfig?.id]);

  React.useEffect(() => {
-    if (!statusCheckEnabled || !currentHostConfig?.id) {
-      setServerStatus("offline");
+    if (!statusCheckEnabled || !currentHostConfig?.id || !isActuallyVisible) {
+      if (!statusCheckEnabled) setServerStatus("offline");
      return;
    }
    let cancelled = false;
@@ -314,6 +314,7 @@ function HostMetricsInner({
    currentHostConfig?.id,
    statusCheckEnabled,
    statsConfig.statusCheckInterval,
+    isActuallyVisible,
  ]);

  React.useEffect(() => {
@@ -0,0 +1,293 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Pause, Play } from "lucide-react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import Guacamole from "guacamole-common-js";
+import type { SessionLogRecord } from "@/api/session-log-api";
+import { parseAsciicast, type Asciicast } from "./asciicast";
+import "@xterm/xterm/css/xterm.css";
+
+const SPEEDS = [0.5, 1, 2, 4];
+
+function formatPosition(seconds: number) {
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}:${String(Math.floor(seconds % 60)).padStart(2, "0")}`;
+}
+
+function PlaybackControls({
+  playing,
+  position,
+  duration,
+  speed,
+  onToggle,
+  onSeek,
+  onSpeed,
+}: {
+  playing: boolean;
+  position: number;
+  duration: number;
+  speed: number;
+  onToggle: () => void;
+  onSeek: (position: number) => void;
+  onSpeed: (speed: number) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2 border-t border-border/60 bg-muted/20 px-3 py-2">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex size-7 items-center justify-center hover:bg-muted"
+        aria-label={playing ? "Pause recording" : "Play recording"}
+      >
+        {playing ? (
+          <Pause className="size-3.5" />
+        ) : (
+          <Play className="size-3.5" />
+        )}
+      </button>
+      <span className="w-10 text-[10px] tabular-nums text-muted-foreground">
+        {formatPosition(position)}
+      </span>
+      <input
+        type="range"
+        min={0}
+        max={Math.max(duration, 0.01)}
+        step={0.01}
+        value={Math.min(position, duration)}
+        onChange={(event) => onSeek(Number(event.target.value))}
+        className="min-w-0 flex-1 accent-primary"
+        aria-label="Recording timeline"
+      />
+      <span className="w-10 text-right text-[10px] tabular-nums text-muted-foreground">
+        {formatPosition(duration)}
+      </span>
+      <select
+        value={speed}
+        onChange={(event) => onSpeed(Number(event.target.value))}
+        className="h-7 border border-border bg-background px-1 text-[10px]"
+        aria-label="Playback speed"
+      >
+        {SPEEDS.map((value) => (
+          <option key={value} value={value}>
+            {value}×
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+function AsciicastPlayer({ blob }: { blob: Blob }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const terminalRef = useRef<Terminal | null>(null);
+  const recordingRef = useRef<Asciicast | null>(null);
+  const positionRef = useRef(0);
+  const eventIndexRef = useRef(0);
+  const [position, setPosition] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [speed, setSpeed] = useState(1);
+  const [playing, setPlaying] = useState(false);
+  const [error, setError] = useState("");
+
+  const renderAt = useCallback((nextPosition: number) => {
+    const terminal = terminalRef.current;
+    const recording = recordingRef.current;
+    if (!terminal || !recording) return;
+    if (nextPosition < positionRef.current) {
+      terminal.reset();
+      terminal.resize(recording.width, recording.height);
+      eventIndexRef.current = 0;
+    }
+    while (eventIndexRef.current < recording.events.length) {
+      const [time, type, data] = recording.events[eventIndexRef.current];
+      if (time > nextPosition) break;
+      if (type === "o") terminal.write(data);
+      if (type === "r") {
+        const [cols, rows] = data.split("x").map(Number);
+        if (cols > 0 && rows > 0) terminal.resize(cols, rows);
+      }
+      eventIndexRef.current++;
+    }
+    positionRef.current = nextPosition;
+    setPosition(nextPosition);
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const terminal = new Terminal({
+      cursorBlink: false,
+      disableStdin: true,
+      convertEol: false,
+      fontSize: 12,
+      theme: { background: "#09090b" },
+    });
+    const fitAddon = new FitAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.open(containerRef.current);
+    terminalRef.current = terminal;
+    const observer = new ResizeObserver(() => fitAddon.fit());
+    observer.observe(containerRef.current);
+    fitAddon.fit();
+
+    blob
+      .text()
+      .then((source) => {
+        const recording = parseAsciicast(source);
+        recordingRef.current = recording;
+        setDuration(recording.duration);
+        terminal.resize(recording.width, recording.height);
+        renderAt(0);
+      })
+      .catch((reason) =>
+        setError(reason instanceof Error ? reason.message : String(reason)),
+      );
+
+    return () => {
+      observer.disconnect();
+      terminal.dispose();
+      terminalRef.current = null;
+    };
+  }, [blob, renderAt]);
+
+  useEffect(() => {
+    if (!playing || !recordingRef.current) return;
+    let frame = 0;
+    let previous = performance.now();
+    const tick = (now: number) => {
+      const next = Math.min(
+        duration,
+        positionRef.current + ((now - previous) / 1000) * speed,
+      );
+      previous = now;
+      renderAt(next);
+      if (next >= duration) setPlaying(false);
+      else frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [duration, playing, renderAt, speed]);
+
+  if (error) return <div className="p-4 text-xs text-destructive">{error}</div>;
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div ref={containerRef} className="min-h-0 flex-1 bg-[#09090b] p-2" />
+      <PlaybackControls
+        playing={playing}
+        position={position}
+        duration={duration}
+        speed={speed}
+        onToggle={() => {
+          if (!playing && position >= duration) renderAt(0);
+          setPlaying((value) => !value);
+        }}
+        onSeek={renderAt}
+        onSpeed={setSpeed}
+      />
+    </div>
+  );
+}
+
+function GuacamolePlayer({ blob }: { blob: Blob }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const recordingRef = useRef<Guacamole.SessionRecording | null>(null);
+  const positionRef = useRef(0);
+  const [position, setPosition] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [speed, setSpeed] = useState(1);
+  const [playing, setPlaying] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const recording = new Guacamole.SessionRecording(blob, 100);
+    recordingRef.current = recording;
+    const display = recording.getDisplay();
+    const element = display.getElement();
+    containerRef.current.replaceChildren(element);
+    const fit = () => {
+      const width = display.getWidth();
+      if (width && containerRef.current) {
+        display.scale(containerRef.current.clientWidth / width);
+      }
+    };
+    const observer = new ResizeObserver(fit);
+    observer.observe(containerRef.current);
+    recording.onload = () => {
+      setDuration(recording.getDuration() / 1000);
+      fit();
+    };
+    recording.onprogress = (nextDuration) => setDuration(nextDuration / 1000);
+    recording.onseek = (nextPosition) => {
+      positionRef.current = nextPosition / 1000;
+      setPosition(positionRef.current);
+    };
+    recording.onerror = setError;
+
+    return () => {
+      observer.disconnect();
+      recording.abort();
+      recordingRef.current = null;
+    };
+  }, [blob]);
+
+  useEffect(() => {
+    const recording = recordingRef.current;
+    if (!recording || !playing) return;
+    recording.pause();
+    let previous = performance.now();
+    let nextPosition = positionRef.current;
+    const interval = window.setInterval(() => {
+      const now = performance.now();
+      nextPosition = Math.min(
+        duration,
+        nextPosition + ((now - previous) / 1000) * speed,
+      );
+      previous = now;
+      recording.seek(nextPosition * 1000);
+      if (nextPosition >= duration) setPlaying(false);
+    }, 100);
+    return () => clearInterval(interval);
+  }, [duration, playing, speed]);
+
+  if (error) return <div className="p-4 text-xs text-destructive">{error}</div>;
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div
+        ref={containerRef}
+        className="min-h-0 flex-1 overflow-hidden bg-black"
+      />
+      <PlaybackControls
+        playing={playing}
+        position={position}
+        duration={duration}
+        speed={speed}
+        onToggle={() => {
+          const recording = recordingRef.current;
+          if (!recording) return;
+          if (!playing && position >= duration) recording.seek(0);
+          setPlaying((value) => !value);
+        }}
+        onSeek={(nextPosition) => {
+          recordingRef.current?.seek(nextPosition * 1000);
+          positionRef.current = nextPosition;
+          setPosition(nextPosition);
+        }}
+        onSpeed={setSpeed}
+      />
+    </div>
+  );
+}
+
+export function SessionRecordingPlayer({
+  log,
+  blob,
+}: {
+  log: SessionLogRecord;
+  blob: Blob;
+}) {
+  return log.format === "guacamole" ? (
+    <GuacamolePlayer blob={blob} />
+  ) : (
+    <AsciicastPlayer blob={blob} />
+  );
+}
@@ -0,0 +1,39 @@
+export type AsciicastEvent = [
+  time: number,
+  type: "i" | "o" | "r",
+  data: string,
+];
+
+export type Asciicast = {
+  width: number;
+  height: number;
+  duration: number;
+  events: AsciicastEvent[];
+};
+
+export function parseAsciicast(source: string): Asciicast {
+  const lines = source.trim().split("\n");
+  const header = JSON.parse(lines.shift() || "{}") as {
+    version?: number;
+    width?: number;
+    height?: number;
+  };
+  if (header.version !== 2) throw new Error("Unsupported asciicast version");
+
+  const events = lines
+    .filter(Boolean)
+    .map((line) => JSON.parse(line) as AsciicastEvent)
+    .filter(
+      ([time, type, data]) =>
+        Number.isFinite(time) &&
+        (type === "i" || type === "o" || type === "r") &&
+        typeof data === "string",
+    );
+
+  return {
+    width: header.width || 80,
+    height: header.height || 24,
+    duration: events.at(-1)?.[0] || 0,
+    events,
+  };
+}
@@ -55,8 +55,13 @@ import {
 import { ConnectionLog } from "@/ssh/connection-log/ConnectionLog.tsx";
 import { toast } from "sonner";
 import { Button } from "@/components/button";
+import { Save } from "lucide-react";
 import { resolveTermixThemeColors } from "./terminal-theme.ts";
 import type { TerminalHandle, TerminalHostConfig } from "./terminal-types.ts";
+import {
+  getNextTerminalFontSize,
+  getTerminalFontZoomDirection,
+} from "./terminal-font-zoom.ts";
 export type { TerminalHandle, TerminalHostConfig } from "./terminal-types.ts";

 type HostKeyVerificationData = Omit<
@@ -81,10 +86,10 @@ interface SSHTerminalProps {
  previewTheme?: string | null;
  /** When true, suppress automatic focus on connect/visibility change. */
  disableAutoFocus?: boolean;
+  isQuickConnect?: boolean;
+  onSaveQuickConnect?: () => Promise<void>;
 }

-const TERMINAL_FONT_ZOOM_MIN = 8;
-const TERMINAL_FONT_ZOOM_MAX = 36;
 const ALTERNATE_SCREEN_SEQUENCE = /\x1b\[\?(47|1047|1049)([hl])/g;

 function updateAlternateScreenMode(output: string, currentMode: boolean) {
@@ -116,6 +121,8 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
      onOpenFileInEditor,
      previewTheme,
      disableAutoFocus = false,
+      isQuickConnect = false,
+      onSaveQuickConnect,
    },
    ref,
  ) {
@@ -157,6 +164,8 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
    const pongReceivedRef = useRef(true);
    const pongTimeoutRef = useRef<NodeJS.Timeout | null>(null);
    const [isConnected, setIsConnected] = useState(false);
+    const [isSavingQuickConnect, setIsSavingQuickConnect] = useState(false);
+    const [isQuickConnectSaved, setIsQuickConnectSaved] = useState(false);
    const [isConnecting, setIsConnecting] = useState(false);
    const [isFitted, setIsFitted] = useState(false);
    const [connectionError, setConnectionError] = useState<string | null>(null);
@@ -223,6 +232,20 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
      url: string;
    } | null>(null);

+    useEffect(() => {
+      if (!linkClickDialog) return;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        setLinkClickDialog(null);
+      };
+
+      window.addEventListener("keydown", handleKeyDown, true);
+      return () => window.removeEventListener("keydown", handleKeyDown, true);
+    }, [linkClickDialog]);
+
    const [tmuxSessionPicker, setTmuxSessionPicker] = useState<{
      sessions: Array<{
        name: string;
@@ -416,20 +439,8 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
    }, [isVisible]);

    useEffect(() => {
-      const checkAuth = () => {
-        setIsAuthenticated((prev) => {
-          if (!prev) {
-            return true;
-          }
-          return prev;
-        });
-      };
-
-      checkAuth();
-
-      const authCheckInterval = setInterval(checkAuth, 5000);
-
-      return () => clearInterval(authCheckInterval);
+      // One-shot: historical code polled every 5s but only ever flipped false→true.
+      setIsAuthenticated(true);
    }, []);

    function hardRefresh() {
@@ -483,16 +494,12 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
      }
    }

-    function zoomTerminalFont(deltaY: number) {
-      const direction = deltaY < 0 ? 1 : -1;
+    function changeTerminalFontSize(direction: -1 | 1) {
      const currentFontSize =
        terminal.options.fontSize ??
        terminalFontSizeRef.current ??
        DEFAULT_TERMINAL_CONFIG.fontSize;
-      const nextFontSize = Math.min(
-        TERMINAL_FONT_ZOOM_MAX,
-        Math.max(TERMINAL_FONT_ZOOM_MIN, currentFontSize + direction),
-      );
+      const nextFontSize = getNextTerminalFontSize(currentFontSize, direction);

      if (nextFontSize === currentFontSize) {
        return;
@@ -2153,7 +2160,7 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(

      terminal.attachCustomWheelEventHandler((ev) => {
        if (ev.ctrlKey || ev.metaKey) {
-          zoomTerminalFont(ev.deltaY);
+          changeTerminalFontSize(ev.deltaY < 0 ? 1 : -1);
          return false;
        }

@@ -2276,9 +2283,11 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
      element?.addEventListener("keydown", handleTabCapture, true);

      const resizeObserver = new ResizeObserver(() => {
+        // Background keep-alive tabs still observe layout; skip fit work.
+        if (!isVisibleRef.current) return;
        if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
        resizeTimeout.current = setTimeout(() => {
-          if (isVisible) {
+          if (isVisibleRef.current) {
            performFit();
          }
        }, 50);
@@ -2384,6 +2393,14 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
          }
        }

+        const fontZoomDirection = getTerminalFontZoomDirection(e);
+        if (fontZoomDirection !== 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          changeTerminalFontSize(fontZoomDirection);
+          return false;
+        }
+
        if (
          e.ctrlKey &&
          !e.shiftKey &&
@@ -2800,6 +2817,32 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
          </button>
        )}

+        {isQuickConnect &&
+          isConnected &&
+          !isQuickConnectSaved &&
+          onSaveQuickConnect && (
+            <Button
+              size="sm"
+              variant="secondary"
+              disabled={isSavingQuickConnect}
+              onClick={async () => {
+                setIsSavingQuickConnect(true);
+                try {
+                  await onSaveQuickConnect();
+                  setIsQuickConnectSaved(true);
+                } catch {
+                  // The shell reports the failure with a toast.
+                } finally {
+                  setIsSavingQuickConnect(false);
+                }
+              }}
+              className="absolute top-2 left-2 z-[110] h-7 gap-1.5 bg-black/60 text-white/80 hover:bg-black/80 hover:text-white"
+            >
+              <Save className="size-3.5" />
+              {t("hosts.addHost")}
+            </Button>
+          )}
+
        <SimpleLoader
          visible={isConnecting && !isConnectionLogExpanded}
          message={t("terminal.connecting")}
@@ -3092,10 +3135,12 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
            <div
              className="fixed inset-0 flex items-center justify-center z-[10000]"
              style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+              onClick={() => setLinkClickDialog(null)}
            >
              <div
                className="flex flex-col gap-3 p-4 rounded shadow-lg max-w-sm w-full mx-4"
                style={{ backgroundColor }}
+                onClick={(event) => event.stopPropagation()}
              >
                <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
                  {t("terminal.linkDialogTitle")}
@@ -45,7 +45,7 @@ export function TerminalPreview({
  return (
    <div className="border border-input overflow-hidden">
      <div
-        className="p-3 font-mono"
+        className="p-3"
        style={{
          fontSize: `${fontSize}px`,
          fontFamily: fontFallback,
@@ -54,9 +54,9 @@ export function CommandAutocomplete({
            key={index}
            ref={index === selectedIndex ? selectedRef : null}
            className={cn(
-              "px-3 py-1.5 text-sm font-mono cursor-pointer transition-colors",
+              "px-3 py-1.5 text-sm font-mono cursor-pointer transition-colors text-foreground",
              "hover:bg-hover",
-              index === selectedIndex && "bg-surface text-muted-foreground",
+              index === selectedIndex && "bg-accent text-accent-foreground",
            )}
            onClick={() => onSelect(suggestion)}
            onMouseEnter={() => {}}
@@ -0,0 +1,37 @@
+export const TERMINAL_FONT_ZOOM_MIN = 8;
+export const TERMINAL_FONT_ZOOM_MAX = 36;
+
+type ZoomKeyEvent = Pick<
+  KeyboardEvent,
+  "altKey" | "code" | "ctrlKey" | "key" | "metaKey"
+>;
+
+export function getTerminalFontZoomDirection(event: ZoomKeyEvent): -1 | 0 | 1 {
+  if ((!event.ctrlKey && !event.metaKey) || event.altKey) return 0;
+
+  if (
+    event.key === "+" ||
+    event.code === "Equal" ||
+    event.code === "NumpadAdd"
+  ) {
+    return 1;
+  }
+  if (
+    event.key === "-" ||
+    event.code === "Minus" ||
+    event.code === "NumpadSubtract"
+  ) {
+    return -1;
+  }
+  return 0;
+}
+
+export function getNextTerminalFontSize(
+  currentFontSize: number,
+  direction: -1 | 1,
+): number {
+  return Math.min(
+    TERMINAL_FONT_ZOOM_MAX,
+    Math.max(TERMINAL_FONT_ZOOM_MIN, currentFontSize + direction),
+  );
+}
@@ -66,7 +66,6 @@ style.innerHTML = `
 }

 .xterm .xterm-screen {
-  font-family: 'Caskaydia Cove Nerd Font Mono', 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
  font-variant-ligatures: none;
 }

@@ -241,9 +241,10 @@ export function TmuxMonitor({

  // -- relative time refresh --------------------------------------------------
  useEffect(() => {
+    if (!isVisible) return;
    const interval = setInterval(() => setNow(Date.now()), TIME_TICK_MS);
    return () => clearInterval(interval);
-  }, []);
+  }, [isVisible]);

  // -- overview polling -----------------------------------------------------
  const loadOverview = useCallback(
@@ -239,7 +239,14 @@ function TunnelCard({
  );
 }

-export function TunnelTab({ host }: { label: string; host?: DemoHost }) {
+export function TunnelTab({
+  host,
+  isVisible = true,
+}: {
+  label: string;
+  host?: DemoHost;
+  isVisible?: boolean;
+}) {
  const { t } = useTranslation();
  const [sshHost, setSshHost] = useState<SSHHost | null>(null);
  const [tunnelStatuses, setTunnelStatuses] = useState<
@@ -264,14 +271,40 @@ export function TunnelTab({ host }: { label: string; host?: DemoHost }) {
  }, [host]);

  useEffect(() => {
+    if (!isVisible) return;
+
    fetchHost();
-    const interval = setInterval(fetchHost, 5000);
    window.addEventListener("ssh-hosts:changed", fetchHost);
+
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+    const start = () => {
+      if (intervalId !== null) return;
+      // Host config rarely changes; tunnel runtime status uses subscribeTunnelStatuses.
+      intervalId = setInterval(fetchHost, 30_000);
+    };
+    const stop = () => {
+      if (intervalId === null) return;
+      clearInterval(intervalId);
+      intervalId = null;
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") {
+        stop();
+        return;
+      }
+      void fetchHost();
+      start();
+    };
+
+    if (document.visibilityState !== "hidden") start();
+    document.addEventListener("visibilitychange", onVisibility);
+
    return () => {
-      clearInterval(interval);
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
      window.removeEventListener("ssh-hosts:changed", fetchHost);
    };
-  }, [fetchHost]);
+  }, [fetchHost, isVisible]);

  useEffect(() => {
    return subscribeTunnelStatuses(setTunnelStatuses, () => {});
@@ -1,62 +0,0 @@
-import { describe, it, expect } from "vitest";
-import {
-  getTunnelTypeForMode,
-  getTunnelPortLabels,
-  getTunnelModeDescription,
-} from "./tunnel-form-utils.js";
-
-// A fake translate that echoes the key plus any interpolation args so we can
-// assert which translation key + payload the helpers chose.
-const t = (key: string, opts?: Record<string, string | number>) =>
-  opts ? `${key}:${JSON.stringify(opts)}` : key;
-
-describe("getTunnelTypeForMode", () => {
-  it("maps remote to remote and everything else to local", () => {
-    expect(getTunnelTypeForMode("remote")).toBe("remote");
-    expect(getTunnelTypeForMode("local")).toBe("local");
-    expect(getTunnelTypeForMode("dynamic")).toBe("local");
-  });
-});
-
-describe("getTunnelPortLabels", () => {
-  it("labels client local mode source/endpoint ports", () => {
-    const labels = getTunnelPortLabels("client", "local", t);
-    expect(labels.sourcePortLabel).toBe("tunnels.localPort");
-    expect(labels.endpointPortLabel).toBe("tunnels.remotePort");
-  });
-
-  it("swaps labels for client remote mode", () => {
-    const labels = getTunnelPortLabels("client", "remote", t);
-    expect(labels.sourcePortLabel).toBe("tunnels.remotePort");
-    expect(labels.endpointPortLabel).toBe("tunnels.localPort");
-  });
-
-  it("uses host/endpoint labels in server scope", () => {
-    const labels = getTunnelPortLabels("server", "local", t);
-    expect(labels.sourcePortLabel).toBe("tunnels.currentHostPort");
-    expect(labels.endpointPortLabel).toBe("tunnels.endpointPort");
-  });
-});
-
-describe("getTunnelModeDescription", () => {
-  const ports = { sourcePort: 8080, endpointPort: 9090 };
-
-  it("selects the client dynamic description with only the source port", () => {
-    const desc = getTunnelModeDescription("client", "dynamic", ports, t);
-    expect(desc).toContain("tunnels.forwardDescriptionClientDynamic");
-    expect(desc).toContain("8080");
-    expect(desc).not.toContain("9090");
-  });
-
-  it("selects the client local description with both ports", () => {
-    const desc = getTunnelModeDescription("client", "local", ports, t);
-    expect(desc).toContain("tunnels.forwardDescriptionClientLocal");
-    expect(desc).toContain("8080");
-    expect(desc).toContain("9090");
-  });
-
-  it("selects the server remote description", () => {
-    const desc = getTunnelModeDescription("server", "remote", ports, t);
-    expect(desc).toContain("tunnels.forwardDescriptionServerRemote");
-  });
-});