feat: live bandwidth tracking (RX/TX MB/s + avg response size)

- Track data_received / data_sent bytes in live metric aggregation
- Compute bwInMBps, bwOutMBps, avgRespKB per second
- Bandwidth row below stats strip: ↓ RX | ↑ TX | Avg size
- RX colour: green <20 MB/s, yellow 20-50 MB/s, red >50 MB/s
- Warning banner when RX >20 MB/s: bandwidth may cause p99 spikes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/style.css

@@ -307,6 +307,42 @@ textarea { font-family: var(--mono); resize: vertical; }
   letter-spacing: .05em;
 }
 
+/* ── BANDWIDTH ROW ──────────────────────────────────────────────────────────── */
+.bw-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: .8rem 1rem;
+  margin-top: .75rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  flex-wrap: wrap;
+}
+.bw-item { display: flex; align-items: center; gap: .5rem; }
+.bw-label {
+  font-size: .72rem;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--muted);
+}
+.bw-val {
+  font-size: .95rem;
+  font-weight: 700;
+  font-family: var(--mono);
+  transition: color .4s;
+}
+.bw-divider { width: 1px; height: 1.2rem; background: var(--border); flex-shrink: 0; }
+.bw-warning {
+  font-size: .78rem;
+  color: var(--yellow);
+  background: rgba(245,158,11,.08);
+  border: 1px solid rgba(245,158,11,.25);
+  border-radius: 6px;
+  padding: .25rem .65rem;
+  margin-left: auto;
+}
+
 /* ── THRESHOLD BANNER ───────────────────────────────────────────────────────── */
 #threshold-banner {
   border-radius: 8px;