From fc90a8fb32df4ea6d087c8e899ff29a374e46189 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 29 Sep 2025 10:43:57 +0800
Subject: [PATCH] fix plugin detail panel display in tool list

---
 web/app/components/tools/provider-list.tsx | 17 ++++++++++++-----
 web/app/components/tools/types.ts          |  2 ++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index d267b49c79..611d895780 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -17,10 +17,11 @@ import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import MCPList from './mcp'
 import { useAllToolProviders } from '@/service/use-tools'
-import { useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInvalidateInstalledPluginList, usePluginDeclarationFromMarketPlace } from '@/service/use-plugins'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { ToolTypeEnum } from '../workflow/block-selector/types'
 import { useMarketplace } from './marketplace/hooks'
+import type { PluginDetail } from '@/app/components/plugins/types'
 
 const getToolType = (type: string) => {
   switch (type) {
@@ -77,12 +78,18 @@ const ProviderList = () => {
   const currentProvider = useMemo<Collection | undefined>(() => {
     return filteredCollectionList.find(collection => collection.id === currentProviderId)
   }, [currentProviderId, filteredCollectionList])
-  const { data: pluginList } = useInstalledPluginList()
+  const { data: pluginDetail } = usePluginDeclarationFromMarketPlace(currentProvider?.plugin_unique_identifier || '')
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const currentPluginDetail = useMemo(() => {
-    const detail = pluginList?.plugins.find(plugin => plugin.plugin_id === currentProvider?.plugin_id)
-    return detail
-  }, [currentProvider?.plugin_id, pluginList?.plugins])
+    if (!pluginDetail) return
+    const detail = {
+      plugin_id: currentProvider?.plugin_id,
+      plugin_unique_identifier: currentProvider?.plugin_unique_identifier,
+      declaration: pluginDetail?.manifest,
+      tenant_id: currentProvider?.tenant_id,
+    }
+    return detail as PluginDetail
+  }, [currentProvider, pluginDetail])
 
   const toolListTailRef = useRef<HTMLDivElement>(null)
   const showMarketplacePanel = useCallback(() => {
diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts
index 93b15b0533..381b864170 100644
--- a/web/app/components/tools/types.ts
+++ b/web/app/components/tools/types.ts
@@ -53,6 +53,8 @@ export type Collection = {
   allow_delete: boolean
   labels: string[]
   plugin_id?: string
+  plugin_unique_identifier?: string
+  tenant_id?: string
   letter?: string
   // MCP Server
   server_url?: string