feat(subflows): editor, block; fix(copilot): stop, mr

[emir-karabeg]

Summary

Subflows:

• Editor
• New interface

Copilot:

• Fixed stop button
• Fixed MR

Type of Change

• Bug fix
• New feature

Testing

Solo testing.

Checklist

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 11, 2025 2:34am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR introduces a new subflow editor interface for loop and parallel blocks and fixes copilot UI issues.

Major Changes:

• Created new SubflowEditor component with dedicated UI for configuring loop/parallel blocks (type selection, iterations, collections, conditions)
• Extracted useSubflowEditor hook to manage subflow state, validation, and tag dropdown functionality
• Refactored configuration files (loop-config.ts, parallel-config.ts) to only contain toolbar display properties, following the config file pattern
• Moved animation keyframes from globals.css to tailwind.config.ts for better organization
• Simplified globals.css by removing redundant comments and moving component-specific z-index styles to subflow-node.tsx
• Fixed copilot stop button visibility by adding hover state check (isHoveringMessage)
• Added block display class to SVG/icon elements to prevent inline layout issues

Architectural Improvements:

• Better separation of concerns: configuration now properly separated from component rendering
• Improved code organization with dedicated subflow editor component
• Reduced globals.css from 770 to 532 lines while maintaining functionality

Custom Instruction Compliance:

• Note: globals.css was edited despite custom instruction c3b5e4b0-6580-4307-83aa-ba28f105b3c4 recommending avoiding it unless necessary. However, the changes appear justified as they improve organization by moving styles to appropriate locations (component files and tailwind config).

Confidence Score: 4/5

• This PR is safe to merge with minor organizational concerns around the globals.css changes
• Score reflects well-structured code with proper separation of concerns and comprehensive refactoring. The new SubflowEditor component follows React best practices with custom hooks, proper typing, and clean architecture. Copilot fixes are minimal and targeted. The main concern is the extensive globals.css modification which goes against a custom instruction, though the changes improve code organization. No critical bugs or security issues were found. Testing was done by the author (solo testing noted in PR description).
• Pay attention to globals.css changes to ensure animation keyframes work correctly after being moved to tailwind.config.ts, and verify that subflow z-index styles work properly after being moved to the component file

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/globals.css	4/5	Refactored CSS: moved animation keyframes to tailwind.config.ts, simplified comments, removed subflow z-index styles (now in component)
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/copilot-message.tsx	5/5	Fixed stop button visibility by adding isHoveringMessage condition and added block class to prevent layout issues
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/subflow-editor/subflow-editor.tsx	5/5	New subflow editor component for loop/parallel blocks with type selection, iteration config, and connections section
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/hooks/use-subflow-editor.ts	5/5	New hook managing subflow editor state, handling type changes, iterations, and tag dropdowns with reference highlighting
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/editor.tsx	5/5	Integrated SubflowEditor component with conditional rendering for loop/parallel blocks vs regular blocks
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx	4/5	Refactored subflow node with unified rendering, moved z-index styles to component, added iteration badges integration
apps/sim/tailwind.config.ts	5/5	Added animation keyframes (dash-animation, pulse-ring, etc.) moved from globals.css for better organization

Sequence Diagram

sequenceDiagram
    participant User
    participant Editor
    participant SubflowEditor
    participant useSubflowEditor
    participant Store
    participant CollaborativeWorkflow

    User->>Editor: Select loop/parallel block
    Editor->>Editor: Detect isSubflow = true
    Editor->>SubflowEditor: Render SubflowEditor component
    
    SubflowEditor->>useSubflowEditor: Initialize hook
    useSubflowEditor->>Store: Get subflow config & node data
    Store-->>useSubflowEditor: Return current state
    useSubflowEditor-->>SubflowEditor: Return state & handlers
    
    SubflowEditor->>User: Display type selector & config
    
    alt User changes loop/parallel type
        User->>SubflowEditor: Change type
        SubflowEditor->>useSubflowEditor: handleSubflowTypeChange()
        useSubflowEditor->>CollaborativeWorkflow: collaborativeUpdateLoopType/ParallelType()
        CollaborativeWorkflow->>Store: Update store
        Store-->>SubflowEditor: Re-render with new type
    end
    
    alt User edits iterations (count mode)
        User->>SubflowEditor: Edit iteration count
        SubflowEditor->>useSubflowEditor: handleSubflowIterationsChange()
        useSubflowEditor->>useSubflowEditor: Validate & sanitize input
        User->>SubflowEditor: Blur or press Enter
        SubflowEditor->>useSubflowEditor: handleSubflowIterationsSave()
        useSubflowEditor->>CollaborativeWorkflow: collaborativeUpdateIterationCount()
        CollaborativeWorkflow->>Store: Update iteration count
    end
    
    alt User edits collection/condition
        User->>SubflowEditor: Edit code editor
        SubflowEditor->>useSubflowEditor: handleSubflowEditorChange()
        useSubflowEditor->>useSubflowEditor: Check for tag trigger ("<")
        alt Tag trigger detected
            useSubflowEditor->>SubflowEditor: Show tag dropdown
            User->>SubflowEditor: Select tag
            SubflowEditor->>useSubflowEditor: handleSubflowTagSelect()
        end
        useSubflowEditor->>CollaborativeWorkflow: collaborativeUpdateIterationCollection()
        CollaborativeWorkflow->>Store: Update collection/condition
    end
    
    SubflowEditor->>SubflowEditor: Render connections section
    SubflowEditor->>User: Display incoming connections

Loading

[greptile-apps]

_{21 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}