chore: cleanup files (possible RC)

src/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx

@@ -42,7 +42,6 @@ export function CredentialEditor({
   const { t } = useTranslation();
   const { theme: appTheme } = useTheme();
 
-  // Determine CodeMirror theme based on app theme
   const isDarkMode =
     appTheme === "dark" ||
     (appTheme === "system" &&

src/ui/desktop/apps/host-manager/hosts/HostManager.tsx

@@ -30,6 +30,8 @@ export function HostManager({
     hostConfig || null,
   );
 
+  useEffect(() => {}, [editingHost]);
+
   const [editingCredential, setEditingCredential] = useState<{
     id: number;
     name?: string;
@@ -39,30 +41,27 @@ export function HostManager({
   const ignoreNextHostConfigChangeRef = useRef<boolean>(false);
   const lastProcessedHostIdRef = useRef<number | undefined>(undefined);
 
-  // Sync state when tab is updated externally (via updateTab or addTab)
   useEffect(() => {
-    // Always sync on timestamp changes
     if (_updateTimestamp !== undefined) {
-      // Update activeTab if initialTab has changed
       if (initialTab && initialTab !== activeTab) {
         setActiveTab(initialTab);
       }
 
-      // Update editingHost if hostConfig has changed
       if (hostConfig && hostConfig.id !== editingHost?.id) {
         setEditingHost(hostConfig);
         lastProcessedHostIdRef.current = hostConfig.id;
-      } else if (!hostConfig && editingHost) {
-        // Clear editingHost if hostConfig is now undefined
+      } else if (
+        !hostConfig &&
+        editingHost &&
+        editingHost.id !== lastProcessedHostIdRef.current
+      ) {
         setEditingHost(null);
       }
 
-      // Clear editingCredential if switching away from add_credential
       if (initialTab !== "add_credential" && editingCredential) {
         setEditingCredential(null);
       }
     } else {
-      // Initial mount - set state from props
       if (initialTab) {
         setActiveTab(initialTab);
       }
@@ -78,7 +77,6 @@ export function HostManager({
     setActiveTab("add_host");
     lastProcessedHostIdRef.current = host.id;
 
-    // Persist to tab context
     if (updateTab && currentTabId !== undefined) {
       updateTab(currentTabId, { initialTab: "add_host" });
     }
@@ -101,7 +99,6 @@ export function HostManager({
     setEditingCredential(credential);
     setActiveTab("add_credential");
 
-    // Persist to tab context
     if (updateTab && currentTabId !== undefined) {
       updateTab(currentTabId, { initialTab: "add_credential" });
     }
@@ -121,7 +118,6 @@ export function HostManager({
     }
     setActiveTab(value);
 
-    // Persist to tab context
     if (updateTab && currentTabId !== undefined) {
       updateTab(currentTabId, { initialTab: value });
     }

src/ui/desktop/apps/host-manager/hosts/HostManagerViewer.tsx

@@ -363,7 +363,6 @@ export function HostManagerViewer({ onEditHost }: SSHManagerHostViewerProps) {
         ),
       );
 
-      // Wrap in hosts array for valid import format
       const exportFormat = {
         hosts: [cleanExportData],
       };

src/ui/desktop/apps/host-manager/hosts/tabs/HostDockerTab.tsx

@@ -0,0 +1,29 @@
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import type { HostDockerTabProps } from "./shared/tab-types";
+
+export function HostDockerTab({ form, t }: HostDockerTabProps) {
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={form.control}
+        name="enableDocker"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t("hosts.enableDocker")}</FormLabel>
+            <FormControl>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
+            <FormDescription>{t("hosts.enableDockerDesc")}</FormDescription>
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

src/ui/desktop/apps/host-manager/hosts/tabs/HostFileManagerTab.tsx

@@ -0,0 +1,57 @@
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import type { HostFileManagerTabProps } from "./shared/tab-types";
+
+export function HostFileManagerTab({ form, t }: HostFileManagerTabProps) {
+  return (
+    <div>
+      <FormField
+        control={form.control}
+        name="enableFileManager"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t("hosts.enableFileManager")}</FormLabel>
+            <FormControl>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
+            <FormDescription>
+              {t("hosts.enableFileManagerDesc")}
+            </FormDescription>
+          </FormItem>
+        )}
+      />
+
+      {form.watch("enableFileManager") && (
+        <div className="mt-4">
+          <FormField
+            control={form.control}
+            name="defaultPath"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("hosts.defaultPath")}</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder={t("placeholders.homePath")}
+                    {...field}
+                    onBlur={(e) => {
+                      field.onChange(e.target.value.trim());
+                      field.onBlur();
+                    }}
+                  />
+                </FormControl>
+                <FormDescription>{t("hosts.defaultPathDesc")}</FormDescription>
+              </FormItem>
+            )}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

src/ui/desktop/apps/host-manager/hosts/tabs/HostSharingTab.tsx

@@ -0,0 +1,560 @@
+import React from "react";
+import { cn } from "@/lib/utils.ts";
+import { Button } from "@/components/ui/button.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { toast } from "sonner";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+import {
+  getRoles,
+  getUserList,
+  getUserInfo,
+  shareHost,
+  getHostAccess,
+  revokeHostAccess,
+  getSSHHostById,
+  type Role,
+  type AccessRecord,
+} from "@/ui/main-axios.ts";
+import { useTranslation } from "react-i18next";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command.tsx";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover.tsx";
+import {
+  Plus,
+  Check,
+  ChevronsUpDown,
+  AlertCircle,
+  Trash2,
+  Users,
+  Shield,
+  Clock,
+  UserCircle,
+} from "lucide-react";
+import type { SSHHost } from "@/types";
+import type { HostSharingTabProps } from "./shared/tab-types";
+
+interface User {
+  id: string;
+  username: string;
+  is_admin: boolean;
+}
+
+interface HostSharingTabProps {
+  hostId: number | undefined;
+  isNewHost: boolean;
+}
+
+export function HostSharingTab({
+  hostId,
+  isNewHost,
+}: SharingTabContentProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+
+  const [shareType, setShareType] = React.useState<"user" | "role">("user");
+  const [selectedUserId, setSelectedUserId] = React.useState<string>("");
+  const [selectedRoleId, setSelectedRoleId] = React.useState<number | null>(
+    null,
+  );
+  const [permissionLevel, setPermissionLevel] = React.useState("view");
+  const [expiresInHours, setExpiresInHours] = React.useState<string>("");
+
+  const [roles, setRoles] = React.useState<Role[]>([]);
+  const [users, setUsers] = React.useState<User[]>([]);
+  const [accessList, setAccessList] = React.useState<AccessRecord[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [currentUserId, setCurrentUserId] = React.useState<string>("");
+  const [hostData, setHostData] = React.useState<SSHHost | null>(null);
+
+  const [userComboOpen, setUserComboOpen] = React.useState(false);
+  const [roleComboOpen, setRoleComboOpen] = React.useState(false);
+
+  const loadRoles = React.useCallback(async () => {
+    try {
+      const response = await getRoles();
+      setRoles(response.roles || []);
+    } catch (error) {
+      console.error("Failed to load roles:", error);
+      setRoles([]);
+    }
+  }, []);
+
+  const loadUsers = React.useCallback(async () => {
+    try {
+      const response = await getUserList();
+      const mappedUsers = (response.users || []).map((user) => ({
+        id: user.id,
+        username: user.username,
+        is_admin: user.is_admin,
+      }));
+      setUsers(mappedUsers);
+    } catch (error) {
+      console.error("Failed to load users:", error);
+      setUsers([]);
+    }
+  }, []);
+
+  const loadAccessList = React.useCallback(async () => {
+    if (!hostId) return;
+
+    setLoading(true);
+    try {
+      const response = await getHostAccess(hostId);
+      setAccessList(response.accessList || []);
+    } catch (error) {
+      console.error("Failed to load access list:", error);
+      setAccessList([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [hostId]);
+
+  const loadHostData = React.useCallback(async () => {
+    if (!hostId) return;
+
+    try {
+      const host = await getSSHHostById(hostId);
+      setHostData(host);
+    } catch (error) {
+      console.error("Failed to load host data:", error);
+      setHostData(null);
+    }
+  }, [hostId]);
+
+  React.useEffect(() => {
+    loadRoles();
+    loadUsers();
+    if (!isNewHost) {
+      loadAccessList();
+      loadHostData();
+    }
+  }, [loadRoles, loadUsers, loadAccessList, loadHostData, isNewHost]);
+
+  React.useEffect(() => {
+    const fetchCurrentUser = async () => {
+      try {
+        const userInfo = await getUserInfo();
+        setCurrentUserId(userInfo.userId);
+      } catch (error) {
+        console.error("Failed to load current user:", error);
+      }
+    };
+    fetchCurrentUser();
+  }, []);
+
+  const handleShare = async () => {
+    if (!hostId) {
+      toast.error(t("rbac.saveHostFirst"));
+      return;
+    }
+
+    if (shareType === "user" && !selectedUserId) {
+      toast.error(t("rbac.selectUser"));
+      return;
+    }
+
+    if (shareType === "role" && !selectedRoleId) {
+      toast.error(t("rbac.selectRole"));
+      return;
+    }
+
+    if (shareType === "user" && selectedUserId === currentUserId) {
+      toast.error(t("rbac.cannotShareWithSelf"));
+      return;
+    }
+
+    try {
+      await shareHost(hostId, {
+        targetType: shareType,
+        targetUserId: shareType === "user" ? selectedUserId : undefined,
+        targetRoleId: shareType === "role" ? selectedRoleId : undefined,
+        permissionLevel,
+        durationHours: expiresInHours
+          ? parseInt(expiresInHours, 10)
+          : undefined,
+      });
+
+      toast.success(t("rbac.sharedSuccessfully"));
+      setSelectedUserId("");
+      setSelectedRoleId(null);
+      setExpiresInHours("");
+      loadAccessList();
+    } catch (error) {
+      toast.error(t("rbac.failedToShare"));
+    }
+  };
+
+  const handleRevoke = async (accessId: number) => {
+    if (!hostId) return;
+
+    const confirmed = await confirmWithToast({
+      title: t("rbac.confirmRevokeAccess"),
+      description: t("rbac.confirmRevokeAccessDescription"),
+      confirmText: t("common.revoke"),
+      cancelText: t("common.cancel"),
+    });
+
+    if (!confirmed) return;
+
+    try {
+      await revokeHostAccess(hostId, accessId);
+      toast.success(t("rbac.accessRevokedSuccessfully"));
+      loadAccessList();
+    } catch (error) {
+      toast.error(t("rbac.failedToRevokeAccess"));
+    }
+  };
+
+  const formatDate = (dateString: string | null) => {
+    if (!dateString) return "-";
+    return new Date(dateString).toLocaleString();
+  };
+
+  const isExpired = (expiresAt: string | null) => {
+    if (!expiresAt) return false;
+    return new Date(expiresAt) < new Date();
+  };
+
+  const availableUsers = React.useMemo(() => {
+    return users.filter((user) => user.id !== currentUserId);
+  }, [users, currentUserId]);
+
+  const selectedUser = availableUsers.find((u) => u.id === selectedUserId);
+  const selectedRole = roles.find((r) => r.id === selectedRoleId);
+
+  if (isNewHost) {
+    return (
+      <Alert>
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>{t("rbac.saveHostFirst")}</AlertTitle>
+        <AlertDescription>
+          {t("rbac.saveHostFirstDescription")}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {!hostData?.credentialId && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>{t("rbac.credentialRequired")}</AlertTitle>
+          <AlertDescription>
+            {t("rbac.credentialRequiredDescription")}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {hostData?.credentialId && (
+        <>
+          <div className="space-y-4 border rounded-lg p-4">
+            <h3 className="text-lg font-semibold flex items-center gap-2">
+              <Plus className="h-5 w-5" />
+              {t("rbac.shareHost")}
+            </h3>
+
+            <Tabs
+              value={shareType}
+              onValueChange={(v) => setShareType(v as "user" | "role")}
+            >
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="user" className="flex items-center gap-2">
+                  <UserCircle className="h-4 w-4" />
+                  {t("rbac.shareWithUser")}
+                </TabsTrigger>
+                <TabsTrigger value="role" className="flex items-center gap-2">
+                  <Shield className="h-4 w-4" />
+                  {t("rbac.shareWithRole")}
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="user" className="space-y-4">
+                <div className="space-y-2">
+                  <label htmlFor="user-select">{t("rbac.selectUser")}</label>
+                  <Popover open={userComboOpen} onOpenChange={setUserComboOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={userComboOpen}
+                        className="w-full justify-between"
+                      >
+                        {selectedUser
+                          ? `${selectedUser.username}${selectedUser.is_admin ? " (Admin)" : ""}`
+                          : t("rbac.selectUserPlaceholder")}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                      className="p-0"
+                      style={{ width: "var(--radix-popover-trigger-width)" }}
+                    >
+                      <Command>
+                        <CommandInput placeholder={t("rbac.searchUsers")} />
+                        <CommandEmpty>{t("rbac.noUserFound")}</CommandEmpty>
+                        <CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
+                          {availableUsers.map((user) => (
+                            <CommandItem
+                              key={user.id}
+                              value={`${user.username} ${user.id}`}
+                              onSelect={() => {
+                                setSelectedUserId(user.id);
+                                setUserComboOpen(false);
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  selectedUserId === user.id
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
+                              {user.username}
+                              {user.is_admin ? " (Admin)" : ""}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="role" className="space-y-4">
+                <div className="space-y-2">
+                  <label htmlFor="role-select">{t("rbac.selectRole")}</label>
+                  <Popover open={roleComboOpen} onOpenChange={setRoleComboOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={roleComboOpen}
+                        className="w-full justify-between"
+                      >
+                        {selectedRole
+                          ? `${t(selectedRole.displayName)}${selectedRole.isSystem ? ` (${t("rbac.systemRole")})` : ""}`
+                          : t("rbac.selectRolePlaceholder")}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                      className="p-0"
+                      style={{ width: "var(--radix-popover-trigger-width)" }}
+                    >
+                      <Command>
+                        <CommandInput placeholder={t("rbac.searchRoles")} />
+                        <CommandEmpty>{t("rbac.noRoleFound")}</CommandEmpty>
+                        <CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
+                          {roles.map((role) => (
+                            <CommandItem
+                              key={role.id}
+                              value={`${role.displayName} ${role.name} ${role.id}`}
+                              onSelect={() => {
+                                setSelectedRoleId(role.id);
+                                setRoleComboOpen(false);
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  selectedRoleId === role.id
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
+                              {t(role.displayName)}
+                              {role.isSystem
+                                ? ` (${t("rbac.systemRole")})`
+                                : ""}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </TabsContent>
+            </Tabs>
+
+            <div className="space-y-2">
+              <label>{t("rbac.permissionLevel")}</label>
+              <div className="text-sm text-muted-foreground">
+                {t("rbac.view")} - {t("rbac.viewDesc")}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="expires-in">{t("rbac.durationHours")}</label>
+              <Input
+                id="expires-in"
+                type="number"
+                value={expiresInHours}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  if (value === "" || /^\d+$/.test(value)) {
+                    setExpiresInHours(value);
+                  }
+                }}
+                placeholder={t("rbac.neverExpires")}
+                min="1"
+              />
+            </div>
+
+            <Button
+              type="button"
+              onClick={handleShare}
+              className="w-full"
+              disabled={!hostData?.credentialId}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              {t("rbac.share")}
+            </Button>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold flex items-center gap-2">
+              <Users className="h-5 w-5" />
+              {t("rbac.accessList")}
+            </h3>
+
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t("rbac.type")}</TableHead>
+                  <TableHead>{t("rbac.target")}</TableHead>
+                  <TableHead>{t("rbac.permissionLevel")}</TableHead>
+                  <TableHead>{t("rbac.grantedBy")}</TableHead>
+                  <TableHead>{t("rbac.expires")}</TableHead>
+                  <TableHead className="text-right">
+                    {t("common.actions")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={6}
+                      className="text-center text-muted-foreground"
+                    >
+                      {t("common.loading")}
+                    </TableCell>
+                  </TableRow>
+                ) : accessList.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={6}
+                      className="text-center text-muted-foreground"
+                    >
+                      {t("rbac.noAccessRecords")}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  accessList.map((access) => (
+                    <TableRow
+                      key={access.id}
+                      className={
+                        isExpired(access.expiresAt) ? "opacity-50" : ""
+                      }
+                    >
+                      <TableCell>
+                        {access.targetType === "user" ? (
+                          <Badge
+                            variant="outline"
+                            className="flex items-center gap-1 w-fit"
+                          >
+                            <UserCircle className="h-3 w-3" />
+                            {t("rbac.user")}
+                          </Badge>
+                        ) : (
+                          <Badge
+                            variant="outline"
+                            className="flex items-center gap-1 w-fit"
+                          >
+                            <Shield className="h-3 w-3" />
+                            {t("rbac.role")}
+                          </Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {access.targetType === "user"
+                          ? access.username
+                          : t(access.roleDisplayName || access.roleName || "")}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="secondary">
+                          {access.permissionLevel}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{access.grantedByUsername}</TableCell>
+                      <TableCell>
+                        {access.expiresAt ? (
+                          <div className="flex items-center gap-2">
+                            <Clock className="h-3 w-3" />
+                            <span
+                              className={
+                                isExpired(access.expiresAt)
+                                  ? "text-red-500"
+                                  : ""
+                              }
+                            >
+                              {formatDate(access.expiresAt)}
+                              {isExpired(access.expiresAt) && (
+                                <span className="ml-2">
+                                  ({t("rbac.expired")})
+                                </span>
+                              )}
+                            </span>
+                          </div>
+                        ) : (
+                          t("rbac.never")
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => handleRevoke(access.id)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/ui/desktop/apps/host-manager/hosts/tabs/HostStatisticsTab.tsx

@@ -0,0 +1,340 @@
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Checkbox } from "@/components/ui/checkbox.tsx";
+import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Plus, X } from "lucide-react";
+import type { HostStatisticsTabProps } from "./shared/tab-types";
+import { QuickActionItem } from "./shared/QuickActionItem";
+
+export function HostStatisticsTab({
+  form,
+  statusIntervalUnit,
+  setStatusIntervalUnit,
+  metricsIntervalUnit,
+  setMetricsIntervalUnit,
+  snippets,
+  t,
+}: HostStatisticsTabProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="space-y-3">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 px-3 text-xs"
+            onClick={() =>
+              window.open("https://docs.termix.site/server-stats", "_blank")
+            }
+          >
+            {t("common.documentation")}
+          </Button>
+
+          <FormField
+            control={form.control}
+            name="statsConfig.statusCheckEnabled"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
+                <div className="space-y-0.5">
+                  <FormLabel>{t("hosts.statusCheckEnabled")}</FormLabel>
+                  <FormDescription>
+                    {t("hosts.statusCheckEnabledDesc")}
+                  </FormDescription>
+                </div>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          {form.watch("statsConfig.statusCheckEnabled") && (
+            <FormField
+              control={form.control}
+              name="statsConfig.statusCheckInterval"
+              render={({ field }) => {
+                const displayValue =
+                  statusIntervalUnit === "minutes"
+                    ? Math.round((field.value || 30) / 60)
+                    : field.value || 30;
+
+                const handleIntervalChange = (value: string) => {
+                  const numValue = parseInt(value) || 0;
+                  const seconds =
+                    statusIntervalUnit === "minutes" ? numValue * 60 : numValue;
+                  field.onChange(seconds);
+                };
+
+                return (
+                  <FormItem>
+                    <FormLabel>{t("hosts.statusCheckInterval")}</FormLabel>
+                    <div className="flex gap-2">
+                      <FormControl>
+                        <Input
+                          type="number"
+                          value={displayValue}
+                          onChange={(e) => handleIntervalChange(e.target.value)}
+                          className="flex-1"
+                        />
+                      </FormControl>
+                      <Select
+                        value={statusIntervalUnit}
+                        onValueChange={(value: "seconds" | "minutes") => {
+                          setStatusIntervalUnit(value);
+                          const currentSeconds = field.value || 30;
+                          if (value === "minutes") {
+                            const minutes = Math.round(currentSeconds / 60);
+                            field.onChange(minutes * 60);
+                          }
+                        }}
+                      >
+                        <SelectTrigger className="w-[120px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="seconds">
+                            {t("hosts.intervalSeconds")}
+                          </SelectItem>
+                          <SelectItem value="minutes">
+                            {t("hosts.intervalMinutes")}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <FormDescription>
+                      {t("hosts.statusCheckIntervalDesc")}
+                    </FormDescription>
+                  </FormItem>
+                );
+              }}
+            />
+          )}
+        </div>
+
+        <div className="space-y-3">
+          <FormField
+            control={form.control}
+            name="statsConfig.metricsEnabled"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
+                <div className="space-y-0.5">
+                  <FormLabel>{t("hosts.metricsEnabled")}</FormLabel>
+                  <FormDescription>
+                    {t("hosts.metricsEnabledDesc")}
+                  </FormDescription>
+                </div>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          {form.watch("statsConfig.metricsEnabled") && (
+            <FormField
+              control={form.control}
+              name="statsConfig.metricsInterval"
+              render={({ field }) => {
+                const displayValue =
+                  metricsIntervalUnit === "minutes"
+                    ? Math.round((field.value || 30) / 60)
+                    : field.value || 30;
+
+                const handleIntervalChange = (value: string) => {
+                  const numValue = parseInt(value) || 0;
+                  const seconds =
+                    metricsIntervalUnit === "minutes"
+                      ? numValue * 60
+                      : numValue;
+                  field.onChange(seconds);
+                };
+
+                return (
+                  <FormItem>
+                    <FormLabel>{t("hosts.metricsInterval")}</FormLabel>
+                    <div className="flex gap-2">
+                      <FormControl>
+                        <Input
+                          type="number"
+                          value={displayValue}
+                          onChange={(e) => handleIntervalChange(e.target.value)}
+                          className="flex-1"
+                        />
+                      </FormControl>
+                      <Select
+                        value={metricsIntervalUnit}
+                        onValueChange={(value: "seconds" | "minutes") => {
+                          setMetricsIntervalUnit(value);
+                          const currentSeconds = field.value || 30;
+                          if (value === "minutes") {
+                            const minutes = Math.round(currentSeconds / 60);
+                            field.onChange(minutes * 60);
+                          }
+                        }}
+                      >
+                        <SelectTrigger className="w-[120px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="seconds">
+                            {t("hosts.intervalSeconds")}
+                          </SelectItem>
+                          <SelectItem value="minutes">
+                            {t("hosts.intervalMinutes")}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <FormDescription>
+                      {t("hosts.metricsIntervalDesc")}
+                    </FormDescription>
+                  </FormItem>
+                );
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      {form.watch("statsConfig.metricsEnabled") && (
+        <>
+          <FormField
+            control={form.control}
+            name="statsConfig.enabledWidgets"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("hosts.enabledWidgets")}</FormLabel>
+                <FormDescription>
+                  {t("hosts.enabledWidgetsDesc")}
+                </FormDescription>
+                <div className="space-y-3 mt-3">
+                  {(
+                    [
+                      "cpu",
+                      "memory",
+                      "disk",
+                      "network",
+                      "uptime",
+                      "processes",
+                      "system",
+                      "login_stats",
+                    ] as const
+                  ).map((widget) => (
+                    <div key={widget} className="flex items-center space-x-2">
+                      <Checkbox
+                        checked={field.value?.includes(widget)}
+                        onCheckedChange={(checked) => {
+                          const currentWidgets = field.value || [];
+                          if (checked) {
+                            field.onChange([...currentWidgets, widget]);
+                          } else {
+                            field.onChange(
+                              currentWidgets.filter((w) => w !== widget),
+                            );
+                          }
+                        }}
+                      />
+                      <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                        {widget === "cpu" && t("serverStats.cpuUsage")}
+                        {widget === "memory" && t("serverStats.memoryUsage")}
+                        {widget === "disk" && t("serverStats.diskUsage")}
+                        {widget === "network" &&
+                          t("serverStats.networkInterfaces")}
+                        {widget === "uptime" && t("serverStats.uptime")}
+                        {widget === "processes" && t("serverStats.processes")}
+                        {widget === "system" && t("serverStats.systemInfo")}
+                        {widget === "login_stats" &&
+                          t("serverStats.loginStats")}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </FormItem>
+            )}
+          />
+        </>
+      )}
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">{t("hosts.quickActions")}</h3>
+        <Alert>
+          <AlertDescription>
+            {t("hosts.quickActionsDescription")}
+          </AlertDescription>
+        </Alert>
+        <FormField
+          control={form.control}
+          name="quickActions"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("hosts.quickActionsList")}</FormLabel>
+              <FormControl>
+                <div className="space-y-3">
+                  {field.value.map((quickAction, index) => (
+                    <QuickActionItem
+                      key={index}
+                      quickAction={quickAction}
+                      index={index}
+                      snippets={snippets}
+                      onUpdate={(name, snippetId) => {
+                        const newQuickActions = [...field.value];
+                        newQuickActions[index] = {
+                          name,
+                          snippetId,
+                        };
+                        field.onChange(newQuickActions);
+                      }}
+                      onRemove={() => {
+                        const newQuickActions = field.value.filter(
+                          (_, i) => i !== index,
+                        );
+                        field.onChange(newQuickActions);
+                      }}
+                      t={t}
+                    />
+                  ))}
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      field.onChange([
+                        ...field.value,
+                        { name: "", snippetId: 0 },
+                      ]);
+                    }}
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    {t("hosts.addQuickAction")}
+                  </Button>
+                </div>
+              </FormControl>
+              <FormDescription>{t("hosts.quickActionsOrder")}</FormDescription>
+            </FormItem>
+          )}
+        />
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx

@@ -0,0 +1,767 @@
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion.tsx";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover.tsx";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command.tsx";
+import { Slider } from "@/components/ui/slider.tsx";
+import { PasswordInput } from "@/components/ui/password-input.tsx";
+import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
+import { cn } from "@/lib/utils.ts";
+import {
+  TERMINAL_THEMES,
+  TERMINAL_FONTS,
+  CURSOR_STYLES,
+  BELL_STYLES,
+  FAST_SCROLL_MODIFIERS,
+} from "@/constants/terminal-themes.ts";
+import { TerminalPreview } from "@/ui/desktop/apps/features/terminal/TerminalPreview.tsx";
+import type { HostTerminalTabProps } from "./shared/tab-types";
+import React from "react";
+
+export function HostTerminalTab({ form, snippets, t }: HostTerminalTabProps) {
+  return (
+    <div className="space-y-1">
+      <FormField
+        control={form.control}
+        name="enableTerminal"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t("hosts.enableTerminal")}</FormLabel>
+            <FormControl>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
+            <FormDescription>{t("hosts.enableTerminalDesc")}</FormDescription>
+          </FormItem>
+        )}
+      />
+      <h1 className="text-xl font-semibold mt-7">
+        {t("hosts.terminalCustomization")}
+      </h1>
+      <Accordion
+        type="multiple"
+        className="w-full"
+        defaultValue={["appearance", "behavior", "advanced"]}
+      >
+        <AccordionItem value="appearance">
+          <AccordionTrigger>{t("hosts.appearance")}</AccordionTrigger>
+          <AccordionContent className="space-y-4 pt-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t("hosts.themePreview")}
+              </label>
+              <TerminalPreview
+                theme={form.watch("terminalConfig.theme")}
+                fontSize={form.watch("terminalConfig.fontSize")}
+                fontFamily={form.watch("terminalConfig.fontFamily")}
+                cursorStyle={form.watch("terminalConfig.cursorStyle")}
+                cursorBlink={form.watch("terminalConfig.cursorBlink")}
+                letterSpacing={form.watch("terminalConfig.letterSpacing")}
+                lineHeight={form.watch("terminalConfig.lineHeight")}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.theme"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("hosts.theme")}</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t("hosts.selectTheme")} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {Object.entries(TERMINAL_THEMES).map(([key, theme]) => (
+                        <SelectItem key={key} value={key}>
+                          {theme.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    {t("hosts.chooseColorTheme")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.fontFamily"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("hosts.fontFamily")}</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t("hosts.selectFont")} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {TERMINAL_FONTS.map((font) => (
+                        <SelectItem key={font.value} value={font.value}>
+                          {font.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>{t("hosts.selectFontDesc")}</FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.fontSize"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t("hosts.fontSizeValue", {
+                      value: field.value,
+                    })}
+                  </FormLabel>
+                  <FormControl>
+                    <Slider
+                      min={8}
+                      max={24}
+                      step={1}
+                      value={[field.value]}
+                      onValueChange={([value]) => field.onChange(value)}
+                    />
+                  </FormControl>
+                  <FormDescription>{t("hosts.adjustFontSize")}</FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.letterSpacing"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t("hosts.letterSpacingValue", {
+                      value: field.value,
+                    })}
+                  </FormLabel>
+                  <FormControl>
+                    <Slider
+                      min={-2}
+                      max={10}
+                      step={0.5}
+                      value={[field.value]}
+                      onValueChange={([value]) => field.onChange(value)}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    {t("hosts.adjustLetterSpacing")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.lineHeight"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t("hosts.lineHeightValue", {
+                      value: field.value,
+                    })}
+                  </FormLabel>
+                  <FormControl>
+                    <Slider
+                      min={1}
+                      max={2}
+                      step={0.1}
+                      value={[field.value]}
+                      onValueChange={([value]) => field.onChange(value)}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    {t("hosts.adjustLineHeight")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.cursorStyle"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("hosts.cursorStyle")}</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t("hosts.selectCursorStyle")}
+                        />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="block">
+                        {t("hosts.cursorStyleBlock")}
+                      </SelectItem>
+                      <SelectItem value="underline">
+                        {t("hosts.cursorStyleUnderline")}
+                      </SelectItem>
+                      <SelectItem value="bar">
+                        {t("hosts.cursorStyleBar")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    {t("hosts.chooseCursorAppearance")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.cursorBlink"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
+                  <div className="space-y-0.5">
+                    <FormLabel>{t("hosts.cursorBlink")}</FormLabel>
+                    <FormDescription>
+                      {t("hosts.enableCursorBlink")}
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="behavior">
+          <AccordionTrigger>{t("hosts.behavior")}</AccordionTrigger>
+          <AccordionContent className="space-y-4 pt-4">
+            <FormField
+              control={form.control}
+              name="terminalConfig.scrollback"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t("hosts.scrollbackBufferValue", {
+                      value: field.value,
+                    })}
+                  </FormLabel>
+                  <FormControl>
+                    <Slider
+                      min={1000}
+                      max={100000}
+                      step={1000}
+                      value={[field.value]}
+                      onValueChange={([value]) => field.onChange(value)}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    {t("hosts.scrollbackBufferDesc")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.bellStyle"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("hosts.bellStyle")}</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t("hosts.selectBellStyle")} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="none">
+                        {t("hosts.bellStyleNone")}
+                      </SelectItem>
+                      <SelectItem value="sound">
+                        {t("hosts.bellStyleSound")}
+                      </SelectItem>
+                      <SelectItem value="visual">
+                        {t("hosts.bellStyleVisual")}
+                      </SelectItem>
+                      <SelectItem value="both">
+                        {t("hosts.bellStyleBoth")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>{t("hosts.bellStyleDesc")}</FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.rightClickSelectsWord"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
+                  <div className="space-y-0.5">
+                    <FormLabel>{t("hosts.rightClickSelectsWord")}</FormLabel>
+                    <FormDescription>
+                      {t("hosts.rightClickSelectsWordDesc")}
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.fastScrollModifier"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("hosts.fastScrollModifier")}</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t("hosts.selectModifier")} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="alt">
+                        {t("hosts.modifierAlt")}
+                      </SelectItem>
+                      <SelectItem value="ctrl">
+                        {t("hosts.modifierCtrl")}
+                      </SelectItem>
+                      <SelectItem value="shift">
+                        {t("hosts.modifierShift")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    {t("hosts.fastScrollModifierDesc")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.fastScrollSensitivity"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t("hosts.fastScrollSensitivityValue", {
+                      value: field.value,
+                    })}
+                  </FormLabel>
+                  <FormControl>
+                    <Slider
+                      min={1}
+                      max={10}
+                      step={1}
+                      value={[field.value]}
+                      onValueChange={([value]) => field.onChange(value)}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    {t("hosts.fastScrollSensitivityDesc")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.minimumContrastRatio"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t("hosts.minimumContrastRatioValue", {
+                      value: field.value,
+                    })}
+                  </FormLabel>
+                  <FormControl>
+                    <Slider
+                      min={1}
+                      max={21}
+                      step={1}
+                      value={[field.value]}
+                      onValueChange={([value]) => field.onChange(value)}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    {t("hosts.minimumContrastRatioDesc")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="advanced">
+          <AccordionTrigger>{t("hosts.advanced")}</AccordionTrigger>
+          <AccordionContent className="space-y-4 pt-4">
+            <FormField
+              control={form.control}
+              name="terminalConfig.agentForwarding"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
+                  <div className="space-y-0.5">
+                    <FormLabel>{t("hosts.sshAgentForwarding")}</FormLabel>
+                    <FormDescription>
+                      {t("hosts.sshAgentForwardingDesc")}
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.backspaceMode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("hosts.backspaceMode")}</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t("hosts.selectBackspaceMode")}
+                        />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="normal">
+                        {t("hosts.backspaceModeNormal")}
+                      </SelectItem>
+                      <SelectItem value="control-h">
+                        {t("hosts.backspaceModeControlH")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    {t("hosts.backspaceModeDesc")}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.startupSnippetId"
+              render={({ field }) => {
+                const [open, setOpen] = React.useState(false);
+                const selectedSnippet = snippets.find(
+                  (s) => s.id === field.value,
+                );
+
+                return (
+                  <FormItem>
+                    <FormLabel>{t("hosts.startupSnippet")}</FormLabel>
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <FormControl>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={open}
+                            className="w-full justify-between"
+                          >
+                            {selectedSnippet
+                              ? selectedSnippet.name
+                              : t("hosts.selectSnippet")}
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                          </Button>
+                        </FormControl>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        className="p-0"
+                        style={{
+                          width: "var(--radix-popover-trigger-width)",
+                        }}
+                      >
+                        <Command>
+                          <CommandInput
+                            placeholder={t("hosts.searchSnippets")}
+                          />
+                          <CommandEmpty>
+                            {t("hosts.noSnippetFound")}
+                          </CommandEmpty>
+                          <CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
+                            <CommandItem
+                              value="none"
+                              onSelect={() => {
+                                field.onChange(null);
+                                setOpen(false);
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  !field.value ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                              {t("hosts.snippetNone")}
+                            </CommandItem>
+                            {snippets.map((snippet) => (
+                              <CommandItem
+                                key={snippet.id}
+                                value={`${snippet.name} ${snippet.content} ${snippet.id}`}
+                                onSelect={() => {
+                                  field.onChange(snippet.id);
+                                  setOpen(false);
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    field.value === snippet.id
+                                      ? "opacity-100"
+                                      : "opacity-0",
+                                  )}
+                                />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">
+                                    {snippet.name}
+                                  </span>
+                                  <span className="text-xs text-muted-foreground truncate max-w-[350px]">
+                                    {snippet.content}
+                                  </span>
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                    <FormDescription>
+                      {t("hosts.executeSnippetOnConnect")}
+                    </FormDescription>
+                  </FormItem>
+                );
+              }}
+            />
+
+            <FormField
+              control={form.control}
+              name="terminalConfig.autoMosh"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
+                  <div className="space-y-0.5">
+                    <FormLabel>{t("hosts.autoMosh")}</FormLabel>
+                    <FormDescription>{t("hosts.autoMoshDesc")}</FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            {form.watch("terminalConfig.autoMosh") && (
+              <FormField
+                control={form.control}
+                name="terminalConfig.moshCommand"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("hosts.moshCommand")}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t("placeholders.moshCommand")}
+                        {...field}
+                        onBlur={(e) => {
+                          field.onChange(e.target.value.trim());
+                          field.onBlur();
+                        }}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t("hosts.moshCommandDesc")}
+                    </FormDescription>
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <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>
+              )}
+            />
+
+            {form.watch("terminalConfig.sudoPasswordAutoFill") && (
+              <FormField
+                control={form.control}
+                name="terminalConfig.sudoPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("hosts.sudoPassword")}</FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        placeholder={t("placeholders.sudoPassword")}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t("hosts.sudoPasswordDesc")}
+                    </FormDescription>
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t("hosts.environmentVariables")}
+              </label>
+              <FormDescription>
+                {t("hosts.environmentVariablesDesc")}
+              </FormDescription>
+              {form
+                .watch("terminalConfig.environmentVariables")
+                ?.map((_, index) => (
+                  <div key={index} className="flex gap-2">
+                    <FormField
+                      control={form.control}
+                      name={`terminalConfig.environmentVariables.${index}.key`}
+                      render={({ field }) => (
+                        <FormItem className="flex-1">
+                          <FormControl>
+                            <Input
+                              placeholder={t("hosts.variableName")}
+                              {...field}
+                              onBlur={(e) => {
+                                field.onChange(e.target.value.trim());
+                                field.onBlur();
+                              }}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name={`terminalConfig.environmentVariables.${index}.value`}
+                      render={({ field }) => (
+                        <FormItem className="flex-1">
+                          <FormControl>
+                            <Input
+                              placeholder={t("hosts.variableValue")}
+                              {...field}
+                              onBlur={(e) => {
+                                field.onChange(e.target.value.trim());
+                                field.onBlur();
+                              }}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={() => {
+                        const current = form.getValues(
+                          "terminalConfig.environmentVariables",
+                        );
+                        form.setValue(
+                          "terminalConfig.environmentVariables",
+                          current.filter((_, i) => i !== index),
+                        );
+                      }}
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  const current =
+                    form.getValues("terminalConfig.environmentVariables") || [];
+                  form.setValue("terminalConfig.environmentVariables", [
+                    ...current,
+                    { key: "", value: "" },
+                  ]);
+                }}
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                {t("hosts.addVariable")}
+              </Button>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}

src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx

@@ -0,0 +1,361 @@
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import type { HostTunnelTabProps } from "./shared/tab-types";
+
+export function HostTunnelTab({
+  form,
+  sshConfigDropdownOpen,
+  setSshConfigDropdownOpen,
+  sshConfigInputRefs,
+  sshConfigDropdownRefs,
+  getFilteredSshConfigs,
+  handleSshConfigClick,
+  t,
+}: HostTunnelTabProps) {
+  return (
+    <div>
+      <FormField
+        control={form.control}
+        name="enableTunnel"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t("hosts.enableTunnel")}</FormLabel>
+            <FormControl>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
+            <FormDescription>{t("hosts.enableTunnelDesc")}</FormDescription>
+          </FormItem>
+        )}
+      />
+      {form.watch("enableTunnel") && (
+        <>
+          <Alert className="mt-4">
+            <AlertDescription>
+              <strong>{t("hosts.sshpassRequired")}</strong>
+              <div>
+                {t("hosts.sshpassRequiredDesc")}{" "}
+                <code className="bg-muted px-1 rounded inline">
+                  sudo apt install sshpass
+                </code>{" "}
+                {t("hosts.debianUbuntuEquivalent")}
+              </div>
+              <div className="mt-2">
+                <strong>{t("hosts.otherInstallMethods")}</strong>
+                <div>
+                  • {t("hosts.centosRhelFedora")}{" "}
+                  <code className="bg-muted px-1 rounded inline">
+                    sudo yum install sshpass
+                  </code>{" "}
+                  {t("hosts.or")}{" "}
+                  <code className="bg-muted px-1 rounded inline">
+                    sudo dnf install sshpass
+                  </code>
+                </div>
+                <div>
+                  • {t("hosts.macos")}{" "}
+                  <code className="bg-muted px-1 rounded inline">
+                    brew install hudochenkov/sshpass/sshpass
+                  </code>
+                </div>
+                <div>• {t("hosts.windows")}</div>
+              </div>
+            </AlertDescription>
+          </Alert>
+
+          <Alert className="mt-4">
+            <AlertDescription>
+              <strong>{t("hosts.sshServerConfigRequired")}</strong>
+              <div>{t("hosts.sshServerConfigDesc")}</div>
+              <div>
+                •{" "}
+                <code className="bg-muted px-1 rounded inline">
+                  GatewayPorts yes
+                </code>{" "}
+                {t("hosts.gatewayPortsYes")}
+              </div>
+              <div>
+                •{" "}
+                <code className="bg-muted px-1 rounded inline">
+                  AllowTcpForwarding yes
+                </code>{" "}
+                {t("hosts.allowTcpForwardingYes")}
+              </div>
+              <div>
+                •{" "}
+                <code className="bg-muted px-1 rounded inline">
+                  PermitRootLogin yes
+                </code>{" "}
+                {t("hosts.permitRootLoginYes")}
+              </div>
+              <div className="mt-2">{t("hosts.editSshConfig")}</div>
+            </AlertDescription>
+          </Alert>
+          <div className="mt-3 flex justify-between">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 px-3 text-xs"
+              onClick={() =>
+                window.open("https://docs.termix.site/tunnels", "_blank")
+              }
+            >
+              {t("common.documentation")}
+            </Button>
+          </div>
+          <FormField
+            control={form.control}
+            name="tunnelConnections"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel>{t("hosts.tunnelConnections")}</FormLabel>
+                <FormControl>
+                  <div className="space-y-4">
+                    {field.value.map((connection, index) => (
+                      <div
+                        key={index}
+                        className="p-4 border rounded-lg bg-muted/50"
+                      >
+                        <div className="flex items-center justify-between mb-3">
+                          <h4 className="text-sm font-bold">
+                            {t("hosts.connection")} {index + 1}
+                          </h4>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              const newConnections = field.value.filter(
+                                (_, i) => i !== index,
+                              );
+                              field.onChange(newConnections);
+                            }}
+                          >
+                            {t("hosts.remove")}
+                          </Button>
+                        </div>
+                        <div className="grid grid-cols-12 gap-4">
+                          <FormField
+                            control={form.control}
+                            name={`tunnelConnections.${index}.sourcePort`}
+                            render={({ field: sourcePortField }) => (
+                              <FormItem className="col-span-4">
+                                <FormLabel>
+                                  {t("hosts.sourcePort")}
+                                  {t("hosts.sourcePortDesc")}
+                                </FormLabel>
+                                <FormControl>
+                                  <Input
+                                    placeholder={t("placeholders.defaultPort")}
+                                    {...sourcePortField}
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name={`tunnelConnections.${index}.endpointPort`}
+                            render={({ field: endpointPortField }) => (
+                              <FormItem className="col-span-4">
+                                <FormLabel>{t("hosts.endpointPort")}</FormLabel>
+                                <FormControl>
+                                  <Input
+                                    placeholder={t(
+                                      "placeholders.defaultEndpointPort",
+                                    )}
+                                    {...endpointPortField}
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name={`tunnelConnections.${index}.endpointHost`}
+                            render={({ field: endpointHostField }) => (
+                              <FormItem className="col-span-4 relative">
+                                <FormLabel>
+                                  {t("hosts.endpointSshConfig")}
+                                </FormLabel>
+                                <FormControl>
+                                  <Input
+                                    ref={(el) => {
+                                      sshConfigInputRefs.current[index] = el;
+                                    }}
+                                    placeholder={t("placeholders.sshConfig")}
+                                    className="min-h-[40px]"
+                                    autoComplete="off"
+                                    value={endpointHostField.value}
+                                    onFocus={() =>
+                                      setSshConfigDropdownOpen((prev) => ({
+                                        ...prev,
+                                        [index]: true,
+                                      }))
+                                    }
+                                    onChange={(e) => {
+                                      endpointHostField.onChange(e);
+                                      setSshConfigDropdownOpen((prev) => ({
+                                        ...prev,
+                                        [index]: true,
+                                      }));
+                                    }}
+                                    onBlur={(e) => {
+                                      endpointHostField.onChange(
+                                        e.target.value.trim(),
+                                      );
+                                      endpointHostField.onBlur();
+                                    }}
+                                  />
+                                </FormControl>
+                                {sshConfigDropdownOpen[index] &&
+                                  getFilteredSshConfigs(index).length > 0 && (
+                                    <div
+                                      ref={(el) => {
+                                        sshConfigDropdownRefs.current[index] =
+                                          el;
+                                      }}
+                                      className="absolute top-full left-0 z-50 mt-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
+                                    >
+                                      <div className="grid grid-cols-1 gap-1 p-0">
+                                        {getFilteredSshConfigs(index).map(
+                                          (config) => (
+                                            <Button
+                                              key={config}
+                                              type="button"
+                                              variant="ghost"
+                                              size="sm"
+                                              className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
+                                              onClick={() =>
+                                                handleSshConfigClick(
+                                                  config,
+                                                  index,
+                                                )
+                                              }
+                                            >
+                                              {config}
+                                            </Button>
+                                          ),
+                                        )}
+                                      </div>
+                                    </div>
+                                  )}
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+
+                        <p className="text-sm text-muted-foreground mt-2">
+                          {t("hosts.tunnelForwardDescription", {
+                            sourcePort:
+                              form.watch(
+                                `tunnelConnections.${index}.sourcePort`,
+                              ) || "22",
+                            endpointPort:
+                              form.watch(
+                                `tunnelConnections.${index}.endpointPort`,
+                              ) || "224",
+                          })}
+                        </p>
+
+                        <div className="grid grid-cols-12 gap-4 mt-4">
+                          <FormField
+                            control={form.control}
+                            name={`tunnelConnections.${index}.maxRetries`}
+                            render={({ field: maxRetriesField }) => (
+                              <FormItem className="col-span-4">
+                                <FormLabel>{t("hosts.maxRetries")}</FormLabel>
+                                <FormControl>
+                                  <Input
+                                    placeholder={t("placeholders.maxRetries")}
+                                    {...maxRetriesField}
+                                  />
+                                </FormControl>
+                                <FormDescription>
+                                  {t("hosts.maxRetriesDescription")}
+                                </FormDescription>
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name={`tunnelConnections.${index}.retryInterval`}
+                            render={({ field: retryIntervalField }) => (
+                              <FormItem className="col-span-4">
+                                <FormLabel>
+                                  {t("hosts.retryInterval")}
+                                </FormLabel>
+                                <FormControl>
+                                  <Input
+                                    placeholder={t(
+                                      "placeholders.retryInterval",
+                                    )}
+                                    {...retryIntervalField}
+                                  />
+                                </FormControl>
+                                <FormDescription>
+                                  {t("hosts.retryIntervalDescription")}
+                                </FormDescription>
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name={`tunnelConnections.${index}.autoStart`}
+                            render={({ field }) => (
+                              <FormItem className="col-span-4">
+                                <FormLabel>
+                                  {t("hosts.autoStartContainer")}
+                                </FormLabel>
+                                <FormControl>
+                                  <Switch
+                                    checked={field.value}
+                                    onCheckedChange={field.onChange}
+                                  />
+                                </FormControl>
+                                <FormDescription>
+                                  {t("hosts.autoStartDesc")}
+                                </FormDescription>
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+                      </div>
+                    ))}
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => {
+                        field.onChange([
+                          ...field.value,
+                          {
+                            sourcePort: 22,
+                            endpointPort: 224,
+                            endpointHost: "",
+                            maxRetries: 3,
+                            retryInterval: 10,
+                            autoStart: false,
+                          },
+                        ]);
+                      }}
+                    >
+                      {t("hosts.addConnection")}
+                    </Button>
+                  </div>
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </>
+      )}
+    </div>
+  );
+}

src/ui/desktop/apps/host-manager/hosts/tabs/shared/JumpHostItem.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { cn } from "@/lib/utils.ts";
 import { Button } from "@/components/ui/button.tsx";
 import {
   Popover,
@@ -13,7 +14,6 @@ import {
   CommandItem,
 } from "@/components/ui/command.tsx";
 import { Check, ChevronsUpDown, X } from "lucide-react";
-import { cn } from "@/lib/utils.ts";
 import type { JumpHostItemProps } from "./tab-types";
 
 export function JumpHostItem({

src/ui/desktop/apps/host-manager/hosts/tabs/shared/QuickActionItem.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { cn } from "@/lib/utils.ts";
 import { Button } from "@/components/ui/button.tsx";
 import { Input } from "@/components/ui/input.tsx";
 import {
@@ -14,7 +15,6 @@ import {
   CommandItem,
 } from "@/components/ui/command.tsx";
 import { Check, ChevronsUpDown, X } from "lucide-react";
-import { cn } from "@/lib/utils.ts";
 import type { QuickActionItemProps } from "./tab-types";
 
 export function QuickActionItem({

src/ui/desktop/apps/host-manager/hosts/tabs/shared/tab-types.ts

@@ -1,4 +1,84 @@
-import type { SSHHost } from "@/types";
+import type { UseFormReturn } from "react-hook-form";
+import type React from "react";
+import type { SSHHost, Credential } from "@/types";
+
+export interface HostGeneralTabProps {
+  form: UseFormReturn<FormData>;
+  authTab: "password" | "key" | "credential" | "none";
+  setAuthTab: (value: "password" | "key" | "credential" | "none") => void;
+  keyInputMethod: "upload" | "paste";
+  setKeyInputMethod: (value: "upload" | "paste") => void;
+  proxyMode: "single" | "chain";
+  setProxyMode: (value: "single" | "chain") => void;
+  tagInput: string;
+  setTagInput: (value: string) => void;
+  folderDropdownOpen: boolean;
+  setFolderDropdownOpen: (value: boolean) => void;
+  folderInputRef: React.RefObject<HTMLInputElement>;
+  folderDropdownRef: React.RefObject<HTMLDivElement>;
+  filteredFolders: string[];
+  handleFolderClick: (folder: string) => void;
+  keyTypeDropdownOpen: boolean;
+  setKeyTypeDropdownOpen: (value: boolean) => void;
+  keyTypeButtonRef: React.RefObject<HTMLButtonElement>;
+  keyTypeDropdownRef: React.RefObject<HTMLDivElement>;
+  keyTypeOptions: Array<{ value: string; label: string }>;
+  ipInputRef: React.RefObject<HTMLInputElement>;
+  editorTheme: unknown;
+  hosts: SSHHost[];
+  editingHost?: SSHHost | null;
+  folders: string[];
+  credentials: Credential[];
+  t: (key: string) => string;
+}
+
+export interface HostTerminalTabProps {
+  form: UseFormReturn<FormData>;
+  snippets: Array<{ id: number; name: string; content: string }>;
+  t: (key: string) => string;
+}
+
+export interface HostDockerTabProps {
+  form: UseFormReturn<FormData>;
+  t: (key: string) => string;
+}
+
+export interface HostTunnelTabProps {
+  form: UseFormReturn<FormData>;
+  sshConfigDropdownOpen: { [key: number]: boolean };
+  setSshConfigDropdownOpen: React.Dispatch<
+    React.SetStateAction<{ [key: number]: boolean }>
+  >;
+  sshConfigInputRefs: React.MutableRefObject<{
+    [key: number]: HTMLInputElement | null;
+  }>;
+  sshConfigDropdownRefs: React.MutableRefObject<{
+    [key: number]: HTMLDivElement | null;
+  }>;
+  getFilteredSshConfigs: (index: number) => string[];
+  handleSshConfigClick: (config: string, index: number) => void;
+  t: (key: string) => string;
+}
+
+export interface HostFileManagerTabProps {
+  form: UseFormReturn<FormData>;
+  t: (key: string) => string;
+}
+
+export interface HostStatisticsTabProps {
+  form: UseFormReturn<FormData>;
+  statusIntervalUnit: "seconds" | "minutes";
+  setStatusIntervalUnit: (value: "seconds" | "minutes") => void;
+  metricsIntervalUnit: "seconds" | "minutes";
+  setMetricsIntervalUnit: (value: "seconds" | "minutes") => void;
+  snippets: Array<{ id: number; name: string; content: string }>;
+  t: (key: string) => string;
+}
+
+export interface HostSharingTabProps {
+  hostId: number | undefined;
+  isNewHost: boolean;
+}
 
 export interface JumpHostItemProps {
   jumpHost: { hostId: number };