refactor(connectors): resolve selected option labels with useQueries

Replaces the remembered-label map with per-id queries over the selected values,
following the pattern the knowledge-base selector already uses. The map only ever
held ids searched for in the current session, so a multi-select field restored
from saved config still rendered raw ids — the case that actually matters. It
also needed two effects and a serialized-context key to avoid leaking labels
across a context change, all of which disappear: queries key on the context, so a
label cannot outlive it.

Gates the speculative lookup of typed text on a new `resolvesUnknownIds` flag,
set only where `fetchById` returns null for an id that does not exist. Most
implementations resolve a record by id, so every partial keystroke was a failed
upstream request, retried once, and its error made "could not check that exact
value" the normal empty state on those selectors.

Also: pass handlers straight to the combobox rather than through identity
wrappers that defeated its memo, move the latest-callback ref write into an
effect, rename the raw search setter so the deduping write path cannot be
bypassed, and correct the prop and staleTime docs.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field/connector-selector-field.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { ChipCombobox, type ComboboxOption, Loader } from '@sim/emcn'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
 import { SELECTOR_CONTEXT_FIELDS } from '@/lib/workflows/subblocks/context'
@@ -10,8 +10,13 @@ import type {
 } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
 import { getDependsOnFields } from '@/blocks/utils'
 import type { ConnectorConfigField } from '@/connectors/types'
-import type { SelectorContext, SelectorKey, SelectorOption } from '@/hooks/selectors/types'
-import { useSelectorOptionDetail, useSelectorOptions } from '@/hooks/selectors/use-selector-query'
+import { getSelectorDefinition } from '@/hooks/selectors/registry'
+import type { SelectorContext, SelectorKey } from '@/hooks/selectors/types'
+import {
+  useSelectorOptionDetail,
+  useSelectorOptionDetails,
+  useSelectorOptions,
+} from '@/hooks/selectors/use-selector-query'
 import { useDebounce } from '@/hooks/use-debounce'
 
 interface ConnectorSelectorFieldProps {
@@ -78,83 +83,55 @@ export function ConnectorSelectorField({
   })
 
   /**
-   * The option list fills by draining pages in the background and the combobox
-   * filters it client-side, so an option is only findable once its page has
-   * arrived. Resolving the typed value directly makes an exact id/key selectable
-   * immediately, independent of drain progress. Debounced so typing does not
-   * issue a request per keystroke; selectors without a `fetchById` resolve nothing.
+   * Label every selected value, including values restored from saved config that no
+   * in-session search would have resolved. Queries are keyed on `context`, so a label
+   * can never outlive the context that produced it, and they share keys with the
+   * speculative lookup below so an already-resolved id costs no extra request.
    */
-  const debouncedSearch = useDebounce(searchTerm.trim(), SEARCH_DEBOUNCE_MS)
-  const { data: searchedOption, error: searchError } = useSelectorOptionDetail(field.selectorKey, {
+  const singleValue = Array.isArray(value) ? value[0] : value
+  const selectedIds = useMemo(
+    () => (Array.isArray(value) ? value : value ? [value] : []).filter(Boolean),
+    [value]
+  )
+  const selectedOptions = useSelectorOptionDetails(field.selectorKey, {
     context,
-    detailId: isEnabled && debouncedSearch.length > 0 ? debouncedSearch : undefined,
+    detailIds: isEnabled ? selectedIds : [],
   })
 
   /**
-   * Resolve the *selected* value too, not just the typed one, so the trigger does
-   * not fall back to a raw id for something just picked. Single-select only:
-   * resolving N ids would need N hooks, so multi-select relies on the remembered
-   * options below.
+   * The option list fills by draining pages in the background and the combobox filters
+   * it client-side, so an option is only findable once its page has arrived. Where the
+   * selector's `fetchById` tolerates an unknown id, whatever the user typed is resolved
+   * directly so an exact key is selectable immediately. Gated on that flag because most
+   * implementations resolve a record by id, where a partial keystroke is a guaranteed
+   * failed upstream request rather than an empty result.
    */
-  const singleValue = Array.isArray(value) ? value[0] : value
-  const { data: selectedOption } = useSelectorOptionDetail(field.selectorKey, {
+  const resolvesUnknownIds = Boolean(getSelectorDefinition(field.selectorKey).resolvesUnknownIds)
+  const debouncedSearch = useDebounce(searchTerm.trim(), SEARCH_DEBOUNCE_MS)
+  const { data: searchedOption } = useSelectorOptionDetail(field.selectorKey, {
     context,
-    detailId: !isMulti && isEnabled && singleValue ? singleValue : undefined,
+    detailId:
+      resolvesUnknownIds && isEnabled && debouncedSearch.length > 0 ? debouncedSearch : undefined,
   })
 
   const emptyMessage = getEmptyMessage(field.title.toLowerCase(), {
     error,
-    lookupFailed: Boolean(searchError),
     hasMore,
     isFetchingMore,
     truncated,
   })
 
-  /**
-   * Resolved options are remembered for the lifetime of the field. Both lookups are
-   * keyed on values that change — the search box clears on select and close, and a
-   * multi-select field resolves no id at all (that would need one hook per id) — so
-   * reading them directly would drop a label moments after it appeared, leaving the
-   * trigger showing a raw id for something the user just picked.
-   */
-  const [resolvedOptions, setResolvedOptions] = useState<Record<string, string>>({})
-  /**
-   * Ids are only meaningful within one selector context, so switching credential,
-   * domain, or a dependency must drop what was resolved under the old one — the
-   * queries re-key, but remembered labels would otherwise linger and mislabel.
-   * Keyed on the serialized context rather than its identity: the memo also depends
-   * on `sourceConfig`, so its identity changes on unrelated field edits.
-   */
-  const contextKey = useMemo(() => JSON.stringify(context), [context])
-  useEffect(() => {
-    setResolvedOptions((prev) => (Object.keys(prev).length > 0 ? {} : prev))
-  }, [contextKey])
-
-  useEffect(() => {
-    const found = [searchedOption, selectedOption].filter(Boolean) as SelectorOption[]
-    if (found.length === 0) return
-    setResolvedOptions((prev) => {
-      let next = prev
-      for (const option of found) {
-        if (next[option.id] === option.label) continue
-        if (next === prev) next = { ...prev }
-        next[option.id] = option.label
-      }
-      return next
-    })
-  }, [searchedOption, selectedOption])
-
   const comboboxOptions = useMemo<ComboboxOption[]>(() => {
     const base = options.map((opt) => ({ label: opt.label, value: opt.id }))
     const seen = new Set(base.map((opt) => opt.value))
     const extras: ComboboxOption[] = []
-    for (const [id, label] of Object.entries(resolvedOptions)) {
-      if (seen.has(id)) continue
-      seen.add(id)
-      extras.push({ label, value: id })
+    for (const option of searchedOption ? [...selectedOptions, searchedOption] : selectedOptions) {
+      if (seen.has(option.id)) continue
+      seen.add(option.id)
+      extras.push({ label: option.label, value: option.id })
     }
     return extras.length > 0 ? [...extras, ...base] : base
-  }, [options, resolvedOptions])
+  }, [options, selectedOptions, searchedOption])
 
   if (isLoading && isEnabled) {
     return (
@@ -172,7 +149,7 @@ export function ConnectorSelectorField({
         multiSelect
         options={comboboxOptions}
         multiSelectValues={multiValues}
-        onMultiSelectChange={(values) => onChange(values)}
+        onMultiSelectChange={onChange}
         searchable
         onSearchChange={setSearchTerm}
         searchPlaceholder={`Search ${field.title.toLowerCase()}...`}
@@ -193,7 +170,7 @@ export function ConnectorSelectorField({
     <ChipCombobox
       options={comboboxOptions}
       value={singleValue || undefined}
-      onChange={(next) => onChange(next)}
+      onChange={onChange}
       searchable
       onSearchChange={setSearchTerm}
       searchPlaceholder={`Search ${field.title.toLowerCase()}...`}
@@ -222,19 +199,16 @@ function getEmptyMessage(
   noun: string,
   state: {
     error: Error | null
-    lookupFailed: boolean
     hasMore: boolean
     isFetchingMore: boolean
     truncated: boolean
   }
 ): string {
-  // `field.title` is singular on some connectors ("Base") and plural on others
-  // ("Spaces"), so only the settled message puts the noun behind a quantifier.
   if (state.error) return 'No match — the list failed to load. Try reopening'
-  // Distinct from the list failing: the list is fine, resolving the typed value is not.
-  if (state.lookupFailed) return 'No match — could not check that exact value'
   if (state.hasMore || state.isFetchingMore) return 'No match yet — still loading…'
   if (state.truncated) return 'No match — too many to list. Try a more exact term'
+  // `noun` is singular on some connectors ("Base") and plural on others ("Spaces"),
+  // so only this settled message puts it behind a quantifier.
   return `No ${noun} found`
 }
 

apps/sim/hooks/selectors/providers/confluence/selectors.ts

@@ -49,11 +49,12 @@ export const confluenceSelectors = {
         nextCursor: data.nextCursor,
       }
     },
+    /** The server filters by key and returns nothing for a key that does not exist. */
+    resolvesUnknownIds: true,
     /**
-     * Resolves a single space by key in one request via the server's exact-key
-     * lookup. Previously this fetched the first page and scanned it, so a space
-     * that sorts beyond page 1 never resolved — on a large site that is most of
-     * them. Keyed resolution is independent of how far the page drain has run.
+     * Resolves a single space by key via the server's exact-key lookup, independent
+     * of how far the page drain has run — a space sorting beyond page 1 would
+     * otherwise never resolve, which on a large site is most of them.
      */
     fetchById: async ({ context, detailId, signal }: SelectorQueryArgs) => {
       if (!detailId) return null

apps/sim/hooks/selectors/types.ts

@@ -136,6 +136,13 @@ export interface SelectorDefinition {
    */
   fetchPage?: (args: SelectorPageArgs) => Promise<SelectorPage>
   fetchById?: (args: SelectorQueryArgs) => Promise<SelectorOption | null>
+  /**
+   * Set when `fetchById` tolerates an id that may not exist, returning `null` rather
+   * than erroring. Only then is it safe to speculatively resolve whatever a user has
+   * typed — most implementations resolve a record by id and would turn every partial
+   * keystroke into a failed upstream request.
+   */
+  resolvesUnknownIds?: boolean
   enabled?: (args: SelectorQueryArgs) => boolean
   staleTime?: number
 }

apps/sim/hooks/selectors/use-selector-query.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react'
 import { createLogger } from '@sim/logger'
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { useInfiniteQuery, useQueries, useQuery } from '@tanstack/react-query'
 import { extractEnvVarName, isEnvVarReference, isReference } from '@/executor/constants'
 import { usePersonalEnvironment } from '@/hooks/queries/environment'
 import { getSelectorDefinition, mergeOption } from '@/hooks/selectors/registry'
@@ -55,8 +55,8 @@ const MAX_AUTO_DRAIN_PAGES = 50
 export const DEFAULT_SELECTOR_STALE_TIME = 30_000
 
 /**
- * Single-option resolutions are keyed by an exact id, so they change far less
- * often than a list and can stay fresh longer.
+ * Fallback for a single-option resolution when the definition declares no
+ * `staleTime`: keyed by an exact id, so it changes far less often than a list.
  */
 export const DEFAULT_SELECTOR_DETAIL_STALE_TIME = 300_000
 
@@ -192,9 +192,8 @@ export function useSelectorOptionDetail(
    * Callers that pass nothing keep the list predicate as their default.
    */
   const enabled =
-    args.enabled !== undefined
-      ? args.enabled && canResolveDetail
-      : canResolveDetail && (definition.enabled ? definition.enabled(queryArgs) : true)
+    (args.enabled ?? (definition.enabled ? definition.enabled(queryArgs) : true)) &&
+    canResolveDetail
 
   const query = useQuery<SelectorOption | null>({
     queryKey: [...definition.getQueryKey(queryArgs), 'detail', resolvedDetailId ?? 'none'],
@@ -206,6 +205,53 @@ export function useSelectorOptionDetail(
   return query
 }
 
+/**
+ * Resolves several ids at once, so a multi-select field can label every selected
+ * value — including values restored from saved config, which no in-session search
+ * would have resolved. Query keys match {@link useSelectorOptionDetail} exactly, so
+ * the two share a cache and an id already resolved by search costs no extra request.
+ */
+export function useSelectorOptionDetails(
+  key: SelectorKey,
+  args: Omit<SelectorHookArgs, 'detailId'> & { detailIds: string[] }
+): SelectorOption[] {
+  const { data: envVariables = {} } = usePersonalEnvironment()
+  const definition = getSelectorDefinition(key)
+
+  const resolvedIds = useMemo(() => {
+    const out: string[] = []
+    for (const id of args.detailIds) {
+      if (!id || isReference(id)) continue
+      if (isEnvVarReference(id)) {
+        const value = envVariables[extractEnvVarName(id)]?.value
+        if (value) out.push(value)
+        continue
+      }
+      out.push(id)
+    }
+    return Array.from(new Set(out))
+  }, [args.detailIds, envVariables])
+
+  const results = useQueries({
+    queries: resolvedIds.map((detailId) => {
+      const queryArgs: SelectorQueryArgs = { key, context: args.context, detailId }
+      const canResolveDetail = definition.fetchById !== undefined
+      return {
+        queryKey: [...definition.getQueryKey(queryArgs), 'detail', detailId],
+        queryFn: ({ signal }: { signal: AbortSignal }) =>
+          definition.fetchById!({ ...queryArgs, signal }),
+        enabled:
+          args.enabled !== undefined
+            ? args.enabled && canResolveDetail
+            : canResolveDetail && (definition.enabled ? definition.enabled(queryArgs) : true),
+        staleTime: definition.staleTime ?? DEFAULT_SELECTOR_DETAIL_STALE_TIME,
+      }
+    }),
+  })
+
+  return useMemo(() => results.flatMap((result) => (result.data ? [result.data] : [])), [results])
+}
+
 export function useSelectorOptionMap(options: SelectorOption[], extra?: SelectorOption | null) {
   return useMemo(() => {
     const merged = mergeOption(options, extra)

apps/sim/lib/api/contracts/selectors/confluence.ts

@@ -371,7 +371,11 @@ export const confluenceSpacesSelectorBodySchema = credentialWorkflowDomainBodySc
    * `/spaces` supports a `keys` filter, so a known key resolves in one request
    * instead of depending on how far the background page drain has progressed.
    */
-  spaceKey: z.string().min(1).max(255).optional(),
+  spaceKey: z
+    .string()
+    .min(1, 'spaceKey cannot be empty')
+    .max(255, 'spaceKey must be 255 characters or fewer')
+    .optional(),
 })
 
 export const confluenceSpacesSelectorContract = definePostSelector(

packages/emcn/src/components/combobox/combobox.tsx

@@ -119,9 +119,10 @@ export interface ComboboxProps
   /** Enable search input in dropdown (useful for multiselect) */
   searchable?: boolean
   /**
-   * Notified when the dropdown's search box changes, and with `''` whenever the
-   * query is reset (select, close, blur, Escape, ArrowLeft) — including when
-   * `searchable` is false, since those resets are unconditional.
+   * Notified when the dropdown's search box changes value, including the `''` a
+   * select, close, Escape, or ArrowLeft resets it to. Deduped, so an already-empty
+   * query resetting again is silent and a consumer sees nothing while `searchable`
+   * is false.
    *
    * This is the `searchable` search box only. In `editable` mode the typed text
    * arrives via `onChange`, not here.
@@ -197,25 +198,27 @@ const Combobox = memo(
       const listboxId = useId()
       const [open, setOpen] = useState(false)
       const [highlightedIndex, setHighlightedIndex] = useState(-1)
-      const [searchQuery, setSearchQuery] = useState('')
+      const [searchQuery, setSearchQueryState] = useState('')
       /**
        * Read through a ref so `updateSearchQuery` keeps a stable identity —
        * `handleSelect`, `handleBlur`, and `handleKeyDown` all capture it without
        * listing it as a dependency.
        */
       const onSearchChangeRef = useRef(onSearchChange)
-      onSearchChangeRef.current = onSearchChange
+      useEffect(() => {
+        onSearchChangeRef.current = onSearchChange
+      }, [onSearchChange])
       /**
        * Single write path for the search box so `onSearchChange` cannot be missed on a
        * reset. Deduped because several paths reset redundantly — Escape both handles the
        * key and lets the popover dismiss, and an editable select blurs after selecting —
-       * which `setSearchQuery` absorbed silently but a consumer callback would not.
+       * which the raw setState absorbed silently but a consumer callback would not.
        */
       const searchQueryRef = useRef('')
       const updateSearchQuery = useCallback((next: string) => {
         if (searchQueryRef.current === next) return
         searchQueryRef.current = next
-        setSearchQuery(next)
+        setSearchQueryState(next)
         onSearchChangeRef.current?.(next)
       }, [])
       const searchInputRef = useRef<HTMLInputElement>(null)