feat(usage): show API list-price in breakdowns

[harryzhou2000]

Summary

• Add an API list-price column to the Usage Models and Providers tables.
• Show the priced portion of each row and qualify requests that could not be priced because a price or usable usage was unavailable.
• Preserve an em dash for older proxies that do not return pricing coverage fields, so unknown coverage is never displayed as free.
• Document that Usage values are list-price estimates, not billing receipts.

This is the UI follow-up to the per-row pricing coverage added in #2365 (related issue #1820); it does not alter the estimator.

Verification

• cd gui && bun test tests/usage-layout.test.ts
• cd gui && bun run lint:i18n && bun run lint && bun run build
• bun run typecheck
• cd docs-site && bun run build
• cd gui && bun test tests — 1,933 pass; the only sandbox failure was the pre-existing Cursor discovery fixture unable to bind 127.0.0.1. Its isolated outside-sandbox run passed: bun test tests/models-empty-provider.test.tsx (13 pass).
• OCX_TEST_NO_QUEUE=1 bun run test — the unrelated staged-update recovery test remains non-green: tests/update/update-stop-first.test.ts expected exit 1, received 0. The feature-specific checks above pass.

Visual audit of the production-built Usage component with priced and excluded rows:

Checklist

• Scope stays focused and avoids unrelated cleanup.
• Docs or release notes were updated when needed.
• Security-sensitive changes were reviewed for secrets, auth, and unsafe defaults.

Review readiness checklist

This PR stays in draft until every box below is ticked. Tick all four boxes once the requirements are met:

• All CI tests are green on my local testing.

• I pushed my PR to the latest dev commit.

• I resolved all correct Codex and CodeRabbit findings.

• My PR is ready for review.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

✅ Deterministic PR hygiene checks passed.

[lidge-jun]

리뷰 · 우선순위 46 / 80

이 PR은 harryzhou2000이 만든 Usage GUI 후속이다. 이미 dev에 들어간 #2365가 모델·공급자 행에 estimatedCostUsd / pricedRequests / unpricedRequests를 실어 주는데, 화면의 Models·Providers 표에는 아직 그 칸이 없다. 이 디프는 gui/src/pages/Usage.tsx에 UsageListPrice를 추가해서 행마다 API 정가 추정액을 보여주고, 가격·사용량을 못 맞춘 요청은 “excluded”로 옆에 적는다. 예전 프록시처럼 커버리지 필드가 아예 없으면 em dash(—)만 남겨서, 모르는 값을 0원(무료)처럼 보이게 하지 않는다. docs-site 웹 대시보드 안내와 9개 로케일 i18n 키(usage.col.apiListPrice, usage.cost.excluded), gui/tests/usage-layout.test.ts 레이아웃 테스트까지 같이 온다.

지금 dev HEAD는 29bb221c3(패키지 2.49.0)이다. Usage 요약 카드에는 이미 총 정가 추정과 usage.cost.disclaimer / unpricedNote가 있다. 백엔드 src/usage/summary.ts도 행 단위 가격 필드를 이미 내보낸다. 그래서 이 PR은 추정기를 바꾸지 않고, 이미 있는 API 필드를 표에 그리는 UI 완성 조각이다. 관련 이슈 #1820은 CLOSED, #2365는 MERGED다. tip 축(#4002 근처)이나 공급자 런타임 스택과는 겹치지 않는다. 점수는 46이다. 범위가 얇고 방향이 맞고 테스트도 있지만, (1) 지금 draft, (2) tip이 아닌 polish, (3) 전부 미가격이면 ~$0.0000 (N excluded)가 여전히 “0원처럼” 보일 수 있다는 UX 잔여가 있다.

라인 / 경로로 보면 문제·확인할 지점은 이렇다.

gui/src/pages/Usage.tsx UsageListPrice - 커버리지 필드가 하나라도 있으면 estimatedCostUsd ?? 0을 그린다. 전부 unpriced여도 ~$0.0000이 나온다. excluded 문구로 완화했지만, 0원을 아예 숨기고 excluded만 보이게 할지 한 번 더 보면 좋다
gui/src/pages/Usage.tsx Models/Providers 표 헤더 - usage.cost.disclaimer를 th title에만 둔다. 요약 카드 본문 disclaimer와 중복은 괜찮지만, 모바일·접근성에서 title만으로는 부족할 수 있다
docs/pr-assets/usage-api-list-price.png - PR 자산용 스크린샷이다. 머지 후 docs/pr-assets에 남을지, 리뷰용만인지 정리하면 저장소가 덜 지저분해진다
PR 상태 draft - CodeRabbit도 draft라서 스킵했다. Ready로 올리기 전에는 tip 후보로 보지 말 것
enforce-target - 리뷰 시점 기준 아직 queued였다. Ready 전에 green 확인할 것

메인테이너의 판단이 필요한 지점

• draft를 Ready로 올릴 타이밍(2.49 tip과 묶을지, polish 배치로 받을지)
• 전부 unpriced 행에서 ~$0.0000을 계속 보여줄지, excluded만 남길지
• docs/pr-assets 스크린샷을 트리에 유지할지

너의 추천
방향은 맞고, draft를 Ready로 올린 뒤 polish로 받아도 됩니다. 추정기·가격 테이블은 건드리지 않으니 #2365와 충돌도 없다. Ready 전에 (1) 전부 unpriced UX를 한 줄로 다듬을지 결정하고, (2) CI/enforce-target green을 확인하세요. types/config 대분할로 무효화되는 형태는 아니다. 닫을 이유는 없다.

이 댓글은 grok-bot이 작성했습니다

[github-actions]

⏳ DRAFT

• review readiness checklist open (0/4 boxes ticked).

What to do

• Tick all four boxes in the PR description once you're done (currently 0/4).

Review readiness checklist

• ⬜ All CI tests are green on my local testing.
• ⬜ I pushed my PR to the latest dev commit.
• ⬜ I resolved all correct Codex and CodeRabbit findings.
• ⬜ My PR is ready for review.

0/4 boxes ticked.

This PR stays in draft until every box above is ticked.