fix(billing): address review findings on payment-method collection UX

- Validate currency code with /^[A-Z]{3}$/ before passing to
  toLocaleString, falling back to USD for empty/invalid values
- Gate owed-balance notice CTAs (terms note + action buttons) behind
  permissions.canTopUp so non-owner members see the balance text but
  not owner-only billing actions
- Add neutral message branch for null paymentMethodCapability (status
  still loading or unavailable) so users are never stuck with no
  feedback
- Add noopener,noreferrer to window.open calls in CreditsTile and
  SpendLimitDialogContent to prevent reverse-tabnabbing
- Fix SpendLimitDialogContent title/ctaLabel to branch on scenario as
  well as capability, making visible label, aria-label, and action
  self-consistent for reusable+limit_reached
- Replace hardcoded English METHOD_LABELS with vue-i18n keys under
  billing.spendLimit.methodLabels
- Import PaymentMethodCapability from workspaceApi instead of
  duplicating the union in SpendLimitDialogContent and dialogService
- Make the pay_owed processing-toast branch explicit in
  billingOperationStore to avoid a silent implicit else
- Add tests: currency fallback, canTopUp gate, null-capability branch

Author: wei-hai

src/locales/en/main.json

@@ -4503,7 +4503,13 @@
       "updatePaymentMethodCta": "Update payment method",
       "orBuyManually": "Or buy credits manually",
       "capabilityError": "Unable to load payment method status. You can add a payment method below.",
-      "defaultMethod": "Your current payment method"
+      "defaultMethod": "Your current payment method",
+      "methodLabels": {
+        "alipay": "Alipay",
+        "card": "Your card",
+        "us_bank_account": "Your bank account",
+        "link": "Link"
+      }
     },
     "owedBalance": {
       "title": "Outstanding balance: {amount}",
@@ -4512,7 +4518,8 @@
       "oneTimeOnlyHint": "Your current method can't be used to settle a balance — add a card, bank account, or Link",
       "payNow": "Pay now",
       "processing": "Processing payment…",
-      "chargeAutomatic": "A charge will process automatically."
+      "chargeAutomatic": "A charge will process automatically.",
+      "unknownCapability": "Payment method status unavailable. Refresh to try again."
     },
     "consent": {
       "paymentMethodBody": "By adding a payment method, you authorize Comfy Org to automatically charge it — without further action from you at the time — for unpaid balances and usage overages, in the amount you owe at billing time. You can remove it at any time in {settingsLink} (an active subscription or unpaid balance may need to be resolved first).",

src/platform/cloud/subscription/components/CreditsTile.test.ts

@@ -14,7 +14,7 @@ type Balance = Pick<
   | 'cloudCreditBalanceMicros'
   | 'prepaidBalanceMicros'
   | 'pendingChargesMicros'
->
+> & { currency?: string }
 type Subscription = Pick<SubscriptionInfo, 'duration' | 'renewalDate'> & {
   tier: SubscriptionInfo['tier'] | 'TEAM'
 }
@@ -183,7 +183,9 @@ const i18n = createI18n({
             "Your current method can't be used to settle a balance — add a card, bank account, or Link",
           chargeAutomatic: 'A charge will process automatically.',
           payNow: 'Pay now',
-          processing: 'Processing payment…'
+          processing: 'Processing payment…',
+          unknownCapability:
+            'Payment method status unavailable. Refresh to try again.'
         }
       }
     }
@@ -541,5 +543,44 @@ describe('CreditsTile', () => {
       const btn = screen.getByRole('button', { name: /Processing payment/i })
       expect(btn.getAttribute('disabled')).not.toBeNull()
     })
+
+    it('falls back to USD when balance.currency is an empty string', () => {
+      activeProSubscription()
+      state.balance = {
+        amountMicros: 500,
+        pendingChargesMicros: 5_000_000,
+        currency: ''
+      }
+      state.paymentMethodCapability = 'reusable'
+      renderTile()
+      const alert = screen.getByRole('alert')
+      expect(alert.textContent).toContain('$5.00')
+    })
+
+    it('hides CTAs when canTopUp is false even when balance is owed', () => {
+      activeProSubscription()
+      state.balance = { amountMicros: 500, pendingChargesMicros: 3_000_000 }
+      state.paymentMethodCapability = 'none'
+      state.canTopUp = false
+      renderTile()
+      const alert = screen.getByRole('alert')
+      expect(alert.textContent).toContain('Outstanding balance')
+      expect(screen.queryByText('Add a payment method')).toBeNull()
+      expect(screen.queryByTestId('terms-note')).toBeNull()
+    })
+
+    it('shows a neutral message when paymentMethodCapability is null', () => {
+      activeProSubscription()
+      state.balance = { amountMicros: 500, pendingChargesMicros: 3_000_000 }
+      state.paymentMethodCapability = null
+      state.canTopUp = true
+      renderTile()
+      const alert = screen.getByRole('alert')
+      expect(alert.textContent).toContain(
+        'Payment method status unavailable. Refresh to try again.'
+      )
+      expect(screen.queryByText('Pay now')).toBeNull()
+      expect(screen.queryByText('Add a payment method')).toBeNull()
+    })
   })
 })

src/platform/cloud/subscription/components/CreditsTile.vue

@@ -177,17 +177,19 @@
         <!-- consent note before add-payment-method CTA -->
         <SubscriptionTermsNote
           v-if="
-            paymentMethodCapability === 'none' ||
-            paymentMethodCapability === 'one_time_only'
+            permissions.canTopUp &&
+            (paymentMethodCapability === 'none' ||
+              paymentMethodCapability === 'one_time_only')
           "
           context="payment_method"
         />
 
         <!-- CTA: none / one_time_only → add payment method -->
         <Button
           v-if="
-            paymentMethodCapability === 'none' ||
-            paymentMethodCapability === 'one_time_only'
+            permissions.canTopUp &&
+            (paymentMethodCapability === 'none' ||
+              paymentMethodCapability === 'one_time_only')
           "
           variant="primary"
           size="sm"
@@ -204,7 +206,9 @@
         <!-- CTA: reusable + flag on → Pay now -->
         <Button
           v-else-if="
-            paymentMethodCapability === 'reusable' && settleEndpointEnabled
+            permissions.canTopUp &&
+            paymentMethodCapability === 'reusable' &&
+            settleEndpointEnabled
           "
           ref="payNowButtonRef"
           variant="primary"
@@ -218,6 +222,13 @@
           }}</span>
           <template v-else>{{ $t('billing.owedBalance.payNow') }}</template>
         </Button>
+
+        <!-- capability loading/unknown: show a neutral message -->
+        <span
+          v-if="permissions.canTopUp && paymentMethodCapability === null"
+          class="text-muted"
+          >{{ $t('billing.owedBalance.unknownCapability') }}</span
+        >
       </div>
     </div>
 
@@ -318,10 +329,11 @@ const settleEndpointEnabled = computed(() => flags.settleEndpointEnabled)
 const owedBalanceAmount = computed(() => {
   const pendingMicros = balance.value?.pendingChargesMicros
   if (pendingMicros == null || pendingMicros <= 0) return null
-  const currency = balance.value?.currency ?? 'USD'
+  const rawCurrency = (balance.value?.currency ?? '').toUpperCase()
+  const currency = /^[A-Z]{3}$/.test(rawCurrency) ? rawCurrency : 'USD'
   return (pendingMicros / 1_000_000).toLocaleString(locale.value, {
     style: 'currency',
-    currency: currency.toUpperCase()
+    currency
   })
 })
 
@@ -345,7 +357,7 @@ async function handleOwedAddPaymentMethod() {
       })
       return
     }
-    const win = window.open(url, '_blank')
+    const win = window.open(url, '_blank', 'noopener,noreferrer')
     if (!win) {
       toastStore.add({
         severity: 'warn',

src/platform/workspace/components/SpendLimitDialogContent.vue

@@ -53,7 +53,7 @@
         variant="primary"
         size="lg"
         class="h-10 justify-center"
-        :aria-label="ctaAriaLabel"
+        :aria-label="ctaLabel"
         @click="handleMainCta"
       >
         <Skeleton v-if="ctaLoading" class="h-4 w-32" />
@@ -80,13 +80,13 @@ import Button from '@/components/ui/button/Button.vue'
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import type { PaymentMethodCapability } from '@/platform/workspace/api/workspaceApi'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
 import SubscriptionTermsNote from '@/platform/workspace/components/SubscriptionTermsNote.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
 type Scenario = 'limit_reached' | 'payment_failed'
-type Capability = 'none' | 'one_time_only' | 'reusable'
 
 const {
   scenario,
@@ -95,7 +95,7 @@ const {
   capabilityError = false
 } = defineProps<{
   scenario: Scenario
-  capability: Capability
+  capability: PaymentMethodCapability
   methodType?: string
   capabilityError?: boolean
 }>()
@@ -108,16 +108,15 @@ const { manageSubscription } = useBillingContext()
 
 const ctaLoading = ref(false)
 
-const METHOD_LABELS: Record<string, string> = {
-  alipay: 'Alipay',
-  card: 'Your card',
-  us_bank_account: 'Your bank account',
-  link: 'Link'
-}
-
 const methodLabel = computed(() => {
   if (!methodType) return t('billing.spendLimit.defaultMethod')
-  return METHOD_LABELS[methodType] ?? t('billing.spendLimit.defaultMethod')
+  const labels: Record<string, string | undefined> = {
+    alipay: t('billing.spendLimit.methodLabels.alipay'),
+    card: t('billing.spendLimit.methodLabels.card'),
+    us_bank_account: t('billing.spendLimit.methodLabels.us_bank_account'),
+    link: t('billing.spendLimit.methodLabels.link')
+  }
+  return labels[methodType] ?? t('billing.spendLimit.defaultMethod')
 })
 
 const title = computed(() => {
@@ -128,7 +127,10 @@ const title = computed(() => {
   ) {
     return t('billing.spendLimit.addPaymentMethodTitle')
   }
-  return t('billing.spendLimit.paymentFailedTitle')
+  if (scenario === 'payment_failed') {
+    return t('billing.spendLimit.paymentFailedTitle')
+  }
+  return t('billing.spendLimit.addPaymentMethodTitle')
 })
 
 const ctaLabel = computed(() => {
@@ -139,15 +141,7 @@ const ctaLabel = computed(() => {
   ) {
     return t('billing.spendLimit.addPaymentMethodCta')
   }
-  return t('billing.spendLimit.updatePaymentMethodCta')
-})
-
-const ctaAriaLabel = computed(() => {
-  if (
-    !capabilityError &&
-    capability === 'reusable' &&
-    scenario === 'payment_failed'
-  ) {
+  if (scenario === 'payment_failed') {
     return t('billing.spendLimit.updatePaymentMethodCta')
   }
   return t('billing.spendLimit.addPaymentMethodCta')
@@ -174,7 +168,7 @@ async function handleMainCta() {
         })
         return
       }
-      const paymentWindow = window.open(url, '_blank')
+      const paymentWindow = window.open(url, '_blank', 'noopener,noreferrer')
       if (!paymentWindow) {
         toastStore.add({
           severity: 'warn',

src/platform/workspace/stores/billingOperationStore.ts

@@ -84,14 +84,12 @@ export const useBillingOperationStore = defineStore('billingOperation', () => {
     intervals.set(opId, INITIAL_INTERVAL_MS)
 
     if (type !== 'cancel') {
-      let messageKey: string
-      if (type === 'subscription') {
-        messageKey = 'billingOperation.subscriptionProcessing'
-      } else if (type === 'topup') {
-        messageKey = 'billingOperation.topupProcessing'
-      } else {
-        messageKey = 'billingOperation.payOwedProcessing'
-      }
+      const messageKey =
+        type === 'subscription'
+          ? 'billingOperation.subscriptionProcessing'
+          : type === 'topup'
+            ? 'billingOperation.topupProcessing'
+            : 'billingOperation.payOwedProcessing'
 
       const toastMessage: ToastMessageOptions = {
         severity: 'info',

src/services/dialogService.ts

@@ -19,7 +19,10 @@ import type {
 
 import type { ComponentAttrs } from 'vue-component-type-helpers'
 import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
-import type { WorkspaceRole } from '@/platform/workspace/api/workspaceApi'
+import type {
+  PaymentMethodCapability,
+  WorkspaceRole
+} from '@/platform/workspace/api/workspaceApi'
 
 // Lazy loaders for dialogs - components are loaded on first use
 const lazyApiNodesSignInContent = () =>
@@ -631,7 +634,7 @@ export const useDialogService = () => {
    */
   async function showSpendLimitDialog(options: {
     scenario: 'limit_reached' | 'payment_failed'
-    capability: 'none' | 'one_time_only' | 'reusable'
+    capability: PaymentMethodCapability
     methodType?: string
     capabilityError?: boolean
   }) {