From 644b3b663d46764b3efec42cbdc9f1eca244ad31 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Mon, 23 Jun 2025 19:17:17 +1000
Subject: [PATCH] Update plug indicator to show enabled vs total counts

- Change indicator format to show enabled/total for both servers and tools
- Format: 'X (Y servers) A (B tools)' where:
  - X = enabled servers, Y = total servers
  - A = tools from enabled servers, B = total tools from all servers
- Track tool counts per server in localStorage (mcpServerToolCounts)
- Persist tool counts even when servers are disabled
- Examples:
  - No servers: '0 (0 servers) 0 (0 tools)'
  - One disabled server with 2 tools: '0 (1 servers) 0 (2 tools)'
  - One enabled server with 2 tools: '1 (1 servers) 2 (2 tools)'
- Clean up tool counts when servers are deleted
---
 .../src/components/ConversationThread.tsx     | 20 ++++++++++++++---
 .../chat-ui/src/components/McpServerModal.tsx | 22 +++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

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<ConversationThreadProps> = ({
                 {(() => {
                   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)"
                   }
                 })()}
               </span>
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<McpServerModalProps> = ({
   const [newServerUrl, setNewServerUrl] = useState('')
   const [showSettings, setShowSettings] = useState(false)
   const [connectionData, setConnectionData] = useState<Record<string, any>>({})
+  const [serverToolCounts, setServerToolCounts] = useState<Record<string, number>>(() => {
+    const stored = localStorage.getItem('mcpServerToolCounts')
+    return stored ? JSON.parse(stored) : {}
+  })
   const logRef = useRef<HTMLDivElement>(null)
 
   // Save servers to localStorage whenever they change
@@ -66,6 +70,11 @@ const McpServerModal: React.FC<McpServerModalProps> = ({
     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<McpServerModalProps> = ({
       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<McpServerModalProps> = ({
       ...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