Merge branch 'feat/end-user-oauth' into deploy/end-user-oauth

# Conflicts:
#	web/app/components/app/configuration/config/agent/agent-tools/index.tsx

.github/workflows/deploy-end-user-dev.yml

@@ -0,0 +1,28 @@
+name: Deploy Trigger Dev
+
+permissions:
+  contents: read
+
+on:
+  workflow_run:
+    workflows: ["Build and Push API & Web"]
+    branches:
+      - "deploy/end-user-oauth"
+    types:
+      - completed
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: |
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.head_branch == 'deploy/end-user-oauth'
+    steps:
+      - name: Deploy to server
+        uses: appleboy/ssh-action@v0.1.8
+        with:
+          host: ${{ secrets.TRIGGER_SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          script: |
+            ${{ vars.SSH_SCRIPT || secrets.SSH_SCRIPT }}

api/core/tools/entities/tool_entities.py

@@ -123,6 +123,16 @@ class ApiProviderAuthType(StrEnum):
         raise ValueError(f"invalid mode value '{value}', expected one of: {valid}")
 
 
+class ToolAuthType(StrEnum):
+    """
+    Enum class for tool authentication type.
+    Determines whether OAuth credentials are workspace-level or end-user-level.
+    """
+
+    WORKSPACE = "workspace"
+    END_USER = "end_user"
+
+
 class ToolInvokeMessage(BaseModel):
     class TextMessage(BaseModel):
         text: str

api/core/workflow/nodes/tool/entities.py

@@ -3,7 +3,7 @@ from typing import Any, Literal, Union
 from pydantic import BaseModel, field_validator
 from pydantic_core.core_schema import ValidationInfo
 
-from core.tools.entities.tool_entities import ToolProviderType
+from core.tools.entities.tool_entities import ToolAuthType, ToolProviderType
 from core.workflow.nodes.base.entities import BaseNodeData
 
 
@@ -16,6 +16,7 @@ class ToolEntity(BaseModel):
     tool_configurations: dict[str, Any]
     credential_id: str | None = None
     plugin_unique_identifier: str | None = None  # redundancy
+    auth_type: ToolAuthType = ToolAuthType.WORKSPACE  # OAuth authentication level
 
     @field_validator("tool_configurations", mode="before")
     @classmethod

api/migrations/versions/2025_11_18_1400-a7b4e8f2c9d1_add_enduser_authentication_provider.py

@@ -0,0 +1,71 @@
+"""add enduser authentication provider
+
+Revision ID: a7b4e8f2c9d1
+Revises: fecff1c3da27
+Create Date: 2025-11-18 14:00:00.000000
+
+"""
+import models as models
+import sqlalchemy as sa
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "a7b4e8f2c9d1"
+down_revision = "fecff1c3da27"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table(
+        "tool_enduser_authentication_providers",
+        sa.Column(
+            "id",
+            models.types.StringUUID(),
+            nullable=False,
+        ),
+        sa.Column(
+            "name",
+            sa.String(length=256),
+            server_default="API KEY 1",
+            nullable=False,
+        ),
+        sa.Column("tenant_id", models.types.StringUUID(), nullable=False),
+        sa.Column("end_user_id", models.types.StringUUID(), nullable=False),
+        sa.Column("provider", sa.Text(), nullable=False),
+        sa.Column("encrypted_credentials", sa.Text(), default="", nullable=False),
+        sa.Column(
+            "created_at",
+            sa.DateTime(),
+            server_default=sa.func.current_timestamp(),
+            nullable=False,
+        ),
+        sa.Column(
+            "updated_at",
+            sa.DateTime(),
+            server_default=sa.func.current_timestamp(),
+            nullable=False,
+        ),
+        sa.Column(
+            "credential_type",
+            sa.String(length=32),
+            server_default="api-key",
+            nullable=False,
+        ),
+        sa.Column("expires_at", sa.BigInteger(), server_default=sa.text("-1"), nullable=False),
+        sa.PrimaryKeyConstraint("id"),
+        sa.UniqueConstraint(
+            "end_user_id",
+            "provider",
+        ),
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table("tool_enduser_authentication_providers")
+    # ### end Alembic commands ###
+
+

api/models/__init__.py

@@ -80,6 +80,7 @@ from .task import CeleryTask, CeleryTaskSet
 from .tools import (
     ApiToolProvider,
     BuiltinToolProvider,
+    EndUserAuthenticationProvider,
     ToolConversationVariables,
     ToolFile,
     ToolLabelBinding,
@@ -149,6 +150,7 @@ __all__ = [
     "DocumentSegment",
     "Embedding",
     "EndUser",
+    "EndUserAuthenticationProvider",
     "ExternalKnowledgeApis",
     "ExternalKnowledgeBindings",
     "IconType",

api/models/tools.py

@@ -9,9 +9,11 @@ from deprecated import deprecated
 from sqlalchemy import ForeignKey, String, func
 from sqlalchemy.orm import Mapped, mapped_column
 
+from core.plugin.entities.plugin_daemon import CredentialType
 from core.tools.entities.common_entities import I18nObject
 from core.tools.entities.tool_bundle import ApiToolBundle
 from core.tools.entities.tool_entities import ApiProviderSchemaType, WorkflowToolParameterConfiguration
+from libs.uuid_utils import uuidv7
 
 from .base import TypeBase
 from .engine import db
@@ -115,6 +117,59 @@ class BuiltinToolProvider(TypeBase):
         return cast(dict[str, Any], json.loads(self.encrypted_credentials))
 
 
+class EndUserAuthenticationProvider(TypeBase):
+    """
+    This table stores the authentication credentials for end users in tools.
+    Mimics the BuiltinToolProvider structure but for end users instead of tenants.
+    """
+
+    __tablename__ = "tool_enduser_authentication_providers"
+    __table_args__ = (
+        sa.UniqueConstraint("end_user_id", "provider"),
+    )
+
+    # id of the authentication provider
+    id: Mapped[str] = mapped_column(StringUUID, primary_key=True, default=lambda: str(uuidv7()), init=False)
+    # id of the tenant
+    tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    # id of the end user
+    end_user_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    # name of the tool provider
+    provider: Mapped[str] = mapped_column(LongText, nullable=False)
+    name: Mapped[str] = mapped_column(
+        String(256),
+        nullable=False,
+        default="API KEY 1",
+    )
+    # encrypted credentials for the end user
+    encrypted_credentials: Mapped[str] = mapped_column(LongText, nullable=False, default="")
+    created_at: Mapped[datetime] = mapped_column(
+        sa.DateTime, nullable=False, server_default=func.current_timestamp(), init=False
+    )
+    updated_at: Mapped[datetime] = mapped_column(
+        sa.DateTime,
+        nullable=False,
+        server_default=func.current_timestamp(),
+        onupdate=func.current_timestamp(),
+        init=False,
+    )
+    # credential type, e.g., "api-key", "oauth2"
+    credential_type: Mapped[CredentialType] = mapped_column(
+        String(32), nullable=False, default=CredentialType.API_KEY
+    )
+    # Unix timestamp in seconds since epoch (1970-01-01 UTC); -1 indicates no expiration
+    expires_at: Mapped[int] = mapped_column(sa.BigInteger, nullable=False, default=-1)
+
+    @property
+    def credentials(self) -> dict[str, Any]:
+        if not self.encrypted_credentials:
+            return {}
+        try:
+            return cast(dict[str, Any], json.loads(self.encrypted_credentials))
+        except json.JSONDecodeError:
+            return {}
+
+
 class ApiToolProvider(TypeBase):
     """
     The table stores the api providers.

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)

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -6,6 +6,7 @@ import { useContext } from 'use-context-selector'
 import copy from 'copy-to-clipboard'
 import { produce } from 'immer'
 import {
+  RiArrowDownSLine,
   RiDeleteBinLine,
   RiEqualizer2Line,
   RiInformation2Line,
@@ -24,7 +25,6 @@ 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'
@@ -32,8 +32,9 @@ import { canFindTool } from '@/utils'
 import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { useMittContextSelector } from '@/context/mitt-context'
+import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
 
-type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection } | null
+type AgentToolWithMoreInfo = (AgentTool & { icon: any; collection?: Collection; use_end_user_credentials?: boolean; end_user_credential_type?: string }) | null
 const AgentTools: FC = () => {
   const { t } = useTranslation()
   const [isShowChooseTool, setIsShowChooseTool] = useState(false)
@@ -92,6 +93,13 @@ const AgentTools: FC = () => {
   }
 
   const [isDeleting, setIsDeleting] = useState<number>(-1)
+  const [expandedProviders, setExpandedProviders] = useState<Record<string, boolean>>({})
+  const toggleProviderExpand = useCallback((providerId: string) => {
+    setExpandedProviders(prev => ({
+      ...prev,
+      [providerId]: !prev[providerId],
+    }))
+  }, [])
   const getToolValue = (tool: ToolDefaultValue) => {
     return {
       provider_id: tool.provider_id,
@@ -102,7 +110,9 @@ const AgentTools: FC = () => {
       tool_parameters: tool.params,
       notAuthor: !tool.is_team_authorization,
       enabled: true,
-    }
+      use_end_user_credentials: false,
+      end_user_credential_type: '',
+    } as any
   }
   const handleSelectTool = (tool: ToolDefaultValue) => {
     const newModelConfig = produce(modelConfig, (draft) => {
@@ -138,6 +148,34 @@ const AgentTools: FC = () => {
     formattingChangedDispatcher()
   }, [currentTool, modelConfig, setModelConfig, formattingChangedDispatcher])
 
+  const handleEndUserCredentialChange = useCallback((enabled: boolean) => {
+    const newModelConfig = produce(modelConfig, (draft) => {
+      const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === currentTool?.provider_id)
+      if (tool)
+        (tool as AgentTool).use_end_user_credentials = enabled
+    })
+    setCurrentTool({
+      ...currentTool,
+      use_end_user_credentials: enabled,
+    } as any)
+    setModelConfig(newModelConfig)
+    formattingChangedDispatcher()
+  }, [currentTool, modelConfig, setModelConfig, formattingChangedDispatcher])
+
+  const handleEndUserCredentialTypeChange = useCallback((type: string) => {
+    const newModelConfig = produce(modelConfig, (draft) => {
+      const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === currentTool?.provider_id)
+      if (tool)
+        (tool as AgentTool).end_user_credential_type = type
+    })
+    setCurrentTool({
+      ...currentTool,
+      end_user_credential_type: type,
+    } as any)
+    setModelConfig(newModelConfig)
+    formattingChangedDispatcher()
+  }, [currentTool, modelConfig, setModelConfig, formattingChangedDispatcher])
+
   return (
     <>
       <Panel
@@ -177,135 +215,307 @@ 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='rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-2 shadow-xs'
             >
-              <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
+              <div
+                className='flex cursor-pointer items-center gap-2 px-1'
+                onClick={() => toggleProviderExpand(group.providerId)}
+              >
+                <RiArrowDownSLine
                   className={cn(
-                    'system-xs-regular ml-1.5 flex w-0 grow items-center truncate',
-                    (item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
+                    'h-4 w-4 shrink-0 text-text-tertiary transition-transform',
+                    !expandedProviders[group.providerId] && '-rotate-90',
                   )}
-                >
-                  <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>
-              </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>
+                />
+                {typeof group.icon === 'string'
+                  ? <div className='h-5 w-5 shrink-0 rounded-md bg-cover bg-center' style={{ backgroundImage: `url(${group.icon})` }} />
+                  : <AppIcon className='shrink-0 rounded-md' size='xs' icon={group.icon?.content} background={group.icon?.background} />}
+                <div className='system-sm-semibold truncate text-text-secondary'>{group.providerName}</div>
+                <div className='ml-auto flex shrink-0 items-center gap-2'>
+                  <div className='system-xs-regular text-text-tertiary'>
+                    {group.tools.filter(tool => tool.enabled).length}/{group.tools.length}&nbsp;{t('appDebug.agent.tools.enabled')}
                   </div>
-                )}
-                {!item.isDeleted && (
-                  <div className='mr-2 hidden items-center gap-1 group-hover:flex'>
-                    {!item.notAuthor && (
-                      <Tooltip
-                        popupContent={t('tools.setBuiltInTools.infoAndSetting')}
-                        needsDelay={false}
-                      >
-                        <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()
+                  {group.tools.every(tool => tool.notAuthor) && (
+                    <Button
+                      variant='secondary'
+                      size='small'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        const first = group.tools[0]
+                        setCurrentTool(first as any)
+                        setIsShowSettingTool(true)
                       }}
-                      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)
-                      setIsShowSettingTool(true)
-                    }}>
                       {t('tools.notAuthorized')}
                       <Indicator className='ml-2' color='orange' />
                     </Button>
                   )}
                 </div>
               </div>
+              <div className={cn('space-y-1', expandedProviders[group.providerId] ? 'mt-1' : 'hidden')}>
+                {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',
+                    )}
+                  >
+                    <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 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='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>
+                    </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')}
+                              needsDelay={false}
+                            >
+                              <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)
+                            setIsShowSettingTool(true)
+                          }}>
+                            {t('tools.notAuthorized')}
+                            <Indicator className='ml-2' color='orange' />
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
             </div>
           ))}
-        </div >
-      </Panel >
+        </div>
+      </Panel>
       {isShowSettingTool && (
         <SettingBuiltInTool
           toolName={currentTool?.tool_name as string}
@@ -316,6 +526,10 @@ const AgentTools: FC = () => {
           onHide={() => setIsShowSettingTool(false)}
           credentialId={currentTool?.credential_id}
           onAuthorizationItemClick={handleAuthorizationItemClick}
+          useEndUserCredentialEnabled={currentTool?.use_end_user_credentials}
+          endUserCredentialType={currentTool?.end_user_credential_type}
+          onEndUserCredentialChange={handleEndUserCredentialChange}
+          onEndUserCredentialTypeChange={handleEndUserCredentialTypeChange}
         />
       )}
     </>

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

@@ -42,6 +42,10 @@ type Props = {
   onSave?: (value: Record<string, any>) => void
   credentialId?: string
   onAuthorizationItemClick?: (id: string) => void
+  useEndUserCredentialEnabled?: boolean
+  endUserCredentialType?: string
+  onEndUserCredentialChange?: (enabled: boolean) => void
+  onEndUserCredentialTypeChange?: (type: string) => void
 }
 
 const SettingBuiltInTool: FC<Props> = ({
@@ -56,6 +60,10 @@ const SettingBuiltInTool: FC<Props> = ({
   onSave,
   credentialId,
   onAuthorizationItemClick,
+  useEndUserCredentialEnabled,
+  endUserCredentialType,
+  onEndUserCredentialChange,
+  onEndUserCredentialTypeChange,
 }) => {
   const { locale } = useContext(I18n)
   const language = getLanguage(locale)
@@ -220,6 +228,10 @@ const SettingBuiltInTool: FC<Props> = ({
                     }}
                     credentialId={credentialId}
                     onAuthorizationItemClick={onAuthorizationItemClick}
+                    useEndUserCredentialEnabled={useEndUserCredentialEnabled}
+                    endUserCredentialType={endUserCredentialType}
+                    onEndUserCredentialChange={onEndUserCredentialChange}
+                    onEndUserCredentialTypeChange={onEndUserCredentialTypeChange}
                   />
                 )
               }

web/app/components/base/chat/chat-with-history/chat-wrapper.tsx

@@ -24,6 +24,10 @@ import cn from '@/utils/classnames'
 import type { FileEntity } from '../../file-uploader/types'
 import { formatBooleanInputs } from '@/utils/model-config'
 import Avatar from '../../avatar'
+import ServiceConnectionPanel from '@/app/components/base/service-connection-panel'
+import type { AuthType, ServiceConnectionItem as ServiceConnectionItemType } from '@/app/components/base/service-connection-panel'
+import { Notion } from '@/app/components/base/icons/src/public/common'
+import { Google } from '@/app/components/base/icons/src/public/plugins'
 
 const ChatWrapper = () => {
   const {
@@ -167,6 +171,53 @@ const ChatWrapper = () => {
 
   const [collapsed, setCollapsed] = useState(!!currentConversationId)
 
+  // Demo: Service connection state
+  const [serviceConnections, setServiceConnections] = useState<ServiceConnectionItemType[]>([
+    {
+      id: 'notion',
+      name: 'Notion Page Search',
+      icon: <Notion className="h-6 w-6" />,
+      authType: 'oauth',
+      status: 'pending',
+    },
+    {
+      id: 'gmail',
+      name: 'Gmail Tools',
+      icon: <img src="https://www.gstatic.com/images/branding/product/1x/gmail_2020q4_32dp.png" alt="Gmail" className="h-6 w-6" />,
+      authType: 'oauth',
+      status: 'pending',
+    },
+    {
+      id: 'youtube',
+      name: 'YouTube Data Upload',
+      icon: <img src="https://www.youtube.com/s/desktop/f506bd45/img/favicon_32x32.png" alt="YouTube" className="h-6 w-6" />,
+      authType: 'oauth',
+      status: 'pending',
+    },
+    {
+      id: 'google-serp',
+      name: 'Google SerpApi Search',
+      icon: <Google className="h-6 w-6" />,
+      authType: 'api_key',
+      status: 'pending',
+    },
+  ])
+
+  const [showServiceConnection, setShowServiceConnection] = useState(true)
+
+  const handleServiceConnect = useCallback((serviceId: string, _authType: AuthType) => {
+    // Demo: 模拟连接成功
+    setServiceConnections(prev => prev.map(service =>
+      service.id === serviceId
+        ? { ...service, status: 'connected' as const }
+        : service,
+    ))
+  }, [])
+
+  const handleServiceContinue = useCallback(() => {
+    setShowServiceConnection(false)
+  }, [])
+
   const chatNode = useMemo(() => {
     if (allInputsHidden || !inputsForms.length)
       return null
@@ -253,6 +304,23 @@ const ChatWrapper = () => {
     />
     : null
 
+  // 如果需要显示服务连接面板，则显示面板而非聊天界面
+  if (showServiceConnection) {
+    return (
+      <div className={cn(
+        'flex h-full items-center justify-center overflow-auto bg-chatbot-bg',
+        isMobile && 'px-4 py-8',
+      )}>
+        <ServiceConnectionPanel
+          services={serviceConnections}
+          onConnect={handleServiceConnect}
+          onContinue={handleServiceContinue}
+          className={cn(isMobile && 'max-w-full')}
+        />
+      </div>
+    )
+  }
+
   return (
     <div
       className='h-full overflow-hidden bg-chatbot-bg'

web/app/components/base/service-connection-panel/index.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import type { FC } from 'react'
+import { memo, useMemo } from 'react'
+import { RiArrowRightLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import ServiceItem from './service-item'
+import type { ServiceConnectionPanelProps } from './types'
+import cn from '@/utils/classnames'
+
+const ServiceConnectionPanel: FC<ServiceConnectionPanelProps> = ({
+  title,
+  description,
+  services,
+  onConnect,
+  onContinue,
+  continueDisabled,
+  continueText,
+  className,
+}) => {
+  const { t } = useTranslation()
+
+  const allConnected = useMemo(() => {
+    return services.every(service => service.status === 'connected')
+  }, [services])
+
+  const displayTitle = title || t('share.serviceConnection.title')
+  const displayDescription = description || t('share.serviceConnection.description', { count: services.length })
+
+  return (
+    <div className={cn(
+      'flex w-full max-w-[600px] flex-col items-center',
+      className,
+    )}>
+      <div className="mb-6 text-center">
+        <h2 className="system-xl-semibold mb-1 text-text-primary">
+          {displayTitle}
+        </h2>
+        <p className="system-sm-regular text-text-tertiary">
+          {displayDescription}
+        </p>
+      </div>
+
+      <div className="w-full space-y-2">
+        {services.map(service => (
+          <ServiceItem
+            key={service.id}
+            service={service}
+            onConnect={onConnect}
+          />
+        ))}
+      </div>
+
+      {onContinue && (
+        <div className="mt-6 flex w-full justify-end">
+          <Button
+            variant="primary"
+            disabled={continueDisabled ?? !allConnected}
+            onClick={onContinue}
+          >
+            {continueText || t('share.serviceConnection.continue')}
+            <RiArrowRightLine className="ml-1 h-4 w-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default memo(ServiceConnectionPanel)
+
+export { default as ServiceItem } from './service-item'
+export type {
+  ServiceConnectionPanelProps,
+  ServiceConnectionItem,
+  AuthType,
+  ServiceConnectionStatus,
+} from './types'

web/app/components/base/service-connection-panel/service-item.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import type { FC } from 'react'
+import { memo } from 'react'
+import { RiAddLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import type { AuthType, ServiceConnectionItem } from './types'
+import cn from '@/utils/classnames'
+
+type ServiceItemProps = {
+  service: ServiceConnectionItem
+  onConnect: (serviceId: string, authType: AuthType) => void
+}
+
+const ServiceItem: FC<ServiceItemProps> = ({
+  service,
+  onConnect,
+}) => {
+  const { t } = useTranslation()
+
+  const handleConnect = () => {
+    onConnect(service.id, service.authType)
+  }
+
+  const getButtonText = () => {
+    if (service.status === 'connected')
+      return t('share.serviceConnection.connected')
+
+    if (service.authType === 'api_key')
+      return t('share.serviceConnection.addApiKey')
+
+    return t('share.serviceConnection.connect')
+  }
+
+  const isConnected = service.status === 'connected'
+
+  return (
+    <div className={cn(
+      'flex items-center justify-between gap-3 rounded-xl border border-components-panel-border-subtle bg-components-panel-bg px-4 py-3',
+      'hover:border-components-panel-border hover:shadow-xs',
+      'transition-all duration-200',
+    )}>
+      <div className="flex items-center gap-3">
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center">
+          {service.icon}
+        </div>
+        <div className="flex flex-col">
+          <span className="system-sm-medium text-text-secondary">
+            {service.name}
+          </span>
+          {service.description && (
+            <span className="system-xs-regular text-text-tertiary">
+              {service.description}
+            </span>
+          )}
+        </div>
+      </div>
+      <Button
+        variant={isConnected ? 'secondary' : 'secondary-accent'}
+        size="small"
+        onClick={handleConnect}
+        disabled={isConnected}
+      >
+        {!isConnected && <RiAddLine className="mr-0.5 h-3.5 w-3.5" />}
+        {getButtonText()}
+      </Button>
+    </div>
+  )
+}
+
+export default memo(ServiceItem)

web/app/components/base/service-connection-panel/types.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+export type AuthType = 'oauth' | 'api_key'
+
+export type ServiceConnectionStatus = 'pending' | 'connected' | 'error'
+
+export type ServiceConnectionItem = {
+  id: string
+  name: string
+  icon: ReactNode
+  authType: AuthType
+  status: ServiceConnectionStatus
+  description?: string
+}
+
+export type ServiceConnectionPanelProps = {
+  title?: string
+  description?: string
+  services: ServiceConnectionItem[]
+  onConnect: (serviceId: string, authType: AuthType) => void
+  onContinue?: () => void
+  continueDisabled?: boolean
+  continueText?: string
+  className?: string
+}

web/app/components/plugins/plugin-auth/credential-config-header.tsx

@@ -0,0 +1,116 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import {
+  RiAddLine,
+  RiKey2Line,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import AddOAuthButton from './authorize/add-oauth-button'
+import AddApiKeyButton from './authorize/add-api-key-button'
+import type { PluginPayload } from './types'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+export type CredentialConfigHeaderProps = {
+  pluginPayload: PluginPayload
+  canOAuth?: boolean
+  canApiKey?: boolean
+  hasOAuthClientConfigured?: boolean
+  disabled?: boolean
+  onCredentialAdded?: () => void
+  onAddMenuOpenChange?: (open: boolean) => void
+}
+
+const CredentialConfigHeader = ({
+  pluginPayload,
+  canOAuth,
+  canApiKey,
+  hasOAuthClientConfigured,
+  disabled,
+  onCredentialAdded,
+  onAddMenuOpenChange,
+}: CredentialConfigHeaderProps) => {
+  const { t } = useTranslation()
+  const [showAddMenu, setShowAddMenu] = useState(false)
+
+  const handleAddMenuOpenChange = (open: boolean) => {
+    setShowAddMenu(open)
+    onAddMenuOpenChange?.(open)
+  }
+
+  const addButtonDisabled = disabled || (!canOAuth && !canApiKey && !hasOAuthClientConfigured)
+
+  return (
+    <div className='flex items-start justify-between gap-2'>
+      <div className='flex items-start gap-2'>
+        <RiKey2Line className='mt-0.5 h-4 w-4 text-text-tertiary' />
+        <div className='space-y-0.5'>
+          <div className='system-md-semibold text-text-primary'>
+            {t('plugin.auth.configuredCredentials.title')}
+          </div>
+          <div className='system-xs-regular text-text-tertiary'>
+            {t('plugin.auth.configuredCredentials.desc')}
+          </div>
+        </div>
+      </div>
+      <PortalToFollowElem
+        open={showAddMenu}
+        onOpenChange={handleAddMenuOpenChange}
+        placement='bottom-end'
+        offset={6}
+      >
+        <PortalToFollowElemTrigger asChild>
+          <button
+            type='button'
+            className={cn(
+              'flex h-9 w-9 items-center justify-center rounded-full bg-primary-600 text-white hover:bg-primary-700',
+              addButtonDisabled && 'pointer-events-none opacity-50',
+            )}
+            onClick={() => handleAddMenuOpenChange(!showAddMenu)}
+          >
+            <RiAddLine className='h-5 w-5' />
+          </button>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[120]'>
+          <div className='w-[220px] rounded-xl border border-components-panel-border bg-components-panel-bg shadow-lg'>
+            <div className='flex flex-col gap-1 p-1'>
+              {canOAuth && (
+                <AddOAuthButton
+                  pluginPayload={pluginPayload}
+                  buttonVariant='ghost'
+                  className='w-full justify-between bg-transparent text-text-primary hover:bg-transparent'
+                  buttonText={t('plugin.auth.addOAuth')}
+                  disabled={disabled}
+                  onUpdate={() => {
+                    setShowAddMenu(false)
+                    onCredentialAdded?.()
+                  }}
+                />
+              )}
+              {canApiKey && (
+                <AddApiKeyButton
+                  pluginPayload={pluginPayload}
+                  buttonVariant='ghost'
+                  buttonText={t('plugin.auth.addApi')}
+                  disabled={disabled}
+                  onUpdate={() => {
+                    setShowAddMenu(false)
+                    onCredentialAdded?.()
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </div>
+  )
+}
+
+export default memo(CredentialConfigHeader)

web/app/components/plugins/plugin-auth/end-user-credential-section.tsx

@@ -0,0 +1,176 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import type { ReactNode } from 'react'
+import {
+  RiArrowDownSLine,
+  RiEqualizer2Line,
+  RiKey2Line,
+  RiUserStarLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import AddOAuthButton from './authorize/add-oauth-button'
+import AddApiKeyButton from './authorize/add-api-key-button'
+import type { PluginPayload } from './types'
+import cn from '@/utils/classnames'
+import Switch from '@/app/components/base/switch'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+export type EndUserCredentialSectionProps = {
+  pluginPayload: PluginPayload
+  canOAuth?: boolean
+  canApiKey?: boolean
+  disabled?: boolean
+  useEndUserCredentialEnabled?: boolean
+  endUserCredentialType?: string
+  onEndUserCredentialChange?: (enabled: boolean) => void
+  onEndUserCredentialTypeChange?: (type: string) => void
+  onCredentialAdded?: () => void
+  className?: string
+}
+
+const EndUserCredentialSection = ({
+  pluginPayload,
+  canOAuth,
+  canApiKey,
+  disabled,
+  useEndUserCredentialEnabled,
+  endUserCredentialType,
+  onEndUserCredentialChange,
+  onEndUserCredentialTypeChange,
+  onCredentialAdded,
+  className,
+}: EndUserCredentialSectionProps) => {
+  const { t } = useTranslation()
+  const [showEndUserTypeMenu, setShowEndUserTypeMenu] = useState(false)
+
+  const availableEndUserTypes = useMemo(() => {
+    const list: { value: string; label: string; icon: ReactNode }[] = []
+    if (canOAuth) {
+      list.push({
+        value: 'oauth2',
+        label: t('plugin.auth.endUserCredentials.optionOAuth'),
+        icon: <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />,
+      })
+    }
+    if (canApiKey) {
+      list.push({
+        value: 'api-key',
+        label: t('plugin.auth.endUserCredentials.optionApiKey'),
+        icon: <RiKey2Line className='h-4 w-4 text-text-tertiary' />,
+      })
+    }
+    return list
+  }, [canOAuth, canApiKey, t])
+
+  const endUserCredentialLabel = useMemo(() => {
+    const found = availableEndUserTypes.find(item => item.value === endUserCredentialType)
+    return found?.label || availableEndUserTypes[0]?.label || '-'
+  }, [availableEndUserTypes, endUserCredentialType])
+
+  useEffect(() => {
+    if (!useEndUserCredentialEnabled)
+      return
+    if (!availableEndUserTypes.length)
+      return
+    const isValid = availableEndUserTypes.some(item => item.value === endUserCredentialType)
+    if (!isValid)
+      onEndUserCredentialTypeChange?.(availableEndUserTypes[0].value)
+  }, [useEndUserCredentialEnabled, endUserCredentialType, availableEndUserTypes, onEndUserCredentialTypeChange])
+
+  const handleSelectEndUserType = useCallback((value: string) => {
+    onEndUserCredentialTypeChange?.(value)
+    setShowEndUserTypeMenu(false)
+  }, [onEndUserCredentialTypeChange])
+
+  return (
+    <div className={cn('flex items-start gap-3', className)}>
+      <RiUserStarLine className='mt-0.5 h-4 w-4 shrink-0 text-text-tertiary' />
+      <div className='flex-1 space-y-3'>
+        <div className='flex items-center justify-between gap-3'>
+          <div className='space-y-1'>
+            <div className='system-sm-semibold text-text-primary'>
+              {t('plugin.auth.endUserCredentials.title')}
+            </div>
+            <div className='system-xs-regular text-text-tertiary'>
+              {t('plugin.auth.endUserCredentials.desc')}
+            </div>
+          </div>
+          <Switch
+            size='md'
+            defaultValue={!!useEndUserCredentialEnabled}
+            onChange={onEndUserCredentialChange}
+            disabled={disabled}
+          />
+        </div>
+        {
+          useEndUserCredentialEnabled && availableEndUserTypes.length > 0 && (
+            <div className='flex items-center justify-between gap-3'>
+              <div className='system-sm-semibold text-text-primary'>
+                {t('plugin.auth.endUserCredentials.typeLabel')}
+              </div>
+              <PortalToFollowElem
+                open={showEndUserTypeMenu}
+                onOpenChange={setShowEndUserTypeMenu}
+                placement='bottom-end'
+                offset={6}
+              >
+                <PortalToFollowElemTrigger asChild>
+                  <button
+                    type='button'
+                    className='border-components-input-border flex h-9 min-w-[190px] items-center justify-between rounded-lg border bg-components-input-bg-normal px-3 text-left text-text-primary shadow-xs hover:bg-components-input-bg-hover'
+                    onClick={() => setShowEndUserTypeMenu(v => !v)}
+                  >
+                    <span className='system-sm-semibold'>{endUserCredentialLabel}</span>
+                    <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
+                  </button>
+                </PortalToFollowElemTrigger>
+                <PortalToFollowElemContent className='z-[120]'>
+                  <div className='w-[220px] rounded-xl border border-components-panel-border bg-components-panel-bg shadow-lg'>
+                    <div className='flex flex-col gap-1 p-1'>
+                      {canOAuth && (
+                        <AddOAuthButton
+                          pluginPayload={pluginPayload}
+                          buttonVariant='ghost'
+                          className='w-full justify-between bg-transparent text-text-primary hover:bg-transparent'
+                          buttonText={t('plugin.auth.addOAuth')}
+                          disabled={disabled}
+                          onUpdate={() => {
+                            handleSelectEndUserType('oauth2')
+                            onCredentialAdded?.()
+                          }}
+                        />
+                      )}
+                      {canApiKey && (
+                        <AddApiKeyButton
+                          pluginPayload={pluginPayload}
+                          buttonVariant='ghost'
+                          buttonText={t('plugin.auth.addApi')}
+                          disabled={disabled}
+                          onUpdate={() => {
+                            handleSelectEndUserType('api-key')
+                            onCredentialAdded?.()
+                          }}
+                        />
+                      )}
+                    </div>
+                  </div>
+                </PortalToFollowElemContent>
+              </PortalToFollowElem>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(EndUserCredentialSection)

web/app/components/plugins/plugin-auth/hooks/use-plugin-auth.ts

@@ -13,6 +13,7 @@ export const usePluginAuth = (pluginPayload: PluginPayload, enable?: boolean) =>
   const canOAuth = data?.supported_credential_types.includes(CredentialTypeEnum.OAUTH2)
   const canApiKey = data?.supported_credential_types.includes(CredentialTypeEnum.API_KEY)
   const invalidPluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
+  const hasOAuthClientConfigured = data?.is_oauth_custom_client_enabled
 
   return {
     isAuthorized,
@@ -22,5 +23,6 @@ export const usePluginAuth = (pluginPayload: PluginPayload, enable?: boolean) =>
     disabled: !isCurrentWorkspaceManager,
     notAllowCustomCredential: data?.allow_custom_token === false,
     invalidPluginCredentialInfo,
+    hasOAuthClientConfigured: !!hasOAuthClientConfigured,
   }
 }

web/app/components/plugins/plugin-auth/index.tsx

@@ -2,6 +2,10 @@ export { default as PluginAuth } from './plugin-auth'
 export { default as Authorized } from './authorized'
 export { default as AuthorizedInNode } from './authorized-in-node'
 export { default as PluginAuthInAgent } from './plugin-auth-in-agent'
+export { default as CredentialConfigHeader } from './credential-config-header'
+export type { CredentialConfigHeaderProps } from './credential-config-header'
+export { default as EndUserCredentialSection } from './end-user-credential-section'
+export type { EndUserCredentialSectionProps } from './end-user-credential-section'
 export { usePluginAuth } from './hooks/use-plugin-auth'
 export { default as PluginAuthInDataSourceNode } from './plugin-auth-in-datasource-node'
 export { default as AuthorizedInDataSourceNode } from './authorized-in-data-source-node'

web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx

@@ -3,10 +3,14 @@ import {
   useCallback,
   useState,
 } from 'react'
-import { RiArrowDownSLine } from '@remixicon/react'
+import {
+  RiArrowDownSLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Authorize from './authorize'
 import Authorized from './authorized'
+import CredentialConfigHeader from './credential-config-header'
+import EndUserCredentialSection from './end-user-credential-section'
 import type {
   Credential,
   PluginPayload,
@@ -20,11 +24,19 @@ type PluginAuthInAgentProps = {
   pluginPayload: PluginPayload
   credentialId?: string
   onAuthorizationItemClick?: (id: string) => void
+  useEndUserCredentialEnabled?: boolean
+  endUserCredentialType?: string
+  onEndUserCredentialChange?: (enabled: boolean) => void
+  onEndUserCredentialTypeChange?: (type: string) => void
 }
 const PluginAuthInAgent = ({
   pluginPayload,
   credentialId,
   onAuthorizationItemClick,
+  useEndUserCredentialEnabled,
+  endUserCredentialType,
+  onEndUserCredentialChange,
+  onEndUserCredentialTypeChange,
 }: PluginAuthInAgentProps) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
@@ -36,8 +48,11 @@ const PluginAuthInAgent = ({
     disabled,
     invalidPluginCredentialInfo,
     notAllowCustomCredential,
+    hasOAuthClientConfigured,
   } = usePluginAuth(pluginPayload, true)
 
+  const configuredDisabled = !!useEndUserCredentialEnabled
+
   const extraAuthorizationItems: Credential[] = [
     {
       id: '__workspace_default__',
@@ -94,42 +109,87 @@ const PluginAuthInAgent = ({
     )
   }, [credentialId, credentials, t])
 
+  const shouldShowAuthorizeCard = !credentials.length && (canOAuth || canApiKey || hasOAuthClientConfigured)
+
   return (
-    <>
-      {
-        !isAuthorized && (
-          <Authorize
-            pluginPayload={pluginPayload}
-            canOAuth={canOAuth}
-            canApiKey={canApiKey}
-            disabled={disabled}
-            onUpdate={invalidPluginCredentialInfo}
-            notAllowCustomCredential={notAllowCustomCredential}
-          />
-        )
-      }
-      {
-        isAuthorized && (
-          <Authorized
-            pluginPayload={pluginPayload}
-            credentials={credentials}
-            canOAuth={canOAuth}
-            canApiKey={canApiKey}
-            disabled={disabled}
-            disableSetDefault
-            onItemClick={handleAuthorizationItemClick}
-            extraAuthorizationItems={extraAuthorizationItems}
-            showItemSelectedIcon
-            renderTrigger={renderTrigger}
-            isOpen={isOpen}
-            onOpenChange={setIsOpen}
-            selectedCredentialId={credentialId || '__workspace_default__'}
-            onUpdate={invalidPluginCredentialInfo}
-            notAllowCustomCredential={notAllowCustomCredential}
-          />
-        )
-      }
-    </>
+    <div className='border-components-panel-border bg-components-panel-bg'>
+      <div className={cn(configuredDisabled && 'pointer-events-none opacity-50')}>
+        <CredentialConfigHeader
+          pluginPayload={pluginPayload}
+          canOAuth={canOAuth}
+          canApiKey={canApiKey}
+          hasOAuthClientConfigured={hasOAuthClientConfigured}
+          disabled={disabled || configuredDisabled}
+          onCredentialAdded={invalidPluginCredentialInfo}
+        />
+      </div>
+      <div className={cn(configuredDisabled && 'pointer-events-none opacity-50')}>
+        {
+          !isAuthorized && shouldShowAuthorizeCard && (
+            <div className='rounded-xl bg-background-section px-4 py-4'>
+              <div className='flex w-full justify-center'>
+                <div className='w-full max-w-[520px]'>
+                  <Authorize
+                    pluginPayload={pluginPayload}
+                    canOAuth={canOAuth}
+                    canApiKey={canApiKey}
+                    disabled={disabled || configuredDisabled}
+                    onUpdate={invalidPluginCredentialInfo}
+                    notAllowCustomCredential={notAllowCustomCredential}
+                    theme='secondary'
+                    showDivider={!!(canOAuth && canApiKey)}
+                  />
+                </div>
+              </div>
+            </div>
+          )
+        }
+        {
+          !isAuthorized && !shouldShowAuthorizeCard && (
+            <Authorize
+              pluginPayload={pluginPayload}
+              canOAuth={canOAuth}
+              canApiKey={canApiKey}
+              disabled={disabled || configuredDisabled}
+              onUpdate={invalidPluginCredentialInfo}
+              notAllowCustomCredential={notAllowCustomCredential}
+            />
+          )
+        }
+        {
+          isAuthorized && (
+            <Authorized
+              pluginPayload={pluginPayload}
+              credentials={credentials}
+              canOAuth={canOAuth}
+              canApiKey={canApiKey}
+              disabled={disabled || configuredDisabled}
+              disableSetDefault
+              onItemClick={handleAuthorizationItemClick}
+              extraAuthorizationItems={extraAuthorizationItems}
+              showItemSelectedIcon
+              renderTrigger={renderTrigger}
+              isOpen={isOpen}
+              onOpenChange={setIsOpen}
+              selectedCredentialId={credentialId || '__workspace_default__'}
+              onUpdate={invalidPluginCredentialInfo}
+              notAllowCustomCredential={notAllowCustomCredential}
+            />
+          )
+        }
+      </div>
+      <EndUserCredentialSection
+        pluginPayload={pluginPayload}
+        canOAuth={canOAuth}
+        canApiKey={canApiKey}
+        disabled={disabled}
+        useEndUserCredentialEnabled={useEndUserCredentialEnabled}
+        endUserCredentialType={endUserCredentialType}
+        onEndUserCredentialChange={onEndUserCredentialChange}
+        onEndUserCredentialTypeChange={onEndUserCredentialTypeChange}
+        onCredentialAdded={invalidPluginCredentialInfo}
+      />
+    </div>
   )
 }
 

web/app/components/plugins/plugin-auth/plugin-auth.tsx

@@ -1,6 +1,26 @@
-import { memo } from 'react'
+import {
+  memo,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+  RiKey2Line,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
 import Authorize from './authorize'
 import Authorized from './authorized'
+import AddApiKeyButton from './authorize/add-api-key-button'
+import AddOAuthButton from './authorize/add-oauth-button'
+import EndUserCredentialSection from './end-user-credential-section'
+import Item from './authorized/item'
 import type { PluginPayload } from './types'
 import { usePluginAuth } from './hooks/use-plugin-auth'
 import cn from '@/utils/classnames'
@@ -9,12 +29,23 @@ type PluginAuthProps = {
   pluginPayload: PluginPayload
   children?: React.ReactNode
   className?: string
+  showConnectGuide?: boolean
+  endUserCredentialEnabled?: boolean
+  endUserCredentialType?: string
+  onEndUserCredentialTypeChange?: (type: string) => void
+  onEndUserCredentialChange?: (enabled: boolean) => void
 }
 const PluginAuth = ({
   pluginPayload,
   children,
   className,
+  showConnectGuide,
+  endUserCredentialEnabled,
+  endUserCredentialType,
+  onEndUserCredentialTypeChange,
+  onEndUserCredentialChange,
 }: PluginAuthProps) => {
+  const { t } = useTranslation()
   const {
     isAuthorized,
     canOAuth,
@@ -23,12 +54,205 @@ const PluginAuth = ({
     disabled,
     invalidPluginCredentialInfo,
     notAllowCustomCredential,
+    hasOAuthClientConfigured,
   } = usePluginAuth(pluginPayload, !!pluginPayload.provider)
+  const shouldShowGuide = !!showConnectGuide
+  const [showCredentialPanel, setShowCredentialPanel] = useState(false)
+  const [showAddMenu, setShowAddMenu] = useState(false)
+  const configuredDisabled = !!endUserCredentialEnabled
+  const shouldShowAuthorizeCard = useMemo(() => {
+    const hasCredential = credentials.length > 0
+    const canAdd = canOAuth || canApiKey || hasOAuthClientConfigured
+    return !hasCredential && canAdd
+  }, [credentials.length, canOAuth, canApiKey, hasOAuthClientConfigured])
+  const containerClassName = useMemo(() => {
+    if (showConnectGuide)
+      return className
+    return !isAuthorized ? className : undefined
+  }, [isAuthorized, className, showConnectGuide])
+
+  useEffect(() => {
+    if (isAuthorized)
+      setShowCredentialPanel(false)
+  }, [isAuthorized])
+
+  const credentialList = useMemo(() => {
+    return (
+      <div className={cn(!credentials.length ? 'mt-0' : 'mt-3')}>
+        {
+          credentials.length > 0
+            ? (
+              <div className='space-y-1'>
+                {credentials.map(credential => (
+                  <Item
+                    key={credential.id}
+                    credential={credential}
+                    disabled
+                    disableRename
+                    disableEdit
+                    disableDelete
+                    disableSetDefault
+                  />
+                ))}
+              </div>
+            )
+            : null
+        }
+      </div>
+    )
+  }, [credentials, t])
+
+  const endUserSwitch = (
+    <EndUserCredentialSection
+      className='px-4 py-3'
+      pluginPayload={pluginPayload}
+      canOAuth={canOAuth}
+      canApiKey={canApiKey}
+      disabled={disabled}
+      useEndUserCredentialEnabled={endUserCredentialEnabled}
+      endUserCredentialType={endUserCredentialType}
+      onEndUserCredentialChange={onEndUserCredentialChange}
+      onEndUserCredentialTypeChange={onEndUserCredentialTypeChange}
+      onCredentialAdded={invalidPluginCredentialInfo}
+    />
+  )
 
   return (
-    <div className={cn(!isAuthorized && className)}>
+    <div className={cn(containerClassName)}>
       {
-        !isAuthorized && (
+        shouldShowGuide && (
+          <PortalToFollowElem
+            open={showCredentialPanel}
+            onOpenChange={setShowCredentialPanel}
+            placement='bottom-start'
+            offset={8}
+            triggerPopupSameWidth
+          >
+            <PortalToFollowElemTrigger asChild>
+              <button
+                type='button'
+                className='flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-4 py-3 text-left text-white shadow-xs hover:bg-primary-700'
+                onClick={() => setShowCredentialPanel(v => !v)}
+              >
+                <div className='system-sm-semibold text-white'>
+                  {t('plugin.auth.connectCredentials')}
+                </div>
+                <RiArrowDownSLine
+                  className={cn(
+                    'h-4 w-4 text-white transition-transform',
+                    showCredentialPanel && 'rotate-180',
+                  )}
+                />
+              </button>
+            </PortalToFollowElemTrigger>
+            <PortalToFollowElemContent className='z-[100]'>
+              <div className='w-[420px] max-w-[calc(100vw-48px)] rounded-2xl border border-divider-subtle bg-components-panel-bg shadow-lg'>
+                <div className='border-b border-divider-subtle px-3 py-3'>
+                  <div className='flex items-start justify-between gap-2'>
+                    <div className='flex items-start gap-2'>
+                      <RiKey2Line className='mt-0.5 h-4 w-4 text-text-tertiary' />
+                      <div className='space-y-0.5'>
+                        <div className='system-md-semibold text-text-primary'>
+                          {t('plugin.auth.configuredCredentials.title')}
+                        </div>
+                        <div className='system-xs-regular text-text-tertiary'>
+                          {t('plugin.auth.configuredCredentials.desc')}
+                        </div>
+                      </div>
+                    </div>
+                    <PortalToFollowElem
+                      open={showAddMenu}
+                      onOpenChange={setShowAddMenu}
+                      placement='bottom-end'
+                      offset={6}
+                    >
+                      <PortalToFollowElemTrigger asChild>
+                        <button
+                          type='button'
+                          className={cn(
+                            'flex h-9 w-9 items-center justify-center rounded-full bg-primary-600 text-white hover:bg-primary-700',
+                            configuredDisabled && 'pointer-events-none opacity-50',
+                          )}
+                          onClick={() => {
+                            setShowCredentialPanel(true)
+                            setShowAddMenu(v => !v)
+                          }}
+                        >
+                          <RiAddLine className='h-5 w-5' />
+                        </button>
+                      </PortalToFollowElemTrigger>
+                      <PortalToFollowElemContent className='z-[120]'>
+                        <div className='w-[220px] rounded-xl border border-components-panel-border bg-components-panel-bg shadow-lg'>
+                          <div className='flex flex-col gap-1 p-1'>
+                            {
+                              canOAuth && (
+                                <AddOAuthButton
+                                  pluginPayload={pluginPayload}
+                                  buttonVariant='ghost'
+                                  className='w-full justify-between bg-transparent text-text-primary hover:bg-transparent'
+                                  buttonText={t('plugin.auth.addOAuth')}
+                                  disabled={disabled}
+                                  onUpdate={() => {
+                                    setShowAddMenu(false)
+                                    invalidPluginCredentialInfo()
+                                  }}
+                                />
+                              )
+                            }
+                            {
+                              canApiKey && (
+                                <AddApiKeyButton
+                                  pluginPayload={pluginPayload}
+                                  buttonVariant='ghost'
+                                  buttonText={t('plugin.auth.addApi')}
+                                  disabled={disabled}
+                                  onUpdate={() => {
+                                    setShowAddMenu(false)
+                                    invalidPluginCredentialInfo()
+                                  }}
+                                />
+                              )
+                            }
+                          </div>
+                        </div>
+                      </PortalToFollowElemContent>
+                    </PortalToFollowElem>
+                  </div>
+                  <div className={cn(configuredDisabled && 'pointer-events-none opacity-50')}>
+                    {credentialList}
+                  </div>
+                  {
+                    shouldShowAuthorizeCard && (
+                      <div className={cn(
+                        'mt-4 flex items-start gap-1.5 rounded-xl bg-background-section px-4 py-8',
+                        configuredDisabled && 'pointer-events-none opacity-50',
+                      )}>
+                        <div className='flex w-full justify-center'>
+                          <div className='w-full max-w-[520px]'>
+                            <Authorize
+                              pluginPayload={pluginPayload}
+                              canOAuth={canOAuth}
+                              canApiKey={canApiKey}
+                              disabled={disabled || configuredDisabled}
+                              onUpdate={invalidPluginCredentialInfo}
+                              notAllowCustomCredential={notAllowCustomCredential}
+                              theme='secondary'
+                              showDivider={!!(canOAuth && canApiKey)}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  }
+                </div>
+                {endUserSwitch}
+              </div>
+            </PortalToFollowElemContent>
+          </PortalToFollowElem>
+        )
+      }
+      {
+        !shouldShowGuide && !isAuthorized && (
           <Authorize
             pluginPayload={pluginPayload}
             canOAuth={canOAuth}

web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -210,6 +210,18 @@ const ToolSelector: FC<Props> = ({
       credential_id: id,
     } as any)
   }
+  const handleEndUserCredentialChange = (enabled: boolean) => {
+    onSelect({
+      ...value,
+      use_end_user_credentials: enabled,
+    } as any)
+  }
+  const handleEndUserCredentialTypeChange = (type: string) => {
+    onSelect({
+      ...value,
+      end_user_credential_type: type,
+    } as any)
+  }
 
   return (
     <>
@@ -323,6 +335,10 @@ const ToolSelector: FC<Props> = ({
                       }}
                       credentialId={value?.credential_id}
                       onAuthorizationItemClick={handleAuthorizationItemClick}
+                      useEndUserCredentialEnabled={value?.use_end_user_credentials}
+                      endUserCredentialType={value?.end_user_credential_type}
+                      onEndUserCredentialChange={handleEndUserCredentialChange}
+                      onEndUserCredentialTypeChange={handleEndUserCredentialTypeChange}
                     />
                   </div>
                 </>

web/app/components/workflow/block-selector/types.ts

@@ -56,6 +56,8 @@ export type ToolDefaultValue = PluginCommonDefaultValue & {
   paramSchemas: Record<string, any>[]
   output_schema?: Record<string, any>
   credential_id?: string
+  use_end_user_credentials?: boolean
+  end_user_credential_type?: string
   meta?: PluginMeta
   plugin_id?: string
   provider_icon?: Collection['icon']
@@ -87,6 +89,8 @@ export type ToolValue = {
   enabled?: boolean
   extra?: Record<string, any>
   credential_id?: string
+  use_end_user_credentials?: boolean
+  end_user_credential_type?: string
 }
 
 export type DataSourceItem = {

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -325,6 +325,22 @@ const BasePanel: FC<BasePanelProps> = ({
       },
     })
   }, [handleNodeDataUpdateWithSyncDraft, id])
+  const handleEndUserCredentialChange = useCallback((enabled: boolean) => {
+    handleNodeDataUpdateWithSyncDraft({
+      id,
+      data: {
+        use_end_user_credentials: enabled,
+      },
+    })
+  }, [handleNodeDataUpdateWithSyncDraft, id])
+  const handleEndUserCredentialTypeChange = useCallback((type: string) => {
+    handleNodeDataUpdateWithSyncDraft({
+      id,
+      data: {
+        end_user_credential_type: type,
+      },
+    })
+  }, [handleNodeDataUpdateWithSyncDraft, id])
 
   const { setShowAccountSettingModal } = useModalContext()
 
@@ -520,6 +536,11 @@ const BasePanel: FC<BasePanelProps> = ({
             needsToolAuth && (
               <PluginAuth
                 className='px-4 pb-2'
+                showConnectGuide
+                endUserCredentialEnabled={data.use_end_user_credentials}
+                endUserCredentialType={data.end_user_credential_type}
+                onEndUserCredentialChange={handleEndUserCredentialChange}
+                onEndUserCredentialTypeChange={handleEndUserCredentialTypeChange}
                 pluginPayload={{
                   provider: currToolCollection?.name || '',
                   providerType: currToolCollection?.type || '',

web/app/components/workflow/types.ts

@@ -103,6 +103,8 @@ export type CommonNodeType<T = {}> = {
   retry_config?: WorkflowRetryConfig
   default_value?: DefaultValueForm[]
   credential_id?: string
+  use_end_user_credentials?: boolean
+  end_user_credential_type?: string
   subscription_id?: string
   provider_id?: string
   _dimmed?: boolean

web/i18n/en-US/plugin.ts

@@ -308,6 +308,19 @@ const translation = {
     unavailable: 'Unavailable',
     connectedWorkspace: 'Connected Workspace',
     emptyAuth: 'Please configure authentication',
+    connectCredentials: 'Connect credentials to continue',
+    configuredCredentials: {
+      title: 'Configured Credentials',
+      desc: 'Set up by you or your team in advance',
+      empty: 'No workspace credentials configured yet',
+    },
+    endUserCredentials: {
+      title: 'End-user Credentials',
+      desc: 'Credentials are provided by the end user at runtime',
+      typeLabel: 'Credential Type',
+      optionOAuth: 'OAuth',
+      optionApiKey: 'API Key',
+    },
   },
   readmeInfo: {
     title: 'README',

web/i18n/en-US/share.ts

@@ -81,6 +81,14 @@ const translation = {
   login: {
     backToHome: 'Back to Home',
   },
+  serviceConnection: {
+    title: 'Connect the required services to start',
+    description: 'You need to configure {{count}} connections before you can use this app',
+    connect: 'Connect',
+    addApiKey: 'Add API Key',
+    connected: 'Connected',
+    continue: 'Continue',
+  },
 }
 
 export default translation

web/i18n/ja-JP/share.ts

@@ -77,6 +77,14 @@ const translation = {
   login: {
     backToHome: 'ホームに戻る',
   },
+  serviceConnection: {
+    title: 'サービスを接続して開始',
+    description: 'このアプリを使用するには {{count}} 件の接続を設定する必要があります',
+    connect: '接続',
+    addApiKey: 'API Key を追加',
+    connected: '接続済み',
+    continue: '続行',
+  },
 }
 
 export default translation

web/i18n/zh-Hans/share.ts

@@ -77,6 +77,14 @@ const translation = {
   login: {
     backToHome: '返回首页',
   },
+  serviceConnection: {
+    title: '连接所需服务以开始',
+    description: '您需要配置 {{count}} 个连接才能使用此应用',
+    connect: '连接',
+    addApiKey: '添加 API Key',
+    connected: '已连接',
+    continue: '继续',
+  },
 }
 
 export default translation

web/i18n/zh-Hant/share.ts

@@ -77,6 +77,14 @@ const translation = {
   login: {
     backToHome: '返回首頁',
   },
+  serviceConnection: {
+    title: '連接所需服務以開始',
+    description: '您需要配置 {{count}} 個連接才能使用此應用',
+    connect: '連接',
+    addApiKey: '新增 API Key',
+    connected: '已連接',
+    continue: '繼續',
+  },
 }
 
 export default translation

web/types/app.ts

@@ -130,6 +130,8 @@ export type AgentTool = {
   isDeleted?: boolean
   notAuthor?: boolean
   credential_id?: string
+  use_end_user_credentials?: boolean
+  end_user_credential_type?: string
 }
 
 export type ToolItem = {