Tile windowing system

app/components/panels/NetworkPanel.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { getStats, type Stats, type NetworkInterface } from "../../lib/getStats";
+import NetworkCard from "../NetworkCard";
+
+export default function NetworkPanel() {
+	const [iface, setIface] = useState<string | null>(null);
+	const [speed, setSpeed] = useState<{ rx: number; tx: number } | null>(null);
+	const prevRef = useRef<Record<string, NetworkInterface> | null>(null);
+	const lastRef = useRef<number>(0);
+
+	useEffect(() => {
+		const go = async () => {
+			try {
+				const now = Date.now();
+				const data = await getStats();
+				const primary = Object.keys(data.network).find(
+					(k) => !k.startsWith("docker") && !k.startsWith("br-") && data.network[k].rx > 0,
+				);
+				setIface(primary ?? null);
+				if (primary && prevRef.current?.[primary] && lastRef.current > 0) {
+					const elapsed = (now - lastRef.current) / 1000;
+					const prev = prevRef.current[primary];
+					setSpeed({
+						rx: Math.max(0, (data.network[primary].rx - prev.rx) / elapsed),
+						tx: Math.max(0, (data.network[primary].tx - prev.tx) / elapsed),
+					});
+				}
+				prevRef.current = data.network;
+				lastRef.current = now;
+			} catch {}
+		};
+		go();
+		const id = setInterval(go, 4000);
+		return () => clearInterval(id);
+	}, []);
+
+	return (
+		<div className="p-4">
+			<NetworkCard iface={iface} speed={speed} />
+		</div>
+	);
+}