Merge branch 'epic/survey-mqp' into feat/survey-editor-blocks-ui

Update comparison operators from 'lessThan/lessEqual/greaterThan/greaterEqual'
to 'isLessThan/isLessThanOrEqual/isGreaterThan/isGreaterThanOrEqual' to match
ZSurveyLogicConditionsOperator enum in OpenText number, NPS, and Rating validation.

.claude/skills/posthog-integration-nextjs-pages-router/SKILL.md

@@ -1,58 +0,0 @@
----
-name: integration-nextjs-pages-router
-description: PostHog integration for Next.js Pages Router applications
-metadata:
-  author: PostHog
-  version: 1.8.1
----
-
-# PostHog integration for Next.js Pages Router
-
-This skill helps you add PostHog analytics to Next.js Pages Router applications.
-
-## Workflow
-
-Follow these steps in order to complete the integration:
-
-1. `basic-integration-1.0-begin.md` - PostHog Setup - Begin ← **Start here**
-2. `basic-integration-1.1-edit.md` - PostHog Setup - Edit
-3. `basic-integration-1.2-revise.md` - PostHog Setup - Revise
-4. `basic-integration-1.3-conclude.md` - PostHog Setup - Conclusion
-
-## Reference files
-
-- `EXAMPLE.md` - Next.js Pages Router example project code
-- `next-js.md` - Next.js - docs
-- `identify-users.md` - Identify users - docs
-- `basic-integration-1.0-begin.md` - PostHog setup - begin
-- `basic-integration-1.1-edit.md` - PostHog setup - edit
-- `basic-integration-1.2-revise.md` - PostHog setup - revise
-- `basic-integration-1.3-conclude.md` - PostHog setup - conclusion
-
-The example project shows the target implementation pattern. Consult the documentation for API details.
-
-## Key principles
-
-- **Environment variables**: Always use environment variables for PostHog keys. Never hardcode them.
-- **Minimal changes**: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
-- **Match the example**: Your implementation should follow the example project's patterns as closely as possible.
-
-## Framework guidelines
-
-- For Next.js 15.3+, initialize PostHog in instrumentation-client.ts for the simplest setup
-- For feature flags, use useFeatureFlagEnabled() or useFeatureFlagPayload() hooks - they handle loading states and external sync automatically
-- Add analytics capture in event handlers where user actions occur, NOT in useEffect reacting to state changes
-- Do NOT use useEffect for data transformation - calculate derived values during render instead
-- Do NOT use useEffect to respond to user events - put that logic in the event handler itself
-- Do NOT use useEffect to chain state updates - calculate all related updates together in the event handler
-- Do NOT use useEffect to notify parent components - call the parent callback alongside setState in the event handler
-- To reset component state when a prop changes, pass the prop as the component's key instead of using useEffect
-- useEffect is ONLY for synchronizing with external systems (non-React widgets, browser APIs, network subscriptions)
-
-## Identifying users
-
-Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using `X-POSTHOG-DISTINCT-ID` and `X-POSTHOG-SESSION-ID` headers to maintain correlation.
-
-## Error tracking
-
-Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.

.claude/skills/posthog-integration-nextjs-pages-router/references/EXAMPLE.md

@@ -1,761 +0,0 @@
-# PostHog Next.js Pages Router Example Project
-
-Repository: https://github.com/PostHog/context-mill
-Path: basics/next-pages-router
-
----
-
-## README.md
-
-# PostHog Next.js pages router example
-
-This is a [Next.js](https://nextjs.org) Pages Router example demonstrating PostHog integration with product analytics, session replay, feature flags, and error tracking.
-
-## Features
-
-- **Product Analytics**: Track user events and behaviors
-- **Session Replay**: Record and replay user sessions
-- **Error Tracking**: Capture and track errors
-- **User Authentication**: Demo login system with PostHog user identification
-- **Server-side & Client-side Tracking**: Examples of both tracking methods
-- **Reverse Proxy**: PostHog ingestion through Next.js rewrites
-
-## Getting Started
-
-### 1. Install Dependencies
-
-```bash
-npm install
-# or
-pnpm install
-```
-
-### 2. Configure Environment Variables
-
-Create a `.env.local` file in the root directory:
-
-```bash
-NEXT_PUBLIC_POSTHOG_KEY=your_posthog_project_api_key
-NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-```
-
-Get your PostHog API key from your [PostHog project settings](https://app.posthog.com/project/settings).
-
-### 3. Run the Development Server
-
-```bash
-npm run dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the app.
-
-## Project Structure
-
-```
-src/
-├── components/
-│   └── Header.tsx           # Navigation header with auth state
-├── contexts/
-│   └── AuthContext.tsx      # Authentication context with PostHog integration
-├── lib/
-│   └── posthog-server.ts    # Server-side PostHog client
-├── pages/
-│   ├── _app.tsx             # App wrapper with Auth provider
-│   ├── _document.tsx        # Document wrapper
-│   ├── index.tsx            # Home/Login page
-│   ├── burrito.tsx          # Demo feature page with event tracking
-│   ├── profile.tsx          # User profile with error tracking demo
-│   └── api/
-│       └── auth/
-│           └── login.ts     # Login API with server-side tracking
-└── styles/
-    └── globals.css          # Global styles
-
-instrumentation-client.ts    # Client-side PostHog initialization
-```
-
-## Key Integration Points
-
-### Client-side initialization (instrumentation-client.ts)
-
-```typescript
-import posthog from "posthog-js"
-
-posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-  api_host: "/ingest",
-  ui_host: "https://us.posthog.com",
-  defaults: '2026-01-30',
-  capture_exceptions: true,
-  debug: process.env.NODE_ENV === "development",
-});
-```
-
-### User identification (AuthContext.tsx)
-
-```typescript
-posthog.identify(username, {
-  username: username,
-});
-```
-
-### Event tracking (burrito.tsx)
-
-```typescript
-posthog.capture('burrito_considered', {
-  total_considerations: count,
-  username: username,
-});
-```
-
-### Error tracking (profile.tsx)
-
-```typescript
-posthog.captureException(error);
-```
-
-### Server-side tracking (api/auth/login.ts)
-
-```typescript
-const posthog = getPostHogClient();
-posthog.capture({
-  distinctId: username,
-  event: 'server_login',
-  properties: { ... }
-});
-```
-
-## Pages router differences from app router
-
-This example uses Next.js Pages Router instead of App Router. Key differences:
-
-1. **File-based routing**: Pages in `src/pages/` instead of `src/app/`
-2. **_app.tsx**: Custom App component wraps all pages
-3. **API Routes**: Located in `src/pages/api/`
-4. **No 'use client'**: All pages are client-side by default
-5. **useRouter**: From `next/router` instead of `next/navigation`
-6. **Head component**: Using `next/head` for metadata instead of `metadata` export
-
-## Learn More
-
-- [PostHog Documentation](https://posthog.com/docs)
-- [Next.js Pages Router Documentation](https://nextjs.org/docs/pages)
-- [PostHog Next.js Integration Guide](https://posthog.com/docs/libraries/next-js)
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new).
-
-Check out the [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.
-
----
-
-## instrumentation-client.ts
-
-```ts
-import posthog from "posthog-js"
-
-posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-  api_host: "/ingest",
-  ui_host: "https://us.posthog.com",
-  // Include the defaults option as required by PostHog
-  defaults: '2026-01-30',
-  // Enables capturing unhandled exceptions via Error Tracking
-  capture_exceptions: true,
-  // Turn on debug in development mode
-  debug: process.env.NODE_ENV === "development",
-});
-
-//IMPORTANT: Never combine this approach with other client-side PostHog initialization approaches, especially components like a PostHogProvider. instrumentation-client.ts is the correct solution for initializating client-side PostHog in Next.js 15.3+ apps.
-```
-
----
-
-## next.config.ts
-
-```ts
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-  reactStrictMode: true,
-  async rewrites() {
-    return [
-      {
-        source: "/ingest/static/:path*",
-        destination: "https://us-assets.i.posthog.com/static/:path*",
-      },
-      {
-        source: "/ingest/:path*",
-        destination: "https://us.i.posthog.com/:path*",
-      },
-    ];
-  },
-  // This is required to support PostHog trailing slash API requests
-  skipTrailingSlashRedirect: true,
-};
-
-export default nextConfig;
-
-```
-
----
-
-## src/components/Header.tsx
-
-```tsx
-import Link from 'next/link';
-import { useAuth } from '@/contexts/AuthContext';
-
-export default function Header() {
-  const { user, logout } = useAuth();
-
-  return (
-    <header className="header">
-      <div className="header-container">
-        <nav>
-          <Link href="/">Home</Link>
-          {user && (
-            <>
-              <Link href="/burrito">Burrito Consideration</Link>
-              <Link href="/profile">Profile</Link>
-            </>
-          )}
-        </nav>
-        <div className="user-section">
-          {user ? (
-            <>
-              <span>Welcome, {user.username}!</span>
-              <button onClick={logout} className="btn-logout">
-                Logout
-              </button>
-            </>
-          ) : (
-            <span>Not logged in</span>
-          )}
-        </div>
-      </div>
-    </header>
-  );
-}
-
-```
-
----
-
-## src/contexts/AuthContext.tsx
-
-```tsx
-import { createContext, useContext, useState, ReactNode } from 'react';
-import posthog from 'posthog-js';
-
-interface User {
-  username: string;
-  burritoConsiderations: number;
-}
-
-interface AuthContextType {
-  user: User | null;
-  login: (username: string, password: string) => Promise<boolean>;
-  logout: () => void;
-  incrementBurritoConsiderations: () => void;
-}
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-const users: Map<string, User> = new Map();
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  // Use lazy initializer to read from localStorage only once on mount
-  const [user, setUser] = useState<User | null>(() => {
-    if (typeof window === 'undefined') return null;
-
-    const storedUsername = localStorage.getItem('currentUser');
-    if (storedUsername) {
-      const existingUser = users.get(storedUsername);
-      if (existingUser) {
-        return existingUser;
-      }
-    }
-    return null;
-  });
-
-  const login = async (username: string, password: string): Promise<boolean> => {
-    try {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ username, password }),
-      });
-
-      if (response.ok) {
-        const { user: userData } = await response.json();
-
-        // Get or create user in local map
-        let localUser = users.get(username);
-        if (!localUser) {
-          localUser = userData as User;
-          users.set(username, localUser);
-        }
-
-        setUser(localUser);
-        localStorage.setItem('currentUser', username);
-
-        // Identify user in PostHog using username as distinct ID
-        posthog.identify(username, {
-          username: username,
-        });
-
-        // Capture login event
-        posthog.capture('user_logged_in', {
-          username: username,
-        });
-
-        return true;
-      }
-      return false;
-    } catch (error) {
-      console.error('Login error:', error);
-      return false;
-    }
-  };
-
-  const logout = () => {
-    // Capture logout event before resetting
-    posthog.capture('user_logged_out');
-    posthog.reset();
-
-    setUser(null);
-    localStorage.removeItem('currentUser');
-  };
-
-  const incrementBurritoConsiderations = () => {
-    if (user) {
-      user.burritoConsiderations++;
-      users.set(user.username, user);
-      setUser({ ...user });
-    }
-  };
-
-  return (
-    <AuthContext.Provider value={{ user, login, logout, incrementBurritoConsiderations }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-}
-
-```
-
----
-
-## src/lib/posthog-server.ts
-
-```ts
-import { PostHog } from 'posthog-node';
-
-let posthogClient: PostHog | null = null;
-
-export function getPostHogClient() {
-  if (!posthogClient) {
-    posthogClient = new PostHog(
-      process.env.NEXT_PUBLIC_POSTHOG_KEY!,
-      {
-        host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-        flushAt: 1,
-        flushInterval: 0
-      }
-    );
-  }
-  return posthogClient;
-}
-
-export async function shutdownPostHog() {
-  if (posthogClient) {
-    await posthogClient.shutdown();
-  }
-}
-
-```
-
----
-
-## src/pages/_app.tsx
-
-```tsx
-import "@/styles/globals.css";
-import type { AppProps } from "next/app";
-import { AuthProvider } from "@/contexts/AuthContext";
-
-export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <AuthProvider>
-      <Component {...pageProps} />
-    </AuthProvider>
-  );
-}
-
-```
-
----
-
-## src/pages/_document.tsx
-
-```tsx
-import { Html, Head, Main, NextScript } from "next/document";
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}
-
-```
-
----
-
-## src/pages/api/auth/login.ts
-
-```ts
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { getPostHogClient } from '@/lib/posthog-server';
-
-const users = new Map<string, { username: string; burritoConsiderations: number }>();
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  if (req.method !== 'POST') {
-    return res.status(405).json({ error: 'Method not allowed' });
-  }
-
-  const { username, password } = req.body;
-
-  if (!username || !password) {
-    return res.status(400).json({ error: 'Username and password required' });
-  }
-
-  let user = users.get(username);
-  const isNewUser = !user;
-
-  if (!user) {
-    user = { username, burritoConsiderations: 0 };
-    users.set(username, user);
-  }
-
-  // Capture server-side login event
-  const posthog = getPostHogClient();
-  posthog.capture({
-    distinctId: username,
-    event: 'server_login',
-    properties: {
-      username: username,
-      isNewUser: isNewUser,
-      source: 'api'
-    }
-  });
-
-  // Identify user on server side
-  posthog.identify({
-    distinctId: username,
-    properties: {
-      username: username,
-      createdAt: isNewUser ? new Date().toISOString() : undefined
-    }
-  });
-
-  return res.status(200).json({ success: true, user });
-}
-
-```
-
----
-
-## src/pages/api/hello.ts
-
-```ts
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>,
-) {
-  res.status(200).json({ name: "John Doe" });
-}
-
-```
-
----
-
-## src/pages/burrito.tsx
-
-```tsx
-import { useState } from 'react';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import posthog from 'posthog-js';
-import { useAuth } from '@/contexts/AuthContext';
-import Header from '@/components/Header';
-
-export default function BurritoPage() {
-  const { user, incrementBurritoConsiderations } = useAuth();
-  const router = useRouter();
-  const [hasConsidered, setHasConsidered] = useState(false);
-
-  // Redirect to home if not logged in
-  if (!user) {
-    router.push('/');
-    return null;
-  }
-
-  const handleConsideration = () => {
-    incrementBurritoConsiderations();
-    setHasConsidered(true);
-    setTimeout(() => setHasConsidered(false), 2000);
-
-    // Capture burrito consideration event
-    posthog.capture('burrito_considered', {
-      total_considerations: user.burritoConsiderations + 1,
-      username: user.username,
-    });
-  };
-
-  return (
-    <>
-      <Head>
-        <title>Burrito Consideration - Burrito Consideration App</title>
-        <meta name="description" content="Consider the potential of burritos" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Header />
-      <main>
-        <div className="container">
-          <h1>Burrito consideration zone</h1>
-          <p>Take a moment to truly consider the potential of burritos.</p>
-
-          <div style={{ textAlign: 'center' }}>
-            <button
-              onClick={handleConsideration}
-              className="btn-burrito"
-            >
-              I have considered the burrito potential
-            </button>
-
-            {hasConsidered && (
-              <p className="success">
-                Thank you for your consideration! Count: {user.burritoConsiderations}
-              </p>
-            )}
-          </div>
-
-          <div className="stats">
-            <h3>Consideration stats</h3>
-            <p>Total considerations: {user.burritoConsiderations}</p>
-          </div>
-        </div>
-      </main>
-    </>
-  );
-}
-
-```
-
----
-
-## src/pages/index.tsx
-
-```tsx
-import { useState } from 'react';
-import Head from 'next/head';
-import { useAuth } from '@/contexts/AuthContext';
-import Header from '@/components/Header';
-
-export default function Home() {
-  const { user, login } = useAuth();
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-
-    try {
-      const success = await login(username, password);
-      if (success) {
-        setUsername('');
-        setPassword('');
-      } else {
-        setError('Please provide both username and password');
-      }
-    } catch (err) {
-      console.error('Login failed:', err);
-      setError('An error occurred during login');
-    }
-  };
-
-  return (
-    <>
-      <Head>
-        <title>Burrito Consideration App</title>
-        <meta name="description" content="Consider the potential of burritos" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Header />
-      <main>
-        {user ? (
-          <div className="container">
-            <h1>Welcome back, {user.username}!</h1>
-            <p>You are now logged in. Feel free to explore:</p>
-            <ul>
-              <li>Consider the potential of burritos</li>
-              <li>View your profile and statistics</li>
-            </ul>
-          </div>
-        ) : (
-          <div className="container">
-            <h1>Welcome to Burrito Consideration App</h1>
-            <p>Please sign in to begin your burrito journey</p>
-
-            <form onSubmit={handleSubmit} className="form">
-              <div className="form-group">
-                <label htmlFor="username">Username:</label>
-                <input
-                  type="text"
-                  id="username"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  placeholder="Enter any username"
-                />
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="password">Password:</label>
-                <input
-                  type="password"
-                  id="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Enter any password"
-                />
-              </div>
-
-              {error && <p className="error">{error}</p>}
-
-              <button type="submit" className="btn-primary">Sign In</button>
-            </form>
-
-            <p className="note">
-              Note: This is a demo app. Use any username and password to sign in.
-            </p>
-          </div>
-        )}
-      </main>
-    </>
-  );
-}
-
-```
-
----
-
-## src/pages/profile.tsx
-
-```tsx
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import posthog from 'posthog-js';
-import { useAuth } from '@/contexts/AuthContext';
-import Header from '@/components/Header';
-
-export default function ProfilePage() {
-  const { user } = useAuth();
-  const router = useRouter();
-
-  // Redirect to home if not logged in
-  if (!user) {
-    router.push('/');
-    return null;
-  }
-
-  const triggerTestError = () => {
-    try {
-      throw new Error('Test error for PostHog error tracking');
-    } catch (err) {
-      posthog.captureException(err);
-      console.error('Captured error:', err);
-      alert('Error captured and sent to PostHog!');
-    }
-  };
-
-  return (
-    <>
-      <Head>
-        <title>Profile - Burrito Consideration App</title>
-        <meta name="description" content="Your burrito consideration profile" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Header />
-      <main>
-        <div className="container">
-          <h1>User Profile</h1>
-
-          <div className="stats">
-            <h2>Your Information</h2>
-            <p><strong>Username:</strong> {user.username}</p>
-            <p><strong>Burrito Considerations:</strong> {user.burritoConsiderations}</p>
-          </div>
-
-          <div style={{ marginTop: '2rem' }}>
-            <button onClick={triggerTestError} className="btn-primary" style={{ backgroundColor: '#dc3545' }}>
-              Trigger Test Error (for PostHog)
-            </button>
-          </div>
-
-          <div style={{ marginTop: '2rem' }}>
-            <h3>Your Burrito Journey</h3>
-            {user.burritoConsiderations === 0 ? (
-              <p>You haven&apos;t considered any burritos yet. Visit the Burrito Consideration page to start!</p>
-            ) : user.burritoConsiderations === 1 ? (
-              <p>You&apos;ve considered the burrito potential once. Keep going!</p>
-            ) : user.burritoConsiderations < 5 ? (
-              <p>You&apos;re getting the hang of burrito consideration!</p>
-            ) : user.burritoConsiderations < 10 ? (
-              <p>You&apos;re becoming a burrito consideration expert!</p>
-            ) : (
-              <p>You are a true burrito consideration master! 🌯</p>
-            )}
-          </div>
-        </div>
-      </main>
-    </>
-  );
-}
-
-```
-
----
-

.claude/skills/posthog-integration-nextjs-pages-router/references/basic-integration-1.0-begin.md

@@ -1,43 +0,0 @@
----
-title: PostHog Setup - Begin
-description: Start the event tracking setup process by analyzing the project and creating an event tracking plan
----
-
-We're making an event tracking plan for this project.
-
-Before proceeding, find any existing `posthog.capture()` code. Make note of event name formatting.
-
-From the project's file list, select between 10 and 15 files that might have interesting business value for event tracking, especially conversion and churn events. Also look for additional files related to login that could be used for identifying users, along with error handling. Read the files. If a file is already well-covered by PostHog events, replace it with another option. Do not spawn subagents.
-
-Look for opportunities to track client-side events.
-
-**IMPORTANT: Server-side events are REQUIRED** if the project includes any instrumentable server-side code. If the project has API routes (e.g., `app/api/**/route.ts`) or Server Actions, you MUST include server-side events for critical business operations like:
-
-  - Payment/checkout completion
-  - Webhook handlers
-  - Authentication endpoints
-
-Do not skip server-side events - they capture actions that cannot be tracked client-side.
-
-Create a new file with a JSON array at the root of the project: .posthog-events.json. It should include one object for each event we want to add: event name, event description, and the file path we want to place the event in. If events already exist, don't duplicate them; supplement them.
-
-Track actions only, not pageviews. These can be captured automatically. Exceptions can be made for "viewed"-type events that correspond to the top of a conversion funnel.
-
-As you review files, make an internal note of opportunities to identify users and catch errors. We'll need them for the next step.
-
-## Status
-
-Before beginning a phase of the setup, you will send a status message with the exact prefix '[STATUS]', as in:
-
-[STATUS] Checking project structure.
-
-Status to report in this phase:
-
-- Checking project structure
-- Verifying PostHog dependencies
-- Generating events based on project
-
-
----
-
-**Upon completion, continue with:** [basic-integration-1.1-edit.md](basic-integration-1.1-edit.md)

.claude/skills/posthog-integration-nextjs-pages-router/references/basic-integration-1.1-edit.md

@@ -1,37 +0,0 @@
----
-title: PostHog Setup - Edit
-description: Implement PostHog event tracking in the identified files, following best practices and the example project
----
-
-For each of the files and events noted in .posthog-events.json, make edits to capture events using PostHog. Make sure to set up any helper files needed. Carefully examine the included example project code: your implementation should match it as closely as possible. Do not spawn subagents.
-
-Use environment variables for PostHog keys. Do not hardcode PostHog keys.
-
-If a file already has existing integration code for other tools or services, don't overwrite or remove that code. Place PostHog code below it.
-
-For each event, add useful properties, and use your access to the PostHog source code to ensure correctness. You also have access to documentation about creating new events with PostHog. Consider this documentation carefully and follow it closely before adding events. Your integration should be based on documented best practices. Carefully consider how the user project's framework version may impact the correct PostHog integration approach.
-
-Remember that you can find the source code for any dependency in the node_modules directory. This may be necessary to properly populate property names. There are also example project code files available via the PostHog MCP; use these for reference.
-
-Where possible, add calls for PostHog's identify() function on the client side upon events like logins and signups. Use the contents of login and signup forms to identify users on submit. If there is server-side code, pass the client-side session and distinct ID to the server-side code to identify the user. On the server side, make sure events have a matching distinct ID where relevant. 
-
-It's essential to do this in both client code and server code, so that user behavior from both domains is easy to correlate.
-
-You should also add PostHog exception capture error tracking to these files where relevant.
-
-Remember: Do not alter the fundamental architecture of existing files. Make your additions minimal and targeted.
-
-Remember the documentation and example project resources you were provided at the beginning. Read them now.
-
-## Status
-
-Status to report in this phase:
-
-- Inserting PostHog capture code
-- A status message for each file whose edits you are planning, including a high level summary of changes
-- A status message for each file you have edited
-
-
----
-
-**Upon completion, continue with:** [basic-integration-1.2-revise.md](basic-integration-1.2-revise.md)

.claude/skills/posthog-integration-nextjs-pages-router/references/basic-integration-1.2-revise.md

@@ -1,22 +0,0 @@
----
-title: PostHog Setup - Revise
-description: Review and fix any errors in the PostHog integration implementation
----
-
-Check the project for errors. Read the package.json file for any type checking or build scripts that may provide input about what to fix. Remember that you can find the source code for any dependency in the node_modules directory. Do not spawn subagents.
-
-Ensure that any components created were actually used.
-
-Once all other tasks are complete, run any linter or prettier-like scripts found in the package.json, but ONLY on the files you have edited or created during this session. Do not run formatting or linting across the entire project's codebase.
-
-## Status
-
-Status to report in this phase:
-
-- Finding and correcting errors
-- Report details of any errors you fix
-- Linting, building and prettying
-
----
-
-**Upon completion, continue with:** [basic-integration-1.3-conclude.md](basic-integration-1.3-conclude.md)

.claude/skills/posthog-integration-nextjs-pages-router/references/basic-integration-1.3-conclude.md

@@ -1,38 +0,0 @@
----
-title: PostHog Setup - Conclusion
-description: Review and fix any errors in the PostHog integration implementation
----
-
-Use the PostHog MCP to create a new dashboard named "Analytics basics" based on the events created here. Make sure to use the exact same event names as implemented in the code. Populate it with up to five insights, with special emphasis on things like conversion funnels, churn events, and other business critical insights.  
-
-Search for a file called `.posthog-events.json` and read it for available events. Do not spawn subagents.
-
-Create the file posthog-setup-report.md. It should include a summary of the integration edits, a table with the event names, event descriptions, and files where events were added, along with a list of links for the dashboard and insights created. Follow this format:
-
-<wizard-report>
-# PostHog post-wizard report
-
-The wizard has completed a deep integration of your project. [Detailed summary of changes]
-
-[table of events/descriptions/files]
-
-## Next steps
-
-We've built some insights and a dashboard for you to keep an eye on user behavior, based on the events we just instrumented:
-
-[links]
-
-### Agent skill
-
-We've left an agent skill folder in your project. You can use this context for further agent development when using Claude Code. This will help ensure the model provides the most up-to-date approaches for integrating PostHog.
-
-</wizard-report>
-
-Upon completion, remove .posthog-events.json.
-
-## Status
-
-Status to report in this phase:
-
-- Configured dashboard: [insert PostHog dashboard URL]
-- Created setup report: [insert full local file path]

.claude/skills/posthog-integration-nextjs-pages-router/references/identify-users.md

@@ -1,202 +0,0 @@
-# Identify users - Docs
-
-Linking events to specific users enables you to build a full picture of how they're using your product across different sessions, devices, and platforms.
-
-This is straightforward to do when [capturing backend events](/docs/product-analytics/capture-events?tab=Node.js.md), as you associate events to a specific user using a `distinct_id`, which is a required argument.
-
-However, in the frontend of a [web](/docs/libraries/js/features#capturing-events.md) or [mobile app](/docs/libraries/ios#capturing-events.md), a `distinct_id` is not a required argument — PostHog's SDKs will generate an anonymous `distinct_id` for you automatically and you can capture events anonymously, provided you use the appropriate [configuration](/docs/libraries/js/features#capturing-anonymous-events.md).
-
-To link events to specific users, call `identify`:
-
-PostHog AI
-
-### Web
-
-```javascript
-posthog.identify(
-  'distinct_id',  // Replace 'distinct_id' with your user's unique identifier
-  { email: 'max@hedgehogmail.com', name: 'Max Hedgehog' } // optional: set additional person properties
-);
-```
-
-### Android
-
-```kotlin
-PostHog.identify(
-    distinctId = distinctID, // Replace 'distinctID' with your user's unique identifier
-    // optional: set additional person properties
-    userProperties = mapOf(
-        "name" to "Max Hedgehog",
-        "email" to "max@hedgehogmail.com"
-    )
-)
-```
-
-### iOS
-
-```swift
-PostHogSDK.shared.identify("distinct_id", // Replace "distinct_id" with your user's unique identifier
-                           userProperties: ["name": "Max Hedgehog", "email": "max@hedgehogmail.com"]) // optional: set additional person properties
-```
-
-### React Native
-
-```jsx
-posthog.identify('distinct_id', { // Replace "distinct_id" with your user's unique identifier
-    email: 'max@hedgehogmail.com', // optional: set additional person properties
-    name: 'Max Hedgehog'
-})
-```
-
-### Dart
-
-```dart
-await Posthog().identify(
-  userId: 'distinct_id', // Replace "distinct_id" with your user's unique identifier
-  userProperties: {
-    email: "max@hedgehogmail.com", // optional: set additional person properties
-    name: "Max Hedgehog"
-});
-```
-
-Events captured after calling `identify` are identified events and this creates a person profile if one doesn't exist already.
-
-Due to the cost of processing them, anonymous events can be up to 4x cheaper than identified events, so it's recommended you only capture identified events when needed.
-
-## How identify works
-
-When a user starts browsing your website or app, PostHog automatically assigns them an **anonymous ID**, which is stored locally.
-
-Provided you've [configured persistence](/docs/libraries/js/persistence.md) to use cookies or `localStorage`, this enables us to track anonymous users – even across different sessions.
-
-By calling `identify` with a `distinct_id` of your choice (usually the user's ID in your database, or their email), you link the anonymous ID and distinct ID together.
-
-Thus, all past and future events made with that anonymous ID are now associated with the distinct ID.
-
-This enables you to do things like associate events with a user from before they log in for the first time, or associate their events across different devices or platforms.
-
-Using identify in the backend
-
-Although you can call `identify` using our backend SDKs, it is used most in frontends. This is because there is no concept of anonymous sessions in the backend SDKs, so calling `identify` only updates person profiles.
-
-## Best practices when using `identify`
-
-### 1\. Call `identify` as soon as you're able to
-
-In your frontend, you should call `identify` as soon as you're able to.
-
-Typically, this is every time your **app loads** for the first time, and directly after your **users log in**.
-
-This ensures that events sent during your users' sessions are correctly associated with them.
-
-You only need to call `identify` once per session, and you should avoid calling it multiple times unnecessarily.
-
-If you call `identify` multiple times with the same data without reloading the page in between, PostHog will ignore the subsequent calls.
-
-### 2\. Use unique strings for distinct IDs
-
-If two users have the same distinct ID, their data is merged and they are considered one user in PostHog. Two common ways this can happen are:
-
--   Your logic for generating IDs does not generate sufficiently strong IDs and you can end up with a clash where 2 users have the same ID.
--   There's a bug, typo, or mistake in your code leading to most or all users being identified with generic IDs like `null`, `true`, or `distinctId`.
-
-PostHog also has built-in protections to stop the most common distinct ID mistakes.
-
-### 3\. Reset after logout
-
-If a user logs out on your frontend, you should call `reset()` to unlink any future events made on that device with that user.
-
-This is important if your users are sharing a computer, as otherwise all of those users are grouped together into a single user due to shared cookies between sessions.
-
-**We strongly recommend you call `reset` on logout even if you don't expect users to share a computer.**
-
-You can do that like so:
-
-PostHog AI
-
-### Web
-
-```javascript
-posthog.reset()
-```
-
-### iOS
-
-```swift
-PostHogSDK.shared.reset()
-```
-
-### Android
-
-```kotlin
-PostHog.reset()
-```
-
-### React Native
-
-```jsx
-posthog.reset()
-```
-
-### Dart
-
-```dart
-Posthog().reset()
-```
-
-If you *also* want to reset the `device_id` so that the device will be considered a new device in future events, you can pass `true` as an argument:
-
-Web
-
-PostHog AI
-
-```javascript
-posthog.reset(true)
-```
-
-### 4\. Person profiles and properties
-
-You'll notice that one of the parameters in the `identify` method is a `properties` object.
-
-This enables you to set [person properties](/docs/product-analytics/person-properties.md).
-
-Whenever possible, we recommend passing in all person properties you have available each time you call identify, as this ensures their person profile on PostHog is up to date.
-
-Person properties can also be set being adding a `$set` property to a event `capture` call.
-
-See our [person properties docs](/docs/product-analytics/person-properties.md) for more details on how to work with them and best practices.
-
-### 5\. Use deep links between platforms
-
-We recommend you call `identify` [as soon as you're able](#1-call-identify-as-soon-as-youre-able), typically when a user signs up or logs in.
-
-This doesn't work if one or both platforms are unauthenticated. Some examples of such cases are:
-
--   Onboarding and signup flows before authentication.
--   Unauthenticated web pages redirecting to authenticated mobile apps.
--   Authenticated web apps prompting an app download.
-
-In these cases, you can use a [deep link](https://developer.android.com/training/app-links/deep-linking) on Android and [universal links](https://developer.apple.com/documentation/xcode/supporting-universal-links-in-your-app) on iOS to identify users.
-
-1.  Use `posthog.get_distinct_id()` to get the current distinct ID. Even if you cannot call identify because the user is unauthenticated, this will return an anonymous distinct ID generated by PostHog.
-2.  Add the distinct ID to the deep link as query parameters, along with other properties like UTM parameters.
-3.  When the user is redirected to the app, parse the deep link and handle the following cases:
-
--   The user is already authenticated on the mobile app. In this case, call [`posthog.alias()`](/docs/libraries/js/features#alias.md) with the distinct ID from the web. This associates the two distinct IDs as a single person.
--   The user is unauthenticated. In this case, call [`posthog.identify()`](/docs/libraries/js/features#identifying-users.md) with the distinct ID from the web. Events will be associated with this distinct ID.
-
-As long as you associate the distinct IDs with `posthog.identify()` or `posthog.alias()`, you can track events generated across platforms.
-
-## Further reading
-
--   [Identifying users docs](/docs/product-analytics/identify.md)
--   [How person processing works](/docs/how-posthog-works/ingestion-pipeline#2-person-processing.md)
--   [An introductory guide to identifying users in PostHog](/tutorials/identifying-users-guide.md)
-
-### Community questions
-
-Ask a question
-
-### Was this page useful?
-
-HelpfulCould be better

.claude/skills/posthog-integration-nextjs-pages-router/references/next-js.md

@@ -1,377 +0,0 @@
-# Next.js - Docs
-
-PostHog makes it easy to get data about traffic and usage of your [Next.js](https://nextjs.org/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more.
-
-This guide walks you through integrating PostHog into your Next.js app using the [React](/docs/libraries/react.md) and the [Node.js](/docs/libraries/node.md) SDKs.
-
-> You can see a working example of this integration in our [Next.js demo app](https://github.com/PostHog/posthog-js/tree/main/playground/nextjs).
-
-Next.js has both client and server-side rendering, as well as pages and app routers. We'll cover all of these options in this guide.
-
-## Prerequisites
-
-To follow this guide along, you need:
-
-1.  A PostHog instance (either [Cloud](https://app.posthog.com/signup) or [self-hosted](/docs/self-host.md))
-2.  A Next.js application
-
-## Beta: integration via LLM
-
-Install PostHog for Next.js in seconds with our wizard by running this prompt with [LLM coding agents](/blog/envoy-wizard-llm-agent.md) like Cursor and Bolt, or by running it in your terminal.
-
-`npx @posthog/wizard@latest`
-
-[Learn more](/wizard.md)
-
-Or, to integrate manually, continue with the rest of this guide.
-
-## Client-side setup
-
-Install `posthog-js` using your package manager:
-
-PostHog AI
-
-### npm
-
-```bash
-npm install --save posthog-js
-```
-
-### Yarn
-
-```bash
-yarn add posthog-js
-```
-
-### pnpm
-
-```bash
-pnpm add posthog-js
-```
-
-### Bun
-
-```bash
-bun add posthog-js
-```
-
-Add your environment variables to your `.env.local` file and to your hosting provider (e.g. Vercel, Netlify, AWS). You can find your project token in your [project settings](https://app.posthog.com/project/settings).
-
-.env.local
-
-PostHog AI
-
-```shell
-NEXT_PUBLIC_POSTHOG_TOKEN=<ph_project_token>
-NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-```
-
-These values need to start with `NEXT_PUBLIC_` to be accessible on the client-side.
-
-## Integration
-
-Next.js provides the [`instrumentation-client.ts|js`](https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client) file for client-side setup. Add it to the root of your Next.js app (for both app and pages router) and initialize PostHog in it like this:
-
-PostHog AI
-
-### instrumentation-client.js
-
-```javascript
-import posthog from 'posthog-js'
-posthog.init(process.env.NEXT_PUBLIC_POSTHOG_TOKEN, {
-  api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-  defaults: '2026-01-30'
-});
-```
-
-### instrumentation-client.ts
-
-```typescript
-import posthog from 'posthog-js'
-posthog.init(process.env.NEXT_PUBLIC_POSTHOG_TOKEN!, {
-  api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-  defaults: '2026-01-30'
-});
-```
-
-Bootstrapping with `instrumentation-client`
-
-When using `instrumentation-client`, the values you pass to `posthog.init` remain fixed for the entire session. This means bootstrapping only works if you evaluate flags **before your app renders** (for example, on the server).
-
-If you need flag values after the app has rendered, you’ll want to:
-
--   Evaluate the flag on the server and pass the value into your app, or
--   Evaluate the flag in an earlier page/state, then store and re-use it when needed.
-
-Both approaches avoid flicker and give you the same outcome as bootstrapping, as long as you use the same `distinct_id` across client and server.
-
-See the [bootstrapping guide](/docs/feature-flags/bootstrapping.md) for more information.
-
-Set up a reverse proxy (recommended)
-
-We recommend [setting up a reverse proxy](/docs/advanced/proxy.md), so that events are less likely to be intercepted by tracking blockers.
-
-We have our [own managed reverse proxy service](/docs/advanced/proxy/managed-reverse-proxy.md), which is free for all PostHog Cloud users, routes through our infrastructure, and makes setting up your proxy easy.
-
-If you don't want to use our managed service then there are several other options for creating a reverse proxy, including using [Cloudflare](/docs/advanced/proxy/cloudflare.md), [AWS Cloudfront](/docs/advanced/proxy/cloudfront.md), and [Vercel](/docs/advanced/proxy/vercel.md).
-
-Grouping products in one project (recommended)
-
-If you have multiple customer-facing products (e.g. a marketing website + mobile app + web app), it's best to install PostHog on them all and [group them in one project](/docs/settings/projects.md).
-
-This makes it possible to track users across their entire journey (e.g. from visiting your marketing website to signing up for your product), or how they use your product across multiple platforms.
-
-Add IPs to Firewall/WAF allowlists (recommended)
-
-For certain features like [heatmaps](/docs/toolbar/heatmaps.md), your Web Application Firewall (WAF) may be blocking PostHog’s requests to your site. Add these IP addresses to your WAF allowlist or rules to let PostHog access your site.
-
-**EU**: `3.75.65.221`, `18.197.246.42`, `3.120.223.253`
-
-**US**: `44.205.89.55`, `52.4.194.122`, `44.208.188.173`
-
-These are public, stable IPs used by PostHog services (e.g., Celery tasks for snapshots).
-
-## Accessing PostHog
-
-Once initialized in `instrumentation-client.js|ts`, import `posthog` from `posthog-js` anywhere and call the methods you need on the `posthog` object.
-
-JavaScript
-
-PostHog AI
-
-```javascript
-'use client'
-import posthog from 'posthog-js'
-export default function Home() {
-  return (
-    <div>
-      <button onClick={() => posthog.capture('test_event')}>
-        Click me for an event
-      </button>
-    </div>
-  );
-}
-```
-
-### Using React hooks
-
-The [React feature flag hooks](/docs/libraries/react#feature-flags.md) work automatically when PostHog is initialized via `instrumentation-client.ts`. The hooks use the initialized posthog-js singleton:
-
-JavaScript
-
-PostHog AI
-
-```javascript
-'use client'
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-export default function FeatureComponent() {
-  const showNewFeature = useFeatureFlagEnabled('new-feature')
-  return showNewFeature ? <NewFeature /> : <OldFeature />
-}
-```
-
-### Usage
-
-See the [React SDK docs](/docs/libraries/react.md) for examples of how to use:
-
--   [`posthog-js` functions like custom event capture, user identification, and more.](/docs/libraries/react#using-posthog-js-functions.md)
--   [Feature flags including variants and payloads.](/docs/libraries/react#feature-flags.md)
-
-You can also read [the full `posthog-js` documentation](/docs/libraries/js/features.md) for all the usable functions.
-
-## Server-side analytics
-
-Next.js enables you to both server-side render pages and add server-side functionality. To integrate PostHog into your Next.js app on the server-side, you can use the [Node SDK](/docs/libraries/node.md).
-
-First, install the `posthog-node` library:
-
-PostHog AI
-
-### npm
-
-```bash
-npm install posthog-node --save
-```
-
-### Yarn
-
-```bash
-yarn add posthog-node
-```
-
-### pnpm
-
-```bash
-pnpm add posthog-node
-```
-
-### Bun
-
-```bash
-bun add posthog-node
-```
-
-### Router-specific instructions
-
-## App router
-
-For the app router, we can initialize the `posthog-node` SDK once with a `PostHogClient` function, and import it into files.
-
-This enables us to send events and fetch data from PostHog on the server – without making client-side requests.
-
-JavaScript
-
-PostHog AI
-
-```javascript
-// app/posthog.js
-import { PostHog } from 'posthog-node'
-export default function PostHogClient() {
-  const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_TOKEN, {
-    host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-    flushAt: 1,
-    flushInterval: 0
-  })
-  return posthogClient
-}
-```
-
-> **Note:** Because server-side functions in Next.js can be short-lived, we set `flushAt` to `1` and `flushInterval` to `0`.
->
-> -   `flushAt` sets how many capture calls we should flush the queue (in one batch).
-> -   `flushInterval` sets how many milliseconds we should wait before flushing the queue. Setting them to the lowest number ensures events are sent immediately and not batched. We also need to call `await posthog.shutdown()` once done.
-
-To use this client, we import it into our pages and call it with the `PostHogClient` function:
-
-JavaScript
-
-PostHog AI
-
-```javascript
-import Link from 'next/link'
-import PostHogClient from '../posthog'
-export default async function About() {
-  const posthog = PostHogClient()
-  const flags = await posthog.getAllFlags(
-    'user_distinct_id' // replace with a user's distinct ID
-  );
-  await posthog.shutdown()
-  return (
-    <main>
-      <h1>About</h1>
-      <Link href="/">Go home</Link>
-      { flags['main-cta'] &&
-        <Link href="http://posthog.com/">Go to PostHog</Link>
-      }
-    </main>
-  )
-}
-```
-
-## Pages router
-
-For the pages router, we can use the `getServerSideProps` function to access PostHog on the server-side, send events, evaluate feature flags, and more.
-
-This looks like this:
-
-JavaScript
-
-PostHog AI
-
-```javascript
-// pages/posts/[id].js
-import { useContext, useEffect, useState } from 'react'
-import { getServerSession } from "next-auth/next"
-import { PostHog } from 'posthog-node'
-export default function Post({ post, flags }) {
-  const [ctaState, setCtaState] = useState()
-  useEffect(() => {
-    if (flags) {
-      setCtaState(flags['blog-cta'])
-    }
-  })
-  return (
-    <div>
-      <h1>{post.title}</h1>
-      <p>By: {post.author}</p>
-      <p>{post.content}</p>
-      {ctaState &&
-        <p><a href="/">Go to PostHog</a></p>
-      }
-      <button onClick={likePost}>Like</button>
-    </div>
-  )
-}
-export async function getServerSideProps(ctx) {
-  const session = await getServerSession(ctx.req, ctx.res)
-  let flags = null
-  if (session) {
-    const client = new PostHog(
-      process.env.NEXT_PUBLIC_POSTHOG_TOKEN,
-      {
-        host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-      }
-    )
-    flags = await client.getAllFlags(session.user.email);
-    client.capture({
-      distinctId: session.user.email,
-      event: 'loaded blog article',
-      properties: {
-        $current_url: ctx.req.url,
-      },
-    });
-    await client.shutdown()
-  }
-  const { posts } = await import('../../blog.json')
-  const post = posts.find((post) => post.id.toString() === ctx.params.id)
-  return {
-    props: {
-      post,
-      flags
-    },
-  }
-}
-```
-
-> **Note**: Make sure to *always* call `await client.shutdown()` after sending events from the server-side. PostHog queues events into larger batches, and this call forces all batched events to be flushed immediately.
-
-### Server-side configuration
-
-Next.js overrides the default `fetch` behavior on the server to introduce their own cache. PostHog ignores that cache by default, as this is Next.js's default behavior for any fetch call.
-
-You can override that configuration when initializing PostHog, but make sure you understand the pros/cons of using Next.js's cache and that you might get cached results rather than the actual result our server would return. This is important for feature flags, for example.
-
-TSX
-
-PostHog AI
-
-```jsx
-posthog.init(process.env.NEXT_PUBLIC_POSTHOG_TOKEN, {
-  // ... your configuration
-  fetch_options: {
-    cache: 'force-cache', // Use Next.js cache
-    next_options: {       // Passed to the `next` option for `fetch`
-      revalidate: 60,     // Cache for 60 seconds
-      tags: ['posthog'],  // Can be used with Next.js `revalidateTag` function
-    },
-  }
-})
-```
-
-## Configuring a reverse proxy to PostHog
-
-To improve the reliability of client-side tracking and make requests less likely to be intercepted by tracking blockers, you can setup a reverse proxy in Next.js. Read more about deploying a reverse proxy using [Next.js rewrites](/docs/advanced/proxy/nextjs.md), [Next.js middleware](/docs/advanced/proxy/nextjs-middleware.md), and [Vercel rewrites](/docs/advanced/proxy/vercel.md).
-
-## Further reading
-
--   [How to set up Next.js analytics, feature flags, and more](/tutorials/nextjs-analytics.md)
--   [How to set up Next.js pages router analytics, feature flags, and more](/tutorials/nextjs-pages-analytics.md)
--   [How to set up Next.js A/B tests](/tutorials/nextjs-ab-tests.md)
-
-### Community questions
-
-Ask a question
-
-### Was this page useful?
-
-HelpfulCould be better

.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/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/i18n-management.mdc

@@ -0,0 +1,457 @@
+---
+title: i18n Management with Lingo.dev
+description: Guidelines for managing internationalization (i18n) with Lingo.dev, including translation workflow, key validation, and best practices
+---
+
+# i18n Management with Lingo.dev
+
+This rule defines the workflow and best practices for managing internationalization (i18n) in the Formbricks project using Lingo.dev.
+
+## Overview
+
+Formbricks uses [Lingo.dev](https://lingo.dev) for managing translations across multiple languages. The translation workflow includes:
+
+1. **Translation Keys**: Defined in code using the `t()` function from `react-i18next`
+2. **Translation Files**: JSON files stored in `apps/web/locales/` for each supported language
+3. **Validation**: Automated scanning to detect missing and unused translation keys
+4. **CI/CD**: Pre-commit hooks and GitHub Actions to enforce translation quality
+
+## Translation Workflow
+
+### 1. Using Translations in Code
+
+When adding translatable text in the web app, use the `t()` function or `<Trans>` component:
+
+**Using the `t()` function:**
+```tsx
+import { useTranslate } from "@/lib/i18n/translate";
+
+const MyComponent = () => {
+  const { t } = useTranslate();
+  
+  return (
+    <div>
+      <h1>{t("common.welcome")}</h1>
+      <p>{t("pages.dashboard.description")}</p>
+    </div>
+  );
+};
+```
+
+**Using the `<Trans>` component (for text with HTML elements):**
+```tsx
+import { Trans } from "react-i18next";
+
+const MyComponent = () => {
+  return (
+    <div>
+      <p>
+        <Trans
+          i18nKey="auth.terms_agreement"
+          components={{ 
+            link: <a href="/terms" />,
+            b: <b />
+          }}
+        />
+      </p>
+    </div>
+  );
+};
+```
+
+**Key Naming Conventions:**
+- Use dot notation for nested keys: `section.subsection.key`
+- Use descriptive names: `auth.login.success_message` not `auth.msg1`
+- Group related keys together: `auth.*`, `errors.*`, `common.*`
+- Use lowercase with underscores: `user_profile_settings` not `UserProfileSettings`
+
+### 2. Translation File Structure
+
+Translation files are located in `apps/web/locales/` and use the following naming convention:
+- `en-US.json` (English - United States, default)
+- `de-DE.json` (German)
+- `fr-FR.json` (French)
+- `pt-BR.json` (Portuguese - Brazil)
+- etc.
+
+**File Structure:**
+```json
+{
+  "common": {
+    "welcome": "Welcome",
+    "save": "Save",
+    "cancel": "Cancel"
+  },
+  "auth": {
+    "login": {
+      "title": "Login",
+      "email_placeholder": "Enter your email",
+      "password_placeholder": "Enter your password"
+    }
+  }
+}
+```
+
+### 3. Adding New Translation Keys
+
+When adding new translation keys:
+
+1. **Add the key in your code** using `t("your.new.key")`
+2. **Add translation for that key in en-US.json file**
+3. **Run the translation workflow:**
+   ```bash
+   pnpm i18n
+   ```
+   This will:
+   - Generate translations for all languages using Lingo.dev
+   - Validate that all keys are present and used
+
+4. **Review and commit** the generated translation files
+
+### 4. Available Scripts
+
+```bash
+# Generate translations using Lingo.dev
+pnpm generate-translations
+
+# Scan and validate translation keys
+pnpm scan-translations
+
+# Full workflow: generate + validate
+pnpm i18n
+
+# Validate only (without generation)
+pnpm i18n:validate
+```
+
+## Translation Key Validation
+
+### Automated Validation
+
+The project includes automated validation that runs:
+- **Pre-commit hook**: Validates translations before allowing commits (when `LINGODOTDEV_API_KEY` is set)
+- **GitHub Actions**: Validates translations on every PR and push to main
+
+### Validation Rules
+
+The validation script (`scan-translations.ts`) checks for:
+
+1. **Missing Keys**: Translation keys used in code but not present in translation files
+2. **Unused Keys**: Translation keys present in translation files but not used in code
+3. **Incomplete Translations**: Keys that exist in the default language (`en-US`) but are missing in target languages
+
+**What gets scanned:**
+- All `.ts` and `.tsx` files in `apps/web/`
+- Both `t()` function calls and `<Trans i18nKey="">` components
+- All locale files (`de-DE.json`, `fr-FR.json`, `ja-JP.json`, etc.)
+
+**What gets excluded:**
+- Test files (`*.test.ts`, `*.test.tsx`, `*.spec.ts`, `*.spec.tsx`)
+- Build directories (`node_modules`, `dist`, `build`, `.next`, `coverage`)
+- Locale files themselves (from code scanning)
+
+**Note:** Test files are excluded because they often use mock or example translation keys for testing purposes that don't need to exist in production translation files.
+
+### Fixing Validation Errors
+
+#### Missing Keys
+
+If you encounter missing key errors:
+
+```
+❌ MISSING KEYS (2):
+
+   These keys are used in code but not found in translation files:
+
+   • auth.signup.email_required
+   • settings.profile.update_success
+```
+
+**Resolution:**
+1. Ensure that translations for those keys are present in en-US.json .  
+2. Run `pnpm generate-translations` to have Lingo.dev generate the missing translations
+3. OR manually add the keys to `apps/web/locales/en-US.json`:
+   ```json
+   {
+     "auth": {
+       "signup": {
+         "email_required": "Email is required"
+       }
+     },
+     "settings": {
+       "profile": {
+         "update_success": "Profile updated successfully"
+       }
+     }
+   }
+   ```
+3. Run `pnpm scan-translations` to verify
+4. Commit the changes
+
+#### Unused Keys
+
+If you encounter unused key errors:
+
+```
+⚠️  UNUSED KEYS (1):
+
+   These keys exist in translation files but are not used in code:
+
+   • old.deprecated.key
+```
+
+**Resolution:**
+1. If the key is truly unused, remove it from all translation files
+2. If the key should be used, add it to your code using `t("old.deprecated.key")`
+3. Run `pnpm scan-translations` to verify
+4. Commit the changes
+
+#### Incomplete Translations
+
+If you encounter incomplete translation errors:
+
+```
+⚠️  INCOMPLETE TRANSLATIONS:
+
+   Some keys from en-US are missing in target languages:
+
+   📝 de-DE (5 missing keys):
+      • auth.new_feature.title
+      • auth.new_feature.description
+      • settings.advanced.option
+      ... and 2 more
+```
+
+**Resolution:**
+1. **Recommended:** Run `pnpm generate-translations` to have Lingo.dev automatically translate the missing keys
+2. **Manual:** Add the missing keys to the target language files:
+   ```bash
+   # Copy the structure from en-US.json and translate the values
+   # For example, in de-DE.json:
+   {
+     "auth": {
+       "new_feature": {
+         "title": "Neues Feature",
+         "description": "Beschreibung des neuen Features"
+       }
+     }
+   }
+   ```
+3. Run `pnpm scan-translations` to verify all translations are complete
+4. Commit the changes
+
+## Pre-commit Hook Behavior
+
+The pre-commit hook will:
+
+1. Run `lint-staged` for code formatting
+2. If `LINGODOTDEV_API_KEY` is set:
+   - Generate translations using Lingo.dev
+   - Validate translation keys
+   - Auto-add updated locale files to the commit
+   - **Block the commit** if validation fails
+3. If `LINGODOTDEV_API_KEY` is not set:
+   - Skip translation validation (for community contributors)
+   - Show a warning message
+
+## Environment Variables
+
+### LINGODOTDEV_API_KEY
+
+This is the API key for Lingo.dev integration.
+
+**For Core Team:**
+- Add to your local `.env` file
+- Required for running translation generation
+
+**For Community Contributors:**
+- Not required for local development
+- Translation validation will be skipped
+- The CI will still validate translations
+
+## Best Practices
+
+### 1. Keep Keys Organized
+
+Group related keys together:
+```json
+{
+  "auth": {
+    "login": { ... },
+    "signup": { ... },
+    "forgot_password": { ... }
+  },
+  "dashboard": {
+    "header": { ... },
+    "sidebar": { ... }
+  }
+}
+```
+
+### 2. Avoid Hardcoded Strings
+
+**❌ Bad:**
+```tsx
+<button>Click here</button>
+```
+
+**✅ Good:**
+```tsx
+<button>{t("common.click_here")}</button>
+```
+
+### 3. Use Interpolation for Dynamic Content
+
+**❌ Bad:**
+```tsx
+{t("welcome")} {userName}!
+```
+
+**✅ Good:**
+```tsx
+{t("auth.welcome_message", { userName })}
+```
+
+With translation:
+```json
+{
+  "auth": {
+    "welcome_message": "Welcome, {userName}!"
+  }
+}
+```
+
+### 4. Avoid Dynamic Key Construction
+
+**❌ Bad:**
+```tsx
+const key = `errors.${errorCode}`;
+t(key);
+```
+
+**✅ Good:**
+```tsx
+switch (errorCode) {
+  case "401":
+    return t("errors.unauthorized");
+  case "404":
+    return t("errors.not_found");
+  default:
+    return t("errors.unknown");
+}
+```
+
+### 5. Test Translation Keys
+
+When adding new features:
+1. Add translation keys
+2. Test in multiple languages using the language switcher
+3. Ensure text doesn't overflow in longer translations (German, French)
+4. Run `pnpm scan-translations` before committing
+
+## Troubleshooting
+
+### Issue: Pre-commit hook fails with validation errors
+
+**Solution:**
+```bash
+# Run the full i18n workflow
+pnpm i18n
+
+# Fix any missing or unused keys
+# Then commit again
+git add .
+git commit -m "your message"
+```
+
+### Issue: Translation validation passes locally but fails in CI
+
+**Solution:**
+- Ensure all translation files are committed
+- Check that `scan-translations.ts` hasn't been modified
+- Verify that locale files are properly formatted JSON
+
+### Issue: Cannot commit because of missing translations
+
+**Solution:**
+```bash
+# If you have LINGODOTDEV_API_KEY:
+pnpm generate-translations
+
+# If you don't have the API key (community contributor):
+# Manually add the missing keys to en-US.json
+# Then run validation:
+pnpm scan-translations
+```
+
+### Issue: Getting "unused keys" for keys that are used
+
+**Solution:**
+- The script scans `.ts` and `.tsx` files only
+- If keys are used in other file types, they may be flagged
+- Verify the key is actually used with `grep -r "your.key" apps/web/`
+- If it's a false positive, consider updating the scanning patterns in `scan-translations.ts`
+
+## AI Assistant Guidelines
+
+When assisting with i18n-related tasks, always:
+
+1. **Use the `t()` function** for all user-facing text
+2. **Follow key naming conventions** (lowercase, dots for nesting)
+3. **Run validation** after making changes: `pnpm scan-translations`
+4. **Fix missing keys** by adding them to `en-US.json`
+5. **Remove unused keys** from all translation files
+6. **Test the pre-commit hook** if making changes to translation workflow
+7. **Update this rule file** if translation workflow changes
+
+### Fixing Missing Translation Keys
+
+When the AI encounters missing translation key errors:
+
+1. Identify the missing keys from the error output
+2. Determine the appropriate section and naming for each key
+3. Add the keys to `apps/web/locales/en-US.json` with meaningful English text
+4. Ensure proper JSON structure and nesting
+5. Run `pnpm scan-translations` to verify
+6. Inform the user that other language files will be updated via Lingo.dev
+
+**Example:**
+```typescript
+// Error: Missing key "settings.api.rate_limit_exceeded"
+
+// Add to en-US.json:
+{
+  "settings": {
+    "api": {
+      "rate_limit_exceeded": "API rate limit exceeded. Please try again later."
+    }
+  }
+}
+```
+
+### Removing Unused Translation Keys
+
+When the AI encounters unused translation key errors:
+
+1. Verify the keys are truly unused by searching the codebase
+2. Remove the keys from `apps/web/locales/en-US.json`
+3. Note that removal from other language files can be handled via Lingo.dev
+4. Run `pnpm scan-translations` to verify
+
+## Migration Notes
+
+This project previously used Tolgee for translations. As of this migration:
+
+- **Old scripts**: `tolgee-pull` is deprecated (kept for reference)
+- **New scripts**: Use `pnpm i18n` or `pnpm generate-translations`
+- **Old workflows**: `tolgee.yml` and `tolgee-missing-key-check.yml` removed
+- **New workflow**: `translation-check.yml` handles all validation
+
+---
+
+**Last Updated:** October 14, 2025
+**Related Files:**
+- `scan-translations.ts` - Translation validation script
+- `.husky/pre-commit` - Pre-commit hook with i18n validation
+- `.github/workflows/translation-check.yml` - CI workflow for translation validation
+- `apps/web/locales/*.json` - Translation files

.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/review-and-refine.mdc

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

.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. 

.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)
@@ -184,13 +177,8 @@ ENTERPRISE_LICENSE_KEY=
 # Ignore Rate Limiting across the Formbricks app
 # RATE_LIMITING_DISABLED=1
 
-# OpenTelemetry OTLP endpoint (base URL, exporters append /v1/traces and /v1/metrics)
-# OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
-# OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
-# OTEL_SERVICE_NAME=formbricks
-# OTEL_RESOURCE_ATTRIBUTES=deployment.environment=development
-# OTEL_TRACES_SAMPLER=parentbased_traceidratio
-# OTEL_TRACES_SAMPLER_ARG=1
+# OpenTelemetry URL for tracing
+# OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces
 
 # Unsplash API Key
 UNSPLASH_ACCESS_KEY=
@@ -201,9 +189,8 @@ 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=
+# INTERCOM_APP_ID=
+# INTERCOM_SECRET_KEY=
 
 # Enable Prometheus metrics
 # PROMETHEUS_ENABLED=

.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
@@ -202,30 +208,32 @@ 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'
+        if: env.AZURE_ENABLED == 'false'
         env:
           CI: true
         run: |

.github/workflows/formbricks-release.yml

@@ -89,7 +89,7 @@ jobs:
       - check-latest-release
     with:
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
+      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
 
   docker-build-cloud:
     name: Build & push Formbricks Cloud to ECR
@@ -101,7 +101,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' }}
+      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
     needs:
       - check-latest-release
       - docker-build-community
@@ -154,4 +154,4 @@ jobs:
       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' }}
+      make_latest: ${{ needs.check-latest-release.outputs.is_latest }}

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

@@ -111,21 +111,27 @@ jobs:
             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.';
+            const body = `## 🚨 PR Size Warning
+            
+This PR has approximately **${totalChanges} lines** of changes (${additions} additions, ${deletions} deletions across ${countedFiles} files).
+
+Large PRs (>800 lines) are significantly harder to review and increase the chance of merge conflicts. Consider splitting this into smaller, self-contained PRs.
+
+### 💡 Suggestions:
+- **Split by feature or module** - Break down into logical, independent pieces
+- **Create a sequence of PRs** - Each building on the previous one
+- **Branch off PR branches** - Don't wait for reviews to continue dependent work
+
+### 📊 What was counted:
+- ✅ Source files, stylesheets, configuration files
+- ❌ Excluded ${excludedFiles} files (tests, locales, locks, generated files)
+
+### 📚 Guidelines:
+- **Ideal:** 300-500 lines per PR
+- **Warning:** 500-800 lines
+- **Critical:** 800+ lines ⚠️
+
+If this large PR is unavoidable (e.g., migration, dependency update, major refactor), please explain in the PR description why it couldn't be split.`;
             
             // Check if we already commented
             const { data: comments } = await github.rest.issues.listComments({

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

@@ -65,8 +65,8 @@ jobs:
           set -euo pipefail
 
           echo "Updating Chart.yaml with version: ${VERSION}"
-          yq -i ".version = \"${VERSION}\"" charts/formbricks/Chart.yaml
-          yq -i ".appVersion = \"${VERSION}\"" charts/formbricks/Chart.yaml
+          yq -i ".version = \"${VERSION}\"" helm-chart/Chart.yaml
+          yq -i ".appVersion = \"${VERSION}\"" helm-chart/Chart.yaml
 
           echo "✅ Successfully updated Chart.yaml"
 
@@ -77,7 +77,7 @@ jobs:
           set -euo pipefail
 
           echo "Packaging Helm chart version: ${VERSION}"
-          helm package ./charts/formbricks
+          helm package ./helm-chart
 
           echo "✅ Successfully packaged formbricks-${VERSION}.tgz"
 

.github/workflows/sonarqube.yml

@@ -9,7 +9,6 @@ on:
   merge_group:
 permissions:
   contents: read
-  pull-requests: read
 jobs:
   sonarqube:
     name: SonarQube
@@ -51,9 +50,6 @@ jobs:
           pnpm test:coverage
       - name: SonarQube Scan
         uses: SonarSource/sonarqube-scan-action@2500896589ef8f7247069a56136f8dc177c27ccf
-        with:
-          args: >
-            -Dsonar.verbose=true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/translation-check.yml

@@ -6,9 +6,19 @@ permissions:
 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:
@@ -22,39 +32,32 @@ jobs:
         with:
           egress-policy: audit
 
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - name: Check for relevant changes
-        id: changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      - name: Setup Node.js
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
-          filters: |
-            translations:
-              - 'apps/web/**/*.ts'
-              - 'apps/web/**/*.tsx'
-              - 'apps/web/locales/**/*.json'
-              - 'packages/surveys/src/**/*.{ts,tsx}'
-              - 'packages/surveys/locales/**/*.json'
-              - 'packages/email/**/*.{ts,tsx}'
+          node-version: 18
 
-      - name: Setup Node.js 22.x
-        if: steps.changes.outputs.translations == 'true'
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+      - name: Setup pnpm
+        uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d # v3.0.0
         with:
-          node-version: 22.x
-
-      - name: Install pnpm
-        if: steps.changes.outputs.translations == 'true'
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+          version: 9.15.9
 
       - name: Install dependencies
-        if: steps.changes.outputs.translations == 'true'
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile
 
       - name: Validate translation keys
-        if: steps.changes.outputs.translations == 'true'
-        run: pnpm run scan-translations
+        run: |
+          echo ""
+          echo "🔍 Validating translation keys..."
+          echo ""
+          pnpm run scan-translations
 
-      - name: Skip (no translation-related changes)
-        if: steps.changes.outputs.translations != 'true'
-        run: echo "No translation-related files changed — skipping validation."
+      - name: Summary
+        if: success()
+        run: |
+          echo ""
+          echo "✅ Translation validation completed successfully!"
+          echo ""

.gitignore

@@ -13,7 +13,6 @@
 **/.next/
 **/out/
 **/build
-**/next-env.d.ts
 
 # node
 **/dist/
@@ -63,7 +62,3 @@ branch.json
 packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdata
 .cursorrules
 i18n.cache
-stats.html
-# next-agents-md
-.next-docs/
-.env

.husky/post-checkout

@@ -0,0 +1,2 @@
+echo "{\"branchName\": \"$(git rev-parse --abbrev-ref HEAD)\"}" > ./branch.json
+prettier --write ./branch.json

.husky/pre-commit

@@ -1 +1,43 @@
-pnpm lint-staged
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+# Load environment variables from .env files
+if [ -f .env ]; then
+  set -a
+  . .env
+  set +a
+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
+  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
+  fi
+else
+  echo ""
+  echo "⚠️  Skipping translation validation: LINGODOTDEV_API_KEY is not set"
+  echo "   (This is expected for community contributors)"
+  echo ""
+fi

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,19 @@
 import type { Preview } from "@storybook/react-vite";
 import React from "react";
-import "../../../packages/survey-ui/src/styles/globals.css";
+import { I18nProvider } from "../../web/lingodotdev/client";
+import "../../web/modules/ui/globals.css";
+
+// Create a Storybook-specific Lingodot Dev decorator
+const withLingodotDev = (Story: any) => {
+  return React.createElement(
+    I18nProvider,
+    {
+      language: "en-US",
+      defaultLanguage: "en-US",
+    } as any,
+    React.createElement(Story)
+  );
+};
 
 const preview: Preview = {
   parameters: {
@@ -9,23 +22,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: [withLingodotDev],
 };
 
 export default preview;

apps/storybook/package.json

@@ -10,20 +10,23 @@
     "build-storybook": "storybook build",
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
+  "dependencies": {
+    "eslint-plugin-react-refresh": "0.4.20"
+  },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
-    "@storybook/addon-a11y": "10.2.15",
-    "@storybook/addon-links": "10.2.15",
-    "@storybook/addon-onboarding": "10.2.15",
-    "@storybook/react-vite": "10.2.15",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@tailwindcss/vite": "4.2.1",
-    "@typescript-eslint/parser": "8.56.1",
-    "@vitejs/plugin-react": "5.1.4",
-    "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.2.14",
-    "storybook": "10.2.15",
-    "vite": "7.3.1",
-    "@storybook/addon-docs": "10.2.15"
+    "@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": "9.0.15",
+    "vite": "6.4.1",
+    "@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/.eslintrc.js

@@ -1,4 +1,20 @@
 module.exports = {
   extends: ["@formbricks/eslint-config/legacy-next.js"],
   ignorePatterns: ["**/package.json", "**/tsconfig.json"],
+  overrides: [
+    {
+      files: ["locales/*.json"],
+      plugins: ["i18n-json"],
+      rules: {
+        "i18n-json/identical-keys": [
+          "error",
+          {
+            filePath: require("path").join(__dirname, "locales", "en-US.json"),
+            checkExtraKeys: false,
+            checkMissingKeys: true,
+          },
+        ],
+      },
+    },
+  ],
 };

apps/web/.prettierrc.js

@@ -1,6 +0,0 @@
-const baseConfig = require("../../.prettierrc.js");
-
-module.exports = {
-  ...baseConfig,
-  tailwindConfig: "./tailwind.config.js",
-};

apps/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24-alpine3.23 AS base
+FROM node:22-alpine3.22 AS base
 
 #
 ## step 1: Prune monorepo
@@ -20,7 +20,7 @@ FROM base AS installer
 # Enable corepack and prepare pnpm
 RUN npm install --ignore-scripts -g corepack@latest 
 RUN corepack enable
-RUN corepack prepare pnpm@10.28.2 --activate
+RUN corepack prepare pnpm@9.15.9 --activate
 
 # Install necessary build tools and compilers
 RUN apk update && apk add --no-cache cmake g++ gcc jq make openssl-dev python3
@@ -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
 
@@ -69,14 +65,20 @@ RUN --mount=type=secret,id=database_url \
     --mount=type=secret,id=sentry_auth_token \
     /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...
 
+# Extract Prisma version
+RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_version.txt
+
 #
 ## step 3: setup production runner
 #
 FROM base AS runner
 
-# Update npm to latest, then create user
-# Note: npm's bundled tar has a known vulnerability but npm is only used during build, not at runtime
-RUN npm install --ignore-scripts -g npm@latest \
+RUN npm install --ignore-scripts -g corepack@latest 
+RUN corepack enable
+
+RUN apk add --no-cache curl \
+    && apk add --no-cache supercronic \
+    # && addgroup --system --gid 1001 nodejs \
     && addgroup -S nextjs \
     && adduser -S -u 1001 -G nextjs nextjs
 
@@ -98,56 +100,31 @@ 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/package.json ./packages/database/package.json
-RUN chown nextjs:nextjs ./packages/database/package.json && chmod 644 ./packages/database/package.json
-
 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
 
 COPY --from=installer /app/packages/database/dist ./packages/database/dist
 RUN chown -R nextjs:nextjs ./packages/database/dist && chmod -R 755 ./packages/database/dist
 
-# Copy prisma client packages
 COPY --from=installer /app/node_modules/@prisma/client ./node_modules/@prisma/client
 RUN chown -R nextjs:nextjs ./node_modules/@prisma/client && chmod -R 755 ./node_modules/@prisma/client
 
 COPY --from=installer /app/node_modules/.prisma ./node_modules/.prisma
 RUN chown -R nextjs:nextjs ./node_modules/.prisma && chmod -R 755 ./node_modules/.prisma
 
+COPY --from=installer /prisma_version.txt .
+RUN chown nextjs:nextjs ./prisma_version.txt && chmod 644 ./prisma_version.txt
+
 COPY --from=installer /app/node_modules/@paralleldrive/cuid2 ./node_modules/@paralleldrive/cuid2
 RUN chmod -R 755 ./node_modules/@paralleldrive/cuid2
 
-COPY --from=installer /app/node_modules/uuid ./node_modules/uuid
-RUN chmod -R 755 ./node_modules/uuid
-
 COPY --from=installer /app/node_modules/@noble/hashes ./node_modules/@noble/hashes
 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
 
-# Pino loads transport code in worker threads via dynamic require().
-# Next.js file tracing only traces static imports, missing runtime-loaded files
-# (e.g. pino/lib/transport-stream.js, transport targets).
-# Copy the full packages to ensure all runtime files are available.
-COPY --from=installer /app/node_modules/pino ./node_modules/pino
-RUN chmod -R 755 ./node_modules/pino
-
-COPY --from=installer /app/node_modules/pino-opentelemetry-transport ./node_modules/pino-opentelemetry-transport
-RUN chmod -R 755 ./node_modules/pino-opentelemetry-transport
-
-COPY --from=installer /app/node_modules/pino-abstract-transport ./node_modules/pino-abstract-transport
-RUN chmod -R 755 ./node_modules/pino-abstract-transport
-
-COPY --from=installer /app/node_modules/otlp-logger ./node_modules/otlp-logger
-RUN chmod -R 755 ./node_modules/otlp-logger
-
-# Install prisma CLI globally for database migrations and fix permissions for nextjs user
-RUN npm install --ignore-scripts -g prisma@6 \
-    && chown -R nextjs:nextjs /usr/local/lib/node_modules/prisma
+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
@@ -157,11 +134,12 @@ EXPOSE 3000
 ENV HOSTNAME="0.0.0.0"
 USER nextjs
 
-# Prepare volumes for uploads and SAML connections
-RUN 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.tsx

@@ -69,7 +69,7 @@ export const ConnectWithFormbricks = ({
           ) : (
             <div className="flex animate-pulse flex-col items-center space-y-4">
               <span className="relative flex h-10 w-10">
-                <span className="absolute inline-flex h-full w-full animate-ping-slow rounded-full bg-slate-400 opacity-75"></span>
+                <span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-slate-400 opacity-75"></span>
                 <span className="relative inline-flex h-10 w-10 rounded-full bg-slate-500"></span>
               </span>
               <p className="pt-4 text-sm font-medium text-slate-600">

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

@@ -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;

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

@@ -25,7 +25,7 @@ const mockProject: TProject = {
   },
   placement: "bottomRight",
   clickOutsideClose: true,
-  overlay: "none",
+  darkOverlay: false,
   environments: [],
   languages: [],
   logo: null,

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

@@ -105,7 +105,7 @@ const starRatingSurvey = (t: TFunction): TXMTemplate => {
                   id: createId(),
                   leftOperand: {
                     value: reusableElementIds[0],
-                    type: "element",
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -133,13 +133,13 @@ const starRatingSurvey = (t: TFunction): TXMTemplate => {
             id: reusableElementIds[1],
             subheader: t("templates.star_rating_survey_question_2_html"),
             headline: t("templates.star_rating_survey_question_2_headline"),
-            required: false,
+            required: true,
             buttonUrl: "https://formbricks.com/github",
             buttonExternal: true,
-            ctaButtonLabel: t("templates.star_rating_survey_question_2_button_label"),
           }),
         ],
         logic: [createBlockJumpLogic(reusableElementIds[1], defaultSurvey.endings[0].id, "isClicked")],
+        buttonLabel: t("templates.star_rating_survey_question_2_button_label"),
         t,
       }),
       buildBlock({
@@ -195,7 +195,7 @@ const csatSurvey = (t: TFunction): TXMTemplate => {
                   id: createId(),
                   leftOperand: {
                     value: reusableElementIds[0],
-                    type: "element",
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -316,7 +316,7 @@ const smileysRatingSurvey = (t: TFunction): TXMTemplate => {
                   id: createId(),
                   leftOperand: {
                     value: reusableElementIds[0],
-                    type: "element",
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -344,13 +344,13 @@ const smileysRatingSurvey = (t: TFunction): TXMTemplate => {
             id: reusableElementIds[1],
             subheader: t("templates.smileys_survey_question_2_html"),
             headline: t("templates.smileys_survey_question_2_headline"),
-            required: false,
+            required: true,
             buttonUrl: "https://formbricks.com/github",
             buttonExternal: true,
-            ctaButtonLabel: t("templates.smileys_survey_question_2_button_label"),
           }),
         ],
         logic: [createBlockJumpLogic(reusableElementIds[1], defaultSurvey.endings[0].id, "isClicked")],
+        buttonLabel: t("templates.smileys_survey_question_2_button_label"),
         t,
       }),
       buildBlock({

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

@@ -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);

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

@@ -42,7 +42,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
   return (
     <aside
       className={cn(
-        "z-40 flex w-sidebar-collapsed flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100"
+        "w-sidebar-collapsed z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100"
       )}>
       <Image src={FBLogo} width={160} height={30} alt={t("environments.formbricks_logo")} />
 

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

@@ -50,8 +50,8 @@ const Page = async (props) => {
           </div>
           <div className="flex h-full flex-col items-center justify-center space-y-12">
             <Header
-              title={t("organizations.landing.no_workspaces_warning_title")}
-              subtitle={t("organizations.landing.no_workspaces_warning_subtitle")}
+              title={t("organizations.landing.no_projects_warning_title")}
+              subtitle={t("organizations.landing.no_projects_warning_subtitle")}
             />
           </div>
         </div>

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

@@ -1,6 +1,8 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { AuthorizationError } from "@formbricks/types/errors";
+import { PosthogIdentify } from "@/app/(app)/environments/[environmentId]/components/PosthogIdentify";
+import { IS_POSTHOG_CONFIGURED } from "@/lib/constants";
 import { canUserAccessOrganization } from "@/lib/organization/auth";
 import { getOrganization } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
@@ -38,6 +40,14 @@ const ProjectOnboardingLayout = async (props) => {
 
   return (
     <div className="flex-1 bg-slate-50">
+      <PosthogIdentify
+        session={session}
+        user={user}
+        organizationId={organization.id}
+        organizationName={organization.name}
+        organizationBilling={organization.billing}
+        isPosthogEnabled={IS_POSTHOG_CONFIGURED}
+      />
       <ToasterClient />
       {children}
     </div>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx

@@ -26,16 +26,16 @@ const Page = async (props: ChannelPageProps) => {
   const t = await getTranslate();
   const channelOptions = [
     {
-      title: t("organizations.workspaces.new.channel.link_and_email_surveys"),
-      description: t("organizations.workspaces.new.channel.link_and_email_surveys_description"),
+      title: t("organizations.projects.new.channel.link_and_email_surveys"),
+      description: t("organizations.projects.new.channel.link_and_email_surveys_description"),
       icon: SendIcon,
-      href: `/organizations/${params.organizationId}/workspaces/new/settings?channel=link`,
+      href: `/organizations/${params.organizationId}/projects/new/settings?channel=link`,
     },
     {
-      title: t("organizations.workspaces.new.channel.in_product_surveys"),
-      description: t("organizations.workspaces.new.channel.in_product_surveys_description"),
+      title: t("organizations.projects.new.channel.in_product_surveys"),
+      description: t("organizations.projects.new.channel.in_product_surveys_description"),
       icon: PictureInPicture2Icon,
-      href: `/organizations/${params.organizationId}/workspaces/new/settings?channel=app`,
+      href: `/organizations/${params.organizationId}/projects/new/settings?channel=app`,
     },
   ];
 
@@ -44,8 +44,8 @@ const Page = async (props: ChannelPageProps) => {
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header
-        title={t("organizations.workspaces.new.channel.channel_select_title")}
-        subtitle={t("organizations.workspaces.new.channel.channel_select_subtitle")}
+        title={t("organizations.projects.new.channel.channel_select_title")}
+        subtitle={t("organizations.projects.new.channel.channel_select_subtitle")}
       />
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/layout.tsx

@@ -15,7 +15,7 @@ const OnboardingLayout = async (props) => {
   const t = await getTranslate();
 
   const session = await getServerSession(authOptions);
-  if (!session?.user) {
+  if (!session || !session.user) {
     return redirect(`/auth/login`);
   }
 

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/mode/page.tsx

@@ -26,16 +26,16 @@ const Page = async (props: ModePageProps) => {
   const t = await getTranslate();
   const channelOptions = [
     {
-      title: t("organizations.workspaces.new.mode.formbricks_surveys"),
-      description: t("organizations.workspaces.new.mode.formbricks_surveys_description"),
+      title: t("organizations.projects.new.mode.formbricks_surveys"),
+      description: t("organizations.projects.new.mode.formbricks_surveys_description"),
       icon: ListTodoIcon,
-      href: `/organizations/${params.organizationId}/workspaces/new/channel`,
+      href: `/organizations/${params.organizationId}/projects/new/channel`,
     },
     {
-      title: t("organizations.workspaces.new.mode.formbricks_cx"),
-      description: t("organizations.workspaces.new.mode.formbricks_cx_description"),
+      title: t("organizations.projects.new.mode.formbricks_cx"),
+      description: t("organizations.projects.new.mode.formbricks_cx_description"),
       icon: HeartIcon,
-      href: `/organizations/${params.organizationId}/workspaces/new/settings?mode=cx`,
+      href: `/organizations/${params.organizationId}/projects/new/settings?mode=cx`,
     },
   ];
 
@@ -43,7 +43,7 @@ const Page = async (props: ModePageProps) => {
 
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
-      <Header title={t("organizations.workspaces.new.mode.what_are_you_here_for")} />
+      <Header title={t("organizations.projects.new.mode.what_are_you_here_for")} />
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings.tsx

@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -17,7 +17,6 @@ import {
 import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
 import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
-import { buildStylingFromBrandColor } from "@/lib/styling/constants";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { TOrganizationTeam } from "@/modules/ee/teams/project-teams/types/team";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
@@ -45,7 +44,6 @@ interface ProjectSettingsProps {
   organizationTeams: TOrganizationTeam[];
   isAccessControlAllowed: boolean;
   userProjectsCount: number;
-  publicDomain: string;
 }
 
 export const ProjectSettings = ({
@@ -57,7 +55,6 @@ export const ProjectSettings = ({
   organizationTeams,
   isAccessControlAllowed = false,
   userProjectsCount,
-  publicDomain,
 }: ProjectSettingsProps) => {
   const [createTeamModalOpen, setCreateTeamModalOpen] = useState(false);
 
@@ -65,17 +62,10 @@ export const ProjectSettings = ({
   const { t } = useTranslation();
   const addProject = async (data: TProjectUpdateInput) => {
     try {
-      // Build the full styling from the chosen brand color so all derived
-      // colours (question, button, input, option, progress, etc.) are persisted.
-      // Without this, only brandColor is saved and the look-and-feel page falls
-      // back to STYLE_DEFAULTS computed from the default brand (#64748b).
-      const fullStyling = buildStylingFromBrandColor(data.styling?.brandColor?.light);
-
       const createProjectResponse = await createProjectAction({
         organizationId,
         data: {
           ...data,
-          styling: fullStyling,
           config: { channel, industry },
           teamIds: data.teamIds,
         },
@@ -87,7 +77,7 @@ export const ProjectSettings = ({
           (environment) => environment.type === "production"
         );
         if (productionEnvironment) {
-          if (globalThis.window !== undefined) {
+          if (typeof window !== "undefined") {
             // Rmove filters when creating a new project
             localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
           }
@@ -104,7 +94,7 @@ export const ProjectSettings = ({
         toast.error(errorMessage);
       }
     } catch (error) {
-      toast.error(t("organizations.workspaces.new.settings.workspace_creation_failed"));
+      toast.error(t("organizations.projects.new.settings.project_creation_failed"));
       console.error(error);
     }
   };
@@ -115,12 +105,12 @@ export const ProjectSettings = ({
       styling: { allowStyleOverwrite: true, brandColor: { light: defaultBrandColor } },
       teamIds: [],
     },
+
     resolver: zodResolver(ZProjectUpdateInput),
   });
   const projectName = form.watch("name");
   const logoUrl = form.watch("logo.url");
   const brandColor = form.watch("styling.brandColor.light") ?? defaultBrandColor;
-  const previewStyling = useMemo(() => buildStylingFromBrandColor(brandColor), [brandColor]);
   const { isSubmitting } = form.formState;
 
   const organizationTeamsOptions = organizationTeams.map((team) => ({
@@ -139,9 +129,9 @@ export const ProjectSettings = ({
               render={({ field, fieldState: { error } }) => (
                 <FormItem className="w-full space-y-4">
                   <div>
-                    <FormLabel>{t("organizations.workspaces.new.settings.brand_color")}</FormLabel>
+                    <FormLabel>{t("organizations.projects.new.settings.brand_color")}</FormLabel>
                     <FormDescription>
-                      {t("organizations.workspaces.new.settings.brand_color_description")}
+                      {t("organizations.projects.new.settings.brand_color_description")}
                     </FormDescription>
                   </div>
                   <FormControl>
@@ -163,9 +153,9 @@ export const ProjectSettings = ({
               render={({ field, fieldState: { error } }) => (
                 <FormItem className="w-full space-y-4">
                   <div>
-                    <FormLabel>{t("organizations.workspaces.new.settings.workspace_name")}</FormLabel>
+                    <FormLabel>{t("organizations.projects.new.settings.project_name")}</FormLabel>
                     <FormDescription>
-                      {t("organizations.workspaces.new.settings.workspace_name_description")}
+                      {t("organizations.projects.new.settings.project_name_description")}
                     </FormDescription>
                   </div>
                   <FormControl>
@@ -194,7 +184,7 @@ export const ProjectSettings = ({
                       <div>
                         <FormLabel>{t("common.teams")}</FormLabel>
                         <FormDescription>
-                          {t("organizations.workspaces.new.settings.team_description")}
+                          {t("organizations.projects.new.settings.team_description")}
                         </FormDescription>
                       </div>
                       <Button
@@ -202,7 +192,7 @@ export const ProjectSettings = ({
                         size="sm"
                         type="button"
                         onClick={() => setCreateTeamModalOpen(true)}>
-                        {t("organizations.workspaces.new.settings.create_new_team")}
+                        {t("organizations.projects.new.settings.create_new_team")}
                       </Button>
                     </div>
                     <FormControl>
@@ -228,7 +218,7 @@ export const ProjectSettings = ({
         </FormProvider>
       </div>
 
-      <div className="relative flex w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 p-6 shadow">
+      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow">
         {logoUrl && (
           <Image
             src={logoUrl}
@@ -239,16 +229,17 @@ export const ProjectSettings = ({
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>
-        <SurveyInline
-          appUrl={publicDomain}
-          isPreviewMode={true}
-          survey={previewSurvey(projectName || t("common.my_product"), t)}
-          styling={previewStyling}
-          isBrandingEnabled={false}
-          languageCode="default"
-          onFileUpload={async (file) => file.name}
-          autoFocus={false}
-        />
+        <div className="z-0 h-3/4 w-3/4">
+          <SurveyInline
+            isPreviewMode={true}
+            survey={previewSurvey(projectName || "my Product", t)}
+            styling={{ brandColor: { light: brandColor } }}
+            isBrandingEnabled={false}
+            languageCode="default"
+            onFileUpload={async (file) => file.name}
+            autoFocus={false}
+          />
+        </div>
       </div>
       <CreateTeamModal
         open={createTeamModalOpen}

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/page.tsx

@@ -3,9 +3,8 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
-import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/ProjectSettings";
+import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings";
 import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
-import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getUserProjects } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getAccessControlPermission } from "@/modules/ee/license-check/lib/utils";
@@ -48,13 +47,11 @@ const Page = async (props: ProjectSettingsPageProps) => {
     throw new Error(t("common.organization_teams_not_found"));
   }
 
-  const publicDomain = getPublicDomain();
-
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header
-        title={t("organizations.workspaces.new.settings.workspace_settings_title")}
-        subtitle={t("organizations.workspaces.new.settings.workspace_settings_subtitle")}
+        title={t("organizations.projects.new.settings.project_settings_title")}
+        subtitle={t("organizations.projects.new.settings.project_settings_subtitle")}
       />
       <ProjectSettings
         organizationId={params.organizationId}
@@ -65,7 +62,6 @@ const Page = async (props: ProjectSettingsPageProps) => {
         organizationTeams={organizationTeams}
         isAccessControlAllowed={isAccessControlAllowed}
         userProjectsCount={projects.length}
-        publicDomain={publicDomain}
       />
       {projects.length >= 1 && (
         <Button

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

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 export const ZOrganizationTeam = z.object({
-  id: z.cuid2(),
+  id: z.string().cuid2(),
   name: z.string(),
 });
 

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

@@ -1,13 +1,14 @@
 import { redirect } from "next/navigation";
 import { getEnvironment } from "@/lib/environment/service";
 import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 
 const SurveyEditorEnvironmentLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
 
-  const { t, session, user } = await environmentIdLayoutChecks(params.environmentId);
+  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
 
   if (!session) {
     return redirect(`/auth/login`);
@@ -24,9 +25,15 @@ const SurveyEditorEnvironmentLayout = async (props) => {
   }
 
   return (
-    <div className="flex h-screen flex-col">
-      <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
-    </div>
+    <EnvironmentIdBaseLayout
+      environmentId={params.environmentId}
+      session={session}
+      user={user}
+      organization={organization}>
+      <div className="flex h-screen flex-col">
+        <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
+      </div>
+    </EnvironmentIdBaseLayout>
   );
 };
 

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

@@ -1 +0,0 @@
-export { AttributesPage as default } from "@/modules/ee/contacts/attributes/page";

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

@@ -2,7 +2,7 @@
 
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
-import { AuthorizationError, OperationNotAllowedError } from "@formbricks/types/errors";
+import { OperationNotAllowedError } from "@formbricks/types/errors";
 import { ZProjectUpdateInput } from "@formbricks/types/project";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganization } from "@/lib/organization/service";
@@ -25,7 +25,7 @@ const ZCreateProjectAction = z.object({
   data: ZProjectUpdateInput,
 });
 
-export const createProjectAction = authenticatedActionClient.inputSchema(ZCreateProjectAction).action(
+export const createProjectAction = authenticatedActionClient.schema(ZCreateProjectAction).action(
   withAuditLogging(
     "created",
     "project",
@@ -57,7 +57,7 @@ export const createProjectAction = authenticatedActionClient.inputSchema(ZCreate
       const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
 
       if (organizationProjectsCount >= organizationProjectsLimit) {
-        throw new OperationNotAllowedError("Organization workspace limit reached");
+        throw new OperationNotAllowedError("Organization project limit reached");
       }
 
       if (parsedInput.data.teamIds && parsedInput.data.teamIds.length > 0) {
@@ -97,7 +97,7 @@ const ZGetOrganizationsForSwitcherAction = z.object({
  * Called on-demand when user opens the organization switcher.
  */
 export const getOrganizationsForSwitcherAction = authenticatedActionClient
-  .inputSchema(ZGetOrganizationsForSwitcherAction)
+  .schema(ZGetOrganizationsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -122,7 +122,7 @@ const ZGetProjectsForSwitcherAction = z.object({
  * Called on-demand when user opens the project switcher.
  */
 export const getProjectsForSwitcherAction = authenticatedActionClient
-  .inputSchema(ZGetProjectsForSwitcherAction)
+  .schema(ZGetProjectsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -138,7 +138,7 @@ export const getProjectsForSwitcherAction = authenticatedActionClient
     // Need membership for getProjectsByUserId (1 DB query)
     const membership = await getMembershipByUserIdOrganizationId(ctx.user.id, parsedInput.organizationId);
     if (!membership) {
-      throw new AuthorizationError("Membership not found");
+      throw new Error("Membership not found");
     }
 
     return await getProjectsByUserId(ctx.user.id, membership);

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

@@ -1,7 +1,6 @@
 import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
 import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
 import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getTranslate } from "@/lingodotdev/server";
 import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
@@ -16,7 +15,6 @@ interface EnvironmentLayoutProps {
 
 export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLayoutProps) => {
   const t = await getTranslate();
-  const publicDomain = getPublicDomain();
 
   // Destructure all data from props (NO database queries)
   const {
@@ -36,14 +34,14 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
   // Calculate derived values (no queries)
   const { isMember, isOwner, isManager } = getAccessFlags(membership.role);
 
-  const { features, lastChecked, isPendingDowngrade, active, status } = license;
+  const { features, lastChecked, isPendingDowngrade, active } = license;
   const isMultiOrgEnabled = features?.isMultiOrgEnabled ?? false;
   const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
   const isOwnerOrManager = isOwner || isManager;
 
   // Validate that project permission exists for members
   if (isMember && !projectPermission) {
-    throw new Error(t("common.workspace_permission_not_found"));
+    throw new Error(t("common.project_permission_not_found"));
   }
 
   return (
@@ -63,7 +61,6 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
         active={active}
         environmentId={environment.id}
         locale={user.locale}
-        status={status}
       />
 
       <div className="flex h-full">
@@ -75,7 +72,6 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
           isFormbricksCloud={IS_FORMBRICKS_CLOUD}
           isDevelopment={IS_DEVELOPMENT}
           membershipRole={membership.role}
-          publicDomain={publicDomain}
         />
         <div id="mainContent" className="flex flex-1 flex-col overflow-hidden bg-slate-50">
           <TopControlBar

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

@@ -11,7 +11,6 @@ import {
   RocketIcon,
   UserCircleIcon,
   UserIcon,
-  WorkflowIcon,
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
@@ -47,7 +46,6 @@ interface NavigationProps {
   isFormbricksCloud: boolean;
   isDevelopment: boolean;
   membershipRole?: TOrganizationRole;
-  publicDomain: string;
 }
 
 export const MainNavigation = ({
@@ -58,7 +56,6 @@ export const MainNavigation = ({
   membershipRole,
   isFormbricksCloud,
   isDevelopment,
-  publicDomain,
 }: NavigationProps) => {
   const router = useRouter();
   const pathname = usePathname();
@@ -110,26 +107,16 @@ export const MainNavigation = ({
         href: `/environments/${environment.id}/contacts`,
         name: t("common.contacts"),
         icon: UserIcon,
-        isActive:
-          pathname?.includes("/contacts") ||
-          pathname?.includes("/segments") ||
-          pathname?.includes("/attributes"),
-      },
-      {
-        name: t("common.workflows"),
-        href: `/environments/${environment.id}/workflows`,
-        icon: WorkflowIcon,
-        isActive: pathname?.includes("/workflows"),
-        isHidden: !isFormbricksCloud,
+        isActive: pathname?.includes("/contacts") || pathname?.includes("/segments"),
       },
       {
         name: t("common.configuration"),
-        href: `/environments/${environment.id}/workspace/general`,
+        href: `/environments/${environment.id}/project/general`,
         icon: Cog,
         isActive: pathname?.includes("/project"),
       },
     ],
-    [t, environment.id, pathname, isFormbricksCloud]
+    [t, environment.id, pathname]
   );
 
   const dropdownNavigation = [
@@ -175,7 +162,7 @@ export const MainNavigation = ({
         <aside
           className={cn(
             "z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
-            isCollapsed ? "w-sidebar-expanded" : "w-sidebar-collapsed"
+            !isCollapsed ? "w-sidebar-collapsed" : "w-sidebar-expanded"
           )}>
           <div>
             {/* Logo and Toggle */}
@@ -299,16 +286,15 @@ export const MainNavigation = ({
                   {/* Logout */}
                   <DropdownMenuItem
                     onClick={async () => {
-                      const loginUrl = `${publicDomain}/auth/login`;
                       const route = await signOutWithAudit({
                         reason: "user_initiated",
-                        redirectUrl: loginUrl,
+                        redirectUrl: "/auth/login",
                         organizationId: organization.id,
                         redirect: false,
-                        callbackUrl: loginUrl,
+                        callbackUrl: "/auth/login",
                         clearEnvironmentId: true,
                       });
-                      router.push(route?.url || loginUrl); // NOSONAR // We want to check for empty strings
+                      router.push(route?.url || "/auth/login"); // NOSONAR // We want to check for empty strings
                     }}
                     icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
                     {t("common.logout")}

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

@@ -0,0 +1,61 @@
+"use client";
+
+import type { Session } from "next-auth";
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
+import { TOrganizationBilling } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
+
+interface PosthogIdentifyProps {
+  session: Session;
+  user: TUser;
+  environmentId?: string;
+  organizationId?: string;
+  organizationName?: string;
+  organizationBilling?: TOrganizationBilling;
+  isPosthogEnabled: boolean;
+}
+
+export const PosthogIdentify = ({
+  session,
+  user,
+  environmentId,
+  organizationId,
+  organizationName,
+  organizationBilling,
+  isPosthogEnabled,
+}: PosthogIdentifyProps) => {
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (isPosthogEnabled && session.user && posthog) {
+      posthog.identify(session.user.id, {
+        name: user.name,
+        email: user.email,
+      });
+      if (environmentId) {
+        posthog.group("environment", environmentId, { name: environmentId });
+      }
+      if (organizationId) {
+        posthog.group("organization", organizationId, {
+          name: organizationName,
+          plan: organizationBilling?.plan,
+          responseLimit: organizationBilling?.limits.monthly.responses,
+          miuLimit: organizationBilling?.limits.monthly.miu,
+        });
+      }
+    }
+  }, [
+    posthog,
+    session.user,
+    environmentId,
+    organizationId,
+    organizationName,
+    organizationBilling,
+    user.name,
+    user.email,
+    isPosthogEnabled,
+  ]);
+
+  return null;
+};

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

@@ -2,14 +2,14 @@
 
 import React, { createContext, useCallback, useContext, useState } from "react";
 import {
-  ElementOption,
-  ElementOptions,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ElementsComboBox";
-import { ElementFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
+  QuestionOption,
+  QuestionOptions,
+} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
+import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
 import { getTodayDate } from "@/app/lib/surveys/surveys";
 
 export interface FilterValue {
-  elementType: Partial<ElementOption>;
+  questionType: Partial<QuestionOption>;
   filterType: {
     filterValue: string | undefined;
     filterComboBoxValue: string | string[] | undefined;
@@ -24,8 +24,8 @@ export interface SelectedFilterValue {
 }
 
 interface SelectedFilterOptions {
-  elementOptions: ElementOptions[];
-  elementFilterOptions: ElementFilterOptions[];
+  questionOptions: QuestionOptions[];
+  questionFilterOptions: QuestionFilterOptions[];
 }
 
 export interface DateRange {
@@ -53,8 +53,8 @@ const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) =>
   });
   // state holds all the options of the responses fetched
   const [selectedOptions, setSelectedOptions] = useState<SelectedFilterOptions>({
-    elementFilterOptions: [],
-    elementOptions: [],
+    questionFilterOptions: [],
+    questionOptions: [],
   });
 
   const [dateRange, setDateRange] = useState<DateRange>({

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

@@ -17,13 +17,13 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
   const stati = {
     notImplemented: {
       icon: AlertTriangleIcon,
-      title: t("environments.workspace.app-connection.formbricks_sdk_not_connected"),
-      subtitle: t("environments.workspace.app-connection.formbricks_sdk_not_connected_description"),
+      title: t("environments.project.app-connection.formbricks_sdk_not_connected"),
+      subtitle: t("environments.project.app-connection.formbricks_sdk_not_connected_description"),
     },
     running: {
       icon: CheckIcon,
-      title: t("environments.workspace.app-connection.receiving_data"),
-      subtitle: t("environments.workspace.app-connection.formbricks_sdk_connected"),
+      title: t("environments.project.app-connection.receiving_data"),
+      subtitle: t("environments.project.app-connection.formbricks_sdk_connected"),
     },
   };
 
@@ -57,7 +57,7 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />
-          {t("environments.workspace.app-connection.recheck")}
+          {t("environments.project.app-connection.recheck")}
         </Button>
       )}
     </div>

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

@@ -2,7 +2,7 @@
 
 import * as Sentry from "@sentry/nextjs";
 import {
-  Building2Icon,
+  BuildingIcon,
   ChevronDownIcon,
   ChevronRightIcon,
   Loader2,
@@ -81,7 +81,7 @@ export const OrganizationBreadcrumb = ({
       getOrganizationsForSwitcherAction({ organizationId: currentOrganizationId }).then((result) => {
         if (result?.data) {
           // Sort organizations by name
-          const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+          const sorted = result.data.toSorted((a, b) => a.name.localeCompare(b.name));
           setOrganizations(sorted);
         } else {
           // Handle server errors or validation errors
@@ -135,7 +135,7 @@ export const OrganizationBreadcrumb = ({
     },
     {
       id: "teams",
-      label: t("common.members_and_teams"),
+      label: t("common.teams"),
       href: `/environments/${currentEnvironmentId}/settings/teams`,
     },
     {
@@ -144,12 +144,6 @@ export const OrganizationBreadcrumb = ({
       href: `/environments/${currentEnvironmentId}/settings/api-keys`,
       hidden: !isOwnerOrManager,
     },
-    {
-      id: "domain",
-      label: t("common.domain"),
-      href: `/environments/${currentEnvironmentId}/settings/domain`,
-      hidden: isFormbricksCloud,
-    },
     {
       id: "billing",
       label: t("common.billing"),
@@ -172,7 +166,7 @@ export const OrganizationBreadcrumb = ({
           id="organizationDropdownTrigger"
           asChild>
           <div className="flex items-center gap-1">
-            <Building2Icon className="h-3 w-3" strokeWidth={1.5} />
+            <BuildingIcon className="h-3 w-3" strokeWidth={1.5} />
             <span>{organizationName}</span>
             {isPending && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
             {isOrganizationDropdownOpen ? (
@@ -186,7 +180,7 @@ export const OrganizationBreadcrumb = ({
           {showOrganizationDropdown && (
             <>
               <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-                <Building2Icon className="mr-2 inline h-4 w-4" />
+                <BuildingIcon className="mr-2 inline h-4 w-4" />
                 {t("common.choose_organization")}
               </div>
               {isLoadingOrganizations && (
@@ -209,7 +203,7 @@ export const OrganizationBreadcrumb = ({
               )}
               {!isLoadingOrganizations && !loadError && (
                 <>
-                  <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                  <DropdownMenuGroup>
                     {organizations.map((org) => (
                       <DropdownMenuCheckboxItem
                         key={org.id}

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as Sentry from "@sentry/nextjs";
-import { ChevronDownIcon, ChevronRightIcon, CogIcon, HotelIcon, Loader2, PlusIcon } from "lucide-react";
+import { ChevronDownIcon, ChevronRightIcon, CogIcon, FolderOpenIcon, Loader2, PlusIcon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
@@ -36,12 +36,12 @@ interface ProjectBreadcrumbProps {
 }
 
 const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
-  // Match /workspace/{settingId} or /workspace/{settingId}/... but exclude settings paths
+  // Match /project/{settingId} or /project/{settingId}/... but exclude settings paths
   if (pathname.includes("/settings/")) {
     return false;
   }
-  // Check if path matches /workspace/{settingId} (with optional trailing path)
-  const pattern = new RegExp(`/workspace/${settingId}(?:/|$)`);
+  // Check if path matches /project/{settingId} (with optional trailing path)
+  const pattern = new RegExp(`/project/${settingId}(?:/|$)`);
   return pattern.test(pathname);
 };
 
@@ -82,7 +82,7 @@ export const ProjectBreadcrumb = ({
       getProjectsForSwitcherAction({ organizationId: currentOrganizationId }).then((result) => {
         if (result?.data) {
           // Sort projects by name
-          const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+          const sorted = result.data.toSorted((a, b) => a.name.localeCompare(b.name));
           setProjects(sorted);
         } else {
           // Handle server errors or validation errors
@@ -90,7 +90,7 @@ export const ProjectBreadcrumb = ({
           const error = new Error(errorMessage);
           logger.error(error, "Failed to load projects");
           Sentry.captureException(error);
-          setLoadError(errorMessage || t("common.failed_to_load_workspaces"));
+          setLoadError(errorMessage || t("common.failed_to_load_projects"));
         }
         setIsLoadingProjects(false);
       });
@@ -101,42 +101,42 @@ export const ProjectBreadcrumb = ({
     {
       id: "general",
       label: t("common.general"),
-      href: `/environments/${currentEnvironmentId}/workspace/general`,
+      href: `/environments/${currentEnvironmentId}/project/general`,
     },
     {
       id: "look",
       label: t("common.look_and_feel"),
-      href: `/environments/${currentEnvironmentId}/workspace/look`,
+      href: `/environments/${currentEnvironmentId}/project/look`,
     },
     {
       id: "app-connection",
       label: t("common.website_and_app_connection"),
-      href: `/environments/${currentEnvironmentId}/workspace/app-connection`,
+      href: `/environments/${currentEnvironmentId}/project/app-connection`,
     },
     {
       id: "integrations",
       label: t("common.integrations"),
-      href: `/environments/${currentEnvironmentId}/workspace/integrations`,
+      href: `/environments/${currentEnvironmentId}/project/integrations`,
     },
     {
       id: "teams",
       label: t("common.team_access"),
-      href: `/environments/${currentEnvironmentId}/workspace/teams`,
+      href: `/environments/${currentEnvironmentId}/project/teams`,
     },
     {
       id: "languages",
       label: t("common.survey_languages"),
-      href: `/environments/${currentEnvironmentId}/workspace/languages`,
+      href: `/environments/${currentEnvironmentId}/project/languages`,
     },
     {
       id: "tags",
       label: t("common.tags"),
-      href: `/environments/${currentEnvironmentId}/workspace/tags`,
+      href: `/environments/${currentEnvironmentId}/project/tags`,
     },
   ];
 
   if (!currentProject) {
-    const errorMessage = `Workspace not found for workspace id: ${currentProjectId}`;
+    const errorMessage = `Project not found for project id: ${currentProjectId}`;
     logger.error(errorMessage);
     Sentry.captureException(new Error(errorMessage));
     return;
@@ -145,7 +145,7 @@ export const ProjectBreadcrumb = ({
   const handleProjectChange = (projectId: string) => {
     if (projectId === currentProjectId) return;
     startTransition(() => {
-      router.push(`/workspaces/${projectId}/`);
+      router.push(`/projects/${projectId}/`);
     });
   };
 
@@ -159,7 +159,7 @@ export const ProjectBreadcrumb = ({
 
   const handleProjectSettingsNavigation = (settingId: string) => {
     startTransition(() => {
-      router.push(`/environments/${currentEnvironmentId}/workspace/${settingId}`);
+      router.push(`/environments/${currentEnvironmentId}/project/${settingId}`);
     });
   };
 
@@ -198,21 +198,21 @@ export const ProjectBreadcrumb = ({
           id="projectDropdownTrigger"
           asChild>
           <div className="flex items-center gap-1">
-            <HotelIcon className="h-3 w-3" strokeWidth={1.5} />
+            <FolderOpenIcon className="h-3 w-3" strokeWidth={1.5} />
             <span>{projectName}</span>
             {isPending && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {isEnvironmentBreadcrumbVisible && !isProjectDropdownOpen ? (
-              <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
-            ) : (
+            {isProjectDropdownOpen ? (
               <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />
+            ) : (
+              isEnvironmentBreadcrumbVisible && <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
             )}
           </div>
         </DropdownMenuTrigger>
 
         <DropdownMenuContent align="start" className="mt-2">
           <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <HotelIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-            {t("common.choose_workspace")}
+            <FolderOpenIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+            {t("common.choose_project")}
           </div>
           {isLoadingProjects && (
             <div className="flex items-center justify-center py-2">
@@ -234,7 +234,7 @@ export const ProjectBreadcrumb = ({
           )}
           {!isLoadingProjects && !loadError && (
             <>
-              <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+              <DropdownMenuGroup>
                 {projects.map((proj) => (
                   <DropdownMenuCheckboxItem
                     key={proj.id}
@@ -251,7 +251,7 @@ export const ProjectBreadcrumb = ({
                 <DropdownMenuCheckboxItem
                   onClick={handleAddProject}
                   className="w-full cursor-pointer justify-between">
-                  <span>{t("common.add_new_workspace")}</span>
+                  <span>{t("common.add_new_project")}</span>
                   <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
                 </DropdownMenuCheckboxItem>
               )}
@@ -261,7 +261,7 @@ export const ProjectBreadcrumb = ({
             <DropdownMenuSeparator />
             <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
               <CogIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-              {t("common.workspace_configuration")}
+              {t("common.project_configuration")}
             </div>
             {projectSettings.map((setting) => (
               <DropdownMenuCheckboxItem

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

@@ -4,6 +4,7 @@ import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/comp
 import { EnvironmentContextWrapper } from "@/app/(app)/environments/[environmentId]/context/environment-context";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getEnvironmentLayoutData } from "@/modules/environments/lib/utils";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
 
 const EnvLayout = async (props: {
@@ -23,7 +24,11 @@ const EnvLayout = async (props: {
   const layoutData = await getEnvironmentLayoutData(params.environmentId, session.user.id);
 
   return (
-    <>
+    <EnvironmentIdBaseLayout
+      environmentId={params.environmentId}
+      session={layoutData.session}
+      user={layoutData.user}
+      organization={layoutData.organization}>
       <EnvironmentStorageHandler environmentId={params.environmentId} />
       <EnvironmentContextWrapper
         environment={layoutData.environment}
@@ -31,7 +36,7 @@ const EnvLayout = async (props: {
         organization={layoutData.organization}>
         <EnvironmentLayout layoutData={layoutData}>{children}</EnvironmentLayout>
       </EnvironmentContextWrapper>
-    </>
+    </EnvironmentIdBaseLayout>
   );
 };
 

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

@@ -4,7 +4,6 @@ import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
 import { ZIntegrationInput } from "@formbricks/types/integration";
 import { createOrUpdateIntegration, deleteIntegration } from "@/lib/integration/service";
-import { getPostHogClient } from "@/lib/posthog-server";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
@@ -22,7 +21,7 @@ const ZCreateOrUpdateIntegrationAction = z.object({
 });
 
 export const createOrUpdateIntegrationAction = authenticatedActionClient
-  .inputSchema(ZCreateOrUpdateIntegrationAction)
+  .schema(ZCreateOrUpdateIntegrationAction)
   .action(
     withAuditLogging(
       "createdUpdated",
@@ -59,18 +58,6 @@ export const createOrUpdateIntegrationAction = authenticatedActionClient
         );
         ctx.auditLoggingCtx.integrationId = result.id;
         ctx.auditLoggingCtx.newObject = result;
-
-        const posthog = getPostHogClient();
-        posthog.capture({
-          distinctId: ctx.user.email,
-          event: "integration_connected",
-          properties: {
-            integrationType: parsedInput.integrationData.type,
-            environmentId: parsedInput.environmentId,
-            organizationId,
-          },
-        });
-
         return result;
       }
     )
@@ -80,7 +67,7 @@ const ZDeleteIntegrationAction = z.object({
   integrationId: ZId,
 });
 
-export const deleteIntegrationAction = authenticatedActionClient.inputSchema(ZDeleteIntegrationAction).action(
+export const deleteIntegrationAction = authenticatedActionClient.schema(ZDeleteIntegrationAction).action(
   withAuditLogging(
     "deleted",
     "integration",

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

@@ -17,11 +17,10 @@ import {
 import { TSurveyElement } from "@formbricks/types/surveys/elements";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
-import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/workspace/integrations/actions";
-import { BaseSelectDropdown } from "@/app/(app)/environments/[environmentId]/workspace/integrations/airtable/components/BaseSelectDropdown";
-import { fetchTables } from "@/app/(app)/environments/[environmentId]/workspace/integrations/airtable/lib/airtable";
+import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
+import { BaseSelectDropdown } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/BaseSelectDropdown";
+import { fetchTables } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable";
 import AirtableLogo from "@/images/airtableLogo.svg";
-import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
@@ -47,45 +46,6 @@ import {
 } from "@/modules/ui/components/select";
 import { IntegrationModalInputs } from "../lib/types";
 
-const ElementCheckbox = ({
-  element,
-  selectedSurvey,
-  field,
-}: {
-  element: TSurveyElement;
-  selectedSurvey: TSurvey;
-  field: {
-    value: string[] | undefined;
-    onChange: (value: string[]) => void;
-  };
-}) => {
-  const addElement = () => {
-    field.onChange([...(field.value || []), element.id]);
-  };
-
-  const removeElement = () => {
-    field.onChange(field.value?.filter((value) => value !== element.id) || []);
-  };
-
-  return (
-    <div className="my-1 flex items-center space-x-2">
-      <label htmlFor={element.id} className="flex cursor-pointer items-center">
-        <Checkbox
-          type="button"
-          id={element.id}
-          value={element.id}
-          className="bg-white"
-          checked={field.value?.includes(element.id)}
-          onCheckedChange={(checked) => (checked ? addElement() : removeElement())}
-        />
-        <span className="ml-2">
-          {getTextContent(recallToHeadline(element.headline, selectedSurvey, false, "default")["default"])}
-        </span>
-      </label>
-    </div>
-  );
-};
-
 type EditModeProps =
   | { isEditMode: false; defaultData?: never }
   | { isEditMode: true; defaultData: IntegrationModalInputs & { index: number } };
@@ -109,10 +69,10 @@ const NoBaseFoundError = () => {
   );
 };
 
-const renderElementSelection = ({
+const renderQuestionSelection = ({
   t,
   selectedSurvey,
-  elements,
+  questions,
   control,
   includeVariables,
   setIncludeVariables,
@@ -125,7 +85,7 @@ const renderElementSelection = ({
 }: {
   t: TFunction;
   selectedSurvey: TSurvey;
-  elements: TSurveyElement[];
+  questions: TSurveyElement[];
   control: Control<IntegrationModalInputs>;
   includeVariables: boolean;
   setIncludeVariables: (value: boolean) => void;
@@ -142,13 +102,33 @@ const renderElementSelection = ({
         <Label htmlFor="Surveys">{t("common.questions")}</Label>
         <div className="mt-1 max-h-[15vh] overflow-y-auto rounded-lg border border-slate-200">
           <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-            {elements.map((element) => (
+            {questions.map((question) => (
               <Controller
-                key={element.id}
+                key={question.id}
                 control={control}
-                name={"elements"}
+                name={"questions"}
                 render={({ field }) => (
-                  <ElementCheckbox element={element} selectedSurvey={selectedSurvey} field={field} />
+                  <div className="my-1 flex items-center space-x-2">
+                    <label htmlFor={question.id} className="flex cursor-pointer items-center">
+                      <Checkbox
+                        type="button"
+                        id={question.id}
+                        value={question.id}
+                        className="bg-white"
+                        checked={field.value?.includes(question.id)}
+                        onCheckedChange={(checked) => {
+                          return checked
+                            ? field.onChange([...field.value, question.id])
+                            : field.onChange(field.value?.filter((value) => value !== question.id));
+                        }}
+                      />
+                      <span className="ml-2">
+                        {getTextContent(
+                          recallToHeadline(question.headline, selectedSurvey, false, "default")["default"]
+                        )}
+                      </span>
+                    </label>
+                  </div>
                 )}
               />
             ))}
@@ -219,7 +199,7 @@ export const AddIntegrationModal = ({
   };
 
   const selectedSurvey = surveys.find((item) => item.id === survey);
-  const elements = useMemo(
+  const questions = useMemo(
     () => (selectedSurvey ? getElementsFromBlocks(selectedSurvey.blocks) : []),
     [selectedSurvey]
   );
@@ -238,7 +218,7 @@ export const AddIntegrationModal = ({
         throw new Error(t("environments.integrations.please_select_a_survey_error"));
       }
 
-      if (data.elements.length === 0) {
+      if (data.questions.length === 0) {
         throw new Error(t("environments.integrations.select_at_least_one_question_error"));
       }
 
@@ -246,9 +226,9 @@ export const AddIntegrationModal = ({
       const integrationData: TIntegrationAirtableConfigData = {
         surveyId: selectedSurvey.id,
         surveyName: selectedSurvey.name,
-        elementIds: data.elements,
-        elements:
-          data.elements.length === elements.length
+        questionIds: data.questions,
+        questions:
+          data.questions.length === questions.length
             ? t("common.all_questions")
             : t("common.selected_questions"),
         createdAt: new Date(),
@@ -269,14 +249,7 @@ export const AddIntegrationModal = ({
         airtableIntegrationData.config?.data.push(integrationData);
       }
 
-      const result = await createOrUpdateIntegrationAction({
-        environmentId,
-        integrationData: airtableIntegrationData,
-      });
-      if (result?.serverError) {
-        toast.error(getFormattedErrorMessage(result));
-        return;
-      }
+      await createOrUpdateIntegrationAction({ environmentId, integrationData: airtableIntegrationData });
       if (isEditMode) {
         toast.success(t("environments.integrations.integration_updated_successfully"));
       } else {
@@ -312,11 +285,7 @@ export const AddIntegrationModal = ({
       const integrationData = structuredClone(airtableIntegrationData);
       integrationData.config.data.splice(index, 1);
 
-      const result = await createOrUpdateIntegrationAction({ environmentId, integrationData });
-      if (result?.serverError) {
-        toast.error(getFormattedErrorMessage(result));
-        return;
-      }
+      await createOrUpdateIntegrationAction({ environmentId, integrationData });
       handleClose();
       router.refresh();
 
@@ -407,7 +376,7 @@ export const AddIntegrationModal = ({
                           required
                           onValueChange={(val) => {
                             field.onChange(val);
-                            setValue("elements", []);
+                            setValue("questions", []);
                           }}
                           defaultValue={defaultData?.survey}>
                           <SelectTrigger>
@@ -433,10 +402,10 @@ export const AddIntegrationModal = ({
 
               {survey &&
                 selectedSurvey &&
-                renderElementSelection({
+                renderQuestionSelection({
                   t,
                   selectedSurvey,
-                  elements: elements,
+                  questions,
                   control,
                   includeVariables,
                   setIncludeVariables,

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

@@ -1,12 +1,13 @@
 "use client";
 
 import { useState } from "react";
+import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
-import { ManageIntegration } from "@/app/(app)/environments/[environmentId]/workspace/integrations/airtable/components/ManageIntegration";
-import { authorize } from "@/app/(app)/environments/[environmentId]/workspace/integrations/airtable/lib/airtable";
+import { ManageIntegration } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/ManageIntegration";
+import { authorize } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable";
 import airtableLogo from "@/images/airtableLogo.svg";
 import { ConnectIntegration } from "@/modules/ui/components/connect-integration";
 
@@ -15,6 +16,7 @@ interface AirtableWrapperProps {
   airtableArray: TIntegrationItem[];
   airtableIntegration?: TIntegrationAirtable;
   surveys: TSurvey[];
+  environment: TEnvironment;
   isEnabled: boolean;
   webAppUrl: string;
   locale: TUserLocale;
@@ -25,6 +27,7 @@ export const AirtableWrapper = ({
   airtableArray,
   airtableIntegration,
   surveys,
+  environment,
   isEnabled,
   webAppUrl,
   locale,
@@ -45,6 +48,7 @@ export const AirtableWrapper = ({
     <ManageIntegration
       airtableArray={airtableArray}
       environmentId={environmentId}
+      environment={environment}
       airtableIntegration={airtableIntegration}
       setIsConnected={setIsConnected}
       surveys={surveys}

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

@@ -4,21 +4,23 @@ import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
-import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/workspace/integrations/actions";
-import { AddIntegrationModal } from "@/app/(app)/environments/[environmentId]/workspace/integrations/airtable/components/AddIntegrationModal";
+import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
+import { AddIntegrationModal } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AddIntegrationModal";
 import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
 import { IntegrationModalInputs } from "../lib/types";
 
 interface ManageIntegrationProps {
   airtableIntegration: TIntegrationAirtable;
+  environment: TEnvironment;
   environmentId: string;
   setIsConnected: (data: boolean) => void;
   surveys: TSurvey[];
@@ -27,7 +29,7 @@ interface ManageIntegrationProps {
 }
 
 export const ManageIntegration = (props: ManageIntegrationProps) => {
-  const { airtableIntegration, environmentId, setIsConnected, surveys, airtableArray } = props;
+  const { airtableIntegration, environment, environmentId, setIsConnected, surveys, airtableArray } = props;
   const { t } = useTranslation();
 
   const tableHeaders = [
@@ -108,7 +110,7 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
               onClick={() => {
                 setDefaultValues({
                   base: data.baseId,
-                  elements: data.elementIds,
+                  questions: data.questionIds,
                   survey: data.surveyId,
                   table: data.tableId,
                   includeVariables: !!data.includeVariables,
@@ -121,7 +123,7 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
               }}>
               <div className="col-span-2 text-center">{data.surveyName}</div>
               <div className="col-span-2 text-center">{data.tableName}</div>
-              <div className="col-span-2 text-center">{data.elements}</div>
+              <div className="col-span-2 text-center">{data.questions}</div>
               <div className="col-span-2 text-center">
                 {timeSince(data.createdAt.toString(), props.locale)}
               </div>
@@ -130,7 +132,12 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
         </div>
       ) : (
         <div className="mt-4 w-full">
-          <EmptyState text={t("environments.integrations.airtable.no_integrations_yet")} />
+          <EmptySpaceFiller
+            type="table"
+            environment={environment}
+            noWidgetRequired={true}
+            emptyMessage={t("environments.integrations.airtable.no_integrations_yet")}
+          />
         </div>
       )}
 

apps/web/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/types.ts

@@ -2,7 +2,7 @@ export type IntegrationModalInputs = {
   base: string;
   table: string;
   survey: string;
-  elements: string[];
+  questions: string[];
   includeVariables: boolean;
   includeHiddenFields: boolean;
   includeMetadata: boolean;

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

@@ -1,8 +1,8 @@
 import { redirect } from "next/navigation";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
-import { AirtableWrapper } from "@/app/(app)/environments/[environmentId]/workspace/integrations/airtable/components/AirtableWrapper";
-import { getSurveys } from "@/app/(app)/environments/[environmentId]/workspace/integrations/lib/surveys";
+import { AirtableWrapper } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AirtableWrapper";
+import { getSurveys } from "@/app/(app)/environments/[environmentId]/project/integrations/lib/surveys";
 import { getAirtableTables } from "@/lib/airtable/service";
 import { AIRTABLE_CLIENT_ID, WEBAPP_URL } from "@/lib/constants";
 import { getIntegrations } from "@/lib/integration/service";
@@ -42,7 +42,7 @@ const Page = async (props) => {
 
   return (
     <PageContentWrapper>
-      <GoBackButton url={`${WEBAPP_URL}/environments/${params.environmentId}/workspace/integrations`} />
+      <GoBackButton url={`${WEBAPP_URL}/environments/${params.environmentId}/project/integrations`} />
       <PageHeader pageTitle={t("environments.integrations.airtable.airtable_integration")} />
       <div className="h-[75vh] w-full">
         <AirtableWrapper
@@ -51,6 +51,7 @@ const Page = async (props) => {
           airtableArray={airtableArray}
           environmentId={environment.id}
           surveys={surveys}
+          environment={environment}
           webAppUrl={WEBAPP_URL}
           locale={locale}
         />

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/actions.ts

@@ -0,0 +1,41 @@
+"use server";
+
+import { z } from "zod";
+import { ZIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
+import { getSpreadsheetNameById } from "@/lib/googleSheet/service";
+import { authenticatedActionClient } from "@/lib/utils/action-client";
+import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
+import { getOrganizationIdFromEnvironmentId, getProjectIdFromEnvironmentId } from "@/lib/utils/helper";
+
+const ZGetSpreadsheetNameByIdAction = z.object({
+  googleSheetIntegration: ZIntegrationGoogleSheets,
+  environmentId: z.string(),
+  spreadsheetId: z.string(),
+});
+
+export const getSpreadsheetNameByIdAction = authenticatedActionClient
+  .schema(ZGetSpreadsheetNameByIdAction)
+  .action(async ({ ctx, parsedInput }) => {
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId: await getOrganizationIdFromEnvironmentId(parsedInput.environmentId),
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          projectId: await getProjectIdFromEnvironmentId(parsedInput.environmentId),
+          minPermission: "readWrite",
+        },
+      ],
+    });
+
+    const integrationData = structuredClone(parsedInput.googleSheetIntegration);
+    integrationData.config.data.forEach((data) => {
+      data.createdAt = new Date(data.createdAt);
+    });
+
+    return await getSpreadsheetNameById(integrationData, parsedInput.spreadsheetId);
+  });

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/AddIntegrationModal.tsx

@@ -12,18 +12,14 @@ import {
 } from "@formbricks/types/integration/google-sheet";
 import { TSurvey, TSurveyQuestionId } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
-import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/workspace/integrations/actions";
-import { getSpreadsheetNameByIdAction } from "@/app/(app)/environments/[environmentId]/workspace/integrations/google-sheets/actions";
+import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
+import { getSpreadsheetNameByIdAction } from "@/app/(app)/environments/[environmentId]/project/integrations/google-sheets/actions";
 import {
   constructGoogleSheetsUrl,
   extractSpreadsheetIdFromUrl,
   isValidGoogleSheetsUrl,
-} from "@/app/(app)/environments/[environmentId]/workspace/integrations/google-sheets/lib/util";
+} from "@/app/(app)/environments/[environmentId]/project/integrations/google-sheets/lib/util";
 import GoogleSheetLogo from "@/images/googleSheetsLogo.png";
-import {
-  GOOGLE_SHEET_INTEGRATION_INSUFFICIENT_PERMISSION,
-  GOOGLE_SHEET_INTEGRATION_INVALID_GRANT,
-} from "@/lib/googleSheet/constants";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
@@ -66,12 +62,12 @@ export const AddIntegrationModal = ({
     spreadsheetName: "",
     surveyId: "",
     surveyName: "",
-    elementIds: [""],
-    elements: "",
+    questionIds: [""],
+    questions: "",
     createdAt: new Date(),
   };
   const { handleSubmit } = useForm();
-  const [selectedElements, setSelectedElements] = useState<string[]>([]);
+  const [selectedQuestions, setSelectedQuestions] = useState<string[]>([]);
   const [isLinkingSheet, setIsLinkingSheet] = useState(false);
   const [selectedSurvey, setSelectedSurvey] = useState<TSurvey | null>(null);
   const [spreadsheetUrl, setSpreadsheetUrl] = useState("");
@@ -90,17 +86,17 @@ export const AddIntegrationModal = ({
     },
   };
 
-  const surveyElements = useMemo(
+  const questions = useMemo(
     () => (selectedSurvey ? getElementsFromBlocks(selectedSurvey.blocks) : []),
     [selectedSurvey]
   );
 
   useEffect(() => {
     if (selectedSurvey && !selectedIntegration) {
-      const elementIds = surveyElements.map((element) => element.id);
-      setSelectedElements(elementIds);
+      const questionIds = questions.map((question) => question.id);
+      setSelectedQuestions(questionIds);
     }
-  }, [surveyElements, selectedIntegration, selectedSurvey]);
+  }, [questions, selectedIntegration, selectedSurvey]);
 
   useEffect(() => {
     if (selectedIntegration) {
@@ -110,7 +106,7 @@ export const AddIntegrationModal = ({
           return survey.id === selectedIntegration.surveyId;
         })!
       );
-      setSelectedElements(selectedIntegration.elementIds);
+      setSelectedQuestions(selectedIntegration.questionIds);
       setIncludeVariables(!!selectedIntegration.includeVariables);
       setIncludeHiddenFields(!!selectedIntegration.includeHiddenFields);
       setIncludeMetadata(!!selectedIntegration.includeMetadata);
@@ -122,17 +118,6 @@ export const AddIntegrationModal = ({
     resetForm();
   }, [selectedIntegration, surveys]);
 
-  const showErrorMessageToast = (response: Awaited<ReturnType<typeof getSpreadsheetNameByIdAction>>) => {
-    const errorMessage = getFormattedErrorMessage(response);
-    if (errorMessage === GOOGLE_SHEET_INTEGRATION_INVALID_GRANT) {
-      toast.error(t("environments.integrations.google_sheets.token_expired_error"));
-    } else if (errorMessage === GOOGLE_SHEET_INTEGRATION_INSUFFICIENT_PERMISSION) {
-      toast.error(t("environments.integrations.google_sheets.spreadsheet_permission_error"));
-    } else {
-      toast.error(errorMessage);
-    }
-  };
-
   const linkSheet = async () => {
     try {
       if (!isValidGoogleSheetsUrl(spreadsheetUrl)) {
@@ -141,10 +126,9 @@ export const AddIntegrationModal = ({
       if (!selectedSurvey) {
         throw new Error(t("environments.integrations.please_select_a_survey_error"));
       }
-      if (selectedElements.length === 0) {
+      if (selectedQuestions.length === 0) {
         throw new Error(t("environments.integrations.select_at_least_one_question_error"));
       }
-      setIsLinkingSheet(true);
       const spreadsheetId = extractSpreadsheetIdFromUrl(spreadsheetUrl);
       const spreadsheetNameResponse = await getSpreadsheetNameByIdAction({
         googleSheetIntegration,
@@ -153,18 +137,20 @@ export const AddIntegrationModal = ({
       });
 
       if (!spreadsheetNameResponse?.data) {
-        showErrorMessageToast(spreadsheetNameResponse);
-        return;
+        const errorMessage = getFormattedErrorMessage(spreadsheetNameResponse);
+        throw new Error(errorMessage);
       }
 
       const spreadsheetName = spreadsheetNameResponse.data;
+
+      setIsLinkingSheet(true);
       integrationData.spreadsheetId = spreadsheetId;
       integrationData.spreadsheetName = spreadsheetName;
       integrationData.surveyId = selectedSurvey.id;
       integrationData.surveyName = selectedSurvey.name;
-      integrationData.elementIds = selectedElements;
-      integrationData.elements =
-        selectedElements.length === surveyElements.length
+      integrationData.questionIds = selectedQuestions;
+      integrationData.questions =
+        selectedQuestions.length === questions.length
           ? t("common.all_questions")
           : t("common.selected_questions");
       integrationData.createdAt = new Date();
@@ -179,14 +165,7 @@ export const AddIntegrationModal = ({
         // create action
         googleSheetIntegrationData.config.data.push(integrationData);
       }
-      const result = await createOrUpdateIntegrationAction({
-        environmentId,
-        integrationData: googleSheetIntegrationData,
-      });
-      if (result?.serverError) {
-        toast.error(getFormattedErrorMessage(result));
-        return;
-      }
+      await createOrUpdateIntegrationAction({ environmentId, integrationData: googleSheetIntegrationData });
       if (selectedIntegration) {
         toast.success(t("environments.integrations.integration_updated_successfully"));
       } else {
@@ -202,7 +181,7 @@ export const AddIntegrationModal = ({
   };
 
   const handleCheckboxChange = (questionId: TSurveyQuestionId) => {
-    setSelectedElements((prevValues) =>
+    setSelectedQuestions((prevValues) =>
       prevValues.includes(questionId)
         ? prevValues.filter((value) => value !== questionId)
         : [...prevValues, questionId]
@@ -226,14 +205,7 @@ export const AddIntegrationModal = ({
     googleSheetIntegrationData.config.data.splice(selectedIntegration!.index, 1);
     try {
       setIsDeleting(true);
-      const result = await createOrUpdateIntegrationAction({
-        environmentId,
-        integrationData: googleSheetIntegrationData,
-      });
-      if (result?.serverError) {
-        toast.error(getFormattedErrorMessage(result));
-        return;
-      }
+      await createOrUpdateIntegrationAction({ environmentId, integrationData: googleSheetIntegrationData });
       toast.success(t("environments.integrations.integration_removed_successfully"));
       setOpen(false);
     } catch (error) {
@@ -296,7 +268,7 @@ export const AddIntegrationModal = ({
                     <Label htmlFor="Surveys">{t("common.questions")}</Label>
                     <div className="mt-1 max-h-[15vh] overflow-y-auto overflow-x-hidden rounded-lg border border-slate-200">
                       <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-                        {surveyElements.map((question) => (
+                        {questions.map((question) => (
                           <div key={question.id} className="my-1 flex items-center space-x-2">
                             <label htmlFor={question.id} className="flex cursor-pointer items-center">
                               <Checkbox
@@ -304,7 +276,7 @@ export const AddIntegrationModal = ({
                                 id={question.id}
                                 value={question.id}
                                 className="bg-white"
-                                checked={selectedElements.includes(question.id)}
+                                checked={selectedQuestions.includes(question.id)}
                                 onCheckedChange={() => {
                                   handleCheckboxChange(question.id);
                                 }}

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/GoogleSheetWrapper.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
 import {
   TIntegrationGoogleSheets,
@@ -8,11 +8,9 @@ import {
 } from "@formbricks/types/integration/google-sheet";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
-import { validateGoogleSheetsConnectionAction } from "@/app/(app)/environments/[environmentId]/workspace/integrations/google-sheets/actions";
-import { ManageIntegration } from "@/app/(app)/environments/[environmentId]/workspace/integrations/google-sheets/components/ManageIntegration";
-import { authorize } from "@/app/(app)/environments/[environmentId]/workspace/integrations/google-sheets/lib/google";
+import { ManageIntegration } from "@/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/ManageIntegration";
+import { authorize } from "@/app/(app)/environments/[environmentId]/project/integrations/google-sheets/lib/google";
 import googleSheetLogo from "@/images/googleSheetsLogo.png";
-import { GOOGLE_SHEET_INTEGRATION_INVALID_GRANT } from "@/lib/googleSheet/constants";
 import { ConnectIntegration } from "@/modules/ui/components/connect-integration";
 import { AddIntegrationModal } from "./AddIntegrationModal";
 
@@ -37,23 +35,10 @@ export const GoogleSheetWrapper = ({
     googleSheetIntegration ? googleSheetIntegration.config?.key : false
   );
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-  const [showReconnectButton, setShowReconnectButton] = useState<boolean>(false);
   const [selectedIntegration, setSelectedIntegration] = useState<
     (TIntegrationGoogleSheetsConfigData & { index: number }) | null
   >(null);
 
-  const validateConnection = useCallback(async () => {
-    if (!isConnected || !googleSheetIntegration) return;
-    const response = await validateGoogleSheetsConnectionAction({ environmentId: environment.id });
-    if (response?.serverError === GOOGLE_SHEET_INTEGRATION_INVALID_GRANT) {
-      setShowReconnectButton(true);
-    }
-  }, [environment.id, isConnected, googleSheetIntegration]);
-
-  useEffect(() => {
-    validateConnection();
-  }, [validateConnection]);
-
   const handleGoogleAuthorization = async () => {
     authorize(environment.id, webAppUrl).then((url: string) => {
       if (url) {
@@ -75,12 +60,11 @@ export const GoogleSheetWrapper = ({
             selectedIntegration={selectedIntegration}
           />
           <ManageIntegration
+            environment={environment}
             googleSheetIntegration={googleSheetIntegration}
             setOpenAddIntegrationModal={setIsModalOpen}
             setIsConnected={setIsConnected}
             setSelectedIntegration={setSelectedIntegration}
-            showReconnectButton={showReconnectButton}
-            handleGoogleAuthorization={handleGoogleAuthorization}
             locale={locale}
           />
         </>

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/ManageIntegration.tsx

@@ -1,40 +1,37 @@
 "use client";
 
-import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
+import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
 import {
   TIntegrationGoogleSheets,
   TIntegrationGoogleSheetsConfigData,
 } from "@formbricks/types/integration/google-sheet";
 import { TUserLocale } from "@formbricks/types/user";
-import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/workspace/integrations/actions";
+import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
 import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
-import { Alert, AlertButton, AlertDescription } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
-import { EmptyState } from "@/modules/ui/components/empty-state";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
 
 interface ManageIntegrationProps {
+  environment: TEnvironment;
   googleSheetIntegration: TIntegrationGoogleSheets;
   setOpenAddIntegrationModal: (v: boolean) => void;
   setIsConnected: (v: boolean) => void;
   setSelectedIntegration: (v: (TIntegrationGoogleSheetsConfigData & { index: number }) | null) => void;
-  showReconnectButton: boolean;
-  handleGoogleAuthorization: () => void;
   locale: TUserLocale;
 }
 
 export const ManageIntegration = ({
+  environment,
   googleSheetIntegration,
   setOpenAddIntegrationModal,
   setIsConnected,
   setSelectedIntegration,
-  showReconnectButton,
-  handleGoogleAuthorization,
   locale,
 }: ManageIntegrationProps) => {
   const { t } = useTranslation();
@@ -74,17 +71,7 @@ export const ManageIntegration = ({
 
   return (
     <div className="mt-6 flex w-full flex-col items-center justify-center p-6">
-      {showReconnectButton && (
-        <Alert variant="warning" size="small" className="mb-4 w-full">
-          <AlertDescription>
-            {t("environments.integrations.google_sheets.reconnect_button_description")}
-          </AlertDescription>
-          <AlertButton onClick={handleGoogleAuthorization}>
-            {t("environments.integrations.google_sheets.reconnect_button")}
-          </AlertButton>
-        </Alert>
-      )}
-      <div className="flex w-full justify-end space-x-2">
+      <div className="flex w-full justify-end">
         <div className="mr-6 flex items-center">
           <span className="mr-4 h-4 w-4 rounded-full bg-green-600"></span>
           <span className="text-slate-500">
@@ -93,19 +80,6 @@ export const ManageIntegration = ({
             })}
           </span>
         </div>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="outline" onClick={handleGoogleAuthorization}>
-                <RefreshCcwIcon className="mr-2 h-4 w-4" />
-                {t("environments.integrations.google_sheets.reconnect_button")}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {t("environments.integrations.google_sheets.reconnect_button_tooltip")}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
         <Button
           onClick={() => {
             setSelectedIntegration(null);
@@ -116,7 +90,12 @@ export const ManageIntegration = ({
       </div>
       {!integrationArray || integrationArray.length === 0 ? (
         <div className="mt-4 w-full">
-          <EmptyState text={t("environments.integrations.google_sheets.no_integrations_yet")} />
+          <EmptySpaceFiller
+            type="table"
+            environment={environment}
+            noWidgetRequired={true}
+            emptyMessage={t("environments.integrations.google_sheets.no_integrations_yet")}
+          />
         </div>
       ) : (
         <div className="mt-4 flex w-full flex-col items-center justify-center">
@@ -139,7 +118,7 @@ export const ManageIntegration = ({
                   }}>
                   <div className="col-span-2 text-center">{data.surveyName}</div>
                   <div className="col-span-2 text-center">{data.spreadsheetName}</div>
-                  <div className="col-span-2 text-center">{data.elements}</div>
+                  <div className="col-span-2 text-center">{data.questions}</div>
                   <div className="col-span-2 text-center">{timeSince(data.createdAt.toString(), locale)}</div>
                 </button>
               );

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/page.tsx

@@ -1,7 +1,7 @@
 import { redirect } from "next/navigation";
 import { TIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
-import { GoogleSheetWrapper } from "@/app/(app)/environments/[environmentId]/workspace/integrations/google-sheets/components/GoogleSheetWrapper";
-import { getSurveys } from "@/app/(app)/environments/[environmentId]/workspace/integrations/lib/surveys";
+import { GoogleSheetWrapper } from "@/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/GoogleSheetWrapper";
+import { getSurveys } from "@/app/(app)/environments/[environmentId]/project/integrations/lib/surveys";
 import {
   GOOGLE_SHEETS_CLIENT_ID,
   GOOGLE_SHEETS_CLIENT_SECRET,
@@ -40,7 +40,7 @@ const Page = async (props) => {
 
   return (
     <PageContentWrapper>
-      <GoBackButton url={`${WEBAPP_URL}/environments/${params.environmentId}/workspace/integrations`} />
+      <GoBackButton url={`${WEBAPP_URL}/environments/${params.environmentId}/project/integrations`} />
       <PageHeader pageTitle={t("environments.integrations.google_sheets.google_sheets_integration")} />
       <div className="h-[75vh] w-full">
         <GoogleSheetWrapper

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { createId } from "@paralleldrive/cuid2";
+import { PlusIcon, TrashIcon } from "lucide-react";
 import Image from "next/image";
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -12,19 +12,19 @@ import {
   TIntegrationNotionConfigData,
   TIntegrationNotionDatabase,
 } from "@formbricks/types/integration/notion";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
-import { TSurvey } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
-import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/workspace/integrations/actions";
+import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
 import {
-  MappingRow,
-  TMapping,
-  createEmptyMapping,
-} from "@/app/(app)/environments/[environmentId]/workspace/integrations/notion/components/MappingRow";
+  ERRORS,
+  TYPE_MAPPING,
+  UNSUPPORTED_TYPES_BY_NOTION,
+} from "@/app/(app)/environments/[environmentId]/project/integrations/notion/constants";
 import NotionLogo from "@/images/notion.png";
-import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { structuredClone } from "@/lib/pollyfills/structuredClone";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
+import { getQuestionTypes } from "@/modules/survey/lib/questions";
 import { Button } from "@/modules/ui/components/button";
 import {
   Dialog,
@@ -61,7 +61,21 @@ export const AddIntegrationModal = ({
   const { handleSubmit } = useForm();
   const [selectedDatabase, setSelectedDatabase] = useState<TIntegrationNotionDatabase | null>();
   const [selectedSurvey, setSelectedSurvey] = useState<TSurvey | null>(null);
-  const [mapping, setMapping] = useState<TMapping[]>([createEmptyMapping()]);
+  const [mapping, setMapping] = useState<
+    {
+      column: { id: string; name: string; type: string };
+      question: { id: string; name: string; type: string };
+      error?: {
+        type: string;
+        msg: React.ReactNode | string;
+      } | null;
+    }[]
+  >([
+    {
+      column: { id: "", name: "", type: "" },
+      question: { id: "", name: "", type: "" },
+    },
+  ]);
   const [isDeleting, setIsDeleting] = useState<boolean>(false);
   const [isLinkingDatabase, setIsLinkingDatabase] = useState(false);
   const integrationData = {
@@ -72,13 +86,13 @@ export const AddIntegrationModal = ({
     mapping: [
       {
         column: { id: "", name: "", type: "" },
-        element: { id: "", name: "", type: "" },
+        question: { id: "", name: "", type: "" },
       },
     ],
     createdAt: new Date(),
   };
 
-  const elements = useMemo(
+  const questions = useMemo(
     () => (selectedSurvey ? getElementsFromBlocks(selectedSurvey.blocks) : []),
     [selectedSurvey]
   );
@@ -110,12 +124,12 @@ export const AddIntegrationModal = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDatabase?.id]);
 
-  const elementItems = useMemo(() => {
-    const mappedElements = selectedSurvey
-      ? elements.map((el) => ({
-          id: el.id,
-          name: getTextContent(recallToHeadline(el.headline, selectedSurvey, false, "default")["default"]),
-          type: el.type,
+  const questionItems = useMemo(() => {
+    const mappedQuestions = selectedSurvey
+      ? questions.map((q) => ({
+          id: q.id,
+          name: getTextContent(recallToHeadline(q.headline, selectedSurvey, false, "default")["default"]),
+          type: q.type,
         }))
       : [];
 
@@ -123,31 +137,31 @@ export const AddIntegrationModal = ({
       selectedSurvey?.variables.map((variable) => ({
         id: variable.id,
         name: variable.name,
-        type: TSurveyElementTypeEnum.OpenText,
+        type: TSurveyQuestionTypeEnum.OpenText,
       })) || [];
 
     const hiddenFields =
       selectedSurvey?.hiddenFields.fieldIds?.map((fId) => ({
         id: fId,
         name: `${t("common.hidden_field")} : ${fId}`,
-        type: TSurveyElementTypeEnum.OpenText,
+        type: TSurveyQuestionTypeEnum.OpenText,
       })) || [];
     const Metadata = [
       {
         id: "metadata",
         name: t("common.metadata"),
-        type: TSurveyElementTypeEnum.OpenText,
+        type: TSurveyQuestionTypeEnum.OpenText,
       },
     ];
     const createdAt = [
       {
         id: "createdAt",
         name: t("common.created_at"),
-        type: TSurveyElementTypeEnum.Date,
+        type: TSurveyQuestionTypeEnum.Date,
       },
     ];
 
-    return [...mappedElements, ...variables, ...hiddenFields, ...Metadata, ...createdAt];
+    return [...mappedQuestions, ...variables, ...hiddenFields, ...Metadata, ...createdAt];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSurvey?.id]);
 
@@ -166,7 +180,7 @@ export const AddIntegrationModal = ({
           return survey.id === selectedIntegration.surveyId;
         })!
       );
-      setMapping(selectedIntegration.mapping.map((m) => ({ ...m, id: createId() })));
+      setMapping(selectedIntegration.mapping);
       return;
     }
     resetForm();
@@ -181,7 +195,7 @@ export const AddIntegrationModal = ({
         throw new Error(t("environments.integrations.please_select_a_survey_error"));
       }
 
-      if (mapping.length === 1 && (!mapping[0].element.id || !mapping[0].column.id)) {
+      if (mapping.length === 1 && (!mapping[0].question.id || !mapping[0].column.id)) {
         throw new Error(t("environments.integrations.notion.please_select_at_least_one_mapping"));
       }
 
@@ -190,8 +204,8 @@ export const AddIntegrationModal = ({
       }
 
       if (
-        mapping.filter((m) => m.column.id && !m.element.id).length >= 1 ||
-        mapping.filter((m) => m.element.id && !m.column.id).length >= 1
+        mapping.filter((m) => m.column.id && !m.question.id).length >= 1 ||
+        mapping.filter((m) => m.question.id && !m.column.id).length >= 1
       ) {
         throw new Error(
           t("environments.integrations.notion.please_complete_mapping_fields_with_notion_property")
@@ -218,14 +232,7 @@ export const AddIntegrationModal = ({
         notionIntegrationData.config.data.push(integrationData);
       }
 
-      const result = await createOrUpdateIntegrationAction({
-        environmentId,
-        integrationData: notionIntegrationData,
-      });
-      if (result?.serverError) {
-        toast.error(getFormattedErrorMessage(result));
-        return;
-      }
+      await createOrUpdateIntegrationAction({ environmentId, integrationData: notionIntegrationData });
       if (selectedIntegration) {
         toast.success(t("environments.integrations.integration_updated_successfully"));
       } else {
@@ -244,14 +251,7 @@ export const AddIntegrationModal = ({
     notionIntegrationData.config.data.splice(selectedIntegration!.index, 1);
     try {
       setIsDeleting(true);
-      const result = await createOrUpdateIntegrationAction({
-        environmentId,
-        integrationData: notionIntegrationData,
-      });
-      if (result?.serverError) {
-        toast.error(getFormattedErrorMessage(result));
-        return;
-      }
+      await createOrUpdateIntegrationAction({ environmentId, integrationData: notionIntegrationData });
       toast.success(t("environments.integrations.integration_removed_successfully"));
       setOpen(false);
     } catch (error) {
@@ -266,11 +266,196 @@ export const AddIntegrationModal = ({
     setSelectedDatabase(null);
     setSelectedSurvey(null);
   };
-  const getFilteredElementItems = (selectedIdx: number) => {
-    const selectedElementIds = new Set(
-      mapping.filter((_, idx) => idx !== selectedIdx).map((m) => m.element.id)
+  const getFilteredQuestionItems = (selectedIdx) => {
+    const selectedQuestionIds = mapping.filter((_, idx) => idx !== selectedIdx).map((m) => m.question.id);
+
+    return questionItems.filter((q) => !selectedQuestionIds.includes(q.id));
+  };
+
+  const createCopy = (item) => structuredClone(item);
+
+  const MappingRow = ({ idx }: { idx: number }) => {
+    const filteredQuestionItems = getFilteredQuestionItems(idx);
+
+    const addRow = () => {
+      setMapping((prev) => [
+        ...prev,
+        {
+          column: { id: "", name: "", type: "" },
+          question: { id: "", name: "", type: "" },
+        },
+      ]);
+    };
+
+    const deleteRow = () => {
+      setMapping((prev) => {
+        return prev.filter((_, i) => i !== idx);
+      });
+    };
+
+    const ErrorMsg = ({ error, col, ques }) => {
+      const showErrorMsg = useMemo(() => {
+        switch (error?.type) {
+          case ERRORS.UNSUPPORTED_TYPE:
+            return (
+              <>
+                -{" "}
+                {t("environments.integrations.notion.col_name_of_type_is_not_supported", {
+                  col_name: col.name,
+                  type: col.type,
+                })}
+              </>
+            );
+          case ERRORS.MAPPING:
+            const question = getQuestionTypes(t).find((qt) => qt.id === ques.type);
+            if (!question) return null;
+            return (
+              <>
+                {t("environments.integrations.notion.que_name_of_type_cant_be_mapped_to", {
+                  que_name: ques.name,
+                  question_label: question.label,
+                  col_name: col.name,
+                  col_type: col.type,
+                  mapped_type: TYPE_MAPPING[question.id].join(" ,"),
+                })}
+              </>
+            );
+          default:
+            return null;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [error]);
+
+      if (!error) return null;
+
+      return (
+        <div className="my-4 w-full rounded-lg bg-red-100 p-4 text-sm text-red-800">
+          <span className="mb-2 block">{error.type}</span>
+          {showErrorMsg}
+        </div>
+      );
+    };
+
+    const getFilteredDbItems = () => {
+      const colMapping = mapping.map((m) => m.column.id);
+      return dbItems.filter((item) => !colMapping.includes(item.id));
+    };
+
+    return (
+      <div className="w-full">
+        <ErrorMsg
+          key={idx}
+          error={mapping[idx]?.error}
+          col={mapping[idx].column}
+          ques={mapping[idx].question}
+        />
+        <div className="flex w-full items-center space-x-2">
+          <div className="flex w-full items-center">
+            <div className="max-w-full flex-1">
+              <DropdownSelector
+                placeholder={t("environments.integrations.notion.select_a_survey_question")}
+                items={filteredQuestionItems}
+                selectedItem={mapping?.[idx]?.question}
+                setSelectedItem={(item) => {
+                  setMapping((prev) => {
+                    const copy = createCopy(prev);
+                    const col = copy[idx].column;
+                    if (col.id) {
+                      if (UNSUPPORTED_TYPES_BY_NOTION.includes(col.type)) {
+                        copy[idx] = {
+                          ...copy[idx],
+                          error: {
+                            type: ERRORS.UNSUPPORTED_TYPE,
+                          },
+                          question: item,
+                        };
+                        return copy;
+                      }
+
+                      const isValidColType = TYPE_MAPPING[item.type].includes(col.type);
+                      if (!isValidColType) {
+                        copy[idx] = {
+                          ...copy[idx],
+                          error: {
+                            type: ERRORS.MAPPING,
+                          },
+                          question: item,
+                        };
+                        return copy;
+                      }
+                    }
+
+                    copy[idx] = {
+                      ...copy[idx],
+                      question: item,
+                      error: null,
+                    };
+                    return copy;
+                  });
+                }}
+                disabled={questionItems.length === 0}
+              />
+            </div>
+            <div className="h-px w-4 border-t border-t-slate-300" />
+            <div className="max-w-full flex-1">
+              <DropdownSelector
+                placeholder={t("environments.integrations.notion.select_a_field_to_map")}
+                items={getFilteredDbItems()}
+                selectedItem={mapping?.[idx]?.column}
+                setSelectedItem={(item) => {
+                  setMapping((prev) => {
+                    const copy = createCopy(prev);
+                    const ques = copy[idx].question;
+                    if (ques.id) {
+                      const isValidQuesType = TYPE_MAPPING[ques.type].includes(item.type);
+
+                      if (UNSUPPORTED_TYPES_BY_NOTION.includes(item.type)) {
+                        copy[idx] = {
+                          ...copy[idx],
+                          error: {
+                            type: ERRORS.UNSUPPORTED_TYPE,
+                          },
+                          column: item,
+                        };
+                        return copy;
+                      }
+
+                      if (!isValidQuesType) {
+                        copy[idx] = {
+                          ...copy[idx],
+                          error: {
+                            type: ERRORS.MAPPING,
+                          },
+                          column: item,
+                        };
+                        return copy;
+                      }
+                    }
+                    copy[idx] = {
+                      ...copy[idx],
+                      column: item,
+                      error: null,
+                    };
+                    return copy;
+                  });
+                }}
+                disabled={dbItems.length === 0}
+              />
+            </div>
+          </div>
+          <div className="flex space-x-2">
+            {mapping.length > 1 && (
+              <Button variant="secondary" size="icon" className="size-10" onClick={deleteRow}>
+                <TrashIcon />
+              </Button>
+            )}
+            <Button variant="secondary" size="icon" className="size-10" onClick={addRow}>
+              <PlusIcon />
+            </Button>
+          </div>
+        </div>
+      </div>
     );
-    return elementItems.filter((el) => !selectedElementIds.has(el.id));
   };
 
   return (
@@ -342,17 +527,8 @@ export const AddIntegrationModal = ({
                       {t("environments.integrations.notion.map_formbricks_fields_to_notion_property")}
                     </Label>
                     <div className="mt-1 space-y-2 overflow-y-auto">
-                      {mapping.map((m, idx) => (
-                        <MappingRow
-                          key={m.id}
-                          idx={idx}
-                          mapping={mapping}
-                          setMapping={setMapping}
-                          filteredElementItems={getFilteredElementItems(idx)}
-                          dbItems={dbItems}
-                          elementItems={elementItems}
-                          t={t}
-                        />
+                      {mapping.map((_, idx) => (
+                        <MappingRow idx={idx} key={idx} />
                       ))}
                     </div>
                   </div>

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

@@ -4,17 +4,19 @@ import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationNotion, TIntegrationNotionConfigData } from "@formbricks/types/integration/notion";
 import { TUserLocale } from "@formbricks/types/user";
-import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/workspace/integrations/actions";
+import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
 import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 
 interface ManageIntegrationProps {
+  environment: TEnvironment;
   notionIntegration: TIntegrationNotion;
   setOpenAddIntegrationModal: React.Dispatch<React.SetStateAction<boolean>>;
   setIsConnected: React.Dispatch<React.SetStateAction<boolean>>;
@@ -26,6 +28,7 @@ interface ManageIntegrationProps {
 }
 
 export const ManageIntegration = ({
+  environment,
   notionIntegration,
   setOpenAddIntegrationModal,
   setIsConnected,
@@ -98,7 +101,12 @@ export const ManageIntegration = ({
       </div>
       {!integrationArray || integrationArray.length === 0 ? (
         <div className="mt-4 w-full">
-          <EmptyState text={t("environments.integrations.notion.no_databases_found")} />
+          <EmptySpaceFiller
+            type="table"
+            environment={environment}
+            noWidgetRequired={true}
+            emptyMessage={t("environments.integrations.notion.no_databases_found")}
+          />
         </div>
       ) : (
         <div className="mt-4 flex w-full flex-col items-center justify-center">