diff --git a/apps/sim/app/chat/components/message/components/markdown-renderer.tsx b/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
index ba69814cfc..8aa66579d5 100644
--- a/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
+++ b/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type ReactNode } from 'react'
+import React, { type HTMLAttributes, memo, type ReactNode, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Tooltip } from '@/components/emcn'
@@ -23,24 +23,16 @@ export function LinkWithPreview({ href, children }: { href: string; children: Re
   )
 }
 
-export default function MarkdownRenderer({
-  content,
-  customLinkComponent,
-}: {
-  content: string
-  customLinkComponent?: typeof LinkWithPreview
-}) {
-  const LinkComponent = customLinkComponent || LinkWithPreview
+const REMARK_PLUGINS = [remarkGfm]
 
-  const customComponents = {
-    // Paragraph
+function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
+  return {
     p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
       <p className='mb-1 font-sans text-base text-gray-800 leading-relaxed last:mb-0 dark:text-gray-200'>
         {children}
       </p>
     ),
 
-    // Headings
     h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
       <h1 className='mt-10 mb-5 font-sans font-semibold text-2xl text-gray-900 dark:text-gray-100'>
         {children}
@@ -62,7 +54,6 @@ export default function MarkdownRenderer({
       </h4>
     ),
 
-    // Lists
     ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
       <ul
         className='mt-1 mb-1 space-y-1 pl-6 font-sans text-gray-800 dark:text-gray-200'
@@ -89,7 +80,6 @@ export default function MarkdownRenderer({
       </li>
     ),
 
-    // Code blocks
     pre: ({ children }: HTMLAttributes<HTMLPreElement>) => {
       let codeProps: HTMLAttributes<HTMLElement> = {}
       let codeContent: ReactNode = children
@@ -120,7 +110,6 @@ export default function MarkdownRenderer({
       )
     },
 
-    // Inline code
     code: ({
       inline,
       className,
@@ -144,24 +133,20 @@ export default function MarkdownRenderer({
       )
     },
 
-    // Blockquotes
     blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
       <blockquote className='my-4 border-gray-300 border-l-4 py-1 pl-4 font-sans text-gray-700 italic dark:border-gray-600 dark:text-gray-300'>
         {children}
       </blockquote>
     ),
 
-    // Horizontal rule
     hr: () => <hr className='my-8 border-gray-500/[.07] border-t dark:border-gray-400/[.07]' />,
 
-    // Links
     a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
       <LinkComponent href={href || '#'} {...props}>
         {children}
       </LinkComponent>
     ),
 
-    // Tables
     table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
       <div className='my-4 w-full overflow-x-auto'>
         <table className='min-w-full table-auto border border-gray-300 font-sans text-sm dark:border-gray-700'>
@@ -193,7 +178,6 @@ export default function MarkdownRenderer({
       </td>
     ),
 
-    // Images
     img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
       <img
         src={src}
@@ -203,15 +187,33 @@ export default function MarkdownRenderer({
       />
     ),
   }
+}
+
+const DEFAULT_COMPONENTS = createCustomComponents(LinkWithPreview)
+
+const MarkdownRenderer = memo(function MarkdownRenderer({
+  content,
+  customLinkComponent,
+}: {
+  content: string
+  customLinkComponent?: typeof LinkWithPreview
+}) {
+  const components = useMemo(() => {
+    if (!customLinkComponent) {
+      return DEFAULT_COMPONENTS
+    }
+    return createCustomComponents(customLinkComponent)
+  }, [customLinkComponent])
 
-  // Pre-process content to fix common issues
   const processedContent = content.trim()
 
   return (
     <div className='space-y-4 break-words font-sans text-[#0D0D0D] text-base leading-relaxed dark:text-gray-100'>
-      <ReactMarkdown remarkPlugins={[remarkGfm]} components={customComponents}>
+      <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={components}>
         {processedContent}
       </ReactMarkdown>
     </div>
   )
-}
+})
+
+export default MarkdownRenderer
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index 166b260af8..6ab3aae353 100644
--- a/apps/sim/app/layout.tsx
+++ b/apps/sim/app/layout.tsx
@@ -7,7 +7,7 @@ import { generateBrandedMetadata, generateStructuredData } from '@/lib/branding/
 import { PostHogProvider } from '@/app/_shell/providers/posthog-provider'
 import '@/app/_styles/globals.css'
 import { OneDollarStats } from '@/components/analytics/onedollarstats'
-import { isReactGrabEnabled } from '@/lib/core/config/feature-flags'
+import { isReactGrabEnabled, isReactScanEnabled } from '@/lib/core/config/feature-flags'
 import { HydrationErrorHandler } from '@/app/_shell/hydration-error-handler'
 import { QueryProvider } from '@/app/_shell/providers/query-provider'
 import { SessionProvider } from '@/app/_shell/providers/session-provider'
@@ -35,6 +35,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang='en' suppressHydrationWarning>
       <head>
+        {isReactScanEnabled && (
+          <Script
+            src='https://unpkg.com/react-scan/dist/auto.global.js'
+            crossOrigin='anonymous'
+            strategy='beforeInteractive'
+          />
+        )}
         {isReactGrabEnabled && (
           <Script
             src='https://unpkg.com/react-grab/dist/index.global.js'
diff --git a/apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx b/apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx
index 73e39bf641..607d177888 100644
--- a/apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx
@@ -4,13 +4,13 @@ import type React from 'react'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
-import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useUserPermissions, type WorkspaceUserPermissions } from '@/hooks/use-user-permissions'
 import {
   useWorkspacePermissions,
   type WorkspacePermissions,
 } from '@/hooks/use-workspace-permissions'
 import { useNotificationStore } from '@/stores/notifications'
+import { useOperationQueueStore } from '@/stores/operation-queue/store'
 
 const logger = createLogger('WorkspacePermissionsProvider')
 
@@ -64,8 +64,8 @@ export function WorkspacePermissionsProvider({ children }: WorkspacePermissionsP
   // Track whether we've already surfaced an offline notification to avoid duplicates
   const [hasShownOfflineNotification, setHasShownOfflineNotification] = useState(false)
 
-  // Get operation error state from collaborative workflow
-  const { hasOperationError } = useCollaborativeWorkflow()
+  // Get operation error state directly from the store (avoid full useCollaborativeWorkflow subscription)
+  const hasOperationError = useOperationQueueStore((state) => state.hasOperationError)
 
   const addNotification = useNotificationStore((state) => state.addNotification)
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index 7788f1b492..835cf02184 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -49,16 +49,16 @@ export const ActionBar = memo(
       collaborativeBatchToggleBlockHandles,
     } = useCollaborativeWorkflow()
     const { activeWorkflowId, setPendingSelection } = useWorkflowRegistry()
-    const blocks = useWorkflowStore((state) => state.blocks)
-    const subBlockStore = useSubBlockStore()
 
     const handleDuplicateBlock = useCallback(() => {
+      const blocks = useWorkflowStore.getState().blocks
       const sourceBlock = blocks[blockId]
       if (!sourceBlock) return
 
       const newId = crypto.randomUUID()
       const newName = getUniqueBlockName(sourceBlock.name, blocks)
-      const subBlockValues = subBlockStore.workflowValues[activeWorkflowId || '']?.[blockId] || {}
+      const subBlockValues =
+        useSubBlockStore.getState().workflowValues[activeWorkflowId || '']?.[blockId] || {}
 
       const { block, subBlockValues: filteredValues } = prepareDuplicateBlockState({
         sourceBlock,
@@ -70,18 +70,8 @@ export const ActionBar = memo(
 
       setPendingSelection([newId])
       collaborativeBatchAddBlocks([block], [], {}, {}, { [newId]: filteredValues })
-    }, [
-      blockId,
-      blocks,
-      activeWorkflowId,
-      subBlockStore.workflowValues,
-      collaborativeBatchAddBlocks,
-      setPendingSelection,
-    ])
+    }, [blockId, activeWorkflowId, collaborativeBatchAddBlocks, setPendingSelection])
 
-    /**
-     * Optimized single store subscription for all block data
-     */
     const { isEnabled, horizontalHandles, parentId, parentType } = useWorkflowStore(
       useCallback(
         (state) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
index dc3299c50f..2f134d03ba 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
@@ -6,6 +6,8 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Code, Tooltip } from '@/components/emcn'
 
+const REMARK_PLUGINS = [remarkGfm]
+
 /**
  * Recursively extracts text content from React elements
  * @param element - React node to extract text from
@@ -149,14 +151,12 @@ interface CopilotMarkdownRendererProps {
  * Tighter spacing compared to traditional prose for better chat UX
  */
 const markdownComponents = {
-  // Paragraphs - tight spacing, no margin on last
   p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
     <p className='mb-1.5 font-base font-season text-[var(--text-primary)] text-sm leading-[1.4] last:mb-0 dark:font-[470]'>
       {children}
     </p>
   ),
 
-  // Headings - minimal margins for chat context
   h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h1 className='mt-2 mb-1 font-season font-semibold text-[var(--text-primary)] text-base first:mt-0'>
       {children}
@@ -178,7 +178,6 @@ const markdownComponents = {
     </h4>
   ),
 
-  // Lists - compact spacing
   ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
     <ul
       className='my-1 space-y-0.5 pl-5 font-base font-season text-[var(--text-primary)] dark:font-[470]'
@@ -204,7 +203,6 @@ const markdownComponents = {
     </li>
   ),
 
-  // Code blocks - handled by CodeBlock component
   pre: ({ children }: React.HTMLAttributes<HTMLPreElement>) => {
     let codeContent: React.ReactNode = children
     let language = 'code'
@@ -243,7 +241,6 @@ const markdownComponents = {
     return <CodeBlock code={actualCodeText} language={language} />
   },
 
-  // Inline code
   code: ({
     className,
     children,
@@ -257,7 +254,6 @@ const markdownComponents = {
     </code>
   ),
 
-  // Text formatting
   strong: ({ children }: React.HTMLAttributes<HTMLElement>) => (
     <strong className='font-semibold text-[var(--text-primary)]'>{children}</strong>
   ),
@@ -271,22 +267,18 @@ const markdownComponents = {
     <i className='text-[var(--text-primary)] italic'>{children}</i>
   ),
 
-  // Blockquote - compact
   blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
     <blockquote className='my-1.5 border-[var(--border-1)] border-l-2 py-0.5 pl-3 font-season text-[var(--text-secondary)] text-sm italic'>
       {children}
     </blockquote>
   ),
 
-  // Horizontal rule
   hr: () => <hr className='my-3 border-[var(--divider)] border-t' />,
 
-  // Links
   a: ({ href, children }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
     <LinkWithPreview href={href || '#'}>{children}</LinkWithPreview>
   ),
 
-  // Tables - compact
   table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
     <div className='my-2 max-w-full overflow-x-auto'>
       <table className='min-w-full table-auto border border-[var(--border-1)] font-season text-xs'>
@@ -314,7 +306,6 @@ const markdownComponents = {
     </td>
   ),
 
-  // Images
   img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
     <img src={src} alt={alt || 'Image'} className='my-2 h-auto max-w-full rounded-md' {...props} />
   ),
@@ -330,7 +321,7 @@ const markdownComponents = {
 function CopilotMarkdownRenderer({ content }: CopilotMarkdownRendererProps) {
   return (
     <div className='max-w-full break-words font-base font-season text-[var(--text-primary)] text-sm leading-[1.4] dark:font-[470] [&_*]:max-w-full [&_a]:break-all [&_code:not(pre_code)]:break-words [&_li]:break-words [&_p]:break-words'>
-      <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+      <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={markdownComponents}>
         {content}
       </ReactMarkdown>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/index.ts
index 979353aaba..2c501a1c9a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/index.ts
@@ -1,4 +1,2 @@
 export { useCheckpointManagement } from './use-checkpoint-management'
 export { useMessageEditing } from './use-message-editing'
-export { useMessageFeedback } from './use-message-feedback'
-export { useSuccessTimers } from './use-success-timers'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-message-feedback.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-message-feedback.ts
deleted file mode 100644
index 5494eb7115..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-message-feedback.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-'use client'
-
-import { useCallback } from 'react'
-import { createLogger } from '@sim/logger'
-import type { CopilotMessage } from '@/stores/panel'
-import { useCopilotStore } from '@/stores/panel'
-
-const logger = createLogger('useMessageFeedback')
-
-const WORKFLOW_TOOL_NAMES = ['edit_workflow']
-
-interface UseMessageFeedbackProps {
-  setShowUpvoteSuccess: (show: boolean) => void
-  setShowDownvoteSuccess: (show: boolean) => void
-}
-
-/**
- * Custom hook to handle message feedback (upvote/downvote)
- *
- * @param message - The copilot message
- * @param messages - Array of all messages in the chat
- * @param props - Success state setters from useSuccessTimers
- * @returns Feedback management utilities
- */
-export function useMessageFeedback(
-  message: CopilotMessage,
-  messages: CopilotMessage[],
-  props: UseMessageFeedbackProps
-) {
-  const { setShowUpvoteSuccess, setShowDownvoteSuccess } = props
-  const { currentChat } = useCopilotStore()
-
-  /**
-   * Gets the full assistant response content from message
-   */
-  const getFullAssistantContent = useCallback((message: CopilotMessage) => {
-    if (message.content?.trim()) {
-      return message.content
-    }
-
-    if (message.contentBlocks && message.contentBlocks.length > 0) {
-      return message.contentBlocks
-        .filter((block) => block.type === 'text')
-        .map((block) => block.content)
-        .join('')
-    }
-
-    return message.content || ''
-  }, [])
-
-  /**
-   * Finds the last user query before this assistant message
-   */
-  const getLastUserQuery = useCallback(() => {
-    const messageIndex = messages.findIndex((msg) => msg.id === message.id)
-    if (messageIndex === -1) return null
-
-    for (let i = messageIndex - 1; i >= 0; i--) {
-      if (messages[i].role === 'user') {
-        return messages[i].content
-      }
-    }
-    return null
-  }, [messages, message.id])
-
-  /**
-   * Submits feedback to the API
-   */
-  const submitFeedback = useCallback(
-    async (isPositive: boolean) => {
-      if (!currentChat?.id) {
-        logger.error('No current chat ID available for feedback submission')
-        return
-      }
-
-      const userQuery = getLastUserQuery()
-      if (!userQuery) {
-        logger.error('No user query found for feedback submission')
-        return
-      }
-
-      const agentResponse = getFullAssistantContent(message)
-      if (!agentResponse.trim()) {
-        logger.error('No agent response content available for feedback submission')
-        return
-      }
-
-      try {
-        const requestBody = {
-          chatId: currentChat.id,
-          userQuery,
-          agentResponse,
-          isPositiveFeedback: isPositive,
-        }
-
-        const response = await fetch('/api/copilot/feedback', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(requestBody),
-        })
-
-        if (!response.ok) {
-          throw new Error(`Failed to submit feedback: ${response.statusText}`)
-        }
-
-        await response.json()
-      } catch (error) {
-        logger.error('Error submitting feedback:', error)
-      }
-    },
-    [currentChat, getLastUserQuery, getFullAssistantContent, message]
-  )
-
-  /**
-   * Handles upvote action
-   */
-  const handleUpvote = useCallback(async () => {
-    setShowDownvoteSuccess(false)
-    setShowUpvoteSuccess(true)
-    await submitFeedback(true)
-  }, [submitFeedback])
-
-  /**
-   * Handles downvote action
-   */
-  const handleDownvote = useCallback(async () => {
-    setShowUpvoteSuccess(false)
-    setShowDownvoteSuccess(true)
-    await submitFeedback(false)
-  }, [submitFeedback])
-
-  return {
-    handleUpvote,
-    handleDownvote,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-success-timers.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-success-timers.ts
deleted file mode 100644
index ceecf4842b..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-success-timers.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useState } from 'react'
-
-/**
- * Duration to show success indicators (in milliseconds)
- */
-const SUCCESS_DISPLAY_DURATION = 2000
-
-/**
- * Custom hook to manage auto-hiding success states
- * Automatically hides success indicators after a set duration
- *
- * @returns Success state management utilities
- */
-export function useSuccessTimers() {
-  const [showCopySuccess, setShowCopySuccess] = useState(false)
-  const [showUpvoteSuccess, setShowUpvoteSuccess] = useState(false)
-  const [showDownvoteSuccess, setShowDownvoteSuccess] = useState(false)
-
-  /**
-   * Auto-hide copy success indicator after duration
-   */
-  useEffect(() => {
-    if (showCopySuccess) {
-      const timer = setTimeout(() => {
-        setShowCopySuccess(false)
-      }, SUCCESS_DISPLAY_DURATION)
-      return () => clearTimeout(timer)
-    }
-  }, [showCopySuccess])
-
-  /**
-   * Auto-hide upvote success indicator after duration
-   */
-  useEffect(() => {
-    if (showUpvoteSuccess) {
-      const timer = setTimeout(() => {
-        setShowUpvoteSuccess(false)
-      }, SUCCESS_DISPLAY_DURATION)
-      return () => clearTimeout(timer)
-    }
-  }, [showUpvoteSuccess])
-
-  /**
-   * Auto-hide downvote success indicator after duration
-   */
-  useEffect(() => {
-    if (showDownvoteSuccess) {
-      const timer = setTimeout(() => {
-        setShowDownvoteSuccess(false)
-      }, SUCCESS_DISPLAY_DURATION)
-      return () => clearTimeout(timer)
-    }
-  }, [showDownvoteSuccess])
-
-  /**
-   * Handles copy to clipboard action
-   * @param content - Content to copy to clipboard
-   */
-  const handleCopy = useCallback((content: string) => {
-    navigator.clipboard.writeText(content)
-    setShowCopySuccess(true)
-  }, [])
-
-  return {
-    // State
-    showCopySuccess,
-    showUpvoteSuccess,
-    showDownvoteSuccess,
-
-    // Operations
-    handleCopy,
-    setShowUpvoteSuccess,
-    setShowDownvoteSuccess,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
index 7987d20435..bba129df70 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { ChevronUp, LayoutList } from 'lucide-react'
 import Editor from 'react-simple-code-editor'
@@ -530,7 +530,7 @@ function splitActionVerb(text: string): [string | null, string] {
  * For special tool calls, uses a gradient color. For normal tools, highlights action verbs
  * in a lighter color with the rest in default gray.
  */
-function ShimmerOverlayText({
+const ShimmerOverlayText = memo(function ShimmerOverlayText({
   text,
   active = false,
   className,
@@ -622,256 +622,7 @@ function ShimmerOverlayText({
       `}</style>
     </span>
   )
-}
-
-/**
- * SubAgentToolCall renders a nested tool call from a subagent in a muted/thinking style.
- */
-function SubAgentToolCall({ toolCall: toolCallProp }: { toolCall: CopilotToolCall }) {
-  // Get live toolCall from store to ensure we have the latest state and params
-  const liveToolCall = useCopilotStore((s) =>
-    toolCallProp.id ? s.toolCallsById[toolCallProp.id] : undefined
-  )
-  const toolCall = liveToolCall || toolCallProp
-
-  const displayName = getDisplayNameForSubAgent(toolCall)
-
-  const isLoading =
-    toolCall.state === ClientToolCallState.generating ||
-    toolCall.state === ClientToolCallState.pending ||
-    toolCall.state === ClientToolCallState.executing
-
-  const showButtons = shouldShowRunSkipButtons(toolCall)
-  const isSpecial = isSpecialToolCall(toolCall)
-
-  // Get params for table rendering
-  const params =
-    (toolCall as any).parameters || (toolCall as any).input || (toolCall as any).params || {}
-
-  // Render table for tools that support it
-  const renderSubAgentTable = () => {
-    if (toolCall.name === 'set_environment_variables') {
-      const variables = params.variables || params.env_vars || {}
-      const entries = Array.isArray(variables)
-        ? variables.map((v: any, i: number) => [v.name || `var_${i}`, v.value || ''])
-        : Object.entries(variables).map(([key, val]) => {
-            if (typeof val === 'object' && val !== null && 'value' in (val as any)) {
-              return [key, (val as any).value]
-            }
-            return [key, val]
-          })
-      if (entries.length === 0) return null
-      return (
-        <div className='mt-1.5 w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
-          <table className='w-full table-fixed bg-transparent'>
-            <thead className='bg-transparent'>
-              <tr className='border-[var(--border-1)] border-b bg-transparent'>
-                <th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[12px] text-[var(--text-tertiary)]'>
-                  Variable
-                </th>
-                <th className='w-[64%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[12px] text-[var(--text-tertiary)]'>
-                  Value
-                </th>
-              </tr>
-            </thead>
-            <tbody className='bg-transparent'>
-              {entries.map((entry) => {
-                const [key, value] = entry as [string, any]
-                return (
-                  <tr key={key} className='border-[var(--border-1)] border-t bg-transparent'>
-                    <td className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[6px]'>
-                      <span className='truncate font-medium text-[var(--text-primary)] text-xs'>
-                        {key}
-                      </span>
-                    </td>
-                    <td className='w-[64%] bg-transparent px-[10px] py-[6px]'>
-                      <span className='font-mono text-[var(--text-muted)] text-xs'>
-                        {String(value)}
-                      </span>
-                    </td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-        </div>
-      )
-    }
-
-    if (toolCall.name === 'set_global_workflow_variables') {
-      const ops = Array.isArray(params.operations) ? (params.operations as any[]) : []
-      if (ops.length === 0) return null
-      return (
-        <div className='mt-1.5 w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
-          <div className='grid grid-cols-3 gap-0 border-[var(--border-1)] border-b bg-[var(--surface-4)] py-1.5'>
-            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
-              Name
-            </div>
-            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
-              Type
-            </div>
-            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
-              Value
-            </div>
-          </div>
-          <div className='divide-y divide-[var(--border-1)]'>
-            {ops.map((op, idx) => (
-              <div key={idx} className='grid grid-cols-3 gap-0 py-1.5'>
-                <div className='min-w-0 self-start px-2'>
-                  <span className='font-season text-[var(--text-primary)] text-xs'>
-                    {String(op.name || '')}
-                  </span>
-                </div>
-                <div className='self-start px-2'>
-                  <span className='rounded border border-[var(--border-1)] px-1 py-0.5 font-[470] font-season text-[10px] text-[var(--text-primary)]'>
-                    {String(op.type || '')}
-                  </span>
-                </div>
-                <div className='min-w-0 self-start px-2'>
-                  <span className='font-[470] font-mono text-[var(--text-muted)] text-xs'>
-                    {op.value !== undefined ? String(op.value) : '—'}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )
-    }
-
-    if (toolCall.name === 'run_workflow') {
-      let inputs = params.input || params.inputs || params.workflow_input
-      if (typeof inputs === 'string') {
-        try {
-          inputs = JSON.parse(inputs)
-        } catch {
-          inputs = {}
-        }
-      }
-      if (params.workflow_input && typeof params.workflow_input === 'object') {
-        inputs = params.workflow_input
-      }
-      if (!inputs || typeof inputs !== 'object') {
-        const { workflowId, workflow_input, ...rest } = params
-        inputs = rest
-      }
-      const safeInputs = inputs && typeof inputs === 'object' ? inputs : {}
-      const inputEntries = Object.entries(safeInputs)
-      if (inputEntries.length === 0) return null
-
-      /**
-       * Format a value for display - handles objects, arrays, and primitives
-       */
-      const formatValue = (value: unknown): string => {
-        if (value === null || value === undefined) return '-'
-        if (typeof value === 'string') return value || '-'
-        if (typeof value === 'number' || typeof value === 'boolean') return String(value)
-        try {
-          return JSON.stringify(value, null, 2)
-        } catch {
-          return String(value)
-        }
-      }
-
-      /**
-       * Check if a value is a complex type (object or array)
-       */
-      const isComplex = (value: unknown): boolean => {
-        return typeof value === 'object' && value !== null
-      }
-
-      return (
-        <div className='mt-1.5 w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)]'>
-          {/* Header */}
-          <div className='flex items-center gap-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] p-[8px]'>
-            <span className='font-medium text-[12px] text-[var(--text-primary)]'>Input</span>
-            <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
-              {inputEntries.length}
-            </span>
-          </div>
-          {/* Input entries */}
-          <div className='flex flex-col'>
-            {inputEntries.map(([key, value], index) => {
-              const formattedValue = formatValue(value)
-              const needsCodeViewer = isComplex(value)
-
-              return (
-                <div
-                  key={key}
-                  className={clsx(
-                    'flex flex-col gap-1 px-[10px] py-[6px]',
-                    index > 0 && 'border-[var(--border-1)] border-t'
-                  )}
-                >
-                  {/* Input key */}
-                  <span className='font-medium text-[11px] text-[var(--text-primary)]'>{key}</span>
-                  {/* Value display */}
-                  {needsCodeViewer ? (
-                    <Code.Viewer
-                      code={formattedValue}
-                      language='json'
-                      showGutter={false}
-                      className='max-h-[80px] min-h-0'
-                    />
-                  ) : (
-                    <span className='font-mono text-[11px] text-[var(--text-muted)] leading-[1.3]'>
-                      {formattedValue}
-                    </span>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      )
-    }
-
-    return null
-  }
-
-  // For edit_workflow, only show the WorkflowEditSummary component (replaces text display)
-  const isEditWorkflow = toolCall.name === 'edit_workflow'
-  const hasOperations = Array.isArray(params.operations) && params.operations.length > 0
-
-  return (
-    <div className='py-0.5'>
-      {/* Hide text display for edit_workflow when we have operations to show in summary */}
-      {!(isEditWorkflow && hasOperations) && (
-        <ShimmerOverlayText
-          text={displayName}
-          active={isLoading && !showButtons}
-          isSpecial={isSpecial}
-          className='font-[470] font-season text-[12px] text-[var(--text-tertiary)]'
-        />
-      )}
-      {renderSubAgentTable()}
-      {/* WorkflowEditSummary is rendered outside SubAgentContent for edit subagent */}
-      {showButtons && <RunSkipButtons toolCall={toolCall} />}
-    </div>
-  )
-}
-
-/**
- * Get display name for subagent tool calls
- */
-function getDisplayNameForSubAgent(toolCall: CopilotToolCall): string {
-  const fromStore = toolCall.display?.text
-  if (fromStore) return fromStore
-
-  const stateVerb = getStateVerb(toolCall.state)
-  const formattedName = formatToolName(toolCall.name)
-  return `${stateVerb} ${formattedName}`
-}
-
-/**
- * Max height for subagent content before internal scrolling kicks in
- */
-const SUBAGENT_MAX_HEIGHT = 200
-
-/**
- * Interval for auto-scroll during streaming (ms)
- */
-const SUBAGENT_SCROLL_INTERVAL = 100
+})
 
 /**
  * Get the outer collapse header label for completed subagent tools.
@@ -882,236 +633,6 @@ function getSubagentCompletionLabel(toolName: string): string {
   return labels?.completed ?? 'Thought'
 }
 
-/**
- * Get display labels for subagent tools.
- * Uses the tool's UI config.
- */
-function getSubagentLabels(toolName: string, isStreaming: boolean): string {
-  const labels = getSubagentLabelsFromConfig(toolName, isStreaming)
-  if (labels) {
-    return isStreaming ? labels.streaming : labels.completed
-  }
-  return isStreaming ? 'Processing' : 'Processed'
-}
-
-/**
- * SubAgentContent renders the streamed content and tool calls from a subagent
- * with thinking-style styling (same as ThinkingBlock).
- * Auto-collapses when streaming ends and has internal scrolling for long content.
- */
-function SubAgentContent({
-  blocks,
-  isStreaming = false,
-  toolName = 'debug',
-}: {
-  blocks?: SubAgentContentBlock[]
-  isStreaming?: boolean
-  toolName?: string
-}) {
-  const [isExpanded, setIsExpanded] = useState(false)
-  const [userHasScrolledAway, setUserHasScrolledAway] = useState(false)
-  const userCollapsedRef = useRef<boolean>(false)
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const lastScrollTopRef = useRef(0)
-  const programmaticScrollRef = useRef(false)
-
-  // Check if there are any tool calls (which means thinking should close)
-  const hasToolCalls = useMemo(() => {
-    if (!blocks) return false
-    return blocks.some((b) => b.type === 'subagent_tool_call' && b.toolCall)
-  }, [blocks])
-
-  // Auto-expand when streaming with content, auto-collapse when done or when tool call comes in
-  useEffect(() => {
-    if (!isStreaming || hasToolCalls) {
-      setIsExpanded(false)
-      userCollapsedRef.current = false
-      setUserHasScrolledAway(false)
-      return
-    }
-
-    if (!userCollapsedRef.current && blocks && blocks.length > 0) {
-      setIsExpanded(true)
-    }
-  }, [isStreaming, blocks, hasToolCalls])
-
-  // Handle scroll events to detect user scrolling away
-  useEffect(() => {
-    const container = scrollContainerRef.current
-    if (!container || !isExpanded) return
-
-    const handleScroll = () => {
-      if (programmaticScrollRef.current) return
-
-      const { scrollTop, scrollHeight, clientHeight } = container
-      const distanceFromBottom = scrollHeight - scrollTop - clientHeight
-      const isNearBottom = distanceFromBottom <= 20
-
-      const delta = scrollTop - lastScrollTopRef.current
-      const movedUp = delta < -2
-
-      if (movedUp && !isNearBottom) {
-        setUserHasScrolledAway(true)
-      }
-
-      // Re-stick if user scrolls back to bottom
-      if (userHasScrolledAway && isNearBottom) {
-        setUserHasScrolledAway(false)
-      }
-
-      lastScrollTopRef.current = scrollTop
-    }
-
-    container.addEventListener('scroll', handleScroll, { passive: true })
-    lastScrollTopRef.current = container.scrollTop
-
-    return () => container.removeEventListener('scroll', handleScroll)
-  }, [isExpanded, userHasScrolledAway])
-
-  // Smart auto-scroll: only scroll if user hasn't scrolled away
-  useEffect(() => {
-    if (!isStreaming || !isExpanded || userHasScrolledAway) return
-
-    const intervalId = window.setInterval(() => {
-      const container = scrollContainerRef.current
-      if (!container) return
-
-      const { scrollTop, scrollHeight, clientHeight } = container
-      const distanceFromBottom = scrollHeight - scrollTop - clientHeight
-      const isNearBottom = distanceFromBottom <= 50
-
-      if (isNearBottom) {
-        programmaticScrollRef.current = true
-        container.scrollTo({
-          top: container.scrollHeight,
-          behavior: 'smooth',
-        })
-        window.setTimeout(() => {
-          programmaticScrollRef.current = false
-        }, 150)
-      }
-    }, SUBAGENT_SCROLL_INTERVAL)
-
-    return () => window.clearInterval(intervalId)
-  }, [isStreaming, isExpanded, userHasScrolledAway])
-
-  if (!blocks || blocks.length === 0) return null
-
-  const hasContent = blocks.length > 0
-  // Show "done" label when streaming ends OR when tool calls are present
-  const isThinkingDone = !isStreaming || hasToolCalls
-  const label = getSubagentLabels(toolName, !isThinkingDone)
-
-  return (
-    <div>
-      {/* Define shimmer keyframes */}
-      {!isThinkingDone && (
-        <style>{`
-          @keyframes thinking-shimmer {
-            0% { background-position: 150% 0; }
-            50% { background-position: 0% 0; }
-            100% { background-position: -150% 0; }
-          }
-        `}</style>
-      )}
-      <button
-        onClick={() => {
-          setIsExpanded((v) => {
-            const next = !v
-            if (!next && isStreaming) userCollapsedRef.current = true
-            return next
-          })
-        }}
-        className='group inline-flex items-center gap-1 text-left font-[470] font-season text-[var(--text-secondary)] text-sm transition-colors hover:text-[var(--text-primary)]'
-        type='button'
-        disabled={!hasContent}
-      >
-        <span className='relative inline-block'>
-          <span className='text-[var(--text-tertiary)]'>{label}</span>
-          {!isThinkingDone && (
-            <span
-              aria-hidden='true'
-              className='pointer-events-none absolute inset-0 select-none overflow-hidden'
-            >
-              <span
-                className='block text-transparent'
-                style={{
-                  backgroundImage:
-                    'linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%)',
-                  backgroundSize: '200% 100%',
-                  backgroundRepeat: 'no-repeat',
-                  WebkitBackgroundClip: 'text',
-                  backgroundClip: 'text',
-                  animation: 'thinking-shimmer 1.4s ease-in-out infinite',
-                  mixBlendMode: 'screen',
-                }}
-              >
-                {label}
-              </span>
-            </span>
-          )}
-        </span>
-        {hasContent && (
-          <ChevronUp
-            className={clsx(
-              'h-3 w-3 transition-all group-hover:opacity-100',
-              isExpanded ? 'rotate-180 opacity-100' : 'rotate-90 opacity-0'
-            )}
-            aria-hidden='true'
-          />
-        )}
-      </button>
-
-      <div
-        ref={scrollContainerRef}
-        className={clsx(
-          'overflow-y-auto transition-all duration-150 ease-out',
-          isExpanded ? 'mt-1.5 max-h-[200px] opacity-100' : 'max-h-0 opacity-0'
-        )}
-      >
-        {blocks.map((block, index) => {
-          if (block.type === 'subagent_text' && block.content) {
-            const isLastBlock = index === blocks.length - 1
-            // Strip special tags from display (they're rendered separately)
-            const parsed = parseSpecialTags(block.content)
-            const displayContent = parsed.cleanContent
-            if (!displayContent) return null
-            return (
-              <pre
-                key={`subagent-text-${index}`}
-                className='whitespace-pre-wrap font-[470] font-season text-[12px] text-[var(--text-tertiary)] leading-[1.15rem]'
-              >
-                {displayContent}
-                {!isThinkingDone && isLastBlock && (
-                  <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-[var(--text-tertiary)]' />
-                )}
-              </pre>
-            )
-          }
-
-          // All tool calls are rendered at top level, skip here
-          return null
-        })}
-      </div>
-
-      {/* Render PlanSteps for plan subagent when content contains <plan> tag */}
-      {toolName === 'plan' &&
-        (() => {
-          // Combine all text content from blocks
-          const allText = blocks
-            .filter((b) => b.type === 'subagent_text' && b.content)
-            .map((b) => b.content)
-            .join('')
-          const parsed = parseSpecialTags(allText)
-          if (parsed.plan && Object.keys(parsed.plan).length > 0) {
-            return <PlanSteps steps={parsed.plan} streaming={!isThinkingDone} />
-          }
-          return null
-        })()}
-    </div>
-  )
-}
-
 /**
  * SubAgentThinkingContent renders subagent blocks as simple thinking text (ThinkingBlock).
  * Used for inline rendering within regular tool calls that have subagent content.
@@ -1123,7 +644,6 @@ function SubAgentThinkingContent({
   blocks: SubAgentContentBlock[]
   isStreaming?: boolean
 }) {
-  // Combine all text content from blocks
   let allRawText = ''
   let cleanText = ''
   for (const block of blocks) {
@@ -1134,12 +654,10 @@ function SubAgentThinkingContent({
     }
   }
 
-  // Parse plan from all text
   const allParsed = parseSpecialTags(allRawText)
 
   if (!cleanText.trim() && !allParsed.plan) return null
 
-  // Check if special tags are present
   const hasSpecialTags = !!(allParsed.plan && Object.keys(allParsed.plan).length > 0)
 
   return (
@@ -1172,7 +690,7 @@ const COLLAPSIBLE_SUBAGENTS = new Set(['plan', 'debug', 'research'])
  * - When done (not streaming): Most subagents stay expanded, only specific ones collapse
  * - Exception: plan, debug, research, info subagents collapse into a header
  */
-function SubagentContentRenderer({
+const SubagentContentRenderer = memo(function SubagentContentRenderer({
   toolCall,
   shouldCollapse,
 }: {
@@ -1182,36 +700,26 @@ function SubagentContentRenderer({
   const [isExpanded, setIsExpanded] = useState(true)
   const [duration, setDuration] = useState(0)
   const startTimeRef = useRef<number>(Date.now())
+  const wasStreamingRef = useRef(false)
 
   const isStreaming = !!toolCall.subAgentStreaming
 
-  // Reset start time when streaming begins
   useEffect(() => {
-    if (isStreaming) {
+    if (isStreaming && !wasStreamingRef.current) {
       startTimeRef.current = Date.now()
-      setDuration(0)
-    }
-  }, [isStreaming])
-
-  // Update duration timer during streaming
-  useEffect(() => {
-    if (!isStreaming) return
-
-    const interval = setInterval(() => {
+      wasStreamingRef.current = true
+    } else if (!isStreaming && wasStreamingRef.current) {
       setDuration(Date.now() - startTimeRef.current)
-    }, 100)
-
-    return () => clearInterval(interval)
+      wasStreamingRef.current = false
+    }
   }, [isStreaming])
 
-  // Auto-collapse when streaming ends (only for collapsible subagents)
   useEffect(() => {
     if (!isStreaming && shouldCollapse) {
       setIsExpanded(false)
     }
   }, [isStreaming, shouldCollapse])
 
-  // Build segments: each segment is either text content or a tool call
   const segments: Array<
     { type: 'text'; content: string } | { type: 'tool'; block: SubAgentContentBlock }
   > = []
@@ -1235,7 +743,6 @@ function SubagentContentRenderer({
     segments.push({ type: 'text', content: currentText })
   }
 
-  // Parse plan and options
   const allParsed = parseSpecialTags(allRawText)
   const hasSpecialTags = !!(
     (allParsed.plan && Object.keys(allParsed.plan).length > 0) ||
@@ -1247,15 +754,11 @@ function SubagentContentRenderer({
     return `${seconds}s`
   }
 
-  // Outer header uses subagent-specific label
   const outerLabel = getSubagentCompletionLabel(toolCall.name)
   const durationText = `${outerLabel} for ${formatDuration(duration)}`
 
-  // Check if we have a plan to render outside the collapsible
   const hasPlan = allParsed.plan && Object.keys(allParsed.plan).length > 0
 
-  // Render the collapsible content (thinking blocks + tool calls, NOT plan)
-  // Inner thinking text always uses "Thought" label
   const renderCollapsibleContent = () => (
     <>
       {segments.map((segment, index) => {
@@ -1275,7 +778,6 @@ function SubagentContentRenderer({
           )
         }
         if (segment.type === 'tool' && segment.block.toolCall) {
-          // For edit subagent's edit_workflow tool: only show the diff summary, skip the tool call header
           if (toolCall.name === 'edit' && segment.block.toolCall.name === 'edit_workflow') {
             return (
               <div key={`tool-${segment.block.toolCall.id || index}`}>
@@ -1294,7 +796,6 @@ function SubagentContentRenderer({
     </>
   )
 
-  // During streaming OR for non-collapsible subagents: show content at top level
   if (isStreaming || !shouldCollapse) {
     return (
       <div className='w-full space-y-1.5'>
@@ -1304,8 +805,6 @@ function SubagentContentRenderer({
     )
   }
 
-  // Completed collapsible subagent (plan, debug, research, info): show collapsible header
-  // Plan artifact stays outside the collapsible
   return (
     <div className='w-full'>
       <button
@@ -1336,7 +835,7 @@ function SubagentContentRenderer({
       {hasPlan && <PlanSteps steps={allParsed.plan!} />}
     </div>
   )
-}
+})
 
 /**
  * Determines if a tool call is "special" and should display with gradient styling.
@@ -1351,15 +850,15 @@ function isSpecialToolCall(toolCall: CopilotToolCall): boolean {
  * Displays: workflow name with stats (+N green, N orange, -N red)
  * Expands inline on click to show individual blocks with their icons.
  */
-function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) {
-  // Get block data from current workflow state
+const WorkflowEditSummary = memo(function WorkflowEditSummary({
+  toolCall,
+}: {
+  toolCall: CopilotToolCall
+}) {
   const blocks = useWorkflowStore((s) => s.blocks)
 
-  // Cache block info on first render (before diff is applied) so we can show
-  // deleted blocks properly even after they're removed from the workflow
   const cachedBlockInfoRef = useRef<Record<string, { name: string; type: string }>>({})
 
-  // Update cache with current block info (only add, never remove)
   useEffect(() => {
     for (const [blockId, block] of Object.entries(blocks)) {
       if (!cachedBlockInfoRef.current[blockId]) {
@@ -1371,22 +870,18 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) {
     }
   }, [blocks])
 
-  // Show for edit_workflow regardless of state
   if (toolCall.name !== 'edit_workflow') {
     return null
   }
 
-  // Extract operations from tool call params
   const params =
     (toolCall as any).parameters || (toolCall as any).input || (toolCall as any).params || {}
   let operations = Array.isArray(params.operations) ? params.operations : []
 
-  // Fallback: check if operations are at top level of toolCall
   if (operations.length === 0 && Array.isArray((toolCall as any).operations)) {
     operations = (toolCall as any).operations
   }
 
-  // Group operations by type with block info
   interface SubBlockPreview {
     id: string
     title: string
@@ -1412,25 +907,20 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) {
     const blockId = op.block_id
     if (!blockId) continue
 
-    // Get block info from current workflow state, cached state, or operation params
     const currentBlock = blocks[blockId]
     const cachedBlock = cachedBlockInfoRef.current[blockId]
     let blockName = currentBlock?.name || cachedBlock?.name || ''
     let blockType = currentBlock?.type || cachedBlock?.type || ''
 
-    // For add operations, get info from params (type is stored as params.type)
     if (op.operation_type === 'add' && op.params) {
       blockName = blockName || op.params.name || ''
       blockType = blockType || op.params.type || ''
     }
 
-    // For edit operations, also check params.type if block not in current state
     if (op.operation_type === 'edit' && op.params && !blockType) {
       blockType = op.params.type || ''
     }
 
-    // Skip edge-only edit operations (like how we don't highlight blocks on canvas for edge changes)
-    // An edit is edge-only if params only contains 'connections' and nothing else meaningful
     if (op.operation_type === 'edit' && op.params) {
       const paramKeys = Object.keys(op.params)
       const isEdgeOnlyEdit = paramKeys.length === 1 && paramKeys[0] === 'connections'
@@ -1439,9 +929,7 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) {
       }
     }
 
-    // For delete operations, check if block info was provided in operation
     if (op.operation_type === 'delete') {
-      // Some delete operations may include block_name and block_type
       blockName = blockName || op.block_name || ''
       blockType = blockType || op.block_type || ''
     }
@@ -1453,16 +941,12 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) {
 
     const change: BlockChange = { blockId, blockName, blockType }
 
-    // Extract subblock info from operation params, ordered by block config
     if (op.params?.inputs && typeof op.params.inputs === 'object') {
       const inputs = op.params.inputs as Record<string, unknown>
       const blockConfig = getBlock(blockType)
 
-      // Build subBlocks array
       const subBlocks: SubBlockPreview[] = []
 
-      // Special handling for condition blocks - parse conditions JSON and render as separate rows
-      // This matches how the canvas renders condition blocks with "if", "else if", "else" rows
       if (blockType === 'condition' && 'conditions' in inputs) {
         const conditionsValue = inputs.conditions
         const raw = typeof conditionsValue === 'string' ? conditionsValue : undefined
@@ -1484,35 +968,26 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) {
             }
           }
         } catch {
-          // Fallback: show default if/else
           subBlocks.push({ id: 'if', title: 'if', value: '', isPassword: false })
           subBlocks.push({ id: 'else', title: 'else', value: '', isPassword: false })
         }
       } else {
-        // Filter visible subblocks from config (same logic as canvas preview)
         const visibleSubBlocks =
           blockConfig?.subBlocks?.filter((sb) => {
-            // Skip hidden subblocks
             if (sb.hidden) return false
             if (sb.hideFromPreview) return false
-            // Skip advanced mode subblocks (not visible by default)
             if (sb.mode === 'advanced') return false
-            // Skip trigger mode subblocks
             if (sb.mode === 'trigger') return false
             return true
           }) ?? []
 
-        // Track seen ids to dedupe (same pattern as canvas preview using id as key)
         const seenIds = new Set<string>()
 
-        // Add subblocks that are visible in config, in config order (first config per id wins)
         for (const subBlockConfig of visibleSubBlocks) {
-          // Skip if we've already added this id (handles configs with same id but different conditions)
           if (seenIds.has(subBlockConfig.id)) continue
 
           if (subBlockConfig.id in inputs) {
             const value = inputs[subBlockConfig.id]
-            // Skip empty values and connections
             if (value === null || value === undefined || value === '') continue
             seenIds.add(subBlockConfig.id)
             subBlocks.push({
@@ -1553,12 +1028,10 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) {
     return null
   }
 
-  // Get block config by type (for icon and bgColor)
   const getBlockConfig = (blockType: string) => {
     return getBlock(blockType)
   }
 
-  // Render a single block item with action icon and details
   const renderBlockItem = (change: BlockChange, type: 'add' | 'edit' | 'delete') => {
     const blockConfig = getBlockConfig(change.blockType)
     const Icon = blockConfig?.icon
@@ -1631,23 +1104,20 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) {
       {deletedBlocks.map((change) => renderBlockItem(change, 'delete'))}
     </div>
   )
-}
+})
 
 /**
  * Checks if a tool is an integration tool (server-side executed, not a client tool)
  */
 function isIntegrationTool(toolName: string): boolean {
-  // Any tool NOT in CLASS_TOOL_METADATA is an integration tool (server-side execution)
   return !CLASS_TOOL_METADATA[toolName]
 }
 
 function shouldShowRunSkipButtons(toolCall: CopilotToolCall): boolean {
-  // First check UI config for interrupt
   if (hasInterruptFromConfig(toolCall.name) && toolCall.state === 'pending') {
     return true
   }
 
-  // Then check instance-level interrupt
   const instance = getClientTool(toolCall.id)
   let hasInterrupt = !!instance?.getInterruptDisplays?.()
   if (!hasInterrupt) {
@@ -1662,12 +1132,10 @@ function shouldShowRunSkipButtons(toolCall: CopilotToolCall): boolean {
     } catch {}
   }
 
-  // Show buttons for client tools with interrupts
   if (hasInterrupt && toolCall.state === 'pending') {
     return true
   }
 
-  // Always show buttons for integration tools in pending state (they need user confirmation)
   const mode = useCopilotStore.getState().mode
   if (mode === 'build' && isIntegrationTool(toolCall.name) && toolCall.state === 'pending') {
     return true
@@ -1684,19 +1152,14 @@ async function handleRun(
 ) {
   const instance = getClientTool(toolCall.id)
 
-  // Handle integration tools (server-side execution)
   if (!instance && isIntegrationTool(toolCall.name)) {
-    // Set executing state immediately for UI feedback
     setToolCallState(toolCall, 'executing')
     onStateChange?.('executing')
     try {
       await useCopilotStore.getState().executeIntegrationTool(toolCall.id)
-      // Note: executeIntegrationTool handles success/error state updates internally
     } catch (e) {
-      // If executeIntegrationTool throws, ensure we update state to error
       setToolCallState(toolCall, 'error', { error: e instanceof Error ? e.message : String(e) })
       onStateChange?.('error')
-      // Notify backend about the error so agent doesn't hang
       try {
         await fetch('/api/copilot/tools/mark-complete', {
           method: 'POST',
@@ -1710,7 +1173,6 @@ async function handleRun(
           }),
         })
       } catch {
-        // Last resort: log error if we can't notify backend
         console.error('[handleRun] Failed to notify backend of tool error:', toolCall.id)
       }
     }
@@ -1735,13 +1197,10 @@ async function handleRun(
 async function handleSkip(toolCall: CopilotToolCall, setToolCallState: any, onStateChange?: any) {
   const instance = getClientTool(toolCall.id)
 
-  // Handle integration tools (skip by marking as rejected and notifying backend)
   if (!instance && isIntegrationTool(toolCall.name)) {
     setToolCallState(toolCall, 'rejected')
     onStateChange?.('rejected')
 
-    // Notify backend that tool was skipped - this is CRITICAL for the agent to continue
-    // Retry up to 3 times if the notification fails
     let notified = false
     for (let attempt = 0; attempt < 3 && !notified; attempt++) {
       try {
@@ -1760,7 +1219,6 @@ async function handleSkip(toolCall: CopilotToolCall, setToolCallState: any, onSt
           notified = true
         }
       } catch (e) {
-        // Wait briefly before retry
         if (attempt < 2) {
           await new Promise((resolve) => setTimeout(resolve, 500))
         }
@@ -1783,7 +1241,6 @@ async function handleSkip(toolCall: CopilotToolCall, setToolCallState: any, onSt
 }
 
 function getDisplayName(toolCall: CopilotToolCall): string {
-  // Prefer display resolved in the copilot store (SSOT)
   const fromStore = (toolCall as any).display?.text
   if (fromStore) return fromStore
   try {
@@ -1792,8 +1249,6 @@ function getDisplayName(toolCall: CopilotToolCall): string {
     if (byState?.text) return byState.text
   } catch {}
 
-  // For integration tools, format the tool name nicely
-  // e.g., "google_calendar_list_events" -> "Running Google Calendar List Events"
   const stateVerb = getStateVerb(toolCall.state)
   const formattedName = formatToolName(toolCall.name)
   return `${stateVerb} ${formattedName}`
@@ -2308,11 +1763,9 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
     }
 
     if (toolCall.name === 'run_workflow') {
-      // Get inputs - could be in multiple locations
       let inputs = editedParams.input || editedParams.inputs || editedParams.workflow_input
       let isNestedInWorkflowInput = false
 
-      // If input is a JSON string, parse it
       if (typeof inputs === 'string') {
         try {
           inputs = JSON.parse(inputs)
@@ -2321,13 +1774,11 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
         }
       }
 
-      // Check if workflow_input exists and contains the actual inputs
       if (editedParams.workflow_input && typeof editedParams.workflow_input === 'object') {
         inputs = editedParams.workflow_input
         isNestedInWorkflowInput = true
       }
 
-      // If no inputs object found, treat base editedParams as inputs (excluding system fields)
       if (!inputs || typeof inputs !== 'object') {
         const { workflowId, workflow_input, ...rest } = editedParams
         inputs = rest
@@ -2336,7 +1787,6 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
       const safeInputs = inputs && typeof inputs === 'object' ? inputs : {}
       const inputEntries = Object.entries(safeInputs)
 
-      // Don't show the section if there are no inputs
       if (inputEntries.length === 0) {
         return null
       }
@@ -2348,7 +1798,6 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
         if (value === null || value === undefined) return ''
         if (typeof value === 'string') return value
         if (typeof value === 'number' || typeof value === 'boolean') return String(value)
-        // For objects and arrays, use JSON.stringify with formatting
         try {
           return JSON.stringify(value, null, 2)
         } catch {
@@ -2360,11 +1809,9 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
        * Parse a string value back to its original type if possible
        */
       const parseInputValue = (value: string, originalValue: unknown): unknown => {
-        // If original was a primitive, keep as string
         if (typeof originalValue !== 'object' || originalValue === null) {
           return value
         }
-        // Try to parse as JSON for objects/arrays
         try {
           return JSON.parse(value)
         } catch {
@@ -2473,7 +1920,6 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
     return null
   }
 
-  // Special handling for tools with alwaysExpanded config (e.g., set_environment_variables)
   const isAlwaysExpanded = toolUIConfig?.alwaysExpanded
   if (
     (isAlwaysExpanded || toolCall.name === 'set_environment_variables') &&
@@ -2531,7 +1977,6 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
     )
   }
 
-  // Special rendering for tools with 'code' customRenderer (e.g., function_execute)
   if (toolUIConfig?.customRenderer === 'code' || toolCall.name === 'function_execute') {
     const code = params.code || ''
     const isFunctionExecuteClickable = isAutoAllowed
@@ -2593,7 +2038,6 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
     )
   }
 
-  // Determine if tool name should be clickable (expandable tools or auto-allowed integration tools)
   const isToolNameClickable = isExpandableTool || isAutoAllowed
 
   const handleToolNameClick = () => {
@@ -2604,7 +2048,6 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
     }
   }
 
-  // For edit_workflow, hide text display when we have operations (WorkflowEditSummary replaces it)
   const isEditWorkflow = toolCall.name === 'edit_workflow'
   const hasOperations = Array.isArray(params.operations) && params.operations.length > 0
   const hideTextForEditWorkflow = isEditWorkflow && hasOperations
@@ -2649,13 +2092,11 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
             onClick={async () => {
               try {
                 const instance = getClientTool(toolCall.id)
-                // Transition to background state locally so UI updates immediately
                 instance?.setState?.((ClientToolCallState as any).background)
                 await instance?.markToolComplete?.(
                   200,
                   'The user has chosen to move the workflow execution to the background. Check back with them later to know when the workflow execution is complete'
                 )
-                // Optionally force a re-render; store should sync state from server
                 forceUpdate({})
                 onStateChange?.('background')
               } catch {}
@@ -2672,21 +2113,16 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
             onClick={async () => {
               try {
                 const instance = getClientTool(toolCall.id)
-                // Get elapsed seconds before waking
                 const elapsedSeconds = instance?.getElapsedSeconds?.() || 0
-                // Transition to background state locally so UI updates immediately
-                // Pass elapsed seconds in the result so dynamic text can use it
                 instance?.setState?.((ClientToolCallState as any).background, {
                   result: { _elapsedSeconds: elapsedSeconds },
                 })
-                // Update the tool call params in the store to include elapsed time for display
                 const { updateToolCallParams } = useCopilotStore.getState()
                 updateToolCallParams?.(toolCall.id, { _elapsedSeconds: Math.round(elapsedSeconds) })
                 await instance?.markToolComplete?.(
                   200,
                   `User woke you up after ${Math.round(elapsedSeconds)} seconds`
                 )
-                // Optionally force a re-render; store should sync state from server
                 forceUpdate({})
                 onStateChange?.('background')
               } catch {}
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 cea9a5ce34..15f5007b6b 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
@@ -151,7 +151,7 @@ export function useMentionData(props: UseMentionDataProps): MentionDataReturn {
     useShallow(useCallback((state) => Object.keys(state.blocks), []))
   )
 
-  const registryWorkflows = useWorkflowRegistry((state) => state.workflows)
+  const registryWorkflows = useWorkflowRegistry(useShallow((state) => state.workflows))
   const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
   const isLoadingWorkflows =
     hydrationPhase === 'idle' ||
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 cfc448d1aa..fc82f845db 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
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import type { useMentionMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-menu'
 import type { ChatContext } from '@/stores/panel'
 
@@ -39,11 +39,11 @@ export function useMentionTokens({
   setSelectedContexts,
 }: UseMentionTokensProps) {
   /**
-   * Computes all mention ranges in the message (both @mentions and /commands)
-   *
-   * @returns Array of mention ranges sorted by start position
+   * Memoized mention ranges - computed once when message or selectedContexts change.
+   * This prevents expensive O(n×m) string searches from running on every keystroke
+   * when other callbacks access the ranges.
    */
-  const computeMentionRanges = useCallback((): MentionRange[] => {
+  const memoizedMentionRanges = useMemo((): MentionRange[] => {
     const ranges: MentionRange[] = []
     if (!message || selectedContexts.length === 0) return ranges
 
@@ -93,35 +93,45 @@ export function useMentionTokens({
 
   /**
    * Finds a mention range containing the given position
+   */
+  const computeMentionRanges = useCallback(
+    (): MentionRange[] => memoizedMentionRanges,
+    [memoizedMentionRanges]
+  )
+
+  /**
+   * Finds a mention range containing the given position.
+   * Uses memoized ranges directly for better performance.
    *
    * @param pos - Position to check
    * @returns Mention range if found, undefined otherwise
    */
   const findRangeContaining = useCallback(
     (pos: number): MentionRange | undefined => {
-      const ranges = computeMentionRanges()
-      return ranges.find((r) => pos > r.start && pos < r.end)
+      return memoizedMentionRanges.find((r) => pos > r.start && pos < r.end)
     },
-    [computeMentionRanges]
+    [memoizedMentionRanges]
   )
 
   /**
-   * Removes contexts for mention tokens that overlap with a text selection
+   * Removes contexts for mention tokens that overlap with a text selection.
+   * Uses memoized ranges directly for better performance.
    *
    * @param selStart - Selection start position
    * @param selEnd - Selection end position
    */
   const removeContextsInSelection = useCallback(
     (selStart: number, selEnd: number) => {
-      const ranges = computeMentionRanges()
-      const overlappingRanges = ranges.filter((r) => !(selEnd <= r.start || selStart >= r.end))
+      const overlappingRanges = memoizedMentionRanges.filter(
+        (r) => !(selEnd <= r.start || selStart >= r.end)
+      )
 
       if (overlappingRanges.length > 0) {
         const labelsToRemove = new Set(overlappingRanges.map((r) => r.label))
         setSelectedContexts((prev) => prev.filter((c) => !c.label || !labelsToRemove.has(c.label)))
       }
     },
-    [computeMentionRanges, setSelectedContexts]
+    [memoizedMentionRanges, setSelectedContexts]
   )
 
   /**
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 11a8574aef..3636c6b29b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -655,6 +655,13 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       [insertTriggerAndOpenMenu]
     )
 
+    const handleModelSelect = useCallback(
+      (model: string) => {
+        setSelectedModel(model as any)
+      },
+      [setSelectedModel]
+    )
+
     const canSubmit = message.trim().length > 0 && !disabled && !isLoading
     const showAbortButton = isLoading && onAbort
 
@@ -863,7 +870,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               <ModelSelector
                 selectedModel={selectedModel}
                 isNearTop={isNearTop}
-                onModelSelect={(model: string) => setSelectedModel(model as any)}
+                onModelSelect={handleModelSelect}
               />
             </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index 2324535039..fab801432b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react'
-import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { Check, Copy, Wand2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import 'prismjs/components/prism-python'
@@ -170,7 +170,7 @@ interface CodeProps {
   hideInternalWand?: boolean
 }
 
-export function Code({
+export const Code = memo(function Code({
   blockId,
   subBlockId,
   placeholder = 'Write JavaScript...',
@@ -206,6 +206,8 @@ export function Code({
   const handleGeneratedContentRef = useRef<(generatedCode: string) => void>(() => {})
   const handleStreamChunkRef = useRef<(chunk: string) => void>(() => {})
   const hasEditedSinceFocusRef = useRef(false)
+  const codeRef = useRef(code)
+  codeRef.current = code
 
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
   const emitTagSelection = useTagSelection(blockId, subBlockId)
@@ -555,36 +557,39 @@ export function Code({
    * @param part - The code segment to check
    * @returns True if the segment should be highlighted as a reference
    */
-  const shouldHighlightReference = (part: string): boolean => {
-    if (!part.startsWith('<') || !part.endsWith('>')) {
-      return false
-    }
+  const shouldHighlightReference = useCallback(
+    (part: string): boolean => {
+      if (!part.startsWith('<') || !part.endsWith('>')) {
+        return false
+      }
 
-    if (!isLikelyReferenceSegment(part)) {
-      return false
-    }
+      if (!isLikelyReferenceSegment(part)) {
+        return false
+      }
 
-    const split = splitReferenceSegment(part)
-    if (!split) {
-      return false
-    }
+      const split = splitReferenceSegment(part)
+      if (!split) {
+        return false
+      }
 
-    const reference = split.reference
+      const reference = split.reference
 
-    if (!accessiblePrefixes) {
-      return true
-    }
+      if (!accessiblePrefixes) {
+        return true
+      }
 
-    const inner = reference.slice(1, -1)
-    const [prefix] = inner.split('.')
-    const normalizedPrefix = normalizeName(prefix)
+      const inner = reference.slice(1, -1)
+      const [prefix] = inner.split('.')
+      const normalizedPrefix = normalizeName(prefix)
 
-    if (SYSTEM_REFERENCE_PREFIXES.has(normalizedPrefix)) {
-      return true
-    }
+      if (SYSTEM_REFERENCE_PREFIXES.has(normalizedPrefix)) {
+        return true
+      }
 
-    return accessiblePrefixes.has(normalizedPrefix)
-  }
+      return accessiblePrefixes.has(normalizedPrefix)
+    },
+    [accessiblePrefixes]
+  )
 
   useImperativeHandle(
     wandControlRef,
@@ -598,6 +603,62 @@ export function Code({
     [generateCodeStream, isPromptVisible, isAiStreaming]
   )
 
+  const highlightCode = useMemo(
+    () => createHighlightFunction(effectiveLanguage, shouldHighlightReference),
+    [effectiveLanguage, shouldHighlightReference]
+  )
+
+  const handleValueChange = useCallback(
+    (newCode: string) => {
+      if (!isAiStreaming && !isPreview && !disabled && !readOnly) {
+        hasEditedSinceFocusRef.current = true
+        setCode(newCode)
+        setStoreValue(newCode)
+
+        const textarea = editorRef.current?.querySelector('textarea')
+        if (textarea) {
+          const pos = textarea.selectionStart
+          setCursorPosition(pos)
+
+          const tagTrigger = checkTagTrigger(newCode, pos)
+          setShowTags(tagTrigger.show)
+          if (!tagTrigger.show) {
+            setActiveSourceBlockId(null)
+          }
+
+          const envVarTrigger = checkEnvVarTrigger(newCode, pos)
+          setShowEnvVars(envVarTrigger.show)
+          setSearchTerm(envVarTrigger.show ? envVarTrigger.searchTerm : '')
+        }
+      }
+    },
+    [isAiStreaming, isPreview, disabled, readOnly, setStoreValue]
+  )
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement | HTMLTextAreaElement>) => {
+      if (e.key === 'Escape') {
+        setShowTags(false)
+        setShowEnvVars(false)
+      }
+      if (isAiStreaming) {
+        e.preventDefault()
+      }
+      if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !hasEditedSinceFocusRef.current) {
+        e.preventDefault()
+      }
+    },
+    [isAiStreaming]
+  )
+
+  const handleEditorFocus = useCallback(() => {
+    hasEditedSinceFocusRef.current = false
+    if (!isPreview && !disabled && !readOnly && codeRef.current.trim() === '') {
+      setShowTags(true)
+      setCursorPosition(0)
+    }
+  }, [isPreview, disabled, readOnly])
+
   /**
    * Renders the line numbers, aligned with wrapped visual lines and highlighting the active line.
    * @returns Array of React elements representing the line numbers
@@ -713,49 +774,10 @@ export function Code({
 
           <Editor
             value={code}
-            onValueChange={(newCode: string) => {
-              if (!isAiStreaming && !isPreview && !disabled && !readOnly) {
-                hasEditedSinceFocusRef.current = true
-                setCode(newCode)
-                setStoreValue(newCode)
-
-                const textarea = editorRef.current?.querySelector('textarea')
-                if (textarea) {
-                  const pos = textarea.selectionStart
-                  setCursorPosition(pos)
-
-                  const tagTrigger = checkTagTrigger(newCode, pos)
-                  setShowTags(tagTrigger.show)
-                  if (!tagTrigger.show) {
-                    setActiveSourceBlockId(null)
-                  }
-
-                  const envVarTrigger = checkEnvVarTrigger(newCode, pos)
-                  setShowEnvVars(envVarTrigger.show)
-                  setSearchTerm(envVarTrigger.show ? envVarTrigger.searchTerm : '')
-                }
-              }
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Escape') {
-                setShowTags(false)
-                setShowEnvVars(false)
-              }
-              if (isAiStreaming) {
-                e.preventDefault()
-              }
-              if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !hasEditedSinceFocusRef.current) {
-                e.preventDefault()
-              }
-            }}
-            onFocus={() => {
-              hasEditedSinceFocusRef.current = false
-              if (!isPreview && !disabled && !readOnly && code.trim() === '') {
-                setShowTags(true)
-                setCursorPosition(0)
-              }
-            }}
-            highlight={createHighlightFunction(effectiveLanguage, shouldHighlightReference)}
+            onValueChange={handleValueChange}
+            onKeyDown={handleKeyDown}
+            onFocus={handleEditorFocus}
+            highlight={highlightCode}
             {...getCodeEditorProps({ isStreaming: isAiStreaming, isPreview, disabled })}
           />
 
@@ -798,4 +820,4 @@ export function Code({
       </CodeEditor.Container>
     </>
   )
-}
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
index 9eaab8c3a6..c86e934231 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { isEqual } from 'lodash'
 import { useReactFlow } from 'reactflow'
 import { Combobox, type ComboboxOption } from '@/components/emcn/components'
 import { cn } from '@/lib/core/utils/cn'
@@ -71,7 +72,7 @@ interface ComboBoxProps {
   dependsOn?: SubBlockConfig['dependsOn']
 }
 
-export function ComboBox({
+export const ComboBox = memo(function ComboBox({
   options,
   defaultValue,
   blockId,
@@ -112,7 +113,8 @@ export function ComboBox({
         )
       },
       [dependsOnFields, activeWorkflowId, blockId, canonicalIndex, canonicalModeOverrides]
-    )
+    ),
+    isEqual
   )
 
   // State management
@@ -281,34 +283,17 @@ export function ComboBox({
     setStoreInitialized(true)
   }, [])
 
-  // Check if current value is valid (exists in allowed options)
-  const isValueValid = useMemo(() => {
-    if (value === null || value === undefined) return false
-    return evaluatedOptions.some((opt) => getOptionValue(opt) === value)
-  }, [value, evaluatedOptions, getOptionValue])
-
   // Set default value once store is initialized and permissions are loaded
-  // Also reset if current value becomes invalid (e.g., provider was blocked)
   useEffect(() => {
     if (isPermissionLoading) return
     if (!storeInitialized) return
     if (defaultOptionValue === undefined) return
 
-    const needsDefault = value === null || value === undefined
-    const needsReset = subBlockId === 'model' && value && !isValueValid
-
-    if (needsDefault || needsReset) {
+    // Only set default when no value exists (initial block add)
+    if (value === null || value === undefined) {
       setStoreValue(defaultOptionValue)
     }
-  }, [
-    storeInitialized,
-    value,
-    defaultOptionValue,
-    setStoreValue,
-    isPermissionLoading,
-    subBlockId,
-    isValueValid,
-  ])
+  }, [storeInitialized, value, defaultOptionValue, setStoreValue, isPermissionLoading])
 
   // Clear fetched options and hydrated option when dependencies change
   useEffect(() => {
@@ -437,6 +422,18 @@ export function ComboBox({
     [reactFlowInstance]
   )
 
+  /**
+   * Handles combobox open state changes to trigger option fetching
+   */
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) {
+        void fetchOptionsIfNeeded()
+      }
+    },
+    [fetchOptionsIfNeeded]
+  )
+
   /**
    * Gets the icon for the currently selected option
    */
@@ -466,6 +463,75 @@ export function ComboBox({
     )
   }, [inputValue, accessiblePrefixes, selectedOption, selectedOptionIcon])
 
+  const ctrlOnChangeRef = useRef<
+    ((e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void) | null
+  >(null)
+  const onDropRef = useRef<
+    ((e: React.DragEvent<HTMLTextAreaElement | HTMLInputElement>) => void) | null
+  >(null)
+  const onDragOverRef = useRef<
+    ((e: React.DragEvent<HTMLTextAreaElement | HTMLInputElement>) => void) | null
+  >(null)
+  const inputRefFromController = useRef<HTMLInputElement | null>(null)
+
+  const comboboxOnChange = useCallback(
+    (newValue: string) => {
+      const matchedComboboxOption = comboboxOptions.find((option) => option.value === newValue)
+      if (matchedComboboxOption) {
+        setInputValue(matchedComboboxOption.label)
+      } else {
+        setInputValue(newValue)
+      }
+
+      // Use controller's handler so env vars, tags, and DnD still work
+      const syntheticEvent = {
+        target: { value: newValue, selectionStart: newValue.length },
+      } as React.ChangeEvent<HTMLInputElement>
+      ctrlOnChangeRef.current?.(syntheticEvent)
+    },
+    [comboboxOptions, setInputValue]
+  )
+
+  const comboboxInputProps = useMemo(
+    () => ({
+      onDrop: ((e: React.DragEvent<HTMLInputElement>) => {
+        onDropRef.current?.(e)
+      }) as (e: React.DragEvent<HTMLInputElement>) => void,
+      onDragOver: ((e: React.DragEvent<HTMLInputElement>) => {
+        onDragOverRef.current?.(e)
+      }) as (e: React.DragEvent<HTMLInputElement>) => void,
+      onWheel: handleWheel,
+      autoComplete: 'off' as const,
+    }),
+    [handleWheel]
+  )
+
+  // Stable onChange for SubBlockInputController
+  const controllerOnChange = useCallback(
+    (newValue: string) => {
+      if (isPreview) {
+        return
+      }
+
+      const matchedOption = evaluatedOptions.find((option) => {
+        if (typeof option === 'string') {
+          return option === newValue
+        }
+        return option.id === newValue
+      })
+
+      // If a matching option is found, store its ID; otherwise store the raw value
+      // (allows expressions like <block.output> to be entered directly)
+      const nextValue = matchedOption
+        ? typeof matchedOption === 'string'
+          ? matchedOption
+          : matchedOption.id
+        : newValue
+      setStoreValue(nextValue)
+    },
+    [isPreview, evaluatedOptions, setStoreValue]
+  )
+
   return (
     <div className='relative w-full'>
       <SubBlockInputController
@@ -473,76 +539,43 @@ export function ComboBox({
         subBlockId={subBlockId}
         config={config}
         value={propValue}
-        onChange={(newValue) => {
-          if (isPreview) {
-            return
-          }
-
-          const matchedOption = evaluatedOptions.find((option) => {
-            if (typeof option === 'string') {
-              return option === newValue
-            }
-            return option.id === newValue
-          })
-
-          // If a matching option is found, store its ID; otherwise store the raw value
-          // (allows expressions like <block.output> to be entered directly)
-          const nextValue = matchedOption
-            ? typeof matchedOption === 'string'
-              ? matchedOption
-              : matchedOption.id
-            : newValue
-          setStoreValue(nextValue)
-        }}
+        onChange={controllerOnChange}
         isPreview={isPreview}
         disabled={disabled}
         previewValue={previewValue}
       >
-        {({ ref, onChange: ctrlOnChange, onDrop, onDragOver }) => (
-          <Combobox
-            options={comboboxOptions}
-            value={inputValue}
-            selectedValue={value ?? ''}
-            onChange={(newValue) => {
-              const matchedComboboxOption = comboboxOptions.find(
-                (option) => option.value === newValue
-              )
-              if (matchedComboboxOption) {
-                setInputValue(matchedComboboxOption.label)
-              } else {
-                setInputValue(newValue)
-              }
-
-              // Use controller's handler so env vars, tags, and DnD still work
-              const syntheticEvent = {
-                target: { value: newValue, selectionStart: newValue.length },
-              } as React.ChangeEvent<HTMLInputElement>
-              ctrlOnChange(syntheticEvent)
-            }}
-            placeholder={placeholder}
-            disabled={disabled}
-            editable
-            overlayContent={overlayContent}
-            inputRef={ref as React.RefObject<HTMLInputElement>}
-            filterOptions
-            searchable={config.searchable}
-            className={cn('allow-scroll overflow-x-auto', selectedOptionIcon && 'pl-[28px]')}
-            inputProps={{
-              onDrop: onDrop as (e: React.DragEvent<HTMLInputElement>) => void,
-              onDragOver: onDragOver as (e: React.DragEvent<HTMLInputElement>) => void,
-              onWheel: handleWheel,
-              autoComplete: 'off',
-            }}
-            isLoading={isLoadingOptions}
-            error={fetchError}
-            onOpenChange={(open) => {
-              if (open) {
-                void fetchOptionsIfNeeded()
-              }
-            }}
-          />
-        )}
+        {({ ref, onChange: ctrlOnChange, onDrop, onDragOver }) => {
+          // Update refs with latest handlers from render prop
+          ctrlOnChangeRef.current = ctrlOnChange
+          onDropRef.current = onDrop
+          onDragOverRef.current = onDragOver
+          // Store the input ref for passing to Combobox
+          if (ref.current) {
+            inputRefFromController.current = ref.current as HTMLInputElement
+          }
+
+          return (
+            <Combobox
+              options={comboboxOptions}
+              value={inputValue}
+              selectedValue={value ?? ''}
+              onChange={comboboxOnChange}
+              placeholder={placeholder}
+              disabled={disabled}
+              editable
+              overlayContent={overlayContent}
+              inputRef={ref as React.RefObject<HTMLInputElement>}
+              filterOptions
+              searchable={config.searchable}
+              className={cn('allow-scroll overflow-x-auto', selectedOptionIcon && 'pl-[28px]')}
+              inputProps={comboboxInputProps}
+              isLoading={isLoadingOptions}
+              error={fetchError}
+              onOpenChange={handleOpenChange}
+            />
+          )
+        }}
       </SubBlockInputController>
     </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 3dd1aca9a9..51aa596a5b 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
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { isEqual } from 'lodash'
 import { Badge } from '@/components/emcn'
 import { Combobox, type ComboboxOption } from '@/components/emcn/components'
 import { buildCanonicalIndex, resolveDependencyValue } from '@/lib/workflows/subblocks/visibility'
@@ -68,7 +69,7 @@ interface DropdownProps {
  * - Special handling for dataMode subblock to convert between JSON and structured formats
  * - Integrates with the workflow state management system
  */
-export function Dropdown({
+export const Dropdown = memo(function Dropdown({
   options,
   defaultValue,
   blockId,
@@ -110,7 +111,8 @@ export function Dropdown({
         )
       },
       [dependsOnFields, activeWorkflowId, blockId, canonicalIndex, canonicalModeOverrides]
-    )
+    ),
+    isEqual
   )
 
   const [storeInitialized, setStoreInitialized] = useState(false)
@@ -161,6 +163,18 @@ export function Dropdown({
     }
   }, [fetchOptions, blockId, subBlockId, isPreview, disabled])
 
+  /**
+   * Handles combobox open state changes to trigger option fetching
+   */
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) {
+        void fetchOptionsIfNeeded()
+      }
+    },
+    [fetchOptionsIfNeeded]
+  )
+
   const evaluatedOptions = useMemo(() => {
     return typeof options === 'function' ? options() : options
   }, [options])
@@ -471,11 +485,7 @@ export function Dropdown({
       placeholder={placeholder}
       disabled={disabled}
       editable={false}
-      onOpenChange={(open) => {
-        if (open) {
-          void fetchOptionsIfNeeded()
-        }
-      }}
+      onOpenChange={handleOpenChange}
       overlayContent={multiSelectOverlay}
       multiSelect={multiSelect}
       isLoading={isLoadingOptions}
@@ -484,4 +494,4 @@ export function Dropdown({
       searchPlaceholder='Search...'
     />
   )
-}
+})
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 50943acfcd..6ada0e47cb 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
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { isEqual } from 'lodash'
 import { ChevronDown, ChevronsUpDown, ChevronUp, Plus } from 'lucide-react'
 import { Button, Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
 import { Trash } from '@/components/emcn/icons/trash'
@@ -225,14 +226,18 @@ export function MessagesInput({
     [wandHook]
   )
 
-  /**
-   * Initialize local state from stored or preview value
-   */
+  const localMessagesRef = useRef(localMessages)
+  localMessagesRef.current = localMessages
+
   useEffect(() => {
     if (isPreview && previewValue && Array.isArray(previewValue)) {
-      setLocalMessages(previewValue)
+      if (!isEqual(localMessagesRef.current, previewValue)) {
+        setLocalMessages(previewValue)
+      }
     } else if (messages && Array.isArray(messages) && messages.length > 0) {
-      setLocalMessages(messages)
+      if (!isEqual(localMessagesRef.current, messages)) {
+        setLocalMessages(messages)
+      }
     }
   }, [isPreview, previewValue, messages])
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index a2c8bedfb2..60e74716f7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { Check, Copy, Wand2 } from 'lucide-react'
 import { useReactFlow } from 'reactflow'
 import { Input } from '@/components/emcn'
@@ -62,7 +62,7 @@ interface ShortInputProps {
  * - Copy to clipboard functionality
  * - Integrates with ReactFlow for zoom control
  */
-export function ShortInput({
+export const ShortInput = memo(function ShortInput({
   blockId,
   subBlockId,
   placeholder,
@@ -445,4 +445,4 @@ export function ShortInput({
       </div>
     </>
   )
-}
+})
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 40463cf89d..3799c9c5e5 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
@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { Plus } from 'lucide-react'
 import { Trash } from '@/components/emcn/icons/trash'
 import 'prismjs/components/prism-json'
@@ -81,6 +81,8 @@ const createDefaultField = (): Field => ({
  */
 const validateFieldName = (name: string): string => name.replace(/[\x00-\x1F"\\]/g, '').trim()
 
+const jsonHighlight = (code: string): string => highlight(code, languages.json, 'json')
+
 export function FieldFormat({
   blockId,
   subBlockId,
@@ -138,17 +140,50 @@ export function FieldFormat({
     setStoreValue(fields.filter((field) => field.id !== id))
   }
 
-  /**
-   * Updates a specific field property
-   */
-  const updateField = (id: string, field: keyof Field, value: any) => {
-    if (isReadOnly) return
+  const storeValueRef = useRef(storeValue)
+  storeValueRef.current = storeValue
 
-    const updatedValue =
-      field === 'name' && typeof value === 'string' ? validateFieldName(value) : value
+  const isReadOnlyRef = useRef(isReadOnly)
+  isReadOnlyRef.current = isReadOnly
 
-    setStoreValue(fields.map((f) => (f.id === id ? { ...f, [field]: updatedValue } : f)))
-  }
+  const setStoreValueRef = useRef(setStoreValue)
+  setStoreValueRef.current = setStoreValue
+
+  const updateField = useCallback(
+    (id: string, fieldKey: keyof Field, fieldValue: Field[keyof Field]) => {
+      if (isReadOnlyRef.current) return
+
+      const updatedValue =
+        fieldKey === 'name' && typeof fieldValue === 'string'
+          ? validateFieldName(fieldValue)
+          : fieldValue
+
+      const currentStoreValue = storeValueRef.current
+      const currentFields: Field[] =
+        Array.isArray(currentStoreValue) && currentStoreValue.length > 0
+          ? currentStoreValue
+          : [createDefaultField()]
+
+      setStoreValueRef.current(
+        currentFields.map((f) => (f.id === id ? { ...f, [fieldKey]: updatedValue } : f))
+      )
+    },
+    []
+  )
+
+  const editorValueChangeHandlersRef = useRef<Record<string, (newValue: string) => void>>({})
+
+  const getEditorValueChangeHandler = useCallback(
+    (fieldId: string): ((newValue: string) => void) => {
+      if (!editorValueChangeHandlersRef.current[fieldId]) {
+        editorValueChangeHandlersRef.current[fieldId] = (newValue: string) => {
+          updateField(fieldId, 'value', newValue)
+        }
+      }
+      return editorValueChangeHandlersRef.current[fieldId]
+    },
+    [updateField]
+  )
 
   /**
    * Toggles the collapsed state of a field
@@ -222,15 +257,14 @@ export function FieldFormat({
           placeholder={placeholder}
           disabled={isReadOnly}
           autoComplete='off'
-          className={cn('allow-scroll w-full overflow-auto', inputClassName)}
-          style={{ overflowX: 'auto' }}
+          className={cn('allow-scroll w-full overflow-x-auto overflow-y-hidden', inputClassName)}
         />
         <div
           ref={(el) => {
             if (el) nameOverlayRefs.current[field.id] = el
           }}
           className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
-          style={{ overflowX: 'auto' }}
+          style={{ scrollbarWidth: 'none' }}
         >
           <div
             className='w-full whitespace-pre'
@@ -359,12 +393,8 @@ export function FieldFormat({
             </Code.Placeholder>
             <Editor
               value={fieldValue}
-              onValueChange={(newValue) => {
-                if (!isReadOnly) {
-                  updateField(field.id, 'value', newValue)
-                }
-              }}
-              highlight={(code) => highlight(code, languages.json, 'json')}
+              onValueChange={getEditorValueChangeHandler(field.id)}
+              highlight={jsonHighlight}
               disabled={isReadOnly}
               {...getCodeEditorProps({ disabled: isReadOnly })}
             />
@@ -398,12 +428,8 @@ export function FieldFormat({
             </Code.Placeholder>
             <Editor
               value={fieldValue}
-              onValueChange={(newValue) => {
-                if (!isReadOnly) {
-                  updateField(field.id, 'value', newValue)
-                }
-              }}
-              highlight={(code) => highlight(code, languages.json, 'json')}
+              onValueChange={getEditorValueChangeHandler(field.id)}
+              highlight={jsonHighlight}
               disabled={isReadOnly}
               {...getCodeEditorProps({ disabled: isReadOnly })}
             />
@@ -439,12 +465,8 @@ export function FieldFormat({
             </Code.Placeholder>
             <Editor
               value={fieldValue}
-              onValueChange={(newValue) => {
-                if (!isReadOnly) {
-                  updateField(field.id, 'value', newValue)
-                }
-              }}
-              highlight={(code) => highlight(code, languages.json, 'json')}
+              onValueChange={getEditorValueChangeHandler(field.id)}
+              highlight={jsonHighlight}
               disabled={isReadOnly}
               {...getCodeEditorProps({ disabled: isReadOnly })}
             />
@@ -476,15 +498,14 @@ export function FieldFormat({
           placeholder={valuePlaceholder}
           disabled={isReadOnly}
           autoComplete='off'
-          className={cn('allow-scroll w-full overflow-auto', inputClassName)}
-          style={{ overflowX: 'auto' }}
+          className={cn('allow-scroll w-full overflow-x-auto overflow-y-hidden', inputClassName)}
         />
         <div
           ref={(el) => {
             if (el) overlayRefs.current[field.id] = el
           }}
           className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
-          style={{ overflowX: 'auto' }}
+          style={{ scrollbarWidth: 'none' }}
         >
           <div
             className='w-full whitespace-pre'
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 6afbe1484c..bc85d61d45 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
@@ -1,5 +1,5 @@
 import type React from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Loader2, WrenchIcon, XIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
@@ -877,7 +877,7 @@ function createToolIcon(bgColor: string, IconComponent: any) {
  * - Allows drag-and-drop reordering of selected tools
  * - Supports tool usage control (auto/force/none) for compatible LLM providers
  */
-export function ToolInput({
+export const ToolInput = memo(function ToolInput({
   blockId,
   subBlockId,
   isPreview = false,
@@ -2682,4 +2682,4 @@ export function ToolInput({
       />
     </div>
   )
-}
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts
index e333338f93..cc5a906098 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts
@@ -1,6 +1,7 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
+import { isEqual } from 'lodash'
 import {
   buildCanonicalIndex,
   isNonEmptyValue,
@@ -97,47 +98,60 @@ export function useDependsOnGate(
     return rawValue
   }
 
-  // Get values for all dependency fields (both all and any)
-  const dependencyValuesMap = useSubBlockStore((state) => {
-    if (allDependsOnFields.length === 0) return {} as Record<string, unknown>
+  const dependencySelector = useCallback(
+    (state: ReturnType<typeof useSubBlockStore.getState>) => {
+      if (allDependsOnFields.length === 0) return {} as Record<string, unknown>
+
+      // If previewContextValues are provided (e.g., tool parameters), use those first
+      if (previewContextValues) {
+        const map: Record<string, unknown> = {}
+        for (const key of allDependsOnFields) {
+          const resolvedValue = resolveDependencyValue(
+            key,
+            previewContextValues,
+            canonicalIndex,
+            canonicalModeOverrides
+          )
+          map[key] = normalizeDependencyValue(resolvedValue)
+        }
+        return map
+      }
+
+      if (!activeWorkflowId) {
+        const map: Record<string, unknown> = {}
+        for (const key of allDependsOnFields) {
+          map[key] = null
+        }
+        return map
+      }
 
-    // If previewContextValues are provided (e.g., tool parameters), use those first
-    if (previewContextValues) {
+      const workflowValues = state.workflowValues[activeWorkflowId] || {}
+      const blockValues = (workflowValues as any)[blockId] || {}
       const map: Record<string, unknown> = {}
       for (const key of allDependsOnFields) {
         const resolvedValue = resolveDependencyValue(
           key,
-          previewContextValues,
+          blockValues,
           canonicalIndex,
           canonicalModeOverrides
         )
         map[key] = normalizeDependencyValue(resolvedValue)
       }
       return map
-    }
-
-    if (!activeWorkflowId) {
-      const map: Record<string, unknown> = {}
-      for (const key of allDependsOnFields) {
-        map[key] = null
-      }
-      return map
-    }
+    },
+    [
+      allDependsOnFields,
+      previewContextValues,
+      activeWorkflowId,
+      blockId,
+      canonicalIndex,
+      canonicalModeOverrides,
+    ]
+  )
 
-    const workflowValues = state.workflowValues[activeWorkflowId] || {}
-    const blockValues = (workflowValues as any)[blockId] || {}
-    const map: Record<string, unknown> = {}
-    for (const key of allDependsOnFields) {
-      const resolvedValue = resolveDependencyValue(
-        key,
-        blockValues,
-        canonicalIndex,
-        canonicalModeOverrides
-      )
-      map[key] = normalizeDependencyValue(resolvedValue)
-    }
-    return map
-  })
+  // Get values for all dependency fields (both all and any)
+  // Use isEqual to prevent re-renders when dependency values haven't actually changed
+  const dependencyValuesMap = useSubBlockStore(dependencySelector, isEqual)
 
   const depsSatisfied = useMemo(() => {
     // Check all fields (AND logic) - all must be satisfied
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 3acc8a5534..b757d4f09a 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
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import { isEqual } from 'lodash'
+import { useShallow } from 'zustand/react/shallow'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { getProviderFromModel } from '@/providers/utils'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
@@ -51,16 +52,12 @@ export function useSubBlockValue<T = any>(
     )
   )
 
-  // Keep a ref to the latest value to prevent unnecessary re-renders
   const valueRef = useRef<T | null>(null)
 
-  // Streaming refs
   const lastEmittedValueRef = useRef<T | null>(null)
   const streamingValueRef = useRef<T | null>(null)
   const wasStreamingRef = useRef<boolean>(false)
 
-  // Get value from subblock store, keyed by active workflow id
-  // Optimized: use shallow equality comparison to prevent re-renders when other fields change
   const storeValue = useSubBlockStore(
     useCallback(
       (state) => {
@@ -70,11 +67,17 @@ export function useSubBlockValue<T = any>(
       },
       [activeWorkflowId, blockId, subBlockId]
     ),
-    (a, b) => isEqual(a, b) // Use deep equality to prevent re-renders for same values
+    (a, b) => isEqual(a, b)
   )
 
   // Check if we're in diff mode and get diff value if available
-  const { isShowingDiff, hasActiveDiff, baselineWorkflow } = useWorkflowDiffStore()
+  const { isShowingDiff, hasActiveDiff, baselineWorkflow } = useWorkflowDiffStore(
+    useShallow((state) => ({
+      isShowingDiff: state.isShowingDiff,
+      hasActiveDiff: state.hasActiveDiff,
+      baselineWorkflow: state.baselineWorkflow,
+    }))
+  )
   const isBaselineView = hasActiveDiff && !isShowingDiff
   const snapshotSubBlock =
     isBaselineView && baselineWorkflow
@@ -101,7 +104,7 @@ export function useSubBlockValue<T = any>(
   // Compute the modelValue based on block type
   const modelValue = isProviderBasedBlock ? (modelSubBlockValue as string) : null
 
-  // Emit the value to socket/DB
+  // Emit the value to socket/DB and update local store
   const emitValue = useCallback(
     (value: T) => {
       collaborativeSetSubblockValue(blockId, subBlockId, value)
@@ -155,20 +158,6 @@ export function useSubBlockValue<T = any>(
           return
         }
 
-        // Update local store immediately for UI responsiveness (non-streaming)
-        useSubBlockStore.setState((state) => ({
-          workflowValues: {
-            ...state.workflowValues,
-            [currentActiveWorkflowId]: {
-              ...state.workflowValues[currentActiveWorkflowId],
-              [blockId]: {
-                ...state.workflowValues[currentActiveWorkflowId]?.[blockId],
-                [subBlockId]: newValue,
-              },
-            },
-          },
-        }))
-
         // Handle model changes for provider-based blocks - clear API key when provider changes (non-streaming)
         if (
           subBlockId === 'model' &&
@@ -206,6 +195,8 @@ export function useSubBlockValue<T = any>(
       isStreaming,
       emitValue,
       isBaselineView,
+      collaborativeSetSubblockValue,
+      isProviderBasedBlock,
     ]
   )
 
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 b95d5f1a45..a47b0f97de 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,5 @@
 import { type JSX, type MouseEvent, memo, useRef, useState } from 'react'
+import { isEqual } from 'lodash'
 import { AlertTriangle, ArrowLeftRight, ArrowUp } from 'lucide-react'
 import { Button, Input, Label, Tooltip } from '@/components/emcn/components'
 import { cn } from '@/lib/core/utils/cn'
@@ -304,22 +305,27 @@ const renderLabel = (
 }
 
 /**
- * Compares props to prevent unnecessary re-renders.
- *
- * @remarks
- * Used with React.memo to optimize performance by skipping re-renders
- * when props haven't meaningfully changed.
+ * Compares props for memo equality check.
  *
  * @param prevProps - Previous component props
  * @param nextProps - Next component props
  * @returns `true` if props are equal and re-render should be skipped
  */
 const arePropsEqual = (prevProps: SubBlockProps, nextProps: SubBlockProps): boolean => {
+  const subBlockId = prevProps.config.id
+  const prevValue = prevProps.subBlockValues?.[subBlockId]?.value
+  const nextValue = nextProps.subBlockValues?.[subBlockId]?.value
+
+  const valueEqual = prevValue === nextValue || isEqual(prevValue, nextValue)
+
+  const configEqual =
+    prevProps.config.id === nextProps.config.id && prevProps.config.type === nextProps.config.type
+
   return (
     prevProps.blockId === nextProps.blockId &&
-    prevProps.config === nextProps.config &&
+    configEqual &&
     prevProps.isPreview === nextProps.isPreview &&
-    prevProps.subBlockValues === nextProps.subBlockValues &&
+    valueEqual &&
     prevProps.disabled === nextProps.disabled &&
     prevProps.fieldDiffStatus === nextProps.fieldDiffStatus &&
     prevProps.allowExpandInPreview === nextProps.allowExpandInPreview &&
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 3516855889..30ab836172 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
@@ -1,7 +1,9 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { isEqual } from 'lodash'
 import { BookOpen, Check, ChevronDown, ChevronUp, Pencil } from 'lucide-react'
+import { useShallow } from 'zustand/react/shallow'
 import { Button, Tooltip } from '@/components/emcn'
 import {
   buildCanonicalIndex,
@@ -33,6 +35,9 @@ import { usePanelEditorStore } from '@/stores/panel'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 
+/** Stable empty object to avoid creating new references */
+const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
+
 /**
  * Icon component for rendering block icons.
  *
@@ -58,7 +63,15 @@ export function Editor() {
     toggleConnectionsCollapsed,
     shouldFocusRename,
     setShouldFocusRename,
-  } = usePanelEditorStore()
+  } = usePanelEditorStore(
+    useShallow((state) => ({
+      currentBlockId: state.currentBlockId,
+      connectionsHeight: state.connectionsHeight,
+      toggleConnectionsCollapsed: state.toggleConnectionsCollapsed,
+      shouldFocusRename: state.shouldFocusRename,
+      setShouldFocusRename: state.setShouldFocusRename,
+    }))
+  )
   const currentWorkflow = useCurrentWorkflow()
   const currentBlock = currentBlockId ? currentWorkflow.getBlockById(currentBlockId) : null
   const blockConfig = currentBlock ? getBlock(currentBlock.type) : null
@@ -86,15 +99,15 @@ export function Editor() {
     currentWorkflow.isSnapshotView
   )
 
-  // Subscribe to block's subblock values
   const blockSubBlockValues = useSubBlockStore(
     useCallback(
       (state) => {
-        if (!activeWorkflowId || !currentBlockId) return {}
-        return state.workflowValues[activeWorkflowId]?.[currentBlockId] || {}
+        if (!activeWorkflowId || !currentBlockId) return EMPTY_SUBBLOCK_VALUES
+        return state.workflowValues[activeWorkflowId]?.[currentBlockId] ?? EMPTY_SUBBLOCK_VALUES
       },
       [activeWorkflowId, currentBlockId]
-    )
+    ),
+    isEqual
   )
 
   const subBlocksForCanonical = useMemo(() => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections.ts
index 5f1d854ebe..a61ee158ac 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections.ts
@@ -43,13 +43,12 @@ export function useBlockConnections(blockId: string) {
   )
 
   const workflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-  const workflowSubBlockValues = useSubBlockStore((state) =>
-    workflowId ? (state.workflowValues[workflowId] ?? {}) : {}
-  )
 
-  // Helper function to merge block subBlocks with live values from subblock store
   const getMergedSubBlocks = (sourceBlockId: string): Record<string, any> => {
     const base = blocks[sourceBlockId]?.subBlocks || {}
+    const workflowSubBlockValues = workflowId
+      ? (useSubBlockStore.getState().workflowValues[workflowId] ?? {})
+      : {}
     const live = workflowSubBlockValues?.[sourceBlockId] || {}
     const merged: Record<string, any> = { ...base }
     for (const [subId, liveVal] of Object.entries(live)) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-connections-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-connections-resize.ts
index ea9185f30f..957b0fd506 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-connections-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-connections-resize.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { usePanelEditorStore } from '@/stores/panel'
 
 /**
@@ -27,7 +28,12 @@ interface UseConnectionsResizeProps {
  * @returns Object containing resize handler
  */
 export function useConnectionsResize({ subBlocksRef }: UseConnectionsResizeProps) {
-  const { connectionsHeight, setConnectionsHeight } = usePanelEditorStore()
+  const { connectionsHeight, setConnectionsHeight } = usePanelEditorStore(
+    useShallow((state) => ({
+      connectionsHeight: state.connectionsHeight,
+      setConnectionsHeight: state.setConnectionsHeight,
+    }))
+  )
 
   const [isResizing, setIsResizing] = useState(false)
   const startYRef = useRef<number>(0)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-block-properties.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-block-properties.ts
index 27539b331f..64f38b213a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-block-properties.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-block-properties.ts
@@ -1,4 +1,5 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
+import { shallow } from 'zustand/shallow'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
@@ -11,27 +12,36 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
  * @returns Block display properties (advanced mode, trigger mode)
  */
 export function useEditorBlockProperties(blockId: string | null, isSnapshotView: boolean) {
-  const normalBlocks = useWorkflowStore(useCallback((state) => state.blocks, []))
-  const baselineBlocks = useWorkflowDiffStore(
-    useCallback((state) => state.baselineWorkflow?.blocks || {}, [])
+  const normalBlockProps = useWorkflowStore(
+    useCallback(
+      (state) => {
+        if (!blockId) return { advancedMode: false, triggerMode: false }
+        const block = state.blocks?.[blockId]
+        return {
+          advancedMode: block?.advancedMode ?? false,
+          triggerMode: block?.triggerMode ?? false,
+        }
+      },
+      [blockId]
+    ),
+    shallow
   )
 
-  const blockProperties = useMemo(() => {
-    if (!blockId) {
-      return {
-        advancedMode: false,
-        triggerMode: false,
-      }
-    }
-
-    const blocks = isSnapshotView ? baselineBlocks : normalBlocks
-    const block = blocks?.[blockId]
-
-    return {
-      advancedMode: block?.advancedMode ?? false,
-      triggerMode: block?.triggerMode ?? false,
-    }
-  }, [blockId, isSnapshotView, normalBlocks, baselineBlocks])
+  const baselineBlockProps = useWorkflowDiffStore(
+    useCallback(
+      (state) => {
+        if (!blockId) return { advancedMode: false, triggerMode: false }
+        const block = state.baselineWorkflow?.blocks?.[blockId]
+        return {
+          advancedMode: block?.advancedMode ?? false,
+          triggerMode: block?.triggerMode ?? false,
+        }
+      },
+      [blockId]
+    ),
+    shallow
+  )
 
-  return blockProperties
+  // Use the appropriate props based on view mode
+  return isSnapshotView ? baselineBlockProps : normalBlockProps
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-subflow-editor.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-subflow-editor.ts
index 3c3b0ecf82..6945386872 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-subflow-editor.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-subflow-editor.ts
@@ -53,22 +53,27 @@ const SUBFLOW_CONFIG = {
  * @returns Subflow editor state and handlers
  */
 export function useSubflowEditor(currentBlock: BlockState | null, currentBlockId: string | null) {
-  const workflowStore = useWorkflowStore()
   const textareaRef = useRef<HTMLTextAreaElement | null>(null)
   const editorContainerRef = useRef<HTMLDivElement>(null)
 
-  // State
   const [tempInputValue, setTempInputValue] = useState<string | null>(null)
   const [showTagDropdown, setShowTagDropdown] = useState(false)
   const [cursorPosition, setCursorPosition] = useState(0)
 
-  // Check if current block is a subflow
   const isSubflow =
     currentBlock && (currentBlock.type === 'loop' || currentBlock.type === 'parallel')
 
-  // Get subflow configuration
   const subflowConfig = isSubflow ? SUBFLOW_CONFIG[currentBlock.type as 'loop' | 'parallel'] : null
-  const nodeConfig = isSubflow ? workflowStore[subflowConfig!.storeKey][currentBlockId!] : null
+
+  const nodeConfig = useWorkflowStore(
+    useCallback(
+      (state) => {
+        if (!isSubflow || !subflowConfig || !currentBlockId) return null
+        return state[subflowConfig.storeKey][currentBlockId] ?? null
+      },
+      [isSubflow, subflowConfig, currentBlockId]
+    )
+  )
 
   // Get block data for fallback values
   const blockData = isSubflow ? currentBlock?.data : null
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 76637a7fcb..365379854a 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,6 +2,7 @@
 
 import {
   forwardRef,
+  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -39,22 +40,133 @@ interface BlockItem {
   docsLink?: string
 }
 
+interface ToolbarItemProps {
+  item: BlockItem
+  isTrigger: boolean
+  onDragStart: (
+    e: React.DragEvent<HTMLElement>,
+    type: string,
+    enableTriggerMode: boolean,
+    dragItemInfo?: { name: string; bgColor: string; iconElement: HTMLElement | null }
+  ) => void
+  onClick: (type: string, enableTriggerMode: boolean) => void
+  onContextMenu: (e: React.MouseEvent, type: string, isTrigger: boolean, docsLink?: string) => void
+  itemRef: (el: HTMLDivElement | null) => void
+}
+
+const ToolbarItem = memo(function ToolbarItem({
+  item,
+  isTrigger,
+  onDragStart,
+  onClick,
+  onContextMenu,
+  itemRef,
+}: ToolbarItemProps) {
+  const Icon = item.icon
+  const isTriggerCapable = isTrigger && item.config ? hasTriggerCapability(item.config) : false
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent<HTMLElement>) => {
+      if (!isTrigger && (item.type === 'loop' || item.type === 'parallel')) {
+        document.body.classList.add('sim-drag-subflow')
+      }
+      const iconElement = e.currentTarget.querySelector('.toolbar-item-icon')
+      onDragStart(e, item.type, isTriggerCapable, {
+        name: item.name,
+        bgColor: item.bgColor ?? '#666666',
+        iconElement: iconElement as HTMLElement | null,
+      })
+    },
+    [item.type, item.name, item.bgColor, isTriggerCapable, onDragStart, isTrigger]
+  )
+
+  const handleDragEnd = useCallback(() => {
+    if (!isTrigger) {
+      document.body.classList.remove('sim-drag-subflow')
+    }
+  }, [isTrigger])
+
+  const handleClick = useCallback(() => {
+    onClick(item.type, isTriggerCapable)
+  }, [item.type, isTriggerCapable, onClick])
+
+  const handleContextMenu = useCallback(
+    (e: React.MouseEvent) => {
+      onContextMenu(e, item.type, isTrigger, item.docsLink ?? item.config?.docsLink)
+    },
+    [item, isTrigger, onContextMenu]
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        event.stopPropagation()
+        onClick(item.type, isTriggerCapable)
+      }
+    },
+    [item.type, isTriggerCapable, onClick]
+  )
+
+  return (
+    <div
+      ref={itemRef}
+      tabIndex={-1}
+      draggable
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+      className={clsx(
+        'group flex h-[28px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]',
+        'cursor-pointer hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
+        'focus-visible:bg-[var(--surface-6)] focus-visible:outline-none dark:focus-visible:bg-[var(--surface-5)]'
+      )}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+        style={{ background: item.bgColor }}
+      >
+        {Icon && (
+          <Icon
+            className={clsx(
+              'toolbar-item-icon text-white transition-transform duration-200',
+              'group-hover:scale-110',
+              '!h-[10px] !w-[10px]'
+            )}
+          />
+        )}
+      </div>
+      <span
+        className={clsx(
+          'truncate font-medium',
+          'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
+          'group-focus-visible:text-[var(--text-primary)]'
+        )}
+      >
+        {item.name}
+      </span>
+    </div>
+  )
+})
+
 /**
  * Cached triggers data - lazy initialized on first access (client-side only)
  */
-let cachedTriggers: ReturnType<typeof getTriggersForSidebar> | null = null
+let cachedTriggers: BlockItem[] | null = null
 
 /**
  * Gets triggers data, computing it once and caching for subsequent calls.
  * Non-integration triggers (Start, Schedule, Webhook) are prioritized first,
  * followed by all other triggers sorted alphabetically.
  */
-function getTriggers() {
+function getTriggers(): BlockItem[] {
   if (cachedTriggers === null) {
     const allTriggers = getTriggersForSidebar()
     const priorityOrder = ['Start', 'Schedule', 'Webhook']
 
-    cachedTriggers = allTriggers.sort((a, b) => {
+    const sortedTriggers = allTriggers.sort((a, b) => {
       const aIndex = priorityOrder.indexOf(a.name)
       const bIndex = priorityOrder.indexOf(b.name)
       const aHasPriority = aIndex !== -1
@@ -65,6 +177,16 @@ function getTriggers() {
       if (bHasPriority) return 1
       return a.name.localeCompare(b.name)
     })
+
+    cachedTriggers = sortedTriggers.map((trigger) => ({
+      name: trigger.name,
+      type: trigger.type,
+      config: trigger,
+      icon: trigger.icon,
+      bgColor: trigger.bgColor,
+      docsLink: trigger.docsLink,
+      isSpecial: false,
+    }))
   }
   return cachedTriggers
 }
@@ -163,636 +285,542 @@ export interface ToolbarRef {
  */
 const TRIGGERS_MIN_THRESHOLD = 50
 
-export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
-  { isActive = true }: ToolbarProps,
-  ref
-) {
-  const rootRef = useRef<HTMLDivElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const triggersContentRef = useRef<HTMLDivElement>(null)
-  const triggersHeaderRef = useRef<HTMLDivElement>(null)
-  const blocksHeaderRef = useRef<HTMLDivElement>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
-  const triggerItemRefs = useRef<Array<HTMLDivElement | null>>([])
-  const blockItemRefs = useRef<Array<HTMLDivElement | null>>([])
-
-  // Search state
-  const [isSearchActive, setIsSearchActive] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
-
-  // Toggle animation state
-  const [isToggling, setIsToggling] = useState(false)
-
-  // Context menu state
-  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
-  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)
-
-  // Toolbar store
-  const { toolbarTriggersHeight, setToolbarTriggersHeight, preSearchHeight, setPreSearchHeight } =
-    useToolbarStore()
-
-  // Toolbar item interactions hook
-  const { handleDragStart, handleItemClick } = useToolbarItemInteractions({ disabled: false })
-
-  // Toolbar resize hook
-  const { handleMouseDown, isResizing } = useToolbarResize({
-    containerRef,
-    triggersContentRef,
-    triggersHeaderRef,
-  })
+export const Toolbar = memo(
+  forwardRef<ToolbarRef, ToolbarProps>(function Toolbar({ isActive = true }: ToolbarProps, ref) {
+    const rootRef = useRef<HTMLDivElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const triggersContentRef = useRef<HTMLDivElement>(null)
+    const triggersHeaderRef = useRef<HTMLDivElement>(null)
+    const blocksHeaderRef = useRef<HTMLDivElement>(null)
+    const searchInputRef = useRef<HTMLInputElement>(null)
+    const triggerItemRefs = useRef<Array<HTMLDivElement | null>>([])
+    const blockItemRefs = useRef<Array<HTMLDivElement | null>>([])
+
+    const triggerRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
+    const blockRefCallbacks = 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]
+    }, [])
 
-  // Permission config for filtering
-  const { filterBlocks } = usePermissionConfig()
+    const getBlockRefCallback = useCallback((index: number) => {
+      if (!blockRefCallbacks.current[index]) {
+        blockRefCallbacks.current[index] = (el) => {
+          blockItemRefs.current[index] = el
+        }
+      }
+      return blockRefCallbacks.current[index]
+    }, [])
+
+    // Search state
+    const [isSearchActive, setIsSearchActive] = useState(false)
+    const [searchQuery, setSearchQuery] = useState('')
+
+    // Toggle animation state
+    const [isToggling, setIsToggling] = useState(false)
+
+    // Context menu state
+    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
+    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 toolbarTriggersHeight = useToolbarStore((state) => state.toolbarTriggersHeight)
+    const setToolbarTriggersHeight = useToolbarStore((state) => state.setToolbarTriggersHeight)
+    const preSearchHeight = useToolbarStore((state) => state.preSearchHeight)
+    const setPreSearchHeight = useToolbarStore((state) => state.setPreSearchHeight)
+
+    const toolbarInteractionsConfig = useMemo(() => ({ disabled: false }), [])
+    const { handleDragStart, handleItemClick } =
+      useToolbarItemInteractions(toolbarInteractionsConfig)
+
+    const { handleMouseDown, isResizing } = useToolbarResize({
+      containerRef,
+      triggersContentRef,
+      triggersHeaderRef,
+    })
 
-  // Get static data (computed once and cached)
-  const allTriggers = getTriggers()
-  const allBlocks = getBlocks()
+    const { filterBlocks } = usePermissionConfig()
 
-  // Apply permission-based filtering to blocks and triggers
-  const blocks = useMemo(() => filterBlocks(allBlocks), [filterBlocks, allBlocks])
-  const triggers = useMemo(() => filterBlocks(allTriggers), [filterBlocks, allTriggers])
+    const allTriggers = getTriggers()
+    const allBlocks = getBlocks()
 
-  // Determine if triggers are at minimum height (blocks are fully expanded)
-  const isTriggersAtMinimum = toolbarTriggersHeight <= TRIGGERS_MIN_THRESHOLD
+    const blocks = useMemo(() => filterBlocks(allBlocks), [filterBlocks, allBlocks])
+    const triggers = useMemo(() => filterBlocks(allTriggers), [filterBlocks, allTriggers])
 
-  /**
-   * Clear search when tab becomes inactive
-   */
-  useEffect(() => {
-    if (!isActive) {
-      setIsSearchActive(false)
-      setSearchQuery('')
-    }
-  }, [isActive])
+    const isTriggersAtMinimum = toolbarTriggersHeight <= TRIGGERS_MIN_THRESHOLD
 
-  /**
-   * Filter items based on search query
-   */
-  const filteredTriggers = useMemo(() => {
-    if (!searchQuery.trim()) return triggers
-    const query = searchQuery.toLowerCase()
-    return triggers.filter((trigger) => trigger.name.toLowerCase().includes(query))
-  }, [triggers, searchQuery])
-
-  const filteredBlocks = useMemo(() => {
-    if (!searchQuery.trim()) return blocks
-    const query = searchQuery.toLowerCase()
-    return blocks.filter((block) => block.name.toLowerCase().includes(query))
-  }, [blocks, searchQuery])
+    /**
+     * Clear search when tab becomes inactive
+     */
+    useEffect(() => {
+      if (!isActive) {
+        setIsSearchActive(false)
+        setSearchQuery('')
+      }
+    }, [isActive])
+
+    /**
+     * Filter items based on search query
+     */
+    const filteredTriggers = useMemo(() => {
+      if (!searchQuery.trim()) return triggers
+      const query = searchQuery.toLowerCase()
+      return triggers.filter((trigger) => trigger.name.toLowerCase().includes(query))
+    }, [triggers, searchQuery])
+
+    const filteredBlocks = useMemo(() => {
+      if (!searchQuery.trim()) return blocks
+      const query = searchQuery.toLowerCase()
+      return blocks.filter((block) => block.name.toLowerCase().includes(query))
+    }, [blocks, searchQuery])
+
+    /**
+     * Track pre-search height in a ref to avoid cascading re-renders.
+     * The store's preSearchHeight is still used for persistence, but we use
+     * this ref to prevent the effect from re-running when we update it.
+     */
+    const preSearchHeightRef = useRef(preSearchHeight)
+    preSearchHeightRef.current = preSearchHeight
+
+    /**
+     * Adjust heights based on search results
+     * - If no triggers found, collapse triggers to minimum (expand blocks)
+     * - If no blocks found, expand triggers to maximum (collapse blocks)
+     * - If triggers are found, dynamically resize to show all filtered triggers without scrolling
+     */
+    useEffect(() => {
+      const hasSearchQuery = searchQuery.trim().length > 0
+      const triggersCount = filteredTriggers.length
+      const blocksCount = filteredBlocks.length
+
+      if (hasSearchQuery && preSearchHeightRef.current === null) {
+        setPreSearchHeight(toolbarTriggersHeight)
+        return
+      }
 
-  /**
-   * Adjust heights based on search results
-   * - If no triggers found, collapse triggers to minimum (expand blocks)
-   * - If no blocks found, expand triggers to maximum (collapse blocks)
-   * - If triggers are found, dynamically resize to show all filtered triggers without scrolling
-   */
-  useEffect(() => {
-    const hasSearchQuery = searchQuery.trim().length > 0
-    const triggersCount = filteredTriggers.length
-    const blocksCount = filteredBlocks.length
-
-    // Save pre-search height when search starts
-    if (hasSearchQuery && preSearchHeight === null) {
-      setPreSearchHeight(toolbarTriggersHeight)
+      if (!hasSearchQuery && preSearchHeightRef.current !== null) {
+        const heightToRestore = preSearchHeightRef.current
+        setPreSearchHeight(null)
+        setToolbarTriggersHeight(heightToRestore)
+        return
+      }
+
+      if (hasSearchQuery) {
+        const { minHeight, maxHeight, optimalHeight } = calculateTriggerHeights(
+          containerRef,
+          triggersContentRef,
+          triggersHeaderRef
+        )
+
+        if (triggersCount === 0 && blocksCount > 0) {
+          setToolbarTriggersHeight(minHeight)
+        } else if (blocksCount === 0 && triggersCount > 0) {
+          setToolbarTriggersHeight(maxHeight)
+        } else if (triggersCount > 0) {
+          setToolbarTriggersHeight(optimalHeight)
+        }
+      }
+    }, [
+      searchQuery,
+      filteredTriggers.length,
+      filteredBlocks.length,
+      toolbarTriggersHeight,
+      setToolbarTriggersHeight,
+      setPreSearchHeight,
+    ])
+
+    /**
+     * Handle search icon click to activate search mode
+     */
+    const handleSearchClick = () => {
+      setIsSearchActive(true)
+      setTimeout(() => {
+        searchInputRef.current?.focus()
+      }, 0)
     }
 
-    // Restore pre-search height when search is cleared
-    if (!hasSearchQuery && preSearchHeight !== null) {
-      setToolbarTriggersHeight(preSearchHeight)
-      setPreSearchHeight(null)
-      return
+    /**
+     * Expose imperative handle for focusing the search input.
+     */
+    useImperativeHandle(
+      ref,
+      () => ({
+        focusSearch: () => {
+          setIsSearchActive(true)
+          setTimeout(() => {
+            searchInputRef.current?.focus()
+          }, 0)
+        },
+      }),
+      []
+    )
+
+    /**
+     * 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 triggers/blocks list (e.g. when initiated via Mod+F).
+     */
+    const handleSearchBlur = () => {
+      if (!searchQuery.trim()) {
+        setIsSearchActive(false)
+      }
     }
 
-    // Adjust heights based on search results
-    if (hasSearchQuery) {
-      const { minHeight, maxHeight, optimalHeight } = calculateTriggerHeights(
+    /**
+     * Handle blocks header click - toggle between min and max.
+     * If triggers are greater than minimum, collapse to minimum (just header).
+     * If triggers are at minimum, expand to maximum (full content height).
+     */
+    const handleBlocksHeaderClick = useCallback(() => {
+      setIsToggling(true)
+
+      const { minHeight, maxHeight } = calculateTriggerHeights(
         containerRef,
         triggersContentRef,
         triggersHeaderRef
       )
 
-      if (triggersCount === 0 && blocksCount > 0) {
-        // No triggers found - collapse triggers to minimum (expand blocks)
-        setToolbarTriggersHeight(minHeight)
-      } else if (blocksCount === 0 && triggersCount > 0) {
-        // No blocks found - expand triggers to maximum (collapse blocks)
-        setToolbarTriggersHeight(maxHeight)
-      } else if (triggersCount > 0) {
-        // Triggers are present - use optimal height to show all filtered triggers
-        setToolbarTriggersHeight(optimalHeight)
-      }
-    }
-  }, [
-    searchQuery,
-    filteredTriggers.length,
-    filteredBlocks.length,
-    preSearchHeight,
-    toolbarTriggersHeight,
-    setToolbarTriggersHeight,
-    setPreSearchHeight,
-  ])
-
-  /**
-   * Handle search icon click to activate search mode
-   */
-  const handleSearchClick = () => {
-    setIsSearchActive(true)
-    setTimeout(() => {
-      searchInputRef.current?.focus()
-    }, 0)
-  }
-
-  /**
-   * Expose imperative handle for focusing the search input.
-   */
-  useImperativeHandle(
-    ref,
-    () => ({
-      focusSearch: () => {
-        setIsSearchActive(true)
-        setTimeout(() => {
-          searchInputRef.current?.focus()
-        }, 0)
+      // Toggle between min and max
+      setToolbarTriggersHeight(isTriggersAtMinimum ? maxHeight : minHeight)
+    }, [isTriggersAtMinimum, setToolbarTriggersHeight])
+
+    /**
+     * Handle transition end - reset toggling state
+     */
+    const handleTransitionEnd = useCallback(() => {
+      setIsToggling(false)
+    }, [])
+
+    /**
+     * Handle context menu for toolbar items
+     */
+    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 })
+        setIsContextMenuOpen(true)
       },
-    }),
-    []
-  )
-
-  /**
-   * 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 triggers/blocks list (e.g. when initiated via Mod+F).
-   */
-  const handleSearchBlur = () => {
-    if (!searchQuery.trim()) {
-      setIsSearchActive(false)
-    }
-  }
-
-  /**
-   * Handle blocks header click - toggle between min and max.
-   * If triggers are greater than minimum, collapse to minimum (just header).
-   * If triggers are at minimum, expand to maximum (full content height).
-   */
-  const handleBlocksHeaderClick = useCallback(() => {
-    setIsToggling(true)
-
-    const { minHeight, maxHeight } = calculateTriggerHeights(
-      containerRef,
-      triggersContentRef,
-      triggersHeaderRef
+      []
     )
 
-    // Toggle between min and max
-    setToolbarTriggersHeight(isTriggersAtMinimum ? maxHeight : minHeight)
-  }, [isTriggersAtMinimum, setToolbarTriggersHeight])
-
-  /**
-   * Handle transition end - reset toggling state
-   */
-  const handleTransitionEnd = useCallback(() => {
-    setIsToggling(false)
-  }, [])
-
-  /**
-   * Handle context menu for toolbar items
-   */
-  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 })
-      setIsContextMenuOpen(true)
-    },
-    []
-  )
-
-  /**
-   * Close context menu and clear active item state
-   */
-  const closeContextMenu = useCallback(() => {
-    setIsContextMenuOpen(false)
-    setActiveItemInfo(null)
-  }, [])
-
-  /**
-   * Handle add to canvas from context menu
-   */
-  const handleContextMenuAddToCanvas = useCallback(() => {
-    if (activeItemInfo) {
-      handleItemClick(activeItemInfo.type, activeItemInfo.isTrigger)
-    }
-  }, [activeItemInfo, handleItemClick])
-
-  /**
-   * Handle view documentation from context menu
-   */
-  const handleViewDocumentation = useCallback(() => {
-    if (activeItemInfo?.docsLink) {
-      window.open(activeItemInfo.docsLink, '_blank', 'noopener,noreferrer')
-    }
-  }, [activeItemInfo])
-
-  /**
-   * Handle clicks outside the context menu to close it
-   */
-  useEffect(() => {
-    if (!isContextMenuOpen) return
-
-    const handleClickOutside = (e: MouseEvent) => {
-      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
-        closeContextMenu()
+    /**
+     * Close context menu and clear active item state
+     */
+    const closeContextMenu = useCallback(() => {
+      setIsContextMenuOpen(false)
+      setActiveItemInfo(null)
+    }, [])
+
+    /**
+     * Handle add to canvas from context menu
+     */
+    const handleContextMenuAddToCanvas = useCallback(() => {
+      if (activeItemInfo) {
+        handleItemClick(activeItemInfo.type, activeItemInfo.isTrigger)
       }
-    }
-
-    const timeoutId = setTimeout(() => {
-      document.addEventListener('click', handleClickOutside)
-    }, 0)
-
-    return () => {
-      clearTimeout(timeoutId)
-      document.removeEventListener('click', handleClickOutside)
-    }
-  }, [isContextMenuOpen, closeContextMenu])
+    }, [activeItemInfo, handleItemClick])
+
+    /**
+     * Handle view documentation from context menu
+     */
+    const handleViewDocumentation = useCallback(() => {
+      if (activeItemInfo?.docsLink) {
+        window.open(activeItemInfo.docsLink, '_blank', 'noopener,noreferrer')
+      }
+    }, [activeItemInfo])
 
-  /**
-   * Handle keyboard navigation with ArrowUp / ArrowDown when the toolbar tab
-   * is active and search is open (e.g. after Mod+F). Navigation order:
-   * - From search input or no current focus: first trigger, then subsequent triggers
-   * - After the last trigger: first block
-   * - Within blocks: linear navigation
-   * - ArrowUp from first trigger: moves focus back to search input
-   *
-   * This is designed to work seamlessly when the toolbar is opened via the
-   * Mod+F shortcut, and to take precedence over other global ArrowUp/Down
-   * handlers (e.g. terminal navigation) while the toolbar tab is active.
-   */
-  useEffect(() => {
-    if (!isActive || !isSearchActive) {
-      return
-    }
+    /**
+     * Handle clicks outside the context menu to close it
+     */
+    useEffect(() => {
+      if (!isContextMenuOpen) return
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
-        return
+      const handleClickOutside = (e: MouseEvent) => {
+        if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+          closeContextMenu()
+        }
       }
 
-      const activeEl = document.activeElement as HTMLElement | null
+      const timeoutId = setTimeout(() => {
+        document.addEventListener('click', handleClickOutside)
+      }, 0)
 
-      // Only handle navigation when focus is currently inside the toolbar UI
-      const toolbarRoot = rootRef.current
-      if (!toolbarRoot || !activeEl || !toolbarRoot.contains(activeEl)) {
+      return () => {
+        clearTimeout(timeoutId)
+        document.removeEventListener('click', handleClickOutside)
+      }
+    }, [isContextMenuOpen, closeContextMenu])
+
+    /**
+     * Handle keyboard navigation with ArrowUp / ArrowDown when the toolbar tab
+     * is active and search is open (e.g. after Mod+F). Navigation order:
+     * - From search input or no current focus: first trigger, then subsequent triggers
+     * - After the last trigger: first block
+     * - Within blocks: linear navigation
+     * - ArrowUp from first trigger: moves focus back to search input
+     *
+     * This is designed to work seamlessly when the toolbar is opened via the
+     * Mod+F shortcut, and to take precedence over other global ArrowUp/Down
+     * handlers (e.g. terminal navigation) while the toolbar tab is active.
+     */
+    useEffect(() => {
+      if (!isActive || !isSearchActive) {
         return
       }
 
-      const triggers = triggerItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
-      const blocks = blockItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
-
-      type Region = 'search' | 'trigger' | 'block' | 'none'
-      let region: Region = 'none'
-      let index = -1
-
-      if (activeEl && searchInputRef.current && activeEl === searchInputRef.current) {
-        region = 'search'
-      } else if (activeEl) {
-        const triggerIndex = triggers.findIndex((el) => el === activeEl || el.contains(activeEl))
-        if (triggerIndex !== -1) {
-          region = 'trigger'
-          index = triggerIndex
-        } else {
-          const blockIndex = blocks.findIndex((el) => el === activeEl || el.contains(activeEl))
-          if (blockIndex !== -1) {
-            region = 'block'
-            index = blockIndex
-          }
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+          return
         }
-      }
 
-      const focusTrigger = (i: number) => {
-        const el = triggers[i]
-        if (el) {
-          event.preventDefault()
-          event.stopPropagation()
-          el.focus()
-        }
-      }
+        const activeEl = document.activeElement as HTMLElement | null
 
-      const focusBlock = (i: number) => {
-        const el = blocks[i]
-        if (el) {
-          event.preventDefault()
-          event.stopPropagation()
-          el.focus()
+        // Only handle navigation when focus is currently inside the toolbar UI
+        const toolbarRoot = rootRef.current
+        if (!toolbarRoot || !activeEl || !toolbarRoot.contains(activeEl)) {
+          return
         }
-      }
 
-      const focusSearchInput = () => {
-        if (searchInputRef.current) {
-          event.preventDefault()
-          event.stopPropagation()
-          searchInputRef.current.focus()
+        const triggers = triggerItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
+        const blocks = blockItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
+
+        type Region = 'search' | 'trigger' | 'block' | 'none'
+        let region: Region = 'none'
+        let index = -1
+
+        if (activeEl && searchInputRef.current && activeEl === searchInputRef.current) {
+          region = 'search'
+        } else if (activeEl) {
+          const triggerIndex = triggers.findIndex((el) => el === activeEl || el.contains(activeEl))
+          if (triggerIndex !== -1) {
+            region = 'trigger'
+            index = triggerIndex
+          } else {
+            const blockIndex = blocks.findIndex((el) => el === activeEl || el.contains(activeEl))
+            if (blockIndex !== -1) {
+              region = 'block'
+              index = blockIndex
+            }
+          }
         }
-      }
 
-      if (event.key === 'ArrowDown') {
-        if (region === 'none' || region === 'search') {
-          if (triggers.length > 0) {
-            focusTrigger(0)
-            return
-          }
-          if (blocks.length > 0) {
-            focusBlock(0)
+        const focusTrigger = (i: number) => {
+          const el = triggers[i]
+          if (el) {
+            event.preventDefault()
+            event.stopPropagation()
+            el.focus()
           }
-          return
         }
 
-        if (region === 'trigger') {
-          if (index < triggers.length - 1) {
-            focusTrigger(index + 1)
-            return
-          }
-          if (index === triggers.length - 1 && blocks.length > 0) {
-            focusBlock(0)
+        const focusBlock = (i: number) => {
+          const el = blocks[i]
+          if (el) {
+            event.preventDefault()
+            event.stopPropagation()
+            el.focus()
           }
-          return
         }
 
-        if (region === 'block') {
-          if (index < blocks.length - 1) {
-            focusBlock(index + 1)
+        const focusSearchInput = () => {
+          if (searchInputRef.current) {
+            event.preventDefault()
+            event.stopPropagation()
+            searchInputRef.current.focus()
           }
-          return
         }
-      } else if (event.key === 'ArrowUp') {
-        if (region === 'block') {
-          if (index > 0) {
-            focusBlock(index - 1)
+
+        if (event.key === 'ArrowDown') {
+          if (region === 'none' || region === 'search') {
+            if (triggers.length > 0) {
+              focusTrigger(0)
+              return
+            }
+            if (blocks.length > 0) {
+              focusBlock(0)
+            }
             return
           }
-          if (index === 0 && triggers.length > 0) {
-            focusTrigger(triggers.length - 1)
+
+          if (region === 'trigger') {
+            if (index < triggers.length - 1) {
+              focusTrigger(index + 1)
+              return
+            }
+            if (index === triggers.length - 1 && blocks.length > 0) {
+              focusBlock(0)
+            }
+            return
           }
-          return
-        }
 
-        if (region === 'trigger') {
-          if (index > 0) {
-            focusTrigger(index - 1)
+          if (region === 'block') {
+            if (index < blocks.length - 1) {
+              focusBlock(index + 1)
+            }
             return
           }
-          if (index === 0) {
-            focusSearchInput()
+        } else if (event.key === 'ArrowUp') {
+          if (region === 'block') {
+            if (index > 0) {
+              focusBlock(index - 1)
+              return
+            }
+            if (index === 0 && triggers.length > 0) {
+              focusTrigger(triggers.length - 1)
+            }
+            return
           }
-          return
-        }
 
-        if (region === 'none' || region === 'search') {
-          return
+          if (region === 'trigger') {
+            if (index > 0) {
+              focusTrigger(index - 1)
+              return
+            }
+            if (index === 0) {
+              focusSearchInput()
+            }
+            return
+          }
+
+          if (region === 'none' || region === 'search') {
+            return
+          }
         }
       }
-    }
 
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isActive, isSearchActive])
+      window.addEventListener('keydown', handleKeyDown)
+      return () => window.removeEventListener('keydown', handleKeyDown)
+    }, [isActive, isSearchActive])
 
-  return (
-    <div
-      ref={rootRef}
-      data-toolbar-root
-      data-search-active={isSearchActive ? 'true' : 'false'}
-      className='flex h-full flex-col'
-    >
-      {/* Header */}
+    return (
       <div
-        className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'
-        onClick={handleSearchClick}
+        ref={rootRef}
+        data-toolbar-root
+        data-search-active={isSearchActive ? 'true' : 'false'}
+        className='flex h-full flex-col'
       >
-        <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Toolbar</h2>
-        <div className='flex shrink-0 items-center gap-[8px]'>
-          {!isSearchActive ? (
-            <Button
-              variant='ghost'
-              className='p-0'
-              aria-label='Search toolbar'
-              onClick={handleSearchClick}
-            >
-              <Search className='h-[14px] w-[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-[2px] text-right font-medium text-[13px] text-[var(--text-primary)] placeholder:text-[#737373] focus:outline-none'
-            />
-          )}
-        </div>
-      </div>
-
-      <div ref={containerRef} className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
-        {/* Triggers Section */}
+        {/* Header */}
         <div
-          className={clsx(
-            'triggers-section flex flex-col overflow-hidden',
-            isToggling && !isResizing && 'transition-100ms transition-[height]'
-          )}
-          style={{ height: 'var(--toolbar-triggers-height)' }}
-          onTransitionEnd={handleTransitionEnd}
+          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'
+          onClick={handleSearchClick}
         >
+          <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Toolbar</h2>
+          <div className='flex shrink-0 items-center gap-[8px]'>
+            {!isSearchActive ? (
+              <Button
+                variant='ghost'
+                className='p-0'
+                aria-label='Search toolbar'
+                onClick={handleSearchClick}
+              >
+                <Search className='h-[14px] w-[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-[2px] text-right font-medium text-[13px] text-[var(--text-primary)] placeholder:text-[#737373] focus:outline-none'
+              />
+            )}
+          </div>
+        </div>
+
+        <div ref={containerRef} className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
+          {/* Triggers Section */}
           <div
-            ref={triggersHeaderRef}
-            className='px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
+            className={clsx(
+              'triggers-section flex flex-col overflow-hidden',
+              isToggling && !isResizing && 'transition-100ms transition-[height]'
+            )}
+            style={{ height: 'var(--toolbar-triggers-height)' }}
+            onTransitionEnd={handleTransitionEnd}
           >
-            Triggers
-          </div>
-          <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
-            <div ref={triggersContentRef} className='space-y-[2px] pb-[8px]'>
-              {filteredTriggers.map((trigger, index) => {
-                const Icon = trigger.icon
-                const isTriggerCapable = hasTriggerCapability(trigger)
-                return (
-                  <div
-                    ref={(el) => {
-                      triggerItemRefs.current[index] = el
-                    }}
+            <div
+              ref={triggersHeaderRef}
+              className='px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
+            >
+              Triggers
+            </div>
+            <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
+              <div ref={triggersContentRef} className='space-y-[2px] pb-[8px]'>
+                {filteredTriggers.map((trigger, index) => (
+                  <ToolbarItem
                     key={trigger.type}
-                    tabIndex={-1}
-                    draggable
-                    onDragStart={(e) => {
-                      const iconElement = e.currentTarget.querySelector('.toolbar-item-icon')
-                      handleDragStart(e, trigger.type, isTriggerCapable, {
-                        name: trigger.name,
-                        bgColor: trigger.bgColor,
-                        iconElement: iconElement as HTMLElement | null,
-                      })
-                    }}
-                    onClick={() => handleItemClick(trigger.type, isTriggerCapable)}
-                    onContextMenu={(e) =>
-                      handleItemContextMenu(e, trigger.type, isTriggerCapable, trigger.docsLink)
-                    }
-                    className={clsx(
-                      'group flex h-[28px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
-                      'focus-visible:bg-[var(--surface-6)] focus-visible:outline-none dark:focus-visible:bg-[var(--surface-5)]'
-                    )}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
-                        event.preventDefault()
-                        event.stopPropagation()
-                        handleItemClick(trigger.type, isTriggerCapable)
-                      }
-                    }}
-                  >
-                    <div
-                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
-                      style={{ background: trigger.bgColor }}
-                    >
-                      {Icon && (
-                        <Icon
-                          className={clsx(
-                            'toolbar-item-icon text-white transition-transform duration-200',
-                            'group-hover:scale-110',
-                            '!h-[10px] !w-[10px]'
-                          )}
-                        />
-                      )}
-                    </div>
-                    <span
-                      className={clsx(
-                        'truncate font-medium',
-                        'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
-                        'group-focus-visible:text-[var(--text-primary)]'
-                      )}
-                    >
-                      {trigger.name}
-                    </span>
-                  </div>
-                )
-              })}
+                    item={trigger}
+                    isTrigger={true}
+                    onDragStart={handleDragStart}
+                    onClick={handleItemClick}
+                    onContextMenu={handleItemContextMenu}
+                    itemRef={getTriggerRefCallback(index)}
+                  />
+                ))}
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Resize Handle */}
-        <div className='relative flex-shrink-0 border-[var(--border)] border-t'>
-          <div
-            className='absolute top-[-4px] right-0 left-0 z-30 h-[8px] cursor-ns-resize'
-            onMouseDown={handleMouseDown}
-          />
-        </div>
-
-        {/* Blocks Section */}
-        <div className='blocks-section flex flex-1 flex-col overflow-hidden'>
-          <div
-            ref={blocksHeaderRef}
-            onClick={handleBlocksHeaderClick}
-            className='cursor-pointer px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
-          >
-            Blocks
+          {/* Resize Handle */}
+          <div className='relative flex-shrink-0 border-[var(--border)] border-t'>
+            <div
+              className='absolute top-[-4px] right-0 left-0 z-30 h-[8px] cursor-ns-resize'
+              onMouseDown={handleMouseDown}
+            />
           </div>
-          <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
-            <div className='space-y-[2px] pb-[8px]'>
-              {filteredBlocks.map((block, index) => {
-                const Icon = block.icon
-                return (
-                  <div
-                    ref={(el) => {
-                      blockItemRefs.current[index] = el
-                    }}
+
+          {/* Blocks Section */}
+          <div className='blocks-section flex flex-1 flex-col overflow-hidden'>
+            <div
+              ref={blocksHeaderRef}
+              onClick={handleBlocksHeaderClick}
+              className='cursor-pointer px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
+            >
+              Blocks
+            </div>
+            <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
+              <div className='space-y-[2px] pb-[8px]'>
+                {filteredBlocks.map((block, index) => (
+                  <ToolbarItem
                     key={block.type}
-                    tabIndex={-1}
-                    draggable
-                    onDragStart={(e) => {
-                      // Mark subflow drag explicitly so canvas can reliably detect and suppress highlight
-                      if (block.type === 'loop' || block.type === 'parallel') {
-                        document.body.classList.add('sim-drag-subflow')
-                      }
-                      const iconElement = e.currentTarget.querySelector('.toolbar-item-icon')
-                      handleDragStart(e, block.type, false, {
-                        name: block.name,
-                        bgColor: block.bgColor ?? '#666666',
-                        iconElement: iconElement as HTMLElement | null,
-                      })
-                    }}
-                    onDragEnd={() => {
-                      // Always clear the flag at the end of a toolbar drag
-                      document.body.classList.remove('sim-drag-subflow')
-                    }}
-                    onClick={() => handleItemClick(block.type, false)}
-                    onContextMenu={(e) =>
-                      handleItemContextMenu(
-                        e,
-                        block.type,
-                        false,
-                        block.docsLink ?? block.config?.docsLink
-                      )
-                    }
-                    className={clsx(
-                      'group flex h-[28px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
-                      'focus-visible:bg-[var(--surface-6)] focus-visible:outline-none dark:focus-visible:bg-[var(--surface-5)]'
-                    )}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
-                        event.preventDefault()
-                        event.stopPropagation()
-                        handleItemClick(block.type, false)
-                      }
-                    }}
-                  >
-                    <div
-                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
-                      style={{ background: block.bgColor }}
-                    >
-                      {Icon && (
-                        <Icon
-                          className={clsx(
-                            'toolbar-item-icon text-white transition-transform duration-200',
-                            'group-hover:scale-110',
-                            '!h-[10px] !w-[10px]'
-                          )}
-                        />
-                      )}
-                    </div>
-                    <span
-                      className={clsx(
-                        'truncate font-medium',
-                        'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
-                        'group-focus-visible:text-[var(--text-primary)]'
-                      )}
-                    >
-                      {block.name}
-                    </span>
-                  </div>
-                )
-              })}
+                    item={block}
+                    isTrigger={false}
+                    onDragStart={handleDragStart}
+                    onClick={handleItemClick}
+                    onContextMenu={handleItemContextMenu}
+                    itemRef={getBlockRefCallback(index)}
+                  />
+                ))}
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Toolbar Item Context Menu */}
-      <ToolbarItemContextMenu
-        isOpen={isContextMenuOpen}
-        position={contextMenuPosition}
-        menuRef={contextMenuRef}
-        onClose={closeContextMenu}
-        onAddToCanvas={handleContextMenuAddToCanvas}
-        onViewDocumentation={handleViewDocumentation}
-        showViewDocumentation={Boolean(activeItemInfo?.docsLink)}
-      />
-    </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 77c6b3da2f..cea18901e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { ArrowUp, Square } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
+import { useShallow } from 'zustand/react/shallow'
 import {
   BubbleChatClose,
   BubbleChatPreview,
@@ -49,7 +50,6 @@ import { usePanelStore, useVariablesStore as usePanelVariablesStore } from '@/st
 import { useVariablesStore } from '@/stores/variables/store'
 import { getWorkflowWithValues } from '@/stores/workflows'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('Panel')
 /**
@@ -69,14 +69,22 @@ const logger = createLogger('Panel')
  *
  * @returns Panel on the right side of the workflow
  */
-export function Panel() {
+export const Panel = memo(function Panel() {
   const router = useRouter()
   const params = useParams()
   const workspaceId = params.workspaceId as string
 
   const panelRef = useRef<HTMLElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
-  const { activeTab, setActiveTab, panelWidth, _hasHydrated, setHasHydrated } = usePanelStore()
+  const { activeTab, setActiveTab, panelWidth, _hasHydrated, setHasHydrated } = usePanelStore(
+    useShallow((state) => ({
+      activeTab: state.activeTab,
+      setActiveTab: state.setActiveTab,
+      panelWidth: state.panelWidth,
+      _hasHydrated: state._hasHydrated,
+      setHasHydrated: state.setHasHydrated,
+    }))
+  )
   const copilotRef = useRef<{
     createNewChat: () => void
     setInputValueAndFocus: (value: string) => void
@@ -97,12 +105,18 @@ export function Panel() {
   const userPermissions = useUserPermissionsContext()
   const { config: permissionConfig } = usePermissionConfig()
   const { isImporting, handleFileChange } = useImportWorkflow({ workspaceId })
-  const { workflows, activeWorkflowId, duplicateWorkflow, hydration } = useWorkflowRegistry()
+  const { workflows, activeWorkflowId, duplicateWorkflow, hydration } = useWorkflowRegistry(
+    useShallow((state) => ({
+      workflows: state.workflows,
+      activeWorkflowId: state.activeWorkflowId,
+      duplicateWorkflow: state.duplicateWorkflow,
+      hydration: state.hydration,
+    }))
+  )
   const isRegistryLoading =
     hydration.phase === 'idle' ||
     hydration.phase === 'metadata-loading' ||
     hydration.phase === 'state-loading'
-  const { blocks } = useWorkflowStore()
   const { handleAutoLayout: autoLayoutWithFitView } = useAutoLayout(activeWorkflowId || null)
 
   // Delete workflow hook
@@ -157,8 +171,18 @@ export function Panel() {
   }, [usageExceeded, handleRunWorkflow])
 
   // Chat state
-  const { isChatOpen, setIsChatOpen } = useChatStore()
-  const { isOpen: isVariablesOpen, setIsOpen: setVariablesOpen } = useVariablesStore()
+  const { isChatOpen, setIsChatOpen } = useChatStore(
+    useShallow((state) => ({
+      isChatOpen: state.isChatOpen,
+      setIsChatOpen: state.setIsChatOpen,
+    }))
+  )
+  const { isOpen: isVariablesOpen, setIsOpen: setVariablesOpen } = useVariablesStore(
+    useShallow((state) => ({
+      isOpen: state.isOpen,
+      setIsOpen: state.setIsOpen,
+    }))
+  )
 
   const currentWorkflow = activeWorkflowId ? workflows[activeWorkflowId] : null
 
@@ -583,4 +607,4 @@ export function Panel() {
       <Variables />
     </>
   )
-}
+})
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 56b9dc8bbe..2f7447cf79 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,6 +1,6 @@
 'use client'
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
 import {
   ArrowDown,
@@ -272,6 +272,514 @@ const OutputCodeContent = React.memo(function OutputCodeContent({
   )
 })
 
+/**
+ * Props for the OutputPanel component
+ */
+interface OutputPanelProps {
+  selectedEntry: ConsoleEntry
+  outputPanelWidth: number
+  handleOutputPanelResizeMouseDown: (e: React.MouseEvent) => void
+  handleHeaderClick: () => void
+  isExpanded: boolean
+  expandToLastHeight: () => void
+  showInput: boolean
+  setShowInput: (show: boolean) => void
+  hasInputData: boolean
+  isPlaygroundEnabled: boolean
+  shouldShowTrainingButton: boolean
+  isTraining: boolean
+  handleTrainingClick: (e: React.MouseEvent) => void
+  showCopySuccess: boolean
+  handleCopy: () => void
+  filteredEntries: ConsoleEntry[]
+  handleExportConsole: (e: React.MouseEvent) => void
+  hasActiveFilters: boolean
+  clearFilters: () => void
+  handleClearConsole: (e: React.MouseEvent) => void
+  wrapText: boolean
+  setWrapText: (wrap: boolean) => void
+  openOnRun: boolean
+  setOpenOnRun: (open: boolean) => void
+  outputOptionsOpen: boolean
+  setOutputOptionsOpen: (open: boolean) => void
+  shouldShowCodeDisplay: boolean
+  outputDataStringified: string
+  handleClearConsoleFromMenu: () => void
+}
+
+/**
+ * Output panel component that manages its own search state.
+ */
+const OutputPanel = React.memo(function OutputPanel({
+  selectedEntry,
+  outputPanelWidth,
+  handleOutputPanelResizeMouseDown,
+  handleHeaderClick,
+  isExpanded,
+  expandToLastHeight,
+  showInput,
+  setShowInput,
+  hasInputData,
+  isPlaygroundEnabled,
+  shouldShowTrainingButton,
+  isTraining,
+  handleTrainingClick,
+  showCopySuccess,
+  handleCopy,
+  filteredEntries,
+  handleExportConsole,
+  hasActiveFilters,
+  clearFilters,
+  handleClearConsole,
+  wrapText,
+  setWrapText,
+  openOnRun,
+  setOpenOnRun,
+  outputOptionsOpen,
+  setOutputOptionsOpen,
+  shouldShowCodeDisplay,
+  outputDataStringified,
+  handleClearConsoleFromMenu,
+}: OutputPanelProps) {
+  const outputContentRef = useRef<HTMLDivElement>(null)
+  const {
+    isSearchActive: isOutputSearchActive,
+    searchQuery: outputSearchQuery,
+    setSearchQuery: setOutputSearchQuery,
+    matchCount,
+    currentMatchIndex,
+    activateSearch: activateOutputSearch,
+    closeSearch: closeOutputSearch,
+    goToNextMatch,
+    goToPreviousMatch,
+    handleMatchCountChange,
+    searchInputRef: outputSearchInputRef,
+  } = useCodeViewerFeatures({
+    contentRef: outputContentRef,
+    externalWrapText: wrapText,
+    onWrapTextChange: setWrapText,
+  })
+
+  // Context menu state for output panel
+  const [hasSelection, setHasSelection] = useState(false)
+  const [storedSelectionText, setStoredSelectionText] = useState('')
+  const {
+    isOpen: isOutputMenuOpen,
+    position: outputMenuPosition,
+    menuRef: outputMenuRef,
+    handleContextMenu: handleOutputContextMenu,
+    closeMenu: closeOutputMenu,
+  } = useContextMenu()
+
+  const handleOutputPanelContextMenu = useCallback(
+    (e: React.MouseEvent) => {
+      const selection = window.getSelection()
+      const selectionText = selection?.toString() || ''
+      setStoredSelectionText(selectionText)
+      setHasSelection(selectionText.length > 0)
+      handleOutputContextMenu(e)
+    },
+    [handleOutputContextMenu]
+  )
+
+  const handleCopySelection = useCallback(() => {
+    if (storedSelectionText) {
+      navigator.clipboard.writeText(storedSelectionText)
+    }
+  }, [storedSelectionText])
+
+  /**
+   * Track text selection state for context menu.
+   * Skip updates when the context menu is open to prevent the selection
+   * state from changing mid-click (which would disable the copy button).
+   */
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      if (isOutputMenuOpen) return
+
+      const selection = window.getSelection()
+      setHasSelection(Boolean(selection && selection.toString().length > 0))
+    }
+
+    document.addEventListener('selectionchange', handleSelectionChange)
+    return () => document.removeEventListener('selectionchange', handleSelectionChange)
+  }, [isOutputMenuOpen])
+
+  return (
+    <>
+      <div
+        className='absolute top-0 right-0 bottom-0 flex flex-col border-[var(--border)] border-l bg-[var(--surface-1)]'
+        style={{ width: `${outputPanelWidth}px` }}
+      >
+        {/* Horizontal Resize Handle */}
+        <div
+          className='-ml-[4px] absolute top-0 bottom-0 left-0 z-20 w-[8px] cursor-ew-resize'
+          onMouseDown={handleOutputPanelResizeMouseDown}
+          role='separator'
+          aria-label='Resize output panel'
+          aria-orientation='vertical'
+        />
+
+        {/* Header */}
+        <div
+          className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--surface-1)] pr-[16px] pl-[10px]'
+          onClick={handleHeaderClick}
+        >
+          <div className='flex items-center'>
+            <Button
+              variant='ghost'
+              className={clsx(
+                'px-[8px] py-[6px] text-[12px]',
+                !showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-tertiary)]'
+              )}
+              onClick={(e) => {
+                e.stopPropagation()
+                if (!isExpanded) {
+                  expandToLastHeight()
+                }
+                if (showInput) setShowInput(false)
+              }}
+              aria-label='Show output'
+            >
+              Output
+            </Button>
+            {hasInputData && (
+              <Button
+                variant='ghost'
+                className={clsx(
+                  'px-[8px] py-[6px] text-[12px]',
+                  showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-tertiary)]'
+                )}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (!isExpanded) {
+                    expandToLastHeight()
+                  }
+                  setShowInput(true)
+                }}
+                aria-label='Show input'
+              >
+                Input
+              </Button>
+            )}
+          </div>
+          <div className='flex flex-shrink-0 items-center gap-[8px]'>
+            {isOutputSearchActive ? (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      closeOutputSearch()
+                    }}
+                    aria-label='Search in output'
+                    className='!p-1.5 -m-1.5'
+                  >
+                    <X className='h-[12px] w-[12px]' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Close search</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            ) : (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      activateOutputSearch()
+                    }}
+                    aria-label='Search in output'
+                    className='!p-1.5 -m-1.5'
+                  >
+                    <Search className='h-[12px] w-[12px]' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Search</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
+
+            {isPlaygroundEnabled && (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Link href='/playground'>
+                    <Button
+                      variant='ghost'
+                      aria-label='Component Playground'
+                      className='!p-1.5 -m-1.5'
+                    >
+                      <Palette className='h-[12px] w-[12px]' />
+                    </Button>
+                  </Link>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Component Playground</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
+
+            {shouldShowTrainingButton && (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={handleTrainingClick}
+                    aria-label={isTraining ? 'Stop training' : 'Train Copilot'}
+                    className={clsx(
+                      '!p-1.5 -m-1.5',
+                      isTraining && 'text-orange-600 dark:text-orange-400'
+                    )}
+                  >
+                    {isTraining ? (
+                      <Pause className='h-[12px] w-[12px]' />
+                    ) : (
+                      <Database className='h-[12px] w-[12px]' />
+                    )}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>{isTraining ? 'Stop Training' : 'Train Copilot'}</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
+
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  variant='ghost'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleCopy()
+                  }}
+                  aria-label='Copy output'
+                  className='!p-1.5 -m-1.5'
+                >
+                  {showCopySuccess ? (
+                    <Check className='h-[12px] w-[12px]' />
+                  ) : (
+                    <Clipboard className='h-[12px] w-[12px]' />
+                  )}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <span>{showCopySuccess ? 'Copied' : 'Copy output'}</span>
+              </Tooltip.Content>
+            </Tooltip.Root>
+            {filteredEntries.length > 0 && (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={handleExportConsole}
+                    aria-label='Download console CSV'
+                    className='!p-1.5 -m-1.5'
+                  >
+                    <ArrowDownToLine className='h-3 w-3' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Download CSV</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
+            {hasActiveFilters && (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      clearFilters()
+                    }}
+                    aria-label='Clear filters'
+                    className='!p-1.5 -m-1.5'
+                  >
+                    <FilterX className='h-3 w-3' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Clear filters</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
+            {filteredEntries.length > 0 && (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={handleClearConsole}
+                    aria-label='Clear console'
+                    className='!p-1.5 -m-1.5'
+                  >
+                    <Trash2 className='h-3 w-3' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <Tooltip.Shortcut keys='⌘D'>Clear console</Tooltip.Shortcut>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
+            <Popover open={outputOptionsOpen} onOpenChange={setOutputOptionsOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant='ghost'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                  }}
+                  aria-label='Terminal options'
+                  className='!p-1.5 -m-1.5'
+                >
+                  <MoreHorizontal className='h-3.5 w-3.5' />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                side='bottom'
+                align='end'
+                sideOffset={4}
+                collisionPadding={0}
+                onClick={(e) => e.stopPropagation()}
+                style={{ minWidth: '140px', maxWidth: '160px' }}
+                className='gap-[2px]'
+              >
+                <PopoverItem
+                  active={wrapText}
+                  showCheck
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setWrapText(!wrapText)
+                  }}
+                >
+                  <span>Wrap text</span>
+                </PopoverItem>
+                <PopoverItem
+                  active={openOnRun}
+                  showCheck
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setOpenOnRun(!openOnRun)
+                  }}
+                >
+                  <span>Open on run</span>
+                </PopoverItem>
+              </PopoverContent>
+            </Popover>
+            <ToggleButton
+              isExpanded={isExpanded}
+              onClick={(e) => {
+                e.stopPropagation()
+                handleHeaderClick()
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Search Overlay */}
+        {isOutputSearchActive && (
+          <div
+            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-[6px] rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--surface-1)] px-[6px] shadow-sm'
+            onClick={(e) => e.stopPropagation()}
+            data-toolbar-root
+            data-search-active='true'
+          >
+            <Input
+              ref={outputSearchInputRef}
+              type='text'
+              value={outputSearchQuery}
+              onChange={(e) => setOutputSearchQuery(e.target.value)}
+              placeholder='Search...'
+              className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+            />
+            <span
+              className={clsx(
+                'w-[58px] font-medium text-[11px]',
+                matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
+              )}
+            >
+              {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : 'No results'}
+            </span>
+            <Button
+              variant='ghost'
+              onClick={goToPreviousMatch}
+              aria-label='Previous match'
+              className='!p-1.5 -m-1.5'
+              disabled={matchCount === 0}
+            >
+              <ArrowUp className='h-[12px] w-[12px]' />
+            </Button>
+            <Button
+              variant='ghost'
+              onClick={goToNextMatch}
+              aria-label='Next match'
+              className='!p-1.5 -m-1.5'
+              disabled={matchCount === 0}
+            >
+              <ArrowDown className='h-[12px] w-[12px]' />
+            </Button>
+            <Button
+              variant='ghost'
+              onClick={closeOutputSearch}
+              aria-label='Close search'
+              className='!p-1.5 -m-1.5'
+            >
+              <X className='h-[12px] w-[12px]' />
+            </Button>
+          </div>
+        )}
+
+        {/* Content */}
+        <div
+          className={clsx('flex-1 overflow-y-auto', !wrapText && 'overflow-x-auto')}
+          onContextMenu={handleOutputPanelContextMenu}
+        >
+          {shouldShowCodeDisplay ? (
+            <OutputCodeContent
+              code={selectedEntry.input.code}
+              language={(selectedEntry.input.language as 'javascript' | 'json') || 'javascript'}
+              wrapText={wrapText}
+              searchQuery={isOutputSearchActive ? outputSearchQuery : undefined}
+              currentMatchIndex={currentMatchIndex}
+              onMatchCountChange={handleMatchCountChange}
+              contentRef={outputContentRef}
+            />
+          ) : (
+            <OutputCodeContent
+              code={outputDataStringified}
+              language='json'
+              wrapText={wrapText}
+              searchQuery={isOutputSearchActive ? outputSearchQuery : undefined}
+              currentMatchIndex={currentMatchIndex}
+              onMatchCountChange={handleMatchCountChange}
+              contentRef={outputContentRef}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Output Panel Context Menu */}
+      <OutputContextMenu
+        isOpen={isOutputMenuOpen}
+        position={outputMenuPosition}
+        menuRef={outputMenuRef}
+        onClose={closeOutputMenu}
+        onCopySelection={handleCopySelection}
+        onCopyAll={handleCopy}
+        onSearch={activateOutputSearch}
+        wrapText={wrapText}
+        onToggleWrap={() => setWrapText(!wrapText)}
+        openOnRun={openOnRun}
+        onToggleOpenOnRun={() => setOpenOnRun(!openOnRun)}
+        onClearConsole={handleClearConsoleFromMenu}
+        hasSelection={hasSelection}
+      />
+    </>
+  )
+})
+
 /**
  * Terminal component with resizable height that persists across page refreshes.
  *
@@ -284,24 +792,22 @@ const OutputCodeContent = React.memo(function OutputCodeContent({
  *
  * @returns Terminal at the bottom of the workflow
  */
-export function Terminal() {
+export const Terminal = memo(function Terminal() {
   const terminalRef = useRef<HTMLElement>(null)
   const prevEntriesLengthRef = useRef(0)
   const prevWorkflowEntriesLengthRef = useRef(0)
   const isTerminalFocusedRef = useRef(false)
-  const {
-    setTerminalHeight,
-    lastExpandedHeight,
-    outputPanelWidth,
-    setOutputPanelWidth,
-    openOnRun,
-    setOpenOnRun,
-    wrapText,
-    setWrapText,
-    setHasHydrated,
-  } = useTerminalStore()
+  const lastExpandedHeightRef = useRef<number>(DEFAULT_EXPANDED_HEIGHT)
+  const setTerminalHeight = useTerminalStore((state) => state.setTerminalHeight)
+  const outputPanelWidth = useTerminalStore((state) => state.outputPanelWidth)
+  const setOutputPanelWidth = useTerminalStore((state) => state.setOutputPanelWidth)
+  const openOnRun = useTerminalStore((state) => state.openOnRun)
+  const setOpenOnRun = useTerminalStore((state) => state.setOpenOnRun)
+  const wrapText = useTerminalStore((state) => state.wrapText)
+  const setWrapText = useTerminalStore((state) => state.setWrapText)
+  const setHasHydrated = useTerminalStore((state) => state.setHasHydrated)
   const isExpanded = useTerminalStore((state) => state.terminalHeight > NEAR_MIN_THRESHOLD)
-  const { activeWorkflowId } = useWorkflowRegistry()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const hasConsoleHydrated = useTerminalConsoleStore((state) => state._hasHydrated)
   const workflowEntriesSelector = useCallback(
     (state: { entries: ConsoleEntry[] }) =>
@@ -323,25 +829,6 @@ export function Terminal() {
   const [mainOptionsOpen, setMainOptionsOpen] = useState(false)
   const [outputOptionsOpen, setOutputOptionsOpen] = useState(false)
 
-  const outputContentRef = useRef<HTMLDivElement>(null)
-  const {
-    isSearchActive: isOutputSearchActive,
-    searchQuery: outputSearchQuery,
-    setSearchQuery: setOutputSearchQuery,
-    matchCount,
-    currentMatchIndex,
-    activateSearch: activateOutputSearch,
-    closeSearch: closeOutputSearch,
-    goToNextMatch,
-    goToPreviousMatch,
-    handleMatchCountChange,
-    searchInputRef: outputSearchInputRef,
-  } = useCodeViewerFeatures({
-    contentRef: outputContentRef,
-    externalWrapText: wrapText,
-    onWrapTextChange: setWrapText,
-  })
-
   const [isTrainingEnvEnabled, setIsTrainingEnvEnabled] = useState(false)
   const showTrainingControls = useGeneralStore((state) => state.showTrainingControls)
   const { isTraining, toggleModal: toggleTrainingModal, stopTraining } = useCopilotTrainingStore()
@@ -363,9 +850,7 @@ export function Terminal() {
     hasActiveFilters,
   } = useTerminalFilters()
 
-  const [hasSelection, setHasSelection] = useState(false)
   const [contextMenuEntry, setContextMenuEntry] = useState<ConsoleEntry | null>(null)
-  const [storedSelectionText, setStoredSelectionText] = useState('')
 
   const {
     isOpen: isLogRowMenuOpen,
@@ -375,29 +860,23 @@ export function Terminal() {
     closeMenu: closeLogRowMenu,
   } = useContextMenu()
 
-  const {
-    isOpen: isOutputMenuOpen,
-    position: outputMenuPosition,
-    menuRef: outputMenuRef,
-    handleContextMenu: handleOutputContextMenu,
-    closeMenu: closeOutputMenu,
-  } = useContextMenu()
-
   /**
    * Expands the terminal to its last meaningful height, with safeguards:
    * - Never expands below {@link DEFAULT_EXPANDED_HEIGHT}.
    * - Never exceeds 70% of the viewport height.
+   *
+   * Uses ref for lastExpandedHeight to avoid re-renders during resize.
    */
   const expandToLastHeight = useCallback(() => {
     setIsToggling(true)
     const maxHeight = window.innerHeight * 0.7
     const desiredHeight = Math.max(
-      lastExpandedHeight || DEFAULT_EXPANDED_HEIGHT,
+      lastExpandedHeightRef.current || DEFAULT_EXPANDED_HEIGHT,
       DEFAULT_EXPANDED_HEIGHT
     )
     const targetHeight = Math.min(desiredHeight, maxHeight)
     setTerminalHeight(targetHeight)
-  }, [lastExpandedHeight, setTerminalHeight])
+  }, [setTerminalHeight])
 
   const allWorkflowEntries = entries
 
@@ -636,24 +1115,6 @@ export function Terminal() {
     [activeWorkflowId, exportConsoleCSV]
   )
 
-  const handleCopySelection = useCallback(() => {
-    if (storedSelectionText) {
-      navigator.clipboard.writeText(storedSelectionText)
-      setShowCopySuccess(true)
-    }
-  }, [storedSelectionText])
-
-  const handleOutputPanelContextMenu = useCallback(
-    (e: React.MouseEvent) => {
-      const selection = window.getSelection()
-      const selectionText = selection?.toString() || ''
-      setStoredSelectionText(selectionText)
-      setHasSelection(selectionText.length > 0)
-      handleOutputContextMenu(e)
-    },
-    [handleOutputContextMenu]
-  )
-
   const handleRowContextMenu = useCallback(
     (e: React.MouseEvent, entry: ConsoleEntry) => {
       setContextMenuEntry(entry)
@@ -740,6 +1201,20 @@ export function Terminal() {
     setHasHydrated(true)
   }, [setHasHydrated])
 
+  /**
+   * Sync lastExpandedHeightRef with store value on mount.
+   * Uses subscription to keep ref updated without causing re-renders.
+   */
+  useEffect(() => {
+    // Initialize with current value
+    lastExpandedHeightRef.current = useTerminalStore.getState().lastExpandedHeight
+
+    const unsub = useTerminalStore.subscribe((state) => {
+      lastExpandedHeightRef.current = state.lastExpandedHeight
+    })
+    return unsub
+  }, [])
+
   /**
    * Check environment variables on mount
    */
@@ -784,23 +1259,6 @@ export function Terminal() {
     }
   }, [showCopySuccess])
 
-  /**
-   * Track text selection state for context menu.
-   * Skip updates when the context menu is open to prevent the selection
-   * state from changing mid-click (which would disable the copy button).
-   */
-  useEffect(() => {
-    const handleSelectionChange = () => {
-      if (isOutputMenuOpen) return
-
-      const selection = window.getSelection()
-      setHasSelection(Boolean(selection && selection.toString().length > 0))
-    }
-
-    document.addEventListener('selectionchange', handleSelectionChange)
-    return () => document.removeEventListener('selectionchange', handleSelectionChange)
-  }, [isOutputMenuOpen])
-
   /**
    * Auto-select the latest entry when new logs arrive
    * Re-enables auto-selection when all entries are cleared
@@ -903,19 +1361,27 @@ export function Terminal() {
 
   /**
    * Handle Escape to unselect entry (search close is handled by useCodeViewerFeatures)
+   * Check if the focused element is in the search overlay to avoid conflicting with search close.
    */
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !isOutputSearchActive && selectedEntry) {
-        e.preventDefault()
-        setSelectedEntry(null)
-        setAutoSelectEnabled(true)
+      if (e.key !== 'Escape' || !selectedEntry) return
+
+      // Don't unselect if focus is in the search overlay (search close takes priority)
+      const activeElement = document.activeElement as HTMLElement | null
+      const searchOverlay = document.querySelector('[data-toolbar-root][data-search-active="true"]')
+      if (searchOverlay && activeElement && searchOverlay.contains(activeElement)) {
+        return
       }
+
+      e.preventDefault()
+      setSelectedEntry(null)
+      setAutoSelectEnabled(true)
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [selectedEntry, isOutputSearchActive])
+  }, [selectedEntry])
 
   /**
    * Adjust output panel width when sidebar or panel width changes.
@@ -1431,362 +1897,37 @@ export function Terminal() {
 
           {/* Right Section - Block Output (Overlay) */}
           {selectedEntry && (
-            <div
-              className='absolute top-0 right-0 bottom-0 flex flex-col border-[var(--border)] border-l bg-[var(--surface-1)]'
-              style={{ width: `${outputPanelWidth}px` }}
-            >
-              {/* Horizontal Resize Handle */}
-              <div
-                className='-ml-[4px] absolute top-0 bottom-0 left-0 z-20 w-[8px] cursor-ew-resize'
-                onMouseDown={handleOutputPanelResizeMouseDown}
-                role='separator'
-                aria-label='Resize output panel'
-                aria-orientation='vertical'
-              />
-
-              {/* Header */}
-              <div
-                className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--surface-1)] pr-[16px] pl-[10px]'
-                onClick={handleHeaderClick}
-              >
-                <div className='flex items-center'>
-                  <Button
-                    variant='ghost'
-                    className={clsx(
-                      'px-[8px] py-[6px] text-[12px]',
-                      !showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-tertiary)]'
-                    )}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      if (!isExpanded) {
-                        expandToLastHeight()
-                      }
-                      if (showInput) setShowInput(false)
-                    }}
-                    aria-label='Show output'
-                  >
-                    Output
-                  </Button>
-                  {hasInputData && (
-                    <Button
-                      variant='ghost'
-                      className={clsx(
-                        'px-[8px] py-[6px] text-[12px]',
-                        showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-tertiary)]'
-                      )}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        if (!isExpanded) {
-                          expandToLastHeight()
-                        }
-                        setShowInput(true)
-                      }}
-                      aria-label='Show input'
-                    >
-                      Input
-                    </Button>
-                  )}
-                </div>
-                <div className='flex flex-shrink-0 items-center gap-[8px]'>
-                  {isOutputSearchActive ? (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          variant='ghost'
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            closeOutputSearch()
-                          }}
-                          aria-label='Search in output'
-                          className='!p-1.5 -m-1.5'
-                        >
-                          <X className='h-[12px] w-[12px]' />
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content>
-                        <span>Close search</span>
-                      </Tooltip.Content>
-                    </Tooltip.Root>
-                  ) : (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          variant='ghost'
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            activateOutputSearch()
-                          }}
-                          aria-label='Search in output'
-                          className='!p-1.5 -m-1.5'
-                        >
-                          <Search className='h-[12px] w-[12px]' />
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content>
-                        <span>Search</span>
-                      </Tooltip.Content>
-                    </Tooltip.Root>
-                  )}
-
-                  {isPlaygroundEnabled && (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Link href='/playground'>
-                          <Button
-                            variant='ghost'
-                            aria-label='Component Playground'
-                            className='!p-1.5 -m-1.5'
-                          >
-                            <Palette className='h-[12px] w-[12px]' />
-                          </Button>
-                        </Link>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content>
-                        <span>Component Playground</span>
-                      </Tooltip.Content>
-                    </Tooltip.Root>
-                  )}
-
-                  {shouldShowTrainingButton && (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          variant='ghost'
-                          onClick={handleTrainingClick}
-                          aria-label={isTraining ? 'Stop training' : 'Train Copilot'}
-                          className={clsx(
-                            '!p-1.5 -m-1.5',
-                            isTraining && 'text-orange-600 dark:text-orange-400'
-                          )}
-                        >
-                          {isTraining ? (
-                            <Pause className='h-[12px] w-[12px]' />
-                          ) : (
-                            <Database className='h-[12px] w-[12px]' />
-                          )}
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content>
-                        <span>{isTraining ? 'Stop Training' : 'Train Copilot'}</span>
-                      </Tooltip.Content>
-                    </Tooltip.Root>
-                  )}
-
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Button
-                        variant='ghost'
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          handleCopy()
-                        }}
-                        aria-label='Copy output'
-                        className='!p-1.5 -m-1.5'
-                      >
-                        {showCopySuccess ? (
-                          <Check className='h-[12px] w-[12px]' />
-                        ) : (
-                          <Clipboard className='h-[12px] w-[12px]' />
-                        )}
-                      </Button>
-                    </Tooltip.Trigger>
-                    <Tooltip.Content>
-                      <span>{showCopySuccess ? 'Copied' : 'Copy output'}</span>
-                    </Tooltip.Content>
-                  </Tooltip.Root>
-                  {filteredEntries.length > 0 && (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          variant='ghost'
-                          onClick={handleExportConsole}
-                          aria-label='Download console CSV'
-                          className='!p-1.5 -m-1.5'
-                        >
-                          <ArrowDownToLine className='h-3 w-3' />
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content>
-                        <span>Download CSV</span>
-                      </Tooltip.Content>
-                    </Tooltip.Root>
-                  )}
-                  {hasActiveFilters && (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          variant='ghost'
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            clearFilters()
-                          }}
-                          aria-label='Clear filters'
-                          className='!p-1.5 -m-1.5'
-                        >
-                          <FilterX className='h-3 w-3' />
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content>
-                        <span>Clear filters</span>
-                      </Tooltip.Content>
-                    </Tooltip.Root>
-                  )}
-                  {filteredEntries.length > 0 && (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          variant='ghost'
-                          onClick={handleClearConsole}
-                          aria-label='Clear console'
-                          className='!p-1.5 -m-1.5'
-                        >
-                          <Trash2 className='h-3 w-3' />
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content>
-                        <Tooltip.Shortcut keys='⌘D'>Clear console</Tooltip.Shortcut>
-                      </Tooltip.Content>
-                    </Tooltip.Root>
-                  )}
-                  <Popover open={outputOptionsOpen} onOpenChange={setOutputOptionsOpen}>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant='ghost'
-                        onClick={(e) => {
-                          e.stopPropagation()
-                        }}
-                        aria-label='Terminal options'
-                        className='!p-1.5 -m-1.5'
-                      >
-                        <MoreHorizontal className='h-3.5 w-3.5' />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      side='bottom'
-                      align='end'
-                      sideOffset={4}
-                      collisionPadding={0}
-                      onClick={(e) => e.stopPropagation()}
-                      style={{ minWidth: '140px', maxWidth: '160px' }}
-                      className='gap-[2px]'
-                    >
-                      <PopoverItem
-                        active={wrapText}
-                        showCheck
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          setWrapText(!wrapText)
-                        }}
-                      >
-                        <span>Wrap text</span>
-                      </PopoverItem>
-                      <PopoverItem
-                        active={openOnRun}
-                        showCheck
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          setOpenOnRun(!openOnRun)
-                        }}
-                      >
-                        <span>Open on run</span>
-                      </PopoverItem>
-                    </PopoverContent>
-                  </Popover>
-                  <ToggleButton
-                    isExpanded={isExpanded}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      handleHeaderClick()
-                    }}
-                  />
-                </div>
-              </div>
-
-              {/* Search Overlay */}
-              {isOutputSearchActive && (
-                <div
-                  className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-[6px] rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--surface-1)] px-[6px] shadow-sm'
-                  onClick={(e) => e.stopPropagation()}
-                  data-toolbar-root
-                  data-search-active='true'
-                >
-                  <Input
-                    ref={outputSearchInputRef}
-                    type='text'
-                    value={outputSearchQuery}
-                    onChange={(e) => setOutputSearchQuery(e.target.value)}
-                    placeholder='Search...'
-                    className='mr-[2px] h-[23px] w-[94px] text-[12px]'
-                  />
-                  <span
-                    className={clsx(
-                      'w-[58px] font-medium text-[11px]',
-                      matchCount > 0
-                        ? 'text-[var(--text-secondary)]'
-                        : 'text-[var(--text-tertiary)]'
-                    )}
-                  >
-                    {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : 'No results'}
-                  </span>
-                  <Button
-                    variant='ghost'
-                    onClick={goToPreviousMatch}
-                    aria-label='Previous match'
-                    className='!p-1.5 -m-1.5'
-                    disabled={matchCount === 0}
-                  >
-                    <ArrowUp className='h-[12px] w-[12px]' />
-                  </Button>
-                  <Button
-                    variant='ghost'
-                    onClick={goToNextMatch}
-                    aria-label='Next match'
-                    className='!p-1.5 -m-1.5'
-                    disabled={matchCount === 0}
-                  >
-                    <ArrowDown className='h-[12px] w-[12px]' />
-                  </Button>
-                  <Button
-                    variant='ghost'
-                    onClick={closeOutputSearch}
-                    aria-label='Close search'
-                    className='!p-1.5 -m-1.5'
-                  >
-                    <X className='h-[12px] w-[12px]' />
-                  </Button>
-                </div>
-              )}
-
-              {/* Content */}
-              <div
-                className={clsx('flex-1 overflow-y-auto', !wrapText && 'overflow-x-auto')}
-                onContextMenu={handleOutputPanelContextMenu}
-              >
-                {shouldShowCodeDisplay ? (
-                  <OutputCodeContent
-                    code={selectedEntry.input.code}
-                    language={
-                      (selectedEntry.input.language as 'javascript' | 'json') || 'javascript'
-                    }
-                    wrapText={wrapText}
-                    searchQuery={isOutputSearchActive ? outputSearchQuery : undefined}
-                    currentMatchIndex={currentMatchIndex}
-                    onMatchCountChange={handleMatchCountChange}
-                    contentRef={outputContentRef}
-                  />
-                ) : (
-                  <OutputCodeContent
-                    code={outputDataStringified}
-                    language='json'
-                    wrapText={wrapText}
-                    searchQuery={isOutputSearchActive ? outputSearchQuery : undefined}
-                    currentMatchIndex={currentMatchIndex}
-                    onMatchCountChange={handleMatchCountChange}
-                    contentRef={outputContentRef}
-                  />
-                )}
-              </div>
-            </div>
+            <OutputPanel
+              selectedEntry={selectedEntry}
+              outputPanelWidth={outputPanelWidth}
+              handleOutputPanelResizeMouseDown={handleOutputPanelResizeMouseDown}
+              handleHeaderClick={handleHeaderClick}
+              isExpanded={isExpanded}
+              expandToLastHeight={expandToLastHeight}
+              showInput={showInput}
+              setShowInput={setShowInput}
+              hasInputData={hasInputData}
+              isPlaygroundEnabled={isPlaygroundEnabled}
+              shouldShowTrainingButton={shouldShowTrainingButton}
+              isTraining={isTraining}
+              handleTrainingClick={handleTrainingClick}
+              showCopySuccess={showCopySuccess}
+              handleCopy={handleCopy}
+              filteredEntries={filteredEntries}
+              handleExportConsole={handleExportConsole}
+              hasActiveFilters={hasActiveFilters}
+              clearFilters={clearFilters}
+              handleClearConsole={handleClearConsole}
+              wrapText={wrapText}
+              setWrapText={setWrapText}
+              openOnRun={openOnRun}
+              setOpenOnRun={setOpenOnRun}
+              outputOptionsOpen={outputOptionsOpen}
+              setOutputOptionsOpen={setOutputOptionsOpen}
+              shouldShowCodeDisplay={shouldShowCodeDisplay}
+              outputDataStringified={outputDataStringified}
+              handleClearConsoleFromMenu={handleClearConsoleFromMenu}
+            />
           )}
         </div>
       </aside>
@@ -1810,23 +1951,6 @@ export function Terminal() {
         onClearConsole={handleClearConsoleFromMenu}
         hasActiveFilters={hasActiveFilters}
       />
-
-      {/* Output Panel Context Menu */}
-      <OutputContextMenu
-        isOpen={isOutputMenuOpen}
-        position={outputMenuPosition}
-        menuRef={outputMenuRef}
-        onClose={closeOutputMenu}
-        onCopySelection={handleCopySelection}
-        onCopyAll={handleCopy}
-        onSearch={activateOutputSearch}
-        wrapText={wrapText}
-        onToggleWrap={() => setWrapText(!wrapText)}
-        openOnRun={openOnRun}
-        onToggleOpenOnRun={() => setOpenOnRun(!openOnRun)}
-        onClearConsole={handleClearConsoleFromMenu}
-        hasSelection={hasSelection}
-      />
     </>
   )
-}
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
index be9c855c95..1d41ca5546 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
@@ -14,8 +14,12 @@ export function getProviderName(providerId: string): string {
 }
 
 /**
- * Compares two WorkflowBlock props to determine if a re-render should be skipped
- * Used as the comparison function for React.memo
+ * Compares two WorkflowBlock props to determine if a re-render should be skipped.
+ * Used as the comparison function for React.memo.
+ *
+ * Note: xPos and yPos are intentionally excluded since WorkflowBlock doesn't use
+ * position props - ReactFlow handles positioning via CSS transforms. Including them
+ * would cause unnecessary re-renders during drag (100+ times per drag operation).
  *
  * @param prevProps - Previous node props
  * @param nextProps - Next node props
@@ -37,9 +41,7 @@ export function shouldSkipBlockRender(
     prevProps.data.subBlockValues === nextProps.data.subBlockValues &&
     prevProps.data.blockState === nextProps.data.blockState &&
     prevProps.selected === nextProps.selected &&
-    prevProps.dragging === nextProps.dragging &&
-    prevProps.xPos === nextProps.xPos &&
-    prevProps.yPos === nextProps.yPos
+    prevProps.dragging === nextProps.dragging
   )
 }
 
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 b986ff6546..5c0f42d1fa 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
@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { createLogger } from '@sim/logger'
+import { isEqual } from 'lodash'
 import { useParams } from 'next/navigation'
 import { Handle, type NodeProps, Position, useUpdateNodeInternals } from 'reactflow'
 import { Badge, Tooltip } from '@/components/emcn'
@@ -46,6 +47,9 @@ import { wouldCreateCycle } from '@/stores/workflows/workflow/utils'
 
 const logger = createLogger('WorkflowBlock')
 
+/** Stable empty object to avoid creating new references */
+const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
+
 /**
  * Type guard for table row structure
  */
@@ -320,11 +324,53 @@ export const getDisplayValue = (value: unknown): string => {
   return stringValue.trim().length > 0 ? stringValue : '-'
 }
 
+interface SubBlockRowProps {
+  title: string
+  value?: string
+  subBlock?: SubBlockConfig
+  rawValue?: unknown
+  workspaceId?: string
+  workflowId?: string
+  blockId?: string
+  allSubBlockValues?: Record<string, { value: unknown }>
+  displayAdvancedOptions?: boolean
+  canonicalIndex?: ReturnType<typeof buildCanonicalIndex>
+  canonicalModeOverrides?: Record<string, 'basic' | 'advanced'>
+}
+
+/**
+ * Compares SubBlockRow props for memo equality check.
+ */
+const areSubBlockRowPropsEqual = (
+  prevProps: SubBlockRowProps,
+  nextProps: SubBlockRowProps
+): boolean => {
+  const subBlockId = prevProps.subBlock?.id
+  const prevValue = subBlockId ? prevProps.allSubBlockValues?.[subBlockId]?.value : undefined
+  const nextValue = subBlockId ? nextProps.allSubBlockValues?.[subBlockId]?.value : undefined
+  const valueEqual = prevValue === nextValue || isEqual(prevValue, nextValue)
+
+  return (
+    prevProps.title === nextProps.title &&
+    prevProps.value === nextProps.value &&
+    prevProps.subBlock === nextProps.subBlock &&
+    prevProps.rawValue === nextProps.rawValue &&
+    prevProps.workspaceId === nextProps.workspaceId &&
+    prevProps.workflowId === nextProps.workflowId &&
+    prevProps.blockId === nextProps.blockId &&
+    valueEqual &&
+    prevProps.displayAdvancedOptions === nextProps.displayAdvancedOptions &&
+    prevProps.canonicalIndex === nextProps.canonicalIndex &&
+    prevProps.canonicalModeOverrides === nextProps.canonicalModeOverrides
+  )
+}
+
 /**
  * Renders a single subblock row with title and optional value.
  * Automatically hydrates IDs to display names for all selector types.
+ * Memoized to prevent excessive re-renders when parent components update.
  */
-const SubBlockRow = ({
+const SubBlockRow = memo(function SubBlockRow({
   title,
   value,
   subBlock,
@@ -336,19 +382,7 @@ const SubBlockRow = ({
   displayAdvancedOptions,
   canonicalIndex,
   canonicalModeOverrides,
-}: {
-  title: string
-  value?: string
-  subBlock?: SubBlockConfig
-  rawValue?: unknown
-  workspaceId?: string
-  workflowId?: string
-  blockId?: string
-  allSubBlockValues?: Record<string, { value: unknown }>
-  displayAdvancedOptions?: boolean
-  canonicalIndex?: ReturnType<typeof buildCanonicalIndex>
-  canonicalModeOverrides?: Record<string, 'basic' | 'advanced'>
-}) => {
+}: SubBlockRowProps) {
   const getStringValue = useCallback(
     (key?: string): string | undefined => {
       if (!key || !allSubBlockValues) return undefined
@@ -486,21 +520,34 @@ const SubBlockRow = ({
       : `${baseUrl}/api/webhooks/trigger/${blockId}`
   }, [subBlock?.id, blockId, allSubBlockValues])
 
-  const allVariables = useVariablesStore((state) => state.variables)
+  /**
+   * Subscribe only to variables for this workflow to avoid re-renders from other workflows.
+   * Uses isEqual for deep comparison since Object.fromEntries creates a new object each time.
+   */
+  const workflowVariables = useVariablesStore(
+    useCallback(
+      (state) => {
+        if (!workflowId) return {}
+        return Object.fromEntries(
+          Object.entries(state.variables).filter(([, v]) => v.workflowId === workflowId)
+        )
+      },
+      [workflowId]
+    ),
+    isEqual
+  )
 
   const variablesDisplayValue = useMemo(() => {
     if (subBlock?.type !== 'variables-input' || !isVariableAssignmentsArray(rawValue)) {
       return null
     }
 
-    const workflowVariables = Object.values(allVariables).filter(
-      (v: any) => v.workflowId === workflowId
-    )
+    const variablesArray = Object.values(workflowVariables)
 
     const names = rawValue
       .map((a) => {
         if (a.variableId) {
-          const variable = workflowVariables.find((v: any) => v.id === a.variableId)
+          const variable = variablesArray.find((v: any) => v.id === a.variableId)
           return variable?.name
         }
         if (a.variableName) return a.variableName
@@ -512,7 +559,7 @@ const SubBlockRow = ({
     if (names.length === 1) return names[0]
     if (names.length === 2) return `${names[0]}, ${names[1]}`
     return `${names[0]}, ${names[1]} +${names.length - 2}`
-  }, [subBlock?.type, rawValue, workflowId, allVariables])
+  }, [subBlock?.type, rawValue, workflowVariables])
 
   const isPasswordField = subBlock?.password === true
   const maskedValue = isPasswordField && value && value !== '-' ? '•••' : null
@@ -548,7 +595,7 @@ const SubBlockRow = ({
       )}
     </div>
   )
-}
+}, areSubBlockRowPropsEqual)
 
 export const WorkflowBlock = memo(function WorkflowBlock({
   id,
@@ -626,18 +673,15 @@ export const WorkflowBlock = memo(function WorkflowBlock({
   const isStarterBlock = type === 'starter'
   const isWebhookTriggerBlock = type === 'webhook' || type === 'generic_webhook'
 
-  /**
-   * Subscribe to this block's subblock values to track changes for conditional rendering
-   * of subblocks based on their conditions.
-   */
   const blockSubBlockValues = useSubBlockStore(
     useCallback(
       (state) => {
-        if (!activeWorkflowId) return {}
-        return state.workflowValues[activeWorkflowId]?.[id] || {}
+        if (!activeWorkflowId) return EMPTY_SUBBLOCK_VALUES
+        return state.workflowValues[activeWorkflowId]?.[id] ?? EMPTY_SUBBLOCK_VALUES
       },
       [activeWorkflowId, id]
-    )
+    ),
+    isEqual
   )
   const canonicalIndex = useMemo(() => buildCanonicalIndex(config.subBlocks), [config.subBlocks])
   const canonicalModeOverrides = currentStoreBlock?.data?.canonicalModes
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index a9bd36e0d2..0e243faae9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { memo, useCallback, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
 import { Scan } from 'lucide-react'
@@ -33,7 +33,10 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const logger = createLogger('WorkflowControls')
 
-export function WorkflowControls() {
+/**
+ * Floating controls for canvas mode, undo/redo, and fit-to-view.
+ */
+export const WorkflowControls = memo(function WorkflowControls() {
   const reactFlowInstance = useReactFlow()
   const { fitViewToBounds } = useCanvasViewport(reactFlowInstance)
   const { mode, setMode } = useCanvasModeStore()
@@ -42,7 +45,7 @@ export function WorkflowControls() {
   const updateSetting = useUpdateGeneralSetting()
   const isTerminalResizing = useTerminalStore((state) => state.isResizing)
 
-  const { activeWorkflowId } = useWorkflowRegistry()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const { data: session } = useSession()
   const userId = session?.user?.id || 'unknown'
   const stacks = useUndoRedoStore((s) => s.stacks)
@@ -222,4 +225,4 @@ export function WorkflowControls() {
       </Popover>
     </>
   )
-}
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
index 33f83bdb94..cd99dc9a8b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
@@ -50,8 +50,18 @@ export function useBlockVisual({
   } = useBlockState(blockId, currentWorkflow, data)
 
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
-  const activeTab = usePanelStore((state) => state.activeTab)
-  const isEditorOpen = !isPreview && currentBlockId === blockId && activeTab === 'editor'
+
+  const isThisBlockInEditor = currentBlockId === blockId
+  const activeTabIsEditor = usePanelStore(
+    useCallback(
+      (state) => {
+        if (isPreview || !isThisBlockInEditor) return false
+        return state.activeTab === 'editor'
+      },
+      [isPreview, isThisBlockInEditor]
+    )
+  )
+  const isEditorOpen = !isPreview && isThisBlockInEditor && activeTabIsEditor
 
   const lastRunPath = useExecutionStore((state) => state.lastRunPath)
   const runPathStatus = isPreview ? undefined : lastRunPath.get(blockId)
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 0d8fd312cc..47125fa4de 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,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import { BookOpen, Layout, RepeatIcon, ScrollText, Search, SplitIcon } from 'lucide-react'
@@ -87,7 +87,90 @@ type SearchItem = {
   config?: any
 }
 
-export function SearchModal({
+interface SearchResultItemProps {
+  item: SearchItem
+  visualIndex: number
+  isSelected: boolean
+  onItemClick: (item: SearchItem) => void
+}
+
+const SearchResultItem = memo(function SearchResultItem({
+  item,
+  visualIndex,
+  isSelected,
+  onItemClick,
+}: SearchResultItemProps) {
+  const Icon = item.icon
+  const showColoredIcon = item.type === 'block' || item.type === 'trigger' || item.type === 'tool'
+  const isWorkflow = item.type === 'workflow'
+  const isWorkspace = item.type === 'workspace'
+
+  const handleClick = useCallback(() => {
+    onItemClick(item)
+  }, [onItemClick, item])
+
+  return (
+    <button
+      data-search-item-index={visualIndex}
+      onClick={handleClick}
+      onMouseDown={(e) => e.preventDefault()}
+      className={cn(
+        'group flex h-[28px] w-full items-center gap-[8px] rounded-[6px] bg-[var(--surface-4)]/60 px-[10px] text-left text-[15px] transition-all focus:outline-none',
+        isSelected ? 'bg-[var(--border)] shadow-sm' : 'hover:bg-[var(--border)]'
+      )}
+    >
+      {/* Icon - different rendering for workflows vs others */}
+      {!isWorkspace && (
+        <>
+          {isWorkflow ? (
+            <div
+              className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px]'
+              style={{ backgroundColor: item.color }}
+            />
+          ) : (
+            Icon && (
+              <div
+                className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                style={{ background: showColoredIcon ? item.bgColor : 'transparent' }}
+              >
+                <Icon
+                  className={cn(
+                    'transition-transform duration-100 group-hover:scale-110',
+                    showColoredIcon
+                      ? '!h-[10px] !w-[10px] text-white'
+                      : 'h-[14px] w-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+                  )}
+                />
+              </div>
+            )
+          )}
+        </>
+      )}
+
+      {/* Content */}
+      <span
+        className={cn(
+          'truncate font-medium',
+          isSelected
+            ? 'text-[var(--text-primary)]'
+            : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+        )}
+      >
+        {item.name}
+        {item.isCurrent && ' (current)'}
+      </span>
+
+      {/* Shortcut */}
+      {item.shortcut && (
+        <span className='ml-auto flex-shrink-0 font-medium text-[13px] text-[var(--text-subtle)]'>
+          {item.shortcut}
+        </span>
+      )}
+    </button>
+  )
+})
+
+export const SearchModal = memo(function SearchModal({
   open,
   onOpenChange,
   workflows = [],
@@ -103,7 +186,7 @@ export function SearchModal({
   const { filterBlocks } = usePermissionConfig()
 
   const blocks = useMemo(() => {
-    if (!isOnWorkflowPage) return []
+    if (!open || !isOnWorkflowPage) return []
 
     const allBlocks = getAllBlocks()
     const filteredAllBlocks = filterBlocks(allBlocks)
@@ -142,10 +225,10 @@ export function SearchModal({
     ]
 
     return [...regularBlocks, ...filterBlocks(specialBlocks)]
-  }, [isOnWorkflowPage, filterBlocks])
+  }, [open, isOnWorkflowPage, filterBlocks])
 
   const triggers = useMemo(() => {
-    if (!isOnWorkflowPage) return []
+    if (!open || !isOnWorkflowPage) return []
 
     const allTriggers = getTriggersForSidebar()
     const filteredTriggers = filterBlocks(allTriggers)
@@ -174,10 +257,10 @@ export function SearchModal({
         config: block,
       })
     )
-  }, [isOnWorkflowPage, filterBlocks])
+  }, [open, isOnWorkflowPage, filterBlocks])
 
   const tools = useMemo(() => {
-    if (!isOnWorkflowPage) return []
+    if (!open || !isOnWorkflowPage) return []
 
     const allBlocks = getAllBlocks()
     const filteredAllBlocks = filterBlocks(allBlocks)
@@ -193,7 +276,7 @@ export function SearchModal({
           type: block.type,
         })
       )
-  }, [isOnWorkflowPage, filterBlocks])
+  }, [open, isOnWorkflowPage, filterBlocks])
 
   const pages = useMemo(
     (): PageItem[] => [
@@ -221,6 +304,8 @@ export function SearchModal({
   )
 
   const docs = useMemo((): DocItem[] => {
+    if (!open) return []
+
     const allBlocks = getAllBlocks()
     const docsItems: DocItem[] = []
 
@@ -237,7 +322,7 @@ export function SearchModal({
     })
 
     return docsItems
-  }, [])
+  }, [open])
 
   const allItems = useMemo((): SearchItem[] => {
     const items: SearchItem[] = []
@@ -549,78 +634,16 @@ export function SearchModal({
 
                     {/* Section items */}
                     <div className='space-y-[2px]'>
-                      {items.map((item, itemIndex) => {
-                        const Icon = item.icon
+                      {items.map((item) => {
                         const visualIndex = displayedItemsInVisualOrder.indexOf(item)
-                        const isSelected = visualIndex === selectedIndex
-                        const showColoredIcon =
-                          item.type === 'block' || item.type === 'trigger' || item.type === 'tool'
-                        const isWorkflow = item.type === 'workflow'
-                        const isWorkspace = item.type === 'workspace'
-
                         return (
-                          <button
+                          <SearchResultItem
                             key={`${item.type}-${item.id}`}
-                            data-search-item-index={visualIndex}
-                            onClick={() => handleItemClick(item)}
-                            onMouseDown={(e) => e.preventDefault()}
-                            className={cn(
-                              'group flex h-[28px] w-full items-center gap-[8px] rounded-[6px] bg-[var(--surface-4)]/60 px-[10px] text-left text-[15px] transition-all focus:outline-none',
-                              isSelected
-                                ? 'bg-[var(--border)] shadow-sm'
-                                : 'hover:bg-[var(--border)]'
-                            )}
-                          >
-                            {/* Icon - different rendering for workflows vs others */}
-                            {!isWorkspace && (
-                              <>
-                                {isWorkflow ? (
-                                  <div
-                                    className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px]'
-                                    style={{ backgroundColor: item.color }}
-                                  />
-                                ) : (
-                                  Icon && (
-                                    <div
-                                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
-                                      style={{
-                                        background: showColoredIcon ? item.bgColor : 'transparent',
-                                      }}
-                                    >
-                                      <Icon
-                                        className={cn(
-                                          'transition-transform duration-100 group-hover:scale-110',
-                                          showColoredIcon
-                                            ? '!h-[10px] !w-[10px] text-white'
-                                            : 'h-[14px] w-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
-                                        )}
-                                      />
-                                    </div>
-                                  )
-                                )}
-                              </>
-                            )}
-
-                            {/* Content */}
-                            <span
-                              className={cn(
-                                'truncate font-medium',
-                                isSelected
-                                  ? 'text-[var(--text-primary)]'
-                                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
-                              )}
-                            >
-                              {item.name}
-                              {item.isCurrent && ' (current)'}
-                            </span>
-
-                            {/* Shortcut */}
-                            {item.shortcut && (
-                              <span className='ml-auto flex-shrink-0 font-medium text-[13px] text-[var(--text-subtle)]'>
-                                {item.shortcut}
-                              </span>
-                            )}
-                          </button>
+                            item={item}
+                            visualIndex={visualIndex}
+                            isSelected={visualIndex === selectedIndex}
+                            onItemClick={handleItemClick}
+                          />
                         )
                       })}
                     </div>
@@ -639,4 +662,4 @@ export function SearchModal({
       </DialogPortal>
     </Dialog>
   )
-}
+})
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 8c3e7c2663..8050f7b0e9 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
@@ -52,8 +52,8 @@ export function WorkflowItem({
 }: WorkflowItemProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
-  const { selectedWorkflows } = useFolderStore()
-  const { updateWorkflow, workflows } = useWorkflowRegistry()
+  const selectedWorkflows = useFolderStore((state) => state.selectedWorkflows)
+  const updateWorkflow = useWorkflowRegistry((state) => state.updateWorkflow)
   const userPermissions = useUserPermissionsContext()
   const isSelected = selectedWorkflows.has(workflow.id)
 
@@ -141,6 +141,7 @@ export function WorkflowItem({
     const workflowIds =
       finalIsSelected && finalSelection.size > 1 ? Array.from(finalSelection) : [workflow.id]
 
+    const { workflows } = useWorkflowRegistry.getState()
     const workflowNames = workflowIds
       .map((id) => workflows[id]?.name)
       .filter((name): name is string => !!name)
@@ -151,7 +152,7 @@ export function WorkflowItem({
     }
 
     setCanDeleteCaptured(canDeleteWorkflows(workflowIds))
-  }, [workflow.id, workflows, canDeleteWorkflows])
+  }, [workflow.id, canDeleteWorkflows])
 
   /**
    * Handle right-click - ensure proper selection behavior and capture selection state
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
index 6e9bed0441..3402ff96bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
@@ -1,6 +1,7 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
+import { useShallow } from 'zustand/react/shallow'
 import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { useCreateWorkflow, useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
@@ -15,19 +16,19 @@ interface UseWorkflowOperationsProps {
 
 export function useWorkflowOperations({ workspaceId }: UseWorkflowOperationsProps) {
   const router = useRouter()
-  const { workflows } = useWorkflowRegistry()
+  const workflows = useWorkflowRegistry(useShallow((state) => state.workflows))
   const workflowsQuery = useWorkflows(workspaceId)
   const createWorkflowMutation = useCreateWorkflow()
 
-  /**
-   * Filter and sort workflows for the current workspace
-   */
-  const regularWorkflows = Object.values(workflows)
-    .filter((workflow) => workflow.workspaceId === workspaceId)
-    .sort((a, b) => {
-      // Sort by creation date (newest first) for stable ordering
-      return b.createdAt.getTime() - a.createdAt.getTime()
-    })
+  const regularWorkflows = useMemo(
+    () =>
+      Object.values(workflows)
+        .filter((workflow) => workflow.workspaceId === workspaceId)
+        .sort((a, b) => {
+          return b.createdAt.getTime() - a.createdAt.getTime()
+        }),
+    [workflows, workspaceId]
+  )
 
   const handleCreateWorkflow = useCallback(async (): Promise<string | null> => {
     try {
@@ -55,13 +56,11 @@ export function useWorkflowOperations({ workspaceId }: UseWorkflowOperationsProp
   }, [createWorkflowMutation, workspaceId, router])
 
   return {
-    // State
     workflows,
     regularWorkflows,
     workflowsLoading: workflowsQuery.isLoading,
     isCreatingWorkflow: createWorkflowMutation.isPending,
 
-    // Operations
     handleCreateWorkflow,
   }
 }
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 2b9eee714e..15aedd57a5 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
@@ -33,7 +33,7 @@ export function useWorkspaceManagement({
 }: UseWorkspaceManagementProps) {
   const router = useRouter()
   const pathname = usePathname()
-  const { switchToWorkspace } = useWorkflowRegistry()
+  const switchToWorkspace = useWorkflowRegistry((state) => state.switchToWorkspace)
 
   // Workspace management state
   const [workspaces, setWorkspaces] = useState<Workspace[]>([])
@@ -95,10 +95,6 @@ export function useWorkspaceManagement({
     }
   }, [])
 
-  /**
-   * Fetch workspaces for the current user with full validation and URL handling
-   * Uses refs for workspaceId and router to avoid unnecessary recreations
-   */
   const fetchWorkspaces = useCallback(async () => {
     setIsWorkspacesLoading(true)
     try {
@@ -181,10 +177,6 @@ export function useWorkspaceManagement({
     []
   )
 
-  /**
-   * Switch to a different workspace
-   * Uses refs for activeWorkspace and router to avoid unnecessary recreations
-   */
   const switchWorkspace = useCallback(
     async (workspace: Workspace) => {
       // If already on this workspace, 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 294a34aff3..5d5f36dc38 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Database, HelpCircle, Layout, Plus, Search, Settings } from 'lucide-react'
 import Link from 'next/link'
@@ -60,7 +60,7 @@ export const SIDEBAR_SCROLL_EVENT = 'sidebar-scroll-to-item'
  *
  * @returns Sidebar with workflows panel
  */
-export function Sidebar() {
+export const Sidebar = memo(function Sidebar() {
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const workflowId = params.workflowId as string | undefined
@@ -142,11 +142,9 @@ export function Sidebar() {
       window.removeEventListener(SIDEBAR_SCROLL_EVENT, handleScrollToItem as EventListener)
   }, [])
 
-  const {
-    isOpen: isSearchModalOpen,
-    setOpen: setIsSearchModalOpen,
-    open: openSearchModal,
-  } = useSearchModalStore()
+  const isSearchModalOpen = useSearchModalStore((state) => state.isOpen)
+  const setIsSearchModalOpen = useSearchModalStore((state) => state.setOpen)
+  const openSearchModal = useSearchModalStore((state) => state.open)
 
   const {
     workspaces,
@@ -176,7 +174,6 @@ export function Sidebar() {
     workspaceId,
   })
 
-  /** Context menu state for navigation items */
   const [activeNavItemHref, setActiveNavItemHref] = useState<string | null>(null)
   const {
     isOpen: isNavContextMenuOpen,
@@ -285,7 +282,6 @@ export function Sidebar() {
   const isLoading = workflowsLoading || sessionLoading
   const initialScrollDoneRef = useRef(false)
 
-  /** Scrolls to active workflow on initial page load only */
   useEffect(() => {
     if (!workflowId || workflowsLoading || initialScrollDoneRef.current) return
     initialScrollDoneRef.current = true
@@ -296,7 +292,6 @@ export function Sidebar() {
     })
   }, [workflowId, workflowsLoading])
 
-  /** Forces sidebar to minimum width and ensures it's expanded when not on a workflow page */
   useEffect(() => {
     if (!isOnWorkflowPage) {
       if (isCollapsed) {
@@ -306,7 +301,6 @@ export function Sidebar() {
     }
   }, [isOnWorkflowPage, isCollapsed, setIsCollapsed, setSidebarWidth])
 
-  /** Creates a workflow and scrolls to it */
   const handleCreateWorkflow = useCallback(async () => {
     const workflowId = await createWorkflow()
     if (workflowId) {
@@ -316,7 +310,6 @@ export function Sidebar() {
     }
   }, [createWorkflow])
 
-  /** Creates a folder and scrolls to it */
   const handleCreateFolder = useCallback(async () => {
     const folderId = await createFolder()
     if (folderId) {
@@ -324,12 +317,10 @@ export function Sidebar() {
     }
   }, [createFolder])
 
-  /** Triggers file input for workflow import */
   const handleImportWorkflow = useCallback(() => {
     fileInputRef.current?.click()
   }, [])
 
-  /** Handles workspace switch from popover menu */
   const handleWorkspaceSwitch = useCallback(
     async (workspace: { id: string; name: string; ownerId: string; role?: string }) => {
       if (workspace.id === workspaceId) {
@@ -342,12 +333,10 @@ export function Sidebar() {
     [workspaceId, switchWorkspace]
   )
 
-  /** Toggles sidebar collapse state */
   const handleToggleCollapse = useCallback(() => {
     setIsCollapsed(!isCollapsed)
   }, [isCollapsed, setIsCollapsed])
 
-  /** Reverts to active workflow selection when clicking sidebar background */
   const handleSidebarClick = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
       const target = e.target as HTMLElement
@@ -360,7 +349,6 @@ export function Sidebar() {
     [workflowId]
   )
 
-  /** Renames a workspace */
   const handleRenameWorkspace = useCallback(
     async (workspaceIdToRename: string, newName: string) => {
       await updateWorkspaceName(workspaceIdToRename, newName)
@@ -368,7 +356,6 @@ export function Sidebar() {
     [updateWorkspaceName]
   )
 
-  /** Deletes a workspace */
   const handleDeleteWorkspace = useCallback(
     async (workspaceIdToDelete: string) => {
       const workspaceToDelete = workspaces.find((w) => w.id === workspaceIdToDelete)
@@ -379,7 +366,6 @@ export function Sidebar() {
     [workspaces, confirmDeleteWorkspace]
   )
 
-  /** Leaves a workspace */
   const handleLeaveWorkspaceWrapper = useCallback(
     async (workspaceIdToLeave: string) => {
       const workspaceToLeave = workspaces.find((w) => w.id === workspaceIdToLeave)
@@ -390,7 +376,6 @@ export function Sidebar() {
     [workspaces, handleLeaveWorkspace]
   )
 
-  /** Duplicates a workspace */
   const handleDuplicateWorkspace = useCallback(
     async (_workspaceIdToDuplicate: string, workspaceName: string) => {
       await duplicateWorkspace(workspaceName)
@@ -398,7 +383,6 @@ export function Sidebar() {
     [duplicateWorkspace]
   )
 
-  /** Exports a workspace */
   const handleExportWorkspace = useCallback(
     async (workspaceIdToExport: string, workspaceName: string) => {
       await exportWorkspace(workspaceIdToExport, workspaceName)
@@ -406,12 +390,10 @@ export function Sidebar() {
     [exportWorkspace]
   )
 
-  /** Triggers file input for workspace import */
   const handleImportWorkspace = useCallback(() => {
     workspaceFileInputRef.current?.click()
   }, [])
 
-  /** Handles workspace import file selection */
   const handleWorkspaceFileChange = useCallback(
     async (event: React.ChangeEvent<HTMLInputElement>) => {
       const files = event.target.files
@@ -427,7 +409,6 @@ export function Sidebar() {
     [importWorkspace]
   )
 
-  /** Resolves workspace ID from params or URL path */
   const resolveWorkspaceIdFromPath = useCallback((): string | undefined => {
     if (workspaceId) return workspaceId
     if (typeof window === 'undefined') return undefined
@@ -439,7 +420,6 @@ export function Sidebar() {
     return parts[idx + 1]
   }, [workspaceId])
 
-  /** Registers global sidebar commands with the central commands registry */
   useRegisterGlobalCommands(() =>
     createCommands([
       {
@@ -772,4 +752,4 @@ export function Sidebar() {
       />
     </>
   )
-}
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
index 734fed6cdf..eefb28ab00 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
 import { getNextWorkflowColor } from '@/lib/workflows/colors'
@@ -27,9 +27,21 @@ interface UseDuplicateWorkflowProps {
  */
 export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWorkflowProps) {
   const router = useRouter()
-  const { workflows } = useWorkflowRegistry()
   const duplicateMutation = useDuplicateWorkflowMutation()
 
+  const workspaceIdRef = useRef(workspaceId)
+  workspaceIdRef.current = workspaceId
+
+  const onSuccessRef = useRef(onSuccess)
+  onSuccessRef.current = onSuccess
+
+  /**
+   * Store a ref to the mutation to access isPending without causing callback recreation.
+   * The mutateAsync function from React Query is already stable.
+   */
+  const mutationRef = useRef(duplicateMutation)
+  mutationRef.current = duplicateMutation
+
   /**
    * Duplicate the workflow(s)
    * @param workflowIds - The workflow ID(s) to duplicate
@@ -40,7 +52,7 @@ export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWor
         return
       }
 
-      if (duplicateMutation.isPending) {
+      if (mutationRef.current.isPending) {
         return
       }
 
@@ -49,6 +61,8 @@ export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWor
       const duplicatedIds: string[] = []
 
       try {
+        const { workflows } = useWorkflowRegistry.getState()
+
         for (const sourceId of workflowIdsToDuplicate) {
           const sourceWorkflow = workflows[sourceId]
           if (!sourceWorkflow) {
@@ -56,8 +70,8 @@ export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWor
             continue
           }
 
-          const result = await duplicateMutation.mutateAsync({
-            workspaceId,
+          const result = await mutationRef.current.mutateAsync({
+            workspaceId: workspaceIdRef.current,
             sourceId,
             name: `${sourceWorkflow.name} (Copy)`,
             description: sourceWorkflow.description,
@@ -77,16 +91,16 @@ export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWor
         })
 
         if (duplicatedIds.length === 1) {
-          router.push(`/workspace/${workspaceId}/w/${duplicatedIds[0]}`)
+          router.push(`/workspace/${workspaceIdRef.current}/w/${duplicatedIds[0]}`)
         }
 
-        onSuccess?.()
+        onSuccessRef.current?.()
       } catch (error) {
         logger.error('Error duplicating workflow(s):', { error })
         throw error
       }
     },
-    [duplicateMutation, workflows, workspaceId, router, onSuccess]
+    [router]
   )
 
   return {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workflow.ts
index e3fa6507ab..afa812ed54 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workflow.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import {
   downloadFile,
@@ -23,9 +23,11 @@ interface UseExportWorkflowProps {
  * Hook for managing workflow export to JSON or ZIP.
  */
 export function useExportWorkflow({ onSuccess }: UseExportWorkflowProps = {}) {
-  const { workflows } = useWorkflowRegistry()
   const [isExporting, setIsExporting] = useState(false)
 
+  const onSuccessRef = useRef(onSuccess)
+  onSuccessRef.current = onSuccess
+
   /**
    * Export the workflow(s) to JSON or ZIP
    * - Single workflow: exports as JSON file
@@ -50,6 +52,7 @@ export function useExportWorkflow({ onSuccess }: UseExportWorkflowProps = {}) {
           count: workflowIdsToExport.length,
         })
 
+        const { workflows } = useWorkflowRegistry.getState()
         const exportedWorkflows = []
 
         for (const workflowId of workflowIdsToExport) {
@@ -96,7 +99,7 @@ export function useExportWorkflow({ onSuccess }: UseExportWorkflowProps = {}) {
           format: exportedWorkflows.length === 1 ? 'JSON' : 'ZIP',
         })
 
-        onSuccess?.()
+        onSuccessRef.current?.()
       } catch (error) {
         logger.error('Error exporting workflow(s):', { error })
         throw error
@@ -104,7 +107,7 @@ export function useExportWorkflow({ onSuccess }: UseExportWorkflowProps = {}) {
         setIsExporting(false)
       }
     },
-    [isExporting, workflows, onSuccess]
+    [isExporting]
   )
 
   return {
diff --git a/apps/sim/app/workspace/providers/socket-provider.tsx b/apps/sim/app/workspace/providers/socket-provider.tsx
index 434af6891b..c4753b384c 100644
--- a/apps/sim/app/workspace/providers/socket-provider.tsx
+++ b/apps/sim/app/workspace/providers/socket-provider.tsx
@@ -6,6 +6,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -739,38 +740,60 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
     eventHandlers.current.operationFailed = handler
   }, [])
 
-  return (
-    <SocketContext.Provider
-      value={{
-        socket,
-        isConnected,
-        isConnecting,
-        currentWorkflowId,
-        currentSocketId,
-        presenceUsers,
-        joinWorkflow,
-        leaveWorkflow,
-        emitWorkflowOperation,
-        emitSubblockUpdate,
-        emitVariableUpdate,
-
-        emitCursorUpdate,
-        emitSelectionUpdate,
-        onWorkflowOperation,
-        onSubblockUpdate,
-        onVariableUpdate,
-
-        onCursorUpdate,
-        onSelectionUpdate,
-        onUserJoined,
-        onUserLeft,
-        onWorkflowDeleted,
-        onWorkflowReverted,
-        onOperationConfirmed,
-        onOperationFailed,
-      }}
-    >
-      {children}
-    </SocketContext.Provider>
+  const contextValue = useMemo(
+    () => ({
+      socket,
+      isConnected,
+      isConnecting,
+      currentWorkflowId,
+      currentSocketId,
+      presenceUsers,
+      joinWorkflow,
+      leaveWorkflow,
+      emitWorkflowOperation,
+      emitSubblockUpdate,
+      emitVariableUpdate,
+      emitCursorUpdate,
+      emitSelectionUpdate,
+      onWorkflowOperation,
+      onSubblockUpdate,
+      onVariableUpdate,
+      onCursorUpdate,
+      onSelectionUpdate,
+      onUserJoined,
+      onUserLeft,
+      onWorkflowDeleted,
+      onWorkflowReverted,
+      onOperationConfirmed,
+      onOperationFailed,
+    }),
+    [
+      socket,
+      isConnected,
+      isConnecting,
+      currentWorkflowId,
+      currentSocketId,
+      presenceUsers,
+      joinWorkflow,
+      leaveWorkflow,
+      emitWorkflowOperation,
+      emitSubblockUpdate,
+      emitVariableUpdate,
+      emitCursorUpdate,
+      emitSelectionUpdate,
+      onWorkflowOperation,
+      onSubblockUpdate,
+      onVariableUpdate,
+      onCursorUpdate,
+      onSelectionUpdate,
+      onUserJoined,
+      onUserLeft,
+      onWorkflowDeleted,
+      onWorkflowReverted,
+      onOperationConfirmed,
+      onOperationFailed,
+    ]
   )
+
+  return <SocketContext.Provider value={contextValue}>{children}</SocketContext.Provider>
 }
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index 1d70fba53e..26797e7b29 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -5,6 +5,7 @@ import {
   forwardRef,
   type HTMLAttributes,
   type KeyboardEvent,
+  memo,
   type ReactNode,
   useCallback,
   useEffect,
@@ -132,643 +133,647 @@ export interface ComboboxProps
  * Provides a dropdown selection interface with keyboard navigation support.
  * Supports both select-only and editable (free-text) modes.
  */
-const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      options,
-      value,
-      multiSelectValues,
-      onChange,
-      onMultiSelectChange,
-      placeholder = 'Select...',
-      disabled,
-      editable = false,
-      overlayContent,
-      inputProps = {},
-      inputRef: externalInputRef,
-      filterOptions = editable,
-      selectedValue,
-      multiSelect = false,
-      isLoading = false,
-      error = null,
-      onOpenChange,
-      searchable = false,
-      searchPlaceholder = 'Search...',
-      align = 'start',
-      dropdownWidth = 'trigger',
-      showAllOption = false,
-      allOptionLabel = 'All',
-      groups,
-      maxHeight = 192,
-      emptyMessage,
-      ...props
-    },
-    ref
-  ) => {
-    const [open, setOpen] = useState(false)
-    const [highlightedIndex, setHighlightedIndex] = useState(-1)
-    const [searchQuery, setSearchQuery] = useState('')
-    const searchInputRef = useRef<HTMLInputElement>(null)
-    const containerRef = useRef<HTMLDivElement>(null)
-    const dropdownRef = useRef<HTMLDivElement>(null)
-    const internalInputRef = useRef<HTMLInputElement>(null)
-    const inputRef = externalInputRef || internalInputRef
-
-    const effectiveSelectedValue = selectedValue ?? value
-
-    // Flatten groups into options if groups are provided
-    const allOptions = useMemo(() => {
-      if (groups) {
-        return groups.flatMap((group) => group.items)
-      }
-      return options
-    }, [groups, options])
-
-    const selectedOption = useMemo(
-      () => allOptions.find((opt) => opt.value === effectiveSelectedValue),
-      [allOptions, effectiveSelectedValue]
-    )
-
-    /**
-     * Filter options based on current value or search query
-     */
-    const filteredOptions = useMemo(() => {
-      let result = allOptions
-
-      // Filter by editable input value
-      if (filterOptions && value && open) {
-        const currentValue = value.toString().toLowerCase()
-        const exactMatch = allOptions.find(
-          (opt) => opt.value === value || opt.label.toLowerCase() === currentValue
-        )
-        if (!exactMatch) {
+const Combobox = memo(
+  forwardRef<HTMLDivElement, ComboboxProps>(
+    (
+      {
+        className,
+        variant,
+        size,
+        options,
+        value,
+        multiSelectValues,
+        onChange,
+        onMultiSelectChange,
+        placeholder = 'Select...',
+        disabled,
+        editable = false,
+        overlayContent,
+        inputProps = {},
+        inputRef: externalInputRef,
+        filterOptions = editable,
+        selectedValue,
+        multiSelect = false,
+        isLoading = false,
+        error = null,
+        onOpenChange,
+        searchable = false,
+        searchPlaceholder = 'Search...',
+        align = 'start',
+        dropdownWidth = 'trigger',
+        showAllOption = false,
+        allOptionLabel = 'All',
+        groups,
+        maxHeight = 192,
+        emptyMessage,
+        ...props
+      },
+      ref
+    ) => {
+      const [open, setOpen] = useState(false)
+      const [highlightedIndex, setHighlightedIndex] = useState(-1)
+      const [searchQuery, setSearchQuery] = useState('')
+      const searchInputRef = useRef<HTMLInputElement>(null)
+      const containerRef = useRef<HTMLDivElement>(null)
+      const dropdownRef = useRef<HTMLDivElement>(null)
+      const internalInputRef = useRef<HTMLInputElement>(null)
+      const inputRef = externalInputRef || internalInputRef
+
+      const effectiveSelectedValue = selectedValue ?? value
+
+      // Flatten groups into options if groups are provided
+      const allOptions = useMemo(() => {
+        if (groups) {
+          return groups.flatMap((group) => group.items)
+        }
+        return options
+      }, [groups, options])
+
+      const selectedOption = useMemo(
+        () => allOptions.find((opt) => opt.value === effectiveSelectedValue),
+        [allOptions, effectiveSelectedValue]
+      )
+
+      /**
+       * Filter options based on current value or search query
+       */
+      const filteredOptions = useMemo(() => {
+        let result = allOptions
+
+        // Filter by editable input value
+        if (filterOptions && value && open) {
+          const currentValue = value.toString().toLowerCase()
+          const exactMatch = allOptions.find(
+            (opt) => opt.value === value || opt.label.toLowerCase() === currentValue
+          )
+          if (!exactMatch) {
+            result = result.filter((option) => {
+              const label = option.label.toLowerCase()
+              const optionValue = option.value.toLowerCase()
+              return label.includes(currentValue) || optionValue.includes(currentValue)
+            })
+          }
+        }
+
+        // Filter by search query (for searchable mode)
+        if (searchable && searchQuery) {
+          const query = searchQuery.toLowerCase()
           result = result.filter((option) => {
             const label = option.label.toLowerCase()
             const optionValue = option.value.toLowerCase()
-            return label.includes(currentValue) || optionValue.includes(currentValue)
+            return label.includes(query) || optionValue.includes(query)
           })
         }
-      }
 
-      // Filter by search query (for searchable mode)
-      if (searchable && searchQuery) {
+        return result
+      }, [allOptions, value, open, filterOptions, searchable, searchQuery])
+
+      /**
+       * Filter groups based on search query (preserves group structure)
+       */
+      const filteredGroups = useMemo(() => {
+        if (!groups) return null
+        if (!searchable || !searchQuery) return groups
+
         const query = searchQuery.toLowerCase()
-        result = result.filter((option) => {
-          const label = option.label.toLowerCase()
-          const optionValue = option.value.toLowerCase()
-          return label.includes(query) || optionValue.includes(query)
-        })
-      }
-
-      return result
-    }, [allOptions, value, open, filterOptions, searchable, searchQuery])
-
-    /**
-     * Filter groups based on search query (preserves group structure)
-     */
-    const filteredGroups = useMemo(() => {
-      if (!groups) return null
-      if (!searchable || !searchQuery) return groups
-
-      const query = searchQuery.toLowerCase()
-      return groups
-        .map((group) => ({
-          ...group,
-          items: group.items.filter((option) => {
-            const label = option.label.toLowerCase()
-            const optionValue = option.value.toLowerCase()
-            return label.includes(query) || optionValue.includes(query)
-          }),
-        }))
-        .filter((group) => group.items.length > 0)
-    }, [groups, searchable, searchQuery])
-
-    /**
-     * Handles selection of an option
-     */
-    const handleSelect = useCallback(
-      (selectedValue: string, customOnSelect?: () => void) => {
-        // If option has custom onSelect, use it instead
-        if (customOnSelect) {
-          customOnSelect()
-          setOpen(false)
-          setHighlightedIndex(-1)
-          setSearchQuery('')
-          return
-        }
+        return groups
+          .map((group) => ({
+            ...group,
+            items: group.items.filter((option) => {
+              const label = option.label.toLowerCase()
+              const optionValue = option.value.toLowerCase()
+              return label.includes(query) || optionValue.includes(query)
+            }),
+          }))
+          .filter((group) => group.items.length > 0)
+      }, [groups, searchable, searchQuery])
+
+      /**
+       * Handles selection of an option
+       */
+      const handleSelect = useCallback(
+        (selectedValue: string, customOnSelect?: () => void) => {
+          // If option has custom onSelect, use it instead
+          if (customOnSelect) {
+            customOnSelect()
+            setOpen(false)
+            setHighlightedIndex(-1)
+            setSearchQuery('')
+            return
+          }
 
-        if (multiSelect && onMultiSelectChange) {
-          const currentValues = multiSelectValues || []
-          const newValues = currentValues.includes(selectedValue)
-            ? currentValues.filter((v) => v !== selectedValue)
-            : [...currentValues, selectedValue]
-          onMultiSelectChange(newValues)
-        } else {
-          onChange?.(selectedValue)
-          setOpen(false)
-          setHighlightedIndex(-1)
-          setSearchQuery('')
-          if (editable && inputRef.current) {
-            inputRef.current.blur()
+          if (multiSelect && onMultiSelectChange) {
+            const currentValues = multiSelectValues || []
+            const newValues = currentValues.includes(selectedValue)
+              ? currentValues.filter((v) => v !== selectedValue)
+              : [...currentValues, selectedValue]
+            onMultiSelectChange(newValues)
+          } else {
+            onChange?.(selectedValue)
+            setOpen(false)
+            setHighlightedIndex(-1)
+            setSearchQuery('')
+            if (editable && inputRef.current) {
+              inputRef.current.blur()
+            }
           }
-        }
-      },
-      [onChange, multiSelect, onMultiSelectChange, multiSelectValues, editable, inputRef]
-    )
-
-    /**
-     * Handles input change for editable mode
-     */
-    const handleInputChange = useCallback(
-      (e: ChangeEvent<HTMLInputElement>) => {
-        if (disabled || !editable) return
-        onChange?.(e.target.value)
-      },
-      [disabled, editable, onChange]
-    )
-
-    /**
-     * Handles focus for editable mode
-     */
-    const handleFocus = useCallback(() => {
-      if (!disabled) {
-        setOpen(true)
-        setHighlightedIndex(-1)
-      }
-    }, [disabled])
-
-    /**
-     * Handles blur for editable mode
-     */
-    const handleBlur = useCallback(() => {
-      // Delay to allow dropdown clicks
-      setTimeout(() => {
-        const activeElement = document.activeElement
-        // Check if focus is in the container, dropdown, or search input
-        const isInContainer = containerRef.current?.contains(activeElement)
-        const isInDropdown = dropdownRef.current?.contains(activeElement)
-        const isSearchInput = activeElement === searchInputRef.current
-        if (!activeElement || (!isInContainer && !isInDropdown && !isSearchInput)) {
-          setOpen(false)
+        },
+        [onChange, multiSelect, onMultiSelectChange, multiSelectValues, editable, inputRef]
+      )
+
+      /**
+       * Handles input change for editable mode
+       */
+      const handleInputChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+          if (disabled || !editable) return
+          onChange?.(e.target.value)
+        },
+        [disabled, editable, onChange]
+      )
+
+      /**
+       * Handles focus for editable mode
+       */
+      const handleFocus = useCallback(() => {
+        if (!disabled) {
+          setOpen(true)
           setHighlightedIndex(-1)
-          setSearchQuery('')
         }
-      }, 150)
-    }, [])
-
-    /**
-     * Handles keyboard navigation
-     */
-    const handleKeyDown = useCallback(
-      (e: KeyboardEvent<HTMLDivElement | HTMLInputElement>) => {
-        if (disabled) return
-
-        if (e.key === 'Escape') {
-          setOpen(false)
-          setHighlightedIndex(-1)
-          setSearchQuery('')
-          if (editable && inputRef.current) {
-            inputRef.current.blur()
+      }, [disabled])
+
+      /**
+       * Handles blur for editable mode
+       */
+      const handleBlur = useCallback(() => {
+        // Delay to allow dropdown clicks
+        setTimeout(() => {
+          const activeElement = document.activeElement
+          // Check if focus is in the container, dropdown, or search input
+          const isInContainer = containerRef.current?.contains(activeElement)
+          const isInDropdown = dropdownRef.current?.contains(activeElement)
+          const isSearchInput = activeElement === searchInputRef.current
+          if (!activeElement || (!isInContainer && !isInDropdown && !isSearchInput)) {
+            setOpen(false)
+            setHighlightedIndex(-1)
+            setSearchQuery('')
+          }
+        }, 150)
+      }, [])
+
+      /**
+       * Handles keyboard navigation
+       */
+      const handleKeyDown = useCallback(
+        (e: KeyboardEvent<HTMLDivElement | HTMLInputElement>) => {
+          if (disabled) return
+
+          if (e.key === 'Escape') {
+            setOpen(false)
+            setHighlightedIndex(-1)
+            setSearchQuery('')
+            if (editable && inputRef.current) {
+              inputRef.current.blur()
+            }
+            return
           }
-          return
-        }
 
-        if (e.key === 'Enter') {
-          if (open && highlightedIndex >= 0) {
-            e.preventDefault()
-            const selectedOption = filteredOptions[highlightedIndex]
-            if (selectedOption && !selectedOption.disabled) {
-              handleSelect(selectedOption.value, selectedOption.onSelect)
+          if (e.key === 'Enter') {
+            if (open && highlightedIndex >= 0) {
+              e.preventDefault()
+              const selectedOption = filteredOptions[highlightedIndex]
+              if (selectedOption && !selectedOption.disabled) {
+                handleSelect(selectedOption.value, selectedOption.onSelect)
+              }
+            } else if (!editable) {
+              e.preventDefault()
+              setOpen(true)
+              setHighlightedIndex(0)
             }
-          } else if (!editable) {
+            return
+          }
+
+          if (e.key === ' ' && !editable) {
             e.preventDefault()
-            setOpen(true)
-            setHighlightedIndex(0)
+            if (!open) {
+              setOpen(true)
+              setHighlightedIndex(0)
+            }
+            return
           }
-          return
-        }
 
-        if (e.key === ' ' && !editable) {
-          e.preventDefault()
-          if (!open) {
-            setOpen(true)
-            setHighlightedIndex(0)
+          if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            if (!open) {
+              setOpen(true)
+              setHighlightedIndex(0)
+            } else {
+              setHighlightedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : 0))
+            }
           }
-          return
-        }
 
-        if (e.key === 'ArrowDown') {
-          e.preventDefault()
-          if (!open) {
-            setOpen(true)
-            setHighlightedIndex(0)
-          } else {
-            setHighlightedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : 0))
+          if (e.key === 'ArrowUp') {
+            e.preventDefault()
+            if (open) {
+              setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredOptions.length - 1))
+            }
           }
+        },
+        [disabled, open, highlightedIndex, filteredOptions, handleSelect, editable, inputRef]
+      )
+
+      /**
+       * Handles toggle of dropdown (for select mode only)
+       */
+      const handleToggle = useCallback(() => {
+        if (!disabled && !editable) {
+          setOpen((prev) => !prev)
+          setHighlightedIndex(-1)
         }
+      }, [disabled, editable])
 
-        if (e.key === 'ArrowUp') {
+      /**
+       * Handles chevron click for editable mode
+       */
+      const handleChevronClick = useCallback(
+        (e: React.MouseEvent) => {
           e.preventDefault()
-          if (open) {
-            setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredOptions.length - 1))
+          e.stopPropagation()
+          if (!disabled) {
+            setOpen((prev) => {
+              const newOpen = !prev
+              if (newOpen && editable && inputRef.current) {
+                inputRef.current.focus()
+              }
+              return newOpen
+            })
+          }
+        },
+        [disabled, editable, inputRef]
+      )
+
+      /**
+       * Scroll highlighted option into view
+       */
+      useEffect(() => {
+        if (highlightedIndex >= 0 && dropdownRef.current) {
+          const highlightedElement = dropdownRef.current.querySelector(
+            `[data-option-index="${highlightedIndex}"]`
+          )
+          if (highlightedElement) {
+            highlightedElement.scrollIntoView({
+              behavior: 'smooth',
+              block: 'nearest',
+            })
           }
         }
-      },
-      [disabled, open, highlightedIndex, filteredOptions, handleSelect, editable, inputRef]
-    )
-
-    /**
-     * Handles toggle of dropdown (for select mode only)
-     */
-    const handleToggle = useCallback(() => {
-      if (!disabled && !editable) {
-        setOpen((prev) => !prev)
-        setHighlightedIndex(-1)
-      }
-    }, [disabled, editable])
-
-    /**
-     * Handles chevron click for editable mode
-     */
-    const handleChevronClick = useCallback(
-      (e: React.MouseEvent) => {
-        e.preventDefault()
-        e.stopPropagation()
-        if (!disabled) {
-          setOpen((prev) => {
-            const newOpen = !prev
-            if (newOpen && editable && inputRef.current) {
-              inputRef.current.focus()
-            }
-            return newOpen
-          })
-        }
-      },
-      [disabled, editable, inputRef]
-    )
-
-    /**
-     * Scroll highlighted option into view
-     */
-    useEffect(() => {
-      if (highlightedIndex >= 0 && dropdownRef.current) {
-        const highlightedElement = dropdownRef.current.querySelector(
-          `[data-option-index="${highlightedIndex}"]`
-        )
-        if (highlightedElement) {
-          highlightedElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest',
-          })
-        }
-      }
-    }, [highlightedIndex])
-
-    /**
-     * Adjust highlighted index when filtered options change
-     */
-    useEffect(() => {
-      setHighlightedIndex((prev) => {
-        if (prev >= 0 && prev < filteredOptions.length) {
-          return prev
-        }
-        return -1
-      })
-    }, [filteredOptions])
-
-    const SelectedIcon = selectedOption?.icon
-
-    return (
-      <Popover
-        open={open}
-        onOpenChange={(next) => {
-          setOpen(next)
-          if (!next) setSearchQuery('')
-          onOpenChange?.(next)
-        }}
-      >
-        <div ref={containerRef} className='relative w-full' {...props}>
-          <PopoverAnchor asChild>
-            <div className='w-full'>
-              {editable ? (
-                <div className='group relative'>
-                  <Input
-                    ref={inputRef}
+      }, [highlightedIndex])
+
+      /**
+       * Adjust highlighted index when filtered options change
+       */
+      useEffect(() => {
+        setHighlightedIndex((prev) => {
+          if (prev >= 0 && prev < filteredOptions.length) {
+            return prev
+          }
+          return -1
+        })
+      }, [filteredOptions])
+
+      const SelectedIcon = selectedOption?.icon
+
+      return (
+        <Popover
+          open={open}
+          onOpenChange={(next) => {
+            setOpen(next)
+            if (!next) setSearchQuery('')
+            onOpenChange?.(next)
+          }}
+        >
+          <div ref={containerRef} className='relative w-full' {...props}>
+            <PopoverAnchor asChild>
+              <div className='w-full'>
+                {editable ? (
+                  <div className='group relative'>
+                    <Input
+                      ref={inputRef}
+                      className={cn(
+                        'w-full pr-[40px] font-medium transition-colors hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
+                        (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
+                        SelectedIcon && !overlayContent && 'pl-[28px]',
+                        className
+                      )}
+                      placeholder={placeholder}
+                      value={value ?? ''}
+                      onChange={handleInputChange}
+                      onFocus={handleFocus}
+                      onBlur={handleBlur}
+                      onKeyDown={handleKeyDown}
+                      disabled={disabled}
+                      {...inputProps}
+                    />
+                    {(overlayContent || SelectedIcon) && (
+                      <div
+                        className={cn(
+                          'pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                          disabled && 'opacity-50'
+                        )}
+                      >
+                        {overlayContent ? (
+                          overlayContent
+                        ) : (
+                          <>
+                            {SelectedIcon && (
+                              <SelectedIcon className='mr-[8px] h-3 w-3 flex-shrink-0' />
+                            )}
+                            <span className='truncate text-[var(--text-primary)]'>
+                              {selectedOption?.label}
+                            </span>
+                          </>
+                        )}
+                      </div>
+                    )}
+                    <div
+                      className='-translate-y-1/2 absolute top-1/2 right-[4px] z-10 flex h-6 w-6 cursor-pointer items-center justify-center'
+                      onMouseDown={handleChevronClick}
+                    >
+                      <ChevronDown
+                        className={cn(
+                          'h-4 w-4 opacity-50 transition-transform',
+                          open && 'rotate-180'
+                        )}
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div
+                    ref={ref}
+                    role='combobox'
+                    aria-expanded={open}
+                    aria-haspopup='listbox'
+                    aria-disabled={disabled}
+                    tabIndex={disabled ? -1 : 0}
                     className={cn(
-                      'w-full pr-[40px] font-medium transition-colors hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
-                      (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
-                      SelectedIcon && !overlayContent && 'pl-[28px]',
+                      comboboxVariants({ variant, size }),
+                      'relative cursor-pointer items-center justify-between',
+                      disabled && 'cursor-not-allowed opacity-50',
                       className
                     )}
-                    placeholder={placeholder}
-                    value={value ?? ''}
-                    onChange={handleInputChange}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
+                    onClick={handleToggle}
                     onKeyDown={handleKeyDown}
-                    disabled={disabled}
-                    {...inputProps}
-                  />
-                  {(overlayContent || SelectedIcon) && (
-                    <div
+                  >
+                    <span
                       className={cn(
-                        'pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
-                        disabled && 'opacity-50'
+                        'flex-1 truncate',
+                        !selectedOption && 'text-[var(--text-muted)]',
+                        overlayContent && 'text-transparent'
                       )}
                     >
-                      {overlayContent ? (
-                        overlayContent
-                      ) : (
-                        <>
-                          {SelectedIcon && (
-                            <SelectedIcon className='mr-[8px] h-3 w-3 flex-shrink-0' />
-                          )}
-                          <span className='truncate text-[var(--text-primary)]'>
-                            {selectedOption?.label}
-                          </span>
-                        </>
-                      )}
-                    </div>
-                  )}
-                  <div
-                    className='-translate-y-1/2 absolute top-1/2 right-[4px] z-10 flex h-6 w-6 cursor-pointer items-center justify-center'
-                    onMouseDown={handleChevronClick}
-                  >
+                      {selectedOption ? selectedOption.label : placeholder}
+                    </span>
                     <ChevronDown
                       className={cn(
-                        'h-4 w-4 opacity-50 transition-transform',
+                        'ml-[8px] h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
                         open && 'rotate-180'
                       )}
                     />
-                  </div>
-                </div>
-              ) : (
-                <div
-                  ref={ref}
-                  role='combobox'
-                  aria-expanded={open}
-                  aria-haspopup='listbox'
-                  aria-disabled={disabled}
-                  tabIndex={disabled ? -1 : 0}
-                  className={cn(
-                    comboboxVariants({ variant, size }),
-                    'relative cursor-pointer items-center justify-between',
-                    disabled && 'cursor-not-allowed opacity-50',
-                    className
-                  )}
-                  onClick={handleToggle}
-                  onKeyDown={handleKeyDown}
-                >
-                  <span
-                    className={cn(
-                      'flex-1 truncate',
-                      !selectedOption && 'text-[var(--text-muted)]',
-                      overlayContent && 'text-transparent'
-                    )}
-                  >
-                    {selectedOption ? selectedOption.label : placeholder}
-                  </span>
-                  <ChevronDown
-                    className={cn(
-                      'ml-[8px] h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
-                      open && 'rotate-180'
+                    {overlayContent && (
+                      <div className='pointer-events-none absolute inset-y-0 right-[24px] left-0 flex items-center px-[8px]'>
+                        <div className='w-full truncate'>{overlayContent}</div>
+                      </div>
                     )}
-                  />
-                  {overlayContent && (
-                    <div className='pointer-events-none absolute inset-y-0 right-[24px] left-0 flex items-center px-[8px]'>
-                      <div className='w-full truncate'>{overlayContent}</div>
-                    </div>
-                  )}
-                </div>
+                  </div>
+                )}
+              </div>
+            </PopoverAnchor>
+
+            <PopoverContent
+              side='bottom'
+              align={align}
+              sideOffset={4}
+              className={cn(
+                'rounded-[6px] border border-[var(--border-1)] p-0',
+                dropdownWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]'
               )}
-            </div>
-          </PopoverAnchor>
-
-          <PopoverContent
-            side='bottom'
-            align={align}
-            sideOffset={4}
-            className={cn(
-              'rounded-[6px] border border-[var(--border-1)] p-0',
-              dropdownWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]'
-            )}
-            style={typeof dropdownWidth === 'number' ? { width: `${dropdownWidth}px` } : undefined}
-            onOpenAutoFocus={(e) => {
-              e.preventDefault()
-              // Only auto-focus search input when not in editable mode
-              if (searchable && !editable) {
-                setTimeout(() => searchInputRef.current?.focus(), 0)
+              style={
+                typeof dropdownWidth === 'number' ? { width: `${dropdownWidth}px` } : undefined
               }
-            }}
-            onInteractOutside={(e) => {
-              // If the user clicks the anchor/trigger while the popover is open,
-              // prevent Radix from auto-closing on mousedown. Our own toggle handler
-              // on the anchor will close it explicitly, avoiding close→reopen races.
-              const target = e.target as Node
-              if (containerRef.current?.contains(target)) {
+              onOpenAutoFocus={(e) => {
                 e.preventDefault()
-              }
-            }}
-          >
-            {searchable && (
-              <div className='flex items-center px-[10px] pt-[8px] pb-[4px]'>
-                <Search className='mr-[7px] ml-[1px] h-[13px] w-[13px] shrink-0 text-[var(--text-muted)]' />
-                <input
-                  ref={searchInputRef}
-                  className='w-full bg-transparent font-base text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none'
-                  placeholder={searchPlaceholder}
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Escape') {
-                      setOpen(false)
-                      setSearchQuery('')
-                    }
-                  }}
-                />
-              </div>
-            )}
-            <PopoverScrollArea
-              className='!flex-none p-[4px]'
-              style={{ maxHeight: `${maxHeight}px` }}
-              onWheelCapture={(e) => {
-                const target = e.currentTarget
-                const { scrollTop, scrollHeight, clientHeight } = target
-                const delta = e.deltaY
-                const isScrollingDown = delta > 0
-                const isScrollingUp = delta < 0
-                const isAtTop = scrollTop === 0
-                const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1
-                if ((isScrollingDown && !isAtBottom) || (isScrollingUp && !isAtTop)) {
-                  e.stopPropagation()
+                // Only auto-focus search input when not in editable mode
+                if (searchable && !editable) {
+                  setTimeout(() => searchInputRef.current?.focus(), 0)
+                }
+              }}
+              onInteractOutside={(e) => {
+                // If the user clicks the anchor/trigger while the popover is open,
+                // prevent Radix from auto-closing on mousedown. Our own toggle handler
+                // on the anchor will close it explicitly, avoiding close→reopen races.
+                const target = e.target as Node
+                if (containerRef.current?.contains(target)) {
+                  e.preventDefault()
                 }
               }}
             >
-              <div ref={dropdownRef} role='listbox'>
-                {isLoading ? (
-                  <div className='flex items-center justify-center py-[14px]'>
-                    <Loader2 className='h-[16px] w-[16px] animate-spin text-[var(--text-muted)]' />
-                    <span className='ml-[8px] font-base text-[12px] text-[var(--text-muted)]'>
-                      Loading options...
-                    </span>
-                  </div>
-                ) : error ? (
-                  <div className='px-[6px] py-[14px] text-center font-base text-[12px] text-red-500'>
-                    {error}
-                  </div>
-                ) : filteredOptions.length === 0 ? (
-                  <div className='py-[14px] text-center font-base text-[12px] text-[var(--text-muted)]'>
-                    {emptyMessage ||
-                      (searchQuery || (editable && value)
-                        ? 'No matching options found'
-                        : 'No options available')}
-                  </div>
-                ) : filteredGroups ? (
-                  // Render grouped options with section headers
-                  <div className='space-y-[2px]'>
-                    {filteredGroups.map((group, groupIndex) => (
-                      <div key={group.section || `group-${groupIndex}`}>
-                        {group.sectionElement
-                          ? group.sectionElement
-                          : group.section && (
-                              <div className='px-[6px] py-[4px] font-base text-[11px] text-[var(--text-tertiary)] first:pt-[4px]'>
-                                {group.section}
-                              </div>
-                            )}
-                        {group.items.map((option) => {
-                          const isSelected = multiSelect
-                            ? multiSelectValues?.includes(option.value)
-                            : effectiveSelectedValue === option.value
-                          const globalIndex = filteredOptions.findIndex(
-                            (o) => o.value === option.value
-                          )
-                          const isHighlighted = globalIndex === highlightedIndex
-                          const OptionIcon = option.icon
-
-                          return (
-                            <div
-                              key={option.value}
-                              role='option'
-                              aria-selected={isSelected}
-                              aria-disabled={option.disabled}
-                              data-option-index={globalIndex}
-                              onMouseDown={(e) => {
-                                e.preventDefault()
-                                e.stopPropagation()
-                                if (!option.disabled) {
-                                  handleSelect(option.value, option.onSelect)
-                                }
-                              }}
-                              onMouseEnter={() =>
-                                !option.disabled && setHighlightedIndex(globalIndex)
-                              }
-                              className={cn(
-                                'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
-                                size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                                'hover:bg-[var(--border-1)]',
-                                (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
-                                option.disabled && 'cursor-not-allowed opacity-50'
-                              )}
-                            >
-                              {option.iconElement
-                                ? option.iconElement
-                                : OptionIcon && (
-                                    <OptionIcon className='h-[14px] w-[14px] flex-shrink-0' />
-                                  )}
-                              <span className='flex-1 truncate text-[var(--text-primary)]'>
-                                {option.label}
-                              </span>
-                              {multiSelect && isSelected && (
-                                <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+              {searchable && (
+                <div className='flex items-center px-[10px] pt-[8px] pb-[4px]'>
+                  <Search className='mr-[7px] ml-[1px] h-[13px] w-[13px] shrink-0 text-[var(--text-muted)]' />
+                  <input
+                    ref={searchInputRef}
+                    className='w-full bg-transparent font-base text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none'
+                    placeholder={searchPlaceholder}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Escape') {
+                        setOpen(false)
+                        setSearchQuery('')
+                      }
+                    }}
+                  />
+                </div>
+              )}
+              <PopoverScrollArea
+                className='!flex-none p-[4px]'
+                style={{ maxHeight: `${maxHeight}px` }}
+                onWheelCapture={(e) => {
+                  const target = e.currentTarget
+                  const { scrollTop, scrollHeight, clientHeight } = target
+                  const delta = e.deltaY
+                  const isScrollingDown = delta > 0
+                  const isScrollingUp = delta < 0
+                  const isAtTop = scrollTop === 0
+                  const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1
+                  if ((isScrollingDown && !isAtBottom) || (isScrollingUp && !isAtTop)) {
+                    e.stopPropagation()
+                  }
+                }}
+              >
+                <div ref={dropdownRef} role='listbox'>
+                  {isLoading ? (
+                    <div className='flex items-center justify-center py-[14px]'>
+                      <Loader2 className='h-[16px] w-[16px] animate-spin text-[var(--text-muted)]' />
+                      <span className='ml-[8px] font-base text-[12px] text-[var(--text-muted)]'>
+                        Loading options...
+                      </span>
+                    </div>
+                  ) : error ? (
+                    <div className='px-[6px] py-[14px] text-center font-base text-[12px] text-red-500'>
+                      {error}
+                    </div>
+                  ) : filteredOptions.length === 0 ? (
+                    <div className='py-[14px] text-center font-base text-[12px] text-[var(--text-muted)]'>
+                      {emptyMessage ||
+                        (searchQuery || (editable && value)
+                          ? 'No matching options found'
+                          : 'No options available')}
+                    </div>
+                  ) : filteredGroups ? (
+                    // Render grouped options with section headers
+                    <div className='space-y-[2px]'>
+                      {filteredGroups.map((group, groupIndex) => (
+                        <div key={group.section || `group-${groupIndex}`}>
+                          {group.sectionElement
+                            ? group.sectionElement
+                            : group.section && (
+                                <div className='px-[6px] py-[4px] font-base text-[11px] text-[var(--text-tertiary)] first:pt-[4px]'>
+                                  {group.section}
+                                </div>
                               )}
-                            </div>
-                          )
-                        })}
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  // Render flat options (no groups)
-                  <div className='space-y-[2px]'>
-                    {showAllOption && multiSelect && (
-                      <div
-                        role='option'
-                        aria-selected={!multiSelectValues?.length}
-                        data-option-index={-1}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                          onMultiSelectChange?.([])
-                        }}
-                        onMouseEnter={() => setHighlightedIndex(-1)}
-                        className={cn(
-                          'relative flex cursor-pointer select-none items-center rounded-[4px] px-[6px] font-medium font-sans',
-                          size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                          'hover:bg-[var(--border-1)]',
-                          !multiSelectValues?.length && 'bg-[var(--border-1)]'
-                        )}
-                      >
-                        <span className='flex-1 truncate text-[var(--text-primary)]'>
-                          {allOptionLabel}
-                        </span>
-                      </div>
-                    )}
-                    {filteredOptions.map((option, index) => {
-                      const isSelected = multiSelect
-                        ? multiSelectValues?.includes(option.value)
-                        : effectiveSelectedValue === option.value
-                      const isHighlighted = index === highlightedIndex
-                      const OptionIcon = option.icon
-
-                      return (
+                          {group.items.map((option) => {
+                            const isSelected = multiSelect
+                              ? multiSelectValues?.includes(option.value)
+                              : effectiveSelectedValue === option.value
+                            const globalIndex = filteredOptions.findIndex(
+                              (o) => o.value === option.value
+                            )
+                            const isHighlighted = globalIndex === highlightedIndex
+                            const OptionIcon = option.icon
+
+                            return (
+                              <div
+                                key={option.value}
+                                role='option'
+                                aria-selected={isSelected}
+                                aria-disabled={option.disabled}
+                                data-option-index={globalIndex}
+                                onMouseDown={(e) => {
+                                  e.preventDefault()
+                                  e.stopPropagation()
+                                  if (!option.disabled) {
+                                    handleSelect(option.value, option.onSelect)
+                                  }
+                                }}
+                                onMouseEnter={() =>
+                                  !option.disabled && setHighlightedIndex(globalIndex)
+                                }
+                                className={cn(
+                                  'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
+                                  size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
+                                  'hover:bg-[var(--border-1)]',
+                                  (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
+                                  option.disabled && 'cursor-not-allowed opacity-50'
+                                )}
+                              >
+                                {option.iconElement
+                                  ? option.iconElement
+                                  : OptionIcon && (
+                                      <OptionIcon className='h-[14px] w-[14px] flex-shrink-0' />
+                                    )}
+                                <span className='flex-1 truncate text-[var(--text-primary)]'>
+                                  {option.label}
+                                </span>
+                                {multiSelect && isSelected && (
+                                  <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                                )}
+                              </div>
+                            )
+                          })}
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    // Render flat options (no groups)
+                    <div className='space-y-[2px]'>
+                      {showAllOption && multiSelect && (
                         <div
-                          key={option.value}
                           role='option'
-                          aria-selected={isSelected}
-                          aria-disabled={option.disabled}
-                          data-option-index={index}
+                          aria-selected={!multiSelectValues?.length}
+                          data-option-index={-1}
                           onMouseDown={(e) => {
                             e.preventDefault()
                             e.stopPropagation()
-                            if (!option.disabled) {
-                              handleSelect(option.value, option.onSelect)
-                            }
+                            onMultiSelectChange?.([])
                           }}
-                          onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}
+                          onMouseEnter={() => setHighlightedIndex(-1)}
                           className={cn(
-                            'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
+                            'relative flex cursor-pointer select-none items-center rounded-[4px] px-[6px] font-medium font-sans',
                             size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
                             'hover:bg-[var(--border-1)]',
-                            (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
-                            option.disabled && 'cursor-not-allowed opacity-50'
+                            !multiSelectValues?.length && 'bg-[var(--border-1)]'
                           )}
                         >
-                          {option.iconElement
-                            ? option.iconElement
-                            : OptionIcon && (
-                                <OptionIcon className='h-[14px] w-[14px] flex-shrink-0' />
-                              )}
                           <span className='flex-1 truncate text-[var(--text-primary)]'>
-                            {option.label}
+                            {allOptionLabel}
                           </span>
-                          {multiSelect && isSelected && (
-                            <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
-                          )}
                         </div>
-                      )
-                    })}
-                  </div>
-                )}
-              </div>
-            </PopoverScrollArea>
-          </PopoverContent>
-        </div>
-      </Popover>
-    )
-  }
+                      )}
+                      {filteredOptions.map((option, index) => {
+                        const isSelected = multiSelect
+                          ? multiSelectValues?.includes(option.value)
+                          : effectiveSelectedValue === option.value
+                        const isHighlighted = index === highlightedIndex
+                        const OptionIcon = option.icon
+
+                        return (
+                          <div
+                            key={option.value}
+                            role='option'
+                            aria-selected={isSelected}
+                            aria-disabled={option.disabled}
+                            data-option-index={index}
+                            onMouseDown={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                              if (!option.disabled) {
+                                handleSelect(option.value, option.onSelect)
+                              }
+                            }}
+                            onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}
+                            className={cn(
+                              'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
+                              size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
+                              'hover:bg-[var(--border-1)]',
+                              (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
+                              option.disabled && 'cursor-not-allowed opacity-50'
+                            )}
+                          >
+                            {option.iconElement
+                              ? option.iconElement
+                              : OptionIcon && (
+                                  <OptionIcon className='h-[14px] w-[14px] flex-shrink-0' />
+                                )}
+                            <span className='flex-1 truncate text-[var(--text-primary)]'>
+                              {option.label}
+                            </span>
+                            {multiSelect && isSelected && (
+                              <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+              </PopoverScrollArea>
+            </PopoverContent>
+          </div>
+        </Popover>
+      )
+    }
+  )
 )
 
 Combobox.displayName = 'Combobox'
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index 32a62e71e3..a476a8b78e 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -200,7 +200,7 @@ const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
       )}
       {...props}
     >
-      <DialogPrimitive.Title className='min-w-0 truncate font-medium text-[16px] text-[var(--text-primary)]'>
+      <DialogPrimitive.Title className='min-w-0 font-medium text-[16px] text-[var(--text-primary)] leading-snug'>
         {children}
       </DialogPrimitive.Title>
       <DialogPrimitive.Close asChild>
diff --git a/apps/sim/hooks/use-collaborative-workflow.ts b/apps/sim/hooks/use-collaborative-workflow.ts
index f77b749c9d..28940428f7 100644
--- a/apps/sim/hooks/use-collaborative-workflow.ts
+++ b/apps/sim/hooks/use-collaborative-workflow.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import type { Edge } from 'reactflow'
+import { useShallow } from 'zustand/react/shallow'
 import { useSession } from '@/lib/auth/auth-client'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { getBlock } from '@/blocks'
@@ -128,12 +129,14 @@ export function useCollaborativeWorkflow() {
     onOperationFailed,
   } = useSocket()
 
-  const { activeWorkflowId } = useWorkflowRegistry()
-  const workflowStore = useWorkflowStore()
-  const subBlockStore = useSubBlockStore()
-  const variablesStore = useVariablesStore()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const { data: session } = useSession()
-  const { hasActiveDiff, isShowingDiff } = useWorkflowDiffStore()
+  const { hasActiveDiff, isShowingDiff } = useWorkflowDiffStore(
+    useShallow((state) => ({
+      hasActiveDiff: state.hasActiveDiff,
+      isShowingDiff: state.isShowingDiff,
+    }))
+  )
   const isBaselineDiffView = hasActiveDiff && !isShowingDiff
 
   // Track if we're applying remote changes to avoid infinite loops
@@ -198,17 +201,15 @@ export function useCollaborativeWorkflow() {
         if (target === OPERATION_TARGETS.BLOCK) {
           switch (operation) {
             case BLOCK_OPERATIONS.UPDATE_NAME:
-              workflowStore.updateBlockName(payload.id, payload.name)
+              useWorkflowStore.getState().updateBlockName(payload.id, payload.name)
               break
             case BLOCK_OPERATIONS.UPDATE_ADVANCED_MODE:
-              workflowStore.setBlockAdvancedMode(payload.id, payload.advancedMode)
+              useWorkflowStore.getState().setBlockAdvancedMode(payload.id, payload.advancedMode)
               break
             case BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE:
-              workflowStore.setBlockCanonicalMode(
-                payload.id,
-                payload.canonicalId,
-                payload.canonicalMode
-              )
+              useWorkflowStore
+                .getState()
+                .setBlockCanonicalMode(payload.id, payload.canonicalId, payload.canonicalMode)
               break
           }
         } else if (target === OPERATION_TARGETS.BLOCKS) {
@@ -216,7 +217,7 @@ export function useCollaborativeWorkflow() {
             case BLOCKS_OPERATIONS.BATCH_UPDATE_POSITIONS: {
               const { updates } = payload
               if (Array.isArray(updates)) {
-                workflowStore.batchUpdatePositions(updates)
+                useWorkflowStore.getState().batchUpdatePositions(updates)
               }
               break
             }
@@ -226,7 +227,7 @@ export function useCollaborativeWorkflow() {
             case EDGES_OPERATIONS.BATCH_REMOVE_EDGES: {
               const { ids } = payload
               if (Array.isArray(ids) && ids.length > 0) {
-                workflowStore.batchRemoveEdges(ids)
+                useWorkflowStore.getState().batchRemoveEdges(ids)
 
                 const updatedBlocks = useWorkflowStore.getState().blocks
                 const updatedEdges = useWorkflowStore.getState().edges
@@ -249,9 +250,9 @@ export function useCollaborativeWorkflow() {
             case EDGES_OPERATIONS.BATCH_ADD_EDGES: {
               const { edges } = payload
               if (Array.isArray(edges) && edges.length > 0) {
-                const newEdges = filterNewEdges(edges, workflowStore.edges)
+                const newEdges = filterNewEdges(edges, useWorkflowStore.getState().edges)
                 if (newEdges.length > 0) {
-                  workflowStore.batchAddEdges(newEdges)
+                  useWorkflowStore.getState().batchAddEdges(newEdges)
                 }
               }
               break
@@ -264,30 +265,36 @@ export function useCollaborativeWorkflow() {
               if (payload.type === 'loop') {
                 const { config } = payload
                 if (config.loopType !== undefined) {
-                  workflowStore.updateLoopType(payload.id, config.loopType)
+                  useWorkflowStore.getState().updateLoopType(payload.id, config.loopType)
                 }
                 if (config.iterations !== undefined) {
-                  workflowStore.updateLoopCount(payload.id, config.iterations)
+                  useWorkflowStore.getState().updateLoopCount(payload.id, config.iterations)
                 }
                 if (config.forEachItems !== undefined) {
-                  workflowStore.setLoopForEachItems(payload.id, config.forEachItems)
+                  useWorkflowStore.getState().setLoopForEachItems(payload.id, config.forEachItems)
                 }
                 if (config.whileCondition !== undefined) {
-                  workflowStore.setLoopWhileCondition(payload.id, config.whileCondition)
+                  useWorkflowStore
+                    .getState()
+                    .setLoopWhileCondition(payload.id, config.whileCondition)
                 }
                 if (config.doWhileCondition !== undefined) {
-                  workflowStore.setLoopDoWhileCondition(payload.id, config.doWhileCondition)
+                  useWorkflowStore
+                    .getState()
+                    .setLoopDoWhileCondition(payload.id, config.doWhileCondition)
                 }
               } else if (payload.type === 'parallel') {
                 const { config } = payload
                 if (config.parallelType !== undefined) {
-                  workflowStore.updateParallelType(payload.id, config.parallelType)
+                  useWorkflowStore.getState().updateParallelType(payload.id, config.parallelType)
                 }
                 if (config.count !== undefined) {
-                  workflowStore.updateParallelCount(payload.id, config.count)
+                  useWorkflowStore.getState().updateParallelCount(payload.id, config.count)
                 }
                 if (config.distribution !== undefined) {
-                  workflowStore.updateParallelCollection(payload.id, config.distribution)
+                  useWorkflowStore
+                    .getState()
+                    .updateParallelCollection(payload.id, config.distribution)
                 }
               }
               break
@@ -295,7 +302,7 @@ export function useCollaborativeWorkflow() {
         } else if (target === OPERATION_TARGETS.VARIABLE) {
           switch (operation) {
             case VARIABLE_OPERATIONS.ADD:
-              variablesStore.addVariable(
+              useVariablesStore.getState().addVariable(
                 {
                   workflowId: payload.workflowId,
                   name: payload.name,
@@ -307,15 +314,21 @@ export function useCollaborativeWorkflow() {
               break
             case VARIABLE_OPERATIONS.UPDATE:
               if (payload.field === 'name') {
-                variablesStore.updateVariable(payload.variableId, { name: payload.value })
+                useVariablesStore
+                  .getState()
+                  .updateVariable(payload.variableId, { name: payload.value })
               } else if (payload.field === 'value') {
-                variablesStore.updateVariable(payload.variableId, { value: payload.value })
+                useVariablesStore
+                  .getState()
+                  .updateVariable(payload.variableId, { value: payload.value })
               } else if (payload.field === 'type') {
-                variablesStore.updateVariable(payload.variableId, { type: payload.value })
+                useVariablesStore
+                  .getState()
+                  .updateVariable(payload.variableId, { type: payload.value })
               }
               break
             case VARIABLE_OPERATIONS.REMOVE:
-              variablesStore.deleteVariable(payload.variableId)
+              useVariablesStore.getState().deleteVariable(payload.variableId)
               break
           }
         } else if (target === OPERATION_TARGETS.WORKFLOW) {
@@ -329,7 +342,7 @@ export function useCollaborativeWorkflow() {
                   hasActiveDiff,
                   isShowingDiff,
                 })
-                workflowStore.replaceWorkflowState(payload.state)
+                useWorkflowStore.getState().replaceWorkflowState(payload.state)
 
                 // Extract and apply subblock values
                 const subBlockValues: Record<string, Record<string, any>> = {}
@@ -344,7 +357,7 @@ export function useCollaborativeWorkflow() {
                   }
                 )
                 if (activeWorkflowId) {
-                  subBlockStore.setWorkflowValues(activeWorkflowId, subBlockValues)
+                  useSubBlockStore.getState().setWorkflowValues(activeWorkflowId, subBlockValues)
                 }
 
                 logger.info('Successfully applied remote workflow state replacement')
@@ -364,7 +377,9 @@ export function useCollaborativeWorkflow() {
               })
 
               if (blocks && blocks.length > 0) {
-                workflowStore.batchAddBlocks(blocks, edges || [], addedSubBlockValues || {})
+                useWorkflowStore
+                  .getState()
+                  .batchAddBlocks(blocks, edges || [], addedSubBlockValues || {})
               }
 
               logger.info('Successfully applied batch-add-blocks from remote user')
@@ -378,7 +393,7 @@ export function useCollaborativeWorkflow() {
               })
 
               if (ids && ids.length > 0) {
-                workflowStore.batchRemoveBlocks(ids)
+                useWorkflowStore.getState().batchRemoveBlocks(ids)
               }
 
               logger.info('Successfully applied batch-remove-blocks from remote user')
@@ -392,7 +407,7 @@ export function useCollaborativeWorkflow() {
               })
 
               if (blockIds && blockIds.length > 0) {
-                workflowStore.batchToggleEnabled(blockIds)
+                useWorkflowStore.getState().batchToggleEnabled(blockIds)
               }
 
               logger.info('Successfully applied batch-toggle-enabled from remote user')
@@ -406,7 +421,7 @@ export function useCollaborativeWorkflow() {
               })
 
               if (blockIds && blockIds.length > 0) {
-                workflowStore.batchToggleHandles(blockIds)
+                useWorkflowStore.getState().batchToggleHandles(blockIds)
               }
 
               logger.info('Successfully applied batch-toggle-handles from remote user')
@@ -420,7 +435,7 @@ export function useCollaborativeWorkflow() {
               })
 
               if (updates && updates.length > 0) {
-                workflowStore.batchUpdateBlocksWithParent(
+                useWorkflowStore.getState().batchUpdateBlocksWithParent(
                   updates.map(
                     (u: { id: string; parentId: string; position: { x: number; y: number } }) => ({
                       id: u.id,
@@ -454,7 +469,7 @@ export function useCollaborativeWorkflow() {
 
       try {
         // The setValue function automatically uses the active workflow ID
-        subBlockStore.setValue(blockId, subblockId, value)
+        useSubBlockStore.getState().setValue(blockId, subblockId, value)
       } catch (error) {
         logger.error('Error applying remote subblock update:', error)
       } finally {
@@ -473,11 +488,11 @@ export function useCollaborativeWorkflow() {
 
       try {
         if (field === 'name') {
-          variablesStore.updateVariable(variableId, { name: value })
+          useVariablesStore.getState().updateVariable(variableId, { name: value })
         } else if (field === 'value') {
-          variablesStore.updateVariable(variableId, { value })
+          useVariablesStore.getState().updateVariable(variableId, { value })
         } else if (field === 'type') {
-          variablesStore.updateVariable(variableId, { type: value })
+          useVariablesStore.getState().updateVariable(variableId, { type: value })
         }
       } catch (error) {
         logger.error('Error applying remote variable update:', error)
@@ -626,14 +641,10 @@ export function useCollaborativeWorkflow() {
     onWorkflowReverted,
     onOperationConfirmed,
     onOperationFailed,
-    workflowStore,
-    subBlockStore,
-    variablesStore,
     activeWorkflowId,
     confirmOperation,
     failOperation,
     emitWorkflowOperation,
-    queue,
   ])
 
   const executeQueuedOperation = useCallback(
@@ -710,14 +721,14 @@ export function useCollaborativeWorkflow() {
         userId: session?.user?.id || 'unknown',
       })
 
-      workflowStore.batchUpdatePositions(updates)
+      useWorkflowStore.getState().batchUpdatePositions(updates)
 
       if (options?.previousPositions && options.previousPositions.size > 0) {
         const moves = updates
           .filter((u) => options.previousPositions!.has(u.id))
           .map((u) => {
             const prev = options.previousPositions!.get(u.id)!
-            const block = workflowStore.blocks[u.id]
+            const block = useWorkflowStore.getState().blocks[u.id]
             return {
               blockId: u.id,
               before: prev,
@@ -735,7 +746,7 @@ export function useCollaborativeWorkflow() {
         }
       }
     },
-    [addToQueue, activeWorkflowId, session?.user?.id, isInActiveRoom, workflowStore, undoRedo]
+    [addToQueue, activeWorkflowId, session?.user?.id, isInActiveRoom, undoRedo]
   )
 
   const collaborativeUpdateBlockName = useCallback(
@@ -753,7 +764,7 @@ export function useCollaborativeWorkflow() {
         return { success: false, error: 'Block name cannot be empty' }
       }
 
-      const currentBlocks = workflowStore.blocks
+      const currentBlocks = useWorkflowStore.getState().blocks
       const conflictingBlock = Object.entries(currentBlocks).find(
         ([blockId, block]) => blockId !== id && normalizeName(block.name) === normalizedNewName
       )
@@ -774,7 +785,7 @@ export function useCollaborativeWorkflow() {
         OPERATION_TARGETS.BLOCK,
         { id, name: trimmedName },
         () => {
-          const result = workflowStore.updateBlockName(id, trimmedName)
+          const result = useWorkflowStore.getState().updateBlockName(id, trimmedName)
 
           if (result.success && result.changedSubblocks.length > 0) {
             logger.info('Emitting cascaded subblock updates from block rename', {
@@ -812,7 +823,7 @@ export function useCollaborativeWorkflow() {
 
       return { success: true }
     },
-    [executeQueuedOperation, workflowStore, addToQueue, activeWorkflowId, session?.user?.id]
+    [executeQueuedOperation, addToQueue, activeWorkflowId, session?.user?.id]
   )
 
   const collaborativeBatchToggleBlockEnabled = useCallback(
@@ -823,7 +834,7 @@ export function useCollaborativeWorkflow() {
       const validIds: string[] = []
 
       for (const id of ids) {
-        const block = workflowStore.blocks[id]
+        const block = useWorkflowStore.getState().blocks[id]
         if (block) {
           previousStates[id] = block.enabled
           validIds.push(id)
@@ -845,11 +856,11 @@ export function useCollaborativeWorkflow() {
         userId: session?.user?.id || 'unknown',
       })
 
-      workflowStore.batchToggleEnabled(validIds)
+      useWorkflowStore.getState().batchToggleEnabled(validIds)
 
       undoRedo.recordBatchToggleEnabled(validIds, previousStates)
     },
-    [addToQueue, activeWorkflowId, session?.user?.id, workflowStore, undoRedo]
+    [addToQueue, activeWorkflowId, session?.user?.id, undoRedo]
   )
 
   const collaborativeBatchUpdateParent = useCallback(
@@ -869,7 +880,7 @@ export function useCollaborativeWorkflow() {
       if (updates.length === 0) return
 
       const batchUpdates = updates.map((u) => {
-        const block = workflowStore.blocks[u.blockId]
+        const block = useWorkflowStore.getState().blocks[u.blockId]
         const oldParentId = block?.data?.parentId
         const oldPosition = block?.position || { x: 0, y: 0 }
 
@@ -886,11 +897,11 @@ export function useCollaborativeWorkflow() {
       // Collect all edge IDs to remove
       const edgeIdsToRemove = updates.flatMap((u) => u.affectedEdges.map((e) => e.id))
       if (edgeIdsToRemove.length > 0) {
-        workflowStore.batchRemoveEdges(edgeIdsToRemove)
+        useWorkflowStore.getState().batchRemoveEdges(edgeIdsToRemove)
       }
 
       // Batch update positions and parents
-      workflowStore.batchUpdateBlocksWithParent(
+      useWorkflowStore.getState().batchUpdateBlocksWithParent(
         updates.map((u) => ({
           id: u.blockId,
           position: u.newPosition,
@@ -920,22 +931,22 @@ export function useCollaborativeWorkflow() {
 
       logger.debug('Batch updated parent for blocks', { updateCount: updates.length })
     },
-    [isInActiveRoom, workflowStore, undoRedo, addToQueue, activeWorkflowId, session?.user?.id]
+    [isInActiveRoom, undoRedo, addToQueue, activeWorkflowId, session?.user?.id]
   )
 
   const collaborativeToggleBlockAdvancedMode = useCallback(
     (id: string) => {
-      const block = workflowStore.blocks[id]
+      const block = useWorkflowStore.getState().blocks[id]
       if (!block) return
       const newAdvancedMode = !block.advancedMode
       executeQueuedOperation(
         BLOCK_OPERATIONS.UPDATE_ADVANCED_MODE,
         OPERATION_TARGETS.BLOCK,
         { id, advancedMode: newAdvancedMode },
-        () => workflowStore.setBlockAdvancedMode(id, newAdvancedMode)
+        () => useWorkflowStore.getState().setBlockAdvancedMode(id, newAdvancedMode)
       )
     },
-    [executeQueuedOperation, workflowStore]
+    [executeQueuedOperation]
   )
 
   const collaborativeSetBlockCanonicalMode = useCallback(
@@ -944,10 +955,10 @@ export function useCollaborativeWorkflow() {
         BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE,
         OPERATION_TARGETS.BLOCK,
         { id, canonicalId, canonicalMode },
-        () => workflowStore.setBlockCanonicalMode(id, canonicalId, canonicalMode)
+        () => useWorkflowStore.getState().setBlockCanonicalMode(id, canonicalId, canonicalMode)
       )
     },
-    [executeQueuedOperation, workflowStore]
+    [executeQueuedOperation]
   )
 
   const collaborativeBatchToggleBlockHandles = useCallback(
@@ -958,7 +969,7 @@ export function useCollaborativeWorkflow() {
       const validIds: string[] = []
 
       for (const id of ids) {
-        const block = workflowStore.blocks[id]
+        const block = useWorkflowStore.getState().blocks[id]
         if (block) {
           previousStates[id] = block.horizontalHandles ?? false
           validIds.push(id)
@@ -980,11 +991,11 @@ export function useCollaborativeWorkflow() {
         userId: session?.user?.id || 'unknown',
       })
 
-      workflowStore.batchToggleHandles(validIds)
+      useWorkflowStore.getState().batchToggleHandles(validIds)
 
       undoRedo.recordBatchToggleHandles(validIds, previousStates)
     },
-    [addToQueue, activeWorkflowId, session?.user?.id, workflowStore, undoRedo]
+    [addToQueue, activeWorkflowId, session?.user?.id, undoRedo]
   )
 
   const collaborativeBatchAddEdges = useCallback(
@@ -996,7 +1007,7 @@ export function useCollaborativeWorkflow() {
 
       if (edges.length === 0) return false
 
-      const newEdges = filterNewEdges(edges, workflowStore.edges)
+      const newEdges = filterNewEdges(edges, useWorkflowStore.getState().edges)
       if (newEdges.length === 0) return false
 
       const operationId = crypto.randomUUID()
@@ -1012,7 +1023,7 @@ export function useCollaborativeWorkflow() {
         userId: session?.user?.id || 'unknown',
       })
 
-      workflowStore.batchAddEdges(newEdges)
+      useWorkflowStore.getState().batchAddEdges(newEdges)
 
       if (!options?.skipUndoRedo) {
         newEdges.forEach((edge) => undoRedo.recordAddEdge(edge.id))
@@ -1020,7 +1031,7 @@ export function useCollaborativeWorkflow() {
 
       return true
     },
-    [addToQueue, activeWorkflowId, session?.user?.id, isInActiveRoom, workflowStore, undoRedo]
+    [addToQueue, activeWorkflowId, session?.user?.id, isInActiveRoom, undoRedo]
   )
 
   const collaborativeBatchRemoveEdges = useCallback(
@@ -1036,10 +1047,10 @@ export function useCollaborativeWorkflow() {
       const validEdgeIds: string[] = []
 
       for (const edgeId of edgeIds) {
-        const edge = workflowStore.edges.find((e) => e.id === edgeId)
+        const edge = useWorkflowStore.getState().edges.find((e) => e.id === edgeId)
         if (edge) {
-          const sourceExists = workflowStore.blocks[edge.source]
-          const targetExists = workflowStore.blocks[edge.target]
+          const sourceExists = useWorkflowStore.getState().blocks[edge.source]
+          const targetExists = useWorkflowStore.getState().blocks[edge.target]
           if (sourceExists && targetExists) {
             edgeSnapshots.push(edge)
             validEdgeIds.push(edgeId)
@@ -1065,7 +1076,7 @@ export function useCollaborativeWorkflow() {
         userId: session?.user?.id || 'unknown',
       })
 
-      workflowStore.batchRemoveEdges(validEdgeIds)
+      useWorkflowStore.getState().batchRemoveEdges(validEdgeIds)
 
       if (!options?.skipUndoRedo && edgeSnapshots.length > 0) {
         undoRedo.recordBatchRemoveEdges(edgeSnapshots)
@@ -1074,7 +1085,7 @@ export function useCollaborativeWorkflow() {
       logger.info('Batch removed edges', { count: validEdgeIds.length })
       return true
     },
-    [isInActiveRoom, workflowStore, addToQueue, activeWorkflowId, session, undoRedo]
+    [isInActiveRoom, addToQueue, activeWorkflowId, session, undoRedo]
   )
 
   const collaborativeSetSubblockValue = useCallback(
@@ -1086,8 +1097,32 @@ export function useCollaborativeWorkflow() {
         return
       }
 
+      // ALWAYS update local store first for immediate UI feedback
+      useSubBlockStore.getState().setValue(blockId, subblockId, value)
+
+      // Handle dependent subblock clearing (recursive calls)
+      try {
+        const visited = options?._visited || new Set<string>()
+        if (visited.has(subblockId)) return
+        visited.add(subblockId)
+        const blockType = useWorkflowStore.getState().blocks?.[blockId]?.type
+        const blockConfig = blockType ? getBlock(blockType) : null
+        if (blockConfig?.subBlocks && Array.isArray(blockConfig.subBlocks)) {
+          const dependents = blockConfig.subBlocks.filter(
+            (sb: any) => Array.isArray(sb.dependsOn) && sb.dependsOn.includes(subblockId)
+          )
+          for (const dep of dependents) {
+            if (!dep?.id || dep.id === subblockId) continue
+            collaborativeSetSubblockValue(blockId, dep.id, '', { _visited: visited })
+          }
+        }
+      } catch {
+        // Best-effort; do not block on clearing
+      }
+
+      // Only emit to socket if in active room
       if (!isInActiveRoom()) {
-        logger.debug('Skipping subblock update - not in active workflow', {
+        logger.debug('Local update applied, skipping socket emit - not in active workflow', {
           currentWorkflowId,
           activeWorkflowId,
           blockId,
@@ -1110,30 +1145,8 @@ export function useCollaborativeWorkflow() {
         workflowId: currentActiveWorkflowId || '',
         userId: session?.user?.id || 'unknown',
       })
-
-      subBlockStore.setValue(blockId, subblockId, value)
-
-      try {
-        const visited = options?._visited || new Set<string>()
-        if (visited.has(subblockId)) return
-        visited.add(subblockId)
-        const blockType = useWorkflowStore.getState().blocks?.[blockId]?.type
-        const blockConfig = blockType ? getBlock(blockType) : null
-        if (blockConfig?.subBlocks && Array.isArray(blockConfig.subBlocks)) {
-          const dependents = blockConfig.subBlocks.filter(
-            (sb: any) => Array.isArray(sb.dependsOn) && sb.dependsOn.includes(subblockId)
-          )
-          for (const dep of dependents) {
-            if (!dep?.id || dep.id === subblockId) continue
-            collaborativeSetSubblockValue(blockId, dep.id, '', { _visited: visited })
-          }
-        }
-      } catch {
-        // Best-effort; do not block on clearing
-      }
     },
     [
-      subBlockStore,
       currentWorkflowId,
       activeWorkflowId,
       addToQueue,
@@ -1159,7 +1172,7 @@ export function useCollaborativeWorkflow() {
       }
 
       // Apply locally first (immediate UI feedback)
-      subBlockStore.setValue(blockId, subblockId, value)
+      useSubBlockStore.getState().setValue(blockId, subblockId, value)
 
       // Use the operation queue but with immediate processing (no debouncing)
       const operationId = crypto.randomUUID()
@@ -1175,29 +1188,22 @@ export function useCollaborativeWorkflow() {
         userId: session?.user?.id || 'unknown',
       })
     },
-    [
-      subBlockStore,
-      addToQueue,
-      currentWorkflowId,
-      activeWorkflowId,
-      session?.user?.id,
-      isInActiveRoom,
-    ]
+    [addToQueue, currentWorkflowId, activeWorkflowId, session?.user?.id, isInActiveRoom]
   )
 
   const collaborativeUpdateLoopType = useCallback(
     (loopId: string, loopType: 'for' | 'forEach' | 'while' | 'doWhile') => {
-      const currentBlock = workflowStore.blocks[loopId]
+      const currentBlock = useWorkflowStore.getState().blocks[loopId]
       if (!currentBlock || currentBlock.type !== 'loop') return
 
-      const childNodes = Object.values(workflowStore.blocks)
+      const childNodes = Object.values(useWorkflowStore.getState().blocks)
         .filter((b) => b.data?.parentId === loopId)
         .map((b) => b.id)
 
       const currentIterations = currentBlock.data?.count || 5
       const currentCollection = currentBlock.data?.collection || ''
 
-      const existingLoop = workflowStore.loops[loopId]
+      const existingLoop = useWorkflowStore.getState().loops[loopId]
       const existingForEachItems = existingLoop?.forEachItems ?? currentCollection ?? ''
       const existingWhileCondition =
         existingLoop?.whileCondition ?? currentBlock.data?.whileCondition ?? ''
@@ -1219,22 +1225,24 @@ export function useCollaborativeWorkflow() {
         OPERATION_TARGETS.SUBFLOW,
         { id: loopId, type: 'loop', config },
         () => {
-          workflowStore.updateLoopType(loopId, loopType)
-          workflowStore.setLoopForEachItems(loopId, existingForEachItems ?? '')
-          workflowStore.setLoopWhileCondition(loopId, existingWhileCondition ?? '')
-          workflowStore.setLoopDoWhileCondition(loopId, existingDoWhileCondition ?? '')
+          useWorkflowStore.getState().updateLoopType(loopId, loopType)
+          useWorkflowStore.getState().setLoopForEachItems(loopId, existingForEachItems ?? '')
+          useWorkflowStore.getState().setLoopWhileCondition(loopId, existingWhileCondition ?? '')
+          useWorkflowStore
+            .getState()
+            .setLoopDoWhileCondition(loopId, existingDoWhileCondition ?? '')
         }
       )
     },
-    [executeQueuedOperation, workflowStore]
+    [executeQueuedOperation]
   )
 
   const collaborativeUpdateParallelType = useCallback(
     (parallelId: string, parallelType: 'count' | 'collection') => {
-      const currentBlock = workflowStore.blocks[parallelId]
+      const currentBlock = useWorkflowStore.getState().blocks[parallelId]
       if (!currentBlock || currentBlock.type !== 'parallel') return
 
-      const childNodes = Object.values(workflowStore.blocks)
+      const childNodes = Object.values(useWorkflowStore.getState().blocks)
         .filter((b) => b.data?.parentId === parallelId)
         .map((b) => b.id)
 
@@ -1261,22 +1269,22 @@ export function useCollaborativeWorkflow() {
         OPERATION_TARGETS.SUBFLOW,
         { id: parallelId, type: 'parallel', config },
         () => {
-          workflowStore.updateParallelType(parallelId, parallelType)
-          workflowStore.updateParallelCount(parallelId, newCount)
-          workflowStore.updateParallelCollection(parallelId, newDistribution)
+          useWorkflowStore.getState().updateParallelType(parallelId, parallelType)
+          useWorkflowStore.getState().updateParallelCount(parallelId, newCount)
+          useWorkflowStore.getState().updateParallelCollection(parallelId, newDistribution)
         }
       )
     },
-    [executeQueuedOperation, workflowStore]
+    [executeQueuedOperation]
   )
 
   // Unified iteration management functions - count and collection only
   const collaborativeUpdateIterationCount = useCallback(
     (nodeId: string, iterationType: 'loop' | 'parallel', count: number) => {
-      const currentBlock = workflowStore.blocks[nodeId]
+      const currentBlock = useWorkflowStore.getState().blocks[nodeId]
       if (!currentBlock || currentBlock.type !== iterationType) return
 
-      const childNodes = Object.values(workflowStore.blocks)
+      const childNodes = Object.values(useWorkflowStore.getState().blocks)
         .filter((b) => b.data?.parentId === nodeId)
         .map((b) => b.id)
 
@@ -1296,7 +1304,7 @@ export function useCollaborativeWorkflow() {
           SUBFLOW_OPERATIONS.UPDATE,
           OPERATION_TARGETS.SUBFLOW,
           { id: nodeId, type: 'loop', config },
-          () => workflowStore.updateLoopCount(nodeId, count)
+          () => useWorkflowStore.getState().updateLoopCount(nodeId, count)
         )
       } else {
         const currentDistribution = currentBlock.data?.collection || ''
@@ -1314,19 +1322,19 @@ export function useCollaborativeWorkflow() {
           SUBFLOW_OPERATIONS.UPDATE,
           OPERATION_TARGETS.SUBFLOW,
           { id: nodeId, type: 'parallel', config },
-          () => workflowStore.updateParallelCount(nodeId, count)
+          () => useWorkflowStore.getState().updateParallelCount(nodeId, count)
         )
       }
     },
-    [executeQueuedOperation, workflowStore]
+    [executeQueuedOperation]
   )
 
   const collaborativeUpdateIterationCollection = useCallback(
     (nodeId: string, iterationType: 'loop' | 'parallel', collection: string) => {
-      const currentBlock = workflowStore.blocks[nodeId]
+      const currentBlock = useWorkflowStore.getState().blocks[nodeId]
       if (!currentBlock || currentBlock.type !== iterationType) return
 
-      const childNodes = Object.values(workflowStore.blocks)
+      const childNodes = Object.values(useWorkflowStore.getState().blocks)
         .filter((b) => b.data?.parentId === nodeId)
         .map((b) => b.id)
 
@@ -1334,7 +1342,7 @@ export function useCollaborativeWorkflow() {
         const currentIterations = currentBlock.data?.count || 5
         const currentLoopType = currentBlock.data?.loopType || 'for'
 
-        const existingLoop = workflowStore.loops[nodeId]
+        const existingLoop = useWorkflowStore.getState().loops[nodeId]
         let nextForEachItems = existingLoop?.forEachItems ?? currentBlock.data?.collection ?? ''
         let nextWhileCondition =
           existingLoop?.whileCondition ?? currentBlock.data?.whileCondition ?? ''
@@ -1364,9 +1372,9 @@ export function useCollaborativeWorkflow() {
           OPERATION_TARGETS.SUBFLOW,
           { id: nodeId, type: 'loop', config },
           () => {
-            workflowStore.setLoopForEachItems(nodeId, nextForEachItems ?? '')
-            workflowStore.setLoopWhileCondition(nodeId, nextWhileCondition ?? '')
-            workflowStore.setLoopDoWhileCondition(nodeId, nextDoWhileCondition ?? '')
+            useWorkflowStore.getState().setLoopForEachItems(nodeId, nextForEachItems ?? '')
+            useWorkflowStore.getState().setLoopWhileCondition(nodeId, nextWhileCondition ?? '')
+            useWorkflowStore.getState().setLoopDoWhileCondition(nodeId, nextDoWhileCondition ?? '')
           }
         )
       } else {
@@ -1385,11 +1393,11 @@ export function useCollaborativeWorkflow() {
           SUBFLOW_OPERATIONS.UPDATE,
           OPERATION_TARGETS.SUBFLOW,
           { id: nodeId, type: 'parallel', config },
-          () => workflowStore.updateParallelCollection(nodeId, collection)
+          () => useWorkflowStore.getState().updateParallelCollection(nodeId, collection)
         )
       }
     },
-    [executeQueuedOperation, workflowStore]
+    [executeQueuedOperation]
   )
 
   const collaborativeUpdateVariable = useCallback(
@@ -1400,16 +1408,16 @@ export function useCollaborativeWorkflow() {
         { variableId, field, value },
         () => {
           if (field === 'name') {
-            variablesStore.updateVariable(variableId, { name: value })
+            useVariablesStore.getState().updateVariable(variableId, { name: value })
           } else if (field === 'value') {
-            variablesStore.updateVariable(variableId, { value })
+            useVariablesStore.getState().updateVariable(variableId, { value })
           } else if (field === 'type') {
-            variablesStore.updateVariable(variableId, { type: value })
+            useVariablesStore.getState().updateVariable(variableId, { type: value })
           }
         }
       )
     },
-    [executeQueuedOperation, variablesStore]
+    [executeQueuedOperation]
   )
 
   const collaborativeAddVariable = useCallback(
@@ -1417,7 +1425,7 @@ export function useCollaborativeWorkflow() {
       const id = crypto.randomUUID()
 
       // Optimistically add to local store first
-      variablesStore.addVariable(variableData, id)
+      useVariablesStore.getState().addVariable(variableData, id)
       const processedVariable = useVariablesStore.getState().variables[id]
 
       if (processedVariable) {
@@ -1439,7 +1447,7 @@ export function useCollaborativeWorkflow() {
 
       return id
     },
-    [executeQueuedOperation, variablesStore]
+    [executeQueuedOperation]
   )
 
   const collaborativeDeleteVariable = useCallback(
@@ -1451,11 +1459,11 @@ export function useCollaborativeWorkflow() {
         OPERATION_TARGETS.VARIABLE,
         { variableId },
         () => {
-          variablesStore.deleteVariable(variableId)
+          useVariablesStore.getState().deleteVariable(variableId)
         }
       )
     },
-    [executeQueuedOperation, variablesStore, cancelOperationsForVariable]
+    [executeQueuedOperation, cancelOperationsForVariable]
   )
 
   const collaborativeBatchAddBlocks = useCallback(
@@ -1497,7 +1505,7 @@ export function useCollaborativeWorkflow() {
         userId: session?.user?.id || 'unknown',
       })
 
-      workflowStore.batchAddBlocks(blocks, edges, subBlockValues)
+      useWorkflowStore.getState().batchAddBlocks(blocks, edges, subBlockValues)
 
       if (!options?.skipUndoRedo) {
         undoRedo.recordBatchAddBlocks(blocks, edges, subBlockValues)
@@ -1505,16 +1513,7 @@ export function useCollaborativeWorkflow() {
 
       return true
     },
-    [
-      addToQueue,
-      activeWorkflowId,
-      session?.user?.id,
-      isBaselineDiffView,
-      isInActiveRoom,
-      workflowStore,
-      subBlockStore,
-      undoRedo,
-    ]
+    [addToQueue, activeWorkflowId, session?.user?.id, isBaselineDiffView, isInActiveRoom, undoRedo]
   )
 
   const collaborativeBatchRemoveBlocks = useCallback(
@@ -1530,7 +1529,7 @@ export function useCollaborativeWorkflow() {
 
       const allBlocksToRemove = new Set<string>(blockIds)
       const findAllDescendants = (parentId: string) => {
-        Object.entries(workflowStore.blocks).forEach(([blockId, block]) => {
+        Object.entries(useWorkflowStore.getState().blocks).forEach(([blockId, block]) => {
           if (block.data?.parentId === parentId) {
             allBlocksToRemove.add(blockId)
             findAllDescendants(blockId)
@@ -1544,7 +1543,10 @@ export function useCollaborativeWorkflow() {
         usePanelEditorStore.getState().clearCurrentBlock()
       }
 
-      const mergedBlocks = mergeSubblockState(workflowStore.blocks, activeWorkflowId || undefined)
+      const mergedBlocks = mergeSubblockState(
+        useWorkflowStore.getState().blocks,
+        activeWorkflowId || undefined
+      )
       const blockSnapshots: BlockState[] = []
       const subBlockValues: Record<string, Record<string, unknown>> = {}
 
@@ -1566,9 +1568,9 @@ export function useCollaborativeWorkflow() {
         }
       })
 
-      const edgeSnapshots = workflowStore.edges.filter(
-        (e) => allBlocksToRemove.has(e.source) || allBlocksToRemove.has(e.target)
-      )
+      const edgeSnapshots = useWorkflowStore
+        .getState()
+        .edges.filter((e) => allBlocksToRemove.has(e.source) || allBlocksToRemove.has(e.target))
 
       logger.info('Batch removing blocks collaboratively', {
         requestedCount: blockIds.length,
@@ -1588,7 +1590,7 @@ export function useCollaborativeWorkflow() {
         userId: session?.user?.id || 'unknown',
       })
 
-      workflowStore.batchRemoveBlocks(blockIds)
+      useWorkflowStore.getState().batchRemoveBlocks(blockIds)
 
       if (!options?.skipUndoRedo && blockSnapshots.length > 0) {
         undoRedo.recordBatchRemoveBlocks(blockSnapshots, edgeSnapshots, subBlockValues)
@@ -1601,7 +1603,6 @@ export function useCollaborativeWorkflow() {
       activeWorkflowId,
       session?.user?.id,
       isInActiveRoom,
-      workflowStore,
       cancelOperationsForBlock,
       undoRedo,
     ]
@@ -1646,10 +1647,6 @@ export function useCollaborativeWorkflow() {
     collaborativeUpdateIterationCount,
     collaborativeUpdateIterationCollection,
 
-    // Direct access to stores for non-collaborative operations
-    workflowStore,
-    subBlockStore,
-
     // Undo/Redo operations (wrapped to prevent recording moves during undo/redo)
     undo: useCallback(async () => {
       isUndoRedoInProgress.current = true
diff --git a/apps/sim/hooks/use-permission-config.ts b/apps/sim/hooks/use-permission-config.ts
index a0632d5657..994656fdca 100644
--- a/apps/sim/hooks/use-permission-config.ts
+++ b/apps/sim/hooks/use-permission-config.ts
@@ -40,7 +40,6 @@ export function usePermissionConfig(): PermissionConfigResult {
 
   const isBlockAllowed = useMemo(() => {
     return (blockType: string) => {
-      // start_trigger should always be allowed (it should never be disabled)
       if (blockType === 'start_trigger') return true
       if (config.allowedIntegrations === null) return true
       return config.allowedIntegrations.includes(blockType)
@@ -57,7 +56,6 @@ export function usePermissionConfig(): PermissionConfigResult {
   const filterBlocks = useMemo(() => {
     return <T extends { type: string }>(blocks: T[]): T[] => {
       if (config.allowedIntegrations === null) return blocks
-      // start_trigger should always be included (it should never be disabled)
       return blocks.filter(
         (block) =>
           block.type === 'start_trigger' || config.allowedIntegrations!.includes(block.type)
@@ -77,14 +75,26 @@ export function usePermissionConfig(): PermissionConfigResult {
     return featureFlagDisabled || config.disableInvitations
   }, [config.disableInvitations])
 
-  return {
-    config,
-    isLoading,
-    isInPermissionGroup,
-    filterBlocks,
-    filterProviders,
-    isBlockAllowed,
-    isProviderAllowed,
-    isInvitationsDisabled,
-  }
+  return useMemo(
+    () => ({
+      config,
+      isLoading,
+      isInPermissionGroup,
+      filterBlocks,
+      filterProviders,
+      isBlockAllowed,
+      isProviderAllowed,
+      isInvitationsDisabled,
+    }),
+    [
+      config,
+      isLoading,
+      isInPermissionGroup,
+      filterBlocks,
+      filterProviders,
+      isBlockAllowed,
+      isProviderAllowed,
+      isInvitationsDisabled,
+    ]
+  )
 }
diff --git a/apps/sim/hooks/use-undo-redo.ts b/apps/sim/hooks/use-undo-redo.ts
index 1bb6bf590c..6c91e46f73 100644
--- a/apps/sim/hooks/use-undo-redo.ts
+++ b/apps/sim/hooks/use-undo-redo.ts
@@ -36,9 +36,7 @@ const logger = createLogger('UndoRedo')
 
 export function useUndoRedo() {
   const { data: session } = useSession()
-  const { activeWorkflowId } = useWorkflowRegistry()
-  const workflowStore = useWorkflowStore()
-  const undoRedoStore = useUndoRedoStore()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const { addToQueue } = useOperationQueue()
 
   const userId = session?.user?.id || 'unknown'
@@ -78,7 +76,7 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded batch add blocks', {
         blockCount: blockSnapshots.length,
@@ -86,7 +84,7 @@ export function useUndoRedo() {
         workflowId: activeWorkflowId,
       })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordBatchRemoveBlocks = useCallback(
@@ -124,7 +122,7 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded batch remove blocks', {
         blockCount: blockSnapshots.length,
@@ -132,14 +130,14 @@ export function useUndoRedo() {
         workflowId: activeWorkflowId,
       })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordAddEdge = useCallback(
     (edgeId: string) => {
       if (!activeWorkflowId) return
 
-      const edgeSnapshot = workflowStore.edges.find((e) => e.id === edgeId)
+      const edgeSnapshot = useWorkflowStore.getState().edges.find((e) => e.id === edgeId)
       if (!edgeSnapshot) {
         logger.warn('Edge not found when recording add edge', { edgeId })
         return
@@ -164,11 +162,11 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded add edge', { edgeId, workflowId: activeWorkflowId })
     },
-    [activeWorkflowId, userId, workflowStore, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordBatchRemoveEdges = useCallback(
@@ -198,14 +196,14 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded batch remove edges', {
         edgeCount: edgeSnapshots.length,
         workflowId: activeWorkflowId,
       })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordBatchMoveBlocks = useCallback(
@@ -243,11 +241,11 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded batch move', { blockCount: moves.length })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordUpdateParent = useCallback(
@@ -294,7 +292,7 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded update parent', {
         blockId,
@@ -303,7 +301,7 @@ export function useUndoRedo() {
         edgeCount: affectedEdges?.length || 0,
       })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordBatchUpdateParent = useCallback(
@@ -347,14 +345,14 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded batch update parent', {
         updateCount: updates.length,
         workflowId: activeWorkflowId,
       })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordBatchToggleEnabled = useCallback(
@@ -380,11 +378,11 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded batch toggle enabled', { blockIds, previousStates })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordBatchToggleHandles = useCallback(
@@ -410,18 +408,18 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded batch toggle handles', { blockIds, previousStates })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const undo = useCallback(async () => {
     if (!activeWorkflowId) return
 
     await runWithUndoRedoRecordingSuspended(async () => {
-      const entry = undoRedoStore.undo(activeWorkflowId, userId)
+      const entry = useUndoRedoStore.getState().undo(activeWorkflowId, userId)
       if (!entry) {
         logger.debug('No operations to undo')
         return
@@ -441,20 +439,26 @@ export function useUndoRedo() {
           const { blockSnapshots } = batchRemoveOp.data
           const blockIds = blockSnapshots.map((b) => b.id)
 
-          const existingBlockIds = blockIds.filter((id) => workflowStore.blocks[id])
+          const existingBlockIds = blockIds.filter((id) => useWorkflowStore.getState().blocks[id])
           if (existingBlockIds.length === 0) {
             logger.debug('Undo batch-remove-blocks skipped; no blocks exist')
             break
           }
 
-          const latestEdges = workflowStore.edges.filter(
-            (e) => existingBlockIds.includes(e.source) || existingBlockIds.includes(e.target)
-          )
+          const latestEdges = useWorkflowStore
+            .getState()
+            .edges.filter(
+              (e) => existingBlockIds.includes(e.source) || existingBlockIds.includes(e.target)
+            )
           batchRemoveOp.data.edgeSnapshots = latestEdges
 
           const latestSubBlockValues: Record<string, Record<string, unknown>> = {}
           existingBlockIds.forEach((blockId) => {
-            const merged = mergeSubblockState(workflowStore.blocks, activeWorkflowId, blockId)
+            const merged = mergeSubblockState(
+              useWorkflowStore.getState().blocks,
+              activeWorkflowId,
+              blockId
+            )
             const block = merged[blockId]
             if (block?.subBlocks) {
               const values: Record<string, unknown> = {}
@@ -481,7 +485,7 @@ export function useUndoRedo() {
             userId,
           })
 
-          workflowStore.batchRemoveBlocks(existingBlockIds)
+          useWorkflowStore.getState().batchRemoveBlocks(existingBlockIds)
           break
         }
         case UNDO_REDO_OPERATIONS.BATCH_ADD_BLOCKS: {
@@ -489,7 +493,9 @@ export function useUndoRedo() {
           const batchAddOp = entry.inverse as BatchAddBlocksOperation
           const { blockSnapshots, edgeSnapshots, subBlockValues } = batchAddOp.data
 
-          const blocksToAdd = blockSnapshots.filter((b) => !workflowStore.blocks[b.id])
+          const blocksToAdd = blockSnapshots.filter(
+            (b) => !useWorkflowStore.getState().blocks[b.id]
+          )
           if (blocksToAdd.length === 0) {
             logger.debug('Undo batch-add-blocks skipped; all blocks exist')
             break
@@ -513,22 +519,24 @@ export function useUndoRedo() {
           })
 
           blocksToAdd.forEach((block) => {
-            workflowStore.addBlock(
-              block.id,
-              block.type,
-              block.name,
-              block.position,
-              block.data,
-              block.data?.parentId,
-              block.data?.extent,
-              {
-                enabled: block.enabled,
-                horizontalHandles: block.horizontalHandles,
-                advancedMode: block.advancedMode,
-                triggerMode: block.triggerMode,
-                height: block.height,
-              }
-            )
+            useWorkflowStore
+              .getState()
+              .addBlock(
+                block.id,
+                block.type,
+                block.name,
+                block.position,
+                block.data,
+                block.data?.parentId,
+                block.data?.extent,
+                {
+                  enabled: block.enabled,
+                  horizontalHandles: block.horizontalHandles,
+                  advancedMode: block.advancedMode,
+                  triggerMode: block.triggerMode,
+                  height: block.height,
+                }
+              )
           })
 
           if (subBlockValues && Object.keys(subBlockValues).length > 0) {
@@ -545,10 +553,10 @@ export function useUndoRedo() {
 
           if (edgeSnapshots && edgeSnapshots.length > 0) {
             const edgesToAdd = edgeSnapshots.filter(
-              (edge) => !workflowStore.edges.find((e) => e.id === edge.id)
+              (edge) => !useWorkflowStore.getState().edges.find((e) => e.id === edge.id)
             )
             if (edgesToAdd.length > 0) {
-              workflowStore.batchAddEdges(edgesToAdd)
+              useWorkflowStore.getState().batchAddEdges(edgesToAdd)
             }
           }
           break
@@ -559,7 +567,7 @@ export function useUndoRedo() {
           const { edgeSnapshots } = batchRemoveInverse.data
 
           const edgesToRemove = edgeSnapshots
-            .filter((e) => workflowStore.edges.find((edge) => edge.id === e.id))
+            .filter((e) => useWorkflowStore.getState().edges.find((edge) => edge.id === e.id))
             .map((e) => e.id)
 
           if (edgesToRemove.length > 0) {
@@ -573,7 +581,7 @@ export function useUndoRedo() {
               workflowId: activeWorkflowId,
               userId,
             })
-            workflowStore.batchRemoveEdges(edgesToRemove)
+            useWorkflowStore.getState().batchRemoveEdges(edgesToRemove)
           }
           logger.debug('Undid batch-add-edges', { edgeCount: edgesToRemove.length })
           break
@@ -584,7 +592,7 @@ export function useUndoRedo() {
           const { edgeSnapshots } = batchAddInverse.data
 
           const edgesToAdd = edgeSnapshots.filter(
-            (e) => !workflowStore.edges.find((edge) => edge.id === e.id)
+            (e) => !useWorkflowStore.getState().edges.find((edge) => edge.id === e.id)
           )
 
           if (edgesToAdd.length > 0) {
@@ -598,7 +606,7 @@ export function useUndoRedo() {
               workflowId: activeWorkflowId,
               userId,
             })
-            workflowStore.batchAddEdges(edgesToAdd)
+            useWorkflowStore.getState().batchAddEdges(edgesToAdd)
           }
           logger.debug('Undid batch-remove-edges', { edgeCount: edgesToAdd.length })
           break
@@ -618,7 +626,7 @@ export function useUndoRedo() {
           }
 
           if (positionUpdates.length > 0) {
-            workflowStore.batchUpdatePositions(positionUpdates)
+            useWorkflowStore.getState().batchUpdatePositions(positionUpdates)
             addToQueue({
               id: opId,
               operation: {
@@ -636,10 +644,10 @@ export function useUndoRedo() {
           const updateOp = entry.inverse as UpdateParentOperation
           const { blockId, newParentId, newPosition, affectedEdges } = updateOp.data
 
-          if (workflowStore.blocks[blockId]) {
+          if (useWorkflowStore.getState().blocks[blockId]) {
             if (newParentId && affectedEdges && affectedEdges.length > 0) {
               const edgesToAdd = affectedEdges.filter(
-                (e) => !workflowStore.edges.find((edge) => edge.id === e.id)
+                (e) => !useWorkflowStore.getState().edges.find((edge) => edge.id === e.id)
               )
               if (edgesToAdd.length > 0) {
                 addToQueue({
@@ -652,7 +660,7 @@ export function useUndoRedo() {
                   workflowId: activeWorkflowId,
                   userId,
                 })
-                workflowStore.batchAddEdges(edgesToAdd)
+                useWorkflowStore.getState().batchAddEdges(edgesToAdd)
               }
             }
 
@@ -692,7 +700,7 @@ export function useUndoRedo() {
             })
 
             // Update position and parent locally using batch method
-            workflowStore.batchUpdateBlocksWithParent([
+            useWorkflowStore.getState().batchUpdateBlocksWithParent([
               {
                 id: blockId,
                 position: newPosition,
@@ -703,10 +711,10 @@ export function useUndoRedo() {
             // If we're removing FROM a subflow (undo of add to subflow), remove edges after
             if (!newParentId && affectedEdges && affectedEdges.length > 0) {
               const edgeIdsToRemove = affectedEdges
-                .filter((edge) => workflowStore.edges.find((e) => e.id === edge.id))
+                .filter((edge) => useWorkflowStore.getState().edges.find((e) => e.id === edge.id))
                 .map((edge) => edge.id)
               if (edgeIdsToRemove.length > 0) {
-                workflowStore.batchRemoveEdges(edgeIdsToRemove)
+                useWorkflowStore.getState().batchRemoveEdges(edgeIdsToRemove)
                 edgeIdsToRemove.forEach((edgeId) => {
                   addToQueue({
                     id: crypto.randomUUID(),
@@ -730,7 +738,7 @@ export function useUndoRedo() {
           const batchUpdateOp = entry.inverse as BatchUpdateParentOperation
           const { updates } = batchUpdateOp.data
 
-          const validUpdates = updates.filter((u) => workflowStore.blocks[u.blockId])
+          const validUpdates = updates.filter((u) => useWorkflowStore.getState().blocks[u.blockId])
           if (validUpdates.length === 0) {
             logger.debug('Undo batch-update-parent skipped; no blocks exist')
             break
@@ -746,7 +754,7 @@ export function useUndoRedo() {
             // Moving OUT of subflow (undoing insert) → restore edges first
             if (!newParentId && affectedEdges && affectedEdges.length > 0) {
               const edgesToAdd = affectedEdges.filter(
-                (e) => !workflowStore.edges.find((edge) => edge.id === e.id)
+                (e) => !useWorkflowStore.getState().edges.find((edge) => edge.id === e.id)
               )
               allEdgesToAdd.push(...edgesToAdd)
             }
@@ -754,7 +762,7 @@ export function useUndoRedo() {
             // Moving INTO subflow (undoing removal) → remove edges first
             if (newParentId && affectedEdges && affectedEdges.length > 0) {
               const edgeIds = affectedEdges
-                .filter((edge) => workflowStore.edges.find((e) => e.id === edge.id))
+                .filter((edge) => useWorkflowStore.getState().edges.find((e) => e.id === edge.id))
                 .map((edge) => edge.id)
               allEdgeIdsToRemove.push(...edgeIds)
             }
@@ -772,11 +780,11 @@ export function useUndoRedo() {
               workflowId: activeWorkflowId,
               userId,
             })
-            workflowStore.batchAddEdges(allEdgesToAdd)
+            useWorkflowStore.getState().batchAddEdges(allEdgesToAdd)
           }
 
           if (allEdgeIdsToRemove.length > 0) {
-            workflowStore.batchRemoveEdges(allEdgeIdsToRemove)
+            useWorkflowStore.getState().batchRemoveEdges(allEdgeIdsToRemove)
             addToQueue({
               id: crypto.randomUUID(),
               operation: {
@@ -795,7 +803,7 @@ export function useUndoRedo() {
             position: update.newPosition,
             parentId: update.newParentId,
           }))
-          workflowStore.batchUpdateBlocksWithParent(blockUpdates)
+          useWorkflowStore.getState().batchUpdateBlocksWithParent(blockUpdates)
 
           // Send batch update to server
           addToQueue({
@@ -822,7 +830,7 @@ export function useUndoRedo() {
           const toggleOp = entry.inverse as BatchToggleEnabledOperation
           const { blockIds, previousStates } = toggleOp.data
 
-          const validBlockIds = blockIds.filter((id) => workflowStore.blocks[id])
+          const validBlockIds = blockIds.filter((id) => useWorkflowStore.getState().blocks[id])
           if (validBlockIds.length === 0) {
             logger.debug('Undo batch-toggle-enabled skipped; no blocks exist')
             break
@@ -842,7 +850,7 @@ export function useUndoRedo() {
           // Use setBlockEnabled to directly restore to previous state
           // This is more robust than conditional toggle in collaborative scenarios
           validBlockIds.forEach((blockId) => {
-            workflowStore.setBlockEnabled(blockId, previousStates[blockId])
+            useWorkflowStore.getState().setBlockEnabled(blockId, previousStates[blockId])
           })
           break
         }
@@ -850,7 +858,7 @@ export function useUndoRedo() {
           const toggleOp = entry.inverse as BatchToggleHandlesOperation
           const { blockIds, previousStates } = toggleOp.data
 
-          const validBlockIds = blockIds.filter((id) => workflowStore.blocks[id])
+          const validBlockIds = blockIds.filter((id) => useWorkflowStore.getState().blocks[id])
           if (validBlockIds.length === 0) {
             logger.debug('Undo batch-toggle-handles skipped; no blocks exist')
             break
@@ -870,7 +878,7 @@ export function useUndoRedo() {
           // Use setBlockHandles to directly restore to previous state
           // This is more robust than conditional toggle in collaborative scenarios
           validBlockIds.forEach((blockId) => {
-            workflowStore.setBlockHandles(blockId, previousStates[blockId])
+            useWorkflowStore.getState().setBlockHandles(blockId, previousStates[blockId])
           })
           break
         }
@@ -1047,13 +1055,13 @@ export function useUndoRedo() {
 
       logger.info('Undo operation', { type: entry.operation.type, workflowId: activeWorkflowId })
     })
-  }, [activeWorkflowId, userId, undoRedoStore, addToQueue, workflowStore])
+  }, [activeWorkflowId, userId, addToQueue])
 
   const redo = useCallback(async () => {
     if (!activeWorkflowId || !userId) return
 
     await runWithUndoRedoRecordingSuspended(async () => {
-      const entry = undoRedoStore.redo(activeWorkflowId, userId)
+      const entry = useUndoRedoStore.getState().redo(activeWorkflowId, userId)
       if (!entry) {
         logger.debug('No operations to redo')
         return
@@ -1066,7 +1074,9 @@ export function useUndoRedo() {
           const batchOp = entry.operation as BatchAddBlocksOperation
           const { blockSnapshots, edgeSnapshots, subBlockValues } = batchOp.data
 
-          const blocksToAdd = blockSnapshots.filter((b) => !workflowStore.blocks[b.id])
+          const blocksToAdd = blockSnapshots.filter(
+            (b) => !useWorkflowStore.getState().blocks[b.id]
+          )
           if (blocksToAdd.length === 0) {
             logger.debug('Redo batch-add-blocks skipped; all blocks exist')
             break
@@ -1090,22 +1100,24 @@ export function useUndoRedo() {
           })
 
           blocksToAdd.forEach((block) => {
-            workflowStore.addBlock(
-              block.id,
-              block.type,
-              block.name,
-              block.position,
-              block.data,
-              block.data?.parentId,
-              block.data?.extent,
-              {
-                enabled: block.enabled,
-                horizontalHandles: block.horizontalHandles,
-                advancedMode: block.advancedMode,
-                triggerMode: block.triggerMode,
-                height: block.height,
-              }
-            )
+            useWorkflowStore
+              .getState()
+              .addBlock(
+                block.id,
+                block.type,
+                block.name,
+                block.position,
+                block.data,
+                block.data?.parentId,
+                block.data?.extent,
+                {
+                  enabled: block.enabled,
+                  horizontalHandles: block.horizontalHandles,
+                  advancedMode: block.advancedMode,
+                  triggerMode: block.triggerMode,
+                  height: block.height,
+                }
+              )
           })
 
           if (subBlockValues && Object.keys(subBlockValues).length > 0) {
@@ -1122,10 +1134,10 @@ export function useUndoRedo() {
 
           if (edgeSnapshots && edgeSnapshots.length > 0) {
             const edgesToAdd = edgeSnapshots.filter(
-              (edge) => !workflowStore.edges.find((e) => e.id === edge.id)
+              (edge) => !useWorkflowStore.getState().edges.find((e) => e.id === edge.id)
             )
             if (edgesToAdd.length > 0) {
-              workflowStore.batchAddEdges(edgesToAdd)
+              useWorkflowStore.getState().batchAddEdges(edgesToAdd)
             }
           }
           break
@@ -1135,7 +1147,7 @@ export function useUndoRedo() {
           const { blockSnapshots } = batchOp.data
           const blockIds = blockSnapshots.map((b) => b.id)
 
-          const existingBlockIds = blockIds.filter((id) => workflowStore.blocks[id])
+          const existingBlockIds = blockIds.filter((id) => useWorkflowStore.getState().blocks[id])
           if (existingBlockIds.length === 0) {
             logger.debug('Redo batch-remove-blocks skipped; no blocks exist')
             break
@@ -1152,7 +1164,7 @@ export function useUndoRedo() {
             userId,
           })
 
-          workflowStore.batchRemoveBlocks(existingBlockIds)
+          useWorkflowStore.getState().batchRemoveBlocks(existingBlockIds)
           break
         }
         case UNDO_REDO_OPERATIONS.BATCH_REMOVE_EDGES: {
@@ -1161,7 +1173,7 @@ export function useUndoRedo() {
           const { edgeSnapshots } = batchRemoveOp.data
 
           const edgesToRemove = edgeSnapshots
-            .filter((e) => workflowStore.edges.find((edge) => edge.id === e.id))
+            .filter((e) => useWorkflowStore.getState().edges.find((edge) => edge.id === e.id))
             .map((e) => e.id)
 
           if (edgesToRemove.length > 0) {
@@ -1175,7 +1187,7 @@ export function useUndoRedo() {
               workflowId: activeWorkflowId,
               userId,
             })
-            workflowStore.batchRemoveEdges(edgesToRemove)
+            useWorkflowStore.getState().batchRemoveEdges(edgesToRemove)
           }
 
           logger.debug('Redid batch-remove-edges', { edgeCount: edgesToRemove.length })
@@ -1187,7 +1199,7 @@ export function useUndoRedo() {
           const { edgeSnapshots } = batchAddOp.data
 
           const edgesToAdd = edgeSnapshots.filter(
-            (e) => !workflowStore.edges.find((edge) => edge.id === e.id)
+            (e) => !useWorkflowStore.getState().edges.find((edge) => edge.id === e.id)
           )
 
           if (edgesToAdd.length > 0) {
@@ -1201,7 +1213,7 @@ export function useUndoRedo() {
               workflowId: activeWorkflowId,
               userId,
             })
-            workflowStore.batchAddEdges(edgesToAdd)
+            useWorkflowStore.getState().batchAddEdges(edgesToAdd)
           }
 
           logger.debug('Redid batch-add-edges', { edgeCount: edgesToAdd.length })
@@ -1222,7 +1234,7 @@ export function useUndoRedo() {
           }
 
           if (positionUpdates.length > 0) {
-            workflowStore.batchUpdatePositions(positionUpdates)
+            useWorkflowStore.getState().batchUpdatePositions(positionUpdates)
             addToQueue({
               id: opId,
               operation: {
@@ -1241,14 +1253,14 @@ export function useUndoRedo() {
           const updateOp = entry.operation as UpdateParentOperation
           const { blockId, newParentId, newPosition, affectedEdges } = updateOp.data
 
-          if (workflowStore.blocks[blockId]) {
+          if (useWorkflowStore.getState().blocks[blockId]) {
             // If we're removing FROM a subflow, remove edges first
             if (!newParentId && affectedEdges && affectedEdges.length > 0) {
               const edgeIdsToRemove = affectedEdges
-                .filter((edge) => workflowStore.edges.find((e) => e.id === edge.id))
+                .filter((edge) => useWorkflowStore.getState().edges.find((e) => e.id === edge.id))
                 .map((edge) => edge.id)
               if (edgeIdsToRemove.length > 0) {
-                workflowStore.batchRemoveEdges(edgeIdsToRemove)
+                useWorkflowStore.getState().batchRemoveEdges(edgeIdsToRemove)
                 edgeIdsToRemove.forEach((edgeId) => {
                   addToQueue({
                     id: crypto.randomUUID(),
@@ -1301,7 +1313,7 @@ export function useUndoRedo() {
             })
 
             // Update position and parent locally using batch method
-            workflowStore.batchUpdateBlocksWithParent([
+            useWorkflowStore.getState().batchUpdateBlocksWithParent([
               {
                 id: blockId,
                 position: newPosition,
@@ -1312,7 +1324,7 @@ export function useUndoRedo() {
             // If we're adding TO a subflow, restore edges after
             if (newParentId && affectedEdges && affectedEdges.length > 0) {
               const edgesToAdd = affectedEdges.filter(
-                (e) => !workflowStore.edges.find((edge) => edge.id === e.id)
+                (e) => !useWorkflowStore.getState().edges.find((edge) => edge.id === e.id)
               )
               if (edgesToAdd.length > 0) {
                 addToQueue({
@@ -1325,7 +1337,7 @@ export function useUndoRedo() {
                   workflowId: activeWorkflowId,
                   userId,
                 })
-                workflowStore.batchAddEdges(edgesToAdd)
+                useWorkflowStore.getState().batchAddEdges(edgesToAdd)
               }
             }
           } else {
@@ -1337,7 +1349,7 @@ export function useUndoRedo() {
           const batchUpdateOp = entry.operation as BatchUpdateParentOperation
           const { updates } = batchUpdateOp.data
 
-          const validUpdates = updates.filter((u) => workflowStore.blocks[u.blockId])
+          const validUpdates = updates.filter((u) => useWorkflowStore.getState().blocks[u.blockId])
           if (validUpdates.length === 0) {
             logger.debug('Redo batch-update-parent skipped; no blocks exist')
             break
@@ -1353,7 +1365,7 @@ export function useUndoRedo() {
             // Moving INTO subflow (redoing insert) → remove edges first
             if (newParentId && affectedEdges && affectedEdges.length > 0) {
               const edgeIds = affectedEdges
-                .filter((edge) => workflowStore.edges.find((e) => e.id === edge.id))
+                .filter((edge) => useWorkflowStore.getState().edges.find((e) => e.id === edge.id))
                 .map((edge) => edge.id)
               allEdgeIdsToRemove.push(...edgeIds)
             }
@@ -1361,7 +1373,7 @@ export function useUndoRedo() {
             // Moving OUT of subflow (redoing removal) → restore edges after
             if (!newParentId && affectedEdges && affectedEdges.length > 0) {
               const edgesToAdd = affectedEdges.filter(
-                (e) => !workflowStore.edges.find((edge) => edge.id === e.id)
+                (e) => !useWorkflowStore.getState().edges.find((edge) => edge.id === e.id)
               )
               allEdgesToAdd.push(...edgesToAdd)
             }
@@ -1369,7 +1381,7 @@ export function useUndoRedo() {
 
           // Apply edge removals in batch first
           if (allEdgeIdsToRemove.length > 0) {
-            workflowStore.batchRemoveEdges(allEdgeIdsToRemove)
+            useWorkflowStore.getState().batchRemoveEdges(allEdgeIdsToRemove)
             addToQueue({
               id: crypto.randomUUID(),
               operation: {
@@ -1388,7 +1400,7 @@ export function useUndoRedo() {
             position: update.newPosition,
             parentId: update.newParentId,
           }))
-          workflowStore.batchUpdateBlocksWithParent(blockUpdates)
+          useWorkflowStore.getState().batchUpdateBlocksWithParent(blockUpdates)
 
           // Apply edge additions in batch after
           if (allEdgesToAdd.length > 0) {
@@ -1402,7 +1414,7 @@ export function useUndoRedo() {
               workflowId: activeWorkflowId,
               userId,
             })
-            workflowStore.batchAddEdges(allEdgesToAdd)
+            useWorkflowStore.getState().batchAddEdges(allEdgesToAdd)
           }
 
           // Send batch update to server
@@ -1430,7 +1442,7 @@ export function useUndoRedo() {
           const toggleOp = entry.operation as BatchToggleEnabledOperation
           const { blockIds, previousStates } = toggleOp.data
 
-          const validBlockIds = blockIds.filter((id) => workflowStore.blocks[id])
+          const validBlockIds = blockIds.filter((id) => useWorkflowStore.getState().blocks[id])
           if (validBlockIds.length === 0) {
             logger.debug('Redo batch-toggle-enabled skipped; no blocks exist')
             break
@@ -1450,7 +1462,7 @@ export function useUndoRedo() {
           // Use setBlockEnabled to directly set to toggled state
           // Redo sets to !previousStates (the state after the original toggle)
           validBlockIds.forEach((blockId) => {
-            workflowStore.setBlockEnabled(blockId, !previousStates[blockId])
+            useWorkflowStore.getState().setBlockEnabled(blockId, !previousStates[blockId])
           })
           break
         }
@@ -1458,7 +1470,7 @@ export function useUndoRedo() {
           const toggleOp = entry.operation as BatchToggleHandlesOperation
           const { blockIds, previousStates } = toggleOp.data
 
-          const validBlockIds = blockIds.filter((id) => workflowStore.blocks[id])
+          const validBlockIds = blockIds.filter((id) => useWorkflowStore.getState().blocks[id])
           if (validBlockIds.length === 0) {
             logger.debug('Redo batch-toggle-handles skipped; no blocks exist')
             break
@@ -1478,7 +1490,7 @@ export function useUndoRedo() {
           // Use setBlockHandles to directly set to toggled state
           // Redo sets to !previousStates (the state after the original toggle)
           validBlockIds.forEach((blockId) => {
-            workflowStore.setBlockHandles(blockId, !previousStates[blockId])
+            useWorkflowStore.getState().setBlockHandles(blockId, !previousStates[blockId])
           })
           break
         }
@@ -1653,17 +1665,17 @@ export function useUndoRedo() {
         userId,
       })
     })
-  }, [activeWorkflowId, userId, undoRedoStore, addToQueue, workflowStore])
+  }, [activeWorkflowId, userId, addToQueue])
 
   const getStackSizes = useCallback(() => {
     if (!activeWorkflowId) return { undoSize: 0, redoSize: 0 }
-    return undoRedoStore.getStackSizes(activeWorkflowId, userId)
-  }, [activeWorkflowId, userId, undoRedoStore])
+    return useUndoRedoStore.getState().getStackSizes(activeWorkflowId, userId)
+  }, [activeWorkflowId, userId])
 
   const clearStacks = useCallback(() => {
     if (!activeWorkflowId) return
-    undoRedoStore.clear(activeWorkflowId, userId)
-  }, [activeWorkflowId, userId, undoRedoStore])
+    useUndoRedoStore.getState().clear(activeWorkflowId, userId)
+  }, [activeWorkflowId, userId])
 
   const recordApplyDiff = useCallback(
     (baselineSnapshot: any, proposedState: any, diffAnalysis: any) => {
@@ -1696,7 +1708,7 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.info('Recorded apply-diff operation', {
         workflowId: activeWorkflowId,
@@ -1706,7 +1718,7 @@ export function useUndoRedo() {
         proposedBlockCount: Object.keys(proposedState?.blocks || {}).length,
       })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordAcceptDiff = useCallback(
@@ -1742,11 +1754,11 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.debug('Recorded accept-diff operation', { workflowId: activeWorkflowId })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   const recordRejectDiff = useCallback(
@@ -1782,7 +1794,7 @@ export function useUndoRedo() {
       }
 
       const entry = createOperationEntry(operation, inverse)
-      undoRedoStore.push(activeWorkflowId, userId, entry)
+      useUndoRedoStore.getState().push(activeWorkflowId, userId, entry)
 
       logger.info('Recorded reject-diff operation', {
         workflowId: activeWorkflowId,
@@ -1790,7 +1802,7 @@ export function useUndoRedo() {
         afterBlockCount: Object.keys(afterReject?.blocks || {}).length,
       })
     },
-    [activeWorkflowId, userId, undoRedoStore]
+    [activeWorkflowId, userId]
   )
 
   return {
diff --git a/apps/sim/hooks/use-workspace-permissions.ts b/apps/sim/hooks/use-workspace-permissions.ts
index 0a080a6684..ef55011a55 100644
--- a/apps/sim/hooks/use-workspace-permissions.ts
+++ b/apps/sim/hooks/use-workspace-permissions.ts
@@ -76,9 +76,9 @@ export function useWorkspacePermissions(workspaceId: string | null): UseWorkspac
     }
   }
 
-  const updatePermissions = (newPermissions: WorkspacePermissions): void => {
+  const updatePermissions = useCallback((newPermissions: WorkspacePermissions): void => {
     setPermissions(newPermissions)
-  }
+  }, [])
 
   useEffect(() => {
     if (workspaceId) {
diff --git a/apps/sim/lib/core/config/env.ts b/apps/sim/lib/core/config/env.ts
index ae0e5cbe01..fd6c391b5a 100644
--- a/apps/sim/lib/core/config/env.ts
+++ b/apps/sim/lib/core/config/env.ts
@@ -262,6 +262,7 @@ export const env = createEnv({
 
     // Development Tools
     REACT_GRAB_ENABLED:                    z.boolean().optional(),                 // Enable React Grab for UI element debugging in Cursor/AI agents (dev only)
+    REACT_SCAN_ENABLED:                    z.boolean().optional(),                 // Enable React Scan for performance debugging (dev only)
 
     // SSO Configuration (for script-based registration)
     SSO_ENABLED:                           z.boolean().optional(),                 // Enable SSO functionality
diff --git a/apps/sim/lib/core/config/feature-flags.ts b/apps/sim/lib/core/config/feature-flags.ts
index 108dca6f65..9f746c5b12 100644
--- a/apps/sim/lib/core/config/feature-flags.ts
+++ b/apps/sim/lib/core/config/feature-flags.ts
@@ -117,6 +117,12 @@ export const isInvitationsDisabled = isTruthy(env.DISABLE_INVITATIONS)
  */
 export const isReactGrabEnabled = isDev && isTruthy(env.REACT_GRAB_ENABLED)
 
+/**
+ * Is React Scan enabled for performance debugging
+ * When true and in development mode, enables React Scan for detecting render performance issues
+ */
+export const isReactScanEnabled = isDev && isTruthy(env.REACT_SCAN_ENABLED)
+
 /**
  * Get cost multiplier based on environment
  */
diff --git a/apps/sim/stores/operation-queue/store.ts b/apps/sim/stores/operation-queue/store.ts
index b36eff4462..07e9381ced 100644
--- a/apps/sim/stores/operation-queue/store.ts
+++ b/apps/sim/stores/operation-queue/store.ts
@@ -37,8 +37,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
   hasOperationError: false,
 
   addToQueue: (operation) => {
-    // Immediate coalescing without client-side debouncing:
-    // For subblock updates, keep only latest pending op for the same blockId+subblockId
     if (
       operation.operation.operation === 'subblock-update' &&
       operation.operation.target === 'subblock'
@@ -60,7 +58,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       }))
     }
 
-    // For variable updates, keep only latest pending op for same variableId+field
     if (
       operation.operation.operation === 'variable-update' &&
       operation.operation.target === 'variable'
@@ -82,10 +79,8 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       }))
     }
 
-    // Handle remaining logic
     const state = get()
 
-    // Check for duplicate operation ID
     const existingOp = state.operations.find((op) => op.id === operation.id)
     if (existingOp) {
       logger.debug('Skipping duplicate operation ID', {
@@ -95,16 +90,13 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       return
     }
 
-    // Enhanced duplicate content check - especially important for block operations
     const duplicateContent = state.operations.find(
       (op) =>
         op.operation.operation === operation.operation.operation &&
         op.operation.target === operation.operation.target &&
         op.workflowId === operation.workflowId &&
-        // For block operations, check the block ID specifically
         ((operation.operation.target === 'block' &&
           op.operation.payload?.id === operation.operation.payload?.id) ||
-          // For other operations, fall back to full payload comparison
           (operation.operation.target !== 'block' &&
             JSON.stringify(op.operation.payload) === JSON.stringify(operation.operation.payload)))
     )
@@ -143,7 +135,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       operations: [...state.operations, queuedOp],
     }))
 
-    // Start processing if not already processing
     get().processNextOperation()
   },
 
@@ -171,7 +162,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
 
     set({ operations: newOperations, isProcessing: false })
 
-    // Process next operation in queue
     get().processNextOperation()
   },
 
@@ -201,7 +191,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       return
     }
 
-    // More aggressive retry for subblock/variable updates, less aggressive for structural ops
     const isSubblockOrVariable =
       (operation.operation.operation === 'subblock-update' &&
         operation.operation.target === 'subblock') ||
@@ -226,17 +215,15 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
         }
       )
 
-      // Update retry count and mark as pending for retry
       set((state) => ({
         operations: state.operations.map((op) =>
           op.id === operationId
             ? { ...op, retryCount: newRetryCount, status: 'pending' as const }
             : op
         ),
-        isProcessing: false, // Allow processing to continue
+        isProcessing: false,
       }))
 
-      // Schedule retry
       const timeout = setTimeout(() => {
         retryTimeouts.delete(operationId)
         get().processNextOperation()
@@ -244,7 +231,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
 
       retryTimeouts.set(operationId, timeout)
     } else {
-      // Always trigger offline mode when we can't persist - never silently drop data
       logger.error('Operation failed after max retries, triggering offline mode', {
         operationId,
         operation: operation.operation.operation,
@@ -272,7 +258,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
   processNextOperation: () => {
     const state = get()
 
-    // Don't process if already processing
     if (state.isProcessing) {
       return
     }
@@ -290,7 +275,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       return
     }
 
-    // Mark as processing
     set((state) => ({
       operations: state.operations.map((op) =>
         op.id === nextOperation.id ? { ...op, status: 'processing' as const } : op
@@ -304,7 +288,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       retryCount: nextOperation.retryCount,
     })
 
-    // Emit the operation
     const { operation: op, target, payload } = nextOperation.operation
     if (op === 'subblock-update' && target === 'subblock') {
       if (emitSubblockUpdate) {
@@ -320,7 +303,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       }
     }
 
-    // Create operation timeout - longer for subblock/variable updates to handle reconnects
     const isSubblockOrVariable =
       (nextOperation.operation.operation === 'subblock-update' &&
         nextOperation.operation.target === 'subblock') ||
@@ -347,13 +329,10 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
     const operationsToCancel = state.operations.filter((op) => {
       const { target, payload, operation } = op.operation
 
-      // Single block property updates (update-position, toggle-enabled, update-name, etc.)
       if (target === 'block' && payload?.id === blockId) return true
 
-      // Subblock updates for this block
       if (target === 'subblock' && payload?.blockId === blockId) return true
 
-      // Batch block operations
       if (target === 'blocks') {
         if (operation === 'batch-add-blocks' && Array.isArray(payload?.blocks)) {
           return payload.blocks.some((b: { id: string }) => b.id === blockId)
@@ -369,7 +348,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       return false
     })
 
-    // Cancel timeouts for these operations
     operationsToCancel.forEach((op) => {
       const operationTimeout = operationTimeouts.get(op.id)
       if (operationTimeout) {
@@ -384,17 +362,13 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       }
     })
 
-    // Remove all operations for this block (both pending and processing)
     const newOperations = state.operations.filter((op) => {
       const { target, payload, operation } = op.operation
 
-      // Single block property updates (update-position, toggle-enabled, update-name, etc.)
       if (target === 'block' && payload?.id === blockId) return false
 
-      // Subblock updates for this block
       if (target === 'subblock' && payload?.blockId === blockId) return false
 
-      // Batch block operations
       if (target === 'blocks') {
         if (operation === 'batch-add-blocks' && Array.isArray(payload?.blocks)) {
           if (payload.blocks.some((b: { id: string }) => b.id === blockId)) return false
@@ -412,7 +386,7 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
 
     set({
       operations: newOperations,
-      isProcessing: false, // Reset processing state in case we removed the current operation
+      isProcessing: false,
     })
 
     logger.debug('Cancelled operations for block', {
@@ -420,16 +394,12 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       cancelledOperations: operationsToCancel.length,
     })
 
-    // Process next operation if there are any remaining
     get().processNextOperation()
   },
 
   cancelOperationsForVariable: (variableId: string) => {
     logger.debug('Canceling all operations for variable', { variableId })
 
-    // No debounced timeouts to cancel (moved to server-side)
-
-    // Find and cancel operation timeouts for operations related to this variable
     const state = get()
     const operationsToCancel = state.operations.filter(
       (op) =>
@@ -438,7 +408,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
           op.operation.payload?.sourceVariableId === variableId)
     )
 
-    // Cancel timeouts for these operations
     operationsToCancel.forEach((op) => {
       const operationTimeout = operationTimeouts.get(op.id)
       if (operationTimeout) {
@@ -453,7 +422,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       }
     })
 
-    // Remove all operations for this variable (both pending and processing)
     const newOperations = state.operations.filter(
       (op) =>
         !(
@@ -465,7 +433,7 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
 
     set({
       operations: newOperations,
-      isProcessing: false, // Reset processing state in case we removed the current operation
+      isProcessing: false,
     })
 
     logger.debug('Cancelled operations for variable', {
@@ -473,7 +441,6 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
       cancelledOperations: operationsToCancel.length,
     })
 
-    // Process next operation if there are any remaining
     get().processNextOperation()
   },
 
@@ -519,20 +486,31 @@ export const useOperationQueueStore = create<OperationQueueState>((set, get) =>
   },
 }))
 
+/**
+ * Hook to access operation queue state and actions.
+ * Uses getState() for actions to avoid unnecessary re-renders.
+ * Only subscribes to the specific state values needed.
+ */
 export function useOperationQueue() {
-  const store = useOperationQueueStore()
+  const hasOperationError = useOperationQueueStore((state) => state.hasOperationError)
+
+  const actions = useOperationQueueStore.getState()
 
   return {
-    queue: store.operations,
-    isProcessing: store.isProcessing,
-    hasOperationError: store.hasOperationError,
-    addToQueue: store.addToQueue,
-    confirmOperation: store.confirmOperation,
-    failOperation: store.failOperation,
-    processNextOperation: store.processNextOperation,
-    cancelOperationsForBlock: store.cancelOperationsForBlock,
-    cancelOperationsForVariable: store.cancelOperationsForVariable,
-    triggerOfflineMode: store.triggerOfflineMode,
-    clearError: store.clearError,
+    get queue() {
+      return useOperationQueueStore.getState().operations
+    },
+    get isProcessing() {
+      return useOperationQueueStore.getState().isProcessing
+    },
+    hasOperationError,
+    addToQueue: actions.addToQueue,
+    confirmOperation: actions.confirmOperation,
+    failOperation: actions.failOperation,
+    processNextOperation: actions.processNextOperation,
+    cancelOperationsForBlock: actions.cancelOperationsForBlock,
+    cancelOperationsForVariable: actions.cancelOperationsForVariable,
+    triggerOfflineMode: actions.triggerOfflineMode,
+    clearError: actions.clearError,
   }
 }