feat(monitoring): add throughput metrics and expose them in ops UI

ts_web/elements/ops-view-overview.ts

@@ -126,12 +126,26 @@ export class OpsViewOverview extends DeesElement {
     const units = ['B', 'KB', 'MB', 'GB', 'TB'];
     let size = bytes;
     let unitIndex = 0;
-    
+
     while (size >= 1024 && unitIndex < units.length - 1) {
       size /= 1024;
       unitIndex++;
     }
-    
+
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+  }
+
+  private formatBitsPerSecond(bytesPerSecond: number): string {
+    const bitsPerSecond = bytesPerSecond * 8;
+    const units = ['bit/s', 'kbit/s', 'Mbit/s', 'Gbit/s'];
+    let size = bitsPerSecond;
+    let unitIndex = 0;
+
+    while (size >= 1000 && unitIndex < units.length - 1) {
+      size /= 1000;
+      unitIndex++;
+    }
+
     return `${size.toFixed(1)} ${units[unitIndex]}`;
   }
 
@@ -162,6 +176,24 @@ export class OpsViewOverview extends DeesElement {
         color: '#3b82f6',
         description: `Total: ${this.statsState.serverStats.totalConnections}`,
       },
+      {
+        id: 'throughputIn',
+        title: 'Throughput In',
+        value: this.formatBitsPerSecond(this.statsState.serverStats.throughput?.bytesInPerSecond || 0),
+        type: 'text',
+        icon: 'download',
+        color: '#22c55e',
+        description: `Total: ${this.formatBytes(this.statsState.serverStats.throughput?.bytesIn || 0)}`,
+      },
+      {
+        id: 'throughputOut',
+        title: 'Throughput Out',
+        value: this.formatBitsPerSecond(this.statsState.serverStats.throughput?.bytesOutPerSecond || 0),
+        type: 'text',
+        icon: 'upload',
+        color: '#8b5cf6',
+        description: `Total: ${this.formatBytes(this.statsState.serverStats.throughput?.bytesOut || 0)}`,
+      },
       {
         id: 'cpu',
         title: 'CPU Usage',