From 30cd1c281598711993a94f4fbe8ad704de304cbd Mon Sep 17 00:00:00 2001
From: kenneth <kenneth@nym.sh>
Date: Fri, 31 Oct 2025 01:45:32 +0000
Subject: [PATCH] feat(dashboard): reflect system up/down status

Co-authored-by: Ona <no-reply@ona.com>
---
 apps/dashboard/src/App.tsx   | 30 ++++++++++++++++++++++++++----
 apps/dashboard/src/beszel.ts |  1 +
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
index e12b8bc..4cda49b 100644
--- a/apps/dashboard/src/App.tsx
+++ b/apps/dashboard/src/App.tsx
@@ -597,12 +597,36 @@ function SystemTile({
 		)
 	}
 
+	let systemStatusContent: React.ReactNode
+	switch (beszelSystemsData.status) {
+		case "up":
+			systemStatusContent = (
+				<div className="w-full flex-1 min-w-0 basis-0 relative mb-2">
+					<canvas ref={onCanvasRef} className="min-h-0 absolute top-0 left-0 w-full h-full" />
+				</div>
+			)
+			break
+
+		case "down":
+			systemStatusContent = (
+				<div className="w-full flex-1 flex items-center justify-center">
+					<p className="font-mono text-red-500 uppercase font-bold">System offline</p>
+				</div>
+			)
+			break
+	}
+
 	return (
 		<Tile className={cn("h-full flex flex-col justify-start items-start", className)}>
 			<div className="grid grid-cols-6 px-4 pt-3 w-full">
 				<div className="col-span-3 flex flex-row items-center space-x-2">
 					<p className="text-2xl">{displayName}</p>
-					<div className="size-2 border border-green-300 bg-green-500 rounded-full animate-pulse" />
+					<div
+						className={cn("size-2 border rounded-full", {
+							"animate-pulse border-green-300 bg-green-500": beszelSystemsData.status === "up",
+							"border-red-300 bg-red-500": beszelSystemsData.status === "down",
+						})}
+					/>
 				</div>
 				<div className="flex flex-col font-mono">
 					<p className="text-neutral-400 text-right leading-none">CPU</p>
@@ -617,9 +641,7 @@ function SystemTile({
 					<p className="text-right">{beszelSystemsData.info.disk.toFixed(0).padStart(3, "0")}</p>
 				</div>
 			</div>
-			<div className="w-full flex-1 min-w-0 basis-0 relative mb-2">
-				<canvas ref={onCanvasRef} className="min-h-0 absolute top-0 left-0 w-full h-full" />
-			</div>
+			{systemStatusContent}
 		</Tile>
 	)
 }
diff --git a/apps/dashboard/src/beszel.ts b/apps/dashboard/src/beszel.ts
index a3fdc41..7e75d9b 100644
--- a/apps/dashboard/src/beszel.ts
+++ b/apps/dashboard/src/beszel.ts
@@ -16,6 +16,7 @@ const API_BASE_URL = getApiBaseUrl()
 // System Info
 export interface BeszelSystemInfo {
 	name: string
+	status: "up" | "down"
 	info: {
 		cpu: number
 		ram: number