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

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";