feat: Add docker management support (local squash)

src/ui/desktop/apps/docker/DockerManager.tsx

@@ -1,21 +1,37 @@
 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";
-
-interface HostConfig {
-  id: number;
-  name: string;
-  ip: string;
-  username: string;
-  folder?: string;
-  enableFileManager?: boolean;
-  tunnelConnections?: unknown[];
-  [key: string]: unknown;
-}
+import { toast } from "sonner";
+import type {
+  SSHHost,
+  DockerContainer,
+  DockerValidation,
+} from "@/types/index.js";
+import {
+  connectDockerSession,
+  disconnectDockerSession,
+  listDockerContainers,
+  validateDockerAvailability,
+  keepaliveDockerSession,
+} 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 { LogViewer } from "./components/LogViewer.tsx";
+import { ContainerStats } from "./components/ContainerStats.tsx";
+import { ConsoleTerminal } from "./components/ConsoleTerminal.tsx";
+import { ContainerDetail } from "./components/ContainerDetail.tsx";
 
 interface DockerManagerProps {
-  hostConfig?: HostConfig;
+  hostConfig?: SSHHost;
   title?: string;
   isVisible?: boolean;
   isTopbarOpen?: boolean;
@@ -32,10 +48,26 @@ export function DockerManager({
   const { t } = useTranslation();
   const { state: sidebarState } = useSidebar();
   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");
 
   React.useEffect(() => {
     if (hostConfig?.id !== currentHostConfig?.id) {
       setCurrentHostConfig(hostConfig);
+      setContainers([]);
+      setSelectedContainer(null);
+      setSessionId(null);
+      setDockerValidation(null);
+      setViewMode("list");
     }
   }, [hostConfig?.id]);
 
@@ -77,6 +109,111 @@ export function DockerManager({
       window.removeEventListener("ssh-hosts:changed", handleHostsChanged);
   }, [hostConfig?.id]);
 
+  // SSH session lifecycle
+  React.useEffect(() => {
+    const initSession = async () => {
+      if (!currentHostConfig?.id || !currentHostConfig.enableDocker) {
+        return;
+      }
+
+      setIsConnecting(true);
+      const sid = `docker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+      try {
+        await connectDockerSession(sid, currentHostConfig.id);
+        setSessionId(sid);
+
+        // Validate Docker availability
+        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",
+          );
+        }
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to connect to host",
+        );
+        setIsConnecting(false);
+        setIsValidating(false);
+      } finally {
+        setIsConnecting(false);
+      }
+    };
+
+    initSession();
+
+    return () => {
+      if (sessionId) {
+        disconnectDockerSession(sessionId).catch(() => {
+          // Silently handle disconnect errors
+        });
+      }
+    };
+  }, [currentHostConfig?.id, currentHostConfig?.enableDocker]);
+
+  // Keepalive interval
+  React.useEffect(() => {
+    if (!sessionId || !isVisible) return;
+
+    const keepalive = setInterval(
+      () => {
+        keepaliveDockerSession(sessionId).catch(() => {
+          // Silently handle keepalive errors
+        });
+      },
+      10 * 60 * 1000,
+    ); // Every 10 minutes
+
+    return () => clearInterval(keepalive);
+  }, [sessionId, isVisible]);
+
+  // Refresh containers function
+  const refreshContainers = React.useCallback(async () => {
+    if (!sessionId) return;
+    try {
+      const data = await listDockerContainers(sessionId, true);
+      setContainers(data);
+    } catch (error) {
+      // Silently handle polling errors
+    }
+  }, [sessionId]);
+
+  // Poll containers
+  React.useEffect(() => {
+    if (!sessionId || !isVisible || !dockerValidation?.available) return;
+
+    let cancelled = false;
+
+    const pollContainers = async () => {
+      try {
+        const data = await listDockerContainers(sessionId, true);
+        if (!cancelled) {
+          setContainers(data);
+        }
+      } catch (error) {
+        // Silently handle polling errors
+      }
+    };
+
+    pollContainers(); // Initial fetch
+    const interval = setInterval(pollContainers, 5000); // Poll every 5 seconds
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [sessionId, isVisible, dockerValidation?.available]);
+
+  const handleBack = React.useCallback(() => {
+    setViewMode("list");
+    setSelectedContainer(null);
+  }, []);
+
   const topMarginPx = isTopbarOpen ? 74 : 16;
   const leftMarginPx = sidebarState === "collapsed" ? 16 : 8;
   const bottomMarginPx = 8;
@@ -96,6 +233,102 @@ export function DockerManager({
     ? "h-full w-full text-white overflow-hidden bg-transparent"
     : "bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden";
 
+  // Check if Docker is enabled
+  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>
+                Docker is not enabled for this host. Enable it in Host Settings
+                to use Docker features.
+              </AlertDescription>
+            </Alert>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Loading state
+  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 p-4 flex items-center justify-center">
+            <div className="text-center">
+              <SimpleLoader size="lg" />
+              <p className="text-gray-400 mt-4">
+                {isValidating
+                  ? "Validating Docker..."
+                  : "Connecting to host..."}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Docker not available
+  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">Docker Error</div>
+                <div>{dockerValidation.error}</div>
+                {dockerValidation.code && (
+                  <div className="mt-2 text-xs opacity-70">
+                    Error code: {dockerValidation.code}
+                  </div>
+                )}
+              </AlertDescription>
+            </Alert>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div style={wrapperStyle} className={containerClass}>
       <div className="h-full w-full flex flex-col">
@@ -105,20 +338,51 @@ export function DockerManager({
               <h1 className="font-bold text-lg truncate">
                 {currentHostConfig?.folder} / {title}
               </h1>
+              {dockerValidation?.version && (
+                <p className="text-xs text-gray-400">
+                  Docker v{dockerValidation.version}
+                </p>
+              )}
             </div>
           </div>
         </div>
         <Separator className="p-0.25 w-full" />
 
-        <div className="flex-1 overflow-hidden min-h-0 p-1">
-          {/* Empty body as requested */}
-          <div className="flex items-center justify-center h-full">
-            <div className="text-center">
-              <p className="text-gray-400 text-lg">
-                Docker management UI will be here.
+        <div className="flex-1 overflow-hidden min-h-0">
+          {viewMode === "list" ? (
+            <div className="h-full px-4 py-4">
+              {sessionId ? (
+                <ContainerList
+                  containers={containers}
+                  sessionId={sessionId}
+                  onSelectContainer={(id) => {
+                    setSelectedContainer(id);
+                    setViewMode("detail");
+                  }}
+                  selectedContainerId={selectedContainer}
+                  onRefresh={refreshContainers}
+                />
+              ) : (
+                <div className="text-center py-8">
+                  <p className="text-gray-400">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-gray-400">
+                Select a container to view details
               </p>
             </div>
-          </div>
+          )}
         </div>
       </div>
     </div>