fix(web): Usage hourly labels follow the Time format setting

[mInrOz]

Usage's Past 24h labels ignored the existing Time format setting. Hourly chart axes, hover labels, the range header, breakdown table, and model dialog now follow 12-hour, 24-hour, or System default. Midnight displays 00:00 in 24-hour mode, and repeated daylight-saving hours retain their zone labels. Daily views keep their date labels.

Rebuilt on current main while preserving the original commits and credit to @mInrOz for #15575. The setting uses the same cached locale formatter as other timestamps; shared helpers keep their existing default for callers that omit the setting, including mobile.

Scope and approval: maintainer takeover authorized as part of batch usage-billing-04; takeover claim. Addresses #15570.

Verification: 53 focused tests pass across usageFormat.test.ts and timestampFormat.test.ts, including explicit cycles, locale defaults, midnight and repeated hours. Original PR additions reduced from four cases to two, with three existing cases extended. Scoped lint, formatting, and shared/web/mobile typechecks pass.

Live verification in headless Linux Chromium used the authenticated app with 20 synthetic hourly Claude records. Checked range header, chart axes and hover, hourly table, model dialog axes and hover, switching the saved setting while the dialog remained open, System default without a desktop bridge (en-US), and returning to the daily view. Also selected 12-hour through Settings and confirmed it persisted on returning to Usage. Desktop-host locale behavior is covered by en-GB/en-US unit tests; packaged Electron, macOS, Windows, Safari, iOS, and Android were not run.

Both screenshots use the same data, 1280×800 viewport, and 24-hour preference. Before: main; after: this rebuilt head.

Implementation: gpt-6.1-sol through Codex. Tests: gpt-6-astra through Codex. Adversarial review: claude-opus-5-5 through Claude Code and gpt-6-sol through Codex.

[macroscopeapp]

Approvability

Verdict: Approved at 13b08ae

Macroscope's review found this PR approvable — This focused fix updates existing hourly Usage presentation to follow the configured locale, 12-hour, or 24-hour format without changing data processing or product defaults. The propagation and shared formatting changes are small, backward-compatible, and covered by targeted tests.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: d4716016-b94c-464e-af17-d4510ba8e8db

📥 Commits

Reviewing files that changed from the base of the PR and between eac52f0 and d8fc08b.

📒 Files selected for processing (7)

• apps/web/src/components/usage/UsageModelDialog.tsx
• apps/web/src/components/usage/UsagePage.tsx
• apps/web/src/components/usage/UsageProviderChart.tsx
• apps/web/src/timestampFormat.test.ts
• apps/web/src/timestampFormat.ts
• packages/shared/src/usageFormat.test.ts
• packages/shared/src/usageFormat.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Walkthrough

Usage hourly labels now follow the configured 12-hour or 24-hour preference. The preference applies to the usage window label, chart labels and tooltips, and hourly breakdown. Daily formatting remains unchanged.

Changes: Usage hour formatting

Layer / File(s)	Summary
Resolve the timestamp setting apps/web/src/timestampFormat.ts, apps/web/src/timestampFormat.test.ts	resolveHour12 derives the hour-cycle preference from the timestamp setting and resolved locale. Tests cover locale defaults and explicit 12-hour and 24-hour settings.
Format hourly labels packages/shared/src/usageFormat.ts, packages/shared/src/usageFormat.test.ts	Hourly formatters accept an optional hour-cycle preference. Tests cover both formats and preserve time-zone labels for repeated fall-back hours.
Apply the preference to usage views apps/web/src/components/usage/UsagePage.tsx, apps/web/src/components/usage/UsageProviderChart.tsx, apps/web/src/components/usage/UsageModelDialog.tsx	UsagePage passes the resolved preference to hourly labels and charts. UsageModelDialog forwards it to UsageProviderChart. Daily formatting remains unchanged.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: maria-rcks, juliusmarminge

Merge Risk: ⚪ Minimal · up to d8fc0

The Usage page’s hourly labels follow the selected time format. No actionable merge-blocking issue remains after normal checks.

Pre-merge checks: 5

Check name	Status	Explanation
Linked Issues check		[#15570] UsagePage resolves the timestamp setting and passes hour12 to the window label, breakdown table, provider chart, and model dialog chart. The shared formatters apply the selected hour cycl…
Out of Scope Changes check		All changes support [#15570] by resolving or applying the Usage page’s hour format or by testing that behavior. The PR leaves the other time-format surfaces and English month names unchanged, consiste…
Docstring Coverage		Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 10 functions across 7 files.
Title check		The title is concise, conventional, and clearly identifies the main change: Usage hourly labels now follow the Time format setting.
Description check		The description explains the problem, implementation, scope, approval, focused verification, manual UI checks, limitations, and before/after screenshots. It provides the information required by the te…

Full details: Linked Issues check

Explanation

[#15570] UsagePage resolves the timestamp setting and passes hour12 to the window label, breakdown table, provider chart, and model dialog chart. The shared formatters apply the selected hour cycle, preserve the 12-hour output when the argument is omitted, and retain time-zone labels for repeated DST hours. Added tests cover explicit settings, System default locales, omitted arguments, and repeated DST hours.

Full details: Out of Scope Changes check

Explanation

All changes support [#15570] by resolving or applying the Usage page’s hour format or by testing that behavior. The PR leaves the other time-format surfaces and English month names unchanged, consistent with the issue’s stated scope.

Full details: Description check

Explanation

The description explains the problem, implementation, scope, approval, focused verification, manual UI checks, limitations, and before/after screenshots. It provides the information required by the template, although it does not use separate Problem and Change headings.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

Dismissing prior approval to re-evaluate d8fc08b

[juliusmarminge]

Taking over this one for batch usage-billing-04. I’ll rebuild the hour-format propagation against current main, trim tests to meaningful regression coverage, and run independent reviews before publishing. No merge is planned.

Dismissing prior approval to re-evaluate 13b08ae