feat(workflow-block): preview

[emir-karabeg]

Summary

Added workflow block preview. Made some improvements to workflow query.

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 22, 2026 3:06am

[emir-karabeg]

@greptile

[greptile-apps]

Greptile Summary

This PR implements a workflow block preview feature that displays child workflows inline when editing workflow blocks, along with improvements to the workflow query system. The feature adds a 160px preview panel within the editor that shows the child workflow's structure, includes loading states, and provides a button to open the child workflow in a new tab.

Key Changes:

• Added workflow block preview rendering in the editor panel with loading states and error handling
• Renamed hook from useWorkflowInputFields() to useWorkflowState() to reflect broader functionality
• Improved caching strategy from "always refetch" to 30-second staleTime for better performance
• Consolidated preview system by removing dual node type system (fullNodeTypes/lightweightNodeTypes)
• Updated input mapping components to extract fields locally from WorkflowState using extractInputFieldsFromBlocks
• Renamed BlockDetailsSidebar component to PreviewEditor for better semantic clarity
• Added ResizeObserver with debouncing for responsive preview container resizing
• Updated "Input Mapping" subblock title to "Inputs" for improved UX
• Improved performance by using Promise.all() for parallel API requests in deployment status fetching

The implementation follows established patterns, maintains type safety, and properly handles edge cases (no workflow selected, loading states, errors).

Confidence Score: 4/5

• This PR is safe to merge with strong code quality and no critical issues detected.
• Score of 4/5 reflects high-quality implementation with solid patterns and architecture. The changes introduce a new feature (workflow preview) that integrates well with existing systems. All modifications follow established project conventions (component patterns, import paths, hooks usage). The hook rename is well-scoped and properly integrated across all affected files. The only minor consideration is that the PR relies on proper API responses from /api/workflows/{id} endpoint and assumes consistent WorkflowState shape - but this is standard practice in the codebase. No breaking changes, no security concerns, and all edge cases are handled appropriately (loading, error, empty states).
• No files require special attention. All changes are well-implemented and follow project conventions.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx	Added workflow block preview feature. Detects workflow blocks and renders an inline 160px preview with loading state and open-in-new-tab button. Clean implementation with proper null checks, but the isWorkflowBlock check at line 100-101 should also validate that currentBlock exists before accessing its type property (already does via &&).
apps/sim/hooks/queries/workflows.ts	Refactored to improve performance. Renamed useWorkflowInputFields to useWorkflowState, changed to fetch full WorkflowState instead of just input fields, and improved cache strategy (30-second staleTime vs 'always refetch'). Used Promise.all() for parallel API requests. All changes are well-structured and improve performance.
apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx	Refactored to consolidate node types. Removed dual node type system (fullNodeTypes and lightweightNodeTypes) and unified to single previewNodeTypes. Added ResizeObserver debouncing for responsive container resizing. Changes improve consistency and reduce bundle complexity, though the ResizeObserver cleanup is correct.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx	Updated to use new useWorkflowState hook instead of previous approach. Extracts input fields using extractInputFieldsFromBlocks via useMemo. Properly handles loading states and empty workflows. Implementation is correct with good memoization patterns.

Sequence Diagram

sequenceDiagram
    participant User
    participant EditorPanel as Editor Panel
    participant WorkflowHook as useWorkflowState Hook
    participant API as Backend API
    participant Preview as WorkflowPreview Component

    User->>EditorPanel: Selects workflow block
    EditorPanel->>EditorPanel: Detects block type === 'workflow' or 'workflow_input'
    EditorPanel->>WorkflowHook: useWorkflowState(childWorkflowId)
    
    alt workflowId exists
        WorkflowHook->>API: GET /api/workflows/{id}
        API-->>WorkflowHook: Returns WorkflowState
        WorkflowHook-->>EditorPanel: data: WorkflowState, isLoading: false
    else no workflowId selected
        EditorPanel->>EditorPanel: Render 'No workflow selected' message
    end
    
    EditorPanel->>EditorPanel: isLoadingChildWorkflow check
    alt loading
        EditorPanel->>EditorPanel: Render loading spinner
    else loaded
        EditorPanel->>Preview: Pass workflowState to WorkflowPreview
        Preview->>Preview: Render nodes and edges from state
        Preview-->>EditorPanel: Rendered preview canvas
        EditorPanel->>EditorPanel: Show open-in-new-tab button
    end
    
    User->>EditorPanel: Clicks open button
    EditorPanel->>API: window.open(/workspace/{id}/w/{childWorkflowId})
    API-->>User: Opens child workflow in new tab

Loading