✂️ refactor: MCP UI Separation for Agents (#9237)

* refactor: MCP UI Separation for Agents (Dustin WIP)

feat: separate MCPs into their own lists away from tools + actions and add the status indicator functionality from chat to their dropdown ui

fix: spotify mcp was not persisting on agent creation

feat: show disconnected saved servers and their tools in agent mcp list in created agents

fix: select-all regression fixed (caused by deleting tools we were drawing from for rendering list)

fix: dont show all mcps, only those installed in agent in list

feat: separate ToolSelectDialog for MCPServerTools

fix: uninitialized mcp servers not showing as added in toolselectdialog

refactor: reduce looping in AgentPanelContext for categorizing groups and mcps

refactor: split ToolSelectDialog and MCPToolSelectDialog functionality (still needs customization for custom user vars)

chore: address ESLint comments

chore: address ESLint comments

feat: one-click initialization on MCP servers in agent builder

fix: stop propagation triggering reinit on caret click

refactor: split uninitialized MCPs component from initialized MCPs

feat: new mcp tool select dialog ui with custom user vars

feat: show initialization state for CUV configurable MCPs too

chore: remove unused localization string

fix: deselecting all tools caused a re-render

fix: remove subtools so removal from MCPToolSelectDialog works more consistently

feat: added servers have all tools enabled by default

feat: mcp server list now alphabetical to prevent annoying ui behavior of servers jumping around depending on tool selection

fix: filter out placeholder group mcp tools from any actual tool calls / definitions

feat: indicator now takes you to config dialog for uninitialized servers

feat: show previously configured mcp servers that are now missing from the yaml

feat: select all enabled by default on first add to mcp server list

chore: address ESLint comments

* refactor: MCP UI Separation for Agents (Danny WIP)

chore: remove use of `{serverName}_mcp_{serverName}`

chore: import order

WIP: separate component concerns

refactor: streamline agent mcp tools

refactor: unify MCP server handling and improve tool visibility logic, remove unnecessary normalization or sorting, remove nesting button, make variable names clear

refactor: rename mcpServerIds to mcpServerNames for clarity and consistency across components

refactor: remove groupedMCPTools and toolToServerMap, streamline MCP server handling in context and components to effectively utilize mcpServersMap

refactor: optimize tool selection logic by replacing array includes with Set for improved performance

chore: add error logging for failed auth URL parsing in ToolCall component

refactor: enhance MCP tool handling by improving server name management and updating UI elements for better clarity

* refactor: decouple connection status from useMCPServerManager with useMCPConnectionStatus

* fix: improve MCP tool validation logic to handle unconfigured servers

* chore: enhance log message clarity for MCP server disconnection in updateUserPluginsController

* refactor: simplify connection status extraction in useMCPConnectionStatus hook

* refactor: improve initializing UX

* chore: replace string literal with ResourceType constant in useResourcePermissions

* refactor: cleanup code, remove redundancies, rename variables for clarity

* chore: add back filtering and sorting for mcp tools dialog

* refactor: initializeServer to return response and early return

* refactor: enhance server initialization logic and improve UI for OAuth interaction

* chore: clarify warning message for unconfigured MCP server in handleTools

* refactor: prevent CustomUserVarsSection from submitting tools dialog form

* fix: nested button of button issue in UninitializedMCPTool

* feat: add functionality to revoke custom user variables in MCPToolSelectDialog

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/hooks/MCP/useVisibleTools.ts

@@ -0,0 +1,79 @@
+import { useMemo } from 'react';
+import { Constants } from 'librechat-data-provider';
+import type { AgentToolType } from 'librechat-data-provider';
+import type { MCPServerInfo } from '~/common';
+
+type GroupedToolType = AgentToolType & { tools?: AgentToolType[] };
+type GroupedToolsRecord = Record<string, GroupedToolType>;
+
+interface VisibleToolsResult {
+  toolIds: string[];
+  mcpServerNames: string[];
+}
+
+/**
+ * Custom hook to calculate visible tool IDs based on selected tools and their parent groups.
+ * If any subtool of a group is selected, the parent group tool is also made visible.
+ *
+ * @param selectedToolIds - Array of selected tool IDs
+ * @param allTools - Record of all available tools
+ * @param mcpServersMap - Map of all MCP servers
+ * @returns Object containing separate arrays of visible tool IDs for regular and MCP tools
+ */
+export function useVisibleTools(
+  selectedToolIds: string[] | undefined,
+  allTools: GroupedToolsRecord | undefined,
+  mcpServersMap: Map<string, MCPServerInfo>,
+): VisibleToolsResult {
+  return useMemo(() => {
+    const mcpServers = new Set<string>();
+    const selectedSet = new Set<string>();
+    const regularToolIds = new Set<string>();
+
+    for (const toolId of selectedToolIds ?? []) {
+      if (!toolId.includes(Constants.mcp_delimiter)) {
+        selectedSet.add(toolId);
+        continue;
+      }
+      const serverName = toolId.split(Constants.mcp_delimiter)[1];
+      if (!serverName) {
+        continue;
+      }
+      mcpServers.add(serverName);
+    }
+
+    if (allTools) {
+      for (const [toolId, toolObj] of Object.entries(allTools)) {
+        if (selectedSet.has(toolId)) {
+          regularToolIds.add(toolId);
+        }
+
+        if (toolObj.tools?.length) {
+          for (const subtool of toolObj.tools) {
+            if (selectedSet.has(subtool.tool_id)) {
+              regularToolIds.add(toolId);
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    if (mcpServersMap) {
+      for (const [mcpServerName] of mcpServersMap) {
+        if (mcpServers.has(mcpServerName)) {
+          continue;
+        }
+        /** Legacy check */
+        if (selectedSet.has(mcpServerName)) {
+          mcpServers.add(mcpServerName);
+        }
+      }
+    }
+
+    return {
+      toolIds: Array.from(regularToolIds).sort((a, b) => a.localeCompare(b)),
+      mcpServerNames: Array.from(mcpServers).sort((a, b) => a.localeCompare(b)),
+    };
+  }, [allTools, mcpServersMap, selectedToolIds]);
+}