fix: correct Pylon form base URL to workspace subdomain

Pylon serves a workspace's forms from the workspace subdomain (comfy-org.portal.usepylon.com/forms/<slug>), not a path segment under portal.usepylon.com. Update the base URL and every hardcoded reference in the unit and browser tests so support links resolve to real forms.
feat: migrate support links from Zendesk to Pylon with context-aware routing
2026-07-03 05:38:26 +00:00 · 2026-07-02 15:12:07 +03:00 · 2026-07-02 15:12:06 +03:00 · 2026-07-02 03:11:21 +00:00 · 2026-07-01 12:45:24 +00:00
69 changed files with 1406 additions and 357 deletions
--- a/apps/website/src/components/customers/ArticleNav.vue
+++ b/apps/website/src/components/customers/ArticleNav.vue
@@ -15,7 +15,7 @@ const { categories } = defineProps<{

 const activeSection = ref(categories[0]?.value ?? '')

-const HEADER_OFFSET = -144
+const HEADER_OFFSET_PX = -144
 const BOTTOM_THRESHOLD_PX = 4
 const SCROLL_SAFETY_MS = 1500

@@ -52,7 +52,7 @@ function scrollToSection(id: string) {
  const el = document.getElementById(id)
  if (el) {
    scrollTo(el, {
-      offset: HEADER_OFFSET,
+      offset: HEADER_OFFSET_PX,
      duration: 0.8,
      immediate: prefersReducedMotion(),
      onComplete: clearScrollLock
--- a/apps/website/src/components/customers/content/ListItem.astro
+++ b/apps/website/src/components/customers/content/ListItem.astro
@@ -1,5 +1,5 @@
 <li
-  class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow before:content-['']"
+  class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow"
 >
  <slot />
 </li>
--- a/browser_tests/fixtures/helpers/HelpCenterHelper.ts
+++ b/browser_tests/fixtures/helpers/HelpCenterHelper.ts
@@ -80,19 +80,23 @@ class HelpCenterHelper {
  }

  /**
-   * Intercept the Zendesk support URL so it never actually loads in the
-   * new tab opened by the Contact Support command.
+   * Intercept the Pylon support URL (and the legacy Zendesk one for safety)
+   * so it never actually loads in the new tab opened by the Contact Support
+   * command.
   */
  async stubSupportPage(): Promise<void> {
-    await this.page
-      .context()
-      .route('https://support.comfy.org/**', (route: Route) =>
+    for (const pattern of [
+      'https://comfy-org.portal.usepylon.com/**',
+      'https://support.comfy.org/**'
+    ]) {
+      await this.page.context().route(pattern, (route: Route) =>
        route.fulfill({
          status: 200,
          contentType: 'text/html',
          body: '<html></html>'
        })
      )
+    }
  }

  /**
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -103,14 +103,14 @@ test.describe('Settings', () => {
 })

 test.describe('Support', () => {
-  test('Should open external zendesk link with OSS tag', async ({
+  test('Should open Pylon question form with OSS environment tag', async ({
    comfyPage
  }) => {
    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
    // Prevent loading the external page
    await comfyPage.page
      .context()
-      .route('https://support.comfy.org/**', (route) =>
+      .route('https://comfy-org.portal.usepylon.com/**', (route) =>
        route.fulfill({ body: '<html></html>', contentType: 'text/html' })
      )

@@ -119,8 +119,9 @@ test.describe('Support', () => {
    const popup = await popupPromise

    const url = new URL(popup.url())
-    expect(url.hostname).toBe('support.comfy.org')
-    expect(url.searchParams.get('tf_42243568391700')).toBe('oss')
+    expect(url.hostname).toBe('comfy-org.portal.usepylon.com')
+    expect(url.pathname).toBe('/forms/question')
+    expect(url.searchParams.get('comfy_environment')).toBe('oss')

    await popup.close()
  })
--- a/browser_tests/tests/errorDialog.spec.ts
+++ b/browser_tests/tests/errorDialog.spec.ts
@@ -122,9 +122,15 @@ test.describe('Error dialog', () => {
    await popup.close()
  })

-  test('Should open contact support when "Help Fix This" is clicked', async ({
+  test('Should open the Pylon bug-report form when "Help Fix This" is clicked', async ({
    comfyPage
  }) => {
+    await comfyPage.page
+      .context()
+      .route('https://comfy-org.portal.usepylon.com/**', (route) =>
+        route.fulfill({ body: '<html></html>', contentType: 'text/html' })
+      )
+
    const errorDialog = await triggerConfigureError(comfyPage)
    await expect(errorDialog).toBeVisible()

@@ -133,7 +139,9 @@ test.describe('Error dialog', () => {
    )

    const url = new URL(popup.url())
-    expect(url.hostname).toBe('support.comfy.org')
+    expect(url.hostname).toBe('comfy-org.portal.usepylon.com')
+    expect(url.pathname).toBe('/forms/report-a-bug')
+    expect(url.searchParams.get('product_area')).toBe('Workflow Error')

    await popup.close()
  })
--- a/browser_tests/tests/helpCenter.spec.ts
+++ b/browser_tests/tests/helpCenter.spec.ts
@@ -99,26 +99,28 @@ test.describe('Help Center', () => {
      expect(url.pathname).toBe('/Comfy-Org/ComfyUI')
    })

-    test('Help & Support item opens the Zendesk support form with OSS tag', async ({
+    test('Help & Support item opens the Pylon question form tagged as OSS', async ({
      helpCenter
    }) => {
      const url = await waitForPopup(helpCenter.page, () =>
        helpCenter.menuItem('help').click()
      )

-      expect(url.hostname).toBe('support.comfy.org')
-      expect(url.searchParams.get('tf_42243568391700')).toBe('oss')
+      expect(url.hostname).toBe('comfy-org.portal.usepylon.com')
+      expect(url.pathname).toBe('/forms/question')
+      expect(url.searchParams.get('comfy_environment')).toBe('oss')
    })

-    test('Give Feedback item opens Contact Support in OSS mode', async ({
+    test('Give Feedback item opens the Pylon question form in OSS mode', async ({
      helpCenter
    }) => {
      const url = await waitForPopup(helpCenter.page, () =>
        helpCenter.menuItem('feedback').click()
      )

-      expect(url.hostname).toBe('support.comfy.org')
-      expect(url.searchParams.get('tf_42243568391700')).toBe('oss')
+      expect(url.hostname).toBe('comfy-org.portal.usepylon.com')
+      expect(url.pathname).toBe('/forms/question')
+      expect(url.searchParams.get('comfy_environment')).toBe('oss')
    })
  })

--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -70,10 +70,11 @@ import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { SupportForm } from '@/platform/support/config'
+import { useSupportContext } from '@/platform/support/useSupportContext'
 import { useTelemetry } from '@/platform/telemetry'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { generateErrorReport } from '@/utils/errorReportUtil'
 import type { ErrorReportData } from '@/utils/errorReportUtil'
@@ -115,16 +116,18 @@ const title = computed<string>(
  () => error.nodeType ?? error.exceptionType ?? t('errorDialog.defaultTitle')
 )

+const { openSupport } = useSupportContext()
+
 /**
 * Open contact support flow from error dialog and track telemetry.
 */
-const showContactSupport = async () => {
+const showContactSupport = () => {
  telemetry?.trackHelpResourceClicked({
    resource_type: 'help_feedback',
    is_external: true,
    source: 'error_dialog'
  })
-  await useCommandStore().execute('Comfy.ContactSupport')
+  openSupport(SupportForm.Bug, { productArea: 'Workflow Error' })
 }

 onMounted(async () => {
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/src/components/dialog/content/setting/CreditsPanel.vue
@@ -45,14 +45,15 @@ import Button from '@/components/ui/button/Button.vue'
 import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import CreditsTile from '@/platform/cloud/subscription/components/CreditsTile.vue'
+import { SupportForm } from '@/platform/support/config'
+import { useSupportContext } from '@/platform/support/useSupportContext'
 import { useTelemetry } from '@/platform/telemetry'
 import { useAuthStore } from '@/stores/authStore'
-import { useCommandStore } from '@/stores/commandStore'

 const { buildDocsUrl, docsPaths } = useExternalLink()
 const authStore = useAuthStore()
 const authActions = useAuthActions()
-const commandStore = useCommandStore()
+const { openSupport } = useSupportContext()
 const telemetry = useTelemetry()

 const usageLogsTableRef = ref<InstanceType<typeof UsageLogsTable> | null>(null)
@@ -70,13 +71,13 @@ const handleCreditsHistoryClick = async () => {
  await authActions.accessBillingPortal()
 }

-const handleMessageSupport = async () => {
+const handleMessageSupport = () => {
  telemetry?.trackHelpResourceClicked({
    resource_type: 'help_feedback',
    is_external: true,
    source: 'credits_panel'
  })
-  await commandStore.execute('Comfy.ContactSupport')
+  openSupport(SupportForm.Billing, { productArea: 'Credits' })
 }

 const handleFaqClick = () => {
--- a/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
@@ -49,6 +49,13 @@ vi.mock('@/stores/commandStore', () => ({
  }))
 }))

+const mockOpenSupport = vi.fn()
+vi.mock('@/platform/support/useSupportContext', () => ({
+  useSupportContext: vi.fn(() => ({
+    openSupport: mockOpenSupport
+  }))
+}))
+
 vi.mock('@/composables/useExternalLink', () => ({
  useExternalLink: vi.fn(() => ({
    staticUrls: {
@@ -353,7 +360,7 @@ describe('ErrorNodeCard.vue', () => {
    openSpy.mockRestore()
  })

-  it('executes ContactSupport command when Get Help button is clicked', async () => {
+  it('opens the Pylon bug-report form when Get Help button is clicked', async () => {
    const { user } = renderCard(makeRuntimeErrorCard())

    await waitFor(() => {
@@ -362,7 +369,9 @@ describe('ErrorNodeCard.vue', () => {

    await user.click(screen.getByRole('button', { name: /Get Help/ }))

-    expect(mockExecuteCommand).toHaveBeenCalledWith('Comfy.ContactSupport')
+    expect(mockOpenSupport).toHaveBeenCalledWith('report-a-bug', {
+      productArea: 'Workflow Error'
+    })
    expect(mockTrackHelpResourceClicked).toHaveBeenCalledWith(
      expect.objectContaining({
        resource_type: 'help_feedback',
--- a/src/components/rightSidePanel/errors/useErrorActions.test.ts
+++ b/src/components/rightSidePanel/errors/useErrorActions.test.ts
@@ -5,7 +5,7 @@ import { useErrorActions } from './useErrorActions'
 const mocks = vi.hoisted(() => ({
  trackUiButtonClicked: vi.fn(),
  trackHelpResourceClicked: vi.fn(),
-  execute: vi.fn(),
+  openSupport: vi.fn(),
  telemetry: null as {
    trackUiButtonClicked: ReturnType<typeof vi.fn>
    trackHelpResourceClicked: ReturnType<typeof vi.fn>
@@ -15,9 +15,9 @@ const mocks = vi.hoisted(() => ({
  }
 }))

-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: () => ({
-    execute: mocks.execute
+vi.mock('@/platform/support/useSupportContext', () => ({
+  useSupportContext: () => ({
+    openSupport: mocks.openSupport
  })
 }))

@@ -41,7 +41,7 @@ describe('useErrorActions', () => {
    }
    mocks.trackUiButtonClicked.mockReset()
    mocks.trackHelpResourceClicked.mockReset()
-    mocks.execute.mockReset()
+    mocks.openSupport.mockReset()
    windowOpenSpy = vi
      .spyOn(window, 'open')
      .mockImplementation(() => null as unknown as Window)
@@ -84,36 +84,31 @@ describe('useErrorActions', () => {
  })

  describe('contactSupport', () => {
-    it('tracks the help resource click and executes the contact support command', () => {
-      mocks.execute.mockReturnValue('executed')
+    it('tracks the help resource click and opens the Pylon bug-report form', () => {
      const { contactSupport } = useErrorActions()

-      const result = contactSupport()
+      contactSupport()

      expect(mocks.trackHelpResourceClicked).toHaveBeenCalledWith({
        resource_type: 'help_feedback',
        is_external: true,
        source: 'error_dialog'
      })
-      expect(mocks.execute).toHaveBeenCalledWith('Comfy.ContactSupport')
-      expect(result).toBe('executed')
+      expect(mocks.openSupport).toHaveBeenCalledWith('report-a-bug', {
+        productArea: 'Workflow Error'
+      })
    })

-    it('returns the execute promise when the command is async', async () => {
-      mocks.execute.mockResolvedValue('done')
-      const { contactSupport } = useErrorActions()
-
-      await expect(contactSupport()).resolves.toBe('done')
-    })
-
-    it('still executes the command when telemetry is unavailable', () => {
+    it('still opens the support form when telemetry is unavailable', () => {
      mocks.telemetry = null
      const { contactSupport } = useErrorActions()

-      void contactSupport()
+      contactSupport()

      expect(mocks.trackHelpResourceClicked).not.toHaveBeenCalled()
-      expect(mocks.execute).toHaveBeenCalledWith('Comfy.ContactSupport')
+      expect(mocks.openSupport).toHaveBeenCalledWith('report-a-bug', {
+        productArea: 'Workflow Error'
+      })
    })
  })

--- a/src/components/rightSidePanel/errors/useErrorActions.ts
+++ b/src/components/rightSidePanel/errors/useErrorActions.ts
@@ -1,10 +1,11 @@
-import { useCommandStore } from '@/stores/commandStore'
 import { useExternalLink } from '@/composables/useExternalLink'
+import { SupportForm } from '@/platform/support/config'
+import { useSupportContext } from '@/platform/support/useSupportContext'
 import { useTelemetry } from '@/platform/telemetry'

 export function useErrorActions() {
  const telemetry = useTelemetry()
-  const commandStore = useCommandStore()
+  const { openSupport } = useSupportContext()
  const { staticUrls } = useExternalLink()

  function openGitHubIssues() {
@@ -21,7 +22,7 @@ export function useErrorActions() {
      is_external: true,
      source: 'error_dialog'
    })
-    return commandStore.execute('Comfy.ContactSupport')
+    openSupport(SupportForm.Bug, { productArea: 'Workflow Error' })
  }

  function findOnGitHub(errorMessage: string) {
--- a/src/components/topbar/CurrentUserPopoverLegacy.vue
+++ b/src/components/topbar/CurrentUserPopoverLegacy.vue
@@ -224,7 +224,7 @@ const handleOpenUserSettings = () => {
 }

 const handleOpenPlansAndPricing = () => {
-  subscriptionDialog.showPricingTable()
+  subscriptionDialog.showPricingTable({ reason: 'avatar_menu_plans' })
  emit('close')
 }

@@ -239,8 +239,7 @@ const handleOpenPlanAndCreditsSettings = () => {
 }

 const handleTopUp = () => {
-  // Track purchase credits entry from avatar popover
-  useTelemetry()?.trackAddApiCreditButtonClicked()
+  useTelemetry()?.trackAddApiCreditButtonClicked({ source: 'avatar_menu' })
  dialogService.showTopUpCreditsDialog()
  emit('close')
 }
@@ -254,7 +253,7 @@ const handleOpenPartnerNodesInfo = () => {
 }

 const handleUpgradeToAddCredits = () => {
-  subscriptionDialog.showPricingTable()
+  subscriptionDialog.showPricingTable({ reason: 'upgrade_to_add_credits' })
  emit('close')
 }

--- a/src/components/topbar/TopbarSubscribeButton.vue
+++ b/src/components/topbar/TopbarSubscribeButton.vue
@@ -21,6 +21,6 @@ const { isFreeTier } = useBillingContext()
 const subscriptionDialog = useSubscriptionDialog()

 function handleClick() {
-  subscriptionDialog.showPricingTable()
+  subscriptionDialog.showPricingTable({ reason: 'subscribe_now_button' })
 }
 </script>
--- a/src/composables/billing/types.ts
+++ b/src/composables/billing/types.ts
@@ -1,5 +1,6 @@
 import type { ComputedRef, Ref } from 'vue'

+import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import type {
  BillingStatus,
@@ -75,9 +76,10 @@ export interface BillingActions {
   */
  requireActiveSubscription: () => Promise<void>
  /**
-   * Shows the subscription dialog.
+   * Shows the subscription dialog. Pass a reason so the paywall open and any
+   * downstream checkout stay attributed to the triggering product moment.
   */
-  showSubscriptionDialog: () => void
+  showSubscriptionDialog: (options?: SubscriptionDialogOptions) => void
 }

 export interface BillingState {
--- a/src/composables/billing/useBillingContext.ts
+++ b/src/composables/billing/useBillingContext.ts
@@ -7,6 +7,7 @@ import {
  getTierFeatures
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type {
  PreviewSubscribeOptions,
  SubscribeOptions
@@ -281,8 +282,8 @@ function useBillingContextInternal(): BillingContext {
    return activeContext.value.requireActiveSubscription()
  }

-  function showSubscriptionDialog() {
-    return activeContext.value.showSubscriptionDialog()
+  function showSubscriptionDialog(options?: SubscriptionDialogOptions) {
+    return activeContext.value.showSubscriptionDialog(options)
  }

  return {
--- a/src/composables/billing/useLegacyBilling.ts
+++ b/src/composables/billing/useLegacyBilling.ts
@@ -2,6 +2,7 @@ import { computed, ref } from 'vue'

 import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type {
  BillingStatus,
  BillingSubscriptionStatus,
@@ -189,12 +190,12 @@ export function useLegacyBilling(): BillingState & BillingActions {
  async function requireActiveSubscription(): Promise<void> {
    await fetchStatus()
    if (!isActiveSubscription.value) {
-      legacyShowSubscriptionDialog()
+      legacyShowSubscriptionDialog({ reason: 'subscription_required' })
    }
  }

-  function showSubscriptionDialog(): void {
-    legacyShowSubscriptionDialog()
+  function showSubscriptionDialog(options?: SubscriptionDialogOptions): void {
+    legacyShowSubscriptionDialog(options)
  }

  return {
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1,4 +1,3 @@
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useSubgraphOperations } from '@/composables/graph/useSubgraphOperations'
@@ -23,7 +22,8 @@ import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { buildSupportUrl } from '@/platform/support/config'
+import { SupportForm } from '@/platform/support/config'
+import { useSupportContext } from '@/platform/support/useSupportContext'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ExecutionTriggerSource } from '@/platform/telemetry/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
@@ -503,7 +503,7 @@ export function useCoreCommands(): ComfyCommand[] {
      }) => {
        trackRunButton(metadata)
        if (!isActiveSubscription.value) {
-          showSubscriptionDialog()
+          showSubscriptionDialog({ reason: 'subscribe_to_run' })
          return
        }

@@ -526,7 +526,7 @@ export function useCoreCommands(): ComfyCommand[] {
      }) => {
        trackRunButton(metadata)
        if (!isActiveSubscription.value) {
-          showSubscriptionDialog()
+          showSubscriptionDialog({ reason: 'subscribe_to_run' })
          return
        }

@@ -548,7 +548,7 @@ export function useCoreCommands(): ComfyCommand[] {
      }) => {
        trackRunButton(metadata)
        if (!isActiveSubscription.value) {
-          showSubscriptionDialog()
+          showSubscriptionDialog({ reason: 'subscribe_to_run' })
          return
        }

@@ -864,12 +864,7 @@ export function useCoreCommands(): ComfyCommand[] {
      label: 'Contact Support',
      versionAdded: '1.17.8',
      function: () => {
-        const { userEmail, resolvedUserInfo } = useCurrentUser()
-        const supportUrl = buildSupportUrl({
-          userEmail: userEmail.value,
-          userId: resolvedUserInfo.value?.id
-        })
-        window.open(supportUrl, '_blank', 'noopener,noreferrer')
+        useSupportContext().openSupport(SupportForm.Question)
      }
    },
    {
--- a/src/platform/assets/components/UploadModelUpgradeModal.vue
+++ b/src/platform/assets/components/UploadModelUpgradeModal.vue
@@ -25,6 +25,6 @@ function handleClose() {
 }

 function handleSubscribe() {
-  showSubscriptionDialog()
+  showSubscriptionDialog({ reason: 'upload_model_upgrade' })
 }
 </script>
--- a/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
+++ b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
@@ -51,7 +51,7 @@
      <p class="mb-5 text-center text-sm text-gray-600">
        {{ $t('cloudOnboarding.authTimeout.helpText') }}
        <a
-          href="https://support.comfy.org"
+          :href="supportUrl"
          class="cursor-pointer text-blue-400 no-underline"
          target="_blank"
          rel="noopener noreferrer"
@@ -75,6 +75,7 @@ import { useRouter } from 'vue-router'

 import Button from '@/components/ui/button/Button.vue'
 import { useAuthActions } from '@/composables/auth/useAuthActions'
+import { SupportForm, buildSupportUrl } from '@/platform/support/config'

 interface Props {
  errorMessage?: string
@@ -86,6 +87,10 @@ const router = useRouter()
 const { logout } = useAuthActions()
 const showTechnicalDetails = ref(false)

+const supportUrl = buildSupportUrl(SupportForm.Question, {
+  productArea: 'Cloud Onboarding'
+})
+
 const handleRestart = async () => {
  await logout()
  await router.replace({ name: 'cloud-login' })
--- a/src/platform/cloud/onboarding/CloudSignupView.vue
+++ b/src/platform/cloud/onboarding/CloudSignupView.vue
@@ -113,7 +113,7 @@
      >
        {{ t('cloudWaitlist_questionsText') }}
        <a
-          href="https://support.comfy.org"
+          :href="supportUrl"
          class="cursor-pointer text-azure-600 no-underline"
          target="_blank"
          rel="noopener noreferrer"
@@ -136,6 +136,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useFreeTierOnboarding } from '@/platform/cloud/onboarding/composables/useFreeTierOnboarding'
 import { usePostAuthRedirect } from '@/platform/cloud/onboarding/composables/usePostAuthRedirect'
+import { SupportForm, buildSupportUrl } from '@/platform/support/config'
 import { useTelemetry } from '@/platform/telemetry'
 import type { SignUpData } from '@/schemas/signInSchema'
 import { isInChina } from '@/utils/networkUtil'
@@ -162,6 +163,10 @@ const { onAuthSuccess } = usePostAuthRedirect({
  defaultRedirect: () => ({ path: '/', query: route.query })
 })

+const supportUrl = buildSupportUrl(SupportForm.Question, {
+  productArea: 'Cloud Onboarding'
+})
+
 const navigateToLogin = async () => {
  await router.push({ name: 'cloud-login', query: route.query })
 }
--- a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts
+++ b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts
@@ -140,7 +140,10 @@ describe('CloudSubscriptionRedirectView', () => {
    expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
      'creator',
      'monthly',
-      false
+      {
+        openInNewTab: false,
+        paymentIntentSource: 'deep_link'
+      }
    )

    // Shows loading affordances
@@ -169,7 +172,10 @@ describe('CloudSubscriptionRedirectView', () => {
    expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
      'creator',
      'monthly',
-      false
+      {
+        openInNewTab: false,
+        paymentIntentSource: 'deep_link'
+      }
    )
  })

@@ -180,7 +186,8 @@ describe('CloudSubscriptionRedirectView', () => {
    expect(screen.getByText('Subscribe to Team Plan')).toBeInTheDocument()
    expect(mockPerformTeamSubscriptionCheckout).toHaveBeenCalledWith(
      'team_700',
-      'yearly'
+      'yearly',
+      { paymentIntentSource: 'deep_link' }
    )
    // Team never goes through the personal checkout path
    expect(mockPerformSubscriptionCheckout).not.toHaveBeenCalled()
--- a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
+++ b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
@@ -94,7 +94,9 @@ const runRedirect = wrapWithErrorHandlingAsync(async () => {
      return
    }
    isTeamCheckout.value = true
-    await performTeamSubscriptionCheckout(stopId, billingCycle)
+    await performTeamSubscriptionCheckout(stopId, billingCycle, {
+      paymentIntentSource: 'deep_link'
+    })
    return
  }

@@ -112,7 +114,10 @@ const runRedirect = wrapWithErrorHandlingAsync(async () => {
  if (isActiveSubscription.value) {
    await accessBillingPortal(undefined, false)
  } else {
-    await performSubscriptionCheckout(tierKeyParam, billingCycle, false)
+    await performSubscriptionCheckout(tierKeyParam, billingCycle, {
+      openInNewTab: false,
+      paymentIntentSource: 'deep_link'
+    })
  }
 }, reportError)

--- a/src/platform/cloud/onboarding/components/CloudTemplateFooter.vue
+++ b/src/platform/cloud/onboarding/components/CloudTemplateFooter.vue
@@ -17,7 +17,7 @@
      {{ t('auth.login.privacyLink') }}
    </a>
    <a
-      href="https://support.comfy.org"
+      :href="supportUrl"
      class="cursor-pointer text-sm text-gray-600 no-underline"
      target="_blank"
      rel="noopener noreferrer"
@@ -30,5 +30,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'

+import { SupportForm, buildSupportUrl } from '@/platform/support/config'
+
 const { t } = useI18n()
+
+const supportUrl = buildSupportUrl(SupportForm.Question, {
+  productArea: 'Cloud Onboarding'
+})
 </script>
--- a/src/platform/cloud/subscription/components/CreditsTile.vue
+++ b/src/platform/cloud/subscription/components/CreditsTile.vue
@@ -351,12 +351,12 @@ const handleRefresh = wrapWithErrorHandlingAsync(async () => {
 })

 function handleAddCredits() {
-  telemetry?.trackAddApiCreditButtonClicked()
+  telemetry?.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
  void dialogService.showTopUpCreditsDialog()
 }

 function handleUpgradeToAddCredits() {
-  showPricingTable()
+  showPricingTable({ reason: 'upgrade_to_add_credits' })
 }

 async function handleWindowFocus() {
--- a/src/platform/cloud/subscription/components/FreeTierDialogContent.test.ts
+++ b/src/platform/cloud/subscription/components/FreeTierDialogContent.test.ts
@@ -5,6 +5,8 @@ import { render, screen } from '@testing-library/vue'

 import enMessages from '@/locales/en/main.json' with { type: 'json' }

+import type { PaymentIntentSource } from '@/platform/telemetry/types'
+
 import FreeTierDialogContent from './FreeTierDialogContent.vue'

 const mockRenewalDate = vi.hoisted(() => ({ value: null as string | null }))
@@ -15,7 +17,7 @@ vi.mock('@/composables/billing/useBillingContext', () => ({
  }))
 }))

-function renderComponent() {
+function renderComponent(props?: { reason?: PaymentIntentSource }) {
  const i18n = createI18n({
    legacy: false,
    locale: 'en',
@@ -23,6 +25,7 @@ function renderComponent() {
  })

  return render(FreeTierDialogContent, {
+    props,
    global: {
      plugins: [i18n]
    }
@@ -43,4 +46,18 @@ describe('FreeTierDialogContent', () => {
    renderComponent()
    expect(screen.queryByText(/credits refresh on/)).not.toBeInTheDocument()
  })
+
+  it('keeps the generic copy for intent reasons outside the credits variants', () => {
+    mockRenewalDate.value = '2026-07-15T10:00:00Z'
+    renderComponent({ reason: 'subscribe_to_run' })
+    expect(
+      screen.getByText('Your credits refresh on Jul 15, 2026.')
+    ).toBeInTheDocument()
+  })
+
+  it('swaps to the out-of-credits copy without the refresh line', () => {
+    mockRenewalDate.value = '2026-07-15T10:00:00Z'
+    renderComponent({ reason: 'out_of_credits' })
+    expect(screen.queryByText(/credits refresh on/)).not.toBeInTheDocument()
+  })
 })
--- a/src/platform/cloud/subscription/components/FreeTierDialogContent.vue
+++ b/src/platform/cloud/subscription/components/FreeTierDialogContent.vue
@@ -52,7 +52,7 @@
          </p>

          <p
-            v-if="!reason || reason === 'subscription_required'"
+            v-if="!isCreditsBlockedVariant"
            class="m-0 text-sm text-text-secondary"
          >
            {{
@@ -65,10 +65,7 @@
          </p>

          <p
-            v-if="
-              (!reason || reason === 'subscription_required') &&
-              formattedRenewalDate
-            "
+            v-if="!isCreditsBlockedVariant && formattedRenewalDate"
            class="m-0 text-sm text-text-secondary"
          >
            {{
@@ -88,7 +85,7 @@
          @click="$emit('upgrade')"
        >
          {{
-            reason === 'out_of_credits' || reason === 'top_up_blocked'
+            isCreditsBlockedVariant
              ? $t('subscription.freeTier.upgradeCta')
              : $t('subscription.freeTier.subscribeCta')
          }}
@@ -103,12 +100,12 @@ import { computed } from 'vue'

 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
-import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { getTierCredits } from '@/platform/cloud/subscription/constants/tierPricing'

-defineProps<{
-  reason?: SubscriptionDialogReason
+const { reason } = defineProps<{
+  reason?: PaymentIntentSource
 }>()

 defineEmits<{
@@ -129,4 +126,10 @@ const formattedRenewalDate = computed(() => {
 })

 const freeTierCredits = computed(() => getTierCredits('free'))
+
+// Only these two variants replace the generic free-tier copy; any other
+// intent reason (subscribe_to_run, deep_link, ...) keeps the default pitch.
+const isCreditsBlockedVariant = computed(
+  () => reason === 'out_of_credits' || reason === 'top_up_blocked'
+)
 </script>
--- a/src/platform/cloud/subscription/components/PricingTable.test.ts
+++ b/src/platform/cloud/subscription/components/PricingTable.test.ts
@@ -261,6 +261,7 @@ describe('PricingTable', () => {
        tier: 'creator',
        cycle: 'yearly',
        checkout_type: 'change',
+        checkout_attempt_id: expect.any(String),
        previous_tier: 'standard'
      })
      expect(mockAccessBillingPortal).toHaveBeenCalledWith('creator-yearly')
@@ -341,6 +342,7 @@ describe('PricingTable', () => {
      expect(
        window.localStorage.getItem(PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY)
      ).toBeNull()
+      expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
    })

    it('should use the latest userId value when it changes after mount', async () => {
@@ -366,6 +368,7 @@ describe('PricingTable', () => {
        tier: 'creator',
        cycle: 'yearly',
        checkout_type: 'change',
+        checkout_attempt_id: expect.any(String),
        previous_tier: 'standard'
      })
    })
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -277,13 +277,19 @@ import type {
  TierKey,
  TierPricing
 } from '@/platform/cloud/subscription/constants/tierPricing'
-import { recordPendingSubscriptionCheckoutAttempt } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
+import {
+  recordPendingSubscriptionCheckoutAttempt,
+  withPendingCheckoutAttemptId
+} from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 import { performSubscriptionCheckout } from '@/platform/cloud/subscription/utils/subscriptionCheckoutUtil'
 import { isPlanDowngrade } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
-import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
+import type {
+  CheckoutAttributionMetadata,
+  PaymentIntentSource
+} from '@/platform/telemetry/types'
 import { useAuthStore } from '@/stores/authStore'

 type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
@@ -321,6 +327,10 @@ interface PricingTierConfig {
  isPopular?: boolean
 }

+const { reason } = defineProps<{
+  reason?: PaymentIntentSource
+}>()
+
 const emit = defineEmits<{
  chooseTeamWorkspace: []
 }>()
@@ -463,16 +473,17 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
        } as const
        const previousPlan = currentPlanDescriptor.value
        const checkoutAttribution = await getCheckoutAttributionForCloud()
-        if (userId.value) {
-          telemetry?.trackBeginCheckout({
-            user_id: userId.value,
-            tier: targetPlan.tierKey,
-            cycle: targetPlan.billingCycle,
-            checkout_type: 'change',
-            ...checkoutAttribution,
-            ...(previousPlan ? { previous_tier: previousPlan.tierKey } : {})
-          })
-        }
+        const beginCheckoutMetadata = userId.value
+          ? {
+              user_id: userId.value,
+              tier: targetPlan.tierKey,
+              cycle: targetPlan.billingCycle,
+              checkout_type: 'change' as const,
+              ...(reason ? { payment_intent_source: reason } : {}),
+              ...checkoutAttribution,
+              ...(previousPlan ? { previous_tier: previousPlan.tierKey } : {})
+            }
+          : null
        // Pass the target tier to create a deep link to subscription update confirmation
        const checkoutTier = getCheckoutTier(
          targetPlan.tierKey,
@@ -487,29 +498,39 @@ const handleSubscribe = wrapWithErrorHandlingAsync(

        if (downgrade) {
          // TODO(COMFY-StripeProration): Remove once backend checkout creation mirrors portal proration ("change at billing end")
-          await accessBillingPortal()
+          const didOpenPortal = await accessBillingPortal()
+          if (didOpenPortal && beginCheckoutMetadata) {
+            telemetry?.trackBeginCheckout(beginCheckoutMetadata)
+          }
        } else {
          const didOpenPortal = await accessBillingPortal(checkoutTier)
          if (!didOpenPortal) {
            return
          }

-          recordPendingSubscriptionCheckoutAttempt({
+          const pendingAttempt = recordPendingSubscriptionCheckoutAttempt({
            tier: targetPlan.tierKey,
            cycle: targetPlan.billingCycle,
            checkout_type: 'change',
+            payment_intent_source: reason,
            ...(previousPlan ? { previous_tier: previousPlan.tierKey } : {}),
            ...(previousPlan
              ? { previous_cycle: previousPlan.billingCycle }
              : {})
          })
+          if (beginCheckoutMetadata) {
+            telemetry?.trackBeginCheckout(
+              withPendingCheckoutAttemptId(
+                beginCheckoutMetadata,
+                pendingAttempt
+              )
+            )
+          }
        }
      } else {
-        await performSubscriptionCheckout(
-          tierKey,
-          currentBillingCycle.value,
-          true
-        )
+        await performSubscriptionCheckout(tierKey, currentBillingCycle.value, {
+          paymentIntentSource: reason
+        })
      }
    } finally {
      isLoading.value = false
--- a/src/platform/cloud/subscription/components/SubscribeButton.vue
+++ b/src/platform/cloud/subscription/components/SubscribeButton.vue
@@ -56,7 +56,7 @@ const handleSubscribe = () => {
    current_tier: tier.value?.toLowerCase()
  })
  isAwaitingStripeSubscription.value = true
-  showSubscriptionDialog()
+  showSubscriptionDialog({ reason: 'subscribe_now_button' })
 }

 onBeforeUnmount(() => {
--- a/src/platform/cloud/subscription/components/SubscribeToRun.vue
+++ b/src/platform/cloud/subscription/components/SubscribeToRun.vue
@@ -54,6 +54,6 @@ function handleSubscribeToRun() {
    trackRunButton({ subscribe_to_run: true })
  }

-  showSubscriptionDialog()
+  showSubscriptionDialog({ reason: 'subscribe_to_run' })
 }
 </script>
--- a/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
@@ -48,7 +48,9 @@
            v-if="isActiveSubscription"
            variant="primary"
            class="rounded-lg px-4 py-2 text-sm font-normal text-text-primary"
-            @click="showSubscriptionDialog"
+            @click="
+              showSubscriptionDialog({ reason: 'settings_billing_panel' })
+            "
          >
            {{ $t('subscription.upgradePlan') }}
          </Button>
--- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
@@ -33,7 +33,11 @@
      </i18n-t>
    </div>

-    <PricingTable class="flex-1" @choose-team-workspace="handleChooseTeam" />
+    <PricingTable
+      :reason
+      class="flex-1"
+      @choose-team-workspace="handleChooseTeam"
+    />

    <!-- Contact and Enterprise Links -->
    <div class="flex flex-col items-center gap-2">
@@ -155,13 +159,14 @@ import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeB
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { isCloud } from '@/platform/distribution/types'
+import { SupportForm } from '@/platform/support/config'
+import { useSupportContext } from '@/platform/support/useSupportContext'
 import { useTelemetry } from '@/platform/telemetry'
-import { useCommandStore } from '@/stores/commandStore'
-import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { PaymentIntentSource } from '@/platform/telemetry/types'

 const { onClose, reason, onChooseTeam } = defineProps<{
  onClose: () => void
-  reason?: SubscriptionDialogReason
+  reason?: PaymentIntentSource
  onChooseTeam?: () => void
 }>()

@@ -184,7 +189,7 @@ const formattedMonthlyPrice = new Intl.NumberFormat(
    maximumFractionDigits: 0
  }
 ).format(MONTHLY_SUBSCRIPTION_PRICE)
-const commandStore = useCommandStore()
+const { openSupport } = useSupportContext()
 const telemetry = useTelemetry()

 // Always show custom pricing table for cloud subscriptions
@@ -215,13 +220,13 @@ const handleClose = () => {
  onClose()
 }

-const handleContactUs = async () => {
+const handleContactUs = () => {
  telemetry?.trackHelpResourceClicked({
    resource_type: 'help_feedback',
    is_external: true,
    source: 'subscription'
  })
-  await commandStore.execute('Comfy.ContactSupport')
+  openSupport(SupportForm.Billing, { productArea: 'Billing' })
 }

 const handleViewEnterprise = () => {
--- a/src/platform/cloud/subscription/composables/useAccountPreconditionDialog.ts
+++ b/src/platform/cloud/subscription/composables/useAccountPreconditionDialog.ts
@@ -24,7 +24,9 @@ export function useAccountPreconditionDialog() {
        )
        return
      case 'subscription':
-        void dialogService.showSubscriptionRequiredDialog()
+        void dialogService.showSubscriptionRequiredDialog({
+          reason: 'subscription_required'
+        })
        return
      case 'credits':
        void dialogService.showTopUpCreditsDialog({
--- a/src/platform/cloud/subscription/composables/usePricingTableUrlLoader.test.ts
+++ b/src/platform/cloud/subscription/composables/usePricingTableUrlLoader.test.ts
@@ -55,12 +55,6 @@ vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
  })
 }))

-const mockTrackSubscription = vi.hoisted(() => vi.fn())
-
-vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({ trackSubscription: mockTrackSubscription })
-}))
-
 describe('usePricingTableUrlLoader', () => {
  beforeEach(() => {
    vi.clearAllMocks()
@@ -96,9 +90,6 @@ describe('usePricingTableUrlLoader', () => {
      reason: 'deep_link',
      planMode: undefined
    })
-    expect(mockTrackSubscription).toHaveBeenCalledWith('modal_opened', {
-      reason: 'deep_link'
-    })
    expect(mockRouterReplace).toHaveBeenCalledWith({ query: {} })
  })

@@ -150,7 +141,6 @@ describe('usePricingTableUrlLoader', () => {
    await loadPricingTableFromUrl()

    expect(mockShowPricingTable).not.toHaveBeenCalled()
-    expect(mockTrackSubscription).not.toHaveBeenCalled()
  })

  it('denies, strips, and clears together when the user is not eligible', async () => {
@@ -161,7 +151,6 @@ describe('usePricingTableUrlLoader', () => {
    await loadPricingTableFromUrl()

    expect(mockShowPricingTable).not.toHaveBeenCalled()
-    expect(mockTrackSubscription).not.toHaveBeenCalled()
    expect(mockRouterReplace).toHaveBeenCalledWith({
      query: { other: 'param' }
    })
@@ -230,7 +219,6 @@ describe('usePricingTableUrlLoader', () => {
    )

    expect(mockShowPricingTable).not.toHaveBeenCalled()
-    expect(mockTrackSubscription).not.toHaveBeenCalled()
    expect(mockRouterReplace).toHaveBeenCalledWith({ query: {} })
    expect(preservedQueryMocks.clearPreservedQuery).toHaveBeenCalledWith(
      'pricing'
--- a/src/platform/cloud/subscription/composables/usePricingTableUrlLoader.ts
+++ b/src/platform/cloud/subscription/composables/usePricingTableUrlLoader.ts
@@ -7,7 +7,6 @@ import {
  mergePreservedQueryIntoQuery
 } from '@/platform/navigation/preservedQueryManager'
 import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
-import { useTelemetry } from '@/platform/telemetry'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'

@@ -62,7 +61,6 @@ export function usePricingTableUrlLoader() {
    const planMode =
      param === 'team' || param === 'personal' ? param : undefined

-    useTelemetry()?.trackSubscription('modal_opened', { reason: 'deep_link' })
    subscriptionDialog.showPricingTable({ reason: 'deep_link', planMode })
  }

--- a/src/platform/cloud/subscription/composables/useSubscription.ts
+++ b/src/platform/cloud/subscription/composables/useSubscription.ts
@@ -15,7 +15,7 @@ import { t } from '@/i18n'
 import { fetchWithUnifiedRemint } from '@/platform/auth/unified/remintRetry'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
-import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
 import { AuthStoreError, useAuthStore } from '@/stores/authStore'
 import { useDialogService } from '@/services/dialogService'
@@ -237,14 +237,7 @@ function useSubscriptionInternal() {
    })
  }, reportError)

-  const showSubscriptionDialog = (options?: {
-    reason?: SubscriptionDialogReason
-  }) => {
-    useTelemetry()?.trackSubscription('modal_opened', {
-      current_tier: subscriptionTier.value?.toLowerCase(),
-      reason: options?.reason
-    })
-
+  const showSubscriptionDialog = (options?: SubscriptionDialogOptions) => {
    void showSubscriptionRequiredDialog(options)
  }

@@ -277,7 +270,7 @@ function useSubscriptionInternal() {
    await fetchSubscriptionStatus()

    if (!isSubscribedOrIsNotCloud.value) {
-      showSubscriptionDialog()
+      showSubscriptionDialog({ reason: 'subscription_required' })
    }
  }

--- a/src/platform/cloud/subscription/composables/useSubscriptionActions.test.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionActions.test.ts
@@ -6,7 +6,7 @@ const mockBillingFetchBalance = vi.fn()
 const mockAuthFetchBalance = vi.fn()
 const mockFetchStatus = vi.fn()
 const mockShowTopUpCreditsDialog = vi.fn()
-const mockExecute = vi.fn()
+const mockOpenSupport = vi.fn()
 const mockToastAdd = vi.fn()

 vi.mock('@/platform/updates/common/toastStore', () => ({
@@ -32,25 +32,42 @@ vi.mock('@/services/dialogService', () => ({
  })
 }))

-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: () => ({
-    execute: mockExecute
+vi.mock('@/platform/support/useSupportContext', () => ({
+  useSupportContext: () => ({
+    openSupport: mockOpenSupport
  })
 }))

-// useTelemetry() returns null in OSS, a dispatcher in cloud — toggle via mockIsCloud.
-const { mockIsCloud, mockTrackHelpResourceClicked } = vi.hoisted(() => ({
+// mockIsCloud drives both the `isCloud` build flag (which gates the telemetry
+// call) and useTelemetry() (which returns null in OSS, a dispatcher in cloud).
+const {
+  mockIsCloud,
+  mockTrackHelpResourceClicked,
+  mockTrackAddApiCreditButtonClicked
+} = vi.hoisted(() => ({
  mockIsCloud: { value: true },
-  mockTrackHelpResourceClicked: vi.fn()
+  mockTrackHelpResourceClicked: vi.fn(),
+  mockTrackAddApiCreditButtonClicked: vi.fn()
 }))

 vi.mock('@/platform/telemetry', () => ({
  useTelemetry: () =>
    mockIsCloud.value
-      ? { trackHelpResourceClicked: mockTrackHelpResourceClicked }
+      ? {
+          trackHelpResourceClicked: mockTrackHelpResourceClicked,
+          trackAddApiCreditButtonClicked: mockTrackAddApiCreditButtonClicked
+        }
      : null
 }))

+vi.mock('@/platform/distribution/types', () => ({
+  isDesktop: false,
+  isNightly: false,
+  get isCloud() {
+    return mockIsCloud.value
+  }
+}))
+
 // Mock window.open
 const mockOpen = vi.fn()
 Object.defineProperty(window, 'open', {
@@ -69,28 +86,31 @@ describe('useSubscriptionActions', () => {
      const { handleAddApiCredits } = useSubscriptionActions()
      handleAddApiCredits()
      expect(mockShowTopUpCreditsDialog).toHaveBeenCalledOnce()
+      expect(mockTrackAddApiCreditButtonClicked).toHaveBeenCalledWith({
+        source: 'settings_billing_panel'
+      })
    })
  })

  describe('handleMessageSupport', () => {
-    it('should execute support command and manage loading state', async () => {
+    it('opens the Pylon billing form and resets loading state', () => {
      const { handleMessageSupport, isLoadingSupport } =
        useSubscriptionActions()

      expect(isLoadingSupport.value).toBe(false)

-      const promise = handleMessageSupport()
-      expect(isLoadingSupport.value).toBe(true)
+      handleMessageSupport()

-      await promise
-      expect(mockExecute).toHaveBeenCalledWith('Comfy.ContactSupport')
+      expect(mockOpenSupport).toHaveBeenCalledWith('billing-refund-issue', {
+        productArea: 'Billing'
+      })
      expect(isLoadingSupport.value).toBe(false)
    })

-    it('tracks help-resource telemetry when messaging support in cloud', async () => {
+    it('tracks help-resource telemetry when messaging support in cloud', () => {
      const { handleMessageSupport } = useSubscriptionActions()

-      await handleMessageSupport()
+      handleMessageSupport()

      expect(mockTrackHelpResourceClicked).toHaveBeenCalledWith({
        resource_type: 'help_feedback',
@@ -99,21 +119,23 @@ describe('useSubscriptionActions', () => {
      })
    })

-    it('does not fire telemetry when messaging support in OSS builds', async () => {
+    it('does not fire telemetry when messaging support in OSS builds', () => {
      mockIsCloud.value = false
      const { handleMessageSupport } = useSubscriptionActions()

-      await handleMessageSupport()
+      handleMessageSupport()

      expect(mockTrackHelpResourceClicked).not.toHaveBeenCalled()
    })

-    it('should handle errors gracefully', async () => {
-      mockExecute.mockRejectedValueOnce(new Error('Command failed'))
+    it('handles errors gracefully', () => {
+      mockOpenSupport.mockImplementationOnce(() => {
+        throw new Error('open failed')
+      })
      const { handleMessageSupport, isLoadingSupport } =
        useSubscriptionActions()

-      await handleMessageSupport()
+      handleMessageSupport()
      expect(isLoadingSupport.value).toBe(false)
    })
  })
--- a/src/platform/cloud/subscription/composables/useSubscriptionActions.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionActions.ts
@@ -1,16 +1,18 @@
 import { onMounted, ref } from 'vue'

 import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { isCloud } from '@/platform/distribution/types'
+import { SupportForm } from '@/platform/support/config'
+import { useSupportContext } from '@/platform/support/useSupportContext'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
-import { useCommandStore } from '@/stores/commandStore'

 /**
 * Composable for handling subscription panel actions and loading states
 */
 export function useSubscriptionActions() {
  const dialogService = useDialogService()
-  const commandStore = useCommandStore()
+  const { openSupport } = useSupportContext()
  const telemetry = useTelemetry()
  const { fetchBalance, fetchStatus } = useBillingContext()

@@ -21,18 +23,23 @@ export function useSubscriptionActions() {
  })

  const handleAddApiCredits = () => {
+    telemetry?.trackAddApiCreditButtonClicked({
+      source: 'settings_billing_panel'
+    })
    void dialogService.showTopUpCreditsDialog()
  }

-  const handleMessageSupport = async () => {
+  const handleMessageSupport = () => {
    try {
      isLoadingSupport.value = true
-      telemetry?.trackHelpResourceClicked({
-        resource_type: 'help_feedback',
-        is_external: true,
-        source: 'subscription'
-      })
-      await commandStore.execute('Comfy.ContactSupport')
+      if (isCloud) {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'help_feedback',
+          is_external: true,
+          source: 'subscription'
+        })
+      }
+      openSupport(SupportForm.Billing, { productArea: 'Billing' })
    } catch (error) {
      console.error('[useSubscriptionActions] Error contacting support:', error)
    } finally {
--- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts
@@ -5,8 +5,10 @@ import { useSubscriptionDialog } from './useSubscriptionDialog'
 const mockCloseDialog = vi.fn()
 const mockShowLayoutDialog = vi.fn()
 const mockShowTeamWorkspacesDialog = vi.fn()
+const mockTrackSubscription = vi.hoisted(() => vi.fn())
 const mockIsInPersonalWorkspace = vi.hoisted(() => ({ value: true }))
 const mockIsFreeTier = vi.hoisted(() => ({ value: false }))
+const mockTier = vi.hoisted(() => ({ value: 'FREE' as string | null }))
 const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: false }))
 const mockIsCloud = vi.hoisted(() => ({ value: true }))
 const mockIsLegacyTeamPlan = vi.hoisted(() => ({ value: false }))
@@ -60,10 +62,15 @@ vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
 vi.mock('@/composables/billing/useBillingContext', () => ({
  useBillingContext: () => ({
    isFreeTier: mockIsFreeTier,
-    isLegacyTeamPlan: mockIsLegacyTeamPlan
+    isLegacyTeamPlan: mockIsLegacyTeamPlan,
+    tier: mockTier
  })
 }))

+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackSubscription: mockTrackSubscription })
+}))
+
 vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
  useWorkspaceUI: () => ({
    permissions: {
@@ -80,6 +87,7 @@ describe('useSubscriptionDialog', () => {
    mockIsCloud.value = true
    mockIsInPersonalWorkspace.value = true
    mockIsFreeTier.value = false
+    mockTier.value = 'FREE'
    mockTeamWorkspacesEnabled.value = false
    mockIsLegacyTeamPlan.value = false
    mockCanManageSubscription.value = true
@@ -198,6 +206,51 @@ describe('useSubscriptionDialog', () => {
      const props = mockShowLayoutDialog.mock.calls[0][0].props
      expect(props.initialPlanMode).toBe('team')
    })
+
+    it('tracks modal_opened with the caller reason and current tier', () => {
+      mockTier.value = 'STANDARD'
+      const { showPricingTable } = useSubscriptionDialog()
+
+      showPricingTable({ reason: 'upgrade_to_add_credits' })
+
+      expect(mockTrackSubscription).toHaveBeenCalledWith('modal_opened', {
+        current_tier: 'standard',
+        reason: 'upgrade_to_add_credits'
+      })
+    })
+
+    it('tracks modal_opened on the workspace (unified) path too', () => {
+      mockTeamWorkspacesEnabled.value = true
+      const { showPricingTable } = useSubscriptionDialog()
+
+      showPricingTable({ reason: 'subscribe_to_run' })
+
+      expect(mockTrackSubscription).toHaveBeenCalledWith(
+        'modal_opened',
+        expect.objectContaining({ reason: 'subscribe_to_run' })
+      )
+    })
+
+    it('does not track modal_opened for the inactive member dialog', () => {
+      mockTeamWorkspacesEnabled.value = true
+      mockIsInPersonalWorkspace.value = false
+      mockCanManageSubscription.value = false
+      const { showPricingTable } = useSubscriptionDialog()
+
+      showPricingTable({ reason: 'subscribe_to_run' })
+
+      expect(mockShowLayoutDialog).toHaveBeenCalledTimes(1)
+      expect(mockTrackSubscription).not.toHaveBeenCalled()
+    })
+
+    it('does not track on non-cloud', () => {
+      mockIsCloud.value = false
+      const { showPricingTable } = useSubscriptionDialog()
+
+      showPricingTable({ reason: 'subscribe_to_run' })
+
+      expect(mockTrackSubscription).not.toHaveBeenCalled()
+    })
  })

  describe('show', () => {
@@ -235,6 +288,20 @@ describe('useSubscriptionDialog', () => {
        expect.objectContaining({ key: 'subscription-required' })
      )
    })
+
+    it('tracks modal_opened with the reason for the free-tier dialog', () => {
+      mockIsFreeTier.value = true
+      mockIsInPersonalWorkspace.value = true
+      const { show } = useSubscriptionDialog()
+
+      show({ reason: 'out_of_credits' })
+
+      expect(mockTrackSubscription).toHaveBeenCalledTimes(1)
+      expect(mockTrackSubscription).toHaveBeenCalledWith(
+        'modal_opened',
+        expect.objectContaining({ reason: 'out_of_credits' })
+      )
+    })
  })

  describe('startTeamWorkspaceUpgradeFlow', () => {
--- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
@@ -4,6 +4,8 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'

@@ -11,14 +13,8 @@ const DIALOG_KEY = 'subscription-required'
 const FREE_TIER_DIALOG_KEY = 'free-tier-info'
 const RESUME_PRICING_KEY = 'comfy:resume-team-pricing'

-export type SubscriptionDialogReason =
-  | 'subscription_required'
-  | 'out_of_credits'
-  | 'top_up_blocked'
-  | 'deep_link'
-
-interface SubscriptionDialogOptions {
-  reason?: SubscriptionDialogReason
+export interface SubscriptionDialogOptions {
+  reason?: PaymentIntentSource
  /**
   * Forces the unified pricing dialog to open on a specific plan tab,
   * overriding the workspace-derived default (e.g. an "Upgrade to Team" CTA
@@ -38,6 +34,17 @@ export const useSubscriptionDialog = () => {
    dialogStore.closeDialog({ key: FREE_TIER_DIALOG_KEY })
  }

+  // Fired here — the choke point every paywall/pricing dialog variant passes
+  // through — so both the legacy and workspace billing paths emit it.
+  function trackModalOpened(reason?: PaymentIntentSource) {
+    // Resolved lazily to avoid the useBillingContext import cycle (see below).
+    const { tier } = useBillingContext()
+    useTelemetry()?.trackSubscription('modal_opened', {
+      current_tier: tier.value?.toLowerCase(),
+      reason
+    })
+  }
+
  function showPricingTable(options?: SubscriptionDialogOptions) {
    if (!isCloud) return

@@ -71,6 +78,8 @@ export const useSubscriptionDialog = () => {
      return
    }

+    trackModalOpened(options?.reason)
+
    // Shared dialog shell styling for both variants.
    const dialogComponentProps = {
      style: 'width: min(1328px, 95vw); max-height: 958px;',
@@ -167,6 +176,8 @@ export const useSubscriptionDialog = () => {
    // (not at composable setup) to avoid the useBillingContext import cycle.
    const { isFreeTier } = useBillingContext()
    if (isFreeTier.value && workspaceStore.isInPersonalWorkspace) {
+      trackModalOpened(options?.reason)
+
      const component = defineAsyncComponent(
        () =>
          import('@/platform/cloud/subscription/components/FreeTierDialogContent.vue')
@@ -236,7 +247,7 @@ export const useSubscriptionDialog = () => {
      sessionStorage.removeItem(RESUME_PRICING_KEY)

      if (!workspaceStore.isInPersonalWorkspace) {
-        showPricingTable()
+        showPricingTable({ reason: 'team_upgrade_resume' })
      }
    } catch {
      // sessionStorage may be unavailable
--- a/src/platform/cloud/subscription/utils/subscriptionCheckoutTracker.test.ts
+++ b/src/platform/cloud/subscription/utils/subscriptionCheckoutTracker.test.ts
@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import {
+  clearPendingSubscriptionCheckoutAttempt,
+  consumePendingSubscriptionCheckoutSuccess,
+  recordPendingSubscriptionCheckoutAttempt
+} from './subscriptionCheckoutTracker'
+
+const activeProStatus = {
+  is_active: true,
+  subscription_tier: 'PRO',
+  subscription_duration: 'MONTHLY'
+} as const
+
+describe('subscriptionCheckoutTracker', () => {
+  beforeEach(() => {
+    clearPendingSubscriptionCheckoutAttempt()
+  })
+
+  it('round-trips payment_intent_source from attempt to success metadata', () => {
+    recordPendingSubscriptionCheckoutAttempt({
+      tier: 'pro',
+      cycle: 'monthly',
+      checkout_type: 'new',
+      payment_intent_source: 'subscribe_to_run'
+    })
+
+    const metadata = consumePendingSubscriptionCheckoutSuccess(activeProStatus)
+
+    expect(metadata).toMatchObject({
+      tier: 'pro',
+      checkout_type: 'new',
+      payment_intent_source: 'subscribe_to_run'
+    })
+  })
+
+  it('omits payment_intent_source when the attempt had none', () => {
+    recordPendingSubscriptionCheckoutAttempt({
+      tier: 'pro',
+      cycle: 'monthly',
+      checkout_type: 'new'
+    })
+
+    const metadata = consumePendingSubscriptionCheckoutSuccess(activeProStatus)
+
+    expect(metadata).not.toBeNull()
+    expect(metadata).not.toHaveProperty('payment_intent_source')
+  })
+})
--- a/src/platform/cloud/subscription/utils/subscriptionCheckoutTracker.ts
+++ b/src/platform/cloud/subscription/utils/subscriptionCheckoutTracker.ts
@@ -7,7 +7,12 @@ import type {
  TierKey
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
-import type { SubscriptionSuccessMetadata } from '@/platform/telemetry/types'
+import type {
+  BeginCheckoutMetadata,
+  PaymentIntentSource,
+  SubscriptionCheckoutType,
+  SubscriptionSuccessMetadata
+} from '@/platform/telemetry/types'

 const PENDING_SUBSCRIPTION_CHECKOUT_MAX_AGE_MS = 6 * 60 * 60 * 1000
 const VALID_TIER_KEYS = new Set<TierKey>([
@@ -23,7 +28,6 @@ export const PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY =
 export const PENDING_SUBSCRIPTION_CHECKOUT_EVENT =
  'comfy:subscription-checkout-attempt-changed'

-type CheckoutType = 'new' | 'change'
 type SubscriptionDuration = 'MONTHLY' | 'ANNUAL'

 interface SubscriptionStatusSnapshot {
@@ -32,22 +36,24 @@ interface SubscriptionStatusSnapshot {
  subscription_duration?: SubscriptionDuration | null
 }

-interface PendingSubscriptionCheckoutAttempt {
+export interface PendingSubscriptionCheckoutAttempt {
  attempt_id: string
  started_at_ms: number
  tier: TierKey
  cycle: BillingCycle
-  checkout_type: CheckoutType
+  checkout_type: SubscriptionCheckoutType
  previous_tier?: TierKey
  previous_cycle?: BillingCycle
+  payment_intent_source?: PaymentIntentSource
 }

-interface RecordPendingSubscriptionCheckoutAttemptInput {
+interface PendingSubscriptionCheckoutAttemptInput {
  tier: TierKey
  cycle: BillingCycle
-  checkout_type: CheckoutType
+  checkout_type: SubscriptionCheckoutType
  previous_tier?: TierKey
  previous_cycle?: BillingCycle
+  payment_intent_source?: PaymentIntentSource
 }

 const dispatchPendingCheckoutChangeEvent = () => {
@@ -168,6 +174,9 @@ const normalizeAttempt = (
    ...(candidate.previous_cycle === 'monthly' ||
    candidate.previous_cycle === 'yearly'
      ? { previous_cycle: candidate.previous_cycle }
+      : {}),
+    ...(typeof candidate.payment_intent_source === 'string'
+      ? { payment_intent_source: candidate.payment_intent_source }
      : {})
  }
 }
@@ -224,20 +233,27 @@ const getPendingSubscriptionCheckoutAttempt =
 export const hasPendingSubscriptionCheckoutAttempt = (): boolean =>
  getPendingSubscriptionCheckoutAttempt() !== null

-export const recordPendingSubscriptionCheckoutAttempt = (
-  input: RecordPendingSubscriptionCheckoutAttemptInput
+export const createPendingSubscriptionCheckoutAttempt = (
+  input: PendingSubscriptionCheckoutAttemptInput
 ): PendingSubscriptionCheckoutAttempt => {
-  const storage = getStorage()
-  const attempt: PendingSubscriptionCheckoutAttempt = {
+  return {
    attempt_id: createAttemptId(),
    started_at_ms: Date.now(),
    tier: input.tier,
    cycle: input.cycle,
    checkout_type: input.checkout_type,
    ...(input.previous_tier ? { previous_tier: input.previous_tier } : {}),
-    ...(input.previous_cycle ? { previous_cycle: input.previous_cycle } : {})
+    ...(input.previous_cycle ? { previous_cycle: input.previous_cycle } : {}),
+    ...(input.payment_intent_source
+      ? { payment_intent_source: input.payment_intent_source }
+      : {})
  }
+}

+export const persistPendingSubscriptionCheckoutAttempt = (
+  attempt: PendingSubscriptionCheckoutAttempt
+): PendingSubscriptionCheckoutAttempt => {
+  const storage = getStorage()
  if (!storage) {
    return attempt
  }
@@ -255,6 +271,21 @@ export const recordPendingSubscriptionCheckoutAttempt = (
  return attempt
 }

+export const recordPendingSubscriptionCheckoutAttempt = (
+  input: PendingSubscriptionCheckoutAttemptInput
+): PendingSubscriptionCheckoutAttempt =>
+  persistPendingSubscriptionCheckoutAttempt(
+    createPendingSubscriptionCheckoutAttempt(input)
+  )
+
+export const withPendingCheckoutAttemptId = (
+  metadata: BeginCheckoutMetadata,
+  attempt: PendingSubscriptionCheckoutAttempt
+): BeginCheckoutMetadata => ({
+  ...metadata,
+  checkout_attempt_id: attempt.attempt_id
+})
+
 const didAttemptSucceed = (
  attempt: PendingSubscriptionCheckoutAttempt,
  status: SubscriptionStatusSnapshot
@@ -287,6 +318,9 @@ export const consumePendingSubscriptionCheckoutSuccess = (
    cycle: attempt.cycle,
    checkout_type: attempt.checkout_type,
    ...(attempt.previous_tier ? { previous_tier: attempt.previous_tier } : {}),
+    ...(attempt.payment_intent_source
+      ? { payment_intent_source: attempt.payment_intent_source }
+      : {}),
    value,
    currency: 'USD',
    ecommerce: {
--- a/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.test.ts
+++ b/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.test.ts
@@ -132,13 +132,14 @@ describe('performSubscriptionCheckout', () => {
      json: async () => ({ checkout_url: checkoutUrl })
    } as Response)

-    await performSubscriptionCheckout('pro', 'yearly', true)
+    await performSubscriptionCheckout('pro', 'yearly')

    expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith({
      user_id: 'user-123',
      tier: 'pro',
      cycle: 'yearly',
      checkout_type: 'new',
+      checkout_attempt_id: expect.any(String),
      ga_client_id: 'ga-client-id',
      ga_session_id: 'ga-session-id',
      ga_session_number: 'ga-session-number',
@@ -150,6 +151,12 @@ describe('performSubscriptionCheckout', () => {
      gbraid: 'gbraid-456',
      wbraid: 'wbraid-789'
    })
+    const beginCheckoutMetadata =
+      mockTelemetry.trackBeginCheckout.mock.calls[0][0]
+    const [, storedAttempt] = mockLocalStorage.setItem.mock.calls[0]
+    expect(beginCheckoutMetadata.checkout_attempt_id).toBe(
+      JSON.parse(storedAttempt).attempt_id
+    )
    expect(global.fetch).toHaveBeenCalledWith(
      expect.stringContaining(
        '/customers/cloud-subscription-checkout/pro-yearly'
@@ -186,7 +193,7 @@ describe('performSubscriptionCheckout', () => {
      json: async () => ({ checkout_url: checkoutUrl })
    } as Response)

-    await performSubscriptionCheckout('pro', 'monthly', true)
+    await performSubscriptionCheckout('pro', 'monthly')

    expect(warnSpy).toHaveBeenCalledWith(
      '[SubscriptionCheckout] Failed to collect checkout attribution',
@@ -203,11 +210,43 @@ describe('performSubscriptionCheckout', () => {
      user_id: 'user-123',
      tier: 'pro',
      cycle: 'monthly',
-      checkout_type: 'new'
+      checkout_type: 'new',
+      checkout_attempt_id: expect.any(String)
    })
    expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
  })

+  it('carries the payment intent source into begin_checkout and the pending attempt', async () => {
+    const checkoutUrl = 'https://checkout.stripe.com/test'
+    const openSpy = vi
+      .spyOn(window, 'open')
+      .mockImplementation(() => window as unknown as Window)
+
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({ checkout_url: checkoutUrl })
+    } as Response)
+
+    await performSubscriptionCheckout('pro', 'monthly', {
+      paymentIntentSource: 'out_of_credits'
+    })
+
+    expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith(
+      expect.objectContaining({ payment_intent_source: 'out_of_credits' })
+    )
+    const beginCheckoutMetadata =
+      mockTelemetry.trackBeginCheckout.mock.calls[0][0]
+    const [, storedAttempt] = mockLocalStorage.setItem.mock.calls[0]
+    const pendingAttempt = JSON.parse(storedAttempt)
+    expect(pendingAttempt).toMatchObject({
+      payment_intent_source: 'out_of_credits'
+    })
+    expect(beginCheckoutMetadata.checkout_attempt_id).toBe(
+      pendingAttempt.attempt_id
+    )
+    openSpy.mockRestore()
+  })
+
  it('uses the latest userId when it changes after checkout starts', async () => {
    const checkoutUrl = 'https://checkout.stripe.com/test'
    const openSpy = vi
@@ -222,7 +261,7 @@ describe('performSubscriptionCheckout', () => {
      json: async () => ({ checkout_url: checkoutUrl })
    } as Response)

-    const checkoutPromise = performSubscriptionCheckout('pro', 'yearly', true)
+    const checkoutPromise = performSubscriptionCheckout('pro', 'yearly')

    mockUserId.value = 'user-late'
    authHeader.resolve({ Authorization: 'Bearer test-token' })
@@ -235,13 +274,14 @@ describe('performSubscriptionCheckout', () => {
        user_id: 'user-late',
        tier: 'pro',
        cycle: 'yearly',
-        checkout_type: 'new'
+        checkout_type: 'new',
+        checkout_attempt_id: expect.any(String)
      })
    )
    expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
  })

-  it('does not persist a pending attempt when the checkout popup is blocked', async () => {
+  it('does not persist the pending attempt when the checkout popup is blocked', async () => {
    const checkoutUrl = 'https://checkout.stripe.com/test'
    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)

@@ -250,11 +290,18 @@ describe('performSubscriptionCheckout', () => {
      json: async () => ({ checkout_url: checkoutUrl })
    } as Response)

-    await performSubscriptionCheckout('pro', 'monthly', true)
+    await performSubscriptionCheckout('pro', 'monthly')

    expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
-    expect(
-      window.localStorage.getItem(PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY)
-    ).toBeNull()
+    const storedAttempt = window.localStorage.getItem(
+      PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY
+    )
+    expect(storedAttempt).toBeNull()
+    expect(mockLocalStorage.setItem).not.toHaveBeenCalled()
+    expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith(
+      expect.objectContaining({
+        checkout_attempt_id: expect.any(String)
+      })
+    )
  })
 })
--- a/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts
+++ b/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts
@@ -4,12 +4,19 @@ import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { getComfyApiBaseUrl } from '@/config/comfyApi'
 import { t } from '@/i18n'
 import { fetchWithUnifiedRemint } from '@/platform/auth/unified/remintRetry'
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import {
+  createPendingSubscriptionCheckoutAttempt,
+  persistPendingSubscriptionCheckoutAttempt,
+  withPendingCheckoutAttemptId
+} from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import type {
+  CheckoutAttributionMetadata,
+  PaymentIntentSource
+} from '@/platform/telemetry/types'
 import { AuthStoreError, useAuthStore } from '@/stores/authStore'
-import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
-import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
-import { recordPendingSubscriptionCheckoutAttempt } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 import type { BillingCycle } from './subscriptionTierRank'

 type CheckoutTier = TierKey | `${TierKey}-yearly`
@@ -31,6 +38,11 @@ const getCheckoutAttributionForCloud =
    return getCheckoutAttribution()
  }

+interface PerformSubscriptionCheckoutOptions {
+  openInNewTab?: boolean
+  paymentIntentSource?: PaymentIntentSource
+}
+
 /**
 * Core subscription checkout logic shared between PricingTable and
 * SubscriptionRedirectView. Handles:
@@ -47,10 +59,12 @@ const getCheckoutAttributionForCloud =
 export async function performSubscriptionCheckout(
  tierKey: TierKey,
  currentBillingCycle: BillingCycle,
-  openInNewTab: boolean = true
+  options: PerformSubscriptionCheckoutOptions = {}
 ): Promise<void> {
  if (!isCloud) return

+  const { openInNewTab = true, paymentIntentSource } = options
+
  const authStore = useAuthStore()
  const { userId } = storeToRefs(authStore)
  const telemetry = useTelemetry()
@@ -108,14 +122,29 @@ export async function performSubscriptionCheckout(
  const data = await response.json()

  if (data.checkout_url) {
+    const pendingAttempt = createPendingSubscriptionCheckoutAttempt({
+      tier: tierKey,
+      cycle: currentBillingCycle,
+      checkout_type: 'new',
+      payment_intent_source: paymentIntentSource
+    })
+
    if (userId.value) {
-      telemetry?.trackBeginCheckout({
-        user_id: userId.value,
-        tier: tierKey,
-        cycle: currentBillingCycle,
-        checkout_type: 'new',
-        ...checkoutAttribution
-      })
+      telemetry?.trackBeginCheckout(
+        withPendingCheckoutAttemptId(
+          {
+            user_id: userId.value,
+            tier: tierKey,
+            cycle: currentBillingCycle,
+            checkout_type: 'new',
+            ...(paymentIntentSource
+              ? { payment_intent_source: paymentIntentSource }
+              : {}),
+            ...checkoutAttribution
+          },
+          pendingAttempt
+        )
+      )
    }

    if (openInNewTab) {
@@ -123,18 +152,9 @@ export async function performSubscriptionCheckout(
      if (!checkoutWindow) {
        return
      }
-
-      recordPendingSubscriptionCheckoutAttempt({
-        tier: tierKey,
-        cycle: currentBillingCycle,
-        checkout_type: 'new'
-      })
+      persistPendingSubscriptionCheckoutAttempt(pendingAttempt)
    } else {
-      recordPendingSubscriptionCheckoutAttempt({
-        tier: tierKey,
-        cycle: currentBillingCycle,
-        checkout_type: 'new'
-      })
+      persistPendingSubscriptionCheckoutAttempt(pendingAttempt)
      globalThis.location.href = data.checkout_url
    }
  }
--- a/src/platform/cloud/subscription/utils/teamSubscriptionCheckoutUtil.test.ts
+++ b/src/platform/cloud/subscription/utils/teamSubscriptionCheckoutUtil.test.ts
@@ -1,9 +1,13 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, reactive } from 'vue'

-const { mockIsCloud, mockSubscribe } = vi.hoisted(() => ({
-  mockIsCloud: { value: true },
-  mockSubscribe: vi.fn()
-}))
+const { mockIsCloud, mockSubscribe, mockTrackBeginCheckout, mockUserId } =
+  vi.hoisted(() => ({
+    mockIsCloud: { value: true },
+    mockSubscribe: vi.fn(),
+    mockTrackBeginCheckout: vi.fn(),
+    mockUserId: { value: 'user-1' as string | null }
+  }))

 vi.mock('@/platform/distribution/types', () => ({
  get isCloud() {
@@ -16,6 +20,12 @@ vi.mock('@/config/comfyApi', () => ({
 vi.mock('@/platform/workspace/api/workspaceApi', () => ({
  workspaceApi: { subscribe: mockSubscribe }
 }))
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackBeginCheckout: mockTrackBeginCheckout })
+}))
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: () => reactive({ userId: computed(() => mockUserId.value) })
+}))

 import { performTeamSubscriptionCheckout } from './teamSubscriptionCheckoutUtil'

@@ -43,7 +53,9 @@ describe('performTeamSubscriptionCheckout', () => {
      billing_op_id: 'op_1'
    })

-    await performTeamSubscriptionCheckout('team_700', 'yearly')
+    await performTeamSubscriptionCheckout('team_700', 'yearly', {
+      paymentIntentSource: 'deep_link'
+    })

    expect(mockSubscribe).toHaveBeenCalledWith('team_per_credit_annual', {
      returnUrl: 'https://app.test/payment/success',
@@ -51,6 +63,14 @@ describe('performTeamSubscriptionCheckout', () => {
      teamCreditStopId: 'team_700'
    })
    expect(assignedHref).toBe('https://stripe.test/pay')
+    expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
+      user_id: 'user-1',
+      tier: 'team',
+      cycle: 'yearly',
+      checkout_type: 'new',
+      billing_op_id: 'op_1',
+      payment_intent_source: 'deep_link'
+    })
  })

  it('uses the monthly slug and lands in the app when no Stripe step is needed', async () => {
@@ -82,6 +102,16 @@ describe('performTeamSubscriptionCheckout', () => {
    expect(assignedHref).toBeUndefined()
  })

+  it('does not track begin_checkout when subscribe fails', async () => {
+    mockSubscribe.mockRejectedValueOnce(new Error('subscribe failed'))
+
+    await expect(
+      performTeamSubscriptionCheckout('team_700', 'yearly')
+    ).rejects.toThrow('subscribe failed')
+
+    expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
+  })
+
  it('does nothing off cloud', async () => {
    mockIsCloud.value = false

--- a/src/platform/cloud/subscription/utils/teamSubscriptionCheckoutUtil.ts
+++ b/src/platform/cloud/subscription/utils/teamSubscriptionCheckoutUtil.ts
@@ -1,10 +1,16 @@
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import { getTeamPlanSlug } from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
 import { isCloud } from '@/platform/distribution/types'
+import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { trackWorkspaceCheckoutStarted } from '@/platform/workspace/utils/workspaceCheckoutTelemetry'

 import type { BillingCycle } from './subscriptionTierRank'

+interface PerformTeamSubscriptionCheckoutOptions {
+  paymentIntentSource?: PaymentIntentSource
+}
+
 /**
 * Direct team-plan checkout for the marketing `/cloud/subscribe?tier=team` deep
 * link: subscribes to the per-credit Team plan at the chosen slider stop and
@@ -22,7 +28,8 @@ import type { BillingCycle } from './subscriptionTierRank'
 */
 export async function performTeamSubscriptionCheckout(
  teamCreditStopId: string,
-  billingCycle: BillingCycle
+  billingCycle: BillingCycle,
+  options: PerformTeamSubscriptionCheckoutOptions = {}
 ): Promise<void> {
  if (!isCloud) return

@@ -33,6 +40,14 @@ export async function performTeamSubscriptionCheckout(
    teamCreditStopId
  })

+  trackWorkspaceCheckoutStarted({
+    tier: 'team',
+    cycle: billingCycle,
+    checkoutType: 'new',
+    billingOpId: response.billing_op_id,
+    paymentIntentSource: options.paymentIntentSource
+  })
+
  if (response.status === 'needs_payment_method') {
    // A needs_payment_method response without a URL is unusable: surface it to
    // the caller's error handling rather than silently dropping the user home
--- a/src/platform/support/config.test.ts
+++ b/src/platform/support/config.test.ts
@@ -50,3 +50,184 @@ describe('buildFeedbackTypeformUrl', () => {
    expect(url.hash).toBe('#distribution=ccloud&source=topbar')
  })
 })
+
+describe('buildSupportUrl', () => {
+  const ORIGINAL_UA = navigator.userAgent
+
+  beforeEach(() => {
+    distribution.isCloud = false
+    distribution.isNightly = false
+    Object.defineProperty(navigator, 'userAgent', {
+      value: ORIGINAL_UA,
+      configurable: true
+    })
+  })
+
+  function setUserAgent(value: string) {
+    Object.defineProperty(navigator, 'userAgent', {
+      value,
+      configurable: true
+    })
+  }
+
+  async function importModule() {
+    vi.resetModules()
+    return import('./config')
+  }
+
+  it('defaults to the question form when no form is provided', async () => {
+    const { buildSupportUrl } = await importModule()
+    const url = new URL(buildSupportUrl())
+    expect(url.hostname).toBe('comfy-org.portal.usepylon.com')
+    expect(url.pathname).toBe('/forms/question')
+  })
+
+  it('routes to the requested form slug', async () => {
+    const { buildSupportUrl, SupportForm } = await importModule()
+    const url = new URL(buildSupportUrl(SupportForm.Billing))
+    expect(url.pathname).toBe('/forms/billing-refund-issue')
+  })
+
+  it('encodes spaces as %20 (not "+") in the query string', async () => {
+    setUserAgent(
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/131.0.0.0'
+    )
+    const { buildSupportUrl, SupportForm } = await importModule()
+    const raw = buildSupportUrl(SupportForm.Bug, {
+      userEmail: 'user@example.com',
+      os: 'macOS 14.5'
+    })
+    expect(raw).toContain('comfy_os=macOS%2014.5')
+    expect(raw).not.toContain('+')
+  })
+
+  it('omits fields with empty or null values', async () => {
+    const { buildSupportUrl, SupportForm } = await importModule()
+    const url = new URL(
+      buildSupportUrl(SupportForm.Question, {
+        userEmail: '',
+        userId: null,
+        os: undefined,
+        version: '1.45.0'
+      })
+    )
+    expect(url.searchParams.has('email')).toBe(false)
+    expect(url.searchParams.has('comfy_cloud_user_id')).toBe(false)
+    expect(url.searchParams.has('comfy_os')).toBe(false)
+    expect(url.searchParams.get('comfy_version')).toBe('1.45.0')
+  })
+
+  it('tags Cloud builds with comfy_environment=ccloud', async () => {
+    distribution.isCloud = true
+    const { buildSupportUrl } = await importModule()
+    const url = new URL(buildSupportUrl())
+    expect(url.searchParams.get('comfy_environment')).toBe('ccloud')
+  })
+
+  it('tags Nightly builds with comfy_environment=oss-nightly', async () => {
+    distribution.isNightly = true
+    const { buildSupportUrl } = await importModule()
+    const url = new URL(buildSupportUrl())
+    expect(url.searchParams.get('comfy_environment')).toBe('oss-nightly')
+  })
+
+  it('detects Chrome from the user agent', async () => {
+    setUserAgent(
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+    )
+    const { buildSupportUrl } = await importModule()
+    const url = new URL(buildSupportUrl())
+    expect(url.searchParams.get('browser')).toBe('Chrome 131')
+  })
+
+  it('detects Firefox from the user agent', async () => {
+    setUserAgent(
+      'Mozilla/5.0 (X11; Linux x86_64; rv:121.0) Gecko/20100101 Firefox/121.0'
+    )
+    const { buildSupportUrl } = await importModule()
+    const url = new URL(buildSupportUrl())
+    expect(url.searchParams.get('browser')).toBe('Firefox 121')
+  })
+
+  it('detects Edge before falling through to Chrome', async () => {
+    setUserAgent(
+      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0'
+    )
+    const { buildSupportUrl } = await importModule()
+    const url = new URL(buildSupportUrl())
+    expect(url.searchParams.get('browser')).toBe('Edge 131')
+  })
+
+  it('forwards a product area override to the prefill', async () => {
+    const { buildSupportUrl, SupportForm } = await importModule()
+    const url = new URL(
+      buildSupportUrl(SupportForm.Billing, { productArea: 'Billing' })
+    )
+    expect(url.searchParams.get('product_area')).toBe('Billing')
+  })
+})
+
+describe('normalizeOsName', () => {
+  const ORIGINAL_UA = navigator.userAgent
+
+  beforeEach(() => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: ORIGINAL_UA,
+      configurable: true
+    })
+  })
+
+  function setUserAgent(value: string) {
+    Object.defineProperty(navigator, 'userAgent', {
+      value,
+      configurable: true
+    })
+  }
+
+  async function importModule() {
+    vi.resetModules()
+    return import('./config')
+  }
+
+  it('promotes "darwin" to the UA-detected macOS version', async () => {
+    setUserAgent(
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 14_5_0) AppleWebKit/537.36 Chrome/131.0.0.0 Safari/537.36'
+    )
+    const { normalizeOsName } = await importModule()
+    expect(normalizeOsName('darwin')).toBe('macOS 14.5.0')
+  })
+
+  it('promotes "win32" to the UA-detected Windows version', async () => {
+    setUserAgent(
+      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/131.0.0.0 Safari/537.36'
+    )
+    const { normalizeOsName } = await importModule()
+    expect(normalizeOsName('win32')).toBe('Windows 10/11')
+  })
+
+  it('promotes "linux" to "Linux" when UA reports Linux', async () => {
+    setUserAgent('Mozilla/5.0 (X11; Linux x86_64) Firefox/121.0')
+    const { normalizeOsName } = await importModule()
+    expect(normalizeOsName('linux')).toBe('Linux')
+  })
+
+  it('keeps a descriptive value untouched', async () => {
+    const { normalizeOsName } = await importModule()
+    expect(normalizeOsName('Ubuntu 22.04')).toBe('Ubuntu 22.04')
+  })
+
+  it('falls back to UA detection when the input is empty', async () => {
+    setUserAgent(
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/131.0.0.0 Safari/537.36'
+    )
+    const { normalizeOsName } = await importModule()
+    expect(normalizeOsName(null)).toBe('macOS 10.15.7')
+    expect(normalizeOsName('')).toBe('macOS 10.15.7')
+  })
+
+  it('falls back to the kernel name when UA detection cannot resolve', async () => {
+    setUserAgent('SomeWeirdBot/1.0')
+    const { normalizeOsName } = await importModule()
+    expect(normalizeOsName('darwin')).toBe('darwin')
+  })
+})
--- a/src/platform/support/config.ts
+++ b/src/platform/support/config.ts
@@ -1,70 +1,189 @@
 import { isCloud, isNightly } from '@/platform/distribution/types'

 /**
- * Zendesk ticket form field IDs.
+ * Slug of a Pylon form under https://comfy-org.portal.usepylon.com/forms/.
+ * The form slug determines which ticket form opens and which fields are shown.
 */
-const ZENDESK_FIELDS = {
-  /** Distribution tag (cloud vs OSS) */
-  DISTRIBUTION: 'tf_42243568391700',
-  /** User email (anonymous requester) */
-  ANONYMOUS_EMAIL: 'tf_anonymous_requester_email',
-  /** User email (authenticated) */
-  EMAIL: 'tf_40029135130388',
-  /** User ID */
-  USER_ID: 'tf_42515251051412'
+export const SupportForm = {
+  Billing: 'billing-refund-issue',
+  Bug: 'report-a-bug',
+  FeatureRequest: 'feature-request',
+  PartnerNode: 'partner-node-issue',
+  Question: 'question'
 } as const
+export type SupportForm = (typeof SupportForm)[keyof typeof SupportForm]

 /**
- * Gets the distribution identifier for tracking.
- * Helps distinguish feedback from different build types.
+ * Pylon custom-field slugs (URL keys) configured for the comfy-org workspace.
+ * Pylon prefill uses the slug — not the field UUID — as the URL key.
 */
-function getDistribution(): 'ccloud' | 'oss-nightly' | 'oss' {
+const PYLON_FIELDS = {
+  EMAIL: 'email',
+  BROWSER: 'browser',
+  COMFY_CLOUD_USER_ID: 'comfy_cloud_user_id',
+  COMFY_ENVIRONMENT: 'comfy_environment',
+  COMFY_OS: 'comfy_os',
+  COMFY_VERSION: 'comfy_version',
+  PRODUCT_AREA: 'product_area'
+} as const
+
+const PYLON_FORMS_BASE_URL = 'https://comfy-org.portal.usepylon.com/forms/'
+const FEEDBACK_TYPEFORM_BASE_URL = 'https://form.typeform.com/to/q7azbWPi'
+
+/**
+ * Build environment tag for distinguishing tickets by build type.
+ */
+function getEnvironment(): 'ccloud' | 'oss-nightly' | 'oss' {
  if (isCloud) return 'ccloud'
  if (isNightly) return 'oss-nightly'
  return 'oss'
 }

-const SUPPORT_BASE_URL = 'https://support.comfy.org/hc/en-us/requests/new'
-const FEEDBACK_TYPEFORM_BASE_URL = 'https://form.typeform.com/to/q7azbWPi'
-
 /**
- * Builds the feedback Typeform URL tagged with the current build distribution
+ * Builds the feedback Typeform URL tagged with the current build environment
 * and the UI source that opened it. Tags are passed via the URL fragment
 * (Typeform's hidden-field convention) so survey responses can be segmented
- * by distribution (cloud / oss-nightly / oss) and entry point.
+ * by environment (cloud / oss-nightly / oss) and entry point.
 */
 export function buildFeedbackTypeformUrl(
  source: 'topbar' | 'action-bar' | 'help-center'
 ): string {
  const params = new URLSearchParams({
-    distribution: getDistribution(),
+    distribution: getEnvironment(),
    source
  })
  return `${FEEDBACK_TYPEFORM_BASE_URL}#${params.toString()}`
 }

-/**
- * Builds the support URL with optional user information for pre-filling.
- * Users without login information will still get a valid support URL without pre-fill.
- *
- * @param params - User information to pre-fill in the support form
- * @returns Complete Zendesk support URL with query parameters
- */
-export function buildSupportUrl(params?: {
+export interface SupportPrefill {
+  /** Authenticated user's email (for Cloud / API-key users). */
  userEmail?: string | null
+  /** Cloud user id, when available. */
  userId?: string | null
-}): string {
-  const searchParams = new URLSearchParams({
-    [ZENDESK_FIELDS.DISTRIBUTION]: getDistribution()
-  })
-
-  if (params?.userEmail) {
-    searchParams.append(ZENDESK_FIELDS.ANONYMOUS_EMAIL, params.userEmail)
-    searchParams.append(ZENDESK_FIELDS.EMAIL, params.userEmail)
-  }
-  if (params?.userId) {
-    searchParams.append(ZENDESK_FIELDS.USER_ID, params.userId)
-  }
-
-  return `${SUPPORT_BASE_URL}?${searchParams.toString()}`
+  /** Operating system string (e.g. "macOS 14.5"). */
+  os?: string | null
+  /** ComfyUI frontend version. */
+  version?: string | null
+  /** Product area this ticket belongs to (e.g. "Billing", "Cloud"). */
+  productArea?: string | null
+}
+
+/**
+ * Encode a single `slug=value` pair. Skips empty values so the resulting URL
+ * stays clean. We use `encodeURIComponent` (not `URLSearchParams`) so spaces
+ * become `%20` rather than `+`, matching the Pylon prefill spec.
+ */
+function encodePair(
+  slug: string,
+  value: string | null | undefined
+): string | null {
+  if (value === null || value === undefined || value === '') return null
+  return `${encodeURIComponent(slug)}=${encodeURIComponent(value)}`
+}
+
+function detectBrowser(): string | null {
+  if (typeof navigator === 'undefined') return null
+  const ua = navigator.userAgent
+  // Order matters: Edge / Opera identify themselves as Chrome too.
+  const matchers: { name: string; pattern: RegExp }[] = [
+    { name: 'Edge', pattern: /Edg\/([\d.]+)/ },
+    { name: 'Opera', pattern: /OPR\/([\d.]+)/ },
+    { name: 'Chrome', pattern: /Chrome\/([\d.]+)/ },
+    { name: 'Firefox', pattern: /Firefox\/([\d.]+)/ },
+    { name: 'Safari', pattern: /Version\/([\d.]+).*Safari/ }
+  ]
+  for (const { name, pattern } of matchers) {
+    const match = ua.match(pattern)
+    if (match) return `${name} ${match[1].split('.')[0]}`
+  }
+  return null
+}
+
+/**
+ * Derive a user-friendly OS string from the browser. Preferred over backend
+ * platform names like `darwin` / `win32` because those are kernel identifiers,
+ * not what users (or support agents) recognize. Modern browsers freeze the
+ * macOS / Windows minor version in the UA string, so we only report the
+ * family — that's still more useful than `darwin`.
+ */
+export function detectOS(): string | null {
+  if (typeof navigator === 'undefined') return null
+  const ua = navigator.userAgent
+
+  if (/iPad|iPhone|iPod/.test(ua)) {
+    const iOS = ua.match(/OS (\d+)[._](\d+)(?:[._](\d+))?/)
+    return iOS ? `iOS ${iOS[1]}.${iOS[2]}${iOS[3] ? `.${iOS[3]}` : ''}` : 'iOS'
+  }
+  if (/Android/.test(ua)) {
+    const android = ua.match(/Android (\d+(?:\.\d+)*)/)
+    return android ? `Android ${android[1]}` : 'Android'
+  }
+  if (/Mac OS X|Macintosh/.test(ua)) {
+    const mac = ua.match(/Mac OS X (\d+)[._](\d+)(?:[._](\d+))?/)
+    if (!mac) return 'macOS'
+    return `macOS ${mac[1]}.${mac[2]}${mac[3] ? `.${mac[3]}` : ''}`
+  }
+  if (/Windows NT/.test(ua)) {
+    const win = ua.match(/Windows NT (\d+\.\d+)/)
+    const winMap: Record<string, string> = {
+      '10.0': 'Windows 10/11',
+      '6.3': 'Windows 8.1',
+      '6.2': 'Windows 8',
+      '6.1': 'Windows 7'
+    }
+    return win ? (winMap[win[1]] ?? `Windows NT ${win[1]}`) : 'Windows'
+  }
+  if (/CrOS/.test(ua)) return 'ChromeOS'
+  if (/Linux/.test(ua)) return 'Linux'
+
+  return null
+}
+
+/**
+ * Backend (`systemStats.system.os`) reports the Python platform identifier
+ * for OSS / Desktop, which is the kernel name (`darwin`, `linux`, `win32`).
+ * Promote those to the UA-detected version so the Pylon ticket shows
+ * "macOS 14.5" instead of "darwin".
+ */
+export function normalizeOsName(
+  rawOs: string | null | undefined
+): string | null {
+  const uaOs = detectOS()
+  if (!rawOs) return uaOs
+  const lower = rawOs.toLowerCase().trim()
+  if (lower === 'darwin' || lower === 'linux' || lower === 'win32') {
+    return uaOs ?? rawOs
+  }
+  return rawOs
+}
+
+/**
+ * Builds the Pylon prefill URL for a given form, omitting empty fields.
+ * Users without prefill data still get a valid URL that opens the same form —
+ * Pylon will collect those values from the user manually.
+ *
+ * @param form - Which Pylon form to open
+ * @param prefill - Field values to pre-populate
+ * @returns Complete Pylon form URL
+ */
+export function buildSupportUrl(
+  form: SupportForm = SupportForm.Question,
+  prefill: SupportPrefill = {}
+): string {
+  const pairs: string[] = []
+  const push = (slug: string, value: string | null | undefined) => {
+    const pair = encodePair(slug, value)
+    if (pair) pairs.push(pair)
+  }
+
+  push(PYLON_FIELDS.EMAIL, prefill.userEmail)
+  push(PYLON_FIELDS.COMFY_CLOUD_USER_ID, prefill.userId)
+  push(PYLON_FIELDS.COMFY_ENVIRONMENT, getEnvironment())
+  push(PYLON_FIELDS.COMFY_VERSION, prefill.version)
+  push(PYLON_FIELDS.COMFY_OS, prefill.os)
+  push(PYLON_FIELDS.BROWSER, detectBrowser())
+  push(PYLON_FIELDS.PRODUCT_AREA, prefill.productArea)
+
+  const query = pairs.join('&')
+  return `${PYLON_FORMS_BASE_URL}${form}${query ? `?${query}` : ''}`
 }
--- a/src/platform/support/useSupportContext.ts
+++ b/src/platform/support/useSupportContext.ts
@@ -0,0 +1,52 @@
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import {
+  SupportForm,
+  buildSupportUrl,
+  normalizeOsName
+} from '@/platform/support/config'
+import type { SupportPrefill } from '@/platform/support/config'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+
+/**
+ * Resolves Pylon prefill data from the current user session + system stats and
+ * exposes a single `openSupport(form, extras?)` action that opens the best-fit
+ * Pylon form in a new tab.
+ *
+ * Resolution is deferred until `openSupport`/`buildPrefill` is actually called
+ * — call sites that never invoke them don't pay the cost of (or fail because
+ * of) booting Firebase auth at component setup time.
+ */
+export function useSupportContext() {
+  const buildPrefill = (extra?: Partial<SupportPrefill>): SupportPrefill => {
+    const { userEmail, resolvedUserInfo } = useCurrentUser()
+    const systemStatsStore = useSystemStatsStore()
+    return {
+      userEmail: userEmail.value ?? null,
+      userId: resolvedUserInfo.value?.id ?? null,
+      os: normalizeOsName(systemStatsStore.systemStats?.system?.os),
+      version: __COMFYUI_FRONTEND_VERSION__,
+      ...extra
+    }
+  }
+
+  /**
+   * Open a Pylon support form pre-filled with the user's context. Any field
+   * we can't resolve is omitted from the URL — the form still opens.
+   *
+   * @param form - Which Pylon form best matches the entry-point. Defaults to
+   *   the generic "Question" form.
+   * @param extra - Per-callsite overrides (e.g. `productArea: 'Billing'`).
+   */
+  const openSupport = (
+    form: SupportForm = SupportForm.Question,
+    extra?: Partial<SupportPrefill>
+  ): void => {
+    const url = buildSupportUrl(form, buildPrefill(extra))
+    window.open(url, '_blank', 'noopener,noreferrer')
+  }
+
+  return {
+    buildPrefill,
+    openSupport
+  }
+}
--- a/src/platform/telemetry/TelemetryRegistry.test.ts
+++ b/src/platform/telemetry/TelemetryRegistry.test.ts
@@ -30,6 +30,39 @@ describe('TelemetryRegistry', () => {
    expect(b.trackSearchQuery).toHaveBeenCalledExactlyOnceWith(payload)
  })

+  it('dispatches trackBeginCheckout with intent metadata to every provider', () => {
+    const a: TelemetryProvider = { trackBeginCheckout: vi.fn() }
+    const b: TelemetryProvider = {}
+    const registry = new TelemetryRegistry()
+    registry.registerProvider(a)
+    registry.registerProvider(b)
+
+    const metadata = {
+      user_id: 'user-1',
+      tier: 'pro' as const,
+      cycle: 'monthly' as const,
+      checkout_type: 'new' as const,
+      payment_intent_source: 'subscribe_to_run' as const
+    }
+    registry.trackBeginCheckout(metadata)
+
+    expect(a.trackBeginCheckout).toHaveBeenCalledExactlyOnceWith(metadata)
+  })
+
+  it('dispatches trackAddApiCreditButtonClicked with its source', () => {
+    const provider: TelemetryProvider = {
+      trackAddApiCreditButtonClicked: vi.fn()
+    }
+    const registry = new TelemetryRegistry()
+    registry.registerProvider(provider)
+
+    registry.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
+
+    expect(
+      provider.trackAddApiCreditButtonClicked
+    ).toHaveBeenCalledExactlyOnceWith({ source: 'credits_panel' })
+  })
+
  it('skips providers that do not implement trackSearchQuery', () => {
    const empty: TelemetryProvider = {}
    const registry = new TelemetryRegistry()
--- a/src/platform/telemetry/TelemetryRegistry.ts
+++ b/src/platform/telemetry/TelemetryRegistry.ts
@@ -1,6 +1,7 @@
 import type { AuditLog } from '@/services/customerEventsService'

 import type {
+  AddCreditsClickMetadata,
  AuthMetadata,
  BeginCheckoutMetadata,
  DefaultViewSetMetadata,
@@ -99,8 +100,10 @@ export class TelemetryRegistry implements TelemetryDispatcher {
    this.dispatch((provider) => provider.trackMonthlySubscriptionCancelled?.())
  }

-  trackAddApiCreditButtonClicked(): void {
-    this.dispatch((provider) => provider.trackAddApiCreditButtonClicked?.())
+  trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
+    this.dispatch((provider) =>
+      provider.trackAddApiCreditButtonClicked?.(metadata)
+    )
  }

  trackApiCreditTopupButtonPurchaseClicked(amount: number): void {
--- a/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.test.ts
+++ b/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.test.ts
@@ -313,6 +313,42 @@ describe('PostHogTelemetryProvider', () => {
      )
    })

+    it('captures begin_checkout with intent metadata', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackBeginCheckout({
+        user_id: 'user-1',
+        tier: 'pro',
+        cycle: 'monthly',
+        checkout_type: 'new',
+        payment_intent_source: 'subscribe_to_run'
+      })
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.BEGIN_CHECKOUT,
+        {
+          user_id: 'user-1',
+          tier: 'pro',
+          cycle: 'monthly',
+          checkout_type: 'new',
+          payment_intent_source: 'subscribe_to_run'
+        }
+      )
+    })
+
+    it('captures add-credit clicks with their source', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED,
+        { source: 'credits_panel' }
+      )
+    })
+
    it('captures share attribution events', async () => {
      const provider = createProvider()
      await vi.dynamicImportSettled()
--- a/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts
@@ -10,7 +10,9 @@ import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import type { RemoteConfig } from '@/platform/remoteConfig/types'

 import type {
+  AddCreditsClickMetadata,
  AuthMetadata,
+  BeginCheckoutMetadata,
  DefaultViewSetMetadata,
  EnterLinearMetadata,
  ShareFlowMetadata,
@@ -350,8 +352,12 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
    this.trackEvent(eventName, metadata)
  }

-  trackAddApiCreditButtonClicked(): void {
-    this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
+  trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
+    this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED, metadata)
+  }
+
+  trackBeginCheckout(metadata: BeginCheckoutMetadata): void {
+    this.trackEvent(TelemetryEvents.BEGIN_CHECKOUT, metadata)
  }

  trackMonthlySubscriptionSucceeded(
--- a/src/platform/telemetry/providers/host/HostTelemetrySink.test.ts
+++ b/src/platform/telemetry/providers/host/HostTelemetrySink.test.ts
@@ -115,6 +115,17 @@ describe('HostTelemetrySink', () => {
    )
  })

+  it('forwards add-credit clicks with their source', () => {
+    new HostTelemetrySink().trackAddApiCreditButtonClicked({
+      source: 'avatar_menu'
+    })
+
+    expect(state.capture).toHaveBeenCalledExactlyOnceWith(
+      TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED,
+      { source: 'avatar_menu' }
+    )
+  })
+
  it('does nothing when the host bridge is absent', () => {
    delete window.__comfyDesktop2

--- a/src/platform/telemetry/providers/host/HostTelemetrySink.ts
+++ b/src/platform/telemetry/providers/host/HostTelemetrySink.ts
@@ -10,6 +10,7 @@ import {
 import type { AuditLog } from '@/services/customerEventsService'

 import type {
+  AddCreditsClickMetadata,
  AuthMetadata,
  BeginCheckoutMetadata,
  DefaultViewSetMetadata,
@@ -126,8 +127,8 @@ export class HostTelemetrySink implements TelemetryProvider {
    this.capture(TelemetryEvents.MONTHLY_SUBSCRIPTION_CANCELLED)
  }

-  trackAddApiCreditButtonClicked(): void {
-    this.capture(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
+  trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
+    this.capture(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED, metadata)
  }

  trackApiCreditTopupButtonPurchaseClicked(amount: number): void {
--- a/src/platform/telemetry/types.ts
+++ b/src/platform/telemetry/types.ts
@@ -12,12 +12,29 @@
 * 3. Check dist/assets/*.js files contain no tracking code
 */

-import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { AuditLog } from '@/services/customerEventsService'
 import type { AppMode } from '@/utils/appMode'

+export type PaymentIntentSource =
+  | 'subscription_required'
+  | 'out_of_credits'
+  | 'top_up_blocked'
+  | 'deep_link'
+  | 'subscribe_to_run'
+  | 'subscribe_now_button'
+  | 'upgrade_to_add_credits'
+  | 'settings_billing_panel'
+  | 'avatar_menu_plans'
+  | 'team_members_panel'
+  | 'invite_member_upsell'
+  | 'upload_model_upgrade'
+  | 'team_upgrade_resume'
+
+export type SubscriptionCheckoutType = 'new' | 'change'
+export type SubscriptionCheckoutTier = TierKey | 'team'
+
 /**
 * Authentication metadata for sign-up tracking
 */
@@ -426,16 +443,23 @@ export interface CheckoutAttributionMetadata {

 export interface SubscriptionMetadata {
  current_tier?: string
-  reason?: SubscriptionDialogReason
+  reason?: PaymentIntentSource
+}
+
+export interface AddCreditsClickMetadata {
+  source: 'credits_panel' | 'avatar_menu' | 'settings_billing_panel'
 }

 export interface BeginCheckoutMetadata
  extends Record<string, unknown>, CheckoutAttributionMetadata {
  user_id: string
-  tier: TierKey
+  tier: SubscriptionCheckoutTier
  cycle: BillingCycle
-  checkout_type: 'new' | 'change'
+  checkout_type: SubscriptionCheckoutType
+  checkout_attempt_id?: string
+  billing_op_id?: string
  previous_tier?: TierKey
+  payment_intent_source?: PaymentIntentSource
 }

 interface EcommerceItemMetadata {
@@ -457,8 +481,9 @@ export interface SubscriptionSuccessMetadata extends Record<string, unknown> {
  checkout_attempt_id: string
  tier: TierKey
  cycle: BillingCycle
-  checkout_type: 'new' | 'change'
+  checkout_type: SubscriptionCheckoutType
  previous_tier?: TierKey
+  payment_intent_source?: PaymentIntentSource
  value: number
  currency: string
  ecommerce: EcommerceMetadata
@@ -489,7 +514,7 @@ export interface TelemetryProvider {
    metadata?: SubscriptionSuccessMetadata
  ): void
  trackMonthlySubscriptionCancelled?(): void
-  trackAddApiCreditButtonClicked?(): void
+  trackAddApiCreditButtonClicked?(metadata?: AddCreditsClickMetadata): void
  trackApiCreditTopupButtonPurchaseClicked?(amount: number): void
  trackApiCreditTopupSucceeded?(): void
  trackWorkspaceInviteSent?(metadata: WorkspaceInviteMetadata): void
--- a/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
+++ b/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
@@ -321,7 +321,7 @@ const handleOpenWorkspaceSettings = () => {
 }

 const handleOpenPlansAndPricing = () => {
-  subscriptionDialog.showPricingTable()
+  subscriptionDialog.showPricingTable({ reason: 'avatar_menu_plans' })
  emit('close')
 }

@@ -336,13 +336,12 @@ const handleOpenPlanAndCreditsSettings = () => {
 }

 const handleUpgradeToAddCredits = () => {
-  subscriptionDialog.showPricingTable()
+  subscriptionDialog.showPricingTable({ reason: 'upgrade_to_add_credits' })
  emit('close')
 }

 const handleTopUp = () => {
-  // Track purchase credits entry from avatar popover
-  useTelemetry()?.trackAddApiCreditButtonClicked()
+  useTelemetry()?.trackAddApiCreditButtonClicked({ source: 'avatar_menu' })
  dialogService.showTopUpCreditsDialog()
  emit('close')
 }
--- a/src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue
@@ -391,12 +391,13 @@ const showZeroState = computed(
 )

 function handleSubscribeWorkspace() {
-  showSubscriptionDialog()
+  showSubscriptionDialog({ reason: 'settings_billing_panel' })
 }

 function handleUpgrade() {
-  if (isFreeTierPlan.value) showPricingTable()
-  else showSubscriptionDialog()
+  if (isFreeTierPlan.value)
+    showPricingTable({ reason: 'settings_billing_panel' })
+  else showSubscriptionDialog({ reason: 'settings_billing_panel' })
 }

 function handleViewMoreDetails() {
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentUnified.vue
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentUnified.vue
@@ -113,7 +113,7 @@ import { cn } from '@comfyorg/tailwind-utils'
 import { useEventListener } from '@vueuse/core'

 import Button from '@/components/ui/button/Button.vue'
-import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'

 import SubscriptionAddPaymentPreviewWorkspace from './SubscriptionAddPaymentPreviewWorkspace.vue'
@@ -123,7 +123,7 @@ import UnifiedPricingTable from './UnifiedPricingTable.vue'

 const { onClose, reason, initialPlanMode } = defineProps<{
  onClose: () => void
-  reason?: SubscriptionDialogReason
+  reason?: PaymentIntentSource
  initialPlanMode?: 'personal' | 'team'
 }>()

@@ -152,7 +152,7 @@ const {
  handleConfirmTransition,
  handleTeamSubscribe,
  handleResubscribe
-} = useSubscriptionCheckout(emit)
+} = useSubscriptionCheckout(emit, reason)

 // Backspace mirrors the back arrow on the confirm step, but never while an
 // editable element is focused (let it delete text there).
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts
@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 import { createI18n } from 'vue-i18n'

-import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { PaymentIntentSource } from '@/platform/telemetry/types'

 import SubscriptionRequiredDialogContentWorkspace from './SubscriptionRequiredDialogContentWorkspace.vue'

@@ -17,25 +17,10 @@ const mockHandleResubscribe = vi.fn()
 const mockHandleSuccessClose = vi.fn()
 const mockCheckoutStep = ref<'pricing' | 'preview' | 'success'>('pricing')
 const mockPreviewData = ref<{ transition_type: string } | null>(null)
+const mockUseSubscriptionCheckout = vi.hoisted(() => vi.fn())

 vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
-  useSubscriptionCheckout: () => ({
-    checkoutStep: mockCheckoutStep,
-    isLoadingPreview: ref(false),
-    loadingTier: ref(null),
-    isSubscribing: ref(false),
-    isResubscribing: ref(false),
-    previewData: mockPreviewData,
-    selectedTierKey: ref('standard'),
-    selectedBillingCycle: ref('yearly'),
-    isPolling: ref(false),
-    handleSubscribeClick: mockHandleSubscribeClick,
-    handleBackToPricing: mockHandleBackToPricing,
-    handleAddCreditCard: mockHandleAddCreditCard,
-    handleConfirmTransition: mockHandleConfirmTransition,
-    handleResubscribe: mockHandleResubscribe,
-    handleSuccessClose: mockHandleSuccessClose
-  })
+  useSubscriptionCheckout: mockUseSubscriptionCheckout
 }))

 const i18n = createI18n({
@@ -91,7 +76,7 @@ const SuccessStub = {
 function renderComponent(
  props: {
    onClose?: () => void
-    reason?: SubscriptionDialogReason
+    reason?: PaymentIntentSource
    isPersonal?: boolean
  } = {}
 ) {
@@ -121,6 +106,23 @@ function renderComponent(
 describe('SubscriptionRequiredDialogContentWorkspace', () => {
  beforeEach(() => {
    vi.clearAllMocks()
+    mockUseSubscriptionCheckout.mockReturnValue({
+      checkoutStep: mockCheckoutStep,
+      isLoadingPreview: ref(false),
+      loadingTier: ref(null),
+      isSubscribing: ref(false),
+      isResubscribing: ref(false),
+      previewData: mockPreviewData,
+      selectedTierKey: ref('standard'),
+      selectedBillingCycle: ref('yearly'),
+      isPolling: ref(false),
+      handleSubscribeClick: mockHandleSubscribeClick,
+      handleBackToPricing: mockHandleBackToPricing,
+      handleAddCreditCard: mockHandleAddCreditCard,
+      handleConfirmTransition: mockHandleConfirmTransition,
+      handleResubscribe: mockHandleResubscribe,
+      handleSuccessClose: mockHandleSuccessClose
+    })
    mockCheckoutStep.value = 'pricing'
    mockPreviewData.value = null
  })
@@ -132,6 +134,15 @@ describe('SubscriptionRequiredDialogContentWorkspace', () => {
    expect(screen.queryByTestId('transition-preview')).not.toBeInTheDocument()
  })

+  it('passes the reason into subscription checkout', () => {
+    renderComponent({ reason: 'out_of_credits' })
+
+    expect(mockUseSubscriptionCheckout).toHaveBeenCalledWith(
+      expect.any(Function),
+      'out_of_credits'
+    )
+  })
+
  it('shows the team workspace header by default', () => {
    renderComponent()
    expect(screen.getByText('Team Workspace')).toBeInTheDocument()
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
@@ -116,7 +116,7 @@
 import { cn } from '@comfyorg/tailwind-utils'

 import Button from '@/components/ui/button/Button.vue'
-import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'

 import PricingTableWorkspace from './PricingTableWorkspace.vue'
@@ -130,7 +130,7 @@ const {
  isPersonal = false
 } = defineProps<{
  onClose: () => void
-  reason?: SubscriptionDialogReason
+  reason?: PaymentIntentSource
  isPersonal?: boolean
 }>()

@@ -154,7 +154,7 @@ const {
  handleConfirmTransition,
  handleResubscribe,
  handleSuccessClose
-} = useSubscriptionCheckout(emit)
+} = useSubscriptionCheckout(emit, reason)
 </script>

 <style scoped>
--- a/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
@@ -61,6 +61,9 @@ function onDismiss() {

 function onUpgrade() {
  dialogStore.closeDialog({ key: 'invite-member-upsell' })
-  subscriptionDialog.show({ planMode: 'team' })
+  subscriptionDialog.show({
+    planMode: 'team',
+    reason: 'invite_member_upsell'
+  })
 }
 </script>
--- a/src/platform/workspace/composables/useMembersPanel.ts
+++ b/src/platform/workspace/composables/useMembersPanel.ts
@@ -277,7 +277,7 @@ export function useMembersPanel() {
  }

  function showTeamPlans() {
-    subscriptionDialog.show({ planMode: 'team' })
+    subscriptionDialog.show({ planMode: 'team', reason: 'team_members_panel' })
  }

  return {
--- a/src/platform/workspace/composables/useSubscriptionCheckout.test.ts
+++ b/src/platform/workspace/composables/useSubscriptionCheckout.test.ts
@@ -1,8 +1,9 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed } from 'vue'
+import { computed, reactive } from 'vue'

+import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import type { Plan } from '@/platform/workspace/api/workspaceApi'

 import { findPlanSlug } from './useSubscriptionCheckout'
@@ -75,7 +76,9 @@ const {
  mockPlans,
  mockResubscribe,
  mockToastAdd,
-  mockStartOperation
+  mockStartOperation,
+  mockTrackBeginCheckout,
+  mockUserId
 } = vi.hoisted(() => ({
  mockSubscribe: vi.fn(),
  mockPreviewSubscribe: vi.fn(),
@@ -84,7 +87,9 @@ const {
  mockPlans: { value: [] as Plan[] },
  mockResubscribe: vi.fn(),
  mockToastAdd: vi.fn(),
-  mockStartOperation: vi.fn()
+  mockStartOperation: vi.fn(),
+  mockTrackBeginCheckout: vi.fn(),
+  mockUserId: { value: 'user-1' as string | null }
 }))

 vi.mock('@/composables/billing/useBillingContext', () => ({
@@ -119,7 +124,14 @@ vi.mock('primevue/usetoast', () => ({
 }))

 vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({ trackMonthlySubscriptionSucceeded: vi.fn() })
+  useTelemetry: () => ({
+    trackMonthlySubscriptionSucceeded: vi.fn(),
+    trackBeginCheckout: mockTrackBeginCheckout
+  })
+}))
+
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: () => reactive({ userId: computed(() => mockUserId.value) })
 }))

 vi.mock('vue-i18n', async (importOriginal) => {
@@ -135,10 +147,10 @@ vi.mock('vue-i18n', async (importOriginal) => {
 describe('useSubscriptionCheckout', () => {
  let emit: ReturnType<typeof vi.fn>

-  async function setup() {
+  async function setup(paymentIntentSource?: PaymentIntentSource) {
    const { useSubscriptionCheckout } =
      await import('./useSubscriptionCheckout')
-    return useSubscriptionCheckout(emit as never)
+    return useSubscriptionCheckout(emit as never, paymentIntentSource)
  }

  beforeEach(() => {
@@ -146,6 +158,7 @@ describe('useSubscriptionCheckout', () => {
    vi.clearAllMocks()
    mockPlans.value = allPlans()
    mockStartOperation.mockResolvedValue({ status: 'succeeded' })
+    mockUserId.value = 'user-1'
    emit = vi.fn()
  })

@@ -459,6 +472,13 @@ describe('useSubscriptionCheckout', () => {
        cancelUrl: 'https://platform.comfy.org/payment/failed'
      })
      expect(checkout.checkoutStep.value).toBe('success')
+      expect(mockTrackBeginCheckout).toHaveBeenCalledWith(
+        expect.objectContaining({
+          tier: 'team',
+          checkout_type: 'new',
+          billing_op_id: 'op-team-1'
+        })
+      )
    })

    it('uses the annual plan slug for the yearly cycle', async () => {
@@ -553,6 +573,39 @@ describe('useSubscriptionCheckout', () => {
          detail: 'Team payment failed'
        })
      )
+      expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
+    })
+
+    it('keeps team checkout_type as change when the preview request fails', async () => {
+      const checkout = await setup()
+      mockPreviewSubscribe.mockRejectedValueOnce(new Error('not supported'))
+      await checkout.handleSubscribeTeamClick({
+        stop: {
+          id: 'team_1400',
+          usd: 1400,
+          credits: 295_400,
+          discountedUsd: 1295
+        },
+        billingCycle: 'monthly',
+        isChange: true
+      })
+      mockSubscribe.mockResolvedValueOnce({
+        status: 'subscribed',
+        billing_op_id: 'op-team-change'
+      })
+      mockFetchStatus.mockResolvedValueOnce(undefined)
+      mockFetchBalance.mockResolvedValueOnce(undefined)
+
+      await checkout.handleTeamSubscribe()
+
+      expect(mockTrackBeginCheckout).toHaveBeenCalledWith(
+        expect.objectContaining({
+          tier: 'team',
+          cycle: 'monthly',
+          checkout_type: 'change',
+          billing_op_id: 'op-team-change'
+        })
+      )
    })
  })

@@ -603,6 +656,47 @@ describe('useSubscriptionCheckout', () => {
      expect(checkout.checkoutStep.value).toBe('success')
    })

+    it('skips begin_checkout when no user id is available', async () => {
+      mockUserId.value = null
+      const checkout = await setup('subscribe_to_run')
+      checkout.selectedTierKey.value = 'standard'
+      checkout.selectedBillingCycle.value = 'yearly'
+      mockSubscribe.mockResolvedValueOnce({
+        status: 'subscribed',
+        billing_op_id: 'op-1'
+      })
+      mockFetchStatus.mockResolvedValueOnce(undefined)
+      mockFetchBalance.mockResolvedValueOnce(undefined)
+
+      await checkout.handleAddCreditCard()
+
+      expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
+      mockUserId.value = 'user-1'
+    })
+
+    it('fires begin_checkout carrying the payment intent source', async () => {
+      const checkout = await setup('subscribe_to_run')
+      checkout.selectedTierKey.value = 'standard'
+      checkout.selectedBillingCycle.value = 'yearly'
+      mockSubscribe.mockResolvedValueOnce({
+        status: 'subscribed',
+        billing_op_id: 'op-1'
+      })
+      mockFetchStatus.mockResolvedValueOnce(undefined)
+      mockFetchBalance.mockResolvedValueOnce(undefined)
+
+      await checkout.handleAddCreditCard()
+
+      expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
+        user_id: 'user-1',
+        tier: 'standard',
+        cycle: 'yearly',
+        checkout_type: 'new',
+        billing_op_id: 'op-1',
+        payment_intent_source: 'subscribe_to_run'
+      })
+    })
+
    it('opens payment URL when needs_payment_method', async () => {
      const checkout = await setup()
      checkout.selectedTierKey.value = 'standard'
@@ -720,6 +814,7 @@ describe('useSubscriptionCheckout', () => {
          detail: 'Payment failed'
        })
      )
+      expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
    })
  })

--- a/src/platform/workspace/composables/useSubscriptionCheckout.ts
+++ b/src/platform/workspace/composables/useSubscriptionCheckout.ts
@@ -9,16 +9,26 @@ import type { TeamPlanSelection } from '@/platform/cloud/subscription/constants/
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import { useTelemetry } from '@/platform/telemetry'
+import type {
+  PaymentIntentSource,
+  SubscriptionCheckoutType
+} from '@/platform/telemetry/types'
 import type {
  Plan,
  PreviewSubscribeResponse,
  SubscribeResponse
 } from '@/platform/workspace/api/workspaceApi'
 import { useBillingOperationStore } from '@/platform/workspace/stores/billingOperationStore'
+import { trackWorkspaceCheckoutStarted } from '@/platform/workspace/utils/workspaceCheckoutTelemetry'

 type CheckoutStep = 'pricing' | 'preview' | 'success'
 type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>

+interface SelectedTeamCheckout {
+  stop: TeamPlanSelection
+  checkoutType: SubscriptionCheckoutType
+}
+
 /**
 * Which screen the `preview` step shows. Only a change prorates: a team change
 * carries `previewData` (handleSubscribeTeamClick sets it solely for an immediate
@@ -45,9 +55,12 @@ export function findPlanSlug(
  return plan?.slug ?? null
 }

-export function useSubscriptionCheckout(emit: {
-  (e: 'close', subscribed: boolean): void
-}) {
+export function useSubscriptionCheckout(
+  emit: {
+    (e: 'close', subscribed: boolean): void
+  },
+  paymentIntentSource?: PaymentIntentSource
+) {
  const { t } = useI18n()
  const toast = useToast()
  const {
@@ -68,13 +81,16 @@ export function useSubscriptionCheckout(emit: {
  const isResubscribing = ref(false)
  const previewData = ref<PreviewSubscribeResponse | null>(null)
  const selectedTierKey = ref<CheckoutTierKey | null>(null)
-  const selectedTeamStop = ref<TeamPlanSelection | null>(null)
+  const selectedTeamCheckout = ref<SelectedTeamCheckout | null>(null)
  const selectedBillingCycle = ref<BillingCycle>('yearly')
  const isPolling = computed(() => billingOperationStore.hasPendingOperations)
-  const isTeamCheckout = computed(() => selectedTeamStop.value !== null)
+  const selectedTeamStop = computed(
+    () => selectedTeamCheckout.value?.stop ?? null
+  )
+  const isTeamCheckout = computed(() => selectedTeamCheckout.value !== null)

  const previewVariant = computed<PreviewVariant>(() => {
-    if (selectedTeamStop.value) {
+    if (selectedTeamCheckout.value) {
      return previewData.value ? 'team-change' : 'team-new'
    }
    if (previewData.value) {
@@ -154,7 +170,10 @@ export function useSubscriptionCheckout(emit: {
    billingCycle: BillingCycle
    isChange?: boolean
  }) {
-    selectedTeamStop.value = payload.stop
+    selectedTeamCheckout.value = {
+      stop: payload.stop,
+      checkoutType: payload.isChange ? 'change' : 'new'
+    }
    selectedBillingCycle.value = payload.billingCycle
    selectedTierKey.value = null
    previewData.value = null
@@ -182,7 +201,7 @@ export function useSubscriptionCheckout(emit: {
  function handleBackToPricing() {
    checkoutStep.value = 'pricing'
    previewData.value = null
-    selectedTeamStop.value = null
+    selectedTeamCheckout.value = null
  }

  function handleSuccessClose() {
@@ -190,20 +209,34 @@ export function useSubscriptionCheckout(emit: {
  }

  async function handleSubscription() {
-    if (!selectedTierKey.value) return
+    const tierKey = selectedTierKey.value
+    if (!tierKey) return
+
+    const billingCycle = selectedBillingCycle.value
+    const checkoutType =
+      previewData.value &&
+      previewData.value.transition_type !== 'new_subscription'
+        ? 'change'
+        : 'new'

    isSubscribing.value = true
    try {
-      const planSlug = getApiPlanSlug(
-        selectedTierKey.value,
-        selectedBillingCycle.value
-      )
+      const planSlug = getApiPlanSlug(tierKey, billingCycle)
      if (!planSlug) return
      const response = await subscribe(planSlug, {
        returnUrl: `${getComfyPlatformBaseUrl()}/payment/success`,
        cancelUrl: `${getComfyPlatformBaseUrl()}/payment/failed`
      })

+      if (response) {
+        trackWorkspaceCheckoutStarted({
+          tier: tierKey,
+          cycle: billingCycle,
+          checkoutType,
+          billingOpId: response.billing_op_id,
+          paymentIntentSource
+        })
+      }
      await handleSubscribeResponse(response)
    } catch (error) {
      showSubscribeError(error)
@@ -269,8 +302,8 @@ export function useSubscriptionCheckout(emit: {
  }

  async function handleTeamSubscription() {
-    const stop = selectedTeamStop.value
-    if (!stop?.id) {
+    const teamCheckout = selectedTeamCheckout.value
+    if (!teamCheckout?.stop.id) {
      toast.add({
        severity: 'error',
        summary: t('subscription.teamPlan.name'),
@@ -279,16 +312,28 @@ export function useSubscriptionCheckout(emit: {
      return
    }

+    const { stop, checkoutType } = teamCheckout
+    const billingCycle = selectedBillingCycle.value
+
    isSubscribing.value = true
    try {
-      const planSlug = getTeamPlanSlug(selectedBillingCycle.value)
+      const planSlug = getTeamPlanSlug(billingCycle)
      const response = await subscribe(planSlug, {
        teamCreditStopId: stop.id,
-        billingCycle: selectedBillingCycle.value,
+        billingCycle,
        returnUrl: `${getComfyPlatformBaseUrl()}/payment/success`,
        cancelUrl: `${getComfyPlatformBaseUrl()}/payment/failed`
      })

+      if (response) {
+        trackWorkspaceCheckoutStarted({
+          tier: 'team',
+          cycle: billingCycle,
+          checkoutType,
+          billingOpId: response.billing_op_id,
+          paymentIntentSource
+        })
+      }
      await handleSubscribeResponse(response)
    } catch (error) {
      showSubscribeError(error)
--- a/src/platform/workspace/composables/useWorkspaceBilling.ts
+++ b/src/platform/workspace/composables/useWorkspaceBilling.ts
@@ -2,6 +2,7 @@ import { computed, ref, shallowRef } from 'vue'

 import { useBillingPlans } from '@/platform/cloud/subscription/composables/useBillingPlans'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type {
  BillingBalanceResponse,
  BillingStatusResponse,
@@ -275,12 +276,12 @@ export function useWorkspaceBilling(): BillingState & BillingActions {
  async function requireActiveSubscription(): Promise<void> {
    await fetchStatus()
    if (!isActiveSubscription.value) {
-      subscriptionDialog.show()
+      subscriptionDialog.show({ reason: 'subscription_required' })
    }
  }

-  function showSubscriptionDialog(): void {
-    subscriptionDialog.show()
+  function showSubscriptionDialog(options?: SubscriptionDialogOptions): void {
+    subscriptionDialog.show(options)
  }

  return {
--- a/src/platform/workspace/utils/workspaceCheckoutTelemetry.ts
+++ b/src/platform/workspace/utils/workspaceCheckoutTelemetry.ts
@@ -0,0 +1,38 @@
+import { useTelemetry } from '@/platform/telemetry'
+import type {
+  PaymentIntentSource,
+  SubscriptionCheckoutTier,
+  SubscriptionCheckoutType
+} from '@/platform/telemetry/types'
+import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
+import { useAuthStore } from '@/stores/authStore'
+
+interface TrackWorkspaceCheckoutStartedOptions {
+  tier: SubscriptionCheckoutTier
+  cycle: BillingCycle
+  checkoutType: SubscriptionCheckoutType
+  billingOpId: string
+  paymentIntentSource?: PaymentIntentSource
+}
+
+export function trackWorkspaceCheckoutStarted({
+  tier,
+  cycle,
+  checkoutType,
+  billingOpId,
+  paymentIntentSource
+}: TrackWorkspaceCheckoutStartedOptions) {
+  const { userId } = useAuthStore()
+  if (!userId) return
+
+  useTelemetry()?.trackBeginCheckout({
+    user_id: userId,
+    tier,
+    cycle,
+    checkout_type: checkoutType,
+    billing_op_id: billingOpId,
+    ...(paymentIntentSource
+      ? { payment_intent_source: paymentIntentSource }
+      : {})
+  })
+}
--- a/src/renderer/extensions/linearMode/MobileError.vue
+++ b/src/renderer/extensions/linearMode/MobileError.vue
@@ -9,7 +9,8 @@ import { useAppMode } from '@/composables/useAppMode'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { resolveRunErrorMessage } from '@/platform/errorCatalog/errorMessageResolver'
-import { buildSupportUrl } from '@/platform/support/config'
+import { SupportForm, buildSupportUrl } from '@/platform/support/config'
+import { useSupportContext } from '@/platform/support/useSupportContext'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'

@@ -26,7 +27,11 @@ const { copyToClipboard } = useCopyToClipboard()
 const guideUrl = buildDocsUrl('troubleshooting/overview', {
  includeLocale: true
 })
-const supportUrl = buildSupportUrl()
+const { buildPrefill } = useSupportContext()
+const supportUrl = buildSupportUrl(
+  SupportForm.Bug,
+  buildPrefill({ productArea: 'Linear Mode' })
+)

 const inputNodeIds = computed(() => {
  const ids = new Set()
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -18,7 +18,7 @@ import type {
 } from '@/stores/dialogStore'

 import type { ComponentAttrs } from 'vue-component-type-helpers'
-import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { WorkspaceRole } from '@/platform/workspace/api/workspaceApi'

 // Lazy loaders for dialogs - components are loaded on first use
@@ -442,9 +442,9 @@ export const useDialogService = () => {
    })
  }

-  async function showSubscriptionRequiredDialog(options?: {
-    reason?: SubscriptionDialogReason
-  }) {
+  async function showSubscriptionRequiredDialog(
+    options?: SubscriptionDialogOptions
+  ) {
    if (!isCloud || !window.__CONFIG__?.subscription_required) {
      return
    }
Author	SHA1	Message	Date
Marwan Mostafa	0dd68bec34	fix: correct Pylon form base URL to workspace subdomain Pylon serves a workspace's forms from the workspace subdomain (comfy-org.portal.usepylon.com/forms/<slug>), not a path segment under portal.usepylon.com. Update the base URL and every hardcoded reference in the unit and browser tests so support links resolve to real forms.	2026-07-02 15:12:07 +03:00
Marwan Ahmed	4626cb80a8	feat: migrate support links from Zendesk to Pylon with context-aware routing Replaces the Zendesk ticket form URL builder with a Pylon prefill builder and routes each Support entry-point to the best-fit Pylon form, prefilled with the user's email, cloud user id, environment, frontend version, OS, and browser. - Help Center "Help" / topbar "Support" -> question form - Error dialog & node "Get Help" -> report-a-bug form - Subscription dialog, useSubscriptionActions, credits panel -> billing-refund-issue form - Mobile linear-mode error -> report-a-bug form - Cloud onboarding (signup, auth timeout, footer) -> question form OS is normalized so Python platform names (darwin/linux/win32) are promoted to UA-detected versions ("macOS 14.5", "Windows 10/11"); the Typeform feedback URL is unchanged.	2026-07-02 15:12:06 +03:00
Benjamin Lu	2ec2a0e091	feat: attribute payment intent through paywall, checkout, and top-up telemetry (#13363 ) ## Summary Answers "why did this user want to pay?" by capturing the triggering product moment at every paywall/upsell entry point and carrying it through checkout and success telemetry. ## Changes - What: - Widen `SubscriptionDialogReason` from 4 coarse values to 13 grounded intent sources (`subscribe_to_run`, `upgrade_to_add_credits`, `invite_member_upsell`, `settings_billing_panel`, etc.) - Fire `app:subscription_required_modal_opened` from `useSubscriptionDialog` (the choke point all dialog variants pass through) — the workspace/unified path previously emitted nothing; remove the now-duplicate emitters in `useSubscription` and `usePricingTableUrlLoader` - Add `payment_intent_source` to `BeginCheckoutMetadata`/`SubscriptionSuccessMetadata`, threaded via the existing `reason` prop: dialog → `PricingTable` → `performSubscriptionCheckout` → pending-attempt record, so legacy `app:monthly_subscription_succeeded` carries intent alongside `checkout_attempt_id` - Fire `begin_checkout` on the workspace checkout path (`useSubscriptionCheckout`, personal + team confirm) and the team deep-link util — both previously emitted nothing; `tier` widened to `TierKey \| 'team'` - Implement `trackBeginCheckout` in `PostHogTelemetryProvider` (was GTM/host-only, so `begin_checkout` never reached PostHog) - Thread `showSubscriptionDialog(options)` through the billing-context adapters and pass a reason at ~14 call sites; add `source` to `app:add_api_credit_button_clicked` ## Review Focus - `modal_opened` now fires once per dialog actually shown, so a free-tier user clicking Upgrade emits two events (free-tier dialog, then pricing table) where the legacy path emitted one - Intent is threaded explicitly via props/params rather than shared state; `useSubscriptionCheckout` gained an optional second parameter	2026-07-02 03:11:21 +00:00
Mobeen Abdullah	9cf5c9a93f	refactor(website): tidy customer story review nits (#13324 ) ## Summary Small follow-up to #13289 applying two non-blocking review nits from Alex's review. ## Changes - What: drop the redundant `before:content-['']` on the customer-story list bullet (Tailwind emits the empty `content` automatically once another `before:` utility is present), and rename `HEADER_OFFSET` to `HEADER_OFFSET_PX` in `ArticleNav` so the scroll constants use consistent unit suffixes. ## Review Focus Both changes are cosmetic with no behavior change. Confirmed in the browser that the list bullet still renders identically (6px yellow dot) without the explicit `content` utility. ## Notes from the #13289 review (left as-is here, open to discussion) Three other comments from the review are intentionally not changed in this PR; reasoning below so the decisions are on record: - `Category` type in `ArticleNav`: kept the `ComponentProps<typeof CategoryNav>` derivation. AGENTS.md says to derive component types via `vue-component-type-helpers` rather than redefining them, so the current form follows the styleguide. Happy to switch to a plain named type if preferred. - Section ids in frontmatter vs the body `<Section>`: kept the `customers.content.test.ts` parity test. The short TOC labels live only in frontmatter and Astro can't introspect the rendered MDX body to build the nav, so the frontmatter `sections` list and the body anchor ids can't be trivially deduplicated. A real fix would need a remark plugin (larger, separate change). The test guards against silent drift in the meantime. - `nextStory` throw: left as a fail-loud, build-time invariant. The slug always comes from the same `getStaticPaths` collection, so the throw is effectively unreachable; it surfaces a future-refactor bug loudly instead of linking to the wrong story.	2026-07-01 12:45:24 +00:00