chore(mcp): cleanup pass; unique OAuth popup name per server

- use mcp-oauth-${serverId} window target so concurrent OAuth flows on
  different servers don't reuse and clobber the same popup
- drop redundant setQueryData before invalidate in useForceRefreshMcpTools
- replace hardcoded text-red-500 with text-[var(--text-error)] token
- normalize Plus icon to default h-[14px] w-[14px]
- drop useMemo on cheap toolsByServer/selectedServer derivations

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
@@ -105,7 +105,10 @@ function ServerListItem({
           <span className='text-[var(--text-secondary)] text-sm'>({transportLabel})</span>
         </div>
         <p
-          className={`truncate text-sm ${isError ? 'text-red-500 dark:text-red-400' : 'text-[var(--text-muted)]'}`}
+          className={cn(
+            'truncate text-sm',
+            isError ? 'text-[var(--text-error)]' : 'text-[var(--text-muted)]'
+          )}
         >
           {isRefreshing
             ? 'Refreshing...'
@@ -300,19 +303,17 @@ export function MCP({ initialServerId }: MCPProps) {
     }
   }
 
-  const toolsByServer = useMemo(() => {
-    return (mcpToolsData || []).reduce(
-      (acc, tool) => {
-        if (!tool?.serverId) return acc
-        if (!acc[tool.serverId]) {
-          acc[tool.serverId] = []
-        }
-        acc[tool.serverId].push(tool)
-        return acc
-      },
-      {} as Record<string, typeof mcpToolsData>
-    )
-  }, [mcpToolsData])
+  const toolsByServer = (mcpToolsData || []).reduce(
+    (acc, tool) => {
+      if (!tool?.serverId) return acc
+      if (!acc[tool.serverId]) {
+        acc[tool.serverId] = []
+      }
+      acc[tool.serverId].push(tool)
+      return acc
+    },
+    {} as Record<string, typeof mcpToolsData>
+  )
 
   const filteredServers = (servers || []).filter((server) =>
     server.name?.toLowerCase().includes(searchTerm.toLowerCase())
@@ -413,13 +414,13 @@ export function MCP({ initialServerId }: MCPProps) {
     setShowEditModal(true)
   }
 
-  const selectedServer = useMemo(() => {
+  const selectedServer = (() => {
     if (!selectedServerId) return null
     const server = servers.find((s) => s.id === selectedServerId) as McpServer | undefined
     if (!server) return null
     const serverTools = (toolsByServer[selectedServerId] || []) as McpTool[]
     return { server, tools: serverTools }
-  }, [selectedServerId, servers, toolsByServer])
+  })()
 
   const getStoredToolIssues = (
     serverId: string,
@@ -498,7 +499,7 @@ export function MCP({ initialServerId }: MCPProps) {
             {server.connectionStatus === 'error' && (
               <div className='flex flex-col gap-2'>
                 <span className='font-medium text-[var(--text-primary)] text-sm'>Status</span>
-                <p className='text-base text-red-500 dark:text-red-400'>
+                <p className='text-[var(--text-error)] text-base'>
                   {server.lastError || 'Unable to connect'}
                 </p>
               </div>
@@ -716,7 +717,7 @@ export function MCP({ initialServerId }: MCPProps) {
             />
           </div>
           <Button onClick={() => setShowAddModal(true)} variant='primary' disabled={serversLoading}>
-            <Plus className='mr-1.5 h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[14px] w-[14px]' />
             Add
           </Button>
         </div>

apps/sim/hooks/queries/mcp.ts

@@ -116,8 +116,7 @@ export function useForceRefreshMcpTools() {
 
   return useMutation({
     mutationFn: (workspaceId: string) => fetchMcpTools(workspaceId, true),
-    onSettled: (tools, _error, workspaceId) => {
-      if (tools) queryClient.setQueryData(mcpKeys.toolsList(workspaceId), tools)
+    onSettled: (_data, _error, workspaceId) => {
       queryClient.invalidateQueries({ queryKey: mcpKeys.toolsList(workspaceId) })
     },
   })
@@ -194,7 +193,7 @@ export function useStartMcpOauth() {
         }
         const popup = window.open(
           result.authorizationUrl,
-          'mcp-oauth',
+          `mcp-oauth-${serverId}`,
           'width=560,height=720,resizable=yes,scrollbars=yes'
         )
         if (!popup) {