YOLO mode effects

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" />

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
    ============================================================================ */