0 ? 'readout-dot-online' : 'readout-dot-idle'}`} />
MACHINES
{online}/{total}
≈
HASHRATE
{totalHashrate > 0 ? formatHashrate(totalHashrate) : IDLE}
0 ? 'readout-bar-active' : ''}`}
style={{ width: `${fillPct}%` }}
/>
{fillPct}%
);
});
const MobileTopStats = memo(function MobileTopStats() {
const { agents } = useWebSocket();
const { online, total, hr } = useMemo(() => {
const on = agents.filter((a) => a.status === 'online').length;
return {
online: on,
total: agents.length,
hr: agents.reduce((s, a) => s + (a.hashrate_15s ?? a.hashrate_15m ?? 0), 0),
};
}, [agents]);
return (
{online}/{total} online
{hr > 0 ? formatHashrate(hr) : 'IDLE'}
);
});
export default function Layout({ children }: LayoutProps) {
const location = useLocation();
const isMobile = useIsMobileLayout();
const { othersOnline, comrades } = usePresence();
const { glowParticles } = useVisualEffects();
const [serverConfig, setServerConfig] = useState
(null);
const [serverInfo, setServerInfo] = useState(null);
const [moreOpen, setMoreOpen] = useState(false);
useEffect(() => {
Promise.all([api.getConfig(), api.getServerInfo()])
.then(([cfg, info]) => {
setServerConfig(cfg);
setServerInfo(info);
})
.catch(() => {});
}, []);
useEffect(() => {
setMoreOpen(false);
}, [location.pathname]);
useEffect(() => {
if (!moreOpen) return;
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = prev;
};
}, [moreOpen]);
const setupStatus = getSetupStatus(serverConfig, serverInfo);
const { latestMessage } = useWebSocket();
const scoutBiome = useMemo(() => {
if (latestMessage?.type !== 'scout_constellations') return null;
return latestMessage.payload as ScoutConstellationSnapshot;
}, [latestMessage]);
const pageWeather = useMemo(() => {
const base = resolvePageWeather(location.pathname);
const path = location.pathname.split('?')[0].replace(/\/$/, '') || '/';
if (path === '/emberwake' || path === '/spread' || path === '/dashboard' || path === '/agents') {
return mergeScoutBiomeWeather(base, scoutBiome);
}
return base;
}, [location.pathname, scoutBiome]);
const showDeckEffects = isDashboardRoute(location.pathname);
const moreActive = MOBILE_MORE.some((item) => location.pathname === item.to);
const mobileShortLabel: Record = {
'/dashboard': 'Deck',
'/crucible': 'Ops',
'/activity': 'Feed',
'/roi': 'ROI',
'/lotl-timeline': 'Onion',
'/pathtracer': 'Tracer',
'/forge': 'Forge',
};
return (
{!isMobile && glowParticles && showDeckEffects &&
}
{glowParticles &&
}
{isMobile && (
AetherForge
)}
{children}
{isMobile && (
<>
{moreOpen && (
setMoreOpen(false)}
/>
)}
)}
);
}