style: refine acrylic workbench surfaces

features/workbench/components/agent-task-ticker.tsx

@@ -20,23 +20,18 @@ type TickerTransitionDirection = -1 | 1;
 
 const tickerEase = [0.22, 1, 0.36, 1] as const;
 const tickerSwitchAnimationMs = 380;
-const tickerCardSurfaceClassName =
-  "glass-control border";
-
 const tickerCardVariants: Variants = {
   initial: (direction: TickerTransitionDirection) => ({
     opacity: 0.62,
     x: 0,
     y: direction > 0 ? 36 : -28,
-    rotate: 0,
-    filter: "brightness(0.955) saturate(0.95)"
+    rotate: 0
   }),
   exit: (direction: TickerTransitionDirection) => ({
     opacity: [1, 1, 0],
     x: 0,
     y: direction > 0 ? 36 : -28,
     rotate: 0,
-    filter: "brightness(1.02) saturate(1)",
     transition: {
       duration: 0.3,
       times: [0, 0.65, 1],
@@ -261,7 +256,7 @@ export function AgentTaskTicker({
             {isHovered && hasMultipleRunningTasks ? (
               <motion.div
                 key="task-indicator"
-                className="agent-task-ticker-indicator flex flex-col gap-1 rounded-full bg-[var(--glass-menu)] px-1 py-1 shadow-sm shadow-blue-950/10"
+                className="agent-task-ticker-indicator surface-control flex flex-col gap-1 rounded-full border px-1 py-1"
                 variants={tickerIndicatorVariants}
                 initial="initial"
                 animate="animate"
@@ -307,8 +302,7 @@ function TickerTaskCard({
       layout="position"
       className={cn(
         "absolute inset-x-0 top-0 h-16 overflow-hidden rounded-[22px] px-3 py-2",
-        tickerCardSurfaceClassName,
-        isActive ? "z-30" : "pointer-events-none z-10"
+        isActive ? "glass-transient z-30" : "surface-control pointer-events-none z-10 border"
       )}
       style={{ transformOrigin: "center top" }}
       custom={transitionDirection}
@@ -319,7 +313,6 @@ function TickerTaskCard({
         x: stackStyle.x,
         y: stackStyle.y,
         rotate: stackStyle.rotate,
-        filter: stackStyle.filter,
         transition: {
           duration: isActive ? 0.34 : 0.3,
           ease: tickerEase
@@ -449,8 +442,7 @@ function getTickerStackStyle(stackIndex: number) {
       opacity: 1,
       x: 0,
       y: 7,
-      rotate: 0,
-      filter: "brightness(0.985) saturate(0.98)"
+      rotate: 0
     };
   }
 
@@ -459,8 +451,7 @@ function getTickerStackStyle(stackIndex: number) {
       opacity: 1,
       x: 0,
       y: 14,
-      rotate: 0,
-      filter: "brightness(0.965) saturate(0.96)"
+      rotate: 0
     };
   }
 
@@ -468,7 +459,6 @@ function getTickerStackStyle(stackIndex: number) {
     opacity: 1,
     x: 0,
     y: 0,
-    rotate: 0,
-    filter: "brightness(1) saturate(1)"
+    rotate: 0
   };
 }