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}