fix: harden auto-reload access and amount handling

Author: dante01yoon

docs/superpowers/specs/2026-07-17-fe-1250-credit-auto-reload-design.md

@@ -24,8 +24,10 @@ integration because no auto-reload API exists in the current frontend schema.
 - Gate the mount with both `flags.billingControlEnabled` and
   `permissions.canManageSubscription`. When the flag is false, no new
   component or state is mounted and the existing billing UX is unchanged.
-- Freeze the section when the billing status is `paused` or the team plan has
-  lapsed. Frozen content is dimmed, reports Disabled, and cannot receive input.
+- Freeze the section when billing is `paused` or `inactive`, or when the
+  subscription has `ended`. A canceled subscription that is still active in
+  its paid-through period remains interactive. Frozen content is dimmed,
+  reports Disabled, and cannot receive input.
 - Keep the prototype's `useAutoReload` composable as the typed frontend wiring
   seam. It starts unconfigured and intentionally does not claim persistence.
   A later backend adapter can replace its in-memory mutations without changing
@@ -46,7 +48,8 @@ visible states are:
 - near limit, with amber percentage text;
 - budget exhausted, with red percentage text and a Paused badge;
 - configured but Off, with the inner tile dimmed;
-- subscription paused or lapsed, with the entire section frozen;
+- billing paused or inactive, or subscription ended, with the entire section
+  frozen; a canceled-but-still-active subscription remains interactive;
 - payment at risk, represented only by the existing shared billing banner;
 - member access, where the section is absent.
 
@@ -59,6 +62,26 @@ The section uses the prototype's container-query breakpoint. The integration
 container supplies `@container`, preserving the stacked narrow layout and the
 two-column wide layout without tying it to the viewport.
 
+## Adversarial hardening
+
+- Eligibility comes from live state rather than click-time snapshots. Capture
+  the current workspace identity on Setup or Update, then, after the lazy
+  dialog import resolves and again before save, verify that the workspace is
+  unchanged, `billing_control_enabled` is still on, the current user can still
+  manage the subscription, and the lifecycle is still interactive. Abort a
+  stale lazy open or close without mutation when any check fails.
+- Use one strict localized whole-number normalization path for validation and
+  save. Accept locale digits and canonical locale grouping, but reject signs,
+  decimals, exponents, non-finite or malformed values. USD inputs represent
+  whole dollars and are rejected when conversion would overflow safe integer
+  cents. Use the same rounded credit cost in cents for the dialog's allowed-
+  reload count and the configured-state calculation.
+- Preserve the prototype/source semantics: eligibility remains permission-
+  based so a Personal Free owner can configure auto-reload when the flag and
+  permission pass; a positive monthly budget smaller than one reload remains
+  valid and derives zero full reloads with a Paused state; and a configured Off
+  state continues to offer Update rather than Setup.
+
 ## Backend boundary
 
 Current generated APIs support one-time top-up only. They do not expose

src/locales/en/main.json

@@ -2934,7 +2934,8 @@
         "title": "Auto-reload credits",
         "unitLabel": "Display unit",
         "update": "Update",
-        "usd": "USD"
+        "usd": "USD",
+        "wholeNumberRequired": "Enter a valid whole number"
       },
       "disabled": "Disabled",
       "edit": "Edit",

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

@@ -2,7 +2,7 @@ import { createTestingPinia } from '@pinia/testing'
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { SubscriptionInfo } from '@/composables/billing/types'
@@ -53,7 +53,9 @@ const mockIsInPersonalWorkspace = ref(false)
 const mockIsWorkspaceSubscribed = ref(true)
 const mockCanManageSubscription = ref(true)
 const mockBillingControlEnabled = ref(false)
-const mockBillingStatus = ref<'paid' | 'paused' | 'payment_failed'>('paid')
+const mockBillingStatus = ref<
+  'paid' | 'paused' | 'payment_failed' | 'inactive'
+>('paid')
 const mockBillingSubscriptionStatus = ref<'active' | 'canceled' | 'ended'>(
   'active'
 )
@@ -157,17 +159,6 @@ vi.mock('@/composables/useFeatureFlags', () => ({
   })
 }))
 
-vi.mock('@/platform/workspace/composables/useTeamPlan', () => ({
-  useTeamPlan: () => ({
-    hasLapsedTeamPlan: computed(
-      () =>
-        !mockIsInPersonalWorkspace.value &&
-        (mockBillingSubscriptionStatus.value === 'canceled' ||
-          mockBillingSubscriptionStatus.value === 'ended')
-    )
-  })
-}))
-
 vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
   useTeamWorkspaceStore: () => ({
     isInPersonalWorkspace: mockIsInPersonalWorkspace,
@@ -349,6 +340,30 @@ describe('SubscriptionPanelContentWorkspace', () => {
     )
   })
 
+  it('removes auto-reload when the billing control kill switch turns off', async () => {
+    mockBillingControlEnabled.value = true
+    renderComponent()
+
+    expect(screen.getByTestId('auto-reload-section')).toBeInTheDocument()
+
+    mockBillingControlEnabled.value = false
+    await nextTick()
+
+    expect(screen.queryByTestId('auto-reload-section')).not.toBeInTheDocument()
+  })
+
+  it('removes auto-reload when subscription management permission is revoked', async () => {
+    mockBillingControlEnabled.value = true
+    renderComponent()
+
+    expect(screen.getByTestId('auto-reload-section')).toBeInTheDocument()
+
+    mockCanManageSubscription.value = false
+    await nextTick()
+
+    expect(screen.queryByTestId('auto-reload-section')).not.toBeInTheDocument()
+  })
+
   it('keeps auto-reload hidden from members', () => {
     mockBillingControlEnabled.value = true
     mockCanManageSubscription.value = false
@@ -368,19 +383,39 @@ describe('SubscriptionPanelContentWorkspace', () => {
     )
   })
 
-  it.for(['canceled', 'ended'] as const)(
-    'freezes auto-reload for a %s team subscription',
-    (status) => {
-      mockBillingControlEnabled.value = true
-      mockBillingSubscriptionStatus.value = status
-      renderComponent()
+  it('keeps auto-reload interactive while an active cancellation runs to term', () => {
+    mockBillingControlEnabled.value = true
+    mockBillingSubscriptionStatus.value = 'canceled'
+    mockIsActiveSubscription.value = true
+    renderComponent()
 
-      expect(screen.getByTestId('auto-reload-section')).toHaveAttribute(
-        'data-frozen',
-        'true'
-      )
-    }
-  )
+    expect(screen.getByTestId('auto-reload-section')).toHaveAttribute(
+      'data-frozen',
+      'false'
+    )
+  })
+
+  it('freezes auto-reload after the subscription has ended', () => {
+    mockBillingControlEnabled.value = true
+    mockBillingSubscriptionStatus.value = 'ended'
+    renderComponent()
+
+    expect(screen.getByTestId('auto-reload-section')).toHaveAttribute(
+      'data-frozen',
+      'true'
+    )
+  })
+
+  it('freezes auto-reload while billing is inactive', () => {
+    mockBillingControlEnabled.value = true
+    mockBillingStatus.value = 'inactive'
+    renderComponent()
+
+    expect(screen.getByTestId('auto-reload-section')).toHaveAttribute(
+      'data-frozen',
+      'true'
+    )
+  })
 
   it('leaves auto-reload interactive when payment is at risk', () => {
     mockBillingControlEnabled.value = true

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -327,14 +327,13 @@ import DropdownMenu from '@/components/common/DropdownMenu.vue'
 import StatusBadge from '@/components/common/StatusBadge.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { TierBenefit } from '@/platform/cloud/subscription/utils/tierBenefits'
 import { getCommonTierBenefits } from '@/platform/cloud/subscription/utils/tierBenefits'
 import AutoReloadSection from '@/platform/workspace/components/dialogs/settings/AutoReloadSection.vue'
+import { useAutoReloadAccess } from '@/platform/workspace/composables/useAutoReloadAccess'
 import { useResubscribe } from '@/platform/workspace/composables/useResubscribe'
-import { useTeamPlan } from '@/platform/workspace/composables/useTeamPlan'
 import { useWorkspaceMenuItems } from '@/platform/workspace/composables/useWorkspaceMenuItems'
 import { useWorkspacePlanPricing } from '@/platform/workspace/composables/useWorkspacePlanPricing'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
@@ -353,7 +352,6 @@ const isSettingUp = computed(() => billingOperationStore.isSettingUp)
 const {
   isActiveSubscription,
   isFreeTier: isFreeTierPlan,
-  billingStatus,
   subscription,
   isLoading,
   error,
@@ -362,14 +360,8 @@ const {
   initialize
 } = useBillingContext()
 
-const { flags } = useFeatureFlags()
-const { hasLapsedTeamPlan } = useTeamPlan()
-const showAutoReload = computed(
-  () => flags.billingControlEnabled && permissions.value.canManageSubscription
-)
-const autoReloadFrozen = computed(
-  () => billingStatus.value === 'paused' || hasLapsedTeamPlan.value
-)
+const { canAccess: showAutoReload, isFrozen: autoReloadFrozen } =
+  useAutoReloadAccess()
 
 const { showPricingTable } = useSubscriptionDialog()