fix(backport): github release action fix (#6425)

.cursor/commands/build.md

@@ -1,3 +0,0 @@
-Build the full app and if you run into any errors, fix them and build again until the app builds.
-
-Complete when: This is complete only when the app build fully.

.cursor/commands/pr.md

@@ -1 +0,0 @@
-Open a draft PR with a concise description of what we’ve done in this PR and what remains to be done.

.cursor/commands/unit-tests.md

@@ -1,8 +0,0 @@
-Run the unit tests of all files we’ve changed so far:
-
-1. Check the diff to main
-2. Determine all files that we changed
-3. Run the corresponding unit tests
-4. If tests are failing, update the unit test following the guideline in the corresponding cursor rule.
-
-Complete when: This is complete when all unit tests pass.

.cursor/commands/wrap-up.md

@@ -1 +0,0 @@
-Run /unit-test and if complete /build and if complete /pr

.cursor/rules/cache-optimization.mdc

@@ -16,10 +16,9 @@ Formbricks uses a **hybrid caching approach** optimized for enterprise scale:
 ## Key Files
 
 ### Core Cache Infrastructure
-- [packages/cache/src/service.ts](mdc:packages/cache/src/service.ts) - Redis cache service
-- [packages/cache/src/client.ts](mdc:packages/cache/src/client.ts) - Cache client initialization and singleton management  
-- [apps/web/lib/cache/index.ts](mdc:apps/web/lib/cache/index.ts) - Cache service proxy for web app
-- [packages/cache/src/index.ts](mdc:packages/cache/src/index.ts) - Cache package exports and utilities
+- [apps/web/modules/cache/lib/service.ts](mdc:apps/web/modules/cache/lib/service.ts) - Redis cache service
+- [apps/web/modules/cache/lib/withCache.ts](mdc:apps/web/modules/cache/lib/withCache.ts) - Cache wrapper utilities
+- [apps/web/modules/cache/lib/cacheKeys.ts](mdc:apps/web/modules/cache/lib/cacheKeys.ts) - Enterprise cache key patterns and utilities
 
 ### Environment State Caching (Critical Endpoint)
 - [apps/web/app/api/v1/client/[environmentId]/environment/route.ts](mdc:apps/web/app/api/v1/client/[environmentId]/environment/route.ts) - Main endpoint serving hundreds of thousands of SDK clients
@@ -27,7 +26,7 @@ Formbricks uses a **hybrid caching approach** optimized for enterprise scale:
 
 ## Enterprise-Grade Cache Key Patterns
 
-**Always use** the `createCacheKey` utilities from the cache package:
+**Always use** the `createCacheKey` utilities from [cacheKeys.ts](mdc:apps/web/modules/cache/lib/cacheKeys.ts):
 
 ```typescript
 // ✅ Correct patterns
@@ -51,14 +50,14 @@ export const getEnterpriseLicense = reactCache(async () => {
 });
 ```
 
-### Use `cache.withCache()` for Simple Database Queries
+### Use `withCache()` for Simple Database Queries
 ```typescript
 // ✅ Simple caching with automatic fallback (TTL in milliseconds)
 export const getActionClasses = (environmentId: string) => {
-  return cache.withCache(() => fetchActionClassesFromDB(environmentId), 
-    createCacheKey.environment.actionClasses(environmentId),
-    60 * 30 * 1000 // 30 minutes in milliseconds
-  );
+  return withCache(() => fetchActionClassesFromDB(environmentId), {
+    key: createCacheKey.environment.actionClasses(environmentId),
+    ttl: 60 * 30 * 1000, // 30 minutes in milliseconds
+  })();
 };
 ```
 

.cursor/rules/database.mdc

@@ -7,7 +7,6 @@ description: >
 globs: []
 alwaysApply: agent-requested
 ---
-
 # Formbricks Database Schema Reference
 
 This rule provides a reference to the Formbricks database structure. For the most up-to-date and complete schema definitions, please refer to the schema.prisma file directly.
@@ -17,7 +16,6 @@ This rule provides a reference to the Formbricks database structure. For the mos
 Formbricks uses PostgreSQL with Prisma ORM. The schema is designed for multi-tenancy with strong data isolation between organizations.
 
 ### Core Hierarchy
-
 ```
 Organization
 └── Project
@@ -31,7 +29,6 @@ Organization
 ## Schema Reference
 
 For the complete and up-to-date database schema, please refer to:
-
 - Main schema: `packages/database/schema.prisma`
 - JSON type definitions: `packages/database/json-types.ts`
 
@@ -40,22 +37,17 @@ The schema.prisma file contains all model definitions, relationships, enums, and
 ## Data Access Patterns
 
 ### Multi-tenancy
-
 - All data is scoped by Organization
 - Environment-level isolation for surveys and contacts
 - Project-level grouping for related surveys
 
 ### Soft Deletion
-
 Some models use soft deletion patterns:
-
 - Check `isActive` fields where present
 - Use proper filtering in queries
 
 ### Cascading Deletes
-
 Configured cascade relationships:
-
 - Organization deletion cascades to all child entities
 - Survey deletion removes responses, displays, triggers
 - Contact deletion removes attributes and responses
@@ -63,7 +55,6 @@ Configured cascade relationships:
 ## Common Query Patterns
 
 ### Survey with Responses
-
 ```typescript
 // Include response count and latest responses
 const survey = await prisma.survey.findUnique({
@@ -71,40 +62,40 @@ const survey = await prisma.survey.findUnique({
   include: {
     responses: {
       take: 10,
-      orderBy: { createdAt: "desc" },
+      orderBy: { createdAt: 'desc' }
     },
     _count: {
-      select: { responses: true },
-    },
-  },
+      select: { responses: true }
+    }
+  }
 });
 ```
 
 ### Environment Scoping
-
 ```typescript
 // Always scope by environment
 const surveys = await prisma.survey.findMany({
   where: {
     environmentId: environmentId,
     // Additional filters...
-  },
+  }
 });
 ```
 
 ### Contact with Attributes
-
 ```typescript
 const contact = await prisma.contact.findUnique({
   where: { id: contactId },
   include: {
     attributes: {
       include: {
-        attributeKey: true,
-      },
-    },
-  },
+        attributeKey: true
+      }
+    }
+  }
 });
 ```
 
 This schema supports Formbricks' core functionality: multi-tenant survey management, user targeting, response collection, and analysis, all while maintaining strict data isolation and security.
+
+

.cursor/rules/documentations.mdc

@@ -1,28 +1,23 @@
 ---
 description: Guideline for writing end-user facing documentation in the apps/docs folder
-globs:
+globs: 
 alwaysApply: false
 ---
-
 Follow these instructions and guidelines when asked to write documentation in the apps/docs folder
 
 Follow this structure to write the title, describtion and pick a matching icon and insert it at the top of the MDX file:
 
 ---
-
 title: "FEATURE NAME"
 description: "1 concise sentence to describe WHEN the feature is being used and FOR WHAT BENEFIT."
 icon: "link"
-
 ---
 
 - Description: 1 concise sentence to describe WHEN the feature is being used and FOR WHAT BENEFIT.
-- Make ample use of the Mintlify components you can find here https://mintlify.com/docs/llms.txt - e.g. if docs describe consecutive steps, always use Mintlify Step component.
-- In all Headlines, only capitalize the current feature and nothing else, to Camel Case.
-- The page should never start with H1 headline, because it's already part of the template.
-- Tonality: Keep it concise and to the point. Avoid Jargon where possible.
+- Make ample use of the Mintlify components you can find here https://mintlify.com/docs/llms.txt
+- In all Headlines, only capitalize the current feature and nothing else, to Camel Case
 - If a feature is part of the Enterprise Edition, use this note:
 
 <Note>
-  FEATURE NAME is part of the [Enterprise Edition](/self-hosting/advanced/license) 
-</Note>
+  FEATURE NAME is part of the @Enterprise Edition. 
+</Note>

.cursor/rules/eks-alb-optimization.mdc

@@ -0,0 +1,152 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# EKS & ALB Optimization Guide for Error Reduction
+
+## Infrastructure Overview
+
+This project uses AWS EKS with Application Load Balancer (ALB) for the Formbricks application. The infrastructure has been optimized to minimize ELB 502/504 errors through careful configuration of connection handling, health checks, and pod lifecycle management.
+
+## Key Infrastructure Files
+
+### Terraform Configuration
+- **Main Infrastructure**: [infra/terraform/main.tf](mdc:infra/terraform/main.tf) - EKS cluster, VPC, Karpenter, and core AWS resources
+- **Monitoring**: [infra/terraform/cloudwatch.tf](mdc:infra/terraform/cloudwatch.tf) - CloudWatch alarms for 502/504 error tracking and alerting
+- **Database**: [infra/terraform/rds.tf](mdc:infra/terraform/rds.tf) - Aurora PostgreSQL configuration
+
+### Helm Configuration
+- **Production**: [infra/formbricks-cloud-helm/values.yaml.gotmpl](mdc:infra/formbricks-cloud-helm/values.yaml.gotmpl) - Optimized ALB and pod configurations
+- **Staging**: [infra/formbricks-cloud-helm/values-staging.yaml.gotmpl](mdc:infra/formbricks-cloud-helm/values-staging.yaml.gotmpl) - Staging environment with spot instances
+- **Deployment**: [infra/formbricks-cloud-helm/helmfile.yaml.gotmpl](mdc:infra/formbricks-cloud-helm/helmfile.yaml.gotmpl) - Multi-environment Helm releases
+
+## ALB Optimization Patterns
+
+### Connection Handling Optimizations
+```yaml
+# Key ALB annotations for reducing 502/504 errors
+alb.ingress.kubernetes.io/load-balancer-attributes: |
+  idle_timeout.timeout_seconds=120,
+  connection_logs.s3.enabled=false,
+  access_logs.s3.enabled=false
+
+alb.ingress.kubernetes.io/target-group-attributes: |
+  deregistration_delay.timeout_seconds=30,
+  stickiness.enabled=false,
+  load_balancing.algorithm.type=least_outstanding_requests,
+  target_group_health.dns_failover.minimum_healthy_targets.count=1
+```
+
+### Health Check Configuration
+- **Interval**: 15 seconds for faster detection of unhealthy targets
+- **Timeout**: 5 seconds to prevent false positives
+- **Thresholds**: 2 healthy, 3 unhealthy for balanced responsiveness
+- **Path**: `/health` endpoint optimized for < 100ms response time
+
+## Pod Lifecycle Management
+
+### Graceful Shutdown Pattern
+```yaml
+# PreStop hook to allow connection draining
+lifecycle:
+  preStop:
+    exec:
+      command: ["/bin/sh", "-c", "sleep 15"]
+
+# Termination grace period for complete cleanup
+terminationGracePeriodSeconds: 45
+```
+
+### Health Probe Strategy
+- **Startup Probe**: 5s initial delay, 5s interval, max 60s startup time
+- **Readiness Probe**: 10s delay, 10s interval for traffic readiness
+- **Liveness Probe**: 30s delay, 30s interval for container health
+
+### Rolling Update Configuration
+```yaml
+strategy:
+  type: RollingUpdate
+  rollingUpdate:
+    maxUnavailable: 25%  # Maintain capacity during updates
+    maxSurge: 50%        # Allow faster rollouts
+```
+
+## Karpenter Node Management
+
+### Node Lifecycle Optimization
+- **Startup Taints**: Prevent traffic during node initialization
+- **Graceful Shutdown**: 30s grace period for pod eviction
+- **Consolidation Delay**: 60s to reduce unnecessary churn
+- **Eviction Policies**: Configured for smooth pod migrations
+
+### Instance Selection
+- **Families**: c8g, c7g, m8g, m7g, r8g, r7g (ARM64 Graviton)
+- **Sizes**: 2, 4, 8 vCPUs for cost optimization
+- **Bottlerocket AMI**: Enhanced security and performance
+
+## Monitoring & Alerting
+
+### Critical ALB Metrics
+1. **ELB 502 Errors**: Threshold 20 over 5 minutes
+2. **ELB 504 Errors**: Threshold 15 over 5 minutes  
+3. **Target Connection Errors**: Threshold 50 over 5 minutes
+4. **4XX Errors**: Threshold 100 over 10 minutes (client issues)
+
+### Expected Improvements
+- **60-80% reduction** in ELB 502 errors
+- **Faster recovery** during pod restarts
+- **Better connection reuse** efficiency
+- **Improved autoscaling** responsiveness
+
+## Deployment Patterns
+
+### Infrastructure Updates
+1. **Terraform First**: Apply infrastructure changes via [infra/deploy-improvements.sh](mdc:infra/deploy-improvements.sh)
+2. **Helm Second**: Deploy application configurations
+3. **Verification**: Check pod status, endpoints, and ALB health
+4. **Monitoring**: Watch CloudWatch metrics for 24-48 hours
+
+### Environment-Specific Configurations
+- **Production**: On-demand instances, stricter resource limits
+- **Staging**: Spot instances, rate limiting disabled, relaxed resources
+
+## Troubleshooting Patterns
+
+### 502 Error Investigation
+1. Check pod readiness and health probe status
+2. Verify ALB target group health
+3. Review deregistration timing during deployments
+4. Monitor connection pool utilization
+
+### 504 Error Analysis  
+1. Check application response times
+2. Verify timeout configurations (ALB: 120s, App: aligned)
+3. Review database query performance
+4. Monitor resource utilization during traffic spikes
+
+### Connection Error Patterns
+1. Verify Karpenter node lifecycle timing
+2. Check pod termination grace periods
+3. Review ALB connection draining settings
+4. Monitor cluster autoscaling events
+
+## Best Practices
+
+### When Making Changes
+- **Test in staging first** with same configurations
+- **Monitor metrics** for 24-48 hours after changes
+- **Use gradual rollouts** with proper health checks
+- **Maintain ALB timeout alignment** across all layers
+
+### Performance Optimization
+- **Health endpoint** should respond < 100ms consistently  
+- **Connection pooling** aligned with ALB idle timeouts
+- **Resource requests/limits** tuned for consistent performance
+- **Graceful shutdown** implemented in application code
+
+### Monitoring Strategy
+- **Real-time alerts** for error rate spikes
+- **Trend analysis** for connection patterns
+- **Capacity planning** based on LCU usage
+- **4XX pattern analysis** for client behavior insights

.cursor/rules/review-and-refine.mdc

@@ -1,179 +0,0 @@
----
-description: Apply these quality standards before finalizing code changes to ensure DRY principles, React best practices, TypeScript conventions, and maintainable code.
-globs:
-alwaysApply: false
----
-
-# Review & Refine
-
-Before finalizing any code changes, review your implementation against these quality standards:
-
-## Core Principles
-
-### DRY (Don't Repeat Yourself)
-
-- Extract duplicated logic into reusable functions or hooks
-- If the same code appears in multiple places, consolidate it
-- Create helper functions at appropriate scope (component-level, module-level, or utility files)
-- Avoid copy-pasting code blocks
-
-### Code Reduction
-
-- Remove unnecessary code, comments, and abstractions
-- Prefer built-in solutions over custom implementations
-- Consolidate similar logic
-- Remove dead code and unused imports
-- Question if every line of code is truly needed
-
-## React Best Practices
-
-### Component Design
-
-- Keep components focused on a single responsibility
-- Extract complex logic into custom hooks
-- Prefer composition over prop drilling
-- Use children props and render props when appropriate
-- Keep component files under 300 lines when possible
-
-### Hooks Usage
-
-- Follow Rules of Hooks (only call at top level, only in React functions)
-- Extract complex `useEffect` logic into custom hooks
-- Use `useMemo` and `useCallback` only when you have a measured performance issue
-- Declare dependencies arrays correctly - don't ignore exhaustive-deps warnings
-- Keep `useEffect` focused on a single concern
-
-### State Management
-
-- Colocate state as close as possible to where it's used
-- Lift state only when necessary
-- Use `useReducer` for complex state logic with multiple sub-values
-- Avoid derived state - compute values during render instead
-- Don't store values in state that can be computed from props
-
-### Event Handlers
-
-- Name event handlers with `handle` prefix (e.g., `handleClick`, `handleSubmit`)
-- Extract complex event handler logic into separate functions
-- Avoid inline arrow functions in JSX when they contain complex logic
-
-## TypeScript Best Practices
-
-### Type Safety
-
-- Prefer type inference over explicit types when possible
-- Use `const` assertions for literal types
-- Avoid `any` - use `unknown` if type is truly unknown
-- Use discriminated unions for complex conditional logic
-- Leverage type guards and narrowing
-
-### Interface & Type Usage
-
-- Use existing types from `@formbricks/types` - don't recreate them
-- Prefer `interface` for object shapes that might be extended
-- Prefer `type` for unions, intersections, and mapped types
-- Define types close to where they're used unless they're shared
-- Export types from index files for shared types
-
-### Type Assertions
-
-- Avoid type assertions (`as`) when possible
-- Use type guards instead of assertions
-- Only assert when you have more information than TypeScript
-
-## Code Organization
-
-### Separation of Concerns
-
-- Separate business logic from UI rendering
-- Extract API calls into separate functions or modules
-- Keep data transformation separate from component logic
-- Use custom hooks for stateful logic that doesn't render UI
-
-### Function Clarity
-
-- Functions should do one thing well
-- Name functions clearly and descriptively
-- Keep functions small (aim for under 20 lines)
-- Extract complex conditionals into named boolean variables or functions
-- Avoid deep nesting (max 3 levels)
-
-### File Structure
-
-- Group related functions together
-- Order declarations logically (types → hooks → helpers → component)
-- Keep imports organized (external → internal → relative)
-- Consider splitting large files by concern
-
-## Additional Quality Checks
-
-### Performance
-
-- Don't optimize prematurely - measure first
-- Avoid creating new objects/arrays/functions in render unnecessarily
-- Use keys properly in lists (stable, unique identifiers)
-- Lazy load heavy components when appropriate
-
-### Accessibility
-
-- Use semantic HTML elements
-- Include ARIA labels where needed
-- Ensure keyboard navigation works
-- Check color contrast and focus states
-
-### Error Handling
-
-- Handle error states in components
-- Provide user feedback for failed operations
-- Use error boundaries for component errors
-- Log errors appropriately (avoid swallowing errors silently)
-
-### Naming Conventions
-
-- Use descriptive names (avoid abbreviations unless very common)
-- Boolean variables/props should sound like yes/no questions (`isLoading`, `hasError`, `canEdit`)
-- Arrays should be plural (`users`, `choices`, `items`)
-- Event handlers: `handleX` in components, `onX` for props
-- Constants in UPPER_SNAKE_CASE only for true constants
-
-### Code Readability
-
-- Prefer early returns to reduce nesting
-- Use destructuring to make code clearer
-- Break complex expressions into named variables
-- Add comments only when code can't be made self-explanatory
-- Use whitespace to group related code
-
-### Testing Considerations
-
-- Write code that's easy to test (pure functions, clear inputs/outputs)
-- Avoid hard-to-mock dependencies when possible
-- Keep side effects at the edges of your code
-
-## Review Checklist
-
-Before submitting your changes, ask yourself:
-
-1. **DRY**: Is there any duplicated logic I can extract?
-2. **Clarity**: Would another developer understand this code easily?
-3. **Simplicity**: Is this the simplest solution that works?
-4. **Types**: Am I using TypeScript effectively?
-5. **React**: Am I following React idioms and best practices?
-6. **Performance**: Are there obvious performance issues?
-7. **Separation**: Are concerns properly separated?
-8. **Testing**: Is this code testable?
-9. **Maintenance**: Will this be easy to change in 6 months?
-10. **Deletion**: Can I remove any code and still accomplish the goal?
-
-## When to Apply This Rule
-
-Apply this rule:
-
-- After implementing a feature but before marking it complete
-- When you notice your code feels "messy" or complex
-- Before requesting code review
-- When you see yourself copy-pasting code
-- After receiving feedback about code quality
-
-Don't let perfect be the enemy of good, but always strive for:
-**Simple, readable, maintainable code that does one thing well.**

.env.example

@@ -62,6 +62,9 @@ SMTP_PASSWORD=smtpPassword
 
 # Uncomment the variables you would like to use and customize the values.
 
+# Custom local storage path for file uploads
+#UPLOADS_DIR=
+
 ##############
 # S3 STORAGE #
 ##############
@@ -96,6 +99,8 @@ PASSWORD_RESET_DISABLED=1
 # Organization Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
+# Docker cron jobs. Disable the supercronic cron jobs in the Docker image (useful for cluster setups).
+# DOCKER_CRON_ENABLED=1
 
 ##########
 # Other  #

.eslintrc.cjs

@@ -1,13 +0,0 @@
-module.exports = {
-  root: true,
-  ignorePatterns: ["node_modules/", "dist/", "coverage/"],
-  overrides: [
-    {
-      files: ["packages/cache/**/*.{ts,js}"],
-      extends: ["@formbricks/eslint-config/library.js"],
-      parserOptions: {
-        project: "./packages/cache/tsconfig.json",
-      },
-    },
-  ],
-};

.github/actions/build-and-push-docker/action.yml

@@ -1,319 +0,0 @@
-name: Build and Push Docker Image
-description: |
-  Unified Docker build and push action for both ECR and GHCR registries.
-
-  Supports:
-  - ECR builds for Formbricks Cloud deployment
-  - GHCR builds for community self-hosting
-  - Automatic version resolution and tagging
-  - Conditional signing and deployment tags
-
-inputs:
-  registry_type:
-    description: "Registry type: 'ecr' or 'ghcr'"
-    required: true
-
-  # Version input
-  version:
-    description: "Explicit version (SemVer only, e.g., 1.2.3). If provided, this version is used directly. If empty, version is auto-generated from branch name."
-    required: false
-  experimental_mode:
-    description: "Enable experimental timestamped versions"
-    required: false
-    default: "false"
-
-  # ECR specific inputs
-  ecr_registry:
-    description: "ECR registry URL (required for ECR builds)"
-    required: false
-  ecr_repository:
-    description: "ECR repository name (required for ECR builds)"
-    required: false
-  ecr_region:
-    description: "ECR AWS region (required for ECR builds)"
-    required: false
-  aws_role_arn:
-    description: "AWS role ARN for ECR authentication (required for ECR builds)"
-    required: false
-
-  # GHCR specific inputs
-  ghcr_image_name:
-    description: "GHCR image name (required for GHCR builds)"
-    required: false
-
-  # Deployment options
-  deploy_production:
-    description: "Tag image for production deployment"
-    required: false
-    default: "false"
-  deploy_staging:
-    description: "Tag image for staging deployment"
-    required: false
-    default: "false"
-  is_prerelease:
-    description: "Whether this is a prerelease (auto-tags for staging/production)"
-    required: false
-    default: "false"
-  make_latest:
-    description: "Whether to tag as latest/production (from GitHub release 'Set as the latest release' option)"
-    required: false
-    default: "false"
-
-  # Build options
-  dockerfile:
-    description: "Path to Dockerfile"
-    required: false
-    default: "apps/web/Dockerfile"
-  context:
-    description: "Build context"
-    required: false
-    default: "."
-
-outputs:
-  image_tag:
-    description: "Resolved image tag used for the build"
-    value: ${{ steps.version.outputs.version }}
-  registry_tags:
-    description: "Complete registry tags that were pushed"
-    value: ${{ steps.build.outputs.tags }}
-  image_digest:
-    description: "Image digest from the build"
-    value: ${{ steps.build.outputs.digest }}
-
-runs:
-  using: "composite"
-  steps:
-    - name: Validate inputs
-      shell: bash
-      env:
-        REGISTRY_TYPE: ${{ inputs.registry_type }}
-        ECR_REGISTRY: ${{ inputs.ecr_registry }}
-        ECR_REPOSITORY: ${{ inputs.ecr_repository }}
-        ECR_REGION: ${{ inputs.ecr_region }}
-        AWS_ROLE_ARN: ${{ inputs.aws_role_arn }}
-        GHCR_IMAGE_NAME: ${{ inputs.ghcr_image_name }}
-      run: |
-        set -euo pipefail
-
-        if [[ "$REGISTRY_TYPE" != "ecr" && "$REGISTRY_TYPE" != "ghcr" ]]; then
-          echo "ERROR: registry_type must be 'ecr' or 'ghcr', got: $REGISTRY_TYPE"
-          exit 1
-        fi
-
-        if [[ "$REGISTRY_TYPE" == "ecr" ]]; then
-          if [[ -z "$ECR_REGISTRY" || -z "$ECR_REPOSITORY" || -z "$ECR_REGION" || -z "$AWS_ROLE_ARN" ]]; then
-            echo "ERROR: ECR builds require ecr_registry, ecr_repository, ecr_region, and aws_role_arn"
-            exit 1
-          fi
-        fi
-
-        if [[ "$REGISTRY_TYPE" == "ghcr" ]]; then
-          if [[ -z "$GHCR_IMAGE_NAME" ]]; then
-            echo "ERROR: GHCR builds require ghcr_image_name"
-            exit 1
-          fi
-        fi
-
-        echo "SUCCESS: Input validation passed for $REGISTRY_TYPE build"
-
-    - name: Resolve Docker version
-      id: version
-      uses: ./.github/actions/resolve-docker-version
-      with:
-        version: ${{ inputs.version }}
-        current_branch: ${{ github.ref_name }}
-        experimental_mode: ${{ inputs.experimental_mode }}
-
-    - name: Update package.json version
-      uses: ./.github/actions/update-package-version
-      with:
-        version: ${{ steps.version.outputs.version }}
-
-    - name: Configure AWS credentials (ECR only)
-      if: ${{ inputs.registry_type == 'ecr' }}
-      uses: aws-actions/configure-aws-credentials@7474bc4690e29a8392af63c5b98e7449536d5c3a # v4.2.0
-      with:
-        role-to-assume: ${{ inputs.aws_role_arn }}
-        aws-region: ${{ inputs.ecr_region }}
-
-    - name: Log in to Amazon ECR (ECR only)
-      if: ${{ inputs.registry_type == 'ecr' }}
-      uses: aws-actions/amazon-ecr-login@062b18b96a7aff071d4dc91bc00c4c1a7945b076 # v2.0.1
-
-    - name: Set up Docker build tools
-      uses: ./.github/actions/docker-build-setup
-      with:
-        registry: ${{ inputs.registry_type == 'ghcr' && 'ghcr.io' || '' }}
-        setup_cosign: ${{ inputs.registry_type == 'ghcr' && 'true' || 'false' }}
-        skip_login_on_pr: ${{ inputs.registry_type == 'ghcr' && 'true' || 'false' }}
-
-    - name: Build ECR tag list
-      if: ${{ inputs.registry_type == 'ecr' }}
-      id: ecr-tags
-      shell: bash
-      env:
-        IMAGE_TAG: ${{ steps.version.outputs.version }}
-        ECR_REGISTRY: ${{ inputs.ecr_registry }}
-        ECR_REPOSITORY: ${{ inputs.ecr_repository }}
-        DEPLOY_PRODUCTION: ${{ inputs.deploy_production }}
-        DEPLOY_STAGING: ${{ inputs.deploy_staging }}
-        IS_PRERELEASE: ${{ inputs.is_prerelease }}
-        MAKE_LATEST: ${{ inputs.make_latest }}
-      run: |
-        set -euo pipefail
-
-        # Start with the base image tag
-        TAGS="${ECR_REGISTRY}/${ECR_REPOSITORY}:${IMAGE_TAG}"
-
-        # Handle automatic tagging based on release type
-        if [[ "${IS_PRERELEASE}" == "true" ]]; then
-          TAGS="${TAGS}\n${ECR_REGISTRY}/${ECR_REPOSITORY}:staging"
-          echo "Adding staging tag for prerelease"
-        elif [[ "${IS_PRERELEASE}" == "false" && "${MAKE_LATEST}" == "true" ]]; then
-          TAGS="${TAGS}\n${ECR_REGISTRY}/${ECR_REPOSITORY}:production"
-          echo "Adding production tag for stable release marked as latest"
-        fi
-
-        # Handle manual deployment overrides
-        if [[ "${DEPLOY_PRODUCTION}" == "true" ]]; then
-          TAGS="${TAGS}\n${ECR_REGISTRY}/${ECR_REPOSITORY}:production"
-          echo "Adding production tag (manual override)"
-        fi
-        if [[ "${DEPLOY_STAGING}" == "true" ]]; then
-          TAGS="${TAGS}\n${ECR_REGISTRY}/${ECR_REPOSITORY}:staging"
-          echo "Adding staging tag (manual override)"
-        fi
-
-        echo "ECR tags generated:"
-        echo -e "${TAGS}"
-
-        {
-          echo "tags<<EOF"
-          echo -e "${TAGS}"
-          echo "EOF"
-        } >> "${GITHUB_OUTPUT}"
-
-    - name: Generate additional GHCR tags for releases
-      if: ${{ inputs.registry_type == 'ghcr' && inputs.experimental_mode == 'false' && (github.event_name == 'workflow_call' || github.event_name == 'release' || github.event_name == 'workflow_dispatch') }}
-      id: ghcr-extra-tags
-      shell: bash
-      env:
-        VERSION: ${{ steps.version.outputs.version }}
-        IMAGE_NAME: ${{ inputs.ghcr_image_name }}
-        IS_PRERELEASE: ${{ inputs.is_prerelease }}
-        MAKE_LATEST: ${{ inputs.make_latest }}
-      run: |
-        set -euo pipefail
-
-        # Start with base version tag
-        TAGS="ghcr.io/${IMAGE_NAME}:${VERSION}"
-
-        # For proper SemVer releases, add major.minor and major tags
-        if [[ "${VERSION}" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
-          # Extract major and minor versions
-          MAJOR=$(echo "${VERSION}" | cut -d. -f1)
-          MINOR=$(echo "${VERSION}" | cut -d. -f2)
-          
-          TAGS="${TAGS}\nghcr.io/${IMAGE_NAME}:${MAJOR}.${MINOR}"
-          TAGS="${TAGS}\nghcr.io/${IMAGE_NAME}:${MAJOR}"
-          
-          echo "Added SemVer tags: ${MAJOR}.${MINOR}, ${MAJOR}"
-        fi
-
-        # Add latest tag for stable releases marked as latest
-        if [[ "${IS_PRERELEASE}" == "false" && "${MAKE_LATEST}" == "true" ]]; then
-          TAGS="${TAGS}\nghcr.io/${IMAGE_NAME}:latest"
-          echo "Added latest tag for stable release marked as latest"
-        fi
-
-        echo "Generated GHCR tags:"
-        echo -e "${TAGS}"
-
-        # Debug: Show what will be passed to Docker build
-        echo "DEBUG: Tags for Docker build step:"
-        echo -e "${TAGS}"
-
-        {
-          echo "tags<<EOF"
-          echo -e "${TAGS}"
-          echo "EOF"
-        } >> "${GITHUB_OUTPUT}"
-
-    - name: Build GHCR metadata (experimental)
-      if: ${{ inputs.registry_type == 'ghcr' && inputs.experimental_mode == 'true' }}
-      id: ghcr-meta-experimental
-      uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
-      with:
-        images: ghcr.io/${{ inputs.ghcr_image_name }}
-        tags: |
-          type=ref,event=branch
-          type=raw,value=${{ steps.version.outputs.version }}
-
-    - name: Debug Docker build tags
-      shell: bash
-      run: |
-        echo "=== DEBUG: Docker Build Configuration ==="
-        echo "Registry Type: ${{ inputs.registry_type }}"
-        echo "Experimental Mode: ${{ inputs.experimental_mode }}"
-        echo "Event Name: ${{ github.event_name }}"
-        echo "Is Prerelease: ${{ inputs.is_prerelease }}"
-        echo "Make Latest: ${{ inputs.make_latest }}"
-        echo "Version: ${{ steps.version.outputs.version }}"
-
-        if [[ "${{ inputs.registry_type }}" == "ecr" ]]; then
-          echo "ECR Tags: ${{ steps.ecr-tags.outputs.tags }}"
-        elif [[ "${{ inputs.experimental_mode }}" == "true" ]]; then
-          echo "GHCR Experimental Tags: ${{ steps.ghcr-meta-experimental.outputs.tags }}"
-        else
-          echo "GHCR Extra Tags: ${{ steps.ghcr-extra-tags.outputs.tags }}"
-        fi
-
-    - name: Build and push Docker image
-      id: build
-      uses: depot/build-push-action@636daae76684e38c301daa0c5eca1c095b24e780 # v1.14.0
-      with:
-        project: tw0fqmsx3c
-        token: ${{ env.DEPOT_PROJECT_TOKEN }}
-        context: ${{ inputs.context }}
-        file: ${{ inputs.dockerfile }}
-        platforms: linux/amd64,linux/arm64
-        push: ${{ github.event_name != 'pull_request' }}
-        tags: ${{ inputs.registry_type == 'ecr' && steps.ecr-tags.outputs.tags || (inputs.registry_type == 'ghcr' && inputs.experimental_mode == 'true' && steps.ghcr-meta-experimental.outputs.tags) || (inputs.registry_type == 'ghcr' && inputs.experimental_mode == 'false' && steps.ghcr-extra-tags.outputs.tags) || (inputs.registry_type == 'ghcr' && format('ghcr.io/{0}:{1}', inputs.ghcr_image_name, steps.version.outputs.version)) || (inputs.registry_type == 'ecr' && format('{0}/{1}:{2}', inputs.ecr_registry, inputs.ecr_repository, steps.version.outputs.version)) }}
-        labels: ${{ inputs.registry_type == 'ghcr' && inputs.experimental_mode == 'true' && steps.ghcr-meta-experimental.outputs.labels || '' }}
-        secrets: |
-          database_url=${{ env.DUMMY_DATABASE_URL }}
-          encryption_key=${{ env.DUMMY_ENCRYPTION_KEY }}
-          redis_url=${{ env.DUMMY_REDIS_URL }}
-          sentry_auth_token=${{ env.SENTRY_AUTH_TOKEN }}
-      env:
-        DEPOT_PROJECT_TOKEN: ${{ env.DEPOT_PROJECT_TOKEN }}
-        DUMMY_DATABASE_URL: ${{ env.DUMMY_DATABASE_URL }}
-        DUMMY_ENCRYPTION_KEY: ${{ env.DUMMY_ENCRYPTION_KEY }}
-        DUMMY_REDIS_URL: ${{ env.DUMMY_REDIS_URL }}
-        SENTRY_AUTH_TOKEN: ${{ env.SENTRY_AUTH_TOKEN }}
-
-    - name: Sign GHCR image (GHCR only)
-      if: ${{ inputs.registry_type == 'ghcr' && (github.event_name == 'workflow_call' || github.event_name == 'release' || github.event_name == 'workflow_dispatch') }}
-      shell: bash
-      env:
-        TAGS: ${{ inputs.experimental_mode == 'true' && steps.ghcr-meta-experimental.outputs.tags || steps.ghcr-extra-tags.outputs.tags }}
-        DIGEST: ${{ steps.build.outputs.digest }}
-      run: |
-        set -euo pipefail
-        echo "${TAGS}" | xargs -I {} cosign sign --yes "{}@${DIGEST}"
-
-    - name: Output build summary
-      shell: bash
-      env:
-        REGISTRY_TYPE: ${{ inputs.registry_type }}
-        IMAGE_TAG: ${{ steps.version.outputs.version }}
-        VERSION_SOURCE: ${{ steps.version.outputs.source }}
-      run: |
-        echo "SUCCESS: Built and pushed Docker image to $REGISTRY_TYPE"
-        echo "Image Tag: $IMAGE_TAG (source: $VERSION_SOURCE)"
-        if [[ "$REGISTRY_TYPE" == "ecr" ]]; then
-          echo "ECR Registry: ${{ inputs.ecr_registry }}"
-          echo "ECR Repository: ${{ inputs.ecr_repository }}"
-        else
-          echo "GHCR Image: ghcr.io/${{ inputs.ghcr_image_name }}"
-        fi

.github/actions/docker-build-setup/action.yml

@@ -1,106 +0,0 @@
-name: Docker Build Setup
-description: |
-  Sets up common Docker build tools and authentication with security validation.
-
-  Security Features:
-  - Registry URL validation
-  - Input sanitization
-  - Conditional setup based on event type
-  - Post-setup verification
-
-  Supports Depot CLI, Cosign signing, and Docker registry authentication.
-
-inputs:
-  registry:
-    description: "Docker registry hostname to login to (e.g., ghcr.io, registry.example.com:5000). No paths allowed."
-    required: false
-    default: "ghcr.io"
-  setup_cosign:
-    description: "Whether to install cosign for image signing"
-    required: false
-    default: "true"
-  skip_login_on_pr:
-    description: "Whether to skip registry login on pull requests"
-    required: false
-    default: "true"
-
-runs:
-  using: "composite"
-  steps:
-    - name: Validate inputs
-      shell: bash
-      env:
-        REGISTRY: ${{ inputs.registry }}
-        SETUP_COSIGN: ${{ inputs.setup_cosign }}
-        SKIP_LOGIN_ON_PR: ${{ inputs.skip_login_on_pr }}
-      run: |
-        set -euo pipefail
-
-        # Security: Validate registry input - must be hostname[:port] only, no paths
-        # Allow empty registry for cases where login is handled externally (e.g., ECR)
-        if [[ -n "$REGISTRY" ]]; then
-          if [[ "$REGISTRY" =~ / ]]; then
-            echo "ERROR: Invalid registry format: $REGISTRY"
-            echo "Registry must be host[:port] with no path (e.g., 'ghcr.io' or 'registry.example.com:5000')"
-            echo "Path components like 'ghcr.io/org' are not allowed as they break docker login"
-            exit 1
-          fi
-
-          # Validate hostname with optional port format
-          if [[ ! "$REGISTRY" =~ ^[a-zA-Z0-9.-]+(\:[0-9]+)?$ ]]; then
-            echo "ERROR: Invalid registry hostname format: $REGISTRY"
-            echo "Registry must be a valid hostname optionally with port (e.g., 'ghcr.io' or 'registry.example.com:5000')"
-            exit 1
-          fi
-        fi
-
-        # Validate boolean inputs
-        if [[ "$SETUP_COSIGN" != "true" && "$SETUP_COSIGN" != "false" ]]; then
-          echo "ERROR: setup_cosign must be 'true' or 'false', got: $SETUP_COSIGN"
-          exit 1
-        fi
-
-        if [[ "$SKIP_LOGIN_ON_PR" != "true" && "$SKIP_LOGIN_ON_PR" != "false" ]]; then
-          echo "ERROR: skip_login_on_pr must be 'true' or 'false', got: $SKIP_LOGIN_ON_PR"
-          exit 1
-        fi
-
-        echo "SUCCESS: Input validation passed"
-
-    - name: Set up Depot CLI
-      uses: depot/setup-action@b0b1ea4f69e92ebf5dea3f8713a1b0c37b2126a5 # v1.6.0
-
-    - name: Install cosign
-      # Install cosign when requested AND when we might actually sign images
-      # (i.e., non-PR contexts or when we login on PRs)
-      if: ${{ inputs.setup_cosign == 'true' && (inputs.skip_login_on_pr == 'false' || github.event_name != 'pull_request') }}
-      uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3.8.2
-
-    - name: Log into registry
-      if: ${{ inputs.registry != '' && (inputs.skip_login_on_pr == 'false' || github.event_name != 'pull_request') }}
-      uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
-      with:
-        registry: ${{ inputs.registry }}
-        username: ${{ github.actor }}
-        password: ${{ github.token }}
-
-    - name: Verify setup completion
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        # Verify Depot CLI is available
-        if ! command -v depot >/dev/null 2>&1; then
-          echo "ERROR: Depot CLI not found in PATH"
-          exit 1
-        fi
-
-        # Verify cosign if it should be installed (same conditions as install step)
-        if [[ "${{ inputs.setup_cosign }}" == "true" ]] && [[ "${{ inputs.skip_login_on_pr }}" == "false" || "${{ github.event_name }}" != "pull_request" ]]; then
-          if ! command -v cosign >/dev/null 2>&1; then
-            echo "ERROR: Cosign not found in PATH despite being requested"
-            exit 1
-          fi
-        fi
-
-        echo "SUCCESS: Docker build setup completed successfully"

.github/actions/resolve-docker-version/action.yml

@@ -1,192 +0,0 @@
-name: Resolve Docker Version
-description: |
-  Resolves and validates Docker-compatible SemVer versions for container builds with comprehensive security.
-
-  Security Features:
-  - Command injection protection
-  - Input sanitization and validation
-  - Docker tag character restrictions
-  - Length limits and boundary checks
-  - Safe branch name handling
-
-  Supports multiple modes: release, manual override, branch auto-detection, and experimental timestamped versions.
-
-inputs:
-  version:
-    description: "Explicit version (SemVer only, e.g., 1.2.3-beta). If provided, this version is used directly. If empty, version is auto-generated from branch name."
-    required: false
-  current_branch:
-    description: "Current branch name for auto-detection"
-    required: true
-  experimental_mode:
-    description: "Enable experimental mode with timestamp-based versions"
-    required: false
-    default: "false"
-
-outputs:
-  version:
-    description: "Resolved Docker-compatible SemVer version"
-    value: ${{ steps.resolve.outputs.version }}
-  source:
-    description: "Source of version (release|override|branch)"
-    value: ${{ steps.resolve.outputs.source }}
-  normalized:
-    description: "Whether the version was normalized (true/false)"
-    value: ${{ steps.resolve.outputs.normalized }}
-
-runs:
-  using: "composite"
-  steps:
-    - name: Resolve and validate Docker version
-      id: resolve
-      shell: bash
-      env:
-        EXPLICIT_VERSION: ${{ inputs.version }}
-        CURRENT_BRANCH: ${{ inputs.current_branch }}
-        EXPERIMENTAL_MODE: ${{ inputs.experimental_mode }}
-      run: |
-        set -euo pipefail
-
-        # Function to validate SemVer format (Docker-compatible, no '+' build metadata)
-        validate_semver() {
-          local version="$1"
-          local context="$2"
-          
-          if [[ ! "$version" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?$ ]]; then
-            echo "ERROR: Invalid $context format. Must be semver without build metadata (e.g., 1.2.3, 1.2.3-alpha)"
-            echo "Provided: $version"
-            echo "Note: Docker tags cannot contain '+' characters. Use prerelease identifiers instead."
-            exit 1
-          fi
-        }
-
-        # Function to generate branch-based version
-        generate_branch_version() {
-          local branch="$1"
-          local use_timestamp="${2:-true}"
-          local timestamp
-          
-          if [[ "$use_timestamp" == "true" ]]; then
-            timestamp=$(date +%s)
-          else
-            timestamp=""
-          fi
-          
-          # Sanitize branch name for Docker compatibility
-          local sanitized_branch=$(echo "$branch" | sed 's/[^a-zA-Z0-9.-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
-          
-          # Additional safety: truncate if too long (reserve space for prefix and timestamp)
-          if (( ${#sanitized_branch} > 80 )); then
-            sanitized_branch="${sanitized_branch:0:80}"
-            echo "INFO: Branch name truncated for Docker compatibility" >&2
-          fi
-          local version
-          
-          # Generate version based on branch name (unified approach)
-          # All branches get alpha versions with sanitized branch name
-          if [[ -n "$timestamp" ]]; then
-            version="0.0.0-alpha-$sanitized_branch-$timestamp"
-            echo "INFO: Branch '$branch' detected - alpha version: $version" >&2
-          else
-            version="0.0.0-alpha-$sanitized_branch"
-            echo "INFO: Branch '$branch' detected - alpha version: $version" >&2
-          fi
-          
-          echo "$version"
-        }
-
-
-        # Input validation and sanitization
-        if [[ -z "$CURRENT_BRANCH" ]]; then
-          echo "ERROR: current_branch input is required"
-          exit 1
-        fi
-
-        # Security: Validate inputs to prevent command injection
-        # Use grep to check for dangerous characters (more reliable than bash regex)
-        validate_input() {
-          local input="$1"
-          local name="$2"
-          
-          # Check for dangerous characters using grep
-          if echo "$input" | grep -q '[;|&`$(){}\\[:space:]]'; then
-            echo "ERROR: $name contains potentially dangerous characters: $input"
-            echo "Input should only contain letters, numbers, hyphens, underscores, dots, and forward slashes"
-            return 1
-          fi
-          
-          return 0
-        }
-
-        # Validate current branch
-        if ! validate_input "$CURRENT_BRANCH" "Branch name"; then
-          exit 1
-        fi
-
-        # Validate explicit version if provided
-        if [[ -n "$EXPLICIT_VERSION" ]] && ! validate_input "$EXPLICIT_VERSION" "Explicit version"; then
-          exit 1
-        fi
-
-        # Main resolution logic (ultra-simplified)
-        NORMALIZED="false"
-
-        if [[ -n "$EXPLICIT_VERSION" ]]; then
-          # Use provided explicit version (from either workflow_call or manual input)
-          validate_semver "$EXPLICIT_VERSION" "explicit version"
-          
-          # Normalize to lowercase for Docker/ECR compatibility
-          RESOLVED_VERSION="${EXPLICIT_VERSION,,}"
-          if [[ "$EXPLICIT_VERSION" != "$RESOLVED_VERSION" ]]; then
-            NORMALIZED="true"
-            echo "INFO: Original version contained uppercase characters, normalized: $EXPLICIT_VERSION -> $RESOLVED_VERSION"
-          fi
-          
-          SOURCE="explicit"
-          echo "INFO: Using explicit version: $RESOLVED_VERSION"
-          
-        else
-          # Auto-generate version from branch name
-          if [[ "$EXPERIMENTAL_MODE" == "true" ]]; then
-            # Use timestamped version generation
-            echo "INFO: Experimental mode: generating timestamped version from branch: $CURRENT_BRANCH"
-            RESOLVED_VERSION=$(generate_branch_version "$CURRENT_BRANCH" "true")
-            SOURCE="experimental"
-          else
-            # Standard branch version (no timestamp)
-            echo "INFO: Auto-detecting version from branch: $CURRENT_BRANCH"
-            RESOLVED_VERSION=$(generate_branch_version "$CURRENT_BRANCH" "false")
-            SOURCE="branch"
-          fi
-          echo "Generated version: $RESOLVED_VERSION"
-        fi
-
-        # Final validation - ensure result is valid Docker tag
-        if [[ -z "$RESOLVED_VERSION" ]]; then
-          echo "ERROR: Failed to resolve version"
-          exit 1
-        fi
-
-        if (( ${#RESOLVED_VERSION} > 128 )); then
-          echo "ERROR: Version must be at most 128 characters (Docker limitation)"
-          echo "Generated version: $RESOLVED_VERSION (${#RESOLVED_VERSION} chars)"
-          exit 1
-        fi
-
-        if [[ ! "$RESOLVED_VERSION" =~ ^[a-z0-9._-]+$ ]]; then
-          echo "ERROR: Version contains invalid characters for Docker tags"
-          echo "Version: $RESOLVED_VERSION"
-          exit 1
-        fi
-
-        if [[ "$RESOLVED_VERSION" =~ ^[.-] || "$RESOLVED_VERSION" =~ [.-]$ ]]; then
-          echo "ERROR: Version must not start or end with '.' or '-'"
-          echo "Version: $RESOLVED_VERSION"
-          exit 1
-        fi
-
-        # Output results
-        echo "SUCCESS: Resolved Docker version: $RESOLVED_VERSION (source: $SOURCE)"
-        echo "version=$RESOLVED_VERSION" >> $GITHUB_OUTPUT
-        echo "source=$SOURCE" >> $GITHUB_OUTPUT
-        echo "normalized=$NORMALIZED" >> $GITHUB_OUTPUT

.github/actions/update-package-version/action.yml

@@ -1,160 +0,0 @@
-name: Update Package Version
-description: |
-  Safely updates package.json version with comprehensive validation and atomic operations.
-
-  Security Features:
-  - Path traversal protection
-  - SemVer validation with length limits
-  - Atomic file operations with backup/recovery
-  - JSON validation before applying changes
-
-  This action is designed to be secure by default and prevent common attack vectors.
-
-inputs:
-  version:
-    description: "Version to set in package.json (must be valid SemVer)"
-    required: true
-  package_path:
-    description: "Path to package.json file"
-    required: false
-    default: "./apps/web/package.json"
-
-outputs:
-  updated_version:
-    description: "The version that was actually set in package.json"
-    value: ${{ steps.update.outputs.updated_version }}
-
-runs:
-  using: "composite"
-  steps:
-    - name: Update and verify package.json version
-      id: update
-      shell: bash
-      env:
-        VERSION: ${{ inputs.version }}
-        PACKAGE_PATH: ${{ inputs.package_path }}
-      run: |
-        set -euo pipefail
-
-        # Validate inputs
-        if [[ -z "$VERSION" ]]; then
-          echo "ERROR: version input is required"
-          exit 1
-        fi
-
-        # Security: Validate package_path to prevent path traversal attacks
-        # Only allow paths within the workspace and must end with package.json
-        if [[ "$PACKAGE_PATH" =~ \.\./|^/|^~ ]]; then
-          echo "ERROR: Invalid package path - path traversal detected: $PACKAGE_PATH"
-          echo "Package path must be relative to workspace root and cannot contain '../', start with '/', or '~'"
-          exit 1
-        fi
-
-        if [[ ! "$PACKAGE_PATH" =~ package\.json$ ]]; then
-          echo "ERROR: Package path must end with 'package.json': $PACKAGE_PATH"
-          exit 1
-        fi
-
-        # Resolve to absolute path within workspace for additional security
-        WORKSPACE_ROOT="${GITHUB_WORKSPACE:-$(pwd)}"
-
-        # Use realpath to resolve both paths and handle symlinks properly
-        WORKSPACE_ROOT=$(realpath "$WORKSPACE_ROOT")
-        RESOLVED_PATH=$(realpath "${WORKSPACE_ROOT}/${PACKAGE_PATH}")
-
-        # Ensure WORKSPACE_ROOT has a trailing slash for proper prefix matching
-        WORKSPACE_ROOT="${WORKSPACE_ROOT}/"
-
-        # Use shell string matching to ensure RESOLVED_PATH is within workspace
-        # This is more secure than regex and handles edge cases properly
-        if [[ "$RESOLVED_PATH" != "$WORKSPACE_ROOT"* ]]; then
-          echo "ERROR: Resolved path is outside workspace: $RESOLVED_PATH"
-          echo "Workspace root: $WORKSPACE_ROOT"
-          exit 1
-        fi
-
-        if [[ ! -f "$RESOLVED_PATH" ]]; then
-          echo "ERROR: package.json not found at: $RESOLVED_PATH"
-          exit 1
-        fi
-
-        # Use resolved path for operations
-        PACKAGE_PATH="$RESOLVED_PATH"
-
-        # Validate SemVer format with additional security checks
-        if [[ ${#VERSION} -gt 128 ]]; then
-          echo "ERROR: Version string too long (${#VERSION} chars, max 128): $VERSION"
-          exit 1
-        fi
-
-        if [[ ! "$VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?$ ]]; then
-          echo "ERROR: Invalid SemVer format: $VERSION"
-          echo "Expected format: MAJOR.MINOR.PATCH[-PRERELEASE]"
-          echo "Only alphanumeric characters, dots, and hyphens allowed in prerelease"
-          exit 1
-        fi
-
-        # Additional validation: Check for reasonable version component sizes
-        # Extract base version (MAJOR.MINOR.PATCH) without prerelease/build metadata
-        if [[ "$VERSION" =~ ^([0-9]+\.[0-9]+\.[0-9]+) ]]; then
-          BASE_VERSION="${BASH_REMATCH[1]}"
-        else
-          echo "ERROR: Could not extract base version from: $VERSION"
-          exit 1
-        fi
-
-        # Split version components safely
-        IFS='.' read -ra VERSION_PARTS <<< "$BASE_VERSION"
-
-        # Validate component sizes (should have exactly 3 parts due to regex above)
-        if (( ${VERSION_PARTS[0]} > 999 || ${VERSION_PARTS[1]} > 999 || ${VERSION_PARTS[2]} > 999 )); then
-          echo "ERROR: Version components too large (max 999 each): $VERSION"
-          echo "Components: ${VERSION_PARTS[0]}.${VERSION_PARTS[1]}.${VERSION_PARTS[2]}"
-          exit 1
-        fi
-
-        echo "Updating package.json version to: $VERSION"
-
-        # Create backup for atomic operations
-        BACKUP_PATH="${PACKAGE_PATH}.backup.$$"
-        cp "$PACKAGE_PATH" "$BACKUP_PATH"
-
-        # Use jq to safely update the version field with error handling
-        if ! jq --arg version "$VERSION" '.version = $version' "$PACKAGE_PATH" > "${PACKAGE_PATH}.tmp"; then
-          echo "ERROR: jq failed to process package.json"
-          rm -f "${PACKAGE_PATH}.tmp" "$BACKUP_PATH"
-          exit 1
-        fi
-
-        # Validate the generated JSON before applying changes
-        if ! jq empty "${PACKAGE_PATH}.tmp" 2>/dev/null; then
-          echo "ERROR: Generated invalid JSON"
-          rm -f "${PACKAGE_PATH}.tmp" "$BACKUP_PATH"
-          exit 1
-        fi
-
-        # Atomic move operation
-        if ! mv "${PACKAGE_PATH}.tmp" "$PACKAGE_PATH"; then
-          echo "ERROR: Failed to update package.json"
-          # Restore backup
-          mv "$BACKUP_PATH" "$PACKAGE_PATH"
-          exit 1
-        fi
-
-        # Verify the update was successful
-        UPDATED_VERSION=$(jq -r '.version' "$PACKAGE_PATH" 2>/dev/null)
-
-        if [[ "$UPDATED_VERSION" != "$VERSION" ]]; then
-          echo "ERROR: Version update failed!"
-          echo "Expected: $VERSION"
-          echo "Actual: $UPDATED_VERSION"
-          # Restore backup
-          mv "$BACKUP_PATH" "$PACKAGE_PATH"
-          exit 1
-        fi
-
-        # Clean up backup on success
-        rm -f "$BACKUP_PATH"
-
-        echo "SUCCESS: Updated package.json version to: $UPDATED_VERSION"
-        echo "updated_version=$UPDATED_VERSION" >> $GITHUB_OUTPUT

.github/actions/upload-sentry-sourcemaps/action.yml

@@ -0,0 +1,104 @@
+name: "Upload Sentry Sourcemaps"
+description: "Extract sourcemaps from Docker image and upload to Sentry"
+
+inputs:
+  docker_image:
+    description: "Docker image to extract sourcemaps from"
+    required: true
+  release_version:
+    description: "Sentry release version (e.g., v1.2.3)"
+    required: true
+  sentry_auth_token:
+    description: "Sentry authentication token"
+    required: true
+  environment:
+    description: "Sentry environment (e.g., production, staging)"
+    required: false
+    default: "staging"
+
+runs:
+  using: "composite"
+  steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Extract sourcemaps from Docker image
+      shell: bash
+      env:
+        DOCKER_IMAGE: ${{ inputs.docker_image }}
+      run: |
+        set -euo pipefail
+
+        # Validate docker image format (basic validation)
+        if [[ ! "$DOCKER_IMAGE" =~ ^[a-zA-Z0-9._/-]+:[a-zA-Z0-9._-]+$ ]] && [[ ! "$DOCKER_IMAGE" =~ ^[a-zA-Z0-9._/-]+@sha256:[A-Fa-f0-9]{64}$ ]]; then
+          echo "❌ Error: Invalid docker image format. Must be in format 'image:tag' or 'image@sha256:hash'"
+          echo "Provided: ${DOCKER_IMAGE}"
+          exit 1
+        fi
+
+        echo "📦 Extracting sourcemaps from Docker image: ${DOCKER_IMAGE}"
+
+        # Create temporary container from the image and capture its ID
+        echo "Creating temporary container..."
+        CONTAINER_ID=$(docker create "$DOCKER_IMAGE")
+        echo "Container created with ID: ${CONTAINER_ID}"
+
+        # Set up cleanup function to ensure container is removed on script exit
+        cleanup_container() {
+          # Capture the current exit code to preserve it
+          local original_exit_code=$?
+          
+          echo "🧹 Cleaning up Docker container..."
+          
+          # Remove the container if it exists (ignore errors if already removed)
+          if [ -n "$CONTAINER_ID" ]; then
+            docker rm -f "$CONTAINER_ID" 2>/dev/null || true
+            echo "Container ${CONTAINER_ID} removed"
+          fi
+          
+          # Exit with the original exit code to preserve script success/failure status
+          exit $original_exit_code
+        }
+
+        # Register cleanup function to run on script exit (success or failure)
+        trap cleanup_container EXIT
+
+        # Extract .next directory containing sourcemaps
+        docker cp "$CONTAINER_ID:/home/nextjs/apps/web/.next" ./extracted-next
+
+        # Verify sourcemaps exist
+        if [ ! -d "./extracted-next/static/chunks" ]; then
+          echo "❌ Error: .next/static/chunks directory not found in Docker image"
+          echo "Expected structure: /home/nextjs/apps/web/.next/static/chunks/"
+          exit 1
+        fi
+
+        sourcemap_count=$(find ./extracted-next/static/chunks -name "*.map" | wc -l)
+        echo "✅ Found ${sourcemap_count} sourcemap files"
+
+        if [ "$sourcemap_count" -eq 0 ]; then
+          echo "❌ Error: No sourcemap files found. Check that productionBrowserSourceMaps is enabled."
+          exit 1
+        fi
+
+    - name: Create Sentry release and upload sourcemaps
+      uses: getsentry/action-release@v3
+      env:
+        SENTRY_AUTH_TOKEN: ${{ inputs.sentry_auth_token }}
+        SENTRY_ORG: formbricks
+        SENTRY_PROJECT: formbricks-cloud
+      with:
+        environment: ${{ inputs.environment }}
+        version: ${{ inputs.release_version }}
+        sourcemaps: "./extracted-next/"
+
+    - name: Clean up extracted files
+      shell: bash
+      if: always()
+      run: |
+        set -euo pipefail
+        # Clean up extracted files
+        rm -rf ./extracted-next
+        echo "🧹 Cleaned up extracted files"

.github/workflows/build-and-push-ecr.yml

@@ -1,94 +0,0 @@
-name: Build Cloud Deployment Images
-
-# This workflow builds Formbricks Docker images for ECR deployment:
-# - workflow_call: Used by releases with explicit SemVer versions
-# - workflow_dispatch: Auto-detects version from current branch or uses override
-
-on:
-  workflow_dispatch:
-    inputs:
-      version_override:
-        description: "Override version (SemVer only, e.g., 1.2.3). Leave empty to auto-detect from branch."
-        required: false
-        type: string
-      deploy_production:
-        description: "Tag image for production deployment"
-        required: false
-        default: false
-        type: boolean
-      deploy_staging:
-        description: "Tag image for staging deployment"
-        required: false
-        default: false
-        type: boolean
-  workflow_call:
-    inputs:
-      image_tag:
-        description: "Image tag to push (required for workflow_call)"
-        required: true
-        type: string
-      IS_PRERELEASE:
-        description: "Whether this is a prerelease (auto-tags for staging/production)"
-        required: false
-        type: boolean
-        default: false
-      MAKE_LATEST:
-        description: "Whether to tag for production (from GitHub release 'Set as the latest release' option)"
-        required: false
-        type: boolean
-        default: false
-    outputs:
-      IMAGE_TAG:
-        description: "Normalized image tag used for the build"
-        value: ${{ jobs.build-and-push.outputs.IMAGE_TAG }}
-      TAGS:
-        description: "Newline-separated list of ECR tags pushed"
-        value: ${{ jobs.build-and-push.outputs.TAGS }}
-
-permissions:
-  contents: read
-  id-token: write
-
-env:
-  ECR_REGION: ${{ vars.ECR_REGION }}
-  # ECR settings are sourced from repository/environment variables for portability across envs/forks
-  ECR_REGISTRY: ${{ vars.ECR_REGISTRY }}
-  ECR_REPOSITORY: ${{ vars.ECR_REPOSITORY }}
-
-jobs:
-  build-and-push:
-    name: Build and Push
-    runs-on: ubuntu-latest
-    timeout-minutes: 45
-    outputs:
-      IMAGE_TAG: ${{ steps.build.outputs.image_tag }}
-      TAGS: ${{ steps.build.outputs.registry_tags }}
-    steps:
-      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          egress-policy: audit
-
-      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-
-      - name: Build and push cloud deployment image
-        id: build
-        uses: ./.github/actions/build-and-push-docker
-        with:
-          registry_type: "ecr"
-          ecr_registry: ${{ env.ECR_REGISTRY }}
-          ecr_repository: ${{ env.ECR_REPOSITORY }}
-          ecr_region: ${{ env.ECR_REGION }}
-          aws_role_arn: ${{ secrets.AWS_ECR_PUSH_ROLE_ARN }}
-          version: ${{ inputs.version_override || inputs.image_tag }}
-          deploy_production: ${{ inputs.deploy_production }}
-          deploy_staging: ${{ inputs.deploy_staging }}
-          is_prerelease: ${{ inputs.IS_PRERELEASE }}
-          make_latest: ${{ inputs.MAKE_LATEST }}
-        env:
-          DEPOT_PROJECT_TOKEN: ${{ secrets.DEPOT_PROJECT_TOKEN }}
-          DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
-          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
-          DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/deploy-formbricks-cloud.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
     inputs:
       VERSION:
-        description: "The version of the Docker image to release (clean SemVer, e.g., 1.2.3)"
+        description: "The version of the Docker image to release, full image tag if image tag is v0.0.0 enter v0.0.0."
         required: true
         type: string
       REPOSITORY:

.github/workflows/docker-build-validation.yml

@@ -21,10 +21,10 @@ jobs:
     name: Validate Docker Build
     runs-on: ubuntu-latest
 
-    # Add PostgreSQL and Redis service containers
+    # Add PostgreSQL service container
     services:
       postgres:
-        image: pgvector/pgvector@sha256:9ae02a756ba16a2d69dd78058e25915e36e189bb36ddf01ceae86390d7ed786a
+        image: pgvector/pgvector:pg17
         env:
           POSTGRES_USER: test
           POSTGRES_PASSWORD: test
@@ -38,11 +38,6 @@ jobs:
           --health-timeout 5s
           --health-retries 5
 
-      redis:
-        image: valkey/valkey@sha256:12ba4f45a7c3e1d0f076acd616cb230834e75a77e8516dde382720af32832d6d
-        ports:
-          - 6379:6379
-
     steps:
       - name: Harden the runner (Audit all outbound calls)
         uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
@@ -72,7 +67,6 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
-            redis_url=redis://localhost:6379
 
       - name: Verify and Initialize PostgreSQL
         run: |
@@ -102,29 +96,6 @@ jobs:
           echo "Network configuration:"
           netstat -tulpn | grep 5432 || echo "No process listening on port 5432"
 
-      - name: Verify Redis/Valkey Connection
-        run: |
-          echo "Verifying Redis/Valkey connection..."
-          # Install Redis client to test connection
-          sudo apt-get update && sudo apt-get install -y redis-tools
-
-          # Test connection using redis-cli with timeout and proper error handling
-          echo "Testing Redis connection with 30 second timeout..."
-          if timeout 30 bash -c 'until redis-cli -h localhost -p 6379 ping >/dev/null 2>&1; do
-            echo "Waiting for Redis to be ready..."
-            sleep 2
-          done'; then
-            echo "✅ Redis connection successful"
-            redis-cli -h localhost -p 6379 info server | head -5
-          else
-            echo "❌ Redis connection failed after 30 seconds"
-            exit 1
-          fi
-
-          # Show network configuration for Redis
-          echo "Redis network configuration:"
-          netstat -tulpn | grep 6379 || echo "No process listening on port 6379"
-
       - name: Test Docker Image with Health Check
         shell: bash
         env:
@@ -142,7 +113,6 @@ jobs:
             -p 3000:3000 \
             -e DATABASE_URL="postgresql://test:test@host.docker.internal:5432/formbricks" \
             -e ENCRYPTION_KEY="$DUMMY_ENCRYPTION_KEY" \
-            -e REDIS_URL="redis://host.docker.internal:6379" \
             -d "formbricks-test:$GITHUB_SHA"
 
           # Start health check polling immediately (every 5 seconds for up to 5 minutes)

.github/workflows/docker-security-scan.yml

@@ -17,34 +17,7 @@ jobs:
   scan:
     name: Vulnerability Scan
     runs-on: ubuntu-latest
-    timeout-minutes: 30
     steps:
-      - name: Harden the runner
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          egress-policy: audit
-
-      - name: Checkout (for SARIF fingerprinting only)
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          fetch-depth: 1
-
-      - name: Determine ref and commit for upload
-        id: gitref
-        shell: bash
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_BRANCH: ${{ github.event.workflow_run.head_branch }}
-          HEAD_SHA: ${{ github.event.workflow_run.head_sha }}
-        run: |
-          set -euo pipefail
-          if [[ "${EVENT_NAME}" == "workflow_run" ]]; then
-            echo "ref=refs/heads/${HEAD_BRANCH}" >> "$GITHUB_OUTPUT"
-            echo "sha=${HEAD_SHA}" >> "$GITHUB_OUTPUT"
-          else
-            echo "ref=${GITHUB_REF}" >> "$GITHUB_OUTPUT"
-            echo "sha=${GITHUB_SHA}" >> "$GITHUB_OUTPUT"
-          fi
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3.5.0
         with:
@@ -62,9 +35,6 @@ jobs:
 
       - name: Upload Trivy scan results to GitHub Security tab
         uses: github/codeql-action/upload-sarif@a4e1a019f5e24960714ff6296aee04b736cbc3cf # v3.29.6
-        if: ${{ always() }}
+        if: ${{ always() && hashFiles('trivy-results.sarif') != '' }}
         with:
           sarif_file: "trivy-results.sarif"
-          ref: ${{ steps.gitref.outputs.ref }}
-          sha: ${{ steps.gitref.outputs.sha }}
-          category: "trivy-container-scan"

.github/workflows/e2e.yml

@@ -33,7 +33,7 @@ jobs:
     timeout-minutes: 60
     services:
       postgres:
-        image: pgvector/pgvector@sha256:9ae02a756ba16a2d69dd78058e25915e36e189bb36ddf01ceae86390d7ed786a
+        image: pgvector/pgvector:pg17
         env:
           POSTGRES_DB: postgres
           POSTGRES_USER: postgres
@@ -41,23 +41,27 @@ jobs:
         ports:
           - 5432:5432
         options: >-
-          --health-cmd="pg_isready -U postgres"
+          --health-cmd="pg_isready -U testuser"
           --health-interval=10s
           --health-timeout=5s
           --health-retries=5
       valkey:
-        image: valkey/valkey@sha256:12ba4f45a7c3e1d0f076acd616cb230834e75a77e8516dde382720af32832d6d
+        image: valkey/valkey:8.1.1
         ports:
           - 6379:6379
+        options: >-
+          --entrypoint "valkey-server"
+          --health-cmd="valkey-cli ping"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
         with:
-          egress-policy: audit
+          egress-policy: allow
           allowed-endpoints: |
             ee.formbricks.com:443
-            registry-1.docker.io:443
-            docker.io:443
 
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - uses: ./.github/actions/dangerous-git-checkout
@@ -88,69 +92,8 @@ jobs:
           sed -i "s|REDIS_URL=.*|REDIS_URL=redis://localhost:6379|" .env
           echo "" >> .env
           echo "E2E_TESTING=1" >> .env
-          echo "S3_REGION=us-east-1" >> .env
-          echo "S3_BUCKET_NAME=formbricks-e2e" >> .env
-          echo "S3_ENDPOINT_URL=http://localhost:9000" >> .env
-          echo "S3_ACCESS_KEY=devminio" >> .env
-          echo "S3_SECRET_KEY=devminio123" >> .env
-          echo "S3_FORCE_PATH_STYLE=1" >> .env
         shell: bash
 
-      - name: Install MinIO client (mc)
-        run: |
-          set -euo pipefail
-          MC_VERSION="RELEASE.2025-08-13T08-35-41Z"
-          MC_BASE="https://dl.min.io/client/mc/release/linux-amd64/archive"
-          MC_BIN="mc.${MC_VERSION}"
-          MC_SUM="${MC_BIN}.sha256sum"
-
-          curl -fsSL "${MC_BASE}/${MC_BIN}" -o "${MC_BIN}"
-          curl -fsSL "${MC_BASE}/${MC_SUM}" -o "${MC_SUM}"
-
-          sha256sum -c "${MC_SUM}"
-
-          chmod +x "${MC_BIN}"
-          sudo mv "${MC_BIN}" /usr/local/bin/mc
-
-      - name: Start MinIO Server
-        run: |
-          set -euo pipefail
-          
-          # Start MinIO server in background
-          docker run -d \
-            --name minio-server \
-            -p 9000:9000 \
-            -p 9001:9001 \
-            -e MINIO_ROOT_USER=devminio \
-            -e MINIO_ROOT_PASSWORD=devminio123 \
-            minio/minio:RELEASE.2025-09-07T16-13-09Z \
-            server /data --console-address :9001
-          
-          echo "MinIO server started"
-
-      - name: Wait for MinIO and create S3 bucket
-        run: |
-          set -euo pipefail
-
-          echo "Waiting for MinIO to be ready..."
-          ready=0
-          for i in {1..60}; do
-            if curl -fsS http://localhost:9000/minio/health/live >/dev/null; then
-              echo "MinIO is up after ${i} seconds"
-              ready=1
-              break
-            fi
-            sleep 1
-          done
-
-          if [ "$ready" -ne 1 ]; then
-            echo "::error::MinIO did not become ready within 60 seconds"
-            exit 1
-          fi
-
-          mc alias set local http://localhost:9000 devminio devminio123
-          mc mb --ignore-existing local/formbricks-e2e
-
       - name: Build App
         run: |
           pnpm build --filter=@formbricks/web...
@@ -166,12 +109,6 @@ jobs:
           cd apps/web && pnpm vitest run modules/core/rate-limit/rate-limit-load.test.ts
         shell: bash
 
-      - name: Run Cache Integration Tests
-        run: |
-          echo "Running cache integration tests with Redis/Valkey..."
-          cd packages/cache && pnpm vitest run src/cache-integration.test.ts
-        shell: bash
-
       - name: Check for Enterprise License
         run: |
           LICENSE_KEY=$(grep '^ENTERPRISE_LICENSE_KEY=' .env | cut -d'=' -f2-)
@@ -181,12 +118,6 @@ jobs:
           fi
           echo "License key length: ${#LICENSE_KEY}"
 
-      - name: Disable rate limiting for E2E tests
-        run: |
-          echo "RATE_LIMITING_DISABLED=1" >> .env
-          echo "Rate limiting disabled for E2E tests"
-        shell: bash
-
       - name: Run App
         run: |
           echo "Starting app with enterprise license..."
@@ -228,14 +159,11 @@ jobs:
         if: env.AZURE_ENABLED == 'true'
         env:
           PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
-          CI: true
         run: |
           pnpm test-e2e:azure
 
       - name: Run E2E Tests (Local)
         if: env.AZURE_ENABLED == 'false'
-        env:
-          CI: true
         run: |
           pnpm test:e2e
 

.github/workflows/formbricks-release.yml

@@ -8,103 +8,16 @@ permissions:
   contents: read
 
 jobs:
-  check-latest-release:
-    name: Check if this is the latest release
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    permissions:
-      contents: read
-    outputs:
-      is_latest: ${{ steps.compare_tags.outputs.is_latest }}
-    # This job determines if the current release was marked as "Set as the latest release"
-    # by comparing it with the latest release from GitHub API
-    steps:
-      - name: Harden the runner
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          egress-policy: audit
-
-      - name: Get latest release tag from API
-        id: get_latest_release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          REPO: ${{ github.repository }}
-        run: |
-          set -euo pipefail
-          
-          # Get the latest release tag from GitHub API with error handling
-          echo "Fetching latest release from GitHub API..."
-          
-          # Use curl with error handling - API returns 404 if no releases exist
-          http_code=$(curl -s -w "%{http_code}" -H "Authorization: token ${GITHUB_TOKEN}" \
-            "https://api.github.com/repos/${REPO}/releases/latest" -o /tmp/latest_release.json)
-          
-          if [[ "$http_code" == "404" ]]; then
-            echo "⚠️  No previous releases found (404). This appears to be the first release."
-            echo "latest_release=" >> $GITHUB_OUTPUT
-          elif [[ "$http_code" == "200" ]]; then
-            latest_release=$(jq -r .tag_name /tmp/latest_release.json)
-            if [[ "$latest_release" == "null" || -z "$latest_release" ]]; then
-              echo "⚠️  API returned null/empty tag_name. Treating as first release."
-              echo "latest_release=" >> $GITHUB_OUTPUT
-            else
-              echo "Latest release from API: ${latest_release}"
-              echo "latest_release=${latest_release}" >> $GITHUB_OUTPUT
-            fi
-          else
-            echo "❌ GitHub API error (HTTP ${http_code}). Treating as first release."
-            echo "latest_release=" >> $GITHUB_OUTPUT
-          fi
-          
-          echo "Current release tag: ${{ github.event.release.tag_name }}"
-
-      - name: Compare release tags
-        id: compare_tags
-        env:
-          CURRENT_TAG: ${{ github.event.release.tag_name }}
-          LATEST_TAG: ${{ steps.get_latest_release.outputs.latest_release }}
-        run: |
-          set -euo pipefail
-          
-          # Handle first release case (no previous releases)
-          if [[ -z "${LATEST_TAG}" ]]; then
-            echo "🎉 This is the first release (${CURRENT_TAG}) - treating as latest"
-            echo "is_latest=true" >> $GITHUB_OUTPUT
-          elif [[ "${CURRENT_TAG}" == "${LATEST_TAG}" ]]; then
-            echo "✅ This release (${CURRENT_TAG}) is marked as the latest release"
-            echo "is_latest=true" >> $GITHUB_OUTPUT
-          else
-            echo "ℹ️  This release (${CURRENT_TAG}) is not the latest release (latest: ${LATEST_TAG})"
-            echo "is_latest=false" >> $GITHUB_OUTPUT
-          fi
-  docker-build-community:
-    name: Build & release community docker image
+  docker-build:
+    name: Build & release docker image
     permissions:
       contents: read
       packages: write
       id-token: write
     uses: ./.github/workflows/release-docker-github.yml
     secrets: inherit
-    needs:
-      - check-latest-release
     with:
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
-
-  docker-build-cloud:
-    name: Build & push Formbricks Cloud to ECR
-    permissions:
-      contents: read
-      id-token: write
-    uses: ./.github/workflows/build-and-push-ecr.yml
-    secrets: inherit
-    with:
-      image_tag: ${{ needs.docker-build-community.outputs.VERSION }}
-      IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
-    needs:
-      - check-latest-release
-      - docker-build-community
 
   helm-chart-release:
     name: Release Helm Chart
@@ -114,44 +27,48 @@ jobs:
     uses: ./.github/workflows/release-helm-chart.yml
     secrets: inherit
     needs:
-      - docker-build-community
+      - docker-build
     with:
-      VERSION: ${{ needs.docker-build-community.outputs.VERSION }}
+      VERSION: ${{ needs.docker-build.outputs.VERSION }}
 
-  verify-cloud-build:
-    name: Verify Cloud Build Outputs
-    runs-on: ubuntu-latest
-    timeout-minutes: 5 # Simple verification should be quick
+  deploy-formbricks-cloud:
+    name: Deploy Helm Chart to Formbricks Cloud
+    permissions:
+      contents: read
+      id-token: write
+    secrets: inherit
+    uses: ./.github/workflows/deploy-formbricks-cloud.yml
     needs:
-      - docker-build-cloud
+      - docker-build
+      - helm-chart-release
+    with:
+      VERSION: v${{ needs.docker-build.outputs.VERSION }}
+      ENVIRONMENT: ${{ github.event.release.prerelease && 'staging' || 'production' }}
+
+  upload-sentry-sourcemaps:
+    name: Upload Sentry Sourcemaps
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    needs:
+      - docker-build
+      - deploy-formbricks-cloud
     steps:
-      - name: Harden the runner
+      - name: Harden the runner (Audit all outbound calls)
         uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
         with:
           egress-policy: audit
 
-      - name: Display ECR build outputs
-        env:
-          IMAGE_TAG: ${{ needs.docker-build-cloud.outputs.IMAGE_TAG }}
-          TAGS: ${{ needs.docker-build-cloud.outputs.TAGS }}
-        run: |
-          set -euo pipefail
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 0
 
-          echo "✅ ECR Build Completed Successfully"
-          echo "Image Tag: ${IMAGE_TAG}"
-          echo "ECR Tags:"
-          printf '%s\n' "${TAGS}"
-
-  move-stable-tag:
-    name: Move stable tag to release
-    permissions:
-      contents: write # Required for tag push operations in called workflow
-    uses: ./.github/workflows/move-stable-tag.yml
-    needs:
-      - check-latest-release
-      - docker-build-community # Ensure release is successful first
-    with:
-      release_tag: ${{ github.event.release.tag_name }}
-      commit_sha: ${{ github.sha }}
-      is_prerelease: ${{ github.event.release.prerelease }}
-      make_latest: ${{ needs.check-latest-release.outputs.is_latest }}
+      - name: Upload Sentry Sourcemaps
+        uses: ./.github/actions/upload-sentry-sourcemaps
+        continue-on-error: true
+        with:
+          docker_image: ghcr.io/formbricks/formbricks:v${{ needs.docker-build.outputs.VERSION }}
+          release_version: v${{ needs.docker-build.outputs.VERSION }}
+          sentry_auth_token: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          environment: ${{ github.event.release.prerelease && 'staging' || 'production' }}

.github/workflows/move-stable-tag.yml

@@ -1,101 +0,0 @@
-name: Move Stable Tag
-
-on:
-  workflow_call:
-    inputs:
-      release_tag:
-        description: "The release tag name (e.g., 1.2.3)"
-        required: true
-        type: string
-      commit_sha:
-        description: "The commit SHA to point the stable tag to"
-        required: true
-        type: string
-      is_prerelease:
-        description: "Whether this is a prerelease (stable tag won't be moved for prereleases)"
-        required: false
-        type: boolean
-        default: false
-      make_latest:
-        description: "Whether to move stable tag (from GitHub release 'Set as the latest release' option)"
-        required: false
-        type: boolean
-        default: false
-
-permissions:
-  contents: read
-
-# Prevent concurrent stable tag operations to avoid race conditions
-concurrency:
-  group: move-stable-tag-${{ github.repository }}
-  cancel-in-progress: true
-
-jobs:
-  move-stable-tag:
-    name: Move stable tag to release
-    runs-on: ubuntu-latest
-    timeout-minutes: 10 # Prevent hung git operations
-    permissions:
-      contents: write # Required to push tags
-    # Only move stable tag for non-prerelease versions AND when make_latest is true
-    if: ${{ !inputs.is_prerelease && inputs.make_latest }}
-    steps:
-      - name: Harden the runner
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
-        with:
-          egress-policy: audit
-
-      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          fetch-depth: 0 # Full history needed for tag operations
-
-      - name: Validate inputs
-        env:
-          RELEASE_TAG: ${{ inputs.release_tag }}
-          COMMIT_SHA: ${{ inputs.commit_sha }}
-        run: |
-          set -euo pipefail
-
-          # Validate release tag format
-          if [[ ! "$RELEASE_TAG" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$ ]]; then
-            echo "❌ Error: Invalid release tag format. Expected format: 1.2.3, 1.2.3-alpha"
-            echo "Provided: $RELEASE_TAG"
-            exit 1
-          fi
-
-          # Validate commit SHA format (40 character hex)
-          if [[ ! "$COMMIT_SHA" =~ ^[a-f0-9]{40}$ ]]; then
-            echo "❌ Error: Invalid commit SHA format. Expected 40 character hex string"
-            echo "Provided: $COMMIT_SHA"
-            exit 1
-          fi
-
-          echo "✅ Input validation passed"
-          echo "Release tag: $RELEASE_TAG"
-          echo "Commit SHA: $COMMIT_SHA"
-
-      - name: Move stable tag
-        env:
-          RELEASE_TAG: ${{ inputs.release_tag }}
-          COMMIT_SHA: ${{ inputs.commit_sha }}
-        run: |
-          set -euo pipefail
-
-          # Configure git
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-          # Verify the commit exists
-          if ! git cat-file -e "$COMMIT_SHA"; then
-            echo "❌ Error: Commit $COMMIT_SHA does not exist in this repository"
-            exit 1
-          fi
-
-          # Move stable tag to the release commit
-          echo "📌 Moving stable tag to commit: $COMMIT_SHA (release: $RELEASE_TAG)"
-          git tag -f stable "$COMMIT_SHA"
-          git push origin stable --force
-
-          echo "✅ Successfully moved stable tag to release $RELEASE_TAG"
-          echo "🔗 Stable tag now points to: https://github.com/${{ github.repository }}/commit/$COMMIT_SHA"

.github/workflows/pr-size-check.yml

@@ -1,165 +0,0 @@
-name: PR Size Check
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened]
-
-permissions:
-  contents: read
-  pull-requests: write
-
-jobs:
-  check-pr-size:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    
-    steps:
-      - name: Harden the runner
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          egress-policy: audit
-      
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          fetch-depth: 0
-      
-      - name: Check PR size
-        id: check-size
-        run: |
-          set -euo pipefail
-          
-          # Fetch the base branch
-          git fetch origin "${{ github.base_ref }}"
-          
-          # Get diff stats
-          diff_output=$(git diff --numstat "origin/${{ github.base_ref }}"...HEAD)
-          
-          # Count lines, excluding:
-          # - Test files (*.test.ts, *.spec.tsx, etc.)
-          # - Locale files (locales/*.json, i18n/*.json)
-          # - Lock files (pnpm-lock.yaml, package-lock.json, yarn.lock)
-          # - Generated files (dist/, coverage/, build/, .next/)
-          # - Storybook stories (*.stories.tsx)
-          
-          total_additions=0
-          total_deletions=0
-          counted_files=0
-          excluded_files=0
-          
-          while IFS=$'\t' read -r additions deletions file; do
-            # Skip if additions or deletions are "-" (binary files)
-            if [ "$additions" = "-" ] || [ "$deletions" = "-" ]; then
-              continue
-            fi
-            
-            # Check if file should be excluded
-            case "$file" in
-              *.test.ts|*.test.tsx|*.spec.ts|*.spec.tsx|*.test.js|*.test.jsx|*.spec.js|*.spec.jsx)
-                excluded_files=$((excluded_files + 1))
-                continue
-                ;;
-              */locales/*.json|*/i18n/*.json)
-                excluded_files=$((excluded_files + 1))
-                continue
-                ;;
-              pnpm-lock.yaml|package-lock.json|yarn.lock)
-                excluded_files=$((excluded_files + 1))
-                continue
-                ;;
-              dist/*|coverage/*|build/*|node_modules/*|test-results/*|playwright-report/*|.next/*|*.tsbuildinfo)
-                excluded_files=$((excluded_files + 1))
-                continue
-                ;;
-              *.stories.ts|*.stories.tsx|*.stories.js|*.stories.jsx)
-                excluded_files=$((excluded_files + 1))
-                continue
-                ;;
-            esac
-            
-            total_additions=$((total_additions + additions))
-            total_deletions=$((total_deletions + deletions))
-            counted_files=$((counted_files + 1))
-          done <<EOF
-          ${diff_output}
-          EOF
-          
-          total_changes=$((total_additions + total_deletions))
-          
-          echo "counted_files=${counted_files}" >> "${GITHUB_OUTPUT}"
-          echo "excluded_files=${excluded_files}" >> "${GITHUB_OUTPUT}"
-          echo "total_additions=${total_additions}" >> "${GITHUB_OUTPUT}"
-          echo "total_deletions=${total_deletions}" >> "${GITHUB_OUTPUT}"
-          echo "total_changes=${total_changes}" >> "${GITHUB_OUTPUT}"
-          
-          # Set flag if PR is too large (> 800 lines)
-          if [ ${total_changes} -gt 800 ]; then
-            echo "is_too_large=true" >> "${GITHUB_OUTPUT}"
-          else
-            echo "is_too_large=false" >> "${GITHUB_OUTPUT}"
-          fi
-      
-      - name: Comment on PR if too large
-        if: steps.check-size.outputs.is_too_large == 'true'
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const totalChanges = ${{ steps.check-size.outputs.total_changes }};
-            const countedFiles = ${{ steps.check-size.outputs.counted_files }};
-            const excludedFiles = ${{ steps.check-size.outputs.excluded_files }};
-            const additions = ${{ steps.check-size.outputs.total_additions }};
-            const deletions = ${{ steps.check-size.outputs.total_deletions }};
-            
-            const body = `## 🚨 PR Size Warning
-            
-This PR has approximately **${totalChanges} lines** of changes (${additions} additions, ${deletions} deletions across ${countedFiles} files).
-
-Large PRs (>800 lines) are significantly harder to review and increase the chance of merge conflicts. Consider splitting this into smaller, self-contained PRs.
-
-### 💡 Suggestions:
-- **Split by feature or module** - Break down into logical, independent pieces
-- **Create a sequence of PRs** - Each building on the previous one
-- **Branch off PR branches** - Don't wait for reviews to continue dependent work
-
-### 📊 What was counted:
-- ✅ Source files, stylesheets, configuration files
-- ❌ Excluded ${excludedFiles} files (tests, locales, locks, generated files)
-
-### 📚 Guidelines:
-- **Ideal:** 300-500 lines per PR
-- **Warning:** 500-800 lines
-- **Critical:** 800+ lines ⚠️
-
-If this large PR is unavoidable (e.g., migration, dependency update, major refactor), please explain in the PR description why it couldn't be split.`;
-            
-            // Check if we already commented
-            const { data: comments } = await github.rest.issues.listComments({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-            });
-            
-            const botComment = comments.find(comment => 
-              comment.user.type === 'Bot' && 
-              comment.body.includes('🚨 PR Size Warning')
-            );
-            
-            if (botComment) {
-              // Update existing comment
-              await github.rest.issues.updateComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                comment_id: botComment.id,
-                body: body
-              });
-            } else {
-              // Create new comment
-              await github.rest.issues.createComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.issue.number,
-                body: body
-              });
-            }
-

.github/workflows/release-docker-github-experimental.yml

@@ -1,31 +1,41 @@
-name: Build Community Testing Images
+name: Docker Release to Github Experimental
 
-# This workflow builds experimental/testing versions of Formbricks for self-hosting customers
-# to test fixes and features before official releases. Images are pushed to GHCR with
-# timestamped experimental versions for easy identification and testing.
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
 
 on:
   workflow_dispatch:
-    inputs:
-      version_override:
-        description: "Override version (SemVer only, e.g., 1.2.3-beta). Leave empty for auto-generated experimental version."
-        required: false
-        type: string
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}-experimental
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 
 permissions:
   contents: read
-  packages: write
-  id-token: write
 
 jobs:
-  build-community-testing:
-    name: Build Community Testing Image
+  build:
     runs-on: ubuntu-latest
-    timeout-minutes: 45
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    outputs:
+      DOCKER_IMAGE: ${{ steps.extract_image_info.outputs.DOCKER_IMAGE }}
+      RELEASE_VERSION: ${{ steps.extract_image_info.outputs.RELEASE_VERSION }}
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
         with:
           egress-policy: audit
 
@@ -34,17 +44,151 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Build and push community testing image
-        uses: ./.github/actions/build-and-push-docker
-        with:
-          registry_type: "ghcr"
-          ghcr_image_name: "${{ github.repository }}-experimental"
-          experimental_mode: "true"
-          version: ${{ inputs.version_override }}
+      - name: Generate SemVer version from branch or tag
+        id: generate_version
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          DEPOT_PROJECT_TOKEN: ${{ secrets.DEPOT_PROJECT_TOKEN }}
-          DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
-          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
-          DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          REF_NAME: ${{ github.ref_name }}
+          REF_TYPE: ${{ github.ref_type }}
+        run: |
+          # Get reference name and type from environment variables
+          echo "Reference type: $REF_TYPE"
+          echo "Reference name: $REF_NAME"
+
+          if [[ "$REF_TYPE" == "tag" ]]; then
+            # If running from a tag, use the tag name
+            if [[ "$REF_NAME" =~ ^v?[0-9]+\.[0-9]+\.[0-9]+.*$ ]]; then
+              # Tag looks like a SemVer, use it directly (remove 'v' prefix if present)
+              VERSION=$(echo "$REF_NAME" | sed 's/^v//')
+              echo "Using SemVer tag: $VERSION"
+            else
+              # Tag is not SemVer, treat as prerelease
+              SANITIZED_TAG=$(echo "$REF_NAME" | sed 's/[^a-zA-Z0-9.-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
+              VERSION="0.0.0-$SANITIZED_TAG"
+              echo "Using tag as prerelease: $VERSION"
+            fi
+          else
+            # Running from branch, use branch name as prerelease
+            SANITIZED_BRANCH=$(echo "$REF_NAME" | sed 's/[^a-zA-Z0-9.-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
+            VERSION="0.0.0-$SANITIZED_BRANCH"
+            echo "Using branch as prerelease: $VERSION"
+          fi
+
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+          echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
+          echo "Generated SemVer version: $VERSION"
+
+      - name: Update package.json version
+        run: |
+          sed -i "s/\"version\": \"0.0.0\"/\"version\": \"${{ env.VERSION }}\"/" ./apps/web/package.json
+          cat ./apps/web/package.json | grep version
+
+      - name: Set Sentry environment in .env
+        run: |
+          if ! grep -q "^SENTRY_ENVIRONMENT=staging$" .env 2>/dev/null; then
+            echo "SENTRY_ENVIRONMENT=staging" >> .env
+            echo "Added SENTRY_ENVIRONMENT=staging to .env file"
+          else
+            echo "SENTRY_ENVIRONMENT=staging already exists in .env file"
+          fi
+
+      - name: Set up Depot CLI
+        uses: depot/setup-action@b0b1ea4f69e92ebf5dea3f8713a1b0c37b2126a5 # v1.6.0
+
+      # Install the cosign tool except on PR
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3.8.2
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: depot/build-push-action@636daae76684e38c301daa0c5eca1c095b24e780 # v1.14.0
+        with:
+          project: tw0fqmsx3c
+          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          context: .
+          file: ./apps/web/Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          secrets: |
+            database_url=${{ secrets.DUMMY_DATABASE_URL }}
+            encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
+
+      - name: Extract image info for sourcemap upload
+        id: extract_image_info
+        run: |
+          # Use the first readable tag from metadata action output
+          DOCKER_IMAGE=$(echo "${{ steps.meta.outputs.tags }}" | head -n1 | xargs)
+          echo "DOCKER_IMAGE=$DOCKER_IMAGE" >> $GITHUB_OUTPUT
+
+          # Use the generated version for Sentry release
+          RELEASE_VERSION="$VERSION"
+          echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_OUTPUT
+
+          echo "Docker image: $DOCKER_IMAGE"
+          echo "Release version: $RELEASE_VERSION"
+          echo "Available tags: ${{ steps.meta.outputs.tags }}"
+
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}
+
+  upload-sentry-sourcemaps:
+    name: Upload Sentry Sourcemaps
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    needs:
+      - build
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Upload Sentry Sourcemaps
+        uses: ./.github/actions/upload-sentry-sourcemaps
+        continue-on-error: true
+        with:
+          docker_image: ${{ needs.build.outputs.DOCKER_IMAGE }}
+          release_version: ${{ needs.build.outputs.RELEASE_VERSION }}
+          sentry_auth_token: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          environment: staging

.github/workflows/release-docker-github.yml

@@ -1,4 +1,4 @@
-name: Release Community Docker Images
+name: Docker Release to Github
 
 # This workflow uses actions that are not certified by GitHub.
 # They are provided by a third-party and are governed by
@@ -13,11 +13,6 @@ on:
         required: false
         type: boolean
         default: false
-      MAKE_LATEST:
-        description: "Whether to tag as latest (from GitHub release 'Set as the latest release' option)"
-        required: false
-        type: boolean
-        default: false
     outputs:
       VERSION:
         description: release version
@@ -28,6 +23,8 @@ env:
   REGISTRY: ghcr.io
   # github.repository as <account>/<repo>
   IMAGE_NAME: ${{ github.repository }}
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 
 permissions:
   contents: read
@@ -35,7 +32,6 @@ permissions:
 jobs:
   build:
     runs-on: ubuntu-latest
-    timeout-minutes: 45
     permissions:
       contents: read
       packages: write
@@ -48,61 +44,102 @@ jobs:
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
         with:
           egress-policy: audit
 
       - name: Checkout repository
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - name: Extract release version from tag
+      - name: Get Release Tag
         id: extract_release_tag
         run: |
-          set -euo pipefail
+          # Extract version from tag (e.g., refs/tags/v1.2.3 -> 1.2.3)
+          TAG="$GITHUB_REF"
+          TAG=${TAG#refs/tags/v}
 
-          # Extract tag name with fallback logic for different trigger contexts
-          if [[ -n "${RELEASE_TAG:-}" ]]; then
-            TAG="$RELEASE_TAG"
-            echo "Using RELEASE_TAG override: $TAG"
-          elif [[ "$GITHUB_REF_NAME" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?$ ]] || [[ "$GITHUB_REF_NAME" =~ ^v[0-9] ]]; then
-            TAG="$GITHUB_REF_NAME"
-            echo "Using GITHUB_REF_NAME (looks like tag): $TAG"
-          else
-            # Fallback: extract from GITHUB_REF for direct tag triggers
-            TAG="${GITHUB_REF#refs/tags/}"
-            if [[ -z "$TAG" || "$TAG" == "$GITHUB_REF" ]]; then
-              TAG="$GITHUB_REF_NAME"
-              echo "Using GITHUB_REF_NAME as final fallback: $TAG"
-            else
-              echo "Extracted from GITHUB_REF: $TAG"
-            fi
-          fi
-
-          # Strip v-prefix if present (normalize to clean SemVer)
-          TAG=${TAG#[vV]}
-
-          # Validate SemVer format (supports prereleases like 4.0.0-rc.1)
-          if [[ ! "$TAG" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?$ ]]; then
-            echo "ERROR: Invalid tag format '$TAG'. Expected SemVer (e.g., 1.2.3, 4.0.0-rc.1)"
+          # Validate the extracted tag format
+          if [[ ! "$TAG" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$ ]]; then
+            echo "❌ Error: Invalid release tag format after extraction. Must be semver (e.g., 1.2.3, 1.2.3-alpha)"
+            echo "Original ref: $GITHUB_REF"
+            echo "Extracted tag: $TAG"
             exit 1
           fi
 
-          echo "VERSION=$TAG" >> $GITHUB_OUTPUT
-          echo "Using version: $TAG"
+          # Safely add to environment variables
+          echo "RELEASE_TAG=$TAG" >> $GITHUB_ENV
 
-      - name: Build and push community release image
-        id: build
-        uses: ./.github/actions/build-and-push-docker
+          echo "VERSION=$TAG" >> $GITHUB_OUTPUT
+          echo "Using tag-based version: $TAG"
+
+      - name: Update package.json version
+        run: |
+          sed -i "s/\"version\": \"0.0.0\"/\"version\": \"${{ env.RELEASE_TAG }}\"/" ./apps/web/package.json
+          cat ./apps/web/package.json | grep version
+
+      - name: Set up Depot CLI
+        uses: depot/setup-action@b0b1ea4f69e92ebf5dea3f8713a1b0c37b2126a5 # v1.6.0
+
+      # Install the cosign tool except on PR
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3.8.2
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
         with:
-          registry_type: "ghcr"
-          ghcr_image_name: ${{ env.IMAGE_NAME }}
-          version: ${{ steps.extract_release_tag.outputs.VERSION }}
-          is_prerelease: ${{ inputs.IS_PRERELEASE }}
-          make_latest: ${{ inputs.MAKE_LATEST }}
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            # Default semver tags (version, major.minor, major)
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            # Only tag as 'latest' for stable releases (not prereleases)
+            type=raw,value=latest,enable=${{ inputs.IS_PRERELEASE != 'true' }}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: depot/build-push-action@636daae76684e38c301daa0c5eca1c095b24e780 # v1.14.0
+        with:
+          project: tw0fqmsx3c
+          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          context: .
+          file: ./apps/web/Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          secrets: |
+            database_url=${{ secrets.DUMMY_DATABASE_URL }}
+            encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
+
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          DEPOT_PROJECT_TOKEN: ${{ secrets.DEPOT_PROJECT_TOKEN }}
-          DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
-          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
-          DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

.github/workflows/release-helm-chart.yml

@@ -19,7 +19,7 @@ jobs:
       contents: read
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
         with:
           egress-policy: audit
 
@@ -59,35 +59,14 @@ jobs:
         uses: dcarbone/install-yq-action@4075b4dca348d74bd83f2bf82d30f25d7c54539b # v1.3.1
 
       - name: Update Chart.yaml with new version
-        env:
-          VERSION: ${{ env.VERSION }}
         run: |
-          set -euo pipefail
-
-          echo "Updating Chart.yaml with version: ${VERSION}"
-          yq -i ".version = \"${VERSION}\"" helm-chart/Chart.yaml
-          yq -i ".appVersion = \"${VERSION}\"" helm-chart/Chart.yaml
-
-          echo "✅ Successfully updated Chart.yaml"
+          yq -i ".version = \"$VERSION\"" helm-chart/Chart.yaml
+          yq -i ".appVersion = \"v$VERSION\"" helm-chart/Chart.yaml
 
       - name: Package Helm chart
-        env:
-          VERSION: ${{ env.VERSION }}
         run: |
-          set -euo pipefail
-
-          echo "Packaging Helm chart version: ${VERSION}"
           helm package ./helm-chart
 
-          echo "✅ Successfully packaged formbricks-${VERSION}.tgz"
-
       - name: Push Helm chart to GitHub Container Registry
-        env:
-          VERSION: ${{ env.VERSION }}
         run: |
-          set -euo pipefail
-
-          echo "Pushing Helm chart to registry: formbricks-${VERSION}.tgz"
-          helm push "formbricks-${VERSION}.tgz" oci://ghcr.io/formbricks/helm-charts
-
-          echo "✅ Successfully pushed Helm chart to registry"
+          helm push "formbricks-$VERSION.tgz" oci://ghcr.io/formbricks/helm-charts

.github/workflows/terraform-plan-and-apply.yml

@@ -0,0 +1,86 @@
+name: "Terraform"
+
+on:
+  workflow_dispatch:
+  # TODO: enable it back when migration is completed.
+  push:
+    branches:
+      - main
+    paths:
+      - "infra/terraform/**"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "infra/terraform/**"
+
+permissions:
+  contents: read
+
+jobs:
+  terraform:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      pull-requests: write
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: Tailscale
+        uses: tailscale/github-action@84a3f23bb4d843bcf4da6cf824ec1be473daf4de # v3.2.3
+        with:
+          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
+          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
+          tags: tag:github
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@f24d7193d98baebaeacc7e2227925dd47cc267f5 # v4.2.0
+        with:
+          role-to-assume: ${{ secrets.AWS_ASSUME_ROLE_ARN }}
+          aws-region: "eu-central-1"
+
+      - name: Setup Terraform
+        uses: hashicorp/setup-terraform@b9cd54a3c349d3f38e8881555d616ced269862dd # v3.1.2
+
+      - name: Terraform Format
+        id: fmt
+        run: terraform fmt -check -recursive
+        continue-on-error: true
+        working-directory: infra/terraform
+
+      - name: Terraform Init
+        id: init
+        run: terraform init
+        working-directory: infra/terraform
+
+      - name: Terraform Validate
+        id: validate
+        run: terraform validate
+        working-directory: infra/terraform
+
+      - name: Terraform Plan
+        id: plan
+        run: terraform plan -out .planfile
+        working-directory: infra/terraform
+
+      - name: Post PR comment
+        uses: borchero/terraform-plan-comment@434458316f8f24dd073cd2561c436cce41dc8f34 # v2.4.1
+        if: always() && github.ref != 'refs/heads/main' && (steps.plan.outcome == 'success' || steps.plan.outcome == 'failure')
+        with:
+          token: ${{ github.token }}
+          planfile: .planfile
+          working-directory: "infra/terraform"
+
+      - name: Terraform Apply
+        id: apply
+        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+        run: terraform apply .planfile
+        working-directory: "infra/terraform"

.github/workflows/upload-sentry-sourcemaps.yml

@@ -0,0 +1,48 @@
+name: Upload Sentry Sourcemaps (Manual)
+
+on:
+  workflow_dispatch:
+    inputs:
+      docker_image:
+        description: "Docker image to extract sourcemaps from"
+        required: true
+        type: string
+      release_version:
+        description: "Release version (e.g., v1.2.3)"
+        required: true
+        type: string
+      tag_version:
+        description: "Docker image tag (leave empty to use release_version)"
+        required: false
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  upload-sourcemaps:
+    name: Upload Sourcemaps to Sentry
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Set Docker Image
+        run: echo "DOCKER_IMAGE=${DOCKER_IMAGE}" >> $GITHUB_ENV
+        env:
+          DOCKER_IMAGE: ${{ inputs.docker_image }}:${{ inputs.tag_version != '' && inputs.tag_version || inputs.release_version }}
+
+      - name: Upload Sourcemaps to Sentry
+        uses: ./.github/actions/upload-sentry-sourcemaps
+        with:
+          docker_image: ${{ env.DOCKER_IMAGE }}
+          release_version: ${{ inputs.release_version }}
+          sentry_auth_token: ${{ secrets.SENTRY_AUTH_TOKEN }}

.gitignore

@@ -56,9 +56,21 @@ packages/database/migrations
 branch.json
 .vercel
 
+# Terraform
+infra/terraform/.terraform/
+**/.terraform.lock.hcl
+**/terraform.tfstate
+**/terraform.tfstate.*
+**/crash.log
+**/override.tf
+**/override.tf.json
+**/*.tfvars
+**/*.tfvars.json
+**/.terraformrc
+**/terraform.rc
+
 # IntelliJ IDEA
 /.idea/
 /*.iml
 packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdata
 .cursorrules
-i18n.cache

.tolgeerc.json

@@ -35,14 +35,6 @@
       {
         "language": "ro-RO",
         "path": "./apps/web/locales/ro-RO.json"
-      },
-      {
-        "language": "ja-JP",
-        "path": "./apps/web/locales/ja-JP.json"
-      },
-      {
-        "language": "zh-Hans-CN",
-        "path": "./apps/web/locales/zh-Hans-CN.json"
       }
     ],
     "forceMode": "OVERRIDE"

.vscode/settings.json

@@ -1,6 +1,4 @@
 {
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-  "eslint.workingDirectories": [{ "mode": "auto" }],
   "javascript.updateImportsOnFileMove.enabled": "always",
   "sonarlint.connectedMode.project": {
     "connectionId": "formbricks",

README.md

@@ -21,7 +21,6 @@ The Open Source Qualtrics Alternative
 
 <p align="center">
 <a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
-<a href="https://insights.linuxfoundation.org/project/formbricks"><img src="https://insights.linuxfoundation.org/api/badge/health-score?project=formbricks"></a>
 <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
 <a href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
 <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>

apps/storybook/.storybook/preview.ts

@@ -1,8 +1,6 @@
 import type { Preview } from "@storybook/react-vite";
 import { TolgeeProvider } from "@tolgee/react";
 import React from "react";
-// Import translation data for Storybook
-import enUSTranslations from "../../web/locales/en-US.json";
 import "../../web/modules/ui/globals.css";
 import { TolgeeBase } from "../../web/tolgee/shared";
 
@@ -14,16 +12,7 @@ const withTolgee = (Story: any) => {
 
   return React.createElement(
     TolgeeProvider,
-    {
-      tolgee,
-      fallback: "Loading",
-      ssr: {
-        language: "en-US",
-        staticData: {
-          "en-US": enUSTranslations,
-        },
-      },
-    },
+    { tolgee, fallback: "Loading", ssr: { language: "en", staticData: {} } },
     React.createElement(Story)
   );
 };

apps/storybook/package.json

@@ -26,7 +26,7 @@
     "eslint-plugin-storybook": "9.0.15",
     "prop-types": "15.8.1",
     "storybook": "9.0.15",
-    "vite": "6.3.6",
+    "vite": "6.3.5",
     "@storybook/addon-docs": "9.0.15"
   }
 }

apps/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-alpine3.22 AS base
+FROM node:22-alpine3.21 AS base
 
 #
 ## step 1: Prune monorepo
@@ -30,13 +30,9 @@ COPY apps/web/scripts/docker/read-secrets.sh /tmp/read-secrets.sh
 RUN chmod +x /tmp/read-secrets.sh
 
 # Increase Node.js memory limit as a regular build argument
-ARG NODE_OPTIONS="--max_old_space_size=8192"
+ARG NODE_OPTIONS="--max_old_space_size=4096"
 ENV NODE_OPTIONS=${NODE_OPTIONS}
 
-# Target architecture - automatically provided by Docker in multi-platform builds
-# but needs explicit declaration for some build systems (like Depot)
-ARG TARGETARCH
-
 # Set the working directory
 WORKDIR /app
 
@@ -61,8 +57,6 @@ RUN pnpm build --filter=@formbricks/database
 # This mounts the secrets only during this build step without storing them in layers
 RUN --mount=type=secret,id=database_url \
     --mount=type=secret,id=encryption_key \
-    --mount=type=secret,id=redis_url \
-    --mount=type=secret,id=sentry_auth_token \
     /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...
 
 # Extract Prisma version
@@ -115,6 +109,9 @@ RUN chown -R nextjs:nextjs ./node_modules/.prisma && chmod -R 755 ./node_modules
 COPY --from=installer /prisma_version.txt .
 RUN chown nextjs:nextjs ./prisma_version.txt && chmod 644 ./prisma_version.txt
 
+COPY /docker/cronjobs /app/docker/cronjobs
+RUN chmod -R 755 /app/docker/cronjobs
+
 COPY --from=installer /app/node_modules/@paralleldrive/cuid2 ./node_modules/@paralleldrive/cuid2
 RUN chmod -R 755 ./node_modules/@paralleldrive/cuid2
 

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks.test.tsx

@@ -23,12 +23,12 @@ describe("ConnectWithFormbricks", () => {
   const webAppUrl = "http://app";
   const channel = {} as any;
 
-  test("renders waiting state when appSetupCompleted is false", () => {
+  test("renders waiting state when widgetSetupCompleted is false", () => {
     render(
       <ConnectWithFormbricks
         environment={environment}
         publicDomain={webAppUrl}
-        appSetupCompleted={false}
+        widgetSetupCompleted={false}
         channel={channel}
       />
     );
@@ -36,12 +36,12 @@ describe("ConnectWithFormbricks", () => {
     expect(screen.getByText("environments.connect.waiting_for_your_signal")).toBeInTheDocument();
   });
 
-  test("renders success state when appSetupCompleted is true", () => {
+  test("renders success state when widgetSetupCompleted is true", () => {
     render(
       <ConnectWithFormbricks
         environment={environment}
         publicDomain={webAppUrl}
-        appSetupCompleted={true}
+        widgetSetupCompleted={true}
         channel={channel}
       />
     );
@@ -54,7 +54,7 @@ describe("ConnectWithFormbricks", () => {
       <ConnectWithFormbricks
         environment={environment}
         publicDomain={webAppUrl}
-        appSetupCompleted={true}
+        widgetSetupCompleted={true}
         channel={channel}
       />
     );
@@ -68,7 +68,7 @@ describe("ConnectWithFormbricks", () => {
       <ConnectWithFormbricks
         environment={environment}
         publicDomain={webAppUrl}
-        appSetupCompleted={false}
+        widgetSetupCompleted={false}
         channel={channel}
       />
     );

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks.tsx

@@ -13,14 +13,14 @@ import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";
 interface ConnectWithFormbricksProps {
   environment: TEnvironment;
   publicDomain: string;
-  appSetupCompleted: boolean;
+  widgetSetupCompleted: boolean;
   channel: TProjectConfigChannel;
 }
 
 export const ConnectWithFormbricks = ({
   environment,
   publicDomain,
-  appSetupCompleted,
+  widgetSetupCompleted,
   channel,
 }: ConnectWithFormbricksProps) => {
   const { t } = useTranslate();
@@ -51,15 +51,15 @@ export const ConnectWithFormbricks = ({
             environmentId={environment.id}
             publicDomain={publicDomain}
             channel={channel}
-            appSetupCompleted={appSetupCompleted}
+            widgetSetupCompleted={widgetSetupCompleted}
           />
         </div>
         <div
           className={cn(
             "flex h-[30rem] w-1/2 flex-col items-center justify-center rounded-lg border text-center",
-            appSetupCompleted ? "border-green-500 bg-green-100" : "border-slate-300 bg-slate-200"
+            widgetSetupCompleted ? "border-green-500 bg-green-100" : "border-slate-300 bg-slate-200"
           )}>
-          {appSetupCompleted ? (
+          {widgetSetupCompleted ? (
             <div>
               <p className="text-3xl">{t("environments.connect.congrats")}</p>
               <p className="pt-4 text-sm font-medium text-slate-600">
@@ -81,9 +81,9 @@ export const ConnectWithFormbricks = ({
       </div>
       <Button
         id="finishOnboarding"
-        variant={appSetupCompleted ? "default" : "ghost"}
+        variant={widgetSetupCompleted ? "default" : "ghost"}
         onClick={handleFinishOnboarding}>
-        {appSetupCompleted
+        {widgetSetupCompleted
           ? t("environments.connect.finish_onboarding")
           : t("environments.connect.do_it_later")}
         <ArrowRight />

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.test.tsx

@@ -35,7 +35,7 @@ describe("OnboardingSetupInstructions", () => {
     environmentId: "env-123",
     publicDomain: "https://example.com",
     channel: "app" as const, // Assuming channel is either "app" or "website"
-    appSetupCompleted: false,
+    widgetSetupCompleted: false,
   };
 
   test("renders HTML tab content by default", () => {

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx

@@ -20,14 +20,14 @@ interface OnboardingSetupInstructionsProps {
   environmentId: string;
   publicDomain: string;
   channel: TProjectConfigChannel;
-  appSetupCompleted: boolean;
+  widgetSetupCompleted: boolean;
 }
 
 export const OnboardingSetupInstructions = ({
   environmentId,
   publicDomain,
   channel,
-  appSetupCompleted,
+  widgetSetupCompleted,
 }: OnboardingSetupInstructionsProps) => {
   const { t } = useTranslate();
   const [activeTab, setActiveTab] = useState(tabs[0].id);
@@ -137,7 +137,7 @@ export const OnboardingSetupInstructions = ({
             <div className="mt-4 flex justify-between space-x-2">
               <Button
                 id="onboarding-inapp-connect-copy-code"
-                variant={appSetupCompleted ? "secondary" : "default"}
+                variant={widgetSetupCompleted ? "secondary" : "default"}
                 onClick={() => {
                   navigator.clipboard.writeText(
                     channel === "app" ? htmlSnippetForAppSurveys : htmlSnippetForWebsiteSurveys

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -42,7 +42,7 @@ const Page = async (props: ConnectPageProps) => {
       <ConnectWithFormbricks
         environment={environment}
         publicDomain={publicDomain}
-        appSetupCompleted={environment.appSetupCompleted}
+        widgetSetupCompleted={environment.appSetupCompleted}
         channel={channel}
       />
       <Button

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates.ts

@@ -1,7 +1,3 @@
-import { createId } from "@paralleldrive/cuid2";
-import { TFnType } from "@tolgee/react";
-import { logger } from "@formbricks/logger";
-import { TXMTemplate } from "@formbricks/types/templates";
 import {
   buildCTAQuestion,
   buildNPSQuestion,
@@ -9,6 +5,10 @@ import {
   buildRatingQuestion,
   getDefaultEndingCard,
 } from "@/app/lib/survey-builder";
+import { createId } from "@paralleldrive/cuid2";
+import { TFnType } from "@tolgee/react";
+import { logger } from "@formbricks/logger";
+import { TXMTemplate } from "@formbricks/types/templates";
 
 export const getXMSurveyDefault = (t: TFnType): TXMTemplate => {
   try {
@@ -105,7 +105,7 @@ const starRatingSurvey = (t: TFnType): TXMTemplate => {
       }),
       buildCTAQuestion({
         id: reusableQuestionIds[1],
-        subheader: t("templates.star_rating_survey_question_2_html"),
+        html: t("templates.star_rating_survey_question_2_html"),
         logic: [
           {
             id: createId(),
@@ -322,7 +322,7 @@ const smileysRatingSurvey = (t: TFnType): TXMTemplate => {
       }),
       buildCTAQuestion({
         id: reusableQuestionIds[1],
-        subheader: t("templates.smileys_survey_question_2_html"),
+        html: t("templates.smileys_survey_question_2_html"),
         logic: [
           {
             id: createId(),

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.test.tsx

@@ -45,11 +45,22 @@ afterEach(() => {
 });
 
 describe("LandingSidebar component", () => {
-  const user = { id: "u1", name: "Alice", email: "alice@example.com" } as any;
+  const user = { id: "u1", name: "Alice", email: "alice@example.com", imageUrl: "" } as any;
   const organization = { id: "o1", name: "orgOne" } as any;
+  const organizations = [
+    { id: "o2", name: "betaOrg" },
+    { id: "o1", name: "alphaOrg" },
+  ] as any;
 
   test("renders logo, avatar, and initial modal closed", () => {
-    render(<LandingSidebar user={user} organization={organization} />);
+    render(
+      <LandingSidebar
+        isMultiOrgEnabled={false}
+        user={user}
+        organization={organization}
+        organizations={organizations}
+      />
+    );
 
     // Formbricks logo
     expect(screen.getByAltText("environments.formbricks_logo")).toBeInTheDocument();
@@ -60,7 +71,14 @@ describe("LandingSidebar component", () => {
   });
 
   test("clicking logout triggers signOut", async () => {
-    render(<LandingSidebar user={user} organization={organization} />);
+    render(
+      <LandingSidebar
+        isMultiOrgEnabled={false}
+        user={user}
+        organization={organization}
+        organizations={organizations}
+      />
+    );
 
     // Open user dropdown by clicking on avatar trigger
     const trigger = screen.getByTestId("avatar").parentElement;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx

@@ -1,14 +1,8 @@
 "use client";
 
-import { useTranslate } from "@tolgee/react";
-import { ArrowUpRightIcon, ChevronRightIcon, LogOutIcon } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-import { useState } from "react";
-import { TOrganization } from "@formbricks/types/organizations";
-import { TUser } from "@formbricks/types/user";
 import FBLogo from "@/images/formbricks-wordmark.svg";
 import { cn } from "@/lib/cn";
+import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
@@ -16,20 +10,48 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { useTranslate } from "@tolgee/react";
+import { ArrowUpRightIcon, ChevronRightIcon, LogOutIcon, PlusIcon } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+import { TOrganization } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
 
 interface LandingSidebarProps {
+  isMultiOrgEnabled: boolean;
   user: TUser;
   organization: TOrganization;
+  organizations: TOrganization[];
 }
 
-export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
+export const LandingSidebar = ({
+  isMultiOrgEnabled,
+  user,
+  organization,
+  organizations,
+}: LandingSidebarProps) => {
   const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState<boolean>(false);
 
   const { t } = useTranslate();
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
+  const router = useRouter();
+
+  const handleEnvironmentChangeByOrganization = (organizationId: string) => {
+    router.push(`/organizations/${organizationId}/`);
+  };
+
   const dropdownNavigation = [
     {
       label: t("common.documentation"),
@@ -39,6 +61,13 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
     },
   ];
 
+  const currentOrganizationId = organization?.id;
+  const currentOrganizationName = capitalizeFirstLetter(organization?.name);
+
+  const sortedOrganizations = useMemo(() => {
+    return [...organizations].sort((a, b) => a.name.localeCompare(b.name));
+  }, [organizations]);
+
   return (
     <aside
       className={cn(
@@ -52,25 +81,26 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
             asChild
             id="userDropdownTrigger"
             className="w-full rounded-br-xl border-t p-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
-            <button
-              type="button"
-              className={cn("flex w-full cursor-pointer flex-row items-center gap-3 text-left")}
-              aria-haspopup="menu">
-              <ProfileAvatar userId={user.id} />
-              <div className="grow overflow-hidden">
-                <p
-                  title={user?.email}
-                  className={cn(
-                    "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
-                  )}>
-                  {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
-                </p>
-                <p title={organization?.name} className="truncate text-sm text-slate-500">
-                  {organization?.name}
-                </p>
-              </div>
-              <ChevronRightIcon className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")} />
-            </button>
+            <div tabIndex={0} className={cn("flex cursor-pointer flex-row items-center gap-3")}>
+              <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
+              <>
+                <div className="grow overflow-hidden">
+                  <p
+                    title={user?.email}
+                    className={cn(
+                      "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
+                    )}>
+                    {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
+                  </p>
+                  <p
+                    title={capitalizeFirstLetter(organization?.name)}
+                    className="truncate text-sm text-slate-500">
+                    {capitalizeFirstLetter(organization?.name)}
+                  </p>
+                </div>
+                <ChevronRightIcon className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")} />
+              </>
+            </div>
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
@@ -82,13 +112,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
             {/* Dropdown Items */}
 
             {dropdownNavigation.map((link) => (
-              <Link
-                key={link.href}
-                id={link.href}
-                href={link.href}
-                target={link.target}
-                rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
-                className="flex w-full items-center">
+              <Link id={link.href} href={link.href} target={link.target} className="flex w-full items-center">
                 <DropdownMenuItem>
                   <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
                   {link.label}
@@ -97,6 +121,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
             ))}
 
             {/* Logout */}
+
             <DropdownMenuItem
               onClick={async () => {
                 await signOutWithAudit({
@@ -111,6 +136,45 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
               icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
               {t("common.logout")}
             </DropdownMenuItem>
+
+            {/* Organization Switch */}
+
+            {(isMultiOrgEnabled || organizations.length > 1) && (
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger className="rounded-lg">
+                  <div>
+                    <p>{currentOrganizationName}</p>
+                    <p className="block text-xs text-slate-500">{t("common.switch_organization")}</p>
+                  </div>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent sideOffset={10} alignOffset={5}>
+                    <DropdownMenuRadioGroup
+                      value={currentOrganizationId}
+                      onValueChange={(organizationId) =>
+                        handleEnvironmentChangeByOrganization(organizationId)
+                      }>
+                      {sortedOrganizations.map((organization) => (
+                        <DropdownMenuRadioItem
+                          value={organization.id}
+                          className="cursor-pointer rounded-lg"
+                          key={organization.id}>
+                          {organization.name}
+                        </DropdownMenuRadioItem>
+                      ))}
+                    </DropdownMenuRadioGroup>
+                    <DropdownMenuSeparator />
+                    {isMultiOrgEnabled && (
+                      <DropdownMenuItem
+                        onClick={() => setOpenCreateOrganizationModal(true)}
+                        icon={<PlusIcon className="mr-2 h-4 w-4" />}>
+                        <span>{t("common.create_new_organization")}</span>
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/page.test.tsx

@@ -1,4 +1,3 @@
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganizationsByUserId } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
@@ -16,7 +15,6 @@ vi.mock("@/modules/ee/license-check/lib/license", () => ({
     isPendingDowngrade: false,
     fallbackLevel: "live",
   }),
-  getLicenseFeatures: vi.fn().mockResolvedValue({ isMultiOrgEnabled: true }),
 }));
 
 vi.mock("@/lib/constants", () => ({
@@ -103,32 +101,16 @@ vi.mock("@/lib/constants", () => ({
   AUDIT_LOG_ENABLED: true,
 }));
 
-vi.mock("@/lib/getPublicUrl", () => ({
-  getPublicDomain: vi.fn().mockReturnValue("http://localhost:3000"),
-}));
-
 vi.mock("@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar", () => ({
   LandingSidebar: () => <div data-testid="landing-sidebar" />,
 }));
-vi.mock("@/app/(app)/environments/[environmentId]/components/project-and-org-switch", () => ({
-  ProjectAndOrgSwitch: () => <div data-testid="project-and-org-switch" />,
-}));
 vi.mock("@/modules/organization/lib/utils");
 vi.mock("@/lib/user/service");
 vi.mock("@/lib/organization/service");
-vi.mock("@/lib/membership/service");
 vi.mock("@/tolgee/server");
 vi.mock("next/navigation", () => ({
   redirect: vi.fn(() => "REDIRECT_STUB"),
   notFound: vi.fn(() => "NOT_FOUND_STUB"),
-  usePathname: vi.fn(() => "/organizations/org1"),
-  useRouter: vi.fn(() => ({
-    push: vi.fn(),
-    replace: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    refresh: vi.fn(),
-  })),
 }));
 
 // Mock the React cache function
@@ -160,7 +142,6 @@ describe("Page component", () => {
         isPendingDowngrade: false,
         fallbackLevel: "live",
       }),
-      getLicenseFeatures: vi.fn().mockResolvedValue({ isMultiOrgEnabled: true }),
     }));
     const { default: Page } = await import("./page");
     const result = await Page({ params: { organizationId: "org1" } });
@@ -182,7 +163,6 @@ describe("Page component", () => {
         isPendingDowngrade: false,
         fallbackLevel: "live",
       }),
-      getLicenseFeatures: vi.fn().mockResolvedValue({ isMultiOrgEnabled: true }),
     }));
     const { default: Page } = await import("./page");
     const result = await Page({ params: { organizationId: "org1" } });
@@ -193,16 +173,10 @@ describe("Page component", () => {
   test("renders header and sidebar for authenticated user", async () => {
     vi.mocked(getOrganizationAuth).mockResolvedValue({
       session: { user: { id: "user1" } },
-      organization: { id: "org1", billing: { plan: "free" } },
+      organization: { id: "org1" },
     } as any);
     vi.mocked(getUser).mockResolvedValue({ id: "user1", name: "Test User" } as any);
     vi.mocked(getOrganizationsByUserId).mockResolvedValue([{ id: "org1", name: "Org One" } as any]);
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue({
-      organizationId: "org1",
-      userId: "user1",
-      accepted: true,
-      role: "member",
-    } as any);
     vi.mocked(getTranslate).mockResolvedValue((props: any) =>
       typeof props === "string" ? props : props.key || ""
     );
@@ -214,13 +188,11 @@ describe("Page component", () => {
         isPendingDowngrade: false,
         fallbackLevel: "live",
       }),
-      getLicenseFeatures: vi.fn().mockResolvedValue({ isMultiOrgEnabled: true }),
     }));
     const { default: Page } = await import("./page");
     const element = await Page({ params: { organizationId: "org1" } });
     render(element as React.ReactElement);
     expect(screen.getByTestId("landing-sidebar")).toBeInTheDocument();
-    expect(screen.getByTestId("project-and-org-switch")).toBeInTheDocument();
     expect(screen.getByText("organizations.landing.no_projects_warning_title")).toBeInTheDocument();
     expect(screen.getByText("organizations.landing.no_projects_warning_subtitle")).toBeInTheDocument();
   });

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/page.tsx

@@ -1,11 +1,7 @@
 import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar";
-import { ProjectAndOrgSwitch } from "@/app/(app)/environments/[environmentId]/components/project-and-org-switch";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getAccessFlags } from "@/lib/membership/utils";
 import { getOrganizationsByUserId } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
-import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
+import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
@@ -26,38 +22,24 @@ const Page = async (props) => {
 
   const organizations = await getOrganizationsByUserId(session.user.id);
 
-  const isMultiOrgEnabled = await getIsMultiOrgEnabled();
+  const { features } = await getEnterpriseLicense();
 
-  const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
-  const { isMember } = getAccessFlags(membership?.role);
+  const isMultiOrgEnabled = features?.isMultiOrgEnabled ?? false;
 
   return (
     <div className="flex min-h-full min-w-full flex-row">
-      <LandingSidebar user={user} organization={organization} />
+      <LandingSidebar
+        user={user}
+        organization={organization}
+        isMultiOrgEnabled={isMultiOrgEnabled}
+        organizations={organizations}
+      />
       <div className="flex-1">
-        <div className="flex h-full flex-col">
-          <div className="p-6">
-            {/* we only need to render organization breadcrumb on this page, so we pass some default value without actually calculating them to ProjectAndOrgSwitch component  */}
-            <ProjectAndOrgSwitch
-              currentOrganizationId={organization.id}
-              organizations={organizations}
-              projects={[]}
-              isMultiOrgEnabled={isMultiOrgEnabled}
-              organizationProjectsLimit={0}
-              isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-              isLicenseActive={false}
-              isOwnerOrManager={false}
-              isAccessControlAllowed={false}
-              isMember={isMember}
-              environments={[]}
-            />
-          </div>
-          <div className="flex h-full flex-col items-center justify-center space-y-12">
-            <Header
-              title={t("organizations.landing.no_projects_warning_title")}
-              subtitle={t("organizations.landing.no_projects_warning_subtitle")}
-            />
-          </div>
+        <div className="flex h-full flex-col items-center justify-center space-y-12">
+          <Header
+            title={t("organizations.landing.no_projects_warning_title")}
+            subtitle={t("organizations.landing.no_projects_warning_subtitle")}
+          />
         </div>
       </div>
     </div>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/layout.test.tsx

@@ -18,6 +18,11 @@ vi.mock("@/modules/ui/components/environmentId-base-layout", () => ({
     </div>
   ),
 }));
+vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
+  DevEnvironmentBanner: ({ environment }: any) => (
+    <div data-testid="DevEnvironmentBanner">{environment.id}</div>
+  ),
+}));
 
 // Mocks for dependencies
 vi.mock("@/modules/environments/lib/utils", () => ({
@@ -53,6 +58,7 @@ describe("SurveyEditorEnvironmentLayout", () => {
     render(result);
 
     expect(screen.getByTestId("EnvironmentIdBaseLayout")).toHaveTextContent("env1");
+    expect(screen.getByTestId("DevEnvironmentBanner")).toHaveTextContent("env1");
     expect(screen.getByTestId("child")).toHaveTextContent("Survey Editor Content");
   });
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/layout.tsx

@@ -1,5 +1,6 @@
 import { getEnvironment } from "@/lib/environment/service";
 import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
 import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import { redirect } from "next/navigation";
 
@@ -31,6 +32,7 @@ const SurveyEditorEnvironmentLayout = async (props) => {
       user={user}
       organization={organization}>
       <div className="flex h-screen flex-col">
+        <DevEnvironmentBanner environment={environment} />
         <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
       </div>
     </EnvironmentIdBaseLayout>

apps/web/app/(app)/environments/[environmentId]/actions/actions.ts

@@ -1,9 +1,5 @@
 "use server";
 
-import { z } from "zod";
-import { ZActionClassInput } from "@formbricks/types/action-classes";
-import { ZId } from "@formbricks/types/common";
-import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { deleteActionClass, getActionClass, updateActionClass } from "@/lib/actionClass/service";
 import { getSurveysByActionClassId } from "@/lib/survey/service";
 import { actionClient, authenticatedActionClient } from "@/lib/utils/action-client";
@@ -11,6 +7,10 @@ import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-clie
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
 import { getOrganizationIdFromActionClassId, getProjectIdFromActionClassId } from "@/lib/utils/helper";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
+import { z } from "zod";
+import { ZActionClassInput } from "@formbricks/types/action-classes";
+import { ZId } from "@formbricks/types/common";
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 
 const ZDeleteActionClassAction = z.object({
   actionClassId: ZId,
@@ -124,16 +124,20 @@ export const getActiveInactiveSurveysAction = authenticatedActionClient
 
 const getLatestStableFbRelease = async (): Promise<string | null> => {
   try {
-    const res = await fetch("https://api.github.com/repos/formbricks/formbricks/releases/latest");
-    const release = await res.json();
+    const res = await fetch("https://api.github.com/repos/formbricks/formbricks/releases");
+    const releases = await res.json();
 
-    if (release && release.tag_name) {
-      return release.tag_name;
+    if (Array.isArray(releases)) {
+      const latestStableReleaseTag = releases.filter((release) => !release.prerelease)?.[0]
+        ?.tag_name as string;
+      if (latestStableReleaseTag) {
+        return latestStableReleaseTag;
+      }
     }
 
     return null;
-  } catch (error) {
-    throw new Error("Failed to get latest stable Formbricks release", { cause: error });
+  } catch (err) {
+    return null;
   }
 };
 

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionActivityTab.test.tsx

@@ -1,48 +1,22 @@
+import { createActionClassAction } from "@/modules/survey/editor/actions";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import toast from "react-hot-toast";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { TActionClass } from "@formbricks/types/action-classes";
 import { TEnvironment } from "@formbricks/types/environment";
-import { getActiveInactiveSurveysAction } from "@/modules/projects/settings/(setup)/app-connection/actions";
-import { createActionClassAction } from "@/modules/survey/editor/actions";
+import { getActiveInactiveSurveysAction } from "../actions";
 import { ActionActivityTab } from "./ActionActivityTab";
 
 // Mock dependencies
-vi.mock("@/modules/projects/settings/(setup)/app-connection/utils", () => ({
+vi.mock("@/app/(app)/environments/[environmentId]/actions/utils", () => ({
   ACTION_TYPE_ICON_LOOKUP: {
     noCode: <div>NoCodeIcon</div>,
+    automatic: <div>AutomaticIcon</div>,
     code: <div>CodeIcon</div>,
   },
 }));
 
-vi.mock("@/lib/constants", () => ({
-  IS_FORMBRICKS_CLOUD: false,
-  POSTHOG_API_KEY: "mock-posthog-api-key",
-  POSTHOG_HOST: "mock-posthog-host",
-  IS_POSTHOG_CONFIGURED: true,
-  ENCRYPTION_KEY: "mock-encryption-key",
-  ENTERPRISE_LICENSE_KEY: "mock-enterprise-license-key",
-  GITHUB_ID: "mock-github-id",
-  GITHUB_SECRET: "test-githubID",
-  GOOGLE_CLIENT_ID: "test-google-client-id",
-  GOOGLE_CLIENT_SECRET: "test-google-client-secret",
-  AZUREAD_CLIENT_ID: "test-azuread-client-id",
-  AZUREAD_CLIENT_SECRET: "test-azure",
-  AZUREAD_TENANT_ID: "test-azuread-tenant-id",
-  OIDC_DISPLAY_NAME: "test-oidc-display-name",
-  OIDC_CLIENT_ID: "test-oidc-client-id",
-  OIDC_ISSUER: "test-oidc-issuer",
-  OIDC_CLIENT_SECRET: "test-oidc-client-secret",
-  OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
-  WEBAPP_URL: "test-webapp-url",
-  IS_PRODUCTION: false,
-  SENTRY_DSN: "mock-sentry-dsn",
-  SENTRY_RELEASE: "mock-sentry-release",
-  SENTRY_ENVIRONMENT: "mock-sentry-environment",
-  SESSION_MAX_AGE: 1000,
-}));
-
 vi.mock("@/lib/time", () => ({
   convertDateTimeStringShort: (dateString: string) => `formatted-${dateString}`,
 }));
@@ -51,6 +25,10 @@ vi.mock("@/lib/utils/helper", () => ({
   getFormattedErrorMessage: (error: any) => `Formatted error: ${error?.message || "Unknown error"}`,
 }));
 
+vi.mock("@/lib/utils/strings", () => ({
+  capitalizeFirstLetter: (str: string) => str.charAt(0).toUpperCase() + str.slice(1),
+}));
+
 vi.mock("@/modules/survey/editor/actions", () => ({
   createActionClassAction: vi.fn(),
 }));
@@ -75,14 +53,10 @@ vi.mock("@/modules/ui/components/loading-spinner", () => ({
   LoadingSpinner: () => <div>LoadingSpinner</div>,
 }));
 
-vi.mock("@/modules/projects/settings/(setup)/app-connection/actions", () => ({
+vi.mock("../actions", () => ({
   getActiveInactiveSurveysAction: vi.fn(),
 }));
 
-vi.mock("react-hot-toast", () => ({
-  default: { success: vi.fn(), error: vi.fn() },
-}));
-
 const mockActionClass = {
   id: "action1",
   createdAt: new Date("2023-01-01T10:00:00Z"),
@@ -205,7 +179,7 @@ describe("ActionActivityTab", () => {
     expect(screen.getByText(`formatted-${mockActionClass.createdAt.toString()}`)).toBeInTheDocument(); // Created on
     expect(screen.getByText(`formatted-${mockActionClass.updatedAt.toString()}`)).toBeInTheDocument(); // Last updated
     expect(screen.getByText("NoCodeIcon")).toBeInTheDocument(); // Type icon
-    expect(screen.getByText("noCode")).toBeInTheDocument(); // Type text (now lowercase, capitalized via CSS)
+    expect(screen.getByText("NoCode")).toBeInTheDocument(); // Type text
     expect(screen.getByText("Development")).toBeInTheDocument(); // Environment
     expect(screen.getByText("Copy to Production")).toBeInTheDocument(); // Copy button text
   });

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionActivityTab.tsx

@@ -1,19 +1,20 @@
 "use client";
 
-import { useTranslate } from "@tolgee/react";
-import { useEffect, useMemo, useState } from "react";
-import toast from "react-hot-toast";
-import { TActionClass, TActionClassInput, TActionClassInputCode } from "@formbricks/types/action-classes";
-import { TEnvironment } from "@formbricks/types/environment";
+import { ACTION_TYPE_ICON_LOOKUP } from "@/app/(app)/environments/[environmentId]/actions/utils";
 import { convertDateTimeStringShort } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
-import { getActiveInactiveSurveysAction } from "@/modules/projects/settings/(setup)/app-connection/actions";
-import { ACTION_TYPE_ICON_LOOKUP } from "@/modules/projects/settings/(setup)/app-connection/utils";
+import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { createActionClassAction } from "@/modules/survey/editor/actions";
 import { Button } from "@/modules/ui/components/button";
 import { ErrorComponent } from "@/modules/ui/components/error-component";
 import { Label } from "@/modules/ui/components/label";
 import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
+import { useTranslate } from "@tolgee/react";
+import { useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { TActionClass, TActionClassInput, TActionClassInputCode } from "@formbricks/types/action-classes";
+import { TEnvironment } from "@formbricks/types/environment";
+import { getActiveInactiveSurveysAction } from "../actions";
 
 interface ActivityTabProps {
   actionClass: TActionClass;
@@ -151,7 +152,7 @@ export const ActionActivityTab = ({
           <Label className="block text-xs font-normal text-slate-500">Type</Label>
           <div className="mt-1 flex items-center">
             <div className="mr-1.5 h-4 w-4 text-slate-600">{ACTION_TYPE_ICON_LOOKUP[actionClass.type]}</div>
-            <p className="text-sm capitalize text-slate-700">{actionClass.type}</p>
+            <p className="text-sm text-slate-700">{capitalizeFirstLetter(actionClass.type)}</p>
           </div>
         </div>
         <div className="">

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionDetailModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ACTION_TYPE_ICON_LOOKUP } from "@/modules/projects/settings/(setup)/app-connection/utils";
+import { ACTION_TYPE_ICON_LOOKUP } from "@/app/(app)/environments/[environmentId]/actions/utils";
 import { ModalWithTabs } from "@/modules/ui/components/modal-with-tabs";
 import { useTranslate } from "@tolgee/react";
 import { TActionClass } from "@formbricks/types/action-classes";

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionRowData.tsx

@@ -1,5 +1,5 @@
+import { ACTION_TYPE_ICON_LOOKUP } from "@/app/(app)/environments/[environmentId]/actions/utils";
 import { timeSince } from "@/lib/time";
-import { ACTION_TYPE_ICON_LOOKUP } from "@/modules/projects/settings/(setup)/app-connection/utils";
 import { TActionClass } from "@formbricks/types/action-classes";
 import { TUserLocale } from "@formbricks/types/user";
 

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionSettingsTab.test.tsx

@@ -6,7 +6,7 @@ import { TActionClass, TActionClassNoCodeConfig, TActionClassType } from "@formb
 import { ActionSettingsTab } from "./ActionSettingsTab";
 
 // Mock actions
-vi.mock("@/modules/projects/settings/(setup)/app-connection/actions", () => ({
+vi.mock("@/app/(app)/environments/[environmentId]/actions/actions", () => ({
   deleteActionClassAction: vi.fn(),
   updateActionClassAction: vi.fn(),
 }));
@@ -20,14 +20,14 @@ vi.mock("@/modules/survey/editor/lib/action-utils", () => ({
 
 // Mock action builder
 vi.mock("@/modules/survey/editor/lib/action-builder", () => ({
-  buildActionObject: vi.fn((data, environmentId) => ({
+  buildActionObject: vi.fn((data, environmentId, t) => ({
     ...data,
     environmentId,
   })),
 }));
 
 // Mock utils
-vi.mock("@/modules/projects/settings/(setup)/app-connection/utils", () => ({
+vi.mock("@/app/lib/actionClass/actionClass", () => ({
   isValidCssSelector: vi.fn((selector) => selector !== "invalid-selector"),
 }));
 
@@ -93,11 +93,6 @@ vi.mock("lucide-react", () => ({
   TrashIcon: () => <div data-testid="trash-icon">Trash</div>,
 }));
 
-// Mock react-hot-toast
-vi.mock("react-hot-toast", () => ({
-  toast: { success: vi.fn(), error: vi.fn() },
-}));
-
 // Mock react-hook-form
 const mockHandleSubmit = vi.fn();
 const mockForm = {
@@ -234,7 +229,7 @@ describe("ActionSettingsTab", () => {
 
   test("handles successful form submission", async () => {
     const { updateActionClassAction } = await import(
-      "@/modules/projects/settings/(setup)/app-connection/actions"
+      "@/app/(app)/environments/[environmentId]/actions/actions"
     );
     const actionUtilsMock = await import("@/modules/survey/editor/lib/action-utils");
 
@@ -288,7 +283,7 @@ describe("ActionSettingsTab", () => {
   test("handles successful deletion", async () => {
     const actionClass = createMockActionClass("noCode1", "noCode", "No Code Action");
     const { deleteActionClassAction } = await import(
-      "@/modules/projects/settings/(setup)/app-connection/actions"
+      "@/app/(app)/environments/[environmentId]/actions/actions"
     );
     vi.mocked(deleteActionClassAction).mockResolvedValue({ data: actionClass } as any);
 
@@ -319,7 +314,7 @@ describe("ActionSettingsTab", () => {
   test("handles deletion failure", async () => {
     const actionClass = createMockActionClass("noCode1", "noCode", "No Code Action");
     const { deleteActionClassAction } = await import(
-      "@/modules/projects/settings/(setup)/app-connection/actions"
+      "@/app/(app)/environments/[environmentId]/actions/actions"
     );
     vi.mocked(deleteActionClassAction).mockRejectedValue(new Error("Deletion failed"));
 
@@ -366,7 +361,7 @@ describe("ActionSettingsTab", () => {
   test("prevents delete when read-only", async () => {
     const actionClass = createMockActionClass("noCode1", "noCode", "No Code Action");
     const { deleteActionClassAction } = await import(
-      "@/modules/projects/settings/(setup)/app-connection/actions"
+      "@/app/(app)/environments/[environmentId]/actions/actions"
     );
 
     render(

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionSettingsTab.tsx

@@ -3,7 +3,7 @@
 import {
   deleteActionClassAction,
   updateActionClassAction,
-} from "@/modules/projects/settings/(setup)/app-connection/actions";
+} from "@/app/(app)/environments/[environmentId]/actions/actions";
 import { buildActionObject } from "@/modules/survey/editor/lib/action-builder";
 import {
   createActionClassZodResolver,
@@ -50,7 +50,7 @@ export const ActionSettingsTab = ({
     [actionClass.id, actionClasses]
   );
 
-  const actionClassKeys = useActionClassKeys(actionClasses).filter((key) => key !== actionClass.key);
+  const actionClassKeys = useActionClassKeys(actionClasses);
 
   const form = useForm<TActionClassInput>({
     defaultValues: {

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionTableHeading.tsx

@@ -0,0 +1,14 @@
+import { getTranslate } from "@/tolgee/server";
+
+export const ActionTableHeading = async () => {
+  const t = await getTranslate();
+  return (
+    <>
+      <div className="grid h-12 grid-cols-6 content-center border-b border-slate-200 text-left text-sm font-semibold text-slate-900">
+        <span className="sr-only">{t("common.edit")}</span>
+        <div className="col-span-4 pl-6">{t("environments.actions.user_actions")}</div>
+        <div className="col-span-2 text-center">{t("common.created")}</div>
+      </div>
+    </>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/actions/components/AddActionModal.test.tsx

@@ -1,6 +1,5 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { TActionClass, TActionClassNoCodeConfig } from "@formbricks/types/action-classes";
 import { AddActionModal } from "./AddActionModal";
@@ -23,48 +22,30 @@ vi.mock("@/modules/ui/components/button", () => ({
   ),
 }));
 
-vi.mock("@/modules/ui/components/dialog", () => {
-  const React = require("react");
-  const { useState } = React;
-
-  return {
-    Dialog: ({ children, open: externalOpen, onOpenChange }: any) => {
-      const [internalOpen, setInternalOpen] = useState(externalOpen);
-
-      // Update internal state when external open prop changes
-      React.useEffect(() => {
-        setInternalOpen(externalOpen);
-      }, [externalOpen]);
-
-      const handleOpenChange = (newOpen: boolean) => {
-        setInternalOpen(newOpen);
-        onOpenChange?.(newOpen);
-      };
-
-      return internalOpen ? (
-        <dialog data-testid="dialog" open>
-          {children}
-          <button onClick={() => handleOpenChange(false)}>Close Dialog</button>
-        </dialog>
-      ) : null;
-    },
-    DialogContent: ({ children, disableCloseOnOutsideClick, ...props }: any) => (
-      <div data-testid="dialog-content" {...props}>
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({ children, open, onOpenChange }: any) =>
+    open ? (
+      <div data-testid="dialog" role="dialog">
         {children}
+        <button onClick={() => onOpenChange(false)}>Close Dialog</button>
       </div>
-    ),
-    DialogHeader: ({ children }: any) => <div data-testid="dialog-header">{children}</div>,
-    DialogTitle: ({ children, className }: any) => (
-      <h2 data-testid="dialog-title" className={className}>
-        {children}
-      </h2>
-    ),
-    DialogDescription: ({ children }: { children: React.ReactNode }) => (
-      <div data-testid="dialog-description">{children}</div>
-    ),
-    DialogBody: ({ children }: any) => <div data-testid="dialog-body">{children}</div>,
-  };
-});
+    ) : null,
+  DialogContent: ({ children, ...props }: any) => (
+    <div data-testid="dialog-content" {...props}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children }: any) => <div data-testid="dialog-header">{children}</div>,
+  DialogTitle: ({ children, className }: any) => (
+    <h2 data-testid="dialog-title" className={className}>
+      {children}
+    </h2>
+  ),
+  DialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="dialog-description">{children}</div>
+  ),
+  DialogBody: ({ children }: any) => <div data-testid="dialog-body">{children}</div>,
+}));
 
 vi.mock("@tolgee/react", () => ({
   useTranslate: () => ({
@@ -98,36 +79,44 @@ describe("AddActionModal", () => {
     vi.clearAllMocks();
   });
 
-  const createTestWrapper = () => {
-    const TestWrapper = () => {
-      const [open, setOpen] = React.useState(true);
+  test("renders the 'Add Action' button initially", () => {
+    render(
+      <AddActionModal environmentId={environmentId} actionClasses={mockActionClasses} isReadOnly={false} />
+    );
+    expect(screen.getByRole("button", { name: "common.add_action" })).toBeInTheDocument();
+    expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
+  });
 
-      return (
-        <AddActionModal
-          environmentId={environmentId}
-          actionClasses={mockActionClasses}
-          isReadOnly={false}
-          open={open}
-          setOpen={setOpen}
-        />
-      );
-    };
-    return TestWrapper;
-  };
+  test("opens the dialog when the 'Add Action' button is clicked", async () => {
+    render(
+      <AddActionModal environmentId={environmentId} actionClasses={mockActionClasses} isReadOnly={false} />
+    );
+    const addButton = screen.getByRole("button", { name: "common.add_action" });
+    await userEvent.click(addButton);
+
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-content")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-header")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-title")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-body")).toBeInTheDocument();
+    expect(screen.getByTestId("mouse-pointer-icon")).toBeInTheDocument();
+    expect(screen.getByText("environments.actions.track_new_user_action")).toBeInTheDocument();
+    expect(
+      screen.getByText("environments.actions.track_user_action_to_display_surveys_or_create_user_segment")
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("create-new-action-tab")).toBeInTheDocument();
+  });
 
   test("passes correct props to CreateNewActionTab", async () => {
     const { CreateNewActionTab } = await import("@/modules/survey/editor/components/create-new-action-tab");
     const mockedCreateNewActionTab = vi.mocked(CreateNewActionTab);
 
     render(
-      <AddActionModal
-        environmentId={environmentId}
-        actionClasses={mockActionClasses}
-        isReadOnly={false}
-        open={true}
-        setOpen={vi.fn()}
-      />
+      <AddActionModal environmentId={environmentId} actionClasses={mockActionClasses} isReadOnly={false} />
     );
+    const addButton = screen.getByRole("button", { name: "common.add_action" });
+    await userEvent.click(addButton);
 
     expect(mockedCreateNewActionTab).toHaveBeenCalled();
     const props = mockedCreateNewActionTab.mock.calls[0][0];
@@ -139,8 +128,11 @@ describe("AddActionModal", () => {
   });
 
   test("closes the dialog when the close button (simulated) is clicked", async () => {
-    const TestWrapper = createTestWrapper();
-    render(<TestWrapper />);
+    render(
+      <AddActionModal environmentId={environmentId} actionClasses={mockActionClasses} isReadOnly={false} />
+    );
+    const addButton = screen.getByRole("button", { name: "common.add_action" });
+    await userEvent.click(addButton);
 
     expect(screen.getByTestId("dialog")).toBeInTheDocument();
 
@@ -152,8 +144,11 @@ describe("AddActionModal", () => {
   });
 
   test("closes the dialog when setOpen is called from CreateNewActionTab", async () => {
-    const TestWrapper = createTestWrapper();
-    render(<TestWrapper />);
+    render(
+      <AddActionModal environmentId={environmentId} actionClasses={mockActionClasses} isReadOnly={false} />
+    );
+    const addButton = screen.getByRole("button", { name: "common.add_action" });
+    await userEvent.click(addButton);
 
     expect(screen.getByTestId("dialog")).toBeInTheDocument();
 

apps/web/app/(app)/environments/[environmentId]/actions/components/AddActionModal.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { CreateNewActionTab } from "@/modules/survey/editor/components/create-new-action-tab";
+import { Button } from "@/modules/ui/components/button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
+import { useTranslate } from "@tolgee/react";
+import { MousePointerClickIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
+import { TActionClass } from "@formbricks/types/action-classes";
+
+interface AddActionModalProps {
+  environmentId: string;
+  actionClasses: TActionClass[];
+  isReadOnly: boolean;
+}
+
+export const AddActionModal = ({ environmentId, actionClasses, isReadOnly }: AddActionModalProps) => {
+  const { t } = useTranslate();
+  const [open, setOpen] = useState(false);
+
+  const [newActionClasses, setNewActionClasses] = useState<TActionClass[]>(actionClasses);
+
+  return (
+    <>
+      <Button size="sm" onClick={() => setOpen(true)}>
+        {t("common.add_action")}
+        <PlusIcon />
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent disableCloseOnOutsideClick>
+          <DialogHeader>
+            <MousePointerClickIcon />
+            <DialogTitle>{t("environments.actions.track_new_user_action")}</DialogTitle>
+            <DialogDescription>
+              {t("environments.actions.track_user_action_to_display_surveys_or_create_user_segment")}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <CreateNewActionTab
+              actionClasses={newActionClasses}
+              environmentId={environmentId}
+              isReadOnly={isReadOnly}
+              setActionClasses={setNewActionClasses}
+              setOpen={setOpen}
+            />
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/actions/loading.test.tsx

@@ -0,0 +1,44 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import Loading from "./loading";
+
+// Mock child components
+vi.mock("@/modules/ui/components/page-content-wrapper", () => ({
+  PageContentWrapper: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="page-content-wrapper">{children}</div>
+  ),
+}));
+
+vi.mock("@/modules/ui/components/page-header", () => ({
+  PageHeader: ({ pageTitle }: { pageTitle: string }) => <div data-testid="page-header">{pageTitle}</div>,
+}));
+
+describe("Loading", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders loading state correctly", () => {
+    render(<Loading />);
+
+    // Check if mocked components are rendered
+    expect(screen.getByTestId("page-content-wrapper")).toBeInTheDocument();
+    expect(screen.getByTestId("page-header")).toBeInTheDocument();
+    expect(screen.getByTestId("page-header")).toHaveTextContent("common.actions");
+
+    // Check for translated table headers
+    expect(screen.getByText("environments.actions.user_actions")).toBeInTheDocument();
+    expect(screen.getByText("common.created")).toBeInTheDocument();
+    expect(screen.getByText("common.edit")).toBeInTheDocument(); // Screen reader text
+
+    // Check for skeleton elements (presence of animate-pulse class)
+    const skeletonElements = document.querySelectorAll(".animate-pulse");
+    expect(skeletonElements.length).toBeGreaterThan(0); // Ensure some skeleton elements are rendered
+
+    // Check for the presence of multiple skeleton rows (3 rows * 4 pulse elements per row = 12)
+    const pulseDivs = screen.getAllByText((_, element) => {
+      return element?.tagName.toLowerCase() === "div" && element.classList.contains("animate-pulse");
+    });
+    expect(pulseDivs.length).toBe(3 * 4); // 3 rows, 4 pulsing divs per row (icon, name, desc, created)
+  });
+});

apps/web/app/(app)/environments/[environmentId]/actions/loading.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { useTranslate } from "@tolgee/react";
+
+const Loading = () => {
+  const { t } = useTranslate();
+  return (
+    <>
+      <PageContentWrapper>
+        <PageHeader pageTitle={t("common.actions")} />
+        <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+          <div className="grid h-12 grid-cols-6 content-center border-b border-slate-200 text-left text-sm font-semibold text-slate-900">
+            <span className="sr-only">{t("common.edit")}</span>
+            <div className="col-span-4 pl-6">{t("environments.actions.user_actions")}</div>
+            <div className="col-span-2 text-center">{t("common.created")}</div>
+          </div>
+          {[...Array(3)].map((_, index) => (
+            <div
+              key={index}
+              className="m-2 grid h-16 grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
+              <div className="col-span-4 flex items-center pl-6 text-sm">
+                <div className="flex items-center">
+                  <div className="h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500" />
+                  <div className="ml-4 text-left">
+                    <div className="font-medium text-slate-900">
+                      <div className="mt-0 h-4 w-48 animate-pulse rounded-full bg-slate-200"></div>
+                    </div>
+                    <div className="mt-1 text-xs text-slate-400">
+                      <div className="h-2 w-24 animate-pulse rounded-full bg-slate-200"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="col-span-2 my-auto flex justify-center whitespace-nowrap text-center text-sm text-slate-500">
+                <div className="h-4 w-28 animate-pulse rounded-full bg-slate-200"></div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </PageContentWrapper>
+    </>
+  );
+};
+export default Loading;

apps/web/app/(app)/environments/[environmentId]/actions/page.test.tsx

@@ -0,0 +1,161 @@
+import { getActionClasses } from "@/lib/actionClass/service";
+import { getEnvironments } from "@/lib/environment/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { TEnvironmentAuth } from "@/modules/environments/types/environment-auth";
+import { cleanup, render, screen } from "@testing-library/react";
+import { redirect } from "next/navigation";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { TActionClass } from "@formbricks/types/action-classes";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TProject } from "@formbricks/types/project";
+// Import the component after mocks
+import Page from "./page";
+
+// Mock dependencies
+vi.mock("@/lib/actionClass/service", () => ({
+  getActionClasses: vi.fn(),
+}));
+vi.mock("@/lib/environment/service", () => ({
+  getEnvironments: vi.fn(),
+}));
+vi.mock("@/lib/utils/locale", () => ({
+  findMatchingLocale: vi.fn(),
+}));
+vi.mock("@/modules/environments/lib/utils", () => ({
+  getEnvironmentAuth: vi.fn(),
+}));
+vi.mock("@/tolgee/server", () => ({
+  getTranslate: async () => (key: string) => key,
+}));
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/actions/components/ActionClassesTable", () => ({
+  ActionClassesTable: ({ children }) => <div>ActionClassesTable Mock{children}</div>,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/actions/components/ActionRowData", () => ({
+  ActionClassDataRow: ({ actionClass }) => <div>ActionClassDataRow Mock: {actionClass.name}</div>,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/actions/components/ActionTableHeading", () => ({
+  ActionTableHeading: () => <div>ActionTableHeading Mock</div>,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/actions/components/AddActionModal", () => ({
+  AddActionModal: () => <div>AddActionModal Mock</div>,
+}));
+vi.mock("@/modules/ui/components/page-content-wrapper", () => ({
+  PageContentWrapper: ({ children }) => <div>PageContentWrapper Mock{children}</div>,
+}));
+vi.mock("@/modules/ui/components/page-header", () => ({
+  PageHeader: ({ pageTitle, cta }) => (
+    <div>
+      PageHeader Mock: {pageTitle} {cta && <div>CTA Mock</div>}
+    </div>
+  ),
+}));
+
+// Mock data
+const mockEnvironmentId = "test-env-id";
+const mockProjectId = "test-project-id";
+const mockEnvironment = {
+  id: mockEnvironmentId,
+  name: "Test Environment",
+  type: "development",
+} as unknown as TEnvironment;
+const mockOtherEnvironment = {
+  id: "other-env-id",
+  name: "Other Environment",
+  type: "production",
+} as unknown as TEnvironment;
+const mockProject = { id: mockProjectId, name: "Test Project" } as unknown as TProject;
+const mockActionClasses = [
+  { id: "action1", name: "Action 1", type: "code", environmentId: mockEnvironmentId } as TActionClass,
+  { id: "action2", name: "Action 2", type: "noCode", environmentId: mockEnvironmentId } as TActionClass,
+];
+const mockOtherEnvActionClasses = [
+  { id: "action3", name: "Action 3", type: "code", environmentId: mockOtherEnvironment.id } as TActionClass,
+];
+const mockLocale = "en-US";
+
+const mockParams = { environmentId: mockEnvironmentId };
+const mockProps = { params: mockParams };
+
+describe("Actions Page", () => {
+  beforeEach(() => {
+    vi.mocked(getActionClasses)
+      .mockResolvedValueOnce(mockActionClasses) // First call for current env
+      .mockResolvedValueOnce(mockOtherEnvActionClasses); // Second call for other env
+    vi.mocked(getEnvironments).mockResolvedValue([mockEnvironment, mockOtherEnvironment]);
+    vi.mocked(findMatchingLocale).mockResolvedValue(mockLocale);
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  test("renders the page correctly with actions", async () => {
+    vi.mocked(getEnvironmentAuth).mockResolvedValue({
+      isReadOnly: false,
+      project: mockProject,
+      isBilling: false,
+      environment: mockEnvironment,
+    } as TEnvironmentAuth);
+
+    const PageComponent = await Page(mockProps);
+    render(PageComponent);
+
+    expect(screen.getByText("PageHeader Mock: common.actions")).toBeInTheDocument();
+    expect(screen.getByText("CTA Mock")).toBeInTheDocument(); // AddActionModal rendered via CTA
+    expect(screen.getByText("ActionClassesTable Mock")).toBeInTheDocument();
+    expect(screen.getByText("ActionTableHeading Mock")).toBeInTheDocument();
+    expect(screen.getByText("ActionClassDataRow Mock: Action 1")).toBeInTheDocument();
+    expect(screen.getByText("ActionClassDataRow Mock: Action 2")).toBeInTheDocument();
+    expect(vi.mocked(redirect)).not.toHaveBeenCalled();
+  });
+
+  test("redirects if isBilling is true", async () => {
+    vi.mocked(getEnvironmentAuth).mockResolvedValue({
+      isReadOnly: false,
+      project: mockProject,
+      isBilling: true,
+      environment: mockEnvironment,
+    } as TEnvironmentAuth);
+
+    await Page(mockProps);
+
+    expect(vi.mocked(redirect)).toHaveBeenCalledWith(`/environments/${mockEnvironmentId}/settings/billing`);
+  });
+
+  test("does not render AddActionModal CTA if isReadOnly is true", async () => {
+    vi.mocked(getEnvironmentAuth).mockResolvedValue({
+      isReadOnly: true,
+      project: mockProject,
+      isBilling: false,
+      environment: mockEnvironment,
+    } as TEnvironmentAuth);
+
+    const PageComponent = await Page(mockProps);
+    render(PageComponent);
+
+    expect(screen.getByText("PageHeader Mock: common.actions")).toBeInTheDocument();
+    expect(screen.queryByText("CTA Mock")).not.toBeInTheDocument(); // CTA should not be present
+    expect(screen.getByText("ActionClassesTable Mock")).toBeInTheDocument();
+  });
+
+  test("renders AddActionModal CTA if isReadOnly is false", async () => {
+    vi.mocked(getEnvironmentAuth).mockResolvedValue({
+      isReadOnly: false,
+      project: mockProject,
+      isBilling: false,
+      environment: mockEnvironment,
+    } as TEnvironmentAuth);
+
+    const PageComponent = await Page(mockProps);
+    render(PageComponent);
+
+    expect(screen.getByText("PageHeader Mock: common.actions")).toBeInTheDocument();
+    expect(screen.getByText("CTA Mock")).toBeInTheDocument(); // CTA should be present
+    expect(screen.getByText("ActionClassesTable Mock")).toBeInTheDocument();
+  });
+});

apps/web/app/(app)/environments/[environmentId]/actions/page.tsx

@@ -0,0 +1,66 @@
+import { ActionClassesTable } from "@/app/(app)/environments/[environmentId]/actions/components/ActionClassesTable";
+import { ActionClassDataRow } from "@/app/(app)/environments/[environmentId]/actions/components/ActionRowData";
+import { ActionTableHeading } from "@/app/(app)/environments/[environmentId]/actions/components/ActionTableHeading";
+import { AddActionModal } from "@/app/(app)/environments/[environmentId]/actions/components/AddActionModal";
+import { getActionClasses } from "@/lib/actionClass/service";
+import { getEnvironments } from "@/lib/environment/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { getTranslate } from "@/tolgee/server";
+import { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+  title: "Actions",
+};
+
+const Page = async (props) => {
+  const params = await props.params;
+
+  const { isReadOnly, project, isBilling, environment } = await getEnvironmentAuth(params.environmentId);
+
+  const t = await getTranslate();
+
+  const [actionClasses] = await Promise.all([getActionClasses(params.environmentId)]);
+
+  const locale = await findMatchingLocale();
+  const environments = await getEnvironments(project.id);
+
+  const otherEnvironment = environments.filter((env) => env.id !== params.environmentId)[0];
+
+  const otherEnvActionClasses = await getActionClasses(otherEnvironment.id);
+
+  if (isBilling) {
+    return redirect(`/environments/${params.environmentId}/settings/billing`);
+  }
+
+  const renderAddActionButton = () => (
+    <AddActionModal
+      environmentId={params.environmentId}
+      actionClasses={actionClasses}
+      isReadOnly={isReadOnly}
+    />
+  );
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("common.actions")} cta={!isReadOnly ? renderAddActionButton() : undefined} />
+      <ActionClassesTable
+        environment={environment}
+        otherEnvironment={otherEnvironment}
+        otherEnvActionClasses={otherEnvActionClasses}
+        environmentId={params.environmentId}
+        actionClasses={actionClasses}
+        isReadOnly={isReadOnly}>
+        <ActionTableHeading />
+        {actionClasses.map((actionClass) => (
+          <ActionClassDataRow key={actionClass.id} actionClass={actionClass} locale={locale} />
+        ))}
+      </ActionClassesTable>
+    </PageContentWrapper>
+  );
+};
+
+export default Page;

apps/web/app/(app)/environments/[environmentId]/actions/utils.tsx

@@ -0,0 +1,6 @@
+import { Code2Icon, MousePointerClickIcon } from "lucide-react";
+
+export const ACTION_TYPE_ICON_LOOKUP = {
+  code: <Code2Icon className="h-4 w-4" />,
+  noCode: <MousePointerClickIcon className="h-4 w-4" />,
+};

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.test.tsx

@@ -1,5 +1,3 @@
-import { getOrganizationsByUserId } from "@/app/(app)/environments/[environmentId]/lib/organization";
-import { getProjectsByUserId } from "@/app/(app)/environments/[environmentId]/lib/project";
 import { getEnvironment, getEnvironments } from "@/lib/environment/service";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
@@ -7,7 +5,9 @@ import {
   getMonthlyActiveOrganizationPeopleCount,
   getMonthlyOrganizationResponseCount,
   getOrganizationByEnvironmentId,
+  getOrganizationsByUserId,
 } from "@/lib/organization/service";
+import { getUserProjects } from "@/lib/project/service";
 import { getUser } from "@/lib/user/service";
 import {
   getAccessControlPermission,
@@ -20,7 +20,11 @@ import type { Session } from "next-auth";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TMembership } from "@formbricks/types/memberships";
-import { TOrganization } from "@formbricks/types/organizations";
+import {
+  TOrganization,
+  TOrganizationBilling,
+  TOrganizationBillingPlanLimits,
+} from "@formbricks/types/organizations";
 import { TProject } from "@formbricks/types/project";
 import { TUser } from "@formbricks/types/user";
 
@@ -31,12 +35,16 @@ vi.mock("@/lib/environment/service", () => ({
 }));
 vi.mock("@/lib/organization/service", () => ({
   getOrganizationByEnvironmentId: vi.fn(),
+  getOrganizationsByUserId: vi.fn(),
   getMonthlyActiveOrganizationPeopleCount: vi.fn(),
   getMonthlyOrganizationResponseCount: vi.fn(),
 }));
 vi.mock("@/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
+vi.mock("@/lib/project/service", () => ({
+  getUserProjects: vi.fn(),
+}));
 vi.mock("@/lib/membership/service", () => ({
   getMembershipByUserIdOrganizationId: vi.fn(),
 }));
@@ -56,22 +64,6 @@ vi.mock("@/modules/ee/teams/team-list/lib/team", () => ({
 vi.mock("@/tolgee/server", () => ({
   getTranslate: async () => (key: string) => key,
 }));
-vi.mock("@/app/(app)/environments/[environmentId]/lib/organization", () => ({
-  getOrganizationsByUserId: vi.fn(),
-}));
-vi.mock("@/app/(app)/environments/[environmentId]/lib/project", () => ({
-  getProjectsByUserId: vi.fn(),
-}));
-vi.mock("@formbricks/database", () => ({
-  prisma: {
-    project: {
-      findMany: vi.fn(),
-    },
-    organization: {
-      findMany: vi.fn(),
-    },
-  },
-}));
 
 let mockIsFormbricksCloud = false;
 let mockIsDevelopment = false;
@@ -98,6 +90,10 @@ vi.mock("@/app/(app)/environments/[environmentId]/components/MainNavigation", ()
 vi.mock("@/app/(app)/environments/[environmentId]/components/TopControlBar", () => ({
   TopControlBar: () => <div data-testid="top-control-bar">TopControlBar</div>,
 }));
+vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
+  DevEnvironmentBanner: ({ environment }: { environment: TEnvironment }) =>
+    environment.type === "development" ? <div data-testid="dev-banner">DevEnvironmentBanner</div> : null,
+}));
 vi.mock("@/modules/ui/components/limits-reached-banner", () => ({
   LimitsReachedBanner: () => <div data-testid="limits-banner">LimitsReachedBanner</div>,
 }));
@@ -117,6 +113,7 @@ const mockUser = {
   name: "Test User",
   email: "test@example.com",
   emailVerified: new Date(),
+  imageUrl: "",
   twoFactorEnabled: false,
   identityProvider: "email",
   createdAt: new Date(),
@@ -127,10 +124,12 @@ const mockUser = {
 const mockOrganization = {
   id: "org-1",
   name: "Test Org",
+  createdAt: new Date(),
+  updatedAt: new Date(),
   billing: {
-    plan: "free",
-    limits: {},
-  },
+    stripeCustomerId: null,
+    limits: { monthly: { responses: null } } as unknown as TOrganizationBillingPlanLimits,
+  } as unknown as TOrganizationBilling,
 } as unknown as TOrganization;
 
 const mockEnvironment: TEnvironment = {
@@ -193,11 +192,9 @@ describe("EnvironmentLayout", () => {
   beforeEach(() => {
     vi.mocked(getUser).mockResolvedValue(mockUser);
     vi.mocked(getEnvironment).mockResolvedValue(mockEnvironment);
-    vi.mocked(getOrganizationsByUserId).mockResolvedValue([
-      { id: mockOrganization.id, name: mockOrganization.name },
-    ]);
+    vi.mocked(getOrganizationsByUserId).mockResolvedValue([mockOrganization]);
     vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrganization);
-    vi.mocked(getProjectsByUserId).mockResolvedValue([{ id: mockProject.id, name: mockProject.name }]);
+    vi.mocked(getUserProjects).mockResolvedValue([mockProject]);
     vi.mocked(getEnvironments).mockResolvedValue([mockEnvironment]);
     vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
     vi.mocked(getMonthlyActiveOrganizationPeopleCount).mockResolvedValue(100);
@@ -244,6 +241,33 @@ describe("EnvironmentLayout", () => {
     expect(screen.queryByTestId("downgrade-banner")).not.toBeInTheDocument();
   });
 
+  test("renders DevEnvironmentBanner in development environment", async () => {
+    const devEnvironment = { ...mockEnvironment, type: "development" as const };
+    vi.mocked(getEnvironment).mockResolvedValue(devEnvironment);
+    mockIsDevelopment = true;
+    vi.resetModules();
+    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
+      getEnterpriseLicense: vi.fn().mockResolvedValue({
+        active: false,
+        isPendingDowngrade: false,
+        features: { isMultiOrgEnabled: false },
+        lastChecked: new Date(),
+        fallbackLevel: "live",
+      }),
+    }));
+    const { EnvironmentLayout } = await import(
+      "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout"
+    );
+    render(
+      await EnvironmentLayout({
+        environmentId: "env-1",
+        session: mockSession,
+        children: <div>Child Content</div>,
+      })
+    );
+    expect(screen.getByTestId("dev-banner")).toBeInTheDocument();
+  });
+
   test("renders LimitsReachedBanner in Formbricks Cloud", async () => {
     mockIsFormbricksCloud = true;
     vi.resetModules();
@@ -291,6 +315,32 @@ describe("EnvironmentLayout", () => {
     expect(screen.getByTestId("downgrade-banner")).toBeInTheDocument();
   });
 
+  test("passes isAccessControlAllowed props to MainNavigation", async () => {
+    vi.resetModules();
+    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
+      getEnterpriseLicense: vi.fn().mockResolvedValue({
+        active: false,
+        isPendingDowngrade: false,
+        features: { isMultiOrgEnabled: false },
+        lastChecked: new Date(),
+        fallbackLevel: "live",
+      }),
+    }));
+    const { EnvironmentLayout } = await import(
+      "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout"
+    );
+    render(
+      await EnvironmentLayout({
+        environmentId: "env-1",
+        session: mockSession,
+        children: <div>Child Content</div>,
+      })
+    );
+
+    expect(screen.getByTestId("is-access-control-allowed")).toHaveTextContent("true");
+    expect(vi.mocked(getAccessControlPermission)).toHaveBeenCalledWith(mockOrganization.billing.plan);
+  });
+
   test("handles empty organizationTeams array", async () => {
     vi.mocked(getTeamsByOrganizationId).mockResolvedValue([]);
     vi.resetModules();
@@ -430,7 +480,7 @@ describe("EnvironmentLayout", () => {
   });
 
   test("throws error if projects, environments or organizations not found", async () => {
-    vi.mocked(getProjectsByUserId).mockResolvedValue(null as any);
+    vi.mocked(getUserProjects).mockResolvedValue(null as any);
     vi.resetModules();
     await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
       getEnterpriseLicense: vi.fn().mockResolvedValue({

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx

@@ -1,7 +1,5 @@
 import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
 import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
-import { getOrganizationsByUserId } from "@/app/(app)/environments/[environmentId]/lib/organization";
-import { getProjectsByUserId } from "@/app/(app)/environments/[environmentId]/lib/project";
 import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getEnvironment, getEnvironments } from "@/lib/environment/service";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
@@ -10,7 +8,9 @@ import {
   getMonthlyActiveOrganizationPeopleCount,
   getMonthlyOrganizationResponseCount,
   getOrganizationByEnvironmentId,
+  getOrganizationsByUserId,
 } from "@/lib/organization/service";
+import { getUserProjects } from "@/lib/project/service";
 import { getUser } from "@/lib/user/service";
 import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
 import {
@@ -18,6 +18,7 @@ import {
   getOrganizationProjectsLimit,
 } from "@/modules/ee/license-check/lib/utils";
 import { getProjectPermissionByUserId } from "@/modules/ee/teams/lib/roles";
+import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
 import { LimitsReachedBanner } from "@/modules/ui/components/limits-reached-banner";
 import { PendingDowngradeBanner } from "@/modules/ui/components/pending-downgrade-banner";
 import { getTranslate } from "@/tolgee/server";
@@ -50,14 +51,8 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
     throw new Error(t("common.environment_not_found"));
   }
 
-  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
-  if (!currentUserMembership) {
-    throw new Error(t("common.membership_not_found"));
-  }
-  const membershipRole = currentUserMembership?.role;
-
   const [projects, environments, isAccessControlAllowed] = await Promise.all([
-    getProjectsByUserId(user.id, currentUserMembership),
+    getUserProjects(user.id, organization.id),
     getEnvironments(environment.projectId),
     getAccessControlPermission(organization.billing.plan),
   ]);
@@ -66,6 +61,8 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
     throw new Error(t("environments.projects_environments_organizations_not_found"));
   }
 
+  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
+  const membershipRole = currentUserMembership?.role;
   const { isMember } = getAccessFlags(membershipRole);
 
   const { features, lastChecked, isPendingDowngrade, active } = await getEnterpriseLicense();
@@ -90,17 +87,10 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
 
   const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
 
-  // Find the current project from the projects array
-  const project = projects.find((p) => p.id === environment.projectId);
-  if (!project) {
-    throw new Error(t("common.project_not_found"));
-  }
-
-  const { isManager, isOwner } = getAccessFlags(membershipRole);
-  const isOwnerOrManager = isManager || isOwner;
-
   return (
     <div className="flex h-screen min-h-screen flex-col overflow-hidden">
+      <DevEnvironmentBanner environment={environment} />
+
       {IS_FORMBRICKS_CLOUD && (
         <LimitsReachedBanner
           organization={organization}
@@ -122,26 +112,23 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
         <MainNavigation
           environment={environment}
           organization={organization}
+          organizations={organizations}
           projects={projects}
+          organizationProjectsLimit={organizationProjectsLimit}
           user={user}
           isFormbricksCloud={IS_FORMBRICKS_CLOUD}
           isDevelopment={IS_DEVELOPMENT}
           membershipRole={membershipRole}
+          isMultiOrgEnabled={isMultiOrgEnabled}
+          isLicenseActive={active}
+          isAccessControlAllowed={isAccessControlAllowed}
         />
         <div id="mainContent" className="flex flex-1 flex-col overflow-hidden bg-slate-50">
           <TopControlBar
+            environment={environment}
             environments={environments}
-            currentOrganizationId={organization.id}
-            organizations={organizations}
-            currentProjectId={project.id}
-            projects={projects}
-            isMultiOrgEnabled={isMultiOrgEnabled}
-            organizationProjectsLimit={organizationProjectsLimit}
-            isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-            isLicenseActive={active}
-            isOwnerOrManager={isOwnerOrManager}
-            isAccessControlAllowed={isAccessControlAllowed}
             membershipRole={membershipRole}
+            projectPermission={projectPermission}
           />
           <div className="flex-1 overflow-y-auto">{children}</div>
         </div>

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.test.tsx

@@ -1,3 +1,5 @@
+import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
+import { TOrganizationTeam } from "@/modules/ee/teams/team-list/types/team";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { usePathname, useRouter } from "next/navigation";
@@ -6,8 +8,7 @@ import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TProject } from "@formbricks/types/project";
 import { TUser } from "@formbricks/types/user";
-import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
-import { getLatestStableFbReleaseAction } from "@/modules/projects/settings/(setup)/app-connection/actions";
+import { getLatestStableFbReleaseAction } from "../actions/actions";
 import { MainNavigation } from "./MainNavigation";
 
 // Mock constants that this test needs
@@ -32,7 +33,7 @@ vi.mock("next-auth/react", () => ({
 vi.mock("@/modules/auth/hooks/use-sign-out", () => ({
   useSignOut: vi.fn(() => ({ signOut: vi.fn() })),
 }));
-vi.mock("@/modules/projects/settings/(setup)/app-connection/actions", () => ({
+vi.mock("@/app/(app)/environments/[environmentId]/actions/actions", () => ({
   getLatestStableFbReleaseAction: vi.fn(),
 }));
 vi.mock("@/app/lib/formbricks", () => ({
@@ -51,6 +52,23 @@ vi.mock("@/modules/organization/components/CreateOrganizationModal", () => ({
   CreateOrganizationModal: ({ open }: { open: boolean }) =>
     open ? <div data-testid="create-org-modal">Create Org Modal</div> : null,
 }));
+vi.mock("@/modules/projects/components/project-switcher", () => ({
+  ProjectSwitcher: ({
+    isCollapsed,
+    organizationTeams,
+    isAccessControlAllowed,
+  }: {
+    isCollapsed: boolean;
+    organizationTeams: TOrganizationTeam[];
+    isAccessControlAllowed: boolean;
+  }) => (
+    <div data-testid="project-switcher" data-collapsed={isCollapsed}>
+      Project Switcher
+      <div data-testid="organization-teams-count">{organizationTeams?.length || 0}</div>
+      <div data-testid="is-access-control-allowed">{isAccessControlAllowed.toString()}</div>
+    </div>
+  ),
+}));
 vi.mock("@/modules/ui/components/avatars", () => ({
   ProfileAvatar: () => <div data-testid="profile-avatar">Avatar</div>,
 }));
@@ -93,6 +111,7 @@ const mockUser = {
   id: "user1",
   name: "Test User",
   email: "test@example.com",
+  imageUrl: "http://example.com/avatar.png",
   emailVerified: new Date(),
   twoFactorEnabled: false,
   identityProvider: "email",
@@ -159,11 +178,13 @@ describe("MainNavigation", () => {
 
   test("renders expanded by default and collapses on toggle", async () => {
     render(<MainNavigation {...defaultProps} />);
+    const projectSwitcher = screen.getByTestId("project-switcher");
     // Assuming the toggle button is the only one initially without an accessible name
     // A more specific selector like data-testid would be better if available.
     const toggleButton = screen.getByRole("button", { name: "" });
 
     // Check initial state (expanded)
+    expect(projectSwitcher).toHaveAttribute("data-collapsed", "false");
     expect(screen.getByAltText("environments.formbricks_logo")).toBeInTheDocument();
     // Check localStorage is not set initially after clear()
     expect(localStorage.getItem("isMainNavCollapsed")).toBeNull();
@@ -174,6 +195,7 @@ describe("MainNavigation", () => {
     // Check state after first toggle (collapsed)
     await waitFor(() => {
       // Check that the attribute eventually becomes true
+      expect(projectSwitcher).toHaveAttribute("data-collapsed", "true");
       // Check that localStorage is updated
       expect(localStorage.getItem("isMainNavCollapsed")).toBe("true");
     });
@@ -188,6 +210,7 @@ describe("MainNavigation", () => {
     // Check state after second toggle (expanded)
     await waitFor(() => {
       // Check that the attribute eventually becomes false
+      expect(projectSwitcher).toHaveAttribute("data-collapsed", "false");
       // Check that localStorage is updated
       expect(localStorage.getItem("isMainNavCollapsed")).toBe("false");
     });
@@ -197,6 +220,14 @@ describe("MainNavigation", () => {
     });
   });
 
+  test("renders correct active navigation link", () => {
+    vi.mocked(usePathname).mockReturnValue("/environments/env1/actions");
+    render(<MainNavigation {...defaultProps} />);
+    const actionsLink = screen.getByRole("link", { name: /common.actions/ });
+    // Check if the parent li has the active class styling
+    expect(actionsLink.closest("li")).toHaveClass("border-brand-dark");
+  });
+
   test("renders user dropdown and handles logout", async () => {
     const mockSignOut = vi.fn().mockResolvedValue({ url: "/auth/login" });
     vi.mocked(useSignOut).mockReturnValue({ signOut: mockSignOut });
@@ -210,12 +241,13 @@ describe("MainNavigation", () => {
     expect(userTrigger).toBeInTheDocument(); // Ensure the trigger element is found
     await userEvent.click(userTrigger);
 
-    // Wait for the dropdown content to appear - using getAllByText to handle multiple instances
+    // Wait for the dropdown content to appear
     await waitFor(() => {
-      const accountElements = screen.getAllByText("common.account");
-      expect(accountElements).toHaveLength(2);
+      expect(screen.getByText("common.account")).toBeInTheDocument();
     });
 
+    expect(screen.getByText("common.organization")).toBeInTheDocument();
+    expect(screen.getByText("common.license")).toBeInTheDocument(); // Not cloud, not member
     expect(screen.getByText("common.documentation")).toBeInTheDocument();
     expect(screen.getByText("common.logout")).toBeInTheDocument();
 
@@ -236,6 +268,46 @@ describe("MainNavigation", () => {
     });
   });
 
+  test("handles organization switching", async () => {
+    render(<MainNavigation {...defaultProps} />);
+
+    const userTrigger = screen.getByTestId("profile-avatar").parentElement!;
+    await userEvent.click(userTrigger);
+
+    // Wait for the initial dropdown items
+    await waitFor(() => {
+      expect(screen.getByText("common.switch_organization")).toBeInTheDocument();
+    });
+
+    const switchOrgTrigger = screen.getByText("common.switch_organization").closest("div[role='menuitem']")!;
+    await userEvent.hover(switchOrgTrigger); // Hover to open sub-menu
+
+    const org2Item = await screen.findByText("Another Org"); // findByText includes waitFor
+    await userEvent.click(org2Item);
+
+    expect(mockRouterPush).toHaveBeenCalledWith("/organizations/org2/");
+  });
+
+  test("opens create organization modal", async () => {
+    render(<MainNavigation {...defaultProps} />);
+
+    const userTrigger = screen.getByTestId("profile-avatar").parentElement!;
+    await userEvent.click(userTrigger);
+
+    // Wait for the initial dropdown items
+    await waitFor(() => {
+      expect(screen.getByText("common.switch_organization")).toBeInTheDocument();
+    });
+
+    const switchOrgTrigger = screen.getByText("common.switch_organization").closest("div[role='menuitem']")!;
+    await userEvent.hover(switchOrgTrigger); // Hover to open sub-menu
+
+    const createOrgButton = await screen.findByText("common.create_new_organization"); // findByText includes waitFor
+    await userEvent.click(createOrgButton);
+
+    expect(screen.getByTestId("create-org-modal")).toBeInTheDocument();
+  });
+
   test("hides new version banner for members or if no new version", async () => {
     // Test for member
     vi.mocked(getLatestStableFbReleaseAction).mockResolvedValue({ data: "v1.1.0" });
@@ -263,25 +335,34 @@ describe("MainNavigation", () => {
     expect(screen.queryByTestId("project-switcher")).not.toBeInTheDocument();
   });
 
+  test("shows billing link and hides license link in cloud", async () => {
+    render(<MainNavigation {...defaultProps} isFormbricksCloud={true} />);
+    const userTrigger = screen.getByTestId("profile-avatar").parentElement!;
+    await userEvent.click(userTrigger);
+
+    // Wait for dropdown items
+    await waitFor(() => {
+      expect(screen.getByText("common.billing")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("common.license")).not.toBeInTheDocument();
+  });
+
   test("passes isAccessControlAllowed props to ProjectSwitcher", () => {
     render(<MainNavigation {...defaultProps} />);
 
-    // Test basic navigation structure is rendered (aside element with complementary role)
-    expect(screen.getByRole("complementary")).toBeInTheDocument();
-    expect(screen.getByTestId("profile-avatar")).toBeInTheDocument();
+    expect(screen.getByTestId("organization-teams-count")).toHaveTextContent("0");
+    expect(screen.getByTestId("is-access-control-allowed")).toHaveTextContent("true");
   });
 
   test("handles no organizationTeams", () => {
     render(<MainNavigation {...defaultProps} />);
 
-    // Test that navigation renders correctly with no teams
-    expect(screen.getByRole("complementary")).toBeInTheDocument();
+    expect(screen.getByTestId("organization-teams-count")).toHaveTextContent("0");
   });
 
   test("handles isAccessControlAllowed false", () => {
-    render(<MainNavigation {...defaultProps} />);
+    render(<MainNavigation {...defaultProps} isAccessControlAllowed={false} />);
 
-    // Test that navigation renders correctly with access control disabled
-    expect(screen.getByRole("complementary")).toBeInTheDocument();
+    expect(screen.getByTestId("is-access-control-allowed")).toHaveTextContent("false");
   });
 });

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -1,17 +1,47 @@
 "use client";
 
+import { getLatestStableFbReleaseAction } from "@/app/(app)/environments/[environmentId]/actions/actions";
+import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
+import FBLogo from "@/images/formbricks-wordmark.svg";
+import { cn } from "@/lib/cn";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { capitalizeFirstLetter } from "@/lib/utils/strings";
+import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
+import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
+import { ProjectSwitcher } from "@/modules/projects/components/project-switcher";
+import { ProfileAvatar } from "@/modules/ui/components/avatars";
+import { Button } from "@/modules/ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
 import { useTranslate } from "@tolgee/react";
 import {
   ArrowUpRightIcon,
+  BlocksIcon,
   ChevronRightIcon,
   Cog,
+  CreditCardIcon,
+  KeyIcon,
   LogOutIcon,
   MessageCircle,
+  MousePointerClick,
   PanelLeftCloseIcon,
   PanelLeftOpenIcon,
+  PlusIcon,
   RocketIcon,
   UserCircleIcon,
   UserIcon,
+  UsersIcon,
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
@@ -20,55 +50,55 @@ import { useEffect, useMemo, useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
+import { TProject } from "@formbricks/types/project";
 import { TUser } from "@formbricks/types/user";
-import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
-import { isNewerVersion } from "@/app/(app)/environments/[environmentId]/lib/utils";
-import FBLogo from "@/images/formbricks-wordmark.svg";
-import { cn } from "@/lib/cn";
-import { getAccessFlags } from "@/lib/membership/utils";
-import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
-import { getLatestStableFbReleaseAction } from "@/modules/projects/settings/(setup)/app-connection/actions";
-import { ProfileAvatar } from "@/modules/ui/components/avatars";
-import { Button } from "@/modules/ui/components/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
 import packageJson from "../../../../../package.json";
 
 interface NavigationProps {
   environment: TEnvironment;
+  organizations: TOrganization[];
   user: TUser;
   organization: TOrganization;
-  projects: { id: string; name: string }[];
+  projects: TProject[];
+  isMultiOrgEnabled: boolean;
   isFormbricksCloud: boolean;
   isDevelopment: boolean;
   membershipRole?: TOrganizationRole;
+  organizationProjectsLimit: number;
+  isLicenseActive: boolean;
+  isAccessControlAllowed: boolean;
 }
 
 export const MainNavigation = ({
   environment,
+  organizations,
   organization,
   user,
   projects,
+  isMultiOrgEnabled,
   membershipRole,
   isFormbricksCloud,
+  organizationProjectsLimit,
+  isLicenseActive,
   isDevelopment,
+  isAccessControlAllowed,
 }: NavigationProps) => {
   const router = useRouter();
   const pathname = usePathname();
   const { t } = useTranslate();
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [currentOrganizationName, setCurrentOrganizationName] = useState("");
+  const [currentOrganizationId, setCurrentOrganizationId] = useState("");
+  const [showCreateOrganizationModal, setShowCreateOrganizationModal] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
   const [isTextVisible, setIsTextVisible] = useState(true);
   const [latestVersion, setLatestVersion] = useState("");
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
   const project = projects.find((project) => project.id === environment.projectId);
-  const { isManager, isOwner, isBilling } = getAccessFlags(membershipRole);
+  const { isManager, isOwner, isMember, isBilling } = getAccessFlags(membershipRole);
 
   const isOwnerOrManager = isManager || isOwner;
+  const isPricingDisabled = isMember;
 
   const toggleSidebar = () => {
     setIsCollapsed(!isCollapsed);
@@ -89,11 +119,40 @@ export const MainNavigation = ({
   }, [isCollapsed]);
 
   useEffect(() => {
-    // Auto collapse project navbar on org and account settings
-    if (pathname?.includes("/settings")) {
-      setIsCollapsed(true);
+    if (organization && organization.name !== "") {
+      setCurrentOrganizationName(organization.name);
+      setCurrentOrganizationId(organization.id);
     }
-  }, [pathname]);
+  }, [organization]);
+
+  const sortedOrganizations = useMemo(() => {
+    return [...organizations].sort((a, b) => a.name.localeCompare(b.name));
+  }, [organizations]);
+
+  const sortedProjects = useMemo(() => {
+    const channelOrder: (string | null)[] = ["website", "app", "link", null];
+
+    const groupedProjects = projects.reduce(
+      (acc, project) => {
+        const channel = project.config.channel;
+        const key = channel !== null ? channel : "null";
+        acc[key] = acc[key] || [];
+        acc[key].push(project);
+        return acc;
+      },
+      {} as Record<string, typeof projects>
+    );
+
+    Object.keys(groupedProjects).forEach((channel) => {
+      groupedProjects[channel].sort((a, b) => a.name.localeCompare(b.name));
+    });
+
+    return channelOrder.flatMap((channel) => groupedProjects[channel !== null ? channel : "null"] || []);
+  }, [projects]);
+
+  const handleEnvironmentChangeByOrganization = (organizationId: string) => {
+    router.push(`/organizations/${organizationId}/`);
+  };
 
   const mainNavigation = useMemo(
     () => [
@@ -110,6 +169,18 @@ export const MainNavigation = ({
         icon: UserIcon,
         isActive: pathname?.includes("/contacts") || pathname?.includes("/segments"),
       },
+      {
+        name: t("common.actions"),
+        href: `/environments/${environment.id}/actions`,
+        icon: MousePointerClick,
+        isActive: pathname?.includes("/actions"),
+      },
+      {
+        name: t("common.integrations"),
+        href: `/environments/${environment.id}/integrations`,
+        icon: BlocksIcon,
+        isActive: pathname?.includes("/integrations"),
+      },
       {
         name: t("common.configuration"),
         href: `/environments/${environment.id}/project/general`,
@@ -127,14 +198,25 @@ export const MainNavigation = ({
       icon: UserCircleIcon,
     },
     {
-      label: t("common.documentation"),
-      href: "https://formbricks.com/docs",
-      target: "_blank",
-      icon: ArrowUpRightIcon,
+      label: t("common.organization"),
+      href: `/environments/${environment.id}/settings/general`,
+      icon: UsersIcon,
     },
     {
-      label: t("common.share_feedback"),
-      href: "https://github.com/formbricks/formbricks/issues",
+      label: t("common.billing"),
+      href: `/environments/${environment.id}/settings/billing`,
+      hidden: !isFormbricksCloud,
+      icon: CreditCardIcon,
+    },
+    {
+      label: t("common.license"),
+      href: `/environments/${environment.id}/settings/enterprise`,
+      hidden: isFormbricksCloud || isPricingDisabled,
+      icon: KeyIcon,
+    },
+    {
+      label: t("common.documentation"),
+      href: "https://formbricks.com/docs",
       target: "_blank",
       icon: ArrowUpRightIcon,
     },
@@ -147,7 +229,7 @@ export const MainNavigation = ({
         const latestVersionTag = res.data;
         const currentVersionTag = `v${packageJson.version}`;
 
-        if (isNewerVersion(currentVersionTag, latestVersionTag)) {
+        if (currentVersionTag !== latestVersionTag) {
           setLatestVersion(latestVersionTag);
         }
       }
@@ -163,7 +245,8 @@ export const MainNavigation = ({
         <aside
           className={cn(
             "z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
-            !isCollapsed ? "w-sidebar-collapsed" : "w-sidebar-expanded"
+            !isCollapsed ? "w-sidebar-collapsed" : "w-sidebar-expanded",
+            environment.type === "development" ? `h-[calc(100vh-1.25rem)]` : "h-screen"
           )}>
           <div>
             {/* Logo and Toggle */}
@@ -229,6 +312,23 @@ export const MainNavigation = ({
               </Link>
             )}
 
+            {/* Project Switch */}
+            {!isBilling && (
+              <ProjectSwitcher
+                environmentId={environment.id}
+                projects={sortedProjects}
+                project={project}
+                isCollapsed={isCollapsed}
+                isFormbricksCloud={isFormbricksCloud}
+                isLicenseActive={isLicenseActive}
+                isOwnerOrManager={isOwnerOrManager}
+                isTextVisible={isTextVisible}
+                organization={organization}
+                organizationProjectsLimit={organizationProjectsLimit}
+                isAccessControlAllowed={isAccessControlAllowed}
+              />
+            )}
+
             {/* User Switch */}
             <div className="flex items-center">
               <DropdownMenu>
@@ -237,11 +337,12 @@ export const MainNavigation = ({
                   id="userDropdownTrigger"
                   className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
                   <div
+                    tabIndex={0}
                     className={cn(
                       "flex cursor-pointer flex-row items-center gap-3",
                       isCollapsed ? "justify-center px-2" : "px-4"
                     )}>
-                    <ProfileAvatar userId={user.id} />
+                    <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
                     {!isCollapsed && !isTextVisible && (
                       <>
                         <div
@@ -253,7 +354,11 @@ export const MainNavigation = ({
                             )}>
                             {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
                           </p>
-                          <p className="text-sm text-slate-700">{t("common.account")}</p>
+                          <p
+                            title={capitalizeFirstLetter(organization?.name)}
+                            className="truncate text-sm text-slate-500">
+                            {capitalizeFirstLetter(organization?.name)}
+                          </p>
                         </div>
                         <ChevronRightIcon
                           className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")}
@@ -271,20 +376,24 @@ export const MainNavigation = ({
                   align="end">
                   {/* Dropdown Items */}
 
-                  {dropdownNavigation.map((link) => (
-                    <Link
-                      href={link.href}
-                      target={link.target}
-                      className="flex w-full items-center"
-                      key={link.label}
-                      rel={link.target === "_blank" ? "noopener noreferrer" : undefined}>
-                      <DropdownMenuItem>
-                        <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
-                        {link.label}
-                      </DropdownMenuItem>
-                    </Link>
-                  ))}
+                  {dropdownNavigation.map(
+                    (link) =>
+                      !link.hidden && (
+                        <Link
+                          href={link.href}
+                          target={link.target}
+                          className="flex w-full items-center"
+                          key={link.label}>
+                          <DropdownMenuItem>
+                            <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
+                            {link.label}
+                          </DropdownMenuItem>
+                        </Link>
+                      )
+                  )}
+
                   {/* Logout */}
+
                   <DropdownMenuItem
                     onClick={async () => {
                       const route = await signOutWithAudit({
@@ -300,12 +409,55 @@ export const MainNavigation = ({
                     icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
                     {t("common.logout")}
                   </DropdownMenuItem>
+
+                  {/* Organization Switch */}
+
+                  {(isMultiOrgEnabled || organizations.length > 1) && (
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger className="rounded-lg">
+                        <div>
+                          <p>{currentOrganizationName}</p>
+                          <p className="block text-xs text-slate-500">{t("common.switch_organization")}</p>
+                        </div>
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuPortal>
+                        <DropdownMenuSubContent sideOffset={10} alignOffset={5}>
+                          <DropdownMenuRadioGroup
+                            value={currentOrganizationId}
+                            onValueChange={(organizationId) =>
+                              handleEnvironmentChangeByOrganization(organizationId)
+                            }>
+                            {sortedOrganizations.map((organization) => (
+                              <DropdownMenuRadioItem
+                                value={organization.id}
+                                className="cursor-pointer rounded-lg"
+                                key={organization.id}>
+                                {organization.name}
+                              </DropdownMenuRadioItem>
+                            ))}
+                          </DropdownMenuRadioGroup>
+                          <DropdownMenuSeparator />
+                          {isMultiOrgEnabled && (
+                            <DropdownMenuItem
+                              onClick={() => setShowCreateOrganizationModal(true)}
+                              icon={<PlusIcon className="mr-2 h-4 w-4" />}>
+                              <span>{t("common.create_new_organization")}</span>
+                            </DropdownMenuItem>
+                          )}
+                        </DropdownMenuSubContent>
+                      </DropdownMenuPortal>
+                    </DropdownMenuSub>
+                  )}
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
           </div>
         </aside>
       )}
+      <CreateOrganizationModal
+        open={showCreateOrganizationModal}
+        setOpen={(val) => setShowCreateOrganizationModal(val)}
+      />
     </>
   );
 };

apps/web/app/(app)/environments/[environmentId]/components/PosthogIdentify.test.tsx

@@ -36,6 +36,8 @@ describe("PosthogIdentify", () => {
           {
             name: "Test User",
             email: "test@example.com",
+            role: "engineer",
+            objective: "increase_conversion",
           } as TUser
         }
         environmentId="env-456"
@@ -55,6 +57,8 @@ describe("PosthogIdentify", () => {
     expect(mockIdentify).toHaveBeenCalledWith("user-123", {
       name: "Test User",
       email: "test@example.com",
+      role: "engineer",
+      objective: "increase_conversion",
     });
 
     // environment + organization groups
@@ -138,6 +142,8 @@ describe("PosthogIdentify", () => {
     expect(mockIdentify).toHaveBeenCalledWith("user-123", {
       name: "Test User",
       email: "test@example.com",
+      role: undefined,
+      objective: undefined,
     });
     // No environmentId or organizationId => no group calls
     expect(mockGroup).not.toHaveBeenCalled();

apps/web/app/(app)/environments/[environmentId]/components/PosthogIdentify.tsx

@@ -32,6 +32,8 @@ export const PosthogIdentify = ({
       posthog.identify(session.user.id, {
         name: user.name,
         email: user.email,
+        role: user.role,
+        objective: user.objective,
       });
       if (environmentId) {
         posthog.group("environment", environmentId, { name: environmentId });
@@ -54,6 +56,8 @@ export const PosthogIdentify = ({
     organizationBilling,
     user.name,
     user.email,
+    user.role,
+    user.objective,
     isPosthogEnabled,
   ]);
 

apps/web/app/(app)/environments/[environmentId]/components/TopControlBar.test.tsx

@@ -0,0 +1,64 @@
+import { TopControlButtons } from "@/app/(app)/environments/[environmentId]/components/TopControlButtons";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { TopControlBar } from "./TopControlBar";
+
+// Mock the child component
+vi.mock("@/app/(app)/environments/[environmentId]/components/TopControlButtons", () => ({
+  TopControlButtons: vi.fn(() => <div data-testid="top-control-buttons">Mocked TopControlButtons</div>),
+}));
+
+const mockEnvironment: TEnvironment = {
+  id: "env1",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  type: "production",
+  projectId: "proj1",
+  appSetupCompleted: true,
+};
+
+const mockEnvironments: TEnvironment[] = [
+  mockEnvironment,
+  { ...mockEnvironment, id: "env2", type: "development" },
+];
+
+const mockMembershipRole: TOrganizationRole = "owner";
+const mockProjectPermission = "manage";
+
+describe("TopControlBar", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  test("renders correctly and passes props to TopControlButtons", () => {
+    render(
+      <TopControlBar
+        environment={mockEnvironment}
+        environments={mockEnvironments}
+        membershipRole={mockMembershipRole}
+        projectPermission={mockProjectPermission}
+      />
+    );
+
+    // Check if the main div is rendered
+    const mainDiv = screen.getByTestId("fb__global-top-control-bar");
+    expect(mainDiv).toHaveClass("flex h-14 w-full items-center justify-end bg-slate-50 px-6");
+
+    // Check if the mocked child component is rendered
+    expect(screen.getByTestId("top-control-buttons")).toBeInTheDocument();
+
+    // Check if the child component received the correct props
+    expect(TopControlButtons).toHaveBeenCalledWith(
+      {
+        environment: mockEnvironment,
+        environments: mockEnvironments,
+        membershipRole: mockMembershipRole,
+        projectPermission: mockProjectPermission,
+      },
+      undefined // Updated from {} to undefined
+    );
+  });
+});

apps/web/app/(app)/environments/[environmentId]/components/TopControlBar.tsx

@@ -1,62 +1,35 @@
-"use client";
-
-import { ProjectAndOrgSwitch } from "@/app/(app)/environments/[environmentId]/components/project-and-org-switch";
-import { useEnvironment } from "@/app/(app)/environments/[environmentId]/context/environment-context";
-import { getAccessFlags } from "@/lib/membership/utils";
+import { TopControlButtons } from "@/app/(app)/environments/[environmentId]/components/TopControlButtons";
+import { TTeamPermission } from "@/modules/ee/teams/project-teams/types/team";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 
-interface TopControlBarProps {
+interface SideBarProps {
+  environment: TEnvironment;
   environments: TEnvironment[];
-  currentOrganizationId: string;
-  organizations: { id: string; name: string }[];
-  currentProjectId: string;
-  projects: { id: string; name: string }[];
-  isMultiOrgEnabled: boolean;
-  organizationProjectsLimit: number;
-  isFormbricksCloud: boolean;
-  isLicenseActive: boolean;
-  isOwnerOrManager: boolean;
-  isAccessControlAllowed: boolean;
   membershipRole?: TOrganizationRole;
+  projectPermission: TTeamPermission | null;
 }
 
 export const TopControlBar = ({
+  environment,
   environments,
-  currentOrganizationId,
-  organizations,
-  currentProjectId,
-  projects,
-  isMultiOrgEnabled,
-  organizationProjectsLimit,
-  isFormbricksCloud,
-  isLicenseActive,
-  isOwnerOrManager,
-  isAccessControlAllowed,
   membershipRole,
-}: TopControlBarProps) => {
-  const { isMember } = getAccessFlags(membershipRole);
-  const { environment } = useEnvironment();
-
+  projectPermission,
+}: SideBarProps) => {
   return (
     <div
-      className="flex h-14 w-full items-center justify-between bg-slate-50 px-6"
+      className="flex h-14 w-full items-center justify-end bg-slate-50 px-6"
       data-testid="fb__global-top-control-bar">
-      <ProjectAndOrgSwitch
-        currentEnvironmentId={environment.id}
-        environments={environments}
-        currentOrganizationId={currentOrganizationId}
-        organizations={organizations}
-        currentProjectId={currentProjectId}
-        projects={projects}
-        isMultiOrgEnabled={isMultiOrgEnabled}
-        organizationProjectsLimit={organizationProjectsLimit}
-        isFormbricksCloud={isFormbricksCloud}
-        isLicenseActive={isLicenseActive}
-        isOwnerOrManager={isOwnerOrManager}
-        isMember={isMember}
-        isAccessControlAllowed={isAccessControlAllowed}
-      />
+      <div className="shadow-xs z-10">
+        <div className="flex w-fit items-center space-x-2 py-2">
+          <TopControlButtons
+            environment={environment}
+            environments={environments}
+            membershipRole={membershipRole}
+            projectPermission={projectPermission}
+          />
+        </div>
+      </div>
     </div>
   );
 };

apps/web/app/(app)/environments/[environmentId]/components/TopControlButtons.test.tsx

@@ -0,0 +1,182 @@
+import { getAccessFlags } from "@/lib/membership/utils";
+import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { TopControlButtons } from "./TopControlButtons";
+
+// Mock dependencies
+const mockPush = vi.fn();
+vi.mock("next/navigation", () => ({
+  useRouter: vi.fn(() => ({ push: mockPush })),
+}));
+
+vi.mock("@/lib/membership/utils", () => ({
+  getAccessFlags: vi.fn(),
+}));
+
+vi.mock("@/modules/ee/teams/utils/teams", () => ({
+  getTeamPermissionFlags: vi.fn(),
+}));
+
+vi.mock("@/app/(app)/environments/[environmentId]/components/EnvironmentSwitch", () => ({
+  EnvironmentSwitch: vi.fn(() => <div data-testid="environment-switch">EnvironmentSwitch</div>),
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+  Button: ({ children, onClick, variant, size, className, asChild, ...props }: any) => {
+    const Tag = asChild ? "div" : "button"; // Use div if asChild is true for Link mock
+    return (
+      <Tag onClick={onClick} data-testid={`button-${className}`} {...props}>
+        {children}
+      </Tag>
+    );
+  },
+}));
+
+vi.mock("@/modules/ui/components/tooltip", () => ({
+  TooltipRenderer: ({ children, tooltipContent }: { children: React.ReactNode; tooltipContent: string }) => (
+    <div data-testid={`tooltip-${tooltipContent.split(".").pop()}`}>{children}</div>
+  ),
+}));
+
+vi.mock("lucide-react", () => ({
+  BugIcon: () => <div data-testid="bug-icon" />,
+  CircleUserIcon: () => <div data-testid="circle-user-icon" />,
+  PlusIcon: () => <div data-testid="plus-icon" />,
+}));
+
+vi.mock("next/link", () => ({
+  default: ({ children, href, target }: { children: React.ReactNode; href: string; target?: string }) => (
+    <a href={href} target={target} data-testid="link-mock">
+      {children}
+    </a>
+  ),
+}));
+
+// Mock data
+const mockEnvironmentDev: TEnvironment = {
+  id: "dev-env-id",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  type: "development",
+  projectId: "project-id",
+  appSetupCompleted: true,
+};
+
+const mockEnvironmentProd: TEnvironment = {
+  id: "prod-env-id",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  type: "production",
+  projectId: "project-id",
+  appSetupCompleted: true,
+};
+
+const mockEnvironments = [mockEnvironmentDev, mockEnvironmentProd];
+
+describe("TopControlButtons", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default mocks for access flags
+    vi.mocked(getAccessFlags).mockReturnValue({
+      isOwner: false,
+      isMember: false,
+      isBilling: false,
+    } as any);
+    vi.mocked(getTeamPermissionFlags).mockReturnValue({
+      hasReadAccess: false,
+    } as any);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  const renderComponent = (
+    membershipRole?: TOrganizationRole,
+    projectPermission: any = null,
+    isBilling = false,
+    hasReadAccess = false
+  ) => {
+    vi.mocked(getAccessFlags).mockReturnValue({
+      isMember: membershipRole === "member",
+      isBilling: isBilling,
+      isOwner: membershipRole === "owner",
+    } as any);
+    vi.mocked(getTeamPermissionFlags).mockReturnValue({
+      hasReadAccess: hasReadAccess,
+    } as any);
+
+    return render(
+      <TopControlButtons
+        environment={mockEnvironmentDev}
+        environments={mockEnvironments}
+        membershipRole={membershipRole}
+        projectPermission={projectPermission}
+      />
+    );
+  };
+
+  test("renders correctly for Owner role", async () => {
+    renderComponent("owner");
+
+    expect(screen.getByTestId("environment-switch")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-share_feedback")).toBeInTheDocument();
+    expect(screen.getByTestId("bug-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-account")).toBeInTheDocument();
+    expect(screen.getByTestId("circle-user-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-new_survey")).toBeInTheDocument();
+    expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
+
+    // Check link
+    const link = screen.getByTestId("link-mock");
+    expect(link).toHaveAttribute("href", "https://github.com/formbricks/formbricks/issues");
+    expect(link).toHaveAttribute("target", "_blank");
+
+    // Click account button
+    const accountButton = screen.getByTestId("circle-user-icon").closest("button");
+    await userEvent.click(accountButton!);
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(`/environments/${mockEnvironmentDev.id}/settings/profile`);
+    });
+
+    // Click new survey button
+    const newSurveyButton = screen.getByTestId("plus-icon").closest("button");
+    await userEvent.click(newSurveyButton!);
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(`/environments/${mockEnvironmentDev.id}/surveys/templates`);
+    });
+  });
+
+  test("hides EnvironmentSwitch for Billing role", () => {
+    renderComponent(undefined, null, true); // isBilling = true
+    expect(screen.queryByTestId("environment-switch")).not.toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-share_feedback")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-account")).toBeInTheDocument();
+    expect(screen.queryByTestId("tooltip-new_survey")).not.toBeInTheDocument(); // Hidden for billing
+  });
+
+  test("hides New Survey button for Billing role", () => {
+    renderComponent(undefined, null, true); // isBilling = true
+    expect(screen.queryByTestId("tooltip-new_survey")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("plus-icon")).not.toBeInTheDocument();
+  });
+
+  test("hides New Survey button for read-only Member", () => {
+    renderComponent("member", null, false, true); // isMember = true, hasReadAccess = true
+    expect(screen.getByTestId("environment-switch")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-share_feedback")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-account")).toBeInTheDocument();
+    expect(screen.queryByTestId("tooltip-new_survey")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("plus-icon")).not.toBeInTheDocument();
+  });
+
+  test("shows New Survey button for Member with write access", () => {
+    renderComponent("member", null, false, false); // isMember = true, hasReadAccess = false
+    expect(screen.getByTestId("tooltip-new_survey")).toBeInTheDocument();
+    expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
+  });
+});

apps/web/app/(app)/environments/[environmentId]/components/TopControlButtons.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { EnvironmentSwitch } from "@/app/(app)/environments/[environmentId]/components/EnvironmentSwitch";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { TTeamPermission } from "@/modules/ee/teams/project-teams/types/team";
+import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
+import { Button } from "@/modules/ui/components/button";
+import { TooltipRenderer } from "@/modules/ui/components/tooltip";
+import { useTranslate } from "@tolgee/react";
+import { BugIcon, CircleUserIcon, PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+
+interface TopControlButtonsProps {
+  environment: TEnvironment;
+  environments: TEnvironment[];
+  membershipRole?: TOrganizationRole;
+  projectPermission: TTeamPermission | null;
+}
+
+export const TopControlButtons = ({
+  environment,
+  environments,
+  membershipRole,
+  projectPermission,
+}: TopControlButtonsProps) => {
+  const { t } = useTranslate();
+  const router = useRouter();
+
+  const { isMember, isBilling } = getAccessFlags(membershipRole);
+  const { hasReadAccess } = getTeamPermissionFlags(projectPermission);
+  const isReadOnly = isMember && hasReadAccess;
+
+  return (
+    <div className="z-50 flex items-center space-x-2">
+      {!isBilling && <EnvironmentSwitch environment={environment} environments={environments} />}
+
+      <TooltipRenderer tooltipContent={t("common.share_feedback")}>
+        <Button variant="ghost" size="icon" className="h-fit w-fit bg-slate-50 p-1" asChild>
+          <Link href="https://github.com/formbricks/formbricks/issues" target="_blank">
+            <BugIcon />
+          </Link>
+        </Button>
+      </TooltipRenderer>
+
+      <TooltipRenderer tooltipContent={t("common.account")}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-fit w-fit bg-slate-50 p-1"
+          onClick={() => {
+            router.push(`/environments/${environment.id}/settings/profile`);
+          }}>
+          <CircleUserIcon />
+        </Button>
+      </TooltipRenderer>
+      {isBilling || isReadOnly ? (
+        <></>
+      ) : (
+        <TooltipRenderer tooltipContent={t("common.new_survey")}>
+          <Button
+            variant="secondary"
+            size="icon"
+            className="h-fit w-fit p-1"
+            onClick={() => {
+              router.push(`/environments/${environment.id}/surveys/templates`);
+            }}>
+            <PlusIcon />
+          </Button>
+        </TooltipRenderer>
+      )}
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/components/environment-breadcrumb.test.tsx

@@ -1,329 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useRouter } from "next/navigation";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { TEnvironment } from "@formbricks/types/environment";
-import { EnvironmentBreadcrumb } from "./environment-breadcrumb";
-
-// Mock the dependencies
-vi.mock("next/navigation", () => ({
-  useRouter: vi.fn(),
-}));
-
-// Mock the UI components
-vi.mock("@/modules/ui/components/breadcrumb", () => ({
-  BreadcrumbItem: ({ children, isActive, isHighlighted, ...props }: any) => (
-    <li data-testid="breadcrumb-item" data-active={isActive} data-highlighted={isHighlighted} {...props}>
-      {children}
-    </li>
-  ),
-}));
-
-vi.mock("@/modules/ui/components/dropdown-menu", () => ({
-  DropdownMenu: ({ children, onOpenChange }: any) => (
-    <button
-      type="button"
-      data-testid="dropdown-menu"
-      onClick={() => onOpenChange?.(true)}
-      onKeyDown={(e: any) => e.key === "Enter" && onOpenChange?.(true)}>
-      {children}
-    </button>
-  ),
-  DropdownMenuContent: ({ children, ...props }: any) => (
-    <div data-testid="dropdown-content" {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuCheckboxItem: ({ children, onClick, checked, ...props }: any) => (
-    <div
-      data-testid="dropdown-checkbox-item"
-      data-checked={checked}
-      onClick={onClick}
-      onKeyDown={(e: any) => e.key === "Enter" && onClick?.()}
-      role="menuitemcheckbox"
-      aria-checked={checked}
-      tabIndex={0}
-      {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuTrigger: ({ children, ...props }: any) => (
-    <button data-testid="dropdown-trigger" {...props}>
-      {children}
-    </button>
-  ),
-  DropdownMenuGroup: ({ children }: any) => <div data-testid="dropdown-group">{children}</div>,
-}));
-
-vi.mock("@/modules/ui/components/tooltip", () => ({
-  TooltipProvider: ({ children }: any) => <div data-testid="tooltip-provider">{children}</div>,
-  Tooltip: ({ children }: any) => <div data-testid="tooltip">{children}</div>,
-  TooltipTrigger: ({ children, asChild }: any) => (
-    <div data-testid="tooltip-trigger" data-as-child={asChild}>
-      {children}
-    </div>
-  ),
-  TooltipContent: ({ children, className }: any) => (
-    <div data-testid="tooltip-content" className={className}>
-      {children}
-    </div>
-  ),
-}));
-
-// Mock Lucide React icons
-vi.mock("lucide-react", () => ({
-  Code2Icon: ({ className, strokeWidth }: any) => {
-    const isHeader = className?.includes("mr-2");
-    return (
-      <svg
-        data-testid={isHeader ? "code2-header-icon" : "code2-icon"}
-        className={className}
-        strokeWidth={strokeWidth}>
-        <title>Code2 Icon</title>
-      </svg>
-    );
-  },
-  ChevronDownIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-down-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronDown Icon</title>
-    </svg>
-  ),
-  CircleHelpIcon: ({ className }: any) => (
-    <svg data-testid="circle-help-icon" className={className}>
-      <title>CircleHelp Icon</title>
-    </svg>
-  ),
-  Loader2: ({ className }: any) => (
-    <svg data-testid="loader-2-icon" className={className}>
-      <title>Loader2 Icon</title>
-    </svg>
-  ),
-}));
-
-describe("EnvironmentBreadcrumb", () => {
-  const mockPush = vi.fn();
-  const mockRouter = {
-    push: mockPush,
-    replace: vi.fn(),
-    refresh: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    prefetch: vi.fn(),
-  };
-
-  const mockProductionEnvironment: TEnvironment = {
-    id: "env-prod-1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    type: "production",
-    projectId: "project-1",
-    appSetupCompleted: true,
-  };
-
-  const mockDevelopmentEnvironment: TEnvironment = {
-    id: "env-dev-1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    type: "development",
-    projectId: "project-1",
-    appSetupCompleted: true,
-  };
-
-  const mockEnvironments: TEnvironment[] = [mockProductionEnvironment, mockDevelopmentEnvironment];
-
-  beforeEach(() => {
-    vi.mocked(useRouter).mockReturnValue(mockRouter as any);
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  test("renders environment breadcrumb with production environment", () => {
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-    expect(screen.getByTestId("dropdown-trigger")).toBeInTheDocument();
-    expect(screen.getByTestId("code2-icon")).toBeInTheDocument();
-    expect(screen.getAllByText("production")).toHaveLength(2); // trigger + dropdown option
-  });
-
-  test("renders environment breadcrumb with development environment and shows tooltip", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironment={mockDevelopmentEnvironment}
-      />
-    );
-
-    expect(screen.getAllByText("development")).toHaveLength(2); // trigger + dropdown option
-    expect(screen.getByTestId("tooltip-provider")).toBeInTheDocument();
-    expect(screen.getByTestId("circle-help-icon")).toBeInTheDocument();
-  });
-
-  test("highlights breadcrumb item for development environment", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironment={mockDevelopmentEnvironment}
-      />
-    );
-
-    const breadcrumbItem = screen.getByTestId("breadcrumb-item");
-    expect(breadcrumbItem).toHaveAttribute("data-highlighted", "true");
-  });
-
-  test("does not highlight breadcrumb item for production environment", () => {
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    const breadcrumbItem = screen.getByTestId("breadcrumb-item");
-    expect(breadcrumbItem).toHaveAttribute("data-highlighted", "false");
-  });
-
-  test("shows chevron down icon when dropdown is open", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    await waitFor(() => {
-      expect(screen.getAllByTestId("chevron-down-icon")).toHaveLength(1);
-    });
-  });
-
-  test("renders dropdown content with environment options", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    expect(screen.getByTestId("dropdown-content")).toBeInTheDocument();
-    expect(screen.getByText("common.choose_environment")).toBeInTheDocument();
-    expect(screen.getByTestId("dropdown-group")).toBeInTheDocument();
-  });
-
-  test("renders all environment options in dropdown", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-    expect(checkboxItems).toHaveLength(2);
-
-    // Check production environment option
-    const productionOption = checkboxItems.find((item) => item.textContent?.includes("production"));
-    expect(productionOption).toBeInTheDocument();
-    expect(productionOption).toHaveAttribute("data-checked", "true");
-
-    // Check development environment option
-    const developmentOption = checkboxItems.find((item) => item.textContent?.includes("development"));
-    expect(developmentOption).toBeInTheDocument();
-    expect(developmentOption).toHaveAttribute("data-checked", "false");
-  });
-
-  test("handles environment change when clicking dropdown option", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-    const developmentOption = checkboxItems.find((item) => item.textContent?.includes("development"));
-
-    expect(developmentOption).toBeInTheDocument();
-    await user.click(developmentOption!);
-
-    expect(mockPush).toHaveBeenCalledWith("/environments/env-dev-1/");
-  });
-
-  test("capitalizes environment type in display", () => {
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    const environmentSpans = screen.getAllByText("production");
-    const triggerSpan = environmentSpans.find((span) => span.className.includes("capitalize"));
-    expect(triggerSpan).toHaveClass("capitalize");
-  });
-
-  test("tooltip shows correct content for development environment", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironment={mockDevelopmentEnvironment}
-      />
-    );
-
-    const tooltipContent = screen.getByTestId("tooltip-content");
-    expect(tooltipContent).toHaveClass("text-white bg-red-800 border-none mt-2");
-    expect(tooltipContent).toHaveTextContent("common.development_environment_banner");
-  });
-
-  test("renders without tooltip for production environment", () => {
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    expect(screen.queryByTestId("circle-help-icon")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("tooltip-provider")).not.toBeInTheDocument();
-  });
-
-  test("sets breadcrumb item as active when dropdown is open", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb environments={mockEnvironments} currentEnvironment={mockProductionEnvironment} />
-    );
-
-    // Initially not active
-    let breadcrumbItem = screen.getByTestId("breadcrumb-item");
-    expect(breadcrumbItem).toHaveAttribute("data-active", "false");
-
-    // Open dropdown
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    // Should be active when dropdown is open
-    breadcrumbItem = screen.getByTestId("breadcrumb-item");
-    expect(breadcrumbItem).toHaveAttribute("data-active", "true");
-  });
-
-  test("handles single environment scenario", () => {
-    const singleEnvironment = [mockProductionEnvironment];
-
-    render(
-      <EnvironmentBreadcrumb
-        environments={singleEnvironment}
-        currentEnvironment={mockProductionEnvironment}
-      />
-    );
-
-    expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-    expect(screen.getAllByText("production")).toHaveLength(2); // trigger + dropdown option
-  });
-
-  test("handles empty environments array gracefully", () => {
-    render(<EnvironmentBreadcrumb environments={[]} currentEnvironment={mockProductionEnvironment} />);
-
-    expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-    expect(screen.getByText("production")).toBeInTheDocument();
-  });
-});

apps/web/app/(app)/environments/[environmentId]/components/environment-breadcrumb.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
-import { useTranslate } from "@tolgee/react";
-import { ChevronDownIcon, CircleHelpIcon, Code2Icon, Loader2 } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-export const EnvironmentBreadcrumb = ({
-  environments,
-  currentEnvironment,
-}: {
-  environments: { id: string; type: string }[];
-  currentEnvironment: { id: string; type: string };
-}) => {
-  const { t } = useTranslate();
-  const [isEnvironmentDropdownOpen, setIsEnvironmentDropdownOpen] = useState(false);
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleEnvironmentChange = (environmentId: string) => {
-    if (environmentId === currentEnvironment.id) return;
-    setIsLoading(true);
-    router.push(`/environments/${environmentId}/`);
-  };
-
-  const developmentTooltip = () => {
-    return (
-      <TooltipProvider>
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger asChild>
-            <CircleHelpIcon className="h-3 w-3" />
-          </TooltipTrigger>
-          <TooltipContent className="mt-2 border-none bg-red-800 text-white">
-            {t("common.development_environment_banner")}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  };
-
-  return (
-    <BreadcrumbItem
-      isActive={isEnvironmentDropdownOpen}
-      isHighlighted={currentEnvironment.type === "development"}>
-      <DropdownMenu onOpenChange={setIsEnvironmentDropdownOpen}>
-        <DropdownMenuTrigger
-          className="flex cursor-pointer items-center gap-1 outline-none"
-          id="environmentDropdownTrigger"
-          asChild>
-          <div className="flex items-center gap-1">
-            <Code2Icon className="h-3 w-3" strokeWidth={1.5} />
-            <span className="capitalize">{currentEnvironment.type}</span>
-            {isLoading && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {currentEnvironment.type === "development" && developmentTooltip()}
-            {isEnvironmentDropdownOpen && <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />}
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="mt-2" align="start">
-          <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <Code2Icon className="mr-2 inline h-4 w-4" />
-            {t("common.choose_environment")}
-          </div>
-          <DropdownMenuGroup>
-            {environments.map((env) => (
-              <DropdownMenuCheckboxItem
-                key={env.id}
-                checked={env.type === currentEnvironment.type}
-                onClick={() => handleEnvironmentChange(env.id)}
-                className="cursor-pointer">
-                <div className="flex items-center gap-2 capitalize">
-                  <span>{env.type}</span>
-                </div>
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </BreadcrumbItem>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/components/organization-breadcrumb.test.tsx

@@ -1,560 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { usePathname, useRouter } from "next/navigation";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { TOrganization, TOrganizationBilling } from "@formbricks/types/organizations";
-import { OrganizationBreadcrumb } from "./organization-breadcrumb";
-
-// Mock the dependencies
-vi.mock("next/navigation", () => ({
-  useRouter: vi.fn(),
-  usePathname: vi.fn(),
-}));
-
-vi.mock("@tolgee/react", () => ({
-  useTranslate: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-vi.mock("@/modules/organization/components/CreateOrganizationModal", () => ({
-  CreateOrganizationModal: ({ open, setOpen }: any) =>
-    open ? (
-      <div data-testid="create-organization-modal">
-        <button type="button" onClick={() => setOpen(false)}>
-          Close Modal
-        </button>
-        Create Organization Modal
-      </div>
-    ) : null,
-}));
-
-// Mock the UI components
-vi.mock("@/modules/ui/components/breadcrumb", () => ({
-  BreadcrumbItem: ({ children, isActive, ...props }: any) => (
-    <li data-testid="breadcrumb-item" data-active={isActive} {...props}>
-      {children}
-    </li>
-  ),
-}));
-
-vi.mock("@/modules/ui/components/dropdown-menu", () => ({
-  DropdownMenu: ({ children, onOpenChange }: any) => (
-    <div
-      data-testid="dropdown-menu"
-      onClick={() => onOpenChange?.(true)}
-      onKeyDown={(e: any) => e.key === "Enter" && onOpenChange?.(true)}
-      role="button"
-      tabIndex={0}>
-      {children}
-    </div>
-  ),
-  DropdownMenuContent: ({ children, ...props }: any) => (
-    <div data-testid="dropdown-content" {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuCheckboxItem: ({ children, onClick, checked, ...props }: any) => (
-    <div
-      data-testid="dropdown-checkbox-item"
-      data-checked={checked}
-      onClick={onClick}
-      onKeyDown={(e: any) => e.key === "Enter" && onClick?.()}
-      role="menuitemcheckbox"
-      aria-checked={checked}
-      tabIndex={0}
-      {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuTrigger: ({ children, ...props }: any) => (
-    <button data-testid="dropdown-trigger" {...props}>
-      {children}
-    </button>
-  ),
-  DropdownMenuGroup: ({ children }: any) => <div data-testid="dropdown-group">{children}</div>,
-  DropdownMenuSeparator: () => <div data-testid="dropdown-separator" />,
-}));
-
-// Mock Lucide React icons
-vi.mock("lucide-react", () => ({
-  BuildingIcon: ({ className, strokeWidth }: any) => {
-    const isHeader = className?.includes("mr-2");
-    return (
-      <svg
-        data-testid={isHeader ? "building-header-icon" : "building-icon"}
-        className={className}
-        strokeWidth={strokeWidth}>
-        <title>Building Icon</title>
-      </svg>
-    );
-  },
-  ChevronDownIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-down-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronDown Icon</title>
-    </svg>
-  ),
-  ChevronRightIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-right-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronRight Icon</title>
-    </svg>
-  ),
-  PlusIcon: ({ className }: any) => (
-    <svg data-testid="plus-icon" className={className}>
-      <title>Plus Icon</title>
-    </svg>
-  ),
-  SettingsIcon: ({ className }: any) => (
-    <svg data-testid="settings-icon" className={className}>
-      <title>Settings Icon</title>
-    </svg>
-  ),
-  Loader2: ({ className }: any) => (
-    <svg data-testid="loader-2-icon" className={className}>
-      <title>Loader2 Icon</title>
-    </svg>
-  ),
-}));
-
-describe("OrganizationBreadcrumb", () => {
-  const mockPush = vi.fn();
-  const mockRouter = {
-    push: mockPush,
-    replace: vi.fn(),
-    refresh: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    prefetch: vi.fn(),
-  };
-
-  const mockOrganization1: TOrganization = {
-    id: "org-1",
-    name: "Test Organization 1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    billing: {
-      plan: "free",
-      stripeCustomerId: null,
-    } as unknown as TOrganizationBilling,
-    isAIEnabled: false,
-  };
-
-  const mockOrganization2: TOrganization = {
-    id: "org-2",
-    name: "Test Organization 2",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    billing: {
-      plan: "startup",
-      stripeCustomerId: null,
-    } as unknown as TOrganizationBilling,
-    isAIEnabled: true,
-  };
-
-  const mockOrganizations = [mockOrganization1, mockOrganization2];
-  const currentEnvironmentId = "env-123";
-
-  beforeEach(() => {
-    vi.mocked(useRouter).mockReturnValue(mockRouter as any);
-    vi.mocked(usePathname).mockReturnValue("/environments/env-123/");
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  describe("Single Organization Setup", () => {
-    test("renders organization breadcrumb without dropdown for single org", () => {
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={[mockOrganization1]}
-          isMultiOrgEnabled={false}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-      expect(screen.getByTestId("dropdown-trigger")).toBeInTheDocument();
-      expect(screen.getByTestId("building-icon")).toBeInTheDocument();
-      expect(screen.getByText("Test Organization 1")).toBeInTheDocument();
-    });
-
-    test("shows organization settings without organization switcher", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={[mockOrganization1]}
-          isMultiOrgEnabled={false}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByTestId("dropdown-content")).toBeInTheDocument();
-      expect(screen.getByText("common.organization_settings")).toBeInTheDocument();
-      expect(screen.queryByText("common.choose_organization")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Multi Organization Setup", () => {
-    test("renders organization breadcrumb with dropdown for multi org", () => {
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-      expect(screen.getByTestId("building-icon")).toBeInTheDocument();
-      expect(screen.getAllByText("Test Organization 1")).toHaveLength(2); // trigger + dropdown option
-    });
-
-    test("shows chevron icons correctly", () => {
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      // Should show chevron right when closed
-      expect(screen.getByTestId("chevron-right-icon")).toBeInTheDocument();
-      expect(screen.queryByTestId("chevron-down-icon")).not.toBeInTheDocument();
-    });
-
-    test("shows chevron down when dropdown is open", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("chevron-down-icon")).toBeInTheDocument();
-      });
-    });
-
-    test("renders organization selector in dropdown", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByText("common.choose_organization")).toBeInTheDocument();
-      expect(screen.getByTestId("dropdown-group")).toBeInTheDocument();
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-      expect(checkboxItems.length).toBeGreaterThanOrEqual(2); // Organizations + create new option + settings
-    });
-
-    test("handles organization change when clicking dropdown option", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-      const org2Option = checkboxItems.find((item) => item.textContent?.includes("Test Organization 2"));
-
-      expect(org2Option).toBeInTheDocument();
-      await user.click(org2Option!);
-
-      expect(mockPush).toHaveBeenCalledWith("/organizations/org-2/");
-    });
-
-    test("shows create new organization option when multi org is enabled", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const createOrgOption = screen.getByText("common.create_new_organization");
-      expect(createOrgOption).toBeInTheDocument();
-      expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
-    });
-
-    test("opens create organization modal when clicking create new option", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const createOrgOption = screen.getByText("common.create_new_organization");
-      await user.click(createOrgOption);
-
-      expect(screen.getByTestId("create-organization-modal")).toBeInTheDocument();
-    });
-
-    test("hides create new organization option when multi org is disabled", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={false}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.queryByText("common.create_new_organization")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Organization Settings", () => {
-    test("renders all organization settings options", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          isFormbricksCloud={true}
-          isMember={false}
-          currentEnvironmentId={currentEnvironmentId}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByText("common.organization_settings")).toBeInTheDocument();
-      expect(screen.getByTestId("settings-icon")).toBeInTheDocument();
-      expect(screen.getByText("common.general")).toBeInTheDocument();
-      expect(screen.getByText("common.teams")).toBeInTheDocument();
-      expect(screen.getByText("common.api_keys")).toBeInTheDocument();
-      expect(screen.getByText("common.billing")).toBeInTheDocument();
-    });
-
-    test("handles navigation to organization settings", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const generalOption = screen.getByText("common.general");
-      await user.click(generalOption);
-
-      expect(mockPush).toHaveBeenCalledWith(`/environments/${currentEnvironmentId}/settings/general`);
-    });
-
-    test("marks current settings page as checked", async () => {
-      vi.mocked(usePathname).mockReturnValue("/environments/env-123/settings/teams");
-
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-      const teamsOption = checkboxItems.find((item) => item.textContent?.includes("common.teams"));
-
-      expect(teamsOption).toBeInTheDocument();
-      expect(teamsOption).toHaveAttribute("data-checked", "true");
-    });
-  });
-
-  describe("Edge Cases", () => {
-    test("handles single organization with multi org enabled", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={[mockOrganization1]}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      // Should still show organization selector since multi org is enabled
-      expect(screen.getByText("common.choose_organization")).toBeInTheDocument();
-      expect(screen.getByText("common.create_new_organization")).toBeInTheDocument();
-    });
-
-    test("shows separator between organization switcher and settings", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByTestId("dropdown-separator")).toBeInTheDocument();
-    });
-
-    test("sets breadcrumb item as active when dropdown is open", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      // Initially not active
-      let breadcrumbItem = screen.getByTestId("breadcrumb-item");
-      expect(breadcrumbItem).toHaveAttribute("data-active", "false");
-
-      // Open dropdown
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      // Should be active when dropdown is open
-      breadcrumbItem = screen.getByTestId("breadcrumb-item");
-      expect(breadcrumbItem).toHaveAttribute("data-active", "true");
-    });
-
-    test("closes create organization modal correctly", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const createOrgOption = screen.getByText("common.create_new_organization");
-      await user.click(createOrgOption);
-
-      expect(screen.getByTestId("create-organization-modal")).toBeInTheDocument();
-
-      const closeButton = screen.getByText("Close Modal");
-      await user.click(closeButton);
-
-      expect(screen.queryByTestId("create-organization-modal")).not.toBeInTheDocument();
-    });
-  });
-});

apps/web/app/(app)/environments/[environmentId]/components/organization-breadcrumb.tsx

@@ -1,179 +0,0 @@
-"use client";
-
-import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
-import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
-import * as Sentry from "@sentry/nextjs";
-import { useTranslate } from "@tolgee/react";
-import {
-  BuildingIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  Loader2,
-  PlusIcon,
-  SettingsIcon,
-} from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
-import { logger } from "@formbricks/logger";
-
-interface OrganizationBreadcrumbProps {
-  currentOrganizationId: string;
-  organizations: { id: string; name: string }[];
-  isMultiOrgEnabled: boolean;
-  currentEnvironmentId?: string;
-  isFormbricksCloud: boolean;
-  isMember: boolean;
-  isOwnerOrManager: boolean;
-}
-
-export const OrganizationBreadcrumb = ({
-  currentOrganizationId,
-  organizations,
-  isMultiOrgEnabled,
-  currentEnvironmentId,
-  isFormbricksCloud,
-  isMember,
-  isOwnerOrManager,
-}: OrganizationBreadcrumbProps) => {
-  const { t } = useTranslate();
-  const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
-  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
-  const pathname = usePathname();
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  const currentOrganization = organizations.find((org) => org.id === currentOrganizationId);
-
-  if (!currentOrganization) {
-    const errorMessage = `Organization not found for organization id: ${currentOrganizationId}`;
-    logger.error(errorMessage);
-    Sentry.captureException(new Error(errorMessage));
-    return;
-  }
-
-  const handleOrganizationChange = (organizationId: string) => {
-    if (organizationId === currentOrganizationId) return;
-    setIsLoading(true);
-    router.push(`/organizations/${organizationId}/`);
-  };
-
-  // Hide organization dropdown for single org setups (on-premise)
-  const showOrganizationDropdown = isMultiOrgEnabled || organizations.length > 1;
-
-  const organizationSettings = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `/environments/${currentEnvironmentId}/settings/general`,
-    },
-    {
-      id: "teams",
-      label: t("common.teams"),
-      href: `/environments/${currentEnvironmentId}/settings/teams`,
-    },
-    {
-      id: "api-keys",
-      label: t("common.api_keys"),
-      href: `/environments/${currentEnvironmentId}/settings/api-keys`,
-      hidden: !isOwnerOrManager,
-    },
-    {
-      id: "billing",
-      label: t("common.billing"),
-      href: `/environments/${currentEnvironmentId}/settings/billing`,
-      hidden: !isFormbricksCloud,
-    },
-    {
-      id: "enterprise",
-      label: t("common.enterprise_license"),
-      href: `/environments/${currentEnvironmentId}/settings/enterprise`,
-      hidden: isFormbricksCloud || isMember,
-    },
-  ];
-
-  return (
-    <BreadcrumbItem isActive={isOrganizationDropdownOpen}>
-      <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
-        <DropdownMenuTrigger
-          className="flex cursor-pointer items-center gap-1 outline-none"
-          id="organizationDropdownTrigger"
-          asChild>
-          <div className="flex items-center gap-1">
-            <BuildingIcon className="h-3 w-3" strokeWidth={1.5} />
-            <span>{currentOrganization.name}</span>
-            {isLoading && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {isOrganizationDropdownOpen ? (
-              <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />
-            ) : (
-              <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
-            )}
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="mt-2">
-          {showOrganizationDropdown && (
-            <>
-              <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-                <BuildingIcon className="mr-2 inline h-4 w-4" />
-                {t("common.choose_organization")}
-              </div>
-              <DropdownMenuGroup>
-                {organizations.map((org) => (
-                  <DropdownMenuCheckboxItem
-                    key={org.id}
-                    checked={org.id === currentOrganization.id}
-                    onClick={() => handleOrganizationChange(org.id)}
-                    className="cursor-pointer">
-                    {org.name}
-                  </DropdownMenuCheckboxItem>
-                ))}
-              </DropdownMenuGroup>
-              {isMultiOrgEnabled && (
-                <DropdownMenuCheckboxItem
-                  onClick={() => setOpenCreateOrganizationModal(true)}
-                  className="cursor-pointer">
-                  <span>{t("common.create_new_organization")}</span>
-                  <PlusIcon className="ml-2 h-4 w-4" />
-                </DropdownMenuCheckboxItem>
-              )}
-            </>
-          )}
-          {currentEnvironmentId && (
-            <div>
-              <DropdownMenuSeparator />
-              <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-                <SettingsIcon className="mr-2 inline h-4 w-4" />
-                {t("common.organization_settings")}
-              </div>
-
-              {organizationSettings.map((setting) => {
-                return setting.hidden ? null : (
-                  <DropdownMenuCheckboxItem
-                    key={setting.id}
-                    checked={pathname.includes(setting.id)}
-                    hidden={setting.hidden}
-                    onClick={() => router.push(setting.href)}
-                    className="cursor-pointer">
-                    {setting.label}
-                  </DropdownMenuCheckboxItem>
-                );
-              })}
-            </div>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      {openCreateOrganizationModal && (
-        <CreateOrganizationModal
-          open={openCreateOrganizationModal}
-          setOpen={setOpenCreateOrganizationModal}
-        />
-      )}
-    </BreadcrumbItem>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/components/project-and-org-switch.test.tsx

@@ -1,340 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { TEnvironment } from "@formbricks/types/environment";
-import { ProjectAndOrgSwitch } from "./project-and-org-switch";
-
-// Mock the individual breadcrumb components
-vi.mock("@/app/(app)/environments/[environmentId]/components/organization-breadcrumb", () => ({
-  OrganizationBreadcrumb: ({
-    currentOrganizationId,
-    organizations,
-    isMultiOrgEnabled,
-    currentEnvironmentId,
-  }: any) => {
-    const currentOrganization = organizations.find((org: any) => org.id === currentOrganizationId);
-    return (
-      <div data-testid="organization-breadcrumb">
-        <div>Organization: {currentOrganization?.name}</div>
-        <div>Organizations Count: {organizations.length}</div>
-        <div>Multi Org: {isMultiOrgEnabled ? "Enabled" : "Disabled"}</div>
-        <div>Environment ID: {currentEnvironmentId}</div>
-      </div>
-    );
-  },
-}));
-
-vi.mock("@/app/(app)/environments/[environmentId]/components/project-breadcrumb", () => ({
-  ProjectBreadcrumb: ({
-    currentProjectId,
-    projects,
-    isOwnerOrManager,
-    organizationProjectsLimit,
-    isFormbricksCloud,
-    isLicenseActive,
-    currentOrganizationId,
-    currentEnvironmentId,
-    isAccessControlAllowed,
-  }: any) => {
-    const currentProject = projects.find((project: any) => project.id === currentProjectId);
-    return (
-      <div data-testid="project-breadcrumb">
-        <div>Project: {currentProject?.name}</div>
-        <div>Projects Count: {projects.length}</div>
-        <div>Owner/Manager: {isOwnerOrManager ? "Yes" : "No"}</div>
-        <div>Project Limit: {organizationProjectsLimit}</div>
-        <div>Formbricks Cloud: {isFormbricksCloud ? "Yes" : "No"}</div>
-        <div>License Active: {isLicenseActive ? "Yes" : "No"}</div>
-        <div>Organization ID: {currentOrganizationId}</div>
-        <div>Environment ID: {currentEnvironmentId}</div>
-        <div>Access Control: {isAccessControlAllowed ? "Allowed" : "Not Allowed"}</div>
-      </div>
-    );
-  },
-}));
-
-vi.mock("@/app/(app)/environments/[environmentId]/components/environment-breadcrumb", () => ({
-  EnvironmentBreadcrumb: ({ environments, currentEnvironmentId }: any) => {
-    const currentEnvironment = environments.find((env: any) => env.id === currentEnvironmentId);
-    return (
-      <div data-testid="environment-breadcrumb">
-        <div>Environment: {currentEnvironment?.type}</div>
-        <div>Environments Count: {environments.length}</div>
-        <div>Environment ID: {currentEnvironment?.id}</div>
-      </div>
-    );
-  },
-}));
-
-// Mock the UI components
-vi.mock("@/modules/ui/components/breadcrumb", () => ({
-  Breadcrumb: ({ children }: any) => (
-    <nav data-testid="breadcrumb" aria-label="breadcrumb">
-      {children}
-    </nav>
-  ),
-  BreadcrumbList: ({ children, className }: any) => (
-    <ol data-testid="breadcrumb-list" className={className}>
-      {children}
-    </ol>
-  ),
-}));
-
-describe("ProjectAndOrgSwitch", () => {
-  const mockOrganization1 = {
-    id: "org-1",
-    name: "Test Organization 1",
-  };
-
-  const mockOrganization2 = {
-    id: "org-2",
-    name: "Test Organization 2",
-  };
-
-  const mockProject1 = {
-    id: "proj-1",
-    name: "Test Project 1",
-  };
-
-  const mockProject2 = {
-    id: "proj-2",
-    name: "Test Project 2",
-  };
-
-  const mockEnvironment1: TEnvironment = {
-    id: "env-1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    type: "development",
-    projectId: "proj-1",
-    appSetupCompleted: true,
-  };
-
-  const mockEnvironment2: TEnvironment = {
-    id: "env-2",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    type: "development",
-    projectId: "proj-1",
-    appSetupCompleted: true,
-  };
-
-  const defaultProps = {
-    currentOrganizationId: "org-1",
-    organizations: [mockOrganization1, mockOrganization2],
-    currentProjectId: "proj-1",
-    projects: [mockProject1, mockProject2],
-    currentEnvironmentId: "env-1",
-    environments: [mockEnvironment1, mockEnvironment2],
-    isMultiOrgEnabled: true,
-    organizationProjectsLimit: 5,
-    isFormbricksCloud: true,
-    isLicenseActive: false,
-    isOwnerOrManager: true,
-    isAccessControlAllowed: true,
-    isMember: true,
-  };
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe("Basic Rendering", () => {
-    test("renders main breadcrumb structure", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      expect(screen.getByTestId("breadcrumb")).toBeInTheDocument();
-      expect(screen.getByTestId("breadcrumb-list")).toBeInTheDocument();
-      expect(screen.getByTestId("breadcrumb")).toHaveAttribute("aria-label", "breadcrumb");
-    });
-
-    test("applies correct CSS classes to breadcrumb list", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const breadcrumbList = screen.getByTestId("breadcrumb-list");
-      expect(breadcrumbList).toHaveClass("gap-0");
-    });
-
-    test("renders all three breadcrumb components", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      expect(screen.getByTestId("organization-breadcrumb")).toBeInTheDocument();
-      expect(screen.getByTestId("project-breadcrumb")).toBeInTheDocument();
-    });
-  });
-
-  describe("Organization Breadcrumb Integration", () => {
-    test("passes correct props to organization breadcrumb", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const orgBreadcrumb = screen.getByTestId("organization-breadcrumb");
-      expect(orgBreadcrumb).toHaveTextContent("Organization: Test Organization 1");
-      expect(orgBreadcrumb).toHaveTextContent("Organizations Count: 2");
-      expect(orgBreadcrumb).toHaveTextContent("Multi Org: Enabled");
-      expect(orgBreadcrumb).toHaveTextContent("Environment ID: env-1");
-    });
-
-    test("handles single organization setup", () => {
-      render(
-        <ProjectAndOrgSwitch
-          {...defaultProps}
-          organizations={[mockOrganization1]}
-          isMultiOrgEnabled={false}
-        />
-      );
-
-      const orgBreadcrumb = screen.getByTestId("organization-breadcrumb");
-      expect(orgBreadcrumb).toHaveTextContent("Organizations Count: 1");
-      expect(orgBreadcrumb).toHaveTextContent("Multi Org: Disabled");
-    });
-  });
-
-  describe("Project Breadcrumb Integration", () => {
-    test("passes correct props to project breadcrumb", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Project: Test Project 1");
-      expect(projectBreadcrumb).toHaveTextContent("Projects Count: 2");
-      expect(projectBreadcrumb).toHaveTextContent("Owner/Manager: Yes");
-      expect(projectBreadcrumb).toHaveTextContent("Project Limit: 5");
-      expect(projectBreadcrumb).toHaveTextContent("Formbricks Cloud: Yes");
-      expect(projectBreadcrumb).toHaveTextContent("License Active: No");
-      expect(projectBreadcrumb).toHaveTextContent("Organization ID: org-1");
-      expect(projectBreadcrumb).toHaveTextContent("Environment ID: env-1");
-      expect(projectBreadcrumb).toHaveTextContent("Access Control: Allowed");
-    });
-
-    test("handles non-owner/manager user", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} isOwnerOrManager={false} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Owner/Manager: No");
-    });
-
-    test("handles self-hosted setup", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} isFormbricksCloud={false} isLicenseActive={true} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Formbricks Cloud: No");
-      expect(projectBreadcrumb).toHaveTextContent("License Active: Yes");
-    });
-
-    test("handles access control restrictions", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} isAccessControlAllowed={false} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Access Control: Not Allowed");
-    });
-  });
-
-  describe("Environment Breadcrumb Integration", () => {
-    test("passes correct props to environment breadcrumb", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const envBreadcrumb = screen.getByTestId("environment-breadcrumb");
-      expect(envBreadcrumb).toHaveTextContent("Environments Count: 2");
-    });
-
-    test("handles single environment", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} environments={[mockEnvironment1]} />);
-
-      const envBreadcrumb = screen.getByTestId("environment-breadcrumb");
-      expect(envBreadcrumb).toHaveTextContent("Environments Count: 1");
-    });
-  });
-
-  describe("Props Propagation", () => {
-    test("correctly propagates organization limits", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} organizationProjectsLimit={10} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Project Limit: 10");
-    });
-
-    test("correctly propagates current organization to project breadcrumb", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} currentOrganizationId="org-2" />);
-
-      const orgBreadcrumb = screen.getByTestId("organization-breadcrumb");
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-
-      expect(orgBreadcrumb).toHaveTextContent("Organization: Test Organization 2");
-      expect(projectBreadcrumb).toHaveTextContent("Organization ID: org-2");
-    });
-  });
-
-  describe("Edge Cases", () => {
-    test("handles zero project limit", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} organizationProjectsLimit={0} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Project Limit: 0");
-    });
-
-    test("handles all boolean props as false", () => {
-      render(
-        <ProjectAndOrgSwitch
-          {...defaultProps}
-          isMultiOrgEnabled={false}
-          isFormbricksCloud={false}
-          isLicenseActive={false}
-          isOwnerOrManager={false}
-          isAccessControlAllowed={false}
-        />
-      );
-
-      const orgBreadcrumb = screen.getByTestId("organization-breadcrumb");
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-
-      expect(orgBreadcrumb).toHaveTextContent("Multi Org: Disabled");
-      expect(projectBreadcrumb).toHaveTextContent("Owner/Manager: No");
-      expect(projectBreadcrumb).toHaveTextContent("Formbricks Cloud: No");
-      expect(projectBreadcrumb).toHaveTextContent("License Active: No");
-      expect(projectBreadcrumb).toHaveTextContent("Access Control: Not Allowed");
-    });
-
-    test("maintains component order in DOM", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const breadcrumbList = screen.getByTestId("breadcrumb-list");
-      const children = Array.from(breadcrumbList.children);
-
-      expect(children[0]).toHaveAttribute("data-testid", "organization-breadcrumb");
-      expect(children[1]).toHaveAttribute("data-testid", "project-breadcrumb");
-      expect(children[2]).toHaveAttribute("data-testid", "environment-breadcrumb");
-    });
-  });
-
-  describe("TypeScript Props Interface", () => {
-    test("accepts all required props without error", () => {
-      // This test ensures the component accepts the full interface
-      expect(() => {
-        render(<ProjectAndOrgSwitch {...defaultProps} />);
-      }).not.toThrow();
-    });
-
-    test("works with minimal valid props", () => {
-      const minimalProps = {
-        currentOrganizationId: "org-1",
-        organizations: [mockOrganization1],
-        currentProjectId: "proj-1",
-        projects: [mockProject1],
-        currentEnvironmentId: "env-1",
-        environments: [mockEnvironment1],
-        isMultiOrgEnabled: false,
-        organizationProjectsLimit: 1,
-        isFormbricksCloud: false,
-        isLicenseActive: false,
-        isOwnerOrManager: false,
-        isAccessControlAllowed: false,
-        isMember: true,
-      };
-
-      expect(() => {
-        render(<ProjectAndOrgSwitch {...minimalProps} />);
-      }).not.toThrow();
-
-      expect(screen.getByTestId("breadcrumb")).toBeInTheDocument();
-    });
-  });
-});

apps/web/app/(app)/environments/[environmentId]/components/project-and-org-switch.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import { EnvironmentBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/environment-breadcrumb";
-import { OrganizationBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/organization-breadcrumb";
-import { ProjectBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/project-breadcrumb";
-import { Breadcrumb, BreadcrumbList } from "@/modules/ui/components/breadcrumb";
-import { useMemo } from "react";
-
-interface ProjectAndOrgSwitchProps {
-  currentOrganizationId: string;
-  organizations: { id: string; name: string }[];
-  currentProjectId?: string;
-  projects: { id: string; name: string }[];
-  currentEnvironmentId?: string;
-  environments: { id: string; type: string }[];
-  isMultiOrgEnabled: boolean;
-  organizationProjectsLimit: number;
-  isFormbricksCloud: boolean;
-  isLicenseActive: boolean;
-  isOwnerOrManager: boolean;
-  isAccessControlAllowed: boolean;
-  isMember: boolean;
-}
-
-export const ProjectAndOrgSwitch = ({
-  currentOrganizationId,
-  organizations,
-  currentProjectId,
-  projects,
-  currentEnvironmentId,
-  environments,
-  isMultiOrgEnabled,
-  organizationProjectsLimit,
-  isFormbricksCloud,
-  isLicenseActive,
-  isOwnerOrManager,
-  isAccessControlAllowed,
-  isMember,
-}: ProjectAndOrgSwitchProps) => {
-  const sortedProjects = useMemo(() => projects.toSorted((a, b) => a.name.localeCompare(b.name)), [projects]);
-  const sortedOrganizations = useMemo(
-    () => organizations.toSorted((a, b) => a.name.localeCompare(b.name)),
-    [organizations]
-  );
-  const currentEnvironment = environments.find((env) => env.id === currentEnvironmentId);
-  const showEnvironmentBreadcrumb = currentEnvironment?.type === "development";
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbList className="gap-0">
-        <OrganizationBreadcrumb
-          currentOrganizationId={currentOrganizationId}
-          organizations={sortedOrganizations}
-          isMultiOrgEnabled={isMultiOrgEnabled}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={isFormbricksCloud}
-          isMember={isMember}
-          isOwnerOrManager={isOwnerOrManager}
-        />
-        {currentProjectId && currentEnvironmentId && (
-          <ProjectBreadcrumb
-            currentProjectId={currentProjectId}
-            currentOrganizationId={currentOrganizationId}
-            currentEnvironmentId={currentEnvironmentId}
-            projects={sortedProjects}
-            isOwnerOrManager={isOwnerOrManager}
-            organizationProjectsLimit={organizationProjectsLimit}
-            isFormbricksCloud={isFormbricksCloud}
-            isLicenseActive={isLicenseActive}
-            isAccessControlAllowed={isAccessControlAllowed}
-            isEnvironmentBreadcrumbVisible={showEnvironmentBreadcrumb}
-          />
-        )}
-        {showEnvironmentBreadcrumb && (
-          <EnvironmentBreadcrumb environments={environments} currentEnvironment={currentEnvironment} />
-        )}
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/components/project-breadcrumb.test.tsx

@@ -1,512 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useRouter } from "next/navigation";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { TOrganization, TOrganizationBilling } from "@formbricks/types/organizations";
-import { TProject } from "@formbricks/types/project";
-import { ProjectBreadcrumb } from "./project-breadcrumb";
-
-// Mock the dependencies
-vi.mock("next/navigation", () => ({
-  useRouter: vi.fn(),
-  usePathname: vi.fn(() => "/environments/env-123/project/general"),
-}));
-
-vi.mock("@tolgee/react", () => ({
-  useTranslate: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-vi.mock("@/modules/projects/components/project-limit-modal", () => ({
-  ProjectLimitModal: ({ open, setOpen, buttons, projectLimit }: any) =>
-    open ? (
-      <div data-testid="project-limit-modal">
-        <div>Project Limit: {projectLimit}</div>
-        <button onClick={() => setOpen(false)}>Close Limit Modal</button>
-        {buttons.map((button: any) => (
-          <button key={button.text} type="button" onClick={() => button.href && window.open(button.href)}>
-            {button.text}
-          </button>
-        ))}
-      </div>
-    ) : null,
-}));
-
-vi.mock("@/modules/projects/components/create-project-modal", () => ({
-  CreateProjectModal: ({ open, setOpen, organizationId, isAccessControlAllowed }: any) =>
-    open ? (
-      <div data-testid="create-project-modal">
-        <div>Organization: {organizationId}</div>
-        <div>Access Control: {isAccessControlAllowed ? "Allowed" : "Not Allowed"}</div>
-        <button onClick={() => setOpen(false)}>Close Create Modal</button>
-      </div>
-    ) : null,
-}));
-
-// Mock the UI components
-vi.mock("@/modules/ui/components/breadcrumb", () => ({
-  BreadcrumbItem: ({ children, isActive, ...props }: any) => (
-    <li data-testid="breadcrumb-item" data-active={isActive} {...props}>
-      {children}
-    </li>
-  ),
-}));
-
-vi.mock("@/modules/ui/components/dropdown-menu", () => ({
-  DropdownMenu: ({ children, onOpenChange }: any) => (
-    <button
-      type="button"
-      data-testid="dropdown-menu"
-      onClick={() => onOpenChange?.(true)}
-      onKeyDown={(e: any) => e.key === "Enter" && onOpenChange?.(true)}>
-      {children}
-    </button>
-  ),
-  DropdownMenuContent: ({ children, ...props }: any) => (
-    <div data-testid="dropdown-content" {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuCheckboxItem: ({ children, onClick, checked, ...props }: any) => (
-    <div
-      data-testid="dropdown-checkbox-item"
-      data-checked={checked}
-      onClick={onClick}
-      onKeyDown={(e: any) => e.key === "Enter" && onClick?.()}
-      role="menuitemcheckbox"
-      aria-checked={checked}
-      tabIndex={0}
-      {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuTrigger: ({ children, ...props }: any) => (
-    <button data-testid="dropdown-trigger" {...props}>
-      {children}
-    </button>
-  ),
-  DropdownMenuGroup: ({ children }: any) => <div data-testid="dropdown-group">{children}</div>,
-  DropdownMenuSeparator: () => <div data-testid="dropdown-separator" />,
-}));
-
-// Mock Lucide React icons
-vi.mock("lucide-react", () => ({
-  FolderOpenIcon: ({ className, strokeWidth }: any) => {
-    const isHeader = className?.includes("mr-2");
-    return (
-      <svg
-        data-testid={isHeader ? "folder-open-header-icon" : "folder-open-icon"}
-        className={className}
-        strokeWidth={strokeWidth}>
-        <title>FolderOpen Icon</title>
-      </svg>
-    );
-  },
-  ChevronDownIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-down-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronDown Icon</title>
-    </svg>
-  ),
-  ChevronRightIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-right-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronRight Icon</title>
-    </svg>
-  ),
-  PlusIcon: ({ className }: any) => (
-    <svg data-testid="plus-icon" className={className}>
-      <title>Plus Icon</title>
-    </svg>
-  ),
-  Loader2: ({ className }: any) => (
-    <svg data-testid="loader-2-icon" className={className}>
-      <title>Loader2 Icon</title>
-    </svg>
-  ),
-  CogIcon: ({ className }: any) => (
-    <svg data-testid="cog-icon" className={className}>
-      <title>Cog Icon</title>
-    </svg>
-  ),
-  SettingsIcon: ({ className }: any) => (
-    <svg data-testid="settings-icon" className={className}>
-      <title>Settings Icon</title>
-    </svg>
-  ),
-}));
-
-describe("ProjectBreadcrumb", () => {
-  const mockPush = vi.fn();
-  const mockRouter = {
-    push: mockPush,
-    replace: vi.fn(),
-    refresh: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    prefetch: vi.fn(),
-  };
-
-  const mockProject1 = {
-    id: "proj-1",
-    name: "Test Project 1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    organizationId: "org-1",
-    languages: [],
-  } as unknown as TProject;
-
-  const mockProject2 = {
-    id: "proj-2",
-    name: "Test Project 2",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    organizationId: "org-1",
-    languages: [],
-  } as unknown as TProject;
-
-  const mockProjects = [mockProject1, mockProject2];
-
-  const mockOrganization: TOrganization = {
-    id: "org-1",
-    name: "Test Organization",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    billing: {
-      plan: "free",
-      stripeCustomerId: null,
-    } as unknown as TOrganizationBilling,
-    isAIEnabled: false,
-  };
-
-  const defaultProps = {
-    currentProjectId: "proj-1",
-    currentOrganizationId: "org-1",
-    projects: mockProjects,
-    isOwnerOrManager: true,
-    organizationProjectsLimit: 3,
-    isFormbricksCloud: true,
-    isLicenseActive: false,
-    currentEnvironmentId: "env-123",
-    isAccessControlAllowed: true,
-    isEnvironmentBreadcrumbVisible: true,
-  };
-
-  beforeEach(() => {
-    vi.mocked(useRouter).mockReturnValue(mockRouter as any);
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  describe("Basic Rendering", () => {
-    test("renders project breadcrumb correctly", () => {
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-      expect(screen.getByTestId("dropdown-trigger")).toBeInTheDocument();
-      expect(screen.getByTestId("folder-open-icon")).toBeInTheDocument();
-      expect(screen.getAllByText("Test Project 1")).toHaveLength(2); // trigger + dropdown option
-    });
-
-    test("shows chevron icons correctly", () => {
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      // Should show chevron right when closed
-      expect(screen.getByTestId("chevron-right-icon")).toBeInTheDocument();
-      expect(screen.queryByTestId("chevron-down-icon")).not.toBeInTheDocument();
-    });
-
-    test("shows chevron down when dropdown is open", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("chevron-down-icon")).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe("Project Selection", () => {
-    test("renders dropdown content with project options", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByTestId("dropdown-content")).toBeInTheDocument();
-      expect(screen.getByText("common.choose_project")).toBeInTheDocument();
-      expect(screen.getAllByTestId("dropdown-group")).toHaveLength(2); // Projects group and settings group
-    });
-
-    test("renders all project options in dropdown", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-
-      // Find project options (excluding the add new project option)
-      const projectOptions = checkboxItems.filter((item) => item.textContent?.includes("Test Project"));
-      expect(projectOptions).toHaveLength(2);
-
-      // Check current project is marked as selected
-      const currentProjectOption = checkboxItems.find((item) => item.textContent?.includes("Test Project 1"));
-      expect(currentProjectOption).toHaveAttribute("data-checked", "true");
-
-      // Check other project is not selected
-      const otherProjectOption = checkboxItems.find((item) => item.textContent?.includes("Test Project 2"));
-      expect(otherProjectOption).toHaveAttribute("data-checked", "false");
-    });
-
-    test("handles project change when clicking dropdown option", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-      const project2Option = checkboxItems.find((item) => item.textContent?.includes("Test Project 2"));
-
-      expect(project2Option).toBeInTheDocument();
-      await user.click(project2Option!);
-
-      expect(mockPush).toHaveBeenCalledWith("/projects/proj-2/");
-    });
-  });
-
-  describe("Add New Project", () => {
-    test("shows add new project option when user is owner or manager", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByText("common.add_new_project")).toBeInTheDocument();
-      expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
-    });
-
-    test("hides add new project option when user is not owner or manager", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} isOwnerOrManager={false} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.queryByText("common.add_new_project")).not.toBeInTheDocument();
-    });
-
-    test("opens create project modal when within project limit", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByTestId("create-project-modal")).toBeInTheDocument();
-      expect(screen.getByText("Organization: org-1")).toBeInTheDocument();
-      expect(screen.getByText("Access Control: Allowed")).toBeInTheDocument();
-    });
-
-    test("opens limit modal when exceeding project limit", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByTestId("project-limit-modal")).toBeInTheDocument();
-      expect(screen.getByText("Project Limit: 3")).toBeInTheDocument();
-    });
-  });
-
-  describe("Project Limit Modal", () => {
-    test("shows correct buttons for Formbricks Cloud with non-enterprise plan", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-        isFormbricksCloud: true,
-        isEnvironmentBreadcrumbVisible: true,
-        currentOrganization: {
-          ...mockOrganization,
-          billing: { ...mockOrganization.billing, plan: "startup" } as unknown as TOrganizationBilling,
-        },
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByText("environments.settings.billing.upgrade")).toBeInTheDocument();
-      expect(screen.getByText("common.cancel")).toBeInTheDocument();
-    });
-
-    test("shows correct buttons for self-hosted with active license", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-        isFormbricksCloud: false,
-        isLicenseActive: true,
-        isEnvironmentBreadcrumbVisible: true,
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByText("environments.settings.billing.upgrade")).toBeInTheDocument();
-      expect(screen.getByText("common.cancel")).toBeInTheDocument();
-    });
-
-    test("closes limit modal correctly", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByTestId("project-limit-modal")).toBeInTheDocument();
-
-      const closeButton = screen.getByText("Close Limit Modal");
-      await user.click(closeButton);
-
-      expect(screen.queryByTestId("project-limit-modal")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Create Project Modal", () => {
-    test("closes create project modal correctly", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByTestId("create-project-modal")).toBeInTheDocument();
-
-      const closeButton = screen.getByText("Close Create Modal");
-      await user.click(closeButton);
-
-      expect(screen.queryByTestId("create-project-modal")).not.toBeInTheDocument();
-    });
-
-    test("passes correct props to create project modal", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} isAccessControlAllowed={false} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByText("Access Control: Not Allowed")).toBeInTheDocument();
-    });
-  });
-
-  describe("Edge Cases", () => {
-    test("handles single project scenario", () => {
-      render(<ProjectBreadcrumb {...defaultProps} projects={[mockProject1]} />);
-
-      expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-      expect(screen.getAllByText("Test Project 1")).toHaveLength(2); // trigger + dropdown option
-    });
-
-    test("sets breadcrumb item as active when dropdown is open", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      // Initially not active
-      let breadcrumbItem = screen.getByTestId("breadcrumb-item");
-      expect(breadcrumbItem).toHaveAttribute("data-active", "false");
-
-      // Open dropdown
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      // Should be active when dropdown is open
-      breadcrumbItem = screen.getByTestId("breadcrumb-item");
-      expect(breadcrumbItem).toHaveAttribute("data-active", "true");
-    });
-
-    test("handles project limit of zero", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} organizationProjectsLimit={0} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      // Should show limit modal even with 0 projects when limit is 0
-      expect(screen.getByTestId("project-limit-modal")).toBeInTheDocument();
-      expect(screen.getByText("Project Limit: 0")).toBeInTheDocument();
-    });
-
-    test("handles enterprise plan on Formbricks Cloud", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-        currentOrganization: {
-          ...mockOrganization,
-          billing: { ...mockOrganization.billing, plan: "enterprise" } as unknown as TOrganizationBilling,
-        },
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      // Should show self-hosted style buttons for enterprise plan
-      expect(screen.getByTestId("project-limit-modal")).toBeInTheDocument();
-    });
-  });
-});

apps/web/app/(app)/environments/[environmentId]/components/project-breadcrumb.tsx

@@ -1,225 +0,0 @@
-"use client";
-
-import { CreateProjectModal } from "@/modules/projects/components/create-project-modal";
-import { ProjectLimitModal } from "@/modules/projects/components/project-limit-modal";
-import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
-import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
-import * as Sentry from "@sentry/nextjs";
-import { useTranslate } from "@tolgee/react";
-import { ChevronDownIcon, ChevronRightIcon, CogIcon, FolderOpenIcon, Loader2, PlusIcon } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
-import { logger } from "@formbricks/logger";
-
-interface ProjectBreadcrumbProps {
-  currentProjectId: string;
-  projects: { id: string; name: string }[];
-  isOwnerOrManager: boolean;
-  organizationProjectsLimit: number;
-  isFormbricksCloud: boolean;
-  isLicenseActive: boolean;
-  currentOrganizationId: string;
-  currentEnvironmentId: string;
-  isAccessControlAllowed: boolean;
-  isEnvironmentBreadcrumbVisible: boolean;
-}
-
-export const ProjectBreadcrumb = ({
-  currentProjectId,
-  projects,
-  isOwnerOrManager,
-  organizationProjectsLimit,
-  isFormbricksCloud,
-  isLicenseActive,
-  currentOrganizationId,
-  currentEnvironmentId,
-  isAccessControlAllowed,
-  isEnvironmentBreadcrumbVisible,
-}: ProjectBreadcrumbProps) => {
-  const { t } = useTranslate();
-  const [isProjectDropdownOpen, setIsProjectDropdownOpen] = useState(false);
-  const [openCreateProjectModal, setOpenCreateProjectModal] = useState(false);
-  const [openLimitModal, setOpenLimitModal] = useState(false);
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  const pathname = usePathname();
-
-  const projectSettings = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `/environments/${currentEnvironmentId}/project/general`,
-    },
-    {
-      id: "look",
-      label: t("common.look_and_feel"),
-      href: `/environments/${currentEnvironmentId}/project/look`,
-    },
-    {
-      id: "app-connection",
-      label: t("common.website_and_app_connection"),
-      href: `/environments/${currentEnvironmentId}/project/app-connection`,
-    },
-    {
-      id: "integrations",
-      label: t("common.integrations"),
-      href: `/environments/${currentEnvironmentId}/project/integrations`,
-    },
-    {
-      id: "teams",
-      label: t("common.team_access"),
-      href: `/environments/${currentEnvironmentId}/project/teams`,
-    },
-    {
-      id: "languages",
-      label: t("common.survey_languages"),
-      href: `/environments/${currentEnvironmentId}/project/languages`,
-    },
-    {
-      id: "tags",
-      label: t("common.tags"),
-      href: `/environments/${currentEnvironmentId}/project/tags`,
-    },
-  ];
-
-  const currentProject = projects.find((project) => project.id === currentProjectId);
-
-  if (!currentProject) {
-    const errorMessage = `Project not found for project id: ${currentProjectId}`;
-    logger.error(errorMessage);
-    Sentry.captureException(new Error(errorMessage));
-    return;
-  }
-
-  const handleProjectChange = (projectId: string) => {
-    if (projectId === currentProjectId) return;
-    setIsLoading(true);
-    router.push(`/projects/${projectId}/`);
-  };
-
-  const handleAddProject = () => {
-    if (projects.length >= organizationProjectsLimit) {
-      setOpenLimitModal(true);
-      return;
-    }
-    setOpenCreateProjectModal(true);
-  };
-
-  const LimitModalButtons = (): [ModalButton, ModalButton] => {
-    if (isFormbricksCloud) {
-      return [
-        {
-          text: t("environments.settings.billing.upgrade"),
-          href: `/environments/${currentEnvironmentId}/settings/billing`,
-        },
-        {
-          text: t("common.cancel"),
-          onClick: () => setOpenLimitModal(false),
-        },
-      ];
-    }
-
-    return [
-      {
-        text: t("environments.settings.billing.upgrade"),
-        href: isLicenseActive
-          ? `/environments/${currentEnvironmentId}/settings/enterprise`
-          : "https://formbricks.com/upgrade-self-hosted-license",
-      },
-      {
-        text: t("common.cancel"),
-        onClick: () => setOpenLimitModal(false),
-      },
-    ];
-  };
-  return (
-    <BreadcrumbItem isActive={isProjectDropdownOpen}>
-      <DropdownMenu onOpenChange={setIsProjectDropdownOpen}>
-        <DropdownMenuTrigger
-          className="flex cursor-pointer items-center gap-1 outline-none"
-          id="projectDropdownTrigger"
-          asChild>
-          <div className="flex items-center gap-1">
-            <FolderOpenIcon className="h-3 w-3" strokeWidth={1.5} />
-            <span>{currentProject.name}</span>
-            {isLoading && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {isProjectDropdownOpen ? (
-              <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />
-            ) : (
-              isEnvironmentBreadcrumbVisible && <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
-            )}
-          </div>
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent align="start" className="mt-2">
-          <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <FolderOpenIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-            {t("common.choose_project")}
-          </div>
-          <DropdownMenuGroup>
-            {projects.map((proj) => (
-              <DropdownMenuCheckboxItem
-                key={proj.id}
-                checked={proj.id === currentProject.id}
-                onClick={() => handleProjectChange(proj.id)}
-                className="cursor-pointer">
-                <div className="flex items-center gap-2">
-                  <span>{proj.name}</span>
-                </div>
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuGroup>
-          {isOwnerOrManager && (
-            <DropdownMenuCheckboxItem
-              onClick={handleAddProject}
-              className="w-full cursor-pointer justify-between">
-              <span>{t("common.add_new_project")}</span>
-              <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
-            </DropdownMenuCheckboxItem>
-          )}
-          <DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-              <CogIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-              {t("common.project_configuration")}
-            </div>
-            {projectSettings.map((setting) => (
-              <DropdownMenuCheckboxItem
-                key={setting.id}
-                checked={pathname.includes(setting.id)}
-                onClick={() => router.push(setting.href)}
-                className="cursor-pointer">
-                {setting.label}
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      {/* Modals */}
-      {openLimitModal && (
-        <ProjectLimitModal
-          open={openLimitModal}
-          setOpen={setOpenLimitModal}
-          buttons={LimitModalButtons()}
-          projectLimit={organizationProjectsLimit}
-        />
-      )}
-      {openCreateProjectModal && (
-        <CreateProjectModal
-          open={openCreateProjectModal}
-          setOpen={setOpenCreateProjectModal}
-          organizationId={currentOrganizationId}
-          isAccessControlAllowed={isAccessControlAllowed}
-        />
-      )}
-    </BreadcrumbItem>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal.test.tsx

@@ -1,5 +1,5 @@
-import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
-import { fetchTables } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable";
+import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { fetchTables } from "@/app/(app)/environments/[environmentId]/integrations/airtable/lib/airtable";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useRouter } from "next/navigation";
@@ -16,11 +16,11 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import { AddIntegrationModal } from "./AddIntegrationModal";
 
 // Mock dependencies
-vi.mock("@/app/(app)/environments/[environmentId]/project/integrations/actions", () => ({
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/actions", () => ({
   createOrUpdateIntegrationAction: vi.fn(),
 }));
 vi.mock(
-  "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/BaseSelectDropdown",
+  "@/app/(app)/environments/[environmentId]/integrations/airtable/components/BaseSelectDropdown",
   () => ({
     BaseSelectDropdown: ({ control, airtableArray, fetchTable, defaultValue, setValue }) => (
       <div>
@@ -44,7 +44,7 @@ vi.mock(
     ),
   })
 );
-vi.mock("@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable", () => ({
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/airtable/lib/airtable", () => ({
   fetchTables: vi.fn(),
 }));
 vi.mock("@/lib/i18n/utils", () => ({

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal.tsx

@@ -1,23 +1,8 @@
 "use client";
 
-import { TFnType, useTranslate } from "@tolgee/react";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { Control, Controller, useForm } from "react-hook-form";
-import { toast } from "react-hot-toast";
-import { TIntegrationItem } from "@formbricks/types/integration";
-import {
-  TIntegrationAirtable,
-  TIntegrationAirtableConfigData,
-  TIntegrationAirtableInput,
-  TIntegrationAirtableTables,
-} from "@formbricks/types/integration/airtable";
-import { TSurvey } from "@formbricks/types/surveys/types";
-import { getTextContent } from "@formbricks/types/surveys/validation";
-import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
-import { BaseSelectDropdown } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/BaseSelectDropdown";
-import { fetchTables } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable";
+import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { BaseSelectDropdown } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/BaseSelectDropdown";
+import { fetchTables } from "@/app/(app)/environments/[environmentId]/integrations/airtable/lib/airtable";
 import AirtableLogo from "@/images/airtableLogo.svg";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { replaceHeadlineRecall } from "@/lib/utils/recall";
@@ -42,7 +27,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/modules/ui/components/select";
-import { IntegrationModalInputs } from "../lib/types";
+import { TFnType, useTranslate } from "@tolgee/react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Control, Controller, useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { TIntegrationItem } from "@formbricks/types/integration";
+import {
+  TIntegrationAirtable,
+  TIntegrationAirtableConfigData,
+  TIntegrationAirtableInput,
+  TIntegrationAirtableTables,
+} from "@formbricks/types/integration/airtable";
+import { TSurvey } from "@formbricks/types/surveys/types";
 
 type EditModeProps =
   | { isEditMode: false; defaultData?: never }
@@ -57,6 +55,17 @@ type AddIntegrationModalProps = {
   airtableIntegration: TIntegrationAirtable;
 } & EditModeProps;
 
+export type IntegrationModalInputs = {
+  base: string;
+  table: string;
+  survey: string;
+  questions: string[];
+  includeVariables: boolean;
+  includeHiddenFields: boolean;
+  includeMetadata: boolean;
+  includeCreatedAt: boolean;
+};
+
 const NoBaseFoundError = () => {
   const { t } = useTranslate();
   return (
@@ -118,9 +127,7 @@ const renderQuestionSelection = ({
                             : field.onChange(field.value?.filter((value) => value !== question.id));
                         }}
                       />
-                      <span className="ml-2">
-                        {getTextContent(getLocalizedValue(question.headline, "default"))}
-                      </span>
+                      <span className="ml-2">{getLocalizedValue(question.headline, "default")}</span>
                     </label>
                   </div>
                 )}
@@ -232,7 +239,7 @@ export const AddIntegrationModal = ({
 
       if (isEditMode) {
         // update action
-        airtableIntegrationData.config.data[defaultData.index] = integrationData;
+        airtableIntegrationData.config!.data[defaultData.index] = integrationData;
       } else {
         // create action
         airtableIntegrationData.config?.data.push(integrationData);

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper.test.tsx

@@ -1,4 +1,4 @@
-import { authorize } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable";
+import { authorize } from "@/app/(app)/environments/[environmentId]/integrations/airtable/lib/airtable";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
@@ -8,7 +8,7 @@ import { AirtableWrapper } from "./AirtableWrapper";
 
 // Mock child components
 vi.mock(
-  "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/ManageIntegration",
+  "@/app/(app)/environments/[environmentId]/integrations/airtable/components/ManageIntegration",
   () => ({
     ManageIntegration: ({ setIsConnected }) => (
       <div data-testid="manage-integration">
@@ -28,7 +28,7 @@ vi.mock("@/modules/ui/components/connect-integration", () => ({
 }));
 
 // Mock library function
-vi.mock("@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable", () => ({
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/airtable/lib/airtable", () => ({
   authorize: vi.fn(),
 }));
 

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ManageIntegration } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/ManageIntegration";
-import { authorize } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable";
+import { ManageIntegration } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/ManageIntegration";
+import { authorize } from "@/app/(app)/environments/[environmentId]/integrations/airtable/lib/airtable";
 import airtableLogo from "@/images/airtableLogo.svg";
 import { ConnectIntegration } from "@/modules/ui/components/connect-integration";
 import { useState } from "react";

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/BaseSelectDropdown.tsx

@@ -11,7 +11,7 @@ import {
 import { useTranslate } from "@tolgee/react";
 import { Control, Controller, UseFormSetValue } from "react-hook-form";
 import { TIntegrationItem } from "@formbricks/types/integration";
-import { IntegrationModalInputs } from "../lib/types";
+import { IntegrationModalInputs } from "./AddIntegrationModal";
 
 interface BaseSelectProps {
   control: Control<IntegrationModalInputs, any>;

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/ManageIntegration.test.tsx

@@ -1,4 +1,4 @@
-import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
+import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
@@ -6,11 +6,11 @@ import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationAirtable, TIntegrationAirtableConfig } from "@formbricks/types/integration/airtable";
 import { ManageIntegration } from "./ManageIntegration";
 
-vi.mock("@/app/(app)/environments/[environmentId]/project/integrations/actions", () => ({
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/actions", () => ({
   deleteIntegrationAction: vi.fn(),
 }));
 vi.mock(
-  "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AddIntegrationModal",
+  "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal",
   () => ({
     AddIntegrationModal: ({ open, setOpenWithStates }) =>
       open ? (

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/ManageIntegration.tsx

@@ -1,7 +1,10 @@
 "use client";
 
-import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
-import { AddIntegrationModal } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AddIntegrationModal";
+import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import {
+  AddIntegrationModal,
+  IntegrationModalInputs,
+} from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal";
 import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
@@ -16,7 +19,6 @@ import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
-import { IntegrationModalInputs } from "../lib/types";
 
 interface ManageIntegrationProps {
   airtableIntegration: TIntegrationAirtable;

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/page.test.tsx

@@ -1,4 +1,4 @@
-import { getSurveys } from "@/app/(app)/environments/[environmentId]/project/integrations/lib/surveys";
+import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
 import { getAirtableTables } from "@/lib/airtable/service";
 import { WEBAPP_URL } from "@/lib/constants";
 import { getIntegrations } from "@/lib/integration/service";
@@ -15,13 +15,10 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import Page from "./page";
 
 // Mock dependencies
-vi.mock(
-  "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AirtableWrapper",
-  () => ({
-    AirtableWrapper: vi.fn(() => <div>AirtableWrapper Mock</div>),
-  })
-);
-vi.mock("@/app/(app)/environments/[environmentId]/project/integrations/lib/surveys");
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper", () => ({
+  AirtableWrapper: vi.fn(() => <div>AirtableWrapper Mock</div>),
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/lib/surveys");
 vi.mock("@/lib/airtable/service");
 
 let mockAirtableClientId: string | undefined = "test-client-id";
@@ -142,7 +139,7 @@ describe("Airtable Integration Page", () => {
     const AirtableWrapper = vi.mocked(
       (
         await import(
-          "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AirtableWrapper"
+          "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper"
         )
       ).AirtableWrapper
     );
@@ -178,7 +175,7 @@ describe("Airtable Integration Page", () => {
     const AirtableWrapper = vi.mocked(
       (
         await import(
-          "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AirtableWrapper"
+          "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper"
         )
       ).AirtableWrapper
     );
@@ -209,7 +206,7 @@ describe("Airtable Integration Page", () => {
     const AirtableWrapper = vi.mocked(
       (
         await import(
-          "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AirtableWrapper"
+          "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper"
         )
       ).AirtableWrapper
     );

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/page.tsx

@@ -1,5 +1,5 @@
-import { AirtableWrapper } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AirtableWrapper";
-import { getSurveys } from "@/app/(app)/environments/[environmentId]/project/integrations/lib/surveys";
+import { AirtableWrapper } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper";
+import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
 import { getAirtableTables } from "@/lib/airtable/service";
 import { AIRTABLE_CLIENT_ID, WEBAPP_URL } from "@/lib/constants";
 import { getIntegrations } from "@/lib/integration/service";
@@ -37,12 +37,12 @@ const Page = async (props) => {
   const locale = await findMatchingLocale();
 
   if (isReadOnly) {
-    return redirect("./");
+    redirect("./");
   }
 
   return (
     <PageContentWrapper>
-      <GoBackButton url={`${WEBAPP_URL}/environments/${params.environmentId}/project/integrations`} />
+      <GoBackButton url={`${WEBAPP_URL}/environments/${params.environmentId}/integrations`} />
       <PageHeader pageTitle={t("environments.integrations.airtable.airtable_integration")} />
       <div className="h-[75vh] w-full">
         <AirtableWrapper