fix: display friendly MCP tool names in UI

- Update frontend components to use display_name for user-friendly display
- Add display_name field to ToolItem TypeScript interface
- Update tool list display in:
  * PersonaForm.vue - tool selection list and selected tools
  * PersonaQuickPreview.vue - tool preview display
  * PersonaManager.vue - persona detail view
  * ToolTable.vue - function tools management table
- Add getToolDisplayName() helper methods in PersonaForm and PersonaManager

Author: ChuwuYo

astrbot/core/agent/mcp_client.py

@@ -380,8 +380,14 @@ def __init__(
         self, mcp_tool: mcp.Tool, mcp_client: MCPClient, mcp_server_name: str, **kwargs
     ) -> None:
         # Add namespace prefix to avoid conflicts with plugin tools
-        # Format: mcp_<server_name>__<tool_name>
-        namespaced_name = f"mcp_{mcp_server_name}__{mcp_tool.name}"
+        # Normalize server name: remove spaces and special characters
+        normalized_server_name = mcp_server_name.replace(" ", "_").replace("-", "_")
+        # Remove any other special characters, keep only alphanumeric and underscore
+        normalized_server_name = "".join(
+            c for c in normalized_server_name if c.isalnum() or c == "_"
+        )
+        # Format: mcp_<normalized_server_name>__<tool_name>
+        namespaced_name = f"mcp_{normalized_server_name}__{mcp_tool.name}"
 
         super().__init__(
             name=namespaced_name,

astrbot/dashboard/routes/tools.py

@@ -440,8 +440,10 @@ async def get_tool_list(self):
                 if isinstance(tool, MCPTool):
                     origin = "mcp"
                     origin_name = tool.mcp_server_name
-                    # Add original tool name for MCP tools
-                    display_name = getattr(tool, "original_tool_name", tool.name)
+                    # Format: <ServerName>_<ToolName> for MCP tools
+                    # Normalize server name for display
+                    normalized_server = tool.mcp_server_name.replace(" ", "")
+                    display_name = f"{normalized_server}_{tool.original_tool_name}"
                 elif tool.handler_module_path and star_map.get(
                     tool.handler_module_path
                 ):
@@ -456,7 +458,7 @@ async def get_tool_list(self):
 
                 tool_info = {
                     "name": tool.name,  # Keep namespaced name for internal use
-                    "display_name": display_name,  # Original name for display
+                    "display_name": display_name,  # Friendly name for display
                     "description": tool.description,
                     "parameters": tool.parameters,
                     "active": tool.active,

dashboard/src/components/extension/componentPanel/components/ToolTable.vue

@@ -44,7 +44,7 @@ const parameterEntries = (tool: ToolItem) => Object.entries(tool.parameters?.pro
             {{ item.name.includes(':') ? 'mdi-server-network' : 'mdi-function-variant' }}
           </v-icon>
           <div>
-            <div class="text-subtitle-1 font-weight-medium">{{ item.name }}</div>
+            <div class="text-subtitle-1 font-weight-medium">{{ item.display_name || item.name }}</div>
           </div>
         </div>
       </template>

dashboard/src/components/extension/componentPanel/types.ts

@@ -92,6 +92,7 @@ export interface ToolParameter {
 /** MCP/函数工具对象 */
 export interface ToolItem {
   name: string;
+  display_name?: string;
   description: string;
   active: boolean;
   parameters?: {

dashboard/src/components/shared/PersonaForm.vue

@@ -98,7 +98,7 @@
                                                     </template>
 
                                                     <v-list-item-title>
-                                                        {{ item.name }}
+                                                        {{ item.display_name || item.name }}
 
                                                         <v-chip v-if="item.origin" size="x-small" color="info" class="mr-2"
                                                             variant="tonal">
@@ -158,7 +158,7 @@
                                             <v-chip v-for="toolName in personaForm.tools" :key="toolName" size="small"
                                                 color="primary" variant="tonal" closable
                                                 @click:close="removeTool(toolName)">
-                                                {{ toolName }}
+                                                {{ getToolDisplayName(toolName) }}
                                             </v-chip>
                                         </div>
                                         <div v-else class="text-body-2 text-medium-emphasis">
@@ -818,6 +818,12 @@ export default {
             // 检查服务器的所有工具是否都已选中
             return Array.isArray(this.personaForm.tools) &&
                 server.tools.every(toolName => this.personaForm.tools.includes(toolName));
+        },
+
+        getToolDisplayName(toolName) {
+            // Find tool in availableTools and return display_name if available
+            const tool = this.availableTools.find(t => t.name === toolName);
+            return tool?.display_name || toolName;
         }
     }
 }

dashboard/src/components/shared/PersonaQuickPreview.vue

@@ -123,7 +123,7 @@ const resolvedTools = computed(() =>
   normalizedTools.value.map((toolName) => {
     const meta = toolMetaMap.value[toolName] || {}
     return {
-      name: toolName,
+      name: meta.display_name || toolName,  // Use display_name for showing
       origin: meta.origin || '',
       origin_name: meta.origin_name || '',
       active: meta.active
@@ -142,6 +142,7 @@ async function loadToolsMeta() {
           continue
         }
         nextMap[tool.name] = {
+          display_name: tool.display_name || tool.name,
           origin: tool.origin || '',
           origin_name: tool.origin_name || '',
           active: tool.active

dashboard/src/views/persona/PersonaManager.vue

@@ -164,7 +164,7 @@
                             class="d-flex flex-wrap ga-1">
                             <v-chip v-for="toolName in viewingPersona.tools" :key="toolName" size="small"
                                 color="primary" variant="tonal">
-                                {{ toolName }}
+                                {{ getToolDisplayName(toolName) }}
                             </v-chip>
                         </div>
                         <div v-else class="text-body-2 text-medium-emphasis">
@@ -265,6 +265,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import axios from 'axios';
 import { useI18n, useModuleI18n } from '@/i18n/composables';
 import { usePersonaStore } from '@/stores/personaStore';
 import { mapState, mapActions } from 'pinia';
@@ -347,7 +348,10 @@ export default defineComponent({
 
             // 骨架屏延迟显示控制
             showSkeleton: false,
-            skeletonTimer: null as ReturnType<typeof setTimeout> | null
+            skeletonTimer: null as ReturnType<typeof setTimeout> | null,
+
+            // 工具列表用于显示名称
+            availableTools: [] as any[]
         };
     },
     computed: {
@@ -411,10 +415,27 @@ export default defineComponent({
         async initialize() {
             await Promise.all([
                 this.loadFolderTree(),
-                this.navigateToFolder(null)
+                this.navigateToFolder(null),
+                this.loadTools()
             ]);
         },
 
+        async loadTools() {
+            try {
+                const response = await axios.get('/api/tools/list');
+                if (response.data.status === 'ok') {
+                    this.availableTools = response.data.data || [];
+                }
+            } catch (error) {
+                console.error('Failed to load tools:', error);
+            }
+        },
+
+        getToolDisplayName(toolName: string): string {
+            const tool = this.availableTools.find(t => t.name === toolName);
+            return tool?.display_name || toolName;
+        },
+
         // Persona 操作
         openCreatePersonaDialog() {
             this.editingPersona = null;