animate fade for report

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-[""]'

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);