Implement Harbor gateway device ecosystem support

test/web/api-errors.test.js

@@ -112,6 +112,15 @@ test('typed endpoint facade preserves exact request contracts and raw payload id
       [() => api.devices.setPolicy('dev_1', 'direct', 9), '/api/devices/dev_1/policy', {
         method: 'PUT', body: JSON.stringify({ mode: 'direct', expectedRevision: 9 }),
       }],
+      [() => api.devices.createTag('Дом', 10), '/api/device-tags', {
+        method: 'POST', body: JSON.stringify({ name: 'Дом', expectedRevision: 10 }),
+      }],
+      [() => api.devices.renameTag('tag_1', 'Работа', 11), '/api/device-tags/tag_1', {
+        method: 'PUT', body: JSON.stringify({ name: 'Работа', expectedRevision: 11 }),
+      }],
+      [() => api.devices.deleteTag('tag_1', 12), '/api/device-tags/tag_1', {
+        method: 'DELETE', body: JSON.stringify({ expectedRevision: 12 }),
+      }],
       [() => api.diagnostics.connectivity(), '/api/diagnostics/connectivity', {
         method: 'POST', body: JSON.stringify({ target: null }),
       }],

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

@@ -5,6 +5,8 @@ import test from 'node:test';
 import { fileURLToPath } from 'node:url';
 import {
   formatByteString,
+  deviceFilterCounts,
+  filterDevices,
   formatLastSeen,
   isNewDevice,
   positiveByteDelta,
@@ -38,7 +40,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(feature, /requestDeviceUpdate\(device\.id, patch, snapshot\.revision\)/);
   assert.match(feature, /requestError\(caught\)\.code !== 'STATE_CONFLICT'[\s\S]*listDevices\(\)[\s\S]*Object\.keys\(patch\)\.some\(\(key\) => latestDevice\[key\] !== device\[key\]\)[\s\S]*requestDeviceUpdate\(device\.id, patch, latest\.revision\)/);
   assert.match(panel, /deviceNodes\.current\.get\(id\)\?\.animate/);
-  assert.match(panel, /movementAnimations\.current\.get\(id\)\?\.cancel\(\)/);
+  assert.match(panel, /const activeAnimation = movementAnimations\.current\.get\(id\)[\s\S]*activeAnimation\.commitStyles\(\)[\s\S]*activeAnimation\.cancel\(\)[\s\S]*interruptedPositions\.set/);
   assert.match(panel, /previousPositions\.current\.size > 0/);
   assert.match(panel, /previousScrollTop\.current - currentScrollTop/);
   assert.match(feature, /next\.revision > current\.revision/);
@@ -86,7 +88,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /\{device\.hostname && <button[\s\S]*copyDeviceValue\(device, 'Hostname', device\.hostname!\)/);
   assert.doesNotMatch(panel, /identityTooltipId|Hostname: \{device\.hostname/);
   assert.match(panel, /device\.confidence === 'ambiguous'/);
-  assert.match(panel, /stabilizeDevicesByTraffic\(snapshot\?\.devices, sortDirection, previousIds\)/);
+  assert.match(panel, /filterDevices\(allDevices, tags,[\s\S]*stabilizeDevicesByTraffic\(filteredDevices, sortDirection, previousIds\)[\s\S]*stabilizeDevicesByTraffic\(allDevices, sortDirection, previousIds\)[\s\S]*trafficOrder\.current = \{ direction: sortDirection, ids: canonical\.ids \}/);
   assert.match(panel, /Трафик временно не обновляется/);
   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' \? 'Выход' : 'Вход'/);
@@ -144,6 +146,8 @@ 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-drawer \{[\s\S]*width: min\(580px, 100vw\)/);
+  assert.match(styles, /\.client-drawer\.client-devices \{[\s\S]*width: min\(780px, 100vw\)/);
+  assert.match(styles, /\.client-devices-layout \{[\s\S]*grid-template-columns: 168px minmax\(0, 1fr\);[\s\S]*gap: 28px/);
   assert.match(styles, /\.client-device \{[\s\S]*--client-device-chart-height: 34px;[\s\S]*grid-template-columns: 34px minmax\(0, 1fr\) 112px 34px;[\s\S]*grid-template-rows: 34px var\(--client-device-chart-height\);[\s\S]*padding: 10px 8px/);
   assert.match(styles, /\.client-device\.is-pinned \{[\s\S]*--client-device-chart-height: 72px/);
   assert.match(styles, /\.client-device\.is-deprioritized \{[\s\S]*grid-template-rows: 34px;[\s\S]*padding-block: 6px/);
@@ -231,6 +235,41 @@ test('device copy feedback stays keyed per device', () => {
   assert.match(panel, /const feedback = copyFeedback\[device\.id\]/);
 });
 
+test('device tags keep filtering, assignment and management accessible at every width', () => {
+  assert.match(panel, /Найти устройство/);
+  assert.match(panel, /'all', label: 'Все'[\s\S]*'new', label: 'Новые'[\s\S]*'pinned', label: 'Закреплённые'[\s\S]*'background', label: 'Фоновые'[\s\S]*'untagged', label: 'Без тегов'/);
+  assert.match(panel, /if \(value === 'untagged'\) setSelectedTagIds\(\[\]\)/);
+  assert.match(panel, /if \(systemFilter === 'untagged'\) setSystemFilter\('all'\)/);
+  assert.match(panel, /deviceFilterCounts\(allDevices, tags\)/);
+  assert.match(panel, /По этим фильтрам устройств нет\.[\s\S]*Сбросить фильтры/);
+  assert.match(panel, /deviceTags = tags\.filter[\s\S]*client-device-tag-trigger[\s\S]*\+\{deviceTags\.length - 1\}[\s\S]*'\+ тег'/);
+  assert.match(panel, /role="dialog"[\s\S]*aria-modal="true"[\s\S]*Теги устройства \{tagPopover\.title\}/);
+  assert.match(panel, /contentRef\.current\.inert = true[\s\S]*layoutRef\.current\.inert = true/);
+  assert.match(panel, /FOCUSABLE[\s\S]*event\.key === 'Escape'[\s\S]*document\.activeElement === first/);
+  assert.match(panel, /catalogChanged[\s\S]*Список тегов изменился\. Откройте теги устройства снова\./);
+  assert.match(panel, /Теги доступны после обновления Gateway\./);
+  assert.match(panel, /Управление тегами[\s\S]*Переименовать тег[\s\S]*Удалить тег/);
+  assert.match(panel, /placeholder="Найти устройство"[\s\S]*Результатов: \{devices\.length\}/);
+  assert.match(panel, />Назад<\/button>[\s\S]*Не удалось сохранить теги\./);
+  assert.match(panel, /restoreTagTriggerFocus[\s\S]*searchRef\.current,[\s\S]*filterButtonRef\.current,[\s\S]*candidate\?\.isConnected && !candidate\.closest\('\[inert\]'\)/);
+  assert.match(panel, /updateDeviceTags\(device, tagPopover\.draft, tagPopover\.baseline\)/);
+  assert.match(feature, /updateDeviceTags\(device: Device, tagIds: string\[\], baselineTagIds: string\[\]\)[\s\S]*sameStringList\(currentDevice\.tagIds, baselineTagIds\)[\s\S]*sameStringList\(latestDevice\.tagIds, baselineTagIds\)/);
+  assert.match(feature, /renameTag\(tag: DeviceTag, name: string, baselineName: string\)[\s\S]*snapshot\.tags\.find[\s\S]*name !== baselineName[\s\S]*latestTag\.name !== baselineName/);
+  assert.match(panel, /Тег больше не будет доступен для назначения\. Устройства и маршруты не изменятся\./);
+  assert.match(panel, /Тег исчезнет у одного устройства\. Само устройство и его маршрут не изменятся\./);
+  assert.match(panel, /Сами устройства и их маршруты не изменятся\./);
+  assert.match(feature, /deleteDeviceTag\(tag\.id, snapshot\.revision\)[\s\S]*STATE_CONFLICT[\s\S]*listDevices\(\)[\s\S]*return 'conflict'/);
+  assert.doesNotMatch(feature, /deleteDeviceTag\(tag\.id, latest\.revision\)/);
+  assert.match(styles, /@media \(max-width: 640px\)[\s\S]*width: min\(300px, calc\(100vw - 48px\)\)[\s\S]*translateX\(-100%\)[\s\S]*260ms cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
+  assert.match(panel, /activeAnimation\.commitStyles\(\)[\s\S]*activeAnimation\.cancel\(\)[\s\S]*opacity: 0, transform: 'translateX\(-6px\)'[\s\S]*duration: 160[\s\S]*opacity: 0, transform: 'translateX\(6px\)'[\s\S]*opacity: 1, transform: 'translateX\(0\)'/);
+  assert.match(styles, /client-device-tag-popover-in 160ms ease[\s\S]*translateY\(-6px\)[\s\S]*client-device-tag-popover-out 160ms ease forwards/);
+  assert.match(styles, /client-devices-rail-backdrop \{[\s\S]*opacity: 0[\s\S]*opacity 260ms cubic-bezier\(0\.16, 1, 0\.3, 1\)[\s\S]*client-devices-rail-backdrop\.is-open[\s\S]*opacity: 1/);
+  assert.match(styles, /client-device-tag-trigger \{[\s\S]*height: 14px[\s\S]*flex: 0 0 auto/);
+  assert.match(styles, /@media \(hover: hover\)[\s\S]*client-device-tag-trigger:not\(\.has-tag\)[\s\S]*opacity: 0/);
+  assert.match(styles, /@media \(hover: none\)[\s\S]*client-device-tag-trigger:not\(\.has-tag\)[\s\S]*opacity: 1/);
+  assert.match(styles, /prefers-reduced-motion: reduce[\s\S]*client-devices-rail[\s\S]*client-devices-rail-view[\s\S]*client-device-tag-popover/);
+});
+
 test('Gateway Home reuses the canonical device snapshot for applied route and global traffic', () => {
   const powerStart = connection.indexOf('<section className={`client-power-section');
   const trafficStart = overview.indexOf('<GatewayTrafficSummary');
@@ -285,6 +324,54 @@ test('new-device marker uses an exact seven-day window', () => {
   assert.equal(isNewDevice('not-a-date', now), false);
 });
 
+test('device filters combine system and search with tag OR while counts stay absolute', () => {
+  const now = Date.parse('2026-08-31T12:00:00.000Z');
+  const tags = [
+    { id: 'tag_0000000000000001', name: 'Умный дом' },
+    { id: 'tag_0000000000000002', name: 'Работа' },
+  ];
+  const devices = Array.from({ length: 100 }, (_, index) => ({
+    id: `device-${index}`,
+    alias: index === 3 ? 'Телевизор' : `Клиент ${index}`,
+    hostname: index === 4 ? 'office-mac.local' : null,
+    ip: `192.168.50.${index + 1}`,
+    mac: `00:11:22:33:44:${index.toString(16).padStart(2, '0')}`,
+    firstSeenAt: new Date(now - (index < 7 ? index : 10) * 86_400_000).toISOString(),
+    pinned: index === 3,
+    deprioritized: index === 5,
+    tagIds: index === 3 ? [tags[0].id] : index === 4 ? [tags[1].id] : [],
+  }));
+
+  assert.deepEqual(filterDevices(devices, tags, {
+    system: 'all', tagIds: tags.map(({ id }) => id), query: 'local',
+  }, now).map(({ id }) => id), ['device-4']);
+  assert.deepEqual(filterDevices(devices, tags, {
+    system: 'pinned', tagIds: [tags[0].id, tags[1].id], query: 'умный',
+  }, now).map(({ id }) => id), ['device-3']);
+  assert.equal(filterDevices(devices, tags, {
+    system: 'untagged', tagIds: [], query: '192.168.50.',
+  }, now).length, 98);
+
+  assert.deepEqual(deviceFilterCounts(devices, tags, now), {
+    all: 100,
+    new: 7,
+    pinned: 1,
+    background: 1,
+    untagged: 98,
+    byTag: { [tags[0].id]: 1, [tags[1].id]: 1 },
+  });
+
+  const canonical = stabilizeDevicesByTraffic(devices, 'desc');
+  const visible = filterDevices(devices, tags, {
+    system: 'all', tagIds: [], query: '192.168.50.1',
+  }, now);
+  const filteredOrder = stabilizeDevicesByTraffic(visible, 'desc', canonical.ids).devices;
+  assert.deepEqual(filteredOrder.map(({ id }) => id), canonical.devices
+    .filter(({ id }) => visible.some((device) => device.id === id))
+    .map(({ id }) => id));
+  assert.deepEqual(stabilizeDevicesByTraffic(devices, 'desc', canonical.ids).ids, canonical.ids);
+});
+
 test('device traffic formatting and sorting preserve uint64 precision and canonical ties', () => {
   assert.equal(formatByteString('9007199254740993'), '8,0 ПБ');
   assert.equal(formatByteString('1536'), '1,5 КБ');

test/web/devices-feature-contract.test.js

@@ -41,7 +41,7 @@ test('device controller preserves Gateway-only polling, monotonic publication an
   assert.match(page, /<GatewayTrafficSummary feature=\{devicesFeature\} now=\{now\}/);
 });
 
-test('all unknown inventory results pass one identity-preserving runtime parser', () => {
+test('all unknown inventory results pass one capability-aware runtime parser', () => {
   const observedAt = '2026-08-08T12:34:56.000Z';
   const valid = {
     revision: 3,
@@ -106,7 +106,21 @@ test('all unknown inventory results pass one identity-preserving runtime parser'
     },
     extra: { retained: true },
   };
-  assert.equal(parseDeviceSnapshot(valid), valid);
+  const oldBackend = parseDeviceSnapshot(valid);
+  assert.equal(oldBackend.taggingSupported, false);
+  assert.deepEqual(oldBackend.tags, []);
+  assert.deepEqual(oldBackend.devices[0].tagIds, []);
+  assert.deepEqual(oldBackend.extra, valid.extra);
+
+  const supported = {
+    ...valid,
+    tags: [{ id: 'tag_0123456789abcdef', name: 'Умный дом' }],
+    devices: [{ ...valid.devices[0], tagIds: ['tag_0123456789abcdef'] }],
+  };
+  const parsedSupported = parseDeviceSnapshot(supported);
+  assert.equal(parsedSupported.taggingSupported, true);
+  assert.deepEqual(parsedSupported.tags, supported.tags);
+  assert.deepEqual(parsedSupported.devices[0].tagIds, ['tag_0123456789abcdef']);
   for (const invalid of [
     null,
     {},
@@ -134,6 +148,10 @@ test('all unknown inventory results pass one identity-preserving runtime parser'
     { ...valid, devices: [{ ...valid.devices[0], outboundTraffic: { observedAt, vpnBytes: '1' } }] },
     { ...valid, devices: [{ ...valid.devices[0], outboundTraffic: { ...valid.devices[0].outboundTraffic, directIpv4ObservedAt: 'not-a-date' } }] },
     { ...valid, devices: [{ ...valid.devices[0], outboundTrafficHistory: [{ observedAt, vpnBytes: '1' }] }] },
+    { ...supported, tags: [{ id: 'bad', name: 'Дом' }] },
+    { ...supported, tags: [{ ...supported.tags[0], name: ' '.repeat(2) }] },
+    { ...supported, devices: [{ ...valid.devices[0] }] },
+    { ...supported, devices: [{ ...supported.devices[0], tagIds: ['tag_ffffffffffffffff'] }] },
     { ...valid, traffic: { ...valid.traffic, totalBytes: -4 } },
     { ...valid, traffic: { ...valid.traffic, observedAt: 'not-a-date' } },
     { ...valid, source: { ...valid.source, kind: 'arp' } },

test/web/style-boundaries.test.js

@@ -39,26 +39,26 @@ const expectedImports = [
 const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
 const acceptedLedger = {
   counts: {
-    cascadeEdges: 1072,
-    customProperties: 111,
-    declarations: 4170,
+    cascadeEdges: 1093,
+    customProperties: 115,
+    declarations: 4433,
     important: 0,
-    keyframes: 50,
-    media: 17,
-    rules: 1126,
-    variableReferences: 1042,
+    keyframes: 52,
+    media: 19,
+    rules: 1188,
+    variableReferences: 1130,
   },
   hashes: {
-    cascadeEdges: 'd60343b571f5a9bcf809609b4731500587da3bdd9ee9f40e33938ecbd8aec6ce',
-    customProperties: '42f9fa9f2caaab6e5d90ae7d224563355822fa270083ea3496cfe2caaaea50bf',
-    declarations: '15fc1474c16562886582469a7d240dde36882e682b266374fdca7f47f90c2b13',
+    cascadeEdges: '6676dd45ca19923561ef30b2057a9952a795fd142d83b612aaba70132378e91d',
+    customProperties: '81d1e70737ae5a8e4b20d4c1be1b24685975a404863444da4a8821be1f0d5097',
+    declarations: 'fcecaa0fb211a14826577bf9629e261b0b4b63b4601febebc43e8d757f6a07f1',
     duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
     duplicateSelectors: '8982145dba05b33bf1c93b2d54cfbe76305b276ff3c657aa020144016ada5848',
-    keyframes: 'af4b9ae18d070fd2462a9b050293f3821bf5017c6e7cc53bbe18dc826f0fe3b9',
-    ruleDeclarationSequences: '16ccf3b3b8b6f76e784c69a3f06a3abb6e3b57d5d0710dff4bdad23f87bad6c3',
-    selectors: 'b32eeeff7896fedd9057a953b61a8b149116a5c5ce110fb84bf06e24d22bf8ee',
-    variableReferences: 'c9f64054cfe384f90e5c47844ffbbc7fba60f5045efac5d272f45f1f451e950b',
-    witnesses: '2d952ddef91d3578857d7aeb1f469a9a6f3b7b4bba998ab6bc054d0028cf2785',
+    keyframes: '405688c9a452aa9d54e9c50dd30abb13143fdb5910f63f4474ecefcc800311e6',
+    ruleDeclarationSequences: '231bd9880d19c8d29e6d9538ccb934e135bd58b33155175e317b743916d93ef7',
+    selectors: '159b53f5cdd6c4aa6d892b9ed314d9a100345290d4c95e31a4c6be98b609c8b6',
+    variableReferences: 'd8f4abdb1ea6e9077283f342efef0ea920068165d0fc2ac4e7a9a22e16b31461',
+    witnesses: 'a84c2ee1c55cb68873f62f230aeec39f88093bcbb50493aaf47d852b13e6985c',
   },
 };
 
@@ -211,7 +211,7 @@ test('client typography uses the shared semantic scale outside the token owner',
 
 test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
   const witnesses = readStyleWitnesses(root);
-  assert.equal(witnesses.length, 1110);
+  assert.equal(witnesses.length, 1209);
   assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
   const ledger = createStyleLedger(readStyleSource(root), { witnesses });
   assert.deepEqual(ledger.counts, acceptedLedger.counts);
@@ -408,8 +408,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
   assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
 
   const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
-  assert.deepEqual(assets, ['index-jhWgOVxh.css']);
+  assert.deepEqual(assets, ['index-fn-ai4xB.css']);
   const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 158716);
-  assert.equal(sha256(built), 'b10c9602bdf224599db0262e2e872e3db2b3c75b85410d50c2fe42b69d44e14c');
+  assert.equal(built.byteLength, 168021);
+  assert.equal(sha256(built), 'a160cdc915a4a8e0b95e360ed721e6037cbeda28df4e0815ab6be43f1004176d');
 });