From a195d6de08c4c450ea3d2f6c88d3b41a8ba66c57 Mon Sep 17 00:00:00 2001
From: Auto <leon.vanzyl@gmail.com>
Date: Fri, 9 Jan 2026 08:08:59 +0200
Subject: [PATCH] YOLO mode effects

---
 ui/src/components/AgentControl.tsx | 12 +++---
 ui/src/styles/globals.css          | 64 +++++++++++++++++++++++++-----
 2 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/AgentControl.tsx b/ui/src/components/AgentControl.tsx
index 5484059..1ae77b3 100644
--- a/ui/src/components/AgentControl.tsx
+++ b/ui/src/components/AgentControl.tsx
@@ -1,4 +1,4 @@
-import { Play, Square, Loader2, Flame } from 'lucide-react'
+import { Play, Square, Loader2 } from 'lucide-react'
 import {
   useStartAgent,
   useStopAgent,
@@ -40,8 +40,6 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
         >
           {isLoading ? (
             <Loader2 size={18} className="animate-spin" />
-          ) : yoloMode ? (
-            <Flame size={18} />
           ) : (
             <Play size={18} />
           )}
@@ -50,9 +48,11 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
         <button
           onClick={handleStop}
           disabled={isLoading}
-          className="neo-btn neo-btn-danger text-sm py-2 px-3"
-          title="Stop Agent"
-          aria-label="Stop Agent"
+          className={`neo-btn text-sm py-2 px-3 ${
+            yoloMode ? 'neo-btn-yolo' : 'neo-btn-danger'
+          }`}
+          title={yoloMode ? 'Stop Agent (YOLO Mode)' : 'Stop Agent'}
+          aria-label={yoloMode ? 'Stop Agent in YOLO Mode' : 'Stop Agent'}
         >
           {isLoading ? (
             <Loader2 size={18} className="animate-spin" />
diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
index c4c9129..274cb2f 100644
--- a/ui/src/styles/globals.css
+++ b/ui/src/styles/globals.css
@@ -163,21 +163,29 @@
     transform: none;
   }
 
-  /* YOLO Mode Button - Fiery gradient for when YOLO mode is enabled */
-  /* Uses darker orange colors for better contrast with white text (WCAG AA) */
+  /* YOLO Mode Button - Animated fire effect for when YOLO mode is enabled */
   .neo-btn-yolo {
-    background: linear-gradient(135deg, #d64500, #e65c00);
+    background: linear-gradient(
+      0deg,
+      #8b0000 0%,
+      #d64500 30%,
+      #ff6a00 60%,
+      #ffa500 100%
+    );
+    background-size: 100% 200%;
     color: #ffffff;
-    box-shadow:
-      4px 4px 0 var(--color-neo-border),
-      0 0 12px rgba(255, 84, 0, 0.4);
+    animation: fireGlow 0.8s ease-in-out infinite, fireGradient 1.5s ease-in-out infinite;
   }
 
   .neo-btn-yolo:hover {
-    background: linear-gradient(135deg, #ff5400, #ff6a00);
-    box-shadow:
-      6px 6px 0 var(--color-neo-border),
-      0 0 16px rgba(255, 84, 0, 0.5);
+    background: linear-gradient(
+      0deg,
+      #a00000 0%,
+      #e65c00 30%,
+      #ff7800 60%,
+      #ffb700 100%
+    );
+    background-size: 100% 200%;
   }
 
   /* Inputs */
@@ -371,6 +379,42 @@
   }
 }
 
+@keyframes fireGlow {
+  0%, 100% {
+    box-shadow:
+      4px 4px 0 var(--color-neo-border),
+      0 0 10px rgba(255, 100, 0, 0.5),
+      0 0 20px rgba(255, 60, 0, 0.3);
+  }
+  25% {
+    box-shadow:
+      4px 4px 0 var(--color-neo-border),
+      0 0 15px rgba(255, 80, 0, 0.6),
+      0 0 30px rgba(255, 40, 0, 0.4);
+  }
+  50% {
+    box-shadow:
+      4px 4px 0 var(--color-neo-border),
+      0 0 12px rgba(255, 120, 0, 0.7),
+      0 0 25px rgba(255, 50, 0, 0.5);
+  }
+  75% {
+    box-shadow:
+      4px 4px 0 var(--color-neo-border),
+      0 0 18px rgba(255, 70, 0, 0.55),
+      0 0 35px rgba(255, 30, 0, 0.35);
+  }
+}
+
+@keyframes fireGradient {
+  0%, 100% {
+    background-position: 0% 100%;
+  }
+  50% {
+    background-position: 100% 0%;
+  }
+}
+
 /* ============================================================================
    Utilities Layer
    ============================================================================ */