fix: route gtm through telemetry entrypoint (#8354)

Backport of #8508 to `cloud/1.38`

Automatically created by manual backport (cherry-pick of
c5431de123).

Conflicts resolved:
-
`src/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts`
— accepted PR version (uses `useBillingContext` mock instead of
pinia/firebase auth)
- `src/services/dialogService.ts` — merged: kept cloud/1.38 eager
imports for dialog components, replaced `TopUpCreditsDialogContent` with
Legacy/Workspace variants, replaced `useSubscription` with
`useBillingContext`, added workspace/legacy component selection in
`showTopUpCreditsDialog`; skipped lazy loader refactor (separate PR, not
part of #8508)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -0,0 +1,52 @@
+name: 'CI: Dist Telemetry Scan'
+
+on:
+  pull_request:
+    branches-ignore: [wip/*, draft/*, temp/*]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  scan:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
+
+      - name: Use Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project
+        run: pnpm build
+
+      - name: Scan dist for telemetry references
+        run: |
+          set -euo pipefail
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e 'Google Tag Manager' \
+            -e '(?i)\bgtm\.js\b' \
+            -e '(?i)googletagmanager\.com/gtm\.js\\?id=' \
+            -e '(?i)googletagmanager\.com/ns\.html\\?id=' \
+            dist; then
+            echo 'Telemetry references found in dist assets.'
+            exit 1
+          fi
+          echo 'No telemetry references found in dist assets.'

.github/workflows/i18n-update-core.yaml

@@ -41,7 +41,7 @@ jobs:
         env:
           PLAYWRIGHT_TEST_URL: http://localhost:5173
       - name: Update translations
-        run: pnpm locale
+        run: pnpm locale && pnpm format
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       - name: Commit updated locales

.gitignore

@@ -96,3 +96,5 @@ vitest.config.*.timestamp*
 
 # Weekly docs check output
 /output.txt
+
+.amp

global.d.ts

@@ -7,6 +7,7 @@ declare const __USE_PROD_CONFIG__: boolean
 
 interface Window {
   __CONFIG__: {
+    gtm_container_id?: string
     mixpanel_token?: string
     require_whitelist?: boolean
     subscription_required?: boolean
@@ -30,6 +31,12 @@ interface Window {
       badge?: string
     }
   }
+  __ga_identity__?: {
+    client_id?: string
+    session_id?: string
+    session_number?: string
+  }
+  dataLayer?: Array<Record<string, unknown>>
 }
 
 interface Navigator {

manifest.json

@@ -10,7 +10,5 @@
       "type": "image/svg+xml"
     }
   ],
-  "display": "standalone",
-  "background_color": "#172dd7",
-  "theme_color": "#f0ff41"
+  "display": "standalone"
 }

src/App.vue

@@ -1,13 +1,11 @@
 <template>
-  <WorkspaceAuthGate>
-    <router-view />
-    <ProgressSpinner
-      v-if="isLoading"
-      class="absolute inset-0 flex h-[unset] items-center justify-center"
-    />
-    <GlobalDialog />
-    <BlockUI full-screen :blocked="isLoading" />
-  </WorkspaceAuthGate>
+  <router-view />
+  <ProgressSpinner
+    v-if="isLoading"
+    class="absolute inset-0 flex h-[unset] items-center justify-center"
+  />
+  <GlobalDialog />
+  <BlockUI full-screen :blocked="isLoading" />
 </template>
 
 <script setup lang="ts">
@@ -16,7 +14,6 @@ import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onMounted } from 'vue'
 
-import WorkspaceAuthGate from '@/components/auth/WorkspaceAuthGate.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

@@ -8,10 +8,10 @@
 import { computed } from 'vue'
 
 import ComfyQueueButton from '@/components/actionbar/ComfyRunButton/ComfyQueueButton.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 
-const { isActiveSubscription } = useSubscription()
+const { isActiveSubscription } = useBillingContext()
 
 const currentButton = computed(() =>
   isActiveSubscription.value ? ComfyQueueButton : SubscribeToRunButton

src/components/auth/WorkspaceAuthGate.vue

@@ -24,7 +24,7 @@
 import { promiseTimeout, until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
@@ -120,7 +120,10 @@ async function initializeWorkspaceMode(): Promise<void> {
   }
 }
 
-// Start initialization immediately during component setup
-// (not in onMounted, so initialization starts before DOM is ready)
-void initialize()
+// Initialize on mount. This gate should be placed on the authenticated layout
+// (LayoutDefault) so it mounts fresh after login and unmounts on logout.
+// The router guard ensures only authenticated users reach this layout.
+onMounted(() => {
+  void initialize()
+})
 </script>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -767,7 +767,7 @@ useIntersectionObserver(loadTrigger, () => {
 // Reset pagination when filters change
 watch(
   [
-    searchQuery,
+    filteredTemplates,
     selectedNavItem,
     sortBy,
     selectedModels,

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -158,6 +158,7 @@ import Button from '@/components/ui/button/Button.vue'
 import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
@@ -176,8 +177,9 @@ const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
-const { isSubscriptionEnabled } = useSubscription()
+const { flags } = useFeatureFlags()
 
+const { isSubscriptionEnabled } = useSubscription()
 // Constants
 const PRESET_AMOUNTS = [10, 25, 50, 100]
 const MIN_AMOUNT = 5
@@ -256,9 +258,15 @@ async function handleBuy() {
 
     // Close top-up dialog (keep tracking) and open credits panel to show updated balance
     handleClose(false)
-    dialogService.showSettingsDialog(
-      isSubscriptionEnabled() ? 'subscription' : 'credits'
-    )
+
+    // In workspace mode (personal workspace), show workspace settings panel
+    // Otherwise, show legacy subscription/credits panel
+    const settingsPanel = flags.teamWorkspacesEnabled
+      ? 'workspace'
+      : isSubscriptionEnabled()
+        ? 'subscription'
+        : 'credits'
+    dialogService.showSettingsDialog(settingsPanel)
   } catch (error) {
     console.error('Purchase failed:', error)
 

src/components/dialog/content/TopUpCreditsDialogContentWorkspace.vue

@@ -0,0 +1,295 @@
+<template>
+  <div
+    class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+  >
+    <!-- Header -->
+    <div class="flex py-8 items-center justify-between px-8">
+      <h2 class="text-lg font-bold text-base-foreground m-0">
+        {{
+          isInsufficientCredits
+            ? $t('credits.topUp.addMoreCreditsToRun')
+            : $t('credits.topUp.addMoreCredits')
+        }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        @click="() => handleClose()"
+      >
+        <i class="icon-[lucide--x] size-6" />
+      </button>
+    </div>
+    <p
+      v-if="isInsufficientCredits"
+      class="text-sm text-muted-foreground m-0 px-8"
+    >
+      {{ $t('credits.topUp.insufficientWorkflowMessage') }}
+    </p>
+
+    <!-- Preset amount buttons -->
+    <div class="px-8">
+      <h3 class="m-0 text-sm font-normal text-muted-foreground">
+        {{ $t('credits.topUp.selectAmount') }}
+      </h3>
+      <div class="flex gap-2 pt-3">
+        <Button
+          v-for="amount in PRESET_AMOUNTS"
+          :key="amount"
+          :autofocus="amount === 50"
+          variant="secondary"
+          size="lg"
+          :class="
+            cn(
+              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
+              selectedPreset === amount && 'bg-secondary-background-selected'
+            )
+          "
+          @click="handlePresetClick(amount)"
+        >
+          ${{ amount }}
+        </Button>
+      </div>
+    </div>
+    <!-- Amount (USD) / Credits -->
+    <div class="flex gap-2 px-8 pt-8">
+      <!-- You Pay -->
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="text-sm text-muted-foreground">
+          {{ $t('credits.topUp.youPay') }}
+        </div>
+        <FormattedNumberStepper
+          :model-value="payAmount"
+          :min="0"
+          :max="MAX_AMOUNT"
+          :step="getStepAmount"
+          @update:model-value="handlePayAmountChange"
+          @max-reached="showCeilingWarning = true"
+        >
+          <template #prefix>
+            <span class="shrink-0 text-base font-semibold text-base-foreground"
+              >$</span
+            >
+          </template>
+        </FormattedNumberStepper>
+      </div>
+
+      <!-- You Get -->
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="text-sm text-muted-foreground">
+          {{ $t('credits.topUp.youGet') }}
+        </div>
+        <FormattedNumberStepper
+          v-model="creditsModel"
+          :min="0"
+          :max="usdToCredits(MAX_AMOUNT)"
+          :step="getCreditsStepAmount"
+          @max-reached="showCeilingWarning = true"
+        >
+          <template #prefix>
+            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
+          </template>
+        </FormattedNumberStepper>
+      </div>
+    </div>
+
+    <!-- Warnings -->
+
+    <p
+      v-if="isBelowMin"
+      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+    >
+      <i class="icon-[lucide--component] size-4" />
+      {{
+        $t('credits.topUp.minRequired', {
+          credits: formatNumber(usdToCredits(MIN_AMOUNT))
+        })
+      }}
+    </p>
+    <p
+      v-if="showCeilingWarning"
+      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+    >
+      <i class="icon-[lucide--component] size-4" />
+      {{
+        $t('credits.topUp.maxAllowed', {
+          credits: formatNumber(usdToCredits(MAX_AMOUNT))
+        })
+      }}
+      <span>{{ $t('credits.topUp.needMore') }}</span>
+      <a
+        href="https://www.comfy.org/cloud/enterprise"
+        target="_blank"
+        class="ml-1 text-inherit"
+        >{{ $t('credits.topUp.contactUs') }}</a
+      >
+    </p>
+
+    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+      <Button
+        :disabled="!isValidAmount || loading || isPolling"
+        :loading="loading || isPolling"
+        variant="primary"
+        size="lg"
+        class="h-10 justify-center"
+        @click="handleBuy"
+      >
+        {{ $t('subscription.addCredits') }}
+      </Button>
+      <div class="flex items-center justify-center gap-1">
+        <a
+          :href="pricingUrl"
+          target="_blank"
+          class="flex items-center gap-1 text-sm text-muted-foreground no-underline transition-colors hover:text-base-foreground"
+        >
+          {{ $t('credits.topUp.viewPricing') }}
+          <i class="icon-[lucide--external-link] size-4" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { creditsToUsd, usdToCredits } from '@/base/credits/comfyCredits'
+import Button from '@/components/ui/button/Button.vue'
+import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useExternalLink } from '@/composables/useExternalLink'
+import { useTelemetry } from '@/platform/telemetry'
+import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useDialogService } from '@/services/dialogService'
+import { useBillingOperationStore } from '@/stores/billingOperationStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const { isInsufficientCredits = false } = defineProps<{
+  isInsufficientCredits?: boolean
+}>()
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+const dialogService = useDialogService()
+const telemetry = useTelemetry()
+const toast = useToast()
+const { buildDocsUrl, docsPaths } = useExternalLink()
+const { fetchBalance } = useBillingContext()
+
+const billingOperationStore = useBillingOperationStore()
+const isPolling = computed(() => billingOperationStore.hasPendingOperations)
+
+// Constants
+const PRESET_AMOUNTS = [10, 25, 50, 100]
+const MIN_AMOUNT = 5
+const MAX_AMOUNT = 10000
+
+// State
+const selectedPreset = ref<number | null>(50)
+const payAmount = ref(50)
+const showCeilingWarning = ref(false)
+const loading = ref(false)
+
+// Computed
+const pricingUrl = computed(() =>
+  buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true })
+)
+
+const creditsModel = computed({
+  get: () => usdToCredits(payAmount.value),
+  set: (newCredits: number) => {
+    payAmount.value = Math.round(creditsToUsd(newCredits))
+    selectedPreset.value = null
+  }
+})
+
+const isValidAmount = computed(
+  () => payAmount.value >= MIN_AMOUNT && payAmount.value <= MAX_AMOUNT
+)
+
+const isBelowMin = computed(() => payAmount.value < MIN_AMOUNT)
+
+// Utility functions
+function formatNumber(num: number): string {
+  return num.toLocaleString('en-US')
+}
+
+// Step amount functions
+function getStepAmount(currentAmount: number): number {
+  if (currentAmount < 100) return 5
+  if (currentAmount < 1000) return 50
+  return 100
+}
+
+function getCreditsStepAmount(currentCredits: number): number {
+  const usdAmount = creditsToUsd(currentCredits)
+  return usdToCredits(getStepAmount(usdAmount))
+}
+
+// Event handlers
+function handlePayAmountChange(value: number) {
+  payAmount.value = value
+  selectedPreset.value = null
+  showCeilingWarning.value = false
+}
+
+function handlePresetClick(amount: number) {
+  showCeilingWarning.value = false
+  payAmount.value = amount
+  selectedPreset.value = amount
+}
+
+function handleClose(clearTracking = true) {
+  if (clearTracking) {
+    clearTopupTracking()
+  }
+  dialogStore.closeDialog({ key: 'top-up-credits' })
+}
+
+async function handleBuy() {
+  if (loading.value || !isValidAmount.value) return
+
+  loading.value = true
+  try {
+    telemetry?.trackApiCreditTopupButtonPurchaseClicked(payAmount.value)
+
+    const amountCents = payAmount.value * 100
+    const response = await workspaceApi.createTopup(amountCents)
+
+    if (response.status === 'completed') {
+      toast.add({
+        severity: 'success',
+        summary: t('credits.topUp.purchaseSuccess'),
+        life: 5000
+      })
+      await fetchBalance()
+      handleClose(false)
+      dialogService.showSettingsDialog('workspace')
+    } else if (response.status === 'pending') {
+      billingOperationStore.startOperation(response.billing_op_id, 'topup')
+    } else {
+      toast.add({
+        severity: 'error',
+        summary: t('credits.topUp.purchaseError'),
+        detail: t('credits.topUp.unknownError'),
+        life: 5000
+      })
+    }
+  } catch (error) {
+    console.error('Purchase failed:', error)
+
+    const errorMessage =
+      error instanceof Error ? error.message : t('credits.topUp.unknownError')
+    toast.add({
+      severity: 'error',
+      summary: t('credits.topUp.purchaseError'),
+      detail: t('credits.topUp.purchaseErrorDetail', { error: errorMessage }),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -265,18 +265,15 @@ function cancelEdit() {
 }
 
 async function saveKeybinding() {
-  if (currentEditingCommand.value && newBindingKeyCombo.value) {
-    const updated = keybindingStore.updateKeybindingOnCommand(
-      new KeybindingImpl({
-        commandId: currentEditingCommand.value.id,
-        combo: newBindingKeyCombo.value
-      })
-    )
-    if (updated) {
-      await keybindingService.persistUserKeybindings()
-    }
-  }
+  const commandId = currentEditingCommand.value?.id
+  const combo = newBindingKeyCombo.value
   cancelEdit()
+  if (!combo || commandId == undefined) return
+
+  const updated = keybindingStore.updateKeybindingOnCommand(
+    new KeybindingImpl({ commandId, combo })
+  )
+  if (updated) await keybindingService.persistUserKeybindings()
 }
 
 async function resetKeybinding(commandData: ICommandData) {

src/components/dialog/content/setting/LegacyCreditsPanel.vue

@@ -116,9 +116,9 @@ import { computed, ref, watch } from 'vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
@@ -138,7 +138,7 @@ const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
 const commandStore = useCommandStore()
 const telemetry = useTelemetry()
-const { isActiveSubscription } = useSubscription()
+const { isActiveSubscription } = useBillingContext()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 

src/components/dialog/content/setting/UserPanel.vue

@@ -63,14 +63,18 @@
             <i class="pi pi-sign-out" />
             {{ $t('auth.signOut.signOut') }}
           </Button>
-          <Button
+          <i18n-t
             v-if="!isApiKeyLogin"
-            class="w-fit"
-            variant="destructive-textonly"
-            @click="handleDeleteAccount"
+            keypath="auth.deleteAccount.contactSupport"
+            tag="p"
+            class="text-muted text-sm"
           >
-            {{ $t('auth.deleteAccount.deleteAccount') }}
-          </Button>
+            <template #email>
+              <a href="mailto:support@comfy.org" class="underline"
+                >support@comfy.org</a
+              >
+            </template>
+          </i18n-t>
         </div>
       </div>
 
@@ -116,7 +120,6 @@ const {
   providerName,
   providerIcon,
   handleSignOut,
-  handleSignIn,
-  handleDeleteAccount
+  handleSignIn
 } = useCurrentUser()
 </script>

src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('subscription.cancelDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        :disabled="isLoading"
+        @click="onClose"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-4 px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ description }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" :disabled="isLoading" @click="onClose">
+        {{ $t('subscription.cancelDialog.keepSubscription') }}
+      </Button>
+      <Button
+        variant="destructive"
+        size="lg"
+        :loading="isLoading"
+        @click="onConfirmCancel"
+      >
+        {{ $t('subscription.cancelDialog.confirmCancel') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const props = defineProps<{
+  cancelAt?: string
+}>()
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+const toast = useToast()
+const { cancelSubscription, fetchStatus, subscription } = useBillingContext()
+
+const isLoading = ref(false)
+
+const formattedEndDate = computed(() => {
+  const dateStr = props.cancelAt ?? subscription.value?.endDate
+  if (!dateStr) return t('subscription.cancelDialog.endOfBillingPeriod')
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  })
+})
+
+const description = computed(() =>
+  t('subscription.cancelDialog.description', { date: formattedEndDate.value })
+)
+
+function onClose() {
+  if (isLoading.value) return
+  dialogStore.closeDialog({ key: 'cancel-subscription' })
+}
+
+async function onConfirmCancel() {
+  isLoading.value = true
+  try {
+    await cancelSubscription()
+    await fetchStatus()
+    dialogStore.closeDialog({ key: 'cancel-subscription' })
+    toast.add({
+      severity: 'success',
+      summary: t('subscription.cancelSuccess'),
+      life: 5000
+    })
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('subscription.cancelDialog.failed'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>

src/components/dialog/header/SettingDialogHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="px-4">
+    <h2 :class="cn(flags.teamWorkspacesEnabled ? 'px-6' : 'px-4')">
       <i class="pi pi-cog" />
       <span>{{ $t('g.settings') }}</span>
       <Tag
@@ -16,6 +16,9 @@
 import Tag from 'primevue/tag'
 
 import { isStaging } from '@/config/staging'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { cn } from '@comfyorg/tailwind-utils'
+const { flags } = useFeatureFlags()
 </script>
 
 <style scoped>

src/components/helpcenter/HelpCenterPopups.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Help Center Popup positioned within canvas area -->
-  <Teleport to="#graph-canvas-container">
+  <Teleport to="body">
     <div
       v-if="isHelpCenterVisible"
       class="help-center-popup"

src/components/node/NodePreview.test.ts

@@ -76,14 +76,6 @@ describe('NodePreview', () => {
     expect(wrapper.find('._sb_preview_badge').text()).toBe('Preview')
   })
 
-  it('applies text-ellipsis class to node header for text truncation', () => {
-    const wrapper = mountComponent()
-    const nodeHeader = wrapper.find('.node_header')
-
-    expect(nodeHeader.classes()).toContain('text-ellipsis')
-    expect(nodeHeader.classes()).toContain('mr-4')
-  })
-
   it('sets title attribute on node header with full display name', () => {
     const wrapper = mountComponent()
     const nodeHeader = wrapper.find('.node_header')

src/components/node/NodePreview.vue

@@ -10,7 +10,7 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
   <div v-else class="_sb_node_preview bg-component-node-background">
     <div class="_sb_table">
       <div
-        class="node_header mr-4 text-ellipsis"
+        class="node_header text-ellipsis"
         :title="nodeDef.display_name"
         :style="{
           backgroundColor: litegraphColors.NODE_DEFAULT_COLOR,

src/components/sidebar/SideToolbar.vue

@@ -41,7 +41,7 @@
           :is-small="isSmall"
         />
         <SidebarHelpCenterIcon v-if="!isIntegratedTabBar" :is-small="isSmall" />
-        <SidebarBottomPanelToggleButton :is-small="isSmall" />
+        <SidebarBottomPanelToggleButton v-if="!isCloud" :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
         <ModeToggle
@@ -65,6 +65,7 @@ import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPa
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -2,7 +2,7 @@
   <div class="flex h-full flex-col">
     <!-- Active Jobs Grid -->
     <div
-      v-if="activeJobItems.length"
+      v-if="isQueuePanelV2Enabled && activeJobItems.length"
       class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
       :style="gridStyle"
     >
@@ -65,6 +65,7 @@ import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { isActiveJobState } from '@/utils/queueUtil'
 import { cn } from '@/utils/tailwindUtil'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const {
   assets,
@@ -90,6 +91,11 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const { jobItems } = useJobList()
+const settingStore = useSettingStore()
+
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
 
 type AssetGridItem = { key: string; asset: AssetItem }
 

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full flex-col">
     <div
-      v-if="activeJobItems.length"
+      v-if="isQueuePanelV2Enabled && activeJobItems.length"
       class="flex max-h-[50%] scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
     >
       <AssetsListItem
@@ -133,6 +133,7 @@ import {
 } from '@/utils/formatUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const {
   assets,
@@ -154,6 +155,11 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const { jobItems } = useJobList()
+const settingStore = useSettingStore()
+
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
 const hoveredJobId = ref<string | null>(null)
 const hoveredAssetId = ref<string | null>(null)
 

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -13,10 +13,7 @@
           severity="danger"
         />
       </template>
-      <template
-        v-if="nodeDef.name.startsWith(useSubgraphStore().typePrefix)"
-        #actions
-      >
+      <template v-if="isUserBlueprint" #actions>
         <Button
           variant="destructive"
           size="icon-sm"
@@ -128,8 +125,18 @@ const editBlueprint = async () => {
   await useSubgraphStore().editBlueprint(props.node.data.name)
 }
 const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
+const subgraphStore = useSubgraphStore()
+const isUserBlueprint = computed(() => {
+  const name = nodeDef.value.name
+  if (!name.startsWith(subgraphStore.typePrefix)) return false
+  return !subgraphStore.isGlobalBlueprint(
+    name.slice(subgraphStore.typePrefix.length)
+  )
+})
 const menuItems = computed<MenuItem[]>(() => {
-  const items: MenuItem[] = [
+  if (!isUserBlueprint.value) return []
+
+  return [
     {
       label: t('g.delete'),
       icon: 'pi pi-trash',
@@ -137,15 +144,14 @@ const menuItems = computed<MenuItem[]>(() => {
       command: deleteBlueprint
     }
   ]
-  return items
 })
 function handleContextMenu(event: Event) {
-  if (!nodeDef.value.name.startsWith(useSubgraphStore().typePrefix)) return
+  if (!isUserBlueprint.value) return
   menu.value?.show(event)
 }
 function deleteBlueprint() {
   if (!props.node.data) return
-  void useSubgraphStore().deleteBlueprint(props.node.data.name)
+  void subgraphStore.deleteBlueprint(props.node.data.name)
 }
 
 const nodePreviewStyle = ref<CSSProperties>({

src/components/toast/GlobalToast.vue

@@ -1,5 +1,13 @@
 <template>
   <Toast />
+  <Toast group="billing-operation" position="top-right">
+    <template #message="slotProps">
+      <div class="flex items-center gap-2">
+        <i class="pi pi-spin pi-spinner text-primary" />
+        <span>{{ slotProps.message.summary }}</span>
+      </div>
+    </template>
+  </Toast>
 </template>
 
 <script setup lang="ts">

src/components/topbar/CurrentUserButton.test.ts

@@ -64,10 +64,10 @@ vi.mock('@/components/common/UserAvatar.vue', () => ({
   }
 }))
 
-// Mock the CurrentUserPopover component
-vi.mock('./CurrentUserPopover.vue', () => ({
+// Mock the CurrentUserPopoverLegacy component
+vi.mock('./CurrentUserPopoverLegacy.vue', () => ({
   default: {
-    name: 'CurrentUserPopoverMock',
+    name: 'CurrentUserPopoverLegacyMock',
     render() {
       return h('div', 'Popover Content')
     },

src/components/topbar/CurrentUserButton.vue

@@ -45,14 +45,16 @@
           class: 'rounded-lg w-80'
         }
       }"
+      @show="onPopoverShow"
     >
       <!-- Workspace mode: workspace-aware popover (only when ready) -->
       <CurrentUserPopoverWorkspace
         v-if="teamWorkspacesEnabled && initState === 'ready'"
+        ref="workspacePopoverContent"
         @close="closePopover"
       />
       <!-- Legacy mode: original popover -->
-      <CurrentUserPopover
+      <CurrentUserPopoverLegacy
         v-else-if="!teamWorkspacesEnabled"
         @close="closePopover"
       />
@@ -75,7 +77,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import CurrentUserPopover from './CurrentUserPopover.vue'
+import CurrentUserPopoverLegacy from './CurrentUserPopoverLegacy.vue'
 
 const CurrentUserPopoverWorkspace = defineAsyncComponent(
   () => import('./CurrentUserPopoverWorkspace.vue')
@@ -112,8 +114,15 @@ const workspaceName = computed(() => {
 })
 
 const popover = ref<InstanceType<typeof Popover> | null>(null)
+const workspacePopoverContent = ref<{
+  refreshBalance: () => void
+} | null>(null)
 
 const closePopover = () => {
   popover.value?.hide()
 }
+
+const onPopoverShow = () => {
+  workspacePopoverContent.value?.refreshBalance()
+}
 </script>

src/components/topbar/CurrentUserPopoverLegacy.test.ts

@@ -7,7 +7,7 @@ import { createI18n } from 'vue-i18n'
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
-import CurrentUserPopover from './CurrentUserPopover.vue'
+import CurrentUserPopoverLegacy from './CurrentUserPopoverLegacy.vue'
 
 // Mock all firebase modules
 vi.mock('firebase/app', () => ({
@@ -172,7 +172,7 @@ vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
   }
 }))
 
-describe('CurrentUserPopover', () => {
+describe('CurrentUserPopoverLegacy', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockAuthStoreState.balance = {
@@ -190,7 +190,7 @@ describe('CurrentUserPopover', () => {
       messages: { en: enMessages }
     })
 
-    return mount(CurrentUserPopover, {
+    return mount(CurrentUserPopoverLegacy, {
       global: {
         plugins: [i18n],
         stubs: {

src/components/topbar/CurrentUserPopoverWorkspace.vue

@@ -87,18 +87,26 @@
         <SubscribeButton
           v-else-if="isPersonalWorkspace"
           :fluid="false"
-          :label="$t('workspaceSwitcher.subscribe')"
+          :label="
+            isCancelled
+              ? $t('subscription.resubscribe')
+              : $t('workspaceSwitcher.subscribe')
+          "
           size="sm"
           variant="gradient"
         />
-        <!-- Non-personal workspace: Navigate to workspace settings -->
+        <!-- Non-personal workspace: Show pricing table -->
         <Button
           v-else
           variant="primary"
           size="sm"
-          @click="handleOpenPlanAndCreditsSettings"
+          @click="handleOpenPlansAndPricing"
         >
-          {{ $t('workspaceSwitcher.subscribe') }}
+          {{
+            isCancelled
+              ? $t('subscription.resubscribe')
+              : $t('workspaceSwitcher.subscribe')
+          }}
         </Button>
       </div>
 
@@ -196,18 +204,19 @@ import { storeToRefs } from 'pinia'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
 import Skeleton from 'primevue/skeleton'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import UserAvatar from '@/components/common/UserAvatar.vue'
 import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
 import WorkspaceSwitcherPopover from '@/components/topbar/WorkspaceSwitcherPopover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+
 import { useExternalLink } from '@/composables/useExternalLink'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
@@ -233,22 +242,33 @@ const { buildDocsUrl, docsPaths } = useExternalLink()
 
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
-const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
-const { isActiveSubscription, subscriptionStatus } = useSubscription()
-const { totalCredits, isLoadingBalance } = useSubscriptionCredits()
+const { isActiveSubscription, subscription, balance, isLoading, fetchBalance } =
+  useBillingContext()
+
+const isCancelled = computed(() => subscription.value?.isCancelled ?? false)
 const subscriptionDialog = useSubscriptionDialog()
 
+const { locale } = useI18n()
+const isLoadingBalance = isLoading
+
 const displayedCredits = computed(() => {
   if (initState.value !== 'ready') return ''
-  // Only personal workspaces have subscription status from useSubscription()
-  // Team workspaces don't have backend subscription data yet
-  if (isPersonalWorkspace.value) {
-    // Wait for subscription status to load
-    if (subscriptionStatus.value === null) return ''
-    return isActiveSubscription.value ? totalCredits.value : '0'
-  }
-  return '0'
+  // Wait for subscription to load
+  if (subscription.value === null) return ''
+  if (!isActiveSubscription.value) return '0'
+
+  // API field is named _micros but contains cents (naming inconsistency)
+  const cents =
+    balance.value?.effectiveBalanceMicros ?? balance.value?.amountMicros ?? 0
+  return formatCreditsFromCents({
+    cents,
+    locale: locale.value,
+    numberOptions: {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    }
+  })
 })
 
 const canUpgrade = computed(() => {
@@ -322,7 +342,11 @@ const toggleWorkspaceSwitcher = (event: MouseEvent) => {
   workspaceSwitcherPopover.value?.toggle(event)
 }
 
-onMounted(() => {
-  void authActions.fetchBalance()
-})
+const refreshBalance = () => {
+  if (isActiveSubscription.value) {
+    void fetchBalance()
+  }
+}
+
+defineExpose({ refreshBalance })
 </script>

src/components/topbar/WorkspaceSwitcherPopover.vue

@@ -113,24 +113,24 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useWorkspaceSwitch } from '@/platform/auth/workspace/useWorkspaceSwitch'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import type {
+  SubscriptionTier,
   WorkspaceRole,
   WorkspaceType
 } from '@/platform/workspace/api/workspaceApi'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { cn } from '@/utils/tailwindUtil'
 
-type SubscriptionPlan = 'PRO_MONTHLY' | 'PRO_YEARLY' | null
-
 interface AvailableWorkspace {
   id: string
   name: string
   type: WorkspaceType
   role: WorkspaceRole
   isSubscribed: boolean
-  subscriptionPlan: SubscriptionPlan
+  subscriptionPlan: string | null
+  subscriptionTier: SubscriptionTier | null
 }
 
 const emit = defineEmits<{
@@ -140,7 +140,34 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const { switchWithConfirmation } = useWorkspaceSwitch()
-const { subscriptionTierName: userSubscriptionTierName } = useSubscription()
+const { subscription } = useBillingContext()
+
+const tierKeyMap: Record<string, string> = {
+  STANDARD: 'standard',
+  CREATOR: 'creator',
+  PRO: 'pro',
+  FOUNDER: 'founder',
+  FOUNDERS_EDITION: 'founder'
+}
+
+function formatTierName(
+  tier: string | null | undefined,
+  isYearly: boolean
+): string {
+  if (!tier) return ''
+  const key = tierKeyMap[tier] ?? 'standard'
+  const baseName = t(`subscription.tiers.${key}.name`)
+  return isYearly
+    ? t('subscription.tierNameYearly', { name: baseName })
+    : baseName
+}
+
+const currentSubscriptionTierName = computed(() => {
+  const tier = subscription.value?.tier
+  if (!tier) return ''
+  const isYearly = subscription.value?.duration === 'ANNUAL'
+  return formatTierName(tier, isYearly)
+})
 
 const workspaceStore = useTeamWorkspaceStore()
 const { workspaceId, workspaces, canCreateWorkspace, isFetchingWorkspaces } =
@@ -153,7 +180,8 @@ const availableWorkspaces = computed<AvailableWorkspace[]>(() =>
     type: w.type,
     role: w.role,
     isSubscribed: w.isSubscribed,
-    subscriptionPlan: w.subscriptionPlan
+    subscriptionPlan: w.subscriptionPlan,
+    subscriptionTier: w.subscriptionTier
   }))
 )
 
@@ -168,19 +196,32 @@ function getRoleLabel(role: AvailableWorkspace['role']): string {
 }
 
 function getTierLabel(workspace: AvailableWorkspace): string | null {
-  // Personal workspace: use user's subscription tier
-  if (workspace.type === 'personal') {
-    return userSubscriptionTierName.value || null
+  // For the current/active workspace, use billing context directly
+  // This ensures we always have the most up-to-date subscription info
+  if (isCurrentWorkspace(workspace)) {
+    return currentSubscriptionTierName.value || null
   }
-  // Team workspace: use workspace subscription plan
-  if (!workspace.isSubscribed || !workspace.subscriptionPlan) return null
-  if (workspace.subscriptionPlan === 'PRO_MONTHLY')
-    return t('subscription.tiers.pro.name')
-  if (workspace.subscriptionPlan === 'PRO_YEARLY')
-    return t('subscription.tierNameYearly', {
-      name: t('subscription.tiers.pro.name')
-    })
-  return null
+
+  // For non-active workspaces, use cached store data
+  if (!workspace.isSubscribed) return null
+
+  if (workspace.subscriptionTier) {
+    return formatTierName(workspace.subscriptionTier, false)
+  }
+
+  if (!workspace.subscriptionPlan) return null
+
+  // Parse plan slug (format: TIER_DURATION, e.g. "CREATOR_MONTHLY", "PRO_YEARLY")
+  const planSlug = workspace.subscriptionPlan
+
+  // Extract tier from plan slug (e.g., "CREATOR_MONTHLY" -> "CREATOR")
+  const tierMatch = Object.keys(tierKeyMap).find((tier) =>
+    planSlug.startsWith(tier)
+  )
+  if (!tierMatch) return null
+
+  const isYearly = planSlug.includes('YEARLY') || planSlug.includes('ANNUAL')
+  return formatTierName(tierMatch, isYearly)
 }
 
 async function handleSelectWorkspace(workspace: AvailableWorkspace) {

src/components/ui/select/SelectContent.vue

@@ -20,9 +20,18 @@ defineOptions({
 
 const {
   position = 'popper',
+  // Safari has issues with click events on portaled content inside dialogs.
+  // Set disablePortal to true when using Select inside a Dialog on Safari.
+  // See: https://github.com/chakra-ui/ark/issues/1782
+  disablePortal = false,
   class: className,
   ...restProps
-} = defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>()
+} = defineProps<
+  SelectContentProps & {
+    class?: HTMLAttributes['class']
+    disablePortal?: boolean
+  }
+>()
 const emits = defineEmits<SelectContentEmits>()
 
 const delegatedProps = computed(() => ({
@@ -34,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <SelectPortal>
+  <SelectPortal :disabled="disablePortal">
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="

src/composables/auth/useCurrentUser.ts

@@ -1,9 +1,6 @@
 import { whenever } from '@vueuse/core'
 import { computed, watch } from 'vue'
 
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { t } from '@/i18n'
-import { useDialogService } from '@/services/dialogService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -13,8 +10,6 @@ export const useCurrentUser = () => {
   const authStore = useFirebaseAuthStore()
   const commandStore = useCommandStore()
   const apiKeyStore = useApiKeyAuthStore()
-  const dialogService = useDialogService()
-  const { deleteAccount } = useFirebaseAuthActions()
 
   const firebaseUser = computed(() => authStore.currentUser)
   const isApiKeyLogin = computed(() => apiKeyStore.isAuthenticated)
@@ -116,18 +111,6 @@ export const useCurrentUser = () => {
     await commandStore.execute('Comfy.User.OpenSignInDialog')
   }
 
-  const handleDeleteAccount = async () => {
-    const confirmed = await dialogService.confirm({
-      title: t('auth.deleteAccount.confirmTitle'),
-      message: t('auth.deleteAccount.confirmMessage'),
-      type: 'delete'
-    })
-
-    if (confirmed) {
-      await deleteAccount()
-    }
-  }
-
   return {
     loading: authStore.loading,
     isLoggedIn,
@@ -141,7 +124,6 @@ export const useCurrentUser = () => {
     resolvedUserInfo,
     handleSignOut,
     handleSignIn,
-    handleDeleteAccount,
     onUserResolved,
     onTokenRefreshed,
     onUserLogout

src/composables/auth/useFirebaseAuthActions.ts

@@ -2,11 +2,11 @@ import { FirebaseError } from 'firebase/app'
 import { AuthErrorCodes } from 'firebase/auth'
 import { ref } from 'vue'
 
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { ErrorRecoveryStrategy } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogService } from '@/services/dialogService'
@@ -83,7 +83,7 @@ export const useFirebaseAuthActions = () => {
   )
 
   const purchaseCredits = wrapWithErrorHandlingAsync(async (amount: number) => {
-    const { isActiveSubscription } = useSubscription()
+    const { isActiveSubscription } = useBillingContext()
     if (!isActiveSubscription.value) return
 
     const response = await authStore.initiateCreditPurchase({
@@ -206,21 +206,6 @@ export const useFirebaseAuthActions = () => {
     [createReauthenticationRecovery<[string], void>()]
   )
 
-  const deleteAccount = wrapWithErrorHandlingAsync(
-    async () => {
-      await authStore.deleteAccount()
-      toastStore.add({
-        severity: 'success',
-        summary: t('auth.deleteAccount.success'),
-        detail: t('auth.deleteAccount.successDetail'),
-        life: 5000
-      })
-    },
-    reportError,
-    undefined,
-    [createReauthenticationRecovery<[], void>()]
-  )
-
   return {
     logout,
     sendPasswordReset,
@@ -232,7 +217,6 @@ export const useFirebaseAuthActions = () => {
     signInWithEmail,
     signUpWithEmail,
     updatePassword,
-    deleteAccount,
     accessError,
     reportError
   }

src/composables/billing/types.ts

@@ -0,0 +1,76 @@
+import type { ComputedRef, Ref } from 'vue'
+
+import type {
+  Plan,
+  PreviewSubscribeResponse,
+  SubscribeResponse,
+  SubscriptionDuration,
+  SubscriptionTier
+} from '@/platform/workspace/api/workspaceApi'
+
+export type BillingType = 'legacy' | 'workspace'
+
+export interface SubscriptionInfo {
+  isActive: boolean
+  tier: SubscriptionTier | null
+  duration: SubscriptionDuration | null
+  planSlug: string | null
+  renewalDate: string | null
+  endDate: string | null
+  isCancelled: boolean
+  hasFunds: boolean
+}
+
+export interface BalanceInfo {
+  amountMicros: number
+  currency: string
+  effectiveBalanceMicros?: number
+  prepaidBalanceMicros?: number
+  cloudCreditBalanceMicros?: number
+}
+
+export interface BillingActions {
+  initialize: () => Promise<void>
+  fetchStatus: () => Promise<void>
+  fetchBalance: () => Promise<void>
+  subscribe: (
+    planSlug: string,
+    returnUrl?: string,
+    cancelUrl?: string
+  ) => Promise<SubscribeResponse | void>
+  previewSubscribe: (
+    planSlug: string
+  ) => Promise<PreviewSubscribeResponse | null>
+  manageSubscription: () => Promise<void>
+  cancelSubscription: () => Promise<void>
+  fetchPlans: () => Promise<void>
+  /**
+   * Ensures billing is initialized and subscription is active.
+   * Shows subscription dialog if not subscribed.
+   * Use this in extensions/entry points that require active subscription.
+   */
+  requireActiveSubscription: () => Promise<void>
+  /**
+   * Shows the subscription dialog.
+   */
+  showSubscriptionDialog: () => void
+}
+
+export interface BillingState {
+  isInitialized: Ref<boolean>
+  subscription: ComputedRef<SubscriptionInfo | null>
+  balance: ComputedRef<BalanceInfo | null>
+  plans: ComputedRef<Plan[]>
+  currentPlanSlug: ComputedRef<string | null>
+  isLoading: Ref<boolean>
+  error: Ref<string | null>
+  /**
+   * Convenience computed for checking if subscription is active.
+   * Equivalent to `subscription.value?.isActive ?? false`
+   */
+  isActiveSubscription: ComputedRef<boolean>
+}
+
+export interface BillingContext extends BillingState, BillingActions {
+  type: ComputedRef<BillingType>
+}

src/composables/billing/useBillingContext.test.ts

@@ -0,0 +1,164 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useBillingContext } from './useBillingContext'
+
+vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => {
+  const isInPersonalWorkspace = { value: true }
+  const activeWorkspace = { value: { id: 'personal-123', type: 'personal' } }
+  return {
+    useTeamWorkspaceStore: () => ({
+      isInPersonalWorkspace: isInPersonalWorkspace.value,
+      activeWorkspace: activeWorkspace.value,
+      _setPersonalWorkspace: (value: boolean) => {
+        isInPersonalWorkspace.value = value
+        activeWorkspace.value = value
+          ? { id: 'personal-123', type: 'personal' }
+          : { id: 'team-456', type: 'team' }
+      }
+    })
+  }
+})
+
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: () => ({
+    isActiveSubscription: { value: true },
+    subscriptionTier: { value: 'PRO' },
+    subscriptionDuration: { value: 'MONTHLY' },
+    formattedRenewalDate: { value: 'Jan 1, 2025' },
+    formattedEndDate: { value: '' },
+    isCancelled: { value: false },
+    fetchStatus: vi.fn().mockResolvedValue(undefined),
+    manageSubscription: vi.fn().mockResolvedValue(undefined),
+    subscribe: vi.fn().mockResolvedValue(undefined),
+    showSubscriptionDialog: vi.fn()
+  })
+}))
+
+vi.mock(
+  '@/platform/cloud/subscription/composables/useSubscriptionDialog',
+  () => ({
+    useSubscriptionDialog: () => ({
+      show: vi.fn(),
+      hide: vi.fn()
+    })
+  })
+)
+
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: () => ({
+    balance: { amount_micros: 5000000 },
+    fetchBalance: vi.fn().mockResolvedValue({ amount_micros: 5000000 })
+  })
+}))
+
+vi.mock('@/platform/cloud/subscription/composables/useBillingPlans', () => {
+  const plans = { value: [] }
+  const currentPlanSlug = { value: null }
+  return {
+    useBillingPlans: () => ({
+      plans,
+      currentPlanSlug,
+      isLoading: { value: false },
+      error: { value: null },
+      fetchPlans: vi.fn().mockResolvedValue(undefined),
+      getPlanBySlug: vi.fn().mockReturnValue(null)
+    })
+  }
+})
+
+vi.mock('@/platform/workspace/api/workspaceApi', () => ({
+  workspaceApi: {
+    getBillingStatus: vi.fn().mockResolvedValue({
+      is_active: true,
+      has_funds: true,
+      subscription_tier: 'PRO',
+      subscription_duration: 'MONTHLY'
+    }),
+    getBillingBalance: vi.fn().mockResolvedValue({
+      amount_micros: 10000000,
+      currency: 'usd'
+    }),
+    subscribe: vi.fn().mockResolvedValue({ status: 'subscribed' }),
+    previewSubscribe: vi.fn().mockResolvedValue({ allowed: true })
+  }
+}))
+
+describe('useBillingContext', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+  })
+
+  it('returns legacy type for personal workspace', () => {
+    const { type } = useBillingContext()
+    expect(type.value).toBe('legacy')
+  })
+
+  it('provides subscription info from legacy billing', () => {
+    const { subscription } = useBillingContext()
+
+    expect(subscription.value).toEqual({
+      isActive: true,
+      tier: 'PRO',
+      duration: 'MONTHLY',
+      planSlug: null,
+      renewalDate: 'Jan 1, 2025',
+      endDate: null,
+      isCancelled: false,
+      hasFunds: true
+    })
+  })
+
+  it('provides balance info from legacy billing', () => {
+    const { balance } = useBillingContext()
+
+    expect(balance.value).toEqual({
+      amountMicros: 5000000,
+      currency: 'usd',
+      effectiveBalanceMicros: 5000000,
+      prepaidBalanceMicros: 0,
+      cloudCreditBalanceMicros: 0
+    })
+  })
+
+  it('exposes initialize action', async () => {
+    const { initialize } = useBillingContext()
+    await expect(initialize()).resolves.toBeUndefined()
+  })
+
+  it('exposes fetchStatus action', async () => {
+    const { fetchStatus } = useBillingContext()
+    await expect(fetchStatus()).resolves.toBeUndefined()
+  })
+
+  it('exposes fetchBalance action', async () => {
+    const { fetchBalance } = useBillingContext()
+    await expect(fetchBalance()).resolves.toBeUndefined()
+  })
+
+  it('exposes subscribe action', async () => {
+    const { subscribe } = useBillingContext()
+    await expect(subscribe('pro-monthly')).resolves.toBeUndefined()
+  })
+
+  it('exposes manageSubscription action', async () => {
+    const { manageSubscription } = useBillingContext()
+    await expect(manageSubscription()).resolves.toBeUndefined()
+  })
+
+  it('provides isActiveSubscription convenience computed', () => {
+    const { isActiveSubscription } = useBillingContext()
+    expect(isActiveSubscription.value).toBe(true)
+  })
+
+  it('exposes requireActiveSubscription action', async () => {
+    const { requireActiveSubscription } = useBillingContext()
+    await expect(requireActiveSubscription()).resolves.toBeUndefined()
+  })
+
+  it('exposes showSubscriptionDialog action', () => {
+    const { showSubscriptionDialog } = useBillingContext()
+    expect(() => showSubscriptionDialog()).not.toThrow()
+  })
+})

src/composables/billing/useBillingContext.ts

@@ -0,0 +1,242 @@
+import { computed, ref, shallowRef, toValue, watch } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+import type {
+  BalanceInfo,
+  BillingActions,
+  BillingContext,
+  BillingType,
+  BillingState,
+  SubscriptionInfo
+} from './types'
+import { useLegacyBilling } from './useLegacyBilling'
+import { useWorkspaceBilling } from './useWorkspaceBilling'
+
+/**
+ * Unified billing context that automatically switches between legacy (user-scoped)
+ * and workspace billing based on the active workspace type.
+ *
+ * - Personal workspaces use legacy billing via /customers/* endpoints
+ * - Team workspaces use workspace billing via /billing/* endpoints
+ *
+ * The context automatically initializes when the workspace changes and provides
+ * a unified interface for subscription status, balance, and billing actions.
+ *
+ * @example
+ * ```typescript
+ * const {
+ *   type,
+ *   subscription,
+ *   balance,
+ *   isInitialized,
+ *   initialize,
+ *   subscribe
+ * } = useBillingContext()
+ *
+ * // Wait for initialization
+ * await initialize()
+ *
+ * // Check subscription status
+ * if (subscription.value?.isActive) {
+ *   console.log(`Tier: ${subscription.value.tier}`)
+ * }
+ *
+ * // Check balance
+ * if (balance.value) {
+ *   const dollars = balance.value.amountMicros / 1_000_000
+ *   console.log(`Balance: $${dollars.toFixed(2)}`)
+ * }
+ * ```
+ */
+function useBillingContextInternal(): BillingContext {
+  const store = useTeamWorkspaceStore()
+  const { flags } = useFeatureFlags()
+
+  const legacyBillingRef = shallowRef<(BillingState & BillingActions) | null>(
+    null
+  )
+  const workspaceBillingRef = shallowRef<
+    (BillingState & BillingActions) | null
+  >(null)
+
+  const getLegacyBilling = () => {
+    if (!legacyBillingRef.value) {
+      legacyBillingRef.value = useLegacyBilling()
+    }
+    return legacyBillingRef.value
+  }
+
+  const getWorkspaceBilling = () => {
+    if (!workspaceBillingRef.value) {
+      workspaceBillingRef.value = useWorkspaceBilling()
+    }
+    return workspaceBillingRef.value
+  }
+
+  const isInitialized = ref(false)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  /**
+   * Determines which billing type to use:
+   * - If team workspaces feature is disabled: always use legacy (/customers)
+   * - If team workspaces feature is enabled:
+   *   - Personal workspace: use legacy (/customers)
+   *   - Team workspace: use workspace (/billing)
+   */
+  const type = computed<BillingType>(() => {
+    if (!flags.teamWorkspacesEnabled) return 'legacy'
+    return store.isInPersonalWorkspace ? 'legacy' : 'workspace'
+  })
+
+  const activeContext = computed(() =>
+    type.value === 'legacy' ? getLegacyBilling() : getWorkspaceBilling()
+  )
+
+  // Proxy state from active context
+  const subscription = computed<SubscriptionInfo | null>(() =>
+    toValue(activeContext.value.subscription)
+  )
+
+  const balance = computed<BalanceInfo | null>(() =>
+    toValue(activeContext.value.balance)
+  )
+
+  const plans = computed(() => toValue(activeContext.value.plans))
+
+  const currentPlanSlug = computed(() =>
+    toValue(activeContext.value.currentPlanSlug)
+  )
+
+  const isActiveSubscription = computed(() =>
+    toValue(activeContext.value.isActiveSubscription)
+  )
+
+  // Sync subscription info to workspace store for display in workspace switcher
+  // A subscription is considered "subscribed" for workspace purposes if it's active AND not cancelled
+  // This ensures the delete button is enabled after cancellation, even before the period ends
+  watch(
+    subscription,
+    (sub) => {
+      if (!sub || store.isInPersonalWorkspace) return
+
+      store.updateActiveWorkspace({
+        isSubscribed: sub.isActive && !sub.isCancelled,
+        subscriptionPlan: sub.planSlug
+      })
+    },
+    { immediate: true }
+  )
+
+  // Initialize billing when workspace changes
+  watch(
+    () => store.activeWorkspace?.id,
+    async (newWorkspaceId, oldWorkspaceId) => {
+      if (!newWorkspaceId) {
+        // No workspace selected - reset state
+        isInitialized.value = false
+        error.value = null
+        return
+      }
+
+      if (newWorkspaceId !== oldWorkspaceId) {
+        // Workspace changed - reinitialize
+        isInitialized.value = false
+        try {
+          await initialize()
+        } catch (err) {
+          // Error is already captured in error ref
+          console.error('Failed to initialize billing context:', err)
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  async function initialize(): Promise<void> {
+    if (isInitialized.value) return
+
+    isLoading.value = true
+    error.value = null
+    try {
+      await activeContext.value.initialize()
+      isInitialized.value = true
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to initialize billing'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function fetchStatus(): Promise<void> {
+    return activeContext.value.fetchStatus()
+  }
+
+  async function fetchBalance(): Promise<void> {
+    return activeContext.value.fetchBalance()
+  }
+
+  async function subscribe(
+    planSlug: string,
+    returnUrl?: string,
+    cancelUrl?: string
+  ) {
+    return activeContext.value.subscribe(planSlug, returnUrl, cancelUrl)
+  }
+
+  async function previewSubscribe(planSlug: string) {
+    return activeContext.value.previewSubscribe(planSlug)
+  }
+
+  async function manageSubscription() {
+    return activeContext.value.manageSubscription()
+  }
+
+  async function cancelSubscription() {
+    return activeContext.value.cancelSubscription()
+  }
+
+  async function fetchPlans() {
+    return activeContext.value.fetchPlans()
+  }
+
+  async function requireActiveSubscription() {
+    return activeContext.value.requireActiveSubscription()
+  }
+
+  function showSubscriptionDialog() {
+    return activeContext.value.showSubscriptionDialog()
+  }
+
+  return {
+    type,
+    isInitialized,
+    subscription,
+    balance,
+    plans,
+    currentPlanSlug,
+    isLoading,
+    error,
+    isActiveSubscription,
+
+    initialize,
+    fetchStatus,
+    fetchBalance,
+    subscribe,
+    previewSubscribe,
+    manageSubscription,
+    cancelSubscription,
+    fetchPlans,
+    requireActiveSubscription,
+    showSubscriptionDialog
+  }
+}
+
+export const useBillingContext = createSharedComposable(
+  useBillingContextInternal
+)

src/composables/billing/useLegacyBilling.ts

@@ -0,0 +1,189 @@
+import { computed, ref } from 'vue'
+
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import type {
+  PreviewSubscribeResponse,
+  SubscribeResponse
+} from '@/platform/workspace/api/workspaceApi'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+import type {
+  BalanceInfo,
+  BillingActions,
+  BillingState,
+  SubscriptionInfo
+} from './types'
+
+/**
+ * Adapter for legacy user-scoped billing via /customers/* endpoints.
+ * Used for personal workspaces.
+ * @internal - Use useBillingContext() instead of importing directly.
+ */
+export function useLegacyBilling(): BillingState & BillingActions {
+  const {
+    isActiveSubscription: legacyIsActiveSubscription,
+    subscriptionTier,
+    subscriptionDuration,
+    formattedRenewalDate,
+    formattedEndDate,
+    isCancelled,
+    fetchStatus: legacyFetchStatus,
+    manageSubscription: legacyManageSubscription,
+    subscribe: legacySubscribe,
+    showSubscriptionDialog: legacyShowSubscriptionDialog
+  } = useSubscription()
+
+  const firebaseAuthStore = useFirebaseAuthStore()
+
+  const isInitialized = ref(false)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  const isActiveSubscription = computed(() => legacyIsActiveSubscription.value)
+
+  const subscription = computed<SubscriptionInfo | null>(() => {
+    if (!legacyIsActiveSubscription.value && !subscriptionTier.value) {
+      return null
+    }
+
+    return {
+      isActive: legacyIsActiveSubscription.value,
+      tier: subscriptionTier.value,
+      duration: subscriptionDuration.value,
+      planSlug: null, // Legacy doesn't use plan slugs
+      renewalDate: formattedRenewalDate.value || null,
+      endDate: formattedEndDate.value || null,
+      isCancelled: isCancelled.value,
+      hasFunds: (firebaseAuthStore.balance?.amount_micros ?? 0) > 0
+    }
+  })
+
+  const balance = computed<BalanceInfo | null>(() => {
+    const legacyBalance = firebaseAuthStore.balance
+    if (!legacyBalance) return null
+
+    return {
+      amountMicros: legacyBalance.amount_micros ?? 0,
+      currency: legacyBalance.currency ?? 'usd',
+      effectiveBalanceMicros:
+        legacyBalance.effective_balance_micros ??
+        legacyBalance.amount_micros ??
+        0,
+      prepaidBalanceMicros: legacyBalance.prepaid_balance_micros ?? 0,
+      cloudCreditBalanceMicros: legacyBalance.cloud_credit_balance_micros ?? 0
+    }
+  })
+
+  // Legacy billing doesn't have workspace-style plans
+  const plans = computed(() => [])
+  const currentPlanSlug = computed(() => null)
+
+  async function initialize(): Promise<void> {
+    if (isInitialized.value) return
+
+    isLoading.value = true
+    error.value = null
+    try {
+      await Promise.all([fetchStatus(), fetchBalance()])
+      isInitialized.value = true
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to initialize billing'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function fetchStatus(): Promise<void> {
+    isLoading.value = true
+    error.value = null
+    try {
+      await legacyFetchStatus()
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to fetch subscription'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function fetchBalance(): Promise<void> {
+    isLoading.value = true
+    error.value = null
+    try {
+      await firebaseAuthStore.fetchBalance()
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to fetch balance'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function subscribe(
+    _planSlug: string,
+    _returnUrl?: string,
+    _cancelUrl?: string
+  ): Promise<SubscribeResponse | void> {
+    // Legacy billing uses Stripe checkout flow via useSubscription
+    await legacySubscribe()
+  }
+
+  async function previewSubscribe(
+    _planSlug: string
+  ): Promise<PreviewSubscribeResponse | null> {
+    // Legacy billing doesn't support preview - returns null
+    return null
+  }
+
+  async function manageSubscription(): Promise<void> {
+    await legacyManageSubscription()
+  }
+
+  async function cancelSubscription(): Promise<void> {
+    await legacyManageSubscription()
+  }
+
+  async function fetchPlans(): Promise<void> {
+    // Legacy billing doesn't have workspace-style plans
+    // Plans are hardcoded in the UI for legacy subscriptions
+  }
+
+  async function requireActiveSubscription(): Promise<void> {
+    await fetchStatus()
+    if (!isActiveSubscription.value) {
+      legacyShowSubscriptionDialog()
+    }
+  }
+
+  function showSubscriptionDialog(): void {
+    legacyShowSubscriptionDialog()
+  }
+
+  return {
+    // State
+    isInitialized,
+    subscription,
+    balance,
+    plans,
+    currentPlanSlug,
+    isLoading,
+    error,
+    isActiveSubscription,
+
+    // Actions
+    initialize,
+    fetchStatus,
+    fetchBalance,
+    subscribe,
+    previewSubscribe,
+    manageSubscription,
+    cancelSubscription,
+    fetchPlans,
+    requireActiveSubscription,
+    showSubscriptionDialog
+  }
+}

src/composables/billing/useWorkspaceBilling.ts

@@ -0,0 +1,311 @@
+import { computed, onBeforeUnmount, ref, shallowRef } from 'vue'
+
+import { useBillingPlans } from '@/platform/cloud/subscription/composables/useBillingPlans'
+import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type {
+  BillingBalanceResponse,
+  BillingStatusResponse,
+  PreviewSubscribeResponse,
+  SubscribeResponse
+} from '@/platform/workspace/api/workspaceApi'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+import type {
+  BalanceInfo,
+  BillingActions,
+  BillingState,
+  SubscriptionInfo
+} from './types'
+
+/**
+ * Adapter for workspace-scoped billing via /billing/* endpoints.
+ * Used for team workspaces.
+ * @internal - Use useBillingContext() instead of importing directly.
+ */
+export function useWorkspaceBilling(): BillingState & BillingActions {
+  const billingPlans = useBillingPlans()
+  const workspaceStore = useTeamWorkspaceStore()
+
+  const isInitialized = ref(false)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  const statusData = shallowRef<BillingStatusResponse | null>(null)
+  const balanceData = shallowRef<BillingBalanceResponse | null>(null)
+
+  const isActiveSubscription = computed(
+    () => statusData.value?.is_active ?? false
+  )
+
+  const subscription = computed<SubscriptionInfo | null>(() => {
+    const status = statusData.value
+    if (!status) return null
+
+    return {
+      isActive: status.is_active,
+      tier: status.subscription_tier ?? null,
+      duration: status.subscription_duration ?? null,
+      planSlug: status.plan_slug ?? null,
+      renewalDate: null, // Workspace billing uses cancel_at for end date
+      endDate: status.cancel_at ?? null,
+      isCancelled: status.subscription_status === 'canceled',
+      hasFunds: status.has_funds
+    }
+  })
+
+  const balance = computed<BalanceInfo | null>(() => {
+    const data = balanceData.value
+    if (!data) return null
+
+    return {
+      amountMicros: data.amount_micros,
+      currency: data.currency,
+      effectiveBalanceMicros: data.effective_balance_micros,
+      prepaidBalanceMicros: data.prepaid_balance_micros,
+      cloudCreditBalanceMicros: data.cloud_credit_balance_micros
+    }
+  })
+
+  const plans = computed(() => billingPlans.plans.value)
+  const currentPlanSlug = computed(
+    () => statusData.value?.plan_slug ?? billingPlans.currentPlanSlug.value
+  )
+
+  const pendingCancelOpId = ref<string | null>(null)
+  let cancelPollTimeout: number | null = null
+
+  const stopCancelPolling = () => {
+    if (cancelPollTimeout !== null) {
+      window.clearTimeout(cancelPollTimeout)
+      cancelPollTimeout = null
+    }
+  }
+
+  async function pollCancelStatus(opId: string): Promise<void> {
+    stopCancelPolling()
+
+    const maxAttempts = 30
+    let attempt = 0
+    const poll = async () => {
+      if (pendingCancelOpId.value !== opId) return
+
+      try {
+        const response = await workspaceApi.getBillingOpStatus(opId)
+        if (response.status === 'succeeded') {
+          pendingCancelOpId.value = null
+          stopCancelPolling()
+          await fetchStatus()
+          workspaceStore.updateActiveWorkspace({
+            isSubscribed: false
+          })
+          return
+        }
+
+        if (response.status === 'failed') {
+          pendingCancelOpId.value = null
+          stopCancelPolling()
+          throw new Error(
+            response.error_message ?? 'Failed to cancel subscription'
+          )
+        }
+
+        attempt += 1
+        if (attempt >= maxAttempts) {
+          pendingCancelOpId.value = null
+          stopCancelPolling()
+          await fetchStatus()
+          return
+        }
+      } catch (err) {
+        pendingCancelOpId.value = null
+        stopCancelPolling()
+        throw err
+      }
+
+      cancelPollTimeout = window.setTimeout(
+        () => {
+          void poll()
+        },
+        Math.min(1000 * 2 ** attempt, 5000)
+      )
+    }
+
+    await poll()
+  }
+
+  async function initialize(): Promise<void> {
+    if (isInitialized.value) return
+
+    isLoading.value = true
+    error.value = null
+    try {
+      await Promise.all([fetchStatus(), fetchBalance(), fetchPlans()])
+      isInitialized.value = true
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to initialize billing'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function fetchStatus(): Promise<void> {
+    isLoading.value = true
+    error.value = null
+    try {
+      statusData.value = await workspaceApi.getBillingStatus()
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to fetch billing status'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function fetchBalance(): Promise<void> {
+    isLoading.value = true
+    error.value = null
+    try {
+      balanceData.value = await workspaceApi.getBillingBalance()
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to fetch balance'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function subscribe(
+    planSlug: string,
+    returnUrl?: string,
+    cancelUrl?: string
+  ): Promise<SubscribeResponse> {
+    isLoading.value = true
+    error.value = null
+    try {
+      const response = await workspaceApi.subscribe(
+        planSlug,
+        returnUrl,
+        cancelUrl
+      )
+
+      // Refresh status and balance after subscription
+      await Promise.all([fetchStatus(), fetchBalance()])
+
+      return response
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to subscribe'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function previewSubscribe(
+    planSlug: string
+  ): Promise<PreviewSubscribeResponse | null> {
+    isLoading.value = true
+    error.value = null
+    try {
+      return await workspaceApi.previewSubscribe(planSlug)
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to preview subscription'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function manageSubscription(): Promise<void> {
+    isLoading.value = true
+    error.value = null
+    try {
+      const returnUrl = window.location.href
+      const response = await workspaceApi.getPaymentPortalUrl(returnUrl)
+      if (response.url) {
+        window.open(response.url, '_blank')
+      }
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to open billing portal'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function cancelSubscription(): Promise<void> {
+    isLoading.value = true
+    error.value = null
+    try {
+      const response = await workspaceApi.cancelSubscription()
+      pendingCancelOpId.value = response.billing_op_id
+      await pollCancelStatus(response.billing_op_id)
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to cancel subscription'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function fetchPlans(): Promise<void> {
+    isLoading.value = true
+    error.value = null
+    try {
+      await billingPlans.fetchPlans()
+      if (billingPlans.error.value) {
+        error.value = billingPlans.error.value
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const subscriptionDialog = useSubscriptionDialog()
+
+  async function requireActiveSubscription(): Promise<void> {
+    await fetchStatus()
+    if (!isActiveSubscription.value) {
+      subscriptionDialog.show()
+    }
+  }
+
+  function showSubscriptionDialog(): void {
+    subscriptionDialog.show()
+  }
+
+  onBeforeUnmount(() => {
+    stopCancelPolling()
+  })
+
+  return {
+    // State
+    isInitialized,
+    subscription,
+    balance,
+    plans,
+    currentPlanSlug,
+    isLoading,
+    error,
+    isActiveSubscription,
+
+    // Actions
+    initialize,
+    fetchStatus,
+    fetchBalance,
+    subscribe,
+    previewSubscribe,
+    manageSubscription,
+    cancelSubscription,
+    fetchPlans,
+    requireActiveSubscription,
+    showSubscriptionDialog
+  }
+}

src/composables/graph/contextMenuConverter.test.ts

@@ -134,6 +134,27 @@ describe('contextMenuConverter', () => {
       // Node Info (section 4) should come before or with Color (section 4)
       expect(getIndex('Node Info')).toBeLessThanOrEqual(getIndex('Color'))
     })
+
+    it('should recognize Frame Nodes as a core menu item', () => {
+      const options: MenuOption[] = [
+        { label: 'Rename', source: 'vue' },
+        { label: 'Frame Nodes', source: 'vue' },
+        { label: 'Custom Extension', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      // Frame Nodes should appear in the core items section (before Extensions)
+      const frameNodesIndex = result.findIndex(
+        (opt) => opt.label === 'Frame Nodes'
+      )
+      const extensionsCategoryIndex = result.findIndex(
+        (opt) => opt.label === 'Extensions' && opt.type === 'category'
+      )
+
+      // Frame Nodes should come before Extensions category
+      expect(frameNodesIndex).toBeLessThan(extensionsCategoryIndex)
+    })
   })
 
   describe('convertContextMenuToOptions', () => {

src/composables/graph/contextMenuConverter.ts

@@ -44,6 +44,7 @@ const CORE_MENU_ITEMS = new Set([
   // Structure operations
   'Convert to Subgraph',
   'Frame selection',
+  'Frame Nodes',
   'Minimize Node',
   'Expand',
   'Collapse',
@@ -103,7 +104,8 @@ function isDuplicateItem(label: string, existingItems: MenuOption[]): boolean {
     shape: ['shape', 'shapes'],
     pin: ['pin', 'unpin'],
     delete: ['remove', 'delete'],
-    duplicate: ['clone', 'duplicate']
+    duplicate: ['clone', 'duplicate'],
+    frame: ['frame selection', 'frame nodes']
   }
 
   return existingItems.some((item) => {
@@ -226,6 +228,7 @@ const MENU_ORDER: string[] = [
   // Section 3: Structure operations
   'Convert to Subgraph',
   'Frame selection',
+  'Frame Nodes',
   'Minimize Node',
   'Expand',
   'Collapse',

src/composables/graph/useSelectionMenuOptions.test.ts

@@ -2,10 +2,11 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useSelectionMenuOptions } from '@/composables/graph/useSelectionMenuOptions'
 
-const subgraphMocks = vi.hoisted(() => ({
+const mocks = vi.hoisted(() => ({
   convertToSubgraph: vi.fn(),
   unpackSubgraph: vi.fn(),
   addSubgraphToLibrary: vi.fn(),
+  frameNodes: vi.fn(),
   createI18nMock: vi.fn(() => ({
     global: {
       t: vi.fn(),
@@ -19,7 +20,7 @@ vi.mock('vue-i18n', () => ({
   useI18n: () => ({
     t: (key: string) => key
   }),
-  createI18n: subgraphMocks.createI18nMock
+  createI18n: mocks.createI18nMock
 }))
 
 vi.mock('@/composables/graph/useSelectionOperations', () => ({
@@ -42,18 +43,46 @@ vi.mock('@/composables/graph/useNodeArrangement', () => ({
 
 vi.mock('@/composables/graph/useSubgraphOperations', () => ({
   useSubgraphOperations: () => ({
-    convertToSubgraph: subgraphMocks.convertToSubgraph,
-    unpackSubgraph: subgraphMocks.unpackSubgraph,
-    addSubgraphToLibrary: subgraphMocks.addSubgraphToLibrary
+    convertToSubgraph: mocks.convertToSubgraph,
+    unpackSubgraph: mocks.unpackSubgraph,
+    addSubgraphToLibrary: mocks.addSubgraphToLibrary
   })
 }))
 
 vi.mock('@/composables/graph/useFrameNodes', () => ({
   useFrameNodes: () => ({
-    frameNodes: vi.fn()
+    frameNodes: mocks.frameNodes
   })
 }))
 
+describe('useSelectionMenuOptions - multiple nodes options', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns Frame Nodes option that invokes frameNodes when called', () => {
+    const { getMultipleNodesOptions } = useSelectionMenuOptions()
+    const options = getMultipleNodesOptions()
+
+    const frameOption = options.find((opt) => opt.label === 'g.frameNodes')
+    expect(frameOption).toBeDefined()
+    expect(frameOption?.action).toBeDefined()
+
+    frameOption?.action?.()
+    expect(mocks.frameNodes).toHaveBeenCalledOnce()
+  })
+
+  it('returns Convert to Group Node option from getMultipleNodesOptions', () => {
+    const { getMultipleNodesOptions } = useSelectionMenuOptions()
+    const options = getMultipleNodesOptions()
+
+    const groupNodeOption = options.find(
+      (opt) => opt.label === 'contextMenu.Convert to Group Node'
+    )
+    expect(groupNodeOption).toBeDefined()
+  })
+})
+
 describe('useSelectionMenuOptions - subgraph options', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -68,7 +97,7 @@ describe('useSelectionMenuOptions - subgraph options', () => {
 
     expect(options).toHaveLength(1)
     expect(options[0]?.label).toBe('contextMenu.Convert to Subgraph')
-    expect(options[0]?.action).toBe(subgraphMocks.convertToSubgraph)
+    expect(options[0]?.action).toBe(mocks.convertToSubgraph)
   })
 
   it('includes convert, add to library, and unpack when subgraphs are selected', () => {
@@ -86,7 +115,7 @@ describe('useSelectionMenuOptions - subgraph options', () => {
     const convertOption = options.find(
       (option) => option.label === 'contextMenu.Convert to Subgraph'
     )
-    expect(convertOption?.action).toBe(subgraphMocks.convertToSubgraph)
+    expect(convertOption?.action).toBe(mocks.convertToSubgraph)
   })
 
   it('hides convert option when only a single subgraph is selected', () => {

src/composables/graph/useSelectionState.test.ts

@@ -87,6 +87,25 @@ describe('useSelectionState', () => {
       const { hasAnySelection } = useSelectionState()
       expect(hasAnySelection.value).toBe(true)
     })
+
+    test('hasMultipleSelection should be true when 2+ items selected', () => {
+      const canvasStore = useCanvasStore()
+      const node1 = createMockLGraphNode({ id: 1 })
+      const node2 = createMockLGraphNode({ id: 2 })
+      canvasStore.$state.selectedItems = [node1, node2]
+
+      const { hasMultipleSelection } = useSelectionState()
+      expect(hasMultipleSelection.value).toBe(true)
+    })
+
+    test('hasMultipleSelection should be false when only 1 item selected', () => {
+      const canvasStore = useCanvasStore()
+      const node1 = createMockLGraphNode({ id: 1 })
+      canvasStore.$state.selectedItems = [node1]
+
+      const { hasMultipleSelection } = useSelectionState()
+      expect(hasMultipleSelection.value).toBe(false)
+    })
   })
 
   describe('Node Type Filtering', () => {

src/composables/useCoreCommands.test.ts

@@ -107,6 +107,13 @@ vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   }))
 }))
 
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: vi.fn(() => ({
+    isActiveSubscription: { value: true },
+    showSubscriptionDialog: vi.fn()
+  }))
+}))
+
 describe('useCoreCommands', () => {
   const createMockNode = (id: number, comfyClass: string): LGraphNode => {
     const baseNode = createMockLGraphNode({ id })

src/composables/useCoreCommands.ts

@@ -17,9 +17,9 @@ import {
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
 import type { Point } from '@/lib/litegraph/src/litegraph'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { buildSupportUrl } from '@/platform/support/config'
 import { useTelemetry } from '@/platform/telemetry'
@@ -69,7 +69,7 @@ import { useDialogStore } from '@/stores/dialogStore'
 
 const moveSelectedNodesVersionAdded = '1.22.2'
 export function useCoreCommands(): ComfyCommand[] {
-  const { isActiveSubscription, showSubscriptionDialog } = useSubscription()
+  const { isActiveSubscription, showSubscriptionDialog } = useBillingContext()
   const workflowService = useWorkflowService()
   const workflowStore = useWorkflowStore()
   const dialogService = useDialogService()

src/composables/useFeatureFlags.ts

@@ -15,14 +15,12 @@ export enum ServerFeatureFlag {
   MAX_UPLOAD_SIZE = 'max_upload_size',
   MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
   MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
-  ASSET_DELETION_ENABLED = 'asset_deletion_enabled',
   ASSET_RENAME_ENABLED = 'asset_rename_enabled',
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
-  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled',
   LINEAR_TOGGLE_ENABLED = 'linear_toggle_enabled',
-  ASYNC_MODEL_UPLOAD_ENABLED = 'async_model_upload_enabled',
-  TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled'
+  TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled',
+  USER_SECRETS_ENABLED = 'user_secrets_enabled'
 }
 
 /**
@@ -40,7 +38,6 @@ export function useFeatureFlags() {
       return api.getServerFeature(ServerFeatureFlag.MANAGER_SUPPORTS_V4)
     },
     get modelUploadButtonEnabled() {
-      // Check remote config first (from /api/features), fall back to websocket feature flags
       return (
         remoteConfig.value.model_upload_button_enabled ??
         api.getServerFeature(
@@ -49,12 +46,6 @@ export function useFeatureFlags() {
         )
       )
     },
-    get assetDeletionEnabled() {
-      return (
-        remoteConfig.value.asset_deletion_enabled ??
-        api.getServerFeature(ServerFeatureFlag.ASSET_DELETION_ENABLED, false)
-      )
-    },
     get assetRenameEnabled() {
       return (
         remoteConfig.value.asset_rename_enabled ??
@@ -62,7 +53,6 @@ export function useFeatureFlags() {
       )
     },
     get privateModelsEnabled() {
-      // Check remote config first (from /api/features), fall back to websocket feature flags
       return (
         remoteConfig.value.private_models_enabled ??
         api.getServerFeature(ServerFeatureFlag.PRIVATE_MODELS_ENABLED, false)
@@ -74,30 +64,12 @@ export function useFeatureFlags() {
         api.getServerFeature(ServerFeatureFlag.ONBOARDING_SURVEY_ENABLED, true)
       )
     },
-    get huggingfaceModelImportEnabled() {
-      return (
-        remoteConfig.value.huggingface_model_import_enabled ??
-        api.getServerFeature(
-          ServerFeatureFlag.HUGGINGFACE_MODEL_IMPORT_ENABLED,
-          false
-        )
-      )
-    },
     get linearToggleEnabled() {
       return (
         remoteConfig.value.linear_toggle_enabled ??
         api.getServerFeature(ServerFeatureFlag.LINEAR_TOGGLE_ENABLED, false)
       )
     },
-    get asyncModelUploadEnabled() {
-      return (
-        remoteConfig.value.async_model_upload_enabled ??
-        api.getServerFeature(
-          ServerFeatureFlag.ASYNC_MODEL_UPLOAD_ENABLED,
-          false
-        )
-      )
-    },
     /**
      * Whether team workspaces feature is enabled.
      * IMPORTANT: Returns false until authenticated remote config is loaded.
@@ -116,6 +88,12 @@ export function useFeatureFlags() {
         remoteConfig.value.team_workspaces_enabled ??
         api.getServerFeature(ServerFeatureFlag.TEAM_WORKSPACES_ENABLED, false)
       )
+    },
+    get userSecretsEnabled() {
+      return (
+        remoteConfig.value.user_secrets_enabled ??
+        api.getServerFeature(ServerFeatureFlag.USER_SECRETS_ENABLED, false)
+      )
     }
   })
 

src/composables/useTemplateFiltering.ts

@@ -1,4 +1,4 @@
-import { refThrottled, watchDebounced } from '@vueuse/core'
+import { refDebounced, watchDebounced } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 import { computed, ref, watch } from 'vue'
@@ -119,7 +119,7 @@ export function useTemplateFiltering(
     )
   })
 
-  const debouncedSearchQuery = refThrottled(searchQuery, 50)
+  const debouncedSearchQuery = refDebounced(searchQuery, 150)
 
   const filteredBySearch = computed(() => {
     if (!debouncedSearchQuery.value.trim()) {

src/core/graph/widgets/dynamicWidgets.ts

@@ -1,5 +1,4 @@
 import { remove } from 'es-toolkit'
-import { shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type {
@@ -345,7 +344,6 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   requestAnimationFrame(() => {
     const input = node.inputs[index]
     if (!input) return
-    node.inputs[index] = shallowReactive(input)
     node.onConnectionsChange?.(
       LiteGraph.INPUT,
       index,

src/extensions/core/cloudRemoteConfig.ts

@@ -1,7 +1,7 @@
 import { watchDebounced } from '@vueuse/core'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
 import { useExtensionService } from '@/services/extensionService'
 
@@ -14,17 +14,18 @@ useExtensionService().registerExtension({
 
   setup: async () => {
     const { isLoggedIn } = useCurrentUser()
-    const { isActiveSubscription } = useSubscription()
+    const { isActiveSubscription } = useBillingContext()
 
-    // Refresh config when subscription status changes
-    // Initial auth-aware refresh happens in WorkspaceAuthGate before app renders
+    // Refresh config when auth or subscription status changes
+    // Primary auth refresh is handled by WorkspaceAuthGate on mount
+    // This watcher handles subscription changes and acts as a backup for auth
     watchDebounced(
       [isLoggedIn, isActiveSubscription],
       () => {
         if (!isLoggedIn.value) return
         void refreshRemoteConfig()
       },
-      { debounce: 256 }
+      { debounce: 256, immediate: true }
     )
 
     // Poll for config updates every 10 minutes (with auth)

src/extensions/core/cloudSubscription.ts

@@ -1,7 +1,7 @@
 import { watch } from 'vue'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useExtensionService } from '@/services/extensionService'
 
 /**
@@ -12,7 +12,7 @@ useExtensionService().registerExtension({
 
   setup: async () => {
     const { isLoggedIn } = useCurrentUser()
-    const { requireActiveSubscription } = useSubscription()
+    const { requireActiveSubscription } = useBillingContext()
 
     const checkSubscriptionStatus = () => {
       if (!isLoggedIn.value) return

src/extensions/core/index.ts

@@ -13,7 +13,9 @@ import './imageCompare'
 import './imageCrop'
 import './load3d'
 import './maskeditor'
-import './nodeTemplates'
+if (!isCloud) {
+  await import('./nodeTemplates')
+}
 import './noteNode'
 import './previewAny'
 import './rerouteNode'

src/extensions/core/load3d/Load3d.ts

@@ -55,6 +55,7 @@ class Load3d {
   private rightMouseMoved: boolean = false
   private readonly dragThreshold: number = 5
   private contextMenuAbortController: AbortController | null = null
+  private resizeObserver: ResizeObserver | null = null
 
   constructor(container: Element | HTMLElement, options: Load3DOptions = {}) {
     this.clock = new THREE.Clock()
@@ -145,6 +146,7 @@ class Load3d {
     this.STATUS_MOUSE_ON_VIEWER = false
 
     this.initContextMenu()
+    this.initResizeObserver(container)
 
     this.handleResize()
     this.startAnimation()
@@ -154,6 +156,14 @@ class Load3d {
     }, 100)
   }
 
+  private initResizeObserver(container: Element | HTMLElement): void {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleResize()
+      this.forceRender()
+    })
+    this.resizeObserver.observe(container)
+  }
+
   /**
    * Initialize context menu on the Three.js canvas
    * Detects right-click vs right-drag to show menu only on click
@@ -809,6 +819,11 @@ class Load3d {
   }
 
   public remove(): void {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+
     if (this.contextMenuAbortController) {
       this.contextMenuAbortController.abort()
       this.contextMenuAbortController = null

src/lib/litegraph/src/contextMenuCompat.test.ts

@@ -195,6 +195,42 @@ describe('contextMenuCompat', () => {
         expect.any(Error)
       )
     })
+
+    it('should handle multiple items with undefined content correctly', () => {
+      // Setup base method with items that have undefined content
+      LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+        return [
+          { content: undefined, title: 'Separator 1' },
+          { content: undefined, title: 'Separator 2' },
+          { content: 'Item 1', callback: () => {} }
+        ]
+      }
+
+      legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+      // Monkey-patch to add an item with undefined content
+      const original = LGraphCanvas.prototype.getCanvasMenuOptions
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original.apply(this)
+          items.push({ content: undefined, title: 'Separator 3' })
+          return items
+        }
+
+      // Extract legacy items
+      const legacyItems = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      // Should extract only the newly added item with undefined content
+      // (not collapse with existing undefined content items)
+      expect(legacyItems).toHaveLength(1)
+      expect(legacyItems[0]).toMatchObject({
+        content: undefined,
+        title: 'Separator 3'
+      })
+    })
   })
 
   describe('integration', () => {

src/lib/litegraph/src/contextMenuCompat.ts

@@ -152,19 +152,51 @@ class LegacyMenuCompat {
       const patchedItems = methodToCall.apply(context, args) as
         | (IContextMenuValue | null)[]
         | undefined
-      if (!patchedItems) return []
+      if (!patchedItems) {
+        return []
+      }
+      // Use content-based diff to detect additions (not reference-based)
+      // Create composite keys from multiple properties to handle undefined content
+      const createItemKey = (item: IContextMenuValue): string => {
+        const parts = [
+          item.content ?? '',
+          item.title ?? '',
+          item.className ?? '',
+          item.property ?? '',
+          item.type ?? ''
+        ]
+        return parts.join('|')
+      }
 
-      // Use set-based diff to detect additions by reference
-      const originalSet = new Set<IContextMenuValue | null>(originalItems)
-      const addedItems = patchedItems.filter((item) => !originalSet.has(item))
+      const originalKeys = new Set(
+        originalItems
+          .filter(
+            (item): item is IContextMenuValue =>
+              item !== null && typeof item === 'object' && 'content' in item
+          )
+          .map(createItemKey)
+      )
+      const addedItems = patchedItems.filter((item) => {
+        if (item === null) return false
+        if (typeof item !== 'object' || !('content' in item)) return false
+        return !originalKeys.has(createItemKey(item))
+      })
 
       // Warn if items were removed (patched has fewer original items than expected)
-      const retainedOriginalCount = patchedItems.filter((item) =>
-        originalSet.has(item)
+      const patchedKeys = new Set(
+        patchedItems
+          .filter(
+            (item): item is IContextMenuValue =>
+              item !== null && typeof item === 'object' && 'content' in item
+          )
+          .map(createItemKey)
+      )
+      const removedCount = [...originalKeys].filter(
+        (key) => !patchedKeys.has(key)
       ).length
-      if (retainedOriginalCount < originalItems.length) {
+      if (removedCount > 0) {
         console.warn(
-          `[Context Menu Compat] Monkey patch for ${methodName} removed ${originalItems.length - retainedOriginalCount} original menu item(s). ` +
+          `[Context Menu Compat] Monkey patch for ${methodName} removed ${removedCount} original menu item(s). ` +
             `This may cause unexpected behavior.`
         )
       }

src/locales/en/main.json

@@ -993,7 +993,8 @@
     "showAll": "Show all",
     "hidden": "Hidden / nested parameters",
     "hideAll": "Hide all",
-    "showRecommended": "Show recommended widgets"
+    "showRecommended": "Show recommended widgets",
+    "cannotDeleteGlobal": "Cannot delete installed blueprints"
   },
   "electronFileDownload": {
     "inProgress": "In Progress",
@@ -1303,7 +1304,8 @@
     "Execution": "Execution",
     "PLY": "PLY",
     "Workspace": "Workspace",
-    "Other": "Other"
+    "Other": "Other",
+    "Secrets": "Secrets"
   },
   "serverConfigItems": {
     "listen": {
@@ -1922,13 +1924,7 @@
       "auth/cancelled-popup-request": "Sign-in was cancelled. Please try again."
     },
     "deleteAccount": {
-      "deleteAccount": "Delete Account",
-      "confirmTitle": "Delete Account",
-      "confirmMessage": "Are you sure you want to delete your account? This action cannot be undone and will permanently remove all your data.",
-      "confirm": "Delete Account",
-      "cancel": "Cancel",
-      "success": "Account Deleted",
-      "successDetail": "Your account has been successfully deleted."
+      "contactSupport": "To delete your account, please contact {email}"
     },
     "reauthRequired": {
       "title": "Re-authentication Required",
@@ -1987,6 +1983,7 @@
       "videosEstimate": "~{count} videos*",
       "templateNote": "*Generated with Wan Fun Control template",
       "buy": "Buy",
+      "purchaseSuccess": "Credits added successfully!",
       "purchaseError": "Purchase Failed",
       "purchaseErrorDetail": "Failed to purchase credits: {error}",
       "unknownError": "An unknown error occurred",
@@ -2019,19 +2016,49 @@
       "tooltip": "We've unified payments across Comfy. Everything now runs on Comfy Credits:\n- Partner Nodes (formerly API nodes)\n- Cloud workflows\n\nYour existing Partner node balance has been converted into credits."
     }
   },
+  "billingOperation": {
+    "subscriptionProcessing": "Processing payment — setting up your workspace...",
+    "subscriptionSuccess": "Subscription updated successfully",
+    "subscriptionFailed": "Subscription update failed",
+    "subscriptionTimeout": "Subscription verification timed out",
+    "topupProcessing": "Processing payment — adding credits...",
+    "topupSuccess": "Credits added successfully",
+    "topupFailed": "Top-up failed",
+    "topupTimeout": "Top-up verification timed out"
+  },
   "subscription": {
+    "chooseBestPlanWorkspace": "Choose the best plan for your workspace",
     "title": "Subscription",
     "titleUnsubscribed": "Subscribe to Comfy Cloud",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Comfy Cloud Logo",
     "beta": "BETA",
     "perMonth": "/ month",
+    "member": "member",
     "usdPerMonth": "USD / mo",
+    "usdPerMonthPerMember": "USD / mo / member",
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
     "managePayment": "Manage Payment",
     "cancelSubscription": "Cancel Subscription",
+    "canceled": "Canceled",
+    "resubscribe": "Resubscribe",
+    "resubscribeTo": "Resubscribe to {plan}",
+    "resubscribeSuccess": "Subscription reactivated successfully",
+    "canceledCard": {
+      "title": "Your subscription has been canceled",
+      "description": "You won't be charged again. Your features remain active until {date}."
+    },
+    "cancelSuccess": "Subscription cancelled successfully",
+    "cancelDialog": {
+      "title": "Cancel subscription",
+      "description": "Your access continues until {date}. You won't be charged again, and your workspace and credits will be preserved. You can resubscribe anytime.",
+      "endOfBillingPeriod": "end of billing period",
+      "keepSubscription": "Keep subscription",
+      "confirmCancel": "Cancel subscription",
+      "failed": "Failed to cancel subscription"
+    },
     "partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
     "partnerNodesDescription": "For running commercial/proprietary models",
     "totalCredits": "Total credits",
@@ -2080,7 +2107,10 @@
     "required": {
       "title": "Subscribe to",
       "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
-      "subscribe": "Subscribe"
+      "subscribe": "Subscribe",
+      "pollingSuccess": "Subscription activated successfully!",
+      "pollingFailed": "Subscription activation failed",
+      "pollingTimeout": "Timed out waiting for subscription. Please refresh and try again."
     },
     "subscribeToRun": "Subscribe",
     "subscribeToRunFull": "Subscribe to Run",
@@ -2090,6 +2120,7 @@
     "subscriptionRequiredMessage": "A subscription is required for members to run workflows on Cloud",
     "contactOwnerToSubscribe": "Contact the workspace owner to subscribe",
     "description": "Choose the best plan for you",
+    "descriptionWorkspace": "Choose the best plan for your workspace",
     "haveQuestions": "Have questions or wondering about enterprise?",
     "contactUs": "Contact us",
     "viewEnterprise": "View enterprise",
@@ -2101,7 +2132,13 @@
     "currentPlan": "Current Plan",
     "subscribeTo": "Subscribe to {plan}",
     "monthlyCreditsLabel": "Monthly credits",
+    "monthlyCreditsPerMemberLabel": "Monthly credits / member",
+    "maxMembersLabel": "Max. members",
     "yearlyCreditsLabel": "Total yearly credits",
+    "membersLabel": "Up to {count} members",
+    "nextMonthInvoice": "Next month invoice",
+    "invoiceHistory": "Invoice history",
+    "memberCount": "{count} member | {count} members",
     "maxDurationLabel": "Max run duration",
     "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
     "addCreditsLabel": "Add more credits whenever",
@@ -2123,6 +2160,27 @@
     "billingComingSoon": {
       "title": "Coming Soon",
       "message": "Team billing is coming soon. You'll be able to subscribe to a plan for your workspace with per-seat pricing. Stay tuned for updates."
+    },
+    "preview": {
+      "confirmPayment": "Confirm your payment",
+      "confirmPlanChange": "Confirm your plan change",
+      "startingToday": "Starting today",
+      "starting": "Starting {date}",
+      "ends": "Ends {date}",
+      "eachMonthCreditsRefill": "Each month credits refill to",
+      "perMember": "/ member",
+      "showMoreFeatures": "Show more features",
+      "hideFeatures": "Hide features",
+      "proratedRefund": "Prorated refund for {plan}",
+      "proratedCharge": "Prorated charge for {plan}",
+      "totalDueToday": "Total due today",
+      "nextPaymentDue": "Next payment due {date}. Cancel anytime.",
+      "termsAgreement": "By continuing, you agree to Comfy Org's {terms} and {privacy}.",
+      "terms": "Terms",
+      "privacyPolicy": "Privacy Policy",
+      "addCreditCard": "Add credit card",
+      "confirm": "Confirm",
+      "backToAllPlans": "Back to all plans"
     }
   },
   "userSettings": {
@@ -2491,13 +2549,34 @@
     "civitaiLinkPlaceholder": "Paste link here",
     "confirmModelDetails": "Confirm Model Details",
     "connectionError": "Please check your connection and try again",
+    "errorAccessForbidden": "Access to this resource is forbidden.",
+    "errorConnectionRefused": "Unable to connect to the source. Please try again later.",
+    "errorDownloadCancelled": "Download was cancelled.",
     "errorFileTooLarge": "File exceeds the maximum allowed size limit",
     "errorFormatNotAllowed": "Only SafeTensor format is allowed",
+    "errorHttpError": "An error occurred while fetching metadata.",
+    "errorInternalError": "An unexpected error occurred. Please try again.",
+    "errorInvalidHost": "The source URL hostname could not be resolved.",
+    "errorInvalidUrl": "Please provide a URL.",
+    "errorInvalidUrlFormat": "The URL format is invalid. Please check and try again.",
+    "errorMetadataFetchFailed": "Failed to fetch file information from the source.",
     "errorModelTypeNotSupported": "This model type is not supported",
+    "errorNetworkError": "A network error occurred. Please check your connection and try again.",
+    "errorNetworkTimeout": "Request timed out. Please try again.",
+    "errorRateLimited": "Too many requests. Please try again in a few minutes.",
+    "errorRequestCancelled": "Request was cancelled.",
+    "errorResourceNotFound": "The file was not found. Please check the URL and try again.",
+    "errorServiceUnavailable": "Service temporarily unavailable. Please try again later.",
+    "errorSourceServerError": "The source server is experiencing issues. Please try again later.",
+    "errorUnauthorized": "Please sign in to continue.",
+    "errorUnauthorizedSource": "This resource requires authentication. Please add your API token in settings.",
     "errorUnknown": "An unexpected error occurred",
     "errorUnsafePickleScan": "CivitAI detected potentially unsafe code in this file",
     "errorUnsafeVirusScan": "CivitAI detected malware or suspicious content in this file",
+    "errorUnsupportedSource": "This URL is not supported. Only Hugging Face and Civitai URLs are allowed.",
     "errorUploadFailed": "Failed to import asset. Please try again.",
+    "errorUserTokenAccessDenied": "Your API token does not have access to this resource. Please check your token permissions.",
+    "errorUserTokenInvalid": "Your stored API token is invalid or expired. Please update your token in settings.",
     "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
     "fileFormats": "File formats",
     "fileName": "File Name",
@@ -2549,6 +2628,8 @@
     "upgradeToUnlockFeature": "Upgrade to unlock this feature",
     "upload": "Import",
     "uploadFailed": "Import failed",
+    "apiKeyHint": "Importing private or gated models? {link}.",
+    "apiKeyHintLink": "Add your API keys in Settings",
     "uploadingModel": "Importing model...",
     "uploadModel": "Import",
     "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
@@ -2824,5 +2905,45 @@
       "label": "Preview Version",
       "tooltip": "You are using a nightly version of ComfyUI. Please use the feedback button to share your thoughts about these features."
     }
+  },
+  "nodeFilters": {
+    "hideDeprecated": "Hide Deprecated Nodes",
+    "hideDeprecatedDescription": "Hides nodes marked as deprecated unless explicitly enabled",
+    "hideExperimental": "Hide Experimental Nodes",
+    "hideExperimentalDescription": "Hides nodes marked as experimental unless explicitly enabled",
+    "hideDevOnly": "Hide Dev-Only Nodes",
+    "hideDevOnlyDescription": "Hides nodes marked as dev-only unless dev mode is enabled",
+    "hideSubgraph": "Hide Subgraph Nodes",
+    "hideSubgraphDescription": "Temporarily hides subgraph nodes from node library and search"
+  },
+  "secrets": {
+    "title": "API Keys & Secrets",
+    "description": "Secrets are encrypted and used for sensitive data like API keys.",
+    "descriptionUsage": "Store your tokens here to enable downloading private and gated models from supported providers.",
+    "modelProviders": "Model Providers",
+    "addSecret": "Add Secret",
+    "editSecret": "Edit Secret",
+    "noSecrets": "No secrets stored. Add your first API key to get started.",
+    "name": "Name",
+    "namePlaceholder": "e.g., My API Key",
+    "provider": "Provider",
+    "providerHint": "Optional. Selecting a provider enables automatic token usage.",
+    "secretValue": "Secret Value",
+    "secretValuePlaceholder": "Enter your API key",
+    "secretValuePlaceholderEdit": "Enter new value to change",
+    "secretValueHint": "This value will be encrypted and cannot be viewed again.",
+    "secretValueHintEdit": "Leave blank to keep the current value.",
+    "createdAt": "Created {date}",
+    "lastUsed": "Last used {date}",
+    "deleteConfirmTitle": "Delete Secret",
+    "deleteConfirmMessage": "Are you sure you want to delete \"{name}\"? This action cannot be undone.",
+    "errors": {
+      "nameRequired": "Name is required",
+      "nameTooLong": "Name must be 255 characters or less",
+      "providerRequired": "Provider is required",
+      "secretValueRequired": "Secret value is required",
+      "duplicateName": "A secret with this name already exists",
+      "duplicateProvider": "A secret for this provider already exists"
+    }
   }
 }

src/main.ts

@@ -25,12 +25,15 @@ import { i18n } from './i18n'
  * CRITICAL: Load remote config FIRST for cloud builds to ensure
  * window.__CONFIG__is available for all modules during initialization
  */
-import { isCloud } from '@/platform/distribution/types'
+const isCloud = __DISTRIBUTION__ === 'cloud'
 
 if (isCloud) {
   const { refreshRemoteConfig } =
     await import('@/platform/remoteConfig/refreshRemoteConfig')
   await refreshRemoteConfig({ useAuth: false })
+
+  const { initTelemetry } = await import('@/platform/telemetry/initTelemetry')
+  await initTelemetry()
 }
 
 const ComfyUIPreset = definePreset(Aura, {

src/platform/assets/components/AssetCard.stories.ts

@@ -10,7 +10,7 @@ const createAssetData = (
   overrides: Partial<AssetDisplayItem> = {}
 ): AssetDisplayItem => ({
   ...baseAsset,
-  description:
+  secondaryText:
     'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
   badges: [
     { label: 'checkpoints', type: 'type' },
@@ -131,20 +131,21 @@ export const EdgeCases: Story = {
         // Default case for comparison
         createAssetData({
           name: 'Complete Data',
-          description: 'Asset with all data present for comparison'
+          secondaryText: 'Asset with all data present for comparison'
         }),
         // No badges
         createAssetData({
           id: 'no-badges',
           name: 'No Badges',
-          description: 'Testing graceful handling when badges are not provided',
+          secondaryText:
+            'Testing graceful handling when badges are not provided',
           badges: []
         }),
         // No stars
         createAssetData({
           id: 'no-stars',
           name: 'No Stars',
-          description: 'Testing missing stars data gracefully',
+          secondaryText: 'Testing missing stars data gracefully',
           stats: {
             downloadCount: '1.8k',
             formattedDate: '3/15/25'
@@ -154,7 +155,7 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-downloads',
           name: 'No Downloads',
-          description: 'Testing missing downloads data gracefully',
+          secondaryText: 'Testing missing downloads data gracefully',
           stats: {
             stars: '4.2k',
             formattedDate: '3/15/25'
@@ -164,7 +165,7 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-date',
           name: 'No Date',
-          description: 'Testing missing date data gracefully',
+          secondaryText: 'Testing missing date data gracefully',
           stats: {
             stars: '4.2k',
             downloadCount: '1.8k'
@@ -174,21 +175,21 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-stats',
           name: 'No Stats',
-          description: 'Testing when all stats are missing',
+          secondaryText: 'Testing when all stats are missing',
           stats: {}
         }),
-        // Long description
+        // Long secondaryText
         createAssetData({
           id: 'long-desc',
           name: 'Long Description',
-          description:
+          secondaryText:
             'This is a very long description that should demonstrate how the component handles text overflow and truncation with ellipsis. The description continues with even more content to ensure we test the 2-line clamp behavior properly and see how it renders when there is significantly more text than can fit in the allocated space.'
         }),
         // Minimal data
         createAssetData({
           id: 'minimal',
           name: 'Minimal',
-          description: 'Basic model',
+          secondaryText: 'Basic model',
           tags: ['models'],
           badges: [],
           stats: {}

src/platform/assets/components/AssetCard.vue

@@ -54,7 +54,6 @@
         >
           <template #default>
             <Button
-              v-if="flags.assetDeletionEnabled"
               variant="secondary"
               size="md"
               class="justify-start"
@@ -82,14 +81,14 @@
       </h3>
       <p
         :id="descId"
-        v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
+        v-tooltip.top="{ value: asset.secondaryText, showDelay: tooltipDelay }"
         :class="
           cn(
             'm-0 text-sm line-clamp-2 [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
           )
         "
       >
-        {{ asset.description }}
+        {{ asset.secondaryText }}
       </p>
       <div class="flex items-center justify-between gap-2 mt-auto">
         <div class="flex gap-3 text-xs text-muted-foreground">
@@ -141,7 +140,6 @@ import MoreButton from '@/components/button/MoreButton.vue'
 import StatusBadge from '@/components/common/StatusBadge.vue'
 import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import Button from '@/components/ui/button/Button.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { assetService } from '@/platform/assets/services/assetService'
@@ -167,7 +165,6 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const settingStore = useSettingStore()
 const { closeDialog } = useDialogStore()
-const { flags } = useFeatureFlags()
 const { isDownloadedThisSession, acknowledgeAsset } = useAssetDownloadStore()
 
 const dropdownMenuButton = useTemplateRef<InstanceType<typeof MoreButton>>(
@@ -181,11 +178,7 @@ const displayName = computed(() => getAssetDisplayName(asset))
 
 const isNewlyImported = computed(() => isDownloadedThisSession(asset.id))
 
-const showAssetOptions = computed(
-  () =>
-    (flags.assetDeletionEnabled || flags.assetRenameEnabled) &&
-    !(asset.is_immutable ?? true)
-)
+const showAssetOptions = computed(() => !(asset.is_immutable ?? true))
 
 const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')

src/platform/assets/components/UploadModelDialog.vue

@@ -6,12 +6,7 @@
     <div class="min-h-0 flex-auto basis-0 overflow-y-auto">
       <!-- Step 1: Enter URL -->
       <UploadModelUrlInput
-        v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
-        v-model="wizardData.url"
-        :error="uploadError"
-      />
-      <UploadModelUrlInputCivitai
-        v-else-if="currentStep === 1"
+        v-if="currentStep === 1"
         v-model="wizardData.url"
         :error="uploadError"
       />
@@ -56,17 +51,14 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import UploadModelConfirmation from '@/platform/assets/components/UploadModelConfirmation.vue'
 import UploadModelFooter from '@/platform/assets/components/UploadModelFooter.vue'
 import UploadModelProgress from '@/platform/assets/components/UploadModelProgress.vue'
 import UploadModelUrlInput from '@/platform/assets/components/UploadModelUrlInput.vue'
-import UploadModelUrlInputCivitai from '@/platform/assets/components/UploadModelUrlInputCivitai.vue'
 import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
 import { useUploadModelWizard } from '@/platform/assets/composables/useUploadModelWizard'
 import { useDialogStore } from '@/stores/dialogStore'
 
-const { flags } = useFeatureFlags()
 const dialogStore = useDialogStore()
 const { modelTypes, fetchModelTypes } = useModelTypes()
 

src/platform/assets/components/UploadModelDialogHeader.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="flex items-center gap-2 p-4 font-bold">
-    <img
-      v-if="!flags.huggingfaceModelImportEnabled"
-      src="/assets/images/civitai.svg"
-      class="size-4"
-    />
-    <span>{{ $t(titleKey) }}</span>
+    <span>{{ $t('assetBrowser.uploadModelGeneric') }}</span>
     <span
       class="rounded-full bg-white px-1.5 py-0 text-xxs font-inter font-semibold uppercase text-black"
     >
@@ -13,17 +8,3 @@
     </span>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-
-const { flags } = useFeatureFlags()
-
-const titleKey = computed(() => {
-  return flags.huggingfaceModelImportEnabled
-    ? 'assetBrowser.uploadModelGeneric'
-    : 'assetBrowser.uploadModelFromCivitai'
-})
-</script>

src/platform/assets/components/UploadModelFooter.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="flex justify-end gap-2 w-full">
-    <div
-      v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
-      class="mr-auto flex items-center gap-2"
-    >
+    <div v-if="currentStep === 1" class="mr-auto flex items-center gap-2">
       <i class="icon-[lucide--circle-question-mark] text-muted-foreground" />
       <Button
         variant="muted-textonly"
@@ -22,17 +19,6 @@
         {{ $t('assetBrowser.providerHuggingFace') }}
       </Button>
     </div>
-    <Button
-      v-else-if="currentStep === 1"
-      variant="muted-textonly"
-      size="lg"
-      class="mr-auto underline"
-      data-attr="upload-model-step1-help-link"
-      @click="showCivitaiHelp = true"
-    >
-      <i class="icon-[lucide--circle-question-mark]" />
-      <span>{{ $t('assetBrowser.uploadModelHowDoIFindThis') }}</span>
-    </Button>
     <Button
       v-if="currentStep === 1"
       variant="muted-textonly"
@@ -124,11 +110,8 @@
 import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import VideoHelpDialog from '@/platform/assets/components/VideoHelpDialog.vue'
 
-const { flags } = useFeatureFlags()
-
 const showCivitaiHelp = ref(false)
 const showHuggingFaceHelp = ref(false)
 

src/platform/assets/components/UploadModelProgress.vue

@@ -83,7 +83,7 @@
 <script setup lang="ts">
 import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
 
-const { result } = defineProps<{
+defineProps<{
   result: 'processing' | 'success' | 'error'
   error?: string
   metadata?: AssetMetadata

src/platform/assets/components/UploadModelUpgradeModal.vue

@@ -12,13 +12,13 @@
 </template>
 
 <script setup lang="ts">
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import UploadModelUpgradeModalBody from '@/platform/assets/components/UploadModelUpgradeModalBody.vue'
 import UploadModelUpgradeModalFooter from '@/platform/assets/components/UploadModelUpgradeModalFooter.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const dialogStore = useDialogStore()
-const { showSubscriptionDialog } = useSubscription()
+const { showSubscriptionDialog } = useBillingContext()
 
 function handleClose() {
   dialogStore.closeDialog({ key: 'upload-model-upgrade' })

src/platform/assets/components/UploadModelUrlInput.vue

@@ -45,36 +45,37 @@
       </div>
 
       <div class="flex flex-col gap-2">
-        <div class="relative">
-          <InputText
-            v-model="url"
-            autofocus
-            :placeholder="$t('assetBrowser.genericLinkPlaceholder')"
-            class="w-full border-0 bg-secondary-background p-4 pr-10"
-            data-attr="upload-model-step1-url-input"
-          />
-          <i
-            v-if="isValidUrl"
-            class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
-          />
-        </div>
+        <InputText
+          v-model="url"
+          autofocus
+          :placeholder="$t('assetBrowser.genericLinkPlaceholder')"
+          class="w-full border-0 bg-secondary-background p-4"
+          data-attr="upload-model-step1-url-input"
+        />
         <p v-if="error" class="text-sm text-error">
           {{ error }}
         </p>
-        <p v-else-if="!flags.asyncModelUploadEnabled" class="text-foreground">
-          <i18n-t keypath="assetBrowser.maxFileSize" tag="span">
-            <template #size>
-              <span class="font-bold italic">{{
-                $t('assetBrowser.maxFileSizeValue')
-              }}</span>
-            </template>
-          </i18n-t>
-        </p>
       </div>
     </div>
 
-    <div class="text-sm text-muted">
-      {{ $t('assetBrowser.uploadModelHelpFooterText') }}
+    <div class="flex flex-col gap-6 text-sm text-muted-foreground">
+      <div v-if="showSecretsHint">
+        <i18n-t keypath="assetBrowser.apiKeyHint" tag="span">
+          <template #link>
+            <Button
+              variant="textonly"
+              size="unset"
+              class="text-muted-foreground underline p-0"
+              @click="openSecretsSettings"
+            >
+              {{ $t('assetBrowser.apiKeyHintLink') }}
+            </Button>
+          </template>
+        </i18n-t>
+      </div>
+      <div>
+        {{ $t('assetBrowser.uploadModelHelpFooterText') }}
+      </div>
     </div>
   </div>
 </template>
@@ -83,12 +84,18 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
-import { huggingfaceImportSource } from '@/platform/assets/importSources/huggingfaceImportSource'
-import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
+import { useDialogService } from '@/services/dialogService'
 
 const { flags } = useFeatureFlags()
+const dialogService = useDialogService()
+
+const showSecretsHint = computed(() => flags.userSecretsEnabled)
+
+function openSecretsSettings() {
+  dialogService.showSettingsDialog('secrets')
+}
 
 const props = defineProps<{
   modelValue: string
@@ -104,14 +111,6 @@ const url = computed({
   set: (value: string) => emit('update:modelValue', value)
 })
 
-const importSources = [civitaiImportSource, huggingfaceImportSource]
-
-const isValidUrl = computed(() => {
-  const trimmedUrl = url.value.trim()
-  if (!trimmedUrl) return false
-  return importSources.some((source) => validateSourceUrl(trimmedUrl, source))
-})
-
 const civitaiIcon = '/assets/images/civitai.svg'
 const civitaiUrl = 'https://civitai.com/models'
 const huggingFaceIcon = '/assets/images/hf-logo.svg'

src/platform/assets/components/UploadModelUrlInputCivitai.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="flex flex-col gap-6 text-sm text-muted-foreground">
-    <div class="flex flex-col gap-2">
-      <p class="m-0">
-        {{ $t('assetBrowser.uploadModelDescription1') }}
-      </p>
-      <ul class="list-disc space-y-1 pl-5 mt-0">
-        <li>
-          <i18n-t keypath="assetBrowser.uploadModelDescription2" tag="span">
-            <template #link>
-              <a
-                href="https://civitai.com/models"
-                target="_blank"
-                class="text-muted-foreground underline"
-              >
-                {{ $t('assetBrowser.uploadModelDescription2Link') }}
-              </a>
-            </template>
-          </i18n-t>
-        </li>
-        <li v-if="!flags.asyncModelUploadEnabled">
-          <i18n-t keypath="assetBrowser.uploadModelDescription3" tag="span">
-            <template #size>
-              <span class="font-bold italic">{{
-                $t('assetBrowser.maxFileSizeValue')
-              }}</span>
-            </template>
-          </i18n-t>
-        </li>
-      </ul>
-    </div>
-
-    <div class="flex flex-col gap-2">
-      <i18n-t keypath="assetBrowser.civitaiLinkLabel" tag="label" class="mb-0">
-        <template #download>
-          <span class="font-bold italic">{{
-            $t('assetBrowser.civitaiLinkLabelDownload')
-          }}</span>
-        </template>
-      </i18n-t>
-      <div class="relative">
-        <InputText
-          v-model="url"
-          autofocus
-          :placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
-          class="w-full border-0 bg-secondary-background p-4 pr-10"
-          data-attr="upload-model-step1-url-input"
-        />
-        <i
-          v-if="isValidUrl"
-          class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
-        />
-      </div>
-      <p v-if="error" class="text-sm text-error">
-        {{ error }}
-      </p>
-      <i18n-t
-        v-else
-        keypath="assetBrowser.civitaiLinkExample"
-        tag="p"
-        class="text-sm"
-      >
-        <template #example>
-          <strong>{{ $t('assetBrowser.civitaiLinkExampleStrong') }}</strong>
-        </template>
-        <template #link>
-          <a
-            href="https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295"
-            target="_blank"
-            class="text-muted-foreground underline"
-          >
-            {{ $t('assetBrowser.civitaiLinkExampleUrl') }}
-          </a>
-        </template>
-      </i18n-t>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import InputText from 'primevue/inputtext'
-import { computed } from 'vue'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
-import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
-
-const { flags } = useFeatureFlags()
-
-defineProps<{
-  error?: string
-}>()
-
-const url = defineModel<string>({ required: true })
-
-const isValidUrl = computed(() => {
-  const trimmedUrl = url.value.trim()
-  if (!trimmedUrl) return false
-  return validateSourceUrl(trimmedUrl, civitaiImportSource)
-})
-</script>

src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts

@@ -34,7 +34,7 @@ describe('ModelInfoPanel', () => {
     created_at: '2024-01-01T00:00:00Z',
     updated_at: '2024-01-01T00:00:00Z',
     last_access_time: '2024-01-01T00:00:00Z',
-    description: 'A test model description',
+    secondaryText: 'A test model description',
     badges: [],
     stats: {},
     ...overrides

src/platform/assets/composables/useAssetBrowser.test.ts

@@ -84,14 +84,14 @@ describe('useAssetBrowser', () => {
       expect(result.name).toBe(apiAsset.name)
 
       // Adds display properties
-      expect(result.description).toBe('Test model')
+      expect(result.secondaryText).toBe('test-asset.safetensors')
       expect(result.badges).toContainEqual({
         label: 'checkpoints',
         type: 'type'
       })
     })
 
-    it('creates fallback description from tags when metadata missing', () => {
+    it('creates secondaryText from filename when metadata missing', () => {
       const apiAsset = createApiAsset({
         tags: ['models', 'loras'],
         user_metadata: undefined
@@ -100,7 +100,7 @@ describe('useAssetBrowser', () => {
       const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
       const result = filteredAssets.value[0]
 
-      expect(result.description).toBe('loras model')
+      expect(result.secondaryText).toBe('test-asset.safetensors')
     })
 
     it('removes category prefix from badge labels', () => {

src/platform/assets/composables/useAssetBrowser.ts

@@ -9,8 +9,8 @@ import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vu
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import {
   getAssetBaseModels,
-  getAssetDescription,
-  getAssetDisplayName
+  getAssetDisplayName,
+  getAssetFilename
 } from '@/platform/assets/utils/assetMetadataUtils'
 import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
@@ -70,7 +70,7 @@ type AssetBadge = {
 
 // Display properties for transformed assets
 export interface AssetDisplayItem extends AssetItem {
-  description: string
+  secondaryText: string
   badges: AssetBadge[]
   stats: {
     formattedDate?: string
@@ -116,15 +116,11 @@ export function useAssetBrowser(
 
   // Transform API asset to display asset
   function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
-    // Extract description from metadata or create from tags
-    const typeTag = asset.tags.find((tag) => tag !== 'models')
-    const description =
-      getAssetDescription(asset) ||
-      `${typeTag || t('assetBrowser.unknown')} model`
+    const secondaryText = getAssetFilename(asset)
 
-    // Create badges from tags and metadata
     const badges: AssetBadge[] = []
 
+    const typeTag = asset.tags.find((tag) => tag !== 'models')
     // Type badge from non-root tag
     if (typeTag) {
       // Remove category prefix from badge label (e.g. "checkpoint/model" → "model")
@@ -152,7 +148,7 @@ export function useAssetBrowser(
 
     return {
       ...asset,
-      description,
+      secondaryText,
       badges,
       stats
     }

src/platform/assets/composables/useMediaAssetActions.ts

@@ -65,15 +65,8 @@ export function useMediaAssetActions() {
 
     try {
       const filename = targetAsset.name
-      let downloadUrl: string
-
-      // In cloud, use preview_url directly (from cloud storage)
-      // In OSS/localhost, use the /view endpoint
-      if (isCloud && targetAsset.preview_url) {
-        downloadUrl = targetAsset.preview_url
-      } else {
-        downloadUrl = getAssetUrl(targetAsset)
-      }
+      // Prefer preview_url (already includes subfolder) with getAssetUrl as fallback
+      const downloadUrl = targetAsset.preview_url || getAssetUrl(targetAsset)
 
       downloadFile(downloadUrl, filename)
 
@@ -103,15 +96,8 @@ export function useMediaAssetActions() {
     try {
       assets.forEach((asset) => {
         const filename = asset.name
-        let downloadUrl: string
-
-        // In cloud, use preview_url directly (from GCS or other cloud storage)
-        // In OSS/localhost, use the /view endpoint
-        if (isCloud && asset.preview_url) {
-          downloadUrl = asset.preview_url
-        } else {
-          downloadUrl = getAssetUrl(asset)
-        }
+        // Prefer preview_url (already includes subfolder) with getAssetUrl as fallback
+        const downloadUrl = asset.preview_url || getAssetUrl(asset)
         downloadFile(downloadUrl, filename)
       })
 

src/platform/assets/composables/useModelUpload.ts

@@ -1,10 +1,11 @@
+import { computed } from 'vue'
+
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import UploadModelDialog from '@/platform/assets/components/UploadModelDialog.vue'
 import UploadModelDialogHeader from '@/platform/assets/components/UploadModelDialogHeader.vue'
 import UploadModelUpgradeModal from '@/platform/assets/components/UploadModelUpgradeModal.vue'
 import UploadModelUpgradeModalHeader from '@/platform/assets/components/UploadModelUpgradeModalHeader.vue'
 import { useDialogStore } from '@/stores/dialogStore'
-import { computed } from 'vue'
 
 export function useModelUpload(
   onUploadSuccess?: () => Promise<unknown> | void
@@ -15,7 +16,6 @@ export function useModelUpload(
 
   function showUploadDialog() {
     if (!flags.privateModelsEnabled) {
-      // Show upgrade modal if private models are disabled
       dialogStore.showDialog({
         key: 'upload-model-upgrade',
         headerComponent: UploadModelUpgradeModalHeader,
@@ -28,7 +28,6 @@ export function useModelUpload(
         }
       })
     } else {
-      // Show regular upload modal
       dialogStore.showDialog({
         key: 'upload-model',
         headerComponent: UploadModelDialogHeader,

src/platform/assets/composables/useUploadModelWizard.ts

@@ -2,7 +2,6 @@ import type { Ref } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { st } from '@/i18n'
 import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
 import { huggingfaceImportSource } from '@/platform/assets/importSources/huggingfaceImportSource'
@@ -32,7 +31,6 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
   const assetsStore = useAssetsStore()
   const assetDownloadStore = useAssetDownloadStore()
   const modelToNodeStore = useModelToNodeStore()
-  const { flags } = useFeatureFlags()
   const currentStep = ref(1)
   const isFetchingMetadata = ref(false)
   const isUploading = ref(false)
@@ -47,10 +45,10 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
 
   const selectedModelType = ref<string>()
 
-  // Available import sources
-  const importSources: ImportSource[] = flags.huggingfaceModelImportEnabled
-    ? [civitaiImportSource, huggingfaceImportSource]
-    : [civitaiImportSource]
+  const importSources: ImportSource[] = [
+    civitaiImportSource,
+    huggingfaceImportSource
+  ]
 
   // Detected import source based on URL
   const detectedSource = computed(() => {
@@ -69,9 +67,9 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     }
   )
 
-  // Validation
+  // Validation - only enable Continue when URL matches a supported source
   const canFetchMetadata = computed(() => {
-    return wizardData.value.url.trim().length > 0
+    return detectedSource.value !== null
   })
 
   const canUploadModel = computed(() => {
@@ -233,40 +231,27 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
         model_type: selectedModelType.value
       }
 
-      if (flags.asyncModelUploadEnabled) {
-        const result = await assetService.uploadAssetAsync({
-          source_url: wizardData.value.url,
-          tags,
-          user_metadata: userMetadata,
-          preview_id: previewId
-        })
+      const result = await assetService.uploadAssetAsync({
+        source_url: wizardData.value.url,
+        tags,
+        user_metadata: userMetadata,
+        preview_id: previewId
+      })
 
-        if (result.type === 'async' && result.task.status !== 'completed') {
-          if (selectedModelType.value) {
-            assetDownloadStore.trackDownload(
-              result.task.task_id,
-              selectedModelType.value,
-              filename
-            )
-          }
-          uploadStatus.value = 'processing'
-        } else {
-          uploadStatus.value = 'success'
-          await refreshModelCaches()
+      if (result.type === 'async' && result.task.status !== 'completed') {
+        if (selectedModelType.value) {
+          assetDownloadStore.trackDownload(
+            result.task.task_id,
+            selectedModelType.value,
+            filename
+          )
         }
-        currentStep.value = 3
+        uploadStatus.value = 'processing'
       } else {
-        await assetService.uploadAssetFromUrl({
-          url: wizardData.value.url,
-          name: filename,
-          tags,
-          user_metadata: userMetadata,
-          preview_id: previewId
-        })
         uploadStatus.value = 'success'
         await refreshModelCaches()
-        currentStep.value = 3
       }
+      currentStep.value = 3
     } catch (error) {
       console.error('Failed to upload asset:', error)
       uploadStatus.value = 'error'

src/platform/assets/services/assetService.ts

@@ -36,6 +36,7 @@ interface AssetRequestOptions extends PaginationOptions {
  */
 function getLocalizedErrorMessage(errorCode: string): string {
   const errorMessages: Record<string, string> = {
+    // Validation errors
     FILE_TOO_LARGE: st('assetBrowser.errorFileTooLarge', 'File too large'),
     FORMAT_NOT_ALLOWED: st(
       'assetBrowser.errorFormatNotAllowed',
@@ -52,6 +53,95 @@ function getLocalizedErrorMessage(errorCode: string): string {
     MODEL_TYPE_NOT_SUPPORTED: st(
       'assetBrowser.errorModelTypeNotSupported',
       'Model type not supported'
+    ),
+
+    // HTTP 400 - Bad Request
+    INVALID_URL: st('assetBrowser.errorInvalidUrl', 'Please provide a URL.'),
+    INVALID_URL_FORMAT: st(
+      'assetBrowser.errorInvalidUrlFormat',
+      'The URL format is invalid. Please check and try again.'
+    ),
+    UNSUPPORTED_SOURCE: st(
+      'assetBrowser.errorUnsupportedSource',
+      'This URL is not supported. Only Hugging Face and Civitai URLs are allowed.'
+    ),
+
+    // HTTP 401 - Unauthorized
+    UNAUTHORIZED: st(
+      'assetBrowser.errorUnauthorized',
+      'Please sign in to continue.'
+    ),
+
+    // HTTP 422 - External Source Errors
+    USER_TOKEN_INVALID: st(
+      'assetBrowser.errorUserTokenInvalid',
+      'Your stored API token is invalid or expired. Please update your token in settings.'
+    ),
+    USER_TOKEN_ACCESS_DENIED: st(
+      'assetBrowser.errorUserTokenAccessDenied',
+      'Your API token does not have access to this resource. Please check your token permissions.'
+    ),
+    UNAUTHORIZED_SOURCE: st(
+      'assetBrowser.errorUnauthorizedSource',
+      'This resource requires authentication. Please add your API token in settings.'
+    ),
+    ACCESS_FORBIDDEN: st(
+      'assetBrowser.errorAccessForbidden',
+      'Access to this resource is forbidden.'
+    ),
+    RESOURCE_NOT_FOUND: st(
+      'assetBrowser.errorResourceNotFound',
+      'The file was not found. Please check the URL and try again.'
+    ),
+    RATE_LIMITED: st(
+      'assetBrowser.errorRateLimited',
+      'Too many requests. Please try again in a few minutes.'
+    ),
+    SOURCE_SERVER_ERROR: st(
+      'assetBrowser.errorSourceServerError',
+      'The source server is experiencing issues. Please try again later.'
+    ),
+    NETWORK_TIMEOUT: st(
+      'assetBrowser.errorNetworkTimeout',
+      'Request timed out. Please try again.'
+    ),
+    CONNECTION_REFUSED: st(
+      'assetBrowser.errorConnectionRefused',
+      'Unable to connect to the source. Please try again later.'
+    ),
+    INVALID_HOST: st(
+      'assetBrowser.errorInvalidHost',
+      'The source URL hostname could not be resolved.'
+    ),
+    NETWORK_ERROR: st(
+      'assetBrowser.errorNetworkError',
+      'A network error occurred. Please check your connection and try again.'
+    ),
+    REQUEST_CANCELLED: st(
+      'assetBrowser.errorRequestCancelled',
+      'Request was cancelled.'
+    ),
+    DOWNLOAD_CANCELLED: st(
+      'assetBrowser.errorDownloadCancelled',
+      'Download was cancelled.'
+    ),
+    METADATA_FETCH_FAILED: st(
+      'assetBrowser.errorMetadataFetchFailed',
+      'Failed to fetch file information from the source.'
+    ),
+    HTTP_ERROR: st(
+      'assetBrowser.errorHttpError',
+      'An error occurred while fetching metadata.'
+    ),
+
+    // HTTP 500 - Internal Server Errors
+    SERVICE_UNAVAILABLE: st(
+      'assetBrowser.errorServiceUnavailable',
+      'Service temporarily unavailable. Please try again later.'
+    ),
+    INTERNAL_ERROR: st(
+      'assetBrowser.errorInternalError',
+      'An unexpected error occurred. Please try again.'
     )
   }
   return (

src/platform/assets/utils/assetUrlUtil.ts

@@ -8,7 +8,7 @@ import { getAssetType } from './assetTypeUtil'
 
 /**
  * Get the download/view URL for an asset
- * Constructs the proper URL with filename encoding and type parameter
+ * Constructs the proper URL with filename encoding, type, and subfolder parameters
  *
  * @param asset The asset to get URL for
  * @param defaultType Default type if asset doesn't have tags (default: 'output')
@@ -23,7 +23,12 @@ export function getAssetUrl(
   defaultType: 'input' | 'output' = 'output'
 ): string {
   const assetType = getAssetType(asset, defaultType)
-  return api.apiURL(
-    `/view?filename=${encodeURIComponent(asset.name)}&type=${assetType}`
-  )
+  const subfolder = asset.user_metadata?.subfolder
+  const params = new URLSearchParams()
+  params.set('filename', asset.name)
+  params.set('type', assetType)
+  if (typeof subfolder === 'string' && subfolder) {
+    params.set('subfolder', subfolder)
+  }
+  return api.apiURL(`/view?${params}`)
 }

src/platform/assets/utils/createModelNodeFromAsset.test.ts

@@ -110,13 +110,19 @@ async function createMockNode(overrides?: {
     widgets: { value: [widget], writable: true }
   })
 }
-function createMockNodeProvider() {
+function createMockNodeProvider(
+  overrides: {
+    nodeDef?: { name: string; display_name: string }
+    key?: string
+  } = {}
+) {
   return {
     nodeDef: {
       name: 'CheckpointLoaderSimple',
-      display_name: 'Load Checkpoint'
+      display_name: 'Load Checkpoint',
+      ...overrides.nodeDef
     },
-    key: 'ckpt_name'
+    key: overrides.key ?? 'ckpt_name'
   }
 }
 /**
@@ -270,6 +276,24 @@ describe('createModelNodeFromAsset', () => {
       expect(mockSubgraph.add).toHaveBeenCalledWith(mockNode)
       expect(vi.mocked(app).canvas.graph!.add).not.toHaveBeenCalled()
     })
+    it('should succeed when provider has empty key (auto-load nodes)', async () => {
+      const asset = createMockAsset({
+        tags: ['models', 'chatterbox/chatterbox_vc'],
+        user_metadata: { filename: 'chatterbox_vc_model.pt' }
+      })
+      const mockNode = await createMockNode({ hasWidgets: false })
+      const nodeProvider = createMockNodeProvider({
+        nodeDef: {
+          name: 'FL_ChatterboxVC',
+          display_name: 'FL Chatterbox VC'
+        },
+        key: ''
+      })
+      await setupMocks({ createdNode: mockNode, nodeProvider })
+      const result = createModelNodeFromAsset(asset)
+      expect(result.success).toBe(true)
+      expect(vi.mocked(app).canvas.graph!.add).toHaveBeenCalledWith(mockNode)
+    })
   })
   describe('when asset data is incomplete or invalid', () => {
     beforeEach(() => {

src/platform/assets/utils/createModelNodeFromAsset.ts

@@ -171,26 +171,27 @@ export function createModelNodeFromAsset(
     }
   }
 
-  const widget = node.widgets?.find((w) => w.name === provider.key)
-  if (!widget) {
-    console.error(
-      `Widget ${provider.key} not found on node ${provider.nodeDef.name}`
-    )
-    return {
-      success: false,
-      error: {
-        code: 'MISSING_WIDGET',
-        message: `Widget ${provider.key} not found on node ${provider.nodeDef.name}`,
-        assetId: validAsset.id,
-        details: { widgetName: provider.key, nodeType: provider.nodeDef.name }
+  // Set widget value if provider specifies a key (some nodes auto-load models without a widget)
+  if (provider.key) {
+    const widget = node.widgets?.find((w) => w.name === provider.key)
+    if (!widget) {
+      console.error(
+        `Widget ${provider.key} not found on node ${provider.nodeDef.name}`
+      )
+      return {
+        success: false,
+        error: {
+          code: 'MISSING_WIDGET',
+          message: `Widget ${provider.key} not found on node ${provider.nodeDef.name}`,
+          assetId: validAsset.id,
+          details: { widgetName: provider.key, nodeType: provider.nodeDef.name }
+        }
       }
     }
+    widget.value = filename
   }
 
-  // Set widget value BEFORE adding to graph so the node is created with correct value
-  widget.value = filename
-
-  // Now add the node to the graph with the correct widget value already set
+  // Add the node to the graph
   targetGraph.add(node)
 
   return { success: true, value: node }

src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts

@@ -40,13 +40,18 @@ vi.mock('@/composables/useErrorHandling', () => ({
 
 const subscriptionMocks = vi.hoisted(() => ({
   isActiveSubscription: { value: false },
-  isInitialized: { value: true }
+  isInitialized: { value: true },
+  subscriptionStatus: { value: null }
 }))
 
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: () => subscriptionMocks
 }))
 
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => subscriptionMocks
+}))
+
 // Avoid real network / isCloud behavior
 const mockPerformSubscriptionCheckout = vi.fn()
 vi.mock('@/platform/cloud/subscription/utils/subscriptionCheckoutUtil', () => ({

src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue

@@ -6,9 +6,9 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import { performSubscriptionCheckout } from '@/platform/cloud/subscription/utils/subscriptionCheckoutUtil'
 
@@ -20,7 +20,7 @@ const router = useRouter()
 const { reportError, accessBillingPortal } = useFirebaseAuthActions()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
-const { isActiveSubscription, isInitialized } = useSubscription()
+const { isActiveSubscription, isInitialized } = useBillingContext()
 
 const selectedTierKey = ref<TierKey | null>(null)
 

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

@@ -14,15 +14,18 @@ const mockSubscriptionTier = ref<
 const mockIsYearlySubscription = ref(false)
 const mockAccessBillingPortal = vi.fn()
 const mockReportError = vi.fn()
+const mockTrackBeginCheckout = vi.fn()
 const mockGetFirebaseAuthHeader = vi.fn(() =>
   Promise.resolve({ Authorization: 'Bearer test-token' })
 )
+const mockGetCheckoutAttribution = vi.hoisted(() => vi.fn(() => ({})))
 
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: () => ({
     isActiveSubscription: computed(() => mockIsActiveSubscription.value),
     subscriptionTier: computed(() => mockSubscriptionTier.value),
-    isYearlySubscription: computed(() => mockIsYearlySubscription.value)
+    isYearlySubscription: computed(() => mockIsYearlySubscription.value),
+    subscriptionStatus: ref(null)
   })
 }))
 
@@ -53,11 +56,22 @@ vi.mock('@/composables/useErrorHandling', () => ({
 
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: () => ({
-    getFirebaseAuthHeader: mockGetFirebaseAuthHeader
+    getFirebaseAuthHeader: mockGetFirebaseAuthHeader,
+    userId: 'user-123'
   }),
   FirebaseAuthStoreError: class extends Error {}
 }))
 
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    trackBeginCheckout: mockTrackBeginCheckout
+  })
+}))
+
+vi.mock('@/platform/telemetry/utils/checkoutAttribution', () => ({
+  getCheckoutAttribution: mockGetCheckoutAttribution
+}))
+
 vi.mock('@/platform/distribution/types', () => ({
   isCloud: true
 }))
@@ -126,6 +140,7 @@ describe('PricingTable', () => {
     mockIsActiveSubscription.value = false
     mockSubscriptionTier.value = null
     mockIsYearlySubscription.value = false
+    mockTrackBeginCheckout.mockReset()
     vi.mocked(global.fetch).mockResolvedValue({
       ok: true,
       json: async () => ({ checkout_url: 'https://checkout.stripe.com/test' })
@@ -148,6 +163,13 @@ describe('PricingTable', () => {
       await creatorButton?.trigger('click')
       await flushPromises()
 
+      expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
+        user_id: 'user-123',
+        tier: 'creator',
+        cycle: 'yearly',
+        checkout_type: 'change',
+        previous_tier: 'standard'
+      })
       expect(mockAccessBillingPortal).toHaveBeenCalledWith('creator-yearly')
     })
 

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

@@ -266,6 +266,9 @@ import { performSubscriptionCheckout } from '@/platform/cloud/subscription/utils
 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 { getCheckoutAttribution } from '@/platform/telemetry/utils/checkoutAttribution'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import type { components } from '@/types/comfyRegistryTypes'
 
 type SubscriptionTier = components['schemas']['SubscriptionTier']
@@ -330,6 +333,8 @@ const tiers: PricingTierConfig[] = [
 const { n } = useI18n()
 const { isActiveSubscription, subscriptionTier, isYearlySubscription } =
   useSubscription()
+const telemetry = useTelemetry()
+const { userId } = useFirebaseAuthStore()
 const { accessBillingPortal, reportError } = useFirebaseAuthActions()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
@@ -410,6 +415,19 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
 
     try {
       if (isActiveSubscription.value) {
+        const checkoutAttribution = getCheckoutAttribution()
+        if (userId) {
+          telemetry?.trackBeginCheckout({
+            user_id: userId,
+            tier: tierKey,
+            cycle: currentBillingCycle.value,
+            checkout_type: 'change',
+            ...checkoutAttribution,
+            ...(currentTierKey.value
+              ? { previous_tier: currentTierKey.value }
+              : {})
+          })
+        }
         // Pass the target tier to create a deep link to subscription update confirmation
         const checkoutTier = getCheckoutTier(tierKey, currentBillingCycle.value)
         const targetPlan = {
@@ -430,7 +448,11 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
           await accessBillingPortal(checkoutTier)
         }
       } else {
-        await performSubscriptionCheckout(tierKey, currentBillingCycle.value)
+        await performSubscriptionCheckout(
+          tierKey,
+          currentBillingCycle.value,
+          true
+        )
       }
     } finally {
       isLoading.value = false

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

@@ -0,0 +1,527 @@
+<template>
+  <div class="flex flex-col gap-8">
+    <h2 class="text-xl lg:text-2xl text-muted-foreground m-0 text-center">
+      {{ t('subscription.chooseBestPlanWorkspace') }}
+    </h2>
+
+    <div class="flex justify-center">
+      <SelectButton
+        v-model="currentBillingCycle"
+        :options="billingCycleOptions"
+        option-label="label"
+        option-value="value"
+        :allow-empty="false"
+        unstyled
+        :pt="{
+          root: {
+            class: 'flex gap-1 bg-secondary-background rounded-lg p-1.5'
+          },
+          pcToggleButton: {
+            root: ({ context }: ToggleButtonPassThroughMethodOptions) => ({
+              class: [
+                'w-36  h-8 rounded-md transition-colors cursor-pointer border-none outline-none ring-0 text-sm font-medium flex items-center justify-center',
+                context.active
+                  ? 'bg-base-foreground text-base-background'
+                  : 'bg-transparent text-muted-foreground hover:bg-secondary-background-hover'
+              ]
+            }),
+            label: { class: 'flex items-center gap-2 ' }
+          }
+        }"
+      >
+        <template #option="{ option }">
+          <div class="flex items-center gap-2">
+            <span>{{ option.label }}</span>
+            <div
+              v-if="option.value === 'yearly'"
+              class="bg-primary-background text-white text-[11px] px-1 py-0.5 rounded-full flex items-center font-bold"
+            >
+              -20%
+            </div>
+          </div>
+        </template>
+      </SelectButton>
+    </div>
+    <div class="flex flex-col xl:flex-row items-stretch gap-6">
+      <div
+        v-for="tier in tiers"
+        :key="tier.id"
+        :class="
+          cn(
+            'flex-1 flex flex-col rounded-2xl border border-border-default bg-base-background shadow-[0_0_12px_rgba(0,0,0,0.1)]',
+            tier.isPopular ? 'border-muted-foreground' : ''
+          )
+        "
+      >
+        <div class="p-8 pb-0 flex flex-col gap-8">
+          <div class="flex flex-row items-center gap-2 justify-between">
+            <span
+              class="font-inter text-base font-bold leading-normal text-base-foreground"
+            >
+              {{ tier.name }}
+            </span>
+            <div
+              v-if="tier.isPopular"
+              class="rounded-full bg-base-foreground px-1.5 text-[11px] font-bold uppercase text-base-background h-5 tracking-tight flex items-center"
+            >
+              {{ t('subscription.mostPopular') }}
+            </div>
+          </div>
+          <div class="flex flex-col">
+            <div class="flex flex-col gap-2">
+              <div class="flex flex-row items-baseline gap-2">
+                <span
+                  class="font-inter text-[32px] font-semibold leading-normal text-base-foreground"
+                >
+                  <span
+                    v-show="currentBillingCycle === 'yearly'"
+                    class="line-through text-2xl text-muted-foreground"
+                  >
+                    ${{ getMonthlyPrice(tier) }}
+                  </span>
+                  ${{ getPrice(tier) }}
+                </span>
+                <span
+                  class="font-inter text-sm leading-normal text-base-foreground"
+                >
+                  {{ t('subscription.usdPerMonthPerMember') }}
+                </span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-sm text-muted-foreground">
+                  {{
+                    currentBillingCycle === 'yearly'
+                      ? t('subscription.billedYearly', {
+                          total: `$${getAnnualTotal(tier)}`
+                        })
+                      : t('subscription.billedMonthly')
+                  }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-4 pb-0 flex-1">
+            <div class="flex flex-row items-center justify-between">
+              <span class="text-sm font-normal text-foreground">
+                {{ t('subscription.monthlyCreditsPerMemberLabel') }}
+              </span>
+              <div class="flex flex-row items-center gap-1">
+                <i class="icon-[lucide--component] text-amber-400 text-sm" />
+                <span
+                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                >
+                  {{ n(getMonthlyCreditsPerMember(tier)) }}
+                </span>
+              </div>
+            </div>
+
+            <div class="flex flex-row items-center justify-between">
+              <span class="text-sm font-normal text-foreground">
+                {{ t('subscription.maxMembersLabel') }}
+              </span>
+              <span
+                class="font-inter text-sm font-bold leading-normal text-base-foreground"
+              >
+                {{ getMaxMembers(tier) }}
+              </span>
+            </div>
+
+            <div class="flex flex-row items-center justify-between">
+              <span class="text-sm font-normal text-foreground">
+                {{ t('subscription.maxDurationLabel') }}
+              </span>
+              <span
+                class="font-inter text-sm font-bold leading-normal text-base-foreground"
+              >
+                {{ tier.maxDuration }}
+              </span>
+            </div>
+
+            <div class="flex flex-row items-center justify-between">
+              <span class="text-sm font-normal text-foreground">
+                {{ t('subscription.gpuLabel') }}
+              </span>
+              <i class="pi pi-check text-xs text-success-foreground" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between">
+              <span class="text-sm font-normal text-foreground">
+                {{ t('subscription.addCreditsLabel') }}
+              </span>
+              <i class="pi pi-check text-xs text-success-foreground" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between">
+              <span class="text-sm font-normal text-foreground">
+                {{ t('subscription.customLoRAsLabel') }}
+              </span>
+              <i
+                v-if="tier.customLoRAs"
+                class="pi pi-check text-xs text-success-foreground"
+              />
+              <i v-else class="pi pi-times text-xs text-foreground" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <div class="flex flex-row items-start justify-between">
+                <div class="flex flex-col gap-2">
+                  <span
+                    class="text-sm font-normal text-foreground leading-relaxed"
+                  >
+                    {{ t('subscription.videoEstimateLabel') }}
+                  </span>
+                  <div class="flex flex-row items-center gap-2 group pt-2">
+                    <i
+                      class="pi pi-question-circle text-xs text-muted-foreground group-hover:text-base-foreground"
+                    />
+                    <span
+                      class="text-sm font-normal text-muted-foreground cursor-pointer group-hover:text-base-foreground"
+                      @click="togglePopover"
+                    >
+                      {{ t('subscription.videoEstimateHelp') }}
+                    </span>
+                  </div>
+                </div>
+                <span
+                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                >
+                  ~{{ n(tier.pricing.videoEstimate) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col p-8">
+          <Button
+            :variant="getButtonSeverity(tier)"
+            :disabled="isButtonDisabled(tier)"
+            :loading="props.loadingTier === tier.key"
+            :class="
+              cn(
+                'h-10 w-full',
+                getButtonTextClass(tier),
+                tier.key === 'creator'
+                  ? 'bg-base-foreground border-transparent hover:bg-inverted-background-hover'
+                  : 'bg-secondary-background border-transparent hover:bg-secondary-background-hover focus:bg-secondary-background-selected'
+              )
+            "
+            @click="() => handleSubscribe(tier.key)"
+          >
+            {{ getButtonLabel(tier) }}
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Video Estimate Help Popover -->
+    <Popover
+      ref="popover"
+      append-to="body"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="{
+        root: {
+          class:
+            'rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-lg p-4 max-w-xs'
+        }
+      }"
+    >
+      <div class="flex flex-col gap-2">
+        <p class="text-sm text-base-foreground leading-normal">
+          {{ t('subscription.videoEstimateExplanation') }}
+        </p>
+        <a
+          href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-sm text-azure-600 hover:text-azure-400 no-underline flex gap-1"
+        >
+          <span class="underline">
+            {{ t('subscription.videoEstimateTryTemplate') }}
+          </span>
+          <span class="no-underline" v-html="'&rarr;'"></span>
+        </a>
+      </div>
+    </Popover>
+    <!-- Contact and Enterprise Links -->
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm text-text-secondary m-0">
+        {{ $t('subscription.haveQuestions') }}
+      </p>
+      <div class="flex items-center gap-1.5">
+        <Button
+          variant="muted-textonly"
+          class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
+          @click="handleContactUs"
+        >
+          {{ $t('subscription.contactUs') }}
+          <i class="pi pi-comments" />
+        </Button>
+        <span class="text-sm text-text-secondary">{{ $t('g.or') }}</span>
+        <Button
+          variant="muted-textonly"
+          class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
+          @click="handleViewEnterprise"
+        >
+          {{ $t('subscription.viewEnterprise') }}
+          <i class="pi pi-external-link" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import Popover from 'primevue/popover'
+import SelectButton from 'primevue/selectbutton'
+import type { ToggleButtonPassThroughMethodOptions } from 'primevue/togglebutton'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { t } from '@/i18n'
+import {
+  TIER_PRICING,
+  TIER_TO_KEY
+} from '@/platform/cloud/subscription/constants/tierPricing'
+import type {
+  TierKey,
+  TierPricing
+} from '@/platform/cloud/subscription/constants/tierPricing'
+import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
+import type { Plan } from '@/platform/workspace/api/workspaceApi'
+import type { components } from '@/types/comfyRegistryTypes'
+
+type SubscriptionTier = components['schemas']['SubscriptionTier']
+type CheckoutTierKey = Exclude<TierKey, 'founder'>
+
+interface Props {
+  isLoading?: boolean
+  loadingTier?: CheckoutTierKey | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoading: false,
+  loadingTier: null
+})
+
+const emit = defineEmits<{
+  subscribe: [payload: { tierKey: CheckoutTierKey; billingCycle: BillingCycle }]
+  resubscribe: []
+}>()
+
+interface BillingCycleOption {
+  label: string
+  value: BillingCycle
+}
+
+interface PricingTierConfig {
+  id: SubscriptionTier
+  key: CheckoutTierKey
+  name: string
+  pricing: TierPricing
+  maxDuration: string
+  customLoRAs: boolean
+  maxMembers: number
+  isPopular?: boolean
+}
+
+const billingCycleOptions: BillingCycleOption[] = [
+  { label: t('subscription.yearly'), value: 'yearly' },
+  { label: t('subscription.monthly'), value: 'monthly' }
+]
+
+const tiers: PricingTierConfig[] = [
+  {
+    id: 'STANDARD',
+    key: 'standard',
+    name: t('subscription.tiers.standard.name'),
+    pricing: TIER_PRICING.standard,
+    maxDuration: t('subscription.maxDuration.standard'),
+    customLoRAs: false,
+    maxMembers: 1,
+    isPopular: false
+  },
+  {
+    id: 'CREATOR',
+    key: 'creator',
+    name: t('subscription.tiers.creator.name'),
+    pricing: TIER_PRICING.creator,
+    maxDuration: t('subscription.maxDuration.creator'),
+    customLoRAs: true,
+    maxMembers: 5,
+    isPopular: true
+  },
+  {
+    id: 'PRO',
+    key: 'pro',
+    name: t('subscription.tiers.pro.name'),
+    pricing: TIER_PRICING.pro,
+    maxDuration: t('subscription.maxDuration.pro'),
+    customLoRAs: true,
+    maxMembers: 20,
+    isPopular: false
+  }
+]
+
+const { n } = useI18n()
+const {
+  plans: apiPlans,
+  currentPlanSlug,
+  fetchPlans,
+  subscription
+} = useBillingContext()
+
+const isCancelled = computed(() => subscription.value?.isCancelled ?? false)
+
+const popover = ref()
+const currentBillingCycle = ref<BillingCycle>('yearly')
+
+onMounted(() => {
+  void fetchPlans()
+})
+
+function getApiPlanForTier(
+  tierKey: CheckoutTierKey,
+  duration: BillingCycle
+): Plan | undefined {
+  const apiDuration = duration === 'yearly' ? 'ANNUAL' : 'MONTHLY'
+  const apiTier = tierKey.toUpperCase() as Plan['tier']
+  return apiPlans.value.find(
+    (p) => p.tier === apiTier && p.duration === apiDuration
+  )
+}
+
+function getPriceFromApi(tier: PricingTierConfig): number | null {
+  const plan = getApiPlanForTier(tier.key, currentBillingCycle.value)
+  if (!plan) return null
+  const price = plan.price_cents / 100
+  return currentBillingCycle.value === 'yearly' ? price / 12 : price
+}
+
+function getMaxSeatsFromApi(tier: PricingTierConfig): number | null {
+  const plan = getApiPlanForTier(tier.key, 'monthly')
+  return plan ? plan.max_seats : null
+}
+
+const currentTierKey = computed<TierKey | null>(() =>
+  subscription.value?.tier ? TIER_TO_KEY[subscription.value.tier] : null
+)
+
+const isYearlySubscription = computed(
+  () => subscription.value?.duration === 'ANNUAL'
+)
+
+const isCurrentPlan = (tierKey: CheckoutTierKey): boolean => {
+  // Use API current_plan_slug if available
+  if (currentPlanSlug.value) {
+    const plan = getApiPlanForTier(tierKey, currentBillingCycle.value)
+    return plan?.slug === currentPlanSlug.value
+  }
+
+  // Fallback to tier-based detection
+  if (!currentTierKey.value) return false
+
+  const selectedIsYearly = currentBillingCycle.value === 'yearly'
+
+  return (
+    currentTierKey.value === tierKey &&
+    isYearlySubscription.value === selectedIsYearly
+  )
+}
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+
+const getButtonLabel = (tier: PricingTierConfig): string => {
+  const planName =
+    currentBillingCycle.value === 'yearly'
+      ? t('subscription.tierNameYearly', { name: tier.name })
+      : tier.name
+
+  if (isCurrentPlan(tier.key)) {
+    return isCancelled.value
+      ? t('subscription.resubscribeTo', { plan: planName })
+      : t('subscription.currentPlan')
+  }
+
+  return currentTierKey.value
+    ? t('subscription.changeTo', { plan: planName })
+    : t('subscription.subscribeTo', { plan: planName })
+}
+
+const getButtonSeverity = (
+  tier: PricingTierConfig
+): 'primary' | 'secondary' => {
+  if (isCurrentPlan(tier.key)) {
+    return isCancelled.value ? 'primary' : 'secondary'
+  }
+  if (tier.key === 'creator') return 'primary'
+  return 'secondary'
+}
+
+const isButtonDisabled = (tier: PricingTierConfig): boolean => {
+  if (props.isLoading) return true
+  if (isCurrentPlan(tier.key)) {
+    // Allow clicking current plan button when cancelled (for resubscribe)
+    return !isCancelled.value
+  }
+  return false
+}
+
+const getButtonTextClass = (tier: PricingTierConfig): string =>
+  tier.key === 'creator'
+    ? 'font-inter text-sm font-bold leading-normal text-base-background'
+    : 'font-inter text-sm font-bold leading-normal text-primary-foreground'
+
+const getPrice = (tier: PricingTierConfig): number =>
+  getPriceFromApi(tier) ?? tier.pricing[currentBillingCycle.value]
+
+const getMonthlyPrice = (tier: PricingTierConfig): number => {
+  const plan = getApiPlanForTier(tier.key, 'monthly')
+  return plan ? plan.price_cents / 100 : tier.pricing.monthly
+}
+
+const getAnnualTotal = (tier: PricingTierConfig): number => {
+  const plan = getApiPlanForTier(tier.key, 'yearly')
+  return plan ? plan.price_cents / 100 : tier.pricing.yearly * 12
+}
+
+const getMaxMembers = (tier: PricingTierConfig): number =>
+  getMaxSeatsFromApi(tier) ?? tier.maxMembers
+
+const getMonthlyCreditsPerMember = (tier: PricingTierConfig): number =>
+  tier.pricing.credits
+
+function handleSubscribe(tierKey: CheckoutTierKey) {
+  if (props.isLoading) return
+
+  // Handle resubscribe for cancelled subscription on current plan
+  if (isCurrentPlan(tierKey)) {
+    if (isCancelled.value) {
+      emit('resubscribe')
+    }
+    return
+  }
+
+  emit('subscribe', {
+    tierKey,
+    billingCycle: currentBillingCycle.value
+  })
+}
+
+function handleContactUs() {
+  window.open('https://www.comfy.org/discord', '_blank')
+}
+
+function handleViewEnterprise() {
+  window.open('https://www.comfy.org/enterprise', '_blank')
+}
+</script>

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

@@ -1,8 +1,7 @@
 <template>
   <Button
     :size
-    :loading="isLoading"
-    :disabled="disabled || isPolling"
+    :disabled="disabled"
     variant="primary"
     :style="
       variant === 'gradient'
@@ -23,7 +22,7 @@
 import { onBeforeUnmount, ref, watch } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { cn } from '@/utils/tailwindUtil'
@@ -46,60 +45,9 @@ const emit = defineEmits<{
   subscribed: []
 }>()
 
-const { subscribe, isActiveSubscription, fetchStatus, showSubscriptionDialog } =
-  useSubscription()
-
-const telemetry = useTelemetry()
-
-const isLoading = ref(false)
-const isPolling = ref(false)
-let pollInterval: number | null = null
+const { isActiveSubscription, showSubscriptionDialog } = useBillingContext()
 const isAwaitingStripeSubscription = ref(false)
 
-const POLL_INTERVAL_MS = 3000 // Poll every 3 seconds
-const MAX_POLL_DURATION_MS = 5 * 60 * 1000 // Stop polling after 5 minutes
-
-const startPollingSubscriptionStatus = () => {
-  isPolling.value = true
-  isLoading.value = true
-
-  const startTime = Date.now()
-
-  const poll = async () => {
-    try {
-      if (Date.now() - startTime > MAX_POLL_DURATION_MS) {
-        stopPolling()
-        return
-      }
-
-      await fetchStatus()
-
-      if (isActiveSubscription.value) {
-        stopPolling()
-        telemetry?.trackMonthlySubscriptionSucceeded()
-        emit('subscribed')
-      }
-    } catch (error) {
-      console.error(
-        '[SubscribeButton] Error polling subscription status:',
-        error
-      )
-    }
-  }
-
-  void poll()
-  pollInterval = window.setInterval(poll, POLL_INTERVAL_MS)
-}
-
-const stopPolling = () => {
-  if (pollInterval) {
-    clearInterval(pollInterval)
-    pollInterval = null
-  }
-  isPolling.value = false
-  isLoading.value = false
-}
-
 watch(
   [isAwaitingStripeSubscription, isActiveSubscription],
   ([awaiting, isActive]) => {
@@ -110,27 +58,15 @@ watch(
   }
 )
 
-const handleSubscribe = async () => {
+const handleSubscribe = () => {
   if (isCloud) {
     useTelemetry()?.trackSubscription('subscribe_clicked')
-    isAwaitingStripeSubscription.value = true
-    showSubscriptionDialog()
-    return
-  }
-
-  isLoading.value = true
-  try {
-    await subscribe()
-
-    startPollingSubscriptionStatus()
-  } catch (error) {
-    console.error('[SubscribeButton] Error initiating subscription:', error)
-    isLoading.value = false
   }
+  isAwaitingStripeSubscription.value = true
+  showSubscriptionDialog()
 }
 
 onBeforeUnmount(() => {
-  stopPolling()
   isAwaitingStripeSubscription.value = false
 })
 </script>

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

@@ -26,7 +26,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 
@@ -40,7 +40,7 @@ const buttonLabel = computed(() =>
     : t('subscription.subscribeToRun')
 )
 
-const { showSubscriptionDialog } = useSubscription()
+const { showSubscriptionDialog } = useBillingContext()
 
 const handleSubscribeToRun = () => {
   if (isCloud) {

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

@@ -0,0 +1,255 @@
+<template>
+  <h2 class="text-xl lg:text-2xl text-muted-foreground m-0 text-center mb-8">
+    {{ $t('subscription.preview.confirmPayment') }}
+  </h2>
+  <div
+    class="flex flex-col justify-between items-stretch max-w-[400px] mx-auto text-sm h-full"
+  >
+    <div class="">
+      <!-- Plan Header -->
+      <div class="flex flex-col gap-2">
+        <span class="text-base-foreground text-sm">
+          {{ tierName }}
+        </span>
+        <div class="flex items-baseline gap-2">
+          <span class="text-4xl font-semibold text-base-foreground">
+            ${{ displayPrice }}
+          </span>
+          <span class="text-xl text-base-foreground">
+            {{ $t('subscription.usdPerMonthPerMember') }}
+          </span>
+        </div>
+        <span class="text-muted-foreground">
+          {{ $t('subscription.preview.startingToday') }}
+        </span>
+      </div>
+
+      <!-- Credits Section -->
+      <div class="flex flex-col gap-3 pt-16 pb-8">
+        <div class="flex items-center justify-between">
+          <span class="text-base-foreground">
+            {{ $t('subscription.preview.eachMonthCreditsRefill') }}
+          </span>
+          <div class="flex items-center gap-1">
+            <i class="icon-[lucide--component] text-amber-400 text-sm" />
+            <span class="font-bold text-base-foreground">
+              {{ displayCredits }}
+            </span>
+            <span class="text-base-foreground">
+              {{ $t('subscription.preview.perMember') }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Expandable Features -->
+        <button
+          class="flex items-center justify-end gap-1 text-sm text-muted-foreground hover:text-base-foreground cursor-pointer bg-transparent border-none p-0"
+          @click="isFeaturesCollapsed = !isFeaturesCollapsed"
+        >
+          <span>
+            {{
+              isFeaturesCollapsed
+                ? $t('subscription.preview.showMoreFeatures')
+                : $t('subscription.preview.hideFeatures')
+            }}
+          </span>
+          <i
+            :class="
+              cn(
+                'pi text-xs',
+                isFeaturesCollapsed ? 'pi-chevron-down' : 'pi-chevron-up'
+              )
+            "
+          />
+        </button>
+        <div v-show="!isFeaturesCollapsed" class="flex flex-col gap-2 pt-2">
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-base-foreground">
+              {{ $t('subscription.maxDurationLabel') }}
+            </span>
+            <span class="text-sm font-bold text-base-foreground">
+              {{ maxDuration }}
+            </span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-base-foreground">
+              {{ $t('subscription.gpuLabel') }}
+            </span>
+            <i class="pi pi-check text-xs text-success-foreground" />
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-base-foreground">
+              {{ $t('subscription.addCreditsLabel') }}
+            </span>
+            <i class="pi pi-check text-xs text-success-foreground" />
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-base-foreground">
+              {{ $t('subscription.customLoRAsLabel') }}
+            </span>
+            <i
+              v-if="hasCustomLoRAs"
+              class="pi pi-check text-xs text-success-foreground"
+            />
+            <i v-else class="pi pi-times text-xs text-muted-foreground" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Total Due Section -->
+      <div class="flex flex-col gap-2 border-t border-border-subtle pt-8">
+        <div class="flex text-base items-center justify-between">
+          <span class="text-base-foreground">
+            {{ $t('subscription.preview.totalDueToday') }}
+          </span>
+          <span class="font-bold text-base-foreground">
+            ${{ totalDueToday }}
+          </span>
+        </div>
+        <span class="text-muted-foreground text-sm">
+          {{
+            $t('subscription.preview.nextPaymentDue', {
+              date: nextPaymentDate
+            })
+          }}
+        </span>
+      </div>
+    </div>
+    <!-- Footer -->
+    <div class="flex flex-col gap-2 pt-8">
+      <!-- Terms Agreement -->
+      <p class="text-xs text-muted-foreground text-center">
+        <i18n-t keypath="subscription.preview.termsAgreement" tag="span">
+          <template #terms>
+            <a
+              href="https://www.comfy.org/terms"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="underline hover:text-base-foreground"
+            >
+              {{ $t('subscription.preview.terms') }}
+            </a>
+          </template>
+          <template #privacy>
+            <a
+              href="https://www.comfy.org/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="underline hover:text-base-foreground"
+            >
+              {{ $t('subscription.preview.privacyPolicy') }}
+            </a>
+          </template>
+        </i18n-t>
+      </p>
+
+      <!-- Add Credit Card Button -->
+      <Button
+        variant="secondary"
+        size="lg"
+        class="w-full rounded-lg"
+        :loading="isLoading"
+        @click="$emit('addCreditCard')"
+      >
+        {{ $t('subscription.preview.addCreditCard') }}
+      </Button>
+
+      <!-- Back Link -->
+      <Button
+        variant="textonly"
+        class="text-muted-foreground hover:text-base-foreground hover:bg-none text-center cursor-pointer transition-colors text-xs"
+        @click="$emit('back')"
+      >
+        {{ $t('subscription.preview.backToAllPlans') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import {
+  getTierCredits,
+  getTierFeatures,
+  getTierPrice
+} from '@/platform/cloud/subscription/constants/tierPricing'
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
+import type { PreviewSubscribeResponse } from '@/platform/workspace/api/workspaceApi'
+import { cn } from '@/utils/tailwindUtil'
+
+interface Props {
+  tierKey: Exclude<TierKey, 'founder'>
+  billingCycle?: BillingCycle
+  isLoading?: boolean
+  previewData?: PreviewSubscribeResponse | null
+}
+
+const {
+  tierKey,
+  billingCycle = 'monthly',
+  isLoading = false,
+  previewData = null
+} = defineProps<Props>()
+
+defineEmits<{
+  addCreditCard: []
+  back: []
+}>()
+
+const { t, n } = useI18n()
+
+const isFeaturesCollapsed = ref(true)
+
+const tierName = computed(() => t(`subscription.tiers.${tierKey}.name`))
+
+const displayPrice = computed(() => {
+  if (previewData?.new_plan) {
+    return (previewData.new_plan.price_cents / 100).toFixed(0)
+  }
+  return getTierPrice(tierKey, billingCycle === 'yearly')
+})
+
+const displayCredits = computed(() => n(getTierCredits(tierKey)))
+
+const hasCustomLoRAs = computed(() => getTierFeatures(tierKey).customLoRAs)
+const maxDuration = computed(() => t(`subscription.maxDuration.${tierKey}`))
+
+const totalDueToday = computed(() => {
+  if (previewData) {
+    return (previewData.cost_today_cents / 100).toFixed(2)
+  }
+  const priceValue = getTierPrice(tierKey, billingCycle === 'yearly')
+  if (billingCycle === 'yearly') {
+    return (priceValue * 12).toFixed(2)
+  }
+  return priceValue.toFixed(2)
+})
+
+const nextPaymentDate = computed(() => {
+  if (previewData?.new_plan?.period_end) {
+    return new Date(previewData.new_plan.period_end).toLocaleDateString(
+      'en-US',
+      {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+      }
+    )
+  }
+  const date = new Date()
+  if (billingCycle === 'yearly') {
+    date.setFullYear(date.getFullYear() + 1)
+  } else {
+    date.setMonth(date.getMonth() + 1)
+  }
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+})
+</script>

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

@@ -90,6 +90,13 @@ vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
   }))
 }))
 
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    isActiveSubscription: computed(() => mockIsActiveSubscription.value),
+    manageSubscription: vi.fn()
+  })
+}))
+
 // Create i18n instance for testing
 const i18n = createI18n({
   legacy: false,

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

@@ -72,10 +72,10 @@ import { computed, defineAsyncComponent } from 'vue'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import SubscriptionPanelContentLegacy from '@/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
 import { isCloud } from '@/platform/distribution/types'
 
@@ -91,11 +91,15 @@ const teamWorkspacesEnabled = computed(
 
 const { buildDocsUrl, docsPaths } = useExternalLink()
 
-const { isActiveSubscription, handleInvoiceHistory } = useSubscription()
+const { isActiveSubscription, manageSubscription } = useBillingContext()
 
 const { isLoadingSupport, handleMessageSupport, handleLearnMoreClick } =
   useSubscriptionActions()
 
+const handleInvoiceHistory = async () => {
+  await manageSubscription()
+}
+
 const handleOpenPartnerNodesInfo = () => {
   window.open(
     buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),

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

@@ -1,246 +1,336 @@
 <template>
   <div class="grow overflow-auto pt-6">
-    <div class="rounded-2xl border border-interface-stroke p-6">
-      <div>
+    <!-- Loading state while subscription is being set up -->
+    <div
+      v-if="isSettingUp"
+      class="rounded-2xl border border-interface-stroke p-6"
+    >
+      <div class="flex items-center gap-2 text-muted-foreground py-4">
+        <i class="pi pi-spin pi-spinner" />
+        <span>{{ $t('billingOperation.subscriptionProcessing') }}</span>
+      </div>
+    </div>
+
+    <template v-else>
+      <!-- Cancelled subscription info card -->
+      <div
+        v-if="isCancelled"
+        class="mb-6 flex gap-1 rounded-2xl border border-warning-background bg-warning-background/20 p-4"
+      >
         <div
-          class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:gap-2"
+          class="flex size-8 shrink-0 items-center justify-center rounded-full text-warning-background"
         >
-          <!-- OWNER Unsubscribed State -->
-          <template v-if="showSubscribePrompt">
-            <div class="flex flex-col gap-2">
-              <div class="text-sm font-bold text-text-primary">
-                {{ $t('subscription.workspaceNotSubscribed') }}
-              </div>
-              <div class="text-sm text-text-secondary">
-                {{ $t('subscription.subscriptionRequiredMessage') }}
-              </div>
-            </div>
-            <Button
-              variant="primary"
-              size="lg"
-              class="ml-auto rounded-lg px-4 py-2 text-sm font-normal"
-              @click="handleSubscribeWorkspace"
-            >
-              {{ $t('subscription.subscribeNow') }}
-            </Button>
-          </template>
+          <i class="pi pi-info-circle" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <h2 class="text-sm font-bold text-text-primary m-0 pt-1.5">
+            {{ $t('subscription.canceledCard.title') }}
+          </h2>
+          <p class="text-sm text-text-secondary m-0">
+            {{
+              $t('subscription.canceledCard.description', {
+                date: formattedEndDate
+              })
+            }}
+          </p>
+        </div>
+      </div>
 
-          <!-- MEMBER View - read-only, no subscription data yet -->
-          <template v-else-if="isMemberView">
-            <div class="flex flex-col gap-2">
-              <div class="text-sm font-bold text-text-primary">
-                {{ $t('subscription.workspaceNotSubscribed') }}
+      <div class="rounded-2xl border border-interface-stroke p-6">
+        <div>
+          <div
+            class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:gap-2"
+          >
+            <!-- OWNER Unsubscribed State -->
+            <template v-if="showSubscribePrompt">
+              <div class="flex flex-col gap-2">
+                <div class="text-sm font-bold text-text-primary">
+                  {{ $t('subscription.workspaceNotSubscribed') }}
+                </div>
+                <div class="text-sm text-text-secondary">
+                  {{ $t('subscription.subscriptionRequiredMessage') }}
+                </div>
               </div>
-              <div class="text-sm text-text-secondary">
-                {{ $t('subscription.contactOwnerToSubscribe') }}
-              </div>
-            </div>
-          </template>
-
-          <!-- Normal Subscribed State (Owner with subscription) -->
-          <template v-else>
-            <div class="flex flex-col gap-2">
-              <div class="text-sm font-bold text-text-primary">
-                {{ subscriptionTierName }}
-              </div>
-              <div class="flex items-baseline gap-1 font-inter font-semibold">
-                <span class="text-2xl">${{ tierPrice }}</span>
-                <span class="text-base">{{ $t('subscription.perMonth') }}</span>
-              </div>
-              <div
-                v-if="isActiveSubscription"
-                class="text-sm text-text-secondary"
-              >
-                <template v-if="isCancelled">
-                  {{
-                    $t('subscription.expiresDate', {
-                      date: formattedEndDate
-                    })
-                  }}
-                </template>
-                <template v-else>
-                  {{
-                    $t('subscription.renewsDate', {
-                      date: formattedRenewalDate
-                    })
-                  }}
-                </template>
-              </div>
-            </div>
-
-            <div
-              v-if="isActiveSubscription && permissions.canManageSubscription"
-              class="flex flex-wrap gap-2 md:ml-auto"
-            >
               <Button
+                variant="primary"
                 size="lg"
-                variant="secondary"
-                class="rounded-lg px-4 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
-                @click="
-                  async () => {
-                    await authActions.accessBillingPortal()
-                  }
+                class="ml-auto rounded-lg px-4 py-2 text-sm font-normal"
+                @click="handleSubscribeWorkspace"
+              >
+                {{ $t('subscription.subscribeNow') }}
+              </Button>
+            </template>
+
+            <!-- MEMBER View - read-only, workspace not subscribed -->
+            <template v-else-if="isMemberView">
+              <div class="flex flex-col gap-2">
+                <div class="text-sm font-bold text-text-primary">
+                  {{ $t('subscription.workspaceNotSubscribed') }}
+                </div>
+                <div class="text-sm text-text-secondary">
+                  {{ $t('subscription.contactOwnerToSubscribe') }}
+                </div>
+              </div>
+            </template>
+
+            <!-- Normal Subscribed State (Owner with subscription, or member viewing subscribed workspace) -->
+            <template v-else>
+              <div class="flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <span class="text-sm font-bold text-text-primary">
+                    {{ subscriptionTierName }}
+                  </span>
+                  <StatusBadge
+                    v-if="isCancelled"
+                    :label="$t('subscription.canceled')"
+                    severity="warn"
+                  />
+                </div>
+                <div class="flex items-baseline gap-1 font-inter font-semibold">
+                  <span class="text-2xl">${{ tierPrice }}</span>
+                  <span class="text-base"
+                    >{{ $t('subscription.perMonth') }} /
+                    {{ $t('subscription.member') }}</span
+                  >
+                </div>
+                <div
+                  v-if="isActiveSubscription"
+                  :class="
+                    cn(
+                      'text-sm',
+                      isCancelled
+                        ? 'text-warning-background'
+                        : 'text-text-secondary'
+                    )
+                  "
+                >
+                  <template v-if="isCancelled">
+                    {{
+                      $t('subscription.expiresDate', {
+                        date: formattedEndDate
+                      })
+                    }}
+                  </template>
+                  <template v-else>
+                    {{
+                      $t('subscription.renewsDate', {
+                        date: formattedRenewalDate
+                      })
+                    }}
+                  </template>
+                </div>
+              </div>
+
+              <div
+                v-if="isActiveSubscription && permissions.canManageSubscription"
+                class="flex flex-wrap gap-2 md:ml-auto"
+              >
+                <!-- Cancelled state: show only Resubscribe button -->
+                <template v-if="isCancelled">
+                  <Button
+                    size="lg"
+                    variant="primary"
+                    class="rounded-lg px-4 text-sm font-normal"
+                    :loading="isResubscribing"
+                    @click="handleResubscribe"
+                  >
+                    {{ $t('subscription.resubscribe') }}
+                  </Button>
+                </template>
+
+                <!-- Active state: show Manage Payment, Upgrade, and menu -->
+                <template v-else>
+                  <Button
+                    size="lg"
+                    variant="secondary"
+                    class="rounded-lg px-4 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                    @click="manageSubscription"
+                  >
+                    {{ $t('subscription.managePayment') }}
+                  </Button>
+                  <Button
+                    size="lg"
+                    variant="primary"
+                    class="rounded-lg px-4 text-sm font-normal text-text-primary"
+                    @click="showSubscriptionDialog"
+                  >
+                    {{ $t('subscription.upgradePlan') }}
+                  </Button>
+                  <Button
+                    v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+                    variant="secondary"
+                    size="lg"
+                    :aria-label="$t('g.moreOptions')"
+                    @click="planMenu?.toggle($event)"
+                  >
+                    <i class="pi pi-ellipsis-h" />
+                  </Button>
+                  <Menu ref="planMenu" :model="planMenuItems" :popup="true" />
+                </template>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <div class="flex flex-col lg:flex-row gap-6 pt-9">
+          <div class="flex flex-col shrink-0">
+            <div class="flex flex-col gap-3">
+              <div
+                :class="
+                  cn(
+                    'relative flex flex-col gap-6 rounded-2xl p-5',
+                    'bg-modal-panel-background'
+                  )
                 "
               >
-                {{ $t('subscription.managePayment') }}
-              </Button>
-              <Button
-                size="lg"
-                variant="primary"
-                class="rounded-lg px-4 text-sm font-normal text-text-primary"
-                @click="showSubscriptionDialog"
-              >
-                {{ $t('subscription.upgradePlan') }}
-              </Button>
-              <Button
-                v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-                variant="secondary"
-                size="lg"
-                :aria-label="$t('g.moreOptions')"
-                @click="planMenu?.toggle($event)"
-              >
-                <i class="pi pi-ellipsis-h" />
-              </Button>
-              <Menu ref="planMenu" :model="planMenuItems" :popup="true" />
-            </div>
-          </template>
-        </div>
-      </div>
-
-      <div class="flex flex-col lg:flex-row gap-6 pt-9">
-        <div class="flex flex-col shrink-0">
-          <div class="flex flex-col gap-3">
-            <div
-              :class="
-                cn(
-                  'relative flex flex-col gap-6 rounded-2xl p-5',
-                  'bg-modal-panel-background'
-                )
-              "
-            >
-              <Button
-                variant="muted-textonly"
-                size="icon-sm"
-                class="absolute top-4 right-4"
-                :loading="isLoadingBalance"
-                @click="handleRefresh"
-              >
-                <i class="pi pi-sync text-text-secondary text-sm" />
-              </Button>
-
-              <div class="flex flex-col gap-2">
-                <div class="text-sm text-muted">
-                  {{ $t('subscription.totalCredits') }}
-                </div>
-                <Skeleton v-if="isLoadingBalance" width="8rem" height="2rem" />
-                <div v-else class="text-2xl font-bold">
-                  {{ showZeroState ? '0' : totalCredits }}
-                </div>
-              </div>
-
-              <!-- Credit Breakdown -->
-              <table class="text-sm text-muted">
-                <tbody>
-                  <tr>
-                    <td class="pr-4 font-bold text-left align-middle">
-                      <Skeleton
-                        v-if="isLoadingBalance"
-                        width="5rem"
-                        height="1rem"
-                      />
-                      <span v-else>{{
-                        showZeroState ? '0 / 0' : includedCreditsDisplay
-                      }}</span>
-                    </td>
-                    <td class="align-middle" :title="creditsRemainingLabel">
-                      {{ creditsRemainingLabel }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="pr-4 font-bold text-left align-middle">
-                      <Skeleton
-                        v-if="isLoadingBalance"
-                        width="3rem"
-                        height="1rem"
-                      />
-                      <span v-else>{{
-                        showZeroState ? '0' : prepaidCredits
-                      }}</span>
-                    </td>
-                    <td
-                      class="align-middle"
-                      :title="$t('subscription.creditsYouveAdded')"
-                    >
-                      {{ $t('subscription.creditsYouveAdded') }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-
-              <div class="flex items-center justify-between">
-                <a
-                  href="https://platform.comfy.org/profile/usage"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-sm underline text-center text-muted"
-                >
-                  {{ $t('subscription.viewUsageHistory') }}
-                </a>
                 <Button
-                  v-if="isActiveSubscription && !showZeroState"
-                  variant="secondary"
-                  class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
-                  @click="handleAddApiCredits"
+                  variant="muted-textonly"
+                  size="icon-sm"
+                  class="absolute top-4 right-4"
+                  :loading="isLoadingBalance"
+                  @click="handleRefresh"
                 >
-                  {{ $t('subscription.addCredits') }}
+                  <i class="pi pi-sync text-text-secondary text-sm" />
                 </Button>
+
+                <div class="flex flex-col gap-2">
+                  <div class="text-sm text-muted">
+                    {{ $t('subscription.totalCredits') }}
+                  </div>
+                  <Skeleton
+                    v-if="isLoadingBalance"
+                    width="8rem"
+                    height="2rem"
+                  />
+                  <div v-else class="text-2xl font-bold">
+                    {{ showZeroState ? '0' : totalCredits }}
+                  </div>
+                </div>
+
+                <!-- Credit Breakdown -->
+                <table class="text-sm text-muted">
+                  <tbody>
+                    <tr>
+                      <td class="pr-4 font-bold text-left align-middle">
+                        <Skeleton
+                          v-if="isLoadingBalance"
+                          width="5rem"
+                          height="1rem"
+                        />
+                        <span v-else>{{
+                          showZeroState ? '0 / 0' : includedCreditsDisplay
+                        }}</span>
+                      </td>
+                      <td class="align-middle" :title="creditsRemainingLabel">
+                        {{ creditsRemainingLabel }}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="pr-4 font-bold text-left align-middle">
+                        <Skeleton
+                          v-if="isLoadingBalance"
+                          width="3rem"
+                          height="1rem"
+                        />
+                        <span v-else>{{
+                          showZeroState ? '0' : prepaidCredits
+                        }}</span>
+                      </td>
+                      <td
+                        class="align-middle"
+                        :title="$t('subscription.creditsYouveAdded')"
+                      >
+                        {{ $t('subscription.creditsYouveAdded') }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+
+                <div class="flex items-center justify-between">
+                  <Button
+                    v-if="isActiveSubscription && !showZeroState"
+                    variant="secondary"
+                    class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                    @click="handleAddApiCredits"
+                  >
+                    {{ $t('subscription.addCredits') }}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="isActiveSubscription" class="flex flex-col gap-2">
+            <div class="text-sm text-text-primary">
+              {{ $t('subscription.yourPlanIncludes') }}
+            </div>
+
+            <div class="flex flex-col gap-0">
+              <div
+                v-for="benefit in tierBenefits"
+                :key="benefit.key"
+                class="flex items-center gap-2 py-2"
+              >
+                <i
+                  v-if="benefit.type === 'feature'"
+                  class="pi pi-check text-xs text-text-primary"
+                />
+                <i
+                  v-else-if="benefit.type === 'icon' && benefit.icon"
+                  :class="[benefit.icon, 'text-xs text-text-primary']"
+                />
+                <span
+                  v-else-if="benefit.type === 'metric' && benefit.value"
+                  class="text-sm font-normal whitespace-nowrap text-text-primary"
+                >
+                  {{ benefit.value }}
+                </span>
+                <span class="text-sm text-muted">
+                  {{ benefit.label }}
+                </span>
               </div>
             </div>
           </div>
         </div>
+      </div>
 
+      <!-- Members invoice card -->
+      <div
+        v-if="isActiveSubscription && !isInPersonalWorkspace"
+        class="mt-6 flex gap-1 rounded-2xl border border-interface-stroke p-6 justify-between items-center text-sm"
+      >
         <div class="flex flex-col gap-2">
-          <div class="text-sm text-text-primary">
-            {{ $t('subscription.yourPlanIncludes') }}
-          </div>
-
-          <div class="flex flex-col gap-0">
-            <div
-              v-for="benefit in tierBenefits"
-              :key="benefit.key"
-              class="flex items-center gap-2 py-2"
-            >
-              <i
-                v-if="benefit.type === 'feature'"
-                class="pi pi-check text-xs text-text-primary"
-              />
-              <span
-                v-else-if="benefit.type === 'metric' && benefit.value"
-                class="text-sm font-normal whitespace-nowrap text-text-primary"
-              >
-                {{ benefit.value }}
-              </span>
-              <span class="text-sm text-muted">
-                {{ benefit.label }}
-              </span>
-            </div>
-          </div>
+          <h4 class="text-sm text-text-primary m-0">
+            {{ $t('subscription.nextMonthInvoice') }}
+          </h4>
+          <span
+            class="text-muted-foreground underline cursor-pointer"
+            @click="manageSubscription"
+          >
+            {{ $t('subscription.invoiceHistory') }}
+          </span>
+        </div>
+        <div class="flex flex-col gap-2 items-end">
+          <h4 class="m-0 font-bold">${{ nextMonthInvoice }}</h4>
+          <h5 class="m-0 text-muted-foreground">
+            {{ $t('subscription.memberCount', memberCount) }}
+          </h5>
         </div>
       </div>
-    </div>
 
-    <!-- View More Details - Outside main content -->
-    <div class="flex items-center gap-2 py-4">
-      <i class="pi pi-external-link text-muted"></i>
-      <a
-        href="https://www.comfy.org/cloud/pricing"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-sm underline hover:opacity-80 text-muted"
-      >
-        {{ $t('subscription.viewMoreDetailsPlans') }}
-      </a>
-    </div>
+      <!-- View More Details - Outside main content -->
+      <div class="flex items-center gap-2 py-6">
+        <i class="pi pi-external-link text-muted"></i>
+        <a
+          href="https://www.comfy.org/cloud/pricing"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-sm underline hover:opacity-80 text-muted"
+        >
+          {{ $t('subscription.viewMoreDetailsPlans') }}
+        </a>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -251,13 +341,17 @@ import Skeleton from 'primevue/skeleton'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useToast } from 'primevue/usetoast'
+
+import StatusBadge from '@/components/common/StatusBadge.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useDialogService } from '@/services/dialogService'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useBillingOperationStore } from '@/stores/billingOperationStore'
 import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
-import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useDialogService } from '@/services/dialogService'
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import {
   DEFAULT_TIER_KEY,
   TIER_TO_KEY,
@@ -269,51 +363,121 @@ import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { cn } from '@/utils/tailwindUtil'
 
-const authActions = useFirebaseAuthActions()
 const workspaceStore = useTeamWorkspaceStore()
-const { isWorkspaceSubscribed, isInPersonalWorkspace } =
+const { isWorkspaceSubscribed, isInPersonalWorkspace, members } =
   storeToRefs(workspaceStore)
-const { subscribeWorkspace } = workspaceStore
 const { permissions, workspaceRole } = useWorkspaceUI()
 const { t, n } = useI18n()
-const { showBillingComingSoonDialog } = useDialogService()
+const toast = useToast()
+
+const billingOperationStore = useBillingOperationStore()
+const isSettingUp = computed(() => billingOperationStore.isSettingUp)
+
+const {
+  isActiveSubscription,
+  subscription,
+  showSubscriptionDialog,
+  manageSubscription,
+  fetchStatus,
+  fetchBalance,
+  plans: apiPlans
+} = useBillingContext()
+
+const { showCancelSubscriptionDialog } = useDialogService()
+
+const isResubscribing = ref(false)
+
+async function handleResubscribe() {
+  isResubscribing.value = true
+  try {
+    await workspaceApi.resubscribe()
+    toast.add({
+      severity: 'success',
+      summary: t('subscription.resubscribeSuccess'),
+      life: 5000
+    })
+    await Promise.all([fetchStatus(), fetchBalance()])
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : 'Failed to resubscribe'
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: message,
+      life: 5000
+    })
+  } finally {
+    isResubscribing.value = false
+  }
+}
+
+// Only show cancelled state for team workspaces (workspace billing)
+// Personal workspaces use legacy billing which has different cancellation semantics
+const isCancelled = computed(
+  () =>
+    !isInPersonalWorkspace.value && (subscription.value?.isCancelled ?? false)
+)
 
 // Show subscribe prompt to owners without active subscription
+// Don't show if subscription is cancelled (still active until end date)
 const showSubscribePrompt = computed(() => {
   if (workspaceRole.value !== 'owner') return false
+  if (isCancelled.value) return false
   if (isInPersonalWorkspace.value) return !isActiveSubscription.value
   return !isWorkspaceSubscribed.value
 })
 
-// MEMBER view - members can't manage subscription, show read-only zero state
-const isMemberView = computed(() => !permissions.value.canManageSubscription)
+// MEMBER view without subscription - members can't manage subscription
+const isMemberView = computed(
+  () =>
+    !permissions.value.canManageSubscription &&
+    !isActiveSubscription.value &&
+    !isWorkspaceSubscribed.value
+)
 
 // Show zero state for credits (no real billing data yet)
 const showZeroState = computed(
   () => showSubscribePrompt.value || isMemberView.value
 )
 
-// Subscribe workspace - show billing coming soon dialog for team workspaces
+// Subscribe workspace - opens the subscription dialog (personal or workspace variant)
 function handleSubscribeWorkspace() {
-  if (!isInPersonalWorkspace.value) {
-    showBillingComingSoonDialog()
-    return
-  }
-  subscribeWorkspace('PRO_MONTHLY')
+  showSubscriptionDialog()
 }
+const subscriptionTier = computed(() => subscription.value?.tier ?? null)
+const isYearlySubscription = computed(
+  () => subscription.value?.duration === 'ANNUAL'
+)
 
-const {
-  isActiveSubscription,
-  isCancelled,
-  formattedRenewalDate,
-  formattedEndDate,
-  subscriptionTier,
-  subscriptionTierName,
-  subscriptionStatus,
-  isYearlySubscription
-} = useSubscription()
+const formattedRenewalDate = computed(() => {
+  if (!subscription.value?.renewalDate) return ''
+  const renewalDate = new Date(subscription.value.renewalDate)
+  return renewalDate.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+})
 
-const { show: showSubscriptionDialog } = useSubscriptionDialog()
+const formattedEndDate = computed(() => {
+  if (!subscription.value?.endDate) return ''
+  const endDate = new Date(subscription.value.endDate)
+  return endDate.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+})
+
+const subscriptionTierName = computed(() => {
+  const tier = subscriptionTier.value
+  if (!tier) return ''
+  const key = TIER_TO_KEY[tier] ?? 'standard'
+  const baseName = t(`subscription.tiers.${key}.name`)
+  return isYearlySubscription.value
+    ? t('subscription.tierNameYearly', { name: baseName })
+    : baseName
+})
 
 const planMenu = ref<InstanceType<typeof Menu> | null>(null)
 
@@ -321,8 +485,8 @@ const planMenuItems = computed(() => [
   {
     label: t('subscription.cancelSubscription'),
     icon: 'pi pi-times',
-    command: async () => {
-      await authActions.accessBillingPortal()
+    command: () => {
+      showCancelSubscriptionDialog(subscription.value?.endDate ?? undefined)
     }
   }
 ])
@@ -336,9 +500,29 @@ const tierPrice = computed(() =>
   getTierPrice(tierKey.value, isYearlySubscription.value)
 )
 
+const memberCount = computed(() => members.value.length)
+const nextMonthInvoice = computed(() => memberCount.value * tierPrice.value)
+
+function getApiPlanForTier(tierKey: TierKey, duration: 'monthly' | 'yearly') {
+  const apiDuration = duration === 'yearly' ? 'ANNUAL' : 'MONTHLY'
+  const apiTier = tierKey.toUpperCase()
+  return apiPlans.value.find(
+    (p) => p.tier === apiTier && p.duration === apiDuration
+  )
+}
+
+function getMaxSeatsFromApi(tierKey: TierKey): number | null {
+  const plan = getApiPlanForTier(tierKey, 'monthly')
+  return plan ? plan.max_seats : null
+}
+
+function getMaxMembers(tierKey: TierKey): number {
+  return getMaxSeatsFromApi(tierKey) ?? getTierFeatures(tierKey).maxMembers
+}
+
 const refillsDate = computed(() => {
-  if (!subscriptionStatus.value?.renewal_date) return ''
-  const date = new Date(subscriptionStatus.value.renewal_date)
+  if (!subscription.value?.renewalDate) return ''
+  const date = new Date(subscription.value.renewalDate)
   const day = String(date.getDate()).padStart(2, '0')
   const month = String(date.getMonth() + 1).padStart(2, '0')
   const year = String(date.getFullYear()).slice(-2)
@@ -366,19 +550,26 @@ const includedCreditsDisplay = computed(
 )
 
 // Tier benefits for v-for loop
-type BenefitType = 'metric' | 'feature'
+type BenefitType = 'metric' | 'feature' | 'icon'
 
 interface Benefit {
   key: string
   type: BenefitType
   label: string
   value?: string
+  icon?: string
 }
 
 const tierBenefits = computed((): Benefit[] => {
   const key = tierKey.value
 
   const benefits: Benefit[] = [
+    {
+      key: 'members',
+      type: 'icon',
+      label: t('subscription.membersLabel', { count: getMaxMembers(key) }),
+      icon: 'pi pi-user'
+    },
     {
       key: 'maxDuration',
       type: 'metric',
@@ -436,6 +627,7 @@ function handleWindowFocus() {
 
 onMounted(() => {
   window.addEventListener('focus', handleWindowFocus)
+  void Promise.all([fetchStatus(), fetchBalance()])
 })
 
 onBeforeUnmount(() => {

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

@@ -127,7 +127,8 @@ import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
 import PricingTable from '@/platform/cloud/subscription/components/PricingTable.vue'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 
@@ -139,8 +140,10 @@ const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()
 
-const { fetchStatus, isActiveSubscription, isSubscriptionEnabled } =
-  useSubscription()
+const { fetchStatus, isActiveSubscription } = useBillingContext()
+
+const isSubscriptionEnabled = (): boolean =>
+  Boolean(isCloud && window.__CONFIG__?.subscription_required)
 
 // Legacy price for non-tier flow with locale-aware formatting
 const formattedMonthlyPrice = new Intl.NumberFormat(

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

@@ -0,0 +1,329 @@
+<template>
+  <div
+    class="relative flex flex-col p-4 pt-8 md:p-16 !overflow-y-auto h-full gap-8"
+  >
+    <Button
+      v-if="checkoutStep === 'preview'"
+      size="icon"
+      variant="muted-textonly"
+      class="rounded-full shrink-0 text-text-secondary hover:bg-white/10 absolute left-2.5 top-2.5"
+      :aria-label="$t('g.back')"
+      @click="handleBackToPricing"
+    >
+      <i class="pi pi-arrow-left text-xl" />
+    </Button>
+
+    <Button
+      size="icon"
+      variant="muted-textonly"
+      class="rounded-full shrink-0 text-text-secondary hover:bg-white/10 absolute right-2.5 top-2.5"
+      :aria-label="$t('g.close')"
+      @click="handleClose"
+    >
+      <i class="pi pi-times text-xl" />
+    </Button>
+
+    <!-- Pricing Table Step -->
+    <PricingTableWorkspace
+      v-if="checkoutStep === 'pricing'"
+      class="flex-1"
+      :is-loading="isLoadingPreview || isResubscribing"
+      :loading-tier="loadingTier"
+      @subscribe="handleSubscribeClick"
+      @resubscribe="handleResubscribe"
+    />
+
+    <!-- Subscription Preview Step - New Subscription -->
+    <SubscriptionAddPaymentPreviewWorkspace
+      v-else-if="
+        checkoutStep === 'preview' &&
+        previewData &&
+        previewData.transition_type === 'new_subscription'
+      "
+      :preview-data="previewData"
+      :tier-key="selectedTierKey!"
+      :billing-cycle="selectedBillingCycle"
+      :is-loading="isSubscribing || isPolling"
+      @add-credit-card="handleAddCreditCard"
+      @back="handleBackToPricing"
+    />
+
+    <!-- Subscription Preview Step - Plan Transition -->
+    <SubscriptionTransitionPreviewWorkspace
+      v-else-if="
+        checkoutStep === 'preview' &&
+        previewData &&
+        previewData.transition_type !== 'new_subscription'
+      "
+      :preview-data="previewData"
+      :is-loading="isSubscribing || isPolling"
+      @confirm="handleConfirmTransition"
+      @back="handleBackToPricing"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
+import type { PreviewSubscribeResponse } from '@/platform/workspace/api/workspaceApi'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useBillingOperationStore } from '@/stores/billingOperationStore'
+
+import PricingTableWorkspace from './PricingTableWorkspace.vue'
+import SubscriptionAddPaymentPreviewWorkspace from './SubscriptionAddPaymentPreviewWorkspace.vue'
+import SubscriptionTransitionPreviewWorkspace from './SubscriptionTransitionPreviewWorkspace.vue'
+
+type CheckoutStep = 'pricing' | 'preview'
+type CheckoutTierKey = Exclude<TierKey, 'founder'>
+
+const props = defineProps<{
+  onClose: () => void
+}>()
+
+const emit = defineEmits<{
+  close: [subscribed: boolean]
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { subscribe, previewSubscribe, plans, fetchStatus, fetchBalance } =
+  useBillingContext()
+
+const billingOperationStore = useBillingOperationStore()
+const isPolling = computed(() => billingOperationStore.hasPendingOperations)
+
+const checkoutStep = ref<CheckoutStep>('pricing')
+const isLoadingPreview = ref(false)
+const loadingTier = ref<CheckoutTierKey | null>(null)
+const isSubscribing = ref(false)
+const isResubscribing = ref(false)
+const previewData = ref<PreviewSubscribeResponse | null>(null)
+const selectedTierKey = ref<CheckoutTierKey | null>(null)
+const selectedBillingCycle = ref<BillingCycle>('yearly')
+
+function getApiPlanSlug(
+  tierKey: CheckoutTierKey,
+  billingCycle: BillingCycle
+): string | null {
+  const apiDuration = billingCycle === 'yearly' ? 'ANNUAL' : 'MONTHLY'
+  const apiTier = tierKey.toUpperCase()
+  const plan = plans.value.find(
+    (p) => p.tier === apiTier && p.duration === apiDuration
+  )
+  return plan?.slug ?? null
+}
+
+async function handleSubscribeClick(payload: {
+  tierKey: CheckoutTierKey
+  billingCycle: BillingCycle
+}) {
+  const { tierKey, billingCycle } = payload
+
+  isLoadingPreview.value = true
+  loadingTier.value = tierKey
+  selectedTierKey.value = tierKey
+  selectedBillingCycle.value = billingCycle
+
+  try {
+    const planSlug = getApiPlanSlug(tierKey, billingCycle)
+    if (!planSlug) {
+      toast.add({
+        severity: 'error',
+        summary: 'Unable to subscribe',
+        detail: 'This plan is not available',
+        life: 5000
+      })
+      return
+    }
+    const response = await previewSubscribe(planSlug)
+
+    if (!response || !response.allowed) {
+      toast.add({
+        severity: 'error',
+        summary: 'Unable to subscribe',
+        detail: response?.reason || 'This plan is not available',
+        life: 5000
+      })
+      return
+    }
+
+    previewData.value = response
+    checkoutStep.value = 'preview'
+  } catch (error) {
+    const message =
+      error instanceof Error
+        ? error.message
+        : 'Failed to load subscription preview'
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: message,
+      life: 5000
+    })
+  } finally {
+    isLoadingPreview.value = false
+    loadingTier.value = null
+  }
+}
+
+function handleBackToPricing() {
+  checkoutStep.value = 'pricing'
+  previewData.value = null
+}
+
+async function handleAddCreditCard() {
+  if (!selectedTierKey.value) return
+
+  isSubscribing.value = true
+  try {
+    const planSlug = getApiPlanSlug(
+      selectedTierKey.value,
+      selectedBillingCycle.value
+    )
+    if (!planSlug) return
+    const response = await subscribe(
+      planSlug,
+      'https://www.comfy.org/payment/success',
+      'https://www.comfy.org/payment/failed'
+    )
+
+    if (!response) return
+
+    if (response.status === 'subscribed') {
+      toast.add({
+        severity: 'success',
+        summary: t('subscription.required.pollingSuccess'),
+        life: 5000
+      })
+      await Promise.all([fetchStatus(), fetchBalance()])
+      emit('close', true)
+    } else if (
+      response.status === 'needs_payment_method' &&
+      response.payment_method_url
+    ) {
+      window.open(response.payment_method_url, '_blank')
+      billingOperationStore.startOperation(
+        response.billing_op_id,
+        'subscription'
+      )
+    } else if (response.status === 'pending_payment') {
+      billingOperationStore.startOperation(
+        response.billing_op_id,
+        'subscription'
+      )
+    }
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : 'Failed to subscribe'
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: message,
+      life: 5000
+    })
+  } finally {
+    isSubscribing.value = false
+  }
+}
+
+async function handleConfirmTransition() {
+  if (!selectedTierKey.value) return
+
+  isSubscribing.value = true
+  try {
+    const planSlug = getApiPlanSlug(
+      selectedTierKey.value,
+      selectedBillingCycle.value
+    )
+    if (!planSlug) return
+    const response = await subscribe(
+      planSlug,
+      'https://www.comfy.org/payment/success',
+      'https://www.comfy.org/payment/failed'
+    )
+
+    if (!response) return
+
+    if (response.status === 'subscribed') {
+      toast.add({
+        severity: 'success',
+        summary: t('subscription.required.pollingSuccess'),
+        life: 5000
+      })
+      await Promise.all([fetchStatus(), fetchBalance()])
+      emit('close', true)
+    } else if (
+      response.status === 'needs_payment_method' &&
+      response.payment_method_url
+    ) {
+      window.open(response.payment_method_url, '_blank')
+      billingOperationStore.startOperation(
+        response.billing_op_id,
+        'subscription'
+      )
+    } else if (response.status === 'pending_payment') {
+      billingOperationStore.startOperation(
+        response.billing_op_id,
+        'subscription'
+      )
+    }
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : 'Failed to update subscription'
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: message,
+      life: 5000
+    })
+  } finally {
+    isSubscribing.value = false
+  }
+}
+
+async function handleResubscribe() {
+  isResubscribing.value = true
+  try {
+    await workspaceApi.resubscribe()
+    toast.add({
+      severity: 'success',
+      summary: t('subscription.resubscribeSuccess'),
+      life: 5000
+    })
+    await Promise.all([fetchStatus(), fetchBalance()])
+    emit('close', true)
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : 'Failed to resubscribe'
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: message,
+      life: 5000
+    })
+  } finally {
+    isResubscribing.value = false
+  }
+}
+
+function handleClose() {
+  props.onClose()
+}
+</script>
+
+<style scoped>
+.legacy-dialog :deep(.bg-comfy-menu-secondary) {
+  background-color: transparent;
+}
+
+.legacy-dialog :deep(.p-button) {
+  color: white;
+}
+</style>

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

@@ -0,0 +1,264 @@
+<template>
+  <h2 class="text-xl lg:text-2xl text-muted-foreground m-0 text-center mb-8">
+    {{ $t('subscription.preview.confirmPlanChange') }}
+  </h2>
+  <div
+    class="flex flex-col justify-between items-stretch mx-auto text-sm h-full"
+  >
+    <div>
+      <!-- Plan Comparison Header -->
+      <div class="flex items-center gap-4">
+        <!-- Current Plan -->
+        <div class="flex flex-col gap-1 w-[250px]">
+          <span class="text-base-foreground text-sm">
+            {{ currentTierName }}
+          </span>
+          <div class="flex items-baseline gap-1">
+            <span class="text-2xl font-semibold text-base-foreground">
+              ${{ currentDisplayPrice }}
+            </span>
+            <span class="text-sm text-base-foreground">
+              {{ $t('subscription.usdPerMonthPerMember') }}
+            </span>
+          </div>
+          <div class="flex items-center gap-1 text-muted-foreground text-sm">
+            <i class="icon-[lucide--component] text-amber-400 text-xs" />
+            <span
+              >{{ currentDisplayCredits }}
+              {{ $t('subscription.perMonth') }}</span
+            >
+          </div>
+          <span class="text-muted-foreground text-sm inline">
+            {{
+              $t('subscription.preview.ends', { date: currentPeriodEndDate })
+            }}
+          </span>
+        </div>
+
+        <!-- Arrow -->
+        <i class="pi pi-arrow-right text-muted-foreground w-8 h-8" />
+
+        <!-- New Plan -->
+        <div class="flex flex-col gap-1">
+          <span class="text-base-foreground text-sm font-semibold">
+            {{ newTierName }}
+          </span>
+          <div class="flex items-baseline gap-1">
+            <span class="text-2xl font-semibold text-base-foreground">
+              ${{ newDisplayPrice }}
+            </span>
+            <span class="text-sm text-base-foreground">
+              {{ $t('subscription.usdPerMonthPerMember') }}
+            </span>
+          </div>
+          <div class="flex items-center gap-1 text-muted-foreground text-sm">
+            <i class="icon-[lucide--component] text-amber-400 text-xs" />
+            <span
+              >{{ newDisplayCredits }} {{ $t('subscription.perMonth') }}</span
+            >
+          </div>
+          <span class="text-muted-foreground text-sm">
+            {{ $t('subscription.preview.starting', { date: effectiveDate }) }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Credits Section -->
+      <div class="flex flex-col gap-3 pt-12 pb-6">
+        <div class="flex items-center justify-between">
+          <span class="text-base-foreground">
+            {{ $t('subscription.preview.eachMonthCreditsRefill') }}
+          </span>
+          <div class="flex items-center gap-1">
+            <i class="icon-[lucide--component] text-amber-400 text-sm" />
+            <span class="font-bold text-base-foreground">
+              {{ newDisplayCredits }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Proration Section -->
+      <div
+        v-if="showProration"
+        class="flex flex-col gap-2 border-t border-border-subtle pt-6 pb-6"
+      >
+        <div
+          v-if="proratedRefundCents > 0"
+          class="flex items-center justify-between"
+        >
+          <span class="text-muted-foreground">
+            {{
+              $t('subscription.preview.proratedRefund', {
+                plan: currentTierName
+              })
+            }}
+          </span>
+          <span class="text-muted-foreground">-${{ proratedRefund }}</span>
+        </div>
+        <div
+          v-if="proratedChargeCents > 0"
+          class="flex items-center justify-between"
+        >
+          <span class="text-muted-foreground">
+            {{
+              $t('subscription.preview.proratedCharge', { plan: newTierName })
+            }}
+          </span>
+          <span class="text-muted-foreground">${{ proratedCharge }}</span>
+        </div>
+      </div>
+
+      <!-- Total Due Section -->
+      <div class="flex flex-col gap-2 border-t border-border-subtle pt-6">
+        <div class="flex text-base items-center justify-between">
+          <span class="text-base-foreground">
+            {{ $t('subscription.preview.totalDueToday') }}
+          </span>
+          <span class="font-bold text-base-foreground">
+            ${{ totalDueToday }}
+          </span>
+        </div>
+        <span class="text-muted-foreground text-sm">
+          {{
+            $t('subscription.preview.nextPaymentDue', {
+              date: nextPaymentDate
+            })
+          }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex flex-col gap-2 pt-8">
+      <Button
+        variant="secondary"
+        size="lg"
+        class="w-full rounded-lg"
+        :loading="isLoading"
+        @click="$emit('confirm')"
+      >
+        {{ $t('subscription.preview.confirm') }}
+      </Button>
+
+      <Button
+        variant="textonly"
+        class="text-muted-foreground hover:text-base-foreground hover:bg-none text-center cursor-pointer transition-colors text-xs"
+        @click="$emit('back')"
+      >
+        {{ $t('subscription.preview.backToAllPlans') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { getTierCredits } from '@/platform/cloud/subscription/constants/tierPricing'
+import type { PreviewSubscribeResponse } from '@/platform/workspace/api/workspaceApi'
+
+interface Props {
+  previewData: PreviewSubscribeResponse
+  isLoading?: boolean
+}
+
+const { previewData, isLoading = false } = defineProps<Props>()
+
+defineEmits<{
+  confirm: []
+  back: []
+}>()
+
+const { t, n } = useI18n()
+
+function formatTierName(tier: string): string {
+  return t(`subscription.tiers.${tier.toLowerCase()}.name`)
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+}
+
+const currentTierName = computed(() =>
+  previewData.current_plan ? formatTierName(previewData.current_plan.tier) : ''
+)
+
+const newTierName = computed(() => formatTierName(previewData.new_plan.tier))
+
+const currentDisplayPrice = computed(() =>
+  previewData.current_plan
+    ? (previewData.current_plan.price_cents / 100).toFixed(0)
+    : '0'
+)
+
+const newDisplayPrice = computed(() =>
+  (previewData.new_plan.price_cents / 100).toFixed(0)
+)
+
+const currentDisplayCredits = computed(() => {
+  if (!previewData.current_plan) return n(0)
+  const tierKey = previewData.current_plan.tier.toLowerCase() as
+    | 'standard'
+    | 'creator'
+    | 'pro'
+  return n(getTierCredits(tierKey))
+})
+
+const newDisplayCredits = computed(() => {
+  const tierKey = previewData.new_plan.tier.toLowerCase() as
+    | 'standard'
+    | 'creator'
+    | 'pro'
+  return n(getTierCredits(tierKey))
+})
+
+const currentPeriodEndDate = computed(() =>
+  previewData.current_plan?.period_end
+    ? formatDate(previewData.current_plan.period_end)
+    : ''
+)
+
+const effectiveDate = computed(() => formatDate(previewData.effective_at))
+
+const showProration = computed(() => previewData.is_immediate)
+
+const proratedRefundCents = computed(() => {
+  if (!previewData.current_plan || !previewData.is_immediate) return 0
+  const chargeToday = previewData.cost_today_cents
+  const newPlanCost = previewData.new_plan.price_cents
+  if (chargeToday < newPlanCost) {
+    return newPlanCost - chargeToday
+  }
+  return 0
+})
+
+const proratedRefund = computed(() =>
+  (proratedRefundCents.value / 100).toFixed(2)
+)
+
+const proratedChargeCents = computed(() => {
+  if (!previewData.is_immediate) return 0
+  return previewData.cost_today_cents
+})
+
+const proratedCharge = computed(() =>
+  (proratedChargeCents.value / 100).toFixed(2)
+)
+
+const totalDueToday = computed(() =>
+  (previewData.cost_today_cents / 100).toFixed(2)
+)
+
+const nextPaymentDate = computed(() =>
+  previewData.new_plan.period_end
+    ? formatDate(previewData.new_plan.period_end)
+    : formatDate(previewData.effective_at)
+)
+</script>

src/platform/cloud/subscription/composables/useBillingPlans.ts

@@ -0,0 +1,60 @@
+import { computed, ref } from 'vue'
+
+import type { Plan } from '@/platform/workspace/api/workspaceApi'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+
+const plans = ref<Plan[]>([])
+const currentPlanSlug = ref<string | null>(null)
+const isLoading = ref(false)
+const error = ref<string | null>(null)
+
+export function useBillingPlans() {
+  async function fetchPlans() {
+    if (isLoading.value) return
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const response = await workspaceApi.getBillingPlans()
+      plans.value = response.plans
+      currentPlanSlug.value = response.current_plan_slug ?? null
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to fetch plans'
+      console.error('[useBillingPlans] Failed to fetch plans:', err)
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const monthlyPlans = computed(() =>
+    plans.value.filter((p) => p.duration === 'MONTHLY')
+  )
+
+  const annualPlans = computed(() =>
+    plans.value.filter((p) => p.duration === 'ANNUAL')
+  )
+
+  function getPlanBySlug(slug: string) {
+    return plans.value.find((p) => p.slug === slug)
+  }
+
+  function getPlansForTier(tier: Plan['tier']) {
+    return plans.value.filter((p) => p.tier === tier)
+  }
+
+  const isCurrentPlan = (slug: string) => currentPlanSlug.value === slug
+
+  return {
+    plans,
+    currentPlanSlug,
+    isLoading,
+    error,
+    monthlyPlans,
+    annualPlans,
+    fetchPlans,
+    getPlanBySlug,
+    getPlansForTier,
+    isCurrentPlan
+  }
+}

src/platform/cloud/subscription/composables/useSubscription.test.ts

@@ -1,22 +1,48 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { effectScope } from 'vue'
 
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 
-// Create mocks
-const mockIsLoggedIn = ref(false)
-const mockReportError = vi.fn()
-const mockAccessBillingPortal = vi.fn()
-const mockShowSubscriptionRequiredDialog = vi.fn()
-const mockGetAuthHeader = vi.fn(() =>
-  Promise.resolve({ Authorization: 'Bearer test-token' })
-)
-const mockTelemetry = {
-  trackSubscription: vi.fn(),
-  trackMonthlySubscriptionCancelled: vi.fn()
+const {
+  mockIsLoggedIn,
+  mockReportError,
+  mockAccessBillingPortal,
+  mockShowSubscriptionRequiredDialog,
+  mockGetAuthHeader,
+  mockTelemetry,
+  mockUserId,
+  mockIsCloud
+} = vi.hoisted(() => ({
+  mockIsLoggedIn: { value: false },
+  mockIsCloud: { value: true },
+  mockReportError: vi.fn(),
+  mockAccessBillingPortal: vi.fn(),
+  mockShowSubscriptionRequiredDialog: vi.fn(),
+  mockGetAuthHeader: vi.fn(() =>
+    Promise.resolve({ Authorization: 'Bearer test-token' })
+  ),
+  mockTelemetry: {
+    trackSubscription: vi.fn(),
+    trackMonthlySubscriptionCancelled: vi.fn()
+  },
+  mockUserId: { value: 'user-123' }
+}))
+
+let scope: ReturnType<typeof effectScope> | undefined
+
+function useSubscriptionWithScope() {
+  if (!scope) {
+    throw new Error('Test scope not initialized')
+  }
+
+  const subscription = scope.run(() => useSubscription())
+  if (!subscription) {
+    throw new Error('Failed to initialize subscription composable')
+  }
+
+  return subscription
 }
 
-// Mock dependencies
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: vi.fn(() => ({
     isLoggedIn: mockIsLoggedIn
@@ -53,7 +79,9 @@ vi.mock('@/composables/useErrorHandling', () => ({
 }))
 
 vi.mock('@/platform/distribution/types', () => ({
-  isCloud: true
+  get isCloud() {
+    return mockIsCloud.value
+  }
 }))
 
 vi.mock('@/services/dialogService', () => ({
@@ -64,7 +92,10 @@ vi.mock('@/services/dialogService', () => ({
 
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({
-    getFirebaseAuthHeader: mockGetAuthHeader
+    getFirebaseAuthHeader: mockGetAuthHeader,
+    get userId() {
+      return mockUserId.value
+    }
   })),
   FirebaseAuthStoreError: class extends Error {}
 }))
@@ -73,11 +104,21 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
 global.fetch = vi.fn()
 
 describe('useSubscription', () => {
+  afterEach(() => {
+    scope?.stop()
+    scope = undefined
+  })
+
   beforeEach(() => {
+    scope?.stop()
+    scope = effectScope()
+
     vi.clearAllMocks()
     mockIsLoggedIn.value = false
     mockTelemetry.trackSubscription.mockReset()
     mockTelemetry.trackMonthlySubscriptionCancelled.mockReset()
+    mockUserId.value = 'user-123'
+    mockIsCloud.value = true
     window.__CONFIG__ = {
       subscription_required: true
     } as typeof window.__CONFIG__
@@ -103,7 +144,7 @@ describe('useSubscription', () => {
       } as Response)
 
       mockIsLoggedIn.value = true
-      const { isActiveSubscription, fetchStatus } = useSubscription()
+      const { isActiveSubscription, fetchStatus } = useSubscriptionWithScope()
 
       await fetchStatus()
       expect(isActiveSubscription.value).toBe(true)
@@ -120,7 +161,7 @@ describe('useSubscription', () => {
       } as Response)
 
       mockIsLoggedIn.value = true
-      const { isActiveSubscription, fetchStatus } = useSubscription()
+      const { isActiveSubscription, fetchStatus } = useSubscriptionWithScope()
 
       await fetchStatus()
       expect(isActiveSubscription.value).toBe(false)
@@ -137,7 +178,7 @@ describe('useSubscription', () => {
       } as Response)
 
       mockIsLoggedIn.value = true
-      const { formattedRenewalDate, fetchStatus } = useSubscription()
+      const { formattedRenewalDate, fetchStatus } = useSubscriptionWithScope()
 
       await fetchStatus()
       // The date format may vary based on timezone, so we just check it's a valid date string
@@ -147,7 +188,7 @@ describe('useSubscription', () => {
     })
 
     it('should return empty string when renewal date is not available', () => {
-      const { formattedRenewalDate } = useSubscription()
+      const { formattedRenewalDate } = useSubscriptionWithScope()
 
       expect(formattedRenewalDate.value).toBe('')
     })
@@ -164,14 +205,14 @@ describe('useSubscription', () => {
       } as Response)
 
       mockIsLoggedIn.value = true
-      const { subscriptionTier, fetchStatus } = useSubscription()
+      const { subscriptionTier, fetchStatus } = useSubscriptionWithScope()
 
       await fetchStatus()
       expect(subscriptionTier.value).toBe('CREATOR')
     })
 
     it('should return null when subscription tier is not available', () => {
-      const { subscriptionTier } = useSubscription()
+      const { subscriptionTier } = useSubscriptionWithScope()
 
       expect(subscriptionTier.value).toBeNull()
     })
@@ -191,7 +232,7 @@ describe('useSubscription', () => {
       } as Response)
 
       mockIsLoggedIn.value = true
-      const { fetchStatus } = useSubscription()
+      const { fetchStatus } = useSubscriptionWithScope()
 
       await fetchStatus()
 
@@ -212,7 +253,7 @@ describe('useSubscription', () => {
         json: async () => ({ message: 'Subscription not found' })
       } as Response)
 
-      const { fetchStatus } = useSubscription()
+      const { fetchStatus } = useSubscriptionWithScope()
 
       await expect(fetchStatus()).rejects.toThrow()
     })
@@ -232,7 +273,7 @@ describe('useSubscription', () => {
         .spyOn(window, 'open')
         .mockImplementation(() => null)
 
-      const { subscribe } = useSubscription()
+      const { subscribe } = useSubscriptionWithScope()
 
       await subscribe()
 
@@ -258,7 +299,7 @@ describe('useSubscription', () => {
         json: async () => ({})
       } as Response)
 
-      const { subscribe } = useSubscription()
+      const { subscribe } = useSubscriptionWithScope()
 
       await expect(subscribe()).rejects.toThrow()
     })
@@ -275,7 +316,7 @@ describe('useSubscription', () => {
         })
       } as Response)
 
-      const { requireActiveSubscription } = useSubscription()
+      const { requireActiveSubscription } = useSubscriptionWithScope()
 
       await requireActiveSubscription()
 
@@ -292,7 +333,7 @@ describe('useSubscription', () => {
         })
       } as Response)
 
-      const { requireActiveSubscription } = useSubscription()
+      const { requireActiveSubscription } = useSubscriptionWithScope()
 
       await requireActiveSubscription()
 
@@ -306,7 +347,7 @@ describe('useSubscription', () => {
         .spyOn(window, 'open')
         .mockImplementation(() => null)
 
-      const { handleViewUsageHistory } = useSubscription()
+      const { handleViewUsageHistory } = useSubscriptionWithScope()
       handleViewUsageHistory()
 
       expect(windowOpenSpy).toHaveBeenCalledWith(
@@ -322,7 +363,7 @@ describe('useSubscription', () => {
         .spyOn(window, 'open')
         .mockImplementation(() => null)
 
-      const { handleLearnMore } = useSubscription()
+      const { handleLearnMore } = useSubscriptionWithScope()
       handleLearnMore()
 
       expect(windowOpenSpy).toHaveBeenCalledWith(
@@ -334,7 +375,7 @@ describe('useSubscription', () => {
     })
 
     it('should call accessBillingPortal for invoice history', async () => {
-      const { handleInvoiceHistory } = useSubscription()
+      const { handleInvoiceHistory } = useSubscriptionWithScope()
 
       await handleInvoiceHistory()
 
@@ -342,7 +383,7 @@ describe('useSubscription', () => {
     })
 
     it('should call accessBillingPortal for manage subscription', async () => {
-      const { manageSubscription } = useSubscription()
+      const { manageSubscription } = useSubscriptionWithScope()
 
       await manageSubscription()
 
@@ -378,7 +419,7 @@ describe('useSubscription', () => {
         .mockResolvedValueOnce(cancelledResponse as Response)
 
       try {
-        const { fetchStatus, manageSubscription } = useSubscription()
+        const { fetchStatus, manageSubscription } = useSubscriptionWithScope()
 
         await fetchStatus()
         await manageSubscription()
@@ -422,7 +463,7 @@ describe('useSubscription', () => {
         .mockResolvedValueOnce(cancelledResponse as Response)
 
       try {
-        const { fetchStatus, manageSubscription } = useSubscription()
+        const { fetchStatus, manageSubscription } = useSubscriptionWithScope()
 
         await fetchStatus()
         await manageSubscription()

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -38,7 +38,8 @@ function useSubscriptionInternal() {
   const { reportError, accessBillingPortal } = useFirebaseAuthActions()
   const { showSubscriptionRequiredDialog } = useDialogService()
 
-  const { getFirebaseAuthHeader } = useFirebaseAuthStore()
+  const firebaseAuthStore = useFirebaseAuthStore()
+  const { getFirebaseAuthHeader } = firebaseAuthStore
   const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
   const { isLoggedIn } = useCurrentUser()
@@ -93,7 +94,9 @@ function useSubscriptionInternal() {
       : baseName
   })
 
-  const buildApiUrl = (path: string) => `${getComfyApiBaseUrl()}${path}`
+  function buildApiUrl(path: string): string {
+    return `${getComfyApiBaseUrl()}${path}`
+  }
 
   const fetchStatus = wrapWithErrorHandlingAsync(
     fetchSubscriptionStatus,
@@ -194,6 +197,7 @@ function useSubscriptionInternal() {
 
     const statusData = await response.json()
     subscriptionStatus.value = statusData
+
     return statusData
   }
 

src/platform/cloud/subscription/composables/useSubscriptionActions.test.ts

@@ -20,6 +20,12 @@ vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   })
 }))
 
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    fetchStatus: mockFetchStatus
+  })
+}))
+
 vi.mock('@/services/dialogService', () => ({
   useDialogService: () => ({
     showTopUpCreditsDialog: mockShowTopUpCreditsDialog

src/platform/cloud/subscription/composables/useSubscriptionActions.ts

@@ -1,7 +1,7 @@
 import { onMounted, ref } from 'vue'
 
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
@@ -15,7 +15,7 @@ export function useSubscriptionActions() {
   const authActions = useFirebaseAuthActions()
   const commandStore = useCommandStore()
   const telemetry = useTelemetry()
-  const { fetchStatus } = useSubscription()
+  const { fetchStatus } = useBillingContext()
 
   const isLoadingSupport = ref(false)
 

src/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.test.ts

@@ -4,12 +4,12 @@ import type { EffectScope } from 'vue'
 
 import type { CloudSubscriptionStatusResponse } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useSubscriptionCancellationWatcher } from '@/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher'
-import type { TelemetryProvider } from '@/platform/telemetry/types'
+import type { TelemetryDispatcher } from '@/platform/telemetry/types'
 
 describe('useSubscriptionCancellationWatcher', () => {
   const trackMonthlySubscriptionCancelled = vi.fn()
   const telemetryMock: Pick<
-    TelemetryProvider,
+    TelemetryDispatcher,
     'trackMonthlySubscriptionCancelled'
   > = {
     trackMonthlySubscriptionCancelled

src/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.ts

@@ -2,7 +2,7 @@ import { onScopeDispose, ref } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { defaultWindow, useEventListener, useTimeoutFn } from '@vueuse/core'
 
-import type { TelemetryProvider } from '@/platform/telemetry/types'
+import type { TelemetryDispatcher } from '@/platform/telemetry/types'
 
 import type { CloudSubscriptionStatusResponse } from './useSubscription'
 
@@ -14,7 +14,10 @@ type CancellationWatcherOptions = {
   fetchStatus: () => Promise<CloudSubscriptionStatusResponse | null | void>
   isActiveSubscription: ComputedRef<boolean>
   subscriptionStatus: Ref<CloudSubscriptionStatusResponse | null>
-  telemetry: Pick<TelemetryProvider, 'trackMonthlySubscriptionCancelled'> | null
+  telemetry: Pick<
+    TelemetryDispatcher,
+    'trackMonthlySubscriptionCancelled'
+  > | null
   shouldWatchCancellation: () => boolean
 }
 

src/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts

@@ -1,14 +1,17 @@
-import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed } from 'vue'
 import type * as VueI18nModule from 'vue-i18n'
 
 import * as comfyCredits from '@/base/credits/comfyCredits'
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import type { operations } from '@/types/comfyRegistryTypes'
 
-type GetCustomerBalanceResponse =
-  operations['GetCustomerBalance']['responses']['200']['content']['application/json']
+// Shared mock state (reset in beforeEach)
+let mockBillingBalance: {
+  amountMicros: number
+  cloudCreditBalanceMicros?: number
+  prepaidBalanceMicros?: number
+} | null = null
+let mockBillingIsLoading = false
 
 vi.mock(
   'vue-i18n',
@@ -24,92 +27,41 @@ vi.mock(
   }
 )
 
-// Mock Firebase Auth and related modules
-vi.mock('vuefire', () => ({
-  useFirebaseAuth: vi.fn(() => ({
-    onAuthStateChanged: vi.fn(),
-    setPersistence: vi.fn()
-  }))
-}))
-
-vi.mock('firebase/auth', () => ({
-  onAuthStateChanged: vi.fn(() => {
-    // Mock the callback to be called immediately for testing
-    return vi.fn()
-  }),
-  onIdTokenChanged: vi.fn(),
-  setPersistence: vi.fn().mockResolvedValue(undefined),
-  browserLocalPersistence: {},
-  GoogleAuthProvider: class {
-    addScope = vi.fn()
-    setCustomParameters = vi.fn()
-  },
-  GithubAuthProvider: class {
-    addScope = vi.fn()
-    setCustomParameters = vi.fn()
-  }
-}))
-
-// Mock other dependencies
-vi.mock('@/services/dialogService', () => ({
-  useDialogService: () => ({
-    showDialog: vi.fn()
-  })
-}))
-
-vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({
-    track: vi.fn()
-  })
-}))
-
-vi.mock('@/stores/toastStore', () => ({
-  useToastStore: () => ({
-    add: vi.fn()
-  })
-}))
-
-vi.mock('@/stores/apiKeyAuthStore', () => ({
-  useApiKeyAuthStore: () => ({
-    headers: {}
+// Mock useBillingContext - returns computed refs that read from module-level state
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    balance: computed(() => mockBillingBalance),
+    isLoading: computed(() => mockBillingIsLoading)
   })
 }))
 
 describe('useSubscriptionCredits', () => {
-  let authStore: ReturnType<typeof useFirebaseAuthStore>
-
   beforeEach(() => {
-    setActivePinia(createPinia())
-    authStore = useFirebaseAuthStore()
+    mockBillingBalance = null
+    mockBillingIsLoading = false
     vi.clearAllMocks()
   })
 
   describe('totalCredits', () => {
     it('should return "0" when balance is null', () => {
-      authStore.balance = null
+      mockBillingBalance = null
       const { totalCredits } = useSubscriptionCredits()
       expect(totalCredits.value).toBe('0')
     })
 
-    it('should return "0" when amount_micros is missing', () => {
-      authStore.balance = {} as GetCustomerBalanceResponse
-      const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0')
-    })
-
-    it('should format amount_micros correctly', () => {
-      authStore.balance = { amount_micros: 100 } as GetCustomerBalanceResponse
+    it('should format amountMicros correctly', () => {
+      mockBillingBalance = { amountMicros: 100 }
       const { totalCredits } = useSubscriptionCredits()
       expect(totalCredits.value).toBe('211')
     })
 
-    it('should handle formatting errors by throwing', async () => {
+    it('should handle formatting errors by throwing', () => {
       const formatSpy = vi.spyOn(comfyCredits, 'formatCreditsFromCents')
       formatSpy.mockImplementationOnce(() => {
         throw new Error('Formatting error')
       })
 
-      authStore.balance = { amount_micros: 100 } as GetCustomerBalanceResponse
+      mockBillingBalance = { amountMicros: 100 }
       const { totalCredits } = useSubscriptionCredits()
       expect(() => totalCredits.value).toThrow('Formatting error')
       formatSpy.mockRestore()
@@ -117,45 +69,49 @@ describe('useSubscriptionCredits', () => {
   })
 
   describe('monthlyBonusCredits', () => {
-    it('should return "0" when cloud_credit_balance_micros is missing', () => {
-      authStore.balance = {} as GetCustomerBalanceResponse
+    it('should return "0" when cloudCreditBalanceMicros is missing', () => {
+      mockBillingBalance = { amountMicros: 100 }
       const { monthlyBonusCredits } = useSubscriptionCredits()
       expect(monthlyBonusCredits.value).toBe('0')
     })
 
-    it('should format cloud_credit_balance_micros correctly', () => {
-      authStore.balance = {
-        cloud_credit_balance_micros: 200
-      } as GetCustomerBalanceResponse
+    it('should format cloudCreditBalanceMicros correctly', () => {
+      mockBillingBalance = {
+        amountMicros: 300,
+        cloudCreditBalanceMicros: 200
+      }
       const { monthlyBonusCredits } = useSubscriptionCredits()
       expect(monthlyBonusCredits.value).toBe('422')
     })
   })
 
   describe('prepaidCredits', () => {
-    it('should return "0" when prepaid_balance_micros is missing', () => {
-      authStore.balance = {} as GetCustomerBalanceResponse
+    it('should return "0" when prepaidBalanceMicros is missing', () => {
+      mockBillingBalance = { amountMicros: 100 }
       const { prepaidCredits } = useSubscriptionCredits()
       expect(prepaidCredits.value).toBe('0')
     })
 
-    it('should format prepaid_balance_micros correctly', () => {
-      authStore.balance = {
-        prepaid_balance_micros: 300
-      } as GetCustomerBalanceResponse
+    it('should format prepaidBalanceMicros correctly', () => {
+      mockBillingBalance = {
+        amountMicros: 500,
+        prepaidBalanceMicros: 300
+      }
       const { prepaidCredits } = useSubscriptionCredits()
       expect(prepaidCredits.value).toBe('633')
     })
   })
 
   describe('isLoadingBalance', () => {
-    it('should reflect authStore.isFetchingBalance', () => {
-      authStore.isFetchingBalance = true
+    it('should reflect billingContext.isLoading', () => {
+      mockBillingIsLoading = true
       const { isLoadingBalance } = useSubscriptionCredits()
       expect(isLoadingBalance.value).toBe(true)
 
-      authStore.isFetchingBalance = false
-      expect(isLoadingBalance.value).toBe(false)
+      mockBillingIsLoading = false
+      // Need to re-get the composable since computed caches the value
+      const { isLoadingBalance: reloaded } = useSubscriptionCredits()
+      expect(reloaded.value).toBe(false)
     })
   })
 })

src/platform/cloud/subscription/composables/useSubscriptionCredits.ts

@@ -1,43 +1,54 @@
-import { computed } from 'vue'
+import { computed, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 
 /**
- * Composable for handling subscription credit calculations and formatting
+ * Composable for handling subscription credit calculations and formatting.
+ *
+ * Uses useBillingContext which automatically selects the correct billing source:
+ * - If team workspaces feature is disabled: uses legacy (/customers)
+ * - If team workspaces feature is enabled:
+ *   - Personal workspace: uses legacy (/customers)
+ *   - Team workspace: uses workspace (/billing)
  */
+/**
+ * Formats a cent value to display credits.
+ * Backend returns cents despite the *_micros naming convention.
+ */
+function formatBalance(maybeCents: number | undefined, locale: string): string {
+  const cents = maybeCents ?? 0
+  return formatCreditsFromCents({
+    cents,
+    locale,
+    numberOptions: {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }
+  })
+}
+
 export function useSubscriptionCredits() {
-  const authStore = useFirebaseAuthStore()
+  const billingContext = useBillingContext()
   const { locale } = useI18n()
 
-  const formatBalance = (maybeCents?: number) => {
-    // Backend returns cents despite the *_micros naming convention.
-    const cents = maybeCents ?? 0
-    const amount = formatCreditsFromCents({
-      cents,
-      locale: locale.value,
-      numberOptions: {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0
-      }
-    })
-    return amount
-  }
+  const totalCredits = computed(() => {
+    const balance = toValue(billingContext.balance)
+    return formatBalance(balance?.amountMicros, locale.value)
+  })
 
-  const totalCredits = computed(() =>
-    formatBalance(authStore.balance?.amount_micros)
-  )
+  const monthlyBonusCredits = computed(() => {
+    const balance = toValue(billingContext.balance)
+    return formatBalance(balance?.cloudCreditBalanceMicros, locale.value)
+  })
 
-  const monthlyBonusCredits = computed(() =>
-    formatBalance(authStore.balance?.cloud_credit_balance_micros)
-  )
+  const prepaidCredits = computed(() => {
+    const balance = toValue(billingContext.balance)
+    return formatBalance(balance?.prepaidBalanceMicros, locale.value)
+  })
 
-  const prepaidCredits = computed(() =>
-    formatBalance(authStore.balance?.prepaid_balance_micros)
-  )
-
-  const isLoadingBalance = computed(() => authStore.isFetchingBalance)
+  const isLoadingBalance = computed(() => toValue(billingContext.isLoading))
 
   return {
     totalCredits,

src/platform/cloud/subscription/composables/useSubscriptionDialog.ts

@@ -1,36 +1,50 @@
 import { defineAsyncComponent } from 'vue'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 
 const DIALOG_KEY = 'subscription-required'
 
 export const useSubscriptionDialog = () => {
+  const { flags } = useFeatureFlags()
   const dialogService = useDialogService()
   const dialogStore = useDialogStore()
+  const workspaceStore = useTeamWorkspaceStore()
 
   function hide() {
     dialogStore.closeDialog({ key: DIALOG_KEY })
   }
 
   function show() {
+    const useWorkspaceVariant =
+      flags.teamWorkspacesEnabled && !workspaceStore.isInPersonalWorkspace
+
+    const component = useWorkspaceVariant
+      ? defineAsyncComponent(
+          () =>
+            import('@/platform/cloud/subscription/components/SubscriptionRequiredDialogContentWorkspace.vue')
+        )
+      : defineAsyncComponent(
+          () =>
+            import('@/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue')
+        )
+
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,
-      component: defineAsyncComponent(
-        () =>
-          import('@/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue')
-      ),
+      component,
       props: {
         onClose: hide
       },
       dialogComponentProps: {
-        style: 'width: min(1328px, 95vw); max-height: 90vh;',
+        style: 'width: min(1328px, 95vw); max-height: 958px;',
         pt: {
           root: {
-            class: 'rounded-2xl bg-transparent'
+            class: 'rounded-2xl bg-transparent h-full'
           },
           content: {
             class:
-              '!p-0 rounded-2xl border border-border-default bg-base-background/60 backdrop-blur-md shadow-[0_25px_80px_rgba(5,6,12,0.45)]'
+              '!p-0 rounded-2xl border border-border-default bg-base-background/60 backdrop-blur-md shadow-[0_25px_80px_rgba(5,6,12,0.45)] h-full'
           }
         }
       }