improvement(preview): error paths, loops, workflow

[emir-karabeg]

Summary

• Switch: fixed dark styling
• Settings: change deployed MCPs to MCP servers
• Preview: added error handles/paths, loop logic, and workflow previews

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.

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Jan 27, 2026 1:42am

[greptile-apps]

Greptile Overview

Greptile Summary

Refactored workflow preview architecture to support nested workflow navigation, improved error path visualization, and updated UI terminology.

Key changes:

• Split WorkflowPreview into Preview (with editor) and PreviewWorkflow (canvas only) for better separation of concerns
• Added navigation stack to support drilling into loop/parallel blocks and viewing their child workflows
• Extracted PreviewSubflow component for rendering loop/parallel containers with execution status
• Fixed error edge coloring - executed error paths now show green, untaken error paths stay red
• Updated Switch component styling to use brand color and fix dark mode appearance
• Changed "Deployed MCPs" to "MCP Servers" across UI and documentation for consistency
• Simplified execution-snapshot.tsx and general.tsx by using the new unified Preview component

Confidence Score: 5/5

• This PR is safe to merge with no blocking issues
• Well-structured refactoring that improves code organization and maintainability. The component extraction follows React best practices, reduces code duplication, and adds valuable features like nested workflow navigation. No logic errors or security concerns identified.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx	Refactored to split preview logic into Preview (with editor) and PreviewWorkflow (canvas only), added nested workflow navigation stack
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx	New file - extracted canvas rendering logic from preview.tsx, handles ReactFlow visualization with execution status
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx	Moved to dedicated folder structure, supports drilling down into nested workflows via onDrillDown callback
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx	New component for rendering loop/parallel containers with execution status highlighting
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx	Fixed edge coloring logic - error edges that were executed now show green, untaken error edges stay red
apps/sim/components/emcn/components/switch/switch.tsx	Updated styling to use brand color for checked state, fixed dark mode appearance

Sequence Diagram

sequenceDiagram
    participant User
    participant Preview
    participant PreviewWorkflow
    participant PreviewEditor
    participant ReactFlow

    User->>Preview: View workflow execution
    Preview->>Preview: buildBlockExecutions(traceSpans)
    Preview->>Preview: Initialize pinnedBlockId (leftmost block)
    Preview->>PreviewWorkflow: Render workflow canvas
    PreviewWorkflow->>ReactFlow: Render nodes and edges
    ReactFlow-->>User: Display workflow visualization
    
    Preview->>PreviewEditor: Render editor sidebar (pinned block)
    PreviewEditor-->>User: Display block input/output

    alt User clicks on block
        User->>PreviewWorkflow: Click block
        PreviewWorkflow->>Preview: onNodeClick(blockId)
        Preview->>Preview: setPinnedBlockId(blockId)
        Preview->>PreviewEditor: Update editor with new block
        PreviewEditor-->>User: Show selected block details
    end

    alt User drills into nested workflow (loop/parallel)
        User->>PreviewEditor: Click "View Workflow" on loop/parallel block
        PreviewEditor->>Preview: onDrillDown(blockId, childWorkflowState)
        Preview->>Preview: extractChildTraceSpans(blockExecution)
        Preview->>Preview: buildBlockExecutions(childTraceSpans)
        Preview->>Preview: Push to workflowStack
        Preview->>Preview: Set pinned block to leftmost in child
        Preview->>PreviewWorkflow: Render child workflow
        PreviewWorkflow->>ReactFlow: Render child nodes/edges
        Preview->>PreviewEditor: Show child block details
        Preview-->>User: Display "Back" button
    end

    alt User goes back from nested workflow
        User->>Preview: Click "Back" button
        Preview->>Preview: Pop from workflowStack
        Preview->>Preview: Clear pinnedBlockId
        Preview->>PreviewWorkflow: Render parent workflow
        Preview->>PreviewEditor: Hide editor
    end

    alt Error path execution
        PreviewWorkflow->>PreviewWorkflow: Check edgeRunStatus
        alt Error edge was taken
            PreviewWorkflow->>ReactFlow: Color edge green (success)
        else Error edge not taken
            PreviewWorkflow->>ReactFlow: Color edge red (error)
        end
    end

Loading

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[emir-karabeg]

@greptile

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[emir-karabeg]

@greptile

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}