feat(search): context-aware cmd-k results on the integrations page

When cmd-k is opened on the integrations page, show two new result
groups: connected accounts (visible even with empty input) and catalog
integrations (appear once the user types). Selecting an OAuth integration
deep-links to its detail page with ?connect=oauth so the connect modal
auto-opens. Non-OAuth integrations navigate to the plain detail page.

Both groups are gated to the integrations page only and respect the
hideIntegrationsTab permission. The credentials fetch shares the same
React Query cache key as the integrations page itself (no double fetch).

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/index.ts

@@ -9,8 +9,10 @@ export {
 } from './command-items'
 export {
   BlocksGroup,
+  ConnectedAccountsGroup,
   DocsGroup,
   FilesGroup,
+  IntegrationsGroup,
   KnowledgeBasesGroup,
   PagesGroup,
   TablesGroup,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/index.ts

@@ -1,7 +1,9 @@
 export {
   BlocksGroup,
+  ConnectedAccountsGroup,
   DocsGroup,
   FilesGroup,
+  IntegrationsGroup,
   KnowledgeBasesGroup,
   PagesGroup,
   TablesGroup,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items'
 import type {
   FileItem,
+  IntegrationSearchItem,
   PageItem,
   TaskItem,
   WorkflowItem,
@@ -254,6 +255,9 @@ export const PagesGroup = memo(function PagesGroup({
 export const TablesGroup = createIconGroup('Tables', 'table', Table)
 export const KnowledgeBasesGroup = createIconGroup('Knowledge Bases', 'knowledge-base', Database)
 
+export const ConnectedAccountsGroup = createColoredIconGroup('Connected', 'connected-account')
+export const IntegrationsGroup = createColoredIconGroup('Integrations', 'integration')
+
 export const FilesGroup = memo(function FilesGroup({
   items,
   onSelect,
@@ -277,6 +281,40 @@ export const FilesGroup = memo(function FilesGroup({
   )
 })
 
+/**
+ * Factory for groups that render each item with its own brand icon on a
+ * brand-colored tile (the same `showColoredIcon` pattern used by
+ * `BlocksGroup` / `ToolsGroup`). Used for integrations and connected accounts
+ * where every row has a distinct per-item icon and brand color.
+ */
+function createColoredIconGroup(heading: string, prefix: string) {
+  return memo(function ColoredIconGroup({
+    items,
+    onSelect,
+  }: {
+    items: IntegrationSearchItem[]
+    onSelect: (item: IntegrationSearchItem) => void
+  }) {
+    if (items.length === 0) return null
+    return (
+      <Command.Group heading={heading} className={GROUP_HEADING_CLASSNAME}>
+        {items.map((item) => (
+          <MemoizedCommandItem
+            key={item.id}
+            value={`${item.name} ${prefix}-${item.id}`}
+            onSelect={() => onSelect(item)}
+            icon={item.icon}
+            bgColor={item.bgColor}
+            showColoredIcon
+          >
+            {item.name}
+          </MemoizedCommandItem>
+        ))}
+      </Command.Group>
+    )
+  })
+}
+
 function createIconGroup(
   heading: string,
   prefix: string,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/integration-search-items.ts

@@ -0,0 +1,96 @@
+import type { ComponentType } from 'react'
+import { blockTypeToIconMap, INTEGRATIONS } from '@/lib/integrations'
+import { getServiceConfigByProviderId } from '@/lib/oauth'
+import {
+  CONNECT_MODE,
+  CONNECT_QUERY_PARAM,
+} from '@/app/workspace/[workspaceId]/integrations/connect-route'
+import type { IntegrationSearchItem } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
+import type { WorkspaceCredential } from '@/hooks/queries/credentials'
+
+/** Fallback brand color for credentials whose integration metadata cannot be resolved. */
+const FALLBACK_BG_COLOR = '#6B7280'
+
+/**
+ * Module-level lookup of integration metadata by OAuth service display name
+ * (case-insensitive). Mirrors the same map in `integrations.tsx`.
+ */
+const INTEGRATION_BY_LOWER_NAME = new Map(INTEGRATIONS.map((i) => [i.name.toLowerCase(), i]))
+
+/**
+ * Module-level base array of resolvable integrations (entries without a
+ * registered icon are dropped, matching the catalog's `if (!Icon) return null`
+ * guard). Workspace-independent; `href` is injected per call.
+ */
+const INTEGRATION_BASES: readonly {
+  id: string
+  name: string
+  icon: ComponentType<{ className?: string }>
+  bgColor: string
+  slug: string
+  authType: string
+}[] = INTEGRATIONS.flatMap((integration) => {
+  const icon = blockTypeToIconMap[integration.type]
+  if (!icon) return []
+  return [
+    {
+      id: integration.slug,
+      name: integration.name,
+      icon,
+      bgColor: integration.bgColor,
+      slug: integration.slug,
+      authType: integration.authType,
+    },
+  ]
+})
+
+/**
+ * Builds the full integration catalog as search items for a given workspace.
+ * OAuth integrations link directly to the detail page with `?connect=oauth` so
+ * the connect modal auto-opens (via the detail page's `useEffect` on
+ * `CONNECT_QUERY_PARAM`). Non-OAuth integrations link to the plain detail page.
+ */
+export function buildIntegrationSearchItems(workspaceId: string): IntegrationSearchItem[] {
+  return INTEGRATION_BASES.map((base) => {
+    const connectSuffix =
+      base.authType === 'oauth' ? `?${CONNECT_QUERY_PARAM}=${CONNECT_MODE.oauth}` : ''
+    return {
+      id: base.id,
+      name: base.name,
+      icon: base.icon,
+      bgColor: base.bgColor,
+      href: `/workspace/${workspaceId}/integrations/${base.slug}${connectSuffix}`,
+    }
+  })
+}
+
+/**
+ * Builds search items for the user's connected OAuth / service-account
+ * credentials. Each item links to its credential detail page. Credentials
+ * without a resolvable OAuth service are silently dropped (same guard as
+ * `integrations.tsx`'s `connectedItems` memo).
+ */
+export function buildConnectedAccountSearchItems(
+  credentials: readonly WorkspaceCredential[],
+  workspaceId: string
+): IntegrationSearchItem[] {
+  return credentials.flatMap((credential) => {
+    if (credential.type !== 'oauth' && credential.type !== 'service_account') return []
+    if (!credential.providerId) return []
+
+    const service = getServiceConfigByProviderId(credential.providerId)
+    if (!service) return []
+
+    const integration = INTEGRATION_BY_LOWER_NAME.get(service.name.toLowerCase())
+
+    return [
+      {
+        id: credential.id,
+        name: credential.displayName,
+        icon: service.icon as ComponentType<{ className?: string }>,
+        bgColor: integration?.bgColor ?? FALLBACK_BG_COLOR,
+        href: `/workspace/${workspaceId}/integrations/connected/${credential.id}`,
+      },
+    ]
+  })
+}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx

@@ -35,8 +35,10 @@ import type {
 } from '@/stores/modals/search/types'
 import {
   BlocksGroup,
+  ConnectedAccountsGroup,
   DocsGroup,
   FilesGroup,
+  IntegrationsGroup,
   KnowledgeBasesGroup,
   PagesGroup,
   TablesGroup,
@@ -49,6 +51,7 @@ import {
 } from './components/search-groups'
 import type {
   FileItem,
+  IntegrationSearchItem,
   PageItem,
   SearchModalProps,
   TaskItem,
@@ -68,7 +71,10 @@ export function SearchModal({
   tables = [],
   files = [],
   knowledgeBases = [],
+  integrations = [],
+  connectedAccounts = [],
   isOnWorkflowPage = false,
+  isOnIntegrationsPage = false,
 }: SearchModalProps) {
   const params = useParams()
   const router = useRouter()
@@ -378,6 +384,32 @@ export function SearchModal({
     [workspaceId]
   )
 
+  const handleConnectedAccountSelect = useCallback(
+    (item: IntegrationSearchItem) => {
+      routerRef.current.push(item.href)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'connected_account',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
+    },
+    [workspaceId]
+  )
+
+  const handleIntegrationSelect = useCallback(
+    (item: IntegrationSearchItem) => {
+      routerRef.current.push(item.href)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'integration',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
+    },
+    [workspaceId]
+  )
+
   const handleBlockSelectAsBlock = useCallback(
     (block: SearchBlockItem) => handleBlockSelect(block, 'block'),
     [handleBlockSelect]
@@ -462,6 +494,22 @@ export function SearchModal({
     [pages, deferredSearch]
   )
 
+  /** Connected accounts: visible on the integrations page even with empty input. */
+  const filteredConnectedAccounts = useMemo(() => {
+    if (!isOnIntegrationsPage) return []
+    return filterAndSort(
+      connectedAccounts,
+      (a) => `${a.name} connected-account-${a.id}`,
+      deferredSearch
+    )
+  }, [isOnIntegrationsPage, connectedAccounts, deferredSearch])
+
+  /** Catalog integrations: only shown once the user has typed something. */
+  const filteredIntegrations = useMemo(() => {
+    if (!isOnIntegrationsPage || !deferredSearch) return []
+    return filterAndSort(integrations, (i) => `${i.name} integration-${i.id}`, deferredSearch)
+  }, [isOnIntegrationsPage, deferredSearch, integrations])
+
   if (!mounted) return null
 
   return createPortal(
@@ -513,6 +561,11 @@ export function SearchModal({
                 No results found.
               </Command.Empty>
 
+              <ConnectedAccountsGroup
+                items={filteredConnectedAccounts}
+                onSelect={handleConnectedAccountSelect}
+              />
+              <IntegrationsGroup items={filteredIntegrations} onSelect={handleIntegrationSelect} />
               <BlocksGroup items={filteredBlocks} onSelect={handleBlockSelectAsBlock} />
               <ToolsGroup items={filteredTools} onSelect={handleBlockSelectAsTool} />
               <TriggersGroup items={filteredTriggers} onSelect={handleBlockSelectAsTrigger} />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts

@@ -1,5 +1,13 @@
 import type { ComponentType, ReactNode } from 'react'
 
+export interface IntegrationSearchItem {
+  id: string
+  name: string
+  href: string
+  icon: ComponentType<{ className?: string }>
+  bgColor: string
+}
+
 export interface TaskItem {
   id: string
   name: string
@@ -48,7 +56,10 @@ export interface SearchModalProps {
   tables?: TaskItem[]
   files?: FileItem[]
   knowledgeBases?: TaskItem[]
+  integrations?: IntegrationSearchItem[]
+  connectedAccounts?: IntegrationSearchItem[]
   isOnWorkflowPage?: boolean
+  isOnIntegrationsPage?: boolean
 }
 
 export interface CommandItemProps {

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

@@ -58,6 +58,10 @@ import {
   WorkflowList,
   WorkspaceHeader,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
+import {
+  buildConnectedAccountSearchItems,
+  buildIntegrationSearchItems,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/integration-search-items'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
 import {
@@ -81,6 +85,7 @@ import {
   groupWorkflowsByFolder,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import { useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
+import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
 import { useFolderMap, useFolders } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useTablesList } from '@/hooks/queries/tables'
@@ -1010,6 +1015,26 @@ export const Sidebar = memo(function Sidebar() {
   }, [])
 
   const isOnSettingsPage = pathname?.startsWith(`/workspace/${workspaceId}/settings`) ?? false
+  const isOnIntegrationsPage =
+    pathname?.startsWith(`/workspace/${workspaceId}/integrations`) ?? false
+
+  const { data: fetchedCredentials = [] } = useWorkspaceCredentials({
+    workspaceId,
+    enabled: isOnIntegrationsPage && !permissionConfig.hideIntegrationsTab,
+  })
+
+  const searchModalIntegrations = useMemo(
+    () => (permissionConfig.hideIntegrationsTab ? [] : buildIntegrationSearchItems(workspaceId)),
+    [workspaceId, permissionConfig.hideIntegrationsTab]
+  )
+
+  const searchModalConnectedAccounts = useMemo(
+    () =>
+      permissionConfig.hideIntegrationsTab
+        ? []
+        : buildConnectedAccountSearchItems(fetchedCredentials, workspaceId),
+    [fetchedCredentials, workspaceId, permissionConfig.hideIntegrationsTab]
+  )
 
   const isLoading = workflowsLoading || sessionLoading
   const initialScrollDoneRef = useRef(false)
@@ -1746,7 +1771,10 @@ export const Sidebar = memo(function Sidebar() {
         tables={searchModalTables}
         files={searchModalFiles}
         knowledgeBases={searchModalKnowledgeBases}
+        integrations={searchModalIntegrations}
+        connectedAccounts={searchModalConnectedAccounts}
         isOnWorkflowPage={!!workflowId}
+        isOnIntegrationsPage={isOnIntegrationsPage}
       />
 
       <HelpModal