Skip to content

fix(billing): explain the merged usage limit as $20 included + org spend limit#3509

Merged
trunk-io[bot] merged 3 commits into
mainfrom
posthog-code/usage-bar-limit-breakdown
Jul 16, 2026
Merged

fix(billing): explain the merged usage limit as $20 included + org spend limit#3509
trunk-io[bot] merged 3 commits into
mainfrom
posthog-code/usage-bar-limit-breakdown

Conversation

@adboio

@adboio adboio commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Problem

usage bar does not make it clear what's free vs. what's paid usage (up to org limit)

Changes

segments the bar to show this better :)

scenario screenshot
subscribed, within free usage Screenshot 2026-07-16 at 10.01.15 AM.png
subscribed, past fere usage Screenshot 2026-07-16 at 10.01.19 AM.png
subscribed, $0 quota limit Screenshot 2026-07-16 at 10.01.27 AM.png
unsubscribed Screenshot 2026-07-16 at 10.01.31 AM.png
exceeded quota Screenshot 2026-07-16 at 10.01.34 AM.png

How did you test this?

  • Unit tests for the new derivation/formatting in usageDisplay.test.ts (pnpm --filter @posthog/core test — 2406 passing) and the full @posthog/ui suite (1682 passing).
  • turbo typecheck for @posthog/core + @posthog/ui; biome check clean; biome lint packages/core shows zero noRestrictedImports.
  • Rendered all five Storybook stories and screenshotted them in light and dark themes to verify the segmented bar, legend, and red exceeded state.

Automatic notifications

  • Publish to changelog?
  • Alert Sales and Marketing teams?

Created with PostHog Code

@trunk-io

trunk-io Bot commented Jul 16, 2026

Copy link
Copy Markdown

😎 Merged successfully - details.

@github-actions

github-actions Bot commented Jul 16, 2026

Copy link
Copy Markdown

React Doctor found 1 issue in 1 file · 1 warning.

1 warning

src/features/billing/UsageMeter.tsx

Reviewed by React Doctor for commit 2a85d33.

@posthog

posthog Bot commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Visual changes approved by @adboio — baseline updated in 2a85d33.

View this run in PostHog

10 new.

…spend limit

A subscribed org's ai_credits.limit_usd arrives from the gateway as one
merged number: the $20 included monthly allowance plus the configured
spend limit. The plans-page meter and title-bar card rendered it raw, so
an org on the default limit saw a total matching nothing it configured,
and the billing announcement modal misquoted the merged number as the
org's spend limit.

Derive the breakdown in codeUsageMeter (via codeOrgSpendLimitUsd), spell
it out under both meters ("$20 included + $50 org spend limit"), notch
the plans-page bar where the included allowance ends, and quote the
recovered spend limit in the announcement modal.

Generated-By: PostHog Code
Task-Id: b24f71e2-3751-4a6b-b5d8-a24147c4c067
@adboio
adboio force-pushed the posthog-code/usage-bar-limit-breakdown branch from c8d104e to 4b698f8 Compare July 16, 2026 14:05
@adboio
adboio marked this pull request as ready for review July 16, 2026 14:05

adboio commented Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

@adboio
adboio requested a review from a team July 16, 2026 14:05
@greptile-apps

greptile-apps Bot commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Reviews (1): Last reviewed commit: "feat(billing): segment the usage bar int..." | Re-trigger Greptile

Comment thread packages/core/src/billing/usageDisplay.ts
…tions

The 1px notch marking where the included allowance ends was barely
visible in either theme. Replace it with a physically segmented bar:
the $20 included allowance and the org spend limit render as separate
gap-divided segments, usage fills the included segment green before
pouring into the accent spend-limit segment, and a dot legend names
each amount. Exceeded turns both segments and dots red; a $0 spend
limit collapses to the included segment alone; the free tier keeps the
plain single-track bar.

Generated-By: PostHog Code
Task-Id: b24f71e2-3751-4a6b-b5d8-a24147c4c067
@adboio
adboio force-pushed the posthog-code/usage-bar-limit-breakdown branch from 4b698f8 to 82b3e9c Compare July 16, 2026 14:13
@adboio adboio added the Stamphog This will request an autostamp by stamphog on small changes label Jul 16, 2026 — with Graphite App

@stamphog stamphog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gates denied this PR because it touches billing code. Additionally, there is an unresolved correctness concern: the code hardcodes a $20 included allowance constant to back-calculate the org spend limit from a merged API value, which will report incorrect spend limits for plans where the included allowance differs from $20. The author acknowledged this as a known issue deferred to a follow-up, meaning the bug ships with this PR.

@stamphog stamphog Bot removed the Stamphog This will request an autostamp by stamphog on small changes label Jul 16, 2026
10 updated
Run: 31ffb0f9-8ac6-42a7-9d0d-21c01935161b

Co-authored-by: adboio <23323033+adboio@users.noreply.github.com>

adboio commented Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Merge activity

  • Jul 16, 3:02 PM UTC: Graphite couldn't merge this PR because it failed for an unknown reason (GitHub is reporting that this PR is not mergeable, despite passing required status checks defined by your branch protection rules. Please check your rulesets for additional blocking criteria. Graphite Merge Queue does not currently support rulesets. Please contact Graphite support for further assistance.).

@trunk-io
trunk-io Bot merged commit 5229b7f into main Jul 16, 2026
32 checks passed
@trunk-io
trunk-io Bot deleted the posthog-code/usage-bar-limit-breakdown branch July 16, 2026 15:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants