feat(freestyle): refactored handler in executor, migrated from webcontainer to freestyle for code execution, fixed condition block issues (#222)

* migrated from webcontainers to freestyle for sandboxed code execution, updated all references

* fixed condition block edges disappearing

* fix issue with condition block out-of-order resolving inputs

* refactored handlers in executor to be separate files, added unit tests

* remove old executor handlers file

Author: waleedlatif1

docker-compose.yml

@@ -13,18 +13,18 @@ services:
       - /app/.next
     environment:
       - NODE_ENV=development
-      - DATABASE_URL=postgresql://postgres:postgres@db:5432/simstudio
+      - DATABASE_URL=postgresql://postgres:password@postgres:5432/postgres
       - POSTGRES_URL=postgresql://postgres:postgres@db:5432/simstudio
       - BETTER_AUTH_URL=http://localhost:3000
       - NEXT_PUBLIC_APP_URL=http://localhost:3000
       - BETTER_AUTH_SECRET=your_auth_secret_here
       - ENCRYPTION_KEY=your_encryption_key_here
+      - FREESTYLE_API_KEY=placeholder
       - GOOGLE_CLIENT_ID=placeholder
       - GOOGLE_CLIENT_SECRET=placeholder
       - GITHUB_CLIENT_ID=placeholder
       - GITHUB_CLIENT_SECRET=placeholder
       - RESEND_API_KEY=placeholder
-      - WEBCONTAINER_CLIENT_ID=placeholder
     depends_on:
       db:
         condition: service_healthy

docs/content/docs/execution/advanced.mdx

@@ -51,7 +51,7 @@ Comprehensive error information is captured in the execution logs:
 
 For certain operations, the system provides automatic fallbacks:
 
-- **Function Execution**: WebContainer execution first, then VM execution if needed
+- **Function Execution**: Freestyle execution first, then VM execution if needed
 - **API Requests**: Automatic retries for transient network errors
 - **Model Calls**: Fallback to alternative models if primary model is unavailable
 

docs/content/docs/execution/index.mdx

@@ -194,7 +194,7 @@ The execution engine includes built-in error handling mechanisms:
 
 - **Block-Level Errors** - Errors in one block don't necessarily stop the entire workflow execution.
 - **Detailed Error Logs** - Comprehensive error information is captured in the execution logs, including error messages, stack traces, and relevant context.
-- **Fallback Mechanisms** - For function execution, the system tries WebContainer execution first, then falls back to VM execution if needed.
+- **Fallback Mechanisms** - For function execution, the system tries Freestyle execution first, then falls back to VM execution if needed.
 - **Recovery Options** - Configure blocks to retry on failure or implement custom error handling logic.
 
 ### Environment Variables

packages/sdk/src/generated/registry.ts

@@ -12,7 +12,6 @@ export const availableTools = [
   "hubspot_contacts",
   "salesforce_opportunities",
   "function_execute",
-  "webcontainer_execute",
   "vision_tool",
   "firecrawl_scrape",
   "jina_readurl",
@@ -103,7 +102,6 @@ export const toolToBlockMap: Record<string, string> = {
   'hubspot_contacts': 'HubspotContactsBlock',
   'salesforce_opportunities': 'SalesforceOpportunitiesBlock',
   'function_execute': 'FunctionExecuteBlock',
-  'webcontainer_execute': 'WebcontainerExecuteBlock',
   'vision_tool': 'VisionToolBlock',
   'firecrawl_scrape': 'FirecrawlScrapeBlock',
   'jina_readurl': 'JinaReadurlBlock',
@@ -160,7 +158,6 @@ export const toolRequiredParameters: Record<string, string[]> = {
   'hubspot_contacts': ["apiKey"],
   'salesforce_opportunities': ["apiKey"],
   'function_execute': [],
-  'webcontainer_execute': [],
   'vision_tool': ["apiKey"],
   'firecrawl_scrape': ["apiKey"],
   'jina_readurl': ["apiKey"],

sim/.env.example

@@ -12,8 +12,8 @@ ENCRYPTION_KEY=your_encryption_key  # Use `openssl rand -hex 64` to generate
 # RESEND_API_KEY=  # Uncomment and add your key from https://resend.com to send actual emails
                    # If left commented out, emails will be logged to console instead
 
-# StackBlitz (Webcontainer) API Key (Optional, for handling sandboxed code execution for functions/custom-tools)
-# WEBCONTAINER_CLIENT_ID= # Uncomment and add your key from https://stackblitz.com/docs/webcontainer-api#webcontainer-client-id
+# Freestyle API Key (Required for sandboxed code execution for functions/custom-tools)
+# FREESTYLE_API_KEY= # Uncomment and add your key from https://docs.freestyle.sh/Getting-Started/run
 
 # S3 Storage Configuration (Optional)
 # Set USE_S3=true to enable S3 storage in development

sim/.prettierrc

@@ -17,6 +17,8 @@
   "singleAttributePerLine": false,
   "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"],
   "importOrder": [
+    "^(.*)/__test-utils__/mock-dependencies$",
+    "^(vitest|jest)$",
     "^(react/(.*)$)|^(react$)",
     "^(next/(.*)$)|^(next$)",
     "<THIRD_PARTY_MODULES>",

sim/app/api/function/execute/route.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
+import { FreestyleSandboxes } from 'freestyle-sandboxes'
 import { createContext, Script } from 'vm'
 import { createLogger } from '@/lib/logs/console-logger'
 
@@ -61,45 +62,156 @@ export async function POST(req: NextRequest) {
     // Resolve variables in the code with workflow environment variables
     const resolvedCode = resolveCodeVariables(code, params, envVars)
 
-    // Create a secure context with console logging
-    const context = createContext({
-      params,
-      environmentVariables: envVars, // Make environment variables available in the context
-      console: {
-        log: (...args: any[]) => {
-          const logMessage = args
-            .map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : String(arg)))
-            .join(' ')
-          stdout += logMessage
-        },
-        error: (...args: any[]) => {
-          const errorMessage = args
-            .map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : String(arg)))
-            .join(' ')
-          logger.error(`[${requestId}] Code Console Error:`, errorMessage)
-          stdout += 'ERROR: ' + errorMessage
-        },
-      },
-    })
-
-    const script = new Script(`
-      (async () => {
-        try {
-          ${resolvedCode}
-        } catch (error) {
-          console.error(error);
-          throw error;
+    let result: any
+    let executionMethod = 'vm' // Default execution method
+
+    // Try to use Freestyle if the API key is available
+    if (process.env.FREESTYLE_API_KEY) {
+      try {
+        logger.info(`[${requestId}] Using Freestyle for code execution`)
+        executionMethod = 'freestyle'
+
+        // Extract npm packages from code if needed
+        const importRegex =
+          /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from\s+?)|)(?:(?:"([^"]*)")|(?:'([^']*)'))[^;]*/g
+        const requireRegex = /const\s+[\w\s{}]*\s*=\s*require\s*\(\s*['"]([^'"]+)['"]\s*\)/g
+
+        const packages: Record<string, string> = {}
+        const matches = [
+          ...resolvedCode.matchAll(importRegex),
+          ...resolvedCode.matchAll(requireRegex),
+        ]
+
+        // Extract package names from import statements
+        for (const match of matches) {
+          const packageName = match[1] || match[2]
+          if (packageName && !packageName.startsWith('.') && !packageName.startsWith('/')) {
+            // Extract just the package name without version or subpath
+            const basePackageName = packageName.split('/')[0]
+            packages[basePackageName] = 'latest' // Use latest version
+          }
         }
-      })()
-    `)
 
-    const result = await script.runInContext(context, {
-      timeout,
-      displayErrors: true,
-    })
+        const freestyle = new FreestyleSandboxes({
+          apiKey: process.env.FREESTYLE_API_KEY,
+        })
+
+        // Wrap code in export default to match Freestyle's expectations
+        const wrappedCode = `export default async () => {${resolvedCode}}`
+
+        // Execute the code with Freestyle
+        const res = await freestyle.executeScript(wrappedCode, {
+          nodeModules: packages,
+          timeout: null,
+          envVars: envVars,
+        })
+
+        result = res.result
+        logger.info(`[${requestId}] Freestyle execution result`, {
+          result,
+          stdout,
+        })
+        stdout =
+          res.logs
+            ?.map((log) => (log.type === 'error' ? 'ERROR: ' : '') + log.message)
+            .join('\n') || ''
+      } catch (error: any) {
+        // Log freestyle error and fall back to VM execution
+        logger.error(`[${requestId}] Freestyle execution failed, falling back to VM:`, {
+          error: error.message,
+          stack: error.stack,
+        })
+        executionMethod = 'vm_fallback'
+
+        // Continue to VM execution
+        const context = createContext({
+          params,
+          environmentVariables: envVars,
+          console: {
+            log: (...args: any[]) => {
+              const logMessage =
+                args
+                  .map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : String(arg)))
+                  .join(' ') + '\n'
+              stdout += logMessage
+            },
+            error: (...args: any[]) => {
+              const errorMessage =
+                args
+                  .map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : String(arg)))
+                  .join(' ') + '\n'
+              logger.error(`[${requestId}] Code Console Error:`, errorMessage)
+              stdout += 'ERROR: ' + errorMessage
+            },
+          },
+        })
+
+        const script = new Script(`
+          (async () => {
+            try {
+              ${resolvedCode}
+            } catch (error) {
+              console.error(error);
+              throw error;
+            }
+          })()
+        `)
+
+        result = await script.runInContext(context, {
+          timeout,
+          displayErrors: true,
+        })
+        logger.info(`[${requestId}] VM execution result`, {
+          result,
+          stdout,
+        })
+      }
+    } else {
+      // No Freestyle API key, use VM execution
+      logger.info(`[${requestId}] Using VM for code execution (no Freestyle API key available)`)
+
+      // Create a secure context with console logging
+      const context = createContext({
+        params,
+        environmentVariables: envVars,
+        console: {
+          log: (...args: any[]) => {
+            const logMessage =
+              args
+                .map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : String(arg)))
+                .join(' ') + '\n'
+            stdout += logMessage
+          },
+          error: (...args: any[]) => {
+            const errorMessage =
+              args
+                .map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : String(arg)))
+                .join(' ') + '\n'
+            logger.error(`[${requestId}] Code Console Error:`, errorMessage)
+            stdout += 'ERROR: ' + errorMessage
+          },
+        },
+      })
+
+      const script = new Script(`
+        (async () => {
+          try {
+            ${resolvedCode}
+          } catch (error) {
+            console.error(error);
+            throw error;
+          }
+        })()
+      `)
+
+      result = await script.runInContext(context, {
+        timeout,
+        displayErrors: true,
+      })
+    }
 
     const executionTime = Date.now() - startTime
-    logger.info(`[${requestId}] Function executed successfully`, {
+    logger.info(`[${requestId}] Function executed successfully using ${executionMethod}`, {
       executionTime,
     })
 
@@ -117,6 +229,7 @@ export async function POST(req: NextRequest) {
     const executionTime = Date.now() - startTime
     logger.error(`[${requestId}] Function execution failed`, {
       error: error.message || 'Unknown error',
+      stack: error.stack,
       executionTime,
     })