fix(agent-tools): added special handling for workflow tool in agent tool input, added react grab and feature flag (#2820)

waleedlatif1 · web-flow · commit 41f9374b5c22 · 2026-01-14T15:53:42.000-08:00
* fix(agent-tools): added special handling for workflow tool in agent tool input, added react grab

* FF react grab

* ack comments

* updated to account for workflow input tool on top of just workflow as well
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
@@ -1,12 +1,13 @@
 import type { Metadata, Viewport } from 'next'
+import Script from 'next/script'
 import { PublicEnvScript } from 'next-runtime-env'
 import { BrandedLayout } from '@/components/branded-layout'
 import { generateThemeCSS } from '@/lib/branding/inject-theme'
 import { generateBrandedMetadata, generateStructuredData } from '@/lib/branding/metadata'
 import { PostHogProvider } from '@/app/_shell/providers/posthog-provider'
 import '@/app/_styles/globals.css'
-
 import { OneDollarStats } from '@/components/analytics/onedollarstats'
+import { isReactGrabEnabled } from '@/lib/core/config/feature-flags'
 import { HydrationErrorHandler } from '@/app/_shell/hydration-error-handler'
 import { QueryProvider } from '@/app/_shell/providers/query-provider'
 import { SessionProvider } from '@/app/_shell/providers/session-provider'
@@ -33,6 +34,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang='en' suppressHydrationWarning>
       <head>
+        {isReactGrabEnabled && (
+          <Script
+            src='https://unpkg.com/react-grab/dist/index.global.js'
+            crossOrigin='anonymous'
+            strategy='beforeInteractive'
+          />
+        )}
+        {isReactGrabEnabled && (
+          <Script
+            src='https://unpkg.com/@react-grab/cursor/dist/client.global.js'
+            strategy='lazyOnload'
+          />
+        )}
         {/* Structured Data for SEO */}
         <script
           type='application/ld+json'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -1036,6 +1036,7 @@ export function ToolInput({
           block.type === 'api' ||
           block.type === 'webhook_request' ||
           block.type === 'workflow' ||
+          block.type === 'workflow_input' ||
           block.type === 'knowledge' ||
           block.type === 'function') &&
         block.type !== 'evaluator' &&
@@ -1761,7 +1762,7 @@ export function ToolInput({
           iconElement: createToolIcon('#6366F1', WorkflowIcon),
           onSelect: () => {
             const newTool: StoredTool = {
-              type: 'workflow',
+              type: 'workflow_input',
               title: 'Workflow',
               toolId: 'workflow_executor',
               params: {
@@ -2195,9 +2196,10 @@ export function ToolInput({
       {/* Selected Tools List */}
       {selectedTools.length > 0 &&
         selectedTools.map((tool, toolIndex) => {
-          // Handle custom tools and MCP tools differently
+          // Handle custom tools, MCP tools, and workflow tools differently
           const isCustomTool = tool.type === 'custom-tool'
           const isMcpTool = tool.type === 'mcp'
+          const isWorkflowTool = tool.type === 'workflow'
           const toolBlock =
             !isCustomTool && !isMcpTool
               ? toolBlocks.find((block) => block.type === tool.type)
@@ -2323,13 +2325,17 @@ export function ToolInput({
                         ? '#3B82F6'
                         : isMcpTool
                           ? mcpTool?.bgColor || '#6366F1'
-                          : toolBlock?.bgColor,
+                          : isWorkflowTool
+                            ? '#6366F1'
+                            : toolBlock?.bgColor,
                     }}
                   >
                     {isCustomTool ? (
                       <WrenchIcon className='h-[10px] w-[10px] text-white' />
                     ) : isMcpTool ? (
                       <IconComponent icon={McpIcon} className='h-[10px] w-[10px] text-white' />
+                    ) : isWorkflowTool ? (
+                      <IconComponent icon={WorkflowIcon} className='h-[10px] w-[10px] text-white' />
                     ) : (
                       <IconComponent
                         icon={toolBlock?.icon}
@@ -2369,9 +2375,10 @@ export function ToolInput({
                         </Tooltip.Root>
                       )
                     })()}
-                  {tool.type === 'workflow' && tool.params?.workflowId && (
-                    <WorkflowToolDeployBadge workflowId={tool.params.workflowId} />
-                  )}
+                  {(tool.type === 'workflow' || tool.type === 'workflow_input') &&
+                    tool.params?.workflowId && (
+                      <WorkflowToolDeployBadge workflowId={tool.params.workflowId} />
+                    )}
                 </div>
                 <div className='flex flex-shrink-0 items-center gap-[8px]'>
                   {supportsToolControl && !(isMcpTool && isMcpToolUnavailable(tool)) && (
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -256,6 +256,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
           customOnSelect()
           setOpen(false)
           setHighlightedIndex(-1)
+          setSearchQuery('')
           return
         }
 
@@ -269,6 +270,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
           onChange?.(selectedValue)
           setOpen(false)
           setHighlightedIndex(-1)
+          setSearchQuery('')
           if (editable && inputRef.current) {
             inputRef.current.blur()
           }
@@ -312,6 +314,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
         if (!activeElement || (!isInContainer && !isInDropdown && !isSearchInput)) {
           setOpen(false)
           setHighlightedIndex(-1)
+          setSearchQuery('')
         }
       }, 150)
     }, [])
@@ -326,6 +329,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
         if (e.key === 'Escape') {
           setOpen(false)
           setHighlightedIndex(-1)
+          setSearchQuery('')
           if (editable && inputRef.current) {
             inputRef.current.blur()
           }
diff --git a/apps/sim/lib/core/config/env.ts b/apps/sim/lib/core/config/env.ts
@@ -260,6 +260,9 @@ export const env = createEnv({
     // Invitations - for self-hosted deployments
     DISABLE_INVITATIONS:                   z.boolean().optional(),                 // Disable workspace invitations globally (for self-hosted deployments)
 
+    // Development Tools
+    REACT_GRAB_ENABLED:                    z.boolean().optional(),                 // Enable React Grab for UI element debugging in Cursor/AI agents (dev only)
+
     // SSO Configuration (for script-based registration)
     SSO_ENABLED:                           z.boolean().optional(),                 // Enable SSO functionality
     SSO_PROVIDER_TYPE:                     z.enum(['oidc', 'saml']).optional(),    // [REQUIRED] SSO provider type
diff --git a/apps/sim/lib/core/config/feature-flags.ts b/apps/sim/lib/core/config/feature-flags.ts
@@ -111,6 +111,12 @@ export const isE2bEnabled = isTruthy(env.E2B_ENABLED)
  */
 export const isInvitationsDisabled = isTruthy(env.DISABLE_INVITATIONS)
 
+/**
+ * Is React Grab enabled for UI element debugging
+ * When true and in development mode, enables React Grab for copying UI element context to clipboard
+ */
+export const isReactGrabEnabled = isDev && isTruthy(env.REACT_GRAB_ENABLED)
+
 /**
  * Get cost multiplier based on environment
  */
diff --git a/bun.lock b/bun.lock
