feat(vercel): automatic version skew protection at connect + atomic deployments deprecation

.server-changes/vercel-version-skew-protection.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+New Vercel connections now get version skew protection turned on automatically, so each run uses the task version its deployment shipped with. Automatic atomic deployments are deprecated and no longer offered when you connect a project, but stay available in your Vercel integration settings.

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

@@ -1,12 +1,14 @@
 import { Switch } from "~/components/primitives/Switch";
 import { LinkButton } from "~/components/primitives/Buttons";
+import { Badge } from "~/components/primitives/Badge";
 import { Label } from "~/components/primitives/Label";
 import {
   SettingsRow,
   SettingsRowDescription,
   SettingsRowTitle,
 } from "~/components/primitives/SettingsLayout";
 import { cn } from "~/utils/cn";
+import { docsPath } from "~/utils/pathBuilder";
 import { Hint } from "~/components/primitives/Hint";
 import { TextLink } from "~/components/primitives/TextLink";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
@@ -17,6 +19,16 @@ import {
 } from "~/components/environments/EnvironmentLabel";
 import { envSlugToType, type EnvSlug } from "~/v3/vercel/vercelProjectIntegrationSchema";
 
+export const SKEW_PROTECTION_DOCS_PATH = docsPath("deployment/version-skew-protection");
+
+const SKEW_PROTECTION_MIN_SDK_VERSION: string | null = "4.5.12";
+
+export function skewProtectionVersionRequirement(): string {
+  return SKEW_PROTECTION_MIN_SDK_VERSION
+    ? `from SDK and CLI v${SKEW_PROTECTION_MIN_SDK_VERSION} and later`
+    : "from a recent SDK and CLI — see the docs for the exact version";
+}
+
 type BuildSettingsFieldsProps = {
   availableEnvSlugs: EnvSlug[];
   pullEnvVarsBeforeBuild: EnvSlug[];
@@ -38,6 +50,7 @@ type BuildSettingsFieldsProps = {
   currentTriggerVersionFetchFailed?: boolean;
   /** Hide the section-level master toggles for "Pull env vars" and "Discover new env vars". */
   hideSectionToggles?: boolean;
+  showAtomicDeployments?: boolean;
   layout?: "settings" | "card";
 };
 
@@ -56,6 +69,7 @@ export function BuildSettingsFields({
   currentTriggerVersion,
   currentTriggerVersionFetchFailed,
   hideSectionToggles,
+  showAtomicDeployments = true,
   layout = "card",
 }: BuildSettingsFieldsProps) {
   const isSlugDisabled = (slug: EnvSlug) => !!disabledEnvSlugs?.[slug];
@@ -126,7 +140,7 @@ export function BuildSettingsFields({
     ) : null;
 
   const atomicSections =
-    layout === "settings" ? (
+    layout === "settings" && showAtomicDeployments ? (
       <>
         <SettingsRow
           action={
@@ -140,11 +154,25 @@ export function BuildSettingsFields({
           }
         >
           <div className="flex-1 space-y-1">
-            <SettingsRowTitle>Atomic deployments</SettingsRowTitle>
+            <SettingsRowTitle>
+              <span className="flex items-center gap-2">
+                Atomic deployments <DeprecatedBadge />
+              </span>
+            </SettingsRowTitle>
             <SettingsRowDescription>
-              Promotes your Vercel deployment and your tasks together in Production, so your app
-              never runs against a mismatched task version. Requires turning off "Auto-assign Custom
-              Production Domains" on your Vercel project, which Trigger.dev does for you.{" "}
+              Version skew protection replaces this. It pins every run to the deployment that
+              triggered it, and works on its own {skewProtectionVersionRequirement()}. Atomic
+              deployments still work, so turn this off whenever you're ready.{" "}
+              <TextLink href={SKEW_PROTECTION_DOCS_PATH} target="_blank">
+                Read about version skew protection
+              </TextLink>
+              .
+            </SettingsRowDescription>
+            <SettingsRowDescription>
+              Atomic deployments promote your Vercel deployment and your tasks together in
+              Production, so your app never runs against a mismatched task version. This needs
+              "Auto-assign Custom Production Domains" turned off on your Vercel project, and
+              Trigger.dev takes care of that for you.{" "}
               <TextLink
                 href="https://trigger.dev/docs/vercel-integration#atomic-deployments"
                 target="_blank"
@@ -172,7 +200,7 @@ export function BuildSettingsFields({
         {atomicBuilds.includes("prod") && onAutoPromoteChange !== undefined && (
           <SettingsRow
             title="Auto promotion"
-            description="Once your tasks finish deploying, Trigger.dev promotes the Vercel deployment for you. Turn this off to promote from the Vercel dashboard yourself, and Trigger.dev will follow as soon as you do."
+            description="Part of atomic deployments, and only used while they are on. Once your tasks finish deploying, Trigger.dev promotes the Vercel deployment for you. Turn this off to promote from the Vercel dashboard yourself, and Trigger.dev will follow as soon as you do."
             action={
               <Switch
                 variant="medium"
@@ -333,10 +361,14 @@ export function BuildSettingsFields({
       {atomicSections}
 
       {/* Atomic deployments */}
-      {layout === "card" && (
+      {layout === "card" && showAtomicDeployments && (
         <div>
           <div className="flex items-center justify-between">
-            <Label>Atomic deployments</Label>
+            <Label>
+              <span className="flex items-center gap-2">
+                Atomic deployments <DeprecatedBadge />
+              </span>
+            </Label>
             <Switch
               variant="small"
               checked={atomicBuilds.includes("prod")}
@@ -346,10 +378,18 @@ export function BuildSettingsFields({
             />
           </div>
           <Hint className="pr-6">
-            When enabled, production deployments wait for Vercel deployment to complete before
-            promoting the Trigger.dev deployment. This will disable the "Auto-assign Custom
-            Production Domains" option in your Vercel project settings to perform staged
-            deployments.{" "}
+            Version skew protection replaces this, and works on its own{" "}
+            {skewProtectionVersionRequirement()}.{" "}
+            <TextLink href={SKEW_PROTECTION_DOCS_PATH} target="_blank">
+              Read about version skew protection
+            </TextLink>
+            .
+          </Hint>
+          <Hint className="pr-6">
+            Atomic deployments promote your Vercel deployment and your tasks together in Production,
+            so your app never runs against a mismatched task version. This needs "Auto-assign Custom
+            Production Domains" turned off on your Vercel project, and Trigger.dev takes care of
+            that for you.{" "}
             <TextLink
               href="https://trigger.dev/docs/vercel-integration#atomic-deployments"
               target="_blank"
@@ -375,27 +415,48 @@ export function BuildSettingsFields({
       )}
 
       {/* Auto promotion — only visible when atomic deployments are on */}
-      {layout === "card" && atomicBuilds.includes("prod") && onAutoPromoteChange !== undefined && (
-        <div>
-          <div className="flex items-center justify-between">
-            <Label>Auto promotion</Label>
-            <Switch
-              variant="small"
-              checked={autoPromote ?? true}
-              onCheckedChange={onAutoPromoteChange}
-            />
+      {layout === "card" &&
+        showAtomicDeployments &&
+        atomicBuilds.includes("prod") &&
+        onAutoPromoteChange !== undefined && (
+          <div>
+            <div className="flex items-center justify-between">
+              <Label>Auto promotion</Label>
+              <Switch
+                variant="small"
+                checked={autoPromote ?? true}
+                onCheckedChange={onAutoPromoteChange}
+              />
+            </div>
+            <Hint className="pr-6">
+              When enabled, the integration automatically promotes the Vercel deployment after the
+              Trigger.dev build completes. Turn off to manually promote from your Vercel dashboard —
+              Trigger.dev will then promote automatically once you do.
+            </Hint>
           </div>
-          <Hint className="pr-6">
-            When enabled, the integration automatically promotes the Vercel deployment after the
-            Trigger.dev build completes. Turn off to manually promote from your Vercel dashboard —
-            Trigger.dev will then promote automatically once you do.
-          </Hint>
-        </div>
-      )}
+        )}
     </>
   );
 }
 
+function DeprecatedBadge() {
+  return (
+    <SimpleTooltip
+      asChild
+      button={
+        <Badge
+          variant="extra-small"
+          className="text-warning system:border-transparent system:bg-warning system:text-white"
+        >
+          Deprecated
+        </Badge>
+      }
+      content="Use version skew protection instead"
+      disableHoverableContent
+    />
+  );
+}
+
 function EnvToggleRow({
   slug,
   checked,

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

@@ -235,7 +235,7 @@ export function VercelOnboardingModal({
   const [pullEnvVarsBeforeBuild, setPullEnvVarsBeforeBuild] = useState<EnvSlug[]>(
     () => availableEnvSlugsForOnboardingBuildSettings
   );
-  const [atomicBuilds, setAtomicBuilds] = useState<EnvSlug[]>(() => ["prod"]);
+  const [atomicBuilds, setAtomicBuilds] = useState<EnvSlug[]>([]);
   const [discoverEnvVars, setDiscoverEnvVars] = useState<EnvSlug[]>(
     () => availableEnvSlugsForOnboardingBuildSettings
   );
@@ -1164,7 +1164,7 @@ export function VercelOnboardingModal({
             <div className="flex flex-col gap-4">
               <Header3>Build Settings</Header3>
               <Paragraph className="text-sm">
-                Configure how environment variables are pulled during builds and atomic deployments.
+                Configure how environment variables are pulled during builds.
               </Paragraph>
 
               <BuildSettingsFields
@@ -1176,6 +1176,7 @@ export function VercelOnboardingModal({
                 atomicBuilds={atomicBuilds}
                 onAtomicBuildsChange={setAtomicBuilds}
                 disabledEnvSlugs={disabledEnvSlugsForBuildSettings}
+                showAtomicDeployments={false}
               />
 
               <FormButtons

apps/webapp/app/components/primitives/Badge.tsx

@@ -18,10 +18,12 @@ type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
   variant?: keyof typeof variants;
 };
 
-export function Badge({ className, variant = "default", children, ...props }: BadgeProps) {
-  return (
-    <div className={cn(variants[variant], className)} {...props}>
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant = "default", children, ...props }, ref) => (
+    <div ref={ref} className={cn(variants[variant], className)} {...props}>
       <span>{children}</span>
     </div>
-  );
-}
+  )
+);
+
+Badge.displayName = "Badge";