From b17ccf01e58dd7b275360c1a3bda64cb436a130d Mon Sep 17 00:00:00 2001
From: Trevor Walker <rynfar@gmail.com>
Date: Fri, 28 Aug 2026 23:15:27 -0600
Subject: [PATCH] fix(web): settle the provider update marker once instead of
 bouncing forever

The update-available arrow ran [animation:bounce_2.4s_ease-in-out_infinite], so
it repainted for as long as the Providers page stayed open. AGENTS.md rules that
class out - continuously repainting animations peg the GPU on high-refresh
displays - and bounce easing reads dated next to the rest of the app's motion.

Keeps the cue, drops the loop. A named keyframe settles the icon once on
appearance with ease-out-quint, following the finite-iteration pattern already
used by settings-search-target-pulse. motion-reduce still disables it.

Closes #148.
---
 .../settings/ProviderInstanceCard.tsx         |  2 +-
 apps/web/src/index.css                        | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index b41135964..f0202f29c 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -760,7 +760,7 @@ export function ProviderInstanceCard({
       <ArrowUpCircleIcon
         aria-hidden
         className={cn(
-          "size-3.5 [animation:bounce_2.4s_ease-in-out_infinite] motion-reduce:animate-none",
+          "provider-update-marker size-3.5 motion-reduce:animate-none",
           versionAdvisory.emphasis === "strong" ? "text-warning" : "text-update-foreground",
         )}
       />
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index dbe7f2096..bab9eec7f 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -506,6 +506,26 @@ html[data-dot-matrix-motion="efficient"] .dot-matrix-dot[data-animated="chase"]
   }
 }
 
+/* The provider update marker draws the eye once when the row appears, then
+   stops. It used an infinite bounce, which repaints for as long as Settings is
+   open — the class AGENTS.md rules out — and bounce easing reads dated next to
+   the rest of the app's motion. Ease-out-quint settles the way a real object
+   would. */
+@keyframes provider-update-marker-settle {
+  0% {
+    transform: translateY(-2px);
+    opacity: 0.55;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.provider-update-marker {
+  animation: provider-update-marker-settle 320ms cubic-bezier(0.22, 1, 0.36, 1) 1;
+}
+
 @keyframes live-activity-focus {
   0% {
     transform: translateX(0);