Merge branch 'main' into shortcut-improvements

.env.example

@@ -31,10 +31,32 @@ DEV_OTEL_BATCH_PROCESSING_ENABLED="0"
 # AUTH_GITHUB_CLIENT_ID=
 # AUTH_GITHUB_CLIENT_SECRET=
 
-# Resend is an email service used for signing in to Trigger.dev via a Magic Link.
-# Emails will print to the console if you leave these commented out
+# Configure an email transport to allow users to sign in to Trigger.dev via a Magic Link.
+# If none are configured, emails will print to the console instead.
+# Uncomment one of the following blocks to allow delivery of
+
+# Resend
 ### Visit https://resend.com, create an account and get your API key. Then insert it below along with your From and Reply To email addresses. Visit https://resend.com/docs for more information.
-# RESEND_API_KEY=<api_key>
+# EMAIL_TRANSPORT=resend
+# FROM_EMAIL=
+# REPLY_TO_EMAIL=
+# RESEND_API_KEY=
+
+# Generic SMTP
+### Enter the configuration provided by your mail provider. Visit https://nodemailer.com/smtp/ for more information
+### SMTP_SECURE = false will use STARTTLS when connecting to a server that supports it (usually port 587)
+# EMAIL_TRANSPORT=smtp
+# FROM_EMAIL=
+# REPLY_TO_EMAIL=
+# SMTP_HOST=
+# SMTP_PORT=587
+# SMTP_SECURE=false
+# SMTP_USER=
+# SMTP_PASSWORD=
+
+# AWS Simple Email Service
+### Authentication is configured using the default Node.JS credentials provider chain (https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromnodeproviderchain)
+# EMAIL_TRANSPORT=aws-ses
 # FROM_EMAIL=
 # REPLY_TO_EMAIL=
 

apps/webapp/app/components/SetupCommands.tsx

@@ -1,3 +1,5 @@
+import { createContext, useContext, useState } from "react";
+import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useProject } from "~/hooks/useProject";
 import { InlineCode } from "./code/InlineCode";
 import {
@@ -8,7 +10,31 @@ import {
 } from "./primitives/ClientTabs";
 import { ClipboardField } from "./primitives/ClipboardField";
 import { Paragraph } from "./primitives/Paragraph";
-import { useAppOrigin } from "~/hooks/useAppOrigin";
+
+type PackageManagerContextType = {
+  activePackageManager: string;
+  setActivePackageManager: (value: string) => void;
+};
+
+const PackageManagerContext = createContext<PackageManagerContextType | undefined>(undefined);
+
+export function PackageManagerProvider({ children }: { children: React.ReactNode }) {
+  const [activePackageManager, setActivePackageManager] = useState("npm");
+
+  return (
+    <PackageManagerContext.Provider value={{ activePackageManager, setActivePackageManager }}>
+      {children}
+    </PackageManagerContext.Provider>
+  );
+}
+
+function usePackageManager() {
+  const context = useContext(PackageManagerContext);
+  if (context === undefined) {
+    throw new Error("usePackageManager must be used within a PackageManagerProvider");
+  }
+  return context;
+}
 
 export function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey: string }) {
   return (
@@ -131,7 +157,6 @@ export function TriggerDevStep({ extra }: { extra?: string }) {
   );
 }
 
-// Trigger.dev version 3 setup commands
 const v3PackageTag = "latest";
 
 function getApiUrlArg() {
@@ -160,14 +185,19 @@ function getApiUrlArg() {
 export function InitCommandV3() {
   const project = useProject();
   const projectRef = project.ref;
-
   const apiUrlArg = getApiUrlArg();
 
   const initCommandParts = [`trigger.dev@${v3PackageTag}`, "init", `-p ${projectRef}`, apiUrlArg];
   const initCommand = initCommandParts.filter(Boolean).join(" ");
 
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
@@ -202,8 +232,14 @@ export function InitCommandV3() {
 }
 
 export function TriggerDevStepV3() {
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
@@ -238,8 +274,14 @@ export function TriggerDevStepV3() {
 }
 
 export function TriggerLoginStepV3() {
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>

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

@@ -5,7 +5,11 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "~/utils/cn";
 import { motion } from "framer-motion";
 
-const ClientTabs = TabsPrimitive.Root;
+const ClientTabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>((props, ref) => <TabsPrimitive.Root ref={ref} {...props} />);
+ClientTabs.displayName = TabsPrimitive.Root.displayName;
 
 const ClientTabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,

apps/webapp/app/env.server.ts

@@ -44,9 +44,16 @@ const EnvironmentSchema = z.object({
   HIGHLIGHT_PROJECT_ID: z.string().optional(),
   AUTH_GITHUB_CLIENT_ID: z.string().optional(),
   AUTH_GITHUB_CLIENT_SECRET: z.string().optional(),
+  EMAIL_TRANSPORT: z.enum(["resend", "smtp", "aws-ses"]).optional(),
   FROM_EMAIL: z.string().optional(),
   REPLY_TO_EMAIL: z.string().optional(),
   RESEND_API_KEY: z.string().optional(),
+  SMTP_HOST: z.string().optional(),
+  SMTP_PORT: z.coerce.number().optional(),
+  SMTP_SECURE: z.coerce.boolean().optional(),
+  SMTP_USER: z.string().optional(),
+  SMTP_PASSWORD:  z.string().optional(),
+
   PLAIN_API_KEY: z.string().optional(),
   RUNTIME_PLATFORM: z.enum(["docker-compose", "ecs", "local"]).default("local"),
   WORKER_SCHEMA: z.string().default("graphile_worker"),
@@ -195,8 +202,16 @@ const EnvironmentSchema = z.object({
   ORG_SLACK_INTEGRATION_CLIENT_SECRET: z.string().optional(),
 
   /** These enable the alerts feature in v3 */
+  ALERT_EMAIL_TRANSPORT: z.enum(["resend", "smtp", "aws-ses"]).optional(),
   ALERT_FROM_EMAIL: z.string().optional(),
+  ALERT_REPLY_TO_EMAIL: z.string().optional(),
   ALERT_RESEND_API_KEY: z.string().optional(),
+  ALERT_SMTP_HOST: z.string().optional(),
+  ALERT_SMTP_PORT: z.coerce.number().optional(),
+  ALERT_SMTP_SECURE: z.coerce.boolean().optional(),
+  ALERT_SMTP_USER: z.string().optional(),
+  ALERT_SMTP_PASSWORD:  z.string().optional(),
+
 
   MAX_SEQUENTIAL_INDEX_FAILURE_COUNT: z.coerce.number().default(96),
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx

@@ -20,7 +20,12 @@ import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { Feedback } from "~/components/Feedback";
-import { InitCommandV3, TriggerDevStepV3, TriggerLoginStepV3 } from "~/components/SetupCommands";
+import {
+  InitCommandV3,
+  PackageManagerProvider,
+  TriggerDevStepV3,
+  TriggerLoginStepV3,
+} from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
@@ -431,38 +436,40 @@ export default function Page() {
 
 function CreateTaskInstructions() {
   return (
-    <div>
-      <div className="mb-6 flex items-center justify-between border-b">
-        <Header1 spacing>Get setup in 3 minutes</Header1>
-        <div className="flex items-center gap-2">
-          <Feedback
-            button={
-              <Button variant="minimal/small" LeadingIcon={ChatBubbleLeftRightIcon}>
-                I'm stuck!
-              </Button>
-            }
-            defaultValue="help"
-          />
+    <PackageManagerProvider>
+      <div>
+        <div className="mb-6 flex items-center justify-between border-b">
+          <Header1 spacing>Get setup in 3 minutes</Header1>
+          <div className="flex items-center gap-2">
+            <Feedback
+              button={
+                <Button variant="minimal/small" LeadingIcon={ChatBubbleLeftRightIcon}>
+                  I'm stuck!
+                </Button>
+              }
+              defaultValue="help"
+            />
+          </div>
         </div>
+        <StepNumber stepNumber="1" title="Run the CLI 'init' command in an existing project" />
+        <StepContentContainer>
+          <InitCommandV3 />
+          <Paragraph spacing>
+            You'll notice a new folder in your project called{" "}
+            <InlineCode variant="small">trigger</InlineCode>. We've added a very simple example task
+            in here to help you get started.
+          </Paragraph>
+        </StepContentContainer>
+        <StepNumber stepNumber="2" title="Run the CLI 'dev' command" />
+        <StepContentContainer>
+          <TriggerDevStepV3 />
+        </StepContentContainer>
+        <StepNumber stepNumber="3" title="Waiting for tasks" displaySpinner />
+        <StepContentContainer>
+          <Paragraph>This page will automatically refresh.</Paragraph>
+        </StepContentContainer>
       </div>
-      <StepNumber stepNumber="1" title="Run the CLI 'init' command in your project" />
-      <StepContentContainer>
-        <InitCommandV3 />
-        <Paragraph spacing>
-          You’ll notice a new folder in your project called{" "}
-          <InlineCode variant="small">trigger</InlineCode>. We’ve added a very simple example task
-          in here to help you get started.
-        </Paragraph>
-      </StepContentContainer>
-      <StepNumber stepNumber="2" title="Run the CLI 'dev' command" />
-      <StepContentContainer>
-        <TriggerDevStepV3 />
-      </StepContentContainer>
-      <StepNumber stepNumber="3" title="Waiting for tasks" displaySpinner />
-      <StepContentContainer>
-        <Paragraph>This page will automatically refresh.</Paragraph>
-      </StepContentContainer>
-    </div>
+    </PackageManagerProvider>
   );
 }
 
@@ -484,26 +491,28 @@ function UserHasNoTasks() {
         }
       >
         {open ? (
-          <div>
-            <Header2 spacing>Get setup in 3 minutes</Header2>
-
-            <StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
-            <StepContentContainer>
-              <Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
-            </StepContentContainer>
-            <StepNumber stepNumber="2" title="Run the CLI 'login' command" />
-            <StepContentContainer>
-              <TriggerLoginStepV3 />
-            </StepContentContainer>
-            <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
-            <StepContentContainer>
-              <TriggerDevStepV3 />
-            </StepContentContainer>
-            <StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
-            <StepContentContainer>
-              <Paragraph>This page will automatically refresh.</Paragraph>
-            </StepContentContainer>
-          </div>
+          <PackageManagerProvider>
+            <div>
+              <Header2 spacing>Get setup in 3 minutes</Header2>
+
+              <StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
+              <StepContentContainer>
+                <Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
+              </StepContentContainer>
+              <StepNumber stepNumber="2" title="Run the CLI 'login' command" />
+              <StepContentContainer>
+                <TriggerLoginStepV3 />
+              </StepContentContainer>
+              <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
+              <StepContentContainer>
+                <TriggerDevStepV3 />
+              </StepContentContainer>
+              <StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
+              <StepContentContainer>
+                <Paragraph>This page will automatically refresh.</Paragraph>
+              </StepContentContainer>
+            </div>
+          </PackageManagerProvider>
         ) : (
           "Your DEV environment isn't setup yet."
         )}

apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx

@@ -661,19 +661,19 @@ export function TierPro({
                 </Button>
               </DialogTrigger>
               <DialogContent className="sm:max-w-md">
-                <DialogHeader>Upgrade plan?</DialogHeader>
+                <DialogHeader>Upgrade plan</DialogHeader>
                 <div className="mb-2 mt-4 flex items-start gap-3">
                   <span>
                     <ArrowUpCircleIcon className="size-12 text-primary" />
                   </span>
                   <Paragraph variant="base/bright" className="text-text-bright">
-                    Are you sure you want to upgrade to the Pro plan? You will be charged the new
-                    plan price for the remainder of this month on a pro rata basis.
+                    Upgrade to get instant access to all the Pro features. You will be charged the
+                    new plan price for the remainder of this month on a pro rata basis.
                   </Paragraph>
                 </div>
                 <DialogFooter>
                   <Button variant="tertiary/medium" onClick={() => setIsDialogOpen(false)}>
-                    Cancel
+                    Dismiss
                   </Button>
                   <Button
                     variant="primary/medium"