feat(usage): add 24h component-cost chart to the usage view

[webjunkie]

Problem

The Usage scene shows daily total cost, which is too coarse to explain sudden spend bursts. The most common surprise is a cold session revival: resuming a stale (non-cache-warm) session re-writes its whole context to the prompt cache at the cache-write rate, billing hundreds of thousands of tokens at full price in one turn. At daily, total-cost granularity that's invisible.

Why: we want users to see why a moment was expensive, not just that it was — specifically to surface cold-session revivals at a glance.

Changes

• New Last 24 hours card on the Usage view: a stacked bar chart of personal PostHog Code spend at 5-minute resolution, split into cache read / cache write / uncached input / output cost components (plus an uncategorized remainder for fallback-priced events). 5-minute buckets match the prompt-cache TTL, so one bucket ≈ one turn and a revival spike stands alone instead of being diluted across an hour. A spike dominated by cache write with little cache read is the cold-revival signature; the card says so under the chart.
• getPersonalSpendAnalysis gains a bucketMinutes option, and the spend-analysis types gain the optional by_bucket breakdown, matching the backend change in PostHog/posthog#69891.
• fillSpendBuckets (zero-filling, bucket-aligned, size-parameterized) added next to fillSpendDays in @posthog/core/billing.
• The card hides itself while the backend doesn't return by_bucket yet, so this is safe to merge ahead of the backend rollout.

No screenshot: authored in a headless environment; the chart reuses TimeSeriesBarChart exactly like the existing SpendOverTimeCard, with default stacked layout and a minute-interval x-axis.

How did you test this?

• Added fillSpendBuckets cases to spendAnalysisFormat.test.ts: bucket alignment + zero-fill at hourly and 5-minute sizes, sub-bucket timestamps landing in their bucket (from review feedback), and the runaway-window cap. Ran them: 21/21 pass.
• turbo typecheck for @posthog/core, @posthog/api-client, @posthog/ui: clean.
• pnpm --filter @posthog/ui test: 1429 tests pass.
• Biome check on all touched files.
• Not manually tested in the running app (no display in this environment).

Automatic notifications

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

---

Created with PostHog Code

[trunk-io]

Merging to main in this repository is managed by Trunk.

• To merge this pull request, check the box to the left or comment /trunk merge below.

After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here

[github-actions]

React Doctor found no issues in the changed files. 🎉

_{Reviewed by React Doctor for commit d0ce85b.}

[greptile-apps]

_{Reviews (1): Last reviewed commit: "feat(usage): add 24h component-cost char..." | Re-trigger Greptile}

[stamphog]

Gates denied this PR because it touches billing code, which requires human review. The changes are additive and well-structured, but billing is a hard deny-list match that needs a team member to sign off.