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/app.js

@@ -92,6 +92,7 @@ function updateGauges(m) {
   setStat('sc-p90',  fmtMs(m.p90));
   setStat('sc-p95',  fmtMs(m.p95));
   setStat('sc-p99',  fmtMs(m.p99));
+  updateBandwidth(m);
 
   // colour p95 cell based on threshold (5 s)
   const p95cell = document.getElementById('sc-p95');
@@ -101,6 +102,23 @@ function updateGauges(m) {
   }
 }
 
+function updateBandwidth(m) {
+  const inEl   = document.getElementById('bw-in');
+  const outEl  = document.getElementById('bw-out');
+  const sizeEl = document.getElementById('bw-size');
+  const warn   = document.getElementById('bw-warning');
+  if (!inEl) return;
+
+  inEl.textContent  = m.bwInMBps  + ' MB/s';
+  outEl.textContent = m.bwOutMBps + ' MB/s';
+  sizeEl.textContent = m.avgRespKB + ' KB';
+
+  // Flag if inbound bandwidth looks high (>20 MB/s = ~160 Mbps — notable)
+  const high = m.bwInMBps > 20;
+  inEl.style.color  = m.bwInMBps  > 50 ? 'var(--red)' : m.bwInMBps > 20 ? 'var(--yellow)' : 'var(--green)';
+  warn.style.display = high ? '' : 'none';
+}
+
 function resetGauges() {
   ['gauge-score','gauge-checks','gauge-http'].forEach(id => {
     const el = document.getElementById(id);
@@ -114,6 +132,14 @@ function resetGauges() {
   ['sc-reqs','sc-rps','sc-avg','sc-p90','sc-p95','sc-p99'].forEach(id => setStat(id, '--'));
   const tb = document.getElementById('threshold-banner');
   if (tb) { tb.style.display = 'none'; tb.innerHTML = ''; }
+  const bwIn = document.getElementById('bw-in');
+  if (bwIn) { bwIn.textContent = '-- MB/s'; bwIn.style.color = ''; }
+  const bwOut = document.getElementById('bw-out');
+  if (bwOut) bwOut.textContent = '-- MB/s';
+  const bwSize = document.getElementById('bw-size');
+  if (bwSize) bwSize.textContent = '-- KB';
+  const bwWarn = document.getElementById('bw-warning');
+  if (bwWarn) bwWarn.style.display = 'none';
 }
 
 function renderThresholds(summary) {

frontend/index.html

@@ -176,6 +176,27 @@
             </div>
           </div>
 
+          <!-- Bandwidth row -->
+          <div class="bw-row" id="bw-row">
+            <div class="bw-item">
+              <span class="bw-label">&#x2193; RX</span>
+              <span class="bw-val" id="bw-in">-- MB/s</span>
+            </div>
+            <div class="bw-divider"></div>
+            <div class="bw-item">
+              <span class="bw-label">&#x2191; TX</span>
+              <span class="bw-val" id="bw-out">-- MB/s</span>
+            </div>
+            <div class="bw-divider"></div>
+            <div class="bw-item">
+              <span class="bw-label">Avg size</span>
+              <span class="bw-val" id="bw-size">-- KB</span>
+            </div>
+            <div id="bw-warning" class="bw-warning" style="display:none">
+              &#9888; High bandwidth — may be causing p99 spikes
+            </div>
+          </div>
+
           <!-- Threshold results -->
           <div id="threshold-banner" style="display:none"></div>
         </div>

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;