Track per-device traffic totals and recover inventory state

src/server/index.js

@@ -39,13 +39,18 @@ import {
 import { HarborError, normalizeHarborError } from '../shared/errors.js';
 import { normalizeRouteRules } from '../shared/routingRules.js';
 import { createJsonStore, createStateStore } from './services/stateStore.js';
-import { createDeviceInventoryService, createVendorLookup } from './services/deviceInventoryService.js';
+import {
+  createDeviceInventoryService,
+  createVendorLookup,
+  DEVICE_INVENTORY_SCHEMA_VERSION,
+  migrateDeviceInventoryState,
+} from './services/deviceInventoryService.js';
 import { buildGatewayVersionInfo, buildVersionInfo } from './version.js';
 
 const MAX_BODY_BYTES = 1_000_000;
 const SUBSCRIPTION_REFRESH_INTERVAL_MS = 15 * 60 * 1000;
 const GATEWAY_DISCOVERY_INTERVAL_MS = 5_000;
-const DEVICE_DISCOVERY_INTERVAL_MS = 60_000;
+const DEVICE_DISCOVERY_INTERVAL_MS = 15_000;
 const TERMINAL_SUBSCRIPTION_CODES = new Set([
   'SUBSCRIPTION_EXPIRED',
   'SUBSCRIPTION_DISABLED',
@@ -62,7 +67,17 @@ const subscriptionCacheStore = createJsonStore({
 const deviceStore = createJsonStore({
   filePath: settings.deviceStatePath,
   defaultValue: {},
+  migrate: migrateDeviceInventoryState,
+  initializeMissing: true,
+  backupWhen: () => true,
 });
+deviceStore.read();
+if (deviceStore.migration) {
+  console.log(`[storage] devices migrated to v${DEVICE_INVENTORY_SCHEMA_VERSION}; backup: ${deviceStore.migration.backupPath}`);
+}
+if (deviceStore.recovery) {
+  console.warn(`[storage] corrupt devices recovered; backup: ${deviceStore.recovery.backupPath}`);
+}
 let cacheRecoveryLogged = false;
 
 function readSubscriptionCache() {
@@ -99,6 +114,9 @@ const deviceInventory = settings.appMode === 'gateway'
       observe: remoteDataplane
         ? () => singboxRuntime.observeDevices()
         : () => readNeighborSnapshot(),
+      observeTraffic: remoteDataplane
+        ? () => singboxRuntime.observeTraffic()
+        : null,
       vendor: createVendorLookup(),
     })
   : null;

src/server/services/deviceInventoryService.js

@@ -3,22 +3,40 @@ import fs from 'node:fs';
 import net from 'node:net';
 import { HarborError } from '../../shared/errors.js';
 
-const SCHEMA_VERSION = 1;
+export const DEVICE_INVENTORY_SCHEMA_VERSION = 2;
 const ONLINE_MS = 2 * 60 * 1000;
 const RECENT_MS = 24 * 60 * 60 * 1000;
 const RETENTION_MS = 30 * 24 * 60 * 60 * 1000;
+const COUNTER_PATTERN = /^\d+$/;
+const MAC_PATTERN = /^[0-9a-f]{2}(?::[0-9a-f]{2}){5}$/;
 
 const DEFAULT_STATE = {
-  schemaVersion: SCHEMA_VERSION,
+  schemaVersion: DEVICE_INVENTORY_SCHEMA_VERSION,
   revision: 0,
   lastObservedAt: null,
   lastError: null,
+  traffic: {
+    epoch: null,
+    generation: null,
+    lastObservedAt: null,
+    lastError: null,
+    baselinesByMac: {},
+    totalsByMac: {},
+    rebaselineMacs: [],
+  },
   devices: [],
 };
 
 const normalizeMac = (value) => String(value || '').trim().toLowerCase();
 const deviceId = (mac) => `dev_${crypto.createHash('sha256').update(mac).digest('hex').slice(0, 16)}`;
 const isPrivateMac = (mac) => (Number.parseInt(mac.slice(0, 2), 16) & 2) !== 0;
+const recordEntries = (value) => value && typeof value === 'object' && !Array.isArray(value)
+  ? Object.entries(value)
+  : [];
+const parseStoredCounter = (value) => {
+  const counter = String(value ?? '');
+  return COUNTER_PATTERN.test(counter) ? BigInt(counter).toString() : null;
+};
 
 export function parseOuiVendors(text) {
   const vendors = new Map();
@@ -44,18 +62,77 @@ export function createVendorLookup(filePath = '/usr/share/ieee-data/oui.txt') {
   };
 }
 
-function migrate(value) {
+export function migrateDeviceInventoryState(value) {
   const state = value && typeof value === 'object' && !Array.isArray(value) ? value : {};
   const version = Number.isSafeInteger(state.schemaVersion) ? state.schemaVersion : 0;
-  if (version < 0 || version > SCHEMA_VERSION) {
+  if (version < 0 || version > DEVICE_INVENTORY_SCHEMA_VERSION) {
     throw new Error(`Unsupported device inventory schemaVersion: ${version}`);
   }
+  const traffic = state.traffic && typeof state.traffic === 'object' && !Array.isArray(state.traffic)
+    ? state.traffic
+    : {};
+  const devices = Array.isArray(state.devices) ? state.devices : [];
+  const rebaselineMacs = new Set((Array.isArray(traffic.rebaselineMacs) ? traffic.rebaselineMacs : [])
+    .map(normalizeMac).filter((mac) => MAC_PATTERN.test(mac)));
+  let recoveredTraffic = version >= 2 && (
+    traffic !== state.traffic
+    || !traffic.baselinesByMac || typeof traffic.baselinesByMac !== 'object' || Array.isArray(traffic.baselinesByMac)
+    || !traffic.totalsByMac || typeof traffic.totalsByMac !== 'object' || Array.isArray(traffic.totalsByMac)
+  );
+  if (recoveredTraffic) {
+    for (const device of devices) rebaselineMacs.add(normalizeMac(device.mac));
+  }
+  const baselinesByMac = {};
+  for (const [rawMac, baseline] of recordEntries(traffic.baselinesByMac)) {
+    const mac = normalizeMac(rawMac);
+    const uploadBytes = parseStoredCounter(baseline?.uploadBytes);
+    const downloadBytes = parseStoredCounter(baseline?.downloadBytes);
+    if (!MAC_PATTERN.test(mac) || typeof baseline?.epoch !== 'string' || !baseline.epoch
+      || uploadBytes == null || downloadBytes == null) {
+      if (MAC_PATTERN.test(mac)) rebaselineMacs.add(mac);
+      recoveredTraffic = true;
+      continue;
+    }
+    baselinesByMac[mac] = { epoch: baseline.epoch, uploadBytes, downloadBytes };
+  }
+  const totalsByMac = {};
+  for (const [rawMac, total] of recordEntries(traffic.totalsByMac)) {
+    const mac = normalizeMac(rawMac);
+    const uploadBytes = parseStoredCounter(total?.uploadBytes);
+    const downloadBytes = parseStoredCounter(total?.downloadBytes);
+    if (!MAC_PATTERN.test(mac) || uploadBytes == null || downloadBytes == null) {
+      if (MAC_PATTERN.test(mac)) rebaselineMacs.add(mac);
+      recoveredTraffic = true;
+      continue;
+    }
+    totalsByMac[mac] = {
+      uploadBytes,
+      downloadBytes,
+      observedAt: typeof total?.observedAt === 'string' ? total.observedAt : null,
+    };
+  }
+  for (const mac of new Set([...Object.keys(baselinesByMac), ...Object.keys(totalsByMac)])) {
+    if (!Object.hasOwn(baselinesByMac, mac) || !Object.hasOwn(totalsByMac, mac)) {
+      rebaselineMacs.add(mac);
+      recoveredTraffic = true;
+    }
+  }
   return {
     ...DEFAULT_STATE,
     ...state,
-    schemaVersion: SCHEMA_VERSION,
+    schemaVersion: DEVICE_INVENTORY_SCHEMA_VERSION,
     revision: Number.isSafeInteger(state.revision) ? state.revision : 0,
-    devices: Array.isArray(state.devices) ? state.devices : [],
+    traffic: {
+      ...DEFAULT_STATE.traffic,
+      ...traffic,
+      lastError: recoveredTraffic
+        ? 'Повреждённый traffic checkpoint восстановлен из корректных данных'
+        : traffic.lastError || null,
+      baselinesByMac,
+      totalsByMac,
+      rebaselineMacs: [...rebaselineMacs].filter((mac) => MAC_PATTERN.test(mac)),
+    },
+    devices,
   };
 }
 
@@ -66,17 +143,29 @@ function deviceStatus(lastSeenAt, now) {
   return 'offline';
 }
 
-export function createDeviceInventoryService({ store, observe, vendor = () => null, now = () => new Date() }) {
+export function createDeviceInventoryService({
+  store,
+  observe,
+  observeTraffic = null,
+  vendor = () => null,
+  now = () => new Date(),
+}) {
   let refreshPromise = null;
 
   function snapshot() {
-    const state = migrate(store.read());
+    const state = migrateDeviceInventoryState(store.read());
     const current = now();
     const rank = { online: 0, recent: 1, offline: 2 };
-    const devices = state.devices.map((device) => ({
-      ...device,
-      status: deviceStatus(device.lastSeenAt, current),
-    })).sort((left, right) => (
+    const devices = state.devices.map((device) => {
+      const traffic = state.traffic.totalsByMac[device.mac];
+      return {
+        ...device,
+        status: deviceStatus(device.lastSeenAt, current),
+        uploadBytes: traffic?.uploadBytes || '0',
+        downloadBytes: traffic?.downloadBytes || '0',
+        trafficObservedAt: traffic?.observedAt || null,
+      };
+    }).sort((left, right) => (
       Number(right.pinned) - Number(left.pinned)
       || rank[left.status] - rank[right.status]
       || String(right.lastSeenAt).localeCompare(String(left.lastSeenAt))
@@ -87,18 +176,27 @@ export function createDeviceInventoryService({ store, observe, vendor = () => nu
         kind: 'neighbor',
         lastObservedAt: state.lastObservedAt,
         error: state.lastError,
+        traffic: {
+          lastObservedAt: state.traffic.lastObservedAt,
+          error: state.traffic.lastError,
+        },
       },
       devices,
     };
   }
 
   async function performRefresh() {
-    let result;
-    try {
-      result = await observe();
-    } catch (error) {
-      result = { observedAt: now().toISOString(), observations: [], error: error.message || String(error) };
-    }
+    const [result, trafficResult] = await Promise.all([
+      Promise.resolve().then(() => observe()).catch((error) => ({
+        observedAt: now().toISOString(),
+        observations: [],
+        error: error.message || String(error),
+      })),
+      observeTraffic
+        ? Promise.resolve().then(() => observeTraffic())
+          .catch((error) => ({ transportError: error.message || String(error) }))
+        : null,
+    ]);
     const observedAt = result?.observedAt || now().toISOString();
     const observations = Array.isArray(result?.observations) ? result.observations : [];
     const ipsByMac = new Map();
@@ -109,7 +207,7 @@ export function createDeviceInventoryService({ store, observe, vendor = () => nu
       ipsByMac.get(mac).add(String(observation.ip));
     }
     store.update((stored) => {
-      const state = migrate(stored);
+      const state = migrateDeviceInventoryState(stored);
       const byMac = new Map(state.devices.map((device) => [device.mac, device]));
       for (const observation of observations) {
         const mac = normalizeMac(observation.mac);
@@ -139,11 +237,94 @@ export function createDeviceInventoryService({ store, observe, vendor = () => nu
       const devices = [...byMac.values()].filter((device) => (
         device.pinned || device.alias || new Date(device.lastSeenAt).getTime() >= cutoff
       ));
+      let traffic = state.traffic;
+      if (trafficResult) {
+        if (trafficResult.transportError) {
+          traffic = { ...traffic, lastError: trafficResult.transportError };
+        } else {
+          try {
+            if (typeof trafficResult.epoch !== 'string' || !trafficResult.epoch) {
+              throw new Error('Dataplane не вернул traffic epoch');
+            }
+            const processByMac = new Map();
+            for (const row of Array.isArray(trafficResult.devices) ? trafficResult.devices : []) {
+              const mac = normalizeMac(row?.mac);
+              const upload = String(row?.uploadBytes ?? '');
+              const download = String(row?.downloadBytes ?? '');
+              if (!MAC_PATTERN.test(mac) || !COUNTER_PATTERN.test(upload) || !COUNTER_PATTERN.test(download)) {
+                throw new Error('Dataplane вернул невалидный traffic counter');
+              }
+              const previous = processByMac.get(mac) || { upload: 0n, download: 0n };
+              processByMac.set(mac, {
+                upload: previous.upload + BigInt(upload),
+                download: previous.download + BigInt(download),
+              });
+            }
+            const knownMacs = new Set(devices.map((device) => device.mac));
+            const baselinesByMac = { ...traffic.baselinesByMac };
+            const totalsByMac = { ...traffic.totalsByMac };
+            const rebaselineMacs = new Set(traffic.rebaselineMacs);
+            for (const [mac, processTotal] of processByMac) {
+              if (!knownMacs.has(mac)) continue;
+              const baseline = baselinesByMac[mac];
+              const recovering = rebaselineMacs.has(mac);
+              const sameEpoch = !recovering && baseline?.epoch === trafficResult.epoch;
+              const baselineUpload = sameEpoch ? BigInt(baseline.uploadBytes) : 0n;
+              const baselineDownload = sameEpoch ? BigInt(baseline.downloadBytes) : 0n;
+              if (processTotal.upload < baselineUpload || processTotal.download < baselineDownload) {
+                throw new Error('Dataplane traffic counter уменьшился внутри одного epoch');
+              }
+              const total = totalsByMac[mac] || { uploadBytes: '0', downloadBytes: '0' };
+              totalsByMac[mac] = {
+                uploadBytes: (BigInt(total.uploadBytes)
+                  + (recovering ? 0n : processTotal.upload - baselineUpload)).toString(),
+                downloadBytes: (BigInt(total.downloadBytes)
+                  + (recovering ? 0n : processTotal.download - baselineDownload)).toString(),
+                observedAt: trafficResult.observedAt || traffic.lastObservedAt,
+              };
+              baselinesByMac[mac] = {
+                epoch: trafficResult.epoch,
+                uploadBytes: processTotal.upload.toString(),
+                downloadBytes: processTotal.download.toString(),
+              };
+              rebaselineMacs.delete(mac);
+            }
+            for (const mac of Object.keys(totalsByMac)) {
+              if (!knownMacs.has(mac)) {
+                delete totalsByMac[mac];
+                delete baselinesByMac[mac];
+                rebaselineMacs.delete(mac);
+              }
+            }
+            for (const mac of rebaselineMacs) {
+              if (!knownMacs.has(mac)) {
+                delete totalsByMac[mac];
+                delete baselinesByMac[mac];
+                rebaselineMacs.delete(mac);
+              }
+            }
+            traffic = {
+              ...traffic,
+              epoch: trafficResult.epoch,
+              generation: trafficResult.generation || traffic.generation,
+              lastObservedAt: trafficResult.observedAt || traffic.lastObservedAt,
+              lastError: trafficResult.source?.error
+                || (rebaselineMacs.size ? traffic.lastError : null),
+              baselinesByMac,
+              totalsByMac,
+              rebaselineMacs: [...rebaselineMacs],
+            };
+          } catch (error) {
+            traffic = { ...traffic, lastError: error.message || String(error) };
+          }
+        }
+      }
       return {
         ...state,
         revision: state.revision + 1,
         lastObservedAt: observedAt,
         lastError: result?.error || null,
+        traffic,
         devices,
       };
     });
@@ -172,7 +353,7 @@ export function createDeviceInventoryService({ store, observe, vendor = () => nu
       throw new HarborError('REQUEST_INVALID');
     }
     store.update((stored) => {
-      const state = migrate(stored);
+      const state = migrateDeviceInventoryState(stored);
       if (state.revision !== expectedRevision) throw new HarborError('STATE_CONFLICT');
       const index = state.devices.findIndex((device) => device.id === id);
       if (index < 0) throw new HarborError('DEVICE_NOT_FOUND');

src/server/services/deviceTrafficService.js

@@ -112,12 +112,18 @@ export function createDeviceTrafficService({
   run = spawnSync,
   nextGeneration = () => crypto.randomUUID(),
 }) {
+  const epoch = nextGeneration();
   let activeSlot = null;
   let activeDevices = [];
   let activeSignature = '';
+  let activeCounters = new Map();
+  let pendingRetired = null;
   let refreshPromise = null;
+  const finalized = new Map();
+  const devicesByKey = new Map();
   let current = {
-    generation: nextGeneration(),
+    epoch,
+    generation: epoch,
     observedAt: null,
     source: { error: null },
     devices: [],
@@ -162,21 +168,72 @@ export function createDeviceTrafficService({
     }
   }
 
-  function readCounters(devices) {
-    if (!activeSlot) return [];
+  function readCounters(devices, slot) {
+    if (!slot) return new Map();
     const upload = parseTrafficCounters(
       execute('iptables-save', ['-c', '-t', 'raw']),
-      childChain(uploadChain, activeSlot),
+      childChain(uploadChain, slot),
     );
     const download = parseTrafficCounters(
       execute('iptables-save', ['-c', '-t', 'mangle']),
-      childChain(downloadChain, activeSlot),
+      childChain(downloadChain, slot),
     );
-    return devices.map(({ key, ...device }) => ({
-      ...device,
-      uploadBytes: upload.get(`${key}:upload`) || '0',
-      downloadBytes: download.get(`${key}:download`) || '0',
-    }));
+    const counters = new Map();
+    for (const { key } of devices) {
+      counters.set(`${key}:upload`, upload.get(`${key}:upload`) || '0');
+      counters.set(`${key}:download`, download.get(`${key}:download`) || '0');
+    }
+    return counters;
+  }
+
+  function counter(counters, key, direction) {
+    return BigInt(counters.get(`${key}:${direction}`) || '0');
+  }
+
+  function remember(devices) {
+    for (const device of devices) devicesByKey.set(device.key, device);
+  }
+
+  function finalizeRetired() {
+    if (!pendingRetired) return false;
+    const counters = readCounters(pendingRetired.devices, pendingRetired.slot);
+    for (const { key } of pendingRetired.devices) {
+      const previous = finalized.get(key) || { upload: 0n, download: 0n };
+      finalized.set(key, {
+        upload: previous.upload + counter(counters, key, 'upload'),
+        download: previous.download + counter(counters, key, 'download'),
+      });
+    }
+    pendingRetired = null;
+    return true;
+  }
+
+  function processTotals() {
+    const activeByMac = new Map(activeDevices.map((device) => [device.mac, device]));
+    const totalsByMac = new Map();
+    for (const [key, remembered] of devicesByKey) {
+      const base = finalized.get(key) || { upload: 0n, download: 0n };
+      const pending = pendingRetired?.counters || new Map();
+      const upload = base.upload
+        + counter(pending, key, 'upload')
+        + counter(activeCounters, key, 'upload');
+      const download = base.download
+        + counter(pending, key, 'download')
+        + counter(activeCounters, key, 'download');
+      const previous = totalsByMac.get(remembered.mac) || { upload: 0n, download: 0n };
+      totalsByMac.set(remembered.mac, {
+        ...(activeByMac.get(remembered.mac) || remembered),
+        upload: previous.upload + upload,
+        download: previous.download + download,
+      });
+    }
+    return [...totalsByMac.values()]
+      .map(({ key: _key, upload, download, ...device }) => ({
+        ...device,
+        uploadBytes: upload.toString(),
+        downloadBytes: download.toString(),
+      }))
+      .sort((left, right) => left.mac.localeCompare(right.mac));
   }
 
   async function performRefresh() {
@@ -192,34 +249,51 @@ export function createDeviceTrafficService({
       ? activeDevices
       : selectTrafficDevices(observed?.observations);
     const nextSignature = JSON.stringify(nextDevices);
+    let countersRead = false;
 
-    if (!sourceError && nextSignature !== activeSignature) {
+    if (pendingRetired) {
+      try {
+        countersRead = finalizeRetired() || countersRead;
+      } catch (error) {
+        sourceError = sourceError || error.message || String(error);
+      }
+    }
+
+    if (!pendingRetired && !sourceError && nextSignature !== activeSignature) {
       const nextSlot = activeSlot === 'A' ? 'B' : 'A';
       try {
         prepare(nextSlot, nextDevices);
         switchTo(nextSlot);
+        const retired = activeSlot ? {
+          slot: activeSlot,
+          devices: activeDevices,
+          counters: activeCounters,
+        } : null;
         activeSlot = nextSlot;
         activeDevices = nextDevices;
         activeSignature = nextSignature;
+        activeCounters = new Map();
+        pendingRetired = retired;
+        remember(nextDevices);
         current.generation = nextGeneration();
+        if (pendingRetired) countersRead = finalizeRetired() || countersRead;
       } catch (error) {
         sourceError = error.message || String(error);
       }
     }
 
-    let devices = current.devices;
-    let countersRead = false;
     try {
-      devices = readCounters(activeDevices);
+      activeCounters = readCounters(activeDevices, activeSlot);
       countersRead = true;
     } catch (error) {
       sourceError = sourceError || error.message || String(error);
     }
     current = {
+      epoch,
       generation: current.generation,
       observedAt: countersRead ? observed?.observedAt || current.observedAt : current.observedAt,
       source: { error: sourceError },
-      devices,
+      devices: countersRead ? processTotals() : current.devices,
     };
     return structuredClone(current);
   }

src/shared/versions.js

@@ -1,7 +1,7 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.10.0',
-  gatewayClient: '0.10.0',
-  gatewayBackend: '0.10.0',
+  macClient: '0.11.0',
+  gatewayClient: '0.11.0',
+  gatewayBackend: '0.11.0',
 });
 
 export function parseVersion(value) {

src/web/components/ClientOverviewPage.jsx

@@ -361,12 +361,12 @@ function LocalRulesPanel({
     <aside
       ref={panelRef}
       id="client-local-rules"
-      className={`client-local-rules${open ? ' is-open' : ''}`}
+      className={`client-drawer client-local-rules${open ? ' is-open' : ''}`}
       aria-labelledby="local-rules-title"
       aria-hidden={!open}
       inert={!open ? true : undefined}
     >
-      <div className="client-local-rules-sheet">
+      <div className="client-drawer-sheet client-local-rules-sheet">
         <button
           ref={closeRef}
           className="client-drawer-close"
@@ -1444,12 +1444,12 @@ export function ClientOverviewPage({
       {hasSubscription && subscriptionContentReady && <aside
         ref={instructionsPanelRef}
         id="client-instructions"
-        className={`client-instructions${instructionsOpen ? ' is-open' : ''}`}
+        className={`client-drawer client-instructions${instructionsOpen ? ' is-open' : ''}`}
         aria-labelledby="instructions-title"
         aria-hidden={!instructionsOpen}
         inert={!instructionsOpen ? true : undefined}
       >
-        <div className="client-instructions-sheet">
+        <div className="client-drawer-sheet client-instructions-sheet">
           <button
             ref={instructionsCloseRef}
             className="client-drawer-close"

src/web/components/DevicesPanel.jsx

@@ -1,6 +1,10 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { api } from '../api.js';
-import { formatLastSeen } from '../utils/format.js';
+import {
+  formatByteString,
+  formatLastSeen,
+  sortDevicesByTraffic,
+} from '../utils/format.js';
 
 const STATUS_LABELS = {
   online: 'В сети',
@@ -32,9 +36,13 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const [savingId, setSavingId] = useState('');
   const [refreshing, setRefreshing] = useState(false);
   const [refreshCycle, setRefreshCycle] = useState(0);
+  const [sortDirection, setSortDirection] = useState('desc');
   const deviceNodes = useRef(new Map());
   const previousPositions = useRef(new Map());
-  const devices = snapshot?.devices || [];
+  const devices = useMemo(
+    () => sortDevicesByTraffic(snapshot?.devices, sortDirection),
+    [snapshot?.devices, sortDirection],
+  );
 
   async function load(quiet = false, discover = false) {
     if (!quiet) setStatus(snapshot ? 'refreshing' : 'loading');
@@ -92,12 +100,23 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   async function updateDevice(device, patch) {
     setSavingId(device.id);
     try {
-      const next = await api.devices.update(device.id, patch, snapshot.revision);
+      let next;
+      try {
+        next = await api.devices.update(device.id, patch, snapshot.revision);
+      } catch (requestError) {
+        if (requestError.code !== 'STATE_CONFLICT') throw requestError;
+        const latest = await api.devices.list();
+        setSnapshot((current) => !current || latest.revision >= current.revision ? latest : current);
+        const latestDevice = latest.devices.find((candidate) => candidate.id === device.id);
+        if (!latestDevice || Object.keys(patch).some((key) => latestDevice[key] !== device[key])) {
+          throw requestError;
+        }
+        next = await api.devices.update(device.id, patch, latest.revision);
+      }
       setSnapshot((current) => !current || next.revision >= current.revision ? next : current);
       setError(null);
       return true;
     } catch (requestError) {
-      if (requestError.code === 'STATE_CONFLICT') await load(true);
       setError(requestError);
       return false;
     } finally {
@@ -115,12 +134,12 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     <aside
       ref={panelRef}
       id="client-devices"
-      className={`client-instructions client-devices${open ? ' is-open' : ''}`}
+      className={`client-drawer client-instructions client-devices${open ? ' is-open' : ''}`}
       aria-labelledby="client-devices-title"
       aria-hidden={!open}
       inert={!open ? true : undefined}
     >
-      <div className="client-instructions-sheet client-devices-sheet">
+      <div className="client-drawer-sheet client-instructions-sheet client-devices-sheet">
         <button
           ref={closeRef}
           className="client-drawer-close"
@@ -149,6 +168,18 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
               </button>
               <Tooltip>{refreshing ? 'Обновляем устройства…' : 'Обновить сейчас · автоматически каждые 15 с'}</Tooltip>
             </span>
+            <span className="client-devices-sort-wrap client-tooltip-anchor">
+              <button
+                className="client-devices-sort"
+                type="button"
+                aria-label={`Сортировка по трафику: сначала ${sortDirection === 'desc' ? 'больше' : 'меньше'}. Изменить направление`}
+                onClick={() => setSortDirection((direction) => direction === 'desc' ? 'asc' : 'desc')}
+              >
+                <span>Трафик</span>
+                <span aria-hidden="true">{sortDirection === 'desc' ? '↓' : '↑'}</span>
+              </button>
+              <Tooltip>Сначала {sortDirection === 'desc' ? 'больше' : 'меньше'} трафика</Tooltip>
+            </span>
           </div>
           <h2 id="client-devices-title">Устройства</h2>
           <div className="client-instructions-intro">
@@ -161,6 +192,11 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
             Список временно не обновляется. Показаны последние сохранённые данные.
           </p>
         )}
+        {snapshot?.source?.traffic?.error && (
+          <p className="client-devices-source" role="status">
+            Трафик временно не обновляется. Показаны последние сохранённые значения.
+          </p>
+        )}
         {error && (
           <div className="client-devices-error" role="alert">
             <span>{error.message}</span>
@@ -179,6 +215,8 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
             const saving = savingId === device.id;
             const seen = formatLastSeen(device.lastSeenAt);
             const uncertainIdentity = device.confidence !== 'high';
+            const download = formatByteString(device.downloadBytes);
+            const upload = formatByteString(device.uploadBytes);
             return <article
               ref={(node) => {
                 if (node) deviceNodes.current.set(device.id, node);
@@ -260,7 +298,15 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   </time>
                 </span>
               </div>
-              {device.manufacturer && <p className="client-device-manufacturer">{device.manufacturer}</p>}
+              {(device.manufacturer || device.trafficObservedAt) && <div className="client-device-details">
+                {device.manufacturer && <span className="client-device-manufacturer">{device.manufacturer}</span>}
+                {device.trafficObservedAt && <span
+                  className="client-device-traffic"
+                  aria-label={`Получено ${download}, отдано ${upload}`}
+                >
+                  <span aria-hidden="true">↓ {download} · ↑ {upload}</span>
+                </span>}
+              </div>}
             </article>;
           })}
         </div>

src/web/styles.css

@@ -666,7 +666,7 @@ p {
   position: fixed;
   top: 50%;
   right: max(14px, env(safe-area-inset-right));
-  z-index: 30;
+  z-index: 60;
   display: grid;
   gap: 6px;
   transform: translateY(-50%);
@@ -715,7 +715,7 @@ p {
   transition: opacity 350ms ease, filter 350ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-devices {
+.client-instructions.client-devices {
   width: min(560px, 100vw);
 }
 
@@ -737,6 +737,30 @@ p {
   place-items: center;
 }
 
+.client-devices-sort-wrap {
+  position: relative;
+}
+
+.client-devices-sort {
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  color: var(--client-muted);
+  font: 700 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  cursor: pointer;
+  transition: color 220ms ease, filter 300ms ease;
+}
+
+.client-devices-sort:hover,
+.client-devices-sort:focus-visible {
+  color: var(--client-accent);
+  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 44%, transparent));
+}
+
 .client-devices-refresh {
   position: relative;
   width: 24px;
@@ -807,7 +831,8 @@ p {
   animation: client-spin 900ms linear infinite;
 }
 
-.client-instructions-header .client-devices-refresh-wrap > .client-tooltip {
+.client-instructions-header .client-devices-refresh-wrap > .client-tooltip,
+.client-instructions-header .client-devices-sort-wrap > .client-tooltip {
   text-transform: none;
 }
 
@@ -1075,15 +1100,32 @@ p {
   outline-offset: 3px;
 }
 
-.client-device-manufacturer {
-  overflow: hidden;
-  margin: 0 0 0 76px;
-  color: var(--client-muted);
+.client-device-details {
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 4px 12px;
+  margin-left: 76px;
   font-size: 9px;
+}
+
+.client-device-manufacturer {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--client-muted);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.client-device-traffic {
+  margin-left: auto;
+  color: var(--client-text);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
 .client-device-alias {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 28px 28px;
@@ -1202,34 +1244,38 @@ p {
   visibility: hidden;
 }
 
-.client-local-rules {
+.client-drawer {
   position: fixed;
   inset: 0 0 0 auto;
-  z-index: 20;
-  width: min(480px, 100vw);
+  z-index: 50;
   overflow-y: auto;
   background: color-mix(in oklch, var(--client-bg) 99%, var(--client-panel));
   color: var(--client-text);
+  box-shadow: -26px 0 72px oklch(0.09 0.015 145 / 0.12);
   opacity: 0;
   visibility: hidden;
   transform: translateX(104%);
   transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease, visibility 0s 760ms;
 }
 
-.client-local-rules.is-open {
+.client-drawer.is-open {
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
   transition-delay: 0s;
 }
 
-.client-local-rules-sheet {
+.client-drawer-sheet {
   position: relative;
   min-height: 100%;
   padding: 54px 72px 72px 34px;
   font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
 }
 
+.client-local-rules {
+  width: min(480px, 100vw);
+}
+
 .client-local-rules-header {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -1731,32 +1777,7 @@ p {
 }
 
 .client-instructions {
-  position: fixed;
-  inset: 0 0 0 auto;
-  z-index: 20;
   width: min(470px, 100vw);
-  overflow-y: auto;
-  background: color-mix(in oklch, var(--client-bg) 99%, var(--client-panel));
-  color: var(--client-text);
-  box-shadow: -26px 0 72px oklch(0.09 0.015 145 / 0.12);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateX(104%);
-  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease, visibility 0s 760ms;
-}
-
-.client-instructions.is-open {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(0);
-  transition-delay: 0s;
-}
-
-.client-instructions-sheet {
-  position: relative;
-  min-height: 100%;
-  padding: 54px 72px 72px 34px;
-  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
 }
 
 .client-instructions-header {
@@ -4080,6 +4101,7 @@ p {
   .client-device-edit svg,
   .client-device-edit-wrap,
   .client-devices-refresh,
+  .client-devices-sort,
   .client-devices-refresh-ring circle,
   .client-devices-refresh-icon,
   .client-text-morph-value,

src/web/utils/format.js

@@ -10,6 +10,40 @@ export function formatBytes(value) {
   return `${size.toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
 }
 
+const BYTE_STRING_PATTERN = /^\d+$/;
+
+export function byteString(value) {
+  const normalized = String(value ?? '0');
+  return BYTE_STRING_PATTERN.test(normalized) ? BigInt(normalized) : 0n;
+}
+
+export function formatByteString(value) {
+  const bytes = byteString(value);
+  const units = ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ', 'ПБ', 'ЭБ'];
+  let unit = 0;
+  let divisor = 1n;
+  while (bytes >= divisor * 1024n && unit < units.length - 1) {
+    divisor *= 1024n;
+    unit += 1;
+  }
+  if (unit === 0) return `${bytes} ${units[unit]}`;
+  const tenths = (bytes * 10n + divisor / 2n) / divisor;
+  return `${tenths / 10n},${tenths % 10n} ${units[unit]}`;
+}
+
+export function sortDevicesByTraffic(devices, direction = 'desc') {
+  const factor = direction === 'asc' ? 1 : -1;
+  return (Array.isArray(devices) ? devices : [])
+    .map((device, index) => ({ device, index }))
+    .sort((left, right) => {
+      const leftTotal = byteString(left.device.uploadBytes) + byteString(left.device.downloadBytes);
+      const rightTotal = byteString(right.device.uploadBytes) + byteString(right.device.downloadBytes);
+      if (leftTotal === rightTotal) return left.index - right.index;
+      return (leftTotal < rightTotal ? -1 : 1) * factor;
+    })
+    .map(({ device }) => device);
+}
+
 export function formatRelative(iso) {
   if (!iso) return "";
   const ts = new Date(iso).getTime();