Repository navigation
UI Consistency: 2 issues found
Two findings in the new subscription-limit meters, both posted as inline comments.
apps/web/src/components/usage/UsagePage.tsx(label span inUsageLimitMeters): the fixed2.25remlabel column has no clipping, so provider-supplied labels such as Codex's"Secondary"/"Usage"fallbacks or Claude's model-scoped"Future Model"overflow into the meter track or wrap and desync the two-row grid. Suggested addingtruncate(full text remains in the tooltip).apps/web/src/components/usage/UsagePage.tsx(usageText): thearia-valuetextfor unlimited windows hardcodes "No five-hour limit on this plan", so an unlimited weekly/monthly window is announced with the wrong window while the visible copy reads "No limit". Suggested window-agnostic wording.
Details
Note
Your check run agent prompt is: .macroscope/check-run-agents/ui-consistency.md
More information about how Check Run Agents work can be found in our Help Center.
Scope reviewed: apps/web/src/components/usage/UsagePage.tsx, apps/web/src/components/usage/UsageProviderChart.tsx, apps/web/src/components/usage/UsagePage.test.tsx, with apps/web/src/components/ui/tooltip.tsx, apps/web/src/components/usage/usageProviders.ts, and packages/shared/src/usageFormat.ts as context. Server, contracts, mobile, and docs changes were read for context only.
Checked and found acceptable:
- Prior-run findings are resolved: the meter wrapper/row geometry is now hoisted into
USAGE_LIMITS_CLASS_NAME/USAGE_LIMIT_ROW_CLASS_NAMEand shared withUsageSkeleton, and the skeleton now mirrors the reshaped row (no stale color-dot placeholder, matchinggap-6/gap-1.5, second-line and meter placeholders,min-h-60chart lane matchingUsageProviderChart). TooltipTrigger render={<div .../>}matches the established repo pattern for non-interactive tooltip anchors (e.g.ResourceTelemetryDiagnostics,DiagnosticsSettings,ChatMarkdown), so it is not treated as a primitive-reconstruction or interaction regression here.- Meter track/fill spans are grid children (blockified), so
h-1 overflow-hidden rounded-fullrenders as intended;role="progressbar"witharia-valuenowomitted for unlimited windows is a valid indeterminate state. - Inline
backgroundColorreadsPROVIDER_PRESENTATION[...].color, which routes Codex throughvar(--contrast-foreground)and therefore stays theme-token driven. - Chart column change from fixed
h-56tomin-h-56 flex-1pluslg:h-fullon the wrapper preserves the two-column responsive layout and keeps the skeleton lane geometry in sync. - No environment-scoped actions, global CSS, or theme variant changes are involved in this diff.
π Agent activity β 12 tool calls
π Checking the current PR head against prior review runs, it looks like the earlier issues around hoisted constants and skeleton updates have been addressed. Now I'm digging into UsagePage.tsx, specifically how the TooltipTrigger renders with the row class name to see if there's still a concern with the Tooltip primitive's usage. I'm weighing whether swapping in a div for the tooltip trigger's render loses keyboard focusability, since TooltipTrigger normally defaults to a button, and I need to check how Tooltip is used elsewhere in the repo for precedent. I'm also considering whether the aria-valuetext on the progressbar span is fine, and whether nesting a progressbar role inside a tooltip trigger creates any conflicting interactive roles.
1. browse_code β apps/web/src/components/ui/tooltip.tsx
2. browse_code β apps/web/src/components/usage/UsagePage.tsx
π I'm now looking at how the section renders rows and where UsageLimitMeters sits at the head.
3. browse_code β apps/web/src/components/usage/UsagePage.tsx
4. browse_code β apps/web/src/components/usage/UsagePage.tsx
π I'm noticing the tooltip trigger is rendered as a plain div instead of Base UI's default button, which likely breaks keyboard focusabilityβso the exact reset time shown in the tooltip becomes unreachable for keyboard users, even though the docs describe hovering as the way to see it. I also spot a copy bug: the
aria-valuetextfor unlimited plans hardcodes "No five-hour limit" regardless of window type, so a weekly window would incorrectly display "five-hour" in its accessible text on both desktop and mobile. Checking whether normalizeCodex or normalizeClaude ever actually producesunlimited: trueβ from what I see the tests explicitly assert no unlimited window is invented, so this text may be unreachable in practice but still worth flagging since the contract supports it. Now I'm considering whether tooltips need a TooltipProvider wrapper at the app root for proper delay grouping, and confirming that omittingaria-valuenowfor unlimited/indeterminate progressbars is fine. Looking at how the tooltip trigger merges its className with the render prop's div β Base UI should handle that merge correctly, so nesting role="progressbar" inside a hover-only trigger seems fine, though I note tooltips won't work on touch devices without focus support, consistent with the "hover" language in the docs. I want to check other TooltipTrigger usages in the codebase to see how the render pattern with tabIndex is typically handled.
5. git_tools β TooltipTrigger
π Since div triggers for tooltips are already an established pattern elsewhere in the repo, like the chart bars in ResourceTelemetryDiagnostics, flagging this here would just be unrelated repo-wide cleanup, so I'll skip it. Now I'm considering whether removing the color dot from provider rows on web breaks the visual link between a row and its chart series, since previously that dot acted as the legend color matching the chart. I need to check whether UsageProviderChart has its own legend that identifies series by provider name, since the provider logo icon alone might not be enough to preserve that association. I'm also noting that summaryProviders now includes providers with subscription limits but no actual usage data. Separately, I'm worried about the fixed 2.25rem label column width for provider labels β arbitrary strings like "Future Model" could wrap since the span lacks truncate or min-w-0, causing row misalignment with the bars since grid items wrap by default when text is too long for the column. The countdown span already uses truncate so that's fine. I notice the "Limits last updated ... ago" text uses a very small 9px size, which might just be an existing pattern in the repo rather than a new inconsistency worth flagging. More concerning is the hardcoded aria-valuetext "No five-hour limit on this plan" being reused for any unlimited window β that's a real accessibility bug since a weekly unlimited window would get the wrong screen reader announcement. I'm digging into whether "unlimited" can actually be true for non-fiveHour windows currently, and it seems the server never actually sets unlimited=true right now, which weakens the practical impact of this bug since it's only reachable if a future server implementation sets it. Still, since it's in the changed code and affects accessibility copy, it's worth flagging even if not currently triggered by existing server logic. I want to check if there's a stronger finding around the chart legend, specifically whether removing a color indicator affects usability, so I'm going to look at UsageProviderChart to see how the legend and colors are rendered.
6. browse_code β apps/web/src/components/usage/UsageProviderChart.tsx
7. git_tools β text-[9px]
π I'm checking whether the chart tooltip's provider marks use color dots, and want to look at lines 428-460 to confirm the summary dot removal doesn't strip the chart's color legend.
8. browse_code β apps/web/src/components/usage/UsageProviderChart.tsx
9. browse_code β apps/web/src/components/usage/usageProviders.tsx
π I'm realizing the chart tooltip matches providers by mark and label rather than color, so if the marks are monochrome, removing the color dot from the summary row would eliminate the only visual link between chart line colors and providersβthat's a real potential regression worth flagging. That said, this reads like an intentional design change since the skeleton was updated to match, and there's still the meter bar fill which shows provider color for those with limits. Given guidance to not fail on aesthetic preferences, I'm leaning toward not flagging this, but I should verify by checking the actual mark colors used for each provider.
10. browse_code β */usage/usageProviders.
11. browse_code β apps/web/src/components/usage/usageProviders.ts
π I notice codex uses a contrast-foreground CSS variable for the meter fill, which resolves fine against the muted track background, so that's consistent. Mobile styling is out of scope here, so I'll skip that and turn my attention to checking how the web tests mock things. Testing whether Tooltip needs a provider context and confirming the role/aria attributes are wired correctly β those look fine. The more interesting thing is the label column width: with a 36px first column, short labels like "Week" or "5h" fit, but something like "Future Model" would wrap to multiple lines, growing the row height and pushing the bar since it's centered β a minor visual degradation rather than a real bug. Digging further, I realize "Secondary" is a real label the normalizer can emit when Codex omits window durations, and at 10px it's roughly 50px wide against a 36px column with no word-break, so it would actually overflow and collide with the bar rather than gracefully wrap β that's a genuine layout break tied to a tested code path. I'll note the mobile version has the same unguarded width issue but keep my focus on web. My concrete finding: add a
truncateclass to the label span (around line 545-547) to prevent overflow from provider-supplied labels like "Secondary" or "Future Model." For a second finding, I'm noticing the unlimited-window aria-valuetext hardcodes "five-hour" language regardless of the actual window kind, while the visible copy correctly stays kind-agnostic with "No limit" β so this is really just an accessibility string bug, not a visual one, but still worth flagging as a minor inconsistency. I'll simplify to window-agnostic wording like "Unlimited on this plan." since the aria-valuetext hardcodes "five-hour" for every unlimited window, which mislabels weekly/monthly meters. I'm also double-checking the grid row layout and padding classes to make sure nothing else looks off. The pl-6 usage-limits class stays consistent with the share line, and the skeleton test's four grid rows for two providers times two windows checks out. Providers with limits but zero usage still show reasonable defaults, and the tooltip trigger div merges classNames properly without breaking the grid, so nothing else seems problematic there. Checking the progressbar spans, I confirm that since grid items get blockified automatically, the inline span elements for the track and fill become block-level regardless of the missing explicit "block" class β this holds true both in the main component and in the skeleton version. Now I'm weighing whether to mark this check as pass or fail overall. The two findings I have (the truncate issue and the height layout) are fairly minor, but the instructions suggest this check defaults to failure when there are any findings at all, so I'll lean toward reporting failure while noting the findings are low severity rather than critical regressions. I need to confirm the exact head line numbers for both comments since they're in the added block (roughly lines 503-595). For the first comment, I'll suggest a single-line fix on the span's className to add truncation handling. For the second, I'm working out a multi-line suggestion spanning the usageText block to address the same overflow issue.
12. modify_pr β UI consistency review of the new Usage subscription-limit meters. Two small issues in apps/web/src/components/usage/UsagePage.tsx, both in the new UsageLimitMeters markup; the rest of the reshaped provider rows, the skeleton, and the chart flex geometry look consistent with the loaded layout.
Agent Credits: 189 credits