Add Gateway connectivity diagnostics and traffic chart improvements

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';
+  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: 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%)',
+      }}
+    >
+      <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)}`}>
-    <span className="client-device-traffic-track" key={latest} style={{ '--sample-count': Math.max(1, capacity) }}>
-      {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 }}
-        >
-          <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">
+    {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();