Function StatsWidget

src/components/widgets/StatsWidget.tsx:28–227

({ mode = 'text' })

};

export const StatsWidget: React.FC<StatsWidgetProps> = ({ mode = 'text' }) => {
    const [ping, setPing] = useState(0);
    const [isOnline, setIsOnline] = useState(navigator.onLine);
    const [memory, setMemory] = useState(getMemoryMB);
    const [uptime, setUptime] = useState('00:00:00');
    const mountTime = useRef(Date.now());
    const pingRef = useRef(0);

    // History for graphs (last 30 points)
    const HISTORY_LENGTH = 30;
    const [history, setHistory] = useState({
        ping: new Array(HISTORY_LENGTH).fill(0),
        memory: new Array(HISTORY_LENGTH).fill(0),
    });

    // Online/offline listener
    useEffect(() => {
        const handleOnline = () => setIsOnline(true);
        const handleOffline = () => setIsOnline(false);
        window.addEventListener('online', handleOnline);
        window.addEventListener('offline', handleOffline);
        return () => {
            window.removeEventListener('online', handleOnline);
            window.removeEventListener('offline', handleOffline);
        };
    }, []);

    // Ping measurement (existing logic)
    useEffect(() => {
        const measurePing = async () => {
            const start = performance.now();
            try {
                if (!navigator.onLine) {
                    throw new Error('Offline');
                }
                await fetch(`https://www.google.com?_=${Date.now()}`, {
                    method: 'HEAD',
                    mode: 'no-cors',
                    cache: 'no-store',
                });
                const end = performance.now();
                const latency = Math.round(end - start);
                setPing(latency);
                pingRef.current = latency;
            } catch {
                setPing(0);
                pingRef.current = 0;
            }
        };

        measurePing();
        const interval = setInterval(measurePing, 2000);
        return () => clearInterval(interval);
    }, []);

    // Memory + history polling (every 2s)
    useEffect(() => {
        const poll = () => {