v1.10.0 (#471)

* fix select edit host but not update view (#438) * fix: Checksum issue with chocolatey * fix: Remove homebrew old stuff * Add Korean translation (#439) Co-authored-by: 송준우 <2484@coreit.co.kr> * feat: Automate flatpak * fix: Add imagemagik to electron builder to resolve build error * fix: Build error with runtime repo flag * fix: Flatpak runtime error and install freedesktop ver warning * fix: Flatpak runtime error and install freedesktop ver warning * feat: Re-add homebrew cask and move scripts to backend * fix: No sandbox flag issue * fix: Change name for electron macos cask output * fix: Sandbox error with Linux * fix: Remove comming soon for app stores in readme * Adding Comment at the end of the public_key on the host on deploy (#440) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * -Add New Interface for Credential DB -Add Credential Name as a comment into the server authorized_key file --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Sudo auto fill password (#441) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Feature Sudo password auto-fill; * Fix locale json shema; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Added Italian Language; (#445) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Auto collapse snippet folders (#448) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * feat: Add collapsable snippets (customizable in user profile) * Translations (#447) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; * Fix translations; Removed duplicate keys, synchronised other languages using English as the source, translated added keys, fixed inaccurate translations. --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Remove PTY-level keepalive (#449) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Remove PTY-level keepalive to prevent unwanted terminal output; use SSH-level keepalive instead --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * feat: Seperate server stats and tunnel management (improved both UI's) then started initial docker implementation * fix: finalize adding docker to db * feat: Add docker management support (local squash) * Fix RBAC role system bugs and improve UX (#446) * Fix RBAC role system bugs and improve UX - Fix user list dropdown selection in host sharing - Fix role sharing permissions to include role-based access - Fix translation template interpolation for success messages - Standardize system roles to admin and user only - Auto-assign user role to new registrations - Remove blocking confirmation dialogs in modal contexts - Add missing i18n keys for common actions - Fix button type to prevent unintended form submissions * Enhance RBAC system with UI improvements and security fixes - Move role assignment to Users tab with per-user role management - Protect system roles (admin/user) from editing and manual assignment - Simplify permission system: remove Use level, keep View and Manage - Hide Update button and Sharing tab for view-only/shared hosts - Prevent users from sharing hosts with themselves - Unify table and modal styling across admin panels - Auto-assign system roles on user registration - Add permission metadata to host interface * Add empty state message for role assignment - Display helpful message when no custom roles available - Clarify that system roles are auto-assigned - Add noCustomRolesToAssign translation in English and Chinese * fix: Prevent credential sharing errors for shared hosts - Skip credential resolution for shared hosts with credential authentication to prevent decryption errors (credentials are encrypted per-user) - Add warning alert in sharing tab when host uses credential authentication - Inform users that shared users cannot connect to credential-based hosts - Add translations for credential sharing warning (EN/ZH) This prevents authentication failures when sharing hosts configured with credential authentication while maintaining security by keeping credentials isolated per user. * feat: Improve rbac UI and fixes some bugs --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * SOCKS5 support (#452) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * SOCKS5 support Adding single and chain socks5 proxy support * fix: cleanup files --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * Notes and Expiry fields add (#453) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Notes and Expiry add * fix: cleanup files --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * fix: ssh host types * fix: sudo incorrect styling and remove expiration date * feat: add sudo password and add diagonal bg's * fix: snippet running on enter key * fix: base64 decoding * fix: improve server stats / rbac * fix: wrap ssh host json export in hosts array * feat: auto trim host inputs, fix file manager jump hosts, dashboard prevent duplicates, file manager terminal not size updating, improve left sidebar sorting, hide/show tags, add apperance user profile tab, add new host manager tabs. * feat: improve terminal connection speed * fix: sqlite constriant errors and support non-root user (nginx perm issue) * feat: add beta syntax highlighing to terminal * feat: update imports and improve admin settings user management * chore: update translations * chore: update translations * feat: Complete light mode implementation with semantic theme system (#450) - Add comprehensive light/dark mode CSS variables with semantic naming - Implement theme-aware scrollbars using CSS variables - Add light mode backgrounds: --bg-base, --bg-elevated, --bg-surface, etc. - Add theme-aware borders: --border-base, --border-panel, --border-subtle - Add semantic text colors: --foreground-secondary, --foreground-subtle - Convert oklch colors to hex for better compatibility - Add theme awareness to CodeMirror editors - Update dark mode colors for consistency (background, sidebar, card, muted, input) - Add Tailwind color mappings for semantic classes Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * fix: syntax errors * chore: updating/match themes and split admin settings * feat: add translation workflow and remove old translation.json * fix: translation workflow error * fix: translation workflow error * feat: improve translation system and update workflow * fix: wrong path for translations * fix: change translation to flat files * fix: gh rule error * chore: auto-translate to multiple languages (#458) * chore: improve organization and made a few styling changes in host manager * feat: improve terminal stability and split out the host manager * fix: add unnversiioned files * chore: migrate all to use the new theme system * fix: wrong animation line colors * fix: rbac implementation general issues (local squash) * fix: remove unneeded files * feat: add 10 new langs * chore: update gitnore * chore: auto-translate to multiple languages (#459) * fix: improve tunnel system * fix: properly split tabs, still need to fix up the host manager * chore: cleanup files (possible RC) * feat: add norwegian * chore: auto-translate to multiple languages (#461) * fix: small qol fixes and began readme update * fix: run cleanup script * feat: add docker docs button * feat: general bug fixes and readme updates * fix: translations * chore: auto-translate to multiple languages (#462) * fix: cleanup files * fix: test new translation issue and add better server-stats support * fix: fix translate error * chore: auto-translate to multiple languages (#463) * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#465) * fix: fix translate mismatching text * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#466) * fix: fix translate mismatching text * fix: fix translate mismatching text * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#467) * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#468) * feat: add to readme, a few qol changes, and improve server stats in general * chore: auto-translate to multiple languages (#469) * feat: turned disk uage into graph and fixed issue with termina console * fix: electron build error and hide icons when shared * chore: run clean * fix: general server stats issues, file manager decoding, ui qol * fix: add dashboard line breaks * fix: docker console error * fix: docker console not loading and mismatched stripped background for electron * fix: docker console not loading * chore: docker console not loading in docker * chore: translate readme to chinese * chore: match package lock to package json * chore: nginx config issue for dokcer console * chore: auto-translate to multiple languages (#470) --------- Co-authored-by: Tran Trung Kien <kientt13.7@gmail.com> Co-authored-by: junu <bigdwarf_@naver.com> Co-authored-by: 송준우 <2484@coreit.co.kr> Co-authored-by: SlimGary <trash.slim@gmail.com> Co-authored-by: Nunzio Marfè <nunzio.marfe@protonmail.com> Co-authored-by: Wesley Reid <starhound@lostsouls.org> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> Co-authored-by: Denis <38875137+Medvedinca@users.noreply.github.com> Co-authored-by: Peet McKinney <68706879+PeetMcK@users.noreply.github.com>
2026-09-13 18:58:52 +00:00 · 2025-12-31 22:20:12 -06:00
parent 7139290d14
commit ad86c2040b
225 changed files with 87356 additions and 17706 deletions
@@ -0,0 +1,606 @@
+import React from "react";
+import { useSidebar } from "@/components/ui/sidebar.tsx";
+import { Separator } from "@/components/ui/separator.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import type { SSHHost, DockerContainer, DockerValidation } from "@/types";
+import {
+  connectDockerSession,
+  disconnectDockerSession,
+  listDockerContainers,
+  validateDockerAvailability,
+  keepaliveDockerSession,
+  verifyDockerTOTP,
+  logActivity,
+} from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+import { AlertCircle } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
+import { ContainerList } from "./components/ContainerList.tsx";
+import { ContainerDetail } from "./components/ContainerDetail.tsx";
+import { TOTPDialog } from "@/ui/desktop/navigation/TOTPDialog.tsx";
+import { SSHAuthDialog } from "@/ui/desktop/navigation/SSHAuthDialog.tsx";
+import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
+
+interface DockerManagerProps {
+  hostConfig?: SSHHost;
+  title?: string;
+  isVisible?: boolean;
+  isTopbarOpen?: boolean;
+  embedded?: boolean;
+  onClose?: () => void;
+}
+
+interface TabData {
+  id: number;
+  type: string;
+  [key: string]: unknown;
+}
+
+export function DockerManager({
+  hostConfig,
+  title,
+  isVisible = true,
+  isTopbarOpen = true,
+  embedded = false,
+  onClose,
+}: DockerManagerProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { state: sidebarState } = useSidebar();
+  const { currentTab, removeTab } = useTabs() as {
+    currentTab: number | null;
+    removeTab: (tabId: number) => void;
+  };
+  const [currentHostConfig, setCurrentHostConfig] = React.useState(hostConfig);
+  const [sessionId, setSessionId] = React.useState<string | null>(null);
+  const [containers, setContainers] = React.useState<DockerContainer[]>([]);
+  const [selectedContainer, setSelectedContainer] = React.useState<
+    string | null
+  >(null);
+  const [isConnecting, setIsConnecting] = React.useState(false);
+  const [activeTab, setActiveTab] = React.useState("containers");
+  const [dockerValidation, setDockerValidation] =
+    React.useState<DockerValidation | null>(null);
+  const [isValidating, setIsValidating] = React.useState(false);
+  const [viewMode, setViewMode] = React.useState<"list" | "detail">("list");
+  const [isLoadingContainers, setIsLoadingContainers] = React.useState(false);
+  const [totpRequired, setTotpRequired] = React.useState(false);
+  const [totpSessionId, setTotpSessionId] = React.useState<string | null>(null);
+  const [totpPrompt, setTotpPrompt] = React.useState<string>("");
+  const [showAuthDialog, setShowAuthDialog] = React.useState(false);
+  const [authReason, setAuthReason] = React.useState<
+    "no_keyboard" | "auth_failed" | "timeout"
+  >("no_keyboard");
+
+  const activityLoggedRef = React.useRef(false);
+  const activityLoggingRef = React.useRef(false);
+
+  const logDockerActivity = async () => {
+    if (
+      !currentHostConfig?.id ||
+      activityLoggedRef.current ||
+      activityLoggingRef.current
+    ) {
+      return;
+    }
+
+    activityLoggingRef.current = true;
+    activityLoggedRef.current = true;
+
+    try {
+      const hostName =
+        currentHostConfig.name ||
+        `${currentHostConfig.username}@${currentHostConfig.ip}`;
+      await logActivity("docker", currentHostConfig.id, hostName);
+    } catch (err) {
+      console.warn("Failed to log docker activity:", err);
+      activityLoggedRef.current = false;
+    } finally {
+      activityLoggingRef.current = false;
+    }
+  };
+
+  React.useEffect(() => {
+    if (hostConfig?.id !== currentHostConfig?.id) {
+      setCurrentHostConfig(hostConfig);
+      setContainers([]);
+      setSelectedContainer(null);
+      setSessionId(null);
+      setDockerValidation(null);
+      setViewMode("list");
+    }
+  }, [hostConfig?.id]);
+
+  React.useEffect(() => {
+    const fetchLatestHostConfig = async () => {
+      if (hostConfig?.id) {
+        try {
+          const { getSSHHosts } = await import("@/ui/main-axios.ts");
+          const hosts = await getSSHHosts();
+          const updatedHost = hosts.find((h) => h.id === hostConfig.id);
+          if (updatedHost) {
+            setCurrentHostConfig(updatedHost);
+          }
+        } catch {
+          // Silently handle error
+        }
+      }
+    };
+
+    fetchLatestHostConfig();
+
+    const handleHostsChanged = async () => {
+      if (hostConfig?.id) {
+        try {
+          const { getSSHHosts } = await import("@/ui/main-axios.ts");
+          const hosts = await getSSHHosts();
+          const updatedHost = hosts.find((h) => h.id === hostConfig.id);
+          if (updatedHost) {
+            setCurrentHostConfig(updatedHost);
+          }
+        } catch {
+          // Silently handle error
+        }
+      }
+    };
+
+    window.addEventListener("ssh-hosts:changed", handleHostsChanged);
+    return () =>
+      window.removeEventListener("ssh-hosts:changed", handleHostsChanged);
+  }, [hostConfig?.id]);
+
+  const initializingRef = React.useRef(false);
+
+  React.useEffect(() => {
+    const initSession = async () => {
+      if (!currentHostConfig?.id || !currentHostConfig.enableDocker) {
+        return;
+      }
+
+      if (initializingRef.current) return;
+      initializingRef.current = true;
+
+      if (sessionId) {
+        initializingRef.current = false;
+        return;
+      }
+
+      setIsConnecting(true);
+      const sid = `docker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+      try {
+        const result = await connectDockerSession(sid, currentHostConfig.id, {
+          useSocks5: currentHostConfig.useSocks5,
+          socks5Host: currentHostConfig.socks5Host,
+          socks5Port: currentHostConfig.socks5Port,
+          socks5Username: currentHostConfig.socks5Username,
+          socks5Password: currentHostConfig.socks5Password,
+          socks5ProxyChain: currentHostConfig.socks5ProxyChain,
+        });
+
+        if (result?.requires_totp) {
+          setTotpRequired(true);
+          setTotpSessionId(sid);
+          setTotpPrompt(result.prompt || t("docker.verificationCodePrompt"));
+          setIsConnecting(false);
+          return;
+        }
+
+        if (result?.status === "auth_required") {
+          setShowAuthDialog(true);
+          setAuthReason(
+            result.reason === "no_keyboard" ? "no_keyboard" : "auth_failed",
+          );
+          setIsConnecting(false);
+          return;
+        }
+
+        setSessionId(sid);
+
+        setIsValidating(true);
+        const validation = await validateDockerAvailability(sid);
+        setDockerValidation(validation);
+        setIsValidating(false);
+
+        if (!validation.available) {
+          toast.error(
+            validation.error || "Docker is not available on this host",
+          );
+        } else {
+          logDockerActivity();
+        }
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to connect to host",
+        );
+        setIsConnecting(false);
+        setIsValidating(false);
+        onClose?.();
+      } finally {
+        setIsConnecting(false);
+      }
+    };
+
+    initSession();
+
+    return () => {
+      initializingRef.current = false;
+      if (sessionId) {
+        disconnectDockerSession(sessionId).catch(() => {
+          // Silently handle disconnect errors
+        });
+      }
+    };
+  }, [currentHostConfig?.id, currentHostConfig?.enableDocker]);
+
+  React.useEffect(() => {
+    if (!sessionId || !isVisible) return;
+
+    const keepalive = setInterval(
+      () => {
+        keepaliveDockerSession(sessionId).catch(() => {
+          // Silently handle keepalive errors
+        });
+      },
+      10 * 60 * 1000,
+    );
+
+    return () => clearInterval(keepalive);
+  }, [sessionId, isVisible]);
+
+  const refreshContainers = React.useCallback(async () => {
+    if (!sessionId) return;
+    try {
+      const data = await listDockerContainers(sessionId, true);
+      setContainers(data);
+    } catch (error) {
+      // Silently handle polling errors
+    }
+  }, [sessionId]);
+
+  React.useEffect(() => {
+    if (!sessionId || !isVisible || !dockerValidation?.available) return;
+
+    let cancelled = false;
+
+    const pollContainers = async () => {
+      try {
+        setIsLoadingContainers(true);
+        const data = await listDockerContainers(sessionId, true);
+        if (!cancelled) {
+          setContainers(data);
+        }
+      } catch (error) {
+        // Silently handle polling errors
+      } finally {
+        if (!cancelled) {
+          setIsLoadingContainers(false);
+        }
+      }
+    };
+
+    pollContainers();
+    const interval = setInterval(pollContainers, 5000);
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [sessionId, isVisible, dockerValidation?.available]);
+
+  const handleBack = React.useCallback(() => {
+    setViewMode("list");
+    setSelectedContainer(null);
+  }, []);
+
+  const handleTotpSubmit = async (code: string) => {
+    if (!totpSessionId || !code) return;
+
+    try {
+      setIsConnecting(true);
+      const result = await verifyDockerTOTP(totpSessionId, code);
+
+      if (result?.status === "success") {
+        setTotpRequired(false);
+        setTotpPrompt("");
+        setSessionId(totpSessionId);
+        setTotpSessionId(null);
+
+        setIsValidating(true);
+        const validation = await validateDockerAvailability(totpSessionId);
+        setDockerValidation(validation);
+        setIsValidating(false);
+
+        if (!validation.available) {
+          toast.error(
+            validation.error || "Docker is not available on this host",
+          );
+        } else {
+          logDockerActivity();
+        }
+      }
+    } catch (error) {
+      console.error("TOTP verification failed:", error);
+      toast.error(t("docker.totpVerificationFailed"));
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleTotpCancel = () => {
+    setTotpRequired(false);
+    setTotpSessionId(null);
+    setTotpPrompt("");
+    setIsConnecting(false);
+    if (currentTab !== null) {
+      removeTab(currentTab);
+    }
+  };
+
+  const handleAuthSubmit = async (credentials: {
+    password?: string;
+    sshKey?: string;
+    keyPassword?: string;
+  }) => {
+    if (!currentHostConfig?.id) return;
+
+    setShowAuthDialog(false);
+    setIsConnecting(true);
+
+    const sid = `docker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    try {
+      const result = await connectDockerSession(sid, currentHostConfig.id, {
+        userProvidedPassword: credentials.password,
+        userProvidedSshKey: credentials.sshKey,
+        userProvidedKeyPassword: credentials.keyPassword,
+        useSocks5: currentHostConfig.useSocks5,
+        socks5Host: currentHostConfig.socks5Host,
+        socks5Port: currentHostConfig.socks5Port,
+        socks5Username: currentHostConfig.socks5Username,
+        socks5Password: currentHostConfig.socks5Password,
+        socks5ProxyChain: currentHostConfig.socks5ProxyChain,
+      });
+
+      if (result?.requires_totp) {
+        setTotpRequired(true);
+        setTotpSessionId(sid);
+        setTotpPrompt(result.prompt || t("docker.verificationCodePrompt"));
+        setIsConnecting(false);
+        return;
+      }
+
+      if (result?.status === "auth_required") {
+        setShowAuthDialog(true);
+        setAuthReason("auth_failed");
+        setIsConnecting(false);
+        return;
+      }
+
+      setSessionId(sid);
+
+      setIsValidating(true);
+      const validation = await validateDockerAvailability(sid);
+      setDockerValidation(validation);
+      setIsValidating(false);
+
+      if (!validation.available) {
+        toast.error(validation.error || "Docker is not available on this host");
+      } else {
+        logDockerActivity();
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to connect");
+      setIsConnecting(false);
+      setIsValidating(false);
+      onClose?.();
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleAuthCancel = () => {
+    setShowAuthDialog(false);
+    setIsConnecting(false);
+    onClose?.();
+  };
+
+  const topMarginPx = isTopbarOpen ? 74 : 16;
+  const leftMarginPx = sidebarState === "collapsed" ? 16 : 8;
+  const bottomMarginPx = 8;
+
+  const wrapperStyle: React.CSSProperties = embedded
+    ? { opacity: isVisible ? 1 : 0, height: "100%", width: "100%" }
+    : {
+        opacity: isVisible ? 1 : 0,
+        marginLeft: leftMarginPx,
+        marginRight: 17,
+        marginTop: topMarginPx,
+        marginBottom: bottomMarginPx,
+        height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
+      };
+
+  const containerClass = embedded
+    ? "h-full w-full text-foreground overflow-hidden bg-transparent"
+    : "bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden";
+
+  if (!currentHostConfig?.enableDocker) {
+    return (
+      <div style={wrapperStyle} className={containerClass}>
+        <div className="h-full w-full flex flex-col">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
+            <div className="flex items-center gap-4 min-w-0">
+              <div className="min-w-0">
+                <h1 className="font-bold text-lg truncate">
+                  {currentHostConfig?.folder} / {title}
+                </h1>
+              </div>
+            </div>
+          </div>
+          <Separator className="p-0.25 w-full" />
+
+          <div className="flex-1 overflow-hidden min-h-0 p-4">
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{t("docker.notEnabled")}</AlertDescription>
+            </Alert>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isConnecting || isValidating) {
+    return (
+      <div style={wrapperStyle} className={containerClass}>
+        <div className="h-full w-full flex flex-col">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
+            <div className="flex items-center gap-4 min-w-0">
+              <div className="min-w-0">
+                <h1 className="font-bold text-lg truncate">
+                  {currentHostConfig?.folder} / {title}
+                </h1>
+              </div>
+            </div>
+          </div>
+          <Separator className="p-0.25 w-full" />
+
+          <div className="flex-1 overflow-hidden min-h-0 relative">
+            <SimpleLoader
+              visible={true}
+              message={
+                isValidating ? t("docker.validating") : t("docker.connecting")
+              }
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (dockerValidation && !dockerValidation.available) {
+    return (
+      <div style={wrapperStyle} className={containerClass}>
+        <div className="h-full w-full flex flex-col">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
+            <div className="flex items-center gap-4 min-w-0">
+              <div className="min-w-0">
+                <h1 className="font-bold text-lg truncate">
+                  {currentHostConfig?.folder} / {title}
+                </h1>
+              </div>
+            </div>
+          </div>
+          <Separator className="p-0.25 w-full" />
+
+          <div className="flex-1 overflow-hidden min-h-0 p-4">
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                <div className="font-semibold mb-2">{t("docker.error")}</div>
+                <div>{dockerValidation.error}</div>
+                {dockerValidation.code && (
+                  <div className="mt-2 text-xs opacity-70">
+                    {t("docker.errorCode", { code: dockerValidation.code })}
+                  </div>
+                )}
+              </AlertDescription>
+            </Alert>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={wrapperStyle} className={containerClass}>
+      <div className="h-full w-full flex flex-col">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
+          <div className="flex items-center gap-4 min-w-0">
+            <div className="min-w-0">
+              <h1 className="font-bold text-lg truncate">
+                {currentHostConfig?.folder} / {title}
+              </h1>
+              {dockerValidation?.version && (
+                <p className="text-xs text-muted-foreground">
+                  {t("docker.version", { version: dockerValidation.version })}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+        <Separator className="p-0.25 w-full" />
+
+        <div className="flex-1 overflow-hidden min-h-0 relative">
+          {viewMode === "list" ? (
+            <div className="h-full px-4 py-4">
+              {sessionId ? (
+                isLoadingContainers && containers.length === 0 ? (
+                  <SimpleLoader
+                    visible={true}
+                    message={t("docker.loadingContainers")}
+                  />
+                ) : (
+                  <ContainerList
+                    containers={containers}
+                    sessionId={sessionId}
+                    onSelectContainer={(id) => {
+                      setSelectedContainer(id);
+                      setViewMode("detail");
+                    }}
+                    selectedContainerId={selectedContainer}
+                    onRefresh={refreshContainers}
+                  />
+                )
+              ) : (
+                <div className="text-center py-8">
+                  <p className="text-muted-foreground">No session available</p>
+                </div>
+              )}
+            </div>
+          ) : sessionId && selectedContainer && currentHostConfig ? (
+            <ContainerDetail
+              sessionId={sessionId}
+              containerId={selectedContainer}
+              containers={containers}
+              hostConfig={currentHostConfig}
+              onBack={handleBack}
+            />
+          ) : (
+            <div className="text-center py-8">
+              <p className="text-muted-foreground">
+                Select a container to view details
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+      <TOTPDialog
+        isOpen={totpRequired}
+        prompt={totpPrompt}
+        onSubmit={handleTotpSubmit}
+        onCancel={handleTotpCancel}
+      />
+      {currentHostConfig && (
+        <SSHAuthDialog
+          isOpen={showAuthDialog}
+          reason={authReason}
+          onSubmit={handleAuthSubmit}
+          onCancel={handleAuthCancel}
+          hostInfo={{
+            ip: currentHostConfig.ip,
+            port: currentHostConfig.port,
+            username: currentHostConfig.username,
+            name: currentHostConfig.name,
+          }}
+        />
+      )}
+    </div>
+  );
+}