🤖 perf: fix shimmer animation frame drops during compaction (#980)

Use CSS transform animation (compositor thread) instead of
background-position (main thread repaint) to prevent frame drops when
compaction summary is streaming.

## Changes
- **CompactionBackground**: Use `translateX` transform instead of
`background-position`
- Add `shimmer-slide` keyframes to globals.css (runs on compositor
thread)
- Add `StreamingCompaction` story to visualize the effect

## Why this fixes frame drops
CSS `transform` animations run on the GPU compositor thread, completely
off the main JavaScript thread. This matters during streaming when the
main thread is busy with React updates and text parsing. In contrast,
`background-position` triggers repaints on every frame.

_Generated with `mux`_

Author: ammar-agent

src/browser/components/Messages/CompactionBackground.tsx

@@ -1,27 +1,35 @@
 import React from "react";
 
 /**
- * Animated background for compaction streaming
- * Shimmer effect with moving gradient and particles for dynamic appearance
+ * Animated background for compaction streaming.
+ * Combines a subtle gradient with a GPU-accelerated shimmer effect.
+ *
+ * Uses CSS transform animation (compositor thread) instead of background-position
+ * (main thread repaint) to avoid frame drops during heavy streaming work.
  */
-
 export const CompactionBackground: React.FC = () => {
   return (
     <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-md">
+      {/* Subtle gradient background */}
       <div
-        className="absolute inset-0 animate-[gradient-move_8s_ease_infinite] opacity-40"
+        className="absolute inset-0 opacity-40"
         style={{
           background:
             "linear-gradient(-45deg, var(--color-plan-mode-alpha), color-mix(in srgb, var(--color-plan-mode) 30%, transparent), var(--color-plan-mode-alpha), color-mix(in srgb, var(--color-plan-mode) 25%, transparent))",
-          backgroundSize: "400% 400%",
         }}
       />
+      {/* Shimmer uses CSS transform animation - runs on compositor thread, not main thread */}
+      {/* Math: element is 300% wide, highlight at 50% = 150% from left edge.
+          marginLeft -180% puts highlight at -30% (off-screen left).
+          translateX 53.33% (of 300%) = 160%, moving highlight to 130% (off-screen right). */}
       <div
-        className="absolute inset-0 animate-[shimmer_3s_infinite_linear]"
+        className="absolute inset-0 animate-[shimmer-slide_3s_infinite_linear]"
+        data-chromatic="ignore"
         style={{
           background:
             "linear-gradient(90deg, transparent 0%, transparent 40%, var(--color-plan-mode-alpha) 50%, transparent 60%, transparent 100%)",
-          backgroundSize: "1000px 100%",
+          width: "300%",
+          marginLeft: "-180%",
         }}
       />
     </div>

src/browser/stories/App.chat.stories.tsx

@@ -7,6 +7,7 @@ import {
   STABLE_TIMESTAMP,
   createUserMessage,
   createAssistantMessage,
+  createCompactionRequestMessage,
   createFileReadTool,
   createFileEditTool,
   createTerminalTool,
@@ -325,3 +326,46 @@ export const GenericTool: AppStory = {
     });
   },
 };
+
+/** Streaming compaction with shimmer effect - tests GPU-accelerated animation */
+export const StreamingCompaction: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() =>
+        setupStreamingChatStory({
+          workspaceId: "ws-compaction",
+          messages: [
+            createUserMessage("msg-1", "Help me refactor this codebase", {
+              historySequence: 1,
+              timestamp: STABLE_TIMESTAMP - 300000,
+            }),
+            createAssistantMessage(
+              "msg-2",
+              "I've analyzed the codebase and made several improvements to the architecture.",
+              {
+                historySequence: 2,
+                timestamp: STABLE_TIMESTAMP - 200000,
+              }
+            ),
+            createCompactionRequestMessage("msg-3", {
+              historySequence: 3,
+              timestamp: STABLE_TIMESTAMP - 3000,
+            }),
+          ],
+          streamingMessageId: "msg-4",
+          historySequence: 4,
+          streamText:
+            "## Conversation Summary\n\nThe user requested help refactoring the codebase. Key changes made:\n\n- Restructured component hierarchy for better separation of concerns\n- Extracted shared utilities into dedicated modules\n- Improved type safety across API boundaries",
+        })
+      }
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows the compaction shimmer effect during streaming. The shimmer uses GPU-accelerated CSS transforms instead of background-position animations to prevent frame drops.",
+      },
+    },
+  },
+};

src/browser/stories/mockFactory.ts

@@ -171,6 +171,29 @@ export function createUserMessage(
   };
 }
 
+/** Create a compaction request user message (triggers shimmer effect on streaming response) */
+export function createCompactionRequestMessage(
+  id: string,
+  opts: { historySequence: number; timestamp?: number; rawCommand?: string }
+): ChatMuxMessage {
+  const rawCommand = opts.rawCommand ?? "/compact";
+  return {
+    type: "message",
+    id,
+    role: "user",
+    parts: [{ type: "text", text: rawCommand }],
+    metadata: {
+      historySequence: opts.historySequence,
+      timestamp: opts.timestamp ?? STABLE_TIMESTAMP,
+      muxMetadata: {
+        type: "compaction-request",
+        rawCommand,
+        parsed: {},
+      },
+    },
+  };
+}
+
 export function createAssistantMessage(
   id: string,
   text: string,

src/browser/styles/globals.css

@@ -1655,13 +1655,13 @@ pre code {
   box-shadow: var(--thumb-shadow, none);
 }
 
-/* Custom animations for CompactionBackground */
-@keyframes shimmer {
-  0% {
-    background-position: -1000px 0;
+/* GPU-accelerated shimmer for CompactionBackground - runs on compositor thread */
+@keyframes shimmer-slide {
+  from {
+    transform: translateX(0);
   }
-  100% {
-    background-position: 1000px 0;
+  to {
+    transform: translateX(53.33%);
   }
 }