fix(copilot-autolayout): more subflow cases and deal with resizing

[icecrasher321]

Summary

• Targeted autolayout improved. Wide container in layer 1 naturally pushes layer 2 further right, preventing the overlap that was causing the weird vertical displacement.

• Correctly fix occasional hydration issues by restructuring component nesting.

• Empty workflow loading returned 400 should not be doing that.

Type of Change

• Bug fix

Testing

Tested manually.

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	Preview	Comments	Updated (UTC)
docs	Skipped			Dec 8, 2025 3:09am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes two key issues: autolayout overlap prevention for wide containers, and hydration mismatches in the sidebar component.

Autolayout Improvements:

• Implemented cumulative width-based X positioning that accounts for varying container widths in each layer, preventing horizontal overlaps
• Added bottom-up container dimension pre-calculation via prepareContainerDimensions() to ensure accurate container sizes before root-level layout
• Simplified overlap resolution to only handle vertical overlaps within layers (horizontal overlaps now prevented by construction)
• Added isDefaultPosition() check to properly handle newly added blocks at (0, 0)

Hydration Fixes:

• Added _hasHydrated flag to sidebar store with proper partialize configuration to track when zustand has finished rehydrating from localStorage
• Fixed sidebar component to use default (expanded) state until hydration completes, preventing SSR/client mismatches
• Restructured DOM hierarchy in workspace layouts to isolate sidebar and prevent hydration conflicts
• Added error state check in workflow loading to prevent infinite retry loops

Additional Changes:

• Changed tsconfig.json JSX mode from preserve to react-jsx
• API route now returns empty workflow structure instead of 400 error for workflows without normalized data
• Standardized layout wrappers across templates and workflow pages

Confidence Score: 4/5

• This PR is safe to merge with minor considerations around the tsconfig JSX change
• The autolayout improvements are well-architected with clear logic for cumulative positioning and bottom-up dimension calculation. The hydration fix follows standard patterns for zustand persistence. However, the tsconfig.json JSX mode change from preserve to react-jsx may have broader implications across the codebase and should be verified to not cause issues with Next.js build process or other tooling
• Verify that the tsconfig.json JSX mode change (preserve to react-jsx) works correctly with your Next.js setup and doesn't cause build or type-checking issues

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/lib/workflows/autolayout/core.ts	5/5	Improved autolayout positioning logic with cumulative width-based X positioning to prevent horizontal overlaps
apps/sim/lib/workflows/autolayout/targeted.ts	4/5	Added container dimension pre-calculation and improved handling of blocks at default position (0, 0)
apps/sim/lib/workflows/autolayout/utils.ts	5/5	Added new prepareContainerDimensions function for bottom-up container dimension calculation
apps/sim/stores/sidebar/store.ts	5/5	Added hydration tracking with _hasHydrated flag and partialize to prevent hydration mismatches
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx	5/5	Fixed hydration mismatch by using store's hydration flag and defaulting to expanded state until hydrated
apps/sim/app/workspace/[workspaceId]/layout.tsx	5/5	Restructured DOM to prevent hydration issues, moved sidebar wrapper outside permissions provider

Sequence Diagram

sequenceDiagram
    participant User
    participant Copilot
    participant AutoLayout
    participant Core
    participant Utils
    participant Store
    participant Sidebar

    User->>Copilot: Add/modify blocks in workflow
    Copilot->>AutoLayout: applyTargetedLayout(blocks, edges, changedBlockIds)
    AutoLayout->>Utils: prepareContainerDimensions(blocks, edges)
    Note over Utils: Calculate nesting depth for containers
    Utils->>Utils: Sort containers by depth (deepest first)
    loop For each container (bottom-up)
        Utils->>Core: layoutBlocksCore(childBlocks, childEdges)
        Core->>Core: assignLayers() with cumulative width
        Core->>Core: calculatePositions() using layerXPositions
        Core-->>Utils: Return dimensions
        Utils->>Utils: Update container width/height
    end
    Utils-->>AutoLayout: Containers dimensioned
    AutoLayout->>Core: layoutBlocksCore(rootBlocks, edges)
    Core->>Core: Calculate layerWidths (max width per layer)
    Core->>Core: Calculate cumulative X positions
    Core->>Core: resolveVerticalOverlaps() within layers
    Core-->>AutoLayout: Return positioned nodes
    AutoLayout-->>Copilot: Updated block positions
    
    Note over Store,Sidebar: Hydration Fix Flow
    User->>Sidebar: Page loads (SSR)
    Sidebar->>Store: Check _hasHydrated flag
    Store-->>Sidebar: _hasHydrated = false
    Sidebar->>Sidebar: Use default state (expanded)
    Note over Sidebar: Render with isCollapsed = false
    Store->>Store: onRehydrateStorage() runs
    Store->>Store: Set _hasHydrated = true
    Store->>Sidebar: Trigger re-render
    Sidebar->>Store: Read isCollapsed (hydrated value)
    Sidebar->>Sidebar: Update UI with persisted state

Loading

[greptile-apps]

_{8 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[icecrasher321]

@greptile

[greptile-apps]

_{13 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}