feat(agent): add MCP server discovery mode for agent tool input (#3353)

* feat(agent): add MCP server discovery mode for agent tool input

* fix(tool-input): use type variant for MCP server tool count badge

* fix(mcp-dynamic-args): align label styling with standard subblock labels

* standardized inp format UI

* feat(tool-input): replace MCP server inline expand with drill-down navigation

* feat(tool-input): add chevron affordance and keyboard nav for MCP server drill-down

* fix(tool-input): handle mcp-server type in refresh, validation, badges, and usage control

* refactor(tool-validation): extract getMcpServerIssue, remove fake tool hack

* lint

* reorder dropdown

* perf(agent): parallelize MCP server tool creation with Promise.all

* fix(combobox): preserve cursor movement in search input, reset query on drilldown

* fix(combobox): route ArrowRight through handleSelect, remove redundant type guards

* fix(agent): rename mcpServers to mcpServerSelections to avoid shadowing DB import, route ArrowRight through handleSelect

* docs: update google integration docs

* fix(tool-input): reset drilldown state on tool selection to prevent stale view

* perf(agent): parallelize MCP server discovery across multiple servers

Author: waleedlatif1

apps/docs/content/docs/en/tools/google_translate.mdx

@@ -10,6 +10,13 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
   color="#E0E0E0"
 />
 
+{/* MANUAL-CONTENT-START:intro */}
+[Google Translate](https://translate.google.com/) is Google's powerful translation service, supporting over 100 languages for text, documents, and websites. Backed by advanced neural machine translation, Google Translate delivers fast and accurate translations for a wide range of use cases, from casual communication to professional workflows.
+
+In Sim, the Google Translate integration allows your agents to translate text and detect languages as part of automated workflows. Agents can translate content between languages, auto-detect source languages, and process multilingual data—all without manual intervention. By connecting Sim with Google Cloud Translation, you can build intelligent workflows that handle localization, multilingual support, content translation, and language detection at scale.
+{/* MANUAL-CONTENT-END */}
+
+
 ## Usage Instructions
 
 Translate and detect languages using the Google Cloud Translation API. Supports auto-detection of the source language.

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx

@@ -268,7 +268,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                           </Badge>
                         </div>
                       </div>
-                      <div className='border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+                      <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
                         <div className='flex flex-col gap-[6px]'>
                           <Label className='text-[13px]'>Description</Label>
                           <Input

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx

@@ -547,7 +547,7 @@ export function McpDeploy({
                     </Badge>
                   </div>
                 </div>
-                <div className='border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+                <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
                   <div className='flex flex-col gap-[6px]'>
                     <Label className='text-[13px]'>Description</Label>
                     <Input

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx

@@ -367,7 +367,7 @@ export function DocumentTagEntry({
     }))
 
     return (
-      <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+      <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
         <div className='flex flex-col gap-[6px]'>
           <Label className='text-[13px]'>Tag</Label>
           <Combobox

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx

@@ -165,7 +165,7 @@ export function FilterRuleRow({
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+    <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
       {index > 0 && (
         <div className='flex flex-col gap-[6px]'>
           <Label className='text-[13px]'>Logic</Label>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx

@@ -239,7 +239,7 @@ function InputMappingField({
       </div>
 
       {!collapsed && (
-        <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+        <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
           <div className='flex flex-col gap-[6px]'>
             <Label className='text-[13px]'>Value</Label>
             <div className='relative'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx

@@ -358,7 +358,7 @@ export function KnowledgeTagFilters({
     const isBetween = filter.operator === 'between'
 
     return (
-      <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+      <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
         <div className='flex flex-col gap-[6px]'>
           <Label className='text-[13px]'>Tag</Label>
           <Combobox

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx

@@ -2,7 +2,6 @@ import { useCallback, useMemo } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
 import { Combobox, Label, Slider, Switch } from '@/components/emcn/components'
-import { cn } from '@/lib/core/utils/cn'
 import { LongInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input'
 import { ShortInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
@@ -147,7 +146,7 @@ export function McpDynamicArgs({
             />
             <Label
               htmlFor={`${paramName}-switch`}
-              className='cursor-pointer font-normal text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+              className='cursor-pointer font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
             >
               {formatParameterLabel(paramName)}
             </Label>
@@ -351,15 +350,14 @@ export function McpDynamicArgs({
               <div key={paramName} className='subblock-row'>
                 <div className='subblock-content flex flex-col gap-[10px]'>
                   {showLabel && (
-                    <Label
-                      className={cn(
-                        'font-medium text-sm',
-                        toolSchema.required?.includes(paramName) &&
-                          'after:ml-1 after:text-red-500 after:content-["*"]'
-                      )}
-                    >
-                      {formatParameterLabel(paramName)}
-                    </Label>
+                    <div className='flex items-center justify-between gap-[6px] pl-[2px]'>
+                      <Label className='flex items-baseline gap-[6px] whitespace-nowrap'>
+                        {formatParameterLabel(paramName)}
+                        {toolSchema.required?.includes(paramName) && (
+                          <span className='ml-0.5'>*</span>
+                        )}
+                      </Label>
+                    </div>
                   )}
                   {renderParameterInput(paramName, paramSchema as any)}
                 </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx

@@ -70,7 +70,7 @@ export function SortRuleRow({
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+    <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
       <div className='flex flex-col gap-[6px]'>
         <Label className='text-[13px]'>Column</Label>
         <Combobox

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx

@@ -552,7 +552,7 @@ export function FieldFormat({
           {renderFieldHeader(field, index)}
 
           {!field.collapsed && (
-            <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+            <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
               <div className='flex flex-col gap-[6px]'>
                 <Label className='text-[13px]'>Name</Label>
                 <div className='relative'>{renderNameInput(field)}</div>