fix: track setting changes from store

## Summary

- Point the website Windows desktop download URL at
`https://comfy.org/download/windows/nsis/x64`.
- Keep macOS on the existing ToDesktop URL.
- Update the download page smoke test to expect the new Windows href.

## Context

This is the frontend leg of the GTM-93 Windows MVP. ToDesktop still
controls `download.comfy.org`; instead of changing DNS, the website
sends Windows users to a controlled `comfy.org` proxy path that the
router PR handles. The proxy forwards to ToDesktop and adds a tokenized
`Content-Disposition` filename for Desktop to consume on Windows.

Linear:
https://linear.app/comfyorg/issue/GTM-93/fix-posthog-identify-call-unblock-funnel-attribution-desktop-funnel
Router PR: https://github.com/Comfy-Org/comfy-router/pull/33
Desktop PR: https://github.com/Comfy-Org/Comfy-Desktop/pull/1149

## Validation

- `pnpm --filter @comfyorg/website run typecheck`
- `pnpm --filter @comfyorg/website run build`
- `pnpm --filter @comfyorg/website exec playwright test
e2e/download.spec.ts`
- pre-commit: `pnpm typecheck`, `pnpm typecheck:website`

apps/website/e2e/download.spec.ts

@@ -47,6 +47,11 @@ test.describe('Download page @smoke', () => {
     const downloadBtn = hero.getByRole('link', { name: /DOWNLOAD DESKTOP/i })
     await expect(downloadBtn).toBeVisible()
     await expect(downloadBtn).toHaveAttribute('target', '_blank')
+    await expect(downloadBtn).toHaveAttribute(
+      'href',
+      'https://comfy.org/download/windows/nsis/x64'
+    )
+    await expect(downloadBtn).toHaveAttribute('data-astro-prefetch', 'false')
 
     const githubBtn = hero.getByRole('link', { name: /INSTALL FROM GITHUB/i })
     await expect(githubBtn).toBeVisible()
@@ -73,7 +78,7 @@ test.describe('Download page @smoke', () => {
     })
 
     const windowsBtn = hero.locator(
-      'a[href="https://download.comfy.org/windows/nsis/x64"]'
+      'a[href="https://comfy.org/download/windows/nsis/x64"]'
     )
     await expect(windowsBtn).toBeVisible()
     await expect(windowsBtn).toHaveText(/DOWNLOAD DESKTOP/i)

apps/website/src/components/product/local/DownloadLocalButton.vue

@@ -72,6 +72,7 @@ const buttons = computed<ButtonSpec[]>(() => {
     size="lg"
     :class="customClass"
     :aria-label="btn.ariaLabel"
+    :data-astro-prefetch="btn.key === 'windows' ? 'false' : undefined"
     @click="captureDownloadClick(btn.key)"
   >
     <span class="inline-flex items-center gap-2">

apps/website/src/composables/useDownloadUrl.ts

@@ -3,7 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { externalLinks } from '@/config/routes'
 
 export const downloadUrls = {
-  windows: 'https://download.comfy.org/windows/nsis/x64',
+  windows: 'https://comfy.org/download/windows/nsis/x64',
   macArm: 'https://download.comfy.org/mac/dmg/arm64'
 } as const
 

browser_tests/tests/billingFacadeConsumers.spec.ts

@@ -0,0 +1,165 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import type { CloudSubscriptionStatusResponse } from '@/platform/cloud/subscription/composables/useSubscription'
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
+
+/**
+ * Billing facade consumers — FE-933 (B3) regression.
+ *
+ * The repointed surfaces (avatar popover tier badge / balance, free-tier
+ * dialog renewal date) must keep rendering from `useBillingContext`, which in
+ * a personal workspace routes through the legacy `/customers/*` endpoints
+ * (mocked here). Drives a raw `page` (not the `comfyPage` fixture) so the
+ * cloud app boots against fully mocked endpoints — same pattern as
+ * creditsTile.spec.ts. `team_workspaces_enabled: false` keeps the topbar on
+ * the legacy popover variant that FE-933 repointed.
+ */
+const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
+
+const jsonRoute = (body: unknown) => ({
+  status: 200,
+  contentType: 'application/json',
+  body: JSON.stringify(body)
+})
+
+async function mockCloudBoot(
+  page: Page,
+  subscriptionStatus: CloudSubscriptionStatusResponse,
+  remoteConfig: RemoteConfig = { team_workspaces_enabled: false }
+) {
+  await page.route('**/api/features', (r) => r.fulfill(jsonRoute(remoteConfig)))
+  await page.route('**/api/system_stats', (r) =>
+    r.fulfill(jsonRoute(mockSystemStats))
+  )
+  await page.route('**/api/users', (r) =>
+    r.fulfill(
+      jsonRoute({
+        storage: 'server',
+        migrated: true,
+        users: { 'test-user-e2e': 'E2E Test User' }
+      })
+    )
+  )
+  // TutorialCompleted suppresses the new-user template browser, whose modal
+  // overlay would otherwise intercept clicks on the topbar.
+  await page.route('**/api/settings', (r) =>
+    r.fulfill(jsonRoute({ 'Comfy.TutorialCompleted': true }))
+  )
+  await page.route('**/api/userdata**', (r) => r.fulfill(jsonRoute([])))
+  await page.route('**/api/extensions', (r) => r.fulfill(jsonRoute([])))
+  await page.route('**/api/object_info', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/global_subgraphs', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/i18n', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/auth/session', (r) =>
+    r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
+  )
+  await page.route('**/releases**', (r) => r.fulfill(jsonRoute([])))
+
+  // Single personal workspace: keeps the billing facade on the legacy
+  // `/customers/*` path when team workspaces are enabled.
+  await page.route('**/api/workspaces', (r) =>
+    r.fulfill(
+      jsonRoute({
+        workspaces: [
+          {
+            id: 'ws-personal',
+            name: 'Personal Workspace',
+            type: 'personal',
+            role: 'owner'
+          }
+        ]
+      })
+    )
+  )
+
+  await page.route('**/customers/cloud-subscription-status', (r) =>
+    r.fulfill(jsonRoute(subscriptionStatus))
+  )
+  await page.route('**/customers/balance', (r) =>
+    r.fulfill(
+      jsonRoute({
+        amount_micros: 6000, // -> 12,660 credits
+        currency: 'usd',
+        effective_balance_micros: 6000
+      })
+    )
+  )
+}
+
+async function bootApp(page: Page) {
+  const auth = new CloudAuthHelper(page)
+  await auth.mockAuth()
+
+  await page.addInitScript(() => {
+    localStorage.setItem('Comfy.userId', 'test-user-e2e')
+  })
+
+  await page.goto(APP_URL)
+  await page.waitForFunction(() => !!window.app?.extensionManager, null, {
+    timeout: 45_000
+  })
+}
+
+test.describe('Billing facade consumers (FE-933)', { tag: '@cloud' }, () => {
+  test('avatar popover renders tier badge and balance from the facade', async ({
+    page
+  }) => {
+    test.setTimeout(60_000)
+
+    await mockCloudBoot(page, {
+      is_active: true,
+      subscription_tier: 'PRO',
+      subscription_duration: 'MONTHLY',
+      renewal_date: '2099-02-20T10:00:00Z',
+      end_date: null
+    })
+    await bootApp(page)
+
+    await page.getByRole('button', { name: 'Current user' }).click()
+    const popover = page.locator('.current-user-popover')
+    await expect(popover).toBeVisible()
+
+    await expect(popover.getByText('Pro', { exact: true })).toBeVisible()
+    await expect(popover.getByText('12,660')).toBeVisible()
+    await expect(popover.getByTestId('add-credits-button')).toBeVisible()
+  })
+
+  test('free-tier dialog shows the renewal date from the facade', async ({
+    page
+  }) => {
+    test.setTimeout(60_000)
+
+    // Boots with team workspaces enabled (production shape); the facade still
+    // routes a personal workspace through `/customers/*`. With subscription
+    // gating on, an inactive FREE user gets the "Subscribe to run" button,
+    // which opens the free-tier dialog on click. (refreshRemoteConfig
+    // overwrites window.__CONFIG__ from /api/features, so the flags must come
+    // from the features mock, not an init script.)
+    await mockCloudBoot(
+      page,
+      {
+        is_active: false,
+        subscription_tier: 'FREE',
+        subscription_duration: 'MONTHLY',
+        // 10:00Z keeps the en-US calendar date stable across CI timezones.
+        renewal_date: '2099-02-20T10:00:00Z',
+        end_date: null
+      },
+      { team_workspaces_enabled: true, subscription_required: true }
+    )
+    await bootApp(page)
+
+    await page.getByTestId('subscribe-to-run-button').click()
+
+    // T5: the dialog must source the date from facade renewalDate — when this
+    // line read the legacy store it silently vanished for team users.
+    await expect(
+      page.getByText('Your credits refresh on Feb 20, 2099.')
+    ).toBeVisible()
+  })
+})

src/components/topbar/CurrentUserPopoverLegacy.test.ts

@@ -1,37 +1,18 @@
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
-import { h, ref } from 'vue'
+import { defineComponent, h, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
+import type { BalanceInfo, SubscriptionInfo } from '@/composables/billing/types'
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserPopoverLegacy from './CurrentUserPopoverLegacy.vue'
 
-// Mock all firebase modules
-vi.mock('firebase/app', () => ({
-  initializeApp: vi.fn(),
-  getApp: vi.fn()
-}))
-
-vi.mock('firebase/auth', () => ({
-  getAuth: vi.fn(),
-  setPersistence: vi.fn(),
-  browserLocalPersistence: {},
-  onAuthStateChanged: vi.fn(),
-  signInWithEmailAndPassword: vi.fn(),
-  signOut: vi.fn()
-}))
-
-// Mock pinia
-vi.mock('pinia')
-
-// Mock showSettingsDialog and showTopUpCreditsDialog
 const mockShowSettingsDialog = vi.fn()
 const mockShowTopUpCreditsDialog = vi.fn()
 
-// Mock the settings dialog composable
 vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
   useSettingsDialog: vi.fn(() => ({
     show: mockShowSettingsDialog,
@@ -40,7 +21,6 @@ vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
   }))
 }))
 
-// Mock window.open
 const originalWindowOpen = window.open
 beforeEach(() => {
   window.open = vi.fn()
@@ -50,7 +30,6 @@ afterAll(() => {
   window.open = originalWindowOpen
 })
 
-// Mock the useCurrentUser composable
 const mockHandleSignOut = vi.fn()
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: vi.fn(() => ({
@@ -61,60 +40,50 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
   }))
 }))
 
-// Mock the useAuthActions composable
-const mockLogout = vi.fn()
-vi.mock('@/composables/auth/useAuthActions', () => ({
-  useAuthActions: vi.fn(() => ({
-    fetchBalance: vi.fn().mockResolvedValue(undefined),
-    logout: mockLogout
-  }))
-}))
-
-// Mock the dialog service
 vi.mock('@/services/dialogService', () => ({
   useDialogService: vi.fn(() => ({
     showTopUpCreditsDialog: mockShowTopUpCreditsDialog
   }))
 }))
 
-// Mock the authStore with hoisted state for per-test manipulation
-const mockAuthStoreState = vi.hoisted(() => ({
-  balance: {
-    amount_micros: 100_000,
-    effective_balance_micros: 100_000,
-    currency: 'usd'
-  } as {
-    amount_micros?: number
-    effective_balance_micros?: number
-    currency: string
-  },
-  isFetchingBalance: false
-}))
+function makeSubscription(
+  overrides: Partial<SubscriptionInfo> = {}
+): SubscriptionInfo {
+  return {
+    isActive: true,
+    tier: 'CREATOR',
+    duration: 'MONTHLY',
+    planSlug: null,
+    renewalDate: null,
+    endDate: null,
+    isCancelled: false,
+    hasFunds: true,
+    ...overrides
+  }
+}
 
-vi.mock('@/stores/authStore', () => ({
-  useAuthStore: vi.fn(() => ({
-    getAuthHeader: vi
-      .fn()
-      .mockResolvedValue({ Authorization: 'Bearer mock-token' }),
-    balance: mockAuthStoreState.balance,
-    isFetchingBalance: mockAuthStoreState.isFetchingBalance
-  }))
-}))
-
-// Mock the useSubscription composable
 const mockFetchStatus = vi.fn().mockResolvedValue(undefined)
+const mockFetchBalance = vi.fn().mockResolvedValue(undefined)
+const mockIsActiveSubscription = ref(true)
 const mockIsFreeTier = ref(false)
-vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
-  useSubscription: vi.fn(() => ({
-    isActiveSubscription: ref(true),
+const mockTier = ref<SubscriptionInfo['tier']>('CREATOR')
+const mockSubscription = ref<SubscriptionInfo | null>(makeSubscription())
+const mockBalance = ref<BalanceInfo | null>(null)
+const mockIsLoading = ref(false)
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: vi.fn(() => ({
+    isActiveSubscription: mockIsActiveSubscription,
     isFreeTier: mockIsFreeTier,
-    subscriptionTierName: ref('Creator'),
-    subscriptionTier: ref('CREATOR'),
-    fetchStatus: mockFetchStatus
+    tier: mockTier,
+    subscription: mockSubscription,
+    balance: mockBalance,
+    isLoading: mockIsLoading,
+    fetchStatus: mockFetchStatus,
+    fetchBalance: mockFetchBalance
   }))
 }))
 
-// Mock the useSubscriptionDialog composable
 const mockShowPricingTable = vi.fn()
 vi.mock(
   '@/platform/cloud/subscription/composables/useSubscriptionDialog',
@@ -127,7 +96,6 @@ vi.mock(
   })
 )
 
-// Mock UserAvatar component
 vi.mock('@/components/common/UserAvatar.vue', () => ({
   default: {
     name: 'UserAvatarMock',
@@ -137,22 +105,10 @@ vi.mock('@/components/common/UserAvatar.vue', () => ({
   }
 }))
 
-// Mock UserCredit component
-vi.mock('@/components/common/UserCredit.vue', () => ({
-  default: {
-    name: 'UserCreditMock',
-    render() {
-      return h('div', 'Credit: 100')
-    }
-  }
-}))
-
-// Mock formatCreditsFromCents
 vi.mock('@/base/credits/comfyCredits', () => ({
   formatCreditsFromCents: vi.fn(({ cents }) => (cents / 100).toString())
 }))
 
-// Mock useExternalLink
 vi.mock('@/composables/useExternalLink', () => ({
   useExternalLink: vi.fn(() => ({
     buildDocsUrl: vi.fn((path) => `https://docs.comfy.org${path}`),
@@ -162,14 +118,12 @@ vi.mock('@/composables/useExternalLink', () => ({
   }))
 }))
 
-// Mock useTelemetry
 vi.mock('@/platform/telemetry', () => ({
   useTelemetry: vi.fn(() => ({
     trackAddApiCreditButtonClicked: vi.fn()
   }))
 }))
 
-// Mock isCloud with hoisted state for per-test toggling
 const mockIsCloud = vi.hoisted(() => ({ value: true }))
 vi.mock('@/platform/distribution/types', () => ({
   get isCloud() {
@@ -178,25 +132,37 @@ vi.mock('@/platform/distribution/types', () => ({
 }))
 
 vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
-  default: {
+  default: defineComponent({
     name: 'SubscribeButtonMock',
-    render() {
-      return h('div', 'Subscribe Button')
+    emits: ['subscribed'],
+    setup(_, { emit }) {
+      return () =>
+        h(
+          'button',
+          {
+            'data-testid': 'subscribe-button-mock',
+            onClick: () => emit('subscribed')
+          },
+          'Subscribe Button'
+        )
     }
-  }
+  })
 }))
 
 describe('CurrentUserPopoverLegacy', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockIsCloud.value = true
+    mockIsActiveSubscription.value = true
     mockIsFreeTier.value = false
-    mockAuthStoreState.balance = {
-      amount_micros: 100_000,
-      effective_balance_micros: 100_000,
+    mockTier.value = 'CREATOR'
+    mockSubscription.value = makeSubscription()
+    mockBalance.value = {
+      amountMicros: 100_000,
+      effectiveBalanceMicros: 100_000,
       currency: 'usd'
     }
-    mockAuthStoreState.isFetchingBalance = false
+    mockIsLoading.value = false
   })
 
   function renderComponent() {
@@ -230,7 +196,47 @@ describe('CurrentUserPopoverLegacy', () => {
     expect(screen.getByText('test@example.com')).toBeInTheDocument()
   })
 
-  it('calls formatCreditsFromCents with correct parameters and displays formatted credits', () => {
+  it('fetches the balance through the billing facade on mount', () => {
+    renderComponent()
+
+    expect(mockFetchBalance).toHaveBeenCalled()
+  })
+
+  it('refreshes subscription status through the billing facade after subscribing', async () => {
+    mockIsActiveSubscription.value = false
+    const { user } = renderComponent()
+
+    await user.click(screen.getByTestId('subscribe-button-mock'))
+
+    expect(mockFetchStatus).toHaveBeenCalled()
+  })
+
+  describe('subscription tier badge', () => {
+    it('renders the tier name derived from the facade tier', () => {
+      renderComponent()
+
+      expect(screen.getByText('Creator')).toBeInTheDocument()
+    })
+
+    it('renders the yearly tier name when the facade subscription is annual', () => {
+      mockSubscription.value = makeSubscription({ duration: 'ANNUAL' })
+
+      renderComponent()
+
+      expect(screen.getByText('Creator Yearly')).toBeInTheDocument()
+    })
+
+    it('hides the badge when the facade reports no tier', () => {
+      mockTier.value = null
+      mockSubscription.value = null
+
+      renderComponent()
+
+      expect(screen.queryByText('Creator')).not.toBeInTheDocument()
+    })
+  })
+
+  it('formats and displays the facade balance', () => {
     renderComponent()
 
     expect(formatCreditsFromCents).toHaveBeenCalledWith({
@@ -245,6 +251,14 @@ describe('CurrentUserPopoverLegacy', () => {
     expect(screen.getByText('1000')).toBeInTheDocument()
   })
 
+  it('shows a skeleton instead of the balance while billing is loading', () => {
+    mockIsLoading.value = true
+
+    renderComponent()
+
+    expect(screen.queryByText('1000')).not.toBeInTheDocument()
+  })
+
   it('renders logout menu item with correct text', () => {
     renderComponent()
 
@@ -324,11 +338,11 @@ describe('CurrentUserPopoverLegacy', () => {
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
-  describe('effective_balance_micros handling', () => {
-    it('uses effective_balance_micros when present (positive balance)', () => {
-      mockAuthStoreState.balance = {
-        amount_micros: 200_000,
-        effective_balance_micros: 150_000,
+  describe('facade balance handling', () => {
+    it('uses effectiveBalanceMicros when present (positive balance)', () => {
+      mockBalance.value = {
+        amountMicros: 200_000,
+        effectiveBalanceMicros: 150_000,
         currency: 'usd'
       }
 
@@ -345,10 +359,10 @@ describe('CurrentUserPopoverLegacy', () => {
       expect(screen.getByText('1500')).toBeInTheDocument()
     })
 
-    it('uses effective_balance_micros when zero', () => {
-      mockAuthStoreState.balance = {
-        amount_micros: 100_000,
-        effective_balance_micros: 0,
+    it('uses effectiveBalanceMicros when zero', () => {
+      mockBalance.value = {
+        amountMicros: 100_000,
+        effectiveBalanceMicros: 0,
         currency: 'usd'
       }
 
@@ -365,10 +379,10 @@ describe('CurrentUserPopoverLegacy', () => {
       expect(screen.getByText('0')).toBeInTheDocument()
     })
 
-    it('uses effective_balance_micros when negative', () => {
-      mockAuthStoreState.balance = {
-        amount_micros: 0,
-        effective_balance_micros: -50_000,
+    it('uses effectiveBalanceMicros when negative', () => {
+      mockBalance.value = {
+        amountMicros: 0,
+        effectiveBalanceMicros: -50_000,
         currency: 'usd'
       }
 
@@ -385,9 +399,9 @@ describe('CurrentUserPopoverLegacy', () => {
       expect(screen.getByText('-500')).toBeInTheDocument()
     })
 
-    it('falls back to amount_micros when effective_balance_micros is missing', () => {
-      mockAuthStoreState.balance = {
-        amount_micros: 100_000,
+    it('falls back to amountMicros when effectiveBalanceMicros is missing', () => {
+      mockBalance.value = {
+        amountMicros: 100_000,
         currency: 'usd'
       }
 
@@ -404,10 +418,8 @@ describe('CurrentUserPopoverLegacy', () => {
       expect(screen.getByText('1000')).toBeInTheDocument()
     })
 
-    it('falls back to 0 when both effective_balance_micros and amount_micros are missing', () => {
-      mockAuthStoreState.balance = {
-        currency: 'usd'
-      }
+    it('falls back to 0 when the facade reports no balance', () => {
+      mockBalance.value = null
 
       renderComponent()
 
@@ -466,8 +478,11 @@ describe('CurrentUserPopoverLegacy', () => {
     })
 
     it('hides subscribe button', () => {
+      mockIsActiveSubscription.value = false
       renderComponent()
-      expect(screen.queryByText('Subscribe Button')).not.toBeInTheDocument()
+      expect(
+        screen.queryByTestId('subscribe-button-mock')
+      ).not.toBeInTheDocument()
     })
 
     it('still shows partner nodes menu item', () => {

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -32,12 +32,7 @@
     <!-- Credits Section -->
     <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
       <i class="icon-[lucide--component] text-sm text-amber-400" />
-      <Skeleton
-        v-if="authStore.isFetchingBalance"
-        width="4rem"
-        height="1.25rem"
-        class="w-full"
-      />
+      <Skeleton v-if="isLoading" width="4rem" height="1.25rem" class="w-full" />
       <span v-else class="text-base font-semibold text-base-foreground">{{
         formattedBalance
       }}</span>
@@ -162,16 +157,15 @@ import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import UserAvatar from '@/components/common/UserAvatar.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useAuthActions } from '@/composables/auth/useAuthActions'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useExternalLink } from '@/composables/useExternalLink'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useWorkspaceTierLabel } from '@/platform/workspace/composables/useWorkspaceTierLabel'
 import { useDialogService } from '@/services/dialogService'
-import { useAuthStore } from '@/stores/authStore'
 
 const emit = defineEmits<{
   close: []
@@ -181,25 +175,29 @@ const { buildDocsUrl, docsPaths } = useExternalLink()
 
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
-const authActions = useAuthActions()
-const authStore = useAuthStore()
 const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
 const {
   isActiveSubscription,
   isFreeTier,
-  subscriptionTierName,
-  subscriptionTier,
-  fetchStatus
-} = useSubscription()
+  tier,
+  subscription,
+  balance,
+  isLoading,
+  fetchStatus,
+  fetchBalance
+} = useBillingContext()
+const { formatTierName } = useWorkspaceTierLabel()
 const subscriptionDialog = useSubscriptionDialog()
 const { locale } = useI18n()
 
+const subscriptionTierName = computed(() =>
+  formatTierName(tier.value, subscription.value?.duration === 'ANNUAL')
+)
+
 const formattedBalance = computed(() => {
   const cents =
-    authStore.balance?.effective_balance_micros ??
-    authStore.balance?.amount_micros ??
-    0
+    balance.value?.effectiveBalanceMicros ?? balance.value?.amountMicros ?? 0
   return formatCreditsFromCents({
     cents,
     locale: locale.value,
@@ -211,12 +209,12 @@ const formattedBalance = computed(() => {
 })
 
 const canUpgrade = computed(() => {
-  const tier = subscriptionTier.value
+  const currentTier = tier.value
   return (
-    tier === 'FREE' ||
-    tier === 'FOUNDERS_EDITION' ||
-    tier === 'STANDARD' ||
-    tier === 'CREATOR'
+    currentTier === 'FREE' ||
+    currentTier === 'FOUNDERS_EDITION' ||
+    currentTier === 'STANDARD' ||
+    currentTier === 'CREATOR'
   )
 })
 
@@ -270,6 +268,6 @@ const handleSubscribed = async () => {
 }
 
 onMounted(() => {
-  void authActions.fetchBalance()
+  void fetchBalance()
 })
 </script>

src/locales/ar/main.json

@@ -3847,7 +3847,7 @@
     "workspaceNotSubscribed": "هذه مساحة العمل ليست مشتركة",
     "yearly": "سنوي",
     "yearlyCreditsLabel": "إجمالي الرصيد السنوي",
-    "yearlyDiscount": "خصم 20%",
+    "saveYearly": "وفّر 20%",
     "yourPlanIncludes": "خطتك تشمل:"
   },
   "tabMenu": {

src/locales/en/main.json

@@ -2563,6 +2563,7 @@
     "billedYearly": "{total} Billed yearly",
     "monthly": "Monthly",
     "yearly": "Yearly",
+    "saveYearly": "Save 20%",
     "tierNameYearly": "{name} Yearly",
     "messageSupport": "Message support",
     "invoiceHistory": "Invoice history",
@@ -2573,7 +2574,6 @@
       "benefit2": "Up to 1 hour runtime per job on Pro",
       "benefit3": "Bring your own models (Creator & Pro)"
     },
-    "yearlyDiscount": "20% DISCOUNT",
     "tiers": {
       "free": {
         "name": "Free"

src/locales/es/main.json

@@ -3847,7 +3847,7 @@
     "workspaceNotSubscribed": "Este espacio de trabajo no tiene una suscripción",
     "yearly": "Anual",
     "yearlyCreditsLabel": "Total de créditos anuales",
-    "yearlyDiscount": "20% DESCUENTO",
+    "saveYearly": "Ahorra 20%",
     "yourPlanIncludes": "Tu plan incluye:"
   },
   "tabMenu": {

src/locales/fa/main.json

@@ -3859,7 +3859,7 @@
     "workspaceNotSubscribed": "این محیط کاری اشتراک فعال ندارد",
     "yearly": "سالانه",
     "yearlyCreditsLabel": "کل اعتبار سالانه",
-    "yearlyDiscount": "٪۲۰ تخفیف",
+    "saveYearly": "٪۲۰ صرفه‌جویی",
     "yourPlanIncludes": "طرح شما شامل:"
   },
   "tabMenu": {

src/locales/fr/main.json

@@ -3847,7 +3847,7 @@
     "workspaceNotSubscribed": "Cet espace de travail n’a pas d’abonnement",
     "yearly": "Annuel",
     "yearlyCreditsLabel": "Crédits annuels totaux",
-    "yearlyDiscount": "20% DE RÉDUCTION",
+    "saveYearly": "Économisez 20 %",
     "yourPlanIncludes": "Votre forfait comprend :"
   },
   "tabMenu": {

src/locales/ja/main.json

@@ -3847,7 +3847,7 @@
     "workspaceNotSubscribed": "このワークスペースはサブスクリプションに加入していません",
     "yearly": "年額",
     "yearlyCreditsLabel": "年間合計クレジット",
-    "yearlyDiscount": "20%割引",
+    "saveYearly": "20%お得",
     "yourPlanIncludes": "ご利用プランに含まれるもの:"
   },
   "tabMenu": {

src/locales/ko/main.json

@@ -3847,7 +3847,7 @@
     "workspaceNotSubscribed": "이 워크스페이스는 구독 중이 아닙니다",
     "yearly": "연간",
     "yearlyCreditsLabel": "연간 총 크레딧",
-    "yearlyDiscount": "20% 할인",
+    "saveYearly": "20% 절감",
     "yourPlanIncludes": "귀하의 플랜 포함 사항:"
   },
   "tabMenu": {

src/locales/pt-BR/main.json

@@ -3859,7 +3859,7 @@
     "workspaceNotSubscribed": "Este espaço de trabalho não possui uma assinatura",
     "yearly": "Anual",
     "yearlyCreditsLabel": "Total de créditos anuais",
-    "yearlyDiscount": "20% DE DESCONTO",
+    "saveYearly": "Economize 20%",
     "yourPlanIncludes": "Seu plano inclui:"
   },
   "tabMenu": {

src/locales/ru/main.json

@@ -3847,7 +3847,7 @@
     "workspaceNotSubscribed": "Это рабочее пространство не имеет подписки",
     "yearly": "Ежегодно",
     "yearlyCreditsLabel": "Годовые кредиты",
-    "yearlyDiscount": "СКИДКА 20%",
+    "saveYearly": "Экономия 20%",
     "yourPlanIncludes": "Ваш план включает:"
   },
   "tabMenu": {

src/locales/tr/main.json

@@ -3847,7 +3847,7 @@
     "workspaceNotSubscribed": "Bu çalışma alanı bir aboneliğe sahip değil",
     "yearly": "Yıllık",
     "yearlyCreditsLabel": "Toplam yıllık krediler",
-    "yearlyDiscount": "%20 İNDİRİM",
+    "saveYearly": "%20 tasarruf",
     "yourPlanIncludes": "Planınız şunları içerir:"
   },
   "tabMenu": {

src/locales/zh-TW/main.json

@@ -3847,7 +3847,7 @@
     "workspaceNotSubscribed": "此工作區尚未訂閱",
     "yearly": "每年",
     "yearlyCreditsLabel": "年度總點數",
-    "yearlyDiscount": "八折優惠",
+    "saveYearly": "節省 20%",
     "yourPlanIncludes": "您的方案包含："
   },
   "tabMenu": {

src/locales/zh/main.json

@@ -3859,7 +3859,7 @@
     "workspaceNotSubscribed": "此工作区未订阅",
     "yearly": "年度",
     "yearlyCreditsLabel": "总共年度积分",
-    "yearlyDiscount": "20% 减免",
+    "saveYearly": "立省 20%",
     "yourPlanIncludes": "您的计划包括："
   },
   "tabMenu": {

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

@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import { render, screen } from '@testing-library/vue'
+
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+import FreeTierDialogContent from './FreeTierDialogContent.vue'
+
+const mockRenewalDate = vi.hoisted(() => ({ value: null as string | null }))
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: vi.fn(() => ({
+    renewalDate: mockRenewalDate
+  }))
+}))
+
+function renderComponent() {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: { en: enMessages }
+  })
+
+  return render(FreeTierDialogContent, {
+    global: {
+      plugins: [i18n]
+    }
+  })
+}
+
+describe('FreeTierDialogContent', () => {
+  it('renders the next refresh line formatted from the facade renewalDate', () => {
+    mockRenewalDate.value = '2026-07-15T10:00:00Z'
+    renderComponent()
+    expect(
+      screen.getByText('Your credits refresh on Jul 15, 2026.')
+    ).toBeInTheDocument()
+  })
+
+  it('hides the next refresh line when renewalDate is null', () => {
+    mockRenewalDate.value = null
+    renderComponent()
+    expect(screen.queryByText(/credits refresh on/)).not.toBeInTheDocument()
+  })
+})

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

@@ -102,9 +102,9 @@
 import { computed } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { getTierCredits } from '@/platform/cloud/subscription/constants/tierPricing'
 
 defineProps<{
@@ -116,7 +116,17 @@ defineEmits<{
   upgrade: []
 }>()
 
-const { formattedRenewalDate } = useSubscription()
+const { renewalDate } = useBillingContext()
+
+const formattedRenewalDate = computed(() => {
+  if (!renewalDate.value) return ''
+
+  return new Date(renewalDate.value).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+})
 
 const freeTierCredits = computed(() => getTierCredits('free'))
 </script>

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

@@ -7,6 +7,7 @@ import { createI18n } from 'vue-i18n'
 
 import PricingTable from '@/platform/cloud/subscription/components/PricingTable.vue'
 import Button from '@/components/ui/button/Button.vue'
+import type { SubscriptionTier } from '@/platform/cloud/subscription/constants/tierPricing'
 import { PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 
 async function flushPromises() {
@@ -23,10 +24,8 @@ function createDeferredPromise<T>() {
 }
 
 const mockIsActiveSubscription = ref(false)
-const mockSubscriptionTier = ref<
-  'STANDARD' | 'CREATOR' | 'PRO' | 'FOUNDERS_EDITION' | null
->(null)
-const mockIsYearlySubscription = ref(false)
+const mockSubscriptionTier = ref<SubscriptionTier | null>(null)
+const mockSubscriptionDuration = ref<'MONTHLY' | 'ANNUAL'>('MONTHLY')
 const mockAccessBillingPortal = vi.fn()
 const mockReportError = vi.fn()
 const mockTrackBeginCheckout = vi.fn()
@@ -65,13 +64,25 @@ Object.defineProperty(globalThis, 'localStorage', {
   writable: true
 })
 
-vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
-  useSubscription: () => ({
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
     isActiveSubscription: computed(() => mockIsActiveSubscription.value),
-    isFreeTier: computed(() => false),
-    subscriptionTier: computed(() => mockSubscriptionTier.value),
-    isYearlySubscription: computed(() => mockIsYearlySubscription.value),
-    subscriptionStatus: ref(null)
+    isFreeTier: computed(() => mockSubscriptionTier.value === 'FREE'),
+    tier: computed(() => mockSubscriptionTier.value),
+    subscription: computed(() =>
+      mockSubscriptionTier.value
+        ? {
+            isActive: mockIsActiveSubscription.value,
+            tier: mockSubscriptionTier.value,
+            duration: mockSubscriptionDuration.value,
+            planSlug: null,
+            renewalDate: null,
+            endDate: null,
+            isCancelled: false,
+            hasFunds: true
+          }
+        : null
+    )
   })
 }))
 
@@ -217,7 +228,7 @@ describe('PricingTable', () => {
     vi.clearAllMocks()
     mockIsActiveSubscription.value = false
     mockSubscriptionTier.value = null
-    mockIsYearlySubscription.value = false
+    mockSubscriptionDuration.value = 'MONTHLY'
     mockUserId.value = 'user-123'
     mockAccessBillingPortal.mockReset()
     mockAccessBillingPortal.mockResolvedValue(true)
@@ -362,6 +373,7 @@ describe('PricingTable', () => {
     it('should not call accessBillingPortal when clicking current plan', async () => {
       mockIsActiveSubscription.value = true
       mockSubscriptionTier.value = 'CREATOR'
+      mockSubscriptionDuration.value = 'ANNUAL'
 
       renderComponent()
       await flushPromises()
@@ -370,12 +382,29 @@ describe('PricingTable', () => {
         .getAllByRole('button')
         .find((b) => b.textContent?.includes('Current Plan'))
 
+      expect(currentPlanButton).toBeDefined()
+      expect(currentPlanButton).toBeDisabled()
       await userEvent.click(currentPlanButton!)
       await flushPromises()
 
       expect(mockAccessBillingPortal).not.toHaveBeenCalled()
     })
 
+    it('does not highlight a current plan when the facade duration differs from the selected cycle', async () => {
+      mockIsActiveSubscription.value = true
+      mockSubscriptionTier.value = 'CREATOR'
+      mockSubscriptionDuration.value = 'MONTHLY'
+
+      renderComponent()
+      await flushPromises()
+
+      const currentPlanButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Current Plan'))
+
+      expect(currentPlanButton).toBeUndefined()
+    })
+
     it('should initiate checkout instead of billing portal for new subscribers', async () => {
       mockIsActiveSubscription.value = false
 

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

@@ -30,9 +30,9 @@
             <span>{{ option.label }}</span>
             <div
               v-if="option.value === 'yearly'"
-              class="flex items-center rounded-full bg-primary-background px-1 py-0.5 text-2xs font-bold text-white"
+              class="flex items-center rounded-full bg-primary-background px-2 py-0.5 text-2xs font-bold whitespace-nowrap text-white"
             >
-              -20%
+              {{ t('subscription.saveYearly') }}
             </div>
           </div>
         </template>
@@ -67,15 +67,15 @@
             <div class="flex flex-col gap-2">
               <div class="flex flex-row items-baseline gap-2">
                 <span
-                  class="font-inter text-[28px] leading-normal font-semibold text-base-foreground"
+                  class="font-inter text-[28px] leading-normal font-semibold text-base-foreground tabular-nums"
                 >
+                  ${{ getPrice(tier) }}
                   <span
                     v-show="currentBillingCycle === 'yearly'"
                     class="text-2xl text-muted-foreground line-through"
                   >
                     ${{ tier.pricing.monthly }}
                   </span>
-                  ${{ getPrice(tier) }}
                 </span>
                 <span class="font-inter text-xl/normal text-base-foreground">
                   {{ t('subscription.usdPerMonth') }}
@@ -122,9 +122,12 @@
                 }}
               </span>
               <div class="flex flex-row items-center gap-1">
-                <i class="icon-[lucide--component] text-sm text-amber-400" />
+                <i
+                  class="icon-[comfy--credits] size-4 shrink-0 bg-amber-400"
+                  aria-hidden="true"
+                />
                 <span
-                  class="font-inter text-sm/normal font-bold text-base-foreground"
+                  class="font-inter text-sm/normal font-bold text-base-foreground tabular-nums"
                 >
                   {{ n(getCreditsDisplay(tier)) }}
                 </span>
@@ -136,7 +139,7 @@
                 {{ t('subscription.maxDurationLabel') }}
               </span>
               <span
-                class="font-inter text-sm/normal font-bold text-base-foreground"
+                class="font-inter text-sm/normal font-bold text-base-foreground tabular-nums"
               >
                 {{ tier.maxDuration }}
               </span>
@@ -186,7 +189,7 @@
                   </div>
                 </div>
                 <span
-                  class="font-inter text-sm/normal font-bold text-base-foreground"
+                  class="font-inter text-sm/normal font-bold text-base-foreground tabular-nums"
                 >
                   ~{{ n(tier.pricing.videoEstimate) }}
                 </span>
@@ -263,8 +266,8 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useAuthActions } from '@/composables/auth/useAuthActions'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import {
   TIER_PRICING,
   TIER_TO_KEY
@@ -361,9 +364,13 @@ const tiers: PricingTierConfig[] = [
 const {
   isActiveSubscription,
   isFreeTier,
-  subscriptionTier,
-  isYearlySubscription
-} = useSubscription()
+  tier: subscriptionTier,
+  subscription
+} = useBillingContext()
+
+const isYearlySubscription = computed(
+  () => subscription.value?.duration === 'ANNUAL'
+)
 const telemetry = useTelemetry()
 const { userId } = storeToRefs(useAuthStore())
 const { accessBillingPortal, reportError } = useAuthActions()

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

@@ -16,7 +16,6 @@ import { onBeforeUnmount, ref, watch } from 'vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { isCloud } from '@/platform/distribution/types'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { cn } from '@comfyorg/tailwind-utils'
 
@@ -38,8 +37,8 @@ const emit = defineEmits<{
   subscribed: []
 }>()
 
-const { isActiveSubscription, showSubscriptionDialog } = useBillingContext()
-const { subscriptionTier } = useSubscription()
+const { isActiveSubscription, showSubscriptionDialog, tier } =
+  useBillingContext()
 const isAwaitingStripeSubscription = ref(false)
 
 watch(
@@ -54,7 +53,7 @@ watch(
 
 const handleSubscribe = () => {
   useTelemetry()?.trackSubscription('subscribe_clicked', {
-    current_tier: subscriptionTier.value?.toLowerCase()
+    current_tier: tier.value?.toLowerCase()
   })
   isAwaitingStripeSubscription.value = true
   showSubscriptionDialog()

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

@@ -2,26 +2,26 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
 
-// Mock dependencies
-const mockFetchBalance = vi.fn()
+const mockBillingFetchBalance = vi.fn()
+const mockAuthFetchBalance = vi.fn()
 const mockFetchStatus = vi.fn()
 const mockShowTopUpCreditsDialog = vi.fn()
 const mockExecute = vi.fn()
+const mockToastAdd = vi.fn()
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: () => ({ add: mockToastAdd })
+}))
 
 vi.mock('@/composables/auth/useAuthActions', () => ({
   useAuthActions: () => ({
-    fetchBalance: mockFetchBalance
-  })
-}))
-
-vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
-  useSubscription: () => ({
-    fetchStatus: mockFetchStatus
+    fetchBalance: mockAuthFetchBalance
   })
 }))
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
+    fetchBalance: mockBillingFetchBalance,
     fetchStatus: mockFetchStatus
   })
 }))
@@ -119,20 +119,21 @@ describe('useSubscriptionActions', () => {
   })
 
   describe('handleRefresh', () => {
-    it('should call both fetchBalance and fetchStatus', async () => {
+    it('should refresh balance and status through the billing facade', async () => {
       const { handleRefresh } = useSubscriptionActions()
       await handleRefresh()
 
-      expect(mockFetchBalance).toHaveBeenCalledOnce()
+      expect(mockBillingFetchBalance).toHaveBeenCalledOnce()
       expect(mockFetchStatus).toHaveBeenCalledOnce()
+      expect(mockAuthFetchBalance).not.toHaveBeenCalled()
     })
 
-    it('should handle errors gracefully', async () => {
-      mockFetchBalance.mockRejectedValueOnce(new Error('Fetch failed'))
+    it('swallows refresh failures without surfacing a toast', async () => {
+      mockBillingFetchBalance.mockRejectedValueOnce(new Error('Fetch failed'))
       const { handleRefresh } = useSubscriptionActions()
 
-      // Should not throw
       await expect(handleRefresh()).resolves.toBeUndefined()
+      expect(mockToastAdd).not.toHaveBeenCalled()
     })
   })
 

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

@@ -1,7 +1,6 @@
 import { onMounted, ref } from 'vue'
 
 import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
@@ -11,10 +10,9 @@ import { useCommandStore } from '@/stores/commandStore'
  */
 export function useSubscriptionActions() {
   const dialogService = useDialogService()
-  const authActions = useAuthActions()
   const commandStore = useCommandStore()
   const telemetry = useTelemetry()
-  const { fetchStatus } = useBillingContext()
+  const { fetchBalance, fetchStatus } = useBillingContext()
 
   const isLoadingSupport = ref(false)
 
@@ -44,7 +42,7 @@ export function useSubscriptionActions() {
 
   const handleRefresh = async () => {
     try {
-      await Promise.all([authActions.fetchBalance(), fetchStatus()])
+      await Promise.all([fetchBalance(), fetchStatus()])
     } catch (error) {
       console.error('[useSubscriptionActions] Error refreshing data:', error)
     }

src/platform/settings/components/SettingDialog.vue

@@ -90,7 +90,7 @@ import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserM
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import NavItem from '@/components/widget/nav/NavItem.vue'
 import NavTitle from '@/components/widget/nav/NavTitle.vue'
-import { useAuthActions } from '@/composables/auth/useAuthActions'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
 import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
 import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
@@ -130,7 +130,7 @@ const {
   getSearchResults
 } = useSettingSearch()
 
-const authActions = useAuthActions()
+const { fetchBalance } = useBillingContext()
 
 const navRef = ref<HTMLElement | null>(null)
 const activeCategoryKey = ref<string | null>(defaultCategory.value?.key ?? null)
@@ -238,7 +238,7 @@ watch(activeCategoryKey, (newKey, oldKey) => {
     activeCategoryKey.value = oldKey
   }
   if (newKey === 'credits') {
-    void authActions.fetchBalance()
+    void fetchBalance()
   }
   if (newKey) {
     void nextTick(() => {

src/platform/settings/components/SettingItem.test.ts

@@ -9,13 +9,6 @@ import { i18n } from '@/i18n'
 const flushPromises = () =>
   new Promise<void>((resolve) => setTimeout(resolve, 0))
 
-const trackSettingChanged = vi.fn()
-vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: vi.fn(() => ({
-    trackSettingChanged
-  }))
-}))
-
 const mockGet = vi.fn()
 const mockSet = vi.fn()
 vi.mock('@/platform/settings/settingStore', () => ({
@@ -40,7 +33,7 @@ const FormItemUpdateStub = defineComponent({
   template: '<div data-testid="form-item-stub" />'
 })
 
-describe('SettingItem (telemetry UI tracking)', () => {
+describe('SettingItem', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     emitFormValue = null
@@ -61,15 +54,15 @@ describe('SettingItem (telemetry UI tracking)', () => {
     })
   }
 
-  it('tracks telemetry when value changes via UI (uses normalized value)', async () => {
+  it('persists form updates through the setting store', async () => {
     const settingParams: SettingParams = {
       id: 'main.sub.setting.name',
-      name: 'Telemetry Visible',
+      name: 'Visible Setting',
       type: 'text',
       defaultValue: 'default'
     }
 
-    mockGet.mockReturnValueOnce('default').mockReturnValueOnce('normalized')
+    mockGet.mockReturnValue('default')
     mockSet.mockResolvedValue(undefined)
 
     renderComponent(settingParams)
@@ -78,33 +71,6 @@ describe('SettingItem (telemetry UI tracking)', () => {
 
     await flushPromises()
 
-    expect(trackSettingChanged).toHaveBeenCalledTimes(1)
-    expect(trackSettingChanged).toHaveBeenCalledWith(
-      expect.objectContaining({
-        setting_id: 'main.sub.setting.name',
-        previous_value: 'default',
-        new_value: 'normalized'
-      })
-    )
-  })
-
-  it('does not track telemetry when normalized value does not change', async () => {
-    const settingParams: SettingParams = {
-      id: 'main.sub.setting.name',
-      name: 'Telemetry Visible',
-      type: 'text',
-      defaultValue: 'same'
-    }
-
-    mockGet.mockReturnValueOnce('same').mockReturnValueOnce('same')
-    mockSet.mockResolvedValue(undefined)
-
-    renderComponent(settingParams)
-
-    emitFormValue!('same')
-
-    await flushPromises()
-
-    expect(trackSettingChanged).not.toHaveBeenCalled()
+    expect(mockSet).toHaveBeenCalledWith('main.sub.setting.name', 'newvalue')
   })
 })

src/platform/settings/components/SettingItem.vue

@@ -31,7 +31,6 @@ import FormItem from '@/components/common/FormItem.vue'
 import { st } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingOption, SettingParams } from '@/platform/settings/types'
-import { useTelemetry } from '@/platform/telemetry'
 import type { Settings } from '@/schemas/apiSchema'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
@@ -81,19 +80,6 @@ const settingValue = computed(() => settingStore.get(props.setting.id))
 const updateSettingValue = async <K extends keyof Settings>(
   newValue: Settings[K]
 ) => {
-  const telemetry = useTelemetry()
-  const settingId = props.setting.id
-  const previousValue = settingValue.value
-
-  await settingStore.set(settingId, newValue)
-
-  const normalizedValue = settingStore.get(settingId)
-  if (previousValue !== normalizedValue) {
-    telemetry?.trackSettingChanged({
-      setting_id: settingId,
-      previous_value: previousValue,
-      new_value: normalizedValue
-    })
-  }
+  await settingStore.set(props.setting.id, newValue)
 }
 </script>

src/platform/settings/settingStore.test.ts

@@ -11,6 +11,16 @@ import type { Settings } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 
+const { trackSettingChanged } = vi.hoisted(() => ({
+  trackSettingChanged: vi.fn()
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: vi.fn(() => ({
+    trackSettingChanged
+  }))
+}))
+
 // Mock the api
 vi.mock('@/scripts/api', () => ({
   api: {
@@ -398,11 +408,15 @@ describe('useSettingStore', () => {
       expect(onChangeMock).toHaveBeenCalledTimes(2)
       expect(dispatchChangeMock).toHaveBeenCalledTimes(2)
       expect(api.storeSetting).toHaveBeenCalledWith('test.setting', 'newvalue')
+      expect(trackSettingChanged).toHaveBeenCalledWith({
+        setting_id: 'test.setting'
+      })
 
       // Set the same value again, it should not trigger onChange
       await store.set('test.setting', 'newvalue')
       expect(onChangeMock).toHaveBeenCalledTimes(2)
       expect(dispatchChangeMock).toHaveBeenCalledTimes(2)
+      expect(trackSettingChanged).toHaveBeenCalledTimes(1)
 
       // Set a different value, it should trigger onChange
       await store.set('test.setting', 'differentvalue')
@@ -413,6 +427,43 @@ describe('useSettingStore', () => {
         'test.setting',
         'differentvalue'
       )
+      expect(trackSettingChanged).toHaveBeenCalledWith({
+        setting_id: 'test.setting'
+      })
+      expect(trackSettingChanged).toHaveBeenCalledTimes(2)
+    })
+
+    it('tracks hidden color palette setting changes', async () => {
+      store.addSetting({
+        id: 'Comfy.ColorPalette',
+        name: 'The active color palette id',
+        type: 'hidden',
+        defaultValue: 'dark'
+      })
+
+      await store.set('Comfy.ColorPalette', 'light')
+
+      expect(trackSettingChanged).toHaveBeenCalledWith({
+        setting_id: 'Comfy.ColorPalette',
+        previous_value: 'dark',
+        new_value: 'light'
+      })
+    })
+
+    it('does not track telemetry when persistence fails', async () => {
+      store.addSetting({
+        id: 'test.setting',
+        name: 'test.setting',
+        type: 'text',
+        defaultValue: 'default'
+      })
+      vi.mocked(api.storeSetting).mockRejectedValueOnce(new Error('failed'))
+
+      await expect(store.set('test.setting', 'newvalue')).rejects.toThrow(
+        'failed'
+      )
+
+      expect(trackSettingChanged).not.toHaveBeenCalled()
     })
 
     describe('object mutation prevention', () => {
@@ -540,6 +591,12 @@ describe('useSettingStore', () => {
         'Comfy.Release.Status': 'changelog seen'
       })
       expect(api.storeSetting).not.toHaveBeenCalled()
+      expect(trackSettingChanged).toHaveBeenCalledWith({
+        setting_id: 'Comfy.Release.Version'
+      })
+      expect(trackSettingChanged).toHaveBeenCalledWith({
+        setting_id: 'Comfy.Release.Status'
+      })
     })
 
     it('should skip unchanged values', async () => {
@@ -566,6 +623,10 @@ describe('useSettingStore', () => {
       expect(api.storeSettings).toHaveBeenCalledWith({
         'Comfy.Release.Status': 'changelog seen'
       })
+      expect(trackSettingChanged).toHaveBeenCalledWith({
+        setting_id: 'Comfy.Release.Status'
+      })
+      expect(trackSettingChanged).toHaveBeenCalledTimes(1)
     })
 
     it('should not call API when all values are unchanged', async () => {
@@ -581,6 +642,7 @@ describe('useSettingStore', () => {
       await store.setMany({ 'Comfy.Release.Version': 'existing' })
 
       expect(api.storeSettings).not.toHaveBeenCalled()
+      expect(trackSettingChanged).not.toHaveBeenCalled()
     })
   })
 })

src/platform/settings/settingStore.ts

@@ -6,6 +6,8 @@ import { compare, valid } from 'semver'
 import { ref } from 'vue'
 
 import type { SettingParams } from '@/platform/settings/types'
+import { useTelemetry } from '@/platform/telemetry'
+import type { SettingChangedMetadata } from '@/platform/telemetry/types'
 import type { Settings } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
@@ -23,6 +25,11 @@ export interface SettingTreeNode extends TreeNode {
   data?: SettingParams
 }
 
+interface AppliedSetting<TValue> {
+  previousValue: TValue
+  newValue: TValue
+}
+
 function tryMigrateDeprecatedValue(
   setting: SettingParams | undefined,
   value: unknown
@@ -45,6 +52,20 @@ function onChange(
   }
 }
 
+function createSettingChangedMetadata<K extends keyof Settings>(
+  key: K,
+  applied: AppliedSetting<Settings[K]>
+): SettingChangedMetadata {
+  const metadata: SettingChangedMetadata = { setting_id: key }
+
+  if (key === 'Comfy.ColorPalette') {
+    metadata.previous_value = applied.previousValue
+    metadata.new_value = applied.newValue
+  }
+
+  return metadata
+}
+
 export const useSettingStore = defineStore('setting', () => {
   const settingValues = ref<Partial<Settings>>({})
   const settingsById = ref<Record<string, SettingParams>>({})
@@ -99,7 +120,7 @@ export const useSettingStore = defineStore('setting', () => {
   function applySettingLocally<K extends keyof Settings>(
     key: K,
     value: Settings[K]
-  ): Settings[K] | undefined {
+  ): AppliedSetting<Settings[K]> | undefined {
     const clonedValue = _.cloneDeep(value)
     const newValue = tryMigrateDeprecatedValue(
       settingsById.value[key],
@@ -109,8 +130,12 @@ export const useSettingStore = defineStore('setting', () => {
     if (newValue === oldValue) return undefined
 
     onChange(settingsById.value[key], newValue, oldValue)
-    settingValues.value[key] = newValue
-    return newValue as Settings[K]
+    const typedNewValue = newValue as Settings[K]
+    settingValues.value[key] = typedNewValue
+    return {
+      previousValue: oldValue,
+      newValue: typedNewValue
+    }
   }
 
   /**
@@ -121,7 +146,10 @@ export const useSettingStore = defineStore('setting', () => {
   async function set<K extends keyof Settings>(key: K, value: Settings[K]) {
     const applied = applySettingLocally(key, value)
     if (applied === undefined) return
-    await api.storeSetting(key, applied)
+    await api.storeSetting(key, applied.newValue)
+    useTelemetry()?.trackSettingChanged(
+      createSettingChangedMetadata(key, applied)
+    )
   }
 
   /**
@@ -130,6 +158,7 @@ export const useSettingStore = defineStore('setting', () => {
    */
   async function setMany(settings: Partial<Settings>) {
     const updatedSettings: Partial<Settings> = {}
+    const telemetryEvents: SettingChangedMetadata[] = []
 
     for (const key of Object.keys(settings) as (keyof Settings)[]) {
       const applied = applySettingLocally(
@@ -137,12 +166,17 @@ export const useSettingStore = defineStore('setting', () => {
         settings[key] as Settings[typeof key]
       )
       if (applied !== undefined) {
-        updatedSettings[key] = applied
+        updatedSettings[key] = applied.newValue
+        telemetryEvents.push(createSettingChangedMetadata(key, applied))
       }
     }
 
     if (Object.keys(updatedSettings).length > 0) {
       await api.storeSettings(updatedSettings)
+      const telemetry = useTelemetry()
+      for (const event of telemetryEvents) {
+        telemetry?.trackSettingChanged(event)
+      }
     }
   }
 

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.test.ts

@@ -1,4 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type * as VueModule from 'vue'
+import type { Ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import { TelemetryEvents } from '../../types'
 
@@ -12,6 +15,10 @@ const hoisted = vi.hoisted(() => {
   const mockReset = vi.fn()
   const mockOnUserResolved = vi.fn()
   const mockOnUserLogout = vi.fn()
+  const refs = {
+    tier: null as unknown as Ref<string | null>,
+    remoteConfig: null as unknown as Ref<Record<string, unknown> | null>
+  }
 
   return {
     mockCapture,
@@ -23,6 +30,7 @@ const hoisted = vi.hoisted(() => {
     mockReset,
     mockOnUserResolved,
     mockOnUserLogout,
+    refs,
     mockPosthog: {
       default: {
         init: mockInit,
@@ -36,14 +44,6 @@ const hoisted = vi.hoisted(() => {
   }
 })
 
-vi.mock('vue', async () => {
-  const actual = await vi.importActual('vue')
-  return {
-    ...actual,
-    watch: vi.fn()
-  }
-})
-
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: () => ({
     onUserResolved: hoisted.mockOnUserResolved,
@@ -51,21 +51,19 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
   })
 }))
 
-const mockRemoteConfig = vi.hoisted(
-  () => ({ value: null }) as { value: Record<string, unknown> | null }
-)
-
-vi.mock('@/platform/remoteConfig/remoteConfig', () => ({
-  remoteConfig: mockRemoteConfig
-}))
+vi.mock('@/platform/remoteConfig/remoteConfig', async () => {
+  const { ref } = await vi.importActual<typeof VueModule>('vue')
+  hoisted.refs.remoteConfig = ref<Record<string, unknown> | null>(null)
+  return { remoteConfig: hoisted.refs.remoteConfig }
+})
 
 vi.mock('posthog-js', () => hoisted.mockPosthog)
 
-vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
-  useSubscription: () => ({
-    subscriptionTier: { value: null }
-  })
-}))
+vi.mock('@/composables/billing/useBillingContext', async () => {
+  const { ref } = await vi.importActual<typeof VueModule>('vue')
+  hoisted.refs.tier = ref<string | null>(null)
+  return { useBillingContext: () => ({ tier: hoisted.refs.tier }) }
+})
 
 import { PostHogTelemetryProvider } from './PostHogTelemetryProvider'
 
@@ -82,7 +80,10 @@ function createProvider(
 describe('PostHogTelemetryProvider', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockRemoteConfig.value = null
+    hoisted.refs.remoteConfig.value = null
+    // Fresh tier ref per test: each provider registers an undisposed tier
+    // watch, so a shared ref would leak watchers across tests.
+    hoisted.refs.tier = ref<string | null>(null)
     window.__CONFIG__ = {
       posthog_project_token: 'phc_test_token'
     } as typeof window.__CONFIG__
@@ -116,7 +117,7 @@ describe('PostHogTelemetryProvider', () => {
     })
 
     it('applies posthog_config overrides from remote config', async () => {
-      mockRemoteConfig.value = {
+      hoisted.refs.remoteConfig.value = {
         posthog_config: {
           debug: true,
           api_host: 'https://custom.host.com'
@@ -150,6 +151,48 @@ describe('PostHogTelemetryProvider', () => {
 
       expect(hoisted.mockIdentify).toHaveBeenCalledWith('user-123')
     })
+
+    function tierPropertySets(): unknown[] {
+      return hoisted.mockPeopleSet.mock.calls
+        .map(([props]) => props)
+        .filter((props) => props && 'subscription_tier' in props)
+    }
+
+    it('sets subscription_tier reactively when the facade tier resolves', async () => {
+      createProvider()
+      await vi.dynamicImportSettled()
+
+      const onResolved = hoisted.mockOnUserResolved.mock.calls[0][0]
+      onResolved({ id: 'user-123' })
+
+      // Unresolved tier (null) does not set the property
+      expect(tierPropertySets()).toHaveLength(0)
+
+      hoisted.refs.tier.value = 'PRO'
+      await nextTick()
+      expect(hoisted.mockPeopleSet).toHaveBeenCalledWith({
+        subscription_tier: 'PRO'
+      })
+
+      hoisted.refs.tier.value = null
+      await nextTick()
+      expect(tierPropertySets()).toHaveLength(1)
+    })
+
+    it('keeps a single tier watcher across repeated user resolutions', async () => {
+      createProvider()
+      await vi.dynamicImportSettled()
+
+      const onResolved = hoisted.mockOnUserResolved.mock.calls[0][0]
+      onResolved({ id: 'user-1' })
+      onResolved({ id: 'user-1' })
+      onResolved({ id: 'user-2' })
+
+      hoisted.refs.tier.value = 'PRO'
+      await nextTick()
+
+      expect(tierPropertySets()).toHaveLength(1)
+    })
   })
 
   describe('desktop entry capture', () => {
@@ -670,7 +713,7 @@ describe('PostHogTelemetryProvider', () => {
 
     it('remoteConfig.posthog_config cannot override before_send or person_profiles', async () => {
       const remoteBefore_send = vi.fn()
-      mockRemoteConfig.value = {
+      hoisted.refs.remoteConfig.value = {
         posthog_config: {
           before_send: remoteBefore_send,
           person_profiles: 'always'

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts

@@ -1,10 +1,11 @@
 import type { PostHog } from 'posthog-js'
 import { watch } from 'vue'
+import type { WatchStopHandle } from 'vue'
 
 import { createPostHogBeforeSend } from '@comfyorg/shared-frontend-utils/piiUtil'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import type { RemoteConfig } from '@/platform/remoteConfig/types'
 
@@ -98,6 +99,7 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
   private isInitialized = false
   private disabledEvents = new Set<TelemetryEventName>(DEFAULT_DISABLED_EVENTS)
   private desktopEntryProps: DesktopEntryProps | null = null
+  private stopSubscriptionTierWatch: WatchStopHandle | null = null
 
   constructor() {
     this.configureDisabledEvents(
@@ -307,12 +309,13 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
   }
 
   private setSubscriptionProperties(): void {
-    const { subscriptionTier } = useSubscription()
-    watch(
-      subscriptionTier,
-      (tier) => {
-        if (tier && this.posthog) {
-          this.posthog.people.set({ subscription_tier: tier })
+    if (this.stopSubscriptionTierWatch) return
+    const { tier } = useBillingContext()
+    this.stopSubscriptionTierWatch = watch(
+      tier,
+      (value) => {
+        if (value && this.posthog) {
+          this.posthog.people.set({ subscription_tier: value })
         }
       },
       { immediate: true }

src/utils/queueDisplay.test.ts

@@ -1,227 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import type { JobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-import type { JobState } from '@/types/queue'
-import type { BuildJobDisplayCtx } from '@/utils/queueDisplay'
-import { buildJobDisplay, iconForJobState } from '@/utils/queueDisplay'
-
-type QueueDisplayTask = Parameters<typeof buildJobDisplay>[0]
-type PreviewOutput = NonNullable<QueueDisplayTask['previewOutput']>
-
-function createJob(
-  status: JobListItem['status'],
-  overrides: Partial<JobListItem> = {}
-): JobListItem {
-  return {
-    id: 'job-123456',
-    status,
-    create_time: 1_710_000_000_000,
-    priority: 12,
-    ...overrides
-  }
-}
-
-function createTask({
-  job,
-  jobId = 'job-123456',
-  createTime = 1_710_000_000_000,
-  executionTime,
-  executionTimeInSeconds,
-  previewOutput
-}: {
-  job?: Partial<JobListItem>
-  jobId?: string
-  createTime?: number
-  executionTime?: number
-  executionTimeInSeconds?: number
-  previewOutput?: PreviewOutput
-} = {}): QueueDisplayTask {
-  return {
-    job: createJob(job?.status ?? 'pending', job),
-    jobId,
-    createTime,
-    executionTime,
-    executionTimeInSeconds,
-    previewOutput
-  } as QueueDisplayTask
-}
-
-function createCtx(
-  overrides: Partial<BuildJobDisplayCtx> = {}
-): BuildJobDisplayCtx {
-  return {
-    t: (key, values) => {
-      const entries = Object.entries(values ?? {})
-      if (!entries.length) return key
-
-      return `${key}(${entries
-        .map(([name, value]) => `${name}=${String(value)}`)
-        .join(',')})`
-    },
-    locale: 'en-US',
-    formatClockTimeFn: (ts, locale) => `${locale}:${ts}`,
-    isActive: false,
-    ...overrides
-  }
-}
-
-describe('iconForJobState', () => {
-  it.for<[JobState, string]>([
-    ['pending', 'icon-[lucide--loader-circle]'],
-    ['initialization', 'icon-[lucide--server-crash]'],
-    ['running', 'icon-[lucide--zap]'],
-    ['completed', 'icon-[lucide--check-check]'],
-    ['failed', 'icon-[lucide--alert-circle]']
-  ])('maps %s to its icon', ([state, icon]) => {
-    expect(iconForJobState(state)).toBe(icon)
-  })
-})
-
-describe('buildJobDisplay', () => {
-  it('shows the added hint for pending jobs when requested', () => {
-    expect(
-      buildJobDisplay(
-        createTask(),
-        'pending',
-        createCtx({ showAddedHint: true })
-      )
-    ).toEqual({
-      iconName: 'icon-[lucide--check]',
-      primary: 'queue.jobAddedToQueue',
-      secondary: 'en-US:1710000000000',
-      showClear: true
-    })
-  })
-
-  it('shows queued time for pending and initializing jobs', () => {
-    expect(buildJobDisplay(createTask(), 'pending', createCtx())).toMatchObject(
-      {
-        iconName: 'icon-[lucide--loader-circle]',
-        primary: 'queue.inQueue',
-        secondary: 'en-US:1710000000000',
-        showClear: true
-      }
-    )
-
-    expect(
-      buildJobDisplay(createTask(), 'initialization', createCtx())
-    ).toMatchObject({
-      iconName: 'icon-[lucide--server-crash]',
-      primary: 'queue.initializingAlmostReady',
-      secondary: 'en-US:1710000000000',
-      showClear: true
-    })
-  })
-
-  it('formats active running progress from the injected context', () => {
-    expect(
-      buildJobDisplay(
-        createTask({ job: { status: 'in_progress' } }),
-        'running',
-        createCtx({
-          isActive: true,
-          totalPercent: 42.7,
-          currentNodePercent: -10,
-          currentNodeName: 'KSampler'
-        })
-      )
-    ).toEqual({
-      iconName: 'icon-[lucide--zap]',
-      primary: 'sideToolbar.queueProgressOverlay.total(percent=43%)',
-      secondary:
-        'KSampler sideToolbar.queueProgressOverlay.colonPercent(percent=0%)',
-      showClear: true
-    })
-  })
-
-  it('uses a compact running label when the job is not active', () => {
-    expect(
-      buildJobDisplay(
-        createTask({ job: { status: 'in_progress' } }),
-        'running',
-        createCtx()
-      )
-    ).toEqual({
-      iconName: 'icon-[lucide--zap]',
-      primary: 'g.running',
-      secondary: '',
-      showClear: true
-    })
-  })
-
-  it('shows local completed jobs as the preview filename', () => {
-    expect(
-      buildJobDisplay(
-        createTask({
-          job: {
-            status: 'completed'
-          },
-          executionTimeInSeconds: 3.51,
-          previewOutput: {
-            filename: 'preview.png',
-            isImage: true,
-            url: '/api/view?filename=preview.png&type=output&subfolder='
-          } as PreviewOutput
-        }),
-        'completed',
-        createCtx()
-      )
-    ).toEqual({
-      iconName: 'icon-[lucide--check-check]',
-      iconImageUrl: '/api/view?filename=preview.png&type=output&subfolder=',
-      primary: 'preview.png',
-      secondary: '3.51s',
-      showClear: false
-    })
-  })
-
-  it('shows cloud completed jobs as elapsed time', () => {
-    expect(
-      buildJobDisplay(
-        createTask({
-          job: {
-            status: 'completed'
-          },
-          executionTime: 64_000,
-          executionTimeInSeconds: 64
-        }),
-        'completed',
-        createCtx({ isCloud: true })
-      )
-    ).toMatchObject({
-      iconName: 'icon-[lucide--check-check]',
-      primary: 'queue.completedIn(duration=1m 4s)',
-      secondary: '64.00s',
-      showClear: false
-    })
-  })
-
-  it('falls back to job title for completed jobs without a preview filename', () => {
-    expect(
-      buildJobDisplay(
-        createTask({
-          job: {
-            status: 'completed',
-            priority: 42
-          }
-        }),
-        'completed',
-        createCtx()
-      )
-    ).toMatchObject({
-      iconName: 'icon-[lucide--check-check]',
-      primary: 'g.job #42',
-      secondary: '',
-      showClear: false
-    })
-  })
-
-  it('shows failed jobs as clearable failures', () => {
-    expect(buildJobDisplay(createTask(), 'failed', createCtx())).toEqual({
-      iconName: 'icon-[lucide--alert-circle]',
-      primary: 'g.failed',
-      secondary: 'g.failed',
-      showClear: true
-    })
-  })
-})