feat(webapp): let orgs opt out of a billing limit from the banner

The billing limit banner now has an "No limit" button that turns the
billing limit off without leaving the page, behind a confirmation.

Mono-RevId: c863f19f28e5613b42883bbc2a6354513372fe00

Author: claude[bot]

.server-changes/billing-limit-banner-no-limit-button.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The banner that prompts you to set a billing limit now lets you choose to run without one, so you don't have to open your billing limit settings to dismiss it.

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

@@ -1,9 +1,14 @@
-import { useLocation } from "@remix-run/react";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { useFetcher, useLocation } from "@remix-run/react";
 import { DateTime } from "~/components/primitives/DateTime";
 import { environmentFullTitle } from "~/components/environments/EnvironmentLabel";
 import { AnimatedOrgBannerBar } from "~/components/billing/AnimatedOrgBannerBar";
 import { OrgBannerKind, selectOrgBanner } from "~/components/billing/selectOrgBanner";
-import { LinkButton } from "~/components/primitives/Buttons";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { SpinnerWhite } from "~/components/primitives/Spinner";
 import { useEnvironment, useOptionalEnvironment } from "~/hooks/useEnvironment";
 import {
   useOptionalOrganization,
@@ -23,6 +28,10 @@ import {
 } from "~/utils/pathBuilder";
 import { ENVIRONMENT_PAUSE_SOURCE_BILLING_LIMIT } from "~/utils/environmentPauseSource";
 
+/** Wire values for the billing-limits route action's "remove the limit" submission. */
+const BILLING_LIMIT_INTENT = "billing-limit";
+const BILLING_LIMIT_MODE_NONE = "none";
+
 function getUpgradeResetDate(): Date {
   const nextMonth = new Date();
   nextMonth.setUTCDate(1);
@@ -179,15 +188,12 @@ function NoLimitConfiguredBanner() {
       variant="warning"
       action={
         canManageBillingLimits ? (
-          <LinkButton
-            variant="tertiary/small"
-            className="system:border-transparent system:bg-warning system:transition system:group-hover/button:bg-warning system:group-hover/button:brightness-90"
-            to={v3BillingLimitsPath(organization)}
-          >
-            <span className="mx-auto grow self-center truncate text-text-bright system:text-white">
-              Billing limit settings
-            </span>
-          </LinkButton>
+          <div className="flex items-center gap-2">
+            <NoBillingLimitButton />
+            <LinkButton variant="warning/small" to={v3BillingLimitsPath(organization)}>
+              Configure limit…
+            </LinkButton>
+          </div>
         ) : undefined
       }
     >
@@ -198,6 +204,66 @@ function NoLimitConfiguredBanner() {
   );
 }
 
+/**
+ * Applies "no billing limit" without leaving the current page, by posting the same intent the
+ * billing limits settings form posts. Confirmed first: this removes the org's only guard against
+ * runaway spend.
+ */
+function NoBillingLimitButton() {
+  const organization = useOrganization();
+  const location = useLocation();
+  const fetcher = useFetcher();
+
+  const isSubmitting = fetcher.state !== "idle";
+
+  const removeBillingLimit = () => {
+    fetcher.submit(
+      {
+        intent: BILLING_LIMIT_INTENT,
+        mode: BILLING_LIMIT_MODE_NONE,
+        returnTo: `${location.pathname}${location.search}`,
+      },
+      { method: "POST", action: v3BillingLimitsPath(organization) }
+    );
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="warning/small">No limit</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>Continue without a billing limit?</DialogHeader>
+        <div className="flex flex-col gap-3 pt-3">
+          <Paragraph>
+            Without a billing limit, runs will continue even if usage spikes unexpectedly. You may
+            have to pay higher fees before you notice.
+          </Paragraph>
+          <FormButtons
+            confirmButton={
+              <Button
+                type="button"
+                variant="danger/medium"
+                LeadingIcon={isSubmitting ? SpinnerWhite : undefined}
+                disabled={isSubmitting}
+                onClick={removeBillingLimit}
+                shortcut={{ modifiers: ["mod"], key: "enter" }}
+              >
+                {isSubmitting ? "Applying..." : "No limit"}
+              </Button>
+            }
+            cancelButton={
+              <DialogClose asChild>
+                <Button variant="tertiary/medium">Cancel</Button>
+              </DialogClose>
+            }
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function UpgradeBanner() {
   const organization = useOrganization();
   const plan = useCurrentPlan();

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-limits/billingLimitsRoute.server.ts

@@ -2,6 +2,8 @@ import type {
   BillingLimitResult,
   ResolveBillingLimitRequest,
 } from "~/services/billingLimit.schemas";
+import { sanitizeRedirectPath } from "~/utils";
+import { v3BillingLimitsPath } from "~/utils/pathBuilder";
 
 export function isEnforcementActive(billingLimit: BillingLimitResult): boolean {
   return (
@@ -39,3 +41,44 @@ export function getSubmittedResumeMode(
   }
   return null;
 }
+
+/**
+ * The only prefix a `returnTo` may use. The banner that posts one is rendered by `NavBar`, but it
+ * reads the org layout loader's data, so every page able to show it is nested under `/orgs/`.
+ */
+const RETURN_TO_ALLOWED_PREFIX = "/orgs/";
+
+/**
+ * Never a redirect target. `sanitizeRedirectPath` already refuses both, and neither can match the
+ * allowed prefix — kept explicit so widening that prefix later cannot silently admit a JSON
+ * resource route or the public API.
+ */
+const RETURN_TO_DENIED_PREFIXES = ["/resources/", "/api/"];
+
+/**
+ * Where to send the user after saving the billing limit. Call sites outside the settings page
+ * (the org banner) post a `returnTo` so the user stays on the page they were already on.
+ *
+ * Origin first, then shape. `sanitizeRedirectPath` parses the candidate against a fixed origin and
+ * refuses anything whose hostname changes, which is what rules out reverse-solidus authorities like
+ * `/\evil.com` that a literal `//` test lets through. Whatever survives must additionally be a
+ * dashboard page path; anything else falls back to the settings page.
+ */
+export function getBillingLimitReturnTo(formData: FormData, organizationSlug: string): string {
+  const fallback = v3BillingLimitsPath({ slug: organizationSlug });
+
+  const submitted = formData.get("returnTo");
+  const sanitized = sanitizeRedirectPath(
+    typeof submitted === "string" ? submitted : null,
+    fallback
+  );
+
+  if (
+    !sanitized.startsWith(RETURN_TO_ALLOWED_PREFIX) ||
+    RETURN_TO_DENIED_PREFIXES.some((prefix) => sanitized.startsWith(prefix))
+  ) {
+    return fallback;
+  }
+
+  return sanitized;
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-limits/route.tsx

@@ -58,6 +58,7 @@ import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashb
 import type { BillingLimitResult } from "~/services/billingLimit.schemas";
 import {
   getAlertsResetRequested,
+  getBillingLimitReturnTo,
   getEffectiveLimitCentsAfterLimitSave,
   getResolveSubmitted,
   getSubmittedResumeMode,
@@ -325,6 +326,10 @@ export const action = dashboardAction(
         return json({ formIntent: "billing-limit", submission: submission.reply() });
       }
 
+      // The org banner posts this intent from whatever page the user is on, so honour its
+      // `returnTo` on success instead of dragging them over to the settings page.
+      const returnToPath = getBillingLimitReturnTo(formData, organizationSlug);
+
       const [billingLimitError, billingLimit] = await tryCatch(getBillingLimit(organization.id));
       if (billingLimitError || !billingLimit) {
         return redirectWithErrorMessage(
@@ -425,7 +430,7 @@ export const action = dashboardAction(
           const session = await getSession(request.headers.get("cookie"));
           setSuccessMessage(session, "Billing limit updated");
 
-          return redirect(`${v3BillingLimitsPath({ slug: organizationSlug })}?alertsReset=1`, {
+          return redirect(`${returnToPath}${returnToPath.includes("?") ? "&" : "?"}alertsReset=1`, {
             headers: {
               "Set-Cookie": await commitSession(session),
             },
@@ -436,7 +441,7 @@ export const action = dashboardAction(
       const session = await getSession(request.headers.get("cookie"));
       setSuccessMessage(session, "Billing limit updated");
 
-      return redirect(v3BillingLimitsPath({ slug: organizationSlug }), {
+      return redirect(returnToPath, {
         headers: {
           "Set-Cookie": await commitSession(session),
         },

apps/webapp/test/billingLimitsRoute.test.ts

@@ -11,6 +11,7 @@ import { isBillingLimitSettingsFormSubmission } from "~/routes/_app.orgs.$organi
 import { getSuggestedRecoveryLimitDollars } from "~/components/billing/billingLimitFormat";
 import {
   getAlertsResetRequested,
+  getBillingLimitReturnTo,
   getEffectiveLimitCentsAfterLimitSave,
   getResolveSubmitted,
   getSubmittedResumeMode,
@@ -164,6 +165,83 @@ describe("billingLimitsRoute.server", () => {
       expect(getEffectiveLimitCentsAfterLimitSave("none", 5000)).toBe(5000);
     });
   });
+
+  describe("getBillingLimitReturnTo", () => {
+    const SETTINGS_PATH = "/orgs/acme/settings/billing-limits";
+
+    function formDataWithReturnTo(returnTo?: string): FormData {
+      const formData = new FormData();
+      if (returnTo !== undefined) {
+        formData.set("returnTo", returnTo);
+      }
+      return formData;
+    }
+
+    function returnToFor(returnTo?: string): string {
+      return getBillingLimitReturnTo(formDataWithReturnTo(returnTo), "acme");
+    }
+
+    it("returns an app-relative returnTo, including its query string", () => {
+      expect(returnToFor("/orgs/acme/projects/p/env/dev/runs?page=2")).toBe(
+        "/orgs/acme/projects/p/env/dev/runs?page=2"
+      );
+    });
+
+    it("keeps a dashboard page path with a multi-param query string", () => {
+      expect(returnToFor("/orgs/acme/projects/p/env/dev/runs?statuses=FAILED&page=3")).toBe(
+        "/orgs/acme/projects/p/env/dev/runs?statuses=FAILED&page=3"
+      );
+    });
+
+    it("falls back to the settings page when returnTo is missing", () => {
+      expect(returnToFor()).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects protocol-relative URLs", () => {
+      expect(returnToFor("//evil.com")).toBe(SETTINGS_PATH);
+    });
+
+    // WHATWG URL parsing treats a reverse solidus like a solidus in the authority position, so
+    // each of these resolves to a foreign origin even though it opens with a single "/".
+    it("rejects a reverse-solidus authority", () => {
+      expect(returnToFor("/\\evil.com")).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects a doubled reverse-solidus authority", () => {
+      expect(returnToFor("/\\\\evil.com")).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects a mixed solidus/reverse-solidus authority", () => {
+      expect(returnToFor("/\\/evil.com")).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects absolute URLs", () => {
+      expect(returnToFor("https://evil.com/runs")).toBe(SETTINGS_PATH);
+      expect(returnToFor("https://evil.example/runs")).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects resource routes", () => {
+      expect(returnToFor("/resources/preferences/favorites")).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects API routes", () => {
+      expect(returnToFor("/api/v1/tasks/my-task/trigger")).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects app pages outside the org section", () => {
+      expect(returnToFor("/account/security")).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects a bare /orgs path not nested under an organization", () => {
+      expect(returnToFor("/orgs")).toBe(SETTINGS_PATH);
+    });
+
+    it("rejects a non-string returnTo", () => {
+      const formData = new FormData();
+      formData.set("returnTo", new Blob(["/orgs/acme/runs"]), "returnTo.txt");
+      expect(getBillingLimitReturnTo(formData, "acme")).toBe(SETTINGS_PATH);
+    });
+  });
 });
 
 describe("billing-alerts redirect route", () => {
@@ -217,6 +295,16 @@ describe("billing-limits form validation", () => {
     });
   });
 
+  it("accepts the org banner's no-limit field set", () => {
+    const formData = new FormData();
+    formData.set("intent", "billing-limit");
+    formData.set("mode", "none");
+
+    const submission = parseWithZod(formData, { schema: billingLimitFormSchema });
+    expect(submission.status).toBe("success");
+    expect(submission.value?.mode).toBe("none");
+  });
+
   it("parses none mode with cancelInProgressRuns from the form", () => {
     const formData = new FormData();
     formData.set("mode", "none");