refactor(frontend): bring back the billing gauge

[jog1t]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[jog1t]

• refactor(frontend): sleep/schedule/wake actions on actors #5092
• refactor(frontend): bring back the billing gauge #5091 👈 (View in Graphite)
• fix(frontend): remove create actor from context switcher #5090
• fix(frontend): dark mode issues on health check monitor #5088
• fix(frontend): custom actor icons not displaying #5083
• refactor(frontend): unify settings pages #5082
• fix(frontend): re-layout members screen #5081
• fix(frontend): navigation during open popover breaks closing animation #5080
• fix(frontend): hover animation on project cards not moving billing badge #5079
• fix(frontend): missing skeleton view for actor names #5078
• fix(frontend): ensure onboarding checks are only for production namespace, improve caching #5077
• fix(frontend): fix changelog display #5076
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[jog1t]

Merge activity

• May 21, 8:51 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 21, 9:11 PM UTC: Graphite rebased this pull request as part of a merge.
• May 21, 9:11 PM UTC: @jog1t merged this pull request with Graphite.

[claude]

PR Review: refactor(frontend): bring back the billing gauge

PR #5091 restores BillingUsageGauge (and BillingPlanBadge) to two navigation surfaces in the frontend:

1. settings-drawer.tsx — Adds a trailing prop to NavItem and a new NavBillingGauge wrapper component next to the "Billing" nav item.
2. user-dropdown.tsx — Adds BillingUsageGauge and BillingPlanBadge to the "Billing" dropdown menu item when on a project route.

---

Findings

Medium — Missing features.billing guard in user-dropdown.tsx

BillingUsageGauge and BillingPlanBadge are rendered when isMatchingProjectRoute is true, but there is no features.billing flag check. The equivalent billing UI in layout.tsx explicitly checks features.billing && matchRoute(...). Neither BillingUsageGauge nor BillingPlanBadge internally guard on the flag, so on OSS/non-billing deployment flavors the billing queries will fire and the components will attempt to render.

Suggested fix:

{isMatchingProjectRoute && features.billing ? (
  <>
    <BillingUsageGauge />
    <BillingPlanBadge />
  </>
) : null}

Per project conventions (frontend/src/lib/features.ts): consume flags via import { features } from "@/lib/features", never read VITE_FEATURE_FLAGS directly.

Low — NavBillingGauge in settings-drawer.tsx also lacks a features.billing guard

Same issue at lower severity — BillingUsageGauge will return null visually when usage is below the 80% threshold, but the queries still fire. If billing endpoints don't exist in non-billing deployments this could produce 404s in the background.

Info — Dead code in goToBilling (pre-existing)

Both branches of the if (isMatchingProjectRoute) / else in goToBilling call the identical navigate(...). Since the Billing menu item is only rendered when isMatchingProjectRoute is true, the else branch is unreachable. Not introduced by this PR but worth noting.

Info — No test/story for NavBillingGauge's null-loaderData guard

The NavBillingGauge component has a non-obvious contract: it guards against mid-transition null loaderData to prevent crashes. This follows the established pattern for NamespaceSettingsTitle etc., which is good — but a Ladle story simulating the null-loaderData transition state would make this guard contract explicit.

---

Summary

Severity	Issue
Medium	user-dropdown.tsx renders billing components without features.billing guard
Low	settings-drawer.tsx NavBillingGauge also lacks features.billing guard
Info	Dead code in goToBilling (pre-existing)
Info	No Ladle story for the null-loaderData guard in NavBillingGauge

The routing-guard pattern in NavBillingGauge is consistent with existing code. The main actionable item is adding the features.billing check before rendering billing components in both files.