From 8d52bef631b1343de52fee7b40960b3fe62d1a8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nunzio=20Marf=C3=A8?= <nunzio.marfe@protonmail.com>
Date: Fri, 5 Dec 2025 18:08:33 +0100
Subject: [PATCH] Feature Sudo password auto-fill;

---
 src/constants/terminal-themes.ts              |    1 +
 src/locales/de/translation.json               |   12 +-
 src/locales/en/translation.json               |   12 +-
 src/locales/fr/translation.json               |   12 +-
 src/locales/pt-BR/translation.json            |   13 +-
 src/locales/ru/translation.json               |   12 +-
 src/locales/zh/translation.json               |   12 +-
 src/types/index.ts                            |   15 +-
 .../apps/host-manager/HostManagerEditor.tsx   |   26 +-
 .../apps/terminal/SudoPasswordPopup.tsx       |   82 +
 src/ui/desktop/apps/terminal/Terminal.tsx     | 2810 +++++++++--------
 11 files changed, 1585 insertions(+), 1422 deletions(-)
 create mode 100644 src/ui/desktop/apps/terminal/SudoPasswordPopup.tsx

diff --git a/src/constants/terminal-themes.ts b/src/constants/terminal-themes.ts
index 63f55055..393188f8 100644
--- a/src/constants/terminal-themes.ts
+++ b/src/constants/terminal-themes.ts
@@ -705,6 +705,7 @@ export const DEFAULT_TERMINAL_CONFIG = {
   startupSnippetId: null as number | null,
   autoMosh: false,
   moshCommand: "mosh-server new -s -l LANG=en_US.UTF-8",
+  sudoPasswordAutoFill: false,
 };
 
 export type TerminalConfigType = typeof DEFAULT_TERMINAL_CONFIG;
diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
index c6cdb3fa..54982342 100644
--- a/src/locales/de/translation.json
+++ b/src/locales/de/translation.json
@@ -799,7 +799,9 @@
     "searchServers": "Server durchsuchen...",
     "noServerFound": "Kein Server gefunden",
     "jumpHostsOrder": "Verbindungen werden in dieser Reihenfolge hergestellt: Jump-Host 1 → Jump-Host 2 → ... → Ziel-Server",
-    "advancedAuthSettings": "Erweiterte Authentifizierungseinstellungen"
+    "advancedAuthSettings": "Erweiterte Authentifizierungseinstellungen",
+    "sudoPasswordAutoFill": "Sudo-Passwort automatisch ausfüllen",
+    "sudoPasswordAutoFillDesc": "Popup anzeigen, um das Passwort bei sudo-Befehlen automatisch einzufügen"
   },
   "terminal": {
     "title": "Terminal",
@@ -833,7 +835,11 @@
     "connectionTimeout": "Zeitüberschreitung der Verbindung",
     "terminalTitle": "Terminal - {{host}}",
     "terminalWithPath": "Terminal - {{host}} : {{path}}",
-    "runTitle": "Ausführen von {{command}} – {{host}}"
+    "runTitle": "Ausführen von {{command}} – {{host}}",
+    "sudoPasswordPopupTitle": "Passwort einfügen?",
+    "sudoPasswordPopupHint": "Drücken Sie Enter zum Einfügen, Esc zum Abbrechen",
+    "sudoPasswordPopupConfirm": "Einfügen",
+    "sudoPasswordPopupDismiss": "Abbrechen"
   },
   "fileManager": {
     "title": "Dateimanager",
@@ -1635,4 +1641,4 @@
     "close": "Schließen",
     "hostManager": "Host-Manager"
   }
-}
+}
\ No newline at end of file
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 60e2ec3a..c21d4a16 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -908,7 +908,9 @@
     "quickActionName": "Action name",
     "noSnippetFound": "No snippet found",
     "quickActionsOrder": "Quick action buttons will appear in the order listed above on the Server Stats page",
-    "advancedAuthSettings": "Advanced Authentication Settings"
+    "advancedAuthSettings": "Advanced Authentication Settings",
+    "sudoPasswordAutoFill": "Sudo Password Auto-Fill",
+    "sudoPasswordAutoFillDesc": "Automatically offer to insert SSH password when sudo prompts for password"
   },
   "terminal": {
     "title": "Terminal",
@@ -946,7 +948,11 @@
     "totpRequired": "Two-Factor Authentication Required",
     "totpCodeLabel": "Verification Code",
     "totpPlaceholder": "000000",
-    "totpVerify": "Verify"
+    "totpVerify": "Verify",
+    "sudoPasswordPopupTitle": "Insert Password?",
+    "sudoPasswordPopupHint": "Press Enter to insert, Esc to dismiss",
+    "sudoPasswordPopupConfirm": "Insert",
+    "sudoPasswordPopupDismiss": "Dismiss"
   },
   "fileManager": {
     "title": "File Manager",
@@ -1825,4 +1831,4 @@
     "close": "Close",
     "hostManager": "Host Manager"
   }
-}
+}
\ No newline at end of file
diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json
index 7f111fb8..33370499 100644
--- a/src/locales/fr/translation.json
+++ b/src/locales/fr/translation.json
@@ -790,7 +790,9 @@
     "searchServers": "Rechercher des serveurs...",
     "noServerFound": "Aucun serveur trouvé",
     "jumpHostsOrder": "Les connexions seront établies dans l'ordre : Serveur de rebond 1 → Serveur de rebond 2 → ... → Serveur cible",
-    "advancedAuthSettings": "Paramètres d'authentification avancés"
+    "advancedAuthSettings": "Paramètres d'authentification avancés",
+    "sudoPasswordAutoFill": "Remplissage automatique du mot de passe sudo",
+    "sudoPasswordAutoFillDesc": "Proposer automatiquement d’insérer le mot de passe SSH lorsque sudo demande un mot de passe"
   },
   "terminal": {
     "title": "Terminal",
@@ -828,7 +830,11 @@
     "totpRequired": "Authentification à deux facteurs requise",
     "totpCodeLabel": "Code de vérification",
     "totpPlaceholder": "000000",
-    "totpVerify": "Vérifier"
+    "totpVerify": "Vérifier",
+    "sudoPasswordPopupTitle": "Insérer le mot de passe ?",
+    "sudoPasswordPopupHint": "Appuyez sur Entrée pour insérer, Échap pour annuler",
+    "sudoPasswordPopupConfirm": "Insérer",
+    "sudoPasswordPopupDismiss": "Annuler"
   },
   "fileManager": {
     "title": "Gestionnaire de fichiers",
@@ -1606,4 +1612,4 @@
     "ram": "Mémoire (RAM)",
     "notAvailable": "N/D"
   }
-}
+}
\ No newline at end of file
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index 9e9350e3..fd008b73 100644
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -745,7 +745,9 @@
     "searchServers": "Pesquisar servidores...",
     "noServerFound": "Nenhum servidor encontrado",
     "jumpHostsOrder": "As conexões serão feitas na ordem: Host de Salto 1 → Host de Salto 2 → ... → Servidor de Destino",
-    "advancedAuthSettings": "Configurações Avançadas de Autenticação"
+    "advancedAuthSettings": "Configurações Avançadas de Autenticação",
+    "sudoPasswordAutoFill": "Preenchimento automático da senha do sudo",
+    "sudoPasswordAutoFillDesc": "Oferecer automaticamente inserir a senha SSH quando o sudo solicitar uma senha"
   },
   "terminal": {
     "title": "Terminal",
@@ -779,7 +781,11 @@
     "connectionTimeout": "Tempo limite de conexão esgotado",
     "terminalTitle": "Terminal - {{host}}",
     "terminalWithPath": "Terminal - {{host}}:{{path}}",
-    "runTitle": "Executando {{command}} - {{host}}"
+    "runTitle": "Executando {{command}} - {{host}}",
+    "sudoPasswordPopupTitle": "Inserir Senha?",
+    "sudoPasswordPopupHint": "Pressione Enter para inserir, Esc para cancelar",
+    "sudoPasswordPopupConfirm": "Inserir",
+    "sudoPasswordPopupDismiss": "Cancelar"
   },
   "fileManager": {
     "title": "Gerenciador de Arquivos",
@@ -1034,7 +1040,6 @@
     "fileSavedSuccessfully": "Arquivo salvo com sucesso",
     "autoSaveFailed": "Falha no salvamento automático",
     "fileAutoSaved": "Arquivo salvo automaticamente",
-
     "moveFileFailed": "Falha ao mover {{name}}",
     "moveOperationFailed": "Falha na operação de mover",
     "canOnlyCompareFiles": "Só é possível comparar dois arquivos",
@@ -1528,4 +1533,4 @@
     "viewMobileAppDocs": "Instalar Aplicativo Móvel",
     "mobileAppDocumentation": "Documentação do Aplicativo Móvel"
   }
-}
+}
\ No newline at end of file
diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json
index 0f523deb..68b3deae 100644
--- a/src/locales/ru/translation.json
+++ b/src/locales/ru/translation.json
@@ -858,7 +858,9 @@
     "searchServers": "Поиск серверов...",
     "noServerFound": "Сервер не найден",
     "jumpHostsOrder": "Подключения будут выполнены в порядке: Промежуточный хост 1 → Промежуточный хост 2 → ... → Целевой сервер",
-    "advancedAuthSettings": "Расширенные настройки аутентификации"
+    "advancedAuthSettings": "Расширенные настройки аутентификации",
+    "sudoPasswordAutoFill": "Автозаполнение пароля sudo",
+    "sudoPasswordAutoFillDesc": "Показывать всплывающее окно для автоматического ввода пароля при выполнении команд sudo",
   },
   "terminal": {
     "title": "Терминал",
@@ -896,7 +898,11 @@
     "totpRequired": "Требуется двухфакторная аутентификация",
     "totpCodeLabel": "Код проверки",
     "totpPlaceholder": "000000",
-    "totpVerify": "Проверить"
+    "totpVerify": "Проверить",
+    "sudoPasswordPopupTitle": "Вставить пароль?",
+    "sudoPasswordPopupHint": "Нажмите Enter для вставки, Esc для отмены",
+    "sudoPasswordPopupConfirm": "Вставить",
+    "sudoPasswordPopupDismiss": "Отмена"
   },
   "fileManager": {
     "title": "Файловый менеджер",
@@ -1722,4 +1728,4 @@
     "close": "Закрыть",
     "hostManager": "Менеджер хостов"
   }
-}
+}
\ No newline at end of file
diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
index 3b15347d..73bb39e1 100644
--- a/src/locales/zh/translation.json
+++ b/src/locales/zh/translation.json
@@ -893,7 +893,9 @@
     "searchServers": "搜索服务器...",
     "noServerFound": "未找到服务器",
     "jumpHostsOrder": "连接将按顺序进行：跳板主机 1 → 跳板主机 2 → ... → 目标服务器",
-    "advancedAuthSettings": "高级身份验证设置"
+    "advancedAuthSettings": "高级身份验证设置",
+    "sudoPasswordAutoFill": "Sudo 密码自动填充",
+    "sudoPasswordAutoFillDesc": "在 sudo 命令时显示弹窗以自动输入密码"
   },
   "terminal": {
     "title": "终端",
@@ -931,7 +933,11 @@
     "reconnecting": "重新连接中... ({{attempt}}/{{max}})",
     "reconnected": "重新连接成功",
     "maxReconnectAttemptsReached": "已达到最大重连尝试次数",
-    "connectionTimeout": "连接超时"
+    "connectionTimeout": "连接超时",
+    "sudoPasswordPopupTitle": "插入密码？",
+    "sudoPasswordPopupHint": "按 Enter 插入，Esc 取消",
+    "sudoPasswordPopupConfirm": "插入",
+    "sudoPasswordPopupDismiss": "取消"
   },
   "fileManager": {
     "title": "文件管理器",
@@ -1686,4 +1692,4 @@
     "close": "关闭",
     "hostManager": "主机管理器"
   }
-}
+}
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 7adc1ab6..9f91df14 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -307,6 +307,7 @@ export interface TerminalConfig {
   startupSnippetId: number | null;
   autoMosh: boolean;
   moshCommand: string;
+  sudoPasswordAutoFill: boolean;
 }
 
 // ============================================================================
@@ -316,13 +317,13 @@ export interface TerminalConfig {
 export interface TabContextTab {
   id: number;
   type:
-    | "home"
-    | "terminal"
-    | "ssh_manager"
-    | "server"
-    | "admin"
-    | "file_manager"
-    | "user_profile";
+  | "home"
+  | "terminal"
+  | "ssh_manager"
+  | "server"
+  | "admin"
+  | "file_manager"
+  | "user_profile";
   title: string;
   hostConfig?: SSHHost;
   terminalRef?: any;
diff --git a/src/ui/desktop/apps/host-manager/HostManagerEditor.tsx b/src/ui/desktop/apps/host-manager/HostManagerEditor.tsx
index 552d0b23..c1d595d2 100644
--- a/src/ui/desktop/apps/host-manager/HostManagerEditor.tsx
+++ b/src/ui/desktop/apps/host-manager/HostManagerEditor.tsx
@@ -547,6 +547,7 @@ export function HostManagerEditor({
           startupSnippetId: z.number().nullable(),
           autoMosh: z.boolean(),
           moshCommand: z.string(),
+          sudoPasswordAutoFill: z.boolean(),
         })
         .optional(),
       forceKeyboardInteractive: z.boolean().optional(),
@@ -631,7 +632,7 @@ export function HostManagerEditor({
   type FormData = z.infer<typeof formSchema>;
 
   const form = useForm<FormData>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(formSchema) as any,
     defaultValues: {
       name: "",
       ip: "",
@@ -2443,6 +2444,29 @@ export function HostManagerEditor({
                           />
                         )}
 
+                        <FormField
+                          control={form.control}
+                          name="terminalConfig.sudoPasswordAutoFill"
+                          render={({ field }) => (
+                            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
+                              <div className="space-y-0.5">
+                                <FormLabel>
+                                  {t("hosts.sudoPasswordAutoFill")}
+                                </FormLabel>
+                                <FormDescription>
+                                  {t("hosts.sudoPasswordAutoFillDesc")}
+                                </FormDescription>
+                              </div>
+                              <FormControl>
+                                <Switch
+                                  checked={field.value}
+                                  onCheckedChange={field.onChange}
+                                />
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+
                         <div className="space-y-2">
                           <label className="text-sm font-medium">
                             Environment Variables
diff --git a/src/ui/desktop/apps/terminal/SudoPasswordPopup.tsx b/src/ui/desktop/apps/terminal/SudoPasswordPopup.tsx
new file mode 100644
index 00000000..8e1feca7
--- /dev/null
+++ b/src/ui/desktop/apps/terminal/SudoPasswordPopup.tsx
@@ -0,0 +1,82 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { KeyRound } from "lucide-react";
+import { Button } from "@/components/ui/button.tsx";
+
+interface SudoPasswordPopupProps {
+    isOpen: boolean;
+    hostPassword: string;
+    backgroundColor: string;
+    onConfirm: (password: string) => void;
+    onDismiss: () => void;
+}
+
+export function SudoPasswordPopup({
+    isOpen,
+    hostPassword,
+    backgroundColor,
+    onConfirm,
+    onDismiss
+}: SudoPasswordPopupProps) {
+    const { t } = useTranslation();
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                onConfirm(hostPassword);
+            } else if (e.key === "Escape") {
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                onDismiss();
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown, true);
+        return () => window.removeEventListener("keydown", handleKeyDown, true);
+    }, [isOpen, onConfirm, onDismiss, hostPassword]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className="absolute bottom-4 right-4 z-50 backdrop-blur-sm border border-border rounded-lg shadow-lg p-4 min-w-[280px]"
+            style={{ backgroundColor: backgroundColor }}
+        >
+            <div className="flex items-center gap-3 mb-3">
+                <div className="p-2 bg-primary/10 rounded-full">
+                    <KeyRound className="h-5 w-5 text-primary" />
+                </div>
+                <div>
+                    <h4 className="font-medium text-sm">
+                        {t("terminal.sudoPasswordPopupTitle", "Insert password?")}
+                    </h4>
+                    <p className="text-xs text-muted-foreground">
+                        {t("terminal.sudoPasswordPopupHint", "Press Enter to insert, Esc to dismiss")}
+                    </p>
+                </div>
+            </div>
+            <div className="flex gap-2 justify-end">
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onDismiss}
+                >
+                    {t("terminal.sudoPasswordPopupDismiss", "Dismiss")}
+                </Button>
+                <Button
+                    variant="default"
+                    size="sm"
+                    onClick={() => onConfirm(hostPassword)}
+                >
+                    {t("terminal.sudoPasswordPopupConfirm", "Insert")}
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/ui/desktop/apps/terminal/Terminal.tsx b/src/ui/desktop/apps/terminal/Terminal.tsx
index 6e0e7bc4..91d20672 100644
--- a/src/ui/desktop/apps/terminal/Terminal.tsx
+++ b/src/ui/desktop/apps/terminal/Terminal.tsx
@@ -1,10 +1,10 @@
 import {
-  useEffect,
-  useRef,
-  useState,
-  useImperativeHandle,
-  forwardRef,
-  useCallback,
+    useEffect,
+    useRef,
+    useState,
+    useImperativeHandle,
+    forwardRef,
+    useCallback,
 } from "react";
 import { useXTerm } from "react-xtermjs";
 import { FitAddon } from "@xterm/addon-fit";
@@ -14,17 +14,17 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import {
-  getCookie,
-  isElectron,
-  logActivity,
-  getSnippets,
+    getCookie,
+    isElectron,
+    logActivity,
+    getSnippets,
 } from "@/ui/main-axios.ts";
 import { TOTPDialog } from "@/ui/desktop/navigation/TOTPDialog.tsx";
 import { SSHAuthDialog } from "@/ui/desktop/navigation/SSHAuthDialog.tsx";
 import {
-  TERMINAL_THEMES,
-  DEFAULT_TERMINAL_CONFIG,
-  TERMINAL_FONTS,
+    TERMINAL_THEMES,
+    DEFAULT_TERMINAL_CONFIG,
+    TERMINAL_FONTS,
 } from "@/constants/terminal-themes";
 import type { TerminalConfig } from "@/types";
 import { useCommandTracker } from "@/ui/hooks/useCommandTracker";
@@ -32,1482 +32,1502 @@ import { useCommandHistory as useCommandHistoryHook } from "@/ui/hooks/useComman
 import { useCommandHistory } from "@/ui/desktop/apps/terminal/command-history/CommandHistoryContext.tsx";
 import { CommandAutocomplete } from "./command-history/CommandAutocomplete.tsx";
 import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+import { SudoPasswordPopup } from "./SudoPasswordPopup.tsx";
 
 interface HostConfig {
-  id?: number;
-  ip: string;
-  port: number;
-  username: string;
-  password?: string;
-  key?: string;
-  keyPassword?: string;
-  keyType?: string;
-  authType?: string;
-  credentialId?: number;
-  terminalConfig?: TerminalConfig;
-  [key: string]: unknown;
+    id?: number;
+    ip: string;
+    port: number;
+    username: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    authType?: string;
+    credentialId?: number;
+    terminalConfig?: TerminalConfig;
+    [key: string]: unknown;
 }
 
 interface TerminalHandle {
-  disconnect: () => void;
-  fit: () => void;
-  sendInput: (data: string) => void;
-  notifyResize: () => void;
-  refresh: () => void;
+    disconnect: () => void;
+    fit: () => void;
+    sendInput: (data: string) => void;
+    notifyResize: () => void;
+    refresh: () => void;
 }
 
 interface SSHTerminalProps {
-  hostConfig: HostConfig;
-  isVisible: boolean;
-  title?: string;
-  showTitle?: boolean;
-  splitScreen?: boolean;
-  onClose?: () => void;
-  initialPath?: string;
-  executeCommand?: string;
+    hostConfig: HostConfig;
+    isVisible: boolean;
+    title?: string;
+    showTitle?: boolean;
+    splitScreen?: boolean;
+    onClose?: () => void;
+    initialPath?: string;
+    executeCommand?: string;
 }
 
 export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
-  function SSHTerminal(
-    {
-      hostConfig,
-      isVisible,
-      splitScreen = false,
-      onClose,
-      initialPath,
-      executeCommand,
-    },
-    ref,
-  ) {
-    if (
-      typeof window !== "undefined" &&
-      !(window as { testJWT?: () => string | null }).testJWT
+    function SSHTerminal(
+        {
+            hostConfig,
+            isVisible,
+            splitScreen = false,
+            onClose,
+            initialPath,
+            executeCommand,
+        },
+        ref,
     ) {
-      (window as { testJWT?: () => string | null }).testJWT = () => {
-        const jwt = getCookie("jwt");
-        return jwt;
-      };
-    }
-
-    const { t } = useTranslation();
-    const { instance: terminal, ref: xtermRef } = useXTerm();
-    const commandHistoryContext = useCommandHistory();
-
-    const config = { ...DEFAULT_TERMINAL_CONFIG, ...hostConfig.terminalConfig };
-    const themeColors =
-      TERMINAL_THEMES[config.theme]?.colors || TERMINAL_THEMES.termix.colors;
-    const backgroundColor = themeColors.background;
-    const fitAddonRef = useRef<FitAddon | null>(null);
-    const webSocketRef = useRef<WebSocket | null>(null);
-    const resizeTimeout = useRef<NodeJS.Timeout | null>(null);
-    const wasDisconnectedBySSH = useRef(false);
-    const pingIntervalRef = useRef<NodeJS.Timeout | null>(null);
-    const [visible, setVisible] = useState(false);
-    const [isReady, setIsReady] = useState(false);
-    const [isConnected, setIsConnected] = useState(false);
-    const [isConnecting, setIsConnecting] = useState(false);
-    const [isFitted, setIsFitted] = useState(true);
-    const [, setConnectionError] = useState<string | null>(null);
-    const [, setIsAuthenticated] = useState(false);
-    const [totpRequired, setTotpRequired] = useState(false);
-    const [totpPrompt, setTotpPrompt] = useState<string>("");
-    const [isPasswordPrompt, setIsPasswordPrompt] = useState(false);
-    const [showAuthDialog, setShowAuthDialog] = useState(false);
-    const [authDialogReason, setAuthDialogReason] = useState<
-      "no_keyboard" | "auth_failed" | "timeout"
-    >("no_keyboard");
-    const [keyboardInteractiveDetected, setKeyboardInteractiveDetected] =
-      useState(false);
-    const isVisibleRef = useRef<boolean>(false);
-    const isFittingRef = useRef(false);
-    const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const reconnectAttempts = useRef(0);
-    const maxReconnectAttempts = 3;
-    const isUnmountingRef = useRef(false);
-    const shouldNotReconnectRef = useRef(false);
-    const isReconnectingRef = useRef(false);
-    const isConnectingRef = useRef(false);
-    const connectionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const activityLoggedRef = useRef(false);
-    const keyHandlerAttachedRef = useRef(false);
-
-    const { trackInput, getCurrentCommand, updateCurrentCommand } =
-      useCommandTracker({
-        hostId: hostConfig.id,
-        enabled: true,
-        onCommandExecuted: (command) => {
-          if (!autocompleteHistory.current.includes(command)) {
-            autocompleteHistory.current = [
-              command,
-              ...autocompleteHistory.current,
-            ];
-          }
-        },
-      });
-
-    const getCurrentCommandRef = useRef(getCurrentCommand);
-    const updateCurrentCommandRef = useRef(updateCurrentCommand);
-
-    useEffect(() => {
-      getCurrentCommandRef.current = getCurrentCommand;
-      updateCurrentCommandRef.current = updateCurrentCommand;
-    }, [getCurrentCommand, updateCurrentCommand]);
-
-    const [showAutocomplete, setShowAutocomplete] = useState(false);
-    const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
-      string[]
-    >([]);
-    const [autocompleteSelectedIndex, setAutocompleteSelectedIndex] =
-      useState(0);
-    const [autocompletePosition, setAutocompletePosition] = useState({
-      top: 0,
-      left: 0,
-    });
-    const autocompleteHistory = useRef<string[]>([]);
-    const currentAutocompleteCommand = useRef<string>("");
-
-    const showAutocompleteRef = useRef(false);
-    const autocompleteSuggestionsRef = useRef<string[]>([]);
-    const autocompleteSelectedIndexRef = useRef(0);
-
-    const [showHistoryDialog, setShowHistoryDialog] = useState(false);
-    const [commandHistory, setCommandHistory] = useState<string[]>([]);
-    const [isLoadingHistory, setIsLoadingHistory] = useState(false);
-
-    const setIsLoadingRef = useRef(commandHistoryContext.setIsLoading);
-    const setCommandHistoryContextRef = useRef(
-      commandHistoryContext.setCommandHistory,
-    );
-
-    useEffect(() => {
-      setIsLoadingRef.current = commandHistoryContext.setIsLoading;
-      setCommandHistoryContextRef.current =
-        commandHistoryContext.setCommandHistory;
-    }, [
-      commandHistoryContext.setIsLoading,
-      commandHistoryContext.setCommandHistory,
-    ]);
-
-    useEffect(() => {
-      if (showHistoryDialog && hostConfig.id) {
-        setIsLoadingHistory(true);
-        setIsLoadingRef.current(true);
-        import("@/ui/main-axios.ts")
-          .then((module) => module.getCommandHistory(hostConfig.id!))
-          .then((history) => {
-            setCommandHistory(history);
-            setCommandHistoryContextRef.current(history);
-          })
-          .catch((error) => {
-            console.error("Failed to load command history:", error);
-            setCommandHistory([]);
-            setCommandHistoryContextRef.current([]);
-          })
-          .finally(() => {
-            setIsLoadingHistory(false);
-            setIsLoadingRef.current(false);
-          });
-      }
-    }, [showHistoryDialog, hostConfig.id]);
-
-    useEffect(() => {
-      const autocompleteEnabled =
-        localStorage.getItem("commandAutocomplete") !== "false";
-
-      if (hostConfig.id && autocompleteEnabled) {
-        import("@/ui/main-axios.ts")
-          .then((module) => module.getCommandHistory(hostConfig.id!))
-          .then((history) => {
-            autocompleteHistory.current = history;
-          })
-          .catch((error) => {
-            console.error("Failed to load autocomplete history:", error);
-            autocompleteHistory.current = [];
-          });
-      } else {
-        autocompleteHistory.current = [];
-      }
-    }, [hostConfig.id]);
-
-    useEffect(() => {
-      showAutocompleteRef.current = showAutocomplete;
-    }, [showAutocomplete]);
-
-    useEffect(() => {
-      autocompleteSuggestionsRef.current = autocompleteSuggestions;
-    }, [autocompleteSuggestions]);
-
-    useEffect(() => {
-      autocompleteSelectedIndexRef.current = autocompleteSelectedIndex;
-    }, [autocompleteSelectedIndex]);
-
-    const activityLoggingRef = useRef(false);
-
-    const lastSentSizeRef = useRef<{ cols: number; rows: number } | null>(null);
-    const pendingSizeRef = useRef<{ cols: number; rows: number } | null>(null);
-    const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
-    const lastFittedSizeRef = useRef<{ cols: number; rows: number } | null>(
-      null,
-    );
-    const DEBOUNCE_MS = 140;
-
-    const logTerminalActivity = async () => {
-      if (
-        !hostConfig.id ||
-        activityLoggedRef.current ||
-        activityLoggingRef.current
-      ) {
-        return;
-      }
-
-      activityLoggingRef.current = true;
-      activityLoggedRef.current = true;
-
-      try {
-        const hostName =
-          hostConfig.name || `${hostConfig.username}@${hostConfig.ip}`;
-        await logActivity("terminal", hostConfig.id, hostName);
-      } catch (err) {
-        console.warn("Failed to log terminal activity:", err);
-        activityLoggedRef.current = false;
-      } finally {
-        activityLoggingRef.current = false;
-      }
-    };
-
-    useEffect(() => {
-      isVisibleRef.current = isVisible;
-    }, [isVisible]);
-
-    useEffect(() => {
-      const checkAuth = () => {
-        const jwtToken = getCookie("jwt");
-        const isAuth = !!(jwtToken && jwtToken.trim() !== "");
-
-        setIsAuthenticated((prev) => {
-          if (prev !== isAuth) {
-            return isAuth;
-          }
-          return prev;
-        });
-      };
-
-      checkAuth();
-
-      const authCheckInterval = setInterval(checkAuth, 5000);
-
-      return () => clearInterval(authCheckInterval);
-    }, []);
-
-    function hardRefresh() {
-      try {
         if (
-          terminal &&
-          typeof (
-            terminal as { refresh?: (start: number, end: number) => void }
-          ).refresh === "function"
+            typeof window !== "undefined" &&
+            !(window as { testJWT?: () => string | null }).testJWT
         ) {
-          (
-            terminal as { refresh?: (start: number, end: number) => void }
-          ).refresh(0, terminal.rows - 1);
-        }
-      } catch (error) {
-        console.error("Terminal operation failed:", error);
-      }
-    }
-
-    function performFit() {
-      if (
-        !fitAddonRef.current ||
-        !terminal ||
-        !isVisibleRef.current ||
-        isFittingRef.current
-      ) {
-        return;
-      }
-
-      const lastSize = lastFittedSizeRef.current;
-      if (
-        lastSize &&
-        lastSize.cols === terminal.cols &&
-        lastSize.rows === terminal.rows
-      ) {
-        return;
-      }
-
-      isFittingRef.current = true;
-
-      try {
-        fitAddonRef.current?.fit();
-        if (terminal && terminal.cols > 0 && terminal.rows > 0) {
-          scheduleNotify(terminal.cols, terminal.rows);
-          lastFittedSizeRef.current = {
-            cols: terminal.cols,
-            rows: terminal.rows,
-          };
-        }
-        setIsFitted(true);
-      } finally {
-        isFittingRef.current = false;
-      }
-    }
-
-    function handleTotpSubmit(code: string) {
-      if (webSocketRef.current && code) {
-        webSocketRef.current.send(
-          JSON.stringify({
-            type: isPasswordPrompt ? "password_response" : "totp_response",
-            data: { code },
-          }),
-        );
-        setTotpRequired(false);
-        setTotpPrompt("");
-        setIsPasswordPrompt(false);
-      }
-    }
-
-    function handleTotpCancel() {
-      setTotpRequired(false);
-      setTotpPrompt("");
-      if (onClose) onClose();
-    }
-
-    function handleAuthDialogSubmit(credentials: {
-      password?: string;
-      sshKey?: string;
-      keyPassword?: string;
-    }) {
-      if (webSocketRef.current && terminal) {
-        webSocketRef.current.send(
-          JSON.stringify({
-            type: "reconnect_with_credentials",
-            data: {
-              cols: terminal.cols,
-              rows: terminal.rows,
-              password: credentials.password,
-              sshKey: credentials.sshKey,
-              keyPassword: credentials.keyPassword,
-              hostConfig: {
-                ...hostConfig,
-                password: credentials.password,
-                key: credentials.sshKey,
-                keyPassword: credentials.keyPassword,
-              },
-            },
-          }),
-        );
-        setShowAuthDialog(false);
-        setIsConnecting(true);
-      }
-    }
-
-    function handleAuthDialogCancel() {
-      setShowAuthDialog(false);
-      if (onClose) onClose();
-    }
-
-    function scheduleNotify(cols: number, rows: number) {
-      if (!(cols > 0 && rows > 0)) return;
-      pendingSizeRef.current = { cols, rows };
-      if (notifyTimerRef.current) clearTimeout(notifyTimerRef.current);
-      notifyTimerRef.current = setTimeout(() => {
-        const next = pendingSizeRef.current;
-        const last = lastSentSizeRef.current;
-        if (!next) return;
-        if (last && last.cols === next.cols && last.rows === next.rows) return;
-        if (webSocketRef.current?.readyState === WebSocket.OPEN) {
-          webSocketRef.current.send(
-            JSON.stringify({ type: "resize", data: next }),
-          );
-          lastSentSizeRef.current = next;
-        }
-      }, DEBOUNCE_MS);
-    }
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        disconnect: () => {
-          isUnmountingRef.current = true;
-          shouldNotReconnectRef.current = true;
-          isReconnectingRef.current = false;
-          if (pingIntervalRef.current) {
-            clearInterval(pingIntervalRef.current);
-            pingIntervalRef.current = null;
-          }
-          if (reconnectTimeoutRef.current) {
-            clearTimeout(reconnectTimeoutRef.current);
-            reconnectTimeoutRef.current = null;
-          }
-          if (connectionTimeoutRef.current) {
-            clearTimeout(connectionTimeoutRef.current);
-            connectionTimeoutRef.current = null;
-          }
-          webSocketRef.current?.close();
-          setIsConnected(false);
-          setIsConnecting(false);
-        },
-        fit: () => {
-          fitAddonRef.current?.fit();
-          if (terminal) scheduleNotify(terminal.cols, terminal.rows);
-          hardRefresh();
-        },
-        sendInput: (data: string) => {
-          if (webSocketRef.current?.readyState === 1) {
-            webSocketRef.current.send(JSON.stringify({ type: "input", data }));
-          }
-        },
-        notifyResize: () => {
-          try {
-            const cols = terminal?.cols ?? undefined;
-            const rows = terminal?.rows ?? undefined;
-            if (typeof cols === "number" && typeof rows === "number") {
-              scheduleNotify(cols, rows);
-              hardRefresh();
-            }
-          } catch (error) {
-            console.error("Terminal operation failed:", error);
-          }
-        },
-        refresh: () => hardRefresh(),
-      }),
-      [terminal],
-    );
-
-    function getUseRightClickCopyPaste() {
-      return getCookie("rightClickCopyPaste") === "true";
-    }
-
-    function attemptReconnection() {
-      if (
-        isUnmountingRef.current ||
-        shouldNotReconnectRef.current ||
-        isReconnectingRef.current ||
-        isConnectingRef.current ||
-        wasDisconnectedBySSH.current
-      ) {
-        return;
-      }
-
-      if (reconnectAttempts.current >= maxReconnectAttempts) {
-        toast.error(t("terminal.maxReconnectAttemptsReached"));
-        if (onClose) {
-          onClose();
-        }
-        return;
-      }
-
-      isReconnectingRef.current = true;
-
-      if (terminal) {
-        terminal.clear();
-      }
-
-      reconnectAttempts.current++;
-
-      toast.info(
-        t("terminal.reconnecting", {
-          attempt: reconnectAttempts.current,
-          max: maxReconnectAttempts,
-        }),
-      );
-
-      reconnectTimeoutRef.current = setTimeout(() => {
-        if (
-          isUnmountingRef.current ||
-          shouldNotReconnectRef.current ||
-          wasDisconnectedBySSH.current
-        ) {
-          isReconnectingRef.current = false;
-          return;
+            (window as { testJWT?: () => string | null }).testJWT = () => {
+                const jwt = getCookie("jwt");
+                return jwt;
+            };
         }
 
-        if (reconnectAttempts.current > maxReconnectAttempts) {
-          isReconnectingRef.current = false;
-          return;
-        }
+        const { t } = useTranslation();
+        const { instance: terminal, ref: xtermRef } = useXTerm();
+        const commandHistoryContext = useCommandHistory();
 
-        const jwtToken = getCookie("jwt");
-        if (!jwtToken || jwtToken.trim() === "") {
-          console.warn("Reconnection cancelled - no authentication token");
-          isReconnectingRef.current = false;
-          setConnectionError("Authentication required for reconnection");
-          return;
-        }
+        const config = { ...DEFAULT_TERMINAL_CONFIG, ...hostConfig.terminalConfig };
+        const themeColors =
+            TERMINAL_THEMES[config.theme]?.colors || TERMINAL_THEMES.termix.colors;
+        const backgroundColor = themeColors.background;
+        const fitAddonRef = useRef<FitAddon | null>(null);
+        const webSocketRef = useRef<WebSocket | null>(null);
+        const resizeTimeout = useRef<NodeJS.Timeout | null>(null);
+        const wasDisconnectedBySSH = useRef(false);
+        const pingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+        const [visible, setVisible] = useState(false);
+        const [isReady, setIsReady] = useState(false);
+        const [isConnected, setIsConnected] = useState(false);
+        const [isConnecting, setIsConnecting] = useState(false);
+        const [isFitted, setIsFitted] = useState(true);
+        const [, setConnectionError] = useState<string | null>(null);
+        const [, setIsAuthenticated] = useState(false);
+        const [totpRequired, setTotpRequired] = useState(false);
+        const [totpPrompt, setTotpPrompt] = useState<string>("");
+        const [isPasswordPrompt, setIsPasswordPrompt] = useState(false);
+        const [showAuthDialog, setShowAuthDialog] = useState(false);
+        const [authDialogReason, setAuthDialogReason] = useState<
+            "no_keyboard" | "auth_failed" | "timeout"
+        >("no_keyboard");
+        const [keyboardInteractiveDetected, setKeyboardInteractiveDetected] =
+            useState(false);
+        const isVisibleRef = useRef<boolean>(false);
+        const isFittingRef = useRef(false);
+        const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+        const reconnectAttempts = useRef(0);
+        const maxReconnectAttempts = 3;
+        const isUnmountingRef = useRef(false);
+        const shouldNotReconnectRef = useRef(false);
+        const isReconnectingRef = useRef(false);
+        const isConnectingRef = useRef(false);
+        const connectionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+        const activityLoggedRef = useRef(false);
+        const keyHandlerAttachedRef = useRef(false);
 
-        if (terminal && hostConfig) {
-          terminal.clear();
-          const cols = terminal.cols;
-          const rows = terminal.rows;
-          connectToHost(cols, rows);
-        }
+        const { trackInput, getCurrentCommand, updateCurrentCommand } =
+            useCommandTracker({
+                hostId: hostConfig.id,
+                enabled: true,
+                onCommandExecuted: (command) => {
+                    if (!autocompleteHistory.current.includes(command)) {
+                        autocompleteHistory.current = [
+                            command,
+                            ...autocompleteHistory.current,
+                        ];
+                    }
+                },
+            });
 
-        isReconnectingRef.current = false;
-      }, 2000 * reconnectAttempts.current);
-    }
+        const getCurrentCommandRef = useRef(getCurrentCommand);
+        const updateCurrentCommandRef = useRef(updateCurrentCommand);
 
-    function connectToHost(cols: number, rows: number) {
-      if (isConnectingRef.current) {
-        return;
-      }
+        useEffect(() => {
+            getCurrentCommandRef.current = getCurrentCommand;
+            updateCurrentCommandRef.current = updateCurrentCommand;
+        }, [getCurrentCommand, updateCurrentCommand]);
 
-      isConnectingRef.current = true;
-
-      const isDev =
-        !isElectron() &&
-        process.env.NODE_ENV === "development" &&
-        (window.location.port === "3000" ||
-          window.location.port === "5173" ||
-          window.location.port === "");
-
-      const jwtToken = getCookie("jwt");
-
-      if (!jwtToken || jwtToken.trim() === "") {
-        console.error("No JWT token available for WebSocket connection");
-        setIsConnected(false);
-        setIsConnecting(false);
-        setConnectionError("Authentication required");
-        isConnectingRef.current = false;
-        return;
-      }
-
-      const baseWsUrl = isDev
-        ? `${window.location.protocol === "https:" ? "wss" : "ws"}://localhost:30002`
-        : isElectron()
-          ? (() => {
-              const baseUrl =
-                (window as { configuredServerUrl?: string })
-                  .configuredServerUrl || "http://127.0.0.1:30001";
-              const wsProtocol = baseUrl.startsWith("https://")
-                ? "wss://"
-                : "ws://";
-              const wsHost = baseUrl.replace(/^https?:\/\//, "");
-              return `${wsProtocol}${wsHost}/ssh/websocket/`;
-            })()
-          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/ssh/websocket/`;
-
-      if (
-        webSocketRef.current &&
-        webSocketRef.current.readyState !== WebSocket.CLOSED
-      ) {
-        webSocketRef.current.close();
-      }
-
-      if (pingIntervalRef.current) {
-        clearInterval(pingIntervalRef.current);
-        pingIntervalRef.current = null;
-      }
-      if (connectionTimeoutRef.current) {
-        clearTimeout(connectionTimeoutRef.current);
-        connectionTimeoutRef.current = null;
-      }
-
-      const wsUrl = `${baseWsUrl}?token=${encodeURIComponent(jwtToken)}`;
-
-      const ws = new WebSocket(wsUrl);
-      webSocketRef.current = ws;
-      wasDisconnectedBySSH.current = false;
-      setConnectionError(null);
-      shouldNotReconnectRef.current = false;
-      isReconnectingRef.current = false;
-      setIsConnecting(true);
-
-      setupWebSocketListeners(ws, cols, rows);
-    }
-
-    function setupWebSocketListeners(
-      ws: WebSocket,
-      cols: number,
-      rows: number,
-    ) {
-      ws.addEventListener("open", () => {
-        connectionTimeoutRef.current = setTimeout(() => {
-          if (!isConnected && !totpRequired && !isPasswordPrompt) {
-            if (terminal) {
-              terminal.clear();
-            }
-            toast.error(t("terminal.connectionTimeout"));
-            if (webSocketRef.current) {
-              webSocketRef.current.close();
-            }
-            if (reconnectAttempts.current > 0) {
-              attemptReconnection();
-            }
-          }
-        }, 10000);
-
-        ws.send(
-          JSON.stringify({
-            type: "connectToHost",
-            data: { cols, rows, hostConfig, initialPath, executeCommand },
-          }),
-        );
-        terminal.onData((data) => {
-          trackInput(data);
-          ws.send(JSON.stringify({ type: "input", data }));
+        const [showAutocomplete, setShowAutocomplete] = useState(false);
+        const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+            string[]
+        >([]);
+        const [autocompleteSelectedIndex, setAutocompleteSelectedIndex] =
+            useState(0);
+        const [autocompletePosition, setAutocompletePosition] = useState({
+            top: 0,
+            left: 0,
         });
+        const autocompleteHistory = useRef<string[]>([]);
+        const currentAutocompleteCommand = useRef<string>("");
 
-        pingIntervalRef.current = setInterval(() => {
-          if (ws.readyState === WebSocket.OPEN) {
-            ws.send(JSON.stringify({ type: "ping" }));
-          }
-        }, 30000);
-      });
+        const showAutocompleteRef = useRef(false);
+        const autocompleteSuggestionsRef = useRef<string[]>([]);
+        const autocompleteSelectedIndexRef = useRef(0);
 
-      ws.addEventListener("message", (event) => {
-        try {
-          const msg = JSON.parse(event.data);
-          if (msg.type === "data") {
-            if (typeof msg.data === "string") {
-              terminal.write(msg.data);
+        const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+        const [commandHistory, setCommandHistory] = useState<string[]>([]);
+        const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+        const [showSudoPasswordPopup, setShowSudoPasswordPopup] = useState(false);
+
+        const setIsLoadingRef = useRef(commandHistoryContext.setIsLoading);
+        const setCommandHistoryContextRef = useRef(
+            commandHistoryContext.setCommandHistory,
+        );
+
+        useEffect(() => {
+            setIsLoadingRef.current = commandHistoryContext.setIsLoading;
+            setCommandHistoryContextRef.current =
+                commandHistoryContext.setCommandHistory;
+        }, [
+            commandHistoryContext.setIsLoading,
+            commandHistoryContext.setCommandHistory,
+        ]);
+
+        useEffect(() => {
+            if (showHistoryDialog && hostConfig.id) {
+                setIsLoadingHistory(true);
+                setIsLoadingRef.current(true);
+                import("@/ui/main-axios.ts")
+                    .then((module) => module.getCommandHistory(hostConfig.id!))
+                    .then((history) => {
+                        setCommandHistory(history);
+                        setCommandHistoryContextRef.current(history);
+                    })
+                    .catch((error) => {
+                        console.error("Failed to load command history:", error);
+                        setCommandHistory([]);
+                        setCommandHistoryContextRef.current([]);
+                    })
+                    .finally(() => {
+                        setIsLoadingHistory(false);
+                        setIsLoadingRef.current(false);
+                    });
+            }
+        }, [showHistoryDialog, hostConfig.id]);
+
+        useEffect(() => {
+            const autocompleteEnabled =
+                localStorage.getItem("commandAutocomplete") !== "false";
+
+            if (hostConfig.id && autocompleteEnabled) {
+                import("@/ui/main-axios.ts")
+                    .then((module) => module.getCommandHistory(hostConfig.id!))
+                    .then((history) => {
+                        autocompleteHistory.current = history;
+                    })
+                    .catch((error) => {
+                        console.error("Failed to load autocomplete history:", error);
+                        autocompleteHistory.current = [];
+                    });
             } else {
-              terminal.write(String(msg.data));
+                autocompleteHistory.current = [];
             }
-          } else if (msg.type === "error") {
-            const errorMessage = msg.message || t("terminal.unknownError");
+        }, [hostConfig.id]);
 
+        useEffect(() => {
+            showAutocompleteRef.current = showAutocomplete;
+        }, [showAutocomplete]);
+
+        useEffect(() => {
+            autocompleteSuggestionsRef.current = autocompleteSuggestions;
+        }, [autocompleteSuggestions]);
+
+        useEffect(() => {
+            autocompleteSelectedIndexRef.current = autocompleteSelectedIndex;
+        }, [autocompleteSelectedIndex]);
+
+        const activityLoggingRef = useRef(false);
+
+        const lastSentSizeRef = useRef<{ cols: number; rows: number } | null>(null);
+        const pendingSizeRef = useRef<{ cols: number; rows: number } | null>(null);
+        const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
+        const lastFittedSizeRef = useRef<{ cols: number; rows: number } | null>(
+            null,
+        );
+        const DEBOUNCE_MS = 140;
+
+        const logTerminalActivity = async () => {
             if (
-              errorMessage.toLowerCase().includes("connection") ||
-              errorMessage.toLowerCase().includes("timeout") ||
-              errorMessage.toLowerCase().includes("network")
+                !hostConfig.id ||
+                activityLoggedRef.current ||
+                activityLoggingRef.current
             ) {
-              toast.error(
-                t("terminal.connectionError", { message: errorMessage }),
-              );
-              setIsConnected(false);
-              if (terminal) {
+                return;
+            }
+
+            activityLoggingRef.current = true;
+            activityLoggedRef.current = true;
+
+            try {
+                const hostName =
+                    hostConfig.name || `${hostConfig.username}@${hostConfig.ip}`;
+                await logActivity("terminal", hostConfig.id, hostName);
+            } catch (err) {
+                console.warn("Failed to log terminal activity:", err);
+                activityLoggedRef.current = false;
+            } finally {
+                activityLoggingRef.current = false;
+            }
+        };
+
+        useEffect(() => {
+            isVisibleRef.current = isVisible;
+        }, [isVisible]);
+
+        useEffect(() => {
+            const checkAuth = () => {
+                const jwtToken = getCookie("jwt");
+                const isAuth = !!(jwtToken && jwtToken.trim() !== "");
+
+                setIsAuthenticated((prev) => {
+                    if (prev !== isAuth) {
+                        return isAuth;
+                    }
+                    return prev;
+                });
+            };
+
+            checkAuth();
+
+            const authCheckInterval = setInterval(checkAuth, 5000);
+
+            return () => clearInterval(authCheckInterval);
+        }, []);
+
+        function hardRefresh() {
+            try {
+                if (
+                    terminal &&
+                    typeof (
+                        terminal as { refresh?: (start: number, end: number) => void }
+                    ).refresh === "function"
+                ) {
+                    (
+                        terminal as { refresh?: (start: number, end: number) => void }
+                    ).refresh(0, terminal.rows - 1);
+                }
+            } catch (error) {
+                console.error("Terminal operation failed:", error);
+            }
+        }
+
+        function performFit() {
+            if (
+                !fitAddonRef.current ||
+                !terminal ||
+                !isVisibleRef.current ||
+                isFittingRef.current
+            ) {
+                return;
+            }
+
+            const lastSize = lastFittedSizeRef.current;
+            if (
+                lastSize &&
+                lastSize.cols === terminal.cols &&
+                lastSize.rows === terminal.rows
+            ) {
+                return;
+            }
+
+            isFittingRef.current = true;
+
+            try {
+                fitAddonRef.current?.fit();
+                if (terminal && terminal.cols > 0 && terminal.rows > 0) {
+                    scheduleNotify(terminal.cols, terminal.rows);
+                    lastFittedSizeRef.current = {
+                        cols: terminal.cols,
+                        rows: terminal.rows,
+                    };
+                }
+                setIsFitted(true);
+            } finally {
+                isFittingRef.current = false;
+            }
+        }
+
+        function handleTotpSubmit(code: string) {
+            if (webSocketRef.current && code) {
+                webSocketRef.current.send(
+                    JSON.stringify({
+                        type: isPasswordPrompt ? "password_response" : "totp_response",
+                        data: { code },
+                    }),
+                );
+                setTotpRequired(false);
+                setTotpPrompt("");
+                setIsPasswordPrompt(false);
+            }
+        }
+
+        function handleTotpCancel() {
+            setTotpRequired(false);
+            setTotpPrompt("");
+            if (onClose) onClose();
+        }
+
+        function handleAuthDialogSubmit(credentials: {
+            password?: string;
+            sshKey?: string;
+            keyPassword?: string;
+        }) {
+            if (webSocketRef.current && terminal) {
+                webSocketRef.current.send(
+                    JSON.stringify({
+                        type: "reconnect_with_credentials",
+                        data: {
+                            cols: terminal.cols,
+                            rows: terminal.rows,
+                            password: credentials.password,
+                            sshKey: credentials.sshKey,
+                            keyPassword: credentials.keyPassword,
+                            hostConfig: {
+                                ...hostConfig,
+                                password: credentials.password,
+                                key: credentials.sshKey,
+                                keyPassword: credentials.keyPassword,
+                            },
+                        },
+                    }),
+                );
+                setShowAuthDialog(false);
+                setIsConnecting(true);
+            }
+        }
+
+        function handleAuthDialogCancel() {
+            setShowAuthDialog(false);
+            if (onClose) onClose();
+        }
+
+        function scheduleNotify(cols: number, rows: number) {
+            if (!(cols > 0 && rows > 0)) return;
+            pendingSizeRef.current = { cols, rows };
+            if (notifyTimerRef.current) clearTimeout(notifyTimerRef.current);
+            notifyTimerRef.current = setTimeout(() => {
+                const next = pendingSizeRef.current;
+                const last = lastSentSizeRef.current;
+                if (!next) return;
+                if (last && last.cols === next.cols && last.rows === next.rows) return;
+                if (webSocketRef.current?.readyState === WebSocket.OPEN) {
+                    webSocketRef.current.send(
+                        JSON.stringify({ type: "resize", data: next }),
+                    );
+                    lastSentSizeRef.current = next;
+                }
+            }, DEBOUNCE_MS);
+        }
+
+        useImperativeHandle(
+            ref,
+            () => ({
+                disconnect: () => {
+                    isUnmountingRef.current = true;
+                    shouldNotReconnectRef.current = true;
+                    isReconnectingRef.current = false;
+                    if (pingIntervalRef.current) {
+                        clearInterval(pingIntervalRef.current);
+                        pingIntervalRef.current = null;
+                    }
+                    if (reconnectTimeoutRef.current) {
+                        clearTimeout(reconnectTimeoutRef.current);
+                        reconnectTimeoutRef.current = null;
+                    }
+                    if (connectionTimeoutRef.current) {
+                        clearTimeout(connectionTimeoutRef.current);
+                        connectionTimeoutRef.current = null;
+                    }
+                    webSocketRef.current?.close();
+                    setIsConnected(false);
+                    setIsConnecting(false);
+                },
+                fit: () => {
+                    fitAddonRef.current?.fit();
+                    if (terminal) scheduleNotify(terminal.cols, terminal.rows);
+                    hardRefresh();
+                },
+                sendInput: (data: string) => {
+                    if (webSocketRef.current?.readyState === 1) {
+                        webSocketRef.current.send(JSON.stringify({ type: "input", data }));
+                    }
+                },
+                notifyResize: () => {
+                    try {
+                        const cols = terminal?.cols ?? undefined;
+                        const rows = terminal?.rows ?? undefined;
+                        if (typeof cols === "number" && typeof rows === "number") {
+                            scheduleNotify(cols, rows);
+                            hardRefresh();
+                        }
+                    } catch (error) {
+                        console.error("Terminal operation failed:", error);
+                    }
+                },
+                refresh: () => hardRefresh(),
+            }),
+            [terminal],
+        );
+
+        function getUseRightClickCopyPaste() {
+            return getCookie("rightClickCopyPaste") === "true";
+        }
+
+        function attemptReconnection() {
+            if (
+                isUnmountingRef.current ||
+                shouldNotReconnectRef.current ||
+                isReconnectingRef.current ||
+                isConnectingRef.current ||
+                wasDisconnectedBySSH.current
+            ) {
+                return;
+            }
+
+            if (reconnectAttempts.current >= maxReconnectAttempts) {
+                toast.error(t("terminal.maxReconnectAttemptsReached"));
+                if (onClose) {
+                    onClose();
+                }
+                return;
+            }
+
+            isReconnectingRef.current = true;
+
+            if (terminal) {
                 terminal.clear();
-              }
-              setIsConnecting(true);
-              wasDisconnectedBySSH.current = false;
-              attemptReconnection();
-              return;
             }
 
+            reconnectAttempts.current++;
+
+            toast.info(
+                t("terminal.reconnecting", {
+                    attempt: reconnectAttempts.current,
+                    max: maxReconnectAttempts,
+                }),
+            );
+
+            reconnectTimeoutRef.current = setTimeout(() => {
+                if (
+                    isUnmountingRef.current ||
+                    shouldNotReconnectRef.current ||
+                    wasDisconnectedBySSH.current
+                ) {
+                    isReconnectingRef.current = false;
+                    return;
+                }
+
+                if (reconnectAttempts.current > maxReconnectAttempts) {
+                    isReconnectingRef.current = false;
+                    return;
+                }
+
+                const jwtToken = getCookie("jwt");
+                if (!jwtToken || jwtToken.trim() === "") {
+                    console.warn("Reconnection cancelled - no authentication token");
+                    isReconnectingRef.current = false;
+                    setConnectionError("Authentication required for reconnection");
+                    return;
+                }
+
+                if (terminal && hostConfig) {
+                    terminal.clear();
+                    const cols = terminal.cols;
+                    const rows = terminal.rows;
+                    connectToHost(cols, rows);
+                }
+
+                isReconnectingRef.current = false;
+            }, 2000 * reconnectAttempts.current);
+        }
+
+        function connectToHost(cols: number, rows: number) {
+            if (isConnectingRef.current) {
+                return;
+            }
+
+            isConnectingRef.current = true;
+
+            const isDev =
+                !isElectron() &&
+                process.env.NODE_ENV === "development" &&
+                (window.location.port === "3000" ||
+                    window.location.port === "5173" ||
+                    window.location.port === "");
+
+            const jwtToken = getCookie("jwt");
+
+            if (!jwtToken || jwtToken.trim() === "") {
+                console.error("No JWT token available for WebSocket connection");
+                setIsConnected(false);
+                setIsConnecting(false);
+                setConnectionError("Authentication required");
+                isConnectingRef.current = false;
+                return;
+            }
+
+            const baseWsUrl = isDev
+                ? `${window.location.protocol === "https:" ? "wss" : "ws"}://localhost:30002`
+                : isElectron()
+                    ? (() => {
+                        const baseUrl =
+                            (window as { configuredServerUrl?: string })
+                                .configuredServerUrl || "http://127.0.0.1:30001";
+                        const wsProtocol = baseUrl.startsWith("https://")
+                            ? "wss://"
+                            : "ws://";
+                        const wsHost = baseUrl.replace(/^https?:\/\//, "");
+                        return `${wsProtocol}${wsHost}/ssh/websocket/`;
+                    })()
+                    : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/ssh/websocket/`;
+
             if (
-              (errorMessage.toLowerCase().includes("auth") &&
-                errorMessage.toLowerCase().includes("failed")) ||
-              errorMessage.toLowerCase().includes("permission denied") ||
-              (errorMessage.toLowerCase().includes("invalid") &&
-                (errorMessage.toLowerCase().includes("password") ||
-                  errorMessage.toLowerCase().includes("key"))) ||
-              errorMessage.toLowerCase().includes("incorrect password")
+                webSocketRef.current &&
+                webSocketRef.current.readyState !== WebSocket.CLOSED
             ) {
-              toast.error(t("terminal.authError", { message: errorMessage }));
-              shouldNotReconnectRef.current = true;
-              if (webSocketRef.current) {
                 webSocketRef.current.close();
-              }
-              if (onClose) {
-                onClose();
-              }
-              return;
             }
 
-            toast.error(t("terminal.error", { message: errorMessage }));
-          } else if (msg.type === "connected") {
-            setIsConnected(true);
-            setIsConnecting(false);
-            isConnectingRef.current = false;
+            if (pingIntervalRef.current) {
+                clearInterval(pingIntervalRef.current);
+                pingIntervalRef.current = null;
+            }
             if (connectionTimeoutRef.current) {
-              clearTimeout(connectionTimeoutRef.current);
-              connectionTimeoutRef.current = null;
+                clearTimeout(connectionTimeoutRef.current);
+                connectionTimeoutRef.current = null;
             }
-            if (reconnectAttempts.current > 0) {
-              toast.success(t("terminal.reconnected"));
-            }
-            reconnectAttempts.current = 0;
+
+            const wsUrl = `${baseWsUrl}?token=${encodeURIComponent(jwtToken)}`;
+
+            const ws = new WebSocket(wsUrl);
+            webSocketRef.current = ws;
+            wasDisconnectedBySSH.current = false;
+            setConnectionError(null);
+            shouldNotReconnectRef.current = false;
             isReconnectingRef.current = false;
+            setIsConnecting(true);
 
-            logTerminalActivity();
+            setupWebSocketListeners(ws, cols, rows);
+        }
 
-            setTimeout(async () => {
-              const terminalConfig = {
+        function setupWebSocketListeners(
+            ws: WebSocket,
+            cols: number,
+            rows: number,
+        ) {
+            ws.addEventListener("open", () => {
+                connectionTimeoutRef.current = setTimeout(() => {
+                    if (!isConnected && !totpRequired && !isPasswordPrompt) {
+                        if (terminal) {
+                            terminal.clear();
+                        }
+                        toast.error(t("terminal.connectionTimeout"));
+                        if (webSocketRef.current) {
+                            webSocketRef.current.close();
+                        }
+                        if (reconnectAttempts.current > 0) {
+                            attemptReconnection();
+                        }
+                    }
+                }, 10000);
+
+                ws.send(
+                    JSON.stringify({
+                        type: "connectToHost",
+                        data: { cols, rows, hostConfig, initialPath, executeCommand },
+                    }),
+                );
+                terminal.onData((data) => {
+                    trackInput(data);
+                    ws.send(JSON.stringify({ type: "input", data }));
+                });
+
+                pingIntervalRef.current = setInterval(() => {
+                    if (ws.readyState === WebSocket.OPEN) {
+                        ws.send(JSON.stringify({ type: "ping" }));
+                    }
+                }, 30000);
+            });
+
+            ws.addEventListener("message", (event) => {
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg.type === "data") {
+                        if (typeof msg.data === "string") {
+                            terminal.write(msg.data);
+                            // Sudo password prompt detection
+                            const sudoPasswordPattern = /(?:\[sudo\] password for \S+:|sudo: a password is required)/;
+                            if (config.sudoPasswordAutoFill && sudoPasswordPattern.test(msg.data)) {
+                                setShowSudoPasswordPopup(true);
+                            }
+                        } else {
+                            terminal.write(String(msg.data));
+                        }
+                    } else if (msg.type === "error") {
+                        const errorMessage = msg.message || t("terminal.unknownError");
+
+                        if (
+                            errorMessage.toLowerCase().includes("connection") ||
+                            errorMessage.toLowerCase().includes("timeout") ||
+                            errorMessage.toLowerCase().includes("network")
+                        ) {
+                            toast.error(
+                                t("terminal.connectionError", { message: errorMessage }),
+                            );
+                            setIsConnected(false);
+                            if (terminal) {
+                                terminal.clear();
+                            }
+                            setIsConnecting(true);
+                            wasDisconnectedBySSH.current = false;
+                            attemptReconnection();
+                            return;
+                        }
+
+                        if (
+                            (errorMessage.toLowerCase().includes("auth") &&
+                                errorMessage.toLowerCase().includes("failed")) ||
+                            errorMessage.toLowerCase().includes("permission denied") ||
+                            (errorMessage.toLowerCase().includes("invalid") &&
+                                (errorMessage.toLowerCase().includes("password") ||
+                                    errorMessage.toLowerCase().includes("key"))) ||
+                            errorMessage.toLowerCase().includes("incorrect password")
+                        ) {
+                            toast.error(t("terminal.authError", { message: errorMessage }));
+                            shouldNotReconnectRef.current = true;
+                            if (webSocketRef.current) {
+                                webSocketRef.current.close();
+                            }
+                            if (onClose) {
+                                onClose();
+                            }
+                            return;
+                        }
+
+                        toast.error(t("terminal.error", { message: errorMessage }));
+                    } else if (msg.type === "connected") {
+                        setIsConnected(true);
+                        setIsConnecting(false);
+                        isConnectingRef.current = false;
+                        if (connectionTimeoutRef.current) {
+                            clearTimeout(connectionTimeoutRef.current);
+                            connectionTimeoutRef.current = null;
+                        }
+                        if (reconnectAttempts.current > 0) {
+                            toast.success(t("terminal.reconnected"));
+                        }
+                        reconnectAttempts.current = 0;
+                        isReconnectingRef.current = false;
+
+                        logTerminalActivity();
+
+                        setTimeout(async () => {
+                            const terminalConfig = {
+                                ...DEFAULT_TERMINAL_CONFIG,
+                                ...hostConfig.terminalConfig,
+                            };
+
+                            if (
+                                terminalConfig.environmentVariables &&
+                                terminalConfig.environmentVariables.length > 0
+                            ) {
+                                for (const envVar of terminalConfig.environmentVariables) {
+                                    if (envVar.key && envVar.value && ws.readyState === 1) {
+                                        ws.send(
+                                            JSON.stringify({
+                                                type: "input",
+                                                data: `export ${envVar.key}="${envVar.value}"\n`,
+                                            }),
+                                        );
+                                        await new Promise((resolve) => setTimeout(resolve, 100));
+                                    }
+                                }
+                            }
+
+                            if (terminalConfig.startupSnippetId) {
+                                try {
+                                    const snippets = await getSnippets();
+                                    const snippet = snippets.find(
+                                        (s: { id: number }) =>
+                                            s.id === terminalConfig.startupSnippetId,
+                                    );
+                                    if (snippet && ws.readyState === 1) {
+                                        ws.send(
+                                            JSON.stringify({
+                                                type: "input",
+                                                data: snippet.content + "\n",
+                                            }),
+                                        );
+                                        await new Promise((resolve) => setTimeout(resolve, 200));
+                                    }
+                                } catch (err) {
+                                    console.warn("Failed to execute startup snippet:", err);
+                                }
+                            }
+
+                            if (terminalConfig.autoMosh && ws.readyState === 1) {
+                                ws.send(
+                                    JSON.stringify({
+                                        type: "input",
+                                        data: terminalConfig.moshCommand + "\n",
+                                    }),
+                                );
+                            }
+                        }, 500);
+                    } else if (msg.type === "disconnected") {
+                        wasDisconnectedBySSH.current = true;
+                        setIsConnected(false);
+                        if (terminal) {
+                            terminal.clear();
+                        }
+                        setIsConnecting(false);
+                        if (onClose) {
+                            onClose();
+                        }
+                    } else if (msg.type === "totp_required") {
+                        setTotpRequired(true);
+                        setTotpPrompt(msg.prompt || "Verification code:");
+                        setIsPasswordPrompt(false);
+                        if (connectionTimeoutRef.current) {
+                            clearTimeout(connectionTimeoutRef.current);
+                            connectionTimeoutRef.current = null;
+                        }
+                    } else if (msg.type === "password_required") {
+                        setTotpRequired(true);
+                        setTotpPrompt(msg.prompt || "Password:");
+                        setIsPasswordPrompt(true);
+                        if (connectionTimeoutRef.current) {
+                            clearTimeout(connectionTimeoutRef.current);
+                            connectionTimeoutRef.current = null;
+                        }
+                    } else if (msg.type === "keyboard_interactive_available") {
+                        setKeyboardInteractiveDetected(true);
+                        setIsConnecting(false);
+                        if (connectionTimeoutRef.current) {
+                            clearTimeout(connectionTimeoutRef.current);
+                            connectionTimeoutRef.current = null;
+                        }
+                    } else if (msg.type === "auth_method_not_available") {
+                        setAuthDialogReason("no_keyboard");
+                        setShowAuthDialog(true);
+                        setIsConnecting(false);
+                        if (connectionTimeoutRef.current) {
+                            clearTimeout(connectionTimeoutRef.current);
+                            connectionTimeoutRef.current = null;
+                        }
+                    }
+                } catch {
+                    toast.error(t("terminal.messageParseError"));
+                }
+            });
+
+            ws.addEventListener("close", (event) => {
+                setIsConnected(false);
+                isConnectingRef.current = false;
+                if (terminal) {
+                    terminal.clear();
+                }
+
+                if (event.code === 1008) {
+                    console.error("WebSocket authentication failed:", event.reason);
+                    setConnectionError("Authentication failed - please re-login");
+                    setIsConnecting(false);
+                    shouldNotReconnectRef.current = true;
+
+                    localStorage.removeItem("jwt");
+
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1000);
+
+                    return;
+                }
+
+                setIsConnecting(false);
+                if (
+                    !wasDisconnectedBySSH.current &&
+                    !isUnmountingRef.current &&
+                    !shouldNotReconnectRef.current
+                ) {
+                    wasDisconnectedBySSH.current = false;
+                    attemptReconnection();
+                }
+            });
+
+            ws.addEventListener("error", () => {
+                setIsConnected(false);
+                isConnectingRef.current = false;
+                setConnectionError(t("terminal.websocketError"));
+                if (terminal) {
+                    terminal.clear();
+                }
+                setIsConnecting(false);
+                if (!isUnmountingRef.current && !shouldNotReconnectRef.current) {
+                    wasDisconnectedBySSH.current = false;
+                    attemptReconnection();
+                }
+            });
+        }
+
+        async function writeTextToClipboard(text: string): Promise<void> {
+            try {
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    await navigator.clipboard.writeText(text);
+                    return;
+                }
+            } catch (error) {
+                console.error("Terminal operation failed:", error);
+            }
+            const textarea = document.createElement("textarea");
+            textarea.value = text;
+            textarea.style.position = "fixed";
+            textarea.style.left = "-9999px";
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            try {
+                document.execCommand("copy");
+            } finally {
+                document.body.removeChild(textarea);
+            }
+        }
+
+        async function readTextFromClipboard(): Promise<string> {
+            try {
+                if (navigator.clipboard && navigator.clipboard.readText) {
+                    return await navigator.clipboard.readText();
+                }
+            } catch (error) {
+                console.error("Terminal operation failed:", error);
+            }
+            return "";
+        }
+
+        const handleSelectCommand = useCallback(
+            (command: string) => {
+                if (!terminal || !webSocketRef.current) return;
+
+                for (const char of command) {
+                    webSocketRef.current.send(
+                        JSON.stringify({ type: "input", data: char }),
+                    );
+                }
+
+                setTimeout(() => {
+                    terminal.focus();
+                }, 100);
+            },
+            [terminal],
+        );
+
+        useEffect(() => {
+            commandHistoryContext.setOnSelectCommand(handleSelectCommand);
+        }, [handleSelectCommand]);
+
+        const handleAutocompleteSelect = useCallback(
+            (selectedCommand: string) => {
+                if (!webSocketRef.current) return;
+
+                const currentCmd = currentAutocompleteCommand.current;
+                const completion = selectedCommand.substring(currentCmd.length);
+
+                for (const char of completion) {
+                    webSocketRef.current.send(
+                        JSON.stringify({ type: "input", data: char }),
+                    );
+                }
+
+                updateCurrentCommand(selectedCommand);
+
+                setShowAutocomplete(false);
+                setAutocompleteSuggestions([]);
+                currentAutocompleteCommand.current = "";
+
+                setTimeout(() => {
+                    terminal?.focus();
+                }, 50);
+
+                console.log(`[Autocomplete] ${currentCmd} → ${selectedCommand}`);
+            },
+            [terminal, updateCurrentCommand],
+        );
+
+        const handleDeleteCommand = useCallback(
+            async (command: string) => {
+                if (!hostConfig.id) return;
+
+                try {
+                    const { deleteCommandFromHistory } = await import(
+                        "@/ui/main-axios.ts"
+                    );
+                    await deleteCommandFromHistory(hostConfig.id, command);
+
+                    setCommandHistory((prev) => {
+                        const newHistory = prev.filter((cmd) => cmd !== command);
+                        setCommandHistoryContextRef.current(newHistory);
+                        return newHistory;
+                    });
+
+                    autocompleteHistory.current = autocompleteHistory.current.filter(
+                        (cmd) => cmd !== command,
+                    );
+
+                    console.log(`[Terminal] Command deleted from history: ${command}`);
+                } catch (error) {
+                    console.error("Failed to delete command from history:", error);
+                }
+            },
+            [hostConfig.id],
+        );
+
+        useEffect(() => {
+            commandHistoryContext.setOnDeleteCommand(handleDeleteCommand);
+        }, [handleDeleteCommand]);
+
+        useEffect(() => {
+            if (!terminal || !xtermRef.current) return;
+
+            const config = {
                 ...DEFAULT_TERMINAL_CONFIG,
                 ...hostConfig.terminalConfig,
-              };
+            };
 
-              if (
-                terminalConfig.environmentVariables &&
-                terminalConfig.environmentVariables.length > 0
-              ) {
-                for (const envVar of terminalConfig.environmentVariables) {
-                  if (envVar.key && envVar.value && ws.readyState === 1) {
-                    ws.send(
-                      JSON.stringify({
-                        type: "input",
-                        data: `export ${envVar.key}="${envVar.value}"\n`,
-                      }),
-                    );
-                    await new Promise((resolve) => setTimeout(resolve, 100));
-                  }
-                }
-              }
+            const themeColors =
+                TERMINAL_THEMES[config.theme]?.colors || TERMINAL_THEMES.termix.colors;
 
-              if (terminalConfig.startupSnippetId) {
-                try {
-                  const snippets = await getSnippets();
-                  const snippet = snippets.find(
-                    (s: { id: number }) =>
-                      s.id === terminalConfig.startupSnippetId,
-                  );
-                  if (snippet && ws.readyState === 1) {
-                    ws.send(
-                      JSON.stringify({
-                        type: "input",
-                        data: snippet.content + "\n",
-                      }),
-                    );
-                    await new Promise((resolve) => setTimeout(resolve, 200));
-                  }
-                } catch (err) {
-                  console.warn("Failed to execute startup snippet:", err);
-                }
-              }
-
-              if (terminalConfig.autoMosh && ws.readyState === 1) {
-                ws.send(
-                  JSON.stringify({
-                    type: "input",
-                    data: terminalConfig.moshCommand + "\n",
-                  }),
-                );
-              }
-            }, 500);
-          } else if (msg.type === "disconnected") {
-            wasDisconnectedBySSH.current = true;
-            setIsConnected(false);
-            if (terminal) {
-              terminal.clear();
-            }
-            setIsConnecting(false);
-            if (onClose) {
-              onClose();
-            }
-          } else if (msg.type === "totp_required") {
-            setTotpRequired(true);
-            setTotpPrompt(msg.prompt || "Verification code:");
-            setIsPasswordPrompt(false);
-            if (connectionTimeoutRef.current) {
-              clearTimeout(connectionTimeoutRef.current);
-              connectionTimeoutRef.current = null;
-            }
-          } else if (msg.type === "password_required") {
-            setTotpRequired(true);
-            setTotpPrompt(msg.prompt || "Password:");
-            setIsPasswordPrompt(true);
-            if (connectionTimeoutRef.current) {
-              clearTimeout(connectionTimeoutRef.current);
-              connectionTimeoutRef.current = null;
-            }
-          } else if (msg.type === "keyboard_interactive_available") {
-            setKeyboardInteractiveDetected(true);
-            setIsConnecting(false);
-            if (connectionTimeoutRef.current) {
-              clearTimeout(connectionTimeoutRef.current);
-              connectionTimeoutRef.current = null;
-            }
-          } else if (msg.type === "auth_method_not_available") {
-            setAuthDialogReason("no_keyboard");
-            setShowAuthDialog(true);
-            setIsConnecting(false);
-            if (connectionTimeoutRef.current) {
-              clearTimeout(connectionTimeoutRef.current);
-              connectionTimeoutRef.current = null;
-            }
-          }
-        } catch {
-          toast.error(t("terminal.messageParseError"));
-        }
-      });
-
-      ws.addEventListener("close", (event) => {
-        setIsConnected(false);
-        isConnectingRef.current = false;
-        if (terminal) {
-          terminal.clear();
-        }
-
-        if (event.code === 1008) {
-          console.error("WebSocket authentication failed:", event.reason);
-          setConnectionError("Authentication failed - please re-login");
-          setIsConnecting(false);
-          shouldNotReconnectRef.current = true;
-
-          localStorage.removeItem("jwt");
-
-          setTimeout(() => {
-            window.location.reload();
-          }, 1000);
-
-          return;
-        }
-
-        setIsConnecting(false);
-        if (
-          !wasDisconnectedBySSH.current &&
-          !isUnmountingRef.current &&
-          !shouldNotReconnectRef.current
-        ) {
-          wasDisconnectedBySSH.current = false;
-          attemptReconnection();
-        }
-      });
-
-      ws.addEventListener("error", () => {
-        setIsConnected(false);
-        isConnectingRef.current = false;
-        setConnectionError(t("terminal.websocketError"));
-        if (terminal) {
-          terminal.clear();
-        }
-        setIsConnecting(false);
-        if (!isUnmountingRef.current && !shouldNotReconnectRef.current) {
-          wasDisconnectedBySSH.current = false;
-          attemptReconnection();
-        }
-      });
-    }
-
-    async function writeTextToClipboard(text: string): Promise<void> {
-      try {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          await navigator.clipboard.writeText(text);
-          return;
-        }
-      } catch (error) {
-        console.error("Terminal operation failed:", error);
-      }
-      const textarea = document.createElement("textarea");
-      textarea.value = text;
-      textarea.style.position = "fixed";
-      textarea.style.left = "-9999px";
-      document.body.appendChild(textarea);
-      textarea.focus();
-      textarea.select();
-      try {
-        document.execCommand("copy");
-      } finally {
-        document.body.removeChild(textarea);
-      }
-    }
-
-    async function readTextFromClipboard(): Promise<string> {
-      try {
-        if (navigator.clipboard && navigator.clipboard.readText) {
-          return await navigator.clipboard.readText();
-        }
-      } catch (error) {
-        console.error("Terminal operation failed:", error);
-      }
-      return "";
-    }
-
-    const handleSelectCommand = useCallback(
-      (command: string) => {
-        if (!terminal || !webSocketRef.current) return;
-
-        for (const char of command) {
-          webSocketRef.current.send(
-            JSON.stringify({ type: "input", data: char }),
-          );
-        }
-
-        setTimeout(() => {
-          terminal.focus();
-        }, 100);
-      },
-      [terminal],
-    );
-
-    useEffect(() => {
-      commandHistoryContext.setOnSelectCommand(handleSelectCommand);
-    }, [handleSelectCommand]);
-
-    const handleAutocompleteSelect = useCallback(
-      (selectedCommand: string) => {
-        if (!webSocketRef.current) return;
-
-        const currentCmd = currentAutocompleteCommand.current;
-        const completion = selectedCommand.substring(currentCmd.length);
-
-        for (const char of completion) {
-          webSocketRef.current.send(
-            JSON.stringify({ type: "input", data: char }),
-          );
-        }
-
-        updateCurrentCommand(selectedCommand);
-
-        setShowAutocomplete(false);
-        setAutocompleteSuggestions([]);
-        currentAutocompleteCommand.current = "";
-
-        setTimeout(() => {
-          terminal?.focus();
-        }, 50);
-
-        console.log(`[Autocomplete] ${currentCmd} → ${selectedCommand}`);
-      },
-      [terminal, updateCurrentCommand],
-    );
-
-    const handleDeleteCommand = useCallback(
-      async (command: string) => {
-        if (!hostConfig.id) return;
-
-        try {
-          const { deleteCommandFromHistory } = await import(
-            "@/ui/main-axios.ts"
-          );
-          await deleteCommandFromHistory(hostConfig.id, command);
-
-          setCommandHistory((prev) => {
-            const newHistory = prev.filter((cmd) => cmd !== command);
-            setCommandHistoryContextRef.current(newHistory);
-            return newHistory;
-          });
-
-          autocompleteHistory.current = autocompleteHistory.current.filter(
-            (cmd) => cmd !== command,
-          );
-
-          console.log(`[Terminal] Command deleted from history: ${command}`);
-        } catch (error) {
-          console.error("Failed to delete command from history:", error);
-        }
-      },
-      [hostConfig.id],
-    );
-
-    useEffect(() => {
-      commandHistoryContext.setOnDeleteCommand(handleDeleteCommand);
-    }, [handleDeleteCommand]);
-
-    useEffect(() => {
-      if (!terminal || !xtermRef.current) return;
-
-      const config = {
-        ...DEFAULT_TERMINAL_CONFIG,
-        ...hostConfig.terminalConfig,
-      };
-
-      const themeColors =
-        TERMINAL_THEMES[config.theme]?.colors || TERMINAL_THEMES.termix.colors;
-
-      const fontConfig = TERMINAL_FONTS.find(
-        (f) => f.value === config.fontFamily,
-      );
-      const fontFamily = fontConfig?.fallback || TERMINAL_FONTS[0].fallback;
-
-      terminal.options = {
-        cursorBlink: config.cursorBlink,
-        cursorStyle: config.cursorStyle,
-        scrollback: config.scrollback,
-        fontSize: config.fontSize,
-        fontFamily,
-        allowTransparency: true,
-        convertEol: true,
-        windowsMode: false,
-        macOptionIsMeta: false,
-        macOptionClickForcesSelection: false,
-        rightClickSelectsWord: config.rightClickSelectsWord,
-        fastScrollModifier: config.fastScrollModifier,
-        fastScrollSensitivity: config.fastScrollSensitivity,
-        allowProposedApi: true,
-        minimumContrastRatio: config.minimumContrastRatio,
-        letterSpacing: config.letterSpacing,
-        lineHeight: config.lineHeight,
-        bellStyle: config.bellStyle as "none" | "sound" | "visual" | "both",
-
-        theme: {
-          background: themeColors.background,
-          foreground: themeColors.foreground,
-          cursor: themeColors.cursor,
-          cursorAccent: themeColors.cursorAccent,
-          selectionBackground: themeColors.selectionBackground,
-          selectionForeground: themeColors.selectionForeground,
-          black: themeColors.black,
-          red: themeColors.red,
-          green: themeColors.green,
-          yellow: themeColors.yellow,
-          blue: themeColors.blue,
-          magenta: themeColors.magenta,
-          cyan: themeColors.cyan,
-          white: themeColors.white,
-          brightBlack: themeColors.brightBlack,
-          brightRed: themeColors.brightRed,
-          brightGreen: themeColors.brightGreen,
-          brightYellow: themeColors.brightYellow,
-          brightBlue: themeColors.brightBlue,
-          brightMagenta: themeColors.brightMagenta,
-          brightCyan: themeColors.brightCyan,
-          brightWhite: themeColors.brightWhite,
-        },
-      };
-
-      const fitAddon = new FitAddon();
-      const clipboardAddon = new ClipboardAddon();
-      const unicode11Addon = new Unicode11Addon();
-      const webLinksAddon = new WebLinksAddon();
-
-      fitAddonRef.current = fitAddon;
-      terminal.loadAddon(fitAddon);
-      terminal.loadAddon(clipboardAddon);
-      terminal.loadAddon(unicode11Addon);
-      terminal.loadAddon(webLinksAddon);
-
-      terminal.unicode.activeVersion = "11";
-
-      terminal.open(xtermRef.current);
-
-      const element = xtermRef.current;
-      const handleContextMenu = async (e: MouseEvent) => {
-        if (!getUseRightClickCopyPaste()) return;
-        e.preventDefault();
-        e.stopPropagation();
-        try {
-          if (terminal.hasSelection()) {
-            const selection = terminal.getSelection();
-            if (selection) {
-              await writeTextToClipboard(selection);
-              terminal.clearSelection();
-            }
-          } else {
-            const pasteText = await readTextFromClipboard();
-            if (pasteText) terminal.paste(pasteText);
-          }
-        } catch (error) {
-          console.error("Terminal operation failed:", error);
-        }
-      };
-      element?.addEventListener("contextmenu", handleContextMenu);
-
-      const handleMacKeyboard = (e: KeyboardEvent) => {
-        const isMacOS =
-          navigator.platform.toUpperCase().indexOf("MAC") >= 0 ||
-          navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
-
-        if (
-          e.ctrlKey &&
-          e.key === "r" &&
-          !e.shiftKey &&
-          !e.altKey &&
-          !e.metaKey
-        ) {
-          e.preventDefault();
-          e.stopPropagation();
-          setShowHistoryDialog(true);
-          if (commandHistoryContext.openCommandHistory) {
-            commandHistoryContext.openCommandHistory();
-          }
-          return false;
-        }
-
-        if (
-          config.backspaceMode === "control-h" &&
-          e.key === "Backspace" &&
-          !e.ctrlKey &&
-          !e.metaKey &&
-          !e.altKey
-        ) {
-          e.preventDefault();
-          e.stopPropagation();
-          if (webSocketRef.current?.readyState === 1) {
-            webSocketRef.current.send(
-              JSON.stringify({ type: "input", data: "\x08" }),
+            const fontConfig = TERMINAL_FONTS.find(
+                (f) => f.value === config.fontFamily,
             );
-          }
-          return false;
-        }
+            const fontFamily = fontConfig?.fallback || TERMINAL_FONTS[0].fallback;
 
-        if (!isMacOS) return;
+            terminal.options = {
+                cursorBlink: config.cursorBlink,
+                cursorStyle: config.cursorStyle,
+                scrollback: config.scrollback,
+                fontSize: config.fontSize,
+                fontFamily,
+                allowTransparency: true,
+                convertEol: true,
+                windowsMode: false,
+                macOptionIsMeta: false,
+                macOptionClickForcesSelection: false,
+                rightClickSelectsWord: config.rightClickSelectsWord,
+                fastScrollModifier: config.fastScrollModifier,
+                fastScrollSensitivity: config.fastScrollSensitivity,
+                allowProposedApi: true,
+                minimumContrastRatio: config.minimumContrastRatio,
+                letterSpacing: config.letterSpacing,
+                lineHeight: config.lineHeight,
+                bellStyle: config.bellStyle as "none" | "sound" | "visual" | "both",
 
-        if (e.altKey && !e.metaKey && !e.ctrlKey) {
-          const keyMappings: { [key: string]: string } = {
-            "7": "|",
-            "2": "€",
-            "8": "[",
-            "9": "]",
-            l: "@",
-            L: "@",
-            Digit7: "|",
-            Digit2: "€",
-            Digit8: "[",
-            Digit9: "]",
-            KeyL: "@",
-          };
+                theme: {
+                    background: themeColors.background,
+                    foreground: themeColors.foreground,
+                    cursor: themeColors.cursor,
+                    cursorAccent: themeColors.cursorAccent,
+                    selectionBackground: themeColors.selectionBackground,
+                    selectionForeground: themeColors.selectionForeground,
+                    black: themeColors.black,
+                    red: themeColors.red,
+                    green: themeColors.green,
+                    yellow: themeColors.yellow,
+                    blue: themeColors.blue,
+                    magenta: themeColors.magenta,
+                    cyan: themeColors.cyan,
+                    white: themeColors.white,
+                    brightBlack: themeColors.brightBlack,
+                    brightRed: themeColors.brightRed,
+                    brightGreen: themeColors.brightGreen,
+                    brightYellow: themeColors.brightYellow,
+                    brightBlue: themeColors.brightBlue,
+                    brightMagenta: themeColors.brightMagenta,
+                    brightCyan: themeColors.brightCyan,
+                    brightWhite: themeColors.brightWhite,
+                },
+            };
 
-          const char = keyMappings[e.key] || keyMappings[e.code];
-          if (char) {
-            e.preventDefault();
-            e.stopPropagation();
+            const fitAddon = new FitAddon();
+            const clipboardAddon = new ClipboardAddon();
+            const unicode11Addon = new Unicode11Addon();
+            const webLinksAddon = new WebLinksAddon();
 
-            if (webSocketRef.current?.readyState === 1) {
-              webSocketRef.current.send(
-                JSON.stringify({ type: "input", data: char }),
-              );
-            }
-            return false;
-          }
-        }
-      };
+            fitAddonRef.current = fitAddon;
+            terminal.loadAddon(fitAddon);
+            terminal.loadAddon(clipboardAddon);
+            terminal.loadAddon(unicode11Addon);
+            terminal.loadAddon(webLinksAddon);
 
-      element?.addEventListener("keydown", handleMacKeyboard, true);
+            terminal.unicode.activeVersion = "11";
 
-      const resizeObserver = new ResizeObserver(() => {
-        if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
-        resizeTimeout.current = setTimeout(() => {
-          if (!isVisibleRef.current || !isReady) return;
-          performFit();
-        }, 50);
-      });
+            terminal.open(xtermRef.current);
 
-      resizeObserver.observe(xtermRef.current);
+            const element = xtermRef.current;
+            const handleContextMenu = async (e: MouseEvent) => {
+                if (!getUseRightClickCopyPaste()) return;
+                e.preventDefault();
+                e.stopPropagation();
+                try {
+                    if (terminal.hasSelection()) {
+                        const selection = terminal.getSelection();
+                        if (selection) {
+                            await writeTextToClipboard(selection);
+                            terminal.clearSelection();
+                        }
+                    } else {
+                        const pasteText = await readTextFromClipboard();
+                        if (pasteText) terminal.paste(pasteText);
+                    }
+                } catch (error) {
+                    console.error("Terminal operation failed:", error);
+                }
+            };
+            element?.addEventListener("contextmenu", handleContextMenu);
 
-      setVisible(true);
+            const handleMacKeyboard = (e: KeyboardEvent) => {
+                const isMacOS =
+                    navigator.platform.toUpperCase().indexOf("MAC") >= 0 ||
+                    navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
 
-      return () => {
-        isUnmountingRef.current = true;
-        shouldNotReconnectRef.current = true;
-        isReconnectingRef.current = false;
-        setIsConnecting(false);
-        setVisible(false);
-        setIsReady(false);
-        isFittingRef.current = false;
-        resizeObserver.disconnect();
-        element?.removeEventListener("contextmenu", handleContextMenu);
-        element?.removeEventListener("keydown", handleMacKeyboard, true);
-        if (notifyTimerRef.current) clearTimeout(notifyTimerRef.current);
-        if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
-        if (reconnectTimeoutRef.current)
-          clearTimeout(reconnectTimeoutRef.current);
-        if (connectionTimeoutRef.current)
-          clearTimeout(connectionTimeoutRef.current);
-        if (pingIntervalRef.current) {
-          clearInterval(pingIntervalRef.current);
-          pingIntervalRef.current = null;
-        }
-        webSocketRef.current?.close();
-      };
-    }, [xtermRef, terminal, hostConfig]);
+                if (
+                    e.ctrlKey &&
+                    e.key === "r" &&
+                    !e.shiftKey &&
+                    !e.altKey &&
+                    !e.metaKey
+                ) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setShowHistoryDialog(true);
+                    if (commandHistoryContext.openCommandHistory) {
+                        commandHistoryContext.openCommandHistory();
+                    }
+                    return false;
+                }
 
-    useEffect(() => {
-      if (!terminal) return;
+                if (
+                    config.backspaceMode === "control-h" &&
+                    e.key === "Backspace" &&
+                    !e.ctrlKey &&
+                    !e.metaKey &&
+                    !e.altKey
+                ) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (webSocketRef.current?.readyState === 1) {
+                        webSocketRef.current.send(
+                            JSON.stringify({ type: "input", data: "\x08" }),
+                        );
+                    }
+                    return false;
+                }
 
-      const handleCustomKey = (e: KeyboardEvent): boolean => {
-        if (e.type !== "keydown") {
-          return true;
-        }
+                if (!isMacOS) return;
 
-        if (showAutocompleteRef.current) {
-          if (e.key === "Escape") {
-            e.preventDefault();
-            e.stopPropagation();
-            setShowAutocomplete(false);
-            setAutocompleteSuggestions([]);
-            currentAutocompleteCommand.current = "";
-            return false;
-          }
+                if (e.altKey && !e.metaKey && !e.ctrlKey) {
+                    const keyMappings: { [key: string]: string } = {
+                        "7": "|",
+                        "2": "€",
+                        "8": "[",
+                        "9": "]",
+                        l: "@",
+                        L: "@",
+                        Digit7: "|",
+                        Digit2: "€",
+                        Digit8: "[",
+                        Digit9: "]",
+                        KeyL: "@",
+                    };
 
-          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-            e.preventDefault();
-            e.stopPropagation();
+                    const char = keyMappings[e.key] || keyMappings[e.code];
+                    if (char) {
+                        e.preventDefault();
+                        e.stopPropagation();
 
-            const currentIndex = autocompleteSelectedIndexRef.current;
-            const suggestionsLength = autocompleteSuggestionsRef.current.length;
+                        if (webSocketRef.current?.readyState === 1) {
+                            webSocketRef.current.send(
+                                JSON.stringify({ type: "input", data: char }),
+                            );
+                        }
+                        return false;
+                    }
+                }
+            };
 
-            if (e.key === "ArrowDown") {
-              const newIndex =
-                currentIndex < suggestionsLength - 1 ? currentIndex + 1 : 0;
-              setAutocompleteSelectedIndex(newIndex);
-            } else if (e.key === "ArrowUp") {
-              const newIndex =
-                currentIndex > 0 ? currentIndex - 1 : suggestionsLength - 1;
-              setAutocompleteSelectedIndex(newIndex);
-            }
-            return false;
-          }
+            element?.addEventListener("keydown", handleMacKeyboard, true);
 
-          if (
-            e.key === "Enter" &&
-            autocompleteSuggestionsRef.current.length > 0
-          ) {
-            e.preventDefault();
-            e.stopPropagation();
+            const resizeObserver = new ResizeObserver(() => {
+                if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
+                resizeTimeout.current = setTimeout(() => {
+                    if (!isVisibleRef.current || !isReady) return;
+                    performFit();
+                }, 50);
+            });
 
-            const selectedCommand =
-              autocompleteSuggestionsRef.current[
-                autocompleteSelectedIndexRef.current
-              ];
-            const currentCmd = currentAutocompleteCommand.current;
-            const completion = selectedCommand.substring(currentCmd.length);
+            resizeObserver.observe(xtermRef.current);
 
-            if (webSocketRef.current?.readyState === 1) {
-              for (const char of completion) {
-                webSocketRef.current.send(
-                  JSON.stringify({ type: "input", data: char }),
-                );
-              }
-            }
+            setVisible(true);
 
-            updateCurrentCommandRef.current(selectedCommand);
+            return () => {
+                isUnmountingRef.current = true;
+                shouldNotReconnectRef.current = true;
+                isReconnectingRef.current = false;
+                setIsConnecting(false);
+                setVisible(false);
+                setIsReady(false);
+                isFittingRef.current = false;
+                resizeObserver.disconnect();
+                element?.removeEventListener("contextmenu", handleContextMenu);
+                element?.removeEventListener("keydown", handleMacKeyboard, true);
+                if (notifyTimerRef.current) clearTimeout(notifyTimerRef.current);
+                if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
+                if (reconnectTimeoutRef.current)
+                    clearTimeout(reconnectTimeoutRef.current);
+                if (connectionTimeoutRef.current)
+                    clearTimeout(connectionTimeoutRef.current);
+                if (pingIntervalRef.current) {
+                    clearInterval(pingIntervalRef.current);
+                    pingIntervalRef.current = null;
+                }
+                webSocketRef.current?.close();
+            };
+        }, [xtermRef, terminal, hostConfig]);
 
-            setShowAutocomplete(false);
-            setAutocompleteSuggestions([]);
-            currentAutocompleteCommand.current = "";
+        useEffect(() => {
+            if (!terminal) return;
 
-            return false;
-          }
+            const handleCustomKey = (e: KeyboardEvent): boolean => {
+                if (e.type !== "keydown") {
+                    return true;
+                }
 
-          if (
-            e.key === "Tab" &&
-            !e.ctrlKey &&
-            !e.altKey &&
-            !e.metaKey &&
-            !e.shiftKey
-          ) {
-            e.preventDefault();
-            e.stopPropagation();
-            const currentIndex = autocompleteSelectedIndexRef.current;
-            const suggestionsLength = autocompleteSuggestionsRef.current.length;
-            const newIndex =
-              currentIndex < suggestionsLength - 1 ? currentIndex + 1 : 0;
-            setAutocompleteSelectedIndex(newIndex);
-            return false;
-          }
+                if (showAutocompleteRef.current) {
+                    if (e.key === "Escape") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setShowAutocomplete(false);
+                        setAutocompleteSuggestions([]);
+                        currentAutocompleteCommand.current = "";
+                        return false;
+                    }
 
-          setShowAutocomplete(false);
-          setAutocompleteSuggestions([]);
-          currentAutocompleteCommand.current = "";
-          return true;
-        }
+                    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                        e.preventDefault();
+                        e.stopPropagation();
 
-        if (
-          e.key === "Tab" &&
-          !e.ctrlKey &&
-          !e.altKey &&
-          !e.metaKey &&
-          !e.shiftKey
-        ) {
-          e.preventDefault();
-          e.stopPropagation();
+                        const currentIndex = autocompleteSelectedIndexRef.current;
+                        const suggestionsLength = autocompleteSuggestionsRef.current.length;
 
-          const autocompleteEnabled =
-            localStorage.getItem("commandAutocomplete") !== "false";
+                        if (e.key === "ArrowDown") {
+                            const newIndex =
+                                currentIndex < suggestionsLength - 1 ? currentIndex + 1 : 0;
+                            setAutocompleteSelectedIndex(newIndex);
+                        } else if (e.key === "ArrowUp") {
+                            const newIndex =
+                                currentIndex > 0 ? currentIndex - 1 : suggestionsLength - 1;
+                            setAutocompleteSelectedIndex(newIndex);
+                        }
+                        return false;
+                    }
 
-          if (!autocompleteEnabled) {
-            if (webSocketRef.current?.readyState === 1) {
-              webSocketRef.current.send(
-                JSON.stringify({ type: "input", data: "\t" }),
-              );
-            }
-            return false;
-          }
+                    if (
+                        e.key === "Enter" &&
+                        autocompleteSuggestionsRef.current.length > 0
+                    ) {
+                        e.preventDefault();
+                        e.stopPropagation();
 
-          const currentCmd = getCurrentCommandRef.current().trim();
-          if (currentCmd.length > 0 && webSocketRef.current?.readyState === 1) {
-            const matches = autocompleteHistory.current
-              .filter(
-                (cmd) =>
-                  cmd.startsWith(currentCmd) &&
-                  cmd !== currentCmd &&
-                  cmd.length > currentCmd.length,
-              )
-              .slice(0, 5);
+                        const selectedCommand =
+                            autocompleteSuggestionsRef.current[
+                            autocompleteSelectedIndexRef.current
+                            ];
+                        const currentCmd = currentAutocompleteCommand.current;
+                        const completion = selectedCommand.substring(currentCmd.length);
 
-            if (matches.length === 1) {
-              const completedCommand = matches[0];
-              const completion = completedCommand.substring(currentCmd.length);
+                        if (webSocketRef.current?.readyState === 1) {
+                            for (const char of completion) {
+                                webSocketRef.current.send(
+                                    JSON.stringify({ type: "input", data: char }),
+                                );
+                            }
+                        }
 
-              for (const char of completion) {
-                webSocketRef.current.send(
-                  JSON.stringify({ type: "input", data: char }),
-                );
-              }
+                        updateCurrentCommandRef.current(selectedCommand);
 
-              updateCurrentCommandRef.current(completedCommand);
-            } else if (matches.length > 1) {
-              currentAutocompleteCommand.current = currentCmd;
-              setAutocompleteSuggestions(matches);
-              setAutocompleteSelectedIndex(0);
+                        setShowAutocomplete(false);
+                        setAutocompleteSuggestions([]);
+                        currentAutocompleteCommand.current = "";
 
-              const cursorY = terminal.buffer.active.cursorY;
-              const cursorX = terminal.buffer.active.cursorX;
-              const rect = xtermRef.current?.getBoundingClientRect();
+                        return false;
+                    }
 
-              if (rect) {
-                const cellHeight =
-                  terminal.rows > 0 ? rect.height / terminal.rows : 20;
-                const cellWidth =
-                  terminal.cols > 0 ? rect.width / terminal.cols : 10;
+                    if (
+                        e.key === "Tab" &&
+                        !e.ctrlKey &&
+                        !e.altKey &&
+                        !e.metaKey &&
+                        !e.shiftKey
+                    ) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const currentIndex = autocompleteSelectedIndexRef.current;
+                        const suggestionsLength = autocompleteSuggestionsRef.current.length;
+                        const newIndex =
+                            currentIndex < suggestionsLength - 1 ? currentIndex + 1 : 0;
+                        setAutocompleteSelectedIndex(newIndex);
+                        return false;
+                    }
 
-                const itemHeight = 32;
-                const footerHeight = 32;
-                const maxMenuHeight = 240;
-                const estimatedMenuHeight = Math.min(
-                  matches.length * itemHeight + footerHeight,
-                  maxMenuHeight,
-                );
-                const cursorBottomY = rect.top + (cursorY + 1) * cellHeight;
-                const cursorTopY = rect.top + cursorY * cellHeight;
-                const spaceBelow = window.innerHeight - cursorBottomY;
-                const spaceAbove = cursorTopY;
+                    setShowAutocomplete(false);
+                    setAutocompleteSuggestions([]);
+                    currentAutocompleteCommand.current = "";
+                    return true;
+                }
 
-                const showAbove =
-                  spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow;
+                if (
+                    e.key === "Tab" &&
+                    !e.ctrlKey &&
+                    !e.altKey &&
+                    !e.metaKey &&
+                    !e.shiftKey
+                ) {
+                    e.preventDefault();
+                    e.stopPropagation();
 
-                setAutocompletePosition({
-                  top: showAbove
-                    ? Math.max(0, cursorTopY - estimatedMenuHeight)
-                    : cursorBottomY,
-                  left: Math.max(0, rect.left + cursorX * cellWidth),
+                    const autocompleteEnabled =
+                        localStorage.getItem("commandAutocomplete") !== "false";
+
+                    if (!autocompleteEnabled) {
+                        if (webSocketRef.current?.readyState === 1) {
+                            webSocketRef.current.send(
+                                JSON.stringify({ type: "input", data: "\t" }),
+                            );
+                        }
+                        return false;
+                    }
+
+                    const currentCmd = getCurrentCommandRef.current().trim();
+                    if (currentCmd.length > 0 && webSocketRef.current?.readyState === 1) {
+                        const matches = autocompleteHistory.current
+                            .filter(
+                                (cmd) =>
+                                    cmd.startsWith(currentCmd) &&
+                                    cmd !== currentCmd &&
+                                    cmd.length > currentCmd.length,
+                            )
+                            .slice(0, 5);
+
+                        if (matches.length === 1) {
+                            const completedCommand = matches[0];
+                            const completion = completedCommand.substring(currentCmd.length);
+
+                            for (const char of completion) {
+                                webSocketRef.current.send(
+                                    JSON.stringify({ type: "input", data: char }),
+                                );
+                            }
+
+                            updateCurrentCommandRef.current(completedCommand);
+                        } else if (matches.length > 1) {
+                            currentAutocompleteCommand.current = currentCmd;
+                            setAutocompleteSuggestions(matches);
+                            setAutocompleteSelectedIndex(0);
+
+                            const cursorY = terminal.buffer.active.cursorY;
+                            const cursorX = terminal.buffer.active.cursorX;
+                            const rect = xtermRef.current?.getBoundingClientRect();
+
+                            if (rect) {
+                                const cellHeight =
+                                    terminal.rows > 0 ? rect.height / terminal.rows : 20;
+                                const cellWidth =
+                                    terminal.cols > 0 ? rect.width / terminal.cols : 10;
+
+                                const itemHeight = 32;
+                                const footerHeight = 32;
+                                const maxMenuHeight = 240;
+                                const estimatedMenuHeight = Math.min(
+                                    matches.length * itemHeight + footerHeight,
+                                    maxMenuHeight,
+                                );
+                                const cursorBottomY = rect.top + (cursorY + 1) * cellHeight;
+                                const cursorTopY = rect.top + cursorY * cellHeight;
+                                const spaceBelow = window.innerHeight - cursorBottomY;
+                                const spaceAbove = cursorTopY;
+
+                                const showAbove =
+                                    spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow;
+
+                                setAutocompletePosition({
+                                    top: showAbove
+                                        ? Math.max(0, cursorTopY - estimatedMenuHeight)
+                                        : cursorBottomY,
+                                    left: Math.max(0, rect.left + cursorX * cellWidth),
+                                });
+                            }
+
+                            setShowAutocomplete(true);
+                        }
+                    }
+                    return false;
+                }
+
+                return true;
+            };
+
+            terminal.attachCustomKeyEventHandler(handleCustomKey);
+        }, [terminal]);
+
+        useEffect(() => {
+            if (!terminal || !hostConfig || !visible) return;
+
+            if (isConnected || isConnecting) return;
+
+            setIsConnecting(true);
+
+            const readyFonts =
+                (document as { fonts?: { ready?: Promise<unknown> } }).fonts
+                    ?.ready instanceof Promise
+                    ? (document as { fonts?: { ready?: Promise<unknown> } }).fonts.ready
+                    : Promise.resolve();
+
+            readyFonts.then(() => {
+                requestAnimationFrame(() => {
+                    fitAddonRef.current?.fit();
+                    if (terminal && terminal.cols > 0 && terminal.rows > 0) {
+                        scheduleNotify(terminal.cols, terminal.rows);
+                    }
+                    hardRefresh();
+
+                    setVisible(true);
+                    setIsReady(true);
+
+                    if (terminal && !splitScreen) {
+                        terminal.focus();
+                    }
+
+                    const jwtToken = getCookie("jwt");
+
+                    if (!jwtToken || jwtToken.trim() === "") {
+                        setIsConnected(false);
+                        setIsConnecting(false);
+                        setConnectionError("Authentication required");
+                        return;
+                    }
+
+                    const cols = terminal.cols;
+                    const rows = terminal.rows;
+
+                    connectToHost(cols, rows);
                 });
-              }
+            });
+        }, [terminal, hostConfig, visible, isConnected, isConnecting, splitScreen]);
 
-              setShowAutocomplete(true);
+        useEffect(() => {
+            if (!isVisible || !isReady || !fitAddonRef.current || !terminal) {
+                return;
             }
-          }
-          return false;
-        }
 
-        return true;
-      };
+            let rafId: number;
 
-      terminal.attachCustomKeyEventHandler(handleCustomKey);
-    }, [terminal]);
+            rafId = requestAnimationFrame(() => {
+                performFit();
+            });
 
-    useEffect(() => {
-      if (!terminal || !hostConfig || !visible) return;
+            return () => {
+                if (rafId) cancelAnimationFrame(rafId);
+            };
+        }, [isVisible, isReady, splitScreen, terminal]);
 
-      if (isConnected || isConnecting) return;
-
-      setIsConnecting(true);
-
-      const readyFonts =
-        (document as { fonts?: { ready?: Promise<unknown> } }).fonts
-          ?.ready instanceof Promise
-          ? (document as { fonts?: { ready?: Promise<unknown> } }).fonts.ready
-          : Promise.resolve();
-
-      readyFonts.then(() => {
-        requestAnimationFrame(() => {
-          fitAddonRef.current?.fit();
-          if (terminal && terminal.cols > 0 && terminal.rows > 0) {
-            scheduleNotify(terminal.cols, terminal.rows);
-          }
-          hardRefresh();
-
-          setVisible(true);
-          setIsReady(true);
-
-          if (terminal && !splitScreen) {
-            terminal.focus();
-          }
-
-          const jwtToken = getCookie("jwt");
-
-          if (!jwtToken || jwtToken.trim() === "") {
-            setIsConnected(false);
-            setIsConnecting(false);
-            setConnectionError("Authentication required");
-            return;
-          }
-
-          const cols = terminal.cols;
-          const rows = terminal.rows;
-
-          connectToHost(cols, rows);
-        });
-      });
-    }, [terminal, hostConfig, visible, isConnected, isConnecting, splitScreen]);
-
-    useEffect(() => {
-      if (!isVisible || !isReady || !fitAddonRef.current || !terminal) {
-        return;
-      }
-
-      let rafId: number;
-
-      rafId = requestAnimationFrame(() => {
-        performFit();
-      });
-
-      return () => {
-        if (rafId) cancelAnimationFrame(rafId);
-      };
-    }, [isVisible, isReady, splitScreen, terminal]);
-
-    useEffect(() => {
-      if (
-        isFitted &&
-        isVisible &&
-        isReady &&
-        !isConnecting &&
-        terminal &&
-        !splitScreen
-      ) {
-        const rafId = requestAnimationFrame(() => {
-          terminal.focus();
-        });
-        return () => cancelAnimationFrame(rafId);
-      }
-    }, [isFitted, isVisible, isReady, isConnecting, terminal, splitScreen]);
-
-    return (
-      <div className="h-full w-full relative" style={{ backgroundColor }}>
-        <div
-          ref={xtermRef}
-          className="h-full w-full"
-          style={{
-            visibility: isReady ? "visible" : "hidden",
-            pointerEvents: isReady ? "auto" : "none",
-          }}
-          onClick={() => {
-            if (terminal && !splitScreen) {
-              terminal.focus();
+        useEffect(() => {
+            if (
+                isFitted &&
+                isVisible &&
+                isReady &&
+                !isConnecting &&
+                terminal &&
+                !splitScreen
+            ) {
+                const rafId = requestAnimationFrame(() => {
+                    terminal.focus();
+                });
+                return () => cancelAnimationFrame(rafId);
             }
-          }}
-        />
+        }, [isFitted, isVisible, isReady, isConnecting, terminal, splitScreen]);
 
-        <TOTPDialog
-          isOpen={totpRequired}
-          prompt={totpPrompt}
-          onSubmit={handleTotpSubmit}
-          onCancel={handleTotpCancel}
-          backgroundColor={backgroundColor}
-        />
+        return (
+            <div className="h-full w-full relative" style={{ backgroundColor }}>
+                <div
+                    ref={xtermRef}
+                    className="h-full w-full"
+                    style={{
+                        visibility: isReady ? "visible" : "hidden",
+                        pointerEvents: isReady ? "auto" : "none",
+                    }}
+                    onClick={() => {
+                        if (terminal && !splitScreen) {
+                            terminal.focus();
+                        }
+                    }}
+                />
 
-        <SSHAuthDialog
-          isOpen={showAuthDialog}
-          reason={authDialogReason}
-          onSubmit={handleAuthDialogSubmit}
-          onCancel={handleAuthDialogCancel}
-          hostInfo={{
-            ip: hostConfig.ip,
-            port: hostConfig.port,
-            username: hostConfig.username,
-            name: hostConfig.name,
-          }}
-          backgroundColor={backgroundColor}
-        />
+                <TOTPDialog
+                    isOpen={totpRequired}
+                    prompt={totpPrompt}
+                    onSubmit={handleTotpSubmit}
+                    onCancel={handleTotpCancel}
+                    backgroundColor={backgroundColor}
+                />
 
-        <CommandAutocomplete
-          visible={showAutocomplete}
-          suggestions={autocompleteSuggestions}
-          selectedIndex={autocompleteSelectedIndex}
-          position={autocompletePosition}
-          onSelect={handleAutocompleteSelect}
-        />
+                <SSHAuthDialog
+                    isOpen={showAuthDialog}
+                    reason={authDialogReason}
+                    onSubmit={handleAuthDialogSubmit}
+                    onCancel={handleAuthDialogCancel}
+                    hostInfo={{
+                        ip: hostConfig.ip,
+                        port: hostConfig.port,
+                        username: hostConfig.username,
+                        name: hostConfig.name,
+                    }}
+                    backgroundColor={backgroundColor}
+                />
 
-        <SimpleLoader
-          visible={isConnecting}
-          message={t("terminal.connecting")}
-          backgroundColor={backgroundColor}
-        />
-      </div>
-    );
-  },
+                <CommandAutocomplete
+                    visible={showAutocomplete}
+                    suggestions={autocompleteSuggestions}
+                    selectedIndex={autocompleteSelectedIndex}
+                    position={autocompletePosition}
+                    onSelect={handleAutocompleteSelect}
+                />
+
+                <SudoPasswordPopup
+                    isOpen={showSudoPasswordPopup}
+                    hostPassword={hostConfig.password || ""}
+                    backgroundColor={backgroundColor}
+                    onConfirm={(password) => {
+                        setShowSudoPasswordPopup(false);
+                        if (webSocketRef.current && webSocketRef.current.readyState === WebSocket.OPEN) {
+                            webSocketRef.current.send(JSON.stringify({ type: "input", data: password + "\n" }));
+                        }
+                    }}
+                    onDismiss={() => setShowSudoPasswordPopup(false)}
+                />
+
+                <SimpleLoader
+                    visible={isConnecting}
+                    message={t("terminal.connecting")}
+                    backgroundColor={backgroundColor}
+                />
+            </div>
+        );
+    },
 );
 
 const style = document.createElement("style");