From 9865592231e84b16c28c9cd62dd10d7ac932d2ce Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 14 Oct 2025 09:47:02 -0700
Subject: [PATCH 01/28] Add exa to search online tool

---
 .../tools/server/other/search-online.ts       | 67 +++++++++++++++++--
 apps/sim/lib/env.ts                           |  1 +
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/apps/sim/lib/copilot/tools/server/other/search-online.ts b/apps/sim/lib/copilot/tools/server/other/search-online.ts
index 9169e9e4c4a..ea28794fa3d 100644
--- a/apps/sim/lib/copilot/tools/server/other/search-online.ts
+++ b/apps/sim/lib/copilot/tools/server/other/search-online.ts
@@ -18,17 +18,75 @@ export const searchOnlineServerTool: BaseServerTool<OnlineSearchParams, any> = {
     const { query, num = 10, type = 'search', gl, hl } = params
     if (!query || typeof query !== 'string') throw new Error('query is required')
 
-    // Input diagnostics (no secrets)
-    const hasApiKey = Boolean(env.SERPER_API_KEY && String(env.SERPER_API_KEY).length > 0)
-    logger.info('Performing online search (new runtime)', {
+    // Check which API keys are available
+    const hasExaApiKey = Boolean(env.EXA_API_KEY && String(env.EXA_API_KEY).length > 0)
+    const hasSerperApiKey = Boolean(env.SERPER_API_KEY && String(env.SERPER_API_KEY).length > 0)
+    
+    logger.info('Performing online search', {
       queryLength: query.length,
       num,
       type,
       gl,
       hl,
-      hasApiKey,
+      hasExaApiKey,
+      hasSerperApiKey,
     })
 
+    // Try Exa first if available
+    if (hasExaApiKey) {
+      try {
+        logger.debug('Attempting exa_search', { num })
+        const exaResult = await executeTool('exa_search', {
+          query,
+          numResults: num,
+          type: 'auto',
+          apiKey: env.EXA_API_KEY || '',
+        })
+
+        const exaResults = (exaResult as any)?.output?.results || []
+        const count = Array.isArray(exaResults) ? exaResults.length : 0
+        const firstTitle = count > 0 ? String(exaResults[0]?.title || '') : undefined
+
+        logger.info('exa_search completed', {
+          success: exaResult.success,
+          resultsCount: count,
+          firstTitlePreview: firstTitle?.slice(0, 120),
+        })
+
+        if (exaResult.success && count > 0) {
+          // Transform Exa results to match expected format
+          const transformedResults = exaResults.map((result: any) => ({
+            title: result.title || '',
+            link: result.url || '',
+            snippet: result.text || result.summary || '',
+            date: result.publishedDate,
+            position: exaResults.indexOf(result) + 1,
+          }))
+
+          return {
+            results: transformedResults,
+            query,
+            type,
+            totalResults: count,
+            source: 'exa',
+          }
+        }
+
+        logger.warn('exa_search returned no results, falling back to Serper', {
+          queryLength: query.length,
+        })
+      } catch (exaError: any) {
+        logger.warn('exa_search failed, falling back to Serper', {
+          error: exaError?.message,
+        })
+      }
+    }
+
+    // Fall back to Serper if Exa failed or wasn't available
+    if (!hasSerperApiKey) {
+      throw new Error('No search API keys available (EXA_API_KEY or SERPER_API_KEY required)')
+    }
+
     const toolParams = {
       query,
       num,
@@ -65,6 +123,7 @@ export const searchOnlineServerTool: BaseServerTool<OnlineSearchParams, any> = {
         query,
         type,
         totalResults: count,
+        source: 'serper',
       }
     } catch (e: any) {
       logger.error('search_online execution error', { message: e?.message })
diff --git a/apps/sim/lib/env.ts b/apps/sim/lib/env.ts
index eb3ebc8526f..5baedfbf737 100644
--- a/apps/sim/lib/env.ts
+++ b/apps/sim/lib/env.ts
@@ -75,6 +75,7 @@ export const env = createEnv({
     OLLAMA_URL:                            z.string().url().optional(),            // Ollama local LLM server URL
     ELEVENLABS_API_KEY:                    z.string().min(1).optional(),           // ElevenLabs API key for text-to-speech in deployed chat
     SERPER_API_KEY:                        z.string().min(1).optional(),           // Serper API key for online search
+    EXA_API_KEY:                           z.string().min(1).optional(),           // Exa AI API key for enhanced online search
 
     // Azure Configuration - Shared credentials with feature-specific models
     AZURE_OPENAI_ENDPOINT:                 z.string().url().optional(),            // Shared Azure OpenAI service endpoint

From 732b61369d2f58d7b6ca0476db67157ca5955f76 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 13:14:55 -0700
Subject: [PATCH 02/28] Larger font size

---
 .../copilot-message/copilot-message.tsx       | 302 +++++++++++++-----
 .../components/user-input/user-input.tsx      |  65 +++-
 .../panel/components/copilot/copilot.tsx      |   4 +-
 apps/sim/stores/copilot/store.ts              |   9 +-
 apps/sim/stores/copilot/types.ts              |   1 +
 5 files changed, 295 insertions(+), 86 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 2aaf4494c1f..1fbca40a3b0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type FC, memo, useEffect, useMemo, useState } from 'react'
+import { type FC, memo, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Blocks,
   BookOpen,
@@ -8,6 +8,7 @@ import {
   Box,
   Check,
   Clipboard,
+  Edit,
   Info,
   LibraryBig,
   Loader2,
@@ -32,6 +33,7 @@ import CopilotMarkdownRenderer from '@/app/workspace/[workspaceId]/w/[workflowId
 import { usePreviewStore } from '@/stores/copilot/preview-store'
 import { useCopilotStore } from '@/stores/copilot/store'
 import type { CopilotMessage as CopilotMessageType } from '@/stores/copilot/types'
+import { UserInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
 
 const logger = createLogger('CopilotMessage')
 
@@ -49,6 +51,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     const [showDownvoteSuccess, setShowDownvoteSuccess] = useState(false)
     const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false)
     const [showAllContexts, setShowAllContexts] = useState(false)
+    const [isEditMode, setIsEditMode] = useState(false)
+    const [isExpanded, setIsExpanded] = useState(false)
+    const [editedContent, setEditedContent] = useState(message.content)
+    const [isHoveringMessage, setIsHoveringMessage] = useState(false)
+    const editContainerRef = useRef<HTMLDivElement>(null)
+    const messageContentRef = useRef<HTMLDivElement>(null)
+    const [needsExpansion, setNeedsExpansion] = useState(false)
 
     // Get checkpoint functionality from copilot store
     const {
@@ -58,6 +67,11 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       currentChat,
       messages,
       workflowId,
+      sendMessage,
+      isSendingMessage,
+      abortMessage,
+      mode,
+      setMode,
     } = useCopilotStore()
 
     // Get preview store for accessing workflow YAML after rejection
@@ -70,6 +84,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     const messageCheckpoints = isUser ? allMessageCheckpoints[message.id] || [] : []
     const hasCheckpoints = messageCheckpoints.length > 0
 
+    // Check if this is the last user message (for showing abort button)
+    const isLastUserMessage = useMemo(() => {
+      if (!isUser) return false
+      const userMessages = messages.filter((m) => m.role === 'user')
+      return userMessages.length > 0 && userMessages[userMessages.length - 1]?.id === message.id
+    }, [isUser, messages, message.id])
+
     const handleCopyContent = () => {
       // Copy clean text content
       navigator.clipboard.writeText(message.content)
@@ -258,6 +279,83 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       setShowRestoreConfirmation(false)
     }
 
+    const handleEditMessage = () => {
+      setIsEditMode(true)
+      setIsExpanded(false)
+      setEditedContent(message.content)
+    }
+
+    const handleCancelEdit = () => {
+      setIsEditMode(false)
+      setEditedContent(message.content)
+    }
+
+    const handleMessageClick = () => {
+      if (isSendingMessage) return
+      
+      // If message needs expansion and is not expanded, expand it first
+      if (needsExpansion && !isExpanded) {
+        setIsExpanded(true)
+      } else {
+        // Otherwise enter edit mode
+        handleEditMessage()
+      }
+    }
+
+    const handleSubmitEdit = async (
+      editedMessage: string,
+      fileAttachments?: any[],
+      contexts?: any[]
+    ) => {
+      if (!editedMessage.trim() || isSendingMessage) return
+      
+      // Find the index of this message and truncate conversation
+      const currentMessages = messages
+      const editIndex = currentMessages.findIndex((m) => m.id === message.id)
+      
+      if (editIndex !== -1) {
+        // Exit edit mode immediately
+        setIsEditMode(false)
+        
+        // Truncate messages after the edited message (remove it and everything after)
+        const truncatedMessages = currentMessages.slice(0, editIndex)
+        
+        // Update store to show only messages before the edit point
+        useCopilotStore.setState({ messages: truncatedMessages })
+        
+        // If we have a current chat, update the DB to remove messages after this point
+        if (currentChat?.id) {
+          try {
+            await fetch('/api/copilot/chat/update-messages', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ 
+                chatId: currentChat.id, 
+                messages: truncatedMessages.map(m => ({
+                  id: m.id,
+                  role: m.role,
+                  content: m.content,
+                  timestamp: m.timestamp,
+                  ...(m.contentBlocks && { contentBlocks: m.contentBlocks }),
+                  ...(m.fileAttachments && { fileAttachments: m.fileAttachments }),
+                  ...((m as any).contexts && { contexts: (m as any).contexts }),
+                }))
+              }),
+            })
+          } catch (error) {
+            logger.error('Failed to update messages in DB after edit:', error)
+          }
+        }
+        
+        // Send the edited message with the SAME message ID
+        await sendMessage(editedMessage, { 
+          fileAttachments: fileAttachments || message.fileAttachments,
+          contexts: contexts || (message as any).contexts,
+          messageId: message.id  // Reuse the original message ID
+        })
+      }
+    }
+
     useEffect(() => {
       if (showCopySuccess) {
         const timer = setTimeout(() => {
@@ -285,6 +383,56 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       }
     }, [showDownvoteSuccess])
 
+    // Handle click outside to exit edit mode
+    useEffect(() => {
+      if (!isEditMode) return
+
+      const handleClickOutside = (event: MouseEvent) => {
+        const target = event.target as HTMLElement
+        
+        // Don't close if clicking inside the edit container
+        if (editContainerRef.current && editContainerRef.current.contains(target)) {
+          return
+        }
+        
+        // Check if clicking on another user message box
+        const clickedMessageBox = target.closest('[data-message-box]') as HTMLElement
+        if (clickedMessageBox) {
+          const clickedMessageId = clickedMessageBox.getAttribute('data-message-id')
+          // If clicking on a different message, close this one (the other will open via its own click handler)
+          if (clickedMessageId && clickedMessageId !== message.id) {
+            handleCancelEdit()
+          }
+          // Don't close if clicking on the same message (already in edit mode)
+          return
+        }
+        
+        // Close edit mode if clicking anywhere else (not a message box)
+        handleCancelEdit()
+      }
+
+      // Use click event instead of mousedown to allow the target's click handler to fire first
+      // Add listener with a slight delay to avoid immediate trigger when entering edit mode
+      const timeoutId = setTimeout(() => {
+        document.addEventListener('click', handleClickOutside, true) // Use capture phase
+      }, 100)
+
+      return () => {
+        clearTimeout(timeoutId)
+        document.removeEventListener('click', handleClickOutside, true)
+      }
+    }, [isEditMode, message.id])
+
+    // Check if message content needs expansion (is tall)
+    useEffect(() => {
+      if (messageContentRef.current && isUser) {
+        const scrollHeight = messageContentRef.current.scrollHeight
+        const clientHeight = messageContentRef.current.clientHeight
+        // If content is taller than the max height (3 lines ~60px), mark as needing expansion
+        setNeedsExpansion(scrollHeight > 60)
+      }
+    }, [message.content, isUser])
+
     // Get clean text content with double newline parsing
     const cleanTextContent = useMemo(() => {
       if (!message.content) return ''
@@ -365,23 +513,35 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     if (isUser) {
       return (
-        <div className='w-full max-w-full overflow-hidden py-2'>
-          {/* File attachments displayed above the message, completely separate from message box width */}
-          {message.fileAttachments && message.fileAttachments.length > 0 && (
-            <div className='mb-1 flex justify-end'>
-              <div className='flex flex-wrap gap-1.5'>
-                <FileAttachmentDisplay fileAttachments={message.fileAttachments} />
-              </div>
+        <div className='w-full max-w-full overflow-hidden py-0.5'>
+          {isEditMode ? (
+            <div ref={editContainerRef} className='w-full'>
+              <UserInput
+                onSubmit={handleSubmitEdit}
+                onAbort={handleCancelEdit}
+                isLoading={isSendingMessage}
+                value={editedContent}
+                onChange={setEditedContent}
+                placeholder='Edit your message...'
+                mode={mode}
+                onModeChange={setMode}
+                hideContextUsage={true}
+              />
             </div>
-          )}
+          ) : (
+            <div className='w-full'>
+              {/* File attachments displayed above the message box */}
+              {message.fileAttachments && message.fileAttachments.length > 0 && (
+                <div className='mb-1.5 flex flex-wrap gap-1.5'>
+                  <FileAttachmentDisplay fileAttachments={message.fileAttachments} />
+                </div>
+              )}
 
-          {/* Context chips displayed above the message bubble, independent of inline text */}
-          {(Array.isArray((message as any).contexts) && (message as any).contexts.length > 0) ||
-          (Array.isArray(message.contentBlocks) &&
-            (message.contentBlocks as any[]).some((b: any) => b?.type === 'contexts')) ? (
-            <div className='flex items-center justify-end gap-0'>
-              <div className='min-w-0 max-w-[80%]'>
-                <div className='mb-1 flex flex-wrap justify-end gap-1.5'>
+              {/* Context chips displayed above the message box */}
+              {(Array.isArray((message as any).contexts) && (message as any).contexts.length > 0) ||
+              (Array.isArray(message.contentBlocks) &&
+                (message.contentBlocks as any[]).some((b: any) => b?.type === 'contexts')) ? (
+                <div className='mb-1.5 flex flex-wrap gap-1.5'>
                   {(() => {
                     const direct = Array.isArray((message as any).contexts)
                       ? ((message as any).contexts as any[])
@@ -451,21 +611,26 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                     )
                   })()}
                 </div>
-              </div>
-            </div>
-          ) : null}
+              ) : null}
 
-          <div className='flex items-center justify-end gap-0'>
-            <div className='min-w-0 max-w-[80%]'>
-              {/* Message content in purple box */}
+              {/* Message box - styled like input, clickable to edit */}
               <div
-                className='rounded-[10px] px-3 py-2'
-                style={{
-                  backgroundColor:
-                    'color-mix(in srgb, var(--brand-primary-hover-hex) 8%, transparent)',
-                }}
+                data-message-box
+                data-message-id={message.id}
+                onClick={!isSendingMessage ? handleMessageClick : undefined}
+                onMouseEnter={() => setIsHoveringMessage(true)}
+                onMouseLeave={() => setIsHoveringMessage(false)}
+                className='group relative cursor-text rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] px-3 py-1.5 shadow-xs transition-all duration-200 hover:border-[#D0D0D0] dark:border-[#414141] dark:bg-[var(--surface-elevated)] dark:hover:border-[#525252]'
               >
-                <div className='whitespace-pre-wrap break-words font-normal text-base text-foreground leading-relaxed'>
+                <div 
+                  ref={messageContentRef}
+                  className='whitespace-pre-wrap break-words pl-[2px] pr-2 py-1 font-sans text-sm text-foreground leading-[1.25rem]'
+                  style={{
+                    maxHeight: !isExpanded && needsExpansion ? '60px' : 'none',
+                    overflow: !isExpanded && needsExpansion ? 'hidden' : 'visible',
+                    position: 'relative'
+                  }}
+                >
                   {(() => {
                     const text = message.content || ''
                     const contexts: any[] = Array.isArray((message as any).contexts)
@@ -475,7 +640,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                       .filter((c) => c?.kind !== 'current_workflow')
                       .map((c) => c?.label)
                       .filter(Boolean) as string[]
-                    if (!labels.length) return <WordWrap text={text} />
+                    if (!labels.length) return text
 
                     const escapeRegex = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
                     const pattern = new RegExp(`@(${labels.map(escapeRegex).join('|')})`, 'g')
@@ -502,60 +667,53 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                     if (tail) nodes.push(tail)
                     return nodes
                   })()}
+                  
+                  {/* Gradient fade and ellipsis when truncated */}
+                  {!isExpanded && needsExpansion && (
+                    <div className='absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-[#FFFFFF] to-transparent dark:from-[var(--surface-elevated)]' />
+                  )}
                 </div>
-              </div>
-              {hasCheckpoints && (
-                <div className='mt-1 flex h-6 items-center justify-end'>
-                  {showRestoreConfirmation ? (
-                    <div className='inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] text-muted-foreground'>
-                      <span>Restore Checkpoint?</span>
-                      <button
-                        onClick={handleConfirmRevert}
-                        disabled={isRevertingCheckpoint}
-                        className='transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50'
-                        title='Confirm restore'
-                        aria-label='Confirm restore'
-                      >
-                        {isRevertingCheckpoint ? (
-                          <Loader2 className='h-3 w-3 animate-spin' />
-                        ) : (
-                          <Check className='h-3 w-3' />
-                        )}
-                      </button>
-                      <button
-                        onClick={handleCancelRevert}
-                        disabled={isRevertingCheckpoint}
-                        className='transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50'
-                        title='Cancel restore'
-                        aria-label='Cancel restore'
-                      >
-                        <X className='h-3 w-3' />
-                      </button>
-                    </div>
-                  ) : (
+
+                {/* Show more indicator when truncated */}
+                {!isExpanded && needsExpansion && (
+                  <div className='mt-1 text-center text-muted-foreground text-xs'>
+                    Click to expand...
+                  </div>
+                )}
+
+                {/* Abort button when hovering and response is generating (only on last user message) */}
+                {isSendingMessage && isHoveringMessage && isLastUserMessage && (
+                  <div className='absolute top-2 right-2'>
                     <button
-                      onClick={handleRevertToCheckpoint}
-                      disabled={isRevertingCheckpoint}
-                      className='inline-flex items-center gap-1 text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50'
-                      title='Restore workflow to this checkpoint state'
-                      aria-label='Restore'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        abortMessage()
+                      }}
+                      className='flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white transition-all duration-200 hover:bg-red-600'
+                      title='Stop generation'
                     >
-                      <span className='text-[11px]'>Restore</span>
-                      <RotateCcw className='h-3 w-3' />
+                      <X className='h-3 w-3' />
                     </button>
-                  )}
-                </div>
-              )}
+                  </div>
+                )}
+
+                {/* Edit indicator on hover (only when not generating) */}
+                {!isSendingMessage && (
+                  <div className='pointer-events-none absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100'>
+                    <Edit className='h-3.5 w-3.5 text-muted-foreground' />
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
+          )}
         </div>
       )
     }
 
     if (isAssistant) {
       return (
-        <div className='w-full max-w-full overflow-hidden py-2 pl-[2px]'>
-          <div className='max-w-full space-y-2 transition-all duration-200 ease-in-out'>
+        <div className='w-full max-w-full overflow-hidden py-0.5 pl-[2px]'>
+          <div className='max-w-full space-y-1.5 transition-all duration-200 ease-in-out'>
             {/* Content blocks in chronological order */}
             {memoizedContentBlocks}
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index d2a98dc7488..799bfe13471 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -20,6 +20,7 @@ import {
   BrainCircuit,
   Check,
   ChevronRight,
+  Edit,
   FileText,
   Image,
   Infinity as InfinityIcon,
@@ -54,7 +55,7 @@ import { createLogger } from '@/lib/logs/console/logger'
 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 { useWorkflowStore } from '@/stores/workflows/workflow/store' 
 import { ContextUsagePill } from '../context-usage-pill/context-usage-pill'
 
 const logger = createLogger('CopilotUserInput')
@@ -95,6 +96,7 @@ interface UserInputProps {
   value?: string // Controlled value from outside
   onChange?: (value: string) => void // Callback when value changes
   panelWidth?: number // Panel width to adjust truncation
+  hideContextUsage?: boolean // Hide the context usage pill
 }
 
 interface UserInputRef {
@@ -116,6 +118,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       value: controlledValue,
       onChange: onControlledChange,
       panelWidth = 308,
+      hideContextUsage = false,
     },
     ref
   ) => {
@@ -1919,11 +1922,45 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       setOpenSubmenuFor(null)
     }
 
+    useEffect(() => {
+      const textarea = textareaRef.current
+      const overlay = overlayRef.current
+      if (!textarea || !overlay || typeof window === 'undefined') return
+
+      const syncOverlayStyles = () => {
+        const styles = window.getComputedStyle(textarea)
+        overlay.style.font = styles.font
+        overlay.style.letterSpacing = styles.letterSpacing
+        overlay.style.padding = styles.padding
+        overlay.style.lineHeight = styles.lineHeight
+        overlay.style.color = styles.color
+        overlay.style.whiteSpace = styles.whiteSpace
+        overlay.style.wordBreak = styles.wordBreak
+        overlay.style.width = `${textarea.clientWidth}px`
+        overlay.style.height = `${textarea.clientHeight}px`
+        overlay.style.borderRadius = styles.borderRadius
+      }
+
+      syncOverlayStyles()
+
+      let resizeObserver: ResizeObserver | null = null
+      if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(() => syncOverlayStyles())
+        resizeObserver.observe(textarea)
+      }
+      window.addEventListener('resize', syncOverlayStyles)
+
+      return () => {
+        resizeObserver?.disconnect()
+        window.removeEventListener('resize', syncOverlayStyles)
+      }
+    }, [panelWidth, message, selectedContexts])
+
     return (
-      <div className={cn('relative flex-none pb-4', className)}>
+      <div className={cn('relative flex-none pb-3', className)}>
         <div
           className={cn(
-            'relative 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] px-3 py-1.5 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'
           )}
@@ -1933,7 +1970,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           onDrop={handleDrop}
         >
           {/* Context Usage Pill - Top Right */}
-          {contextUsage && contextUsage.percentage > 0 && (
+          {!hideContextUsage && contextUsage && contextUsage.percentage > 0 && (
             <div className='absolute top-2 right-2 z-10'>
               <ContextUsagePill
                 percentage={contextUsage.percentage}
@@ -1941,6 +1978,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               />
             </div>
           )}
+
           {/* Attached Files Display with Thumbnails */}
           {attachedFiles.length > 0 && (
             <div className='mb-2 flex flex-wrap gap-1.5'>
@@ -2054,9 +2092,9 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             {/* Highlight overlay */}
             <div
               ref={overlayRef}
-              className='pointer-events-none absolute inset-0 z-[1] max-h-[120px] overflow-y-auto overflow-x-hidden pl-[2px] pr-14 py-1 [&::-webkit-scrollbar]:hidden'
+              className='pointer-events-none absolute inset-0 z-[1] max-h-[120px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words [&::-webkit-scrollbar]:hidden'
             >
-              <pre className='whitespace-pre-wrap break-words font-sans text-foreground text-sm leading-[1.25rem]'>
+              <pre className='m-0 whitespace-pre-wrap break-words font-sans text-sm text-foreground leading-[1.25rem]'>
                 {(() => {
                   const elements: React.ReactNode[] = []
                   const remaining = message
@@ -2065,7 +2103,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                   // Build regex for all labels
                   const labels = contexts.map((c) => c.label).filter(Boolean)
                   const pattern = new RegExp(
-                    `@(${labels.map((l) => l.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')).join('|')})`,
+                    `@(${labels.map((l) => l.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')).join('|')})`,
                     'g'
                   )
                   let lastIndex = 0
@@ -2075,11 +2113,14 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                     const before = remaining.slice(lastIndex, i)
                     if (before) elements.push(before)
                     const mentionText = match[0]
-                    const mentionLabel = match[1]
                     elements.push(
                       <span
                         key={`${mentionText}-${i}-${lastIndex}`}
-                        className='rounded-[6px] bg-[color-mix(in_srgb,var(--brand-primary-hover-hex)_14%,transparent)]'
+                        style={{
+                          backgroundColor:
+                            'color-mix(in srgb, var(--brand-primary-hover-hex) 14%, transparent)',
+                          borderRadius: '6px',
+                        }}
                       >
                         {mentionText}
                       </span>
@@ -2099,6 +2140,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               onKeyDown={handleKeyDown}
               onSelect={handleSelectAdjust}
               onMouseUp={handleSelectAdjust}
+              onScroll={(e) => {
+                if (overlayRef.current) {
+                  overlayRef.current.scrollTop = e.currentTarget.scrollTop
+                  overlayRef.current.scrollLeft = e.currentTarget.scrollLeft
+                }
+              }}
               placeholder={isDragging ? 'Drop files here...' : effectivePlaceholder}
               disabled={disabled}
               rows={1}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 2e9fed2a73f..13d7ffc3477 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -376,8 +376,8 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
             ) : (
               <div className='relative flex-1 overflow-hidden'>
                 <ScrollArea ref={scrollAreaRef} className='h-full' hideScrollbar={true}>
-                  <div className='w-full max-w-full space-y-1 overflow-hidden'>
-                    {messages.length === 0 ? (
+                  <div className='w-full max-w-full space-y-2 overflow-hidden'>
+                    {messages.length === 0 && !isSendingMessage ? (
                       <div className='flex h-full items-center justify-center p-4'>
                         <CopilotWelcome
                           onQuestionClick={handleSubmit}
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index c39d9316fa5..76d1f770533 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -431,10 +431,11 @@ class StringBuilder {
 function createUserMessage(
   content: string,
   fileAttachments?: MessageFileAttachment[],
-  contexts?: ChatContext[]
+  contexts?: ChatContext[],
+  messageId?: string
 ): CopilotMessage {
   return {
-    id: crypto.randomUUID(),
+    id: messageId || crypto.randomUUID(),
     role: 'user',
     content,
     timestamp: new Date().toISOString(),
@@ -1549,17 +1550,19 @@ export const useCopilotStore = create<CopilotStore>()(
         stream = true,
         fileAttachments,
         contexts,
+        messageId,
       } = options as {
         stream?: boolean
         fileAttachments?: MessageFileAttachment[]
         contexts?: ChatContext[]
+        messageId?: string
       }
       if (!workflowId) return
 
       const abortController = new AbortController()
       set({ isSendingMessage: true, error: null, abortController })
 
-      const userMessage = createUserMessage(message, fileAttachments, contexts)
+      const userMessage = createUserMessage(message, fileAttachments, contexts, messageId)
       const streamingMessage = createStreamingMessage()
 
       let newMessages: CopilotMessage[]
diff --git a/apps/sim/stores/copilot/types.ts b/apps/sim/stores/copilot/types.ts
index 48ee024bae8..cb875a756a4 100644
--- a/apps/sim/stores/copilot/types.ts
+++ b/apps/sim/stores/copilot/types.ts
@@ -156,6 +156,7 @@ export interface CopilotActions {
       stream?: boolean
       fileAttachments?: MessageFileAttachment[]
       contexts?: ChatContext[]
+      messageId?: string
     }
   ) => Promise<void>
   abortMessage: () => void

From ebbed53c33403f32bd15c6ece488f0bee165a796 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 14:56:15 -0700
Subject: [PATCH 03/28] Copilot UI improvements

---
 .../components/markdown-renderer.tsx          |  22 +-
 .../components/thinking-block.tsx             |   4 +-
 .../copilot-message/copilot-message.tsx       |  39 +--
 .../components/user-input/user-input.tsx      | 232 ++++++++++++++++--
 apps/sim/lib/copilot/inline-tool-call.tsx     |   2 +-
 5 files changed, 253 insertions(+), 46 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
index 6cf689f6224..038b4315a6b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
@@ -141,29 +141,29 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
     () => ({
       // Paragraph
       p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
-        <p className='mb-1 font-geist-sans text-base text-gray-800 leading-relaxed last:mb-0 dark:text-gray-200'>
+        <p className='mb-1 font-sans text-sm text-gray-800 leading-[1.25rem] last:mb-0 dark:text-gray-200'>
           {children}
         </p>
       ),
 
       // Headings
       h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h1 className='mt-3 mb-3 font-geist-sans font-semibold text-2xl text-gray-900 dark:text-gray-100'>
+        <h1 className='mt-3 mb-3 font-sans font-semibold text-2xl text-gray-900 dark:text-gray-100'>
           {children}
         </h1>
       ),
       h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h2 className='mt-2.5 mb-2.5 font-geist-sans font-semibold text-gray-900 text-xl dark:text-gray-100'>
+        <h2 className='mt-2.5 mb-2.5 font-sans font-semibold text-gray-900 text-xl dark:text-gray-100'>
           {children}
         </h2>
       ),
       h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h3 className='mt-2 mb-2 font-geist-sans font-semibold text-gray-900 text-lg dark:text-gray-100'>
+        <h3 className='mt-2 mb-2 font-sans font-semibold text-gray-900 text-lg dark:text-gray-100'>
           {children}
         </h3>
       ),
       h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h4 className='mt-5 mb-2 font-geist-sans font-semibold text-base text-gray-900 dark:text-gray-100'>
+        <h4 className='mt-5 mb-2 font-sans font-semibold text-base text-gray-900 dark:text-gray-100'>
           {children}
         </h4>
       ),
@@ -171,7 +171,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       // Lists
       ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
         <ul
-          className='mt-1 mb-1 space-y-1 pl-6 font-geist-sans text-gray-800 dark:text-gray-200'
+          className='mt-1 mb-1 space-y-1 pl-6 font-sans text-gray-800 dark:text-gray-200'
           style={{ listStyleType: 'disc' }}
         >
           {children}
@@ -179,7 +179,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       ),
       ol: ({ children }: React.HTMLAttributes<HTMLOListElement>) => (
         <ol
-          className='mt-1 mb-1 space-y-1 pl-6 font-geist-sans text-gray-800 dark:text-gray-200'
+          className='mt-1 mb-1 space-y-1 pl-6 font-sans text-gray-800 dark:text-gray-200'
           style={{ listStyleType: 'decimal' }}
         >
           {children}
@@ -190,7 +190,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
         ordered,
       }: React.LiHTMLAttributes<HTMLLIElement> & { ordered?: boolean }) => (
         <li
-          className='font-geist-sans text-gray-800 dark:text-gray-200'
+          className='font-sans text-gray-800 dark:text-gray-200'
           style={{ display: 'list-item' }}
         >
           {children}
@@ -321,7 +321,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
 
       // Blockquotes
       blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-        <blockquote className='my-4 border-gray-300 border-l-4 py-1 pl-4 font-geist-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-sans text-gray-700 italic dark:border-gray-600 dark:text-gray-300'>
           {children}
         </blockquote>
       ),
@@ -339,7 +339,7 @@ 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-geist-sans text-sm dark:border-gray-700'>
+          <table className='min-w-full table-auto border border-gray-300 font-sans text-sm dark:border-gray-700'>
             {children}
           </table>
         </div>
@@ -380,7 +380,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
   )
 
   return (
-    <div className='copilot-markdown-wrapper max-w-full space-y-4 break-words font-geist-sans text-[#0D0D0D] text-base leading-relaxed dark:text-gray-100'>
+    <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'>
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
         {content}
       </ReactMarkdown>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
index 2fbfa170971..bb6d6e8cda3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
@@ -79,7 +79,7 @@ export function ThinkingBlock({
           })
         }}
         className={cn(
-          'mb-1 inline-flex items-center gap-1 text-gray-400 text-xs transition-colors hover:text-gray-500',
+          'mb-1 inline-flex items-center gap-1 text-gray-400 text-[11px] transition-colors hover:text-gray-500',
           'font-normal italic'
         )}
         type='button'
@@ -96,7 +96,7 @@ export function ThinkingBlock({
 
       {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-gray-400 text-xs dark:text-gray-500'>
+          <pre className='whitespace-pre-wrap font-mono text-gray-400 text-[11px] dark:text-gray-500'>
             {content}
             {isStreaming && (
               <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-gray-400' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 1fbca40a3b0..e797d69c65d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -293,13 +293,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     const handleMessageClick = () => {
       if (isSendingMessage) return
       
-      // If message needs expansion and is not expanded, expand it first
+      // If message needs expansion and is not expanded, expand it
       if (needsExpansion && !isExpanded) {
         setIsExpanded(true)
-      } else {
-        // Otherwise enter edit mode
-        handleEditMessage()
       }
+      
+      // Always enter edit mode on click
+      handleEditMessage()
     }
 
     const handleSubmitEdit = async (
@@ -403,23 +403,41 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           if (clickedMessageId && clickedMessageId !== message.id) {
             handleCancelEdit()
           }
-          // Don't close if clicking on the same message (already in edit mode)
           return
         }
         
-        // Close edit mode if clicking anywhere else (not a message box)
+        // Check if clicking on the main user input at the bottom
+        if (target.closest('textarea') || target.closest('input[type="text"]')) {
+          handleCancelEdit()
+          return
+        }
+        
+        // Only close if NOT clicking on any component (i.e., clicking directly on panel background)
+        // If the target has children or is a component, don't close
+        if (target.children.length > 0 || target.tagName !== 'DIV') {
+          return
+        }
+        
         handleCancelEdit()
       }
 
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          handleCancelEdit()
+        }
+      }
+
       // Use click event instead of mousedown to allow the target's click handler to fire first
       // Add listener with a slight delay to avoid immediate trigger when entering edit mode
       const timeoutId = setTimeout(() => {
         document.addEventListener('click', handleClickOutside, true) // Use capture phase
+        document.addEventListener('keydown', handleKeyDown)
       }, 100)
 
       return () => {
         clearTimeout(timeoutId)
         document.removeEventListener('click', handleClickOutside, true)
+        document.removeEventListener('keydown', handleKeyDown)
       }
     }, [isEditMode, message.id])
 
@@ -668,19 +686,12 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                     return nodes
                   })()}
                   
-                  {/* Gradient fade and ellipsis when truncated */}
+                  {/* Gradient fade when truncated */}
                   {!isExpanded && needsExpansion && (
                     <div className='absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-[#FFFFFF] to-transparent dark:from-[var(--surface-elevated)]' />
                   )}
                 </div>
 
-                {/* Show more indicator when truncated */}
-                {!isExpanded && needsExpansion && (
-                  <div className='mt-1 text-center text-muted-foreground text-xs'>
-                    Click to expand...
-                  </div>
-                )}
-
                 {/* Abort button when hovering and response is generating (only on last user message) */}
                 {isSendingMessage && isHoveringMessage && isLastUserMessage && (
                   <div className='absolute top-2 right-2'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 799bfe13471..d33dc657ea7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -9,6 +9,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { createPortal } from 'react-dom'
 import {
   ArrowUp,
   AtSign,
@@ -130,8 +131,19 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const overlayRef = useRef<HTMLDivElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
     const [showMentionMenu, setShowMentionMenu] = useState(false)
     const mentionMenuRef = useRef<HTMLDivElement>(null)
+    const mentionPortalRef = useRef<HTMLDivElement>(null)
+    const [isNearTop, setIsNearTop] = useState(false)
+    const [mentionMenuMaxHeight, setMentionMenuMaxHeight] = useState<number | undefined>(undefined)
+    const [mentionPortalStyle, setMentionPortalStyle] = useState<{
+      top: number
+      left: number
+      width: number
+      maxHeight: number
+      showBelow: boolean
+    } | null>(null)
     const submenuRef = useRef<HTMLDivElement>(null)
     const menuListRef = useRef<HTMLDivElement>(null)
     const [mentionActiveIndex, setMentionActiveIndex] = useState(0)
@@ -287,6 +299,44 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       return () => textarea.removeEventListener('scroll', handleScroll)
     }, [])
 
+    // Detect if input is near the top of the screen (update dynamically)
+    useEffect(() => {
+      const checkPosition = () => {
+        if (containerRef.current) {
+          const rect = containerRef.current.getBoundingClientRect()
+          // Consider "near top" if less than 300px from top of viewport
+          setIsNearTop(rect.top < 300)
+        }
+      }
+
+      checkPosition()
+      
+      // Check position on scroll within the copilot panel
+      const scrollContainer = containerRef.current?.closest('[data-radix-scroll-area-viewport]')
+      if (scrollContainer) {
+        scrollContainer.addEventListener('scroll', checkPosition, { passive: true })
+      }
+      
+      window.addEventListener('scroll', checkPosition, true)
+      window.addEventListener('resize', checkPosition)
+
+      return () => {
+        if (scrollContainer) {
+          scrollContainer.removeEventListener('scroll', checkPosition)
+        }
+        window.removeEventListener('scroll', checkPosition, true)
+        window.removeEventListener('resize', checkPosition)
+      }
+    }, [])
+    
+    // Also check position when mention menu opens
+    useEffect(() => {
+      if (showMentionMenu && containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect()
+        setIsNearTop(rect.top < 300)
+      }
+    }, [showMentionMenu])
+
     // Close mention menu on outside click
     useEffect(() => {
       if (!showMentionMenu) return
@@ -295,6 +345,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         if (
           mentionMenuRef.current &&
           !mentionMenuRef.current.contains(target) &&
+          (!mentionPortalRef.current || !mentionPortalRef.current.contains(target)) &&
           (!submenuRef.current || !submenuRef.current.contains(target)) &&
           textareaRef.current &&
           !textareaRef.current.contains(target as Node)
@@ -1956,8 +2007,139 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [panelWidth, message, selectedContexts])
 
+    // Update mention menu max height when visibility or position changes
+    useEffect(() => {
+      if (!showMentionMenu || !containerRef.current) {
+        setMentionMenuMaxHeight(undefined)
+        return
+      }
+      const rect = containerRef.current.getBoundingClientRect()
+      const margin = 16
+      let available = isNearTop
+        ? window.innerHeight - rect.bottom - margin
+        : rect.top - margin
+      available = Math.max(available, 120)
+      setMentionMenuMaxHeight(available)
+    }, [showMentionMenu, isNearTop])
+
+    // Position the portal mention menu
+    useEffect(() => {
+      const updatePosition = () => {
+        if (!showMentionMenu || !containerRef.current || !textareaRef.current) {
+          setMentionPortalStyle(null)
+          return
+        }
+        const rect = containerRef.current.getBoundingClientRect()
+        const margin = 8
+        
+        // Calculate cursor position using a temporary span
+        const textarea = textareaRef.current
+        const caretPos = getCaretPos()
+        
+        // Create a mirror div to calculate caret position
+        const div = document.createElement('div')
+        const style = window.getComputedStyle(textarea)
+        
+        // Copy relevant styles
+        div.style.position = 'absolute'
+        div.style.visibility = 'hidden'
+        div.style.whiteSpace = 'pre-wrap'
+        div.style.wordWrap = 'break-word'
+        div.style.font = style.font
+        div.style.padding = style.padding
+        div.style.border = style.border
+        div.style.width = style.width
+        div.style.lineHeight = style.lineHeight
+        
+        // Add text up to cursor position
+        const textBeforeCaret = message.substring(0, caretPos)
+        div.textContent = textBeforeCaret
+        
+        // Add a span at the end to measure position
+        const span = document.createElement('span')
+        span.textContent = '|'
+        div.appendChild(span)
+        
+        document.body.appendChild(div)
+        const spanRect = span.getBoundingClientRect()
+        const divRect = div.getBoundingClientRect()
+        document.body.removeChild(div)
+        
+        // Calculate the left offset relative to the textarea
+        const caretLeftOffset = spanRect.left - divRect.left
+        
+        // Calculate available space above and below
+        const spaceAbove = rect.top - margin
+        const spaceBelow = window.innerHeight - rect.bottom - margin
+        
+        // Cap max height to show ~8-10 items before scrolling (each item ~40px)
+        // This prevents the menu from extending too far in either direction
+        const maxMenuHeight = 360
+        
+        // Show below if near top OR if more space below, otherwise show above
+        const showBelow = rect.top < 300 || spaceBelow > spaceAbove
+        
+        // Calculate max height based on available space, but never exceed maxMenuHeight
+        // Use the smaller of available space and our cap to ensure menu fits
+        const maxHeight = Math.min(
+          Math.max(showBelow ? spaceBelow : spaceAbove, 120),
+          maxMenuHeight
+        )
+        
+        // Determine menu width based on submenu state
+        const menuWidth = openSubmenuFor === 'Blocks'
+          ? 320
+          : openSubmenuFor === 'Templates' || openSubmenuFor === 'Logs' || aggregatedActive
+            ? 384
+            : 224
+        
+        // Calculate left position: use caret position but ensure menu doesn't go off-screen
+        const idealLeft = rect.left + caretLeftOffset
+        const maxLeft = window.innerWidth - menuWidth - margin
+        const finalLeft = Math.min(idealLeft, maxLeft)
+
+        setMentionPortalStyle({
+          top: showBelow ? rect.bottom + 4 : rect.top - 4,
+          left: Math.max(rect.left, finalLeft), // Don't go past left edge of container
+          width: menuWidth,
+          maxHeight: maxHeight,
+          showBelow,
+        })
+        
+        // Update isNearTop state for reference
+        setIsNearTop(showBelow)
+      }
+
+      let rafId: number | null = null
+      if (showMentionMenu) {
+        updatePosition()
+        window.addEventListener('resize', updatePosition)
+        
+        // Update position on scroll
+        const scrollContainer = containerRef.current?.closest('[data-radix-scroll-area-viewport]')
+        if (scrollContainer) {
+          scrollContainer.addEventListener('scroll', updatePosition, { passive: true })
+        }
+        
+        // Continuously update position (for smooth tracking)
+        const loop = () => {
+          updatePosition()
+          rafId = requestAnimationFrame(loop)
+        }
+        rafId = requestAnimationFrame(loop)
+        
+        return () => {
+          window.removeEventListener('resize', updatePosition)
+          if (scrollContainer) {
+            scrollContainer.removeEventListener('scroll', updatePosition)
+          }
+          if (rafId) cancelAnimationFrame(rafId)
+        }
+      }
+    }, [showMentionMenu, openSubmenuFor, aggregatedActive, message])
+
     return (
-      <div className={cn('relative flex-none pb-3', className)}>
+      <div ref={containerRef} className={cn('relative flex-none pb-3', className)}>
         <div
           className={cn(
             'relative rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] px-3 py-1.5 shadow-xs transition-all duration-200 dark:border-[#414141] dark:bg-[var(--surface-elevated)]',
@@ -2093,6 +2275,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             <div
               ref={overlayRef}
               className='pointer-events-none absolute inset-0 z-[1] max-h-[120px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words [&::-webkit-scrollbar]:hidden'
+              style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
             >
               <pre className='m-0 whitespace-pre-wrap break-words font-sans text-sm text-foreground leading-[1.25rem]'>
                 {(() => {
@@ -2149,24 +2332,36 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               placeholder={isDragging ? 'Drop files here...' : effectivePlaceholder}
               disabled={disabled}
               rows={1}
-              className='relative z-[2] mb-2 min-h-[32px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent pl-[2px] pr-14 py-1 font-sans text-sm text-transparent leading-[1.25rem] caret-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
-              style={{ height: 'auto', wordBreak: 'break-word' }}
+              className='relative z-[2] mb-2 min-h-[32px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent pl-[2px] pr-14 py-1 font-sans text-sm text-transparent leading-[1.25rem] caret-foreground focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
+              style={{ height: 'auto', wordBreak: 'break-word', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
             />
 
-            {showMentionMenu && (
-              <>
+            {showMentionMenu && mentionPortalStyle && createPortal(
+              <div
+                ref={mentionPortalRef}
+                style={{
+                  position: 'fixed',
+                  top: mentionPortalStyle.top,
+                  left: mentionPortalStyle.left,
+                  width: mentionPortalStyle.width,
+                  maxHeight: mentionPortalStyle.maxHeight,
+                  zIndex: 9999999,
+                  pointerEvents: 'auto',
+                  isolation: 'isolate',
+                  transform: mentionPortalStyle.showBelow ? 'none' : 'translateY(-100%)',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
                 <div
                   ref={mentionMenuRef}
-                  className={cn(
-                    'absolute bottom-full left-0 z-50 mb-1 flex max-h-64 flex-col overflow-hidden rounded-[8px] border bg-popover p-1 text-foreground shadow-md',
-                    openSubmenuFor === 'Blocks'
-                      ? 'w-80'
-                      : openSubmenuFor === 'Templates' ||
-                          openSubmenuFor === 'Logs' ||
-                          aggregatedActive
-                        ? 'w-96'
-                        : 'w-56'
-                  )}
+                  className='flex flex-col overflow-hidden rounded-[8px] border bg-popover p-1 text-foreground shadow-md'
+                  style={{
+                    maxHeight: mentionPortalStyle.maxHeight,
+                    height: '100%',
+                    position: 'relative',
+                    zIndex: 9999999,
+                  }}
                 >
                   {openSubmenuFor ? (
                     <>
@@ -3023,7 +3218,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                     </>
                   )}
                 </div>
-              </>
+              </div>,
+              document.body
             )}
           </div>
 
@@ -3043,7 +3239,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                     <span>{getModeText()}</span>
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align='start' side='top' className='p-0'>
+                <DropdownMenuContent align='start' side={isNearTop ? 'bottom' : 'top'} className='p-0'>
                   <TooltipProvider>
                     <div className='w-[160px] p-1'>
                       <Tooltip>
@@ -3145,7 +3341,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                         </span>
                       </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align='start' side='top' className='max-h-[400px] p-0'>
+                    <DropdownMenuContent align='start' side={isNearTop ? 'bottom' : 'top'} className='max-h-[400px] p-0'>
                       <TooltipProvider delayDuration={100} skipDelayDuration={0}>
                         <div className='w-[220px]'>
                           <div className='max-h-[280px] overflow-y-auto p-2'>
diff --git a/apps/sim/lib/copilot/inline-tool-call.tsx b/apps/sim/lib/copilot/inline-tool-call.tsx
index 2f7a767c68d..13d1b50e54d 100644
--- a/apps/sim/lib/copilot/inline-tool-call.tsx
+++ b/apps/sim/lib/copilot/inline-tool-call.tsx
@@ -455,7 +455,7 @@ export function InlineToolCall({
       >
         <div className='flex items-center gap-2 text-muted-foreground'>
           <div className='flex-shrink-0'>{renderDisplayIcon()}</div>
-          <span className='text-base'>{displayName}</span>
+          <span className='text-sm'>{displayName}</span>
         </div>
         {showButtons ? (
           <RunSkipButtons toolCall={toolCall} onStateChange={handleStateChange} />

From 5efe404aaa701a8567a3966354b29a2cda2ad2c5 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 15:29:08 -0700
Subject: [PATCH 04/28] Fix models options

---
 apps/sim/app/api/copilot/user-models/route.ts | 17 ++--
 .../components/user-input/user-input.tsx      | 41 ++++-----
 .../panel/components/copilot/copilot.tsx      | 86 +++++++++++++++++++
 3 files changed, 113 insertions(+), 31 deletions(-)

diff --git a/apps/sim/app/api/copilot/user-models/route.ts b/apps/sim/app/api/copilot/user-models/route.ts
index 3e5f782fb50..88aba636c11 100644
--- a/apps/sim/app/api/copilot/user-models/route.ts
+++ b/apps/sim/app/api/copilot/user-models/route.ts
@@ -67,15 +67,14 @@ export async function GET(request: NextRequest) {
       })
     }
 
-    // If no settings record exists, create one with empty object (client will use defaults)
-    const [created] = await db
-      .insert(settings)
-      .values({
-        id: userId,
-        userId,
-        copilotEnabledModels: {},
-      })
-      .returning()
+    // If no settings record exists, create one with defaults
+    await db.insert(settings).values({
+      id: userId,
+      userId,
+      copilotEnabledModels: DEFAULT_ENABLED_MODELS,
+    })
+
+    logger.info('Created new settings record with default models', { userId })
 
     return NextResponse.json({
       enabledModels: DEFAULT_ENABLED_MODELS,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index d33dc657ea7..ad25d087148 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -243,7 +243,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
     // Fetch enabled models when dropdown is opened for the first time
     const fetchEnabledModelsOnce = useCallback(async () => {
-      if (!isHosted) return
       if (enabledModels !== null) return // Already loaded
 
       try {
@@ -1747,9 +1746,9 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       { value: 'claude-4.1-opus', label: 'claude-4.1-opus' },
     ] as const
 
-    // Filter models based on user preferences (only for hosted)
+    // Filter models based on user preferences
     const modelOptions =
-      isHosted && enabledModels !== null
+      enabledModels !== null
         ? allModelOptions.filter((model) => enabledModels.includes(model.value))
         : allModelOptions
 
@@ -3445,25 +3444,23 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                                         </div>
                                       </div>
 
-                                      {/* More Models Button (only for hosted) */}
-                                      {isHosted && (
-                                        <div className='mt-1 border-t pt-1'>
-                                          <button
-                                            type='button'
-                                            onClick={() => {
-                                              // Dispatch event to open settings modal on copilot tab
-                                              window.dispatchEvent(
-                                                new CustomEvent('open-settings', {
-                                                  detail: { tab: 'copilot' },
-                                                })
-                                              )
-                                            }}
-                                            className='w-full rounded-sm px-2 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-muted/50'
-                                          >
-                                            More Models...
-                                          </button>
-                                        </div>
-                                      )}
+                                      {/* More Models Button */}
+                                      <div className='mt-1 border-t pt-1'>
+                                        <button
+                                          type='button'
+                                          onClick={() => {
+                                            // Dispatch event to open settings modal on copilot tab
+                                            window.dispatchEvent(
+                                              new CustomEvent('open-settings', {
+                                                detail: { tab: 'copilot' },
+                                              })
+                                            )
+                                          }}
+                                          className='w-full rounded-sm px-2 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-muted/50'
+                                        >
+                                          More Models...
+                                        </button>
+                                      </div>
                                     </>
                                   )
                                 })()}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 13d7ffc3477..c6cd227d58b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -23,6 +23,20 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const logger = createLogger('Copilot')
 
+// Default enabled/disabled state for all models (must match API)
+const DEFAULT_ENABLED_MODELS: Record<string, boolean> = {
+  'gpt-4o': false,
+  'gpt-4.1': false,
+  'gpt-5-fast': false,
+  'gpt-5': true,
+  'gpt-5-medium': true,
+  'gpt-5-high': false,
+  o3: true,
+  'claude-4-sonnet': true,
+  'claude-4.5-sonnet': true,
+  'claude-4.1-opus': true,
+}
+
 interface CopilotProps {
   panelWidth: number
 }
@@ -40,6 +54,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
   const [todosCollapsed, setTodosCollapsed] = useState(false)
   const lastWorkflowIdRef = useRef<string | null>(null)
   const hasMountedRef = useRef(false)
+  const hasLoadedModelsRef = useRef(false)
 
   // Scroll state
   const [isNearBottom, setIsNearBottom] = useState(true)
@@ -71,8 +86,79 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
     chatsLoadedForWorkflow,
     setWorkflowId: setCopilotWorkflowId,
     loadChats,
+    enabledModels,
+    setEnabledModels,
+    selectedModel,
+    setSelectedModel,
   } = useCopilotStore()
 
+  // Load user's enabled models on mount
+  useEffect(() => {
+    const loadEnabledModels = async () => {
+      if (hasLoadedModelsRef.current) return
+      hasLoadedModelsRef.current = true
+
+      try {
+        const res = await fetch('/api/copilot/user-models')
+        if (!res.ok) {
+          logger.warn('Failed to fetch user models, using defaults')
+          // Use defaults if fetch fails
+          const enabledArray = Object.keys(DEFAULT_ENABLED_MODELS).filter(
+            (key) => DEFAULT_ENABLED_MODELS[key]
+          )
+          setEnabledModels(enabledArray)
+          return
+        }
+
+        const data = await res.json()
+        const modelsMap = data.enabledModels || DEFAULT_ENABLED_MODELS
+
+        // Convert map to array of enabled model IDs
+        const enabledArray = Object.entries(modelsMap)
+          .filter(([_, enabled]) => enabled)
+          .map(([modelId]) => modelId)
+
+        setEnabledModels(enabledArray)
+        logger.info('Loaded user enabled models', { count: enabledArray.length })
+      } catch (error) {
+        logger.error('Failed to load enabled models', { error })
+        // Use defaults on error
+        const enabledArray = Object.keys(DEFAULT_ENABLED_MODELS).filter(
+          (key) => DEFAULT_ENABLED_MODELS[key]
+        )
+        setEnabledModels(enabledArray)
+      }
+    }
+
+    loadEnabledModels()
+  }, [setEnabledModels])
+
+  // Ensure selected model is in the enabled models list
+  useEffect(() => {
+    if (!enabledModels || enabledModels.length === 0) return
+
+    // Check if current selected model is in the enabled list
+    if (selectedModel && !enabledModels.includes(selectedModel)) {
+      // Switch to the first enabled model (prefer claude-4.5-sonnet if available)
+      const preferredModel = 'claude-4.5-sonnet'
+      const fallbackModel = enabledModels[0] as typeof selectedModel
+
+      if (enabledModels.includes(preferredModel)) {
+        setSelectedModel(preferredModel)
+        logger.info('Selected model not enabled, switching to preferred model', {
+          from: selectedModel,
+          to: preferredModel,
+        })
+      } else if (fallbackModel) {
+        setSelectedModel(fallbackModel)
+        logger.info('Selected model not enabled, switching to first available', {
+          from: selectedModel,
+          to: fallbackModel,
+        })
+      }
+    }
+  }, [enabledModels, selectedModel, setSelectedModel])
+
   // Force fresh initialization on mount (handles hot reload)
   useEffect(() => {
     if (activeWorkflowId && !hasMountedRef.current) {

From 25b28ddd2b8a3d0bc98c60c8058d0c16a3839db5 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 15:44:43 -0700
Subject: [PATCH 05/28] Add haiku 4.5 to copilot

---
 apps/sim/app/api/copilot/chat/route.ts               |  1 +
 apps/sim/app/api/copilot/user-models/route.ts        |  5 +++--
 .../copilot/components/user-input/user-input.tsx     |  2 ++
 .../components/panel/components/copilot/copilot.tsx  |  5 +++--
 .../settings-modal/components/copilot/copilot.tsx    |  5 ++++-
 apps/sim/lib/copilot/api.ts                          |  1 +
 apps/sim/providers/models.ts                         | 12 ++++++++++++
 apps/sim/stores/copilot/types.ts                     |  1 +
 8 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/api/copilot/chat/route.ts b/apps/sim/app/api/copilot/chat/route.ts
index 558f61a94cb..cfa9025f2bc 100644
--- a/apps/sim/app/api/copilot/chat/route.ts
+++ b/apps/sim/app/api/copilot/chat/route.ts
@@ -48,6 +48,7 @@ const ChatMessageSchema = z.object({
       'gpt-4.1',
       'o3',
       'claude-4-sonnet',
+      'claude-4.5-haiku',
       'claude-4.5-sonnet',
       'claude-4.1-opus',
     ])
diff --git a/apps/sim/app/api/copilot/user-models/route.ts b/apps/sim/app/api/copilot/user-models/route.ts
index 88aba636c11..0b96115aa74 100644
--- a/apps/sim/app/api/copilot/user-models/route.ts
+++ b/apps/sim/app/api/copilot/user-models/route.ts
@@ -14,8 +14,9 @@ const DEFAULT_ENABLED_MODELS: Record<string, boolean> = {
   'gpt-5': true,
   'gpt-5-medium': true,
   'gpt-5-high': false,
-  o3: true,
-  'claude-4-sonnet': true,
+  'o3': true,
+  'claude-4-sonnet': false,
+  'claude-4.5-haiku': true,
   'claude-4.5-sonnet': true,
   'claude-4.1-opus': true,
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index ad25d087148..d78f9b552b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -1742,6 +1742,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       { value: 'gpt-4.1', label: 'gpt-4.1' },
       { value: 'o3', label: 'o3' },
       { value: 'claude-4-sonnet', label: 'claude-4-sonnet' },
+      { value: 'claude-4.5-haiku', label: 'claude-4.5-haiku' },
       { value: 'claude-4.5-sonnet', label: 'claude-4.5-sonnet' },
       { value: 'claude-4.1-opus', label: 'claude-4.1-opus' },
     ] as const
@@ -3436,6 +3437,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                                             .filter((option) =>
                                               [
                                                 'claude-4-sonnet',
+                                                'claude-4.5-haiku',
                                                 'claude-4.5-sonnet',
                                                 'claude-4.1-opus',
                                               ].includes(option.value)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index c6cd227d58b..cba3517e812 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -31,8 +31,9 @@ const DEFAULT_ENABLED_MODELS: Record<string, boolean> = {
   'gpt-5': true,
   'gpt-5-medium': true,
   'gpt-5-high': false,
-  o3: true,
-  'claude-4-sonnet': true,
+  'o3': true,
+  'claude-4-sonnet': false,
+  'claude-4.5-haiku': true,
   'claude-4.5-sonnet': true,
   'claude-4.1-opus': true,
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
index 7def67e0f9c..8dbac0365c2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
@@ -44,6 +44,8 @@ const OPENAI_MODELS: ModelOption[] = [
 ]
 
 const ANTHROPIC_MODELS: ModelOption[] = [
+  // Zap models
+  { value: 'claude-4.5-haiku', label: 'claude-4.5-haiku', icon: 'zap' },
   // Brain models
   { value: 'claude-4-sonnet', label: 'claude-4-sonnet', icon: 'brain' },
   { value: 'claude-4.5-sonnet', label: 'claude-4.5-sonnet', icon: 'brain' },
@@ -62,7 +64,8 @@ const DEFAULT_ENABLED_MODELS: Record<string, boolean> = {
   'gpt-5-medium': true,
   'gpt-5-high': false,
   o3: true,
-  'claude-4-sonnet': true,
+  'claude-4-sonnet': false,
+  'claude-4.5-haiku': true,
   'claude-4.5-sonnet': true,
   'claude-4.1-opus': true,
 }
diff --git a/apps/sim/lib/copilot/api.ts b/apps/sim/lib/copilot/api.ts
index ea3225a73de..0de6e62864d 100644
--- a/apps/sim/lib/copilot/api.ts
+++ b/apps/sim/lib/copilot/api.ts
@@ -66,6 +66,7 @@ export interface SendMessageRequest {
     | 'gpt-4.1'
     | 'o3'
     | 'claude-4-sonnet'
+    | 'claude-4.5-haiku'
     | 'claude-4.5-sonnet'
     | 'claude-4.1-opus'
   prefetch?: boolean
diff --git a/apps/sim/providers/models.ts b/apps/sim/providers/models.ts
index b25457f1954..b31d321fe99 100644
--- a/apps/sim/providers/models.ts
+++ b/apps/sim/providers/models.ts
@@ -367,6 +367,18 @@ export const PROVIDER_DEFINITIONS: Record<string, ProviderDefinition> = {
       toolUsageControl: true,
     },
     models: [
+      {
+        id: 'claude-haiku-4-5',
+        pricing: {
+          input: 1.0,
+          cachedInput: 0.5,
+          output: 5.0,
+          updatedAt: '2025-10-11',
+        },
+        capabilities: {
+          temperature: { min: 0, max: 1 },
+        },
+      },
       {
         id: 'claude-sonnet-4-5',
         pricing: {
diff --git a/apps/sim/stores/copilot/types.ts b/apps/sim/stores/copilot/types.ts
index cb875a756a4..b7b27f5625c 100644
--- a/apps/sim/stores/copilot/types.ts
+++ b/apps/sim/stores/copilot/types.ts
@@ -77,6 +77,7 @@ export interface CopilotState {
     | 'gpt-4.1'
     | 'o3'
     | 'claude-4-sonnet'
+    | 'claude-4.5-haiku'
     | 'claude-4.5-sonnet'
     | 'claude-4.1-opus'
   agentPrefetch: boolean

From b90c239cfb301ef05c835dc3adf8c1dc61b1fbdf Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 15:55:02 -0700
Subject: [PATCH 06/28] Model ui for haiku

---
 .../copilot-message/copilot-message.tsx       | 12 ++---
 .../components/user-input/user-input.tsx      | 44 ++++++++++---------
 .../panel/components/copilot/copilot.tsx      |  1 +
 .../components/copilot/copilot.tsx            | 14 +++---
 4 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index e797d69c65d..4a4cb251b40 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -8,7 +8,6 @@ import {
   Box,
   Check,
   Clipboard,
-  Edit,
   Info,
   LibraryBig,
   Loader2,
@@ -40,10 +39,11 @@ const logger = createLogger('CopilotMessage')
 interface CopilotMessageProps {
   message: CopilotMessageType
   isStreaming?: boolean
+  panelWidth?: number
 }
 
 const CopilotMessage: FC<CopilotMessageProps> = memo(
-  ({ message, isStreaming }) => {
+  ({ message, isStreaming, panelWidth = 308 }) => {
     const isUser = message.role === 'user'
     const isAssistant = message.role === 'assistant'
     const [showCopySuccess, setShowCopySuccess] = useState(false)
@@ -543,6 +543,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 placeholder='Edit your message...'
                 mode={mode}
                 onModeChange={setMode}
+                panelWidth={panelWidth}
                 hideContextUsage={true}
               />
             </div>
@@ -707,13 +708,6 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                     </button>
                   </div>
                 )}
-
-                {/* Edit indicator on hover (only when not generating) */}
-                {!isSendingMessage && (
-                  <div className='pointer-events-none absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100'>
-                    <Edit className='h-3.5 w-3.5 text-muted-foreground' />
-                  </div>
-                )}
               </div>
             </div>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index d78f9b552b5..97f2efb0ddf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -1759,7 +1759,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     }
 
     const getModelIcon = () => {
-      // Only Brain and BrainCircuit models show purple when agentPrefetch is false
+      // Brain and BrainCircuit models show purple when agentPrefetch is false
       const isBrainModel = [
         'gpt-5',
         'gpt-5-medium',
@@ -1767,8 +1767,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         'claude-4.5-sonnet',
       ].includes(selectedModel)
       const isBrainCircuitModel = ['gpt-5-high', 'o3', 'claude-4.1-opus'].includes(selectedModel)
+      const isHaikuModel = selectedModel === 'claude-4.5-haiku'
+      
+      // Haiku shows purple when selected, other zap models don't
       const colorClass =
-        (isBrainModel || isBrainCircuitModel) && !agentPrefetch
+        (isBrainModel || isBrainCircuitModel || isHaikuModel) && !agentPrefetch
           ? 'text-[var(--brand-primary-hover-hex)]'
           : 'text-muted-foreground'
 
@@ -1779,7 +1782,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       if (isBrainModel) {
         return <Brain className={`h-3 w-3 ${colorClass}`} />
       }
-      if (['gpt-4o', 'gpt-4.1', 'gpt-5-fast'].includes(selectedModel)) {
+      if (['gpt-4o', 'gpt-4.1', 'gpt-5-fast', 'claude-4.5-haiku'].includes(selectedModel)) {
         return <Zap className={`h-3 w-3 ${colorClass}`} />
       }
       return <InfinityIcon className={`h-3 w-3 ${colorClass}`} />
@@ -3309,7 +3312,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                 const isBrainCircuitModel = ['gpt-5-high', 'o3', 'claude-4.1-opus'].includes(
                   selectedModel
                 )
-                const showPurple = (isBrainModel || isBrainCircuitModel) && !agentPrefetch
+                const isHaikuModel = selectedModel === 'claude-4.5-haiku'
+                const showPurple = (isBrainModel || isBrainCircuitModel || isHaikuModel) && !agentPrefetch
 
                 return (
                   <DropdownMenu
@@ -3370,7 +3374,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                                     ) {
                                       return <Brain className='h-3 w-3 text-muted-foreground' />
                                     }
-                                    if (['gpt-4o', 'gpt-4.1', 'gpt-5-fast'].includes(modelValue)) {
+                                    if (['gpt-4o', 'gpt-4.1', 'gpt-5-fast', 'claude-4.5-haiku'].includes(modelValue)) {
                                       return <Zap className='h-3 w-3 text-muted-foreground' />
                                     }
                                     return <div className='h-3 w-3' />
@@ -3405,41 +3409,41 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
                                   return (
                                     <>
-                                      {/* OpenAI Models */}
+                                      {/* Anthropic Models */}
                                       <div>
                                         <div className='px-2 py-1 font-medium text-[10px] text-muted-foreground uppercase'>
-                                          OpenAI
+                                          Anthropic
                                         </div>
                                         <div className='space-y-0.5'>
                                           {modelOptions
                                             .filter((option) =>
                                               [
-                                                'gpt-5-fast',
-                                                'gpt-5',
-                                                'gpt-5-medium',
-                                                'gpt-5-high',
-                                                'gpt-4o',
-                                                'gpt-4.1',
-                                                'o3',
+                                                'claude-4-sonnet',
+                                                'claude-4.5-haiku',
+                                                'claude-4.5-sonnet',
+                                                'claude-4.1-opus',
                                               ].includes(option.value)
                                             )
                                             .map(renderModelOption)}
                                         </div>
                                       </div>
 
-                                      {/* Anthropic Models */}
+                                      {/* OpenAI Models */}
                                       <div>
                                         <div className='px-2 py-1 font-medium text-[10px] text-muted-foreground uppercase'>
-                                          Anthropic
+                                          OpenAI
                                         </div>
                                         <div className='space-y-0.5'>
                                           {modelOptions
                                             .filter((option) =>
                                               [
-                                                'claude-4-sonnet',
-                                                'claude-4.5-haiku',
-                                                'claude-4.5-sonnet',
-                                                'claude-4.1-opus',
+                                                'gpt-5-fast',
+                                                'gpt-5',
+                                                'gpt-5-medium',
+                                                'gpt-5-high',
+                                                'gpt-4o',
+                                                'gpt-4.1',
+                                                'o3',
                                               ].includes(option.value)
                                             )
                                             .map(renderModelOption)}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index cba3517e812..a075aeff965 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -479,6 +479,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                           isStreaming={
                             isSendingMessage && message.id === messages[messages.length - 1]?.id
                           }
+                          panelWidth={panelWidth}
                         />
                       ))
                     )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
index 8dbac0365c2..f4c403e0e87 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
@@ -44,7 +44,7 @@ const OPENAI_MODELS: ModelOption[] = [
 ]
 
 const ANTHROPIC_MODELS: ModelOption[] = [
-  // Zap models
+  // Zap model (Haiku)
   { value: 'claude-4.5-haiku', label: 'claude-4.5-haiku', icon: 'zap' },
   // Brain models
   { value: 'claude-4-sonnet', label: 'claude-4-sonnet', icon: 'brain' },
@@ -331,13 +331,13 @@ export function Copilot() {
             </div>
           ) : (
             <div className='space-y-4'>
-              {/* OpenAI Models */}
+              {/* Anthropic Models */}
               <div>
                 <div className='mb-2 px-2 font-medium text-[10px] text-muted-foreground uppercase'>
-                  OpenAI
+                  Anthropic
                 </div>
                 <div className='space-y-1'>
-                  {OPENAI_MODELS.map((model) => {
+                  {ANTHROPIC_MODELS.map((model) => {
                     const isEnabled = enabledModelsMap[model.value] ?? false
                     return (
                       <div
@@ -359,13 +359,13 @@ export function Copilot() {
                 </div>
               </div>
 
-              {/* Anthropic Models */}
+              {/* OpenAI Models */}
               <div>
                 <div className='mb-2 px-2 font-medium text-[10px] text-muted-foreground uppercase'>
-                  Anthropic
+                  OpenAI
                 </div>
                 <div className='space-y-1'>
-                  {ANTHROPIC_MODELS.map((model) => {
+                  {OPENAI_MODELS.map((model) => {
                     const isEnabled = enabledModelsMap[model.value] ?? false
                     return (
                       <div

From d4fd0076dcda83ab13008213af970d3b0739b298 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 16:21:23 -0700
Subject: [PATCH 07/28] Fix lint

---
 apps/sim/app/api/copilot/user-models/route.ts |    2 +-
 .../components/markdown-renderer.tsx          |    7 +-
 .../components/thinking-block.tsx             |    4 +-
 .../copilot-message/copilot-message.tsx       |   55 +-
 .../components/user-input/user-input.tsx      | 1587 +++++++++--------
 .../panel/components/copilot/copilot.tsx      |    2 +-
 .../tools/server/other/search-online.ts       |    2 +-
 7 files changed, 839 insertions(+), 820 deletions(-)

diff --git a/apps/sim/app/api/copilot/user-models/route.ts b/apps/sim/app/api/copilot/user-models/route.ts
index 0b96115aa74..a0e8c65e118 100644
--- a/apps/sim/app/api/copilot/user-models/route.ts
+++ b/apps/sim/app/api/copilot/user-models/route.ts
@@ -14,7 +14,7 @@ const DEFAULT_ENABLED_MODELS: Record<string, boolean> = {
   'gpt-5': true,
   'gpt-5-medium': true,
   'gpt-5-high': false,
-  'o3': true,
+  o3: true,
   'claude-4-sonnet': false,
   'claude-4.5-haiku': true,
   'claude-4.5-sonnet': true,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
index 038b4315a6b..1852e71e25e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
@@ -141,7 +141,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
     () => ({
       // Paragraph
       p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
-        <p className='mb-1 font-sans text-sm text-gray-800 leading-[1.25rem] last:mb-0 dark:text-gray-200'>
+        <p className='mb-1 font-sans text-gray-800 text-sm leading-[1.25rem] last:mb-0 dark:text-gray-200'>
           {children}
         </p>
       ),
@@ -189,10 +189,7 @@ 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-sans text-gray-800 dark:text-gray-200' style={{ display: 'list-item' }}>
           {children}
         </li>
       ),
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
index bb6d6e8cda3..afde595f89f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
@@ -79,7 +79,7 @@ export function ThinkingBlock({
           })
         }}
         className={cn(
-          'mb-1 inline-flex items-center gap-1 text-gray-400 text-[11px] transition-colors hover:text-gray-500',
+          'mb-1 inline-flex items-center gap-1 text-[11px] text-gray-400 transition-colors hover:text-gray-500',
           'font-normal italic'
         )}
         type='button'
@@ -96,7 +96,7 @@ export function ThinkingBlock({
 
       {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-gray-400 text-[11px] dark:text-gray-500'>
+          <pre className='whitespace-pre-wrap font-mono text-[11px] text-gray-400 dark:text-gray-500'>
             {content}
             {isStreaming && (
               <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-gray-400' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 4a4cb251b40..8970d642120 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -10,8 +10,6 @@ import {
   Clipboard,
   Info,
   LibraryBig,
-  Loader2,
-  RotateCcw,
   Shapes,
   SquareChevronRight,
   ThumbsDown,
@@ -26,13 +24,12 @@ import {
   SmoothStreamingText,
   StreamingIndicator,
   ThinkingBlock,
-  WordWrap,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components'
 import CopilotMarkdownRenderer from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer'
+import { UserInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
 import { usePreviewStore } from '@/stores/copilot/preview-store'
 import { useCopilotStore } from '@/stores/copilot/store'
 import type { CopilotMessage as CopilotMessageType } from '@/stores/copilot/types'
-import { UserInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
 
 const logger = createLogger('CopilotMessage')
 
@@ -292,12 +289,12 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     const handleMessageClick = () => {
       if (isSendingMessage) return
-      
+
       // If message needs expansion and is not expanded, expand it
       if (needsExpansion && !isExpanded) {
         setIsExpanded(true)
       }
-      
+
       // Always enter edit mode on click
       handleEditMessage()
     }
@@ -308,30 +305,30 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       contexts?: any[]
     ) => {
       if (!editedMessage.trim() || isSendingMessage) return
-      
+
       // Find the index of this message and truncate conversation
       const currentMessages = messages
       const editIndex = currentMessages.findIndex((m) => m.id === message.id)
-      
+
       if (editIndex !== -1) {
         // Exit edit mode immediately
         setIsEditMode(false)
-        
+
         // Truncate messages after the edited message (remove it and everything after)
         const truncatedMessages = currentMessages.slice(0, editIndex)
-        
+
         // Update store to show only messages before the edit point
         useCopilotStore.setState({ messages: truncatedMessages })
-        
+
         // If we have a current chat, update the DB to remove messages after this point
         if (currentChat?.id) {
           try {
             await fetch('/api/copilot/chat/update-messages', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ 
-                chatId: currentChat.id, 
-                messages: truncatedMessages.map(m => ({
+              body: JSON.stringify({
+                chatId: currentChat.id,
+                messages: truncatedMessages.map((m) => ({
                   id: m.id,
                   role: m.role,
                   content: m.content,
@@ -339,19 +336,19 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                   ...(m.contentBlocks && { contentBlocks: m.contentBlocks }),
                   ...(m.fileAttachments && { fileAttachments: m.fileAttachments }),
                   ...((m as any).contexts && { contexts: (m as any).contexts }),
-                }))
+                })),
               }),
             })
           } catch (error) {
             logger.error('Failed to update messages in DB after edit:', error)
           }
         }
-        
+
         // Send the edited message with the SAME message ID
-        await sendMessage(editedMessage, { 
+        await sendMessage(editedMessage, {
           fileAttachments: fileAttachments || message.fileAttachments,
           contexts: contexts || (message as any).contexts,
-          messageId: message.id  // Reuse the original message ID
+          messageId: message.id, // Reuse the original message ID
         })
       }
     }
@@ -389,12 +386,12 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
       const handleClickOutside = (event: MouseEvent) => {
         const target = event.target as HTMLElement
-        
+
         // Don't close if clicking inside the edit container
-        if (editContainerRef.current && editContainerRef.current.contains(target)) {
+        if (editContainerRef.current?.contains(target)) {
           return
         }
-        
+
         // Check if clicking on another user message box
         const clickedMessageBox = target.closest('[data-message-box]') as HTMLElement
         if (clickedMessageBox) {
@@ -405,19 +402,19 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           }
           return
         }
-        
+
         // Check if clicking on the main user input at the bottom
         if (target.closest('textarea') || target.closest('input[type="text"]')) {
           handleCancelEdit()
           return
         }
-        
+
         // Only close if NOT clicking on any component (i.e., clicking directly on panel background)
         // If the target has children or is a component, don't close
         if (target.children.length > 0 || target.tagName !== 'DIV') {
           return
         }
-        
+
         handleCancelEdit()
       }
 
@@ -641,13 +638,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 onMouseLeave={() => setIsHoveringMessage(false)}
                 className='group relative cursor-text rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] px-3 py-1.5 shadow-xs transition-all duration-200 hover:border-[#D0D0D0] dark:border-[#414141] dark:bg-[var(--surface-elevated)] dark:hover:border-[#525252]'
               >
-                <div 
+                <div
                   ref={messageContentRef}
-                  className='whitespace-pre-wrap break-words pl-[2px] pr-2 py-1 font-sans text-sm text-foreground leading-[1.25rem]'
+                  className='whitespace-pre-wrap break-words py-1 pr-2 pl-[2px] font-sans text-foreground text-sm leading-[1.25rem]'
                   style={{
                     maxHeight: !isExpanded && needsExpansion ? '60px' : 'none',
                     overflow: !isExpanded && needsExpansion ? 'hidden' : 'visible',
-                    position: 'relative'
+                    position: 'relative',
                   }}
                 >
                   {(() => {
@@ -686,10 +683,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                     if (tail) nodes.push(tail)
                     return nodes
                   })()}
-                  
+
                   {/* Gradient fade when truncated */}
                   {!isExpanded && needsExpansion && (
-                    <div className='absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-[#FFFFFF] to-transparent dark:from-[var(--surface-elevated)]' />
+                    <div className='absolute right-0 bottom-0 left-0 h-8 bg-gradient-to-t from-[#FFFFFF] to-transparent dark:from-[var(--surface-elevated)]' />
                   )}
                 </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 97f2efb0ddf..bd374328621 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -9,7 +9,6 @@ import {
   useRef,
   useState,
 } from 'react'
-import { createPortal } from 'react-dom'
 import {
   ArrowUp,
   AtSign,
@@ -21,7 +20,6 @@ import {
   BrainCircuit,
   Check,
   ChevronRight,
-  Edit,
   FileText,
   Image,
   Infinity as InfinityIcon,
@@ -38,6 +36,7 @@ import {
   Zap,
 } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { createPortal } from 'react-dom'
 import {
   Button,
   DropdownMenu,
@@ -51,12 +50,11 @@ import {
   TooltipTrigger,
 } from '@/components/ui'
 import { useSession } from '@/lib/auth-client'
-import { isHosted } from '@/lib/environment'
 import { createLogger } from '@/lib/logs/console/logger'
 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 { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import { ContextUsagePill } from '../context-usage-pill/context-usage-pill'
 
 const logger = createLogger('CopilotUserInput')
@@ -309,13 +307,13 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
 
       checkPosition()
-      
+
       // Check position on scroll within the copilot panel
       const scrollContainer = containerRef.current?.closest('[data-radix-scroll-area-viewport]')
       if (scrollContainer) {
         scrollContainer.addEventListener('scroll', checkPosition, { passive: true })
       }
-      
+
       window.addEventListener('scroll', checkPosition, true)
       window.addEventListener('resize', checkPosition)
 
@@ -327,7 +325,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         window.removeEventListener('resize', checkPosition)
       }
     }, [])
-    
+
     // Also check position when mention menu opens
     useEffect(() => {
       if (showMentionMenu && containerRef.current) {
@@ -1768,7 +1766,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       ].includes(selectedModel)
       const isBrainCircuitModel = ['gpt-5-high', 'o3', 'claude-4.1-opus'].includes(selectedModel)
       const isHaikuModel = selectedModel === 'claude-4.5-haiku'
-      
+
       // Haiku shows purple when selected, other zap models don't
       const colorClass =
         (isBrainModel || isBrainCircuitModel || isHaikuModel) && !agentPrefetch
@@ -2018,9 +2016,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
       const rect = containerRef.current.getBoundingClientRect()
       const margin = 16
-      let available = isNearTop
-        ? window.innerHeight - rect.bottom - margin
-        : rect.top - margin
+      let available = isNearTop ? window.innerHeight - rect.bottom - margin : rect.top - margin
       available = Math.max(available, 120)
       setMentionMenuMaxHeight(available)
     }, [showMentionMenu, isNearTop])
@@ -2034,15 +2030,15 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         }
         const rect = containerRef.current.getBoundingClientRect()
         const margin = 8
-        
+
         // Calculate cursor position using a temporary span
         const textarea = textareaRef.current
         const caretPos = getCaretPos()
-        
+
         // Create a mirror div to calculate caret position
         const div = document.createElement('div')
         const style = window.getComputedStyle(textarea)
-        
+
         // Copy relevant styles
         div.style.position = 'absolute'
         div.style.visibility = 'hidden'
@@ -2053,49 +2049,50 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         div.style.border = style.border
         div.style.width = style.width
         div.style.lineHeight = style.lineHeight
-        
+
         // Add text up to cursor position
         const textBeforeCaret = message.substring(0, caretPos)
         div.textContent = textBeforeCaret
-        
+
         // Add a span at the end to measure position
         const span = document.createElement('span')
         span.textContent = '|'
         div.appendChild(span)
-        
+
         document.body.appendChild(div)
         const spanRect = span.getBoundingClientRect()
         const divRect = div.getBoundingClientRect()
         document.body.removeChild(div)
-        
+
         // Calculate the left offset relative to the textarea
         const caretLeftOffset = spanRect.left - divRect.left
-        
+
         // Calculate available space above and below
         const spaceAbove = rect.top - margin
         const spaceBelow = window.innerHeight - rect.bottom - margin
-        
+
         // Cap max height to show ~8-10 items before scrolling (each item ~40px)
         // This prevents the menu from extending too far in either direction
         const maxMenuHeight = 360
-        
+
         // Show below if near top OR if more space below, otherwise show above
         const showBelow = rect.top < 300 || spaceBelow > spaceAbove
-        
+
         // Calculate max height based on available space, but never exceed maxMenuHeight
         // Use the smaller of available space and our cap to ensure menu fits
         const maxHeight = Math.min(
           Math.max(showBelow ? spaceBelow : spaceAbove, 120),
           maxMenuHeight
         )
-        
+
         // Determine menu width based on submenu state
-        const menuWidth = openSubmenuFor === 'Blocks'
-          ? 320
-          : openSubmenuFor === 'Templates' || openSubmenuFor === 'Logs' || aggregatedActive
-            ? 384
-            : 224
-        
+        const menuWidth =
+          openSubmenuFor === 'Blocks'
+            ? 320
+            : openSubmenuFor === 'Templates' || openSubmenuFor === 'Logs' || aggregatedActive
+              ? 384
+              : 224
+
         // Calculate left position: use caret position but ensure menu doesn't go off-screen
         const idealLeft = rect.left + caretLeftOffset
         const maxLeft = window.innerWidth - menuWidth - margin
@@ -2108,7 +2105,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           maxHeight: maxHeight,
           showBelow,
         })
-        
+
         // Update isNearTop state for reference
         setIsNearTop(showBelow)
       }
@@ -2117,20 +2114,20 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       if (showMentionMenu) {
         updatePosition()
         window.addEventListener('resize', updatePosition)
-        
+
         // Update position on scroll
         const scrollContainer = containerRef.current?.closest('[data-radix-scroll-area-viewport]')
         if (scrollContainer) {
           scrollContainer.addEventListener('scroll', updatePosition, { passive: true })
         }
-        
+
         // Continuously update position (for smooth tracking)
         const loop = () => {
           updatePosition()
           rafId = requestAnimationFrame(loop)
         }
         rafId = requestAnimationFrame(loop)
-        
+
         return () => {
           window.removeEventListener('resize', updatePosition)
           if (scrollContainer) {
@@ -2280,7 +2277,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               className='pointer-events-none absolute inset-0 z-[1] max-h-[120px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words [&::-webkit-scrollbar]:hidden'
               style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
             >
-              <pre className='m-0 whitespace-pre-wrap break-words font-sans text-sm text-foreground leading-[1.25rem]'>
+              <pre className='m-0 whitespace-pre-wrap break-words font-sans text-foreground text-sm leading-[1.25rem]'>
                 {(() => {
                   const elements: React.ReactNode[] = []
                   const remaining = message
@@ -2335,769 +2332,487 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               placeholder={isDragging ? 'Drop files here...' : effectivePlaceholder}
               disabled={disabled}
               rows={1}
-              className='relative z-[2] mb-2 min-h-[32px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent pl-[2px] pr-14 py-1 font-sans text-sm text-transparent leading-[1.25rem] caret-foreground focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
-              style={{ height: 'auto', wordBreak: 'break-word', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+              className='relative z-[2] mb-2 min-h-[32px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent py-1 pr-14 pl-[2px] font-sans text-sm text-transparent leading-[1.25rem] caret-foreground focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
+              style={{
+                height: 'auto',
+                wordBreak: 'break-word',
+                scrollbarWidth: 'none',
+                msOverflowStyle: 'none',
+              }}
             />
 
-            {showMentionMenu && mentionPortalStyle && createPortal(
-              <div
-                ref={mentionPortalRef}
-                style={{
-                  position: 'fixed',
-                  top: mentionPortalStyle.top,
-                  left: mentionPortalStyle.left,
-                  width: mentionPortalStyle.width,
-                  maxHeight: mentionPortalStyle.maxHeight,
-                  zIndex: 9999999,
-                  pointerEvents: 'auto',
-                  isolation: 'isolate',
-                  transform: mentionPortalStyle.showBelow ? 'none' : 'translateY(-100%)',
-                  display: 'flex',
-                  flexDirection: 'column',
-                }}
-              >
+            {showMentionMenu &&
+              mentionPortalStyle &&
+              createPortal(
                 <div
-                  ref={mentionMenuRef}
-                  className='flex flex-col overflow-hidden rounded-[8px] border bg-popover p-1 text-foreground shadow-md'
+                  ref={mentionPortalRef}
                   style={{
+                    position: 'fixed',
+                    top: mentionPortalStyle.top,
+                    left: mentionPortalStyle.left,
+                    width: mentionPortalStyle.width,
                     maxHeight: mentionPortalStyle.maxHeight,
-                    height: '100%',
-                    position: 'relative',
                     zIndex: 9999999,
+                    pointerEvents: 'auto',
+                    isolation: 'isolate',
+                    transform: mentionPortalStyle.showBelow ? 'none' : 'translateY(-100%)',
+                    display: 'flex',
+                    flexDirection: 'column',
                   }}
                 >
-                  {openSubmenuFor ? (
-                    <>
-                      <div className='px-2 py-1.5 text-muted-foreground text-xs'>
-                        {openSubmenuFor === 'Chats'
-                          ? 'Chats'
-                          : openSubmenuFor === 'Workflows'
-                            ? 'All workflows'
-                            : openSubmenuFor === 'Knowledge'
-                              ? 'Knowledge Bases'
-                              : openSubmenuFor === 'Blocks'
-                                ? 'Blocks'
-                                : openSubmenuFor === 'Workflow Blocks'
-                                  ? 'Workflow Blocks'
-                                  : openSubmenuFor === 'Templates'
-                                    ? 'Templates'
-                                    : 'Logs'}
-                      </div>
-                      <div ref={menuListRef} className='flex-1 overflow-auto overscroll-contain'>
-                        {isSubmenu('Chats') && (
-                          <>
-                            {isLoadingPastChats ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                Loading...
-                              </div>
-                            ) : pastChats.length === 0 ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                No past chats
-                              </div>
-                            ) : (
-                              pastChats
-                                .filter((c) =>
-                                  (c.title || 'Untitled Chat')
-                                    .toLowerCase()
-                                    .includes(getSubmenuQuery().toLowerCase())
-                                )
-                                .map((chat, idx) => (
-                                  <div
-                                    key={chat.id}
-                                    data-idx={idx}
-                                    className={cn(
-                                      'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                      submenuActiveIndex === idx && 'bg-muted'
-                                    )}
-                                    role='menuitem'
-                                    aria-selected={submenuActiveIndex === idx}
-                                    onMouseEnter={() => setSubmenuActiveIndex(idx)}
-                                    onClick={() => {
-                                      insertPastChatMention(chat)
-                                      setSubmenuQueryStart(null)
-                                    }}
-                                  >
-                                    <div className='flex h-4 w-4 flex-shrink-0 items-center justify-center'>
-                                      <Bot
-                                        className='h-3.5 w-3.5 text-muted-foreground'
-                                        strokeWidth={1.5}
-                                      />
-                                    </div>
-                                    <span className='truncate'>
-                                      {chat.title || 'Untitled Chat'}
-                                    </span>
-                                  </div>
-                                ))
-                            )}
-                          </>
-                        )}
-                        {isSubmenu('Workflows') && (
-                          <>
-                            {isLoadingWorkflows ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                Loading...
-                              </div>
-                            ) : workflows.length === 0 ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                No workflows
-                              </div>
-                            ) : (
-                              workflows
-                                .filter((w) =>
-                                  (w.name || 'Untitled Workflow')
-                                    .toLowerCase()
-                                    .includes(getSubmenuQuery().toLowerCase())
-                                )
-                                .map((wf, idx) => (
-                                  <div
-                                    key={wf.id}
-                                    data-idx={idx}
-                                    className={cn(
-                                      'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                      submenuActiveIndex === idx && 'bg-muted'
-                                    )}
-                                    role='menuitem'
-                                    aria-selected={submenuActiveIndex === idx}
-                                    onMouseEnter={() => setSubmenuActiveIndex(idx)}
-                                    onClick={() => {
-                                      insertWorkflowMention(wf)
-                                      setSubmenuQueryStart(null)
-                                    }}
-                                  >
-                                    <div
-                                      className='h-3.5 w-3.5 flex-shrink-0 rounded'
-                                      style={{ backgroundColor: wf.color || '#3972F6' }}
-                                    />
-                                    <span className='truncate'>
-                                      {wf.name || 'Untitled Workflow'}
-                                    </span>
-                                  </div>
-                                ))
-                            )}
-                          </>
-                        )}
-                        {isSubmenu('Knowledge') && (
-                          <>
-                            {isLoadingKnowledge ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                Loading...
-                              </div>
-                            ) : knowledgeBases.length === 0 ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                No knowledge bases
-                              </div>
-                            ) : (
-                              knowledgeBases
-                                .filter((k) =>
-                                  (k.name || 'Untitled')
-                                    .toLowerCase()
-                                    .includes(getSubmenuQuery().toLowerCase())
-                                )
-                                .map((kb, idx) => (
-                                  <div
-                                    key={kb.id}
-                                    data-idx={idx}
-                                    className={cn(
-                                      'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                      submenuActiveIndex === idx && 'bg-muted'
-                                    )}
-                                    role='menuitem'
-                                    aria-selected={submenuActiveIndex === idx}
-                                    onMouseEnter={() => setSubmenuActiveIndex(idx)}
-                                    onClick={() => {
-                                      insertKnowledgeMention(kb)
-                                      setSubmenuQueryStart(null)
-                                    }}
-                                  >
-                                    <LibraryBig className='h-3.5 w-3.5 text-muted-foreground' />
-                                    <span className='truncate'>{kb.name || 'Untitled'}</span>
-                                  </div>
-                                ))
-                            )}
-                          </>
-                        )}
-                        {isSubmenu('Blocks') && (
-                          <>
-                            {isLoadingBlocks ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                Loading...
-                              </div>
-                            ) : blocksList.length === 0 ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                No blocks found
-                              </div>
-                            ) : (
-                              blocksList
-                                .filter((b) =>
-                                  (b.name || b.id)
-                                    .toLowerCase()
-                                    .includes(getSubmenuQuery().toLowerCase())
-                                )
-                                .map((blk, idx) => (
-                                  <div
-                                    key={blk.id}
-                                    data-idx={idx}
-                                    className={cn(
-                                      'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                      submenuActiveIndex === idx && 'bg-muted'
-                                    )}
-                                    role='menuitem'
-                                    aria-selected={submenuActiveIndex === idx}
-                                    onMouseEnter={() => setSubmenuActiveIndex(idx)}
-                                    onClick={() => {
-                                      insertBlockMention(blk)
-                                      setSubmenuQueryStart(null)
-                                    }}
-                                  >
+                  <div
+                    ref={mentionMenuRef}
+                    className='flex flex-col overflow-hidden rounded-[8px] border bg-popover p-1 text-foreground shadow-md'
+                    style={{
+                      maxHeight: mentionPortalStyle.maxHeight,
+                      height: '100%',
+                      position: 'relative',
+                      zIndex: 9999999,
+                    }}
+                  >
+                    {openSubmenuFor ? (
+                      <>
+                        <div className='px-2 py-1.5 text-muted-foreground text-xs'>
+                          {openSubmenuFor === 'Chats'
+                            ? 'Chats'
+                            : openSubmenuFor === 'Workflows'
+                              ? 'All workflows'
+                              : openSubmenuFor === 'Knowledge'
+                                ? 'Knowledge Bases'
+                                : openSubmenuFor === 'Blocks'
+                                  ? 'Blocks'
+                                  : openSubmenuFor === 'Workflow Blocks'
+                                    ? 'Workflow Blocks'
+                                    : openSubmenuFor === 'Templates'
+                                      ? 'Templates'
+                                      : 'Logs'}
+                        </div>
+                        <div ref={menuListRef} className='flex-1 overflow-auto overscroll-contain'>
+                          {isSubmenu('Chats') && (
+                            <>
+                              {isLoadingPastChats ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  Loading...
+                                </div>
+                              ) : pastChats.length === 0 ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  No past chats
+                                </div>
+                              ) : (
+                                pastChats
+                                  .filter((c) =>
+                                    (c.title || 'Untitled Chat')
+                                      .toLowerCase()
+                                      .includes(getSubmenuQuery().toLowerCase())
+                                  )
+                                  .map((chat, idx) => (
                                     <div
-                                      className='relative flex h-4 w-4 items-center justify-center rounded-[3px]'
-                                      style={{ backgroundColor: blk.bgColor || '#6B7280' }}
-                                    >
-                                      {blk.iconComponent && (
-                                        <blk.iconComponent className='!h-3 !w-3 text-white' />
+                                      key={chat.id}
+                                      data-idx={idx}
+                                      className={cn(
+                                        'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                        submenuActiveIndex === idx && 'bg-muted'
                                       )}
+                                      role='menuitem'
+                                      aria-selected={submenuActiveIndex === idx}
+                                      onMouseEnter={() => setSubmenuActiveIndex(idx)}
+                                      onClick={() => {
+                                        insertPastChatMention(chat)
+                                        setSubmenuQueryStart(null)
+                                      }}
+                                    >
+                                      <div className='flex h-4 w-4 flex-shrink-0 items-center justify-center'>
+                                        <Bot
+                                          className='h-3.5 w-3.5 text-muted-foreground'
+                                          strokeWidth={1.5}
+                                        />
+                                      </div>
+                                      <span className='truncate'>
+                                        {chat.title || 'Untitled Chat'}
+                                      </span>
                                     </div>
-                                    <span className='truncate'>{blk.name || blk.id}</span>
-                                  </div>
-                                ))
-                            )}
-                          </>
-                        )}
-                        {isSubmenu('Workflow Blocks') && (
-                          <>
-                            {isLoadingWorkflowBlocks ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                Loading...
-                              </div>
-                            ) : workflowBlocks.length === 0 ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                No blocks in this workflow
-                              </div>
-                            ) : (
-                              workflowBlocks
-                                .filter((b) =>
-                                  (b.name || b.id)
-                                    .toLowerCase()
-                                    .includes(getSubmenuQuery().toLowerCase())
-                                )
-                                .map((blk, idx) => (
-                                  <div
-                                    key={blk.id}
-                                    data-idx={idx}
-                                    className={cn(
-                                      'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                      submenuActiveIndex === idx && 'bg-muted'
-                                    )}
-                                    role='menuitem'
-                                    aria-selected={submenuActiveIndex === idx}
-                                    onMouseEnter={() => setSubmenuActiveIndex(idx)}
-                                    onClick={() => {
-                                      insertWorkflowBlockMention(blk)
-                                      setSubmenuQueryStart(null)
-                                    }}
-                                  >
+                                  ))
+                              )}
+                            </>
+                          )}
+                          {isSubmenu('Workflows') && (
+                            <>
+                              {isLoadingWorkflows ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  Loading...
+                                </div>
+                              ) : workflows.length === 0 ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  No workflows
+                                </div>
+                              ) : (
+                                workflows
+                                  .filter((w) =>
+                                    (w.name || 'Untitled Workflow')
+                                      .toLowerCase()
+                                      .includes(getSubmenuQuery().toLowerCase())
+                                  )
+                                  .map((wf, idx) => (
                                     <div
-                                      className='relative flex h-4 w-4 items-center justify-center rounded-[3px]'
-                                      style={{ backgroundColor: blk.bgColor || '#6B7280' }}
-                                    >
-                                      {blk.iconComponent && (
-                                        <blk.iconComponent className='!h-3 !w-3 text-white' />
+                                      key={wf.id}
+                                      data-idx={idx}
+                                      className={cn(
+                                        'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                        submenuActiveIndex === idx && 'bg-muted'
                                       )}
+                                      role='menuitem'
+                                      aria-selected={submenuActiveIndex === idx}
+                                      onMouseEnter={() => setSubmenuActiveIndex(idx)}
+                                      onClick={() => {
+                                        insertWorkflowMention(wf)
+                                        setSubmenuQueryStart(null)
+                                      }}
+                                    >
+                                      <div
+                                        className='h-3.5 w-3.5 flex-shrink-0 rounded'
+                                        style={{ backgroundColor: wf.color || '#3972F6' }}
+                                      />
+                                      <span className='truncate'>
+                                        {wf.name || 'Untitled Workflow'}
+                                      </span>
                                     </div>
-                                    <span className='truncate'>{blk.name || blk.id}</span>
-                                  </div>
-                                ))
-                            )}
-                          </>
-                        )}
-                        {isSubmenu('Templates') && (
-                          <>
-                            {isLoadingTemplates ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                Loading...
-                              </div>
-                            ) : templatesList.length === 0 ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                No templates found
-                              </div>
-                            ) : (
-                              templatesList
-                                .filter((t) =>
-                                  (t.name || 'Untitled Template')
-                                    .toLowerCase()
-                                    .includes(getSubmenuQuery().toLowerCase())
-                                )
-                                .map((tpl, idx) => (
-                                  <div
-                                    key={tpl.id}
-                                    data-idx={idx}
-                                    className={cn(
-                                      'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                      submenuActiveIndex === idx && 'bg-muted'
-                                    )}
-                                    role='menuitem'
-                                    aria-selected={submenuActiveIndex === idx}
-                                    onMouseEnter={() => setSubmenuActiveIndex(idx)}
-                                    onClick={() => {
-                                      insertTemplateMention(tpl)
-                                      setSubmenuQueryStart(null)
-                                    }}
-                                  >
-                                    <div className='flex h-4 w-4 items-center justify-center'>
-                                      ★
+                                  ))
+                              )}
+                            </>
+                          )}
+                          {isSubmenu('Knowledge') && (
+                            <>
+                              {isLoadingKnowledge ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  Loading...
+                                </div>
+                              ) : knowledgeBases.length === 0 ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  No knowledge bases
+                                </div>
+                              ) : (
+                                knowledgeBases
+                                  .filter((k) =>
+                                    (k.name || 'Untitled')
+                                      .toLowerCase()
+                                      .includes(getSubmenuQuery().toLowerCase())
+                                  )
+                                  .map((kb, idx) => (
+                                    <div
+                                      key={kb.id}
+                                      data-idx={idx}
+                                      className={cn(
+                                        'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                        submenuActiveIndex === idx && 'bg-muted'
+                                      )}
+                                      role='menuitem'
+                                      aria-selected={submenuActiveIndex === idx}
+                                      onMouseEnter={() => setSubmenuActiveIndex(idx)}
+                                      onClick={() => {
+                                        insertKnowledgeMention(kb)
+                                        setSubmenuQueryStart(null)
+                                      }}
+                                    >
+                                      <LibraryBig className='h-3.5 w-3.5 text-muted-foreground' />
+                                      <span className='truncate'>{kb.name || 'Untitled'}</span>
                                     </div>
-                                    <span className='truncate'>{tpl.name}</span>
-                                    <span className='ml-auto text-muted-foreground text-xs'>
-                                      {tpl.stars}
-                                    </span>
-                                  </div>
-                                ))
-                            )}
-                          </>
-                        )}
-                        {isSubmenu('Logs') && (
-                          <>
-                            {isLoadingLogs ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                Loading...
-                              </div>
-                            ) : logsList.length === 0 ? (
-                              <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                No executions found
-                              </div>
-                            ) : (
-                              logsList
-                                .filter((l) =>
-                                  [l.workflowName, l.trigger || '']
-                                    .join(' ')
-                                    .toLowerCase()
-                                    .includes(getSubmenuQuery().toLowerCase())
-                                )
-                                .map((log, idx) => (
-                                  <div
-                                    key={log.id}
-                                    data-idx={idx}
-                                    className={cn(
-                                      'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                      submenuActiveIndex === idx && 'bg-muted'
-                                    )}
-                                    role='menuitem'
-                                    aria-selected={submenuActiveIndex === idx}
-                                    onMouseEnter={() => setSubmenuActiveIndex(idx)}
-                                    onClick={() => {
-                                      insertLogMention(log)
-                                      setSubmenuQueryStart(null)
-                                    }}
-                                  >
-                                    {log.level === 'error' ? (
-                                      <X className='h-4 w-4 text-red-500' />
-                                    ) : (
-                                      <Check className='h-4 w-4 text-green-500' />
-                                    )}
-                                    <span className='min-w-0 truncate'>{log.workflowName}</span>
-                                    <span className='text-muted-foreground'>·</span>
-                                    <span className='whitespace-nowrap'>
-                                      {formatTimestamp(log.createdAt)}
-                                    </span>
-                                    <span className='text-muted-foreground'>·</span>
-                                    <span className='capitalize'>
-                                      {(log.trigger || 'manual').toLowerCase()}
-                                    </span>
-                                  </div>
-                                ))
-                            )}
-                          </>
-                        )}
-                      </div>
-                    </>
-                  ) : (
-                    <>
-                      {(() => {
-                        const q = (
-                          getActiveMentionQueryAtPosition(getCaretPos())?.query || ''
-                        ).toLowerCase()
-                        const filtered = mentionOptions.filter((label) =>
-                          label.toLowerCase().includes(q)
-                        )
-                        if (q.length > 0 && filtered.length === 0) {
-                          // Aggregated search view
-                          const aggregated = [
-                            ...workflowBlocks
-                              .filter((b) => (b.name || b.id).toLowerCase().includes(q))
-                              .map((b) => ({
-                                type: 'Workflow Blocks' as const,
-                                id: b.id,
-                                value: b,
-                                onClick: () => insertWorkflowBlockMention(b),
-                              })),
-                            ...workflows
-                              .filter((w) =>
-                                (w.name || 'Untitled Workflow').toLowerCase().includes(q)
-                              )
-                              .map((w) => ({
-                                type: 'Workflows' as const,
-                                id: w.id,
-                                value: w,
-                                onClick: () => insertWorkflowMention(w),
-                              })),
-                            ...blocksList
-                              .filter((b) => (b.name || b.id).toLowerCase().includes(q))
-                              .map((b) => ({
-                                type: 'Blocks' as const,
-                                id: b.id,
-                                value: b,
-                                onClick: () => insertBlockMention(b),
-                              })),
-                            ...knowledgeBases
-                              .filter((k) => (k.name || 'Untitled').toLowerCase().includes(q))
-                              .map((k) => ({
-                                type: 'Knowledge' as const,
-                                id: k.id,
-                                value: k,
-                                onClick: () => insertKnowledgeMention(k),
-                              })),
-                            ...templatesList
-                              .filter((t) =>
-                                (t.name || 'Untitled Template').toLowerCase().includes(q)
-                              )
-                              .map((t) => ({
-                                type: 'Templates' as const,
-                                id: t.id,
-                                value: t,
-                                onClick: () => insertTemplateMention(t),
-                              })),
-                            ...pastChats
-                              .filter((c) => (c.title || 'Untitled Chat').toLowerCase().includes(q))
-                              .map((c) => ({
-                                type: 'Chats' as const,
-                                id: c.id,
-                                value: c,
-                                onClick: () => insertPastChatMention(c),
-                              })),
-                            ...logsList
-                              .filter((l) =>
-                                (l.workflowName || 'Untitled Workflow').toLowerCase().includes(q)
-                              )
-                              .map((l) => ({
-                                type: 'Logs' as const,
-                                id: l.id,
-                                value: l,
-                                onClick: () => insertLogMention(l),
-                              })),
-                          ]
-                          return (
-                            <div
-                              ref={menuListRef}
-                              className='flex-1 overflow-auto overscroll-contain'
-                            >
-                              {aggregated.length === 0 ? (
+                                  ))
+                              )}
+                            </>
+                          )}
+                          {isSubmenu('Blocks') && (
+                            <>
+                              {isLoadingBlocks ? (
                                 <div className='px-2 py-2 text-muted-foreground text-sm'>
-                                  No matches
+                                  Loading...
+                                </div>
+                              ) : blocksList.length === 0 ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  No blocks found
                                 </div>
                               ) : (
-                                aggregated.map((item, idx) => (
-                                  <div
-                                    key={`${item.type}-${item.id}`}
-                                    data-idx={idx}
-                                    className={cn(
-                                      'flex cursor-default items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                      submenuActiveIndex === idx && 'bg-muted'
-                                    )}
-                                    role='menuitem'
-                                    aria-selected={submenuActiveIndex === idx}
-                                    onMouseEnter={() => setSubmenuActiveIndex(idx)}
-                                    onClick={() => item.onClick()}
-                                  >
-                                    {item.type === 'Chats' ? (
-                                      <>
-                                        <div className='flex h-4 w-4 flex-shrink-0 items-center justify-center'>
-                                          <Bot
-                                            className='h-3.5 w-3.5 text-muted-foreground'
-                                            strokeWidth={1.5}
-                                          />
-                                        </div>
-                                        <span className='truncate'>
-                                          {(item.value as any).title || 'Untitled Chat'}
-                                        </span>
-                                      </>
-                                    ) : item.type === 'Workflows' ? (
-                                      <>
-                                        <div
-                                          className='h-3.5 w-3.5 flex-shrink-0 rounded'
-                                          style={{
-                                            backgroundColor: (item.value as any).color || '#3972F6',
-                                          }}
-                                        />
-                                        <span className='truncate'>
-                                          {(item.value as any).name || 'Untitled Workflow'}
-                                        </span>
-                                      </>
-                                    ) : item.type === 'Knowledge' ? (
-                                      <>
-                                        <LibraryBig className='h-3.5 w-3.5 text-muted-foreground' />
-                                        <span className='truncate'>
-                                          {(item.value as any).name || 'Untitled'}
-                                        </span>
-                                      </>
-                                    ) : item.type === 'Blocks' ? (
-                                      <>
-                                        <div
-                                          className='relative flex h-4 w-4 items-center justify-center rounded-[3px]'
-                                          style={{
-                                            backgroundColor:
-                                              (item.value as any).bgColor || '#6B7280',
-                                          }}
-                                        >
-                                          {(() => {
-                                            const Icon = (item.value as any).iconComponent
-                                            return Icon ? (
-                                              <Icon className='!h-3 !w-3 text-white' />
-                                            ) : null
-                                          })()}
-                                        </div>
-                                        <span className='truncate'>
-                                          {(item.value as any).name || (item.value as any).id}
-                                        </span>
-                                      </>
-                                    ) : item.type === 'Workflow Blocks' ? (
-                                      <>
-                                        <div
-                                          className='relative flex h-4 w-4 items-center justify-center rounded-[3px]'
-                                          style={{
-                                            backgroundColor:
-                                              (item.value as any).bgColor || '#6B7280',
-                                          }}
-                                        >
-                                          {(() => {
-                                            const Icon = (item.value as any).iconComponent
-                                            return Icon ? (
-                                              <Icon className='!h-3 !w-3 text-white' />
-                                            ) : null
-                                          })()}
-                                        </div>
-                                        <span className='truncate'>
-                                          {(item.value as any).name || (item.value as any).id}
-                                        </span>
-                                      </>
-                                    ) : item.type === 'Logs' ? (
-                                      <>
-                                        {(() => {
-                                          const v = item.value as any
-                                          return v.level === 'error' ? (
-                                            <X className='h-3.5 w-3.5 text-red-500' />
-                                          ) : (
-                                            <Check className='h-3.5 w-3.5 text-green-500' />
-                                          )
-                                        })()}
-                                        <span className='min-w-0 truncate'>
-                                          {(item.value as any).workflowName}
-                                        </span>
-                                        <span className='text-muted-foreground'>·</span>
-                                        <span className='whitespace-nowrap'>
-                                          {formatTimestamp((item.value as any).createdAt)}
-                                        </span>
-                                        <span className='text-muted-foreground'>·</span>
-                                        <span className='capitalize'>
-                                          {(
-                                            ((item.value as any).trigger as string) || 'manual'
-                                          ).toLowerCase()}
-                                        </span>
-                                      </>
-                                    ) : (
-                                      <>
-                                        <div className='flex h-4 w-4 items-center justify-center'>
-                                          ★
-                                        </div>
-                                        <span className='truncate'>
-                                          {(item.value as any).name || 'Untitled Template'}
-                                        </span>
-                                        {typeof (item.value as any).stars === 'number' && (
-                                          <span className='ml-auto text-muted-foreground text-xs'>
-                                            {(item.value as any).stars}
-                                          </span>
+                                blocksList
+                                  .filter((b) =>
+                                    (b.name || b.id)
+                                      .toLowerCase()
+                                      .includes(getSubmenuQuery().toLowerCase())
+                                  )
+                                  .map((blk, idx) => (
+                                    <div
+                                      key={blk.id}
+                                      data-idx={idx}
+                                      className={cn(
+                                        'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                        submenuActiveIndex === idx && 'bg-muted'
+                                      )}
+                                      role='menuitem'
+                                      aria-selected={submenuActiveIndex === idx}
+                                      onMouseEnter={() => setSubmenuActiveIndex(idx)}
+                                      onClick={() => {
+                                        insertBlockMention(blk)
+                                        setSubmenuQueryStart(null)
+                                      }}
+                                    >
+                                      <div
+                                        className='relative flex h-4 w-4 items-center justify-center rounded-[3px]'
+                                        style={{ backgroundColor: blk.bgColor || '#6B7280' }}
+                                      >
+                                        {blk.iconComponent && (
+                                          <blk.iconComponent className='!h-3 !w-3 text-white' />
                                         )}
-                                      </>
-                                    )}
-                                  </div>
-                                ))
+                                      </div>
+                                      <span className='truncate'>{blk.name || blk.id}</span>
+                                    </div>
+                                  ))
                               )}
-                            </div>
-                          )
-                        }
-                        // Filtered top-level options view
-                        return (
-                          <div
-                            ref={menuListRef}
-                            className='flex-1 overflow-auto overscroll-contain'
-                          >
-                            {filtered.map((label, idx) => (
-                              <div
-                                key={label}
-                                data-idx={idx}
-                                className={cn(
-                                  'flex cursor-default items-center justify-between gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                  !inAggregated && mentionActiveIndex === idx && 'bg-muted'
-                                )}
-                                role='menuitem'
-                                aria-selected={!inAggregated && mentionActiveIndex === idx}
-                                onMouseEnter={() => {
-                                  setInAggregated(false)
-                                  setMentionActiveIndex(idx)
-                                }}
-                                onClick={() => {
-                                  if (label === 'Chats') {
-                                    resetActiveMentionQuery()
-                                    setOpenSubmenuFor('Chats')
-                                    setSubmenuActiveIndex(0)
-                                    setSubmenuQueryStart(getCaretPos())
-                                    void ensurePastChatsLoaded()
-                                  } else if (label === 'Workflows') {
-                                    resetActiveMentionQuery()
-                                    setOpenSubmenuFor('Workflows')
-                                    setSubmenuActiveIndex(0)
-                                    setSubmenuQueryStart(getCaretPos())
-                                    void ensureWorkflowsLoaded()
-                                  } else if (label === 'Knowledge') {
-                                    resetActiveMentionQuery()
-                                    setOpenSubmenuFor('Knowledge')
-                                    setSubmenuActiveIndex(0)
-                                    setSubmenuQueryStart(getCaretPos())
-                                    void ensureKnowledgeLoaded()
-                                  } else if (label === 'Blocks') {
-                                    resetActiveMentionQuery()
-                                    setOpenSubmenuFor('Blocks')
-                                    setSubmenuActiveIndex(0)
-                                    setSubmenuQueryStart(getCaretPos())
-                                    void ensureBlocksLoaded()
-                                  } else if (label === 'Workflow Blocks') {
-                                    resetActiveMentionQuery()
-                                    setOpenSubmenuFor('Workflow Blocks')
-                                    setSubmenuActiveIndex(0)
-                                    setSubmenuQueryStart(getCaretPos())
-                                    void ensureWorkflowBlocksLoaded()
-                                  } else if (label === 'Docs') {
-                                    // No submenu; insert immediately
-                                    insertDocsMention()
-                                  } else if (label === 'Templates') {
-                                    resetActiveMentionQuery()
-                                    setOpenSubmenuFor('Templates')
-                                    setSubmenuActiveIndex(0)
-                                    setSubmenuQueryStart(getCaretPos())
-                                    void ensureTemplatesLoaded()
-                                  } else if (label === 'Logs') {
-                                    resetActiveMentionQuery()
-                                    setOpenSubmenuFor('Logs')
-                                    setSubmenuActiveIndex(0)
-                                    setSubmenuQueryStart(getCaretPos())
-                                    void ensureLogsLoaded()
-                                  }
-                                }}
-                              >
-                                <div className='flex items-center gap-2'>
-                                  {label === 'Chats' ? (
-                                    <Bot className='h-3.5 w-3.5 text-muted-foreground' />
-                                  ) : label === 'Workflows' ? (
-                                    <Workflow className='h-3.5 w-3.5 text-muted-foreground' />
-                                  ) : label === 'Blocks' ? (
-                                    <Blocks className='h-3.5 w-3.5 text-muted-foreground' />
-                                  ) : label === 'Workflow Blocks' ? (
-                                    <Box className='h-3.5 w-3.5 text-muted-foreground' />
-                                  ) : label === 'Knowledge' ? (
-                                    <LibraryBig className='h-3.5 w-3.5 text-muted-foreground' />
-                                  ) : label === 'Docs' ? (
-                                    <BookOpen className='h-3.5 w-3.5 text-muted-foreground' />
-                                  ) : label === 'Templates' ? (
-                                    <Shapes className='h-3.5 w-3.5 text-muted-foreground' />
-                                  ) : label === 'Logs' ? (
-                                    <SquareChevronRight className='h-3.5 w-3.5 text-muted-foreground' />
-                                  ) : (
-                                    <div className='h-3.5 w-3.5' />
-                                  )}
-                                  <span>{label === 'Workflows' ? 'All workflows' : label}</span>
+                            </>
+                          )}
+                          {isSubmenu('Workflow Blocks') && (
+                            <>
+                              {isLoadingWorkflowBlocks ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  Loading...
                                 </div>
-                                {label !== 'Docs' && (
-                                  <ChevronRight className='h-3.5 w-3.5 text-muted-foreground' />
-                                )}
-                              </div>
-                            ))}
-
-                            {(() => {
-                              const aq = (
-                                getActiveMentionQueryAtPosition(getCaretPos())?.query || ''
-                              ).toLowerCase()
-                              const filteredLen = mentionOptions.filter((label) =>
-                                label.toLowerCase().includes(aq)
-                              ).length
-                              const aggregated = [
-                                ...workflowBlocks
-                                  .filter((b) => (b.name || b.id).toLowerCase().includes(aq))
-                                  .map((b) => ({ type: 'Workflow Blocks' as const, value: b })),
-                                ...workflows
-                                  .filter((w) =>
-                                    (w.name || 'Untitled Workflow').toLowerCase().includes(aq)
+                              ) : workflowBlocks.length === 0 ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  No blocks in this workflow
+                                </div>
+                              ) : (
+                                workflowBlocks
+                                  .filter((b) =>
+                                    (b.name || b.id)
+                                      .toLowerCase()
+                                      .includes(getSubmenuQuery().toLowerCase())
                                   )
-                                  .map((w) => ({ type: 'Workflows' as const, value: w })),
-                                ...blocksList
-                                  .filter((b) => (b.name || b.id).toLowerCase().includes(aq))
-                                  .map((b) => ({ type: 'Blocks' as const, value: b })),
-                                ...knowledgeBases
-                                  .filter((k) => (k.name || 'Untitled').toLowerCase().includes(aq))
-                                  .map((k) => ({ type: 'Knowledge' as const, value: k })),
-                                ...templatesList
+                                  .map((blk, idx) => (
+                                    <div
+                                      key={blk.id}
+                                      data-idx={idx}
+                                      className={cn(
+                                        'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                        submenuActiveIndex === idx && 'bg-muted'
+                                      )}
+                                      role='menuitem'
+                                      aria-selected={submenuActiveIndex === idx}
+                                      onMouseEnter={() => setSubmenuActiveIndex(idx)}
+                                      onClick={() => {
+                                        insertWorkflowBlockMention(blk)
+                                        setSubmenuQueryStart(null)
+                                      }}
+                                    >
+                                      <div
+                                        className='relative flex h-4 w-4 items-center justify-center rounded-[3px]'
+                                        style={{ backgroundColor: blk.bgColor || '#6B7280' }}
+                                      >
+                                        {blk.iconComponent && (
+                                          <blk.iconComponent className='!h-3 !w-3 text-white' />
+                                        )}
+                                      </div>
+                                      <span className='truncate'>{blk.name || blk.id}</span>
+                                    </div>
+                                  ))
+                              )}
+                            </>
+                          )}
+                          {isSubmenu('Templates') && (
+                            <>
+                              {isLoadingTemplates ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  Loading...
+                                </div>
+                              ) : templatesList.length === 0 ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  No templates found
+                                </div>
+                              ) : (
+                                templatesList
                                   .filter((t) =>
-                                    (t.name || 'Untitled Template').toLowerCase().includes(aq)
-                                  )
-                                  .map((t) => ({ type: 'Templates' as const, value: t })),
-                                ...pastChats
-                                  .filter((c) =>
-                                    (c.title || 'Untitled Chat').toLowerCase().includes(aq)
+                                    (t.name || 'Untitled Template')
+                                      .toLowerCase()
+                                      .includes(getSubmenuQuery().toLowerCase())
                                   )
-                                  .map((c) => ({ type: 'Chats' as const, value: c })),
-                                ...logsList
+                                  .map((tpl, idx) => (
+                                    <div
+                                      key={tpl.id}
+                                      data-idx={idx}
+                                      className={cn(
+                                        'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                        submenuActiveIndex === idx && 'bg-muted'
+                                      )}
+                                      role='menuitem'
+                                      aria-selected={submenuActiveIndex === idx}
+                                      onMouseEnter={() => setSubmenuActiveIndex(idx)}
+                                      onClick={() => {
+                                        insertTemplateMention(tpl)
+                                        setSubmenuQueryStart(null)
+                                      }}
+                                    >
+                                      <div className='flex h-4 w-4 items-center justify-center'>
+                                        ★
+                                      </div>
+                                      <span className='truncate'>{tpl.name}</span>
+                                      <span className='ml-auto text-muted-foreground text-xs'>
+                                        {tpl.stars}
+                                      </span>
+                                    </div>
+                                  ))
+                              )}
+                            </>
+                          )}
+                          {isSubmenu('Logs') && (
+                            <>
+                              {isLoadingLogs ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  Loading...
+                                </div>
+                              ) : logsList.length === 0 ? (
+                                <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                  No executions found
+                                </div>
+                              ) : (
+                                logsList
                                   .filter((l) =>
-                                    (l.workflowName || 'Untitled Workflow')
+                                    [l.workflowName, l.trigger || '']
+                                      .join(' ')
                                       .toLowerCase()
-                                      .includes(aq)
+                                      .includes(getSubmenuQuery().toLowerCase())
                                   )
-                                  .map((l) => ({ type: 'Logs' as const, value: l })),
-                              ]
-                              if (!aq || aq.length === 0 || aggregated.length === 0) return null
-                              return (
-                                <>
-                                  <div className='my-1 h-px bg-border/70' />
-                                  <div className='px-2 py-1 text-[11px] text-muted-foreground'>
-                                    Matches
-                                  </div>
-                                  {aggregated.map((item, idx) => (
+                                  .map((log, idx) => (
                                     <div
-                                      key={`${item.type}-${(item.value as any).id}`}
-                                      data-idx={filteredLen + idx}
+                                      key={log.id}
+                                      data-idx={idx}
                                       className={cn(
-                                        'flex cursor-default items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
-                                        inAggregated && submenuActiveIndex === idx && 'bg-muted'
+                                        'flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                        submenuActiveIndex === idx && 'bg-muted'
                                       )}
                                       role='menuitem'
-                                      aria-selected={inAggregated && submenuActiveIndex === idx}
-                                      onMouseEnter={() => {
-                                        setInAggregated(true)
-                                        setSubmenuActiveIndex(idx)
-                                      }}
+                                      aria-selected={submenuActiveIndex === idx}
+                                      onMouseEnter={() => setSubmenuActiveIndex(idx)}
                                       onClick={() => {
-                                        if (item.type === 'Chats')
-                                          insertPastChatMention(item.value as any)
-                                        else if (item.type === 'Workflows')
-                                          insertWorkflowMention(item.value as any)
-                                        else if (item.type === 'Knowledge')
-                                          insertKnowledgeMention(item.value as any)
-                                        else if (item.type === 'Blocks')
-                                          insertBlockMention(item.value as any)
-                                        else if ((item as any).type === 'Workflow Blocks')
-                                          insertWorkflowBlockMention(item.value as any)
-                                        else if (item.type === 'Templates')
-                                          insertTemplateMention(item.value as any)
-                                        else if (item.type === 'Logs')
-                                          insertLogMention(item.value as any)
+                                        insertLogMention(log)
+                                        setSubmenuQueryStart(null)
                                       }}
+                                    >
+                                      {log.level === 'error' ? (
+                                        <X className='h-4 w-4 text-red-500' />
+                                      ) : (
+                                        <Check className='h-4 w-4 text-green-500' />
+                                      )}
+                                      <span className='min-w-0 truncate'>{log.workflowName}</span>
+                                      <span className='text-muted-foreground'>·</span>
+                                      <span className='whitespace-nowrap'>
+                                        {formatTimestamp(log.createdAt)}
+                                      </span>
+                                      <span className='text-muted-foreground'>·</span>
+                                      <span className='capitalize'>
+                                        {(log.trigger || 'manual').toLowerCase()}
+                                      </span>
+                                    </div>
+                                  ))
+                              )}
+                            </>
+                          )}
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        {(() => {
+                          const q = (
+                            getActiveMentionQueryAtPosition(getCaretPos())?.query || ''
+                          ).toLowerCase()
+                          const filtered = mentionOptions.filter((label) =>
+                            label.toLowerCase().includes(q)
+                          )
+                          if (q.length > 0 && filtered.length === 0) {
+                            // Aggregated search view
+                            const aggregated = [
+                              ...workflowBlocks
+                                .filter((b) => (b.name || b.id).toLowerCase().includes(q))
+                                .map((b) => ({
+                                  type: 'Workflow Blocks' as const,
+                                  id: b.id,
+                                  value: b,
+                                  onClick: () => insertWorkflowBlockMention(b),
+                                })),
+                              ...workflows
+                                .filter((w) =>
+                                  (w.name || 'Untitled Workflow').toLowerCase().includes(q)
+                                )
+                                .map((w) => ({
+                                  type: 'Workflows' as const,
+                                  id: w.id,
+                                  value: w,
+                                  onClick: () => insertWorkflowMention(w),
+                                })),
+                              ...blocksList
+                                .filter((b) => (b.name || b.id).toLowerCase().includes(q))
+                                .map((b) => ({
+                                  type: 'Blocks' as const,
+                                  id: b.id,
+                                  value: b,
+                                  onClick: () => insertBlockMention(b),
+                                })),
+                              ...knowledgeBases
+                                .filter((k) => (k.name || 'Untitled').toLowerCase().includes(q))
+                                .map((k) => ({
+                                  type: 'Knowledge' as const,
+                                  id: k.id,
+                                  value: k,
+                                  onClick: () => insertKnowledgeMention(k),
+                                })),
+                              ...templatesList
+                                .filter((t) =>
+                                  (t.name || 'Untitled Template').toLowerCase().includes(q)
+                                )
+                                .map((t) => ({
+                                  type: 'Templates' as const,
+                                  id: t.id,
+                                  value: t,
+                                  onClick: () => insertTemplateMention(t),
+                                })),
+                              ...pastChats
+                                .filter((c) =>
+                                  (c.title || 'Untitled Chat').toLowerCase().includes(q)
+                                )
+                                .map((c) => ({
+                                  type: 'Chats' as const,
+                                  id: c.id,
+                                  value: c,
+                                  onClick: () => insertPastChatMention(c),
+                                })),
+                              ...logsList
+                                .filter((l) =>
+                                  (l.workflowName || 'Untitled Workflow').toLowerCase().includes(q)
+                                )
+                                .map((l) => ({
+                                  type: 'Logs' as const,
+                                  id: l.id,
+                                  value: l,
+                                  onClick: () => insertLogMention(l),
+                                })),
+                            ]
+                            return (
+                              <div
+                                ref={menuListRef}
+                                className='flex-1 overflow-auto overscroll-contain'
+                              >
+                                {aggregated.length === 0 ? (
+                                  <div className='px-2 py-2 text-muted-foreground text-sm'>
+                                    No matches
+                                  </div>
+                                ) : (
+                                  aggregated.map((item, idx) => (
+                                    <div
+                                      key={`${item.type}-${item.id}`}
+                                      data-idx={idx}
+                                      className={cn(
+                                        'flex cursor-default items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                        submenuActiveIndex === idx && 'bg-muted'
+                                      )}
+                                      role='menuitem'
+                                      aria-selected={submenuActiveIndex === idx}
+                                      onMouseEnter={() => setSubmenuActiveIndex(idx)}
+                                      onClick={() => item.onClick()}
                                     >
                                       {item.type === 'Chats' ? (
                                         <>
@@ -3211,19 +2926,313 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                                         </>
                                       )}
                                     </div>
-                                  ))}
-                                </>
-                              )
-                            })()}
-                          </div>
-                        )
-                      })()}
-                    </>
-                  )}
-                </div>
-              </div>,
-              document.body
-            )}
+                                  ))
+                                )}
+                              </div>
+                            )
+                          }
+                          // Filtered top-level options view
+                          return (
+                            <div
+                              ref={menuListRef}
+                              className='flex-1 overflow-auto overscroll-contain'
+                            >
+                              {filtered.map((label, idx) => (
+                                <div
+                                  key={label}
+                                  data-idx={idx}
+                                  className={cn(
+                                    'flex cursor-default items-center justify-between gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                    !inAggregated && mentionActiveIndex === idx && 'bg-muted'
+                                  )}
+                                  role='menuitem'
+                                  aria-selected={!inAggregated && mentionActiveIndex === idx}
+                                  onMouseEnter={() => {
+                                    setInAggregated(false)
+                                    setMentionActiveIndex(idx)
+                                  }}
+                                  onClick={() => {
+                                    if (label === 'Chats') {
+                                      resetActiveMentionQuery()
+                                      setOpenSubmenuFor('Chats')
+                                      setSubmenuActiveIndex(0)
+                                      setSubmenuQueryStart(getCaretPos())
+                                      void ensurePastChatsLoaded()
+                                    } else if (label === 'Workflows') {
+                                      resetActiveMentionQuery()
+                                      setOpenSubmenuFor('Workflows')
+                                      setSubmenuActiveIndex(0)
+                                      setSubmenuQueryStart(getCaretPos())
+                                      void ensureWorkflowsLoaded()
+                                    } else if (label === 'Knowledge') {
+                                      resetActiveMentionQuery()
+                                      setOpenSubmenuFor('Knowledge')
+                                      setSubmenuActiveIndex(0)
+                                      setSubmenuQueryStart(getCaretPos())
+                                      void ensureKnowledgeLoaded()
+                                    } else if (label === 'Blocks') {
+                                      resetActiveMentionQuery()
+                                      setOpenSubmenuFor('Blocks')
+                                      setSubmenuActiveIndex(0)
+                                      setSubmenuQueryStart(getCaretPos())
+                                      void ensureBlocksLoaded()
+                                    } else if (label === 'Workflow Blocks') {
+                                      resetActiveMentionQuery()
+                                      setOpenSubmenuFor('Workflow Blocks')
+                                      setSubmenuActiveIndex(0)
+                                      setSubmenuQueryStart(getCaretPos())
+                                      void ensureWorkflowBlocksLoaded()
+                                    } else if (label === 'Docs') {
+                                      // No submenu; insert immediately
+                                      insertDocsMention()
+                                    } else if (label === 'Templates') {
+                                      resetActiveMentionQuery()
+                                      setOpenSubmenuFor('Templates')
+                                      setSubmenuActiveIndex(0)
+                                      setSubmenuQueryStart(getCaretPos())
+                                      void ensureTemplatesLoaded()
+                                    } else if (label === 'Logs') {
+                                      resetActiveMentionQuery()
+                                      setOpenSubmenuFor('Logs')
+                                      setSubmenuActiveIndex(0)
+                                      setSubmenuQueryStart(getCaretPos())
+                                      void ensureLogsLoaded()
+                                    }
+                                  }}
+                                >
+                                  <div className='flex items-center gap-2'>
+                                    {label === 'Chats' ? (
+                                      <Bot className='h-3.5 w-3.5 text-muted-foreground' />
+                                    ) : label === 'Workflows' ? (
+                                      <Workflow className='h-3.5 w-3.5 text-muted-foreground' />
+                                    ) : label === 'Blocks' ? (
+                                      <Blocks className='h-3.5 w-3.5 text-muted-foreground' />
+                                    ) : label === 'Workflow Blocks' ? (
+                                      <Box className='h-3.5 w-3.5 text-muted-foreground' />
+                                    ) : label === 'Knowledge' ? (
+                                      <LibraryBig className='h-3.5 w-3.5 text-muted-foreground' />
+                                    ) : label === 'Docs' ? (
+                                      <BookOpen className='h-3.5 w-3.5 text-muted-foreground' />
+                                    ) : label === 'Templates' ? (
+                                      <Shapes className='h-3.5 w-3.5 text-muted-foreground' />
+                                    ) : label === 'Logs' ? (
+                                      <SquareChevronRight className='h-3.5 w-3.5 text-muted-foreground' />
+                                    ) : (
+                                      <div className='h-3.5 w-3.5' />
+                                    )}
+                                    <span>{label === 'Workflows' ? 'All workflows' : label}</span>
+                                  </div>
+                                  {label !== 'Docs' && (
+                                    <ChevronRight className='h-3.5 w-3.5 text-muted-foreground' />
+                                  )}
+                                </div>
+                              ))}
+
+                              {(() => {
+                                const aq = (
+                                  getActiveMentionQueryAtPosition(getCaretPos())?.query || ''
+                                ).toLowerCase()
+                                const filteredLen = mentionOptions.filter((label) =>
+                                  label.toLowerCase().includes(aq)
+                                ).length
+                                const aggregated = [
+                                  ...workflowBlocks
+                                    .filter((b) => (b.name || b.id).toLowerCase().includes(aq))
+                                    .map((b) => ({ type: 'Workflow Blocks' as const, value: b })),
+                                  ...workflows
+                                    .filter((w) =>
+                                      (w.name || 'Untitled Workflow').toLowerCase().includes(aq)
+                                    )
+                                    .map((w) => ({ type: 'Workflows' as const, value: w })),
+                                  ...blocksList
+                                    .filter((b) => (b.name || b.id).toLowerCase().includes(aq))
+                                    .map((b) => ({ type: 'Blocks' as const, value: b })),
+                                  ...knowledgeBases
+                                    .filter((k) =>
+                                      (k.name || 'Untitled').toLowerCase().includes(aq)
+                                    )
+                                    .map((k) => ({ type: 'Knowledge' as const, value: k })),
+                                  ...templatesList
+                                    .filter((t) =>
+                                      (t.name || 'Untitled Template').toLowerCase().includes(aq)
+                                    )
+                                    .map((t) => ({ type: 'Templates' as const, value: t })),
+                                  ...pastChats
+                                    .filter((c) =>
+                                      (c.title || 'Untitled Chat').toLowerCase().includes(aq)
+                                    )
+                                    .map((c) => ({ type: 'Chats' as const, value: c })),
+                                  ...logsList
+                                    .filter((l) =>
+                                      (l.workflowName || 'Untitled Workflow')
+                                        .toLowerCase()
+                                        .includes(aq)
+                                    )
+                                    .map((l) => ({ type: 'Logs' as const, value: l })),
+                                ]
+                                if (!aq || aq.length === 0 || aggregated.length === 0) return null
+                                return (
+                                  <>
+                                    <div className='my-1 h-px bg-border/70' />
+                                    <div className='px-2 py-1 text-[11px] text-muted-foreground'>
+                                      Matches
+                                    </div>
+                                    {aggregated.map((item, idx) => (
+                                      <div
+                                        key={`${item.type}-${(item.value as any).id}`}
+                                        data-idx={filteredLen + idx}
+                                        className={cn(
+                                          'flex cursor-default items-center gap-2 rounded-[6px] px-2 py-1.5 text-sm hover:bg-muted/60',
+                                          inAggregated && submenuActiveIndex === idx && 'bg-muted'
+                                        )}
+                                        role='menuitem'
+                                        aria-selected={inAggregated && submenuActiveIndex === idx}
+                                        onMouseEnter={() => {
+                                          setInAggregated(true)
+                                          setSubmenuActiveIndex(idx)
+                                        }}
+                                        onClick={() => {
+                                          if (item.type === 'Chats')
+                                            insertPastChatMention(item.value as any)
+                                          else if (item.type === 'Workflows')
+                                            insertWorkflowMention(item.value as any)
+                                          else if (item.type === 'Knowledge')
+                                            insertKnowledgeMention(item.value as any)
+                                          else if (item.type === 'Blocks')
+                                            insertBlockMention(item.value as any)
+                                          else if ((item as any).type === 'Workflow Blocks')
+                                            insertWorkflowBlockMention(item.value as any)
+                                          else if (item.type === 'Templates')
+                                            insertTemplateMention(item.value as any)
+                                          else if (item.type === 'Logs')
+                                            insertLogMention(item.value as any)
+                                        }}
+                                      >
+                                        {item.type === 'Chats' ? (
+                                          <>
+                                            <div className='flex h-4 w-4 flex-shrink-0 items-center justify-center'>
+                                              <Bot
+                                                className='h-3.5 w-3.5 text-muted-foreground'
+                                                strokeWidth={1.5}
+                                              />
+                                            </div>
+                                            <span className='truncate'>
+                                              {(item.value as any).title || 'Untitled Chat'}
+                                            </span>
+                                          </>
+                                        ) : item.type === 'Workflows' ? (
+                                          <>
+                                            <div
+                                              className='h-3.5 w-3.5 flex-shrink-0 rounded'
+                                              style={{
+                                                backgroundColor:
+                                                  (item.value as any).color || '#3972F6',
+                                              }}
+                                            />
+                                            <span className='truncate'>
+                                              {(item.value as any).name || 'Untitled Workflow'}
+                                            </span>
+                                          </>
+                                        ) : item.type === 'Knowledge' ? (
+                                          <>
+                                            <LibraryBig className='h-3.5 w-3.5 text-muted-foreground' />
+                                            <span className='truncate'>
+                                              {(item.value as any).name || 'Untitled'}
+                                            </span>
+                                          </>
+                                        ) : item.type === 'Blocks' ? (
+                                          <>
+                                            <div
+                                              className='relative flex h-4 w-4 items-center justify-center rounded-[3px]'
+                                              style={{
+                                                backgroundColor:
+                                                  (item.value as any).bgColor || '#6B7280',
+                                              }}
+                                            >
+                                              {(() => {
+                                                const Icon = (item.value as any).iconComponent
+                                                return Icon ? (
+                                                  <Icon className='!h-3 !w-3 text-white' />
+                                                ) : null
+                                              })()}
+                                            </div>
+                                            <span className='truncate'>
+                                              {(item.value as any).name || (item.value as any).id}
+                                            </span>
+                                          </>
+                                        ) : item.type === 'Workflow Blocks' ? (
+                                          <>
+                                            <div
+                                              className='relative flex h-4 w-4 items-center justify-center rounded-[3px]'
+                                              style={{
+                                                backgroundColor:
+                                                  (item.value as any).bgColor || '#6B7280',
+                                              }}
+                                            >
+                                              {(() => {
+                                                const Icon = (item.value as any).iconComponent
+                                                return Icon ? (
+                                                  <Icon className='!h-3 !w-3 text-white' />
+                                                ) : null
+                                              })()}
+                                            </div>
+                                            <span className='truncate'>
+                                              {(item.value as any).name || (item.value as any).id}
+                                            </span>
+                                          </>
+                                        ) : item.type === 'Logs' ? (
+                                          <>
+                                            {(() => {
+                                              const v = item.value as any
+                                              return v.level === 'error' ? (
+                                                <X className='h-3.5 w-3.5 text-red-500' />
+                                              ) : (
+                                                <Check className='h-3.5 w-3.5 text-green-500' />
+                                              )
+                                            })()}
+                                            <span className='min-w-0 truncate'>
+                                              {(item.value as any).workflowName}
+                                            </span>
+                                            <span className='text-muted-foreground'>·</span>
+                                            <span className='whitespace-nowrap'>
+                                              {formatTimestamp((item.value as any).createdAt)}
+                                            </span>
+                                            <span className='text-muted-foreground'>·</span>
+                                            <span className='capitalize'>
+                                              {(
+                                                ((item.value as any).trigger as string) || 'manual'
+                                              ).toLowerCase()}
+                                            </span>
+                                          </>
+                                        ) : (
+                                          <>
+                                            <div className='flex h-4 w-4 items-center justify-center'>
+                                              ★
+                                            </div>
+                                            <span className='truncate'>
+                                              {(item.value as any).name || 'Untitled Template'}
+                                            </span>
+                                            {typeof (item.value as any).stars === 'number' && (
+                                              <span className='ml-auto text-muted-foreground text-xs'>
+                                                {(item.value as any).stars}
+                                              </span>
+                                            )}
+                                          </>
+                                        )}
+                                      </div>
+                                    ))}
+                                  </>
+                                )
+                              })()}
+                            </div>
+                          )
+                        })()}
+                      </>
+                    )}
+                  </div>
+                </div>,
+                document.body
+              )}
           </div>
 
           {/* Bottom Row: Mode Selector + Attach Button + Send Button */}
@@ -3242,7 +3251,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                     <span>{getModeText()}</span>
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align='start' side={isNearTop ? 'bottom' : 'top'} className='p-0'>
+                <DropdownMenuContent
+                  align='start'
+                  side={isNearTop ? 'bottom' : 'top'}
+                  className='p-0'
+                >
                   <TooltipProvider>
                     <div className='w-[160px] p-1'>
                       <Tooltip>
@@ -3313,7 +3326,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                   selectedModel
                 )
                 const isHaikuModel = selectedModel === 'claude-4.5-haiku'
-                const showPurple = (isBrainModel || isBrainCircuitModel || isHaikuModel) && !agentPrefetch
+                const showPurple =
+                  (isBrainModel || isBrainCircuitModel || isHaikuModel) && !agentPrefetch
 
                 return (
                   <DropdownMenu
@@ -3345,7 +3359,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                         </span>
                       </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align='start' side={isNearTop ? 'bottom' : 'top'} className='max-h-[400px] p-0'>
+                    <DropdownMenuContent
+                      align='start'
+                      side={isNearTop ? 'bottom' : 'top'}
+                      className='max-h-[400px] p-0'
+                    >
                       <TooltipProvider delayDuration={100} skipDelayDuration={0}>
                         <div className='w-[220px]'>
                           <div className='max-h-[280px] overflow-y-auto p-2'>
@@ -3374,7 +3392,14 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                                     ) {
                                       return <Brain className='h-3 w-3 text-muted-foreground' />
                                     }
-                                    if (['gpt-4o', 'gpt-4.1', 'gpt-5-fast', 'claude-4.5-haiku'].includes(modelValue)) {
+                                    if (
+                                      [
+                                        'gpt-4o',
+                                        'gpt-4.1',
+                                        'gpt-5-fast',
+                                        'claude-4.5-haiku',
+                                      ].includes(modelValue)
+                                    ) {
                                       return <Zap className='h-3 w-3 text-muted-foreground' />
                                     }
                                     return <div className='h-3 w-3' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index a075aeff965..eb731f38ebb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -31,7 +31,7 @@ const DEFAULT_ENABLED_MODELS: Record<string, boolean> = {
   'gpt-5': true,
   'gpt-5-medium': true,
   'gpt-5-high': false,
-  'o3': true,
+  o3: true,
   'claude-4-sonnet': false,
   'claude-4.5-haiku': true,
   'claude-4.5-sonnet': true,
diff --git a/apps/sim/lib/copilot/tools/server/other/search-online.ts b/apps/sim/lib/copilot/tools/server/other/search-online.ts
index ea28794fa3d..c49b1e928fd 100644
--- a/apps/sim/lib/copilot/tools/server/other/search-online.ts
+++ b/apps/sim/lib/copilot/tools/server/other/search-online.ts
@@ -21,7 +21,7 @@ export const searchOnlineServerTool: BaseServerTool<OnlineSearchParams, any> = {
     // Check which API keys are available
     const hasExaApiKey = Boolean(env.EXA_API_KEY && String(env.EXA_API_KEY).length > 0)
     const hasSerperApiKey = Boolean(env.SERPER_API_KEY && String(env.SERPER_API_KEY).length > 0)
-    
+
     logger.info('Performing online search', {
       queryLength: query.length,
       num,

From 43d26f0db450bf365eed55ea26ee8b20b2c7b27a Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 17:20:51 -0700
Subject: [PATCH 08/28] Revert

---
 .../copilot-message/copilot-message.tsx       | 223 +++++++++++++++++-
 1 file changed, 212 insertions(+), 11 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 8970d642120..fdf501274b9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -10,6 +10,7 @@ import {
   Clipboard,
   Info,
   LibraryBig,
+  RotateCcw,
   Shapes,
   SquareChevronRight,
   ThumbsDown,
@@ -17,6 +18,17 @@ import {
   Workflow,
   X,
 } from 'lucide-react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Checkbox,
+} from '@/components/ui'
 import { InlineToolCall } from '@/lib/copilot/inline-tool-call'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -46,15 +58,22 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     const [showCopySuccess, setShowCopySuccess] = useState(false)
     const [showUpvoteSuccess, setShowUpvoteSuccess] = useState(false)
     const [showDownvoteSuccess, setShowDownvoteSuccess] = useState(false)
-    const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false)
-    const [showAllContexts, setShowAllContexts] = useState(false)
-    const [isEditMode, setIsEditMode] = useState(false)
-    const [isExpanded, setIsExpanded] = useState(false)
-    const [editedContent, setEditedContent] = useState(message.content)
-    const [isHoveringMessage, setIsHoveringMessage] = useState(false)
-    const editContainerRef = useRef<HTMLDivElement>(null)
-    const messageContentRef = useRef<HTMLDivElement>(null)
-    const [needsExpansion, setNeedsExpansion] = useState(false)
+  const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false)
+  const [showAllContexts, setShowAllContexts] = useState(false)
+  const [isEditMode, setIsEditMode] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [editedContent, setEditedContent] = useState(message.content)
+  const [isHoveringMessage, setIsHoveringMessage] = useState(false)
+  const editContainerRef = useRef<HTMLDivElement>(null)
+  const messageContentRef = useRef<HTMLDivElement>(null)
+  const [needsExpansion, setNeedsExpansion] = useState(false)
+  const [showCheckpointDiscardModal, setShowCheckpointDiscardModal] = useState(false)
+  const [dontAskAgain, setDontAskAgain] = useState(false)
+  const pendingEditRef = useRef<{
+    message: string
+    fileAttachments?: any[]
+    contexts?: any[]
+  } | null>(null)
 
     // Get checkpoint functionality from copilot store
     const {
@@ -79,7 +98,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     // Get checkpoints for this message if it's a user message
     const messageCheckpoints = isUser ? allMessageCheckpoints[message.id] || [] : []
-    const hasCheckpoints = messageCheckpoints.length > 0
+    // Only consider it as having checkpoints if there's at least one valid checkpoint with an id
+    const hasCheckpoints = messageCheckpoints.length > 0 && messageCheckpoints.some(cp => cp?.id)
 
     // Check if this is the last user message (for showing abort button)
     const isLastUserMessage = useMemo(() => {
@@ -306,6 +326,24 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     ) => {
       if (!editedMessage.trim() || isSendingMessage) return
 
+      // Check if this message has checkpoints and user hasn't opted out
+      if (hasCheckpoints && !dontAskAgain) {
+        // Store the pending edit
+        pendingEditRef.current = { message: editedMessage, fileAttachments, contexts }
+        // Show confirmation modal
+        setShowCheckpointDiscardModal(true)
+        return
+      }
+
+      // Proceed with the edit
+      await performEdit(editedMessage, fileAttachments, contexts)
+    }
+
+    const performEdit = async (
+      editedMessage: string,
+      fileAttachments?: any[],
+      contexts?: any[]
+    ) => {
       // Find the index of this message and truncate conversation
       const currentMessages = messages
       const editIndex = currentMessages.findIndex((m) => m.id === message.id)
@@ -530,7 +568,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       return (
         <div className='w-full max-w-full overflow-hidden py-0.5'>
           {isEditMode ? (
-            <div ref={editContainerRef} className='w-full'>
+            <div ref={editContainerRef} className='relative w-full'>
               <UserInput
                 onSubmit={handleSubmitEdit}
                 onAbort={handleCancelEdit}
@@ -543,6 +581,19 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 panelWidth={panelWidth}
                 hideContextUsage={true}
               />
+              {/* Revert button in edit mode (only if has checkpoints) */}
+              {hasCheckpoints && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setShowRestoreConfirmation(true)
+                  }}
+                  className='absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-muted text-muted-foreground transition-all duration-200 hover:bg-muted-foreground/20'
+                  title='Revert to checkpoint'
+                >
+                  <RotateCcw className='h-3 w-3' />
+                </button>
+              )}
             </div>
           ) : (
             <div className='w-full'>
@@ -705,9 +756,159 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                     </button>
                   </div>
                 )}
+
+                {/* Revert button on hover (only when has checkpoints and not generating) */}
+                {!isSendingMessage && hasCheckpoints && (
+                  <div className='pointer-events-auto absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100'>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        setShowRestoreConfirmation(true)
+                      }}
+                      className='flex h-6 w-6 items-center justify-center rounded-full bg-muted text-muted-foreground transition-all duration-200 hover:bg-muted-foreground/20'
+                      title='Revert to checkpoint'
+                    >
+                      <RotateCcw className='h-3 w-3' />
+                    </button>
+                  </div>
+                )}
               </div>
             </div>
           )}
+
+          {/* Restore Checkpoint Confirmation Modal */}
+          <AlertDialog open={showRestoreConfirmation} onOpenChange={setShowRestoreConfirmation}>
+            <AlertDialogContent className='rounded-[10px]'>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Revert to checkpoint?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This will revert your workflow to the state saved at this checkpoint.{' '}
+                  <span className='text-red-500 dark:text-red-500'>This action cannot be undone.</span>
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter className='flex'>
+                <AlertDialogCancel className='h-9 w-full rounded-[8px]'>
+                  Cancel
+                </AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleConfirmRevert}
+                  className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
+                >
+                  Revert
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          {/* Restore Checkpoint Confirmation Modal */}
+          <AlertDialog open={showRestoreConfirmation} onOpenChange={setShowRestoreConfirmation}>
+            <AlertDialogContent className='rounded-[10px]'>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Revert to checkpoint?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This will revert your workflow to the state saved at this checkpoint.{' '}
+                  <span className='text-red-500 dark:text-red-500'>This action cannot be undone.</span>
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter className='flex'>
+                <AlertDialogCancel className='h-9 w-full rounded-[8px]'>
+                  Cancel
+                </AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleConfirmRevert}
+                  className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
+                >
+                  Revert
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          {/* Checkpoint Discard Confirmation Modal */}
+          <AlertDialog
+            open={showCheckpointDiscardModal}
+            onOpenChange={(open) => {
+              setShowCheckpointDiscardModal(open)
+              if (!open) {
+                pendingEditRef.current = null
+              }
+            }}
+          >
+            <AlertDialogContent className='rounded-[10px]'>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Submit from a previous message?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Submitting from a previous message will revert file changes to before this message
+                  and clear the messages after this one.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+
+              <div className='flex items-center space-x-2 px-6 py-2'>
+                <Checkbox
+                  id='dont-ask-checkpoint-discard'
+                  checked={dontAskAgain}
+                  onCheckedChange={(checked) => setDontAskAgain(!!checked)}
+                />
+                <label
+                  htmlFor='dont-ask-checkpoint-discard'
+                  className='cursor-pointer text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+                >
+                  Don't ask again
+                </label>
+              </div>
+
+              <AlertDialogFooter className='flex gap-2'>
+                <AlertDialogCancel className='h-9 flex-1 rounded-[8px]'>
+                  Cancel (esc)
+                </AlertDialogCancel>
+                <button
+                  onClick={async (e) => {
+                    e.preventDefault()
+                    setShowCheckpointDiscardModal(false)
+
+                    // Proceed with edit WITHOUT reverting checkpoint
+                    if (pendingEditRef.current) {
+                      const { message, fileAttachments, contexts } = pendingEditRef.current
+                      await performEdit(message, fileAttachments, contexts)
+                      pendingEditRef.current = null
+                    }
+                  }}
+                  className='inline-flex h-9 flex-1 items-center justify-center rounded-[8px] border border-border bg-background px-4 py-2 font-medium text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                >
+                  Continue without reverting
+                </button>
+                <button
+                  onClick={async (e) => {
+                    e.preventDefault()
+
+                    // Restore the checkpoint first
+                    if (messageCheckpoints.length > 0) {
+                      const latestCheckpoint = messageCheckpoints[0]
+                      try {
+                        await revertToCheckpoint(latestCheckpoint.id)
+                        logger.info('Reverted to checkpoint before editing message')
+                      } catch (error) {
+                        logger.error('Failed to revert to checkpoint:', error)
+                      }
+                    }
+
+                    // Close the modal
+                    setShowCheckpointDiscardModal(false)
+
+                    // Then proceed with the edit
+                    if (pendingEditRef.current) {
+                      const { message, fileAttachments, contexts } = pendingEditRef.current
+                      await performEdit(message, fileAttachments, contexts)
+                      pendingEditRef.current = null
+                    }
+                  }}
+                  className='inline-flex h-9 flex-1 items-center justify-center rounded-[8px] bg-primary px-4 py-2 font-medium text-sm text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                >
+                  Continue and revert ↻
+                </button>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         </div>
       )
     }

From 8cd1949d06dab61ab03c1f87e92abcb88665e9da Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 18:16:03 -0700
Subject: [PATCH 09/28] Only allow one revert to message

---
 .../api/copilot/checkpoints/revert/route.ts   |  12 ++
 .../copilot-message/copilot-message.tsx       | 131 +++++++++++-------
 .../panel/components/copilot/copilot.tsx      |  42 ++++--
 3 files changed, 127 insertions(+), 58 deletions(-)

diff --git a/apps/sim/app/api/copilot/checkpoints/revert/route.ts b/apps/sim/app/api/copilot/checkpoints/revert/route.ts
index 16162a96a22..2778e554d0b 100644
--- a/apps/sim/app/api/copilot/checkpoints/revert/route.ts
+++ b/apps/sim/app/api/copilot/checkpoints/revert/route.ts
@@ -118,6 +118,18 @@ export async function POST(request: NextRequest) {
       `[${tracker.requestId}] Successfully reverted workflow ${checkpoint.workflowId} to checkpoint ${checkpointId}`
     )
 
+    // Delete the checkpoint after successfully reverting to it
+    try {
+      await db.delete(workflowCheckpoints).where(eq(workflowCheckpoints.id, checkpointId))
+      logger.info(`[${tracker.requestId}] Deleted checkpoint after reverting`, { checkpointId })
+    } catch (deleteError) {
+      logger.warn(`[${tracker.requestId}] Failed to delete checkpoint after revert`, {
+        checkpointId,
+        error: deleteError,
+      })
+      // Don't fail the request if deletion fails - the revert was successful
+    }
+
     return NextResponse.json({
       success: true,
       workflowId: checkpoint.workflowId,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index fdf501274b9..719f9fe27bb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -8,6 +8,7 @@ import {
   Box,
   Check,
   Clipboard,
+  CornerDownLeft,
   Info,
   LibraryBig,
   RotateCcw,
@@ -49,10 +50,13 @@ interface CopilotMessageProps {
   message: CopilotMessageType
   isStreaming?: boolean
   panelWidth?: number
+  isDimmed?: boolean
+  checkpointCount?: number
+  onEditModeChange?: (isEditing: boolean) => void
 }
 
 const CopilotMessage: FC<CopilotMessageProps> = memo(
-  ({ message, isStreaming, panelWidth = 308 }) => {
+  ({ message, isStreaming, panelWidth = 308, isDimmed = false, checkpointCount = 0, onEditModeChange }) => {
     const isUser = message.role === 'user'
     const isAssistant = message.role === 'assistant'
     const [showCopySuccess, setShowCopySuccess] = useState(false)
@@ -68,7 +72,6 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
   const messageContentRef = useRef<HTMLDivElement>(null)
   const [needsExpansion, setNeedsExpansion] = useState(false)
   const [showCheckpointDiscardModal, setShowCheckpointDiscardModal] = useState(false)
-  const [dontAskAgain, setDontAskAgain] = useState(false)
   const pendingEditRef = useRef<{
     message: string
     fileAttachments?: any[]
@@ -284,7 +287,20 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         const latestCheckpoint = messageCheckpoints[0]
         try {
           await revertToCheckpoint(latestCheckpoint.id)
+          
+          // Remove the used checkpoint from the store
+          const { messageCheckpoints: currentCheckpoints } = useCopilotStore.getState()
+          const updatedCheckpoints = {
+            ...currentCheckpoints,
+            [message.id]: messageCheckpoints.slice(1), // Remove the first (used) checkpoint
+          }
+          useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
+          
           setShowRestoreConfirmation(false)
+          logger.info('Checkpoint reverted and removed from message', { 
+            messageId: message.id, 
+            checkpointId: latestCheckpoint.id 
+          })
         } catch (error) {
           logger.error('Failed to revert to checkpoint:', error)
           setShowRestoreConfirmation(false)
@@ -300,11 +316,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       setIsEditMode(true)
       setIsExpanded(false)
       setEditedContent(message.content)
+      onEditModeChange?.(true)
     }
 
     const handleCancelEdit = () => {
       setIsEditMode(false)
       setEditedContent(message.content)
+      onEditModeChange?.(false)
     }
 
     const handleMessageClick = () => {
@@ -326,8 +344,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     ) => {
       if (!editedMessage.trim() || isSendingMessage) return
 
-      // Check if this message has checkpoints and user hasn't opted out
-      if (hasCheckpoints && !dontAskAgain) {
+      // Check if this message has checkpoints
+      if (hasCheckpoints) {
         // Store the pending edit
         pendingEditRef.current = { message: editedMessage, fileAttachments, contexts }
         // Show confirmation modal
@@ -351,6 +369,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       if (editIndex !== -1) {
         // Exit edit mode immediately
         setIsEditMode(false)
+        onEditModeChange?.(false)
 
         // Truncate messages after the edited message (remove it and everything after)
         const truncatedMessages = currentMessages.slice(0, editIndex)
@@ -566,7 +585,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     if (isUser) {
       return (
-        <div className='w-full max-w-full overflow-hidden py-0.5'>
+        <div className={`w-full max-w-full overflow-hidden py-0.5 transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}>
           {isEditMode ? (
             <div ref={editContainerRef} className='relative w-full'>
               <UserInput
@@ -581,19 +600,6 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 panelWidth={panelWidth}
                 hideContextUsage={true}
               />
-              {/* Revert button in edit mode (only if has checkpoints) */}
-              {hasCheckpoints && (
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setShowRestoreConfirmation(true)
-                  }}
-                  className='absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-muted text-muted-foreground transition-all duration-200 hover:bg-muted-foreground/20'
-                  title='Revert to checkpoint'
-                >
-                  <RotateCcw className='h-3 w-3' />
-                </button>
-              )}
             </div>
           ) : (
             <div className='w-full'>
@@ -806,8 +812,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               <AlertDialogHeader>
                 <AlertDialogTitle>Revert to checkpoint?</AlertDialogTitle>
                 <AlertDialogDescription>
-                  This will revert your workflow to the state saved at this checkpoint.{' '}
-                  <span className='text-red-500 dark:text-red-500'>This action cannot be undone.</span>
+                  This will revert your workflow to the state saved at this checkpoint.
+                  <span className='mt-2 block text-red-500 dark:text-red-500'>
+                    This action cannot be undone.
+                  </span>
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter className='flex'>
@@ -834,33 +842,31 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               }
             }}
           >
-            <AlertDialogContent className='rounded-[10px]'>
+            <AlertDialogContent 
+              className='rounded-[10px] sm:max-w-2xl'
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  // Trigger continue and revert
+                  const revertButton = e.currentTarget.querySelector('[data-action="revert"]') as HTMLButtonElement
+                  revertButton?.click()
+                }
+              }}
+            >
               <AlertDialogHeader>
-                <AlertDialogTitle>Submit from a previous message?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  Submitting from a previous message will revert file changes to before this message
-                  and clear the messages after this one.
-                </AlertDialogDescription>
+                <AlertDialogTitle>Continue from a previous message?</AlertDialogTitle>
               </AlertDialogHeader>
 
-              <div className='flex items-center space-x-2 px-6 py-2'>
-                <Checkbox
-                  id='dont-ask-checkpoint-discard'
-                  checked={dontAskAgain}
-                  onCheckedChange={(checked) => setDontAskAgain(!!checked)}
-                />
-                <label
-                  htmlFor='dont-ask-checkpoint-discard'
-                  className='cursor-pointer text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-                >
-                  Don't ask again
-                </label>
-              </div>
-
               <AlertDialogFooter className='flex gap-2'>
-                <AlertDialogCancel className='h-9 flex-1 rounded-[8px]'>
+                <button
+                  onClick={() => {
+                    setShowCheckpointDiscardModal(false)
+                    pendingEditRef.current = null
+                  }}
+                  className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] border border-border bg-transparent px-4 py-2 font-medium text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                >
                   Cancel (esc)
-                </AlertDialogCancel>
+                </button>
                 <button
                   onClick={async (e) => {
                     e.preventDefault()
@@ -873,11 +879,12 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                       pendingEditRef.current = null
                     }
                   }}
-                  className='inline-flex h-9 flex-1 items-center justify-center rounded-[8px] border border-border bg-background px-4 py-2 font-medium text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                  className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-muted px-4 py-2 font-medium text-sm text-foreground transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
                 >
-                  Continue without reverting
+                  Continue
                 </button>
                 <button
+                  data-action="revert"
                   onClick={async (e) => {
                     e.preventDefault()
 
@@ -886,7 +893,19 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                       const latestCheckpoint = messageCheckpoints[0]
                       try {
                         await revertToCheckpoint(latestCheckpoint.id)
-                        logger.info('Reverted to checkpoint before editing message')
+                        
+                        // Remove the used checkpoint from the store
+                        const { messageCheckpoints: currentCheckpoints } = useCopilotStore.getState()
+                        const updatedCheckpoints = {
+                          ...currentCheckpoints,
+                          [message.id]: messageCheckpoints.slice(1), // Remove the first (used) checkpoint
+                        }
+                        useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
+                        
+                        logger.info('Reverted to checkpoint before editing message', { 
+                          messageId: message.id, 
+                          checkpointId: latestCheckpoint.id 
+                        })
                       } catch (error) {
                         logger.error('Failed to revert to checkpoint:', error)
                       }
@@ -902,9 +921,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                       pendingEditRef.current = null
                     }
                   }}
-                  className='inline-flex h-9 flex-1 items-center justify-center rounded-[8px] bg-primary px-4 py-2 font-medium text-sm text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                  className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-[var(--brand-primary-hover-hex)] px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-[var(--brand-primary-hex)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
                 >
-                  Continue and revert ↻
+                  Continue and revert
+                  <CornerDownLeft className='h-3.5 w-3.5 flex-shrink-0' />
                 </button>
               </AlertDialogFooter>
             </AlertDialogContent>
@@ -915,7 +935,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     if (isAssistant) {
       return (
-        <div className='w-full max-w-full overflow-hidden py-0.5 pl-[2px]'>
+        <div className={`w-full max-w-full overflow-hidden py-0.5 pl-[2px] transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}>
           <div className='max-w-full space-y-1.5 transition-all duration-200 ease-in-out'>
             {/* Content blocks in chronological order */}
             {memoizedContentBlocks}
@@ -1012,6 +1032,21 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       return false
     }
 
+    // If dimmed state changed, re-render
+    if (prevProps.isDimmed !== nextProps.isDimmed) {
+      return false
+    }
+
+    // If panel width changed, re-render
+    if (prevProps.panelWidth !== nextProps.panelWidth) {
+      return false
+    }
+
+    // If checkpoint count changed, re-render
+    if (prevProps.checkpointCount !== nextProps.checkpointCount) {
+      return false
+    }
+
     // For streaming messages, check if content actually changed
     if (nextProps.isStreaming) {
       const prevBlocks = prevMessage.contentBlocks || []
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index eb731f38ebb..c8a3b28e94c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -56,6 +56,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
   const lastWorkflowIdRef = useRef<string | null>(null)
   const hasMountedRef = useRef(false)
   const hasLoadedModelsRef = useRef(false)
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null)
 
   // Scroll state
   const [isNearBottom, setIsNearBottom] = useState(true)
@@ -91,6 +92,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
     setEnabledModels,
     selectedModel,
     setSelectedModel,
+    messageCheckpoints,
   } = useCopilotStore()
 
   // Load user's enabled models on mount
@@ -444,6 +446,11 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
     [isSendingMessage, activeWorkflowId, sendMessage, showPlanTodos]
   )
 
+  const handleEditModeChange = useCallback((messageId: string, isEditing: boolean) => {
+    setEditingMessageId(isEditing ? messageId : null)
+    logger.info('Edit mode changed', { messageId, isEditing, willDimMessages: isEditing })
+  }, [])
+
   return (
     <>
       <div className='flex h-full flex-col overflow-hidden'>
@@ -472,16 +479,31 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                         />
                       </div>
                     ) : (
-                      messages.map((message) => (
-                        <CopilotMessage
-                          key={message.id}
-                          message={message}
-                          isStreaming={
-                            isSendingMessage && message.id === messages[messages.length - 1]?.id
-                          }
-                          panelWidth={panelWidth}
-                        />
-                      ))
+                      messages.map((message, index) => {
+                        // Determine if this message should be dimmed (comes after the message being edited)
+                        let isDimmed = false
+                        if (editingMessageId) {
+                          const editingIndex = messages.findIndex((m) => m.id === editingMessageId)
+                          isDimmed = editingIndex !== -1 && index > editingIndex
+                        }
+
+                        // Get checkpoint count for this message to force re-render when it changes
+                        const checkpointCount = messageCheckpoints[message.id]?.length || 0
+
+                        return (
+                          <CopilotMessage
+                            key={message.id}
+                            message={message}
+                            isStreaming={
+                              isSendingMessage && message.id === messages[messages.length - 1]?.id
+                            }
+                            panelWidth={panelWidth}
+                            isDimmed={isDimmed}
+                            checkpointCount={checkpointCount}
+                            onEditModeChange={(isEditing) => handleEditModeChange(message.id, isEditing)}
+                          />
+                        )
+                      })
                     )}
                   </div>
                 </ScrollArea>

From a7f3d87684098d7692d7722c4432fabcfa39a1e2 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 18:19:02 -0700
Subject: [PATCH 10/28] Clear diff on revert

---
 apps/sim/stores/copilot/store.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 76d1f770533..373e2e86ad8 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -1972,6 +1972,11 @@ export const useCopilotStore = create<CopilotStore>()(
         const result = await response.json()
         const reverted = result?.checkpoint?.workflowState || null
         if (reverted) {
+          // Clear any active diff preview
+          try {
+            useWorkflowDiffStore.getState().clearDiff()
+          } catch {}
+
           // Apply to main workflow store
           useWorkflowStore.setState({
             blocks: reverted.blocks || {},

From c76e1607a330f51439d55738917f500c2a44150c Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 18:33:19 -0700
Subject: [PATCH 11/28] Fix welcome screen flash

---
 .../copilot/components/copilot-message/copilot-message.tsx | 7 +++++--
 .../components/panel/components/copilot/copilot.tsx        | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 719f9fe27bb..bd532c099d8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -367,9 +367,9 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       const editIndex = currentMessages.findIndex((m) => m.id === message.id)
 
       if (editIndex !== -1) {
-        // Exit edit mode immediately
+        // Exit edit mode visually
         setIsEditMode(false)
-        onEditModeChange?.(false)
+        // Keep editing flag true to prevent welcome screen flash
 
         // Truncate messages after the edited message (remove it and everything after)
         const truncatedMessages = currentMessages.slice(0, editIndex)
@@ -407,6 +407,9 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           contexts: contexts || (message as any).contexts,
           messageId: message.id, // Reuse the original message ID
         })
+
+        // Clear editing state after message is sent
+        onEditModeChange?.(false)
       }
     }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index c8a3b28e94c..101838d6c9a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -57,6 +57,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
   const hasMountedRef = useRef(false)
   const hasLoadedModelsRef = useRef(false)
   const [editingMessageId, setEditingMessageId] = useState<string | null>(null)
+  const [isEditingMessage, setIsEditingMessage] = useState(false)
 
   // Scroll state
   const [isNearBottom, setIsNearBottom] = useState(true)
@@ -448,6 +449,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
 
   const handleEditModeChange = useCallback((messageId: string, isEditing: boolean) => {
     setEditingMessageId(isEditing ? messageId : null)
+    setIsEditingMessage(isEditing)
     logger.info('Edit mode changed', { messageId, isEditing, willDimMessages: isEditing })
   }, [])
 
@@ -471,7 +473,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
               <div className='relative flex-1 overflow-hidden'>
                 <ScrollArea ref={scrollAreaRef} className='h-full' hideScrollbar={true}>
                   <div className='w-full max-w-full space-y-2 overflow-hidden'>
-                    {messages.length === 0 && !isSendingMessage ? (
+                    {messages.length === 0 && !isSendingMessage && !isEditingMessage ? (
                       <div className='flex h-full items-center justify-center p-4'>
                         <CopilotWelcome
                           onQuestionClick={handleSubmit}

From 51ffcb3365024bea3352f79d92a7b5cff04a3906 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 18:43:35 -0700
Subject: [PATCH 12/28] Add focus onto the user input box when clicked

---
 .../copilot-message/copilot-message.tsx       |  8 ++++-
 .../components/user-input/user-input.tsx      | 29 ++++++++++++-------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index bd532c099d8..7a019d469e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -39,7 +39,7 @@ import {
   ThinkingBlock,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components'
 import CopilotMarkdownRenderer from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer'
-import { UserInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
+import { UserInput, type UserInputRef } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
 import { usePreviewStore } from '@/stores/copilot/preview-store'
 import { useCopilotStore } from '@/stores/copilot/store'
 import type { CopilotMessage as CopilotMessageType } from '@/stores/copilot/types'
@@ -70,6 +70,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
   const [isHoveringMessage, setIsHoveringMessage] = useState(false)
   const editContainerRef = useRef<HTMLDivElement>(null)
   const messageContentRef = useRef<HTMLDivElement>(null)
+  const userInputRef = useRef<UserInputRef>(null)
   const [needsExpansion, setNeedsExpansion] = useState(false)
   const [showCheckpointDiscardModal, setShowCheckpointDiscardModal] = useState(false)
   const pendingEditRef = useRef<{
@@ -317,6 +318,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       setIsExpanded(false)
       setEditedContent(message.content)
       onEditModeChange?.(true)
+      // Focus the input and position cursor at the end after render
+      setTimeout(() => {
+        userInputRef.current?.focus()
+      }, 0)
     }
 
     const handleCancelEdit = () => {
@@ -592,6 +597,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           {isEditMode ? (
             <div ref={editContainerRef} className='relative w-full'>
               <UserInput
+                ref={userInputRef}
                 onSubmit={handleSubmitEdit}
                 onAbort={handleCancelEdit}
                 isLoading={isSendingMessage}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index bd374328621..b0afd0350ca 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -221,7 +221,15 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       ref,
       () => ({
         focus: () => {
-          textareaRef.current?.focus()
+          const textarea = textareaRef.current
+          if (textarea) {
+            textarea.focus()
+            // Position cursor at the end of the text
+            const length = textarea.value.length
+            textarea.setSelectionRange(length, length)
+            // Scroll to the end
+            textarea.scrollTop = textarea.scrollHeight
+          }
         },
       }),
       []
@@ -239,6 +247,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [workflowId])
 
+    // Reset past chats when workflow changes to ensure we only load chats from the current workflow
+    useEffect(() => {
+      setPastChats([])
+      setIsLoadingPastChats(false)
+    }, [workflowId])
+
     // Fetch enabled models when dropdown is opened for the first time
     const fetchEnabledModelsOnce = useCallback(async () => {
       if (enabledModels !== null) return // Already loaded
@@ -364,18 +378,13 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         const data = await resp.json()
         const items = Array.isArray(data?.chats) ? data.chats : []
 
-        if (workflows.length === 0) {
-          await ensureWorkflowsLoaded()
-        }
-
-        const workspaceWorkflowIds = new Set(workflows.map((w) => w.id))
-
-        const workspaceChats = items.filter(
-          (c: any) => !c.workflowId || workspaceWorkflowIds.has(c.workflowId)
+        // Filter chats to only include those from the current workflow
+        const currentWorkflowChats = items.filter(
+          (c: any) => c.workflowId === workflowId
         )
 
         setPastChats(
-          workspaceChats.map((c: any) => ({
+          currentWorkflowChats.map((c: any) => ({
             id: c.id,
             title: c.title ?? null,
             workflowId: c.workflowId ?? null,

From e6dcb55acc5d28d396b5269b969eb7564602d2cb Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 18:46:40 -0700
Subject: [PATCH 13/28] Fix grayout of new stream on old edit message

---
 .../copilot-message/copilot-message.tsx       |  6 ++--
 .../panel/components/copilot/copilot.tsx      | 28 ++++++++++---------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 7a019d469e8..1e2bb485137 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -374,7 +374,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       if (editIndex !== -1) {
         // Exit edit mode visually
         setIsEditMode(false)
-        // Keep editing flag true to prevent welcome screen flash
+        // Clear editing state in parent immediately to prevent dimming of new messages
+        onEditModeChange?.(false)
 
         // Truncate messages after the edited message (remove it and everything after)
         const truncatedMessages = currentMessages.slice(0, editIndex)
@@ -412,9 +413,6 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           contexts: contexts || (message as any).contexts,
           messageId: message.id, // Reuse the original message ID
         })
-
-        // Clear editing state after message is sent
-        onEditModeChange?.(false)
       }
     }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 101838d6c9a..95bec4c2152 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -541,19 +541,21 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
 
             {/* Input area with integrated mode selector */}
             {!showCheckpoints && (
-              <UserInput
-                ref={userInputRef}
-                onSubmit={handleSubmit}
-                onAbort={handleAbort}
-                disabled={!activeWorkflowId}
-                isLoading={isSendingMessage}
-                isAborting={isAborting}
-                mode={mode}
-                onModeChange={setMode}
-                value={inputValue}
-                onChange={setInputValue}
-                panelWidth={panelWidth}
-              />
+              <div className='pt-2'>
+                <UserInput
+                  ref={userInputRef}
+                  onSubmit={handleSubmit}
+                  onAbort={handleAbort}
+                  disabled={!activeWorkflowId}
+                  isLoading={isSendingMessage}
+                  isAborting={isAborting}
+                  mode={mode}
+                  onModeChange={setMode}
+                  value={inputValue}
+                  onChange={setInputValue}
+                  panelWidth={panelWidth}
+                />
+              </div>
             )}
           </>
         )}

From 52a1bc76ad3e6d77e6a4ed26c363429a2e8a0032 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 18:46:55 -0700
Subject: [PATCH 14/28] Lint

---
 .../copilot-message/copilot-message.tsx       | 102 ++++++++++--------
 .../components/user-input/user-input.tsx      |   4 +-
 .../panel/components/copilot/copilot.tsx      |   4 +-
 3 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 1e2bb485137..c66c5fe7ffd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -28,7 +28,6 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  Checkbox,
 } from '@/components/ui'
 import { InlineToolCall } from '@/lib/copilot/inline-tool-call'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -39,7 +38,10 @@ import {
   ThinkingBlock,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components'
 import CopilotMarkdownRenderer from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer'
-import { UserInput, type UserInputRef } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
+import {
+  UserInput,
+  type UserInputRef,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
 import { usePreviewStore } from '@/stores/copilot/preview-store'
 import { useCopilotStore } from '@/stores/copilot/store'
 import type { CopilotMessage as CopilotMessageType } from '@/stores/copilot/types'
@@ -56,28 +58,35 @@ interface CopilotMessageProps {
 }
 
 const CopilotMessage: FC<CopilotMessageProps> = memo(
-  ({ message, isStreaming, panelWidth = 308, isDimmed = false, checkpointCount = 0, onEditModeChange }) => {
+  ({
+    message,
+    isStreaming,
+    panelWidth = 308,
+    isDimmed = false,
+    checkpointCount = 0,
+    onEditModeChange,
+  }) => {
     const isUser = message.role === 'user'
     const isAssistant = message.role === 'assistant'
     const [showCopySuccess, setShowCopySuccess] = useState(false)
     const [showUpvoteSuccess, setShowUpvoteSuccess] = useState(false)
     const [showDownvoteSuccess, setShowDownvoteSuccess] = useState(false)
-  const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false)
-  const [showAllContexts, setShowAllContexts] = useState(false)
-  const [isEditMode, setIsEditMode] = useState(false)
-  const [isExpanded, setIsExpanded] = useState(false)
-  const [editedContent, setEditedContent] = useState(message.content)
-  const [isHoveringMessage, setIsHoveringMessage] = useState(false)
-  const editContainerRef = useRef<HTMLDivElement>(null)
-  const messageContentRef = useRef<HTMLDivElement>(null)
-  const userInputRef = useRef<UserInputRef>(null)
-  const [needsExpansion, setNeedsExpansion] = useState(false)
-  const [showCheckpointDiscardModal, setShowCheckpointDiscardModal] = useState(false)
-  const pendingEditRef = useRef<{
-    message: string
-    fileAttachments?: any[]
-    contexts?: any[]
-  } | null>(null)
+    const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false)
+    const [showAllContexts, setShowAllContexts] = useState(false)
+    const [isEditMode, setIsEditMode] = useState(false)
+    const [isExpanded, setIsExpanded] = useState(false)
+    const [editedContent, setEditedContent] = useState(message.content)
+    const [isHoveringMessage, setIsHoveringMessage] = useState(false)
+    const editContainerRef = useRef<HTMLDivElement>(null)
+    const messageContentRef = useRef<HTMLDivElement>(null)
+    const userInputRef = useRef<UserInputRef>(null)
+    const [needsExpansion, setNeedsExpansion] = useState(false)
+    const [showCheckpointDiscardModal, setShowCheckpointDiscardModal] = useState(false)
+    const pendingEditRef = useRef<{
+      message: string
+      fileAttachments?: any[]
+      contexts?: any[]
+    } | null>(null)
 
     // Get checkpoint functionality from copilot store
     const {
@@ -103,7 +112,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     // Get checkpoints for this message if it's a user message
     const messageCheckpoints = isUser ? allMessageCheckpoints[message.id] || [] : []
     // Only consider it as having checkpoints if there's at least one valid checkpoint with an id
-    const hasCheckpoints = messageCheckpoints.length > 0 && messageCheckpoints.some(cp => cp?.id)
+    const hasCheckpoints = messageCheckpoints.length > 0 && messageCheckpoints.some((cp) => cp?.id)
 
     // Check if this is the last user message (for showing abort button)
     const isLastUserMessage = useMemo(() => {
@@ -288,7 +297,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         const latestCheckpoint = messageCheckpoints[0]
         try {
           await revertToCheckpoint(latestCheckpoint.id)
-          
+
           // Remove the used checkpoint from the store
           const { messageCheckpoints: currentCheckpoints } = useCopilotStore.getState()
           const updatedCheckpoints = {
@@ -296,11 +305,11 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
             [message.id]: messageCheckpoints.slice(1), // Remove the first (used) checkpoint
           }
           useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
-          
+
           setShowRestoreConfirmation(false)
-          logger.info('Checkpoint reverted and removed from message', { 
-            messageId: message.id, 
-            checkpointId: latestCheckpoint.id 
+          logger.info('Checkpoint reverted and removed from message', {
+            messageId: message.id,
+            checkpointId: latestCheckpoint.id,
           })
         } catch (error) {
           logger.error('Failed to revert to checkpoint:', error)
@@ -591,7 +600,9 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     if (isUser) {
       return (
-        <div className={`w-full max-w-full overflow-hidden py-0.5 transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}>
+        <div
+          className={`w-full max-w-full overflow-hidden py-0.5 transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
+        >
           {isEditMode ? (
             <div ref={editContainerRef} className='relative w-full'>
               <UserInput
@@ -796,13 +807,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 <AlertDialogTitle>Revert to checkpoint?</AlertDialogTitle>
                 <AlertDialogDescription>
                   This will revert your workflow to the state saved at this checkpoint.{' '}
-                  <span className='text-red-500 dark:text-red-500'>This action cannot be undone.</span>
+                  <span className='text-red-500 dark:text-red-500'>
+                    This action cannot be undone.
+                  </span>
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter className='flex'>
-                <AlertDialogCancel className='h-9 w-full rounded-[8px]'>
-                  Cancel
-                </AlertDialogCancel>
+                <AlertDialogCancel className='h-9 w-full rounded-[8px]'>Cancel</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={handleConfirmRevert}
                   className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
@@ -826,9 +837,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter className='flex'>
-                <AlertDialogCancel className='h-9 w-full rounded-[8px]'>
-                  Cancel
-                </AlertDialogCancel>
+                <AlertDialogCancel className='h-9 w-full rounded-[8px]'>Cancel</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={handleConfirmRevert}
                   className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
@@ -849,13 +858,15 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               }
             }}
           >
-            <AlertDialogContent 
+            <AlertDialogContent
               className='rounded-[10px] sm:max-w-2xl'
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
                   e.preventDefault()
                   // Trigger continue and revert
-                  const revertButton = e.currentTarget.querySelector('[data-action="revert"]') as HTMLButtonElement
+                  const revertButton = e.currentTarget.querySelector(
+                    '[data-action="revert"]'
+                  ) as HTMLButtonElement
                   revertButton?.click()
                 }
               }}
@@ -886,12 +897,12 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                       pendingEditRef.current = null
                     }
                   }}
-                  className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-muted px-4 py-2 font-medium text-sm text-foreground transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                  className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-muted px-4 py-2 font-medium text-foreground text-sm transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
                 >
                   Continue
                 </button>
                 <button
-                  data-action="revert"
+                  data-action='revert'
                   onClick={async (e) => {
                     e.preventDefault()
 
@@ -900,18 +911,19 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                       const latestCheckpoint = messageCheckpoints[0]
                       try {
                         await revertToCheckpoint(latestCheckpoint.id)
-                        
+
                         // Remove the used checkpoint from the store
-                        const { messageCheckpoints: currentCheckpoints } = useCopilotStore.getState()
+                        const { messageCheckpoints: currentCheckpoints } =
+                          useCopilotStore.getState()
                         const updatedCheckpoints = {
                           ...currentCheckpoints,
                           [message.id]: messageCheckpoints.slice(1), // Remove the first (used) checkpoint
                         }
                         useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
-                        
-                        logger.info('Reverted to checkpoint before editing message', { 
-                          messageId: message.id, 
-                          checkpointId: latestCheckpoint.id 
+
+                        logger.info('Reverted to checkpoint before editing message', {
+                          messageId: message.id,
+                          checkpointId: latestCheckpoint.id,
                         })
                       } catch (error) {
                         logger.error('Failed to revert to checkpoint:', error)
@@ -942,7 +954,9 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     if (isAssistant) {
       return (
-        <div className={`w-full max-w-full overflow-hidden py-0.5 pl-[2px] transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}>
+        <div
+          className={`w-full max-w-full overflow-hidden py-0.5 pl-[2px] transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
+        >
           <div className='max-w-full space-y-1.5 transition-all duration-200 ease-in-out'>
             {/* Content blocks in chronological order */}
             {memoizedContentBlocks}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index b0afd0350ca..218cbf2a000 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -379,9 +379,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         const items = Array.isArray(data?.chats) ? data.chats : []
 
         // Filter chats to only include those from the current workflow
-        const currentWorkflowChats = items.filter(
-          (c: any) => c.workflowId === workflowId
-        )
+        const currentWorkflowChats = items.filter((c: any) => c.workflowId === workflowId)
 
         setPastChats(
           currentWorkflowChats.map((c: any) => ({
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 95bec4c2152..c113bc2c577 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -502,7 +502,9 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                             panelWidth={panelWidth}
                             isDimmed={isDimmed}
                             checkpointCount={checkpointCount}
-                            onEditModeChange={(isEditing) => handleEditModeChange(message.id, isEditing)}
+                            onEditModeChange={(isEditing) =>
+                              handleEditModeChange(message.id, isEditing)
+                            }
                           />
                         )
                       })

From a2173ca07a2b1bee571f2ac90f192c0a02a26990 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 18:54:50 -0700
Subject: [PATCH 15/28] Make edit message submit smoother

---
 .../copilot-message/copilot-message.tsx       | 16 +++++++++----
 apps/sim/lib/copilot/inline-tool-call.tsx     | 24 ++++++++++++++-----
 .../client/user/set-environment-variables.ts  |  9 +++++++
 apps/sim/stores/copilot/store.ts              | 15 +++++++++++-
 4 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index c66c5fe7ffd..6b4537bc2ea 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -386,11 +386,19 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         // Clear editing state in parent immediately to prevent dimming of new messages
         onEditModeChange?.(false)
 
-        // Truncate messages after the edited message (remove it and everything after)
+        // Truncate messages after the edited message (but keep the edited message with updated content)
         const truncatedMessages = currentMessages.slice(0, editIndex)
-
-        // Update store to show only messages before the edit point
-        useCopilotStore.setState({ messages: truncatedMessages })
+        
+        // Update the edited message with new content but keep it in the array
+        const updatedMessage = {
+          ...message,
+          content: editedMessage,
+          fileAttachments: fileAttachments || message.fileAttachments,
+          contexts: contexts || (message as any).contexts,
+        }
+        
+        // Show the updated message immediately to prevent disappearing
+        useCopilotStore.setState({ messages: [...truncatedMessages, updatedMessage] })
 
         // If we have a current chat, update the DB to remove messages after this point
         if (currentChat?.id) {
diff --git a/apps/sim/lib/copilot/inline-tool-call.tsx b/apps/sim/lib/copilot/inline-tool-call.tsx
index 13d1b50e54d..3e5ea2f4f32 100644
--- a/apps/sim/lib/copilot/inline-tool-call.tsx
+++ b/apps/sim/lib/copilot/inline-tool-call.tsx
@@ -326,7 +326,19 @@ export function InlineToolCall({
     if (toolCall.name === 'set_environment_variables') {
       const variables =
         params.variables && typeof params.variables === 'object' ? params.variables : {}
-      const entries = Object.entries(variables)
+      
+      // Normalize variables - handle both direct key-value and nested {name, value} format
+      const normalizedEntries: Array<[string, string]> = []
+      Object.entries(variables).forEach(([key, value]) => {
+        if (typeof value === 'object' && value !== null && 'name' in value && 'value' in value) {
+          // Handle {name: "key", value: "val"} format
+          normalizedEntries.push([String((value as any).name), String((value as any).value)])
+        } else {
+          // Handle direct key-value format
+          normalizedEntries.push([key, String(value)])
+        }
+      })
+      
       return (
         <div className='mt-0.5 w-full overflow-hidden rounded border border-muted bg-card'>
           <div className='grid grid-cols-2 gap-0 border-muted/60 border-b bg-muted/40 px-2 py-1.5'>
@@ -337,18 +349,18 @@ export function InlineToolCall({
               Value
             </div>
           </div>
-          {entries.length === 0 ? (
+          {normalizedEntries.length === 0 ? (
             <div className='px-2 py-2 text-muted-foreground text-xs'>No variables provided</div>
           ) : (
             <div className='divide-y divide-muted/60'>
-              {entries.map(([k, v]) => (
-                <div key={k} className='grid grid-cols-[auto_1fr] items-center gap-2 px-2 py-1.5'>
+              {normalizedEntries.map(([name, value]) => (
+                <div key={name} className='grid grid-cols-[auto_1fr] items-center gap-2 px-2 py-1.5'>
                   <div className='truncate font-medium text-amber-800 text-xs dark:text-amber-200'>
-                    {k}
+                    {name}
                   </div>
                   <div className='min-w-0'>
                     <span className='block overflow-x-auto whitespace-nowrap font-mono text-amber-700 text-xs dark:text-amber-300'>
-                      {String(v)}
+                      {value}
                     </span>
                   </div>
                 </div>
diff --git a/apps/sim/lib/copilot/tools/client/user/set-environment-variables.ts b/apps/sim/lib/copilot/tools/client/user/set-environment-variables.ts
index a5e1eb827eb..0e5f80abc58 100644
--- a/apps/sim/lib/copilot/tools/client/user/set-environment-variables.ts
+++ b/apps/sim/lib/copilot/tools/client/user/set-environment-variables.ts
@@ -6,6 +6,7 @@ import {
 } from '@/lib/copilot/tools/client/base-tool'
 import { ExecuteResponseSuccessSchema } from '@/lib/copilot/tools/shared/schemas'
 import { createLogger } from '@/lib/logs/console/logger'
+import { useEnvironmentStore } from '@/stores/settings/environment/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 interface SetEnvArgs {
@@ -77,6 +78,14 @@ export class SetEnvironmentVariablesClientTool extends BaseClientTool {
       this.setState(ClientToolCallState.success)
       await this.markToolComplete(200, 'Environment variables updated', parsed.result)
       this.setState(ClientToolCallState.success)
+      
+      // Refresh the environment store so the UI reflects the new variables
+      try {
+        await useEnvironmentStore.getState().loadEnvironmentVariables()
+        logger.info('Environment store refreshed after setting variables')
+      } catch (error) {
+        logger.warn('Failed to refresh environment store:', error)
+      }
     } catch (e: any) {
       logger.error('execute failed', { message: e?.message })
       this.setState(ClientToolCallState.error)
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 373e2e86ad8..769e967267f 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -1571,7 +1571,20 @@ export const useCopilotStore = create<CopilotStore>()(
         newMessages = [...currentMessages, userMessage, streamingMessage]
         set({ revertState: null, inputValue: '' })
       } else {
-        newMessages = [...get().messages, userMessage, streamingMessage]
+        const currentMessages = get().messages
+        // If messageId is provided, check if it already exists (e.g., from edit flow)
+        const existingIndex = messageId ? currentMessages.findIndex(m => m.id === messageId) : -1
+        if (existingIndex !== -1) {
+          // Replace existing message instead of adding new one
+          newMessages = [
+            ...currentMessages.slice(0, existingIndex),
+            userMessage,
+            streamingMessage
+          ]
+        } else {
+          // Add new messages normally
+          newMessages = [...currentMessages, userMessage, streamingMessage]
+        }
       }
 
       const isFirstMessage = get().messages.length === 0 && !currentChat?.title

From 5a551d0137df0793f8db4f909562fd4ef19fa411 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Wed, 15 Oct 2025 19:04:14 -0700
Subject: [PATCH 16/28] Allow message sent while streaming

---
 .../copilot-message/copilot-message.tsx        | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 6b4537bc2ea..971cc5869a7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -340,8 +340,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     }
 
     const handleMessageClick = () => {
-      if (isSendingMessage) return
-
+      // Allow entering edit mode even while streaming
+      
       // If message needs expansion and is not expanded, expand it
       if (needsExpansion && !isExpanded) {
         setIsExpanded(true)
@@ -356,7 +356,14 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       fileAttachments?: any[],
       contexts?: any[]
     ) => {
-      if (!editedMessage.trim() || isSendingMessage) return
+      if (!editedMessage.trim()) return
+
+      // If a stream is in progress, abort it first
+      if (isSendingMessage) {
+        abortMessage()
+        // Wait a brief moment for abort to complete
+        await new Promise(resolve => setTimeout(resolve, 100))
+      }
 
       // Check if this message has checkpoints
       if (hasCheckpoints) {
@@ -617,7 +624,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 ref={userInputRef}
                 onSubmit={handleSubmitEdit}
                 onAbort={handleCancelEdit}
-                isLoading={isSendingMessage}
+                isLoading={isSendingMessage && isLastUserMessage}
                 value={editedContent}
                 onChange={setEditedContent}
                 placeholder='Edit your message...'
@@ -716,7 +723,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               <div
                 data-message-box
                 data-message-id={message.id}
-                onClick={!isSendingMessage ? handleMessageClick : undefined}
+                onClick={handleMessageClick}
                 onMouseEnter={() => setIsHoveringMessage(true)}
                 onMouseLeave={() => setIsHoveringMessage(false)}
                 className='group relative cursor-text rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] px-3 py-1.5 shadow-xs transition-all duration-200 hover:border-[#D0D0D0] dark:border-[#414141] dark:bg-[var(--surface-elevated)] dark:hover:border-[#525252]'
@@ -951,7 +958,6 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                   className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-[var(--brand-primary-hover-hex)] px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-[var(--brand-primary-hex)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
                 >
                   Continue and revert
-                  <CornerDownLeft className='h-3.5 w-3.5 flex-shrink-0' />
                 </button>
               </AlertDialogFooter>
             </AlertDialogContent>

From ddf4cd4bd2729785dbdaa11007eb665b67519815 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Thu, 16 Oct 2025 10:08:25 -0700
Subject: [PATCH 17/28] Revert popup improvements: gray out stuff below, show
 cursor on revert

---
 .../copilot-message/copilot-message.tsx       | 363 ++++++++++--------
 .../components/user-input/user-input.tsx      |  37 +-
 .../panel/components/copilot/copilot.tsx      |  18 +-
 3 files changed, 248 insertions(+), 170 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 971cc5869a7..16d16fbe984 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -8,7 +8,6 @@ import {
   Box,
   Check,
   Clipboard,
-  CornerDownLeft,
   Info,
   LibraryBig,
   RotateCcw,
@@ -19,16 +18,6 @@ import {
   Workflow,
   X,
 } from 'lucide-react'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui'
 import { InlineToolCall } from '@/lib/copilot/inline-tool-call'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -55,6 +44,7 @@ interface CopilotMessageProps {
   isDimmed?: boolean
   checkpointCount?: number
   onEditModeChange?: (isEditing: boolean) => void
+  onRevertModeChange?: (isReverting: boolean) => void
 }
 
 const CopilotMessage: FC<CopilotMessageProps> = memo(
@@ -65,6 +55,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     isDimmed = false,
     checkpointCount = 0,
     onEditModeChange,
+    onRevertModeChange,
   }) => {
     const isUser = message.role === 'user'
     const isAssistant = message.role === 'assistant'
@@ -289,6 +280,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     const handleRevertToCheckpoint = () => {
       setShowRestoreConfirmation(true)
+      onRevertModeChange?.(true)
     }
 
     const handleConfirmRevert = async () => {
@@ -306,7 +298,50 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           }
           useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
 
+          // Truncate all messages after this point
+          const currentMessages = messages
+          const revertIndex = currentMessages.findIndex((m) => m.id === message.id)
+          if (revertIndex !== -1) {
+            const truncatedMessages = currentMessages.slice(0, revertIndex + 1)
+            useCopilotStore.setState({ messages: truncatedMessages })
+            
+            // Update DB to remove messages after this point
+            if (currentChat?.id) {
+              try {
+                await fetch('/api/copilot/chat/update-messages', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({
+                    chatId: currentChat.id,
+                    messages: truncatedMessages.map((m) => ({
+                      id: m.id,
+                      role: m.role,
+                      content: m.content,
+                      timestamp: m.timestamp,
+                      ...(m.contentBlocks && { contentBlocks: m.contentBlocks }),
+                      ...(m.fileAttachments && { fileAttachments: m.fileAttachments }),
+                      ...((m as any).contexts && { contexts: (m as any).contexts }),
+                    })),
+                  }),
+                })
+              } catch (error) {
+                logger.error('Failed to update messages in DB after revert:', error)
+              }
+            }
+          }
+
           setShowRestoreConfirmation(false)
+          onRevertModeChange?.(false)
+          
+          // Enter edit mode after reverting
+          setIsEditMode(true)
+          onEditModeChange?.(true)
+          
+          // Focus the input after render
+          setTimeout(() => {
+            userInputRef.current?.focus()
+          }, 100)
+          
           logger.info('Checkpoint reverted and removed from message', {
             messageId: message.id,
             checkpointId: latestCheckpoint.id,
@@ -314,18 +349,22 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         } catch (error) {
           logger.error('Failed to revert to checkpoint:', error)
           setShowRestoreConfirmation(false)
+          onRevertModeChange?.(false)
         }
       }
     }
 
     const handleCancelRevert = () => {
       setShowRestoreConfirmation(false)
+      onRevertModeChange?.(false)
     }
 
     const handleEditMessage = () => {
       setIsEditMode(true)
       setIsExpanded(false)
       setEditedContent(message.content)
+      setShowRestoreConfirmation(false) // Dismiss any open confirmation popup
+      onRevertModeChange?.(false) // Notify parent
       onEditModeChange?.(true)
       // Focus the input and position cursor at the end after render
       setTimeout(() => {
@@ -467,6 +506,68 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       }
     }, [showDownvoteSuccess])
 
+    // Handle Escape key to close restore confirmation
+    useEffect(() => {
+      if (!showRestoreConfirmation) return
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          setShowRestoreConfirmation(false)
+          onRevertModeChange?.(false)
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyDown)
+      return () => document.removeEventListener('keydown', handleKeyDown)
+    }, [showRestoreConfirmation, onRevertModeChange])
+
+    // Handle Escape and Enter keys for checkpoint discard confirmation
+    useEffect(() => {
+      if (!showCheckpointDiscardModal) return
+
+      const handleKeyDown = async (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          setShowCheckpointDiscardModal(false)
+          pendingEditRef.current = null
+        } else if (event.key === 'Enter') {
+          event.preventDefault()
+          // Trigger "Continue and revert" action on Enter
+          if (messageCheckpoints.length > 0) {
+            const latestCheckpoint = messageCheckpoints[0]
+            try {
+              await revertToCheckpoint(latestCheckpoint.id)
+
+              // Remove the used checkpoint from the store
+              const { messageCheckpoints: currentCheckpoints } = useCopilotStore.getState()
+              const updatedCheckpoints = {
+                ...currentCheckpoints,
+                [message.id]: messageCheckpoints.slice(1),
+              }
+              useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
+
+              logger.info('Reverted to checkpoint before editing message', {
+                messageId: message.id,
+                checkpointId: latestCheckpoint.id,
+              })
+            } catch (error) {
+              logger.error('Failed to revert to checkpoint:', error)
+            }
+          }
+
+          setShowCheckpointDiscardModal(false)
+
+          if (pendingEditRef.current) {
+            const { message: msg, fileAttachments, contexts } = pendingEditRef.current
+            await performEdit(msg, fileAttachments, contexts)
+            pendingEditRef.current = null
+          }
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyDown)
+      return () => document.removeEventListener('keydown', handleKeyDown)
+    }, [showCheckpointDiscardModal, messageCheckpoints, message.id])
+
     // Handle click outside to exit edit mode
     useEffect(() => {
       if (!isEditMode) return
@@ -625,6 +726,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 onSubmit={handleSubmitEdit}
                 onAbort={handleCancelEdit}
                 isLoading={isSendingMessage && isLastUserMessage}
+                disabled={showCheckpointDiscardModal}
                 value={editedContent}
                 onChange={setEditedContent}
                 placeholder='Edit your message...'
@@ -632,7 +734,84 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 onModeChange={setMode}
                 panelWidth={panelWidth}
                 hideContextUsage={true}
+                clearOnSubmit={false}
               />
+              
+              {/* Inline Checkpoint Discard Confirmation - shown below input in edit mode */}
+              {showCheckpointDiscardModal && (
+                <div className='mt-2 rounded-lg border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-900'>
+                  <p className='mb-2 text-sm text-foreground'>Continue from a previous message?</p>
+                  <div className='flex gap-1.5'>
+                    <button
+                      onClick={() => {
+                        setShowCheckpointDiscardModal(false)
+                        pendingEditRef.current = null
+                      }}
+                      className='flex-1 rounded-md border border-gray-300 bg-muted px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted/80 dark:border-gray-600 dark:bg-background dark:hover:bg-muted'
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={async (e) => {
+                        e.preventDefault()
+                        setShowCheckpointDiscardModal(false)
+
+                        // Proceed with edit WITHOUT reverting checkpoint
+                        if (pendingEditRef.current) {
+                          const { message, fileAttachments, contexts } = pendingEditRef.current
+                          await performEdit(message, fileAttachments, contexts)
+                          pendingEditRef.current = null
+                        }
+                      }}
+                      className='flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs transition-colors hover:bg-muted dark:bg-muted dark:hover:bg-muted/80'
+                    >
+                      Continue
+                    </button>
+                    <button
+                      onClick={async (e) => {
+                        e.preventDefault()
+
+                        // Restore the checkpoint first
+                        if (messageCheckpoints.length > 0) {
+                          const latestCheckpoint = messageCheckpoints[0]
+                          try {
+                            await revertToCheckpoint(latestCheckpoint.id)
+
+                            // Remove the used checkpoint from the store
+                            const { messageCheckpoints: currentCheckpoints } =
+                              useCopilotStore.getState()
+                            const updatedCheckpoints = {
+                              ...currentCheckpoints,
+                              [message.id]: messageCheckpoints.slice(1), // Remove the first (used) checkpoint
+                            }
+                            useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
+
+                            logger.info('Reverted to checkpoint before editing message', {
+                              messageId: message.id,
+                              checkpointId: latestCheckpoint.id,
+                            })
+                          } catch (error) {
+                            logger.error('Failed to revert to checkpoint:', error)
+                          }
+                        }
+
+                        // Close the confirmation
+                        setShowCheckpointDiscardModal(false)
+
+                        // Then proceed with the edit
+                        if (pendingEditRef.current) {
+                          const { message, fileAttachments, contexts } = pendingEditRef.current
+                          await performEdit(message, fileAttachments, contexts)
+                          pendingEditRef.current = null
+                        }
+                      }}
+                      className='flex-1 rounded-md bg-[var(--brand-primary-hover-hex)] px-2 py-1 text-xs text-white transition-colors hover:bg-[var(--brand-primary-hex)]'
+                    >
+                      Continue and revert
+                    </button>
+                  </div>
+                </div>
+              )}
             </div>
           ) : (
             <div className='w-full'>
@@ -802,7 +981,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                     <button
                       onClick={(e) => {
                         e.stopPropagation()
-                        setShowRestoreConfirmation(true)
+                        handleRevertToCheckpoint()
                       }}
                       className='flex h-6 w-6 items-center justify-center rounded-full bg-muted text-muted-foreground transition-all duration-200 hover:bg-muted-foreground/20'
                       title='Revert to checkpoint'
@@ -815,153 +994,31 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
             </div>
           )}
 
-          {/* Restore Checkpoint Confirmation Modal */}
-          <AlertDialog open={showRestoreConfirmation} onOpenChange={setShowRestoreConfirmation}>
-            <AlertDialogContent className='rounded-[10px]'>
-              <AlertDialogHeader>
-                <AlertDialogTitle>Revert to checkpoint?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  This will revert your workflow to the state saved at this checkpoint.{' '}
-                  <span className='text-red-500 dark:text-red-500'>
-                    This action cannot be undone.
-                  </span>
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter className='flex'>
-                <AlertDialogCancel className='h-9 w-full rounded-[8px]'>Cancel</AlertDialogCancel>
-                <AlertDialogAction
-                  onClick={handleConfirmRevert}
-                  className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
-                >
-                  Revert
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-
-          {/* Restore Checkpoint Confirmation Modal */}
-          <AlertDialog open={showRestoreConfirmation} onOpenChange={setShowRestoreConfirmation}>
-            <AlertDialogContent className='rounded-[10px]'>
-              <AlertDialogHeader>
-                <AlertDialogTitle>Revert to checkpoint?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  This will revert your workflow to the state saved at this checkpoint.
-                  <span className='mt-2 block text-red-500 dark:text-red-500'>
-                    This action cannot be undone.
-                  </span>
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter className='flex'>
-                <AlertDialogCancel className='h-9 w-full rounded-[8px]'>Cancel</AlertDialogCancel>
-                <AlertDialogAction
-                  onClick={handleConfirmRevert}
-                  className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
-                >
-                  Revert
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-
-          {/* Checkpoint Discard Confirmation Modal */}
-          <AlertDialog
-            open={showCheckpointDiscardModal}
-            onOpenChange={(open) => {
-              setShowCheckpointDiscardModal(open)
-              if (!open) {
-                pendingEditRef.current = null
-              }
-            }}
-          >
-            <AlertDialogContent
-              className='rounded-[10px] sm:max-w-2xl'
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  e.preventDefault()
-                  // Trigger continue and revert
-                  const revertButton = e.currentTarget.querySelector(
-                    '[data-action="revert"]'
-                  ) as HTMLButtonElement
-                  revertButton?.click()
-                }
-              }}
-            >
-              <AlertDialogHeader>
-                <AlertDialogTitle>Continue from a previous message?</AlertDialogTitle>
-              </AlertDialogHeader>
-
-              <AlertDialogFooter className='flex gap-2'>
+          {/* Inline Restore Checkpoint Confirmation */}
+          {showRestoreConfirmation && (
+            <div className='mt-2 rounded-lg border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-900'>
+              <p className='mb-2 text-sm text-foreground'>
+                Revert to checkpoint? This will restore your workflow to the state saved at this checkpoint.{' '}
+                <span className='font-medium text-red-600 dark:text-red-400'>
+                  This action cannot be undone.
+                </span>
+              </p>
+              <div className='flex gap-1.5'>
                 <button
-                  onClick={() => {
-                    setShowCheckpointDiscardModal(false)
-                    pendingEditRef.current = null
-                  }}
-                  className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] border border-border bg-transparent px-4 py-2 font-medium text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                  onClick={handleCancelRevert}
+                  className='flex-1 rounded-md border border-gray-300 bg-muted px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted/80 dark:border-gray-600'
                 >
-                  Cancel (esc)
+                  Cancel
                 </button>
                 <button
-                  onClick={async (e) => {
-                    e.preventDefault()
-                    setShowCheckpointDiscardModal(false)
-
-                    // Proceed with edit WITHOUT reverting checkpoint
-                    if (pendingEditRef.current) {
-                      const { message, fileAttachments, contexts } = pendingEditRef.current
-                      await performEdit(message, fileAttachments, contexts)
-                      pendingEditRef.current = null
-                    }
-                  }}
-                  className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-muted px-4 py-2 font-medium text-foreground text-sm transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
-                >
-                  Continue
-                </button>
-                <button
-                  data-action='revert'
-                  onClick={async (e) => {
-                    e.preventDefault()
-
-                    // Restore the checkpoint first
-                    if (messageCheckpoints.length > 0) {
-                      const latestCheckpoint = messageCheckpoints[0]
-                      try {
-                        await revertToCheckpoint(latestCheckpoint.id)
-
-                        // Remove the used checkpoint from the store
-                        const { messageCheckpoints: currentCheckpoints } =
-                          useCopilotStore.getState()
-                        const updatedCheckpoints = {
-                          ...currentCheckpoints,
-                          [message.id]: messageCheckpoints.slice(1), // Remove the first (used) checkpoint
-                        }
-                        useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
-
-                        logger.info('Reverted to checkpoint before editing message', {
-                          messageId: message.id,
-                          checkpointId: latestCheckpoint.id,
-                        })
-                      } catch (error) {
-                        logger.error('Failed to revert to checkpoint:', error)
-                      }
-                    }
-
-                    // Close the modal
-                    setShowCheckpointDiscardModal(false)
-
-                    // Then proceed with the edit
-                    if (pendingEditRef.current) {
-                      const { message, fileAttachments, contexts } = pendingEditRef.current
-                      await performEdit(message, fileAttachments, contexts)
-                      pendingEditRef.current = null
-                    }
-                  }}
-                  className='inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-[var(--brand-primary-hover-hex)] px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-[var(--brand-primary-hex)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                  onClick={handleConfirmRevert}
+                  className='flex-1 rounded-md bg-red-500 px-2 py-1 text-xs text-white transition-colors hover:bg-red-600'
                 >
-                  Continue and revert
+                  Revert
                 </button>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+              </div>
+            </div>
+          )}
         </div>
       )
     }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 218cbf2a000..f0882a7abba 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -96,6 +96,7 @@ interface UserInputProps {
   onChange?: (value: string) => void // Callback when value changes
   panelWidth?: number // Panel width to adjust truncation
   hideContextUsage?: boolean // Hide the context usage pill
+  clearOnSubmit?: boolean // Whether to clear input after submit (default true for bottom input, false for edit mode)
 }
 
 interface UserInputRef {
@@ -118,6 +119,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       onChange: onControlledChange,
       panelWidth = 308,
       hideContextUsage = false,
+      clearOnSubmit = true,
     },
     ref
   ) => {
@@ -678,25 +680,28 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       // Send only the explicitly selected contexts
       onSubmit(trimmedMessage, fileAttachments, selectedContexts as any)
 
-      // Clean up preview URLs before clearing
-      attachedFiles.forEach((f) => {
-        if (f.previewUrl) {
-          URL.revokeObjectURL(f.previewUrl)
-        }
-      })
+      // Only clear after submit if clearOnSubmit is true (default behavior for bottom input)
+      if (clearOnSubmit) {
+        // Clean up preview URLs before clearing
+        attachedFiles.forEach((f) => {
+          if (f.previewUrl) {
+            URL.revokeObjectURL(f.previewUrl)
+          }
+        })
 
-      // Clear the message and files after submit
-      if (controlledValue !== undefined) {
-        onControlledChange?.('')
-      } else {
-        setInternalMessage('')
-      }
-      setAttachedFiles([])
+        // Clear the message and files after submit
+        if (controlledValue !== undefined) {
+          onControlledChange?.('')
+        } else {
+          setInternalMessage('')
+        }
+        setAttachedFiles([])
 
-      // Clear @mention contexts after submission
-      setSelectedContexts([])
+        // Clear @mention contexts after submission
+        setSelectedContexts([])
 
-      setOpenSubmenuFor(null)
+        setOpenSubmenuFor(null)
+      }
       setShowMentionMenu(false)
     }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index c113bc2c577..76f139b86aa 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -58,6 +58,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
   const hasLoadedModelsRef = useRef(false)
   const [editingMessageId, setEditingMessageId] = useState<string | null>(null)
   const [isEditingMessage, setIsEditingMessage] = useState(false)
+  const [revertingMessageId, setRevertingMessageId] = useState<string | null>(null)
 
   // Scroll state
   const [isNearBottom, setIsNearBottom] = useState(true)
@@ -453,6 +454,10 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
     logger.info('Edit mode changed', { messageId, isEditing, willDimMessages: isEditing })
   }, [])
 
+  const handleRevertModeChange = useCallback((messageId: string, isReverting: boolean) => {
+    setRevertingMessageId(isReverting ? messageId : null)
+  }, [])
+
   return (
     <>
       <div className='flex h-full flex-col overflow-hidden'>
@@ -482,12 +487,20 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                       </div>
                     ) : (
                       messages.map((message, index) => {
-                        // Determine if this message should be dimmed (comes after the message being edited)
+                        // Determine if this message should be dimmed
                         let isDimmed = false
+                        
+                        // Dim messages after the one being edited
                         if (editingMessageId) {
                           const editingIndex = messages.findIndex((m) => m.id === editingMessageId)
                           isDimmed = editingIndex !== -1 && index > editingIndex
                         }
+                        
+                        // Also dim messages after the one showing restore confirmation
+                        if (!isDimmed && revertingMessageId) {
+                          const revertingIndex = messages.findIndex((m) => m.id === revertingMessageId)
+                          isDimmed = revertingIndex !== -1 && index > revertingIndex
+                        }
 
                         // Get checkpoint count for this message to force re-render when it changes
                         const checkpointCount = messageCheckpoints[message.id]?.length || 0
@@ -505,6 +518,9 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                             onEditModeChange={(isEditing) =>
                               handleEditModeChange(message.id, isEditing)
                             }
+                            onRevertModeChange={(isReverting) =>
+                              handleRevertModeChange(message.id, isReverting)
+                            }
                           />
                         )
                       })

From 81f5b2be968da1deb55529e572263b5555cb07ce Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Thu, 16 Oct 2025 10:08:39 -0700
Subject: [PATCH 18/28] Fix lint

---
 .../copilot-message/copilot-message.tsx       | 33 ++++++++++---------
 .../panel/components/copilot/copilot.tsx      |  8 +++--
 apps/sim/lib/copilot/inline-tool-call.tsx     |  9 +++--
 .../client/user/set-environment-variables.ts  |  2 +-
 apps/sim/stores/copilot/store.ts              |  8 ++---
 5 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 16d16fbe984..3ca10fdfcf1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -304,7 +304,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           if (revertIndex !== -1) {
             const truncatedMessages = currentMessages.slice(0, revertIndex + 1)
             useCopilotStore.setState({ messages: truncatedMessages })
-            
+
             // Update DB to remove messages after this point
             if (currentChat?.id) {
               try {
@@ -332,16 +332,16 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
           setShowRestoreConfirmation(false)
           onRevertModeChange?.(false)
-          
+
           // Enter edit mode after reverting
           setIsEditMode(true)
           onEditModeChange?.(true)
-          
+
           // Focus the input after render
           setTimeout(() => {
             userInputRef.current?.focus()
           }, 100)
-          
+
           logger.info('Checkpoint reverted and removed from message', {
             messageId: message.id,
             checkpointId: latestCheckpoint.id,
@@ -380,7 +380,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
     const handleMessageClick = () => {
       // Allow entering edit mode even while streaming
-      
+
       // If message needs expansion and is not expanded, expand it
       if (needsExpansion && !isExpanded) {
         setIsExpanded(true)
@@ -401,7 +401,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       if (isSendingMessage) {
         abortMessage()
         // Wait a brief moment for abort to complete
-        await new Promise(resolve => setTimeout(resolve, 100))
+        await new Promise((resolve) => setTimeout(resolve, 100))
       }
 
       // Check if this message has checkpoints
@@ -434,7 +434,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
         // Truncate messages after the edited message (but keep the edited message with updated content)
         const truncatedMessages = currentMessages.slice(0, editIndex)
-        
+
         // Update the edited message with new content but keep it in the array
         const updatedMessage = {
           ...message,
@@ -442,7 +442,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           fileAttachments: fileAttachments || message.fileAttachments,
           contexts: contexts || (message as any).contexts,
         }
-        
+
         // Show the updated message immediately to prevent disappearing
         useCopilotStore.setState({ messages: [...truncatedMessages, updatedMessage] })
 
@@ -736,18 +736,18 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 hideContextUsage={true}
                 clearOnSubmit={false}
               />
-              
+
               {/* Inline Checkpoint Discard Confirmation - shown below input in edit mode */}
               {showCheckpointDiscardModal && (
                 <div className='mt-2 rounded-lg border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-900'>
-                  <p className='mb-2 text-sm text-foreground'>Continue from a previous message?</p>
+                  <p className='mb-2 text-foreground text-sm'>Continue from a previous message?</p>
                   <div className='flex gap-1.5'>
                     <button
                       onClick={() => {
                         setShowCheckpointDiscardModal(false)
                         pendingEditRef.current = null
                       }}
-                      className='flex-1 rounded-md border border-gray-300 bg-muted px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted/80 dark:border-gray-600 dark:bg-background dark:hover:bg-muted'
+                      className='flex-1 rounded-md border border-gray-300 bg-muted px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/80 dark:border-gray-600 dark:bg-background dark:hover:bg-muted'
                     >
                       Cancel
                     </button>
@@ -805,7 +805,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                           pendingEditRef.current = null
                         }
                       }}
-                      className='flex-1 rounded-md bg-[var(--brand-primary-hover-hex)] px-2 py-1 text-xs text-white transition-colors hover:bg-[var(--brand-primary-hex)]'
+                      className='flex-1 rounded-md bg-[var(--brand-primary-hover-hex)] px-2 py-1 text-white text-xs transition-colors hover:bg-[var(--brand-primary-hex)]'
                     >
                       Continue and revert
                     </button>
@@ -997,8 +997,9 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           {/* Inline Restore Checkpoint Confirmation */}
           {showRestoreConfirmation && (
             <div className='mt-2 rounded-lg border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-900'>
-              <p className='mb-2 text-sm text-foreground'>
-                Revert to checkpoint? This will restore your workflow to the state saved at this checkpoint.{' '}
+              <p className='mb-2 text-foreground text-sm'>
+                Revert to checkpoint? This will restore your workflow to the state saved at this
+                checkpoint.{' '}
                 <span className='font-medium text-red-600 dark:text-red-400'>
                   This action cannot be undone.
                 </span>
@@ -1006,13 +1007,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               <div className='flex gap-1.5'>
                 <button
                   onClick={handleCancelRevert}
-                  className='flex-1 rounded-md border border-gray-300 bg-muted px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted/80 dark:border-gray-600'
+                  className='flex-1 rounded-md border border-gray-300 bg-muted px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/80 dark:border-gray-600'
                 >
                   Cancel
                 </button>
                 <button
                   onClick={handleConfirmRevert}
-                  className='flex-1 rounded-md bg-red-500 px-2 py-1 text-xs text-white transition-colors hover:bg-red-600'
+                  className='flex-1 rounded-md bg-red-500 px-2 py-1 text-white text-xs transition-colors hover:bg-red-600'
                 >
                   Revert
                 </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 76f139b86aa..35158b30811 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -489,16 +489,18 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                       messages.map((message, index) => {
                         // Determine if this message should be dimmed
                         let isDimmed = false
-                        
+
                         // Dim messages after the one being edited
                         if (editingMessageId) {
                           const editingIndex = messages.findIndex((m) => m.id === editingMessageId)
                           isDimmed = editingIndex !== -1 && index > editingIndex
                         }
-                        
+
                         // Also dim messages after the one showing restore confirmation
                         if (!isDimmed && revertingMessageId) {
-                          const revertingIndex = messages.findIndex((m) => m.id === revertingMessageId)
+                          const revertingIndex = messages.findIndex(
+                            (m) => m.id === revertingMessageId
+                          )
                           isDimmed = revertingIndex !== -1 && index > revertingIndex
                         }
 
diff --git a/apps/sim/lib/copilot/inline-tool-call.tsx b/apps/sim/lib/copilot/inline-tool-call.tsx
index 3e5ea2f4f32..d89e1950f01 100644
--- a/apps/sim/lib/copilot/inline-tool-call.tsx
+++ b/apps/sim/lib/copilot/inline-tool-call.tsx
@@ -326,7 +326,7 @@ export function InlineToolCall({
     if (toolCall.name === 'set_environment_variables') {
       const variables =
         params.variables && typeof params.variables === 'object' ? params.variables : {}
-      
+
       // Normalize variables - handle both direct key-value and nested {name, value} format
       const normalizedEntries: Array<[string, string]> = []
       Object.entries(variables).forEach(([key, value]) => {
@@ -338,7 +338,7 @@ export function InlineToolCall({
           normalizedEntries.push([key, String(value)])
         }
       })
-      
+
       return (
         <div className='mt-0.5 w-full overflow-hidden rounded border border-muted bg-card'>
           <div className='grid grid-cols-2 gap-0 border-muted/60 border-b bg-muted/40 px-2 py-1.5'>
@@ -354,7 +354,10 @@ export function InlineToolCall({
           ) : (
             <div className='divide-y divide-muted/60'>
               {normalizedEntries.map(([name, value]) => (
-                <div key={name} className='grid grid-cols-[auto_1fr] items-center gap-2 px-2 py-1.5'>
+                <div
+                  key={name}
+                  className='grid grid-cols-[auto_1fr] items-center gap-2 px-2 py-1.5'
+                >
                   <div className='truncate font-medium text-amber-800 text-xs dark:text-amber-200'>
                     {name}
                   </div>
diff --git a/apps/sim/lib/copilot/tools/client/user/set-environment-variables.ts b/apps/sim/lib/copilot/tools/client/user/set-environment-variables.ts
index 0e5f80abc58..1c0dca81602 100644
--- a/apps/sim/lib/copilot/tools/client/user/set-environment-variables.ts
+++ b/apps/sim/lib/copilot/tools/client/user/set-environment-variables.ts
@@ -78,7 +78,7 @@ export class SetEnvironmentVariablesClientTool extends BaseClientTool {
       this.setState(ClientToolCallState.success)
       await this.markToolComplete(200, 'Environment variables updated', parsed.result)
       this.setState(ClientToolCallState.success)
-      
+
       // Refresh the environment store so the UI reflects the new variables
       try {
         await useEnvironmentStore.getState().loadEnvironmentVariables()
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 769e967267f..036d5cbaea4 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -1573,14 +1573,10 @@ export const useCopilotStore = create<CopilotStore>()(
       } else {
         const currentMessages = get().messages
         // If messageId is provided, check if it already exists (e.g., from edit flow)
-        const existingIndex = messageId ? currentMessages.findIndex(m => m.id === messageId) : -1
+        const existingIndex = messageId ? currentMessages.findIndex((m) => m.id === messageId) : -1
         if (existingIndex !== -1) {
           // Replace existing message instead of adding new one
-          newMessages = [
-            ...currentMessages.slice(0, existingIndex),
-            userMessage,
-            streamingMessage
-          ]
+          newMessages = [...currentMessages.slice(0, existingIndex), userMessage, streamingMessage]
         } else {
           // Add new messages normally
           newMessages = [...currentMessages, userMessage, streamingMessage]

From e02db18c26cca80dac98bc5f727244ff7f224636 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Thu, 16 Oct 2025 10:22:31 -0700
Subject: [PATCH 19/28] Improve chat history dropdown

---
 apps/sim/app/api/copilot/chat/delete/route.ts |  36 +++++
 .../api/copilot/chat/update-title/route.ts    |  46 +++++++
 .../w/[workflowId]/components/panel/panel.tsx | 130 ++++++++++++++----
 apps/sim/stores/copilot/store.ts              |  28 +++-
 4 files changed, 210 insertions(+), 30 deletions(-)
 create mode 100644 apps/sim/app/api/copilot/chat/delete/route.ts
 create mode 100644 apps/sim/app/api/copilot/chat/update-title/route.ts

diff --git a/apps/sim/app/api/copilot/chat/delete/route.ts b/apps/sim/app/api/copilot/chat/delete/route.ts
new file mode 100644
index 00000000000..1f24980657c
--- /dev/null
+++ b/apps/sim/app/api/copilot/chat/delete/route.ts
@@ -0,0 +1,36 @@
+import { db } from '@sim/db'
+import { copilotChats } from '@sim/db/schema'
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { createLogger } from '@/lib/logs/console/logger'
+
+const logger = createLogger('DeleteChatAPI')
+
+const DeleteChatSchema = z.object({
+  chatId: z.string(),
+})
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const session = await getSession()
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const parsed = DeleteChatSchema.parse(body)
+
+    // Delete the chat
+    await db.delete(copilotChats).where(eq(copilotChats.id, parsed.chatId))
+
+    logger.info('Chat deleted', { chatId: parsed.chatId })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    logger.error('Error deleting chat:', error)
+    return NextResponse.json({ success: false, error: 'Failed to delete chat' }, { status: 500 })
+  }
+}
+
diff --git a/apps/sim/app/api/copilot/chat/update-title/route.ts b/apps/sim/app/api/copilot/chat/update-title/route.ts
new file mode 100644
index 00000000000..4fe6bd93da5
--- /dev/null
+++ b/apps/sim/app/api/copilot/chat/update-title/route.ts
@@ -0,0 +1,46 @@
+import { db } from '@sim/db'
+import { copilotChats } from '@sim/db/schema'
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { createLogger } from '@/lib/logs/console/logger'
+
+const logger = createLogger('UpdateChatTitleAPI')
+
+const UpdateTitleSchema = z.object({
+  chatId: z.string(),
+  title: z.string(),
+})
+
+export async function POST(request: NextRequest) {
+  try {
+    const session = await getSession()
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const parsed = UpdateTitleSchema.parse(body)
+
+    // Update the chat title
+    await db
+      .update(copilotChats)
+      .set({
+        title: parsed.title,
+        updatedAt: new Date(),
+      })
+      .where(eq(copilotChats.id, parsed.chatId))
+
+    logger.info('Chat title updated', { chatId: parsed.chatId, title: parsed.title })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    logger.error('Error updating chat title:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to update chat title' },
+      { status: 500 }
+    )
+  }
+}
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index e0d2a7a51c0..2bfef8525bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowDownToLine, CircleSlash, History, Plus, X } from 'lucide-react'
+import { ArrowDownToLine, CircleSlash, History, Pencil, Plus, Trash2, X } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -26,6 +26,8 @@ const logger = createLogger('Panel')
 export function Panel() {
   const [chatMessage, setChatMessage] = useState<string>('')
   const [isHistoryDropdownOpen, setIsHistoryDropdownOpen] = useState(false)
+  const [editingChatId, setEditingChatId] = useState<string | null>(null)
+  const [editingChatTitle, setEditingChatTitle] = useState<string>('')
 
   const [isResizing, setIsResizing] = useState(false)
   const [resizeStartX, setResizeStartX] = useState(0)
@@ -432,55 +434,127 @@ export function Panel() {
                     </Tooltip>
                     <DropdownMenuContent
                       align='end'
-                      className='z-[200] w-48 rounded-lg border-[#E5E5E5] bg-[#FFFFFF] shadow-xs dark:border-[#414141] dark:bg-[var(--surface-elevated)]'
+                      className='z-[200] w-96 rounded-lg border bg-background p-2 shadow-lg dark:border-[#414141] dark:bg-[var(--surface-elevated)]'
                       sideOffset={8}
                       side='bottom'
                       avoidCollisions={true}
                       collisionPadding={8}
                     >
                       {isLoadingChats ? (
-                        <ScrollArea className='h-[200px]' hideScrollbar={true}>
+                        <ScrollArea className='max-h-[320px]' hideScrollbar={true}>
                           <ChatHistorySkeleton />
                         </ScrollArea>
                       ) : groupedChats.length === 0 ? (
-                        <div className='px-3 py-2 text-muted-foreground text-sm'>No chats yet</div>
+                        <div className='px-2 py-6 text-center text-muted-foreground text-sm'>No chats yet</div>
                       ) : (
-                        <ScrollArea className='h-[200px]' hideScrollbar={true}>
+                        <ScrollArea className='max-h-[320px]' hideScrollbar={true}>
                           {groupedChats.map(([groupName, chats], groupIndex) => (
                             <div key={groupName}>
                               <div
-                                className={`border-[#E5E5E5] border-t px-1 pt-1 pb-0.5 font-normal text-muted-foreground text-xs dark:border-[#414141] ${groupIndex === 0 ? 'border-t-0' : ''}`}
+                                className={`px-2 pt-2 pb-1 font-medium text-muted-foreground text-xs uppercase tracking-wide ${groupIndex === 0 ? 'pt-0' : ''}`}
                               >
                                 {groupName}
                               </div>
-                              <div className='flex flex-col gap-1'>
+                              <div className='flex flex-col gap-0.5'>
                                 {chats.map((chat) => (
                                   <div
                                     key={chat.id}
-                                    onClick={() => {
-                                      // Only call selectChat if it's a different chat
-                                      // This prevents aborting streams when clicking the currently active chat
-                                      if (currentChat?.id !== chat.id) {
-                                        selectChat(chat)
-                                      }
-                                      setIsHistoryDropdownOpen(false)
-                                    }}
-                                    className={`group mx-1 flex h-8 cursor-pointer items-center rounded-lg px-2 py-1.5 text-left transition-colors ${
+                                    className={`group relative flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors ${
                                       currentChat?.id === chat.id
-                                        ? 'bg-accent'
-                                        : 'hover:bg-accent/50'
+                                        ? 'bg-accent text-accent-foreground'
+                                        : 'hover:bg-accent/50 text-foreground'
                                     }`}
-                                    style={{ width: '176px', maxWidth: '176px' }}
                                   >
-                                    <span
-                                      className={`min-w-0 flex-1 truncate font-medium text-sm ${
-                                        currentChat?.id === chat.id
-                                          ? 'text-foreground'
-                                          : 'text-muted-foreground'
-                                      }`}
-                                    >
-                                      {chat.title || 'Untitled Chat'}
-                                    </span>
+                                    {editingChatId === chat.id ? (
+                                      <input
+                                        type='text'
+                                        value={editingChatTitle}
+                                        onChange={(e) => setEditingChatTitle(e.target.value)}
+                                        onKeyDown={async (e) => {
+                                          if (e.key === 'Enter') {
+                                            e.preventDefault()
+                                            const newTitle = editingChatTitle.trim() || 'Untitled Chat'
+                                            
+                                            // Update optimistically in store first
+                                            const updatedChats = chats.map((c) =>
+                                              c.id === chat.id ? { ...c, title: newTitle } : c
+                                            )
+                                            useCopilotStore.setState({ chats: updatedChats })
+                                            
+                                            // Exit edit mode immediately
+                                            setEditingChatId(null)
+                                            
+                                            // Save to database in background
+                                            try {
+                                              await fetch('/api/copilot/chat/update-title', {
+                                                method: 'POST',
+                                                headers: { 'Content-Type': 'application/json' },
+                                                body: JSON.stringify({
+                                                  chatId: chat.id,
+                                                  title: newTitle,
+                                                }),
+                                              })
+                                            } catch (error) {
+                                              logger.error('Failed to update chat title:', error)
+                                              // Revert on error
+                                              await loadChats(true)
+                                            }
+                                          } else if (e.key === 'Escape') {
+                                            setEditingChatId(null)
+                                          }
+                                        }}
+                                        onBlur={() => setEditingChatId(null)}
+                                        autoFocus
+                                        className='min-w-0 flex-1 rounded border-none bg-transparent px-0 text-sm outline-none focus:outline-none'
+                                      />
+                                    ) : (
+                                      <>
+                                        <span
+                                          onClick={() => {
+                                            // Only call selectChat if it's a different chat
+                                            if (currentChat?.id !== chat.id) {
+                                              selectChat(chat)
+                                            }
+                                            setIsHistoryDropdownOpen(false)
+                                          }}
+                                          className='min-w-0 cursor-pointer truncate text-sm'
+                                          style={{ maxWidth: 'calc(100% - 60px)' }}
+                                        >
+                                          {chat.title || 'Untitled Chat'}
+                                        </span>
+                                        <div className='ml-auto flex flex-shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
+                                          <button
+                                            onClick={(e) => {
+                                              e.stopPropagation()
+                                              setEditingChatId(chat.id)
+                                              setEditingChatTitle(chat.title || 'Untitled Chat')
+                                            }}
+                                            className='flex h-5 w-5 items-center justify-center rounded hover:bg-muted'
+                                          >
+                                            <Pencil className='h-3 w-3 text-muted-foreground' />
+                                          </button>
+                                          <button
+                                            onClick={async (e) => {
+                                              e.stopPropagation()
+                                              
+                                              // Check if deleting current chat
+                                              const isDeletingCurrent = currentChat?.id === chat.id
+                                              
+                                              // Delete the chat (optimistic update happens in store)
+                                              await handleDeleteChat(chat.id)
+                                              
+                                              // If deleted current chat, create new one
+                                              if (isDeletingCurrent) {
+                                                copilotRef.current?.createNewChat()
+                                              }
+                                            }}
+                                            className='flex h-5 w-5 items-center justify-center rounded hover:bg-muted'
+                                          >
+                                            <Trash2 className='h-3 w-3 text-muted-foreground' />
+                                          </button>
+                                        </div>
+                                      </>
+                                    )}
                                   </div>
                                 ))}
                               </div>
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 036d5cbaea4..5d13b8fad28 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -1468,8 +1468,32 @@ export const useCopilotStore = create<CopilotStore>()(
       })
     },
 
-    deleteChat: async (_chatId: string) => {
-      // no-op for now
+    deleteChat: async (chatId: string) => {
+      try {
+        // Call delete API
+        const response = await fetch('/api/copilot/chat/delete', {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ chatId }),
+        })
+
+        if (!response.ok) {
+          throw new Error(`Failed to delete chat: ${response.status}`)
+        }
+
+        // Remove from local state
+        set((state) => ({
+          chats: state.chats.filter((c) => c.id !== chatId),
+          // If deleted chat was current, clear it
+          currentChat: state.currentChat?.id === chatId ? null : state.currentChat,
+          messages: state.currentChat?.id === chatId ? [] : state.messages,
+        }))
+
+        logger.info('Chat deleted', { chatId })
+      } catch (error) {
+        logger.error('Failed to delete chat:', error)
+        throw error
+      }
     },
 
     areChatsFresh: (_workflowId: string) => false,

From 89c143b21d9eb5b9f92935cfac9b4eaae5cd22e7 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Thu, 16 Oct 2025 11:34:45 -0700
Subject: [PATCH 20/28] Improve get block metadata tool

---
 .../copilot-message/copilot-message.tsx       |   4 +-
 .../server/blocks/get-blocks-metadata-tool.ts | 407 +++++++++++++++++-
 2 files changed, 395 insertions(+), 16 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 3ca10fdfcf1..be61623e2b4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -909,7 +909,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               >
                 <div
                   ref={messageContentRef}
-                  className='whitespace-pre-wrap break-words py-1 pr-2 pl-[2px] font-sans text-foreground text-sm leading-[1.25rem]'
+                  className={`whitespace-pre-wrap break-words py-1 pl-[2px] font-sans text-foreground text-sm leading-[1.25rem] ${isSendingMessage && isLastUserMessage ? 'pr-10' : 'pr-2'}`}
                   style={{
                     maxHeight: !isExpanded && needsExpansion ? '60px' : 'none',
                     overflow: !isExpanded && needsExpansion ? 'hidden' : 'visible',
@@ -961,7 +961,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
                 {/* Abort button when hovering and response is generating (only on last user message) */}
                 {isSendingMessage && isHoveringMessage && isLastUserMessage && (
-                  <div className='absolute top-2 right-2'>
+                  <div className='absolute bottom-2 right-2'>
                     <button
                       onClick={(e) => {
                         e.stopPropagation()
diff --git a/apps/sim/lib/copilot/tools/server/blocks/get-blocks-metadata-tool.ts b/apps/sim/lib/copilot/tools/server/blocks/get-blocks-metadata-tool.ts
index 94328c68a13..6435dc570cb 100644
--- a/apps/sim/lib/copilot/tools/server/blocks/get-blocks-metadata-tool.ts
+++ b/apps/sim/lib/copilot/tools/server/blocks/get-blocks-metadata-tool.ts
@@ -95,6 +95,7 @@ export interface CopilotBlockMetadata {
       inputSchema?: CopilotSubblockMetadata[]
     }
   >
+  outputs?: Record<string, any>
   yamlDocumentation?: string
 }
 
@@ -130,6 +131,7 @@ export const getBlocksMetadataServerTool: BaseServerTool<
           tools: [],
           triggers: [],
           operationInputSchema: operationParameters,
+          outputs: specialBlock.outputs,
         }
         ;(metadata as any).subBlocks = undefined
       } else {
@@ -209,6 +211,7 @@ export const getBlocksMetadataServerTool: BaseServerTool<
           triggers,
           operationInputSchema: operationParameters,
           operations,
+          outputs: blockConfig.outputs,
         }
       }
 
@@ -236,10 +239,331 @@ export const getBlocksMetadataServerTool: BaseServerTool<
       }
     }
 
-    return GetBlocksMetadataResult.parse({ metadata: result })
+    // Transform metadata to cleaner format
+    const transformedResult: Record<string, any> = {}
+    for (const [blockId, metadata] of Object.entries(result)) {
+      transformedResult[blockId] = transformBlockMetadata(metadata)
+    }
+
+    return GetBlocksMetadataResult.parse({ metadata: transformedResult })
   },
 }
 
+function transformBlockMetadata(metadata: CopilotBlockMetadata): any {
+  const transformed: any = {
+    blockType: metadata.id,
+    name: metadata.name,
+    description: metadata.description,
+  }
+
+  // Add best practices if available
+  if (metadata.bestPractices) {
+    transformed.bestPractices = metadata.bestPractices
+  }
+
+  // Add auth type and required credentials if available
+  if (metadata.authType) {
+    transformed.authType = metadata.authType
+    
+    // Add credential requirements based on auth type
+    if (metadata.authType === 'OAuth') {
+      transformed.requiredCredentials = {
+        type: 'oauth',
+        service: metadata.id, // e.g., 'gmail', 'slack', etc.
+        description: `OAuth authentication required for ${metadata.name}`,
+      }
+    } else if (metadata.authType === 'API Key') {
+      transformed.requiredCredentials = {
+        type: 'api_key',
+        description: `API key required for ${metadata.name}`,
+      }
+    } else if (metadata.authType === 'Bot Token') {
+      transformed.requiredCredentials = {
+        type: 'bot_token',
+        description: `Bot token required for ${metadata.name}`,
+      }
+    }
+  }
+
+  // Process inputs
+  const inputs = extractInputs(metadata)
+  if (inputs.required.length > 0 || inputs.optional.length > 0) {
+    transformed.inputs = inputs
+  }
+
+  // Add operations if available
+  const hasOperations = metadata.operations && Object.keys(metadata.operations).length > 0
+  if (hasOperations && metadata.operations) {
+    const blockLevelInputs = new Set(Object.keys(metadata.inputDefinitions || {}))
+    transformed.operations = Object.entries(metadata.operations).reduce((acc, [opId, opData]) => {
+      acc[opId] = {
+        name: opData.toolName || opId,
+        description: opData.description,
+        inputs: extractOperationInputs(opData, blockLevelInputs),
+        outputs: formatOutputsFromDefinition(opData.outputs || {}),
+      }
+      return acc
+    }, {} as Record<string, any>)
+  }
+
+  // Process outputs - only show at block level if there are NO operations
+  // For blocks with operations, outputs are shown per-operation to avoid ambiguity
+  if (!hasOperations) {
+    const outputs = extractOutputs(metadata)
+    if (outputs.length > 0) {
+      transformed.outputs = outputs
+    }
+  }
+
+  // Don't include availableTools - it's internal implementation detail
+  // For agent block, tools.access contains LLM provider APIs (not useful)
+  // For other blocks, it's redundant with operations
+
+  // Add triggers if present
+  if (metadata.triggers && metadata.triggers.length > 0) {
+    transformed.triggers = metadata.triggers.map(t => ({
+      id: t.id,
+      outputs: formatOutputsFromDefinition(t.outputs || {}),
+    }))
+  }
+
+  // Add YAML documentation if available
+  if (metadata.yamlDocumentation) {
+    transformed.yamlDocumentation = metadata.yamlDocumentation
+  }
+
+  return transformed
+}
+
+function extractInputs(metadata: CopilotBlockMetadata): {
+  required: any[]
+  optional: any[]
+} {
+  const required: any[] = []
+  const optional: any[] = []
+  const inputDefs = metadata.inputDefinitions || {}
+
+  // Process inputSchema to get UI-level input information
+  for (const schema of metadata.inputSchema || []) {
+    // Skip credential inputs (handled by requiredCredentials)
+    if (schema.type === 'oauth-credential' || schema.type === 'credential-input' || schema.type === 'oauth-input') {
+      continue
+    }
+    
+    // Skip trigger config (only relevant when setting up triggers)
+    if (schema.id === 'triggerConfig' || schema.type === 'trigger-config') {
+      continue
+    }
+
+    const inputDef = inputDefs[schema.id] || inputDefs[schema.canonicalParamId || '']
+    
+    // For operation field, provide a clearer description
+    let description = schema.description || inputDef?.description || schema.title
+    if (schema.id === 'operation') {
+      description = 'Operation to perform'
+    }
+    
+    const input: any = {
+      name: schema.id,
+      type: mapSchemaTypeToSimpleType(schema.type, schema),
+      description,
+    }
+
+    // Add options for dropdown/combobox types
+    // For operation field, use IDs instead of labels for clarity
+    if (schema.options && schema.options.length > 0) {
+      if (schema.id === 'operation') {
+        input.options = schema.options.map(opt => opt.id)
+      } else {
+        input.options = schema.options.map(opt => opt.label || opt.id)
+      }
+    }
+
+    // Add enum from input definitions
+    if (inputDef?.enum && Array.isArray(inputDef.enum)) {
+      input.options = inputDef.enum
+    }
+
+    // Add default value if present
+    if (schema.defaultValue !== undefined) {
+      input.default = schema.defaultValue
+    } else if (inputDef?.default !== undefined) {
+      input.default = inputDef.default
+    }
+
+    // Add constraints for numbers
+    if (schema.type === 'slider' || schema.type === 'number-input') {
+      if (schema.min !== undefined) input.min = schema.min
+      if (schema.max !== undefined) input.max = schema.max
+    } else if (inputDef?.minimum !== undefined || inputDef?.maximum !== undefined) {
+      if (inputDef.minimum !== undefined) input.min = inputDef.minimum
+      if (inputDef.maximum !== undefined) input.max = inputDef.maximum
+    }
+
+    // Add example if we can infer one
+    const example = generateInputExample(schema, inputDef)
+    if (example !== undefined) {
+      input.example = example
+    }
+
+    // Determine if required
+    // For blocks with operations, the operation field is always required
+    const isOperationField = schema.id === 'operation' && metadata.operations && Object.keys(metadata.operations).length > 0
+    const isRequired = schema.required || inputDef?.required || isOperationField
+    
+    if (isRequired) {
+      required.push(input)
+    } else {
+      optional.push(input)
+    }
+  }
+
+  return { required, optional }
+}
+
+function extractOperationInputs(
+  opData: any,
+  blockLevelInputs: Set<string>
+): {
+  required: any[]
+  optional: any[]
+} {
+  const required: any[] = []
+  const optional: any[] = []
+  const inputs = opData.inputs || {}
+
+  for (const [key, inputDef] of Object.entries(inputs)) {
+    // Skip inputs that are already defined at block level (avoid duplication)
+    if (blockLevelInputs.has(key)) {
+      continue
+    }
+
+    // Skip credential-related inputs (these are inherited from block-level auth)
+    const lowerKey = key.toLowerCase()
+    if (lowerKey.includes('token') || lowerKey.includes('credential') || lowerKey.includes('apikey')) {
+      continue
+    }
+
+    const input: any = {
+      name: key,
+      type: (inputDef as any)?.type || 'string',
+      description: (inputDef as any)?.description,
+    }
+
+    if ((inputDef as any)?.enum) {
+      input.options = (inputDef as any).enum
+    }
+
+    if ((inputDef as any)?.default !== undefined) {
+      input.default = (inputDef as any).default
+    }
+
+    if ((inputDef as any)?.example !== undefined) {
+      input.example = (inputDef as any).example
+    }
+
+    if ((inputDef as any)?.required) {
+      required.push(input)
+    } else {
+      optional.push(input)
+    }
+  }
+
+  return { required, optional }
+}
+
+function extractOutputs(metadata: CopilotBlockMetadata): any[] {
+  const outputs: any[] = []
+
+  // Use block's defined outputs if available
+  if (metadata.outputs && Object.keys(metadata.outputs).length > 0) {
+    return formatOutputsFromDefinition(metadata.outputs)
+  }
+
+  // If block has operations, use the first operation's outputs as representative
+  if (metadata.operations && Object.keys(metadata.operations).length > 0) {
+    const firstOp = Object.values(metadata.operations)[0]
+    return formatOutputsFromDefinition(firstOp.outputs || {})
+  }
+
+  return outputs
+}
+
+function formatOutputsFromDefinition(outputDefs: Record<string, any>): any[] {
+  const outputs: any[] = []
+
+  for (const [key, def] of Object.entries(outputDefs)) {
+    const output: any = {
+      name: key,
+      type: typeof def === 'string' ? def : (def?.type || 'any'),
+    }
+
+    if (typeof def === 'object') {
+      if (def.description) output.description = def.description
+      if (def.example) output.example = def.example
+    }
+
+    outputs.push(output)
+  }
+
+  return outputs
+}
+
+function mapSchemaTypeToSimpleType(schemaType: string, schema: CopilotSubblockMetadata): string {
+  const typeMap: Record<string, string> = {
+    'short-input': 'string',
+    'long-input': 'string',
+    'code-input': 'string',
+    'number-input': 'number',
+    'slider': 'number',
+    'dropdown': 'string',
+    'combobox': 'string',
+    'toggle': 'boolean',
+    'json-input': 'json',
+    'file-upload': 'file',
+    'multi-select': 'array',
+    'credential-input': 'credential',
+    'oauth-credential': 'credential',
+  }
+
+  const mappedType = typeMap[schemaType] || schemaType
+
+  // Override with multiSelect
+  if (schema.multiSelect) return 'array'
+
+  return mappedType
+}
+
+function generateInputExample(schema: CopilotSubblockMetadata, inputDef?: any): any {
+  // Return explicit example if available
+  if (inputDef?.example !== undefined) return inputDef.example
+
+  // Generate based on type
+  switch (schema.type) {
+    case 'short-input':
+    case 'long-input':
+      if (schema.id === 'systemPrompt') return 'You are a helpful assistant...'
+      if (schema.id === 'userPrompt') return 'What is the weather today?'
+      if (schema.placeholder) return schema.placeholder
+      return undefined
+    case 'number-input':
+    case 'slider':
+      return schema.defaultValue ?? schema.min ?? 0
+    case 'toggle':
+      return schema.defaultValue ?? false
+    case 'json-input':
+      return schema.defaultValue ?? {}
+    case 'dropdown':
+    case 'combobox':
+      if (schema.options && schema.options.length > 0) {
+        return schema.options[0].id
+      }
+      return undefined
+    default:
+      return undefined
+  }
+}
+
 function processSubBlock(sb: any): CopilotSubblockMetadata {
   // Start with required fields
   const processed: CopilotSubblockMetadata = {
@@ -541,16 +865,41 @@ const SPECIAL_BLOCKS_METADATA: Record<string, any> = {
     - For yaml it needs to connect blocks inside to the start field of the block.
     `,
     inputs: {
-      loopType: { type: 'string', required: true, enum: ['for', 'forEach'] },
-      iterations: { type: 'number', required: false, minimum: 1, maximum: 1000 },
-      collection: { type: 'string', required: false },
-      maxConcurrency: { type: 'number', required: false, default: 1, minimum: 1, maximum: 10 },
+      loopType: {
+        type: 'string',
+        required: true,
+        enum: ['for', 'forEach'],
+        description: "Loop Type - 'for' runs N times, 'forEach' iterates over collection",
+      },
+      iterations: {
+        type: 'number',
+        required: false,
+        minimum: 1,
+        maximum: 1000,
+        description: "Number of iterations (for 'for' loopType)",
+        example: 5,
+      },
+      collection: {
+        type: 'string',
+        required: false,
+        description: "Collection to iterate over (for 'forEach' loopType)",
+        example: '<previousblock.items>',
+      },
+      maxConcurrency: {
+        type: 'number',
+        required: false,
+        default: 1,
+        minimum: 1,
+        maximum: 10,
+        description: 'Max parallel executions (1 = sequential)',
+        example: 1,
+      },
     },
     outputs: {
-      results: 'array',
-      currentIndex: 'number',
-      currentItem: 'any',
-      totalIterations: 'number',
+      results: { type: 'array', description: 'Array of results from each iteration' },
+      currentIndex: { type: 'number', description: 'Current iteration index (0-based)' },
+      currentItem: { type: 'any', description: 'Current item being iterated (for forEach loops)' },
+      totalIterations: { type: 'number', description: 'Total number of iterations' },
     },
     subBlocks: [
       {
@@ -602,12 +951,42 @@ const SPECIAL_BLOCKS_METADATA: Record<string, any> = {
     - For yaml it needs to connect blocks inside to the start field of the block.
     `,
     inputs: {
-      parallelType: { type: 'string', required: true, enum: ['count', 'collection'] },
-      count: { type: 'number', required: false, minimum: 1, maximum: 100 },
-      collection: { type: 'string', required: false },
-      maxConcurrency: { type: 'number', required: false, default: 10, minimum: 1, maximum: 50 },
+      parallelType: {
+        type: 'string',
+        required: true,
+        enum: ['count', 'collection'],
+        description: "Parallel Type - 'count' runs N branches, 'collection' runs one per item",
+      },
+      count: {
+        type: 'number',
+        required: false,
+        minimum: 1,
+        maximum: 100,
+        description: "Number of parallel branches (for 'count' type)",
+        example: 3,
+      },
+      collection: {
+        type: 'string',
+        required: false,
+        description: "Collection to process in parallel (for 'collection' type)",
+        example: '<previousblock.items>',
+      },
+      maxConcurrency: {
+        type: 'number',
+        required: false,
+        default: 10,
+        minimum: 1,
+        maximum: 50,
+        description: 'Max concurrent executions at once',
+        example: 10,
+      },
+    },
+    outputs: {
+      results: { type: 'array', description: 'Array of results from all parallel branches' },
+      branchId: { type: 'number', description: 'Current branch ID (0-based)' },
+      branchItem: { type: 'any', description: 'Current item for this branch (for collection type)' },
+      totalBranches: { type: 'number', description: 'Total number of parallel branches' },
     },
-    outputs: { results: 'array', branchId: 'number', branchItem: 'any', totalBranches: 'number' },
     subBlocks: [
       {
         id: 'parallelType',

From f229cf9f9f3f1be7364bf64077332a1ce5fc3656 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 17 Oct 2025 14:44:14 -0700
Subject: [PATCH 21/28] Update update cost route

---
 apps/sim/app/api/billing/update-cost/route.ts | 78 +++----------------
 apps/sim/app/api/copilot/chat/route.ts        | 20 ++---
 apps/sim/lib/environment.ts                   |  8 +-
 3 files changed, 23 insertions(+), 83 deletions(-)

diff --git a/apps/sim/app/api/billing/update-cost/route.ts b/apps/sim/app/api/billing/update-cost/route.ts
index 418691a97ba..0b8a0048e66 100644
--- a/apps/sim/app/api/billing/update-cost/route.ts
+++ b/apps/sim/app/api/billing/update-cost/route.ts
@@ -8,22 +8,17 @@ import { checkInternalApiKey } from '@/lib/copilot/utils'
 import { isBillingEnabled } from '@/lib/environment'
 import { createLogger } from '@/lib/logs/console/logger'
 import { generateRequestId } from '@/lib/utils'
-import { calculateCost } from '@/providers/utils'
 
 const logger = createLogger('BillingUpdateCostAPI')
 
 const UpdateCostSchema = z.object({
   userId: z.string().min(1, 'User ID is required'),
-  input: z.number().min(0, 'Input tokens must be a non-negative number'),
-  output: z.number().min(0, 'Output tokens must be a non-negative number'),
-  model: z.string().min(1, 'Model is required'),
-  inputMultiplier: z.number().min(0),
-  outputMultiplier: z.number().min(0),
+  cost: z.number().min(0, 'Cost must be a non-negative number'),
 })
 
 /**
  * POST /api/billing/update-cost
- * Update user cost based on token usage with internal API key auth
+ * Update user cost with a pre-calculated cost value (internal API key auth required)
  */
 export async function POST(req: NextRequest) {
   const requestId = generateRequestId()
@@ -77,45 +72,13 @@ export async function POST(req: NextRequest) {
       )
     }
 
-    const { userId, input, output, model, inputMultiplier, outputMultiplier } = validation.data
+    const { userId, cost } = validation.data
 
     logger.info(`[${requestId}] Processing cost update`, {
       userId,
-      input,
-      output,
-      model,
-      inputMultiplier,
-      outputMultiplier,
+      cost,
     })
 
-    const finalPromptTokens = input
-    const finalCompletionTokens = output
-    const totalTokens = input + output
-
-    // Calculate cost using provided multiplier (required)
-    const costResult = calculateCost(
-      model,
-      finalPromptTokens,
-      finalCompletionTokens,
-      false,
-      inputMultiplier,
-      outputMultiplier
-    )
-
-    logger.info(`[${requestId}] Cost calculation result`, {
-      userId,
-      model,
-      promptTokens: finalPromptTokens,
-      completionTokens: finalCompletionTokens,
-      totalTokens: totalTokens,
-      inputMultiplier,
-      outputMultiplier,
-      costResult,
-    })
-
-    // Follow the exact same logic as ExecutionLogger.updateUserStats but with direct userId
-    const costToStore = costResult.total // No additional multiplier needed since calculateCost already applied it
-
     // Check if user stats record exists (same as ExecutionLogger)
     const userStatsRecords = await db.select().from(userStats).where(eq(userStats.userId, userId))
 
@@ -128,16 +91,13 @@ export async function POST(req: NextRequest) {
       )
       return NextResponse.json({ error: 'User stats record not found' }, { status: 500 })
     }
-    // Update existing user stats record (same logic as ExecutionLogger)
+    // Update existing user stats record
     const updateFields = {
-      totalTokensUsed: sql`total_tokens_used + ${totalTokens}`,
-      totalCost: sql`total_cost + ${costToStore}`,
-      currentPeriodCost: sql`current_period_cost + ${costToStore}`,
+      totalCost: sql`total_cost + ${cost}`,
+      currentPeriodCost: sql`current_period_cost + ${cost}`,
       // Copilot usage tracking increments
-      totalCopilotCost: sql`total_copilot_cost + ${costToStore}`,
-      totalCopilotTokens: sql`total_copilot_tokens + ${totalTokens}`,
+      totalCopilotCost: sql`total_copilot_cost + ${cost}`,
       totalCopilotCalls: sql`total_copilot_calls + 1`,
-      totalApiCalls: sql`total_api_calls`,
       lastActive: new Date(),
     }
 
@@ -145,8 +105,7 @@ export async function POST(req: NextRequest) {
 
     logger.info(`[${requestId}] Updated user stats record`, {
       userId,
-      addedCost: costToStore,
-      addedTokens: totalTokens,
+      addedCost: cost,
     })
 
     // Check if user has hit overage threshold and bill incrementally
@@ -157,29 +116,14 @@ export async function POST(req: NextRequest) {
     logger.info(`[${requestId}] Cost update completed successfully`, {
       userId,
       duration,
-      cost: costResult.total,
-      totalTokens,
+      cost,
     })
 
     return NextResponse.json({
       success: true,
       data: {
         userId,
-        input,
-        output,
-        totalTokens,
-        model,
-        cost: {
-          input: costResult.input,
-          output: costResult.output,
-          total: costResult.total,
-        },
-        tokenBreakdown: {
-          prompt: finalPromptTokens,
-          completion: finalCompletionTokens,
-          total: totalTokens,
-        },
-        pricing: costResult.pricing,
+        cost,
         processedAt: new Date().toISOString(),
         requestId,
       },
diff --git a/apps/sim/app/api/copilot/chat/route.ts b/apps/sim/app/api/copilot/chat/route.ts
index cfa9025f2bc..ce9589981cf 100644
--- a/apps/sim/app/api/copilot/chat/route.ts
+++ b/apps/sim/app/api/copilot/chat/route.ts
@@ -357,18 +357,12 @@ export async function POST(req: NextRequest) {
       }
     }
 
-    // Determine provider and conversationId to use for this request
+    // Determine conversationId to use for this request
     const effectiveConversationId =
       (currentChat?.conversationId as string | undefined) || conversationId
 
-    // If we have a conversationId, only send the most recent user message; else send full history
-    const latestUserMessage =
-      [...messages].reverse().find((m) => m?.role === 'user') || messages[messages.length - 1]
-    const messagesForAgent = effectiveConversationId ? [latestUserMessage] : messages
-
     const requestPayload = {
-      messages: messagesForAgent,
-      chatMessages: messages, // Full unfiltered messages array
+      message: message, // Just send the current user message text
       workflowId,
       userId: authenticatedUserId,
       stream: stream,
@@ -383,14 +377,16 @@ export async function POST(req: NextRequest) {
       ...(session?.user?.name && { userName: session.user.name }),
       ...(agentContexts.length > 0 && { context: agentContexts }),
       ...(actualChatId ? { chatId: actualChatId } : {}),
+      ...(processedFileContents.length > 0 && { fileAttachments: processedFileContents }),
     }
 
     try {
-      logger.info(`[${tracker.requestId}] About to call Sim Agent with context`, {
-        context: (requestPayload as any).context,
-        messagesCount: messagesForAgent.length,
-        chatMessagesCount: messages.length,
+      logger.info(`[${tracker.requestId}] About to call Sim Agent`, {
+        hasContext: agentContexts.length > 0,
+        contextCount: agentContexts.length,
         hasConversationId: !!effectiveConversationId,
+        hasFileAttachments: processedFileContents.length > 0,
+        messageLength: message.length,
       })
     } catch {}
 
diff --git a/apps/sim/lib/environment.ts b/apps/sim/lib/environment.ts
index 835f54c8bc1..e7896fa9edf 100644
--- a/apps/sim/lib/environment.ts
+++ b/apps/sim/lib/environment.ts
@@ -21,14 +21,14 @@ export const isTest = env.NODE_ENV === 'test'
 /**
  * Is this the hosted version of the application
  */
-export const isHosted =
-  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
-  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
+export const isHosted = true
+  // getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
+  // getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
 
 /**
  * Is billing enforcement enabled
  */
-export const isBillingEnabled = isTruthy(env.BILLING_ENABLED)
+export const isBillingEnabled = true // isTruthy(env.BILLING_ENABLED)
 
 /**
  * Is email verification enabled

From c4a80aeddd39c531bf18f0906323672a383c58cb Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 17 Oct 2025 14:44:38 -0700
Subject: [PATCH 22/28] Fix env

---
 apps/sim/lib/environment.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/sim/lib/environment.ts b/apps/sim/lib/environment.ts
index e7896fa9edf..835f54c8bc1 100644
--- a/apps/sim/lib/environment.ts
+++ b/apps/sim/lib/environment.ts
@@ -21,14 +21,14 @@ export const isTest = env.NODE_ENV === 'test'
 /**
  * Is this the hosted version of the application
  */
-export const isHosted = true
-  // getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
-  // getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
+export const isHosted =
+  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
+  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
 
 /**
  * Is billing enforcement enabled
  */
-export const isBillingEnabled = true // isTruthy(env.BILLING_ENABLED)
+export const isBillingEnabled = isTruthy(env.BILLING_ENABLED)
 
 /**
  * Is email verification enabled

From 162a0b38220321d43f5cdf680741d245163d5f60 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 17 Oct 2025 15:12:07 -0700
Subject: [PATCH 23/28] Context usage endpoint

---
 apps/sim/app/api/copilot/chat/route.ts        |   3 -
 .../app/api/copilot/context-usage/route.ts    | 127 ++++++++++++++++++
 .../panel/components/copilot/copilot.tsx      |  12 ++
 apps/sim/stores/copilot/store.ts              | 103 +++++++++++---
 apps/sim/stores/copilot/types.ts              |   3 +-
 5 files changed, 224 insertions(+), 24 deletions(-)
 create mode 100644 apps/sim/app/api/copilot/context-usage/route.ts

diff --git a/apps/sim/app/api/copilot/chat/route.ts b/apps/sim/app/api/copilot/chat/route.ts
index ce9589981cf..6617566a7d0 100644
--- a/apps/sim/app/api/copilot/chat/route.ts
+++ b/apps/sim/app/api/copilot/chat/route.ts
@@ -460,8 +460,6 @@ 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)
@@ -593,7 +591,6 @@ export async function POST(req: NextRequest) {
                             lastSafeDoneResponseId = responseIdFromDone
                           }
                         }
-                        // Note: context_usage events are forwarded from sim-agent
                         break
 
                       case 'error':
diff --git a/apps/sim/app/api/copilot/context-usage/route.ts b/apps/sim/app/api/copilot/context-usage/route.ts
new file mode 100644
index 00000000000..5ffbbf25067
--- /dev/null
+++ b/apps/sim/app/api/copilot/context-usage/route.ts
@@ -0,0 +1,127 @@
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { getCopilotModel } from '@/lib/copilot/config'
+import type { CopilotProviderConfig } from '@/lib/copilot/types'
+import { env } from '@/lib/env'
+import { createLogger } from '@/lib/logs/console/logger'
+import { SIM_AGENT_API_URL_DEFAULT } from '@/lib/sim-agent/constants'
+
+const logger = createLogger('ContextUsageAPI')
+
+const SIM_AGENT_API_URL = env.SIM_AGENT_API_URL || SIM_AGENT_API_URL_DEFAULT
+
+const ContextUsageRequestSchema = z.object({
+  chatId: z.string(),
+  model: z.string(),
+  workflowId: z.string(),
+  provider: z.any().optional(),
+})
+
+/**
+ * POST /api/copilot/context-usage
+ * Fetch context usage from sim-agent API
+ */
+export async function POST(req: NextRequest) {
+  try {
+    logger.info('[Context Usage API] Request received')
+
+    const session = await getSession()
+    if (!session?.user?.id) {
+      logger.warn('[Context Usage API] No session/user ID')
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await req.json()
+    logger.info('[Context Usage API] Request body', body)
+
+    const parsed = ContextUsageRequestSchema.safeParse(body)
+
+    if (!parsed.success) {
+      logger.warn('[Context Usage API] Invalid request body', parsed.error.errors)
+      return NextResponse.json(
+        { error: 'Invalid request body', details: parsed.error.errors },
+        { status: 400 }
+      )
+    }
+
+    const { chatId, model, workflowId, provider } = parsed.data
+    const userId = session.user.id // Get userId from session, not from request
+
+    logger.info('[Context Usage API] Request validated', { chatId, model, userId, workflowId })
+
+    // Build provider config similar to chat route
+    let providerConfig: CopilotProviderConfig | undefined = provider
+    if (!providerConfig) {
+      const defaults = getCopilotModel('chat')
+      const modelToUse = env.COPILOT_MODEL || defaults.model
+      const providerEnv = env.COPILOT_PROVIDER as any
+
+      if (providerEnv) {
+        if (providerEnv === 'azure-openai') {
+          providerConfig = {
+            provider: 'azure-openai',
+            model: modelToUse,
+            apiKey: env.AZURE_OPENAI_API_KEY,
+            apiVersion: env.AZURE_OPENAI_API_VERSION,
+            endpoint: env.AZURE_OPENAI_ENDPOINT,
+          }
+        } else {
+          providerConfig = {
+            provider: providerEnv,
+            model: modelToUse,
+            apiKey: env.COPILOT_API_KEY,
+          }
+        }
+      }
+    }
+
+    // Call sim-agent API
+    const requestPayload = {
+      chatId,
+      model,
+      userId,
+      workflowId,
+      ...(providerConfig ? { provider: providerConfig } : {}),
+    }
+
+    logger.info('[Context Usage API] Calling sim-agent', {
+      url: `${SIM_AGENT_API_URL}/api/get-context-usage`,
+      payload: requestPayload,
+    })
+
+    const simAgentResponse = await fetch(`${SIM_AGENT_API_URL}/api/get-context-usage`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(env.COPILOT_API_KEY ? { 'x-api-key': env.COPILOT_API_KEY } : {}),
+      },
+      body: JSON.stringify(requestPayload),
+    })
+
+    logger.info('[Context Usage API] Sim-agent response', {
+      status: simAgentResponse.status,
+      ok: simAgentResponse.ok,
+    })
+
+    if (!simAgentResponse.ok) {
+      const errorText = await simAgentResponse.text().catch(() => '')
+      logger.warn('[Context Usage API] Sim agent request failed', {
+        status: simAgentResponse.status,
+        error: errorText,
+      })
+      return NextResponse.json(
+        { error: 'Failed to fetch context usage from sim-agent' },
+        { status: simAgentResponse.status }
+      )
+    }
+
+    const data = await simAgentResponse.json()
+    logger.info('[Context Usage API] Sim-agent data received', data)
+    return NextResponse.json(data)
+  } catch (error) {
+    logger.error('Error fetching context usage:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 35158b30811..25ae4508265 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -95,6 +95,8 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
     selectedModel,
     setSelectedModel,
     messageCheckpoints,
+    currentChat,
+    fetchContextUsage,
   } = useCopilotStore()
 
   // Load user's enabled models on mount
@@ -201,6 +203,16 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
     }
   }, [activeWorkflowId, isLoadingChats, chatsLoadedForWorkflow, isInitialized])
 
+  // Fetch context usage when component is initialized and has a current chat
+  useEffect(() => {
+    if (isInitialized && currentChat?.id && activeWorkflowId) {
+      logger.info('[Copilot] Component initialized, fetching context usage')
+      fetchContextUsage().catch((err) => {
+        logger.warn('[Copilot] Failed to fetch context usage on mount', err)
+      })
+    }
+  }, [isInitialized, currentChat?.id, activeWorkflowId, fetchContextUsage])
+
   // Clear any existing preview when component mounts or workflow changes
   useEffect(() => {
     // Preview clearing is now handled automatically by the copilot store
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 5d13b8fad28..99fa027cfd7 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -1167,25 +1167,6 @@ 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: () => {},
 }
 
@@ -1424,10 +1405,14 @@ export const useCopilotStore = create<CopilotStore>()(
               chats: (get().chats || []).map((c: CopilotChat) =>
                 c.id === chat.id ? latestChat : c
               ),
+              contextUsage: null,
             })
             try {
               await get().loadMessageCheckpoints(latestChat.id)
             } catch {}
+            // Fetch context usage for the selected chat
+            logger.info('[Context Usage] Chat selected, fetching usage')
+            await get().fetchContextUsage()
           }
         }
       } catch {}
@@ -1457,6 +1442,7 @@ export const useCopilotStore = create<CopilotStore>()(
         }
       } catch {}
 
+      logger.info('[Context Usage] New chat created, clearing context usage')
       set({
         currentChat: null,
         messages: [],
@@ -2164,6 +2150,10 @@ export const useCopilotStore = create<CopilotStore>()(
         try {
           // Removed: stats sending now occurs only on accept/reject with minimal payload
         } catch {}
+
+        // Fetch context usage after response completes
+        logger.info('[Context Usage] Stream completed, fetching usage')
+        await get().fetchContextUsage()
       } finally {
         clearTimeout(timeoutId)
       }
@@ -2247,9 +2237,82 @@ export const useCopilotStore = create<CopilotStore>()(
     updateDiffStore: async (_yamlContent: string) => {},
     updateDiffStoreWithWorkflowState: async (_workflowState: any) => {},
 
-    setSelectedModel: (model) => set({ selectedModel: model }),
+    setSelectedModel: async (model) => {
+      logger.info('[Context Usage] Model changed', { from: get().selectedModel, to: model })
+      set({ selectedModel: model })
+      // Fetch context usage after model switch
+      await get().fetchContextUsage()
+    },
     setAgentPrefetch: (prefetch) => set({ agentPrefetch: prefetch }),
     setEnabledModels: (models) => set({ enabledModels: models }),
+
+    // Fetch context usage from sim-agent API
+    fetchContextUsage: async () => {
+      try {
+        const { currentChat, selectedModel, workflowId } = get()
+        logger.info('[Context Usage] Starting fetch', {
+          hasChatId: !!currentChat?.id,
+          hasWorkflowId: !!workflowId,
+          chatId: currentChat?.id,
+          workflowId,
+          model: selectedModel,
+        })
+
+        if (!currentChat?.id || !workflowId) {
+          logger.info('[Context Usage] Skipping: missing chat or workflow', {
+            hasChatId: !!currentChat?.id,
+            hasWorkflowId: !!workflowId,
+          })
+          return
+        }
+
+        const requestPayload = {
+          chatId: currentChat.id,
+          model: selectedModel,
+          workflowId,
+        }
+
+        logger.info('[Context Usage] Calling API', requestPayload)
+
+        // Call the backend API route which proxies to sim-agent
+        const response = await fetch('/api/copilot/context-usage', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(requestPayload),
+        })
+
+        logger.info('[Context Usage] API response', { status: response.status, ok: response.ok })
+
+        if (response.ok) {
+          const data = await response.json()
+          logger.info('[Context Usage] Received data', data)
+
+          // Check for either tokensUsed or usage field
+          if (data.tokensUsed !== undefined || data.usage !== undefined || data.percentage !== undefined) {
+            const contextUsage = {
+              usage: data.tokensUsed || data.usage || 0,
+              percentage: data.percentage || 0,
+              model: data.model || selectedModel,
+              contextWindow: data.contextWindow || data.context_window || 0,
+              when: data.when || 'end',
+              estimatedTokens: data.tokensUsed || data.estimated_tokens || data.estimatedTokens,
+            }
+            set({ contextUsage })
+            logger.info('[Context Usage] Updated store', contextUsage)
+          } else {
+            logger.warn('[Context Usage] No usage data in response', data)
+          }
+        } else {
+          const errorText = await response.text().catch(() => 'Unable to read error')
+          logger.warn('[Context Usage] API call failed', {
+            status: response.status,
+            error: errorText,
+          })
+        }
+      } catch (err) {
+        logger.error('[Context Usage] Error fetching:', err)
+      }
+    },
   }))
 )
 
diff --git a/apps/sim/stores/copilot/types.ts b/apps/sim/stores/copilot/types.ts
index b7b27f5625c..f615dd6d211 100644
--- a/apps/sim/stores/copilot/types.ts
+++ b/apps/sim/stores/copilot/types.ts
@@ -139,9 +139,10 @@ export interface CopilotState {
 
 export interface CopilotActions {
   setMode: (mode: CopilotMode) => void
-  setSelectedModel: (model: CopilotStore['selectedModel']) => void
+  setSelectedModel: (model: CopilotStore['selectedModel']) => Promise<void>
   setAgentPrefetch: (prefetch: boolean) => void
   setEnabledModels: (models: string[] | null) => void
+  fetchContextUsage: () => Promise<void>
 
   setWorkflowId: (workflowId: string | null) => Promise<void>
   validateCurrentChat: () => boolean

From fdcbe2eca02d202e09a0604c7c34ab2d50c4847d Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 17 Oct 2025 15:15:10 -0700
Subject: [PATCH 24/28] Make chat history scrollable

---
 .../w/[workflowId]/components/panel/panel.tsx             | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 2bfef8525bf..540179876a9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -441,13 +441,13 @@ export function Panel() {
                       collisionPadding={8}
                     >
                       {isLoadingChats ? (
-                        <ScrollArea className='max-h-[320px]' hideScrollbar={true}>
+                        <div className='max-h-[280px] overflow-y-auto'>
                           <ChatHistorySkeleton />
-                        </ScrollArea>
+                        </div>
                       ) : groupedChats.length === 0 ? (
                         <div className='px-2 py-6 text-center text-muted-foreground text-sm'>No chats yet</div>
                       ) : (
-                        <ScrollArea className='max-h-[320px]' hideScrollbar={true}>
+                        <div className='max-h-[280px] overflow-y-auto'>
                           {groupedChats.map(([groupName, chats], groupIndex) => (
                             <div key={groupName}>
                               <div
@@ -560,7 +560,7 @@ export function Panel() {
                               </div>
                             </div>
                           ))}
-                        </ScrollArea>
+                        </div>
                       )}
                     </DropdownMenuContent>
                   </DropdownMenu>

From 960107b524b27ada65c532c5f8734e7afd4e0f16 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 17 Oct 2025 15:16:09 -0700
Subject: [PATCH 25/28] Fix lint

---
 apps/sim/app/api/copilot/chat/delete/route.ts |  1 -
 .../api/copilot/chat/update-title/route.ts    |  1 -
 .../app/api/copilot/context-usage/route.ts    |  1 -
 .../copilot-message/copilot-message.tsx       |  2 +-
 .../w/[workflowId]/components/panel/panel.tsx | 23 ++++---
 .../server/blocks/get-blocks-metadata-tool.ts | 69 ++++++++++++-------
 apps/sim/stores/copilot/store.ts              |  6 +-
 7 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/apps/sim/app/api/copilot/chat/delete/route.ts b/apps/sim/app/api/copilot/chat/delete/route.ts
index 1f24980657c..203a2b5c6d8 100644
--- a/apps/sim/app/api/copilot/chat/delete/route.ts
+++ b/apps/sim/app/api/copilot/chat/delete/route.ts
@@ -33,4 +33,3 @@ export async function DELETE(request: NextRequest) {
     return NextResponse.json({ success: false, error: 'Failed to delete chat' }, { status: 500 })
   }
 }
-
diff --git a/apps/sim/app/api/copilot/chat/update-title/route.ts b/apps/sim/app/api/copilot/chat/update-title/route.ts
index 4fe6bd93da5..bb5603a7dc0 100644
--- a/apps/sim/app/api/copilot/chat/update-title/route.ts
+++ b/apps/sim/app/api/copilot/chat/update-title/route.ts
@@ -43,4 +43,3 @@ export async function POST(request: NextRequest) {
     )
   }
 }
-
diff --git a/apps/sim/app/api/copilot/context-usage/route.ts b/apps/sim/app/api/copilot/context-usage/route.ts
index 5ffbbf25067..fdac63b8361 100644
--- a/apps/sim/app/api/copilot/context-usage/route.ts
+++ b/apps/sim/app/api/copilot/context-usage/route.ts
@@ -124,4 +124,3 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
-
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index be61623e2b4..18eeaacbf5e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -961,7 +961,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
                 {/* Abort button when hovering and response is generating (only on last user message) */}
                 {isSendingMessage && isHoveringMessage && isLastUserMessage && (
-                  <div className='absolute bottom-2 right-2'>
+                  <div className='absolute right-2 bottom-2'>
                     <button
                       onClick={(e) => {
                         e.stopPropagation()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 540179876a9..72f1d0ad130 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -7,7 +7,6 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { LandingPromptStorage } from '@/lib/browser-storage'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -445,7 +444,9 @@ export function Panel() {
                           <ChatHistorySkeleton />
                         </div>
                       ) : groupedChats.length === 0 ? (
-                        <div className='px-2 py-6 text-center text-muted-foreground text-sm'>No chats yet</div>
+                        <div className='px-2 py-6 text-center text-muted-foreground text-sm'>
+                          No chats yet
+                        </div>
                       ) : (
                         <div className='max-h-[280px] overflow-y-auto'>
                           {groupedChats.map(([groupName, chats], groupIndex) => (
@@ -462,7 +463,7 @@ export function Panel() {
                                     className={`group relative flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors ${
                                       currentChat?.id === chat.id
                                         ? 'bg-accent text-accent-foreground'
-                                        : 'hover:bg-accent/50 text-foreground'
+                                        : 'text-foreground hover:bg-accent/50'
                                     }`}
                                   >
                                     {editingChatId === chat.id ? (
@@ -473,17 +474,18 @@ export function Panel() {
                                         onKeyDown={async (e) => {
                                           if (e.key === 'Enter') {
                                             e.preventDefault()
-                                            const newTitle = editingChatTitle.trim() || 'Untitled Chat'
-                                            
+                                            const newTitle =
+                                              editingChatTitle.trim() || 'Untitled Chat'
+
                                             // Update optimistically in store first
                                             const updatedChats = chats.map((c) =>
                                               c.id === chat.id ? { ...c, title: newTitle } : c
                                             )
                                             useCopilotStore.setState({ chats: updatedChats })
-                                            
+
                                             // Exit edit mode immediately
                                             setEditingChatId(null)
-                                            
+
                                             // Save to database in background
                                             try {
                                               await fetch('/api/copilot/chat/update-title', {
@@ -504,7 +506,6 @@ export function Panel() {
                                           }
                                         }}
                                         onBlur={() => setEditingChatId(null)}
-                                        autoFocus
                                         className='min-w-0 flex-1 rounded border-none bg-transparent px-0 text-sm outline-none focus:outline-none'
                                       />
                                     ) : (
@@ -536,13 +537,13 @@ export function Panel() {
                                           <button
                                             onClick={async (e) => {
                                               e.stopPropagation()
-                                              
+
                                               // Check if deleting current chat
                                               const isDeletingCurrent = currentChat?.id === chat.id
-                                              
+
                                               // Delete the chat (optimistic update happens in store)
                                               await handleDeleteChat(chat.id)
-                                              
+
                                               // If deleted current chat, create new one
                                               if (isDeletingCurrent) {
                                                 copilotRef.current?.createNewChat()
diff --git a/apps/sim/lib/copilot/tools/server/blocks/get-blocks-metadata-tool.ts b/apps/sim/lib/copilot/tools/server/blocks/get-blocks-metadata-tool.ts
index 6435dc570cb..9038b53df55 100644
--- a/apps/sim/lib/copilot/tools/server/blocks/get-blocks-metadata-tool.ts
+++ b/apps/sim/lib/copilot/tools/server/blocks/get-blocks-metadata-tool.ts
@@ -264,7 +264,7 @@ function transformBlockMetadata(metadata: CopilotBlockMetadata): any {
   // Add auth type and required credentials if available
   if (metadata.authType) {
     transformed.authType = metadata.authType
-    
+
     // Add credential requirements based on auth type
     if (metadata.authType === 'OAuth') {
       transformed.requiredCredentials = {
@@ -295,15 +295,18 @@ function transformBlockMetadata(metadata: CopilotBlockMetadata): any {
   const hasOperations = metadata.operations && Object.keys(metadata.operations).length > 0
   if (hasOperations && metadata.operations) {
     const blockLevelInputs = new Set(Object.keys(metadata.inputDefinitions || {}))
-    transformed.operations = Object.entries(metadata.operations).reduce((acc, [opId, opData]) => {
-      acc[opId] = {
-        name: opData.toolName || opId,
-        description: opData.description,
-        inputs: extractOperationInputs(opData, blockLevelInputs),
-        outputs: formatOutputsFromDefinition(opData.outputs || {}),
-      }
-      return acc
-    }, {} as Record<string, any>)
+    transformed.operations = Object.entries(metadata.operations).reduce(
+      (acc, [opId, opData]) => {
+        acc[opId] = {
+          name: opData.toolName || opId,
+          description: opData.description,
+          inputs: extractOperationInputs(opData, blockLevelInputs),
+          outputs: formatOutputsFromDefinition(opData.outputs || {}),
+        }
+        return acc
+      },
+      {} as Record<string, any>
+    )
   }
 
   // Process outputs - only show at block level if there are NO operations
@@ -321,7 +324,7 @@ function transformBlockMetadata(metadata: CopilotBlockMetadata): any {
 
   // Add triggers if present
   if (metadata.triggers && metadata.triggers.length > 0) {
-    transformed.triggers = metadata.triggers.map(t => ({
+    transformed.triggers = metadata.triggers.map((t) => ({
       id: t.id,
       outputs: formatOutputsFromDefinition(t.outputs || {}),
     }))
@@ -346,23 +349,27 @@ function extractInputs(metadata: CopilotBlockMetadata): {
   // Process inputSchema to get UI-level input information
   for (const schema of metadata.inputSchema || []) {
     // Skip credential inputs (handled by requiredCredentials)
-    if (schema.type === 'oauth-credential' || schema.type === 'credential-input' || schema.type === 'oauth-input') {
+    if (
+      schema.type === 'oauth-credential' ||
+      schema.type === 'credential-input' ||
+      schema.type === 'oauth-input'
+    ) {
       continue
     }
-    
+
     // Skip trigger config (only relevant when setting up triggers)
     if (schema.id === 'triggerConfig' || schema.type === 'trigger-config') {
       continue
     }
 
     const inputDef = inputDefs[schema.id] || inputDefs[schema.canonicalParamId || '']
-    
+
     // For operation field, provide a clearer description
     let description = schema.description || inputDef?.description || schema.title
     if (schema.id === 'operation') {
       description = 'Operation to perform'
     }
-    
+
     const input: any = {
       name: schema.id,
       type: mapSchemaTypeToSimpleType(schema.type, schema),
@@ -373,9 +380,9 @@ function extractInputs(metadata: CopilotBlockMetadata): {
     // For operation field, use IDs instead of labels for clarity
     if (schema.options && schema.options.length > 0) {
       if (schema.id === 'operation') {
-        input.options = schema.options.map(opt => opt.id)
+        input.options = schema.options.map((opt) => opt.id)
       } else {
-        input.options = schema.options.map(opt => opt.label || opt.id)
+        input.options = schema.options.map((opt) => opt.label || opt.id)
       }
     }
 
@@ -408,9 +415,12 @@ function extractInputs(metadata: CopilotBlockMetadata): {
 
     // Determine if required
     // For blocks with operations, the operation field is always required
-    const isOperationField = schema.id === 'operation' && metadata.operations && Object.keys(metadata.operations).length > 0
+    const isOperationField =
+      schema.id === 'operation' &&
+      metadata.operations &&
+      Object.keys(metadata.operations).length > 0
     const isRequired = schema.required || inputDef?.required || isOperationField
-    
+
     if (isRequired) {
       required.push(input)
     } else {
@@ -440,7 +450,11 @@ function extractOperationInputs(
 
     // Skip credential-related inputs (these are inherited from block-level auth)
     const lowerKey = key.toLowerCase()
-    if (lowerKey.includes('token') || lowerKey.includes('credential') || lowerKey.includes('apikey')) {
+    if (
+      lowerKey.includes('token') ||
+      lowerKey.includes('credential') ||
+      lowerKey.includes('apikey')
+    ) {
       continue
     }
 
@@ -495,7 +509,7 @@ function formatOutputsFromDefinition(outputDefs: Record<string, any>): any[] {
   for (const [key, def] of Object.entries(outputDefs)) {
     const output: any = {
       name: key,
-      type: typeof def === 'string' ? def : (def?.type || 'any'),
+      type: typeof def === 'string' ? def : def?.type || 'any',
     }
 
     if (typeof def === 'object') {
@@ -515,10 +529,10 @@ function mapSchemaTypeToSimpleType(schemaType: string, schema: CopilotSubblockMe
     'long-input': 'string',
     'code-input': 'string',
     'number-input': 'number',
-    'slider': 'number',
-    'dropdown': 'string',
-    'combobox': 'string',
-    'toggle': 'boolean',
+    slider: 'number',
+    dropdown: 'string',
+    combobox: 'string',
+    toggle: 'boolean',
     'json-input': 'json',
     'file-upload': 'file',
     'multi-select': 'array',
@@ -984,7 +998,10 @@ const SPECIAL_BLOCKS_METADATA: Record<string, any> = {
     outputs: {
       results: { type: 'array', description: 'Array of results from all parallel branches' },
       branchId: { type: 'number', description: 'Current branch ID (0-based)' },
-      branchItem: { type: 'any', description: 'Current item for this branch (for collection type)' },
+      branchItem: {
+        type: 'any',
+        description: 'Current item for this branch (for collection type)',
+      },
       totalBranches: { type: 'number', description: 'Total number of parallel branches' },
     },
     subBlocks: [
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 99fa027cfd7..dc851e82e75 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -2288,7 +2288,11 @@ export const useCopilotStore = create<CopilotStore>()(
           logger.info('[Context Usage] Received data', data)
 
           // Check for either tokensUsed or usage field
-          if (data.tokensUsed !== undefined || data.usage !== undefined || data.percentage !== undefined) {
+          if (
+            data.tokensUsed !== undefined ||
+            data.usage !== undefined ||
+            data.percentage !== undefined
+          ) {
             const contextUsage = {
               usage: data.tokensUsed || data.usage || 0,
               percentage: data.percentage || 0,

From 16efb15f0a5c3ad01a56e050798b017ef8811d91 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 17 Oct 2025 16:22:06 -0700
Subject: [PATCH 26/28] Copilot revert popup updates

---
 .../copilot-message/copilot-message.tsx       | 28 ++++++++++++-------
 apps/sim/stores/copilot/store.ts              |  8 ++++++
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 18eeaacbf5e..40c434f81ee 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -8,6 +8,7 @@ import {
   Box,
   Check,
   Clipboard,
+  CornerDownLeft,
   Info,
   LibraryBig,
   RotateCcw,
@@ -506,7 +507,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       }
     }, [showDownvoteSuccess])
 
-    // Handle Escape key to close restore confirmation
+    // Handle Escape and Enter keys for restore confirmation
     useEffect(() => {
       if (!showRestoreConfirmation) return
 
@@ -514,12 +515,15 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         if (event.key === 'Escape') {
           setShowRestoreConfirmation(false)
           onRevertModeChange?.(false)
+        } else if (event.key === 'Enter') {
+          event.preventDefault()
+          handleConfirmRevert()
         }
       }
 
       document.addEventListener('keydown', handleKeyDown)
       return () => document.removeEventListener('keydown', handleKeyDown)
-    }, [showRestoreConfirmation, onRevertModeChange])
+    }, [showRestoreConfirmation, onRevertModeChange, handleConfirmRevert])
 
     // Handle Escape and Enter keys for checkpoint discard confirmation
     useEffect(() => {
@@ -747,9 +751,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                         setShowCheckpointDiscardModal(false)
                         pendingEditRef.current = null
                       }}
-                      className='flex-1 rounded-md border border-gray-300 bg-muted px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/80 dark:border-gray-600 dark:bg-background dark:hover:bg-muted'
+                      className='flex flex-1 items-center justify-center gap-1.5 rounded-md border border-gray-300 bg-muted px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/80 dark:border-gray-600 dark:bg-background dark:hover:bg-muted'
                     >
-                      Cancel
+                      <span>Cancel</span>
+                      <span className='text-[10px] text-muted-foreground'>(Esc)</span>
                     </button>
                     <button
                       onClick={async (e) => {
@@ -805,9 +810,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                           pendingEditRef.current = null
                         }
                       }}
-                      className='flex-1 rounded-md bg-[var(--brand-primary-hover-hex)] px-2 py-1 text-white text-xs transition-colors hover:bg-[var(--brand-primary-hex)]'
+                      className='flex flex-1 items-center justify-center gap-1.5 rounded-md bg-[var(--brand-primary-hover-hex)] px-2 py-1 text-white text-xs transition-colors hover:bg-[var(--brand-primary-hex)]'
                     >
-                      Continue and revert
+                      <span>Continue and revert</span>
+                      <CornerDownLeft className='h-3 w-3' />
                     </button>
                   </div>
                 </div>
@@ -1007,15 +1013,17 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               <div className='flex gap-1.5'>
                 <button
                   onClick={handleCancelRevert}
-                  className='flex-1 rounded-md border border-gray-300 bg-muted px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/80 dark:border-gray-600'
+                  className='flex flex-1 items-center justify-center gap-1.5 rounded-md border border-gray-300 bg-muted px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/80 dark:border-gray-600'
                 >
-                  Cancel
+                  <span>Cancel</span>
+                  <span className='text-[10px] text-muted-foreground'>(Esc)</span>
                 </button>
                 <button
                   onClick={handleConfirmRevert}
-                  className='flex-1 rounded-md bg-red-500 px-2 py-1 text-white text-xs transition-colors hover:bg-red-600'
+                  className='flex flex-1 items-center justify-center gap-1.5 rounded-md bg-red-500 px-2 py-1 text-white text-xs transition-colors hover:bg-red-600'
                 >
-                  Revert
+                  <span>Revert</span>
+                  <CornerDownLeft className='h-3 w-3' />
                 </button>
               </div>
             </div>
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index dc851e82e75..a4fe0b05d9e 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -1738,6 +1738,14 @@ export const useCopilotStore = create<CopilotStore>()(
             }).catch(() => {})
           } catch {}
         }
+
+        // Fetch context usage after abort
+        logger.info('[Context Usage] Message aborted, fetching usage')
+        get()
+          .fetchContextUsage()
+          .catch((err) => {
+            logger.warn('[Context Usage] Failed to fetch after abort', err)
+          })
       } catch {
         set({ isSendingMessage: false, isAborting: false, abortController: null })
       }

From 763986562d5533bd78c29473fded1003b116eb67 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 17 Oct 2025 16:56:01 -0700
Subject: [PATCH 27/28] Fix lint

---
 apps/sim/lib/sim-agent/constants.ts |   2 +-
 apps/sim/stores/copilot/store.ts    | 140 ++++++++++++++++------------
 2 files changed, 83 insertions(+), 59 deletions(-)

diff --git a/apps/sim/lib/sim-agent/constants.ts b/apps/sim/lib/sim-agent/constants.ts
index 22e07c22c13..996615278f5 100644
--- a/apps/sim/lib/sim-agent/constants.ts
+++ b/apps/sim/lib/sim-agent/constants.ts
@@ -1,2 +1,2 @@
 export const SIM_AGENT_API_URL_DEFAULT = 'https://copilot.sim.ai'
-export const SIM_AGENT_VERSION = '1.0.1'
+export const SIM_AGENT_VERSION = '1.0.2'
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index a4fe0b05d9e..2ff0985f573 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -291,67 +291,76 @@ function normalizeMessagesForUI(messages: CopilotMessage[]): CopilotMessage[] {
 
       // Use existing contentBlocks ordering if present; otherwise only render text content
       const blocks: any[] = Array.isArray(message.contentBlocks)
-        ? (message.contentBlocks as any[]).map((b: any) =>
-            b?.type === 'tool_call' && b.toolCall
-              ? {
-                  ...b,
-                  toolCall: {
-                    ...b.toolCall,
-                    state:
-                      isRejectedState(b.toolCall?.state) ||
-                      isReviewState(b.toolCall?.state) ||
-                      isBackgroundState(b.toolCall?.state) ||
-                      b.toolCall?.state === ClientToolCallState.success ||
-                      b.toolCall?.state === ClientToolCallState.error ||
-                      b.toolCall?.state === ClientToolCallState.aborted
-                        ? b.toolCall.state
-                        : ClientToolCallState.rejected,
-                    display: resolveToolDisplay(
-                      b.toolCall?.name,
-                      (isRejectedState(b.toolCall?.state) ||
-                      isReviewState(b.toolCall?.state) ||
-                      isBackgroundState(b.toolCall?.state) ||
-                      b.toolCall?.state === ClientToolCallState.success ||
-                      b.toolCall?.state === ClientToolCallState.error ||
-                      b.toolCall?.state === ClientToolCallState.aborted
-                        ? (b.toolCall?.state as any)
-                        : ClientToolCallState.rejected) as any,
-                      b.toolCall?.id,
-                      b.toolCall?.params
-                    ),
-                  },
-                }
-              : b
-          )
+        ? (message.contentBlocks as any[]).map((b: any) => {
+            if (b?.type === 'tool_call' && b.toolCall) {
+              // Ensure client tool instance is registered for this tool call
+              ensureClientToolInstance(b.toolCall?.name, b.toolCall?.id)
+
+              return {
+                ...b,
+                toolCall: {
+                  ...b.toolCall,
+                  state:
+                    isRejectedState(b.toolCall?.state) ||
+                    isReviewState(b.toolCall?.state) ||
+                    isBackgroundState(b.toolCall?.state) ||
+                    b.toolCall?.state === ClientToolCallState.success ||
+                    b.toolCall?.state === ClientToolCallState.error ||
+                    b.toolCall?.state === ClientToolCallState.aborted
+                      ? b.toolCall.state
+                      : ClientToolCallState.rejected,
+                  display: resolveToolDisplay(
+                    b.toolCall?.name,
+                    (isRejectedState(b.toolCall?.state) ||
+                    isReviewState(b.toolCall?.state) ||
+                    isBackgroundState(b.toolCall?.state) ||
+                    b.toolCall?.state === ClientToolCallState.success ||
+                    b.toolCall?.state === ClientToolCallState.error ||
+                    b.toolCall?.state === ClientToolCallState.aborted
+                      ? (b.toolCall?.state as any)
+                      : ClientToolCallState.rejected) as any,
+                    b.toolCall?.id,
+                    b.toolCall?.params
+                  ),
+                },
+              }
+            }
+            return b
+          })
         : []
 
       // Prepare toolCalls with display for non-block UI components, but do not fabricate blocks
       const updatedToolCalls = Array.isArray((message as any).toolCalls)
-        ? (message as any).toolCalls.map((tc: any) => ({
-            ...tc,
-            state:
-              isRejectedState(tc?.state) ||
-              isReviewState(tc?.state) ||
-              isBackgroundState(tc?.state) ||
-              tc?.state === ClientToolCallState.success ||
-              tc?.state === ClientToolCallState.error ||
-              tc?.state === ClientToolCallState.aborted
-                ? tc.state
-                : ClientToolCallState.rejected,
-            display: resolveToolDisplay(
-              tc?.name,
-              (isRejectedState(tc?.state) ||
-              isReviewState(tc?.state) ||
-              isBackgroundState(tc?.state) ||
-              tc?.state === ClientToolCallState.success ||
-              tc?.state === ClientToolCallState.error ||
-              tc?.state === ClientToolCallState.aborted
-                ? (tc?.state as any)
-                : ClientToolCallState.rejected) as any,
-              tc?.id,
-              tc?.params
-            ),
-          }))
+        ? (message as any).toolCalls.map((tc: any) => {
+            // Ensure client tool instance is registered for this tool call
+            ensureClientToolInstance(tc?.name, tc?.id)
+
+            return {
+              ...tc,
+              state:
+                isRejectedState(tc?.state) ||
+                isReviewState(tc?.state) ||
+                isBackgroundState(tc?.state) ||
+                tc?.state === ClientToolCallState.success ||
+                tc?.state === ClientToolCallState.error ||
+                tc?.state === ClientToolCallState.aborted
+                  ? tc.state
+                  : ClientToolCallState.rejected,
+              display: resolveToolDisplay(
+                tc?.name,
+                (isRejectedState(tc?.state) ||
+                isReviewState(tc?.state) ||
+                isBackgroundState(tc?.state) ||
+                tc?.state === ClientToolCallState.success ||
+                tc?.state === ClientToolCallState.error ||
+                tc?.state === ClientToolCallState.aborted
+                  ? (tc?.state as any)
+                  : ClientToolCallState.rejected) as any,
+                tc?.id,
+                tc?.params
+              ),
+            }
+          })
         : (message as any).toolCalls
 
       return {
@@ -1399,13 +1408,28 @@ export const useCopilotStore = create<CopilotStore>()(
         if (data.success && Array.isArray(data.chats)) {
           const latestChat = data.chats.find((c: CopilotChat) => c.id === chat.id)
           if (latestChat) {
+            const normalizedMessages = normalizeMessagesForUI(latestChat.messages || [])
+
+            // Build toolCallsById map from all tool calls in normalized messages
+            const toolCallsById: Record<string, CopilotToolCall> = {}
+            for (const msg of normalizedMessages) {
+              if (msg.contentBlocks) {
+                for (const block of msg.contentBlocks as any[]) {
+                  if (block?.type === 'tool_call' && block.toolCall?.id) {
+                    toolCallsById[block.toolCall.id] = block.toolCall
+                  }
+                }
+              }
+            }
+
             set({
               currentChat: latestChat,
-              messages: normalizeMessagesForUI(latestChat.messages || []),
+              messages: normalizedMessages,
               chats: (get().chats || []).map((c: CopilotChat) =>
                 c.id === chat.id ? latestChat : c
               ),
               contextUsage: null,
+              toolCallsById,
             })
             try {
               await get().loadMessageCheckpoints(latestChat.id)

From 3f6ca3994ec9987e996cb2b3f8331c4429eefe28 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 17 Oct 2025 17:07:04 -0700
Subject: [PATCH 28/28] Fix tests and lint

---
 apps/sim/app/api/copilot/chat/route.test.ts | 46 ++++-----------------
 apps/sim/stores/copilot/store.ts            | 34 ++++++++++++++-
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/apps/sim/app/api/copilot/chat/route.test.ts b/apps/sim/app/api/copilot/chat/route.test.ts
index f2ae1103b33..d2c00d47be7 100644
--- a/apps/sim/app/api/copilot/chat/route.test.ts
+++ b/apps/sim/app/api/copilot/chat/route.test.ts
@@ -214,18 +214,7 @@ describe('Copilot Chat API Route', () => {
             'x-api-key': 'test-sim-agent-key',
           },
           body: JSON.stringify({
-            messages: [
-              {
-                role: 'user',
-                content: 'Hello',
-              },
-            ],
-            chatMessages: [
-              {
-                role: 'user',
-                content: 'Hello',
-              },
-            ],
+            message: 'Hello',
             workflowId: 'workflow-123',
             userId: 'user-123',
             stream: true,
@@ -233,7 +222,7 @@ describe('Copilot Chat API Route', () => {
             model: 'claude-4.5-sonnet',
             mode: 'agent',
             messageId: 'mock-uuid-1234-5678',
-            version: '1.0.1',
+            version: '1.0.2',
             chatId: 'chat-123',
           }),
         })
@@ -286,16 +275,7 @@ describe('Copilot Chat API Route', () => {
         'http://localhost:8000/api/chat-completion-streaming',
         expect.objectContaining({
           body: JSON.stringify({
-            messages: [
-              { role: 'user', content: 'Previous message' },
-              { role: 'assistant', content: 'Previous response' },
-              { role: 'user', content: 'New message' },
-            ],
-            chatMessages: [
-              { role: 'user', content: 'Previous message' },
-              { role: 'assistant', content: 'Previous response' },
-              { role: 'user', content: 'New message' },
-            ],
+            message: 'New message',
             workflowId: 'workflow-123',
             userId: 'user-123',
             stream: true,
@@ -303,7 +283,7 @@ describe('Copilot Chat API Route', () => {
             model: 'claude-4.5-sonnet',
             mode: 'agent',
             messageId: 'mock-uuid-1234-5678',
-            version: '1.0.1',
+            version: '1.0.2',
             chatId: 'chat-123',
           }),
         })
@@ -341,19 +321,12 @@ describe('Copilot Chat API Route', () => {
       const { POST } = await import('@/app/api/copilot/chat/route')
       await POST(req)
 
-      // Verify implicit feedback was included as system message
+      // Verify implicit feedback was included
       expect(global.fetch).toHaveBeenCalledWith(
         'http://localhost:8000/api/chat-completion-streaming',
         expect.objectContaining({
           body: JSON.stringify({
-            messages: [
-              { role: 'system', content: 'User seems confused about the workflow' },
-              { role: 'user', content: 'Hello' },
-            ],
-            chatMessages: [
-              { role: 'system', content: 'User seems confused about the workflow' },
-              { role: 'user', content: 'Hello' },
-            ],
+            message: 'Hello',
             workflowId: 'workflow-123',
             userId: 'user-123',
             stream: true,
@@ -361,7 +334,7 @@ describe('Copilot Chat API Route', () => {
             model: 'claude-4.5-sonnet',
             mode: 'agent',
             messageId: 'mock-uuid-1234-5678',
-            version: '1.0.1',
+            version: '1.0.2',
             chatId: 'chat-123',
           }),
         })
@@ -444,8 +417,7 @@ describe('Copilot Chat API Route', () => {
         'http://localhost:8000/api/chat-completion-streaming',
         expect.objectContaining({
           body: JSON.stringify({
-            messages: [{ role: 'user', content: 'What is this workflow?' }],
-            chatMessages: [{ role: 'user', content: 'What is this workflow?' }],
+            message: 'What is this workflow?',
             workflowId: 'workflow-123',
             userId: 'user-123',
             stream: true,
@@ -453,7 +425,7 @@ describe('Copilot Chat API Route', () => {
             model: 'claude-4.5-sonnet',
             mode: 'ask',
             messageId: 'mock-uuid-1234-5678',
-            version: '1.0.1',
+            version: '1.0.2',
             chatId: 'chat-123',
           }),
         })
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 2ff0985f573..615b1926061 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -1544,9 +1544,24 @@ export const useCopilotStore = create<CopilotStore>()(
               if (isSendingMessage) {
                 set({ currentChat: { ...updatedCurrentChat, messages: get().messages } })
               } else {
+                const normalizedMessages = normalizeMessagesForUI(updatedCurrentChat.messages || [])
+
+                // Build toolCallsById map from all tool calls in normalized messages
+                const toolCallsById: Record<string, CopilotToolCall> = {}
+                for (const msg of normalizedMessages) {
+                  if (msg.contentBlocks) {
+                    for (const block of msg.contentBlocks as any[]) {
+                      if (block?.type === 'tool_call' && block.toolCall?.id) {
+                        toolCallsById[block.toolCall.id] = block.toolCall
+                      }
+                    }
+                  }
+                }
+
                 set({
                   currentChat: updatedCurrentChat,
-                  messages: normalizeMessagesForUI(updatedCurrentChat.messages || []),
+                  messages: normalizedMessages,
+                  toolCallsById,
                 })
               }
               try {
@@ -1554,9 +1569,24 @@ export const useCopilotStore = create<CopilotStore>()(
               } catch {}
             } else if (!isSendingMessage && !suppressAutoSelect) {
               const mostRecentChat: CopilotChat = data.chats[0]
+              const normalizedMessages = normalizeMessagesForUI(mostRecentChat.messages || [])
+
+              // Build toolCallsById map from all tool calls in normalized messages
+              const toolCallsById: Record<string, CopilotToolCall> = {}
+              for (const msg of normalizedMessages) {
+                if (msg.contentBlocks) {
+                  for (const block of msg.contentBlocks as any[]) {
+                    if (block?.type === 'tool_call' && block.toolCall?.id) {
+                      toolCallsById[block.toolCall.id] = block.toolCall
+                    }
+                  }
+                }
+              }
+
               set({
                 currentChat: mostRecentChat,
-                messages: normalizeMessagesForUI(mostRecentChat.messages || []),
+                messages: normalizedMessages,
+                toolCallsById,
               })
               try {
                 await get().loadMessageCheckpoints(mostRecentChat.id)