Refine device inventory animations and diagnostics layout

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

@@ -28,6 +28,10 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /requestError\.code !== 'STATE_CONFLICT'[\s\S]*api\.devices\.list\(\)[\s\S]*Object\.keys\(patch\)\.some\(\(key\) => latestDevice\[key\] !== device\[key\]\)[\s\S]*api\.devices\.update\(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 orderChanged = previousOrder\.current\.length > 0/);
+  assert.match(panel, /previousScrollTop\.current - currentScrollTop/);
+  assert.match(panel, /next\.revision > current\.revision/);
+  assert.doesNotMatch(panel, /revision >= current\.revision/);
   assert.match(panel, /prefers-reduced-motion: reduce/);
   assert.match(api, /refresh: \(\) => request\('\/api\/devices\/refresh', \{ method: 'POST' \}\)/);
   assert.match(api, /setPolicy: \(id, mode, expectedRevision\) => request\(`\/api\/devices\/\$\{id\}\/policy`/);
@@ -38,7 +42,10 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /const hasName = Boolean\(device\.alias \|\| device\.hostname\)/);
   assert.match(panel, /client-device-alias-trigger[\s\S]*client-device-name-separator[\s\S]*client-device-ip/);
   assert.match(panel, /onClick=\{\(\) => startEditing\(device\)\}/);
-  assert.match(panel, /\{!hasName && <span className="client-device-edit-wrap/);
+  assert.match(panel, /<span className="client-device-edit-wrap client-tooltip-anchor">/);
+  assert.doesNotMatch(panel, /\{!hasName && <span className="client-device-edit-wrap/);
+  assert.match(panel, /pencilAnimationId === device\.id \? ' is-writing'/);
+  assert.match(panel, /onAnimationEnd=\{\(\) => setPencilAnimationId/);
   assert.match(panel, /COPY_FEEDBACK_MS = 800/);
   assert.match(panel, /IP скопирован/);
   assert.doesNotMatch(panel, /client-device-name-feedback|client-device-name-primary|is-address-only/);
@@ -110,7 +117,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-traffic strong \{[\s\S]*font-size: 10px/);
   assert.match(styles, /\.client-device-name-separator \{[\s\S]*color: var\(--client-muted\)/);
   assert.match(styles, /\.client-device-ip\.is-copied \{[\s\S]*client-device-ip-copy 800ms/);
-  assert.match(styles, /\.client-device-main \{[^}]*height: 34px[\s\S]*align-items: flex-end[\s\S]*padding-top: 11px/);
+  assert.match(styles, /\.client-device-main \{[^}]*height: 34px[\s\S]*align-items: flex-end[\s\S]*padding: 11px 27px 0 0/);
   assert.match(styles, /\.client-device-last-seen \{[^}]*height: 10px[\s\S]*align-items: center/);
   assert.match(styles, /\.client-device-traffic-value\.has-delta > \.is-total[\s\S]*translateY\(-0\.18em\)/);
   assert.match(styles, /\.client-device-last-seen\.is-online \{[\s\S]*color: var\(--client-accent\)/);
@@ -119,7 +126,9 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-pin-wrap\.client-tooltip-anchor:hover > \.client-tooltip[\s\S]*translate\(0, 0\)/);
   assert.match(styles, /\.client-device-pin:hover:not\(:disabled\) svg[\s\S]*translateY\(-2px\) rotate\(-12deg\)/);
   assert.match(styles, /\.client-device-pin\[aria-pressed="true"\] svg/);
-  assert.match(styles, /\.client-device-edit:hover svg[\s\S]*translate\(1px, -1px\) rotate\(-4deg\)/);
+  assert.match(styles, /\.client-device-edit-wrap \{[\s\S]*position: absolute;[\s\S]*right: 0;[\s\S]*bottom: 0/);
+  assert.match(styles, /\.client-device-edit\.is-writing svg \{[\s\S]*client-device-pencil-write 620ms/);
+  assert.match(styles, /@keyframes client-device-pencil-write[\s\S]*0%, 100%[\s\S]*translate\(1px, -1px\) rotate\(-5deg\)/);
   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 svg[\s\S]*\.client-device-alias-trigger[\s\S]*\.client-device-ip[\s\S]*\.client-device-traffic-value > span[\s\S]*\.client-device-traffic-breakdown[\s\S]*\.client-device-traffic-lines[\s\S]*\.client-text-morph-value/);

test/web/responsive-layout-contract.test.js

@@ -118,7 +118,9 @@ test('connectivity diagnostics render stable compact tables before the first run
   assert.match(diagnostics, /Добавить свой сервис/);
   assert.match(diagnostics, /client-diagnostics-refresh/);
   assert.doesNotMatch(diagnostics, /Проверить ещё раз|client-diagnostics-empty|client-diagnostics-run/);
-  assert.match(rule('.client-diagnostics-feedback'), /min-height:\s*34px/);
+  assert.match(diagnostics, /\{\(error \|\| result\) && <div className="client-diagnostics-feedback"/);
+  assert.doesNotMatch(diagnostics, /PathDetails|client-diagnostics-details|Технические детали/);
+  assert.doesNotMatch(rule('.client-diagnostics-feedback'), /min-height:/);
   assert.match(rule('.client-diagnostics-table'), /table-layout:\s*fixed/);
 });