feat(search): add personal integration inventory and connection cards (#7711)

* feat(search): add personal integration inventory and connection cards

* feat(slack): stream Search tool progress

* fix(tests): isolate PitchBook error handling from network

Author: TheodoreSpeaks

apps/sim/app/api/knowledge/sim-search/personal-integrations/route.ts

@@ -0,0 +1,37 @@
+import {
+  connectPersonalSearchIntegrationContract,
+  listPersonalSearchIntegrationsContract,
+} from '@/lib/api/contracts/knowledge/personal-integrations'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { internalKnowledgeErrorPolicies } from '@/lib/knowledge/api/route-policies'
+import { connectPersonalSearchIntegration } from '@/lib/knowledge/application/connect-personal-search-integration'
+import { knowledgeOperations } from '@/lib/knowledge/application/operations'
+import { listPersonalSearchIntegrations } from '@/lib/knowledge/application/personal-search-integrations'
+
+export const GET = defineInternalJsonRoute({
+  contract: listPersonalSearchIntegrationsContract,
+  auth: internalSessionAuth,
+  operation: knowledgeOperations.listPersonalSearchIntegrations,
+  rateLimit: internalRateLimits.user({ bucketName: 'knowledge.search.personal-integrations.list' }),
+  errorPolicy: internalKnowledgeErrorPolicies.connectors,
+  mapInput: ({ query }) => query,
+  useCase: listPersonalSearchIntegrations,
+  present: (data) => ({ success: true as const, data }),
+})
+
+export const POST = defineInternalJsonRoute({
+  contract: connectPersonalSearchIntegrationContract,
+  auth: internalSessionAuth,
+  operation: knowledgeOperations.connectPersonalSearchIntegration,
+  rateLimit: internalRateLimits.user({
+    bucketName: 'knowledge.search.personal-integrations.connect',
+  }),
+  errorPolicy: internalKnowledgeErrorPolicies.connectAccount,
+  mapInput: ({ body }) => body,
+  useCase: connectPersonalSearchIntegration,
+  present: (data) => ({ success: true as const, data }),
+})

apps/sim/app/o/[organizationId]/home/organization-home.tsx

@@ -6,6 +6,7 @@ import { MothershipHandoffStorage } from '@/lib/core/utils/browser-storage'
 import { Composer } from '@/app/o/[organizationId]/home/components/composer'
 import { GetStarted } from '@/app/o/[organizationId]/home/components/get-started'
 import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
+import { SearchIntegrationConnection } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/search-integration-connection'
 import { MothershipChat } from '@/app/workspace/[workspaceId]/home/components/mothership-chat'
 import { useChat } from '@/app/workspace/[workspaceId]/home/hooks/use-chat'
 import { useMarkMothershipChatRead } from '@/hooks/queries/mothership-chats'
@@ -79,6 +80,7 @@ function OrganizationHomeContent({ userName, chatId }: OrganizationHomeProps) {
     <div className='flex h-full min-h-0 flex-col bg-[var(--bg)]'>
       {hasChat ? (
         <MothershipChat
+          SearchConnectionComponent={SearchIntegrationConnection}
           messages={chat.messages}
           isSending={chat.isSending}
           isReconnecting={chat.isReconnecting}

apps/sim/app/o/[organizationId]/integrations/integrations.tsx

@@ -2,6 +2,7 @@
 
 import { useMemo } from 'react'
 import type { ResourceScope } from '@/lib/core/resource-scope'
+import type { SearchConnectionTarget } from '@/lib/knowledge/search/connection-target'
 import { connectorDisplayName } from '@/lib/sim-search/connectors'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
 import { OrganizationPage } from '@/app/o/[organizationId]/components/organization-page'
@@ -10,6 +11,7 @@ import { ConnectAccountOptions } from '@/app/o/[organizationId]/integrations/con
 import { DisconnectAccountMenu } from '@/app/o/[organizationId]/integrations/disconnect-account-menu'
 import { SlackSearchActions } from '@/app/o/[organizationId]/integrations/slack-search-actions'
 import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
+import { SearchIntegrationConnection } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/search-integration-connection'
 import { SearchSourcePagination } from '@/app/workspace/[workspaceId]/search/components/search-source-pagination'
 import { SearchSourceRow } from '@/app/workspace/[workspaceId]/search/components/search-source-row'
 import { SettingsQueryErrorState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
@@ -22,11 +24,15 @@ import { useMemberEnrollment } from '@/hooks/use-member-enrollment'
 import { useDesktopOAuthConnectListener, useOAuthReturnRouter } from '@/hooks/use-oauth-return'
 
 interface OrganizationIntegrationsProps {
+  connectionRequest?: { target: SearchConnectionTarget; userId: string }
   slackOnboarding?: { token: string; userId: string }
 }
 
 /** The viewer's Search connections and ready integrations they can connect personally. */
-export function OrganizationIntegrations({ slackOnboarding }: OrganizationIntegrationsProps = {}) {
+export function OrganizationIntegrations({
+  slackOnboarding,
+  connectionRequest,
+}: OrganizationIntegrationsProps = {}) {
   useOAuthReturnRouter()
   useDesktopOAuthConnectListener()
   const { organization, searchAccess } = useOrganizationContext()
@@ -68,6 +74,13 @@ export function OrganizationIntegrations({ slackOnboarding }: OrganizationIntegr
         )
       }
     >
+      {connectionRequest && (
+        <SearchIntegrationConnection
+          organizationId={organization.id}
+          {...connectionRequest}
+          controlId='integrations-link'
+        />
+      )}
       <div className={RESOURCE_LIST_STACK}>
         {sources.isError && !sources.isFetchNextPageError ? (
           <SettingsQueryErrorState

apps/sim/app/o/[organizationId]/integrations/page.test.tsx

@@ -32,6 +32,41 @@ beforeEach(() => {
 })
 
 describe('integrations page Slack context', () => {
+  it('preserves a requested connection across login and validates it in the existing organization page', async () => {
+    const selected = {
+      ...props,
+      searchParams: Promise.resolve({
+        connectorType: 'gmail',
+        connectorId: 'source',
+        credentialId: 'account',
+      }),
+    }
+    const page = await OrganizationIntegrationsPage(selected)
+    expect(page.props.connectionRequest).toMatchObject({
+      userId: 'viewer',
+      target: {
+        type: 'link',
+        connectorType: 'gmail',
+        connectorId: 'source',
+        credentialId: 'account',
+      },
+    })
+    authMockFns.mockGetSession.mockResolvedValue(null)
+    await expect(OrganizationIntegrationsPage(selected)).rejects.toThrow('Redirect')
+    expect(mocks.redirect).toHaveBeenCalledWith(
+      `/login?callbackUrl=${encodeURIComponent('/o/organization-a/integrations?connectorType=gmail&connectorId=source&credentialId=account')}`
+    )
+  })
+  it('rejects unknown providers and reconnects without a source', async () => {
+    for (const query of [
+      { connectorType: 'invented' },
+      { connectorType: 'gmail', credentialId: 'account' },
+    ]) {
+      await expect(
+        OrganizationIntegrationsPage({ ...props, searchParams: Promise.resolve(query) })
+      ).rejects.toThrow('Not found')
+    }
+  })
   it('preserves the source page and Slack question context through login', async () => {
     authMockFns.mockGetSession.mockResolvedValue(null)
     await expect(OrganizationIntegrationsPage(props)).rejects.toThrow('Redirect')

apps/sim/app/o/[organizationId]/integrations/page.tsx

@@ -2,11 +2,17 @@ import type { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 import { slackSearchOnboardingInputSchema } from '@/lib/api/contracts/knowledge/slack'
 import { getSession } from '@/lib/auth'
+import {
+  searchConnectionPath,
+  searchConnectionTargetSchema,
+} from '@/lib/knowledge/search/connection-target'
 import { organizationRoutes } from '@/lib/navigation/paths'
 import { getOrganizationSurfaceContext } from '@/lib/organizations/surface'
+import { SEARCH_CONNECTORS } from '@/lib/sim-search/connectors'
 import { slackSearchIntegrationsPath } from '@/lib/slack-search/onboarding'
 import { buildAuthCrossLink } from '@/app/(auth)/auth-redirect'
 import { OrganizationIntegrations } from '@/app/o/[organizationId]/integrations/integrations'
+import { loadIntegrationConnectionParams } from '@/app/o/[organizationId]/integrations/search-params'
 
 export const metadata: Metadata = {
   title: 'Integrations',
@@ -15,15 +21,35 @@ export const metadata: Metadata = {
 
 interface OrganizationIntegrationsPageProps {
   params: Promise<{ organizationId: string }>
-  searchParams: Promise<{ slack?: string | string[] }>
+  searchParams: Promise<{
+    slack?: string | string[]
+    connectorType?: string | string[]
+    connectorId?: string | string[]
+    credentialId?: string | string[]
+  }>
 }
 
 export default async function OrganizationIntegrationsPage({
   params,
   searchParams,
 }: OrganizationIntegrationsPageProps) {
   const { organizationId } = await params
-  const { slack } = await searchParams
+  const query = await searchParams
+  const { slack } = query
+  const selection = loadIntegrationConnectionParams(query)
+  const connector = SEARCH_CONNECTORS.find((entry) => entry.type === selection.connectorType)
+  const requested =
+    selection.connectorType || selection.connectorId || selection.credentialId
+      ? searchConnectionTargetSchema.safeParse({
+          type: 'link',
+          provider: connector?.providerId,
+          connectorType: selection.connectorType,
+          ...(selection.connectorId ? { connectorId: selection.connectorId } : {}),
+          ...(selection.credentialId ? { credentialId: selection.credentialId } : {}),
+        })
+      : undefined
+  if (requested && !requested.success) notFound()
+  const connectionTarget = requested?.data
   const context =
     slack === undefined ? undefined : slackSearchOnboardingInputSchema.safeParse({ token: slack })
   if (context && !context.success) notFound()
@@ -32,16 +58,21 @@ export default async function OrganizationIntegrationsPage({
   if (!session?.user)
     redirect(
       buildAuthCrossLink('/login', {
-        callbackUrl: slackToken
-          ? slackSearchIntegrationsPath(organizationId, slackToken)
-          : organizationRoutes(organizationId).integrations,
+        callbackUrl: connectionTarget
+          ? searchConnectionPath(organizationId, connectionTarget)
+          : slackToken
+            ? slackSearchIntegrationsPath(organizationId, slackToken)
+            : organizationRoutes(organizationId).integrations,
         isInviteFlow: false,
       })
     )
   const organizationContext = await getOrganizationSurfaceContext(organizationId, session.user.id)
   if (!organizationContext?.searchAccess.memberScoped) notFound()
   return (
     <OrganizationIntegrations
+      connectionRequest={
+        connectionTarget ? { target: connectionTarget, userId: session.user.id } : undefined
+      }
       slackOnboarding={slackToken ? { token: slackToken, userId: session.user.id } : undefined}
     />
   )

apps/sim/app/o/[organizationId]/integrations/search-params.ts

@@ -0,0 +1,9 @@
+import { createLoader, parseAsString } from 'nuqs/server'
+
+export const integrationConnectionParams = {
+  connectorType: parseAsString.withDefault(''),
+  connectorId: parseAsString.withDefault(''),
+  credentialId: parseAsString.withDefault(''),
+}
+
+export const loadIntegrationConnectionParams = createLoader(integrationConnectionParams)

apps/sim/app/workspace/[workspaceId]/home/components/chat-surface-context/chat-surface-context.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  type ComponentType,
   createContext,
   type ReactNode,
   useCallback,
@@ -10,6 +11,7 @@ import {
   useRef,
 } from 'react'
 import { noop } from '@sim/utils/helpers'
+import type { SearchIntegrationConnectionProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/search-integration-connection'
 import type { WorkspaceResourceRef } from '@/app/workspace/[workspaceId]/home/types'
 import type { ChatContext } from '@/stores/panel'
 
@@ -20,6 +22,7 @@ import type { ChatContext } from '@/stores/panel'
  * consume them without relaying through every intermediate component.
  */
 interface ChatSurfaceContextValue {
+  SearchConnectionComponent?: ComponentType<SearchIntegrationConnectionProps>
   /** Resolved id of the chat backing this surface, if one exists yet. */
   chatId?: string
   /** Id of the user interacting with this surface. */
@@ -44,6 +47,7 @@ const ChatSurfaceContext = createContext<ChatSurfaceContextValue>({
 })
 
 interface ChatSurfaceProviderProps {
+  SearchConnectionComponent?: ComponentType<SearchIntegrationConnectionProps>
   chatId?: string
   userId?: string
   onContextAdd?: (context: ChatContext) => void
@@ -59,6 +63,7 @@ interface ChatSurfaceProviderProps {
  * not re-render when a parent re-creates a handler.
  */
 export function ChatSurfaceProvider({
+  SearchConnectionComponent,
   chatId,
   userId,
   onContextAdd,
@@ -88,13 +93,21 @@ export function ChatSurfaceProvider({
 
   const value = useMemo<ChatSurfaceContextValue>(
     () => ({
+      SearchConnectionComponent,
       chatId,
       userId,
       onContextAdd: stableOnContextAdd,
       onContextRemove: stableOnContextRemove,
       onWorkspaceResourceSelect: stableOnWorkspaceResourceSelect,
     }),
-    [chatId, userId, stableOnContextAdd, stableOnContextRemove, stableOnWorkspaceResourceSelect]
+    [
+      SearchConnectionComponent,
+      chatId,
+      userId,
+      stableOnContextAdd,
+      stableOnContextRemove,
+      stableOnWorkspaceResourceSelect,
+    ]
   )
 
   return <ChatSurfaceContext.Provider value={value}>{children}</ChatSurfaceContext.Provider>

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx

@@ -90,6 +90,8 @@ export const InteractionCardInputRow = forwardRef<HTMLInputElement, InteractionC
 InteractionCardInputRow.displayName = 'InteractionCardInputRow'
 
 interface InteractionCardActionRowProps {
+  divided?: boolean
+  trailing?: ReactNode
   label: string
   leading?: ReactNode
   disabled?: boolean
@@ -100,6 +102,8 @@ interface InteractionCardActionRowProps {
 export function InteractionCardActionRow({
   label,
   leading,
+  divided = true,
+  trailing,
   disabled = false,
   onClick,
 }: InteractionCardActionRowProps) {
@@ -110,7 +114,8 @@ export function InteractionCardActionRow({
       onClick={onClick}
       className={cn(
         INTERACTION_CARD_ROW_CLASSES,
-        'border-t',
+        'w-full',
+        divided && 'border-t',
         disabled ? 'cursor-not-allowed' : 'hover-hover:bg-[var(--surface-5)]'
       )}
     >
@@ -123,7 +128,7 @@ export function InteractionCardActionRow({
       >
         {label}
       </span>
-      <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+      {trailing ?? <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />}
     </button>
   )
 }