flvx/plans/046-monitor-nezha-redesign.md

Monitor Nezha Redesign

Summary

Redesign the monitor overview to resemble Nezha dashboard by introducing a Server Matrix (Grid) containing cards with metrics visualisations.

Objectives

• Analyze monitor-view.tsx layout boundaries.
• Create ServerCard utilizing Progress component.
• Render metrics (CPU, RAM, Disk, System Load, Connections, Network speeeds).
• Implement robust real-time updates and seamless state linkage via existing hooks.
• Adjust layout positioning for impact at top-of-page.

Technical Details

Injected a ServerCard inline component mapping over unified node metric states. Used the tailwind and hero UI components matching visual designs like progress bars and small monospace typograhy. Extracted utility color scales.

Status: Complete