Copilot context window

Author: Sg312

apps/sim/app/api/copilot/chat/route.ts

@@ -463,6 +463,8 @@ export async function POST(req: NextRequest) {
             logger.debug(`[${tracker.requestId}] Sent initial chatId event to client`)
           }
 
+          // Note: context_usage events are forwarded from sim-agent (which has accurate token counts)
+
           // Start title generation in parallel if needed
           if (actualChatId && !currentChat?.title && conversationHistory.length === 0) {
             generateChatTitle(message)
@@ -594,6 +596,7 @@ export async function POST(req: NextRequest) {
                             lastSafeDoneResponseId = responseIdFromDone
                           }
                         }
+                        // Note: context_usage events are forwarded from sim-agent
                         break
 
                       case 'error':

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/context-usage-pill/context-usage-pill.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { memo } from 'react'
+import { cn } from '@/lib/utils'
+
+interface ContextUsagePillProps {
+  percentage: number
+  className?: string
+}
+
+export const ContextUsagePill = memo(({ percentage, className }: ContextUsagePillProps) => {
+  // Don't render if invalid (but DO render if 0 or very small)
+  if (percentage === null || percentage === undefined || Number.isNaN(percentage)) return null
+
+  // Determine color based on percentage (similar to Cursor IDE)
+  const getColorClass = () => {
+    if (percentage >= 90) return 'bg-red-500/10 text-red-600 dark:text-red-400'
+    if (percentage >= 75) return 'bg-orange-500/10 text-orange-600 dark:text-orange-400'
+    if (percentage >= 50) return 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400'
+    return 'bg-gray-500/10 text-gray-600 dark:text-gray-400'
+  }
+
+  // Format: show 1 decimal for <1%, 0 decimals for >=1%
+  const formattedPercentage = percentage < 1 ? percentage.toFixed(1) : percentage.toFixed(0)
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center justify-center rounded-full px-2 py-0.5 font-medium text-[11px] tabular-nums transition-colors',
+        getColorClass(),
+        className
+      )}
+      title={`Context: ${percentage.toFixed(2)}%`}
+    >
+      {formattedPercentage}%
+    </div>
+  )
+})
+
+ContextUsagePill.displayName = 'ContextUsagePill'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx

@@ -55,6 +55,7 @@ import { cn } from '@/lib/utils'
 import { useCopilotStore } from '@/stores/copilot/store'
 import type { ChatContext } from '@/stores/copilot/types'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+import { ContextUsagePill } from '../context-usage-pill/context-usage-pill'
 
 const logger = createLogger('CopilotUserInput')
 
@@ -182,7 +183,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     const [isLoadingLogs, setIsLoadingLogs] = useState(false)
 
     const { data: session } = useSession()
-    const { currentChat, workflowId, enabledModels, setEnabledModels } = useCopilotStore()
+    const { currentChat, workflowId, enabledModels, setEnabledModels, contextUsage } =
+      useCopilotStore()
     const params = useParams()
     const workspaceId = params.workspaceId as string
     // Track per-chat preference for auto-adding workflow context
@@ -2050,7 +2052,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       <div className={cn('relative flex-none pb-4', className)}>
         <div
           className={cn(
-            'rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] p-2 shadow-xs transition-all duration-200 dark:border-[#414141] dark:bg-[var(--surface-elevated)]',
+            'relative rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] p-2 shadow-xs transition-all duration-200 dark:border-[#414141] dark:bg-[var(--surface-elevated)]',
             isDragging &&
               'border-[var(--brand-primary-hover-hex)] bg-purple-50/50 dark:border-[var(--brand-primary-hover-hex)] dark:bg-purple-950/20'
           )}
@@ -2059,6 +2061,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           onDragOver={handleDragOver}
           onDrop={handleDrop}
         >
+          {/* Context Usage Pill - Top Right */}
+          {contextUsage && contextUsage.percentage > 0 && (
+            <div className='absolute top-2 right-2 z-10'>
+              <ContextUsagePill percentage={contextUsage.percentage} />
+            </div>
+          )}
           {/* Attached Files Display with Thumbnails */}
           {attachedFiles.length > 0 && (
             <div className='mb-2 flex flex-wrap gap-1.5'>
@@ -3364,7 +3372,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             </div>
 
             {/* Right side: Attach Button + Send Button */}
-            <div className='flex items-center gap-1'>
+            <div className='flex items-center gap-1.5'>
               {/* Attach Button */}
               <Button
                 variant='ghost'

apps/sim/stores/copilot/store.ts

@@ -1166,6 +1166,25 @@ const sseHandlers: Record<string, SSEHandler> = {
     context.currentTextBlock = null
     updateStreamingMessage(set, context)
   },
+  context_usage: (data, _context, _get, set) => {
+    try {
+      const usageData = data?.data
+      if (usageData) {
+        set({
+          contextUsage: {
+            usage: usageData.usage || 0,
+            percentage: usageData.percentage || 0,
+            model: usageData.model || '',
+            contextWindow: usageData.context_window || usageData.contextWindow || 0,
+            when: usageData.when || 'start',
+            estimatedTokens: usageData.estimated_tokens || usageData.estimatedTokens,
+          },
+        })
+      }
+    } catch (err) {
+      logger.warn('Failed to handle context_usage event:', err)
+    }
+  },
   default: () => {},
 }
 
@@ -1304,6 +1323,7 @@ const initialState = {
   showPlanTodos: false,
   toolCallsById: {} as Record<string, CopilotToolCall>,
   suppressAutoSelect: false,
+  contextUsage: null,
 }
 
 export const useCopilotStore = create<CopilotStore>()(
@@ -1314,7 +1334,7 @@ export const useCopilotStore = create<CopilotStore>()(
     setMode: (mode) => set({ mode }),
 
     // Clear messages
-    clearMessages: () => set({ messages: [] }),
+    clearMessages: () => set({ messages: [], contextUsage: null }),
 
     // Workflow selection
     setWorkflowId: async (workflowId: string | null) => {
@@ -1374,6 +1394,7 @@ export const useCopilotStore = create<CopilotStore>()(
         planTodos: [],
         showPlanTodos: false,
         suppressAutoSelect: false,
+        contextUsage: null,
       })
 
       // Background-save the previous chat's latest messages before switching (optimistic)
@@ -1442,6 +1463,7 @@ export const useCopilotStore = create<CopilotStore>()(
         planTodos: [],
         showPlanTodos: false,
         suppressAutoSelect: true,
+        contextUsage: null,
       })
     },
 
@@ -2041,6 +2063,7 @@ export const useCopilotStore = create<CopilotStore>()(
         for await (const data of parseSSEStream(reader, decoder)) {
           const { abortController } = get()
           if (abortController?.signal.aborted) break
+
           const handler = sseHandlers[data.type] || sseHandlers.default
           await handler(data, context, get, set)
           if (context.streamComplete) break

apps/sim/stores/copilot/types.ts

@@ -124,6 +124,16 @@ export interface CopilotState {
   currentUserMessageId?: string | null
 
   // Per-message metadata captured at send-time for reliable stats
+
+  // Context usage tracking for percentage pill
+  contextUsage: {
+    usage: number
+    percentage: number
+    model: string
+    contextWindow: number
+    when: 'start' | 'end'
+    estimatedTokens?: number
+  } | null
 }
 
 export interface CopilotActions {