From e80cd3d850e16b4bf37794c349a118d324959369 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 29 Aug 2025 14:57:05 +0100
Subject: [PATCH 1/6] Improve styling of onboarding pricing plans

---
 ...ces.orgs.$organizationSlug.select-plan.tsx | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 8299d775f2..de143a7ab5 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -338,7 +338,7 @@ export function TierFree({
                 <div className="my-6">
                   <Button
                     type="button"
-                    variant="tertiary/large"
+                    variant="secondary/large"
                     fullWidth
                     className="text-md font-medium"
                     disabled={isLoading}
@@ -384,7 +384,7 @@ export function TierFree({
             <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen} key="cancel">
               <DialogTrigger asChild>
                 <div className="my-6">
-                  <Button variant="tertiary/large" fullWidth className="text-md font-medium">
+                  <Button variant="secondary/large" fullWidth className="text-md font-medium">
                     {`Downgrade to ${plan.title}`}
                   </Button>
                 </div>
@@ -445,7 +445,7 @@ export function TierFree({
                     </div>
                   </div>
                   <DialogFooter className="mt-2">
-                    <Button variant="tertiary/medium" onClick={() => setIsDialogOpen(false)}>
+                    <Button variant="secondary/medium" onClick={() => setIsDialogOpen(false)}>
                       Dismiss
                     </Button>
                     <Button
@@ -465,7 +465,7 @@ export function TierFree({
               <input type="hidden" name="type" value="free" />
               <input type="hidden" name="callerPath" value={location.pathname} />
               <Button
-                variant="tertiary/large"
+                variant="secondary/large"
                 type="submit"
                 form="subscribe-verified"
                 fullWidth
@@ -552,7 +552,7 @@ export function TierHobby({
         subscription.plan.code !== plan.code ? (
           <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen} key="downgrade">
             <DialogTrigger asChild>
-              <Button variant="tertiary/large" fullWidth className="text-md font-medium">
+              <Button variant="secondary/large" fullWidth className="text-md font-medium">
                 {`Downgrade to ${plan.title}`}
               </Button>
             </DialogTrigger>
@@ -568,11 +568,11 @@ export function TierHobby({
                 </Paragraph>
               </div>
               <DialogFooter>
-                <Button variant="tertiary/medium" onClick={() => setIsDialogOpen(false)}>
+                <Button variant="secondary/medium" onClick={() => setIsDialogOpen(false)}>
                   Dismiss
                 </Button>
                 <Button
-                  variant="tertiary/medium"
+                  variant="secondary/medium"
                   disabled={isLoading}
                   LeadingIcon={isLoading ? () => <Spinner color="white" /> : undefined}
                   form="subscribe-hobby"
@@ -584,7 +584,7 @@ export function TierHobby({
           </Dialog>
         ) : (
           <Button
-            variant={isHighlighted ? "primary/large" : "tertiary/large"}
+            variant={isHighlighted ? "primary/large" : "secondary/large"}
             fullWidth
             className="text-md font-medium"
             form="subscribe-hobby"
@@ -666,7 +666,7 @@ export function TierPro({
           subscription.canceledAt === undefined ? (
             <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen} key="upgrade">
               <DialogTrigger asChild>
-                <Button variant="tertiary/large" fullWidth className="text-md font-medium">
+                <Button variant="secondary/large" fullWidth className="text-md font-medium">
                   {`Upgrade to ${plan.title}`}
                 </Button>
               </DialogTrigger>
@@ -682,7 +682,7 @@ export function TierPro({
                   </Paragraph>
                 </div>
                 <DialogFooter>
-                  <Button variant="tertiary/medium" onClick={() => setIsDialogOpen(false)}>
+                  <Button variant="secondary/medium" onClick={() => setIsDialogOpen(false)}>
                     Dismiss
                   </Button>
                   <Button
@@ -698,7 +698,7 @@ export function TierPro({
             </Dialog>
           ) : (
             <Button
-              variant="tertiary/large"
+              variant="secondary/large"
               fullWidth
               form="subscribe-pro"
               className="text-md font-medium"
@@ -788,11 +788,11 @@ export function TierEnterprise() {
           <Feedback
             defaultValue="enterprise"
             button={
-              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded bg-tertiary px-8 text-base font-medium transition hover:bg-charcoal-600">
+              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded border border-charcoal-600 bg-tertiary px-8 text-base font-medium transition hover:border-charcoal-550 hover:bg-charcoal-600">
                 <span className="text-center text-text-bright">Contact us</span>
               </div>
             }
-          ></Feedback>
+          />
         </div>
       </div>
     </TierContainer>
@@ -812,7 +812,7 @@ function TierContainer({
     <div
       className={cn(
         "flex w-full min-w-[16rem] flex-col p-6",
-        isHighlighted ? "border border-primary" : "border border-grid-dimmed",
+        isHighlighted ? "border border-indigo-500" : "border border-grid-dimmed",
         className
       )}
     >
@@ -843,7 +843,10 @@ function PricingHeader({
   return (
     <div className="flex flex-col gap-2">
       <h2
-        className={cn("text-xl font-medium", isHighlighted ? "text-primary" : "text-text-dimmed")}
+        className={cn(
+          "text-xl font-medium",
+          isHighlighted ? "text-indigo-500" : "text-text-dimmed"
+        )}
       >
         {title}
       </h2>

From 9793c71fa258beab9452bd1883a758b4663b161f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 29 Aug 2025 14:57:11 +0100
Subject: [PATCH 2/6] type only import

---
 .../routes/_app.orgs.$organizationSlug_.select-plan/route.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
index 844c5d66ee..f1e2b1fca6 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { BackgroundWrapper } from "~/components/BackgroundWrapper";
 import { AppContainer } from "~/components/layout/AppLayout";

From c5bd14ed0f673da74b81dedca2813a6f01b44a28 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 29 Aug 2025 16:02:46 +0100
Subject: [PATCH 3/6] Improve the onboarding plan page so it scrolls on smaller
 screens

---
 .../route.tsx                                 | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
index f1e2b1fca6..b5f47e55c3 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
@@ -1,7 +1,7 @@
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { BackgroundWrapper } from "~/components/BackgroundWrapper";
-import { AppContainer } from "~/components/layout/AppLayout";
+import { AppContainer, MainBody, PageBody } from "~/components/layout/AppLayout";
 import { Header1 } from "~/components/primitives/Headers";
 import { prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
@@ -49,22 +49,24 @@ export default function ChoosePlanPage() {
     useTypedLoaderData<typeof loader>();
 
   return (
-    <AppContainer className="bg-charcoal-900">
-      <BackgroundWrapper>
-        <div className="mx-auto flex h-full w-full max-w-[80rem] flex-col items-center justify-center gap-8 p-3">
-          <Header1 className="text-center">Subscribe for full access</Header1>
-          <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
-            <PricingPlans
-              plans={plans}
-              subscription={v3Subscription}
-              organizationSlug={organizationSlug}
-              hasPromotedPlan
-              showGithubVerificationBadge
-              periodEnd={periodEnd}
-            />
+    <BackgroundWrapper>
+      <AppContainer>
+        <PageBody>
+          <div className="mx-auto mt-4 flex h-fit min-h-full max-w-[80rem] flex-col items-center justify-center gap-8 lg:mt-0">
+            <Header1 className="text-center">Subscribe for full access</Header1>
+            <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+              <PricingPlans
+                plans={plans}
+                subscription={v3Subscription}
+                organizationSlug={organizationSlug}
+                hasPromotedPlan
+                showGithubVerificationBadge
+                periodEnd={periodEnd}
+              />
+            </div>
           </div>
-        </div>
-      </BackgroundWrapper>
-    </AppContainer>
+        </PageBody>
+      </AppContainer>
+    </BackgroundWrapper>
   );
 }

From 97e4e9748d66b0e41d2c0559e77dd26cc712c5bb Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 29 Aug 2025 16:03:15 +0100
Subject: [PATCH 4/6] Adds additional pricing for bolt-ons for the Pro plan

---
 ...ces.orgs.$organizationSlug.select-plan.tsx | 166 ++++++++++++------
 1 file changed, 116 insertions(+), 50 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index de143a7ab5..df5d00435f 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -171,6 +171,10 @@ const pricingDefinitions = {
     title: "Concurrent runs",
     content: "The number of runs that can be executed at the same time.",
   },
+  additionalConcurrency: {
+    title: "Additional concurrency",
+    content: "Then $50/month per 50",
+  },
   taskRun: {
     title: "Task runs",
     content: "A single execution of a task.",
@@ -188,6 +192,10 @@ const pricingDefinitions = {
     title: "Schedules",
     content: "You can attach recurring schedules to tasks using cron syntax.",
   },
+  additionalSchedules: {
+    title: "Additional schedules",
+    content: "Then $10/month per 1,000",
+  },
   alerts: {
     title: "Alert destination",
     content:
@@ -198,9 +206,22 @@ const pricingDefinitions = {
     content:
       "Realtime allows you to send the live status and data from your runs to your frontend. This is the number of simultaneous Realtime connections that can be made.",
   },
+  additionalRealtimeConnections: {
+    title: "Additional Realtime connections",
+    content: "Then $10/month per 100",
+  },
+  additionalSeats: {
+    title: "Additional seats",
+    content: "Then $20/month per seat",
+  },
   branches: {
     title: "Branches",
-    content: "The number of preview branches that can be active (you can archive old ones).",
+    content:
+      "Preview branches allow you to test changes before deploying to production. You can have a limited number active at once (but can archive old ones).",
+  },
+  additionalBranches: {
+    title: "Additional branches",
+    content: "Then $10/month per branch",
   },
 };
 
@@ -507,7 +528,7 @@ export function TierFree({
             <LogRetention limits={plan.limits} />
             <SupportLevel limits={plan.limits} />
             <Alerts limits={plan.limits} />
-            <RealtimeConnecurrency limits={plan.limits} />
+            <RealtimeConcurrency limits={plan.limits} />
           </ul>
         </>
       )}
@@ -624,7 +645,7 @@ export function TierHobby({
         <LogRetention limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
-        <RealtimeConnecurrency limits={plan.limits} />
+        <RealtimeConcurrency limits={plan.limits} />
       </ul>
     </TierContainer>
   );
@@ -724,7 +745,9 @@ export function TierPro({
         </div>
       </Form>
       <ul className="flex flex-col gap-2.5">
-        <ConcurrentRuns limits={plan.limits} />
+        <ConcurrentRuns limits={plan.limits}>
+          {pricingDefinitions.additionalConcurrency.content}
+        </ConcurrentRuns>
         <FeatureItem checked>
           Unlimited{" "}
           <DefinitionTip
@@ -734,14 +757,16 @@ export function TierPro({
             tasks
           </DefinitionTip>
         </FeatureItem>
-        <TeamMembers limits={plan.limits} />
+        <TeamMembers limits={plan.limits}>{pricingDefinitions.additionalSeats.content}</TeamMembers>
         <Environments limits={plan.limits} />
-        <Branches limits={plan.limits} />
-        <Schedules limits={plan.limits} />
+        <Branches limits={plan.limits}>{pricingDefinitions.additionalBranches.content}</Branches>
+        <Schedules limits={plan.limits}>{pricingDefinitions.additionalSchedules.content}</Schedules>
         <LogRetention limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
-        <RealtimeConnecurrency limits={plan.limits} />
+        <RealtimeConcurrency limits={plan.limits}>
+          {pricingDefinitions.additionalRealtimeConnections.content}
+        </RealtimeConcurrency>
       </ul>
     </TierContainer>
   );
@@ -902,16 +927,16 @@ function FeatureItem({
   children: React.ReactNode;
 }) {
   return (
-    <li className="flex items-center gap-2">
+    <li className="flex items-start gap-2">
       {checked ? (
         <CheckIcon
           className={cn(
-            "size-4 min-w-4",
+            "mt-0.5 size-4 min-w-4",
             checkedColor === "primary" ? "text-primary" : "text-text-bright"
           )}
         />
       ) : (
-        <XMarkIcon className="size-4 min-w-4 text-charcoal-500" />
+        <XMarkIcon className="mt-0.5 size-4 min-w-4 text-charcoal-500" />
       )}
       <div
         className={cn(
@@ -925,26 +950,42 @@ function FeatureItem({
   );
 }
 
-function ConcurrentRuns({ limits }: { limits: Limits }) {
+function ConcurrentRuns({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.concurrentRuns.number}
-      {limits.concurrentRuns.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.concurrentRuns.title}
-        content={pricingDefinitions.concurrentRuns.content}
-      >
-        concurrent runs
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.concurrentRuns.canExceed ? (
+            <>
+              {limits.concurrentRuns.number}
+              {"+"}
+            </>
+          ) : (
+            <>{limits.concurrentRuns.number} </>
+          )}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.concurrentRuns.title}
+            content={pricingDefinitions.concurrentRuns.content}
+          >
+            concurrent runs
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
 
-function TeamMembers({ limits }: { limits: Limits }) {
+function TeamMembers({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.teamMembers.number}
-      {limits.concurrentRuns.canExceed ? "+" : ""} team members
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.teamMembers.number}
+          {limits.teamMembers.canExceed ? "+" : ""} team members
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
@@ -963,17 +1004,22 @@ function Environments({ limits }: { limits: Limits }) {
   );
 }
 
-function Schedules({ limits }: { limits: Limits }) {
+function Schedules({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.schedules.number}
-      {limits.schedules.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.schedules.title}
-        content={pricingDefinitions.schedules.content}
-      >
-        schedules
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.schedules.number}
+          {limits.schedules.canExceed ? "+" : ""}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.schedules.title}
+            content={pricingDefinitions.schedules.content}
+          >
+            schedules
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
@@ -1018,32 +1064,52 @@ function Alerts({ limits }: { limits: Limits }) {
   );
 }
 
-function RealtimeConnecurrency({ limits }: { limits: Limits }) {
+function RealtimeConcurrency({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.realtimeConcurrentConnections.number}
-      {limits.realtimeConcurrentConnections.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.realtime.title}
-        content={pricingDefinitions.realtime.content}
-      >
-        concurrent Realtime connections
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-start gap-1">
+          {limits.realtimeConcurrentConnections.canExceed ? (
+            <>
+              {limits.realtimeConcurrentConnections.number}
+              {"+"}
+            </>
+          ) : (
+            <>{limits.realtimeConcurrentConnections.number} </>
+          )}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.realtime.title}
+            content={pricingDefinitions.realtime.content}
+          >
+            concurrent Realtime connections
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
 
-function Branches({ limits }: { limits: Limits }) {
+function Branches({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked={limits.branches.number > 0}>
-      {limits.branches.number}
-      {limits.branches.canExceed ? "+ " : " "}
-      <DefinitionTip
-        title={pricingDefinitions.branches.title}
-        content={pricingDefinitions.branches.content}
-      >
-        preview branches
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.branches.number > 0 && (
+            <>
+              {limits.branches.number}
+              {limits.branches.canExceed ? "+ " : " "}
+            </>
+          )}
+          <DefinitionTip
+            title={pricingDefinitions.branches.title}
+            content={pricingDefinitions.branches.content}
+          >
+            {limits.branches.number > 0 ? "preview" : "Preview"} branches
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }

From 89b30b12d8db8f92be49a1dc3737fdced3e4e7cc Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 29 Aug 2025 16:59:21 +0100
Subject: [PATCH 5/6] fix text wrapping issue

---
 apps/webapp/app/components/DefinitionTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/DefinitionTooltip.tsx b/apps/webapp/app/components/DefinitionTooltip.tsx
index 0e2d4d4363..5bb3a71399 100644
--- a/apps/webapp/app/components/DefinitionTooltip.tsx
+++ b/apps/webapp/app/components/DefinitionTooltip.tsx
@@ -14,7 +14,7 @@ export function DefinitionTip({
   return (
     <TooltipProvider>
       <Tooltip disableHoverableContent>
-        <TooltipTrigger>
+        <TooltipTrigger className="text-left">
           <span className="cursor-default underline decoration-charcoal-500 decoration-dashed underline-offset-4 transition hover:decoration-charcoal-400">
             {children}
           </span>

From ec2f14e66621e5e27d6eb19a25619f55b97aa6af Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 29 Aug 2025 17:01:38 +0100
Subject: [PATCH 6/6] add bg color back in

---
 .../route.tsx                                        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
index b5f47e55c3..37401263c5 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
@@ -49,9 +49,9 @@ export default function ChoosePlanPage() {
     useTypedLoaderData<typeof loader>();
 
   return (
-    <BackgroundWrapper>
-      <AppContainer>
-        <PageBody>
+    <AppContainer>
+      <PageBody className="bg-charcoal-900">
+        <BackgroundWrapper>
           <div className="mx-auto mt-4 flex h-fit min-h-full max-w-[80rem] flex-col items-center justify-center gap-8 lg:mt-0">
             <Header1 className="text-center">Subscribe for full access</Header1>
             <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
@@ -65,8 +65,8 @@ export default function ChoosePlanPage() {
               />
             </div>
           </div>
-        </PageBody>
-      </AppContainer>
-    </BackgroundWrapper>
+        </BackgroundWrapper>
+      </PageBody>
+    </AppContainer>
   );
 }