chore: bump version 4.5.4

* Initial plan

* Add "Select All" checkbox to Plugin and MCP Server selection dialogs

Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

* Make "Select All" text clickable by adding onClick handler to container

Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

.github/pull_request_template.md

@@ -2,6 +2,17 @@
 
 > 请在此部分填写你实现/解决/优化的内容:  
 > Summary of what you implemented/solved/optimized:
+> 
+
+### 更改前后对比截图 / Screenshots
+
+> 请在此部分粘贴更改前后对比截图（可以是界面截图、控制台输出、对话截图等）:  
+> Please paste the screenshots of changes before and after here (can be interface screenshots, console output, conversation screenshots, etc.):
+> 
+> 修改前 / Before:
+> 
+> 修改后 / After:
+> 
 
 ## 检查清单 / Checklist
 

README.md

@@ -31,25 +31,16 @@ LangBot 是一个开源的大语言模型原生即时通信机器人开发平台
 
 ## 📦 开始使用
 
-#### 快速体验（推荐）
+#### 快速部署
 
-使用 `uvx` 一键启动（无需安装）：
+使用 `uvx` 一键启动（需要先安装 [uv](https://docs.astral.sh/uv/getting-started/installation/)）：
 
 ```bash
 uvx langbot
 ```
 
-或使用 `pip` 安装后运行：
-
-```bash
-pip install langbot
-langbot
-```
-
 访问 http://localhost:5300 即可开始使用。
 
-详细文档[PyPI 安装](docs/PYPI_INSTALLATION.md)。
-
 #### Docker Compose 部署
 
 ```bash

README_EN.md

@@ -25,25 +25,16 @@ LangBot is an open-source LLM native instant messaging robot development platfor
 
 ## 📦 Getting Started
 
-#### Quick Start (Recommended)
+#### Quick Start
 
-Use `uvx` to start with one command (no installation required):
+Use `uvx` to start with one command (need to install [uv](https://docs.astral.sh/uv/getting-started/installation/)):
 
 ```bash
 uvx langbot
 ```
 
-Or install with `pip` and run:
-
-```bash
-pip install langbot
-langbot
-```
-
 Visit http://localhost:5300 to start using it.
 
-Detailed documentation [PyPI Installation](docs/PYPI_INSTALLATION.md).
-
 #### Docker Compose Deployment
 
 ```bash

README_JP.md

@@ -25,6 +25,16 @@ LangBot は、エージェント、RAG、MCP などの LLM アプリケーショ
 
 ## 📦 始め方
 
+#### クイックスタート
+
+`uvx` を使用した迅速なデプロイ（[uv](https://docs.astral.sh/uv/getting-started/installation/) が必要です）：
+
+```bash
+uvx langbot
+```
+
+http://localhost:5300 にアクセスして使用を開始します。
+
 #### Docker Compose デプロイ
 
 ```bash

README_TW.md

@@ -27,6 +27,16 @@ LangBot 是一個開源的大語言模型原生即時通訊機器人開發平台
 
 ## 📦 開始使用
 
+#### 快速部署
+
+使用 `uvx` 一鍵啟動（需要先安裝 [uv](https://docs.astral.sh/uv/getting-started/installation/) ）：
+
+```bash
+uvx langbot
+```
+
+訪問 http://localhost:5300 即可開始使用。
+
 #### Docker Compose 部署
 
 ```bash

docker/docker-compose.yaml

@@ -7,6 +7,7 @@ services:
   langbot_plugin_runtime:
     image: rockchin/langbot:latest
     container_name: langbot_plugin_runtime
+    platform: linux/amd64 # For Apple Silicon compatibility
     volumes:
       - ./data/plugins:/app/data/plugins
     ports:
@@ -21,6 +22,7 @@ services:
   langbot:
     image: rockchin/langbot:latest
     container_name: langbot
+    platform: linux/amd64 # For Apple Silicon compatibility
     volumes:
       - ./data:/app/data
       - ./plugins:/app/plugins

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "langbot"
-version = "4.6.0-beta.2"
+version = "4.5.4"
 description = "Easy-to-use global IM bot platform designed for LLM era"
 readme = "README.md"
 license-files = ["LICENSE"]
@@ -63,7 +63,7 @@ dependencies = [
     "langchain-text-splitters>=0.0.1",
     "chromadb>=0.4.24",
     "qdrant-client (>=1.15.1,<2.0.0)",
-    "langbot-plugin==0.1.11b1",
+    "langbot-plugin==0.1.12",
     "asyncpg>=0.30.0",
     "line-bot-sdk>=3.19.0",
     "tboxsdk>=0.0.10",

src/langbot/__init__.py

@@ -1,3 +1,3 @@
 """LangBot - Easy-to-use global IM bot platform designed for LLM era"""
 
-__version__ = '4.6.0-beta.2'
+__version__ = '4.5.4'

src/langbot/libs/wecom_api/api.py

@@ -109,14 +109,13 @@ class WecomClient:
     async def send_image(self, user_id: str, agent_id: int, media_id: str):
         if not await self.check_access_token():
             self.access_token = await self.get_access_token(self.secret)
-        url = self.base_url + '/media/upload?access_token=' + self.access_token
+
+        url = self.base_url + '/message/send?access_token=' + self.access_token
         async with httpx.AsyncClient() as client:
             params = {
                 'touser': user_id,
-                'toparty': '',
-                'totag': '',
-                'agentid': agent_id,
                 'msgtype': 'image',
+                'agentid': agent_id,
                 'image': {
                     'media_id': media_id,
                 },
@@ -125,19 +124,13 @@ class WecomClient:
                 'enable_duplicate_check': 0,
                 'duplicate_check_interval': 1800,
             }
-            try:
-                response = await client.post(url, json=params)
-                data = response.json()
-            except Exception as e:
-                await self.logger.error(f'发送图片失败:{data}')
-                raise Exception('Failed to send image: ' + str(e))
-
-            # 企业微信错误码40014和42001，代表accesstoken问题
+            response = await client.post(url, json=params)
+            data = response.json()
             if data['errcode'] == 40014 or data['errcode'] == 42001:
                 self.access_token = await self.get_access_token(self.secret)
                 return await self.send_image(user_id, agent_id, media_id)
-
             if data['errcode'] != 0:
+                await self.logger.error(f'发送图片失败:{data}')
                 raise Exception('Failed to send image: ' + str(data))
 
     async def send_private_msg(self, user_id: str, agent_id: int, content: str):

src/langbot/pkg/api/http/controller/groups/system.py

@@ -55,17 +55,6 @@ class SystemRouterGroup(group.RouterGroup):
 
             return self.success(data=exec(py_code, {'ap': ap}))
 
-        @self.route('/debug/tools/call', methods=['POST'], auth_type=group.AuthType.USER_TOKEN)
-        async def _() -> str:
-            if not constants.debug_mode:
-                return self.http_status(403, 403, 'Forbidden')
-
-            data = await quart.request.json
-
-            return self.success(
-                data=await self.ap.tool_mgr.execute_func_call(data['tool_name'], data['tool_parameters'])
-            )
-
         @self.route(
             '/debug/plugin/action',
             methods=['POST'],

src/langbot/pkg/pipeline/wrapper/wrapper.py

@@ -96,7 +96,7 @@ class ResponseWrapper(stage.PipelineStage):
                     if result.tool_calls is not None and len(result.tool_calls) > 0:  # 有函数调用
                         function_names = [tc.function.name for tc in result.tool_calls]
 
-                        reply_text = f'调用函数 {".".join(function_names)}...'
+                        reply_text = f'Call {".".join(function_names)}...'
 
                         query.resp_message_chain.append(
                             platform_message.MessageChain([platform_message.Plain(text=reply_text)])

src/langbot/pkg/plugin/connector.py

@@ -8,6 +8,7 @@ import os
 import sys
 import httpx
 from async_lru import alru_cache
+from langbot_plugin.api.entities.builtin.pipeline.query import provider_session
 
 from ..core import app
 from . import handler
@@ -321,13 +322,20 @@ class PluginRuntimeConnector:
         return tools
 
     async def call_tool(
-        self, tool_name: str, parameters: dict[str, Any], bound_plugins: list[str] | None = None
+        self,
+        tool_name: str,
+        parameters: dict[str, Any],
+        session: provider_session.Session,
+        query_id: int,
+        bound_plugins: list[str] | None = None,
     ) -> dict[str, Any]:
         if not self.is_enable_plugin:
             return {'error': 'Tool not found: plugin system is disabled'}
 
         # Pass include_plugins to runtime for validation
-        return await self.handler.call_tool(tool_name, parameters, include_plugins=bound_plugins)
+        return await self.handler.call_tool(
+            tool_name, parameters, session.model_dump(serialize_as_any=True), query_id, include_plugins=bound_plugins
+        )
 
     async def list_commands(self, bound_plugins: list[str] | None = None) -> list[ComponentManifest]:
         if not self.is_enable_plugin:

src/langbot/pkg/plugin/handler.py

@@ -620,7 +620,12 @@ class RuntimeConnectionHandler(handler.Handler):
         )
 
     async def call_tool(
-        self, tool_name: str, parameters: dict[str, Any], include_plugins: list[str] | None = None
+        self,
+        tool_name: str,
+        parameters: dict[str, Any],
+        session: dict[str, Any],
+        query_id: int,
+        include_plugins: list[str] | None = None,
     ) -> dict[str, Any]:
         """Call tool"""
         result = await self.call_action(
@@ -628,6 +633,8 @@ class RuntimeConnectionHandler(handler.Handler):
             {
                 'tool_name': tool_name,
                 'tool_parameters': parameters,
+                'session': session,
+                'query_id': query_id,
                 'include_plugins': include_plugins,
             },
             timeout=60,

src/langbot/pkg/provider/runners/localagent.py

@@ -196,7 +196,7 @@ class LocalAgentRunner(runner.RequestRunner):
 
                     parameters = json.loads(func.arguments)
 
-                    func_ret = await self.ap.tool_mgr.execute_func_call(func.name, parameters)
+                    func_ret = await self.ap.tool_mgr.execute_func_call(func.name, parameters, query=query)
                     if is_stream:
                         msg = provider_message.MessageChunk(
                             role='tool',

src/langbot/pkg/provider/tools/loader.py

@@ -3,6 +3,8 @@ from __future__ import annotations
 import abc
 import typing
 
+from langbot_plugin.api.entities.events import pipeline_query
+
 from ...core import app
 import langbot_plugin.api.entities.builtin.resource.tool as resource_tool
 
@@ -45,7 +47,7 @@ class ToolLoader(abc.ABC):
         pass
 
     @abc.abstractmethod
-    async def invoke_tool(self, name: str, parameters: dict) -> typing.Any:
+    async def invoke_tool(self, name: str, parameters: dict, query: pipeline_query.Query) -> typing.Any:
         """执行工具调用"""
         pass
 

src/langbot/pkg/provider/tools/loaders/mcp.py

@@ -4,6 +4,7 @@ import enum
 import typing
 from contextlib import AsyncExitStack
 import traceback
+from langbot_plugin.api.entities.events import pipeline_query
 import sqlalchemy
 import asyncio
 
@@ -329,7 +330,7 @@ class MCPLoader(loader.ToolLoader):
                     return True
         return False
 
-    async def invoke_tool(self, name: str, parameters: dict) -> typing.Any:
+    async def invoke_tool(self, name: str, parameters: dict, query: pipeline_query.Query) -> typing.Any:
         """执行工具调用"""
         for session in self.sessions.values():
             for function in session.get_tools():

src/langbot/pkg/provider/tools/loaders/plugin.py

@@ -3,6 +3,8 @@ from __future__ import annotations
 import typing
 import traceback
 
+from langbot_plugin.api.entities.events import pipeline_query
+
 from .. import loader
 import langbot_plugin.api.entities.builtin.resource.tool as resource_tool
 
@@ -43,9 +45,11 @@ class PluginToolLoader(loader.ToolLoader):
                 return tool
         return None
 
-    async def invoke_tool(self, name: str, parameters: dict) -> typing.Any:
+    async def invoke_tool(self, name: str, parameters: dict, query: pipeline_query.Query) -> typing.Any:
         try:
-            return await self.ap.plugin_connector.call_tool(name, parameters)
+            return await self.ap.plugin_connector.call_tool(
+                name, parameters, session=query.session, query_id=query.query_id
+            )
         except Exception as e:
             self.ap.logger.error(f'执行函数 {name} 时发生错误: {e}')
             traceback.print_exc()

src/langbot/pkg/provider/tools/toolmgr.py

@@ -7,6 +7,7 @@ from langbot.pkg.utils import importutil
 from langbot.pkg.provider.tools import loaders
 from langbot.pkg.provider.tools.loaders import mcp as mcp_loader, plugin as plugin_loader
 import langbot_plugin.api.entities.builtin.resource.tool as resource_tool
+from langbot_plugin.api.entities.events import pipeline_query
 
 importutil.import_modules_in_pkg(loaders)
 
@@ -91,13 +92,13 @@ class ToolManager:
 
         return tools
 
-    async def execute_func_call(self, name: str, parameters: dict) -> typing.Any:
+    async def execute_func_call(self, name: str, parameters: dict, query: pipeline_query.Query) -> typing.Any:
         """执行函数调用"""
 
         if await self.plugin_tool_loader.has_tool(name):
-            return await self.plugin_tool_loader.invoke_tool(name, parameters)
+            return await self.plugin_tool_loader.invoke_tool(name, parameters, query)
         elif await self.mcp_tool_loader.has_tool(name):
-            return await self.mcp_tool_loader.invoke_tool(name, parameters)
+            return await self.mcp_tool_loader.invoke_tool(name, parameters, query)
         else:
             raise ValueError(f'未找到工具: {name}')
 

src/langbot/pkg/utils/constants.py

@@ -1,4 +1,6 @@
-semantic_version = 'v4.6.0-beta.2'
+import langbot
+
+semantic_version = f'v{langbot.__version__}'
 
 required_database_version = 11
 """Tag the version of the database schema, used to check if the database needs to be migrated"""

web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx

@@ -289,12 +289,16 @@ export default function ApiIntegrationDialog({
                   {t('common.noApiKeys')}
                 </div>
               ) : (
-                <div className="border rounded-md">
+                <div className="border rounded-md overflow-x-auto">
                   <Table>
                     <TableHeader>
                       <TableRow>
-                        <TableHead>{t('common.name')}</TableHead>
-                        <TableHead>{t('common.apiKeyValue')}</TableHead>
+                        <TableHead className="min-w-[120px]">
+                          {t('common.name')}
+                        </TableHead>
+                        <TableHead className="min-w-[200px]">
+                          {t('common.apiKeyValue')}
+                        </TableHead>
                         <TableHead className="w-[100px]">
                           {t('common.actions')}
                         </TableHead>
@@ -372,16 +376,20 @@ export default function ApiIntegrationDialog({
                   {t('common.noWebhooks')}
                 </div>
               ) : (
-                <div className="border rounded-md">
-                  <Table>
+                <div className="border rounded-md overflow-x-auto max-w-full">
+                  <Table className="table-fixed w-full">
                     <TableHeader>
                       <TableRow>
-                        <TableHead>{t('common.name')}</TableHead>
-                        <TableHead>{t('common.webhookUrl')}</TableHead>
+                        <TableHead className="w-[150px]">
+                          {t('common.name')}
+                        </TableHead>
+                        <TableHead className="w-[380px]">
+                          {t('common.webhookUrl')}
+                        </TableHead>
                         <TableHead className="w-[80px]">
                           {t('common.webhookEnabled')}
                         </TableHead>
-                        <TableHead className="w-[100px]">
+                        <TableHead className="w-[80px]">
                           {t('common.actions')}
                         </TableHead>
                       </TableRow>
@@ -389,20 +397,30 @@ export default function ApiIntegrationDialog({
                     <TableBody>
                       {webhooks.map((webhook) => (
                         <TableRow key={webhook.id}>
-                          <TableCell>
-                            <div>
-                              <div className="font-medium">{webhook.name}</div>
+                          <TableCell className="truncate">
+                            <div className="truncate">
+                              <div
+                                className="font-medium truncate"
+                                title={webhook.name}
+                              >
+                                {webhook.name}
+                              </div>
                               {webhook.description && (
-                                <div className="text-sm text-muted-foreground">
+                                <div
+                                  className="text-sm text-muted-foreground truncate"
+                                  title={webhook.description}
+                                >
                                   {webhook.description}
                                 </div>
                               )}
                             </div>
                           </TableCell>
                           <TableCell>
-                            <code className="text-sm bg-muted px-2 py-1 rounded break-all">
-                              {webhook.url}
-                            </code>
+                            <div className="overflow-x-auto max-w-[380px]">
+                              <code className="text-sm bg-muted px-2 py-1 rounded whitespace-nowrap inline-block">
+                                {webhook.url}
+                              </code>
+                            </div>
                           </TableCell>
                           <TableCell>
                             <Switch

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -240,7 +240,7 @@ export default function DynamicFormItemComponent({
                             model.requester,
                           )}
                           alt="icon"
-                          className="w-8 h-8 rounded-full"
+                          className="w-8 h-8 rounded-[8%]"
                         />
                         <h4 className="font-medium">{model.name}</h4>
                       </div>

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -188,40 +188,6 @@ export default function HomeSidebar({
           </div>
         )}
 
-        <SidebarChild
-          onClick={() => {
-            // open docs.langbot.app
-            const language = localStorage.getItem('langbot_language');
-            if (language === 'zh-Hans') {
-              window.open(
-                'https://docs.langbot.app/zh/insight/guide.html',
-                '_blank',
-              );
-            } else if (language === 'zh-Hant') {
-              window.open(
-                'https://docs.langbot.app/zh/insight/guide.html',
-                '_blank',
-              );
-            } else {
-              window.open(
-                'https://docs.langbot.app/en/insight/guide.html',
-                '_blank',
-              );
-            }
-          }}
-          isSelected={false}
-          icon={
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
-            </svg>
-          }
-          name={t('common.helpDocs')}
-        />
-
         <SidebarChild
           onClick={() => {
             setApiKeyDialogOpen(true);
@@ -302,6 +268,41 @@ export default function HomeSidebar({
 
             <div className="flex flex-col gap-2 w-full">
               <span className="text-sm font-medium">{t('common.account')}</span>
+              <Button
+                variant="ghost"
+                className="w-full justify-start font-normal"
+                onClick={() => {
+                  // open docs.langbot.app
+                  const language = localStorage.getItem('langbot_language');
+                  if (language === 'zh-Hans') {
+                    window.open(
+                      'https://docs.langbot.app/zh/insight/guide.html',
+                      '_blank',
+                    );
+                  } else if (language === 'zh-Hant') {
+                    window.open(
+                      'https://docs.langbot.app/zh/insight/guide.html',
+                      '_blank',
+                    );
+                  } else {
+                    window.open(
+                      'https://docs.langbot.app/en/insight/guide.html',
+                      '_blank',
+                    );
+                  }
+                  setPopoverOpen(false);
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="w-4 h-4 mr-2"
+                >
+                  <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
+                </svg>
+                {t('common.helpDocs')}
+              </Button>
               <Button
                 variant="ghost"
                 className="w-full justify-start font-normal"

web/src/app/home/knowledge/components/kb-form/KBForm.tsx

@@ -235,7 +235,7 @@ export default function KBForm({
                                           model.requester,
                                         )}
                                         alt="icon"
-                                        className="w-8 h-8 rounded-full"
+                                        className="w-8 h-8 rounded-[8%]"
                                       />
                                       <h4 className="font-medium">
                                         {model.name}

web/src/app/home/pipelines/components/pipeline-extensions/PipelineExtension.tsx

@@ -146,6 +146,26 @@ export default function PipelineExtension({
     );
   };
 
+  const handleToggleAllPlugins = () => {
+    if (tempSelectedPluginIds.length === allPlugins.length) {
+      // Deselect all
+      setTempSelectedPluginIds([]);
+    } else {
+      // Select all
+      setTempSelectedPluginIds(allPlugins.map((p) => getPluginId(p)));
+    }
+  };
+
+  const handleToggleAllMCPServers = () => {
+    if (tempSelectedMCPIds.length === allMCPServers.length) {
+      // Deselect all
+      setTempSelectedMCPIds([]);
+    } else {
+      // Select all
+      setTempSelectedMCPIds(allMCPServers.map((s) => s.uuid || ''));
+    }
+  };
+
   const handleConfirmPluginSelection = async () => {
     const newSelected = allPlugins.filter((p) =>
       tempSelectedPluginIds.includes(getPluginId(p)),
@@ -214,7 +234,19 @@ export default function PipelineExtension({
                         </div>
                         <div className="flex gap-1 mt-1">
                           <PluginComponentList
-                            components={plugin.components}
+                            components={(() => {
+                              const componentKindCount: Record<string, number> =
+                                {};
+                              for (const component of plugin.components) {
+                                const kind = component.manifest.manifest.kind;
+                                if (componentKindCount[kind]) {
+                                  componentKindCount[kind]++;
+                                } else {
+                                  componentKindCount[kind] = 1;
+                                }
+                              }
+                              return componentKindCount;
+                            })()}
                             showComponentName={true}
                             showTitle={false}
                             useBadge={true}
@@ -330,49 +362,86 @@ export default function PipelineExtension({
           <DialogHeader>
             <DialogTitle>{t('pipelines.extensions.selectPlugins')}</DialogTitle>
           </DialogHeader>
+          {allPlugins.length > 0 && (
+            <div
+              className="flex items-center gap-3 px-1 py-2 border-b cursor-pointer"
+              onClick={handleToggleAllPlugins}
+            >
+              <Checkbox
+                checked={
+                  tempSelectedPluginIds.length === allPlugins.length &&
+                  allPlugins.length > 0
+                }
+                onCheckedChange={handleToggleAllPlugins}
+              />
+              <span className="text-sm font-medium">
+                {t('pipelines.extensions.selectAll')}
+              </span>
+            </div>
+          )}
           <div className="flex-1 overflow-y-auto space-y-2 pr-2">
-            {allPlugins.map((plugin) => {
-              const pluginId = getPluginId(plugin);
-              const metadata = plugin.manifest.manifest.metadata;
-              const isSelected = tempSelectedPluginIds.includes(pluginId);
-              return (
-                <div
-                  key={pluginId}
-                  className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
-                  onClick={() => handleTogglePlugin(pluginId)}
-                >
-                  <Checkbox checked={isSelected} />
-                  <img
-                    src={backendClient.getPluginIconURL(
-                      metadata.author || '',
-                      metadata.name,
+            {allPlugins.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('pipelines.extensions.noPluginsInstalled')}
+                </p>
+              </div>
+            ) : (
+              allPlugins.map((plugin) => {
+                const pluginId = getPluginId(plugin);
+                const metadata = plugin.manifest.manifest.metadata;
+                const isSelected = tempSelectedPluginIds.includes(pluginId);
+                return (
+                  <div
+                    key={pluginId}
+                    className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
+                    onClick={() => handleTogglePlugin(pluginId)}
+                  >
+                    <Checkbox checked={isSelected} />
+                    <img
+                      src={backendClient.getPluginIconURL(
+                        metadata.author || '',
+                        metadata.name,
+                      )}
+                      alt={metadata.name}
+                      className="w-10 h-10 rounded-lg border bg-muted object-cover flex-shrink-0"
+                    />
+                    <div className="flex-1">
+                      <div className="font-medium">{metadata.name}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {metadata.author} • v{metadata.version}
+                      </div>
+                      <div className="flex gap-1 mt-1">
+                        <PluginComponentList
+                          components={(() => {
+                            const componentKindCount: Record<string, number> =
+                              {};
+                            for (const component of plugin.components) {
+                              const kind = component.manifest.manifest.kind;
+                              if (componentKindCount[kind]) {
+                                componentKindCount[kind]++;
+                              } else {
+                                componentKindCount[kind] = 1;
+                              }
+                            }
+                            return componentKindCount;
+                          })()}
+                          showComponentName={true}
+                          showTitle={false}
+                          useBadge={true}
+                          t={t}
+                        />
+                      </div>
+                    </div>
+                    {!plugin.enabled && (
+                      <Badge variant="secondary">
+                        {t('pipelines.extensions.disabled')}
+                      </Badge>
                     )}
-                    alt={metadata.name}
-                    className="w-10 h-10 rounded-lg border bg-muted object-cover flex-shrink-0"
-                  />
-                  <div className="flex-1">
-                    <div className="font-medium">{metadata.name}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {metadata.author} • v{metadata.version}
-                    </div>
-                    <div className="flex gap-1 mt-1">
-                      <PluginComponentList
-                        components={plugin.components}
-                        showComponentName={true}
-                        showTitle={false}
-                        useBadge={true}
-                        t={t}
-                      />
-                    </div>
                   </div>
-                  {!plugin.enabled && (
-                    <Badge variant="secondary">
-                      {t('pipelines.extensions.disabled')}
-                    </Badge>
-                  )}
-                </div>
-              );
-            })}
+                );
+              })
+            )}
           </div>
           <DialogFooter>
             <Button
@@ -396,47 +465,74 @@ export default function PipelineExtension({
               {t('pipelines.extensions.selectMCPServers')}
             </DialogTitle>
           </DialogHeader>
+          {allMCPServers.length > 0 && (
+            <div
+              className="flex items-center gap-3 px-1 py-2 border-b cursor-pointer"
+              onClick={handleToggleAllMCPServers}
+            >
+              <Checkbox
+                checked={
+                  tempSelectedMCPIds.length === allMCPServers.length &&
+                  allMCPServers.length > 0
+                }
+                onCheckedChange={handleToggleAllMCPServers}
+              />
+              <span className="text-sm font-medium">
+                {t('pipelines.extensions.selectAll')}
+              </span>
+            </div>
+          )}
           <div className="flex-1 overflow-y-auto space-y-2 pr-2">
-            {allMCPServers.map((server) => {
-              const isSelected = tempSelectedMCPIds.includes(server.uuid || '');
-              return (
-                <div
-                  key={server.uuid}
-                  className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
-                  onClick={() => handleToggleMCPServer(server.uuid || '')}
-                >
-                  <Checkbox checked={isSelected} />
-                  <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center flex-shrink-0">
-                    <Server className="h-5 w-5 text-muted-foreground" />
-                  </div>
-                  <div className="flex-1">
-                    <div className="font-medium">{server.name}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {server.mode}
+            {allMCPServers.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('pipelines.extensions.noMCPServersConfigured')}
+                </p>
+              </div>
+            ) : (
+              allMCPServers.map((server) => {
+                const isSelected = tempSelectedMCPIds.includes(
+                  server.uuid || '',
+                );
+                return (
+                  <div
+                    key={server.uuid}
+                    className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
+                    onClick={() => handleToggleMCPServer(server.uuid || '')}
+                  >
+                    <Checkbox checked={isSelected} />
+                    <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center flex-shrink-0">
+                      <Server className="h-5 w-5 text-muted-foreground" />
                     </div>
-                    {server.runtime_info &&
-                      server.runtime_info.status === 'connected' && (
-                        <Badge
-                          variant="outline"
-                          className="flex items-center gap-1 mt-1"
-                        >
-                          <Wrench className="h-3 w-3 text-black dark:text-white" />
-                          <span className="text-xs text-black dark:text-white">
-                            {t('pipelines.extensions.toolCount', {
-                              count: server.runtime_info.tool_count || 0,
-                            })}
-                          </span>
-                        </Badge>
-                      )}
+                    <div className="flex-1">
+                      <div className="font-medium">{server.name}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {server.mode}
+                      </div>
+                      {server.runtime_info &&
+                        server.runtime_info.status === 'connected' && (
+                          <Badge
+                            variant="outline"
+                            className="flex items-center gap-1 mt-1"
+                          >
+                            <Wrench className="h-3 w-3 text-black dark:text-white" />
+                            <span className="text-xs text-black dark:text-white">
+                              {t('pipelines.extensions.toolCount', {
+                                count: server.runtime_info.tool_count || 0,
+                              })}
+                            </span>
+                          </Badge>
+                        )}
+                    </div>
+                    {!server.enable && (
+                      <Badge variant="secondary">
+                        {t('pipelines.extensions.disabled')}
+                      </Badge>
+                    )}
                   </div>
-                  {!server.enable && (
-                    <Badge variant="secondary">
-                      {t('pipelines.extensions.disabled')}
-                    </Badge>
-                  )}
-                </div>
-              );
-            })}
+                );
+              })
+            )}
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setMcpDialogOpen(false)}>

web/src/app/home/plugins/components/plugin-installed/PluginComponentList.tsx

@@ -1,4 +1,3 @@
-import { PluginComponent } from '@/app/infra/entities/plugin';
 import { TFunction } from 'i18next';
 import { Wrench, AudioWaveform, Hash } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
@@ -9,31 +8,22 @@ export default function PluginComponentList({
   showTitle,
   useBadge,
   t,
+  responsive = false,
 }: {
-  components: PluginComponent[];
+  components: Record<string, number>;
   showComponentName: boolean;
   showTitle: boolean;
   useBadge: boolean;
   t: TFunction;
+  responsive?: boolean;
 }) {
-  const componentKindCount: Record<string, number> = {};
-
-  for (const component of components) {
-    const kind = component.manifest.manifest.kind;
-    if (componentKindCount[kind]) {
-      componentKindCount[kind]++;
-    } else {
-      componentKindCount[kind] = 1;
-    }
-  }
-
   const kindIconMap: Record<string, React.ReactNode> = {
     Tool: <Wrench className="w-5 h-5" />,
     EventListener: <AudioWaveform className="w-5 h-5" />,
     Command: <Hash className="w-5 h-5" />,
   };
 
-  const componentKindList = Object.keys(componentKindCount);
+  const componentKindList = Object.keys(components || {});
 
   return (
     <>
@@ -44,11 +34,21 @@ export default function PluginComponentList({
             return (
               <>
                 {useBadge && (
-                  <Badge variant="outline">
+                  <Badge
+                    key={kind}
+                    variant="outline"
+                    className="flex items-center gap-1"
+                  >
                     {kindIconMap[kind]}
-                    {showComponentName &&
-                      t('plugins.componentName.' + kind) + '  '}
-                    {componentKindCount[kind]}
+                    {/* 响应式显示组件名称：在中等屏幕以上显示 */}
+                    {responsive ? (
+                      <span className="hidden md:inline">
+                        {t('plugins.componentName.' + kind)}
+                      </span>
+                    ) : (
+                      showComponentName && t('plugins.componentName.' + kind)
+                    )}
+                    <span className="ml-1">{components[kind]}</span>
                   </Badge>
                 )}
 
@@ -58,9 +58,15 @@ export default function PluginComponentList({
                     className="flex flex-row items-center justify-start gap-[0.2rem]"
                   >
                     {kindIconMap[kind]}
-                    {showComponentName &&
-                      t('plugins.componentName.' + kind) + '  '}
-                    {componentKindCount[kind]}
+                    {/* 响应式显示组件名称：在中等屏幕以上显示 */}
+                    {responsive ? (
+                      <span className="hidden md:inline">
+                        {t('plugins.componentName.' + kind)}
+                      </span>
+                    ) : (
+                      showComponentName && t('plugins.componentName.' + kind)
+                    )}
+                    <span className="ml-1">{components[kind]}</span>
                   </div>
                 )}
               </>

web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx

@@ -274,7 +274,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
         </Dialog>
 
         {pluginList.length === 0 ? (
-          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
             <svg
               className="h-[3rem] w-[3rem]"
               xmlns="http://www.w3.org/2000/svg"

web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -128,7 +128,18 @@ export default function PluginCardComponent({
 
             <div className="w-full flex flex-row items-start justify-start gap-[0.6rem]">
               <PluginComponentList
-                components={cardVO.components}
+                components={(() => {
+                  const componentKindCount: Record<string, number> = {};
+                  for (const component of cardVO.components) {
+                    const kind = component.manifest.manifest.kind;
+                    if (componentKindCount[kind]) {
+                      componentKindCount[kind]++;
+                    } else {
+                      componentKindCount[kind] = 1;
+                    }
+                  }
+                  return componentKindCount;
+                })()}
                 showComponentName={false}
                 showTitle={true}
                 useBadge={false}

web/src/app/home/plugins/components/plugin-installed/plugin-form/PluginForm.tsx

@@ -160,7 +160,18 @@ export default function PluginForm({
 
         <div className="mb-4 flex flex-row items-center justify-start gap-[0.4rem]">
           <PluginComponentList
-            components={pluginInfo.components}
+            components={(() => {
+              const componentKindCount: Record<string, number> = {};
+              for (const component of pluginInfo.components) {
+                const kind = component.manifest.manifest.kind;
+                if (componentKindCount[kind]) {
+                  componentKindCount[kind]++;
+                } else {
+                  componentKindCount[kind] = 1;
+                }
+              }
+              return componentKindCount;
+            })()}
             showComponentName={true}
             showTitle={false}
             useBadge={true}

web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx

@@ -10,7 +10,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Search, Loader2 } from 'lucide-react';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { Search, Loader2, Wrench, AudioWaveform, Hash } from 'lucide-react';
 import PluginMarketCardComponent from './plugin-market-card/PluginMarketCardComponent';
 import { PluginMarketCardVO } from './plugin-market-card/PluginMarketCardVO';
 import PluginDetailDialog from './plugin-detail-dialog/PluginDetailDialog';
@@ -38,6 +39,7 @@ function MarketPageContent({
   const searchParams = useSearchParams();
 
   const [searchQuery, setSearchQuery] = useState('');
+  const [componentFilter, setComponentFilter] = useState<string>('all');
   const [plugins, setPlugins] = useState<PluginMarketCardVO[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -57,6 +59,7 @@ function MarketPageContent({
 
   const pageSize = 16; // 每页16个，4行x4列
   const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   // 排序选项
   const sortOptions: SortOption[] = [
@@ -110,6 +113,7 @@ function MarketPageContent({
       ),
       githubURL: plugin.repository,
       version: plugin.latest_version,
+      components: plugin.components,
     });
   }, []);
 
@@ -123,25 +127,20 @@ function MarketPageContent({
       }
 
       try {
-        let response;
         const { sortBy, sortOrder } = getCurrentSort();
+        const filterValue =
+          componentFilter === 'all' ? undefined : componentFilter;
 
-        if (isSearch && searchQuery.trim()) {
-          response = await getCloudServiceClientSync().searchMarketplacePlugins(
-            searchQuery.trim(),
+        // Always use searchMarketplacePlugins to support component filtering
+        const response =
+          await getCloudServiceClientSync().searchMarketplacePlugins(
+            isSearch && searchQuery.trim() ? searchQuery.trim() : '',
             page,
             pageSize,
             sortBy,
             sortOrder,
+            filterValue,
           );
-        } else {
-          response = await getCloudServiceClientSync().getMarketplacePlugins(
-            page,
-            pageSize,
-            sortBy,
-            sortOrder,
-          );
-        }
 
         const data: ApiRespMarketplacePlugins = response;
         const newPlugins = data.plugins.map(transformToVO);
@@ -166,7 +165,14 @@ function MarketPageContent({
         setIsLoadingMore(false);
       }
     },
-    [searchQuery, pageSize, transformToVO, plugins.length, getCurrentSort],
+    [
+      searchQuery,
+      componentFilter,
+      pageSize,
+      transformToVO,
+      plugins.length,
+      getCurrentSort,
+    ],
   );
 
   // 初始加载
@@ -211,10 +217,18 @@ function MarketPageContent({
     // fetchPlugins will be called by useEffect when sortOption changes
   }, []);
 
-  // 当排序选项变化时重新加载数据
+  // 组件筛选变化处理
+  const handleComponentFilterChange = useCallback((value: string) => {
+    setComponentFilter(value);
+    setCurrentPage(1);
+    setPlugins([]);
+    // fetchPlugins will be called by useEffect when componentFilter changes
+  }, []);
+
+  // 当排序选项或组件筛选变化时重新加载数据
   useEffect(() => {
     fetchPlugins(1, !!searchQuery.trim(), true);
-  }, [sortOption]);
+  }, [sortOption, componentFilter]);
 
   // 处理URL参数，检查是否需要打开插件详情对话框
   useEffect(() => {
@@ -262,120 +276,213 @@ function MarketPageContent({
     }
   }, [currentPage, isLoadingMore, hasMore, fetchPlugins, searchQuery]);
 
-  // 监听滚动事件
+  // Check if content fills the viewport and load more if needed
+  const checkAndLoadMore = useCallback(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer || isLoading || isLoadingMore || !hasMore) return;
+
+    const { scrollHeight, clientHeight } = scrollContainer;
+    // If content doesn't fill the viewport (no scrollbar), load more
+    if (scrollHeight <= clientHeight) {
+      loadMore();
+    }
+  }, [loadMore, isLoading, isLoadingMore, hasMore]);
+
+  // Listen to scroll events on the scroll container
   useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
     const handleScroll = () => {
-      if (
-        window.innerHeight + document.documentElement.scrollTop >=
-        document.documentElement.offsetHeight - 100
-      ) {
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      // Load more when scrolled to within 100px of the bottom
+      if (scrollTop + clientHeight >= scrollHeight - 100) {
         loadMore();
       }
     };
 
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    scrollContainer.addEventListener('scroll', handleScroll);
+    return () => scrollContainer.removeEventListener('scroll', handleScroll);
   }, [loadMore]);
 
+  // Check if we need to load more after content changes or initial load
+  useEffect(() => {
+    // Small delay to ensure DOM has updated
+    const timer = setTimeout(() => {
+      checkAndLoadMore();
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [plugins, checkAndLoadMore]);
+
+  // Also check on window resize
+  useEffect(() => {
+    const handleResize = () => {
+      checkAndLoadMore();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [checkAndLoadMore]);
+
   // 安装插件
   // const handleInstallPlugin = (plugin: PluginV4) => {
   //   console.log('install plugin', plugin);
   // };
 
   return (
-    <div className="container mx-auto px-3 sm:px-4 py-4 sm:py-6 space-y-4 sm:space-y-6">
-      {/* 搜索框 */}
-      <div className="flex items-center justify-center">
-        <div className="relative w-full max-w-2xl">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-          <Input
-            placeholder={t('market.searchPlaceholder')}
-            value={searchQuery}
-            onChange={(e) => handleSearchInputChange(e.target.value)}
-            onKeyPress={(e) => {
-              if (e.key === 'Enter') {
-                // 立即搜索，清除防抖定时器
-                if (searchTimeoutRef.current) {
-                  clearTimeout(searchTimeoutRef.current);
+    <div className="h-full flex flex-col">
+      {/* Fixed header with search and sort controls */}
+      <div className="flex-shrink-0 space-y-4 px-3 sm:px-4 py-4 sm:py-6">
+        {/* Search box */}
+        <div className="flex items-center justify-center">
+          <div className="relative w-full max-w-2xl">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+            <Input
+              placeholder={t('market.searchPlaceholder')}
+              value={searchQuery}
+              onChange={(e) => handleSearchInputChange(e.target.value)}
+              onKeyPress={(e) => {
+                if (e.key === 'Enter') {
+                  // Immediately search, clear debounce timer
+                  if (searchTimeoutRef.current) {
+                    clearTimeout(searchTimeoutRef.current);
+                  }
+                  handleSearch(searchQuery);
                 }
-                handleSearch(searchQuery);
-              }
-            }}
-            className="pl-10 pr-4 text-sm sm:text-base"
-          />
-        </div>
-      </div>
-
-      {/* 排序下拉框 */}
-      <div className="flex items-center justify-center">
-        <div className="w-full max-w-2xl flex items-center gap-2 sm:gap-3">
-          <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
-            {t('market.sortBy')}:
-          </span>
-          <Select value={sortOption} onValueChange={handleSortChange}>
-            <SelectTrigger className="w-40 sm:w-48 text-xs sm:text-sm">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {sortOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      {/* 搜索结果统计 */}
-      {total > 0 && (
-        <div className="text-center text-muted-foreground text-sm">
-          {searchQuery
-            ? t('market.searchResults', { count: total })
-            : t('market.totalPlugins', { count: total })}
-        </div>
-      )}
-
-      {/* 插件列表 */}
-      {isLoading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin" />
-          <span className="ml-2">{t('market.loading')}</span>
-        </div>
-      ) : plugins.length === 0 ? (
-        <div className="flex items-center justify-center py-12">
-          <div className="text-muted-foreground">
-            {searchQuery ? t('market.noResults') : t('market.noPlugins')}
+              }}
+              className="pl-10 pr-4 text-sm sm:text-base"
+            />
           </div>
         </div>
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6">
-          {plugins.map((plugin) => (
-            <PluginMarketCardComponent
-              key={plugin.pluginId}
-              cardVO={plugin}
-              onPluginClick={handlePluginClick}
-            />
-          ))}
-        </div>
-      )}
 
-      {/* 加载更多指示器 */}
-      {isLoadingMore && (
-        <div className="flex items-center justify-center py-6">
-          <Loader2 className="h-6 w-6 animate-spin" />
-          <span className="ml-2">{t('market.loadingMore')}</span>
-        </div>
-      )}
+        {/* Component filter and sort */}
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-3 sm:px-4">
+          {/* Component filter */}
+          <div className="flex flex-col sm:flex-row items-center gap-2">
+            <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
+              {t('market.filterByComponent')}:
+            </span>
+            <ToggleGroup
+              type="single"
+              spacing={2}
+              size="sm"
+              value={componentFilter}
+              onValueChange={(value) => {
+                if (value) handleComponentFilterChange(value);
+              }}
+              className="justify-start"
+            >
+              <ToggleGroupItem
+                value="all"
+                aria-label="All components"
+                className="text-xs sm:text-sm"
+              >
+                {t('market.allComponents')}
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="Tool"
+                aria-label="Tool"
+                className="text-xs sm:text-sm"
+              >
+                <Wrench className="h-4 w-4 mr-1" />
+                {t('plugins.componentName.Tool')}
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="Command"
+                aria-label="Command"
+                className="text-xs sm:text-sm"
+              >
+                <Hash className="h-4 w-4 mr-1" />
+                {t('plugins.componentName.Command')}
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="EventListener"
+                aria-label="EventListener"
+                className="text-xs sm:text-sm"
+              >
+                <AudioWaveform className="h-4 w-4 mr-1" />
+                {t('plugins.componentName.EventListener')}
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
 
-      {/* 没有更多数据提示 */}
-      {!hasMore && plugins.length > 0 && (
-        <div className="text-center text-muted-foreground py-6">
-          {t('market.allLoaded')}
+          {/* Sort dropdown */}
+          <div className="flex items-center gap-2 sm:gap-3">
+            <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
+              {t('market.sortBy')}:
+            </span>
+            <Select value={sortOption} onValueChange={handleSortChange}>
+              <SelectTrigger className="w-40 sm:w-48 text-xs sm:text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {sortOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-      )}
 
-      {/* 插件详情对话框 */}
+        {/* Search results stats */}
+        {total > 0 && (
+          <div className="text-center text-muted-foreground text-sm">
+            {searchQuery
+              ? t('market.searchResults', { count: total })
+              : t('market.totalPlugins', { count: total })}
+          </div>
+        )}
+      </div>
+
+      {/* Scrollable content area */}
+      <div
+        ref={scrollContainerRef}
+        className="flex-1 overflow-y-auto px-3 sm:px-4"
+      >
+        {isLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-8 w-8 animate-spin" />
+            <span className="ml-2">{t('market.loading')}</span>
+          </div>
+        ) : plugins.length === 0 ? (
+          <div className="flex items-center justify-center py-12">
+            <div className="text-muted-foreground">
+              {searchQuery ? t('market.noResults') : t('market.noPlugins')}
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 pb-6 pt-4">
+              {plugins.map((plugin) => (
+                <PluginMarketCardComponent
+                  key={plugin.pluginId}
+                  cardVO={plugin}
+                  onPluginClick={handlePluginClick}
+                />
+              ))}
+            </div>
+
+            {/* Loading more indicator */}
+            {isLoadingMore && (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-6 w-6 animate-spin" />
+                <span className="ml-2">{t('market.loadingMore')}</span>
+              </div>
+            )}
+
+            {/* No more data hint */}
+            {!hasMore && plugins.length > 0 && (
+              <div className="text-center text-muted-foreground py-6">
+                {t('market.allLoaded')}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Plugin detail dialog */}
       <PluginDetailDialog
         open={dialogOpen}
         onOpenChange={handleDialogClose}

web/src/app/home/plugins/components/plugin-market/plugin-detail-dialog/PluginDetailDialog.tsx

@@ -12,6 +12,7 @@ import { toast } from 'sonner';
 import { PluginV4 } from '@/app/infra/entities/plugin';
 import { getCloudServiceClientSync } from '@/app/infra/http';
 import { extractI18nObject } from '@/i18n/I18nProvider';
+import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
 
 interface PluginDetailDialogProps {
   open: boolean;
@@ -104,6 +105,15 @@ export default function PluginDetailDialog({
             <Download className="w-4 h-4" />
             {plugin!.install_count.toLocaleString()} {t('market.downloads')}
           </Badge>
+          {plugin!.components && Object.keys(plugin!.components).length > 0 && (
+            <PluginComponentList
+              components={plugin!.components}
+              showComponentName={true}
+              showTitle={false}
+              useBadge={true}
+              t={t}
+            />
+          )}
           {plugin!.repository && (
             <button
               onClick={(e) => {

web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx

@@ -1,4 +1,7 @@
 import { PluginMarketCardVO } from './PluginMarketCardVO';
+import { useTranslation } from 'react-i18next';
+import { Badge } from '@/components/ui/badge';
+import { Wrench, AudioWaveform, Hash } from 'lucide-react';
 
 export default function PluginMarketCardComponent({
   cardVO,
@@ -7,18 +10,32 @@ export default function PluginMarketCardComponent({
   cardVO: PluginMarketCardVO;
   onPluginClick?: (author: string, pluginName: string) => void;
 }) {
+  const { t } = useTranslation();
+
   function handleCardClick() {
     if (onPluginClick) {
       onPluginClick(cardVO.author, cardVO.pluginName);
     }
   }
 
+  const kindIconMap: Record<string, React.ReactNode> = {
+    Tool: <Wrench className="w-4 h-4" />,
+    EventListener: <AudioWaveform className="w-4 h-4" />,
+    Command: <Hash className="w-4 h-4" />,
+  };
+
+  const componentKindNameMap: Record<string, string> = {
+    Tool: t('plugins.componentName.Tool'),
+    EventListener: t('plugins.componentName.EventListener'),
+    Command: t('plugins.componentName.Command'),
+  };
+
   return (
     <div
-      className="w-[100%] h-auto min-h-[8rem] sm:h-[9rem] bg-white rounded-[10px] shadow-[0px_0px_4px_0_rgba(0,0,0,0.2)] p-3 sm:p-[1rem] cursor-pointer hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.15)] transition-shadow duration-200 dark:bg-[#1f1f22]"
+      className="w-[100%] h-auto min-h-[8rem] sm:min-h-[9rem] bg-white rounded-[10px] shadow-[0px_0px_4px_0_rgba(0,0,0,0.2)] p-3 sm:p-[1rem] cursor-pointer hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.15)] transition-shadow duration-200 dark:bg-[#1f1f22]"
       onClick={handleCardClick}
     >
-      <div className="w-full h-full flex flex-col justify-between gap-2">
+      <div className="w-full h-full flex flex-col justify-between gap-3">
         {/* 上部分：插件信息 */}
         <div className="flex flex-row items-start justify-start gap-2 sm:gap-[1.2rem] min-h-0">
           <img
@@ -60,23 +77,45 @@ export default function PluginMarketCardComponent({
           </div>
         </div>
 
-        {/* 下部分：下载量 */}
-        <div className="w-full flex flex-row items-center justify-start gap-[0.3rem] sm:gap-[0.4rem] px-0 sm:px-[0.4rem] flex-shrink-0">
-          <svg
-            className="w-4 h-4 sm:w-[1.2rem] sm:h-[1.2rem] text-[#2563eb] flex-shrink-0"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7,10 12,15 17,10" />
-            <line x1="12" y1="15" x2="12" y2="3" />
-          </svg>
-          <div className="text-xs sm:text-sm text-[#2563eb] font-medium whitespace-nowrap">
-            {cardVO.installCount.toLocaleString()}
+        {/* 下部分：下载量和组件列表 */}
+        <div className="w-full flex flex-row items-center justify-between gap-[0.3rem] sm:gap-[0.4rem] px-0 sm:px-[0.4rem] flex-shrink-0">
+          <div className="flex flex-row items-center justify-start gap-[0.3rem] sm:gap-[0.4rem]">
+            <svg
+              className="w-4 h-4 sm:w-[1.2rem] sm:h-[1.2rem] text-[#2563eb] flex-shrink-0"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7,10 12,15 17,10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+            <div className="text-xs sm:text-sm text-[#2563eb] font-medium whitespace-nowrap">
+              {cardVO.installCount.toLocaleString()}
+            </div>
           </div>
+
+          {/* 组件列表 */}
+          {cardVO.components && Object.keys(cardVO.components).length > 0 && (
+            <div className="flex flex-row items-center gap-1">
+              {Object.entries(cardVO.components).map(([kind, count]) => (
+                <Badge
+                  key={kind}
+                  variant="outline"
+                  className="flex items-center gap-1"
+                >
+                  {kindIconMap[kind]}
+                  {/* 响应式显示组件名称：在中等屏幕以上显示 */}
+                  <span className="hidden md:inline">
+                    {componentKindNameMap[kind]}
+                  </span>
+                  <span className="ml-1">{count}</span>
+                </Badge>
+              ))}
+            </div>
+          )}
         </div>
       </div>
     </div>

web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardVO.ts

@@ -8,6 +8,7 @@ export interface IPluginMarketCardVO {
   iconURL: string;
   githubURL: string;
   version: string;
+  components?: Record<string, number>;
 }
 
 export class PluginMarketCardVO implements IPluginMarketCardVO {
@@ -20,6 +21,7 @@ export class PluginMarketCardVO implements IPluginMarketCardVO {
   githubURL: string;
   installCount: number;
   version: string;
+  components?: Record<string, number>;
 
   constructor(prop: IPluginMarketCardVO) {
     this.description = prop.description;
@@ -31,5 +33,6 @@ export class PluginMarketCardVO implements IPluginMarketCardVO {
     this.installCount = prop.installCount;
     this.pluginId = prop.pluginId;
     this.version = prop.version;
+    this.components = prop.components;
   }
 }

web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx

@@ -73,14 +73,14 @@ export default function MCPComponent({
 
   return (
     <div className="w-full h-full">
-      {/* 已安装的服务器列表 */}
-      <div className="w-full px-[0.8rem] pt-[0rem]  gap-4">
+      {/* Server list */}
+      <div className="w-full h-full px-[0.8rem] pt-[0rem]">
         {loading ? (
-          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
             {t('mcp.loading')}
           </div>
         ) : installedServers.length === 0 ? (
-          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
             <svg
               className="h-[3rem] w-[3rem]"
               xmlns="http://www.w3.org/2000/svg"
@@ -92,7 +92,7 @@ export default function MCPComponent({
             <div className="text-lg mb-2">{t('mcp.noServerInstalled')}</div>
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-[2rem]">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-[2rem] pb-6">
             {installedServers.map((server, index) => (
               <div key={`${server.name}-${index}`}>
                 <MCPCardComponent

web/src/app/home/plugins/page.tsx

@@ -431,7 +431,7 @@ export default function PluginConfigPage() {
 
   return (
     <div
-      className={`${styles.pageContainer} ${isDragOver ? 'bg-blue-50' : ''}`}
+      className={`${styles.pageContainer} h-full flex flex-col ${isDragOver ? 'bg-blue-50' : ''}`}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
@@ -443,8 +443,12 @@ export default function PluginConfigPage() {
         onChange={handleFileChange}
         style={{ display: 'none' }}
       />
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <div className="flex flex-row justify-between items-center px-[0.8rem]">
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="w-full h-full flex flex-col"
+      >
+        <div className="flex flex-row justify-between items-center px-[0.8rem] flex-shrink-0">
           <TabsList className="shadow-md py-5 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
             <TabsTrigger value="installed" className="px-6 py-4 cursor-pointer">
               {t('plugins.installed')}
@@ -522,10 +526,10 @@ export default function PluginConfigPage() {
             </DropdownMenu>
           </div>
         </div>
-        <TabsContent value="installed">
+        <TabsContent value="installed" className="flex-1 overflow-y-auto mt-0">
           <PluginInstalledComponent ref={pluginInstalledRef} />
         </TabsContent>
-        <TabsContent value="market">
+        <TabsContent value="market" className="flex-1 overflow-y-auto mt-0">
           <MarketPage
             installPlugin={(plugin: PluginV4) => {
               setInstallSource('marketplace');
@@ -539,7 +543,10 @@ export default function PluginConfigPage() {
             }}
           />
         </TabsContent>
-        <TabsContent value="mcp-servers">
+        <TabsContent
+          value="mcp-servers"
+          className="flex-1 overflow-y-auto mt-0"
+        >
           <MCPServerComponent
             key={refreshKey}
             onEditServer={(serverName) => {

web/src/app/infra/entities/plugin/index.ts

@@ -40,6 +40,7 @@ export interface PluginV4 {
   tags: string[];
   install_count: number;
   latest_version: string;
+  components: Record<string, number>;
   status: PluginV4Status;
   created_at: string;
   updated_at: string;

web/src/app/infra/http/CloudServiceClient.ts

@@ -34,6 +34,7 @@ export class CloudServiceClient extends BaseHttpClient {
     page_size: number,
     sort_by?: string,
     sort_order?: string,
+    component_filter?: string,
   ): Promise<ApiRespMarketplacePlugins> {
     return this.post<ApiRespMarketplacePlugins>(
       '/api/v1/marketplace/plugins/search',
@@ -43,6 +44,7 @@ export class CloudServiceClient extends BaseHttpClient {
         page_size,
         sort_by,
         sort_order,
+        component_filter,
       },
     );
   }

web/src/components/ui/toggle-group.tsx

@@ -8,32 +8,40 @@ import { cn } from '@/lib/utils';
 import { toggleVariants } from '@/components/ui/toggle';
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }
 >({
   size: 'default',
   variant: 'default',
+  spacing: 0,
 });
 
 function ToggleGroup({
   className,
   variant,
   size,
+  spacing = 0,
   children,
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }) {
   return (
     <ToggleGroupPrimitive.Root
       data-slot="toggle-group"
       data-variant={variant}
       data-size={size}
+      data-spacing={spacing}
+      style={{ '--gap': spacing } as React.CSSProperties}
       className={cn(
-        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
         className,
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
@@ -55,12 +63,14 @@ function ToggleGroupItem({
       data-slot="toggle-group-item"
       data-variant={context.variant || variant}
       data-size={context.size || size}
+      data-spacing={context.spacing}
       className={cn(
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
+        'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
         className,
       )}
       {...props}

web/src/components/ui/toggle.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:data-[state=on]:bg-slate-700 dark:data-[state=on]:text-white [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {

web/src/i18n/locales/en-US.ts

@@ -351,6 +351,8 @@ const enUS = {
     markAsRead: 'Mark as Read',
     markAsReadSuccess: 'Marked as read',
     markAsReadFailed: 'Mark as read failed',
+    filterByComponent: 'Component',
+    allComponents: 'All Components',
   },
   mcp: {
     title: 'MCP',
@@ -482,6 +484,9 @@ const enUS = {
       addMCPServer: 'Add MCP Server',
       selectMCPServers: 'Select MCP Servers',
       toolCount: '{{count}} tools',
+      noPluginsInstalled: 'No installed plugins',
+      noMCPServersConfigured: 'No configured MCP servers',
+      selectAll: 'Select All',
     },
     debugDialog: {
       title: 'Pipeline Chat',

web/src/i18n/locales/ja-JP.ts

@@ -353,6 +353,8 @@ const jaJP = {
     markAsRead: '既読',
     markAsReadSuccess: '既読に設定しました',
     markAsReadFailed: '既読に設定に失敗しました',
+    filterByComponent: 'コンポーネント',
+    allComponents: '全部コンポーネント',
   },
   mcp: {
     title: 'MCP',
@@ -485,6 +487,9 @@ const jaJP = {
       addMCPServer: 'MCPサーバーを追加',
       selectMCPServers: 'MCPサーバーを選択',
       toolCount: '{{count}}個のツール',
+      noPluginsInstalled: 'インストールされているプラグインがありません',
+      noMCPServersConfigured: '設定されているMCPサーバーがありません',
+      selectAll: 'すべて選択',
     },
     debugDialog: {
       title: 'パイプラインのチャット',

web/src/i18n/locales/zh-Hans.ts

@@ -335,6 +335,8 @@ const zhHans = {
     markAsRead: '已读',
     markAsReadSuccess: '已标记为已读',
     markAsReadFailed: '标记为已读失败',
+    filterByComponent: '组件',
+    allComponents: '全部组件',
   },
   mcp: {
     title: 'MCP',
@@ -464,6 +466,9 @@ const zhHans = {
       addMCPServer: '添加 MCP 服务器',
       selectMCPServers: '选择 MCP 服务器',
       toolCount: '{{count}} 个工具',
+      noPluginsInstalled: '无已安装的插件',
+      noMCPServersConfigured: '无已配置的 MCP 服务器',
+      selectAll: '全选',
     },
     debugDialog: {
       title: '流水线对话',

web/src/i18n/locales/zh-Hant.ts

@@ -333,6 +333,8 @@ const zhHant = {
     markAsRead: '已讀',
     markAsReadSuccess: '已標記為已讀',
     markAsReadFailed: '標記為已讀失敗',
+    filterByComponent: '組件',
+    allComponents: '全部組件',
   },
   mcp: {
     title: 'MCP',
@@ -462,6 +464,9 @@ const zhHant = {
       addMCPServer: '新增 MCP 伺服器',
       selectMCPServers: '選擇 MCP 伺服器',
       toolCount: '{{count}} 個工具',
+      noPluginsInstalled: '無已安裝的插件',
+      noMCPServersConfigured: '無已配置的 MCP 伺服器',
+      selectAll: '全選',
     },
     debugDialog: {
       title: '流程線對話',