Simplify sublock values

Author: Theodore Li

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-subblock-layout.ts

@@ -23,29 +23,28 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 function useReactiveConditions(
   subBlocks: SubBlockConfig[],
   blockId: string,
-  activeWorkflowId: string | null,
-  blockSubBlockValues: Record<string, unknown>
+  activeWorkflowId: string | null
 ): Set<string> {
   const reactiveSubBlock = useMemo(
     () => subBlocks.find((sb) => sb.reactiveCondition),
     [subBlocks]
   )
   const reactiveCond = reactiveSubBlock?.reactiveCondition
 
-  // Subscribe to watched field values — always called (stable hook count)
+  // Subscribe to watched field values directly from the store (not via props,
+  // which would destabilize the selector on every parent render).
   const watchedCredentialId = useSubBlockStore(
     useCallback(
       (state) => {
         if (!reactiveCond || !activeWorkflowId) return ''
         const blockValues = state.workflowValues[activeWorkflowId]?.[blockId] ?? {}
-        const merged = { ...blockSubBlockValues, ...blockValues }
         for (const field of reactiveCond.watchFields) {
-          const val = merged[field]
+          const val = blockValues[field]
           if (val && typeof val === 'string') return val
         }
         return ''
       },
-      [reactiveCond, activeWorkflowId, blockId, blockSubBlockValues]
+      [reactiveCond, activeWorkflowId, blockId]
     )
   )
 
@@ -98,8 +97,7 @@ export function useEditorSubblockLayout(
   const hiddenByReactiveCondition = useReactiveConditions(
     config?.subBlocks || [],
     blockId,
-    activeWorkflowId,
-    blockSubBlockValues
+    activeWorkflowId
   )
 
   return useMemo(() => {

apps/sim/blocks/types.ts

@@ -357,16 +357,12 @@ export interface SubBlockConfig {
         }
       })
   /**
-   * Reactive visibility condition evaluated via hooks at the layout level.
+   * Credential-type visibility gate. The first non-empty string value from
+   * `watchFields` is treated as a credential ID and fetched via the credentials
+   * API. The subblock is hidden unless `credential.type` matches `requiredType`.
    *
-   * - `watchFields`: subblock IDs whose values to watch. The first non-empty string
-   *    value is used as a credential ID to look up via the workspace credentials API.
-   * - `requiredType`: the credential type that must match for the field to be visible
-   *    (e.g. `'service_account'`).
-   *
-   * The layout hook calls `useWorkspaceCredential` (always, for stable hook count)
-   * and filters the subblock out if the type doesn't match. The serializer skips
-   * this check — it always serializes the field if it has a value.
+   * Only one subblock per block may use this. The serializer ignores it —
+   * the field is always serialized when it has a value.
    */
   reactiveCondition?: {
     watchFields: string[]

apps/sim/tools/params.ts

@@ -990,8 +990,9 @@ export function getSubBlocksForToolInput(
       if (visibility === 'hidden' || visibility === 'llm-only') continue
 
       // Evaluate condition against current values.
-      // Skip sync condition check for subblocks with reactiveCondition — visibility
-      // is handled at render time by the SubBlock component.
+      // Subblocks with reactiveCondition are filtered at the UI layer via hooks
+      // (useReactiveConditions) — skipping here avoids evaluating a condition
+      // that has no sync field to check against.
       if (sb.condition && !sb.reactiveCondition) {
         const conditionMet = evaluateSubBlockCondition(
           sb.condition as SubBlockCondition,