chore(billing): tighten usage-based billing copy

packages/core/src/billing/usageLimitContent.test.ts

@@ -9,7 +9,7 @@ describe("usageLimitContent", () => {
       subscribed: false,
     });
     expect(content.title).toBe("Unlock premium models");
-    expect(content.description).toContain("This model isn't");
+    expect(content.description).toContain("open-source model");
     expect(content.actionLabel).toBe("Add payment method");
   });
 

packages/core/src/billing/usageLimitContent.ts

@@ -18,7 +18,7 @@ export function usageLimitContent(args: {
     return {
       title: "Unlock premium models",
       description:
-        "This model isn't included in the free tier. Add a payment method to your organization to unlock all models — you only pay for what you use. You can keep working now by switching to an included model.",
+        "To use this model, add a payment method to your account. Your first $20 of usage is on us each month - you only pay for what you use beyond that.\n\nOr, you can keep working now by switching to an open-source model.",
       actionLabel: "Add payment method",
       dismissLabel: "Not now",
     };
@@ -30,7 +30,7 @@ export function usageLimitContent(args: {
         title: "Free usage used up",
         description: `Your organization has used up its included PostHog Code usage.${
           resetLabel ? ` ${resetLabel}.` : ""
-        } Add a payment method to keep going — you only pay for what you use.`,
+        } Add a payment method to keep going.`,
         actionLabel: "Add payment method",
         dismissLabel: "Not now",
       };

packages/ui/src/features/billing/UsageBillingAnnouncementModal.tsx

@@ -68,29 +68,29 @@ export function UsageBillingAnnouncementModal() {
           </Flex>
           <Dialog.Description>
             <Text className="text-sm">
-              Seat-based plans are gone — PostHog Code is now usage-based. You
-              only pay for what you use.
+              Seat-based plans are gone. PostHog Code is now usage-based.
             </Text>
           </Dialog.Description>
           <Flex direction="column" gap="2" className="text-sm">
             <Text color="gray">
-              • The first <Text weight="medium">$20</Text> of usage each month
-              is included.
+              • Every organization gets $20 of free usage per month. You only
+              pay for what you use beyond that.
             </Text>
             <Text color="gray">
-              • Premium models need a payment method; an open model stays free.
+              • Open-source models are available for everyone. To use frontier
+              models you'll need a card on file.
             </Text>
             <Text color="gray">
               {spendLimitUsd != null ? (
                 <>
-                  • Your organization's spend limit is{" "}
-                  <Text weight="medium">{`${formatUsdAmount(spendLimitUsd)}/month`}</Text>{" "}
-                  — adjust it any time in billing settings.
+                  • Your organization's billing limit is{" "}
+                  <Text weight="medium">{`${formatUsdAmount(spendLimitUsd)}/mo`}</Text>
+                  , adjustable anytime in your settings.
                 </>
               ) : (
                 <>
-                  • A default <Text weight="medium">$50/month</Text> spend limit
-                  applies — adjust it any time in billing settings.
+                  • There's a default <Text weight="medium">$50/mo</Text>{" "}
+                  billing limit, adjustable anytime in your settings.
                 </>
               )}
             </Text>

packages/ui/src/features/billing/UsageLimitModal.tsx

@@ -57,7 +57,7 @@ export function UsageLimitModal() {
             <Dialog.Title className="mb-0">{content.title}</Dialog.Title>
           </Flex>
           <Dialog.Description>
-            <Text color="gray" className="text-sm">
+            <Text color="gray" className="whitespace-pre-line text-sm">
               {content.description}
             </Text>
           </Dialog.Description>

packages/ui/src/features/settings/sections/PlanUsageSettings.tsx

@@ -131,8 +131,8 @@ export function PlanUsageSettings() {
                 </Text>
                 <Text className="text-(--gray-11) text-sm">
                   {freeTier
-                    ? "Your organization's first $20 of usage each month is included, with access to open models. Add a payment method to unlock premium models — you only pay for what you use."
-                    : "Your organization pays for PostHog Code usage at cost — no seats, no subscriptions. The first $20 each month is included."}
+                    ? "Your org's first $20 of usage each month is included, with access to open models. Add a payment method to unlock premium models, and only pay for what you use."
+                    : "Your organization pays for PostHog Code usage at cost. The first $20 each month is included."}
                 </Text>
               </Flex>
               {subscribed && (