feat(ui): added component playground & fixed training modal

[waleedlatif1]

Summary

• added component playground & fixed training modal

Type of Change

• New feature

Testing

N/A

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		Dec 13, 2025 5:03am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR introduces two main changes:

1. Component Playground: Added a new /playground route for showcasing EMCN UI components. The feature is properly gated behind NEXT_PUBLIC_ENABLE_PLAYGROUND environment variable.

2. Training Modal Refactor: Restructured the copilot training UI by:

   • Deleting the TrainingControls wrapper component and TrainingFloatingButton
   • Moving training controls into the terminal header for a cleaner interface
   • Migrating TrainingModal from shadcn/ui Dialog to EMCN Modal components
   • Updating styling to use CSS variables consistent with the design system

The changes follow the project's established patterns for feature flagging and component architecture.

Confidence Score: 5/5

• This PR is safe to merge - it adds a feature-flagged playground page and refactors existing training UI components with no breaking changes.
• The changes are well-structured and follow project conventions. The playground feature is properly gated via environment variable, the training modal refactor maintains existing functionality while improving the component architecture, and all environment variable access follows established patterns.
• No files require special attention.

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/playground/page.tsx	5/5	New component playground page for showcasing EMCN UI components. Feature-flagged via NEXT_PUBLIC_ENABLE_PLAYGROUND env var. Properly uses notFound() for gating.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx	5/5	Added playground link button and integrated training controls into terminal header. Features are properly gated via environment variables using useEffect checks on mount.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-controls/training-modal.tsx	5/5	Migrated from shadcn/ui Dialog components to EMCN Modal components. Updated styling to use project CSS variables and precise pixel values as per style guide.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	5/5	TrainingModal now conditionally rendered based on store state. Simplified by removing TrainingControls wrapper in favor of direct modal rendering.
apps/sim/lib/core/config/env.ts	5/5	Added NEXT_PUBLIC_ENABLE_PLAYGROUND client env var with proper runtime env configuration for component playground feature flag.

Sequence Diagram

sequenceDiagram
    participant User
    participant Terminal
    participant TrainingModal
    participant CopilotTrainingStore
    participant Workflow

    Note over User,Workflow: Training Flow (Refactored)
    
    User->>Terminal: Click "Train Copilot" button
    Terminal->>CopilotTrainingStore: toggleModal()
    CopilotTrainingStore->>Workflow: showModal = true
    Workflow->>TrainingModal: Render modal
    
    User->>TrainingModal: Enter title & prompt
    User->>TrainingModal: Click "Start Training"
    TrainingModal->>CopilotTrainingStore: startTraining(title, prompt)
    
    Note over User,Workflow: User makes workflow edits...
    
    User->>Terminal: Click "Stop Training" button
    Terminal->>CopilotTrainingStore: stopTraining()
    CopilotTrainingStore->>TrainingModal: Dataset saved

Loading

[greptile-apps]

_{8 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}