Refine device panel layout and IP copy feedback

README.md

@@ -76,9 +76,9 @@ http://АДРЕС-GATEWAY:3456
 
 ### Устройства Gateway
 
-После добавления подписки откройте «Устройства» в правой панели Gateway. Harbor раз в 15 секунд читает локальную таблицу соседей и компактно показывает IP, последний контакт, производителя из локальной OUI-базы и сохранённый интернет-трафик. В строке отдельно отмечаются ненулевые источники `Gateway` и `Прокси`; одно устройство может использовать оба, а подробное получено/отдано доступно при наведении или фокусе. Технический MAC хранится для идентификации и правил, но в обычной строке скрыт. Устройство можно переименовать и закрепить; закреплённые строки остаются наверху независимо от направления сортировки по трафику. Название, закрепление и накопленные totals сохраняются в volume Gateway.
+После добавления подписки откройте «Устройства» в правой панели Gateway. Harbor раз в 15 секунд читает локальную таблицу соседей и показывает каждое устройство одной компактной строкой: название и последний контакт, два вертикальных счётчика `Gateway`/`Прокси`, затем иконку применённого маршрута. IP скрыт под названием: наведите или сфокусируйте название, чтобы увидеть адрес, и нажмите, чтобы скопировать его с feedback «Скопировано». Технические MAC, interface и manufacturer продолжают храниться для идентификации, но не занимают место в строке. Устройство можно переименовать и закрепить; закреплённые строки остаются наверху независимо от направления сортировки по трафику. Название, закрепление и накопленные totals сохраняются в volume Gateway.
 
-У однозначно распознанного устройства маршрут можно переключить между `VPN` и `Напрямую` независимо от закрепления. `VPN` означает обработку через sing-box и правила Gateway: например, включённое локальное доменное правило всё равно может выбрать прямой выход внутри sing-box. `Напрямую` полностью обходит sing-box на уровне iptables. Traffic totals учитываются в обоих режимах. Если правило не удалось применить, Harbor сохраняет выбранный режим и отдельно показывает последний фактически применённый маршрут.
+У однозначно распознанного устройства маршрут можно переключить последней иконкой между `VPN` и `Напрямую` независимо от закрепления; точное значение и следующее действие показаны в tooltip. `VPN` означает обработку через sing-box и правила Gateway: например, включённое локальное доменное правило всё равно может выбрать прямой выход внутри sing-box. `Напрямую` полностью обходит sing-box на уровне iptables. Traffic totals учитываются в обоих режимах. Если правило не удалось применить, Harbor сохраняет выбранный режим и отдельно показывает последний фактически применённый маршрут.
 
 Список приблизительный: private/randomized MAC определяется как менее надёжная identity, один MAC с несколькими IP помечается как неоднозначный, а устройство появляется только после сетевого контакта с Gateway. Интерфейс самого Gateway не выдаётся за Wi-Fi/Ethernet устройства. Внешние сервисы распознавания производителя не используются. `Прокси` учитывает подключения устройства к общему proxy-порту Harbor, а `Gateway` — остальной публичный трафик через Gateway; трафик, который вообще не дошёл до Harbor, увидеть нельзя. Локальные, приватные и multicast-пакеты в totals не входят. При аварийном restart dataplane возможна потеря последних примерно 30 секунд; история по часам пока не хранится.
 

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.13.0',
-  gatewayClient: '0.14.0',
+  macClient: '0.13.1',
+  gatewayClient: '0.14.1',
   gatewayBackend: '0.14.0',
 });
 

src/web/components/ClientOverviewPage.jsx

@@ -1270,7 +1270,7 @@ export function ClientOverviewPage({
                     onClick={() => copyProxy(kind)}
                   >
                     <span className="client-copy-label">{label}</span>
-                    {copyFeedback?.kind === kind && <span className="client-copy-feedback" aria-hidden="true">{copyFeedback.failed ? 'ОШИБКА' : 'ГОТОВО'}</span>}
+                    {copyFeedback?.kind === kind && <span className="client-copy-feedback" aria-hidden="true">{copyFeedback.failed ? 'Ошибка' : 'Скопировано'}</span>}
                   </button>
                 ))}
               </div>

src/web/components/DevicesPanel.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { api } from '../api.js';
+import { copyText } from '../utils/clientControls.js';
 import {
   byteString,
   formatByteString,
@@ -33,8 +34,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const [refreshing, setRefreshing] = useState(false);
   const [refreshCycle, setRefreshCycle] = useState(0);
   const [sortDirection, setSortDirection] = useState('desc');
+  const [copyFeedback, setCopyFeedback] = useState(null);
   const deviceNodes = useRef(new Map());
   const previousPositions = useRef(new Map());
+  const copyTimer = useRef(null);
   const devices = useMemo(
     () => sortDevicesByTraffic(snapshot?.devices, sortDirection),
     [snapshot?.devices, sortDirection],
@@ -69,6 +72,8 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     return () => clearTimeout(timer);
   }, [open, refreshCycle, refreshing, status]);
 
+  useEffect(() => () => clearTimeout(copyTimer.current), []);
+
   useLayoutEffect(() => {
     if (!open) {
       previousPositions.current.clear();
@@ -157,6 +162,18 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     }
   }
 
+  async function copyDeviceIp(device) {
+    if (!device.ip) return;
+    clearTimeout(copyTimer.current);
+    try {
+      await copyText(device.ip);
+      setCopyFeedback({ id: device.id, failed: false });
+    } catch {
+      setCopyFeedback({ id: device.id, failed: true });
+    }
+    copyTimer.current = setTimeout(() => setCopyFeedback(null), 800);
+  }
+
   return (
     <aside
       ref={panelRef}
@@ -248,6 +265,9 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
           <p className="client-devices-empty">Gateway пока не видит устройств.</p>
         )}
 
+        <div className="client-live-region" role="status" aria-live="polite" aria-atomic="true">
+          {copyFeedback ? copyFeedback.failed ? 'Не удалось скопировать' : 'Скопировано' : ''}
+        </div>
         <div className="client-devices-list" aria-live="polite" aria-busy={status === 'loading' || status === 'refreshing'}>
           {devices.map((device) => {
             const title = device.alias || device.hostname || device.ip || 'Неизвестное устройство';
@@ -263,10 +283,8 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
             const proxyTotal = byteString(device.proxyDownloadBytes) + byteString(device.proxyUploadBytes);
             const gatewayTraffic = formatByteString(gatewayTotal.toString());
             const proxyTraffic = formatByteString(proxyTotal.toString());
-            const trafficLabel = [
-              gatewayTotal > 0n ? `Gateway: получено ${download}, отдано ${upload}` : '',
-              proxyTotal > 0n ? `Прокси: получено ${proxyDownload}, отдано ${proxyUpload}` : '',
-            ].filter(Boolean).join('. ');
+            const trafficLabel = `Gateway: получено ${download}, отдано ${upload}. Прокси: получено ${proxyDownload}, отдано ${proxyUpload}`;
+            const copied = copyFeedback?.id === device.id;
             const policyBusy = device.policyStatus === 'applying';
             const policyFailed = device.policyStatus === 'failed';
             const policyPending = device.policyStatus === 'pending';
@@ -312,7 +330,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 <Tooltip>{device.pinned ? 'Открепить' : 'Закрепить'}</Tooltip>
               </span>
 
-              <div className="client-device-heading">
+              <div className="client-device-main">
                 {editing ? (
                   <form className="client-device-alias" onSubmit={(event) => saveAlias(event, device)}>
                     <input
@@ -327,7 +345,20 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   </form>
                 ) : (
                   <div className="client-device-title">
-                    <h3>{title}</h3>
+                    {device.ip ? <h3 className="client-device-name-heading">
+                      <button
+                        className={`client-device-name${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>
+                        <span className="client-device-name-feedback" aria-hidden="true">
+                          {copied && copyFeedback.failed ? 'Ошибка' : 'Скопировано'}
+                        </span>
+                      </button>
+                    </h3> : <h3>{title}</h3>}
                     <span className="client-device-edit-wrap client-tooltip-anchor">
                       <button
                         className="client-device-edit"
@@ -346,40 +377,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                     </span>
                   </div>
                 )}
-                <span className="client-device-traffic-slot">
-                  {(gatewayTotal > 0n || proxyTotal > 0n) && <span
-                    className="client-device-traffic client-tooltip-anchor"
-                    tabIndex="0"
-                    aria-label={trafficLabel}
-                  >
-                    <span className="client-device-traffic-sources" aria-hidden="true">
-                      {gatewayTotal > 0n && <span>Gateway {gatewayTraffic}</span>}
-                      {proxyTotal > 0n && <span className="is-proxy">Прокси {proxyTraffic}</span>}
-                    </span>
-                    <Tooltip>{trafficLabel}</Tooltip>
-                  </span>}
-                </span>
-              </div>
-
-              <div className="client-device-meta">
-                <div className="client-device-addresses">
-                  {title !== device.ip && device.ip && <span>{device.ip}</span>}
-                  {device.manufacturer && <span className="client-device-manufacturer">{device.manufacturer}</span>}
-                </div>
-                <span className="client-device-policy-wrap client-tooltip-anchor">
-                  <button
-                    className={`client-device-policy is-${displayPolicy}${policyFailed ? ' is-failed' : ''}${policyPending ? ' is-pending' : ''}`}
-                    type="button"
-                    aria-label={`Маршрут устройства: ${displayPolicy === 'direct' ? 'полностью напрямую' : 'через правила Gateway'}. ${policyTooltip}`}
-                    aria-pressed={displayPolicy === 'direct'}
-                    aria-busy={policyBusy}
-                    disabled={saving || policyBusy || cannotEnableDirect}
-                    onClick={() => updatePolicy(device, policyTarget)}
-                  >
-                    {displayPolicy === 'direct' ? 'Напрямую' : 'VPN'}
-                  </button>
-                  <Tooltip>{policyTooltip}</Tooltip>
-                </span>
                 <span className={`client-device-last-seen${online ? ' is-online' : ''}`} tabIndex="0">
                   <time
                     dateTime={device.lastSeenAt}
@@ -389,6 +386,38 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   </time>
                 </span>
               </div>
+
+              <span
+                className="client-device-traffic client-tooltip-anchor"
+                tabIndex="0"
+                aria-label={trafficLabel}
+              >
+                <span className="client-device-traffic-sources" aria-hidden="true">
+                  <span><b>Gateway</b><strong>{gatewayTraffic}</strong></span>
+                  <span className="is-proxy"><b>Прокси</b><strong>{proxyTraffic}</strong></span>
+                </span>
+                <Tooltip>{trafficLabel}</Tooltip>
+              </span>
+
+              <span className="client-device-policy-wrap client-tooltip-anchor">
+                <button
+                  className={`client-device-policy is-${displayPolicy}${policyFailed ? ' is-failed' : ''}${policyPending ? ' is-pending' : ''}`}
+                  type="button"
+                  aria-label={`Маршрут устройства: ${displayPolicy === 'direct' ? 'полностью напрямую' : 'через правила Gateway'}. ${policyTooltip}`}
+                  aria-pressed={displayPolicy === 'direct'}
+                  aria-busy={policyBusy}
+                  disabled={saving || policyBusy || cannotEnableDirect}
+                  onClick={() => updatePolicy(device, policyTarget)}
+                >
+                  {displayPolicy === 'direct' ? <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M4 12h15M14 7l5 5-5 5" />
+                  </svg> : <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M12 3 19 6v5c0 4.4-2.8 8-7 10-4.2-2-7-5.6-7-10V6l7-3Z" />
+                    <path d="m9 12 2 2 4-4" />
+                  </svg>}
+                </button>
+                <Tooltip>{policyTooltip}</Tooltip>
+              </span>
             </article>;
           })}
         </div>

src/web/styles.css

@@ -889,30 +889,33 @@ p {
 
 .client-device {
   display: grid;
-  grid-template-columns: 32px minmax(0, 1fr);
-  grid-template-rows: auto auto;
-  gap: 3px 4px;
-  padding: 10px 8px;
+  grid-template-columns: 32px minmax(0, 1fr) 104px 32px;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
   border-top: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
 }
 
-.client-device-heading {
-  grid-column: 2;
-  grid-row: 1;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+.client-device-main {
+  min-width: 0;
+  display: flex;
   align-items: center;
-  gap: 6px;
-  min-height: 28px;
+  gap: 7px;
 }
 
 .client-device-title {
+  flex: 1 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
+.client-device-title h3 {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .client-device-title h3 {
   overflow: hidden;
   margin: 0;
@@ -922,6 +925,82 @@ p {
   white-space: nowrap;
 }
 
+.client-device-name {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: var(--client-text);
+  font: 700 14px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  letter-spacing: -0.03em;
+  text-align: left;
+  cursor: copy;
+}
+
+.client-device-name > span {
+  grid-area: 1 / 1;
+  overflow: hidden;
+  opacity: 1;
+  filter: blur(0);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateY(0);
+  transition: opacity 220ms ease, filter 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease;
+}
+
+.client-device-name-ip,
+.client-device-name-feedback {
+  opacity: 0;
+  filter: blur(5px);
+  transform: translateY(2px);
+}
+
+.client-device-name:hover .client-device-name-primary,
+.client-device-name:focus-visible .client-device-name-primary {
+  opacity: 0;
+  filter: blur(5px);
+  transform: translateY(-2px);
+}
+
+.client-device-name:hover .client-device-name-ip,
+.client-device-name:focus-visible .client-device-name-ip {
+  opacity: 1;
+  filter: blur(0);
+  transform: translateY(0);
+}
+
+.client-device-name.is-copied .client-device-name-primary,
+.client-device-name.is-copied .client-device-name-ip,
+.client-device-name.is-copy-error .client-device-name-primary,
+.client-device-name.is-copy-error .client-device-name-ip {
+  opacity: 0;
+  filter: blur(5px);
+}
+
+.client-device-name.is-copied .client-device-name-feedback,
+.client-device-name.is-copy-error .client-device-name-feedback {
+  opacity: 1;
+  filter: blur(0);
+  transform: translateY(0);
+}
+
+.client-device-name.is-copied .client-device-name-feedback {
+  color: var(--client-accent);
+}
+
+.client-device-name.is-copy-error .client-device-name-feedback {
+  color: oklch(0.68 0.15 28);
+}
+
+.client-device-name:focus-visible {
+  border-radius: 3px;
+  outline: 2px solid var(--client-accent);
+  outline-offset: 2px;
+}
+
 .client-device-edit-wrap,
 .client-device-pin-wrap {
   width: 28px;
@@ -942,9 +1021,6 @@ p {
 }
 
 .client-device-pin-wrap {
-  grid-column: 1;
-  grid-row: 1 / 3;
-  align-self: center;
   width: 32px;
   height: 32px;
 }
@@ -1001,37 +1077,13 @@ p {
   transform: translateY(-1px) rotate(-8deg) scale(0.94);
 }
 
-.client-device-meta {
-  grid-column: 2;
-  grid-row: 2;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 72px auto;
-  align-items: center;
-  gap: 8px;
-  color: var(--client-muted);
-  font-size: 9px;
-  line-height: 1.5;
-}
-
-.client-device-addresses {
-  min-width: 0;
-  display: flex;
-  overflow: hidden;
-  gap: 3px 0;
-}
-
-.client-device-addresses > span {
-  white-space: nowrap;
-}
-
-.client-device-addresses > span + span::before {
-  margin: 0 6px;
-  color: color-mix(in oklch, var(--client-muted) 58%, transparent);
-  content: '·';
-}
-
 .client-device-last-seen {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 116px;
+  overflow: hidden;
+  font-size: 8px;
+  text-overflow: ellipsis;
   color: var(--client-text);
   cursor: default;
   white-space: nowrap;
@@ -1102,50 +1154,50 @@ p {
   outline-offset: 3px;
 }
 
-.client-device-manufacturer {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--client-muted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .client-device-traffic {
-  display: block;
-  max-width: min(240px, 42vw);
-  overflow: hidden;
+  width: 104px;
+  display: grid;
+  align-items: center;
   color: var(--client-text);
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.client-device-traffic-slot {
-  min-width: 0;
-  font-size: 9px;
 }
 
 .client-device-traffic-sources {
-  display: flex;
-  gap: 5px;
-  overflow: hidden;
+  display: grid;
+  gap: 2px;
 }
 
 .client-device-traffic-sources span {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: grid;
+  grid-template-columns: 41px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 4px;
 }
 
-.client-device-traffic-sources span + span::before {
-  margin-right: 5px;
+.client-device-traffic-sources b {
   color: var(--client-muted);
-  content: '·';
+  font-size: 7px;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.client-device-traffic-sources strong {
+  overflow: hidden;
+  font-size: 8px;
+  font-weight: 600;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .client-device-traffic-sources .is-proxy {
   color: var(--client-accent);
 }
 
+.client-device-traffic-sources .is-proxy b {
+  color: color-mix(in oklch, var(--client-accent) 72%, var(--client-muted));
+}
+
 .client-device-traffic:focus-visible {
   border-radius: 3px;
   outline: 2px solid var(--client-accent);
@@ -1164,41 +1216,71 @@ p {
 }
 
 .client-device-policy-wrap {
-  width: 72px;
+  width: 32px;
   position: relative;
 }
 
 .client-device-policy {
-  width: 72px;
-  min-height: 22px;
-  padding: 0 5px;
-  border: 1px solid color-mix(in oklch, var(--client-border) 82%, transparent);
-  border-radius: 5px;
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
   background: transparent;
   color: var(--client-muted);
-  font: 700 8px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  text-transform: uppercase;
-  transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease;
+  cursor: pointer;
+  transition: color 220ms ease, filter 320ms ease, opacity 180ms ease, background 220ms ease;
+}
+
+.client-device-policy svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-device-policy.is-direct {
-  border-color: color-mix(in oklch, var(--client-accent) 52%, var(--client-border));
   color: var(--client-accent);
 }
 
 .client-device-policy.is-failed {
-  border-color: oklch(0.62 0.13 28);
   color: oklch(0.7 0.12 28);
 }
 
 .client-device-policy.is-pending {
-  border-style: dashed;
+  opacity: 0.62;
 }
 
 .client-device-policy:hover:not(:disabled),
 .client-device-policy:focus-visible {
-  border-color: var(--client-accent);
+  background: color-mix(in oklch, var(--client-accent) 10%, transparent);
   color: var(--client-accent);
+  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 36%, transparent));
+}
+
+.client-device-policy.is-direct:hover:not(:disabled) svg,
+.client-device-policy.is-direct:focus-visible svg {
+  transform: translateX(2px);
+}
+
+.client-device-policy.is-vpn:hover:not(:disabled) svg,
+.client-device-policy.is-vpn:focus-visible svg {
+  transform: translateY(-1px) rotate(3deg) scale(1.05);
+}
+
+.client-device-policy:focus-visible {
+  outline: 2px solid var(--client-accent);
+  outline-offset: 1px;
+}
+
+.client-device-policy:disabled {
+  cursor: wait;
 }
 
 .client-device-policy-wrap.client-tooltip-anchor > .client-tooltip {
@@ -1214,6 +1296,8 @@ p {
 }
 
 .client-device-alias {
+  flex: 1 1 auto;
+  min-width: 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 28px 28px;
   align-items: center;
@@ -4187,6 +4271,8 @@ p {
   .client-device-pin,
   .client-device-pin svg,
   .client-device-policy,
+  .client-device-policy svg,
+  .client-device-name > span,
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,

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

@@ -29,11 +29,14 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(server, /requestUrl\.pathname === '\/api\/devices\/refresh'[\s\S]*deviceInventory\.refresh\(\)/);
   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, /client-device-name-feedback[\s\S]*'Скопировано'/);
   assert.match(panel, /online \? 'В сети' : <TextMorph from=\{seen\.label\} to=\{seen\.relative\} \/>/);
   assert.match(panel, /aria-label=\{`\$\{online \? 'В сети' : 'Не в сети'\}\. Последний контакт: \$\{seen\.tooltip\}`\}/);
   assert.doesNotMatch(panel, /client-device-status|STATUS_LABELS/);
   assert.doesNotMatch(panel, /client-text-morph-goo/);
-  assert.match(panel, /client-device-addresses/);
+  assert.doesNotMatch(panel, /client-device-addresses|client-device-manufacturer|client-device-meta/);
   assert.doesNotMatch(panel, /device\.interface/);
   assert.doesNotMatch(panel, /device\.mac/);
   assert.doesNotMatch(panel, /client-device-identity|Пояснение идентификации устройства|ⓘ/);
@@ -43,17 +46,15 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /Учитывается только трафик, который прошёл через Harbor/);
   assert.match(panel, /Gateway: получено \$\{download\}, отдано \$\{upload\}/);
   assert.match(panel, /Прокси: получено \$\{proxyDownload\}, отдано \$\{proxyUpload\}/);
-  assert.match(panel, /Gateway \{gatewayTraffic\}/);
-  assert.match(panel, /Прокси \{proxyTraffic\}/);
-  assert.match(panel, /\(gatewayTotal > 0n \|\| proxyTotal > 0n\)/);
-  assert.match(panel, /gatewayTotal > 0n && <span>Gateway/);
-  assert.match(panel, /proxyTotal > 0n && <span className="is-proxy">Прокси/);
+  assert.match(panel, /<b>Gateway<\/b><strong>\{gatewayTraffic\}<\/strong>/);
+  assert.match(panel, /className="is-proxy"><b>Прокси<\/b><strong>\{proxyTraffic\}<\/strong>/);
   assert.match(panel, /source\?\.traffic\?\.proxy\?\.error/);
-  assert.match(panel, /client-device-pin-wrap[\s\S]*client-device-heading/);
+  assert.match(panel, /client-device-pin-wrap[\s\S]*client-device-main[\s\S]*client-device-traffic[\s\S]*client-device-policy-wrap/);
   assert.doesNotMatch(panel, /client-device-details/);
   assert.match(panel, /api\.devices\.setPolicy\(device\.id, mode, snapshot\.revision\)/);
   assert.match(panel, /requestError\.code !== 'STATE_CONFLICT'[\s\S]*latestDevice\.desiredPolicy !== device\.desiredPolicy[\s\S]*api\.devices\.setPolicy\(device\.id, mode, latest\.revision\)/);
   assert.match(panel, /className=\{`client-device-policy is-\$\{displayPolicy\}/);
+  assert.match(panel, /displayPolicy === 'direct' \? <svg[\s\S]*M4 12h15M14 7l5 5-5 5[\s\S]*M12 3 19 6v5/);
   assert.match(panel, /Полностью обходит sing-box/);
   assert.match(panel, /client-drawer client-instructions client-devices/);
   assert.doesNotMatch(panel, /точная MAC|частная MAC|<dt>Источник<\/dt>/);
@@ -61,10 +62,13 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.doesNotMatch(panel, /Закрепите устройство, чтобы изменить маршрут|Сначала верните маршрут через Gateway/);
   assert.match(panel, /maxLength="64"[\s\S]*autoFocus/);
   assert.match(styles, /\.client-devices \{\s*width: min\(560px, 100vw\)/);
-  assert.match(styles, /\.client-device \{[\s\S]*grid-template-columns: 32px minmax\(0, 1fr\);[\s\S]*padding: 10px 8px/);
-  assert.match(styles, /\.client-device-heading \{[\s\S]*grid-column: 2;[\s\S]*grid-template-columns: minmax\(0, 1fr\) auto/);
-  assert.match(styles, /\.client-device-meta \{[\s\S]*grid-template-columns: minmax\(0, 1fr\) 72px auto/);
-  assert.doesNotMatch(styles, /\.client-device-meta \{[^}]*margin-left/);
+  assert.match(styles, /\.client-device \{[\s\S]*grid-template-columns: 32px minmax\(0, 1fr\) 104px 32px;[\s\S]*padding: 8px/);
+  assert.match(styles, /\.client-device-main \{[\s\S]*display: flex;[\s\S]*align-items: center/);
+  assert.match(styles, /\.client-device-traffic-sources \{[\s\S]*display: grid/);
+  assert.match(styles, /\.client-device-traffic-sources span \{[\s\S]*grid-template-columns: 41px minmax\(0, 1fr\)/);
+  assert.match(styles, /\.client-device-policy \{[\s\S]*width: 32px;[\s\S]*border-radius: 50%/);
+  assert.match(styles, /\.client-device-name:hover \.client-device-name-ip[\s\S]*opacity: 1/);
+  assert.match(styles, /\.client-device-name\.is-copied \.client-device-name-feedback[\s\S]*opacity: 1/);
   assert.match(styles, /\.client-device-last-seen\.is-online \{[\s\S]*color: var\(--client-accent\)/);
   assert.match(styles, /\.client-text-morph-value \{[\s\S]*transition: opacity 360ms[\s\S]*filter 480ms/);
   assert.match(styles, /\.client-device-last-seen:hover \.client-text-morph-value\.is-relative[\s\S]*opacity: 1/);
@@ -74,7 +78,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[\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-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/);
 });

test/web/rule-editor-contract.test.js

@@ -63,6 +63,8 @@ test('copy feedback, drawers and Gateway access actions expose complete semantic
   assert.match(component, /className="client-live-region" role="status" aria-live="polite" aria-atomic="true"/);
   assert.match(component, /Не удалось скопировать/);
   assert.match(component, /Скопировано/);
+  assert.match(component, /client-copy-feedback[^\n]*\{copyFeedback\.failed \? 'Ошибка' : 'Скопировано'\}/);
+  assert.doesNotMatch(component, /ГОТОВО/);
   assert.doesNotMatch(component, />Error<|>Copied</);
   assert.match(component, /aria-label="Закрыть инструкции"/);
   assert.match(component, /aria-label="Закрыть локальные правила"/);