Add Gateway connectivity diagnostics and traffic chart improvements

src/server/config.js

@@ -14,6 +14,7 @@ export const settings = {
   appMode: process.env.APP_MODE === "client" ? "client" : "gateway",
   port: parsePort(process.env.PORT, 3456),
   proxyPort,
+  diagnosticsProxyPort: parsePort(process.env.DIAGNOSTICS_PROXY_PORT, 18080),
   tproxyPort: parsePort(process.env.TPROXY_PORT, 7895),
   tproxyMark: process.env.TPROXY_MARK || "1",
   tproxyChain: process.env.TPROXY_CHAIN || "VPN_PROXY_TPROXY",

src/server/dataplane.js

@@ -7,6 +7,7 @@ import { buildVersionInfo } from './version.js';
 import { readNeighborSnapshot } from './adapters/neighbors.js';
 import { createDeviceTrafficService } from './services/deviceTrafficService.js';
 import { createDevicePolicyService } from './services/devicePolicyService.js';
+import { createConnectivityDiagnosticsService } from './services/connectivityDiagnosticsService.js';
 
 const socketPath = settings.dataplaneSocket;
 const runtime = createSingboxRuntime({
@@ -27,6 +28,9 @@ const devicePolicy = createDevicePolicyService({
   tproxyPort: settings.tproxyPort,
   tproxyMark: settings.tproxyMark,
 });
+const connectivityDiagnostics = createConnectivityDiagnosticsService({
+  proxyPort: settings.diagnosticsProxyPort,
+});
 let ready = false;
 let trafficTimer = null;
 const MAX_POLICY_BODY_BYTES = 256 * 1024;
@@ -86,6 +90,9 @@ const server = http.createServer(async (req, res) => {
       const body = await readJson(req);
       return sendJson(res, 200, await devicePolicy.apply(body.devices));
     }
+    if (req.method === 'POST' && req.url === '/diagnostics/connectivity') {
+      return sendJson(res, 200, await connectivityDiagnostics.run({ vpnAvailable: runtime.running }));
+    }
     if (req.method === 'POST' && req.url === '/apply') {
       return sendJson(res, 200, await runtime.apply());
     }

src/server/dataplaneClient.js

@@ -56,6 +56,7 @@ export function createDataplaneClient(socketPath, send = request) {
     observeTraffic: () => send(socketPath, '/device-traffic', 'GET'),
     observeDevicePolicy: () => send(socketPath, '/device-policy', 'GET'),
     applyDevicePolicies: (devices) => send(socketPath, '/device-policy', 'PUT', { devices }),
+    runConnectivityDiagnostics: () => send(socketPath, '/diagnostics/connectivity', 'POST'),
     apply: () => update('/apply', 'POST'),
     restart: () => update('/restart', 'POST'),
     stop: () => update('/stop', 'POST'),

src/server/index.js

@@ -47,6 +47,7 @@ import {
   migrateDeviceInventoryState,
 } from './services/deviceInventoryService.js';
 import { buildGatewayVersionInfo, buildVersionInfo } from './version.js';
+import { createConnectivityDiagnosticsService } from './services/connectivityDiagnosticsService.js';
 
 const MAX_BODY_BYTES = 1_000_000;
 const SUBSCRIPTION_REFRESH_INTERVAL_MS = 15 * 60 * 1000;
@@ -134,6 +135,9 @@ const deviceInventory = settings.appMode === 'gateway'
       vendor: createVendorLookup(),
     })
   : null;
+const localConnectivityDiagnostics = settings.appMode === 'gateway' && !remoteDataplane
+  ? createConnectivityDiagnosticsService({ proxyPort: settings.diagnosticsProxyPort })
+  : null;
 let subscriptionRefreshPromise = null;
 let subscriptionRefreshTimer = null;
 let gatewayDiscoveryPromise = null;
@@ -694,6 +698,23 @@ async function handleApi(req, res) {
     return sendState(res, { results });
   }
 
+  if (req.method === 'POST' && req.url === '/api/diagnostics/connectivity') {
+    if (settings.appMode !== 'gateway') throw new HarborError('ENDPOINT_NOT_FOUND');
+    const state = stateStore.read();
+    const appliedServerId = state.appliedServerId || state.selectedServerId;
+    const selected = (state.servers || []).find((server) => server.id === appliedServerId);
+    const result = remoteDataplane
+      ? await singboxRuntime.runConnectivityDiagnostics()
+      : await localConnectivityDiagnostics.run({ vpnAvailable: (await singboxRuntime.refresh()).running });
+    return sendJson(res, 200, {
+      ...result,
+      vpn: {
+        ...result.vpn,
+        server: selected ? { id: selected.id, label: selected.label } : null,
+      },
+    });
+  }
+
   if (req.method === 'POST' && req.url === '/api/subscription/fetch') {
     const { url = '' } = await readBody(req);
     const normalizedUrl = String(url).trim();

src/server/services/connectivityDiagnosticsService.js

@@ -0,0 +1,244 @@
+import { execFile } from 'node:child_process';
+import net from 'node:net';
+
+export const CURL_META_MARKER = '\n__HARBOR_CURL_META__';
+
+const IP_PROBES = [
+  {
+    id: 'cloudflare',
+    url: 'https://www.cloudflare.com/cdn-cgi/trace',
+    address: (body) => /^ip=(.+)$/m.exec(body)?.[1]?.trim(),
+  },
+  { id: 'ipify', url: 'https://api.ipify.org', address: (body) => body.trim() },
+];
+const IP_FALLBACK = {
+  id: 'aws',
+  url: 'https://checkip.amazonaws.com',
+  address: (body) => body.trim(),
+};
+const IPV6_PROBE = {
+  id: 'ipify-v6',
+  url: 'https://api6.ipify.org',
+  address: (body) => body.trim(),
+};
+const SITE_PROBES = [
+  { id: 'google', label: 'Google', url: 'https://www.google.com/generate_204' },
+  { id: 'youtube', label: 'YouTube', url: 'https://www.youtube.com/generate_204' },
+];
+
+function runCurl(args) {
+  return new Promise((resolve) => {
+    execFile('curl', args, { encoding: 'utf8', maxBuffer: 64 * 1024 }, (error, stdout, stderr) => {
+      resolve({
+        exitCode: Number.isInteger(error?.code) ? error.code : error ? null : 0,
+        error: error?.message || '',
+        stderr: stderr || '',
+        stdout: stdout || '',
+      });
+    });
+  });
+}
+
+function stageFor(exitCode) {
+  if (exitCode === 6) return 'dns';
+  if (exitCode === 7) return 'tcp';
+  if ([35, 51, 58, 60].includes(exitCode)) return 'tls';
+  if (exitCode === 28) return 'timeout';
+  return 'request';
+}
+
+function milliseconds(value) {
+  const seconds = Number(value);
+  return Number.isFinite(seconds) ? Math.round(seconds * 1000) : null;
+}
+
+async function request(probe, path, proxyPort, execute, { body = false, ipv4 = false } = {}) {
+  const args = [
+    '--silent',
+    '--show-error',
+    '--location',
+    '--connect-timeout',
+    '3',
+    '--max-time',
+    '6',
+    '--user-agent',
+    'Harbor-Diagnostics/1',
+    '--output',
+    body ? '-' : '/dev/null',
+    '--write-out',
+    `${CURL_META_MARKER}%{json}`,
+    ...(path === 'vpn'
+      ? ['--proxy', `http://127.0.0.1:${proxyPort}`]
+      : ['--noproxy', '*']),
+    ...(ipv4 ? ['--ipv4'] : []),
+    probe.url,
+  ];
+  const result = await execute(args);
+  const marker = result.stdout.lastIndexOf(CURL_META_MARKER);
+  const responseBody = marker >= 0 ? result.stdout.slice(0, marker) : '';
+  let meta = {};
+  try {
+    meta = JSON.parse(marker >= 0 ? result.stdout.slice(marker + CURL_META_MARKER.length) : '{}');
+  } catch {
+    // Curl diagnostics remain useful even when an old curl cannot emit JSON metadata.
+  }
+  const exitCode = Number.isInteger(meta.exitcode) ? meta.exitcode : result.exitCode;
+  const ok = exitCode === 0;
+  return {
+    ok,
+    body: responseBody,
+    exitCode,
+    httpStatus: Number(meta.http_code) || null,
+    latencyMs: milliseconds(meta.time_starttransfer),
+    totalMs: milliseconds(meta.time_total),
+    stage: ok ? 'complete' : stageFor(exitCode),
+    error: ok ? null : String(meta.errormsg || result.stderr || result.error || 'request failed').trim(),
+  };
+}
+
+async function ipProbe(probe, path, proxyPort, execute, version) {
+  const result = await request(probe, path, proxyPort, execute, { body: true, ipv4: version === 4 });
+  const address = result.ok ? probe.address(result.body) : null;
+  const valid = typeof address === 'string' && net.isIP(address) === version;
+  return {
+    source: probe.id,
+    address: valid ? address : null,
+    latencyMs: result.latencyMs,
+    error: valid ? null : result.error || 'invalid IP response',
+  };
+}
+
+async function publicIps(path, proxyPort, execute) {
+  const [primary, ipv6] = await Promise.all([
+    Promise.all(IP_PROBES.map((probe) => ipProbe(probe, path, proxyPort, execute, 4))),
+    ipProbe(IPV6_PROBE, path, proxyPort, execute, 6),
+  ]);
+  const primaryAddresses = new Set(primary.map((probe) => probe.address).filter(Boolean));
+  const probes = primary.every((probe) => probe.address) && primaryAddresses.size === 1
+    ? primary
+    : [...primary, await ipProbe(IP_FALLBACK, path, proxyPort, execute, 4)];
+  return {
+    ipv4: {
+      addresses: [...new Set(probes.map((probe) => probe.address).filter(Boolean))],
+      sources: probes,
+    },
+    ipv6: ipv6.address,
+    ipv6Source: ipv6,
+  };
+}
+
+async function siteProbe(probe, path, proxyPort, execute) {
+  let result = await request(probe, path, proxyPort, execute);
+  let attempts = 1;
+  if (!result.ok) {
+    result = await request(probe, path, proxyPort, execute);
+    attempts = 2;
+  }
+  const status = !result.ok
+    ? 'unavailable'
+    : result.httpStatus >= 200 && result.httpStatus < 400
+      ? 'available'
+      : 'responded';
+  return {
+    id: probe.id,
+    label: probe.label,
+    status,
+    attempts,
+    httpStatus: result.httpStatus,
+    latencyMs: result.latencyMs,
+    totalMs: result.totalMs,
+    stage: result.stage,
+    error: result.error,
+  };
+}
+
+async function probePath(path, proxyPort, execute) {
+  const [ip, sites] = await Promise.all([
+    publicIps(path, proxyPort, execute),
+    Promise.all(SITE_PROBES.map((probe) => siteProbe(probe, path, proxyPort, execute))),
+  ]);
+  return {
+    available: true,
+    internetAvailable: Boolean(
+      ip.ipv4.addresses.length || ip.ipv6 || sites.some((site) => site.status !== 'unavailable'),
+    ),
+    ...ip,
+    sites,
+  };
+}
+
+export function assessConnectivity(direct, vpn) {
+  const comparisons = SITE_PROBES.map(({ id, label }) => {
+    const directSite = direct.sites.find((site) => site.id === id);
+    const vpnSite = vpn.sites?.find((site) => site.id === id);
+    let assessment = 'inconclusive';
+    if (!vpn.available) assessment = 'not-tested';
+    else if (directSite?.status === 'available' && vpnSite?.status === 'available') {
+      assessment = 'available';
+    } else if (
+      directSite?.status === 'responded'
+      && [403, 451].includes(directSite.httpStatus)
+      && vpnSite?.status === 'available'
+    ) assessment = 'likely-direct-restriction';
+    else if (
+      directSite?.status === 'unavailable'
+      && vpnSite?.status === 'available'
+      && direct.internetAvailable
+    ) {
+      assessment = 'likely-direct-restriction';
+    } else if (directSite?.status === 'available' && vpnSite?.status !== 'available') {
+      assessment = 'vpn-problem';
+    } else if (directSite?.status === 'unavailable' && vpnSite?.status === 'unavailable') {
+      assessment = 'unavailable';
+    }
+    return { id, label, assessment, direct: directSite, vpn: vpnSite || null };
+  });
+  const directAddresses = [...direct.ipv4.addresses, direct.ipv6].filter(Boolean);
+  const vpnAddresses = [...(vpn.ipv4?.addresses || []), vpn.ipv6].filter(Boolean);
+  const sameEgress = directAddresses.some((address) => vpnAddresses.includes(address));
+  let summary = 'inconclusive';
+  if (!vpn.available) summary = 'vpn-off';
+  else if (!direct.internetAvailable && !vpn.internetAvailable) summary = 'offline';
+  else if (!direct.internetAvailable && vpn.internetAvailable) summary = 'direct-offline';
+  else if (direct.internetAvailable && !vpn.internetAvailable) summary = 'vpn-problem';
+  else if (comparisons.some((item) => item.assessment === 'likely-direct-restriction')) {
+    summary = 'likely-direct-restriction';
+  } else if (sameEgress) summary = 'same-ip';
+  else if (comparisons.every((item) => item.assessment === 'available')) summary = 'available';
+  return { summary, sameEgress, comparisons };
+}
+
+export function createConnectivityDiagnosticsService({
+  proxyPort,
+  execute = runCurl,
+  now = () => new Date().toISOString(),
+}) {
+  let inFlight = null;
+  async function runOnce({ vpnAvailable }) {
+    const directPromise = probePath('direct', proxyPort, execute);
+    const vpnPromise = vpnAvailable
+      ? probePath('vpn', proxyPort, execute)
+      : Promise.resolve({
+          available: false,
+          reason: 'vpn-off',
+          internetAvailable: false,
+          ipv4: { addresses: [], sources: [] },
+          ipv6: null,
+          ipv6Source: null,
+          sites: [],
+        });
+    const [direct, vpn] = await Promise.all([directPromise, vpnPromise]);
+    return {
+      checkedAt: now(),
+      direct,
+      vpn,
+      assessment: assessConnectivity(direct, vpn),
+    };
+  }
+  return {
+    run(options) {
+      if (!inFlight) inFlight = runOnce(options).finally(() => { inFlight = null; });
+      return inFlight;
+    },
+  };
+}

src/server/singbox.js

@@ -7,6 +7,7 @@ import { atomicWriteFile, atomicWriteJson } from './services/stateStore.js';
 const PROXY_TYPES = new Set(['vless', 'vmess', 'trojan', 'shadowsocks', 'hysteria2']);
 const MIXED_INBOUND = 'mixed-in';
 const TPROXY_INBOUND = 'tproxy-in';
+const DIAGNOSTICS_INBOUND = 'diagnostics-vpn-in';
 
 function findOutbound(subscriptionConfig, selectedTag) {
   const outbounds = Array.isArray(subscriptionConfig?.outbounds)
@@ -51,6 +52,14 @@ export function buildGatewayConfig(subscriptionConfig, selectedTag, {
       sniff: true,
       set_system_proxy: false,
     },
+    ...(!clientMode ? [{
+      type: 'mixed',
+      tag: DIAGNOSTICS_INBOUND,
+      listen: '127.0.0.1',
+      listen_port: settings.diagnosticsProxyPort,
+      sniff: true,
+      set_system_proxy: false,
+    }] : []),
   ];
   const directRules = normalizeRouteRules(routeRules)
     .filter((rule) => rule.enabled)
@@ -58,6 +67,7 @@ export function buildGatewayConfig(subscriptionConfig, selectedTag, {
   const rules = clientMode
     ? [...directRules, { inbound: [MIXED_INBOUND], outbound: outboundTag }]
     : [
+        { inbound: [DIAGNOSTICS_INBOUND], outbound: outboundTag },
         ...directRules,
         { inbound: [TPROXY_INBOUND], outbound: outboundTag },
         { inbound: [MIXED_INBOUND], outbound: outboundTag },

src/shared/versions.js

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

src/web/api.js

@@ -91,6 +91,9 @@ export const api = {
       body: JSON.stringify({ mode, expectedRevision }),
     }),
   },
+  diagnostics: {
+    connectivity: () => request('/api/diagnostics/connectivity', { method: 'POST' }),
+  },
   singbox: {
     stop: () => request('/api/singbox/stop', { method: 'POST' }),
     restart: () => request('/api/singbox/restart', { method: 'POST' }),

src/web/components/ClientOverviewPage.jsx

@@ -16,6 +16,7 @@ import { instructionBlocks } from '../instructions.js';
 import { operationBlocked } from '../state/operations.js';
 import { ConfirmationPopup } from './ConfirmationPopup.jsx';
 import { DevicesPanel } from './DevicesPanel.jsx';
+import { ConnectivityDiagnosticsPanel } from './ConnectivityDiagnosticsPanel.jsx';
 import { ServerPicker } from './ServerPicker.jsx';
 import { ERROR_DEFINITIONS } from '../../shared/errors.js';
 import { canAppendRouteRule } from '../../shared/routingRules.js';
@@ -642,6 +643,7 @@ export function ClientOverviewPage({
   const [instructionsOpen, setInstructionsOpen] = useState(false);
   const [localRulesOpen, setLocalRulesOpen] = useState(false);
   const [devicesOpen, setDevicesOpen] = useState(false);
+  const [diagnosticsOpen, setDiagnosticsOpen] = useState(false);
   const [localRulesDraft, setLocalRulesDraft] = useState([]);
   const [localRulesRevision, setLocalRulesRevision] = useState(state?.route?.localRulesRevision || 0);
   const [confirmingLocalRulesClose, setConfirmingLocalRulesClose] = useState(false);
@@ -660,6 +662,9 @@ export function ClientOverviewPage({
   const devicesPanelRef = useRef(null);
   const devicesToggleRef = useRef(null);
   const devicesCloseRef = useRef(null);
+  const diagnosticsPanelRef = useRef(null);
+  const diagnosticsToggleRef = useRef(null);
+  const diagnosticsCloseRef = useRef(null);
   const localRulesBaselineRef = useRef('[]');
   const previousHasSubscriptionRef = useRef(hasSubscription);
   const gatewayAddress = isGateway ? window.location.hostname : '127.0.0.1';
@@ -794,6 +799,8 @@ export function ClientOverviewPage({
       setEditingSubscription(true);
       setInstructionsOpen(false);
       setLocalRulesOpen(false);
+      setDevicesOpen(false);
+      setDiagnosticsOpen(false);
     }
   }, [hasSubscription]);
 
@@ -876,6 +883,28 @@ export function ClientOverviewPage({
     };
   }, [devicesOpen]);
 
+  useEffect(() => {
+    if (!diagnosticsOpen) return undefined;
+    const frame = requestAnimationFrame(() => diagnosticsCloseRef.current?.focus());
+    const closeDiagnostics = (event) => {
+      if (event.type === 'keydown' && event.key !== 'Escape') return;
+      if (event.type !== 'keydown' && (
+        diagnosticsPanelRef.current?.contains(event.target) || diagnosticsToggleRef.current?.contains(event.target)
+      )) return;
+      setDiagnosticsOpen(false);
+    };
+    document.addEventListener('pointerdown', closeDiagnostics);
+    document.addEventListener('keydown', closeDiagnostics);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener('pointerdown', closeDiagnostics);
+      document.removeEventListener('keydown', closeDiagnostics);
+      requestAnimationFrame(() => {
+        if (diagnosticsPanelRef.current?.contains(document.activeElement)) diagnosticsToggleRef.current?.focus();
+      });
+    };
+  }, [diagnosticsOpen]);
+
   useEffect(() => {
     if (!localRulesOpen) return undefined;
     const frame = requestAnimationFrame(() => localRulesCloseRef.current?.focus());
@@ -1021,6 +1050,7 @@ export function ClientOverviewPage({
     const rules = state?.route?.localRules || [];
     setInstructionsOpen(false);
     setDevicesOpen(false);
+    setDiagnosticsOpen(false);
     localRulesBaselineRef.current = localRulesSignature(rules);
     setLocalRulesDraft(rules.map(createLocalRuleDraft));
     setLocalRulesRevision(state?.route?.localRulesRevision || 0);
@@ -1107,6 +1137,7 @@ export function ClientOverviewPage({
           onClick={() => {
             if (localRulesOpen && !requestCloseLocalRules()) return;
             setDevicesOpen(false);
+            setDiagnosticsOpen(false);
             setInstructionsOpen((open) => !open);
           }}
         >
@@ -1126,6 +1157,7 @@ export function ClientOverviewPage({
           onClick={() => {
             if (localRulesOpen && !requestCloseLocalRules()) return;
             setInstructionsOpen(false);
+            setDiagnosticsOpen(false);
             setDevicesOpen((open) => !open);
           }}
         >
@@ -1136,6 +1168,25 @@ export function ClientOverviewPage({
           </svg>
           <span>Устройства</span>
         </button>}
+        {isGateway && <button
+          ref={diagnosticsToggleRef}
+          className={`client-instructions-toggle client-diagnostics-toggle${diagnosticsOpen ? ' is-open' : ''}`}
+          type="button"
+          aria-expanded={diagnosticsOpen}
+          aria-controls="client-diagnostics"
+          aria-label={diagnosticsOpen ? 'Закрыть диагностику' : 'Проверить маршруты Gateway'}
+          onClick={() => {
+            if (localRulesOpen && !requestCloseLocalRules()) return;
+            setInstructionsOpen(false);
+            setDevicesOpen(false);
+            setDiagnosticsOpen((open) => !open);
+          }}
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3 12h4l2.2-5 4.2 10 2.1-5H21" />
+          </svg>
+          <span>Диагностика</span>
+        </button>}
         <button
           ref={localRulesToggleRef}
           className={`client-local-rules-toggle${localRulesOpen ? ' is-open' : ''}${localRulesPendingRestart ? ' has-pending' : ''}`}
@@ -1485,6 +1536,13 @@ export function ClientOverviewPage({
         onClose={() => setDevicesOpen(false)}
       />}
 
+      {hasSubscription && subscriptionContentReady && isGateway && <ConnectivityDiagnosticsPanel
+        open={diagnosticsOpen}
+        panelRef={diagnosticsPanelRef}
+        closeRef={diagnosticsCloseRef}
+        onClose={() => setDiagnosticsOpen(false)}
+      />}
+
       {hasSubscription && subscriptionContentReady && <LocalRulesPanel
         open={localRulesOpen}
         rules={localRulesDraft}

src/web/components/ConnectivityDiagnosticsPanel.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { api } from '../api.js';
+
+const SUMMARY_COPY = {
+  available: ['is-good', 'Оба маршрута работают, ограничений не видно.'],
+  'likely-direct-restriction': ['is-warning', 'Похоже на ограничение прямого маршрута: через VPN сервис доступен.'],
+  'vpn-problem': ['is-error', 'Прямой маршрут работает, а VPN требует проверки.'],
+  'direct-offline': ['is-error', 'Прямой выход в интернет недоступен.'],
+  offline: ['is-error', 'Интернет недоступен по обоим маршрутам.'],
+  'same-ip': ['is-warning', 'Внешний IP не изменился — проверьте, что трафик действительно идёт через VPN.'],
+  'vpn-off': ['is-muted', 'VPN выключен: прямой маршрут проверен отдельно.'],
+  inconclusive: ['is-muted', 'Результата недостаточно для уверенного вывода.'],
+};
+
+function ipText(path) {
+  const addresses = [...(path?.ipv4?.addresses || []), path?.ipv6].filter(Boolean);
+  return addresses.length ? addresses.join(' · ') : 'Не определён';
+}
+
+function internetStatus(path) {
+  if (!path?.available) return ['is-muted', 'Не проверено'];
+  return path.internetAvailable ? ['is-good', 'Доступен'] : ['is-error', 'Нет доступа'];
+}
+
+function siteStatus(site) {
+  if (!site) return ['is-muted', 'Не проверено'];
+  if (site.status === 'unavailable') return ['is-error', 'Нет доступа'];
+  if (site.status === 'responded') return ['is-warning', `HTTP ${site.httpStatus}`];
+  return ['is-good', `Доступен${site.latencyMs === null ? '' : ` · ${site.latencyMs} мс`}`];
+}
+
+function Status({ value, route }) {
+  const [className, label] = value;
+  return <span className={`client-diagnostics-status ${className}`} aria-label={`${route}: ${label}`}>{label}</span>;
+}
+
+function PathDetails({ title, path }) {
+  if (!path?.available) return <section><strong>{title}</strong><p>VPN не запущен.</p></section>;
+  return <section>
+    <strong>{title}</strong>
+    <p>IPv4: {path.ipv4.addresses.join(', ') || 'нет'}</p>
+    <p>IPv6: {path.ipv6 || 'нет'}</p>
+    {path.sites.map((site) => (
+      <p key={site.id}>
+        {site.label}: {site.stage}{site.httpStatus ? ` · HTTP ${site.httpStatus}` : ''}
+        {site.error ? ` · ${site.error}` : ''}
+      </p>
+    ))}
+  </section>;
+}
+
+export function ConnectivityDiagnosticsPanel({ open, panelRef, closeRef, onClose }) {
+  const [result, setResult] = useState(null);
+  const [status, setStatus] = useState('idle');
+  const [error, setError] = useState(null);
+
+  async function run() {
+    setStatus('running');
+    setError(null);
+    try {
+      setResult(await api.diagnostics.connectivity());
+      setStatus('ready');
+    } catch (requestError) {
+      setError(requestError);
+      setStatus('error');
+    }
+  }
+
+  const summary = SUMMARY_COPY[result?.assessment?.summary] || SUMMARY_COPY.inconclusive;
+  const checkedAt = result?.checkedAt
+    ? new Date(result.checkedAt).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    : null;
+
+  return (
+    <aside
+      ref={panelRef}
+      id="client-diagnostics"
+      className={`client-drawer client-instructions client-diagnostics${open ? ' is-open' : ''}`}
+      aria-labelledby="client-diagnostics-title"
+      aria-hidden={!open}
+      inert={!open ? true : undefined}
+    >
+      <div className="client-drawer-sheet client-instructions-sheet client-diagnostics-sheet">
+        <button
+          ref={closeRef}
+          className="client-drawer-close"
+          type="button"
+          aria-label="Закрыть диагностику"
+          onClick={onClose}
+        >×</button>
+        <header className="client-instructions-header client-diagnostics-header">
+          <span>Gateway · Direct ↔ VPN</span>
+          <h2 id="client-diagnostics-title">Проверка маршрутов</h2>
+          <div className="client-instructions-intro">
+            <p>Сравнивает внешний IP и доступность сайтов напрямую и через выбранный VPN, не меняя правила.</p>
+          </div>
+        </header>
+
+        <button
+          className={`client-diagnostics-run${status === 'running' ? ' is-running' : ''}`}
+          type="button"
+          aria-busy={status === 'running'}
+          disabled={status === 'running'}
+          onClick={run}
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M20 11a8 8 0 1 0-2.3 6.7M20 5v6h-6" />
+          </svg>
+          <span>{status === 'running' ? 'Проверяем маршруты…' : result ? 'Проверить ещё раз' : 'Проверить сейчас'}</span>
+        </button>
+
+        {error && <div className="client-diagnostics-error" role="alert">
+          <span>{error.message}</span>
+          {error.retryable && <button type="button" onClick={run}>Повторить</button>}
+        </div>}
+
+        {!result && status !== 'running' && !error && (
+          <p className="client-diagnostics-empty">Результаты появятся здесь после ручного запуска.</p>
+        )}
+
+        {result && <div className="client-diagnostics-results" aria-live="polite" aria-busy={status === 'running'}>
+          <div className="client-diagnostics-grid client-diagnostics-grid-head" aria-hidden="true">
+            <span />
+            <strong>Напрямую</strong>
+            <strong>VPN{result.vpn.server?.label ? ` · ${result.vpn.server.label}` : ''}</strong>
+          </div>
+          <div className="client-diagnostics-grid">
+            <strong>Внешний IP</strong>
+            <code aria-label={`Напрямую: ${ipText(result.direct)}`}>{ipText(result.direct)}</code>
+            <code aria-label={`VPN: ${result.vpn.available ? ipText(result.vpn) : 'VPN выключен'}`}>
+              {result.vpn.available ? ipText(result.vpn) : 'VPN выключен'}
+            </code>
+          </div>
+          <div className="client-diagnostics-grid">
+            <strong>Интернет</strong>
+            <Status value={internetStatus(result.direct)} route="Напрямую" />
+            <Status value={internetStatus(result.vpn)} route="VPN" />
+          </div>
+          {result.assessment.comparisons.map((comparison) => (
+            <div className="client-diagnostics-grid" key={comparison.id}>
+              <strong>{comparison.label}</strong>
+              <Status value={siteStatus(comparison.direct)} route={`Напрямую, ${comparison.label}`} />
+              <Status value={siteStatus(comparison.vpn)} route={`VPN, ${comparison.label}`} />
+            </div>
+          ))}
+          <p className={`client-diagnostics-summary ${summary[0]}`} role="status">{summary[1]}</p>
+          <p className="client-diagnostics-time">Проверено в {checkedAt}</p>
+          <details className="client-diagnostics-details">
+            <summary>Технические детали</summary>
+            <div>
+              <PathDetails title="Напрямую" path={result.direct} />
+              <PathDetails title="VPN" path={result.vpn} />
+            </div>
+          </details>
+        </div>}
+      </div>
+    </aside>
+  );
+}

src/web/components/DevicesPanel.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { api } from '../api.js';
 import { copyText } from '../utils/clientControls.js';
 import {
@@ -6,9 +7,9 @@ import {
   formatByteString,
   formatLastSeen,
   positiveByteDelta,
-  sortDevicesByTraffic,
+  stabilizeDevicesByTraffic,
   trafficAxisMid,
-  trafficSampleMetrics,
+  trafficScaleRatio,
 } from '../utils/format.js';
 
 const AUTO_REFRESH_MS = 15_000;
@@ -42,52 +43,94 @@ function chartTime(value) {
   });
 }
 
-function TrafficChart({ samples, scale, capacity, routeLabel }) {
+function TrafficChart({ samples, scale, capacity, routeLabel, pinned }) {
+  const [hovered, setHovered] = useState(null);
   const max = samples.reduce((largest, sample) => {
-    const total = byteString(sample.gatewayBytes) + byteString(sample.proxyBytes);
-    return total > largest ? total : largest;
+    const gateway = byteString(sample.gatewayBytes);
+    const proxy = byteString(sample.proxyBytes);
+    return gateway > largest ? gateway : proxy > largest ? proxy : largest;
   }, 0n);
   const mid = trafficAxisMid(max, scale);
   const latest = samples.at(-1)?.observedAt || 'empty';
-  return <span className="client-device-traffic-chart" role="img" aria-label={`История трафика, шкала ${scale === 'log' ? 'логарифмическая' : 'линейная'}, максимум ${formatByteString(max)}`}>
-    <span className="client-device-traffic-track" key={latest} style={{ '--sample-count': Math.max(1, capacity) }}>
-      {samples.map((sample, index) => {
+  const firstSlot = capacity - samples.length;
+  const points = samples.map((sample, index) => {
     const gateway = byteString(sample.gatewayBytes);
     const proxy = byteString(sample.proxyBytes);
-        const total = gateway + proxy;
-        const time = chartTime(sample.observedAt);
-        const slot = capacity - samples.length + index;
-        const edge = slot < 28 ? ' is-edge-left' : slot >= capacity - 28 ? ' is-edge-right' : '';
-        const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max, scale);
-        const newest = index === samples.length - 1;
-        return <i
-          className={`client-device-traffic-bar${edge}${newest ? ' is-new' : ''}`}
-          key={`${sample.observedAt}-${index}`}
-          style={{ height: `${height}%`, gridColumnStart: slot + 1 }}
+    return {
+      sample,
+      x: (firstSlot + index) * 100 / Math.max(1, capacity - 1),
+      gateway,
+      proxy,
+      gatewayY: 100 - trafficScaleRatio(gateway, max, scale) * 100,
+      proxyY: 100 - trafficScaleRatio(proxy, max, scale) * 100,
+    };
+  });
+  const previous = points.slice(0, -1);
+  const penultimate = points.at(-2);
+  const newest = points.at(-1);
+  const hasProxy = points.some(({ proxy }) => proxy > 0n);
+
+  function trackPointer(event) {
+    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%)',
+      }}
     >
-          <span className="client-device-traffic-bar-fill" aria-hidden="true">
-            <span className="is-gateway" style={{ height: `${gatewayShare}%` }} />
-            <span className="is-proxy" style={{ height: `${100 - gatewayShare}%` }} />
-          </span>
-          <span className="client-device-traffic-bar-tooltip" aria-hidden="true">
-            <time dateTime={sample.observedAt}>{time}</time>
-            <strong>Всего {formatByteString(total)}</strong>
-            <span>{routeLabel} {formatByteString(gateway)}</span>
-            {proxy > 0n && <span className="is-proxy">Proxy {formatByteString(proxy)}</span>}
-          </span>
-        </i>;
-      })}
-    </span>
-    {max > 0n && <span className="client-device-traffic-axis" aria-hidden="true">
+      <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)}`}>
+    {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="0" y2="0" />
+          <line x1="0" x2="100" y1="50" y2="50" />
+          <line x1="0" x2="100" y1="100" y2="100" />
+        </g>}
+        <g key={latest} className="client-device-traffic-lines" style={{ '--sample-count': Math.max(1, capacity) }}>
+          {previous.length > 0 && <polyline className="is-gateway" points={previous.map(({ x, gatewayY }) => `${x},${gatewayY}`).join(' ')} />}
+          {hasProxy && previous.length > 0 && <polyline className="is-proxy" points={previous.map(({ x, proxyY }) => `${x},${proxyY}`).join(' ')} />}
+          {penultimate && newest && <line className="is-gateway is-new" pathLength="1" x1={penultimate.x} y1={penultimate.gatewayY} x2={newest.x} y2={newest.gatewayY} />}
+          {hasProxy && penultimate && newest && <line className="is-proxy is-new" pathLength="1" x1={penultimate.x} y1={penultimate.proxyY} x2={newest.x} y2={newest.proxyY} />}
+          {!penultimate && newest && <circle className="is-gateway is-new" cx={newest.x} cy={newest.gatewayY} r="1.5" />}
+        </g>
+        {hovered && <g className="client-device-traffic-cursor">
+          <line x1={hovered.x} x2={hovered.x} y1="0" y2="100" />
+          <circle className="is-gateway" cx={hovered.x} cy={hovered.gatewayY} r="2" />
+          {hovered.proxy > 0n && <circle className="is-proxy" cx={hovered.x} cy={hovered.proxyY} r="2" />}
+        </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.at(-1).observedAt}>{chartTime(samples.at(-1).observedAt)}</time>
     </span>}
+    {tooltip}
   </span>;
 }
 
@@ -110,8 +153,16 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const previousTraffic = useRef(new Map());
   const copyTimer = useRef(null);
   const trafficDeltaTimer = useRef(null);
+  const trafficOrder = useRef({ direction: sortDirection, ids: [] });
   const devices = useMemo(
-    () => sortDevicesByTraffic(snapshot?.devices, sortDirection),
+    () => {
+      const previousIds = trafficOrder.current.direction === sortDirection
+        ? trafficOrder.current.ids
+        : [];
+      const result = stabilizeDevicesByTraffic(snapshot?.devices, sortDirection, previousIds);
+      trafficOrder.current = { direction: sortDirection, ids: result.ids };
+      return result.devices;
+    },
     [snapshot?.devices, sortDirection],
   );
 
@@ -384,6 +435,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
         </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;
@@ -459,13 +511,13 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   <>
                     {device.ip ? <h3 className="client-device-name-heading">
                       <button
-                        className={`client-device-name${copied ? copyFeedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
+                        className={`client-device-name${hasName ? '' : ' is-address-only'}${copied ? copyFeedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
                         type="button"
                         aria-label={`Скопировать IP ${device.ip} устройства ${title}`}
                         onClick={() => copyDeviceIp(device)}
                       >
                         <span className="client-device-name-primary">{title}</span>
-                        <span className="client-device-name-ip" aria-hidden="true">{device.ip}</span>
+                        {hasName && <span className="client-device-name-ip" aria-hidden="true">{device.ip}</span>}
                         <span className="client-device-name-feedback" aria-hidden="true">
                           {copied && copyFeedback.failed ? 'Ошибка' : 'copied!'}
                         </span>
@@ -538,6 +590,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 scale={trafficScale}
                 capacity={snapshot.trafficHistoryCapacity || device.trafficHistory?.length || 1}
                 routeLabel={device.appliedPolicy === 'direct' ? 'Напрямую' : 'Gateway'}
+                pinned={device.pinned}
               />
             </article>;
           })}

src/web/styles.css

@@ -945,7 +945,7 @@ p {
   min-width: 0;
   display: flex;
   align-items: flex-end;
-  gap: 8px;
+  gap: 2px;
   padding-top: 11px;
 }
 
@@ -1002,15 +1002,15 @@ p {
   transform: translateY(0) scale(1);
 }
 
-.client-device-name:hover .client-device-name-primary,
-.client-device-name:focus-visible .client-device-name-primary {
+.client-device-name:not(.is-address-only):hover .client-device-name-primary,
+.client-device-name:not(.is-address-only):focus-visible .client-device-name-primary {
   opacity: 0;
   filter: blur(8px);
   transform: translateY(-0.18em) scale(1.04);
 }
 
-.client-device-name:hover .client-device-name-ip,
-.client-device-name:focus-visible .client-device-name-ip {
+.client-device-name:not(.is-address-only):hover .client-device-name-ip,
+.client-device-name:not(.is-address-only):focus-visible .client-device-name-ip {
   opacity: 1;
   filter: blur(0);
   transform: translateY(0) scale(1);
@@ -1062,10 +1062,11 @@ p {
 
 .client-device-edit-wrap {
   flex: 0 0 auto;
+  width: 23px;
   height: 23px;
   align-self: flex-end;
   opacity: 0.34;
-  transition: opacity 180ms ease;
+  transition: opacity 180ms ease, filter 240ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-device:hover .client-device-edit-wrap,
@@ -1073,6 +1074,14 @@ p {
   opacity: 1;
 }
 
+.client-device-name-heading:has(.client-device-name:not(.is-address-only):hover) + .client-device-edit-wrap,
+.client-device-name-heading:has(.client-device-name:not(.is-address-only):focus-visible) + .client-device-edit-wrap {
+  opacity: 0;
+  filter: blur(5px);
+  pointer-events: none;
+  transform: translateX(-4px);
+}
+
 .client-device-pin-wrap {
   grid-column: 1;
   grid-row: 1;
@@ -1090,7 +1099,7 @@ p {
 }
 
 .client-device-edit {
-  width: 26px;
+  width: 23px;
   height: 23px;
 }
 
@@ -1363,104 +1372,35 @@ p {
   height: var(--client-device-chart-height);
   position: relative;
   z-index: 4;
+  display: grid;
+  grid-template-columns: 0 minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) 14px;
   overflow: visible;
 }
 
-.client-device-traffic-chart:has(.client-device-traffic-bar:hover) {
-  z-index: 7;
-}
-
 .client-device.is-pinned .client-device-traffic-chart {
+  grid-template-columns: 52px minmax(0, 1fr);
+  column-gap: 5px;
   transform-origin: bottom center;
   animation: client-device-chart-expand 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-.client-device-traffic-chart::after {
-  position: absolute;
-  right: 0;
-  bottom: 13px;
-  left: 0;
-  height: 1px;
-  background: color-mix(in oklch, var(--client-border) 58%, transparent);
-  content: '';
-}
-
-.client-device-traffic-track {
-  position: absolute;
-  inset: 0 3px 14px;
-  display: grid;
-  grid-template-columns: repeat(var(--sample-count), minmax(1px, 1fr));
-  align-items: flex-end;
-  gap: 0;
-  animation: client-device-traffic-shift 560ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.client-device-traffic-bar {
-  position: relative;
-  min-height: 2px;
-  cursor: help;
-}
-
-.client-device-traffic-bar:hover {
-  z-index: 10;
-}
-
-.client-device-traffic-time {
-  position: absolute;
-  right: 2px;
-  bottom: 0;
-  left: 2px;
-  z-index: 2;
-  display: flex;
-  justify-content: space-between;
-  color: color-mix(in oklch, var(--client-text) 46%, var(--client-muted));
-  font-size: 8.5px;
-  line-height: 10px;
-  text-shadow: 0 1px 5px var(--client-bg);
-}
-
-.client-device-traffic-bar-fill {
-  position: absolute;
-  inset: 0 -2px;
-  display: flex;
-  overflow: hidden;
-  border-radius: 3px 3px 0 0;
-  flex-direction: column-reverse;
-}
-
-.client-device-traffic-bar.is-new .client-device-traffic-bar-fill {
-  transform-origin: bottom center;
-  animation: client-device-traffic-grow 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
 .client-device-traffic-axis {
-  position: absolute;
-  inset: 0 auto 14px 2px;
+  grid-column: 1;
+  grid-row: 1;
+  position: relative;
   z-index: 3;
-  width: 1px;
   color: color-mix(in oklch, var(--client-text) 62%, var(--client-muted));
   font: 700 7.5px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
   pointer-events: none;
-  text-shadow: 0 0 3px var(--client-bg), 0 0 7px var(--client-bg);
 }
 
 .client-device-traffic-axis > span {
   position: absolute;
-  left: 0;
-  display: flex;
-  align-items: center;
-  gap: 3px;
+  right: 0;
   white-space: nowrap;
 }
 
-.client-device-traffic-axis > span::before {
-  width: 5px;
-  height: 1px;
-  flex: 0 0 5px;
-  background: currentColor;
-  content: '';
-}
-
 .client-device-traffic-axis > .is-max {
   top: 0;
 }
@@ -1474,24 +1414,96 @@ p {
   bottom: 0;
 }
 
-.client-device-traffic-bar-fill > span {
+.client-device-traffic-plot {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  min-width: 0;
+  cursor: crosshair;
+}
+
+.client-device.is-pinned .client-device-traffic-plot {
+  grid-column: 2;
+}
+
+.client-device-traffic-plot svg {
   width: 100%;
+  height: 100%;
   display: block;
+  overflow: visible;
 }
 
-.client-device-traffic-bar-fill > .is-gateway {
-  background: color-mix(in oklch, var(--client-text) 58%, var(--client-muted));
+.client-device-traffic-grid line {
+  stroke: color-mix(in oklch, var(--client-border) 60%, transparent);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
 }
 
-.client-device-traffic-bar-fill > .is-proxy {
-  background: var(--client-accent);
+.client-device-traffic-lines {
+  transform-box: view-box;
+  animation: client-device-traffic-shift 560ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-device-traffic-bar-tooltip {
-  position: absolute;
-  bottom: calc(100% + 7px);
-  left: 50%;
-  z-index: 20;
+.client-device-traffic-lines polyline,
+.client-device-traffic-lines line {
+  fill: none;
+  stroke: color-mix(in oklch, var(--client-text) 72%, var(--client-muted));
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.client-device-traffic-lines .is-proxy {
+  stroke: var(--client-accent);
+}
+
+.client-device-traffic-lines line.is-new {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: client-device-traffic-line-draw 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.client-device-traffic-lines circle {
+  fill: color-mix(in oklch, var(--client-text) 72%, var(--client-muted));
+  vector-effect: non-scaling-stroke;
+}
+
+.client-device-traffic-cursor line {
+  stroke: color-mix(in oklch, var(--client-text) 38%, transparent);
+  stroke-width: 1;
+  stroke-dasharray: 2 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.client-device-traffic-cursor circle {
+  fill: var(--client-bg);
+  stroke: color-mix(in oklch, var(--client-text) 82%, var(--client-muted));
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.client-device-traffic-cursor circle.is-proxy {
+  stroke: var(--client-accent);
+}
+
+.client-device-traffic-time {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  color: color-mix(in oklch, var(--client-text) 46%, var(--client-muted));
+  font-size: 8.5px;
+  line-height: 10px;
+}
+
+.client-device.is-pinned .client-device-traffic-time {
+  grid-column: 2;
+}
+
+.client-device-traffic-point-tooltip {
+  position: fixed;
+  z-index: 1002;
   width: max-content;
   display: grid;
   gap: 3px;
@@ -1502,63 +1514,35 @@ p {
   color: oklch(0.92 0.008 145);
   font: 600 9px/1.25 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
   white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  filter: blur(3px);
   pointer-events: none;
-  transform: translate(-50%, 4px);
-  transition: opacity 100ms ease, filter 140ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 180ms;
+  animation: client-device-traffic-tooltip-in 140ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-.client-device-traffic-bar-tooltip time {
+.client-device-traffic-point-tooltip time {
   color: oklch(0.68 0.012 145);
   font-size: 8px;
 }
 
-.client-device-traffic-bar-tooltip strong {
+.client-device-traffic-point-tooltip strong {
   color: oklch(0.98 0.006 145);
   font-size: 10px;
 }
 
-.client-device-traffic-bar-tooltip .is-proxy {
+.client-device-traffic-point-tooltip .is-proxy {
   color: var(--client-accent);
 }
 
-.client-device-traffic-bar:hover .client-device-traffic-bar-tooltip {
-  opacity: 1;
-  visibility: visible;
-  filter: blur(0);
-  transform: translate(-50%, 0);
-  transition-delay: 0s;
-}
-
-.client-device-traffic-bar.is-edge-left .client-device-traffic-bar-tooltip {
-  left: 0;
-  transform: translate(0, 4px);
-}
-
-.client-device-traffic-bar.is-edge-left:hover .client-device-traffic-bar-tooltip {
-  transform: translate(0, 0);
-}
-
-.client-device-traffic-bar.is-edge-right .client-device-traffic-bar-tooltip {
-  right: 0;
-  left: auto;
-  transform: translate(0, 4px);
-}
-
-.client-device-traffic-bar.is-edge-right:hover .client-device-traffic-bar-tooltip {
-  transform: translate(0, 0);
-}
-
 @keyframes client-device-traffic-shift {
   from { opacity: 0.72; transform: translateX(calc(100% / var(--sample-count))); }
   to { opacity: 1; transform: translateX(0); }
 }
 
-@keyframes client-device-traffic-grow {
-  from { opacity: 0; transform: scaleY(0); }
-  to { opacity: 1; transform: scaleY(1); }
+@keyframes client-device-traffic-line-draw {
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes client-device-traffic-tooltip-in {
+  from { opacity: 0; filter: blur(3px); }
 }
 
 @keyframes client-device-chart-expand {
@@ -4582,6 +4566,224 @@ p {
 
 }
 
+.client-instructions.client-diagnostics {
+  width: min(580px, 100vw);
+}
+
+.client-diagnostics-header {
+  margin-bottom: 26px;
+}
+
+.client-diagnostics-run {
+  min-width: 190px;
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  margin: 0 8px 26px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--client-accent);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: color 220ms ease, filter 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-diagnostics-run svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.client-diagnostics-run:hover:not(:disabled),
+.client-diagnostics-run:focus-visible {
+  outline: 0;
+  filter: drop-shadow(0 0 8px color-mix(in oklch, var(--client-accent) 48%, transparent));
+  transform: translateY(-1px);
+}
+
+.client-diagnostics-run.is-running svg {
+  animation: client-spin 900ms linear infinite;
+}
+
+.client-diagnostics-run:disabled {
+  cursor: wait;
+}
+
+.client-diagnostics-empty,
+.client-diagnostics-error {
+  min-height: 56px;
+  margin: 0 8px;
+  color: var(--client-muted);
+  font-size: 10px;
+  line-height: 1.65;
+}
+
+.client-diagnostics-error {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: oklch(0.68 0.15 28);
+}
+
+.client-diagnostics-error button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.client-diagnostics-results {
+  display: grid;
+  gap: 6px;
+  margin: 0 8px;
+  opacity: 1;
+  transition: opacity 220ms ease, filter 320ms ease;
+}
+
+.client-diagnostics-results[aria-busy='true'] {
+  opacity: 0.58;
+  filter: saturate(0.7);
+}
+
+.client-diagnostics-grid {
+  min-height: 52px;
+  display: grid;
+  grid-template-columns: minmax(96px, 0.75fr) repeat(2, minmax(0, 1fr));
+  align-items: center;
+  gap: 14px;
+  padding: 7px 10px;
+  border-radius: 12px;
+  background: color-mix(in oklch, var(--client-panel) 48%, transparent);
+}
+
+.client-diagnostics-grid-head {
+  min-height: 32px;
+  padding-block: 0;
+  background: transparent;
+}
+
+.client-diagnostics-grid > strong,
+.client-diagnostics-grid-head > strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--client-muted);
+  font-size: 9px;
+  letter-spacing: 0.05em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.client-diagnostics-grid > code,
+.client-diagnostics-status {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--client-text);
+  font: 600 10px/1.45 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+}
+
+.client-diagnostics-status.is-good,
+.client-diagnostics-summary.is-good {
+  color: var(--client-accent);
+}
+
+.client-diagnostics-status.is-warning,
+.client-diagnostics-summary.is-warning {
+  color: oklch(0.68 0.14 72);
+}
+
+.client-diagnostics-status.is-error,
+.client-diagnostics-summary.is-error {
+  color: oklch(0.68 0.15 28);
+}
+
+.client-diagnostics-status.is-muted,
+.client-diagnostics-summary.is-muted {
+  color: var(--client-muted);
+}
+
+.client-diagnostics-summary {
+  min-height: 46px;
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.55;
+}
+
+.client-diagnostics-time {
+  color: var(--client-muted);
+  font-size: 9px;
+}
+
+.client-diagnostics-details {
+  margin-top: 12px;
+  color: var(--client-muted);
+  font-size: 9px;
+}
+
+.client-diagnostics-details summary {
+  width: fit-content;
+  padding: 6px 0;
+  color: var(--client-text);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.client-diagnostics-details summary:focus-visible {
+  outline: 2px solid var(--client-accent);
+  outline-offset: 2px;
+}
+
+.client-diagnostics-details > div {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  padding-top: 10px;
+}
+
+.client-diagnostics-details section {
+  min-width: 0;
+  display: grid;
+  gap: 5px;
+}
+
+.client-diagnostics-details p {
+  overflow-wrap: anywhere;
+  line-height: 1.55;
+}
+
+@media (max-width: 560px) {
+  .client-diagnostics-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 6px 12px;
+  }
+
+  .client-diagnostics-grid > strong:first-child,
+  .client-diagnostics-grid-head > span:first-child {
+    grid-column: 1 / -1;
+  }
+
+  .client-diagnostics-grid-head {
+    min-height: 42px;
+  }
+
+  .client-diagnostics-details > div {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .client-inline-error.is-subscription > *,
   .client-operation-progress::before,
@@ -4637,10 +4839,9 @@ p {
   .client-device-traffic-value > span,
   .client-device-traffic-breakdown,
   .client-device-traffic-breakdown > span,
-  .client-device-traffic-bar-tooltip,
-  .client-device-traffic-bar-fill,
+  .client-device-traffic-lines,
+  .client-device-traffic-point-tooltip,
   .client-device-traffic-chart,
-  .client-device-traffic-track,
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,
@@ -4660,6 +4861,13 @@ p {
     animation: none;
   }
 
+  .client-diagnostics-run,
+  .client-diagnostics-run svg,
+  .client-diagnostics-results {
+    transition: none;
+    animation: none;
+  }
+
   .client-devices-refresh-ring circle {
     stroke-dashoffset: 0;
   }

src/web/utils/format.js

@@ -37,18 +37,13 @@ export function positiveByteDelta(previous, current) {
   return after > before ? formatByteString((after - before).toString()) : '';
 }
 
-export function trafficSampleMetrics(gatewayValue, proxyValue, maxValue, scale = 'linear') {
-  const gateway = byteString(gatewayValue);
-  const proxy = byteString(proxyValue);
-  const total = gateway + proxy;
+export function trafficScaleRatio(value, maxValue, scale = 'linear') {
+  const current = byteString(value);
   const max = byteString(maxValue);
-  const ratio = scale === 'log'
-    ? Math.log1p(Number(total)) / Math.log1p(Number(max))
-    : Number(total * 100n / (max || 1n)) / 100;
-  return {
-    height: max && total ? Math.max(10, Math.min(100, Math.round(ratio * 100))) : 0,
-    gatewayShare: total ? Number(gateway * 100n / total) : 0,
-  };
+  if (!current || !max) return 0;
+  return scale === 'log'
+    ? Math.log1p(Number(current)) / Math.log1p(Number(max))
+    : Number(current * 10_000n / max) / 10_000;
 }
 
 export function trafficAxisMid(maxValue, scale = 'linear') {
@@ -77,6 +72,21 @@ export function sortDevicesByTraffic(devices, direction = 'desc') {
     .map(({ device }) => device);
 }
 
+export function stabilizeDevicesByTraffic(devices, direction, previousIds = []) {
+  const ranked = sortDevicesByTraffic(devices, direction);
+  const byId = new Map(ranked.map((device) => [device.id, device]));
+  const ids = previousIds.filter((id) => byId.has(id));
+  const seen = new Set(ids);
+  for (const { id } of ranked) {
+    if (seen.has(id)) continue;
+    ids.push(id);
+    seen.add(id);
+  }
+  const ordered = ids.map((id) => byId.get(id));
+  const stable = [...ordered.filter(({ pinned }) => pinned), ...ordered.filter(({ pinned }) => !pinned)];
+  return { devices: stable, ids: stable.map(({ id }) => id) };
+}
+
 export function formatRelative(iso) {
   if (!iso) return "";
   const ts = new Date(iso).getTime();

test/server/connectivity-diagnostics.test.js

@@ -0,0 +1,116 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+  createConnectivityDiagnosticsService,
+  CURL_META_MARKER,
+} from '../../src/server/services/connectivityDiagnosticsService.js';
+
+function response(body = '', overrides = {}) {
+  return {
+    exitCode: 0,
+    error: '',
+    stderr: '',
+    stdout: `${body}${CURL_META_MARKER}${JSON.stringify({
+      exitcode: 0,
+      http_code: 204,
+      time_starttransfer: 0.12,
+      time_total: 0.15,
+      ...overrides,
+    })}`,
+  };
+}
+
+test('connectivity diagnostics force separate direct and VPN paths', async () => {
+  const calls = [];
+  const execute = async (args) => {
+    calls.push(args);
+    const vpn = args.includes('--proxy');
+    const url = args.at(-1);
+    if (url.includes('cloudflare')) return response(`ip=${vpn ? '203.0.113.20' : '198.51.100.10'}\n`);
+    if (url.includes('api6')) return response(vpn ? '2001:db8::20' : '2001:db8::10');
+    if (url.includes('ipify')) return response(vpn ? '203.0.113.20' : '198.51.100.10');
+    return response();
+  };
+  const service = createConnectivityDiagnosticsService({
+    proxyPort: 18080,
+    execute,
+    now: () => '2026-08-07T12:00:00.000Z',
+  });
+
+  const result = await service.run({ vpnAvailable: true });
+
+  assert.deepEqual(result.direct.ipv4.addresses, ['198.51.100.10']);
+  assert.deepEqual(result.vpn.ipv4.addresses, ['203.0.113.20']);
+  assert.equal(result.direct.ipv6, '2001:db8::10');
+  assert.equal(result.vpn.ipv6, '2001:db8::20');
+  assert.equal(result.assessment.summary, 'available');
+  assert.ok(calls.some((args) => args.includes('--noproxy') && args.includes('*')));
+  assert.ok(calls.some((args) => args.includes('--proxy') && args.includes('http://127.0.0.1:18080')));
+});
+
+test('connectivity diagnostics reports a likely direct restriction without claiming its owner', async () => {
+  const attempts = new Map();
+  const execute = async (args) => {
+    const vpn = args.includes('--proxy');
+    const url = args.at(-1);
+    if (url.includes('cloudflare')) return response(`ip=${vpn ? '203.0.113.20' : '198.51.100.10'}\n`);
+    if (url.includes('api6')) return response('', { exitcode: 6, http_code: 0, errormsg: 'resolve failed' });
+    if (url.includes('ipify')) return response(vpn ? '203.0.113.20' : '198.51.100.10');
+    const key = `${vpn}:${url}`;
+    attempts.set(key, (attempts.get(key) || 0) + 1);
+    if (!vpn && url.includes('youtube')) {
+      return response('', { exitcode: 28, http_code: 0, errormsg: 'timeout' });
+    }
+    return response();
+  };
+  const result = await createConnectivityDiagnosticsService({ proxyPort: 18080, execute })
+    .run({ vpnAvailable: true });
+
+  assert.equal(result.assessment.summary, 'likely-direct-restriction');
+  assert.equal(
+    result.assessment.comparisons.find((item) => item.id === 'youtube').assessment,
+    'likely-direct-restriction',
+  );
+  assert.equal(attempts.get('false:https://www.youtube.com/generate_204'), 2);
+});
+
+test('connectivity diagnostics skips VPN probes when sing-box is off', async () => {
+  const calls = [];
+  const execute = async (args) => {
+    calls.push(args);
+    const url = args.at(-1);
+    if (url.includes('cloudflare')) return response('ip=198.51.100.10\n');
+    if (url.includes('api6')) return response('', { exitcode: 6, http_code: 0, errormsg: 'resolve failed' });
+    if (url.includes('ipify')) return response('198.51.100.10');
+    return response();
+  };
+  const result = await createConnectivityDiagnosticsService({ proxyPort: 18080, execute })
+    .run({ vpnAvailable: false });
+
+  assert.equal(result.vpn.available, false);
+  assert.equal(result.assessment.summary, 'vpn-off');
+  assert.equal(calls.some((args) => args.includes('--proxy')), false);
+});
+
+test('connectivity diagnostics keeps a partial snapshot and falls back when one IP source fails', async () => {
+  const execute = async (args) => {
+    const url = args.at(-1);
+    if (url.includes('cloudflare')) {
+      return response('', { exitcode: 28, http_code: 0, errormsg: 'timeout' });
+    }
+    if (url.includes('api6')) return response('', { exitcode: 6, http_code: 0, errormsg: 'resolve failed' });
+    if (url.includes('ipify')) return response('198.51.100.10');
+    if (url.includes('amazonaws')) return response('198.51.100.10');
+    return response();
+  };
+  const result = await createConnectivityDiagnosticsService({ proxyPort: 18080, execute })
+    .run({ vpnAvailable: false });
+
+  assert.equal(result.direct.internetAvailable, true);
+  assert.deepEqual(result.direct.ipv4.addresses, ['198.51.100.10']);
+  assert.deepEqual(result.direct.ipv4.sources.map((source) => source.source), [
+    'cloudflare',
+    'ipify',
+    'aws',
+  ]);
+});

test/server/dataplane-client.test.js

@@ -26,6 +26,7 @@ test('control uses the dataplane socket protocol', async () => {
   assert.equal(traffic.running, true);
   await client.observeDevicePolicy();
   await client.applyDevicePolicies([{ id: 'dev_0011223344556677' }]);
+  await client.runConnectivityDiagnostics();
   assert.equal(client.running, true);
   await client.restart();
   assert.equal((await client.stop()).running, false);
@@ -36,6 +37,7 @@ test('control uses the dataplane socket protocol', async () => {
     'GET /device-traffic /run/dataplane.sock',
     'GET /device-policy /run/dataplane.sock',
     'PUT /device-policy /run/dataplane.sock',
+    'POST /diagnostics/connectivity /run/dataplane.sock',
     'POST /restart /run/dataplane.sock',
     'POST /stop /run/dataplane.sock',
   ]);

test/server/singbox-gateway-mode.test.js

@@ -27,7 +27,21 @@ test('gateway routes .ru domains directly and other traffic through the selected
   });
 
   assert.deepEqual(config.route.rule_set, []);
+  assert.deepEqual(config.inbounds.map((inbound) => inbound.tag), [
+    'tproxy-in',
+    'mixed-in',
+    'diagnostics-vpn-in',
+  ]);
+  assert.deepEqual(config.inbounds[2], {
+    type: 'mixed',
+    tag: 'diagnostics-vpn-in',
+    listen: '127.0.0.1',
+    listen_port: 18080,
+    sniff: true,
+    set_system_proxy: false,
+  });
   assert.deepEqual(config.route.rules, [
+    { inbound: ['diagnostics-vpn-in'], outbound: 'test-vpn' },
     { domain_suffix: ['ru'], outbound: 'direct' },
     { inbound: ['tproxy-in'], outbound: 'test-vpn' },
     { inbound: ['mixed-in'], outbound: 'test-vpn' },

test/web/device-inventory-contract.test.js

@@ -8,8 +8,9 @@ import {
   formatLastSeen,
   positiveByteDelta,
   sortDevicesByTraffic,
+  stabilizeDevicesByTraffic,
   trafficAxisMid,
-  trafficSampleMetrics,
+  trafficScaleRatio,
 } from '../../src/web/utils/format.js';
 
 const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
@@ -34,7 +35,9 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(server, /\/api\\\/devices\\\/\(dev_\[a-f0-9\]\{16\}\)\\\/policy\$[\s\S]*deviceInventory\.setPolicy/);
   assert.match(panel, /<Tooltip>Изменить название<\/Tooltip>/);
   assert.match(panel, /copyText\(device\.ip\)/);
-  assert.match(panel, /client-device-name-primary[\s\S]*client-device-name-ip[\s\S]*client-device-name-feedback/);
+  assert.match(panel, /const hasName = Boolean\(device\.alias \|\| device\.hostname\)/);
+  assert.match(panel, /client-device-name\$\{hasName \? '' : ' is-address-only'\}/);
+  assert.match(panel, /client-device-name-primary[\s\S]*\{hasName && <span className="client-device-name-ip"[\s\S]*client-device-name-feedback/);
   assert.match(panel, /client-device-name-feedback[\s\S]*'copied!'/);
   assert.match(panel, /COPY_FEEDBACK_MS = 5_000/);
   assert.match(panel, /client-device-name-feedback[\s\S]*client-device-edit-wrap[\s\S]*client-device-last-seen/);
@@ -48,7 +51,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.doesNotMatch(panel, /device\.mac/);
   assert.doesNotMatch(panel, /client-device-identity|Пояснение идентификации устройства|ⓘ/);
   assert.match(panel, /device\.confidence === 'ambiguous'/);
-  assert.match(panel, /sortDevicesByTraffic\(snapshot\?\.devices, sortDirection\)/);
+  assert.match(panel, /stabilizeDevicesByTraffic\(snapshot\?\.devices, sortDirection, previousIds\)/);
   assert.match(panel, /Трафик временно не обновляется/);
   assert.match(panel, /Учитывается только трафик, который прошёл через Harbor/);
   assert.match(panel, /client-device-traffic-total[\s\S]*<b>Всего<\/b><TrafficValue value=\{totalTraffic\} delta=\{trafficDelta\.total\}/);
@@ -58,10 +61,12 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /TrafficChart[\s\S]*samples=\{device\.trafficHistory \|\| \[\]\}[\s\S]*scale=\{trafficScale\}[\s\S]*capacity=\{snapshot\.trafficHistoryCapacity/);
   assert.doesNotMatch(panel, /setTrafficHistory|TRAFFIC_HISTORY_LIMIT/);
   assert.match(panel, /aria-pressed=\{trafficScale === 'linear'\}[\s\S]*aria-pressed=\{trafficScale === 'log'\}/);
-  assert.match(panel, /client-device-traffic-bar-tooltip[\s\S]*<time dateTime=\{sample\.observedAt\}>\{time\}<\/time>[\s\S]*<strong>Всего \{formatByteString\(total\)\}<\/strong>/);
-  assert.match(panel, /trafficAxisMid\(max, scale\)[\s\S]*client-device-traffic-axis[\s\S]*is-max[\s\S]*is-mid[\s\S]*is-zero/);
+  assert.match(panel, /createPortal\([\s\S]*client-device-traffic-point-tooltip[\s\S]*document\.body/);
+  assert.match(panel, /onPointerMove=\{trackPointer\}/);
+  assert.match(panel, /pinned && max > 0n && <span className="client-device-traffic-axis"[\s\S]*is-max[\s\S]*is-mid[\s\S]*is-zero/);
+  assert.match(panel, /client-device-traffic-grid[\s\S]*polyline className="is-gateway"[\s\S]*polyline className="is-proxy"/);
   assert.match(panel, /routeLabel=\{device\.appliedPolicy === 'direct' \? 'Напрямую' : 'Gateway'\}/);
-  assert.match(panel, /\{proxy > 0n && <span className="is-proxy">Proxy \{formatByteString\(proxy\)\}<\/span>\}/);
+  assert.match(panel, /\{hovered\.proxy > 0n && <span className="is-proxy">Proxy \{formatByteString\(hovered\.proxy\)\}<\/span>\}/);
   assert.match(panel, /<time dateTime=\{samples\[0\]\.observedAt\}>[\s\S]*<span>15 с<\/span>/);
   assert.match(panel, /positiveByteDelta\(previous\.gateway, gateway\)[\s\S]*positiveByteDelta\(previous\.proxy, proxy\)/);
   assert.match(panel, /setTimeout\(\(\) => setTrafficDeltas\(\{\}\), TRAFFIC_DELTA_MS\)/);
@@ -88,13 +93,12 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-traffic-breakdown > span \{[\s\S]*translateY\(-12px\)[\s\S]*\.client-device-traffic:hover \.client-device-traffic-breakdown > span,[\s\S]*opacity: 1[\s\S]*translateY\(0\)/);
   assert.doesNotMatch(styles, /\.client-device-traffic-breakdown \{[^}]*background:|\.client-device-traffic-breakdown \{[^}]*box-shadow:/);
   assert.match(styles, /\.client-device-traffic-chart \{[\s\S]*grid-column: 2 \/ 4;[\s\S]*grid-row: 2/);
-  assert.match(styles, /\.client-device-traffic-track \{[\s\S]*client-device-traffic-shift 560ms/);
-  assert.match(styles, /\.client-device-traffic-track \{[^}]*gap: 0/);
-  assert.match(styles, /\.client-device-traffic-bar-fill \{[\s\S]*inset: 0 -2px/);
-  assert.match(styles, /\.client-device-traffic-bar:hover \.client-device-traffic-bar-tooltip \{[\s\S]*opacity: 1[\s\S]*visibility: visible/);
-  assert.match(styles, /\.client-device-traffic-bar\.is-edge-left[\s\S]*\.client-device-traffic-bar\.is-edge-right/);
+  assert.match(styles, /\.client-device\.is-pinned \.client-device-traffic-chart \{[\s\S]*grid-template-columns: 52px minmax\(0, 1fr\)/);
+  assert.match(styles, /\.client-device-traffic-grid line \{[\s\S]*vector-effect: non-scaling-stroke/);
+  assert.match(styles, /\.client-device-traffic-lines polyline,[\s\S]*stroke-width: 1\.8/);
+  assert.match(styles, /\.client-device-traffic-point-tooltip \{[\s\S]*position: fixed;[\s\S]*z-index: 1002/);
   assert.match(styles, /@keyframes client-device-traffic-shift[\s\S]*translateX\(calc\(100% \/ var\(--sample-count\)\)\)[\s\S]*translateX\(0\)/);
-  assert.match(styles, /@keyframes client-device-traffic-grow[\s\S]*scaleY\(0\)[\s\S]*scaleY\(1\)/);
+  assert.match(styles, /@keyframes client-device-traffic-line-draw[\s\S]*stroke-dashoffset: 0/);
   assert.match(styles, /@keyframes client-device-chart-expand[\s\S]*clip-path: inset\(calc\(100% - 34px\) 0 0\)[\s\S]*scaleY\(1\)/);
   assert.match(styles, /\.client-device-policy \{[\s\S]*width: 34px;[\s\S]*border-radius: 50%/);
   assert.match(styles, /\.client-device-name \{[\s\S]*font: 700 14px\/1\.2/);
@@ -104,8 +108,9 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-name > span \{[^}]*opacity: 0/);
   assert.match(styles, /\.client-device-name > \.client-device-name-primary \{[^}]*opacity: 1/);
   assert.match(styles, /\.client-device-name > span \{[^}]*transition: opacity 360ms[^}]*transform 480ms/);
-  assert.match(styles, /\.client-device-name:hover \.client-device-name-primary[\s\S]*translateY\(-0\.18em\)/);
-  assert.match(styles, /\.client-device-name:hover \.client-device-name-ip[\s\S]*opacity: 1[\s\S]*translateY\(0\) scale\(1\)/);
+  assert.match(styles, /\.client-device-name:not\(\.is-address-only\):hover \.client-device-name-primary[\s\S]*translateY\(-0\.18em\)/);
+  assert.match(styles, /\.client-device-name:not\(\.is-address-only\):hover \.client-device-name-ip[\s\S]*opacity: 1[\s\S]*translateY\(0\) scale\(1\)/);
+  assert.match(styles, /\.client-device-name-heading:has\(\.client-device-name:not\(\.is-address-only\):hover\) \+ \.client-device-edit-wrap[\s\S]*opacity: 0/);
   assert.match(styles, /\.client-device-name\.is-copied \.client-device-name-feedback[\s\S]*opacity: 1/);
   assert.match(styles, /\.client-device-name-feedback \{[^}]*font-size: 9px/);
   assert.match(styles, /\.client-device-main \{[^}]*height: 34px[\s\S]*align-items: flex-end[\s\S]*padding-top: 11px/);
@@ -120,7 +125,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-edit:hover svg[\s\S]*translate\(1px, -1px\) rotate\(-4deg\)/);
   assert.match(styles, /\.client-devices-sort:hover \.client-devices-sort-icon[\s\S]*rotate\(360deg\)/);
   assert.match(styles, /\.client-devices-refresh-ring circle[\s\S]*client-devices-refresh-progress 15s/);
-  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-policy svg[\s\S]*\.client-device-name > span[\s\S]*\.client-device-traffic-value > span[\s\S]*\.client-device-traffic-breakdown[\s\S]*\.client-device-traffic-track[\s\S]*\.client-text-morph-value/);
+  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-policy svg[\s\S]*\.client-device-name > span[\s\S]*\.client-device-traffic-value > span[\s\S]*\.client-device-traffic-breakdown[\s\S]*\.client-device-traffic-lines[\s\S]*\.client-text-morph-value/);
   assert.match(styles, /\.client-drawer \{[\s\S]*z-index: 50;[\s\S]*box-shadow:/);
   assert.match(styles, /\.harbor-versions \{[\s\S]*z-index: 40/);
 });
@@ -145,10 +150,8 @@ test('device traffic formatting and sorting preserve uint64 precision and canoni
   assert.equal(positiveByteDelta('1048576', '3145728'), '2,0 МБ');
   assert.equal(positiveByteDelta('3145728', '3145728'), '');
   assert.equal(positiveByteDelta('3145728', '1048576'), '');
-  assert.deepEqual(trafficSampleMetrics('75', '25', '200'), { height: 50, gatewayShare: 75 });
-  assert.deepEqual(trafficSampleMetrics('1', '0', '1000'), { height: 10, gatewayShare: 100 });
-  assert.deepEqual(trafficSampleMetrics('0', '0', '0'), { height: 0, gatewayShare: 0 });
-  assert.deepEqual(trafficSampleMetrics('10', '0', '100', 'log'), { height: 52, gatewayShare: 100 });
+  assert.equal(trafficScaleRatio('50', '100', 'linear'), 0.5);
+  assert.equal(Math.round(trafficScaleRatio('9', '99', 'log') * 100), 50);
   assert.equal(trafficAxisMid('100', 'linear'), 50n);
   assert.equal(trafficAxisMid('99', 'log'), 9n);
 
@@ -161,4 +164,18 @@ test('device traffic formatting and sorting preserve uint64 precision and canoni
   ];
   assert.deepEqual(sortDevicesByTraffic(devices, 'desc').map(({ id }) => id), ['e', 'b', 'a', 'c', 'd']);
   assert.deepEqual(sortDevicesByTraffic(devices, 'asc').map(({ id }) => id), ['e', 'c', 'd', 'a', 'b']);
+  assert.deepEqual(
+    stabilizeDevicesByTraffic([
+      { id: 'a', uploadBytes: '999' },
+      { id: 'b', uploadBytes: '1' },
+    ], 'desc', ['b', 'a']).ids,
+    ['b', 'a'],
+  );
+  assert.deepEqual(
+    stabilizeDevicesByTraffic([
+      { id: 'a', uploadBytes: '999' },
+      { id: 'b', pinned: true, uploadBytes: '1' },
+    ], 'desc', ['a', 'b']).ids,
+    ['b', 'a'],
+  );
 });

test/web/responsive-layout-contract.test.js

@@ -67,6 +67,7 @@ test('tablet and mobile regions use normal flow with viewport-safe widths', () =
   assert.match(mobile, /\.client-server-check \{[\s\S]*width:\s*44px/);
   assert.match(styles, /\.client-instructions\s*\{[\s\S]*width:\s*min\(470px, 100vw\)/);
   assert.match(styles, /\.client-local-rules\s*\{[\s\S]*width:\s*min\(480px, 100vw\)/);
+  assert.match(styles, /\.client-instructions\.client-diagnostics\s*\{[\s\S]*width:\s*min\(580px, 100vw\)/);
   assert.match(styles, /\.client-confirmation-dialog\s*\{[\s\S]*width:\s*min\(430px, calc\(100vw - 48px\)\)/);
 
   for (const viewport of [320, 390, 768]) {
@@ -87,6 +88,8 @@ test('secondary menus share one right rail and both drawers open from the right'
 
   assert.match(component, /<nav className="client-secondary-menu" aria-label="Дополнительные меню">/);
   assert.match(component, /client-instructions-toggle[\s\S]*client-local-rules-toggle/);
+  assert.match(component, /client-diagnostics-toggle/);
+  assert.match(component, /<ConnectivityDiagnosticsPanel/);
   assert.match(component, /Локальные правила недоступны: сейчас работают правила Gateway/);
   assert.match(rule('.client-secondary-menu'), /right:\s*max\(14px, env\(safe-area-inset-right\)\)/);
   assert.match(rule('.client-secondary-menu'), /display:\s*grid/);