feat(copilot): base UI copilot

Author: emir-karabeg

apps/sim/app/globals.css

@@ -19,7 +19,7 @@
   --sidebar-width: 232px;
   --triggers-height: 200px;
   --blocks-height: 200px;
-  --panel-width: 240px;
+  --panel-width: 244px;
 }
 
 .sidebar-container {
@@ -310,6 +310,19 @@
     scrollbar-color: hsl(var(--muted-foreground) / 0.3) #272727;
   }
 
+  /* Dark Mode Copilot Scrollbar - Match copilot background */
+  .copilot-scrollable {
+    scrollbar-gutter: stable;
+  }
+
+  .dark .copilot-scrollable::-webkit-scrollbar-track {
+    background: #232323;
+  }
+
+  .dark .copilot-scrollable {
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) #232323;
+  }
+
   /* For Firefox */
   * {
     scrollbar-width: thin;

apps/sim/app/invite/components/status-card.tsx

@@ -1,10 +1,18 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { AlertCircle, CheckCircle2, Mail, RotateCcw, ShieldX, UserPlus, Users2 } from 'lucide-react'
+import {
+  AlertCircle,
+  CheckCircle2,
+  Loader2,
+  Mail,
+  RotateCcw,
+  ShieldX,
+  UserPlus,
+  Users2,
+} from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
-import { LoadingAgent } from '@/components/ui/loading-agent'
 import { useBrandConfig } from '@/lib/branding/branding'
 import { inter } from '@/app/fonts/inter/inter'
 import { soehne } from '@/app/fonts/soehne/soehne'
@@ -96,7 +104,7 @@ export function InviteStatusCard({
           </p>
         </div>
         <div className='flex w-full items-center justify-center py-8'>
-          <LoadingAgent size='lg' />
+          <Loader2 className='h-8 w-8 animate-spin text-[var(--brand-primary-hex)]' />
         </div>
 
         <div
@@ -156,7 +164,7 @@ export function InviteStatusCard({
             >
               {action.loading ? (
                 <>
-                  <LoadingAgent size='sm' />
+                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
                   {action.label}...
                 </>
               ) : (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/components/markdown-renderer.tsx

@@ -31,7 +31,7 @@ if (typeof document !== 'undefined') {
     style.id = styleId
     style.textContent = `
       .copilot-markdown-wrapper pre {
-        color: #e5e7eb !important;
+        color: #F5F5F5 !important;
         font-weight: 400 !important;
         text-shadow: none !important;
         filter: none !important;
@@ -44,7 +44,7 @@ if (typeof document !== 'undefined') {
       }
       
       .dark .copilot-markdown-wrapper pre {
-        color: #f3f4f6 !important;
+        color: #F0F0F0 !important;
       }
       
       .copilot-markdown-wrapper pre code,
@@ -141,45 +141,45 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
     () => ({
       // Paragraph
       p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
-        <p className='mb-1 font-sans text-gray-800 text-sm leading-[1.25rem] last:mb-0 dark:text-gray-200'>
+        <p className='mb-1 font-[470] font-season text-[#707070] text-sm leading-[1.25rem] last:mb-0 dark:text-[#E8E8E8]'>
           {children}
         </p>
       ),
 
       // Headings
       h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h1 className='mt-3 mb-3 font-sans font-semibold text-2xl text-gray-900 dark:text-gray-100'>
+        <h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[#0D0D0D] dark:text-[#F0F0F0]'>
           {children}
         </h1>
       ),
       h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h2 className='mt-2.5 mb-2.5 font-sans font-semibold text-gray-900 text-xl dark:text-gray-100'>
+        <h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[#0D0D0D] text-xl dark:text-[#F0F0F0]'>
           {children}
         </h2>
       ),
       h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h3 className='mt-2 mb-2 font-sans font-semibold text-gray-900 text-lg dark:text-gray-100'>
+        <h3 className='mt-2 mb-2 font-season font-semibold text-[#0D0D0D] text-lg dark:text-[#F0F0F0]'>
           {children}
         </h3>
       ),
       h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h4 className='mt-5 mb-2 font-sans font-semibold text-base text-gray-900 dark:text-gray-100'>
+        <h4 className='mt-5 mb-2 font-season font-semibold text-[#0D0D0D] text-base dark:text-[#F0F0F0]'>
           {children}
         </h4>
       ),
 
       // Lists
       ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
         <ul
-          className='mt-1 mb-1 space-y-1 pl-6 font-sans text-gray-800 dark:text-gray-200'
+          className='mt-1 mb-1 space-y-1 pl-6 font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
           style={{ listStyleType: 'disc' }}
         >
           {children}
         </ul>
       ),
       ol: ({ children }: React.HTMLAttributes<HTMLOListElement>) => (
         <ol
-          className='mt-1 mb-1 space-y-1 pl-6 font-sans text-gray-800 dark:text-gray-200'
+          className='mt-1 mb-1 space-y-1 pl-6 font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
           style={{ listStyleType: 'decimal' }}
         >
           {children}
@@ -189,7 +189,10 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
         children,
         ordered,
       }: React.LiHTMLAttributes<HTMLLIElement> & { ordered?: boolean }) => (
-        <li className='font-sans text-gray-800 dark:text-gray-200' style={{ display: 'list-item' }}>
+        <li
+          className='font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
+          style={{ display: 'list-item' }}
+        >
           {children}
         </li>
       ),
@@ -250,7 +253,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
         return (
           <div className='my-6 w-0 min-w-full rounded-md bg-gray-900 text-sm dark:bg-black'>
             <div className='flex items-center justify-between border-gray-700 border-b px-4 py-1.5 dark:border-gray-800'>
-              <span className='font-sans text-gray-400 text-xs'>{language}</span>
+              <span className='font-season text-gray-400 text-xs'>{language}</span>
               <button
                 onClick={handleCopy}
                 className='text-muted-foreground transition-colors hover:text-gray-300'
@@ -264,7 +267,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
               </button>
             </div>
             <div className='overflow-x-auto'>
-              <pre className='whitespace-pre p-4 font-mono text-gray-100 text-sm leading-relaxed'>
+              <pre className='whitespace-pre p-4 font-mono text-[#F5F5F5] text-sm leading-relaxed dark:text-[#F0F0F0]'>
                 {actualCodeText}
               </pre>
             </div>
@@ -282,7 +285,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
         if (inline) {
           return (
             <code
-              className='whitespace-normal break-all rounded bg-gray-200 px-1 py-0.5 font-mono text-[0.9em] text-gray-800 dark:bg-gray-700 dark:text-gray-200'
+              className='whitespace-normal break-all rounded bg-gray-300 px-1 py-0.5 font-mono text-[#707070] text-[0.9em] dark:bg-[#3D3D3D] dark:text-[#E8E8E8]'
               {...props}
             >
               {children}
@@ -298,27 +301,27 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
 
       // Bold text
       strong: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <strong className='font-semibold text-gray-900 dark:text-gray-100'>{children}</strong>
+        <strong className='font-semibold text-[#0D0D0D] dark:text-[#F0F0F0]'>{children}</strong>
       ),
 
       // Bold text (alternative)
       b: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <b className='font-semibold text-gray-900 dark:text-gray-100'>{children}</b>
+        <b className='font-semibold text-[#0D0D0D] dark:text-[#F0F0F0]'>{children}</b>
       ),
 
       // Italic text
       em: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <em className='text-gray-800 italic dark:text-gray-200'>{children}</em>
+        <em className='text-[#707070] italic dark:text-[#E8E8E8]'>{children}</em>
       ),
 
       // Italic text (alternative)
       i: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <i className='text-gray-800 italic dark:text-gray-200'>{children}</i>
+        <i className='text-[#707070] italic dark:text-[#E8E8E8]'>{children}</i>
       ),
 
       // Blockquotes
       blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-        <blockquote className='my-4 border-gray-300 border-l-4 py-1 pl-4 font-sans text-gray-700 italic dark:border-gray-600 dark:text-gray-300'>
+        <blockquote className='my-4 border-gray-300 border-l-4 py-1 pl-4 font-season text-[#858585] italic dark:border-gray-600 dark:text-[#E0E0E0]'>
           {children}
         </blockquote>
       ),
@@ -336,29 +339,29 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       // Tables
       table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
         <div className='my-4 max-w-full overflow-x-auto'>
-          <table className='min-w-full table-auto border border-gray-300 font-sans text-sm dark:border-gray-700'>
+          <table className='min-w-full table-auto border border-gray-300 font-season text-sm dark:border-gray-600'>
             {children}
           </table>
         </div>
       ),
       thead: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <thead className='bg-gray-100 text-left dark:bg-gray-800'>{children}</thead>
+        <thead className='bg-gray-200 text-left dark:bg-[#2A2A2A]'>{children}</thead>
       ),
       tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <tbody className='divide-y divide-gray-200 dark:divide-gray-700'>{children}</tbody>
+        <tbody className='divide-y divide-gray-300 dark:divide-gray-600'>{children}</tbody>
       ),
       tr: ({ children }: React.HTMLAttributes<HTMLTableRowElement>) => (
-        <tr className='border-gray-200 border-b transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800/60'>
+        <tr className='border-gray-300 border-b transition-colors hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-[#2A2A2A]/60'>
           {children}
         </tr>
       ),
       th: ({ children }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
-        <th className='border-gray-300 border-r px-4 py-2 font-medium text-gray-700 last:border-r-0 dark:border-gray-700 dark:text-gray-300'>
+        <th className='border-gray-300 border-r px-4 py-2 align-top font-[470] text-[#858585] last:border-r-0 dark:border-gray-600 dark:text-[#E0E0E0]'>
           {children}
         </th>
       ),
       td: ({ children }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
-        <td className='break-words border-gray-300 border-r px-4 py-2 text-gray-800 last:border-r-0 dark:border-gray-700 dark:text-gray-200'>
+        <td className='break-words border-gray-300 border-r px-4 py-2 align-top font-[470] text-[#707070] last:border-r-0 dark:border-gray-600 dark:text-[#E8E8E8]'>
           {children}
         </td>
       ),
@@ -377,7 +380,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
   )
 
   return (
-    <div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-sans text-[#0D0D0D] text-sm leading-[1.25rem] dark:text-gray-100'>
+    <div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-[470] font-season text-[#707070] text-sm leading-[1.25rem] dark:text-[#E8E8E8]'>
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
         {content}
       </ReactMarkdown>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/components/thinking-block.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { Brain } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import clsx from 'clsx'
+import { ChevronUp } from 'lucide-react'
 
 /**
  * Timer update interval in milliseconds
@@ -14,6 +14,57 @@ const TIMER_UPDATE_INTERVAL = 100
  */
 const SECONDS_THRESHOLD = 1000
 
+/**
+ * ShimmerOverlayText component for thinking block
+ * Applies shimmer effect to the "Thought for X.Xs" text during streaming
+ */
+function ShimmerOverlayText({
+  label,
+  value,
+  active = false,
+}: {
+  label: string
+  value: string
+  active?: boolean
+}) {
+  return (
+    <span className='relative inline-block'>
+      <span style={{ color: '#B8B8B8' }}>{label}</span>
+      <span style={{ color: '#787878' }}>{value}</span>
+      {active ? (
+        <span
+          aria-hidden='true'
+          className='pointer-events-none absolute inset-0 select-none overflow-hidden'
+        >
+          <span
+            className='block text-transparent'
+            style={{
+              backgroundImage:
+                'linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%)',
+              backgroundSize: '200% 100%',
+              backgroundRepeat: 'no-repeat',
+              WebkitBackgroundClip: 'text',
+              backgroundClip: 'text',
+              animation: 'thinking-shimmer 1.4s ease-in-out infinite',
+              mixBlendMode: 'screen',
+            }}
+          >
+            {label}
+            {value}
+          </span>
+        </span>
+      ) : null}
+      <style>{`
+        @keyframes thinking-shimmer {
+          0% { background-position: 150% 0; }
+          50% { background-position: 0% 0; }
+          100% { background-position: -150% 0; }
+        }
+      `}</style>
+    </span>
+  )
+}
+
 /**
  * Props for the ThinkingBlock component
  */
@@ -105,6 +156,8 @@ export function ThinkingBlock({
     return `${seconds}s`
   }
 
+  const hasContent = content && content.trim().length > 0
+
   return (
     <div className='mt-1 mb-0'>
       <button
@@ -116,28 +169,32 @@ export function ThinkingBlock({
             return next
           })
         }}
-        className={cn(
-          'mb-1 inline-flex items-center gap-1 text-[11px] text-gray-400 transition-colors hover:text-gray-500',
-          'font-normal italic'
-        )}
+        className='mb-1 inline-flex items-center gap-1 text-left font-[470] font-season text-[#B1B1B1] text-sm transition-colors hover:text-[#E6E6E6]'
         type='button'
+        disabled={!hasContent}
       >
-        <Brain className='h-3 w-3' />
-        <span>
-          Thought for {formatDuration(duration)}
-          {isExpanded ? ' (click to collapse)' : ''}
-        </span>
-        {isStreaming && (
-          <span className='inline-flex h-1 w-1 animate-pulse rounded-full bg-gray-400' />
+        <ShimmerOverlayText
+          label='Thought'
+          value={` for ${formatDuration(duration)}`}
+          active={isStreaming}
+        />
+        {hasContent && (
+          <ChevronUp
+            className={clsx('h-3 w-3 transition-transform', isExpanded && 'rotate-180')}
+            aria-hidden='true'
+          />
         )}
       </button>
 
       {isExpanded && (
-        <div className='ml-1 border-gray-200 border-l-2 pl-2 dark:border-gray-700'>
-          <pre className='whitespace-pre-wrap font-mono text-[11px] text-gray-400 dark:text-gray-500'>
+        <div className='ml-1 border-[#303030] border-l-2 pl-2'>
+          <pre
+            className='whitespace-pre-wrap font-[470] font-season text-[12px] leading-[1.15rem]'
+            style={{ color: '#B8B8B8' }}
+          >
             {content}
             {isStreaming && (
-              <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-gray-400' />
+              <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-[#B8B8B8]' />
             )}
           </pre>
         </div>