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

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>