feat: Enhanced live network statistics with interface breakdown
Dashboard Enhancements:
1. Real-Time Interface Statistics
- Per-interface traffic monitoring (br-lan, br-wan)
- TCP/UDP/ICMP packet breakdown with percentages
- Total traffic and packet counts per interface
- Visual progress bars showing protocol distribution
- Dropped packet alerts when present
- Auto-refreshing every 5 seconds
2. Improved Flow Display
- Better flow status showing Active vs Expired counts
- Enhanced "Network Flows" card subtitle format
- Changed icon from exchange-alt to stream
- Clearer separation of active/expired metrics
RPC Backend Changes:
3. Interface Stats in Dashboard API
- Added "interfaces" object to get_dashboard response
- Per-interface metrics: tcp_packets, udp_packets, icmp_packets
- Traffic data: ip_bytes, wire_bytes
- Quality metrics: capture_dropped packets
- Dynamically discovers all monitored interfaces
4. Enhanced Flow Statistics
- Added flows_active and flows_expired to stats object
- More accurate flow state tracking
- Better resource utilization metrics
UI/UX Improvements:
5. Live Interface Cards
- Clean card-based design for each interface
- Color-coded protocol stats (TCP=blue, UDP=green, ICMP=orange)
- Responsive grid layout adapts to screen size
- Real-time percentage calculations
- Smooth transitions on data updates
6. Visual Hierarchy
- Interface section positioned between overview stats and apps
- Clear visual separation with border and padding
- Consistent color scheme across dashboard
- Better information density
Technical Details:
- Extracts interface list from netifyd status.json stats object
- Calculates protocol percentages client-side
- Uses grid layout for responsive display
- Leverages existing formatBytes utility
- No performance impact (lightweight rendering)
Benefits:
✅ See exactly which interface has traffic (LAN vs WAN)
✅ Understand protocol distribution per interface
✅ Quickly spot packet drops or issues
✅ Better network troubleshooting capabilities
✅ Real-time visibility into router traffic patterns
Example Output:
br-lan: 0 packets (LAN - local network)
br-wan: 85 TCP, 15 UDP, 13 ICMP = 113 total packets (WAN - internet)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
CyberMind-FR
595bc5c06f