feat(desktop): show token and compute usage

[adboio]

Problem

PostHog Desktop users can see combined organization usage but cannot distinguish token spend from cloud-compute usage. The page also mixes organization billing with personal analysis without clearly explaining their different scope and freshness.

Changes

• Shows token and cloud-compute spend while keeping combined usage as the only authoritative meter and limit.
• Shows CPU core-seconds and memory GiB-seconds without prices or independent limits.
• Removes the redundant usage-based billing status card.
• Combines the organization meter and component breakdown into one billing surface.
• Separates near-real-time personal spend analysis from delayed organization billing.
• Treats a missing breakdown as awaiting data and preserves explicit zero values.
• Keeps existing exhaustion, upgrade, and Plan & Usage navigation behavior.
• Depends on #76889 for the optional gateway response field. It does not depend on compute enforcement.
• Adds Storybook states for standard, loading, unavailable, explicit-zero, and exhausted usage.

How did you test this code?

• Ran focused usage-display tests covering conversion, missing values, explicit zero, and large integers.
• Ran gateway client tests covering the optional breakdown wire shape.
• Ran Desktop core and UI type checks.
• Built Storybook and reviewed the primary Plan & Usage story at desktop size.
• Did not manually test the packaged Electron application.

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Automatic notifications

• Publish to changelog?

Docs update

No documentation changes. The Plan & Usage surface explains scope, units, and freshness in context.

🤖 Agent context

Autonomy: Human-driven (agent-assisted)

Authored with PostHog Code using the local /frontend-design skill. The page now treats combined organization usage as the billing ledger and personal analysis as a separate near-real-time workspace.

---

Created with PostHog Code

[trunk-io]

😎 Merged successfully - details.

[charlesvien]

This is really good, gonna help answer a lot of questions users keep asking in the Discord

[greptile-apps]

Prompt To Fix All With AI

### Issue 1
products/desktop/packages/ui/src/features/settings/sections/PlanUsageSettings.tsx:343-345
**Disclosure resets selected window**

When a user selects another spend window, collapses “Your spend,” and expands it again, the conditional render remounts `SpendAnalysisSection` and resets its local state to the 30-day default, causing the analysis to display a different range than the user selected.

```suggestion
      {children && (
        <div
          hidden={!expanded}
          className="border-(--gray-5) border-t p-4"
        >
          {children}
        </div>
      )}
```

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

_{Reviews (1): Last reviewed commit: "feat(desktop): collapse personal spend a..." | Re-trigger Greptile}

[greptile-apps]

Disclosure resets selected window

When a user selects another spend window, collapses “Your spend,” and expands it again, the conditional render remounts SpendAnalysisSection and resets its local state to the 30-day default, causing the analysis to display a different range than the user selected.

Suggested change

	{expanded && children && (
	<div className="border-(--gray-5) border-t p-4">{children}</div>
	)}
	{children && (
	<div
	hidden={!expanded}
	className="border-(--gray-5) border-t p-4"
	>
	{children}
	</div>
	)}

Knowledge Base Used: Desktop App and Agent Framework

Prompt To Fix With AI

This is a comment left during a code review.
Path: products/desktop/packages/ui/src/features/settings/sections/PlanUsageSettings.tsx
Line: 343-345

Comment:
**Disclosure resets selected window**

When a user selects another spend window, collapses “Your spend,” and expands it again, the conditional render remounts `SpendAnalysisSection` and resets its local state to the 30-day default, causing the analysis to display a different range than the user selected.

```suggestion
      {children && (
        <div
          hidden={!expanded}
          className="border-(--gray-5) border-t p-4"
        >
          {children}
        </div>
      )}
```

**Knowledge Base Used:** [Desktop App and Agent Framework](https://app.greptile.com/posthog-org-19734/-/custom-context/knowledge-base/posthog/posthog/-/docs/desktop-app.md)

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

[adboio]

/trunk merge

[github-actions]

Hey @adboio! 👋

It looks like your git author email on this PR isn't your @posthog.com address (adambowker98@gmail.com). Since you're on the PostHog team, it's worth pointing your local git author email at your @posthog.com address. Why it matters:

• Consistent work identity in git history — internal tooling that attributes commits to team members keys off your @posthog.com address.
• Keeps team contributions easy to tell apart from external community ones when scanning history.

You can fix it for this repo with:

git config user.email "you@posthog.com"

Or set it globally with git config --global user.email "you@posthog.com". No need to redo this PR — just a nudge for next time. 🙂

[github-actions]

React Doctor found 1 issue in 1 file · 1 warning.

1 warning

packages/ui/src/features/settings/sections/PlanUsageSettings.tsx

• ⚠️ packages/ui/src/features/settings/sections/PlanUsageSettings.tsx:100 window.open without noopener window-open-without-noopener

_{Reviewed by React Doctor for commit a0da4d8.}

[trunk-io]

   

View Full Report ↗︎ ⋅ Docs

[adboio]

/trunk merge

[stamphog]

Note

🤖 stamphog reviewed ad939f372a594a8a02464767b6dc01e5fac2683e — verdict: REFUSED

Gates denied this PR (deny-list match on billing-related content and it's classified as T2-never for size/scope), so it's outside auto-approval scope; also the author is not on the owning team and there's an unresolved inline concern about state reset on disclosure toggle.

• 👍 on the PR from greptile-apps[bot], hex-security-app[bot].
• Deny-list match: PR touches billing-related surface, which is excluded from automated approval by policy
• Classified as T2-never by size/scope gates — requires human review regardless of content
• Author adboio is not on the owning team @PostHog/team-posthog-code

Gate mechanics and policy version

Gate		Result
prerequisites	✓	all clear
deny-list	✗	matches: billing
size	✓	581L, 7F substantive, 658L/9F incl. docs/generated/snapshots — within ceiling
tier	✗	classified as T2-never: T2-never (658L, 9F, single-area, feat)
stamphog 2.0.0b4		.stamphog/policy.yml @ 90b6195 · reviewed head ad939f3

[deployment-status-posthog]

Deploy status

Environment	Status	Deployed At	Workflow
dev	✅ Deployed	2026-08-07 17:22 UTC	Run
prod-us	✅ Deployed	2026-08-07 17:38 UTC	Run
prod-eu	✅ Deployed	2026-08-07 17:40 UTC	Run