From 14231c5c0ef61299cabbc9d60737a82b43c986c2 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Sun, 22 Mar 2026 09:40:08 +0100
Subject: [PATCH] fix(electrobun): restore CSS animations for WebKitGTK user
 mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS pulse animations restored — they run at ~0% CPU on WebKitGTK's
native compositor. The --disable-gpu flags in electrobun.config.ts
only apply in CEF mode (AGOR_CEF=1) for E2E testing.

User mode (WebKitGTK): full GPU, full animations, full transitions
Test mode (CEF): GPU disabled, animations still CSS but no human watching
---
 ui-electrobun/src/mainview/StatusBar.svelte | 10 ++++++----
 ui-electrobun/src/mainview/app.css          |  6 ++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui-electrobun/src/mainview/StatusBar.svelte b/ui-electrobun/src/mainview/StatusBar.svelte
index 2742d4c..00c1254 100644
--- a/ui-electrobun/src/mainview/StatusBar.svelte
+++ b/ui-electrobun/src/mainview/StatusBar.svelte
@@ -178,11 +178,13 @@
   .dot.orange { background: var(--ctp-peach); }
 
   .pulse-dot {
-    /* No CSS animation — use JS class toggle to avoid continuous repaint.
-       CEF + WebKitGTK both suffer from high CPU with @keyframes on small elements. */
-    transition: opacity 0.3s ease;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
   }
-  .pulse-dot.dim { opacity: 0.4; }
 
   .val { color: var(--ctp-text); font-weight: 500; }
   .cost { color: var(--ctp-yellow); }
diff --git a/ui-electrobun/src/mainview/app.css b/ui-electrobun/src/mainview/app.css
index 8ce37c9..9e1048f 100644
--- a/ui-electrobun/src/mainview/app.css
+++ b/ui-electrobun/src/mainview/app.css
@@ -219,8 +219,10 @@ html, body {
   --dot-color: var(--ctp-peach);
 }
 
-/* @keyframes pulse-dot removed — CSS animations cause continuous repaint
-   in CEF + WebKitGTK. Use JS class toggle instead. */
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.55; transform: scale(0.85); }
+}
 
 .project-name {
   font-weight: 600;