feat(web): redesign usage insights - #7147
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
github-actions
Bot
added
vouch:trusted
Thread transfer impact✅ Thread transfer remains within every enforced ceiling.
Baseline: unavailable · PR result: Scenario and decoded snapshot size10 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.
Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed. |
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
ApprovabilityVerdict: Needs human review This PR introduces a redesigned usage insights page with new UI patterns (segmented toggles, responsive controls), layout restructuring, and new per-provider session tracking. The scope represents a new feature rather than a minor tweak, and unresolved comments raise architectural consistency questions worth human evaluation. You can customize Macroscope's approvability policy. Learn more. |
e093685 to
acf6876
Compare
There was a problem hiding this comment.
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
5e96339 to
2ec34dc
Compare
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
| <MenuTrigger | ||
| render={ | ||
| <Button size="compact" variant="ghost-muted" aria-label={label} className="text-sm" /> |
There was a problem hiding this comment.
HeaderFilterMenu is the same control as CompactFilterMenu (apps/web/src/routes/_chat.pull-requests.tsx:1619): same Menu + MenuTrigger + MenuRadioGroup shape, same chevron glyph, and the optional icon / disabledReason props map one-to-one onto that component's option.Icon / option.unavailable while having no consumer on this page.
Leaving both means the same header filter control now exists twice with divergent trigger behavior: this one inherits the Button compact / ghost-muted contract (focus-visible ring, coarse-pointer hit target, muted icon color), while the pull-requests copy keeps a hand-rolled trigger class string with no focus ring. Consider migrating those three call sites to this component (Icon -> icon, unavailable -> disabledReason) and deleting the local copy, so the two prop generalizations have the consumer they were shaped for. If that migration is out of scope for this PR, dropping icon and disabledReason until something uses them keeps the new contract to what it actually serves.
Posted via Macroscope — UI Consistency
| ...props | ||
| }: { | ||
| selected: boolean; | ||
| density?: "default" | "compact"; |
There was a problem hiding this comment.
density="compact" (and the segmented-compact size it selects in toggle.tsx) has no call site — all three usages here use the default density. Adding a size to the shared toggleVariants contract that nothing renders means its geometry is never validated against a real surface. Suggest dropping density and the segmented-compact size until a second surface needs the smaller pill, and adding them back with that consumer.
Posted via Macroscope — UI Consistency
4e4d9b3 to
8f2efda
Compare
There was a problem hiding this comment.
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
| function SegmentedTabList({ className, ...props }: HTMLAttributes<HTMLDivElement>) { | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| "inline-flex w-fit items-center gap-0.5 rounded-lg bg-muted/45 p-0.5", | ||
| className, | ||
| )} | ||
| role="group" | ||
| {...props} | ||
| /> | ||
| ); | ||
| } |
There was a problem hiding this comment.
SegmentedTabList reconstructs ToggleGroup (apps/web/src/components/ui/toggle-group.tsx), the primitive the other single-select segmented controls already compose (DiffPanel.tsx:752, PullRequestCodeTab.tsx:1098). A raw role="group" div with per-item pressed/onClick drops what the Base UI group owns: value/onValueChange single-selection semantics and the composite keyboard model (one tab stop, arrow keys to move between segments — here each segment is its own tab stop and arrows do nothing), plus the group's coarse-pointer hit-target normalisation (*:pointer-coarse:after:min-w-auto), so on touch each 24px-tall pill keeps a 44px ::after overlay that spills onto its neighbour and the content below.
Since the segmented size/variant you added live on the shared toggleVariants, ToggleGroupItem can already wear them; suggest keeping the track styling (rounded-lg bg-muted/45 p-0.5) as a ToggleGroup className and letting variant === "segmented" take the gap-0.5 branch rather than the joined-border branch, instead of shipping a second group primitive next to the existing one.
Posted via Macroscope — UI Consistency
There was a problem hiding this comment.
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
| function SegmentedTabList({ className, ...props }: HTMLAttributes<HTMLDivElement>) { | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| "inline-flex w-fit items-center gap-0.5 rounded-lg bg-muted/45 p-0.5", | ||
| className, | ||
| )} | ||
| role="group" | ||
| {...props} | ||
| /> | ||
| ); | ||
| } |
There was a problem hiding this comment.
SegmentedTabList reconstructs ToggleGroup (apps/web/src/components/ui/toggle-group.tsx), the primitive the other single-select segmented controls already compose (DiffPanel.tsx:752, PullRequestCodeTab.tsx:1098). A raw role="group" div with per-item pressed/onClick drops what the Base UI group owns: value/onValueChange single-selection semantics and the composite keyboard model (one tab stop, arrow keys to move between segments — here each segment is its own tab stop and arrows do nothing), plus the group's coarse-pointer hit-target normalisation (*:pointer-coarse:after:min-w-auto), so on touch each 24px-tall pill keeps a 44px ::after overlay that spills onto its neighbour and the content below.
Since the segmented size/variant you added live on the shared toggleVariants, ToggleGroupItem can already wear them; suggest keeping the track styling (rounded-lg bg-muted/45 p-0.5) as a ToggleGroup className and letting variant === "segmented" take the gap-0.5 branch rather than the joined-border branch, instead of shipping a second group primitive next to the existing one.
Posted via Macroscope — UI Consistency
8f2efda to
e8d00a2
Compare
e8d00a2 to
be5b41c
Compare
There was a problem hiding this comment.
One finding: the new segmented variant splits ownership of the segmented control's appearance between the primitive (items) and three identical call-site strings (track). Details inline.
Posted via Macroscope — UI Consistency
There was a problem hiding this comment.
One finding: the new segmented variant splits ownership of the segmented control's appearance between the primitive (items) and three identical call-site strings (track). Details inline.
Posted via Macroscope — UI Consistency
9ac145f to
f399a1b
Compare
There was a problem hiding this comment.
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 f399a1b. Configure here.
f399a1b to
5e9c854
Compare
There was a problem hiding this comment.
One finding on the new shared segmented toggle treatment: the pressed pill and its track resolve to the same token in the default dark theme, so the selected segment loses its background signal. Details inline.
Posted via Macroscope — UI Consistency
| segmented: | ||
| "border-transparent text-muted-foreground shadow-none transition-colors before:shadow-none hover:bg-accent/45 hover:text-foreground data-pressed:bg-accent data-pressed:text-foreground data-pressed:shadow-xs/5", |
There was a problem hiding this comment.
The pressed pill and the group track resolve to the same token in the default dark theme: index.css sets --muted and --accent both to --alpha(var(--color-white) / 4%) under @variant dark (:root), so the track bg-muted/45 (added in toggle-group.tsx) computes to ~1.8% white while data-pressed:bg-accent computes to 4% white — roughly #0e0e0e vs #141414 over neutral-950, and data-pressed:shadow-xs/5 adds nothing on a dark surface. hover:bg-accent/45 computes to exactly the track color, so a hovered unselected segment ends up looking like the selected one (both get text-foreground). All three new controls (UsagePage.tsx metric, period, breakdown) then communicate selection by text color alone in dark mode.
Suggest lifting the pressed/hover states with the token the primitive already uses for pressed state (bg-input/64 in the base class and dark:data-pressed:bg-input in outline), which stays above muted in both themes; data-pressed:bg-background plus a dark-only lift would work too if a white pill is wanted in light mode.
| segmented: | |
| "border-transparent text-muted-foreground shadow-none transition-colors before:shadow-none hover:bg-accent/45 hover:text-foreground data-pressed:bg-accent data-pressed:text-foreground data-pressed:shadow-xs/5", | |
| segmented: | |
| "border-transparent text-muted-foreground shadow-none transition-colors before:shadow-none hover:bg-input/32 hover:text-foreground data-pressed:bg-input/64 data-pressed:text-foreground data-pressed:shadow-xs/5", |
Posted via Macroscope — UI Consistency
672a618 to
d586e6d
Compare
There was a problem hiding this comment.
Two consistency findings on the new Usage header and loading state. Details inline.
Posted via Macroscope — UI Consistency
d586e6d to
ad49e56
Compare
ad49e56 to
0aa3ed4
Compare
0aa3ed4 to
858c85c
Compare
There was a problem hiding this comment.
Reviewed the usage refresh against the shared component system. Two ownership/consistency findings on the new shared pieces; the earlier tooltip-glass, breadcrumb-separator and segmented-track points are addressed in this revision.
Posted via Macroscope — UI Consistency
| /** Keeps an icon glyph on the content edge while its larger hit target extends outward. */ | ||
| export function WorkspacePageHeaderEdgeControl({ | ||
| className, | ||
| ...props | ||
| }: ComponentPropsWithoutRef<"div">) { | ||
| return <div className={cn("-me-[7px] flex shrink-0", className)} {...props} />; |
There was a problem hiding this comment.
This adds a shared export whose only consumer is UsagePage, and it makes the same header action align differently per page: the Pull Requests header renders the identical ghost refresh button flush inside the header padding with a size-4 glyph (_chat.pull-requests.tsx:1905-1912), and the Settings header places its trailing action flush too (settings.tsx:78-80). The offset is also tied to one call site's geometry rather than a durable contract — -me-[7px] optically centers a 28px button around a 14px glyph, which is size="icon-sm" only at sm and up (size-8 sm:size-7), so below sm the button is 32px and the glyph lands 2px inside the edge this helper exists to touch.
Suggest either dropping the wrapper and rendering the button flush like the other workspace headers, or moving the optical inset into WorkspacePageHeader itself so every workspace header's trailing icon action inherits it instead of one page opting in.
Posted via Macroscope — UI Consistency
858c85c to
af1fc0e
Compare
There was a problem hiding this comment.
One finding: the chart keeps several non-obvious rendering invariants whose rationale was dropped in this pass. Everything else in scope — the segmented variant/size coupling, the shared header and breadcrumb separator, the glass tooltip surface, the skeleton geometry, and the table row hover treatment — now lines up with the shared primitives and the prevailing repo patterns.
Posted via Macroscope — UI Consistency
af1fc0e to
4b69cf3
Compare
There was a problem hiding this comment.
One finding: the loading skeleton no longer matches the new provider-row geometry, so the rows shift horizontally when data lands. Everything else in the diff (segmented ToggleGroup/Toggle variant now owning both track and pill geometry, WorkspaceBreadcrumbSeparator reuse, WorkspacePageHeader/WorkspacePageContainer adoption, surface-glass tooltip, chart-skeleton gutter alignment) reads consistent with the shared component system.
Posted via Macroscope — UI Consistency
4b69cf3 to
095cd9e
Compare
Adopt Maria's workspace header, segmented controls, per-provider session counts, and chart tooltip UX while keeping multi-provider coverage, pricing-unavailable honesty, and Theo's rate-limits strip. Co-authored-by: Cursor <cursoragent@cursor.com>
1 participant
What changed
Screenshots
Direct parent on the left; this PR on the right. Same viewport and copied application state.
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
UsageProviderCharttestsusageMergetests, including duplicate-source provider session ownershipStack order
Built with GPT-5.6-sol in the Codex harness.
Note
Medium Risk
Touches shared usage aggregation (
mergeUsage) and presentation of cost/session totals; behavior is covered by tests but multi-environment deduplication logic is sensitive.Overview
Redesigns the Usage page around shared workspace chrome (
WorkspacePageHeader/WorkspacePageContainer), a top bar with breadcrumb + date range, and segmentedToggleGroupcontrols (newsegmentedtoggle variant) for metric, time window, and breakdown on large screens; compactSelectcontrols on small screens.Provider sidebar now follows stable
PROVIDER_ORDER, drops share bars, and shows per-provider session counts from extendedmergeUsage(ProviderTotals.sessionsfrom owned fingerprintdistinctSessions). Headline cost copy shifts to plain API estimate (no asterisk footnote); totals strip loses per-metric detail lines.Chart UX: hover tooltip follows the cursor with edge-aware placement (
ResizeObserver); inline chart legend export is removed. Minor UI polish: breadcrumb separatorclassName, table row hovers, simplified loading skeleton.Reviewed by Cursor Bugbot for commit 095cd9e. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Redesign usage insights page with segmented controls and per-provider session counts
ToggleGroupcontrols for selecting metric (cost/tokens), period, and breakdown; adds a dynamic breadcrumb showing the current window labelPROVIDER_ORDER, removes the progress bar and legend, and simplifies the totals sectionUsageProviderChartnow follows the cursor with smart clamping and repositions on resize viaResizeObservermergeUsagenow computes and exposes per-provider session counts inProviderTotals, with new test coverage for sessions aggregationUsageSkeletonandMetricare simplified to match the new layout, removing thedetailprop andresolution-based skeleton variationMacroscope summarized 095cd9e.