Add animated relative last-seen device timestamps

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

@@ -15,21 +15,25 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /api\.devices\.list\(\)/);
   assert.match(panel, /api\.devices\.update\(device\.id, patch, snapshot\.revision\)/);
   assert.match(panel, /<Tooltip>Изменить название<\/Tooltip>/);
+  assert.match(panel, /<TextMorph from=\{seen\.label\} to=\{seen\.relative\} \/>/);
+  assert.match(panel, /filter id="client-text-morph-goo"/);
   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"[\s\S]*autoFocus/);
   assert.match(styles, /\.client-devices \{\s*width: min\(560px, 100vw\)/);
-  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-pin/);
+  assert.match(styles, /\.client-device-last-seen:hover \.client-text-morph-value\.is-relative[\s\S]*opacity: 1/);
+  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-text-morph-value/);
 });
 
-test('device last-seen copy is compact with a precise relative tooltip', () => {
+test('device last-seen copy is compact with precise accessible and relative forms', () => {
   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',
+      relative: '12 минут назад',
       tooltip: '7 августа 2026 г. в 13:15 (12 минут назад)',
     },
   );