fix(web): align usage page skeleton layout

[tris203]

What Changed

The usage-page skeleton now mirrors the loaded layout: it reserves space for the breakdown section, matches the chart-label and total-value heights, uses provider-neutral placeholders, and gives provider labels enough room beside their session counts.

Why

The skeleton had drifted from the loaded page, causing visible layout shift as usage data arrived. The provider summary column could also truncate short provider names when the session count and total were present.

UI Changes

Before

After

Verification

• vp lint apps/web/src/components/usage/UsagePage.tsx
• vp test run apps/web/src/components/usage/UsageProviderChart.test.ts
• vp run --filter @t3tools/web typecheck
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes — not applicable; no motion changes

Created with GPT-5.6-sol via the Codex harness in T3 Code.

---

Note

Low Risk
Loading-state UI and Tailwind layout only; no data fetching, auth, or business logic changes in this diff.

Overview
Aligns the usage loading skeleton with the loaded page to cut layout shift while usage data is still settling.

Widens the main lg grid’s left column from 16rem to 18rem on both the live summary and UsageSkeleton, giving provider labels and session counts more horizontal room.

Updates skeleton placeholders: provider-colored dots and brand marks become neutral bg-muted circles; chart axis and totals value bars are slightly taller; and a new Breakdown block (heading, toggle stub, table area) mirrors the section that appears after load.

^{Reviewed by Cursor Bugbot for commit b7f4cda. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Align usage page skeleton with 18rem left column and breakdown section

Updates the loading skeleton in UsagePage.tsx to match the actual page layout. The left grid column widens from 16rem to 18rem on both the page and the skeleton, and the skeleton now uses neutral circles for provider indicators, taller placeholder bars, and a new Breakdown section placeholder.

^{Macroscope summarized b7f4cda.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ebd3f4a7-0e53-4a8e-974d-aee0e0845bde

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 6cd04d6. Configure here.}

[macroscopeapp]

One finding: treating any interrupt-only query failure as pending can latch the usage page into a permanent skeleton. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Approved at b7f4cda

Macroscope's review found this PR approvable — This is a small, self-contained usage-page UI adjustment limited to grid sizing and loading-skeleton visuals. It does not change data handling, application workflows, or production infrastructure.

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