fix(custom-tools, copilot): custom tools state + copilot fixes (#2264)

* Workspace env vars

* Fix execution animation on copilot run

* Custom tools toolg

* Custom tools

* Fix custom tool

* remove extra fallback

* Fix lint

Author: Sg312

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

@@ -353,10 +353,10 @@ export async function POST(req: NextRequest) {
           executeLocally: true,
         },
       ]
-      // Fetch user credentials (OAuth + API keys)
+      // Fetch user credentials (OAuth + API keys) - pass workflowId to get workspace env vars
       try {
         const rawCredentials = await getCredentialsServerTool.execute(
-          {},
+          { workflowId },
           { userId: authenticatedUserId }
         )
 
@@ -840,9 +840,36 @@ export async function POST(req: NextRequest) {
             }
           } catch (error) {
             logger.error(`[${tracker.requestId}] Error processing stream:`, error)
-            controller.error(error)
+
+            // Send an error event to the client before closing so it knows what happened
+            try {
+              const errorMessage =
+                error instanceof Error && error.message === 'terminated'
+                  ? 'Connection to AI service was interrupted. Please try again.'
+                  : 'An unexpected error occurred while processing the response.'
+              const encoder = new TextEncoder()
+
+              // Send error as content so it shows in the chat
+              controller.enqueue(
+                encoder.encode(
+                  `data: ${JSON.stringify({ type: 'content', data: `\n\n_${errorMessage}_` })}\n\n`
+                )
+              )
+              // Send done event to properly close the stream on client
+              controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'done' })}\n\n`))
+            } catch (enqueueError) {
+              // Stream might already be closed, that's ok
+              logger.warn(
+                `[${tracker.requestId}] Could not send error event to client:`,
+                enqueueError
+              )
+            }
           } finally {
-            controller.close()
+            try {
+              controller.close()
+            } catch {
+              // Controller might already be closed
+            }
           }
         },
       })

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

@@ -451,15 +451,6 @@ function RunSkipButtons({
   const actionInProgressRef = useRef(false)
   const { setToolCallState, addAutoAllowedTool } = useCopilotStore()
 
-  const instance = getClientTool(toolCall.id)
-  const interruptDisplays = instance?.getInterruptDisplays?.()
-  const isIntegration = isIntegrationTool(toolCall.name)
-
-  // For integration tools: Allow, Always Allow, Skip
-  // For client tools with interrupts: Run, Skip (or custom labels)
-  const acceptLabel = isIntegration ? 'Allow' : interruptDisplays?.accept?.text || 'Run'
-  const rejectLabel = interruptDisplays?.reject?.text || 'Skip'
-
   const onRun = async () => {
     // Prevent race condition - check ref synchronously
     if (actionInProgressRef.current) return
@@ -507,20 +498,19 @@ function RunSkipButtons({
 
   if (buttonsHidden) return null
 
+  // Standardized buttons for all interrupt tools: Allow, Always Allow, Skip
   return (
     <div className='mt-[12px] flex gap-[6px]'>
       <Button onClick={onRun} disabled={isProcessing} variant='primary'>
         {isProcessing ? <Loader2 className='mr-1 h-3 w-3 animate-spin' /> : null}
-        {acceptLabel}
+        Allow
+      </Button>
+      <Button onClick={onAlwaysAllow} disabled={isProcessing} variant='default'>
+        {isProcessing ? <Loader2 className='mr-1 h-3 w-3 animate-spin' /> : null}
+        Always Allow
       </Button>
-      {isIntegration && (
-        <Button onClick={onAlwaysAllow} disabled={isProcessing} variant='default'>
-          {isProcessing ? <Loader2 className='mr-1 h-3 w-3 animate-spin' /> : null}
-          Always Allow
-        </Button>
-      )}
       <Button onClick={onSkip} disabled={isProcessing} variant='default'>
-        {rejectLabel}
+        Skip
       </Button>
     </div>
   )

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

@@ -190,15 +190,25 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
 
   /**
    * Cleanup on component unmount (page refresh, navigation, etc.)
+   * Uses a ref to track sending state to avoid stale closure issues
+   * Note: Parent workflow.tsx also has useStreamCleanup for page-level cleanup
    */
+  const isSendingRef = useRef(isSendingMessage)
+  isSendingRef.current = isSendingMessage
+  const abortMessageRef = useRef(abortMessage)
+  abortMessageRef.current = abortMessage
+
   useEffect(() => {
     return () => {
-      if (isSendingMessage) {
-        abortMessage()
+      // Use refs to check current values, not stale closure values
+      if (isSendingRef.current) {
+        abortMessageRef.current()
         logger.info('Aborted active message streaming due to component unmount')
       }
     }
-  }, [isSendingMessage, abortMessage])
+    // Empty deps - only run cleanup on actual unmount, not on re-renders
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   /**
    * Container-level click capture to cancel edit mode when clicking outside the current edit area

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx

@@ -58,6 +58,7 @@ interface CustomToolModalProps {
 
 export interface CustomTool {
   type: 'custom-tool'
+  id?: string
   title: string
   name: string
   description: string
@@ -433,6 +434,8 @@ try {
         }
       }
 
+      let savedToolId: string | undefined
+
       if (isEditing && toolIdToUpdate) {
         await updateToolMutation.mutateAsync({
           workspaceId,
@@ -443,19 +446,23 @@ try {
             code: functionCode || '',
           },
         })
+        savedToolId = toolIdToUpdate
       } else {
-        await createToolMutation.mutateAsync({
+        const result = await createToolMutation.mutateAsync({
           workspaceId,
           tool: {
             title: name,
             schema,
             code: functionCode || '',
           },
         })
+        // Get the ID from the created tool
+        savedToolId = result?.[0]?.id
       }
 
       const customTool: CustomTool = {
         type: 'custom-tool',
+        id: savedToolId,
         title: name,
         name,
         description,