remove useless instruction

* feat(langsmith): add langsmith tools for logging, output selector use tool-aware listing

* fix

* fix docs

* fix positioning of outputs

* fix docs script

apps/sim/app/api/folders/[id]/route.ts

@@ -14,6 +14,7 @@ const updateFolderSchema = z.object({
   color: z.string().optional(),
   isExpanded: z.boolean().optional(),
   parentId: z.string().nullable().optional(),
+  sortOrder: z.number().int().min(0).optional(),
 })
 
 // PUT - Update a folder
@@ -38,7 +39,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
       return NextResponse.json({ error: `Validation failed: ${errorMessages}` }, { status: 400 })
     }
 
-    const { name, color, isExpanded, parentId } = validationResult.data
+    const { name, color, isExpanded, parentId, sortOrder } = validationResult.data
 
     // Verify the folder exists
     const existingFolder = await db
@@ -81,12 +82,12 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
       }
     }
 
-    // Update the folder
-    const updates: any = { updatedAt: new Date() }
+    const updates: Record<string, unknown> = { updatedAt: new Date() }
     if (name !== undefined) updates.name = name.trim()
     if (color !== undefined) updates.color = color
     if (isExpanded !== undefined) updates.isExpanded = isExpanded
     if (parentId !== undefined) updates.parentId = parentId || null
+    if (sortOrder !== undefined) updates.sortOrder = sortOrder
 
     const [updatedFolder] = await db
       .update(workflowFolder)

apps/sim/app/api/folders/reorder/route.ts

@@ -0,0 +1,91 @@
+import { db } from '@sim/db'
+import { workflowFolder } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { eq, inArray } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
+
+const logger = createLogger('FolderReorderAPI')
+
+const ReorderSchema = z.object({
+  workspaceId: z.string(),
+  updates: z.array(
+    z.object({
+      id: z.string(),
+      sortOrder: z.number().int().min(0),
+      parentId: z.string().nullable().optional(),
+    })
+  ),
+})
+
+export async function PUT(req: NextRequest) {
+  const requestId = generateRequestId()
+  const session = await getSession()
+
+  if (!session?.user?.id) {
+    logger.warn(`[${requestId}] Unauthorized folder reorder attempt`)
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  try {
+    const body = await req.json()
+    const { workspaceId, updates } = ReorderSchema.parse(body)
+
+    const permission = await getUserEntityPermissions(session.user.id, 'workspace', workspaceId)
+    if (!permission || permission === 'read') {
+      logger.warn(
+        `[${requestId}] User ${session.user.id} lacks write permission for workspace ${workspaceId}`
+      )
+      return NextResponse.json({ error: 'Write access required' }, { status: 403 })
+    }
+
+    const folderIds = updates.map((u) => u.id)
+    const existingFolders = await db
+      .select({ id: workflowFolder.id, workspaceId: workflowFolder.workspaceId })
+      .from(workflowFolder)
+      .where(inArray(workflowFolder.id, folderIds))
+
+    const validIds = new Set(
+      existingFolders.filter((f) => f.workspaceId === workspaceId).map((f) => f.id)
+    )
+
+    const validUpdates = updates.filter((u) => validIds.has(u.id))
+
+    if (validUpdates.length === 0) {
+      return NextResponse.json({ error: 'No valid folders to update' }, { status: 400 })
+    }
+
+    await db.transaction(async (tx) => {
+      for (const update of validUpdates) {
+        const updateData: Record<string, unknown> = {
+          sortOrder: update.sortOrder,
+          updatedAt: new Date(),
+        }
+        if (update.parentId !== undefined) {
+          updateData.parentId = update.parentId
+        }
+        await tx.update(workflowFolder).set(updateData).where(eq(workflowFolder.id, update.id))
+      }
+    })
+
+    logger.info(
+      `[${requestId}] Reordered ${validUpdates.length} folders in workspace ${workspaceId}`
+    )
+
+    return NextResponse.json({ success: true, updated: validUpdates.length })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      logger.warn(`[${requestId}] Invalid folder reorder data`, { errors: error.errors })
+      return NextResponse.json(
+        { error: 'Invalid request data', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Error reordering folders`, error)
+    return NextResponse.json({ error: 'Failed to reorder folders' }, { status: 500 })
+  }
+}

apps/sim/app/api/folders/route.ts

@@ -58,7 +58,7 @@ export async function POST(request: NextRequest) {
     }
 
     const body = await request.json()
-    const { name, workspaceId, parentId, color } = body
+    const { name, workspaceId, parentId, color, sortOrder: providedSortOrder } = body
 
     if (!name || !workspaceId) {
       return NextResponse.json({ error: 'Name and workspace ID are required' }, { status: 400 })
@@ -81,25 +81,26 @@ export async function POST(request: NextRequest) {
     // Generate a new ID
     const id = crypto.randomUUID()
 
-    // Use transaction to ensure sortOrder consistency
     const newFolder = await db.transaction(async (tx) => {
-      // Get the next sort order for the parent (or root level)
-      // Consider all folders in the workspace, not just those created by current user
-      const existingFolders = await tx
-        .select({ sortOrder: workflowFolder.sortOrder })
-        .from(workflowFolder)
-        .where(
-          and(
-            eq(workflowFolder.workspaceId, workspaceId),
-            parentId ? eq(workflowFolder.parentId, parentId) : isNull(workflowFolder.parentId)
+      let sortOrder: number
+      if (providedSortOrder !== undefined) {
+        sortOrder = providedSortOrder
+      } else {
+        const existingFolders = await tx
+          .select({ sortOrder: workflowFolder.sortOrder })
+          .from(workflowFolder)
+          .where(
+            and(
+              eq(workflowFolder.workspaceId, workspaceId),
+              parentId ? eq(workflowFolder.parentId, parentId) : isNull(workflowFolder.parentId)
+            )
           )
-        )
-        .orderBy(desc(workflowFolder.sortOrder))
-        .limit(1)
+          .orderBy(desc(workflowFolder.sortOrder))
+          .limit(1)
 
-      const nextSortOrder = existingFolders.length > 0 ? existingFolders[0].sortOrder + 1 : 0
+        sortOrder = existingFolders.length > 0 ? existingFolders[0].sortOrder + 1 : 0
+      }
 
-      // Insert the new folder within the same transaction
       const [folder] = await tx
         .insert(workflowFolder)
         .values({
@@ -109,7 +110,7 @@ export async function POST(request: NextRequest) {
           workspaceId,
           parentId: parentId || null,
           color: color || '#6B7280',
-          sortOrder: nextSortOrder,
+          sortOrder,
         })
         .returning()
 

apps/sim/app/api/webhooks/[id]/route.ts

@@ -7,6 +7,11 @@ import { getSession } from '@/lib/auth'
 import { validateInteger } from '@/lib/core/security/input-validation'
 import { PlatformEvents } from '@/lib/core/telemetry'
 import { generateRequestId } from '@/lib/core/utils/request'
+import {
+  cleanupExternalWebhook,
+  createExternalWebhookSubscription,
+  shouldRecreateExternalWebhookSubscription,
+} from '@/lib/webhooks/provider-subscriptions'
 import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
 
 const logger = createLogger('WebhookAPI')
@@ -177,6 +182,46 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
       return NextResponse.json({ error: 'Access denied' }, { status: 403 })
     }
 
+    const existingProviderConfig =
+      (webhookData.webhook.providerConfig as Record<string, unknown>) || {}
+    let nextProviderConfig =
+      providerConfig !== undefined &&
+      resolvedProviderConfig &&
+      typeof resolvedProviderConfig === 'object'
+        ? (resolvedProviderConfig as Record<string, unknown>)
+        : existingProviderConfig
+    const nextProvider = (provider ?? webhookData.webhook.provider) as string
+
+    if (
+      providerConfig !== undefined &&
+      shouldRecreateExternalWebhookSubscription({
+        previousProvider: webhookData.webhook.provider as string,
+        nextProvider,
+        previousConfig: existingProviderConfig,
+        nextConfig: nextProviderConfig,
+      })
+    ) {
+      await cleanupExternalWebhook(
+        { ...webhookData.webhook, providerConfig: existingProviderConfig },
+        webhookData.workflow,
+        requestId
+      )
+
+      const result = await createExternalWebhookSubscription(
+        request,
+        {
+          ...webhookData.webhook,
+          provider: nextProvider,
+          providerConfig: nextProviderConfig,
+        },
+        webhookData.workflow,
+        session.user.id,
+        requestId
+      )
+
+      nextProviderConfig = result.updatedProviderConfig as Record<string, unknown>
+    }
+
     logger.debug(`[${requestId}] Updating webhook properties`, {
       hasPathUpdate: path !== undefined,
       hasProviderUpdate: provider !== undefined,
@@ -188,16 +233,16 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
     // Merge providerConfig to preserve credential-related fields
     let finalProviderConfig = webhooks[0].webhook.providerConfig
     if (providerConfig !== undefined) {
-      const existingConfig = (webhooks[0].webhook.providerConfig as Record<string, unknown>) || {}
+      const existingConfig = existingProviderConfig
       finalProviderConfig = {
-        ...resolvedProviderConfig,
+        ...nextProviderConfig,
         credentialId: existingConfig.credentialId,
         credentialSetId: existingConfig.credentialSetId,
         userId: existingConfig.userId,
         historyId: existingConfig.historyId,
         lastCheckedTimestamp: existingConfig.lastCheckedTimestamp,
         setupCompleted: existingConfig.setupCompleted,
-        externalId: existingConfig.externalId,
+        externalId: nextProviderConfig.externalId ?? existingConfig.externalId,
       }
     }
 

apps/sim/app/api/webhooks/route.ts

@@ -7,9 +7,8 @@ import { type NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
 import { PlatformEvents } from '@/lib/core/telemetry'
 import { generateRequestId } from '@/lib/core/utils/request'
-import { getBaseUrl } from '@/lib/core/utils/urls'
+import { createExternalWebhookSubscription } from '@/lib/webhooks/provider-subscriptions'
 import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
-import { getOAuthToken } from '@/app/api/auth/oauth/utils'
 
 const logger = createLogger('WebhooksAPI')
 
@@ -257,7 +256,7 @@ export async function POST(request: NextRequest) {
     const finalProviderConfig = providerConfig || {}
 
     const { resolveEnvVarsInObject } = await import('@/lib/webhooks/env-resolver')
-    const resolvedProviderConfig = await resolveEnvVarsInObject(
+    let resolvedProviderConfig = await resolveEnvVarsInObject(
       finalProviderConfig,
       userId,
       workflowRecord.workspaceId || undefined
@@ -414,149 +413,33 @@ export async function POST(request: NextRequest) {
     }
     // --- End Credential Set Handling ---
 
-    // Create external subscriptions before saving to DB to prevent orphaned records
-    let externalSubscriptionId: string | undefined
     let externalSubscriptionCreated = false
-
-    const createTempWebhookData = () => ({
+    const createTempWebhookData = (providerConfigOverride = resolvedProviderConfig) => ({
       id: targetWebhookId || nanoid(),
       path: finalPath,
-      providerConfig: resolvedProviderConfig,
+      provider,
+      providerConfig: providerConfigOverride,
     })
 
-    if (provider === 'airtable') {
-      logger.info(`[${requestId}] Creating Airtable subscription before saving to database`)
-      try {
-        externalSubscriptionId = await createAirtableWebhookSubscription(
-          request,
-          userId,
-          createTempWebhookData(),
-          requestId
-        )
-        if (externalSubscriptionId) {
-          resolvedProviderConfig.externalId = externalSubscriptionId
-          externalSubscriptionCreated = true
-        }
-      } catch (err) {
-        logger.error(`[${requestId}] Error creating Airtable webhook subscription`, err)
-        return NextResponse.json(
-          {
-            error: 'Failed to create webhook in Airtable',
-            details: err instanceof Error ? err.message : 'Unknown error',
-          },
-          { status: 500 }
-        )
-      }
-    }
-
-    if (provider === 'calendly') {
-      logger.info(`[${requestId}] Creating Calendly subscription before saving to database`)
-      try {
-        externalSubscriptionId = await createCalendlyWebhookSubscription(
-          request,
-          userId,
-          createTempWebhookData(),
-          requestId
-        )
-        if (externalSubscriptionId) {
-          resolvedProviderConfig.externalId = externalSubscriptionId
-          externalSubscriptionCreated = true
-        }
-      } catch (err) {
-        logger.error(`[${requestId}] Error creating Calendly webhook subscription`, err)
-        return NextResponse.json(
-          {
-            error: 'Failed to create webhook in Calendly',
-            details: err instanceof Error ? err.message : 'Unknown error',
-          },
-          { status: 500 }
-        )
-      }
-    }
-
-    if (provider === 'microsoft-teams') {
-      const { createTeamsSubscription } = await import('@/lib/webhooks/provider-subscriptions')
-      logger.info(`[${requestId}] Creating Teams subscription before saving to database`)
-      try {
-        await createTeamsSubscription(request, createTempWebhookData(), workflowRecord, requestId)
-        externalSubscriptionCreated = true
-      } catch (err) {
-        logger.error(`[${requestId}] Error creating Teams subscription`, err)
-        return NextResponse.json(
-          {
-            error: 'Failed to create Teams subscription',
-            details: err instanceof Error ? err.message : 'Unknown error',
-          },
-          { status: 500 }
-        )
-      }
-    }
-
-    if (provider === 'telegram') {
-      const { createTelegramWebhook } = await import('@/lib/webhooks/provider-subscriptions')
-      logger.info(`[${requestId}] Creating Telegram webhook before saving to database`)
-      try {
-        await createTelegramWebhook(request, createTempWebhookData(), requestId)
-        externalSubscriptionCreated = true
-      } catch (err) {
-        logger.error(`[${requestId}] Error creating Telegram webhook`, err)
-        return NextResponse.json(
-          {
-            error: 'Failed to create Telegram webhook',
-            details: err instanceof Error ? err.message : 'Unknown error',
-          },
-          { status: 500 }
-        )
-      }
-    }
-
-    if (provider === 'webflow') {
-      logger.info(`[${requestId}] Creating Webflow subscription before saving to database`)
-      try {
-        externalSubscriptionId = await createWebflowWebhookSubscription(
-          request,
-          userId,
-          createTempWebhookData(),
-          requestId
-        )
-        if (externalSubscriptionId) {
-          resolvedProviderConfig.externalId = externalSubscriptionId
-          externalSubscriptionCreated = true
-        }
-      } catch (err) {
-        logger.error(`[${requestId}] Error creating Webflow webhook subscription`, err)
-        return NextResponse.json(
-          {
-            error: 'Failed to create webhook in Webflow',
-            details: err instanceof Error ? err.message : 'Unknown error',
-          },
-          { status: 500 }
-        )
-      }
-    }
-
-    if (provider === 'typeform') {
-      const { createTypeformWebhook } = await import('@/lib/webhooks/provider-subscriptions')
-      logger.info(`[${requestId}] Creating Typeform webhook before saving to database`)
-      try {
-        const usedTag = await createTypeformWebhook(request, createTempWebhookData(), requestId)
-
-        if (!resolvedProviderConfig.webhookTag) {
-          resolvedProviderConfig.webhookTag = usedTag
-          logger.info(`[${requestId}] Stored auto-generated webhook tag: ${usedTag}`)
-        }
-
-        externalSubscriptionCreated = true
-      } catch (err) {
-        logger.error(`[${requestId}] Error creating Typeform webhook`, err)
-        return NextResponse.json(
-          {
-            error: 'Failed to create webhook in Typeform',
-            details: err instanceof Error ? err.message : 'Unknown error',
-          },
-          { status: 500 }
-        )
-      }
+    try {
+      const result = await createExternalWebhookSubscription(
+        request,
+        createTempWebhookData(),
+        workflowRecord,
+        userId,
+        requestId
+      )
+      resolvedProviderConfig = result.updatedProviderConfig as Record<string, unknown>
+      externalSubscriptionCreated = result.externalSubscriptionCreated
+    } catch (err) {
+      logger.error(`[${requestId}] Error creating external webhook subscription`, err)
+      return NextResponse.json(
+        {
+          error: 'Failed to create external webhook subscription',
+          details: err instanceof Error ? err.message : 'Unknown error',
+        },
+        { status: 500 }
+      )
     }
 
     // Now save to database (only if subscription succeeded or provider doesn't need external subscription)
@@ -617,7 +500,11 @@ export async function POST(request: NextRequest) {
         logger.error(`[${requestId}] DB save failed, cleaning up external subscription`, dbError)
         try {
           const { cleanupExternalWebhook } = await import('@/lib/webhooks/provider-subscriptions')
-          await cleanupExternalWebhook(createTempWebhookData(), workflowRecord, requestId)
+          await cleanupExternalWebhook(
+            createTempWebhookData(resolvedProviderConfig),
+            workflowRecord,
+            requestId
+          )
         } catch (cleanupError) {
           logger.error(
             `[${requestId}] Failed to cleanup external subscription after DB save failure`,
@@ -741,110 +628,6 @@ export async function POST(request: NextRequest) {
     }
     // --- End RSS specific logic ---
 
-    if (savedWebhook && provider === 'grain') {
-      logger.info(`[${requestId}] Grain provider detected. Creating Grain webhook subscription.`)
-      try {
-        const grainResult = await createGrainWebhookSubscription(
-          request,
-          {
-            id: savedWebhook.id,
-            path: savedWebhook.path,
-            providerConfig: savedWebhook.providerConfig,
-          },
-          requestId
-        )
-
-        if (grainResult) {
-          // Update the webhook record with the external Grain hook ID and event types for filtering
-          const updatedConfig = {
-            ...(savedWebhook.providerConfig as Record<string, any>),
-            externalId: grainResult.id,
-            eventTypes: grainResult.eventTypes,
-          }
-          await db
-            .update(webhook)
-            .set({
-              providerConfig: updatedConfig,
-              updatedAt: new Date(),
-            })
-            .where(eq(webhook.id, savedWebhook.id))
-
-          savedWebhook.providerConfig = updatedConfig
-          logger.info(`[${requestId}] Successfully created Grain webhook`, {
-            grainHookId: grainResult.id,
-            eventTypes: grainResult.eventTypes,
-            webhookId: savedWebhook.id,
-          })
-        }
-      } catch (err) {
-        logger.error(
-          `[${requestId}] Error creating Grain webhook subscription, rolling back webhook`,
-          err
-        )
-        await db.delete(webhook).where(eq(webhook.id, savedWebhook.id))
-        return NextResponse.json(
-          {
-            error: 'Failed to create webhook in Grain',
-            details: err instanceof Error ? err.message : 'Unknown error',
-          },
-          { status: 500 }
-        )
-      }
-    }
-    // --- End Grain specific logic ---
-
-    // --- Lemlist specific logic ---
-    if (savedWebhook && provider === 'lemlist') {
-      logger.info(
-        `[${requestId}] Lemlist provider detected. Creating Lemlist webhook subscription.`
-      )
-      try {
-        const lemlistResult = await createLemlistWebhookSubscription(
-          {
-            id: savedWebhook.id,
-            path: savedWebhook.path,
-            providerConfig: savedWebhook.providerConfig,
-          },
-          requestId
-        )
-
-        if (lemlistResult) {
-          // Update the webhook record with the external Lemlist hook ID
-          const updatedConfig = {
-            ...(savedWebhook.providerConfig as Record<string, any>),
-            externalId: lemlistResult.id,
-          }
-          await db
-            .update(webhook)
-            .set({
-              providerConfig: updatedConfig,
-              updatedAt: new Date(),
-            })
-            .where(eq(webhook.id, savedWebhook.id))
-
-          savedWebhook.providerConfig = updatedConfig
-          logger.info(`[${requestId}] Successfully created Lemlist webhook`, {
-            lemlistHookId: lemlistResult.id,
-            webhookId: savedWebhook.id,
-          })
-        }
-      } catch (err) {
-        logger.error(
-          `[${requestId}] Error creating Lemlist webhook subscription, rolling back webhook`,
-          err
-        )
-        await db.delete(webhook).where(eq(webhook.id, savedWebhook.id))
-        return NextResponse.json(
-          {
-            error: 'Failed to create webhook in Lemlist',
-            details: err instanceof Error ? err.message : 'Unknown error',
-          },
-          { status: 500 }
-        )
-      }
-    }
-    // --- End Lemlist specific logic ---
-
     if (!targetWebhookId && savedWebhook) {
       try {
         PlatformEvents.webhookCreated({
@@ -868,616 +651,3 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
-
-// Helper function to create the webhook subscription in Airtable
-async function createAirtableWebhookSubscription(
-  request: NextRequest,
-  userId: string,
-  webhookData: any,
-  requestId: string
-): Promise<string | undefined> {
-  try {
-    const { path, providerConfig } = webhookData
-    const { baseId, tableId, includeCellValuesInFieldIds } = providerConfig || {}
-
-    if (!baseId || !tableId) {
-      logger.warn(`[${requestId}] Missing baseId or tableId for Airtable webhook creation.`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error(
-        'Base ID and Table ID are required to create Airtable webhook. Please provide valid Airtable base and table IDs.'
-      )
-    }
-
-    const accessToken = await getOAuthToken(userId, 'airtable')
-    if (!accessToken) {
-      logger.warn(
-        `[${requestId}] Could not retrieve Airtable access token for user ${userId}. Cannot create webhook in Airtable.`
-      )
-      throw new Error(
-        'Airtable account connection required. Please connect your Airtable account in the trigger configuration and try again.'
-      )
-    }
-
-    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
-
-    const airtableApiUrl = `https://api.airtable.com/v0/bases/${baseId}/webhooks`
-
-    const specification: any = {
-      options: {
-        filters: {
-          dataTypes: ['tableData'], // Watch table data changes
-          recordChangeScope: tableId, // Watch only the specified table
-        },
-      },
-    }
-
-    // Conditionally add the 'includes' field based on the config
-    if (includeCellValuesInFieldIds === 'all') {
-      specification.options.includes = {
-        includeCellValuesInFieldIds: 'all',
-      }
-    }
-
-    const requestBody: any = {
-      notificationUrl: notificationUrl,
-      specification: specification,
-    }
-
-    const airtableResponse = await fetch(airtableApiUrl, {
-      method: 'POST',
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(requestBody),
-    })
-
-    // Airtable often returns 200 OK even for errors in the body, check payload
-    const responseBody = await airtableResponse.json()
-
-    if (!airtableResponse.ok || responseBody.error) {
-      const errorMessage =
-        responseBody.error?.message || responseBody.error || 'Unknown Airtable API error'
-      const errorType = responseBody.error?.type
-      logger.error(
-        `[${requestId}] Failed to create webhook in Airtable for webhook ${webhookData.id}. Status: ${airtableResponse.status}`,
-        { type: errorType, message: errorMessage, response: responseBody }
-      )
-
-      let userFriendlyMessage = 'Failed to create webhook subscription in Airtable'
-      if (airtableResponse.status === 404) {
-        userFriendlyMessage =
-          'Airtable base or table not found. Please verify that the Base ID and Table ID are correct and that you have access to them.'
-      } else if (errorMessage && errorMessage !== 'Unknown Airtable API error') {
-        userFriendlyMessage = `Airtable error: ${errorMessage}`
-      }
-
-      throw new Error(userFriendlyMessage)
-    }
-    logger.info(
-      `[${requestId}] Successfully created webhook in Airtable for webhook ${webhookData.id}.`,
-      {
-        airtableWebhookId: responseBody.id,
-      }
-    )
-    return responseBody.id
-  } catch (error: any) {
-    logger.error(
-      `[${requestId}] Exception during Airtable webhook creation for webhook ${webhookData.id}.`,
-      {
-        message: error.message,
-        stack: error.stack,
-      }
-    )
-    // Re-throw the error so it can be caught by the outer try-catch
-    throw error
-  }
-}
-
-// Helper function to create the webhook subscription in Calendly
-async function createCalendlyWebhookSubscription(
-  request: NextRequest,
-  userId: string,
-  webhookData: any,
-  requestId: string
-): Promise<string | undefined> {
-  try {
-    const { path, providerConfig } = webhookData
-    const { apiKey, organization, triggerId } = providerConfig || {}
-
-    if (!apiKey) {
-      logger.warn(`[${requestId}] Missing apiKey for Calendly webhook creation.`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error(
-        'Personal Access Token is required to create Calendly webhook. Please provide your Calendly Personal Access Token.'
-      )
-    }
-
-    if (!organization) {
-      logger.warn(`[${requestId}] Missing organization URI for Calendly webhook creation.`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error(
-        'Organization URI is required to create Calendly webhook. Please provide your Organization URI from the "Get Current User" operation.'
-      )
-    }
-
-    if (!triggerId) {
-      logger.warn(`[${requestId}] Missing triggerId for Calendly webhook creation.`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error('Trigger ID is required to create Calendly webhook')
-    }
-
-    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
-
-    // Map trigger IDs to Calendly event types
-    const eventTypeMap: Record<string, string[]> = {
-      calendly_invitee_created: ['invitee.created'],
-      calendly_invitee_canceled: ['invitee.canceled'],
-      calendly_routing_form_submitted: ['routing_form_submission.created'],
-      calendly_webhook: ['invitee.created', 'invitee.canceled', 'routing_form_submission.created'],
-    }
-
-    const events = eventTypeMap[triggerId] || ['invitee.created']
-
-    const calendlyApiUrl = 'https://api.calendly.com/webhook_subscriptions'
-
-    const requestBody = {
-      url: notificationUrl,
-      events,
-      organization,
-      scope: 'organization',
-    }
-
-    const calendlyResponse = await fetch(calendlyApiUrl, {
-      method: 'POST',
-      headers: {
-        Authorization: `Bearer ${apiKey}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(requestBody),
-    })
-
-    if (!calendlyResponse.ok) {
-      const errorBody = await calendlyResponse.json().catch(() => ({}))
-      const errorMessage = errorBody.message || errorBody.title || 'Unknown Calendly API error'
-      logger.error(
-        `[${requestId}] Failed to create webhook in Calendly for webhook ${webhookData.id}. Status: ${calendlyResponse.status}`,
-        { response: errorBody }
-      )
-
-      let userFriendlyMessage = 'Failed to create webhook subscription in Calendly'
-      if (calendlyResponse.status === 401) {
-        userFriendlyMessage =
-          'Calendly authentication failed. Please verify your Personal Access Token is correct.'
-      } else if (calendlyResponse.status === 403) {
-        userFriendlyMessage =
-          'Calendly access denied. Please ensure you have appropriate permissions and a paid Calendly subscription.'
-      } else if (calendlyResponse.status === 404) {
-        userFriendlyMessage =
-          'Calendly organization not found. Please verify the Organization URI is correct.'
-      } else if (errorMessage && errorMessage !== 'Unknown Calendly API error') {
-        userFriendlyMessage = `Calendly error: ${errorMessage}`
-      }
-
-      throw new Error(userFriendlyMessage)
-    }
-
-    const responseBody = await calendlyResponse.json()
-    const webhookUri = responseBody.resource?.uri
-
-    if (!webhookUri) {
-      logger.error(
-        `[${requestId}] Calendly webhook created but no webhook URI returned for webhook ${webhookData.id}`,
-        { response: responseBody }
-      )
-      throw new Error('Calendly webhook creation succeeded but no webhook URI was returned')
-    }
-
-    // Extract the webhook ID from the URI (e.g., https://api.calendly.com/webhook_subscriptions/WEBHOOK_ID)
-    const webhookId = webhookUri.split('/').pop()
-
-    if (!webhookId) {
-      logger.error(`[${requestId}] Could not extract webhook ID from Calendly URI: ${webhookUri}`, {
-        response: responseBody,
-      })
-      throw new Error('Failed to extract webhook ID from Calendly response')
-    }
-
-    logger.info(
-      `[${requestId}] Successfully created webhook in Calendly for webhook ${webhookData.id}.`,
-      {
-        calendlyWebhookUri: webhookUri,
-        calendlyWebhookId: webhookId,
-      }
-    )
-    return webhookId
-  } catch (error: any) {
-    logger.error(
-      `[${requestId}] Exception during Calendly webhook creation for webhook ${webhookData.id}.`,
-      {
-        message: error.message,
-        stack: error.stack,
-      }
-    )
-    // Re-throw the error so it can be caught by the outer try-catch
-    throw error
-  }
-}
-
-// Helper function to create the webhook subscription in Webflow
-async function createWebflowWebhookSubscription(
-  request: NextRequest,
-  userId: string,
-  webhookData: any,
-  requestId: string
-): Promise<string | undefined> {
-  try {
-    const { path, providerConfig } = webhookData
-    const { siteId, triggerId, collectionId, formId } = providerConfig || {}
-
-    if (!siteId) {
-      logger.warn(`[${requestId}] Missing siteId for Webflow webhook creation.`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error('Site ID is required to create Webflow webhook')
-    }
-
-    if (!triggerId) {
-      logger.warn(`[${requestId}] Missing triggerId for Webflow webhook creation.`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error('Trigger type is required to create Webflow webhook')
-    }
-
-    const accessToken = await getOAuthToken(userId, 'webflow')
-    if (!accessToken) {
-      logger.warn(
-        `[${requestId}] Could not retrieve Webflow access token for user ${userId}. Cannot create webhook in Webflow.`
-      )
-      throw new Error(
-        'Webflow account connection required. Please connect your Webflow account in the trigger configuration and try again.'
-      )
-    }
-
-    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
-
-    // Map trigger IDs to Webflow trigger types
-    const triggerTypeMap: Record<string, string> = {
-      webflow_collection_item_created: 'collection_item_created',
-      webflow_collection_item_changed: 'collection_item_changed',
-      webflow_collection_item_deleted: 'collection_item_deleted',
-      webflow_form_submission: 'form_submission',
-    }
-
-    const webflowTriggerType = triggerTypeMap[triggerId]
-    if (!webflowTriggerType) {
-      logger.warn(`[${requestId}] Invalid triggerId for Webflow: ${triggerId}`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error(`Invalid Webflow trigger type: ${triggerId}`)
-    }
-
-    const webflowApiUrl = `https://api.webflow.com/v2/sites/${siteId}/webhooks`
-
-    const requestBody: any = {
-      triggerType: webflowTriggerType,
-      url: notificationUrl,
-    }
-
-    // Add filter for collection-based triggers
-    if (collectionId && webflowTriggerType.startsWith('collection_item_')) {
-      requestBody.filter = {
-        resource_type: 'collection',
-        resource_id: collectionId,
-      }
-    }
-
-    // Add filter for form submissions
-    if (formId && webflowTriggerType === 'form_submission') {
-      requestBody.filter = {
-        resource_type: 'form',
-        resource_id: formId,
-      }
-    }
-
-    const webflowResponse = await fetch(webflowApiUrl, {
-      method: 'POST',
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        'Content-Type': 'application/json',
-        accept: 'application/json',
-      },
-      body: JSON.stringify(requestBody),
-    })
-
-    const responseBody = await webflowResponse.json()
-
-    if (!webflowResponse.ok || responseBody.error) {
-      const errorMessage = responseBody.message || responseBody.error || 'Unknown Webflow API error'
-      logger.error(
-        `[${requestId}] Failed to create webhook in Webflow for webhook ${webhookData.id}. Status: ${webflowResponse.status}`,
-        { message: errorMessage, response: responseBody }
-      )
-      throw new Error(errorMessage)
-    }
-
-    logger.info(
-      `[${requestId}] Successfully created webhook in Webflow for webhook ${webhookData.id}.`,
-      {
-        webflowWebhookId: responseBody.id || responseBody._id,
-      }
-    )
-
-    return responseBody.id || responseBody._id
-  } catch (error: any) {
-    logger.error(
-      `[${requestId}] Exception during Webflow webhook creation for webhook ${webhookData.id}.`,
-      {
-        message: error.message,
-        stack: error.stack,
-      }
-    )
-    throw error
-  }
-}
-
-// Helper function to create the webhook subscription in Grain
-async function createGrainWebhookSubscription(
-  request: NextRequest,
-  webhookData: any,
-  requestId: string
-): Promise<{ id: string; eventTypes: string[] } | undefined> {
-  try {
-    const { path, providerConfig } = webhookData
-    const { apiKey, triggerId, includeHighlights, includeParticipants, includeAiSummary } =
-      providerConfig || {}
-
-    if (!apiKey) {
-      logger.warn(`[${requestId}] Missing apiKey for Grain webhook creation.`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error(
-        'Grain API Key is required. Please provide your Grain Personal Access Token in the trigger configuration.'
-      )
-    }
-
-    // Map trigger IDs to Grain API hook_type (only 2 options: recording_added, upload_status)
-    const hookTypeMap: Record<string, string> = {
-      grain_webhook: 'recording_added',
-      grain_recording_created: 'recording_added',
-      grain_recording_updated: 'recording_added',
-      grain_highlight_created: 'recording_added',
-      grain_highlight_updated: 'recording_added',
-      grain_story_created: 'recording_added',
-      grain_upload_status: 'upload_status',
-    }
-
-    const eventTypeMap: Record<string, string[]> = {
-      grain_webhook: [],
-      grain_recording_created: ['recording_added'],
-      grain_recording_updated: ['recording_updated'],
-      grain_highlight_created: ['highlight_created'],
-      grain_highlight_updated: ['highlight_updated'],
-      grain_story_created: ['story_created'],
-      grain_upload_status: ['upload_status'],
-    }
-
-    const hookType = hookTypeMap[triggerId] ?? 'recording_added'
-    const eventTypes = eventTypeMap[triggerId] ?? []
-
-    if (!hookTypeMap[triggerId]) {
-      logger.warn(
-        `[${requestId}] Unknown triggerId for Grain: ${triggerId}, defaulting to recording_added`,
-        {
-          webhookId: webhookData.id,
-        }
-      )
-    }
-
-    logger.info(`[${requestId}] Creating Grain webhook`, {
-      triggerId,
-      hookType,
-      eventTypes,
-      webhookId: webhookData.id,
-    })
-
-    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
-
-    const grainApiUrl = 'https://api.grain.com/_/public-api/v2/hooks/create'
-
-    const requestBody: Record<string, any> = {
-      hook_url: notificationUrl,
-      hook_type: hookType,
-    }
-
-    // Build include object based on configuration
-    const include: Record<string, boolean> = {}
-    if (includeHighlights) {
-      include.highlights = true
-    }
-    if (includeParticipants) {
-      include.participants = true
-    }
-    if (includeAiSummary) {
-      include.ai_summary = true
-    }
-    if (Object.keys(include).length > 0) {
-      requestBody.include = include
-    }
-
-    const grainResponse = await fetch(grainApiUrl, {
-      method: 'POST',
-      headers: {
-        Authorization: `Bearer ${apiKey}`,
-        'Content-Type': 'application/json',
-        'Public-Api-Version': '2025-10-31',
-      },
-      body: JSON.stringify(requestBody),
-    })
-
-    const responseBody = await grainResponse.json()
-
-    if (!grainResponse.ok || responseBody.error || responseBody.errors) {
-      logger.warn('[App] Grain response body:', responseBody)
-      const errorMessage =
-        responseBody.errors?.detail ||
-        responseBody.error?.message ||
-        responseBody.error ||
-        responseBody.message ||
-        'Unknown Grain API error'
-      logger.error(
-        `[${requestId}] Failed to create webhook in Grain for webhook ${webhookData.id}. Status: ${grainResponse.status}`,
-        { message: errorMessage, response: responseBody }
-      )
-
-      let userFriendlyMessage = 'Failed to create webhook subscription in Grain'
-      if (grainResponse.status === 401) {
-        userFriendlyMessage =
-          'Invalid Grain API Key. Please verify your Personal Access Token is correct.'
-      } else if (grainResponse.status === 403) {
-        userFriendlyMessage =
-          'Access denied. Please ensure your Grain API Key has appropriate permissions.'
-      } else if (errorMessage && errorMessage !== 'Unknown Grain API error') {
-        userFriendlyMessage = `Grain error: ${errorMessage}`
-      }
-
-      throw new Error(userFriendlyMessage)
-    }
-
-    logger.info(
-      `[${requestId}] Successfully created webhook in Grain for webhook ${webhookData.id}.`,
-      {
-        grainWebhookId: responseBody.id,
-        eventTypes,
-      }
-    )
-
-    return { id: responseBody.id, eventTypes }
-  } catch (error: any) {
-    logger.error(
-      `[${requestId}] Exception during Grain webhook creation for webhook ${webhookData.id}.`,
-      {
-        message: error.message,
-        stack: error.stack,
-      }
-    )
-    throw error
-  }
-}
-
-// Helper function to create the webhook subscription in Lemlist
-async function createLemlistWebhookSubscription(
-  webhookData: any,
-  requestId: string
-): Promise<{ id: string } | undefined> {
-  try {
-    const { path, providerConfig } = webhookData
-    const { apiKey, triggerId, campaignId } = providerConfig || {}
-
-    if (!apiKey) {
-      logger.warn(`[${requestId}] Missing apiKey for Lemlist webhook creation.`, {
-        webhookId: webhookData.id,
-      })
-      throw new Error(
-        'Lemlist API Key is required. Please provide your Lemlist API Key in the trigger configuration.'
-      )
-    }
-
-    // Map trigger IDs to Lemlist event types
-    const eventTypeMap: Record<string, string | undefined> = {
-      lemlist_email_replied: 'emailsReplied',
-      lemlist_linkedin_replied: 'linkedinReplied',
-      lemlist_interested: 'interested',
-      lemlist_not_interested: 'notInterested',
-      lemlist_email_opened: 'emailsOpened',
-      lemlist_email_clicked: 'emailsClicked',
-      lemlist_email_bounced: 'emailsBounced',
-      lemlist_email_sent: 'emailsSent',
-      lemlist_webhook: undefined, // Generic webhook - no type filter
-    }
-
-    const eventType = eventTypeMap[triggerId]
-
-    logger.info(`[${requestId}] Creating Lemlist webhook`, {
-      triggerId,
-      eventType,
-      hasCampaignId: !!campaignId,
-      webhookId: webhookData.id,
-    })
-
-    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
-
-    const lemlistApiUrl = 'https://api.lemlist.com/api/hooks'
-
-    // Build request body
-    const requestBody: Record<string, any> = {
-      targetUrl: notificationUrl,
-    }
-
-    // Add event type if specified (omit for generic webhook to receive all events)
-    if (eventType) {
-      requestBody.type = eventType
-    }
-
-    // Add campaign filter if specified
-    if (campaignId) {
-      requestBody.campaignId = campaignId
-    }
-
-    // Lemlist uses Basic Auth with empty username and API key as password
-    const authString = Buffer.from(`:${apiKey}`).toString('base64')
-
-    const lemlistResponse = await fetch(lemlistApiUrl, {
-      method: 'POST',
-      headers: {
-        Authorization: `Basic ${authString}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(requestBody),
-    })
-
-    const responseBody = await lemlistResponse.json()
-
-    if (!lemlistResponse.ok || responseBody.error) {
-      const errorMessage = responseBody.message || responseBody.error || 'Unknown Lemlist API error'
-      logger.error(
-        `[${requestId}] Failed to create webhook in Lemlist for webhook ${webhookData.id}. Status: ${lemlistResponse.status}`,
-        { message: errorMessage, response: responseBody }
-      )
-
-      let userFriendlyMessage = 'Failed to create webhook subscription in Lemlist'
-      if (lemlistResponse.status === 401) {
-        userFriendlyMessage = 'Invalid Lemlist API Key. Please verify your API Key is correct.'
-      } else if (lemlistResponse.status === 403) {
-        userFriendlyMessage =
-          'Access denied. Please ensure your Lemlist API Key has appropriate permissions.'
-      } else if (errorMessage && errorMessage !== 'Unknown Lemlist API error') {
-        userFriendlyMessage = `Lemlist error: ${errorMessage}`
-      }
-
-      throw new Error(userFriendlyMessage)
-    }
-
-    logger.info(
-      `[${requestId}] Successfully created webhook in Lemlist for webhook ${webhookData.id}.`,
-      {
-        lemlistWebhookId: responseBody._id,
-      }
-    )
-
-    return { id: responseBody._id }
-  } catch (error: any) {
-    logger.error(
-      `[${requestId}] Exception during Lemlist webhook creation for webhook ${webhookData.id}.`,
-      {
-        message: error.message,
-        stack: error.stack,
-      }
-    )
-    throw error
-  }
-}

apps/sim/app/api/workflows/[id]/deploy/route.ts

@@ -4,6 +4,7 @@ import { and, desc, eq } from 'drizzle-orm'
 import type { NextRequest } from 'next/server'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { removeMcpToolsForWorkflow, syncMcpToolsForWorkflow } from '@/lib/mcp/workflow-mcp-sync'
+import { saveTriggerWebhooksForDeploy } from '@/lib/webhooks/deploy'
 import {
   deployWorkflow,
   loadWorkflowFromNormalizedTables,
@@ -130,6 +131,22 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       return createErrorResponse(`Invalid schedule configuration: ${scheduleValidation.error}`, 400)
     }
 
+    const triggerSaveResult = await saveTriggerWebhooksForDeploy({
+      request,
+      workflowId: id,
+      workflow: workflowData,
+      userId: actorUserId,
+      blocks: normalizedData.blocks,
+      requestId,
+    })
+
+    if (!triggerSaveResult.success) {
+      return createErrorResponse(
+        triggerSaveResult.error?.message || 'Failed to save trigger configuration',
+        triggerSaveResult.error?.status || 500
+      )
+    }
+
     const deployResult = await deployWorkflow({
       workflowId: id,
       deployedBy: actorUserId,

apps/sim/app/api/workflows/[id]/route.ts

@@ -20,6 +20,7 @@ const UpdateWorkflowSchema = z.object({
   description: z.string().optional(),
   color: z.string().optional(),
   folderId: z.string().nullable().optional(),
+  sortOrder: z.number().int().min(0).optional(),
 })
 
 /**
@@ -438,12 +439,12 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
       return NextResponse.json({ error: 'Access denied' }, { status: 403 })
     }
 
-    // Build update object
-    const updateData: any = { updatedAt: new Date() }
+    const updateData: Record<string, unknown> = { updatedAt: new Date() }
     if (updates.name !== undefined) updateData.name = updates.name
     if (updates.description !== undefined) updateData.description = updates.description
     if (updates.color !== undefined) updateData.color = updates.color
     if (updates.folderId !== undefined) updateData.folderId = updates.folderId
+    if (updates.sortOrder !== undefined) updateData.sortOrder = updates.sortOrder
 
     // Update the workflow
     const [updatedWorkflow] = await db

apps/sim/app/api/workflows/[id]/state/route.ts

@@ -1,19 +1,19 @@
 import { db } from '@sim/db'
-import { webhook, workflow } from '@sim/db/schema'
+import { webhook, workflow, workflowBlocks } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
+import { eq, inArray } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import { getSession } from '@/lib/auth'
 import { env } from '@/lib/core/config/env'
 import { generateRequestId } from '@/lib/core/utils/request'
+import { cleanupExternalWebhook } from '@/lib/webhooks/provider-subscriptions'
 import { extractAndPersistCustomTools } from '@/lib/workflows/persistence/custom-tools-persistence'
 import { saveWorkflowToNormalizedTables } from '@/lib/workflows/persistence/utils'
 import { sanitizeAgentToolsInBlocks } from '@/lib/workflows/sanitization/validation'
 import { getWorkflowAccessContext } from '@/lib/workflows/utils'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 import { generateLoopBlocks, generateParallelBlocks } from '@/stores/workflows/workflow/utils'
-import { getTrigger } from '@/triggers'
 
 const logger = createLogger('WorkflowStateAPI')
 
@@ -193,6 +193,59 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
       deployedAt: state.deployedAt,
     }
 
+    // Find blocks that were deleted or edited
+    const currentBlockIds = new Set(Object.keys(filteredBlocks))
+    const previousBlocks = await db
+      .select({ id: workflowBlocks.id, data: workflowBlocks.data })
+      .from(workflowBlocks)
+      .where(eq(workflowBlocks.workflowId, workflowId))
+
+    const blocksToCleanup: string[] = []
+    for (const prevBlock of previousBlocks) {
+      if (!currentBlockIds.has(prevBlock.id)) {
+        // Block was deleted
+        blocksToCleanup.push(prevBlock.id)
+      } else {
+        // Block still exists - check if it was edited
+        const newBlock = filteredBlocks[prevBlock.id]
+        const prevData = prevBlock.data as Record<string, unknown> | null
+        if (prevData && JSON.stringify(prevData) !== JSON.stringify(newBlock)) {
+          blocksToCleanup.push(prevBlock.id)
+        }
+      }
+    }
+
+    if (blocksToCleanup.length > 0) {
+      const webhooksToCleanup = await db
+        .select()
+        .from(webhook)
+        .where(inArray(webhook.blockId, blocksToCleanup))
+
+      if (webhooksToCleanup.length > 0) {
+        logger.info(`[${requestId}] Cleaning up ${webhooksToCleanup.length} webhook(s)`, {
+          workflowId,
+          blocksEdited: blocksToCleanup.length,
+        })
+
+        const webhookIdsToDelete: string[] = []
+        for (const wh of webhooksToCleanup) {
+          try {
+            await cleanupExternalWebhook(wh, workflowData, requestId)
+          } catch (cleanupError) {
+            logger.warn(
+              `[${requestId}] Failed to cleanup external webhook ${wh.id} during workflow save`,
+              cleanupError
+            )
+          }
+          webhookIdsToDelete.push(wh.id)
+        }
+
+        if (webhookIdsToDelete.length > 0) {
+          await db.delete(webhook).where(inArray(webhook.id, webhookIdsToDelete))
+        }
+      }
+    }
+
     const saveResult = await saveWorkflowToNormalizedTables(workflowId, workflowState as any)
 
     if (!saveResult.success) {
@@ -203,8 +256,6 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
       )
     }
 
-    await syncWorkflowWebhooks(workflowId, workflowState.blocks)
-
     // Extract and persist custom tools to database
     try {
       const workspaceId = workflowData.workspaceId
@@ -290,213 +341,3 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
-
-function getSubBlockValue<T = unknown>(block: BlockState, subBlockId: string): T | undefined {
-  const value = block.subBlocks?.[subBlockId]?.value
-  if (value === undefined || value === null) {
-    return undefined
-  }
-  return value as T
-}
-
-async function syncWorkflowWebhooks(
-  workflowId: string,
-  blocks: Record<string, any>
-): Promise<void> {
-  await syncBlockResources(workflowId, blocks, {
-    resourceName: 'webhook',
-    subBlockId: 'webhookId',
-    buildMetadata: buildWebhookMetadata,
-    applyMetadata: upsertWebhookRecord,
-  })
-}
-
-interface WebhookMetadata {
-  triggerPath: string
-  provider: string | null
-  providerConfig: Record<string, any>
-}
-
-const CREDENTIAL_SET_PREFIX = 'credentialSet:'
-
-function buildWebhookMetadata(block: BlockState): WebhookMetadata | null {
-  const triggerId =
-    getSubBlockValue<string>(block, 'triggerId') ||
-    getSubBlockValue<string>(block, 'selectedTriggerId')
-  const triggerConfig = getSubBlockValue<Record<string, any>>(block, 'triggerConfig') || {}
-  const triggerCredentials = getSubBlockValue<string>(block, 'triggerCredentials')
-  const triggerPath = getSubBlockValue<string>(block, 'triggerPath') || block.id
-
-  const triggerDef = triggerId ? getTrigger(triggerId) : undefined
-  const provider = triggerDef?.provider || null
-
-  // Handle credential sets vs individual credentials
-  const isCredentialSet = triggerCredentials?.startsWith(CREDENTIAL_SET_PREFIX)
-  const credentialSetId = isCredentialSet
-    ? triggerCredentials!.slice(CREDENTIAL_SET_PREFIX.length)
-    : undefined
-  const credentialId = isCredentialSet ? undefined : triggerCredentials
-
-  const providerConfig = {
-    ...(typeof triggerConfig === 'object' ? triggerConfig : {}),
-    ...(credentialId ? { credentialId } : {}),
-    ...(credentialSetId ? { credentialSetId } : {}),
-    ...(triggerId ? { triggerId } : {}),
-  }
-
-  return {
-    triggerPath,
-    provider,
-    providerConfig,
-  }
-}
-
-async function upsertWebhookRecord(
-  workflowId: string,
-  block: BlockState,
-  webhookId: string,
-  metadata: WebhookMetadata
-): Promise<void> {
-  const providerConfig = metadata.providerConfig as Record<string, unknown>
-  const credentialSetId = providerConfig?.credentialSetId as string | undefined
-
-  // For credential sets, delegate to the sync function which handles fan-out
-  if (credentialSetId && metadata.provider) {
-    const { syncWebhooksForCredentialSet } = await import('@/lib/webhooks/utils.server')
-    const { getProviderIdFromServiceId } = await import('@/lib/oauth')
-
-    const oauthProviderId = getProviderIdFromServiceId(metadata.provider)
-    const requestId = crypto.randomUUID().slice(0, 8)
-
-    // Extract base config (without credential-specific fields)
-    const {
-      credentialId: _cId,
-      credentialSetId: _csId,
-      userId: _uId,
-      ...baseConfig
-    } = providerConfig
-
-    try {
-      await syncWebhooksForCredentialSet({
-        workflowId,
-        blockId: block.id,
-        provider: metadata.provider,
-        basePath: metadata.triggerPath,
-        credentialSetId,
-        oauthProviderId,
-        providerConfig: baseConfig as Record<string, any>,
-        requestId,
-      })
-
-      logger.info('Synced credential set webhooks during workflow save', {
-        workflowId,
-        blockId: block.id,
-        credentialSetId,
-      })
-    } catch (error) {
-      logger.error('Failed to sync credential set webhooks during workflow save', {
-        workflowId,
-        blockId: block.id,
-        credentialSetId,
-        error,
-      })
-    }
-    return
-  }
-
-  // For individual credentials, use the existing single webhook logic
-  const [existing] = await db.select().from(webhook).where(eq(webhook.id, webhookId)).limit(1)
-
-  if (existing) {
-    const needsUpdate =
-      existing.blockId !== block.id ||
-      existing.workflowId !== workflowId ||
-      existing.path !== metadata.triggerPath
-
-    if (needsUpdate) {
-      await db
-        .update(webhook)
-        .set({
-          workflowId,
-          blockId: block.id,
-          path: metadata.triggerPath,
-          provider: metadata.provider || existing.provider,
-          providerConfig: Object.keys(metadata.providerConfig).length
-            ? metadata.providerConfig
-            : existing.providerConfig,
-          isActive: true,
-          updatedAt: new Date(),
-        })
-        .where(eq(webhook.id, webhookId))
-    }
-    return
-  }
-
-  await db.insert(webhook).values({
-    id: webhookId,
-    workflowId,
-    blockId: block.id,
-    path: metadata.triggerPath,
-    provider: metadata.provider,
-    providerConfig: metadata.providerConfig,
-    credentialSetId: null,
-    isActive: true,
-    createdAt: new Date(),
-    updatedAt: new Date(),
-  })
-
-  logger.info('Recreated missing webhook after workflow save', {
-    workflowId,
-    blockId: block.id,
-    webhookId,
-  })
-}
-
-interface BlockResourceSyncConfig<T> {
-  resourceName: string
-  subBlockId: string
-  buildMetadata: (block: BlockState, resourceId: string) => T | null
-  applyMetadata: (
-    workflowId: string,
-    block: BlockState,
-    resourceId: string,
-    metadata: T
-  ) => Promise<void>
-}
-
-async function syncBlockResources<T>(
-  workflowId: string,
-  blocks: Record<string, any>,
-  config: BlockResourceSyncConfig<T>
-): Promise<void> {
-  const blockEntries = Object.values(blocks || {}).filter(Boolean) as BlockState[]
-  if (blockEntries.length === 0) return
-
-  for (const block of blockEntries) {
-    const resourceId = getSubBlockValue<string>(block, config.subBlockId)
-    if (!resourceId) continue
-
-    const metadata = config.buildMetadata(block, resourceId)
-    if (!metadata) {
-      logger.warn(`Skipping ${config.resourceName} sync due to invalid configuration`, {
-        workflowId,
-        blockId: block.id,
-        resourceId,
-        resourceName: config.resourceName,
-      })
-      continue
-    }
-
-    try {
-      await config.applyMetadata(workflowId, block, resourceId, metadata)
-    } catch (error) {
-      logger.error(`Failed to sync ${config.resourceName}`, {
-        workflowId,
-        blockId: block.id,
-        resourceId,
-        resourceName: config.resourceName,
-        error,
-      })
-    }
-  }
-}

apps/sim/app/api/workflows/reorder/route.ts

@@ -0,0 +1,91 @@
+import { db } from '@sim/db'
+import { workflow } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { eq, inArray } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
+
+const logger = createLogger('WorkflowReorderAPI')
+
+const ReorderSchema = z.object({
+  workspaceId: z.string(),
+  updates: z.array(
+    z.object({
+      id: z.string(),
+      sortOrder: z.number().int().min(0),
+      folderId: z.string().nullable().optional(),
+    })
+  ),
+})
+
+export async function PUT(req: NextRequest) {
+  const requestId = generateRequestId()
+  const session = await getSession()
+
+  if (!session?.user?.id) {
+    logger.warn(`[${requestId}] Unauthorized reorder attempt`)
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  try {
+    const body = await req.json()
+    const { workspaceId, updates } = ReorderSchema.parse(body)
+
+    const permission = await getUserEntityPermissions(session.user.id, 'workspace', workspaceId)
+    if (!permission || permission === 'read') {
+      logger.warn(
+        `[${requestId}] User ${session.user.id} lacks write permission for workspace ${workspaceId}`
+      )
+      return NextResponse.json({ error: 'Write access required' }, { status: 403 })
+    }
+
+    const workflowIds = updates.map((u) => u.id)
+    const existingWorkflows = await db
+      .select({ id: workflow.id, workspaceId: workflow.workspaceId })
+      .from(workflow)
+      .where(inArray(workflow.id, workflowIds))
+
+    const validIds = new Set(
+      existingWorkflows.filter((w) => w.workspaceId === workspaceId).map((w) => w.id)
+    )
+
+    const validUpdates = updates.filter((u) => validIds.has(u.id))
+
+    if (validUpdates.length === 0) {
+      return NextResponse.json({ error: 'No valid workflows to update' }, { status: 400 })
+    }
+
+    await db.transaction(async (tx) => {
+      for (const update of validUpdates) {
+        const updateData: Record<string, unknown> = {
+          sortOrder: update.sortOrder,
+          updatedAt: new Date(),
+        }
+        if (update.folderId !== undefined) {
+          updateData.folderId = update.folderId
+        }
+        await tx.update(workflow).set(updateData).where(eq(workflow.id, update.id))
+      }
+    })
+
+    logger.info(
+      `[${requestId}] Reordered ${validUpdates.length} workflows in workspace ${workspaceId}`
+    )
+
+    return NextResponse.json({ success: true, updated: validUpdates.length })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      logger.warn(`[${requestId}] Invalid reorder data`, { errors: error.errors })
+      return NextResponse.json(
+        { error: 'Invalid request data', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Error reordering workflows`, error)
+    return NextResponse.json({ error: 'Failed to reorder workflows' }, { status: 500 })
+  }
+}

apps/sim/app/api/workflows/route.ts

@@ -1,7 +1,7 @@
 import { db } from '@sim/db'
 import { workflow } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
+import { and, eq, isNull, max } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import { getSession } from '@/lib/auth'
@@ -17,6 +17,7 @@ const CreateWorkflowSchema = z.object({
   color: z.string().optional().default('#3972F6'),
   workspaceId: z.string().optional(),
   folderId: z.string().nullable().optional(),
+  sortOrder: z.number().int().optional(),
 })
 
 // GET /api/workflows - Get workflows for user (optionally filtered by workspaceId)
@@ -89,7 +90,14 @@ export async function POST(req: NextRequest) {
 
   try {
     const body = await req.json()
-    const { name, description, color, workspaceId, folderId } = CreateWorkflowSchema.parse(body)
+    const {
+      name,
+      description,
+      color,
+      workspaceId,
+      folderId,
+      sortOrder: providedSortOrder,
+    } = CreateWorkflowSchema.parse(body)
 
     if (workspaceId) {
       const workspacePermission = await getUserEntityPermissions(
@@ -127,11 +135,28 @@ export async function POST(req: NextRequest) {
         // Silently fail
       })
 
+    let sortOrder: number
+    if (providedSortOrder !== undefined) {
+      sortOrder = providedSortOrder
+    } else {
+      const folderCondition = folderId ? eq(workflow.folderId, folderId) : isNull(workflow.folderId)
+      const [maxResult] = await db
+        .select({ maxOrder: max(workflow.sortOrder) })
+        .from(workflow)
+        .where(
+          workspaceId
+            ? and(eq(workflow.workspaceId, workspaceId), folderCondition)
+            : and(eq(workflow.userId, session.user.id), folderCondition)
+        )
+      sortOrder = (maxResult?.maxOrder ?? -1) + 1
+    }
+
     await db.insert(workflow).values({
       id: workflowId,
       userId: session.user.id,
       workspaceId: workspaceId || null,
       folderId: folderId || null,
+      sortOrder,
       name,
       description,
       color,
@@ -152,6 +177,7 @@ export async function POST(req: NextRequest) {
       color,
       workspaceId,
       folderId,
+      sortOrder,
       createdAt: now,
       updatedAt: now,
     })

apps/sim/app/api/workspaces/route.ts

@@ -13,6 +13,7 @@ const logger = createLogger('Workspaces')
 
 const createWorkspaceSchema = z.object({
   name: z.string().trim().min(1, 'Name is required'),
+  skipDefaultWorkflow: z.boolean().optional().default(false),
 })
 
 // Get all workspaces for the current user
@@ -63,9 +64,9 @@ export async function POST(req: Request) {
   }
 
   try {
-    const { name } = createWorkspaceSchema.parse(await req.json())
+    const { name, skipDefaultWorkflow } = createWorkspaceSchema.parse(await req.json())
 
-    const newWorkspace = await createWorkspace(session.user.id, name)
+    const newWorkspace = await createWorkspace(session.user.id, name, skipDefaultWorkflow)
 
     return NextResponse.json({ workspace: newWorkspace })
   } catch (error) {
@@ -80,7 +81,7 @@ async function createDefaultWorkspace(userId: string, userName?: string | null)
   return createWorkspace(userId, workspaceName)
 }
 
-async function createWorkspace(userId: string, name: string) {
+async function createWorkspace(userId: string, name: string, skipDefaultWorkflow = false) {
   const workspaceId = crypto.randomUUID()
   const workflowId = crypto.randomUUID()
   const now = new Date()
@@ -97,7 +98,6 @@ async function createWorkspace(userId: string, name: string) {
         updatedAt: now,
       })
 
-      // Create admin permissions for the workspace owner
       await tx.insert(permissions).values({
         id: crypto.randomUUID(),
         entityType: 'workspace' as const,
@@ -108,37 +108,41 @@ async function createWorkspace(userId: string, name: string) {
         updatedAt: now,
       })
 
-      // Create initial workflow for the workspace (empty canvas)
-      // Create the workflow
-      await tx.insert(workflow).values({
-        id: workflowId,
-        userId,
-        workspaceId,
-        folderId: null,
-        name: 'default-agent',
-        description: 'Your first workflow - start building here!',
-        color: '#3972F6',
-        lastSynced: now,
-        createdAt: now,
-        updatedAt: now,
-        isDeployed: false,
-        runCount: 0,
-        variables: {},
-      })
+      if (!skipDefaultWorkflow) {
+        await tx.insert(workflow).values({
+          id: workflowId,
+          userId,
+          workspaceId,
+          folderId: null,
+          name: 'default-agent',
+          description: 'Your first workflow - start building here!',
+          color: '#3972F6',
+          lastSynced: now,
+          createdAt: now,
+          updatedAt: now,
+          isDeployed: false,
+          runCount: 0,
+          variables: {},
+        })
+      }
 
       logger.info(
-        `Created workspace ${workspaceId} with initial workflow ${workflowId} for user ${userId}`
+        skipDefaultWorkflow
+          ? `Created workspace ${workspaceId} for user ${userId}`
+          : `Created workspace ${workspaceId} with initial workflow ${workflowId} for user ${userId}`
       )
     })
 
-    const { workflowState } = buildDefaultWorkflowArtifacts()
-    const seedResult = await saveWorkflowToNormalizedTables(workflowId, workflowState)
+    if (!skipDefaultWorkflow) {
+      const { workflowState } = buildDefaultWorkflowArtifacts()
+      const seedResult = await saveWorkflowToNormalizedTables(workflowId, workflowState)
 
-    if (!seedResult.success) {
-      throw new Error(seedResult.error || 'Failed to seed default workflow state')
+      if (!seedResult.success) {
+        throw new Error(seedResult.error || 'Failed to seed default workflow state')
+      }
     }
   } catch (error) {
-    logger.error(`Failed to create workspace ${workspaceId} with initial workflow:`, error)
+    logger.error(`Failed to create workspace ${workspaceId}:`, error)
     throw error
   }
 

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'

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

@@ -663,6 +663,12 @@ export function DeployModal({
             </ModalTabsList>
 
             <ModalBody className='min-h-0 flex-1'>
+              {apiDeployError && (
+                <div className='mb-3 rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
+                  <div className='font-semibold'>Deployment Error</div>
+                  <div>{apiDeployError}</div>
+                </div>
+              )}
               <ModalTabsContent value='general'>
                 <GeneralDeploy
                   workflowId={workflowId}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts

@@ -32,5 +32,4 @@ export { Table } from './table/table'
 export { Text } from './text/text'
 export { TimeInput } from './time-input/time-input'
 export { ToolInput } from './tool-input/tool-input'
-export { TriggerSave } from './trigger-save/trigger-save'
 export { VariablesInput } from './variables-input/variables-input'

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)) && (

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

@@ -1,348 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-} from '@/components/emcn/components'
-import { Trash } from '@/components/emcn/icons/trash'
-import { cn } from '@/lib/core/utils/cn'
-import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
-import { useTriggerConfigAggregation } from '@/hooks/use-trigger-config-aggregation'
-import { useWebhookManagement } from '@/hooks/use-webhook-management'
-import { useSubBlockStore } from '@/stores/workflows/subblock/store'
-import { getTrigger, isTriggerValid } from '@/triggers'
-import { SYSTEM_SUBBLOCK_IDS } from '@/triggers/constants'
-
-const logger = createLogger('TriggerSave')
-
-interface TriggerSaveProps {
-  blockId: string
-  subBlockId: string
-  triggerId?: string
-  isPreview?: boolean
-  disabled?: boolean
-}
-
-type SaveStatus = 'idle' | 'saving' | 'saved' | 'error'
-
-export function TriggerSave({
-  blockId,
-  subBlockId,
-  triggerId,
-  isPreview = false,
-  disabled = false,
-}: TriggerSaveProps) {
-  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const [deleteStatus, setDeleteStatus] = useState<'idle' | 'deleting'>('idle')
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-
-  const effectiveTriggerId = useMemo(() => {
-    if (triggerId && isTriggerValid(triggerId)) {
-      return triggerId
-    }
-    const selectedTriggerId = useSubBlockStore.getState().getValue(blockId, 'selectedTriggerId')
-    if (typeof selectedTriggerId === 'string' && isTriggerValid(selectedTriggerId)) {
-      return selectedTriggerId
-    }
-    return triggerId
-  }, [blockId, triggerId])
-
-  const { collaborativeSetSubblockValue } = useCollaborativeWorkflow()
-
-  const { webhookId, saveConfig, deleteConfig, isLoading } = useWebhookManagement({
-    blockId,
-    triggerId: effectiveTriggerId,
-    isPreview,
-    useWebhookUrl: true, // to store the webhook url in the store
-  })
-
-  const triggerConfig = useSubBlockStore((state) => state.getValue(blockId, 'triggerConfig'))
-  const triggerCredentials = useSubBlockStore((state) =>
-    state.getValue(blockId, 'triggerCredentials')
-  )
-
-  const triggerDef =
-    effectiveTriggerId && isTriggerValid(effectiveTriggerId) ? getTrigger(effectiveTriggerId) : null
-
-  const validateRequiredFields = useCallback(
-    (
-      configToCheck: Record<string, any> | null | undefined
-    ): { valid: boolean; missingFields: string[] } => {
-      if (!triggerDef) {
-        return { valid: true, missingFields: [] }
-      }
-
-      const missingFields: string[] = []
-
-      triggerDef.subBlocks
-        .filter(
-          (sb) => sb.required && sb.mode === 'trigger' && !SYSTEM_SUBBLOCK_IDS.includes(sb.id)
-        )
-        .forEach((subBlock) => {
-          if (subBlock.id === 'triggerCredentials') {
-            if (!triggerCredentials) {
-              missingFields.push(subBlock.title || 'Credentials')
-            }
-          } else {
-            const value = configToCheck?.[subBlock.id]
-            if (value === undefined || value === null || value === '') {
-              missingFields.push(subBlock.title || subBlock.id)
-            }
-          }
-        })
-
-      return {
-        valid: missingFields.length === 0,
-        missingFields,
-      }
-    },
-    [triggerDef, triggerCredentials]
-  )
-
-  const requiredSubBlockIds = useMemo(() => {
-    if (!triggerDef) return []
-    return triggerDef.subBlocks
-      .filter((sb) => sb.required && sb.mode === 'trigger' && !SYSTEM_SUBBLOCK_IDS.includes(sb.id))
-      .map((sb) => sb.id)
-  }, [triggerDef])
-
-  const subscribedSubBlockValues = useSubBlockStore(
-    useCallback(
-      (state) => {
-        if (!triggerDef) return {}
-        const values: Record<string, any> = {}
-        requiredSubBlockIds.forEach((subBlockId) => {
-          const value = state.getValue(blockId, subBlockId)
-          if (value !== null && value !== undefined && value !== '') {
-            values[subBlockId] = value
-          }
-        })
-        return values
-      },
-      [blockId, triggerDef, requiredSubBlockIds]
-    )
-  )
-
-  const previousValuesRef = useRef<Record<string, any>>({})
-  const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  useEffect(() => {
-    if (saveStatus !== 'error' || !triggerDef) {
-      previousValuesRef.current = subscribedSubBlockValues
-      return
-    }
-
-    const hasChanges = Object.keys(subscribedSubBlockValues).some(
-      (key) =>
-        previousValuesRef.current[key] !== (subscribedSubBlockValues as Record<string, any>)[key]
-    )
-
-    if (!hasChanges) {
-      return
-    }
-
-    if (validationTimeoutRef.current) {
-      clearTimeout(validationTimeoutRef.current)
-    }
-
-    validationTimeoutRef.current = setTimeout(() => {
-      const aggregatedConfig = useTriggerConfigAggregation(blockId, effectiveTriggerId)
-
-      if (aggregatedConfig) {
-        useSubBlockStore.getState().setValue(blockId, 'triggerConfig', aggregatedConfig)
-      }
-
-      const validation = validateRequiredFields(aggregatedConfig)
-
-      if (validation.valid) {
-        setErrorMessage(null)
-        setSaveStatus('idle')
-        logger.debug('Error cleared after validation passed', {
-          blockId,
-          triggerId: effectiveTriggerId,
-        })
-      } else {
-        setErrorMessage(`Missing required fields: ${validation.missingFields.join(', ')}`)
-        logger.debug('Error message updated', {
-          blockId,
-          triggerId: effectiveTriggerId,
-          missingFields: validation.missingFields,
-        })
-      }
-
-      previousValuesRef.current = subscribedSubBlockValues
-    }, 300)
-
-    return () => {
-      if (validationTimeoutRef.current) {
-        clearTimeout(validationTimeoutRef.current)
-      }
-    }
-  }, [
-    blockId,
-    effectiveTriggerId,
-    triggerDef,
-    subscribedSubBlockValues,
-    saveStatus,
-    validateRequiredFields,
-  ])
-
-  const handleSave = async () => {
-    if (isPreview || disabled) return
-
-    setSaveStatus('saving')
-    setErrorMessage(null)
-
-    try {
-      const aggregatedConfig = useTriggerConfigAggregation(blockId, effectiveTriggerId)
-
-      if (aggregatedConfig) {
-        useSubBlockStore.getState().setValue(blockId, 'triggerConfig', aggregatedConfig)
-        logger.debug('Stored aggregated trigger config', {
-          blockId,
-          triggerId: effectiveTriggerId,
-          aggregatedConfig,
-        })
-      }
-
-      const validation = validateRequiredFields(aggregatedConfig)
-      if (!validation.valid) {
-        setErrorMessage(`Missing required fields: ${validation.missingFields.join(', ')}`)
-        setSaveStatus('error')
-        return
-      }
-
-      const success = await saveConfig()
-      if (!success) {
-        throw new Error('Save config returned false')
-      }
-
-      setSaveStatus('saved')
-      setErrorMessage(null)
-
-      const savedWebhookId = useSubBlockStore.getState().getValue(blockId, 'webhookId')
-      const savedTriggerPath = useSubBlockStore.getState().getValue(blockId, 'triggerPath')
-      const savedTriggerId = useSubBlockStore.getState().getValue(blockId, 'triggerId')
-      const savedTriggerConfig = useSubBlockStore.getState().getValue(blockId, 'triggerConfig')
-
-      collaborativeSetSubblockValue(blockId, 'webhookId', savedWebhookId)
-      collaborativeSetSubblockValue(blockId, 'triggerPath', savedTriggerPath)
-      collaborativeSetSubblockValue(blockId, 'triggerId', savedTriggerId)
-      collaborativeSetSubblockValue(blockId, 'triggerConfig', savedTriggerConfig)
-
-      setTimeout(() => {
-        setSaveStatus('idle')
-      }, 2000)
-
-      logger.info('Trigger configuration saved successfully', {
-        blockId,
-        triggerId: effectiveTriggerId,
-        hasWebhookId: !!webhookId,
-      })
-    } catch (error: any) {
-      setSaveStatus('error')
-      setErrorMessage(error.message || 'An error occurred while saving.')
-      logger.error('Error saving trigger configuration', { error })
-    }
-  }
-
-  const handleDeleteClick = () => {
-    if (isPreview || disabled || !webhookId) return
-    setShowDeleteDialog(true)
-  }
-
-  const handleDeleteConfirm = async () => {
-    setShowDeleteDialog(false)
-    setDeleteStatus('deleting')
-    setErrorMessage(null)
-
-    try {
-      const success = await deleteConfig()
-
-      if (success) {
-        setDeleteStatus('idle')
-        setSaveStatus('idle')
-        setErrorMessage(null)
-
-        collaborativeSetSubblockValue(blockId, 'triggerPath', '')
-        collaborativeSetSubblockValue(blockId, 'webhookId', null)
-        collaborativeSetSubblockValue(blockId, 'triggerConfig', null)
-
-        logger.info('Trigger configuration deleted successfully', {
-          blockId,
-          triggerId: effectiveTriggerId,
-        })
-      } else {
-        setDeleteStatus('idle')
-        setErrorMessage('Failed to delete trigger configuration.')
-        logger.error('Failed to delete trigger configuration')
-      }
-    } catch (error: any) {
-      setDeleteStatus('idle')
-      setErrorMessage(error.message || 'An error occurred while deleting.')
-      logger.error('Error deleting trigger configuration', { error })
-    }
-  }
-
-  if (isPreview) {
-    return null
-  }
-
-  const isProcessing = saveStatus === 'saving' || deleteStatus === 'deleting' || isLoading
-
-  return (
-    <div id={`${blockId}-${subBlockId}`}>
-      <div className='flex gap-2'>
-        <Button
-          variant='default'
-          onClick={handleSave}
-          disabled={disabled || isProcessing}
-          className={cn(
-            'flex-1',
-            saveStatus === 'saved' && '!bg-green-600 !text-white hover:!bg-green-700',
-            saveStatus === 'error' && '!bg-red-600 !text-white hover:!bg-red-700'
-          )}
-        >
-          {saveStatus === 'saving' && 'Saving...'}
-          {saveStatus === 'saved' && 'Saved'}
-          {saveStatus === 'error' && 'Error'}
-          {saveStatus === 'idle' && (webhookId ? 'Update Configuration' : 'Save Configuration')}
-        </Button>
-
-        {webhookId && (
-          <Button variant='default' onClick={handleDeleteClick} disabled={disabled || isProcessing}>
-            <Trash className='h-[14px] w-[14px]' />
-          </Button>
-        )}
-      </div>
-
-      {errorMessage && <p className='mt-2 text-[12px] text-[var(--text-error)]'>{errorMessage}</p>}
-
-      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent size='sm'>
-          <ModalHeader>Delete Trigger</ModalHeader>
-          <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
-              Are you sure you want to delete this trigger configuration? This will remove the
-              webhook and stop all incoming triggers.{' '}
-              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant='active' onClick={() => setShowDeleteDialog(false)}>
-              Cancel
-            </Button>
-            <Button variant='destructive' onClick={handleDeleteConfirm}>
-              Delete
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </div>
-  )
-}

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

@@ -38,7 +38,6 @@ import {
   Text,
   TimeInput,
   ToolInput,
-  TriggerSave,
   VariablesInput,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
@@ -854,17 +853,6 @@ function SubBlockComponent({
             }
           />
         )
-      case 'trigger-save':
-        return (
-          <TriggerSave
-            blockId={blockId}
-            subBlockId={config.id}
-            triggerId={config.triggerId}
-            isPreview={isPreview}
-            disabled={disabled}
-          />
-        )
-
       case 'messages-input':
         return (
           <MessagesInput

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -36,6 +36,8 @@ interface FolderItemProps {
     onDragEnter?: (e: React.DragEvent<HTMLElement>) => void
     onDragLeave?: (e: React.DragEvent<HTMLElement>) => void
   }
+  onDragStart?: () => void
+  onDragEnd?: () => void
 }
 
 /**
@@ -46,7 +48,13 @@ interface FolderItemProps {
  * @param props - Component props
  * @returns Folder item with drag and expand support
  */
-export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
+export function FolderItem({
+  folder,
+  level,
+  hoverHandlers,
+  onDragStart: onDragStartProp,
+  onDragEnd: onDragEndProp,
+}: FolderItemProps) {
   const params = useParams()
   const router = useRouter()
   const workspaceId = params.workspaceId as string
@@ -135,11 +143,6 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
     }
   }, [createFolderMutation, workspaceId, folder.id, expandFolder])
 
-  /**
-   * Drag start handler - sets folder data for drag operation
-   *
-   * @param e - React drag event
-   */
   const onDragStart = useCallback(
     (e: React.DragEvent) => {
       if (isEditing) {
@@ -149,14 +152,25 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
 
       e.dataTransfer.setData('folder-id', folder.id)
       e.dataTransfer.effectAllowed = 'move'
+      onDragStartProp?.()
     },
-    [folder.id]
+    [folder.id, onDragStartProp]
   )
 
-  const { isDragging, shouldPreventClickRef, handleDragStart, handleDragEnd } = useItemDrag({
+  const {
+    isDragging,
+    shouldPreventClickRef,
+    handleDragStart,
+    handleDragEnd: handleDragEndBase,
+  } = useItemDrag({
     onDragStart,
   })
 
+  const handleDragEnd = useCallback(() => {
+    handleDragEndBase()
+    onDragEndProp?.()
+  }, [handleDragEndBase, onDragEndProp])
+
   const {
     isOpen: isContextMenuOpen,
     position,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx

@@ -29,6 +29,8 @@ interface WorkflowItemProps {
   active: boolean
   level: number
   onWorkflowClick: (workflowId: string, shiftKey: boolean, metaKey: boolean) => void
+  onDragStart?: () => void
+  onDragEnd?: () => void
 }
 
 /**
@@ -38,7 +40,14 @@ interface WorkflowItemProps {
  * @param props - Component props
  * @returns Workflow item with drag and selection support
  */
-export function WorkflowItem({ workflow, active, level, onWorkflowClick }: WorkflowItemProps) {
+export function WorkflowItem({
+  workflow,
+  active,
+  level,
+  onWorkflowClick,
+  onDragStart: onDragStartProp,
+  onDragEnd: onDragEndProp,
+}: WorkflowItemProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const { selectedWorkflows } = useFolderStore()
@@ -104,30 +113,7 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
     [workflow.id, updateWorkflow]
   )
 
-  /**
-   * Drag start handler - handles workflow dragging with multi-selection support
-   *
-   * @param e - React drag event
-   */
-  const onDragStart = useCallback(
-    (e: React.DragEvent) => {
-      if (isEditing) {
-        e.preventDefault()
-        return
-      }
-
-      const workflowIds =
-        isSelected && selectedWorkflows.size > 1 ? Array.from(selectedWorkflows) : [workflow.id]
-
-      e.dataTransfer.setData('workflow-ids', JSON.stringify(workflowIds))
-      e.dataTransfer.effectAllowed = 'move'
-    },
-    [isSelected, selectedWorkflows, workflow.id]
-  )
-
-  const { isDragging, shouldPreventClickRef, handleDragStart, handleDragEnd } = useItemDrag({
-    onDragStart,
-  })
+  const isEditingRef = useRef(false)
 
   const {
     isOpen: isContextMenuOpen,
@@ -232,6 +218,43 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
     itemId: workflow.id,
   })
 
+  isEditingRef.current = isEditing
+
+  const onDragStart = useCallback(
+    (e: React.DragEvent) => {
+      if (isEditingRef.current) {
+        e.preventDefault()
+        return
+      }
+
+      const currentSelection = useFolderStore.getState().selectedWorkflows
+      const isCurrentlySelected = currentSelection.has(workflow.id)
+      const workflowIds =
+        isCurrentlySelected && currentSelection.size > 1
+          ? Array.from(currentSelection)
+          : [workflow.id]
+
+      e.dataTransfer.setData('workflow-ids', JSON.stringify(workflowIds))
+      e.dataTransfer.effectAllowed = 'move'
+      onDragStartProp?.()
+    },
+    [workflow.id, onDragStartProp]
+  )
+
+  const {
+    isDragging,
+    shouldPreventClickRef,
+    handleDragStart,
+    handleDragEnd: handleDragEndBase,
+  } = useItemDrag({
+    onDragStart,
+  })
+
+  const handleDragEnd = useCallback(() => {
+    handleDragEndBase()
+    onDragEndProp?.()
+  }, [handleDragEndBase, onDragEndProp])
+
   /**
    * Handle double-click on workflow name to enter rename mode
    */

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo } from 'react'
 import clsx from 'clsx'
 import { useParams, usePathname } from 'next/navigation'
 import { FolderItem } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item'
@@ -14,9 +14,6 @@ import { useFolderStore } from '@/stores/folders/store'
 import type { FolderTreeNode } from '@/stores/folders/types'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
-/**
- * Constants for tree layout and styling
- */
 const TREE_SPACING = {
   INDENT_PER_LEVEL: 20,
 } as const
@@ -29,12 +26,24 @@ interface WorkflowListProps {
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
 }
 
-/**
- * WorkflowList component displays workflows organized by folders with drag-and-drop support.
- *
- * @param props - Component props
- * @returns Workflow list with folders and drag-drop support
- */
+const DropIndicatorLine = memo(function DropIndicatorLine({
+  show,
+  level = 0,
+}: {
+  show: boolean
+  level?: number
+}) {
+  if (!show) return null
+  return (
+    <div
+      className='pointer-events-none absolute right-0 left-0 z-20 flex items-center'
+      style={{ paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px` }}
+    >
+      <div className='h-[2px] flex-1 rounded-full bg-[#33b4ff]/70' />
+    </div>
+  )
+})
+
 export function WorkflowList({
   regularWorkflows,
   isLoading = false,
@@ -48,20 +57,21 @@ export function WorkflowList({
   const workflowId = params.workflowId as string
 
   const { isLoading: foldersLoading } = useFolders(workspaceId)
-
   const { getFolderTree, expandedFolders, getFolderPath, setExpanded } = useFolderStore()
 
   const {
-    dropTargetId,
+    dropIndicator,
     isDragging,
     setScrollContainer,
+    createWorkflowDragHandlers,
     createFolderDragHandlers,
-    createItemDragHandlers,
-    createRootDragHandlers,
-    createFolderHeaderHoverHandlers,
+    createEmptyFolderDropZone,
+    createFolderContentDropZone,
+    createRootDropZone,
+    handleDragStart,
+    handleDragEnd,
   } = useDragDrop()
 
-  // Set scroll container when ref changes
   useEffect(() => {
     if (scrollContainerRef.current) {
       setScrollContainer(scrollContainerRef.current)
@@ -76,23 +86,22 @@ export function WorkflowList({
     return activeWorkflow?.folderId || null
   }, [workflowId, regularWorkflows, isLoading, foldersLoading])
 
-  const workflowsByFolder = useMemo(
-    () =>
-      regularWorkflows.reduce(
-        (acc, workflow) => {
-          const folderId = workflow.folderId || 'root'
-          if (!acc[folderId]) acc[folderId] = []
-          acc[folderId].push(workflow)
-          return acc
-        },
-        {} as Record<string, WorkflowMetadata[]>
-      ),
-    [regularWorkflows]
-  )
+  const workflowsByFolder = useMemo(() => {
+    const grouped = regularWorkflows.reduce(
+      (acc, workflow) => {
+        const folderId = workflow.folderId || 'root'
+        if (!acc[folderId]) acc[folderId] = []
+        acc[folderId].push(workflow)
+        return acc
+      },
+      {} as Record<string, WorkflowMetadata[]>
+    )
+    for (const folderId of Object.keys(grouped)) {
+      grouped[folderId].sort((a, b) => a.sortOrder - b.sortOrder)
+    }
+    return grouped
+  }, [regularWorkflows])
 
-  /**
-   * Build a flat list of all workflow IDs in display order for range selection
-   */
   const orderedWorkflowIds = useMemo(() => {
     const ids: string[] = []
 
@@ -106,12 +115,10 @@ export function WorkflowList({
       }
     }
 
-    // Collect from folders first
     for (const folder of folderTree) {
       collectWorkflowIds(folder)
     }
 
-    // Then collect root workflows
     const rootWorkflows = workflowsByFolder.root || []
     for (const workflow of rootWorkflows) {
       ids.push(workflow.id)
@@ -120,30 +127,24 @@ export function WorkflowList({
     return ids
   }, [folderTree, workflowsByFolder])
 
-  // Workflow selection hook - uses active workflow ID as anchor for range selection
   const { handleWorkflowClick } = useWorkflowSelection({
     workflowIds: orderedWorkflowIds,
     activeWorkflowId: workflowId,
   })
 
   const isWorkflowActive = useCallback(
-    (workflowId: string) => pathname === `/workspace/${workspaceId}/w/${workflowId}`,
+    (wfId: string) => pathname === `/workspace/${workspaceId}/w/${wfId}`,
     [pathname, workspaceId]
   )
 
-  /**
-   * Auto-expand folders and select active workflow.
-   */
   useEffect(() => {
     if (!workflowId || isLoading || foldersLoading) return
 
-    // Expand folder path to reveal workflow
     if (activeWorkflowFolderId) {
       const folderPath = getFolderPath(activeWorkflowFolderId)
       folderPath.forEach((folder) => setExpanded(folder.id, true))
     }
 
-    // Select workflow if not already selected
     const { selectedWorkflows, selectOnly } = useFolderStore.getState()
     if (!selectedWorkflows.has(workflowId)) {
       selectOnly(workflowId)
@@ -151,23 +152,40 @@ export function WorkflowList({
   }, [workflowId, activeWorkflowFolderId, isLoading, foldersLoading, getFolderPath, setExpanded])
 
   const renderWorkflowItem = useCallback(
-    (workflow: WorkflowMetadata, level: number, parentFolderId: string | null = null) => (
-      <div key={workflow.id} className='relative' {...createItemDragHandlers(parentFolderId)}>
-        <div
-          style={{
-            paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px`,
-          }}
-        >
-          <WorkflowItem
-            workflow={workflow}
-            active={isWorkflowActive(workflow.id)}
-            level={level}
-            onWorkflowClick={handleWorkflowClick}
-          />
+    (workflow: WorkflowMetadata, level: number, folderId: string | null = null) => {
+      const showBefore =
+        dropIndicator?.targetId === workflow.id && dropIndicator?.position === 'before'
+      const showAfter =
+        dropIndicator?.targetId === workflow.id && dropIndicator?.position === 'after'
+
+      return (
+        <div key={workflow.id} className='relative'>
+          <DropIndicatorLine show={showBefore} level={level} />
+          <div
+            style={{ paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px` }}
+            {...createWorkflowDragHandlers(workflow.id, folderId)}
+          >
+            <WorkflowItem
+              workflow={workflow}
+              active={isWorkflowActive(workflow.id)}
+              level={level}
+              onWorkflowClick={handleWorkflowClick}
+              onDragStart={() => handleDragStart('workflow', folderId)}
+              onDragEnd={handleDragEnd}
+            />
+          </div>
+          <DropIndicatorLine show={showAfter} level={level} />
         </div>
-      </div>
-    ),
-    [isWorkflowActive, createItemDragHandlers, handleWorkflowClick]
+      )
+    },
+    [
+      dropIndicator,
+      isWorkflowActive,
+      createWorkflowDragHandlers,
+      handleWorkflowClick,
+      handleDragStart,
+      handleDragEnd,
+    ]
   )
 
   const renderFolderSection = useCallback(
@@ -179,45 +197,75 @@ export function WorkflowList({
       const workflowsInFolder = workflowsByFolder[folder.id] || []
       const isExpanded = expandedFolders.has(folder.id)
       const hasChildren = workflowsInFolder.length > 0 || folder.children.length > 0
-      const isDropTarget = dropTargetId === folder.id
+
+      const showBefore =
+        dropIndicator?.targetId === folder.id && dropIndicator?.position === 'before'
+      const showAfter = dropIndicator?.targetId === folder.id && dropIndicator?.position === 'after'
+      const showInside =
+        dropIndicator?.targetId === folder.id && dropIndicator?.position === 'inside'
+
+      const childItems: Array<{
+        type: 'folder' | 'workflow'
+        id: string
+        sortOrder: number
+        data: FolderTreeNode | WorkflowMetadata
+      }> = []
+      for (const childFolder of folder.children) {
+        childItems.push({
+          type: 'folder',
+          id: childFolder.id,
+          sortOrder: childFolder.sortOrder,
+          data: childFolder,
+        })
+      }
+      for (const workflow of workflowsInFolder) {
+        childItems.push({
+          type: 'workflow',
+          id: workflow.id,
+          sortOrder: workflow.sortOrder,
+          data: workflow,
+        })
+      }
+      childItems.sort((a, b) => a.sortOrder - b.sortOrder)
 
       return (
-        <div key={folder.id} className='relative' {...createFolderDragHandlers(folder.id)}>
-          {/* Drop target highlight overlay - always rendered for stable DOM */}
+        <div key={folder.id} className='relative'>
+          <DropIndicatorLine show={showBefore} level={level} />
+          {/* Drop target highlight overlay - covers entire folder section */}
           <div
             className={clsx(
               'pointer-events-none absolute inset-0 z-10 rounded-[4px] transition-opacity duration-75',
-              isDropTarget && isDragging ? 'bg-gray-400/20 opacity-100' : 'opacity-0'
+              showInside && isDragging ? 'bg-[#33b4ff1a] opacity-100' : 'opacity-0'
             )}
           />
-
           <div
             style={{ paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px` }}
-            {...createItemDragHandlers(folder.id)}
+            {...createFolderDragHandlers(folder.id, parentFolderId)}
           >
             <FolderItem
               folder={folder}
               level={level}
-              hoverHandlers={createFolderHeaderHoverHandlers(folder.id)}
+              onDragStart={() => handleDragStart('folder', parentFolderId)}
+              onDragEnd={handleDragEnd}
             />
           </div>
+          <DropIndicatorLine show={showAfter} level={level} />
 
-          {isExpanded && hasChildren && (
-            <div className='relative' {...createItemDragHandlers(folder.id)}>
-              {/* Vertical line - positioned to align under folder chevron */}
+          {isExpanded && (hasChildren || isDragging) && (
+            <div className='relative' {...createFolderContentDropZone(folder.id)}>
               <div
                 className='pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--border)]'
                 style={{ left: `${level * TREE_SPACING.INDENT_PER_LEVEL + 12}px` }}
               />
               <div className='mt-[2px] space-y-[2px] pl-[2px]'>
-                {workflowsInFolder.map((workflow: WorkflowMetadata) =>
-                  renderWorkflowItem(workflow, level + 1, folder.id)
+                {childItems.map((item) =>
+                  item.type === 'folder'
+                    ? renderFolderSection(item.data as FolderTreeNode, level + 1, folder.id)
+                    : renderWorkflowItem(item.data as WorkflowMetadata, level + 1, folder.id)
+                )}
+                {!hasChildren && isDragging && (
+                  <div className='h-[24px]' {...createEmptyFolderDropZone(folder.id)} />
                 )}
-                {folder.children.map((childFolder) => (
-                  <div key={childFolder.id} className='relative'>
-                    {renderFolderSection(childFolder, level + 1, folder.id)}
-                  </div>
-                ))}
               </div>
             </div>
           )}
@@ -227,29 +275,47 @@ export function WorkflowList({
     [
       workflowsByFolder,
       expandedFolders,
-      dropTargetId,
+      dropIndicator,
       isDragging,
       createFolderDragHandlers,
-      createItemDragHandlers,
-      createFolderHeaderHoverHandlers,
+      createEmptyFolderDropZone,
+      createFolderContentDropZone,
+      handleDragStart,
+      handleDragEnd,
       renderWorkflowItem,
     ]
   )
 
-  const handleRootDragEvents = createRootDragHandlers()
+  const rootDropZoneHandlers = createRootDropZone()
   const rootWorkflows = workflowsByFolder.root || []
-  const isRootDropTarget = dropTargetId === 'root'
-  const hasRootWorkflows = rootWorkflows.length > 0
-  const hasFolders = folderTree.length > 0
 
-  /**
-   * Handle click on empty space to revert to active workflow selection
-   */
+  const rootItems = useMemo(() => {
+    const items: Array<{
+      type: 'folder' | 'workflow'
+      id: string
+      sortOrder: number
+      data: FolderTreeNode | WorkflowMetadata
+    }> = []
+    for (const folder of folderTree) {
+      items.push({ type: 'folder', id: folder.id, sortOrder: folder.sortOrder, data: folder })
+    }
+    for (const workflow of rootWorkflows) {
+      items.push({
+        type: 'workflow',
+        id: workflow.id,
+        sortOrder: workflow.sortOrder,
+        data: workflow,
+      })
+    }
+    return items.sort((a, b) => a.sortOrder - b.sortOrder)
+  }, [folderTree, rootWorkflows])
+
+  const hasRootItems = rootItems.length > 0
+  const showRootInside = dropIndicator?.targetId === 'root' && dropIndicator?.position === 'inside'
+
   const handleContainerClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
-      // Only handle clicks directly on the container (empty space)
       if (e.target !== e.currentTarget) return
-
       const { selectOnly, clearSelection } = useFolderStore.getState()
       workflowId ? selectOnly(workflowId) : clearSelection()
     },
@@ -258,36 +324,23 @@ export function WorkflowList({
 
   return (
     <div className='flex min-h-full flex-col pb-[8px]' onClick={handleContainerClick}>
-      {/* Folders Section */}
-      {hasFolders && (
-        <div className='mb-[2px] space-y-[2px]'>
-          {folderTree.map((folder) => renderFolderSection(folder, 0))}
-        </div>
-      )}
-
-      {/* Root Workflows Section - Expands to fill remaining space */}
       <div
-        className={clsx('relative flex-1', !hasRootWorkflows && 'min-h-[26px]')}
-        {...handleRootDragEvents}
+        className={clsx('relative flex-1 rounded-[4px]', !hasRootItems && 'min-h-[26px]')}
+        {...rootDropZoneHandlers}
       >
-        {/* Root drop target highlight overlay - always rendered for stable DOM */}
+        {/* Root drop target highlight overlay */}
         <div
           className={clsx(
             'pointer-events-none absolute inset-0 z-10 rounded-[4px] transition-opacity duration-75',
-            isRootDropTarget && isDragging ? 'bg-gray-400/20 opacity-100' : 'opacity-0'
+            showRootInside && isDragging ? 'bg-[#33b4ff1a] opacity-100' : 'opacity-0'
           )}
         />
-
         <div className='space-y-[2px]'>
-          {rootWorkflows.map((workflow: WorkflowMetadata) => (
-            <WorkflowItem
-              key={workflow.id}
-              workflow={workflow}
-              active={isWorkflowActive(workflow.id)}
-              level={0}
-              onWorkflowClick={handleWorkflowClick}
-            />
-          ))}
+          {rootItems.map((item) =>
+            item.type === 'folder'
+              ? renderFolderSection(item.data as FolderTreeNode, 0, null)
+              : renderWorkflowItem(item.data as WorkflowMetadata, 0, null)
+          )}
         </div>
       </div>
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts

@@ -1,6 +1,6 @@
 export { useAutoScroll } from './use-auto-scroll'
 export { useContextMenu } from './use-context-menu'
-export { useDragDrop } from './use-drag-drop'
+export { type DropIndicator, useDragDrop } from './use-drag-drop'
 export { useFolderExpand } from './use-folder-expand'
 export { useFolderOperations } from './use-folder-operations'
 export { useItemDrag } from './use-item-drag'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts

@@ -1,47 +1,40 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
-import { useUpdateFolder } from '@/hooks/queries/folders'
+import { useReorderFolders } from '@/hooks/queries/folders'
+import { useReorderWorkflows } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const logger = createLogger('WorkflowList:DragDrop')
 
-/**
- * Constants for auto-scroll behavior
- */
-const SCROLL_THRESHOLD = 60 // Distance from edge to trigger scroll
-const SCROLL_SPEED = 8 // Pixels per frame
+const SCROLL_THRESHOLD = 60
+const SCROLL_SPEED = 8
+const HOVER_EXPAND_DELAY = 400
 
-/**
- * Constants for folder auto-expand on hover during drag
- */
-const HOVER_EXPAND_DELAY = 400 // Milliseconds to wait before expanding folder
+export interface DropIndicator {
+  targetId: string
+  position: 'before' | 'after' | 'inside'
+  folderId: string | null
+}
 
-/**
- * Custom hook for handling drag and drop operations for workflows and folders.
- * Includes auto-scrolling, drop target highlighting, and hover-to-expand.
- *
- * @returns Drag and drop state and event handlers
- */
 export function useDragDrop() {
-  const [dropTargetId, setDropTargetId] = useState<string | null>(null)
+  const [dropIndicator, setDropIndicator] = useState<DropIndicator | null>(null)
   const [isDragging, setIsDragging] = useState(false)
   const [hoverFolderId, setHoverFolderId] = useState<string | null>(null)
   const scrollContainerRef = useRef<HTMLDivElement | null>(null)
   const scrollIntervalRef = useRef<number | null>(null)
   const hoverExpandTimerRef = useRef<number | null>(null)
   const lastDragYRef = useRef<number>(0)
+  const draggedTypeRef = useRef<'workflow' | 'folder' | null>(null)
+  const draggedSourceFolderRef = useRef<string | null>(null)
 
   const params = useParams()
   const workspaceId = params.workspaceId as string | undefined
-  const updateFolderMutation = useUpdateFolder()
+  const reorderWorkflowsMutation = useReorderWorkflows()
+  const reorderFoldersMutation = useReorderFolders()
   const { setExpanded, expandedFolders } = useFolderStore()
-  const { updateWorkflow } = useWorkflowRegistry()
 
-  /**
-   * Auto-scroll handler - scrolls container when dragging near edges
-   */
   const handleAutoScroll = useCallback(() => {
     if (!scrollContainerRef.current || !isDragging) return
 
@@ -49,22 +42,17 @@ export function useDragDrop() {
     const rect = container.getBoundingClientRect()
     const mouseY = lastDragYRef.current
 
-    // Only scroll if mouse is within container bounds
     if (mouseY < rect.top || mouseY > rect.bottom) return
 
-    // Calculate distance from top and bottom edges
     const distanceFromTop = mouseY - rect.top
     const distanceFromBottom = rect.bottom - mouseY
 
     let scrollDelta = 0
 
-    // Scroll up if near top and not at scroll top
     if (distanceFromTop < SCROLL_THRESHOLD && container.scrollTop > 0) {
       const intensity = Math.max(0, Math.min(1, 1 - distanceFromTop / SCROLL_THRESHOLD))
       scrollDelta = -SCROLL_SPEED * intensity
-    }
-    // Scroll down if near bottom and not at scroll bottom
-    else if (distanceFromBottom < SCROLL_THRESHOLD) {
+    } else if (distanceFromBottom < SCROLL_THRESHOLD) {
       const maxScroll = container.scrollHeight - container.clientHeight
       if (container.scrollTop < maxScroll) {
         const intensity = Math.max(0, Math.min(1, 1 - distanceFromBottom / SCROLL_THRESHOLD))
@@ -77,12 +65,9 @@ export function useDragDrop() {
     }
   }, [isDragging])
 
-  /**
-   * Start auto-scroll animation loop
-   */
   useEffect(() => {
     if (isDragging) {
-      scrollIntervalRef.current = window.setInterval(handleAutoScroll, 10) // ~100fps for smoother response
+      scrollIntervalRef.current = window.setInterval(handleAutoScroll, 10)
     } else {
       if (scrollIntervalRef.current) {
         clearInterval(scrollIntervalRef.current)
@@ -97,30 +82,17 @@ export function useDragDrop() {
     }
   }, [isDragging, handleAutoScroll])
 
-  /**
-   * Handle hover folder changes - start/clear expand timer
-   */
   useEffect(() => {
-    // Clear existing timer when hover folder changes
     if (hoverExpandTimerRef.current) {
       clearTimeout(hoverExpandTimerRef.current)
       hoverExpandTimerRef.current = null
     }
 
-    // Don't start timer if not dragging or no folder is hovered
-    if (!isDragging || !hoverFolderId) {
-      return
-    }
+    if (!isDragging || !hoverFolderId) return
+    if (expandedFolders.has(hoverFolderId)) return
 
-    // Don't expand if folder is already expanded
-    if (expandedFolders.has(hoverFolderId)) {
-      return
-    }
-
-    // Start timer to expand folder after delay
     hoverExpandTimerRef.current = window.setTimeout(() => {
       setExpanded(hoverFolderId, true)
-      logger.info(`Auto-expanded folder ${hoverFolderId} during drag`)
     }, HOVER_EXPAND_DELAY)
 
     return () => {
@@ -131,249 +103,471 @@ export function useDragDrop() {
     }
   }, [hoverFolderId, isDragging, expandedFolders, setExpanded])
 
-  /**
-   * Cleanup hover state when dragging stops
-   */
   useEffect(() => {
     if (!isDragging) {
       setHoverFolderId(null)
+      setDropIndicator(null)
+      draggedTypeRef.current = null
     }
   }, [isDragging])
 
-  /**
-   * Moves one or more workflows to a target folder
-   *
-   * @param workflowIds - Array of workflow IDs to move
-   * @param targetFolderId - Target folder ID or null for root
-   */
-  const handleWorkflowDrop = useCallback(
-    async (workflowIds: string[], targetFolderId: string | null) => {
-      if (!workflowIds.length) {
-        logger.warn('No workflows to move')
-        return
-      }
-
-      try {
-        await Promise.all(
-          workflowIds.map((workflowId) => updateWorkflow(workflowId, { folderId: targetFolderId }))
-        )
-        logger.info(`Moved ${workflowIds.length} workflow(s)`)
-      } catch (error) {
-        logger.error('Failed to move workflows:', error)
-      }
+  const calculateDropPosition = useCallback(
+    (e: React.DragEvent, element: HTMLElement): 'before' | 'after' => {
+      const rect = element.getBoundingClientRect()
+      const midY = rect.top + rect.height / 2
+      return e.clientY < midY ? 'before' : 'after'
     },
-    [updateWorkflow]
+    []
   )
 
-  /**
-   * Moves a folder to a new parent folder, with validation
-   *
-   * @param draggedFolderId - ID of the folder being moved
-   * @param targetFolderId - Target folder ID or null for root
-   */
-  const handleFolderMove = useCallback(
-    async (draggedFolderId: string, targetFolderId: string | null) => {
-      if (!draggedFolderId) {
-        logger.warn('No folder to move')
-        return
+  const calculateFolderDropPosition = useCallback(
+    (e: React.DragEvent, element: HTMLElement): 'before' | 'inside' | 'after' => {
+      const rect = element.getBoundingClientRect()
+      const relativeY = e.clientY - rect.top
+      const height = rect.height
+      // Top 25% = before, middle 50% = inside, bottom 25% = after
+      if (relativeY < height * 0.25) return 'before'
+      if (relativeY > height * 0.75) return 'after'
+      return 'inside'
+    },
+    []
+  )
+
+  type SiblingItem = { type: 'folder' | 'workflow'; id: string; sortOrder: number }
+
+  const getDestinationFolderId = useCallback((indicator: DropIndicator): string | null => {
+    return indicator.position === 'inside'
+      ? indicator.targetId === 'root'
+        ? null
+        : indicator.targetId
+      : indicator.folderId
+  }, [])
+
+  const calculateInsertIndex = useCallback(
+    (remaining: SiblingItem[], indicator: DropIndicator): number => {
+      return indicator.position === 'inside'
+        ? remaining.length
+        : remaining.findIndex((item) => item.id === indicator.targetId) +
+            (indicator.position === 'after' ? 1 : 0)
+    },
+    []
+  )
+
+  const buildAndSubmitUpdates = useCallback(
+    async (newOrder: SiblingItem[], destinationFolderId: string | null) => {
+      const indexed = newOrder.map((item, i) => ({ ...item, sortOrder: i }))
+
+      const folderUpdates = indexed
+        .filter((item) => item.type === 'folder')
+        .map((item) => ({ id: item.id, sortOrder: item.sortOrder, parentId: destinationFolderId }))
+
+      const workflowUpdates = indexed
+        .filter((item) => item.type === 'workflow')
+        .map((item) => ({ id: item.id, sortOrder: item.sortOrder, folderId: destinationFolderId }))
+
+      await Promise.all(
+        [
+          folderUpdates.length > 0 &&
+            reorderFoldersMutation.mutateAsync({
+              workspaceId: workspaceId!,
+              updates: folderUpdates,
+            }),
+          workflowUpdates.length > 0 &&
+            reorderWorkflowsMutation.mutateAsync({
+              workspaceId: workspaceId!,
+              updates: workflowUpdates,
+            }),
+        ].filter(Boolean)
+      )
+    },
+    [workspaceId, reorderFoldersMutation, reorderWorkflowsMutation]
+  )
+
+  const isLeavingElement = useCallback((e: React.DragEvent<HTMLElement>): boolean => {
+    const relatedTarget = e.relatedTarget as HTMLElement | null
+    const currentTarget = e.currentTarget as HTMLElement
+    return !relatedTarget || !currentTarget.contains(relatedTarget)
+  }, [])
+
+  const initDragOver = useCallback((e: React.DragEvent<HTMLElement>, stopPropagation = true) => {
+    e.preventDefault()
+    if (stopPropagation) e.stopPropagation()
+    lastDragYRef.current = e.clientY
+    setIsDragging(true)
+  }, [])
+
+  const getSiblingItems = useCallback((folderId: string | null): SiblingItem[] => {
+    const currentFolders = useFolderStore.getState().folders
+    const currentWorkflows = useWorkflowRegistry.getState().workflows
+    return [
+      ...Object.values(currentFolders)
+        .filter((f) => f.parentId === folderId)
+        .map((f) => ({ type: 'folder' as const, id: f.id, sortOrder: f.sortOrder })),
+      ...Object.values(currentWorkflows)
+        .filter((w) => w.folderId === folderId)
+        .map((w) => ({ type: 'workflow' as const, id: w.id, sortOrder: w.sortOrder })),
+    ].sort((a, b) => a.sortOrder - b.sortOrder)
+  }, [])
+
+  const setNormalizedDropIndicator = useCallback(
+    (indicator: DropIndicator | null) => {
+      setDropIndicator((prev) => {
+        let next: DropIndicator | null = indicator
+
+        if (indicator && indicator.position === 'after' && indicator.targetId !== 'root') {
+          const siblings = getSiblingItems(indicator.folderId)
+          const currentIdx = siblings.findIndex((s) => s.id === indicator.targetId)
+          const nextSibling = siblings[currentIdx + 1]
+          if (nextSibling) {
+            next = {
+              targetId: nextSibling.id,
+              position: 'before',
+              folderId: indicator.folderId,
+            }
+          }
+        }
+
+        if (
+          prev?.targetId === next?.targetId &&
+          prev?.position === next?.position &&
+          prev?.folderId === next?.folderId
+        ) {
+          return prev
+        }
+
+        return next
+      })
+    },
+    [getSiblingItems]
+  )
+
+  const isNoOpMove = useCallback(
+    (
+      indicator: DropIndicator,
+      draggedIds: string[],
+      draggedType: 'folder' | 'workflow',
+      destinationFolderId: string | null,
+      currentFolderId: string | null | undefined
+    ): boolean => {
+      if (indicator.position !== 'inside' && draggedIds.includes(indicator.targetId)) {
+        return true
       }
+      if (currentFolderId !== destinationFolderId) {
+        return false
+      }
+      const siblingItems = getSiblingItems(destinationFolderId)
+      const remaining = siblingItems.filter(
+        (item) => !(item.type === draggedType && draggedIds.includes(item.id))
+      )
+      const insertAt = calculateInsertIndex(remaining, indicator)
+      const originalIdx = siblingItems.findIndex(
+        (item) => item.type === draggedType && item.id === draggedIds[0]
+      )
+      return insertAt === originalIdx
+    },
+    [getSiblingItems, calculateInsertIndex]
+  )
+
+  const handleWorkflowDrop = useCallback(
+    async (workflowIds: string[], indicator: DropIndicator) => {
+      if (!workflowIds.length || !workspaceId) return
 
       try {
-        const folderStore = useFolderStore.getState()
-        const draggedFolderPath = folderStore.getFolderPath(draggedFolderId)
+        const destinationFolderId = getDestinationFolderId(indicator)
+        const currentWorkflows = useWorkflowRegistry.getState().workflows
+        const firstWorkflow = currentWorkflows[workflowIds[0]]
 
-        // Prevent moving folder into its own descendant
         if (
-          targetFolderId &&
-          draggedFolderPath.some((ancestor) => ancestor.id === targetFolderId)
+          isNoOpMove(
+            indicator,
+            workflowIds,
+            'workflow',
+            destinationFolderId,
+            firstWorkflow?.folderId
+          )
         ) {
-          logger.info('Cannot move folder into its own descendant')
           return
         }
 
-        // Prevent moving folder into itself
-        if (draggedFolderId === targetFolderId) {
+        const siblingItems = getSiblingItems(destinationFolderId)
+        const movingSet = new Set(workflowIds)
+        const remaining = siblingItems.filter(
+          (item) => !(item.type === 'workflow' && movingSet.has(item.id))
+        )
+        const moving = workflowIds
+          .map((id) => ({
+            type: 'workflow' as const,
+            id,
+            sortOrder: currentWorkflows[id]?.sortOrder ?? 0,
+          }))
+          .sort((a, b) => a.sortOrder - b.sortOrder)
+
+        const insertAt = calculateInsertIndex(remaining, indicator)
+
+        const newOrder: SiblingItem[] = [
+          ...remaining.slice(0, insertAt),
+          ...moving,
+          ...remaining.slice(insertAt),
+        ]
+
+        await buildAndSubmitUpdates(newOrder, destinationFolderId)
+      } catch (error) {
+        logger.error('Failed to reorder workflows:', error)
+      }
+    },
+    [
+      getDestinationFolderId,
+      getSiblingItems,
+      calculateInsertIndex,
+      isNoOpMove,
+      buildAndSubmitUpdates,
+    ]
+  )
+
+  const handleFolderDrop = useCallback(
+    async (draggedFolderId: string, indicator: DropIndicator) => {
+      if (!draggedFolderId || !workspaceId) return
+
+      try {
+        const folderStore = useFolderStore.getState()
+        const currentFolders = folderStore.folders
+
+        const targetParentId = getDestinationFolderId(indicator)
+
+        if (draggedFolderId === targetParentId) {
           logger.info('Cannot move folder into itself')
           return
         }
 
-        if (!workspaceId) {
-          logger.warn('No workspaceId available for folder move')
+        if (targetParentId) {
+          const targetPath = folderStore.getFolderPath(targetParentId)
+          if (targetPath.some((f) => f.id === draggedFolderId)) {
+            logger.info('Cannot move folder into its own descendant')
+            return
+          }
+        }
+
+        const draggedFolder = currentFolders[draggedFolderId]
+        if (
+          isNoOpMove(
+            indicator,
+            [draggedFolderId],
+            'folder',
+            targetParentId,
+            draggedFolder?.parentId
+          )
+        ) {
           return
         }
-        await updateFolderMutation.mutateAsync({
-          workspaceId,
-          id: draggedFolderId,
-          updates: { parentId: targetFolderId },
-        })
-        logger.info(`Moved folder to ${targetFolderId ? `folder ${targetFolderId}` : 'root'}`)
+
+        const siblingItems = getSiblingItems(targetParentId)
+        const remaining = siblingItems.filter(
+          (item) => !(item.type === 'folder' && item.id === draggedFolderId)
+        )
+
+        const insertAt = calculateInsertIndex(remaining, indicator)
+
+        const newOrder: SiblingItem[] = [
+          ...remaining.slice(0, insertAt),
+          { type: 'folder', id: draggedFolderId, sortOrder: 0 },
+          ...remaining.slice(insertAt),
+        ]
+
+        await buildAndSubmitUpdates(newOrder, targetParentId)
       } catch (error) {
-        logger.error('Failed to move folder:', error)
+        logger.error('Failed to reorder folder:', error)
       }
     },
-    [updateFolderMutation, workspaceId]
+    [
+      workspaceId,
+      getDestinationFolderId,
+      getSiblingItems,
+      calculateInsertIndex,
+      isNoOpMove,
+      buildAndSubmitUpdates,
+    ]
   )
 
-  /**
-   * Handles drop events for both workflows and folders
-   *
-   * @param e - React drag event
-   * @param targetFolderId - Target folder ID or null for root
-   */
-  const handleFolderDrop = useCallback(
-    async (e: React.DragEvent, targetFolderId: string | null) => {
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
       e.preventDefault()
       e.stopPropagation()
-      setDropTargetId(null)
+
+      const indicator = dropIndicator
+      setDropIndicator(null)
       setIsDragging(false)
 
+      if (!indicator) return
+
       try {
-        // Check if dropping workflows
         const workflowIdsData = e.dataTransfer.getData('workflow-ids')
         if (workflowIdsData) {
           const workflowIds = JSON.parse(workflowIdsData) as string[]
-          await handleWorkflowDrop(workflowIds, targetFolderId)
+          await handleWorkflowDrop(workflowIds, indicator)
           return
         }
 
-        // Check if dropping a folder
         const folderIdData = e.dataTransfer.getData('folder-id')
-        if (folderIdData && targetFolderId !== folderIdData) {
-          await handleFolderMove(folderIdData, targetFolderId)
+        if (folderIdData) {
+          await handleFolderDrop(folderIdData, indicator)
         }
       } catch (error) {
         logger.error('Failed to handle drop:', error)
       }
     },
-    [handleWorkflowDrop, handleFolderMove]
+    [dropIndicator, handleWorkflowDrop, handleFolderDrop]
   )
 
-  /**
-   * Creates drag event handlers for a specific folder section
-   * These handlers are attached to the entire folder section container
-   *
-   * @param folderId - Folder ID to create handlers for
-   * @returns Object containing drag event handlers
-   */
-  const createFolderDragHandlers = useCallback(
-    (folderId: string) => ({
-      onDragEnter: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        setIsDragging(true)
-      },
+  const createWorkflowDragHandlers = useCallback(
+    (workflowId: string, folderId: string | null) => ({
       onDragOver: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        lastDragYRef.current = e.clientY
-        setDropTargetId(folderId)
-        setIsDragging(true)
-      },
-      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        const relatedTarget = e.relatedTarget as HTMLElement | null
-        const currentTarget = e.currentTarget as HTMLElement
-        // Only clear if we're leaving the folder section completely
-        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-          setDropTargetId(null)
+        initDragOver(e)
+        const isSameFolder = draggedSourceFolderRef.current === folderId
+        if (isSameFolder) {
+          const position = calculateDropPosition(e, e.currentTarget)
+          setNormalizedDropIndicator({ targetId: workflowId, position, folderId })
+        } else {
+          setNormalizedDropIndicator({
+            targetId: folderId || 'root',
+            position: 'inside',
+            folderId: null,
+          })
         }
       },
-      onDrop: (e: React.DragEvent<HTMLElement>) => handleFolderDrop(e, folderId),
+      onDrop: handleDrop,
     }),
-    [handleFolderDrop]
+    [initDragOver, calculateDropPosition, setNormalizedDropIndicator, handleDrop]
   )
 
-  /**
-   * Creates drag event handlers for items (workflows/folders) that belong to a parent folder
-   * When dragging over an item, highlights the parent folder section
-   *
-   * @param parentFolderId - Parent folder ID or null for root
-   * @returns Object containing drag event handlers
-   */
-  const createItemDragHandlers = useCallback(
-    (parentFolderId: string | null) => ({
+  const createFolderDragHandlers = useCallback(
+    (folderId: string, parentFolderId: string | null) => ({
+      onDragOver: (e: React.DragEvent<HTMLElement>) => {
+        initDragOver(e)
+        if (draggedTypeRef.current === 'folder') {
+          const isSameParent = draggedSourceFolderRef.current === parentFolderId
+          if (isSameParent) {
+            const position = calculateDropPosition(e, e.currentTarget)
+            setNormalizedDropIndicator({ targetId: folderId, position, folderId: parentFolderId })
+          } else {
+            setNormalizedDropIndicator({
+              targetId: folderId,
+              position: 'inside',
+              folderId: parentFolderId,
+            })
+            setHoverFolderId(folderId)
+          }
+        } else {
+          // Workflow being dragged over a folder
+          const isSameParent = draggedSourceFolderRef.current === parentFolderId
+          if (isSameParent) {
+            // Same level - use three zones: top=before, middle=inside, bottom=after
+            const position = calculateFolderDropPosition(e, e.currentTarget)
+            setNormalizedDropIndicator({ targetId: folderId, position, folderId: parentFolderId })
+            if (position === 'inside') {
+              setHoverFolderId(folderId)
+            } else {
+              setHoverFolderId(null)
+            }
+          } else {
+            // Different container - drop into folder
+            setNormalizedDropIndicator({
+              targetId: folderId,
+              position: 'inside',
+              folderId: parentFolderId,
+            })
+            setHoverFolderId(folderId)
+          }
+        }
+      },
+      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
+        if (isLeavingElement(e)) setHoverFolderId(null)
+      },
+      onDrop: handleDrop,
+    }),
+    [
+      initDragOver,
+      calculateDropPosition,
+      calculateFolderDropPosition,
+      setNormalizedDropIndicator,
+      isLeavingElement,
+      handleDrop,
+    ]
+  )
+
+  const createEmptyFolderDropZone = useCallback(
+    (folderId: string) => ({
+      onDragOver: (e: React.DragEvent<HTMLElement>) => {
+        initDragOver(e)
+        setNormalizedDropIndicator({ targetId: folderId, position: 'inside', folderId })
+      },
+      onDrop: handleDrop,
+    }),
+    [initDragOver, setNormalizedDropIndicator, handleDrop]
+  )
+
+  const createFolderContentDropZone = useCallback(
+    (folderId: string) => ({
       onDragOver: (e: React.DragEvent<HTMLElement>) => {
         e.preventDefault()
         e.stopPropagation()
         lastDragYRef.current = e.clientY
-        setDropTargetId(parentFolderId || 'root')
         setIsDragging(true)
+        if (e.target === e.currentTarget && draggedSourceFolderRef.current !== folderId) {
+          setNormalizedDropIndicator({ targetId: folderId, position: 'inside', folderId: null })
+        }
       },
+      onDrop: handleDrop,
     }),
+    [setNormalizedDropIndicator, handleDrop]
+  )
+
+  const createRootDropZone = useCallback(
+    () => ({
+      onDragOver: (e: React.DragEvent<HTMLElement>) => {
+        initDragOver(e, false)
+        if (e.target === e.currentTarget) {
+          setNormalizedDropIndicator({ targetId: 'root', position: 'inside', folderId: null })
+        }
+      },
+      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
+        if (isLeavingElement(e)) setNormalizedDropIndicator(null)
+      },
+      onDrop: handleDrop,
+    }),
+    [initDragOver, setNormalizedDropIndicator, isLeavingElement, handleDrop]
+  )
+
+  const handleDragStart = useCallback(
+    (type: 'workflow' | 'folder', sourceFolderId: string | null) => {
+      draggedTypeRef.current = type
+      draggedSourceFolderRef.current = sourceFolderId
+      setIsDragging(true)
+    },
     []
   )
 
-  /**
-   * Creates drag event handlers for the root drop zone
-   *
-   * @returns Object containing drag event handlers for root
-   */
-  const createRootDragHandlers = useCallback(
-    () => ({
-      onDragEnter: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        setIsDragging(true)
-      },
-      onDragOver: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        lastDragYRef.current = e.clientY
-        setDropTargetId('root')
-        setIsDragging(true)
-      },
-      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        const relatedTarget = e.relatedTarget as HTMLElement | null
-        const currentTarget = e.currentTarget as HTMLElement
-        // Only clear if we're leaving the root completely
-        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-          setDropTargetId(null)
-        }
-      },
-      onDrop: (e: React.DragEvent<HTMLElement>) => handleFolderDrop(e, null),
-    }),
-    [handleFolderDrop]
-  )
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false)
+    setDropIndicator(null)
+    draggedTypeRef.current = null
+    draggedSourceFolderRef.current = null
+    setHoverFolderId(null)
+  }, [])
 
-  /**
-   * Creates drag event handlers for folder header (the clickable part)
-   * These handlers trigger folder expansion on hover during drag
-   *
-   * @param folderId - Folder ID to handle hover for
-   * @returns Object containing drag event handlers for folder header
-   */
-  const createFolderHeaderHoverHandlers = useCallback(
-    (folderId: string) => ({
-      onDragEnter: (e: React.DragEvent<HTMLElement>) => {
-        if (isDragging) {
-          setHoverFolderId(folderId)
-        }
-      },
-      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
-        const relatedTarget = e.relatedTarget as HTMLElement | null
-        const currentTarget = e.currentTarget as HTMLElement
-        // Only clear if we're leaving the folder header completely
-        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-          setHoverFolderId(null)
-        }
-      },
-    }),
-    [isDragging]
-  )
-
-  /**
-   * Set the scroll container ref for auto-scrolling
-   *
-   * @param element - Scrollable container element
-   */
   const setScrollContainer = useCallback((element: HTMLDivElement | null) => {
     scrollContainerRef.current = element
   }, [])
 
   return {
-    dropTargetId,
+    dropIndicator,
     isDragging,
     setScrollContainer,
+    createWorkflowDragHandlers,
     createFolderDragHandlers,
-    createItemDragHandlers,
-    createRootDragHandlers,
-    createFolderHeaderHoverHandlers,
+    createEmptyFolderDropZone,
+    createFolderContentDropZone,
+    createRootDropZone,
+    handleDragStart,
+    handleDragEnd,
   }
 }

apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workspace.ts

@@ -64,6 +64,7 @@ export function useExportWorkspace({ onSuccess }: UseExportWorkspaceProps = {})
             id: folder.id,
             name: folder.name,
             parentId: folder.parentId,
+            sortOrder: folder.sortOrder,
           })
         )
 

apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts

@@ -7,6 +7,7 @@ import {
   extractWorkflowsFromFiles,
   extractWorkflowsFromZip,
   parseWorkflowJson,
+  sanitizePathSegment,
 } from '@/lib/workflows/operations/import-export'
 import { folderKeys, useCreateFolder } from '@/hooks/queries/folders'
 import { useCreateWorkflow, workflowKeys } from '@/hooks/queries/workflows'
@@ -40,7 +41,7 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
    * Import a single workflow
    */
   const importSingleWorkflow = useCallback(
-    async (content: string, filename: string, folderId?: string) => {
+    async (content: string, filename: string, folderId?: string, sortOrder?: number) => {
       const { data: workflowData, errors: parseErrors } = parseWorkflowJson(content)
 
       if (!workflowData || parseErrors.length > 0) {
@@ -60,6 +61,7 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
         description: workflowData.metadata?.description || 'Imported from JSON',
         workspaceId,
         folderId: folderId || undefined,
+        sortOrder,
       })
       const newWorkflowId = result.id
 
@@ -140,6 +142,55 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
           })
           const folderMap = new Map<string, string>()
 
+          if (metadata?.folders && metadata.folders.length > 0) {
+            type ExportedFolder = {
+              id: string
+              name: string
+              parentId: string | null
+              sortOrder?: number
+            }
+            const foldersById = new Map<string, ExportedFolder>(
+              metadata.folders.map((f) => [f.id, f])
+            )
+            const oldIdToNewId = new Map<string, string>()
+
+            const buildPath = (folderId: string): string => {
+              const pathParts: string[] = []
+              let currentId: string | null = folderId
+              while (currentId && foldersById.has(currentId)) {
+                const folder: ExportedFolder = foldersById.get(currentId)!
+                pathParts.unshift(sanitizePathSegment(folder.name))
+                currentId = folder.parentId
+              }
+              return pathParts.join('/')
+            }
+
+            const createFolderRecursive = async (folder: ExportedFolder): Promise<string> => {
+              if (oldIdToNewId.has(folder.id)) {
+                return oldIdToNewId.get(folder.id)!
+              }
+
+              let parentId = importFolder.id
+              if (folder.parentId && foldersById.has(folder.parentId)) {
+                parentId = await createFolderRecursive(foldersById.get(folder.parentId)!)
+              }
+
+              const newFolder = await createFolderMutation.mutateAsync({
+                name: folder.name,
+                workspaceId,
+                parentId,
+                sortOrder: folder.sortOrder,
+              })
+              oldIdToNewId.set(folder.id, newFolder.id)
+              folderMap.set(buildPath(folder.id), newFolder.id)
+              return newFolder.id
+            }
+
+            for (const folder of metadata.folders) {
+              await createFolderRecursive(folder)
+            }
+          }
+
           for (const workflow of extractedWorkflows) {
             try {
               let targetFolderId = importFolder.id
@@ -147,15 +198,17 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
               if (workflow.folderPath.length > 0) {
                 const folderPathKey = workflow.folderPath.join('/')
 
-                if (!folderMap.has(folderPathKey)) {
+                if (folderMap.has(folderPathKey)) {
+                  targetFolderId = folderMap.get(folderPathKey)!
+                } else {
                   let parentId = importFolder.id
-
                   for (let i = 0; i < workflow.folderPath.length; i++) {
                     const pathSegment = workflow.folderPath.slice(0, i + 1).join('/')
+                    const folderNameForSegment = workflow.folderPath[i]
 
                     if (!folderMap.has(pathSegment)) {
                       const subFolder = await createFolderMutation.mutateAsync({
-                        name: workflow.folderPath[i],
+                        name: folderNameForSegment,
                         workspaceId,
                         parentId,
                       })
@@ -165,15 +218,15 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
                       parentId = folderMap.get(pathSegment)!
                     }
                   }
+                  targetFolderId = folderMap.get(folderPathKey)!
                 }
-
-                targetFolderId = folderMap.get(folderPathKey)!
               }
 
               const workflowId = await importSingleWorkflow(
                 workflow.content,
                 workflow.name,
-                targetFolderId
+                targetFolderId,
+                workflow.sortOrder
               )
               if (workflowId) importedWorkflowIds.push(workflowId)
             } catch (error) {

apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workspace.ts

@@ -5,6 +5,7 @@ import {
   extractWorkflowName,
   extractWorkflowsFromZip,
   parseWorkflowJson,
+  sanitizePathSegment,
 } from '@/lib/workflows/operations/import-export'
 import { useCreateFolder } from '@/hooks/queries/folders'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
@@ -59,7 +60,7 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
         const createResponse = await fetch('/api/workspaces', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name: workspaceName }),
+          body: JSON.stringify({ name: workspaceName, skipDefaultWorkflow: true }),
         })
 
         if (!createResponse.ok) {
@@ -71,6 +72,55 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
 
         const folderMap = new Map<string, string>()
 
+        if (metadata?.folders && metadata.folders.length > 0) {
+          type ExportedFolder = {
+            id: string
+            name: string
+            parentId: string | null
+            sortOrder?: number
+          }
+          const foldersById = new Map<string, ExportedFolder>(
+            metadata.folders.map((f) => [f.id, f])
+          )
+          const oldIdToNewId = new Map<string, string>()
+
+          const buildPath = (folderId: string): string => {
+            const pathParts: string[] = []
+            let currentId: string | null = folderId
+            while (currentId && foldersById.has(currentId)) {
+              const folder: ExportedFolder = foldersById.get(currentId)!
+              pathParts.unshift(sanitizePathSegment(folder.name))
+              currentId = folder.parentId
+            }
+            return pathParts.join('/')
+          }
+
+          const createFolderRecursive = async (folder: ExportedFolder): Promise<string> => {
+            if (oldIdToNewId.has(folder.id)) {
+              return oldIdToNewId.get(folder.id)!
+            }
+
+            let parentId: string | undefined
+            if (folder.parentId && foldersById.has(folder.parentId)) {
+              parentId = await createFolderRecursive(foldersById.get(folder.parentId)!)
+            }
+
+            const newFolder = await createFolderMutation.mutateAsync({
+              name: folder.name,
+              workspaceId: newWorkspace.id,
+              parentId,
+              sortOrder: folder.sortOrder,
+            })
+            oldIdToNewId.set(folder.id, newFolder.id)
+            folderMap.set(buildPath(folder.id), newFolder.id)
+            return newFolder.id
+          }
+
+          for (const folder of metadata.folders) {
+            await createFolderRecursive(folder)
+          }
+        }
+
         for (const workflow of extractedWorkflows) {
           try {
             const { data: workflowData, errors: parseErrors } = parseWorkflowJson(workflow.content)
@@ -84,9 +134,10 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
             if (workflow.folderPath.length > 0) {
               const folderPathKey = workflow.folderPath.join('/')
 
-              if (!folderMap.has(folderPathKey)) {
-                let parentId: string | null = null
-
+              if (folderMap.has(folderPathKey)) {
+                targetFolderId = folderMap.get(folderPathKey)!
+              } else {
+                let parentId: string | undefined
                 for (let i = 0; i < workflow.folderPath.length; i++) {
                   const pathSegment = workflow.folderPath.slice(0, i + 1).join('/')
 
@@ -94,7 +145,7 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
                     const subFolder = await createFolderMutation.mutateAsync({
                       name: workflow.folderPath[i],
                       workspaceId: newWorkspace.id,
-                      parentId: parentId || undefined,
+                      parentId,
                     })
                     folderMap.set(pathSegment, subFolder.id)
                     parentId = subFolder.id
@@ -102,9 +153,8 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
                     parentId = folderMap.get(pathSegment)!
                   }
                 }
+                targetFolderId = folderMap.get(folderPathKey) || null
               }
-
-              targetFolderId = folderMap.get(folderPathKey) || null
             }
 
             const workflowName = extractWorkflowName(workflow.content, workflow.name)

apps/sim/blocks/types.ts

@@ -71,6 +71,9 @@ export type SubBlockType =
   | 'mcp-dynamic-args' // MCP dynamic arguments based on tool schema
   | 'input-format' // Input structure format
   | 'response-format' // Response structure format
+  /**
+   * @deprecated Legacy trigger save subblock type.
+   */
   | 'trigger-save' // Trigger save button with validation
   | 'file-upload' // File uploader
   | 'input-mapping' // Map parent variables to child workflow input schema

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()
           }

apps/sim/hooks/queries/folders.ts

@@ -68,6 +68,7 @@ interface CreateFolderVariables {
   name: string
   parentId?: string
   color?: string
+  sortOrder?: number
 }
 
 interface UpdateFolderVariables {
@@ -160,18 +161,20 @@ export function useCreateFolder() {
       parentId: variables.parentId || null,
       color: variables.color || '#808080',
       isExpanded: false,
-      sortOrder: getNextSortOrder(previousFolders, variables.workspaceId, variables.parentId),
+      sortOrder:
+        variables.sortOrder ??
+        getNextSortOrder(previousFolders, variables.workspaceId, variables.parentId),
       createdAt: new Date(),
       updatedAt: new Date(),
     })
   )
 
   return useMutation({
-    mutationFn: async ({ workspaceId, ...payload }: CreateFolderVariables) => {
+    mutationFn: async ({ workspaceId, sortOrder, ...payload }: CreateFolderVariables) => {
       const response = await fetch('/api/folders', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ...payload, workspaceId }),
+        body: JSON.stringify({ ...payload, workspaceId, sortOrder }),
       })
 
       if (!response.ok) {
@@ -285,9 +288,66 @@ export function useDuplicateFolderMutation() {
     },
     ...handlers,
     onSettled: (_data, _error, variables) => {
-      // Invalidate both folders and workflows (duplicated folder may contain workflows)
       queryClient.invalidateQueries({ queryKey: folderKeys.list(variables.workspaceId) })
       queryClient.invalidateQueries({ queryKey: workflowKeys.list(variables.workspaceId) })
     },
   })
 }
+
+interface ReorderFoldersVariables {
+  workspaceId: string
+  updates: Array<{
+    id: string
+    sortOrder: number
+    parentId?: string | null
+  }>
+}
+
+export function useReorderFolders() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (variables: ReorderFoldersVariables): Promise<void> => {
+      const response = await fetch('/api/folders/reorder', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(variables),
+      })
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}))
+        throw new Error(error.error || 'Failed to reorder folders')
+      }
+    },
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({ queryKey: folderKeys.list(variables.workspaceId) })
+
+      const snapshot = { ...useFolderStore.getState().folders }
+
+      useFolderStore.setState((state) => {
+        const updated = { ...state.folders }
+        for (const update of variables.updates) {
+          if (updated[update.id]) {
+            updated[update.id] = {
+              ...updated[update.id],
+              sortOrder: update.sortOrder,
+              parentId:
+                update.parentId !== undefined ? update.parentId : updated[update.id].parentId,
+            }
+          }
+        }
+        return { folders: updated }
+      })
+
+      return { snapshot }
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.snapshot) {
+        useFolderStore.setState({ folders: context.snapshot })
+      }
+    },
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: folderKeys.list(variables.workspaceId) })
+    },
+  })
+}

apps/sim/hooks/queries/workflows.ts

@@ -32,6 +32,7 @@ function mapWorkflow(workflow: any): WorkflowMetadata {
     color: workflow.color,
     workspaceId: workflow.workspaceId,
     folderId: workflow.folderId,
+    sortOrder: workflow.sortOrder ?? 0,
     createdAt: new Date(workflow.createdAt),
     lastModified: new Date(workflow.updatedAt || workflow.createdAt),
   }
@@ -91,6 +92,7 @@ interface CreateWorkflowVariables {
   description?: string
   color?: string
   folderId?: string | null
+  sortOrder?: number
 }
 
 interface CreateWorkflowResult {
@@ -100,6 +102,7 @@ interface CreateWorkflowResult {
   color: string
   workspaceId: string
   folderId?: string | null
+  sortOrder: number
 }
 
 interface DuplicateWorkflowVariables {
@@ -118,6 +121,7 @@ interface DuplicateWorkflowResult {
   color: string
   workspaceId: string
   folderId?: string | null
+  sortOrder: number
   blocksCount: number
   edgesCount: number
   subflowsCount: number
@@ -161,6 +165,7 @@ function createWorkflowMutationHandlers<TVariables extends { workspaceId: string
               color: data.color,
               workspaceId: data.workspaceId,
               folderId: data.folderId,
+              sortOrder: 'sortOrder' in data ? data.sortOrder : 0,
             },
           },
           error: null,
@@ -179,21 +184,36 @@ export function useCreateWorkflow() {
   const handlers = createWorkflowMutationHandlers<CreateWorkflowVariables>(
     queryClient,
     'CreateWorkflow',
-    (variables, tempId) => ({
-      id: tempId,
-      name: variables.name || generateCreativeWorkflowName(),
-      lastModified: new Date(),
-      createdAt: new Date(),
-      description: variables.description || 'New workflow',
-      color: variables.color || getNextWorkflowColor(),
-      workspaceId: variables.workspaceId,
-      folderId: variables.folderId || null,
-    })
+    (variables, tempId) => {
+      let sortOrder: number
+      if (variables.sortOrder !== undefined) {
+        sortOrder = variables.sortOrder
+      } else {
+        const currentWorkflows = useWorkflowRegistry.getState().workflows
+        const targetFolderId = variables.folderId || null
+        const workflowsInFolder = Object.values(currentWorkflows).filter(
+          (w) => w.folderId === targetFolderId
+        )
+        sortOrder = workflowsInFolder.reduce((max, w) => Math.max(max, w.sortOrder ?? 0), -1) + 1
+      }
+
+      return {
+        id: tempId,
+        name: variables.name || generateCreativeWorkflowName(),
+        lastModified: new Date(),
+        createdAt: new Date(),
+        description: variables.description || 'New workflow',
+        color: variables.color || getNextWorkflowColor(),
+        workspaceId: variables.workspaceId,
+        folderId: variables.folderId || null,
+        sortOrder,
+      }
+    }
   )
 
   return useMutation({
     mutationFn: async (variables: CreateWorkflowVariables): Promise<CreateWorkflowResult> => {
-      const { workspaceId, name, description, color, folderId } = variables
+      const { workspaceId, name, description, color, folderId, sortOrder } = variables
 
       logger.info(`Creating new workflow in workspace: ${workspaceId}`)
 
@@ -206,6 +226,7 @@ export function useCreateWorkflow() {
           color: color || getNextWorkflowColor(),
           workspaceId,
           folderId: folderId || null,
+          sortOrder,
         }),
       })
 
@@ -243,13 +264,13 @@ export function useCreateWorkflow() {
         color: createdWorkflow.color,
         workspaceId,
         folderId: createdWorkflow.folderId,
+        sortOrder: createdWorkflow.sortOrder ?? 0,
       }
     },
     ...handlers,
     onSuccess: (data, variables, context) => {
       handlers.onSuccess(data, variables, context)
 
-      // Initialize subblock values for new workflow
       const { subBlockValues } = buildDefaultWorkflowArtifacts()
       useSubBlockStore.setState((state) => ({
         workflowValues: {
@@ -267,16 +288,26 @@ export function useDuplicateWorkflowMutation() {
   const handlers = createWorkflowMutationHandlers<DuplicateWorkflowVariables>(
     queryClient,
     'DuplicateWorkflow',
-    (variables, tempId) => ({
-      id: tempId,
-      name: variables.name,
-      lastModified: new Date(),
-      createdAt: new Date(),
-      description: variables.description,
-      color: variables.color,
-      workspaceId: variables.workspaceId,
-      folderId: variables.folderId || null,
-    })
+    (variables, tempId) => {
+      const currentWorkflows = useWorkflowRegistry.getState().workflows
+      const targetFolderId = variables.folderId || null
+      const workflowsInFolder = Object.values(currentWorkflows).filter(
+        (w) => w.folderId === targetFolderId
+      )
+      const maxSortOrder = workflowsInFolder.reduce((max, w) => Math.max(max, w.sortOrder ?? 0), -1)
+
+      return {
+        id: tempId,
+        name: variables.name,
+        lastModified: new Date(),
+        createdAt: new Date(),
+        description: variables.description,
+        color: variables.color,
+        workspaceId: variables.workspaceId,
+        folderId: targetFolderId,
+        sortOrder: maxSortOrder + 1,
+      }
+    }
   )
 
   return useMutation({
@@ -317,6 +348,7 @@ export function useDuplicateWorkflowMutation() {
         color: duplicatedWorkflow.color || color,
         workspaceId,
         folderId: duplicatedWorkflow.folderId ?? folderId,
+        sortOrder: duplicatedWorkflow.sortOrder ?? 0,
         blocksCount: duplicatedWorkflow.blocksCount || 0,
         edgesCount: duplicatedWorkflow.edgesCount || 0,
         subflowsCount: duplicatedWorkflow.subflowsCount || 0,
@@ -398,3 +430,61 @@ export function useRevertToVersion() {
     },
   })
 }
+
+interface ReorderWorkflowsVariables {
+  workspaceId: string
+  updates: Array<{
+    id: string
+    sortOrder: number
+    folderId?: string | null
+  }>
+}
+
+export function useReorderWorkflows() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (variables: ReorderWorkflowsVariables): Promise<void> => {
+      const response = await fetch('/api/workflows/reorder', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(variables),
+      })
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}))
+        throw new Error(error.error || 'Failed to reorder workflows')
+      }
+    },
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({ queryKey: workflowKeys.list(variables.workspaceId) })
+
+      const snapshot = { ...useWorkflowRegistry.getState().workflows }
+
+      useWorkflowRegistry.setState((state) => {
+        const updated = { ...state.workflows }
+        for (const update of variables.updates) {
+          if (updated[update.id]) {
+            updated[update.id] = {
+              ...updated[update.id],
+              sortOrder: update.sortOrder,
+              folderId:
+                update.folderId !== undefined ? update.folderId : updated[update.id].folderId,
+            }
+          }
+        }
+        return { workflows: updated }
+      })
+
+      return { snapshot }
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.snapshot) {
+        useWorkflowRegistry.setState({ workflows: context.snapshot })
+      }
+    },
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: workflowKeys.list(variables.workspaceId) })
+    },
+  })
+}

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

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
  */

apps/sim/lib/webhooks/deploy.ts

@@ -0,0 +1,525 @@
+import { db } from '@sim/db'
+import { webhook } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { and, eq } from 'drizzle-orm'
+import { nanoid } from 'nanoid'
+import type { NextRequest } from 'next/server'
+import { getProviderIdFromServiceId } from '@/lib/oauth'
+import {
+  cleanupExternalWebhook,
+  createExternalWebhookSubscription,
+  shouldRecreateExternalWebhookSubscription,
+} from '@/lib/webhooks/provider-subscriptions'
+import {
+  configureGmailPolling,
+  configureOutlookPolling,
+  syncWebhooksForCredentialSet,
+} from '@/lib/webhooks/utils.server'
+import { getBlock } from '@/blocks'
+import type { SubBlockConfig } from '@/blocks/types'
+import type { BlockState } from '@/stores/workflows/workflow/types'
+import { getTrigger, isTriggerValid } from '@/triggers'
+import { SYSTEM_SUBBLOCK_IDS } from '@/triggers/constants'
+
+const logger = createLogger('DeployWebhookSync')
+const CREDENTIAL_SET_PREFIX = 'credentialSet:'
+
+interface TriggerSaveError {
+  message: string
+  status: number
+}
+
+interface TriggerSaveResult {
+  success: boolean
+  error?: TriggerSaveError
+}
+
+interface SaveTriggerWebhooksInput {
+  request: NextRequest
+  workflowId: string
+  workflow: Record<string, unknown>
+  userId: string
+  blocks: Record<string, BlockState>
+  requestId: string
+}
+
+function getSubBlockValue(block: BlockState, subBlockId: string): unknown {
+  return block.subBlocks?.[subBlockId]?.value
+}
+
+function isFieldRequired(
+  config: SubBlockConfig,
+  subBlockValues: Record<string, { value?: unknown }>
+): boolean {
+  if (!config.required) return false
+  if (typeof config.required === 'boolean') return config.required
+
+  const evalCond = (
+    cond: {
+      field: string
+      value: string | number | boolean | Array<string | number | boolean>
+      not?: boolean
+      and?: {
+        field: string
+        value: string | number | boolean | Array<string | number | boolean> | undefined
+        not?: boolean
+      }
+    },
+    values: Record<string, { value?: unknown }>
+  ): boolean => {
+    const fieldValue = values[cond.field]?.value
+    const condValue = cond.value
+
+    let match = Array.isArray(condValue)
+      ? condValue.includes(fieldValue as string | number | boolean)
+      : fieldValue === condValue
+
+    if (cond.not) match = !match
+
+    if (cond.and) {
+      const andFieldValue = values[cond.and.field]?.value
+      const andCondValue = cond.and.value
+      let andMatch = Array.isArray(andCondValue)
+        ? (andCondValue || []).includes(andFieldValue as string | number | boolean)
+        : andFieldValue === andCondValue
+      if (cond.and.not) andMatch = !andMatch
+      match = match && andMatch
+    }
+
+    return match
+  }
+
+  const condition = typeof config.required === 'function' ? config.required() : config.required
+  return evalCond(condition, subBlockValues)
+}
+
+function resolveTriggerId(block: BlockState): string | undefined {
+  const selectedTriggerId = getSubBlockValue(block, 'selectedTriggerId')
+  if (typeof selectedTriggerId === 'string' && isTriggerValid(selectedTriggerId)) {
+    return selectedTriggerId
+  }
+
+  const storedTriggerId = getSubBlockValue(block, 'triggerId')
+  if (typeof storedTriggerId === 'string' && isTriggerValid(storedTriggerId)) {
+    return storedTriggerId
+  }
+
+  const blockConfig = getBlock(block.type)
+  if (blockConfig?.category === 'triggers' && isTriggerValid(block.type)) {
+    return block.type
+  }
+
+  if (block.triggerMode && blockConfig?.triggers?.enabled) {
+    const configuredTriggerId =
+      typeof selectedTriggerId === 'string' ? selectedTriggerId : undefined
+    if (configuredTriggerId && isTriggerValid(configuredTriggerId)) {
+      return configuredTriggerId
+    }
+
+    const available = blockConfig.triggers?.available?.[0]
+    if (available && isTriggerValid(available)) {
+      return available
+    }
+  }
+
+  return undefined
+}
+
+function getConfigValue(block: BlockState, subBlock: SubBlockConfig): unknown {
+  const fieldValue = getSubBlockValue(block, subBlock.id)
+
+  if (
+    (fieldValue === null || fieldValue === undefined || fieldValue === '') &&
+    Boolean(subBlock.required) &&
+    subBlock.defaultValue !== undefined
+  ) {
+    return subBlock.defaultValue
+  }
+
+  return fieldValue
+}
+
+function buildProviderConfig(
+  block: BlockState,
+  triggerId: string,
+  triggerDef: { subBlocks: SubBlockConfig[] }
+): {
+  providerConfig: Record<string, unknown>
+  missingFields: string[]
+  credentialId?: string
+  credentialSetId?: string
+  triggerPath: string
+} {
+  const triggerConfigValue = getSubBlockValue(block, 'triggerConfig')
+  const baseConfig =
+    triggerConfigValue && typeof triggerConfigValue === 'object'
+      ? (triggerConfigValue as Record<string, unknown>)
+      : {}
+
+  const providerConfig: Record<string, unknown> = { ...baseConfig }
+  const missingFields: string[] = []
+  const subBlockValues = Object.fromEntries(
+    Object.entries(block.subBlocks || {}).map(([key, value]) => [key, { value: value.value }])
+  )
+
+  triggerDef.subBlocks
+    .filter((subBlock) => subBlock.mode === 'trigger' && !SYSTEM_SUBBLOCK_IDS.includes(subBlock.id))
+    .forEach((subBlock) => {
+      const valueToUse = getConfigValue(block, subBlock)
+      if (valueToUse !== null && valueToUse !== undefined && valueToUse !== '') {
+        providerConfig[subBlock.id] = valueToUse
+      } else if (isFieldRequired(subBlock, subBlockValues)) {
+        missingFields.push(subBlock.title || subBlock.id)
+      }
+    })
+
+  const credentialConfig = triggerDef.subBlocks.find(
+    (subBlock) => subBlock.id === 'triggerCredentials'
+  )
+  const triggerCredentials = getSubBlockValue(block, 'triggerCredentials')
+  if (
+    credentialConfig &&
+    isFieldRequired(credentialConfig, subBlockValues) &&
+    !triggerCredentials
+  ) {
+    missingFields.push(credentialConfig.title || 'Credentials')
+  }
+
+  let credentialId: string | undefined
+  let credentialSetId: string | undefined
+  if (typeof triggerCredentials === 'string' && triggerCredentials.length > 0) {
+    if (triggerCredentials.startsWith(CREDENTIAL_SET_PREFIX)) {
+      credentialSetId = triggerCredentials.slice(CREDENTIAL_SET_PREFIX.length)
+      providerConfig.credentialSetId = credentialSetId
+    } else {
+      credentialId = triggerCredentials
+      providerConfig.credentialId = credentialId
+    }
+  }
+
+  providerConfig.triggerId = triggerId
+
+  const triggerPathValue = getSubBlockValue(block, 'triggerPath')
+  const triggerPath =
+    typeof triggerPathValue === 'string' && triggerPathValue.length > 0
+      ? triggerPathValue
+      : block.id
+
+  return { providerConfig, missingFields, credentialId, credentialSetId, triggerPath }
+}
+
+async function configurePollingIfNeeded(
+  provider: string,
+  savedWebhook: any,
+  requestId: string
+): Promise<TriggerSaveError | null> {
+  if (provider === 'gmail') {
+    const success = await configureGmailPolling(savedWebhook, requestId)
+    if (!success) {
+      await db.delete(webhook).where(eq(webhook.id, savedWebhook.id))
+      return {
+        message: 'Failed to configure Gmail polling. Please check your Gmail account permissions.',
+        status: 500,
+      }
+    }
+  }
+
+  if (provider === 'outlook') {
+    const success = await configureOutlookPolling(savedWebhook, requestId)
+    if (!success) {
+      await db.delete(webhook).where(eq(webhook.id, savedWebhook.id))
+      return {
+        message:
+          'Failed to configure Outlook polling. Please check your Outlook account permissions.',
+        status: 500,
+      }
+    }
+  }
+
+  return null
+}
+
+async function syncCredentialSetWebhooks(params: {
+  workflowId: string
+  blockId: string
+  provider: string
+  triggerPath: string
+  providerConfig: Record<string, unknown>
+  requestId: string
+}): Promise<TriggerSaveError | null> {
+  const { workflowId, blockId, provider, triggerPath, providerConfig, requestId } = params
+
+  const credentialSetId = providerConfig.credentialSetId as string | undefined
+  if (!credentialSetId) {
+    return null
+  }
+
+  const oauthProviderId = getProviderIdFromServiceId(provider)
+
+  const { credentialId: _cId, credentialSetId: _csId, userId: _uId, ...baseConfig } = providerConfig
+
+  const syncResult = await syncWebhooksForCredentialSet({
+    workflowId,
+    blockId,
+    provider,
+    basePath: triggerPath,
+    credentialSetId,
+    oauthProviderId,
+    providerConfig: baseConfig as Record<string, any>,
+    requestId,
+  })
+
+  if (syncResult.webhooks.length === 0) {
+    return {
+      message: `No valid credentials found in credential set for ${provider}. Please connect accounts and try again.`,
+      status: 400,
+    }
+  }
+
+  if (provider === 'gmail' || provider === 'outlook') {
+    const configureFunc = provider === 'gmail' ? configureGmailPolling : configureOutlookPolling
+    for (const wh of syncResult.webhooks) {
+      if (wh.isNew) {
+        const rows = await db.select().from(webhook).where(eq(webhook.id, wh.id)).limit(1)
+        if (rows.length > 0) {
+          const success = await configureFunc(rows[0], requestId)
+          if (!success) {
+            await db.delete(webhook).where(eq(webhook.id, wh.id))
+            return {
+              message: `Failed to configure ${provider} polling. Please check account permissions.`,
+              status: 500,
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+async function upsertSingleWebhook(params: {
+  request: NextRequest
+  workflowId: string
+  workflow: Record<string, unknown>
+  userId: string
+  block: BlockState
+  provider: string
+  providerConfig: Record<string, unknown>
+  triggerPath: string
+  requestId: string
+}): Promise<TriggerSaveError | null> {
+  const {
+    request,
+    workflowId,
+    workflow,
+    userId,
+    block,
+    provider,
+    providerConfig,
+    triggerPath,
+    requestId,
+  } = params
+
+  const existingWebhooks = await db
+    .select()
+    .from(webhook)
+    .where(and(eq(webhook.workflowId, workflowId), eq(webhook.blockId, block.id)))
+    .limit(1)
+
+  const existing = existingWebhooks[0]
+  if (existing) {
+    const existingConfig = (existing.providerConfig as Record<string, unknown>) || {}
+    let nextProviderConfig = providerConfig
+
+    if (
+      shouldRecreateExternalWebhookSubscription({
+        previousProvider: existing.provider as string,
+        nextProvider: provider,
+        previousConfig: existingConfig,
+        nextConfig: nextProviderConfig,
+      })
+    ) {
+      await cleanupExternalWebhook(existing, workflow, requestId)
+      const result = await createExternalWebhookSubscription(
+        request,
+        {
+          ...existing,
+          provider,
+          path: triggerPath,
+          providerConfig: nextProviderConfig,
+        },
+        workflow,
+        userId,
+        requestId
+      )
+      nextProviderConfig = result.updatedProviderConfig as Record<string, unknown>
+    }
+
+    const finalProviderConfig = {
+      ...nextProviderConfig,
+      credentialId: existingConfig.credentialId,
+      credentialSetId: existingConfig.credentialSetId,
+      userId: existingConfig.userId,
+      historyId: existingConfig.historyId,
+      lastCheckedTimestamp: existingConfig.lastCheckedTimestamp,
+      setupCompleted: existingConfig.setupCompleted,
+      externalId: nextProviderConfig.externalId ?? existingConfig.externalId,
+    }
+
+    await db
+      .update(webhook)
+      .set({
+        path: triggerPath,
+        provider,
+        providerConfig: finalProviderConfig,
+        isActive: true,
+        updatedAt: new Date(),
+      })
+      .where(eq(webhook.id, existing.id))
+
+    return null
+  }
+
+  const webhookId = nanoid()
+  const createPayload = {
+    id: webhookId,
+    path: triggerPath,
+    provider,
+    providerConfig,
+  }
+
+  const result = await createExternalWebhookSubscription(
+    request,
+    createPayload,
+    workflow,
+    userId,
+    requestId
+  )
+
+  const updatedProviderConfig = result.updatedProviderConfig as Record<string, unknown>
+  let savedWebhook: any
+
+  try {
+    const createdRows = await db
+      .insert(webhook)
+      .values({
+        id: webhookId,
+        workflowId,
+        blockId: block.id,
+        path: triggerPath,
+        provider,
+        providerConfig: updatedProviderConfig,
+        credentialSetId: (updatedProviderConfig.credentialSetId as string | undefined) || null,
+        isActive: true,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      })
+      .returning()
+    savedWebhook = createdRows[0]
+  } catch (error) {
+    if (result.externalSubscriptionCreated) {
+      await cleanupExternalWebhook(createPayload, workflow, requestId)
+    }
+    throw error
+  }
+
+  const pollingError = await configurePollingIfNeeded(provider, savedWebhook, requestId)
+  if (pollingError) {
+    return pollingError
+  }
+
+  return null
+}
+
+/**
+ * Saves trigger webhook configurations as part of workflow deployment.
+ */
+export async function saveTriggerWebhooksForDeploy({
+  request,
+  workflowId,
+  workflow,
+  userId,
+  blocks,
+  requestId,
+}: SaveTriggerWebhooksInput): Promise<TriggerSaveResult> {
+  const triggerBlocks = Object.values(blocks || {}).filter(Boolean)
+
+  if (triggerBlocks.length === 0) {
+    return { success: true }
+  }
+
+  for (const block of triggerBlocks) {
+    const triggerId = resolveTriggerId(block)
+    if (!triggerId) continue
+
+    if (!isTriggerValid(triggerId)) {
+      continue
+    }
+
+    const triggerDef = getTrigger(triggerId)
+    const provider = triggerDef.provider
+
+    const { providerConfig, missingFields, triggerPath } = buildProviderConfig(
+      block,
+      triggerId,
+      triggerDef
+    )
+
+    if (missingFields.length > 0) {
+      return {
+        success: false,
+        error: {
+          message: `Missing required fields for ${triggerDef.name || triggerId}: ${missingFields.join(', ')}`,
+          status: 400,
+        },
+      }
+    }
+
+    try {
+      const credentialSetError = await syncCredentialSetWebhooks({
+        workflowId,
+        blockId: block.id,
+        provider,
+        triggerPath,
+        providerConfig,
+        requestId,
+      })
+
+      if (credentialSetError) {
+        return { success: false, error: credentialSetError }
+      }
+
+      if (providerConfig.credentialSetId) {
+        continue
+      }
+
+      const upsertError = await upsertSingleWebhook({
+        request,
+        workflowId,
+        workflow,
+        userId,
+        block,
+        provider,
+        providerConfig,
+        triggerPath,
+        requestId,
+      })
+
+      if (upsertError) {
+        return { success: false, error: upsertError }
+      }
+    } catch (error: any) {
+      logger.error(`[${requestId}] Failed to save trigger config for ${block.id}`, error)
+      return {
+        success: false,
+        error: {
+          message: error?.message || 'Failed to save trigger configuration',
+          status: 500,
+        },
+      }
+    }
+  }
+
+  return { success: true }
+}

apps/sim/lib/webhooks/provider-subscriptions.ts

@@ -10,6 +10,7 @@ const typeformLogger = createLogger('TypeformWebhook')
 const calendlyLogger = createLogger('CalendlyWebhook')
 const grainLogger = createLogger('GrainWebhook')
 const lemlistLogger = createLogger('LemlistWebhook')
+const webflowLogger = createLogger('WebflowWebhook')
 
 function getProviderConfig(webhook: any): Record<string, any> {
   return (webhook.providerConfig as Record<string, any>) || {}
@@ -760,6 +761,775 @@ export async function deleteLemlistWebhook(webhook: any, requestId: string): Pro
   }
 }
 
+export async function deleteWebflowWebhook(
+  webhook: any,
+  workflow: any,
+  requestId: string
+): Promise<void> {
+  try {
+    const config = getProviderConfig(webhook)
+    const siteId = config.siteId as string | undefined
+    const externalId = config.externalId as string | undefined
+
+    if (!siteId) {
+      webflowLogger.warn(
+        `[${requestId}] Missing siteId for Webflow webhook deletion ${webhook.id}, skipping cleanup`
+      )
+      return
+    }
+
+    if (!externalId) {
+      webflowLogger.warn(
+        `[${requestId}] Missing externalId for Webflow webhook deletion ${webhook.id}, skipping cleanup`
+      )
+      return
+    }
+
+    const accessToken = await getOAuthToken(workflow.userId, 'webflow')
+    if (!accessToken) {
+      webflowLogger.warn(
+        `[${requestId}] Could not retrieve Webflow access token for user ${workflow.userId}. Cannot delete webhook.`,
+        { webhookId: webhook.id }
+      )
+      return
+    }
+
+    const webflowApiUrl = `https://api.webflow.com/v2/sites/${siteId}/webhooks/${externalId}`
+
+    const webflowResponse = await fetch(webflowApiUrl, {
+      method: 'DELETE',
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        accept: 'application/json',
+      },
+    })
+
+    if (!webflowResponse.ok && webflowResponse.status !== 404) {
+      const responseBody = await webflowResponse.json().catch(() => ({}))
+      webflowLogger.warn(
+        `[${requestId}] Failed to delete Webflow webhook (non-fatal): ${webflowResponse.status}`,
+        { response: responseBody }
+      )
+    } else {
+      webflowLogger.info(`[${requestId}] Successfully deleted Webflow webhook ${externalId}`)
+    }
+  } catch (error) {
+    webflowLogger.warn(`[${requestId}] Error deleting Webflow webhook (non-fatal)`, error)
+  }
+}
+
+export async function createGrainWebhookSubscription(
+  _request: NextRequest,
+  webhookData: any,
+  requestId: string
+): Promise<{ id: string; eventTypes: string[] } | undefined> {
+  try {
+    const { path, providerConfig } = webhookData
+    const { apiKey, triggerId, includeHighlights, includeParticipants, includeAiSummary } =
+      providerConfig || {}
+
+    if (!apiKey) {
+      grainLogger.warn(`[${requestId}] Missing apiKey for Grain webhook creation.`, {
+        webhookId: webhookData.id,
+      })
+      throw new Error(
+        'Grain API Key is required. Please provide your Grain Personal Access Token in the trigger configuration.'
+      )
+    }
+
+    const hookTypeMap: Record<string, string> = {
+      grain_webhook: 'recording_added',
+      grain_recording_created: 'recording_added',
+      grain_recording_updated: 'recording_added',
+      grain_highlight_created: 'recording_added',
+      grain_highlight_updated: 'recording_added',
+      grain_story_created: 'recording_added',
+      grain_upload_status: 'upload_status',
+    }
+
+    const eventTypeMap: Record<string, string[]> = {
+      grain_webhook: [],
+      grain_recording_created: ['recording_added'],
+      grain_recording_updated: ['recording_updated'],
+      grain_highlight_created: ['highlight_created'],
+      grain_highlight_updated: ['highlight_updated'],
+      grain_story_created: ['story_created'],
+      grain_upload_status: ['upload_status'],
+    }
+
+    const hookType = hookTypeMap[triggerId] ?? 'recording_added'
+    const eventTypes = eventTypeMap[triggerId] ?? []
+
+    if (!hookTypeMap[triggerId]) {
+      grainLogger.warn(
+        `[${requestId}] Unknown triggerId for Grain: ${triggerId}, defaulting to recording_added`,
+        {
+          webhookId: webhookData.id,
+        }
+      )
+    }
+
+    grainLogger.info(`[${requestId}] Creating Grain webhook`, {
+      triggerId,
+      hookType,
+      eventTypes,
+      webhookId: webhookData.id,
+    })
+
+    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
+
+    const grainApiUrl = 'https://api.grain.com/_/public-api/v2/hooks/create'
+
+    const requestBody: Record<string, any> = {
+      hook_url: notificationUrl,
+      hook_type: hookType,
+    }
+
+    const include: Record<string, boolean> = {}
+    if (includeHighlights) {
+      include.highlights = true
+    }
+    if (includeParticipants) {
+      include.participants = true
+    }
+    if (includeAiSummary) {
+      include.ai_summary = true
+    }
+    if (Object.keys(include).length > 0) {
+      requestBody.include = include
+    }
+
+    const grainResponse = await fetch(grainApiUrl, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        'Content-Type': 'application/json',
+        'Public-Api-Version': '2025-10-31',
+      },
+      body: JSON.stringify(requestBody),
+    })
+
+    const responseBody = await grainResponse.json()
+
+    if (!grainResponse.ok || responseBody.error || responseBody.errors) {
+      const errorMessage =
+        responseBody.errors?.detail ||
+        responseBody.error?.message ||
+        responseBody.error ||
+        responseBody.message ||
+        'Unknown Grain API error'
+      grainLogger.error(
+        `[${requestId}] Failed to create webhook in Grain for webhook ${webhookData.id}. Status: ${grainResponse.status}`,
+        { message: errorMessage, response: responseBody }
+      )
+
+      let userFriendlyMessage = 'Failed to create webhook subscription in Grain'
+      if (grainResponse.status === 401) {
+        userFriendlyMessage =
+          'Invalid Grain API Key. Please verify your Personal Access Token is correct.'
+      } else if (grainResponse.status === 403) {
+        userFriendlyMessage =
+          'Access denied. Please ensure your Grain API Key has appropriate permissions.'
+      } else if (errorMessage && errorMessage !== 'Unknown Grain API error') {
+        userFriendlyMessage = `Grain error: ${errorMessage}`
+      }
+
+      throw new Error(userFriendlyMessage)
+    }
+
+    grainLogger.info(
+      `[${requestId}] Successfully created webhook in Grain for webhook ${webhookData.id}.`,
+      {
+        grainWebhookId: responseBody.id,
+        eventTypes,
+      }
+    )
+
+    return { id: responseBody.id, eventTypes }
+  } catch (error: any) {
+    grainLogger.error(
+      `[${requestId}] Exception during Grain webhook creation for webhook ${webhookData.id}.`,
+      {
+        message: error.message,
+        stack: error.stack,
+      }
+    )
+    throw error
+  }
+}
+
+export async function createLemlistWebhookSubscription(
+  webhookData: any,
+  requestId: string
+): Promise<{ id: string } | undefined> {
+  try {
+    const { path, providerConfig } = webhookData
+    const { apiKey, triggerId, campaignId } = providerConfig || {}
+
+    if (!apiKey) {
+      lemlistLogger.warn(`[${requestId}] Missing apiKey for Lemlist webhook creation.`, {
+        webhookId: webhookData.id,
+      })
+      throw new Error(
+        'Lemlist API Key is required. Please provide your Lemlist API Key in the trigger configuration.'
+      )
+    }
+
+    const eventTypeMap: Record<string, string | undefined> = {
+      lemlist_email_replied: 'emailsReplied',
+      lemlist_linkedin_replied: 'linkedinReplied',
+      lemlist_interested: 'interested',
+      lemlist_not_interested: 'notInterested',
+      lemlist_email_opened: 'emailsOpened',
+      lemlist_email_clicked: 'emailsClicked',
+      lemlist_email_bounced: 'emailsBounced',
+      lemlist_email_sent: 'emailsSent',
+      lemlist_webhook: undefined,
+    }
+
+    const eventType = eventTypeMap[triggerId]
+
+    lemlistLogger.info(`[${requestId}] Creating Lemlist webhook`, {
+      triggerId,
+      eventType,
+      hasCampaignId: !!campaignId,
+      webhookId: webhookData.id,
+    })
+
+    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
+
+    const lemlistApiUrl = 'https://api.lemlist.com/api/hooks'
+
+    const requestBody: Record<string, any> = {
+      targetUrl: notificationUrl,
+    }
+
+    if (eventType) {
+      requestBody.type = eventType
+    }
+
+    if (campaignId) {
+      requestBody.campaignId = campaignId
+    }
+
+    const authString = Buffer.from(`:${apiKey}`).toString('base64')
+
+    const lemlistResponse = await fetch(lemlistApiUrl, {
+      method: 'POST',
+      headers: {
+        Authorization: `Basic ${authString}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    })
+
+    const responseBody = await lemlistResponse.json()
+
+    if (!lemlistResponse.ok || responseBody.error) {
+      const errorMessage = responseBody.message || responseBody.error || 'Unknown Lemlist API error'
+      lemlistLogger.error(
+        `[${requestId}] Failed to create webhook in Lemlist for webhook ${webhookData.id}. Status: ${lemlistResponse.status}`,
+        { message: errorMessage, response: responseBody }
+      )
+
+      let userFriendlyMessage = 'Failed to create webhook subscription in Lemlist'
+      if (lemlistResponse.status === 401) {
+        userFriendlyMessage = 'Invalid Lemlist API Key. Please verify your API Key is correct.'
+      } else if (lemlistResponse.status === 403) {
+        userFriendlyMessage =
+          'Access denied. Please ensure your Lemlist API Key has appropriate permissions.'
+      } else if (errorMessage && errorMessage !== 'Unknown Lemlist API error') {
+        userFriendlyMessage = `Lemlist error: ${errorMessage}`
+      }
+
+      throw new Error(userFriendlyMessage)
+    }
+
+    lemlistLogger.info(
+      `[${requestId}] Successfully created webhook in Lemlist for webhook ${webhookData.id}.`,
+      {
+        lemlistWebhookId: responseBody._id,
+      }
+    )
+
+    return { id: responseBody._id }
+  } catch (error: any) {
+    lemlistLogger.error(
+      `[${requestId}] Exception during Lemlist webhook creation for webhook ${webhookData.id}.`,
+      {
+        message: error.message,
+        stack: error.stack,
+      }
+    )
+    throw error
+  }
+}
+
+export async function createAirtableWebhookSubscription(
+  userId: string,
+  webhookData: any,
+  requestId: string
+): Promise<string | undefined> {
+  try {
+    const { path, providerConfig } = webhookData
+    const { baseId, tableId, includeCellValuesInFieldIds } = providerConfig || {}
+
+    if (!baseId || !tableId) {
+      airtableLogger.warn(
+        `[${requestId}] Missing baseId or tableId for Airtable webhook creation.`,
+        {
+          webhookId: webhookData.id,
+        }
+      )
+      throw new Error(
+        'Base ID and Table ID are required to create Airtable webhook. Please provide valid Airtable base and table IDs.'
+      )
+    }
+
+    const accessToken = await getOAuthToken(userId, 'airtable')
+    if (!accessToken) {
+      airtableLogger.warn(
+        `[${requestId}] Could not retrieve Airtable access token for user ${userId}. Cannot create webhook in Airtable.`
+      )
+      throw new Error(
+        'Airtable account connection required. Please connect your Airtable account in the trigger configuration and try again.'
+      )
+    }
+
+    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
+
+    const airtableApiUrl = `https://api.airtable.com/v0/bases/${baseId}/webhooks`
+
+    const specification: any = {
+      options: {
+        filters: {
+          dataTypes: ['tableData'],
+          recordChangeScope: tableId,
+        },
+      },
+    }
+
+    if (includeCellValuesInFieldIds === 'all') {
+      specification.options.includes = {
+        includeCellValuesInFieldIds: 'all',
+      }
+    }
+
+    const requestBody: any = {
+      notificationUrl: notificationUrl,
+      specification: specification,
+    }
+
+    const airtableResponse = await fetch(airtableApiUrl, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    })
+
+    const responseBody = await airtableResponse.json()
+
+    if (!airtableResponse.ok || responseBody.error) {
+      const errorMessage =
+        responseBody.error?.message || responseBody.error || 'Unknown Airtable API error'
+      const errorType = responseBody.error?.type
+      airtableLogger.error(
+        `[${requestId}] Failed to create webhook in Airtable for webhook ${webhookData.id}. Status: ${airtableResponse.status}`,
+        { type: errorType, message: errorMessage, response: responseBody }
+      )
+
+      let userFriendlyMessage = 'Failed to create webhook subscription in Airtable'
+      if (airtableResponse.status === 404) {
+        userFriendlyMessage =
+          'Airtable base or table not found. Please verify that the Base ID and Table ID are correct and that you have access to them.'
+      } else if (errorMessage && errorMessage !== 'Unknown Airtable API error') {
+        userFriendlyMessage = `Airtable error: ${errorMessage}`
+      }
+
+      throw new Error(userFriendlyMessage)
+    }
+    airtableLogger.info(
+      `[${requestId}] Successfully created webhook in Airtable for webhook ${webhookData.id}.`,
+      {
+        airtableWebhookId: responseBody.id,
+      }
+    )
+    return responseBody.id
+  } catch (error: any) {
+    airtableLogger.error(
+      `[${requestId}] Exception during Airtable webhook creation for webhook ${webhookData.id}.`,
+      {
+        message: error.message,
+        stack: error.stack,
+      }
+    )
+    throw error
+  }
+}
+
+export async function createCalendlyWebhookSubscription(
+  webhookData: any,
+  requestId: string
+): Promise<string | undefined> {
+  try {
+    const { path, providerConfig } = webhookData
+    const { apiKey, organization, triggerId } = providerConfig || {}
+
+    if (!apiKey) {
+      calendlyLogger.warn(`[${requestId}] Missing apiKey for Calendly webhook creation.`, {
+        webhookId: webhookData.id,
+      })
+      throw new Error(
+        'Personal Access Token is required to create Calendly webhook. Please provide your Calendly Personal Access Token.'
+      )
+    }
+
+    if (!organization) {
+      calendlyLogger.warn(
+        `[${requestId}] Missing organization URI for Calendly webhook creation.`,
+        {
+          webhookId: webhookData.id,
+        }
+      )
+      throw new Error(
+        'Organization URI is required to create Calendly webhook. Please provide your Organization URI from the "Get Current User" operation.'
+      )
+    }
+
+    if (!triggerId) {
+      calendlyLogger.warn(`[${requestId}] Missing triggerId for Calendly webhook creation.`, {
+        webhookId: webhookData.id,
+      })
+      throw new Error('Trigger ID is required to create Calendly webhook')
+    }
+
+    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
+
+    const eventTypeMap: Record<string, string[]> = {
+      calendly_invitee_created: ['invitee.created'],
+      calendly_invitee_canceled: ['invitee.canceled'],
+      calendly_routing_form_submitted: ['routing_form_submission.created'],
+      calendly_webhook: ['invitee.created', 'invitee.canceled', 'routing_form_submission.created'],
+    }
+
+    const events = eventTypeMap[triggerId] || ['invitee.created']
+
+    const calendlyApiUrl = 'https://api.calendly.com/webhook_subscriptions'
+
+    const requestBody = {
+      url: notificationUrl,
+      events,
+      organization,
+      scope: 'organization',
+    }
+
+    const calendlyResponse = await fetch(calendlyApiUrl, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    })
+
+    if (!calendlyResponse.ok) {
+      const errorBody = await calendlyResponse.json().catch(() => ({}))
+      const errorMessage = errorBody.message || errorBody.title || 'Unknown Calendly API error'
+      calendlyLogger.error(
+        `[${requestId}] Failed to create webhook in Calendly for webhook ${webhookData.id}. Status: ${calendlyResponse.status}`,
+        { response: errorBody }
+      )
+
+      let userFriendlyMessage = 'Failed to create webhook subscription in Calendly'
+      if (calendlyResponse.status === 401) {
+        userFriendlyMessage =
+          'Calendly authentication failed. Please verify your Personal Access Token is correct.'
+      } else if (calendlyResponse.status === 403) {
+        userFriendlyMessage =
+          'Calendly access denied. Please ensure you have appropriate permissions and a paid Calendly subscription.'
+      } else if (calendlyResponse.status === 404) {
+        userFriendlyMessage =
+          'Calendly organization not found. Please verify the Organization URI is correct.'
+      } else if (errorMessage && errorMessage !== 'Unknown Calendly API error') {
+        userFriendlyMessage = `Calendly error: ${errorMessage}`
+      }
+
+      throw new Error(userFriendlyMessage)
+    }
+
+    const responseBody = await calendlyResponse.json()
+    const webhookUri = responseBody.resource?.uri
+
+    if (!webhookUri) {
+      calendlyLogger.error(
+        `[${requestId}] Calendly webhook created but no webhook URI returned for webhook ${webhookData.id}`,
+        { response: responseBody }
+      )
+      throw new Error('Calendly webhook creation succeeded but no webhook URI was returned')
+    }
+
+    const webhookId = webhookUri.split('/').pop()
+
+    if (!webhookId) {
+      calendlyLogger.error(
+        `[${requestId}] Could not extract webhook ID from Calendly URI: ${webhookUri}`,
+        {
+          response: responseBody,
+        }
+      )
+      throw new Error('Failed to extract webhook ID from Calendly response')
+    }
+
+    calendlyLogger.info(
+      `[${requestId}] Successfully created webhook in Calendly for webhook ${webhookData.id}.`,
+      {
+        calendlyWebhookUri: webhookUri,
+        calendlyWebhookId: webhookId,
+      }
+    )
+    return webhookId
+  } catch (error: any) {
+    calendlyLogger.error(
+      `[${requestId}] Exception during Calendly webhook creation for webhook ${webhookData.id}.`,
+      {
+        message: error.message,
+        stack: error.stack,
+      }
+    )
+    throw error
+  }
+}
+
+export async function createWebflowWebhookSubscription(
+  userId: string,
+  webhookData: any,
+  requestId: string
+): Promise<string | undefined> {
+  try {
+    const { path, providerConfig } = webhookData
+    const { siteId, triggerId, collectionId, formId } = providerConfig || {}
+
+    if (!siteId) {
+      webflowLogger.warn(`[${requestId}] Missing siteId for Webflow webhook creation.`, {
+        webhookId: webhookData.id,
+      })
+      throw new Error('Site ID is required to create Webflow webhook')
+    }
+
+    if (!triggerId) {
+      webflowLogger.warn(`[${requestId}] Missing triggerId for Webflow webhook creation.`, {
+        webhookId: webhookData.id,
+      })
+      throw new Error('Trigger type is required to create Webflow webhook')
+    }
+
+    const accessToken = await getOAuthToken(userId, 'webflow')
+    if (!accessToken) {
+      webflowLogger.warn(
+        `[${requestId}] Could not retrieve Webflow access token for user ${userId}. Cannot create webhook in Webflow.`
+      )
+      throw new Error(
+        'Webflow account connection required. Please connect your Webflow account in the trigger configuration and try again.'
+      )
+    }
+
+    const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
+
+    const triggerTypeMap: Record<string, string> = {
+      webflow_collection_item_created: 'collection_item_created',
+      webflow_collection_item_changed: 'collection_item_changed',
+      webflow_collection_item_deleted: 'collection_item_deleted',
+      webflow_form_submission: 'form_submission',
+    }
+
+    const webflowTriggerType = triggerTypeMap[triggerId]
+    if (!webflowTriggerType) {
+      webflowLogger.warn(`[${requestId}] Invalid triggerId for Webflow: ${triggerId}`, {
+        webhookId: webhookData.id,
+      })
+      throw new Error(`Invalid Webflow trigger type: ${triggerId}`)
+    }
+
+    const webflowApiUrl = `https://api.webflow.com/v2/sites/${siteId}/webhooks`
+
+    const requestBody: any = {
+      triggerType: webflowTriggerType,
+      url: notificationUrl,
+    }
+
+    if (collectionId && webflowTriggerType.startsWith('collection_item_')) {
+      requestBody.filter = {
+        resource_type: 'collection',
+        resource_id: collectionId,
+      }
+    }
+
+    if (formId && webflowTriggerType === 'form_submission') {
+      requestBody.filter = {
+        resource_type: 'form',
+        resource_id: formId,
+      }
+    }
+
+    const webflowResponse = await fetch(webflowApiUrl, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+        accept: 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    })
+
+    const responseBody = await webflowResponse.json()
+
+    if (!webflowResponse.ok || responseBody.error) {
+      const errorMessage = responseBody.message || responseBody.error || 'Unknown Webflow API error'
+      webflowLogger.error(
+        `[${requestId}] Failed to create webhook in Webflow for webhook ${webhookData.id}. Status: ${webflowResponse.status}`,
+        { message: errorMessage, response: responseBody }
+      )
+      throw new Error(errorMessage)
+    }
+
+    webflowLogger.info(
+      `[${requestId}] Successfully created webhook in Webflow for webhook ${webhookData.id}.`,
+      {
+        webflowWebhookId: responseBody.id || responseBody._id,
+      }
+    )
+
+    return responseBody.id || responseBody._id
+  } catch (error: any) {
+    webflowLogger.error(
+      `[${requestId}] Exception during Webflow webhook creation for webhook ${webhookData.id}.`,
+      {
+        message: error.message,
+        stack: error.stack,
+      }
+    )
+    throw error
+  }
+}
+
+type ExternalSubscriptionResult = {
+  updatedProviderConfig: Record<string, unknown>
+  externalSubscriptionCreated: boolean
+}
+
+type RecreateCheckInput = {
+  previousProvider: string
+  nextProvider: string
+  previousConfig: Record<string, unknown>
+  nextConfig: Record<string, unknown>
+}
+
+function areValuesEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (Array.isArray(a) || Array.isArray(b) || typeof a === 'object' || typeof b === 'object') {
+    return JSON.stringify(a ?? null) === JSON.stringify(b ?? null)
+  }
+  return false
+}
+
+export function shouldRecreateExternalWebhookSubscription({
+  previousProvider,
+  nextProvider,
+  previousConfig,
+  nextConfig,
+}: RecreateCheckInput): boolean {
+  const relevantKeysByProvider: Record<string, string[]> = {
+    airtable: ['baseId', 'tableId', 'includeCellValues', 'includeCellValuesInFieldIds'],
+    calendly: ['apiKey', 'organization', 'triggerId'],
+    webflow: ['siteId', 'collectionId', 'formId', 'triggerId'],
+    typeform: ['formId', 'apiKey', 'secret', 'webhookTag'],
+    grain: ['apiKey', 'triggerId', 'includeHighlights', 'includeParticipants', 'includeAiSummary'],
+    lemlist: ['apiKey', 'triggerId', 'campaignId'],
+    telegram: ['botToken'],
+    'microsoft-teams': ['triggerId', 'chatId', 'credentialId', 'credentialSetId'],
+  }
+
+  if (previousProvider !== nextProvider) {
+    return (
+      Boolean(relevantKeysByProvider[previousProvider]) ||
+      Boolean(relevantKeysByProvider[nextProvider])
+    )
+  }
+
+  const keys = relevantKeysByProvider[nextProvider]
+  if (!keys) {
+    return false
+  }
+
+  return keys.some((key) => !areValuesEqual(previousConfig[key], nextConfig[key]))
+}
+
+export async function createExternalWebhookSubscription(
+  request: NextRequest,
+  webhookData: any,
+  workflow: any,
+  userId: string,
+  requestId: string
+): Promise<ExternalSubscriptionResult> {
+  const provider = webhookData.provider as string
+  const providerConfig = (webhookData.providerConfig as Record<string, unknown>) || {}
+  let updatedProviderConfig = providerConfig
+  let externalSubscriptionCreated = false
+
+  if (provider === 'airtable') {
+    const externalId = await createAirtableWebhookSubscription(userId, webhookData, requestId)
+    if (externalId) {
+      updatedProviderConfig = { ...updatedProviderConfig, externalId }
+      externalSubscriptionCreated = true
+    }
+  } else if (provider === 'calendly') {
+    const externalId = await createCalendlyWebhookSubscription(webhookData, requestId)
+    if (externalId) {
+      updatedProviderConfig = { ...updatedProviderConfig, externalId }
+      externalSubscriptionCreated = true
+    }
+  } else if (provider === 'microsoft-teams') {
+    await createTeamsSubscription(request, webhookData, workflow, requestId)
+    externalSubscriptionCreated =
+      (providerConfig.triggerId as string | undefined) === 'microsoftteams_chat_subscription'
+  } else if (provider === 'telegram') {
+    await createTelegramWebhook(request, webhookData, requestId)
+    externalSubscriptionCreated = true
+  } else if (provider === 'webflow') {
+    const externalId = await createWebflowWebhookSubscription(userId, webhookData, requestId)
+    if (externalId) {
+      updatedProviderConfig = { ...updatedProviderConfig, externalId }
+      externalSubscriptionCreated = true
+    }
+  } else if (provider === 'typeform') {
+    const usedTag = await createTypeformWebhook(request, webhookData, requestId)
+    if (!updatedProviderConfig.webhookTag && usedTag) {
+      updatedProviderConfig = { ...updatedProviderConfig, webhookTag: usedTag }
+    }
+    externalSubscriptionCreated = true
+  } else if (provider === 'grain') {
+    const result = await createGrainWebhookSubscription(request, webhookData, requestId)
+    if (result) {
+      updatedProviderConfig = {
+        ...updatedProviderConfig,
+        externalId: result.id,
+        eventTypes: result.eventTypes,
+      }
+      externalSubscriptionCreated = true
+    }
+  } else if (provider === 'lemlist') {
+    const result = await createLemlistWebhookSubscription(webhookData, requestId)
+    if (result) {
+      updatedProviderConfig = { ...updatedProviderConfig, externalId: result.id }
+      externalSubscriptionCreated = true
+    }
+  }
+
+  return { updatedProviderConfig, externalSubscriptionCreated }
+}
+
 /**
  * Clean up external webhook subscriptions for a webhook
  * Handles Airtable, Teams, Telegram, Typeform, Calendly, Grain, and Lemlist cleanup
@@ -780,6 +1550,8 @@ export async function cleanupExternalWebhook(
     await deleteTypeformWebhook(webhook, requestId)
   } else if (webhook.provider === 'calendly') {
     await deleteCalendlyWebhook(webhook, requestId)
+  } else if (webhook.provider === 'webflow') {
+    await deleteWebflowWebhook(webhook, workflow, requestId)
   } else if (webhook.provider === 'grain') {
     await deleteGrainWebhook(webhook, requestId)
   } else if (webhook.provider === 'lemlist') {

apps/sim/lib/workflows/operations/import-export.ts

@@ -16,6 +16,7 @@ export interface WorkflowExportData {
     description?: string
     color?: string
     folderId?: string | null
+    sortOrder?: number
   }
   state: WorkflowState
   variables?: Record<string, Variable>
@@ -25,6 +26,7 @@ export interface FolderExportData {
   id: string
   name: string
   parentId: string | null
+  sortOrder?: number
 }
 
 export interface WorkspaceExportStructure {
@@ -186,7 +188,12 @@ export async function exportWorkspaceToZip(
       name: workspaceName,
       exportedAt: new Date().toISOString(),
     },
-    folders: folders.map((f) => ({ id: f.id, name: f.name, parentId: f.parentId })),
+    folders: folders.map((f) => ({
+      id: f.id,
+      name: f.name,
+      parentId: f.parentId,
+      sortOrder: f.sortOrder,
+    })),
   }
 
   zip.file('_workspace.json', JSON.stringify(metadata, null, 2))
@@ -199,6 +206,7 @@ export async function exportWorkspaceToZip(
           name: workflow.workflow.name,
           description: workflow.workflow.description,
           color: workflow.workflow.color,
+          sortOrder: workflow.workflow.sortOrder,
           exportedAt: new Date().toISOString(),
         },
         variables: workflow.variables,
@@ -279,11 +287,27 @@ export interface ImportedWorkflow {
   content: string
   name: string
   folderPath: string[]
+  sortOrder?: number
 }
 
 export interface WorkspaceImportMetadata {
   workspaceName: string
   exportedAt?: string
+  folders?: Array<{
+    id: string
+    name: string
+    parentId: string | null
+    sortOrder?: number
+  }>
+}
+
+function extractSortOrder(content: string): number | undefined {
+  try {
+    const parsed = JSON.parse(content)
+    return parsed.state?.metadata?.sortOrder ?? parsed.metadata?.sortOrder
+  } catch {
+    return undefined
+  }
 }
 
 export async function extractWorkflowsFromZip(
@@ -303,6 +327,7 @@ export async function extractWorkflowsFromZip(
         metadata = {
           workspaceName: parsed.workspace?.name || 'Imported Workspace',
           exportedAt: parsed.workspace?.exportedAt,
+          folders: parsed.folders,
         }
       } catch (error) {
         logger.error('Failed to parse workspace metadata:', error)
@@ -321,6 +346,7 @@ export async function extractWorkflowsFromZip(
         content,
         name: filename,
         folderPath: pathParts,
+        sortOrder: extractSortOrder(content),
       })
     } catch (error) {
       logger.error(`Failed to extract ${path}:`, error)
@@ -338,10 +364,12 @@ export async function extractWorkflowsFromFiles(files: File[]): Promise<Imported
 
     try {
       const content = await file.text()
+
       workflows.push({
         content,
         name: file.name,
         folderPath: [],
+        sortOrder: extractSortOrder(content),
       })
     } catch (error) {
       logger.error(`Failed to read ${file.name}:`, error)

apps/sim/lib/workflows/sanitization/json-sanitizer.ts

@@ -53,6 +53,8 @@ export interface ExportWorkflowState {
     metadata?: {
       name?: string
       description?: string
+      color?: string
+      sortOrder?: number
       exportedAt?: string
     }
     variables?: Array<{

apps/sim/stores/workflows/registry/store.ts

@@ -476,7 +476,6 @@ export const useWorkflowRegistry = create<WorkflowRegistry>()(
         // Use the server-generated ID
         const id = duplicatedWorkflow.id
 
-        // Generate new workflow metadata using the server-generated ID
         const newWorkflow: WorkflowMetadata = {
           id,
           name: `${sourceWorkflow.name} (Copy)`,
@@ -484,8 +483,9 @@ export const useWorkflowRegistry = create<WorkflowRegistry>()(
           createdAt: new Date(),
           description: sourceWorkflow.description,
           color: getNextWorkflowColor(),
-          workspaceId, // Include the workspaceId in the new workflow
-          folderId: sourceWorkflow.folderId, // Include the folderId from source workflow
+          workspaceId,
+          folderId: sourceWorkflow.folderId,
+          sortOrder: duplicatedWorkflow.sortOrder ?? 0,
         }
 
         // Get the current workflow state to copy from

apps/sim/stores/workflows/registry/types.ts

@@ -26,6 +26,7 @@ export interface WorkflowMetadata {
   color: string
   workspaceId?: string
   folderId?: string | null
+  sortOrder: number
 }
 
 export type HydrationPhase =

apps/sim/triggers/constants.ts

@@ -8,24 +8,8 @@ export const SYSTEM_SUBBLOCK_IDS: string[] = [
   'triggerCredentials', // OAuth credentials subblock
   'triggerInstructions', // Setup instructions text
   'webhookUrlDisplay', // Webhook URL display
-  'triggerSave', // Save configuration button
   'samplePayload', // Example payload display
   'setupScript', // Setup script code (e.g., Apps Script)
-  'triggerId', // Stored trigger ID
-  'selectedTriggerId', // Selected trigger from dropdown (multi-trigger blocks)
-]
-
-/**
- * Trigger-related subblock IDs whose values should be persisted and
- * propagated when workflows are edited programmatically.
- */
-export const TRIGGER_PERSISTED_SUBBLOCK_IDS: string[] = [
-  'triggerConfig',
-  'triggerCredentials',
-  'triggerId',
-  'selectedTriggerId',
-  'webhookId',
-  'triggerPath',
 ]
 
 /**

apps/sim/triggers/grain/utils.ts

@@ -19,7 +19,6 @@ export function grainSetupInstructions(eventType: string): string {
   const instructions = [
     'Enter your Grain API Key (Personal Access Token) above.',
     'You can find or create your API key in Grain at <strong>Settings > Integrations > API</strong>.',
-    `Click <strong>"Save Configuration"</strong> to automatically create the webhook in Grain for <strong>${eventType}</strong> events.`,
     'The webhook will be automatically deleted when you remove this trigger.',
   ]
 

apps/sim/triggers/hubspot/utils.ts

@@ -82,9 +82,8 @@ export function hubspotSetupInstructions(eventType: string, additionalNotes?: st
     '<strong>Step 3: Configure OAuth Settings</strong><br/>After creating your app via CLI, configure it to add the OAuth Redirect URL: <code>https://www.sim.ai/api/auth/oauth2/callback/hubspot</code>. Then retrieve your <strong>Client ID</strong> and <strong>Client Secret</strong> from your app configuration and enter them in the fields above.',
     "<strong>Step 4: Get App ID and Developer API Key</strong><br/>In your HubSpot developer account, find your <strong>App ID</strong> (shown below your app name) and your <strong>Developer API Key</strong> (in app settings). You'll need both for the next steps.",
     '<strong>Step 5: Set Required Scopes</strong><br/>Configure your app to include the required OAuth scope: <code>crm.objects.contacts.read</code>',
-    '<strong>Step 6: Save Configuration in Sim</strong><br/>Click the <strong>"Save Configuration"</strong> button above. This will generate your unique webhook URL.',
-    '<strong>Step 7: Configure Webhook in HubSpot via API</strong><br/>After saving above, copy the <strong>Webhook URL</strong> and run the two curl commands below (replace <code>{YOUR_APP_ID}</code>, <code>{YOUR_DEVELOPER_API_KEY}</code>, and <code>{YOUR_WEBHOOK_URL_FROM_ABOVE}</code> with your actual values).',
-    "<strong>Step 8: Test Your Webhook</strong><br/>Create or modify a contact in HubSpot to trigger the webhook. Check your workflow execution logs in Sim to verify it's working.",
+    '<strong>Step 6: Configure Webhook in HubSpot via API</strong><br/>After saving above, copy the <strong>Webhook URL</strong> and run the two curl commands below (replace <code>{YOUR_APP_ID}</code>, <code>{YOUR_DEVELOPER_API_KEY}</code>, and <code>{YOUR_WEBHOOK_URL_FROM_ABOVE}</code> with your actual values).',
+    "<strong>Step 7: Test Your Webhook</strong><br/>Create or modify a contact in HubSpot to trigger the webhook. Check your workflow execution logs in Sim to verify it's working.",
   ]
 
   if (additionalNotes) {

apps/sim/triggers/index.ts

@@ -14,6 +14,9 @@ export function getTrigger(triggerId: string): TriggerConfig {
   }
 
   const clonedTrigger = { ...trigger, subBlocks: [...trigger.subBlocks] }
+  clonedTrigger.subBlocks = clonedTrigger.subBlocks.filter(
+    (subBlock) => subBlock.id !== 'triggerSave' && subBlock.type !== 'trigger-save'
+  )
 
   // Inject samplePayload for webhooks/pollers with condition
   if (trigger.webhook || trigger.id.includes('webhook') || trigger.id.includes('poller')) {
@@ -155,16 +158,6 @@ export function buildTriggerSubBlocks(options: BuildTriggerSubBlocksOptions): Su
   }
 
   // Save button
-  blocks.push({
-    id: 'triggerSave',
-    title: '',
-    type: 'trigger-save',
-    hideFromPreview: true,
-    mode: 'trigger',
-    triggerId: triggerId,
-    condition: { field: 'selectedTriggerId', value: triggerId },
-  })
-
   // Setup instructions
   blocks.push({
     id: 'triggerInstructions',

apps/sim/triggers/lemlist/utils.ts

@@ -23,7 +23,6 @@ export function lemlistSetupInstructions(eventType: string): string {
   const instructions = [
     'Enter your Lemlist API Key above.',
     'You can find your API key in Lemlist at <strong>Settings > Integrations > API</strong>.',
-    `Click <strong>"Save Configuration"</strong> to automatically create the webhook in Lemlist for <strong>${eventType}</strong> events.`,
     'The webhook will be automatically deleted when you remove this trigger.',
   ]
 

apps/sim/triggers/twilio_voice/webhook.ts

@@ -129,7 +129,6 @@ Return ONLY the TwiML with square brackets - no explanations, no markdown, no ex
         'Scroll down to the "Voice Configuration" section.',
         'In the "A CALL COMES IN" field, select "Webhook" and paste the Webhook URL (from above).',
         'Ensure the HTTP method is set to POST.',
-        'Click "Save configuration".',
         'How it works: When a call comes in, Twilio receives your TwiML response immediately and executes those instructions. Your workflow runs in the background with access to caller information, call status, and any recorded/transcribed data.',
       ]
         .map((instruction, index) => `${index + 1}. ${instruction}`)

bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "simstudio",
@@ -3154,6 +3153,10 @@
 
     "seq-queue": ["seq-queue@0.0.5", "", {}, "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q=="],
 
+    "seroval": ["seroval@1.3.2", "", {}, "sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ=="],
+
+    "seroval-plugins": ["seroval-plugins@1.3.3", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w=="],
+
     "serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="],
 
     "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
@@ -3220,6 +3223,8 @@
 
     "socks-proxy-agent": ["socks-proxy-agent@8.0.5", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "^4.3.4", "socks": "^2.8.3" } }, "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw=="],
 
+    "solid-js": ["solid-js@1.9.10", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "~1.3.0", "seroval-plugins": "~1.3.0" } }, "sha512-Coz956cos/EPDlhs6+jsdTxKuJDPT7B5SVIWgABwROyxjY7Xbr8wkzD68Et+NxnV7DLJ3nJdAC2r9InuV/4Jew=="],
+
     "sonic-boom": ["sonic-boom@4.2.0", "", { "dependencies": { "atomic-sleep": "^1.0.0" } }, "sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww=="],
 
     "source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],

packages/db/migrations/0141_daffy_marten_broadcloak.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "workflow" ADD COLUMN "sort_order" integer DEFAULT 0 NOT NULL;--> statement-breakpoint
+CREATE INDEX "workflow_folder_sort_idx" ON "workflow" USING btree ("folder_id","sort_order");

packages/db/migrations/meta/_journal.json

@@ -981,6 +981,13 @@
       "when": 1768366574848,
       "tag": "0140_fuzzy_the_twelve",
       "breakpoints": true
+    },
+    {
+      "idx": 141,
+      "version": "7",
+      "when": 1768421319400,
+      "tag": "0141_daffy_marten_broadcloak",
+      "breakpoints": true
     }
   ]
 }

packages/db/schema.ts

@@ -149,6 +149,7 @@ export const workflow = pgTable(
       .references(() => user.id, { onDelete: 'cascade' }),
     workspaceId: text('workspace_id').references(() => workspace.id, { onDelete: 'cascade' }),
     folderId: text('folder_id').references(() => workflowFolder.id, { onDelete: 'set null' }),
+    sortOrder: integer('sort_order').notNull().default(0),
     name: text('name').notNull(),
     description: text('description'),
     color: text('color').notNull().default('#3972F6'),
@@ -165,6 +166,7 @@ export const workflow = pgTable(
     userIdIdx: index('workflow_user_id_idx').on(table.userId),
     workspaceIdIdx: index('workflow_workspace_id_idx').on(table.workspaceId),
     userWorkspaceIdx: index('workflow_user_workspace_idx').on(table.userId, table.workspaceId),
+    folderSortIdx: index('workflow_folder_sort_idx').on(table.folderId, table.sortOrder),
   })
 )