feat(copilot+canvas rendering): add context window tracking to copilot and selectively render canvas components (#1622)

* Copilot context window

* Fix pill

* Speed up canvas

* Fix react hook bug

* Context pill div

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/diff-controls.tsx

@@ -1,3 +1,4 @@
+import { memo, useCallback } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -9,31 +10,46 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('DiffControls')
 
-export function DiffControls() {
-  const {
-    isShowingDiff,
-    isDiffReady,
-    diffWorkflow,
-    toggleDiffView,
-    acceptChanges,
-    rejectChanges,
-    diffMetadata,
-  } = useWorkflowDiffStore()
-
-  const { updatePreviewToolCallState, clearPreviewYaml, currentChat, messages } = useCopilotStore()
-  const { activeWorkflowId } = useWorkflowRegistry()
+export const DiffControls = memo(function DiffControls() {
+  // Optimized: Single diff store subscription
+  const { isShowingDiff, isDiffReady, diffWorkflow, toggleDiffView, acceptChanges, rejectChanges } =
+    useWorkflowDiffStore(
+      useCallback(
+        (state) => ({
+          isShowingDiff: state.isShowingDiff,
+          isDiffReady: state.isDiffReady,
+          diffWorkflow: state.diffWorkflow,
+          toggleDiffView: state.toggleDiffView,
+          acceptChanges: state.acceptChanges,
+          rejectChanges: state.rejectChanges,
+        }),
+        []
+      )
+    )
+
+  // Optimized: Single copilot store subscription for needed values
+  const { updatePreviewToolCallState, clearPreviewYaml, currentChat, messages } = useCopilotStore(
+    useCallback(
+      (state) => ({
+        updatePreviewToolCallState: state.updatePreviewToolCallState,
+        clearPreviewYaml: state.clearPreviewYaml,
+        currentChat: state.currentChat,
+        messages: state.messages,
+      }),
+      []
+    )
+  )
 
-  // Don't show anything if no diff is available or diff is not ready
-  if (!diffWorkflow || !isDiffReady) {
-    return null
-  }
+  const { activeWorkflowId } = useWorkflowRegistry(
+    useCallback((state) => ({ activeWorkflowId: state.activeWorkflowId }), [])
+  )
 
-  const handleToggleDiff = () => {
+  const handleToggleDiff = useCallback(() => {
     logger.info('Toggling diff view', { currentState: isShowingDiff })
     toggleDiffView()
-  }
+  }, [isShowingDiff, toggleDiffView])
 
-  const createCheckpoint = async () => {
+  const createCheckpoint = useCallback(async () => {
     if (!activeWorkflowId || !currentChat?.id) {
       logger.warn('Cannot create checkpoint: missing workflowId or chatId', {
         workflowId: activeWorkflowId,
@@ -184,9 +200,9 @@ export function DiffControls() {
       logger.error('Failed to create checkpoint:', error)
       return false
     }
-  }
+  }, [activeWorkflowId, currentChat, messages])
 
-  const handleAccept = async () => {
+  const handleAccept = useCallback(async () => {
     logger.info('Accepting proposed changes with backup protection')
 
     try {
@@ -239,9 +255,9 @@ export function DiffControls() {
       console.error('Workflow update failed:', errorMessage)
       alert(`Failed to save workflow changes: ${errorMessage}`)
     }
-  }
+  }, [createCheckpoint, clearPreviewYaml, updatePreviewToolCallState, acceptChanges])
 
-  const handleReject = () => {
+  const handleReject = useCallback(() => {
     logger.info('Rejecting proposed changes (optimistic)')
 
     // Clear preview YAML immediately
@@ -279,6 +295,11 @@ export function DiffControls() {
     rejectChanges().catch((error) => {
       logger.error('Failed to reject changes (background):', error)
     })
+  }, [clearPreviewYaml, updatePreviewToolCallState, rejectChanges])
+
+  // Don't show anything if no diff is available or diff is not ready
+  if (!diffWorkflow || !isDiffReady) {
+    return null
   }
 
   return (
@@ -319,4 +340,4 @@ export function DiffControls() {
       </div>
     </div>
   )
-}
+})

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

@@ -0,0 +1,60 @@
+'use client'
+
+import { memo } from 'react'
+import { Plus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ContextUsagePillProps {
+  percentage: number
+  className?: string
+  onCreateNewChat?: () => void
+}
+
+export const ContextUsagePill = memo(
+  ({ percentage, className, onCreateNewChat }: ContextUsagePillProps) => {
+    // Don't render if invalid (but DO render if 0 or very small)
+    if (percentage === null || percentage === undefined || Number.isNaN(percentage)) return null
+
+    const isHighUsage = percentage >= 75
+
+    // 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 gap-1 rounded-full px-2 py-0.5 font-medium text-[11px] tabular-nums transition-colors',
+          getColorClass(),
+          isHighUsage && 'border border-red-500/50',
+          className
+        )}
+        title={`Context used in this chat: ${percentage.toFixed(2)}%`}
+      >
+        <span>{formattedPercentage}%</span>
+        {isHighUsage && onCreateNewChat && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onCreateNewChat()
+            }}
+            className='inline-flex items-center justify-center transition-opacity hover:opacity-70'
+            title='Recommended: Start a new chat for better quality'
+            type='button'
+          >
+            <Plus className='h-3 w-3' />
+          </button>
+        )}
+      </div>
+    )
+  }
+)
+
+ContextUsagePill.displayName = 'ContextUsagePill'