Refine device inventory layout and last-seen details

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

@@ -3,6 +3,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import test from 'node:test';
 import { fileURLToPath } from 'node:url';
+import { formatLastSeen } from '../../src/web/utils/format.js';
 
 const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
 const overview = fs.readFileSync(path.join(root, 'src/web/components/ClientOverviewPage.jsx'), 'utf8');
@@ -13,12 +14,23 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(overview, /isGateway && <button[\s\S]*client-devices-toggle/);
   assert.match(panel, /api\.devices\.list\(\)/);
   assert.match(panel, /api\.devices\.update\(device\.id, patch, snapshot\.revision\)/);
-  for (const field of ['IP', 'MAC', 'Интерфейс', 'Последний раз', 'Источник']) {
-    assert.match(panel, new RegExp(field));
-  }
+  assert.match(panel, /<Tooltip>Изменить название<\/Tooltip>/);
+  assert.match(panel, /client-device-addresses/);
+  assert.doesNotMatch(panel, /точная MAC|частная MAC|<dt>Источник<\/dt>/);
   assert.match(panel, /aria-pressed=\{device\.pinned\}/);
-  assert.match(panel, /maxLength="64" autoFocus/);
+  assert.match(panel, /maxLength="64"[\s\S]*autoFocus/);
   assert.match(styles, /\.client-devices \{\s*width: min\(560px, 100vw\)/);
-  assert.match(styles, /@media \(max-width: 560px\)[\s\S]*\.client-device-meta \{\s*grid-template-columns: 1fr/);
   assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-pin/);
 });
+
+test('device last-seen copy is compact with a precise relative tooltip', () => {
+  const lastSeen = new Date(2026, 7, 7, 13, 15);
+  const now = new Date(2026, 7, 7, 13, 27);
+  assert.deepEqual(
+    formatLastSeen(lastSeen.toISOString(), now),
+    {
+      label: 'Сегодня, 13:15',
+      tooltip: '7 августа 2026 г. в 13:15 (12 минут назад)',
+    },
+  );
+});