feat: readd mange mode for host manager, guacd toolbar improvements, connection issues, etc.

src/main.tsx

@@ -12,6 +12,7 @@ import { getUserInfo, getCurrentToken, appReadyPromise } from "@/main-axios";
 import { applyAccentColor, applyFontSize } from "@/lib/theme";
 import type { FontSizeId } from "@/types/ui-types";
 import { useServiceWorker } from "@/hooks/use-service-worker";
+import { useTranslation } from "react-i18next";
 
 const AppShell = lazy(() =>
   import("@/AppShell").then((m) => ({ default: m.AppShell })),
@@ -177,19 +178,36 @@ function App() {
   const appOpacity = phase === "idle-app" ? 1 : 0;
   const authOpacity = phase === "idle-auth" ? 1 : 0;
 
+  const { t } = useTranslation();
+  const isTransitioning = phase === "fading-in" || phase === "fading-out";
+
   if (phase === "verifying") {
     return (
       <div className="fixed inset-0 flex items-center justify-center bg-background">
-        <div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+          <p className="text-sm text-muted-foreground">{t("common.loading")}</p>
+        </div>
       </div>
     );
   }
 
   return (
     <>
+      {isTransitioning && (
+        <div className="fixed inset-0 z-0 flex items-center justify-center bg-background">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+            <p className="text-sm text-muted-foreground">
+              {t("common.loading")}
+            </p>
+          </div>
+        </div>
+      )}
+
       {showApp && (
         <div
-          className="fixed inset-0 z-0 transition-opacity duration-[450ms] ease-in-out"
+          className="fixed inset-0 z-10 transition-opacity duration-[450ms] ease-in-out"
           style={{
             opacity: appOpacity,
             pointerEvents: phase === "idle-app" ? "auto" : "none",
@@ -203,7 +221,7 @@ function App() {
 
       {showAuth && (
         <div
-          className="fixed inset-0 z-10 transition-opacity duration-[450ms] ease-in-out"
+          className="fixed inset-0 z-20 transition-opacity duration-[450ms] ease-in-out"
           style={{
             opacity: authOpacity,
             pointerEvents: phase === "idle-auth" ? "auto" : "none",

src/types/ui-types.ts

@@ -187,6 +187,7 @@ export type Tab = {
   host?: Host;
   terminalRef?: import("react").RefObject<{
     sendInput?: (data: string) => void;
+    reconnect?: () => void;
   } | null>;
 };
 

src/ui/AppShell.tsx

@@ -398,6 +398,19 @@ export function AppShell({
     });
   }
 
+  function refreshTab(id: string) {
+    const tab = tabs.find((t) => t.id === id);
+    if (!tab) return;
+    if (tab.type === "terminal") {
+      const ref = tab.terminalRef?.current;
+      ref?.reconnect?.();
+    } else if (["rdp", "vnc", "telnet"].includes(tab.type)) {
+      window.dispatchEvent(
+        new CustomEvent("termix:refresh-guacamole", { detail: { tabId: id } }),
+      );
+    }
+  }
+
   function closeTab(id: string) {
     const tab = tabs.find((t) => t.id === id);
     const confirmEnabled = localStorage.getItem("confirmTabClose") === "true";
@@ -556,7 +569,7 @@ export function AppShell({
           <Button
             variant="ghost"
             size="icon"
-            className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
+            className="h-full w-12.5 border-y-0 border-border rounded-none text-muted-foreground hover:text-foreground"
             title="Reset width"
             onClick={() => setSidebarWidth(266)}
           >
@@ -647,6 +660,7 @@ export function AppShell({
               activeTabId={activeTabId}
               onSetActiveTab={setActiveTabId}
               onCloseTab={closeTab}
+              onRefreshTab={refreshTab}
               onReorderTabs={setTabs}
             />
             <div className="relative flex flex-col flex-1 min-h-0 overflow-hidden">

src/ui/features/guacamole/GuacamoleApp.tsx

@@ -14,9 +14,10 @@ import type { SSHHost } from "@/types";
 
 interface GuacamoleAppProps {
   hostId?: string;
+  tabId?: string;
 }
 
-const GuacamoleApp: React.FC<GuacamoleAppProps> = ({ hostId }) => {
+const GuacamoleApp: React.FC<GuacamoleAppProps> = ({ hostId, tabId }) => {
   const { t } = useTranslation();
 
   return (
@@ -74,6 +75,7 @@ const GuacamoleApp: React.FC<GuacamoleAppProps> = ({ hostId }) => {
           <GuacamoleAppInner
             hostId={parseInt(hostId, 10)}
             hostConfig={hostConfig}
+            tabId={tabId}
           />
         );
       }}
@@ -84,11 +86,13 @@ const GuacamoleApp: React.FC<GuacamoleAppProps> = ({ hostId }) => {
 interface GuacamoleAppInnerProps {
   hostId: number;
   hostConfig: Pick<SSHHost, "connectionType">;
+  tabId?: string;
 }
 
 const GuacamoleAppInner: React.FC<GuacamoleAppInnerProps> = ({
   hostId,
   hostConfig,
+  tabId,
 }) => {
   const { t } = useTranslation();
   const [token, setToken] = useState<string | null>(null);
@@ -121,6 +125,17 @@ const GuacamoleAppInner: React.FC<GuacamoleAppInnerProps> = ({
     setRetryCount((c) => c + 1);
   }, []);
 
+  useEffect(() => {
+    if (!tabId) return;
+    const handler = (e: Event) => {
+      const { tabId: eventTabId } = (e as CustomEvent).detail;
+      if (eventTabId === tabId) handleReconnect();
+    };
+    window.addEventListener("termix:refresh-guacamole", handler);
+    return () =>
+      window.removeEventListener("termix:refresh-guacamole", handler);
+  }, [tabId, handleReconnect]);
+
   if (error) {
     return (
       <div

src/ui/features/guacamole/GuacamoleDisplay.tsx

@@ -10,8 +10,6 @@ import Guacamole from "guacamole-common-js";
 import { useTranslation } from "react-i18next";
 import { getGuacamoleToken, isElectron, isEmbeddedMode } from "@/main-axios.ts";
 import { SimpleLoader } from "@/lib/SimpleLoader.tsx";
-import { WifiOff, RefreshCw } from "lucide-react";
-import { Button } from "@/components/button.tsx";
 
 export type GuacamoleConnectionType = "rdp" | "vnc" | "telnet";
 
@@ -67,7 +65,6 @@ export const GuacamoleDisplay = forwardRef<
     typeof document === "undefined" ? true : document.hasFocus(),
   );
   const [isReady, setIsReady] = useState(false);
-  const [connectionError, setConnectionError] = useState<string | null>(null);
 
   useImperativeHandle(ref, () => ({
     disconnect: () => {
@@ -270,14 +267,19 @@ export const GuacamoleDisplay = forwardRef<
     if (isConnectingRef.current) return;
     isConnectingRef.current = true;
     setIsReady(false);
-    setConnectionError(null);
 
-    let containerWidth = containerRef.current?.clientWidth || 0;
+    // Wait two frames so the container is fully laid out before measuring.
-    let containerHeight = containerRef.current?.clientHeight || 0;
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+    );
+
+    const rect = containerRef.current?.getBoundingClientRect();
+    let containerWidth = rect?.width || 0;
+    let containerHeight = rect?.height || 0;
 
     if (containerWidth < 100 || containerHeight < 100) {
-      containerWidth = 1280;
+      containerWidth = window.innerWidth || 1280;
-      containerHeight = 720;
+      containerHeight = window.innerHeight || 720;
     }
 
     const wsUrl = await getWebSocketUrl(containerWidth, containerHeight);
@@ -307,6 +309,11 @@ export const GuacamoleDisplay = forwardRef<
       setIsReady(true);
     };
 
+    const protocol = connectionConfig.protocol ?? connectionConfig.type;
+    if (protocol === "telnet") {
+      setIsReady(true);
+    }
+
     const mouse = new Guacamole.Mouse(displayElement);
     const sendMouseState = (state: Guacamole.Mouse.State) => {
       displayElement.focus({ preventScroll: true });
@@ -358,6 +365,12 @@ export const GuacamoleDisplay = forwardRef<
           isConnectingRef.current = false;
           setIsReady(true);
           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);
+          }
           break;
         case 4:
           break;
@@ -373,7 +386,6 @@ export const GuacamoleDisplay = forwardRef<
     client.onerror = (error: Guacamole.Status) => {
       const errorMessage = error.message || t("guacamole.connectionError");
       setIsReady(false);
-      setConnectionError(errorMessage);
       isConnectingRef.current = false;
       onError?.(errorMessage);
     };
@@ -432,11 +444,7 @@ export const GuacamoleDisplay = forwardRef<
 
     if (isVisible && !hasInitiatedRef.current) {
       hasInitiatedRef.current = true;
-      requestAnimationFrame(() => {
+      connect();
-        if (isMountedRef.current) {
-          connect();
-        }
-      });
     }
   }, [isVisible, connect]);
 
@@ -500,26 +508,23 @@ export const GuacamoleDisplay = forwardRef<
     if (!containerRef.current) return;
 
     const resizeObserver = new ResizeObserver(() => {
-      rescaleDisplay(false);
       if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
       resizeTimeoutRef.current = setTimeout(() => {
         if (clientRef.current && containerRef.current) {
-          const w = containerRef.current.clientWidth;
+          const rect = containerRef.current.getBoundingClientRect();
-          const h = containerRef.current.clientHeight;
+          const w = Math.round(rect.width);
+          const h = Math.round(rect.height);
           if (w > 0 && h > 0) clientRef.current.sendSize(w, h);
         }
-      }, 200);
+      }, 150);
     });
 
     resizeObserver.observe(containerRef.current);
 
-    const initialTimeout = setTimeout(() => rescaleDisplay(true), 100);
-
     return () => {
       resizeObserver.disconnect();
-      clearTimeout(initialTimeout);
     };
-  }, [rescaleDisplay]);
+  }, []);
 
   const syncClipboard = useCallback(() => {
     const client = clientRef.current;
@@ -555,18 +560,6 @@ export const GuacamoleDisplay = forwardRef<
     };
   }, [isReady, syncClipboard]);
 
-  const handleReconnect = useCallback(() => {
-    setConnectionError(null);
-    hasInitiatedRef.current = false;
-    isConnectingRef.current = false;
-    if (clientRef.current) {
-      clientRef.current.disconnect();
-      clientRef.current = null;
-    }
-    displayElementRef.current = null;
-    connect();
-  }, [connect]);
-
   const connectingMessage = t("guacamole.connecting", {
     type: (
       connectionConfig.protocol ||
@@ -590,32 +583,7 @@ export const GuacamoleDisplay = forwardRef<
         }}
       />
 
-      {connectionError ? (
+      <SimpleLoader visible={!isReady} message={connectingMessage} />
-        <div
-          className="absolute inset-0 flex flex-col items-center justify-center gap-4 z-[100]"
-          style={{ backgroundColor: "var(--bg-base)" }}
-        >
-          <WifiOff className="size-10" style={{ color: "var(--foreground)" }} />
-          <p
-            className="text-sm font-semibold"
-            style={{ color: "var(--foreground)" }}
-          >
-            {t("guacamole.connectionFailed")}
-          </p>
-          <p
-            className="text-xs max-w-xs text-center"
-            style={{ color: "var(--foreground-secondary)" }}
-          >
-            {connectionError}
-          </p>
-          <Button variant="outline" size="sm" onClick={handleReconnect}>
-            <RefreshCw className="size-4 mr-2" />
-            {t("guacamole.reconnect")}
-          </Button>
-        </div>
-      ) : (
-        <SimpleLoader visible={!isReady} message={connectingMessage} />
-      )}
     </div>
   );
 });

src/ui/features/guacamole/GuacamoleToolbar.tsx

@@ -8,7 +8,6 @@ import React, {
 import {
   GripVertical,
   Monitor,
-  RefreshCw,
   ChevronLeft,
   ChevronRight,
   ChevronUp,
@@ -240,247 +239,239 @@ export const GuacamoleToolbar: React.FC<GuacamoleToolbarProps> = ({
     zIndex: 20,
   };
 
-  if (collapsed) {
-    return (
-      <div
-        ref={toolbarRef}
-        style={containerStyle}
-        onMouseDown={(e) => e.preventDefault()}
-      >
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="flex items-center bg-background/85 backdrop-blur-sm border border-border shadow-lg rounded-sm overflow-hidden">
-              <button
-                type="button"
-                onMouseDown={startDrag}
-                className="flex items-center justify-center size-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-grab active:cursor-grabbing"
-              >
-                <GripVertical className="size-3" />
-              </button>
-              <div className="w-px h-4 bg-border" />
-              <button
-                type="button"
-                onClick={() => setCollapsed(false)}
-                className="flex items-center justify-center size-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-                title={t("guacamole.toolbar.expand")}
-              >
-                <Monitor className="size-3.5" />
-              </button>
-            </div>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" sideOffset={6}>
-            {t("guacamole.toolbar.expand")}
-          </TooltipContent>
-        </Tooltip>
-      </div>
-    );
-  }
-
   return (
     <TooltipProvider delayDuration={500}>
       <div
         ref={toolbarRef}
         style={containerStyle}
         onMouseDown={(e) => e.preventDefault()}
-        className="flex items-center bg-background/85 backdrop-blur-sm border border-border shadow-lg rounded-sm px-0.5 py-0.5 gap-0"
       >
-        {/* Drag handle */}
+        {collapsed ? (
-        <Tooltip>
+          <Tooltip>
-          <TooltipTrigger asChild>
+            <TooltipTrigger asChild>
-            <button
+              <div className="flex items-center bg-background/85 backdrop-blur-sm border border-border shadow-lg rounded-sm overflow-hidden">
-              type="button"
+                <button
-              onMouseDown={startDrag}
+                  type="button"
-              className="flex items-center justify-center h-7 px-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors rounded-sm cursor-grab active:cursor-grabbing"
+                  onMouseDown={startDrag}
-            >
+                  className="flex items-center justify-center size-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-grab active:cursor-grabbing"
-              <GripVertical className="size-3.5" />
+                >
-            </button>
+                  <GripVertical className="size-3" />
-          </TooltipTrigger>
+                </button>
-          <TooltipContent side="bottom" sideOffset={6}>
+                <div className="w-px h-4 bg-border" />
-            {t("guacamole.toolbar.dragHandle")}
+                <button
-          </TooltipContent>
+                  type="button"
-        </Tooltip>
+                  onClick={() => setCollapsed(false)}
+                  className="flex items-center justify-center size-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                >
+                  <Monitor className="size-3.5" />
+                </button>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>
+              {t("guacamole.toolbar.expand")}
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <div className="flex items-center bg-background/85 backdrop-blur-sm border border-border shadow-lg rounded-sm px-0.5 py-0.5 gap-0">
+            {/* Drag handle */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onMouseDown={startDrag}
+                  className="flex items-center justify-center h-7 px-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors rounded-sm cursor-grab active:cursor-grabbing"
+                >
+                  <GripVertical className="size-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" sideOffset={6}>
+                {t("guacamole.toolbar.dragHandle")}
+              </TooltipContent>
+            </Tooltip>
 
-        {/* System combos — RDP/VNC only */}
+            {/* System combos — RDP/VNC only */}
-        {isRdpVnc && (
+            {isRdpVnc && (
-          <>
+              <>
+                <div className={SEP} />
+                <TipBtn
+                  tooltip={t("guacamole.toolbar.ctrlAltDel")}
+                  onClick={() => sendCombo(0xffe3, 0xffe9, 0xffff)}
+                >
+                  CAD
+                </TipBtn>
+                <TipBtn
+                  tooltip={t("guacamole.toolbar.winL")}
+                  onClick={() => sendCombo(0xff67, 0x006c)}
+                >
+                  Win+L
+                </TipBtn>
+                <TipBtn
+                  tooltip={t("guacamole.toolbar.winKey")}
+                  onClick={() => sendCombo(0xff67)}
+                >
+                  Win
+                </TipBtn>
+              </>
+            )}
+
+            {/* Sticky modifiers — RDP/VNC only */}
+            {isRdpVnc && (
+              <>
+                <div className={SEP} />
+                {(
+                  [
+                    [
+                      "ctrl",
+                      MODIFIER_KEYSYMS.ctrl,
+                      t("guacamole.toolbar.ctrl"),
+                    ],
+                    ["alt", MODIFIER_KEYSYMS.alt, t("guacamole.toolbar.alt")],
+                    [
+                      "shift",
+                      MODIFIER_KEYSYMS.shift,
+                      t("guacamole.toolbar.shift"),
+                    ],
+                    ["win", MODIFIER_KEYSYMS.win, t("guacamole.toolbar.win")],
+                  ] as [string, number, string][]
+                ).map(([key, ks, label]) => (
+                  <Tooltip key={key}>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() => toggleStickyKey(ks)}
+                        className={cn(
+                          BTN_BASE,
+                          stickyKeys[ks] &&
+                            "bg-primary/15 text-primary border border-primary/30",
+                        )}
+                      >
+                        {label}
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom" sideOffset={6}>
+                      {stickyKeys[ks]
+                        ? t("guacamole.toolbar.stickyActive", { key: label })
+                        : t("guacamole.toolbar.stickyInactive", { key: label })}
+                    </TooltipContent>
+                  </Tooltip>
+                ))}
+              </>
+            )}
+
+            {/* Function key toggle */}
             <div className={SEP} />
             <TipBtn
-              tooltip={t("guacamole.toolbar.ctrlAltDel")}
+              tooltip={t("guacamole.toolbar.fnToggle")}
-              onClick={() => sendCombo(0xffe3, 0xffe9, 0xffff)}
+              onClick={() => setShowFKeys((v) => !v)}
+              className={cn(
+                showFKeys &&
+                  "bg-primary/15 text-primary border border-primary/30",
+              )}
             >
-              CAD
+              Fn
             </TipBtn>
-            <TipBtn
-              tooltip={t("guacamole.toolbar.winL")}
-              onClick={() => sendCombo(0xff67, 0x006c)}
-            >
-              Win+L
-            </TipBtn>
-            <TipBtn
-              tooltip={t("guacamole.toolbar.winKey")}
-              onClick={() => sendCombo(0xff67)}
-            >
-              Win
-            </TipBtn>
-          </>
-        )}
 
-        {/* Sticky modifiers — RDP/VNC only */}
+            {/* F1-F12 row */}
-        {isRdpVnc && (
+            {showFKeys &&
-          <>
+              FKEY_KEYSYMS.map((ks, i) => (
+                <TipBtn
+                  key={ks}
+                  tooltip={`F${i + 1}`}
+                  onClick={() => sendCombo(ks)}
+                >
+                  F{i + 1}
+                </TipBtn>
+              ))}
+
+            {/* Navigation */}
             <div className={SEP} />
-            {(
-              [
-                ["ctrl", MODIFIER_KEYSYMS.ctrl, t("guacamole.toolbar.ctrl")],
-                ["alt", MODIFIER_KEYSYMS.alt, t("guacamole.toolbar.alt")],
-                ["shift", MODIFIER_KEYSYMS.shift, t("guacamole.toolbar.shift")],
-                ["win", MODIFIER_KEYSYMS.win, t("guacamole.toolbar.win")],
-              ] as [string, number, string][]
-            ).map(([key, ks, label]) => (
-              <Tooltip key={key}>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={() => toggleStickyKey(ks)}
-                    className={cn(
-                      BTN_BASE,
-                      stickyKeys[ks] &&
-                        "bg-primary/15 text-primary border border-primary/30",
-                    )}
-                  >
-                    {label}
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={6}>
-                  {stickyKeys[ks]
-                    ? t("guacamole.toolbar.stickyActive", { key: label })
-                    : t("guacamole.toolbar.stickyInactive", { key: label })}
-                </TooltipContent>
-              </Tooltip>
-            ))}
-          </>
-        )}
-
-        {/* Function key toggle */}
-        <div className={SEP} />
-        <TipBtn
-          tooltip={t("guacamole.toolbar.fnToggle")}
-          onClick={() => setShowFKeys((v) => !v)}
-          className={cn(
-            showFKeys && "bg-primary/15 text-primary border border-primary/30",
-          )}
-        >
-          Fn
-        </TipBtn>
-
-        {/* F1-F12 row */}
-        {showFKeys &&
-          FKEY_KEYSYMS.map((ks, i) => (
             <TipBtn
-              key={ks}
+              tooltip={t("guacamole.toolbar.esc")}
-              tooltip={`F${i + 1}`}
+              onClick={() => sendCombo(0xff1b)}
-              onClick={() => sendCombo(ks)}
             >
-              F{i + 1}
+              Esc
             </TipBtn>
-          ))}
+            <TipBtn
-
+              tooltip={t("guacamole.toolbar.tab")}
-        {/* Navigation */}
+              onClick={() => sendCombo(0xff09)}
-        <div className={SEP} />
-        <TipBtn
-          tooltip={t("guacamole.toolbar.esc")}
-          onClick={() => sendCombo(0xff1b)}
-        >
-          Esc
-        </TipBtn>
-        <TipBtn
-          tooltip={t("guacamole.toolbar.tab")}
-          onClick={() => sendCombo(0xff09)}
-        >
-          Tab
-        </TipBtn>
-        <TipBtn
-          tooltip={t("guacamole.toolbar.home")}
-          onClick={() => sendCombo(0xff50)}
-        >
-          Home
-        </TipBtn>
-        <TipBtn
-          tooltip={t("guacamole.toolbar.end")}
-          onClick={() => sendCombo(0xff57)}
-        >
-          End
-        </TipBtn>
-        <TipBtn
-          tooltip={t("guacamole.toolbar.pageUp")}
-          onClick={() => sendCombo(0xff55)}
-        >
-          PgUp
-        </TipBtn>
-        <TipBtn
-          tooltip={t("guacamole.toolbar.pageDown")}
-          onClick={() => sendCombo(0xff56)}
-        >
-          PgDn
-        </TipBtn>
-
-        {/* Arrow cluster */}
-        <div className="flex flex-col ml-0.5">
-          <div className="flex justify-center">
-            <TipIconBtn
-              tooltip={t("guacamole.toolbar.arrowUp")}
-              onClick={() => sendCombo(0xff52)}
             >
-              <ChevronUp className="size-3" />
+              Tab
-            </TipIconBtn>
+            </TipBtn>
+            <TipBtn
+              tooltip={t("guacamole.toolbar.home")}
+              onClick={() => sendCombo(0xff50)}
+            >
+              Home
+            </TipBtn>
+            <TipBtn
+              tooltip={t("guacamole.toolbar.end")}
+              onClick={() => sendCombo(0xff57)}
+            >
+              End
+            </TipBtn>
+            <TipBtn
+              tooltip={t("guacamole.toolbar.pageUp")}
+              onClick={() => sendCombo(0xff55)}
+            >
+              PgUp
+            </TipBtn>
+            <TipBtn
+              tooltip={t("guacamole.toolbar.pageDown")}
+              onClick={() => sendCombo(0xff56)}
+            >
+              PgDn
+            </TipBtn>
+
+            {/* Arrow cluster */}
+            <div className="flex flex-col ml-0.5">
+              <div className="flex justify-center">
+                <TipIconBtn
+                  tooltip={t("guacamole.toolbar.arrowUp")}
+                  onClick={() => sendCombo(0xff52)}
+                >
+                  <ChevronUp className="size-3" />
+                </TipIconBtn>
+              </div>
+              <div className="flex">
+                <TipIconBtn
+                  tooltip={t("guacamole.toolbar.arrowLeft")}
+                  onClick={() => sendCombo(0xff51)}
+                >
+                  <ChevronLeft className="size-3" />
+                </TipIconBtn>
+                <TipIconBtn
+                  tooltip={t("guacamole.toolbar.arrowDown")}
+                  onClick={() => sendCombo(0xff54)}
+                >
+                  <ChevronDown className="size-3" />
+                </TipIconBtn>
+                <TipIconBtn
+                  tooltip={t("guacamole.toolbar.arrowRight")}
+                  onClick={() => sendCombo(0xff53)}
+                >
+                  <ChevronRight className="size-3" />
+                </TipIconBtn>
+              </div>
+            </div>
+
+            {/* Collapse */}
+            <div className="w-px h-5 bg-border mx-0.5 shrink-0" />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => setCollapsed(true)}
+                  className={cn(BTN_ICON)}
+                >
+                  <ChevronsLeftRight className="size-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" sideOffset={6}>
+                {t("guacamole.toolbar.collapse")}
+              </TooltipContent>
+            </Tooltip>
           </div>
-          <div className="flex">
+        )}
-            <TipIconBtn
-              tooltip={t("guacamole.toolbar.arrowLeft")}
-              onClick={() => sendCombo(0xff51)}
-            >
-              <ChevronLeft className="size-3" />
-            </TipIconBtn>
-            <TipIconBtn
-              tooltip={t("guacamole.toolbar.arrowDown")}
-              onClick={() => sendCombo(0xff54)}
-            >
-              <ChevronDown className="size-3" />
-            </TipIconBtn>
-            <TipIconBtn
-              tooltip={t("guacamole.toolbar.arrowRight")}
-              onClick={() => sendCombo(0xff53)}
-            >
-              <ChevronRight className="size-3" />
-            </TipIconBtn>
-          </div>
-        </div>
-
-        {/* Session */}
-        <div className={SEP} />
-        <TipIconBtn
-          tooltip={t("guacamole.toolbar.reconnect")}
-          onClick={onReconnect}
-        >
-          <RefreshCw className="size-3.5" />
-        </TipIconBtn>
-
-        {/* Collapse */}
-        <div className="w-px h-5 bg-border mx-0.5 shrink-0" />
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              onClick={() => setCollapsed(true)}
-              className={cn(BTN_ICON)}
-            >
-              <ChevronsLeftRight className="size-3.5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" sideOffset={6}>
-            {t("guacamole.toolbar.collapse")}
-          </TooltipContent>
-        </Tooltip>
       </div>
     </TooltipProvider>
   );

src/ui/locales/en.json

@@ -131,6 +131,7 @@
     "passwordCopied": "Password copied to clipboard",
     "noPasswordAvailable": "No password available",
     "failedToCopyPassword": "Failed to copy password",
+    "refreshTab": "Refresh connection",
     "openFileManager": "Open File Manager",
     "dashboard": "Dashboard",
     "networkGraph": "Network Graph",
@@ -293,6 +294,9 @@
     "keyFileLoaded": "Key file loaded",
     "keyUploadClick": "Click to upload .pem / .key / .ppk",
     "clearKey": "Clear key",
+    "keySaved": "SSH key saved",
+    "keyReplaceNotice": "paste a new key below to replace it",
+    "replaceKey": "Replace key",
     "forceKeyboardInteractiveLabel": "Force Keyboard Interactive",
     "forceKeyboardInteractiveShortDesc": "Force manual password entry even if keys are present",
     "terminalAppearance": "Terminal Appearance",
@@ -509,6 +513,7 @@
     "hostsTab": "Hosts",
     "credentialsTab": "Credentials",
     "selectMultiple": "Select multiple",
+    "selectHosts": "Select hosts",
     "connectionLabel": "Connection",
     "authenticationLabel": "Authentication",
     "generateKeyPairTitle": "Generate Key Pair",

src/ui/shell/TabBar.tsx

@@ -6,21 +6,25 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/dropdown-menu";
-import { ChevronDown, ChevronUp, X } from "lucide-react";
+import { ChevronDown, ChevronUp, RefreshCw, X } from "lucide-react";
 import { tabIcon } from "@/shell/tabUtils";
-import type { Tab } from "@/types/ui-types";
+import type { Tab, TabType } from "@/types/ui-types";
+
+const CONNECTION_TAB_TYPES: TabType[] = ["terminal", "rdp", "vnc", "telnet"];
 
 export function TabBar({
   tabs,
   activeTabId,
   onSetActiveTab,
   onCloseTab,
+  onRefreshTab,
   onReorderTabs,
 }: {
   tabs: Tab[];
   activeTabId: string;
   onSetActiveTab: (id: string) => void;
   onCloseTab: (id: string) => void;
+  onRefreshTab: (id: string) => void;
   onReorderTabs: (tabs: Tab[]) => void;
 }) {
   const [open, setOpen] = useState(true);
@@ -217,16 +221,33 @@ export function TabBar({
                 {tabIcon(tab.type)}
                 {tab.type !== "dashboard" && tab.label}
                 {tab.type !== "dashboard" && (
-                  <button
+                  <div
-                    onPointerDown={(e) => e.stopPropagation()}
+                    className={`flex items-center gap-0.5 ml-1 ${active ? "opacity-100" : "opacity-0 group-hover/tab:opacity-100"}`}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onCloseTab(tab.id);
-                    }}
-                    className={`flex items-center justify-center size-5 md:size-4 rounded-sm transition-opacity text-muted-foreground hover:text-foreground hover:bg-muted ml-1 ${active ? "opacity-100" : "opacity-0 group-hover/tab:opacity-100"}`}
                   >
-                    <X className="size-3" />
+                    {CONNECTION_TAB_TYPES.includes(tab.type) && (
-                  </button>
+                      <button
+                        onPointerDown={(e) => e.stopPropagation()}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onRefreshTab(tab.id);
+                        }}
+                        title="Refresh connection"
+                        className="flex items-center justify-center size-5 md:size-4 rounded-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+                      >
+                        <RefreshCw className="size-3" />
+                      </button>
+                    )}
+                    <button
+                      onPointerDown={(e) => e.stopPropagation()}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onCloseTab(tab.id);
+                      }}
+                      className="flex items-center justify-center size-5 md:size-4 rounded-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+                    >
+                      <X className="size-3" />
+                    </button>
+                  </div>
                 )}
               </div>
             );
@@ -272,7 +293,7 @@ export function TabBar({
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
+                className="h-full w-12.5 border-y-0 border-r-0 border-border rounded-none text-muted-foreground hover:text-foreground"
               >
                 <ChevronDown className="size-4" />
               </Button>
@@ -313,7 +334,7 @@ export function TabBar({
           <Button
             variant="ghost"
             size="icon"
-            className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
+            className="h-full w-12.5 rounded-none border-y-0 border-border text-muted-foreground hover:text-foreground"
             onClick={() => setOpen((o) => !o)}
           >
             <ChevronUp
@@ -325,7 +346,7 @@ export function TabBar({
       {!open && (
         <button
           onClick={() => setOpen(true)}
-          className="flex items-center justify-center w-full h-6 bg-sidebar border-b border-border text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/5 transition-colors shrink-0"
+          className="flex  items-center justify-center w-full h-6 bg-sidebar border-b border-border text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/5 transition-colors shrink-0"
         >
           <ChevronDown className="size-3.5" />
         </button>

src/ui/shell/tabUtils.tsx

@@ -229,7 +229,7 @@ export function renderTabContent(
         return (
           <EmptyState icon={Monitor} messageKey="guacamole.noHostSelected" />
         );
-      return <GuacamoleApp hostId={host.id} />;
+      return <GuacamoleApp hostId={host.id} tabId={tab.id} />;
 
     case "network_graph":
       return <NetworkGraphCard embedded={false} />;

src/ui/sidebar/HostManager.tsx

@@ -159,14 +159,20 @@ function sshHostToHost(h: SSHHostWithStatus): Host {
     vncPort: h.vncPort ?? (h.connectionType === "vnc" ? h.port : 5900),
     telnetPort: h.telnetPort ?? (h.connectionType === "telnet" ? h.port : 23),
     rdpUser: h.rdpUser,
-    rdpPassword: h.rdpPassword,
+    rdpPassword: (h as any).hasRdpPassword
+      ? "existing_password"
+      : (h.rdpPassword ?? ""),
     domain: h.rdpDomain,
     security: h.rdpSecurity,
     ignoreCert: h.rdpIgnoreCert ?? false,
-    vncPassword: h.vncPassword,
+    vncPassword: (h as any).hasVncPassword
+      ? "existing_password"
+      : (h.vncPassword ?? ""),
     vncUser: h.vncUser,
     telnetUser: h.telnetUser,
-    telnetPassword: h.telnetPassword,
+    telnetPassword: (h as any).hasTelnetPassword
+      ? "existing_password"
+      : (h.telnetPassword ?? ""),
     quickActions: (h.quickActions ?? []).map((a: any) => ({
       name: a.name,
       snippetId: String(a.snippetId),
@@ -945,14 +951,20 @@ function HostEditor({
       quickActions:
         host?.quickActions ?? ([] as { name: string; snippetId: string }[]),
       rdpUser: host?.rdpUser ?? "",
-      rdpPassword: host?.rdpPassword ?? "",
+      rdpPassword: (host as any)?.hasRdpPassword
+        ? "existing_password"
+        : (host?.rdpPassword ?? ""),
       domain: host?.domain ?? "",
       security: host?.security ?? "",
       ignoreCert: host?.ignoreCert ?? false,
-      vncPassword: host?.vncPassword ?? "",
+      vncPassword: (host as any)?.hasVncPassword
+        ? "existing_password"
+        : (host?.vncPassword ?? ""),
       vncUser: host?.vncUser ?? "",
       telnetUser: host?.telnetUser ?? "",
-      telnetPassword: host?.telnetPassword ?? "",
+      telnetPassword: (host as any)?.hasTelnetPassword
+        ? "existing_password"
+        : (host?.telnetPassword ?? ""),
       guacamoleConfig: host?.guacamoleConfig ?? ({} as Record<string, any>),
       statsConfig: host?.statsConfig ?? {
         statusCheckEnabled: true,
@@ -1121,14 +1133,23 @@ function HostEditor({
         telnetPort: Number(form.telnetPort),
         forceKeyboardInteractive: form.forceKeyboardInteractive,
         rdpUser: form.rdpUser || null,
-        rdpPassword: form.rdpPassword || null,
+        rdpPassword:
+          form.rdpPassword === "existing_password"
+            ? undefined
+            : form.rdpPassword || null,
         rdpDomain: form.domain || null,
         rdpSecurity: form.security || null,
         rdpIgnoreCert: form.ignoreCert,
-        vncPassword: form.vncPassword || null,
+        vncPassword:
+          form.vncPassword === "existing_password"
+            ? undefined
+            : form.vncPassword || null,
         vncUser: form.vncUser || null,
         telnetUser: form.telnetUser || null,
-        telnetPassword: form.telnetPassword || null,
+        telnetPassword:
+          form.telnetPassword === "existing_password"
+            ? undefined
+            : form.telnetPassword || null,
         jumpHosts: form.jumpHosts,
         portKnockSequence: form.portKnockSequence,
         tunnelConnections: form.serverTunnels,
@@ -1187,6 +1208,9 @@ function HostEditor({
   };
 
   const authMethod = form.authType;
+  const selectedCredential = credentials.find(
+    (c) => c.id === form.credentialId,
+  );
 
   const handleProtocolToggle = (
     proto: keyof typeof protocols,
@@ -1934,6 +1958,11 @@ function HostEditor({
                     <Input
                       placeholder="root"
                       value={form.username}
+                      disabled={
+                        authMethod === "credential" &&
+                        !!selectedCredential?.username &&
+                        !form.overrideCredentialUsername
+                      }
                       onChange={(e) => setField("username", e.target.value)}
                     />
                   </div>
@@ -1985,13 +2014,23 @@ function HostEditor({
                           </div>
                         </div>
                         {form.keySubTab === "paste" ? (
-                          <textarea
+                          <div className="flex flex-col gap-1.5">
-                            placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
+                            {form.key === "existing_key" && (
-                            rows={5}
+                              <div className="px-3 py-2 text-[10px] border border-accent-brand/30 bg-accent-brand/5 text-accent-brand">
-                            value={form.key}
+                                {t("hosts.keySaved")} —{" "}
-                            onChange={(e) => setField("key", e.target.value)}
+                                {t("hosts.keyReplaceNotice")}
-                            className="w-full px-3 py-2 text-[10px] bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
+                              </div>
-                          />
+                            )}
+                            <textarea
+                              placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
+                              rows={5}
+                              value={
+                                form.key === "existing_key" ? "" : form.key
+                              }
+                              onChange={(e) => setField("key", e.target.value)}
+                              className="w-full px-3 py-2 text-[10px] bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
+                            />
+                          </div>
                         ) : (
                           <div className="flex flex-col gap-2">
                             <label
@@ -1999,9 +2038,11 @@ function HostEditor({
                             >
                               <Upload className="size-4" />
                               <span className="text-xs">
-                                {form.key
+                                {form.key === "existing_key"
-                                  ? t("hosts.keyFileLoaded")
+                                  ? t("hosts.keySaved")
-                                  : t("hosts.keyUploadClick")}
+                                  : form.key
+                                    ? t("hosts.keyFileLoaded")
+                                    : t("hosts.keyUploadClick")}
                               </span>
                               <input
                                 type="file"
@@ -2022,7 +2063,9 @@ function HostEditor({
                                 onClick={() => setField("key", "")}
                                 className="text-[10px] text-destructive self-start"
                               >
-                                {t("hosts.clearKey")}
+                                {form.key === "existing_key"
+                                  ? t("hosts.replaceKey")
+                                  : t("hosts.clearKey")}
                               </button>
                             )}
                           </div>
@@ -2079,9 +2122,17 @@ function HostEditor({
                         </label>
                         <select
                           value={form.credentialId}
-                          onChange={(e) =>
+                          onChange={(e) => {
-                            setField("credentialId", e.target.value)
+                            const newId = e.target.value;
-                          }
+                            setField("credentialId", newId);
+                            if (!form.overrideCredentialUsername) {
+                              const cred = credentials.find(
+                                (c) => c.id === newId,
+                              );
+                              if (cred?.username)
+                                setField("username", cred.username);
+                            }
+                          }}
                           className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
                         >
                           <option value="">
@@ -2089,38 +2140,34 @@ function HostEditor({
                           </option>
                           {credentials.map((c) => (
                             <option key={c.id} value={c.id}>
-                              {c.name} ({c.username})
+                              {c.username
+                                ? `${c.name} (${c.username})`
+                                : c.name}
                             </option>
                           ))}
                         </select>
                       </div>
-                      <div className="flex items-center justify-between col-span-2 pt-1">
+                      {selectedCredential?.username && (
-                        <div className="flex flex-col gap-0.5">
+                        <div className="flex items-center justify-between col-span-2 pt-1">
-                          <span className="text-xs font-medium">
+                          <div className="flex flex-col gap-0.5">
-                            {t("hosts.overrideCredentialUsername")}
+                            <span className="text-xs font-medium">
-                          </span>
+                              {t("hosts.overrideCredentialUsername")}
-                          <span className="text-[10px] text-muted-foreground">
+                            </span>
-                            {t("hosts.overrideCredentialUsernameDesc")}
+                            <span className="text-[10px] text-muted-foreground">
-                          </span>
+                              {t("hosts.overrideCredentialUsernameDesc")}
-                        </div>
+                            </span>
-                        <FakeSwitch
+                          </div>
-                          checked={form.overrideCredentialUsername}
+                          <FakeSwitch
-                          onChange={(v) =>
+                            checked={form.overrideCredentialUsername}
-                            setField("overrideCredentialUsername", v)
+                            onChange={(v) => {
-                          }
+                              setField("overrideCredentialUsername", v);
-                        />
+                              if (!v && selectedCredential?.username) {
-                      </div>
+                                setField(
-                      {form.overrideCredentialUsername && (
+                                  "username",
-                        <div className="flex flex-col gap-1.5 col-span-2">
+                                  selectedCredential.username,
-                          <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                                );
-                            {t("hosts.username")}
+                              }
-                          </label>
+                            }}
-                          <Input
-                            placeholder="root"
-                            value={form.username}
-                            onChange={(e) =>
-                              setField("username", e.target.value)
-                            }
                           />
                         </div>
                       )}
@@ -3283,8 +3330,20 @@ function HostEditor({
                   </label>
                   <PasswordInput
                     className="h-8 text-xs pr-8"
-                    placeholder="••••••••"
+                    placeholder={
-                    value={form.rdpPassword}
+                      form.rdpPassword === "existing_password"
+                        ? t("hosts.passwordSaved")
+                        : "••••••••"
+                    }
+                    value={
+                      form.rdpPassword === "existing_password"
+                        ? ""
+                        : form.rdpPassword
+                    }
+                    onFocus={() => {
+                      if (form.rdpPassword === "existing_password")
+                        setField("rdpPassword", "");
+                    }}
                     onChange={(e) => setField("rdpPassword", e.target.value)}
                   />
                 </div>
@@ -4059,8 +4118,20 @@ function HostEditor({
                   </label>
                   <PasswordInput
                     className="h-8 text-xs pr-8"
-                    placeholder="••••••••"
+                    placeholder={
-                    value={form.vncPassword}
+                      form.vncPassword === "existing_password"
+                        ? t("hosts.passwordSaved")
+                        : "••••••••"
+                    }
+                    value={
+                      form.vncPassword === "existing_password"
+                        ? ""
+                        : form.vncPassword
+                    }
+                    onFocus={() => {
+                      if (form.vncPassword === "existing_password")
+                        setField("vncPassword", "");
+                    }}
                     onChange={(e) => setField("vncPassword", e.target.value)}
                   />
                 </div>
@@ -4443,8 +4514,20 @@ function HostEditor({
                   </label>
                   <PasswordInput
                     className="h-8 text-xs pr-8"
-                    placeholder="••••••••"
+                    placeholder={
-                    value={form.telnetPassword}
+                      form.telnetPassword === "existing_password"
+                        ? t("hosts.passwordSaved")
+                        : "••••••••"
+                    }
+                    value={
+                      form.telnetPassword === "existing_password"
+                        ? ""
+                        : form.telnetPassword
+                    }
+                    onFocus={() => {
+                      if (form.telnetPassword === "existing_password")
+                        setField("telnetPassword", "");
+                    }}
                     onChange={(e) => setField("telnetPassword", e.target.value)}
                   />
                 </div>

src/ui/sidebar/HostsPanel.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Plus, Search, X } from "lucide-react";
+import { ListChecks, Plus, Search, X } from "lucide-react";
 import { SidebarTree } from "@/sidebar/SidebarTree";
 import { HostManager } from "@/sidebar/HostManager";
 import type { Host, HostFolder, TabType } from "@/types/ui-types";
@@ -19,12 +19,17 @@ export function HostsPanel({
   const { t } = useTranslation();
   const [hostSearch, setHostSearch] = useState("");
   const [managerEditing, setManagerEditing] = useState(false);
+  const [selectionMode, setSelectionMode] = useState(false);
 
   function handleEditingChange(editing: boolean) {
     setManagerEditing(editing);
     onEditingChange?.(editing);
   }
 
+  function toggleSelectionMode() {
+    setSelectionMode((v) => !v);
+  }
+
   return (
     <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
       {!managerEditing && (
@@ -46,6 +51,13 @@ export function HostsPanel({
               </button>
             )}
           </div>
+          <button
+            title={t("hosts.selectHosts")}
+            onClick={toggleSelectionMode}
+            className={`flex items-center justify-center size-7 rounded-sm shrink-0 transition-colors ${selectionMode ? "text-accent-brand bg-accent-brand/10 border border-accent-brand/30" : "text-muted-foreground/60 hover:text-foreground hover:bg-muted/60 border border-transparent"}`}
+          >
+            <ListChecks className="size-3.5" />
+          </button>
           <button
             onClick={() =>
               window.dispatchEvent(new CustomEvent("host-manager:add-host"))
@@ -60,13 +72,15 @@ export function HostsPanel({
       )}
 
       <div
-        className={`flex-1 min-h-0 overflow-y-auto py-1 ${managerEditing ? "hidden" : ""}`}
+        className={`flex flex-col flex-1 min-h-0 ${managerEditing ? "hidden" : ""}`}
       >
         <SidebarTree
           children={hostTree?.children ?? []}
           onOpenTab={onOpenTab}
           onEditHost={onEditHost}
           query={hostSearch.trim().toLowerCase()}
+          selectionMode={selectionMode}
+          onToggleSelectionMode={toggleSelectionMode}
         />
       </div>
 

src/ui/sidebar/SidebarTree.tsx

@@ -1,17 +1,37 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Box,
+  Check,
+  ChevronDown,
   ChevronRight,
+  Copy,
   Cpu,
   FolderOpen,
   FolderSearch,
+  Link,
   MemoryStick,
   Monitor,
+  MoreHorizontal,
   Network,
   Pencil,
+  Pin,
   Server,
   Terminal,
+  Trash2,
 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/dropdown-menu";
+import { toast } from "sonner";
+import { bulkUpdateSSHHosts, deleteSSHHost } from "@/main-axios";
 import type { Host, HostFolder, TabType } from "@/types/ui-types";
 
 export function isFolder(item: Host | HostFolder): item is HostFolder {
@@ -80,9 +100,6 @@ function folderHasMatch(folder: HostFolder, query: string): boolean {
   return false;
 }
 
-// Walks the visible tree in render order and pushes every visible row
-// (folder header + hosts) into `out`. This gives us a flat ordered list
-// to assign a single global stripe counter across folders and hosts.
 function collectVisibleRows(
   children: (Host | HostFolder)[],
   query: string,
@@ -93,7 +110,7 @@ function collectVisibleRows(
     if (isFolder(child)) {
       const visible = query ? folderHasMatch(child, query) : true;
       if (!visible) continue;
-      out.push(child); // folder header row counts
+      out.push(child);
       const childOpen = query ? true : openSet.has(child.name);
       if (childOpen) collectVisibleRows(child.children, query, openSet, out);
     } else {
@@ -103,6 +120,29 @@ function collectVisibleRows(
   return out;
 }
 
+function collectAllHosts(children: (Host | HostFolder)[]): Host[] {
+  const out: Host[] = [];
+  for (const child of children) {
+    if (isFolder(child)) {
+      out.push(...collectAllHosts(child.children));
+    } else {
+      out.push(child);
+    }
+  }
+  return out;
+}
+
+function collectAllFolders(children: (Host | HostFolder)[]): string[] {
+  const names = new Set<string>();
+  for (const child of children) {
+    if (isFolder(child)) {
+      names.add(child.name);
+      for (const f of collectAllFolders(child.children)) names.add(f);
+    }
+  }
+  return Array.from(names).sort();
+}
+
 function folderHostCount(folder: HostFolder): {
   total: number;
   online: number;
@@ -126,25 +166,47 @@ export function HostItem({
   host,
   onOpenTab,
   onEditHost,
+  onDelete,
   query = "",
   stripeIndex = 0,
+  selectionMode = false,
+  selected = false,
+  onToggleSelect,
+  isMenuOpen = false,
+  onMenuOpenChange,
 }: {
   host: Host;
   onOpenTab: (type: TabType) => void;
   onEditHost?: () => void;
+  onDelete: () => void;
   query?: string;
   stripeIndex?: number;
+  selectionMode?: boolean;
+  selected?: boolean;
+  onToggleSelect?: () => void;
+  isMenuOpen?: boolean;
+  onMenuOpenChange?: (open: boolean) => void;
 }) {
-  const [hovered, setHovered] = useState(false);
+  const { t } = useTranslation();
+  const metricsEnabled =
+    host.enableSsh && host.statsConfig?.metricsEnabled !== false;
 
   if (query && !hostMatchesQuery(host, query)) return null;
 
   return (
     <div
-      className={`relative flex items-stretch cursor-pointer select-none transition-colors hover:bg-muted/40 ${stripeIndex % 2 === 1 ? "bg-muted/20" : ""}`}
+      className={`group relative flex items-stretch cursor-pointer select-none transition-colors hover:bg-muted/40 ${
-      onMouseEnter={() => setHovered(true)}
+        selected
-      onMouseLeave={() => setHovered(false)}
+          ? "bg-accent-brand/5"
+          : stripeIndex % 2 === 1
+            ? "bg-muted/20"
+            : ""
+      } ${isMenuOpen ? "bg-muted/40" : ""}`}
       onClick={() => {
+        if (selectionMode) {
+          onToggleSelect?.();
+          return;
+        }
         if (host.enableSsh) onOpenTab("terminal");
         else if (host.enableRdp) onOpenTab("rdp");
         else if (host.enableVnc) onOpenTab("vnc");
@@ -158,62 +220,90 @@ export function HostItem({
       />
 
       <div className="flex flex-col flex-1 min-w-0 px-2.5 pt-2 pb-1.5 gap-1">
-        {/* Name + dot */}
+        {/* Name row */}
         <div className="flex items-center gap-1.5 min-w-0">
+          {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>
+          )}
           <span
             className={`size-1.5 rounded-full shrink-0 ${host.online ? "bg-accent-brand" : "bg-muted-foreground/25"}`}
           />
           <span className="text-[13px] font-medium truncate text-foreground leading-none">
             {host.name}
           </span>
+          {host.pin && (
+            <Pin className="size-2.5 text-accent-brand/50 shrink-0" />
+          )}
         </div>
-        {/* Address — only visible on hover */}
+
+        {/* Address — only visible on hover or while menu is open */}
         <span
-          className={`text-[11px] text-muted-foreground/55 truncate leading-none pl-3 transition-opacity duration-100 ${hovered ? "opacity-100" : "opacity-0 h-0 overflow-hidden"}`}
+          className={`text-[11px] text-muted-foreground/55 truncate leading-none pl-3 transition-opacity duration-100 group-hover:opacity-100 group-hover:h-auto ${isMenuOpen ? "opacity-100 h-auto" : "opacity-0 h-0 overflow-hidden"}`}
         >
           {host.username}@{host.ip}
         </span>
 
-        {/* Action tray — slides open on hover */}
+        {/* Tag pills */}
+        {host.tags && host.tags.length > 0 && (
+          <div className="flex items-center gap-1 min-w-0 overflow-hidden pl-3">
+            {host.tags.slice(0, 4).map((tag) => (
+              <span
+                key={tag}
+                className="text-[9px] px-1 py-px border border-border/50 bg-muted/30 text-muted-foreground/60 lowercase shrink-0 leading-none"
+              >
+                {tag}
+              </span>
+            ))}
+            {host.tags.length > 4 && (
+              <span className="text-[9px] text-muted-foreground/40 shrink-0">
+                +{host.tags.length - 4}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Action tray — slides open on CSS hover or while menu is open */}
         <div
-          className="overflow-hidden transition-all duration-150 ease-out"
+          className={`overflow-hidden transition-all duration-150 ease-out max-h-0 opacity-0 group-hover:max-h-[200px] group-hover:opacity-100 ${selectionMode ? "!max-h-0 !opacity-0" : ""} ${isMenuOpen && !selectionMode ? "!max-h-[200px] !opacity-100" : ""}`}
-          style={{
-            maxHeight: hovered ? "200px" : "0px",
-            opacity: hovered ? 1 : 0,
-          }}
         >
-          {host.online && (host.cpu != null || host.ram != null) && (
+          {host.online &&
-            <div className="flex items-center gap-3 pl-3">
+            ((host.cpu != null && host.cpu > 0) ||
-              {host.cpu != null && (
+              (host.ram != null && host.ram > 0)) && (
-                <div className="flex items-center gap-1">
+              <div className="flex items-center gap-3 pl-3">
-                  <Cpu className="size-2.5 shrink-0 text-muted-foreground/30" />
+                {host.cpu != null && host.cpu > 0 && (
-                  <div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
+                  <div className="flex items-center gap-1">
-                    <div
+                    <Cpu className="size-2.5 shrink-0 text-muted-foreground/30" />
-                      className={`h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
+                    <div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
-                      style={{ width: `${host.cpu}%` }}
+                      <div
-                    />
+                        className={`h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
+                        style={{ width: `${host.cpu}%` }}
+                      />
+                    </div>
+                    <span className="text-[9px] tabular-nums text-muted-foreground/40">
+                      {host.cpu}%
+                    </span>
                   </div>
-                  <span className="text-[9px] tabular-nums text-muted-foreground/40">
+                )}
-                    {host.cpu}%
+                {host.ram != null && host.ram > 0 && (
-                  </span>
+                  <div className="flex items-center gap-1">
-                </div>
+                    <MemoryStick className="size-2.5 shrink-0 text-muted-foreground/30" />
-              )}
+                    <div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
-              {host.ram != null && (
+                      <div
-                <div className="flex items-center gap-1">
+                        className={`h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
-                  <MemoryStick className="size-2.5 shrink-0 text-muted-foreground/30" />
+                        style={{ width: `${host.ram}%` }}
-                  <div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
+                      />
-                    <div
+                    </div>
-                      className={`h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
+                    <span className="text-[9px] tabular-nums text-muted-foreground/40">
-                      style={{ width: `${host.ram}%` }}
+                      {host.ram}%
-                    />
+                    </span>
                   </div>
-                  <span className="text-[9px] tabular-nums text-muted-foreground/40">
+                )}
-                    {host.ram}%
+              </div>
-                  </span>
+            )}
-                </div>
-              )}
-            </div>
-          )}
 
           <div className="flex items-center flex-wrap gap-1 pt-1.5 pl-2 pb-1">
             {getSshActions(host).map(({ type, icon: Icon, label }) => (
@@ -288,6 +378,162 @@ export function HostItem({
                 </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();
+                    navigator.clipboard.writeText(
+                      `${host.username}@${host.ip}`,
+                    );
+                    toast.success(t("hosts.copiedToClipboard"));
+                  }}
+                >
+                  <Copy className="size-3.5 mr-2" />
+                  {t("hosts.copyAddress")}
+                </DropdownMenuItem>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <Link className="size-3.5 mr-2" />
+                    {t("hosts.copyLink")}
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent>
+                    {host.enableSsh && host.enableTerminal && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}?view=terminal&hostId=${host.id}`,
+                          );
+                          toast.success(t("hosts.terminalUrlCopied"));
+                        }}
+                      >
+                        <Terminal className="size-3.5 mr-2" />
+                        {t("hosts.copyTerminalUrlAction")}
+                      </DropdownMenuItem>
+                    )}
+                    {host.enableSsh && host.enableFileManager && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}?view=file-manager&hostId=${host.id}`,
+                          );
+                          toast.success(t("hosts.fileManagerUrlCopied"));
+                        }}
+                      >
+                        <FolderSearch className="size-3.5 mr-2" />
+                        {t("hosts.copyFileManagerUrlAction")}
+                      </DropdownMenuItem>
+                    )}
+                    {host.enableSsh && host.enableTunnel && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}?view=tunnel&hostId=${host.id}`,
+                          );
+                          toast.success(t("hosts.tunnelUrlCopied"));
+                        }}
+                      >
+                        <Network className="size-3.5 mr-2" />
+                        {t("hosts.copyTunnelUrlAction")}
+                      </DropdownMenuItem>
+                    )}
+                    {host.enableSsh && host.enableDocker && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}?view=docker&hostId=${host.id}`,
+                          );
+                          toast.success(t("hosts.dockerUrlCopied"));
+                        }}
+                      >
+                        <Box className="size-3.5 mr-2" />
+                        {t("hosts.copyDockerUrlAction")}
+                      </DropdownMenuItem>
+                    )}
+                    {host.enableSsh && metricsEnabled && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}?view=server-stats&hostId=${host.id}`,
+                          );
+                          toast.success(t("hosts.serverStatsUrlCopied"));
+                        }}
+                      >
+                        <Server className="size-3.5 mr-2" />
+                        {t("hosts.copyServerStatsUrlAction")}
+                      </DropdownMenuItem>
+                    )}
+                    {host.enableRdp && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}?view=rdp&hostId=${host.id}`,
+                          );
+                          toast.success(t("hosts.rdpUrlCopied"));
+                        }}
+                      >
+                        <Monitor className="size-3.5 mr-2" />
+                        {t("hosts.copyRdpUrlAction")}
+                      </DropdownMenuItem>
+                    )}
+                    {host.enableVnc && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}?view=vnc&hostId=${host.id}`,
+                          );
+                          toast.success(t("hosts.vncUrlCopied"));
+                        }}
+                      >
+                        <Monitor className="size-3.5 mr-2" />
+                        {t("hosts.copyVncUrlAction")}
+                      </DropdownMenuItem>
+                    )}
+                    {host.enableTelnet && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}?view=telnet&hostId=${host.id}`,
+                          );
+                          toast.success(t("hosts.telnetUrlCopied"));
+                        }}
+                      >
+                        <Terminal className="size-3.5 mr-2" />
+                        {t("hosts.copyTelnetUrlAction")}
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+                <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>
@@ -300,19 +546,31 @@ export function FolderItem({
   depth = 0,
   onOpenTab,
   onEditHost,
+  onDeleteHost,
   query = "",
   stripeMap,
   openFolders,
   onToggleFolder,
+  selectionMode,
+  selectedHostIds,
+  onToggleSelect,
+  openMenuHostId,
+  onMenuOpenChange,
 }: {
   folder: HostFolder;
   depth?: number;
   onOpenTab: (host: Host, type: TabType) => void;
   onEditHost?: (host: Host) => void;
+  onDeleteHost: (host: Host) => void;
   query?: string;
   stripeMap: Map<Host | HostFolder, number>;
   openFolders: Set<string>;
   onToggleFolder: (name: string) => void;
+  selectionMode: boolean;
+  selectedHostIds: Set<string>;
+  onToggleSelect: (id: string) => void;
+  openMenuHostId: string | null;
+  onMenuOpenChange: (hostId: string | null) => void;
 }) {
   const { total, online } = folderHostCount(folder);
 
@@ -353,10 +611,16 @@ export function FolderItem({
                 depth={depth + 1}
                 onOpenTab={onOpenTab}
                 onEditHost={onEditHost}
+                onDeleteHost={onDeleteHost}
                 query={query}
                 stripeMap={stripeMap}
                 openFolders={openFolders}
                 onToggleFolder={onToggleFolder}
+                selectionMode={selectionMode}
+                selectedHostIds={selectedHostIds}
+                onToggleSelect={onToggleSelect}
+                openMenuHostId={openMenuHostId}
+                onMenuOpenChange={onMenuOpenChange}
               />
             ) : (
               <HostItem
@@ -364,8 +628,16 @@ export function FolderItem({
                 host={child}
                 onOpenTab={(t) => onOpenTab(child, t)}
                 onEditHost={onEditHost ? () => onEditHost(child) : undefined}
+                onDelete={() => onDeleteHost(child)}
                 query={query}
                 stripeIndex={stripeMap.get(child) ?? 0}
+                selectionMode={selectionMode}
+                selected={selectedHostIds.has(child.id)}
+                onToggleSelect={() => onToggleSelect(child.id)}
+                isMenuOpen={openMenuHostId === child.id}
+                onMenuOpenChange={(open) =>
+                  onMenuOpenChange(open ? child.id : null)
+                }
               />
             ),
           )}
@@ -375,19 +647,31 @@ export function FolderItem({
   );
 }
 
-// Top-level tree renderer — owns open state and global stripe index.
 export function SidebarTree({
   children,
   onOpenTab,
   onEditHost,
   query = "",
+  selectionMode,
+  onToggleSelectionMode,
 }: {
   children: (Host | HostFolder)[];
   onOpenTab: (host: Host, type: TabType) => void;
   onEditHost: (host: Host) => void;
   query?: string;
+  selectionMode: boolean;
+  onToggleSelectionMode: () => void;
 }) {
+  const { t } = useTranslation();
   const [openFolders, setOpenFolders] = useState<Set<string>>(new Set());
+  const [selectedHostIds, setSelectedHostIds] = useState<Set<string>>(
+    new Set(),
+  );
+  const [openMenuHostId, setOpenMenuHostId] = useState<string | null>(null);
+  const [confirmDialog, setConfirmDialog] = useState<{
+    message: string;
+    onConfirm: () => Promise<void> | void;
+  } | null>(null);
 
   function toggleFolder(name: string) {
     setOpenFolders((prev) => {
@@ -397,36 +681,308 @@ export function SidebarTree({
     });
   }
 
+  function toggleSelect(id: string) {
+    setSelectedHostIds((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }
+
+  function handleDeleteHost(host: Host) {
+    setConfirmDialog({
+      message: t("hosts.deleteHostConfirm", { name: host.name }),
+      onConfirm: async () => {
+        try {
+          await deleteSSHHost(Number(host.id));
+          window.dispatchEvent(new CustomEvent("termix:hosts-changed"));
+          toast.success(t("hosts.deletedCount", { count: 1 }));
+        } catch {
+          toast.error(t("hosts.failedToDeleteCount", { count: 1 }));
+        }
+      },
+    });
+  }
+
+  const allHosts = collectAllHosts(children);
+  const allFolders = collectAllFolders(children);
+
   const visibleRows = collectVisibleRows(children, query, openFolders);
   const stripeMap = new Map<Host | HostFolder, number>(
     visibleRows.map((r, i) => [r, i]),
   );
 
   return (
-    <>
+    <div className="relative flex flex-col flex-1 min-h-0">
-      {children.map((child, i) =>
+      <div className="flex-1 min-h-0 overflow-y-auto">
-        isFolder(child) ? (
+        {children.map((child, i) =>
-          <FolderItem
+          isFolder(child) ? (
-            key={i}
+            <FolderItem
-            folder={child}
+              key={i}
-            onOpenTab={onOpenTab}
+              folder={child}
-            onEditHost={onEditHost}
+              onOpenTab={onOpenTab}
-            query={query}
+              onEditHost={onEditHost}
-            stripeMap={stripeMap}
+              onDeleteHost={handleDeleteHost}
-            openFolders={openFolders}
+              query={query}
-            onToggleFolder={toggleFolder}
+              stripeMap={stripeMap}
-          />
+              openFolders={openFolders}
-        ) : (
+              onToggleFolder={toggleFolder}
-          <HostItem
+              selectionMode={selectionMode}
-            key={i}
+              selectedHostIds={selectedHostIds}
-            host={child}
+              onToggleSelect={toggleSelect}
-            onOpenTab={(t) => onOpenTab(child, t)}
+              openMenuHostId={openMenuHostId}
-            onEditHost={() => onEditHost(child)}
+              onMenuOpenChange={setOpenMenuHostId}
-            query={query}
+            />
-            stripeIndex={stripeMap.get(child) ?? 0}
+          ) : (
-          />
+            <HostItem
-        ),
+              key={i}
+              host={child}
+              onOpenTab={(type) => onOpenTab(child, type)}
+              onEditHost={() => onEditHost(child)}
+              onDelete={() => handleDeleteHost(child)}
+              query={query}
+              stripeIndex={stripeMap.get(child) ?? 0}
+              selectionMode={selectionMode}
+              selected={selectedHostIds.has(child.id)}
+              onToggleSelect={() => toggleSelect(child.id)}
+              isMenuOpen={openMenuHostId === child.id}
+              onMenuOpenChange={(open) =>
+                setOpenMenuHostId(open ? child.id : null)
+              }
+            />
+          ),
+        )}
+      </div>
+
+      {/* Floating selection bar */}
+      {selectionMode && (
+        <div className="absolute bottom-4 inset-x-3 z-50">
+          <div className="bg-popover border border-border shadow-xl px-2.5 py-2 flex items-center gap-1.5 flex-wrap">
+            <span className="text-xs font-semibold tabular-nums shrink-0">
+              {t("hosts.nSelected", { count: selectedHostIds.size })}
+            </span>
+            <div className="w-px h-4 bg-border mx-0.5" />
+            <button
+              className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors"
+              onClick={() => {
+                if (selectedHostIds.size === allHosts.length)
+                  setSelectedHostIds(new Set());
+                else setSelectedHostIds(new Set(allHosts.map((h) => h.id)));
+              }}
+            >
+              {selectedHostIds.size === allHosts.length
+                ? t("hosts.deselectAll")
+                : t("hosts.selectAll")}
+            </button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <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}
+                >
+                  {t("hosts.featuresMenu")} <ChevronDown className="size-2.5" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="text-xs">
+                {[
+                  {
+                    labelKey: "hosts.enableTerminalFeature",
+                    field: "enableTerminal",
+                    value: true,
+                    icon: Terminal,
+                  },
+                  {
+                    labelKey: "hosts.disableTerminalFeature",
+                    field: "enableTerminal",
+                    value: false,
+                    icon: Terminal,
+                  },
+                  {
+                    labelKey: "hosts.enableFilesFeature",
+                    field: "enableFileManager",
+                    value: true,
+                    icon: FolderSearch,
+                  },
+                  {
+                    labelKey: "hosts.disableFilesFeature",
+                    field: "enableFileManager",
+                    value: false,
+                    icon: FolderSearch,
+                  },
+                  {
+                    labelKey: "hosts.enableTunnelsFeature",
+                    field: "enableTunnel",
+                    value: true,
+                    icon: Network,
+                  },
+                  {
+                    labelKey: "hosts.disableTunnelsFeature",
+                    field: "enableTunnel",
+                    value: false,
+                    icon: Network,
+                  },
+                  {
+                    labelKey: "hosts.enableDockerFeature",
+                    field: "enableDocker",
+                    value: true,
+                    icon: Box,
+                  },
+                  {
+                    labelKey: "hosts.disableDockerFeature",
+                    field: "enableDocker",
+                    value: false,
+                    icon: Box,
+                  },
+                ].map(({ labelKey, field, value, icon: Icon }) => (
+                  <DropdownMenuItem
+                    key={labelKey}
+                    onClick={async () => {
+                      const ids = Array.from(selectedHostIds).map(Number);
+                      try {
+                        await bulkUpdateSSHHosts(ids, { [field]: value });
+                        window.dispatchEvent(
+                          new CustomEvent("termix:hosts-changed"),
+                        );
+                        toast.success(
+                          t("hosts.updatedCount", { count: ids.length }),
+                        );
+                      } catch {
+                        toast.error(t("hosts.bulkUpdateFailed"));
+                      }
+                    }}
+                  >
+                    <Icon className="size-3.5 mr-2" />
+                    {t(labelKey)}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <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}
+                >
+                  {t("hosts.moveMenu")} <ChevronDown className="size-2.5" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="text-xs">
+                <DropdownMenuItem
+                  onClick={async () => {
+                    const ids = Array.from(selectedHostIds).map(Number);
+                    try {
+                      await bulkUpdateSSHHosts(ids, { folder: "" });
+                      window.dispatchEvent(
+                        new CustomEvent("termix:hosts-changed"),
+                      );
+                      toast.success(t("hosts.movedToRoot"));
+                    } catch {
+                      toast.error(t("hosts.failedToMoveHosts"));
+                    }
+                  }}
+                >
+                  <FolderOpen className="size-3.5 mr-2" />
+                  {t("hosts.noFolderOption")}
+                </DropdownMenuItem>
+                {allFolders.map((f) => (
+                  <DropdownMenuItem
+                    key={f}
+                    onClick={async () => {
+                      const ids = Array.from(selectedHostIds).map(Number);
+                      try {
+                        await bulkUpdateSSHHosts(ids, { folder: f });
+                        window.dispatchEvent(
+                          new CustomEvent("termix:hosts-changed"),
+                        );
+                        toast.success(t("hosts.movedToFolder", { folder: f }));
+                      } catch {
+                        toast.error(t("hosts.failedToMoveHosts"));
+                      }
+                    }}
+                  >
+                    <FolderOpen className="size-3.5 mr-2" />
+                    {f}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <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}
+              onClick={() => {
+                setConfirmDialog({
+                  message: t("hosts.deleteHostsConfirm", {
+                    count: selectedHostIds.size,
+                    plural: selectedHostIds.size !== 1 ? "s" : "",
+                  }),
+                  onConfirm: async () => {
+                    const ids = Array.from(selectedHostIds);
+                    const results = await Promise.allSettled(
+                      ids.map((id) => deleteSSHHost(Number(id))),
+                    );
+                    const succeeded = results.filter(
+                      (r) => r.status === "fulfilled",
+                    ).length;
+                    const failed = results.filter(
+                      (r) => r.status === "rejected",
+                    ).length;
+                    setSelectedHostIds(new Set());
+                    window.dispatchEvent(
+                      new CustomEvent("termix:hosts-changed"),
+                    );
+                    if (succeeded > 0)
+                      toast.success(
+                        t("hosts.deletedCount", { count: succeeded }),
+                      );
+                    if (failed > 0)
+                      toast.error(
+                        t("hosts.failedToDeleteCount", { count: failed }),
+                      );
+                  },
+                });
+              }}
+            >
+              {t("hosts.deleteSelected")}
+            </button>
+            <div className="flex-1" />
+            <button
+              className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors"
+              onClick={() => {
+                onToggleSelectionMode();
+                setSelectedHostIds(new Set());
+              }}
+            >
+              {t("hosts.cancelSelection")}
+            </button>
+          </div>
+        </div>
       )}
-    </>
+
+      {/* Confirm dialog */}
+      {confirmDialog && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
+          <div className="bg-popover border border-border shadow-xl w-full max-w-xs flex flex-col gap-4 p-4">
+            <p className="text-sm text-foreground">{confirmDialog.message}</p>
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setConfirmDialog(null)}
+                className="px-3 py-1.5 text-xs border border-border text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors"
+              >
+                {t("hosts.cancelBtn")}
+              </button>
+              <button
+                onClick={() => {
+                  confirmDialog.onConfirm();
+                  setConfirmDialog(null);
+                }}
+                className="px-3 py-1.5 text-xs bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded transition-colors"
+              >
+                {t("hosts.deleteConfirmBtn")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }