feat(vercel): preserve secret status when syncing env vars&improve setting names

- Query existing environment variable values to detect which keys
  are currently marked as secrets and build a set of secret keys.
- Split variables into secret and non-secret groups so non-secrets
  can be created without unintentionally overriding secret flags.
- Create non-secret variables via envVarRepository.create and update
  synced counters and error handling accordingly.
- Rename the Vercel integration settings to be more meaningful
- Iterate on Vercel onboarding flow, add GitHub step

Author: 0ski

apps/webapp/app/models/vercelIntegration.server.ts

@@ -1187,6 +1187,15 @@ export class VercelIntegrationRepository {
         }
       }
 
+      logger.info("Vercel pullEnvVarsFromVercel: environment mapping", {
+        projectId: params.projectId,
+        vercelProjectId: params.vercelProjectId,
+        envMappingCount: envMapping.length,
+        envMapping: envMapping.map(m => ({ type: m.triggerEnvType, target: m.vercelTarget })),
+        runtimeEnvironmentsCount: runtimeEnvironments.length,
+        runtimeEnvironments: runtimeEnvironments.map(e => e.type),
+      });
+
       if (envMapping.length === 0) {
         logger.warn("No environments to sync for Vercel integration", {
           projectId: params.projectId,
@@ -1252,6 +1261,16 @@ export class VercelIntegrationRepository {
             continue;
           }
 
+          logger.info("Vercel pullEnvVarsFromVercel: fetched env vars for target", {
+            projectId: params.projectId,
+            vercelTarget: mapping.vercelTarget,
+            triggerEnvType: mapping.triggerEnvType,
+            projectEnvVarsCount: projectEnvVars.length,
+            sharedEnvVarsCount: filteredSharedEnvVars.length,
+            mergedEnvVarsCount: mergedEnvVars.length,
+            mergedEnvVarKeys: mergedEnvVars.map(v => v.key),
+          });
+
           // Filter env vars based on syncEnvVarsMapping and exclude TRIGGER_SECRET_KEY
           const varsToSync = mergedEnvVars.filter((envVar) => {
             // Skip secrets (they don't have values anyway)
@@ -1270,34 +1289,105 @@ export class VercelIntegrationRepository {
             );
           });
 
+          logger.info("Vercel pullEnvVarsFromVercel: filtered vars to sync", {
+            projectId: params.projectId,
+            vercelTarget: mapping.vercelTarget,
+            triggerEnvType: mapping.triggerEnvType,
+            varsToSyncCount: varsToSync.length,
+            varsToSyncKeys: varsToSync.map(v => v.key),
+          });
+
           if (varsToSync.length === 0) {
             continue;
           }
 
-          // Create env vars in Trigger.dev
-          const result = await envVarRepository.create(params.projectId, {
-            override: true, // Override existing vars
-            environmentIds: [mapping.runtimeEnvironmentId],
-            isSecret: false, // Vercel env vars we can read are not secrets in our system
-            variables: varsToSync.map((v) => ({
-              key: v.key,
-              value: v.value,
-            })),
+          // Query existing env vars to check which ones are already secrets
+          // We need to preserve the secret status when overriding
+          const existingSecretKeys = new Set<string>();
+          const existingVarValues = await prisma.environmentVariableValue.findMany({
+            where: {
+              environmentId: mapping.runtimeEnvironmentId,
+              variable: {
+                projectId: params.projectId,
+                key: {
+                  in: varsToSync.map((v) => v.key),
+                },
+              },
+            },
+            select: {
+              isSecret: true,
+              variable: {
+                select: {
+                  key: true,
+                },
+              },
+            },
           });
 
-          if (result.success) {
-            syncedCount += varsToSync.length;
-          } else {
-            const errorMsg = `Failed to sync env vars for ${mapping.triggerEnvType}: ${result.error}`;
-            errors.push(errorMsg);
-            logger.error(errorMsg, {
-              projectId: params.projectId,
-              vercelProjectId: params.vercelProjectId,
-              vercelTarget: mapping.vercelTarget,
-              error: result.error,
-              variableErrors: result.variableErrors,
-              attemptedKeys: varsToSync.map((v) => v.key),
+          for (const varValue of existingVarValues) {
+            if (varValue.isSecret) {
+              existingSecretKeys.add(varValue.variable.key);
+            }
+          }
+
+          // Split vars into secret and non-secret groups
+          const secretVars = varsToSync.filter((v) => existingSecretKeys.has(v.key));
+          const nonSecretVars = varsToSync.filter((v) => !existingSecretKeys.has(v.key));
+
+          // Create non-secret vars
+          if (nonSecretVars.length > 0) {
+            const result = await envVarRepository.create(params.projectId, {
+              override: true,
+              environmentIds: [mapping.runtimeEnvironmentId],
+              isSecret: false,
+              variables: nonSecretVars.map((v) => ({
+                key: v.key,
+                value: v.value,
+              })),
+            });
+
+            if (result.success) {
+              syncedCount += nonSecretVars.length;
+            } else {
+              const errorMsg = `Failed to sync env vars for ${mapping.triggerEnvType}: ${result.error}`;
+              errors.push(errorMsg);
+              logger.error(errorMsg, {
+                projectId: params.projectId,
+                vercelProjectId: params.vercelProjectId,
+                vercelTarget: mapping.vercelTarget,
+                error: result.error,
+                variableErrors: result.variableErrors,
+                attemptedKeys: nonSecretVars.map((v) => v.key),
+              });
+            }
+          }
+
+          // Create secret vars (preserve their secret status)
+          if (secretVars.length > 0) {
+            const result = await envVarRepository.create(params.projectId, {
+              override: true,
+              environmentIds: [mapping.runtimeEnvironmentId],
+              isSecret: true, // Preserve secret status
+              variables: secretVars.map((v) => ({
+                key: v.key,
+                value: v.value,
+              })),
             });
+
+            if (result.success) {
+              syncedCount += secretVars.length;
+            } else {
+              const errorMsg = `Failed to sync secret env vars for ${mapping.triggerEnvType}: ${result.error}`;
+              errors.push(errorMsg);
+              logger.error(errorMsg, {
+                projectId: params.projectId,
+                vercelProjectId: params.vercelProjectId,
+                vercelTarget: mapping.vercelTarget,
+                error: result.error,
+                variableErrors: result.variableErrors,
+                attemptedKeys: secretVars.map((v) => v.key),
+              });
+            }
           }
         } catch (envError) {
           const errorMsg = `Failed to process env vars for ${mapping.triggerEnvType}: ${envError instanceof Error ? envError.message : "Unknown error"}`;

apps/webapp/app/presenters/v3/EnvironmentVariablesPresenter.server.ts

@@ -5,6 +5,7 @@ import { filterOrphanedEnvironments, sortEnvironments } from "~/utils/environmen
 import { EnvironmentVariablesRepository } from "~/v3/environmentVariables/environmentVariablesRepository.server";
 import {
   SyncEnvVarsMapping,
+  EnvSlug,
 } from "~/v3/vercel/vercelProjectIntegrationSchema";
 import { VercelIntegrationService } from "~/services/vercelIntegration.server";
 
@@ -102,11 +103,11 @@ export class EnvironmentVariablesPresenter {
     const vercelIntegration = await vercelService.getVercelProjectIntegration(project.id, true);
 
     let vercelSyncEnvVarsMapping: SyncEnvVarsMapping = {};
-    let vercelPullEnvVarsEnabled = false;
+    let vercelPullEnvVarsBeforeBuild: EnvSlug[] | null = null;
 
     if (vercelIntegration) {
       vercelSyncEnvVarsMapping = vercelIntegration.parsedIntegrationData.syncEnvVarsMapping;
-      vercelPullEnvVarsEnabled = vercelIntegration.parsedIntegrationData.config.pullEnvVarsFromVercel;
+      vercelPullEnvVarsBeforeBuild = vercelIntegration.parsedIntegrationData.config.pullEnvVarsBeforeBuild ?? null;
     }
 
     return {
@@ -146,7 +147,7 @@ export class EnvironmentVariablesPresenter {
       vercelIntegration: vercelIntegration
         ? {
             enabled: true,
-            pullEnvVarsEnabled: vercelPullEnvVarsEnabled,
+            pullEnvVarsBeforeBuild: vercelPullEnvVarsBeforeBuild,
             syncEnvVarsMapping: vercelSyncEnvVarsMapping,
           }
         : null,

apps/webapp/app/presenters/v3/VercelSettingsPresenter.server.ts

@@ -1,4 +1,4 @@
-import { type PrismaClient, type RuntimeEnvironmentType } from "@trigger.dev/database";
+import { type PrismaClient } from "@trigger.dev/database";
 import { fromPromise, ok, ResultAsync } from "neverthrow";
 import { env } from "~/env.server";
 import { OrgIntegrationRepository } from "~/models/orgIntegration.server";
@@ -40,13 +40,29 @@ export type VercelAvailableProject = {
   name: string;
 };
 
+export type GitHubAppInstallationForVercel = {
+  id: string;
+  appInstallationId: bigint;
+  targetType: string;
+  accountHandle: string;
+  repositories: Array<{
+    id: string;
+    name: string;
+    fullName: string;
+    private: boolean;
+    htmlUrl: string;
+  }>;
+};
+
 export type VercelOnboardingData = {
   customEnvironments: VercelCustomEnvironment[];
   environmentVariables: VercelEnvironmentVariable[];
   availableProjects: VercelAvailableProject[];
   hasProjectSelected: boolean;
   authInvalid?: boolean;
-  existingVariables: Record<string, { environments: RuntimeEnvironmentType[] }>;
+  existingVariables: Record<string, { environments: string[] }>; // Environment slugs (non-archived only)
+  gitHubAppInstallations: GitHubAppInstallationForVercel[];
+  isGitHubConnected: boolean;
 };
 
 export class VercelSettingsPresenter extends BasePresenter {
@@ -234,11 +250,71 @@ export class VercelSettingsPresenter extends BasePresenter {
    * Get data needed for the onboarding modal (custom environments and env vars)
    */
   public async getOnboardingData(
-    projectId: string, 
+    projectId: string,
     organizationId: string,
     vercelEnvironmentId?: string
   ): Promise<VercelOnboardingData | null> {
     try {
+      // Fetch GitHub app installations and connected repo in parallel with Vercel data
+      const [gitHubInstallations, connectedGitHubRepo] = await Promise.all([
+        (this._replica as PrismaClient).githubAppInstallation.findMany({
+          where: {
+            organizationId,
+            deletedAt: null,
+            suspendedAt: null,
+          },
+          select: {
+            id: true,
+            accountHandle: true,
+            targetType: true,
+            appInstallationId: true,
+            repositories: {
+              select: {
+                id: true,
+                name: true,
+                fullName: true,
+                htmlUrl: true,
+                private: true,
+              },
+              take: 200,
+            },
+          },
+          take: 20,
+          orderBy: {
+            createdAt: "desc",
+          },
+        }),
+        (this._replica as PrismaClient).connectedGithubRepository.findFirst({
+          where: {
+            projectId,
+            repository: {
+              installation: {
+                deletedAt: null,
+                suspendedAt: null,
+              },
+            },
+          },
+          select: {
+            id: true,
+          },
+        }),
+      ]);
+
+      const isGitHubConnected = connectedGitHubRepo !== null;
+      const gitHubAppInstallations: GitHubAppInstallationForVercel[] = gitHubInstallations.map((installation) => ({
+        id: installation.id,
+        appInstallationId: installation.appInstallationId,
+        targetType: installation.targetType,
+        accountHandle: installation.accountHandle,
+        repositories: installation.repositories.map((repo) => ({
+          id: repo.id,
+          name: repo.name,
+          fullName: repo.fullName,
+          private: repo.private,
+          htmlUrl: repo.htmlUrl,
+        })),
+      }));
+
       const orgIntegration = await (this._replica as PrismaClient).organizationIntegration.findFirst({
         where: {
           organizationId,
@@ -263,6 +339,8 @@ export class VercelSettingsPresenter extends BasePresenter {
           hasProjectSelected: false,
           authInvalid: true,
           existingVariables: {},
+          gitHubAppInstallations,
+          isGitHubConnected,
         };
       }
 
@@ -292,6 +370,8 @@ export class VercelSettingsPresenter extends BasePresenter {
           hasProjectSelected: false,
           authInvalid: availableProjectsResult.authInvalid,
           existingVariables: {},
+          gitHubAppInstallations,
+          isGitHubConnected,
         };
       }
 
@@ -303,6 +383,8 @@ export class VercelSettingsPresenter extends BasePresenter {
           availableProjects: availableProjectsResult.data,
           hasProjectSelected: false,
           existingVariables: {},
+          gitHubAppInstallations,
+          isGitHubConnected,
         };
       }
 
@@ -341,6 +423,8 @@ export class VercelSettingsPresenter extends BasePresenter {
           hasProjectSelected: true,
           authInvalid: true,
           existingVariables: {},
+          gitHubAppInstallations,
+          isGitHubConnected,
         };
       }
 
@@ -388,13 +472,34 @@ export class VercelSettingsPresenter extends BasePresenter {
       );
 
     // Get existing environment variables in Trigger.dev
+      // Fetch environments with their slugs and archived status to filter properly
+      const projectEnvs = await (this._replica as PrismaClient).runtimeEnvironment.findMany({
+        where: {
+          projectId,
+          archivedAt: null, // Filter out archived environments
+        },
+        select: {
+          id: true,
+          slug: true,
+          type: true,
+        },
+      });
+      const envIdToSlug = new Map(projectEnvs.map((e) => [e.id, e.slug]));
+      const activeEnvIds = new Set(projectEnvs.map((e) => e.id));
+
       const envVarRepository = new EnvironmentVariablesRepository(this._replica as PrismaClient);
       const existingVariables = await envVarRepository.getProject(projectId);
-      const existingVariablesRecord: Record<string, { environments: RuntimeEnvironmentType[] }> = {};
+      const existingVariablesRecord: Record<string, { environments: string[] }> = {};
       for (const v of existingVariables) {
-        existingVariablesRecord[v.key] = {
-          environments: v.values.map((val) => val.environment.type),
-        };
+        // Filter out archived environments and map to slugs
+        const activeEnvSlugs = v.values
+          .filter((val) => activeEnvIds.has(val.environment.id))
+          .map((val) => envIdToSlug.get(val.environment.id) || val.environment.type.toLowerCase());
+        if (activeEnvSlugs.length > 0) {
+          existingVariablesRecord[v.key] = {
+            environments: activeEnvSlugs,
+          };
+        }
       }
 
       return {
@@ -403,6 +508,8 @@ export class VercelSettingsPresenter extends BasePresenter {
         availableProjects: availableProjectsResult.data,
         hasProjectSelected: true,
         existingVariables: existingVariablesRecord,
+        gitHubAppInstallations,
+        isGitHubConnected,
       };
     } catch (error) {
       console.error("Error in getOnboardingData:", error);