release-2.4.1 (#921)

* chore(deps-dev): bump the dev-minor-updates group across 1 directory with 12 updates (#910) Bumps the dev-minor-updates group with 12 updates in the / directory: | Package | From | To | | --- | --- | --- | | [@radix-ui/react-select](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/select) | `2.2.6` | `2.3.1` | | [@radix-ui/react-slider](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/slider) | `1.3.6` | `1.4.1` | | [@radix-ui/react-slot](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/slot) | `1.2.5` | `1.3.0` | | [@radix-ui/react-switch](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/switch) | `1.2.6` | `1.3.1` | | [cytoscape](https://github.com/cytoscape/cytoscape.js) | `3.33.4` | `3.34.0` | | [electron](https://github.com/electron/electron) | `42.2.0` | `42.4.1` | | [electron-builder](https://github.com/electron-userland/electron-builder/tree/HEAD/packages/electron-builder) | `26.8.1` | `26.15.3` | | [lucide-react](https://github.com/lucide-icons/lucide/tree/HEAD/packages/lucide-react) | `1.16.0` | `1.20.0` | | [radix-ui](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/radix-ui) | `1.4.3` | `1.6.0` | | [react-hook-form](https://github.com/react-hook-form/react-hook-form) | `7.76.1` | `7.79.0` | | [sharp](https://github.com/lovell/sharp) | `0.34.5` | `0.35.1` | | [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/typescript-eslint) | `8.60.0` | `8.61.1` | Updates `@radix-ui/react-select` from 2.2.6 to 2.3.1 - [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-slider` from 1.3.6 to 1.4.1 - [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-slot` from 1.2.5 to 1.3.0 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/slot/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/slot) Updates `@radix-ui/react-switch` from 1.2.6 to 1.3.1 - [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 `cytoscape` from 3.33.4 to 3.34.0 - [Release notes](https://github.com/cytoscape/cytoscape.js/releases) - [Commits](https://github.com/cytoscape/cytoscape.js/compare/v3.33.4...v3.34.0) Updates `electron` from 42.2.0 to 42.4.1 - [Release notes](https://github.com/electron/electron/releases) - [Commits](https://github.com/electron/electron/compare/v42.2.0...v42.4.1) Updates `electron-builder` from 26.8.1 to 26.15.3 - [Release notes](https://github.com/electron-userland/electron-builder/releases) - [Changelog](https://github.com/electron-userland/electron-builder/blob/master/packages/electron-builder/CHANGELOG.md) - [Commits](https://github.com/electron-userland/electron-builder/commits/electron-builder@26.15.3/packages/electron-builder) Updates `lucide-react` from 1.16.0 to 1.20.0 - [Release notes](https://github.com/lucide-icons/lucide/releases) - [Commits](https://github.com/lucide-icons/lucide/commits/1.20.0/packages/lucide-react) Updates `radix-ui` from 1.4.3 to 1.6.0 - [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 `react-hook-form` from 7.76.1 to 7.79.0 - [Release notes](https://github.com/react-hook-form/react-hook-form/releases) - [Changelog](https://github.com/react-hook-form/react-hook-form/blob/master/CHANGELOG.md) - [Commits](https://github.com/react-hook-form/react-hook-form/compare/v7.76.1...v7.79.0) Updates `sharp` from 0.34.5 to 0.35.1 - [Release notes](https://github.com/lovell/sharp/releases) - [Commits](https://github.com/lovell/sharp/compare/v0.34.5...v0.35.1) Updates `typescript-eslint` from 8.60.0 to 8.61.1 - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/typescript-eslint/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.61.1/packages/typescript-eslint) --- updated-dependencies: - dependency-name: "@radix-ui/react-select" dependency-version: 2.3.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-slider" dependency-version: 1.4.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-slot" dependency-version: 1.3.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-switch" dependency-version: 1.3.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: cytoscape dependency-version: 3.34.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: electron dependency-version: 42.4.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: electron-builder dependency-version: 26.15.3 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: lucide-react dependency-version: 1.18.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: radix-ui dependency-version: 1.6.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: react-hook-form dependency-version: 7.79.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: sharp dependency-version: 0.35.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: typescript-eslint dependency-version: 8.61.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump node in /docker in the docker-major-updates group (#914) 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> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ci(deps): bump the github-actions group with 2 updates (#915) Bumps the github-actions group with 2 updates: [actions/checkout](https://github.com/actions/checkout) and [actions/setup-node](https://github.com/actions/setup-node). Updates `actions/checkout` from 5 to 6 - [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/v5...v6) Updates `actions/setup-node` from 4 to 6 - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v4...v6) --- updated-dependencies: - dependency-name: actions/checkout dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major dependency-group: github-actions - dependency-name: actions/setup-node dependency-version: '6' 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): bump the prod-minor-updates group across 1 directory with 5 updates (#916) Bumps the prod-minor-updates group with 5 updates in the / directory: | Package | From | To | | --- | --- | --- | | [axios](https://github.com/axios/axios) | `1.17.0` | `1.18.0` | | [better-sqlite3](https://github.com/WiseLibs/better-sqlite3) | `12.10.0` | `12.11.1` | | [body-parser](https://github.com/expressjs/body-parser) | `2.2.2` | `2.3.0` | | [multer](https://github.com/expressjs/multer) | `2.1.1` | `2.2.0` | | [undici](https://github.com/nodejs/undici) | `8.4.0` | `8.5.0` | Updates `axios` from 1.17.0 to 1.18.0 - [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.17.0...v1.18.0) Updates `better-sqlite3` from 12.10.0 to 12.11.1 - [Release notes](https://github.com/WiseLibs/better-sqlite3/releases) - [Commits](https://github.com/WiseLibs/better-sqlite3/compare/v12.10.0...v12.11.1) Updates `body-parser` from 2.2.2 to 2.3.0 - [Release notes](https://github.com/expressjs/body-parser/releases) - [Changelog](https://github.com/expressjs/body-parser/blob/master/HISTORY.md) - [Commits](https://github.com/expressjs/body-parser/compare/v2.2.2...v2.3.0) Updates `multer` from 2.1.1 to 2.2.0 - [Release notes](https://github.com/expressjs/multer/releases) - [Changelog](https://github.com/expressjs/multer/blob/main/CHANGELOG.md) - [Commits](https://github.com/expressjs/multer/compare/v2.1.1...v2.2.0) Updates `undici` from 8.4.0 to 8.5.0 - [Release notes](https://github.com/nodejs/undici/releases) - [Commits](https://github.com/nodejs/undici/compare/v8.4.0...v8.5.0) --- updated-dependencies: - dependency-name: axios dependency-version: 1.18.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: better-sqlite3 dependency-version: 12.11.1 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: body-parser dependency-version: 2.3.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: multer dependency-version: 2.2.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: undici dependency-version: 8.5.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: add unlink button for dual auth * fix: general bug fixes * fix: general qol/small feature additions * fix: 100mb max upload size * fix: terminal syntax not handling carriage returns or shell prompt lines properly * feat: continued general improvements * fix: terminal outputting success right after folder path * chore: update release notes * feat: continued fixes and improvements * chore: lint, format, and bump version to 2.4.1 * chore: sync Crowdin translations for 2.4.1 * fix: rebase dev branch onto main before Crowdin download * fix: use merge instead of rebase to sync main before Crowdin --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-08-29 18:31:33 +00:00 · 2026-06-21 15:55:41 -05:00
parent 8072b4ede9
commit d1a8dcf3c6
165 changed files with 87244 additions and 60766 deletions
@@ -57,11 +57,37 @@ import type { SSHHostData } from "@/types/index";
 import { FolderIconEl } from "@/components/folder-style";
 import { copyToClipboard } from "@/lib/clipboard";
 import { FolderMetadataDialog } from "./FolderMetadataDialog";
+import {
+  useStatusColorScheme,
+  getStatusClasses,
+} from "@/hooks/use-status-color-scheme";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/tooltip";

 export function isFolder(item: Host | HostFolder): item is HostFolder {
  return "children" in item;
 }

+function statusCheckEnabled(host: Host): boolean {
+  return host.statsConfig?.statusCheckEnabled !== false;
+}
+
+function buildStatusTooltip(host: Host, online: boolean): string {
+  const statusLabel = online ? "Online" : "Offline";
+  if (!statusCheckEnabled(host)) return "Monitoring disabled";
+  const protocols: string[] = [];
+  if (host.enableSsh) protocols.push("SSH");
+  if (host.enableRdp) protocols.push("RDP");
+  if (host.enableVnc) protocols.push("VNC");
+  if (host.enableTelnet) protocols.push("Telnet");
+  if (protocols.length === 0) return statusLabel;
+  return `${protocols.join(", ")}: ${statusLabel}`;
+}
+
 function getSshActions(
  host: Host,
 ): { type: TabType; icon: typeof Terminal; label: string }[] {
@@ -273,6 +299,10 @@ export function HostItem({
    const v = localStorage.getItem("showHostTags");
    return v !== null ? v === "true" : true;
  });
+  const [compactHostView, setCompactHostView] = useState(
+    () => localStorage.getItem("compactHostView") === "true",
+  );
+  const statusScheme = useStatusColorScheme();
  const isTouchOnly =
    typeof window !== "undefined" && window.matchMedia("(hover: none)").matches;
  const shouldUseClickTray = trayOnClick || isTouchOnly;
@@ -322,8 +352,521 @@ export function HostItem({
    };
  }, []);

+  useEffect(() => {
+    const handler = () =>
+      setCompactHostView(localStorage.getItem("compactHostView") === "true");
+    window.addEventListener("storage", handler);
+    window.addEventListener("compactHostViewChanged", handler);
+    return () => {
+      window.removeEventListener("storage", handler);
+      window.removeEventListener("compactHostViewChanged", handler);
+    };
+  }, []);
+
  if (query && !hostMatchesQuery(host, query)) return null;

+  if (compactHostView) {
+    return (
+      <div
+        draggable={!selectionMode && !isTouchOnly}
+        onDragStart={(e) => {
+          e.dataTransfer.effectAllowed = "move";
+          onDragStart?.();
+        }}
+        onDragEnd={() => onDragEnd?.()}
+        className={`group relative flex items-stretch cursor-pointer select-none transition-colors hover:bg-muted/40 ${
+          selected
+            ? "bg-accent-brand/5"
+            : stripeIndex % 2 === 1
+              ? "bg-muted/20"
+              : ""
+        } ${isMenuOpen ? "bg-muted/40" : ""}`}
+        onClick={(e) => {
+          if (selectionMode) {
+            onToggleSelect?.();
+            return;
+          }
+          if (isTouchOnly) {
+            e.stopPropagation();
+            const actionCount = getSshActions(host).length;
+            const otherProtocols = [
+              host.enableRdp,
+              host.enableVnc,
+              host.enableTelnet,
+            ].filter(Boolean).length;
+            if (actionCount + otherProtocols <= 1) {
+              if (host.enableSsh) onOpenTab("terminal");
+              else if (host.enableRdp) onOpenTab("rdp");
+              else if (host.enableVnc) onOpenTab("vnc");
+              else if (host.enableTelnet) onOpenTab("telnet");
+              else onOpenTab("terminal");
+            } else {
+              onTrayOpenChange?.(!isTrayOpen);
+            }
+            return;
+          }
+          if (host.enableSsh) onOpenTab("terminal");
+          else if (host.enableRdp) onOpenTab("rdp");
+          else if (host.enableVnc) onOpenTab("vnc");
+          else if (host.enableTelnet) onOpenTab("telnet");
+          else onOpenTab("terminal");
+        }}
+      >
+        <div
+          className={`w-[3px] shrink-0 transition-colors ${getStatusClasses(host.online, statusScheme, "stripe")}`}
+        />
+        <div className="flex flex-col min-w-0 flex-1">
+          <div className="flex items-center gap-1.5 min-w-0 px-2.5 py-1">
+            {selectionMode && (
+              <div
+                className={`size-3.5 border-2 flex items-center justify-center shrink-0 transition-colors ${selected ? "border-accent-brand bg-accent-brand" : "border-border bg-background"}`}
+              >
+                {selected && <Check className="size-2 text-background" />}
+              </div>
+            )}
+            <TooltipProvider delayDuration={300}>
+              <Tooltip>
+                <TooltipTrigger className="flex items-center">
+                  <span
+                    className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host.online, statusScheme, "dot")}`}
+                  />
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  {buildStatusTooltip(host, host.online)}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <span className="text-[13px] font-medium truncate text-foreground leading-none">
+              {host.name}
+            </span>
+            {!selectionMode && shouldUseClickTray && (
+              <button
+                title={
+                  isTrayOpen
+                    ? t("hosts.collapseActions")
+                    : t("hosts.expandActions")
+                }
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTrayOpenChange?.(!isTrayOpen);
+                }}
+                className="ml-auto flex items-center justify-center size-5 rounded text-muted-foreground/30 hover:text-muted-foreground hover:bg-muted-foreground/10 transition-colors shrink-0"
+              >
+                <ChevronRight
+                  className={`size-3 transition-transform duration-150 ${isTrayOpen ? "rotate-90" : ""}`}
+                />
+              </button>
+            )}
+            {!selectionMode && !shouldUseClickTray && (
+              <span className="text-[11px] text-muted-foreground/45 truncate leading-none ml-auto shrink-0 group-hover:hidden">
+                {host.ip}
+              </span>
+            )}
+            {selectionMode && (
+              <span className="text-[11px] text-muted-foreground/45 truncate leading-none ml-auto shrink-0">
+                {host.ip}
+              </span>
+            )}
+          </div>
+
+          {/* Click-tray mode: always-visible action buttons */}
+          {shouldUseClickTray && !selectionMode && (
+            <div
+              className={`overflow-hidden transition-all duration-150 ease-out ${isTrayOpen || isMenuOpen ? "max-h-[200px] opacity-100" : "max-h-0 opacity-0"}`}
+            >
+              <div className="flex items-center flex-wrap gap-1 px-2 pb-1">
+                {getSshActions(host).map(({ type, icon: Icon, label }) => (
+                  <button
+                    key={type}
+                    title={label}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenTab(type);
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Icon className="size-3.5" />
+                  </button>
+                ))}
+                {host.enableSsh &&
+                  (host.enableRdp || host.enableVnc || host.enableTelnet) &&
+                  getSshActions(host).length > 0 && (
+                    <div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
+                  )}
+                {host.enableRdp && (
+                  <button
+                    title="RDP"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenTab("rdp");
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Monitor className="size-3.5" />
+                  </button>
+                )}
+                {host.enableVnc && (
+                  <button
+                    title="VNC"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenTab("vnc");
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <MousePointerClick className="size-3.5" />
+                  </button>
+                )}
+                {host.enableTelnet && (
+                  <button
+                    title="Telnet"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenTab("telnet");
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <MessagesSquare className="size-3.5" />
+                  </button>
+                )}
+                {host.macAddress && (
+                  <button
+                    title={t("hosts.wakeOnLanAction")}
+                    onClick={async (e) => {
+                      e.stopPropagation();
+                      try {
+                        await wakeOnLan(host.id);
+                        toast.success(
+                          t("hosts.wakeOnLanSuccess", { name: host.name }),
+                        );
+                      } catch {
+                        toast.error(t("hosts.wakeOnLanError"));
+                      }
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Zap className="size-3.5" />
+                  </button>
+                )}
+                <div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
+                {showPasswordCopy && (
+                  <button
+                    title={t("nav.copyPassword")}
+                    onClick={(e) => handleCopyPassword(e, "password")}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Key className="size-3.5" />
+                  </button>
+                )}
+                {showSudoPasswordCopy && (
+                  <button
+                    title={t("nav.copySudoPassword")}
+                    onClick={(e) => handleCopyPassword(e, "sudoPassword")}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <KeyRound className="size-3.5" />
+                  </button>
+                )}
+                {onEditHost && (
+                  <button
+                    title="Edit Host"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onEditHost();
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Pencil className="size-3.5" />
+                  </button>
+                )}
+                {onShareHost && (
+                  <button
+                    title={t("hosts.shareHost")}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onShareHost();
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Share2 className="size-3.5" />
+                  </button>
+                )}
+                {host.enableProxmox && onProxmoxDiscover && (
+                  <button
+                    title={t("hosts.proxmoxDiscoverAction")}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onProxmoxDiscover();
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Boxes className="size-3.5" />
+                  </button>
+                )}
+                <DropdownMenu open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      title="More options"
+                      onClick={(e) => e.stopPropagation()}
+                      className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                    >
+                      <MoreHorizontal className="size-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="text-xs">
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        writeClipboardText(`${host.username}@${host.ip}`);
+                        toast.success(t("hosts.copiedToClipboard"));
+                      }}
+                    >
+                      <Copy className="size-3.5 mr-2" />
+                      {t("hosts.copyAddress")}
+                    </DropdownMenuItem>
+                    {showPasswordCopy && (
+                      <DropdownMenuItem
+                        onClick={(e) => handleCopyPassword(e, "password")}
+                      >
+                        <Key className="size-3.5 mr-2" />
+                        {t("nav.copyPassword")}
+                      </DropdownMenuItem>
+                    )}
+                    {showSudoPasswordCopy && (
+                      <DropdownMenuItem
+                        onClick={(e) => handleCopyPassword(e, "sudoPassword")}
+                      >
+                        <KeyRound className="size-3.5 mr-2" />
+                        {t("nav.copySudoPassword")}
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDuplicate();
+                      }}
+                    >
+                      <CopyPlus className="size-3.5 mr-2" />
+                      {t("hosts.cloneHostAction")}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      className="text-destructive focus:text-destructive"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete();
+                      }}
+                    >
+                      <Trash2 className="size-3.5 mr-2" />
+                      {t("common.delete")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          )}
+
+          {/* Hover tray (non-click-tray mode) */}
+          {!shouldUseClickTray && !selectionMode && (
+            <div className="max-h-0 opacity-0 overflow-hidden transition-all duration-150 ease-out group-hover:max-h-[200px] group-hover:opacity-100">
+              <div className="flex items-center flex-wrap gap-1 px-2 pb-1">
+                {getSshActions(host).map(({ type, icon: Icon, label }) => (
+                  <button
+                    key={type}
+                    title={label}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenTab(type);
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Icon className="size-3.5" />
+                  </button>
+                ))}
+                {host.enableSsh &&
+                  (host.enableRdp || host.enableVnc || host.enableTelnet) &&
+                  getSshActions(host).length > 0 && (
+                    <div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
+                  )}
+                {host.enableRdp && (
+                  <button
+                    title="RDP"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenTab("rdp");
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Monitor className="size-3.5" />
+                  </button>
+                )}
+                {host.enableVnc && (
+                  <button
+                    title="VNC"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenTab("vnc");
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <MousePointerClick className="size-3.5" />
+                  </button>
+                )}
+                {host.enableTelnet && (
+                  <button
+                    title="Telnet"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenTab("telnet");
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <MessagesSquare className="size-3.5" />
+                  </button>
+                )}
+                {host.macAddress && (
+                  <button
+                    title={t("hosts.wakeOnLanAction")}
+                    onClick={async (e) => {
+                      e.stopPropagation();
+                      try {
+                        await wakeOnLan(host.id);
+                        toast.success(
+                          t("hosts.wakeOnLanSuccess", { name: host.name }),
+                        );
+                      } catch {
+                        toast.error(t("hosts.wakeOnLanError"));
+                      }
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Zap className="size-3.5" />
+                  </button>
+                )}
+                <div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
+                {showPasswordCopy && (
+                  <button
+                    title={t("nav.copyPassword")}
+                    onClick={(e) => handleCopyPassword(e, "password")}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Key className="size-3.5" />
+                  </button>
+                )}
+                {showSudoPasswordCopy && (
+                  <button
+                    title={t("nav.copySudoPassword")}
+                    onClick={(e) => handleCopyPassword(e, "sudoPassword")}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <KeyRound className="size-3.5" />
+                  </button>
+                )}
+                {onEditHost && (
+                  <button
+                    title="Edit Host"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onEditHost();
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Pencil className="size-3.5" />
+                  </button>
+                )}
+                {onShareHost && (
+                  <button
+                    title={t("hosts.shareHost")}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onShareHost();
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Share2 className="size-3.5" />
+                  </button>
+                )}
+                {host.enableProxmox && onProxmoxDiscover && (
+                  <button
+                    title={t("hosts.proxmoxDiscoverAction")}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onProxmoxDiscover();
+                    }}
+                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                  >
+                    <Boxes className="size-3.5" />
+                  </button>
+                )}
+                <DropdownMenu open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      title="More options"
+                      onClick={(e) => e.stopPropagation()}
+                      className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                    >
+                      <MoreHorizontal className="size-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="text-xs">
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        writeClipboardText(`${host.username}@${host.ip}`);
+                        toast.success(t("hosts.copiedToClipboard"));
+                      }}
+                    >
+                      <Copy className="size-3.5 mr-2" />
+                      {t("hosts.copyAddress")}
+                    </DropdownMenuItem>
+                    {showPasswordCopy && (
+                      <DropdownMenuItem
+                        onClick={(e) => handleCopyPassword(e, "password")}
+                      >
+                        <Key className="size-3.5 mr-2" />
+                        {t("nav.copyPassword")}
+                      </DropdownMenuItem>
+                    )}
+                    {showSudoPasswordCopy && (
+                      <DropdownMenuItem
+                        onClick={(e) => handleCopyPassword(e, "sudoPassword")}
+                      >
+                        <KeyRound className="size-3.5 mr-2" />
+                        {t("nav.copySudoPassword")}
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDuplicate();
+                      }}
+                    >
+                      <CopyPlus className="size-3.5 mr-2" />
+                      {t("hosts.cloneHostAction")}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      className="text-destructive focus:text-destructive"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete();
+                      }}
+                    >
+                      <Trash2 className="size-3.5 mr-2" />
+                      {t("common.delete")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
  return (
    <div
      draggable={!selectionMode && !isTouchOnly}
@@ -373,7 +916,7 @@ export function HostItem({
    >
      {/* Status stripe */}
      <div
-        className={`w-[3px] shrink-0 transition-colors ${host.online ? "bg-accent-brand" : "bg-transparent"}`}
+        className={`w-[3px] shrink-0 transition-colors ${getStatusClasses(host.online, statusScheme, "stripe")}`}
      />

      <div className="flex flex-col flex-1 min-w-0 px-2.5 pt-2 pb-1.5 gap-1">
@@ -386,9 +929,18 @@ export function HostItem({
              {selected && <Check className="size-2 text-background" />}
            </div>
          )}
-          <span
-            className={`size-1.5 rounded-full shrink-0 ${host.online ? "bg-accent-brand" : "bg-muted-foreground/25"}`}
-          />
+          <TooltipProvider delayDuration={300}>
+            <Tooltip>
+              <TooltipTrigger className="flex items-center">
+                <span
+                  className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host.online, statusScheme, "dot")}`}
+                />
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                {buildStatusTooltip(host, host.online)}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
          <span className="text-[13px] font-medium truncate text-foreground leading-none">
            {host.name}
          </span>
@@ -1309,11 +1861,14 @@ export function SidebarTree({
        pin: host.pin ?? false,
        notes: host.notes,
        macAddress: host.macAddress,
-        authType: host.authType,
-        password: host.password ?? null,
-        key: host.key ?? null,
-        keyPassword: host.keyPassword ?? null,
-        keyType: host.keyType ?? null,
+        // Key material is never sent to the frontend, so a cloned key-auth
+        // host would have authType "key" with no key — unusable. Reset to
+        // password so the clone is in a connectable (editable) state.
+        authType: host.authType === "key" ? "password" : host.authType,
+        password: host.authType === "key" ? null : (host.password ?? null),
+        key: null,
+        keyPassword: null,
+        keyType: null,
        credentialId: host.credentialId ? Number(host.credentialId) : null,
        overrideCredentialUsername: host.overrideCredentialUsername ?? false,
        enableSsh: host.enableSsh,
@@ -1654,6 +2209,26 @@ export function SidebarTree({
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
+            <button
+              className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors flex items-center gap-1 disabled:opacity-40"
+              disabled={selectedHostIds.size === 0}
+              onClick={() => {
+                const selectedHosts = allHosts.filter((h) =>
+                  selectedHostIds.has(String(h.id)),
+                );
+                for (const host of selectedHosts) {
+                  if (host.enableSsh) onOpenTab(host, "terminal");
+                  else if (host.enableRdp) onOpenTab(host, "rdp");
+                  else if (host.enableVnc) onOpenTab(host, "vnc");
+                  else if (host.enableTelnet) onOpenTab(host, "telnet");
+                }
+                setSelectedHostIds(new Set());
+                onToggleSelectionMode();
+              }}
+            >
+              <Terminal className="size-3" />
+              {t("hosts.connectSelected")}
+            </button>
            <button
              className="text-[10px] text-destructive hover:text-destructive px-1.5 py-1 hover:bg-destructive/10 rounded transition-colors disabled:opacity-40"
              disabled={selectedHostIds.size === 0}