Add device inventory refresh endpoint and auto-refresh UI

src/web/api.js

@@ -81,6 +81,7 @@ export const api = {
   },
   devices: {
     list: () => request('/api/devices'),
+    refresh: () => request('/api/devices/refresh', { method: 'POST' }),
     update: (id, patch, expectedRevision) => request(`/api/devices/${id}`, {
       method: 'PUT',
       body: JSON.stringify({ ...patch, expectedRevision }),

src/web/components/DevicesPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { api } from '../api.js';
 import { formatLastSeen } from '../utils/format.js';
 
@@ -7,6 +7,8 @@ const STATUS_LABELS = {
   recent: 'Недавно',
   offline: 'Не в сети',
 };
+const AUTO_REFRESH_MS = 15_000;
+const DEVICE_MOVE_MS = 520;
 
 function Tooltip({ children }) {
   return <span className="client-tooltip" role="tooltip">{children}</span>;
@@ -28,27 +30,65 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const [editingId, setEditingId] = useState('');
   const [alias, setAlias] = useState('');
   const [savingId, setSavingId] = useState('');
+  const [refreshing, setRefreshing] = useState(false);
+  const [refreshCycle, setRefreshCycle] = useState(0);
+  const deviceNodes = useRef(new Map());
+  const previousPositions = useRef(new Map());
+  const devices = snapshot?.devices || [];
 
-  async function load(quiet = false) {
+  async function load(quiet = false, discover = false) {
     if (!quiet) setStatus(snapshot ? 'refreshing' : 'loading');
+    setRefreshing(true);
     try {
-      const next = await api.devices.list();
+      const next = await (discover ? api.devices.refresh() : api.devices.list());
       setSnapshot((current) => !current || next.revision >= current.revision ? next : current);
       setError(null);
       setStatus('ready');
     } catch (requestError) {
       setError(requestError);
       setStatus('error');
+    } finally {
+      setRefreshing(false);
+      setRefreshCycle((cycle) => cycle + 1);
     }
   }
 
   useEffect(() => {
     if (!open) return undefined;
     load();
-    const timer = setInterval(() => load(true), 15_000);
-    return () => clearInterval(timer);
+    return undefined;
   }, [open]);
 
+  useEffect(() => {
+    if (!open || refreshing || status === 'loading') return undefined;
+    const timer = setTimeout(() => load(true), AUTO_REFRESH_MS);
+    return () => clearTimeout(timer);
+  }, [open, refreshCycle, refreshing, status]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      previousPositions.current.clear();
+      return;
+    }
+    const positions = new Map();
+    for (const [id, node] of deviceNodes.current) {
+      node.getAnimations().forEach((animation) => animation.cancel());
+      positions.set(id, node.getBoundingClientRect());
+    }
+    if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      for (const [id, after] of positions) {
+        const before = previousPositions.current.get(id);
+        const deltaY = before ? before.top - after.top : 0;
+        if (Math.abs(deltaY) < 1) continue;
+        deviceNodes.current.get(id)?.animate([
+          { transform: `translateY(${deltaY}px)` },
+          { transform: 'translateY(0)' },
+        ], { duration: DEVICE_MOVE_MS, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' });
+      }
+    }
+    previousPositions.current = positions;
+  }, [devices, open]);
+
   async function updateDevice(device, patch) {
     setSavingId(device.id);
     try {
@@ -71,7 +111,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     setEditingId('');
   }
 
-  const devices = snapshot?.devices || [];
   return (
     <aside
       ref={panelRef}
@@ -90,7 +129,27 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
           onClick={onClose}
         >×</button>
         <header className="client-instructions-header client-devices-header">
-          <span>Gateway · {devices.length}</span>
+          <div className="client-devices-kicker">
+            <span>Gateway · {devices.length}</span>
+            <span className="client-devices-refresh-wrap client-tooltip-anchor">
+              <button
+                className={`client-devices-refresh${refreshing ? ' is-refreshing' : ''}`}
+                type="button"
+                aria-label={refreshing ? 'Обновляем устройства' : 'Обновить устройства сейчас'}
+                aria-busy={refreshing}
+                disabled={refreshing}
+                onClick={() => load(true, true)}
+              >
+                <svg key={refreshCycle} className="client-devices-refresh-ring" viewBox="0 0 24 24" aria-hidden="true">
+                  <circle cx="12" cy="12" r="10" pathLength="1" />
+                </svg>
+                <svg className="client-devices-refresh-icon" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M20 11a8 8 0 1 0-2.3 6.7M20 5v6h-6" />
+                </svg>
+              </button>
+              <Tooltip>{refreshing ? 'Обновляем устройства…' : 'Обновить сейчас · автоматически каждые 15 с'}</Tooltip>
+            </span>
+          </div>
           <h2 id="client-devices-title">Устройства</h2>
           <div className="client-instructions-intro">
             <p>Устройства, которые Gateway видит в локальной таблице соседей.</p>
@@ -120,7 +179,14 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
             const saving = savingId === device.id;
             const seen = formatLastSeen(device.lastSeenAt);
             const uncertainIdentity = device.confidence !== 'high';
-            return <article className={`client-device is-${device.status}`} key={device.id}>
+            return <article
+              ref={(node) => {
+                if (node) deviceNodes.current.set(device.id, node);
+                else deviceNodes.current.delete(device.id);
+              }}
+              className={`client-device is-${device.status}`}
+              key={device.id}
+            >
               <div className="client-device-heading">
                 <span className="client-device-status">{STATUS_LABELS[device.status]}</span>
                 {editing ? (

src/web/styles.css

@@ -723,6 +723,98 @@ p {
   margin-bottom: 28px;
 }
 
+.client-devices-kicker {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.client-devices-refresh-wrap {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+}
+
+.client-devices-refresh {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--client-muted);
+  cursor: pointer;
+  transition: color 220ms ease, filter 300ms ease;
+}
+
+.client-devices-refresh:hover:not(:disabled),
+.client-devices-refresh:focus-visible,
+.client-devices-refresh.is-refreshing {
+  color: var(--client-accent);
+  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 44%, transparent));
+}
+
+.client-devices-refresh:focus-visible {
+  outline: 2px solid var(--client-accent);
+  outline-offset: 2px;
+}
+
+.client-devices-refresh:disabled {
+  cursor: wait;
+}
+
+.client-devices-refresh-ring,
+.client-devices-refresh-icon {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.client-devices-refresh-ring {
+  transform: rotate(-90deg);
+}
+
+.client-devices-refresh-ring circle {
+  stroke-width: 1;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  opacity: 0.68;
+  animation: client-devices-refresh-progress 15s linear forwards;
+}
+
+.client-devices-refresh-icon {
+  width: 12px;
+  height: 12px;
+  stroke-width: 1.8;
+}
+
+.client-devices-refresh.is-refreshing .client-devices-refresh-ring circle {
+  stroke-dashoffset: 0;
+  animation: none;
+}
+
+.client-devices-refresh.is-refreshing .client-devices-refresh-icon {
+  animation: client-spin 900ms linear infinite;
+}
+
+.client-instructions-header .client-devices-refresh-wrap > .client-tooltip {
+  text-transform: none;
+}
+
+@keyframes client-devices-refresh-progress {
+  to { stroke-dashoffset: 0; }
+}
+
 .client-devices-source,
 .client-devices-error,
 .client-devices-empty {
@@ -922,14 +1014,14 @@ p {
   white-space: nowrap;
 }
 
-.client-device-pin-wrap > .client-tooltip {
+.client-device-pin-wrap.client-tooltip-anchor > .client-tooltip {
   right: 0;
   left: auto;
   transform: translate(0, 2px);
 }
 
-.client-device-pin-wrap:hover > .client-tooltip,
-.client-device-pin-wrap:has(> :focus-visible) > .client-tooltip {
+.client-device-pin-wrap.client-tooltip-anchor:hover > .client-tooltip,
+.client-device-pin-wrap.client-tooltip-anchor:has(> :focus-visible) > .client-tooltip {
   transform: translate(0, 0);
 }
 
@@ -3987,6 +4079,9 @@ p {
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,
+  .client-devices-refresh,
+  .client-devices-refresh-ring circle,
+  .client-devices-refresh-icon,
   .client-text-morph-value,
   .client-subscription-edit,
   .client-subscription-edit::after,
@@ -3998,6 +4093,10 @@ p {
     animation: none;
   }
 
+  .client-devices-refresh-ring circle {
+    stroke-dashoffset: 0;
+  }
+
   .client-local-rules,
   .client-local-rules-toggle,
   .client-local-rules-toggle svg,