## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Small update of the Projects overview UI to resolve the competing CTA's
as well as alignment. Open to tweak a little more here.
| Before | After |
|--------|--------|
| <img width="1287" height="346" alt="Screenshot 2026-09-01 at 15 08 33"
src="https://github.com/user-attachments/assets/a0911d8c-7be9-4a70-ab37-8842093423c9"
/> | <img width="1252" height="430" alt="Screenshot 2026-09-01 at 15 05
40"
src="https://github.com/user-attachments/assets/cd75a8bd-9378-483b-96b8-2272a9990b4c"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined the plan usage card layout with larger metric values and
cleaner labels.
* Added dividers between usage metrics for improved readability.
* Simplified card and loading-state styling by removing unnecessary
borders, backgrounds, and padding.
* Updated the upgrade button’s visual treatment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What
Concludes the `upgradeCtaPlacement` experiment
([#45858](https://github.com/supabase/supabase/pull/45858)) by shipping
**both** placements permanently and removing the A/B scaffolding.
The experiment tested two upgrade-CTA placements against a control:
- **`user_dropdown`** — an "Upgrade to Pro" button in the account/user
dropdown
- **`org_projects_list`** — a plan-usage card in the org project list
Both moved paid conversion in the same direction over control with no
activation downside, and they live on separate surfaces, so we're
keeping both rather than picking one.
## Changes
- **Remove the experiment machinery.** Deleted `useUpgradeCtaExperiment`
(PostHog `upgradeCtaPlacement` flag read, `control` arm, variant
selection, per-org localStorage seeding, exposure tracking) and replaced
it with a small `useShowUpgradeCta` hook that gates purely on **free
plan + hosted platform**. Both placements now render for every eligible
free-plan org.
- **Telemetry cleanup.** Removed the
`upgrade_cta_placement_experiment_exposed` event (pure experiment
scaffolding). Kept `upgrade_cta_clicked` (with its `placement` property)
so we can still measure the CTAs going forward; de-experimented its
wording.
- **Dead code.** Removed the unused `prependCard` prop plumbing added to
`ProjectList` / `EmptyStates` (no caller ever passed it — the org card
renders via the `<aside>`).
- De-experimented the remaining doc comments in `PlanUsageCard`.
Gating is unchanged in spirit: paid orgs and self-hosted never see the
CTA. `useShowUpgradeCta` waits until the org plan is known before
returning true, so the CTA fades in for free users and never flashes for
paid users.
## Testing
- `pnpm --filter common typecheck` and `pnpm --filter studio typecheck`
pass.
- eslint + prettier clean on the changed files.
- Manually checked
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Upgrade/usage CTAs now appear only when the organization is confirmed
to be on a free plan, avoiding premature rendering before plan data is
available.
- Upgrade CTA visibility is now consistently driven across supported
project and organization surfaces (including the user dropdown) for
org-scoped routes.
- **Bug Fixes**
- Removed obsolete “prepend” placeholders from the project list loading
and grid views to keep card layouts consistent.
- **Documentation**
- Clarified upgrade CTA telemetry wording and adjusted the frontend
telemetry contract.
- **Tests**
- Added coverage for upgrade-CTA visibility behavior across key
scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Follow-up to the upgrade CTA placement experiment (#45858). The
`PlanUsageCard` count metrics (Monthly active users) were abbreviated to
`50k`, which reads ambiguously. This shows them in full with thousands
separators (`50,000`) to match the pricing page.
- `Monthly active users` row now renders e.g. `8,200 / 50,000` instead
of `8.2k / 50k`.
- Collapses the two count formatters (`formatCount` /
`formatCountLimit`) into one `toLocaleString()` call so the current
value and limit always use the same format.
- GB metrics (Egress, Database size, File storage) are unchanged.
## Test plan
- [ ] On the org projects page with the `org_projects_list` variant, the
Monthly active users row shows full numbers (`0 / 50,000`).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated plan usage display formatting to show full numbers with
thousands separators instead of abbreviated notation, improving clarity
when viewing usage limits.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Replaces the header upgrade CTA (PR #44494, which design team wanted to
iterate on) with a placement experiment that tests three non-chrome
surfaces for the free-plan "Upgrade to Pro" CTA.
PostHog flag `upgradeCtaPlacement` (free-plan users only) with four
arms:
| Variant | Surface |
| --- | --- |
| `control` | No CTA (baseline cohort, still tracked) |
| `user_dropdown` | Full-width button pinned in the account dropdown |
| `org_projects_list` | Project-card-shaped usage tile, first card in
the org project grid |
## Details
### `user_dropdown`
- Full-width `Upgrade to Pro` button in `UserDropdown`, gated to
org-scoped routes only (`/project/*`, `/org/*`) so the org-billing CTA
never shows on `/account`, `/organizations`, etc. — addresses the scope
concern raised in review.
- Dropdown uses controlled `open` state so it closes before navigation
(it lives in the global layout, so a route change alone wouldn't dismiss
the overlay).
### `org_projects_list`
- `PlanUsageCard` renders as the first `<li>` in the project grid (via
`ProjectList`'s `prependCard`), matching `ProjectCard` shape so it reads
like another project tile. Also renders during the project-list loading
state to avoid pop-in.
<img width="3804" height="1494" alt="Arc 2026-06-08 20 02 54"
src="https://github.com/user-attachments/assets/09c2218c-43d1-49ce-bae7-5075c9750d72"
/>
### Shared card styling
- Metric rows (Egress, Database size, Monthly active users, File
storage) show `current / limit` with a progress ring; ring/value turn
warning at ≥80% and over at ≥100%.
- Rows are clickable deep-links to `/org/[slug]/usage#<anchor>` with a
hover chevron and dashed separators; the same row component is used by
both the embedded and project-card variants.
- Skeleton placeholder renders from first paint so the card reserves
layout while `useOrgUsageQuery` resolves.
- Exposure is fired optimistically while the org query loads (skeleton
shows immediately), but the experiment exposure event only fires once
free-plan is confirmed.
### Telemetry
- `upgrade_cta_clicked` with `placement: user_dropdown | home_usage_card
| org_projects_list`.
- `upgrade_cta_placement_experiment_exposed` with `variant` — the custom
exposure event (snake_case experiment id `upgrade_cta_placement`; the
flag key stays camelCase `upgradeCtaPlacement`).
### Header CTA sunset
- `HeaderUpgradeButton` and its wiring in `LayoutHeader` /
`MobileNavigationBar` removed (master's #46144 already removed the
button; this branch drops the remaining `header_upgrade_cta_clicked`
event).
## Before merging
- [x] Create the `upgradeCtaPlacement` flag + experiment in PostHog (4
variants, free-plan targeting, custom exposure event
`upgrade_cta_placement_experiment_exposed`).
- [x] Archive the now-orphaned `headerUpgradeCta` flag.
## Test plan
- [x] Override the flag per variant via the dev toolbar on staging;
confirm each surface renders and `upgrade_cta_clicked` fires with the
right `placement`.
- [x] `control` shows no CTA but still emits the exposure event.
- [x] Paid-plan org and self-hosted (`IS_PLATFORM=false`) show nothing.
- [x] Clicking a metric row deep-links to the matching usage section;
clicking Upgrade routes to billing.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Experimentally surface an “Upgrade to Pro” CTA in the user dropdown
and on the projects page for eligible free-plan orgs.
* Added a Plan Usage card showing free-plan metrics and upgrade prompts
on the organization projects page; hides when irrelevant or errored.
* Project list and its loading view support inserting a custom/prepend
card in card mode.
* **Telemetry**
* Added tracking for CTA clicks and experiment exposure; placement is
persisted per org.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: kemal <hello@kemal.earth>
