improvement(chat): address review — focus-visible chevron, single shimmer source, reduced-motion rest color

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx

@@ -98,7 +98,7 @@ export function AgentGroup({
           )}
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100',
+              'h-[7px] w-[9px] text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
               !expanded && '-rotate-90'
             )}
           />

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx

@@ -140,7 +140,9 @@ export function ToolCallItem({ toolName, displayTitle, status, streamingArgs }:
         <StatusIcon status={status} toolName={toolName} />
       </div>
       {isExecuting ? (
-        <ShimmerText className='text-[13px]'>{title}</ShimmerText>
+        <ShimmerText className='text-[13px] [--shimmer-rest:var(--text-secondary)]'>
+          {title}
+        </ShimmerText>
       ) : (
         <span className='text-[13px] text-[var(--text-secondary)]'>{title}</span>
       )}

apps/sim/components/ui/shimmer-text.module.css

@@ -1,8 +1,9 @@
 /**
  * Claude-style text shimmer: the text paints from a gradient with a light band
- * that sweeps across the glyphs via background-clip. Gradient stops and timing
- * match the ThinkingLoader label so every "working" phrase in the app shares
- * one treatment.
+ * that sweeps across the glyphs via background-clip. This is the single source
+ * of truth for the treatment — the ThinkingLoader label composes it. Under
+ * reduced motion the text settles to a solid ink; consumers whose resting text
+ * is not body ink set `--shimmer-rest` to their resting color.
  */
 .shimmer {
   background-image: linear-gradient(90deg, #4a4a4a 40%, #b0b0b0 50%, #4a4a4a 60%);
@@ -27,6 +28,6 @@
   .shimmer {
     animation: none;
     background-image: none;
-    color: var(--text-body);
+    color: var(--shimmer-rest, var(--text-body));
   }
 }

apps/sim/components/ui/thinking-loader.module.css

@@ -92,23 +92,14 @@
   white-space: nowrap;
 }
 
-/* Claude-style shimmer: the text paints from a gradient with a light band
-   that sweeps across the glyphs via background-clip. */
+/* The sweeping-band treatment itself (gradient, timing, dark mode, reduced
+   motion) is owned by the shared shimmer-text module; this class only adds the
+   loader-scaled font sizing. Canonical normal weight per emcn rules: body text
+   is 400, never medium. */
 .label {
+  composes: shimmer from "./shimmer-text.module.css";
   font-size: var(--tl-label-size, 14px);
-  /* Canonical normal weight (per emcn rules: body text is 400, never medium).
-     Reads light and clean under the shimmer gradient on light surfaces. */
   font-weight: 400;
-  background-image: linear-gradient(90deg, #4a4a4a 40%, #b0b0b0 50%, #4a4a4a 60%);
-  background-size: 200% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  animation: label-shimmer 2.2s linear infinite;
-}
-
-:global(.dark) .label {
-  background-image: linear-gradient(90deg, #b9b9b9 40%, #f8f8f8 50%, #b9b9b9 60%);
 }
 
 /* Static label (shimmer off): the phrase in solid body ink, no gradient sweep. */
@@ -118,12 +109,6 @@
   color: var(--text-body);
 }
 
-@keyframes label-shimmer {
-  to {
-    background-position: 200% 0;
-  }
-}
-
 /* Phrase crossfade — the incoming phrase rises and fades in while the outgoing
    one rises and fades out (stacked over it), so phrases rotate smoothly. */
 .labelStack {
@@ -366,7 +351,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   .frame *,
-  .label,
   .labelIn {
     animation: none;
   }