fix(variables): display name rendering

[icecrasher321]

Summary

Variables preview in the node.

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			Nov 12, 2025 5:03am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR implements display name rendering for variable assignments in workflow nodes by hydrating variable IDs to their human-readable names.

Key Changes:

• Added getVariableDisplayName helper to resolve variable names from IDs or use stored variableName
• Modified SelectValue to use custom children for display (non-standard Radix UI pattern)
• Added variablesDisplayValue logic in workflow-block.tsx to show variable names in node preview
• Added variables-input to SELECTOR_TYPES_HYDRATION_REQUIRED array

Critical Issue Found:
The workflow-block.tsx implementation uses useVariablesStore.getState() inside useMemo, which creates a snapshot that doesn't subscribe to store updates. This will cause variable names to be stale and not update when variables are renamed or modified in the variables panel.

Other Concerns:
The approach of putting children inside SelectValue is non-standard for Radix UI - typically SelectValue automatically displays the text from the matching SelectItem. While this may work in some cases, it could lead to unexpected behavior.

Confidence Score: 2/5

• This PR contains a critical reactivity bug that will cause stale data display
• The score reflects a critical issue in workflow-block.tsx where getState() is used inside useMemo without proper store subscription, which will prevent the UI from updating when variables change. Additionally, the non-standard use of children in SelectValue may cause unexpected display behavior.
• Pay close attention to workflow-block.tsx - the store subscription pattern needs to be fixed to ensure reactive updates

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/variables-input/variables-input.tsx	3/5	added getVariableDisplayName helper and custom children to SelectValue - approach may not work as expected with Radix UI standard behavior
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx	2/5	added variables display hydration logic with critical issue: uses getState() inside useMemo which won't subscribe to store updates, causing stale data

Sequence Diagram

sequenceDiagram
    participant User
    participant VariablesInput
    participant Select
    participant VariablesStore
    participant WorkflowBlock
    
    User->>VariablesInput: Select variable from dropdown
    VariablesInput->>VariablesInput: getVariableDisplayName(assignment)
    alt has variableName
        VariablesInput-->>Select: Display variableName
    else has variableId
        VariablesInput->>VariablesStore: Find variable by ID
        VariablesStore-->>VariablesInput: Return variable.name
        VariablesInput-->>Select: Display variable.name
    else no value
        VariablesInput-->>Select: Display "Select a variable..."
    end
    
    User->>WorkflowBlock: View variable assignments in node
    WorkflowBlock->>WorkflowBlock: Check if subBlock type is variables-input
    WorkflowBlock->>VariablesStore: getState().variables (snapshot)
    Note over WorkflowBlock,VariablesStore: Issue: getState() doesn't subscribe to updates
    WorkflowBlock->>WorkflowBlock: Filter by workflowId
    WorkflowBlock->>WorkflowBlock: Map assignments to display names
    WorkflowBlock-->>User: Display formatted variable names

Loading

[greptile-apps]

_{3 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}