fix(workflow): correct two regressions in the canvas perf pass

Gating `toolBlocks` on the picker's open state also emptied it for the
always-visible selected-tool chips, which silently fell through to their
`getBlock` fallback — the branch documented as the exception for types
hidden from the picker. Only `toolGroups`, where the expensive group build
lives, is gated now.

Re-invoking the find shortcut while the panel was already open stopped
re-selecting the query: `open()` is a no-op when the panel is mounted, so
the mount-time focus effect never re-ran. The panel publishes its focus
callback so the shortcut can drive it either way.

A saturated `slice` also allocated a fresh array once the limit covered a
whole group, re-rendering the memoized "All blocks" group on every tools
page-in — the frame cost the change set out to remove.

Alongside those: fold the two reconcilers into one generic and decide reuse
by identity rather than a three-write `changed` flag; record why the node
comparison is deliberately asymmetric (React Flow augments node objects in
place, so a symmetric `isEqual` would never reuse anything); give the
browse pagination its own constant instead of borrowing the search-result
cap; drop a redundant clamp and the deps it needed; inline the
single-consumer `sliceGroupsToLimit`; and split the bundled ref so the
hottest component stops allocating an object per render.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx

@@ -29,8 +29,6 @@ import {
 import {
   filterAndCap,
   GROUP_HEADING_CLASSNAME,
-  MAX_RESULTS_PER_GROUP,
-  sliceGroupsToLimit,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 import {
   CMDK_ITEM_GAP_CLASS,
@@ -56,6 +54,7 @@ const SELECTOR_ACTION_MENU_AMPLITUDE = 7
 const RECENT_SELECTION_LIMIT = 3
 const RECENT_SELECTION_STORAGE_PREFIX = 'sim:connection-block-selector:recent'
 const BROWSE_PREFETCH_MARGIN_PX = 640
+const BROWSE_PAGE_SIZE = 50
 const POPULAR_BLOCK_TYPES = [
   'agent',
   'function',
@@ -65,6 +64,11 @@ const POPULAR_BLOCK_TYPES = [
   'memory',
 ] as const
 
+/** Ordered prefix that reuses the source array once `count` covers all of it. */
+function takePrefix<T>(items: T[], count: number): T[] {
+  return count >= items.length ? items : items.slice(0, Math.max(0, count))
+}
+
 const SELECTOR_PORTS: WorkflowBorderPort[] = [
   {
     id: 'target',
@@ -151,7 +155,7 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
   const [search, setSearch] = useState('')
   const [selectedValue, setSelectedValue] = useState('')
   const [recentSelections, setRecentSelections] = useState<RecentSelection[]>([])
-  const [browseLimit, setBrowseLimit] = useState(MAX_RESULTS_PER_GROUP)
+  const [browseLimit, setBrowseLimit] = useState(BROWSE_PAGE_SIZE)
   const deferredSearch = useDeferredValue(search)
   const isSearching = deferredSearch.trim().length > 0
   const recentStorageKey = `${RECENT_SELECTION_STORAGE_PREFIX}:${workspaceId}`
@@ -273,30 +277,31 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
     () => availableTools.filter((tool) => !recentSelectionKeys.has(`tool:${tool.id}`)),
     [availableTools, recentSelectionKeys]
   )
-  const [visibleBrowseBlocks, visibleBrowseTools] = useMemo(
-    () => sliceGroupsToLimit([browseBlocks, browseTools], browseLimit),
-    [browseBlocks, browseLimit, browseTools]
+  const visibleBrowseBlocks = useMemo(
+    () => takePrefix(browseBlocks, browseLimit),
+    [browseBlocks, browseLimit]
+  )
+  const visibleBrowseTools = useMemo(
+    () => takePrefix(browseTools, browseLimit - browseBlocks.length),
+    [browseBlocks.length, browseLimit, browseTools]
   )
   const hasMoreBrowseResults = browseLimit < browseBlocks.length + browseTools.length
 
   /**
-   * Keep the initial commit bounded, then extend the catalog before the user
-   * reaches its end. Rendering every cmdk item up front caused the original
-   * frame spike, while a manual pagination control exposed that constraint in
-   * the UI. Prefetching near the viewport preserves continuous scrolling and
-   * cmdk's native keyboard navigation without mounting the whole catalog.
+   * Mounting every cmdk item up front caused the frame spike; a manual "show
+   * more" control would leak that constraint into the UI. Prefetching near the
+   * viewport keeps scrolling continuous and cmdk's keyboard navigation intact.
    */
   useEffect(() => {
     const list = listRef.current
     const sentinel = browseSentinelRef.current
     if (isSearching || !hasMoreBrowseResults || !list || !sentinel) return
 
-    const browseResultCount = browseBlocks.length + browseTools.length
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (!entry.isIntersecting) return
         startTransition(() => {
-          setBrowseLimit((current) => Math.min(current + MAX_RESULTS_PER_GROUP, browseResultCount))
+          setBrowseLimit((current) => current + BROWSE_PAGE_SIZE)
         })
       },
       {
@@ -307,7 +312,7 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
 
     observer.observe(sentinel)
     return () => observer.disconnect()
-  }, [browseBlocks.length, browseTools.length, hasMoreBrowseResults, isSearching])
+  }, [hasMoreBrowseResults, isSearching])
 
   const dispatchSelection = useCallback(
     (type: string, resultType: 'block' | 'tool' | 'tool_operation', presetOperation?: string) => {

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

@@ -464,6 +464,9 @@ function UnsupportedToolBadge({ message }: { message: string }) {
   )
 }
 
+const EMPTY_COMBOBOX_GROUPS: ComboboxOptionGroup[] = []
+const EMPTY_COMBOBOX_OPTIONS: ComboboxOption[] = []
+
 export const ToolInput = memo(function ToolInput({
   blockId,
   subBlockId,
@@ -697,7 +700,6 @@ export const ToolInput = memo(function ToolInput({
 
   const customBlockOverlayVersion = useCustomBlockOverlayVersion()
   const toolBlocks = useMemo(() => {
-    if (!open) return []
     const allToolBlocks = getAllBlocks().filter(isAgentToolBlock)
     /* An empty option list means the block declares no selectable operation, so
        there is nothing to gate — only a wholly denied one leaves the picker. */
@@ -706,7 +708,7 @@ export const ToolInput = memo(function ToolInput({
       const { options, denied } = getOperationChoices(block)
       return options.length === 0 || options.some((option) => !denied.has(option.id))
     })
-  }, [filterBlocks, customBlockOverlayVersion, getOperationChoices, open])
+  }, [filterBlocks, customBlockOverlayVersion, getOperationChoices])
 
   const hasBackfilledRef = useRef(false)
   useEffect(() => {
@@ -1404,7 +1406,7 @@ export const ToolInput = memo(function ToolInput({
    * @returns Array of option groups for the combobox component
    */
   const toolGroups = useMemo((): ComboboxOptionGroup[] => {
-    if (!open) return []
+    if (!open) return EMPTY_COMBOBOX_GROUPS
     const groups: ComboboxOptionGroup[] = []
 
     // MCP Server drill-down: when navigated into a server, show only its tools
@@ -1708,7 +1710,7 @@ export const ToolInput = memo(function ToolInput({
   return (
     <div className='w-full space-y-2'>
       <Combobox
-        options={[]}
+        options={EMPTY_COMBOBOX_OPTIONS}
         groups={toolGroups}
         placeholder='Add tool...'
         /* Every list this picker offers — blocks, operations, MCP and custom

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, cn, Input, toast } from '@sim/emcn'
 import { ChevronDown, ChevronRight, ChevronUp, X } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
@@ -113,18 +113,27 @@ export function WorkflowSearchReplace() {
   const { isOpen, open } = useWorkflowSearchReplaceStore(
     useShallow((state) => ({ isOpen: state.isOpen, open: state.open }))
   )
+  const focusSearchInputRef = useRef<(() => void) | null>(null)
 
   useRegisterGlobalCommands([
     createCommand({
       id: 'open-workflow-search-replace',
-      handler: open,
+      handler: () => {
+        open()
+        focusSearchInputRef.current?.()
+      },
     }),
   ])
 
-  return isOpen ? <WorkflowSearchReplacePanel /> : null
+  return isOpen ? <WorkflowSearchReplacePanel focusRef={focusSearchInputRef} /> : null
 }
 
-function WorkflowSearchReplacePanel() {
+interface WorkflowSearchReplacePanelProps {
+  /** Lets the shortcut re-select the query while the panel is already open. */
+  focusRef: RefObject<(() => void) | null>
+}
+
+function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string | undefined
   const routeWorkflowId = params.workflowId as string | undefined
@@ -180,8 +189,7 @@ function WorkflowSearchReplacePanel() {
       setActiveMatchId: state.setActiveMatchId,
     }))
   )
-  const prevQueryRef = useRef(query)
-  const isFirstMatchSyncRef = useRef(true)
+  const prevQueryRef = useRef<string | null>(null)
   const afterReplaceIndexRef = useRef<number | null>(null)
   const { data: workspaceCredentials } = useWorkspaceCredentials({ workspaceId })
   const { data: customTools = [] } = useCustomTools(workspaceId ?? '')
@@ -265,16 +273,17 @@ function WorkflowSearchReplacePanel() {
   )
 
   useEffect(() => {
-    searchInputRef.current?.focus()
-    searchInputRef.current?.select()
-  }, [])
-
-  useEffect(
-    () => () => {
+    const focusSearchInput = () => {
+      searchInputRef.current?.focus()
+      searchInputRef.current?.select()
+    }
+    focusSearchInput()
+    focusRef.current = focusSearchInput
+    return () => {
+      focusRef.current = null
       usePanelEditorSearchStore.getState().setActiveSearchTarget(null)
-    },
-    []
-  )
+    }
+  }, [focusRef])
 
   const panelHeight = isReplaceExpanded
     ? SEARCH_PANEL_EXPANDED_HEIGHT
@@ -388,8 +397,6 @@ function WorkflowSearchReplacePanel() {
   }
 
   useEffect(() => {
-    const justOpened = isFirstMatchSyncRef.current
-    isFirstMatchSyncRef.current = false
     const queryChanged = prevQueryRef.current !== query
     prevQueryRef.current = query
 
@@ -404,7 +411,7 @@ function WorkflowSearchReplacePanel() {
       const replaceIndex = afterReplaceIndexRef.current
       afterReplaceIndexRef.current = null
 
-      if (queryChanged || justOpened) {
+      if (queryChanged) {
         handleSelectMatch(hydratedMatches[0].id)
       } else if (replaceIndex !== null) {
         handleSelectMatch(hydratedMatches[Math.min(replaceIndex, hydratedMatches.length - 1)].id)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts

@@ -7,14 +7,10 @@ import type { BlockState } from '@/stores/workflows/workflow/types'
 
 export const SUBFLOW_DROP_TARGET_CLASS = 'subflow-node-drop-target'
 
-interface ArrowNavigationEvent {
-  key: string
-  repeat: boolean
-  metaKey: boolean
-  ctrlKey: boolean
-  altKey: boolean
-  shiftKey: boolean
-}
+type ArrowNavigationEvent = Pick<
+  KeyboardEvent,
+  'key' | 'repeat' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'
+>
 
 export function getArrowNavigationDirection(event: ArrowNavigationEvent): -1 | 1 | null {
   if (event.repeat || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return null
@@ -23,39 +19,62 @@ export function getArrowNavigationDirection(event: ArrowNavigationEvent): -1 | 1
   return null
 }
 
+/**
+ * A derivation that changed nothing must produce no new reference at any level,
+ * so React Flow can skip the subtree. Reuse is decided by identity after
+ * projection, which also catches a pure reorder: a reused item landing at a
+ * different index breaks the positional sweep.
+ */
+function reconcileById<T extends { id: string }>(
+  current: T[],
+  derived: T[],
+  project: (derivedItem: T, currentItem: T | undefined) => T,
+  isReusable: (currentItem: T, nextItem: T) => boolean
+): T[] {
+  const currentById = new Map<string, T>()
+  for (const item of current) currentById.set(item.id, item)
+
+  const next = derived.map((derivedItem) => {
+    const currentItem = currentById.get(derivedItem.id)
+    const nextItem = project(derivedItem, currentItem)
+    return currentItem && isReusable(currentItem, nextItem) ? currentItem : nextItem
+  })
+
+  const unchanged =
+    next.length === current.length && next.every((item, index) => item === current[index])
+  return unchanged ? current : next
+}
+
+/**
+ * Subset comparison, deliberately asymmetric: React Flow writes `width`,
+ * `height`, `positionAbsolute` and `dragging` onto the node objects it owns, so
+ * a symmetric `isEqual` against a freshly derived node would never match and no
+ * node would ever be reused. Only the keys the derivation itself produces are
+ * compared.
+ */
 function containsDerivedValues<T extends object>(current: T, derived: T): boolean {
-  return Object.entries(derived).every(([key, value]) => isEqual(current[key as keyof T], value))
+  for (const key of Object.keys(derived) as (keyof T)[]) {
+    if (!isEqual(current[key], derived[key])) return false
+  }
+  return true
 }
 
 /** Reuses unchanged React Flow node objects while carrying local selection forward. */
 export function reconcileCanvasNodes(currentNodes: Node[], derivedNodes: Node[]): Node[] {
-  const currentById = new Map(currentNodes.map((node) => [node.id, node]))
-  let changed = currentNodes.length !== derivedNodes.length
-  const nextNodes = derivedNodes.map((derivedNode, index) => {
-    const currentNode = currentById.get(derivedNode.id)
-    const nextNode = { ...derivedNode, selected: currentNode?.selected ?? false }
-    if (currentNodes[index]?.id !== derivedNode.id) changed = true
-    if (currentNode && containsDerivedValues(currentNode, nextNode)) return currentNode
-    changed = true
-    return nextNode
-  })
-
-  return changed ? nextNodes : currentNodes
+  return reconcileById(
+    currentNodes,
+    derivedNodes,
+    (derivedNode, currentNode) => ({ ...derivedNode, selected: currentNode?.selected ?? false }),
+    containsDerivedValues
+  )
 }
 
-/** Reuses unchanged React Flow edge objects after graph-level derivation reruns. */
+/**
+ * Reuses unchanged React Flow edge objects after graph-level derivation reruns.
+ * Edges carry no React Flow-written fields, so a plain `isEqual` is symmetric-safe.
+ */
 export function reconcileCanvasEdges(currentEdges: Edge[], derivedEdges: Edge[]): Edge[] {
-  const currentById = new Map(currentEdges.map((edge) => [edge.id, edge]))
-  let changed = currentEdges.length !== derivedEdges.length
-  const nextEdges = derivedEdges.map((derivedEdge, index) => {
-    const currentEdge = currentById.get(derivedEdge.id)
-    if (currentEdges[index]?.id !== derivedEdge.id) changed = true
-    if (currentEdge && isEqual(currentEdge, derivedEdge)) return currentEdge
-    changed = true
-    return derivedEdge
-  })
-
-  return changed ? nextEdges : currentEdges
+  return reconcileById(currentEdges, derivedEdges, (derivedEdge) => derivedEdge, isEqual)
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -4638,15 +4638,16 @@ const WorkflowContent = React.memo(
       [blocks, getNodes]
     )
 
+    const latestEdgesRef = useRef(edges)
+    latestEdgesRef.current = edges
+    const latestBlocksRef = useRef(blocks)
+    latestBlocksRef.current = blocks
     /** Stable delete handler to avoid creating new function references per edge. */
-    const edgeDeleteStateRef = useRef({ edges, blocks })
-    edgeDeleteStateRef.current = { edges, blocks }
     const handleEdgeDelete = useCallback(
       (edgeId: string) => {
-        const { edges: currentEdges, blocks: currentBlocks } = edgeDeleteStateRef.current
         // Prevent removing edges targeting protected blocks
-        const edge = currentEdges.find((candidate) => candidate.id === edgeId)
-        if (edge && isEdgeProtected(edge, currentBlocks)) {
+        const edge = latestEdgesRef.current.find((candidate) => candidate.id === edgeId)
+        if (edge && isEdgeProtected(edge, latestBlocksRef.current)) {
           toast({ message: 'Cannot remove connections to locked blocks' })
           return
         }
@@ -4777,6 +4778,10 @@ const WorkflowContent = React.memo(
           },
         }
       })
+      /* Deliberately impure: referential stability across renders needs the
+         previous result, and no state-shaped alternative exists. Safe because
+         reconciliation is idempotent — re-running it on its own output returns
+         that output by reference, so a discarded render cannot corrupt it. */
       const reconciledEdges = reconcileCanvasEdges(
         previousEdgesWithSelectionRef.current,
         derivedEdges

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.test.ts

@@ -14,20 +14,8 @@ import {
   scoreActions,
   scoreAndSort,
   scoreSectionItems,
-  sliceGroupsToLimit,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 
-describe('sliceGroupsToLimit', () => {
-  it('bounds an ordered browse catalog across groups without reordering it', () => {
-    const blocks = Array.from({ length: 40 }, (_, index) => `block-${index}`)
-    const tools = Array.from({ length: 40 }, (_, index) => `tool-${index}`)
-
-    expect(sliceGroupsToLimit([blocks, tools], 50)).toEqual([blocks, tools.slice(0, 10)])
-    expect(blocks).toHaveLength(40)
-    expect(tools).toHaveLength(40)
-  })
-})
-
 describe('getActionGroupLabel', () => {
   const action = {
     id: 'test-action',