fix(billing): don't show the subscribe paywall before billing status resolves (#14965)

## Summary

Part of FE-1540 / PAY-004. Six Pylon tickets (#16322, #16286, #16285,
#16284, #16280, #16274), one customer threatening a formal payment
dispute.

`canRunWorkflows` is `false` from the very first render —
`isInitialized` starts `false`, `subscription` is `null`, and
`canAccessSubscriptionFeatures` is `statusData.value?.is_active ??
false` (`useWorkspaceBilling.ts:127-129`). Neither
`CloudRunButtonWrapper.vue` nor `LinearControls.vue` read
`isInitialized`, `isLoading`, or `error`, so **the locked "Subscribe to
run" button was the default render**, asserted on no data at all.

A paying subscriber whose status fetch is slow, failing, or scoped to
the wrong workspace saw a paywall over Run, with no recovery path —
`CloudRunButtonWrapper`'s focus refetch is gated behind
`refreshBillingOnFocus`, which is only set inside the payment-recovery
dialog, so it never fires for a plain status desync.

Worth stating because it contradicts an assumption made during triage:
`canAccessSubscriptionFeatures` does not mean "this user has a paid
subscription", it means "the last status response said `is_active:
true`". Those differ during a desync, which is the incident.

## Change

Adds `showsSubscribeToRunPrompt` to the billing context — it only claims
the user needs to subscribe once billing status has resolved:

```ts
const showsSubscribeToRunPrompt = computed(
  () => isInitialized.value && !canRunWorkflows.value
)
```

Consumed at the three render sites (`CloudRunButtonWrapper.vue:3`,
`LinearControls.vue:182,246`) instead of each re-deriving the rule.

During the unresolved window the normal Run button renders. Entitlement
is still enforced by the backend on execution, and
`useAccountPreconditionDialog` already handles that rejection, so
failing open for that window is the safer direction — a subscriber who
cannot run is a dispute, a non-subscriber who clicks Run gets a clear
server-driven prompt.

## Scope

Deliberately the low-risk half of FE-1540. **Not** included, because
they change Run-button behaviour for all cloud users and want a human
call during an active incident:

- an unsolicited focus/visibility refetch on the Run path (what Robin
asked for in-thread)
- hardening `useWorkspaceBilling.ts:244` so a successful-but-stale
response cannot silently downgrade a previously-active subscription

Also not addressed here: `getBillingStatus()` sends no workspace
parameter (`workspaceApi.ts:430-441`), so a subscription on a team
workspace while Personal is active reads the wrong billing entirely.
Tracked on FE-1540.

## Tests

New case `keeps the run button while billing status is still resolving`,
verified red against the old gate:

```
× keeps the run button while billing status is still resolving
  Tests  1 failed | 11 passed (12)
```

275 tests pass across the 19 affected suites. `pnpm typecheck` exit 0,
`pnpm knip` exit 0.

- Part of FE-1540

Co-authored-by: Connor Byrne <c.byrne@comfy.org>

Author: christian-byrne

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts

@@ -6,6 +6,7 @@ import { nextTick, ref } from 'vue'
 import CloudRunButtonWrapper from './CloudRunButtonWrapper.vue'
 
 const mockCanRunWorkflows = ref(true)
+const mockIsInitialized = ref(true)
 const mockBillingStatus = ref<string | null>('paid')
 const state = vi.hoisted(() => ({
   v1PaymentRecovery: true,
@@ -19,15 +20,21 @@ const state = vi.hoisted(() => ({
   updateDialog: vi.fn()
 }))
 
-vi.mock('@/composables/billing/useBillingContext', () => ({
-  useBillingContext: () => ({
-    canRunWorkflows: mockCanRunWorkflows,
-    billingStatus: mockBillingStatus,
-    manageSubscription: state.manageSubscription,
-    fetchStatus: state.fetchStatus,
-    fetchBalance: state.fetchBalance
-  })
-}))
+vi.mock('@/composables/billing/useBillingContext', async () => {
+  const { computed } = await import('vue')
+  return {
+    useBillingContext: () => ({
+      canRunWorkflows: mockCanRunWorkflows,
+      showsSubscribeToRunPrompt: computed(
+        () => mockIsInitialized.value && !mockCanRunWorkflows.value
+      ),
+      billingStatus: mockBillingStatus,
+      manageSubscription: state.manageSubscription,
+      fetchStatus: state.fetchStatus,
+      fetchBalance: state.fetchBalance
+    })
+  }
+})
 
 vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: () => ({
@@ -89,6 +96,7 @@ function renderWrapper() {
 describe('CloudRunButtonWrapper', () => {
   beforeEach(() => {
     mockCanRunWorkflows.value = true
+    mockIsInitialized.value = true
     mockBillingStatus.value = 'paid'
     state.v1PaymentRecovery = true
     state.canManageSubscription = true
@@ -104,6 +112,18 @@ describe('CloudRunButtonWrapper', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('keeps the run button while billing status is still resolving', () => {
+    mockCanRunWorkflows.value = false
+    mockIsInitialized.value = false
+
+    render(CloudRunButtonWrapper)
+
+    expect(screen.getByTestId('queue-button')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId('subscribe-to-run-button')
+    ).not.toBeInTheDocument()
+  })
+
   it('locks the run button when the subscription is inactive', () => {
     mockCanRunWorkflows.value = false
     renderWrapper()

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

@@ -1,6 +1,6 @@
 <template>
   <ComfyQueueButton
-    v-if="canRunWorkflows || paymentRecoveryLock"
+    v-if="!showsSubscribeToRunPrompt || paymentRecoveryLock"
     :payment-recovery-lock="paymentRecoveryLock"
     @payment-recovery-click="showPaymentRecoveryDialog"
   />
@@ -22,7 +22,7 @@ import { useDialogStore } from '@/stores/dialogStore'
 
 const DIALOG_KEY = 'subscription-paused'
 const {
-  canRunWorkflows,
+  showsSubscribeToRunPrompt,
   billingStatus,
   manageSubscription,
   fetchStatus,

src/composables/billing/types.ts

@@ -137,6 +137,7 @@ export interface BillingContext extends BillingState, BillingActions {
   isTeamPlan: ComputedRef<boolean>
   getMaxSeats: (tierKey: TierKey) => number
   canRunWorkflows: ComputedRef<boolean>
+  showsSubscribeToRunPrompt: ComputedRef<boolean>
   /** @deprecated Use canAccessSubscriptionFeatures instead */
   isActiveSubscription: ComputedRef<boolean>
 }

src/composables/billing/useBillingContext.ts

@@ -162,6 +162,10 @@ function useBillingContextInternal(): BillingContext {
         freeTierQuota.freeTierExecutionPermitted.value)
   )
 
+  const showsSubscribeToRunPrompt = computed(
+    () => isInitialized.value && !canRunWorkflows.value
+  )
+
   const isLegacyTeamPlan = computed(
     () =>
       type.value === 'workspace' &&
@@ -354,6 +358,7 @@ function useBillingContextInternal(): BillingContext {
     error,
     isActiveSubscription,
     canRunWorkflows,
+    showsSubscribeToRunPrompt,
     canAccessSubscriptionFeatures,
     isFreeTier,
     isLegacyTeamPlan,

src/renderer/extensions/linearMode/LinearControls.vue

@@ -32,7 +32,7 @@ const { t } = useI18n()
 const commandStore = useCommandStore()
 const { batchCount } = storeToRefs(useQueueSettingsStore())
 const settingStore = useSettingStore()
-const { canRunWorkflows } = useBillingContext()
+const { canRunWorkflows, showsSubscribeToRunPrompt } = useBillingContext()
 const workflowStore = useWorkflowStore()
 const { isBuilderMode } = useAppMode()
 const appModeStore = useAppModeStore()
@@ -179,7 +179,10 @@ function replayAppModeTour() {
       >
         <LinearRunErrorWarning v-if="showRunErrorWarning" />
         <div v-coachmark="COACH_IDS.appRunButton">
-          <SubscribeToRunButton v-if="!canRunWorkflows" class="mt-4 w-full" />
+          <SubscribeToRunButton
+            v-if="showsSubscribeToRunPrompt"
+            class="mt-4 w-full"
+          />
           <div v-else class="mt-4 flex">
             <PartnerNodesList mobile />
             <Popover side="top" @open-auto-focus.prevent>
@@ -243,7 +246,10 @@ function replayAppModeTour() {
             :max="settingStore.get('Comfy.QueueButton.BatchCountLimit')"
             class="h-7 min-w-40"
           />
-          <SubscribeToRunButton v-if="!canRunWorkflows" class="mt-4 w-full" />
+          <SubscribeToRunButton
+            v-if="showsSubscribeToRunPrompt"
+            class="mt-4 w-full"
+          />
           <Button
             v-else
             variant="primary"

src/storybook/mocks/useBillingContext.ts

@@ -62,6 +62,9 @@ export function useBillingContext(): BillingContext {
     error: ref<string | null>(null),
     isActiveSubscription: computed(() => state.value.isActiveSubscription),
     canRunWorkflows: computed(() => state.value.isActiveSubscription),
+    showsSubscribeToRunPrompt: computed(
+      () => !state.value.isActiveSubscription
+    ),
     canAccessSubscriptionFeatures: computed(
       () => state.value.isActiveSubscription
     ),