feat(workflow): open command palette on empty edge drop and auto-connection

[bhushan6]

Summary

Adds a new workflow UX path for faster node creation while connecting edges:

• When dragging from a node output and dropping on empty canvas, open the existing command palette.
• When a block is selected, create it at the drop point and auto-connect from the original source handle.
• This explicit edge-drag flow auto-connects even when "Auto-connect on drop" is OFF.
• If subflow/container boundary rules make the edge invalid, still create the block and skip the edge with an info notification.
• Pending connection context is cleared when the search modal is closed without selection.

Fixes #(issue)
N/A (no issue filed)

Type of Change

• New feature
• Bug fix
• Breaking change
• Documentation
• Other: ___________

Testing

Tested locally with:

• bunx biome check --files-ignore-unknown=true 'apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx'
• bun run --cwd apps/sim type-check

Reviewer focus:

• Edge-drag to empty canvas opens palette
• Selected block is placed at drop point
• Auto-connect occurs for explicit edge-drag flow even with auto-connect setting OFF
• Invalid subflow boundary case creates node but skips edge with notification
• Closing palette without selection clears pending context

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

• Added: short video covering for UX flow.

edge-drag-empty-drop-auto-connect.mp4

[vercel]

@bhushan6 is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

Implements edge-drag-to-create workflow by opening command palette when dropping edge on empty canvas, creating selected block at drop position, and auto-connecting with proper subflow boundary validation.

• Added PendingConnectionContext to store source node, handle, and drop position
• Implemented modal close detection to clear pending context when user cancels
• Extended handleToolbarDrop to accept pending connection context and presetOperation
• Created createPendingConnectionEdge to mirror onConnect container boundary logic
• Modified onConnectEnd to detect empty canvas drops and open search modal
• Auto-connection works for explicit edge-drag even when "Auto-connect on drop" is OFF
• Shows info notification when subflow boundary rules prevent edge creation

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Implementation is well-structured with proper boundary validation, context cleanup on modal close, and mirrors existing auto-connect logic. The changes are localized to workflow.tsx and follow established patterns.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	Adds edge-drag-to-canvas workflow: opens command palette on empty drop, creates block at drop point, auto-connects respecting subflow boundaries

Sequence Diagram

sequenceDiagram
    participant User
    participant onConnectEnd
    participant setPendingConnectionContext
    participant SearchModal
    participant handleAddBlockFromToolbar
    participant handleToolbarDrop
    participant createPendingConnectionEdge
    participant addBlock

    User->>onConnectEnd: Drag edge & drop on empty canvas
    onConnectEnd->>onConnectEnd: Detect drop inside canvas
    onConnectEnd->>setPendingConnectionContext: Store sourceNodeId, handleId, dropPosition
    onConnectEnd->>SearchModal: Open modal
    
    User->>SearchModal: Select block type
    SearchModal->>handleAddBlockFromToolbar: Fire event with block type
    handleAddBlockFromToolbar->>handleAddBlockFromToolbar: consumePendingConnectionContext()
    handleAddBlockFromToolbar->>handleToolbarDrop: Call with pendingConnectionContext
    handleToolbarDrop->>createPendingConnectionEdge: Create edge with boundary validation
    
    alt Subflow boundary valid
        createPendingConnectionEdge-->>handleToolbarDrop: Return edge
        handleToolbarDrop->>addBlock: Add block + auto-connect edge
    else Subflow boundary invalid
        createPendingConnectionEdge->>User: Show info notification
        createPendingConnectionEdge-->>handleToolbarDrop: Return undefined
        handleToolbarDrop->>addBlock: Add block without edge
    end
    
    alt User closes modal without selection
        SearchModal->>SearchModal: Close event
        SearchModal->>SearchModal: clearPendingConnectionContext()
    end

Loading

_{Last reviewed commit: e590c00}

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}