Refactor VPN proxy client implementation

src/web/features/devices/DevicesFeature.tsx

@@ -0,0 +1,235 @@
+import { useEffect, useRef, useState } from 'react';
+import { formatByteString, formatLastSeen } from '../../utils/format.js';
+import { TrafficChart } from './TrafficChart.js';
+import {
+  parseDeviceSnapshot,
+  type Device,
+  type DevicePolicy,
+  type DeviceSnapshot,
+} from './deviceSnapshot.js';
+
+const DEVICE_AUTO_REFRESH_MS = 15_000;
+
+interface DevicesFeatureOptions {
+  isGateway: boolean;
+  listDevices: () => Promise<unknown>;
+  refreshDevices: () => Promise<unknown>;
+  updateDevice: (id: string, patch: Record<string, unknown>, expectedRevision: number) => Promise<unknown>;
+  setDevicePolicy: (id: string, mode: DevicePolicy, expectedRevision: number) => Promise<unknown>;
+}
+
+interface RequestError {
+  code?: string;
+}
+
+function record(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function requestError(value: unknown): RequestError {
+  if (!record(value)) return {};
+  return { code: typeof value.code === 'string' ? value.code : undefined };
+}
+
+export function useDevicesFeature({
+  isGateway,
+  listDevices,
+  refreshDevices,
+  updateDevice: requestDeviceUpdate,
+  setDevicePolicy,
+}: DevicesFeatureOptions) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [snapshot, setSnapshot] = useState<DeviceSnapshot | null>(null);
+  const [status, setStatus] = useState<'idle' | 'loading' | 'refreshing' | 'ready' | 'error'>('idle');
+  const [error, setError] = useState<unknown>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [refreshCycle, setRefreshCycle] = useState(0);
+  const [savingId, setSavingId] = useState('');
+  const panelRef = useRef<HTMLElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  function publish(value: unknown) {
+    const next = parseDeviceSnapshot(value);
+    setSnapshot((current) => !current || next.revision > current.revision ? next : current);
+    return next;
+  }
+
+  async function load(quiet = false, discover = false) {
+    if (!isGateway) return;
+    if (!quiet) setStatus(snapshot ? 'refreshing' : 'loading');
+    setRefreshing(true);
+    try {
+      publish(await (discover ? refreshDevices() : listDevices()));
+      setError(null);
+      setStatus('ready');
+    } catch (requestError) {
+      setError(requestError);
+      setStatus('error');
+    } finally {
+      setRefreshing(false);
+      setRefreshCycle((cycle) => cycle + 1);
+    }
+  }
+
+  async function updateDevice(device: Device, patch: Record<string, unknown>) {
+    if (!snapshot) return false;
+    setSavingId(device.id);
+    try {
+      let next: DeviceSnapshot;
+      try {
+        next = parseDeviceSnapshot(await requestDeviceUpdate(device.id, patch, snapshot.revision));
+      } catch (caught) {
+        if (requestError(caught).code !== 'STATE_CONFLICT') throw caught;
+        const latest = parseDeviceSnapshot(await listDevices());
+        publish(latest);
+        const latestDevice = latest.devices.find((candidate) => candidate.id === device.id);
+        if (!latestDevice || Object.keys(patch).some((key) => latestDevice[key] !== device[key])) {
+          throw caught;
+        }
+        next = parseDeviceSnapshot(await requestDeviceUpdate(device.id, patch, latest.revision));
+      }
+      publish(next);
+      setError(null);
+      return true;
+    } catch (caught) {
+      setError(caught);
+      return false;
+    } finally {
+      setSavingId('');
+    }
+  }
+
+  async function updatePolicy(device: Device, mode: DevicePolicy) {
+    if (!snapshot) return;
+    setSavingId(device.id);
+    try {
+      let next: DeviceSnapshot;
+      try {
+        next = parseDeviceSnapshot(await setDevicePolicy(device.id, mode, snapshot.revision));
+      } catch (caught) {
+        if (requestError(caught).code !== 'STATE_CONFLICT') throw caught;
+        const latest = parseDeviceSnapshot(await listDevices());
+        publish(latest);
+        const latestDevice = latest.devices.find((candidate) => candidate.id === device.id);
+        if (!latestDevice || latestDevice.desiredPolicy !== device.desiredPolicy) throw caught;
+        next = parseDeviceSnapshot(await setDevicePolicy(device.id, mode, latest.revision));
+      }
+      publish(next);
+      setError(null);
+    } catch (caught) {
+      if (requestError(caught).code === 'DEVICE_POLICY_APPLY_FAILED') {
+        try {
+          publish(parseDeviceSnapshot(await listDevices()));
+        } catch {
+          // Keep the policy error as the actionable result.
+        }
+      }
+      setError(caught);
+    } finally {
+      setSavingId('');
+    }
+  }
+
+  useEffect(() => {
+    if (!isGateway) return undefined;
+    load();
+    return undefined;
+  }, [isGateway]);
+
+  useEffect(() => {
+    if (!isGateway || refreshing || status === 'loading') return undefined;
+    const timer = setTimeout(() => load(true), DEVICE_AUTO_REFRESH_MS);
+    return () => clearTimeout(timer);
+  }, [isGateway, refreshCycle, refreshing, status]);
+
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const frame = requestAnimationFrame(() => closeRef.current?.focus());
+    const closeDevices = (event: PointerEvent | KeyboardEvent) => {
+      if (event.type === 'keydown' && (event as KeyboardEvent).key !== 'Escape') return;
+      if (event.type !== 'keydown' && (
+        panelRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)
+      )) return;
+      setIsOpen(false);
+    };
+    document.addEventListener('pointerdown', closeDevices);
+    document.addEventListener('keydown', closeDevices);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener('pointerdown', closeDevices);
+      document.removeEventListener('keydown', closeDevices);
+      requestAnimationFrame(() => {
+        if (panelRef.current?.contains(document.activeElement)) toggleRef.current?.focus();
+      });
+    };
+  }, [isOpen]);
+
+  return {
+    isOpen,
+    snapshot,
+    status,
+    error,
+    refreshing,
+    refreshCycle,
+    savingId,
+    panelRef,
+    toggleRef,
+    closeRef,
+    load,
+    updateDevice,
+    updatePolicy,
+    close: () => setIsOpen(false),
+    toggle: () => setIsOpen((open) => !open),
+  };
+}
+
+export type DevicesFeature = ReturnType<typeof useDevicesFeature>;
+
+export function DevicesToggle({ feature, onToggle }: { feature: DevicesFeature; onToggle: () => void }) {
+  return <button
+    ref={feature.toggleRef}
+    className={`client-instructions-toggle client-devices-toggle${feature.isOpen ? ' is-open' : ''}`}
+    type="button"
+    aria-expanded={feature.isOpen}
+    aria-controls="client-devices"
+    aria-label={feature.isOpen ? 'Закрыть устройства' : 'Устройства Gateway'}
+    onClick={onToggle}
+  >
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <rect className="client-rail-device-primary" x="3.5" y="5" width="7" height="10" rx="1.5" />
+      <rect className="client-rail-device-secondary" x="13.5" y="8" width="7" height="7" rx="1.5" />
+      <path className="client-rail-device-link" d="M6 19h12M7 15v4M17 15v4" />
+    </svg>
+    <span>Устройства</span>
+  </button>;
+}
+
+export function GatewayTrafficSummary({ feature, now }: { feature: DevicesFeature; now: number }) {
+  const globalTraffic = feature.snapshot?.traffic;
+  const trafficSourceError = feature.snapshot?.source?.traffic?.error
+    || feature.snapshot?.source?.traffic?.proxy?.error
+    || (feature.status === 'error' ? feature.error : null);
+  const trafficFreshness = globalTraffic?.observedAt
+    ? formatLastSeen(globalTraffic.observedAt, new Date(now)).relative
+    : 'Нет данных';
+
+  return <section className="client-gateway-summary" aria-label="Общий трафик Harbor">
+    <div className="client-gateway-traffic-heading">
+      <span>Учтено Harbor</span>
+      <strong>{formatByteString(globalTraffic?.totalBytes || '0')}</strong>
+    </div>
+    <div className="client-gateway-traffic-chart">
+      <TrafficChart
+        samples={globalTraffic?.history || []}
+        capacity={feature.snapshot?.trafficHistoryCapacity || 120}
+        routeLabel="Gateway"
+      />
+    </div>
+    <div className={`client-gateway-traffic-freshness${trafficSourceError ? ' is-stale' : ''}`} role="status" aria-live="polite">
+      {trafficSourceError
+        ? `Трафик не обновляется · последние данные ${trafficFreshness}`
+        : globalTraffic?.observedAt ? `Обновлено ${trafficFreshness}` : 'Ожидаем первые данные трафика'}
+    </div>
+  </section>;
+}

src/web/features/devices/DevicesPanel.tsx

@@ -0,0 +1,477 @@
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { copyText } from '../../utils/clientControls.js';
+import {
+  byteString,
+  formatByteString,
+  formatLastSeen,
+  positiveByteDelta,
+  stabilizeDevicesByTraffic,
+} from '../../utils/format.js';
+import { TrafficChart } from './TrafficChart.js';
+import { type Device } from './deviceSnapshot.js';
+import type { DevicesFeature } from './DevicesFeature.js';
+
+const DEVICE_MOVE_MS = 520;
+const COPY_FEEDBACK_MS = 800;
+const TRAFFIC_DELTA_MS = 2_200;
+
+interface TrafficDelta {
+  gateway?: string;
+  proxy?: string;
+  total?: string;
+}
+
+function requestMessage(value: unknown) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined;
+  const message: unknown = Reflect.get(value, 'message');
+  return typeof message === 'string' ? message : undefined;
+}
+
+function Tooltip({ children }: { children: ReactNode }) {
+  return <span className="client-tooltip" role="tooltip">{children}</span>;
+}
+
+function TextMorph({ from, to }: { from: string; to: string }) {
+  const anchor = from.length >= to.length ? from : to;
+  return <span className="client-text-morph" aria-hidden="true">
+    <span className="client-text-morph-anchor">{anchor}</span>
+    <span className="client-text-morph-value is-date">{from}</span>
+    <span className="client-text-morph-value is-relative">{to}</span>
+  </span>;
+}
+
+function TrafficValue({ value, delta }: { value: string; delta?: string }) {
+  return <strong className={`client-device-traffic-value${delta ? ' has-delta' : ''}`}>
+    <span className="is-total">{value}</span>
+    <span className="is-delta">{delta ? `+${delta}` : ''}</span>
+  </strong>;
+}
+
+export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
+  const {
+    isOpen: open,
+    panelRef,
+    closeRef,
+    snapshot,
+    status,
+    error,
+    refreshing,
+    refreshCycle,
+    savingId,
+    load: onLoad,
+    updateDevice,
+    updatePolicy,
+    close: onClose,
+  } = feature;
+  const [editingId, setEditingId] = useState('');
+  const [alias, setAlias] = useState('');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [trafficScale, setTrafficScale] = useState<'linear' | 'log'>('linear');
+  const [copyFeedback, setCopyFeedback] = useState<{ id: string; failed: boolean } | null>(null);
+  const [pencilAnimationId, setPencilAnimationId] = useState('');
+  const [trafficDeltas, setTrafficDeltas] = useState<Record<string, TrafficDelta>>({});
+  const deviceNodes = useRef(new Map<string, HTMLElement>());
+  const previousPositions = useRef(new Map<string, DOMRect>());
+  const previousOrder = useRef<string[]>([]);
+  const previousScrollTop = useRef(0);
+  const movementAnimations = useRef(new Map<string, Animation>());
+  const previousTraffic = useRef(new Map<string, { gateway: bigint; proxy: bigint }>());
+  const aliasBaseline = useRef({ id: '', value: '' });
+  const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const trafficDeltaTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const trafficOrder = useRef<{ direction: 'asc' | 'desc'; ids: string[] }>({ direction: sortDirection, ids: [] });
+  const devices = useMemo(
+    () => {
+      const previousIds = trafficOrder.current.direction === sortDirection
+        ? trafficOrder.current.ids
+        : [];
+      const result = stabilizeDevicesByTraffic(snapshot?.devices, sortDirection, previousIds) as {
+        ids: string[];
+        devices: Device[];
+      };
+      trafficOrder.current = { direction: sortDirection, ids: result.ids };
+      return result.devices;
+    },
+    [snapshot?.devices, sortDirection],
+  );
+
+  useEffect(() => () => {
+    if (copyTimer.current) clearTimeout(copyTimer.current);
+    if (trafficDeltaTimer.current) clearTimeout(trafficDeltaTimer.current);
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      previousTraffic.current.clear();
+      if (trafficDeltaTimer.current) clearTimeout(trafficDeltaTimer.current);
+      setTrafficDeltas({});
+      return;
+    }
+
+    const next = new Map<string, { gateway: bigint; proxy: bigint }>();
+    const deltas: Record<string, TrafficDelta> = {};
+    for (const device of snapshot?.devices || []) {
+      const gateway = byteString(device.downloadBytes) + byteString(device.uploadBytes);
+      const proxy = byteString(device.proxyDownloadBytes) + byteString(device.proxyUploadBytes);
+      const previous = previousTraffic.current.get(device.id);
+      next.set(device.id, { gateway, proxy });
+      if (!previous) continue;
+      const gatewayDelta = positiveByteDelta(previous.gateway, gateway);
+      const proxyDelta = positiveByteDelta(previous.proxy, proxy);
+      if (!gatewayDelta && !proxyDelta) continue;
+      const totalDelta = positiveByteDelta(previous.gateway + previous.proxy, gateway + proxy);
+      deltas[device.id] = { gateway: gatewayDelta, proxy: proxyDelta, total: totalDelta };
+    }
+    previousTraffic.current = next;
+    if (!Object.keys(deltas).length) return;
+    setTrafficDeltas(deltas);
+    if (trafficDeltaTimer.current) clearTimeout(trafficDeltaTimer.current);
+    trafficDeltaTimer.current = setTimeout(() => setTrafficDeltas({}), TRAFFIC_DELTA_MS);
+  }, [snapshot?.devices, open]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      previousPositions.current.clear();
+      previousOrder.current = [];
+      previousScrollTop.current = 0;
+      for (const animation of movementAnimations.current.values()) animation.cancel();
+      movementAnimations.current.clear();
+      return;
+    }
+    const positions = new Map<string, DOMRect>();
+    for (const [id, node] of deviceNodes.current) {
+      movementAnimations.current.get(id)?.cancel();
+      positions.set(id, node.getBoundingClientRect());
+    }
+    const order = devices.map(({ id }) => id);
+    const orderChanged = previousOrder.current.length > 0
+      && (order.length !== previousOrder.current.length
+        || order.some((id, index) => id !== previousOrder.current[index]));
+    const currentScrollTop = panelRef.current?.scrollTop || 0;
+    if (orderChanged && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      for (const [id, after] of positions) {
+        const before = previousPositions.current.get(id);
+        const deltaY = before
+          ? before.top - after.top + previousScrollTop.current - currentScrollTop
+          : 0;
+        if (Math.abs(deltaY) < 1) continue;
+        const animation = deviceNodes.current.get(id)?.animate([
+          { transform: `translateY(${deltaY}px)` },
+          { transform: 'translateY(0)' },
+        ], { duration: DEVICE_MOVE_MS, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' });
+        if (animation) {
+          movementAnimations.current.set(id, animation);
+          animation.onfinish = () => movementAnimations.current.delete(id);
+        }
+      }
+    }
+    previousPositions.current = positions;
+    previousOrder.current = order;
+    previousScrollTop.current = currentScrollTop;
+  }, [devices, open, panelRef]);
+
+  async function saveAlias(device: Device) {
+    const nextAlias = alias.trim();
+    if (aliasBaseline.current.id === device.id && nextAlias === aliasBaseline.current.value.trim()) {
+      setEditingId((current) => current === device.id ? '' : current);
+      return;
+    }
+    if (!await updateDevice(device, { alias: nextAlias })) return;
+    setEditingId((current) => current === device.id ? '' : current);
+  }
+
+  async function copyDeviceIp(device: Device) {
+    if (!device.ip) return;
+    if (copyTimer.current) clearTimeout(copyTimer.current);
+    try {
+      await copyText(device.ip);
+      setCopyFeedback({ id: device.id, failed: false });
+    } catch {
+      setCopyFeedback({ id: device.id, failed: true });
+    }
+    copyTimer.current = setTimeout(() => setCopyFeedback(null), COPY_FEEDBACK_MS);
+  }
+
+  function startEditing(device: Device) {
+    const value = device.alias || device.hostname || '';
+    aliasBaseline.current = { id: device.id, value };
+    setEditingId(device.id);
+    setAlias(value);
+  }
+
+  return (
+    <aside
+      ref={panelRef}
+      id="client-devices"
+      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-drawer-sheet client-instructions-sheet client-devices-sheet">
+        <button
+          ref={closeRef}
+          className="client-drawer-close"
+          type="button"
+          aria-label="Закрыть устройства"
+          onClick={onClose}
+        >×</button>
+        <header className="client-instructions-header client-devices-header">
+          <div className="client-devices-kicker">
+            <span>Gateway · {devices.length}</span>
+            <span className="client-devices-refresh-wrap client-tooltip-anchor">
+              <button
+                className={`client-devices-refresh${refreshing ? ' is-refreshing' : ''}`}
+                type="button"
+                aria-label={refreshing ? 'Обновляем устройства' : 'Обновить устройства сейчас'}
+                aria-busy={refreshing}
+                disabled={refreshing}
+                onClick={() => onLoad(true, true)}
+              >
+                <svg key={refreshCycle} className="client-devices-refresh-ring" viewBox="0 0 24 24" aria-hidden="true">
+                  <circle cx="12" cy="12" r="10" pathLength="1" />
+                </svg>
+                <svg className="client-devices-refresh-icon" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M20 11a8 8 0 1 0-2.3 6.7M20 5v6h-6" />
+                </svg>
+              </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 className="client-devices-sort-icon" aria-hidden="true">
+                  {sortDirection === 'desc' ? '↓' : '↑'}
+                </span>
+              </button>
+              <Tooltip>Сначала {sortDirection === 'desc' ? 'больше' : 'меньше'} трафика</Tooltip>
+            </span>
+            <span className="client-devices-scale" role="group" aria-label="Масштаб графика трафика">
+              <button type="button" aria-pressed={trafficScale === 'linear'} onClick={() => setTrafficScale('linear')}>Лин</button>
+              <button type="button" aria-pressed={trafficScale === 'log'} onClick={() => setTrafficScale('log')}>Лог</button>
+            </span>
+          </div>
+          <h2 id="client-devices-title">Устройства</h2>
+          <div className="client-instructions-intro">
+            <p>Устройства, которые Gateway видит в локальной таблице соседей.</p>
+            <p>Учитывается только трафик, который прошёл через Harbor.</p>
+          </div>
+        </header>
+
+        {Boolean(snapshot?.source?.error) && (
+          <p className="client-devices-source" role="status">
+            Список временно не обновляется. Показаны последние сохранённые данные.
+          </p>
+        )}
+        {Boolean(snapshot?.source?.traffic?.error) && (
+          <p className="client-devices-source" role="status">
+            Трафик временно не обновляется. Показаны последние сохранённые значения.
+          </p>
+        )}
+        {Boolean(snapshot?.source?.traffic?.proxy?.error) && (
+          <p className="client-devices-source" role="status">
+            Прокси-трафик временно не обновляется. Показаны последние сохранённые значения.
+          </p>
+        )}
+        {Boolean(snapshot?.source?.policy?.error) && (
+          <p className="client-devices-source" role="status">
+            Маршруты устройств временно не обновляются. Показано последнее подтверждённое состояние.
+          </p>
+        )}
+        {Boolean(error) && (
+          <div className="client-devices-error" role="alert">
+            <span>{requestMessage(error)}</span>
+            <button type="button" onClick={() => onLoad()}>Повторить</button>
+          </div>
+        )}
+        {status === 'loading' && <p className="client-devices-empty" role="status">Ищем устройства…</p>}
+        {status !== 'loading' && !devices.length && !error && (
+          <p className="client-devices-empty">Gateway пока не видит устройств.</p>
+        )}
+
+        <div className="client-live-region" role="status" aria-live="polite" aria-atomic="true">
+          {copyFeedback ? copyFeedback.failed ? 'Не удалось скопировать IP' : 'IP скопирован' : ''}
+        </div>
+        <div className="client-devices-list" aria-live="polite" aria-busy={status === 'loading' || status === 'refreshing'}>
+          {devices.map((device) => {
+            const hasName = Boolean(device.alias || device.hostname);
+            const title = device.alias || device.hostname || device.ip || 'Неизвестное устройство';
+            const editing = editingId === device.id;
+            const saving = savingId === device.id;
+            const seen = formatLastSeen(device.lastSeenAt);
+            const online = device.status === 'online';
+            const gatewayTotal = byteString(device.downloadBytes) + byteString(device.uploadBytes);
+            const proxyTotal = byteString(device.proxyDownloadBytes) + byteString(device.proxyUploadBytes);
+            const gatewayTraffic = formatByteString(gatewayTotal.toString());
+            const proxyTraffic = formatByteString(proxyTotal.toString());
+            const totalTraffic = formatByteString((gatewayTotal + proxyTotal).toString());
+            const hasProxyTraffic = proxyTotal > 0n;
+            const trafficDelta = trafficDeltas[device.id] || {};
+            const copied = copyFeedback?.id === device.id;
+            const policyBusy = device.policyStatus === 'applying';
+            const policyFailed = device.policyStatus === 'failed';
+            const policyPending = device.policyStatus === 'pending';
+            const displayPolicy = device.appliedPolicy;
+            const policyTarget = device.policyStatus === 'applied'
+              ? device.appliedPolicy === 'direct' ? 'vpn' : 'direct'
+              : device.appliedPolicy;
+            const cannotEnableDirect = device.policyStatus === 'applied'
+              && device.appliedPolicy !== 'direct'
+              && device.confidence === 'ambiguous';
+            const policyTooltip = policyBusy
+              ? `Применяем: ${device.desiredPolicy === 'direct' ? 'полностью напрямую' : 'через правила Gateway'}`
+              : policyFailed
+                ? `${device.policyError || 'Маршрут не применён'}. Сейчас: ${device.appliedPolicy === 'direct' ? 'напрямую' : 'через Gateway'}. Нажмите, чтобы оставить текущий маршрут`
+                : policyPending
+                  ? 'Gateway должен однозначно распознать устройство. Нажмите, чтобы отменить ожидание'
+                  : device.confidence === 'ambiguous' && device.desiredPolicy !== 'direct'
+                      ? 'Маршрут недоступен, пока Gateway видит несколько сетевых адресов одного устройства'
+                      : displayPolicy === 'direct'
+                        ? 'Полностью обходит sing-box. Нажмите, чтобы вернуть обработку Gateway'
+                        : 'Проходит через sing-box и правила Gateway. Нажмите, чтобы пустить полностью напрямую';
+            return <article
+              ref={(node) => {
+                if (node) deviceNodes.current.set(device.id, node);
+                else deviceNodes.current.delete(device.id);
+              }}
+              className={`client-device is-${device.status}${device.pinned ? ' is-pinned' : ''}`}
+              key={device.id}
+            >
+              <span className="client-device-pin-wrap client-tooltip-anchor">
+                <button
+                  className="client-device-pin"
+                  type="button"
+                  aria-pressed={device.pinned}
+                  aria-label={device.pinned ? `Открепить ${title}` : `Закрепить ${title}`}
+                  disabled={saving}
+                  onClick={() => updateDevice(device, { pinned: !device.pinned })}
+                >
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M9 3h6l-1 5 3 3v2H7v-2l3-3-1-5ZM12 13v8" />
+                  </svg>
+                </button>
+                <Tooltip>{device.pinned ? 'Открепить' : 'Закрепить'}</Tooltip>
+              </span>
+
+              <div className="client-device-main">
+                <h3 className={`client-device-name-heading${hasName ? '' : ' is-address-only'}${editing ? ' is-editing' : ''}`}>
+                  {editing ? (
+                    <input
+                      className="client-device-alias-input"
+                      value={alias}
+                      style={{ '--alias-width': `${Math.max(1, alias.length)}ch` } as CSSProperties}
+                      maxLength={64}
+                      autoFocus
+                      aria-label="Название устройства"
+                      aria-busy={saving}
+                      disabled={saving}
+                      onChange={(event) => setAlias(event.target.value)}
+                      onBlur={() => saveAlias(device)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter') event.currentTarget.blur();
+                      }}
+                    />
+                  ) : hasName && <button
+                    className="client-device-alias-trigger"
+                    type="button"
+                    aria-label={`Изменить название ${title}`}
+                    onClick={() => startEditing(device)}
+                  >{title}</button>}
+                  {(hasName || (editing && Boolean(alias))) && device.ip && <span className="client-device-name-separator" aria-hidden="true">·</span>}
+                  {device.ip ? <button
+                    className={`client-device-ip${copied ? copyFeedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
+                    type="button"
+                    aria-label={`Скопировать IP ${device.ip} устройства ${title}`}
+                    onClick={() => copyDeviceIp(device)}
+                  >{device.ip}</button> : !hasName && !editing && <span>Неизвестное устройство</span>}
+                </h3>
+                {!hasName && !editing && <span className="client-device-edit-wrap client-tooltip-anchor">
+                  <button
+                    className={`client-device-edit${pencilAnimationId === device.id ? ' is-writing' : ''}`}
+                    type="button"
+                    aria-label={`Изменить название ${title}`}
+                    onPointerEnter={() => setPencilAnimationId(device.id)}
+                    onFocus={() => setPencilAnimationId(device.id)}
+                    onClick={() => startEditing(device)}
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                      onAnimationEnd={() => setPencilAnimationId((id) => id === device.id ? '' : id)}
+                    >
+                      <path d="m4 20 4.2-1 10.3-10.3a2 2 0 0 0-2.8-2.8L5.4 16.2 4 20ZM14.5 7.1l2.8 2.8" />
+                    </svg>
+                  </button>
+                  <Tooltip>Изменить название</Tooltip>
+                </span>}
+                <span className={`client-device-last-seen${online ? ' is-online' : ''}`} tabIndex={0}>
+                  <time
+                    dateTime={device.lastSeenAt || undefined}
+                    aria-label={`${online ? 'В сети' : 'Не в сети'}. Последний контакт: ${seen.tooltip}`}
+                  >
+                    {online ? 'В сети' : <TextMorph from="Не в сети" to={seen.relative} />}
+                  </time>
+                </span>
+              </div>
+
+              <span
+                className="client-device-traffic"
+                role="group"
+                tabIndex={0}
+                aria-label={`Всего ${totalTraffic}. Gateway ${gatewayTraffic}${hasProxyTraffic ? `, Прокси ${proxyTraffic}` : ''}`}
+              >
+                <span className="client-device-traffic-total" aria-hidden="true">
+                  <b>Всего</b><TrafficValue value={totalTraffic} delta={trafficDelta.total} />
+                </span>
+                <span className="client-device-traffic-breakdown" aria-hidden="true">
+                  <span><b>Gateway</b><TrafficValue value={gatewayTraffic} delta={trafficDelta.gateway} /></span>
+                  {hasProxyTraffic && <span className="is-proxy"><b>Прокси</b><TrafficValue value={proxyTraffic} delta={trafficDelta.proxy} /></span>}
+                </span>
+              </span>
+
+              <span className="client-device-policy-wrap client-tooltip-anchor">
+                <button
+                  className={`client-device-policy is-${displayPolicy}${policyFailed ? ' is-failed' : ''}${policyPending ? ' is-pending' : ''}`}
+                  type="button"
+                  aria-label={`Маршрут устройства: ${displayPolicy === 'direct' ? 'полностью напрямую' : 'через правила Gateway'}. ${policyTooltip}`}
+                  aria-pressed={displayPolicy === 'direct'}
+                  aria-busy={policyBusy}
+                  disabled={saving || policyBusy || cannotEnableDirect}
+                  onClick={() => updatePolicy(device, policyTarget)}
+                >
+                  {displayPolicy === 'direct' ? <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M4 12h15M14 7l5 5-5 5" />
+                  </svg> : <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M12 3 19 6v5c0 4.4-2.8 8-7 10-4.2-2-7-5.6-7-10V6l7-3Z" />
+                    <path d="m9 12 2 2 4-4" />
+                  </svg>}
+                </button>
+                <Tooltip>{policyTooltip}</Tooltip>
+              </span>
+              <TrafficChart
+                samples={device.trafficHistory || []}
+                scale={trafficScale}
+                capacity={snapshot?.trafficHistoryCapacity || device.trafficHistory?.length || 1}
+                routeLabel={device.appliedPolicy === 'direct' ? 'Напрямую' : 'Gateway'}
+                pinned={device.pinned}
+              />
+            </article>;
+          })}
+        </div>
+      </div>
+    </aside>
+  );
+}

src/web/features/devices/TrafficChart.tsx

@@ -0,0 +1,176 @@
+import React, { useLayoutEffect, useRef, useState, type CSSProperties, type PointerEvent } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  byteString,
+  formatByteString,
+  trafficAxisMid,
+  trafficScaleRatio,
+} from '../../utils/format.js';
+import type { TrafficSample, TrafficScale } from './deviceSnapshot.js';
+
+const TRAFFIC_CHART_HEADROOM = 10;
+const trafficChartY = (ratio: number) => 100 - ratio * (100 - TRAFFIC_CHART_HEADROOM);
+
+function chartTime(value: string) {
+  return new Date(value).toLocaleTimeString('ru-RU', {
+    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
+  });
+}
+
+interface ChartPoint {
+  sample: TrafficSample;
+  x: number;
+  gateway: bigint;
+  proxy: bigint;
+  gatewayY: number;
+  proxyY: number;
+}
+
+interface HoveredPoint extends ChartPoint {
+  clientX: number;
+  clientY: number;
+}
+
+function smoothTrafficPath(points: ChartPoint[], valueKey: 'gatewayY' | 'proxyY') {
+  if (!points.length) return '';
+  return points.slice(1).reduce((path, point, index) => {
+    const previous = points[index];
+    const midX = (previous.x + point.x) / 2;
+    return `${path} C ${midX},${previous[valueKey]} ${midX},${point[valueKey]} ${point.x},${point[valueKey]}`;
+  }, `M ${points[0].x},${points[0][valueKey]}`);
+}
+
+function trafficSeriesMax(samples: TrafficSample[]) {
+  return samples.reduce((largest, sample) => {
+    const gateway = byteString(sample.gatewayBytes);
+    const proxy = byteString(sample.proxyBytes);
+    return gateway > largest
+      ? (proxy > gateway ? proxy : gateway)
+      : (proxy > largest ? proxy : largest);
+  }, 0n);
+}
+
+export function TrafficChart({
+  samples,
+  scale = 'linear',
+  capacity,
+  routeLabel,
+  pinned = true,
+}: {
+  samples: TrafficSample[];
+  scale?: TrafficScale;
+  capacity: number;
+  routeLabel: string;
+  pinned?: boolean;
+}) {
+  const [hovered, setHovered] = useState<HoveredPoint | null>(null);
+  const previousPoints = useRef<ChartPoint[]>([]);
+  const previousScale = useRef<TrafficScale>(scale);
+  const max = trafficSeriesMax(samples);
+  const mid = trafficAxisMid(max, scale);
+  const firstSlot = capacity - samples.length;
+  const points = samples.map((sample, index) => {
+    const gateway = byteString(sample.gatewayBytes);
+    const proxy = byteString(sample.proxyBytes);
+    return {
+      sample,
+      x: (firstSlot + index) * 100 / Math.max(1, capacity - 1),
+      gateway,
+      proxy,
+      gatewayY: trafficChartY(trafficScaleRatio(gateway, max, scale)),
+      proxyY: trafficChartY(trafficScaleRatio(proxy, max, scale)),
+    };
+  });
+  const previous = points.slice(0, -1);
+  const penultimate = points.at(-2);
+  const newest = points.at(-1);
+  const hasProxy = points.some(({ proxy }) => proxy > 0n);
+  const scaleFrom = previousPoints.current;
+  const animateScale = previousScale.current !== scale
+    && scaleFrom.length === points.length
+    && !(typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+
+  useLayoutEffect(() => {
+    previousPoints.current = points;
+    previousScale.current = scale;
+  }, [points, scale]);
+
+  function trackPointer(event: PointerEvent<HTMLSpanElement>) {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const slot = Math.round(Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width)) * (capacity - 1));
+    const index = slot - firstSlot;
+    if (index < 0 || index >= points.length) {
+      setHovered(null);
+      return;
+    }
+    setHovered({ ...points[index], clientX: event.clientX, clientY: event.clientY });
+  }
+
+  const tooltip = hovered && typeof document !== 'undefined' && createPortal(
+    <span
+      className="client-device-traffic-point-tooltip"
+      style={{
+        left: `${Math.max(8, Math.min(hovered.clientX + 12, globalThis.innerWidth - 190))}px`,
+        top: `${hovered.clientY < 150 ? hovered.clientY + 14 : hovered.clientY - 12}px`,
+        transform: hovered.clientY < 150 ? 'none' : 'translateY(-100%)',
+      }}
+    >
+      <time dateTime={hovered.sample.observedAt}>{chartTime(hovered.sample.observedAt)}</time>
+      <strong>Всего {formatByteString(hovered.gateway + hovered.proxy)}</strong>
+      <span>{routeLabel} {formatByteString(hovered.gateway)}</span>
+      {hovered.proxy > 0n && <span className="is-proxy">Proxy {formatByteString(hovered.proxy)}</span>}
+    </span>,
+    document.body,
+  );
+
+  return <span
+    className="client-device-traffic-chart"
+    role="img"
+    aria-label={`История трафика, шкала ${scale === 'log' ? 'логарифмическая' : 'линейная'}, максимум ${formatByteString(max)}`}
+    style={{
+      '--traffic-chart-top': `${TRAFFIC_CHART_HEADROOM}%`,
+      '--traffic-chart-mid': `${(100 + TRAFFIC_CHART_HEADROOM) / 2}%`,
+    } as CSSProperties}
+  >
+    {pinned && max > 0n && <span className="client-device-traffic-axis" aria-hidden="true">
+      <span className="is-max">{formatByteString(max)}</span>
+      <span className="is-mid">{formatByteString(mid)}</span>
+      <span className="is-zero">0</span>
+    </span>}
+    <span className="client-device-traffic-plot" onPointerMove={trackPointer} onPointerLeave={() => setHovered(null)}>
+      <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+        {pinned && <g className="client-device-traffic-grid">
+          <line x1="0" x2="100" y1={TRAFFIC_CHART_HEADROOM} y2={TRAFFIC_CHART_HEADROOM} />
+          <line x1="0" x2="100" y1={(100 + TRAFFIC_CHART_HEADROOM) / 2} y2={(100 + TRAFFIC_CHART_HEADROOM) / 2} />
+          <line x1="0" x2="100" y1="100" y2="100" />
+        </g>}
+        <g className="client-device-traffic-lines" style={{ '--sample-count': Math.max(1, capacity) } as CSSProperties}>
+          {previous.length > 0 && <path className="is-gateway" d={smoothTrafficPath(previous, 'gatewayY')}>
+            {animateScale && <animate key={`gateway-${scale}`} attributeName="d" from={smoothTrafficPath(scaleFrom.slice(0, -1), 'gatewayY')} to={smoothTrafficPath(previous, 'gatewayY')} dur="520ms" calcMode="spline" keyTimes="0;1" keySplines="0.16 1 0.3 1" fill="freeze" />}
+          </path>}
+          {hasProxy && previous.length > 0 && <path className="is-proxy" d={smoothTrafficPath(previous, 'proxyY')}>
+            {animateScale && <animate key={`proxy-${scale}`} attributeName="d" from={smoothTrafficPath(scaleFrom.slice(0, -1), 'proxyY')} to={smoothTrafficPath(previous, 'proxyY')} dur="520ms" calcMode="spline" keyTimes="0;1" keySplines="0.16 1 0.3 1" fill="freeze" />}
+          </path>}
+          {penultimate && newest && <path className="is-gateway is-new" pathLength="1" d={smoothTrafficPath([penultimate, newest], 'gatewayY')}>
+            {animateScale && <animate key={`gateway-new-${scale}`} attributeName="d" from={smoothTrafficPath(scaleFrom.slice(-2), 'gatewayY')} to={smoothTrafficPath([penultimate, newest], 'gatewayY')} dur="520ms" fill="freeze" />}
+          </path>}
+          {hasProxy && penultimate && newest && <path className="is-proxy is-new" pathLength="1" d={smoothTrafficPath([penultimate, newest], 'proxyY')}>
+            {animateScale && <animate key={`proxy-new-${scale}`} attributeName="d" from={smoothTrafficPath(scaleFrom.slice(-2), 'proxyY')} to={smoothTrafficPath([penultimate, newest], 'proxyY')} dur="520ms" fill="freeze" />}
+          </path>}
+          {!penultimate && newest && <line className="is-gateway is-point" x1={newest.x} x2={newest.x} y1={newest.gatewayY} y2={newest.gatewayY} />}
+        </g>
+        {hovered && <g className="client-device-traffic-cursor">
+          <line className="is-guide" x1={hovered.x} x2={hovered.x} y1={TRAFFIC_CHART_HEADROOM} y2="100" />
+          <line className="is-point is-gateway" x1={hovered.x} x2={hovered.x} y1={hovered.gatewayY} y2={hovered.gatewayY} />
+          {hovered.proxy > 0n && <line className="is-point is-proxy" x1={hovered.x} x2={hovered.x} y1={hovered.proxyY} y2={hovered.proxyY} />}
+        </g>}
+      </svg>
+    </span>
+    {samples.length > 0 && <span className="client-device-traffic-time" aria-hidden="true">
+      <time dateTime={samples[0].observedAt}>{chartTime(samples[0].observedAt)}</time>
+      <span>15 с</span>
+      <time dateTime={samples[samples.length - 1].observedAt}>{chartTime(samples[samples.length - 1].observedAt)}</time>
+    </span>}
+    {tooltip}
+  </span>;
+}

src/web/features/devices/deviceSnapshot.ts

@@ -0,0 +1,172 @@
+export type ByteValue = string;
+export type TrafficScale = 'linear' | 'log';
+export type DevicePolicy = 'vpn' | 'direct';
+type DeviceStatus = 'online' | 'recent' | 'offline';
+type DevicePolicyStatus = 'applied' | 'applying' | 'pending' | 'failed';
+type DeviceConfidence = 'high' | 'medium' | 'ambiguous';
+
+export interface TrafficSample extends Record<string, unknown> {
+  observedAt: string;
+  gatewayBytes: ByteValue;
+  proxyBytes: ByteValue;
+}
+
+export interface Device extends Record<string, unknown> {
+  id: string;
+  alias: string | null;
+  hostname: string | null;
+  ip: string | null;
+  lastSeenAt: string | null;
+  status: DeviceStatus;
+  pinned: boolean;
+  downloadBytes: ByteValue;
+  uploadBytes: ByteValue;
+  proxyDownloadBytes: ByteValue;
+  proxyUploadBytes: ByteValue;
+  policyStatus: DevicePolicyStatus;
+  policyError: string | null;
+  desiredPolicy: DevicePolicy;
+  appliedPolicy: DevicePolicy;
+  confidence: DeviceConfidence;
+  trafficHistory: TrafficSample[];
+}
+
+interface SnapshotSource extends Record<string, unknown> {
+  kind: 'neighbor';
+  error: unknown;
+  lastObservedAt: string | null;
+  traffic: {
+    error: unknown;
+    lastObservedAt: string | null;
+    proxy: {
+      error: unknown;
+      lastObservedAt: string | null;
+      [key: string]: unknown;
+    };
+    [key: string]: unknown;
+  };
+  policy: {
+    error: unknown;
+    lastAppliedAt: string | null;
+    [key: string]: unknown;
+  };
+}
+
+export interface DeviceSnapshot extends Record<string, unknown> {
+  revision: number;
+  devices: Device[];
+  trafficHistoryCapacity: number;
+  traffic: {
+    gatewayBytes: ByteValue;
+    proxyBytes: ByteValue;
+    totalBytes: ByteValue;
+    gatewayObservedAt: string | null;
+    proxyObservedAt: string | null;
+    observedAt: string | null;
+    history: TrafficSample[];
+    [key: string]: unknown;
+  };
+  source: SnapshotSource;
+}
+
+function record(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function nullableString(value: unknown): value is string | null {
+  return value === null || typeof value === 'string';
+}
+
+function timestamp(value: unknown): value is string {
+  return typeof value === 'string' && value.length > 0 && Number.isFinite(Date.parse(value));
+}
+
+function nullableTimestamp(value: unknown): value is string | null {
+  return value === null || timestamp(value);
+}
+
+function bytes(value: unknown): value is ByteValue {
+  return typeof value === 'string' && /^\d+$/.test(value);
+}
+
+function validTrafficSample(value: unknown): value is TrafficSample {
+  return record(value)
+    && timestamp(value.observedAt)
+    && bytes(value.gatewayBytes)
+    && bytes(value.proxyBytes);
+}
+
+function validHistory(value: unknown): value is TrafficSample[] {
+  return Array.isArray(value) && value.every(validTrafficSample);
+}
+
+function validDevice(value: unknown): value is Device {
+  return record(value)
+    && typeof value.id === 'string'
+    && /^dev_[a-f0-9]{16}$/.test(value.id)
+    && nullableString(value.alias)
+    && nullableString(value.hostname)
+    && nullableString(value.ip)
+    && nullableTimestamp(value.lastSeenAt)
+    && (value.status === 'online' || value.status === 'recent' || value.status === 'offline')
+    && typeof value.pinned === 'boolean'
+    && bytes(value.downloadBytes)
+    && bytes(value.uploadBytes)
+    && bytes(value.proxyDownloadBytes)
+    && bytes(value.proxyUploadBytes)
+    && (value.policyStatus === 'applied' || value.policyStatus === 'applying'
+      || value.policyStatus === 'pending' || value.policyStatus === 'failed')
+    && nullableString(value.policyError)
+    && (value.desiredPolicy === 'vpn' || value.desiredPolicy === 'direct')
+    && (value.appliedPolicy === 'vpn' || value.appliedPolicy === 'direct')
+    && (value.confidence === 'high' || value.confidence === 'medium' || value.confidence === 'ambiguous')
+    && validHistory(value.trafficHistory);
+}
+
+function validSource(value: unknown): value is SnapshotSource {
+  return record(value)
+    && value.kind === 'neighbor'
+    && Object.hasOwn(value, 'error')
+    && nullableTimestamp(value.lastObservedAt)
+    && record(value.traffic)
+    && Object.hasOwn(value.traffic, 'error')
+    && nullableTimestamp(value.traffic.lastObservedAt)
+    && record(value.traffic.proxy)
+    && Object.hasOwn(value.traffic.proxy, 'error')
+    && nullableTimestamp(value.traffic.proxy.lastObservedAt)
+    && record(value.policy)
+    && Object.hasOwn(value.policy, 'error')
+    && nullableTimestamp(value.policy.lastAppliedAt);
+}
+
+function validTraffic(value: unknown): value is DeviceSnapshot['traffic'] {
+  return record(value)
+    && bytes(value.gatewayBytes)
+    && bytes(value.proxyBytes)
+    && bytes(value.totalBytes)
+    && nullableTimestamp(value.gatewayObservedAt)
+    && nullableTimestamp(value.proxyObservedAt)
+    && nullableTimestamp(value.observedAt)
+    && validHistory(value.history);
+}
+
+function assertDeviceSnapshot(value: unknown): asserts value is DeviceSnapshot {
+  if (!record(value)
+    || !Number.isSafeInteger(value.revision)
+    || typeof value.revision !== 'number'
+    || value.revision < 0
+    || !Array.isArray(value.devices)
+    || !value.devices.every(validDevice)
+    || !Number.isSafeInteger(value.trafficHistoryCapacity)
+    || typeof value.trafficHistoryCapacity !== 'number'
+    || value.trafficHistoryCapacity <= 0
+    || !validTraffic(value.traffic)
+    || !validSource(value.source)) {
+    throw new TypeError('Harbor device inventory returned an invalid snapshot');
+  }
+}
+
+export function parseDeviceSnapshot(value: unknown): DeviceSnapshot {
+  assertDeviceSnapshot(value);
+  return value;
+}

src/web/features/devices/index.ts

@@ -0,0 +1,6 @@
+export { DevicesPanel } from './DevicesPanel.js';
+export {
+  DevicesToggle,
+  GatewayTrafficSummary,
+  useDevicesFeature,
+} from './DevicesFeature.js';