test: query SubscribeToRun by accessible role; cache lazy billing context

Address CodeRabbit review:
- Switch all SubscribeToRun.test queries from getByTestId to getByRole,
  matching the repo's testing-library guidelines.
- Cache the lazily-resolved useBillingContext per component instance so
  repeated clicks reuse the same shared-composable handle instead of
  re-invoking createSharedComposable each time. New regression test
  asserts three clicks resolve the context exactly once.

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

@@ -8,17 +8,18 @@ import { createI18n } from 'vue-i18n'
 import SubscribeToRun from './SubscribeToRun.vue'
 
 const mockShowSubscriptionDialog = vi.fn()
+const mockUseBillingContext = vi.fn(() => ({
+  showSubscriptionDialog: mockShowSubscriptionDialog
+}))
 const mockCanManageSubscription = ref(true)
 const mockIsMdOrLarger = ref(true)
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
-  useBillingContext: () => ({
-    showSubscriptionDialog: mockShowSubscriptionDialog
-  })
+  useBillingContext: () => mockUseBillingContext()
 }))
 
 vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
-  useWorkspaceUI: () => ({
+  useWorkspacePermissions: () => ({
     permissions: computed(() => ({
       canManageSubscription: mockCanManageSubscription.value
     }))
@@ -81,24 +82,24 @@ describe('SubscribeToRun', () => {
   it('shows the subscribe label for owners who can manage the subscription', () => {
     renderButton()
 
-    expect(screen.getByTestId('subscribe-to-run-button')).toHaveTextContent(
-      'Subscribe to Run'
-    )
+    expect(
+      screen.getByRole('button', { name: /subscribe to run/i })
+    ).toBeInTheDocument()
   })
 
   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')
+    const button = screen.getByRole('button', { name: 'Run' })
+    expect(button).toBeInTheDocument()
     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'))
+    await user.click(screen.getByRole('button', { name: /subscribe to run/i }))
 
     expect(mockShowSubscriptionDialog).toHaveBeenCalledOnce()
   })
@@ -107,8 +108,38 @@ describe('SubscribeToRun', () => {
     mockCanManageSubscription.value = false
     const { user } = renderButton()
 
-    await user.click(screen.getByTestId('subscribe-to-run-button'))
+    await user.click(screen.getByRole('button', { name: 'Run' }))
 
     expect(mockShowSubscriptionDialog).toHaveBeenCalledOnce()
   })
+
+  describe('billing context import cycle', () => {
+    it('does not resolve useBillingContext at component setup', () => {
+      renderButton()
+      expect(mockUseBillingContext).not.toHaveBeenCalled()
+    })
+
+    it('resolves useBillingContext lazily when the button is clicked', async () => {
+      const { user } = renderButton()
+      expect(mockUseBillingContext).not.toHaveBeenCalled()
+
+      await user.click(
+        screen.getByRole('button', { name: /subscribe to run/i })
+      )
+
+      expect(mockUseBillingContext).toHaveBeenCalled()
+    })
+
+    it('reuses the billing context across repeated clicks', async () => {
+      const { user } = renderButton()
+      const button = screen.getByRole('button', { name: /subscribe to run/i })
+
+      await user.click(button)
+      await user.click(button)
+      await user.click(button)
+
+      expect(mockUseBillingContext).toHaveBeenCalledOnce()
+      expect(mockShowSubscriptionDialog).toHaveBeenCalledTimes(3)
+    })
+  })
 })

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

@@ -24,16 +24,22 @@ import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useRunButtonTelemetry } from '@/composables/useRunButtonTelemetry'
 import { isCloud } from '@/platform/distribution/types'
-import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useWorkspacePermissions } from '@/platform/workspace/composables/useWorkspaceUI'
 
 const { t } = useI18n()
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isMdOrLarger = breakpoints.greaterOrEqual('md')
 
-const { permissions } = useWorkspaceUI()
-const { showSubscriptionDialog } = useBillingContext()
+const { permissions } = useWorkspacePermissions()
 const { trackRunButton } = useRunButtonTelemetry()
 
+let billingContext: ReturnType<typeof useBillingContext> | undefined
+
+function getBillingContext() {
+  billingContext ??= useBillingContext()
+  return billingContext
+}
+
 const canResubscribe = computed(() => permissions.value.canManageSubscription)
 
 const buttonLabel = computed(() => {
@@ -54,6 +60,6 @@ function handleSubscribeToRun() {
     trackRunButton({ subscribe_to_run: true })
   }
 
-  showSubscriptionDialog()
+  getBillingContext().showSubscriptionDialog()
 }
 </script>

src/platform/workspace/composables/useWorkspaceUI.ts

@@ -156,17 +156,13 @@ function isOriginalOwnerByEmail(
   return original.email.toLowerCase() === email
 }
 
-/**
- * Internal implementation of UI configuration composable.
- */
-function useWorkspaceUIInternal() {
+// Billing-free permissions: must not read useBillingContext, directly or
+// indirectly. useWorkspaceUI sits inside the
+// useBillingContext -> useWorkspaceBilling -> useWorkspaceUI cycle, so any
+// component whose render path needs only permissions must use this composable
+// to avoid re-entering a half-built billing context at setup time.
+function useWorkspacePermissionsInternal() {
   const store = useTeamWorkspaceStore()
-  const { userEmail } = useCurrentUser()
-  const { isActiveSubscription, subscription } = useBillingContext()
-
-  const isInPersonalWorkspace = computed(() => store.isInPersonalWorkspace)
-  const isWorkspaceSubscribed = computed(() => store.isWorkspaceSubscribed)
-  const members = computed(() => store.members)
 
   const workspaceType = computed<WorkspaceType>(
     () => store.activeWorkspace?.type ?? 'personal'
@@ -202,6 +198,32 @@ function useWorkspaceUIInternal() {
     getUIConfig(workspaceType.value, workspaceRole.value)
   )
 
+  return {
+    permissions,
+    uiConfig,
+    workspaceType,
+    workspaceRole
+  }
+}
+
+export const useWorkspacePermissions = createSharedComposable(
+  useWorkspacePermissionsInternal
+)
+
+/**
+ * Internal implementation of UI configuration composable.
+ */
+function useWorkspaceUIInternal() {
+  const store = useTeamWorkspaceStore()
+  const { userEmail } = useCurrentUser()
+  const { isActiveSubscription, subscription } = useBillingContext()
+  const { permissions, uiConfig, workspaceType, workspaceRole } =
+    useWorkspacePermissions()
+
+  const isInPersonalWorkspace = computed(() => store.isInPersonalWorkspace)
+  const isWorkspaceSubscribed = computed(() => store.isWorkspaceSubscribed)
+  const members = computed(() => store.members)
+
   // Cancel / reactivate / delete are original-owner-only; personal workspaces
   // are single-member, so the user is always their own original owner.
   const isOriginalOwner = computed(() => {