feat(web): redesign usage insights

[maria-rcks]

What changed

• Reworks Usage around provider summaries, API cost estimates, hourly and daily curves, clamped hover details, and a simpler totals breakdown.
• Adds per-provider session counts while retaining source-fingerprint ownership so the same transcript directory is counted once across environments.
• Uses the shared workspace header from feat(web): unify workspace navigation #7153, introduces a content frame shared by Settings and Usage, and adopts segmented controls.

Screenshots

Direct parent on the left; this PR on the right. Same viewport and copied application state.

Before	After

## Why

Usage was mixed with unrelated workspace, Pull Requests, terminal, and tool-call work. This layer keeps the presentation and its small shared aggregation change together for one review.

Validation

• UsageProviderChart tests
• usageMerge tests, including duplicate-source ownership and empty-provider handling
• Affected-package typechecks
• Changed-file lint and formatting checks

Stack order

1. feat(web): unify workspace navigation #7153 workspace and navigation
2. feat(web): redesign usage insights #7147 Usage, this PR
3. feat(web): refresh pull request details #7148 Pull Requests
4. feat(web): improve terminal workspace controls #7149 terminal
5. feat(web): attach composer state drawers #7150 composer
6. fix(server): preserve tool lifecycle identity #7151 tool lifecycle projection
7. feat(web): collapse tool activity into one line #7152 tool activity UI

Built with GPT-5.6-sol in the Codex harness.

---

Note

Medium Risk
Changes usage aggregation (ProviderTotals.sessions, provider list shape) and a large Usage UI refactor; merge logic is tested but displayed totals/session labels depend on correct per-provider session attribution across environments.

Overview
Usage moves metric, time window, and breakdown controls into the shared workspace header—segmented ToggleGroups on large screens and compact Selects on small ones—with the active date range shown in the breadcrumb.

The page layout uses WorkspacePageHeader and WorkspacePageContainer (wide), simplifies the headline and provider sidebar (stable PROVIDER_ORDER, session counts, chart color dots; no metric-based reordering or share bars), trims the totals strip, and swaps custom bordered buttons for segmented toggles in the breakdown section.

Shared UI: new WorkspacePageContainer with readable / wide / expanded max-widths; Settings adopts it instead of local width classes. Toggle / ToggleGroup gain a segmented variant (default size when variant is segmented). WorkspaceBreadcrumbSeparator accepts an optional className.

Data / chart: usageMerge adds sessions per provider (from owned source distinctSessions, still deduped by fingerprint) and tests for empty-provider omission. UsageProviderChart repositions the hover tooltip from cursor-local coordinates (clamped, ResizeObserver); UsageChartLegend is removed.

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

Note

Redesign the Usage Insights page with responsive controls, provider session counts, and unified header components

• Replaces the Usage page layout with a breadcrumb header containing responsive metric/period controls (segmented toggles on desktop, selects on mobile), removing the in-chart legend and metric toggle
• Adds per-provider session counts to mergeUsage output via a new sessions field on ProviderTotals; providers with no sessions and no usage are omitted from results
• Simplifies the Totals section to show only label/value pairs, removing period averages, cache share details, and provider bar visualizations; providers now display in fixed PROVIDER_ORDER
• Introduces shared layout primitives: WorkspacePageHeader (standardizes electron drag-region and native-control insets) and WorkspacePageContainer (standardized width presets), replacing bespoke header elements across chat, settings, and onboarding routes
• Moves the settings sidebar Back button into a new SidebarUtilityMenu component shared with the main sidebar footer; the back action now prefers window.history.back() before falling back to navigating to /
• Adds segmented size and variant to Toggle/ToggleGroup for the new control styling
• Behavioral Change: Metric component no longer renders a detail line; UsageSkeleton no longer accepts a resolution prop

^{Macroscope summarized 8156179.}

[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: 9e5ee8af-399e-4f05-89fe-808aef67f105

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.}

[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	12.6 KiB	12.6 KiB	−15 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.3 KiB	6.3 KiB	−4 B (−0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.3 KiB	6.3 KiB	−11 B (−0.2%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	51.8 KiB	51.8 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	12.6 KiB	12.6 KiB	+12 B (+0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.3 KiB	6.3 KiB	+13 B (+0.2%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.3 KiB	6.3 KiB	−1 B (−0.0%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	52.7 KiB	52.7 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 07f8027 · PR result: 3fa0aed · 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: 99.9 KiB
• Claude decoded thread snapshot: 100.6 KiB

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

[macroscopeapp]

Two consistency findings in the Usage refresh: a hand-rolled glass surface that bypasses the shared glass contract, and a call-site override of the shared workspace topbar height.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR redesigns the usage insights page with new UI components, a segmented toggle variant, and changes to how session counts are aggregated per provider. As a feature introducing new components and data structure changes, it warrants human review.

No code changes detected at 3fa0aed. Prior analysis still applies.

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

[macroscopeapp]

UI Consistency

One finding: the new compact header menu duplicates an existing header control instead of routing through a shared primitive. The two items flagged on the previous run (header height override on WorkspacePageHeader, hand-rolled glass on the chart tooltip) are resolved on this head — the header now uses the primitive's geometry unchanged and the tooltip composes surface-glass.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the usage chart is now the only place provider colors appear, and this PR removes every static key for them.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review: the earlier glass-surface and topbar-geometry issues are resolved (the tooltip now uses surface-glass, and the header goes through WorkspacePageHeader without overriding its height). Two remaining findings, both about new shared API surface introduced here.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One consistency finding on the new SegmentedTabList primitive. Earlier findings from previous runs (glass tooltip, header geometry, provider color encoding, unused density size) look addressed; the HeaderFilterMenu / CompactFilterMenu duplication flagged previously is still open but not re-reported here.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One consistency finding on the new SegmentedTabList primitive. Earlier findings from previous runs (glass tooltip, header geometry, provider color encoding, unused density size) look addressed; the HeaderFilterMenu / CompactFilterMenu duplication flagged previously is still open but not re-reported here.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the usage skeleton's left column no longer matches the geometry of the loaded content it stands in for, so the page still shifts when the last device answers (visible below lg, where the summary column stacks above the chart and everything under it moves). Everything else in this revision looks consistent with the shared system — the segmented size now defaults from the variant, the chart tooltip uses the shared surface-glass composition, and the provider swatches restore the chart's color mapping outside the hover tooltip.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the new segmented defaulting logic in the shared ToggleGroup primitive has no focused test. Everything else in this revision (shared page frame, breadcrumb separator, segmented track/size ownership, glass tooltip, skeleton geometry) now lines up with the existing shared-component and Tailwind ownership conventions.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the breakdown tables: the new row treatment drops the separators and replaces them with a hover tint that resolves to an imperceptible color in both themes. Everything else in this revision looks consistent with the shared system — the segmented variant now owns its item geometry (with a focused test), the tooltip composes surface-glass, the skeleton mirrors the loaded geometry, and WorkspacePageContainer / WorkspacePageHeader are shared by Settings and Usage alike.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the two new topbar Select popups keep Base UI's item-aligned positioning, unlike every other align="end" popup in apps/web. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the two new topbar Select popups keep Base UI's item-aligned positioning, unlike every other align="end" popup in apps/web. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the new segmented toggle treatment: in the default dark theme the hover fill lands on top of the pressed fill, so the selected segment is not identifiable while the pointer is inside the group. Everything else in this revision (segmented size defaulting plus its test, alignItemWithTrigger={false} on the new header popups, shared WorkspacePageContainer/WorkspacePageHeader composition, surface-glass chart tooltip, skeleton geometry) lines up with the existing primitives.

^{Posted via Macroscope — UI Consistency}