feat(connectors): resolve selector options by exact key without waiting on the drain

The connector selector fills by draining pages in the background and filters
client-side, so an option is only findable once its page has arrived. On a large
Confluence site that is ~38 seconds, during which searching for a real space
returned nothing.

Resolves the typed value and the selected value directly through the selector's
`fetchById`, merging both into the option list, so an exact key is selectable
immediately regardless of drain progress. `confluence.spaces.fetchById` now uses
the documented v2 `keys` filter instead of scanning only the first page — which
never resolved a space sorting beyond it.

Adds `onSearchChange` to the shared Combobox so a consumer can observe the search
box, held in a ref so its identity stays stable for the handlers that capture it
without declaring it.

Also fixes a pre-existing hazard in useSelectorOptionDetail: a caller-supplied
`enabled` replaced the guard that checks a definition declares `fetchById`, so
`queryFn`'s non-null assertion would throw for the ~12 selectors without one.

Author: waleedlatif1

apps/sim/app/api/tools/confluence/selector-spaces/route.ts

@@ -45,7 +45,7 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
     const parsed = await parseRequest(confluenceSpacesSelectorContract, request, {})
     if (!parsed.success) return parsed.response
 
-    const { credential, workflowId, domain, cursor } = parsed.data.body
+    const { credential, workflowId, domain, cursor, spaceKey } = parsed.data.body
 
     if (!credential) {
       logger.error('Missing credential in request')
@@ -101,8 +101,17 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
     const baseUrl = `https://api.atlassian.com/ex/confluence/${cloudIdValidation.sanitized}/wiki/api/v2/spaces`
     const { status, inner } = parseCursor(cursor)
 
-    const params = new URLSearchParams({ limit: String(PAGE_LIMIT), status })
-    if (inner) params.set('cursor', inner)
+    /**
+     * Exact-key lookup: one request, no pagination. The dropdown drains pages in
+     * the background and filters client-side, so a space only becomes findable
+     * once its page has arrived — on a large site that is tens of seconds away.
+     * Resolving a known key directly makes it available immediately. `status` is
+     * left unset so the key matches whether the space is current or archived.
+     */
+    const params = spaceKey
+      ? new URLSearchParams({ keys: spaceKey, limit: String(PAGE_LIMIT) })
+      : new URLSearchParams({ limit: String(PAGE_LIMIT), status })
+    if (inner && !spaceKey) params.set('cursor', inner)
     const url = `${baseUrl}?${params.toString()}`
 
     const response = await fetch(url, {
@@ -118,12 +127,15 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
     }
 
     const data = await response.json()
-    const spaces = (data.results || []).map((space: { id: string; name: string; key: string }) => ({
-      id: space.id,
-      name: space.name,
-      key: space.key,
-      status,
-    }))
+    const spaces = (data.results || []).map(
+      (space: { id: string; name: string; key: string; status?: SpaceStatus }) => ({
+        id: space.id,
+        name: space.name,
+        key: space.key,
+        // An exact-key lookup is not scoped to one status, so trust the row's own.
+        status: space.status ?? status,
+      })
+    )
 
     let nextInner: string | undefined
     const nextLink = data._links?.next as string | undefined
@@ -135,8 +147,11 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
       }
     }
 
+    // An exact-key lookup is a single resolution, never a page in a drained stream.
     let nextCursor: string | undefined
-    if (nextInner) {
+    if (spaceKey) {
+      nextCursor = undefined
+    } else if (nextInner) {
       nextCursor = `${status}:${nextInner}`
     } else if (status === 'current') {
       nextCursor = 'archived:'

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

@@ -1,7 +1,8 @@
 'use client'
 
-import { useMemo } 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'
 import type {
   ConfigFieldMap,
@@ -10,7 +11,8 @@ import type {
 import { getDependsOnFields } from '@/blocks/utils'
 import type { ConnectorConfigField } from '@/connectors/types'
 import type { SelectorContext, SelectorKey } from '@/hooks/selectors/types'
-import { useSelectorOptions } from '@/hooks/selectors/use-selector-query'
+import { useSelectorOptionDetail, useSelectorOptions } from '@/hooks/selectors/use-selector-query'
+import { useDebounce } from '@/hooks/use-debounce'
 
 interface ConnectorSelectorFieldProps {
   field: ConnectorConfigField & { selectorKey: SelectorKey }
@@ -34,6 +36,7 @@ export function ConnectorSelectorField({
   disabled,
 }: ConnectorSelectorFieldProps) {
   const isMulti = Boolean(field.multi)
+  const [searchTerm, setSearchTerm] = useState('')
 
   const context = useMemo<SelectorContext>(() => {
     const ctx: SelectorContext = {}
@@ -74,33 +77,54 @@ export function ConnectorSelectorField({
     enabled: isEnabled,
   })
 
+  const emptyMessage = getEmptyMessage(field.title.toLowerCase(), {
+    error,
+    hasMore,
+    isFetchingMore,
+    truncated,
+  })
+
   /**
-   * Shown when the combobox has nothing to display. `isLoading` renders a spinner
-   * instead until the first page lands, so by the time this is visible the list has
-   * loaded at least once and is empty because the user's search matched none of the
-   * options loaded *so far* — the wording is phrased for that case.
-   *
-   * Paginated selectors drain in the background and filter client-side, so an
-   * option that has not drained yet is genuinely absent. A flat "none found" reads
-   * as "it does not exist" and sends users off to enter the value by hand, which is
-   * exactly what happened with a Confluence space on a site whose drain runs for
-   * ~38s. Each branch instead explains why the list may still be incomplete.
-   *
-   * `error` is checked first: the drain halts on a failed page but leaves `hasMore`
-   * set, so a failure would otherwise claim to be loading forever.
+   * 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` simply
+   * resolve nothing.
    */
-  const emptyMessage = useMemo(() => {
-    const noun = field.title.toLowerCase()
-    if (error) return `No match — could not load all ${noun}. Enter the value directly`
-    if (hasMore || isFetchingMore) return `No match yet — still loading ${noun}…`
-    if (truncated) return `No match in the ${noun} loaded — enter the value directly`
-    return `No ${noun} found`
-  }, [field.title, error, hasMore, isFetchingMore, truncated])
-
-  const comboboxOptions = useMemo<ComboboxOption[]>(
-    () => options.map((opt) => ({ label: opt.label, value: opt.id })),
-    [options]
-  )
+  const debouncedSearch = useDebounce(searchTerm.trim(), SEARCH_DEBOUNCE_MS)
+  const { data: searchedOption } = useSelectorOptionDetail(field.selectorKey, {
+    context,
+    detailId: isEnabled && debouncedSearch.length > 0 ? debouncedSearch : undefined,
+  })
+
+  /**
+   * Resolve the *selected* value too, not just the typed one. Selecting resets the
+   * search box, which drops `searchedOption` a debounce later, and the drain may
+   * not reach that option's page for tens of seconds — never, when truncated — so
+   * the trigger would fall back to the placeholder for a value just picked.
+   * Mirrors `SelectorCombobox` in the workflow editor. Multi-select is not covered:
+   * resolving N ids needs N hooks, so a multi value beyond the drain still renders
+   * as its raw id.
+   */
+  const singleValue = Array.isArray(value) ? value[0] : value
+  const { data: selectedOption } = useSelectorOptionDetail(field.selectorKey, {
+    context,
+    detailId: !isMulti && isEnabled && singleValue ? singleValue : undefined,
+  })
+
+  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 extra of [searchedOption, selectedOption]) {
+      if (extra && !seen.has(extra.id)) {
+        seen.add(extra.id)
+        extras.push({ label: extra.label, value: extra.id })
+      }
+    }
+    return extras.length > 0 ? [...extras, ...base] : base
+  }, [options, searchedOption, selectedOption])
 
   if (isLoading && isEnabled) {
     return (
@@ -120,6 +144,7 @@ export function ConnectorSelectorField({
         multiSelectValues={multiValues}
         onMultiSelectChange={(values) => onChange(values)}
         searchable
+        onSearchChange={setSearchTerm}
         searchPlaceholder={`Search ${field.title.toLowerCase()}...`}
         placeholder={
           !credentialId
@@ -134,13 +159,13 @@ export function ConnectorSelectorField({
     )
   }
 
-  const singleValue = Array.isArray(value) ? value[0] : value
   return (
     <ChipCombobox
       options={comboboxOptions}
       value={singleValue || undefined}
       onChange={(next) => onChange(next)}
       searchable
+      onSearchChange={setSearchTerm}
       searchPlaceholder={`Search ${field.title.toLowerCase()}...`}
       placeholder={
         !credentialId
@@ -155,6 +180,26 @@ export function ConnectorSelectorField({
   )
 }
 
+/**
+ * Only visible once the first page has landed (`isLoading` renders a spinner
+ * before that), so "no match" here means no match among the options drained
+ * *so far* — a flat "none found" would wrongly read as "does not exist".
+ *
+ * `error` is checked before `hasMore`: a failed page halts the drain but leaves
+ * `hasMore` set, which would otherwise claim to be loading forever.
+ */
+function getEmptyMessage(
+  noun: string,
+  state: { error: Error | null; 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 is incomplete. Enter the value directly'
+  if (state.hasMore || state.isFetchingMore) return 'No match yet — still loading…'
+  if (state.truncated) return 'No match in what loaded — enter the value directly'
+  return `No ${noun} found`
+}
+
 function resolveDepValue(
   depFieldId: string,
   configFields: ConnectorConfigField[],

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

@@ -50,10 +50,10 @@ export const confluenceSelectors = {
       }
     },
     /**
-     * Resolves a single space label. Hits only the first page — the dropdown's
-     * `fetchPage` stream populates the options cache for spaces beyond page 1,
-     * and `useSelectorOptionMap` merges them in. Walking all pages here would
-     * double API load since the stream is already running in parallel.
+     * 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.
      */
     fetchById: async ({ context, detailId, signal }: SelectorQueryArgs) => {
       if (!detailId) return null
@@ -64,6 +64,7 @@ export const confluenceSelectors = {
           credential: credentialId,
           workflowId: context.workflowId,
           domain,
+          spaceKey: detailId,
         },
         signal,
       })

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

@@ -51,6 +51,15 @@ const EMPTY_PAGE: SelectorPage = { items: [], nextCursor: undefined }
  */
 const MAX_AUTO_DRAIN_PAGES = 50
 
+/** Fallback freshness for selectors that do not declare their own `staleTime`. */
+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.
+ */
+export const DEFAULT_SELECTOR_DETAIL_STALE_TIME = 300_000
+
 export function useSelectorOptions(
   key: SelectorKey,
   args: SelectorHookArgs
@@ -69,7 +78,7 @@ export function useSelectorOptions(
     queryFn: ({ signal }) =>
       definition.fetchList?.({ ...queryArgs, signal }) ?? Promise.resolve([]),
     enabled: !supportsPagination && isEnabled,
-    staleTime: definition.staleTime ?? 30_000,
+    staleTime: definition.staleTime ?? DEFAULT_SELECTOR_STALE_TIME,
   })
 
   const pagedQuery = useInfiniteQuery<SelectorPage>({
@@ -85,7 +94,7 @@ export function useSelectorOptions(
     getNextPageParam: (last) => last.nextCursor,
     initialPageParam: undefined as string | undefined,
     enabled: supportsPagination && isEnabled,
-    staleTime: definition.staleTime ?? 30_000,
+    staleTime: definition.staleTime ?? DEFAULT_SELECTOR_STALE_TIME,
   })
 
   const { hasNextPage, isFetchingNextPage, fetchNextPage, isError } = pagedQuery
@@ -175,13 +184,18 @@ export function useSelectorOptionDetail(
         ? definition.enabled(queryArgs)
         : true
       : false
-  const enabled = args.enabled ?? baseEnabled
+  /**
+   * A caller's `enabled` narrows `baseEnabled` rather than replacing it: `queryFn`
+   * asserts `fetchById` is defined, so dropping that guard would throw for every
+   * selector that declares no `fetchById`.
+   */
+  const enabled = (args.enabled ?? true) && baseEnabled
 
   const query = useQuery<SelectorOption | null>({
     queryKey: [...definition.getQueryKey(queryArgs), 'detail', resolvedDetailId ?? 'none'],
     queryFn: ({ signal }) => definition.fetchById!({ ...queryArgs, signal }),
     enabled,
-    staleTime: definition.staleTime ?? 300_000,
+    staleTime: definition.staleTime ?? DEFAULT_SELECTOR_DETAIL_STALE_TIME,
   })
 
   return query

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

@@ -366,6 +366,12 @@ const defineConfluenceGetContract = <TQuery extends z.ZodType>(path: string, que
 
 export const confluenceSpacesSelectorBodySchema = credentialWorkflowDomainBodySchema.extend({
   cursor: optionalString,
+  /**
+   * Exact space key to resolve server-side, bypassing pagination. Confluence v2
+   * `/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(),
 })
 
 export const confluenceSpacesSelectorContract = definePostSelector(