Visualize iterator sub step's output by iteration index

[Devessier]

Demo

CleanShot.2025-09-26.at.17.53.45.mp4

With several sub steps

Note

Please note that as I created the component state, the iteration index will be different for every step of a workflow run. We might have one component state instance per iterator node. We can implement it in another PR if we think it's the way to go.

CleanShot.2025-09-26.at.17.55.11.mp4

[Devessier]

This is the recommended way to declare recursive types with Zod 4. See: https://zod.dev/v4?id=recursive-objects

[Devessier]

Synchronizes zod schema definitions with types

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:62055

This environment will automatically shut down when the PR is closed or after 5 hours.

[greptile-apps]

Greptile Overview

Summary

This PR implements iterator sub-step output visualization by iteration index, allowing users to navigate through different iterations of workflow steps that are descendants of iterator nodes.

Key Features Added

• WorkflowIteratorSubStepSwitcher: New navigation component with previous/next buttons and iteration counter
• Component State Management: Uses Recoil to track current iteration index per step
• Iterator Detection: Utility function to identify steps that are descendants of iterator steps
• History Integration: Leverages step info history to display iteration-specific data

Technical Implementation

• The feature uses component instance context to maintain separate state per workflow run and step
• The getIsDescendantOfIterator utility recursively traverses the workflow graph with cycle detection
• The useWorkflowRunStepInfo hook integrates with the iteration index state to return the appropriate step info
• Navigation controls are only shown for steps that are descendants of iterator nodes

Impact

• Enhances workflow debugging capabilities by allowing users to inspect individual iteration outputs
• Maintains clean separation between different workflow runs through component state isolation
• Provides intuitive navigation with pagination-style controls and clear iteration counting

Confidence Score: 4/5

• This PR is mostly safe to merge with well-structured code and comprehensive testing
• High code quality with proper state management, comprehensive tests, and good architectural patterns. Minor concern about component state isolation as noted in PR description - iteration index may be shared across different workflow steps rather than isolated per iterator node
• Pay attention to packages/twenty-shared/src/workflow/schemas/workflow-run-state-step-info-schema.ts for proper history property handling

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowIteratorSubStepSwitcher.tsx	5/5	New component that creates UI controls for navigating through iterator sub-step iterations, implementing pagination controls with proper state management
packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState.ts	5/5	Component state definition for tracking the current iteration index in iterator sub-steps, using Recoil state management
packages/twenty-front/src/modules/workflow/workflow-steps/utils/getIsDescendantOfIterator.ts	5/5	Utility function to determine if a workflow step is a descendant of an iterator step, using recursive traversal with cycle detection
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useWorkflowRunStepInfo.ts	5/5	Hook that retrieves step info based on current iteration index, integrating with iterator sub-step state management
packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx	5/5	Updated main workflow step view component to include the WorkflowIteratorSubStepSwitcher, providing iterator navigation UI
packages/twenty-shared/src/workflow/schemas/workflow-run-state-step-info-schema.ts	4/5	Updated Zod schema to support history property in step info, enabling iteration tracking in workflow runs

Sequence Diagram

sequenceDiagram
    participant User
    participant WorkflowIteratorSubStepSwitcher
    participant ComponentState as workflowRunIteratorSubStepIterationIndexComponentState
    participant useWorkflowRunStepInfo
    participant getWorkflowRunAllStepInfoHistory
    participant WorkflowRunStepOutputDetail
    participant getIsDescendantOfIterator

    User->>WorkflowIteratorSubStepSwitcher: View iterator step
    WorkflowIteratorSubStepSwitcher->>getIsDescendantOfIterator: Check if step is descendant of iterator
    getIsDescendantOfIterator-->>WorkflowIteratorSubStepSwitcher: Return boolean result
    
    alt Step is descendant of iterator
        WorkflowIteratorSubStepSwitcher->>getWorkflowRunAllStepInfoHistory: Get all step info history
        getWorkflowRunAllStepInfoHistory-->>WorkflowIteratorSubStepSwitcher: Return history array
        WorkflowIteratorSubStepSwitcher->>ComponentState: Read current iteration index
        ComponentState-->>WorkflowIteratorSubStepSwitcher: Return index (default: 0)
        WorkflowIteratorSubStepSwitcher->>WorkflowIteratorSubStepSwitcher: Render navigation controls
        
        User->>WorkflowIteratorSubStepSwitcher: Click next/previous button
        WorkflowIteratorSubStepSwitcher->>ComponentState: Update iteration index
        ComponentState->>useWorkflowRunStepInfo: Trigger recomputation with new index
        useWorkflowRunStepInfo->>getWorkflowRunAllStepInfoHistory: Get all step info history
        getWorkflowRunAllStepInfoHistory-->>useWorkflowRunStepInfo: Return history array
        useWorkflowRunStepInfo-->>WorkflowRunStepOutputDetail: Return step info at current index
        WorkflowRunStepOutputDetail->>WorkflowRunStepOutputDetail: Re-render with iteration-specific data
    else Step is not descendant of iterator
        WorkflowIteratorSubStepSwitcher->>WorkflowIteratorSubStepSwitcher: Render nothing (return null)
    end

Loading

_{15 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[thomtrp]

Very nice 💪

[martmull]

LGTM thank you!