fix(billing): apply local-testing polish to the billing surfaces

formatResetTime rolls 60 minutes into the next hour; isSameUsage compares
code_usage_subscribed and ai_credits.exhausted so a mid-session subscribe
flip emits UsageUpdated; the plans page keeps only the monthly free meter
(the free valve is $20 on both windows, so the monthly cap binds); the
announcement modal leads with the headline and tightens the bullets; the
cloud preflight reset hint prefers the sustained window.

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

Author: adboio

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

@@ -95,6 +95,11 @@ describe("formatResetTime", () => {
       resetAt: isoAt(4 * 3600 * 1000),
       expected: "Resets in 4h",
     },
+    {
+      name: "rolls the hour instead of showing 60 minutes",
+      resetAt: isoAt((23 * 3600 + 59 * 60 + 40) * 1000),
+      expected: "Resets in 24h",
+    },
     {
       name: "returns localized date when over 24h away",
       resetAt: isoAt(30 * 86400 * 1000),

packages/core/src/billing/usageDisplay.ts

@@ -26,8 +26,12 @@ export function formatResetTime(
 
   const totalHours = ms / 3_600_000;
   if (totalHours < 24) {
-    const hours = Math.floor(totalHours);
-    const minutes = Math.round((totalHours - hours) * 60);
+    let hours = Math.floor(totalHours);
+    let minutes = Math.round((totalHours - hours) * 60);
+    if (minutes === 60) {
+      hours += 1;
+      minutes = 0;
+    }
     return minutes === 0
       ? `Resets in ${hours}h`
       : `Resets in ${hours}h ${minutes}m`;

packages/core/src/usage/usage-monitor.test.ts

@@ -246,6 +246,29 @@ describe("UsageMonitorService", () => {
     expect(updates[1].burst.used_percent).toBe(35);
   });
 
+  // The titlebar meter keys off this bit; a subscribe flip must not wait for
+  // some other field to change.
+  it("emits UsageUpdated when only the subscription bit flips", async () => {
+    const updates: UsageOutput[] = [];
+    const gateway = {
+      fetchUsage: vi
+        .fn()
+        .mockResolvedValueOnce({
+          ...makeUsage(),
+          code_usage_subscribed: false,
+        })
+        .mockResolvedValueOnce({ ...makeUsage(), code_usage_subscribed: true }),
+    } as unknown as GatewaySlice;
+    service = makeService(gateway, makeActivityMonitor());
+    service.on(UsageMonitorEvent.UsageUpdated, (u) => updates.push(u));
+
+    await service.fetchOnce();
+    await service.fetchOnce();
+
+    expect(updates).toHaveLength(2);
+    expect(updates[1].code_usage_subscribed).toBe(true);
+  });
+
   it("does not emit UsageUpdated when the gateway throws", async () => {
     const updates: UsageOutput[] = [];
     const gateway = {

packages/core/src/usage/usage-monitor.ts

@@ -245,6 +245,8 @@ function isSameUsage(a: UsageOutput | null, b: UsageOutput): boolean {
   return (
     a.is_rate_limited === b.is_rate_limited &&
     a.billing_period_end === b.billing_period_end &&
+    a.code_usage_subscribed === b.code_usage_subscribed &&
+    a.ai_credits?.exhausted === b.ai_credits?.exhausted &&
     isSameBucket(a.burst, b.burst) &&
     isSameBucket(a.sustained, b.sustained)
   );

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

@@ -65,25 +65,22 @@ export function UsageBillingAnnouncementModal() {
             </Dialog.Title>
           </Flex>
           <Dialog.Description>
-            <Text color="gray" className="text-sm">
-              Seat-based plans are gone. PostHog Code is now usage-based — your
-              organization pays for AI usage at cost, and you only pay for what
-              you use.
+            <Text className="text-sm">
+              Seat-based plans are gone — PostHog Code is now usage-based. You
+              only pay for what you use.
             </Text>
           </Dialog.Description>
           <Flex direction="column" gap="2" className="text-sm">
-            <Text>
-              • Your organization's first <Text weight="medium">$20</Text> of
-              usage each month is included.
+            <Text color="gray">
+              • The first <Text weight="medium">$20</Text> of usage each month
+              is included.
             </Text>
-            <Text>
-              • Premium models (Claude, GPT) need a payment method on your
-              organization; an open model stays available on the free tier.
+            <Text color="gray">
+              • Premium models need a payment method; an open model stays free.
             </Text>
-            <Text>
-              • Every organization starts with a{" "}
-              <Text weight="medium">$50/month</Text> spend limit you can raise,
-              lower, or remove in PostHog billing settings.
+            <Text color="gray">
+              • 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/preflightCloudUsage.ts

@@ -13,9 +13,10 @@ import { type UsageLimitShowArgs, useUsageLimitStore } from "./usageLimitStore";
 const log = logger.scope("preflight-cloud-usage");
 
 function usageLimitArgs(usage: UsageOutput): UsageLimitShowArgs {
-  // Reset hint from whichever bucket is exceeded (daily takes priority);
-  // the monthly bucket covers an org-bucket block, whose period it matches.
-  const bucket = usage.burst.exceeded ? "burst" : "sustained";
+  // Burst-alone is the only state the earlier daily reset unblocks; both
+  // exceeded or an org-bucket block wait for the sustained window.
+  const bucket =
+    usage.burst.exceeded && !usage.sustained.exceeded ? "burst" : "sustained";
   return { resetAt: usage[bucket].reset_at, cause: "org_limit" };
 }
 

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

@@ -168,18 +168,11 @@ export function PlanUsageSettings() {
                 <Spinner size="2" />
               </Flex>
             ) : freeTier && usage ? (
-              <Flex direction="column" gap="3">
-                <UsageMeter
-                  label="Monthly free usage"
-                  bucket={usage.sustained}
-                  color={usage.sustained.exceeded ? "red" : undefined}
-                />
-                <UsageMeter
-                  label="Daily free usage"
-                  bucket={usage.burst}
-                  color={usage.burst.exceeded ? "red" : undefined}
-                />
-              </Flex>
+              <UsageMeter
+                label="Monthly free usage"
+                bucket={usage.sustained}
+                color={usage.sustained.exceeded ? "red" : undefined}
+              />
             ) : (
               <Flex
                 align="center"