From 253a6b427a4ba19c09b91fba3cc6ff582ea2ea3a Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 21 Aug 2025 14:42:31 -0600
Subject: [PATCH] animate fade for report

---
 .../ui/report/elements/StreamingText.tsx      |  5 +----
 apps/web/src/styles/tailwindAnimations.css    | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/ui/report/elements/StreamingText.tsx b/apps/web/src/components/ui/report/elements/StreamingText.tsx
index 8130eeed8..6cabd1964 100644
--- a/apps/web/src/components/ui/report/elements/StreamingText.tsx
+++ b/apps/web/src/components/ui/report/elements/StreamingText.tsx
@@ -15,10 +15,7 @@ export function StreamingText(props: PlateTextProps) {
     <PlateText
       className={cn(
         'streaming-node',
-        isStreaming && [
-          'bg-brand/4 border-b-brand/10 border-b-2',
-          'transition-all duration-200 ease-in-out'
-        ],
+        isStreaming && ['animate-highlight-fade'],
         // Only show the animated dot on the last streaming text node
         isLastStreamingText && [
           'after:ml-1.5 after:inline-block after:h-3 after:w-3 after:animate-pulse after:rounded-full after:bg-purple-500 after:align-middle after:content-[""]'
diff --git a/apps/web/src/styles/tailwindAnimations.css b/apps/web/src/styles/tailwindAnimations.css
index a92df01e6..cb6918838 100644
--- a/apps/web/src/styles/tailwindAnimations.css
+++ b/apps/web/src/styles/tailwindAnimations.css
@@ -60,6 +60,28 @@
   }
 }
 
+/* 
+  highlightFade animation: 
+  - Animates a highlight background and a bottom border only (no outline).
+  - The border is only on the bottom, not using outline.
+*/
+@keyframes highlightFade {
+  0% {
+    /* Use highlight background, fallback to brand, then yellow */
+    background-color: var(--color-highlight-background, var(--color-purple-200, yellow));
+    /* Only bottom border is visible at start */
+    border-bottom: 1px solid var(--color-highlight-border, var(--color-purple-300, yellow));
+  }
+  100% {
+    background-color: var(--color-highlight-to-background, transparent);
+    border-bottom: 0px solid var(--color-highlight-to-border, transparent);
+  }
+}
+
+.animate-highlight-fade {
+  animation: highlightFade var(--tw-duration, 3s) ease-out forwards;
+}
+
 .fade-in {
   animation-name: fade-in;
   animation-duration: var(--tw-duration, 0.7s);