feat(billing): org spend limit in the announcement; hold What's New behind it

The announcement's spend-limit bullet shows the org's actual limit from
ai_credits.limit_usd (posthog#71404) for subscribed orgs — a free org's
limit is its included allocation, already the first bullet — falling back
to the $50-default copy when unknown. The post-update What's New dialog
now waits until the blocking announcement is acknowledged instead of
stacking on top of it.

Generated-By: PostHog Code
Task-Id: 1039ea23-9930-44e2-9888-b05cf8b129ec

Author: adboio

packages/core/src/llm-gateway/llm-gateway.test.ts

@@ -368,7 +368,7 @@ describe("LlmGatewayService.fetchUsage", () => {
     const fetchMock = vi.fn().mockResolvedValue(
       createJsonResponse({
         ...USAGE_BODY,
-        ai_credits: { exhausted: true },
+        ai_credits: { exhausted: true, used_usd: 12.4, limit_usd: 50 },
         code_usage_subscribed: true,
       }),
     );
@@ -377,9 +377,27 @@ describe("LlmGatewayService.fetchUsage", () => {
     const usage = await service.fetchUsage();
 
     expect(usage.ai_credits?.exhausted).toBe(true);
+    expect(usage.ai_credits?.used_usd).toBe(12.4);
+    expect(usage.ai_credits?.limit_usd).toBe(50);
     expect(usage.code_usage_subscribed).toBe(true);
   });
 
+  it("parses ai_credits with null spend numbers from an unsynced org", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      createJsonResponse({
+        ...USAGE_BODY,
+        ai_credits: { exhausted: false, used_usd: null, limit_usd: null },
+      }),
+    );
+    const { service } = createService(fetchMock);
+
+    const usage = await service.fetchUsage();
+
+    expect(usage.ai_credits?.exhausted).toBe(false);
+    expect(usage.ai_credits?.used_usd).toBeNull();
+    expect(usage.ai_credits?.limit_usd).toBeNull();
+  });
+
   it("feeds code_usage_subscribed into helper model routing", async () => {
     const fetchMock = vi
       .fn()

packages/core/src/usage/schemas.ts

@@ -11,7 +11,13 @@ export const usageOutput = z.object({
   user_id: z.number(),
   sustained: usageBucketSchema,
   burst: usageBucketSchema,
-  ai_credits: z.object({ exhausted: z.boolean() }).optional(),
+  ai_credits: z
+    .object({
+      exhausted: z.boolean(),
+      used_usd: z.number().nullish(),
+      limit_usd: z.number().nullish(),
+    })
+    .optional(),
   is_rate_limited: z.boolean(),
   is_pro: z.boolean(),
   code_usage_subscribed: z.boolean().optional(),

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

@@ -1,29 +1,32 @@
 import { ArrowSquareOut, CreditCard } from "@phosphor-icons/react";
-import { USAGE_BILLING_FLAG } from "@posthog/shared";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { Button, Dialog, Flex, Text } from "@radix-ui/themes";
 import { useEffect } from "react";
 import { track } from "../../shell/analytics";
 import { openExternalUrl } from "../../shell/openExternal";
 import { getBillingUrl } from "../../utils/urls";
 import { useAuthStateValue } from "../auth/store";
-import { useFeatureFlag } from "../feature-flags/useFeatureFlag";
 import { useBillingAnnouncementStore } from "./billingAnnouncementStore";
+import { useBillingAnnouncementVisible } from "./useBillingAnnouncementVisible";
+import { useUsage } from "./useUsage";
 
 /**
  * One-time blocking announcement of the usage-based billing cutover. The
  * flag is its launch switch — flip at cutover, delete once the fleet has
  * acknowledged.
  */
 export function UsageBillingAnnouncementModal() {
-  const armed = useFeatureFlag(USAGE_BILLING_FLAG);
-  const acknowledged = useBillingAnnouncementStore((s) => s.acknowledged);
-  const hasHydrated = useBillingAnnouncementStore((s) => s._hasHydrated);
+  const isOpen = useBillingAnnouncementVisible();
   const acknowledge = useBillingAnnouncementStore((s) => s.acknowledge);
   const cloudRegion = useAuthStateValue((state) => state.cloudRegion);
-  const isLoggedIn = useAuthStateValue((state) => state.currentOrgId !== null);
+  const { usage } = useUsage({ enabled: isOpen });
 
-  const isOpen = armed && isLoggedIn && hasHydrated && !acknowledged;
+  // A free org's limit_usd is its included allocation (the first bullet's
+  // $20), not a spend limit — the org-specific line is for subscribed orgs.
+  const limitUsd =
+    usage?.code_usage_subscribed === true
+      ? (usage.ai_credits?.limit_usd ?? null)
+      : null;
 
   useEffect(() => {
     if (isOpen) {
@@ -79,8 +82,20 @@ export function UsageBillingAnnouncementModal() {
               • Premium models need a payment method; an open model stays free.
             </Text>
             <Text color="gray">
-              • A default <Text weight="medium">$50/month</Text> spend limit
-              applies — adjust it any time in billing settings.
+              {limitUsd != null ? (
+                <>
+                  • Your organization's spend limit is{" "}
+                  <Text weight="medium">
+                    {`$${Number.isInteger(limitUsd) ? limitUsd : limitUsd.toFixed(2)}/month`}
+                  </Text>{" "}
+                  — adjust it any time in billing settings.
+                </>
+              ) : (
+                <>
+                  • A default <Text weight="medium">$50/month</Text> spend
+                  limit applies — adjust it any time in billing settings.
+                </>
+              )}
             </Text>
           </Flex>
           <Flex justify="end" gap="3" mt="2">

packages/ui/src/features/billing/useBillingAnnouncementVisible.ts

@@ -0,0 +1,13 @@
+import { USAGE_BILLING_FLAG } from "@posthog/shared";
+import { useAuthStateValue } from "../auth/store";
+import { useFeatureFlag } from "../feature-flags/useFeatureFlag";
+import { useBillingAnnouncementStore } from "./billingAnnouncementStore";
+
+/** Whether the one-time billing announcement is currently blocking the app. */
+export function useBillingAnnouncementVisible(): boolean {
+  const armed = useFeatureFlag(USAGE_BILLING_FLAG);
+  const acknowledged = useBillingAnnouncementStore((s) => s.acknowledged);
+  const hasHydrated = useBillingAnnouncementStore((s) => s._hasHydrated);
+  const isLoggedIn = useAuthStateValue((state) => state.currentOrgId !== null);
+  return armed && isLoggedIn && hasHydrated && !acknowledged;
+}

packages/ui/src/features/updates/WhatsNewModal.tsx

@@ -1,5 +1,6 @@
 import { X } from "@phosphor-icons/react";
 import { useHostTRPC } from "@posthog/host-router/react";
+import { useBillingAnnouncementVisible } from "@posthog/ui/features/billing/useBillingAnnouncementVisible";
 import { ReleaseNotesSections } from "@posthog/ui/features/updates/ReleaseNotesSections";
 import {
   groupReleases,
@@ -42,6 +43,9 @@ function ChangelogSkeleton() {
 export function WhatsNewModal() {
   const isOpen = useWhatsNewStore((state) => state.isOpen);
   const close = useWhatsNewStore((state) => state.close);
+  // The blocking billing announcement takes the stage alone — the post-update
+  // auto-open waits here until it's acknowledged, then appears.
+  const billingAnnouncementVisible = useBillingAnnouncementVisible();
   const prefetchForActiveUpdate = useHasActiveUpdate();
   const hostTRPC = useHostTRPC();
   const { data: currentVersion, isError: isVersionError } = useQuery(
@@ -63,7 +67,7 @@ export function WhatsNewModal() {
 
   return (
     <Dialog.Root
-      open={isOpen}
+      open={isOpen && !billingAnnouncementVisible}
       onOpenChange={(open) => {
         if (!open) close();
       }}