feat: add device traffic metrics with gateway telemetry reporting and admin UI display

Add rx_bytes and tx_bytes fields to Device type and API responses. Add formatDataSize helper for human-readable byte formatting with units from B to TB. Add Received and Sent columns to devices table in admin UI with formatted traffic totals. Add traffic metrics display to device action panel.

Add TelemetrySnapshot and PeerTelemetry types for gateway runtime stats. Add gateway telemetry endpoint at POST /gateway

admin-web/src/api/client.ts

@@ -17,6 +17,8 @@ export type Device = {
   platform: string;
   status: string;
   assigned_ip?: string;
+  rx_bytes: number;
+  tx_bytes: number;
 };
 
 export type DeviceProfile = {

admin-web/src/features/devices/DevicesPage.tsx

@@ -9,9 +9,28 @@ const columns = [
   { key: "owner", label: "Owner" },
   { key: "platform", label: "Platform" },
   { key: "ip", label: "VPN IP" },
+  { key: "received", label: "Received" },
+  { key: "sent", label: "Sent" },
   { key: "status", label: "Status" }
 ];
 
+function formatDataSize(bytes: number) {
+  if (!bytes) {
+    return "0 MB";
+  }
+
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let value = bytes;
+  let unitIndex = 0;
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+
+  return `${value >= 100 || unitIndex === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[unitIndex]}`;
+}
+
 export function DevicesPage() {
   const queryClient = useQueryClient();
   const query = useQuery({
@@ -38,6 +57,8 @@ export function DevicesPage() {
     owner: device.user_id ?? "assigned user",
     platform: device.platform,
     ip: device.assigned_ip ?? "-",
+    received: formatDataSize(device.rx_bytes ?? 0),
+    sent: formatDataSize(device.tx_bytes ?? 0),
     status: device.status
   })) ?? [];
 
@@ -59,6 +80,8 @@ export function DevicesPage() {
           <div className="card">
             <h4>Device actions</h4>
             <p>Target: {rows[0].name}</p>
+            <p>Total received: {rows[0].received}</p>
+            <p>Total sent: {rows[0].sent}</p>
             <div className="action-row">
               <button className="button" onClick={() => rotateMutation.mutate(rows[0].id)}>Rotate profile</button>
               <button className="ghost-button" onClick={() => revokeMutation.mutate(rows[0].id)}>Revoke device</button>