chore: upgrade to zod v4

.changeset/zod-4-support.md

@@ -0,0 +1,14 @@
+---
+"@trigger.dev/build": minor
+"@trigger.dev/core": minor
+"@trigger.dev/react-hooks": minor
+"@trigger.dev/rsc": minor
+"@trigger.dev/sdk": minor
+"trigger.dev": minor
+"@trigger.dev/redis-worker": minor
+"@trigger.dev/schema-to-json": minor
+---
+
+Add Zod 4 support. You can now use Zod 3.25.76+ or Zod 4.
+
+Zod remains a runtime dependency of packages that execute schemas, so existing and new installations continue to receive it automatically. The matching peer dependency range allows package managers to reuse either a compatible Zod 3 or Zod 4 installation from your project.

AGENTS.md

@@ -108,7 +108,7 @@ When modifying only server components (`apps/webapp/`, `apps/supervisor/`, etc.)
 
 ## Dependency Pinning
 
-Zod is pinned to a single version across the entire monorepo (currently `3.25.76`). When adding zod to a new or existing package, use the **exact same version** as the rest of the repo - never a different version or a range. Mismatched zod versions cause runtime type incompatibilities (e.g., schemas from one package can't be used as body validators in another).
+Zod is pinned to a single version across the entire monorepo (currently `4.4.3`). When adding zod to a new or existing package, use the **exact same version** as the rest of the repo - never a different version or a range. Mismatched zod versions cause runtime type incompatibilities (e.g., schemas from one package can't be used as body validators in another).
 
 ## Architecture Overview
 

apps/supervisor/package.json

@@ -23,7 +23,7 @@
     "prom-client": "^15.1.0",
     "socket.io": "4.7.4",
     "std-env": "^3.8.0",
-    "zod": "3.25.76"
+    "zod": "4.4.3"
   },
   "devDependencies": {
     "@internal/testcontainers": "workspace:*",

apps/webapp/app/components/Feedback.tsx

@@ -5,7 +5,7 @@ import {
   getTextareaProps,
   useForm,
 } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { InformationCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid";
 import { EnvelopeIcon, ShieldCheckIcon } from "@heroicons/react/24/solid";
 import { Form, useActionData, useLocation, useNavigation, useSearchParams } from "@remix-run/react";
@@ -129,7 +129,7 @@ export function Feedback({
             <Fieldset className="max-w-full gap-y-3">
               <input
                 value={location.pathname}
-                {...getInputProps(fields.path, { type: "hidden" })}
+                {...getInputProps(fields.path, { type: "hidden", value: false })}
               />
               <InputGroup className="max-w-full">
                 {type === "feature" && (

apps/webapp/app/components/billing/BillingAlertsSection.tsx

@@ -1,5 +1,5 @@
 import { getFormProps, getInputProps, useForm, type SubmissionResult } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { PlusIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { Form, useActionData, useSearchParams } from "@remix-run/react";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";

apps/webapp/app/components/billing/BillingLimitConfigSection.tsx

@@ -1,6 +1,6 @@
 import { getFormProps, useForm, type SubmissionResult } from "@conform-to/react";
 
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { Form, useActionData } from "@remix-run/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
@@ -37,7 +37,7 @@ export const billingLimitFormSchema = z.discriminatedUnion("mode", [
   z.object({
     mode: z.literal("custom"),
     amount: z.coerce
-      .number({ invalid_type_error: "Not a valid amount" })
+      .number({ error: "Not a valid amount" })
       .positive("Amount must be greater than 0"),
     cancelInProgressRuns: z
       .preprocess((v) => v === "on" || v === true || v === "true", z.boolean())

apps/webapp/app/components/billing/BillingLimitRecoveryPanel.tsx

@@ -1,5 +1,5 @@
 import { getFormProps, useForm, type SubmissionResult } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
@@ -21,7 +21,7 @@ export const billingLimitRecoveryFormSchema = z
   .object({
     action: z.enum(["increase", "remove"]),
     newAmount: z.coerce
-      .number({ invalid_type_error: "Not a valid amount" })
+      .number({ error: "Not a valid amount" })
       .positive("Amount must be greater than 0")
       .optional(),
     resumeMode: z.enum(["queue", "new_only"]),
@@ -87,7 +87,7 @@ export function BillingLimitRecoveryPanel({
     },
     defaultValue: {
       action: "increase",
-      newAmount: suggestedNewLimitDollars,
+      newAmount: String(suggestedNewLimitDollars),
       resumeMode: "queue",
     },
   });

apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx

@@ -1,6 +1,6 @@
 import { getFormProps, getInputProps, useForm } from "@conform-to/react";
 import { GlobeLinesIcon } from "~/assets/icons/GlobeLinesIcon";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { EnvelopeIcon, HashtagIcon, LockClosedIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { BellAlertIcon } from "@heroicons/react/24/solid";
 import { useFetcher, useNavigate } from "@remix-run/react";

apps/webapp/app/components/metrics/QueryWidget.tsx

@@ -55,7 +55,7 @@ const chartConfigOptions = {
   sortByColumn: z.string().nullable(),
   sortDirection: SortDirection,
   aggregation: AggregationType,
-  seriesColors: z.record(z.string()).optional(),
+  seriesColors: z.record(z.string(), z.string()).optional(),
 };
 
 const ChartConfiguration = z.object({ ...chartConfigOptions });

apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx

@@ -1,5 +1,5 @@
 import { getFormProps, getInputProps, getSelectProps, useForm } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { RectangleStackIcon } from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useActionData, useNavigation, useParams, useSubmit } from "@remix-run/react";

apps/webapp/app/components/schedules/PurchaseSchedulesModal.tsx

@@ -1,5 +1,5 @@
 import { getFormProps, useForm } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { EnvelopeIcon } from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { useFetcher } from "@remix-run/react";

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

@@ -22,7 +22,7 @@ const SlackSecretSchema = z.object({
   refreshToken: z.string().optional(),
   botScopes: z.array(z.string()).optional(),
   userScopes: z.array(z.string()).optional(),
-  raw: z.record(z.any()).optional(),
+  raw: z.record(z.string(), z.any()).optional(),
 });
 
 type SlackSecret = z.infer<typeof SlackSecretSchema>;

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

@@ -129,7 +129,7 @@ export const VercelSecretSchema = z.object({
   teamId: z.string().nullable().optional(),
   userId: z.string().optional(),
   installationId: z.string().optional(),
-  raw: z.record(z.any()).optional(),
+  raw: z.record(z.string(), z.any()).optional(),
 });
 
 export type VercelSecret = z.infer<typeof VercelSecretSchema>;

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

@@ -145,11 +145,11 @@ export const VercelSchemas = {
     .union([
       z
         .object({
-          envs: z.array(z.record(z.unknown())),
+          envs: z.array(z.record(z.string(), z.unknown())),
           pagination: z.unknown().optional(),
         })
         .passthrough(),
-      z.array(z.record(z.unknown())),
+      z.array(z.record(z.string(), z.unknown())),
     ])
     .transform((val) => (Array.isArray(val) ? { envs: val } : val)),
 

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

@@ -48,7 +48,7 @@ export const DashboardLayout = z.discriminatedUnion("version", [
   z.object({
     version: z.literal("1"),
     layout: z.array(LayoutItem),
-    widgets: z.record(Widget),
+    widgets: z.record(z.string(), Widget),
   }),
 ]);
 

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

@@ -1024,6 +1024,9 @@ export class SpanPresenter extends BasePresenter {
         filePath: lockedWorker?.lockedBy?.filePath ?? "",
       },
       run: {
+        // zod v4 types the run-context `context` (z.any) field as required; it was
+        // never populated here (optional under v3), so undefined preserves behavior.
+        context: undefined,
         id: run.friendlyId,
         createdAt: run.createdAt,
         tags: run.runTags,

apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx

@@ -1,5 +1,5 @@
 import { getFormProps, getInputProps, useForm } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import {
   ArrowUpCircleIcon,
   EnvelopeIcon,

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

@@ -1,11 +1,11 @@
 import { getFormProps, getInputProps, getSelectProps, useForm } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { HashtagIcon, LockClosedIcon } from "@heroicons/react/20/solid";
 import { Form, useActionData, useNavigate, useNavigation } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/router";
 import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
 import { SlackIcon } from "@trigger.dev/companyicons";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { InlineCode } from "~/components/code/InlineCode";
@@ -233,7 +233,6 @@ export default function Page() {
   const project = useProject();
   const environment = useEnvironment();
   const [currentAlertChannel, setCurrentAlertChannel] = useState<string | null>(option ?? "EMAIL");
-  const formRef = useRef<HTMLFormElement>(null);
 
   const [selectedSlackChannelValue, setSelectedSlackChannelValue] = useState<string | undefined>();
 
@@ -267,7 +266,7 @@ export default function Page() {
     if (navigation.state !== "idle") return;
     if (lastSubmission !== undefined) return;
 
-    formRef.current?.reset();
+    form.reset();
   }, [navigation.state, lastSubmission]);
 
   return (
@@ -281,7 +280,7 @@ export default function Page() {
     >
       <DialogContent>
         <DialogHeader>New alert</DialogHeader>
-        <Form ref={formRef} method="post" {...getFormProps(form)}>
+        <Form method="post" {...getFormProps(form)}>
           <Fieldset className="mt-2">
             <InputGroup fullWidth>
               <SegmentedControl

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

@@ -1,6 +1,6 @@
 import { getFormProps, useForm } from "@conform-to/react";
 import { GlobeLinesIcon } from "~/assets/icons/GlobeLinesIcon";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import {
   BellAlertIcon,
   BellSlashIcon,

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

@@ -1,5 +1,5 @@
 import { getFormProps, getInputProps, useForm } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { ArrowUpCircleIcon, CheckIcon, EnvelopeIcon, PlusIcon } from "@heroicons/react/20/solid";
 import { BookOpenIcon } from "@heroicons/react/24/solid";
 import { DialogClose } from "@radix-ui/react-dialog";

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

@@ -1,5 +1,5 @@
 import { getFormProps, getInputProps, useForm } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import {
   ArrowDownIcon,
   EnvelopeIcon,
@@ -480,7 +480,7 @@ function Upgradable({
               </TableRow>
             </TableBody>
           </Table>
-          <FormError id={formEnvironments.id}>{formEnvironments.errors}</FormError>
+          <FormError id={formEnvironments.errorId}>{formEnvironments.errors}</FormError>
         </div>
         <Form className="flex flex-col gap-2" method="post" {...getFormProps(form)} id="allocate">
           <input type="hidden" name="action" value="allocate" />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx

@@ -1,5 +1,5 @@
 import { getFormProps, useForm, type FieldMetadata, type FormMetadata } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import {
   LockClosedIcon,
   LockOpenIcon,
@@ -88,7 +88,7 @@ const schema = z.object({
 
       return;
     },
-    z.array(z.string(), { required_error: "At least one environment is required" })
+    z.array(z.string(), { error: "At least one environment is required" })
   ),
   variables: z.preprocess((i) => {
     if (!Array.isArray(i)) {
@@ -247,9 +247,9 @@ export default function Page() {
   const [selectedEnvironmentIds, setSelectedEnvironmentIds] = useState<Set<string>>(new Set());
   const [selectedBranchId, setSelectedBranchId] = useState<string | undefined>(undefined);
 
-  // TODO for no we only support branch-specific env vars for Preview environments
-  // Mostly to keep the UX for setting consistent env-vars across Dev/Staging/Prod easier
-  const previewBranches = environments.filter(
+  // TODO: we only support branch-specific env vars for Preview environments.
+  // This keeps setting consistent env vars across Dev/Staging/Prod easier.
+  const branchEnvironments = environments.filter(
     (env) => env.type === "PREVIEW" && env.parentEnvironmentId !== null
   );
   const nonBranchEnvironments = environments.filter((env) => env.parentEnvironmentId === null);
@@ -436,15 +436,15 @@ export default function Page() {
                     value={selectedBranchId ?? "all"}
                     setValue={handleBranchChange}
                     placeholder="All branches"
-                    items={[{ id: "all", branchName: "All branches" }, ...previewBranches]}
+                    items={[{ id: "all", branchName: "All branches" }, ...branchEnvironments]}
                     className="w-fit min-w-52"
                     filter={{
                       keys: [
                         (item) => item.branchName?.replace(/\//g, " ").replace(/_/g, " ") ?? "",
                       ],
                     }}
                     text={(val) =>
-                      val ? previewBranches.find((b) => b.id === val)?.branchName : null
+                      val ? branchEnvironments.find((b) => b.id === val)?.branchName : null
                     }
                     dropdownIcon
                   >

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

@@ -1,5 +1,5 @@
 import { getFormProps, getInputProps, useForm } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import {
   BookOpenIcon,
   InformationCircleIcon,

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

@@ -1,4 +1,4 @@
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { BellAlertIcon } from "@heroicons/react/20/solid";
 import { type MetaFunction, useFetcher, useRevalidator } from "@remix-run/react";
 import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from "@remix-run/server-runtime";

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

@@ -1,4 +1,4 @@
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { Outlet, useNavigate } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { useCallback } from "react";

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

@@ -160,7 +160,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   if (!parsed.success) {
     return typedjson(
       {
-        error: parsed.error.errors.map((e) => e.message).join(", "),
+        error: parsed.error.issues.map((e) => e.message).join(", "),
         rows: null,
         columns: null,
         stats: null,

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

@@ -1,4 +1,4 @@
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { useLocation } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";

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

@@ -1,5 +1,5 @@
 import { getFormProps, getInputProps, useForm } from "@conform-to/react";
-import { conformZodMessage, parseWithZod } from "@conform-to/zod";
+import { conformZodMessage, parseWithZod } from "@conform-to/zod/v4";
 import { ExclamationTriangleIcon, FolderIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";

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

@@ -1,5 +1,5 @@
 import { getFormProps, getInputProps, useForm } from "@conform-to/react";
-import { parseWithZod } from "@conform-to/zod";
+import { parseWithZod } from "@conform-to/zod/v4";
 import { Form, useActionData, useNavigation, useSearchParams } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";
 import React, { useCallback, useEffect, useRef, useState } from "react";