fix(web): polish pooled usage limit display

[akash3444]

Problem

On Usage → Limits, a Claude Session window that hasn't started yet (no message sent in the current 5‑hour window) showed an empty white pill at the right end of its bar. The badge plate rendered even when it had no countdown and no reset credits to show. Two smaller visual issues on the same page: the pace icon next to "left" sat a couple of pixels above the text, and the model detail dialog's edge looked flat against the page.

Change

• Empty reset badge. Until the first message, Claude reports resets_at: null for the 5‑hour window, so formatResetsIn returns null and there are no banked credits. PoolSegment now renders the badge plate only when there is a countdown or banked credits to show.
• Pace icon alignment. The icon was a direct child of the items-baseline row, so its box aligned to the baseline and rode high. "left" and the icon now share an inline-flex items-center wrapper.
• Model dialog edge. The dialog uses a soft ring-border/70 and shadow-2xl instead of the default border.

All three are in apps/web/src/components/usage/; no contract, server, or mobile changes.

Scope and approval

Small, focused fixes for obvious visual bugs on one page (an empty badge and a misaligned icon), plus a one-line style polish on that page's dialog. No behavior or data changes.

Verification

Checked in the dev desktop app (Electron, vp run dev:desktop) against a copy of real usage data, capturing before/after at 2× from the same window and layout. The local Claude session was already active, so to reproduce the "not started" Session state I temporarily patched the dev server to report the 5‑hour window with no reset time. That patch is not part of this PR. Weekly windows, which always have a reset time, render the badge exactly as before. I did not check mobile, which doesn't use this component.

	Before	After
Session badge
Pace icon (3×)
Model dialog

Claude Opus 5.5 via Claude Code in T3 Code.

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at e83db33

Macroscope's review found this PR approvable — This is a localized UI polish change affecting only pooled usage display and model-dialog styling. It introduces no new capability, data or contract changes, configuration/default changes, or sensitive logic, and its runtime impact is limited to presentation.

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

[coderabbitai]

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: 44f7909f-b4b3-4a9e-93a3-3cbab2c1381c

---

📥 Commits

Reviewing files that changed from the base of the PR and between d83929a and 7fe25ca.

---

📒 Files selected for processing (2)

• apps/web/src/components/usage/UsageLimitsPooled.tsx
• apps/web/src/components/usage/UsageModelDialog.tsx

---

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

---

---

📝 Walkthrough

Walkthrough

The pooled usage display now omits reset information when no reset countdown or credits exist. It also groups the remaining-credit label with its optional pace icon. The usage model dialog popup receives updated border, ring, and shadow styling.

Changes

Pooled usage display

Layer / File(s)	Summary
Pooled usage display apps/web/src/components/usage/UsageLimitsPooled.tsx	The countdown-and-credit plate appears only when reset data exists. The “left” label and optional pace icon are grouped in an inline-flex container.

Usage model dialog

Layer / File(s)	Summary
Dialog popup styling apps/web/src/components/usage/UsageModelDialog.tsx	The dialog popup gains borderless styling, a border-colored ring, and a larger shadow.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

---

Merge Risk: ⚪ Minimal · up to 7fe25

The reset details now appear only when data is available, and the dialog’s existing width is preserved. These presentation changes show no identified issue that should block merging.

Pre-merge checks | 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title is concise, uses the repository's conventional commit format, and accurately summarizes the pooled usage display fixes.
Description check		The description includes the required Problem, Change, Scope and approval, and Verification sections. It explains the affected behavior, implementation, scope, focused manual verification, screenshots…
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.

---

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Commit to this branch
• Create a new PR

---

🧪 Generate unit tests (beta)

• Create a new PR

---

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

---

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

[juliusmarminge]

Note

This comment is posted by Julius' dot

Closing under the one-problem rule: hiding the empty reset badge does not require changing the pace icon alignment or the model dialog's border and shadow. Please split these independent changes into focused PRs and keep the relevant before/after screenshots with each.

[akash3444]

@juliusmarminge Thanks, split as suggested. Each fix has its own PR with its own before/after screenshots:

• fix(web): hide the empty reset badge on unstarted limit windows #18579 hides the empty reset badge on unstarted limit windows
• fix(web): center the pace icon on the limit card's "left" label #18580 centers the pace icon on the "left" label

I've dropped the model dialog border/shadow change.