improvement: workflow, blocks, preview, avatars, output-select

[emir-karabeg]

Summary

Improvement: workflow, blocks, preview, avatars, output-select

Type of Change

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

Testing

Solo.

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)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 16, 2026 0:41am

[greptile-apps]

Greptile Summary

This PR delivers UI/UX improvements and performance optimizations across workflow, block, preview, avatar, and output-select components. Major changes include refactoring the workflow canvas drag-and-drop logic with consolidated helper functions (executeBatchParentUpdate, highlightContainerNode, executePasteOperation), optimizing distance calculations by using reduce instead of map + sort, and fixing the preview fitView behavior to properly respond to node changes.

Key improvements:

• Refactored workflow drag-and-drop operations to use shared helper functions, reducing code duplication
• Optimized nearest-block calculations from O(n log n) to O(n) by using reduce with distanceSquared
• Fixed preview component to re-fit view when nodeIds change (was only fitting once before)
• Improved avatar layout in sidebar by positioning inline with workflow names instead of dynamic spacing
• Added text selection prevention during shift-drag operations on canvas
• Removed unused Connections component and cleaned up exports
• Simplified output-select styling by using overlayContent prop instead of complex CSS selectors
• Reordered workflow controls popover to show Mover option first

Confidence Score: 4/5

• This PR is safe to merge with minor testing recommended for drag-and-drop edge cases
• The changes demonstrate solid refactoring practices with improved code organization and performance optimizations. The workflow.tsx changes are substantial but well-structured, consolidating duplicated logic into reusable functions. The distance calculation optimization is mathematically sound. However, the extensive refactoring of drag-and-drop logic warrants careful testing of edge cases, particularly around container boundary detection and multi-node selection scenarios
• Pay close attention to workflow.tsx due to extensive drag-and-drop refactoring that should be tested with various node configurations

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx	Swapped order of Mover/Pointer items in popover menu and removed align prop
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	Major refactoring: added helper functions for container operations, optimized distance calculations, consolidated paste/duplicate logic, improved drag-and-drop handling, and added text selection prevention
apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx	Fixed fitView logic to re-fit when nodeIds change instead of only once
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx	Refactored layout to place avatars inline with workflow name instead of separate positioning

Sequence Diagram

sequenceDiagram
    participant User
    participant WorkflowControls
    participant Workflow
    participant Container
    participant Preview
    participant Sidebar

    Note over User,Sidebar: UI Improvements & Refactoring

    User->>WorkflowControls: Click canvas mode selector
    WorkflowControls->>WorkflowControls: Show Mover option first (reordered)
    User->>WorkflowControls: Select mode
    WorkflowControls->>Workflow: Update canvas mode

    User->>Workflow: Drag node over container
    Workflow->>Workflow: highlightContainerNode(containerId, kind)
    Workflow->>Container: Add drag-over styling
    User->>Workflow: Drop node
    Workflow->>Workflow: executeBatchParentUpdate(nodes, parentId)
    Workflow->>Workflow: shiftUpdatesToContainerBounds(updates)
    Workflow->>Container: Update node positions and parent

    User->>Workflow: Shift+Drag on canvas
    Workflow->>Workflow: handleCanvasMouseDown(event)
    Workflow->>Workflow: Prevent text selection

    User->>Workflow: Paste/Duplicate blocks
    Workflow->>Workflow: executePasteOperation(operation, offset)
    Workflow->>Workflow: Validate and add blocks

    User->>Preview: View workflow
    Preview->>Preview: FitViewOnChange checks nodeIds
    Preview->>Preview: Re-fit when nodeIds change (fixed)

    User->>Sidebar: View workflow item
    Sidebar->>Sidebar: Render avatars inline with name
    Sidebar->>Sidebar: Apply flex layout improvements

Loading