improvement(display-names): move display name mapping to central store + access pattern via hook

[icecrasher321]

Summary

Preview should match Sidebar without odd rehydration.

Type of Change

• Bug fix

Testing

Testing manually on staging environment.

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

[greptile-apps]

Greptile Overview

Greptile Summary

Refactored display name management from scattered local state to a centralized Zustand store with automatic hydration via hooks. This eliminates the rehydration issue where workflow block previews showed IDs instead of names.

Key Changes:

• Created useDisplayNamesStore for centralized caching of all ID-to-name mappings
• Implemented useDisplayName hook with auto-fetching logic for channels, files, folders, projects, documents, and workflows
• Added useCredentialDisplay hook for credential-specific name resolution
• Updated WorkflowBlock SubBlockRow component to automatically hydrate IDs to display names
• Added hideFromPreview field to SubBlockConfig to hide instructional/setup fields from preview
• Refactored 17+ selector components to cache names in the display store upon fetch
• Applied hideFromPreview to all trigger webhook setup instructions

Impact:

• Solves preview/sidebar display name mismatch
• Reduces redundant API calls through centralized caching
• Cleaner separation of concerns between data fetching and display logic

Confidence Score: 4/5

• Safe to merge with minor dependency array issue that could cause stale closures in edge cases
• The refactoring is well-structured with consistent patterns applied across all selectors. The centralized store approach is sound. However, there's a missing dependency issue in the useDisplayName hook's useCallback that could lead to stale closures. The extensive use of multiple useEffect hooks could also lead to excessive re-renders, though this is more of a performance concern than a correctness issue.
• Pay attention to apps/sim/hooks/use-display-name.ts for the dependency array issue

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/stores/display-names/store.ts	5/5	New centralized Zustand store for caching display name mappings across all selector types - clean implementation with proper separation of concerns
apps/sim/hooks/use-display-name.ts	4/5	Generic hook that auto-fetches and caches display names for all selector types - comprehensive but has multiple useEffect hooks that could cause excessive re-renders
apps/sim/hooks/use-credential-display.ts	5/5	Specialized hook for credential display names with proper memoization and loading state - clean and focused implementation
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx	4/5	SubBlockRow enhanced to automatically hydrate IDs to display names using new hooks - logic is complex with multiple conditional branches and dependency resolution
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/document-selector/document-selector.tsx	4/5	Refactored to use knowledge store and display names store, removed local state management - cleaner but introduces store coupling
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/file-selector/components/jira-issue-selector.tsx	4/5	Removed local selectedIssue state in favor of cached display names - simplifies state management but relies on cache for display

Sequence Diagram

sequenceDiagram
    participant WB as WorkflowBlock
    participant SBR as SubBlockRow
    participant UDN as useDisplayName
    participant UCD as useCredentialDisplay
    participant DNS as DisplayNamesStore
    participant API as API Endpoints
    participant SEL as Selector Components

    Note over WB,SEL: Initial Render Flow
    WB->>SBR: Render with subBlock config + rawValue
    SBR->>UCD: Check credential display (if oauth-input)
    UCD->>DNS: Get cached credential name
    alt Cache Miss
        UCD->>API: GET /api/auth/oauth/credentials
        API-->>UCD: Return credentials list
        UCD->>DNS: setDisplayNames('credentials', provider, map)
    end
    DNS-->>UCD: Return display name
    
    SBR->>UDN: Check generic display name (if other selector)
    UDN->>DNS: Get cached display name by type + context
    alt Cache Miss
        alt Channel Selector
            UDN->>API: POST /api/tools/slack/channels
        else File Selector
            UDN->>API: Provider-specific file endpoint
        else Folder Selector
            UDN->>API: Gmail/Outlook folders endpoint
        else Project Selector
            UDN->>API: Jira/Linear projects endpoint
        else Document Selector
            UDN->>API: GET /api/knowledge/{id}/documents
        end
        API-->>UDN: Return items list
        UDN->>DNS: setDisplayNames(type, context, map)
    end
    DNS-->>UDN: Return display name
    UDN-->>SBR: Return resolved name
    SBR-->>WB: Display hydrated name

    Note over SEL,DNS: Selector Component Flow
    SEL->>API: Fetch items (on open/load)
    API-->>SEL: Return items with id + name
    SEL->>DNS: setDisplayNames(type, context, itemMap)
    Note over DNS: Cache persists across renders
    SEL->>SEL: Use cached display name for preview

Loading

[greptile-apps]

_{73 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}