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,441 @@
+import React from "react";
+import { useXTerm } from "react-xtermjs";
+import { FitAddon } from "@xterm/addon-fit";
+import { ClipboardAddon } from "@xterm/addon-clipboard";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Card, CardContent } from "@/components/ui/card.tsx";
+import { Terminal as TerminalIcon, Power, PowerOff } from "lucide-react";
+import { toast } from "sonner";
+import type { SSHHost } from "@/types";
+import { getCookie, isElectron } from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+import { useTranslation } from "react-i18next";
+
+interface ConsoleTerminalProps {
+  sessionId: string;
+  containerId: string;
+  containerName: string;
+  containerState: string;
+  hostConfig: SSHHost;
+}
+
+export function ConsoleTerminal({
+  sessionId,
+  containerId,
+  containerName,
+  containerState,
+  hostConfig,
+}: ConsoleTerminalProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { instance: terminal, ref: xtermRef } = useXTerm();
+  const [isConnected, setIsConnected] = React.useState(false);
+  const [isConnecting, setIsConnecting] = React.useState(false);
+  const [selectedShell, setSelectedShell] = React.useState<string>("bash");
+  const wsRef = React.useRef<WebSocket | null>(null);
+  const fitAddonRef = React.useRef<FitAddon | null>(null);
+  const pingIntervalRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  React.useEffect(() => {
+    if (!terminal) return;
+
+    const fitAddon = new FitAddon();
+    const clipboardAddon = new ClipboardAddon();
+    const webLinksAddon = new WebLinksAddon();
+
+    fitAddonRef.current = fitAddon;
+
+    terminal.loadAddon(fitAddon);
+    terminal.loadAddon(clipboardAddon);
+    terminal.loadAddon(webLinksAddon);
+
+    terminal.options.cursorBlink = true;
+    terminal.options.fontSize = 14;
+    terminal.options.fontFamily = "monospace";
+
+    const backgroundColor = getComputedStyle(document.documentElement)
+      .getPropertyValue("--bg-elevated")
+      .trim();
+    const foregroundColor = getComputedStyle(document.documentElement)
+      .getPropertyValue("--foreground")
+      .trim();
+
+    terminal.options.theme = {
+      background: backgroundColor || "var(--bg-elevated)",
+      foreground: foregroundColor || "var(--foreground)",
+    };
+
+    setTimeout(() => {
+      fitAddon.fit();
+    }, 100);
+
+    const resizeHandler = () => {
+      if (fitAddonRef.current) {
+        fitAddonRef.current.fit();
+
+        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+          const { rows, cols } = terminal;
+          wsRef.current.send(
+            JSON.stringify({
+              type: "resize",
+              data: { rows, cols },
+            }),
+          );
+        }
+      }
+    };
+
+    window.addEventListener("resize", resizeHandler);
+
+    return () => {
+      window.removeEventListener("resize", resizeHandler);
+
+      if (wsRef.current) {
+        try {
+          wsRef.current.send(JSON.stringify({ type: "disconnect" }));
+        } catch (error) {}
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+
+      terminal.dispose();
+    };
+  }, [terminal]);
+
+  const disconnect = React.useCallback(() => {
+    if (wsRef.current) {
+      try {
+        wsRef.current.send(JSON.stringify({ type: "disconnect" }));
+      } catch (error) {}
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setIsConnected(false);
+    if (terminal) {
+      try {
+        terminal.clear();
+      } catch (error) {}
+    }
+  }, [terminal, t]);
+
+  const connect = React.useCallback(() => {
+    if (!terminal || containerState !== "running") {
+      toast.error(t("docker.containerMustBeRunning"));
+      return;
+    }
+
+    setIsConnecting(true);
+
+    try {
+      const token = isElectron()
+        ? localStorage.getItem("jwt")
+        : getCookie("jwt");
+      if (!token) {
+        toast.error(t("docker.authenticationRequired"));
+        setIsConnecting(false);
+        return;
+      }
+
+      if (fitAddonRef.current) {
+        fitAddonRef.current.fit();
+      }
+
+      const isElectronApp = isElectron();
+
+      const isDev =
+        !isElectronApp &&
+        process.env.NODE_ENV === "development" &&
+        (window.location.port === "3000" ||
+          window.location.port === "5173" ||
+          window.location.port === "");
+
+      const baseWsUrl = isDev
+        ? `${window.location.protocol === "https:" ? "wss" : "ws"}://localhost:30008`
+        : isElectronApp
+          ? (() => {
+              const baseUrl =
+                (window as { configuredServerUrl?: string })
+                  .configuredServerUrl || "http://127.0.0.1:30001";
+              const wsProtocol = baseUrl.startsWith("https://")
+                ? "wss://"
+                : "ws://";
+              const wsHost = baseUrl.replace(/^https?:\/\//, "");
+              return `${wsProtocol}${wsHost}/docker/console/`;
+            })()
+          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/docker/console/`;
+
+      const wsUrl = `${baseWsUrl}?token=${encodeURIComponent(token)}`;
+      const ws = new WebSocket(wsUrl);
+
+      ws.onopen = () => {
+        const cols = terminal.cols || 80;
+        const rows = terminal.rows || 24;
+
+        ws.send(
+          JSON.stringify({
+            type: "connect",
+            data: {
+              hostConfig,
+              containerId,
+              shell: selectedShell,
+              cols,
+              rows,
+            },
+          }),
+        );
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+
+          switch (msg.type) {
+            case "output":
+              terminal.write(msg.data);
+              break;
+
+            case "connected":
+              setIsConnected(true);
+              setIsConnecting(false);
+
+              if (msg.data?.shellChanged) {
+                toast.warning(
+                  `Shell "${msg.data.requestedShell}" not available. Using "${msg.data.shell}" instead.`,
+                );
+              } else {
+                toast.success(t("docker.connectedTo", { containerName }));
+              }
+
+              setTimeout(() => {
+                if (fitAddonRef.current) {
+                  fitAddonRef.current.fit();
+                }
+
+                if (ws.readyState === WebSocket.OPEN) {
+                  ws.send(
+                    JSON.stringify({
+                      type: "resize",
+                      data: { rows: terminal.rows, cols: terminal.cols },
+                    }),
+                  );
+                }
+              }, 100);
+              break;
+
+            case "disconnected":
+              setIsConnected(false);
+              setIsConnecting(false);
+              terminal.write(
+                `\r\n\x1b[1;33m${msg.message || t("docker.disconnected")}\x1b[0m\r\n`,
+              );
+              if (wsRef.current) {
+                wsRef.current.close();
+                wsRef.current = null;
+              }
+              break;
+
+            case "error":
+              setIsConnecting(false);
+              toast.error(msg.message || t("docker.consoleError"));
+              terminal.write(
+                `\r\n\x1b[1;31m${t("docker.errorMessage", { message: msg.message })}\x1b[0m\r\n`,
+              );
+              break;
+          }
+        } catch (error) {
+          console.error("Failed to parse WebSocket message:", error);
+        }
+      };
+
+      ws.onerror = (error) => {
+        console.error("WebSocket error:", error);
+        setIsConnecting(false);
+        setIsConnected(false);
+        toast.error(t("docker.failedToConnect"));
+      };
+
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current);
+      }
+      pingIntervalRef.current = setInterval(() => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "ping" }));
+        }
+      }, 30000);
+
+      ws.onclose = () => {
+        if (pingIntervalRef.current) {
+          clearInterval(pingIntervalRef.current);
+          pingIntervalRef.current = null;
+        }
+        setIsConnected(false);
+        setIsConnecting(false);
+        if (wsRef.current === ws) {
+          wsRef.current = null;
+        }
+      };
+
+      wsRef.current = ws;
+
+      terminal.onData((data) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(
+            JSON.stringify({
+              type: "input",
+              data,
+            }),
+          );
+        }
+      });
+    } catch (error) {
+      setIsConnecting(false);
+      toast.error(
+        `Failed to connect: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    }
+  }, [
+    terminal,
+    containerState,
+    hostConfig,
+    containerId,
+    selectedShell,
+    containerName,
+    t,
+  ]);
+
+  React.useEffect(() => {
+    return () => {
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current);
+        pingIntervalRef.current = null;
+      }
+      if (wsRef.current) {
+        try {
+          wsRef.current.send(JSON.stringify({ type: "disconnect" }));
+        } catch (error) {}
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+      setIsConnected(false);
+    };
+  }, []);
+
+  if (containerState !== "running") {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <TerminalIcon className="h-12 w-12 text-muted-foreground/50 mx-auto" />
+          <p className="text-muted-foreground text-lg">
+            {t("docker.containerNotRunning")}
+          </p>
+          <p className="text-muted-foreground text-sm">
+            {t("docker.startContainerToAccess")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full gap-3">
+      <Card className="py-3">
+        <CardContent className="px-3">
+          <div className="flex flex-col sm:flex-row gap-2 items-center sm:items-center">
+            <div className="flex items-center gap-2 flex-1">
+              <TerminalIcon className="h-5 w-5" />
+              <span className="text-base font-medium">
+                {t("docker.console")}
+              </span>
+            </div>
+            <Select
+              value={selectedShell}
+              onValueChange={setSelectedShell}
+              disabled={isConnected}
+            >
+              <SelectTrigger className="w-[120px]">
+                <SelectValue placeholder={t("docker.selectShell")} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="bash">{t("docker.bash")}</SelectItem>
+                <SelectItem value="sh">{t("docker.sh")}</SelectItem>
+                <SelectItem value="ash">{t("docker.ash")}</SelectItem>
+              </SelectContent>
+            </Select>
+            <div className="flex gap-2 sm:gap-2">
+              {!isConnected ? (
+                <Button
+                  onClick={connect}
+                  disabled={isConnecting}
+                  className="min-w-[120px]"
+                >
+                  {isConnecting ? (
+                    <>
+                      <div className="h-4 w-4 mr-2 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                      {t("docker.connecting")}
+                    </>
+                  ) : (
+                    <>
+                      <Power className="h-4 w-4 mr-2" />
+                      {t("docker.connect")}
+                    </>
+                  )}
+                </Button>
+              ) : (
+                <Button
+                  onClick={disconnect}
+                  variant="destructive"
+                  className="min-w-[120px]"
+                >
+                  <PowerOff className="h-4 w-4 mr-2" />
+                  {t("docker.disconnect")}
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="flex-1 overflow-hidden pt-1 pb-0">
+        <CardContent className="p-0 h-full relative">
+          <div
+            ref={xtermRef}
+            className="h-full w-full"
+            style={{ display: isConnected ? "block" : "none" }}
+          />
+
+          {!isConnected && !isConnecting && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center space-y-2">
+                <TerminalIcon className="h-12 w-12 text-muted-foreground/50 mx-auto" />
+                <p className="text-muted-foreground">
+                  {t("docker.notConnected")}
+                </p>
+                <p className="text-muted-foreground text-sm">
+                  {t("docker.clickToConnect")}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {isConnecting && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center">
+                <SimpleLoader size="lg" />
+                <p className="text-muted-foreground mt-4">
+                  {t("docker.connectingTo", { containerName })}
+                </p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,432 @@
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+import {
+  Play,
+  Square,
+  RotateCw,
+  Pause,
+  Trash2,
+  PlayCircle,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import type { DockerContainer } from "@/types";
+import {
+  startDockerContainer,
+  stopDockerContainer,
+  restartDockerContainer,
+  pauseDockerContainer,
+  unpauseDockerContainer,
+  removeDockerContainer,
+} from "@/ui/main-axios.ts";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip.tsx";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+
+interface ContainerCardProps {
+  container: DockerContainer;
+  sessionId: string;
+  onSelect?: () => void;
+  isSelected?: boolean;
+  onRefresh?: () => void;
+}
+
+export function ContainerCard({
+  container,
+  sessionId,
+  onSelect,
+  isSelected = false,
+  onRefresh,
+}: ContainerCardProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+  const [isStarting, setIsStarting] = React.useState(false);
+  const [isStopping, setIsStopping] = React.useState(false);
+  const [isRestarting, setIsRestarting] = React.useState(false);
+  const [isPausing, setIsPausing] = React.useState(false);
+  const [isRemoving, setIsRemoving] = React.useState(false);
+
+  const statusColors = {
+    running: {
+      bg: "bg-green-500/10",
+      border: "border-green-500/20",
+      text: "text-green-400",
+      badge: "bg-green-500/20 text-green-300 border-green-500/30",
+    },
+    exited: {
+      bg: "bg-red-500/10",
+      border: "border-red-500/20",
+      text: "text-red-400",
+      badge: "bg-red-500/20 text-red-300 border-red-500/30",
+    },
+    paused: {
+      bg: "bg-yellow-500/10",
+      border: "border-yellow-500/20",
+      text: "text-yellow-400",
+      badge: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
+    },
+    created: {
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/20",
+      text: "text-blue-400",
+      badge: "bg-blue-500/20 text-blue-300 border-blue-500/30",
+    },
+    restarting: {
+      bg: "bg-orange-500/10",
+      border: "border-orange-500/20",
+      text: "text-orange-400",
+      badge: "bg-orange-500/20 text-orange-300 border-orange-500/30",
+    },
+    removing: {
+      bg: "bg-purple-500/10",
+      border: "border-purple-500/20",
+      text: "text-purple-400",
+      badge: "bg-purple-500/20 text-purple-300 border-purple-500/30",
+    },
+    dead: {
+      bg: "bg-muted/10",
+      border: "border-muted/20",
+      text: "text-muted-foreground",
+      badge: "bg-muted/20 text-muted-foreground border-muted/30",
+    },
+  };
+
+  const colors = statusColors[container.state] || statusColors.created;
+
+  const handleStart = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsStarting(true);
+    try {
+      await startDockerContainer(sessionId, container.id);
+      toast.success(t("docker.containerStarted", { name: container.name }));
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        t("docker.failedToStartContainer", {
+          error: error instanceof Error ? error.message : "Unknown error",
+        }),
+      );
+    } finally {
+      setIsStarting(false);
+    }
+  };
+
+  const handleStop = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsStopping(true);
+    try {
+      await stopDockerContainer(sessionId, container.id);
+      toast.success(t("docker.containerStopped", { name: container.name }));
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        t("docker.failedToStopContainer", {
+          error: error instanceof Error ? error.message : "Unknown error",
+        }),
+      );
+    } finally {
+      setIsStopping(false);
+    }
+  };
+
+  const handleRestart = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsRestarting(true);
+    try {
+      await restartDockerContainer(sessionId, container.id);
+      toast.success(t("docker.containerRestarted", { name: container.name }));
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        t("docker.failedToRestartContainer", {
+          error: error instanceof Error ? error.message : "Unknown error",
+        }),
+      );
+    } finally {
+      setIsRestarting(false);
+    }
+  };
+
+  const handlePause = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsPausing(true);
+    try {
+      if (container.state === "paused") {
+        await unpauseDockerContainer(sessionId, container.id);
+        toast.success(t("docker.containerUnpaused", { name: container.name }));
+      } else {
+        await pauseDockerContainer(sessionId, container.id);
+        toast.success(t("docker.containerPaused", { name: container.name }));
+      }
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        t("docker.failedToTogglePauseContainer", {
+          action: container.state === "paused" ? "unpause" : "pause",
+          error: error instanceof Error ? error.message : "Unknown error",
+        }),
+      );
+    } finally {
+      setIsPausing(false);
+    }
+  };
+
+  const handleRemove = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const containerName = container.name.startsWith("/")
+      ? container.name.slice(1)
+      : container.name;
+
+    let confirmMessage = t("docker.confirmRemoveContainer", {
+      name: containerName,
+    });
+
+    if (container.state === "running") {
+      confirmMessage += " " + t("docker.runningContainerWarning");
+    }
+
+    confirmWithToast(
+      confirmMessage,
+      async () => {
+        setIsRemoving(true);
+        try {
+          const force = container.state === "running";
+          await removeDockerContainer(sessionId, container.id, force);
+          toast.success(t("docker.containerRemoved", { name: containerName }));
+          onRefresh?.();
+        } catch (error) {
+          toast.error(
+            t("docker.failedToRemoveContainer", {
+              error: error instanceof Error ? error.message : "Unknown error",
+            }),
+          );
+        } finally {
+          setIsRemoving(false);
+        }
+      },
+      t("common.remove"),
+      t("common.cancel"),
+    );
+  };
+
+  const isLoading =
+    isStarting || isStopping || isRestarting || isPausing || isRemoving;
+
+  const formatCreatedDate = (dateStr: string): string => {
+    try {
+      const cleanDate = dateStr.replace(/\s*\+\d{4}\s*UTC\s*$/, "").trim();
+      return cleanDate;
+    } catch {
+      return dateStr;
+    }
+  };
+
+  const parsePorts = (portsStr: string | undefined): string[] => {
+    if (!portsStr || portsStr.trim() === "") return [];
+
+    return portsStr
+      .split(",")
+      .map((p) => p.trim())
+      .filter((p) => p.length > 0);
+  };
+
+  const portsList = parsePorts(container.ports);
+
+  return (
+    <>
+      <Card
+        className={`cursor-pointer transition-all hover:shadow-lg ${
+          isSelected
+            ? "ring-2 ring-primary border-primary"
+            : `border-2 ${colors.border}`
+        } ${colors.bg} pt-3 pb-0`}
+        onClick={onSelect}
+      >
+        <CardHeader className="pb-2 px-4">
+          <div className="flex items-start justify-between gap-2">
+            <CardTitle className="text-base font-semibold truncate flex-1">
+              {container.name.startsWith("/")
+                ? container.name.slice(1)
+                : container.name}
+            </CardTitle>
+            <Badge className={`${colors.badge} border shrink-0`}>
+              {container.state}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3 px-4 pb-3">
+          <div className="space-y-2 text-sm">
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground min-w-[50px] text-xs">
+                {t("docker.image")}
+              </span>
+              <span className="truncate text-foreground text-xs">
+                {container.image}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground min-w-[50px] text-xs">
+                {t("docker.idLabel")}
+              </span>
+              <span className="font-mono text-xs text-foreground">
+                {container.id.substring(0, 12)}
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-muted-foreground min-w-[50px] text-xs shrink-0">
+                {t("docker.ports")}
+              </span>
+              <div className="flex flex-wrap gap-1">
+                {portsList.length > 0 ? (
+                  portsList.map((port, idx) => (
+                    <Badge
+                      key={idx}
+                      variant="outline"
+                      className="text-xs font-mono bg-muted/10 text-muted-foreground border-muted/30"
+                    >
+                      {port}
+                    </Badge>
+                  ))
+                ) : (
+                  <Badge
+                    variant="outline"
+                    className="text-xs bg-muted/10 text-muted-foreground border-muted/30"
+                  >
+                    {t("docker.noPorts")}
+                  </Badge>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground min-w-[50px] text-xs">
+                {t("docker.created")}
+              </span>
+              <span className="text-foreground text-xs">
+                {formatCreatedDate(container.created)}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-2 pt-2 border-t border-edge-panel">
+            <TooltipProvider>
+              {container.state !== "running" && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-8"
+                      onClick={handleStart}
+                      disabled={isLoading}
+                    >
+                      {isStarting ? (
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
+                      ) : (
+                        <Play className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t("docker.start")}</TooltipContent>
+                </Tooltip>
+              )}
+
+              {container.state === "running" && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-8"
+                      onClick={handleStop}
+                      disabled={isLoading}
+                    >
+                      {isStopping ? (
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
+                      ) : (
+                        <Square className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t("docker.stop")}</TooltipContent>
+                </Tooltip>
+              )}
+
+              {(container.state === "running" ||
+                container.state === "paused") && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-8"
+                      onClick={handlePause}
+                      disabled={isLoading}
+                    >
+                      {isPausing ? (
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
+                      ) : container.state === "paused" ? (
+                        <PlayCircle className="h-4 w-4" />
+                      ) : (
+                        <Pause className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {container.state === "paused"
+                      ? t("docker.unpause")
+                      : t("docker.pause")}
+                  </TooltipContent>
+                </Tooltip>
+              )}
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-8"
+                    onClick={handleRestart}
+                    disabled={isLoading || container.state === "exited"}
+                  >
+                    {isRestarting ? (
+                      <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
+                    ) : (
+                      <RotateCw className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("docker.restart")}</TooltipContent>{" "}
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-8 text-red-400 hover:text-red-300 hover:bg-red-500/20"
+                    onClick={handleRemove}
+                    disabled={isLoading}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("docker.remove")}</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+}
@@ -0,0 +1,124 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import { Separator } from "@/components/ui/separator.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
+import { ArrowLeft } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { DockerContainer, SSHHost } from "@/types";
+import { LogViewer } from "./LogViewer.tsx";
+import { ContainerStats } from "./ContainerStats.tsx";
+import { ConsoleTerminal } from "./ConsoleTerminal.tsx";
+
+interface ContainerDetailProps {
+  sessionId: string;
+  containerId: string;
+  containers: DockerContainer[];
+  hostConfig: SSHHost;
+  onBack: () => void;
+}
+
+export function ContainerDetail({
+  sessionId,
+  containerId,
+  containers,
+  hostConfig,
+  onBack,
+}: ContainerDetailProps): React.ReactElement {
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = React.useState("logs");
+
+  const container = containers.find((c) => c.id === containerId);
+
+  if (!container) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <p className="text-muted-foreground text-lg">
+            {t("docker.containerNotFound")}
+          </p>
+          <Button onClick={onBack} variant="outline">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            {t("docker.backToList")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-4 px-4 pt-3 pb-3">
+        <Button variant="ghost" onClick={onBack} size="sm">
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          {t("common.back")}
+        </Button>
+        <div className="min-w-0 flex-1">
+          <h2 className="font-bold text-lg truncate">{container.name}</h2>
+          <p className="text-sm text-muted-foreground truncate">
+            {container.image}
+          </p>
+        </div>
+      </div>
+      <Separator className="p-0.25 w-full" />
+
+      <div className="flex-1 overflow-hidden min-h-0">
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="h-full flex flex-col"
+        >
+          <div className="px-4 pt-2">
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="logs">{t("docker.logs")}</TabsTrigger>
+              <TabsTrigger value="stats">{t("docker.stats")}</TabsTrigger>
+              <TabsTrigger value="console">
+                {t("docker.consoleTab")}
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent
+            value="logs"
+            className="flex-1 overflow-auto thin-scrollbar px-3 pb-3 mt-3"
+          >
+            <LogViewer
+              sessionId={sessionId}
+              containerId={containerId}
+              containerName={container.name}
+            />
+          </TabsContent>
+
+          <TabsContent
+            value="stats"
+            className="flex-1 overflow-auto thin-scrollbar px-3 pb-3 mt-3"
+          >
+            <ContainerStats
+              sessionId={sessionId}
+              containerId={containerId}
+              containerName={container.name}
+              containerState={container.state}
+            />
+          </TabsContent>
+
+          <TabsContent
+            value="console"
+            className="flex-1 overflow-hidden px-3 pb-3 mt-3"
+          >
+            <ConsoleTerminal
+              sessionId={sessionId}
+              containerId={containerId}
+              containerName={container.name}
+              containerState={container.state}
+              hostConfig={hostConfig}
+            />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,135 @@
+import React from "react";
+import { Input } from "@/components/ui/input.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Search, Filter } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { DockerContainer } from "@/types";
+import { ContainerCard } from "./ContainerCard.tsx";
+
+interface ContainerListProps {
+  containers: DockerContainer[];
+  sessionId: string;
+  onSelectContainer: (containerId: string) => void;
+  selectedContainerId?: string | null;
+  onRefresh?: () => void;
+}
+
+export function ContainerList({
+  containers,
+  sessionId,
+  onSelectContainer,
+  selectedContainerId = null,
+  onRefresh,
+}: ContainerListProps): React.ReactElement {
+  const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState<string>("all");
+
+  const filteredContainers = React.useMemo(() => {
+    return containers.filter((container) => {
+      const matchesSearch =
+        container.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        container.image.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        container.id.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesStatus =
+        statusFilter === "all" || container.state === statusFilter;
+
+      return matchesSearch && matchesStatus;
+    });
+  }, [containers, searchQuery, statusFilter]);
+
+  const statusCounts = React.useMemo(() => {
+    const counts: Record<string, number> = {};
+    containers.forEach((c) => {
+      counts[c.state] = (counts[c.state] || 0) + 1;
+    });
+    return counts;
+  }, [containers]);
+
+  if (containers.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <p className="text-muted-foreground text-lg">
+            {t("docker.noContainersFound")}
+          </p>
+          <p className="text-muted-foreground text-sm">
+            {t("docker.noContainersFoundHint")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full gap-3">
+      <div className="flex flex-col sm:flex-row gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={t("docker.searchPlaceholder")}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+        <div className="flex items-center gap-2 sm:min-w-[200px]">
+          <Filter className="h-4 w-4 text-muted-foreground" />
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-full">
+              <SelectValue
+                placeholder={t("docker.filterByStatusPlaceholder")}
+              />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">
+                {t("docker.allContainersCount", { count: containers.length })}
+              </SelectItem>
+              {Object.entries(statusCounts).map(([status, count]) => (
+                <SelectItem key={status} value={status}>
+                  {t("docker.statusCount", {
+                    status: status.charAt(0).toUpperCase() + status.slice(1),
+                    count,
+                  })}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {filteredContainers.length === 0 ? (
+        <div className="flex items-center justify-center flex-1">
+          <div className="text-center space-y-2">
+            <p className="text-muted-foreground">
+              {t("docker.noContainersMatchFilters")}
+            </p>
+            <p className="text-muted-foreground text-sm">
+              {t("docker.noContainersMatchFiltersHint")}
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 overflow-auto thin-scrollbar pb-2">
+          {filteredContainers.map((container) => (
+            <ContainerCard
+              key={container.id}
+              container={container}
+              sessionId={sessionId}
+              onSelect={() => onSelectContainer(container.id)}
+              isSelected={selectedContainerId === container.id}
+              onRefresh={onRefresh}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,256 @@
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import { Progress } from "@/components/ui/progress.tsx";
+import { Cpu, MemoryStick, Network, HardDrive, Activity } from "lucide-react";
+import type { DockerStats } from "@/types";
+import { getContainerStats } from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+import { useTranslation } from "react-i18next";
+
+interface ContainerStatsProps {
+  sessionId: string;
+  containerId: string;
+  containerName: string;
+  containerState: string;
+}
+
+export function ContainerStats({
+  sessionId,
+  containerId,
+  containerName,
+  containerState,
+}: ContainerStatsProps): React.ReactElement {
+  const { t } = useTranslation();
+  const [stats, setStats] = React.useState<DockerStats | null>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const fetchStats = React.useCallback(async () => {
+    if (containerState !== "running") {
+      setError(t("docker.containerMustBeRunningToViewStats"));
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await getContainerStats(sessionId, containerId);
+      setStats(data);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : t("docker.failedToFetchStats"),
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sessionId, containerId, containerState]);
+
+  React.useEffect(() => {
+    fetchStats();
+
+    const interval = setInterval(fetchStats, 2000);
+
+    return () => clearInterval(interval);
+  }, [fetchStats]);
+
+  if (containerState !== "running") {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <Activity className="h-12 w-12 text-muted-foreground/50 mx-auto" />
+          <p className="text-muted-foreground text-lg">
+            {t("docker.containerNotRunning")}
+          </p>
+          <p className="text-muted-foreground text-sm">
+            {t("docker.startContainerToViewStats")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading && !stats) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <SimpleLoader size="lg" />
+          <p className="text-muted-foreground mt-4">
+            {t("docker.loadingStats")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <p className="text-red-400 text-lg">
+            {t("docker.errorLoadingStats")}
+          </p>
+          <p className="text-muted-foreground text-sm">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!stats) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-muted-foreground">{t("docker.noStatsAvailable")}</p>
+      </div>
+    );
+  }
+
+  const cpuPercent = parseFloat(stats.cpu) || 0;
+  const memPercent = parseFloat(stats.memoryPercent) || 0;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 h-full overflow-auto thin-scrollbar">
+      <Card className="py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Cpu className="h-5 w-5 text-blue-400" />
+            {t("docker.cpuUsage")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">
+                {t("docker.current")}
+              </span>{" "}
+              <span className="font-mono font-semibold text-blue-400">
+                {stats.cpu}
+              </span>
+            </div>
+            <Progress value={Math.min(cpuPercent, 100)} className="h-2" />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <MemoryStick className="h-5 w-5 text-purple-400" />
+            {t("docker.memoryUsage")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">
+                {t("docker.usedLimit")}
+              </span>
+              <span className="font-mono font-semibold text-purple-400">
+                {stats.memoryUsed} / {stats.memoryLimit}
+              </span>
+            </div>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">
+                {t("docker.percentage")}
+              </span>
+              <span className="font-mono text-purple-400">
+                {stats.memoryPercent}
+              </span>
+            </div>
+            <Progress value={Math.min(memPercent, 100)} className="h-2" />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Network className="h-5 w-5 text-green-400" />
+            {t("docker.networkIo")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">{t("docker.input")}</span>
+              <span className="font-mono text-green-400">{stats.netInput}</span>
+            </div>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">
+                {t("docker.output")}
+              </span>
+              <span className="font-mono text-green-400">
+                {stats.netOutput}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <HardDrive className="h-5 w-5 text-orange-400" />
+            {t("docker.blockIo")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">{t("docker.read")}</span>
+              <span className="font-mono text-orange-400">
+                {stats.blockRead}
+              </span>
+            </div>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">{t("docker.write")}</span>
+              <span className="font-mono text-orange-400">
+                {stats.blockWrite}
+              </span>
+            </div>
+            {stats.pids && (
+              <div className="flex justify-between items-center text-sm">
+                <span className="text-muted-foreground">
+                  {t("docker.pids")}
+                </span>
+                <span className="font-mono text-orange-400">{stats.pids}</span>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="md:col-span-2 py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Activity className="h-5 w-5 text-cyan-400" />
+            {t("docker.containerInformation")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">{t("docker.name")}</span>
+              <span className="font-mono text-foreground">{containerName}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">{t("docker.id")}</span>
+              <span className="font-mono text-sm text-foreground">
+                {containerId.substring(0, 12)}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">{t("docker.state")}</span>
+              <span className="font-semibold text-green-400 capitalize">
+                {containerState}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,239 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Card, CardContent } from "@/components/ui/card.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { Download, RefreshCw, Filter } from "lucide-react";
+import { toast } from "sonner";
+import type { DockerLogOptions } from "@/types";
+import { getContainerLogs, downloadContainerLogs } from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+
+interface LogViewerProps {
+  sessionId: string;
+  containerId: string;
+  containerName: string;
+}
+
+export function LogViewer({
+  sessionId,
+  containerId,
+  containerName,
+}: LogViewerProps): React.ReactElement {
+  const [logs, setLogs] = React.useState<string>("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isDownloading, setIsDownloading] = React.useState(false);
+  const [tailLines, setTailLines] = React.useState<string>("100");
+  const [showTimestamps, setShowTimestamps] = React.useState(false);
+  const [autoRefresh, setAutoRefresh] = React.useState(false);
+  const [searchFilter, setSearchFilter] = React.useState("");
+  const logsEndRef = React.useRef<HTMLDivElement>(null);
+
+  const fetchLogs = React.useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const options: DockerLogOptions = {
+        tail: tailLines === "all" ? undefined : parseInt(tailLines, 10),
+        timestamps: showTimestamps,
+      };
+
+      const data = await getContainerLogs(sessionId, containerId, options);
+      setLogs(data.logs);
+    } catch (error) {
+      toast.error(
+        `Failed to fetch logs: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sessionId, containerId, tailLines, showTimestamps]);
+
+  React.useEffect(() => {
+    fetchLogs();
+  }, [fetchLogs]);
+
+  React.useEffect(() => {
+    if (!autoRefresh) return;
+
+    const interval = setInterval(() => {
+      fetchLogs();
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [autoRefresh, fetchLogs]);
+
+  React.useEffect(() => {
+    if (autoRefresh && logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [logs, autoRefresh]);
+
+  const handleDownload = async () => {
+    setIsDownloading(true);
+    try {
+      const options: DockerLogOptions = {
+        timestamps: showTimestamps,
+      };
+
+      const blob = await downloadContainerLogs(sessionId, containerId, options);
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${containerName.replace(/[^a-z0-9]/gi, "_")}_logs.txt`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+
+      toast.success("Logs downloaded successfully");
+    } catch (error) {
+      toast.error(
+        `Failed to download logs: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const filteredLogs = React.useMemo(() => {
+    if (!searchFilter.trim()) return logs;
+
+    return logs
+      .split("\n")
+      .filter((line) => line.toLowerCase().includes(searchFilter.toLowerCase()))
+      .join("\n");
+  }, [logs, searchFilter]);
+
+  return (
+    <div className="flex flex-col h-full gap-3">
+      <Card className="py-3">
+        <CardContent className="px-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+            <div className="flex flex-col">
+              <Label htmlFor="tail-lines" className="mb-1">
+                Lines to show
+              </Label>
+              <Select value={tailLines} onValueChange={setTailLines}>
+                <SelectTrigger id="tail-lines">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="50">Last 50 lines</SelectItem>
+                  <SelectItem value="100">Last 100 lines</SelectItem>
+                  <SelectItem value="500">Last 500 lines</SelectItem>
+                  <SelectItem value="1000">Last 1000 lines</SelectItem>
+                  <SelectItem value="all">All logs</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex flex-col">
+              <Label htmlFor="timestamps" className="mb-1">
+                Show Timestamps
+              </Label>
+              <div className="flex items-center h-10 px-3 border rounded-md">
+                <Switch
+                  id="timestamps"
+                  checked={showTimestamps}
+                  onCheckedChange={setShowTimestamps}
+                />
+                <span className="ml-2 text-sm">
+                  {showTimestamps ? "Enabled" : "Disabled"}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex flex-col">
+              <Label htmlFor="auto-refresh" className="mb-1">
+                Auto Refresh
+              </Label>
+              <div className="flex items-center h-10 px-3 border rounded-md">
+                <Switch
+                  id="auto-refresh"
+                  checked={autoRefresh}
+                  onCheckedChange={setAutoRefresh}
+                />
+                <span className="ml-2 text-sm">
+                  {autoRefresh ? "On" : "Off"}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex flex-col">
+              <Label className="mb-1">Actions</Label>
+              <div className="flex gap-2 h-10">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={fetchLogs}
+                  disabled={isLoading}
+                  className="flex-1 h-full"
+                >
+                  {isLoading ? (
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
+                  ) : (
+                    <RefreshCw className="h-4 w-4" />
+                  )}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={handleDownload}
+                  disabled={isDownloading}
+                  className="flex-1 h-full"
+                >
+                  {isDownloading ? (
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
+                  ) : (
+                    <Download className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-2">
+            <div className="relative">
+              <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Filter logs..."
+                value={searchFilter}
+                onChange={(e) => setSearchFilter(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-input rounded-md text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="flex-1 overflow-hidden py-0">
+        <CardContent className="p-0 h-full">
+          {isLoading && !logs ? (
+            <div className="flex items-center justify-center h-full">
+              <SimpleLoader size="lg" />
+            </div>
+          ) : (
+            <div className="h-full overflow-auto thin-scrollbar">
+              <pre className="p-4 text-xs font-mono whitespace-pre-wrap break-words text-foreground leading-relaxed">
+                {filteredLogs || (
+                  <span className="text-muted-foreground">
+                    No logs available
+                  </span>
+                )}
+                <div ref={logsEndRef} />
+              </pre>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}