Add device inventory refresh endpoint and auto-refresh UI

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,