diff --git a/examples/chat-ui/src/components/ConversationThread.tsx b/examples/chat-ui/src/components/ConversationThread.tsx index d6490ca..e24f88c 100644 --- a/examples/chat-ui/src/components/ConversationThread.tsx +++ b/examples/chat-ui/src/components/ConversationThread.tsx @@ -248,10 +248,24 @@ const ConversationThread: React.FC = ({ {(() => { try { const servers = JSON.parse(localStorage.getItem('mcpServers') || '[]') - const connectedServers = servers.filter((s: any) => s.enabled).length - return mcpTools.length > 0 ? `${connectedServers} (${mcpTools.length})` : connectedServers.toString() + const toolCounts = JSON.parse(localStorage.getItem('mcpServerToolCounts') || '{}') + + const enabledServers = servers.filter((s: any) => s.enabled).length + const totalServers = servers.length + const enabledTools = mcpTools.length + + // Calculate total tools across all servers (including disabled ones that were previously connected) + const totalTools = servers.reduce((sum: number, server: any) => { + return sum + (toolCounts[server.id] || 0) + }, 0) + + if (totalServers === 0) { + return "0 (0 servers) 0 (0 tools)" + } + + return `${enabledServers} (${totalServers} servers) ${enabledTools} (${totalTools} tools)` } catch { - return mcpTools.length > 0 ? `1 (${mcpTools.length})` : "0" + return mcpTools.length > 0 ? `1 (1 servers) ${mcpTools.length} (${mcpTools.length} tools)` : "0 (0 servers) 0 (0 tools)" } })()} diff --git a/examples/chat-ui/src/components/McpServerModal.tsx b/examples/chat-ui/src/components/McpServerModal.tsx index 96cf8db..07f207e 100644 --- a/examples/chat-ui/src/components/McpServerModal.tsx +++ b/examples/chat-ui/src/components/McpServerModal.tsx @@ -59,6 +59,10 @@ const McpServerModal: React.FC = ({ const [newServerUrl, setNewServerUrl] = useState('') const [showSettings, setShowSettings] = useState(false) const [connectionData, setConnectionData] = useState>({}) + const [serverToolCounts, setServerToolCounts] = useState>(() => { + const stored = localStorage.getItem('mcpServerToolCounts') + return stored ? JSON.parse(stored) : {} + }) const logRef = useRef(null) // Save servers to localStorage whenever they change @@ -66,6 +70,11 @@ const McpServerModal: React.FC = ({ localStorage.setItem('mcpServers', JSON.stringify(servers)) }, [servers]) + // Save tool counts to localStorage whenever they change + useEffect(() => { + localStorage.setItem('mcpServerToolCounts', JSON.stringify(serverToolCounts)) + }, [serverToolCounts]) + useEffect(() => { if (isOpen) { document.body.style.overflow = 'hidden' @@ -127,6 +136,11 @@ const McpServerModal: React.FC = ({ delete newData[serverId] return newData }) + setServerToolCounts(prev => { + const newCounts = { ...prev } + delete newCounts[serverId] + return newCounts + }) } // Handle toggling server enabled state @@ -150,6 +164,14 @@ const McpServerModal: React.FC = ({ ...prev, [serverId]: data })) + + // Store tool count for this server (even if it gets disabled later) + if (data.tools && Array.isArray(data.tools)) { + setServerToolCounts(prev => ({ + ...prev, + [serverId]: data.tools.length + })) + } } // Handle authentication for a specific server