Dedupe same-tick visibility+focus reload bump; use motion tokens (CL-6487)

plugins-page.tsx and connections-section.tsx: a shared
refreshWhenVisible handler with a microtask guard collapses the
same-tick visibilitychange+focus pair into a single scheduled reload
instead of two.

app.css: chat-sidebar-row-menu-trigger's transition and
onboarding-phase-in's animation now use --duration-micro/--duration-large
and --ease-out instead of a bare 120ms/0.28s ease, matching this PR's
own Motion section guidance.

Author: TheGreatAxios

apps/web/src/app.css

@@ -649,9 +649,9 @@ select:disabled,
   color: var(--muted-foreground);
   opacity: 0;
   transition:
-    opacity 120ms var(--ease-out, ease),
-    background 120ms var(--ease-out, ease),
-    color 120ms var(--ease-out, ease);
+    opacity var(--duration-micro, 150ms) var(--ease-out, ease),
+    background var(--duration-micro, 150ms) var(--ease-out, ease),
+    color var(--duration-micro, 150ms) var(--ease-out, ease);
 }
 
 .chat-sidebar-row-menu-trigger::after {
@@ -2321,7 +2321,8 @@ select:disabled,
    attention-seeking animation, fully off under reduced motion.
    DESIGN.md's motion ceiling is 300ms — stays at 280ms. */
 .onboarding-phase {
-  animation: onboarding-phase-in 0.28s ease both;
+  animation: onboarding-phase-in var(--duration-large, 300ms) var(--ease-out, ease)
+    both;
 }
 
 @keyframes onboarding-phase-in {

apps/web/src/pages/plugins-page.tsx

@@ -153,18 +153,25 @@ export function PluginsRoute({
   // use for in-room connect cards.
   useEffect(() => {
     if (selectedTenantId === null) return;
-    const refresh = () => {
-      if (document.visibilityState === "visible") {
+    // `visibilitychange` and `focus` both fire in the same tick when a tab
+    // regains focus; the microtask guard collapses that pair into one
+    // scheduled bump instead of two back-to-back reloads.
+    let bumpScheduled = false;
+    const refreshWhenVisible = () => {
+      if (document.visibilityState !== "visible") return;
+      if (bumpScheduled) return;
+      bumpScheduled = true;
+      queueMicrotask(() => {
+        bumpScheduled = false;
         setPluginsReloadKey((key) => key + 1);
-      }
+      });
     };
-    const onFocus = () => setPluginsReloadKey((key) => key + 1);
-    document.addEventListener("visibilitychange", refresh);
-    window.addEventListener("focus", onFocus);
-    const interval = setInterval(refresh, 30_000);
+    document.addEventListener("visibilitychange", refreshWhenVisible);
+    window.addEventListener("focus", refreshWhenVisible);
+    const interval = setInterval(refreshWhenVisible, 30_000);
     return () => {
-      document.removeEventListener("visibilitychange", refresh);
-      window.removeEventListener("focus", onFocus);
+      document.removeEventListener("visibilitychange", refreshWhenVisible);
+      window.removeEventListener("focus", refreshWhenVisible);
       clearInterval(interval);
     };
   }, [selectedTenantId]);

packages/settings-ui/src/connections-section.tsx

@@ -289,18 +289,25 @@ export function ConnectionsSection({
   // solve via `subscribeConnectState`.
   useEffect(() => {
     if (tenantId === null) return;
-    const refresh = () => {
-      if (document.visibilityState === "visible") {
+    // `visibilitychange` and `focus` both fire in the same tick when a tab
+    // regains focus; the microtask guard collapses that pair into one
+    // scheduled bump instead of two back-to-back reloads.
+    let bumpScheduled = false;
+    const refreshWhenVisible = () => {
+      if (document.visibilityState !== "visible") return;
+      if (bumpScheduled) return;
+      bumpScheduled = true;
+      queueMicrotask(() => {
+        bumpScheduled = false;
         setReloadKey((value) => value + 1);
-      }
+      });
     };
-    const onFocus = () => setReloadKey((value) => value + 1);
-    document.addEventListener("visibilitychange", refresh);
-    window.addEventListener("focus", onFocus);
-    const interval = setInterval(refresh, 30_000);
+    document.addEventListener("visibilitychange", refreshWhenVisible);
+    window.addEventListener("focus", refreshWhenVisible);
+    const interval = setInterval(refreshWhenVisible, 30_000);
     return () => {
-      document.removeEventListener("visibilitychange", refresh);
-      window.removeEventListener("focus", onFocus);
+      document.removeEventListener("visibilitychange", refreshWhenVisible);
+      window.removeEventListener("focus", refreshWhenVisible);
       clearInterval(interval);
     };
   }, [tenantId]);