refactor(sub-blocks): make a registered selector the single source for a remote option list

`dropdown` and `combobox` could only load a remote list through a per-block
`fetchOptions(blockId)`, which resolves its credential by reading the live
workflow store. That works on the canvas and nowhere else — which is why the
fork sync modal cannot offer those fields, and why every one of those fetchers
turned out to be a hand-rolled duplicate of a selector that already exists
(`triggers/gmail/poller.ts` calls the very contract `gmail.labels` wraps).

Both controls now accept `selectorKey`, resolved through the registry inside
`useFetchedOptions`. Deliberately NOT a second code path: the registry is
presented through the same two function shapes the props already describe, so
the existing lifecycle — request-id guards, dependency-scope reset, label
hydration — is reused verbatim, and paginated selectors drain through the same
`loadAllSelectorOptions` that search/replace and value resolution already use.

`isDynamic` replaces the `fetchOptions &&` test the controls used to decide
whether the fetched list or the static `options` array is authoritative; that
question outlives the prop it was asking about.

No block or trigger changes yet, so nothing moves off `fetchOptions` in this
commit: subblock `type`, `multiSelect`, and the stored value shape are all
untouched and no existing workflow is affected.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: Vikhyath Mondreti

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

@@ -14,6 +14,7 @@ import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/c
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import type { SubBlockConfig } from '@/blocks/types'
+import type { SelectorKey } from '@/hooks/selectors/types'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 
@@ -68,6 +69,8 @@ interface ComboBoxProps {
   placeholder?: string
   /** Configuration for the sub-block */
   config: SubBlockConfig
+  /** Registered selector supplying the options. The canonical source for a remote list. */
+  selectorKey?: SelectorKey
   /** Async function to fetch options dynamically */
   fetchOptions?: (blockId: string) => Promise<Array<{ label: string; id: string }>>
   /** Async function to fetch a single option's label by ID (for hydration) */
@@ -90,6 +93,7 @@ export const ComboBox = memo(function ComboBox({
   disabled,
   placeholder = 'Type or select an option...',
   config,
+  selectorKey,
   fetchOptions,
   fetchOptionById,
   dependsOn,
@@ -126,10 +130,12 @@ export const ComboBox = memo(function ComboBox({
     fetchError,
     hydratedOption,
     missingOptionId,
+    isDynamic,
     refetch: refetchOptions,
   } = useFetchedOptions({
     blockId,
     dependsOnFields,
+    selectorKey,
     fetchOptions,
     fetchOptionById,
     isPreview: Boolean(isPreview),
@@ -194,7 +200,7 @@ export const ComboBox = memo(function ComboBox({
   // Merge static and fetched options - fetched options take priority when available
   const evaluatedOptions = useMemo((): ComboBoxOption[] => {
     let opts: ComboBoxOption[] =
-      fetchOptions && normalizedFetchedOptions.length > 0 ? normalizedFetchedOptions : staticOptions
+      isDynamic && normalizedFetchedOptions.length > 0 ? normalizedFetchedOptions : staticOptions
 
     if (subBlockId === 'model' && fetchOptions && normalizedFetchedOptions.length > 0) {
       opts = opts.filter((opt) => isModelUsable(typeof opt === 'string' ? opt : opt.id))

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

@@ -15,6 +15,7 @@ import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflow
 import { getBlock } from '@/blocks/registry'
 import type { SubBlockConfig } from '@/blocks/types'
 import { ResponseBlockHandler } from '@/executor/handlers/response/response-handler'
+import type { SelectorKey } from '@/hooks/selectors/types'
 import { useOperationAccess } from '@/hooks/use-operation-access'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
@@ -59,6 +60,8 @@ interface DropdownProps {
   placeholder?: string
   /** Enable multi-select mode */
   multiSelect?: boolean
+  /** Registered selector supplying the options. The canonical source for a remote list. */
+  selectorKey?: SelectorKey
   /** Async function to fetch options dynamically */
   fetchOptions?: (blockId: string) => Promise<Array<{ label: string; id: string }>>
   /** Async function to fetch a single option's label by ID (for hydration) */
@@ -94,6 +97,7 @@ export const Dropdown = memo(function Dropdown({
   disabled,
   placeholder = 'Select an option...',
   multiSelect = false,
+  selectorKey,
   fetchOptions,
   fetchOptionById,
   dependsOn,
@@ -145,10 +149,12 @@ export const Dropdown = memo(function Dropdown({
     isLoadingOptions,
     fetchError,
     hydratedOption,
+    isDynamic,
     refetch: refetchOptions,
   } = useFetchedOptions({
     blockId,
     dependsOnFields,
+    selectorKey,
     fetchOptions,
     fetchOptionById,
     isPreview: Boolean(isPreview),
@@ -175,9 +181,7 @@ export const Dropdown = memo(function Dropdown({
 
   const allOptions = useMemo(() => {
     let opts: DropdownOption[] =
-      fetchOptions && normalizedFetchedOptions.length > 0
-        ? normalizedFetchedOptions
-        : evaluatedOptions
+      isDynamic && normalizedFetchedOptions.length > 0 ? normalizedFetchedOptions : evaluatedOptions
 
     if (hydratedOption) {
       const alreadyPresent = opts.some((o) =>
@@ -189,7 +193,7 @@ export const Dropdown = memo(function Dropdown({
     }
 
     return opts
-  }, [fetchOptions, normalizedFetchedOptions, evaluatedOptions, hydratedOption])
+  }, [isDynamic, normalizedFetchedOptions, evaluatedOptions, hydratedOption])
 
   /**
    * Operation IDs whose resolved tool is denied by the caller's permission

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-fetched-options.ts

@@ -2,8 +2,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { getErrorMessage } from '@sim/utils/errors'
 import { isEqual } from 'es-toolkit'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
+import { buildSelectorContextFromBlock } from '@/lib/workflows/subblocks/context'
 import { buildCanonicalIndex, resolveDependencyValue } from '@/lib/workflows/subblocks/visibility'
 import { getBlock } from '@/blocks/registry'
+import { getSelectorDefinition, loadAllSelectorOptions } from '@/hooks/selectors/registry'
+import type { SelectorKey } from '@/hooks/selectors/types'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
@@ -20,6 +23,16 @@ interface UseFetchedOptionsProps {
   blockId: string
   /** Sibling subblock ids this list is scoped by; a change refetches. */
   dependsOnFields: string[]
+  /**
+   * The registered selector supplying this control's options.
+   *
+   * This is the ONLY way a sub-block loads a remote list. A selector is parameterized by an
+   * explicit {@link SelectorContext} built from the block's own values, so the same definition
+   * serves the canvas, the fork sync modal, and any future surface. The alternative that used
+   * to live here — a per-block `fetchOptions(blockId)` reading the live store — could only ever
+   * work on the canvas, and was in every case a duplicate of a selector that already existed.
+   */
+  selectorKey?: SelectorKey
   fetchOptions?: (blockId: string) => Promise<FetchedOption[]>
   fetchOptionById?: (blockId: string, optionId: string) => Promise<FetchedOption | null>
   isPreview: boolean
@@ -35,6 +48,13 @@ interface UseFetchedOptionsProps {
 
 export interface UseFetchedOptionsResult {
   fetchedOptions: FetchedOption[]
+  /**
+   * Whether this control loads its options remotely at all. Controls use it to decide whether
+   * `fetchedOptions` or the static `options` array is authoritative — a question they used to
+   * answer by testing the `fetchOptions` prop, which stops being true once the source is a
+   * `selectorKey` instead.
+   */
+  isDynamic: boolean
   isLoadingOptions: boolean
   fetchError: string | null
   hydratedOption: FetchedOption | null
@@ -61,8 +81,9 @@ function hasLocalOption(options: readonly LocalOption[], id: string): boolean {
 export function useFetchedOptions({
   blockId,
   dependsOnFields,
-  fetchOptions,
-  fetchOptionById,
+  selectorKey,
+  fetchOptions: fetchOptionsProp,
+  fetchOptionById: fetchOptionByIdProp,
   isPreview,
   disabled,
   valueToHydrate,
@@ -94,6 +115,69 @@ export function useFetchedOptions({
     isEqual
   )
 
+  /**
+   * The block's live sub-block values merged over its persisted ones — the shape
+   * `buildSelectorContextFromBlock` reads. Resolved at call time rather than memoized so a
+   * selector always fetches against what the user has actually chosen, not a stale snapshot.
+   */
+  const readSelectorContext = useCallback(() => {
+    const block = useWorkflowStore.getState().blocks[blockId]
+    if (!block?.type) return null
+    const live = activeWorkflowId
+      ? (useSubBlockStore.getState().workflowValues[activeWorkflowId]?.[blockId] ?? {})
+      : {}
+    const merged: Record<string, { value?: unknown }> = { ...(block.subBlocks ?? {}) }
+    for (const [id, value] of Object.entries(live)) merged[id] = { ...merged[id], value }
+    return buildSelectorContextFromBlock(block.type, merged, {
+      workflowId: activeWorkflowId ?? undefined,
+      workspaceId: workspaceId ?? undefined,
+      canonicalModes: block.data?.canonicalModes,
+    })
+  }, [blockId, activeWorkflowId, workspaceId])
+
+  const selectorDefinition = selectorKey ? getSelectorDefinition(selectorKey) : undefined
+
+  /**
+   * A selector-backed control reuses this hook's whole lifecycle by presenting the registry
+   * through the same two function shapes the props already describe — so there is one fetch
+   * path, not a second system running alongside it.
+   *
+   * Memoized on `dependencyValues` so a changed parent (a newly picked credential) yields a
+   * new identity and the scope reset below refetches, exactly as it does for a prop fetcher.
+   */
+  const fetchOptions = useMemo(() => {
+    if (fetchOptionsProp) return fetchOptionsProp
+    if (!selectorDefinition) return undefined
+    const definition = selectorDefinition
+    return async (): Promise<FetchedOption[]> => {
+      const context = readSelectorContext()
+      if (!context) return []
+      const args = { key: definition.key, context }
+      // The selector's own readiness gate: an unset credential yields an empty list rather
+      // than an error, which is how every other selector-backed control already behaves.
+      if (definition.enabled && !definition.enabled(args)) return []
+      // Shared with search/replace and value resolution, so a paginated selector drains the
+      // same bounded way here as everywhere else instead of silently showing one page.
+      const options = await loadAllSelectorOptions(definition, args)
+      return options.map((option) => ({ id: option.id, label: option.label }))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- dependencyValues is the refetch scope
+  }, [fetchOptionsProp, selectorDefinition, readSelectorContext, dependencyValues])
+
+  /** Label hydration for a stored id, from the same definition. */
+  const fetchOptionById = useMemo(() => {
+    if (fetchOptionByIdProp) return fetchOptionByIdProp
+    const definition = selectorDefinition
+    const fetchById = definition?.fetchById
+    if (!definition || !fetchById) return undefined
+    return async (_blockId: string, optionId: string, signal?: AbortSignal) => {
+      const context = readSelectorContext()
+      if (!context) return null
+      const option = await fetchById({ key: definition.key, context, detailId: optionId, signal })
+      return option ? { id: option.id, label: option.label } : null
+    }
+  }, [fetchOptionByIdProp, selectorDefinition, readSelectorContext])
+
   const [fetchedOptions, setFetchedOptions] = useState<FetchedOption[]>([])
   const [isLoadingOptions, setIsLoadingOptions] = useState(false)
   const [fetchError, setFetchError] = useState<string | null>(null)
@@ -229,6 +313,7 @@ export function useFetchedOptions({
 
   return {
     fetchedOptions,
+    isDynamic: Boolean(fetchOptions),
     isLoadingOptions,
     fetchError,
     hydratedOption,

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

@@ -680,6 +680,7 @@ function SubBlockComponent({
               previewValue={previewValue}
               disabled={isDisabled}
               multiSelect={config.multiSelect}
+              selectorKey={config.selectorKey}
               fetchOptions={config.fetchOptions}
               fetchOptionById={config.fetchOptionById}
               dependsOn={config.dependsOn}
@@ -715,6 +716,7 @@ function SubBlockComponent({
               previewValue={previewValue as any}
               disabled={isDisabled}
               config={config}
+              selectorKey={config.selectorKey}
               fetchOptions={config.fetchOptions}
               fetchOptionById={config.fetchOptionById}
               dependsOn={config.dependsOn}