Update VPN proxy client behavior

src/web/features/devices/DevicesFeature.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
-import { formatByteString, formatLastSeen } from '../../utils/format.js';
+import {
+  formatByteString,
+  formatLastSeen,
+  trafficBytesPerSecond,
+} from '../../utils/format.js';
 import { TrafficChart } from './TrafficChart.js';
 import {
   parseDeviceSnapshot,
@@ -207,6 +211,18 @@ export function DevicesToggle({ feature, onToggle }: { feature: DevicesFeature;
 
 export function GatewayTrafficSummary({ feature, now }: { feature: DevicesFeature; now: number }) {
   const globalTraffic = feature.snapshot?.traffic;
+  const history = globalTraffic?.history || [];
+  const latest = history.at(-1);
+  const previous = history.at(-2);
+  const hasDirectionalRate = latest && previous
+    && typeof latest.downloadBytes === 'string'
+    && typeof latest.uploadBytes === 'string';
+  const downloadRate = hasDirectionalRate
+    ? trafficBytesPerSecond(latest.downloadBytes, previous.observedAt, latest.observedAt)
+    : null;
+  const uploadRate = hasDirectionalRate
+    ? trafficBytesPerSecond(latest.uploadBytes, previous.observedAt, latest.observedAt)
+    : null;
   const trafficSourceError = feature.snapshot?.source?.traffic?.error
     || feature.snapshot?.source?.traffic?.proxy?.error
     || (feature.status === 'error' ? feature.error : null);
@@ -216,14 +232,21 @@ export function GatewayTrafficSummary({ feature, now }: { feature: DevicesFeatur
 
   return <section className="client-gateway-summary" aria-label="Общий трафик Harbor">
     <div className="client-gateway-traffic-heading">
-      <span>Учтено Harbor</span>
-      <strong>{formatByteString(globalTraffic?.totalBytes || '0')}</strong>
+      <span className="client-gateway-traffic-total">
+        <small>Учтено Harbor</small>
+        <strong>{formatByteString(globalTraffic?.totalBytes || '0')}</strong>
+      </span>
+      <span className="client-gateway-traffic-speed" aria-label="Текущая средняя скорость">
+        <span className="is-download">↓ {downloadRate === null ? '—' : `${formatByteString(downloadRate)}/с`}</span>
+        <span className="is-upload">↑ {uploadRate === null ? '—' : `${formatByteString(uploadRate)}/с`}</span>
+      </span>
     </div>
     <div className="client-gateway-traffic-chart">
       <TrafficChart
-        samples={globalTraffic?.history || []}
+        samples={history}
         capacity={feature.snapshot?.trafficHistoryCapacity || 120}
         routeLabel="Gateway"
+        series="speed"
       />
     </div>
     <div className={`client-gateway-traffic-freshness${trafficSourceError ? ' is-stale' : ''}`} role="status" aria-live="polite">