v2.3.0

src/ui/dashboard/cards/RecentActivityCard.tsx

@@ -22,6 +22,21 @@ interface RecentActivityCardProps {
   onActivityClick: (item: RecentActivityItem) => void;
 }
 
+function formatRelativeTime(
+  timestamp: string,
+  t: (key: string) => string,
+): string {
+  const diffMs = Date.now() - new Date(timestamp).getTime();
+  if (diffMs < 0) return t("dashboard.justNow");
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 60) return t("dashboard.justNow");
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m`;
+  const diffHour = Math.floor(diffMin / 60);
+  if (diffHour < 24) return `${diffHour}h`;
+  return `${Math.floor(diffHour / 24)}d`;
+}
+
 export function RecentActivityCard({
   activities,
   loading,
@@ -95,7 +110,14 @@ export function RecentActivityCard({
                   ) : (
                     <Terminal size={20} className="shrink-0" />
                   )}
-                  <p className="truncate ml-2 font-semibold">{item.hostName}</p>
+                  <div className="flex flex-col items-start min-w-0 ml-2">
+                    <p className="truncate font-semibold leading-none">
+                      {item.hostName}
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-0.5 leading-none">
+                      {formatRelativeTime(item.timestamp, t)}
+                    </p>
+                  </div>
                 </Button>
               ))
           )}

src/ui/dashboard/cards/ServerOverviewCard.tsx

@@ -56,22 +56,28 @@ export function ServerOverviewCard({
               <p className="leading-none text-muted-foreground">
                 {versionText}
               </p>
-              {!updateCheckDisabled && (
+              {versionStatus === "beta" ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="ml-2 text-sm border-1 border-edge text-blue-400"
+                >
+                  {t("dashboard.beta")}
+                </Button>
+              ) : !updateCheckDisabled ? (
                 <>
                   <Button
                     variant="outline"
                     size="sm"
-                    className={`ml-2 text-sm border-1 border-edge ${versionStatus === "up_to_date" ? "text-green-400" : versionStatus === "beta" ? "text-blue-400" : "text-yellow-400"}`}
+                    className={`ml-2 text-sm border-1 border-edge ${versionStatus === "up_to_date" ? "text-green-400" : "text-yellow-400"}`}
                   >
                     {versionStatus === "up_to_date"
                       ? t("dashboard.upToDate")
-                      : versionStatus === "beta"
-                        ? t("dashboard.beta")
-                        : t("dashboard.updateAvailable")}
+                      : t("dashboard.updateAvailable")}
                   </Button>
                   <UpdateLog loggedIn={loggedIn} />
                 </>
-              )}
+              ) : null}
             </div>
           </div>
 

src/ui/dashboard/cards/ServerStatsCard.tsx

@@ -23,6 +23,10 @@ export function ServerStatsCard({
 }: ServerStatsCardProps): React.ReactElement {
   const { t } = useTranslation();
 
+  const visibleStats = serverStats.filter(
+    (s) => s.cpu !== null || s.ram !== null,
+  );
+
   return (
     <div className="border-2 border-edge rounded-md flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20 !bg-elevated">
       <div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
@@ -38,12 +42,12 @@ export function ServerStatsCard({
               <Loader2 className="animate-spin mr-2" size={16} />
               <span>{t("dashboard.loadingServerStats")}</span>
             </div>
-          ) : serverStats.length === 0 ? (
+          ) : visibleStats.length === 0 ? (
             <p className="text-muted-foreground text-sm">
               {t("dashboard.noServerData")}
             </p>
           ) : (
-            serverStats.map((server) => (
+            visibleStats.map((server) => (
               <Button
                 key={server.id}
                 variant="outline"
@@ -56,18 +60,16 @@ export function ServerStatsCard({
                     <p className="truncate ml-2 font-semibold">{server.name}</p>
                   </div>
                   <div className="flex flex-row justify-start gap-4 text-xs text-muted-foreground">
-                    <span>
-                      {t("dashboard.cpu")}:{" "}
-                      {server.cpu !== null
-                        ? `${server.cpu}%`
-                        : t("dashboard.notAvailable")}
-                    </span>
-                    <span>
-                      {t("dashboard.ram")}:{" "}
-                      {server.ram !== null
-                        ? `${server.ram}%`
-                        : t("dashboard.notAvailable")}
-                    </span>
+                    {server.cpu !== null && (
+                      <span>
+                        {t("dashboard.cpu")}: {server.cpu.toFixed(1)}%
+                      </span>
+                    )}
+                    {server.ram !== null && (
+                      <span>
+                        {t("dashboard.ram")}: {server.ram.toFixed(1)}%
+                      </span>
+                    )}
                   </div>
                 </div>
               </Button>