bar graph fix

app/components/PowerGrid.tsx

@@ -13,9 +13,6 @@ interface PowerGridProps {
 export default function PowerGrid({ power, onRefresh, showControls = true }: PowerGridProps) {
 	const [toggling, setToggling] = useState<string | null>(null);
 
-	const server = power?.devices.find((d) => d.name === "server") ?? null;
-	const desktop = power?.devices.find((d) => d.name === "desktop") ?? null;
-
 	const handleToggle = async (deviceName: string, on: boolean) => {
 		setToggling(deviceName);
 		try {
@@ -28,22 +25,27 @@ export default function PowerGrid({ power, onRefresh, showControls = true }: Pow
 		}
 	};
 
+	const devices = power?.devices ?? [];
+
 	return (
 		<div className="grid grid-cols-1 md:grid-cols-2 gap-3.5 mb-11">
-			<PowerCard
-				device={server}
-				label="Server"
-				delay={0}
-				toggling={toggling === "server"}
-				onToggle={showControls ? (on) => handleToggle("server", on) : undefined}
-			/>
-			<PowerCard
-				device={desktop}
-				label="Desktop"
-				delay={60}
-				toggling={toggling === "desktop"}
-				onToggle={showControls ? (on) => handleToggle("desktop", on) : undefined}
-			/>
+			{devices.length > 0 ? (
+				devices.map((device, i) => (
+					<PowerCard
+						key={device.ip}
+						device={device}
+						label={device.name}
+						delay={i * 60}
+						toggling={toggling === device.name}
+						onToggle={showControls ? (on) => handleToggle(device.name, on) : undefined}
+					/>
+				))
+			) : (
+				<>
+					<PowerCard device={null} label="" delay={0} />
+					<PowerCard device={null} label="" delay={60} />
+				</>
+			)}
 		</div>
 	);
 }