feat(search): workflow search and replace

Author: icecrasher321

apps/realtime/src/database/operations.ts

@@ -8,6 +8,7 @@ import {
   EDGE_OPERATIONS,
   EDGES_OPERATIONS,
   OPERATION_TARGETS,
+  SUBBLOCK_OPERATIONS,
   SUBFLOW_OPERATIONS,
   VARIABLE_OPERATIONS,
   WORKFLOW_OPERATIONS,
@@ -251,6 +252,9 @@ export async function persistWorkflowOperation(workflowId: string, operation: an
         case OPERATION_TARGETS.SUBFLOW:
           await handleSubflowOperationTx(tx, workflowId, op, payload)
           break
+        case OPERATION_TARGETS.SUBBLOCK:
+          await handleSubblockOperationTx(tx, workflowId, op, payload)
+          break
         case OPERATION_TARGETS.VARIABLE:
           await handleVariableOperationTx(tx, workflowId, op, payload)
           break
@@ -1734,6 +1738,93 @@ async function handleSubflowOperationTx(
   }
 }
 
+function valuesEqual(left: unknown, right: unknown): boolean {
+  return JSON.stringify(left) === JSON.stringify(right)
+}
+
+// Subblock operations - targeted value updates without replacing workflow state
+async function handleSubblockOperationTx(
+  tx: any,
+  workflowId: string,
+  operation: string,
+  payload: any
+) {
+  switch (operation) {
+    case SUBBLOCK_OPERATIONS.BATCH_UPDATE: {
+      const updates = payload.updates
+      if (!Array.isArray(updates) || updates.length === 0) {
+        return
+      }
+
+      for (const update of updates) {
+        const { blockId, subblockId, value, expectedValue } = update
+        if (!blockId || !subblockId) {
+          throw new Error('Missing required fields for subblock batch update')
+        }
+
+        const [block] = await tx
+          .select({
+            subBlocks: workflowBlocks.subBlocks,
+            locked: workflowBlocks.locked,
+            data: workflowBlocks.data,
+          })
+          .from(workflowBlocks)
+          .where(and(eq(workflowBlocks.id, blockId), eq(workflowBlocks.workflowId, workflowId)))
+          .limit(1)
+
+        if (!block) {
+          throw new Error(`Block ${blockId} not found`)
+        }
+
+        if (block.locked) {
+          throw new Error(`Block ${blockId} is locked`)
+        }
+
+        const parentId = (block.data as Record<string, unknown> | null)?.parentId as
+          | string
+          | undefined
+        if (parentId) {
+          const [parentBlock] = await tx
+            .select({ locked: workflowBlocks.locked })
+            .from(workflowBlocks)
+            .where(and(eq(workflowBlocks.id, parentId), eq(workflowBlocks.workflowId, workflowId)))
+            .limit(1)
+
+          if (parentBlock?.locked) {
+            throw new Error(`Parent block ${parentId} is locked`)
+          }
+        }
+
+        const subBlocks = { ...((block.subBlocks as Record<string, any>) || {}) }
+        const currentSubBlock = subBlocks[subblockId]
+        const currentValue = currentSubBlock?.value
+        if (expectedValue !== undefined && !valuesEqual(currentValue, expectedValue)) {
+          throw new Error(`Subblock ${blockId}.${subblockId} changed since replacement was planned`)
+        }
+
+        subBlocks[subblockId] = currentSubBlock
+          ? { ...currentSubBlock, value }
+          : { id: subblockId, type: 'unknown', value }
+
+        await tx
+          .update(workflowBlocks)
+          .set({
+            subBlocks,
+            updatedAt: new Date(),
+          })
+          .where(and(eq(workflowBlocks.id, blockId), eq(workflowBlocks.workflowId, workflowId)))
+      }
+
+      logger.debug(`Batch updated ${updates.length} subblocks for workflow ${workflowId}`)
+      break
+    }
+
+    default:
+      logger.warn(`Unknown subblock operation: ${operation}`)
+      throw new Error(`Unsupported subblock operation: ${operation}`)
+  }
+}
+
 // Variable operations - updates workflow.variables JSON field
 async function handleVariableOperationTx(
   tx: any,

apps/realtime/src/middleware/permissions.test.ts

@@ -51,6 +51,11 @@ describe('checkRolePermission', () => {
       const result = checkRolePermission('admin', 'replace-state')
       expectPermissionAllowed(result)
     })
+
+    it('should allow subblock-batch-update operation', () => {
+      const result = checkRolePermission('admin', 'subblock-batch-update')
+      expectPermissionAllowed(result)
+    })
   })
 
   describe('write role', () => {
@@ -77,6 +82,11 @@ describe('checkRolePermission', () => {
       const result = checkRolePermission('write', 'update-position')
       expectPermissionAllowed(result)
     })
+
+    it('should allow subblock-batch-update operation', () => {
+      const result = checkRolePermission('write', 'subblock-batch-update')
+      expectPermissionAllowed(result)
+    })
   })
 
   describe('read role', () => {
@@ -111,6 +121,11 @@ describe('checkRolePermission', () => {
       expectPermissionDenied(result, 'read')
     })
 
+    it('should deny subblock-batch-update operation for read role', () => {
+      const result = checkRolePermission('read', 'subblock-batch-update')
+      expectPermissionDenied(result, 'read')
+    })
+
     it('should deny toggle-enabled operation for read role', () => {
       const result = checkRolePermission('read', 'toggle-enabled')
       expectPermissionDenied(result, 'read')

apps/realtime/src/middleware/permissions.ts

@@ -46,6 +46,7 @@ const WRITE_OPERATIONS: string[] = [
   SUBFLOW_OPERATIONS.UPDATE,
   // Subblock operations
   SUBBLOCK_OPERATIONS.UPDATE,
+  SUBBLOCK_OPERATIONS.BATCH_UPDATE,
   // Variable operations
   VARIABLE_OPERATIONS.UPDATE,
   // Workflow operations

apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts

@@ -14,6 +14,7 @@ export type CommandId =
   // | 'goto-templates'
   | 'goto-logs'
   | 'open-search'
+  | 'open-workflow-search-replace'
   | 'run-workflow'
   | 'clear-terminal-console'
   | 'focus-toolbar-search'
@@ -79,6 +80,11 @@ export const COMMAND_DEFINITIONS: Record<CommandId, CommandDefinition> = {
     shortcut: 'Mod+K',
     allowInEditable: true,
   },
+  'open-workflow-search-replace': {
+    id: 'open-workflow-search-replace',
+    shortcut: 'Mod+F',
+    allowInEditable: true,
+  },
   'run-workflow': {
     id: 'run-workflow',
     shortcut: 'Mod+Enter',
@@ -91,7 +97,7 @@ export const COMMAND_DEFINITIONS: Record<CommandId, CommandDefinition> = {
   },
   'focus-toolbar-search': {
     id: 'focus-toolbar-search',
-    shortcut: 'Mod+F',
+    shortcut: 'Mod+Alt+F',
     allowInEditable: false,
   },
   'clear-notifications': {

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

@@ -103,6 +103,7 @@ interface SubBlockProps {
   labelSuffix?: React.ReactNode
   /** Provides sibling values for dependency resolution in non-preview contexts (e.g. tool-input) */
   dependencyContext?: Record<string, unknown>
+  isSearchHighlighted?: boolean
 }
 
 /**
@@ -436,6 +437,7 @@ const arePropsEqual = (prevProps: SubBlockProps, nextProps: SubBlockProps): bool
     prevProps.allowExpandInPreview === nextProps.allowExpandInPreview &&
     canonicalToggleEqual &&
     prevProps.labelSuffix === nextProps.labelSuffix &&
+    prevProps.isSearchHighlighted === nextProps.isSearchHighlighted &&
     prevProps.dependencyContext === nextProps.dependencyContext
   )
 }
@@ -452,6 +454,7 @@ const arePropsEqual = (prevProps: SubBlockProps, nextProps: SubBlockProps): bool
  * @param canonicalToggle - Metadata and handlers for the basic/advanced mode toggle
  * @param labelSuffix - Additional content rendered after the label text
  * @param dependencyContext - Sibling values for dependency resolution in non-preview contexts (e.g. tool-input)
+ * @param isSearchHighlighted - Whether workflow search should highlight this field
  */
 function SubBlockComponent({
   blockId,
@@ -463,6 +466,7 @@ function SubBlockComponent({
   canonicalToggle,
   labelSuffix,
   dependencyContext,
+  isSearchHighlighted,
 }: SubBlockProps): JSX.Element {
   const params = useParams()
   const workspaceId = params.workspaceId as string
@@ -1165,7 +1169,15 @@ function SubBlockComponent({
   }
 
   return (
-    <div onMouseDown={handleMouseDown} className='subblock-content flex flex-col gap-2.5'>
+    <div
+      onMouseDown={handleMouseDown}
+      data-workflow-search-subblock-id={config.id}
+      data-workflow-search-canonical-id={config.canonicalParamId ?? config.id}
+      className={cn(
+        'subblock-content flex flex-col gap-2.5 rounded-md transition-colors',
+        isSearchHighlighted && 'bg-[var(--surface-3)] p-2 ring-1 ring-[var(--border-1)]'
+      )}
+    >
       {renderLabel(
         config,
         isValidJson,

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

@@ -85,15 +85,21 @@ const IconComponent = ({ icon: Icon, className }: { icon: any; className?: strin
  * @returns Editor panel content
  */
 export function Editor() {
-  const { currentBlockId, connectionsHeight, toggleConnectionsCollapsed, registerRenameCallback } =
-    usePanelEditorStore(
-      useShallow((state) => ({
-        currentBlockId: state.currentBlockId,
-        connectionsHeight: state.connectionsHeight,
-        toggleConnectionsCollapsed: state.toggleConnectionsCollapsed,
-        registerRenameCallback: state.registerRenameCallback,
-      }))
-    )
+  const {
+    currentBlockId,
+    activeSearchTarget,
+    connectionsHeight,
+    toggleConnectionsCollapsed,
+    registerRenameCallback,
+  } = usePanelEditorStore(
+    useShallow((state) => ({
+      currentBlockId: state.currentBlockId,
+      activeSearchTarget: state.activeSearchTarget,
+      connectionsHeight: state.connectionsHeight,
+      toggleConnectionsCollapsed: state.toggleConnectionsCollapsed,
+      registerRenameCallback: state.registerRenameCallback,
+    }))
+  )
   const currentWorkflow = useCurrentWorkflow()
   const currentBlock = currentBlockId ? currentWorkflow.getBlockById(currentBlockId) : null
   const blockConfig = currentBlock ? getBlock(currentBlock.type) : null
@@ -238,6 +244,22 @@ export function Editor() {
   const [editedName, setEditedName] = useState('')
   const renamingBlockIdRef = useRef<string | null>(null)
 
+  useEffect(() => {
+    if (!activeSearchTarget || activeSearchTarget.blockId !== currentBlockId) return
+    const container = subBlocksRef.current
+    if (!container) return
+
+    const directTarget = container.querySelector<HTMLElement>(
+      `[data-workflow-search-subblock-id="${activeSearchTarget.subBlockId}"]`
+    )
+    const target =
+      directTarget ??
+      container.querySelector<HTMLElement>(
+        `[data-workflow-search-canonical-id="${activeSearchTarget.canonicalSubBlockId}"]`
+      )
+    target?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }, [activeSearchTarget, currentBlockId, subBlocks])
+
   /**
    * Ref callback that auto-selects the input text when mounted.
    */
@@ -586,6 +608,12 @@ export function Editor() {
                           subBlockValues={subBlockState}
                           disabled={!canEditBlock}
                           allowExpandInPreview={false}
+                          isSearchHighlighted={
+                            activeSearchTarget?.blockId === currentBlockId &&
+                            (activeSearchTarget.subBlockId === subBlock.id ||
+                              activeSearchTarget.canonicalSubBlockId ===
+                                (subBlock.canonicalParamId ?? subBlock.id))
+                          }
                           canonicalToggle={
                             isCanonicalSwap && canonicalMode && canonicalId
                               ? {
@@ -658,6 +686,12 @@ export function Editor() {
                           subBlockValues={subBlockState}
                           disabled={!canEditBlock}
                           allowExpandInPreview={false}
+                          isSearchHighlighted={
+                            activeSearchTarget?.blockId === currentBlockId &&
+                            (activeSearchTarget.subBlockId === subBlock.id ||
+                              activeSearchTarget.canonicalSubBlockId ===
+                                (subBlock.canonicalParamId ?? subBlock.id))
+                          }
                         />
                         {index < advancedOnlySubBlocks.length - 1 && (
                           <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>

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

@@ -474,7 +474,7 @@ export const Toolbar = memo(
      *
      * 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).
+     * to work after focus moves into the triggers/blocks list (e.g. when initiated via toolbar search shortcut).
      */
     const handleSearchBlur = () => {
       if (!searchQuery.trim()) {
@@ -581,8 +581,8 @@ export const Toolbar = memo(
      * - 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
+     * This is designed to work seamlessly when the toolbar search shortcut opens it,
+     * and to take precedence over other global ArrowUp/Down
      * handlers (e.g. terminal navigation) while the toolbar tab is active.
      */
     useEffect(() => {

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

@@ -4,7 +4,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
-import { History, Plus, Square } from 'lucide-react'
+import { History, Plus, Search, Square } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
@@ -86,6 +86,7 @@ import { useVariablesModalStore } from '@/stores/variables/modal'
 import { useVariablesStore } from '@/stores/variables/store'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { captureBaselineSnapshot } from '@/stores/workflow-diff/utils'
+import { useWorkflowSearchReplaceStore } from '@/stores/workflow-search-replace/store'
 import { getWorkflowWithValues } from '@/stores/workflows'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
@@ -598,12 +599,13 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
   const hasValidationErrors = false // TODO: Add validation logic if needed
   const isWorkflowBlocked = isExecuting || hasValidationErrors
   const isButtonDisabled = !isExecuting && (isWorkflowBlocked || (!canRun && !isLoadingPermissions))
+  const openWorkflowSearchReplace = useWorkflowSearchReplaceStore((state) => state.open)
 
   /**
    * Register global keyboard shortcuts using the central commands registry.
    *
    * - Mod+Enter: Run / cancel workflow (matches the Run button behavior)
-   * - Mod+F: Focus Toolbar tab and search input
+   * - Mod+Alt+F: Focus Toolbar tab and search input
    */
   useRegisterGlobalCommands(() =>
     createCommands([
@@ -666,6 +668,10 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                     <VariableIcon />
                     Variables
                   </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={openWorkflowSearchReplace}>
+                    <Search />
+                    Search and replace
+                  </DropdownMenuItem>
                   {userPermissions.canAdmin && !isSnapshotView && (
                     <DropdownMenuItem
                       onSelect={handleToggleWorkflowLock}