feat: Seperate server stats and tunnel management (improved both UI's) then started initial docker implementation

src/ui/desktop/apps/server-stats/ServerStats.tsx

@@ -0,0 +1,606 @@
+import React from "react";
+import { useSidebar } from "@/components/ui/sidebar.tsx";
+import { Status, StatusIndicator } from "@/components/ui/shadcn-io/status";
+import { Separator } from "@/components/ui/separator.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  getServerStatusById,
+  getServerMetricsById,
+  executeSnippet,
+  type ServerMetrics,
+} from "@/ui/main-axios.ts";
+import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  type WidgetType,
+  type StatsConfig,
+  DEFAULT_STATS_CONFIG,
+} from "@/types/stats-widgets";
+import {
+  CpuWidget,
+  MemoryWidget,
+  DiskWidget,
+  NetworkWidget,
+  UptimeWidget,
+  ProcessesWidget,
+  SystemWidget,
+  LoginStatsWidget,
+} from "./widgets";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+
+interface QuickAction {
+  name: string;
+  snippetId: number;
+}
+
+interface HostConfig {
+  id: number;
+  name: string;
+  ip: string;
+  username: string;
+  folder?: string;
+  enableFileManager?: boolean;
+  tunnelConnections?: unknown[];
+  quickActions?: QuickAction[];
+  statsConfig?: string | StatsConfig;
+  [key: string]: unknown;
+}
+
+interface TabData {
+  id: number;
+  type: string;
+  title?: string;
+  hostConfig?: HostConfig;
+  [key: string]: unknown;
+}
+
+interface ServerProps {
+  hostConfig?: HostConfig;
+  title?: string;
+  isVisible?: boolean;
+  isTopbarOpen?: boolean;
+  embedded?: boolean;
+}
+
+export function ServerStats({
+  hostConfig,
+  title,
+  isVisible = true,
+  isTopbarOpen = true,
+  embedded = false,
+}: ServerProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { state: sidebarState } = useSidebar();
+  const { addTab, tabs } = useTabs() as {
+    addTab: (tab: { type: string; [key: string]: unknown }) => number;
+    tabs: TabData[];
+  };
+  const [serverStatus, setServerStatus] = React.useState<"online" | "offline">(
+    "offline",
+  );
+  const [metrics, setMetrics] = React.useState<ServerMetrics | null>(null);
+  const [metricsHistory, setMetricsHistory] = React.useState<ServerMetrics[]>(
+    [],
+  );
+  const [currentHostConfig, setCurrentHostConfig] = React.useState(hostConfig);
+  const [isLoadingMetrics, setIsLoadingMetrics] = React.useState(false);
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
+  const [showStatsUI, setShowStatsUI] = React.useState(true);
+  const [executingActions, setExecutingActions] = React.useState<Set<number>>(
+    new Set(),
+  );
+
+  const statsConfig = React.useMemo((): StatsConfig => {
+    if (!currentHostConfig?.statsConfig) {
+      return DEFAULT_STATS_CONFIG;
+    }
+    try {
+      const parsed =
+        typeof currentHostConfig.statsConfig === "string"
+          ? JSON.parse(currentHostConfig.statsConfig)
+          : currentHostConfig.statsConfig;
+      return { ...DEFAULT_STATS_CONFIG, ...parsed };
+    } catch (error) {
+      console.error("Failed to parse statsConfig:", error);
+      return DEFAULT_STATS_CONFIG;
+    }
+  }, [currentHostConfig?.statsConfig]);
+
+  const enabledWidgets = statsConfig.enabledWidgets;
+  const statusCheckEnabled = statsConfig.statusCheckEnabled !== false;
+  const metricsEnabled = statsConfig.metricsEnabled !== false;
+
+  React.useEffect(() => {
+    if (hostConfig?.id !== currentHostConfig?.id) {
+      setServerStatus("offline");
+      setMetrics(null);
+      setMetricsHistory([]);
+      setShowStatsUI(true);
+    }
+    setCurrentHostConfig(hostConfig);
+  }, [hostConfig?.id]);
+
+  const renderWidget = (widgetType: WidgetType) => {
+    switch (widgetType) {
+      case "cpu":
+        return <CpuWidget metrics={metrics} metricsHistory={metricsHistory} />;
+
+      case "memory":
+        return (
+          <MemoryWidget metrics={metrics} metricsHistory={metricsHistory} />
+        );
+
+      case "disk":
+        return <DiskWidget metrics={metrics} metricsHistory={metricsHistory} />;
+
+      case "network":
+        return (
+          <NetworkWidget metrics={metrics} metricsHistory={metricsHistory} />
+        );
+
+      case "uptime":
+        return (
+          <UptimeWidget metrics={metrics} metricsHistory={metricsHistory} />
+        );
+
+      case "processes":
+        return (
+          <ProcessesWidget metrics={metrics} metricsHistory={metricsHistory} />
+        );
+
+      case "system":
+        return (
+          <SystemWidget metrics={metrics} metricsHistory={metricsHistory} />
+        );
+
+      case "login_stats":
+        return (
+          <LoginStatsWidget metrics={metrics} metricsHistory={metricsHistory} />
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  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 {
+          toast.error(t("serverStats.failedToFetchHostConfig"));
+        }
+      }
+    };
+
+    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 {
+          toast.error(t("serverStats.failedToFetchHostConfig"));
+        }
+      }
+    };
+
+    window.addEventListener("ssh-hosts:changed", handleHostsChanged);
+    return () =>
+      window.removeEventListener("ssh-hosts:changed", handleHostsChanged);
+  }, [hostConfig?.id]);
+
+  React.useEffect(() => {
+    if (!statusCheckEnabled || !currentHostConfig?.id || !isVisible) {
+      setServerStatus("offline");
+      return;
+    }
+
+    let cancelled = false;
+    let intervalId: number | undefined;
+
+    const fetchStatus = async () => {
+      try {
+        const res = await getServerStatusById(currentHostConfig?.id);
+        if (!cancelled) {
+          setServerStatus(res?.status === "online" ? "online" : "offline");
+        }
+      } catch (error: unknown) {
+        if (!cancelled) {
+          const err = error as {
+            response?: { status?: number };
+          };
+          if (err?.response?.status === 503) {
+            setServerStatus("offline");
+          } else if (err?.response?.status === 504) {
+            setServerStatus("offline");
+          } else if (err?.response?.status === 404) {
+            setServerStatus("offline");
+          } else {
+            setServerStatus("offline");
+          }
+        }
+      }
+    };
+
+    fetchStatus();
+    intervalId = window.setInterval(fetchStatus, 10000);
+
+    return () => {
+      cancelled = true;
+      if (intervalId) window.clearInterval(intervalId);
+    };
+  }, [currentHostConfig?.id, isVisible, statusCheckEnabled]);
+
+  React.useEffect(() => {
+    if (!metricsEnabled || !currentHostConfig?.id || !isVisible) {
+      setShowStatsUI(false);
+      return;
+    }
+
+    let cancelled = false;
+    let intervalId: number | undefined;
+
+    const fetchMetrics = async () => {
+      if (!currentHostConfig?.id) return;
+      try {
+        setIsLoadingMetrics(true);
+        const data = await getServerMetricsById(currentHostConfig.id);
+        if (!cancelled) {
+          setMetrics(data);
+          setMetricsHistory((prev) => {
+            const newHistory = [...prev, data];
+            return newHistory.slice(-20);
+          });
+          setShowStatsUI(true);
+        }
+      } catch (error: unknown) {
+        if (!cancelled) {
+          const err = error as {
+            code?: string;
+            response?: { status?: number; data?: { error?: string } };
+          };
+          if (err?.response?.status === 404) {
+            setMetrics(null);
+            setShowStatsUI(false);
+          } else if (
+            err?.code === "TOTP_REQUIRED" ||
+            (err?.response?.status === 403 &&
+              err?.response?.data?.error === "TOTP_REQUIRED")
+          ) {
+            setMetrics(null);
+            setShowStatsUI(false);
+            toast.error(t("serverStats.totpUnavailable"));
+          } else {
+            setMetrics(null);
+            setShowStatsUI(false);
+            toast.error(t("serverStats.failedToFetchMetrics"));
+          }
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoadingMetrics(false);
+        }
+      }
+    };
+
+    fetchMetrics();
+    intervalId = window.setInterval(fetchMetrics, 10000);
+
+    return () => {
+      cancelled = true;
+      if (intervalId) window.clearInterval(intervalId);
+    };
+  }, [currentHostConfig?.id, isVisible, metricsEnabled]);
+
+  const topMarginPx = isTopbarOpen ? 74 : 16;
+  const leftMarginPx = sidebarState === "collapsed" ? 16 : 8;
+  const bottomMarginPx = 8;
+
+  const isFileManagerAlreadyOpen = React.useMemo(() => {
+    if (!currentHostConfig) return false;
+    return tabs.some(
+      (tab: TabData) =>
+        tab.type === "file_manager" &&
+        tab.hostConfig?.id === currentHostConfig.id,
+    );
+  }, [tabs, currentHostConfig]);
+
+  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-white overflow-hidden bg-transparent"
+    : "bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden";
+
+  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>
+            {statusCheckEnabled && (
+              <Status
+                status={serverStatus}
+                className="!bg-transparent !p-0.75 flex-shrink-0"
+              >
+                <StatusIndicator />
+              </Status>
+            )}
+          </div>
+          <div className="flex items-center gap-2 flex-wrap">
+            <Button
+              variant="outline"
+              disabled={isRefreshing}
+              className="font-semibold"
+              onClick={async () => {
+                if (currentHostConfig?.id) {
+                  try {
+                    setIsRefreshing(true);
+                    const res = await getServerStatusById(currentHostConfig.id);
+                    setServerStatus(
+                      res?.status === "online" ? "online" : "offline",
+                    );
+                    const data = await getServerMetricsById(
+                      currentHostConfig.id,
+                    );
+                    setMetrics(data);
+                    setShowStatsUI(true);
+                  } catch (error: unknown) {
+                    const err = error as {
+                      code?: string;
+                      status?: number;
+                      response?: { status?: number; data?: { error?: string } };
+                    };
+                    if (
+                      err?.code === "TOTP_REQUIRED" ||
+                      (err?.response?.status === 403 &&
+                        err?.response?.data?.error === "TOTP_REQUIRED")
+                    ) {
+                      toast.error(t("serverStats.totpUnavailable"));
+                      setMetrics(null);
+                      setShowStatsUI(false);
+                    } else if (
+                      err?.response?.status === 503 ||
+                      err?.status === 503
+                    ) {
+                      setServerStatus("offline");
+                      setMetrics(null);
+                      setShowStatsUI(false);
+                    } else if (
+                      err?.response?.status === 504 ||
+                      err?.status === 504
+                    ) {
+                      setServerStatus("offline");
+                      setMetrics(null);
+                      setShowStatsUI(false);
+                    } else if (
+                      err?.response?.status === 404 ||
+                      err?.status === 404
+                    ) {
+                      setServerStatus("offline");
+                      setMetrics(null);
+                      setShowStatsUI(false);
+                    } else {
+                      setServerStatus("offline");
+                      setMetrics(null);
+                      setShowStatsUI(false);
+                    }
+                  } finally {
+                    setIsRefreshing(false);
+                  }
+                }
+              }}
+              title={t("serverStats.refreshStatusAndMetrics")}
+            >
+              {isRefreshing ? (
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin"></div>
+                  {t("serverStats.refreshing")}
+                </div>
+              ) : (
+                t("serverStats.refreshStatus")
+              )}
+            </Button>
+            {currentHostConfig?.enableFileManager && (
+              <Button
+                variant="outline"
+                className="font-semibold"
+                disabled={isFileManagerAlreadyOpen}
+                title={
+                  isFileManagerAlreadyOpen
+                    ? t("serverStats.fileManagerAlreadyOpen")
+                    : t("serverStats.openFileManager")
+                }
+                onClick={() => {
+                  if (!currentHostConfig || isFileManagerAlreadyOpen) return;
+                  const titleBase =
+                    currentHostConfig?.name &&
+                    currentHostConfig.name.trim() !== ""
+                      ? currentHostConfig.name.trim()
+                      : `${currentHostConfig.username}@${currentHostConfig.ip}`;
+                  addTab({
+                    type: "file_manager",
+                    title: titleBase,
+                    hostConfig: currentHostConfig,
+                  });
+                }}
+              >
+                {t("nav.fileManager")}
+              </Button>
+            )}
+          </div>
+        </div>
+        <Separator className="p-0.25 w-full" />
+
+        <div className="flex-1 overflow-y-auto min-h-0">
+          {(metricsEnabled && showStatsUI) ||
+          (currentHostConfig?.quickActions &&
+            currentHostConfig.quickActions.length > 0) ? (
+            <div className="rounded-lg border-2 border-dark-border m-3 p-4 overflow-y-auto relative flex-1 flex flex-col">
+              {currentHostConfig?.quickActions &&
+                currentHostConfig.quickActions.length > 0 && (
+                  <div className={metricsEnabled && showStatsUI ? "mb-4" : ""}>
+                    <h3 className="text-sm font-semibold text-gray-400 mb-2">
+                      {t("serverStats.quickActions")}
+                    </h3>
+                    <div className="flex flex-wrap gap-2">
+                      {currentHostConfig.quickActions.map((action, index) => {
+                        const isExecuting = executingActions.has(
+                          action.snippetId,
+                        );
+                        return (
+                          <Button
+                            key={index}
+                            variant="outline"
+                            size="sm"
+                            className="font-semibold"
+                            disabled={isExecuting}
+                            onClick={async () => {
+                              if (!currentHostConfig) return;
+
+                              setExecutingActions((prev) =>
+                                new Set(prev).add(action.snippetId),
+                              );
+                              toast.loading(
+                                t("serverStats.executingQuickAction", {
+                                  name: action.name,
+                                }),
+                                { id: `quick-action-${action.snippetId}` },
+                              );
+
+                              try {
+                                const result = await executeSnippet(
+                                  action.snippetId,
+                                  currentHostConfig.id,
+                                );
+
+                                if (result.success) {
+                                  toast.success(
+                                    t("serverStats.quickActionSuccess", {
+                                      name: action.name,
+                                    }),
+                                    {
+                                      id: `quick-action-${action.snippetId}`,
+                                      description: result.output
+                                        ? result.output.substring(0, 200)
+                                        : undefined,
+                                      duration: 5000,
+                                    },
+                                  );
+                                } else {
+                                  toast.error(
+                                    t("serverStats.quickActionFailed", {
+                                      name: action.name,
+                                    }),
+                                    {
+                                      id: `quick-action-${action.snippetId}`,
+                                      description:
+                                        result.error ||
+                                        result.output ||
+                                        undefined,
+                                      duration: 5000,
+                                    },
+                                  );
+                                }
+                              } catch (error: any) {
+                                toast.error(
+                                  t("serverStats.quickActionError", {
+                                    name: action.name,
+                                  }),
+                                  {
+                                    id: `quick-action-${action.snippetId}`,
+                                    description:
+                                      error?.message || "Unknown error",
+                                    duration: 5000,
+                                  },
+                                );
+                              } finally {
+                                setExecutingActions((prev) => {
+                                  const next = new Set(prev);
+                                  next.delete(action.snippetId);
+                                  return next;
+                                });
+                              }
+                            }}
+                            title={t("serverStats.executeQuickAction", {
+                              name: action.name,
+                            })}
+                          >
+                            {isExecuting ? (
+                              <div className="flex items-center gap-2">
+                                <div className="w-3 h-3 border-2 border-gray-300 border-t-transparent rounded-full animate-spin"></div>
+                                {action.name}
+                              </div>
+                            ) : (
+                              action.name
+                            )}
+                          </Button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              {metricsEnabled &&
+                showStatsUI &&
+                (!metrics && serverStatus === "offline" ? (
+                  <div className="flex items-center justify-center py-8">
+                    <div className="text-center">
+                      <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-red-500/20 flex items-center justify-center">
+                        <div className="w-6 h-6 border-2 border-red-400 rounded-full"></div>
+                      </div>
+                      <p className="text-gray-300 mb-1">
+                        {t("serverStats.serverOffline")}
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        {t("serverStats.cannotFetchMetrics")}
+                      </p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {enabledWidgets.map((widgetType) => (
+                      <div key={widgetType} className="h-[280px]">
+                        {renderWidget(widgetType)}
+                      </div>
+                    ))}
+                  </div>
+                ))}
+
+              {metricsEnabled && showStatsUI && (
+                <SimpleLoader
+                  visible={isLoadingMetrics && !metrics}
+                  message={t("serverStats.loadingMetrics")}
+                />
+              )}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/CpuWidget.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { Cpu } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ServerMetrics } from "@/ui/main-axios.ts";
+import { RechartsPrimitive } from "@/components/ui/chart.tsx";
+
+const {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} = RechartsPrimitive;
+
+interface CpuWidgetProps {
+  metrics: ServerMetrics | null;
+  metricsHistory: ServerMetrics[];
+}
+
+export function CpuWidget({ metrics, metricsHistory }: CpuWidgetProps) {
+  const { t } = useTranslation();
+
+  const chartData = React.useMemo(() => {
+    return metricsHistory.map((m, index) => ({
+      index,
+      cpu: m.cpu?.percent || 0,
+    }));
+  }, [metricsHistory]);
+
+  return (
+    <div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
+        <Cpu className="h-5 w-5 text-blue-400" />
+        <h3 className="font-semibold text-lg text-white">
+          {t("serverStats.cpuUsage")}
+        </h3>
+      </div>
+
+      <div className="flex flex-col flex-1 min-h-0 gap-2">
+        <div className="flex items-baseline gap-3 flex-shrink-0">
+          <div className="text-2xl font-bold text-blue-400">
+            {typeof metrics?.cpu?.percent === "number"
+              ? `${metrics.cpu.percent}%`
+              : "N/A"}
+          </div>
+          <div className="text-xs text-gray-400">
+            {typeof metrics?.cpu?.cores === "number"
+              ? t("serverStats.cpuCores", { count: metrics.cpu.cores })
+              : t("serverStats.naCpus")}
+          </div>
+        </div>
+        <div className="text-xs text-gray-500 flex-shrink-0">
+          {metrics?.cpu?.load
+            ? t("serverStats.loadAverage", {
+                avg1: metrics.cpu.load[0].toFixed(2),
+                avg5: metrics.cpu.load[1].toFixed(2),
+                avg15: metrics.cpu.load[2].toFixed(2),
+              })
+            : t("serverStats.loadAverageNA")}
+        </div>
+        <div className="flex-1 min-h-0">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+              <XAxis
+                dataKey="index"
+                stroke="#9ca3af"
+                tick={{ fill: "#9ca3af" }}
+                hide
+              />
+              <YAxis
+                domain={[0, 100]}
+                stroke="#9ca3af"
+                tick={{ fill: "#9ca3af" }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "#1f2937",
+                  border: "1px solid #374151",
+                  borderRadius: "6px",
+                  color: "#fff",
+                }}
+                formatter={(value: number) => [`${value.toFixed(1)}%`, "CPU"]}
+              />
+              <Line
+                type="monotone"
+                dataKey="cpu"
+                stroke="#60a5fa"
+                strokeWidth={2}
+                dot={false}
+                animationDuration={300}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/DiskWidget.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { HardDrive } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ServerMetrics } from "@/ui/main-axios.ts";
+import { RechartsPrimitive } from "@/components/ui/chart.tsx";
+
+const { RadialBarChart, RadialBar, PolarAngleAxis, ResponsiveContainer } =
+  RechartsPrimitive;
+
+interface DiskWidgetProps {
+  metrics: ServerMetrics | null;
+  metricsHistory: ServerMetrics[];
+}
+
+export function DiskWidget({ metrics }: DiskWidgetProps) {
+  const { t } = useTranslation();
+
+  const radialData = React.useMemo(() => {
+    const percent = metrics?.disk?.percent || 0;
+    return [
+      {
+        name: "Disk",
+        value: percent,
+        fill: "#fb923c",
+      },
+    ];
+  }, [metrics]);
+
+  return (
+    <div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
+        <HardDrive className="h-5 w-5 text-orange-400" />
+        <h3 className="font-semibold text-lg text-white">
+          {t("serverStats.diskUsage")}
+        </h3>
+      </div>
+
+      <div className="flex flex-col flex-1 min-h-0">
+        <div className="flex-1 min-h-0 flex items-center justify-center">
+          <ResponsiveContainer width="100%" height="100%">
+            <RadialBarChart
+              cx="50%"
+              cy="50%"
+              innerRadius="60%"
+              outerRadius="90%"
+              data={radialData}
+              startAngle={90}
+              endAngle={-270}
+            >
+              <PolarAngleAxis
+                type="number"
+                domain={[0, 100]}
+                angleAxisId={0}
+                tick={false}
+              />
+              <RadialBar
+                background
+                dataKey="value"
+                cornerRadius={10}
+                fill="#fb923c"
+              />
+              <text
+                x="50%"
+                y="50%"
+                textAnchor="middle"
+                dominantBaseline="middle"
+                className="text-2xl font-bold fill-orange-400"
+              >
+                {typeof metrics?.disk?.percent === "number"
+                  ? `${metrics.disk.percent}%`
+                  : "N/A"}
+              </text>
+            </RadialBarChart>
+          </ResponsiveContainer>
+        </div>
+        <div className="flex-shrink-0 space-y-1 text-center pb-2">
+          <div className="text-xs text-gray-400">
+            {(() => {
+              const used = metrics?.disk?.usedHuman;
+              const total = metrics?.disk?.totalHuman;
+              if (used && total) {
+                return `${used} / ${total}`;
+              }
+              return "N/A";
+            })()}
+          </div>
+          <div className="text-xs text-gray-500">
+            {(() => {
+              const available = metrics?.disk?.availableHuman;
+              return available
+                ? `${t("serverStats.available")}: ${available}`
+                : `${t("serverStats.available")}: N/A`;
+            })()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/LoginStatsWidget.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import { UserCheck, UserX, MapPin, Activity } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+interface LoginRecord {
+  user: string;
+  ip: string;
+  time: string;
+  status: "success" | "failed";
+}
+
+interface LoginStatsMetrics {
+  recentLogins: LoginRecord[];
+  failedLogins: LoginRecord[];
+  totalLogins: number;
+  uniqueIPs: number;
+}
+
+interface ServerMetrics {
+  login_stats?: LoginStatsMetrics;
+}
+
+interface LoginStatsWidgetProps {
+  metrics: ServerMetrics | null;
+  metricsHistory: ServerMetrics[];
+}
+
+export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
+  const { t } = useTranslation();
+
+  const loginStats = metrics?.login_stats;
+  const recentLogins = loginStats?.recentLogins || [];
+  const failedLogins = loginStats?.failedLogins || [];
+  const totalLogins = loginStats?.totalLogins || 0;
+  const uniqueIPs = loginStats?.uniqueIPs || 0;
+
+  return (
+    <div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
+        <UserCheck className="h-5 w-5 text-green-400" />
+        <h3 className="font-semibold text-lg text-white">
+          {t("serverStats.loginStats")}
+        </h3>
+      </div>
+
+      <div className="flex flex-col flex-1 min-h-0 gap-3">
+        <div className="grid grid-cols-2 gap-2 flex-shrink-0">
+          <div className="bg-dark-bg-darker p-2 rounded border border-dark-border/30">
+            <div className="flex items-center gap-1 text-xs text-gray-400 mb-1">
+              <Activity className="h-3 w-3" />
+              <span>{t("serverStats.totalLogins")}</span>
+            </div>
+            <div className="text-xl font-bold text-green-400">
+              {totalLogins}
+            </div>
+          </div>
+          <div className="bg-dark-bg-darker p-2 rounded border border-dark-border/30">
+            <div className="flex items-center gap-1 text-xs text-gray-400 mb-1">
+              <MapPin className="h-3 w-3" />
+              <span>{t("serverStats.uniqueIPs")}</span>
+            </div>
+            <div className="text-xl font-bold text-blue-400">{uniqueIPs}</div>
+          </div>
+        </div>
+
+        <div className="flex-1 min-h-0 overflow-y-auto space-y-2">
+          <div className="flex-shrink-0">
+            <div className="flex items-center gap-2 mb-1">
+              <UserCheck className="h-4 w-4 text-green-400" />
+              <span className="text-sm font-semibold text-gray-300">
+                {t("serverStats.recentSuccessfulLogins")}
+              </span>
+            </div>
+            {recentLogins.length === 0 ? (
+              <div className="text-xs text-gray-500 italic p-2">
+                {t("serverStats.noRecentLoginData")}
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {recentLogins.slice(0, 5).map((login, idx) => (
+                  <div
+                    key={idx}
+                    className="text-xs bg-dark-bg-darker p-2 rounded border border-dark-border/30 flex justify-between items-center"
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      <span className="text-green-400 font-mono truncate">
+                        {login.user}
+                      </span>
+                      <span className="text-gray-500">
+                        {t("serverStats.from")}
+                      </span>
+                      <span className="text-blue-400 font-mono truncate">
+                        {login.ip}
+                      </span>
+                    </div>
+                    <span className="text-gray-500 text-[10px] flex-shrink-0 ml-2">
+                      {new Date(login.time).toLocaleString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {failedLogins.length > 0 && (
+            <div className="flex-shrink-0">
+              <div className="flex items-center gap-2 mb-1">
+                <UserX className="h-4 w-4 text-red-400" />
+                <span className="text-sm font-semibold text-gray-300">
+                  {t("serverStats.recentFailedAttempts")}
+                </span>
+              </div>
+              <div className="space-y-1">
+                {failedLogins.slice(0, 3).map((login, idx) => (
+                  <div
+                    key={idx}
+                    className="text-xs bg-red-900/20 p-2 rounded border border-red-500/30 flex justify-between items-center"
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      <span className="text-red-400 font-mono truncate">
+                        {login.user}
+                      </span>
+                      <span className="text-gray-500">
+                        {t("serverStats.from")}
+                      </span>
+                      <span className="text-blue-400 font-mono truncate">
+                        {login.ip}
+                      </span>
+                    </div>
+                    <span className="text-gray-500 text-[10px] flex-shrink-0 ml-2">
+                      {new Date(login.time).toLocaleString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/MemoryWidget.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { MemoryStick } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ServerMetrics } from "@/ui/main-axios.ts";
+import { RechartsPrimitive } from "@/components/ui/chart.tsx";
+
+const {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} = RechartsPrimitive;
+
+interface MemoryWidgetProps {
+  metrics: ServerMetrics | null;
+  metricsHistory: ServerMetrics[];
+}
+
+export function MemoryWidget({ metrics, metricsHistory }: MemoryWidgetProps) {
+  const { t } = useTranslation();
+
+  const chartData = React.useMemo(() => {
+    return metricsHistory.map((m, index) => ({
+      index,
+      memory: m.memory?.percent || 0,
+    }));
+  }, [metricsHistory]);
+
+  return (
+    <div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
+        <MemoryStick className="h-5 w-5 text-green-400" />
+        <h3 className="font-semibold text-lg text-white">
+          {t("serverStats.memoryUsage")}
+        </h3>
+      </div>
+
+      <div className="flex flex-col flex-1 min-h-0 gap-2">
+        <div className="flex items-baseline gap-3 flex-shrink-0">
+          <div className="text-2xl font-bold text-green-400">
+            {typeof metrics?.memory?.percent === "number"
+              ? `${metrics.memory.percent}%`
+              : "N/A"}
+          </div>
+          <div className="text-xs text-gray-400">
+            {(() => {
+              const used = metrics?.memory?.usedGiB;
+              const total = metrics?.memory?.totalGiB;
+              if (typeof used === "number" && typeof total === "number") {
+                return `${used.toFixed(1)} / ${total.toFixed(1)} GiB`;
+              }
+              return "N/A";
+            })()}
+          </div>
+        </div>
+        <div className="text-xs text-gray-500 flex-shrink-0">
+          {(() => {
+            const used = metrics?.memory?.usedGiB;
+            const total = metrics?.memory?.totalGiB;
+            const free =
+              typeof used === "number" && typeof total === "number"
+                ? (total - used).toFixed(1)
+                : "N/A";
+            return `${t("serverStats.free")}: ${free} GiB`;
+          })()}
+        </div>
+        <div className="flex-1 min-h-0">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={chartData}>
+              <defs>
+                <linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#34d399" stopOpacity={0.8} />
+                  <stop offset="95%" stopColor="#34d399" stopOpacity={0.1} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+              <XAxis
+                dataKey="index"
+                stroke="#9ca3af"
+                tick={{ fill: "#9ca3af" }}
+                hide
+              />
+              <YAxis
+                domain={[0, 100]}
+                stroke="#9ca3af"
+                tick={{ fill: "#9ca3af" }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "#1f2937",
+                  border: "1px solid #374151",
+                  borderRadius: "6px",
+                  color: "#fff",
+                }}
+                formatter={(value: number) => [
+                  `${value.toFixed(1)}%`,
+                  "Memory",
+                ]}
+              />
+              <Area
+                type="monotone"
+                dataKey="memory"
+                stroke="#34d399"
+                strokeWidth={2}
+                fill="url(#memoryGradient)"
+                animationDuration={300}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/NetworkWidget.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Network, Wifi, WifiOff } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ServerMetrics } from "@/ui/main-axios.ts";
+
+interface NetworkWidgetProps {
+  metrics: ServerMetrics | null;
+  metricsHistory: ServerMetrics[];
+}
+
+export function NetworkWidget({ metrics }: NetworkWidgetProps) {
+  const { t } = useTranslation();
+
+  const metricsWithNetwork = metrics as ServerMetrics & {
+    network?: {
+      interfaces?: Array<{
+        name: string;
+        state: string;
+        ip: string;
+      }>;
+    };
+  };
+  const network = metricsWithNetwork?.network;
+  const interfaces = network?.interfaces || [];
+
+  return (
+    <div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
+        <Network className="h-5 w-5 text-indigo-400" />
+        <h3 className="font-semibold text-lg text-white">
+          {t("serverStats.networkInterfaces")}
+        </h3>
+      </div>
+
+      <div className="space-y-2.5 overflow-auto flex-1">
+        {interfaces.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <WifiOff className="h-10 w-10 mb-3 opacity-50" />
+            <p className="text-sm">{t("serverStats.noInterfacesFound")}</p>
+          </div>
+        ) : (
+          interfaces.map((iface, index: number) => (
+            <div
+              key={index}
+              className="p-3 rounded-lg bg-dark-bg/50 border border-dark-border/30 hover:bg-dark-bg/60 transition-colors"
+            >
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
+                  <Wifi
+                    className={`h-4 w-4 ${iface.state === "UP" ? "text-green-400" : "text-gray-500"}`}
+                  />
+                  <span className="text-sm font-semibold text-white font-mono">
+                    {iface.name}
+                  </span>
+                </div>
+                <span
+                  className={`text-xs px-2.5 py-0.5 rounded-full font-medium ${
+                    iface.state === "UP"
+                      ? "bg-green-500/20 text-green-400"
+                      : "bg-gray-500/20 text-gray-500"
+                  }`}
+                >
+                  {iface.state}
+                </span>
+              </div>
+              <div className="text-xs text-gray-400 font-mono font-medium">
+                {iface.ip}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/ProcessesWidget.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { List, Activity } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ServerMetrics } from "@/ui/main-axios.ts";
+
+interface ProcessesWidgetProps {
+  metrics: ServerMetrics | null;
+  metricsHistory: ServerMetrics[];
+}
+
+export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
+  const { t } = useTranslation();
+
+  const metricsWithProcesses = metrics as ServerMetrics & {
+    processes?: {
+      total?: number;
+      running?: number;
+      top?: Array<{
+        pid: number;
+        cpu: number;
+        mem: number;
+        command: string;
+        user: string;
+      }>;
+    };
+  };
+  const processes = metricsWithProcesses?.processes;
+  const topProcesses = processes?.top || [];
+
+  return (
+    <div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
+        <List className="h-5 w-5 text-yellow-400" />
+        <h3 className="font-semibold text-lg text-white">
+          {t("serverStats.processes")}
+        </h3>
+      </div>
+
+      <div className="flex items-center justify-between mb-3 pb-2 border-b border-dark-border/30">
+        <div className="text-sm text-gray-400">
+          {t("serverStats.totalProcesses")}:{" "}
+          <span className="text-white font-semibold">
+            {processes?.total ?? "N/A"}
+          </span>
+        </div>
+        <div className="text-sm text-gray-400">
+          {t("serverStats.running")}:{" "}
+          <span className="text-green-400 font-semibold">
+            {processes?.running ?? "N/A"}
+          </span>
+        </div>
+      </div>
+
+      <div className="overflow-auto flex-1">
+        {topProcesses.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <Activity className="h-10 w-10 mb-3 opacity-50" />
+            <p className="text-sm">{t("serverStats.noProcessesFound")}</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {topProcesses.map((proc, index: number) => (
+              <div
+                key={index}
+                className="p-2.5 rounded-lg bg-dark-bg/30 hover:bg-dark-bg/50 transition-colors border border-dark-border/20"
+              >
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="text-xs font-mono text-gray-400 font-medium">
+                    PID: {proc.pid}
+                  </span>
+                  <div className="flex gap-3 text-xs font-medium">
+                    <span className="text-blue-400">CPU: {proc.cpu}%</span>
+                    <span className="text-green-400">MEM: {proc.mem}%</span>
+                  </div>
+                </div>
+                <div className="text-xs text-white font-mono truncate mb-1">
+                  {proc.command}
+                </div>
+                <div className="text-xs text-gray-500">User: {proc.user}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/SystemWidget.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Server, Info } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ServerMetrics } from "@/ui/main-axios.ts";
+
+interface SystemWidgetProps {
+  metrics: ServerMetrics | null;
+  metricsHistory: ServerMetrics[];
+}
+
+export function SystemWidget({ metrics }: SystemWidgetProps) {
+  const { t } = useTranslation();
+
+  const metricsWithSystem = metrics as ServerMetrics & {
+    system?: {
+      hostname?: string;
+      os?: string;
+      kernel?: string;
+    };
+  };
+  const system = metricsWithSystem?.system;
+
+  return (
+    <div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
+        <Server className="h-5 w-5 text-purple-400" />
+        <h3 className="font-semibold text-lg text-white">
+          {t("serverStats.systemInfo")}
+        </h3>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-start gap-3">
+          <Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
+          <div className="min-w-0 flex-1">
+            <p className="text-xs text-gray-400 mb-1.5">
+              {t("serverStats.hostname")}
+            </p>
+            <p className="text-sm text-white font-mono truncate font-medium">
+              {system?.hostname || "N/A"}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-start gap-3">
+          <Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
+          <div className="min-w-0 flex-1">
+            <p className="text-xs text-gray-400 mb-1.5">
+              {t("serverStats.operatingSystem")}
+            </p>
+            <p className="text-sm text-white font-mono truncate font-medium">
+              {system?.os || "N/A"}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-start gap-3">
+          <Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
+          <div className="min-w-0 flex-1">
+            <p className="text-xs text-gray-400 mb-1.5">
+              {t("serverStats.kernel")}
+            </p>
+            <p className="text-sm text-white font-mono truncate font-medium">
+              {system?.kernel || "N/A"}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/UptimeWidget.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Clock, Activity } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ServerMetrics } from "@/ui/main-axios.ts";
+
+interface UptimeWidgetProps {
+  metrics: ServerMetrics | null;
+  metricsHistory: ServerMetrics[];
+}
+
+export function UptimeWidget({ metrics }: UptimeWidgetProps) {
+  const { t } = useTranslation();
+
+  const metricsWithUptime = metrics as ServerMetrics & {
+    uptime?: {
+      formatted?: string;
+      seconds?: number;
+    };
+  };
+  const uptime = metricsWithUptime?.uptime;
+
+  return (
+    <div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
+        <Clock className="h-5 w-5 text-cyan-400" />
+        <h3 className="font-semibold text-lg text-white">
+          {t("serverStats.uptime")}
+        </h3>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1">
+        <div className="relative mb-4">
+          <div className="w-24 h-24 rounded-full bg-cyan-500/10 flex items-center justify-center">
+            <Activity className="h-12 w-12 text-cyan-400" />
+          </div>
+        </div>
+
+        <div className="text-center">
+          <div className="text-3xl font-bold text-cyan-400 mb-2">
+            {uptime?.formatted || "N/A"}
+          </div>
+          <div className="text-sm text-gray-400">
+            {t("serverStats.totalUptime")}
+          </div>
+          {uptime?.seconds && (
+            <div className="text-xs text-gray-500 mt-2">
+              {Math.floor(uptime.seconds).toLocaleString()}{" "}
+              {t("serverStats.seconds")}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/server-stats/widgets/index.ts

@@ -0,0 +1,8 @@
+export { CpuWidget } from "./CpuWidget";
+export { MemoryWidget } from "./MemoryWidget";
+export { DiskWidget } from "./DiskWidget";
+export { NetworkWidget } from "./NetworkWidget";
+export { UptimeWidget } from "./UptimeWidget";
+export { ProcessesWidget } from "./ProcessesWidget";
+export { SystemWidget } from "./SystemWidget";
+export { LoginStatsWidget } from "./LoginStatsWidget";