feat(vercel): persist team slug and surface Vercel joins in deployments

Add vercelTeamSlug to OrganizationProjectIntegration data and persist it
when creating or updating Vercel project integrations. Retrieve the team
slug (when available) from the Vercel client and store it in the
integration record so downstream logic can reference the Vercel team
identifier without making extra API calls.

Enhance DeploymentListPresenter to detect presence of a Vercel project
integration and, when available, include a LEFT JOIN to fetch the most
recent integration deployment id for each worker deployment. Parse the
stored integration data using the VercelProjectIntegrationDataSchema and
expose hasVercelIntegration, integrationDeploymentId, and cached Vercel
fields for use when rendering deployment entries.

These changes reduce repeated Vercel API calls and enable linking of
deployments to their Vercel counterparts in the UI.

Author: 0ski

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

@@ -308,6 +308,25 @@ export class VercelIntegrationRepository {
     );
   }
 
+  static getTeamSlug(
+    client: Vercel,
+    teamId: string | null
+  ): ResultAsync<string, VercelApiError> {
+    if (teamId) {
+      return wrapVercelCall(
+        client.teams.getTeam({ teamId }),
+        "Failed to fetch Vercel team",
+        { teamId }
+      ).map((response) => response.slug);
+    }
+
+    return wrapVercelCall(
+      client.user.getAuthUser(),
+      "Failed to fetch Vercel user",
+      {}
+    ).map((response) => response?.user.username ?? "unknown");
+  }
+
   static validateVercelToken(
     integration: OrganizationIntegration & { tokenReference: SecretReference }
   ): ResultAsync<{ isValid: boolean }, VercelApiError> {

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

@@ -1,5 +1,5 @@
 import {
-  type Prisma,
+  Prisma,
   type WorkerDeploymentStatus,
   type WorkerInstanceGroupType,
 } from "@trigger.dev/database";
@@ -10,6 +10,7 @@ import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { type User } from "~/models/user.server";
 import { processGitMetadata } from "./BranchesPresenter.server";
 import { BranchTrackingConfigSchema, getTrackedBranchForEnvironment } from "~/v3/github";
+import { VercelProjectIntegrationDataSchema } from "~/v3/vercel/vercelProjectIntegrationSchema";
 
 const pageSize = 20;
 
@@ -105,6 +106,51 @@ export class DeploymentListPresenter {
       },
     });
 
+    // Check for Vercel integration before the main query so we can conditionally LEFT JOIN
+    let hasVercelIntegration = false;
+    let vercelTeamSlug: string | undefined;
+    let vercelProjectName: string | undefined;
+
+    const vercelProjectIntegration =
+      await this.#prismaClient.organizationProjectIntegration.findFirst({
+        where: {
+          projectId: project.id,
+          deletedAt: null,
+          organizationIntegration: {
+            service: "VERCEL",
+            deletedAt: null,
+          },
+        },
+        select: {
+          integrationData: true,
+        },
+      });
+
+    if (vercelProjectIntegration) {
+      const parsed = VercelProjectIntegrationDataSchema.safeParse(
+        vercelProjectIntegration.integrationData
+      );
+
+      if (parsed.success && parsed.data.vercelTeamSlug) {
+        hasVercelIntegration = true;
+        vercelTeamSlug = parsed.data.vercelTeamSlug;
+        vercelProjectName = parsed.data.vercelProjectName;
+      }
+    }
+
+    const vercelSelect = hasVercelIntegration
+      ? Prisma.sql`, id_dep."integrationDeploymentId"`
+      : Prisma.sql``;
+    const vercelJoin = hasVercelIntegration
+      ? Prisma.sql`LEFT JOIN LATERAL (
+        SELECT id_inner."integrationDeploymentId"
+        FROM ${sqlDatabaseSchema}."IntegrationDeployment" as id_inner
+        WHERE id_inner."deploymentId" = wd."id" AND id_inner."integrationName" = 'vercel'
+        ORDER BY id_inner."createdAt" DESC
+        LIMIT 1
+      ) id_dep ON true`
+      : Prisma.sql``;
+
     const deployments = await this.#prismaClient.$queryRaw<
       {
         id: string;
@@ -123,6 +169,7 @@ export class DeploymentListPresenter {
         userAvatarUrl: string | null;
         type: WorkerInstanceGroupType;
         git: Prisma.JsonValue | null;
+        integrationDeploymentId: string | null;
       }[]
     >`
     SELECT
@@ -142,10 +189,12 @@ export class DeploymentListPresenter {
   wd."deployedAt",
   wd."type",
   wd."git"
+  ${vercelSelect}
 FROM
   ${sqlDatabaseSchema}."WorkerDeployment" as wd
 LEFT JOIN
   ${sqlDatabaseSchema}."User" as u ON wd."triggeredById" = u."id"
+${vercelJoin}
 WHERE
   wd."projectId" = ${project.id}
   AND wd."environmentId" = ${environment.id}
@@ -173,13 +222,20 @@ LIMIT ${pageSize} OFFSET ${pageSize * (page - 1)};`;
     return {
       currentPage: page,
       totalPages: Math.ceil(totalCount / pageSize),
+      hasVercelIntegration,
       connectedGithubRepository: project.connectedGithubRepository ?? undefined,
       environmentGitHubBranch,
       deployments: deployments.map((deployment, index) => {
         const label = labeledDeployments.find(
           (labeledDeployment) => labeledDeployment.deploymentId === deployment.id
         );
 
+        let vercelDeploymentUrl: string | null = null;
+        if (hasVercelIntegration && deployment.integrationDeploymentId && vercelTeamSlug && vercelProjectName) {
+          const vercelId = deployment.integrationDeploymentId.replace(/^dpl_/, "");
+          vercelDeploymentUrl = `https://vercel.com/${vercelTeamSlug}/${vercelProjectName}/${vercelId}`;
+        }
+
         return {
           id: deployment.id,
           shortCode: deployment.shortCode,
@@ -210,6 +266,7 @@ LIMIT ${pageSize} OFFSET ${pageSize * (page - 1)};`;
               }
             : undefined,
           git: processGitMetadata(deployment.git),
+          vercelDeploymentUrl,
         };
       }),
     };

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx

@@ -19,6 +19,7 @@ import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { PromoteIcon } from "~/assets/icons/PromoteIcon";
+import { VercelLogo } from "~/components/integrations/VercelLogo";
 import { DeploymentsNone, DeploymentsNoneDev } from "~/components/BlankStatePanels";
 import { OctoKitty } from "~/components/GitHubLoginButton";
 import { GitMetadata } from "~/components/GitMetadata";
@@ -55,6 +56,7 @@ import {
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import {
   DeploymentStatus,
   deploymentStatusDescription,
@@ -160,6 +162,7 @@ export default function Page() {
     connectedGithubRepository,
     environmentGitHubBranch,
     autoReloadPollIntervalMs,
+    hasVercelIntegration,
   } = useTypedLoaderData<typeof loader>();
   const hasDeployments = totalPages > 0;
 
@@ -234,6 +237,7 @@ export default function Page() {
                       <TableHeaderCell>Deployed at</TableHeaderCell>
                       <TableHeaderCell>Deployed by</TableHeaderCell>
                       <TableHeaderCell>Git</TableHeaderCell>
+                      {hasVercelIntegration && <TableHeaderCell>Linked</TableHeaderCell>}
                       <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
                     </TableRow>
                   </TableHeader>
@@ -307,6 +311,28 @@ export default function Page() {
                                 <GitMetadata git={deployment.git} />
                               </div>
                             </TableCell>
+                            {hasVercelIntegration && (
+                              <TableCell isSelected={isSelected}>
+                                {deployment.vercelDeploymentUrl ? (
+                                  <SimpleTooltip
+                                    button={
+                                      <a
+                                        href={deployment.vercelDeploymentUrl}
+                                        target="_blank"
+                                        rel="noreferrer noopener"
+                                        className="flex items-center text-text-dimmed transition-colors hover:text-text-bright"
+                                        onClick={(e) => e.stopPropagation()}
+                                      >
+                                        <VercelLogo className="size-3.5" />
+                                      </a>
+                                    }
+                                    content="View on Vercel"
+                                  />
+                                ) : (
+                                  "–"
+                                )}
+                              </TableCell>
+                            )}
                             <DeploymentActionsCell
                               deployment={deployment}
                               path={path}
@@ -317,7 +343,7 @@ export default function Page() {
                         );
                       })
                     ) : (
-                      <TableBlankRow colSpan={8}>
+                      <TableBlankRow colSpan={hasVercelIntegration ? 9 : 8}>
                         <Paragraph className="flex items-center justify-center">
                           No deploys match your filters
                         </Paragraph>

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

@@ -131,12 +131,14 @@ export class VercelIntegrationService {
     vercelProjectId: string;
     vercelProjectName: string;
     vercelTeamId: string | null;
+    vercelTeamSlug?: string;
     installedByUserId?: string;
   }): Promise<OrganizationProjectIntegration> {
     const integrationData = createDefaultVercelIntegrationData(
       params.vercelProjectId,
       params.vercelProjectName,
-      params.vercelTeamId
+      params.vercelTeamId,
+      params.vercelTeamSlug
     );
 
     return this.#prismaClient.organizationProjectIntegration.create({
@@ -170,6 +172,13 @@ export class VercelIntegrationService {
 
     const teamId = await VercelIntegrationRepository.getTeamIdFromIntegration(orgIntegration);
 
+    const vercelTeamSlug = await VercelIntegrationRepository.getVercelClient(orgIntegration)
+      .andThen((client) => VercelIntegrationRepository.getTeamSlug(client, teamId))
+      .match(
+        (slug) => slug,
+        () => undefined
+      );
+
     const existing = await this.getVercelProjectIntegration(params.projectId);
     if (existing) {
       const updated = await this.#prismaClient.organizationProjectIntegration.update({
@@ -181,6 +190,7 @@ export class VercelIntegrationService {
             vercelProjectId: params.vercelProjectId,
             vercelProjectName: params.vercelProjectName,
             vercelTeamId: teamId,
+            vercelTeamSlug,
           },
         },
       });
@@ -205,6 +215,7 @@ export class VercelIntegrationService {
       vercelProjectId: params.vercelProjectId,
       vercelProjectName: params.vercelProjectName,
       vercelTeamId: teamId,
+      vercelTeamSlug,
       installedByUserId: params.userId,
     });
 

apps/webapp/app/v3/vercel/vercelProjectIntegrationSchema.ts

@@ -53,6 +53,7 @@ export const VercelProjectIntegrationDataSchema = z.object({
   syncEnvVarsMapping: SyncEnvVarsMappingSchema,
   vercelProjectName: z.string(),
   vercelTeamId: z.string().nullable(),
+  vercelTeamSlug: z.string().optional(),
   vercelProjectId: z.string(),
   onboardingCompleted: z.boolean().optional(),
 });
@@ -62,7 +63,8 @@ export type VercelProjectIntegrationData = z.infer<typeof VercelProjectIntegrati
 export function createDefaultVercelIntegrationData(
   vercelProjectId: string,
   vercelProjectName: string,
-  vercelTeamId: string | null
+  vercelTeamId: string | null,
+  vercelTeamSlug?: string
 ): VercelProjectIntegrationData {
   return {
     config: {
@@ -75,6 +77,7 @@ export function createDefaultVercelIntegrationData(
     vercelProjectId,
     vercelProjectName,
     vercelTeamId,
+    vercelTeamSlug,
   };
 }