feat: Add usage limit detection and upgrade prompt

[charlesvien]

Problem

NOTE TO REVIEWER: You might not be able to test this without enabling the feature flag in a SEPERATE org, feel free to yolo stamp.

Free-tier users have no visibility into usage limits until requests start failing silently.

Changes

1. Extract useUsage hook from PlanUsageSettings into shared billing/hooks for reuse
2. Add useUsageLimitDetection hook to detect when free users exceed sustained/burst limits
3. Add UsageLimitModal with context-aware messaging (mid-task vs idle)
4. Add SidebarUsageBar showing usage percentage and upgrade link
5. Gate all billing UI behind posthog-code-billing feature flag
6. Rremove assertBillingEnabled() from all store actions. The callers own that responsibility.

How did you test this?

Manually

[charlesvien]

• feat: Add usage limit detection and upgrade prompt #1851 👈 (View in Graphite)
• main

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

[greptile-apps]

Prompt To Fix All With AI

This is a comment left during a code review.
Path: apps/code/src/shared/types/seat.ts
Line: 23
Comment:
**`PLAN_PRO` constant value changed — may break existing Pro seats**
The `PLAN_PRO` key was renamed from `"posthog-code-200-20260301"` to `"posthog-code-pro-200-20260301"`. Any existing seats stored in the database with the old `plan_key` value would no longer be matched by `isProPlan()`, causing those users to be treated as Free. This is safe only if the backend was already using the new key (making the old constant a bug) or if a migration has been coordinated. Worth explicitly confirming which direction the change goes before merging.
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: apps/code/src/renderer/features/billing/components/SidebarUsageBar.tsx
Line: 49
Comment:
**`Math.ceil` vs `Math.round` inconsistency**
The text label uses `Math.round(usagePercent)` but the bar width uses `Math.ceil(usagePercent)`. At, say, 50.4% usage the label reads "50%" while the bar fills to 51%, making them visually disagree. Consider using the same rounding for both.
```suggestion style={{ width: `${Math.min(Math.round(usagePercent), 100)}%` }}```
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: apps/code/src/renderer/features/settings/components/sections/PlanUsageSettings.tsx
Line: 196
Comment:
**Spinner shown indefinitely when billing is disabled**
When `billingEnabled` is `false`, the condition `isLoading || !billingEnabled` shows a `<Spinner>` forever. In practice this section is probably only reachable when billing is enabled, but if it ever renders with `billingEnabled = false` the UI will spin indefinitely with no explanation. A cleaner approach would be to return `null` early, or show the "seat is loading" state rather than a persistent spinner.
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: packages/agent/src/utils/gateway.ts
Line: 30-32
Comment:
**Missing `/v1/` version prefix**
All other gateway URL helpers (`getGatewayUsageUrl`, `getLlmGatewayUrl`) include a `/v1/` path segment, but `getGatewayInvalidatePlanCacheUrl` goes directly to `/invalidate-plan-cache`. If the backend endpoint lives under `/v1/invalidate-plan-cache`, every call will 404. Confirm the expected path with the gateway team.
How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "Fix lint warnings across codebase" | Re-trigger Greptile}