feat(credits-admin): show explicit subscription state chip

[fbac]

Summary

The "Entitled" badge collapsed two distinct states into "not entitled": an account that never subscribed (no Subscription row) and one whose subscription lapsed (expired/revoked). Admins couldn't tell them apart from the top card.

Replace the yes/no badge with a status chip driven by data already sent (j.subscription, effectiveStatus, isEntitled):

Case	Chip	Color
No Subscription row	none	grey
Entitled (trial/active/grace/billingRetry)	raw effective status	green
Lapsed (expired/revoked)	raw effective status	red

Client-only (admin-page.ts). The sub-block below still shows stored-vs-effective status + periods for the row case.

Follows the credits-admin audit sweep. Touches admin-page.ts + admin-page.test.ts — same files as open #369; whichever merges second rebases the test (trivial, keep both new tests).

Test Plan

• TDD red→green; pnpm vitest run tests/credits-admin/ → 54/54
• Rendered browser JS syntax-checked via node --check
• typecheck / eslint / prettier --check clean

---

^{Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.}

Note

Show subscription state chip in credits admin page

Replaces the 'Entitled'/'Not Entitled' chip in the balances section with a 'Subscription' chip that displays the effectiveStatus from j.subscription. When no subscription exists, the chip shows 'none' with a neutral badge-none style; otherwise it uses badge-yes or badge-no based on isEntitled.

^{Macroscope summarized 48810e0.}

[coderabbitai]

Warning

Review limit reached

@fbac, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 54 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5d606548-54dc-43ce-b2f9-ca4d6b2a9930

📥 Commits

Reviewing files that changed from the base of the PR and between 9a50bb4 and 48810e0.

📒 Files selected for processing (2)

• src/api/v2/credits-admin/handlers/admin-page.ts
• tests/credits-admin/admin-page.test.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fbac/credits-admin-subscription-state-chip

---

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.}

[macroscopeapp]

Approvability

Verdict: Needs human review

Changes are in the credits-admin path (billing-related) and the author is not the designated code owner for either modified file. While the changes are purely presentational, human review is recommended given file ownership and the sensitive directory.

No code changes detected at 48810e0. Prior analysis still applies.

^{You can customize Macroscope's approvability policy. Learn more.}

[claude]

Claude finished @fbac's task —— View job

---

Code Review Complete ✅

Todo List

• Read modified files to understand changes
• Verify compliance with CLAUDE.md requirements
• Review code quality and logic
• Check for potential bugs or issues
• Assess security concerns
• Evaluate test coverage
• Provide comprehensive feedback

---

Summary

This PR cleanly improves the credits admin UI by replacing a binary "Entitled/Not Entitled" badge with a more nuanced subscription state chip. The changes are client-side only (no backend logic), well-tested, and compliant with repository guidelines.

✅ Code Quality & Best Practices

Strong points:

• Single responsibility: Changes are focused on presentation logic only (lines 243-250 in admin-page.ts)
• Data-driven: Uses existing response data (j.subscription, j.isEntitled, effectiveStatus) without adding new API calls
• Consistent styling: Uses existing badge classes (badge-none, badge-yes, badge-no) that follow the established design system
• Clear logic: The three-way conditional is straightforward and easy to understand:

  var subState = j.subscription ? j.subscription.effectiveStatus : "none";
  var subClass = !j.subscription ? "badge-none" : j.isEntitled ? "badge-yes" : "badge-no";

✅ Compliance with Repository Guidelines

CLAUDE.md requirements:

• ✅ Money/credits rule: This change is read-only UI — no writes to UserCredits or CreditLedger, no balance mutations. It only displays data already provided by the backend.
• ✅ API contracts: No changes to request/response schemas. This is purely client-side rendering.
• ✅ Admin page sync: This change fulfills the requirement in src/payments/AGENTS.md:137-157 to keep the admin page in sync with the domain model. It surfaces subscription state information more clearly.

✅ Potential Issues

None identified. The code is straightforward and defensive:

• Properly handles the null/undefined case when no subscription exists
• Uses ternary operators correctly with proper precedence
• Escapes output with the existing esc() function (line 250)

✅ Performance Considerations

No concerns:

• Client-side rendering with no additional network requests
• Minimal DOM manipulation (single innerHTML update)
• No loops or expensive operations

✅ Security Concerns

No issues:

• Uses existing esc() function for HTML entity encoding (line 250)
• No new injection vectors
• No changes to authentication/authorization
• CSP headers remain unchanged

✅ Test Coverage

Excellent:

• New test added in admin-page.test.ts:50-55 that verifies:
  • The b-substate element is rendered
  • The badge-none class is present (for no-subscription case)
  • The code references effectiveStatus from the data
• Test follows the existing pattern (other tests check for specific elements and data usage)
• Test is concise and focused

Minor suggestion: The test only checks the "none" case. Consider adding integration tests that verify the "entitled" (green badge) and "lapsed" (red badge) cases as well, though this may be overkill for a presentation-only change.

---

Verdict: Approve ✅

This is a clean, focused improvement that:

• Solves a real admin UX problem (distinguishing never-subscribed from lapsed)
• Introduces no new risks or complexity
• Is well-tested and follows all repository conventions
• Complies with the strict money/credits rules (read-only)

The implementation is production-ready. Nice work on the incremental cleanup sweep! 🎯

---