diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index bb5a4180da8..ab044210df6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -269,10 +269,10 @@ export function Chat() {
   const { addToQueue } = useOperationQueue()
 
   const [chatMessage, setChatMessage] = useState('')
-  const [promptHistory, setPromptHistory] = useState<string[]>([])
-  const [historyIndex, setHistoryIndex] = useState(-1)
   const [moreMenuOpen, setMoreMenuOpen] = useState(false)
 
+  const promptHistoryRef = useRef<string[]>([])
+  const historyIndexRef = useRef(-1)
   const inputRef = useRef<HTMLInputElement>(null)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   const streamReaderRef = useRef<ReadableStreamDefaultReader<Uint8Array> | null>(null)
@@ -292,22 +292,26 @@ export function Chat() {
     handleDrop,
   } = useChatFileUpload()
 
-  const filePreviewUrls = useRef<Map<string, string>>(new Map())
+  const filePreviewUrls = useRef<Map<string, string> | null>(null)
+  if (filePreviewUrls.current === null) {
+    filePreviewUrls.current = new Map()
+  }
 
   const getFilePreviewUrl = useCallback((file: ChatFile): string | null => {
     if (!file.type.startsWith('image/')) return null
 
-    const existing = filePreviewUrls.current.get(file.id)
+    const urls = (filePreviewUrls.current ??= new Map())
+    const existing = urls.get(file.id)
     if (existing) return existing
 
     const url = URL.createObjectURL(file.file)
-    filePreviewUrls.current.set(file.id, url)
+    urls.set(file.id, url)
     return url
   }, [])
 
   useEffect(() => {
     const currentFileIds = new Set(chatFiles.map((f) => f.id))
-    const urlMap = filePreviewUrls.current
+    const urlMap = (filePreviewUrls.current ??= new Map())
 
     for (const [fileId, url] of urlMap.entries()) {
       if (!currentFileIds.has(fileId)) {
@@ -454,21 +458,24 @@ export function Chat() {
   )
 
   const userMessages = useMemo(() => {
-    return workflowMessages
-      .filter((msg) => msg.type === 'user')
-      .map((msg) => msg.content)
-      .filter((content): content is string => typeof content === 'string')
+    const result: string[] = []
+    for (const msg of workflowMessages) {
+      if (msg.type === 'user' && typeof msg.content === 'string') {
+        result.push(msg.content)
+      }
+    }
+    return result
   }, [workflowMessages])
 
   useEffect(() => {
     if (!activeWorkflowId) {
-      setPromptHistory([])
-      setHistoryIndex(-1)
+      promptHistoryRef.current = []
+      historyIndexRef.current = -1
       return
     }
 
-    setPromptHistory(userMessages)
-    setHistoryIndex(-1)
+    promptHistoryRef.current = userMessages
+    historyIndexRef.current = -1
   }, [activeWorkflowId, userMessages])
 
   /**
@@ -607,7 +614,7 @@ export function Chat() {
         focusInput(100)
       }
     },
-    [appendMessageContent, finalizeMessageStream, focusInput, selectedOutputs, activeWorkflowId]
+    [appendMessageContent, finalizeMessageStream, focusInput]
   )
 
   /**
@@ -633,19 +640,18 @@ export function Chat() {
       }
 
       if ('success' in result && result.success && 'logs' in result && Array.isArray(result.logs)) {
-        selectedOutputs
-          .map((outputId) => extractOutputFromLogs(result.logs as BlockLog[], outputId))
-          .filter((output) => output !== undefined)
-          .forEach((output) => {
-            const content = formatOutputContent(output)
-            if (content) {
-              addMessage({
-                content,
-                workflowId: activeWorkflowId,
-                type: 'workflow',
-              })
-            }
-          })
+        for (const outputId of selectedOutputs) {
+          const output = extractOutputFromLogs(result.logs as BlockLog[], outputId)
+          if (output === undefined) continue
+          const content = formatOutputContent(output)
+          if (content) {
+            addMessage({
+              content,
+              workflowId: activeWorkflowId,
+              type: 'workflow',
+            })
+          }
+        }
         return
       }
 
@@ -674,10 +680,13 @@ export function Chat() {
 
     const sentMessage = chatMessage.trim()
 
-    if (sentMessage && promptHistory[promptHistory.length - 1] !== sentMessage) {
-      setPromptHistory((prev) => [...prev, sentMessage])
+    if (
+      sentMessage &&
+      promptHistoryRef.current[promptHistoryRef.current.length - 1] !== sentMessage
+    ) {
+      promptHistoryRef.current = [...promptHistoryRef.current, sentMessage]
     }
-    setHistoryIndex(-1)
+    historyIndexRef.current = -1
 
     const conversationId = getConversationId(activeWorkflowId)
 
@@ -732,7 +741,6 @@ export function Chat() {
     chatFiles,
     activeWorkflowId,
     isExecuting,
-    promptHistory,
     getConversationId,
     addMessage,
     handleRunWorkflow,
@@ -756,27 +764,29 @@ export function Chat() {
         }
       } else if (e.key === 'ArrowUp') {
         e.preventDefault()
-        if (promptHistory.length > 0) {
+        if (promptHistoryRef.current.length > 0) {
           const newIndex =
-            historyIndex === -1 ? promptHistory.length - 1 : Math.max(0, historyIndex - 1)
-          setHistoryIndex(newIndex)
-          setChatMessage(promptHistory[newIndex])
+            historyIndexRef.current === -1
+              ? promptHistoryRef.current.length - 1
+              : Math.max(0, historyIndexRef.current - 1)
+          historyIndexRef.current = newIndex
+          setChatMessage(promptHistoryRef.current[newIndex])
         }
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
-        if (historyIndex >= 0) {
-          const newIndex = historyIndex + 1
-          if (newIndex >= promptHistory.length) {
-            setHistoryIndex(-1)
+        if (historyIndexRef.current >= 0) {
+          const newIndex = historyIndexRef.current + 1
+          if (newIndex >= promptHistoryRef.current.length) {
+            historyIndexRef.current = -1
             setChatMessage('')
           } else {
-            setHistoryIndex(newIndex)
-            setChatMessage(promptHistory[newIndex])
+            historyIndexRef.current = newIndex
+            setChatMessage(promptHistoryRef.current[newIndex])
           }
         }
       }
     },
-    [handleSendMessage, promptHistory, historyIndex, isStreaming, isExecuting]
+    [handleSendMessage, isStreaming, isExecuting]
   )
 
   /**
@@ -1085,7 +1095,7 @@ export function Chat() {
                 value={chatMessage}
                 onChange={(e) => {
                   setChatMessage(e.target.value)
-                  setHistoryIndex(-1)
+                  historyIndexRef.current = -1
                 }}
                 onKeyDown={handleKeyPress}
                 placeholder={isDragOver ? 'Drop files here...' : 'Type a message...'}
@@ -1122,6 +1132,7 @@ export function Chat() {
                 ) : (
                   <Button
                     onClick={handleSendMessage}
+                    aria-label='Send message'
                     variant='ghost'
                     disabled={
                       (!chatMessage.trim() && chatFiles.length === 0) ||
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index a4a0b8fd1f9..592d5439fc5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -44,6 +44,16 @@ const TagIcon: React.FC<{
 
 const EMPTY_OUTPUTS: string[] = []
 
+/**
+ * Gets the background color for a block output based on its type
+ * @param blockType - The type of the block
+ * @returns The hex color code for the block
+ */
+const getOutputColor = (blockType: string) => {
+  const blockConfig = getBlock(blockType)
+  return blockConfig?.bgColor || '#2F55FF'
+}
+
 /**
  * Props for the OutputSelect component
  */
@@ -159,16 +169,7 @@ export function OutputSelect({
         path: f.path,
       }
     })
-  }, [
-    workflowBlocks,
-    workflowId,
-    isShowingDiff,
-    isDiffReady,
-    baselineWorkflow,
-    blocks,
-    subBlockValues,
-    shouldUseBaseline,
-  ])
+  }, [workflowBlocks, workflowId, baselineWorkflow, subBlockValues, shouldUseBaseline])
 
   /**
    * Gets display text for selected outputs
@@ -193,16 +194,6 @@ export function OutputSelect({
     return `${validOutputs.length} outputs`
   }, [selectedOutputs, workflowOutputs, placeholder])
 
-  /**
-   * Gets the background color for a block output based on its type
-   * @param blockType - The type of the block
-   * @returns The hex color code for the block
-   */
-  const getOutputColor = (blockType: string) => {
-    const blockConfig = getBlock(blockType)
-    return blockConfig?.bgColor || '#2F55FF'
-  }
-
   /**
    * Groups outputs by block and sorts by distance from starter block.
    * Returns ComboboxOptionGroup[] for use with Combobox.
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
index 3e5acb7a241..bfb8c166434 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
@@ -32,15 +32,17 @@ const CursorsComponent = () => {
       return []
     }
 
-    return presenceUsers
-      .filter((user): user is typeof user & { cursor: CursorPoint } => Boolean(user.cursor))
-      .filter((user) => user.socketId !== currentSocketId)
-      .map((user) => ({
+    const rendered: CursorRenderData[] = []
+    for (const user of presenceUsers) {
+      if (!user.cursor || user.socketId === currentSocketId) continue
+      rendered.push({
         id: user.socketId,
         name: user.userName?.trim() || 'Collaborator',
         cursor: user.cursor,
         color: getUserColor(user.userId),
-      }))
+      })
+    }
+    return rendered
   }, [activeWorkflowId, currentSocketId, currentWorkflowId, presenceUsers])
 
   if (!cursors.length) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
index f730491f1b0..535ddf6aaa5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
@@ -63,6 +63,7 @@ export const DiffControls = memo(function DiffControls() {
       >
         {/* Reject side */}
         <button
+          type='button'
           onClick={handleReject}
           title='Reject changes'
           className='relative flex h-full items-center border border-[var(--border)] bg-[var(--surface-4)] pr-5 pl-3 font-medium text-[var(--text-secondary)] text-small transition-colors hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] hover-hover:text-[var(--text-primary)] dark:hover-hover:bg-[var(--surface-5)]'
@@ -86,6 +87,7 @@ export const DiffControls = memo(function DiffControls() {
         />
         {/* Accept side */}
         <button
+          type='button'
           onClick={handleAccept}
           title='Accept changes (⇧⌘⏎)'
           className='-ml-2.5 relative flex h-full items-center border border-[rgba(0,0,0,0.15)] bg-[var(--brand-accent)] pr-3 pl-5 font-medium text-[var(--text-inverse)] text-small transition-[background-color,border-color,fill,stroke] hover-hover:brightness-110 dark:border-[rgba(255,255,255,0.1)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
index 38130ca0903..0c579953fca 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -64,6 +64,11 @@ export const NoteBlock = memo(function NoteBlock({
   const userPermissions = useUserPermissionsContext()
   const canEditWorkflow = userPermissions.canEdit && !data.isWorkflowLocked
 
+  const actionBar = useMemo(
+    () => <ActionBar blockId={id} blockType={type} disabled={!canEditWorkflow} />,
+    [id, type, canEditWorkflow]
+  )
+
   /**
    * Calculate deterministic dimensions based on content structure. Uses fixed
    * width and computed height to avoid ResizeObserver jitter.
@@ -90,7 +95,7 @@ export const NoteBlock = memo(function NoteBlock({
       hasRing={hasRing}
       ringStyles={ringStyles}
       onSelect={handleClick}
-      actionBar={<ActionBar blockId={id} blockType={type} disabled={!canEditWorkflow} />}
+      actionBar={actionBar}
     />
   )
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-context-management.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-context-management.ts
index d4febb0cc77..bc306642a49 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-context-management.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-context-management.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import {
   escapeRegex,
   filterOutContext,
@@ -56,40 +56,45 @@ export function useContextManagement({ message, initialContexts }: UseContextMan
   /**
    * Synchronizes selected contexts with inline @label or /label tokens in the message.
    * Removes contexts whose labels are no longer present in the message.
+   *
+   * Adjusted during render with the prev-ref idiom rather than in an effect so the
+   * stale, pre-filtered list is never committed. The ref starts as `undefined` so the
+   * very first render runs the same sync the mounting effect used to.
    */
-  useEffect(() => {
+  const prevMessageRef = useRef<string | undefined>(undefined)
+  if (prevMessageRef.current !== message) {
+    prevMessageRef.current = message
     if (!message) {
       // Functional updater bails out when already empty; a fresh `[]` literal would
       // emit a new reference and invalidate downstream memos that key on identity.
       setSelectedContexts((prev) => (prev.length === 0 ? prev : []))
-      return
-    }
-
-    setSelectedContexts((prev) => {
-      if (prev.length === 0) return prev
+    } else {
+      setSelectedContexts((prev) => {
+        if (prev.length === 0) return prev
 
-      const filtered = prev.filter((c) => {
-        if (!c.label) return false
-        // Check for slash command tokens or mention tokens based on kind.
-        // The trailing lookahead `(?![A-Za-z0-9_])` accepts any word-boundary
-        // — whitespace, end-of-string, or punctuation — so `@Slack.` and
-        // `@Slack,` survive the sync. A strict `(\s|$)` here would strip
-        // contexts whenever the user ends a sentence with a mention.
-        // Skills store a wide EM SPACE sentinel (SKILL_CHIP_TRIGGER) as their
-        // trigger so the chip icon fits; slash commands keep '/'; everything
-        // else uses '@'. The sentinel is itself a whitespace character, but the
-        // `(^|\s)` boundary still matches the (regular) space or start that
-        // precedes it, then the literal sentinel.
-        const prefix =
-          c.kind === 'skill' ? SKILL_CHIP_TRIGGER : c.kind === 'slash_command' ? '/' : '@'
-        const tokenPattern = new RegExp(
-          `(^|\\s)${escapeRegex(prefix)}${escapeRegex(c.label)}(?![A-Za-z0-9_])`
-        )
-        return tokenPattern.test(message)
+        const filtered = prev.filter((c) => {
+          if (!c.label) return false
+          // Check for slash command tokens or mention tokens based on kind.
+          // The trailing lookahead `(?![A-Za-z0-9_])` accepts any word-boundary
+          // — whitespace, end-of-string, or punctuation — so `@Slack.` and
+          // `@Slack,` survive the sync. A strict `(\s|$)` here would strip
+          // contexts whenever the user ends a sentence with a mention.
+          // Skills store a wide EM SPACE sentinel (SKILL_CHIP_TRIGGER) as their
+          // trigger so the chip icon fits; slash commands keep '/'; everything
+          // else uses '@'. The sentinel is itself a whitespace character, but the
+          // `(^|\s)` boundary still matches the (regular) space or start that
+          // precedes it, then the literal sentinel.
+          const prefix =
+            c.kind === 'skill' ? SKILL_CHIP_TRIGGER : c.kind === 'slash_command' ? '/' : '@'
+          const tokenPattern = new RegExp(
+            `(^|\\s)${escapeRegex(prefix)}${escapeRegex(c.label)}(?![A-Za-z0-9_])`
+          )
+          return tokenPattern.test(message)
+        })
+        return filtered.length === prev.length ? prev : filtered
       })
-      return filtered.length === prev.length ? prev : filtered
-    })
-  }, [message])
+    }
+  }
 
   return {
     selectedContexts,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-integration-auto-mention.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-integration-auto-mention.ts
index 0a2a5b6a22e..430c1f23cd4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-integration-auto-mention.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-integration-auto-mention.ts
@@ -95,7 +95,10 @@ export function useIntegrationAutoMention({ setSelectedContexts }: UseIntegratio
     (additions: IntegrationContext[]) => {
       if (additions.length === 0) return
       setSelectedContexts((prev) => {
-        const existing = new Set(prev.filter((c) => c.kind === 'integration').map((c) => c.label))
+        const existing = new Set<string>()
+        for (const c of prev) {
+          if (c.kind === 'integration') existing.add(c.label)
+        }
         const fresh = additions.filter((c) => !existing.has(c.label))
         return fresh.length > 0 ? [...prev, ...fresh] : prev
       })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-data.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-data.ts
index 95508ac4102..0346fac3ea0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-data.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-data.ts
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useShallow } from 'zustand/react/shallow'
 import { requestJson } from '@/lib/api/client/request'
@@ -166,12 +166,16 @@ export function useMentionData(props: UseMentionDataProps): MentionDataReturn {
     }))
 
   /**
-   * Resets past chats when workflow changes
+   * Resets past chats when workflow changes.
+   * Adjusted during render via a prev-ref comparison so the stale list is never
+   * committed between renders.
    */
-  useEffect(() => {
+  const prevWorkflowIdRef = useRef(workflowId)
+  if (prevWorkflowIdRef.current !== workflowId) {
+    prevWorkflowIdRef.current = workflowId
     setPastChats([])
     setIsLoadingPastChats(false)
-  }, [workflowId])
+  }
 
   /**
    * Syncs workflow blocks from store
@@ -270,35 +274,39 @@ export function useMentionData(props: UseMentionDataProps): MentionDataReturn {
       const { getAllBlocks } = await import('@/blocks')
       const all = getAllBlocks()
       const regularBlocks = all
-        .filter(
-          (b: any) =>
-            b.type !== 'starter' &&
-            !b.hideFromToolbar &&
-            b.category === 'blocks' &&
-            isBlockAllowed(b.type)
+        .flatMap((b: any) =>
+          b.type !== 'starter' &&
+          !b.hideFromToolbar &&
+          b.category === 'blocks' &&
+          isBlockAllowed(b.type)
+            ? [
+                {
+                  id: b.type,
+                  name: b.name || b.type,
+                  iconComponent: b.icon,
+                  bgColor: b.bgColor,
+                },
+              ]
+            : []
         )
-        .map((b: any) => ({
-          id: b.type,
-          name: b.name || b.type,
-          iconComponent: b.icon,
-          bgColor: b.bgColor,
-        }))
         .sort((a: any, b: any) => a.name.localeCompare(b.name))
 
       const toolBlocks = all
-        .filter(
-          (b: any) =>
-            b.type !== 'starter' &&
-            !b.hideFromToolbar &&
-            b.category === 'tools' &&
-            isBlockAllowed(b.type)
+        .flatMap((b: any) =>
+          b.type !== 'starter' &&
+          !b.hideFromToolbar &&
+          b.category === 'tools' &&
+          isBlockAllowed(b.type)
+            ? [
+                {
+                  id: b.type,
+                  name: b.name || b.type,
+                  iconComponent: b.icon,
+                  bgColor: b.bgColor,
+                },
+              ]
+            : []
         )
-        .map((b: any) => ({
-          id: b.type,
-          name: b.name || b.type,
-          iconComponent: b.icon,
-          bgColor: b.bgColor,
-        }))
         .sort((a: any, b: any) => a.name.localeCompare(b.name))
 
       setBlocksList([...regularBlocks, ...toolBlocks])
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-menu.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-menu.ts
index 3e9a390f5ac..f7c4cfd38d1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-menu.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-menu.ts
@@ -70,10 +70,9 @@ export function useMentionMenu({
       // Check if this '@' is part of a completed mention token
       if (selectedContexts.length > 0) {
         // Only check non-slash_command contexts for mentions
-        const mentionLabels = selectedContexts
-          .filter((c) => c.kind !== 'slash_command')
-          .map((c) => c.label)
-          .filter(Boolean) as string[]
+        const mentionLabels = selectedContexts.flatMap((c) =>
+          c.kind !== 'slash_command' && c.label ? [c.label] : []
+        ) as string[]
 
         for (const label of mentionLabels) {
           // Check for token at start of text: "@label "
@@ -143,10 +142,9 @@ export function useMentionMenu({
       // Check if this '/' is part of a completed slash token
       if (selectedContexts.length > 0) {
         // Only check slash_command contexts
-        const slashLabels = selectedContexts
-          .filter((c) => c.kind === 'slash_command')
-          .map((c) => c.label)
-          .filter(Boolean) as string[]
+        const slashLabels = selectedContexts.flatMap((c) =>
+          c.kind === 'slash_command' && c.label ? [c.label] : []
+        ) as string[]
 
         for (const label of slashLabels) {
           // Check for token at start of text: "/label "
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-tokens.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-tokens.ts
index 5a7d866ee64..a4c20200f3e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-tokens.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-tokens.ts
@@ -50,16 +50,22 @@ export function useMentionTokens({
     const ranges: MentionRange[] = []
     if (!message || selectedContexts.length === 0) return ranges
 
-    const labels = selectedContexts.map((c) => c.label).filter(Boolean)
+    const labels = selectedContexts.flatMap((c) => (c.label ? [c.label] : []))
     if (labels.length === 0) return ranges
 
     // Deduplicate labels to avoid finding the same token multiple times
     // when multiple contexts share the same label
     const uniqueLabels = Array.from(new Set(labels))
 
+    /** First-matching context per label, for O(1) lookup while tokenizing. */
+    const contextByLabel = new Map<string, (typeof selectedContexts)[number]>()
+    for (const c of selectedContexts) {
+      if (c.label && !contextByLabel.has(c.label)) contextByLabel.set(c.label, c)
+    }
+
     for (const label of uniqueLabels) {
       // Find matching context to determine if it's a slash command
-      const matchingContext = selectedContexts.find((c) => c.label === label)
+      const matchingContext = contextByLabel.get(label)
       const prefix =
         matchingContext?.kind === 'skill'
           ? SKILL_CHIP_TRIGGER
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/utils.ts
index 04dbf433d62..9e5c566b9c0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/utils.ts
@@ -41,13 +41,11 @@ export function escapeRegex(value: string): string {
  * @returns Array of prefixed token strings (e.g., "@workflow", "/web")
  */
 export function extractContextTokens(contexts: ChatContext[]): string[] {
-  return contexts
-    .filter((c) => c.kind !== 'current_workflow' && c.label)
-    .map((c) => {
-      const prefix =
-        c.kind === 'skill' ? SKILL_CHIP_TRIGGER : c.kind === 'slash_command' ? '/' : '@'
-      return `${prefix}${c.label}`
-    })
+  return contexts.flatMap((c) => {
+    if (c.kind === 'current_workflow' || !c.label) return []
+    const prefix = c.kind === 'skill' ? SKILL_CHIP_TRIGGER : c.kind === 'slash_command' ? '/' : '@'
+    return [`${prefix}${c.label}`]
+  })
 }
 
 /**
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index eee7671bcb7..2f6d304f141 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -24,6 +24,7 @@ import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { getBaseUrl, getEmailDomain } from '@/lib/core/utils/urls'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
+import { useIdentifierValidation } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks'
 import {
   type AuthType,
   type ChatFormData,
@@ -32,7 +33,6 @@ import {
   useUpdateChat,
 } from '@/hooks/queries/chats'
 import type { ChatDetail } from '@/hooks/queries/deployments'
-import { useIdentifierValidation } from './hooks'
 import {
   getPasswordHelperText,
   getPasswordPlaceholder,
@@ -99,7 +99,7 @@ export function ChatDeploy({
   onDeployed,
   onVersionActivated,
 }: ChatDeployProps) {
-  const [imageUrl, setImageUrl] = useState<string | null>(null)
+  const imageUrlRef = useRef<string | null>(null)
   const [internalShowDeleteConfirmation, setInternalShowDeleteConfirmation] = useState(false)
 
   const showDeleteConfirmation =
@@ -195,13 +195,13 @@ export function ChatDeploy({
       })
 
       if (existingChat.customizations?.imageUrl) {
-        setImageUrl(existingChat.customizations.imageUrl)
+        imageUrlRef.current = existingChat.customizations.imageUrl
       }
 
       hasInitializedFormRef.current = true
     } else if (!existingChat && !isLoadingChat) {
       setFormData(initialFormData)
-      setImageUrl(null)
+      imageUrlRef.current = null
       hasInitializedFormRef.current = false
     }
   }, [existingChat, isLoadingChat])
@@ -238,14 +238,14 @@ export function ChatDeploy({
           chatId: existingChat.id,
           workflowId,
           formData,
-          imageUrl,
+          imageUrl: imageUrlRef.current,
         })
         chatUrl = result.chatUrl
       } else {
         const result = await createChatMutation.mutateAsync({
           workflowId,
           formData,
-          imageUrl,
+          imageUrl: imageUrlRef.current,
         })
         chatUrl = result.chatUrl
       }
@@ -285,7 +285,7 @@ export function ChatDeploy({
         workflowId,
       })
 
-      setImageUrl(null)
+      imageUrlRef.current = null
       hasInitializedFormRef.current = false
       setFormInitCounter((c) => c + 1)
       await onRefetchChat()
@@ -403,6 +403,7 @@ export function ChatDeploy({
           <button
             type='button'
             data-delete-trigger
+            aria-label='Delete chat'
             onClick={() => setShowDeleteConfirmation(true)}
             className='hidden'
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
index 90fd7077c02..92b457a57b0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
@@ -11,6 +11,51 @@ interface IdentifierValidationState {
   isValid: boolean
 }
 
+type SyncValidation =
+  | { status: 'resolved'; error: string | null; isValid: boolean }
+  | { status: 'needsCheck' }
+
+/**
+ * Computes the synchronous portion of identifier validation.
+ * Returns a resolved state for cases decidable without a network call, or
+ * `needsCheck` when the identifier must be verified against the server.
+ */
+function computeSyncValidation(
+  identifier: string,
+  originalIdentifier?: string,
+  isEditingExisting?: boolean
+): SyncValidation {
+  if (!identifier.trim()) {
+    return { status: 'resolved', error: null, isValid: false }
+  }
+
+  if (originalIdentifier && identifier === originalIdentifier) {
+    return { status: 'resolved', error: null, isValid: true }
+  }
+
+  if (isEditingExisting && !originalIdentifier) {
+    return { status: 'resolved', error: null, isValid: true }
+  }
+
+  if (!IDENTIFIER_PATTERN.test(identifier)) {
+    return {
+      status: 'resolved',
+      error: 'Identifier can only contain lowercase letters, numbers, and hyphens',
+      isValid: false,
+    }
+  }
+
+  return { status: 'needsCheck' }
+}
+
+/** Maps a synchronous validation result to the exposed state shape. */
+function toValidationState(sync: SyncValidation): IdentifierValidationState {
+  if (sync.status === 'resolved') {
+    return { isChecking: false, error: sync.error, isValid: sync.isValid }
+  }
+  return { isChecking: true, error: null, isValid: false }
+}
+
 /**
  * Hook for validating chat identifier availability with debounced API checks
  * @param identifier - The identifier to validate
@@ -22,68 +67,57 @@ export function useIdentifierValidation(
   originalIdentifier?: string,
   isEditingExisting?: boolean
 ): IdentifierValidationState {
-  const [isChecking, setIsChecking] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [isValid, setIsValid] = useState(false)
+  const sync = computeSyncValidation(identifier, originalIdentifier, isEditingExisting)
 
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const [state, setState] = useState<IdentifierValidationState>(() => toValidationState(sync))
 
-  useEffect(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-    }
-
-    setError(null)
-    setIsValid(false)
-    setIsChecking(false)
-
-    if (!identifier.trim()) {
-      return
-    }
+  const prevDepsRef = useRef({ identifier, originalIdentifier, isEditingExisting })
+  const prev = prevDepsRef.current
+  if (
+    prev.identifier !== identifier ||
+    prev.originalIdentifier !== originalIdentifier ||
+    prev.isEditingExisting !== isEditingExisting
+  ) {
+    prevDepsRef.current = { identifier, originalIdentifier, isEditingExisting }
+    setState(toValidationState(sync))
+  }
 
-    if (originalIdentifier && identifier === originalIdentifier) {
-      setIsValid(true)
-      return
-    }
-
-    if (isEditingExisting && !originalIdentifier) {
-      setIsValid(true)
-      return
-    }
-
-    if (!IDENTIFIER_PATTERN.test(identifier)) {
-      setError('Identifier can only contain lowercase letters, numbers, and hyphens')
+  useEffect(() => {
+    if (
+      computeSyncValidation(identifier, originalIdentifier, isEditingExisting).status !==
+      'needsCheck'
+    ) {
       return
     }
 
-    setIsChecking(true)
-    timeoutRef.current = setTimeout(async () => {
+    const handle = setTimeout(async () => {
       try {
         const data = await requestJson(validateChatIdentifierContract, {
           query: { identifier },
         })
 
         if (!data.available) {
-          setError(data.error || 'This identifier is already in use')
-          setIsValid(false)
+          setState({
+            isChecking: false,
+            error: data.error || 'This identifier is already in use',
+            isValid: false,
+          })
         } else {
-          setError(null)
-          setIsValid(true)
+          setState({ isChecking: false, error: null, isValid: true })
         }
       } catch {
-        setError('Error checking identifier availability')
-        setIsValid(false)
-      } finally {
-        setIsChecking(false)
+        setState({
+          isChecking: false,
+          error: 'Error checking identifier availability',
+          isValid: false,
+        })
       }
     }, DEBOUNCE_MS)
 
     return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
+      clearTimeout(handle)
     }
   }, [identifier, originalIdentifier, isEditingExisting])
 
-  return { isChecking, error, isValid }
+  return state
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index e45d51bed99..58af1e0dc7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useRef, useState } from 'react'
 import {
   Button,
   ButtonGroup,
@@ -19,12 +19,12 @@ import {
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
+import { Versions } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components'
 import type { DeployReadiness } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-deploy-readiness'
 import { Preview, PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
-import { Versions } from './components'
 import { formatVersionLabel } from './format-version-label'
 
 const logger = createLogger('GeneralDeploy')
@@ -135,12 +135,14 @@ export function GeneralDeploy({
     }
   }
 
-  useEffect(() => {
+  const prevWorkflowIdRef = useRef(workflowId)
+  if (prevWorkflowIdRef.current !== workflowId) {
+    prevWorkflowIdRef.current = workflowId
     setShowLoadDialog(false)
     setVersionToLoad(null)
     setShowPromoteDialog(false)
     setVersionToPromote(null)
-  }, [workflowId])
+  }
 
   const confirmPromoteToLive = async () => {
     if (!versionToPromote || isPromotingVersion) return
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index 618870fb2c7..ff690b97e43 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -327,6 +327,7 @@ export function McpDeploy({
       const errors: string[] = []
       const addedEntries: Record<string, WorkflowMcpTool> = {}
       const removedIds: string[] = []
+      const serversById = new Map(servers.map((s) => [s.id, s]))
 
       for (const serverId of toAdd) {
         setPendingServerChanges((prev) => new Set(prev).add(serverId))
@@ -343,7 +344,7 @@ export function McpDeploy({
           onAddedToServer?.()
           logger.info(`Added workflow ${workflowId} as tool to server ${serverId}`)
         } catch (error) {
-          const serverName = servers.find((s) => s.id === serverId)?.name || serverId
+          const serverName = serversById.get(serverId)?.name || serverId
           errors.push(`Failed to add to ${serverName}`)
           logger.error(`Failed to add tool to server ${serverId}:`, error)
         } finally {
@@ -368,7 +369,7 @@ export function McpDeploy({
           })
           removedIds.push(serverId)
         } catch (error) {
-          const serverName = servers.find((s) => s.id === serverId)?.name || serverId
+          const serverName = serversById.get(serverId)?.name || serverId
           errors.push(`Failed to remove from ${serverName}`)
           logger.error(`Failed to remove tool from server ${serverId}:`, error)
         } finally {
@@ -396,7 +397,7 @@ export function McpDeploy({
               parameterDescriptionOverrides,
             })
           } catch (error) {
-            const serverName = servers.find((s) => s.id === serverId)?.name || serverId
+            const serverName = serversById.get(serverId)?.name || serverId
             // The tool can be removed out-of-band (undeploying a workflow deletes its MCP tools), so
             // a stale-cache update may hit a missing tool — re-create it instead of failing the save.
             if (error instanceof ApiClientError && error.status === 404) {
@@ -528,7 +529,7 @@ export function McpDeploy({
         handleSave()
       }}
     >
-      <button type='submit' hidden />
+      <button type='submit' hidden aria-label='Save MCP tool' />
 
       {servers.map((server) => (
         <ServerToolsQuery
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
index 8bd6cba84e7..9532b7605fd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
@@ -27,6 +27,14 @@ import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workfl
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { CreateApiKeyModal } from '@/app/workspace/[workspaceId]/settings/components/api-keys/components'
 import { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
+import {
+  ApiDeploy,
+  ChatDeploy,
+  DeployUpgradeGate,
+  type ExistingChat,
+  GeneralDeploy,
+  McpDeploy,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components'
 import {
   releaseDeployAction,
   tryAcquireDeployAction,
@@ -54,18 +62,34 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { mergeSubblockState } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
-import {
-  ApiDeploy,
-  ChatDeploy,
-  DeployUpgradeGate,
-  type ExistingChat,
-  GeneralDeploy,
-  McpDeploy,
-} from './components'
 import { ApiInfoModal } from './components/general/components/api-info-modal'
 
 const logger = createLogger('DeployModal')
 
+function isWorkflowStillActive(targetWorkflowId: string) {
+  return useWorkflowRegistry.getState().activeWorkflowId === targetWorkflowId
+}
+
+function handleChatFormSubmit() {
+  const form = document.getElementById('chat-deploy-form') as HTMLFormElement
+  form?.requestSubmit()
+}
+
+function handleChatDelete() {
+  const form = document.getElementById('chat-deploy-form') as HTMLFormElement
+  if (form) {
+    const deleteButton = form.querySelector('[data-delete-trigger]') as HTMLButtonElement
+    if (deleteButton) {
+      deleteButton.click()
+    }
+  }
+}
+
+function handleMcpToolFormSubmit() {
+  const form = document.getElementById('mcp-deploy-form') as HTMLFormElement
+  form?.requestSubmit()
+}
+
 /** Renders the upgrade prompt in place of a programmatic-deploy tab when gated. */
 function GatedTabContent({
   gated,
@@ -202,10 +226,6 @@ export function DeployModal({
 
   const versions = versionsData?.versions ?? []
 
-  const isWorkflowStillActive = (targetWorkflowId: string) => {
-    return useWorkflowRegistry.getState().activeWorkflowId === targetWorkflowId
-  }
-
   const syncDraftAfterDeploy = async (): Promise<string | null> => {
     if (!workflowId) return null
 
@@ -225,11 +245,13 @@ export function DeployModal({
     }
   }
 
-  useEffect(() => {
+  const prevWorkflowIdRef = useRef(workflowId)
+  if (prevWorkflowIdRef.current !== workflowId) {
+    prevWorkflowIdRef.current = workflowId
     deployActionIdRef.current += 1
     setIsFinalizingDeploy(false)
     setUndeployTargetWorkflowId(null)
-  }, [workflowId])
+  }
 
   const getApiKeyLabel = (value?: string | null) => {
     if (value && value.trim().length > 0) {
@@ -268,35 +290,42 @@ export function DeployModal({
   const selectedStreamingOutputsRef = useRef(selectedStreamingOutputs)
   selectedStreamingOutputsRef.current = selectedStreamingOutputs
 
-  useEffect(() => {
-    if (open && workflowId) {
-      setActiveTab('general')
-      setDeployError(null)
-      setDeployWarnings([])
-      setChatSuccess(false)
-
-      const currentOutputs = selectedStreamingOutputsRef.current
-      if (currentOutputs.length > 0) {
-        const blocks = Object.values(useWorkflowStore.getState().blocks)
-        const validOutputs = currentOutputs.filter((outputId) => {
-          if (startsWithUuid(outputId)) {
-            const underscoreIndex = outputId.indexOf('_')
-            if (underscoreIndex === -1) return false
-            const blockId = outputId.substring(0, underscoreIndex)
-            return blocks.some((b) => b.id === blockId)
-          }
-          const parts = outputId.split('.')
-          if (parts.length >= 2) {
-            const blockName = parts[0]
-            return blocks.some((b) => b.name && normalizeName(b.name) === blockName.toLowerCase())
-          }
-          return true
-        })
-        if (validOutputs.length !== currentOutputs.length) {
-          setSelectedStreamingOutputs(validOutputs)
+  const prevOpenRef = useRef(open)
+  const prevResetWorkflowIdRef = useRef(workflowId)
+  const openChanged = prevOpenRef.current !== open
+  const resetWorkflowIdChanged = prevResetWorkflowIdRef.current !== workflowId
+  prevOpenRef.current = open
+  prevResetWorkflowIdRef.current = workflowId
+  if (open && workflowId && (openChanged || resetWorkflowIdChanged)) {
+    setActiveTab('general')
+    setDeployError(null)
+    setDeployWarnings([])
+    setChatSuccess(false)
+
+    const currentOutputs = selectedStreamingOutputsRef.current
+    if (currentOutputs.length > 0) {
+      const blocks = Object.values(useWorkflowStore.getState().blocks)
+      const validOutputs = currentOutputs.filter((outputId) => {
+        if (startsWithUuid(outputId)) {
+          const underscoreIndex = outputId.indexOf('_')
+          if (underscoreIndex === -1) return false
+          const blockId = outputId.substring(0, underscoreIndex)
+          return blocks.some((b) => b.id === blockId)
         }
+        const parts = outputId.split('.')
+        if (parts.length >= 2) {
+          const blockName = parts[0]
+          return blocks.some((b) => b.name && normalizeName(b.name) === blockName.toLowerCase())
+        }
+        return true
+      })
+      if (validOutputs.length !== currentOutputs.length) {
+        setSelectedStreamingOutputs(validOutputs)
       }
     }
+  }
+
+  useEffect(() => {
     return () => {
       if (chatSuccessTimeoutRef.current) {
         clearTimeout(chatSuccessTimeoutRef.current)
@@ -493,26 +522,6 @@ export function DeployModal({
     await refetchChatInfo()
   }
 
-  const handleChatFormSubmit = () => {
-    const form = document.getElementById('chat-deploy-form') as HTMLFormElement
-    form?.requestSubmit()
-  }
-
-  const handleChatDelete = () => {
-    const form = document.getElementById('chat-deploy-form') as HTMLFormElement
-    if (form) {
-      const deleteButton = form.querySelector('[data-delete-trigger]') as HTMLButtonElement
-      if (deleteButton) {
-        deleteButton.click()
-      }
-    }
-  }
-
-  const handleMcpToolFormSubmit = () => {
-    const form = document.getElementById('mcp-deploy-form') as HTMLFormElement
-    form?.requestSubmit()
-  }
-
   const isSubmitting = deployMutation.isPending || isFinalizingDeploy
   const isUndeploying = undeployMutation.isPending
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
index 7899d1cf8fd..a577bfc95fd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -201,7 +201,10 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
   const [expandedConnections, setExpandedConnections] = useState<Set<string>>(() => new Set())
   const [expandedFieldPaths, setExpandedFieldPaths] = useState<Set<string>>(() => new Set())
   const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const connectionRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+  const connectionRefs = useRef<Map<string, HTMLDivElement> | null>(null)
+  if (connectionRefs.current === null) {
+    connectionRefs.current = new Map()
+  }
 
   const { blocks } = useWorkflowStore(
     useShallow((state) => ({
@@ -240,7 +243,7 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
 
       if (isExpanding) {
         setTimeout(() => {
-          const connectionElement = connectionRefs.current.get(connectionId)
+          const connectionElement = connectionRefs.current?.get(connectionId)
           const scrollContainer = scrollContainerRef.current
 
           if (connectionElement && scrollContainer) {
@@ -327,9 +330,9 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
             onConnectionDragStart={handleConnectionDragStart}
             connectionRef={(el) => {
               if (el) {
-                connectionRefs.current.set(connection.id, el)
+                connectionRefs.current?.set(connection.id, el)
               } else {
-                connectionRefs.current.delete(connection.id)
+                connectionRefs.current?.delete(connection.id)
               }
             }}
             mergedSubBlocks={mergedSubBlocks}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index 3b52f3a96b6..6ee9eef3ce9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -118,6 +118,68 @@ const generateStableId = (blockId: string, suffix: string): string => {
   return `${blockId}-${suffix}`
 }
 
+/**
+ * Safely parses JSON string into conditional blocks array.
+ *
+ * @param jsonString - JSON string to parse
+ * @returns Parsed blocks array or null if invalid
+ */
+const safeParseJSON = (jsonString: string | null): ConditionalBlock[] | null => {
+  if (!jsonString) return null
+  try {
+    const parsed = JSON.parse(jsonString)
+    if (!Array.isArray(parsed)) return null
+
+    // Validate that the parsed data has the expected structure
+    if (parsed.length === 0 || !('id' in parsed[0]) || !('title' in parsed[0])) {
+      return null
+    }
+
+    return parsed
+  } catch (error) {
+    logger.error('Failed to parse JSON:', { error, jsonString })
+    return null
+  }
+}
+
+/**
+ * Props for the LineNumbers component.
+ */
+interface LineNumbersProps {
+  /** ID of the block to render line numbers for */
+  blockId: string
+  /** Map of block IDs to their per-line visual heights (in line units) */
+  visualLineHeights: { [key: string]: number[] }
+}
+
+/**
+ * Renders line numbers for a specific conditional block.
+ *
+ * @param props - Component props
+ * @returns Line number elements
+ */
+function LineNumbers({ blockId, visualLineHeights }: LineNumbersProps): ReactElement {
+  const numbers: ReactElement[] = []
+  let lineNumber = 1
+  const blockHeights = visualLineHeights[blockId] || []
+
+  blockHeights.forEach((height) => {
+    for (let i = 0; i < height; i++) {
+      numbers.push(
+        <div
+          key={`${blockId}-${lineNumber}-${i}`}
+          className={cn('text-muted-foreground text-xs leading-[21px]', i > 0 && 'invisible')}
+        >
+          {lineNumber}
+        </div>
+      )
+    }
+    lineNumber++
+  })
+
+  return <>{numbers}</>
+}
+
 /**
  * Condition input component for creating if/else if/else conditional logic blocks.
  * Provides a code editor interface with syntax highlighting, tag completion,
@@ -326,30 +388,6 @@ export function ConditionInput({
     }
   }, [blockId])
 
-  /**
-   * Safely parses JSON string into conditional blocks array.
-   *
-   * @param jsonString - JSON string to parse
-   * @returns Parsed blocks array or null if invalid
-   */
-  const safeParseJSON = (jsonString: string | null): ConditionalBlock[] | null => {
-    if (!jsonString) return null
-    try {
-      const parsed = JSON.parse(jsonString)
-      if (!Array.isArray(parsed)) return null
-
-      // Validate that the parsed data has the expected structure
-      if (parsed.length === 0 || !('id' in parsed[0]) || !('title' in parsed[0])) {
-        return null
-      }
-
-      return parsed
-    } catch (error) {
-      logger.error('Failed to parse JSON:', { error, jsonString })
-      return null
-    }
-  }
-
   // Sync store value with conditional blocks when storeValue changes
   useEffect(() => {
     // Skip if syncing is already in progress
@@ -520,34 +558,6 @@ export function ConditionInput({
     return () => resizeObserver.disconnect()
   }, [conditionalBlocks])
 
-  /**
-   * Renders line numbers for a specific conditional block.
-   *
-   * @param blockId - ID of the block to render line numbers for
-   * @returns Array of line number elements
-   */
-  const renderLineNumbers = (blockId: string) => {
-    const numbers: ReactElement[] = []
-    let lineNumber = 1
-    const blockHeights = visualLineHeights[blockId] || []
-
-    blockHeights.forEach((height) => {
-      for (let i = 0; i < height; i++) {
-        numbers.push(
-          <div
-            key={`${blockId}-${lineNumber}-${i}`}
-            className={cn('text-muted-foreground text-xs leading-[21px]', i > 0 && 'invisible')}
-          >
-            {lineNumber}
-          </div>
-        )
-      }
-      lineNumber++
-    })
-
-    return numbers
-  }
-
   /**
    * Handles dropping a connection block onto a condition editor.
    *
@@ -776,9 +786,9 @@ export function ConditionInput({
 
     // Remove any associated edges before removing the block
     const handlePrefix = isRouterMode ? `router-${id}` : `condition-${id}`
-    const edgeIdsToRemove = edges
-      .filter((edge) => edge.sourceHandle?.startsWith(handlePrefix))
-      .map((edge) => edge.id)
+    const edgeIdsToRemove = edges.flatMap((edge) =>
+      edge.sourceHandle?.startsWith(handlePrefix) ? [edge.id] : []
+    )
     if (edgeIdsToRemove.length > 0) {
       batchRemoveEdges(edgeIdsToRemove)
     }
@@ -1217,7 +1227,7 @@ export function ConditionInput({
                     className='rounded-t-none border-0'
                   >
                     <Code.Gutter width={blockGutterWidth}>
-                      {renderLineNumbers(block.id)}
+                      <LineNumbers blockId={block.id} visualLineHeights={visualLineHeights} />
                     </Code.Gutter>
 
                     <Code.Content paddingLeft={`${blockGutterWidth}px`}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index a61e9e35f3a..fc1f7923d0a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -56,6 +56,96 @@ const createDefaultTag = (): DocumentTag => ({
   collapsed: false,
 })
 
+/**
+ * Parses a JSON tag value into a normalized array of document tags
+ */
+const parseTags = (tagValue: string | null): DocumentTag[] => {
+  if (!tagValue) return []
+  try {
+    const parsed = JSON.parse(tagValue)
+    if (!Array.isArray(parsed)) return []
+    return parsed.map((t: DocumentTag) => ({
+      ...t,
+      fieldType: t.fieldType || 'text',
+      collapsed: t.collapsed ?? false,
+    }))
+  } catch {
+    return []
+  }
+}
+
+interface TagHeaderProps {
+  tag: DocumentTag
+  index: number
+  isReadOnly: boolean
+  canAddMoreTags: boolean
+  onToggle: () => void
+  onAdd: () => void
+  onRemove: () => void
+}
+
+/**
+ * Renders the tag header with name, badge, and action buttons.
+ * Shows tag name only when collapsed (as summary), generic label when expanded.
+ */
+function TagHeader({
+  tag,
+  index,
+  isReadOnly,
+  canAddMoreTags,
+  onToggle,
+  onAdd,
+  onRemove,
+}: TagHeaderProps) {
+  return (
+    <div
+      role='group'
+      aria-label={`Tag ${index + 1}`}
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
+      onClick={onToggle}
+      onKeyDown={(event) => {
+        if (event.target !== event.currentTarget) return
+        handleKeyboardActivation(event, onToggle)
+      }}
+    >
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
+          {tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
+        </span>
+        {tag.collapsed && tag.tagName && (
+          <Badge variant='type' size='sm'>
+            {FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}
+          </Badge>
+        )}
+      </div>
+      <div
+        role='presentation'
+        className='flex items-center gap-2 pl-2'
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Button
+          variant='ghost'
+          onClick={onAdd}
+          disabled={isReadOnly || !canAddMoreTags}
+          className='h-auto p-0'
+        >
+          <Plus className='size-[14px]' />
+          <span className='sr-only'>Add Tag</span>
+        </Button>
+        <Button
+          variant='ghost'
+          onClick={onRemove}
+          disabled={isReadOnly}
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+        >
+          <Trash className='size-[14px]' />
+          <span className='sr-only'>Delete Tag</span>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
 export function DocumentTagEntry({
   blockId,
   subBlock,
@@ -98,29 +188,19 @@ export function DocumentTagEntry({
 
   const currentValue = isPreview ? previewValue : storeValue
 
-  const parseTags = (tagValue: string | null): DocumentTag[] => {
-    if (!tagValue) return []
-    try {
-      const parsed = JSON.parse(tagValue)
-      if (!Array.isArray(parsed)) return []
-      return parsed.map((t: DocumentTag) => ({
-        ...t,
-        fieldType: t.fieldType || 'text',
-        collapsed: t.collapsed ?? false,
-      }))
-    } catch {
-      return []
-    }
-  }
-
   const parsedTags = parseTags(currentValue || null)
   const tags: DocumentTag[] = parsedTags.length > 0 ? parsedTags : [createDefaultTag()]
   const isReadOnly = isPreview || disabled
 
-  // Get tag names already used (case-insensitive)
-  const usedTagNames = useMemo(() => {
-    return new Set(tags.map((t) => t.tagName?.toLowerCase()).filter((name) => name?.trim()))
-  }, [tags])
+  /** Tag names already in use (case-insensitive); computed in render since `tags` is rebuilt each render. */
+  const usedTagNames = (() => {
+    const names = new Set<string>()
+    for (const t of tags) {
+      const name = t.tagName?.toLowerCase()
+      if (name?.trim()) names.add(name)
+    }
+    return names
+  })()
 
   // Filter available tags (exclude already used ones)
   const availableTagDefinitions = useMemo(() => {
@@ -241,58 +321,6 @@ export function DocumentTagEntry({
     )
   }
 
-  /**
-   * Renders the tag header with name, badge, and action buttons
-   * Shows tag name only when collapsed (as summary), generic label when expanded
-   */
-  const renderTagHeader = (tag: DocumentTag, index: number) => (
-    <div
-      role='group'
-      aria-label={`Tag ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => toggleCollapse(tag.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => toggleCollapse(tag.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
-          {tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
-        </span>
-        {tag.collapsed && tag.tagName && (
-          <Badge variant='type' size='sm'>
-            {FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
-      >
-        <Button
-          variant='ghost'
-          onClick={addTag}
-          disabled={isReadOnly || !canAddMoreTags}
-          className='h-auto p-0'
-        >
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Tag</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={() => removeTag(tag.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Tag</span>
-        </Button>
-      </div>
-    </div>
-  )
-
   /**
    * Renders the value input with tag dropdown support
    */
@@ -423,7 +451,15 @@ export function DocumentTagEntry({
             tag.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
-          {renderTagHeader(tag, index)}
+          <TagHeader
+            tag={tag}
+            index={index}
+            isReadOnly={isReadOnly}
+            canAddMoreTags={canAddMoreTags}
+            onToggle={() => toggleCollapse(tag.id)}
+            onAdd={addTag}
+            onRemove={() => removeTag(tag.id)}
+          />
           {!tag.collapsed && renderTagContent(tag)}
         </div>
       ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
index d4f831d559f..c1cc05aa2f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
@@ -22,6 +22,28 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 /** Selected-value badges shown before folding the rest into a "+N" badge. */
 const MAX_VISIBLE_MULTI_SELECT_BADGES = 2
 
+/**
+ * Normalizes variable references in JSON strings by wrapping them in quotes
+ * @param jsonString - The JSON string containing variable references
+ * @returns Normalized JSON string with quoted variable references
+ */
+const normalizeVariableReferences = (jsonString: string): string => {
+  return jsonString.replace(/([^"]<[^>]+>)/g, '"$1"')
+}
+
+/**
+ * Infers the type of a value for builder data field configuration
+ * @param value - The value to infer type from
+ * @returns The inferred type as a string literal
+ */
+const inferType = (value: any): 'string' | 'number' | 'boolean' | 'object' | 'array' => {
+  if (typeof value === 'boolean') return 'boolean'
+  if (typeof value === 'number') return 'number'
+  if (Array.isArray(value)) return 'array'
+  if (typeof value === 'object' && value !== null) return 'object'
+  return 'string'
+}
+
 /**
  * Dropdown option type - can be a simple string or an object with label, id, and optional icon.
  * Options with `hidden: true` are excluded from the picker but still resolve for label display,
@@ -153,13 +175,10 @@ export const Dropdown = memo(function Dropdown({
   const value = isPreview ? previewValue : propValue !== undefined ? propValue : storeValue
 
   const singleValue = multiSelect ? null : (value as string | null | undefined)
-  const multiValues = multiSelect
-    ? Array.isArray(value)
-      ? value
-      : value
-        ? [value as string]
-        : []
-    : null
+  const multiValues = useMemo(
+    () => (multiSelect ? (Array.isArray(value) ? value : value ? [value as string] : []) : null),
+    [multiSelect, value]
+  )
 
   const fetchOptionsIfNeeded = useCallback(async () => {
     if (!fetchOptions || isPreview || disabled) return
@@ -281,15 +300,6 @@ export const Dropdown = memo(function Dropdown({
     }
   }, [storeValue, defaultOptionValue, setStoreValue, multiSelect])
 
-  /**
-   * Normalizes variable references in JSON strings by wrapping them in quotes
-   * @param jsonString - The JSON string containing variable references
-   * @returns Normalized JSON string with quoted variable references
-   */
-  const normalizeVariableReferences = (jsonString: string): string => {
-    return jsonString.replace(/([^"]<[^>]+>)/g, '"$1"')
-  }
-
   /**
    * Converts a JSON string to builder data format for structured editing
    * @param jsonString - The JSON string to convert
@@ -322,19 +332,6 @@ export const Dropdown = memo(function Dropdown({
     }
   }
 
-  /**
-   * Infers the type of a value for builder data field configuration
-   * @param value - The value to infer type from
-   * @returns The inferred type as a string literal
-   */
-  const inferType = (value: any): 'string' | 'number' | 'boolean' | 'object' | 'array' => {
-    if (typeof value === 'boolean') return 'boolean'
-    if (typeof value === 'number') return 'number'
-    if (Array.isArray(value)) return 'array'
-    if (typeof value === 'object' && value !== null) return 'object'
-    return 'string'
-  }
-
   useEffect(() => {
     if (multiSelect || subBlockId !== 'dataMode' || isPreview || disabled) return
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
index dfa0412e510..d2ba2739aca 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   cn,
   Popover,
@@ -134,6 +134,7 @@ export const EnvVarDropdown: React.FC<EnvVarDropdownProps> = ({
 
   const userEnvVars = Object.keys(personalEnv)
   const [selectedIndex, setSelectedIndex] = useState(0)
+  const prevSearchTermRef = useRef(searchTerm)
 
   const envVarGroups: EnvVarGroup[] = []
 
@@ -155,18 +156,17 @@ export const EnvVarDropdown: React.FC<EnvVarDropdownProps> = ({
     envVar.toLowerCase().includes(searchTerm.toLowerCase())
   )
 
-  const filteredGroups = envVarGroups
-    .map((group) => ({
-      ...group,
-      variables: group.variables.filter((envVar) =>
-        envVar.toLowerCase().includes(searchTerm.toLowerCase())
-      ),
-    }))
-    .filter((group) => group.variables.length > 0)
+  const filteredGroups = envVarGroups.flatMap((group) => {
+    const variables = group.variables.filter((envVar) =>
+      envVar.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+    return variables.length > 0 ? [{ ...group, variables }] : []
+  })
 
-  useEffect(() => {
+  if (prevSearchTermRef.current !== searchTerm) {
+    prevSearchTermRef.current = searchTerm
     setSelectedIndex(0)
-  }, [searchTerm])
+  }
 
   const openEnvironmentSettings = () => {
     if (workspaceId) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index 621e07b38e9..de1e977a54d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -37,6 +37,56 @@ const createDefaultMetric = (): EvalMetric => ({
   range: { min: 0, max: 1 },
 })
 
+interface MetricHeaderProps {
+  index: number
+  metricId: string
+  disableAdd: boolean
+  disableRemove: boolean
+  onAdd: () => void
+  onRemove: () => void
+}
+
+function MetricHeader({
+  index,
+  metricId,
+  disableAdd,
+  disableRemove,
+  onAdd,
+  onRemove,
+}: MetricHeaderProps) {
+  return (
+    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-2.5 py-[5px]'>
+      <span className='font-medium text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
+      <div className='flex items-center gap-2'>
+        <Tooltip.Root key={`add-${metricId}`}>
+          <Tooltip.Trigger asChild>
+            <Button variant='ghost' onClick={onAdd} disabled={disableAdd} className='h-auto p-0'>
+              <Plus className='size-[14px]' />
+              <span className='sr-only'>Add Metric</span>
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Add Metric</Tooltip.Content>
+        </Tooltip.Root>
+
+        <Tooltip.Root key={`remove-${metricId}`}>
+          <Tooltip.Trigger asChild>
+            <Button
+              variant='ghost'
+              onClick={onRemove}
+              disabled={disableRemove}
+              className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+            >
+              <Trash className='size-[14px]' />
+              <span className='sr-only'>Delete Metric</span>
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Delete Metric</Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    </div>
+  )
+}
+
 export function EvalInput({
   blockId,
   subBlockId,
@@ -76,8 +126,6 @@ export function EvalInput({
       valuePath: [metricIndex, ...metricPath],
     })
 
-  const renderFieldLabel = (label: string) => <Label>{label}</Label>
-
   const addMetric = () => {
     if (isPreview || disabled) return
 
@@ -138,43 +186,6 @@ export function EvalInput({
     updateMetric(metricId, 'description', newDescription)
   }
 
-  const renderMetricHeader = (metric: EvalMetric, index: number) => (
-    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-2.5 py-[5px]'>
-      <span className='font-medium text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
-      <div className='flex items-center gap-2'>
-        <Tooltip.Root key={`add-${metric.id}`}>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              onClick={addMetric}
-              disabled={isPreview || disabled}
-              className='h-auto p-0'
-            >
-              <Plus className='size-[14px]' />
-              <span className='sr-only'>Add Metric</span>
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Add Metric</Tooltip.Content>
-        </Tooltip.Root>
-
-        <Tooltip.Root key={`remove-${metric.id}`}>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              onClick={() => removeMetric(metric.id)}
-              disabled={isPreview || disabled || metrics.length === 1}
-              className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-            >
-              <Trash className='size-[14px]' />
-              <span className='sr-only'>Delete Metric</span>
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Delete Metric</Tooltip.Content>
-        </Tooltip.Root>
-      </div>
-    </div>
-  )
-
   return (
     <div className='space-y-2'>
       {metrics.map((metric, index) => (
@@ -183,11 +194,18 @@ export function EvalInput({
           data-metric-id={metric.id}
           className='group relative overflow-visible rounded-sm border border-[var(--border-1)]'
         >
-          {renderMetricHeader(metric, index)}
+          <MetricHeader
+            index={index}
+            metricId={metric.id}
+            disableAdd={isPreview || disabled}
+            disableRemove={isPreview || disabled || metrics.length === 1}
+            onAdd={addMetric}
+            onRemove={() => removeMetric(metric.id)}
+          />
 
           <div className='flex flex-col gap-2 border-[var(--border-1)] px-2.5 pt-1.5 pb-2.5'>
             <div key={`name-${metric.id}`} className='flex flex-col gap-1.5'>
-              {renderFieldLabel('Name')}
+              <Label>Name</Label>
               <div className='relative'>
                 <Input
                   name='name'
@@ -215,7 +233,7 @@ export function EvalInput({
             </div>
 
             <div key={`description-${metric.id}`} className='flex flex-col gap-1.5'>
-              {renderFieldLabel('Description')}
+              <Label>Description</Label>
               <div className='relative'>
                 {(() => {
                   const fieldState = inputController.fieldHelpers.getFieldState(metric.id)
@@ -290,7 +308,7 @@ export function EvalInput({
 
             <div key={`range-${metric.id}`} className='grid grid-cols-2 gap-2'>
               <div className='flex flex-col gap-1.5'>
-                {renderFieldLabel('Min Value')}
+                <Label>Min Value</Label>
                 <div className='relative'>
                   <Input
                     type='text'
@@ -311,7 +329,7 @@ export function EvalInput({
                 </div>
               </div>
               <div className='flex flex-col gap-1.5'>
-                {renderFieldLabel('Max Value')}
+                <Label>Max Value</Label>
                 <div className='relative'>
                   <Input
                     type='text'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 205db37466c..3a2bdd57b67 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -30,6 +30,54 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('FileUpload')
 
+/**
+ * Checks if a file's MIME type matches the accepted types
+ * Supports exact matches, wildcard patterns (e.g., 'image/*'), and '*' for all types
+ */
+const isFileTypeAccepted = (fileType: string | undefined, accepted: string): boolean => {
+  if (accepted === '*') return true
+  if (!fileType) return false
+
+  const acceptedList = accepted.split(',').map((t) => t.trim().toLowerCase())
+  const normalizedFileType = fileType.toLowerCase()
+
+  return acceptedList.some((acceptedType) => {
+    if (acceptedType === normalizedFileType) return true
+
+    if (acceptedType.endsWith('/*')) {
+      const typePrefix = acceptedType.slice(0, -1) // 'image/' from 'image/*'
+      return normalizedFileType.startsWith(typePrefix)
+    }
+
+    if (acceptedType.startsWith('.')) {
+      const extension = acceptedType.slice(1).toLowerCase()
+      const fileExtension = getExtensionFromMimeType(normalizedFileType)
+      if (fileExtension === extension) return true
+      return normalizedFileType.endsWith(`/${extension}`)
+    }
+
+    return false
+  })
+}
+
+/**
+ * Formats file size for display in a human-readable format
+ */
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+/**
+ * Truncate long file names keeping both start and end segments.
+ */
+const truncateMiddle = (text: string, start = 28, end = 18) => {
+  if (!text) return ''
+  if (text.length <= start + end + 3) return text
+  return `${text.slice(0, start)}...${text.slice(-end)}`
+}
+
 interface FileUploadProps {
   blockId: string
   subBlockId: string
@@ -228,36 +276,6 @@ export function FileUpload({
   }, [modelValue, maxSize])
   const maxSizeLabel = `${Math.round(maxSizeInBytes / (1024 * 1024))}MB`
 
-  /**
-   * Checks if a file's MIME type matches the accepted types
-   * Supports exact matches, wildcard patterns (e.g., 'image/*'), and '*' for all types
-   */
-  const isFileTypeAccepted = (fileType: string | undefined, accepted: string): boolean => {
-    if (accepted === '*') return true
-    if (!fileType) return false
-
-    const acceptedList = accepted.split(',').map((t) => t.trim().toLowerCase())
-    const normalizedFileType = fileType.toLowerCase()
-
-    return acceptedList.some((acceptedType) => {
-      if (acceptedType === normalizedFileType) return true
-
-      if (acceptedType.endsWith('/*')) {
-        const typePrefix = acceptedType.slice(0, -1) // 'image/' from 'image/*'
-        return normalizedFileType.startsWith(typePrefix)
-      }
-
-      if (acceptedType.startsWith('.')) {
-        const extension = acceptedType.slice(1).toLowerCase()
-        const fileExtension = getExtensionFromMimeType(normalizedFileType)
-        if (fileExtension === extension) return true
-        return normalizedFileType.endsWith(`/${extension}`)
-      }
-
-      return false
-    })
-  }
-
   const availableWorkspaceFiles = workspaceFiles.filter((workspaceFile) => {
     const existingFiles = Array.isArray(value) ? value : value ? [value] : []
 
@@ -286,24 +304,6 @@ export function FileUpload({
     }
   }
 
-  /**
-   * Formats file size for display in a human-readable format
-   */
-  const formatFileSize = (bytes: number): string => {
-    if (bytes < 1024) return `${bytes} B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-  }
-
-  /**
-   * Truncate long file names keeping both start and end segments.
-   */
-  const truncateMiddle = (text: string, start = 28, end = 18) => {
-    if (!text) return ''
-    if (text.length <= start + end + 3) return text
-    return `${text.slice(0, start)}...${text.slice(-end)}`
-  }
-
   /**
    * Handles file upload when new file(s) are selected
    */
@@ -632,8 +632,8 @@ export function FileUpload({
     [workspaceFiles, acceptedTypes]
   )
 
-  // Find the selected file's workspace ID for highlighting in single file mode
-  const selectedFileId = useMemo(() => {
+  /** Selected file's workspace id for single-file highlighting; computed in render since `filesArray` is rebuilt each render. */
+  const selectedFileId = (() => {
     if (!hasFiles || multiple) return ''
     const currentFile = filesArray[0]
     if (!currentFile) return ''
@@ -645,7 +645,7 @@ export function FileUpload({
         currentFile.path?.includes(wf.key)
     )
     return matchedWorkspaceFile?.id || ''
-  }, [filesArray, workspaceFiles, hasFiles, multiple])
+  })()
 
   const handleComboboxChange = (value: string) => {
     setInputValue(value)
@@ -685,6 +685,7 @@ export function FileUpload({
         style={{ display: 'none' }}
         accept={acceptedTypes}
         multiple={multiple}
+        aria-label='Upload file'
         data-testid='file-input-element'
       />
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
index 4075a2f72de..2c78e70446a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
@@ -12,6 +12,9 @@ import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/c
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
 import { FilterRuleRow } from './components/filter-rule-row'
 
+/** Stable empty-rules reference so the derived `rules` identity only changes when the store value does. */
+const EMPTY_RULES: FilterRule[] = []
+
 interface FilterBuilderProps {
   blockId: string
   subBlockId: string
@@ -43,7 +46,7 @@ export function FilterBuilder({
   }, [propColumns, dynamicColumns])
 
   const value = isPreview ? previewValue : storeValue
-  const rules: FilterRule[] = Array.isArray(value) ? value : []
+  const rules: FilterRule[] = Array.isArray(value) ? value : EMPTY_RULES
   const isReadOnly = isPreview || disabled
 
   const { comparisonOptions, logicalOptions, addRule, removeRule, updateRule } = useFilterBuilder({
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index ac2673216a3..9744af9008e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -65,6 +65,7 @@ export function GroupedCheckboxList({
   const [open, setOpen] = useState(false)
   const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId)
   const optionRefs = useRef<Record<number, HTMLDivElement | null>>({})
+  const prevSearchTargetRef = useRef<typeof activeSearchTarget | null>(null)
 
   const previewValue = isPreview && subBlockValues ? subBlockValues[subBlockId]?.value : undefined
   const selectedValues = ((isPreview ? previewValue : storeValue) as string[]) || []
@@ -108,11 +109,12 @@ export function GroupedCheckboxList({
   const allSelected = selectedValues.length === options.length
   const noneSelected = selectedValues.length === 0
 
-  useEffect(() => {
+  if (prevSearchTargetRef.current !== activeSearchTarget) {
+    prevSearchTargetRef.current = activeSearchTarget
     if (activeSearchTarget?.subBlockId === subBlockId) {
       setOpen(true)
     }
-  }, [activeSearchTarget, subBlockId])
+  }
 
   useEffect(() => {
     if (!open || activeSearchTarget?.subBlockId !== subBlockId) return
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
index 721e657cefc..81bcfd59775 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { Badge, CollapsibleCard, cn, Input, Label } from '@sim/emcn'
 import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -121,12 +121,17 @@ export function InputMapping({
     }))
   }
 
-  useEffect(() => {
-    if (activeSearchTarget?.subBlockId !== subBlockId) return
+  /**
+   * Expand a collapsed field during render when the active search target points at it, so the
+   * highlighted match is visible. Guarded on the field's collapsed state, this converges after a
+   * single re-render instead of forcing an extra commit with the stale (collapsed) UI.
+   */
+  if (activeSearchTarget?.subBlockId === subBlockId) {
     const [fieldName] = activeSearchTarget.valuePath
-    if (typeof fieldName !== 'string' || !collapsedFields[fieldName]) return
-    setCollapsedFields((prev) => ({ ...prev, [fieldName]: false }))
-  }, [activeSearchTarget, collapsedFields, subBlockId])
+    if (typeof fieldName === 'string' && collapsedFields[fieldName]) {
+      setCollapsedFields((prev) => ({ ...prev, [fieldName]: false }))
+    }
+  }
 
   if (!selectedWorkflowId) {
     return (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index db9ee31e574..39a5b4e36e2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -60,6 +60,25 @@ const createDefaultFilter = (): TagFilter => ({
   collapsed: false,
 })
 
+/**
+ * Parses a JSON filter value into a normalized array of tag filters
+ */
+const parseFilters = (filterValue: string | null): TagFilter[] => {
+  if (!filterValue) return []
+  try {
+    const parsed = JSON.parse(filterValue)
+    if (!Array.isArray(parsed)) return []
+    return parsed.map((f: TagFilter) => ({
+      ...f,
+      fieldType: f.fieldType || 'text',
+      operator: f.operator || 'eq',
+      collapsed: f.collapsed ?? false,
+    }))
+  } catch {
+    return []
+  }
+}
+
 export function KnowledgeTagFilters({
   blockId,
   subBlock,
@@ -100,22 +119,6 @@ export function KnowledgeTagFilters({
     disabled,
   })
 
-  const parseFilters = (filterValue: string | null): TagFilter[] => {
-    if (!filterValue) return []
-    try {
-      const parsed = JSON.parse(filterValue)
-      if (!Array.isArray(parsed)) return []
-      return parsed.map((f: TagFilter) => ({
-        ...f,
-        fieldType: f.fieldType || 'text',
-        operator: f.operator || 'eq',
-        collapsed: f.collapsed ?? false,
-      }))
-    } catch {
-      return []
-    }
-  }
-
   const currentValue = isPreview ? previewValue : storeValue
   const parsedFilters = parseFilters(currentValue || null)
   const filters: TagFilter[] = parsedFilters.length > 0 ? parsedFilters : [createDefaultFilter()]
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index 4614a496560..484dc936400 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -40,6 +40,12 @@ const ROW_HEIGHT_PX = 24
  */
 const MIN_HEIGHT_PX = 80
 
+/**
+ * Stable empty default for the optional workflow search value path, so the
+ * default prop value does not create a new array reference on every render.
+ */
+const EMPTY_SEARCH_VALUE_PATH: Array<string | number> = []
+
 /**
  * Props for the LongInput component
  */
@@ -94,7 +100,7 @@ export function LongInput({
   disabled,
   wandControlRef,
   hideInternalWand = false,
-  workflowSearchValuePath = [],
+  workflowSearchValuePath = EMPTY_SEARCH_VALUE_PATH,
 }: LongInputProps) {
   const activeSearchTarget = useActiveSearchTarget()
   // Local state for immediate UI updates during streaming
@@ -198,15 +204,16 @@ export function LongInput({
       ? propValue
       : ctrl.valueString
 
-  // Sync local content with base value when not streaming
-  useEffect(() => {
-    if (!wandHook.isStreaming) {
-      setLocalContent((prev) => {
-        const baseValueString = baseValue?.toString() ?? ''
-        return baseValueString !== prev ? baseValueString : prev
-      })
+  /**
+   * Sync local content with the base value when not streaming, adjusted during render (no effect)
+   * so the wand's currentValue never lags a commit. localContent is shown only while streaming.
+   */
+  if (!wandHook.isStreaming) {
+    const baseValueString = baseValue?.toString() ?? ''
+    if (baseValueString !== localContent) {
+      setLocalContent(baseValueString)
     }
-  }, [baseValue, wandHook.isStreaming])
+  }
 
   // Update height when rows prop changes
   useLayoutEffect(() => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
index 5fa807b3f73..66134878c77 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
@@ -45,6 +45,27 @@ function createParamConfig(
   }
 }
 
+/**
+ * Determines the input control type to render for an MCP tool parameter schema.
+ */
+function getInputType(paramSchema: any) {
+  if (paramSchema.enum) return 'dropdown'
+  if (paramSchema.type === 'boolean') return 'switch'
+  if (paramSchema.type === 'number' || paramSchema.type === 'integer') {
+    if (paramSchema.minimum !== undefined && paramSchema.maximum !== undefined) {
+      return 'slider'
+    }
+    return 'short-input'
+  }
+  if (paramSchema.type === 'string') {
+    if (paramSchema.format === 'date-time') return 'short-input'
+    if (paramSchema.maxLength && paramSchema.maxLength > 100) return 'long-input'
+    return 'short-input'
+  }
+  if (paramSchema.type === 'array') return 'long-input'
+  return 'short-input'
+}
+
 export function McpDynamicArgs({
   blockId,
   subBlockId,
@@ -115,24 +136,6 @@ export function McpDynamicArgs({
     [currentArgs, setToolArgs, disabled]
   )
 
-  const getInputType = (paramSchema: any) => {
-    if (paramSchema.enum) return 'dropdown'
-    if (paramSchema.type === 'boolean') return 'switch'
-    if (paramSchema.type === 'number' || paramSchema.type === 'integer') {
-      if (paramSchema.minimum !== undefined && paramSchema.maximum !== undefined) {
-        return 'slider'
-      }
-      return 'short-input'
-    }
-    if (paramSchema.type === 'string') {
-      if (paramSchema.format === 'date-time') return 'short-input'
-      if (paramSchema.maxLength && paramSchema.maxLength > 100) return 'long-input'
-      return 'short-input'
-    }
-    if (paramSchema.type === 'array') return 'long-input'
-    return 'short-input'
-  }
-
   const renderParameterInput = (paramName: string, paramSchema: any) => {
     const current = currentArgs()
     const value = current[paramName]
@@ -336,6 +339,7 @@ export function McpDynamicArgs({
         type='text'
         name='fakeusernameremembered'
         autoComplete='username'
+        aria-label='Hidden username field to prevent autofill'
         style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
         tabIndex={-1}
         readOnly
@@ -344,6 +348,7 @@ export function McpDynamicArgs({
         type='password'
         name='fakepasswordremembered'
         autoComplete='current-password'
+        aria-label='Hidden password field to prevent autofill'
         style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
         tabIndex={-1}
         readOnly
@@ -352,6 +357,7 @@ export function McpDynamicArgs({
         type='email'
         name='fakeemailremembered'
         autoComplete='email'
+        aria-label='Hidden email field to prevent autofill'
         style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
         tabIndex={-1}
         readOnly
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
index ac65ed2eb68..b8bc8ef91e4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { Combobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -28,7 +28,6 @@ export function McpServerSelector({
   const activeSearchTarget = useActiveSearchTarget()
   const params = useParams()
   const workspaceId = params.workspaceId as string
-  const [inputValue, setInputValue] = useState('')
 
   const { data: servers = [], isLoading, error } = useMcpServers(workspaceId)
   const enabledServers = servers.filter((s) => s.enabled && !s.deletedAt)
@@ -42,6 +41,13 @@ export function McpServerSelector({
 
   const selectedServer = enabledServers.find((server) => server.id === selectedServerId)
 
+  const [inputValue, setInputValue] = useState(() => (selectedServer ? selectedServer.name : ''))
+  const prevSelectedServerRef = useRef(selectedServer)
+  if (prevSelectedServerRef.current !== selectedServer) {
+    prevSelectedServerRef.current = selectedServer
+    setInputValue(selectedServer ? selectedServer.name : '')
+  }
+
   const comboboxOptions = useMemo(
     () =>
       enabledServers.map((server) => ({
@@ -63,13 +69,6 @@ export function McpServerSelector({
     }
   }
 
-  useEffect(() => {
-    if (selectedServer) {
-      setInputValue(selectedServer.name)
-    } else {
-      setInputValue('')
-    }
-  }, [selectedServer])
   const workflowSearchHighlight = getWorkflowSearchLabelHighlight({
     activeSearchTarget,
     subBlockId: subBlock.id,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
index 10739b60484..14e1a8d8d95 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Combobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -55,6 +55,12 @@ export function McpToolSelector({
 
   const selectedTool = availableTools.find((tool) => tool.id === selectedToolId)
 
+  const prevSelectedToolRef = useRef<typeof selectedTool>(undefined)
+  if (prevSelectedToolRef.current !== selectedTool) {
+    prevSelectedToolRef.current = selectedTool
+    setInputValue(selectedTool ? selectedTool.name : '')
+  }
+
   useEffect(() => {
     if (serverValue && selectedToolId && !selectedTool && availableTools.length === 0) {
       refreshTools()
@@ -103,14 +109,6 @@ export function McpToolSelector({
     }
   }
 
-  useEffect(() => {
-    if (selectedTool) {
-      setInputValue(selectedTool.name)
-    } else {
-      setInputValue('')
-    }
-  }, [selectedTool])
-
   const isDisabled = disabled || !serverValue
   const workflowSearchHighlight = getWorkflowSearchLabelHighlight({
     activeSearchTarget,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 6f1367e2141..c7850217484 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -43,6 +43,13 @@ const ROLE_BEFORE_CONTENT_PATTERN = /"role"\s*:\s*"(system|user|assistant)"[^{]*
 const unescapeContent = (str: string): string =>
   str.replace(/\\n/g, '\n').replace(/\\"/g, '"').replace(/\\\\/g, '\\')
 
+/**
+ * Capitalizes the first letter of the role
+ */
+const formatRole = (role: string): string => {
+  return role.charAt(0).toUpperCase() + role.slice(1)
+}
+
 /**
  * Interface for individual message in the messages array
  */
@@ -245,22 +252,38 @@ export function MessagesInput({
     [wandHook]
   )
 
-  const localMessagesRef = useRef(localMessages)
-  localMessagesRef.current = localMessages
+  /**
+   * Adopts an external message source (preview prop or persisted store value) into the
+   * local editable buffer during render, so the sync happens without an extra committed
+   * frame or a copy-into-state effect. Only reacts when one of the sources changes
+   * identity, and only overwrites when the value actually differs (deep), matching the
+   * previous effect's guards. Regenerates stable render keys in lockstep with the reset.
+   */
+  const messagesSyncRef = useRef<{
+    isPreview: boolean
+    previewValue: typeof previewValue
+    messages: typeof messages
+  } | null>(null)
 
-  useEffect(() => {
+  if (
+    messagesSyncRef.current === null ||
+    messagesSyncRef.current.isPreview !== isPreview ||
+    messagesSyncRef.current.previewValue !== previewValue ||
+    messagesSyncRef.current.messages !== messages
+  ) {
+    messagesSyncRef.current = { isPreview, previewValue, messages }
     if (isPreview && previewValue && Array.isArray(previewValue)) {
-      if (!isEqual(localMessagesRef.current, previewValue)) {
+      if (!isEqual(localMessages, previewValue)) {
         messageIdsRef.current = previewValue.map(() => generateShortId())
         setLocalMessages(previewValue)
       }
     } else if (messages && Array.isArray(messages) && messages.length > 0) {
-      if (!isEqual(localMessagesRef.current, messages)) {
+      if (!isEqual(localMessages, messages)) {
         messageIdsRef.current = messages.map(() => generateShortId())
         setLocalMessages(messages)
       }
     }
-  }, [isPreview, previewValue, messages])
+  }
 
   /**
    * Gets the current messages array
@@ -390,13 +413,6 @@ export function MessagesInput({
     [localMessages, setMessages, isPreview, disabled]
   )
 
-  /**
-   * Capitalizes the first letter of the role
-   */
-  const formatRole = (role: string): string => {
-    return role.charAt(0).toUpperCase() + role.slice(1)
-  }
-
   /**
    * Handles header click to focus the textarea
    */
@@ -716,6 +732,7 @@ export function MessagesInput({
                       textareaRefs.current[fieldId] = el
                     }}
                     className='relative z-[2] m-0 box-border h-auto min-h-[80px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent p-2 font-medium font-sans text-sm text-transparent leading-[1.5] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden'
+                    aria-label={`Message ${index + 1} content`}
                     placeholder='Enter message content...'
                     value={message.content}
                     onChange={fieldHandlers.onChange}
@@ -797,6 +814,7 @@ export function MessagesInput({
                     <div
                       role='separator'
                       aria-orientation='horizontal'
+                      tabIndex={-1}
                       className='absolute right-1 bottom-1 z-[3] flex size-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                       onMouseDown={(e) => handleResizeStart(fieldId, e)}
                       onDragStart={(e) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
index e52684555d9..a748e4fa1b4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
@@ -1,5 +1,5 @@
 import type React from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { Button, Combobox as EditableCombobox } from '@sim/emcn'
 import { X } from 'lucide-react'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -82,19 +82,10 @@ export function SelectorCombobox({
   const [inputValue, setInputValue] = useState(selectedLabel)
   const previousActiveValue = useRef<string | undefined>(activeValue)
 
-  useEffect(() => {
-    if (previousActiveValue.current !== activeValue) {
-      previousActiveValue.current = activeValue
-      setIsEditing(false)
-    }
-  }, [activeValue])
-
-  useEffect(() => {
-    if (!allowSearch) return
-    if (!isEditing) {
-      setInputValue(selectedLabel)
-    }
-  }, [selectedLabel, allowSearch, isEditing])
+  if (previousActiveValue.current !== activeValue) {
+    previousActiveValue.current = activeValue
+    setIsEditing(false)
+  }
 
   const comboboxOptions = useMemo(
     () =>
@@ -128,7 +119,7 @@ export function SelectorCombobox({
   )
 
   const showClearButton = Boolean(activeValue) && !disabled && !readOnly
-  const displayValue = allowSearch ? inputValue : selectedLabel
+  const displayValue = allowSearch ? (isEditing ? inputValue : selectedLabel) : selectedLabel
   const workflowSearchHighlight = getWorkflowSearchLabelHighlight({
     activeSearchTarget,
     blockId,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index 80be87af9ea..9ee3c1828d3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -147,12 +147,23 @@ export function SkillInput({
                 className='group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out'
               >
                 <div
+                  role='button'
+                  tabIndex={0}
                   className='flex cursor-pointer items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]'
                   onClick={() => {
                     if (fullSkill && !disabled && !isPreview) {
                       setEditingSkill(fullSkill)
                     }
                   }}
+                  onKeyDown={(e) => {
+                    if (e.target !== e.currentTarget) return
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      if (fullSkill && !disabled && !isPreview) {
+                        setEditingSkill(fullSkill)
+                      }
+                    }
+                  }}
                 >
                   <div className='flex min-w-0 flex-1 items-center gap-2'>
                     <div className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--border-1)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
index 3d3745abb4c..7a850783e8e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
@@ -570,8 +570,11 @@ function useCapabilitySelection(blockId: string): ReadonlySet<string> {
       })
     })
   )
-  return useMemo(
-    () => new Set(SLACK_CAPABILITIES.filter((_, i) => enabledFlags[i]).map((c) => c.id)),
-    [enabledFlags]
-  )
+  return useMemo(() => {
+    const selected = new Set<string>()
+    SLACK_CAPABILITIES.forEach((c, i) => {
+      if (enabledFlags[i]) selected.add(c.id)
+    })
+    return selected
+  }, [enabledFlags])
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
index 35c68663cde..5ddb241083b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
@@ -61,58 +61,6 @@ export function SortRuleRow({
       label,
     })
 
-  const renderHeader = () => (
-    <div
-      role='group'
-      aria-label={`Sort ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => onToggleCollapse(rule.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => onToggleCollapse(rule.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
-          {rule.collapsed && rule.column
-            ? formatDisplayText(getColumnLabel(rule.column), {
-                workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
-              })
-            : `Sort ${index + 1}`}
-        </span>
-        {rule.collapsed && rule.column && (
-          <Badge variant='type' size='sm'>
-            {formatDisplayText(getDirectionLabel(rule.direction), {
-              workflowSearchHighlight: getLabelHighlight(
-                'direction',
-                getDirectionLabel(rule.direction)
-              ),
-            })}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
-      >
-        <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Sort</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={() => onRemove(rule.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Sort</span>
-        </Button>
-      </div>
-    </div>
-  )
-
   const renderContent = () => (
     <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
       <div className='flex flex-col gap-1.5'>
@@ -168,7 +116,55 @@ export function SortRuleRow({
         rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
-      {renderHeader()}
+      <div
+        role='group'
+        aria-label={`Sort ${index + 1}`}
+        className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
+        onClick={() => onToggleCollapse(rule.id)}
+        onKeyDown={(event) => {
+          if (event.target !== event.currentTarget) return
+          handleKeyboardActivation(event, () => onToggleCollapse(rule.id))
+        }}
+      >
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
+          <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
+            {rule.collapsed && rule.column
+              ? formatDisplayText(getColumnLabel(rule.column), {
+                  workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
+                })
+              : `Sort ${index + 1}`}
+          </span>
+          {rule.collapsed && rule.column && (
+            <Badge variant='type' size='sm'>
+              {formatDisplayText(getDirectionLabel(rule.direction), {
+                workflowSearchHighlight: getLabelHighlight(
+                  'direction',
+                  getDirectionLabel(rule.direction)
+                ),
+              })}
+            </Badge>
+          )}
+        </div>
+        <div
+          role='presentation'
+          className='flex items-center gap-2 pl-2'
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
+            <Plus className='size-[14px]' />
+            <span className='sr-only'>Add Sort</span>
+          </Button>
+          <Button
+            variant='ghost'
+            onClick={() => onRemove(rule.id)}
+            disabled={isReadOnly}
+            className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          >
+            <Trash className='size-[14px]' />
+            <span className='sr-only'>Delete Sort</span>
+          </Button>
+        </div>
+      </div>
       {!rule.collapsed && renderContent()}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
index d11ec546900..8efe9635248 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
@@ -52,7 +52,7 @@ export function SortBuilder({
   )
 
   const value = isPreview ? previewValue : storeValue
-  const rules: SortRule[] = Array.isArray(value) ? value : []
+  const rules: SortRule[] = useMemo(() => (Array.isArray(value) ? value : []), [value])
   const isReadOnly = isPreview || disabled
 
   const addRule = useCallback(() => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 25324d61f91..f80d2617e20 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -92,6 +92,35 @@ const validateFieldName = (name: string): string => name.replace(/[\x00-\x1F"\\]
 
 const jsonHighlight = (code: string): string => highlight(code, languages.json, 'json')
 
+/**
+ * Renders a field label. A stable component (not an inline render call) so React
+ * preserves its identity across renders.
+ */
+function FieldLabel({ label }: { label: string }) {
+  return <Label>{label}</Label>
+}
+
+/**
+ * Renders the line-number gutter for the code editors. A stable component (not an
+ * inline render call) so React preserves its identity across renders.
+ */
+function LineNumbers({ count }: { count: number }) {
+  return Array.from({ length: count }, (_, i) => (
+    <div
+      key={i}
+      className='font-medium font-mono text-[var(--text-muted)] text-xs'
+      style={{ height: `${21}px`, lineHeight: `${21}px` }}
+    >
+      {i + 1}
+    </div>
+  ))
+}
+
+/**
+ * Generates a unique field key for name inputs to avoid collision with value inputs
+ */
+const getNameFieldKey = (fieldId: string) => `name-${fieldId}`
+
 export function FieldFormat({
   blockId,
   subBlockId,
@@ -140,8 +169,6 @@ export function FieldFormat({
   const fields: Field[] = Array.isArray(value) && value.length > 0 ? value : [fallbackField]
   const isReadOnly = isPreview || disabled
 
-  const renderFieldLabel = (label: string) => <Label>{label}</Label>
-
   /**
    * Resolves the current editor mode for a file field. The uploader is only
    * offered when it can represent the stored value losslessly (empty or all
@@ -284,11 +311,6 @@ export function FieldFormat({
     if (overlay) overlay.scrollLeft = scrollLeft
   }
 
-  /**
-   * Generates a unique field key for name inputs to avoid collision with value inputs
-   */
-  const getNameFieldKey = (fieldId: string) => `name-${fieldId}`
-
   /**
    * Renders the name input field with tag dropdown support
    */
@@ -480,21 +502,11 @@ export function FieldFormat({
       const lineCount = fieldValue.split('\n').length
       const gutterWidth = calculateGutterWidth(lineCount)
 
-      const renderLineNumbers = () => {
-        return Array.from({ length: lineCount }, (_, i) => (
-          <div
-            key={i}
-            className='font-medium font-mono text-[var(--text-muted)] text-xs'
-            style={{ height: `${21}px`, lineHeight: `${21}px` }}
-          >
-            {i + 1}
-          </div>
-        ))
-      }
-
       return (
         <Code.Container className='min-h-[120px]'>
-          <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
+          <Code.Gutter width={gutterWidth}>
+            <LineNumbers count={lineCount} />
+          </Code.Gutter>
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
               {'{\n  "key": "value"\n}'}
@@ -515,21 +527,11 @@ export function FieldFormat({
       const lineCount = fieldValue.split('\n').length
       const gutterWidth = calculateGutterWidth(lineCount)
 
-      const renderLineNumbers = () => {
-        return Array.from({ length: lineCount }, (_, i) => (
-          <div
-            key={i}
-            className='font-medium font-mono text-[var(--text-muted)] text-xs'
-            style={{ height: `${21}px`, lineHeight: `${21}px` }}
-          >
-            {i + 1}
-          </div>
-        ))
-      }
-
       return (
         <Code.Container className='min-h-[120px]'>
-          <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
+          <Code.Gutter width={gutterWidth}>
+            <LineNumbers count={lineCount} />
+          </Code.Gutter>
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
               {'[\n  1, 2, 3\n]'}
@@ -574,20 +576,12 @@ export function FieldFormat({
 
       const lineCount = fieldValue.split('\n').length
       const gutterWidth = calculateGutterWidth(lineCount)
-      const renderLineNumbers = () =>
-        Array.from({ length: lineCount }, (_, i) => (
-          <div
-            key={i}
-            className='font-medium font-mono text-[var(--text-muted)] text-xs'
-            style={{ height: `${21}px`, lineHeight: `${21}px` }}
-          >
-            {i + 1}
-          </div>
-        ))
 
       return (
         <Code.Container className='min-h-[120px]'>
-          <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
+          <Code.Gutter width={gutterWidth}>
+            <LineNumbers count={lineCount} />
+          </Code.Gutter>
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
               {
@@ -672,13 +666,13 @@ export function FieldFormat({
             <ExpandableContent>
               <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
                 <div className='flex flex-col gap-1.5'>
-                  {renderFieldLabel('Name')}
+                  <FieldLabel label='Name' />
                   <div className='relative'>{renderNameInput(field)}</div>
                 </div>
 
                 {showType && (
                   <div className='flex flex-col gap-1.5'>
-                    {renderFieldLabel('Type')}
+                    <FieldLabel label='Type' />
                     <Combobox
                       options={TYPE_OPTIONS}
                       value={field.type}
@@ -690,7 +684,7 @@ export function FieldFormat({
 
                 {showDescription && (
                   <div className='flex flex-col gap-1.5'>
-                    {renderFieldLabel('Description')}
+                    <FieldLabel label='Description' />
                     <div className='relative'>
                       <Input
                         value={field.description ?? ''}
@@ -738,11 +732,11 @@ export function FieldFormat({
                   <div className='flex flex-col gap-1.5'>
                     {isFileFieldType(field.type) ? (
                       <div className='flex items-center justify-between'>
-                        {renderFieldLabel('Value')}
+                        <FieldLabel label='Value' />
                         {renderFileModeToggle(field)}
                       </div>
                     ) : (
-                      renderFieldLabel('Value')
+                      <FieldLabel label='Value' />
                     )}
                     <div className='relative'>{renderValueInput(field)}</div>
                   </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
index 80996a1adae..74227cb554a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
@@ -50,6 +50,72 @@ interface TableCellProps {
   subBlockId: string
 }
 
+interface TableHeaderProps {
+  columns: string[]
+  blockId: string
+  subBlockId: string
+  activeSearchTarget: ReturnType<typeof useActiveSearchTarget>
+}
+
+function TableHeader({ columns, blockId, subBlockId, activeSearchTarget }: TableHeaderProps) {
+  return (
+    <thead className='bg-transparent'>
+      <tr className='border-[var(--border-1)] border-b bg-transparent'>
+        {columns.map((column, index) => {
+          const workflowSearchHighlight = getWorkflowSearchLabelHighlight({
+            activeSearchTarget,
+            blockId,
+            subBlockId,
+            valuePath: ['columns', index],
+            label: column,
+          })
+          return (
+            <th
+              key={column}
+              className={cn(
+                'bg-transparent px-2.5 py-[5px] text-left font-medium text-[var(--text-tertiary)] text-sm',
+                index < columns.length - 1 && 'border-[var(--border-1)] border-r'
+              )}
+            >
+              {formatDisplayText(column, { workflowSearchHighlight })}
+            </th>
+          )
+        })}
+      </tr>
+    </thead>
+  )
+}
+
+interface DeleteButtonCellProps {
+  rowIndex: number
+  rowsLength: number
+  isPreview: boolean
+  disabled: boolean
+  onDelete: (rowIndex: number) => void
+}
+
+function DeleteButtonCell({
+  rowIndex,
+  rowsLength,
+  isPreview,
+  disabled,
+  onDelete,
+}: DeleteButtonCellProps) {
+  if (rowsLength <= 1 || isPreview || disabled) return null
+
+  return (
+    <td className='w-0 p-0'>
+      <Button
+        variant='ghost'
+        className='-translate-y-1/2 absolute top-1/2 right-[8px] opacity-0 transition-opacity group-hover:opacity-100'
+        onClick={() => onDelete(rowIndex)}
+      >
+        <Trash className='size-[14px]' />
+      </Button>
+    </td>
+  )
+}
+
 function TableCell({
   row,
   rowIndex,
@@ -142,6 +208,7 @@ function TableCell({
           type='text'
           value={cellValue}
           placeholder={column}
+          aria-label={column}
           onChange={handlers.onChange}
           onKeyDown={handlers.onKeyDown}
           onScroll={handleScroll}
@@ -326,53 +393,16 @@ export function Table({
     setStoreValue(rows.filter((_, index) => index !== rowIndex))
   }
 
-  const renderHeader = () => (
-    <thead className='bg-transparent'>
-      <tr className='border-[var(--border-1)] border-b bg-transparent'>
-        {columns.map((column, index) => {
-          const workflowSearchHighlight = getWorkflowSearchLabelHighlight({
-            activeSearchTarget,
-            blockId,
-            subBlockId,
-            valuePath: ['columns', index],
-            label: column,
-          })
-          return (
-            <th
-              key={column}
-              className={cn(
-                'bg-transparent px-2.5 py-[5px] text-left font-medium text-[var(--text-tertiary)] text-sm',
-                index < columns.length - 1 && 'border-[var(--border-1)] border-r'
-              )}
-            >
-              {formatDisplayText(column, { workflowSearchHighlight })}
-            </th>
-          )
-        })}
-      </tr>
-    </thead>
-  )
-
-  const renderDeleteButton = (rowIndex: number) =>
-    rows.length > 1 &&
-    !isPreview &&
-    !disabled && (
-      <td className='w-0 p-0'>
-        <Button
-          variant='ghost'
-          className='-translate-y-1/2 absolute top-1/2 right-[8px] opacity-0 transition-opacity group-hover:opacity-100'
-          onClick={() => handleDeleteRow(rowIndex)}
-        >
-          <Trash className='size-[14px]' />
-        </Button>
-      </td>
-    )
-
   return (
     <div className='relative'>
       <div className='overflow-visible rounded-sm border border-[var(--border-1)] bg-[var(--surface-2)] dark:bg-[var(--code-bg)]'>
         <table className='w-full bg-transparent'>
-          {renderHeader()}
+          <TableHeader
+            columns={columns}
+            blockId={blockId}
+            subBlockId={subBlockId}
+            activeSearchTarget={activeSearchTarget}
+          />
           <tbody className='bg-transparent'>
             {rows.map((row, rowIndex) => (
               <tr
@@ -399,7 +429,13 @@ export function Table({
                     subBlockId={subBlockId}
                   />
                 ))}
-                {renderDeleteButton(rowIndex)}
+                <DeleteButtonCell
+                  rowIndex={rowIndex}
+                  rowsLength={rows.length}
+                  isPreview={isPreview}
+                  disabled={disabled}
+                  onDelete={handleDeleteRow}
+                />
               </tr>
             ))}
           </tbody>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx
index 73e17424c91..b5505b5a5d1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx
@@ -118,6 +118,11 @@ export const KeyboardNavigationHandler: React.FC<KeyboardNavigationHandlerProps>
     const indices: number[] = []
     const nestedPath = nestedNav?.nestedPath ?? []
 
+    const tagIndexMap = new Map<string, number>()
+    flatTagList.forEach((item, i) => {
+      if (!tagIndexMap.has(item.tag)) tagIndexMap.set(item.tag, i)
+    })
+
     if (isInFolder && currentFolder) {
       let currentNestedTag: NestedTag | null = null
 
@@ -144,7 +149,7 @@ export const KeyboardNavigationHandler: React.FC<KeyboardNavigationHandlerProps>
         }
         if (currentNestedTag.children) {
           for (const child of currentNestedTag.children) {
-            const idx = flatTagList.findIndex((item) => item.tag === child.fullTag)
+            const idx = tagIndexMap.get(child.fullTag) ?? -1
             if (idx >= 0) {
               indices.push(idx)
             }
@@ -153,7 +158,7 @@ export const KeyboardNavigationHandler: React.FC<KeyboardNavigationHandlerProps>
         if (currentNestedTag.nestedChildren) {
           for (const nestedChild of currentNestedTag.nestedChildren) {
             if (nestedChild.parentTag) {
-              const idx = flatTagList.findIndex((item) => item.tag === nestedChild.parentTag)
+              const idx = tagIndexMap.get(nestedChild.parentTag) ?? -1
               if (idx >= 0) {
                 indices.push(idx)
               }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
index 6f62851c289..b22aa4016fb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
@@ -42,6 +42,8 @@ import type { BlockState } from '@/stores/workflows/workflow/types'
 
 const EMPTY_VARIABLES: Variable[] = []
 
+const emptyVariableInfoMap: Record<string, { type: string; id: string }> = {}
+
 /**
  * Context for sharing nested navigation state between components.
  * This enables unlimited nesting depth with a single back button.
@@ -65,7 +67,7 @@ interface NestedNavigationContextValue {
 const NestedNavigationContext = React.createContext<NestedNavigationContextValue | null>(null)
 
 /** Hook to access nested navigation state from child components */
-export const useNestedNavigation = () => React.useContext(NestedNavigationContext)
+export const useNestedNavigation = () => React.use(NestedNavigationContext)
 
 /**
  * Props for the TagDropdown component
@@ -1019,8 +1021,6 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     [inputValue, cursorPosition]
   )
 
-  const emptyVariableInfoMap: Record<string, { type: string; id: string }> = {}
-
   /**
    * Computes tags, variable info, and block tag groups
    */
@@ -1349,7 +1349,6 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     loops,
     parallels,
     workflowVariables,
-    workflowId,
   ])
 
   const filteredTags = useMemo(() => {
@@ -1366,14 +1365,15 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
       }
     })
 
-    const filteredGroups = blockTagGroups
-      .map((group: BlockTagGroup) => ({
-        ...group,
-        tags: group.tags.filter(
-          (tag: string) => !searchTerm || tag.toLowerCase().includes(searchTerm)
-        ),
-      }))
-      .filter((group: BlockTagGroup) => group.tags.length > 0)
+    const filteredGroups: BlockTagGroup[] = []
+    for (const group of blockTagGroups) {
+      const groupTags = group.tags.filter(
+        (tag: string) => !searchTerm || tag.toLowerCase().includes(searchTerm)
+      )
+      if (groupTags.length > 0) {
+        filteredGroups.push({ ...group, tags: groupTags })
+      }
+    }
 
     return {
       variableTags: varTags,
@@ -1631,16 +1631,20 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     [nestedPath]
   )
 
-  useEffect(() => {
+  const prevVisibleRef = useRef(visible)
+  if (prevVisibleRef.current !== visible) {
+    prevVisibleRef.current = visible
     if (!visible) {
       setNestedPath([])
       baseFolderRef.current = null
     }
-  }, [visible])
+  }
 
-  useEffect(() => {
+  const prevFlatTagCountRef = useRef(flatTagList.length)
+  if (prevFlatTagCountRef.current !== flatTagList.length) {
+    prevFlatTagCountRef.current = flatTagList.length
     setSelectedIndex(0)
-  }, [flatTagList.length])
+  }
 
   const onCloseEvent = useEffectEvent(() => onClose?.())
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index a6df56db169..3666716cade 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -36,6 +36,35 @@ interface CodeEditorProps {
 
 const EMPTY_SCHEMA_PARAMETERS: NonNullable<CodeEditorProps['schemaParameters']> = []
 
+interface LineNumbersProps {
+  visualLineHeights: number[]
+}
+
+function LineNumbers({ visualLineHeights }: LineNumbersProps): ReactElement[] {
+  const numbers: ReactElement[] = []
+  let lineNumber = 1
+
+  visualLineHeights.forEach((height) => {
+    for (let i = 0; i < height; i++) {
+      numbers.push(
+        <div
+          key={`${lineNumber}-${i}`}
+          className={cn(
+            'text-xs tabular-nums',
+            `leading-[${CODE_LINE_HEIGHT_PX}px]`,
+            i > 0 ? 'invisible' : 'text-[var(--code-line-number)]'
+          )}
+        >
+          {lineNumber}
+        </div>
+      )
+    }
+    lineNumber++
+  })
+
+  return numbers
+}
+
 export function CodeEditor({
   value,
   onChange,
@@ -102,31 +131,6 @@ export function CodeEditor({
   const lineCount = value.split('\n').length
   const gutterWidth = calculateGutterWidth(lineCount)
 
-  const renderLineNumbers = () => {
-    const numbers: ReactElement[] = []
-    let lineNumber = 1
-
-    visualLineHeights.forEach((height) => {
-      for (let i = 0; i < height; i++) {
-        numbers.push(
-          <div
-            key={`${lineNumber}-${i}`}
-            className={cn(
-              'text-xs tabular-nums',
-              `leading-[${CODE_LINE_HEIGHT_PX}px]`,
-              i > 0 ? 'invisible' : 'text-[var(--code-line-number)]'
-            )}
-          >
-            {lineNumber}
-          </div>
-        )
-      }
-      lineNumber++
-    })
-
-    return numbers
-  }
-
   const customHighlight = (code: string) => {
     if (!highlightVariables || language !== 'javascript') {
       return highlight(code, languages[language], language)
@@ -197,7 +201,7 @@ export function CodeEditor({
       )}
 
       <Code.Gutter width={gutterWidth} className={gutterClassName}>
-        {renderLineNumbers()}
+        <LineNumbers visualLineHeights={visualLineHeights} />
       </Code.Gutter>
 
       <Code.Content paddingLeft={`${gutterWidth}px`} editorRef={editorRef}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
index ab399baa0de..00e84d102f6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -68,6 +68,64 @@ export interface CustomTool {
 
 type ToolSection = 'schema' | 'code'
 
+/**
+ * Validates a custom tool JSON schema string against the expected function shape.
+ */
+const validateSchema = (schema: string): { isValid: boolean; error: string | null } => {
+  if (!schema) return { isValid: false, error: null }
+
+  try {
+    const parsed = JSON.parse(schema)
+
+    if (!parsed.type || parsed.type !== 'function') {
+      return { isValid: false, error: 'Missing "type": "function"' }
+    }
+    if (!parsed.function || !parsed.function.name) {
+      return { isValid: false, error: 'Missing function.name field' }
+    }
+    if (!parsed.function.parameters) {
+      return { isValid: false, error: 'Missing function.parameters object' }
+    }
+    if (!parsed.function.parameters.type) {
+      return { isValid: false, error: 'Missing parameters.type field' }
+    }
+    if (parsed.function.parameters.properties === undefined) {
+      return { isValid: false, error: 'Missing parameters.properties field' }
+    }
+    if (
+      typeof parsed.function.parameters.properties !== 'object' ||
+      parsed.function.parameters.properties === null
+    ) {
+      return { isValid: false, error: 'parameters.properties must be an object' }
+    }
+
+    return { isValid: true, error: null }
+  } catch {
+    return { isValid: false, error: 'Invalid JSON format' }
+  }
+}
+
+/**
+ * Determines whether the schema-parameter autocomplete dropdown should show for
+ * the current cursor context, along with matching parameters.
+ */
+const checkSchemaParamTrigger = (text: string, cursorPos: number, parameters: any[]) => {
+  if (parameters.length === 0) return { show: false, searchTerm: '' }
+
+  const beforeCursor = text.substring(0, cursorPos)
+  const words = beforeCursor.split(/[\s=();,{}[\]]+/)
+  const currentWord = words[words.length - 1] || ''
+
+  if (currentWord.length > 0 && /^[a-zA-Z_][\w]*$/.test(currentWord)) {
+    const matchingParams = parameters.filter((param) =>
+      param.name.toLowerCase().startsWith(currentWord.toLowerCase())
+    )
+    return { show: matchingParams.length > 0, searchTerm: currentWord, matches: matchingParams }
+  }
+
+  return { show: false, searchTerm: '' }
+}
+
 export function CustomToolModal({
   open,
   onOpenChange,
@@ -84,7 +142,7 @@ export function CustomToolModal({
   const [schemaError, setSchemaError] = useState<string | null>(null)
   const [codeError, setCodeError] = useState<string | null>(null)
   const [isEditing, setIsEditing] = useState(false)
-  const [toolId, setToolId] = useState<string | undefined>(undefined)
+  const toolIdRef = useRef<string | undefined>(undefined)
   const [initialJsonSchema, setInitialJsonSchema] = useState('')
   const [initialFunctionCode, setInitialFunctionCode] = useState('')
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
@@ -319,7 +377,7 @@ try {
         setInitialJsonSchema(schemaValue)
         setInitialFunctionCode(codeValue)
         setIsEditing(true)
-        setToolId(initialValues.id)
+        toolIdRef.current = initialValues.id
       } catch (error) {
         logger.error('Error initializing form with initial values:', { error })
         setSchemaError('Failed to load tool data. Please try again.')
@@ -350,7 +408,7 @@ try {
     setCodeError(null)
     setActiveSection('schema')
     setIsEditing(false)
-    setToolId(undefined)
+    toolIdRef.current = undefined
     setIsSchemaPromptActive(false)
     setIsCodePromptActive(false)
     setSchemaPromptInput('')
@@ -369,40 +427,6 @@ try {
     onOpenChange(false)
   }
 
-  const validateSchema = (schema: string): { isValid: boolean; error: string | null } => {
-    if (!schema) return { isValid: false, error: null }
-
-    try {
-      const parsed = JSON.parse(schema)
-
-      if (!parsed.type || parsed.type !== 'function') {
-        return { isValid: false, error: 'Missing "type": "function"' }
-      }
-      if (!parsed.function || !parsed.function.name) {
-        return { isValid: false, error: 'Missing function.name field' }
-      }
-      if (!parsed.function.parameters) {
-        return { isValid: false, error: 'Missing function.parameters object' }
-      }
-      if (!parsed.function.parameters.type) {
-        return { isValid: false, error: 'Missing parameters.type field' }
-      }
-      if (parsed.function.parameters.properties === undefined) {
-        return { isValid: false, error: 'Missing parameters.properties field' }
-      }
-      if (
-        typeof parsed.function.parameters.properties !== 'object' ||
-        parsed.function.parameters.properties === null
-      ) {
-        return { isValid: false, error: 'parameters.properties must be an object' }
-      }
-
-      return { isValid: true, error: null }
-    } catch {
-      return { isValid: false, error: 'Invalid JSON format' }
-    }
-  }
-
   const isSchemaValid = useMemo(() => validateSchema(jsonSchema).isValid, [jsonSchema])
 
   const hasChanges = useMemo(() => {
@@ -452,7 +476,7 @@ try {
       const name = schema.function.name
       const description = schema.function.description || ''
 
-      let toolIdToUpdate: string | undefined = toolId
+      let toolIdToUpdate: string | undefined = toolIdRef.current
       if (isEditing && !toolIdToUpdate && initialValues?.schema) {
         const originalName = initialValues.schema.function?.name
         if (originalName) {
@@ -591,23 +615,6 @@ try {
     }
   }
 
-  const checkSchemaParamTrigger = (text: string, cursorPos: number, parameters: any[]) => {
-    if (parameters.length === 0) return { show: false, searchTerm: '' }
-
-    const beforeCursor = text.substring(0, cursorPos)
-    const words = beforeCursor.split(/[\s=();,{}[\]]+/)
-    const currentWord = words[words.length - 1] || ''
-
-    if (currentWord.length > 0 && /^[a-zA-Z_][\w]*$/.test(currentWord)) {
-      const matchingParams = parameters.filter((param) =>
-        param.name.toLowerCase().startsWith(currentWord.toLowerCase())
-      )
-      return { show: matchingParams.length > 0, searchTerm: currentWord, matches: matchingParams }
-    }
-
-    return { show: false, searchTerm: '' }
-  }
-
   const handleEnvVarSelect = (newValue: string) => {
     setFunctionCode(newValue)
     setShowEnvVars(false)
@@ -794,6 +801,7 @@ try {
   }
 
   const handleDelete = async () => {
+    const toolId = toolIdRef.current
     if (!toolId || !isEditing) return
 
     try {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index 46e7ff7c15e..41c21f14982 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -392,6 +392,16 @@ function getOperationOptions(blockType: string): { label: string; id: string }[]
   })
 }
 
+/**
+ * Evaluates whether a tool parameter's UI condition is satisfied for the given
+ * stored tool's current values.
+ */
+function evaluateParameterCondition(param: ToolParameterConfig, tool: StoredTool): boolean {
+  if (!('uiComponent' in param) || !param.uiComponent?.condition) return true
+  const currentValues: Record<string, unknown> = { operation: tool.operation, ...tool.params }
+  return evaluateSubBlockCondition(param.uiComponent.condition as SubBlockCondition, currentValues)
+}
+
 /**
  * Creates a styled icon element for tool items in the selection dropdown.
  *
@@ -490,13 +500,16 @@ export const ToolInput = memo(function ToolInput({
 
   const value = isPreview ? previewValue : storeValue
 
-  const selectedTools: StoredTool[] =
-    Array.isArray(value) &&
-    value.length > 0 &&
-    value[0] !== null &&
-    typeof value[0]?.type === 'string'
-      ? (value as StoredTool[])
-      : []
+  const selectedTools = useMemo<StoredTool[]>(
+    () =>
+      Array.isArray(value) &&
+      value.length > 0 &&
+      value[0] !== null &&
+      typeof value[0]?.type === 'string'
+        ? (value as StoredTool[])
+        : [],
+    [value]
+  )
 
   // Tool categories the consuming block can't run (declared on its tool-input
   // subBlock): shown in the picker but greyed out with a tooltip instead of added.
@@ -512,8 +525,9 @@ export const ToolInput = memo(function ToolInput({
   // Uses canonical resolution so the active field (basic vs advanced) is respected.
   const toolCredentialId = useMemo(() => {
     const allBlocks = getAllBlocks()
+    const blocksByType = new Map(allBlocks.map((b) => [b.type, b]))
     for (const tool of selectedTools) {
-      const blockConfig = allBlocks.find((b: { type: string }) => b.type === tool.type)
+      const blockConfig = blocksByType.get(tool.type)
       if (!blockConfig?.subBlocks) continue
       const toolCanonical = buildCanonicalIndex(blockConfig.subBlocks)
       const scopedOverrides = scopeCanonicalModesForTool(canonicalModeOverrides, tool.type)
@@ -734,15 +748,18 @@ export const ToolInput = memo(function ToolInput({
    * @param blockType - The block type for the tool
    * @returns `true` if tool is already selected (for single-operation tools only)
    */
-  const isToolAlreadySelected = (toolId: string, blockType: string) => {
-    if (hasMultipleOperations(blockType)) {
-      return false
-    }
-    if (blockType === 'workflow' || blockType === 'knowledge') {
-      return false
-    }
-    return selectedTools.some((tool) => tool.toolId === toolId)
-  }
+  const isToolAlreadySelected = useCallback(
+    (toolId: string, blockType: string) => {
+      if (hasMultipleOperations(blockType)) {
+        return false
+      }
+      if (blockType === 'workflow' || blockType === 'knowledge') {
+        return false
+      }
+      return selectedTools.some((tool) => tool.toolId === toolId)
+    },
+    [selectedTools]
+  )
 
   /**
    * Groups MCP tools by their parent server.
@@ -1017,7 +1034,7 @@ export const ToolInput = memo(function ToolInput({
         )
       )
     },
-    [isPreview, disabled, selectedTools, getToolIdForOperation, blockId, setStoreValue]
+    [isPreview, disabled, selectedTools, blockId, setStoreValue]
   )
 
   const handleUsageControlChange = useCallback(
@@ -1116,15 +1133,6 @@ export const ToolInput = memo(function ToolInput({
     setDragOverIndex(null)
   }
 
-  const evaluateParameterCondition = (param: ToolParameterConfig, tool: StoredTool): boolean => {
-    if (!('uiComponent' in param) || !param.uiComponent?.condition) return true
-    const currentValues: Record<string, unknown> = { operation: tool.operation, ...tool.params }
-    return evaluateSubBlockCondition(
-      param.uiComponent.condition as SubBlockCondition,
-      currentValues
-    )
-  }
-
   const getParamActiveSearchTarget = (
     toolIndex: number | undefined,
     paramId: string,
@@ -1202,12 +1210,13 @@ export const ToolInput = memo(function ToolInput({
       switch (uiComponent.type) {
         case 'dropdown': {
           const options =
-            (uiComponent.options as { id?: string; label: string; value?: string }[] | undefined)
-              ?.filter((option) => (option.id ?? option.value) !== '')
-              .map((option) => ({
-                label: option.label,
-                value: option.id ?? option.value ?? '',
-              })) || []
+            (
+              uiComponent.options as { id?: string; label: string; value?: string }[] | undefined
+            )?.flatMap((option) =>
+              (option.id ?? option.value) !== ''
+                ? [{ label: option.label, value: option.id ?? option.value ?? '' }]
+                : []
+            ) || []
           const selectedLabel = options.find((option) => option.value === value)?.label ?? ''
           const workflowSearchHighlight = getWorkflowSearchLabelHighlight({
             activeSearchTarget: paramActiveSearchTarget,
@@ -1362,11 +1371,12 @@ export const ToolInput = memo(function ToolInput({
         const server = mcpServers.find((s) => s.id === mcpServerDrilldown)
         const serverName = tools[0]?.serverName || server?.name || 'Unknown Server'
         const toolCount = tools.length
-        const selectedToolIdsForServer = new Set(
-          selectedTools
-            .filter((t) => t.type === 'mcp' && t.params?.serverId === mcpServerDrilldown)
-            .map((t) => t.toolId)
-        )
+        const selectedToolIdsForServer = new Set<string | undefined>()
+        for (const t of selectedTools) {
+          if (t.type === 'mcp' && t.params?.serverId === mcpServerDrilldown) {
+            selectedToolIdsForServer.add(t.toolId)
+          }
+        }
         const allAlreadySelected = tools.every((t) => selectedToolIdsForServer.has(t.id))
         const serverToolItems: ComboboxOption[] = []
 
@@ -1525,9 +1535,10 @@ export const ToolInput = memo(function ToolInput({
     // MCP Servers — root folder view
     if (!permissionConfig.disableMcpTools && !mcpUnsupported && mcpToolsByServer.size > 0) {
       const serverItems: ComboboxOption[] = []
+      const serversById = new Map(mcpServers.map((s) => [s.id, s]))
 
       for (const [serverId, tools] of mcpToolsByServer) {
-        const server = mcpServers.find((s) => s.id === serverId)
+        const server = serversById.get(serverId)
         const serverName = tools[0]?.serverName || server?.name || 'Unknown Server'
         const toolCount = tools.length
 
@@ -1624,7 +1635,6 @@ export const ToolInput = memo(function ToolInput({
   }, [
     mcpServerDrilldown,
     customTools,
-    availableMcpTools,
     mcpServers,
     mcpToolsByServer,
     toolBlocks,
@@ -1901,6 +1911,7 @@ export const ToolInput = memo(function ToolInput({
                     >
                       <PopoverTrigger asChild>
                         <button
+                          type='button'
                           className='flex items-center justify-center font-medium text-[var(--text-tertiary)] text-caption transition-colors hover-hover:text-[var(--text-primary)]'
                           onClick={(e: React.MouseEvent) => e.stopPropagation()}
                           aria-label='Tool usage control'
@@ -1961,6 +1972,7 @@ export const ToolInput = memo(function ToolInput({
                     >
                       <PopoverTrigger asChild>
                         <button
+                          type='button'
                           onClick={(e) => {
                             e.stopPropagation()
                             handleRemoveTool(toolIndex)
@@ -2004,6 +2016,7 @@ export const ToolInput = memo(function ToolInput({
                     </Popover>
                   ) : (
                     <button
+                      type='button'
                       onClick={(e) => {
                         e.stopPropagation()
                         handleRemoveTool(toolIndex)
@@ -2030,12 +2043,9 @@ export const ToolInput = memo(function ToolInput({
                           Operation
                         </div>
                         <Combobox
-                          options={operationOptions
-                            .filter((option) => option.id !== '')
-                            .map((option) => ({
-                              label: option.label,
-                              value: option.id,
-                            }))}
+                          options={operationOptions.flatMap((option) =>
+                            option.id !== '' ? [{ label: option.label, value: option.id }] : []
+                          )}
                           value={tool.operation || operationOptions[0].id}
                           onChange={(value) => handleOperationChange(toolIndex, value)}
                           placeholder='Select operation'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 5f41a03537f..a317123f795 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -126,12 +126,12 @@ export function VariablesInput({
   const isReadOnly = isPreview || disabled
 
   const getAvailableVariablesFor = (currentAssignmentId: string) => {
-    const otherSelectedIds = new Set(
-      assignments
-        .filter((a) => a.id !== currentAssignmentId)
-        .map((a) => a.variableId)
-        .filter((id): id is string => !!id)
-    )
+    const otherSelectedIds = new Set<string>()
+    for (const a of assignments) {
+      if (a.id !== currentAssignmentId && a.variableId) {
+        otherSelectedIds.add(a.variableId)
+      }
+    }
 
     return currentWorkflowVariables.filter((variable) => !otherSelectedIds.has(variable.id))
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-dependency-block-type.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-dependency-block-type.ts
index 05dac09c4db..0a3b8690e35 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-dependency-block-type.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-dependency-block-type.ts
@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 
 const DependencyBlockTypeContext = createContext<string | null>(null)
 
@@ -16,4 +16,4 @@ export const DependencyBlockTypeProvider = DependencyBlockTypeContext.Provider
  * parents against the TOOL's config (e.g. a Gmail tool's `credential` -> `oauthCredential`,
  * which the host Agent block's subblocks don't define) and can fetch its options.
  */
-export const useDependencyBlockType = () => useContext(DependencyBlockTypeContext)
+export const useDependencyBlockType = () => use(DependencyBlockTypeContext)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts
index d32f3285c6c..cfc479c8f39 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts
@@ -190,11 +190,8 @@ export function useSubBlockValue<T = any>(
     [
       blockId,
       subBlockId,
-      blockType,
-      isApiKey,
       storeValue,
       triggerWorkflowUpdate,
-      modelValue,
       isStreaming,
       emitValue,
       isBaselineView,
@@ -210,13 +207,7 @@ export function useSubBlockValue<T = any>(
       ? storeValue
       : initialValue
 
-  // Initialize valueRef on first render
-  useEffect(() => {
-    valueRef.current = effectiveValue
-  }, [])
-
-  // Update the ref if the effective value changes
-  // This ensures we're always working with the latest value
+  /** Mirror the latest effective value into the ref; also seeds it on first render (ref starts null). */
   useEffect(() => {
     // Use deep comparison for objects to prevent unnecessary updates
     if (!isEqual(valueRef.current, effectiveValue)) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 01ea37d8706..e78e0087e04 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -1,4 +1,13 @@
-import { type JSX, type MouseEvent, memo, useCallback, useMemo, useRef, useState } from 'react'
+import {
+  type JSX,
+  type MouseEvent,
+  memo,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Button, cn, Input, Label, Tooltip } from '@sim/emcn'
 import { isEqual } from 'es-toolkit'
 import {
@@ -442,6 +451,14 @@ const arePropsEqual = (prevProps: SubBlockProps, nextProps: SubBlockProps): bool
   )
 }
 
+/**
+ * Stops mouse-down propagation so interacting with an input doesn't trigger
+ * parent drag/selection handlers.
+ */
+const handleMouseDown = (e: MouseEvent<HTMLDivElement>): void => {
+  e.stopPropagation()
+}
+
 /**
  * Renders a single workflow sub-block input based on config.type.
  *
@@ -467,7 +484,7 @@ function SubBlockComponent({
   labelSuffix,
   dependencyContext,
   isSearchHighlighted,
-}: SubBlockProps): JSX.Element {
+}: SubBlockProps): ReactNode {
   const params = useParams()
   const workspaceId = params.workspaceId as string
 
@@ -485,10 +502,6 @@ function SubBlockComponent({
     useWebhookUrl: config.useWebhookUrl,
   })
 
-  const handleMouseDown = (e: MouseEvent<HTMLDivElement>): void => {
-    e.stopPropagation()
-  }
-
   const handleValidationChange = (isValid: boolean): void => {
     setIsValidJson(isValid)
   }
@@ -631,7 +644,7 @@ function SubBlockComponent({
    *
    * @returns The appropriate input component JSX element
    */
-  const renderInput = (): JSX.Element => {
+  const renderInput = (): ReactNode => {
     switch (config.type) {
       case 'short-input':
         return (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index d7f22cb3354..76de0b0a73c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -11,6 +11,7 @@ import {
 import { ChevronUp } from 'lucide-react'
 import SimpleCodeEditor from 'react-simple-code-editor'
 import { WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS } from '@/lib/workflows/search-replace/subflow-fields'
+import { ConnectionBlocks } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks'
 import {
   formatDisplayText,
   getValidWorkflowSearchRange,
@@ -21,7 +22,6 @@ import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflow
 import type { BlockState } from '@/stores/workflows/workflow/types'
 import type { ConnectedBlock } from '../../hooks/use-block-connections'
 import { useSubflowEditor } from '../../hooks/use-subflow-editor'
-import { ConnectionBlocks } from '../connection-blocks'
 import { WORKFLOW_SEARCH_HIGHLIGHT_CLASS } from '../constants'
 
 const WORKFLOW_SEARCH_MATCH_PLACEHOLDER = '__WORKFLOW_SEARCH_MATCH__'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index af1adb3a6aa..aba234456ae 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -387,6 +387,7 @@ export function Editor() {
               <input
                 ref={nameInputRefCallback}
                 type='text'
+                aria-label='Block name'
                 value={editedName}
                 onChange={(e) => setEditedName(e.target.value)}
                 onBlur={handleSaveRename}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider.tsx
index 2a6e99410cd..4fe82e3bcf3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 import type { ActiveSearchTarget } from '@/stores/panel/editor/store'
 
 const ActiveSearchTargetContext = createContext<ActiveSearchTarget | null>(null)
@@ -34,5 +34,5 @@ export function ActiveSearchTargetProvider({ value, children }: ActiveSearchTarg
  * `null` when no search target applies (no provider, or target outside scope).
  */
 export function useActiveSearchTarget(): ActiveSearchTarget | null {
-  return useContext(ActiveSearchTargetContext)
+  return use(ActiveSearchTargetContext)
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/hooks/use-toolbar-item-interactions.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/hooks/use-toolbar-item-interactions.ts
index c873513563f..b625fb8e84e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/hooks/use-toolbar-item-interactions.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/hooks/use-toolbar-item-interactions.ts
@@ -1,6 +1,9 @@
 import { useCallback, useRef } from 'react'
 import { createLogger } from '@sim/logger'
-import { createDragPreview, type DragItemInfo } from '../components'
+import {
+  createDragPreview,
+  type DragItemInfo,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components'
 
 const logger = createLogger('ToolbarItemInteractions')
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 0969a117502..2fce0ba2158 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -2,8 +2,8 @@
 
 import {
   type ComponentType,
-  forwardRef,
   memo,
+  type Ref,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -324,6 +324,8 @@ const ToolbarSection = memo(function ToolbarSection({
 interface ToolbarProps {
   /** Whether the toolbar tab is currently active */
   isActive?: boolean
+  /** Imperative handle forwarded to the toolbar root */
+  ref?: Ref<ToolbarRef>
 }
 
 /**
@@ -345,440 +347,435 @@ interface ToolbarRef {
  * @param props.isActive - Whether the toolbar tab is currently active
  * @returns Toolbar view with triggers, blocks, and tools sections
  */
-export const Toolbar = memo(
-  forwardRef<ToolbarRef, ToolbarProps>(function Toolbar({ isActive = true }: ToolbarProps, ref) {
-    const rootRef = useRef<HTMLDivElement>(null)
-    const searchInputRef = useRef<HTMLInputElement>(null)
-    const triggerItemRefs = useRef<Array<HTMLDivElement | null>>([])
-    const blockItemRefs = useRef<Array<HTMLDivElement | null>>([])
-    const toolItemRefs = useRef<Array<HTMLDivElement | null>>([])
-
-    const triggerRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
-    const blockRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
-    const toolRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
-
-    const getTriggerRefCallback = useCallback((index: number) => {
-      if (!triggerRefCallbacks.current[index]) {
-        triggerRefCallbacks.current[index] = (el) => {
-          triggerItemRefs.current[index] = el
-        }
+export const Toolbar = memo(function Toolbar({ isActive = true, ref }: ToolbarProps) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const triggerItemRefs = useRef<Array<HTMLDivElement | null>>([])
+  const blockItemRefs = useRef<Array<HTMLDivElement | null>>([])
+  const toolItemRefs = useRef<Array<HTMLDivElement | null>>([])
+
+  const triggerRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
+  const blockRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
+  const toolRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
+
+  const getTriggerRefCallback = useCallback((index: number) => {
+    if (!triggerRefCallbacks.current[index]) {
+      triggerRefCallbacks.current[index] = (el) => {
+        triggerItemRefs.current[index] = el
       }
-      return triggerRefCallbacks.current[index]
-    }, [])
+    }
+    return triggerRefCallbacks.current[index]
+  }, [])
 
-    const getBlockRefCallback = useCallback((index: number) => {
-      if (!blockRefCallbacks.current[index]) {
-        blockRefCallbacks.current[index] = (el) => {
-          blockItemRefs.current[index] = el
-        }
+  const getBlockRefCallback = useCallback((index: number) => {
+    if (!blockRefCallbacks.current[index]) {
+      blockRefCallbacks.current[index] = (el) => {
+        blockItemRefs.current[index] = el
       }
-      return blockRefCallbacks.current[index]
-    }, [])
+    }
+    return blockRefCallbacks.current[index]
+  }, [])
 
-    const getToolRefCallback = useCallback((index: number) => {
-      if (!toolRefCallbacks.current[index]) {
-        toolRefCallbacks.current[index] = (el) => {
-          toolItemRefs.current[index] = el
-        }
-      }
-      return toolRefCallbacks.current[index]
-    }, [])
-
-    const posthog = usePostHog()
-    const { filterBlocks } = usePermissionConfig()
-    const sandboxAllowedBlocks = useSandboxBlockConstraints()
-
-    const expandedSections = useToolbarStore((state) => state.expandedSections)
-    const setSectionExpanded = useToolbarStore((state) => state.setSectionExpanded)
-
-    const [isSearchActive, setIsSearchActive] = useState(false)
-    const [searchQuery, setSearchQuery] = useState('')
-    /**
-     * Collapsible animations are only enabled after the user explicitly toggles
-     * a section. Reset when the tab becomes inactive so the next visibility
-     * cycle (display: none → block) does not replay the open animation —
-     * CSS animations restart whenever a hidden ancestor becomes visible again.
-     */
-    const [animationsEnabled, setAnimationsEnabled] = useState(false)
-    const [prevIsActive, setPrevIsActive] = useState(isActive)
-    if (isActive !== prevIsActive) {
-      setPrevIsActive(isActive)
-      if (!isActive) {
-        setIsSearchActive(false)
-        setSearchQuery('')
-        setAnimationsEnabled(false)
+  const getToolRefCallback = useCallback((index: number) => {
+    if (!toolRefCallbacks.current[index]) {
+      toolRefCallbacks.current[index] = (el) => {
+        toolItemRefs.current[index] = el
       }
     }
+    return toolRefCallbacks.current[index]
+  }, [])
 
-    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
-    const contextMenuRef = useRef<HTMLDivElement>(null)
-    const [activeItemInfo, setActiveItemInfo] = useState<{
-      type: string
-      isTrigger: boolean
-      docsLink?: string
-    } | null>(null)
-    const isContextMenuOpen = activeItemInfo !== null
-
-    const { handleDragStart, handleItemClick } = useToolbarItemInteractions()
-
-    const allTriggers = getTriggers()
-    const allBlocks = getBlocks()
-    const allTools = getTools()
-
-    const visibleTriggers = useMemo(() => {
-      if (sandboxAllowedBlocks !== null) return []
-      return filterBlocks(allTriggers)
-    }, [filterBlocks, allTriggers, sandboxAllowedBlocks])
-
-    const visibleBlocks = useMemo(() => {
-      const permitted = filterBlocks(allBlocks)
-      if (sandboxAllowedBlocks === null) return permitted
-      return permitted.filter((b) => sandboxAllowedBlocks.includes(b.type))
-    }, [filterBlocks, allBlocks, sandboxAllowedBlocks])
-
-    const visibleTools = useMemo(() => {
-      const permitted = filterBlocks(allTools)
-      if (sandboxAllowedBlocks === null) return permitted
-      return permitted.filter((b) => sandboxAllowedBlocks.includes(b.type))
-    }, [filterBlocks, allTools, sandboxAllowedBlocks])
-
-    const normalizedQuery = searchQuery.trim().toLowerCase()
-    const isSearching = normalizedQuery.length > 0
-
-    const filteredTriggers = useMemo(() => {
-      if (!isSearching) return visibleTriggers
-      return visibleTriggers.filter((trigger) =>
-        trigger.name.toLowerCase().includes(normalizedQuery)
-      )
-    }, [visibleTriggers, isSearching, normalizedQuery])
-
-    const filteredBlocks = useMemo(() => {
-      if (!isSearching) return visibleBlocks
-      return visibleBlocks.filter((block) => block.name.toLowerCase().includes(normalizedQuery))
-    }, [visibleBlocks, isSearching, normalizedQuery])
-
-    const filteredTools = useMemo(() => {
-      if (!isSearching) return visibleTools
-      return visibleTools.filter((tool) => tool.name.toLowerCase().includes(normalizedQuery))
-    }, [visibleTools, isSearching, normalizedQuery])
-
-    /**
-     * Trim ref arrays to current filtered length to prevent stale refs from
-     * polluting keyboard navigation when items disappear (search, sandbox).
-     */
-    triggerItemRefs.current.length = filteredTriggers.length
-    blockItemRefs.current.length = filteredBlocks.length
-    toolItemRefs.current.length = filteredTools.length
-
-    /**
-     * Section expansion is derived during search (force-expand sections with
-     * matches, hide sections with zero matches via items.length === 0). When
-     * not searching, the persisted store state drives expansion.
-     */
-    const sectionExpanded: Record<ToolbarSectionKey, boolean> = {
-      triggers: isSearching ? filteredTriggers.length > 0 : expandedSections.triggers,
-      blocks: isSearching ? filteredBlocks.length > 0 : expandedSections.blocks,
-      tools: isSearching ? filteredTools.length > 0 : expandedSections.tools,
+  const posthog = usePostHog()
+  const { filterBlocks } = usePermissionConfig()
+  const sandboxAllowedBlocks = useSandboxBlockConstraints()
+
+  const expandedSections = useToolbarStore((state) => state.expandedSections)
+  const setSectionExpanded = useToolbarStore((state) => state.setSectionExpanded)
+
+  const [isSearchActive, setIsSearchActive] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  /**
+   * Collapsible animations are only enabled after the user explicitly toggles
+   * a section. Reset when the tab becomes inactive so the next visibility
+   * cycle (display: none → block) does not replay the open animation —
+   * CSS animations restart whenever a hidden ancestor becomes visible again.
+   */
+  const [animationsEnabled, setAnimationsEnabled] = useState(false)
+  const prevIsActiveRef = useRef(isActive)
+  if (isActive !== prevIsActiveRef.current) {
+    prevIsActiveRef.current = isActive
+    if (!isActive) {
+      setIsSearchActive(false)
+      setSearchQuery('')
+      setAnimationsEnabled(false)
     }
+  }
 
-    const handleSectionToggle = useCallback(
-      (key: ToolbarSectionKey) => {
-        if (isSearching) return
-        setAnimationsEnabled(true)
-        setSectionExpanded(key, !expandedSections[key])
-      },
-      [isSearching, expandedSections, setSectionExpanded]
-    )
-
-    const focusSearch = useCallback(() => {
-      setIsSearchActive(true)
-      queueMicrotask(() => searchInputRef.current?.focus())
-    }, [])
-
-    useImperativeHandle(ref, () => ({ focusSearch }), [focusSearch])
-
-    /**
-     * Handle search input blur.
-     *
-     * If the search query is empty, deactivate search mode to show the search icon again.
-     * If there's a query, keep search mode active so ArrowUp/Down navigation continues
-     * to work after focus moves into the section lists.
-     */
-    const handleSearchBlur = useCallback(() => {
-      if (!searchQuery.trim()) {
-        setIsSearchActive(false)
-      }
-    }, [searchQuery])
-
-    const handleItemContextMenu = useCallback(
-      (e: React.MouseEvent, type: string, isTrigger: boolean, docsLink?: string) => {
-        e.preventDefault()
-        e.stopPropagation()
-        setContextMenuPosition({ x: e.clientX, y: e.clientY })
-        setActiveItemInfo({ type, isTrigger, docsLink })
-      },
-      []
-    )
-
-    const closeContextMenu = useCallback(() => {
-      setActiveItemInfo(null)
-    }, [])
-
-    const handleContextMenuAddToCanvas = useCallback(() => {
-      if (activeItemInfo) {
-        handleItemClick(activeItemInfo.type, activeItemInfo.isTrigger)
-      }
-    }, [activeItemInfo, handleItemClick])
-
-    const handleViewDocumentation = useCallback(() => {
-      if (activeItemInfo?.docsLink) {
-        window.open(activeItemInfo.docsLink, '_blank', 'noopener,noreferrer')
-        captureEvent(posthog, 'docs_opened', {
-          source: 'toolbar_context_menu',
-          block_type: activeItemInfo.type,
-        })
-      }
-    }, [activeItemInfo, posthog])
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
+  const contextMenuRef = useRef<HTMLDivElement>(null)
+  const [activeItemInfo, setActiveItemInfo] = useState<{
+    type: string
+    isTrigger: boolean
+    docsLink?: string
+  } | null>(null)
+  const isContextMenuOpen = activeItemInfo !== null
+
+  const { handleDragStart, handleItemClick } = useToolbarItemInteractions()
+
+  const allTriggers = getTriggers()
+  const allBlocks = getBlocks()
+  const allTools = getTools()
+
+  const visibleTriggers = useMemo(() => {
+    if (sandboxAllowedBlocks !== null) return []
+    return filterBlocks(allTriggers)
+  }, [filterBlocks, allTriggers, sandboxAllowedBlocks])
+
+  const visibleBlocks = useMemo(() => {
+    const permitted = filterBlocks(allBlocks)
+    if (sandboxAllowedBlocks === null) return permitted
+    return permitted.filter((b) => sandboxAllowedBlocks.includes(b.type))
+  }, [filterBlocks, allBlocks, sandboxAllowedBlocks])
+
+  const visibleTools = useMemo(() => {
+    const permitted = filterBlocks(allTools)
+    if (sandboxAllowedBlocks === null) return permitted
+    return permitted.filter((b) => sandboxAllowedBlocks.includes(b.type))
+  }, [filterBlocks, allTools, sandboxAllowedBlocks])
+
+  const normalizedQuery = searchQuery.trim().toLowerCase()
+  const isSearching = normalizedQuery.length > 0
+
+  const filteredTriggers = useMemo(() => {
+    if (!isSearching) return visibleTriggers
+    return visibleTriggers.filter((trigger) => trigger.name.toLowerCase().includes(normalizedQuery))
+  }, [visibleTriggers, isSearching, normalizedQuery])
+
+  const filteredBlocks = useMemo(() => {
+    if (!isSearching) return visibleBlocks
+    return visibleBlocks.filter((block) => block.name.toLowerCase().includes(normalizedQuery))
+  }, [visibleBlocks, isSearching, normalizedQuery])
+
+  const filteredTools = useMemo(() => {
+    if (!isSearching) return visibleTools
+    return visibleTools.filter((tool) => tool.name.toLowerCase().includes(normalizedQuery))
+  }, [visibleTools, isSearching, normalizedQuery])
 
-    useEffect(() => {
-      if (!isContextMenuOpen) return
+  /**
+   * Trim ref arrays to current filtered length to prevent stale refs from
+   * polluting keyboard navigation when items disappear (search, sandbox).
+   */
+  triggerItemRefs.current.length = filteredTriggers.length
+  blockItemRefs.current.length = filteredBlocks.length
+  toolItemRefs.current.length = filteredTools.length
 
-      const handleClickOutside = (e: MouseEvent) => {
-        if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
-          closeContextMenu()
-        }
+  /**
+   * Section expansion is derived during search (force-expand sections with
+   * matches, hide sections with zero matches via items.length === 0). When
+   * not searching, the persisted store state drives expansion.
+   */
+  const sectionExpanded: Record<ToolbarSectionKey, boolean> = {
+    triggers: isSearching ? filteredTriggers.length > 0 : expandedSections.triggers,
+    blocks: isSearching ? filteredBlocks.length > 0 : expandedSections.blocks,
+    tools: isSearching ? filteredTools.length > 0 : expandedSections.tools,
+  }
+
+  const handleSectionToggle = useCallback(
+    (key: ToolbarSectionKey) => {
+      if (isSearching) return
+      setAnimationsEnabled(true)
+      setSectionExpanded(key, !expandedSections[key])
+    },
+    [isSearching, expandedSections, setSectionExpanded]
+  )
+
+  const focusSearch = useCallback(() => {
+    setIsSearchActive(true)
+    queueMicrotask(() => searchInputRef.current?.focus())
+  }, [])
+
+  useImperativeHandle(ref, () => ({ focusSearch }), [focusSearch])
+
+  /**
+   * Handle search input blur.
+   *
+   * If the search query is empty, deactivate search mode to show the search icon again.
+   * If there's a query, keep search mode active so ArrowUp/Down navigation continues
+   * to work after focus moves into the section lists.
+   */
+  const handleSearchBlur = useCallback(() => {
+    if (!searchQuery.trim()) {
+      setIsSearchActive(false)
+    }
+  }, [searchQuery])
+
+  const handleItemContextMenu = useCallback(
+    (e: React.MouseEvent, type: string, isTrigger: boolean, docsLink?: string) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setContextMenuPosition({ x: e.clientX, y: e.clientY })
+      setActiveItemInfo({ type, isTrigger, docsLink })
+    },
+    []
+  )
+
+  const closeContextMenu = useCallback(() => {
+    setActiveItemInfo(null)
+  }, [])
+
+  const handleContextMenuAddToCanvas = useCallback(() => {
+    if (activeItemInfo) {
+      handleItemClick(activeItemInfo.type, activeItemInfo.isTrigger)
+    }
+  }, [activeItemInfo, handleItemClick])
+
+  const handleViewDocumentation = useCallback(() => {
+    if (activeItemInfo?.docsLink) {
+      window.open(activeItemInfo.docsLink, '_blank', 'noopener,noreferrer')
+      captureEvent(posthog, 'docs_opened', {
+        source: 'toolbar_context_menu',
+        block_type: activeItemInfo.type,
+      })
+    }
+  }, [activeItemInfo, posthog])
+
+  useEffect(() => {
+    if (!isContextMenuOpen) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+        closeContextMenu()
       }
+    }
+
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('click', handleClickOutside)
+    }, 0)
+
+    return () => {
+      clearTimeout(timeoutId)
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [isContextMenuOpen, closeContextMenu])
+
+  /**
+   * Keyboard navigation across the three sections.
+   *
+   * - Active only when the toolbar tab is active and search mode is on.
+   * - Skips collapsed or empty sections so focus only lands on visible items.
+   * - ArrowDown traverses search → triggers → blocks → tools.
+   * - ArrowUp moves backward; from the first item of the first visible section
+   *   it wraps back to the search input.
+   */
+  useEffect(() => {
+    if (!isActive || !isSearchActive) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
 
-      const timeoutId = setTimeout(() => {
-        document.addEventListener('click', handleClickOutside)
-      }, 0)
+      const activeEl = document.activeElement as HTMLElement | null
+      const toolbarRoot = rootRef.current
+      if (!toolbarRoot || !activeEl || !toolbarRoot.contains(activeEl)) return
 
-      return () => {
-        clearTimeout(timeoutId)
-        document.removeEventListener('click', handleClickOutside)
+      type SectionList = {
+        key: ToolbarSectionKey
+        items: HTMLDivElement[]
       }
-    }, [isContextMenuOpen, closeContextMenu])
-
-    /**
-     * Keyboard navigation across the three sections.
-     *
-     * - Active only when the toolbar tab is active and search mode is on.
-     * - Skips collapsed or empty sections so focus only lands on visible items.
-     * - ArrowDown traverses search → triggers → blocks → tools.
-     * - ArrowUp moves backward; from the first item of the first visible section
-     *   it wraps back to the search input.
-     */
-    useEffect(() => {
-      if (!isActive || !isSearchActive) return
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
-
-        const activeEl = document.activeElement as HTMLElement | null
-        const toolbarRoot = rootRef.current
-        if (!toolbarRoot || !activeEl || !toolbarRoot.contains(activeEl)) return
-
-        type SectionList = {
-          key: ToolbarSectionKey
-          items: HTMLDivElement[]
-        }
 
-        const allSections: SectionList[] = [
-          {
-            key: 'triggers',
-            items: sectionExpanded.triggers
-              ? triggerItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
-              : [],
-          },
-          {
-            key: 'blocks',
-            items: sectionExpanded.blocks
-              ? blockItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
-              : [],
-          },
-          {
-            key: 'tools',
-            items: sectionExpanded.tools
-              ? toolItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
-              : [],
-          },
-        ]
-        const sections = allSections.filter((section) => section.items.length > 0)
-
-        let sectionIndex = -1
-        let itemIndex = -1
-        const isSearch = activeEl === searchInputRef.current
-
-        if (!isSearch) {
-          for (let s = 0; s < sections.length; s++) {
-            const idx = sections[s].items.findIndex(
-              (el) => el === activeEl || el.contains(activeEl)
-            )
-            if (idx !== -1) {
-              sectionIndex = s
-              itemIndex = idx
-              break
-            }
+      const allSections: SectionList[] = [
+        {
+          key: 'triggers',
+          items: sectionExpanded.triggers
+            ? triggerItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
+            : [],
+        },
+        {
+          key: 'blocks',
+          items: sectionExpanded.blocks
+            ? blockItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
+            : [],
+        },
+        {
+          key: 'tools',
+          items: sectionExpanded.tools
+            ? toolItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
+            : [],
+        },
+      ]
+      const sections = allSections.filter((section) => section.items.length > 0)
+
+      let sectionIndex = -1
+      let itemIndex = -1
+      const isSearch = activeEl === searchInputRef.current
+
+      if (!isSearch) {
+        for (let s = 0; s < sections.length; s++) {
+          const idx = sections[s].items.findIndex((el) => el === activeEl || el.contains(activeEl))
+          if (idx !== -1) {
+            sectionIndex = s
+            itemIndex = idx
+            break
           }
         }
+      }
 
-        const focusItem = (sIdx: number, iIdx: number) => {
-          const el = sections[sIdx]?.items[iIdx]
-          if (el) {
-            event.preventDefault()
-            event.stopPropagation()
-            el.focus()
-          }
+      const focusItem = (sIdx: number, iIdx: number) => {
+        const el = sections[sIdx]?.items[iIdx]
+        if (el) {
+          event.preventDefault()
+          event.stopPropagation()
+          el.focus()
         }
+      }
 
-        const focusSearchInput = () => {
-          if (searchInputRef.current) {
-            event.preventDefault()
-            event.stopPropagation()
-            searchInputRef.current.focus()
-          }
+      const focusSearchInput = () => {
+        if (searchInputRef.current) {
+          event.preventDefault()
+          event.stopPropagation()
+          searchInputRef.current.focus()
         }
+      }
 
-        if (event.key === 'ArrowDown') {
-          if (isSearch || sectionIndex === -1) {
-            if (sections.length > 0) focusItem(0, 0)
-            return
-          }
-          const currentSection = sections[sectionIndex]
-          if (itemIndex < currentSection.items.length - 1) {
-            focusItem(sectionIndex, itemIndex + 1)
-            return
-          }
-          if (sectionIndex < sections.length - 1) {
-            focusItem(sectionIndex + 1, 0)
-          }
+      if (event.key === 'ArrowDown') {
+        if (isSearch || sectionIndex === -1) {
+          if (sections.length > 0) focusItem(0, 0)
+          return
+        }
+        const currentSection = sections[sectionIndex]
+        if (itemIndex < currentSection.items.length - 1) {
+          focusItem(sectionIndex, itemIndex + 1)
           return
         }
+        if (sectionIndex < sections.length - 1) {
+          focusItem(sectionIndex + 1, 0)
+        }
+        return
+      }
 
-        if (event.key === 'ArrowUp') {
-          if (isSearch || sectionIndex === -1) return
-          if (itemIndex > 0) {
-            focusItem(sectionIndex, itemIndex - 1)
-            return
-          }
-          if (sectionIndex > 0) {
-            const prev = sections[sectionIndex - 1]
-            focusItem(sectionIndex - 1, prev.items.length - 1)
-            return
-          }
-          focusSearchInput()
+      if (event.key === 'ArrowUp') {
+        if (isSearch || sectionIndex === -1) return
+        if (itemIndex > 0) {
+          focusItem(sectionIndex, itemIndex - 1)
+          return
         }
+        if (sectionIndex > 0) {
+          const prev = sections[sectionIndex - 1]
+          focusItem(sectionIndex - 1, prev.items.length - 1)
+          return
+        }
+        focusSearchInput()
       }
+    }
 
-      window.addEventListener('keydown', handleKeyDown)
-      return () => window.removeEventListener('keydown', handleKeyDown)
-    }, [
-      isActive,
-      isSearchActive,
-      sectionExpanded.triggers,
-      sectionExpanded.blocks,
-      sectionExpanded.tools,
-    ])
-
-    return (
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [
+    isActive,
+    isSearchActive,
+    sectionExpanded.triggers,
+    sectionExpanded.blocks,
+    sectionExpanded.tools,
+  ])
+
+  return (
+    <div
+      ref={rootRef}
+      data-toolbar-root
+      data-search-active={isSearchActive ? 'true' : 'false'}
+      className='flex h-full flex-col'
+    >
+      {/* Header */}
       <div
-        ref={rootRef}
-        data-toolbar-root
-        data-search-active={isSearchActive ? 'true' : 'false'}
-        className='flex h-full flex-col'
+        role='button'
+        tabIndex={0}
+        className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
+        onClick={focusSearch}
+        onKeyDown={(event) => handleKeyboardActivation(event, focusSearch)}
       >
-        {/* Header */}
-        <div
-          role='button'
-          tabIndex={0}
-          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
-          onClick={focusSearch}
-          onKeyDown={(event) => handleKeyboardActivation(event, focusSearch)}
-        >
-          <h2 className='font-medium text-[var(--text-primary)] text-sm'>Toolbar</h2>
-          <div className='flex shrink-0 items-center gap-2'>
-            {!isSearchActive ? (
-              <Button
-                variant='ghost'
-                className='p-0'
-                aria-label='Search toolbar'
-                onClick={focusSearch}
-              >
-                <Search className='size-[14px]' />
-              </Button>
-            ) : (
-              <input
-                ref={searchInputRef}
-                type='text'
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onBlur={handleSearchBlur}
-                className='w-full border-none bg-transparent pr-0.5 text-right font-medium text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
-              />
-            )}
-          </div>
-        </div>
-
-        {/* Single scroll container with three collapsible sections */}
-        <div className='flex flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-none pb-3'>
-          <ToolbarSection
-            label='Triggers'
-            tooltip='Events that start a workflow'
-            sectionKey='triggers'
-            items={filteredTriggers}
-            isTrigger={true}
-            expanded={sectionExpanded.triggers}
-            searching={isSearching}
-            animate={animationsEnabled}
-            onToggle={handleSectionToggle}
-            getItemRef={getTriggerRefCallback}
-            onDragStart={handleDragStart}
-            onItemClick={handleItemClick}
-            onContextMenu={handleItemContextMenu}
-          />
-          <ToolbarSection
-            label='Core Blocks'
-            tooltip='Core building blocks for agent logic'
-            sectionKey='blocks'
-            items={filteredBlocks}
-            isTrigger={false}
-            expanded={sectionExpanded.blocks}
-            searching={isSearching}
-            animate={animationsEnabled}
-            onToggle={handleSectionToggle}
-            getItemRef={getBlockRefCallback}
-            onDragStart={handleDragStart}
-            onItemClick={handleItemClick}
-            onContextMenu={handleItemContextMenu}
-          />
-          <ToolbarSection
-            label='Integrations'
-            tooltip='Connect agents to external services'
-            sectionKey='tools'
-            items={filteredTools}
-            isTrigger={false}
-            expanded={sectionExpanded.tools}
-            searching={isSearching}
-            animate={animationsEnabled}
-            onToggle={handleSectionToggle}
-            getItemRef={getToolRefCallback}
-            onDragStart={handleDragStart}
-            onItemClick={handleItemClick}
-            onContextMenu={handleItemContextMenu}
-          />
+        <h2 className='font-medium text-[var(--text-primary)] text-sm'>Toolbar</h2>
+        <div className='flex shrink-0 items-center gap-2'>
+          {!isSearchActive ? (
+            <Button
+              variant='ghost'
+              className='p-0'
+              aria-label='Search toolbar'
+              onClick={focusSearch}
+            >
+              <Search className='size-[14px]' />
+            </Button>
+          ) : (
+            <input
+              ref={searchInputRef}
+              type='text'
+              aria-label='Search toolbar'
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onBlur={handleSearchBlur}
+              className='w-full border-none bg-transparent pr-0.5 text-right font-medium text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
+            />
+          )}
         </div>
+      </div>
 
-        {/* Toolbar Item Context Menu */}
-        <ToolbarItemContextMenu
-          isOpen={isContextMenuOpen}
-          position={contextMenuPosition}
-          menuRef={contextMenuRef}
-          onClose={closeContextMenu}
-          onAddToCanvas={handleContextMenuAddToCanvas}
-          onViewDocumentation={handleViewDocumentation}
-          showViewDocumentation={Boolean(activeItemInfo?.docsLink)}
+      {/* Single scroll container with three collapsible sections */}
+      <div className='flex flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-none pb-3'>
+        <ToolbarSection
+          label='Triggers'
+          tooltip='Events that start a workflow'
+          sectionKey='triggers'
+          items={filteredTriggers}
+          isTrigger={true}
+          expanded={sectionExpanded.triggers}
+          searching={isSearching}
+          animate={animationsEnabled}
+          onToggle={handleSectionToggle}
+          getItemRef={getTriggerRefCallback}
+          onDragStart={handleDragStart}
+          onItemClick={handleItemClick}
+          onContextMenu={handleItemContextMenu}
+        />
+        <ToolbarSection
+          label='Core Blocks'
+          tooltip='Core building blocks for agent logic'
+          sectionKey='blocks'
+          items={filteredBlocks}
+          isTrigger={false}
+          expanded={sectionExpanded.blocks}
+          searching={isSearching}
+          animate={animationsEnabled}
+          onToggle={handleSectionToggle}
+          getItemRef={getBlockRefCallback}
+          onDragStart={handleDragStart}
+          onItemClick={handleItemClick}
+          onContextMenu={handleItemContextMenu}
+        />
+        <ToolbarSection
+          label='Integrations'
+          tooltip='Connect agents to external services'
+          sectionKey='tools'
+          items={filteredTools}
+          isTrigger={false}
+          expanded={sectionExpanded.tools}
+          searching={isSearching}
+          animate={animationsEnabled}
+          onToggle={handleSectionToggle}
+          getItemRef={getToolRefCallback}
+          onDragStart={handleDragStart}
+          onItemClick={handleItemClick}
+          onContextMenu={handleItemContextMenu}
         />
       </div>
-    )
-  })
-)
+
+      {/* Toolbar Item Context Menu */}
+      <ToolbarItemContextMenu
+        isOpen={isContextMenuOpen}
+        position={contextMenuPosition}
+        menuRef={contextMenuRef}
+        onClose={closeContextMenu}
+        onAddToCanvas={handleContextMenuAddToCanvas}
+        onViewDocumentation={handleViewDocumentation}
+        showViewDocumentation={Boolean(activeItemInfo?.docsLink)}
+      />
+    </div>
+  )
+})
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 8233f1a4bc4..a14594a9823 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
@@ -200,9 +200,9 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
   /**
    * Opens subscription settings modal
    */
-  const openSubscriptionSettings = () => {
+  const openSubscriptionSettings = useCallback(() => {
     navigateToSettings({ section: 'billing' })
-  }
+  }, [navigateToSettings])
 
   /**
    * Cancels the currently executing workflow
@@ -220,7 +220,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
       return
     }
     await handleRunWorkflow()
-  }, [usageExceeded, handleRunWorkflow])
+  }, [usageExceeded, handleRunWorkflow, openSubscriptionSettings])
 
   // Chat state
   const { isChatOpen, setIsChatOpen } = useChatStore(
@@ -265,7 +265,10 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
   // Auto-select most recent on first list arrival per workflow, and drop a
   // selection that no longer matches anything in the current list (e.g. the
   // chat was deleted in another tab).
-  const autoSelectAttemptedForRef = useRef<Set<string>>(new Set())
+  const autoSelectAttemptedForRef = useRef<Set<string> | null>(null)
+  if (autoSelectAttemptedForRef.current === null) {
+    autoSelectAttemptedForRef.current = new Set<string>()
+  }
   useEffect(() => {
     if (!activeWorkflowId) return
 
@@ -275,9 +278,11 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
     }
 
     if (copilotChatId) return
-    if (autoSelectAttemptedForRef.current.has(activeWorkflowId)) return
+    const autoSelectAttemptedFor = autoSelectAttemptedForRef.current ?? new Set<string>()
+    autoSelectAttemptedForRef.current = autoSelectAttemptedFor
+    if (autoSelectAttemptedFor.has(activeWorkflowId)) return
     if (copilotChatList.length === 0) return
-    autoSelectAttemptedForRef.current.add(activeWorkflowId)
+    autoSelectAttemptedFor.add(activeWorkflowId)
     setCopilotChatId(copilotChatList[0].id)
   }, [copilotChatList, copilotChatId, activeWorkflowId, setCopilotChatId])
 
@@ -554,7 +559,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
       setIsExporting(false)
       setIsMenuOpen(false)
     }
-  }, [currentWorkflow, activeWorkflowId, downloadFile])
+  }, [currentWorkflow, activeWorkflowId, workspaceId, downloadFile])
 
   /**
    * Handles duplicating the current workflow
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index efdb4153e8f..2e03a48aeae 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -50,12 +50,13 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
    * container styling.
    */
   const nestingLevel = useMemo(() => {
+    const nodesById = new Map(getNodes().map((n) => [n.id, n]))
     let level = 0
     let currentParentId = data?.parentId
 
     while (currentParentId) {
       level++
-      const parentNode = getNodes().find((n) => n.id === currentParentId)
+      const parentNode = nodesById.get(currentParentId)
       if (!parentNode) break
       currentParentId = parentNode.data?.parentId
     }
@@ -63,6 +64,11 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
     return level
   }, [data?.parentId, getNodes])
 
+  const actionBar = useMemo(
+    () => <ActionBar blockId={id} blockType={data.kind} disabled={!canEditWorkflow} />,
+    [id, data.kind, canEditWorkflow]
+  )
+
   return (
     <SubflowNodeView
       id={id}
@@ -76,7 +82,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
       nestingLevel={nestingLevel}
       canEditWorkflow={canEditWorkflow}
       onSelect={() => setCurrentBlockId(id)}
-      actionBar={<ActionBar blockId={id} blockType={data.kind} disabled={!canEditWorkflow} />}
+      actionBar={actionBar}
     />
   )
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
index e92ca7f0f3a..be4b1d4f30d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
@@ -1,16 +1,7 @@
 'use client'
 
 import type React from 'react'
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { createContext, memo, use, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Badge, ChevronDown, cn } from '@sim/emcn'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { isUserFileDisplayMetadata } from '@/lib/core/utils/user-file'
@@ -269,16 +260,24 @@ function buildPathToIndicesMap(matchPaths: string[]): Map<string, number[]> {
   return map
 }
 
+interface HighlightedSegmentsProps {
+  text: string
+  query: string
+  matchIndices: number[]
+  currentMatchIndex: number
+  path: string
+}
+
 /**
  * Renders text with search highlights using segments.
  */
-function renderHighlightedSegments(
-  text: string,
-  query: string,
-  matchIndices: number[],
-  currentMatchIndex: number,
-  path: string
-): React.ReactNode {
+function HighlightedSegments({
+  text,
+  query,
+  matchIndices,
+  currentMatchIndex,
+  path,
+}: HighlightedSegmentsProps): React.ReactNode {
   if (!query || matchIndices.length === 0) return text
 
   const textMatches = findTextMatches(text, query)
@@ -335,13 +334,19 @@ const HighlightedText = memo(function HighlightedText({
   path,
   currentMatchIndex,
 }: HighlightedTextProps) {
-  const searchContext = useContext(SearchContext)
+  const searchContext = use(SearchContext)
 
   if (!searchContext || matchIndices.length === 0) return <>{text}</>
 
   return (
     <>
-      {renderHighlightedSegments(text, searchContext.query, matchIndices, currentMatchIndex, path)}
+      <HighlightedSegments
+        text={text}
+        query={searchContext.query}
+        matchIndices={matchIndices}
+        currentMatchIndex={currentMatchIndex}
+        path={path}
+      />
     </>
   )
 })
@@ -371,7 +376,7 @@ const StructuredNode = memo(function StructuredNode({
   currentMatchIndex,
   isError = false,
 }: StructuredNodeProps) {
-  const searchContext = useContext(SearchContext)
+  const searchContext = use(SearchContext)
   const displayValue = getDisplayValue(value)
   const type = getTypeLabel(displayValue)
   const isPrimitiveValue = isPrimitive(displayValue)
@@ -704,13 +709,13 @@ function VirtualizedRow({
           wrapText ? '[word-break:break-word]' : 'whitespace-nowrap'
         )}
       >
-        {renderHighlightedSegments(
-          row.displayText,
-          searchQuery,
-          row.matchIndices,
-          currentMatchIndex,
-          row.path
-        )}
+        <HighlightedSegments
+          text={row.displayText}
+          query={searchQuery}
+          matchIndices={row.matchIndices}
+          currentMatchIndex={currentMatchIndex}
+          path={row.path}
+        />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index 7256230d994..3ddd80a0d1c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -270,11 +270,7 @@ export const OutputPanel = React.memo(function OutputPanel({
     return () => document.removeEventListener('selectionchange', handleSelectionChange)
   }, [isOutputMenuOpen])
 
-  // Memoize the search query for structured output to avoid re-renders
-  const structuredSearchQuery = useMemo(
-    () => (isOutputSearchActive ? outputSearchQuery : undefined),
-    [isOutputSearchActive, outputSearchQuery]
-  )
+  const structuredSearchQuery = isOutputSearchActive ? outputSearchQuery : undefined
 
   const outputDataStringified = useMemo(() => {
     if (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index c96aac2f30a..e27e157e52f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
 import {
   Button,
   ChevronDown,
@@ -159,7 +159,6 @@ const IterationNodeRow = memo(function IterationNodeRow({
   selectedEntryId,
   onSelectEntry,
   isExpanded,
-  onToggle,
   expandedNodes,
   onToggleNode,
   renderChildren = true,
@@ -168,12 +167,12 @@ const IterationNodeRow = memo(function IterationNodeRow({
   selectedEntryId: string | null
   onSelectEntry: (entry: ConsoleEntry) => void
   isExpanded: boolean
-  onToggle: () => void
   expandedNodes: Set<string>
   onToggleNode: (nodeId: string) => void
   renderChildren?: boolean
 }) {
   const { entry, children, iterationInfo } = node
+  const handleToggle = useCallback(() => onToggleNode(entry.id), [onToggleNode, entry.id])
   const hasError = Boolean(entry.error) || children.some((c) => c.entry.error)
   const hasChildren = children.length > 0
   const hasRunningChild = children.some((c) => c.entry.isRunning)
@@ -192,9 +191,11 @@ const IterationNodeRow = memo(function IterationNodeRow({
         className={clsx(ROW_STYLES.base, 'h-[30px]', ROW_STYLES.hover)}
         onClick={(e) => {
           e.stopPropagation()
-          onToggle()
+          handleToggle()
         }}
-        onKeyDown={(event) => handleKeyboardActivation(event, onToggle, { stopPropagation: true })}
+        onKeyDown={(event) =>
+          handleKeyboardActivation(event, handleToggle, { stopPropagation: true })
+        }
       >
         <div className='flex min-w-0 flex-1 items-center gap-2'>
           <span
@@ -348,7 +349,6 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
               selectedEntryId={selectedEntryId}
               onSelectEntry={onSelectEntry}
               isExpanded={expandedNodes.has(iterNode.entry.id)}
-              onToggle={() => onToggleNode(iterNode.entry.id)}
               expandedNodes={expandedNodes}
               onToggleNode={onToggleNode}
             />
@@ -537,7 +537,6 @@ const EntryNodeRow = memo(function EntryNodeRow({
         selectedEntryId={selectedEntryId}
         onSelectEntry={onSelectEntry}
         isExpanded={expandedNodes.has(node.entry.id)}
-        onToggle={() => onToggleNode(node.entry.id)}
         expandedNodes={expandedNodes}
         onToggleNode={onToggleNode}
         renderChildren={renderChildren}
@@ -1172,6 +1171,14 @@ export const Terminal = memo(function Terminal() {
     [focusTerminal]
   )
 
+  /**
+   * Effect Events for the keyboard handler so the window listener never
+   * re-subscribes when these callbacks change identity, while still seeing
+   * the latest props and state.
+   */
+  const expandToLastHeightEvent = useEffectEvent(expandToLastHeight)
+  const navigateToEntryEvent = useEffectEvent(navigateToEntry)
+
   /**
    * Consolidated keyboard handler for all terminal navigation
    */
@@ -1211,21 +1218,21 @@ export const Terminal = memo(function Terminal() {
         // If no entry selected, select the first or last based on direction
         if (!currentEntry) {
           const targetEntry = e.key === 'ArrowDown' ? entries[0] : entries[entries.length - 1]
-          navigateToEntry(targetEntry)
+          navigateToEntryEvent(targetEntry)
           return
         }
 
         const currentIndex = entries.findIndex((navEntry) => navEntry.entry.id === currentEntry.id)
         if (currentIndex === -1) {
           // Current entry not in navigable list (shouldn't happen), select first
-          navigateToEntry(entries[0])
+          navigateToEntryEvent(entries[0])
           return
         }
 
         if (e.key === 'ArrowUp' && currentIndex > 0) {
-          navigateToEntry(entries[currentIndex - 1])
+          navigateToEntryEvent(entries[currentIndex - 1])
         } else if (e.key === 'ArrowDown' && currentIndex < entries.length - 1) {
-          navigateToEntry(entries[currentIndex + 1])
+          navigateToEntryEvent(entries[currentIndex + 1])
         }
         return
       }
@@ -1237,7 +1244,7 @@ export const Terminal = memo(function Terminal() {
         e.preventDefault()
 
         if (!isExpandedRef.current) {
-          expandToLastHeight()
+          expandToLastHeightEvent()
         }
 
         if (e.key === 'ArrowLeft' && showInputRef.current) {
@@ -1250,7 +1257,7 @@ export const Terminal = memo(function Terminal() {
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [expandToLastHeight, navigateToEntry])
+  }, [])
 
   /**
    * Adjust output panel width on resize.
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index eff41e09f82..22b26481274 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -60,6 +60,13 @@ const HEADER_ICON_SIZE = 16
 const LINE_HEIGHT = 21
 const MIN_EDITOR_HEIGHT = 120
 
+/** Blurs the variable-name input when Enter is pressed to commit the edit. */
+function handleVariableNameKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+  if (e.key === 'Enter') {
+    e.currentTarget.blur()
+  }
+}
+
 /**
  * User-facing strings for errors, labels, and placeholders
  */
@@ -418,12 +425,6 @@ export function Variables({ readOnly = false }: VariablesProps) {
     [localNames, isDuplicateName, collaborativeUpdateVariable, readOnly]
   )
 
-  const handleVariableNameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.currentTarget.blur()
-    }
-  }
-
   const handleClose = () => {
     setIsOpen(false)
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
index 89848f74c12..267cf5013e6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from '@sim/emcn'
 import { SendIcon, XIcon } from 'lucide-react'
 import { Button } from '@/components/ui/button'
@@ -28,14 +28,14 @@ export function WandPromptBar({
 }: WandPromptBarProps) {
   const promptBarRef = useRef<HTMLDivElement>(null)
   const [isExiting, setIsExiting] = useState(false)
-  const [prevIsVisible, setPrevIsVisible] = useState(isVisible)
-  if (isVisible !== prevIsVisible) {
-    setPrevIsVisible(isVisible)
+  const prevIsVisibleRef = useRef(isVisible)
+  if (prevIsVisibleRef.current !== isVisible) {
+    prevIsVisibleRef.current = isVisible
     if (isVisible) setIsExiting(false)
   }
 
   // Handle the fade-out animation
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     if (!isLoading && !isStreaming) {
       setIsExiting(true)
       // Wait for animation to complete before actual cancellation
@@ -44,7 +44,7 @@ export function WandPromptBar({
         onCancel()
       }, 150) // Matches the CSS transition duration
     }
-  }
+  }, [isLoading, isStreaming, onCancel])
 
   useEffect(() => {
     // Handle click outside
@@ -68,7 +68,7 @@ export function WandPromptBar({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [isVisible, isStreaming, isLoading, isExiting, onCancel])
+  }, [isVisible, isStreaming, isLoading, isExiting, handleCancel])
 
   if (!isVisible && !isStreaming && !isExiting) {
     return null
@@ -94,6 +94,7 @@ export function WandPromptBar({
             value={isStreaming ? 'Generating...' : promptValue}
             onChange={(e) => !isStreaming && onChange(e.target.value)}
             placeholder={placeholder}
+            aria-label={placeholder}
             autoComplete='off'
             autoCorrect='off'
             autoCapitalize='off'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-webhook-info.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-webhook-info.ts
index 332fea24821..b2843021d5e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-webhook-info.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-webhook-info.ts
@@ -72,17 +72,16 @@ export function useWebhookInfo(blockId: string, workflowId: string): UseWebhookI
   const isDisabled = isWebhookConfigured && webhook?.isActive === false
   const webhookId = isWebhookConfigured ? webhook?.id : undefined
 
-  const reactivateMutation = useReactivateWebhook()
+  const { mutateAsync: reactivateWebhookMutation } = useReactivateWebhook()
   const reactivateWebhook = useCallback(
     async (id: string) => {
       try {
-        await reactivateMutation.mutateAsync({ webhookId: id, workflowId, blockId })
+        await reactivateWebhookMutation({ webhookId: id, workflowId, blockId })
       } catch (error) {
         logger.error('Error reactivating webhook:', error)
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [workflowId, blockId]
+    [reactivateWebhookMutation, workflowId, blockId]
   )
 
   return {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 6c7976327e5..b397f854b74 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -68,6 +68,11 @@ const logger = createLogger('WorkflowBlock')
 /** Stable empty object to avoid creating new references */
 const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
 
+/** Whether connecting `source` to `target` would introduce a cycle in the current graph. */
+function wouldCreateConnectionCycle(source: string, target: string) {
+  return wouldCreateCycle(useWorkflowStore.getState().edges, source, target)
+}
+
 interface SubBlockRowProps {
   title: string
   value?: string
@@ -166,13 +171,7 @@ const SubBlockRow = memo(function SubBlockRow({
       }
       return accumulator
     }, {})
-  }, [
-    canonicalIndex,
-    canonicalModeOverrides,
-    displayAdvancedOptions,
-    rawValues,
-    subBlock?.dependsOn,
-  ])
+  }, [canonicalIndex, canonicalModeOverrides, rawValues, subBlock?.dependsOn])
 
   const credentialSourceId =
     subBlock?.type === 'oauth-input' && typeof rawValue === 'string' ? rawValue : undefined
@@ -587,9 +586,11 @@ export const WorkflowBlock = memo(function WorkflowBlock({
 
   const subBlockRows = subBlockRowsData.rows
   const subBlockState = subBlockRowsData.stateToUse
-  const topologySubBlocks = data.isPreview
-    ? (data.blockState?.subBlocks ?? {})
-    : (currentStoreBlock?.subBlocks ?? {})
+  const topologySubBlocks = useMemo(
+    () =>
+      data.isPreview ? (data.blockState?.subBlocks ?? {}) : (currentStoreBlock?.subBlocks ?? {}),
+    [data.isPreview, data.blockState?.subBlocks, currentStoreBlock?.subBlocks]
+  )
   const effectiveAdvanced = useMemo(() => {
     const rawValues = Object.entries(subBlockState).reduce<Record<string, unknown>>(
       (acc, [key, entry]) => {
@@ -700,57 +701,75 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     type === 'schedule' && !isLoadingScheduleInfo && scheduleInfo !== null
   const isWorkflowSelector = type === 'workflow' || type === 'workflow_input'
 
-  const wouldCreateConnectionCycle = (source: string, target: string) =>
-    wouldCreateCycle(useWorkflowStore.getState().edges, source, target)
-
   const webhookProviderName = webhookProvider ? getProviderName(webhookProvider) : undefined
 
-  const rows =
-    type === 'condition' || type === 'router_v2' ? null : (
-      <>
-        {subBlockRows.map((row, rowIndex) =>
-          row.flatMap((subBlock) => {
-            const rawValue = subBlockState[subBlock.id]?.value
-            if (subBlock.type === 'mcp-dynamic-args') {
-              const schema = subBlockState._toolSchema?.value as
-                | { properties?: Record<string, unknown> }
-                | undefined
-              const properties = schema?.properties
-              if (properties && typeof properties === 'object') {
-                const args = (rawValue && typeof rawValue === 'object' ? rawValue : {}) as Record<
-                  string,
-                  unknown
-                >
-                return Object.keys(properties).map((paramName) => (
-                  <SubBlockRow
-                    key={`${subBlock.id}-${paramName}-${rowIndex}`}
-                    title={formatParameterLabel(paramName)}
-                    value={getDisplayValue(args[paramName])}
-                  />
-                ))
+  const rows = useMemo(
+    () =>
+      type === 'condition' || type === 'router_v2' ? null : (
+        <>
+          {subBlockRows.map((row, rowIndex) =>
+            row.flatMap((subBlock) => {
+              const rawValue = subBlockState[subBlock.id]?.value
+              if (subBlock.type === 'mcp-dynamic-args') {
+                const schema = subBlockState._toolSchema?.value as
+                  | { properties?: Record<string, unknown> }
+                  | undefined
+                const properties = schema?.properties
+                if (properties && typeof properties === 'object') {
+                  const args = (rawValue && typeof rawValue === 'object' ? rawValue : {}) as Record<
+                    string,
+                    unknown
+                  >
+                  return Object.keys(properties).map((paramName) => (
+                    <SubBlockRow
+                      key={`${subBlock.id}-${paramName}-${rowIndex}`}
+                      title={formatParameterLabel(paramName)}
+                      value={getDisplayValue(args[paramName])}
+                    />
+                  ))
+                }
+                return []
               }
-              return []
-            }
-            return [
-              <SubBlockRow
-                key={`${subBlock.id}-${rowIndex}`}
-                title={subBlock.title ?? subBlock.id}
-                value={getDisplayValue(rawValue)}
-                subBlock={subBlock}
-                rawValue={rawValue}
-                workspaceId={workspaceId}
-                workflowId={currentWorkflowId}
-                blockId={id}
-                allSubBlockValues={subBlockState}
-                displayAdvancedOptions={effectiveAdvanced}
-                canonicalIndex={canonicalIndex}
-                canonicalModeOverrides={canonicalModeOverrides}
-              />,
-            ]
-          })
-        )}
-      </>
-    )
+              return [
+                <SubBlockRow
+                  key={`${subBlock.id}-${rowIndex}`}
+                  title={subBlock.title ?? subBlock.id}
+                  value={getDisplayValue(rawValue)}
+                  subBlock={subBlock}
+                  rawValue={rawValue}
+                  workspaceId={workspaceId}
+                  workflowId={currentWorkflowId}
+                  blockId={id}
+                  allSubBlockValues={subBlockState}
+                  displayAdvancedOptions={effectiveAdvanced}
+                  canonicalIndex={canonicalIndex}
+                  canonicalModeOverrides={canonicalModeOverrides}
+                />,
+              ]
+            })
+          )}
+        </>
+      ),
+    [
+      type,
+      subBlockRows,
+      subBlockState,
+      workspaceId,
+      currentWorkflowId,
+      id,
+      effectiveAdvanced,
+      canonicalIndex,
+      canonicalModeOverrides,
+    ]
+  )
+
+  const actionBar = useMemo(
+    () =>
+      !data.isPreview && !data.isEmbedded ? (
+        <ActionBar blockId={id} blockType={type} disabled={!canEditWorkflow} />
+      ) : undefined,
+    [data.isPreview, data.isEmbedded, id, type, canEditWorkflow]
+  )
 
   return (
     <WorkflowBlockView
@@ -804,11 +823,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       }}
       onSelect={handleClick}
       contentRef={contentRef}
-      actionBar={
-        !data.isPreview && !data.isEmbedded ? (
-          <ActionBar blockId={id} blockType={type} disabled={!canEditWorkflow} />
-        ) : undefined
-      }
+      actionBar={actionBar}
       rows={rows}
     />
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
index c33b5987fc0..6eb1a4d69a7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
@@ -323,7 +323,7 @@ export function useFloatResize({
         y: finalY,
       })
     },
-    [onDimensionsChange, onPositionChange]
+    [onDimensionsChange, onPositionChange, minWidth, maxWidth, minHeight, maxHeight]
   )
   const handleGlobalMouseMoveRef = useRef(handleGlobalMouseMove)
   handleGlobalMouseMoveRef.current = handleGlobalMouseMove
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts
index aaa20254231..83869368221 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts
@@ -30,9 +30,11 @@ export function useBlockDimensions({
   const updateNodeInternals = useUpdateNodeInternals()
   const updateBlockLayoutMetrics = useWorkflowStore((state) => state.updateBlockLayoutMetrics)
   const previousDimensions = useRef<BlockDimensions | null>(null)
+  const calculateDimensionsRef = useRef(calculateDimensions)
+  calculateDimensionsRef.current = calculateDimensions
 
   useEffect(() => {
-    const dimensions = calculateDimensions()
+    const dimensions = calculateDimensionsRef.current()
     const previous = previousDimensions.current
 
     if (!previous || previous.width !== dimensions.width || previous.height !== dimensions.height) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-dynamic-handle-refresh.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-dynamic-handle-refresh.ts
index aa6c9c7e333..f1be93070e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-dynamic-handle-refresh.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-dynamic-handle-refresh.ts
@@ -9,13 +9,16 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 export function useDynamicHandleRefresh() {
   const updateNodeInternals = useUpdateNodeInternals()
   const blocks = useWorkflowStore((state) => state.blocks)
-  const previousSignaturesRef = useRef<Map<string, string>>(new Map())
+  const previousSignaturesRef = useRef<Map<string, string> | null>(null)
+  if (previousSignaturesRef.current === null) {
+    previousSignaturesRef.current = new Map()
+  }
 
   const signatures = useMemo(() => collectDynamicHandleTopologySignatures(blocks), [blocks])
 
   useEffect(() => {
     const changedBlockIds = getChangedDynamicHandleBlockIds(
-      previousSignaturesRef.current,
+      previousSignaturesRef.current ?? new Map(),
       signatures
     )
     previousSignaturesRef.current = signatures
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts
index 77d5cde2635..6b1f2a993bc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts
@@ -224,40 +224,47 @@ export function useNodeUtilities(blocks: Record<string, any>) {
       loopPosition: { x: number; y: number }
       dimensions: { width: number; height: number }
     } | null => {
-      const containingNodes = getNodes()
-        .filter((n) => n.type && isContainerType(n.type))
-        .filter((n) => {
-          // Use absolute coordinates for nested containers
-          const absolutePos = getNodeAbsolutePosition(n.id)
-          const rect = {
-            left: absolutePos.x,
-            right: absolutePos.x + (n.data?.width || CONTAINER_DIMENSIONS.DEFAULT_WIDTH),
-            top: absolutePos.y,
-            bottom: absolutePos.y + (n.data?.height || CONTAINER_DIMENSIONS.DEFAULT_HEIGHT),
-          }
-
-          return (
-            position.x >= rect.left &&
-            position.x <= rect.right &&
-            position.y >= rect.top &&
-            position.y <= rect.bottom
-          )
-        })
-        .map((n) => ({
-          loopId: n.id,
-          loopPosition: getNodeAbsolutePosition(n.id),
-          dimensions: {
-            width: n.data?.width || CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
-            height: n.data?.height || CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
-          },
-        }))
+      const containingNodes: Array<{
+        loopId: string
+        loopPosition: { x: number; y: number }
+        dimensions: { width: number; height: number }
+      }> = []
+
+      for (const n of getNodes()) {
+        if (!n.type || !isContainerType(n.type)) continue
+
+        // Use absolute coordinates for nested containers
+        const absolutePos = getNodeAbsolutePosition(n.id)
+        const rect = {
+          left: absolutePos.x,
+          right: absolutePos.x + (n.data?.width || CONTAINER_DIMENSIONS.DEFAULT_WIDTH),
+          top: absolutePos.y,
+          bottom: absolutePos.y + (n.data?.height || CONTAINER_DIMENSIONS.DEFAULT_HEIGHT),
+        }
+
+        if (
+          position.x >= rect.left &&
+          position.x <= rect.right &&
+          position.y >= rect.top &&
+          position.y <= rect.bottom
+        ) {
+          containingNodes.push({
+            loopId: n.id,
+            loopPosition: getNodeAbsolutePosition(n.id),
+            dimensions: {
+              width: n.data?.width || CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
+              height: n.data?.height || CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
+            },
+          })
+        }
+      }
 
       if (containingNodes.length > 0) {
-        return containingNodes.sort((a, b) => {
-          const aArea = a.dimensions.width * a.dimensions.height
-          const bArea = b.dimensions.width * b.dimensions.height
-          return aArea - bArea
-        })[0]
+        return containingNodes.reduce((smallest, node) => {
+          const nodeArea = node.dimensions.width * node.dimensions.height
+          const smallestArea = smallest.dimensions.width * smallest.dimensions.height
+          return nodeArea < smallestArea ? node : smallest
+        })
       }
 
       return null
@@ -298,14 +305,16 @@ export function useNodeUtilities(blocks: Record<string, any>) {
   const resizeLoopNodes = useCallback(
     (updateNodeDimensions: (id: string, dimensions: { width: number; height: number }) => void) => {
       const currentBlocks = useWorkflowStore.getState().blocks
-      const containerBlocks = Object.entries(currentBlocks)
-        .filter(([, block]) => block?.type && isContainerType(block.type))
-        .map(([id, block]) => ({
-          id,
-          block,
-          depth: getNodeDepth(id),
-        }))
-        .sort((a, b) => b.depth - a.depth)
+      const containerBlocks: Array<{
+        id: string
+        block: (typeof currentBlocks)[string]
+        depth: number
+      }> = []
+      for (const [id, block] of Object.entries(currentBlocks)) {
+        if (!block?.type || !isContainerType(block.type)) continue
+        containerBlocks.push({ id, block, depth: getNodeDepth(id) })
+      }
+      containerBlocks.sort((a, b) => b.depth - a.depth)
 
       for (const { id, block } of containerBlocks) {
         const dimensions = calculateLoopDimensions(id)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand.ts
index 1ac9e042573..669150a3f9f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand.ts
@@ -108,6 +108,7 @@ export function useWand({
   const [isStreaming, setIsStreaming] = useState(false)
 
   const [conversationHistory, setConversationHistory] = useState<ChatMessage[]>([])
+  const conversationHistoryRef = useRef<ChatMessage[]>([])
 
   const abortControllerRef = useRef<AbortController | null>(null)
 
@@ -192,7 +193,7 @@ export function useWand({
               prompt: userMessage,
               systemPrompt: systemPrompt,
               stream: true,
-              history: wandConfig?.maintainHistory ? conversationHistory : [],
+              history: wandConfig?.maintainHistory ? conversationHistoryRef.current : [],
               generationType: wandConfig?.generationType,
               workflowId: workflowId ?? undefined,
               workspaceId: workspaceId ?? undefined,
@@ -221,11 +222,13 @@ export function useWand({
           onGeneratedContent(accumulatedContent)
 
           if (wandConfig?.maintainHistory) {
-            setConversationHistory((prev) => [
-              ...prev,
+            const nextHistory: ChatMessage[] = [
+              ...conversationHistoryRef.current,
               { role: 'user', content: currentPrompt },
               { role: 'assistant', content: accumulatedContent },
-            ])
+            ]
+            conversationHistoryRef.current = nextHistory
+            setConversationHistory(nextHistory)
           }
 
           if (onGenerationComplete) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts
index 4346acc4650..e062740cbe8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts
@@ -354,6 +354,60 @@ export function useWorkflowExecution() {
     )
   }, [])
 
+  const persistLogs = useCallback(
+    async (executionId: string, result: ExecutionResult, streamContent?: string) => {
+      try {
+        // Build trace spans from execution logs
+        const { traceSpans, totalDuration } = buildTraceSpans(result)
+
+        // Add trace spans to the execution result
+        const enrichedResult = {
+          ...result,
+          traceSpans,
+          totalDuration,
+        }
+
+        // If this was a streaming response and we have the final content, update it
+        if (streamContent && result.output && typeof streamContent === 'string') {
+          // Update the content with the final streaming content
+          enrichedResult.output.content = streamContent
+
+          // Also update any block logs to include the content where appropriate
+          if (enrichedResult.logs) {
+            // Get the streaming block ID from metadata if available
+            const streamingBlockId = (result.metadata as any)?.streamingBlockId || null
+
+            for (const log of enrichedResult.logs) {
+              // Only update the specific LLM block (agent/router) that was streamed
+              const isStreamingBlock = streamingBlockId && log.blockId === streamingBlockId
+              if (
+                isStreamingBlock &&
+                (log.blockType === 'agent' || log.blockType === 'router') &&
+                log.output
+              )
+                log.output.content = streamContent
+            }
+          }
+        }
+
+        if (!activeWorkflowId) return executionId
+        await requestJson(workflowLogContract, {
+          params: { id: activeWorkflowId },
+          body: {
+            executionId,
+            result: enrichedResult,
+          },
+        })
+
+        return executionId
+      } catch (error) {
+        logger.error('Error persisting logs:', error)
+        return executionId
+      }
+    },
+    [activeWorkflowId]
+  )
+
   /**
    * Handles debug session completion
    */
@@ -368,7 +422,7 @@ export function useWorkflowExecution() {
       // Reset debug state
       resetDebugState()
     },
-    [activeWorkflowId, resetDebugState]
+    [persistLogs, resetDebugState]
   )
 
   /**
@@ -415,64 +469,9 @@ export function useWorkflowExecution() {
       // Reset debug state
       resetDebugState()
     },
-    [debugContext, activeWorkflowId, resetDebugState]
+    [debugContext, persistLogs, resetDebugState]
   )
 
-  const persistLogs = async (
-    executionId: string,
-    result: ExecutionResult,
-    streamContent?: string
-  ) => {
-    try {
-      // Build trace spans from execution logs
-      const { traceSpans, totalDuration } = buildTraceSpans(result)
-
-      // Add trace spans to the execution result
-      const enrichedResult = {
-        ...result,
-        traceSpans,
-        totalDuration,
-      }
-
-      // If this was a streaming response and we have the final content, update it
-      if (streamContent && result.output && typeof streamContent === 'string') {
-        // Update the content with the final streaming content
-        enrichedResult.output.content = streamContent
-
-        // Also update any block logs to include the content where appropriate
-        if (enrichedResult.logs) {
-          // Get the streaming block ID from metadata if available
-          const streamingBlockId = (result.metadata as any)?.streamingBlockId || null
-
-          for (const log of enrichedResult.logs) {
-            // Only update the specific LLM block (agent/router) that was streamed
-            const isStreamingBlock = streamingBlockId && log.blockId === streamingBlockId
-            if (
-              isStreamingBlock &&
-              (log.blockType === 'agent' || log.blockType === 'router') &&
-              log.output
-            )
-              log.output.content = streamContent
-          }
-        }
-      }
-
-      if (!activeWorkflowId) return executionId
-      await requestJson(workflowLogContract, {
-        params: { id: activeWorkflowId },
-        body: {
-          executionId,
-          result: enrichedResult,
-        },
-      })
-
-      return executionId
-    } catch (error) {
-      logger.error('Error persisting logs:', error)
-      return executionId
-    }
-  }
-
   const handleRunWorkflow = useCallback(
     async (workflowInput?: any, enableDebug = false) => {
       if (!activeWorkflowId) return
@@ -1586,7 +1585,6 @@ export function useWorkflowExecution() {
     executor,
     debugContext,
     pendingBlocks,
-    activeWorkflowId,
     validateDebugState,
     resetDebugState,
     isDebugSessionComplete,
@@ -1638,10 +1636,12 @@ export function useWorkflowExecution() {
 
         currentResult = await executor!.continueExecution(currentPendingBlocks, currentContext)
 
+        const resultPendingBlocks = currentResult.metadata?.pendingBlocks
+
         logger.info('Resume iteration result:', {
           success: currentResult.success,
-          hasPendingBlocks: !!currentResult.metadata?.pendingBlocks,
-          pendingBlockCount: currentResult.metadata?.pendingBlocks?.length || 0,
+          hasPendingBlocks: !!resultPendingBlocks,
+          pendingBlockCount: resultPendingBlocks?.length || 0,
         })
 
         // Update context for next iteration
@@ -1653,8 +1653,8 @@ export function useWorkflowExecution() {
         }
 
         // Update pending blocks for next iteration
-        if (currentResult.metadata?.pendingBlocks) {
-          currentPendingBlocks = currentResult.metadata.pendingBlocks
+        if (resultPendingBlocks) {
+          currentPendingBlocks = resultPendingBlocks
         } else {
           logger.info('No pending blocks in result, ending resume')
           break
@@ -1687,7 +1687,6 @@ export function useWorkflowExecution() {
     executor,
     debugContext,
     pendingBlocks,
-    activeWorkflowId,
     validateDebugState,
     resetDebugState,
     handleDebugSessionComplete,
@@ -2059,8 +2058,6 @@ export function useWorkflowExecution() {
       setCurrentExecutionId,
       setIsExecuting,
       setActiveBlocks,
-      setBlockRunStatus,
-      setEdgeRunStatus,
       updateConsole,
       finishRunningEntries,
       setExecutionResult,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts
index 2fa772f78bb..72b4f6cdd95 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts
@@ -226,7 +226,10 @@ export function resolveParentChildSelectionConflicts(
   nodes: Node[],
   blocks: Record<string, { data?: { parentId?: string } }>
 ): Node[] {
-  const selectedIds = new Set(nodes.filter((n) => n.selected).map((n) => n.id))
+  const selectedIds = new Set<string>()
+  for (const n of nodes) {
+    if (n.selected) selectedIds.add(n.id)
+  }
 
   let hasConflict = false
   const resolved = nodes.map((n) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 1e87115e592..8f4a91302eb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -553,7 +553,14 @@ const WorkflowContent = React.memo(
 
       if (!isShowingDiff && isDiffReady && diffAnalysis?.edge_diff?.deleted_edges) {
         const reconstructedEdges: Edge[] = []
-        const validHandles = ['source', 'target', 'success', 'error', 'default', 'condition']
+        const validHandles = new Set([
+          'source',
+          'target',
+          'success',
+          'error',
+          'default',
+          'condition',
+        ])
 
         diffAnalysis.edge_diff.deleted_edges.forEach((edgeIdentifier) => {
           const parts = edgeIdentifier.split('-')
@@ -562,7 +569,7 @@ const WorkflowContent = React.memo(
             let targetStartIndex = -1
 
             for (let i = 1; i < parts.length - 1; i++) {
-              if (validHandles.includes(parts[i])) {
+              if (validHandles.has(parts[i])) {
                 sourceEndIndex = i
                 for (let j = i + 1; j < parts.length - 1; j++) {
                   if (parts[j].length > 0) {
@@ -1809,9 +1816,16 @@ const WorkflowContent = React.memo(
                 }
               )
 
-              const existingChildBlocks = Object.values(blocks)
-                .filter((b) => b.data?.parentId === containerInfo.loopId)
-                .map((b) => ({ id: b.id, type: b.type, position: b.position }))
+              const existingChildBlocks: {
+                id: string
+                type: string
+                position: { x: number; y: number }
+              }[] = []
+              for (const b of Object.values(blocks)) {
+                if (b.data?.parentId === containerInfo.loopId) {
+                  existingChildBlocks.push({ id: b.id, type: b.type, position: b.position })
+                }
+              }
 
               const autoConnectEdge = tryCreateAutoConnectEdge(relativePosition, id, {
                 targetParentId: containerInfo.loopId,
@@ -1901,9 +1915,16 @@ const WorkflowContent = React.memo(
             )
 
             // Capture existing child blocks for auto-connect
-            const existingChildBlocks = Object.values(blocks)
-              .filter((b) => b.data?.parentId === containerInfo.loopId)
-              .map((b) => ({ id: b.id, type: b.type, position: b.position }))
+            const existingChildBlocks: {
+              id: string
+              type: string
+              position: { x: number; y: number }
+            }[] = []
+            for (const b of Object.values(blocks)) {
+              if (b.data?.parentId === containerInfo.loopId) {
+                existingChildBlocks.push({ id: b.id, type: b.type, position: b.position })
+              }
+            }
 
             const autoConnectEdge = tryCreateAutoConnectEdge(relativePosition, id, {
               targetParentId: containerInfo.loopId,
@@ -2116,13 +2137,15 @@ const WorkflowContent = React.memo(
 
     /** Tracks blocks to pan to after diff updates. */
     const pendingZoomBlockIdsRef = useRef<Set<string> | null>(null)
-    const seenDiffBlocksRef = useRef<Set<string>>(new Set())
+    const seenDiffBlocksRef = useRef<Set<string> | null>(null)
 
     /** Queues newly changed blocks for viewport panning. */
     useEffect(() => {
+      if (seenDiffBlocksRef.current === null) seenDiffBlocksRef.current = new Set()
+      const seenDiffBlocks = seenDiffBlocksRef.current
       if (!isDiffReady || !diffAnalysis) {
         pendingZoomBlockIdsRef.current = null
-        seenDiffBlocksRef.current.clear()
+        seenDiffBlocks.clear()
         return
       }
 
@@ -2130,10 +2153,10 @@ const WorkflowContent = React.memo(
       const allBlocks = [...(diffAnalysis.new_blocks || []), ...(diffAnalysis.edited_blocks || [])]
 
       for (const id of allBlocks) {
-        if (!seenDiffBlocksRef.current.has(id)) {
+        if (!seenDiffBlocks.has(id)) {
           newBlocks.add(id)
         }
-        seenDiffBlocksRef.current.add(id)
+        seenDiffBlocks.add(id)
       }
 
       if (newBlocks.size > 0) {
@@ -2336,6 +2359,7 @@ const WorkflowContent = React.memo(
           })
       }
     }, [
+      sandbox,
       workflowIdParam,
       isWorkflowMapLoading,
       isWorkflowMapPlaceholderData,
@@ -2383,9 +2407,10 @@ const WorkflowContent = React.memo(
         )
 
         // Validate that workflows belong to the current workspace before redirecting
-        const workspaceWorkflows = Object.entries(workflows)
-          .filter(([, workflow]) => workflow.workspaceId === workspaceId)
-          .map(([id]) => id)
+        const workspaceWorkflows: string[] = []
+        for (const [id, workflow] of Object.entries(workflows)) {
+          if (workflow.workspaceId === workspaceId) workspaceWorkflows.push(id)
+        }
 
         if (workspaceWorkflows.length > 0) {
           router.replace(`/workspace/${workspaceId}/w/${workspaceWorkflows[0]}`)
@@ -2407,6 +2432,7 @@ const WorkflowContent = React.memo(
       }
     }, [
       embedded,
+      sandbox,
       workflowIdParam,
       isWorkflowMapLoading,
       isWorkflowMapPlaceholderData,
@@ -2419,12 +2445,14 @@ const WorkflowContent = React.memo(
       workflows,
     ])
 
-    const blockConfigCache = useRef<Map<string, any>>(new Map())
+    const blockConfigCache = useRef<Map<string, any> | null>(null)
     const getBlockConfig = useCallback((type: string) => {
-      if (!blockConfigCache.current.has(type)) {
-        blockConfigCache.current.set(type, getBlock(type))
+      if (blockConfigCache.current === null) blockConfigCache.current = new Map()
+      const cache = blockConfigCache.current
+      if (!cache.has(type)) {
+        cache.set(type, getBlock(type))
       }
-      return blockConfigCache.current.get(type)
+      return cache.get(type)
     }, [])
 
     const prevBlocksHashRef = useRef<string>('')
@@ -2566,7 +2594,6 @@ const WorkflowContent = React.memo(
 
       return nodeArray
     }, [
-      blocksStructureHash,
       blocks,
       activeBlockIds,
       pendingBlocks,
@@ -2581,23 +2608,29 @@ const WorkflowContent = React.memo(
     const [displayNodes, setDisplayNodes] = useState<Node[]>([])
     const [lastInteractedNodeId, setLastInteractedNodeId] = useState<string | null>(null)
 
-    const selectedNodeIds = useMemo(
-      () => displayNodes.filter((node) => node.selected).map((node) => node.id),
-      [displayNodes]
-    )
+    const selectedNodeIds = useMemo(() => {
+      const ids: string[] = []
+      for (const node of displayNodes) {
+        if (node.selected) ids.push(node.id)
+      }
+      return ids
+    }, [displayNodes])
     const selectedNodeIdsKey = selectedNodeIds.join(',')
 
     useEffect(() => {
       syncPanelWithSelection(selectedNodeIds)
     }, [selectedNodeIdsKey])
 
-    // Keep the most recently selected block on top even after deselection, so a
-    // dragged block doesn't suddenly drop behind other overlapping blocks.
-    useEffect(() => {
-      if (selectedNodeIds.length > 0) {
-        setLastInteractedNodeId(selectedNodeIds[selectedNodeIds.length - 1])
-      }
-    }, [selectedNodeIdsKey])
+    /**
+     * Keep the most recently selected block on top even after deselection (so a dragged block
+     * doesn't drop behind overlapping blocks). Latched during render — retains the previous id
+     * when the selection clears, so it's a latch rather than plain derived state.
+     */
+    const lastSelectedNodeId =
+      selectedNodeIds.length > 0 ? selectedNodeIds[selectedNodeIds.length - 1] : null
+    if (lastSelectedNodeId !== null && lastSelectedNodeId !== lastInteractedNodeId) {
+      setLastInteractedNodeId(lastSelectedNodeId)
+    }
 
     useEffect(() => {
       // Check for pending selection (from paste/duplicate), otherwise preserve existing selection
@@ -2617,7 +2650,10 @@ const WorkflowContent = React.memo(
 
       // Preserve existing selection state
       setDisplayNodes((currentNodes) => {
-        const selectedIds = new Set(currentNodes.filter((n) => n.selected).map((n) => n.id))
+        const selectedIds = new Set<string>()
+        for (const n of currentNodes) {
+          if (n.selected) selectedIds.add(n.id)
+        }
         return derivedNodes.map((node) => ({
           ...node,
           selected: selectedIds.has(node.id),
@@ -2979,7 +3015,7 @@ const WorkflowContent = React.memo(
     const findNodeAtScreenPosition = useCallback(
       (clientX: number, clientY: number) => {
         const elements = document.elementsFromPoint(clientX, clientY)
-        const nodes = getNodes()
+        const nodesById = new Map(getNodes().map((n) => [n.id, n]))
 
         for (const el of elements) {
           const nodeEl = el.closest('.react-flow__node') as HTMLElement | null
@@ -2988,7 +3024,7 @@ const WorkflowContent = React.memo(
           const nodeId = nodeEl.getAttribute('data-id')
           if (!nodeId) continue
 
-          const node = nodes.find((n) => n.id === nodeId)
+          const node = nodesById.get(nodeId)
           if (node && node.type !== 'subflowNode') return node
         }
 
@@ -3477,9 +3513,16 @@ const WorkflowContent = React.memo(
           }
 
           // Auto-connect when moving an existing block into a container
-          const existingChildBlocks = Object.values(blocks)
-            .filter((b) => b.data?.parentId === potentialParentId && b.id !== node.id)
-            .map((b) => ({ id: b.id, type: b.type, position: b.position }))
+          const existingChildBlocks: {
+            id: string
+            type: string
+            position: { x: number; y: number }
+          }[] = []
+          for (const b of Object.values(blocks)) {
+            if (b.data?.parentId === potentialParentId && b.id !== node.id) {
+              existingChildBlocks.push({ id: b.id, type: b.type, position: b.position })
+            }
+          }
 
           const autoConnectEdge = tryCreateAutoConnectEdge(relativePositionBefore, node.id, {
             targetParentId: potentialParentId,
@@ -3717,7 +3760,6 @@ const WorkflowContent = React.memo(
         potentialParentId,
         getNodeAbsolutePosition,
         getNodeDepth,
-        clearDragHighlights,
         highlightContainerNode,
       ]
     )
@@ -3748,6 +3790,7 @@ const WorkflowContent = React.memo(
         potentialParentId,
         clearDragHighlights,
         executeBatchParentUpdate,
+        setDragStartPosition,
       ]
     )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index 1c095a9c4c1..0482a123339 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -194,17 +194,10 @@ function CollapsibleSection({
 
   return (
     <div className='flex min-w-0 flex-col gap-2 overflow-hidden border-[var(--border)] border-b px-3 py-2.5'>
-      <div
+      <button
+        type='button'
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => setIsExpanded(!isExpanded)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            setIsExpanded(!isExpanded)
-          }
-        }}
-        role='button'
-        tabIndex={0}
         aria-expanded={isExpanded}
         aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${title.toLowerCase()}`}
       >
@@ -224,7 +217,7 @@ function CollapsibleSection({
             isExpanded && 'rotate-180'
           )}
         />
-      </div>
+      </button>
 
       {isExpanded && (
         <>
@@ -287,9 +280,9 @@ function ConnectionsSection({
   const [expandedVariables, setExpandedVariables] = useState(true)
   const [expandedEnvVars, setExpandedEnvVars] = useState(true)
 
-  const [prevConnectionIds, setPrevConnectionIds] = useState(connectionIds)
-  if (connectionIds !== prevConnectionIds) {
-    setPrevConnectionIds(connectionIds)
+  const prevConnectionIdsRef = useRef(connectionIds)
+  if (connectionIds !== prevConnectionIdsRef.current) {
+    prevConnectionIdsRef.current = connectionIds
     setExpandedBlocks(new Set(connectionIds.split(',').filter(Boolean)))
   }
 
@@ -773,7 +766,7 @@ function PreviewEditorContent({
   }, [workflowVariables])
 
   const blockConfig = getBlock(block.type) as BlockConfig | undefined
-  const subBlockValues = block.subBlocks || {}
+  const subBlockValues = useMemo(() => block.subBlocks || {}, [block.subBlocks])
 
   const params = useParams()
   const workspaceId = params.workspaceId as string
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index c28f99bbc8b..ab2eba5cb70 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -53,6 +53,9 @@ const ERROR_HANDLE_STYLE: CSSProperties = {
   transform: 'translateY(50%)',
 }
 
+/** Stable empty workflow map so memoized subblock rows keep a constant reference. */
+const EMPTY_WORKFLOW_MAP: Record<string, WorkflowMetadata> = {}
+
 interface WorkflowPreviewBlockData {
   type: string
   name: string
@@ -175,7 +178,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
   const {
     type,
     name,
-    workflowMap = {},
+    workflowMap = EMPTY_WORKFLOW_MAP,
     workflowLabelsReady = false,
     isTrigger = false,
     horizontalHandles = false,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx
index ee0790ad673..2263f35a80e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx
@@ -355,14 +355,6 @@ export function PreviewWorkflow({
     }
   }, [workflowState.blocks, getSubflowExecutionStatus, blockExecutionMap])
 
-  const edgesStructure = useMemo(() => {
-    if (!isValidWorkflowState) return { count: 0, ids: '' }
-    return {
-      count: workflowState.edges?.length || 0,
-      ids: workflowState.edges?.map((e) => e.id).join(',') || '',
-    }
-  }, [workflowState.edges, isValidWorkflowState])
-
   const nodes: Node[] = useMemo(() => {
     if (!isValidWorkflowState) return []
 
@@ -472,6 +464,7 @@ export function PreviewWorkflow({
     workflowState.blocks,
     isValidWorkflowState,
     executedBlocks,
+    blockExecutionMap,
     selectedBlockId,
     getSubflowExecutionStatus,
     workflowMap,
@@ -545,13 +538,7 @@ export function PreviewWorkflow({
         zIndex: status === 'success' ? 10 : isErrorEdge ? 5 : 0,
       }
     })
-  }, [
-    edgesStructure,
-    workflowState.edges,
-    isValidWorkflowState,
-    blockExecutionMap,
-    getBlockExecutionStatus,
-  ])
+  }, [workflowState.edges, isValidWorkflowState, blockExecutionMap, getBlockExecutionStatus])
 
   if (!isValidWorkflowState) {
     return (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
index f4755c59241..23d6cfb6303 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -216,9 +216,9 @@ export function Preview({
   })
 
   const [workflowStack, setWorkflowStack] = useState<WorkflowStackEntry[]>([])
-  const [prevRootState, setPrevRootState] = useState(rootWorkflowState)
-  if (rootWorkflowState !== prevRootState) {
-    setPrevRootState(rootWorkflowState)
+  const prevRootStateRef = useRef(rootWorkflowState)
+  if (rootWorkflowState !== prevRootStateRef.current) {
+    prevRootStateRef.current = rootWorkflowState
     setWorkflowStack([])
   }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
index 41fe122cd38..710c51b6b94 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
@@ -22,6 +22,7 @@ const logger = createLogger('HelpModal')
 const MAX_FILE_SIZE = 20 * 1024 * 1024
 const TARGET_SIZE_MB = 2
 const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif']
+const ACCEPTED_IMAGE_TYPES_SET = new Set(ACCEPTED_IMAGE_TYPES)
 
 const SCROLL_DELAY_MS = 100
 const SUCCESS_RESET_DELAY_MS = 2000
@@ -213,7 +214,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
           continue
         }
 
-        if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+        if (!ACCEPTED_IMAGE_TYPES_SET.has(file.type)) {
           hasError = true
           continue
         }
@@ -254,7 +255,12 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
       <ChipModalHeader onClose={() => onOpenChange(false)}>Help &amp; support</ChipModalHeader>
 
       <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-        <button type='submit' hidden disabled={helpMutation.isPending || isProcessing} />
+        <button
+          type='submit'
+          hidden
+          aria-label='Submit help request'
+          disabled={helpMutation.isPending || isProcessing}
+        />
         <ChipModalBody ref={scrollContainerRef} className='max-h-[60vh]'>
           <Controller
             name='type'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 1c5b4fd32bc..b81bcd053cd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -1,6 +1,14 @@
 'use client'
 
-import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react'
 import { cn, Library } from '@sim/emcn'
 import {
   Calendar,
@@ -29,19 +37,6 @@ import { createPortal } from 'react-dom'
 import { captureEvent } from '@/lib/posthog/client'
 import { hasTriggerCapability } from '@/lib/workflows/triggers/trigger-utils'
 import { useInvokeGlobalCommand } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
-import {
-  CMDK_ITEM_GAP_CLASS,
-  CMDK_SECTION_GAP_CLASS,
-} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
-import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
-import { usePermissionConfig } from '@/hooks/use-permission-config'
-import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
-import { useSearchModalStore } from '@/stores/modals/search/store'
-import type {
-  SearchBlockItem,
-  SearchDocItem,
-  SearchToolOperationItem,
-} from '@/stores/modals/search/types'
 import {
   ActionsGroup,
   BlocksGroup,
@@ -58,7 +53,20 @@ import {
   TriggersGroup,
   WorkflowsGroup,
   WorkspacesGroup,
-} from './components/search-groups'
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups'
+import {
+  CMDK_ITEM_GAP_CLASS,
+  CMDK_SECTION_GAP_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { usePermissionConfig } from '@/hooks/use-permission-config'
+import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
+import { useSearchModalStore } from '@/stores/modals/search/store'
+import type {
+  SearchBlockItem,
+  SearchDocItem,
+  SearchToolOperationItem,
+} from '@/stores/modals/search/types'
 import type {
   ActionItem,
   FileItem,
@@ -75,17 +83,28 @@ const logger = createLogger('SearchModal')
 
 export type { SearchModalProps } from './utils'
 
+/** No-op subscribe for the client-mounted flag; the value never changes after mount. */
+const subscribeNoop = () => () => {}
+const getMountedClientSnapshot = () => true
+const getMountedServerSnapshot = () => false
+
+const EMPTY_WORKFLOWS: WorkflowItem[] = []
+const EMPTY_WORKSPACES: WorkspaceItem[] = []
+const EMPTY_TASKS: TaskItem[] = []
+const EMPTY_FILES: FileItem[] = []
+const EMPTY_INTEGRATIONS: IntegrationSearchItem[] = []
+
 export function SearchModal({
   open,
   onOpenChange,
-  workflows = [],
-  workspaces = [],
-  chats = [],
-  tables = [],
-  files = [],
-  knowledgeBases = [],
-  integrations = [],
-  connectedAccounts = [],
+  workflows = EMPTY_WORKFLOWS,
+  workspaces = EMPTY_WORKSPACES,
+  chats = EMPTY_TASKS,
+  tables = EMPTY_TASKS,
+  files = EMPTY_FILES,
+  knowledgeBases = EMPTY_TASKS,
+  integrations = EMPTY_INTEGRATIONS,
+  connectedAccounts = EMPTY_INTEGRATIONS,
   isOnWorkflowPage = false,
   isOnIntegrationsPage = false,
   canEdit = false,
@@ -97,7 +116,11 @@ export function SearchModal({
   const router = useRouter()
   const workspaceId = params.workspaceId as string
   const inputRef = useRef<HTMLInputElement>(null)
-  const [mounted, setMounted] = useState(false)
+  const mounted = useSyncExternalStore(
+    subscribeNoop,
+    getMountedClientSnapshot,
+    getMountedServerSnapshot
+  )
   const { navigateToSettings } = useSettingsNavigation()
   const { config: permissionConfig } = usePermissionConfig()
   const invokeCommand = useInvokeGlobalCommand()
@@ -110,10 +133,6 @@ export function SearchModal({
   const posthogRef = useRef(posthog)
   posthogRef.current = posthog
 
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
   const { blocks, tools, triggers, toolOperations, docs } = useSearchModalStore(
     (state) => state.data
   )
@@ -291,9 +310,9 @@ export function SearchModal({
   ])
 
   const [search, setSearch] = useState('')
-  const [prevOpen, setPrevOpen] = useState(open)
-  if (open !== prevOpen) {
-    setPrevOpen(open)
+  const prevOpenRef = useRef(open)
+  if (open !== prevOpenRef.current) {
+    prevOpenRef.current = open
     if (open) setSearch('')
   }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index c9ca98d100c..3d18205668a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -278,12 +278,10 @@ export function SettingsSidebar({
       >
         <div ref={scrollContentRef} className='flex flex-col'>
           {sectionConfig
-            .map(({ key, title }) => ({
-              key,
-              title,
-              items: navigationItems.filter((item) => item.section === key),
-            }))
-            .filter(({ items }) => items.length > 0)
+            .flatMap(({ key, title }) => {
+              const items = navigationItems.filter((item) => item.section === key)
+              return items.length > 0 ? [{ key, title, items }] : []
+            })
             .map(({ key, title, items: sectionItems }, index) => (
               <div
                 key={key}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
index a2b6d234379..0c5e9520e92 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { ChipConfirmModal, type ChipConfirmTextSegment, ChipModalField } from '@sim/emcn'
 
 interface DeleteModalProps {
@@ -48,10 +48,10 @@ export function DeleteModal({
   itemName,
 }: DeleteModalProps) {
   const [confirmationText, setConfirmationText] = useState('')
-  const [prevIsOpen, setPrevIsOpen] = useState(false)
+  const prevIsOpenRef = useRef(false)
 
-  if (isOpen !== prevIsOpen) {
-    setPrevIsOpen(isOpen)
+  if (isOpen !== prevIsOpenRef.current) {
+    prevIsOpenRef.current = isOpen
     if (isOpen) {
       setConfirmationText('')
     }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index 66c4e8b8517..350c65a1884 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { chipVariants, cn } from '@sim/emcn'
 import { Lock } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
@@ -276,8 +276,9 @@ export function FolderItem({ folder }: FolderItemProps) {
       const f = folderMap[id]
       if (f) names.push(f.name)
     }
+    const workflowById = new Map(workflows.map((wf) => [wf.id, wf]))
     for (const id of workflowIds) {
-      const w = workflows.find((wf) => wf.id === id)
+      const w = workflowById.get(id)
       if (w) names.push(w.name)
     }
 
@@ -291,7 +292,7 @@ export function FolderItem({ folder }: FolderItemProps) {
     const canDeleteAllFolders = folderIds.every((id) => canDeleteFolder(id))
     const canDeleteAllWorkflows = workflowIds.length === 0 || canDeleteWorkflows(workflowIds)
     setCanDeleteSelection(canDeleteAllFolders && canDeleteAllWorkflows)
-  }, [folder.id, canDeleteFolder, canDeleteWorkflows])
+  }, [folder.id, workspaceId, canDeleteFolder, canDeleteWorkflows])
 
   const handleContextMenu = useCallback(
     (e: React.MouseEvent) => {
@@ -453,15 +454,11 @@ export function FolderItem({ folder }: FolderItemProps) {
     }
   }, [handleDuplicateSelection, handleDuplicateThisFolder])
 
-  const isMixedSelection = useMemo(() => {
-    return capturedSelectionRef.current?.isMixed ?? false
-  }, [isContextMenuOpen])
+  const isMixedSelection = capturedSelectionRef.current?.isMixed ?? false
 
-  const hasExportableContent = useMemo(() => {
-    if (!capturedSelectionRef.current) return hasWorkflows
-    const { workflowIds } = capturedSelectionRef.current
-    return workflowIds.length > 0 || hasWorkflows
-  }, [isContextMenuOpen, hasWorkflows])
+  const hasExportableContent = capturedSelectionRef.current
+    ? capturedSelectionRef.current.workflowIds.length > 0 || hasWorkflows
+    : hasWorkflows
 
   return (
     <>
@@ -503,6 +500,7 @@ export function FolderItem({ folder }: FolderItemProps) {
         {isEditing ? (
           <input
             ref={inputRef}
+            aria-label='Folder name'
             value={editValue}
             onChange={(e) => setEditValue(e.target.value)}
             onKeyDown={handleRenameKeyDown}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index 72b5f373482..231c010197c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { chipVariants, cn } from '@sim/emcn'
 import { Lock } from '@sim/emcn/icons'
 import clsx from 'clsx'
@@ -190,9 +190,7 @@ export function WorkflowItem({ workflow, active }: WorkflowItemProps) {
     preventDismiss,
   } = useContextMenu()
 
-  const isMixedSelection = useMemo(() => {
-    return capturedSelectionRef.current?.isMixed ?? false
-  }, [isContextMenuOpen])
+  const isMixedSelection = capturedSelectionRef.current?.isMixed ?? false
 
   const captureSelectionState = useCallback(() => {
     const store = useFolderStore.getState()
@@ -216,8 +214,9 @@ export function WorkflowItem({ workflow, active }: WorkflowItemProps) {
     const folderMap = getFolderMap(workspaceId)
 
     const names: string[] = []
+    const workflowById = new Map(workflows.map((wf) => [wf.id, wf]))
     for (const id of workflowIds) {
-      const w = workflows.find((wf) => wf.id === id)
+      const w = workflowById.get(id)
       if (w) names.push(w.name)
     }
     for (const id of folderIds) {
@@ -236,7 +235,7 @@ export function WorkflowItem({ workflow, active }: WorkflowItemProps) {
     const canDeleteAllFolders =
       folderIds.length === 0 || folderIds.every((id) => canDeleteFolder(id))
     setCanDeleteSelection(canDeleteAllWorkflows && canDeleteAllFolders)
-  }, [workflow.id, canDeleteWorkflows, canDeleteFolder])
+  }, [workflow.id, workspaceId, canDeleteWorkflows, canDeleteFolder])
 
   const handleContextMenu = useCallback(
     (e: React.MouseEvent) => {
@@ -413,6 +412,7 @@ export function WorkflowItem({ workflow, active }: WorkflowItemProps) {
             {isEditing ? (
               <input
                 ref={inputRef}
+                aria-label='Workflow name'
                 value={editValue}
                 onChange={(e) => setEditValue(e.target.value)}
                 onKeyDown={handleKeyDown}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
index 5ace96b0459..edccffb04ba 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -483,9 +483,9 @@ export const WorkflowList = memo(function WorkflowList({
   )
 
   const rootDropZoneHandlers = createRootDropZone()
-  const rootWorkflows = workflowsByFolder.root || []
 
   const rootItems = useMemo(() => {
+    const rootWorkflows = workflowsByFolder.root || []
     const items: Array<{
       type: 'folder' | 'workflow'
       id: string
@@ -512,7 +512,7 @@ export const WorkflowList = memo(function WorkflowList({
       })
     }
     return items.sort(compareByOrder)
-  }, [folderTree, rootWorkflows])
+  }, [folderTree, workflowsByFolder])
 
   const hasRootItems = rootItems.length > 0
   const firstItemId = rootItems[0]?.id ?? null
@@ -546,6 +546,7 @@ export const WorkflowList = memo(function WorkflowList({
     <SidebarListContext.Provider value={listContextValue}>
       <div
         role='tree'
+        tabIndex={-1}
         aria-label='Workflows'
         className='flex min-h-full flex-col pb-2'
         onClick={handleContainerClick}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/create-workspace-modal/create-workspace-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/create-workspace-modal/create-workspace-modal.tsx
index 5ef6dbb3eeb..19e5906befa 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/create-workspace-modal/create-workspace-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/create-workspace-modal/create-workspace-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useRef, useState } from 'react'
 import {
   ChipModal,
   ChipModalBody,
@@ -28,11 +28,13 @@ export function CreateWorkspaceModal({
 }: CreateWorkspaceModalProps) {
   const [name, setName] = useState('')
 
-  useEffect(() => {
+  const prevOpenRef = useRef(open)
+  if (prevOpenRef.current !== open) {
+    prevOpenRef.current = open
     if (open) {
       setName('')
     }
-  }, [open])
+  }
 
   const handleSubmit = async () => {
     const trimmed = name.trim()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/fork-activity-panel/fork-activity-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/fork-activity-panel/fork-activity-panel.tsx
index a559bf14786..be9366e3c85 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/fork-activity-panel/fork-activity-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/fork-activity-panel/fork-activity-panel.tsx
@@ -19,10 +19,7 @@ const plural = (n: number, noun: string) => `${n} ${noun}${n === 1 ? '' : 's'}`
 
 /** Join "N verb" segments (verbs like "updated" aren't pluralized), dropping zero counts. */
 function countList(pairs: Array<[number | undefined, string]>): string {
-  return pairs
-    .filter(([n]) => (n ?? 0) > 0)
-    .map(([n, verb]) => `${n} ${verb}`)
-    .join(' · ')
+  return pairs.flatMap(([n, verb]) => ((n ?? 0) > 0 ? [`${n} ${verb}`] : [])).join(' · ')
 }
 
 /** A named, collapsible group (one resource kind or change action) of a job's report. */
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/fork-workspace-modal/fork-workspace-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/fork-workspace-modal/fork-workspace-modal.tsx
index 9083d7da184..9f5bc185e01 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/fork-workspace-modal/fork-workspace-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/fork-workspace-modal/fork-workspace-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import {
   Chip,
   ChipConfirmModal,
@@ -58,6 +58,12 @@ const RESOURCE_KINDS: ReadonlyArray<{ key: ResourceKey; label: string }> = [
   { key: 'workflowMcpServers', label: 'Workflow MCP servers' },
 ]
 
+const REQUIRED_ACCESSORY = (
+  <span className='text-[var(--text-error)]' title='Required'>
+    *
+  </span>
+)
+
 const emptySelection = (): ResourceSelection => ({
   files: new Set(),
   tables: new Set(),
@@ -102,23 +108,30 @@ export function ForkWorkspaceModal({
   const [forkedWorkspace, setForkedWorkspace] = useState<{ id: string; name: string } | null>(null)
   const [confirmRollbackOpen, setConfirmRollbackOpen] = useState(false)
 
-  useEffect(() => {
-    if (open) {
-      setName(`${sourceWorkspaceName} (fork)`)
-      setSelected(emptySelection())
-      setDefaulted(false)
-      setError(null)
-      setActiveTab('config')
-      setForkedWorkspace(null)
-      setConfirmRollbackOpen(false)
-    }
-  }, [open, sourceWorkspaceName])
+  /**
+   * Reset the modal to a fresh state on open or when the source name changes while open.
+   * Adjusted during render so the reopened modal never commits the previous fork's
+   * name/selection before clearing it.
+   */
+  const prevOpenRef = useRef(open)
+  const prevSourceNameRef = useRef(sourceWorkspaceName)
+  if (open && (prevOpenRef.current !== open || prevSourceNameRef.current !== sourceWorkspaceName)) {
+    setName(`${sourceWorkspaceName} (fork)`)
+    setSelected(emptySelection())
+    setDefaulted(false)
+    setError(null)
+    setActiveTab('config')
+    setForkedWorkspace(null)
+    setConfirmRollbackOpen(false)
+  }
+  prevOpenRef.current = open
+  prevSourceNameRef.current = sourceWorkspaceName
 
-  useEffect(() => {
-    if (!open || !resources.data || defaulted) return
+  /** Seed the full selection once the resources query resolves (once per open, guarded by `defaulted`). */
+  if (open && resources.data && !defaulted) {
     setDefaulted(true)
     setSelected(fullSelection(resources.data))
-  }, [open, resources.data, defaulted])
+  }
 
   const isForking = forkWorkspace.isPending
 
@@ -247,14 +260,7 @@ export function ForkWorkspaceModal({
                   <ChipCopyInput value={sourceWorkspaceName} aria-label='Forking from' />
                 </SettingsSection>
 
-                <SettingsSection
-                  label='Name'
-                  headerAccessory={
-                    <span className='text-[var(--text-error)]' title='Required'>
-                      *
-                    </span>
-                  }
-                >
+                <SettingsSection label='Name' headerAccessory={REQUIRED_ACCESSORY}>
                   <ChipInput
                     value={name}
                     onChange={(event) => setName(event.target.value)}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/promote-workspace-modal/promote-workspace-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/promote-workspace-modal/promote-workspace-modal.tsx
index c2186faff72..8dd4ef15c5b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/promote-workspace-modal/promote-workspace-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/promote-workspace-modal/promote-workspace-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Badge,
   ChipCombobox,
@@ -75,6 +75,12 @@ function shouldReconfigureEntry(entry: ForkMappingEntry, targets: Record<string,
 /** Shared empty owners map for the pull direction so the options mapper never re-allocates. */
 const EMPTY_TARGET_OWNERS: ReadonlyMap<string, string> = new Map()
 
+const REQUIRED_SYNC_ACCESSORY = (
+  <span className='text-[var(--text-error)]' title='Required to sync'>
+    *
+  </span>
+)
+
 /**
  * Stable empty arrays so an entry with no usages/dependents keeps a constant prop reference,
  * letting ResourceReconfigure's grouping memo skip recompute across the editing step's frequent
@@ -210,22 +216,39 @@ export function PromoteWorkspaceModal({
   const [confirmSyncOpen, setConfirmSyncOpen] = useState(false)
   const [submitting, setSubmitting] = useState(false)
 
-  useEffect(() => {
-    if (open) {
-      setSelectedKey(edgeOptions[0]?.value ?? '')
-    }
-  }, [open, edgeOptions])
+  /**
+   * Seed the direction picker when the modal opens or the parent edge changes while open.
+   * Adjusted during render so the value lands before paint; `selectedKey` stays editable (the
+   * dropdown sets it), so it isn't derived state.
+   */
+  const prevOpenSeedRef = useRef(false)
+  const prevEdgeOptionsRef = useRef(edgeOptions)
+  const openSeedChanged = prevOpenSeedRef.current !== open
+  const edgeOptionsChanged = prevEdgeOptionsRef.current !== edgeOptions
+  prevOpenSeedRef.current = open
+  prevEdgeOptionsRef.current = edgeOptions
+  if (open && (openSeedChanged || edgeOptionsChanged)) {
+    setSelectedKey(edgeOptions[0]?.value ?? '')
+  }
 
-  // Restart at the overview and drop in-session overrides whenever it (re)opens or
-  // the direction changes - the mapping set, and therefore the steps, depend on the
-  // direction.
-  useEffect(() => {
+  /**
+   * Restart at the overview and drop in-session overrides on (re)open or direction change (the
+   * mapping set, and therefore the steps, depend on direction). Adjusted during render;
+   * `copyDefaulted` stays state so its reset here re-triggers the copy-default effect below.
+   */
+  const prevOpenResetRef = useRef(false)
+  const prevSelectedKeyRef = useRef(selectedKey)
+  const openResetChanged = prevOpenResetRef.current !== open
+  const selectedKeyChanged = prevSelectedKeyRef.current !== selectedKey
+  prevOpenResetRef.current = open
+  prevSelectedKeyRef.current = selectedKey
+  if (openResetChanged || selectedKeyChanged) {
     setStep(0)
     setTargets({})
     setReconfig({})
     setCopySelected(new Set())
     setCopyDefaulted(false)
-  }, [open, selectedKey])
+  }
 
   const selected = edgeOptions.find((option) => option.value === selectedKey)
   const otherWorkspaceId = selected?.otherWorkspaceId
@@ -526,16 +549,16 @@ export function PromoteWorkspaceModal({
         copySelected.has(copyableKey(candidate))
       )
       const copyResources = {
-        knowledgeBases: selectedCopyables
-          .filter((c) => c.kind === 'knowledge-base')
-          .map((c) => c.sourceId),
-        tables: selectedCopyables.filter((c) => c.kind === 'table').map((c) => c.sourceId),
-        customTools: selectedCopyables
-          .filter((c) => c.kind === 'custom-tool')
-          .map((c) => c.sourceId),
-        skills: selectedCopyables.filter((c) => c.kind === 'skill').map((c) => c.sourceId),
+        knowledgeBases: selectedCopyables.flatMap((c) =>
+          c.kind === 'knowledge-base' ? [c.sourceId] : []
+        ),
+        tables: selectedCopyables.flatMap((c) => (c.kind === 'table' ? [c.sourceId] : [])),
+        customTools: selectedCopyables.flatMap((c) =>
+          c.kind === 'custom-tool' ? [c.sourceId] : []
+        ),
+        skills: selectedCopyables.flatMap((c) => (c.kind === 'skill' ? [c.sourceId] : [])),
         // Files are identified by storage key (the copyable candidate's sourceId is the key).
-        files: selectedCopyables.filter((c) => c.kind === 'file').map((c) => c.sourceId),
+        files: selectedCopyables.flatMap((c) => (c.kind === 'file' ? [c.sourceId] : [])),
       }
 
       const result = await promote.mutateAsync({
@@ -813,9 +836,9 @@ export function PromoteWorkspaceModal({
                       // (matching `copyableKey`), so derive the per-kind selected-id subset and
                       // re-prefix on toggle.
                       const selectedIds = new Set(
-                        candidates
-                          .filter((candidate) => copySelected.has(copyableKey(candidate)))
-                          .map((candidate) => candidate.sourceId)
+                        candidates.flatMap((candidate) =>
+                          copySelected.has(copyableKey(candidate)) ? [candidate.sourceId] : []
+                        )
                       )
                       const toggleMany = (ids: string[], checked: boolean) =>
                         setCopySelected((prev) => {
@@ -885,13 +908,7 @@ export function PromoteWorkspaceModal({
                   <SettingsSection
                     key={entryKey(entry)}
                     label={entry.sourceLabel}
-                    headerAccessory={
-                      entry.required ? (
-                        <span className='text-[var(--text-error)]' title='Required to sync'>
-                          *
-                        </span>
-                      ) : undefined
-                    }
+                    headerAccessory={entry.required ? REQUIRED_SYNC_ACCESSORY : undefined}
                   >
                     <ChipCombobox
                       className='w-full'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 1a0b9718eb7..ee0d6ac39e3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState, useSyncExternalStore } from 'react'
 import {
   ChevronDown,
   Chip,
@@ -34,6 +34,9 @@ import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 
 const logger = createLogger('WorkspaceHeader')
 
+/** Stable no-op subscribe for the mount snapshot store. */
+const subscribeToNothing = () => () => {}
+
 interface WorkspaceHeaderProps {
   /** The active workspace object */
   activeWorkspace?: { name: string } | null
@@ -121,10 +124,11 @@ function WorkspaceHeaderImpl({
   const contextMenuClosedRef = useRef(true)
   const hasInputFocusedRef = useRef(false)
 
-  const [isMounted, setIsMounted] = useState(false)
-  useEffect(() => {
-    setIsMounted(true)
-  }, [])
+  const isMounted = useSyncExternalStore(
+    subscribeToNothing,
+    () => true,
+    () => false
+  )
 
   const { navigateToSettings } = useSettingsNavigation()
   const forkingAvailable = useForkingAvailable(workspaceId)
@@ -439,6 +443,7 @@ function WorkspaceHeaderImpl({
                                   el.select()
                                 }
                               }}
+                              aria-label='Workspace name'
                               value={editingName}
                               onChange={(e) => setEditingName(e.target.value)}
                               onKeyDown={async (e) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts
index c741f658930..a04153df0a2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts
@@ -50,6 +50,15 @@ function isSameFolderScope(
   return (parentOrFolderId ?? null) === (scope ?? null)
 }
 
+/** Stable sibling ordering: sortOrder, then creation time, then id as a deterministic tiebreak. */
+function compareSiblingItems(a: SiblingItem, b: SiblingItem): number {
+  if (a.sortOrder !== b.sortOrder) return a.sortOrder - b.sortOrder
+  const timeA = a.createdAt.getTime()
+  const timeB = b.createdAt.getTime()
+  if (timeA !== timeB) return timeA - timeB
+  return a.id.localeCompare(b.id)
+}
+
 export function useDragDrop(options: UseDragDropOptions = {}) {
   const { disabled = false } = options
   const [dropIndicator, setDropIndicator] = useState<DropIndicator | null>(null)
@@ -176,14 +185,6 @@ export function useDragDrop(options: UseDragDropOptions = {}) {
     []
   )
 
-  const compareSiblingItems = (a: SiblingItem, b: SiblingItem): number => {
-    if (a.sortOrder !== b.sortOrder) return a.sortOrder - b.sortOrder
-    const timeA = a.createdAt.getTime()
-    const timeB = b.createdAt.getTime()
-    if (timeA !== timeB) return timeA - timeB
-    return a.id.localeCompare(b.id)
-  }
-
   const getDestinationFolderId = useCallback((indicator: DropIndicator): string | null => {
     return indicator.position === 'inside'
       ? indicator.targetId === 'root'
@@ -222,13 +223,17 @@ export function useDragDrop(options: UseDragDropOptions = {}) {
     async (newOrder: SiblingItem[], destinationFolderId: string | null) => {
       const indexed = newOrder.map((item, i) => ({ ...item, sortOrder: i }))
 
-      const folderUpdates = indexed
-        .filter((item) => item.type === 'folder')
-        .map((item) => ({ id: item.id, sortOrder: item.sortOrder, parentId: destinationFolderId }))
+      const folderUpdates = indexed.flatMap((item) =>
+        item.type === 'folder'
+          ? [{ id: item.id, sortOrder: item.sortOrder, parentId: destinationFolderId }]
+          : []
+      )
 
-      const workflowUpdates = indexed
-        .filter((item) => item.type === 'workflow')
-        .map((item) => ({ id: item.id, sortOrder: item.sortOrder, folderId: destinationFolderId }))
+      const workflowUpdates = indexed.flatMap((item) =>
+        item.type === 'workflow'
+          ? [{ id: item.id, sortOrder: item.sortOrder, folderId: destinationFolderId }]
+          : []
+      )
 
       await Promise.all(
         [
@@ -283,22 +288,30 @@ export function useDragDrop(options: UseDragDropOptions = {}) {
       const currentFolders = workspaceId ? getFolderMap(workspaceId) : {}
       const currentWorkflows = workspaceId ? getWorkflows(workspaceId) : []
       const siblings = [
-        ...Object.values(currentFolders)
-          .filter((f) => isSameFolderScope(f.parentId, folderId))
-          .map((f) => ({
-            type: 'folder' as const,
-            id: f.id,
-            sortOrder: f.sortOrder,
-            createdAt: f.createdAt,
-          })),
-        ...currentWorkflows
-          .filter((w) => isSameFolderScope(w.folderId, folderId))
-          .map((w) => ({
-            type: 'workflow' as const,
-            id: w.id,
-            sortOrder: w.sortOrder,
-            createdAt: w.createdAt,
-          })),
+        ...Object.values(currentFolders).flatMap((f) =>
+          isSameFolderScope(f.parentId, folderId)
+            ? [
+                {
+                  type: 'folder' as const,
+                  id: f.id,
+                  sortOrder: f.sortOrder,
+                  createdAt: f.createdAt,
+                },
+              ]
+            : []
+        ),
+        ...currentWorkflows.flatMap((w) =>
+          isSameFolderScope(w.folderId, folderId)
+            ? [
+                {
+                  type: 'workflow' as const,
+                  id: w.id,
+                  sortOrder: w.sortOrder,
+                  createdAt: w.createdAt,
+                },
+              ]
+            : []
+        ),
       ].sort(compareSiblingItems)
 
       if (!isDraggingRef.current) {
@@ -372,8 +385,9 @@ export function useDragDrop(options: UseDragDropOptions = {}) {
       const fromDestination: SiblingItem[] = []
       const fromOther: SiblingItem[] = []
 
+      const workflowById = new Map(workflows.map((w) => [w.id, w]))
       for (const id of workflowIds) {
-        const workflow = workflows.find((w) => w.id === id)
+        const workflow = workflowById.get(id)
         if (!workflow) continue
         const item: SiblingItem = {
           type: 'workflow',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-list-context.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-list-context.ts
index bb296c988ec..345090e71be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-list-context.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-list-context.ts
@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, useContext, useMemo } from 'react'
+import { createContext, use, useMemo } from 'react'
 
 interface SidebarListContextValue {
   /** Whether any drag operation is currently in progress */
@@ -40,7 +40,7 @@ export const SidebarListContext = createContext<SidebarListContextValue>({
  * @returns The current sidebar list context value
  */
 export function useSidebarListContext(): SidebarListContextValue {
-  return useContext(SidebarListContext)
+  return use(SidebarListContext)
 }
 
 /**
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
index 69cb48f4b23..75ae3c6e6b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
@@ -144,8 +144,7 @@ export function useWorkspaceManagement({
         return false
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [updateWorkspaceMutation.mutateAsync]
   )
 
   const switchWorkspace = useCallback(
@@ -178,8 +177,7 @@ export function useWorkspaceManagement({
         logger.error('Error creating workspace:', error)
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [switchWorkspace]
+    [createWorkspaceMutation.mutateAsync, switchWorkspace]
   )
 
   const confirmDeleteWorkspace = useCallback(
@@ -211,8 +209,7 @@ export function useWorkspaceManagement({
         logger.error('Error deleting workspace:', error)
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [switchWorkspace]
+    [deleteWorkspaceMutation.mutateAsync, switchWorkspace]
   )
 
   const handleLeaveWorkspace = useCallback(
@@ -251,8 +248,7 @@ export function useWorkspaceManagement({
         throw error
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [switchWorkspace, sessionUserId]
+    [leaveWorkspaceMutation.mutateAsync, switchWorkspace, sessionUserId]
   )
 
   return {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 2e94f37a861..0a264733599 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -869,7 +869,10 @@ export const Sidebar = memo(function Sidebar({ isCollapsed }: SidebarProps) {
   const handleDeleteChat = useCallback(() => {
     const { chatIds: ids } = contextMenuSelectionRef.current
     if (ids.length === 0) return
-    const names = ids.map((id) => chats.find((t) => t.id === id)?.name).filter(Boolean) as string[]
+    const names = ids.flatMap((id) => {
+      const name = chats.find((t) => t.id === id)?.name
+      return name ? [name] : []
+    })
     contextMenuSelectionRef.current = { chatIds: ids, names }
     setIsChatDeleteModalOpen(true)
   }, [chats])
@@ -1234,6 +1237,7 @@ export const Sidebar = memo(function Sidebar({ isCollapsed }: SidebarProps) {
       <input
         ref={logoFileInputRef}
         type='file'
+        aria-label='Upload workspace logo'
         accept='image/png,image/jpeg,image/jpg,image/svg+xml,image/webp'
         className='hidden'
         onChange={handleLogoFileChange}
@@ -1241,6 +1245,7 @@ export const Sidebar = memo(function Sidebar({ isCollapsed }: SidebarProps) {
       <input
         ref={fileInputRef}
         type='file'
+        aria-label='Import workflow file'
         accept='.json,.zip'
         multiple
         className='hidden'
@@ -1396,6 +1401,7 @@ export const Sidebar = memo(function Sidebar({ isCollapsed }: SidebarProps) {
                                     >
                                       <input
                                         ref={chatFlyoutRename.inputRef}
+                                        aria-label='Chat name'
                                         value={chatFlyoutRename.value}
                                         onChange={(e) => chatFlyoutRename.setValue(e.target.value)}
                                         onKeyDown={chatFlyoutRename.handleKeyDown}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
index bb22fb2fa01..8e90714d07e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
@@ -74,9 +74,12 @@ export function useDeleteSelection({
 
       const sidebarWorkflows = workflowList.filter((w) => w.workspaceId === workspaceId)
 
-      const workflowsInFolders = sidebarWorkflows
-        .filter((w) => w.folderId && folderIds.includes(w.folderId))
-        .map((w) => w.id)
+      const workflowsInFolders: string[] = []
+      for (const w of sidebarWorkflows) {
+        if (w.folderId && folderIds.includes(w.folderId)) {
+          workflowsInFolders.push(w.id)
+        }
+      }
 
       const allWorkflowsToDelete = [...new Set([...workflowIds, ...workflowsInFolders])]
 
@@ -160,6 +163,8 @@ export function useDeleteSelection({
     isActiveWorkflow,
     router,
     onSuccess,
+    deleteFolderMutation.mutateAsync,
+    deleteWorkflowMutation.mutateAsync,
   ])
 
   return {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-selection.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-selection.ts
index ea6fb5f6432..a57ad28596b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-selection.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-selection.ts
@@ -133,16 +133,16 @@ export function useExportSelection({ onSuccess }: UseExportSelectionProps = {})
 
         const subfolders = collectSubfoldersForMultipleFolders(folderIds, folderMap)
 
-        const selectedFoldersData: FolderExportData[] = folderIds
-          .filter((folderId) => folderMap[folderId])
-          .map((folderId) => {
-            const folder = folderMap[folderId]
-            return {
-              id: folder.id,
-              name: folder.name,
-              parentId: null,
-            }
+        const selectedFoldersData: FolderExportData[] = []
+        for (const folderId of folderIds) {
+          const folder = folderMap[folderId]
+          if (!folder) continue
+          selectedFoldersData.push({
+            id: folder.id,
+            name: folder.name,
+            parentId: null,
           })
+        }
 
         const allFolders = [...selectedFoldersData, ...subfolders]
         const workflowIdsFromFolders = workflowsFromFolders.map((w) => w.id)