From 848b9e8dbad8908e9e782580f6b29454c6cdf497 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 11 Jul 2026 18:14:21 -0700
Subject: [PATCH 1/5] improvement(chat): shimmer active subagent and tool
 labels instead of spinners

---
 .../components/agent-group/agent-group.tsx    | 37 +++++++++----------
 .../components/agent-group/tool-call-item.tsx | 34 ++++++++++++++---
 apps/sim/components/ui/index.ts               |  1 +
 .../sim/components/ui/shimmer-text.module.css | 32 ++++++++++++++++
 apps/sim/components/ui/shimmer-text.tsx       | 17 +++++++++
 5 files changed, 96 insertions(+), 25 deletions(-)
 create mode 100644 apps/sim/components/ui/shimmer-text.module.css
 create mode 100644 apps/sim/components/ui/shimmer-text.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
index ce8d57b6dcd..266ea66cc16 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { ChevronDown, cn, Expandable, ExpandableContent, PillsRing } from '@sim/emcn'
+import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn'
+import { ShimmerText } from '@/components/ui'
 import type { ToolCallData } from '../../../../types'
 import { getAgentIcon, isToolDone } from '../../utils'
 import { ToolCallItem } from './tool-call-item'
@@ -63,11 +64,7 @@ export function AgentGroup({
   const AgentIcon = getAgentIcon(agentName)
   const hasItems = items.length > 0
   const resolved = isAgentGroupResolved(items)
-  // Pure projection of the run's own state: a subagent header spins while it is
-  // delegating with no resolved work yet. A terminal turn closes the lane (its
-  // subagent block is stamped ended), which clears `isDelegating`, so no
-  // transport gating is needed to stop an aborted-before-first-tool spinner.
-  const showDelegatingSpinner = isDelegating && !resolved
+  const isWorking = (isDelegating && !resolved) || (isStreaming && isLaneOpen)
 
   // Expand while the turn is live and any of: the lane is open (the subagent is
   // actively running), this is the current/latest section, or there is unresolved
@@ -89,19 +86,19 @@ export function AgentGroup({
         <button
           type='button'
           onClick={() => setManualExpanded(!expanded)}
-          className='flex cursor-pointer items-center gap-2'
+          className='group/agent flex cursor-pointer items-center gap-2'
         >
           <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
-            {showDelegatingSpinner ? (
-              <PillsRing className='size-[15px] text-[var(--text-icon)]' animate />
-            ) : (
-              <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
-            )}
+            <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
           </div>
-          <span className='text-[var(--text-body)] text-sm'>{agentLabel}</span>
+          {isWorking ? (
+            <ShimmerText className='text-sm'>{agentLabel}</ShimmerText>
+          ) : (
+            <span className='text-[var(--text-body)] text-sm'>{agentLabel}</span>
+          )}
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              'h-[7px] w-[9px] text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100',
               !expanded && '-rotate-90'
             )}
           />
@@ -109,13 +106,13 @@ export function AgentGroup({
       ) : (
         <div className='flex items-center gap-2'>
           <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
-            {showDelegatingSpinner ? (
-              <PillsRing className='size-[15px] text-[var(--text-icon)]' animate />
-            ) : (
-              <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
-            )}
+            <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
           </div>
-          <span className='text-[var(--text-body)] text-sm'>{agentLabel}</span>
+          {isWorking ? (
+            <ShimmerText className='text-sm'>{agentLabel}</ShimmerText>
+          ) : (
+            <span className='text-[var(--text-body)] text-sm'>{agentLabel}</span>
+          )}
         </div>
       )}
       {hasItems && (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
index c671fc3a593..10c4602b2b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { PillsRing } from '@sim/emcn'
+import { ShimmerText } from '@/components/ui'
 import { WorkspaceFile } from '@/lib/copilot/generated/tool-catalog-v1'
 import type { ToolCallStatus } from '../../../../types'
 import { getToolIcon, resolveToolDisplayState } from '../../utils'
@@ -57,10 +57,29 @@ function Hyphen({ className }: { className?: string }) {
   )
 }
 
+function CircleOutline({ className }: { className?: string }) {
+  return (
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx='8' cy='8' r='6.5' stroke='currentColor' strokeWidth='1.25' />
+    </svg>
+  )
+}
+
 function StatusIcon({ status, toolName }: { status: ToolCallStatus; toolName: string }) {
   const display = resolveToolDisplayState(status)
   if (display === 'spinner') {
-    return <PillsRing className='size-[15px] text-[var(--text-tertiary)]' animate />
+    const Icon = getToolIcon(toolName)
+    if (Icon) {
+      return <Icon className='size-[15px] text-[var(--text-tertiary)]' />
+    }
+    return <CircleOutline className='size-[15px] text-[var(--text-tertiary)]' />
   }
   if (display === 'cancelled') {
     return <CircleStop className='size-[15px] text-[var(--text-tertiary)]' />
@@ -112,14 +131,19 @@ export function ToolCallItem({ toolName, displayTitle, status, streamingArgs }:
     return `${verb} ${unescaped}`
   }, [toolName, streamingArgs])
 
+  const isExecuting = resolveToolDisplayState(status) === 'spinner'
+  const title = liveWorkspaceFileTitle || displayTitle
+
   return (
     <div className='flex items-center gap-[8px] pl-[24px]'>
       <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
         <StatusIcon status={status} toolName={toolName} />
       </div>
-      <span className='text-[13px] text-[var(--text-secondary)]'>
-        {liveWorkspaceFileTitle || displayTitle}
-      </span>
+      {isExecuting ? (
+        <ShimmerText className='text-[13px]'>{title}</ShimmerText>
+      ) : (
+        <span className='text-[13px] text-[var(--text-secondary)]'>{title}</span>
+      )}
     </div>
   )
 }
diff --git a/apps/sim/components/ui/index.ts b/apps/sim/components/ui/index.ts
index 4ee1b9a7f0c..40ccab62097 100644
--- a/apps/sim/components/ui/index.ts
+++ b/apps/sim/components/ui/index.ts
@@ -14,4 +14,5 @@ export {
   SelectTrigger,
   SelectValue,
 } from './select'
+export { ShimmerText } from './shimmer-text'
 export { ThinkingLoader, type ThinkingLoaderVariant } from './thinking-loader'
diff --git a/apps/sim/components/ui/shimmer-text.module.css b/apps/sim/components/ui/shimmer-text.module.css
new file mode 100644
index 00000000000..b98a5d84706
--- /dev/null
+++ b/apps/sim/components/ui/shimmer-text.module.css
@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+.shimmer {
+  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: shimmer-sweep 2.2s linear infinite;
+}
+
+:global(.dark) .shimmer {
+  background-image: linear-gradient(90deg, #b9b9b9 40%, #f8f8f8 50%, #b9b9b9 60%);
+}
+
+@keyframes shimmer-sweep {
+  to {
+    background-position: 200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    animation: none;
+    background-image: none;
+    color: var(--text-body);
+  }
+}
diff --git a/apps/sim/components/ui/shimmer-text.tsx b/apps/sim/components/ui/shimmer-text.tsx
new file mode 100644
index 00000000000..6e3f7fea8f6
--- /dev/null
+++ b/apps/sim/components/ui/shimmer-text.tsx
@@ -0,0 +1,17 @@
+import { cn } from '@sim/emcn'
+import styles from '@/components/ui/shimmer-text.module.css'
+
+interface ShimmerTextProps {
+  children: React.ReactNode
+  className?: string
+}
+
+/**
+ * Sweeping-highlight shimmer over a text phrase — the same treatment as the
+ * ThinkingLoader's "Thinking…" label, reusable on any active/streaming row.
+ * Size and weight come from the consumer's className; the gradient replaces
+ * the text color, so color classes are ignored while shimmering.
+ */
+export function ShimmerText({ children, className }: ShimmerTextProps) {
+  return <span className={cn(styles.shimmer, className)}>{children}</span>
+}

From 13e90f2f6aa8b4514b3efdaa56cc22bc75a86fc3 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 11 Jul 2026 18:21:11 -0700
Subject: [PATCH 2/5] =?UTF-8?q?improvement(chat):=20address=20review=20?=
 =?UTF-8?q?=E2=80=94=20focus-visible=20chevron,=20single=20shimmer=20sourc?=
 =?UTF-8?q?e,=20reduced-motion=20rest=20color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/agent-group/agent-group.tsx    |  2 +-
 .../components/agent-group/tool-call-item.tsx |  4 ++-
 .../sim/components/ui/shimmer-text.module.css |  9 ++++---
 .../components/ui/thinking-loader.module.css  | 26 ++++---------------
 4 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
index 266ea66cc16..0314907eefe 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
+++ b/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'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
index 10c4602b2b5..59d9bf69dd7 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
+++ b/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>
       )}
diff --git a/apps/sim/components/ui/shimmer-text.module.css b/apps/sim/components/ui/shimmer-text.module.css
index b98a5d84706..acc73eb8903 100644
--- a/apps/sim/components/ui/shimmer-text.module.css
+++ b/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));
   }
 }
diff --git a/apps/sim/components/ui/thinking-loader.module.css b/apps/sim/components/ui/thinking-loader.module.css
index 83a8451d5f0..0e914eae3cb 100644
--- a/apps/sim/components/ui/thinking-loader.module.css
+++ b/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;
   }

From cba6794cee68a6cb5b5b299f38a2fef5381489a7 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 11 Jul 2026 18:27:26 -0700
Subject: [PATCH 3/5] improvement(chat): pulse shimmer text under reduced
 motion so running state stays visible

---
 apps/sim/components/ui/shimmer-text.module.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/sim/components/ui/shimmer-text.module.css b/apps/sim/components/ui/shimmer-text.module.css
index acc73eb8903..203bc35a489 100644
--- a/apps/sim/components/ui/shimmer-text.module.css
+++ b/apps/sim/components/ui/shimmer-text.module.css
@@ -2,8 +2,10 @@
  * Claude-style text shimmer: the text paints from a gradient with a light band
  * 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.
+ * reduced motion the sweep is replaced by a gentle opacity pulse in solid ink:
+ * the shimmer conveys essential in-progress state, so it needs a vestibular-safe
+ * fallback rather than none. 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%);
@@ -26,8 +28,14 @@
 
 @media (prefers-reduced-motion: reduce) {
   .shimmer {
-    animation: none;
     background-image: none;
     color: var(--shimmer-rest, var(--text-body));
+    animation: shimmer-pulse 2.2s ease-in-out infinite;
+  }
+}
+
+@keyframes shimmer-pulse {
+  50% {
+    opacity: 0.55;
   }
 }

From ccd0b183010ef213f76facd0b2c239e54bfb3efa Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 11 Jul 2026 18:32:05 -0700
Subject: [PATCH 4/5] improvement(chat): reset background-clip in
 reduced-motion shimmer fallback

---
 apps/sim/components/ui/shimmer-text.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/sim/components/ui/shimmer-text.module.css b/apps/sim/components/ui/shimmer-text.module.css
index 203bc35a489..6f47ea012a8 100644
--- a/apps/sim/components/ui/shimmer-text.module.css
+++ b/apps/sim/components/ui/shimmer-text.module.css
@@ -29,6 +29,8 @@
 @media (prefers-reduced-motion: reduce) {
   .shimmer {
     background-image: none;
+    -webkit-background-clip: initial;
+    background-clip: initial;
     color: var(--shimmer-rest, var(--text-body));
     animation: shimmer-pulse 2.2s ease-in-out infinite;
   }

From 8bb0808f403384fc349a1c70e17509ea736f1657 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 11 Jul 2026 18:35:45 -0700
Subject: [PATCH 5/5] fix(chat): apply reduced-motion shimmer fallback in dark
 mode too

---
 apps/sim/components/ui/shimmer-text.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/sim/components/ui/shimmer-text.module.css b/apps/sim/components/ui/shimmer-text.module.css
index 6f47ea012a8..c4db09a974e 100644
--- a/apps/sim/components/ui/shimmer-text.module.css
+++ b/apps/sim/components/ui/shimmer-text.module.css
@@ -27,7 +27,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .shimmer {
+  .shimmer,
+  :global(.dark) .shimmer {
     background-image: none;
     -webkit-background-clip: initial;
     background-clip: initial;