Usage billing alerts

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

@@ -30,8 +30,8 @@ export function UpgradePrompt() {
         <Icon icon={ExclamationCircleIcon} className="h-5 w-5 text-error" />
         <Paragraph variant="small" className="text-error">
           You have exceeded the monthly $
-          {(plan.v3Subscription?.plan?.limits.includedUsage ?? 500) / 100} free credits. No runs
-          will execute in Prod until{" "}
+          {(plan.v3Subscription?.plan?.limits.includedUsage ?? 500) / 100} free credits. Existing
+          runs will be queued and new runs won't be created until{" "}
           <DateTime date={nextMonth} includeTime={false} timeZone="utc" />, or you upgrade.
         </Paragraph>
       </div>

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

@@ -1,4 +1,5 @@
 import {
+  BellAlertIcon,
   ChartBarIcon,
   Cog8ToothIcon,
   CreditCardIcon,
@@ -12,6 +13,7 @@ import {
   organizationSettingsPath,
   organizationTeamPath,
   rootPath,
+  v3BillingAlertsPath,
   v3BillingPath,
   v3UsagePath,
 } from "~/utils/pathBuilder";
@@ -67,27 +69,34 @@ export function OrganizationSettingsSideMenu({
             <SideMenuHeader title="Organization" />
           </div>
           {isManagedCloud && (
-            <SideMenuItem
-              name="Usage"
-              icon={ChartBarIcon}
-              activeIconColor="text-indigo-500"
-              to={v3UsagePath(organization)}
-              data-action="usage"
-            />
-          )}
-          {isManagedCloud && (
-            <SideMenuItem
-              name="Billing"
-              icon={CreditCardIcon}
-              activeIconColor="text-emerald-500"
-              to={v3BillingPath(organization)}
-              data-action="billing"
-              badge={
-                currentPlan?.v3Subscription?.isPaying ? (
-                  <Badge variant="extra-small">{currentPlan?.v3Subscription?.plan?.title}</Badge>
-                ) : undefined
-              }
-            />
+            <>
+              <SideMenuItem
+                name="Usage"
+                icon={ChartBarIcon}
+                activeIconColor="text-indigo-500"
+                to={v3UsagePath(organization)}
+                data-action="usage"
+              />
+              <SideMenuItem
+                name="Billing"
+                icon={CreditCardIcon}
+                activeIconColor="text-emerald-500"
+                to={v3BillingPath(organization)}
+                data-action="billing"
+                badge={
+                  currentPlan?.v3Subscription?.isPaying ? (
+                    <Badge variant="extra-small">{currentPlan?.v3Subscription?.plan?.title}</Badge>
+                  ) : undefined
+                }
+              />
+              <SideMenuItem
+                name="Billing alerts"
+                icon={BellAlertIcon}
+                activeIconColor="text-rose-500"
+                to={v3BillingAlertsPath(organization)}
+                data-action="billing-alerts"
+              />
+            </>
           )}
           <SideMenuItem
             name="Team"

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

@@ -7,7 +7,7 @@ const containerBase =
   "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-charcoal-650 has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-1 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
 
 const inputBase =
-  "h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none";
+  "h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:m-0 [&]:[-moz-appearance:textfield]";
 
 const variants = {
   large: {

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

@@ -8,6 +8,7 @@ export type Environment = {
   queued: number;
   concurrencyLimit: number;
   burstFactor: number;
+  runsEnabled: boolean;
 };
 
 export class EnvironmentQueuePresenter extends BasePresenter {
@@ -23,11 +24,25 @@ export class EnvironmentQueuePresenter extends BasePresenter {
     const running = (engineV1Executing ?? 0) + (engineV2Executing ?? 0);
     const queued = (engineV1Queued ?? 0) + (engineV2Queued ?? 0);
 
+    const organization = await this._replica.organization.findFirst({
+      where: {
+        id: environment.organizationId,
+      },
+      select: {
+        runsEnabled: true,
+      },
+    });
+
+    if (!organization) {
+      throw new Error("Organization not found");
+    }
+
     return {
       running,
       queued,
       concurrencyLimit: environment.maximumConcurrencyLimit,
       burstFactor: environment.concurrencyLimitBurstFactor.toNumber(),
+      runsEnabled: environment.type === "DEVELOPMENT" || organization.runsEnabled,
     };
   }
 }

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

@@ -285,7 +285,7 @@ export default function Page() {
                   >
                     View runs
                   </LinkButton>
-                  <EnvironmentPauseResumeButton env={env} />
+                  {environment.runsEnabled ? <EnvironmentPauseResumeButton env={env} /> : null}
                 </div>
               }
               valueClassName={env.paused ? "text-warning" : undefined}