fix: show Billing & invoices button for past-due subscriptions (#15266)

## Summary

Restore **Billing & invoices** for subscription managers regardless of
subscription state. The reported regression is an existing past-due
subscription represented by `is_active=false`,
`billing_status=payment_failed`, and a plan slug; `payment_failed` alone
can also describe a non-subscription payment failure.

## Changes

- Gate **Billing & invoices** on subscription-management permission
rather than active-subscription access.
- Treat `payment_failed` or `paused` as a delinquent subscription only
when the server also provides a plan slug.
- Keep **Manage plan** and **Cancel plan** available for delinquent
subscriptions while **Change plan** remains hidden.
- Fall back to **Subscribe** and withhold **Cancel plan** when a failed
payment has no subscription plan.
- Updated subscription panel, workspace menu, and user popover unit
coverage (78 tests passing); added the `keeps billing management
available for a past-due subscription` Playwright regression test.

## Review Focus

The API returns `is_active=false` for the reported past-due
subscription, so the former `canAccessSubscriptionFeatures` gate removed
every recovery action. The fix keeps the server response authoritative:
invoice access is permission-based across billing states, while
subscription-specific recovery requires the server-provided delinquent
status and plan identity.

Related: [Slack
report](https://comfy-organization.slack.com/archives/C097YV5BT41/p1786744822687599?thread_ts=1786730571.344519&cid=C097YV5BT41),
FE-1530, FE-1452, FE-1435, BE-6784.

## Screenshots

### AS IS → TO BE (past-due subscription)

![AS IS and TO BE
comparison](https://ampcode.com/user-content/artifacts/57aec8c7c4f8982e206a0d2efa9687b8e05b49b862d433e658e4664c7f47fcd2-file.png)

### All billing variants

`Billing & invoices` was verified visible in all ten owner variants:
active paid, payment failed, paused, ended, canceled-active, free,
never-subscribed, legacy paid, legacy free, and legacy never-subscribed.

![Billing and invoices across all
variants](https://ampcode.com/user-content/artifacts/68df1407fb94bbb621024e83b925d299425110e983ccaf51518ad3a2a2f59f04-file.png)

### Regression check

| Variant | `origin/main` | PR | Result |
| --- | --- | --- | --- |
| Active paid | Visible | Visible | Unchanged |
| Past due (`payment_failed` + plan slug) | Hidden | Visible | Fixed;
Change plan remains hidden; Cancel plan available |
| Paused subscription (`paused` + plan slug) | Hidden | Visible | Fixed;
Change plan remains hidden; Cancel plan available |
| Failed payment without a plan | Hidden | Visible | Invoice access
restored; Subscribe shown; Cancel plan hidden |
| Ended | Visible | Visible | Unchanged; Subscribe remains available |
| Canceled, still active | Visible | Visible | Unchanged |
| Free | Visible | Visible | Unchanged; Subscribe remains available |
| Never subscribed | Visible | Visible | Unchanged; Subscribe remains
available |
| Legacy paid | Visible | Visible | Unchanged |
| Legacy free | Visible | Visible | Unchanged; Subscribe remains
available |
| Legacy never subscribed | Visible | Visible | Unchanged; Subscribe
remains available |

No new clipping, overlap, or CTA regressions were found. Every invoice
button remained within the Settings dialog bounds. The sparse delinquent
card and the ended-state Free/$100 presentation are also present on
`origin/main`; they are pre-existing and unchanged by this PR.

---------

Co-authored-by: Amp <amp@ampcode.com>

Author: dante01yoon

browser_tests/tests/dialogs/creditsTile.spec.ts

@@ -85,6 +85,13 @@ const endedPersonalBillingStatus: BillingStatusResponse = {
   has_funds: true
 }
 
+const pastDueBillingStatus: BillingStatusResponse = {
+  ...mockBillingStatus,
+  is_active: false,
+  plan_slug: 'pro-monthly',
+  billing_status: 'payment_failed'
+}
+
 async function mockCloudBoot(
   page: Page,
   billingControlEnabled = true,
@@ -276,6 +283,25 @@ test.describe('Credits tile (Plan & Credits)', { tag: '@cloud' }, () => {
       .toBe('https://billing.example/portal')
   })
 
+  test('keeps billing management available for a past-due subscription', async ({
+    page
+  }) => {
+    test.setTimeout(60_000)
+
+    await mockCloudBoot(page, true, pastDueBillingStatus)
+
+    const content = await openPlanAndCredits(page)
+    await expect(
+      content.getByRole('button', { name: 'Billing & invoices' })
+    ).toBeVisible()
+    await expect(
+      content.getByRole('button', { name: 'Change plan' })
+    ).toHaveCount(0)
+
+    await content.getByRole('button', { name: 'More Options' }).click()
+    await expect(page.getByText('Cancel plan', { exact: true })).toBeVisible()
+  })
+
   test('keeps the legacy Workspace UX when billing controls are disabled', async ({
     page
   }) => {

src/platform/workspace/components/CurrentUserPopoverWorkspace.test.ts

@@ -12,9 +12,11 @@ import enMessages from '@/locales/en/main.json'
 import CurrentUserPopoverWorkspace from './CurrentUserPopoverWorkspace.vue'
 
 const state = vi.hoisted(() => ({
+  billingStatus: 'paid',
   canAccessSubscriptionFeatures: true,
   isFreeTier: false,
   isCancelled: false,
+  planSlug: 'pro-monthly' as string | null,
   canTopUp: false,
   canManageSubscription: false,
   canManageSubscriptionLifecycle: false,
@@ -53,12 +55,14 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
+    billingStatus: computed(() => state.billingStatus),
     canAccessSubscriptionFeatures: computed(
       () => state.canAccessSubscriptionFeatures
     ),
     isFreeTier: computed(() => state.isFreeTier),
     subscription: computed(() => ({
-      isCancelled: state.isCancelled
+      isCancelled: state.isCancelled,
+      planSlug: state.planSlug
     })),
     balance: ref({ amountMicros: 100 }),
     isLoading: ref(false),
@@ -157,9 +161,11 @@ function renderComponent(
 
 describe('CurrentUserPopoverWorkspace', () => {
   beforeEach(() => {
+    state.billingStatus = 'paid'
     state.canAccessSubscriptionFeatures = true
     state.isFreeTier = false
     state.isCancelled = false
+    state.planSlug = 'pro-monthly'
     state.canTopUp = false
     state.canManageSubscription = false
     state.canManageSubscriptionLifecycle = false
@@ -249,6 +255,38 @@ describe('CurrentUserPopoverWorkspace', () => {
     ).not.toBeInTheDocument()
   })
 
+  it.for(['payment_failed', 'paused'])(
+    'keeps Manage plan available for an existing %s subscription',
+    (billingStatus) => {
+      state.billingStatus = billingStatus
+      state.canAccessSubscriptionFeatures = false
+      state.canManageSubscription = true
+
+      renderComponent('team')
+
+      expect(screen.getByTestId('manage-plan-menu-item')).toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Subscribe' })
+      ).not.toBeInTheDocument()
+    }
+  )
+
+  it('shows Subscribe instead of Manage plan when payment_failed has no plan', () => {
+    state.billingStatus = 'payment_failed'
+    state.canAccessSubscriptionFeatures = false
+    state.canManageSubscription = true
+    state.planSlug = null
+
+    renderComponent('team')
+
+    expect(
+      screen.queryByTestId('manage-plan-menu-item')
+    ).not.toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Subscribe' })
+    ).toBeInTheDocument()
+  })
+
   it.for([
     {
       name: 'allows a lifecycle manager to resubscribe a cancelled plan',
@@ -335,10 +373,13 @@ describe('CurrentUserPopoverWorkspace', () => {
       state.canManageSubscription = true
       const { emitted } = renderComponent(workspaceType)
 
-      const menuItem = screen.getByTestId('manage-plan-menu-item')
+      const menuItem = screen.getByRole('button', {
+        name: enMessages.subscription.managePlan
+      })
       expect(menuItem).toHaveTextContent(enMessages.subscription.managePlan)
 
-      await user.click(menuItem)
+      menuItem.focus()
+      await user.keyboard('{Enter}')
 
       expect(state.showSettingsDialog).toHaveBeenCalledWith('workspace')
       expect(emitted('close')).toHaveLength(1)

src/platform/workspace/components/CurrentUserPopoverWorkspace.vue

@@ -143,8 +143,9 @@
       }}</span>
     </div>
 
-    <div
+    <button
       v-if="!accountActionsOnly && showManagePlan"
+      type="button"
       class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="manage-plan-menu-item"
       @click="handleOpenPlanAndCreditsSettings"
@@ -153,7 +154,7 @@
       <span class="flex-1 text-sm text-base-foreground">{{
         $t('subscription.managePlan')
       }}</span>
-    </div>
+    </button>
 
     <!-- Partner Nodes Pricing (always shown) -->
     <div
@@ -271,6 +272,7 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
 const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
 const {
+  billingStatus,
   canAccessSubscriptionFeatures,
   isFreeTier,
   subscription,
@@ -304,15 +306,22 @@ const displayedCredits = computed(() => {
 const showPlansAndPricing = computed(
   () => permissions.value.canManageSubscription
 )
+const hasDelinquentSubscription = computed(
+  () =>
+    (billingStatus.value === 'payment_failed' ||
+      billingStatus.value === 'paused') &&
+    Boolean(subscription.value?.planSlug)
+)
 const showManagePlan = computed(
   () =>
     permissions.value.canManageSubscription &&
-    canAccessSubscriptionFeatures.value
+    (canAccessSubscriptionFeatures.value || hasDelinquentSubscription.value)
 )
 const showSubscribeAction = computed(
   () =>
     (isCancelled.value && permissions.value.canManageSubscriptionLifecycle) ||
     (!canAccessSubscriptionFeatures.value &&
+      !hasDelinquentSubscription.value &&
       permissions.value.canManageSubscription)
 )
 

src/platform/workspace/components/SubscriptionPanelContentWorkspace.test.ts

@@ -584,7 +584,7 @@ describe('SubscriptionPanelContentWorkspace', () => {
   })
 
   it.for(['paid', 'payment_failed', 'paused'] as BillingStatus[])(
-    'keeps a %s personal plan visible until it is terminal',
+    'keeps billing access for a non-terminal %s personal plan',
     (billingStatus) => {
       mockIsInPersonalWorkspace.value = true
       mockIsActiveSubscription.value = false
@@ -598,6 +598,12 @@ describe('SubscriptionPanelContentWorkspace', () => {
       expect(
         screen.queryByRole('button', { name: 'Subscribe' })
       ).not.toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Billing & invoices' })
+      ).toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Change plan' })
+      ).not.toBeInTheDocument()
     }
   )
 
@@ -866,7 +872,7 @@ describe('SubscriptionPanelContentWorkspace', () => {
     { state: 'never-subscribed', hasSubscription: false, tier: 'PRO' },
     { state: 'Free', hasSubscription: true, tier: 'FREE' }
   ] as const)(
-    'hides legacy billing access from $state personal workspaces',
+    'keeps billing access for $state personal workspaces',
     ({ hasSubscription, tier }) => {
       mockBillingType.value = 'legacy'
       mockBillingStatus.value = 'inactive'
@@ -881,8 +887,8 @@ describe('SubscriptionPanelContentWorkspace', () => {
 
       expect(screen.getByRole('heading', { name: 'Free' })).toBeInTheDocument()
       expect(
-        screen.queryByRole('button', { name: 'Billing & invoices' })
-      ).not.toBeInTheDocument()
+        screen.getByRole('button', { name: 'Billing & invoices' })
+      ).toBeInTheDocument()
       expect(
         screen.getByRole('button', { name: 'Subscribe' })
       ).toBeInTheDocument()

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -177,14 +177,7 @@
               </div>
               <div class="flex flex-wrap gap-2 md:ml-auto">
                 <Button
-                  v-if="
-                    isCloud &&
-                    permissions.canManageSubscription &&
-                    (billingType === 'workspace' ||
-                      (isSubscriptionEnded &&
-                        !isFreeTierPlan &&
-                        subscription !== null))
-                  "
+                  v-if="isCloud && permissions.canManageSubscription"
                   size="lg"
                   variant="secondary"
                   class="rounded-lg bg-interface-menu-component-surface-selected px-4 text-sm font-normal text-text-primary"
@@ -242,7 +235,10 @@
               </div>
 
               <div
-                v-if="canAccessSubscriptionFeatures"
+                v-if="
+                  canAccessSubscriptionFeatures ||
+                  (isCloud && permissions.canManageSubscription)
+                "
                 class="flex flex-wrap gap-2 md:ml-auto"
               >
                 <Button
@@ -279,6 +275,7 @@
                 <Button
                   v-else-if="
                     !isSubscriptionCancelled &&
+                    canAccessSubscriptionFeatures &&
                     permissions.canManageSubscription
                   "
                   size="lg"
@@ -452,7 +449,6 @@ function openSubscriptionVerification() {
 }
 
 const {
-  type: billingType,
   canAccessSubscriptionFeatures,
   isFreeTier: isFreeTierPlan,
   isTeamPlan,

src/platform/workspace/composables/useWorkspaceMenuItems.test.ts

@@ -4,13 +4,15 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useWorkspaceMenuItems } from './useWorkspaceMenuItems'
 
 const state = vi.hoisted(() => ({
+  billingStatus: 'paid',
   canLeaveWorkspace: false,
   canManageSubscription: false,
   canManageSubscriptionLifecycle: false,
   isActiveSubscription: true,
   isDeleteDisabled: false,
   isFreeTier: false,
   isInPersonalWorkspace: false,
+  planSlug: 'pro-monthly' as string | null,
   isSubscriptionCancelled: false
 }))
 
@@ -27,8 +29,12 @@ vi.mock('vue-i18n', () => ({
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
+    billingStatus: computed(() => state.billingStatus),
     isFreeTier: computed(() => state.isFreeTier),
-    subscription: computed(() => ({ endDate: '2026-08-01T00:00:00Z' }))
+    subscription: computed(() => ({
+      endDate: '2026-08-01T00:00:00Z',
+      planSlug: state.planSlug
+    }))
   })
 }))
 
@@ -66,13 +72,15 @@ vi.mock('@/services/dialogService', () => ({
 
 describe('useWorkspaceMenuItems', () => {
   beforeEach(() => {
+    state.billingStatus = 'paid'
     state.canLeaveWorkspace = false
     state.canManageSubscription = false
     state.canManageSubscriptionLifecycle = false
     state.isActiveSubscription = true
     state.isDeleteDisabled = false
     state.isFreeTier = false
     state.isInPersonalWorkspace = false
+    state.planSlug = 'pro-monthly'
     state.isSubscriptionCancelled = false
   })
 
@@ -113,6 +121,55 @@ describe('useWorkspaceMenuItems', () => {
     )
   })
 
+  it('allows cancellation while a payment_failed plan needs payment recovery', () => {
+    state.billingStatus = 'payment_failed'
+    state.canManageSubscriptionLifecycle = true
+    state.isActiveSubscription = false
+
+    const { menuItems } = useWorkspaceMenuItems()
+
+    expect(menuItems.value.map((item) => item.label)).toContain(
+      'subscription.cancelPlan'
+    )
+  })
+
+  it('allows cancellation while an existing plan is paused', () => {
+    state.billingStatus = 'paused'
+    state.canManageSubscriptionLifecycle = true
+    state.isActiveSubscription = false
+
+    const { menuItems } = useWorkspaceMenuItems()
+
+    expect(menuItems.value.map((item) => item.label)).toContain(
+      'subscription.cancelPlan'
+    )
+  })
+
+  it('withholds cancellation when payment_failed has no subscription plan', () => {
+    state.billingStatus = 'payment_failed'
+    state.canManageSubscriptionLifecycle = true
+    state.isActiveSubscription = false
+    state.planSlug = null
+
+    const { menuItems } = useWorkspaceMenuItems()
+
+    expect(menuItems.value.map((item) => item.label)).not.toContain(
+      'subscription.cancelPlan'
+    )
+  })
+
+  it('withholds cancellation for payment_failed without lifecycle permission', () => {
+    state.billingStatus = 'payment_failed'
+    state.canManageSubscriptionLifecycle = false
+    state.isActiveSubscription = false
+
+    const { menuItems } = useWorkspaceMenuItems()
+
+    expect(menuItems.value.map((item) => item.label)).not.toContain(
+      'subscription.cancelPlan'
+    )
+  })
+
   it('rechecks eligibility before opening the cancellation dialog', () => {
     state.canManageSubscriptionLifecycle = true
     const { menuItems } = useWorkspaceMenuItems()

src/platform/workspace/composables/useWorkspaceMenuItems.ts

@@ -15,7 +15,7 @@ import { useDialogService } from '@/services/dialogService'
  */
 export function useWorkspaceMenuItems() {
   const { t } = useI18n()
-  const { isFreeTier, subscription } = useBillingContext()
+  const { billingStatus, isFreeTier, subscription } = useBillingContext()
   const {
     permissions,
     uiConfig,
@@ -65,7 +65,10 @@ export function useWorkspaceMenuItems() {
   const canCancelPlan = computed(
     () =>
       permissions.value.canManageSubscriptionLifecycle &&
-      isActiveSubscription.value &&
+      (isActiveSubscription.value ||
+        ((billingStatus.value === 'payment_failed' ||
+          billingStatus.value === 'paused') &&
+          Boolean(subscription.value?.planSlug))) &&
       !isSubscriptionCancelled.value &&
       !isFreeTier.value
   )