From 08cc013def09e80c64f1195fea0b6aa18604830f Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Wed, 12 Aug 2026 23:20:25 +0300
Subject: [PATCH] Clarify device traffic route labels and update Harbor
 versions

---
 src/shared/versions.ts                     |  4 ++--
 src/web/features/devices/DevicesPanel.tsx  |  6 +++---
 src/web/features/devices/TrafficChart.tsx  | 18 ++++++++++--------
 test/web/device-inventory-contract.test.js | 10 ++++++----
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/shared/versions.ts b/src/shared/versions.ts
index def4d5f..e518e69 100644
--- a/src/shared/versions.ts
+++ b/src/shared/versions.ts
@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.25.4',
-  gatewayClient: '0.26.3',
+  macClient: '0.25.5',
+  gatewayClient: '0.26.4',
   gatewayBackend: '0.26.4',
 });
 
diff --git a/src/web/features/devices/DevicesPanel.tsx b/src/web/features/devices/DevicesPanel.tsx
index 3a1dc7a..cce43b6 100644
--- a/src/web/features/devices/DevicesPanel.tsx
+++ b/src/web/features/devices/DevicesPanel.tsx
@@ -337,7 +337,7 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
           <h2 id="client-devices-title">Устройства</h2>
           <div className="client-instructions-intro">
             <p>Устройства, которые Gateway видит в локальной таблице соседей.</p>
-            <p>Вход — накопленные Gateway/Proxy. Выход — оценка VPN/Direct с запуска текущего учёта.</p>
+            <p>Вход — накопленные Gateway/Proxy. Выход — приблизительно через VPN или Direct с запуска текущего учёта.</p>
           </div>
         </header>
 
@@ -564,8 +564,8 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
                 <span className="client-device-traffic-breakdown" aria-hidden="true">
                   {trafficView === 'outbound' ? <>
                     <span className="is-vpn"><b>VPN</b><TrafficValue value={outboundAvailable ? formatByteString(vpnTotal.toString()) : '—'} /></span>
-                    <span className="is-direct-total"><b>Direct ≈</b><TrafficValue value={outboundAvailable ? formatByteString(directTotal.toString()) : '—'} /></span>
-                    {unknownTotal > 0n && <span className="is-unknown"><b>Неизв.</b><TrafficValue value={formatByteString(unknownTotal.toString())} /></span>}
+                    <span className="is-direct-total"><b>Direct</b><TrafficValue value={outboundAvailable ? formatByteString(directTotal.toString()) : '—'} /></span>
+                    {unknownTotal > 0n && <span className="is-unknown"><b>Другое</b><TrafficValue value={formatByteString(unknownTotal.toString())} /></span>}
                   </> : <>
                     <span><b>Gateway</b><TrafficValue value={gatewayTraffic} delta={trafficDelta.gateway} /></span>
                     {hasProxyTraffic && <span className="is-proxy"><b>Прокси</b><TrafficValue value={proxyTraffic} delta={trafficDelta.proxy} /></span>}
diff --git a/src/web/features/devices/TrafficChart.tsx b/src/web/features/devices/TrafficChart.tsx
index 138108e..7a85226 100644
--- a/src/web/features/devices/TrafficChart.tsx
+++ b/src/web/features/devices/TrafficChart.tsx
@@ -225,12 +225,14 @@ export function TrafficChart({
         <span className={routeLabel === 'Gateway' ? 'is-gateway' : 'is-direct'}>{routeLabel} {formatByteString(hovered.sample.gatewayBytes)}</span>
         {byteString(hovered.sample.proxyBytes) > 0n && <span className="is-proxy">Proxy {formatByteString(hovered.sample.proxyBytes)}</span>}
       </> : series === 'outbound' ? <>
-        <strong className="is-total">Учтено ≈ {formatByteString(hovered.gateway + hovered.proxy + hovered.unknown)}</strong>
+        <strong className="is-total">Примерно {formatByteString(hovered.gateway + hovered.proxy + hovered.unknown)}</strong>
         {hovered.gateway > 0n && <span className="is-vpn">VPN {formatByteString(hovered.gateway)}</span>}
-        {hovered.proxy > 0n && <span className="is-direct-total">Direct ≈ {formatByteString(hovered.proxy)}</span>}
-        {hovered.proxy - hovered.directIpv4 > 0n && <span className="is-direct-detail">через sing-box {formatByteString(hovered.proxy - hovered.directIpv4)}</span>}
-        {hovered.directIpv4 > 0n && <span className="is-direct-detail">мимо sing-box · IPv4 {formatByteString(hovered.directIpv4)}</span>}
-        {hovered.unknown > 0n && <span className="is-unknown">Неизвестно · sing-box {formatByteString(hovered.unknown)}</span>}
+        {hovered.proxy > 0n && <span className="is-direct-total">Direct {formatByteString(hovered.proxy)}</span>}
+        {hovered.proxy - hovered.directIpv4 > 0n && hovered.directIpv4 > 0n && <>
+          <span className="is-direct-detail">через sing-box {formatByteString(hovered.proxy - hovered.directIpv4)}</span>
+          <span className="is-direct-detail">мимо sing-box · IPv4 {formatByteString(hovered.directIpv4)}</span>
+        </>}
+        {hovered.unknown > 0n && <span className="is-unknown">Маршрут не определён · sing-box {formatByteString(hovered.unknown)}</span>}
         <span className="is-interval">Оценка за 15-секундный интервал</span>
       </> : <>
         <strong className="is-total">Всего {formatByteString(hovered.gateway + hovered.proxy)}</strong>
@@ -285,9 +287,9 @@ export function TrafficChart({
     {visibleSamples.length > 0 && <span className="client-device-traffic-time" aria-hidden="true">
       <time dateTime={visibleSamples[0].observedAt}>{chartTime(visibleSamples[0].observedAt)}</time>
       {series === 'outbound' ? <span className="client-device-traffic-legend">
-        <span className="is-vpn">VPN</span>
-        <span className="is-direct-total">Direct ≈</span>
-        <span className="is-unknown">?</span>
+        {visibleLines.some(({ valueKey }) => valueKey === 'gateway') && <span className="is-vpn">VPN</span>}
+        {visibleLines.some(({ valueKey }) => valueKey === 'proxy') && <span className="is-direct-total">Direct</span>}
+        {visibleLines.some(({ valueKey }) => valueKey === 'unknown') && <span className="is-unknown">Другое</span>}
       </span> : <span>{series === 'speed' ? '↓ / ↑' : 'Вход'}</span>}
       <time dateTime={visibleSamples[visibleSamples.length - 1].observedAt}>{chartTime(visibleSamples[visibleSamples.length - 1].observedAt)}</time>
     </span>}
diff --git a/test/web/device-inventory-contract.test.js b/test/web/device-inventory-contract.test.js
index bf1f81a..843242c 100644
--- a/test/web/device-inventory-contract.test.js
+++ b/test/web/device-inventory-contract.test.js
@@ -82,10 +82,10 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /device\.confidence === 'ambiguous'/);
   assert.match(panel, /stabilizeDevicesByTraffic\(snapshot\?\.devices, sortDirection, previousIds\)/);
   assert.match(panel, /Трафик временно не обновляется/);
-  assert.match(panel, /Вход — накопленные Gateway\/Proxy\. Выход — оценка VPN\/Direct с запуска текущего учёта\./);
+  assert.match(panel, /Вход — накопленные Gateway\/Proxy\. Выход — приблизительно через VPN или Direct с запуска текущего учёта\./);
   assert.match(panel, /const displayedTotal = trafficView === 'outbound'[\s\S]*`≈ \$\{formatByteString\(outboundTotal\.toString\(\)\)\}`[\s\S]*const trafficLabel = trafficView === 'outbound' \? 'Выход' : 'Вход'/);
   assert.match(panel, /client-device-traffic-total[\s\S]*<b>\{trafficLabel\}<\/b><TrafficValue value=\{displayedTotal\}/);
-  assert.match(panel, /client-device-traffic-breakdown[\s\S]*<b>VPN<\/b>[\s\S]*<b>Direct ≈<\/b>[\s\S]*<b>Неизв\.<\/b>/);
+  assert.match(panel, /client-device-traffic-breakdown[\s\S]*<b>VPN<\/b>[\s\S]*<b>Direct<\/b>[\s\S]*<b>Другое<\/b>/);
   assert.match(panel, /<b>Gateway<\/b><TrafficValue value=\{gatewayTraffic\} delta=\{trafficDelta\.gateway\}/);
   assert.match(panel, /const hasProxyTraffic = proxyTotal > 0n/);
   assert.match(panel, /client-device-traffic-breakdown[\s\S]*\{hasProxyTraffic && <span className="is-proxy"><b>Прокси<\/b><TrafficValue value=\{proxyTraffic\} delta=\{trafficDelta\.proxy\}/);
@@ -108,8 +108,10 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(chart, /client-device-traffic-lines[\s\S]*visibleLines\.map[\s\S]*smoothTrafficPath\(previous, line\.yKey\)[\s\S]*client-device-traffic-cursor[\s\S]*visibleLines\.map/);
   assert.match(panel, /routeLabel=\{device\.appliedPolicy === 'direct' \? 'Напрямую' : 'Gateway'\}/);
   assert.match(chart, /\{hovered\.proxy > 0n && <span className="is-proxy">Proxy \{formatByteString\(hovered\.proxy\)\}<\/span>\}/);
-  assert.match(chart, /Учтено ≈[\s\S]*VPN[\s\S]*Direct ≈[\s\S]*через sing-box[\s\S]*мимо sing-box · IPv4[\s\S]*Неизвестно · sing-box[\s\S]*Оценка за 15-секундный интервал/);
-  assert.match(chart, /<time dateTime=\{visibleSamples\[0\]\.observedAt\}>[\s\S]*client-device-traffic-legend[\s\S]*VPN[\s\S]*Direct ≈[\s\S]*series === 'speed' \? '↓ \/ ↑' : 'Вход'/);
+  assert.match(chart, /Примерно[\s\S]*VPN[\s\S]*Direct[\s\S]*через sing-box[\s\S]*мимо sing-box · IPv4[\s\S]*Маршрут не определён · sing-box[\s\S]*Оценка за 15-секундный интервал/);
+  assert.match(chart, /hovered\.proxy - hovered\.directIpv4 > 0n && hovered\.directIpv4 > 0n && <>[\s\S]*через sing-box[\s\S]*мимо sing-box · IPv4/);
+  assert.match(chart, /client-device-traffic-legend[\s\S]*valueKey === 'gateway'[\s\S]*>VPN<\/span>[\s\S]*valueKey === 'proxy'[\s\S]*>Direct<\/span>[\s\S]*valueKey === 'unknown'[\s\S]*>Другое<\/span>/);
+  assert.doesNotMatch(chart, /Direct ≈|>\?<\/span>/);
   assert.match(panel, /positiveByteDelta\(previous\.gateway, gateway\)[\s\S]*positiveByteDelta\(previous\.proxy, proxy\)/);
   assert.match(panel, /setTimeout\(\(\) => setTrafficDeltas\(\{\}\), TRAFFIC_DELTA_MS\)/);
   assert.doesNotMatch(panel, /client-device-traffic client-tooltip-anchor|<Tooltip>\{trafficLabel\}<\/Tooltip>/);