improvement(ui): enhance ring outline for code subblock and mcp tool subblocks in agent (#1741)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/code.tsx

@@ -432,8 +432,8 @@ IMPORTANT FORMATTING RULES:
 
       <div
         className={cn(
-          'group relative min-h-[100px] rounded-md border border-input bg-background font-mono text-sm transition-colors',
-          isConnecting && 'ring-2 ring-blue-500 ring-offset-2'
+          'group relative min-h-[100px] rounded-md bg-background font-mono text-sm transition-colors',
+          isConnecting ? 'ring-2 ring-blue-500' : 'border border-input'
         )}
         onDragOver={(e) => e.preventDefault()}
         onDrop={handleDrop}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx

@@ -58,6 +58,7 @@ const logger = createLogger('ToolInput')
 interface ToolInputProps {
   blockId: string
   subBlockId: string
+  isConnecting: boolean
   isPreview?: boolean
   previewValue?: any
   disabled?: boolean
@@ -280,20 +281,22 @@ function CodeSyncWrapper({
   onChange,
   uiComponent,
   disabled,
+  isConnecting,
 }: {
   blockId: string
   paramId: string
   value: string
   onChange: (value: string) => void
   uiComponent: any
   disabled: boolean
+  isConnecting: boolean
 }) {
   return (
     <GenericSyncWrapper blockId={blockId} paramId={paramId} value={value} onChange={onChange}>
       <Code
         blockId={blockId}
         subBlockId={paramId}
-        isConnecting={false}
+        isConnecting={isConnecting}
         language={uiComponent.language}
         generationType={uiComponent.generationType}
         disabled={disabled}
@@ -313,13 +316,15 @@ function ComboboxSyncWrapper({
   onChange,
   uiComponent,
   disabled,
+  isConnecting,
 }: {
   blockId: string
   paramId: string
   value: string
   onChange: (value: string) => void
   uiComponent: any
   disabled: boolean
+  isConnecting: boolean
 }) {
   return (
     <GenericSyncWrapper blockId={blockId} paramId={paramId} value={value} onChange={onChange}>
@@ -328,7 +333,7 @@ function ComboboxSyncWrapper({
         subBlockId={paramId}
         options={uiComponent.options || []}
         placeholder={uiComponent.placeholder}
-        isConnecting={false}
+        isConnecting={isConnecting}
         config={{
           id: paramId,
           type: 'combobox' as const,
@@ -414,6 +419,7 @@ function ChannelSelectorSyncWrapper({
 export function ToolInput({
   blockId,
   subBlockId,
+  isConnecting,
   isPreview = false,
   previewValue,
   disabled = false,
@@ -984,7 +990,7 @@ export function ToolInput({
           subBlockId={uniqueSubBlockId}
           placeholder={param.description}
           password={isPasswordParameter(param.id)}
-          isConnecting={false}
+          isConnecting={isConnecting}
           config={{
             id: uniqueSubBlockId,
             type: 'short-input',
@@ -1031,7 +1037,7 @@ export function ToolInput({
             blockId={blockId}
             subBlockId={uniqueSubBlockId}
             placeholder={uiComponent.placeholder || param.description}
-            isConnecting={false}
+            isConnecting={isConnecting}
             config={{
               id: uniqueSubBlockId,
               type: 'long-input',
@@ -1049,7 +1055,7 @@ export function ToolInput({
             subBlockId={uniqueSubBlockId}
             placeholder={uiComponent.placeholder || param.description}
             password={uiComponent.password || isPasswordParameter(param.id)}
-            isConnecting={false}
+            isConnecting={isConnecting}
             config={{
               id: uniqueSubBlockId,
               type: 'short-input',
@@ -1138,6 +1144,7 @@ export function ToolInput({
             onChange={onChange}
             uiComponent={uiComponent}
             disabled={disabled}
+            isConnecting={isConnecting}
           />
         )
 
@@ -1162,6 +1169,7 @@ export function ToolInput({
             onChange={onChange}
             uiComponent={uiComponent}
             disabled={disabled}
+            isConnecting={isConnecting}
           />
         )
 
@@ -1208,7 +1216,7 @@ export function ToolInput({
             subBlockId={uniqueSubBlockId}
             placeholder={uiComponent.placeholder || param.description}
             password={uiComponent.password || isPasswordParameter(param.id)}
-            isConnecting={false}
+            isConnecting={isConnecting}
             config={{
               id: uniqueSubBlockId,
               type: 'short-input',
@@ -1750,7 +1758,7 @@ export function ToolInput({
                                     subBlockId={`${subBlockId}-tool-${toolIndex}-${param.id}`}
                                     placeholder={param.description}
                                     password={isPasswordParameter(param.id)}
-                                    isConnecting={false}
+                                    isConnecting={isConnecting}
                                     config={{
                                       id: `${subBlockId}-tool-${toolIndex}-${param.id}`,
                                       type: 'short-input',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/sub-block.tsx

@@ -230,6 +230,7 @@ export const SubBlock = memo(
             <ToolInput
               blockId={blockId}
               subBlockId={config.id}
+              isConnecting={isConnecting}
               isPreview={isPreview}
               previewValue={previewValue}
               disabled={allowExpandInPreview ? false : isDisabled}