(feat): Bandwidth Graph Overlay

[stedrow]

Add Bandwidth Graph Overlay

Screenshot for that sweet sweet dopamine

Because knowing that you're wasting bandwidth is almost as important as knowing you're wasting RAM.

This PR adds a live bandwidth graph overlay that tracks exactly how many kilobytes you're spending to maintain awareness of a number on a screen.

What's New:

The dashboard now includes a collapsible bandwidth graph at the bottom that displays your cumulative data usage in glorious real-time. It shows both Bandwidth In (data you've received from strangers on the internet) and Bandwidth Out (heartbeats you've graciously relayed to keep The Swarm alive).

Features:

• Live Graph: Updates every 10 seconds via the existing SSE stream. No additional overhead. We're wasteful, not reckless.
• Time Ranges: View your bandwidth consumption over the last 5 minutes, 30 minutes, or since you last refreshed the page (labeled "All" for dramatic effect).
• Collapsible: Click the minus button to minimize it when you need to focus on the particle animation instead. Click plus to bring it back.
• Standard Colors: Blue for In, Orange for Out. We follow RFC 3635 (Visual Aesthetics for Network Monitoring), which doesn't exist, but should.
• Transparent Background: The graph floats over the particle network because layering meaningless visualizations is peak homelab culture.

Technical Details:

The graph uses HTML5 Canvas with proper Y-axis scaling and maintains up to 360 data points in memory (1 hour at 10-second intervals). When you exceed that, older data gets discarded because this is a P2P counter, not a time-series database.

No new dependencies. No breaking changes. Just more ways to observe your resource consumption.

[DataDalton]

Unfortunately this is going to overlap too much with other elements upcoming, please ensure it is more self-contained, I would checkout PR #9 (its picture is old so you'll have to see it locally), and add a button using its elements next to it and using a more minimal popup

[owennewo-dev]

I really love this. The latest version just added a terminal window at the bottom, so you would have to reposition the graph. Just an idea... maybe you can put it right under the debug elements. I wonder if it would look good about a quarter of the page's width long, instead of from edge to edge 🤔. It should resize dynamically for different screens. Also please edit index.html and style.css to use CSS variables for all the colors, I like the blue and orange for the stats, but we just added 4 more themes, and would be great if you would choose different colors for each theme so it matches well. Oh and also, I think @lklynet would want it to be an optional feature, enabled with an .env var. I really hope this eventually gets merged!

[lklynet]

I really love this. The latest version just added a terminal window at the bottom, so you would have to reposition the graph. Just an idea... maybe you can put it right under the debug elements. I wonder if it would look good about a quarter of the page's width long, instead of from edge to edge 🤔. It should resize dynamically for different screens. Also please edit index.html and style.css to use CSS variables for all the colors, I like the blue and orange for the stats, but we just added 4 more themes, and would be great if you would choose different colors for each theme so it matches well. Oh and also, I think @lklynet would want it to be an optional feature, enabled with an .env var. I really hope this eventually gets merged!

I think it would also look really good at the bottom of the diagnostics modal too if we want a permanent addition!