feat(emcn): ThinkingLoader — the Recents icon spins while the chat generates

New emcn thinking-loader component wired through the chat title bar and
switcher: while a response streams, the switcher's bubble-clock icon becomes
a spinner so work-in-progress reads even with the messages off screen. Also
refreshes the paperclip and slash icons, simplifies the pending-tag indicator
to use the shared loader, trims dead tailwind config, and adds a playground
demo.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: andresdjasso

apps/sim/app/playground/page.tsx

@@ -75,6 +75,7 @@ import {
   TagInput,
   type TagItem,
   Textarea,
+  ThinkingLoader,
   TimePicker,
   ToastProvider,
   Tooltip,
@@ -1007,6 +1008,39 @@ export default function PlaygroundPage() {
               </VariantRow>
             </Section>
 
+            {/* ThinkingLoader */}
+            <Section title='ThinkingLoader'>
+              <VariantRow label='cycle (default)'>
+                <div className='flex items-center gap-6'>
+                  <ThinkingLoader />
+                  <ThinkingLoader size={28} />
+                  <ThinkingLoader size={40} />
+                  <ThinkingLoader label='Thinking…' />
+                </div>
+              </VariantRow>
+              {(
+                [
+                  'metaballs',
+                  'orbit',
+                  'relay',
+                  'corners',
+                  'burst',
+                  'compass',
+                  'squeeze',
+                  'maze',
+                ] as const
+              ).map((variant) => (
+                <VariantRow key={variant} label={variant}>
+                  <div className='flex items-center gap-6'>
+                    <ThinkingLoader variant={variant} />
+                    <ThinkingLoader variant={variant} size={28} />
+                    <ThinkingLoader variant={variant} size={40} />
+                    <ThinkingLoader variant={variant} label='Thinking…' />
+                  </div>
+                </VariantRow>
+              ))}
+            </Section>
+
             {/* Icons */}
             <Section title='Icons'>
               <div className='grid grid-cols-6 gap-4 sm:grid-cols-8 md:grid-cols-10'>

apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx

@@ -7,6 +7,7 @@ import {
   Popover,
   PopoverAnchor,
   PopoverContent,
+  ThinkingLoader,
   Tooltip,
 } from '@/components/emcn'
 import { BubbleChatDelay, ChevronDown } from '@/components/emcn/icons'
@@ -64,6 +65,12 @@ interface ChatSwitcherProps {
    * to reopen a hidden chat pane (including re-picking the current chat).
    */
   onSelectChat?: (chatId: string) => void
+  /**
+   * The chat is generating a response — the recents icon becomes a spinner so
+   * the title bar signals work in progress even when the messages are off
+   * screen (collapsed pane, scrolled away).
+   */
+  isWorking?: boolean
 }
 
 /**
@@ -76,6 +83,7 @@ export function ChatSwitcher({
   isNewChat = false,
   iconOnly = false,
   onSelectChat,
+  isWorking = false,
 }: ChatSwitcherProps) {
   const isHidden = useSidebarToggleHidden()
   const { workspaceId } = useParams<{ workspaceId?: string }>()
@@ -117,6 +125,12 @@ export function ChatSwitcher({
     router.push(`/workspace/${workspaceId}/chat/${selectedChatId}`)
   }
 
+  const chipIcon = isWorking ? (
+    <ThinkingLoader size={18} className='flex-shrink-0' />
+  ) : (
+    <BubbleChatDelay className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+  )
+
   const trigger = iconOnly ? (
     <button
       type='button'
@@ -128,7 +142,7 @@ export function ChatSwitcher({
         open && 'bg-[var(--surface-active)]'
       )}
     >
-      <BubbleChatDelay className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      {chipIcon}
       <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
     </button>
   ) : (
@@ -142,7 +156,7 @@ export function ChatSwitcher({
         open && 'bg-[var(--surface-active)]'
       )}
     >
-      <BubbleChatDelay className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      {chipIcon}
       <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
         {title}
       </span>

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -8,6 +8,7 @@ import {
   Expandable,
   ExpandableContent,
   SecretReveal,
+  ThinkingLoader,
 } from '@/components/emcn'
 import { canonicalWorkspaceFilePath } from '@/lib/copilot/vfs/path-utils'
 import { cn } from '@/lib/core/utils/cn'
@@ -356,13 +357,6 @@ export function parseSpecialTags(content: string, isStreaming: boolean): ParsedS
   return { segments, hasPendingTag }
 }
 
-const THINKING_BLOCKS = [
-  { color: '#2ABBF8', delay: '0s' },
-  { color: '#00F701', delay: '0.2s' },
-  { color: '#FA4EDF', delay: '0.6s' },
-  { color: '#FFCC02', delay: '0.4s' },
-] as const
-
 interface SpecialTagsProps {
   segment: Exclude<ContentSegment, { type: 'text' }>
   onOptionSelect?: (id: string) => void
@@ -401,17 +395,8 @@ export function SpecialTags({
  */
 export function PendingTagIndicator() {
   return (
-    <div className='flex animate-stream-fade-in items-center gap-2 py-2'>
-      <div className='grid size-[16px] grid-cols-2 gap-[1.5px]'>
-        {THINKING_BLOCKS.map((block, i) => (
-          <div
-            key={i}
-            className='animate-thinking-block rounded-xs'
-            style={{ backgroundColor: block.color, animationDelay: block.delay }}
-          />
-        ))}
-      </div>
-      <span className='text-[var(--text-body)] text-sm'>Thinking…</span>
+    <div className='flex animate-stream-fade-in items-center py-2'>
+      <ThinkingLoader label='Thinking…' />
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx

@@ -15,6 +15,8 @@ interface ChatTitleBarProps {
   onSelectChat?: (chatId: string) => void
   /** Renders a close (×) control at the bar's right edge that hides the chat pane. */
   onClose?: () => void
+  /** The chat is generating a response — the switcher's recents icon becomes a spinner. */
+  isWorking?: boolean
 }
 
 /**
@@ -23,15 +25,20 @@ interface ChatTitleBarProps {
  * straight between chats without returning to the new-chat view. Selecting a
  * chat navigates to it.
  */
-export function ChatTitleBar({ chatId, onSelectChat, onClose }: ChatTitleBarProps) {
+export function ChatTitleBar({ chatId, onSelectChat, onClose, isWorking }: ChatTitleBarProps) {
   return (
     <div className='flex h-[44px] flex-shrink-0 items-center gap-1 border-[var(--border)] border-b px-4'>
       {/* Edge controls pull out by 9px so their 30px hover pills sit 7px from
           the panel edge — matching the pill's 7px top/bottom gap in the bar. */}
       <SidebarToggle className='-ml-[9px]' />
       {/* The title bar only renders on chat surfaces, so no chat id means the
           new-chat empty state — never fall back to the most recent chat. */}
-      <ChatSwitcher chatId={chatId} isNewChat={!chatId} onSelectChat={onSelectChat} />
+      <ChatSwitcher
+        chatId={chatId}
+        isNewChat={!chatId}
+        onSelectChat={onSelectChat}
+        isWorking={isWorking}
+      />
       {onClose && (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -308,7 +308,9 @@ export function MothershipChat({
       onWorkspaceResourceSelect={onWorkspaceResourceSelect}
     >
       <div className={cn('flex h-full min-h-0 flex-col', className)}>
-        {layout === 'mothership-view' && <ChatTitleBar chatId={chatId} onClose={onCloseChat} />}
+        {layout === 'mothership-view' && (
+          <ChatTitleBar chatId={chatId} onClose={onCloseChat} isWorking={isStreamActive} />
+        )}
         <div className='relative flex min-h-0 flex-1 flex-col'>
           <div ref={setScrollContainer} className={cn(styles.scrollContainer, SCROLLBAR_AUTOHIDE)}>
             {isLoading && !hasMessages ? (

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -628,7 +628,11 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
                    the toggle and switcher never shift when the pane closes. */
                 <div className='flex flex-shrink-0 items-center gap-1'>
                   <SidebarToggle className='-ml-[9px]' />
-                  <ChatSwitcher chatId={activeChatId} onSelectChat={reopenChatPane} />
+                  <ChatSwitcher
+                    chatId={activeChatId}
+                    onSelectChat={reopenChatPane}
+                    isWorking={isSending || isReconnecting}
+                  />
                 </div>
               ) : undefined
             }

apps/sim/components/emcn/components/index.ts

@@ -155,6 +155,11 @@ export {
 } from './table/table'
 export { type FileInputOptions, TagInput, type TagItem } from './tag-input/tag-input'
 export { Textarea } from './textarea/textarea'
+export {
+  ThinkingLoader,
+  type ThinkingLoaderProps,
+  type ThinkingLoaderVariant,
+} from './thinking-loader/thinking-loader'
 export { TimePicker, timePickerVariants } from './time-picker/time-picker'
 export { ToastProvider, toast, useToast } from './toast/toast'
 export {