Remove INTERCOM environment variables from .env.example

- Remove INTERCOM_APP_ID and INTERCOM_SECRET_KEY from environment example
- Clean up unused configuration options for self-hosted instances

.agent/scripts/README.md

@@ -1,71 +0,0 @@
-# Skill Filter
-
-Automatically filters Vercel React best practices to reduce AI token costs while keeping high-impact performance patterns.
-
-## Quick Start
-
-```bash
-# Fetch and filter (first time)
-pnpm filter-skills --fetch
-
-# Re-filter after config changes
-pnpm filter-skills
-```
-
-**Result:** ~50% reduction in skill files (keeps CRITICAL/HIGH/MEDIUM priorities, removes LOW priority rules)
-
-## Configuration
-
-Edit `.agent/skills/react-best-practices/skill-filter-config.json`:
-
-```json
-{
-  "featureFlags": {
-    "keepCriticalPriority": true,    // async-*, bundle-*
-    "keepHighPriority": true,        // server-*
-    "keepMediumPriority": true,      // rerender-*
-    "keepLowPriority": false,        // js-*, rendering-*, advanced-*
-    "removeJsOptimizations": true,
-    "removeRenderingOptimizations": true,
-    "removeAdvancedPatterns": true
-  }
-}
-```
-
-**Toggle LOW priority rules:** Set `keepLowPriority: true`
-
-## What It Does
-
-1. Downloads latest skills from GitHub (with `--fetch`)
-2. Filters based on priority and used technologies
-3. Archives unused rules to `.archived/` (not tracked in git)
-4. Formats markdown with Prettier to match project style
-
-## Why This Works
-
-- **AI Skills = Proactive:** Guide developers to write correct code from the start
-- **Linting = Reactive:** Catch mistakes after code is written
-- **Together:** AI prevents issues, linting catches what slips through
-
-Token costs are an investment in preventing technical debt rather than fixing it later.
-
-## Restore Archived Rules
-
-```bash
-mv .agent/skills/react-best-practices/.archived/rule-name.md \
-   .agent/skills/react-best-practices/rules/
-```
-
-Then re-run: `pnpm filter-skills`
-
-## Commands
-
-```bash
-pnpm filter-skills              # Filter with current config
-pnpm filter-skills:dry-run      # Preview changes
-pnpm filter-skills --fetch      # Fetch latest + filter
-```
-
----
-
-**Source:** [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills)

.agent/scripts/filter-skills.ts

@@ -1,439 +0,0 @@
-#!/usr/bin/env tsx
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as os from 'node:os';
-import { execSync } from 'node:child_process';
-
-interface FilterConfig {
-  featureFlags: {
-    keepCriticalPriority: boolean;
-    keepHighPriority: boolean;
-    keepMediumPriority: boolean;
-    keepLowPriority: boolean;
-    removeJsOptimizations: boolean;
-    removeRenderingOptimizations: boolean;
-    removeAdvancedPatterns: boolean;
-  };
-  priorities: {
-    keep: string[];
-    conditionalKeep: string[];
-    remove: string[];
-  };
-  technologyDetection: Record<string, {
-    packageNames: string[];
-    codePatterns: string[];
-    relatedRules: string[];
-  }>;
-  alwaysKeep: string[];
-  alwaysRemove: string[];
-}
-
-interface FilterReport {
-  kept: { file: string; reason: string }[];
-  archived: { file: string; reason: string }[];
-  technologiesDetected: string[];
-  summary: {
-    totalRules: number;
-    keptRules: number;
-    archivedRules: number;
-    reductionPercent: number;
-  };
-}
-
-const PROJECT_ROOT = path.resolve(__dirname, '../..');
-const SKILLS_DIR = path.join(PROJECT_ROOT, '.agent/skills/react-best-practices');
-const RULES_DIR = path.join(SKILLS_DIR, 'rules');
-const ARCHIVE_DIR = path.join(SKILLS_DIR, '.archived');
-const CONFIG_PATH = path.join(PROJECT_ROOT, '.agent/skill-filter-config.json');
-const PACKAGE_JSON_PATH = path.join(PROJECT_ROOT, 'package.json');
-
-// Parse command line arguments
-const args = new Set(process.argv.slice(2));
-const isDryRun = args.has('--dry-run');
-
-function loadConfig(): FilterConfig {
-  const configContent = fs.readFileSync(CONFIG_PATH, 'utf-8');
-  return JSON.parse(configContent);
-}
-
-function validateConfig(config: FilterConfig): void {
-  console.log('✓ Configuration is valid');
-  console.log(`  - ${config.alwaysKeep.length} rules marked as always keep`);
-  console.log(`  - ${config.alwaysRemove.length} rules marked as always remove`);
-  console.log(`  - ${Object.keys(config.technologyDetection).length} technologies configured for detection`);
-}
-
-function hasRipgrep(): boolean {
-  try {
-    execSync('rg --version', { stdio: 'ignore' });
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function detectTechnologies(config: FilterConfig): Set<string> {
-  const detected = new Set<string>();
-  
-  // Check package.json dependencies
-  const packageJson = JSON.parse(fs.readFileSync(PACKAGE_JSON_PATH, 'utf-8'));
-  const allDeps = {
-    ...packageJson.dependencies,
-    ...packageJson.devDependencies,
-  };
-
-  const hasRg = hasRipgrep();
-  if (!hasRg && Object.keys(config.technologyDetection).some(t => config.technologyDetection[t].codePatterns.length > 0)) {
-    console.warn('⚠️  Ripgrep (rg) not found. Code pattern detection will be skipped.');
-  }
-
-  for (const [techName, techConfig] of Object.entries(config.technologyDetection)) {
-    // Check for package dependencies
-    const hasPackage = techConfig.packageNames.some(pkg => allDeps[pkg]);
-    
-    if (hasPackage) {
-      detected.add(techName);
-      continue;
-    }
-
-    // Check for code patterns using ripgrep
-    if (hasRg && techConfig.codePatterns.length > 0) {
-      for (const pattern of techConfig.codePatterns) {
-        try {
-          // Use ripgrep to search for patterns in TypeScript/JavaScript files
-          // Use String.raw to avoid escaping issues, though redundant with single quotes in shell
-           execSync(
-            `rg -q '${pattern.replace(/'/g, "\\'")}' -g '*.ts' -g '*.tsx' -g '*.js' -g '*.jsx' "${PROJECT_ROOT}"`,
-            { stdio: 'ignore' }
-          );
-          detected.add(techName);
-          break;
-        } catch {
-          // Pattern not found or error, continue checking
-        }
-      }
-    }
-  }
-
-  return detected;
-}
-
-function getRulePriority(filename: string): string | null {
-  const content = fs.readFileSync(path.join(RULES_DIR, filename), 'utf-8');
-  const match = content.match(/impact:\s*([A-Z-]+)/);
-  return match ? match[1] : null;
-}
-
-function shouldKeepRule(
-  filename: string,
-  config: FilterConfig,
-  detectedTechnologies: Set<string>
-): { keep: boolean; reason: string } {
-  const flags = config.featureFlags;
-
-  // 1. Check feature flag naming conventions (hardcoded optimization flags)
-  if (flags.removeJsOptimizations && filename.startsWith('js-')) {
-    return { keep: false, reason: 'Feature flag: removeJsOptimizations' };
-  }
-  if (flags.removeRenderingOptimizations && filename.startsWith('rendering-')) {
-    return { keep: false, reason: 'Feature flag: removeRenderingOptimizations' };
-  }
-  if (flags.removeAdvancedPatterns && filename.startsWith('advanced-')) {
-    return { keep: false, reason: 'Feature flag: removeAdvancedPatterns' };
-  }
-
-  // 2. Check always keep/remove lists
-  if (config.alwaysKeep.includes(filename)) {
-    return { keep: true, reason: 'Always keep (critical pattern)' };
-  }
-  if (config.alwaysRemove.includes(filename)) {
-    return { keep: false, reason: 'Always remove (low priority optimization)' };
-  }
-
-  // 3. Check technology detection
-  for (const [techName, techConfig] of Object.entries(config.technologyDetection)) {
-    if (techConfig.relatedRules.includes(filename)) {
-      if (detectedTechnologies.has(techName)) {
-        return { keep: true, reason: `Technology detected: ${techName}` };
-      } else {
-        return { keep: false, reason: `Technology not used: ${techName}` };
-      }
-    }
-  }
-
-  // 4. Check priority
-  const priority = getRulePriority(filename);
-  if (priority) {
-    // Feature flag overrides for priorities
-    if (priority === 'CRITICAL' && !flags.keepCriticalPriority) return { keep: false, reason: 'Feature flag: keepCriticalPriority disabled' };
-    if (priority === 'HIGH' && !flags.keepHighPriority) return { keep: false, reason: 'Feature flag: keepHighPriority disabled' };
-    if ((priority === 'MEDIUM' || priority === 'MEDIUM-HIGH') && !flags.keepMediumPriority) return { keep: false, reason: 'Feature flag: keepMediumPriority disabled' };
-    if ((priority === 'LOW' || priority === 'LOW-MEDIUM') && flags.keepLowPriority) return { keep: true, reason: 'Feature flag: keepLowPriority enabled' };
-
-    // Standard priority lists
-    if (config.priorities.keep.includes(priority)) return { keep: true, reason: `Priority: ${priority}` };
-    if (config.priorities.conditionalKeep.includes(priority)) return { keep: true, reason: `Priority: ${priority} (conditional keep)` };
-    if (config.priorities.remove.includes(priority)) return { keep: false, reason: `Priority: ${priority}` };
-  }
-
-  // Default
-  return { keep: true, reason: 'Default (no matching rule)' };
-}
-
-function filterRules(config: FilterConfig, detectedTechnologies: Set<string>): FilterReport {
-  const report: FilterReport = {
-    kept: [],
-    archived: [],
-    technologiesDetected: Array.from(detectedTechnologies),
-    summary: {
-      totalRules: 0,
-      keptRules: 0,
-      archivedRules: 0,
-      reductionPercent: 0,
-    },
-  };
-
-  const ruleFiles = fs.readdirSync(RULES_DIR).filter(f => f.endsWith('.md'));
-  report.summary.totalRules = ruleFiles.length;
-
-  for (const filename of ruleFiles) {
-    const decision = shouldKeepRule(filename, config, detectedTechnologies);
-    
-    if (decision.keep) {
-      report.kept.push({ file: filename, reason: decision.reason });
-      report.summary.keptRules++;
-    } else {
-      report.archived.push({ file: filename, reason: decision.reason });
-      report.summary.archivedRules++;
-      
-      if (!isDryRun) {
-        // Move to archive
-        const sourcePath = path.join(RULES_DIR, filename);
-        const archivePath = path.join(ARCHIVE_DIR, filename);
-        fs.mkdirSync(ARCHIVE_DIR, { recursive: true });
-        fs.renameSync(sourcePath, archivePath);
-      }
-    }
-  }
-
-  report.summary.reductionPercent = Math.round(
-    report.summary.totalRules > 0 
-      ? (report.summary.archivedRules / report.summary.totalRules) * 100 
-      : 0
-  );
-
-  return report;
-}
-
-function printReport(report: FilterReport): void {
-  console.log('\n' + '='.repeat(80));
-  console.log('SKILL FILTER REPORT');
-  console.log('='.repeat(80) + '\n');
-
-  console.log('📊 SUMMARY');
-  console.log(`   Total rules: ${report.summary.totalRules}`);
-  console.log(`   Kept: ${report.summary.keptRules} (${100 - report.summary.reductionPercent}%)`);
-  console.log(`   Archived: ${report.summary.archivedRules} (${report.summary.reductionPercent}%)`);
-  console.log('');
-
-  console.log('🔍 TECHNOLOGIES DETECTED');
-  if (report.technologiesDetected.length > 0) {
-    report.technologiesDetected.forEach(tech => console.log(`   ✓ ${tech}`));
-  } else {
-    console.log('   (none detected)');
-  }
-  console.log('');
-
-  console.log('✅ KEPT RULES (' + report.kept.length + ')');
-  report.kept.forEach(({ file, reason }) => {
-    console.log(`   • ${file.padEnd(45)} → ${reason}`);
-  });
-  console.log('');
-
-  console.log('📦 ARCHIVED RULES (' + report.archived.length + ')');
-  report.archived.forEach(({ file, reason }) => {
-    console.log(`   • ${file.padEnd(45)} → ${reason}`);
-  });
-  console.log('');
-
-  if (isDryRun) {
-    console.log('🔍 DRY RUN MODE - No files were modified');
-  } else {
-    console.log('✨ Filtering complete! Archived rules moved to .archived/');
-  }
-  console.log('');
-}
-
-function saveReport(report: FilterReport): void {
-  const reportPath = path.join(SKILLS_DIR, 'filter-report.json');
-  fs.writeFileSync(reportPath, JSON.stringify(report, null, 2));
-  console.log(`📝 Report saved to: ${reportPath}`);
-}
-
-function fetchSkills(): void {
-  console.log('📥 Fetching Vercel React best practices from GitHub...\n');
-  
-  // Use os.tmpdir() for safer temp directory
-  const tempBase = fs.mkdtempSync(path.join(os.tmpdir(), 'agent-skills-'));
-  const tarballUrl = 'https://github.com/vercel-labs/agent-skills/archive/refs/heads/main.tar.gz';
-  
-  try {
-    console.log('  → Downloading tarball from GitHub...');
-    // Download and extract the entire repo first
-    try {
-      execSync(
-        `curl -sL ${tarballUrl} | tar -xz -C "${tempBase}"`,
-        { stdio: 'pipe' }
-      );
-    } catch (e) {
-      throw new Error('Failed to download skills. Check your internet connection or curl availability.');
-    }
-    
-    // Find the extracted directory and move the skills subdirectory
-    const extractedDir = path.join(tempBase, 'agent-skills-main/skills/react-best-practices');
-    
-    if (!fs.existsSync(extractedDir)) {
-      throw new Error(`Skills directory not found in downloaded content: ${extractedDir}`);
-    }
-    
-    // Move to final location
-    if (fs.existsSync(SKILLS_DIR)) {
-      console.log('  → Removing old skills...');
-      fs.rmSync(SKILLS_DIR, { recursive: true, force: true });
-    }
-    
-    console.log('  → Installing to .agent/skills/...');
-    fs.mkdirSync(path.dirname(SKILLS_DIR), { recursive: true });
-    fs.renameSync(extractedDir, SKILLS_DIR);
-    
-    // Create default config file if it doesn't exist AND not present in the new location
-    // Note: We moved the config out, so we don't need to recreate it inside SKILLS_DIR
-    // But if the external one is missing, we could offer to create it? 
-    // For now, let's keep the logic simple and rely on the external config.
-    if (!fs.existsSync(CONFIG_PATH)) {
-       console.log('⚠️  Config file missing at new location. Creating default...');
-       const defaultConfig = {
-        featureFlags: {
-          keepCriticalPriority: true,
-          keepHighPriority: true,
-          keepMediumPriority: true,
-          keepLowPriority: false,
-          removeJsOptimizations: true,
-          removeRenderingOptimizations: true,
-          removeAdvancedPatterns: true
-        },
-        priorities: {
-          keep: ["CRITICAL", "HIGH"],
-          conditionalKeep: ["MEDIUM", "MEDIUM-HIGH"],
-          remove: ["LOW", "LOW-MEDIUM"]
-        },
-        technologyDetection: {},
-        alwaysKeep: [
-          "async-defer-await.md",
-          "async-parallel.md",
-          "async-dependencies.md",
-          "async-api-routes.md",
-          "bundle-barrel-imports.md",
-          "bundle-dynamic-imports.md",
-          "bundle-defer-third-party.md",
-          "bundle-conditional.md",
-          "bundle-preload.md",
-          "rerender-functional-setstate.md",
-          "rerender-memo.md",
-          "rerender-dependencies.md",
-          "rerender-defer-reads.md"
-        ],
-        alwaysRemove: [
-          "js-batch-dom-css.md",
-          "js-cache-property-access.md",
-          "js-combine-iterations.md",
-          "js-early-exit.md",
-          "js-hoist-regexp.md",
-          "js-index-maps.md",
-          "js-length-check-first.md",
-          "js-min-max-loop.md",
-          "js-set-map-lookups.md",
-          "js-tosorted-immutable.md",
-          "js-cache-function-results.md",
-          "rendering-activity.md",
-          "rendering-animate-svg-wrapper.md",
-          "rendering-conditional-render.md",
-          "rendering-content-visibility.md",
-          "rendering-hoist-jsx.md",
-          "rendering-hydration-no-flicker.md",
-          "rendering-svg-precision.md",
-          "advanced-event-handler-refs.md",
-          "advanced-use-latest.md"
-        ]
-      };
-      fs.writeFileSync(CONFIG_PATH, JSON.stringify(defaultConfig, null, 2));
-    }
-    
-    console.log('✓ Skills fetched successfully\n');
-  } finally {
-    // Always clean up temp directory
-    try {
-      fs.rmSync(tempBase, { recursive: true, force: true });
-    } catch (e) {
-      // Ignore cleanup errors
-    }
-  }
-}
-
-function formatSkills(): void {
-  console.log('🎨 Formatting skill files to match project code style...\n');
-  try {
-    execSync(
-      `prettier --write "${SKILLS_DIR}/**/*.md"`,
-      { stdio: 'inherit', cwd: PROJECT_ROOT }
-    );
-    console.log('✓ Formatting complete\n');
-  } catch (error) {
-    console.log('⚠️  Formatting failed (non-critical):', error);
-  }
-}
-
-// Main execution
-try {
-  const shouldFetch = args.has('--fetch') || !fs.existsSync(SKILLS_DIR);
-  
-  // Auto-fetch if skills don't exist
-  if (shouldFetch) {
-    fetchSkills();
-  }
-  
-  // Check if skills exist after potential fetch
-  if (!fs.existsSync(SKILLS_DIR)) {
-    console.error('❌ Skills directory not found!\n');
-    console.error('Please run with --fetch flag:');
-    console.error('  pnpm filter-skills --fetch\n');
-    process.exit(1);
-  }
-
-  const validateOnly = args.has('--validate-config');
-
-  const config = loadConfig();
-
-  if (validateOnly) {
-    validateConfig(config);
-    process.exit(0);
-  }
-
-  console.log('🔍 Detecting technologies used in codebase...\n');
-  const detectedTechnologies = detectTechnologies(config);
-
-  console.log('🎯 Filtering skills...\n');
-  const report = filterRules(config, detectedTechnologies);
-
-  printReport(report);
-  
-  if (!isDryRun) {
-    saveReport(report);
-    formatSkills();
-  }
-
-  process.exit(0);
-} catch (error) {
-  console.error('❌ Error:', error);
-  process.exit(1);
-}

.agent/skill-filter-config.json

@@ -1,63 +0,0 @@
-{
-  "featureFlags": {
-    "keepCriticalPriority": true,
-    "keepHighPriority": true,
-    "keepMediumPriority": true,
-    "keepLowPriority": false,
-    "removeJsOptimizations": true,
-    "removeRenderingOptimizations": true,
-    "removeAdvancedPatterns": true
-  },
-  "priorities": {
-    "keep": [
-      "CRITICAL",
-      "HIGH"
-    ],
-    "conditionalKeep": [
-      "MEDIUM",
-      "MEDIUM-HIGH"
-    ],
-    "remove": [
-      "LOW",
-      "LOW-MEDIUM"
-    ]
-  },
-  "technologyDetection": {},
-  "alwaysKeep": [
-    "async-defer-await.md",
-    "async-parallel.md",
-    "async-dependencies.md",
-    "async-api-routes.md",
-    "bundle-barrel-imports.md",
-    "bundle-dynamic-imports.md",
-    "bundle-defer-third-party.md",
-    "bundle-conditional.md",
-    "bundle-preload.md",
-    "rerender-functional-setstate.md",
-    "rerender-memo.md",
-    "rerender-dependencies.md",
-    "rerender-defer-reads.md"
-  ],
-  "alwaysRemove": [
-    "js-batch-dom-css.md",
-    "js-cache-property-access.md",
-    "js-combine-iterations.md",
-    "js-early-exit.md",
-    "js-hoist-regexp.md",
-    "js-index-maps.md",
-    "js-length-check-first.md",
-    "js-min-max-loop.md",
-    "js-set-map-lookups.md",
-    "js-tosorted-immutable.md",
-    "js-cache-function-results.md",
-    "rendering-activity.md",
-    "rendering-animate-svg-wrapper.md",
-    "rendering-conditional-render.md",
-    "rendering-content-visibility.md",
-    "rendering-hoist-jsx.md",
-    "rendering-hydration-no-flicker.md",
-    "rendering-svg-precision.md",
-    "advanced-event-handler-refs.md",
-    "advanced-use-latest.md"
-  ]
-}

.agent/skills/react-best-practices/README.md

@@ -1,127 +0,0 @@
-# React Best Practices
-
-A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs.
-
-## Structure
-
-- `rules/` - Individual rule files (one per rule)
-  - `_sections.md` - Section metadata (titles, impacts, descriptions)
-  - `_template.md` - Template for creating new rules
-  - `area-description.md` - Individual rule files
-- `src/` - Build scripts and utilities
-- `metadata.json` - Document metadata (version, organization, abstract)
-- **`AGENTS.md`** - Compiled output (generated)
-- **`test-cases.json`** - Test cases for LLM evaluation (generated)
-
-## Getting Started
-
-1. Install dependencies:
-
-   ```bash
-   pnpm install
-   ```
-
-2. Build AGENTS.md from rules:
-
-   ```bash
-   pnpm build
-   ```
-
-3. Validate rule files:
-
-   ```bash
-   pnpm validate
-   ```
-
-4. Extract test cases:
-   ```bash
-   pnpm extract-tests
-   ```
-
-## Creating a New Rule
-
-1. Copy `rules/_template.md` to `rules/area-description.md`
-2. Choose the appropriate area prefix:
-   - `async-` for Eliminating Waterfalls (Section 1)
-   - `bundle-` for Bundle Size Optimization (Section 2)
-   - `server-` for Server-Side Performance (Section 3)
-   - `client-` for Client-Side Data Fetching (Section 4)
-   - `rerender-` for Re-render Optimization (Section 5)
-   - `rendering-` for Rendering Performance (Section 6)
-   - `js-` for JavaScript Performance (Section 7)
-   - `advanced-` for Advanced Patterns (Section 8)
-3. Fill in the frontmatter and content
-4. Ensure you have clear examples with explanations
-5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
-
-## Rule File Structure
-
-Each rule file should follow this structure:
-
-````markdown
----
-title: Rule Title Here
-impact: MEDIUM
-impactDescription: Optional description
-tags: tag1, tag2, tag3
----
-
-## Rule Title Here
-
-Brief explanation of the rule and why it matters.
-
-**Incorrect (description of what's wrong):**
-
-```typescript
-// Bad code example
-```
-````
-
-**Correct (description of what's right):**
-
-```typescript
-// Good code example
-```
-
-Optional explanatory text after examples.
-
-Reference: [Link](https://example.com)
-
-## File Naming Convention
-
-- Files starting with `_` are special (excluded from build)
-- Rule files: `area-description.md` (e.g., `async-parallel.md`)
-- Section is automatically inferred from filename prefix
-- Rules are sorted alphabetically by title within each section
-- IDs (e.g., 1.1, 1.2) are auto-generated during build
-
-## Impact Levels
-
-- `CRITICAL` - Highest priority, major performance gains
-- `HIGH` - Significant performance improvements
-- `MEDIUM-HIGH` - Moderate-high gains
-- `MEDIUM` - Moderate performance improvements
-- `LOW-MEDIUM` - Low-medium gains
-- `LOW` - Incremental improvements
-
-## Scripts
-
-- `pnpm build` - Compile rules into AGENTS.md
-- `pnpm validate` - Validate all rule files
-- `pnpm extract-tests` - Extract test cases for LLM evaluation
-- `pnpm dev` - Build and validate
-
-## Contributing
-
-When adding or modifying rules:
-
-1. Use the correct filename prefix for your section
-2. Follow the `_template.md` structure
-3. Include clear bad/good examples with explanations
-4. Add appropriate tags
-5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
-6. Rules are automatically sorted by title - no need to manage numbers!
-
-## Acknowledgments
-
-Originally created by [@shuding](https://x.com/shuding) at [Vercel](https://vercel.com).

.agent/skills/react-best-practices/SKILL.md

@@ -1,138 +0,0 @@
----
-name: vercel-react-best-practices
-description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
-license: MIT
-metadata:
-  author: vercel
-  version: "1.0.0"
----
-
-# Vercel React Best Practices
-
-Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
-
-## When to Apply
-
-Reference these guidelines when:
-
-- Writing new React components or Next.js pages
-- Implementing data fetching (client or server-side)
-- Reviewing code for performance issues
-- Refactoring existing React/Next.js code
-- Optimizing bundle size or load times
-
-## Rule Categories by Priority
-
-| Priority | Category                  | Impact      | Prefix       |
-| -------- | ------------------------- | ----------- | ------------ |
-| 1        | Eliminating Waterfalls    | CRITICAL    | `async-`     |
-| 2        | Bundle Size Optimization  | CRITICAL    | `bundle-`    |
-| 3        | Server-Side Performance   | HIGH        | `server-`    |
-| 4        | Client-Side Data Fetching | MEDIUM-HIGH | `client-`    |
-| 5        | Re-render Optimization    | MEDIUM      | `rerender-`  |
-| 6        | Rendering Performance     | MEDIUM      | `rendering-` |
-| 7        | JavaScript Performance    | LOW-MEDIUM  | `js-`        |
-| 8        | Advanced Patterns         | LOW         | `advanced-`  |
-
-## Quick Reference
-
-### 1. Eliminating Waterfalls (CRITICAL)
-
-- `async-defer-await` - Move await into branches where actually used
-- `async-parallel` - Use Promise.all() for independent operations
-- `async-dependencies` - Use better-all for partial dependencies
-- `async-api-routes` - Start promises early, await late in API routes
-- `async-suspense-boundaries` - Use Suspense to stream content
-
-### 2. Bundle Size Optimization (CRITICAL)
-
-- `bundle-barrel-imports` - Import directly, avoid barrel files
-- `bundle-dynamic-imports` - Use next/dynamic for heavy components
-- `bundle-defer-third-party` - Load analytics/logging after hydration
-- `bundle-conditional` - Load modules only when feature is activated
-- `bundle-preload` - Preload on hover/focus for perceived speed
-
-### 3. Server-Side Performance (HIGH)
-
-- `server-auth-actions` - Authenticate server actions like API routes
-- `server-cache-react` - Use React.cache() for per-request deduplication
-- `server-cache-lru` - Use LRU cache for cross-request caching
-- `server-dedup-props` - Avoid duplicate serialization in RSC props
-- `server-serialization` - Minimize data passed to client components
-- `server-parallel-fetching` - Restructure components to parallelize fetches
-- `server-after-nonblocking` - Use after() for non-blocking operations
-
-### 4. Client-Side Data Fetching (MEDIUM-HIGH)
-
-- `client-swr-dedup` - Use SWR for automatic request deduplication
-- `client-event-listeners` - Deduplicate global event listeners
-- `client-passive-event-listeners` - Use passive listeners for scroll
-- `client-localstorage-schema` - Version and minimize localStorage data
-
-### 5. Re-render Optimization (MEDIUM)
-
-- `rerender-defer-reads` - Don't subscribe to state only used in callbacks
-- `rerender-memo` - Extract expensive work into memoized components
-- `rerender-memo-with-default-value` - Hoist default non-primitive props
-- `rerender-dependencies` - Use primitive dependencies in effects
-- `rerender-derived-state` - Subscribe to derived booleans, not raw values
-- `rerender-derived-state-no-effect` - Derive state during render, not effects
-- `rerender-functional-setstate` - Use functional setState for stable callbacks
-- `rerender-lazy-state-init` - Pass function to useState for expensive values
-- `rerender-simple-expression-in-memo` - Avoid memo for simple primitives
-- `rerender-move-effect-to-event` - Put interaction logic in event handlers
-- `rerender-transitions` - Use startTransition for non-urgent updates
-- `rerender-use-ref-transient-values` - Use refs for transient frequent values
-
-### 6. Rendering Performance (MEDIUM)
-
-- `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element
-- `rendering-content-visibility` - Use content-visibility for long lists
-- `rendering-hoist-jsx` - Extract static JSX outside components
-- `rendering-svg-precision` - Reduce SVG coordinate precision
-- `rendering-hydration-no-flicker` - Use inline script for client-only data
-- `rendering-hydration-suppress-warning` - Suppress expected mismatches
-- `rendering-activity` - Use Activity component for show/hide
-- `rendering-conditional-render` - Use ternary, not && for conditionals
-- `rendering-usetransition-loading` - Prefer useTransition for loading state
-
-### 7. JavaScript Performance (LOW-MEDIUM)
-
-- `js-batch-dom-css` - Group CSS changes via classes or cssText
-- `js-index-maps` - Build Map for repeated lookups
-- `js-cache-property-access` - Cache object properties in loops
-- `js-cache-function-results` - Cache function results in module-level Map
-- `js-cache-storage` - Cache localStorage/sessionStorage reads
-- `js-combine-iterations` - Combine multiple filter/map into one loop
-- `js-length-check-first` - Check array length before expensive comparison
-- `js-early-exit` - Return early from functions
-- `js-hoist-regexp` - Hoist RegExp creation outside loops
-- `js-min-max-loop` - Use loop for min/max instead of sort
-- `js-set-map-lookups` - Use Set/Map for O(1) lookups
-- `js-tosorted-immutable` - Use toSorted() for immutability
-
-### 8. Advanced Patterns (LOW)
-
-- `advanced-event-handler-refs` - Store event handlers in refs
-- `advanced-init-once` - Initialize app once per app load
-- `advanced-use-latest` - useLatest for stable callback refs
-
-## How to Use
-
-Read individual rule files for detailed explanations and code examples:
-
-```
-rules/async-parallel.md
-rules/bundle-barrel-imports.md
-```
-
-Each rule file contains:
-
-- Brief explanation of why it matters
-- Incorrect code example with explanation
-- Correct code example with explanation
-- Additional context and references
-
-## Full Compiled Document
-
-For the complete guide with all rules expanded: `AGENTS.md`

.agent/skills/react-best-practices/filter-report.json

@@ -1,249 +0,0 @@
-{
-  "kept": [
-    {
-      "file": "_sections.md",
-      "reason": "Default (no matching rule)"
-    },
-    {
-      "file": "_template.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "async-api-routes.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "async-defer-await.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "async-dependencies.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "async-parallel.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "async-suspense-boundaries.md",
-      "reason": "Priority: HIGH"
-    },
-    {
-      "file": "bundle-barrel-imports.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "bundle-conditional.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "bundle-defer-third-party.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "bundle-dynamic-imports.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "bundle-preload.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "client-localstorage-schema.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "client-passive-event-listeners.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "client-swr-dedup.md",
-      "reason": "Priority: MEDIUM-HIGH (conditional keep)"
-    },
-    {
-      "file": "rerender-defer-reads.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "rerender-dependencies.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "rerender-derived-state-no-effect.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "rerender-derived-state.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "rerender-functional-setstate.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "rerender-lazy-state-init.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "rerender-memo-with-default-value.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "rerender-memo.md",
-      "reason": "Always keep (critical pattern)"
-    },
-    {
-      "file": "rerender-move-effect-to-event.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "rerender-transitions.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "rerender-use-ref-transient-values.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "server-after-nonblocking.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "server-auth-actions.md",
-      "reason": "Priority: CRITICAL"
-    },
-    {
-      "file": "server-cache-lru.md",
-      "reason": "Priority: HIGH"
-    },
-    {
-      "file": "server-cache-react.md",
-      "reason": "Priority: MEDIUM (conditional keep)"
-    },
-    {
-      "file": "server-parallel-fetching.md",
-      "reason": "Priority: CRITICAL"
-    },
-    {
-      "file": "server-serialization.md",
-      "reason": "Priority: HIGH"
-    }
-  ],
-  "archived": [
-    {
-      "file": "advanced-event-handler-refs.md",
-      "reason": "Feature flag: removeAdvancedPatterns"
-    },
-    {
-      "file": "advanced-init-once.md",
-      "reason": "Feature flag: removeAdvancedPatterns"
-    },
-    {
-      "file": "advanced-use-latest.md",
-      "reason": "Feature flag: removeAdvancedPatterns"
-    },
-    {
-      "file": "client-event-listeners.md",
-      "reason": "Priority: LOW"
-    },
-    {
-      "file": "js-batch-dom-css.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-cache-function-results.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-cache-property-access.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-cache-storage.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-combine-iterations.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-early-exit.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-hoist-regexp.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-index-maps.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-length-check-first.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-min-max-loop.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-set-map-lookups.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "js-tosorted-immutable.md",
-      "reason": "Feature flag: removeJsOptimizations"
-    },
-    {
-      "file": "rendering-activity.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rendering-animate-svg-wrapper.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rendering-conditional-render.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rendering-content-visibility.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rendering-hoist-jsx.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rendering-hydration-no-flicker.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rendering-hydration-suppress-warning.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rendering-svg-precision.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rendering-usetransition-loading.md",
-      "reason": "Feature flag: removeRenderingOptimizations"
-    },
-    {
-      "file": "rerender-simple-expression-in-memo.md",
-      "reason": "Priority: LOW-MEDIUM"
-    },
-    {
-      "file": "server-dedup-props.md",
-      "reason": "Priority: LOW"
-    }
-  ],
-  "technologiesDetected": [],
-  "summary": {
-    "totalRules": 59,
-    "keptRules": 32,
-    "archivedRules": 27,
-    "reductionPercent": 46
-  }
-}

.agent/skills/react-best-practices/metadata.json

@@ -1,15 +0,0 @@
-{
-  "version": "1.0.0",
-  "organization": "Vercel Engineering",
-  "date": "January 2026",
-  "abstract": "Comprehensive performance optimization guide for React and Next.js applications, designed for AI agents and LLMs. Contains 40+ rules across 8 categories, prioritized by impact from critical (eliminating waterfalls, reducing bundle size) to incremental (advanced patterns). Each rule includes detailed explanations, real-world examples comparing incorrect vs. correct implementations, and specific impact metrics to guide automated refactoring and code generation.",
-  "references": [
-    "https://react.dev",
-    "https://nextjs.org",
-    "https://swr.vercel.app",
-    "https://github.com/shuding/better-all",
-    "https://github.com/isaacs/node-lru-cache",
-    "https://vercel.com/blog/how-we-optimized-package-imports-in-next-js",
-    "https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast"
-  ]
-}

.agent/skills/react-best-practices/rules/_sections.md

@@ -1,46 +0,0 @@
-# Sections
-
-This file defines all sections, their ordering, impact levels, and descriptions.
-The section ID (in parentheses) is the filename prefix used to group rules.
-
----
-
-## 1. Eliminating Waterfalls (async)
-
-**Impact:** CRITICAL  
-**Description:** Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains.
-
-## 2. Bundle Size Optimization (bundle)
-
-**Impact:** CRITICAL  
-**Description:** Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.
-
-## 3. Server-Side Performance (server)
-
-**Impact:** HIGH  
-**Description:** Optimizing server-side rendering and data fetching eliminates server-side waterfalls and reduces response times.
-
-## 4. Client-Side Data Fetching (client)
-
-**Impact:** MEDIUM-HIGH  
-**Description:** Automatic deduplication and efficient data fetching patterns reduce redundant network requests.
-
-## 5. Re-render Optimization (rerender)
-
-**Impact:** MEDIUM  
-**Description:** Reducing unnecessary re-renders minimizes wasted computation and improves UI responsiveness.
-
-## 6. Rendering Performance (rendering)
-
-**Impact:** MEDIUM  
-**Description:** Optimizing the rendering process reduces the work the browser needs to do.
-
-## 7. JavaScript Performance (js)
-
-**Impact:** LOW-MEDIUM  
-**Description:** Micro-optimizations for hot paths can add up to meaningful improvements.
-
-## 8. Advanced Patterns (advanced)
-
-**Impact:** LOW  
-**Description:** Advanced patterns for specific cases that require careful implementation.

.agent/skills/react-best-practices/rules/_template.md

@@ -1,28 +0,0 @@
----
-title: Rule Title Here
-impact: MEDIUM
-impactDescription: Optional description of impact (e.g., "20-50% improvement")
-tags: tag1, tag2
----
-
-## Rule Title Here
-
-**Impact: MEDIUM (optional impact description)**
-
-Brief explanation of the rule and why it matters. This should be clear and concise, explaining the performance implications.
-
-**Incorrect (description of what's wrong):**
-
-```typescript
-// Bad code example here
-const bad = example();
-```
-
-**Correct (description of what's right):**
-
-```typescript
-// Good code example here
-const good = example();
-```
-
-Reference: [Link to documentation or resource](https://example.com)

.agent/skills/react-best-practices/rules/async-api-routes.md

@@ -1,35 +0,0 @@
----
-title: Prevent Waterfall Chains in API Routes
-impact: CRITICAL
-impactDescription: 2-10× improvement
-tags: api-routes, server-actions, waterfalls, parallelization
----
-
-## Prevent Waterfall Chains in API Routes
-
-In API routes and Server Actions, start independent operations immediately, even if you don't await them yet.
-
-**Incorrect (config waits for auth, data waits for both):**
-
-```typescript
-export async function GET(request: Request) {
-  const session = await auth();
-  const config = await fetchConfig();
-  const data = await fetchData(session.user.id);
-  return Response.json({ data, config });
-}
-```
-
-**Correct (auth and config start immediately):**
-
-```typescript
-export async function GET(request: Request) {
-  const sessionPromise = auth();
-  const configPromise = fetchConfig();
-  const session = await sessionPromise;
-  const [config, data] = await Promise.all([configPromise, fetchData(session.user.id)]);
-  return Response.json({ data, config });
-}
-```
-
-For operations with more complex dependency chains, use `better-all` to automatically maximize parallelism (see Dependency-Based Parallelization).

.agent/skills/react-best-practices/rules/async-defer-await.md

@@ -1,80 +0,0 @@
----
-title: Defer Await Until Needed
-impact: HIGH
-impactDescription: avoids blocking unused code paths
-tags: async, await, conditional, optimization
----
-
-## Defer Await Until Needed
-
-Move `await` operations into the branches where they're actually used to avoid blocking code paths that don't need them.
-
-**Incorrect (blocks both branches):**
-
-```typescript
-async function handleRequest(userId: string, skipProcessing: boolean) {
-  const userData = await fetchUserData(userId);
-
-  if (skipProcessing) {
-    // Returns immediately but still waited for userData
-    return { skipped: true };
-  }
-
-  // Only this branch uses userData
-  return processUserData(userData);
-}
-```
-
-**Correct (only blocks when needed):**
-
-```typescript
-async function handleRequest(userId: string, skipProcessing: boolean) {
-  if (skipProcessing) {
-    // Returns immediately without waiting
-    return { skipped: true };
-  }
-
-  // Fetch only when needed
-  const userData = await fetchUserData(userId);
-  return processUserData(userData);
-}
-```
-
-**Another example (early return optimization):**
-
-```typescript
-// Incorrect: always fetches permissions
-async function updateResource(resourceId: string, userId: string) {
-  const permissions = await fetchPermissions(userId)
-  const resource = await getResource(resourceId)
-
-  if (!resource) {
-    return { error: 'Not found' }
-  }
-
-  if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
-  }
-
-  return await updateResourceData(resource, permissions)
-}
-
-// Correct: fetches only when needed
-async function updateResource(resourceId: string, userId: string) {
-  const resource = await getResource(resourceId)
-
-  if (!resource) {
-    return { error: 'Not found' }
-  }
-
-  const permissions = await fetchPermissions(userId)
-
-  if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
-  }
-
-  return await updateResourceData(resource, permissions)
-}
-```
-
-This optimization is especially valuable when the skipped branch is frequently taken, or when the deferred operation is expensive.

.agent/skills/react-best-practices/rules/async-dependencies.md

@@ -1,48 +0,0 @@
----
-title: Dependency-Based Parallelization
-impact: CRITICAL
-impactDescription: 2-10× improvement
-tags: async, parallelization, dependencies, better-all
----
-
-## Dependency-Based Parallelization
-
-For operations with partial dependencies, use `better-all` to maximize parallelism. It automatically starts each task at the earliest possible moment.
-
-**Incorrect (profile waits for config unnecessarily):**
-
-```typescript
-const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
-const profile = await fetchProfile(user.id);
-```
-
-**Correct (config and profile run in parallel):**
-
-```typescript
-import { all } from "better-all";
-
-const { user, config, profile } = await all({
-  async user() {
-    return fetchUser();
-  },
-  async config() {
-    return fetchConfig();
-  },
-  async profile() {
-    return fetchProfile((await this.$.user).id);
-  },
-});
-```
-
-**Alternative without extra dependencies:**
-
-We can also create all the promises first, and do `Promise.all()` at the end.
-
-```typescript
-const userPromise = fetchUser();
-const profilePromise = userPromise.then((user) => fetchProfile(user.id));
-
-const [user, config, profile] = await Promise.all([userPromise, fetchConfig(), profilePromise]);
-```
-
-Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)

.agent/skills/react-best-practices/rules/async-parallel.md

@@ -1,24 +0,0 @@
----
-title: Promise.all() for Independent Operations
-impact: CRITICAL
-impactDescription: 2-10× improvement
-tags: async, parallelization, promises, waterfalls
----
-
-## Promise.all() for Independent Operations
-
-When async operations have no interdependencies, execute them concurrently using `Promise.all()`.
-
-**Incorrect (sequential execution, 3 round trips):**
-
-```typescript
-const user = await fetchUser();
-const posts = await fetchPosts();
-const comments = await fetchComments();
-```
-
-**Correct (parallel execution, no waterfall):**
-
-```typescript
-const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
-```

.agent/skills/react-best-practices/rules/async-suspense-boundaries.md

@@ -1,99 +0,0 @@
----
-title: Strategic Suspense Boundaries
-impact: HIGH
-impactDescription: faster initial paint
-tags: async, suspense, streaming, layout-shift
----
-
-## Strategic Suspense Boundaries
-
-Instead of awaiting data in async components before returning JSX, use Suspense boundaries to show the wrapper UI faster while data loads.
-
-**Incorrect (wrapper blocked by data fetching):**
-
-```tsx
-async function Page() {
-  const data = await fetchData(); // Blocks entire page
-
-  return (
-    <div>
-      <div>Sidebar</div>
-      <div>Header</div>
-      <div>
-        <DataDisplay data={data} />
-      </div>
-      <div>Footer</div>
-    </div>
-  );
-}
-```
-
-The entire layout waits for data even though only the middle section needs it.
-
-**Correct (wrapper shows immediately, data streams in):**
-
-```tsx
-function Page() {
-  return (
-    <div>
-      <div>Sidebar</div>
-      <div>Header</div>
-      <div>
-        <Suspense fallback={<Skeleton />}>
-          <DataDisplay />
-        </Suspense>
-      </div>
-      <div>Footer</div>
-    </div>
-  );
-}
-
-async function DataDisplay() {
-  const data = await fetchData(); // Only blocks this component
-  return <div>{data.content}</div>;
-}
-```
-
-Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
-
-**Alternative (share promise across components):**
-
-```tsx
-function Page() {
-  // Start fetch immediately, but don't await
-  const dataPromise = fetchData();
-
-  return (
-    <div>
-      <div>Sidebar</div>
-      <div>Header</div>
-      <Suspense fallback={<Skeleton />}>
-        <DataDisplay dataPromise={dataPromise} />
-        <DataSummary dataPromise={dataPromise} />
-      </Suspense>
-      <div>Footer</div>
-    </div>
-  );
-}
-
-function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise); // Unwraps the promise
-  return <div>{data.content}</div>;
-}
-
-function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise); // Reuses the same promise
-  return <div>{data.summary}</div>;
-}
-```
-
-Both components share the same promise, so only one fetch occurs. Layout renders immediately while both components wait together.
-
-**When NOT to use this pattern:**
-
-- Critical data needed for layout decisions (affects positioning)
-- SEO-critical content above the fold
-- Small, fast queries where suspense overhead isn't worth it
-- When you want to avoid layout shift (loading → content jump)
-
-**Trade-off:** Faster initial paint vs potential layout shift. Choose based on your UX priorities.

.agent/skills/react-best-practices/rules/bundle-barrel-imports.md

@@ -1,62 +0,0 @@
----
-title: Avoid Barrel File Imports
-impact: CRITICAL
-impactDescription: 200-800ms import cost, slow builds
-tags: bundle, imports, tree-shaking, barrel-files, performance
----
-
-## Avoid Barrel File Imports
-
-Import directly from source files instead of barrel files to avoid loading thousands of unused modules. **Barrel files** are entry points that re-export multiple modules (e.g., `index.js` that does `export * from './module'`).
-
-Popular icon and component libraries can have **up to 10,000 re-exports** in their entry file. For many React packages, **it takes 200-800ms just to import them**, affecting both development speed and production cold starts.
-
-**Why tree-shaking doesn't help:** When a library is marked as external (not bundled), the bundler can't optimize it. If you bundle it to enable tree-shaking, builds become substantially slower analyzing the entire module graph.
-
-**Incorrect (imports entire library):**
-
-```tsx
-// Loads 1,583 modules, takes ~2.8s extra in dev
-// Runtime cost: 200-800ms on every cold start
-
-import { Button, TextField } from "@mui/material";
-import { Check, Menu, X } from "lucide-react";
-
-// Loads 2,225 modules, takes ~4.2s extra in dev
-```
-
-**Correct (imports only what you need):**
-
-```tsx
-// Loads only 3 modules (~2KB vs ~1MB)
-
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Check from "lucide-react/dist/esm/icons/check";
-import Menu from "lucide-react/dist/esm/icons/menu";
-import X from "lucide-react/dist/esm/icons/x";
-
-// Loads only what you use
-```
-
-**Alternative (Next.js 13.5+):**
-
-```js
-// Then you can keep the ergonomic barrel imports:
-import { Check, Menu, X } from "lucide-react";
-
-// next.config.js - use optimizePackageImports
-module.exports = {
-  experimental: {
-    optimizePackageImports: ["lucide-react", "@mui/material"],
-  },
-};
-
-// Automatically transformed to direct imports at build time
-```
-
-Direct imports provide 15-70% faster dev boot, 28% faster builds, 40% faster cold starts, and significantly faster HMR.
-
-Libraries commonly affected: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
-
-Reference: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

.agent/skills/react-best-practices/rules/bundle-conditional.md

@@ -1,35 +0,0 @@
----
-title: Conditional Module Loading
-impact: HIGH
-impactDescription: loads large data only when needed
-tags: bundle, conditional-loading, lazy-loading
----
-
-## Conditional Module Loading
-
-Load large data or modules only when a feature is activated.
-
-**Example (lazy-load animation frames):**
-
-```tsx
-function AnimationPlayer({
-  enabled,
-  setEnabled,
-}: {
-  enabled: boolean;
-  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
-}) {
-  const [frames, setFrames] = useState<Frame[] | null>(null);
-
-  useEffect(() => {
-    if (enabled && !frames && typeof window !== "undefined") {
-      import("./animation-frames.js").then((mod) => setFrames(mod.frames)).catch(() => setEnabled(false));
-    }
-  }, [enabled, frames, setEnabled]);
-
-  if (!frames) return <Skeleton />;
-  return <Canvas frames={frames} />;
-}
-```
-
-The `typeof window !== 'undefined'` check prevents bundling this module for SSR, optimizing server bundle size and build speed.

.agent/skills/react-best-practices/rules/bundle-defer-third-party.md

@@ -1,46 +0,0 @@
----
-title: Defer Non-Critical Third-Party Libraries
-impact: MEDIUM
-impactDescription: loads after hydration
-tags: bundle, third-party, analytics, defer
----
-
-## Defer Non-Critical Third-Party Libraries
-
-Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
-
-**Incorrect (blocks initial bundle):**
-
-```tsx
-import { Analytics } from "@vercel/analytics/react";
-
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        {children}
-        <Analytics />
-      </body>
-    </html>
-  );
-}
-```
-
-**Correct (loads after hydration):**
-
-```tsx
-import dynamic from "next/dynamic";
-
-const Analytics = dynamic(() => import("@vercel/analytics/react").then((m) => m.Analytics), { ssr: false });
-
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        {children}
-        <Analytics />
-      </body>
-    </html>
-  );
-}
-```

.agent/skills/react-best-practices/rules/bundle-dynamic-imports.md

@@ -1,32 +0,0 @@
----
-title: Dynamic Imports for Heavy Components
-impact: CRITICAL
-impactDescription: directly affects TTI and LCP
-tags: bundle, dynamic-import, code-splitting, next-dynamic
----
-
-## Dynamic Imports for Heavy Components
-
-Use `next/dynamic` to lazy-load large components not needed on initial render.
-
-**Incorrect (Monaco bundles with main chunk ~300KB):**
-
-```tsx
-import { MonacoEditor } from "./monaco-editor";
-
-function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />;
-}
-```
-
-**Correct (Monaco loads on demand):**
-
-```tsx
-import dynamic from "next/dynamic";
-
-const MonacoEditor = dynamic(() => import("./monaco-editor").then((m) => m.MonacoEditor), { ssr: false });
-
-function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />;
-}
-```

.agent/skills/react-best-practices/rules/bundle-preload.md

@@ -1,44 +0,0 @@
----
-title: Preload Based on User Intent
-impact: MEDIUM
-impactDescription: reduces perceived latency
-tags: bundle, preload, user-intent, hover
----
-
-## Preload Based on User Intent
-
-Preload heavy bundles before they're needed to reduce perceived latency.
-
-**Example (preload on hover/focus):**
-
-```tsx
-function EditorButton({ onClick }: { onClick: () => void }) {
-  const preload = () => {
-    if (typeof window !== "undefined") {
-      void import("./monaco-editor");
-    }
-  };
-
-  return (
-    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
-      Open Editor
-    </button>
-  );
-}
-```
-
-**Example (preload when feature flag is enabled):**
-
-```tsx
-function FlagsProvider({ children, flags }: Props) {
-  useEffect(() => {
-    if (flags.editorEnabled && typeof window !== "undefined") {
-      void import("./monaco-editor").then((mod) => mod.init());
-    }
-  }, [flags.editorEnabled]);
-
-  return <FlagsContext.Provider value={flags}>{children}</FlagsContext.Provider>;
-}
-```
-
-The `typeof window !== 'undefined'` check prevents bundling preloaded modules for SSR, optimizing server bundle size and build speed.

.agent/skills/react-best-practices/rules/client-localstorage-schema.md

@@ -1,74 +0,0 @@
----
-title: Version and Minimize localStorage Data
-impact: MEDIUM
-impactDescription: prevents schema conflicts, reduces storage size
-tags: client, localStorage, storage, versioning, data-minimization
----
-
-## Version and Minimize localStorage Data
-
-Add version prefix to keys and store only needed fields. Prevents schema conflicts and accidental storage of sensitive data.
-
-**Incorrect:**
-
-```typescript
-// No version, stores everything, no error handling
-localStorage.setItem("userConfig", JSON.stringify(fullUserObject));
-const data = localStorage.getItem("userConfig");
-```
-
-**Correct:**
-
-```typescript
-const VERSION = "v2";
-
-function saveConfig(config: { theme: string; language: string }) {
-  try {
-    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config));
-  } catch {
-    // Throws in incognito/private browsing, quota exceeded, or disabled
-  }
-}
-
-function loadConfig() {
-  try {
-    const data = localStorage.getItem(`userConfig:${VERSION}`);
-    return data ? JSON.parse(data) : null;
-  } catch {
-    return null;
-  }
-}
-
-// Migration from v1 to v2
-function migrate() {
-  try {
-    const v1 = localStorage.getItem("userConfig:v1");
-    if (v1) {
-      const old = JSON.parse(v1);
-      saveConfig({ theme: old.darkMode ? "dark" : "light", language: old.lang });
-      localStorage.removeItem("userConfig:v1");
-    }
-  } catch {}
-}
-```
-
-**Store minimal fields from server responses:**
-
-```typescript
-// User object has 20+ fields, only store what UI needs
-function cachePrefs(user: FullUser) {
-  try {
-    localStorage.setItem(
-      "prefs:v1",
-      JSON.stringify({
-        theme: user.preferences.theme,
-        notifications: user.preferences.notifications,
-      })
-    );
-  } catch {}
-}
-```
-
-**Always wrap in try-catch:** `getItem()` and `setItem()` throw in incognito/private browsing (Safari, Firefox), when quota exceeded, or when disabled.
-
-**Benefits:** Schema evolution via versioning, reduced storage size, prevents storing tokens/PII/internal flags.

.agent/skills/react-best-practices/rules/client-passive-event-listeners.md

@@ -1,48 +0,0 @@
----
-title: Use Passive Event Listeners for Scrolling Performance
-impact: MEDIUM
-impactDescription: eliminates scroll delay caused by event listeners
-tags: client, event-listeners, scrolling, performance, touch, wheel
----
-
-## Use Passive Event Listeners for Scrolling Performance
-
-Add `{ passive: true }` to touch and wheel event listeners to enable immediate scrolling. Browsers normally wait for listeners to finish to check if `preventDefault()` is called, causing scroll delay.
-
-**Incorrect:**
-
-```typescript
-useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
-
-  document.addEventListener("touchstart", handleTouch);
-  document.addEventListener("wheel", handleWheel);
-
-  return () => {
-    document.removeEventListener("touchstart", handleTouch);
-    document.removeEventListener("wheel", handleWheel);
-  };
-}, []);
-```
-
-**Correct:**
-
-```typescript
-useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
-
-  document.addEventListener("touchstart", handleTouch, { passive: true });
-  document.addEventListener("wheel", handleWheel, { passive: true });
-
-  return () => {
-    document.removeEventListener("touchstart", handleTouch);
-    document.removeEventListener("wheel", handleWheel);
-  };
-}, []);
-```
-
-**Use passive when:** tracking/analytics, logging, any listener that doesn't call `preventDefault()`.
-
-**Don't use passive when:** implementing custom swipe gestures, custom zoom controls, or any listener that needs `preventDefault()`.

.agent/skills/react-best-practices/rules/client-swr-dedup.md

@@ -1,56 +0,0 @@
----
-title: Use SWR for Automatic Deduplication
-impact: MEDIUM-HIGH
-impactDescription: automatic deduplication
-tags: client, swr, deduplication, data-fetching
----
-
-## Use SWR for Automatic Deduplication
-
-SWR enables request deduplication, caching, and revalidation across component instances.
-
-**Incorrect (no deduplication, each instance fetches):**
-
-```tsx
-function UserList() {
-  const [users, setUsers] = useState([]);
-  useEffect(() => {
-    fetch("/api/users")
-      .then((r) => r.json())
-      .then(setUsers);
-  }, []);
-}
-```
-
-**Correct (multiple instances share one request):**
-
-```tsx
-import useSWR from "swr";
-
-function UserList() {
-  const { data: users } = useSWR("/api/users", fetcher);
-}
-```
-
-**For immutable data:**
-
-```tsx
-import { useImmutableSWR } from "@/lib/swr";
-
-function StaticContent() {
-  const { data } = useImmutableSWR("/api/config", fetcher);
-}
-```
-
-**For mutations:**
-
-```tsx
-import { useSWRMutation } from "swr/mutation";
-
-function UpdateButton() {
-  const { trigger } = useSWRMutation("/api/user", updateUser);
-  return <button onClick={() => trigger()}>Update</button>;
-}
-```
-
-Reference: [https://swr.vercel.app](https://swr.vercel.app)

.agent/skills/react-best-practices/rules/rerender-defer-reads.md

@@ -1,39 +0,0 @@
----
-title: Defer State Reads to Usage Point
-impact: MEDIUM
-impactDescription: avoids unnecessary subscriptions
-tags: rerender, searchParams, localStorage, optimization
----
-
-## Defer State Reads to Usage Point
-
-Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.
-
-**Incorrect (subscribes to all searchParams changes):**
-
-```tsx
-function ShareButton({ chatId }: { chatId: string }) {
-  const searchParams = useSearchParams();
-
-  const handleShare = () => {
-    const ref = searchParams.get("ref");
-    shareChat(chatId, { ref });
-  };
-
-  return <button onClick={handleShare}>Share</button>;
-}
-```
-
-**Correct (reads on demand, no subscription):**
-
-```tsx
-function ShareButton({ chatId }: { chatId: string }) {
-  const handleShare = () => {
-    const params = new URLSearchParams(window.location.search);
-    const ref = params.get("ref");
-    shareChat(chatId, { ref });
-  };
-
-  return <button onClick={handleShare}>Share</button>;
-}
-```

.agent/skills/react-best-practices/rules/rerender-dependencies.md

@@ -1,45 +0,0 @@
----
-title: Narrow Effect Dependencies
-impact: LOW
-impactDescription: minimizes effect re-runs
-tags: rerender, useEffect, dependencies, optimization
----
-
-## Narrow Effect Dependencies
-
-Specify primitive dependencies instead of objects to minimize effect re-runs.
-
-**Incorrect (re-runs on any user field change):**
-
-```tsx
-useEffect(() => {
-  console.log(user.id);
-}, [user]);
-```
-
-**Correct (re-runs only when id changes):**
-
-```tsx
-useEffect(() => {
-  console.log(user.id);
-}, [user.id]);
-```
-
-**For derived state, compute outside effect:**
-
-```tsx
-// Incorrect: runs on width=767, 766, 765...
-useEffect(() => {
-  if (width < 768) {
-    enableMobileMode();
-  }
-}, [width]);
-
-// Correct: runs only on boolean transition
-const isMobile = width < 768;
-useEffect(() => {
-  if (isMobile) {
-    enableMobileMode();
-  }
-}, [isMobile]);
-```

.agent/skills/react-best-practices/rules/rerender-derived-state-no-effect.md

@@ -1,40 +0,0 @@
----
-title: Calculate Derived State During Rendering
-impact: MEDIUM
-impactDescription: avoids redundant renders and state drift
-tags: rerender, derived-state, useEffect, state
----
-
-## Calculate Derived State During Rendering
-
-If a value can be computed from current props/state, do not store it in state or update it in an effect. Derive it during render to avoid extra renders and state drift. Do not set state in effects solely in response to prop changes; prefer derived values or keyed resets instead.
-
-**Incorrect (redundant state and effect):**
-
-```tsx
-function Form() {
-  const [firstName, setFirstName] = useState("First");
-  const [lastName, setLastName] = useState("Last");
-  const [fullName, setFullName] = useState("");
-
-  useEffect(() => {
-    setFullName(firstName + " " + lastName);
-  }, [firstName, lastName]);
-
-  return <p>{fullName}</p>;
-}
-```
-
-**Correct (derive during render):**
-
-```tsx
-function Form() {
-  const [firstName, setFirstName] = useState("First");
-  const [lastName, setLastName] = useState("Last");
-  const fullName = firstName + " " + lastName;
-
-  return <p>{fullName}</p>;
-}
-```
-
-References: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)

.agent/skills/react-best-practices/rules/rerender-derived-state.md

@@ -1,29 +0,0 @@
----
-title: Subscribe to Derived State
-impact: MEDIUM
-impactDescription: reduces re-render frequency
-tags: rerender, derived-state, media-query, optimization
----
-
-## Subscribe to Derived State
-
-Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
-
-**Incorrect (re-renders on every pixel change):**
-
-```tsx
-function Sidebar() {
-  const width = useWindowWidth(); // updates continuously
-  const isMobile = width < 768;
-  return <nav className={isMobile ? "mobile" : "desktop"} />;
-}
-```
-
-**Correct (re-renders only when boolean changes):**
-
-```tsx
-function Sidebar() {
-  const isMobile = useMediaQuery("(max-width: 767px)");
-  return <nav className={isMobile ? "mobile" : "desktop"} />;
-}
-```

.agent/skills/react-best-practices/rules/rerender-functional-setstate.md

@@ -1,77 +0,0 @@
----
-title: Use Functional setState Updates
-impact: MEDIUM
-impactDescription: prevents stale closures and unnecessary callback recreations
-tags: react, hooks, useState, useCallback, callbacks, closures
----
-
-## Use Functional setState Updates
-
-When updating state based on the current state value, use the functional update form of setState instead of directly referencing the state variable. This prevents stale closures, eliminates unnecessary dependencies, and creates stable callback references.
-
-**Incorrect (requires state as dependency):**
-
-```tsx
-function TodoList() {
-  const [items, setItems] = useState(initialItems);
-
-  // Callback must depend on items, recreated on every items change
-  const addItems = useCallback(
-    (newItems: Item[]) => {
-      setItems([...items, ...newItems]);
-    },
-    [items]
-  ); // ❌ items dependency causes recreations
-
-  // Risk of stale closure if dependency is forgotten
-  const removeItem = useCallback((id: string) => {
-    setItems(items.filter((item) => item.id !== id));
-  }, []); // ❌ Missing items dependency - will use stale items!
-
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
-}
-```
-
-The first callback is recreated every time `items` changes, which can cause child components to re-render unnecessarily. The second callback has a stale closure bug—it will always reference the initial `items` value.
-
-**Correct (stable callbacks, no stale closures):**
-
-```tsx
-function TodoList() {
-  const [items, setItems] = useState(initialItems);
-
-  // Stable callback, never recreated
-  const addItems = useCallback((newItems: Item[]) => {
-    setItems((curr) => [...curr, ...newItems]);
-  }, []); // ✅ No dependencies needed
-
-  // Always uses latest state, no stale closure risk
-  const removeItem = useCallback((id: string) => {
-    setItems((curr) => curr.filter((item) => item.id !== id));
-  }, []); // ✅ Safe and stable
-
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
-}
-```
-
-**Benefits:**
-
-1. **Stable callback references** - Callbacks don't need to be recreated when state changes
-2. **No stale closures** - Always operates on the latest state value
-3. **Fewer dependencies** - Simplifies dependency arrays and reduces memory leaks
-4. **Prevents bugs** - Eliminates the most common source of React closure bugs
-
-**When to use functional updates:**
-
-- Any setState that depends on the current state value
-- Inside useCallback/useMemo when state is needed
-- Event handlers that reference state
-- Async operations that update state
-
-**When direct updates are fine:**
-
-- Setting state to a static value: `setCount(0)`
-- Setting state from props/arguments only: `setName(newName)`
-- State doesn't depend on previous value
-
-**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler can automatically optimize some cases, but functional updates are still recommended for correctness and to prevent stale closure bugs.

.agent/skills/react-best-practices/rules/rerender-lazy-state-init.md

@@ -1,56 +0,0 @@
----
-title: Use Lazy State Initialization
-impact: MEDIUM
-impactDescription: wasted computation on every render
-tags: react, hooks, useState, performance, initialization
----
-
-## Use Lazy State Initialization
-
-Pass a function to `useState` for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
-
-**Incorrect (runs on every render):**
-
-```tsx
-function FilteredList({ items }: { items: Item[] }) {
-  // buildSearchIndex() runs on EVERY render, even after initialization
-  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items));
-  const [query, setQuery] = useState("");
-
-  // When query changes, buildSearchIndex runs again unnecessarily
-  return <SearchResults index={searchIndex} query={query} />;
-}
-
-function UserProfile() {
-  // JSON.parse runs on every render
-  const [settings, setSettings] = useState(JSON.parse(localStorage.getItem("settings") || "{}"));
-
-  return <SettingsForm settings={settings} onChange={setSettings} />;
-}
-```
-
-**Correct (runs only once):**
-
-```tsx
-function FilteredList({ items }: { items: Item[] }) {
-  // buildSearchIndex() runs ONLY on initial render
-  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items));
-  const [query, setQuery] = useState("");
-
-  return <SearchResults index={searchIndex} query={query} />;
-}
-
-function UserProfile() {
-  // JSON.parse runs only on initial render
-  const [settings, setSettings] = useState(() => {
-    const stored = localStorage.getItem("settings");
-    return stored ? JSON.parse(stored) : {};
-  });
-
-  return <SettingsForm settings={settings} onChange={setSettings} />;
-}
-```
-
-Use lazy initialization when computing initial values from localStorage/sessionStorage, building data structures (indexes, maps), reading from the DOM, or performing heavy transformations.
-
-For simple primitives (`useState(0)`), direct references (`useState(props.value)`), or cheap literals (`useState({})`), the function form is unnecessary.

.agent/skills/react-best-practices/rules/rerender-memo-with-default-value.md

@@ -1,36 +0,0 @@
----
-title: Extract Default Non-primitive Parameter Value from Memoized Component to Constant
-impact: MEDIUM
-impactDescription: restores memoization by using a constant for default value
-tags: rerender, memo, optimization
----
-
-## Extract Default Non-primitive Parameter Value from Memoized Component to Constant
-
-When memoized component has a default value for some non-primitive optional parameter, such as an array, function, or object, calling the component without that parameter results in broken memoization. This is because new value instances are created on every rerender, and they do not pass strict equality comparison in `memo()`.
-
-To address this issue, extract the default value into a constant.
-
-**Incorrect (`onClick` has different values on every rerender):**
-
-```tsx
-const UserAvatar = memo(function UserAvatar({ onClick = () => {} }: { onClick?: () => void }) {
-  // ...
-})
-
-// Used without optional onClick
-<UserAvatar />
-```
-
-**Correct (stable default value):**
-
-```tsx
-const NOOP = () => {};
-
-const UserAvatar = memo(function UserAvatar({ onClick = NOOP }: { onClick?: () => void }) {
-  // ...
-})
-
-// Used without optional onClick
-<UserAvatar />
-```

.agent/skills/react-best-practices/rules/rerender-memo.md

@@ -1,44 +0,0 @@
----
-title: Extract to Memoized Components
-impact: MEDIUM
-impactDescription: enables early returns
-tags: rerender, memo, useMemo, optimization
----
-
-## Extract to Memoized Components
-
-Extract expensive work into memoized components to enable early returns before computation.
-
-**Incorrect (computes avatar even when loading):**
-
-```tsx
-function Profile({ user, loading }: Props) {
-  const avatar = useMemo(() => {
-    const id = computeAvatarId(user);
-    return <Avatar id={id} />;
-  }, [user]);
-
-  if (loading) return <Skeleton />;
-  return <div>{avatar}</div>;
-}
-```
-
-**Correct (skips computation when loading):**
-
-```tsx
-const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
-  const id = useMemo(() => computeAvatarId(user), [user]);
-  return <Avatar id={id} />;
-});
-
-function Profile({ user, loading }: Props) {
-  if (loading) return <Skeleton />;
-  return (
-    <div>
-      <UserAvatar user={user} />
-    </div>
-  );
-}
-```
-
-**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.

.agent/skills/react-best-practices/rules/rerender-move-effect-to-event.md

@@ -1,45 +0,0 @@
----
-title: Put Interaction Logic in Event Handlers
-impact: MEDIUM
-impactDescription: avoids effect re-runs and duplicate side effects
-tags: rerender, useEffect, events, side-effects, dependencies
----
-
-## Put Interaction Logic in Event Handlers
-
-If a side effect is triggered by a specific user action (submit, click, drag), run it in that event handler. Do not model the action as state + effect; it makes effects re-run on unrelated changes and can duplicate the action.
-
-**Incorrect (event modeled as state + effect):**
-
-```tsx
-function Form() {
-  const [submitted, setSubmitted] = useState(false);
-  const theme = useContext(ThemeContext);
-
-  useEffect(() => {
-    if (submitted) {
-      post("/api/register");
-      showToast("Registered", theme);
-    }
-  }, [submitted, theme]);
-
-  return <button onClick={() => setSubmitted(true)}>Submit</button>;
-}
-```
-
-**Correct (do it in the handler):**
-
-```tsx
-function Form() {
-  const theme = useContext(ThemeContext);
-
-  function handleSubmit() {
-    post("/api/register");
-    showToast("Registered", theme);
-  }
-
-  return <button onClick={handleSubmit}>Submit</button>;
-}
-```
-
-Reference: [Should this code move to an event handler?](https://react.dev/learn/removing-effect-dependencies#should-this-code-move-to-an-event-handler)

.agent/skills/react-best-practices/rules/rerender-transitions.md

@@ -1,40 +0,0 @@
----
-title: Use Transitions for Non-Urgent Updates
-impact: MEDIUM
-impactDescription: maintains UI responsiveness
-tags: rerender, transitions, startTransition, performance
----
-
-## Use Transitions for Non-Urgent Updates
-
-Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
-
-**Incorrect (triggers high-frequency re-renders):**
-
-```tsx
-function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0);
-  useEffect(() => {
-    const handler = () => setScrollY(window.scrollY);
-    window.addEventListener("scroll", handler, { passive: true });
-    return () => window.removeEventListener("scroll", handler);
-  }, []);
-}
-```
-
-**Correct (non-blocking updates):**
-
-```tsx
-import { startTransition } from "react";
-
-function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0);
-  useEffect(() => {
-    const handler = () => {
-      startTransition(() => setScrollY(window.scrollY));
-    };
-    window.addEventListener("scroll", handler, { passive: true });
-    return () => window.removeEventListener("scroll", handler);
-  }, []);
-}
-```

.agent/skills/react-best-practices/rules/rerender-use-ref-transient-values.md

@@ -1,73 +0,0 @@
----
-title: Use useRef for Transient Values
-impact: MEDIUM
-impactDescription: avoids unnecessary re-renders on frequent updates
-tags: rerender, useref, state, performance
----
-
-## Use useRef for Transient Values
-
-When a value changes frequently and you don't want a re-render on every update (e.g., mouse trackers, intervals, transient flags), store it in `useRef` instead of `useState`. Keep component state for UI; use refs for temporary DOM-adjacent values. Updating a ref does not trigger a re-render.
-
-**Incorrect (renders every update):**
-
-```tsx
-function Tracker() {
-  const [lastX, setLastX] = useState(0);
-
-  useEffect(() => {
-    const onMove = (e: MouseEvent) => setLastX(e.clientX);
-    window.addEventListener("mousemove", onMove);
-    return () => window.removeEventListener("mousemove", onMove);
-  }, []);
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: lastX,
-        width: 8,
-        height: 8,
-        background: "black",
-      }}
-    />
-  );
-}
-```
-
-**Correct (no re-render for tracking):**
-
-```tsx
-function Tracker() {
-  const lastXRef = useRef(0);
-  const dotRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const onMove = (e: MouseEvent) => {
-      lastXRef.current = e.clientX;
-      const node = dotRef.current;
-      if (node) {
-        node.style.transform = `translateX(${e.clientX}px)`;
-      }
-    };
-    window.addEventListener("mousemove", onMove);
-    return () => window.removeEventListener("mousemove", onMove);
-  }, []);
-
-  return (
-    <div
-      ref={dotRef}
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: 8,
-        height: 8,
-        background: "black",
-        transform: "translateX(0px)",
-      }}
-    />
-  );
-}
-```

.agent/skills/react-best-practices/rules/server-after-nonblocking.md

@@ -1,73 +0,0 @@
----
-title: Use after() for Non-Blocking Operations
-impact: MEDIUM
-impactDescription: faster response times
-tags: server, async, logging, analytics, side-effects
----
-
-## Use after() for Non-Blocking Operations
-
-Use Next.js's `after()` to schedule work that should execute after a response is sent. This prevents logging, analytics, and other side effects from blocking the response.
-
-**Incorrect (blocks response):**
-
-```tsx
-import { logUserAction } from "@/app/utils";
-
-export async function POST(request: Request) {
-  // Perform mutation
-  await updateDatabase(request);
-
-  // Logging blocks the response
-  const userAgent = request.headers.get("user-agent") || "unknown";
-  await logUserAction({ userAgent });
-
-  return new Response(JSON.stringify({ status: "success" }), {
-    status: 200,
-    headers: { "Content-Type": "application/json" },
-  });
-}
-```
-
-**Correct (non-blocking):**
-
-```tsx
-import { cookies, headers } from "next/headers";
-import { after } from "next/server";
-import { logUserAction } from "@/app/utils";
-
-export async function POST(request: Request) {
-  // Perform mutation
-  await updateDatabase(request);
-
-  // Log after response is sent
-  after(async () => {
-    const userAgent = (await headers()).get("user-agent") || "unknown";
-    const sessionCookie = (await cookies()).get("session-id")?.value || "anonymous";
-
-    logUserAction({ sessionCookie, userAgent });
-  });
-
-  return new Response(JSON.stringify({ status: "success" }), {
-    status: 200,
-    headers: { "Content-Type": "application/json" },
-  });
-}
-```
-
-The response is sent immediately while logging happens in the background.
-
-**Common use cases:**
-
-- Analytics tracking
-- Audit logging
-- Sending notifications
-- Cache invalidation
-- Cleanup tasks
-
-**Important notes:**
-
-- `after()` runs even if the response fails or redirects
-- Works in Server Actions, Route Handlers, and Server Components
-
-Reference: [https://nextjs.org/docs/app/api-reference/functions/after](https://nextjs.org/docs/app/api-reference/functions/after)

.agent/skills/react-best-practices/rules/server-auth-actions.md

@@ -1,96 +0,0 @@
----
-title: Authenticate Server Actions Like API Routes
-impact: CRITICAL
-impactDescription: prevents unauthorized access to server mutations
-tags: server, server-actions, authentication, security, authorization
----
-
-## Authenticate Server Actions Like API Routes
-
-**Prevent unauthorized access to server mutations**
-
-Server Actions (functions with `"use server"`) are exposed as public endpoints, just like API routes. Always verify authentication and authorization **inside** each Server Action—do not rely solely on middleware, layout guards, or page-level checks, as Server Actions can be invoked directly.
-
-Next.js documentation explicitly states: "Treat Server Actions with the same security considerations as public-facing API endpoints, and verify if the user is allowed to perform a mutation."
-
-**Incorrect (no authentication check):**
-
-```typescript
-"use server";
-
-export async function deleteUser(userId: string) {
-  // Anyone can call this! No auth check
-  await db.user.delete({ where: { id: userId } });
-  return { success: true };
-}
-```
-
-**Correct (authentication inside the action):**
-
-```typescript
-"use server";
-
-import { verifySession } from "@/lib/auth";
-import { unauthorized } from "@/lib/errors";
-
-export async function deleteUser(userId: string) {
-  // Always check auth inside the action
-  const session = await verifySession();
-
-  if (!session) {
-    throw unauthorized("Must be logged in");
-  }
-
-  // Check authorization too
-  if (session.user.role !== "admin" && session.user.id !== userId) {
-    throw unauthorized("Cannot delete other users");
-  }
-
-  await db.user.delete({ where: { id: userId } });
-  return { success: true };
-}
-```
-
-**With input validation:**
-
-```typescript
-"use server";
-
-import { z } from "zod";
-import { verifySession } from "@/lib/auth";
-
-const updateProfileSchema = z.object({
-  userId: z.string().uuid(),
-  name: z.string().min(1).max(100),
-  email: z.string().email(),
-});
-
-export async function updateProfile(data: unknown) {
-  // Validate input first
-  const validated = updateProfileSchema.parse(data);
-
-  // Then authenticate
-  const session = await verifySession();
-  if (!session) {
-    throw new Error("Unauthorized");
-  }
-
-  // Then authorize
-  if (session.user.id !== validated.userId) {
-    throw new Error("Can only update own profile");
-  }
-
-  // Finally perform the mutation
-  await db.user.update({
-    where: { id: validated.userId },
-    data: {
-      name: validated.name,
-      email: validated.email,
-    },
-  });
-
-  return { success: true };
-}
-```
-
-Reference: [https://nextjs.org/docs/app/guides/authentication](https://nextjs.org/docs/app/guides/authentication)

.agent/skills/react-best-practices/rules/server-cache-lru.md

@@ -1,41 +0,0 @@
----
-title: Cross-Request LRU Caching
-impact: HIGH
-impactDescription: caches across requests
-tags: server, cache, lru, cross-request
----
-
-## Cross-Request LRU Caching
-
-`React.cache()` only works within one request. For data shared across sequential requests (user clicks button A then button B), use an LRU cache.
-
-**Implementation:**
-
-```typescript
-import { LRUCache } from "lru-cache";
-
-const cache = new LRUCache<string, any>({
-  max: 1000,
-  ttl: 5 * 60 * 1000, // 5 minutes
-});
-
-export async function getUser(id: string) {
-  const cached = cache.get(id);
-  if (cached) return cached;
-
-  const user = await db.user.findUnique({ where: { id } });
-  cache.set(id, user);
-  return user;
-}
-
-// Request 1: DB query, result cached
-// Request 2: cache hit, no DB query
-```
-
-Use when sequential user actions hit multiple endpoints needing the same data within seconds.
-
-**With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute):** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache. This means the cache persists across requests without needing external storage like Redis.
-
-**In traditional serverless:** Each invocation runs in isolation, so consider Redis for cross-process caching.
-
-Reference: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)

.agent/skills/react-best-practices/rules/server-cache-react.md

@@ -1,76 +0,0 @@
----
-title: Per-Request Deduplication with React.cache()
-impact: MEDIUM
-impactDescription: deduplicates within request
-tags: server, cache, react-cache, deduplication
----
-
-## Per-Request Deduplication with React.cache()
-
-Use `React.cache()` for server-side request deduplication. Authentication and database queries benefit most.
-
-**Usage:**
-
-```typescript
-import { cache } from "react";
-
-export const getCurrentUser = cache(async () => {
-  const session = await auth();
-  if (!session?.user?.id) return null;
-  return await db.user.findUnique({
-    where: { id: session.user.id },
-  });
-});
-```
-
-Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
-
-**Avoid inline objects as arguments:**
-
-`React.cache()` uses shallow equality (`Object.is`) to determine cache hits. Inline objects create new references each call, preventing cache hits.
-
-**Incorrect (always cache miss):**
-
-```typescript
-const getUser = cache(async (params: { uid: number }) => {
-  return await db.user.findUnique({ where: { id: params.uid } });
-});
-
-// Each call creates new object, never hits cache
-getUser({ uid: 1 });
-getUser({ uid: 1 }); // Cache miss, runs query again
-```
-
-**Correct (cache hit):**
-
-```typescript
-const getUser = cache(async (uid: number) => {
-  return await db.user.findUnique({ where: { id: uid } });
-});
-
-// Primitive args use value equality
-getUser(1);
-getUser(1); // Cache hit, returns cached result
-```
-
-If you must pass objects, pass the same reference:
-
-```typescript
-const params = { uid: 1 };
-getUser(params); // Query runs
-getUser(params); // Cache hit (same reference)
-```
-
-**Next.js-Specific Note:**
-
-In Next.js, the `fetch` API is automatically extended with request memoization. Requests with the same URL and options are automatically deduplicated within a single request, so you don't need `React.cache()` for `fetch` calls. However, `React.cache()` is still essential for other async tasks:
-
-- Database queries (Prisma, Drizzle, etc.)
-- Heavy computations
-- Authentication checks
-- File system operations
-- Any non-fetch async work
-
-Use `React.cache()` to deduplicate these operations across your component tree.
-
-Reference: [React.cache documentation](https://react.dev/reference/react/cache)

.agent/skills/react-best-practices/rules/server-parallel-fetching.md

@@ -1,83 +0,0 @@
----
-title: Parallel Data Fetching with Component Composition
-impact: CRITICAL
-impactDescription: eliminates server-side waterfalls
-tags: server, rsc, parallel-fetching, composition
----
-
-## Parallel Data Fetching with Component Composition
-
-React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
-
-**Incorrect (Sidebar waits for Page's fetch to complete):**
-
-```tsx
-export default async function Page() {
-  const header = await fetchHeader();
-  return (
-    <div>
-      <div>{header}</div>
-      <Sidebar />
-    </div>
-  );
-}
-
-async function Sidebar() {
-  const items = await fetchSidebarItems();
-  return <nav>{items.map(renderItem)}</nav>;
-}
-```
-
-**Correct (both fetch simultaneously):**
-
-```tsx
-async function Header() {
-  const data = await fetchHeader();
-  return <div>{data}</div>;
-}
-
-async function Sidebar() {
-  const items = await fetchSidebarItems();
-  return <nav>{items.map(renderItem)}</nav>;
-}
-
-export default function Page() {
-  return (
-    <div>
-      <Header />
-      <Sidebar />
-    </div>
-  );
-}
-```
-
-**Alternative with children prop:**
-
-```tsx
-async function Header() {
-  const data = await fetchHeader();
-  return <div>{data}</div>;
-}
-
-async function Sidebar() {
-  const items = await fetchSidebarItems();
-  return <nav>{items.map(renderItem)}</nav>;
-}
-
-function Layout({ children }: { children: ReactNode }) {
-  return (
-    <div>
-      <Header />
-      {children}
-    </div>
-  );
-}
-
-export default function Page() {
-  return (
-    <Layout>
-      <Sidebar />
-    </Layout>
-  );
-}
-```

.agent/skills/react-best-practices/rules/server-serialization.md

@@ -1,38 +0,0 @@
----
-title: Minimize Serialization at RSC Boundaries
-impact: HIGH
-impactDescription: reduces data transfer size
-tags: server, rsc, serialization, props
----
-
-## Minimize Serialization at RSC Boundaries
-
-The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
-
-**Incorrect (serializes all 50 fields):**
-
-```tsx
-async function Page() {
-  const user = await fetchUser(); // 50 fields
-  return <Profile user={user} />;
-}
-
-("use client");
-function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>; // uses 1 field
-}
-```
-
-**Correct (serializes only 1 field):**
-
-```tsx
-async function Page() {
-  const user = await fetchUser();
-  return <Profile name={user.name} />;
-}
-
-("use client");
-function Profile({ name }: { name: string }) {
-  return <div>{name}</div>;
-}
-```

.cursor/commands/create-question.md

@@ -1,352 +0,0 @@
-# Create New Question Element
-
-Use this command to scaffold a new question element component in `packages/survey-ui/src/elements/`.
-
-## Usage
-
-When creating a new question type (e.g., `single-select`, `rating`, `nps`), follow these steps:
-
-1. **Create the component file** `{question-type}.tsx` with this structure:
-
-```typescript
-import * as React from "react";
-import { ElementHeader } from "../components/element-header";
-import { useTextDirection } from "../hooks/use-text-direction";
-import { cn } from "../lib/utils";
-
-interface {QuestionType}Props {
-    /** Unique identifier for the element container */
-    elementId: string;
-    /** The main question or prompt text displayed as the headline */
-    headline: string;
-    /** Optional descriptive text displayed below the headline */
-    description?: string;
-    /** Unique identifier for the input/control group */
-    inputId: string;
-    /** Current value */
-    value?: {ValueType};
-    /** Callback function called when the value changes */
-    onChange: (value: {ValueType}) => void;
-    /** Whether the field is required (shows asterisk indicator) */
-    required?: boolean;
-    /** Error message to display */
-    errorMessage?: string;
-    /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
-    dir?: "ltr" | "rtl" | "auto";
-    /** Whether the controls are disabled */
-    disabled?: boolean;
-    // Add question-specific props here
-}
-
-function {QuestionType}({
-    elementId,
-    headline,
-    description,
-    inputId,
-    value,
-    onChange,
-    required = false,
-    errorMessage,
-    dir = "auto",
-    disabled = false,
-    // ... question-specific props
-}: {QuestionType}Props): React.JSX.Element {
-    // Ensure value is always the correct type (handle undefined/null)
-    const currentValue = value ?? {defaultValue};
-    
-    // Detect text direction from content
-    const detectedDir = useTextDirection({
-        dir,
-        textContent: [headline, description ?? "", /* add other text content from question */],
-    });
-
-    return (
-        <div className="w-full space-y-4" id={elementId} dir={detectedDir}>
-            {/* Headline */}
-            <ElementHeader 
-                headline={headline} 
-                description={description} 
-                required={required} 
-                htmlFor={inputId} 
-            />
-
-            {/* Question-specific controls */}
-            {/* TODO: Add your question-specific UI here */}
-
-            {/* Error message */}
-            {errorMessage && (
-                <div className="text-destructive flex items-center gap-1 text-sm" dir={detectedDir}>
-                    <span>{errorMessage}</span>
-                </div>
-            )}
-        </div>
-    );
-}
-
-export { {QuestionType} };
-export type { {QuestionType}Props };
-```
-
-2. **Create the Storybook file** `{question-type}.stories.tsx`:
-
-```typescript
-import type { Decorator, Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { {QuestionType}, type {QuestionType}Props } from "./{question-type}";
-
-// Styling options for the StylingPlayground story
-interface StylingOptions {
-    // Question styling
-    questionHeadlineFontFamily: string;
-    questionHeadlineFontSize: string;
-    questionHeadlineFontWeight: string;
-    questionHeadlineColor: string;
-    questionDescriptionFontFamily: string;
-    questionDescriptionFontWeight: string;
-    questionDescriptionFontSize: string;
-    questionDescriptionColor: string;
-    // Add component-specific styling options here
-}
-
-type StoryProps = {QuestionType}Props & Partial<StylingOptions>;
-
-const meta: Meta<StoryProps> = {
-    title: "UI-package/Elements/{QuestionType}",
-    component: {QuestionType},
-    parameters: {
-        layout: "centered",
-        docs: {
-            description: {
-                component: "A complete {question type} question element...",
-            },
-        },
-    },
-    tags: ["autodocs"],
-    argTypes: {
-        headline: {
-            control: "text",
-            description: "The main question text",
-            table: { category: "Content" },
-        },
-        description: {
-            control: "text",
-            description: "Optional description or subheader text",
-            table: { category: "Content" },
-        },
-        value: {
-            control: "object",
-            description: "Current value",
-            table: { category: "State" },
-        },
-        required: {
-            control: "boolean",
-            description: "Whether the field is required",
-            table: { category: "Validation" },
-        },
-        errorMessage: {
-            control: "text",
-            description: "Error message to display",
-            table: { category: "Validation" },
-        },
-        dir: {
-            control: { type: "select" },
-            options: ["ltr", "rtl", "auto"],
-            description: "Text direction for RTL support",
-            table: { category: "Layout" },
-        },
-        disabled: {
-            control: "boolean",
-            description: "Whether the controls are disabled",
-            table: { category: "State" },
-        },
-        onChange: {
-            action: "changed",
-            table: { category: "Events" },
-        },
-        // Add question-specific argTypes here
-    },
-};
-
-export default meta;
-type Story = StoryObj<StoryProps>;
-
-// Decorator to apply CSS variables from story args
-const withCSSVariables: Decorator<StoryProps> = (Story, context) => {
-    const args = context.args as StoryProps;
-    const {
-        questionHeadlineFontFamily,
-        questionHeadlineFontSize,
-        questionHeadlineFontWeight,
-        questionHeadlineColor,
-        questionDescriptionFontFamily,
-        questionDescriptionFontSize,
-        questionDescriptionFontWeight,
-        questionDescriptionColor,
-        // Extract component-specific styling options
-    } = args;
-
-    const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
-        "--fb-question-headline-font-family": questionHeadlineFontFamily,
-        "--fb-question-headline-font-size": questionHeadlineFontSize,
-        "--fb-question-headline-font-weight": questionHeadlineFontWeight,
-        "--fb-question-headline-color": questionHeadlineColor,
-        "--fb-question-description-font-family": questionDescriptionFontFamily,
-        "--fb-question-description-font-size": questionDescriptionFontSize,
-        "--fb-question-description-font-weight": questionDescriptionFontWeight,
-        "--fb-question-description-color": questionDescriptionColor,
-        // Add component-specific CSS variables
-    };
-
-    return (
-        <div style={cssVarStyle} className="w-[600px]">
-            <Story />
-        </div>
-    );
-};
-
-export const StylingPlayground: Story = {
-    args: {
-        headline: "Example question?",
-        description: "Example description",
-        // Default styling values
-        questionHeadlineFontFamily: "system-ui, sans-serif",
-        questionHeadlineFontSize: "1.125rem",
-        questionHeadlineFontWeight: "600",
-        questionHeadlineColor: "#1e293b",
-        questionDescriptionFontFamily: "system-ui, sans-serif",
-        questionDescriptionFontSize: "0.875rem",
-        questionDescriptionFontWeight: "400",
-        questionDescriptionColor: "#64748b",
-        // Add component-specific default values
-    },
-    argTypes: {
-        // Question styling argTypes
-        questionHeadlineFontFamily: {
-            control: "text",
-            table: { category: "Question Styling" },
-        },
-        questionHeadlineFontSize: {
-            control: "text",
-            table: { category: "Question Styling" },
-        },
-        questionHeadlineFontWeight: {
-            control: "text",
-            table: { category: "Question Styling" },
-        },
-        questionHeadlineColor: {
-            control: "color",
-            table: { category: "Question Styling" },
-        },
-        questionDescriptionFontFamily: {
-            control: "text",
-            table: { category: "Question Styling" },
-        },
-        questionDescriptionFontSize: {
-            control: "text",
-            table: { category: "Question Styling" },
-        },
-        questionDescriptionFontWeight: {
-            control: "text",
-            table: { category: "Question Styling" },
-        },
-        questionDescriptionColor: {
-            control: "color",
-            table: { category: "Question Styling" },
-        },
-        // Add component-specific argTypes
-    },
-    decorators: [withCSSVariables],
-};
-
-export const Default: Story = {
-    args: {
-        headline: "Example question?",
-        // Add default props
-    },
-};
-
-export const WithDescription: Story = {
-    args: {
-        headline: "Example question?",
-        description: "Example description text",
-    },
-};
-
-export const Required: Story = {
-    args: {
-        headline: "Example question?",
-        required: true,
-    },
-};
-
-export const WithError: Story = {
-    args: {
-        headline: "Example question?",
-        errorMessage: "This field is required",
-        required: true,
-    },
-};
-
-export const Disabled: Story = {
-    args: {
-        headline: "Example question?",
-        disabled: true,
-    },
-};
-
-export const RTL: Story = {
-    args: {
-        headline: "مثال على السؤال؟",
-        description: "مثال على الوصف",
-        // Add RTL-specific props
-    },
-};
-```
-
-3. **Add CSS variables** to `packages/survey-ui/src/styles/globals.css` if needed:
-
-```css
-/* Component-specific CSS variables */
---fb-{component}-{property}: {default-value};
-```
-
-4. **Export from** `packages/survey-ui/src/index.ts`:
-
-```typescript
-export { {QuestionType}, type {QuestionType}Props } from "./elements/{question-type}";
-```
-
-## Key Requirements
-
-- ✅ Always use `ElementHeader` component for headline/description
-- ✅ Always use `useTextDirection` hook for RTL support
-- ✅ Always handle undefined/null values safely (e.g., `Array.isArray(value) ? value : []`)
-- ✅ Always include error message display if applicable
-- ✅ Always support disabled state if applicable
-- ✅ Always add JSDoc comments to props interface
-- ✅ Always create Storybook stories with styling playground
-- ✅ Always export types from component file
-- ✅ Always add to index.ts exports
-
-## Examples
-
-- `open-text.tsx` - Text input/textarea question (string value)
-- `multi-select.tsx` - Multiple checkbox selection (string[] value)
-
-## Checklist
-
-When creating a new question element, verify:
-
-- [ ] Component file created with proper structure
-- [ ] Props interface with JSDoc comments for all props
-- [ ] Uses `ElementHeader` component (don't duplicate header logic)
-- [ ] Uses `useTextDirection` hook for RTL support
-- [ ] Handles undefined/null values safely
-- [ ] Storybook file created with styling playground
-- [ ] Includes common stories: Default, WithDescription, Required, WithError, Disabled, RTL
-- [ ] CSS variables added to `globals.css` if component needs custom styling
-- [ ] Exported from `index.ts` with types
-- [ ] TypeScript types properly exported
-- [ ] Error message display included if applicable
-- [ ] Disabled state supported if applicable
-

.cursor/rules/build-and-deployment.mdc

@@ -0,0 +1,61 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Build & Deployment Best Practices
+
+## Build Process
+
+### Running Builds
+- Use `pnpm build` from project root for full build
+- Monitor for React hooks warnings and fix them immediately
+- Ensure all TypeScript errors are resolved before deployment
+
+### Common Build Issues & Fixes
+
+#### React Hooks Warnings
+- Capture ref values in variables within useEffect cleanup
+- Avoid accessing `.current` directly in cleanup functions
+- Pattern for fixing ref cleanup warnings:
+```typescript
+useEffect(() => {
+  const currentRef = myRef.current;
+  return () => {
+    if (currentRef) {
+      currentRef.cleanup();
+    }
+  };
+}, []);
+```
+
+#### Test Failures During Build
+- Ensure all test mocks include required constants like `SESSION_MAX_AGE`
+- Mock Next.js navigation hooks properly: `useParams`, `useRouter`, `useSearchParams`
+- Remove unused imports and constants from test files
+- Use literal values instead of imported constants when the constant isn't actually needed
+
+### Test Execution
+- Run `pnpm test` to execute all tests
+- Use `pnpm test -- --run filename.test.tsx` for specific test files
+- Fix test failures before merging code
+- Ensure 100% test coverage for new components
+
+### Performance Monitoring
+- Monitor build times and optimize if necessary
+- Watch for memory usage during builds
+- Use proper caching strategies for faster rebuilds
+
+### Deployment Checklist
+1. All tests passing
+2. Build completes without warnings
+3. TypeScript compilation successful
+4. No linter errors
+5. Database migrations applied (if any)
+6. Environment variables configured
+
+### EKS Deployment Considerations
+- Ensure latest code is deployed to all pods
+- Monitor AWS RDS Performance Insights for database issues
+- Verify environment-specific configurations
+- Check pod health and resource usage

.cursor/rules/cache-optimization.mdc

@@ -0,0 +1,415 @@
+---
+description: Caching rules for performance improvements
+globs: 
+alwaysApply: false
+---
+# Cache Optimization Patterns for Formbricks
+
+## Cache Strategy Overview
+
+Formbricks uses a **hybrid caching approach** optimized for enterprise scale:
+
+- **Redis** for persistent cross-request caching  
+- **React `cache()`** for request-level deduplication
+- **NO Next.js `unstable_cache()`** - avoid for reliability
+
+## 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
+
+### 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
+- [apps/web/app/api/v1/client/[environmentId]/environment/lib/data.ts](mdc:apps/web/app/api/v1/client/[environmentId]/environment/lib/data.ts) - Optimized data layer with caching
+
+## Enterprise-Grade Cache Key Patterns
+
+**Always use** the `createCacheKey` utilities from the cache package:
+
+```typescript
+// ✅ Correct patterns
+createCacheKey.environment.state(environmentId)     // "fb:env:abc123:state"
+createCacheKey.organization.billing(organizationId) // "fb:org:xyz789:billing"
+createCacheKey.license.status(organizationId)       // "fb:license:org123:status"
+createCacheKey.user.permissions(userId, orgId)      // "fb:user:456:org:123:permissions"
+
+// ❌ Never use flat keys - collision-prone
+"environment_abc123"
+"user_data_456"
+```
+
+## When to Use Each Cache Type
+
+### Use React `cache()` for Request Deduplication
+```typescript
+// ✅ Prevents multiple calls within same request
+export const getEnterpriseLicense = reactCache(async () => {
+  // Complex license validation logic
+});
+```
+
+### Use `cache.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
+  );
+};
+```
+
+### Use Explicit Redis Cache for Complex Business Logic
+```typescript
+// ✅ Full control for high-stakes endpoints
+export const getEnvironmentState = async (environmentId: string) => {
+  const cached = await environmentStateCache.getEnvironmentState(environmentId);
+  if (cached) return cached;
+  
+  const fresh = await buildComplexState(environmentId);
+  await environmentStateCache.setEnvironmentState(environmentId, fresh);
+  return fresh;
+};
+```
+
+## Caching Decision Framework
+
+### When TO Add Caching
+
+```typescript
+// ✅ Expensive operations that benefit from caching
+- Database queries (>10ms typical)
+- External API calls (>50ms typical)  
+- Complex computations (>5ms)
+- File system operations
+- Heavy data transformations
+
+// Example: Database query with complex joins (TTL in milliseconds)
+export const getEnvironmentWithDetails = withCache(
+  async (environmentId: string) => {
+    return prisma.environment.findUnique({
+      where: { id: environmentId },
+      include: { /* complex joins */ }
+    });
+  },
+  { key: createCacheKey.environment.details(environmentId), ttl: 60 * 30 * 1000 } // 30 minutes
+)();
+```
+
+### When NOT to Add Caching
+
+```typescript
+// ❌ Don't cache these operations - minimal overhead
+- Simple property access (<0.1ms)
+- Basic transformations (<1ms)
+- Functions that just call already-cached functions
+- Pure computation without I/O
+
+// ❌ Bad example: Redundant caching
+const getCachedLicenseFeatures = withCache(
+  async () => {
+    const license = await getEnterpriseLicense(); // Already cached!
+    return license.active ? license.features : null; // Just property access
+  },
+  { key: "license-features", ttl: 1800 * 1000 } // 30 minutes in milliseconds
+);
+
+// ✅ Good example: Simple and efficient
+const getLicenseFeatures = async () => {
+  const license = await getEnterpriseLicense(); // Already cached
+  return license.active ? license.features : null; // 0.1ms overhead
+};
+```
+
+### Computational Overhead Analysis
+
+Before adding caching, analyze the overhead:
+
+```typescript
+// ✅ High overhead - CACHE IT
+- Database queries: ~10-100ms
+- External APIs: ~50-500ms  
+- File I/O: ~5-50ms
+- Complex algorithms: >5ms
+
+// ❌ Low overhead - DON'T CACHE
+- Property access: ~0.001ms
+- Simple lookups: ~0.1ms
+- Basic validation: ~1ms
+- Type checks: ~0.01ms
+
+// Example decision tree:
+const expensiveOperation = async () => {
+  return prisma.query(); // 50ms - CACHE IT
+};
+
+const cheapOperation = (data: any) => {
+  return data.property; // 0.001ms - DON'T CACHE
+};
+```
+
+### Avoid Cache Wrapper Anti-Pattern
+
+```typescript
+// ❌ Don't create wrapper functions just for caching
+const getCachedUserPermissions = withCache(
+  async (userId: string) => getUserPermissions(userId),
+  { key: createCacheKey.user.permissions(userId), ttl: 3600 * 1000 } // 1 hour in milliseconds
+);
+
+// ✅ Add caching directly to the original function
+export const getUserPermissions = withCache(
+  async (userId: string) => {
+    return prisma.user.findUnique({
+      where: { id: userId },
+      include: { permissions: true }
+    });
+  },
+  { key: createCacheKey.user.permissions(userId), ttl: 3600 * 1000 } // 1 hour in milliseconds
+);
+```
+
+## TTL Coordination Strategy
+
+### Multi-Layer Cache Coordination
+For endpoints serving client SDKs, coordinate TTLs across layers:
+
+```typescript
+// Client SDK cache (expiresAt) - longest TTL for fewer requests
+const CLIENT_TTL = 60 * 60;           // 1 hour (seconds for client)
+
+// Server Redis cache - shorter TTL ensures fresh data for clients  
+const SERVER_TTL = 60 * 30 * 1000;   // 30 minutes in milliseconds
+
+// HTTP cache headers (seconds)
+const BROWSER_TTL = 60 * 60;         // 1 hour (max-age)
+const CDN_TTL = 60 * 30;             // 30 minutes (s-maxage)
+const CORS_TTL = 60 * 60;            // 1 hour (balanced approach)
+```
+
+### Standard TTL Guidelines (in milliseconds for cache-manager + Keyv)
+```typescript
+// Configuration data - rarely changes
+const CONFIG_TTL = 60 * 60 * 24 * 1000;     // 24 hours
+
+// User data - moderate frequency  
+const USER_TTL = 60 * 60 * 2 * 1000;        // 2 hours
+
+// Survey data - changes moderately
+const SURVEY_TTL = 60 * 15 * 1000;          // 15 minutes
+
+// Billing data - expensive to compute
+const BILLING_TTL = 60 * 30 * 1000;         // 30 minutes
+
+// Action classes - infrequent changes
+const ACTION_CLASS_TTL = 60 * 30 * 1000;    // 30 minutes
+```
+
+## High-Frequency Endpoint Optimization
+
+### Performance Patterns for High-Volume Endpoints
+
+```typescript
+// ✅ Optimized high-frequency endpoint pattern
+export const GET = async (request: NextRequest, props: { params: Promise<{ id: string }> }) => {
+  const params = await props.params;
+
+  try {
+    // Simple validation (avoid Zod for high-frequency)
+    if (!params.id || typeof params.id !== 'string') {
+      return responses.badRequestResponse("ID is required", undefined, true);
+    }
+
+    // Single optimized query with caching
+    const data = await getOptimizedData(params.id);
+
+    return responses.successResponse(
+      {
+        data,
+        expiresAt: new Date(Date.now() + CLIENT_TTL * 1000), // SDK cache duration
+      },
+      true,
+      "public, s-maxage=1800, max-age=3600, stale-while-revalidate=1800, stale-if-error=3600"
+    );
+  } catch (err) {
+    // Simplified error handling for performance
+    if (err instanceof ResourceNotFoundError) {
+      return responses.notFoundResponse(err.resourceType, err.resourceId);
+    }
+    logger.error({ error: err, url: request.url }, "Error in high-frequency endpoint");
+    return responses.internalServerErrorResponse(err.message, true);
+  }
+};
+```
+
+### Avoid These Performance Anti-Patterns
+
+```typescript
+// ❌ Avoid for high-frequency endpoints
+const inputValidation = ZodSchema.safeParse(input);     // Too slow
+const startTime = Date.now(); logger.debug(...);       // Logging overhead
+const { data, revalidateEnvironment } = await get();   // Complex return types
+```
+
+### CORS Optimization
+```typescript
+// ✅ Balanced CORS caching (not too aggressive)
+export const OPTIONS = async (): Promise<Response> => {
+  return responses.successResponse(
+    {},
+    true,
+    "public, s-maxage=3600, max-age=3600" // 1 hour balanced approach
+  );
+};
+```
+
+## Redis Cache Migration from Next.js
+
+### Avoid Legacy Next.js Patterns
+```typescript
+// ❌ Old Next.js unstable_cache pattern (avoid)
+const getCachedData = unstable_cache(
+  async (id) => fetchData(id),
+  ['cache-key'],
+  { tags: ['environment'], revalidate: 900 }
+);
+
+// ❌ Don't use revalidateEnvironment flags with Redis
+return { data, revalidateEnvironment: true }; // This gets cached incorrectly!
+
+// ✅ New Redis pattern with withCache (TTL in milliseconds)
+export const getCachedData = (id: string) => 
+  withCache(
+    () => fetchData(id),
+    {
+      key: createCacheKey.environment.data(id),
+      ttl: 60 * 15 * 1000, // 15 minutes in milliseconds
+    }
+  )();
+```
+
+### Remove Revalidation Logic
+When migrating from Next.js `unstable_cache`:
+- Remove `revalidateEnvironment` or similar flags
+- Remove tag-based invalidation logic  
+- Use TTL-based expiration instead
+- Handle one-time updates (like `appSetupCompleted`) directly in cache
+
+## Data Layer Optimization
+
+### Single Query Pattern
+```typescript
+// ✅ Optimize with single database query
+export const getOptimizedEnvironmentData = async (environmentId: string) => {
+  return prisma.environment.findUniqueOrThrow({
+    where: { id: environmentId },
+    include: {
+      project: { 
+        select: { id: true, recontactDays: true, /* ... */ }
+      },
+      organization: {
+        select: { id: true, billing: true }
+      },
+      surveys: {
+        where: { status: "inProgress" },
+        select: { id: true, name: true, /* ... */ }
+      },
+      actionClasses: {
+        select: { id: true, name: true, /* ... */ }
+      }
+    }
+  });
+};
+
+// ❌ Avoid multiple separate queries
+const environment = await getEnvironment(id);
+const organization = await getOrganization(environment.organizationId);  
+const surveys = await getSurveys(id);
+const actionClasses = await getActionClasses(id);
+```
+
+## Invalidation Best Practices
+
+**Always use explicit key-based invalidation:**
+
+```typescript
+// ✅ Clear and debuggable
+await invalidateCache(createCacheKey.environment.state(environmentId));
+await invalidateCache([
+  createCacheKey.environment.surveys(environmentId),
+  createCacheKey.environment.actionClasses(environmentId)
+]);
+
+// ❌ Avoid complex tag systems
+await invalidateByTags(["environment", "survey"]); // Don't do this
+```
+
+## Critical Performance Targets
+
+### High-Frequency Endpoint Goals
+- **Cache hit ratio**: >85%
+- **Response time P95**: <200ms  
+- **Database load reduction**: >60%
+- **HTTP cache duration**: 1hr browser, 30min Cloudflare
+- **SDK refresh interval**: 1 hour with 30min server cache
+
+### Performance Monitoring
+- Use **existing elastic cache analytics** for metrics
+- Log cache errors and warnings (not debug info)
+- Track database query reduction
+- Monitor response times for cached endpoints
+- **Avoid performance logging** in high-frequency endpoints
+
+## Error Handling Pattern
+
+Always provide fallback to fresh data on cache errors:
+
+```typescript
+try {
+  const cached = await cache.get(key);
+  if (cached) return cached;
+  
+  const fresh = await fetchFresh();
+  await cache.set(key, fresh, ttl); // ttl in milliseconds
+  return fresh;
+} catch (error) {
+  // ✅ Always fallback to fresh data
+  logger.warn("Cache error, fetching fresh", { key, error });
+  return fetchFresh();
+}
+```
+
+## Common Pitfalls to Avoid
+
+1. **Never use Next.js `unstable_cache()`** - unreliable in production
+2. **Don't use revalidation flags with Redis** - they get cached incorrectly
+3. **Avoid Zod validation** for simple parameters in high-frequency endpoints
+4. **Don't add performance logging** to high-frequency endpoints
+5. **Coordinate TTLs** between client and server caches
+6. **Don't over-engineer** with complex tag systems  
+7. **Avoid caching rapidly changing data** (real-time metrics)
+8. **Always validate cache keys** to prevent collisions
+9. **Don't add redundant caching layers** - analyze computational overhead first
+10. **Avoid cache wrapper functions** - add caching directly to expensive operations
+11. **Don't cache property access or simple transformations** - overhead is negligible
+12. **Analyze the full call chain** before adding caching to avoid double-caching
+13. **Remember TTL is in milliseconds** for cache-manager + Keyv stack (not seconds)
+
+## Monitoring Strategy
+
+- Use **existing elastic cache analytics** for metrics
+- Log cache errors and warnings  
+- Track database query reduction
+- Monitor response times for cached endpoints
+- **Don't add custom metrics** that duplicate existing monitoring
+
+## Important Notes
+
+### TTL Units
+- **cache-manager + Keyv**: TTL in **milliseconds**
+- **Direct Redis commands**: TTL in **seconds** (EXPIRE, SETEX) or **milliseconds** (PEXPIRE, PSETEX)
+- **HTTP cache headers**: TTL in **seconds** (max-age, s-maxage)
+- **Client SDK**: TTL in **seconds** (expiresAt calculation)

.cursor/rules/database-performance.mdc

@@ -0,0 +1,41 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Database Performance & Prisma Best Practices
+
+## Critical Performance Rules
+
+### Response Count Queries
+- **NEVER** use `skip`/`offset` with `prisma.response.count()` - this causes expensive subqueries with OFFSET
+- Always use only `where` clauses for count operations: `prisma.response.count({ where: { ... } })`
+- For pagination, separate count queries from data queries
+- Reference: [apps/web/lib/response/service.ts](mdc:apps/web/lib/response/service.ts) line 654-686
+
+### Prisma Query Optimization
+- Use proper indexes defined in [packages/database/schema.prisma](mdc:packages/database/schema.prisma)
+- Leverage existing indexes: `@@index([surveyId, createdAt])`, `@@index([createdAt])`
+- Use cursor-based pagination for large datasets instead of offset-based
+- Cache frequently accessed data using React Cache and custom cache tags
+
+### Date Range Filtering
+- When filtering by `createdAt`, always use indexed queries
+- Combine with `surveyId` for optimal performance: `{ surveyId, createdAt: { gte: start, lt: end } }`
+- Avoid complex WHERE clauses that can't utilize indexes
+
+### Count vs Data Separation
+- Always separate count queries from data fetching queries
+- Use `Promise.all()` to run count and data queries in parallel
+- Example pattern from [apps/web/modules/api/v2/management/responses/lib/response.ts](mdc:apps/web/modules/api/v2/management/responses/lib/response.ts):
+```typescript
+const [responses, totalCount] = await Promise.all([
+  prisma.response.findMany(query),
+  prisma.response.count({ where: whereClause }),
+]);
+```
+
+### Monitoring & Debugging
+- Monitor AWS RDS Performance Insights for problematic queries
+- Look for queries with OFFSET in count operations - these indicate performance issues
+- Use proper error handling with `DatabaseError` for Prisma exceptions

.cursor/rules/database.mdc

@@ -0,0 +1,110 @@
+---
+description: >
+  This rule provides comprehensive knowledge about the Formbricks database structure, relationships, 
+  and data patterns. It should be used **only when the agent explicitly requests database schema-level 
+  details** to support tasks such as: writing/debugging Prisma queries, designing/reviewing data models, 
+  investigating multi-tenancy behavior, creating API endpoints, or understanding data relationships.
+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.
+
+## Database Overview
+
+Formbricks uses PostgreSQL with Prisma ORM. The schema is designed for multi-tenancy with strong data isolation between organizations.
+
+### Core Hierarchy
+
+```
+Organization
+└── Project
+    └── Environment (production/development)
+        ├── Survey
+        ├── Contact
+        ├── ActionClass
+        └── Integration
+```
+
+## 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`
+
+The schema.prisma file contains all model definitions, relationships, enums, and field types. The json-types.ts file contains TypeScript type definitions for JSON fields.
+
+## 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
+
+## Common Query Patterns
+
+### Survey with Responses
+
+```typescript
+// Include response count and latest responses
+const survey = await prisma.survey.findUnique({
+  where: { id: surveyId },
+  include: {
+    responses: {
+      take: 10,
+      orderBy: { createdAt: "desc" },
+    },
+    _count: {
+      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,
+      },
+    },
+  },
+});
+```
+
+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

@@ -0,0 +1,28 @@
+---
+description: Guideline for writing end-user facing documentation in the apps/docs folder
+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.
+- 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>

.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/formbricks-architecture.mdc

@@ -0,0 +1,332 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Formbricks Architecture & Patterns
+
+## Monorepo Structure
+
+### Apps Directory
+- `apps/web/` - Main Next.js web application
+- `packages/` - Shared packages and utilities
+
+### Key Directories in Web App
+```
+apps/web/
+├── app/                    # Next.js 13+ app directory
+│   ├── (app)/             # Main application routes
+│   ├── (auth)/            # Authentication routes
+│   ├── api/               # API routes
+├── components/            # Shared components
+├── lib/                   # Utility functions and services
+└── modules/               # Feature-specific modules
+```
+
+## Routing Patterns
+
+### App Router Structure
+The application uses Next.js 13+ app router with route groups:
+
+```
+(app)/environments/[environmentId]/
+├── surveys/[surveyId]/
+│   ├── (analysis)/        # Analysis views
+│   │   ├── responses/     # Response management
+│   │   ├── summary/       # Survey summary
+│   │   └── hooks/         # Analysis-specific hooks
+│   ├── edit/              # Survey editing
+│   └── settings/          # Survey settings
+```
+
+### Dynamic Routes
+- `[environmentId]` - Environment-specific routes
+- `[surveyId]` - Survey-specific routes
+
+## Service Layer Pattern
+
+### Service Organization
+Services are organized by domain in `apps/web/lib/`:
+
+```typescript
+// Example: Response service
+// apps/web/lib/response/service.ts
+export const getResponseCountAction = async ({
+  surveyId,
+  filterCriteria,
+}: {
+  surveyId: string;
+  filterCriteria: any;
+}) => {
+  // Service implementation
+};
+```
+
+### Action Pattern
+Server actions follow a consistent pattern:
+
+```typescript
+// Action wrapper for service calls
+export const getResponseCountAction = async (params) => {
+  try {
+    const result = await responseService.getCount(params);
+    return { data: result };
+  } catch (error) {
+    return { error: error.message };
+  }
+};
+```
+
+## Context Patterns
+
+### Provider Structure
+Context providers follow a consistent pattern:
+
+```typescript
+// Provider component
+export const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) => {
+  const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
+  
+  const value = {
+    selectedFilter,
+    setSelectedFilter,
+    // ... other state and methods
+  };
+
+  return (
+    <ResponseFilterContext.Provider value={value}>
+      {children}
+    </ResponseFilterContext.Provider>
+  );
+};
+
+// Hook for consuming context
+export const useResponseFilter = () => {
+  const context = useContext(ResponseFilterContext);
+  if (!context) {
+    throw new Error('useResponseFilter must be used within ResponseFilterProvider');
+  }
+  return context;
+};
+```
+
+### Context Composition
+Multiple contexts are often composed together:
+
+```typescript
+// Layout component with multiple providers
+export default function AnalysisLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ResponseFilterProvider>
+      <ResponseCountProvider>
+        {children}
+      </ResponseCountProvider>
+    </ResponseFilterProvider>
+  );
+}
+```
+
+## Component Patterns
+
+### Page Components
+Page components are located in the app directory and follow this pattern:
+
+```typescript
+// apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page.tsx
+export default function ResponsesPage() {
+  return (
+    <div>
+      <ResponsesTable />
+      <ResponsesPagination />
+    </div>
+  );
+}
+```
+
+### Component Organization
+- **Pages** - Route components in app directory
+- **Components** - Reusable UI components
+- **Modules** - Feature-specific components and logic
+
+### Shared Components
+Common components are in `apps/web/components/`:
+- UI components (buttons, inputs, modals)
+- Layout components (headers, sidebars)
+- Data display components (tables, charts)
+
+## Hook Patterns
+
+### Custom Hook Structure
+Custom hooks follow consistent patterns:
+
+```typescript
+export const useResponseCount = ({ 
+  survey, 
+  initialCount 
+}: {
+  survey: TSurvey;
+  initialCount?: number;
+}) => {
+  const [responseCount, setResponseCount] = useState(initialCount ?? 0);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  // Hook logic...
+  
+  return {
+    responseCount,
+    isLoading,
+    refetch,
+  };
+};
+```
+
+### Hook Dependencies
+- Use context hooks for shared state
+- Implement proper cleanup with AbortController
+- Optimize dependency arrays to prevent unnecessary re-renders
+
+## Data Fetching Patterns
+
+### Server Actions
+The app uses Next.js server actions for data fetching:
+
+```typescript
+// Server action
+export async function getResponsesAction(params: GetResponsesParams) {
+  const responses = await getResponses(params);
+  return { data: responses };
+}
+
+// Client usage
+const { data } = await getResponsesAction(params);
+```
+
+### Error Handling
+Consistent error handling across the application:
+
+```typescript
+try {
+  const result = await apiCall();
+  return { data: result };
+} catch (error) {
+  console.error("Operation failed:", error);
+  return { error: error.message };
+}
+```
+
+## Type Safety
+
+### Type Organization
+Types are organized in packages:
+- `@formbricks/types` - Shared type definitions
+- Local types in component/hook files
+
+### Common Types
+```typescript
+import { TSurvey } from "@formbricks/types/surveys/types";
+import { TResponse } from "@formbricks/types/responses";
+import { TEnvironment } from "@formbricks/types/environment";
+```
+
+## State Management
+
+### Local State
+- Use `useState` for component-specific state
+- Use `useReducer` for complex state logic
+- Use refs for mutable values that don't trigger re-renders
+
+### Global State
+- React Context for feature-specific shared state
+- URL state for filters and pagination
+- Server state through server actions
+
+## Performance Considerations
+
+### Code Splitting
+- Dynamic imports for heavy components
+- Route-based code splitting with app router
+- Lazy loading for non-critical features
+
+### Caching Strategy
+- Server-side caching for database queries
+- Client-side caching with React Query (where applicable)
+- Static generation for public pages
+
+## Testing Strategy
+
+### Test Organization
+```
+component/
+├── Component.tsx
+├── Component.test.tsx
+└── hooks/
+    ├── useHook.ts
+    └── useHook.test.tsx
+```
+
+### Test Patterns
+- Unit tests for utilities and services
+- Integration tests for components with context
+- Hook tests with proper mocking
+
+## Build & Deployment
+
+### Build Process
+- TypeScript compilation
+- Next.js build optimization
+- Asset optimization and bundling
+
+### Environment Configuration
+- Environment-specific configurations
+- Feature flags for gradual rollouts
+- Database connection management
+
+## Security Patterns
+
+### Authentication
+- Session-based authentication
+- Environment-based access control
+- API route protection
+
+### Data Validation
+- Input validation on both client and server
+- Type-safe API contracts
+- Sanitization of user inputs
+
+## Monitoring & Observability
+
+### Error Tracking
+- Client-side error boundaries
+- Server-side error logging
+- Performance monitoring
+
+### Analytics
+- User interaction tracking
+- Performance metrics
+- Database query monitoring
+
+## Best Practices Summary
+
+### Code Organization
+- ✅ Follow the established directory structure
+- ✅ Use consistent naming conventions
+- ✅ Separate concerns (UI, logic, data)
+- ✅ Keep components focused and small
+
+### Performance
+- ✅ Implement proper loading states
+- ✅ Use AbortController for async operations
+- ✅ Optimize database queries
+- ✅ Implement proper caching strategies
+
+### Type Safety
+- ✅ Use TypeScript throughout
+- ✅ Define proper interfaces for props
+- ✅ Use type guards for runtime validation
+- ✅ Leverage shared type packages
+
+### Testing
+- ✅ Write tests for critical functionality
+- ✅ Mock external dependencies properly
+- ✅ Test error scenarios and edge cases
+- ✅ Maintain good test coverage

.cursor/rules/github-actions-security.mdc

@@ -0,0 +1,232 @@
+---
+description: Security best practices and guidelines for writing GitHub Actions and workflows
+globs: .github/workflows/*.yml,.github/workflows/*.yaml,.github/actions/*/action.yml,.github/actions/*/action.yaml
+---
+
+# GitHub Actions Security Best Practices
+
+## Required Security Measures
+
+### 1. Set Minimum GITHUB_TOKEN Permissions
+
+Always explicitly set the minimum required permissions for GITHUB_TOKEN:
+
+```yaml
+permissions:
+  contents: read
+  # Only add additional permissions if absolutely necessary:
+  # pull-requests: write  # for commenting on PRs
+  # issues: write         # for creating/updating issues
+  # checks: write         # for publishing check results
+```
+
+### 2. Add Harden-Runner as First Step
+
+For **every job** on `ubuntu-latest`, add Harden-Runner as the first step:
+
+```yaml
+- name: Harden the runner
+  uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+  with:
+    egress-policy: audit # or 'block' for stricter security
+```
+
+### 3. Pin Actions to Full Commit SHA
+
+**Always** pin third-party actions to their full commit SHA, not tags:
+
+```yaml
+# ❌ BAD - uses mutable tag
+- uses: actions/checkout@v4
+
+# ✅ GOOD - pinned to immutable commit SHA
+- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+```
+
+### 4. Secure Variable Handling
+
+Prevent command injection by properly quoting variables:
+
+```yaml
+# ❌ BAD - potential command injection
+run: echo "Processing ${{ inputs.user_input }}"
+
+# ✅ GOOD - properly quoted
+env:
+  USER_INPUT: ${{ inputs.user_input }}
+run: echo "Processing ${USER_INPUT}"
+```
+
+Use `${VARIABLE}` syntax in shell scripts instead of `$VARIABLE`.
+
+### 5. Environment Variables for Secrets
+
+Store sensitive data in environment variables, not inline:
+
+```yaml
+# ❌ BAD
+run: curl -H "Authorization: Bearer ${{ secrets.TOKEN }}" api.example.com
+
+# ✅ GOOD
+env:
+  API_TOKEN: ${{ secrets.TOKEN }}
+run: curl -H "Authorization: Bearer ${API_TOKEN}" api.example.com
+```
+
+## Workflow Structure Best Practices
+
+### Required Workflow Elements
+
+```yaml
+name: "Descriptive Workflow Name"
+
+on:
+  # Define specific triggers
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+# Always set explicit permissions
+permissions:
+  contents: read
+
+jobs:
+  job-name:
+    name: "Descriptive Job Name"
+    runs-on: ubuntu-latest
+    timeout-minutes: 30 # tune per job; standardize repo-wide
+
+    # Set job-level permissions if different from workflow level
+    permissions:
+      contents: read
+
+    steps:
+      # Always start with Harden-Runner on ubuntu-latest
+      - name: Harden the runner
+        uses: step-security/harden-runner@v2
+        with:
+          egress-policy: audit
+
+      # Pin all actions to commit SHA
+      - name: Checkout code
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+```
+
+### Input Validation for Actions
+
+For composite actions, always validate inputs:
+
+```yaml
+inputs:
+  user_input:
+    description: "User provided input"
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - name: Validate input
+      shell: bash
+      run: |
+        # Harden shell and validate input format/content before use
+        set -euo pipefail
+
+        USER_INPUT="${{ inputs.user_input }}"
+
+        if [[ ! "${USER_INPUT}" =~ ^[A-Za-z0-9._-]+$ ]]; then
+          echo "❌ Invalid input format"
+          exit 1
+        fi
+```
+
+## Docker Security in Actions
+
+### Pin Docker Images to Digests
+
+```yaml
+# ❌ BAD - mutable tag
+container: node:18
+
+# ✅ GOOD - pinned to digest
+container: node:18@sha256:a1ba21bf0c92931d02a8416f0a54daad66cb36a85d6a37b82dfe1604c4c09cad
+```
+
+## Common Patterns
+
+### Secure File Operations
+
+```yaml
+- name: Process files securely
+  shell: bash
+  env:
+    FILE_PATH: ${{ inputs.file_path }}
+  run: |
+    set -euo pipefail  # Fail on errors, undefined vars, pipe failures
+
+    # Use absolute paths and validate
+    SAFE_PATH=$(realpath "${FILE_PATH}")
+    if [[ "$SAFE_PATH" != "${GITHUB_WORKSPACE}"/* ]]; then
+      echo "❌ Path outside workspace"
+      exit 1
+    fi
+```
+
+### Artifact Handling
+
+```yaml
+- name: Upload artifacts securely
+  uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4.4.0
+  with:
+    name: build-artifacts
+    path: |
+      dist/
+      !dist/**/*.log  # Exclude sensitive files
+    retention-days: 30
+```
+
+### GHCR authentication for pulls/scans
+
+```yaml
+# Minimal permissions required for GHCR pulls/scans
+permissions:
+  contents: read
+  packages: read
+
+steps:
+  - name: Log in to GitHub Container Registry
+    uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3.5.0
+    with:
+      registry: ghcr.io
+      username: ${{ github.actor }}
+      password: ${{ secrets.GITHUB_TOKEN }}
+```
+
+## Security Checklist
+
+- [ ] Minimum GITHUB_TOKEN permissions set
+- [ ] Harden-Runner added to all ubuntu-latest jobs
+- [ ] All third-party actions pinned to commit SHA
+- [ ] Input validation implemented for custom actions
+- [ ] Variables properly quoted in shell scripts
+- [ ] Secrets stored in environment variables
+- [ ] Docker images pinned to digests (if used)
+- [ ] Error handling with `set -euo pipefail`
+- [ ] File paths validated and sanitized
+- [ ] No sensitive data in logs or outputs
+- [ ] GHCR login performed before pulls/scans (packages: read)
+- [ ] Job timeouts configured (`timeout-minutes`)
+
+## Recommended Additional Workflows
+
+Consider adding these security-focused workflows to your repository:
+
+1. **CodeQL Analysis** - Static Application Security Testing (SAST)
+2. **Dependency Review** - Scan for vulnerable dependencies in PRs
+3. **Dependabot Configuration** - Automated dependency updates
+
+## Resources
+
+- [GitHub Security Hardening Guide](https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions)
+- [Step Security Harden-Runner](https://github.com/step-security/harden-runner)
+- [Secure-Repo Best Practices](https://github.com/step-security/secure-repo)

.cursor/rules/performance-optimization.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

.cursor/rules/react-context-patterns.mdc

@@ -0,0 +1,52 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# React Context & Provider Patterns
+
+## Context Provider Best Practices
+
+### Provider Implementation
+- Use TypeScript interfaces for provider props with optional `initialCount` for testing
+- Implement proper cleanup in `useEffect` to avoid React hooks warnings
+- Reference: [apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/ResponseCountProvider.tsx](mdc:apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/ResponseCountProvider.tsx)
+
+### Cleanup Pattern for Refs
+```typescript
+useEffect(() => {
+  const currentPendingRequests = pendingRequests.current;
+  const currentAbortController = abortController.current;
+  
+  return () => {
+    if (currentAbortController) {
+      currentAbortController.abort();
+    }
+    currentPendingRequests.clear();
+  };
+}, []);
+```
+
+### Testing Context Providers
+- Always wrap components using context in the provider during tests
+- Use `initialCount` prop for predictable test scenarios
+- Mock context dependencies like `useParams`, `useResponseFilter`
+- Example from [apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.test.tsx](mdc:apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.test.tsx):
+
+```typescript
+render(
+  <ResponseCountProvider survey={dummySurvey} initialCount={5}>
+    <ComponentUnderTest />
+  </ResponseCountProvider>
+);
+```
+
+### Required Mocks for Context Testing
+- Mock `next/navigation` with `useParams` returning environment and survey IDs
+- Mock response filter context and actions
+- Mock API actions that the provider depends on
+
+### Context Hook Usage
+- Create custom hooks like `useResponseCountContext()` for consuming context
+- Provide meaningful error messages when context is used outside provider
+- Use context for shared state that multiple components need to access

.cursor/rules/react-context-providers.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

.cursor/rules/storybook-component-migration.mdc

@@ -0,0 +1,216 @@
+---
+description: Migrate deprecated UI components to a unified component
+globs: 
+alwaysApply: false
+---
+# Component Migration Automation Rule
+
+## Overview
+This rule automates the migration of deprecated components to new component systems in React/TypeScript codebases.
+
+## Trigger
+When the user requests component migration (e.g., "migrate [DeprecatedComponent] to [NewComponent]" or "component migration").
+
+## Process
+
+### Step 1: Discovery and Planning
+1. **Identify migration parameters:**
+   - Ask user for deprecated component name (e.g., "Modal")
+   - Ask user for new component name(s) (e.g., "Dialog")
+   - Ask for any components to exclude (e.g., "ModalWithTabs")
+   - Ask for specific import paths if needed
+
+2. **Scan codebase** for deprecated components:
+   - Search for `import.*[DeprecatedComponent]` patterns
+   - Exclude specified components that should not be migrated
+   - List all found components with file paths
+   - Present numbered list to user for confirmation
+
+### Step 2: Component-by-Component Migration
+For each component, follow this exact sequence:
+
+#### 2.1 Component Migration
+- **Import changes:**
+  - Ask user to provide the new import structure
+  - Example transformation pattern:
+  ```typescript
+  // FROM:
+  import { [DeprecatedComponent] } from "@/components/ui/[DeprecatedComponent]"
+  
+  // TO:
+  import {
+    [NewComponent],
+    [NewComponentPart1],
+    [NewComponentPart2],
+    // ... other parts
+  } from "@/components/ui/[NewComponent]"
+  ```
+
+- **Props transformation:**
+  - Ask user for prop mapping rules (e.g., `open` → `open`, `setOpen` → `onOpenChange`)
+  - Ask for props to remove (e.g., `noPadding`, `closeOnOutsideClick`, `size`)
+  - Apply transformations based on user specifications
+
+- **Structure transformation:**
+  - Ask user for the new component structure pattern
+  - Apply the transformation maintaining all functionality
+  - Preserve all existing logic, state management, and event handlers
+
+#### 2.2 Wait for User Approval
+- Present the migration changes
+- Wait for explicit user approval before proceeding
+- If rejected, ask for specific feedback and iterate
+#### 2.3 Re-read and Apply Additional Changes
+- Re-read the component file to capture any user modifications
+- Apply any additional improvements the user made
+- Ensure all changes are incorporated
+
+#### 2.4 Test File Updates
+- **Find corresponding test file** (same name with `.test.tsx` or `.test.ts`)
+- **Update test mocks:**
+  - Ask user for new component mock structure
+  - Replace old component mocks with new ones
+  - Example pattern:
+  ```typescript
+  // Add to test setup:
+  jest.mock("@/components/ui/[NewComponent]", () => ({
+    [NewComponent]: ({ children, [props] }: any) => ([mock implementation]),
+    [NewComponentPart1]: ({ children }: any) => <div data-testid="[new-component-part1]">{children}</div>,
+    [NewComponentPart2]: ({ children }: any) => <div data-testid="[new-component-part2]">{children}</div>,
+    // ... other parts
+  }));
+  ```
+- **Update test expectations:**
+  - Change test IDs from old component to new component
+  - Update any component-specific assertions
+  - Ensure all new component parts used in the component are mocked
+
+#### 2.5 Run Tests and Optimize
+- Execute `Node package manager test -- ComponentName.test.tsx`
+- Fix any failing tests
+- Optimize code quality (imports, formatting, etc.)
+- Re-run tests until all pass
+- **Maximum 3 iterations** - if still failing, ask user for guidance
+
+#### 2.6 Wait for Final Approval
+- Present test results and any optimizations made
+- Wait for user approval of the complete migration
+- If rejected, iterate based on feedback
+
+#### 2.7 Git Commit
+- Run: `git add .`
+- Run: `git commit -m "migrate [ComponentName] from [DeprecatedComponent] to [NewComponent]"`
+- Confirm commit was successful
+
+### Step 3: Final Report Generation
+After all components are migrated, generate a comprehensive GitHub PR report:
+
+#### PR Title
+```
+feat: migrate [DeprecatedComponent] components to [NewComponent] system
+```
+
+#### PR Description Template
+```markdown
+## 🔄 [DeprecatedComponent] to [NewComponent] Migration
+
+### Overview
+Migrated [X] [DeprecatedComponent] components to the new [NewComponent] component system to modernize the UI architecture and improve consistency.
+
+### Components Migrated
+[List each component with file path]
+
+### Technical Changes
+- **Imports:** Replaced `[DeprecatedComponent]` with `[NewComponent], [NewComponentParts...]`
+- **Props:** [List prop transformations]
+- **Structure:** Implemented proper [NewComponent] component hierarchy
+- **Styling:** [Describe styling changes]
+- **Tests:** Updated all test mocks and expectations
+
+### Migration Pattern
+```typescript
+// Before
+<[DeprecatedComponent] [oldProps]>
+  [oldStructure]
+</[DeprecatedComponent]>
+
+// After
+<[NewComponent] [newProps]>
+  [newStructure]
+</[NewComponent]>
+```
+
+### Testing
+- ✅ All existing tests updated and passing
+- ✅ Component functionality preserved
+- ✅ UI/UX behavior maintained
+
+### How to Test This PR
+1. **Functional Testing:**
+   - Navigate to each migrated component's usage
+   - Verify [component] opens and closes correctly
+   - Test all interactive elements within [components]
+   - Confirm styling and layout are preserved
+
+2. **Automated Testing:**
+   ```bash
+   Node package manager test
+   ```
+
+3. **Visual Testing:**
+   - Check that all [components] maintain proper styling
+   - Verify responsive behavior
+   - Test keyboard navigation and accessibility
+
+### Breaking Changes
+[List any breaking changes or state "None - this is a drop-in replacement maintaining all existing functionality."]
+
+### Notes
+- [Any excluded components] were preserved as they already use [NewComponent] internally
+- All form validation and complex state management preserved
+- Enhanced code quality with better imports and formatting
+```
+
+## Special Considerations
+
+### Excluded Components
+- **DO NOT MIGRATE** components specified by user as exclusions
+- They may already use the new component internally or have other reasons
+- Inform user these are skipped and why
+
+### Complex Components
+- Preserve all existing functionality (forms, validation, state management)
+- Maintain prop interfaces
+- Keep all event handlers and callbacks
+- Preserve accessibility features
+
+### Test Coverage
+- Ensure all new component parts are mocked when used
+- Mock all new component parts that appear in the component
+- Update test IDs from old component to new component
+- Maintain all existing test scenarios
+
+### Error Handling
+- If tests fail after 3 iterations, stop and ask user for guidance
+- If component is too complex, ask user for specific guidance
+- If unsure about functionality preservation, ask for clarification
+
+### Migration Patterns
+- Always ask user for specific migration patterns before starting
+- Confirm import structures, prop mappings, and component hierarchies
+- Adapt to different component architectures (simple replacements, complex restructuring, etc.)
+
+## Success Criteria
+- All deprecated components successfully migrated to new components
+- All tests passing
+- No functionality lost
+- Code quality maintained or improved
+- User approval on each component
+- Successful git commits for each migration
+- Comprehensive PR report generated
+
+## Usage Examples
+- "migrate Modal to Dialog"
+- "migrate Button to NewButton" 
+- "migrate Card to ModernCard"
+- "component migration" (will prompt for details) 

.cursor/rules/storybook-create-new-story.mdc

@@ -0,0 +1,177 @@
+---
+description: Create a story in Storybook for a given component
+globs:
+alwaysApply: false
+---
+
+# Formbricks Storybook Stories
+
+## When generating Storybook stories for Formbricks components:
+
+### 1. **File Structure**
+- Create `stories.tsx` (not `.stories.tsx`) in component directory
+- Use exact import: `import { Meta, StoryObj } from "@storybook/react-vite";`
+- Import component from `"./index"`
+
+### 2. **Story Structure Template**
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentName } from "./index";
+
+// For complex components with configurable options
+// consider this as an example the options need to reflect the props types
+interface StoryOptions {
+  showIcon: boolean;
+  numberOfElements: number;
+  customLabels: string[];
+}
+
+type StoryProps = React.ComponentProps<typeof ComponentName> & StoryOptions;
+
+const meta: Meta<StoryProps> = {
+  title: "UI/ComponentName",
+  component: ComponentName,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { sort: "alpha", exclude: [] },
+    docs: {
+      description: {
+        component: "The **ComponentName** component provides [description].",
+      },
+    },
+  },
+  argTypes: {
+    // Organize in exactly these categories: Behavior, Appearance, Content
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ComponentName> & { args: StoryOptions };
+```
+
+### 3. **ArgTypes Organization**
+Organize ALL argTypes into exactly three categories:
+- **Behavior**: disabled, variant, onChange, etc.
+- **Appearance**: size, color, layout, styling, etc.  
+- **Content**: text, icons, numberOfElements, etc.
+
+Format:
+```tsx
+argTypes: {
+  propName: {
+    control: "select" | "boolean" | "text" | "number",
+    options: ["option1", "option2"], // for select
+    description: "Clear description",
+    table: {
+      category: "Behavior" | "Appearance" | "Content",
+      type: { summary: "string" },
+      defaultValue: { summary: "default" },
+    },
+    order: 1,
+  },
+}
+```
+
+### 4. **Required Stories**
+Every component must include:
+- `Default`: Most common use case
+- `Disabled`: If component supports disabled state
+- `WithIcon`: If component supports icons
+- Variant stories for each variant (Primary, Secondary, Error, etc.)
+- Edge case stories (ManyElements, LongText, CustomStyling)
+
+### 5. **Story Format**
+```tsx
+export const Default: Story = {
+  args: {
+    // Props with realistic values
+  },
+};
+
+export const EdgeCase: Story = {
+  args: { /* ... */ },
+  parameters: {
+    docs: {
+      description: {
+        story: "Use this when [specific scenario].",
+      },
+    },
+  },
+};
+```
+
+### 6. **Dynamic Content Pattern**
+For components with dynamic content, create render function:
+```tsx
+const renderComponent = (args: StoryProps) => {
+  const { numberOfElements, showIcon, customLabels } = args;
+  
+  // Generate dynamic content
+  const elements = Array.from({ length: numberOfElements }, (_, i) => ({
+    id: `element-${i}`,
+    label: customLabels[i] || `Element ${i + 1}`,
+    icon: showIcon ? <IconComponent /> : undefined,
+  }));
+  
+  return <ComponentName {...args} elements={elements} />;
+};
+
+export const Dynamic: Story = {
+  render: renderComponent,
+  args: {
+    numberOfElements: 3,
+    showIcon: true,
+    customLabels: ["First", "Second", "Third"],
+  },
+};
+```
+
+### 7. **State Management**
+For interactive components:
+```tsx
+import { useState } from "react";
+
+const ComponentWithState = (args: any) => {
+  const [value, setValue] = useState(args.defaultValue);
+  
+  return (
+    <ComponentName
+      {...args}
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue);
+        args.onChange?.(newValue);
+      }}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: ComponentWithState,
+  args: { defaultValue: "initial" },
+};
+```
+
+### 8. **Quality Requirements**
+- Include component description in parameters.docs
+- Add story documentation for non-obvious use cases
+- Test edge cases (overflow, empty states, many elements)
+- Ensure no TypeScript errors
+- Use realistic prop values
+- Include at least 3-5 story variants
+- Example values need to be in the context of survey application
+
+### 9. **Naming Conventions**
+- **Story titles**: "UI/ComponentName"
+- **Story exports**: PascalCase (Default, WithIcon, ManyElements)
+- **Categories**: "Behavior", "Appearance", "Content" (exact spelling)
+- **Props**: camelCase matching component props
+
+### 10. **Special Cases**
+- **Generic components**: Remove `component` from meta if type conflicts
+- **Form components**: Include Invalid, WithValue stories
+- **Navigation**: Include ManyItems stories
+- **Modals, Dropdowns and Popups **: Include trigger and content structure
+
+## Generate stories that are comprehensive, well-documented, and reflect all component states and edge cases. 

.cursor/rules/testing-patterns.mdc

@@ -0,0 +1,322 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Testing Patterns & Best Practices
+
+## Running Tests
+
+### Test Commands
+From the **root directory** (formbricks/):
+- `npm test` - Run all tests across all packages (recommended for CI/full testing)
+- `npm run test:coverage` - Run all tests with coverage reports
+- `npm run test:e2e` - Run end-to-end tests with Playwright
+
+From the **apps/web directory** (apps/web/):
+- `npm run test` - Run only web app tests (fastest for development)
+- `npm run test:coverage` - Run web app tests with coverage
+- `npm run test -- <file-pattern>` - Run specific test files
+
+### Examples
+```bash
+# Run all tests from root (takes ~3 minutes, runs 790 test files with 5334+ tests)
+npm test
+
+# Run specific test file from apps/web (fastest for development)
+npm run test -- modules/cache/lib/service.test.ts
+
+# Run tests matching pattern from apps/web  
+npm run test -- modules/ee/license-check/lib/license.test.ts
+
+# Run with coverage from root
+npm run test:coverage
+
+# Run specific test with watch mode from apps/web (for development)
+npm run test -- --watch modules/cache/lib/service.test.ts
+
+# Run tests for a specific directory from apps/web
+npm run test -- modules/cache/
+```
+
+### Performance Tips
+- **For development**: Use `apps/web` directory commands to run only web app tests
+- **For CI/validation**: Use root directory commands to run all packages
+- **For specific features**: Use file patterns to target specific test files
+- **For debugging**: Use `--watch` mode for continuous testing during development
+
+### Test File Organization
+- Place test files in the **same directory** as the source file
+- Use `.test.ts` for utility/service tests (Node environment)
+- Use `.test.tsx` for React component tests (jsdom environment)
+
+## Test File Naming & Environment
+
+### File Extensions
+- Use `.test.tsx` for React component/hook tests (runs in jsdom environment)
+- Use `.test.ts` for utility/service tests (runs in Node environment)
+- The vitest config uses `environmentMatchGlobs` to automatically set jsdom for `.tsx` files
+
+### Test Structure
+```typescript
+// Import the mocked functions first
+import { useHook } from "@/path/to/hook";
+import { serviceFunction } from "@/path/to/service";
+import { renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+// Mock dependencies
+vi.mock("@/path/to/hook", () => ({
+  useHook: vi.fn(),
+}));
+
+describe("ComponentName", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Setup default mocks
+  });
+
+  test("descriptive test name", async () => {
+    // Test implementation
+  });
+});
+```
+
+## React Hook Testing
+
+### Context Mocking
+When testing hooks that use React Context:
+```typescript
+vi.mocked(useResponseFilter).mockReturnValue({
+  selectedFilter: {
+    filter: [],
+    responseStatus: "all",
+  },
+  setSelectedFilter: vi.fn(),
+  selectedOptions: {
+    questionOptions: [],
+    questionFilterOptions: [],
+  },
+  setSelectedOptions: vi.fn(),
+  dateRange: { from: new Date(), to: new Date() },
+  setDateRange: vi.fn(),
+  resetState: vi.fn(),
+});
+```
+
+### Testing Async Hooks
+- Always use `waitFor` for async operations
+- Test both loading and completed states
+- Verify API calls with correct parameters
+
+```typescript
+test("fetches data on mount", async () => {
+  const { result } = renderHook(() => useHook());
+  
+  expect(result.current.isLoading).toBe(true);
+  
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false);
+  });
+  
+  expect(result.current.data).toBe(expectedData);
+  expect(vi.mocked(apiCall)).toHaveBeenCalledWith(expectedParams);
+});
+```
+
+### Testing Hook Dependencies
+To test useEffect dependencies, ensure mocks return different values:
+```typescript
+// First render
+mockGetFormattedFilters.mockReturnValue(mockFilters);
+
+// Change dependency and trigger re-render
+const newMockFilters = { ...mockFilters, finished: true };
+mockGetFormattedFilters.mockReturnValue(newMockFilters);
+rerender();
+```
+
+## Performance Testing
+
+### Race Condition Testing
+Test AbortController implementation:
+```typescript
+test("cancels previous request when new request is made", async () => {
+  let resolveFirst: (value: any) => void;
+  let resolveSecond: (value: any) => void;
+
+  const firstPromise = new Promise((resolve) => {
+    resolveFirst = resolve;
+  });
+  const secondPromise = new Promise((resolve) => {
+    resolveSecond = resolve;
+  });
+
+  vi.mocked(apiCall)
+    .mockReturnValueOnce(firstPromise as any)
+    .mockReturnValueOnce(secondPromise as any);
+
+  const { result } = renderHook(() => useHook());
+  
+  // Trigger second request
+  result.current.refetch();
+  
+  // Resolve in order - first should be cancelled
+  resolveFirst!({ data: 100 });
+  resolveSecond!({ data: 200 });
+
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  // Should have result from second request
+  expect(result.current.data).toBe(200);
+});
+```
+
+### Cleanup Testing
+```typescript
+test("cleans up on unmount", () => {
+  const abortSpy = vi.spyOn(AbortController.prototype, "abort");
+  
+  const { unmount } = renderHook(() => useHook());
+  unmount();
+  
+  expect(abortSpy).toHaveBeenCalled();
+  abortSpy.mockRestore();
+});
+```
+
+## Error Handling Testing
+
+### API Error Testing
+```typescript
+test("handles API errors gracefully", async () => {
+  const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+  vi.mocked(apiCall).mockRejectedValue(new Error("API Error"));
+
+  const { result } = renderHook(() => useHook());
+
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  expect(consoleSpy).toHaveBeenCalledWith("Error message:", expect.any(Error));
+  expect(result.current.data).toBe(fallbackValue);
+  
+  consoleSpy.mockRestore();
+});
+```
+
+### Cancelled Request Testing
+```typescript
+test("does not update state for cancelled requests", async () => {
+  const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+  let rejectFirst: (error: any) => void;
+  const firstPromise = new Promise((_, reject) => {
+    rejectFirst = reject;
+  });
+
+  vi.mocked(apiCall)
+    .mockReturnValueOnce(firstPromise as any)
+    .mockResolvedValueOnce({ data: 42 });
+
+  const { result } = renderHook(() => useHook());
+  result.current.refetch();
+
+  const abortError = new Error("Request cancelled");
+  rejectFirst!(abortError);
+
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  // Should not log error for cancelled request
+  expect(consoleSpy).not.toHaveBeenCalled();
+  consoleSpy.mockRestore();
+});
+```
+
+## Type Safety in Tests
+
+### Mock Type Assertions
+Use type assertions for edge cases:
+```typescript
+vi.mocked(apiCall).mockResolvedValue({
+  data: null as any, // For testing null handling
+});
+
+vi.mocked(apiCall).mockResolvedValue({
+  data: undefined as any, // For testing undefined handling
+});
+```
+
+### Proper Mock Typing
+Ensure mocks match the actual interface:
+```typescript
+const mockSurvey: TSurvey = {
+  id: "survey-123",
+  name: "Test Survey",
+  // ... other required properties
+} as unknown as TSurvey; // Use when partial mocking is needed
+```
+
+## Common Test Patterns
+
+### Testing State Changes
+```typescript
+test("updates state correctly", async () => {
+  const { result } = renderHook(() => useHook());
+  
+  // Initial state
+  expect(result.current.value).toBe(initialValue);
+  
+  // Trigger change
+  result.current.updateValue(newValue);
+  
+  // Verify change
+  expect(result.current.value).toBe(newValue);
+});
+```
+
+### Testing Multiple Scenarios
+```typescript
+test("handles different modes", async () => {
+  // Test regular mode
+  vi.mocked(useParams).mockReturnValue({ surveyId: "123" });
+  const { rerender } = renderHook(() => useHook());
+  
+  await waitFor(() => {
+    expect(vi.mocked(regularApi)).toHaveBeenCalled();
+  });
+  
+  rerender();
+  
+  await waitFor(() => {
+    expect(vi.mocked(sharingApi)).toHaveBeenCalled();
+  });
+});
+```
+
+## Test Organization
+
+### Comprehensive Test Coverage
+For hooks, ensure you test:
+- ✅ Initialization (with/without initial values)
+- ✅ Data fetching (success/error cases)
+- ✅ State updates and refetching
+- ✅ Dependency changes triggering effects
+- ✅ Manual actions (refetch, reset)
+- ✅ Race condition prevention
+- ✅ Cleanup on unmount
+- ✅ Mode switching (if applicable)
+- ✅ Edge cases (null/undefined data)
+
+### Test Naming
+Use descriptive test names that explain the scenario:
+- ✅ "initializes with initial count"
+- ✅ "fetches response count on mount for regular survey"
+- ✅ "cancels previous request when new request is made"
+- ❌ "test hook"
+- ❌ "it works"

.cursor/rules/testing.mdc

@@ -0,0 +1,7 @@
+---
+description: Whenever the user asks to write or update a test file for .tsx or .ts files.
+globs: 
+alwaysApply: false
+---
+Use the rules in this file when writing tests [copilot-instructions.md](mdc:.github/copilot-instructions.md).
+After writing the tests, run them and check if there's any issue with the tests and if all of them are passing. Fix the issues and rerun the tests until all pass.

.env.example

@@ -9,12 +9,8 @@
 WEBAPP_URL=http://localhost:3000
 
 # Required for next-auth. Should be the same as WEBAPP_URL
-# If your pplication uses a custom base path, specify the route to the API endpoint in full, e.g. NEXTAUTH_URL=https://example.com/custom-route/api/auth
 NEXTAUTH_URL=http://localhost:3000
 
-# Can be used to deploy the application under a sub-path of a domain. This can only be set at build time
-# BASE_PATH=
-
 # Encryption keys
 # Please set both for now, we will change this in the future
 
@@ -168,9 +164,6 @@ SLACK_CLIENT_SECRET=
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
-# Internal Environment (production, staging) - used for internal staging environment
-# ENVIRONMENT=production
-
 # Automatically assign new users to a specific organization and role within that organization
 # Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
 # (Role Management is an Enterprise feature)
@@ -196,9 +189,6 @@ REDIS_URL=redis://localhost:6379
 # The below is used for Rate Limiting (uses In-Memory LRU Cache if not provided) (You can use a service like Webdis for this)
 # REDIS_HTTP_URL:
 
-# Chatwoot
-# CHATWOOT_BASE_URL=
-# CHATWOOT_WEBSITE_TOKEN=
 
 # Enable Prometheus metrics
 # PROMETHEUS_ENABLED=
@@ -222,7 +212,3 @@ REDIS_URL=redis://localhost:6379
 # AUDIT_LOG_ENABLED=0
 # If the ip should be added in the log or not. Default 0
 # AUDIT_LOG_GET_USER_IP=0
-
-
-# Lingo.dev API key for translation generation
-LINGODOTDEV_API_KEY=your_api_key_here

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

@@ -54,10 +54,6 @@ inputs:
     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:
@@ -158,7 +154,6 @@ runs:
         DEPLOY_PRODUCTION: ${{ inputs.deploy_production }}
         DEPLOY_STAGING: ${{ inputs.deploy_staging }}
         IS_PRERELEASE: ${{ inputs.is_prerelease }}
-        MAKE_LATEST: ${{ inputs.make_latest }}
       run: |
         set -euo pipefail
 
@@ -169,9 +164,9 @@ runs:
         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
+        elif [[ "${IS_PRERELEASE}" == "false" ]]; then
           TAGS="${TAGS}\n${ECR_REGISTRY}/${ECR_REPOSITORY}:production"
-          echo "Adding production tag for stable release marked as latest"
+          echo "Adding production tag for stable release"
         fi
 
         # Handle manual deployment overrides
@@ -201,7 +196,6 @@ runs:
         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
 
@@ -220,10 +214,10 @@ runs:
           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
+        # Add latest tag for stable releases
+        if [[ "${IS_PRERELEASE}" == "false" ]]; then
           TAGS="${TAGS}\nghcr.io/${IMAGE_NAME}:latest"
-          echo "Added latest tag for stable release marked as latest"
+          echo "Added latest tag for stable release"
         fi
 
         echo "Generated GHCR tags:"
@@ -257,7 +251,6 @@ runs:
         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

.github/copilot-instructions.md

@@ -0,0 +1,32 @@
+# Testing Instructions
+
+When generating test files inside the "/app/web" path, follow these rules:
+
+- You are an experienced senior software engineer
+- Use vitest
+- Ensure 100% code coverage
+- Add as few comments as possible
+- The test file should be located in the same folder as the original file
+- Use the `test` function instead of `it`
+- Follow the same test pattern used for other files in the package where the file is located
+- All imports should be at the top of the file, not inside individual tests
+- For mocking inside "test" blocks use "vi.mocked"
+- If the file is located in the "packages/survey" path, use "@testing-library/preact" instead of "@testing-library/react"
+- Don't mock functions that are already mocked in the "apps/web/vitestSetup.ts" file
+- When using "screen.getByText" check for the tolgee string if it is being used in the file.
+- The types for mocked variables can be found in the "packages/types" path. Be sure that every imported type exists before using it. Don't create types that are not already in the codebase.
+- When mocking data check if the properties added are part of the type of the object being mocked. Only specify known properties, don't use properties that are not part of the type.
+  
+If it's a test for a ".tsx" file, follow these extra instructions:
+
+- Add this code inside the "describe" block and before any test:
+
+afterEach(() => {
+    cleanup();
+});
+
+- The "afterEach" function should only have the "cleanup()" line inside it and should be adde to the "vitest" imports.
+- For click events, import userEvent from "@testing-library/user-event"
+- Mock other components that can make the text more complex and but at the same time mocking it wouldn't make the test flaky. It's ok to leave basic and simple components.
+- You don't need to mock @tolgee/react
+- Use "import "@testing-library/jest-dom/vitest";"

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

@@ -32,11 +32,6 @@ on:
         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"
@@ -85,7 +80,6 @@ jobs:
           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 }}

.github/workflows/chromatic.yml

@@ -13,12 +13,13 @@ jobs:
   chromatic:
     name: Run Chromatic
     runs-on: ubuntu-latest
-    timeout-minutes: 30
     permissions:
-      contents: read
+      packages: write
+      id-token: write
+      actions: 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
 
@@ -26,34 +27,16 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           fetch-depth: 0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+      - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           node-version: 20
-
       - name: Install pnpm
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
-
       - name: Run Chromatic
-        uses: chromaui/action@4c20b95e9d3209ecfdf9cd6aace6bbde71ba1694 # v13.3.4
+        uses: chromaui/action@c93e0bc3a63aa176e14a75b61a31847cbfdd341c # latest
         with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: apps/storybook
-          zip: true

.github/workflows/e2e.yml

@@ -3,9 +3,13 @@ name: E2E Tests
 on:
   workflow_call:
     secrets:
-      PLAYWRIGHT_SERVICE_URL:
+      AZURE_CLIENT_ID:
         required: false
-      PLAYWRIGHT_SERVICE_ACCESS_TOKEN:
+      AZURE_TENANT_ID:
+        required: false
+      AZURE_SUBSCRIPTION_ID:
+        required: false
+      PLAYWRIGHT_SERVICE_URL:
         required: false
       ENTERPRISE_LICENSE_KEY:
         required: true
@@ -13,10 +17,12 @@ on:
   workflow_dispatch:
 
 env:
+  TELEMETRY_DISABLED: 1
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 
 permissions:
+  id-token: write
   contents: read
   actions: read
 
@@ -109,7 +115,7 @@ jobs:
       - name: Start MinIO Server
         run: |
           set -euo pipefail
-
+          
           # Start MinIO server in background
           docker run -d \
             --name minio-server \
@@ -119,7 +125,7 @@ jobs:
             -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
@@ -175,12 +181,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..."
@@ -202,32 +202,31 @@ jobs:
       - name: Install Playwright
         run: pnpm exec playwright install --with-deps
 
-      - name: Determine Playwright execution mode
-        shell: bash
-        env:
-          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
-          PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
+      - name: Set Azure Secret Variables
         run: |
-          set -euo pipefail
-
-          if [[ -n "${PLAYWRIGHT_SERVICE_URL}" && -n "${PLAYWRIGHT_SERVICE_ACCESS_TOKEN}" ]]; then
-            echo "PW_MODE=service" >> "$GITHUB_ENV"
+          if [[ -n "${{ secrets.AZURE_CLIENT_ID }}" && -n "${{ secrets.AZURE_TENANT_ID }}" && -n "${{ secrets.AZURE_SUBSCRIPTION_ID }}" ]]; then
+            echo "AZURE_ENABLED=true" >> $GITHUB_ENV
           else
-            echo "PW_MODE=local" >> "$GITHUB_ENV"
+            echo "AZURE_ENABLED=false" >> $GITHUB_ENV
           fi
 
-      - name: Run E2E Tests (Playwright Service)
-        if: env.PW_MODE == 'service'
+      - name: Azure login
+        if: env.AZURE_ENABLED == 'true'
+        uses: azure/login@a65d910e8af852a8061c627c456678983e180302 # v2.2.0
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
+      - name: Run E2E Tests (Azure)
+        if: env.AZURE_ENABLED == 'true'
         env:
           PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
-          PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
-          CI: true
-        run: pnpm test-e2e:azure
+        run: |
+          pnpm test-e2e:azure
 
       - name: Run E2E Tests (Local)
-        if: env.PW_MODE == 'local'
-        env:
-          CI: true
+        if: env.AZURE_ENABLED == 'false'
         run: |
           pnpm test:e2e
 

.github/workflows/formbricks-release.yml

@@ -8,75 +8,6 @@ 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
     permissions:
@@ -85,11 +16,8 @@ jobs:
       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 == 'true' }}
 
   docker-build-cloud:
     name: Build & push Formbricks Cloud to ECR
@@ -101,9 +29,7 @@ jobs:
     with:
       image_tag: ${{ needs.docker-build-community.outputs.VERSION }}
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
     needs:
-      - check-latest-release
       - docker-build-community
 
   helm-chart-release:
@@ -148,10 +74,8 @@ jobs:
       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 == 'true' }}

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

@@ -16,11 +16,6 @@ on:
         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
@@ -37,8 +32,8 @@ jobs:
     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 }}
+    # Only move stable tag for non-prerelease versions
+    if: ${{ !inputs.is_prerelease }}
     steps:
       - name: Harden the runner
         uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0

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

@@ -1,159 +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\n\n' +
-              'This PR has approximately **' + totalChanges + ' lines** of changes (' + additions + ' additions, ' + deletions + ' deletions across ' + countedFiles + ' files).\n\n' +
-              'Large PRs (>800 lines) are significantly harder to review and increase the chance of merge conflicts. Consider splitting this into smaller, self-contained PRs.\n\n' +
-              '### 💡 Suggestions:\n' +
-              '- **Split by feature or module** - Break down into logical, independent pieces\n' +
-              '- **Create a sequence of PRs** - Each building on the previous one\n' +
-              '- **Branch off PR branches** - Don\'t wait for reviews to continue dependent work\n\n' +
-              '### 📊 What was counted:\n' +
-              '- ✅ Source files, stylesheets, configuration files\n' +
-              '- ❌ Excluded ' + excludedFiles + ' files (tests, locales, locks, generated files)\n\n' +
-              '### 📚 Guidelines:\n' +
-              '- **Ideal:** 300-500 lines per PR\n' +
-              '- **Warning:** 500-800 lines\n' +
-              '- **Critical:** 800+ lines ⚠️\n\n' +
-              '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.yml

@@ -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
@@ -98,7 +93,6 @@ jobs:
           ghcr_image_name: ${{ env.IMAGE_NAME }}
           version: ${{ steps.extract_release_tag.outputs.VERSION }}
           is_prerelease: ${{ inputs.IS_PRERELEASE }}
-          make_latest: ${{ inputs.MAKE_LATEST }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           DEPOT_PROJECT_TOKEN: ${{ secrets.DEPOT_PROJECT_TOKEN }}

.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/tolgee-missing-key-check.yml

@@ -0,0 +1,51 @@
+name: Check Missing Translations
+
+permissions:
+  contents: read
+
+on:
+  workflow_dispatch:
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  check-missing-translations:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+        with:
+          ref: ${{ github.event.pull_request.base.ref }}
+
+      - name: Checkout PR
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        with:
+          node-version: 18
+
+      - name: Install Tolgee CLI
+        run: npm install -g @tolgee/cli
+
+      - name: Compare Tolgee Keys
+        id: compare
+        run: |
+          tolgee compare --api-key ${{ secrets.TOLGEE_API_KEY }} > compare_output.txt
+          cat compare_output.txt
+
+      - name: Check for Missing Translations
+        run: |
+          if grep -q "new key found" compare_output.txt; then
+            echo "New keys found that may require translations:"
+            exit 1
+          else
+            echo "No new keys found."
+          fi

.github/workflows/tolgee.yml

@@ -0,0 +1,95 @@
+name: Tolgee Tagging on PR Merge
+permissions:
+  contents: read
+
+on:
+  pull_request_target:
+    types: [closed]
+    branches:
+      - main
+
+jobs:
+  tag-production-keys:
+    name: Tag Production Keys
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true
+
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        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 # This ensures we get the full git history
+
+      - name: Get source branch name
+        id: branch-name
+        env:
+          RAW_BRANCH: ${{ github.head_ref }}
+        run: |
+          # Validate and sanitize branch name - only allow alphanumeric, dots, underscores, hyphens, and forward slashes
+          SOURCE_BRANCH=$(echo "$RAW_BRANCH" | sed 's/[^a-zA-Z0-9._\/-]//g')
+
+          # Additional validation - ensure branch name is not empty after sanitization
+          if [[ -z "$SOURCE_BRANCH" ]]; then
+            echo "❌ Error: Branch name is empty after sanitization"
+            echo "Original branch: $RAW_BRANCH"
+            exit 1
+          fi
+
+          # Safely add to environment variables using GitHub's recommended method
+          # This prevents environment variable injection attacks
+          echo "SOURCE_BRANCH<<EOF" >> $GITHUB_ENV
+          echo "$SOURCE_BRANCH" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
+
+          echo "Detected source branch: $SOURCE_BRANCH"
+
+      - name: Setup Node.js
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        with:
+          node-version: 18 # Ensure compatibility with your project
+
+      - name: Install Tolgee CLI
+        run: npm install -g @tolgee/cli
+
+      - name: Tag Production Keys
+        run: |
+          npx tolgee tag \
+            --api-key ${{ secrets.TOLGEE_API_KEY }} \
+            --filter-extracted \
+            --filter-tag "draft:${SOURCE_BRANCH}" \
+            --tag production \
+            --untag "draft:${SOURCE_BRANCH}"
+
+      - name: Tag unused production keys as Deprecated
+        run: |
+          npx tolgee tag \
+            --api-key ${{ secrets.TOLGEE_API_KEY }} \
+            --filter-not-extracted --filter-tag production \
+            --tag deprecated --untag production
+
+      - name: Tag unused draft:current-branch keys as Deprecated
+        run: |
+          npx tolgee tag \
+            --api-key ${{ secrets.TOLGEE_API_KEY }} \
+            --filter-not-extracted --filter-tag "draft:${SOURCE_BRANCH}" \
+            --tag deprecated --untag "draft:${SOURCE_BRANCH}"
+
+      - name: Sync with backup
+        run: |
+          npx tolgee sync \
+            --api-key ${{ secrets.TOLGEE_API_KEY }} \
+            --backup ./tolgee-backup \
+            --continue-on-warning \
+            --yes
+
+      - name: Upload backup as artifact
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
+        with:
+          name: tolgee-backup-${{ github.sha }}
+          path: ./tolgee-backup
+          retention-days: 90

.github/workflows/translation-check.yml

@@ -1,63 +0,0 @@
-name: Translation Validation
-
-permissions:
-  contents: read
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened]
-    paths:
-      - "apps/web/**/*.ts"
-      - "apps/web/**/*.tsx"
-      - "apps/web/locales/**/*.json"
-      - "scan-translations.ts"
-  push:
-    branches:
-      - main
-    paths:
-      - "apps/web/**/*.ts"
-      - "apps/web/**/*.tsx"
-      - "apps/web/locales/**/*.json"
-      - "scan-translations.ts"
-
-jobs:
-  validate-translations:
-    name: Validate Translation Keys
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-
-    steps:
-      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
-        with:
-          egress-policy: audit
-
-      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
-        with:
-          node-version: 18
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d # v3.0.0
-        with:
-          version: 9.15.9
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Validate translation keys
-        run: |
-          echo ""
-          echo "🔍 Validating translation keys..."
-          echo ""
-          pnpm run scan-translations
-
-      - name: Summary
-        if: success()
-        run: |
-          echo ""
-          echo "✅ Translation validation completed successfully!"
-          echo ""

.gitignore

@@ -56,15 +56,22 @@ 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
-stats.html
-
-# Agent skill archives
-.agent/skills/**/.archived/
-.agent/.temp-skills/
-

.husky/pre-commit

@@ -1,3 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
 # Load environment variables from .env files
 if [ -f .env ]; then
   set -a
@@ -7,34 +10,12 @@ fi
 
 pnpm lint-staged
 
-# Run Lingo.dev i18n workflow if LINGODOTDEV_API_KEY is set
-if [ -n "$LINGODOTDEV_API_KEY" ]; then
-  echo ""
-  echo "🌍 Running Lingo.dev translation workflow..."
-  echo ""
-  
-  # Run translation generation and validation
-  if pnpm run i18n; then
-    echo ""
-    echo "✅ Translation validation passed"
-    echo ""
-    # Add updated locale files to git
-    git add apps/web/locales/*.json
+# Run tolgee-pull if branch.json exists and NEXT_PUBLIC_TOLGEE_API_KEY is not set
+if [ -f branch.json ]; then
+  if [ -z "$NEXT_PUBLIC_TOLGEE_API_KEY" ]; then
+    echo "Skipping tolgee-pull: NEXT_PUBLIC_TOLGEE_API_KEY is not set"
   else
-    echo ""
-    echo "❌ Translation validation failed!"
-    echo ""
-    echo "Please fix the translation issues above before committing:"
-    echo "  • Add missing translation keys to your locale files"
-    echo "  • Remove unused translation keys"
-    echo ""
-    echo "Or run 'pnpm i18n' to see the detailed report"
-    echo ""
-    exit 1
+    pnpm run tolgee-pull
+    git add apps/web/locales
   fi
-else
-  echo ""
-  echo "⚠️  Skipping translation validation: LINGODOTDEV_API_KEY is not set"
-  echo "   (This is expected for community contributors)"
-  echo ""
 fi

.tolgeerc.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://docs.tolgee.io/cli-schema.json",
+  "format": "JSON_TOLGEE",
+  "patterns": ["./apps/web/**/*.ts?(x)"],
+  "projectId": 10304,
+  "pull": {
+    "path": "./apps/web/locales"
+  },
+  "push": {
+    "files": [
+      {
+        "language": "en-US",
+        "path": "./apps/web/locales/en-US.json"
+      },
+      {
+        "language": "de-DE",
+        "path": "./apps/web/locales/de-DE.json"
+      },
+      {
+        "language": "fr-FR",
+        "path": "./apps/web/locales/fr-FR.json"
+      },
+      {
+        "language": "pt-BR",
+        "path": "./apps/web/locales/pt-BR.json"
+      },
+      {
+        "language": "zh-Hant-TW",
+        "path": "./apps/web/locales/zh-Hant-TW.json"
+      },
+      {
+        "language": "pt-PT",
+        "path": "./apps/web/locales/pt-PT.json"
+      },
+      {
+        "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"
+  },
+  "strictNamespace": false
+}

.vscode/settings.json

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

AGENTS.md

@@ -1,82 +0,0 @@
-# Repository Guidelines
-
-## Project Structure & Module Organization
-
-Formbricks runs as a pnpm/turbo monorepo. `apps/web` is the Next.js product surface, with feature modules under `app/` and `modules/`, assets in `public/` and `images/`, and Playwright specs in `apps/web/playwright/`. `apps/storybook` renders reusable UI pieces for review. Shared logic lives in `packages/*`: `database` (Prisma schemas/migrations), `surveys`, `js-core`, `types`, plus linting and TypeScript presets (`config-*`). Deployment collateral is kept in `docs/`, `docker/`, and `helm-chart/`. Unit tests sit next to their source as `*.test.ts` or inside `__tests__`.
-
-## Build, Test & Development Commands
-
-- `pnpm install` — install workspace dependencies pinned by `pnpm-lock.yaml`.
-- `pnpm db:up` / `pnpm db:down` — start/stop the Docker services backing the app.
-- `pnpm dev` — run all app and worker dev servers in parallel via Turborepo.
-- `pnpm build` — generate production builds for every package and app.
-- `pnpm lint` — apply the shared ESLint rules across the workspace.
-- `pnpm test` / `pnpm test:coverage` — execute Vitest suites with optional coverage.
-- `pnpm test:e2e` — launch the Playwright browser regression suite.
-- `pnpm db:migrate:dev` — apply Prisma migrations against the dev database.
-
-## Coding Style & Naming Conventions
-
-TypeScript, React, and Prisma are the primary languages. Use the shared ESLint presets (`@formbricks/eslint-config`) and Prettier preset (110-char width, semicolons, double quotes, sorted import groups). Two-space indentation is standard; prefer `PascalCase` for React components and folders under `modules/`, `camelCase` for functions/variables, and `SCREAMING_SNAKE_CASE` only for constants. When adding mocks, place them inside `__mocks__` so import ordering stays stable.
-We are using SonarQube to identify code smells and security hotspots.
-
-## Architecture & Patterns
-
-- Next.js app router lives in `apps/web/app` with route groups like `(app)` and `(auth)`. Services live in `apps/web/lib`, feature modules in `apps/web/modules`.
-- Server actions wrap service calls and return `{ data }` or `{ error }` consistently.
-- Context providers should guard against missing provider usage and use cleanup patterns that snapshot refs inside `useEffect` to avoid React hooks warnings
-
-## Caching
-
-- Use React `cache()` for request-level dedupe and `cache.withCache()` or explicit Redis for expensive data.
-- Do not use Next.js `unstable_cache()`.
-- Always use `createCacheKey.*` utilities for cache keys.
-
-## i18n (Internationalization)
-
-- All user-facing text must use the `t()` function from `react-i18next`.
-- Key naming: use lowercase with dots for nesting (e.g., `common.welcome`).
-- Translations are in `apps/web/locales/`. Default is `en-US.json`.
-- Lingo.dev is automatically translating strings from en-US into other languages on commit. Run `pnpm i18n` to generate missing translations and validate keys.
-
-## Database & Prisma Performance
-
-- Multi-tenancy: All data must be scoped by Organization or Environment.
-- Soft Deletion: Check for `isActive` or `deletedAt` fields; use proper filtering.
-- Never use `skip`/`offset` with `prisma.response.count()`; only use `where`.
-- Separate count and data queries and run in parallel (`Promise.all`).
-- Prefer cursor pagination for large datasets.
-- When filtering by `createdAt`, include indexed fields (e.g., `surveyId` + `createdAt`).
-
-## Testing Guidelines
-
-Prefer Vitest with Testing Library for logic in `.ts` files, keeping specs colocated with the code they exercise (`utility.test.ts`). Do not write tests for `.tsx` files—React components are covered by Playwright E2E tests instead. Mock network and storage boundaries through helpers from `@formbricks/*`. Run `pnpm test` before opening a PR and `pnpm test:coverage` when touching critical flows; keep coverage from regressing. End-to-end scenarios belong in `apps/web/playwright`, using descriptive filenames (`billing.spec.ts`) and tagging slow suites with `@slow` when necessary.
-
-## Documentation (apps/docs)
-
-- Add frontmatter with `title`, `description`, and `icon` at the top of the MDX file.
-- Do not start with an H1; use Camel Case headings (only capitalize the feature name).
-- Use Mintlify components for steps and callouts.
-- If Enterprise-only, add the Enterprise note block described in docs.
-
-## Storybook
-
-- Stories live in `stories.tsx` in the component folder and import from `"./index"`.
-- Use `@storybook/react-vite` and organize argTypes into `Behavior`, `Appearance`, `Content`.
-- Include Default, Disabled (if supported), WithIcon (if supported), all variants, and edge cases.
-
-## GitHub Actions
-
-- Always set minimal `permissions` for `GITHUB_TOKEN`.
-- On `ubuntu-latest`, add `step-security/harden-runner` as the first step.
-
-## Quality Checklist
-
-- Keep code DRY and small; remove dead code and unused imports.
-- Follow React hooks rules, keep effects focused, and avoid unnecessary `useMemo`/`useCallback`.
-- Prefer type inference, avoid `any`, and use shared types from `@formbricks/types`.
-- Keep components focused, avoid deep nesting, and ensure basic accessibility.
-
-## Commit & Pull Request Guidelines
-
-Commits follow a lightweight Conventional Commit format (`fix:`, `chore:`, `feat:`) and usually append the PR number, e.g. `fix: update OpenAPI schema (#6617)`. Keep commits scoped and lint-clean. Pull requests should outline the problem, summarize the solution, and link to issues or product specs. Attach screenshots or gifs for UI-facing work, list any migrations or env changes, and paste the output of relevant commands (`pnpm test`, `pnpm lint`, `pnpm db:migrate:dev`) so reviewers can verify readiness.

README.md

@@ -203,14 +203,6 @@ Here are a few options:
 
 </a>
 
-## Thanks
-
-Formbricks is supported by the following companies who provide us with their tools for free as part of their open-source support:
-
-<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
-&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://sentry.io/"><img src="https://github.com/user-attachments/assets/d743ffd4-b575-4802-a29a-10136be9227e" width="150" height="30" alt="Sentry" /></a>
-
 <a id="contact-us"></a>
 
 ## 📆 Contact us

apps/storybook/.storybook/main.ts

@@ -1,11 +1,8 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import { createRequire } from "module";
-import { dirname, join, resolve } from "path";
-import { fileURLToPath } from "url";
+import { dirname, join } from "path";
 
 const require = createRequire(import.meta.url);
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -16,7 +13,7 @@ function getAbsolutePath(value: string): any {
 }
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../../../packages/survey-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../../web/modules/ui/**/stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
@@ -28,25 +25,5 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
-  async viteFinal(config) {
-    const surveyUiPath = resolve(__dirname, "../../../packages/survey-ui/src");
-    const rootPath = resolve(__dirname, "../../../");
-
-    // Configure server to allow files from outside the storybook directory
-    config.server = config.server || {};
-    config.server.fs = {
-      ...config.server.fs,
-      allow: [...(config.server.fs?.allow || []), rootPath],
-    };
-
-    // Configure simple alias resolution
-    config.resolve = config.resolve || {};
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      "@": surveyUiPath,
-    };
-
-    return config;
-  },
 };
 export default config;

apps/storybook/.storybook/preview.ts

@@ -1,6 +1,32 @@
 import type { Preview } from "@storybook/react-vite";
+import { TolgeeProvider } from "@tolgee/react";
 import React from "react";
-import "../../../packages/survey-ui/src/styles/globals.css";
+// 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";
+
+// Create a Storybook-specific Tolgee decorator
+const withTolgee = (Story: any) => {
+  const tolgee = TolgeeBase().init({
+    tagNewKeys: [], // No branch tagging in Storybook
+  });
+
+  return React.createElement(
+    TolgeeProvider,
+    {
+      tolgee,
+      fallback: "Loading",
+      ssr: {
+        language: "en-US",
+        staticData: {
+          "en-US": enUSTranslations,
+        },
+      },
+    },
+    React.createElement(Story)
+  );
+};
 
 const preview: Preview = {
   parameters: {
@@ -9,23 +35,9 @@ const preview: Preview = {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
-      expanded: true,
-    },
-    backgrounds: {
-      default: "light",
     },
   },
-  decorators: [
-    (Story) =>
-      React.createElement(
-        "div",
-        {
-          id: "fbjs",
-          className: "w-full h-full min-h-screen p-4 bg-background font-sans antialiased text-foreground",
-        },
-        React.createElement(Story)
-      ),
-  ],
+  decorators: [withTolgee],
 };
 
 export default preview;

apps/storybook/package.json

@@ -11,24 +11,22 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "dependencies": {
-    "@formbricks/survey-ui": "workspace:*"
+    "eslint-plugin-react-refresh": "0.4.20"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.0",
-    "@storybook/addon-a11y": "10.1.11",
-    "@storybook/addon-links": "10.1.11",
-    "@storybook/addon-onboarding": "10.1.11",
-    "@storybook/react-vite": "10.1.11",
-    "@typescript-eslint/eslint-plugin": "8.53.0",
-    "@tailwindcss/vite": "4.1.18",
-    "@typescript-eslint/parser": "8.53.0",
-    "@vitejs/plugin-react": "5.1.2",
-    "esbuild": "0.27.2",
-    "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.1.11",
+    "@chromatic-com/storybook": "^4.0.1",
+    "@storybook/addon-a11y": "9.0.15",
+    "@storybook/addon-links": "9.0.15",
+    "@storybook/addon-onboarding": "9.0.15",
+    "@storybook/react-vite": "9.0.15",
+    "@typescript-eslint/eslint-plugin": "8.32.0",
+    "@typescript-eslint/parser": "8.32.0",
+    "@vitejs/plugin-react": "4.4.1",
+    "esbuild": "0.25.4",
+    "eslint-plugin-storybook": "9.0.15",
     "prop-types": "15.8.1",
-    "storybook": "10.1.11",
-    "vite": "7.3.1",
-    "@storybook/addon-docs": "10.1.11"
+    "storybook": "9.0.15",
+    "vite": "6.3.6",
+    "@storybook/addon-docs": "9.0.15"
   }
 }

apps/storybook/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/storybook/tailwind.config.js

@@ -1,15 +1,7 @@
 /** @type {import('tailwindcss').Config} */
-import surveyUi from "../../packages/survey-ui/tailwind.config";
+import base from "../web/tailwind.config";
 
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "../../packages/survey-ui/src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      ...surveyUi.theme?.extend,
-    },
-  },
+  ...base,
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "../web/modules/ui/**/*.{js,ts,jsx,tsx}"],
 };

apps/storybook/vite.config.ts

@@ -1,17 +1,16 @@
-import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react()],
   define: {
     "process.env": {},
   },
   resolve: {
     alias: {
-      "@formbricks/survey-ui": path.resolve(__dirname, "../../packages/survey-ui/src"),
+      "@": path.resolve(__dirname, "../web"),
     },
   },
 });

apps/web/.eslintignore

@@ -1,7 +0,0 @@
-node_modules/
-.next/
-public/
-playwright/
-dist/
-coverage/
-vendor/

apps/web/Dockerfile

@@ -37,10 +37,6 @@ ENV NODE_OPTIONS=${NODE_OPTIONS}
 # but needs explicit declaration for some build systems (like Depot)
 ARG TARGETARCH
 
-# Base path for the application (optional)
-ARG BASE_PATH=""
-ENV BASE_PATH=${BASE_PATH}
-
 # Set the working directory
 WORKDIR /app
 
@@ -77,8 +73,8 @@ RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_ver
 #
 FROM base AS runner
 
-RUN npm install --ignore-scripts -g corepack@latest && \
-    corepack enable
+RUN npm install --ignore-scripts -g corepack@latest 
+RUN corepack enable
 
 RUN apk add --no-cache curl \
     && apk add --no-cache supercronic \
@@ -104,9 +100,6 @@ RUN chown -R nextjs:nextjs ./apps/web/.next/static && chmod -R 755 ./apps/web/.n
 COPY --from=installer /app/apps/web/public ./apps/web/public
 RUN chown -R nextjs:nextjs ./apps/web/public && chmod -R 755 ./apps/web/public
 
-# Create packages/database directory structure with proper ownership for runtime migrations
-RUN mkdir -p ./packages/database/migrations && chown -R nextjs:nextjs ./packages/database
-
 COPY --from=installer /app/packages/database/schema.prisma ./packages/database/schema.prisma
 RUN chown nextjs:nextjs ./packages/database/schema.prisma && chmod 644 ./packages/database/schema.prisma
 
@@ -131,7 +124,7 @@ RUN chmod -R 755 ./node_modules/@noble/hashes
 COPY --from=installer /app/node_modules/zod ./node_modules/zod
 RUN chmod -R 755 ./node_modules/zod
 
-RUN npm install -g prisma@6
+RUN npm install -g prisma
 
 # Create a startup script to handle the conditional logic
 COPY --from=installer /app/apps/web/scripts/docker/next-start.sh /home/nextjs/start.sh
@@ -141,13 +134,12 @@ EXPOSE 3000
 ENV HOSTNAME="0.0.0.0"
 USER nextjs
 
-# Prepare pnpm as the nextjs user to ensure it's available at runtime
-# Prepare volumes for uploads and SAML connections
-RUN corepack prepare pnpm@9.15.9 --activate && \
-    mkdir -p /home/nextjs/apps/web/uploads/ && \
-    mkdir -p /home/nextjs/apps/web/saml-connection
-
+# Prepare volume for uploads
+RUN mkdir -p /home/nextjs/apps/web/uploads/
 VOLUME /home/nextjs/apps/web/uploads/
+
+# Prepare volume for SAML preloaded connection
+RUN mkdir -p /home/nextjs/apps/web/saml-connection
 VOLUME /home/nextjs/apps/web/saml-connection
 
 CMD ["/home/nextjs/start.sh"]

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

@@ -0,0 +1,79 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { ConnectWithFormbricks } from "./ConnectWithFormbricks";
+
+// Mocks before import
+const pushMock = vi.fn();
+const refreshMock = vi.fn();
+vi.mock("@tolgee/react", () => ({ useTranslate: () => ({ t: (key: string) => key }) }));
+vi.mock("next/navigation", () => ({ useRouter: vi.fn(() => ({ push: pushMock, refresh: refreshMock })) }));
+vi.mock("./OnboardingSetupInstructions", () => ({
+  OnboardingSetupInstructions: () => <div data-testid="instructions" />,
+}));
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("ConnectWithFormbricks", () => {
+  const environment = { id: "env1" } as any;
+  const webAppUrl = "http://app";
+  const channel = {} as any;
+
+  test("renders waiting state when appSetupCompleted is false", () => {
+    render(
+      <ConnectWithFormbricks
+        environment={environment}
+        publicDomain={webAppUrl}
+        appSetupCompleted={false}
+        channel={channel}
+      />
+    );
+    expect(screen.getByTestId("instructions")).toBeInTheDocument();
+    expect(screen.getByText("environments.connect.waiting_for_your_signal")).toBeInTheDocument();
+  });
+
+  test("renders success state when appSetupCompleted is true", () => {
+    render(
+      <ConnectWithFormbricks
+        environment={environment}
+        publicDomain={webAppUrl}
+        appSetupCompleted={true}
+        channel={channel}
+      />
+    );
+    expect(screen.getByText("environments.connect.congrats")).toBeInTheDocument();
+    expect(screen.getByText("environments.connect.connection_successful_message")).toBeInTheDocument();
+  });
+
+  test("clicking finish button navigates to surveys", async () => {
+    render(
+      <ConnectWithFormbricks
+        environment={environment}
+        publicDomain={webAppUrl}
+        appSetupCompleted={true}
+        channel={channel}
+      />
+    );
+    const button = screen.getByRole("button", { name: "environments.connect.finish_onboarding" });
+    await userEvent.click(button);
+    expect(pushMock).toHaveBeenCalledWith(`/environments/${environment.id}/surveys`);
+  });
+
+  test("refresh is called on visibilitychange to visible", () => {
+    render(
+      <ConnectWithFormbricks
+        environment={environment}
+        publicDomain={webAppUrl}
+        appSetupCompleted={false}
+        channel={channel}
+      />
+    );
+    Object.defineProperty(document, "visibilityState", { value: "visible", configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(refreshMock).toHaveBeenCalled();
+  });
+});

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

@@ -1,13 +1,13 @@
 "use client";
 
+import { cn } from "@/lib/cn";
+import { Button } from "@/modules/ui/components/button";
+import { useTranslate } from "@tolgee/react";
 import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TProjectConfigChannel } from "@formbricks/types/project";
-import { cn } from "@/lib/cn";
-import { Button } from "@/modules/ui/components/button";
 import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";
 
 interface ConnectWithFormbricksProps {
@@ -23,7 +23,7 @@ export const ConnectWithFormbricks = ({
   appSetupCompleted,
   channel,
 }: ConnectWithFormbricksProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const router = useRouter();
   const handleFinishOnboarding = async () => {
     router.push(`/environments/${environment.id}/surveys`);

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

@@ -0,0 +1,103 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import toast from "react-hot-toast";
+import { afterEach, beforeAll, describe, expect, test, vi } from "vitest";
+import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";
+
+// Mock react-hot-toast so we can assert that a success message is shown
+vi.mock("react-hot-toast", () => ({
+  __esModule: true,
+  default: {
+    success: vi.fn(),
+  },
+}));
+
+// Set up a spy for navigator.clipboard.writeText so it becomes a ViTest spy.
+beforeAll(() => {
+  Object.defineProperty(navigator, "clipboard", {
+    configurable: true,
+    writable: true,
+    value: {
+      // Using a mockResolvedValue resolves the promise as writeText is async.
+      writeText: vi.fn().mockResolvedValue(undefined),
+    },
+  });
+});
+
+describe("OnboardingSetupInstructions", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  // Provide some default props for testing
+  const defaultProps = {
+    environmentId: "env-123",
+    publicDomain: "https://example.com",
+    channel: "app" as const, // Assuming channel is either "app" or "website"
+    appSetupCompleted: false,
+  };
+
+  test("renders HTML tab content by default", () => {
+    render(<OnboardingSetupInstructions {...defaultProps} />);
+
+    // Since the default active tab is "html", we check for a unique text
+    expect(
+      screen.getByText(/environments.connect.insert_this_code_into_the_head_tag_of_your_website/i)
+    ).toBeInTheDocument();
+
+    // The HTML snippet contains a marker comment
+    expect(screen.getByText("START")).toBeInTheDocument();
+
+    // Verify the "Copy Code" button is present
+    expect(screen.getByRole("button", { name: /common.copy_code/i })).toBeInTheDocument();
+  });
+
+  test("renders NPM tab content when selected", async () => {
+    render(<OnboardingSetupInstructions {...defaultProps} />);
+    const user = userEvent.setup();
+
+    // Click on the "NPM" tab to switch views.
+    const npmTab = screen.getByText("NPM");
+    await user.click(npmTab);
+
+    // Check that the install commands are present
+    expect(screen.getByText(/npm install @formbricks\/js/)).toBeInTheDocument();
+    expect(screen.getByText(/yarn add @formbricks\/js/)).toBeInTheDocument();
+
+    // Verify the "Read Docs" link has the correct URL (based on channel prop)
+    const readDocsLink = screen.getByRole("link", { name: /common.read_docs/i });
+    expect(readDocsLink).toHaveAttribute("href", "https://formbricks.com/docs/app-surveys/framework-guides");
+  });
+
+  test("copies HTML snippet to clipboard and shows success toast when Copy Code button is clicked", async () => {
+    render(<OnboardingSetupInstructions {...defaultProps} />);
+    const user = userEvent.setup();
+
+    const writeTextSpy = vi.spyOn(navigator.clipboard, "writeText");
+
+    // Click the "Copy Code" button
+    const copyButton = screen.getByRole("button", { name: /common.copy_code/i });
+    await user.click(copyButton);
+
+    // Ensure navigator.clipboard.writeText was called.
+    expect(writeTextSpy).toHaveBeenCalled();
+    const writtenText = (navigator.clipboard.writeText as any).mock.calls[0][0] as string;
+
+    // Check that the pasted snippet contains the expected environment values
+    expect(writtenText).toContain('var appUrl = "https://example.com"');
+    expect(writtenText).toContain('var environmentId = "env-123"');
+
+    // Verify that a success toast was shown
+    expect(toast.success).toHaveBeenCalledWith("common.copied_to_clipboard");
+  });
+
+  test("renders step-by-step manual link with correct URL in HTML tab", () => {
+    render(<OnboardingSetupInstructions {...defaultProps} />);
+    const manualLink = screen.getByRole("link", { name: /common.step_by_step_manual/i });
+    expect(manualLink).toHaveAttribute(
+      "href",
+      "https://formbricks.com/docs/app-surveys/framework-guides#html"
+    );
+  });
+});

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

@@ -1,15 +1,15 @@
 "use client";
 
-import Link from "next/link";
-import "prismjs/themes/prism.css";
-import { useState } from "react";
-import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
-import { TProjectConfigChannel } from "@formbricks/types/project";
 import { Button } from "@/modules/ui/components/button";
 import { CodeBlock } from "@/modules/ui/components/code-block";
 import { Html5Icon, NpmIcon } from "@/modules/ui/components/icons";
 import { TabBar } from "@/modules/ui/components/tab-bar";
+import { useTranslate } from "@tolgee/react";
+import Link from "next/link";
+import "prismjs/themes/prism.css";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { TProjectConfigChannel } from "@formbricks/types/project";
 
 const tabs = [
   { id: "html", label: "HTML", icon: <Html5Icon /> },
@@ -29,7 +29,7 @@ export const OnboardingSetupInstructions = ({
   channel,
   appSetupCompleted,
 }: OnboardingSetupInstructionsProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [activeTab, setActiveTab] = useState(tabs[0].id);
   const htmlSnippetForAppSurveys = `<!-- START Formbricks Surveys -->
   <script type="text/javascript">

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

@@ -1,12 +1,12 @@
-import { XIcon } from "lucide-react";
-import Link from "next/link";
 import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
 import { getEnvironment } from "@/lib/environment/service";
 import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
-import { getTranslate } from "@/lingodotdev/server";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
+import { getTranslate } from "@/tolgee/server";
+import { XIcon } from "lucide-react";
+import Link from "next/link";
 
 interface ConnectPageProps {
   params: Promise<{
@@ -25,7 +25,7 @@ const Page = async (props: ConnectPageProps) => {
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new Error(t("common.project_not_found"));
   }
 
   const channel = project.config.channel || null;
@@ -46,7 +46,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>

apps/web/app/(app)/(onboarding)/environments/[environmentId]/layout.test.tsx

@@ -0,0 +1,147 @@
+import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
+import { cleanup, render, screen } from "@testing-library/react";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import OnboardingLayout from "./layout";
+
+vi.mock("@/lib/constants", () => ({
+  IS_FORMBRICKS_CLOUD: false,
+  IS_PRODUCTION: false,
+  IS_DEVELOPMENT: true,
+  E2E_TESTING: false,
+  WEBAPP_URL: "http://localhost:3000",
+  PUBLIC_URL: "http://localhost:3000/survey",
+  ENCRYPTION_KEY: "mock-encryption-key",
+  CRON_SECRET: "mock-cron-secret",
+  DEFAULT_BRAND_COLOR: "#64748b",
+  FB_LOGO_URL: "https://mock-logo-url.com/logo.png",
+  PRIVACY_URL: "http://localhost:3000/privacy",
+  TERMS_URL: "http://localhost:3000/terms",
+  IMPRINT_URL: "http://localhost:3000/imprint",
+  IMPRINT_ADDRESS: "Mock Address",
+  PASSWORD_RESET_DISABLED: false,
+  EMAIL_VERIFICATION_DISABLED: false,
+  GOOGLE_OAUTH_ENABLED: false,
+  GITHUB_OAUTH_ENABLED: false,
+  AZURE_OAUTH_ENABLED: false,
+  OIDC_OAUTH_ENABLED: false,
+  SAML_OAUTH_ENABLED: false,
+  SAML_XML_DIR: "./mock-saml-connection",
+  SIGNUP_ENABLED: true,
+  EMAIL_AUTH_ENABLED: true,
+  INVITE_DISABLED: false,
+  SLACK_CLIENT_SECRET: "mock-slack-secret",
+  SLACK_CLIENT_ID: "mock-slack-id",
+  SLACK_AUTH_URL: "https://mock-slack-auth-url.com",
+  GOOGLE_SHEETS_CLIENT_ID: "mock-google-sheets-id",
+  GOOGLE_SHEETS_CLIENT_SECRET: "mock-google-sheets-secret",
+  GOOGLE_SHEETS_REDIRECT_URL: "http://localhost:3000/google-sheets-redirect",
+  NOTION_OAUTH_CLIENT_ID: "mock-notion-id",
+  NOTION_OAUTH_CLIENT_SECRET: "mock-notion-secret",
+  NOTION_REDIRECT_URI: "http://localhost:3000/notion-redirect",
+  NOTION_AUTH_URL: "https://mock-notion-auth-url.com",
+  AIRTABLE_CLIENT_ID: "mock-airtable-id",
+  SMTP_HOST: "mock-smtp-host",
+  SMTP_PORT: "587",
+  SMTP_SECURE_ENABLED: false,
+  SMTP_USER: "mock-smtp-user",
+  SMTP_PASSWORD: "mock-smtp-password",
+  SMTP_AUTHENTICATED: true,
+  SMTP_REJECT_UNAUTHORIZED_TLS: true,
+  MAIL_FROM: "mock@mail.com",
+  MAIL_FROM_NAME: "Mock Mail",
+  NEXTAUTH_SECRET: "mock-nextauth-secret",
+  ITEMS_PER_PAGE: 30,
+  SURVEYS_PER_PAGE: 12,
+  RESPONSES_PER_PAGE: 25,
+  TEXT_RESPONSES_PER_PAGE: 5,
+  INSIGHTS_PER_PAGE: 10,
+  DOCUMENTS_PER_PAGE: 10,
+  MAX_RESPONSES_FOR_INSIGHT_GENERATION: 500,
+  MAX_OTHER_OPTION_LENGTH: 250,
+  ENTERPRISE_LICENSE_KEY: "ABC",
+  GITHUB_ID: "mock-github-id",
+  GITHUB_SECRET: "mock-github-secret",
+  GITHUB_OAUTH_URL: "https://mock-github-auth-url.com",
+  AZURE_ID: "mock-azure-id",
+  AZUREAD_CLIENT_ID: "mock-azure-client-id",
+  AZUREAD_CLIENT_SECRET: "mock-azure-client-secret",
+  GOOGLE_CLIENT_ID: "mock-google-client-id",
+  GOOGLE_CLIENT_SECRET: "mock-google-client-secret",
+  GOOGLE_OAUTH_URL: "https://mock-google-auth-url.com",
+  AZURE_OAUTH_URL: "https://mock-azure-auth-url.com",
+  OIDC_ID: "mock-oidc-id",
+  OIDC_OAUTH_URL: "https://mock-oidc-auth-url.com",
+  SAML_ID: "mock-saml-id",
+  SAML_OAUTH_URL: "https://mock-saml-auth-url.com",
+  SAML_METADATA_URL: "https://mock-saml-metadata-url.com",
+  AZUREAD_TENANT_ID: "mock-azure-tenant-id",
+  AZUREAD_OAUTH_URL: "https://mock-azuread-auth-url.com",
+  OIDC_DISPLAY_NAME: "Mock OIDC",
+  OIDC_CLIENT_ID: "mock-oidc-client-id",
+  OIDC_CLIENT_SECRET: "mock-oidc-client-secret",
+  OIDC_REDIRECT_URL: "http://localhost:3000/oidc-redirect",
+  OIDC_AUTH_URL: "https://mock-oidc-auth-url.com",
+  OIDC_ISSUER: "https://mock-oidc-issuer.com",
+  OIDC_SIGNING_ALGORITHM: "RS256",
+  SESSION_MAX_AGE: 1000,
+  REDIS_URL: undefined,
+  AUDIT_LOG_ENABLED: true,
+}));
+
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+}));
+
+vi.mock("next-auth", () => ({
+  getServerSession: vi.fn(),
+}));
+
+vi.mock("@/lib/environment/auth", () => ({
+  hasUserEnvironmentAccess: vi.fn(),
+}));
+
+describe("OnboardingLayout", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  test("redirects to login if session is missing", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce(null);
+
+    await OnboardingLayout({
+      params: { environmentId: "env1" },
+      children: <div>Test Content</div>,
+    });
+
+    expect(redirect).toHaveBeenCalledWith("/auth/login");
+  });
+
+  test("throws AuthorizationError if user lacks access", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user1" } });
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(false);
+
+    await expect(
+      OnboardingLayout({
+        params: { environmentId: "env1" },
+        children: <div>Test Content</div>,
+      })
+    ).rejects.toThrow("User is not authorized to access this environment");
+  });
+
+  test("renders children if user has access", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user1" } });
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
+
+    const result = await OnboardingLayout({
+      params: { environmentId: "env1" },
+      children: <div data-testid="child">Test Content</div>,
+    });
+
+    render(result);
+
+    expect(screen.getByTestId("child")).toHaveTextContent("Test Content");
+  });
+});

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

@@ -1,8 +1,8 @@
+import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
+import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { AuthorizationError } from "@formbricks/types/errors";
-import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
-import { authOptions } from "@/modules/auth/lib/authOptions";
 
 const OnboardingLayout = async (props) => {
   const params = await props.params;

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList.test.tsx

@@ -0,0 +1,76 @@
+import { createSurveyAction } from "@/modules/survey/components/template-list/actions";
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import toast from "react-hot-toast";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { XMTemplateList } from "./XMTemplateList";
+
+// Prepare push mock and module mocks before importing component
+const pushMock = vi.fn();
+vi.mock("@tolgee/react", () => ({ useTranslate: () => ({ t: (key: string) => key }) }));
+vi.mock("next/navigation", () => ({ useRouter: vi.fn(() => ({ push: pushMock })) }));
+vi.mock("react-hot-toast", () => ({ default: { error: vi.fn() } }));
+vi.mock("@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates", () => ({
+  getXMTemplates: (t: any) => [
+    { id: 1, name: "tmpl1" },
+    { id: 2, name: "tmpl2" },
+  ],
+}));
+vi.mock("@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils", () => ({
+  replacePresetPlaceholders: (template: any, project: any) => ({ ...template, projectId: project.id }),
+}));
+vi.mock("@/modules/survey/components/template-list/actions", () => ({ createSurveyAction: vi.fn() }));
+vi.mock("@/lib/utils/helper", () => ({ getFormattedErrorMessage: () => "formatted-error" }));
+vi.mock("@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer", () => ({
+  OnboardingOptionsContainer: ({ options }: { options: any[] }) => (
+    <div>
+      {options.map((opt, idx) => (
+        <button key={idx} data-testid={`option-${idx}`} onClick={opt.onClick}>
+          {opt.title}
+        </button>
+      ))}
+    </div>
+  ),
+}));
+
+// Reset mocks between tests
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("XMTemplateList component", () => {
+  const project = { id: "proj1" } as any;
+  const user = { id: "user1" } as any;
+  const environmentId = "env1";
+
+  test("creates survey and navigates on success", async () => {
+    // Mock successful survey creation
+    vi.mocked(createSurveyAction).mockResolvedValue({ data: { id: "survey1" } } as any);
+
+    render(<XMTemplateList project={project} user={user} environmentId={environmentId} />);
+
+    const option0 = screen.getByTestId("option-0");
+    await userEvent.click(option0);
+
+    expect(createSurveyAction).toHaveBeenCalledWith({
+      environmentId,
+      surveyBody: expect.objectContaining({ id: 1, projectId: "proj1", type: "link", createdBy: "user1" }),
+    });
+    expect(pushMock).toHaveBeenCalledWith(`/environments/${environmentId}/surveys/survey1/edit?mode=cx`);
+  });
+
+  test("shows error toast on failure", async () => {
+    // Mock failed survey creation
+    vi.mocked(createSurveyAction).mockResolvedValue({ error: "err" } as any);
+
+    render(<XMTemplateList project={project} user={user} environmentId={environmentId} />);
+
+    const option1 = screen.getByTestId("option-1");
+    await userEvent.click(option1);
+
+    expect(createSurveyAction).toHaveBeenCalled();
+    expect(toast.error).toHaveBeenCalledWith("formatted-error");
+  });
+});

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList.tsx

@@ -1,19 +1,19 @@
 "use client";
 
-import { ActivityIcon, ShoppingCartIcon, SmileIcon, StarIcon, ThumbsUpIcon, UsersIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
-import { TProject } from "@formbricks/types/project";
-import { TSurveyCreateInput } from "@formbricks/types/surveys/types";
-import { TXMTemplate } from "@formbricks/types/templates";
-import { TUser } from "@formbricks/types/user";
 import { replacePresetPlaceholders } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils";
 import { getXMTemplates } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates";
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { createSurveyAction } from "@/modules/survey/components/template-list/actions";
+import { useTranslate } from "@tolgee/react";
+import { ActivityIcon, ShoppingCartIcon, SmileIcon, StarIcon, ThumbsUpIcon, UsersIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { TProject } from "@formbricks/types/project";
+import { TSurveyCreateInput } from "@formbricks/types/surveys/types";
+import { TXMTemplate } from "@formbricks/types/templates";
+import { TUser } from "@formbricks/types/user";
 
 interface XMTemplateListProps {
   project: TProject;
@@ -23,7 +23,7 @@ interface XMTemplateListProps {
 
 export const XMTemplateList = ({ project, user, environmentId }: XMTemplateListProps) => {
   const [activeTemplateId, setActiveTemplateId] = useState<number | null>(null);
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const router = useRouter();
 
   const createSurvey = async (activeTemplate: TXMTemplate) => {

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

@@ -32,22 +32,14 @@ const mockProject: TProject = {
 };
 const mockTemplate: TXMTemplate = {
   name: "$[projectName] Survey",
-  blocks: [
+  questions: [
     {
-      id: "block1",
-      name: "Block 1",
-      elements: [
-        {
-          id: "q1",
-          type: "openText" as const,
-          inputType: "text" as const,
-          headline: { default: "$[projectName] Question" },
-          subheader: { default: "" },
-          required: false,
-          placeholder: { default: "" },
-          charLimit: 1000,
-        },
-      ],
+      id: "q1",
+      inputType: "text",
+      type: "email" as any,
+      headline: { default: "$[projectName] Question" },
+      required: false,
+      charLimit: { enabled: true, min: 400, max: 1000 },
     },
   ],
   endings: [
@@ -74,9 +66,9 @@ describe("replacePresetPlaceholders", () => {
     expect(result.name).toBe("Test Project Survey");
   });
 
-  test("replaces projectName placeholder in element headline", () => {
+  test("replaces projectName placeholder in question headline", () => {
     const result = replacePresetPlaceholders(mockTemplate, mockProject);
-    expect(result.blocks[0].elements[0].headline.default).toBe("Test Project Question");
+    expect(result.questions[0].headline.default).toBe("Test Project Question");
   });
 
   test("returns a new object without mutating the original template", () => {

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

@@ -1,16 +1,13 @@
+import { replaceQuestionPresetPlaceholders } from "@/lib/utils/templates";
 import { TProject } from "@formbricks/types/project";
-import { TSurveyBlock } from "@formbricks/types/surveys/blocks";
 import { TXMTemplate } from "@formbricks/types/templates";
-import { replaceElementPresetPlaceholders } from "@/lib/utils/templates";
 
 // replace all occurences of projectName with the actual project name in the current template
-export const replacePresetPlaceholders = (template: TXMTemplate, project: TProject): TXMTemplate => {
+export const replacePresetPlaceholders = (template: TXMTemplate, project: TProject) => {
   const survey = structuredClone(template);
-
-  const modifiedBlocks = survey.blocks.map((block: TSurveyBlock) => ({
-    ...block,
-    elements: block.elements.map((element) => replaceElementPresetPlaceholders(element, project)),
-  }));
-
-  return { ...survey, name: survey.name.replace("$[projectName]", project.name), blocks: modifiedBlocks };
+  survey.name = survey.name.replace("$[projectName]", project.name);
+  survey.questions = survey.questions.map((question) => {
+    return replaceQuestionPresetPlaceholders(question, project);
+  });
+  return { ...template, ...survey };
 };

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

@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/preact";
-import { TFunction } from "i18next";
+import { TFnType } from "@tolgee/react";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { getXMSurveyDefault, getXMTemplates } from "./xm-templates";
 
@@ -14,13 +14,13 @@ describe("xm-templates", () => {
   });
 
   test("getXMSurveyDefault returns default survey template", () => {
-    const tMock = vi.fn((key) => key) as TFunction;
+    const tMock = vi.fn((key) => key) as TFnType;
     const result = getXMSurveyDefault(tMock);
 
     expect(result).toEqual({
       name: "",
       endings: expect.any(Array),
-      blocks: [],
+      questions: [],
       styling: {
         overwriteThemeStyling: true,
       },
@@ -29,7 +29,7 @@ describe("xm-templates", () => {
   });
 
   test("getXMTemplates returns all templates", () => {
-    const tMock = vi.fn((key) => key) as TFunction;
+    const tMock = vi.fn((key) => key) as TFnType;
     const result = getXMTemplates(tMock);
 
     expect(result).toHaveLength(6);
@@ -44,7 +44,7 @@ describe("xm-templates", () => {
   test("getXMTemplates handles errors gracefully", async () => {
     const tMock = vi.fn(() => {
       throw new Error("Test error");
-    }) as TFunction;
+    }) as TFnType;
 
     const result = getXMTemplates(tMock);
 

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

@@ -1,23 +1,21 @@
+import {
+  buildCTAQuestion,
+  buildNPSQuestion,
+  buildOpenTextQuestion,
+  buildRatingQuestion,
+  getDefaultEndingCard,
+} from "@/app/lib/survey-builder";
 import { createId } from "@paralleldrive/cuid2";
-import { TFunction } from "i18next";
+import { TFnType } from "@tolgee/react";
 import { logger } from "@formbricks/logger";
 import { TXMTemplate } from "@formbricks/types/templates";
-import {
-  buildBlock,
-  buildCTAElement,
-  buildNPSElement,
-  buildOpenTextElement,
-  buildRatingElement,
-  createBlockJumpLogic,
-} from "@/app/lib/survey-block-builder";
-import { getDefaultEndingCard } from "@/app/lib/survey-builder";
 
-export const getXMSurveyDefault = (t: TFunction): TXMTemplate => {
+export const getXMSurveyDefault = (t: TFnType): TXMTemplate => {
   try {
     return {
       name: "",
       endings: [getDefaultEndingCard([], t)],
-      blocks: [],
+      questions: [],
       styling: {
         overwriteThemeStyling: true,
       },
@@ -28,72 +26,45 @@ export const getXMSurveyDefault = (t: TFunction): TXMTemplate => {
   }
 };
 
-const npsSurvey = (t: TFunction): TXMTemplate => {
+const npsSurvey = (t: TFnType): TXMTemplate => {
   return {
     ...getXMSurveyDefault(t),
     name: t("templates.nps_survey_name"),
-    blocks: [
-      buildBlock({
-        name: "Block 1",
-        elements: [
-          buildNPSElement({
-            headline: t("templates.nps_survey_question_1_headline"),
-            required: true,
-            lowerLabel: t("templates.nps_survey_question_1_lower_label"),
-            upperLabel: t("templates.nps_survey_question_1_upper_label"),
-            isColorCodingEnabled: true,
-          }),
-        ],
+    questions: [
+      buildNPSQuestion({
+        headline: t("templates.nps_survey_question_1_headline"),
+        required: true,
+        lowerLabel: t("templates.nps_survey_question_1_lower_label"),
+        upperLabel: t("templates.nps_survey_question_1_upper_label"),
+        isColorCodingEnabled: true,
         t,
       }),
-      buildBlock({
-        name: "Block 2",
-        elements: [
-          buildOpenTextElement({
-            headline: t("templates.nps_survey_question_2_headline"),
-            required: false,
-            inputType: "text",
-          }),
-        ],
+      buildOpenTextQuestion({
+        headline: t("templates.nps_survey_question_2_headline"),
+        required: false,
+        inputType: "text",
         t,
       }),
-      buildBlock({
-        name: "Block 3",
-        elements: [
-          buildOpenTextElement({
-            headline: t("templates.nps_survey_question_3_headline"),
-            required: false,
-            inputType: "text",
-          }),
-        ],
+      buildOpenTextQuestion({
+        headline: t("templates.nps_survey_question_3_headline"),
+        required: false,
+        inputType: "text",
         t,
       }),
     ],
   };
 };
 
-const starRatingSurvey = (t: TFunction): TXMTemplate => {
-  const reusableElementIds = [createId(), createId(), createId()];
-  const block3Id = createId(); // Pre-generate Block 3 ID for logic reference
+const starRatingSurvey = (t: TFnType): TXMTemplate => {
+  const reusableQuestionIds = [createId(), createId(), createId()];
   const defaultSurvey = getXMSurveyDefault(t);
 
   return {
     ...defaultSurvey,
     name: t("templates.star_rating_survey_name"),
-    blocks: [
-      buildBlock({
-        name: "Block 1",
-        elements: [
-          buildRatingElement({
-            id: reusableElementIds[0],
-            range: 5,
-            scale: "number",
-            headline: t("templates.star_rating_survey_question_1_headline"),
-            required: true,
-            lowerLabel: t("templates.star_rating_survey_question_1_lower_label"),
-            upperLabel: t("templates.star_rating_survey_question_1_upper_label"),
-          }),
-        ],
+    questions: [
+      buildRatingQuestion({
+        id: reusableQuestionIds[0],
         logic: [
           {
             id: createId(),
@@ -104,8 +75,8 @@ const starRatingSurvey = (t: TFunction): TXMTemplate => {
                 {
                   id: createId(),
                   leftOperand: {
-                    value: reusableElementIds[0],
-                    type: "element",
+                    value: reusableQuestionIds[0],
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -118,72 +89,80 @@ const starRatingSurvey = (t: TFunction): TXMTemplate => {
             actions: [
               {
                 id: createId(),
-                objective: "jumpToBlock",
-                target: block3Id,
+                objective: "jumpToQuestion",
+                target: reusableQuestionIds[2],
               },
             ],
           },
         ],
+        range: 5,
+        scale: "number",
+        headline: t("templates.star_rating_survey_question_1_headline"),
+        required: true,
+        lowerLabel: t("templates.star_rating_survey_question_1_lower_label"),
+        upperLabel: t("templates.star_rating_survey_question_1_upper_label"),
         t,
       }),
-      buildBlock({
-        name: "Block 2",
-        elements: [
-          buildCTAElement({
-            id: reusableElementIds[1],
-            subheader: t("templates.star_rating_survey_question_2_html"),
-            headline: t("templates.star_rating_survey_question_2_headline"),
-            required: false,
-            buttonUrl: "https://formbricks.com/github",
-            buttonExternal: true,
-            ctaButtonLabel: t("templates.star_rating_survey_question_2_button_label"),
-          }),
+      buildCTAQuestion({
+        id: reusableQuestionIds[1],
+        html: t("templates.star_rating_survey_question_2_html"),
+        logic: [
+          {
+            id: createId(),
+            conditions: {
+              id: createId(),
+              connector: "and",
+              conditions: [
+                {
+                  id: createId(),
+                  leftOperand: {
+                    value: reusableQuestionIds[1],
+                    type: "question",
+                  },
+                  operator: "isClicked",
+                },
+              ],
+            },
+            actions: [
+              {
+                id: createId(),
+                objective: "jumpToQuestion",
+                target: defaultSurvey.endings[0].id,
+              },
+            ],
+          },
         ],
-        logic: [createBlockJumpLogic(reusableElementIds[1], defaultSurvey.endings[0].id, "isClicked")],
+        headline: t("templates.star_rating_survey_question_2_headline"),
+        required: true,
+        buttonUrl: "https://formbricks.com/github",
+        buttonLabel: t("templates.star_rating_survey_question_2_button_label"),
+        buttonExternal: true,
         t,
       }),
-      buildBlock({
-        id: block3Id,
-        name: "Block 3",
-        elements: [
-          buildOpenTextElement({
-            id: reusableElementIds[2],
-            headline: t("templates.star_rating_survey_question_3_headline"),
-            required: true,
-            subheader: t("templates.star_rating_survey_question_3_subheader"),
-            placeholder: t("templates.star_rating_survey_question_3_placeholder"),
-            inputType: "text",
-          }),
-        ],
+      buildOpenTextQuestion({
+        id: reusableQuestionIds[2],
+        headline: t("templates.star_rating_survey_question_3_headline"),
+        required: true,
+        subheader: t("templates.star_rating_survey_question_3_subheader"),
         buttonLabel: t("templates.star_rating_survey_question_3_button_label"),
+        placeholder: t("templates.star_rating_survey_question_3_placeholder"),
+        inputType: "text",
         t,
       }),
     ],
   };
 };
 
-const csatSurvey = (t: TFunction): TXMTemplate => {
-  const reusableElementIds = [createId(), createId(), createId()];
-  const block3Id = createId(); // Pre-generate Block 3 ID for logic reference
+const csatSurvey = (t: TFnType): TXMTemplate => {
+  const reusableQuestionIds = [createId(), createId(), createId()];
   const defaultSurvey = getXMSurveyDefault(t);
 
   return {
     ...defaultSurvey,
     name: t("templates.csat_survey_name"),
-    blocks: [
-      buildBlock({
-        name: "Block 1",
-        elements: [
-          buildRatingElement({
-            id: reusableElementIds[0],
-            range: 5,
-            scale: "smiley",
-            headline: t("templates.csat_survey_question_1_headline"),
-            required: true,
-            lowerLabel: t("templates.csat_survey_question_1_lower_label"),
-            upperLabel: t("templates.csat_survey_question_1_upper_label"),
-          }),
-        ],
+    questions: [
+      buildRatingQuestion({
+        id: reusableQuestionIds[0],
         logic: [
           {
             id: createId(),
@@ -194,8 +173,8 @@ const csatSurvey = (t: TFunction): TXMTemplate => {
                 {
                   id: createId(),
                   leftOperand: {
-                    value: reusableElementIds[0],
-                    type: "element",
+                    value: reusableQuestionIds[0],
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -208,103 +187,101 @@ const csatSurvey = (t: TFunction): TXMTemplate => {
             actions: [
               {
                 id: createId(),
-                objective: "jumpToBlock",
-                target: block3Id,
+                objective: "jumpToQuestion",
+                target: reusableQuestionIds[2],
               },
             ],
           },
         ],
+        range: 5,
+        scale: "smiley",
+        headline: t("templates.csat_survey_question_1_headline"),
+        required: true,
+        lowerLabel: t("templates.csat_survey_question_1_lower_label"),
+        upperLabel: t("templates.csat_survey_question_1_upper_label"),
         t,
       }),
-      buildBlock({
-        name: "Block 2",
-        elements: [
-          buildOpenTextElement({
-            id: reusableElementIds[1],
-            headline: t("templates.csat_survey_question_2_headline"),
-            required: false,
-            placeholder: t("templates.csat_survey_question_2_placeholder"),
-            inputType: "text",
-          }),
+      buildOpenTextQuestion({
+        id: reusableQuestionIds[1],
+        logic: [
+          {
+            id: createId(),
+            conditions: {
+              id: createId(),
+              connector: "and",
+              conditions: [
+                {
+                  id: createId(),
+                  leftOperand: {
+                    value: reusableQuestionIds[1],
+                    type: "question",
+                  },
+                  operator: "isSubmitted",
+                },
+              ],
+            },
+            actions: [
+              {
+                id: createId(),
+                objective: "jumpToQuestion",
+                target: defaultSurvey.endings[0].id,
+              },
+            ],
+          },
         ],
-        logic: [createBlockJumpLogic(reusableElementIds[1], defaultSurvey.endings[0].id, "isSubmitted")],
+        headline: t("templates.csat_survey_question_2_headline"),
+        required: false,
+        placeholder: t("templates.csat_survey_question_2_placeholder"),
+        inputType: "text",
         t,
       }),
-      buildBlock({
-        id: block3Id,
-        name: "Block 3",
-        elements: [
-          buildOpenTextElement({
-            id: reusableElementIds[2],
-            headline: t("templates.csat_survey_question_3_headline"),
-            required: false,
-            placeholder: t("templates.csat_survey_question_3_placeholder"),
-            inputType: "text",
-          }),
-        ],
+      buildOpenTextQuestion({
+        id: reusableQuestionIds[2],
+        headline: t("templates.csat_survey_question_3_headline"),
+        required: false,
+        placeholder: t("templates.csat_survey_question_3_placeholder"),
+        inputType: "text",
         t,
       }),
     ],
   };
 };
 
-const cessSurvey = (t: TFunction): TXMTemplate => {
+const cessSurvey = (t: TFnType): TXMTemplate => {
   return {
     ...getXMSurveyDefault(t),
     name: t("templates.cess_survey_name"),
-    blocks: [
-      buildBlock({
-        name: "Block 1",
-        elements: [
-          buildRatingElement({
-            range: 5,
-            scale: "number",
-            headline: t("templates.cess_survey_question_1_headline"),
-            required: true,
-            lowerLabel: t("templates.cess_survey_question_1_lower_label"),
-            upperLabel: t("templates.cess_survey_question_1_upper_label"),
-          }),
-        ],
+    questions: [
+      buildRatingQuestion({
+        range: 5,
+        scale: "number",
+        headline: t("templates.cess_survey_question_1_headline"),
+        required: true,
+        lowerLabel: t("templates.cess_survey_question_1_lower_label"),
+        upperLabel: t("templates.cess_survey_question_1_upper_label"),
         t,
       }),
-      buildBlock({
-        name: "Block 2",
-        elements: [
-          buildOpenTextElement({
-            headline: t("templates.cess_survey_question_2_headline"),
-            required: true,
-            placeholder: t("templates.cess_survey_question_2_placeholder"),
-            inputType: "text",
-          }),
-        ],
+      buildOpenTextQuestion({
+        headline: t("templates.cess_survey_question_2_headline"),
+        required: true,
+        placeholder: t("templates.cess_survey_question_2_placeholder"),
+        inputType: "text",
         t,
       }),
     ],
   };
 };
 
-const smileysRatingSurvey = (t: TFunction): TXMTemplate => {
-  const reusableElementIds = [createId(), createId(), createId()];
-  const block3Id = createId(); // Pre-generate Block 3 ID for logic reference
+const smileysRatingSurvey = (t: TFnType): TXMTemplate => {
+  const reusableQuestionIds = [createId(), createId(), createId()];
   const defaultSurvey = getXMSurveyDefault(t);
 
   return {
     ...defaultSurvey,
     name: t("templates.smileys_survey_name"),
-    blocks: [
-      buildBlock({
-        name: "Block 1",
-        elements: [
-          buildRatingElement({
-            id: reusableElementIds[0],
-            range: 5,
-            scale: "smiley",
-            headline: t("templates.smileys_survey_question_1_headline"),
-            required: true,
-            lowerLabel: t("templates.smileys_survey_question_1_lower_label"),
-            upperLabel: t("templates.smileys_survey_question_1_upper_label"),
-          }),
-        ],
+    questions: [
+      buildRatingQuestion({
+        id: reusableQuestionIds[0],
         logic: [
           {
             id: createId(),
@@ -315,8 +292,8 @@ const smileysRatingSurvey = (t: TFunction): TXMTemplate => {
                 {
                   id: createId(),
                   leftOperand: {
-                    value: reusableElementIds[0],
-                    type: "element",
+                    value: reusableQuestionIds[0],
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -329,95 +306,100 @@ const smileysRatingSurvey = (t: TFunction): TXMTemplate => {
             actions: [
               {
                 id: createId(),
-                objective: "jumpToBlock",
-                target: block3Id,
+                objective: "jumpToQuestion",
+                target: reusableQuestionIds[2],
               },
             ],
           },
         ],
+        range: 5,
+        scale: "smiley",
+        headline: t("templates.smileys_survey_question_1_headline"),
+        required: true,
+        lowerLabel: t("templates.smileys_survey_question_1_lower_label"),
+        upperLabel: t("templates.smileys_survey_question_1_upper_label"),
         t,
       }),
-      buildBlock({
-        name: "Block 2",
-        elements: [
-          buildCTAElement({
-            id: reusableElementIds[1],
-            subheader: t("templates.smileys_survey_question_2_html"),
-            headline: t("templates.smileys_survey_question_2_headline"),
-            required: false,
-            buttonUrl: "https://formbricks.com/github",
-            buttonExternal: true,
-            ctaButtonLabel: t("templates.smileys_survey_question_2_button_label"),
-          }),
+      buildCTAQuestion({
+        id: reusableQuestionIds[1],
+        html: t("templates.smileys_survey_question_2_html"),
+        logic: [
+          {
+            id: createId(),
+            conditions: {
+              id: createId(),
+              connector: "and",
+              conditions: [
+                {
+                  id: createId(),
+                  leftOperand: {
+                    value: reusableQuestionIds[1],
+                    type: "question",
+                  },
+                  operator: "isClicked",
+                },
+              ],
+            },
+            actions: [
+              {
+                id: createId(),
+                objective: "jumpToQuestion",
+                target: defaultSurvey.endings[0].id,
+              },
+            ],
+          },
         ],
-        logic: [createBlockJumpLogic(reusableElementIds[1], defaultSurvey.endings[0].id, "isClicked")],
+        headline: t("templates.smileys_survey_question_2_headline"),
+        required: true,
+        buttonUrl: "https://formbricks.com/github",
+        buttonLabel: t("templates.smileys_survey_question_2_button_label"),
+        buttonExternal: true,
         t,
       }),
-      buildBlock({
-        id: block3Id,
-        name: "Block 3",
-        elements: [
-          buildOpenTextElement({
-            id: reusableElementIds[2],
-            headline: t("templates.smileys_survey_question_3_headline"),
-            required: true,
-            subheader: t("templates.smileys_survey_question_3_subheader"),
-            placeholder: t("templates.smileys_survey_question_3_placeholder"),
-            inputType: "text",
-          }),
-        ],
+      buildOpenTextQuestion({
+        id: reusableQuestionIds[2],
+        headline: t("templates.smileys_survey_question_3_headline"),
+        required: true,
+        subheader: t("templates.smileys_survey_question_3_subheader"),
         buttonLabel: t("templates.smileys_survey_question_3_button_label"),
+        placeholder: t("templates.smileys_survey_question_3_placeholder"),
+        inputType: "text",
         t,
       }),
     ],
   };
 };
 
-const enpsSurvey = (t: TFunction): TXMTemplate => {
+const enpsSurvey = (t: TFnType): TXMTemplate => {
   return {
     ...getXMSurveyDefault(t),
     name: t("templates.enps_survey_name"),
-    blocks: [
-      buildBlock({
-        name: "Block 1",
-        elements: [
-          buildNPSElement({
-            headline: t("templates.enps_survey_question_1_headline"),
-            required: false,
-            lowerLabel: t("templates.enps_survey_question_1_lower_label"),
-            upperLabel: t("templates.enps_survey_question_1_upper_label"),
-            isColorCodingEnabled: true,
-          }),
-        ],
+    questions: [
+      buildNPSQuestion({
+        headline: t("templates.enps_survey_question_1_headline"),
+        required: false,
+        lowerLabel: t("templates.enps_survey_question_1_lower_label"),
+        upperLabel: t("templates.enps_survey_question_1_upper_label"),
+        isColorCodingEnabled: true,
         t,
       }),
-      buildBlock({
-        name: "Block 2",
-        elements: [
-          buildOpenTextElement({
-            headline: t("templates.enps_survey_question_2_headline"),
-            required: false,
-            inputType: "text",
-          }),
-        ],
+      buildOpenTextQuestion({
+        headline: t("templates.enps_survey_question_2_headline"),
+        required: false,
+        inputType: "text",
         t,
       }),
-      buildBlock({
-        name: "Block 3",
-        elements: [
-          buildOpenTextElement({
-            headline: t("templates.enps_survey_question_3_headline"),
-            required: false,
-            inputType: "text",
-          }),
-        ],
+      buildOpenTextQuestion({
+        headline: t("templates.enps_survey_question_3_headline"),
+        required: false,
+        inputType: "text",
         t,
       }),
     ],
   };
 };
 
-export const getXMTemplates = (t: TFunction): TXMTemplate[] => {
+export const getXMTemplates = (t: TFnType): TXMTemplate[] => {
   try {
     return [
       npsSurvey(t),

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx

@@ -1,15 +1,15 @@
-import { XIcon } from "lucide-react";
-import { getServerSession } from "next-auth";
-import Link from "next/link";
 import { XMTemplateList } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList";
 import { getEnvironment } from "@/lib/environment/service";
 import { getProjectByEnvironmentId, getUserProjects } from "@/lib/project/service";
 import { getUser } from "@/lib/user/service";
 import { getOrganizationIdFromEnvironmentId } from "@/lib/utils/helper";
-import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
+import { getTranslate } from "@/tolgee/server";
+import { XIcon } from "lucide-react";
+import { getServerSession } from "next-auth";
+import Link from "next/link";
 
 interface XMTemplatePageProps {
   params: Promise<{
@@ -38,7 +38,7 @@ const Page = async (props: XMTemplatePageProps) => {
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new Error(t("common.project_not_found"));
   }
 
   const projects = await getUserProjects(session.user.id, organizationId);
@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>

apps/web/app/(app)/(onboarding)/lib/onboarding.ts

@@ -1,12 +1,12 @@
 "use server";
 
+import { TOrganizationTeam } from "@/app/(app)/(onboarding)/types/onboarding";
+import { validateInputs } from "@/lib/utils/validate";
 import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
-import { TOrganizationTeam } from "@/app/(app)/(onboarding)/types/onboarding";
-import { validateInputs } from "@/lib/utils/validate";
 
 export const getTeamsByOrganizationId = reactCache(
   async (organizationId: string): Promise<TOrganizationTeam[] | null> => {

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

@@ -0,0 +1,82 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { LandingSidebar } from "./landing-sidebar";
+
+// Mock constants that this test needs
+vi.mock("@/lib/constants", () => ({
+  IS_FORMBRICKS_CLOUD: false,
+  WEBAPP_URL: "http://localhost:3000",
+}));
+
+// Mock server actions that this test needs
+vi.mock("@/modules/auth/actions/sign-out", () => ({
+  logSignOutAction: vi.fn().mockResolvedValue(undefined),
+}));
+
+// Module mocks must be declared before importing the component
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({ t: (key: string) => key, isLoading: false }),
+}));
+
+// Mock our useSignOut hook
+const mockSignOut = vi.fn();
+vi.mock("@/modules/auth/hooks/use-sign-out", () => ({
+  useSignOut: () => ({
+    signOut: mockSignOut,
+  }),
+}));
+
+vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
+vi.mock("@/modules/organization/components/CreateOrganizationModal", () => ({
+  CreateOrganizationModal: ({ open }: { open: boolean }) => (
+    <div data-testid={open ? "modal-open" : "modal-closed"} />
+  ),
+}));
+vi.mock("@/modules/ui/components/avatars", () => ({
+  ProfileAvatar: ({ userId }: { userId: string }) => <div data-testid="avatar">{userId}</div>,
+}));
+
+// Ensure mocks are reset between tests
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("LandingSidebar component", () => {
+  const user = { id: "u1", name: "Alice", email: "alice@example.com" } as any;
+  const organization = { id: "o1", name: "orgOne" } as any;
+
+  test("renders logo, avatar, and initial modal closed", () => {
+    render(<LandingSidebar user={user} organization={organization} />);
+
+    // Formbricks logo
+    expect(screen.getByAltText("environments.formbricks_logo")).toBeInTheDocument();
+    // Profile avatar
+    expect(screen.getByTestId("avatar")).toHaveTextContent("u1");
+    // CreateOrganizationModal should be closed initially
+    expect(screen.getByTestId("modal-closed")).toBeInTheDocument();
+  });
+
+  test("clicking logout triggers signOut", async () => {
+    render(<LandingSidebar user={user} organization={organization} />);
+
+    // Open user dropdown by clicking on avatar trigger
+    const trigger = screen.getByTestId("avatar").parentElement;
+    if (trigger) await userEvent.click(trigger);
+
+    // Click logout menu item
+    const logoutItem = await screen.findByText("common.logout");
+    await userEvent.click(logoutItem);
+
+    expect(mockSignOut).toHaveBeenCalledWith({
+      reason: "user_initiated",
+      redirectUrl: "/auth/login",
+      organizationId: "o1",
+      redirect: true,
+      callbackUrl: "/auth/login",
+      clearEnvironmentId: true,
+    });
+  });
+});