[BUG] `/usage` dialog: inverted progress bars, overlapping text elements, and missing accent color

Preflight Checklist

• [x] I have searched existing issues and this hasn't been reported yet
• [x] This is a single bug report (please file separate reports for different bugs)
• [x] I am using the latest version of Claude Code

What's Wrong?

The /usage dialog renders with three visual bugs:

• Progress bars are inverted (a "1% used" bar appears nearly full, filling right-to-left instead of left-to-right)
• Body text and descriptions are illegible due to overlapping text and figures in the display
• Accent color has regressed from light blue to grey, collapsing the visual hierarchy of the entire dialog

What Should Happen?

It should display with blue bar graphs on black backgrounds and without overlapping text or the Current Session/Sonnet only/Weekly Limit headings and subheadings not covering the usage graphs

Error Messages/Logs

Steps to Reproduce

1. Open Claude Code in a Terminal (iTerm/Terminal)
2. Run /usage
3. Wait for dialog to paint in TUI and "settle"

Note: pressing "w" would cause the issue to appear if it didn't initially for a second user who I asked to confirm the issue

Claude Model

None

Is this a regression?

Yes, this worked in a previous version

Last Working Version

_No response_

Claude Code Version

1.1.116

Platform

Anthropic API

Operating System

macOS

Terminal/Shell

Terminal.app (macOS)

Additional Information

GIF

Terminal
<img width="1752" height="1558" alt="Image" src="https://github.com/user-attachments/assets/566ed06c-b325-4f8a-9300-3a29d4540e55" />
iTerm
<img width="3416" height="2000" alt="Image" src="https://github.com/user-attachments/assets/e860a87a-e32d-404b-b93e-bfc085430817" />

Screenshots:

Terminal
<img width="888" height="791" alt="Image" src="https://github.com/user-attachments/assets/750ae886-8b5f-4f11-9aaf-a24feeb4b290" />
iTerm
<img width="1840" height="1143" alt="Image" src="https://github.com/user-attachments/assets/12871d0f-b6c2-4044-b236-8dc83ee0cdd5" />