feat(webapp): show Vercel deployment links in UI

Add Vercel integration lookup and expose a deployment URL so linked
Vercel deployments are discoverable from the app.

- Import VercelProjectIntegrationDataSchema and query for
  organizationProjectIntegration to detect Vercel project data.
- Parse integrationData and, when a vercelTeamSlug is present,
  look up the latest integrationDeployment for the deployment and
  construct a Vercel URL (vercel.com/<team>/<project>/<id>).
- Attach vercelDeploymentUrl to the DeploymentPresenter output.
- Render the Vercel link in deployment detail and deployments list
  by using the VercelLink component where vercelDeploymentUrl exists.
- Remove an unused tooltip import and swap VercelLogo usage to the
  VercelLink component in the list view.

This makes it easier for users to jump directly to the corresponding
Vercel deployment from the webapp.

Author: 0ski

apps/webapp/app/components/integrations/VercelLink.tsx

@@ -0,0 +1,22 @@
+import { VercelLogo } from "./VercelLogo";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+
+export function VercelLink({ vercelDeploymentUrl }: { vercelDeploymentUrl: string }) {
+  return (
+    <SimpleTooltip
+      button={
+        <LinkButton
+          variant="minimal/small"
+          LeadingIcon={<VercelLogo className="size-3.5" />}
+          iconSpacing="gap-x-1"
+          to={vercelDeploymentUrl}
+          className="pl-1"
+        >
+          Vercel
+        </LinkButton>
+      }
+      content="View on Vercel"
+    />
+  );
+}

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

@@ -12,6 +12,7 @@ import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { type User } from "~/models/user.server";
 import { getUsername } from "~/utils/username";
 import { processGitMetadata } from "./BranchesPresenter.server";
+import { VercelProjectIntegrationDataSchema } from "~/v3/vercel/vercelProjectIntegrationSchema";
 import { S2 } from "@s2-dev/streamstore";
 import { env } from "~/env.server";
 import { createRedisClient } from "~/redis.server";
@@ -161,6 +162,51 @@ export class DeploymentPresenter {
     });
 
     const gitMetadata = processGitMetadata(deployment.git);
+
+    // Look up Vercel integration data to construct a deployment URL
+    let vercelDeploymentUrl: 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) {
+        const integrationDeployment =
+          await this.#prismaClient.integrationDeployment.findFirst({
+            where: {
+              deploymentId: deployment.id,
+              integrationName: "vercel",
+            },
+            select: {
+              integrationDeploymentId: true,
+            },
+            orderBy: {
+              createdAt: "desc",
+            },
+          });
+
+        if (integrationDeployment) {
+          const vercelId = integrationDeployment.integrationDeploymentId.replace(/^dpl_/, "");
+          vercelDeploymentUrl = `https://vercel.com/${parsed.data.vercelTeamSlug}/${parsed.data.vercelProjectName}/${vercelId}`;
+        }
+      }
+    }
+
     const externalBuildData = deployment.externalBuildData
       ? ExternalBuildData.safeParse(deployment.externalBuildData)
       : undefined;
@@ -227,6 +273,7 @@ export class DeploymentPresenter {
         type: deployment.type,
         git: gitMetadata,
         triggeredVia: deployment.triggeredVia,
+        vercelDeploymentUrl,
       },
     };
   }

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

@@ -15,6 +15,7 @@ import {
 } from "lucide-react";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { GitMetadata } from "~/components/GitMetadata";
+import { VercelLink } from "~/components/integrations/VercelLink";
 import { RuntimeIcon } from "~/components/RuntimeIcon";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
@@ -516,6 +517,16 @@ export default function Page() {
                   })()}
                 </Property.Value>
               </Property.Item>
+              {deployment.vercelDeploymentUrl && (
+                <Property.Item>
+                  <Property.Label>Linked</Property.Label>
+                  <Property.Value>
+                    <div className="-ml-1 mt-0.5 flex flex-col">
+                      <VercelLink vercelDeploymentUrl={deployment.vercelDeploymentUrl} />
+                    </div>
+                  </Property.Value>
+                </Property.Item>
+              )}
             </Property.Table>
           </div>
 

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

@@ -19,7 +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 { VercelLink } from "~/components/integrations/VercelLink";
 import { DeploymentsNone, DeploymentsNoneDev } from "~/components/BlankStatePanels";
 import { OctoKitty } from "~/components/GitHubLoginButton";
 import { GitMetadata } from "~/components/GitMetadata";
@@ -56,7 +56,6 @@ import {
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
-import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import {
   DeploymentStatus,
   deploymentStatusDescription,
@@ -314,20 +313,14 @@ export default function Page() {
                             {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"
-                                  />
+                                  <div
+                                    className="-ml-1 flex items-center"
+                                    onClick={(e) => e.stopPropagation()}
+                                  >
+                                    <VercelLink
+                                      vercelDeploymentUrl={deployment.vercelDeploymentUrl}
+                                    />
+                                  </div>
                                 ) : (
                                   "–"
                                 )}