diff --git a/web/app/components/app/configuration/config/agent/agent-tools/group-auth-control.tsx b/web/app/components/app/configuration/config/agent/agent-tools/group-auth-control.tsx
new file mode 100644
index 0000000000..2272d4558c
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-tools/group-auth-control.tsx
@@ -0,0 +1,142 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import Authorize from '@/app/components/plugins/plugin-auth/authorize'
+import Authorized from '@/app/components/plugins/plugin-auth/authorized'
+import { AuthCategory } from '@/app/components/plugins/plugin-auth'
+import { usePluginAuth } from '@/app/components/plugins/plugin-auth/hooks/use-plugin-auth'
+import type { Credential } from '@/app/components/plugins/plugin-auth/types'
+import cn from '@/utils/classnames'
+import type { CollectionType } from '@/app/components/tools/types'
+
+type GroupAuthControlProps = {
+  providerId: string
+  providerName: string
+  providerType: CollectionType
+  credentialId?: string
+  onChange: (credentialId: string) => void
+}
+
+const GroupAuthControl: FC<GroupAuthControlProps> = ({
+  providerId,
+  providerName,
+  providerType,
+  credentialId,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const {
+    isAuthorized,
+    canOAuth,
+    canApiKey,
+    credentials,
+    disabled,
+    invalidPluginCredentialInfo,
+    notAllowCustomCredential,
+  } = usePluginAuth({
+    provider: providerName,
+    providerType,
+    category: AuthCategory.tool,
+    detail: { id: providerId, name: providerName, type: providerType } as any,
+  }, true)
+
+  const extraAuthorizationItems: Credential[] = [
+    {
+      id: '__workspace_default__',
+      name: t('plugin.auth.workspaceDefault'),
+      provider: '',
+      is_default: !credentialId,
+      isWorkspaceDefault: true,
+    },
+  ]
+
+  const handleAuthorizationItemClick = useCallback((id: string) => {
+    onChange(id === '__workspace_default__' ? '' : id)
+  }, [onChange])
+
+  const renderTrigger = useCallback((open?: boolean) => {
+    let label = ''
+    let removed = false
+    let unavailable = false
+    let color = 'green'
+    if (!credentialId) {
+      label = t('plugin.auth.workspaceDefault')
+    }
+    else {
+      const credential = credentials.find(c => c.id === credentialId)
+      label = credential ? credential.name : t('plugin.auth.authRemoved')
+      removed = !credential
+      unavailable = !!credential?.not_allowed_to_use && !credential?.from_enterprise
+      if (removed)
+        color = 'red'
+      else if (unavailable)
+        color = 'gray'
+    }
+
+    return (
+      <Button
+        className={cn(
+          'h-9',
+          open && 'bg-components-button-secondary-bg-hover',
+          removed && 'text-text-destructive',
+        )}
+        variant='secondary'
+        size='small'
+      >
+        <Indicator className='mr-2' color={color as any} />
+        {label}
+        {
+          unavailable && t('plugin.auth.unavailable')
+        }
+        <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
+      </Button>
+    )
+  }, [credentialId, credentials, t])
+
+  if (!isAuthorized) {
+    return (
+      <Authorize
+        pluginPayload={{
+          provider: providerName,
+          providerType,
+          category: AuthCategory.tool,
+          detail: { id: providerId, name: providerName, type: providerType } as any,
+        }}
+        canOAuth={canOAuth}
+        canApiKey={canApiKey}
+        disabled={disabled}
+        onUpdate={invalidPluginCredentialInfo}
+        notAllowCustomCredential={notAllowCustomCredential}
+      />
+    )
+  }
+
+  return (
+    <Authorized
+      pluginPayload={{
+        provider: providerName,
+        providerType,
+        category: AuthCategory.tool,
+        detail: { id: providerId, name: providerName, type: providerType } as any,
+      }}
+      credentials={credentials}
+      canOAuth={canOAuth}
+      canApiKey={canApiKey}
+      disabled={disabled}
+      disableSetDefault
+      onItemClick={handleAuthorizationItemClick}
+      extraAuthorizationItems={extraAuthorizationItems}
+      showItemSelectedIcon
+      renderTrigger={renderTrigger}
+      selectedCredentialId={credentialId || '__workspace_default__'}
+      onUpdate={invalidPluginCredentialInfo}
+      notAllowCustomCredential={notAllowCustomCredential}
+    />
+  )
+}
+
+export default React.memo(GroupAuthControl)
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 133f41074f..5e03d3e529 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -18,13 +18,13 @@ import AppIcon from '@/app/components/base/app-icon'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
+import GroupAuthControl from './group-auth-control'
 import ConfigContext from '@/context/debug-configuration'
 import type { AgentTool } from '@/types/app'
 import { type Collection, CollectionType } from '@/app/components/tools/types'
 import { MAX_TOOLS_NUM } from '@/config'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
-import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
 import cn from '@/utils/classnames'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
@@ -207,133 +207,191 @@ const AgentTools: FC = () => {
           </div>
         }
       >
-        <div className='grid grid-cols-1 flex-wrap items-center justify-between gap-1 2xl:grid-cols-2'>
-          {tools.map((item: AgentTool & { icon: any; collection?: Collection }, index) => (
-            <div key={index}
-              className={cn(
-                'cursor group relative flex w-full items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-1.5 pr-2 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
-                isDeleting === index && 'border-state-destructive-border hover:bg-state-destructive-hover',
-              )}
+        <div className='space-y-2'>
+          {Object.values(
+            tools.reduce((acc, item, idx) => {
+              const key = item.provider_id
+              if (!acc[key]) {
+                acc[key] = {
+                  providerId: item.provider_id,
+                  providerName: getProviderShowName(item) || '',
+                  icon: item.icon,
+                  providerType: item.provider_type,
+                  tools: [] as (AgentTool & { __index: number })[],
+                }
+              }
+              acc[key].tools.push({ ...item, __index: idx })
+              return acc
+            }, {} as Record<string, { providerId: string; providerName: string; providerType: CollectionType; icon: any; tools: (AgentTool & { __index: number })[] }>),
+          ).map(group => (
+            <div
+              key={group.providerId}
+              className='space-y-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-2 shadow-xs'
+              onClickCapture={() => {
+                // 调试：查看 provider 及其工具数据
+                console.log('provider group', group)
+              }}
             >
-              <div className='flex w-0 grow items-center'>
-                {item.isDeleted && <DefaultToolIcon className='h-5 w-5' />}
-                {!item.isDeleted && (
-                  <div className={cn((item.notAuthor || !item.enabled) && 'shrink-0 opacity-50')}>
-                    {typeof item.icon === 'string' && <div className='h-5 w-5 rounded-md bg-cover bg-center' style={{ backgroundImage: `url(${item.icon})` }} />}
-                    {typeof item.icon !== 'string' && <AppIcon className='rounded-md' size='xs' icon={item.icon?.content} background={item.icon?.background} />}
-                  </div>
-                )}
-                <div
-                  className={cn(
-                    'system-xs-regular ml-1.5 flex w-0 grow items-center truncate',
-                    (item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
-                  )}
-                >
-                  <span className='system-xs-medium pr-1.5 text-text-secondary'>{getProviderShowName(item)}</span>
-                  <span className='text-text-tertiary'>{item.tool_label}</span>
-                  {!item.isDeleted && (
-                    <Tooltip
-                      popupContent={
-                        <div className='w-[180px]'>
-                          <div className='mb-1.5 text-text-secondary'>{item.tool_name}</div>
-                          <div className='mb-1.5 text-text-tertiary'>{t('tools.toolNameUsageTip')}</div>
-                          <div className='cursor-pointer text-text-accent' onClick={() => copy(item.tool_name)}>{t('tools.copyToolName')}</div>
-                        </div>
-                      }
-                    >
-                      <div className='h-4 w-4'>
-                        <div className='ml-0.5 hidden group-hover:inline-block'>
-                          <RiInformation2Line className='h-4 w-4 text-text-tertiary' />
-                        </div>
-                      </div>
-                    </Tooltip>
-                  )}
+              <div className='flex items-center gap-2 px-1'>
+                {typeof group.icon === 'string'
+                  ? <div className='h-5 w-5 rounded-md bg-cover bg-center' style={{ backgroundImage: `url(${group.icon})` }} />
+                  : <AppIcon className='rounded-md' size='xs' icon={group.icon?.content} background={group.icon?.background} />}
+                <div className='system-sm-semibold text-text-secondary'>{group.providerName}</div>
+                <div className='ml-auto'>
+                  <GroupAuthControl
+                    providerId={group.providerId}
+                    providerName={group.providerName}
+                    providerType={group.providerType}
+                    credentialId={group.tools.find(t => !!t.credential_id)?.credential_id}
+                    onChange={(id) => {
+                      const newModelConfig = produce(modelConfig, (draft) => {
+                        draft.agentConfig.tools.forEach((tool: any) => {
+                          if (tool.provider_id === group.providerId)
+                            tool.credential_id = id
+                        })
+                      })
+                      setModelConfig(newModelConfig)
+                      formattingChangedDispatcher()
+                    }}
+                  />
                 </div>
-              </div>
-              <div className='ml-1 flex shrink-0 items-center'>
-                {item.isDeleted && (
-                  <div className='mr-2 flex items-center'>
-                    <Tooltip
-                      popupContent={t('tools.toolRemoved')}
-                    >
-                      <div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
-                        <AlertTriangle className='h-4 w-4 text-[#F79009]' />
-                      </div>
-                    </Tooltip>
-                    <div
-                      className='cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive'
-                      onClick={() => {
-                        const newModelConfig = produce(modelConfig, (draft) => {
-                          draft.agentConfig.tools.splice(index, 1)
-                        })
-                        setModelConfig(newModelConfig)
-                        formattingChangedDispatcher()
-                      }}
-                      onMouseOver={() => setIsDeleting(index)}
-                      onMouseLeave={() => setIsDeleting(-1)}
-                    >
-                      <RiDeleteBinLine className='h-4 w-4' />
-                    </div>
-                  </div>
-                )}
-                {!item.isDeleted && (
-                  <div className='mr-2 hidden items-center gap-1 group-hover:flex'>
-                    {!item.notAuthor && (
-                      <Tooltip
-                        popupContent={t('tools.setBuiltInTools.infoAndSetting')}
-                      >
-                        <div className='cursor-pointer rounded-md p-1  hover:bg-black/5' onClick={() => {
-                          setCurrentTool(item)
-                          setIsShowSettingTool(true)
-                        }}>
-                          <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
-                        </div>
-                      </Tooltip>
-                    )}
-                    <div
-                      className='cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive'
-                      onClick={() => {
-                        const newModelConfig = produce(modelConfig, (draft) => {
-                          draft.agentConfig.tools.splice(index, 1)
-                        })
-                        setModelConfig(newModelConfig)
-                        formattingChangedDispatcher()
-                      }}
-                      onMouseOver={() => setIsDeleting(index)}
-                      onMouseLeave={() => setIsDeleting(-1)}
-                    >
-                      <RiDeleteBinLine className='h-4 w-4' />
-                    </div>
-                  </div>
-                )}
-                <div className={cn(item.isDeleted && 'opacity-50')}>
-                  {!item.notAuthor && (
-                    <Switch
-                      defaultValue={item.isDeleted ? false : item.enabled}
-                      disabled={item.isDeleted}
-                      size='md'
-                      onChange={(enabled) => {
-                        const newModelConfig = produce(modelConfig, (draft) => {
-                          (draft.agentConfig.tools[index] as any).enabled = enabled
-                        })
-                        setModelConfig(newModelConfig)
-                        formattingChangedDispatcher()
-                      }} />
-                  )}
-                  {item.notAuthor && (
-                    <Button variant='secondary' size='small' onClick={() => {
-                      setCurrentTool(item)
+                {group.tools.every(t => t.notAuthor) && (
+                  <Button
+                    variant='secondary'
+                    size='small'
+                    className='ml-2'
+                    onClick={() => {
+                      const first = group.tools[0]
+                      setCurrentTool(first as any)
                       setIsShowSettingTool(true)
-                    }}>
-                      {t('tools.notAuthorized')}
-                      <Indicator className='ml-2' color='orange' />
-                    </Button>
-                  )}
-                </div>
+                    }}
+                  >
+                    {t('tools.notAuthorized')}
+                    <Indicator className='ml-2' color='orange' />
+                  </Button>
+                )}
+              </div>
+              <div className='space-y-1'>
+                {group.tools.map(item => (
+                  <div
+                    key={`${item.provider_id}-${item.tool_name}`}
+                    className={cn(
+                      'group relative flex w-full items-center justify-between rounded-lg pl-[21px] pr-2 hover:bg-state-base-hover',
+                      isDeleting === item.__index && 'border border-state-destructive-border hover:bg-state-destructive-hover',
+                    )}
+                    onClickCapture={() => {
+                      // 调试：查看工具行数据
+
+                      console.log('tool item', item)
+                    }}
+                  >
+                    <div className='flex w-0 grow items-center'>
+                      <div
+                        className={cn(
+                          'system-xs-regular flex w-0 grow items-center truncate border-l-2 border-divider-subtle pl-4',
+                          (item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
+                        )}
+                      >
+                        <span className='system-xs-medium pr-1.5 text-text-secondary'>{item.tool_label}</span>
+                        <span className='text-text-tertiary'>{item.tool_name}</span>
+                        {!item.isDeleted && (
+                          <Tooltip
+                            popupContent={
+                              <div className='w-[180px]'>
+                                <div className='mb-1.5 text-text-secondary'>{item.tool_name}</div>
+                                <div className='mb-1.5 text-text-tertiary'>{t('tools.toolNameUsageTip')}</div>
+                                <div className='cursor-pointer text-text-accent' onClick={() => copy(item.tool_name)}>{t('tools.copyToolName')}</div>
+                              </div>
+                            }
+                          >
+                            <div className='h-4 w-4'>
+                              <div className='ml-0.5 hidden group-hover:inline-block'>
+                                <RiInformation2Line className='h-4 w-4 text-text-tertiary' />
+                              </div>
+                            </div>
+                          </Tooltip>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className='flex shrink-0 items-center space-x-2'>
+                      {item.isDeleted && (
+                        <div className='mr-2 flex items-center'>
+                          <Tooltip
+                            popupContent={t('tools.toolRemoved')}
+                          >
+                            <div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
+                              <AlertTriangle className='h-4 w-4 text-[#F79009]' />
+                            </div>
+                          </Tooltip>
+                          <div
+                            className='cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive'
+                            onClick={() => {
+                              const newModelConfig = produce(modelConfig, (draft) => {
+                                draft.agentConfig.tools.splice(item.__index, 1)
+                              })
+                              setModelConfig(newModelConfig)
+                              formattingChangedDispatcher()
+                            }}
+                            onMouseOver={() => setIsDeleting(item.__index)}
+                            onMouseLeave={() => setIsDeleting(-1)}
+                          >
+                            <RiDeleteBinLine className='h-4 w-4' />
+                          </div>
+                        </div>
+                      )}
+                      {!item.isDeleted && (
+                        <div className='pointer-events-none mr-2 flex items-center gap-1 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100'>
+                          {!item.notAuthor && (
+                            <Tooltip
+                              popupContent={t('tools.setBuiltInTools.infoAndSetting')}
+                            >
+                              <div className='cursor-pointer rounded-md p-1 hover:bg-black/5' onClick={() => {
+                                setCurrentTool(item as any)
+                                setIsShowSettingTool(true)
+                              }}>
+                                <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
+                              </div>
+                            </Tooltip>
+                          )}
+                          <div
+                            className='cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive'
+                            onClick={() => {
+                              const newModelConfig = produce(modelConfig, (draft) => {
+                                draft.agentConfig.tools.splice(item.__index, 1)
+                              })
+                              setModelConfig(newModelConfig)
+                              formattingChangedDispatcher()
+                            }}
+                            onMouseOver={() => setIsDeleting(item.__index)}
+                            onMouseLeave={() => setIsDeleting(-1)}
+                          >
+                            <RiDeleteBinLine className='h-4 w-4' />
+                          </div>
+                        </div>
+                      )}
+                      <div className={cn(item.isDeleted && 'opacity-50')}>
+                        {!item.notAuthor && (
+                          <Switch
+                            defaultValue={item.isDeleted ? false : item.enabled}
+                            disabled={item.isDeleted}
+                            size='md'
+                            onChange={(enabled) => {
+                              const newModelConfig = produce(modelConfig, (draft) => {
+                                (draft.agentConfig.tools[item.__index] as any).enabled = enabled
+                              })
+                              setModelConfig(newModelConfig)
+                              formattingChangedDispatcher()
+                            }} />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
               </div>
             </div>
           ))}
-        </div >
+        </div>
       </Panel >
       {isShowSettingTool && (
         <SettingBuiltInTool