feat: Add usage limit detection and upgrade prompt

[charlesvien]

Problem

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

How did you test this?

Manually

[charlesvien]

• feat: Add usage limit detection and upgrade prompt #1750 👈 (View in Graphite)
• feat: Add auto permission mode for Claude adapter #1749
• feat: Sync Claude ACP adapter to v0.30.0 (SDK 0.2.112) #1748
• fix: Misc bugs and polish #1746
• 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/renderer/features/billing/components/SidebarUsageBar.tsx
Line: 16-18

Comment:
**Duplicated `isExceeded` logic (OnceAndOnlyOnce violation)**

The same three-field check (`is_rate_limited || sustained.exceeded || burst.exceeded`) is written inline here and again as the `isExceeded` helper function in `useUsageLimitDetection.ts`. If the limit-detection criteria ever change (e.g. a new bucket is added), both places need updating. Extract `isExceeded` from `useUsageLimitDetection` into a shared util (e.g. `billing/utils.ts`) and import it here.

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/components/MainLayout.tsx
Line: 46

Comment:
**Usage API polled for every user, regardless of billing flag or plan**

`useUsageLimitDetection()` is called unconditionally here, which internally calls `useUsage()` unconditionally (React hooks rule prevents conditional calls at the call-site, but the query itself has no `enabled` guard). The result is that a usage API request fires every 60 seconds for Pro users and for users without the `posthog-code-billing` flag — whose data is immediately discarded by the early-return inside the `useEffect`.

Consider threading an `enabled` option through `useUsage` so the query can be disabled upfront:

```ts
// useUsage.ts
export function useUsage({ enabled = true }: { enabled?: boolean } = {}) {
  const { data: usage, isLoading } = useQuery({
    ...trpc.llmGateway.usage.queryOptions(),
    enabled,
    refetchInterval: focused && enabled ? USAGE_REFETCH_INTERVAL_MS : false,
    refetchIntervalInBackground: false,
  });
  return { usage: usage ?? null, isLoading };
}
```

Then in `useUsageLimitDetection`:
```ts
const { usage } = useUsage({ enabled: billingEnabled && !isPro });
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "Add usage limit detection and upgrade pr..." | Re-trigger Greptile}