refactor(emcn): own shared shimmer text treatment

Author: Bill Leoutsakos

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

@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import { act, type ReactNode, type SVGProps } from 'react'
+import { act, type SVGProps } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -11,10 +11,6 @@ import type { ToolCallData } from '@/app/workspace/[workspaceId]/home/types'
 import { notifyBlockOverlayChanged } from '@/blocks/custom/client-overlay'
 import { getBlock, getBlockByToolName } from '@/blocks/registry'
 
-vi.mock('@/components/ui', () => ({
-  ShimmerText: ({ children }: { children: ReactNode }) => <span>{children}</span>,
-}))
-
 describe('ToolCallItem', () => {
   beforeEach(() => {
     vi.clearAllMocks()

apps/sim/components/agent-stream/agent-stream-chrome.test.tsx

@@ -7,13 +7,6 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 
 vi.mock('@sim/emcn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
-}))
-
-vi.mock('@/lib/mothership/tools/tool-display', () => ({
-  humanizeToolName: (name: string) => name,
-}))
-
-vi.mock('@/components/ui', () => ({
   ShimmerText: ({
     as: Comp = 'span',
     children,
@@ -34,6 +27,10 @@ vi.mock('@/components/ui', () => ({
   },
 }))
 
+vi.mock('@/lib/mothership/tools/tool-display', () => ({
+  humanizeToolName: (name: string) => name,
+}))
+
 import {
   AgentStreamThinkingChrome,
   AgentStreamToolCallsChrome,

apps/sim/components/agent-stream/agent-stream-chrome.tsx

@@ -1,13 +1,12 @@
 'use client'
 
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { cn } from '@sim/emcn'
+import { cn, ShimmerText } from '@sim/emcn'
 import { Check, ChevronDown, Circle, Square, X } from '@sim/emcn/icons'
 import type {
   AgentStreamToolCall,
   AgentStreamToolStatus,
 } from '@/components/agent-stream/tool-call-lifecycle'
-import { ShimmerText } from '@/components/ui'
 import { humanizeToolName } from '@/lib/mothership/tools/tool-display'
 
 /** Distance from bottom (px) within which we keep following new thinking text. */

apps/sim/components/ui/activity-status.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react'
-import { cn, OverflowText } from '@sim/emcn'
-import { ShimmerText } from '@/components/ui/shimmer-text'
+import { cn, OverflowText, ShimmerText } from '@sim/emcn'
 
 /** The icon column every activity row shares, sized for the default 14px icon. */
 export const ACTIVITY_ICON_SLOT_CLASS = 'flex size-[14px] shrink-0 items-center justify-center'

apps/sim/components/ui/index.ts

@@ -13,5 +13,4 @@ export {
   SelectTrigger,
   SelectValue,
 } from './select'
-export { ShimmerText } from './shimmer-text'
 export { ThinkingLoader, type ThinkingLoaderVariant } from './thinking-loader'

apps/sim/components/ui/shimmer-text.tsx

@@ -79,12 +79,9 @@
   white-space: nowrap;
 }
 
-/* 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. */
+/* ShimmerText owns the gradient, timing, dark mode, and reduced motion. This
+   class only adds loader-scaled font sizing and canonical normal weight. */
 .label {
-  composes: shimmer from "./shimmer-text.module.css";
   font-size: var(--tl-label-size, 14px);
   font-weight: 400;
 }

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { type CSSProperties, type ReactNode, useEffect, useId, useState } from 'react'
-import { cn } from '@sim/emcn'
+import { cn, ShimmerText } from '@sim/emcn'
 import styles from '@/components/ui/thinking-loader.module.css'
 
 const VARIANTS = [
@@ -532,11 +532,19 @@ export function ThinkingLoader({
       <span className={styles.labelStack}>
         {exitingLabel ? (
           <span key={exitingLabel} className={cn(styles.labelLayer, styles.labelOut)}>
-            <span className={shimmer ? styles.label : styles.labelStatic}>{exitingLabel}</span>
+            {shimmer ? (
+              <ShimmerText className={styles.label}>{exitingLabel}</ShimmerText>
+            ) : (
+              <span className={styles.labelStatic}>{exitingLabel}</span>
+            )}
           </span>
         ) : null}
         <span key={shownLabel} className={cn(styles.labelLayer, styles.labelIn)}>
-          <span className={shimmer ? styles.label : styles.labelStatic}>{shownLabel}</span>
+          {shimmer ? (
+            <ShimmerText className={styles.label}>{shownLabel}</ShimmerText>
+          ) : (
+            <span className={styles.labelStatic}>{shownLabel}</span>
+          )}
         </span>
       </span>
     </output>

apps/sim/components/ui/thinking-loader.tsx

@@ -215,6 +215,7 @@ export { POPOVER_ANIMATION_CLASSES } from './popover/popover-animation'
 export { ProgressItem } from './progress-item/progress-item'
 export { SecretInput } from './secret-input/secret-input'
 export { SecretReveal } from './secret-reveal/secret-reveal'
+export { ShimmerText, type ShimmerTextProps } from './shimmer-text/shimmer-text'
 export { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from './sim-wordmark/paths'
 export { SimWordmark, type SimWordmarkProps } from './sim-wordmark/sim-wordmark'
 export { Skeleton } from './skeleton/skeleton'

packages/emcn/src/components/index.ts

@@ -1,7 +1,7 @@
 /**
  * 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
+ * of truth for the treatment, including the ThinkingLoader label. Under
  * 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