From a7b284c73efc49e2e0eefda8d8bbc0421f520af6 Mon Sep 17 00:00:00 2001
From: dante01yoon <bunggl@naver.com>
Date: Thu, 11 Jun 2026 13:55:00 +0900
Subject: [PATCH 1/2] feat(billing): role-aware run-lock for cancelled/inactive
 team plans (FE-978)

---
 .../CloudRunButtonWrapper.test.ts             |  69 ++++++++
 src/locales/en/main.json                      |   6 +
 .../components/SubscribeToRun.test.ts         | 114 +++++++++++++
 .../components/SubscribeToRun.vue             |  23 ++-
 ...tionRequiredDialogContentWorkspace.test.ts |  66 +++++++-
 ...criptionRequiredDialogContentWorkspace.vue | 150 +++++++++++-------
 6 files changed, 360 insertions(+), 68 deletions(-)
 create mode 100644 src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts
 create mode 100644 src/platform/cloud/subscription/components/SubscribeToRun.test.ts

diff --git a/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts b/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts
new file mode 100644
index 00000000000..b1e3d3dfb8a
--- /dev/null
+++ b/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts
@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import CloudRunButtonWrapper from './CloudRunButtonWrapper.vue'
+
+const mockIsActiveSubscription = ref(true)
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    isActiveSubscription: mockIsActiveSubscription
+  })
+}))
+
+vi.mock('@/components/actionbar/ComfyRunButton/ComfyQueueButton.vue', () => ({
+  default: {
+    name: 'ComfyQueueButton',
+    template: '<div data-testid="queue-button" />'
+  }
+}))
+
+vi.mock('@/platform/cloud/subscription/components/SubscribeToRun.vue', () => ({
+  default: {
+    name: 'SubscribeToRun',
+    template: '<div data-testid="subscribe-to-run-button" />'
+  }
+}))
+
+function renderWrapper() {
+  return render(CloudRunButtonWrapper)
+}
+
+describe('CloudRunButtonWrapper', () => {
+  beforeEach(() => {
+    mockIsActiveSubscription.value = true
+  })
+
+  it('renders the runnable queue button when the subscription is active', () => {
+    renderWrapper()
+
+    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', () => {
+    mockIsActiveSubscription.value = false
+    renderWrapper()
+
+    expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
+    expect(screen.queryByTestId('queue-button')).not.toBeInTheDocument()
+  })
+
+  it('unlocks the run button once the subscription becomes active again', async () => {
+    mockIsActiveSubscription.value = false
+    renderWrapper()
+
+    expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
+
+    mockIsActiveSubscription.value = true
+    await nextTick()
+
+    expect(screen.getByTestId('queue-button')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId('subscribe-to-run-button')
+    ).not.toBeInTheDocument()
+  })
+})
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 405510871d3..bde34b592d4 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2507,6 +2507,12 @@
       "pollingFailed": "Subscription activation failed",
       "pollingTimeout": "Timed out waiting for subscription. Please refresh and try again."
     },
+    "inactive": {
+      "memberTitle": "This workspace is paused",
+      "memberDescription": "Contact your workspace owner to resubscribe and continue running workflows.",
+      "memberRunTooltip": "Contact your workspace owner to resubscribe",
+      "runLabel": "Run"
+    },
     "subscribeToRun": "Subscribe",
     "subscribeToRunFull": "Subscribe to Run",
     "subscribeForMore": "Upgrade",
diff --git a/src/platform/cloud/subscription/components/SubscribeToRun.test.ts b/src/platform/cloud/subscription/components/SubscribeToRun.test.ts
new file mode 100644
index 00000000000..c0770774608
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscribeToRun.test.ts
@@ -0,0 +1,114 @@
+import type * as VueUseCore from '@vueuse/core'
+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 { createI18n } from 'vue-i18n'
+
+import SubscribeToRun from './SubscribeToRun.vue'
+
+const mockShowSubscriptionDialog = vi.fn()
+const mockCanManageSubscription = ref(true)
+const mockIsMdOrLarger = ref(true)
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    showSubscriptionDialog: mockShowSubscriptionDialog
+  })
+}))
+
+vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
+  useWorkspaceUI: () => ({
+    permissions: computed(() => ({
+      canManageSubscription: mockCanManageSubscription.value
+    }))
+  })
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => null
+}))
+
+vi.mock('@vueuse/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof VueUseCore>()
+  return {
+    ...actual,
+    useBreakpoints: () => ({
+      greaterOrEqual: () => mockIsMdOrLarger
+    })
+  }
+})
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      subscription: {
+        subscribeToRun: 'Subscribe',
+        subscribeToRunFull: 'Subscribe to Run',
+        inactive: {
+          runLabel: 'Run',
+          memberRunTooltip: 'Contact your workspace owner to resubscribe'
+        }
+      }
+    }
+  }
+})
+
+function renderButton() {
+  const user = userEvent.setup()
+  const result = render(SubscribeToRun, {
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: () => {} }
+    }
+  })
+  return { ...result, user }
+}
+
+describe('SubscribeToRun', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCanManageSubscription.value = true
+    mockIsMdOrLarger.value = true
+  })
+
+  it('shows the subscribe label for owners who can manage the subscription', () => {
+    renderButton()
+
+    expect(screen.getByTestId('subscribe-to-run-button')).toHaveTextContent(
+      'Subscribe to Run'
+    )
+  })
+
+  it('shows a neutral run label for members who cannot subscribe', () => {
+    mockCanManageSubscription.value = false
+    renderButton()
+
+    const button = screen.getByTestId('subscribe-to-run-button')
+    expect(button).toHaveTextContent('Run')
+    expect(button).not.toHaveTextContent('Subscribe')
+  })
+
+  it('opens the subscription dialog for owners on click', async () => {
+    const { user } = renderButton()
+
+    await user.click(screen.getByTestId('subscribe-to-run-button'))
+
+    expect(mockShowSubscriptionDialog).toHaveBeenCalledOnce()
+  })
+
+  it('routes members to the same role-aware dialog on click', async () => {
+    mockCanManageSubscription.value = false
+    const { user } = renderButton()
+
+    await user.click(screen.getByTestId('subscribe-to-run-button'))
+
+    expect(mockShowSubscriptionDialog).toHaveBeenCalledOnce()
+  })
+})
diff --git a/src/platform/cloud/subscription/components/SubscribeToRun.vue b/src/platform/cloud/subscription/components/SubscribeToRun.vue
index 80976c2e96e..0d3c6f6d444 100644
--- a/src/platform/cloud/subscription/components/SubscribeToRun.vue
+++ b/src/platform/cloud/subscription/components/SubscribeToRun.vue
@@ -1,7 +1,7 @@
 <template>
   <Button
     v-tooltip.bottom="{
-      value: $t('subscription.subscribeToRunFull'),
+      value: buttonTooltip,
       showDelay: 600
     }"
     class="subscribe-to-run-button whitespace-nowrap"
@@ -24,20 +24,31 @@ import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 
 const { t } = useI18n()
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isMdOrLarger = breakpoints.greaterOrEqual('md')
 
-const buttonLabel = computed(() =>
-  isMdOrLarger.value
+const { permissions } = useWorkspaceUI()
+const { showSubscriptionDialog } = useBillingContext()
+
+const canResubscribe = computed(() => permissions.value.canManageSubscription)
+
+const buttonLabel = computed(() => {
+  if (!canResubscribe.value) return t('subscription.inactive.runLabel')
+  return isMdOrLarger.value
     ? t('subscription.subscribeToRunFull')
     : t('subscription.subscribeToRun')
-)
+})
 
-const { showSubscriptionDialog } = useBillingContext()
+const buttonTooltip = computed(() =>
+  canResubscribe.value
+    ? t('subscription.subscribeToRunFull')
+    : t('subscription.inactive.memberRunTooltip')
+)
 
-const handleSubscribeToRun = () => {
+function handleSubscribeToRun() {
   if (isCloud) {
     useTelemetry()?.trackRunButton({ subscribe_to_run: true })
   }
diff --git a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts
index 680af8da60a..3e25cca7a37 100644
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.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 { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
@@ -16,6 +16,7 @@ const mockHandleConfirmTransition = vi.fn()
 const mockHandleResubscribe = vi.fn()
 const mockCheckoutStep = ref<'pricing' | 'preview'>('pricing')
 const mockPreviewData = ref<{ transition_type: string } | null>(null)
+const mockCanManageSubscription = ref(true)
 
 vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
   useSubscriptionCheckout: () => ({
@@ -36,6 +37,14 @@ vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
   })
 }))
 
+vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
+  useWorkspaceUI: () => ({
+    permissions: computed(() => ({
+      canManageSubscription: mockCanManageSubscription.value
+    }))
+  })
+}))
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -44,7 +53,12 @@ const i18n = createI18n({
       g: { back: 'Back', close: 'Close' },
       subscription: {
         plansForWorkspace: 'Plans for {workspace}',
-        teamWorkspace: 'Team'
+        teamWorkspace: 'Team',
+        inactive: {
+          memberTitle: 'This workspace is paused',
+          memberDescription:
+            'Contact your workspace owner to resubscribe and continue running workflows.'
+        }
       },
       credits: {
         topUp: {
@@ -105,6 +119,7 @@ describe('SubscriptionRequiredDialogContentWorkspace', () => {
     vi.clearAllMocks()
     mockCheckoutStep.value = 'pricing'
     mockPreviewData.value = null
+    mockCanManageSubscription.value = true
   })
 
   it('shows pricing table on pricing step', () => {
@@ -195,4 +210,51 @@ describe('SubscriptionRequiredDialogContentWorkspace', () => {
 
     expect(mockHandleBackToPricing).toHaveBeenCalled()
   })
+
+  describe('member (cannot manage subscription)', () => {
+    beforeEach(() => {
+      mockCanManageSubscription.value = false
+    })
+
+    it('shows the contact-owner resubscribe message instead of the pricing table', () => {
+      renderComponent()
+
+      expect(
+        screen.getByTestId('member-resubscribe-message')
+      ).toBeInTheDocument()
+      expect(
+        screen.getByText(
+          'Contact your workspace owner to resubscribe and continue running workflows.'
+        )
+      ).toBeInTheDocument()
+    })
+
+    it('does not expose any subscribe affordance to members', () => {
+      renderComponent()
+
+      expect(screen.queryByTestId('pricing-table')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('subscribe-btn')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('resubscribe-btn')).not.toBeInTheDocument()
+    })
+
+    it('falls back to the credits flow when the reason is out_of_credits', () => {
+      renderComponent({ reason: 'out_of_credits' })
+
+      expect(
+        screen.queryByTestId('member-resubscribe-message')
+      ).not.toBeInTheDocument()
+      expect(screen.getByText('Insufficient Credits')).toBeInTheDocument()
+    })
+  })
+
+  describe('owner (can manage subscription)', () => {
+    it('shows the pricing table and hides the member message', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('pricing-table')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId('member-resubscribe-message')
+      ).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
index f8a815ac372..94a1ab0b063 100644
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
@@ -3,7 +3,7 @@
     class="relative flex h-full flex-col gap-6 overflow-y-auto p-4 pt-8 md:px-16 md:py-8"
   >
     <Button
-      v-if="checkoutStep === 'preview'"
+      v-if="checkoutStep === 'preview' && !isMemberView"
       size="icon"
       variant="muted-textonly"
       class="absolute top-2.5 left-2.5 shrink-0 rounded-full text-text-secondary hover:bg-white/10"
@@ -23,80 +23,104 @@
       <i class="pi pi-times text-xl" />
     </Button>
 
-    <div class="flex flex-col items-center gap-3">
-      <!-- Decorative initial for "Team" workspace icon; not user-facing text -->
+    <div
+      v-if="isMemberView"
+      class="flex flex-1 flex-col items-center justify-center gap-4 text-center"
+      data-testid="member-resubscribe-message"
+    >
       <div
-        class="flex size-10 items-center justify-center rounded-xl bg-primary-background text-lg font-semibold text-white"
+        class="flex size-12 items-center justify-center rounded-full bg-warning-background/20 text-warning-background"
         aria-hidden="true"
       >
-        T
+        <i class="pi pi-lock text-2xl" />
       </div>
-      <i18n-t
-        keypath="subscription.plansForWorkspace"
-        tag="h2"
-        class="m-0 font-inter text-2xl font-semibold text-base-foreground"
-      >
-        <template #workspace>
-          <span class="text-emerald-400">
-            {{ $t('subscription.teamWorkspace') }}
-          </span>
-        </template>
-      </i18n-t>
-    </div>
-
-    <div v-if="reason === 'out_of_credits'" class="text-center">
-      <h2 class="m-0 text-xl text-muted-foreground lg:text-2xl">
-        {{ $t('credits.topUp.insufficientTitle') }}
+      <h2 class="m-0 font-inter text-2xl font-semibold text-base-foreground">
+        {{ $t('subscription.inactive.memberTitle') }}
       </h2>
-      <p class="m-0 mt-2 text-sm text-text-secondary">
-        {{ $t('credits.topUp.insufficientMessage') }}
+      <p class="m-0 max-w-md text-sm text-text-secondary">
+        {{ $t('subscription.inactive.memberDescription') }}
       </p>
     </div>
 
-    <!-- Pricing Table Step -->
-    <PricingTableWorkspace
-      v-if="checkoutStep === 'pricing'"
-      class="flex-1"
-      :is-loading="isLoadingPreview || isResubscribing"
-      :loading-tier="loadingTier"
-      @subscribe="handleSubscribeClick"
-      @resubscribe="handleResubscribe"
-    />
-
-    <!-- Subscription Preview Step - New Subscription -->
-    <SubscriptionAddPaymentPreviewWorkspace
-      v-else-if="
-        checkoutStep === 'preview' &&
-        previewData &&
-        previewData.transition_type === 'new_subscription'
-      "
-      :preview-data="previewData"
-      :tier-key="selectedTierKey!"
-      :billing-cycle="selectedBillingCycle"
-      :is-loading="isSubscribing || isPolling"
-      @add-credit-card="handleAddCreditCard"
-      @back="handleBackToPricing"
-    />
-
-    <!-- Subscription Preview Step - Plan Transition -->
-    <SubscriptionTransitionPreviewWorkspace
-      v-else-if="
-        checkoutStep === 'preview' &&
-        previewData &&
-        previewData.transition_type !== 'new_subscription'
-      "
-      :preview-data="previewData"
-      :is-loading="isSubscribing || isPolling"
-      @confirm="handleConfirmTransition"
-      @back="handleBackToPricing"
-    />
+    <template v-else>
+      <div class="flex flex-col items-center gap-3">
+        <!-- Decorative initial for "Team" workspace icon; not user-facing text -->
+        <div
+          class="flex size-10 items-center justify-center rounded-xl bg-primary-background text-lg font-semibold text-white"
+          aria-hidden="true"
+        >
+          T
+        </div>
+        <i18n-t
+          keypath="subscription.plansForWorkspace"
+          tag="h2"
+          class="m-0 font-inter text-2xl font-semibold text-base-foreground"
+        >
+          <template #workspace>
+            <span class="text-emerald-400">
+              {{ $t('subscription.teamWorkspace') }}
+            </span>
+          </template>
+        </i18n-t>
+      </div>
+
+      <div v-if="reason === 'out_of_credits'" class="text-center">
+        <h2 class="m-0 text-xl text-muted-foreground lg:text-2xl">
+          {{ $t('credits.topUp.insufficientTitle') }}
+        </h2>
+        <p class="m-0 mt-2 text-sm text-text-secondary">
+          {{ $t('credits.topUp.insufficientMessage') }}
+        </p>
+      </div>
+
+      <!-- Pricing Table Step -->
+      <PricingTableWorkspace
+        v-if="checkoutStep === 'pricing'"
+        class="flex-1"
+        :is-loading="isLoadingPreview || isResubscribing"
+        :loading-tier="loadingTier"
+        @subscribe="handleSubscribeClick"
+        @resubscribe="handleResubscribe"
+      />
+
+      <!-- Subscription Preview Step - New Subscription -->
+      <SubscriptionAddPaymentPreviewWorkspace
+        v-else-if="
+          checkoutStep === 'preview' &&
+          previewData &&
+          previewData.transition_type === 'new_subscription'
+        "
+        :preview-data="previewData"
+        :tier-key="selectedTierKey!"
+        :billing-cycle="selectedBillingCycle"
+        :is-loading="isSubscribing || isPolling"
+        @add-credit-card="handleAddCreditCard"
+        @back="handleBackToPricing"
+      />
+
+      <!-- Subscription Preview Step - Plan Transition -->
+      <SubscriptionTransitionPreviewWorkspace
+        v-else-if="
+          checkoutStep === 'preview' &&
+          previewData &&
+          previewData.transition_type !== 'new_subscription'
+        "
+        :preview-data="previewData"
+        :is-loading="isSubscribing || isPolling"
+        @confirm="handleConfirmTransition"
+        @back="handleBackToPricing"
+      />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import Button from '@/components/ui/button/Button.vue'
 import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 
 import PricingTableWorkspace from './PricingTableWorkspace.vue'
 import SubscriptionAddPaymentPreviewWorkspace from './SubscriptionAddPaymentPreviewWorkspace.vue'
@@ -107,6 +131,12 @@ const { onClose, reason } = defineProps<{
   reason?: SubscriptionDialogReason
 }>()
 
+const { permissions } = useWorkspaceUI()
+
+const isMemberView = computed(
+  () => !permissions.value.canManageSubscription && reason !== 'out_of_credits'
+)
+
 const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()

From 841b12e6dde366c6299ed4b9844e6cfd8add5b52 Mon Sep 17 00:00:00 2001
From: dante01yoon <bunggl@naver.com>
Date: Sat, 13 Jun 2026 13:36:50 +0900
Subject: [PATCH 2/2] feat(billing): dedicated inactive-subscription modal for
 members (FE-978)

Members of a cancelled/inactive team workspace now see a small Modal/Small
card matching Figma 3253-19473 (title + close, muted body, right-aligned
"Ok, got it"), routed before the pricing-table fork in useSubscriptionDialog
so it works regardless of the pricing dialog variant. Copy aligned to Figma
("subscription is inactive" / "reactivate" / "Ok, got it"). Removes the prior
big-dialog member block from SubscriptionRequiredDialogContentWorkspace.vue,
which is now owner-only.
---
 src/locales/en/main.json                      |   5 +-
 .../composables/useSubscriptionDialog.ts      |  29 ++++
 .../SubscriptionInactiveMemberDialog.test.ts  |  72 +++++++++
 .../SubscriptionInactiveMemberDialog.vue      |  42 +++++
 ...tionRequiredDialogContentWorkspace.test.ts |  66 +-------
 ...criptionRequiredDialogContentWorkspace.vue | 150 +++++++-----------
 6 files changed, 208 insertions(+), 156 deletions(-)
 create mode 100644 src/platform/workspace/components/SubscriptionInactiveMemberDialog.test.ts
 create mode 100644 src/platform/workspace/components/SubscriptionInactiveMemberDialog.vue

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index bde34b592d4..ca79161ab1c 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2508,8 +2508,9 @@
       "pollingTimeout": "Timed out waiting for subscription. Please refresh and try again."
     },
     "inactive": {
-      "memberTitle": "This workspace is paused",
-      "memberDescription": "Contact your workspace owner to resubscribe and continue running workflows.",
+      "memberTitle": "This workspace's subscription is inactive",
+      "memberDescription": "Ask your workspace owner to reactivate the workspace's subscription to run workflows.",
+      "memberCta": "Ok, got it",
       "memberRunTooltip": "Contact your workspace owner to resubscribe",
       "runLabel": "Run"
     },
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
index 1b9b176ce18..959bf49c5a8 100644
--- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
@@ -4,6 +4,7 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 
 const DIALOG_KEY = 'subscription-required'
@@ -20,6 +21,7 @@ export const useSubscriptionDialog = () => {
   const dialogService = useDialogService()
   const dialogStore = useDialogStore()
   const workspaceStore = useTeamWorkspaceStore()
+  const { permissions } = useWorkspaceUI()
   const { isFreeTier } = useSubscription()
 
   function hide() {
@@ -30,6 +32,33 @@ export const useSubscriptionDialog = () => {
   function showPricingTable(options?: { reason?: SubscriptionDialogReason }) {
     if (!isCloud) return
 
+    // Members can't manage the workspace subscription, so a blocked run shows a
+    // small read-only "ask your owner to reactivate" modal instead of the
+    // pricing table. Out-of-credits still routes everyone to the credits flow.
+    if (
+      flags.teamWorkspacesEnabled &&
+      !workspaceStore.isInPersonalWorkspace &&
+      !permissions.value.canManageSubscription &&
+      options?.reason !== 'out_of_credits'
+    ) {
+      dialogService.showLayoutDialog({
+        key: DIALOG_KEY,
+        component: defineAsyncComponent(
+          () =>
+            import('@/platform/workspace/components/SubscriptionInactiveMemberDialog.vue')
+        ),
+        props: { onClose: hide },
+        dialogComponentProps: {
+          style: 'width: min(360px, 95vw);',
+          pt: {
+            root: { class: 'bg-transparent' },
+            content: { class: '!p-0 bg-transparent border-none shadow-none' }
+          }
+        }
+      })
+      return
+    }
+
     const useWorkspaceVariant =
       flags.teamWorkspacesEnabled && !workspaceStore.isInPersonalWorkspace
 
diff --git a/src/platform/workspace/components/SubscriptionInactiveMemberDialog.test.ts b/src/platform/workspace/components/SubscriptionInactiveMemberDialog.test.ts
new file mode 100644
index 00000000000..1c722fb1d61
--- /dev/null
+++ b/src/platform/workspace/components/SubscriptionInactiveMemberDialog.test.ts
@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SubscriptionInactiveMemberDialog from './SubscriptionInactiveMemberDialog.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { close: 'Close' },
+      subscription: {
+        inactive: {
+          memberTitle: "This workspace's subscription is inactive",
+          memberDescription:
+            "Ask your workspace owner to reactivate the workspace's subscription to run workflows.",
+          memberCta: 'Ok, got it'
+        }
+      }
+    }
+  }
+})
+
+function renderComponent(onClose = vi.fn()) {
+  render(SubscriptionInactiveMemberDialog, {
+    props: { onClose },
+    global: { plugins: [i18n] }
+  })
+  return onClose
+}
+
+describe('SubscriptionInactiveMemberDialog', () => {
+  it('renders the inactive title, description and CTA', () => {
+    renderComponent()
+    expect(
+      screen.getByText("This workspace's subscription is inactive")
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        "Ask your workspace owner to reactivate the workspace's subscription to run workflows."
+      )
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Ok, got it' })
+    ).toBeInTheDocument()
+  })
+
+  it('exposes no subscribe affordance', () => {
+    renderComponent()
+    expect(screen.queryByText(/subscribe/i)).not.toBeInTheDocument()
+  })
+
+  it('calls onClose when the CTA is clicked', async () => {
+    const user = userEvent.setup()
+    const onClose = renderComponent()
+
+    await user.click(screen.getByRole('button', { name: 'Ok, got it' }))
+
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('calls onClose when the header close button is clicked', async () => {
+    const user = userEvent.setup()
+    const onClose = renderComponent()
+
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+})
diff --git a/src/platform/workspace/components/SubscriptionInactiveMemberDialog.vue b/src/platform/workspace/components/SubscriptionInactiveMemberDialog.vue
new file mode 100644
index 00000000000..6314b4ed58c
--- /dev/null
+++ b/src/platform/workspace/components/SubscriptionInactiveMemberDialog.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="flex flex-col overflow-hidden rounded-2xl border border-border-default bg-base-background"
+    data-testid="member-resubscribe-message"
+  >
+    <div
+      class="flex h-12 items-center gap-2 border-b border-border-default p-4"
+    >
+      <p class="m-0 min-w-0 flex-1 font-inter text-sm text-base-foreground">
+        {{ $t('subscription.inactive.memberTitle') }}
+      </p>
+      <button
+        type="button"
+        :aria-label="$t('g.close')"
+        class="flex size-4 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent text-base-foreground"
+        @click="onClose"
+      >
+        <i class="pi pi-times text-xs" />
+      </button>
+    </div>
+
+    <div class="p-4">
+      <p class="m-0 font-inter text-sm text-muted-foreground">
+        {{ $t('subscription.inactive.memberDescription') }}
+      </p>
+    </div>
+
+    <div class="flex items-center justify-end p-4">
+      <Button variant="secondary" size="lg" @click="onClose">
+        {{ $t('subscription.inactive.memberCta') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+const { onClose } = defineProps<{
+  onClose: () => void
+}>()
+</script>
diff --git a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts
index 3e25cca7a37..680af8da60a 100644
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.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 { ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
@@ -16,7 +16,6 @@ const mockHandleConfirmTransition = vi.fn()
 const mockHandleResubscribe = vi.fn()
 const mockCheckoutStep = ref<'pricing' | 'preview'>('pricing')
 const mockPreviewData = ref<{ transition_type: string } | null>(null)
-const mockCanManageSubscription = ref(true)
 
 vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
   useSubscriptionCheckout: () => ({
@@ -37,14 +36,6 @@ vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
   })
 }))
 
-vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
-  useWorkspaceUI: () => ({
-    permissions: computed(() => ({
-      canManageSubscription: mockCanManageSubscription.value
-    }))
-  })
-}))
-
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -53,12 +44,7 @@ const i18n = createI18n({
       g: { back: 'Back', close: 'Close' },
       subscription: {
         plansForWorkspace: 'Plans for {workspace}',
-        teamWorkspace: 'Team',
-        inactive: {
-          memberTitle: 'This workspace is paused',
-          memberDescription:
-            'Contact your workspace owner to resubscribe and continue running workflows.'
-        }
+        teamWorkspace: 'Team'
       },
       credits: {
         topUp: {
@@ -119,7 +105,6 @@ describe('SubscriptionRequiredDialogContentWorkspace', () => {
     vi.clearAllMocks()
     mockCheckoutStep.value = 'pricing'
     mockPreviewData.value = null
-    mockCanManageSubscription.value = true
   })
 
   it('shows pricing table on pricing step', () => {
@@ -210,51 +195,4 @@ describe('SubscriptionRequiredDialogContentWorkspace', () => {
 
     expect(mockHandleBackToPricing).toHaveBeenCalled()
   })
-
-  describe('member (cannot manage subscription)', () => {
-    beforeEach(() => {
-      mockCanManageSubscription.value = false
-    })
-
-    it('shows the contact-owner resubscribe message instead of the pricing table', () => {
-      renderComponent()
-
-      expect(
-        screen.getByTestId('member-resubscribe-message')
-      ).toBeInTheDocument()
-      expect(
-        screen.getByText(
-          'Contact your workspace owner to resubscribe and continue running workflows.'
-        )
-      ).toBeInTheDocument()
-    })
-
-    it('does not expose any subscribe affordance to members', () => {
-      renderComponent()
-
-      expect(screen.queryByTestId('pricing-table')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('subscribe-btn')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('resubscribe-btn')).not.toBeInTheDocument()
-    })
-
-    it('falls back to the credits flow when the reason is out_of_credits', () => {
-      renderComponent({ reason: 'out_of_credits' })
-
-      expect(
-        screen.queryByTestId('member-resubscribe-message')
-      ).not.toBeInTheDocument()
-      expect(screen.getByText('Insufficient Credits')).toBeInTheDocument()
-    })
-  })
-
-  describe('owner (can manage subscription)', () => {
-    it('shows the pricing table and hides the member message', () => {
-      renderComponent()
-
-      expect(screen.getByTestId('pricing-table')).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('member-resubscribe-message')
-      ).not.toBeInTheDocument()
-    })
-  })
 })
diff --git a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
index 94a1ab0b063..f8a815ac372 100644
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
@@ -3,7 +3,7 @@
     class="relative flex h-full flex-col gap-6 overflow-y-auto p-4 pt-8 md:px-16 md:py-8"
   >
     <Button
-      v-if="checkoutStep === 'preview' && !isMemberView"
+      v-if="checkoutStep === 'preview'"
       size="icon"
       variant="muted-textonly"
       class="absolute top-2.5 left-2.5 shrink-0 rounded-full text-text-secondary hover:bg-white/10"
@@ -23,104 +23,80 @@
       <i class="pi pi-times text-xl" />
     </Button>
 
-    <div
-      v-if="isMemberView"
-      class="flex flex-1 flex-col items-center justify-center gap-4 text-center"
-      data-testid="member-resubscribe-message"
-    >
+    <div class="flex flex-col items-center gap-3">
+      <!-- Decorative initial for "Team" workspace icon; not user-facing text -->
       <div
-        class="flex size-12 items-center justify-center rounded-full bg-warning-background/20 text-warning-background"
+        class="flex size-10 items-center justify-center rounded-xl bg-primary-background text-lg font-semibold text-white"
         aria-hidden="true"
       >
-        <i class="pi pi-lock text-2xl" />
+        T
       </div>
-      <h2 class="m-0 font-inter text-2xl font-semibold text-base-foreground">
-        {{ $t('subscription.inactive.memberTitle') }}
+      <i18n-t
+        keypath="subscription.plansForWorkspace"
+        tag="h2"
+        class="m-0 font-inter text-2xl font-semibold text-base-foreground"
+      >
+        <template #workspace>
+          <span class="text-emerald-400">
+            {{ $t('subscription.teamWorkspace') }}
+          </span>
+        </template>
+      </i18n-t>
+    </div>
+
+    <div v-if="reason === 'out_of_credits'" class="text-center">
+      <h2 class="m-0 text-xl text-muted-foreground lg:text-2xl">
+        {{ $t('credits.topUp.insufficientTitle') }}
       </h2>
-      <p class="m-0 max-w-md text-sm text-text-secondary">
-        {{ $t('subscription.inactive.memberDescription') }}
+      <p class="m-0 mt-2 text-sm text-text-secondary">
+        {{ $t('credits.topUp.insufficientMessage') }}
       </p>
     </div>
 
-    <template v-else>
-      <div class="flex flex-col items-center gap-3">
-        <!-- Decorative initial for "Team" workspace icon; not user-facing text -->
-        <div
-          class="flex size-10 items-center justify-center rounded-xl bg-primary-background text-lg font-semibold text-white"
-          aria-hidden="true"
-        >
-          T
-        </div>
-        <i18n-t
-          keypath="subscription.plansForWorkspace"
-          tag="h2"
-          class="m-0 font-inter text-2xl font-semibold text-base-foreground"
-        >
-          <template #workspace>
-            <span class="text-emerald-400">
-              {{ $t('subscription.teamWorkspace') }}
-            </span>
-          </template>
-        </i18n-t>
-      </div>
-
-      <div v-if="reason === 'out_of_credits'" class="text-center">
-        <h2 class="m-0 text-xl text-muted-foreground lg:text-2xl">
-          {{ $t('credits.topUp.insufficientTitle') }}
-        </h2>
-        <p class="m-0 mt-2 text-sm text-text-secondary">
-          {{ $t('credits.topUp.insufficientMessage') }}
-        </p>
-      </div>
-
-      <!-- Pricing Table Step -->
-      <PricingTableWorkspace
-        v-if="checkoutStep === 'pricing'"
-        class="flex-1"
-        :is-loading="isLoadingPreview || isResubscribing"
-        :loading-tier="loadingTier"
-        @subscribe="handleSubscribeClick"
-        @resubscribe="handleResubscribe"
-      />
-
-      <!-- Subscription Preview Step - New Subscription -->
-      <SubscriptionAddPaymentPreviewWorkspace
-        v-else-if="
-          checkoutStep === 'preview' &&
-          previewData &&
-          previewData.transition_type === 'new_subscription'
-        "
-        :preview-data="previewData"
-        :tier-key="selectedTierKey!"
-        :billing-cycle="selectedBillingCycle"
-        :is-loading="isSubscribing || isPolling"
-        @add-credit-card="handleAddCreditCard"
-        @back="handleBackToPricing"
-      />
-
-      <!-- Subscription Preview Step - Plan Transition -->
-      <SubscriptionTransitionPreviewWorkspace
-        v-else-if="
-          checkoutStep === 'preview' &&
-          previewData &&
-          previewData.transition_type !== 'new_subscription'
-        "
-        :preview-data="previewData"
-        :is-loading="isSubscribing || isPolling"
-        @confirm="handleConfirmTransition"
-        @back="handleBackToPricing"
-      />
-    </template>
+    <!-- Pricing Table Step -->
+    <PricingTableWorkspace
+      v-if="checkoutStep === 'pricing'"
+      class="flex-1"
+      :is-loading="isLoadingPreview || isResubscribing"
+      :loading-tier="loadingTier"
+      @subscribe="handleSubscribeClick"
+      @resubscribe="handleResubscribe"
+    />
+
+    <!-- Subscription Preview Step - New Subscription -->
+    <SubscriptionAddPaymentPreviewWorkspace
+      v-else-if="
+        checkoutStep === 'preview' &&
+        previewData &&
+        previewData.transition_type === 'new_subscription'
+      "
+      :preview-data="previewData"
+      :tier-key="selectedTierKey!"
+      :billing-cycle="selectedBillingCycle"
+      :is-loading="isSubscribing || isPolling"
+      @add-credit-card="handleAddCreditCard"
+      @back="handleBackToPricing"
+    />
+
+    <!-- Subscription Preview Step - Plan Transition -->
+    <SubscriptionTransitionPreviewWorkspace
+      v-else-if="
+        checkoutStep === 'preview' &&
+        previewData &&
+        previewData.transition_type !== 'new_subscription'
+      "
+      :preview-data="previewData"
+      :is-loading="isSubscribing || isPolling"
+      @confirm="handleConfirmTransition"
+      @back="handleBackToPricing"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
 import Button from '@/components/ui/button/Button.vue'
 import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'
-import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 
 import PricingTableWorkspace from './PricingTableWorkspace.vue'
 import SubscriptionAddPaymentPreviewWorkspace from './SubscriptionAddPaymentPreviewWorkspace.vue'
@@ -131,12 +107,6 @@ const { onClose, reason } = defineProps<{
   reason?: SubscriptionDialogReason
 }>()
 
-const { permissions } = useWorkspaceUI()
-
-const isMemberView = computed(
-  () => !permissions.value.canManageSubscription && reason !== 'out_of_credits'
-)
-
 const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()