fix(web): unify usage page chrome

[t3-code]

What Changed

• wraps the web usage dashboard in the canonical sidebar inset and app background
• uses the standard browser and electron titlebars
• removes the redundant in-page back button while preserving the page heading semantics

mobile usage chrome was audited and already follows the native ios/android header and background conventions, so it is intentionally unchanged.

Why

usage was the only sidebar destination rendering a bespoke large heading over a bare flex child. this aligns it with settings and the rest of the app shell without changing dashboard behavior.

UI Changes

before	after

matched route, 1440x900 viewport, environment, and date range.

Validation

• pnpm vp lint apps/web/src/components/usage/UsagePage.tsx --report-unused-disable-directives
• pnpm --filter @t3tools/web typecheck
• real app visual verification in chromium

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 (n/a, no animation changes)

model: gpt-5.4
harness: t3bot

---

Note

Low Risk
Presentation-only shell and layout changes; no usage data, routing, or business logic changes.

Overview
Aligns the Usage sidebar route with the rest of the web app shell instead of a standalone full-page layout.

The page is wrapped in SidebarInset with the shared background and scroll behavior. Browser gets the standard workspace-topbar title; Electron gets the drag-region title bar with COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS. The in-page back control and TanStack Router back/home navigation are removed—navigation is expected via the sidebar like other destinations.

Usage metrics, charts, and controls are unchanged; only the chrome and header hierarchy move (date range + window/refresh sit below the title bar).

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

Note

Unify UsagePage layout with SidebarInset and environment-aware headers

• Wraps the Usage page in a SidebarInset with a ScrollArea, aligning it with the rest of the app's chrome.
• Replaces the single header with conditional titlebars that differ between Electron and non-Electron environments.
• Removes the back navigation button and react-router back navigation utilities from the page.
• Behavioral Change: The Usage page no longer renders a back button; users must rely on sidebar or browser navigation to leave the page.

^{Macroscope summarized 712c2b2.}

[macroscopeapp]

Approvability

Verdict: Approved 712c2b2

UI-only change that restructures the usage page layout to use consistent sidebar chrome matching other pages. All functional content (metrics, charts, tables) is preserved with only structural/visual changes.

^{You can customize Macroscope's approvability policy. Learn more.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	11.3 KiB	11.3 KiB	−19 B (−0.2%)	15.1 KiB	✅
Codex	Thread snapshot wire	5.5 KiB	5.5 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	5.9 KiB	5.9 KiB	−24 B (−0.4%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	49.7 KiB	49.7 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	11.4 KiB	11.3 KiB	−27 B (−0.2%)	15.1 KiB	✅
Claude	Thread snapshot wire	5.5 KiB	5.5 KiB	−3 B (−0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	5.9 KiB	5.8 KiB	−24 B (−0.4%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	50.6 KiB	50.6 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 062b461 · PR result: 712c2b2 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 94.6 KiB
• Claude decoded thread snapshot: 95.4 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[t3-code]

superseded by the comprehensive desktop titlebar coverage PR requested in Discord.