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

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 the data already sent:
- no subscription row  -> grey 'none'
- entitled (trial/active/grace/billingRetry) -> green, raw effective status
- lapsed (expired/revoked) -> red, raw effective status

Client-only; the sub-block still shows stored vs effective status and periods.

Author: fbac

src/api/v2/credits-admin/handlers/admin-page.ts

@@ -55,6 +55,7 @@ function buildHTML(nonce: string, creditsPerUsd: number): string {
   .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
   .badge-yes { background: #d1f0d6; color: #14752a; }
   .badge-no { background: #f7d6d6; color: #a3151f; }
+  .badge-none { background: #e8e8ed; color: #6e6e73; }
   table { width: 100%; border-collapse: collapse; font-size: 13px; }
   th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #ececec; }
   th { color: #6e6e73; font-weight: 600; }
@@ -100,7 +101,7 @@ function buildHTML(nonce: string, creditsPerUsd: number): string {
     <h2>Account <span id="detail-id" style="font-weight:400;font-size:13px"></span></h2>
     <div class="balances">
       <div class="balance primary"><div class="k">Balance</div><div class="v" id="b-balance"></div></div>
-      <div class="balance"><div class="k">Entitled</div><div class="v"><span id="b-entitled"></span></div></div>
+      <div class="balance"><div class="k">Subscription</div><div class="v"><span id="b-substate"></span></div></div>
     </div>
     <div id="sub-block" style="margin-top:16px"></div>
   </div>
@@ -239,9 +240,14 @@ function buildHTML(nonce: string, creditsPerUsd: number): string {
     document.getElementById("detail").classList.remove("hidden");
     document.getElementById("detail-id").textContent = j.accountId;
     document.getElementById("b-balance").textContent = fmtCredits(j.balanceCredits);
-    document.getElementById("b-entitled").innerHTML = j.isEntitled
-      ? '<span class="badge badge-yes">entitled</span>'
-      : '<span class="badge badge-no">not entitled</span>';
+    var subState = j.subscription ? j.subscription.effectiveStatus : "none";
+    var subClass = !j.subscription
+      ? "badge-none"
+      : j.isEntitled
+        ? "badge-yes"
+        : "badge-no";
+    document.getElementById("b-substate").innerHTML =
+      '<span class="badge ' + subClass + '">' + esc(subState) + "</span>";
     var sb = document.getElementById("sub-block");
     if (j.subscription) {
       var s = j.subscription;

tests/credits-admin/admin-page.test.ts

@@ -46,4 +46,11 @@ describe("credits-admin page", () => {
     expect(res.text).toContain("Allotment");
     expect(res.text).toContain("perPeriodCredits");
   });
+
+  it("renders subscription state as a colored status chip (none/entitled/lapsed)", async () => {
+    const res = await adminRequest(app, false).get("/api/v2/credits-admin/");
+    expect(res.text).toContain('id="b-substate"');
+    expect(res.text).toContain("badge-none");
+    expect(res.text).toContain("effectiveStatus");
+  });
 });