From f7f789ab813bc0eab8cbca75b9fee4d258246232 Mon Sep 17 00:00:00 2001
From: Auto <leon.vanzyl@gmail.com>
Date: Wed, 31 Dec 2025 08:17:19 +0200
Subject: [PATCH] add shimmer scanning effect to thought text

---
 ui/src/components/AgentThought.tsx |  7 +++++--
 ui/src/styles/globals.css          | 25 +++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/AgentThought.tsx b/ui/src/components/AgentThought.tsx
index 7b46472..8cc8508 100644
--- a/ui/src/components/AgentThought.tsx
+++ b/ui/src/components/AgentThought.tsx
@@ -131,9 +131,12 @@ export function AgentThought({ logs, agentStatus }: AgentThoughtProps) {
           )}
         </div>
 
-        {/* Thought text with fade transition */}
+        {/* Thought text with fade transition + shimmer effect when running */}
         <p
-          className="font-mono text-sm text-[var(--color-neo-text)] truncate transition-all duration-150 ease-out"
+          className={`
+            font-mono text-sm truncate transition-all duration-150 ease-out
+            ${isRunning ? 'animate-shimmer' : 'text-[var(--color-neo-text)]'}
+          `}
           style={{
             opacity: textVisible ? 1 : 0,
             transform: textVisible ? 'translateY(0)' : 'translateY(-4px)',
diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
index 2505ba5..a1047a2 100644
--- a/ui/src/styles/globals.css
+++ b/ui/src/styles/globals.css
@@ -345,6 +345,15 @@
   }
 }
 
+@keyframes shimmer {
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+}
+
 /* ============================================================================
    Utilities Layer
    ============================================================================ */
@@ -370,6 +379,22 @@
     animation: thoughtFade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
   }
 
+  .animate-shimmer {
+    background: linear-gradient(
+      90deg,
+      var(--color-neo-text) 0%,
+      var(--color-neo-text) 40%,
+      var(--color-neo-progress) 50%,
+      var(--color-neo-text) 60%,
+      var(--color-neo-text) 100%
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: shimmer 2s ease-in-out infinite;
+  }
+
   .font-display {
     font-family: var(--font-neo-display);
   }