[charlielockyer-rice]

The even-spending marker disappears inside a foreground-colored usage-limit fill. Web and mobile composer /usage-limits bars now draw an opaque 2px tick in a narrow transparent gap, kept inside the bar at either endpoint. Unknown timing leaves the bar continuous. Percentages, pace, reset times, and provider colors retain their existing calculations.

Updated onto current main after #14477 landed, using a merge commit to preserve the contributor branch history. Both individual bars use the new shared pace helper while retaining this PR's gap and tick rendering. Main's pooled pace marks, accessible descriptions, Even pace details, label/countdown clipping, and partial-refill hatching are preserved unchanged. The diff against main remains limited to the two individual-bar components.

Credit to @charlielockyer-rice for the original design and implementation in #16937. Maintainer takeover claim.

Verification:

• 169 focused tests pass across 12 shared, web, and mobile usage files, including all 59 shared/mobile limit cases. The pre-merge selection had 166 cases; main supplies the three additional cases. This PR adds no tests for painted contrast because markup assertions would not prove visibility.
• All nine existing pooled/refresh browser tests pass. Scoped lint, formatting, and shared/web/mobile typechecks pass.
• Refreshed evidence renders actual current-main and merged-head components with identical fixed synthetic data. Before is left and after is right; light is above and dark below. It covers the tick inside fill, over the track, at the fill edge, at both time-left endpoints, unknown timing, and a translucent compact container. A 640px viewport check keeps every tick within its bar and leaves unknown timing without a tick.
• Pooled marks, partial-refill hatching, accessible window-left text, and the Even pace account detail were checked in the same fixture.

These captures use actual LimitWindows and UsageLimitsPooled source components in an isolated Vite fixture with a DejaVu font, rather than a full authenticated composer flow. Native iOS/Android, Safari, macOS, Windows, and packaged Electron were not exercised on this Linux machine. Mobile clipping still needs native visual confirmation.

Implementation: gpt-6.1-sol through Codex. Tests: gpt-6-astra through Codex. Independent full-diff reviews: claude-opus-5-5 through Claude Code and gpt-6-sol through Codex.

[coderabbitai]

Warning

Review limit reached

Only developers with an assigned seat can use this organization's usage-based review budget, and seats here are assigned manually. Ask an admin to assign a seat, or change the review continuation mode in Billing.

Next included review available in 13 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 10 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 7bf4e8b0-f65d-4084-b027-d9fff2830902

📥 Commits

Reviewing files that changed from the base of the PR and between 1cf4d4b and a249140.

📒 Files selected for processing: 2

• apps/mobile/src/features/usage/UsageLimitsSection.tsx
• apps/web/src/components/usage/UsageLimits.tsx

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 78d16f61-ae06-4f54-ba0e-293d707d3816

📥 Commits

Reviewing files that changed from the base of the PR and between 4b2f2fc and 1cf4d4b.

📒 Files selected for processing: 2

• apps/mobile/src/features/usage/UsageLimitsSection.tsx
• apps/web/src/components/usage/UsageLimits.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 3 remain after this review.

📝 Walkthrough

The mobile and web usage limit bars now position the time-left tick with edge clamping and leave a 6-pixel gap around it. The mobile bar measures its width and omits the tick when time is unknown or the bar is too narrow.

Changes: Usage limit bars

Layer / File(s)	Summary
Tick positioning and bar rendering apps/mobile/src/features/usage/UsageLimitsSection.tsx, apps/web/src/components/usage/UsageLimits.tsx	The mobile bar measures its width and positions an opaque 2-pixel tick, with no tick or gap when time is unknown or the bar is under 6 pixels wide. The web bar clamps its tick position and masks a 6-pixel gap around it. Its tooltip now calls the marker a “tick.”

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 1cf4d

The usage-limit tick change is ready to merge after normal checks; no actionable issue was established.

Architecture risk: 🔵 Low · up to 1cf4d

The change affects 2 systems.

Changed systems: apps/mobile, apps/web

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — apps/mobile (service) was modified; 1 changed file maps to changed impact.
• observed — apps/web (ui) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in apps/mobile/src/features/usage/UsageLimitsSection.tsx: WindowRow now builds the usage bar separately and tracks its measured width. The time marker’s pixel position is clamped to at least 3 pixels from either edge, and is unavailable when time remaining is unknown or the bar is under 6 pixels wide. Fill thresholds, proportions, and provider coloring remain unchanged.
• observed — Modified behavior in apps/mobile/src/features/usage/UsageLimitsSection.tsx: The bar container now measures its width and, when a marker can be placed, clips the same full-width bar into two sections separated by a 6-pixel gap. The marker changes from a translucent 1-pixel line positioned by percentage to an opaque 2-pixel line positioned in pixels; otherwise, the uncut bar is shown.
• observed — Modified behavior in apps/web/src/components/usage/UsageLimits.tsx: WindowBar now converts the time-left percentage into a CSS position clamped between 3px and 3px from the bar’s right edge.
• observed — Modified behavior in apps/web/src/components/usage/UsageLimits.tsx: The bar background and usage fill are now wrapped in a layer masked around the tick position, exposing the underlying surface through a 6px gap when a position exists. The time-left marker now uses that clamped position and is wider and taller; previously it was an unmasked, thinner line positioned directly from the percentage.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly summarizes the primary fix: keeping the even-spending tick visible in web and mobile usage-limit bars.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The description covers the problem, implementation, scope, approval context, verification results, visual evidence, and untested environments. It does not use the template headings explicitly, but all…

Full details: Description check

Explanation

The description covers the problem, implementation, scope, approval context, verification results, visual evidence, and untested environments. It does not use the template headings explicitly, but all required information is present, including links to the related PR and maintainer takeover claim.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

[macroscopeapp]

Approvability

Verdict: Approved at 1cf4d4b

Macroscope's review found this PR approvable — This is a narrowly scoped visual fix for the existing usage-limit bars on web and mobile. It changes only marker masking, clamping, and presentation while preserving usage calculations and surrounding behavior, with no product-default or static-analysis changes.

No code changes detected at a249140. Prior analysis still applies.

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

[juliusmarminge]

Taking over this one for batch usage-billing-04. I’ll rebuild the focused rendering fix against current main, keep only useful tests, and run independent reviews before publishing. No merge is planned.

Dismissing prior approval to re-evaluate 1cf4d4b

[juliusmarminge]

Merged current main after #14477 in 0c7b030, preserving branch history. The individual-bar gap/tick behavior stays; both bars now use the shared pace helper. All pooled marks, accessibility, detail rows, label clipping, and refill hatching from the merged PR are retained unchanged.

169 focused tests, nine pooled/refresh browser tests, scoped lint/format, and shared/web/mobile typechecks pass. Fresh parallel Opus and Sol reviews found no blockers. The PR body now includes refreshed current-main versus merged-head evidence and native verification limits. Leaving this unmerged and watching CI on the new head.

[juliusmarminge]

Thanks @charlielockyer-rice. The gap-and-tick treatment from this PR is what the maintainer wanted, and it landed in #22408 (which credits this PR) applied to all four Limits bars on web and mobile, including the pooled segments this PR did not cover. Closing this one as superseded rather than merging it on top.