feat: multi dev branches

.changeset/dev-branches.md

@@ -0,0 +1,6 @@
+---
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Add support for dev branches to the webapp and CLI. This allows humans (and agents) to run multiple local dev servers simultaneously, with a separate dashboard for each one.

apps/webapp/app/components/BlankStatePanels.tsx

@@ -22,7 +22,8 @@ import { useFeatures } from "~/hooks/useFeatures";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { type MinimumEnvironment } from "~/presenters/SelectBestEnvironmentPresenter.server";
-import { NewBranchPanel } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route";
+import { type BranchableEnvironmentToken } from "~/utils/branchableEnvironment";
+import { NewBranchPanel } from "~/routes/resources.branches.create";
 import { GitHubSettingsPanel } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github";
 import {
   docsPath,
@@ -488,24 +489,27 @@ export function BranchesNoBranchableEnvironment({ showSelfServe }: { showSelfSer
 }
 
 export function BranchesNoBranches({
-  parentEnvironment,
+  env,
   limits,
   canUpgrade,
   showSelfServe,
 }: {
-  parentEnvironment: { id: string };
+  env: BranchableEnvironmentToken;
   limits: { used: number; limit: number };
   canUpgrade: boolean;
   showSelfServe: boolean;
 }) {
   const organization = useOrganization();
 
+  const envTextClassName = env === "preview" ? "text-preview" : "text-dev";
+  const branchesLabel = env === "preview" ? "preview branches" : "dev branches";
+
   if (limits.used >= limits.limit) {
     return (
       <InfoPanel
-        title="Upgrade to get preview branches"
+        title={`Upgrade to get ${branchesLabel}`}
         icon={BranchEnvironmentIconSmall}
-        iconClassName="text-preview"
+        iconClassName={envTextClassName}
         panelClassName="max-w-full"
         accessory={
           showSelfServe && canUpgrade ? (
@@ -536,7 +540,7 @@ export function BranchesNoBranches({
     <InfoPanel
       title="Create your first branch"
       icon={BranchEnvironmentIconSmall}
-      iconClassName="text-preview"
+      iconClassName={envTextClassName}
       panelClassName="max-w-full"
       accessory={
         <NewBranchPanel
@@ -549,7 +553,7 @@ export function BranchesNoBranches({
               New branch
             </Button>
           }
-          parentEnvironment={parentEnvironment}
+          env={env}
         />
       }
     >

apps/webapp/app/components/DevPresence.tsx

@@ -42,7 +42,7 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
 
   // Only subscribe to event source if enabled is true
   const streamedEvents = useEventSource(
-    `/resources/orgs/${organization.slug}/projects/${project.slug}/dev/presence`,
+    `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/presence`,
     {
       event: "presence",
       disabled: !enabled,

apps/webapp/app/components/environments/EnvironmentLabel.tsx

@@ -178,7 +178,7 @@ export function environmentFullTitle(environment: Environment) {
   }
 }
 
-export function environmentTextClassName(environment: Environment) {
+export function environmentTextClassName(environment: { type: Environment["type"] }) {
   switch (environment.type) {
     case "PRODUCTION":
       return "text-prod";

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -1,4 +1,6 @@
 import { ChevronRightIcon, Cog8ToothIcon } from "@heroicons/react/20/solid";
+import { DEFAULT_DEV_BRANCH } from "@trigger.dev/core/v3/utils/gitBranch";
+import { isBranchableEnvironment } from "~/utils/branchableEnvironment";
 import { DropdownIcon } from "~/assets/icons/DropdownIcon";
 import { useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState } from "react";
@@ -9,8 +11,8 @@ import { useFeatures } from "~/hooks/useFeatures";
 import { useOrganization, type MatchedOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
-import { branchesPath, docsPath, v3BillingPath } from "~/utils/pathBuilder";
-import { EnvironmentCombo, EnvironmentIcon, EnvironmentLabel, environmentFullTitle } from "../environments/EnvironmentLabel";
+import { branchesPath, branchesDevPath, docsPath, v3BillingPath } from "~/utils/pathBuilder";
+import { EnvironmentCombo, EnvironmentIcon, EnvironmentLabel, environmentFullTitle, environmentTextClassName } from "../environments/EnvironmentLabel";
 import { ButtonContent } from "../primitives/Buttons";
 import { Header2 } from "../primitives/Headers";
 import { Paragraph } from "../primitives/Paragraph";
@@ -50,6 +52,7 @@ export function EnvironmentSelector({
   }, [navigation.location?.pathname]);
 
   const hasStaging = project.environments.some((env) => env.type === "STAGING");
+  const devBranchesEnabled = Boolean(organization.featureFlags?.devBranchesEnabled);
 
   return (
     <Popover onOpenChange={(open) => setIsMenuOpen(open)} open={isMenuOpen}>
@@ -104,34 +107,40 @@ export function EnvironmentSelector({
       >
         <div className="flex flex-col gap-1 p-1">
           {project.environments
-            .filter((env) => env.branchName === null)
+            .filter((env) => env.parentEnvironmentId === null)
             .map((env) => {
-              switch (env.isBranchableEnvironment) {
-                case true: {
-                  const branchEnvironments = project.environments.filter(
-                    (e) => e.parentEnvironmentId === env.id
-                  );
-                  return (
-                    <Branches
-                      key={env.id}
-                      parentEnvironment={env}
-                      branchEnvironments={branchEnvironments}
-                      currentEnvironment={environment}
-                    />
-                  );
-                }
-                case false:
-                  return (
-                    <PopoverMenuItem
-                      key={env.id}
-                      to={urlForEnvironment(env)}
-                      title={
-                        <EnvironmentCombo environment={env} className="mx-auto grow text-2sm" />
-                      }
-                      isSelected={env.id === environment.id}
-                    />
-                  );
+              // DEVELOPMENT is only branchable in the UI when the org has the
+              // multi-branch dev flag on. Without it, dev renders as a plain
+              // selector button (the original behavior). PREVIEW is unaffected.
+              const renderAsBranchable =
+                isBranchableEnvironment(env) &&
+                (env.type !== "DEVELOPMENT" || devBranchesEnabled);
+
+              if (renderAsBranchable) {
+                const branchEnvironments = project.environments.filter(
+                  (e) => e.parentEnvironmentId === env.id
+                );
+                const allBranchEnvironments = env.type === "DEVELOPMENT" ? [env, ...branchEnvironments] : branchEnvironments;
+                return (
+                  <Branches
+                    key={env.id}
+                    parentEnvironment={env}
+                    branchEnvironments={allBranchEnvironments}
+                    currentEnvironment={environment}
+                  />
+                );
               }
+
+              return (
+                <PopoverMenuItem
+                  key={env.id}
+                  to={urlForEnvironment(env)}
+                  title={
+                    <EnvironmentCombo environment={env} className="mx-auto grow text-2sm" />
+                  }
+                  isSelected={env.id === environment.id}
+                />
+              );
             })}
         </div>
         {!hasStaging && isManagedCloud && (
@@ -226,7 +235,14 @@ function Branches({
       ? "no-active-branches"
       : "has-branches";
 
-  const currentBranchIsArchived = environment.archivedAt !== null;
+  // Only surface the active environment's archived-branch item in the submenu it
+  // actually belongs to. Both Development and Preview render this component, so
+  // without the parent check an archived dev branch would leak into the Preview
+  // submenu (and vice-versa).
+  const currentBranchIsArchived =
+    environment.archivedAt !== null && environment.parentEnvironmentId === parentEnvironment.id;
+
+  const envTextClassName = environmentTextClassName(parentEnvironment);
 
   return (
     <Popover onOpenChange={(open) => setMenuOpen(open)} open={isMenuOpen}>
@@ -260,11 +276,11 @@ function Branches({
                 to={urlForEnvironment(environment)}
                 title={
                   <>
-                    <span className="block w-full text-preview">{environment.branchName}</span>
+                    <span className={cn("block w-full", envTextClassName)}>{environment.branchName}</span>
                     <Badge variant="extra-small">Archived</Badge>
                   </>
                 }
-                icon={<BranchEnvironmentIconSmall className="size-4 shrink-0 text-preview" />}
+                icon={<BranchEnvironmentIconSmall className={cn("size-4 shrink-0", envTextClassName)} />}
                 isSelected={environment.id === currentEnvironment.id}
               />
             )}
@@ -276,16 +292,16 @@ function Branches({
                     <PopoverMenuItem
                       key={env.id}
                       to={urlForEnvironment(env)}
-                      title={<span className="block w-full text-preview">{env.branchName}</span>}
-                      icon={<BranchEnvironmentIconSmall className="size-4 shrink-0 text-preview" />}
+                      title={<span className={cn("block w-full", envTextClassName)}>{env.branchName ?? DEFAULT_DEV_BRANCH}</span>}
+                      icon={<BranchEnvironmentIconSmall className={cn("size-4 shrink-0", envTextClassName)} />}
                       isSelected={env.id === currentEnvironment.id}
                     />
                   ))}
               </>
             ) : state === "no-branches" ? (
               <div className="flex max-w-sm flex-col gap-1 p-2">
                 <div className="flex items-center gap-1">
-                  <BranchEnvironmentIconSmall className="size-4 text-preview" />
+                  <BranchEnvironmentIconSmall className={cn("size-4", envTextClassName)} />
                   <Header2>Create your first branch</Header2>
                 </div>
                 <Paragraph spacing variant="small">
@@ -305,12 +321,21 @@ function Branches({
             )}
           </div>
           <div className="border-t border-charcoal-700 p-1">
-            <PopoverMenuItem
-              to={branchesPath(organization, project, environment)}
-              title="Manage branches"
-              icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
-              leadingIconClassName="text-text-dimmed"
-            />
+            {parentEnvironment.type === "DEVELOPMENT" ? (
+              <PopoverMenuItem
+                to={branchesDevPath(organization, project, environment)}
+                title="Manage dev branches"
+                icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
+                leadingIconClassName="text-text-dimmed"
+              />
+            ) : (
+              <PopoverMenuItem
+                to={branchesPath(organization, project, environment)}
+                title="Manage preview branches"
+                icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
+                leadingIconClassName="text-text-dimmed"
+              />
+            )}
           </div>
         </PopoverContent>
       </div>

apps/webapp/app/db.server.ts

@@ -255,8 +255,11 @@ function getClient() {
     queryPerformanceMonitor.onQuery("writer", log);
   });
 
-  // connect eagerly
-  client.$connect();
+  // Connect eagerly, catch any exception and log
+  // Prisma will connect on use anyway
+  client.$connect().catch((error) => {
+    logger.error("Failed to eagerly connect prisma client (writer)", { error });
+  });
 
   console.log(`🔌 prisma client connected`);
 
@@ -378,8 +381,11 @@ function getReplicaClient() {
     queryPerformanceMonitor.onQuery("replica", log);
   });
 
-  // connect eagerly
-  replicaClient.$connect();
+  // Connect eagerly, catch any exception and log
+  // Prisma will connect on use anyway
+  replicaClient.$connect().catch((error) => {
+    logger.error("Failed to eagerly connect prisma client (replica)", { error });
+  });
 
   console.log(`🔌 read replica connected`);
 

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

@@ -215,7 +215,9 @@ export async function acceptInvite({
         organization: invite.organization,
         project,
         type: "DEVELOPMENT",
-        isBranchableEnvironment: false,
+        // We set this true but no backfill (yet!?) so never used
+        // for dev environments
+        isBranchableEnvironment: true,
         member,
         prismaClient: tx,
       });

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

@@ -126,7 +126,9 @@ export async function createProject(
       organization,
       project,
       type: "DEVELOPMENT",
-      isBranchableEnvironment: false,
+      // We set this true but no backfill (yet!?) so never used
+      // for dev environments
+      isBranchableEnvironment: true,
       member,
     });
   }

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

@@ -4,7 +4,7 @@ import { $replica, prisma } from "~/db.server";
 import { runStore } from "~/v3/runStore.server";
 import { logger } from "~/services/logger.server";
 import { getUsername } from "~/utils/username";
-import { sanitizeBranchName } from "@trigger.dev/core/v3/utils/gitBranch";
+import { isDefaultDevBranch, sanitizeBranchName } from "@trigger.dev/core/v3/utils/gitBranch";
 
 export type { RuntimeEnvironment };
 
@@ -94,21 +94,24 @@ export function toAuthenticated(
 
 export async function findEnvironmentByApiKey(
   apiKey: string,
-  branchName: string | undefined
+  branchName: string | undefined,
+  tx: PrismaClientOrTransaction = $replica
 ): Promise<AuthenticatedEnvironment | null> {
+  const branch = sanitizeBranchName(branchName) ?? undefined;
+
   const include = {
     ...authIncludeBase,
-    childEnvironments: branchName
+    childEnvironments: branch
       ? {
-          where: {
-            branchName: sanitizeBranchName(branchName),
-            archivedAt: null,
-          },
-        }
+        where: {
+          branchName: branch,
+          archivedAt: null,
+        },
+      }
       : undefined,
   } satisfies Prisma.RuntimeEnvironmentInclude;
 
-  let environment = await $replica.runtimeEnvironment.findFirst({
+  let environment = await tx.runtimeEnvironment.findFirst({
     where: {
       apiKey,
     },
@@ -117,7 +120,7 @@ export async function findEnvironmentByApiKey(
 
   // Fall back to keys that were revoked within the grace window
   if (!environment) {
-    const revokedApiKey = await $replica.revokedApiKey.findFirst({
+    const revokedApiKey = await tx.revokedApiKey.findFirst({
       where: {
         apiKey,
         expiresAt: { gt: new Date() },
@@ -140,7 +143,7 @@ export async function findEnvironmentByApiKey(
   }
 
   if (environment.type === "PREVIEW") {
-    if (!branchName) {
+    if (!branch) {
       logger.warn("findEnvironmentByApiKey(): Preview env with no branch name provided", {
         environmentId: environment.id,
       });
@@ -163,6 +166,25 @@ export async function findEnvironmentByApiKey(
     return null;
   }
 
+  // If there is a named DEV branch (other than default), return it
+  if (environment.type === "DEVELOPMENT" && branch !== undefined && !isDefaultDevBranch(branch)) {
+    const childEnvironment = environment.childEnvironments.at(0);
+
+    if (childEnvironment) {
+      return toAuthenticated({
+        ...childEnvironment,
+        apiKey: environment.apiKey,
+        orgMember: environment.orgMember,
+        organization: environment.organization,
+        project: environment.project,
+      });
+    }
+
+    //A branch was specified but no child environment was found
+    return null;
+
+  }
+
   return toAuthenticated(environment);
 }