diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index 1d7817a982..534789c00c 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -6,35 +6,53 @@ import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 // import ProviderCard from '@/app/components/plugins/provider-card'
 import Badge from '@/app/components/base/badge'
 import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
+import { useBoolean } from 'ahooks'
 
 const PluginList = () => {
   const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
+  const [isShow, {
+    setFalse: hide,
+  }] = useBoolean(true)
 
   return (
     <div className='pb-3 bg-white'>
-      <InstallBundle onClose={() => { }} fromDSLPayload={[
-        {
-          type: 'marketplace',
-          value: {
-            plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
-          },
-        },
-        {
-          type: 'github',
-          value: {
-            repo: 'YIXIAO0/test',
-            version: '1.11.5',
-            package: 'test.difypkg',
-            github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
-          },
-        },
-        {
-          type: 'marketplace',
-          value: {
-            plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
-          },
-        },
-      ]} />
+      {isShow && (
+        <InstallBundle
+          onClose={hide}
+          fromDSLPayload={[
+            // {
+            //   type: 'marketplace',
+            //   value: {
+            //     plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
+            //   },
+            // },
+            {
+              type: 'github',
+              value: {
+                repo: 'YIXIAO0/test',
+                version: '1.11.5',
+                package: 'test.difypkg',
+                github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
+              },
+            },
+            {
+              type: 'github',
+              value: {
+                package: 'dify-test.difypkg',
+                repo: 'WTW0313/dify-test',
+                version: '0.0.5-beta.2',
+                github_plugin_unique_identifier: 'wtw0313/dify-test:0.0.1@1633daa043b47155d4228e2db7734245fd6d3e20ba812e5c02ce69fc1e3038f4',
+              },
+            },
+            {
+              type: 'marketplace',
+              value: {
+                plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
+              },
+            },
+          ]} />
+      )
+      }
       <div className='mx-3 '>
         {/* <h2 className='my-3'>Dify Plugin list</h2> */}
         {/* <div className='grid grid-cols-2 gap-3'>
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index fe91f4a79a..dcb2b1a3fd 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -25,7 +25,7 @@ import { useSelectedDatasetsMode } from '@/app/components/workflow/nodes/knowled
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
 
-interface Props {
+type Props = {
   datasetConfigs: DatasetConfigs
   onChange: (configs: DatasetConfigs, isRetrievalModeChange?: boolean) => void
   isInWorkflow?: boolean
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index 7f7a4799d1..701b7053f5 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -139,11 +139,11 @@ const ParamsConfig = ({
             />
 
             <div className='mt-6 flex justify-end'>
-              <Button className='mr-2 flex-shrink-0' onClick={() => {
+              <Button className='mr-2 shrink-0' onClick={() => {
                 setTempDataSetConfigs(datasetConfigs)
                 setRerankSettingModalOpen(false)
               }}>{t('common.operation.cancel')}</Button>
-              <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
+              <Button variant='primary' className='shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
             </div>
           </Modal>
         )
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 5cae3c1bfb..6bbab4a6e0 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -72,6 +72,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import { fetchFileUploadConfig } from '@/service/common'
 import { correctProvider } from '@/utils'
+import PluginDependency from '@/app/components/workflow/plugin-dependency'
 
 type PublishConfig = {
   modelConfig: ModelConfig
@@ -1038,6 +1039,7 @@ const Configuration: FC = () => {
               onAutoAddPromptVariable={handleAddPromptVariable}
             />
           )}
+          <PluginDependency />
         </>
       </FeaturesProvider>
     </ConfigContext.Provider>
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 45ef8dbde6..2064b92132 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -80,24 +80,16 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
       let app
 
       if (currentTab === CreateFromDSLModalTab.FROM_FILE) {
-        const leakedData = await mutateAsync({ dslString: fileContent })
-        if (leakedData?.leaked.length) {
-          isCreatingRef.current = false
-          return
-        }
         app = await importApp({
           data: fileContent || '',
         })
+        await mutateAsync({ dslString: fileContent })
       }
       if (currentTab === CreateFromDSLModalTab.FROM_URL) {
-        const leakedData = await mutateAsync({ url: dslUrlValue })
-        if (leakedData?.leaked.length) {
-          isCreatingRef.current = false
-          return
-        }
         app = await importAppFromUrl({
           url: dslUrlValue || '',
         })
+        await mutateAsync({ url: dslUrlValue })
       }
       if (onSuccess)
         onSuccess()
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index e7cc4148ef..f23100a796 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -243,7 +243,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         <div className='w-full mt-8'>
           <p className='system-xs-medium text-gray-500'>{t(`${prefixSettings}.workflow.title`)}</p>
           <div className='flex justify-between items-center'>
-            <div className='font-medium system-sm-semibold flex-grow text-gray-900'>{t(`${prefixSettings}.workflow.subTitle`)}</div>
+            <div className='font-medium system-sm-semibold grow text-gray-900'>{t(`${prefixSettings}.workflow.subTitle`)}</div>
             <Switch
               disabled={!(appInfo.mode === 'workflow' || appInfo.mode === 'advanced-chat')}
               defaultValue={inputInfo.show_workflow_steps}
@@ -269,7 +269,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         {systemFeatures.enable_web_sso_switch_component && <div className='w-full mt-8'>
           <p className='system-xs-medium text-gray-500'>{t(`${prefixSettings}.sso.label`)}</p>
           <div className='flex justify-between items-center'>
-            <div className='font-medium system-sm-semibold flex-grow text-gray-900'>{t(`${prefixSettings}.sso.title`)}</div>
+            <div className='font-medium system-sm-semibold grow text-gray-900'>{t(`${prefixSettings}.sso.title`)}</div>
             <Tooltip
               disabled={systemFeatures.sso_enforced_for_web}
               popupContent={
@@ -284,8 +284,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         </div>}
         {!isShowMore && <div className='w-full cursor-pointer mt-8' onClick={() => setIsShowMore(true)}>
           <div className='flex justify-between'>
-            <div className={`font-medium ${s.settingTitle} flex-grow text-gray-900`}>{t(`${prefixSettings}.more.entry`)}</div>
-            <div className='flex-shrink-0 w-4 h-4 text-gray-500'>
+            <div className={`font-medium ${s.settingTitle} grow text-gray-900`}>{t(`${prefixSettings}.more.entry`)}</div>
+            <div className='shrink-0 w-4 h-4 text-gray-500'>
               <ChevronRightIcon />
             </div>
           </div>
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index 1ff2bdd174..8ae8bb0538 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -59,7 +59,7 @@ const FileFromLinkOrLocal = ({
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} asChild>
         {trigger(open)}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-10'>
+      <PortalToFollowElemContent className='z-[1001]'>
         <div className='p-3 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
           {
             showFromLink && (
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index e09e4bbc0d..2eaee6f901 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -48,7 +48,7 @@ const MembersPage = () => {
   return (
     <>
       <div className='flex flex-col'>
-        <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
+        <div className='flex items-center mb-4 p-3 gap-1 bg-gray-50 rounded-2xl'>
           <LogoEmbeddedChatHeader className='!w-10 !h-10' />
           <div className='grow mx-2'>
             <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index cef2146daa..f4e23b566b 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -18,7 +18,8 @@ import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
 import Radio from '@/app/components/base/radio'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
-import ToolSelector from '@/app/components/tools/tool-selector'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
+import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 
 type FormProps = {
   className?: string
@@ -347,7 +348,32 @@ const Form: FC<FormProps> = ({
     }
 
     if (formSchema.type === FormTypeEnum.appSelector) {
-      // TODO
+      const {
+        variable,
+        label,
+        required,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+            {label[language] || label.en_US}
+            {
+              required && (
+                <span className='ml-1 text-red-500'>*</span>
+              )
+            }
+            {tooltipContent}
+          </div>
+          <AppSelector
+            disabled={readonly}
+            value={value[variable]}
+            onSelect={item => handleFormChange(variable, item as any)}
+          />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
     }
   }
 
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index cf1549b8c3..8f44bf6eae 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -76,7 +76,7 @@ const Header = () => {
                   <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
                   <div className='system-xs-medium'>
                     <span className='p-1'>
-                      {t('billing.upgradeBtn.encourage')}
+                      {t('billing.upgradeBtn.encourageShort')}
                     </span>
                   </div>
                 </PremiumBadge>
@@ -98,7 +98,7 @@ const Header = () => {
                 <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
                 <div className='system-xs-medium'>
                   <span className='p-1'>
-                    {t('billing.upgradeBtn.encourage')}
+                    {t('billing.upgradeBtn.encourageShort')}
                   </span>
                 </div>
               </PremiumBadge>
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index 54f00d68a4..4e57af59e0 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -3,8 +3,9 @@ import type { FC } from 'react'
 import Modal from '@/app/components/base/modal'
 import React, { useCallback, useState } from 'react'
 import { InstallStep } from '../../types'
-import type { Dependency } from '../../types'
+import type { Dependency, Plugin } from '../../types'
 import Install from './steps/install'
+import Installed from './steps/installed'
 import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'plugin.installModal'
@@ -29,7 +30,8 @@ const InstallBundle: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
-
+  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
+  const [installStatus, setInstallStatus] = useState<{ success: boolean }[]>([])
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -41,6 +43,12 @@ const InstallBundle: FC<Props> = ({
     return t(`${i18nPrefix}.installPlugin`)
   }, [step, t])
 
+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: { success: boolean }[]) => {
+    setInstallStatus(installStatus)
+    setInstalledPlugins(plugins)
+    setStep(InstallStep.installed)
+  }, [])
+
   return (
     <Modal
       isShow={true}
@@ -57,6 +65,14 @@ const InstallBundle: FC<Props> = ({
         <Install
           fromDSLPayload={fromDSLPayload}
           onCancel={onClose}
+          onInstalled={handleInstalled}
+        />
+      )}
+      {step === InstallStep.installed && (
+        <Installed
+          list={installedPlugins}
+          installStatus={installStatus}
+          onCancel={onClose}
         />
       )}
     </Modal>
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
index 1a773ca6a8..49f7e448aa 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
@@ -29,7 +29,10 @@ const Item: FC<Props> = ({
   const [payload, setPayload] = React.useState<Plugin | null>(null)
   useEffect(() => {
     if (data) {
-      const payload = pluginManifestToCardPluginProps(data.manifest)
+      const payload = {
+        ...pluginManifestToCardPluginProps(data.manifest),
+        plugin_id: data.unique_identifier,
+      }
       onFetchedPayload(payload)
       setPayload(payload)
     }
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
index ef083b6924..1fff28b5fc 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
@@ -5,6 +5,7 @@ import type { Plugin } from '../../../types'
 import Card from '../../../card'
 import Checkbox from '@/app/components/base/checkbox'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import useGetIcon from '../../base/use-get-icon'
 
 type Props = {
   checked: boolean
@@ -17,6 +18,7 @@ const LoadedItem: FC<Props> = ({
   onCheckedChange,
   payload,
 }) => {
+  const { getIconUrl } = useGetIcon()
   return (
     <div className='flex items-center space-x-2'>
       <Checkbox
@@ -26,7 +28,10 @@ const LoadedItem: FC<Props> = ({
       />
       <Card
         className='grow'
-        payload={payload}
+        payload={{
+          ...payload,
+          icon: getIconUrl(payload.icon),
+        }}
         titleLeft={payload.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge> : null}
       />
     </div>
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx
index 8442c0a13d..aeafa8f18f 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx
@@ -26,9 +26,12 @@ const InstallByDSLList: FC<Props> = ({
   const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
   const handlePlugInFetched = useCallback((index: number) => {
     return (p: Plugin) => {
-      setPlugins(plugins.map((item, i) => i === index ? p : item))
+      const nextPlugins = produce(getPlugins(), (draft) => {
+        draft[index] = p
+      })
+      setPlugins(nextPlugins)
     }
-  }, [plugins])
+  }, [getPlugins, setPlugins])
 
   const marketPlaceInDSLIndex = useMemo(() => {
     const res: number[] = []
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index 1ac7f95746..5600481a69 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -7,23 +7,25 @@ import { RiLoader2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import InstallByDSLList from './install-by-dsl-list'
 import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
-
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   fromDSLPayload: Dependency[]
+  onInstalled: (plugins: Plugin[], installStatus: { success: boolean }[]) => void
   onCancel: () => void
 }
 
 const Install: FC<Props> = ({
   fromDSLPayload,
+  onInstalled,
   onCancel,
 }) => {
   const { t } = useTranslation()
   const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
   const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
   const selectedPluginsNum = selectedPlugins.length
-
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const handleSelect = (plugin: Plugin, selectedIndex: number) => {
     const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
     let nextSelectedPlugins
@@ -35,18 +37,21 @@ const Install: FC<Props> = ({
     const nextSelectedIndexes = isSelected ? selectedIndexes.filter(i => i !== selectedIndex) : [...selectedIndexes, selectedIndex]
     setSelectedIndexes(nextSelectedIndexes)
   }
+
   const [canInstall, setCanInstall] = React.useState(false)
   const handleLoadedAllPlugin = useCallback(() => {
     setCanInstall(true)
-  }, [selectedPlugins, selectedIndexes])
+  }, [])
 
   // Install from marketplace and github
   const { mutate: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({
-    onSuccess: () => {
-      console.log('success!')
+    onSuccess: (res: { success: boolean }[]) => {
+      onInstalled(selectedPlugins, res)
+      const hasInstallSuccess = res.some(r => r.success)
+      if (hasInstallSuccess)
+        invalidateInstalledPluginList()
     },
   })
-  console.log(canInstall, !isInstalling, selectedPlugins.length === 0)
   const handleInstall = () => {
     installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index)))
   }
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
new file mode 100644
index 0000000000..f8f058f2fa
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@@ -0,0 +1,60 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import Card from '@/app/components/plugins/card'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import useGetIcon from '../../base/use-get-icon'
+
+type Props = {
+  list: Plugin[]
+  installStatus: { success: boolean }[]
+  onCancel: () => void
+}
+
+const Installed: FC<Props> = ({
+  list,
+  installStatus,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  const { getIconUrl } = useGetIcon()
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        {/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
+          {list.map((plugin, index) => {
+            return (
+              <Card
+                key={plugin.plugin_id}
+                className='w-full'
+                payload={{
+                  ...plugin,
+                  icon: getIconUrl(plugin.icon),
+                }}
+                installed={installStatus[index].success}
+                installFailed={!installStatus[index].success}
+                titleLeft={plugin.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge> : null}
+              />
+            )
+          })}
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={onCancel}
+        >
+          {t('common.operation.close')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default React.memo(Installed)
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
index 6b63c24aea..d4f15c0de4 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import Button from '@/app/components/base/button'
-import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
+import type { PluginDeclaration, PluginType, UpdateFromGitHubPayload } from '../../../types'
 import Card from '../../../card'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { pluginManifestToCardPluginProps } from '../../utils'
@@ -13,6 +13,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import { usePluginTaskList } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
 import { parseGitHubUrl } from '../../utils'
+import { useCategories } from '../../../hooks'
 
 type LoadedProps = {
   updatePayload: UpdateFromGitHubPayload
@@ -40,6 +41,7 @@ const Loaded: React.FC<LoadedProps> = ({
   onFailed,
 }) => {
   const { t } = useTranslation()
+  const { categoriesMap } = useCategories()
   const [isInstalling, setIsInstalling] = React.useState(false)
   const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub()
   const { handleRefetch } = usePluginTaskList()
@@ -115,7 +117,7 @@ const Loaded: React.FC<LoadedProps> = ({
       <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
         <Card
           className='w-full'
-          payload={pluginManifestToCardPluginProps(payload)}
+          payload={{ ...pluginManifestToCardPluginProps(payload), type: categoriesMap[payload.category].label as PluginType }}
           titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
         />
       </div>
diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
index 416cc99b91..dec07d0319 100644
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@@ -52,7 +52,10 @@ const TagsFilter = ({
       open={open}
       onOpenChange={setOpen}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+      <PortalToFollowElemTrigger
+        className='shrink-0'
+        onClick={() => setOpen(v => !v)}
+      >
         <div className={cn(
           'flex items-center text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
           size === 'large' && 'px-2 py-1 h-8',
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
new file mode 100644
index 0000000000..6dd9926d35
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
@@ -0,0 +1,125 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import { PortalSelect } from '@/app/components/base/select'
+import { InputVarType } from '@/app/components/workflow/types'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
+
+type Props = {
+  inputsForms: any[]
+  inputs: Record<string, any>
+  inputsRef: any
+  onFormChange: (value: Record<string, any>) => void
+}
+const AppInputsForm = ({
+  inputsForms,
+  inputs,
+  inputsRef,
+  onFormChange,
+}: Props) => {
+  const { t } = useTranslation()
+
+  const handleFormChange = useCallback((variable: string, value: any) => {
+    onFormChange({
+      ...inputsRef.current,
+      [variable]: value,
+    })
+  }, [onFormChange, inputsRef])
+
+  const renderField = (form: any) => {
+    const {
+      label,
+      variable,
+      options,
+    } = form
+    if (form.type === InputVarType.textInput) {
+      return (
+        <Input
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.number) {
+      return (
+        <Input
+          type="number"
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.paragraph) {
+      return (
+        <Textarea
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.select) {
+      return (
+        <PortalSelect
+          popupClassName="w-[356px] z-[1050]"
+          value={inputs[variable] || ''}
+          items={options.map((option: string) => ({ value: option, name: option }))}
+          onSelect={item => handleFormChange(variable, item.value as string)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.singleFile) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={inputs[variable] ? [inputs[variable]] : []}
+          onChange={files => handleFormChange(variable, files[0])}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: 1,
+            fileUploadConfig: (form as any).fileUploadConfig,
+          }}
+        />
+      )
+    }
+    if (form.type === InputVarType.multiFiles) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={inputs[variable]}
+          onChange={files => handleFormChange(variable, files)}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: form.max_length,
+            fileUploadConfig: (form as any).fileUploadConfig,
+          }}
+        />
+      )
+    }
+  }
+
+  if (!inputsForms.length)
+    return null
+
+  return (
+    <div className='px-4 py-2 flex flex-col gap-4'>
+      {inputsForms.map(form => (
+        <div key={form.variable}>
+          <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+            <div className='truncate'>{form.label}</div>
+            {!form.required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
+          </div>
+          {renderField(form)}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default AppInputsForm
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
new file mode 100644
index 0000000000..54fbfc75a9
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -0,0 +1,180 @@
+'use client'
+import React, { useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
+import AppInputsForm from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form'
+import { useAppDetail } from '@/service/use-apps'
+import { useAppWorkflow } from '@/service/use-workflow'
+import { useFileUploadConfig } from '@/service/use-common'
+import { Resolution } from '@/types/app'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import type { App } from '@/types/app'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { BlockEnum, InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
+
+import cn from '@/utils/classnames'
+
+type Props = {
+  value?: {
+    app_id: string
+    inputs: Record<string, any>
+  }
+  appDetail: App
+  onFormChange: (value: Record<string, any>) => void
+}
+
+const AppInputsPanel = ({
+  value,
+  appDetail,
+  onFormChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const inputsRef = useRef<any>(value?.inputs || {})
+  const isBasicApp = appDetail.mode !== 'advanced-chat' && appDetail.mode !== 'workflow'
+  const { data: fileUploadConfig } = useFileUploadConfig()
+  const { data: currentApp, isFetching: isAppLoading } = useAppDetail(appDetail.id)
+  const { data: currentWorkflow, isFetching: isWorkflowLoading } = useAppWorkflow(isBasicApp ? 'empty' : appDetail.id)
+  const isLoading = isAppLoading || isWorkflowLoading
+
+  const basicAppFileConfig = useMemo(() => {
+    let fileConfig: FileUpload
+    if (isBasicApp)
+      fileConfig = currentApp?.model_config?.file_upload as FileUpload
+    else
+      fileConfig = currentWorkflow?.features?.file_upload as FileUpload
+    return {
+      image: {
+        detail: fileConfig?.image?.detail || Resolution.high,
+        enabled: !!fileConfig?.image?.enabled,
+        number_limits: fileConfig?.image?.number_limits || 3,
+        transfer_methods: fileConfig?.image?.transfer_methods || ['local_file', 'remote_url'],
+      },
+      enabled: !!(fileConfig?.enabled || fileConfig?.image?.enabled),
+      allowed_file_types: fileConfig?.allowed_file_types || [SupportUploadFileTypes.image],
+      allowed_file_extensions: fileConfig?.allowed_file_extensions || [...FILE_EXTS[SupportUploadFileTypes.image]].map(ext => `.${ext}`),
+      allowed_file_upload_methods: fileConfig?.allowed_file_upload_methods || fileConfig?.image?.transfer_methods || ['local_file', 'remote_url'],
+      number_limits: fileConfig?.number_limits || fileConfig?.image?.number_limits || 3,
+    }
+  }, [currentApp?.model_config?.file_upload, currentWorkflow?.features?.file_upload, isBasicApp])
+
+  const inputFormSchema = useMemo(() => {
+    if (!currentApp)
+      return []
+    let inputFormSchema = []
+    if (isBasicApp) {
+      inputFormSchema = currentApp.model_config.user_input_form.filter((item: any) => !item.external_data_tool).map((item: any) => {
+        if (item.paragraph) {
+          return {
+            ...item.paragraph,
+            type: 'paragraph',
+            required: false,
+          }
+        }
+        if (item.number) {
+          return {
+            ...item.number,
+            type: 'number',
+            required: false,
+          }
+        }
+        if (item.select) {
+          return {
+            ...item.select,
+            type: 'select',
+            required: false,
+          }
+        }
+
+        if (item['file-list']) {
+          return {
+            ...item['file-list'],
+            type: 'file-list',
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        if (item.file) {
+          return {
+            ...item.file,
+            type: 'file',
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        return {
+          ...item['text-input'],
+          type: 'text-input',
+          required: false,
+        }
+      })
+    }
+    else {
+      const startNode = currentWorkflow?.graph.nodes.find(node => node.data.type === BlockEnum.Start) as any
+      inputFormSchema = startNode?.data.variables.map((variable: any) => {
+        if (variable.type === InputVarType.multiFiles) {
+          return {
+            ...variable,
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        if (variable.type === InputVarType.singleFile) {
+          return {
+            ...variable,
+            required: false,
+            fileUploadConfig,
+          }
+        }
+        return {
+          ...variable,
+          required: false,
+        }
+      })
+    }
+    if ((currentApp.mode === 'completion' || currentApp.mode === 'workflow') && basicAppFileConfig.enabled) {
+      inputFormSchema.push({
+        label: 'Image Upload',
+        variable: '#image#',
+        type: InputVarType.singleFile,
+        required: false,
+        ...basicAppFileConfig,
+        fileUploadConfig,
+      })
+    }
+    return inputFormSchema
+  }, [basicAppFileConfig, currentApp, currentWorkflow, fileUploadConfig, isBasicApp])
+
+  const handleFormChange = (value: Record<string, any>) => {
+    inputsRef.current = value
+    onFormChange(value)
+  }
+
+  return (
+    <div className={cn('max-h-[240px] flex flex-col pb-4 rounded-b-2xl border-t border-divider-subtle')}>
+      {isLoading && <div className='pt-3'><Loading type='app' /></div>}
+      {!isLoading && (
+        <div className='shrink-0 mt-3 mb-2 px-4 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.params')}</div>
+      )}
+      {!isLoading && !inputFormSchema.length && (
+        <div className='h-16 flex flex-col justify-center items-center'>
+          <div className='text-text-tertiary system-sm-regular'>{t('app.appSelector.noParams')}</div>
+        </div>
+      )}
+      {!isLoading && !!inputFormSchema.length && (
+        <div className='grow overflow-y-auto'>
+          <AppInputsForm
+            inputs={value?.inputs || {}}
+            inputsRef={inputsRef}
+            inputsForms={inputFormSchema}
+            onFormChange={handleFormChange}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AppInputsPanel
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
new file mode 100644
index 0000000000..a5be6ffbdd
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@@ -0,0 +1,113 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo } from 'react'
+import { useState } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+import Input from '@/app/components/base/input'
+import AppIcon from '@/app/components/base/app-icon'
+import type { App } from '@/types/app'
+
+type Props = {
+  appList: App[]
+  disabled: boolean
+  trigger: React.ReactNode
+  placement?: Placement
+  offset?: OffsetOptions
+  isShow: boolean
+  onShowChange: (isShow: boolean) => void
+  onSelect: (app: App) => void
+}
+
+const AppPicker: FC<Props> = ({
+  appList,
+  disabled,
+  trigger,
+  placement = 'right-start',
+  offset = 0,
+  isShow,
+  onShowChange,
+  onSelect,
+}) => {
+  const [searchText, setSearchText] = useState('')
+  const filteredAppList = useMemo(() => {
+    return (appList || []).filter(app => app.name.toLowerCase().includes(searchText.toLowerCase())).filter(app => (app.mode !== 'advanced-chat' && app.mode !== 'workflow') || !!app.workflow)
+  }, [appList, searchText])
+  const getAppType = (app: App) => {
+    switch (app.mode) {
+      case 'advanced-chat':
+        return 'chatflow'
+      case 'agent-chat':
+        return 'agent'
+      case 'chat':
+        return 'chat'
+      case 'completion':
+        return 'completion'
+      case 'workflow':
+        return 'workflow'
+    }
+  }
+
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  return (
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={isShow}
+      onOpenChange={onShowChange}
+    >
+      <PortalToFollowElemTrigger
+        onClick={handleTriggerClick}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className="relative w-[356px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+          <div className='p-2 pb-1'>
+            <Input
+              showLeftIcon
+              showClearIcon
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+              onClear={() => setSearchText('')}
+            />
+          </div>
+          <div className='p-1'>
+            {filteredAppList.map(app => (
+              <div
+                key={app.id}
+                className='flex items-center gap-3 py-1 pl-2 pr-3 rounded-lg hover:bg-state-base-hover cursor-pointer'
+                onClick={() => onSelect(app)}
+              >
+                <AppIcon
+                  className='shrink-0'
+                  size='xs'
+                  iconType={app.icon_type}
+                  icon={app.icon}
+                  background={app.icon_background}
+                  imageUrl={app.icon_url}
+                />
+                <div title={app.name} className='grow system-sm-medium text-components-input-text-filled'>{app.name}</div>
+                <div className='shrink-0 text-text-tertiary system-2xs-medium-uppercase'>{getAppType(app)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(AppPicker)
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
new file mode 100644
index 0000000000..2706597a86
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
@@ -0,0 +1,48 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import AppIcon from '@/app/components/base/app-icon'
+import type { App } from '@/types/app'
+import cn from '@/utils/classnames'
+
+type Props = {
+  open: boolean
+  appDetail?: App
+}
+
+const AppTrigger = ({
+  open,
+  appDetail,
+}: Props) => {
+  const { t } = useTranslation()
+  return (
+    <div className={cn(
+      'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
+      open && 'bg-state-base-hover-alt',
+      appDetail && 'pl-1.5 py-1.5',
+    )}>
+      {appDetail && (
+        <AppIcon
+          className='mr-2'
+          size='xs'
+          iconType={appDetail.icon_type}
+          icon={appDetail.icon}
+          background={appDetail.icon_background}
+          imageUrl={appDetail.icon_url}
+        />
+      )}
+      {appDetail && (
+        <div title={appDetail.name} className='grow system-sm-medium text-components-input-text-filled'>{appDetail.name}</div>
+      )}
+      {!appDetail && (
+        <div className='grow text-components-input-text-placeholder system-sm-regular truncate'>{t('app.appSelector.placeholder')}</div>
+      )}
+      <RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+    </div>
+  )
+}
+
+export default AppTrigger
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
new file mode 100644
index 0000000000..59556dcc10
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
@@ -0,0 +1,139 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import AppTrigger from '@/app/components/plugins/plugin-detail-panel/app-selector/app-trigger'
+import AppPicker from '@/app/components/plugins/plugin-detail-panel/app-selector/app-picker'
+import AppInputsPanel from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel'
+import { useAppFullList } from '@/service/use-apps'
+import type { App } from '@/types/app'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+
+type Props = {
+  value?: {
+    app_id: string
+    inputs: Record<string, any>
+    files?: any[]
+  }
+  disabled?: boolean
+  placement?: Placement
+  offset?: OffsetOptions
+  onSelect: (app: {
+    app_id: string
+    inputs: Record<string, any>
+    files?: any[]
+  }) => void
+  supportAddCustomTool?: boolean
+}
+const AppSelector: FC<Props> = ({
+  value,
+  disabled,
+  placement = 'bottom',
+  offset = 4,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const [isShow, onShowChange] = useState(false)
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  const { data: appList } = useAppFullList()
+  const currentAppInfo = useMemo(() => {
+    if (!appList?.data || !value)
+      return undefined
+    return appList.data.find(app => app.id === value.app_id)
+  }, [appList?.data, value])
+  const [isShowChooseApp, setIsShowChooseApp] = useState(false)
+  const handleSelectApp = (app: App) => {
+    const clearValue = app.id !== value?.app_id
+    const appValue = {
+      app_id: app.id,
+      inputs: clearValue ? {} : value?.inputs || {},
+      files: clearValue ? [] : value?.files || [],
+    }
+    onSelect(appValue)
+    setIsShowChooseApp(false)
+  }
+  const handleFormChange = (inputs: Record<string, any>) => {
+    const newFiles = inputs['#image#']
+    delete inputs['#image#']
+    const newValue = {
+      app_id: value?.app_id || '',
+      inputs,
+      files: newFiles ? [newFiles] : value?.files || [],
+    }
+    onSelect(newValue)
+  }
+
+  const formattedValue = useMemo(() => {
+    return {
+      app_id: value?.app_id || '',
+      inputs: {
+        ...value?.inputs,
+        ...(value?.files?.length ? { '#image#': value.files[0] } : {}),
+      },
+    }
+  }, [value])
+
+  return (
+    <>
+      <PortalToFollowElem
+        placement={placement}
+        offset={offset}
+        open={isShow}
+        onOpenChange={onShowChange}
+      >
+        <PortalToFollowElemTrigger
+          className='w-full'
+          onClick={handleTriggerClick}
+        >
+          <AppTrigger
+            open={isShow}
+            appDetail={currentAppInfo}
+          />
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <div className="relative w-[389px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+            <div className='px-4 py-3 flex flex-col gap-1'>
+              <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.label')}</div>
+              <AppPicker
+                placement='bottom'
+                offset={offset}
+                trigger={
+                  <AppTrigger
+                    open={isShowChooseApp}
+                    appDetail={currentAppInfo}
+                  />
+                }
+                isShow={isShowChooseApp}
+                onShowChange={setIsShowChooseApp}
+                disabled={false}
+                appList={appList?.data || []}
+                onSelect={handleSelectApp}
+              />
+            </div>
+            {/* app inputs config panel */}
+            {currentAppInfo && (
+              <AppInputsPanel
+                value={formattedValue}
+                appDetail={currentAppInfo}
+                onFormChange={handleFormChange}
+              />
+            )}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </>
+  )
+}
+export default React.memo(AppSelector)
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index ca4813d3c6..2d200cb348 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -69,7 +69,7 @@ const EndpointModal: FC<Props> = ({
               isEditMode={true}
               showOnVariableMap={{}}
               validating={false}
-              inputClassName='bg-components-input-bg-normal hover:bg-state-base-hover-alt'
+              inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
               fieldMoreInfo={item => item.url
                 ? (<a
                   href={item.url}
diff --git a/web/app/components/tools/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
similarity index 96%
rename from web/app/components/tools/tool-selector/index.tsx
rename to web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index 0b13ab9bc2..eab0dd94d2 100644
--- a/web/app/components/tools/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -7,11 +7,11 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import ToolTrigger from '@/app/components/tools/tool-selector/tool-trigger'
+import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import ToolCredentialForm from '@/app/components/tools/tool-selector/tool-credentials-form'
+import ToolCredentialForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form'
 import Toast from '@/app/components/base/toast'
 
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/tools/tool-selector/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
similarity index 99%
rename from web/app/components/tools/tool-selector/tool-credentials-form.tsx
rename to web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
index c267a0373d..327605166c 100644
--- a/web/app/components/tools/tool-selector/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
@@ -67,7 +67,7 @@ const ToolCredentialForm: FC<Props> = ({
               isEditMode={true}
               showOnVariableMap={{}}
               validating={false}
-              inputClassName='bg-components-input-bg-normal hover:bg-state-base-hover-alt'
+              inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
               fieldMoreInfo={item => item.url
                 ? (<a
                   href={item.url}
diff --git a/web/app/components/tools/tool-selector/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
similarity index 93%
rename from web/app/components/tools/tool-selector/tool-trigger.tsx
rename to web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
index e481448bcd..9a1a2a221c 100644
--- a/web/app/components/tools/tool-selector/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
@@ -40,7 +40,7 @@ const ToolTrigger = ({
         </div>
       )}
       {value && (
-        <div className='grow system-sm-regular text-components-input-text-filled'>{value.tool_name}</div>
+        <div className='grow system-sm-medium text-components-input-text-filled'>{value.tool_name}</div>
       )}
       {!value && (
         <div className='grow text-components-input-text-placeholder system-sm-regular'>{t('tools.toolSelector.placeholder')}</div>
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts b/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts
index 37a6859cb1..3ebafe5ba6 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts
@@ -11,7 +11,7 @@ export const usePluginTaskStatus = () => {
     pluginTasks,
   } = usePluginTaskList()
   const { mutate } = useMutationClearTaskPlugin()
-  const allPlugins = pluginTasks.map(task => task.plugins.map((plugin) => {
+  const allPlugins = pluginTasks.filter(task => task.status !== TaskStatus.success).map(task => task.plugins.map((plugin) => {
     return {
       ...plugin,
       taskId: task.id,
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index 2ea822df42..2d7ae46874 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -34,11 +34,14 @@ const PluginTasks = () => {
     handleClearErrorPlugin,
   } = usePluginTaskStatus()
   const { getIconUrl } = useGetIcon()
+  const runningPluginsLength = runningPlugins.length
+  const errorPluginsLength = errorPlugins.length
+  const successPluginsLength = successPlugins.length
 
-  const isInstalling = runningPlugins.length > 0 && errorPlugins.length === 0 && successPlugins.length === 0
-  const isInstallingWithError = errorPlugins.length > 0 && errorPlugins.length < totalPluginsLength
-  const isSuccess = successPlugins.length === totalPluginsLength && totalPluginsLength > 0
-  const isFailed = errorPlugins.length === totalPluginsLength && totalPluginsLength > 0
+  const isInstalling = runningPluginsLength > 0 && errorPluginsLength === 0
+  const isInstallingWithError = runningPluginsLength > 0 && errorPluginsLength > 0
+  const isSuccess = successPluginsLength === totalPluginsLength && totalPluginsLength > 0
+  const isFailed = runningPluginsLength === 0 && (errorPluginsLength + successPluginsLength) === totalPluginsLength && totalPluginsLength > 0
 
   const tip = useMemo(() => {
     if (isInstalling)
@@ -51,6 +54,9 @@ const PluginTasks = () => {
       return t('plugin.task.installError', { errorLength: errorPlugins.length })
   }, [isInstalling, isInstallingWithError, isFailed, errorPlugins, runningPlugins, totalPluginsLength, t])
 
+  if (!totalPluginsLength)
+    return null
+
   return (
     <div className='flex items-center'>
       <PortalToFollowElem
@@ -72,7 +78,7 @@ const PluginTasks = () => {
             <div
               className={cn(
                 'relative flex items-center justify-center w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
-                (isInstallingWithError || isFailed) && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt',
+                (isInstallingWithError || isFailed) && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt cursor-pointer',
               )}
             >
               <RiInstallLine
@@ -115,7 +121,9 @@ const PluginTasks = () => {
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-10'>
           <div className='p-1 pb-2 w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
-            <div className='flex items-center px-2 pt-1 h-7 system-sm-semibold-uppercase'>{t('plugin.task.installedError')}</div>
+            <div className='flex items-center px-2 pt-1 h-7 system-sm-semibold-uppercase'>
+              {t('plugin.task.installedError', { errorLength: errorPlugins.length })}
+            </div>
             {
               errorPlugins.map(errorPlugin => (
                 <div
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index d1f9219d3a..296bb2bef8 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -133,8 +133,10 @@ const TextGeneration: FC<IMainProps> = ({
   const handleSend = () => {
     setIsCallBatchAPI(false)
     setControlSend(Date.now())
+
     // eslint-disable-next-line ts/no-use-before-define
     setAllTaskList([]) // clear batch task running status
+
     // eslint-disable-next-line ts/no-use-before-define
     showResSidebar()
   }
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index d60ceb1f71..d27fb6385b 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -43,16 +43,14 @@ const AllTools = ({
   supportAddCustomTool,
   onShowAddCustomCollectionModal,
 }: AllToolsProps) => {
-  const tabs = useToolTabs()
   const language = useGetLanguage()
+  const tabs = useToolTabs()
   const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
   const [activeView, setActiveView] = useState<ViewType>(ViewType.flat)
-
+  const hasFilter = searchText || tags.length > 0
   const isMatchingKeywords = (text: string, keywords: string) => {
     return text.toLowerCase().includes(keywords.toLowerCase())
   }
-
-  const hasFilter = searchText || tags.length > 0
   const tools = useMemo(() => {
     let mergedTools: ToolWithProvider[] = []
     if (activeTab === ToolTypeEnum.All)
diff --git a/web/app/components/workflow/plugin-dependency/index.tsx b/web/app/components/workflow/plugin-dependency/index.tsx
index c7f5b71c75..13f138114b 100644
--- a/web/app/components/workflow/plugin-dependency/index.tsx
+++ b/web/app/components/workflow/plugin-dependency/index.tsx
@@ -1,13 +1,25 @@
+import { useCallback } from 'react'
 import { useStore } from './store'
+import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
 
 const PluginDependency = () => {
   const dependencies = useStore(s => s.dependencies)
 
+  const handleCancelInstallBundle = useCallback(() => {
+    const { setDependencies } = useStore.getState()
+    setDependencies([])
+  }, [])
+
   if (!dependencies.length)
     return null
 
   return (
-    <div>a</div>
+    <div>
+      <InstallBundle
+        fromDSLPayload={dependencies}
+        onClose={handleCancelInstallBundle}
+      />
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/run/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-result-panel.tsx
index b13eadec99..f71adbbece 100644
--- a/web/app/components/workflow/run/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-result-panel.tsx
@@ -104,17 +104,17 @@ const IterationResultPanel: FC<Props> = ({
               onClick={() => toggleIteration(index)}
             >
               <div className={cn('flex items-center gap-2 flex-grow')}>
-                <div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 flex-shrink-0'>
+                <div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 shrink-0'>
                   <Iteration className='w-3 h-3 text-text-primary-on-surface' />
                 </div>
-                <span className='system-sm-semibold-uppercase text-text-primary flex-grow'>
+                <span className='system-sm-semibold-uppercase text-text-primary grow'>
                   {t(`${i18nPrefix}.iteration`)} {index + 1}
                 </span>
                 {iterationStatusShow(index, iteration, iterDurationMap)}
               </div>
             </div>
             {expandedIterations[index] && <div
-              className="flex-grow h-px bg-divider-subtle"
+              className="grow h-px bg-divider-subtle"
             ></div>}
             <div className={cn(
               'overflow-hidden transition-all duration-200',
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 983f467c04..1208644246 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -144,7 +144,7 @@ const NodePanel: FC<Props> = ({
                   className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
                   onClick={handleOnShowIterationDetail}
                 >
-                  <Iteration className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+                  <Iteration className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
                   <div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
                     <>
                       {t('workflow.nodes.iteration.comma')}
@@ -153,12 +153,12 @@ const NodePanel: FC<Props> = ({
                   )}</div>
                   {justShowIterationNavArrow
                     ? (
-                      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+                      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
                     )
                     : (
                       <div className='flex items-center space-x-1 text-[#155EEF]'>
                         <div className='text-[13px] font-normal '>{t('workflow.common.viewDetailInTracingPanel')}</div>
-                        <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+                        <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
                       </div>
                     )}
                 </Button>
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 57b3a5cf5f..3f1c2465cf 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -57,7 +57,7 @@ function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): Tracing
     levelCounts[levelKey]++
 
     const parentTitle = parentId ? parallelStacks[parentId]?.parallelTitle : ''
-    const levelNumber = parentTitle ? parseInt(parentTitle.split('-')[1]) + 1 : 1
+    const levelNumber = parentTitle ? Number.parseInt(parentTitle.split('-')[1]) + 1 : 1
     const letter = parallelChildCounts[levelKey]?.size > 1 ? String.fromCharCode(64 + levelCounts[levelKey]) : ''
     return `${t('workflow.common.parallel')}-${levelNumber}${letter}`
   }
@@ -65,7 +65,7 @@ function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): Tracing
   const getBranchTitle = (parentId: string | null, branchNum: number): string => {
     const levelKey = parentId || 'root'
     const parentTitle = parentId ? parallelStacks[parentId]?.parallelTitle : ''
-    const levelNumber = parentTitle ? parseInt(parentTitle.split('-')[1]) + 1 : 1
+    const levelNumber = parentTitle ? Number.parseInt(parentTitle.split('-')[1]) + 1 : 1
     const letter = parallelChildCounts[levelKey]?.size > 1 ? String.fromCharCode(64 + levelCounts[levelKey]) : ''
     const branchLetter = String.fromCharCode(64 + branchNum)
     return `${t('workflow.common.branch')}-${levelNumber}${letter}-${branchLetter}`
@@ -227,7 +227,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
               <span>{node.parallelTitle}</span>
             </div>
             <div
-              className="mx-2 flex-grow h-px bg-divider-subtle"
+              className="mx-2 grow h-px bg-divider-subtle"
               style={{ background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08), rgba(255, 255, 255, 0)' }}
             ></div>
           </div>
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 86a3648c4e..cc19b2790c 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -77,17 +77,13 @@ const UpdateDSLModal = ({
       return
     try {
       if (appDetail && fileContent) {
-        const leakedData = await mutateAsync({ dslString: fileContent })
-        if (leakedData?.leaked.length) {
-          isCreatingRef.current = false
-          return
-        }
         setLoading(true)
         const {
           graph,
           features,
           hash,
         } = await updateWorkflowDraftFromDSL(appDetail.id, fileContent)
+        await mutateAsync({ dslString: fileContent })
         const { nodes, edges, viewport } = graph
         const newFeatures = {
           file: {
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index 3377a9b2f3..639ca289eb 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -133,6 +133,12 @@ const translation = {
       removeConfirmContent: 'The current configuration is in use, removing it will turn off the Tracing feature.',
     },
   },
+  appSelector: {
+    label: 'APP',
+    placeholder: 'Select an app...',
+    params: 'APP PARAMETERS',
+    noParams: 'No parameters needed',
+  },
 }
 
 export default translation
diff --git a/web/i18n/sl-SI/plugin-tags.ts b/web/i18n/sl-SI/plugin-tags.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/web/i18n/sl-SI/plugin.ts b/web/i18n/sl-SI/plugin.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index ee316200fa..b7249b4af8 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -132,6 +132,12 @@ const translation = {
       removeConfirmContent: '当前配置正在使用中，删除它将关闭追踪功能。',
     },
   },
+  appSelector: {
+    label: '应用',
+    placeholder: '选择一个应用',
+    params: '应用参数',
+    noParams: '无需参数',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 28be0bf3e9..ab87085652 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -127,7 +127,7 @@ const translation = {
     explore: '探索',
     apps: '工作室',
     plugins: '插件',
-    exploreMarketplace: '探索市场',
+    exploreMarketplace: '探索 Marketplace',
     pluginsTips: '集成第三方插件或创建与 ChatGPT 兼容的 AI 插件。',
     datasets: '知识库',
     datasetsTips: '即将到来: 上传自己的长文本数据，或通过 Webhook 集成自己的数据源',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index 2e9f234af6..f4b1aeb53b 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -22,15 +22,15 @@ const translation = {
     noInstalled: '无已安装的插件',
     notFound: '未找到插件',
     source: {
-      marketplace: '从市场安装',
-      github: '从GitHub安装',
-      local: '从本地文件安装',
+      marketplace: '从 Marketplace 安装',
+      github: '从 GitHub 安装',
+      local: '本地插件',
     },
   },
   source: {
-    marketplace: '市场',
+    marketplace: 'Marketplace',
     github: 'GitHub',
-    local: '本地文件',
+    local: '本地插件',
   },
   detailPanel: {
     categoryTip: {
diff --git a/web/service/use-apps.ts b/web/service/use-apps.ts
new file mode 100644
index 0000000000..1a3e9cedbb
--- /dev/null
+++ b/web/service/use-apps.ts
@@ -0,0 +1,27 @@
+import { get } from './base'
+import type { App } from '@/types/app'
+import type { AppListResponse } from '@/models/app'
+import { useInvalid } from './use-base'
+import { useQuery } from '@tanstack/react-query'
+
+const NAME_SPACE = 'apps'
+
+// TODO paging for list
+const useAppFullListKey = [NAME_SPACE, 'full-list']
+export const useAppFullList = () => {
+  return useQuery<AppListResponse>({
+    queryKey: useAppFullListKey,
+    queryFn: () => get<AppListResponse>('/apps', { params: { page: 1, limit: 100 } }),
+  })
+}
+
+export const useInvalidateAppFullList = () => {
+  return useInvalid(useAppFullListKey)
+}
+
+export const useAppDetail = (appID: string) => {
+  return useQuery<App>({
+    queryKey: [NAME_SPACE, 'detail', appID],
+    queryFn: () => get<App>(`/apps/${appID}`),
+  })
+}
diff --git a/web/service/use-common.ts b/web/service/use-common.ts
new file mode 100644
index 0000000000..98ab535948
--- /dev/null
+++ b/web/service/use-common.ts
@@ -0,0 +1,14 @@
+import { get } from './base'
+import type {
+  FileUploadConfigResponse,
+} from '@/models/common'
+import { useQuery } from '@tanstack/react-query'
+
+const NAME_SPACE = 'common'
+
+export const useFileUploadConfig = () => {
+  return useQuery<FileUploadConfigResponse>({
+    queryKey: [NAME_SPACE, 'file-upload-config'],
+    queryFn: () => get<FileUploadConfigResponse>('/files/upload'),
+  })
+}
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 6697948877..8ab970db13 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -9,6 +9,7 @@ import type {
   PluginsFromMarketplaceResponse,
   uploadGitHubResponse,
 } from '@/app/components/plugins/types'
+import { TaskStatus } from '@/app/components/plugins/types'
 import type {
   PluginsSearchParams,
 } from '@/app/components/plugins/marketplace/types'
@@ -97,7 +98,7 @@ export const useUploadGitHub = (payload: {
 export const useInstallFromMarketplaceAndGitHub = ({
   onSuccess,
 }: {
-  onSuccess?: () => void
+  onSuccess?: (res: { success: boolean }[]) => void
 }) => {
   return useMutation({
     mutationFn: (payload: Dependency[]) => {
@@ -121,6 +122,7 @@ export const useInstallFromMarketplaceAndGitHub = ({
           })
           return ({ success: true })
         }
+        // eslint-disable-next-line unused-imports/no-unused-vars
         catch (e) {
           return Promise.resolve({ success: false })
         }
@@ -216,14 +218,14 @@ export const usePluginTaskList = () => {
     queryKey: usePluginTaskListKey,
     queryFn: async () => {
       const currentData = await get<{ tasks: PluginTask[] }>('/workspaces/current/plugin/tasks?page=1&page_size=100')
-      const taskDone = currentData.tasks.every(task => task.total_plugins === task.completed_plugins)
+      const taskDone = currentData.tasks.every(task => task.status === TaskStatus.success)
 
       if (taskDone)
         setEnabled(false)
 
       return currentData
     },
-    // refetchInterval: 5000,
+    refetchInterval: 5000,
     enabled,
   })
   const handleRefetch = useCallback(() => {
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
new file mode 100644
index 0000000000..9413854726
--- /dev/null
+++ b/web/service/use-workflow.ts
@@ -0,0 +1,18 @@
+import { get } from './base'
+import type {
+  FetchWorkflowDraftResponse,
+} from '@/types/workflow'
+import { useQuery } from '@tanstack/react-query'
+
+const NAME_SPACE = 'workflow'
+
+export const useAppWorkflow = (appID: string) => {
+  return useQuery<FetchWorkflowDraftResponse>({
+    queryKey: [NAME_SPACE, 'publish', appID],
+    queryFn: () => {
+      if (appID === 'empty')
+        return Promise.resolve({} as unknown as FetchWorkflowDraftResponse)
+      return get<FetchWorkflowDraftResponse>(`/apps/${appID}/workflows/publish`)
+    },
+  })
+}
diff --git a/web/types/app.ts b/web/types/app.ts
index a95a2cf0cd..2f5f6254ff 100644
--- a/web/types/app.ts
+++ b/web/types/app.ts
@@ -351,6 +351,13 @@ export type App = {
   /** api site url */
   api_base_url: string
   tags: Tag[]
+  workflow?: {
+    id: string
+    created_at: number
+    created_by?: string
+    updated_at: number
+    updated_by?: string
+  }
 }
 
 export type AppSSO = {