Revert "fix: add tab semantics to filter picker"

This reverts commit 103aa9e261d01cd7f086d1044cda8c9b871b6cb9.

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

@@ -1,52 +0,0 @@
-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 && pnpm format
+        run: pnpm locale
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       - name: Commit updated locales

.gitignore

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

global.d.ts

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

manifest.json

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

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 } = useBillingContext()
+const { isActiveSubscription } = useSubscription()
 
 const currentButton = computed(() =>
   isActiveSubscription.value ? ComfyQueueButton : SubscribeToRunButton

src/components/auth/WorkspaceAuthGate.test.ts

@@ -1,206 +0,0 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import WorkspaceAuthGate from './WorkspaceAuthGate.vue'
-
-const mockIsInitialized = ref(false)
-const mockCurrentUser = ref<object | null>(null)
-
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: () => ({
-    isInitialized: mockIsInitialized,
-    currentUser: mockCurrentUser
-  })
-}))
-
-const mockRefreshRemoteConfig = vi.fn()
-vi.mock('@/platform/remoteConfig/refreshRemoteConfig', () => ({
-  refreshRemoteConfig: (options: unknown) => mockRefreshRemoteConfig(options)
-}))
-
-const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: false }))
-vi.mock('@/composables/useFeatureFlags', () => ({
-  useFeatureFlags: () => ({
-    flags: {
-      get teamWorkspacesEnabled() {
-        return mockTeamWorkspacesEnabled.value
-      }
-    }
-  })
-}))
-
-const mockWorkspaceStoreInitialize = vi.fn()
-const mockWorkspaceStoreInitState = vi.hoisted(() => ({
-  value: 'uninitialized' as string
-}))
-vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
-  useTeamWorkspaceStore: () => ({
-    get initState() {
-      return mockWorkspaceStoreInitState.value
-    },
-    initialize: mockWorkspaceStoreInitialize
-  })
-}))
-
-const mockIsCloud = vi.hoisted(() => ({ value: true }))
-vi.mock('@/platform/distribution/types', () => ({
-  get isCloud() {
-    return mockIsCloud.value
-  }
-}))
-
-vi.mock('primevue/progressspinner', () => ({
-  default: { template: '<div class="progress-spinner" />' }
-}))
-
-describe('WorkspaceAuthGate', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockIsCloud.value = true
-    mockIsInitialized.value = false
-    mockCurrentUser.value = null
-    mockTeamWorkspacesEnabled.value = false
-    mockWorkspaceStoreInitState.value = 'uninitialized'
-    mockRefreshRemoteConfig.mockResolvedValue(undefined)
-    mockWorkspaceStoreInitialize.mockResolvedValue(undefined)
-  })
-
-  const mountComponent = () =>
-    mount(WorkspaceAuthGate, {
-      slots: {
-        default: '<div data-testid="slot-content">App Content</div>'
-      }
-    })
-
-  describe('non-cloud builds', () => {
-    it('renders slot immediately when isCloud is false', async () => {
-      mockIsCloud.value = false
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(wrapper.find('.progress-spinner').exists()).toBe(false)
-      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('cloud builds - unauthenticated user', () => {
-    it('shows spinner while waiting for Firebase auth', () => {
-      mockIsInitialized.value = false
-
-      const wrapper = mountComponent()
-
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false)
-    })
-
-    it('renders slot when Firebase initializes with no user', async () => {
-      mockIsInitialized.value = false
-
-      const wrapper = mountComponent()
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-
-      mockIsInitialized.value = true
-      mockCurrentUser.value = null
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('cloud builds - authenticated user', () => {
-    beforeEach(() => {
-      mockIsInitialized.value = true
-      mockCurrentUser.value = { uid: 'user-123' }
-    })
-
-    it('refreshes remote config with auth after Firebase init', async () => {
-      mountComponent()
-      await flushPromises()
-
-      expect(mockRefreshRemoteConfig).toHaveBeenCalledWith({ useAuth: true })
-    })
-
-    it('renders slot when teamWorkspacesEnabled is false', async () => {
-      mockTeamWorkspacesEnabled.value = false
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
-    })
-
-    it('initializes workspace store when teamWorkspacesEnabled is true', async () => {
-      mockTeamWorkspacesEnabled.value = true
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(mockWorkspaceStoreInitialize).toHaveBeenCalled()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-
-    it('skips workspace init when store is already initialized', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockWorkspaceStoreInitState.value = 'ready'
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-  })
-
-  describe('error handling - graceful degradation', () => {
-    beforeEach(() => {
-      mockIsInitialized.value = true
-      mockCurrentUser.value = { uid: 'user-123' }
-    })
-
-    it('renders slot when remote config refresh fails', async () => {
-      mockRefreshRemoteConfig.mockRejectedValue(new Error('Network error'))
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-
-    it('renders slot when remote config refresh times out', async () => {
-      vi.useFakeTimers()
-      // Never-resolving promise simulates a hanging request
-      mockRefreshRemoteConfig.mockReturnValue(new Promise(() => {}))
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      // Still showing spinner before timeout
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-
-      // Advance past the 10 second timeout
-      await vi.advanceTimersByTimeAsync(10_001)
-      await flushPromises()
-
-      // Should render slot after timeout (graceful degradation)
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      vi.useRealTimers()
-    })
-
-    it('renders slot when workspace store initialization fails', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockWorkspaceStoreInitialize.mockRejectedValue(
-        new Error('Workspace init failed')
-      )
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-  })
-})

src/components/auth/WorkspaceAuthGate.vue

@@ -1,129 +0,0 @@
-<template>
-  <slot v-if="isReady" />
-  <div
-    v-else
-    class="fixed inset-0 z-[1100] flex items-center justify-center bg-[var(--p-mask-background)]"
-  >
-    <ProgressSpinner />
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * WorkspaceAuthGate - Conditional auth checkpoint for workspace mode.
- *
- * This gate ensures proper initialization order for workspace-scoped auth:
- * 1. Wait for Firebase auth to resolve
- * 2. Check if teamWorkspacesEnabled feature flag is on
- * 3. If YES: Initialize workspace token and store before rendering
- * 4. If NO: Render immediately using existing Firebase auth
- *
- * This prevents race conditions where API calls use Firebase tokens
- * instead of workspace tokens when the workspace feature is enabled.
- */
-import { promiseTimeout, until } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import ProgressSpinner from 'primevue/progressspinner'
-import { onMounted, ref } from 'vue'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
-import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-
-const FIREBASE_INIT_TIMEOUT_MS = 16_000
-const CONFIG_REFRESH_TIMEOUT_MS = 10_000
-
-const isReady = ref(!isCloud)
-
-async function initialize(): Promise<void> {
-  if (!isCloud) return
-
-  const authStore = useFirebaseAuthStore()
-  const { isInitialized, currentUser } = storeToRefs(authStore)
-
-  try {
-    // Step 1: Wait for Firebase auth to resolve
-    // This is shared with router guard - both wait for the same thing,
-    // but this gate blocks rendering while router guard blocks navigation
-    if (!isInitialized.value) {
-      await until(isInitialized).toBe(true, {
-        timeout: FIREBASE_INIT_TIMEOUT_MS
-      })
-    }
-
-    // Step 2: If not authenticated, nothing more to do
-    // Unauthenticated users don't have workspace context
-    if (!currentUser.value) {
-      isReady.value = true
-      return
-    }
-
-    // Step 3: Refresh feature flags with auth context
-    // This ensures teamWorkspacesEnabled reflects the authenticated user's state
-    // Timeout prevents hanging if server is slow/unresponsive
-    try {
-      await Promise.race([
-        refreshRemoteConfig({ useAuth: true }),
-        promiseTimeout(CONFIG_REFRESH_TIMEOUT_MS).then(() => {
-          throw new Error('Config refresh timeout')
-        })
-      ])
-    } catch (error) {
-      console.warn(
-        '[WorkspaceAuthGate] Failed to refresh remote config:',
-        error
-      )
-      // Continue - feature flags will use defaults (teamWorkspacesEnabled=false)
-      // App will render with Firebase auth fallback
-    }
-
-    // Step 4: THE CHECKPOINT - Are we in workspace mode?
-    const { flags } = useFeatureFlags()
-    if (!flags.teamWorkspacesEnabled) {
-      // Not in workspace mode - use existing Firebase auth flow
-      // No additional initialization needed
-      isReady.value = true
-      return
-    }
-
-    // Step 5: WORKSPACE MODE - Full initialization
-    await initializeWorkspaceMode()
-  } catch (error) {
-    console.error('[WorkspaceAuthGate] Initialization failed:', error)
-  } finally {
-    // Always render (graceful degradation)
-    // If workspace init failed, API calls fall back to Firebase token
-    isReady.value = true
-  }
-}
-
-async function initializeWorkspaceMode(): Promise<void> {
-  // Initialize the full workspace store which handles:
-  // - Restoring workspace token from session (fast path for refresh)
-  // - Fetching workspace list
-  // - Switching to last used workspace if needed
-  // - Setting active workspace
-  try {
-    const workspaceStore = useTeamWorkspaceStore()
-    if (workspaceStore.initState === 'uninitialized') {
-      await workspaceStore.initialize()
-    }
-  } catch (error) {
-    // Log but don't block - workspace UI features may not work but app will render
-    // API calls will fall back to Firebase token
-    console.warn(
-      '[WorkspaceAuthGate] Failed to initialize workspace store:',
-      error
-    )
-  }
-}
-
-// 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/common/LoadingOverlay.vue

@@ -1,49 +0,0 @@
-<template>
-  <Transition name="fade">
-    <div
-      v-if="loading"
-      class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
-    >
-      <div class="flex flex-col items-center">
-        <div class="grid place-items-center">
-          <div
-            :class="
-              cn(
-                'col-start-1 row-start-1 animate-spin rounded-full border-muted-foreground border-t-base-foreground',
-                spinnerSizeClass
-              )
-            "
-          />
-          <div class="col-start-1 row-start-1">
-            <slot />
-          </div>
-        </div>
-        <div v-if="loadingMessage" class="mt-4 text-lg text-base-foreground">
-          {{ loadingMessage }}
-        </div>
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { size = 'md' } = defineProps<{
-  loading: boolean
-  loadingMessage?: string
-  size?: 'sm' | 'md'
-}>()
-
-const spinnerSizeClass = computed(() => {
-  switch (size) {
-    case 'sm':
-      return 'h-6 w-6 border-2'
-    case 'md':
-    default:
-      return 'h-12 w-12 border-4'
-  }
-})
-</script>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

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

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -158,7 +158,6 @@ 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'
@@ -177,9 +176,8 @@ const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
-const { flags } = useFeatureFlags()
-
 const { isSubscriptionEnabled } = useSubscription()
+
 // Constants
 const PRESET_AMOUNTS = [10, 25, 50, 100]
 const MIN_AMOUNT = 5
@@ -258,15 +256,9 @@ async function handleBuy() {
 
     // Close top-up dialog (keep tracking) and open credits panel to show updated balance
     handleClose(false)
-
-    // 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)
+    dialogService.showSettingsDialog(
+      isSubscriptionEnabled() ? 'subscription' : 'credits'
+    )
   } catch (error) {
     console.error('Purchase failed:', error)
 

src/components/dialog/content/TopUpCreditsDialogContentWorkspace.vue

@@ -1,295 +0,0 @@
-<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,15 +265,18 @@ function cancelEdit() {
 }
 
 async function saveKeybinding() {
-  const commandId = currentEditingCommand.value?.id
-  const combo = newBindingKeyCombo.value
+  if (currentEditingCommand.value && newBindingKeyCombo.value) {
+    const updated = keybindingStore.updateKeybindingOnCommand(
+      new KeybindingImpl({
+        commandId: currentEditingCommand.value.id,
+        combo: newBindingKeyCombo.value
+      })
+    )
+    if (updated) {
+      await keybindingService.persistUserKeybindings()
+    }
+  }
   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 } = useBillingContext()
+const { isActiveSubscription } = useSubscription()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 

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

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

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

@@ -1,108 +0,0 @@
-<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="cn(flags.teamWorkspacesEnabled ? 'px-6' : 'px-4')">
+    <h2 class="px-4">
       <i class="pi pi-cog" />
       <span>{{ $t('g.settings') }}</span>
       <Tag
@@ -16,9 +16,6 @@
 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/graph/GraphCanvas.vue

@@ -502,9 +502,19 @@ onMounted(async () => {
   await workflowPersistence.loadTemplateFromUrlIfPresent()
 
   // Accept workspace invite from URL if present (e.g., ?invite=TOKEN)
-  // WorkspaceAuthGate ensures flag state is resolved before GraphCanvas mounts
-  if (inviteUrlLoader && flags.teamWorkspacesEnabled) {
-    await inviteUrlLoader.loadInviteFromUrl()
+  // Uses watch because feature flags load asynchronously - flag may be false initially
+  // then become true once remoteConfig or websocket features are loaded
+  if (inviteUrlLoader) {
+    const stopWatching = watch(
+      () => flags.teamWorkspacesEnabled,
+      async (enabled) => {
+        if (enabled) {
+          stopWatching()
+          await inviteUrlLoader.loadInviteFromUrl()
+        }
+      },
+      { immediate: true }
+    )
   }
 
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)

src/components/helpcenter/HelpCenterPopups.vue

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

src/components/load3d/Load3DScene.vue

@@ -31,7 +31,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
+import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 
 const props = defineProps<{

src/components/load3d/LoadingOverlay.vue

@@ -0,0 +1,42 @@
+<template>
+  <Transition name="fade">
+    <div
+      v-if="loading"
+      class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
+    >
+      <div class="flex flex-col items-center">
+        <div class="spinner" />
+        <div class="mt-4 text-lg text-base-foreground">
+          {{ loadingMessage }}
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  loading: boolean
+  loadingMessage: string
+}>()
+</script>
+
+<style scoped>
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/components/node/NodePreview.test.ts

@@ -76,6 +76,14 @@ 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 text-ellipsis"
+        class="node_header mr-4 text-ellipsis"
         :title="nodeDef.display_name"
         :style="{
           backgroundColor: litegraphColors.NODE_DEFAULT_COLOR,

src/components/searchbox/NodeSearchFilter.vue

@@ -1,13 +1,27 @@
 <template>
-  <div class="_content">
-    <SelectButton
-      v-model="selectedFilter"
-      class="filter-type-select"
-      :options="filters"
-      :allow-empty="false"
-      option-label="name"
-      @change="updateSelectedFilterValue"
-    />
+  <div class="flex flex-col space-y-2">
+    <div
+      class="flex flex-wrap gap-2"
+      role="tablist"
+      :aria-label="$t('sideToolbar.nodeLibraryTab.filterCategory')"
+    >
+      <Button
+        v-for="filterOption in filters"
+        :key="filterOption.id"
+        type="button"
+        size="sm"
+        :variant="
+          selectedFilter?.id === filterOption.id
+            ? 'secondary'
+            : 'muted-textonly'
+        "
+        class="flex-1 justify-center px-3 py-2 text-sm"
+        :aria-pressed="selectedFilter?.id === filterOption.id"
+        @click="selectFilterOption(filterOption)"
+      >
+        {{ filterOption.name }}
+      </Button>
+    </div>
     <Select
       v-model="selectedFilterValue"
       class="filter-value-select"
@@ -16,14 +30,13 @@
       auto-filter-focus
     />
   </div>
-  <div class="_footer">
+  <div class="flex flex-col pt-4 items-end">
     <Button type="button" @click="submit">{{ $t('g.add') }}</Button>
   </div>
 </template>
 
 <script setup lang="ts">
 import Select from 'primevue/select'
-import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -57,6 +70,16 @@ const updateSelectedFilterValue = () => {
   selectedFilterValue.value = filterValues.value[0]
 }
 
+const selectFilterOption = (
+  filterOption: FuseFilter<ComfyNodeDefImpl, string>
+) => {
+  if (selectedFilter.value?.id === filterOption.id) {
+    return
+  }
+  selectedFilter.value = filterOption
+  updateSelectedFilterValue()
+}
+
 const submit = () => {
   if (!selectedFilter.value) {
     return
@@ -67,15 +90,3 @@ const submit = () => {
   })
 }
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-._content {
-  @apply flex flex-col space-y-2;
-}
-
-._footer {
-  @apply flex flex-col pt-4 items-end;
-}
-</style>

src/components/sidebar/SideToolbar.vue

@@ -41,7 +41,7 @@
           :is-small="isSmall"
         />
         <SidebarHelpCenterIcon v-if="!isIntegratedTabBar" :is-small="isSmall" />
-        <SidebarBottomPanelToggleButton v-if="!isCloud" :is-small="isSmall" />
+        <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
         <ModeToggle
@@ -65,7 +65,6 @@ 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="isQueuePanelV2Enabled && activeJobItems.length"
+      v-if="activeJobItems.length"
       class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
       :style="gridStyle"
     >
@@ -65,7 +65,6 @@ 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,
@@ -91,11 +90,6 @@ 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="isQueuePanelV2Enabled && activeJobItems.length"
+      v-if="activeJobItems.length"
       class="flex max-h-[50%] scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
     >
       <AssetsListItem
@@ -63,47 +63,39 @@
       @approach-end="emit('approach-end')"
     >
       <template #item="{ item }">
-        <div class="relative">
-          <LoadingOverlay
-            :loading="assetsStore.isAssetDeleting(item.asset.id)"
-            size="sm"
-          >
-            <i class="pi pi-trash text-xs" />
-          </LoadingOverlay>
-          <AssetsListItem
-            role="button"
-            tabindex="0"
-            :aria-label="
-              t('assetBrowser.ariaLabel.assetCard', {
-                name: item.asset.name,
-                type: getMediaTypeFromFilename(item.asset.name)
-              })
-            "
-            :class="getAssetCardClass(isSelected(item.asset.id))"
-            :preview-url="item.asset.preview_url"
-            :preview-alt="item.asset.name"
-            :icon-name="
-              iconForMediaType(getMediaTypeFromFilename(item.asset.name))
-            "
-            :primary-text="getAssetPrimaryText(item.asset)"
-            :secondary-text="getAssetSecondaryText(item.asset)"
-            @mouseenter="onAssetEnter(item.asset.id)"
-            @mouseleave="onAssetLeave(item.asset.id)"
-            @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
-            @click.stop="emit('select-asset', item.asset)"
-          >
-            <template v-if="hoveredAssetId === item.asset.id" #actions>
-              <Button
-                variant="secondary"
-                size="icon"
-                :aria-label="t('mediaAsset.actions.moreOptions')"
-                @click.stop="emit('context-menu', $event, item.asset)"
-              >
-                <i class="icon-[lucide--ellipsis] size-4" />
-              </Button>
-            </template>
-          </AssetsListItem>
-        </div>
+        <AssetsListItem
+          role="button"
+          tabindex="0"
+          :aria-label="
+            t('assetBrowser.ariaLabel.assetCard', {
+              name: item.asset.name,
+              type: getMediaTypeFromFilename(item.asset.name)
+            })
+          "
+          :class="getAssetCardClass(isSelected(item.asset.id))"
+          :preview-url="item.asset.preview_url"
+          :preview-alt="item.asset.name"
+          :icon-name="
+            iconForMediaType(getMediaTypeFromFilename(item.asset.name))
+          "
+          :primary-text="getAssetPrimaryText(item.asset)"
+          :secondary-text="getAssetSecondaryText(item.asset)"
+          @mouseenter="onAssetEnter(item.asset.id)"
+          @mouseleave="onAssetLeave(item.asset.id)"
+          @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
+          @click.stop="emit('select-asset', item.asset)"
+        >
+          <template v-if="hoveredAssetId === item.asset.id" #actions>
+            <Button
+              variant="secondary"
+              size="icon"
+              :aria-label="t('mediaAsset.actions.moreOptions')"
+              @click.stop="emit('context-menu', $event, item.asset)"
+            >
+              <i class="icon-[lucide--ellipsis] size-4" />
+            </Button>
+          </template>
+        </AssetsListItem>
       </template>
     </VirtualGrid>
   </div>
@@ -113,7 +105,6 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useJobActions } from '@/composables/queue/useJobActions'
@@ -123,7 +114,6 @@ import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
-import { useAssetsStore } from '@/stores/assetsStore'
 import { isActiveJobState } from '@/utils/queueUtil'
 import {
   formatDuration,
@@ -133,7 +123,6 @@ import {
 } from '@/utils/formatUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
-import { useSettingStore } from '@/platform/settings/settingStore'
 
 const {
   assets,
@@ -145,8 +134,6 @@ const {
   assetType?: 'input' | 'output'
 }>()
 
-const assetsStore = useAssetsStore()
-
 const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem): void
   (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
@@ -155,11 +142,6 @@ 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/AssetsSidebarTab.vue

@@ -331,7 +331,7 @@ const {
 
 const {
   downloadMultipleAssets,
-  deleteAssets,
+  deleteMultipleAssets,
   addMultipleToWorkflow,
   openMultipleWorkflows,
   exportMultipleWorkflows
@@ -495,9 +495,8 @@ const handleBulkDownload = (assets: AssetItem[]) => {
 }
 
 const handleBulkDelete = async (assets: AssetItem[]) => {
-  if (await deleteAssets(assets)) {
-    clearSelection()
-  }
+  await deleteMultipleAssets(assets)
+  clearSelection()
 }
 
 const handleClearQueue = async () => {
@@ -525,17 +524,6 @@ const handleBulkExportWorkflow = async (assets: AssetItem[]) => {
   clearSelection()
 }
 
-const handleDownloadSelected = () => {
-  downloadMultipleAssets(selectedAssets.value)
-  clearSelection()
-}
-
-const handleDeleteSelected = async () => {
-  if (await deleteAssets(selectedAssets.value)) {
-    clearSelection()
-  }
-}
-
 const handleZoomClick = (asset: AssetItem) => {
   const mediaType = getMediaTypeFromFilename(asset.name)
 
@@ -684,6 +672,16 @@ const copyJobId = async () => {
   }
 }
 
+const handleDownloadSelected = () => {
+  downloadMultipleAssets(selectedAssets.value)
+  clearSelection()
+}
+
+const handleDeleteSelected = async () => {
+  await deleteMultipleAssets(selectedAssets.value)
+  clearSelection()
+}
+
 const handleApproachEnd = useDebounceFn(async () => {
   if (
     activeTab.value === 'output' &&

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

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

src/components/toast/GlobalToast.vue

@@ -1,13 +1,5 @@
 <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 CurrentUserPopoverLegacy component
-vi.mock('./CurrentUserPopoverLegacy.vue', () => ({
+// Mock the CurrentUserPopover component
+vi.mock('./CurrentUserPopover.vue', () => ({
   default: {
-    name: 'CurrentUserPopoverLegacyMock',
+    name: 'CurrentUserPopoverMock',
     render() {
       return h('div', 'Popover Content')
     },

src/components/topbar/CurrentUserButton.vue

@@ -45,16 +45,14 @@
           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 -->
-      <CurrentUserPopoverLegacy
+      <CurrentUserPopover
         v-else-if="!teamWorkspacesEnabled"
         @close="closePopover"
       />
@@ -77,7 +75,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import CurrentUserPopoverLegacy from './CurrentUserPopoverLegacy.vue'
+import CurrentUserPopover from './CurrentUserPopover.vue'
 
 const CurrentUserPopoverWorkspace = defineAsyncComponent(
   () => import('./CurrentUserPopoverWorkspace.vue')
@@ -114,15 +112,8 @@ 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/CurrentUserPopover.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 CurrentUserPopoverLegacy from './CurrentUserPopoverLegacy.vue'
+import CurrentUserPopover from './CurrentUserPopover.vue'
 
 // Mock all firebase modules
 vi.mock('firebase/app', () => ({
@@ -172,7 +172,7 @@ vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
   }
 }))
 
-describe('CurrentUserPopoverLegacy', () => {
+describe('CurrentUserPopover', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockAuthStoreState.balance = {
@@ -190,7 +190,7 @@ describe('CurrentUserPopoverLegacy', () => {
       messages: { en: enMessages }
     })
 
-    return mount(CurrentUserPopoverLegacy, {
+    return mount(CurrentUserPopover, {
       global: {
         plugins: [i18n],
         stubs: {

src/components/topbar/CurrentUserPopoverWorkspace.vue

@@ -87,26 +87,18 @@
         <SubscribeButton
           v-else-if="isPersonalWorkspace"
           :fluid="false"
-          :label="
-            isCancelled
-              ? $t('subscription.resubscribe')
-              : $t('workspaceSwitcher.subscribe')
-          "
+          :label="$t('workspaceSwitcher.subscribe')"
           size="sm"
           variant="gradient"
         />
-        <!-- Non-personal workspace: Show pricing table -->
+        <!-- Non-personal workspace: Navigate to workspace settings -->
         <Button
           v-else
           variant="primary"
           size="sm"
-          @click="handleOpenPlansAndPricing"
+          @click="handleOpenPlanAndCreditsSettings"
         >
-          {{
-            isCancelled
-              ? $t('subscription.resubscribe')
-              : $t('workspaceSwitcher.subscribe')
-          }}
+          {{ $t('workspaceSwitcher.subscribe') }}
         </Button>
       </div>
 
@@ -204,19 +196,18 @@ import { storeToRefs } from 'pinia'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
 import Skeleton from 'primevue/skeleton'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { computed, onMounted, ref } from 'vue'
 
-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'
@@ -242,33 +233,22 @@ const { buildDocsUrl, docsPaths } = useExternalLink()
 
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
+const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
-const { isActiveSubscription, subscription, balance, isLoading, fetchBalance } =
-  useBillingContext()
-
-const isCancelled = computed(() => subscription.value?.isCancelled ?? false)
+const { isActiveSubscription, subscriptionStatus } = useSubscription()
+const { totalCredits, isLoadingBalance } = useSubscriptionCredits()
 const subscriptionDialog = useSubscriptionDialog()
 
-const { locale } = useI18n()
-const isLoadingBalance = isLoading
-
 const displayedCredits = computed(() => {
   if (initState.value !== 'ready') return ''
-  // 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
-    }
-  })
+  // 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'
 })
 
 const canUpgrade = computed(() => {
@@ -342,11 +322,7 @@ const toggleWorkspaceSwitcher = (event: MouseEvent) => {
   workspaceSwitcherPopover.value?.toggle(event)
 }
 
-const refreshBalance = () => {
-  if (isActiveSubscription.value) {
-    void fetchBalance()
-  }
-}
-
-defineExpose({ refreshBalance })
+onMounted(() => {
+  void authActions.fetchBalance()
+})
 </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: string | null
-  subscriptionTier: SubscriptionTier | null
+  subscriptionPlan: SubscriptionPlan
 }
 
 const emit = defineEmits<{
@@ -140,34 +140,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const { switchWithConfirmation } = useWorkspaceSwitch()
-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 { subscriptionTierName: userSubscriptionTierName } = useSubscription()
 
 const workspaceStore = useTeamWorkspaceStore()
 const { workspaceId, workspaces, canCreateWorkspace, isFetchingWorkspaces } =
@@ -180,8 +153,7 @@ const availableWorkspaces = computed<AvailableWorkspace[]>(() =>
     type: w.type,
     role: w.role,
     isSubscribed: w.isSubscribed,
-    subscriptionPlan: w.subscriptionPlan,
-    subscriptionTier: w.subscriptionTier
+    subscriptionPlan: w.subscriptionPlan
   }))
 )
 
@@ -196,32 +168,19 @@ function getRoleLabel(role: AvailableWorkspace['role']): string {
 }
 
 function getTierLabel(workspace: AvailableWorkspace): string | 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
+  // Personal workspace: use user's subscription tier
+  if (workspace.type === 'personal') {
+    return userSubscriptionTierName.value || 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)
+  // 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
 }
 
 async function handleSelectWorkspace(workspace: AvailableWorkspace) {

src/components/ui/select/SelectContent.vue

@@ -20,18 +20,9 @@ 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']
-    disablePortal?: boolean
-  }
->()
+} = defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SelectContentEmits>()
 
 const delegatedProps = computed(() => ({
@@ -43,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <SelectPortal :disabled="disablePortal">
+  <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="

src/components/widget/nav/NavItem.vue

@@ -3,7 +3,7 @@
     v-tooltip.right="{
       value: tooltipText,
       disabled: !isOverflowing,
-      pt: { text: { class: 'w-max whitespace-nowrap' } }
+      pt: { text: { class: 'whitespace-nowrap' } }
     }"
     class="flex cursor-pointer select-none items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="

src/composables/auth/useCurrentUser.ts

@@ -1,6 +1,9 @@
 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'
@@ -10,6 +13,8 @@ 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)
@@ -111,6 +116,18 @@ 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,
@@ -124,6 +141,7 @@ 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 } = useBillingContext()
+    const { isActiveSubscription } = useSubscription()
     if (!isActiveSubscription.value) return
 
     const response = await authStore.initiateCreditPurchase({
@@ -206,6 +206,21 @@ 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,
@@ -217,6 +232,7 @@ export const useFirebaseAuthActions = () => {
     signInWithEmail,
     signUpWithEmail,
     updatePassword,
+    deleteAccount,
     accessError,
     reportError
   }

src/composables/billing/types.ts

@@ -1,76 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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

@@ -1,242 +0,0 @@
-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

@@ -1,189 +0,0 @@
-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

@@ -1,311 +0,0 @@
-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,27 +134,6 @@ 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,7 +44,6 @@ const CORE_MENU_ITEMS = new Set([
   // Structure operations
   'Convert to Subgraph',
   'Frame selection',
-  'Frame Nodes',
   'Minimize Node',
   'Expand',
   'Collapse',
@@ -104,8 +103,7 @@ function isDuplicateItem(label: string, existingItems: MenuOption[]): boolean {
     shape: ['shape', 'shapes'],
     pin: ['pin', 'unpin'],
     delete: ['remove', 'delete'],
-    duplicate: ['clone', 'duplicate'],
-    frame: ['frame selection', 'frame nodes']
+    duplicate: ['clone', 'duplicate']
   }
 
   return existingItems.some((item) => {
@@ -228,7 +226,6 @@ 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,11 +2,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useSelectionMenuOptions } from '@/composables/graph/useSelectionMenuOptions'
 
-const mocks = vi.hoisted(() => ({
+const subgraphMocks = vi.hoisted(() => ({
   convertToSubgraph: vi.fn(),
   unpackSubgraph: vi.fn(),
   addSubgraphToLibrary: vi.fn(),
-  frameNodes: vi.fn(),
   createI18nMock: vi.fn(() => ({
     global: {
       t: vi.fn(),
@@ -20,7 +19,7 @@ vi.mock('vue-i18n', () => ({
   useI18n: () => ({
     t: (key: string) => key
   }),
-  createI18n: mocks.createI18nMock
+  createI18n: subgraphMocks.createI18nMock
 }))
 
 vi.mock('@/composables/graph/useSelectionOperations', () => ({
@@ -43,46 +42,18 @@ vi.mock('@/composables/graph/useNodeArrangement', () => ({
 
 vi.mock('@/composables/graph/useSubgraphOperations', () => ({
   useSubgraphOperations: () => ({
-    convertToSubgraph: mocks.convertToSubgraph,
-    unpackSubgraph: mocks.unpackSubgraph,
-    addSubgraphToLibrary: mocks.addSubgraphToLibrary
+    convertToSubgraph: subgraphMocks.convertToSubgraph,
+    unpackSubgraph: subgraphMocks.unpackSubgraph,
+    addSubgraphToLibrary: subgraphMocks.addSubgraphToLibrary
   })
 }))
 
 vi.mock('@/composables/graph/useFrameNodes', () => ({
   useFrameNodes: () => ({
-    frameNodes: mocks.frameNodes
+    frameNodes: vi.fn()
   })
 }))
 
-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()
@@ -97,7 +68,7 @@ describe('useSelectionMenuOptions - subgraph options', () => {
 
     expect(options).toHaveLength(1)
     expect(options[0]?.label).toBe('contextMenu.Convert to Subgraph')
-    expect(options[0]?.action).toBe(mocks.convertToSubgraph)
+    expect(options[0]?.action).toBe(subgraphMocks.convertToSubgraph)
   })
 
   it('includes convert, add to library, and unpack when subgraphs are selected', () => {
@@ -115,7 +86,7 @@ describe('useSelectionMenuOptions - subgraph options', () => {
     const convertOption = options.find(
       (option) => option.label === 'contextMenu.Convert to Subgraph'
     )
-    expect(convertOption?.action).toBe(mocks.convertToSubgraph)
+    expect(convertOption?.action).toBe(subgraphMocks.convertToSubgraph)
   })
 
   it('hides convert option when only a single subgraph is selected', () => {

src/composables/graph/useSelectionState.test.ts

@@ -87,25 +87,6 @@ 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/queue/useJobMenu.test.ts

@@ -40,7 +40,7 @@ vi.mock('@/platform/assets/composables/media/assetMappers', () => ({
 }))
 
 const mediaAssetActionsMock = {
-  deleteAssets: vi.fn()
+  confirmDelete: vi.fn()
 }
 vi.mock('@/platform/assets/composables/useMediaAssetActions', () => ({
   useMediaAssetActions: () => mediaAssetActionsMock
@@ -198,7 +198,7 @@ describe('useJobMenu', () => {
     }))
     queueStoreMock.update.mockResolvedValue(undefined)
     queueStoreMock.delete.mockResolvedValue(undefined)
-    mediaAssetActionsMock.deleteAssets.mockResolvedValue(false)
+    mediaAssetActionsMock.confirmDelete.mockResolvedValue(false)
     mapTaskOutputToAssetItemMock.mockImplementation((task, output) => ({
       task,
       output
@@ -666,7 +666,7 @@ describe('useJobMenu', () => {
   })
 
   it('deletes preview asset when confirmed', async () => {
-    mediaAssetActionsMock.deleteAssets.mockResolvedValue(true)
+    mediaAssetActionsMock.confirmDelete.mockResolvedValue(true)
     const { jobMenuEntries } = mountJobMenu()
     const preview = { filename: 'foo', subfolder: 'bar', type: 'output' }
     const taskRef = { previewOutput: preview }
@@ -681,7 +681,7 @@ describe('useJobMenu', () => {
   })
 
   it('does not refresh queue when delete cancelled', async () => {
-    mediaAssetActionsMock.deleteAssets.mockResolvedValue(false)
+    mediaAssetActionsMock.confirmDelete.mockResolvedValue(false)
     const { jobMenuEntries } = mountJobMenu()
     setCurrentItem(
       createJobItem({

src/composables/queue/useJobMenu.ts

@@ -210,8 +210,8 @@ export function useJobMenu(
     if (!task || !preview) return
 
     const asset = mapTaskOutputToAssetItem(task, preview)
-    const confirmed = await mediaAssetActions.deleteAssets(asset)
-    if (confirmed) {
+    const success = await mediaAssetActions.confirmDelete(asset)
+    if (success) {
       await queueStore.update()
     }
   }

src/composables/useCoreCommands.test.ts

@@ -107,13 +107,6 @@ 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 } = useBillingContext()
+  const { isActiveSubscription, showSubscriptionDialog } = useSubscription()
   const workflowService = useWorkflowService()
   const workflowStore = useWorkflowStore()
   const dialogService = useDialogService()

src/composables/useFeatureFlags.ts

@@ -1,10 +1,7 @@
 import { computed, reactive, readonly } from 'vue'
 
 import { isCloud } from '@/platform/distribution/types'
-import {
-  isAuthenticatedConfigLoaded,
-  remoteConfig
-} from '@/platform/remoteConfig/remoteConfig'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { api } from '@/scripts/api'
 
 /**
@@ -15,12 +12,14 @@ 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',
-  TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled',
-  USER_SECRETS_ENABLED = 'user_secrets_enabled'
+  ASYNC_MODEL_UPLOAD_ENABLED = 'async_model_upload_enabled',
+  TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled'
 }
 
 /**
@@ -38,6 +37,7 @@ 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(
@@ -46,6 +46,12 @@ 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 ??
@@ -53,6 +59,7 @@ 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)
@@ -64,36 +71,37 @@ 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)
       )
     },
-    /**
-     * Whether team workspaces feature is enabled.
-     * IMPORTANT: Returns false until authenticated remote config is loaded.
-     * This ensures we never use workspace tokens when the feature is disabled,
-     * and prevents race conditions during initialization.
-     */
+    get asyncModelUploadEnabled() {
+      return (
+        remoteConfig.value.async_model_upload_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.ASYNC_MODEL_UPLOAD_ENABLED,
+          false
+        )
+      )
+    },
     get teamWorkspacesEnabled() {
       if (!isCloud) return false
 
-      // Only return true if authenticated config has been loaded.
-      // This prevents race conditions where code checks this flag before
-      // WorkspaceAuthGate has refreshed the config with auth.
-      if (!isAuthenticatedConfigLoaded.value) return false
-
       return (
         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 { refDebounced, watchDebounced } from '@vueuse/core'
+import { refThrottled, 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 = refDebounced(searchQuery, 150)
+  const debouncedSearchQuery = refThrottled(searchQuery, 50)
 
   const filteredBySearch = computed(() => {
     if (!debouncedSearchQuery.value.trim()) {

src/core/graph/widgets/dynamicWidgets.ts

@@ -1,4 +1,5 @@
 import { remove } from 'es-toolkit'
+import { shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type {
@@ -344,6 +345,7 @@ 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 { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
 import { useExtensionService } from '@/services/extensionService'
 
@@ -14,11 +14,8 @@ useExtensionService().registerExtension({
 
   setup: async () => {
     const { isLoggedIn } = useCurrentUser()
-    const { isActiveSubscription } = useBillingContext()
+    const { isActiveSubscription } = useSubscription()
 
-    // 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],
       () => {

src/extensions/core/cloudSubscription.ts

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

src/extensions/core/index.ts

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

src/extensions/core/load3d/Load3d.ts

@@ -55,7 +55,6 @@ 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()
@@ -146,7 +145,6 @@ class Load3d {
     this.STATUS_MOUSE_ON_VIEWER = false
 
     this.initContextMenu()
-    this.initResizeObserver(container)
 
     this.handleResize()
     this.startAnimation()
@@ -156,14 +154,6 @@ 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
@@ -819,11 +809,6 @@ 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/LGraphNode.test.ts

@@ -137,13 +137,6 @@ describe('LGraphNode', () => {
     expect(node.id).toEqual(1)
     expect(node.outputs.length).toEqual(1)
   })
-  test('should not allow configuring id to -1', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('TestNode')
-    graph.add(node)
-    node.configure(getMockISerialisedNode({ id: -1 }))
-    expect(node.id).not.toBe(-1)
-  })
 
   describe('Disconnect I/O Slots', () => {
     test('should disconnect input correctly', () => {

src/lib/litegraph/src/LGraphNode.ts

@@ -785,7 +785,6 @@ export class LGraphNode
     if (this.graph) {
       this.graph._version++
     }
-    if (info.id === -1) info.id = this.id
     for (const j in info) {
       if (j == 'properties') {
         // i don't want to clone properties, I want to reuse the old container

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

@@ -195,42 +195,6 @@ 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,51 +152,19 @@ class LegacyMenuCompat {
       const patchedItems = methodToCall.apply(context, args) as
         | (IContextMenuValue | null)[]
         | undefined
-      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('|')
-      }
+      if (!patchedItems) return []
 
-      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))
-      })
+      // Use set-based diff to detect additions by reference
+      const originalSet = new Set<IContextMenuValue | null>(originalItems)
+      const addedItems = patchedItems.filter((item) => !originalSet.has(item))
 
       // Warn if items were removed (patched has fewer original items than expected)
-      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)
+      const retainedOriginalCount = patchedItems.filter((item) =>
+        originalSet.has(item)
       ).length
-      if (removedCount > 0) {
+      if (retainedOriginalCount < originalItems.length) {
         console.warn(
-          `[Context Menu Compat] Monkey patch for ${methodName} removed ${removedCount} original menu item(s). ` +
+          `[Context Menu Compat] Monkey patch for ${methodName} removed ${originalItems.length - retainedOriginalCount} original menu item(s). ` +
             `This may cause unexpected behavior.`
         )
       }

src/lib/litegraph/src/subgraph/SubgraphNode.ts

@@ -28,8 +28,8 @@ import type {
 } from '@/lib/litegraph/src/types/serialisation'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
-import { BaseWidget } from '@/lib/litegraph/src/widgets/BaseWidget'
 import { AssetWidget } from '@/lib/litegraph/src/widgets/AssetWidget'
+import { toConcreteWidget } from '@/lib/litegraph/src/widgets/widgetMap'
 
 import { ExecutableNodeDTO } from './ExecutableNodeDTO'
 import type { ExecutableLGraphNode, ExecutionId } from './ExecutableNodeDTO'
@@ -331,10 +331,9 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     inputWidget: IWidgetLocator | undefined
   ) {
     // Use the first matching widget
-    const promotedWidget =
-      widget instanceof BaseWidget
-        ? widget.createCopyForNode(this)
-        : { ...widget, node: this }
+    const promotedWidget = toConcreteWidget(widget, this).createCopyForNode(
+      this
+    )
     if (widget instanceof AssetWidget)
       promotedWidget.options.nodeType ??= widget.node.type
 

src/locales/en/main.json

@@ -282,10 +282,6 @@
   },
   "manager": {
     "title": "Nodes Manager",
-    "nodePackInfo": "Node Pack Info",
-    "basicInfo": "Basic Info",
-    "actions": "Actions",
-    "selected": "Selected",
     "legacyMenuNotAvailable": "Legacy manager menu is not available, defaulting to the new manager menu.",
     "legacyManagerUI": "Use Legacy UI",
     "legacyManagerUIDescription": "To use the legacy Manager UI, start ComfyUI with --enable-manager-legacy-ui",
@@ -299,17 +295,6 @@
     "changingVersion": "Changing version from {from} to {to}",
     "dependencies": "Dependencies",
     "inWorkflow": "In Workflow",
-    "nav": {
-      "allExtensions": "All Extensions",
-      "notInstalled": "Not Installed",
-      "installedSection": "INSTALLED",
-      "allInstalled": "All installed",
-      "updatesAvailable": "Updates Available",
-      "conflicting": "Conflicting",
-      "inWorkflowSection": "IN WORKFLOW",
-      "allInWorkflow": "All in: {workflowName}",
-      "missingNodes": "Missing Nodes"
-    },
     "infoPanelEmpty": "Click an item to see the info",
     "applyChanges": "Apply Changes",
     "restartToApplyChanges": "To apply changes, please restart ComfyUI",
@@ -735,6 +720,7 @@
       "groupBy": "Group By",
       "sortMode": "Sort Mode",
       "resetView": "Reset View to Default",
+      "filterCategory": "Filter category",
       "groupStrategies": {
         "category": "Category",
         "categoryDesc": "Group by node category",
@@ -993,8 +979,7 @@
     "showAll": "Show all",
     "hidden": "Hidden / nested parameters",
     "hideAll": "Hide all",
-    "showRecommended": "Show recommended widgets",
-    "cannotDeleteGlobal": "Cannot delete installed blueprints"
+    "showRecommended": "Show recommended widgets"
   },
   "electronFileDownload": {
     "inProgress": "In Progress",
@@ -1304,8 +1289,7 @@
     "Execution": "Execution",
     "PLY": "PLY",
     "Workspace": "Workspace",
-    "Other": "Other",
-    "Secrets": "Secrets"
+    "Other": "Other"
   },
   "serverConfigItems": {
     "listen": {
@@ -1924,7 +1908,13 @@
       "auth/cancelled-popup-request": "Sign-in was cancelled. Please try again."
     },
     "deleteAccount": {
-      "contactSupport": "To delete your account, please contact {email}"
+      "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."
     },
     "reauthRequired": {
       "title": "Re-authentication Required",
@@ -1983,7 +1973,6 @@
       "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",
@@ -2016,49 +2005,19 @@
       "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",
@@ -2107,10 +2066,7 @@
     "required": {
       "title": "Subscribe to",
       "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
-      "subscribe": "Subscribe",
-      "pollingSuccess": "Subscription activated successfully!",
-      "pollingFailed": "Subscription activation failed",
-      "pollingTimeout": "Timed out waiting for subscription. Please refresh and try again."
+      "subscribe": "Subscribe"
     },
     "subscribeToRun": "Subscribe",
     "subscribeToRunFull": "Subscribe to Run",
@@ -2120,7 +2076,6 @@
     "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",
@@ -2132,13 +2087,7 @@
     "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",
@@ -2160,27 +2109,6 @@
     "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": {
@@ -2531,10 +2459,9 @@
     "allModels": "All Models",
     "byType": "By type",
     "emptyImported": {
-      "canImport": "No imported models yet. Click \"Import\" to add your own.",
+      "canImport": "No imported models yet. Click \"Import Model\" to add your own.",
       "restricted": "Personal models are only available at Creator tier and above."
     },
-    "noResultsCanImport": "Try adjusting your search or filters.\nYou can also add models using the \"Import\" button above.",
     "imported": "Imported",
     "assetCollection": "Asset collection",
     "assets": "Assets",
@@ -2549,34 +2476,13 @@
     "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",
@@ -2628,8 +2534,6 @@
     "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.",
@@ -2905,45 +2809,5 @@
       "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,15 +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
  */
-const isCloud = __DISTRIBUTION__ === 'cloud'
+import { isCloud } from '@/platform/distribution/types'
 
 if (isCloud) {
   const { refreshRemoteConfig } =
     await import('@/platform/remoteConfig/refreshRemoteConfig')
   await refreshRemoteConfig({ useAuth: false })
 
-  const { initTelemetry } = await import('@/platform/telemetry/initTelemetry')
-  await initTelemetry()
+  const { initGtm } = await import('@/platform/telemetry/gtm')
+  initGtm()
 }
 
 const ComfyUIPreset = definePreset(Aura, {

src/platform/assets/components/ActiveMediaAssetCard.test.ts

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils'
-import { computed } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -7,18 +6,6 @@ import ActiveJobCard from './ActiveMediaAssetCard.vue'
 
 import type { JobListItem } from '@/composables/queue/useJobList'
 
-vi.mock('@/composables/queue/useJobActions', () => ({
-  useJobActions: () => ({
-    cancelAction: {
-      icon: 'icon-[lucide--x]',
-      label: 'Cancel',
-      variant: 'destructive'
-    },
-    canCancelJob: computed(() => false),
-    runCancelJob: vi.fn()
-  })
-}))
-
 vi.mock('@/composables/useProgressBarBackground', () => ({
   useProgressBarBackground: () => ({
     progressBarPrimaryClass: 'bg-blue-500',

src/platform/assets/components/ActiveMediaAssetCard.vue

@@ -1,13 +1,8 @@
 <template>
   <div
     role="status"
-    tabindex="0"
     :aria-label="t('sideToolbar.activeJobStatus', { status: statusText })"
     class="flex flex-col gap-2 p-2 rounded-lg"
-    @mouseenter="hovered = true"
-    @mouseleave="hovered = false"
-    @focusin="hovered = true"
-    @focusout="hovered = false"
   >
     <!-- Thumbnail -->
     <div class="relative aspect-square overflow-hidden rounded-lg">
@@ -39,17 +34,6 @@
           class="icon-[lucide--loader-circle] size-8 animate-spin text-muted-foreground"
         />
       </div>
-      <!-- Cancel button overlay -->
-      <Button
-        v-if="hovered && canCancelJob"
-        variant="destructive"
-        size="icon"
-        :aria-label="cancelAction.label"
-        class="absolute top-2 right-2"
-        @click.stop="runCancelJob()"
-      >
-        <i :class="cancelAction.icon" />
-      </Button>
     </div>
 
     <!-- Footer: Progress bar or status text -->
@@ -77,20 +61,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
-import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
 
 const { job } = defineProps<{ job: JobListItem }>()
 
 const { t } = useI18n()
-const hovered = ref(false)
-
-const { cancelAction, canCancelJob, runCancelJob } = useJobActions(() => job)
 
 const { progressBarPrimaryClass, hasProgressPercent, progressPercentStyle } =
   useProgressBarBackground()

src/platform/assets/components/AssetBrowserModal.vue

@@ -211,11 +211,7 @@ const shouldShowLeftPanel = computed(() => {
 })
 
 const emptyMessage = computed(() => {
-  if (!isImportedSelected.value) {
-    return isUploadButtonEnabled.value
-      ? t('assetBrowser.noResultsCanImport')
-      : undefined
-  }
+  if (!isImportedSelected.value) return undefined
 
   return isUploadButtonEnabled.value
     ? t('assetBrowser.emptyImported.canImport')

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

@@ -10,7 +10,7 @@ const createAssetData = (
   overrides: Partial<AssetDisplayItem> = {}
 ): AssetDisplayItem => ({
   ...baseAsset,
-  secondaryText:
+  description:
     'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
   badges: [
     { label: 'checkpoints', type: 'type' },
@@ -131,21 +131,20 @@ export const EdgeCases: Story = {
         // Default case for comparison
         createAssetData({
           name: 'Complete Data',
-          secondaryText: 'Asset with all data present for comparison'
+          description: 'Asset with all data present for comparison'
         }),
         // No badges
         createAssetData({
           id: 'no-badges',
           name: 'No Badges',
-          secondaryText:
-            'Testing graceful handling when badges are not provided',
+          description: 'Testing graceful handling when badges are not provided',
           badges: []
         }),
         // No stars
         createAssetData({
           id: 'no-stars',
           name: 'No Stars',
-          secondaryText: 'Testing missing stars data gracefully',
+          description: 'Testing missing stars data gracefully',
           stats: {
             downloadCount: '1.8k',
             formattedDate: '3/15/25'
@@ -155,7 +154,7 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-downloads',
           name: 'No Downloads',
-          secondaryText: 'Testing missing downloads data gracefully',
+          description: 'Testing missing downloads data gracefully',
           stats: {
             stars: '4.2k',
             formattedDate: '3/15/25'
@@ -165,7 +164,7 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-date',
           name: 'No Date',
-          secondaryText: 'Testing missing date data gracefully',
+          description: 'Testing missing date data gracefully',
           stats: {
             stars: '4.2k',
             downloadCount: '1.8k'
@@ -175,21 +174,21 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-stats',
           name: 'No Stats',
-          secondaryText: 'Testing when all stats are missing',
+          description: 'Testing when all stats are missing',
           stats: {}
         }),
-        // Long secondaryText
+        // Long description
         createAssetData({
           id: 'long-desc',
           name: 'Long Description',
-          secondaryText:
+          description:
             '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',
-          secondaryText: 'Basic model',
+          description: 'Basic model',
           tags: ['models'],
           badges: [],
           stats: {}

src/platform/assets/components/AssetCard.vue

@@ -54,6 +54,7 @@
         >
           <template #default>
             <Button
+              v-if="flags.assetDeletionEnabled"
               variant="secondary"
               size="md"
               class="justify-start"
@@ -81,14 +82,14 @@
       </h3>
       <p
         :id="descId"
-        v-tooltip.top="{ value: asset.secondaryText, showDelay: tooltipDelay }"
+        v-tooltip.top="{ value: asset.description, 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.secondaryText }}
+        {{ asset.description }}
       </p>
       <div class="flex items-center justify-between gap-2 mt-auto">
         <div class="flex gap-3 text-xs text-muted-foreground">
@@ -140,6 +141,7 @@ 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'
@@ -165,6 +167,7 @@ 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>>(
@@ -178,7 +181,11 @@ const displayName = computed(() => getAssetDisplayName(asset))
 
 const isNewlyImported = computed(() => isDownloadedThisSession(asset.id))
 
-const showAssetOptions = computed(() => !(asset.is_immutable ?? true))
+const showAssetOptions = computed(
+  () =>
+    (flags.assetDeletionEnabled || flags.assetRenameEnabled) &&
+    !(asset.is_immutable ?? true)
+)
 
 const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')

src/platform/assets/components/AssetGrid.vue

@@ -21,7 +21,7 @@
       <h3 class="mb-2 text-lg font-medium">
         {{ emptyTitle ?? $t('assetBrowser.noAssetsFound') }}
       </h3>
-      <p class="text-sm whitespace-pre-wrap text-center">
+      <p class="text-sm">
         {{ emptyMessage ?? $t('assetBrowser.tryAdjustingFilters') }}
       </p>
     </div>

src/platform/assets/components/MediaAssetCard.vue

@@ -48,10 +48,6 @@
         @image-loaded="handleImageLoaded"
       />
 
-      <LoadingOverlay :loading="isDeleting">
-        <i class="icon-[lucide--trash-2] size-5" />
-      </LoadingOverlay>
-
       <!-- Action buttons overlay (top-left) -->
       <div
         v-if="showActionsOverlay"
@@ -134,9 +130,7 @@ import { useElementHover } from '@vueuse/core'
 import { computed, defineAsyncComponent, provide, ref, toRef } from 'vue'
 
 import IconGroup from '@/components/button/IconGroup.vue'
-import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useAssetsStore } from '@/stores/assetsStore'
 import {
   formatDuration,
   formatSize,
@@ -173,13 +167,6 @@ const { asset, loading, selected, showOutputCount, outputCount } = defineProps<{
   outputCount?: number
 }>()
 
-const assetsStore = useAssetsStore()
-
-// Get deletion state from store
-const isDeleting = computed(() =>
-  asset ? assetsStore.isAssetDeleting(asset.id) : false
-)
-
 const emit = defineEmits<{
   click: []
   zoom: [asset: AssetItem]
@@ -265,7 +252,7 @@ const metaInfo = computed(() => {
 })
 
 const showActionsOverlay = computed(() => {
-  if (loading || !asset || isDeleting.value) return false
+  if (loading || !asset) return false
   return isHovered.value || selected || isVideoPlaying.value
 })
 

src/platform/assets/components/MediaAssetContextMenu.vue

@@ -247,8 +247,8 @@ const contextMenuItems = computed<MenuItem[]>(() => {
       icon: 'icon-[lucide--trash-2]',
       command: async () => {
         if (asset) {
-          const confirmed = await actions.deleteAssets(asset)
-          if (confirmed) {
+          const success = await actions.confirmDelete(asset)
+          if (success) {
             emit('asset-deleted')
           }
         }

src/platform/assets/components/UploadModelDialog.vue

@@ -6,7 +6,12 @@
     <div class="min-h-0 flex-auto basis-0 overflow-y-auto">
       <!-- Step 1: Enter URL -->
       <UploadModelUrlInput
-        v-if="currentStep === 1"
+        v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
+        v-model="wizardData.url"
+        :error="uploadError"
+      />
+      <UploadModelUrlInputCivitai
+        v-else-if="currentStep === 1"
         v-model="wizardData.url"
         :error="uploadError"
       />
@@ -51,14 +56,17 @@
 <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,6 +1,11 @@
 <template>
   <div class="flex items-center gap-2 p-4 font-bold">
-    <span>{{ $t('assetBrowser.uploadModelGeneric') }}</span>
+    <img
+      v-if="!flags.huggingfaceModelImportEnabled"
+      src="/assets/images/civitai.svg"
+      class="size-4"
+    />
+    <span>{{ $t(titleKey) }}</span>
     <span
       class="rounded-full bg-white px-1.5 py-0 text-xxs font-inter font-semibold uppercase text-black"
     >
@@ -8,3 +13,17 @@
     </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,6 +1,9 @@
 <template>
   <div class="flex justify-end gap-2 w-full">
-    <div v-if="currentStep === 1" class="mr-auto flex items-center gap-2">
+    <div
+      v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
+      class="mr-auto flex items-center gap-2"
+    >
       <i class="icon-[lucide--circle-question-mark] text-muted-foreground" />
       <Button
         variant="muted-textonly"
@@ -19,6 +22,17 @@
         {{ $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"
@@ -110,8 +124,11 @@
 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'
 
-defineProps<{
+const { result } = 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 } = useBillingContext()
+const { showSubscriptionDialog } = useSubscription()
 
 function handleClose() {
   dialogStore.closeDialog({ key: 'upload-model-upgrade' })

src/platform/assets/components/UploadModelUrlInput.vue

@@ -45,37 +45,36 @@
       </div>
 
       <div class="flex flex-col gap-2">
-        <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"
-        />
+        <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>
         <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="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 class="text-sm text-muted">
+      {{ $t('assetBrowser.uploadModelHelpFooterText') }}
     </div>
   </div>
 </template>
@@ -84,18 +83,12 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { useDialogService } from '@/services/dialogService'
+import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
+import { huggingfaceImportSource } from '@/platform/assets/importSources/huggingfaceImportSource'
+import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
 
 const { flags } = useFeatureFlags()
-const dialogService = useDialogService()
-
-const showSecretsHint = computed(() => flags.userSecretsEnabled)
-
-function openSecretsSettings() {
-  dialogService.showSettingsDialog('secrets')
-}
 
 const props = defineProps<{
   modelValue: string
@@ -111,6 +104,14 @@ 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

@@ -0,0 +1,101 @@
+<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',
-    secondaryText: 'A test model description',
+    description: '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.secondaryText).toBe('test-asset.safetensors')
+      expect(result.description).toBe('Test model')
       expect(result.badges).toContainEqual({
         label: 'checkpoints',
         type: 'type'
       })
     })
 
-    it('creates secondaryText from filename when metadata missing', () => {
+    it('creates fallback description from tags 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.secondaryText).toBe('test-asset.safetensors')
+      expect(result.description).toBe('loras model')
     })
 
     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,
-  getAssetDisplayName,
-  getAssetFilename
+  getAssetDescription,
+  getAssetDisplayName
 } 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 {
-  secondaryText: string
+  description: string
   badges: AssetBadge[]
   stats: {
     formattedDate?: string
@@ -116,11 +116,15 @@ export function useAssetBrowser(
 
   // Transform API asset to display asset
   function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
-    const secondaryText = getAssetFilename(asset)
+    // 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`
 
+    // 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")
@@ -148,7 +152,7 @@ export function useAssetBrowser(
 
     return {
       ...asset,
-      secondaryText,
+      description,
       badges,
       stats
     }

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

@@ -112,7 +112,6 @@ function createMockAsset(overrides: Partial<AssetItem> = {}): AssetItem {
 
 describe('useMediaAssetActions', () => {
   beforeEach(() => {
-    vi.resetModules()
     setActivePinia(createPinia())
     vi.clearAllMocks()
     capturedFilenames.values = []

src/platform/assets/composables/useMediaAssetActions.ts

@@ -65,8 +65,15 @@ export function useMediaAssetActions() {
 
     try {
       const filename = targetAsset.name
-      // Prefer preview_url (already includes subfolder) with getAssetUrl as fallback
-      const downloadUrl = targetAsset.preview_url || getAssetUrl(targetAsset)
+      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)
+      }
 
       downloadFile(downloadUrl, filename)
 
@@ -96,8 +103,15 @@ export function useMediaAssetActions() {
     try {
       assets.forEach((asset) => {
         const filename = asset.name
-        // Prefer preview_url (already includes subfolder) with getAssetUrl as fallback
-        const downloadUrl = asset.preview_url || getAssetUrl(asset)
+        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)
+        }
         downloadFile(downloadUrl, filename)
       })
 
@@ -120,6 +134,71 @@ export function useMediaAssetActions() {
     }
   }
 
+  /**
+   * Show confirmation dialog and delete asset if confirmed
+   * @param asset The asset to delete
+   * @returns true if the asset was deleted, false otherwise
+   */
+  const confirmDelete = async (asset: AssetItem): Promise<boolean> => {
+    const assetType = getAssetType(asset)
+
+    return new Promise((resolve) => {
+      dialogStore.showDialog({
+        key: 'delete-asset-confirmation',
+        title: t('mediaAsset.deleteAssetTitle'),
+        component: ConfirmationDialogContent,
+        props: {
+          message: t('mediaAsset.deleteAssetDescription'),
+          type: 'delete',
+          itemList: [asset.name],
+          onConfirm: async () => {
+            const success = await deleteAsset(asset, assetType)
+            resolve(success)
+          },
+          onCancel: () => {
+            resolve(false)
+          }
+        }
+      })
+    })
+  }
+
+  const deleteAsset = async (asset: AssetItem, assetType: string) => {
+    const assetsStore = useAssetsStore()
+
+    try {
+      // Perform the deletion
+      await deleteAssetApi(asset, assetType)
+
+      // Update the appropriate store based on asset type
+      if (assetType === 'output') {
+        await assetsStore.updateHistory()
+      } else {
+        await assetsStore.updateInputs()
+      }
+
+      toast.add({
+        severity: 'success',
+        summary: t('g.success'),
+        detail: t('mediaAsset.assetDeletedSuccessfully'),
+        life: 2000
+      })
+      return true
+    } catch (error) {
+      console.error('Failed to delete asset:', error)
+      const errorMessage = error instanceof Error ? error.message : ''
+      const isCloudWarning = errorMessage.includes('Cloud')
+
+      toast.add({
+        severity: isCloudWarning ? 'warn' : 'error',
+        summary: isCloudWarning ? t('g.warning') : t('g.error'),
+        detail: errorMessage || t('mediaAsset.failedToDeleteAsset'),
+        life: 3000
+      })
+      return false
+    }
+  }
+
   const copyJobId = async (asset?: AssetItem) => {
     const targetAsset = asset ?? mediaContext?.asset.value
     if (!targetAsset) return
@@ -501,44 +580,30 @@ export function useMediaAssetActions() {
   }
 
   /**
-   * Show confirmation dialog and delete asset(s) if confirmed
-   * @param assets Single asset or array of assets to delete
-   * @returns true if user confirmed and deletion was attempted, false if cancelled
+   * Delete multiple assets with confirmation dialog
+   * @param assets Array of assets to delete
    */
-  const deleteAssets = async (
-    assets: AssetItem | AssetItem[]
-  ): Promise<boolean> => {
-    const assetArray = Array.isArray(assets) ? assets : [assets]
-    if (assetArray.length === 0) return false
+  const deleteMultipleAssets = async (assets: AssetItem[]) => {
+    if (!assets || assets.length === 0) return
 
     const assetsStore = useAssetsStore()
-    const isSingle = assetArray.length === 1
 
-    return new Promise((resolve) => {
+    return new Promise<void>((resolve) => {
       dialogStore.showDialog({
-        key: 'delete-assets-confirmation',
-        title: isSingle
-          ? t('mediaAsset.deleteAssetTitle')
-          : t('mediaAsset.deleteSelectedTitle'),
+        key: 'delete-multiple-assets-confirmation',
+        title: t('mediaAsset.deleteSelectedTitle'),
         component: ConfirmationDialogContent,
         props: {
-          message: isSingle
-            ? t('mediaAsset.deleteAssetDescription')
-            : t('mediaAsset.deleteSelectedDescription', {
-                count: assetArray.length
-              }),
+          message: t('mediaAsset.deleteSelectedDescription', {
+            count: assets.length
+          }),
           type: 'delete',
-          itemList: assetArray.map((asset) => asset.name),
+          itemList: assets.map((asset) => asset.name),
           onConfirm: async () => {
-            // Show loading overlay for all assets being deleted
-            assetArray.forEach((asset) =>
-              assetsStore.setAssetDeleting(asset.id, true)
-            )
-
             try {
               // Delete all assets using Promise.allSettled to track individual results
               const results = await Promise.allSettled(
-                assetArray.map((asset) =>
+                assets.map((asset) =>
                   deleteAssetApi(asset, getAssetType(asset))
                 )
               )
@@ -552,16 +617,16 @@ export function useMediaAssetActions() {
               // Log failed deletions for debugging
               failed.forEach((result, index) => {
                 console.warn(
-                  `Failed to delete asset ${assetArray[index].name}:`,
+                  `Failed to delete asset ${assets[index].name}:`,
                   result.reason
                 )
               })
 
               // Update stores after deletions
-              const hasOutputAssets = assetArray.some(
+              const hasOutputAssets = assets.some(
                 (a) => getAssetType(a) === 'output'
               )
-              const hasInputAssets = assetArray.some(
+              const hasInputAssets = assets.some(
                 (a) => getAssetType(a) === 'input'
               )
 
@@ -574,27 +639,25 @@ export function useMediaAssetActions() {
 
               // Show appropriate feedback based on results
               if (failed.length === 0) {
+                // All succeeded
                 toast.add({
                   severity: 'success',
                   summary: t('g.success'),
-                  detail: isSingle
-                    ? t('mediaAsset.assetDeletedSuccessfully')
-                    : t('mediaAsset.selection.assetsDeletedSuccessfully', {
-                        count: succeeded
-                      }),
+                  detail: t('mediaAsset.selection.assetsDeletedSuccessfully', {
+                    count: succeeded
+                  }),
                   life: 2000
                 })
               } else if (succeeded === 0) {
+                // All failed
                 toast.add({
                   severity: 'error',
                   summary: t('g.error'),
-                  detail: isSingle
-                    ? t('mediaAsset.failedToDeleteAsset')
-                    : t('mediaAsset.selection.failedToDeleteAssets'),
+                  detail: t('mediaAsset.selection.failedToDeleteAssets'),
                   life: 3000
                 })
               } else {
-                // Partial success (only possible with multiple assets)
+                // Partial success
                 toast.add({
                   severity: 'warn',
                   summary: t('g.warning'),
@@ -610,22 +673,15 @@ export function useMediaAssetActions() {
               toast.add({
                 severity: 'error',
                 summary: t('g.error'),
-                detail: isSingle
-                  ? t('mediaAsset.failedToDeleteAsset')
-                  : t('mediaAsset.selection.failedToDeleteAssets'),
+                detail: t('mediaAsset.selection.failedToDeleteAssets'),
                 life: 3000
               })
-            } finally {
-              // Hide loading overlay for all assets
-              assetArray.forEach((asset) =>
-                assetsStore.setAssetDeleting(asset.id, false)
-              )
             }
 
-            resolve(true)
+            resolve()
           },
           onCancel: () => {
-            resolve(false)
+            resolve()
           }
         }
       })
@@ -635,7 +691,9 @@ export function useMediaAssetActions() {
   return {
     downloadAsset,
     downloadMultipleAssets,
-    deleteAssets,
+    confirmDelete,
+    deleteAsset,
+    deleteMultipleAssets,
     copyJobId,
     addWorkflow,
     addMultipleToWorkflow,

src/platform/assets/composables/useModelUpload.ts

@@ -1,11 +1,10 @@
-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
@@ -16,6 +15,7 @@ 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,6 +28,7 @@ export function useModelUpload(
         }
       })
     } else {
+      // Show regular upload modal
       dialogStore.showDialog({
         key: 'upload-model',
         headerComponent: UploadModelDialogHeader,

src/platform/assets/composables/useUploadModelWizard.ts

@@ -2,6 +2,7 @@ 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'
@@ -31,6 +32,7 @@ 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)
@@ -45,10 +47,10 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
 
   const selectedModelType = ref<string>()
 
-  const importSources: ImportSource[] = [
-    civitaiImportSource,
-    huggingfaceImportSource
-  ]
+  // Available import sources
+  const importSources: ImportSource[] = flags.huggingfaceModelImportEnabled
+    ? [civitaiImportSource, huggingfaceImportSource]
+    : [civitaiImportSource]
 
   // Detected import source based on URL
   const detectedSource = computed(() => {
@@ -67,9 +69,9 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     }
   )
 
-  // Validation - only enable Continue when URL matches a supported source
+  // Validation
   const canFetchMetadata = computed(() => {
-    return detectedSource.value !== null
+    return wizardData.value.url.trim().length > 0
   })
 
   const canUploadModel = computed(() => {
@@ -231,27 +233,40 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
         model_type: selectedModelType.value
       }
 
-      const result = await assetService.uploadAssetAsync({
-        source_url: wizardData.value.url,
-        tags,
-        user_metadata: userMetadata,
-        preview_id: previewId
-      })
+      if (flags.asyncModelUploadEnabled) {
+        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
-          )
+        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()
         }
-        uploadStatus.value = 'processing'
+        currentStep.value = 3
       } 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,7 +36,6 @@ 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',
@@ -53,95 +52,6 @@ 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, type, and subfolder parameters
+ * Constructs the proper URL with filename encoding and type parameter
  *
  * @param asset The asset to get URL for
  * @param defaultType Default type if asset doesn't have tags (default: 'output')
@@ -23,12 +23,7 @@ export function getAssetUrl(
   defaultType: 'input' | 'output' = 'output'
 ): string {
   const assetType = getAssetType(asset, defaultType)
-  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}`)
+  return api.apiURL(
+    `/view?filename=${encodeURIComponent(asset.name)}&type=${assetType}`
+  )
 }

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

@@ -110,19 +110,13 @@ async function createMockNode(overrides?: {
     widgets: { value: [widget], writable: true }
   })
 }
-function createMockNodeProvider(
-  overrides: {
-    nodeDef?: { name: string; display_name: string }
-    key?: string
-  } = {}
-) {
+function createMockNodeProvider() {
   return {
     nodeDef: {
       name: 'CheckpointLoaderSimple',
-      display_name: 'Load Checkpoint',
-      ...overrides.nodeDef
+      display_name: 'Load Checkpoint'
     },
-    key: overrides.key ?? 'ckpt_name'
+    key: 'ckpt_name'
   }
 }
 /**
@@ -276,24 +270,6 @@ 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,27 +171,26 @@ export function createModelNodeFromAsset(
     }
   }
 
-  // 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 }
-        }
+  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
   }
 
-  // Add the node to the graph
+  // 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
   targetGraph.add(node)
 
   return { success: true, value: node }

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

@@ -40,18 +40,13 @@ vi.mock('@/composables/useErrorHandling', () => ({
 
 const subscriptionMocks = vi.hoisted(() => ({
   isActiveSubscription: { value: false },
-  isInitialized: { value: true },
-  subscriptionStatus: { value: null }
+  isInitialized: { value: true }
 }))
 
 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 } = useBillingContext()
+const { isActiveSubscription, isInitialized } = useSubscription()
 
 const selectedTierKey = ref<TierKey | null>(null)
 

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

@@ -14,18 +14,15 @@ 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),
-    subscriptionStatus: ref(null)
+    isYearlySubscription: computed(() => mockIsYearlySubscription.value)
   })
 }))
 
@@ -56,22 +53,11 @@ vi.mock('@/composables/useErrorHandling', () => ({
 
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: () => ({
-    getFirebaseAuthHeader: mockGetFirebaseAuthHeader,
-    userId: 'user-123'
+    getFirebaseAuthHeader: mockGetFirebaseAuthHeader
   }),
   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
 }))
@@ -140,7 +126,6 @@ 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' })
@@ -163,13 +148,6 @@ 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,9 +266,6 @@ 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']
@@ -333,8 +330,6 @@ const tiers: PricingTierConfig[] = [
 const { n } = useI18n()
 const { isActiveSubscription, subscriptionTier, isYearlySubscription } =
   useSubscription()
-const telemetry = useTelemetry()
-const { userId } = useFirebaseAuthStore()
 const { accessBillingPortal, reportError } = useFirebaseAuthActions()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
@@ -415,19 +410,6 @@ 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 = {
@@ -448,11 +430,7 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
           await accessBillingPortal(checkoutTier)
         }
       } else {
-        await performSubscriptionCheckout(
-          tierKey,
-          currentBillingCycle.value,
-          true
-        )
+        await performSubscriptionCheckout(tierKey, currentBillingCycle.value)
       }
     } finally {
       isLoading.value = false

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

@@ -1,527 +0,0 @@
-<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>