feat(auto-layout): local auto layout

[emir-karabeg]

Summary

Adds local auto layout for control-bar auto-layout that looks at the workflow block store for smart layouts.

Type of Change

• New feature

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.

Project	Deployment	Preview	Comments	Updated (UTC)
sim	Ready	Preview	Comment	Aug 27, 2025 1:18am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Aug 27, 2025 1:18am

[greptile-apps]

Greptile Summary

This PR introduces a local auto-layout feature that replaces server-side API calls with a client-side implementation for workflow positioning. The main changes involve:

1. New local auto-layout implementation (local-auto-layout.ts) - A comprehensive graph-based positioning algorithm featuring topological sorting, barycentric crossing minimization, intelligent layout direction detection, and proper container node handling

2. Control bar integration - Modified the control bar to use applyLocalAutoLayoutAndUpdateStore instead of the server-side applyAutoLayoutAndUpdateStore function

3. Shared configuration - Exported DEFAULT_AUTO_LAYOUT_OPTIONS from the existing auto-layout utility with reduced spacing values (horizontal: 500→250, vertical: 400→200, layer: 700→350) to enable consistent defaults between remote and local implementations

The local implementation maintains the same interface as the server-side version while providing immediate visual feedback without network round-trips. It includes sophisticated features like cycle detection in topological sorting, optimistic updates with rollback capability on errors, and extensive logging for debugging. The algorithm handles complex scenarios including container nodes with relative positioning for children and intelligent viewport-based positioning.

This change aligns with the project's goal of improving user experience by eliminating network latency for auto-layout operations while maintaining full compatibility with existing workflow structures.

PR Description Notes:

• The PR template is incomplete with placeholder text and no actual description of changes
• Missing issue reference, testing details, and type of change selection
• No screenshots provided despite this being a visual UI feature

Confidence score: 3/5

• This PR introduces complex layout logic that may have edge cases with large workflows or unusual node configurations
• Score reflects concerns about hardcoded viewport assumptions, potential performance issues, and complex position calculations that could fail in edge cases
• Pay close attention to the new local-auto-layout.ts file, particularly the position calculation logic and container node handling

_{3 files reviewed, 2 comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

style: Complex type assertion could be avoided with better interface design

Context Used: Context - Avoid using type assertions to 'any' in TypeScript. Instead, ensure proper type definitions are used to maintain type safety. (link)

[greptile-apps]

logic: Container positioning logic modifies the block object directly, which could cause unintended side effects since it's a reference to the original object

Suggested change

	// Handle container node children positioning
	Object.entries(layoutedBlocks).forEach(([blockId, block]) => {
	if (block.data?.parentId) {
	const parent = layoutedBlocks[block.data.parentId]
	if (parent) {
	// Adjust child position relative to parent with padding
	const padding = 50
	block.position = {
	x: parent.position.x + padding,
	y: parent.position.y + padding + 50, // Extra top padding for container header
	}
	}
	}
	})
	// Handle container node children positioning
	Object.entries(layoutedBlocks).forEach(([blockId, block]) => {
	if (block.data?.parentId) {
	const parent = layoutedBlocks[block.data.parentId]
	if (parent) {
	// Adjust child position relative to parent with padding
	const padding = 50
	layoutedBlocks[blockId] = {
	...block,
	position: {
	x: parent.position.x + padding,
	y: parent.position.y + padding + 50, // Extra top padding for container header
	}
	}
	}
	}
	})