[DEV] Refactor Computer-Use Overlay: Replace 'Purple Haze' with Animated Aurora

[JasonMun7]

🔨 The Task

Refactor the fullscreen overlay that appears when Echo takes over the user’s screen for computer-use actions. We need to replace the static "purple haze" filter with a dynamic, subtly animated "Aurora Borealis" effect that utilizes the defined Echo lavender-to-cyan gradient.

🥅 Goal

The current "haze" looks static and unpolished. The goal is to make the "takeover" state feel active and deliberate. An animated aurora signals that a powerful agent is running, and the specific lavender/cyan gradient reinforces the Echo branding.

📝 Implementation Details

• Aurora Shader Implementation: Explore using a custom GLSL shader (via react-three-fiber or similar) or an animated SVG/Canvas element to generate the dynamic aurora effect.
• Gradient Definition: Ensure the animation strictly uses the defined Echo brand palette: (e.g., #E6E6FA for Lavender, #00FFFF for Cyan).
• Flow & Motion: The aurora should have slow, smooth, organic motion (like real-world auroras) to avoid being distracting or resource-intensive during agent execution.
• Opacity & Interaction: Maintain high visibility for the actual screen content below the overlay. The aurora should be subtle and non-blocking, with appropriate blending modes (e.g., screen or lighten).
• State Trigger: Verify the animation only triggers when the agent explicitly enters the ComputerUseNode (e.g., during screen control or clicking actions).

⚠️ Risk Level

Low / Medium
This is a cosmetic UI enhancement. The risk is primarily performance overhead if the animation (especially via shader or high-res SVG) consumes too much GPU/CPU while the agent is simultaneously running vision/action loops. The fallback should be a static version of the gradient.