fix(desktop): improve usage summary readability

[Phoenix500526]

Summary

• align Usage summary values at the top of their metric cards even when supporting copy has different lengths
• abbreviate large token totals and cache breakdown values with readable K and M suffixes

Verification

• npm run lint
• npm run format:check
• npm --workspace @maka/ui run build
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• manually verified the Usage summary with large totals: metric values align and examples render as 12.6M and 371.8K

Before

After

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: OpenAI Codex diagnosed the layout and number-formatting issues, implemented the scoped renderer changes, and ran verification.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

The CSS half is clean — .settingsMetricCard is styled only in usage.css:210 and MetricCard is used only on this page, so dropping justify-content: center can't reach anything else.

Two things on the number formatting.

The locale is hardcoded. new Intl.NumberFormat('en-US', …) is a module constant, so a user on the Chinese UI sees 12.6M rather than the grouping their locale uses. The repo already has the shape for this — session-inspector-panel.tsx:522:

const formatter = new Intl.NumberFormat(uiLocaleToIntlLocale(locale));

Reaching for uiLocaleToIntlLocale(useUiLocale()) here keeps one authority for what locale numbers render in, and it's the file right next door that already knows the answer.

The exact number becomes unreachable. 12,647,391 renders as 12.6M, and MetricCard takes {title, value, detail} with no tooltip, so there's nowhere left in the UI to read the precise total. On a page whose neighbouring card is cost, that's worth deciding rather than defaulting: either a title attribute carrying the full number, or a note that the details tab is where exact figures live.

Neither is a large change and the layout fix is worth having.

[liuxiaocs7]

Looks good overall. The implementation matches the stated scope: metric values are top-aligned, and large token totals and cache breakdowns use readable compact notation. The documented examples render correctly, and CI is green.

Non-blocking follow-up: please consider adding focused regression coverage for compact-formatting boundaries (for example, 999, 1K, and 12.6M) and the rendered Usage summary output, in line with the renderer contract-testing guidance.

[Phoenix500526]

Hi @Astro-Han thank you for your review comments.

The locale is hardcoded. new Intl.NumberFormat('en-US', …) is a module constant, so a user on the Chinese UI sees 12.6M rather than the grouping their locale uses. The repo already has the shape for this — session-inspector-panel.tsx:522:

const formatter = new Intl.NumberFormat(uiLocaleToIntlLocale(locale));

Reaching for uiLocaleToIntlLocale(useUiLocale()) here keeps one authority for what locale numbers render in, and it's the file right next door that already knows the answer.

I think we're on the same page that choosing locale-invariant K/M over Intl compact notation is the right call for token counts. Using this formmater will breaks this concensus.

FYI: #3983 (review)

The exact number becomes unreachable. 12,647,391 renders as 12.6M, and MetricCard takes {title, value, detail} with no tooltip, so there's nowhere left in the UI to read the precise total. On a page whose neighbouring card is cost, that's worth deciding rather than defaulting: either a title attribute carrying the full number, or a note that the details tab is where exact figures live.

I added a tooltip to show the exact numbers, like this:

[Phoenix500526]

Looks good overall. The implementation matches the stated scope: metric values are top-aligned, and large token totals and cache breakdowns use readable compact notation. The documented examples render correctly, and CI is green.

Non-blocking follow-up: please consider adding focused regression coverage for compact-formatting boundaries (for example, 999, 1K, and 12.6M) and the rendered Usage summary output, in line with the renderer contract-testing guidance.

Hi, @liuxiaocs7 Thanks for the comment. I extracted a shared formatter for this and add some test cases to cover it.