From 91440213594dfcd51ffb4ea58e885bad5f5de656 Mon Sep 17 00:00:00 2001
From: Max Malkin <maxim_malkin@outlook.com>
Date: Tue, 3 Mar 2026 20:11:03 -0700
Subject: [PATCH] replace pending badge pulse with animated border outline

---
 services/approval-ui/src/index.css            | 40 +++++++++++++++++++
 services/approval-ui/src/pages/AgentsPage.tsx |  4 +-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/services/approval-ui/src/index.css b/services/approval-ui/src/index.css
index 0bf9967..cec4d9f 100644
--- a/services/approval-ui/src/index.css
+++ b/services/approval-ui/src/index.css
@@ -48,6 +48,46 @@ body::after {
 	}
 }
 
+/* Pending badge — light travelling around the border */
+@keyframes border-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.pending-badge {
+	position: relative;
+	overflow: hidden;
+	background: rgba(245, 158, 11, 0.12);
+}
+
+/* Rotating conic gradient — creates the travelling-light border effect */
+.pending-badge::before {
+	content: "";
+	position: absolute;
+	/* Must be larger than the element so corners stay covered */
+	inset: -200%;
+	width: 500%;
+	height: 500%;
+	background: conic-gradient(
+		from 0deg,
+		transparent 0deg,
+		transparent 310deg,
+		rgba(245, 158, 11, 0.2) 330deg,
+		#f59e0b 348deg,
+		rgba(245, 158, 11, 0.2) 360deg
+	);
+	animation: border-spin 2.5s linear infinite;
+}
+
+/* Masks the interior, leaving only a ~1px amber border visible */
+.pending-badge::after {
+	content: "";
+	position: absolute;
+	inset: 1px;
+	background: rgba(245, 158, 11, 0.1);
+}
+
 @keyframes fade-in {
 	from {
 		opacity: 0;
diff --git a/services/approval-ui/src/pages/AgentsPage.tsx b/services/approval-ui/src/pages/AgentsPage.tsx
index 662bb33..8644ce2 100644
--- a/services/approval-ui/src/pages/AgentsPage.tsx
+++ b/services/approval-ui/src/pages/AgentsPage.tsx
@@ -186,8 +186,8 @@ function AgentRow({ agent }: { agent: AgentSummary }) {
 							{status.label}
 						</span>
 						{agent.pending_grant_id && (
-							<span className="font-mono text-[10px] tracking-wide text-amber border border-amber-dim px-1.5 py-0.5 bg-amber-glow animate-pulse">
-								PENDING APPROVAL
+							<span className="pending-badge font-mono text-[10px] tracking-wide text-amber px-1.5 py-0.5">
+								<span className="relative z-10">PENDING APPROVAL</span>
 							</span>
 						)}
 					</div>