refactor(tool-selector): remove unused components and consolidate imports

- Deleted several unused files related to the tool selector, including hooks, forms, and modals.
- Consolidated imports in the tool selector index file to streamline component usage.
- Updated the tool selector to utilize a custom hook for state management and improved the rendering logic for tool items and settings panels.

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

@@ -0,0 +1,8 @@
+export { default as ReasoningConfigForm } from './reasoning-config-form'
+export { default as SchemaModal } from './schema-modal'
+export { default as ToolAuthorizationSection } from './tool-authorization-section'
+export { default as ToolBaseForm } from './tool-base-form'
+export { default as ToolCredentialsForm } from './tool-credentials-form'
+export { default as ToolItem } from './tool-item'
+export { default as ToolSettingsPanel } from './tool-settings-panel'
+export { default as ToolTrigger } from './tool-trigger'

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

@@ -0,0 +1,49 @@
+'use client'
+import type { FC } from 'react'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import Divider from '@/app/components/base/divider'
+import {
+  AuthCategory,
+  PluginAuthInAgent,
+} from '@/app/components/plugins/plugin-auth'
+import { CollectionType } from '@/app/components/tools/types'
+
+type ToolAuthorizationSectionProps = {
+  currentProvider?: ToolWithProvider
+  credentialId?: string
+  onAuthorizationItemClick: (id: string) => void
+}
+
+const ToolAuthorizationSection: FC<ToolAuthorizationSectionProps> = ({
+  currentProvider,
+  credentialId,
+  onAuthorizationItemClick,
+}) => {
+  // Only show for built-in providers that allow deletion
+  const shouldShow = currentProvider
+    && currentProvider.type === CollectionType.builtIn
+    && currentProvider.allow_delete
+
+  if (!shouldShow)
+    return null
+
+  return (
+    <>
+      <Divider className="my-1 w-full" />
+      <div className="px-4 py-2">
+        <PluginAuthInAgent
+          pluginPayload={{
+            provider: currentProvider.name,
+            category: AuthCategory.tool,
+            providerType: currentProvider.type,
+            detail: currentProvider as any,
+          }}
+          credentialId={credentialId}
+          onAuthorizationItemClick={onAuthorizationItemClick}
+        />
+      </div>
+    </>
+  )
+}
+
+export default ToolAuthorizationSection

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

@@ -0,0 +1,91 @@
+'use client'
+import type { OffsetOptions } from '@floating-ui/react'
+import type { FC } from 'react'
+import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { useTranslation } from 'react-i18next'
+import Textarea from '@/app/components/base/textarea'
+import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
+import { ReadmeEntrance } from '../../../readme-panel/entrance'
+import ToolTrigger from './tool-trigger'
+
+type ToolBaseFormProps = {
+  value?: ToolValue
+  currentProvider?: ToolWithProvider
+  offset?: OffsetOptions
+  scope?: string
+  selectedTools?: ToolValue[]
+  isShowChooseTool: boolean
+  panelShowState?: boolean
+  hasTrigger: boolean
+  onShowChange: (show: boolean) => void
+  onPanelShowStateChange?: (state: boolean) => void
+  onSelectTool: (tool: ToolDefaultValue) => void
+  onSelectMultipleTool: (tools: ToolDefaultValue[]) => void
+  onDescriptionChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const ToolBaseForm: FC<ToolBaseFormProps> = ({
+  value,
+  currentProvider,
+  offset = 4,
+  scope,
+  selectedTools,
+  isShowChooseTool,
+  panelShowState,
+  hasTrigger,
+  onShowChange,
+  onPanelShowStateChange,
+  onSelectTool,
+  onSelectMultipleTool,
+  onDescriptionChange,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex flex-col gap-3 px-4 py-2">
+      {/* Tool picker */}
+      <div className="flex flex-col gap-1">
+        <div className="system-sm-semibold flex h-6 items-center justify-between text-text-secondary">
+          {t('detailPanel.toolSelector.toolLabel', { ns: 'plugin' })}
+          <ReadmeEntrance pluginDetail={currentProvider as any} showShortTip className="pb-0" />
+        </div>
+        <ToolPicker
+          placement="bottom"
+          offset={offset}
+          trigger={(
+            <ToolTrigger
+              open={panelShowState || isShowChooseTool}
+              value={value}
+              provider={currentProvider}
+            />
+          )}
+          isShow={panelShowState || isShowChooseTool}
+          onShowChange={hasTrigger ? onPanelShowStateChange as any : onShowChange}
+          disabled={false}
+          supportAddCustomTool
+          onSelect={onSelectTool}
+          onSelectMultiple={onSelectMultipleTool}
+          scope={scope}
+          selectedTools={selectedTools}
+        />
+      </div>
+
+      {/* Description */}
+      <div className="flex flex-col gap-1">
+        <div className="system-sm-semibold flex h-6 items-center text-text-secondary">
+          {t('detailPanel.toolSelector.descriptionLabel', { ns: 'plugin' })}
+        </div>
+        <Textarea
+          className="resize-none"
+          placeholder={t('detailPanel.toolSelector.descriptionPlaceholder', { ns: 'plugin' })}
+          value={value?.extra?.description || ''}
+          onChange={onDescriptionChange}
+          disabled={!value?.provider_name}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ToolBaseForm

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

@@ -0,0 +1,150 @@
+'use client'
+import type { FC } from 'react'
+import type { Node } from 'reactflow'
+import type { TabType } from '../hooks/use-tool-selector-state'
+import type { ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { NodeOutPutVar, ToolWithProvider } from '@/app/components/workflow/types'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import TabSlider from '@/app/components/base/tab-slider-plain'
+import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
+import ReasoningConfigForm from './reasoning-config-form'
+
+type ToolSettingsPanelProps = {
+  value?: ToolValue
+  currentProvider?: ToolWithProvider
+  nodeId: string
+  currType: TabType
+  settingsFormSchemas: any[]
+  paramsFormSchemas: any[]
+  settingsValue: Record<string, any>
+  showTabSlider: boolean
+  userSettingsOnly: boolean
+  reasoningConfigOnly: boolean
+  nodeOutputVars: NodeOutPutVar[]
+  availableNodes: Node[]
+  onCurrTypeChange: (type: TabType) => void
+  onSettingsFormChange: (v: Record<string, any>) => void
+  onParamsFormChange: (v: Record<string, any>) => void
+}
+
+/**
+ * Renders the settings/params tips section
+ */
+const ParamsTips: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <div className="pb-1">
+      <div className="system-xs-regular text-text-tertiary">
+        {t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}
+      </div>
+      <div className="system-xs-regular text-text-tertiary">
+        {t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}
+      </div>
+    </div>
+  )
+}
+
+const ToolSettingsPanel: FC<ToolSettingsPanelProps> = ({
+  value,
+  currentProvider,
+  nodeId,
+  currType,
+  settingsFormSchemas,
+  paramsFormSchemas,
+  settingsValue,
+  showTabSlider,
+  userSettingsOnly,
+  reasoningConfigOnly,
+  nodeOutputVars,
+  availableNodes,
+  onCurrTypeChange,
+  onSettingsFormChange,
+  onParamsFormChange,
+}) => {
+  const { t } = useTranslation()
+
+  // Check if panel should be shown
+  const hasSettings = settingsFormSchemas.length > 0
+  const hasParams = paramsFormSchemas.length > 0
+  const isTeamAuthorized = currentProvider?.is_team_authorization
+
+  if ((!hasSettings && !hasParams) || !isTeamAuthorized)
+    return null
+
+  return (
+    <>
+      <Divider className="my-1 w-full" />
+
+      {/* Tab slider - shown only when both settings and params exist */}
+      {nodeId && showTabSlider && (
+        <TabSlider
+          className="mt-1 shrink-0 px-4"
+          itemClassName="py-3"
+          noBorderBottom
+          smallItem
+          value={currType}
+          onChange={value => onCurrTypeChange(value as TabType)}
+          options={[
+            { value: 'settings', text: t('detailPanel.toolSelector.settings', { ns: 'plugin' })! },
+            { value: 'params', text: t('detailPanel.toolSelector.params', { ns: 'plugin' })! },
+          ]}
+        />
+      )}
+
+      {/* Params tips when tab slider and params tab is active */}
+      {nodeId && showTabSlider && currType === 'params' && (
+        <div className="px-4 py-2">
+          <ParamsTips />
+        </div>
+      )}
+
+      {/* User settings only header */}
+      {userSettingsOnly && (
+        <div className="p-4 pb-1">
+          <div className="system-sm-semibold-uppercase text-text-primary">
+            {t('detailPanel.toolSelector.settings', { ns: 'plugin' })}
+          </div>
+        </div>
+      )}
+
+      {/* Reasoning config only header */}
+      {nodeId && reasoningConfigOnly && (
+        <div className="mb-1 p-4 pb-1">
+          <div className="system-sm-semibold-uppercase text-text-primary">
+            {t('detailPanel.toolSelector.params', { ns: 'plugin' })}
+          </div>
+          <ParamsTips />
+        </div>
+      )}
+
+      {/* User settings form */}
+      {(currType === 'settings' || userSettingsOnly) && (
+        <div className="px-4 py-2">
+          <ToolForm
+            inPanel
+            readOnly={false}
+            nodeId={nodeId}
+            schema={settingsFormSchemas as any}
+            value={settingsValue}
+            onChange={onSettingsFormChange}
+          />
+        </div>
+      )}
+
+      {/* Reasoning config form */}
+      {nodeId && (currType === 'params' || reasoningConfigOnly) && (
+        <ReasoningConfigForm
+          value={value?.parameters || {}}
+          onChange={onParamsFormChange}
+          schemas={paramsFormSchemas as any}
+          nodeOutputVars={nodeOutputVars}
+          availableNodes={availableNodes}
+          nodeId={nodeId}
+        />
+      )}
+    </>
+  )
+}
+
+export default ToolSettingsPanel

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

@@ -0,0 +1,3 @@
+export { usePluginInstalledCheck } from './use-plugin-installed-check'
+export { useToolSelectorState } from './use-tool-selector-state'
+export type { TabType, ToolSelectorState, UseToolSelectorStateProps } from './use-tool-selector-state'

web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/use-tool-selector-state.ts

@@ -0,0 +1,227 @@
+'use client'
+import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
+import { useCallback, useMemo, useState } from 'react'
+import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import {
+  useAllBuiltInTools,
+  useAllCustomTools,
+  useAllMCPTools,
+  useAllWorkflowTools,
+  useInvalidateAllBuiltInTools,
+} from '@/service/use-tools'
+import { usePluginInstalledCheck } from './use-plugin-installed-check'
+
+export type TabType = 'settings' | 'params'
+
+export type UseToolSelectorStateProps = {
+  value?: ToolValue
+  onSelect: (tool: ToolValue) => void
+  onSelectMultiple?: (tool: ToolValue[]) => void
+}
+
+/**
+ * Custom hook for managing tool selector state and computed values.
+ * Consolidates state management, data fetching, and event handlers.
+ */
+export const useToolSelectorState = ({
+  value,
+  onSelect,
+  onSelectMultiple,
+}: UseToolSelectorStateProps) => {
+  // Panel visibility states
+  const [isShow, setIsShow] = useState(false)
+  const [isShowChooseTool, setIsShowChooseTool] = useState(false)
+  const [currType, setCurrType] = useState<TabType>('settings')
+
+  // Fetch all tools data
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
+  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+
+  // Plugin info check
+  const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
+
+  // Merge all tools and find current provider
+  const currentProvider = useMemo(() => {
+    const mergedTools = [
+      ...(buildInTools || []),
+      ...(customTools || []),
+      ...(workflowTools || []),
+      ...(mcpTools || []),
+    ]
+    return mergedTools.find(toolWithProvider => toolWithProvider.id === value?.provider_name)
+  }, [value, buildInTools, customTools, workflowTools, mcpTools])
+
+  // Current tool from provider
+  const currentTool = useMemo(() => {
+    return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
+  }, [currentProvider?.tools, value?.tool_name])
+
+  // Tool settings and params
+  const currentToolSettings = useMemo(() => {
+    if (!currentProvider)
+      return []
+    return currentProvider.tools
+      .find(tool => tool.name === value?.tool_name)
+      ?.parameters
+      .filter(param => param.form !== 'llm') || []
+  }, [currentProvider, value])
+
+  const currentToolParams = useMemo(() => {
+    if (!currentProvider)
+      return []
+    return currentProvider.tools
+      .find(tool => tool.name === value?.tool_name)
+      ?.parameters
+      .filter(param => param.form === 'llm') || []
+  }, [currentProvider, value])
+
+  // Form schemas
+  const settingsFormSchemas = useMemo(
+    () => toolParametersToFormSchemas(currentToolSettings),
+    [currentToolSettings],
+  )
+  const paramsFormSchemas = useMemo(
+    () => toolParametersToFormSchemas(currentToolParams),
+    [currentToolParams],
+  )
+
+  // Tab visibility flags
+  const showTabSlider = currentToolSettings.length > 0 && currentToolParams.length > 0
+  const userSettingsOnly = currentToolSettings.length > 0 && !currentToolParams.length
+  const reasoningConfigOnly = currentToolParams.length > 0 && !currentToolSettings.length
+
+  // Manifest icon URL
+  const manifestIcon = useMemo(() => {
+    if (!manifest)
+      return ''
+    return `${MARKETPLACE_API_PREFIX}/plugins/${(manifest as any).plugin_id}/icon`
+  }, [manifest])
+
+  // Convert tool default value to tool value format
+  const getToolValue = useCallback((tool: ToolDefaultValue): ToolValue => {
+    const settingValues = generateFormValue(
+      tool.params,
+      toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form !== 'llm') as any),
+    )
+    const paramValues = generateFormValue(
+      tool.params,
+      toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form === 'llm') as any),
+      true,
+    )
+    return {
+      provider_name: tool.provider_id,
+      provider_show_name: tool.provider_name,
+      tool_name: tool.tool_name,
+      tool_label: tool.tool_label,
+      tool_description: tool.tool_description,
+      settings: settingValues,
+      parameters: paramValues,
+      enabled: tool.is_team_authorization,
+      extra: {
+        description: tool.tool_description,
+      },
+    }
+  }, [])
+
+  // Event handlers
+  const handleSelectTool = useCallback((tool: ToolDefaultValue) => {
+    const toolValue = getToolValue(tool)
+    onSelect(toolValue)
+  }, [getToolValue, onSelect])
+
+  const handleSelectMultipleTool = useCallback((tools: ToolDefaultValue[]) => {
+    const toolValues = tools.map(item => getToolValue(item))
+    onSelectMultiple?.(toolValues)
+  }, [getToolValue, onSelectMultiple])
+
+  const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onSelect({
+      ...value,
+      extra: {
+        ...value?.extra,
+        description: e.target.value || '',
+      },
+    } as ToolValue)
+  }, [value, onSelect])
+
+  const handleSettingsFormChange = useCallback((v: Record<string, any>) => {
+    const newValue = getStructureValue(v)
+    onSelect({
+      ...value,
+      settings: newValue,
+    } as ToolValue)
+  }, [value, onSelect])
+
+  const handleParamsFormChange = useCallback((v: Record<string, any>) => {
+    onSelect({
+      ...value,
+      parameters: v,
+    } as ToolValue)
+  }, [value, onSelect])
+
+  const handleEnabledChange = useCallback((state: boolean) => {
+    onSelect({
+      ...value,
+      enabled: state,
+    } as ToolValue)
+  }, [value, onSelect])
+
+  const handleAuthorizationItemClick = useCallback((id: string) => {
+    onSelect({
+      ...value,
+      credential_id: id,
+    } as ToolValue)
+  }, [value, onSelect])
+
+  const handleInstall = useCallback(async () => {
+    invalidateAllBuiltinTools()
+    invalidateInstalledPluginList()
+  }, [invalidateAllBuiltinTools, invalidateInstalledPluginList])
+
+  const getSettingsValue = useCallback(() => {
+    return getPlainValue(value?.settings || {})
+  }, [value?.settings])
+
+  return {
+    // State
+    isShow,
+    setIsShow,
+    isShowChooseTool,
+    setIsShowChooseTool,
+    currType,
+    setCurrType,
+
+    // Computed values
+    currentProvider,
+    currentTool,
+    currentToolSettings,
+    currentToolParams,
+    settingsFormSchemas,
+    paramsFormSchemas,
+    showTabSlider,
+    userSettingsOnly,
+    reasoningConfigOnly,
+    manifestIcon,
+    inMarketPlace,
+    manifest,
+
+    // Event handlers
+    handleSelectTool,
+    handleSelectMultipleTool,
+    handleDescriptionChange,
+    handleSettingsFormChange,
+    handleParamsFormChange,
+    handleEnabledChange,
+    handleAuthorizationItemClick,
+    handleInstall,
+    getSettingsValue,
+  }
+}
+
+export type ToolSelectorState = ReturnType<typeof useToolSelectorState>

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

@@ -5,43 +5,26 @@ import type {
 } from '@floating-ui/react'
 import type { FC } from 'react'
 import type { Node } from 'reactflow'
-import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import Link from 'next/link'
 import * as React from 'react'
-import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import TabSlider from '@/app/components/base/tab-slider-plain'
-import Textarea from '@/app/components/base/textarea'
-import {
-  AuthCategory,
-  PluginAuthInAgent,
-} from '@/app/components/plugins/plugin-auth'
-import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
-import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
-import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
-import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger'
 import { CollectionType } from '@/app/components/tools/types'
-import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
-import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
-import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
-import { MARKETPLACE_API_PREFIX } from '@/config'
-import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import {
-  useAllBuiltInTools,
-  useAllCustomTools,
-  useAllMCPTools,
-  useAllWorkflowTools,
-  useInvalidateAllBuiltInTools,
-} from '@/service/use-tools'
 import { cn } from '@/utils/classnames'
-import { ReadmeEntrance } from '../../readme-panel/entrance'
+import {
+  ToolAuthorizationSection,
+  ToolBaseForm,
+  ToolItem,
+  ToolSettingsPanel,
+  ToolTrigger,
+} from './components'
+import { useToolSelectorState } from './hooks/use-tool-selector-state'
 
 type Props = {
   disabled?: boolean
@@ -65,6 +48,7 @@ type Props = {
   availableNodes: Node[]
   nodeId?: string
 }
+
 const ToolSelector: FC<Props> = ({
   value,
   selectedTools,
@@ -87,321 +71,177 @@ const ToolSelector: FC<Props> = ({
   nodeId = '',
 }) => {
   const { t } = useTranslation()
-  const [isShow, onShowChange] = useState(false)
+
+  // Use custom hook for state management
+  const state = useToolSelectorState({ value, onSelect, onSelectMultiple })
+  const {
+    isShow,
+    setIsShow,
+    isShowChooseTool,
+    setIsShowChooseTool,
+    currType,
+    setCurrType,
+    currentProvider,
+    currentTool,
+    settingsFormSchemas,
+    paramsFormSchemas,
+    showTabSlider,
+    userSettingsOnly,
+    reasoningConfigOnly,
+    manifestIcon,
+    inMarketPlace,
+    manifest,
+    handleSelectTool,
+    handleSelectMultipleTool,
+    handleDescriptionChange,
+    handleSettingsFormChange,
+    handleParamsFormChange,
+    handleEnabledChange,
+    handleAuthorizationItemClick,
+    handleInstall,
+    getSettingsValue,
+  } = state
+
   const handleTriggerClick = () => {
     if (disabled)
       return
-    onShowChange(true)
+    setIsShow(true)
   }
 
-  const { data: buildInTools } = useAllBuiltInTools()
-  const { data: customTools } = useAllCustomTools()
-  const { data: workflowTools } = useAllWorkflowTools()
-  const { data: mcpTools } = useAllMCPTools()
-  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
-  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  // Determine portal open state based on controlled vs uncontrolled mode
+  const portalOpen = trigger ? controlledState : isShow
+  const onPortalOpenChange = trigger ? onControlledStateChange : setIsShow
 
-  // plugin info check
-  const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
-
-  const currentProvider = useMemo(() => {
-    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || []), ...(mcpTools || [])]
-    return mergedTools.find((toolWithProvider) => {
-      return toolWithProvider.id === value?.provider_name
-    })
-  }, [value, buildInTools, customTools, workflowTools, mcpTools])
-
-  const [isShowChooseTool, setIsShowChooseTool] = useState(false)
-  const getToolValue = (tool: ToolDefaultValue) => {
-    const settingValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form !== 'llm') as any))
-    const paramValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form === 'llm') as any), true)
-    return {
-      provider_name: tool.provider_id,
-      provider_show_name: tool.provider_name,
-      type: tool.provider_type,
-      tool_name: tool.tool_name,
-      tool_label: tool.tool_label,
-      tool_description: tool.tool_description,
-      settings: settingValues,
-      parameters: paramValues,
-      enabled: tool.is_team_authorization,
-      extra: {
-        description: tool.tool_description,
-      },
-      schemas: tool.paramSchemas,
-    }
-  }
-  const handleSelectTool = (tool: ToolDefaultValue) => {
-    const toolValue = getToolValue(tool)
-    onSelect(toolValue)
-    // setIsShowChooseTool(false)
-  }
-  const handleSelectMultipleTool = (tool: ToolDefaultValue[]) => {
-    const toolValues = tool.map(item => getToolValue(item))
-    onSelectMultiple?.(toolValues)
-  }
-
-  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onSelect({
-      ...value,
-      extra: {
-        ...value?.extra,
-        description: e.target.value || '',
-      },
-    } as any)
-  }
-
-  // tool settings & params
-  const currentToolSettings = useMemo(() => {
-    if (!currentProvider)
-      return []
-    return currentProvider.tools.find(tool => tool.name === value?.tool_name)?.parameters.filter(param => param.form !== 'llm') || []
-  }, [currentProvider, value])
-  const currentToolParams = useMemo(() => {
-    if (!currentProvider)
-      return []
-    return currentProvider.tools.find(tool => tool.name === value?.tool_name)?.parameters.filter(param => param.form === 'llm') || []
-  }, [currentProvider, value])
-  const [currType, setCurrType] = useState('settings')
-  const showTabSlider = currentToolSettings.length > 0 && currentToolParams.length > 0
-  const userSettingsOnly = currentToolSettings.length > 0 && !currentToolParams.length
-  const reasoningConfigOnly = currentToolParams.length > 0 && !currentToolSettings.length
-
-  const settingsFormSchemas = useMemo(() => toolParametersToFormSchemas(currentToolSettings), [currentToolSettings])
-  const paramsFormSchemas = useMemo(() => toolParametersToFormSchemas(currentToolParams), [currentToolParams])
-
-  const handleSettingsFormChange = (v: Record<string, any>) => {
-    const newValue = getStructureValue(v)
-    const toolValue = {
-      ...value,
-      settings: newValue,
-    }
-    onSelect(toolValue as any)
-  }
-  const handleParamsFormChange = (v: Record<string, any>) => {
-    const toolValue = {
-      ...value,
-      parameters: v,
-    }
-    onSelect(toolValue as any)
-  }
-
-  const handleEnabledChange = (state: boolean) => {
-    onSelect({
-      ...value,
-      enabled: state,
-    } as any)
-  }
-
-  // install from marketplace
-  const currentTool = useMemo(() => {
-    return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
-  }, [currentProvider?.tools, value?.tool_name])
-  const manifestIcon = useMemo(() => {
-    if (!manifest)
-      return ''
-    return `${MARKETPLACE_API_PREFIX}/plugins/${(manifest as any).plugin_id}/icon`
-  }, [manifest])
-  const handleInstall = async () => {
-    invalidateAllBuiltinTools()
-    invalidateInstalledPluginList()
-  }
-  const handleAuthorizationItemClick = (id: string) => {
-    onSelect({
-      ...value,
-      credential_id: id,
-    } as any)
-  }
+  // Build error tooltip content
+  const renderErrorTip = () => (
+    <div className="max-w-[240px] space-y-1 text-xs">
+      <h3 className="font-semibold text-text-primary">
+        {currentTool
+          ? t('detailPanel.toolSelector.uninstalledTitle', { ns: 'plugin' })
+          : t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}
+      </h3>
+      <p className="tracking-tight text-text-secondary">
+        {currentTool
+          ? t('detailPanel.toolSelector.uninstalledContent', { ns: 'plugin' })
+          : t('detailPanel.toolSelector.unsupportedContent', { ns: 'plugin' })}
+      </p>
+      <p>
+        <Link href="/plugins" className="tracking-tight text-text-accent">
+          {t('detailPanel.toolSelector.uninstalledLink', { ns: 'plugin' })}
+        </Link>
+      </p>
+    </div>
+  )
 
   return (
-    <>
-      <PortalToFollowElem
-        placement={placement}
-        offset={offset}
-        open={trigger ? controlledState : isShow}
-        onOpenChange={trigger ? onControlledStateChange : onShowChange}
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={portalOpen}
+      onOpenChange={onPortalOpenChange}
+    >
+      <PortalToFollowElemTrigger
+        className="w-full"
+        onClick={() => {
+          if (!currentProvider || !currentTool)
+            return
+          handleTriggerClick()
+        }}
       >
-        <PortalToFollowElemTrigger
-          className="w-full"
-          onClick={() => {
-            if (!currentProvider || !currentTool)
-              return
-            handleTriggerClick()
-          }}
+        {trigger}
+
+        {/* Default trigger - no value */}
+        {!trigger && !value?.provider_name && (
+          <ToolTrigger
+            isConfigure
+            open={isShow}
+            value={value}
+            provider={currentProvider}
+          />
+        )}
+
+        {/* Default trigger - with value */}
+        {!trigger && value?.provider_name && (
+          <ToolItem
+            open={isShow}
+            icon={currentProvider?.icon || manifestIcon}
+            isMCPTool={currentProvider?.type === CollectionType.mcp}
+            providerName={value.provider_name}
+            providerShowName={value.provider_show_name}
+            toolLabel={value.tool_label || value.tool_name}
+            showSwitch={supportEnableSwitch}
+            switchValue={value.enabled}
+            onSwitchChange={handleEnabledChange}
+            onDelete={onDelete}
+            noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
+            uninstalled={!currentProvider && inMarketPlace}
+            versionMismatch={currentProvider && inMarketPlace && !currentTool}
+            installInfo={manifest?.latest_package_identifier}
+            onInstall={handleInstall}
+            isError={(!currentProvider || !currentTool) && !inMarketPlace}
+            errorTip={renderErrorTip()}
+          />
+        )}
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className="z-10">
+        <div className={cn(
+          'relative max-h-[642px] min-h-20 w-[361px] rounded-xl',
+          'border-[0.5px] border-components-panel-border bg-components-panel-bg-blur',
+          'overflow-y-auto pb-2 pb-4 shadow-lg backdrop-blur-sm',
+        )}
         >
-          {trigger}
-          {!trigger && !value?.provider_name && (
-            <ToolTrigger
-              isConfigure
-              open={isShow}
-              value={value}
-              provider={currentProvider}
-            />
-          )}
-          {!trigger && value?.provider_name && (
-            <ToolItem
-              open={isShow}
-              icon={currentProvider?.icon || manifestIcon}
-              isMCPTool={currentProvider?.type === CollectionType.mcp}
-              providerName={value.provider_name}
-              providerShowName={value.provider_show_name}
-              toolLabel={value.tool_label || value.tool_name}
-              showSwitch={supportEnableSwitch}
-              switchValue={value.enabled}
-              onSwitchChange={handleEnabledChange}
-              onDelete={onDelete}
-              noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
-              uninstalled={!currentProvider && inMarketPlace}
-              versionMismatch={currentProvider && inMarketPlace && !currentTool}
-              installInfo={manifest?.latest_package_identifier}
-              onInstall={() => handleInstall()}
-              isError={(!currentProvider || !currentTool) && !inMarketPlace}
-              errorTip={(
-                <div className="max-w-[240px] space-y-1 text-xs">
-                  <h3 className="font-semibold text-text-primary">{currentTool ? t('detailPanel.toolSelector.uninstalledTitle', { ns: 'plugin' }) : t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}</h3>
-                  <p className="tracking-tight text-text-secondary">{currentTool ? t('detailPanel.toolSelector.uninstalledContent', { ns: 'plugin' }) : t('detailPanel.toolSelector.unsupportedContent', { ns: 'plugin' })}</p>
-                  <p>
-                    <Link href="/plugins" className="tracking-tight text-text-accent">{t('detailPanel.toolSelector.uninstalledLink', { ns: 'plugin' })}</Link>
-                  </p>
-                </div>
-              )}
-            />
-          )}
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-10">
-          <div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', 'overflow-y-auto pb-2')}>
-            <>
-              <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">{t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}</div>
-              {/* base form */}
-              <div className="flex flex-col gap-3 px-4 py-2">
-                <div className="flex flex-col gap-1">
-                  <div className="system-sm-semibold flex h-6 items-center justify-between text-text-secondary">
-                    {t('detailPanel.toolSelector.toolLabel', { ns: 'plugin' })}
-                    <ReadmeEntrance pluginDetail={currentProvider as any} showShortTip className="pb-0" />
-                  </div>
-                  <ToolPicker
-                    placement="bottom"
-                    offset={offset}
-                    trigger={(
-                      <ToolTrigger
-                        open={panelShowState || isShowChooseTool}
-                        value={value}
-                        provider={currentProvider}
-                      />
-                    )}
-                    isShow={panelShowState || isShowChooseTool}
-                    onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
-                    disabled={false}
-                    supportAddCustomTool
-                    onSelect={handleSelectTool}
-                    onSelectMultiple={handleSelectMultipleTool}
-                    scope={scope}
-                    selectedTools={selectedTools}
-                  />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <div className="system-sm-semibold flex h-6 items-center text-text-secondary">{t('detailPanel.toolSelector.descriptionLabel', { ns: 'plugin' })}</div>
-                  <Textarea
-                    className="resize-none"
-                    placeholder={t('detailPanel.toolSelector.descriptionPlaceholder', { ns: 'plugin' })}
-                    value={value?.extra?.description || ''}
-                    onChange={handleDescriptionChange}
-                    disabled={!value?.provider_name}
-                  />
-                </div>
-              </div>
-              {/* authorization */}
-              {currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
-                <>
-                  <Divider className="my-1 w-full" />
-                  <div className="px-4 py-2">
-                    <PluginAuthInAgent
-                      pluginPayload={{
-                        provider: currentProvider.name,
-                        category: AuthCategory.tool,
-                        providerType: currentProvider.type,
-                        detail: currentProvider as any,
-                      }}
-                      credentialId={value?.credential_id}
-                      onAuthorizationItemClick={handleAuthorizationItemClick}
-                    />
-                  </div>
-                </>
-              )}
-              {/* tool settings */}
-              {(currentToolSettings.length > 0 || currentToolParams.length > 0) && currentProvider?.is_team_authorization && (
-                <>
-                  <Divider className="my-1 w-full" />
-                  {/* tabs */}
-                  {nodeId && showTabSlider && (
-                    <TabSlider
-                      className="mt-1 shrink-0 px-4"
-                      itemClassName="py-3"
-                      noBorderBottom
-                      smallItem
-                      value={currType}
-                      onChange={(value) => {
-                        setCurrType(value)
-                      }}
-                      options={[
-                        { value: 'settings', text: t('detailPanel.toolSelector.settings', { ns: 'plugin' })! },
-                        { value: 'params', text: t('detailPanel.toolSelector.params', { ns: 'plugin' })! },
-                      ]}
-                    />
-                  )}
-                  {nodeId && showTabSlider && currType === 'params' && (
-                    <div className="px-4 py-2">
-                      <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
-                      <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
-                    </div>
-                  )}
-                  {/* user settings only */}
-                  {userSettingsOnly && (
-                    <div className="p-4 pb-1">
-                      <div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.settings', { ns: 'plugin' })}</div>
-                    </div>
-                  )}
-                  {/* reasoning config only */}
-                  {nodeId && reasoningConfigOnly && (
-                    <div className="mb-1 p-4 pb-1">
-                      <div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.params', { ns: 'plugin' })}</div>
-                      <div className="pb-1">
-                        <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
-                        <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
-                      </div>
-                    </div>
-                  )}
-                  {/* user settings form */}
-                  {(currType === 'settings' || userSettingsOnly) && (
-                    <div className="px-4 py-2">
-                      <ToolForm
-                        inPanel
-                        readOnly={false}
-                        nodeId={nodeId}
-                        schema={settingsFormSchemas as any}
-                        value={getPlainValue(value?.settings || {})}
-                        onChange={handleSettingsFormChange}
-                      />
-                    </div>
-                  )}
-                  {/* reasoning config form */}
-                  {nodeId && (currType === 'params' || reasoningConfigOnly) && (
-                    <ReasoningConfigForm
-                      value={value?.parameters || {}}
-                      onChange={handleParamsFormChange}
-                      schemas={paramsFormSchemas as any}
-                      nodeOutputVars={nodeOutputVars}
-                      availableNodes={availableNodes}
-                      nodeId={nodeId}
-                    />
-                  )}
-                </>
-              )}
-            </>
+          {/* Header */}
+          <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">
+            {t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}
           </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
-    </>
+
+          {/* Base form: tool picker + description */}
+          <ToolBaseForm
+            value={value}
+            currentProvider={currentProvider}
+            offset={offset}
+            scope={scope}
+            selectedTools={selectedTools}
+            isShowChooseTool={isShowChooseTool}
+            panelShowState={panelShowState}
+            hasTrigger={!!trigger}
+            onShowChange={setIsShowChooseTool}
+            onPanelShowStateChange={onPanelShowStateChange}
+            onSelectTool={handleSelectTool}
+            onSelectMultipleTool={handleSelectMultipleTool}
+            onDescriptionChange={handleDescriptionChange}
+          />
+
+          {/* Authorization section */}
+          <ToolAuthorizationSection
+            currentProvider={currentProvider}
+            credentialId={value?.credential_id}
+            onAuthorizationItemClick={handleAuthorizationItemClick}
+          />
+
+          {/* Settings panel */}
+          <ToolSettingsPanel
+            value={value}
+            currentProvider={currentProvider}
+            nodeId={nodeId}
+            currType={currType}
+            settingsFormSchemas={settingsFormSchemas}
+            paramsFormSchemas={paramsFormSchemas}
+            settingsValue={getSettingsValue()}
+            showTabSlider={showTabSlider}
+            userSettingsOnly={userSettingsOnly}
+            reasoningConfigOnly={reasoningConfigOnly}
+            nodeOutputVars={nodeOutputVars}
+            availableNodes={availableNodes}
+            onCurrTypeChange={setCurrType}
+            onSettingsFormChange={handleSettingsFormChange}
+            onParamsFormChange={handleParamsFormChange}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
+
 export default React.memo(ToolSelector)

web/app/components/workflow/nodes/tool/components/tool-form/item.tsx

@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
+import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
 import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
 
 type Props = {

web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx

@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
+import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
 import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
 
 type Props = {