refactor: workspaces DDD (#8921)

## Summary

Refactor: workspaces related functionality into DDD structure.

Note: this is the 1st PR of 2 more refactoring.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8921-refactor-DDD-3096d73d3650812bb7f6eb955f042663)
by [Unito](https://www.unito.io)

src/platform/workspace/auth/WorkspaceAuthGate.test.ts

@@ -0,0 +1,206 @@
+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/platform/workspace/auth/WorkspaceAuthGate.vue

@@ -0,0 +1,129 @@
+<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/platform/workspace/components/CurrentUserPopoverWorkspace.vue

@@ -0,0 +1,348 @@
+<!-- A popover that shows current user information and actions -->
+<template>
+  <div
+    class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+  >
+    <!-- User Info Section -->
+    <div class="flex flex-col items-center px-0 py-3 mb-4">
+      <UserAvatar
+        class="mb-1"
+        :photo-url="userPhotoUrl"
+        :pt:icon:class="{
+          'text-2xl!': !userPhotoUrl
+        }"
+        size="large"
+      />
+
+      <!-- User Details -->
+      <h3 class="my-0 mb-1 truncate text-base font-bold text-base-foreground">
+        {{ userDisplayName || $t('g.user') }}
+      </h3>
+      <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
+        {{ userEmail }}
+      </p>
+    </div>
+
+    <!-- Workspace Selector -->
+    <div
+      class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 hover:bg-secondary-background-hover"
+      @click="toggleWorkspaceSwitcher"
+    >
+      <div class="flex min-w-0 flex-1 items-center gap-2">
+        <WorkspaceProfilePic
+          class="size-6 shrink-0 text-xs"
+          :workspace-name="workspaceName"
+        />
+        <span class="truncate text-sm text-base-foreground">{{
+          workspaceName
+        }}</span>
+      </div>
+      <i class="pi pi-chevron-down shrink-0 text-sm text-muted-foreground" />
+    </div>
+
+    <Popover
+      ref="workspaceSwitcherPopover"
+      append-to="body"
+      :pt="{
+        content: {
+          class: 'p-0'
+        }
+      }"
+    >
+      <WorkspaceSwitcherPopover
+        @select="workspaceSwitcherPopover?.hide()"
+        @create="handleCreateWorkspace"
+      />
+    </Popover>
+
+    <!-- Credits Section -->
+
+    <div class="flex items-center gap-2 px-4 py-2">
+      <i class="icon-[lucide--component] text-sm text-amber-400" />
+      <Skeleton
+        v-if="isLoadingBalance"
+        width="4rem"
+        height="1.25rem"
+        class="w-full"
+      />
+      <span v-else class="text-base font-semibold text-base-foreground">{{
+        displayedCredits
+      }}</span>
+      <i
+        v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
+        class="icon-[lucide--circle-help] mr-auto cursor-help text-base text-muted-foreground"
+      />
+      <!-- Add Credits (subscribed + personal or workspace owner only) -->
+      <Button
+        v-if="isActiveSubscription && permissions.canTopUp"
+        variant="secondary"
+        size="sm"
+        class="text-base-foreground"
+        data-testid="add-credits-button"
+        @click="handleTopUp"
+      >
+        {{ $t('subscription.addCredits') }}
+      </Button>
+      <!-- Subscribe/Resubscribe (only when not subscribed or cancelled) -->
+      <SubscribeButton
+        v-if="showSubscribeAction && isPersonalWorkspace"
+        :fluid="false"
+        :label="
+          isCancelled
+            ? $t('subscription.resubscribe')
+            : $t('workspaceSwitcher.subscribe')
+        "
+        size="sm"
+        variant="gradient"
+      />
+      <Button
+        v-if="showSubscribeAction && !isPersonalWorkspace"
+        variant="primary"
+        size="sm"
+        @click="handleOpenPlansAndPricing"
+      >
+        {{
+          isCancelled
+            ? $t('subscription.resubscribe')
+            : $t('workspaceSwitcher.subscribe')
+        }}
+      </Button>
+    </div>
+
+    <Divider class="mx-0 my-2" />
+
+    <!-- Plans & Pricing (PERSONAL and OWNER only) -->
+    <div
+      v-if="showPlansAndPricing"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="plans-pricing-menu-item"
+      @click="handleOpenPlansAndPricing"
+    >
+      <i class="icon-[lucide--receipt-text] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('subscription.plansAndPricing')
+      }}</span>
+      <span
+        v-if="canUpgrade"
+        class="rounded-full bg-base-foreground px-1.5 py-0.5 text-xs font-bold text-base-background"
+      >
+        {{ $t('subscription.upgrade') }}
+      </span>
+    </div>
+
+    <!-- Manage Plan (PERSONAL and OWNER, only if subscribed) -->
+    <div
+      v-if="showManagePlan"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="manage-plan-menu-item"
+      @click="handleOpenPlanAndCreditsSettings"
+    >
+      <i class="icon-[lucide--file-text] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('subscription.managePlan')
+      }}</span>
+    </div>
+
+    <!-- Partner Nodes Pricing (always shown) -->
+    <div
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="partner-nodes-menu-item"
+      @click="handleOpenPartnerNodesInfo"
+    >
+      <i class="icon-[lucide--tag] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('subscription.partnerNodesCredits')
+      }}</span>
+    </div>
+
+    <Divider class="mx-0 my-2" />
+
+    <!-- Workspace Settings (always shown) -->
+    <div
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="workspace-settings-menu-item"
+      @click="handleOpenWorkspaceSettings"
+    >
+      <i class="icon-[lucide--users] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('userSettings.workspaceSettings')
+      }}</span>
+    </div>
+
+    <!-- Account Settings (always shown) -->
+    <div
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="user-settings-menu-item"
+      @click="handleOpenUserSettings"
+    >
+      <i class="icon-[lucide--settings-2] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('userSettings.accountSettings')
+      }}</span>
+    </div>
+
+    <Divider class="mx-0 my-2" />
+
+    <!-- Logout (always shown) -->
+    <div
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="logout-menu-item"
+      @click="handleLogout"
+    >
+      <i class="icon-[lucide--log-out] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('auth.signOut.signOut')
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 { formatCreditsFromCents } from '@/base/credits/comfyCredits'
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
+import WorkspaceSwitcherPopover from '@/platform/workspace/components/WorkspaceSwitcherPopover.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+
+import { useExternalLink } from '@/composables/useExternalLink'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
+import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useDialogService } from '@/services/dialogService'
+
+const workspaceStore = useTeamWorkspaceStore()
+const {
+  initState,
+  workspaceName,
+  isInPersonalWorkspace: isPersonalWorkspace
+} = storeToRefs(workspaceStore)
+const { permissions } = useWorkspaceUI()
+const workspaceSwitcherPopover = ref<InstanceType<typeof Popover> | null>(null)
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { buildDocsUrl, docsPaths } = useExternalLink()
+
+const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
+  useCurrentUser()
+const settingsDialog = useSettingsDialog()
+const dialogService = useDialogService()
+const { isActiveSubscription, subscription, balance, isLoading, fetchBalance } =
+  useBillingContext()
+
+const isCancelled = computed(() => subscription.value?.isCancelled ?? false)
+const subscriptionDialog = useSubscriptionDialog()
+
+const { locale } = useI18n()
+const isLoadingBalance = isLoading
+
+const displayedCredits = computed(() => {
+  if (initState.value !== 'ready') return ''
+
+  // API field is named _micros but contains cents (naming inconsistency)
+  const cents =
+    balance.value?.effectiveBalanceMicros ?? balance.value?.amountMicros ?? 0
+  return formatCreditsFromCents({
+    cents,
+    locale: locale.value,
+    numberOptions: {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    }
+  })
+})
+
+const canUpgrade = computed(() => {
+  // PRO is currently the only/highest tier, so no upgrades available
+  // This will need updating when additional tiers are added
+  return false
+})
+
+const showPlansAndPricing = computed(
+  () => permissions.value.canManageSubscription
+)
+const showManagePlan = computed(
+  () => permissions.value.canManageSubscription && isActiveSubscription.value
+)
+const showSubscribeAction = computed(
+  () =>
+    permissions.value.canManageSubscription &&
+    (!isActiveSubscription.value || isCancelled.value)
+)
+
+const handleOpenUserSettings = () => {
+  settingsDialog.show('user')
+  emit('close')
+}
+
+const handleOpenWorkspaceSettings = () => {
+  settingsDialog.show('workspace')
+  emit('close')
+}
+
+const handleOpenPlansAndPricing = () => {
+  subscriptionDialog.show()
+  emit('close')
+}
+
+const handleOpenPlanAndCreditsSettings = () => {
+  if (isCloud) {
+    settingsDialog.show('workspace')
+  } else {
+    settingsDialog.show('credits')
+  }
+
+  emit('close')
+}
+
+const handleTopUp = () => {
+  // Track purchase credits entry from avatar popover
+  useTelemetry()?.trackAddApiCreditButtonClicked()
+  dialogService.showTopUpCreditsDialog()
+  emit('close')
+}
+
+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
+    '_blank'
+  )
+  emit('close')
+}
+
+const handleLogout = async () => {
+  await handleSignOut()
+  emit('close')
+}
+
+const handleCreateWorkspace = () => {
+  workspaceSwitcherPopover.value?.hide()
+  dialogService.showCreateWorkspaceDialog()
+  emit('close')
+}
+
+const toggleWorkspaceSwitcher = (event: MouseEvent) => {
+  workspaceSwitcherPopover.value?.toggle(event)
+}
+
+const refreshBalance = () => {
+  void fetchBalance()
+}
+
+defineExpose({ refreshBalance })
+</script>

src/platform/workspace/components/PricingTableWorkspace.vue

@@ -0,0 +1,521 @@
+<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_i2v"
+          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 {
+  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 { t, n } = useI18n()
+
+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 {
+  plans: apiPlans,
+  currentPlanSlug,
+  fetchPlans,
+  subscription,
+  getMaxSeats
+} = 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
+}
+
+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 => getMaxSeats(tier.key)
+
+const getMonthlyCreditsPerMember = (tier: PricingTierConfig): number =>
+  tier.pricing.credits
+
+function handleSubscribe(tierKey: CheckoutTierKey) {
+  if (props.isLoading) return
+
+  // Handle resubscribe for cancelled subscription on current plan
+  if (isCurrentPlan(tierKey)) {
+    if (isCancelled.value) {
+      emit('resubscribe')
+    }
+    return
+  }
+
+  emit('subscribe', {
+    tierKey,
+    billingCycle: currentBillingCycle.value
+  })
+}
+
+function handleContactUs() {
+  window.open('https://www.comfy.org/discord', '_blank')
+}
+
+function handleViewEnterprise() {
+  window.open('https://www.comfy.org/enterprise', '_blank')
+}
+</script>

src/platform/workspace/components/SubscriptionAddPaymentPreviewWorkspace.vue

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

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="grow overflow-auto pt-6">
+    <!-- Loading state while subscription is being set up -->
+    <div
+      v-if="isSettingUp"
+      class="rounded-2xl border border-interface-stroke p-6"
+    >
+      <div class="flex items-center gap-2 text-muted-foreground py-4">
+        <i class="pi pi-spin pi-spinner" />
+        <span>{{ $t('billingOperation.subscriptionProcessing') }}</span>
+      </div>
+    </div>
+
+    <template v-else>
+      <!-- Cancelled subscription info card -->
+      <div
+        v-if="isCancelled"
+        class="mb-6 flex gap-1 rounded-2xl border border-warning-background bg-warning-background/20 p-4"
+      >
+        <div
+          class="flex size-8 shrink-0 items-center justify-center rounded-full text-warning-background"
+        >
+          <i class="pi pi-info-circle" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <h2 class="text-sm font-bold text-text-primary m-0 pt-1.5">
+            {{ $t('subscription.canceledCard.title') }}
+          </h2>
+          <p class="text-sm text-text-secondary m-0">
+            {{
+              $t('subscription.canceledCard.description', {
+                date: formattedEndDate
+              })
+            }}
+          </p>
+        </div>
+      </div>
+
+      <div class="rounded-2xl border border-interface-stroke p-6">
+        <div>
+          <div
+            class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:gap-2"
+          >
+            <!-- OWNER Unsubscribed State -->
+            <template v-if="showSubscribePrompt">
+              <div class="flex flex-col gap-2">
+                <div class="text-sm font-bold text-text-primary">
+                  {{ $t('subscription.workspaceNotSubscribed') }}
+                </div>
+                <div class="text-sm text-text-secondary">
+                  {{ $t('subscription.subscriptionRequiredMessage') }}
+                </div>
+              </div>
+              <Button
+                variant="primary"
+                size="lg"
+                class="ml-auto rounded-lg px-4 py-2 text-sm font-normal"
+                @click="handleSubscribeWorkspace"
+              >
+                {{ $t('subscription.subscribeNow') }}
+              </Button>
+            </template>
+
+            <!-- MEMBER View - read-only, workspace not subscribed -->
+            <template v-else-if="isMemberView">
+              <div class="flex flex-col gap-2">
+                <div class="text-sm font-bold text-text-primary">
+                  {{ $t('subscription.workspaceNotSubscribed') }}
+                </div>
+                <div class="text-sm text-text-secondary">
+                  {{ $t('subscription.contactOwnerToSubscribe') }}
+                </div>
+              </div>
+            </template>
+
+            <!-- Normal Subscribed State (Owner with subscription, or member viewing subscribed workspace) -->
+            <template v-else>
+              <div class="flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <span class="text-sm font-bold text-text-primary">
+                    {{ subscriptionTierName }}
+                  </span>
+                  <StatusBadge
+                    v-if="isCancelled"
+                    :label="$t('subscription.canceled')"
+                    severity="warn"
+                  />
+                </div>
+                <div class="flex items-baseline gap-1 font-inter font-semibold">
+                  <span class="text-2xl">${{ tierPrice }}</span>
+                  <span class="text-base">
+                    {{
+                      isInPersonalWorkspace
+                        ? $t('subscription.usdPerMonth')
+                        : $t('subscription.usdPerMonthPerMember')
+                    }}
+                  </span>
+                </div>
+                <div
+                  v-if="isActiveSubscription"
+                  :class="
+                    cn(
+                      'text-sm',
+                      isCancelled
+                        ? 'text-warning-background'
+                        : 'text-text-secondary'
+                    )
+                  "
+                >
+                  <template v-if="isCancelled">
+                    {{
+                      $t('subscription.expiresDate', {
+                        date: formattedEndDate
+                      })
+                    }}
+                  </template>
+                  <template v-else>
+                    {{
+                      $t('subscription.renewsDate', {
+                        date: formattedRenewalDate
+                      })
+                    }}
+                  </template>
+                </div>
+              </div>
+
+              <div
+                v-if="isActiveSubscription && permissions.canManageSubscription"
+                class="flex flex-wrap gap-2 md:ml-auto"
+              >
+                <!-- Cancelled state: show only Resubscribe button -->
+                <template v-if="isCancelled">
+                  <Button
+                    size="lg"
+                    variant="primary"
+                    class="rounded-lg px-4 text-sm font-normal"
+                    :loading="isResubscribing"
+                    @click="handleResubscribe"
+                  >
+                    {{ $t('subscription.resubscribe') }}
+                  </Button>
+                </template>
+
+                <!-- Active state: show Manage Payment, Upgrade, and menu -->
+                <template v-else>
+                  <Button
+                    size="lg"
+                    variant="secondary"
+                    class="rounded-lg px-4 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                    @click="manageSubscription"
+                  >
+                    {{ $t('subscription.managePayment') }}
+                  </Button>
+                  <Button
+                    size="lg"
+                    variant="primary"
+                    class="rounded-lg px-4 text-sm font-normal text-text-primary"
+                    @click="showSubscriptionDialog"
+                  >
+                    {{ $t('subscription.upgradePlan') }}
+                  </Button>
+                  <Button
+                    v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+                    variant="secondary"
+                    size="lg"
+                    :aria-label="$t('g.moreOptions')"
+                    @click="planMenu?.toggle($event)"
+                  >
+                    <i class="pi pi-ellipsis-h" />
+                  </Button>
+                  <Menu ref="planMenu" :model="planMenuItems" :popup="true" />
+                </template>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <div class="flex flex-col lg:flex-row lg:items-stretch gap-6 pt-6">
+          <div class="flex flex-col">
+            <div class="flex flex-col gap-3 h-full">
+              <div
+                class="relative flex flex-col gap-6 rounded-2xl p-5 bg-secondary-background justify-between h-full"
+              >
+                <Button
+                  variant="muted-textonly"
+                  size="icon-sm"
+                  class="absolute top-4 right-4"
+                  :loading="isLoadingBalance"
+                  @click="handleRefresh"
+                >
+                  <i class="pi pi-sync text-text-secondary text-sm" />
+                </Button>
+
+                <div class="flex flex-col gap-2">
+                  <div class="text-sm text-muted">
+                    {{ $t('subscription.totalCredits') }}
+                  </div>
+                  <Skeleton
+                    v-if="isLoadingBalance"
+                    width="8rem"
+                    height="2rem"
+                  />
+                  <div v-else class="text-2xl font-bold">
+                    {{ showZeroState ? '0' : totalCredits }}
+                  </div>
+                </div>
+
+                <!-- Credit Breakdown -->
+                <table class="text-sm text-muted">
+                  <tbody>
+                    <tr>
+                      <td class="pr-4 font-bold text-left align-middle">
+                        <Skeleton
+                          v-if="isLoadingBalance"
+                          width="5rem"
+                          height="1rem"
+                        />
+                        <span v-else>{{
+                          showZeroState ? '0 / 0' : includedCreditsDisplay
+                        }}</span>
+                      </td>
+                      <td class="align-middle" :title="creditsRemainingLabel">
+                        {{ creditsRemainingLabel }}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="pr-4 font-bold text-left align-middle">
+                        <Skeleton
+                          v-if="isLoadingBalance"
+                          width="3rem"
+                          height="1rem"
+                        />
+                        <span v-else>{{
+                          showZeroState ? '0' : prepaidCredits
+                        }}</span>
+                      </td>
+                      <td
+                        class="align-middle"
+                        :title="$t('subscription.creditsYouveAdded')"
+                      >
+                        {{ $t('subscription.creditsYouveAdded') }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+
+                <div
+                  v-if="
+                    isActiveSubscription &&
+                    !showZeroState &&
+                    permissions.canTopUp
+                  "
+                  class="flex items-center justify-between"
+                >
+                  <Button
+                    variant="secondary"
+                    class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                    @click="handleAddApiCredits"
+                  >
+                    {{ $t('subscription.addCredits') }}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="isActiveSubscription" class="flex flex-col gap-2">
+            <div class="text-sm text-text-primary">
+              {{ $t('subscription.yourPlanIncludes') }}
+            </div>
+
+            <div class="flex flex-col gap-0">
+              <div
+                v-for="benefit in tierBenefits"
+                :key="benefit.key"
+                class="flex items-center gap-2 py-2"
+              >
+                <i
+                  v-if="benefit.type === 'feature'"
+                  class="pi pi-check text-xs text-text-primary"
+                />
+                <i
+                  v-else-if="benefit.type === 'icon' && benefit.icon"
+                  :class="[benefit.icon, 'text-xs text-text-primary']"
+                />
+                <span
+                  v-else-if="benefit.type === 'metric' && benefit.value"
+                  class="text-sm font-normal whitespace-nowrap text-text-primary"
+                >
+                  {{ benefit.value }}
+                </span>
+                <span class="text-sm text-muted">
+                  {{ benefit.label }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Members invoice card -->
+      <div
+        v-if="
+          isActiveSubscription &&
+          !isInPersonalWorkspace &&
+          permissions.canManageSubscription
+        "
+        class="mt-6 flex gap-1 rounded-2xl border border-interface-stroke p-6 justify-between items-center text-sm"
+      >
+        <div class="flex flex-col gap-2">
+          <h4 class="text-sm text-text-primary m-0">
+            {{ $t('subscription.nextMonthInvoice') }}
+          </h4>
+          <span
+            class="text-muted-foreground underline cursor-pointer"
+            @click="manageSubscription"
+          >
+            {{ $t('subscription.invoiceHistory') }}
+          </span>
+        </div>
+        <div class="flex flex-col gap-2 items-end">
+          <h4 class="m-0 font-bold">${{ nextMonthInvoice }}</h4>
+          <h5 class="m-0 text-muted-foreground">
+            {{ $t('subscription.memberCount', memberCount) }}
+          </h5>
+        </div>
+      </div>
+
+      <!-- View More Details - Outside main content -->
+      <div
+        v-if="permissions.canManageSubscription"
+        class="flex items-center gap-2 py-6"
+      >
+        <i class="pi pi-external-link text-muted"></i>
+        <a
+          href="https://www.comfy.org/cloud/pricing"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-sm underline hover:opacity-80 text-muted"
+        >
+          {{ $t('subscription.viewMoreDetailsPlans') }}
+        </a>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Menu from 'primevue/menu'
+import Skeleton from 'primevue/skeleton'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useToast } from 'primevue/usetoast'
+
+import StatusBadge from '@/components/common/StatusBadge.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useBillingOperationStore } from '@/platform/workspace/stores/billingOperationStore'
+import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
+import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useDialogService } from '@/services/dialogService'
+import {
+  DEFAULT_TIER_KEY,
+  TIER_TO_KEY,
+  getTierCredits,
+  getTierFeatures,
+  getTierPrice
+} from '@/platform/cloud/subscription/constants/tierPricing'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const workspaceStore = useTeamWorkspaceStore()
+const { isWorkspaceSubscribed, isInPersonalWorkspace, members } =
+  storeToRefs(workspaceStore)
+const { permissions } = useWorkspaceUI()
+const { t, n } = useI18n()
+const toast = useToast()
+
+const billingOperationStore = useBillingOperationStore()
+const isSettingUp = computed(() => billingOperationStore.isSettingUp)
+
+const {
+  isActiveSubscription,
+  subscription,
+  showSubscriptionDialog,
+  manageSubscription,
+  fetchStatus,
+  fetchBalance,
+  getMaxSeats
+} = useBillingContext()
+
+const { showCancelSubscriptionDialog } = useDialogService()
+
+const isResubscribing = ref(false)
+
+async function handleResubscribe() {
+  isResubscribing.value = true
+  try {
+    await workspaceApi.resubscribe()
+    toast.add({
+      severity: 'success',
+      summary: t('subscription.resubscribeSuccess'),
+      life: 5000
+    })
+    await Promise.all([fetchStatus(), fetchBalance()])
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : 'Failed to resubscribe'
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: message,
+      life: 5000
+    })
+  } finally {
+    isResubscribing.value = false
+  }
+}
+
+// Only show cancelled state for team workspaces (workspace billing)
+// Personal workspaces use legacy billing which has different cancellation semantics
+const isCancelled = computed(
+  () =>
+    !isInPersonalWorkspace.value && (subscription.value?.isCancelled ?? false)
+)
+
+// Show subscribe prompt to owners without active subscription
+// Don't show if subscription is cancelled (still active until end date)
+const showSubscribePrompt = computed(() => {
+  if (!permissions.value.canManageSubscription) return false
+  if (isCancelled.value) return false
+  if (isInPersonalWorkspace.value) return !isActiveSubscription.value
+  return !isWorkspaceSubscribed.value
+})
+
+// MEMBER view without subscription - members can't manage subscription
+const isMemberView = computed(
+  () =>
+    !permissions.value.canManageSubscription &&
+    !isActiveSubscription.value &&
+    !isWorkspaceSubscribed.value
+)
+
+// Show zero state for credits (no real billing data yet)
+const showZeroState = computed(
+  () => showSubscribePrompt.value || isMemberView.value
+)
+
+// Subscribe workspace - opens the subscription dialog (personal or workspace variant)
+function handleSubscribeWorkspace() {
+  showSubscriptionDialog()
+}
+const subscriptionTier = computed(() => subscription.value?.tier ?? null)
+const isYearlySubscription = computed(
+  () => subscription.value?.duration === 'ANNUAL'
+)
+
+const formattedRenewalDate = computed(() => {
+  if (!subscription.value?.renewalDate) return ''
+  const renewalDate = new Date(subscription.value.renewalDate)
+  return renewalDate.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+})
+
+const formattedEndDate = computed(() => {
+  if (!subscription.value?.endDate) return ''
+  const endDate = new Date(subscription.value.endDate)
+  return endDate.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+})
+
+const subscriptionTierName = computed(() => {
+  const tier = subscriptionTier.value
+  if (!tier) return ''
+  const key = TIER_TO_KEY[tier] ?? 'standard'
+  const baseName = t(`subscription.tiers.${key}.name`)
+  return isYearlySubscription.value
+    ? t('subscription.tierNameYearly', { name: baseName })
+    : baseName
+})
+
+const planMenu = ref<InstanceType<typeof Menu> | null>(null)
+
+const planMenuItems = computed(() => [
+  {
+    label: t('subscription.cancelSubscription'),
+    icon: 'pi pi-times',
+    command: () => {
+      showCancelSubscriptionDialog(subscription.value?.endDate ?? undefined)
+    }
+  }
+])
+
+const tierKey = computed(() => {
+  const tier = subscriptionTier.value
+  if (!tier) return DEFAULT_TIER_KEY
+  return TIER_TO_KEY[tier] ?? DEFAULT_TIER_KEY
+})
+const tierPrice = computed(() =>
+  getTierPrice(tierKey.value, isYearlySubscription.value)
+)
+
+const memberCount = computed(() => members.value.length)
+const nextMonthInvoice = computed(() => memberCount.value * tierPrice.value)
+
+const refillsDate = computed(() => {
+  if (!subscription.value?.renewalDate) return ''
+  const date = new Date(subscription.value.renewalDate)
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = String(date.getFullYear()).slice(-2)
+  return `${month}/${day}/${year}`
+})
+
+const creditsRemainingLabel = computed(() =>
+  isYearlySubscription.value
+    ? t('subscription.creditsRemainingThisYear', {
+        date: refillsDate.value
+      })
+    : t('subscription.creditsRemainingThisMonth', {
+        date: refillsDate.value
+      })
+)
+
+const planTotalCredits = computed(() => {
+  const credits = getTierCredits(tierKey.value)
+  const total = isYearlySubscription.value ? credits * 12 : credits
+  return n(total)
+})
+
+const includedCreditsDisplay = computed(
+  () => `${monthlyBonusCredits.value} / ${planTotalCredits.value}`
+)
+
+// Tier benefits for v-for loop
+type BenefitType = 'metric' | 'feature' | 'icon'
+
+interface Benefit {
+  key: string
+  type: BenefitType
+  label: string
+  value?: string
+  icon?: string
+}
+
+const tierBenefits = computed((): Benefit[] => {
+  const key = tierKey.value
+
+  const benefits: Benefit[] = []
+
+  if (!isInPersonalWorkspace.value) {
+    benefits.push({
+      key: 'members',
+      type: 'icon',
+      label: t('subscription.membersLabel', { count: getMaxSeats(key) }),
+      icon: 'pi pi-user'
+    })
+  }
+
+  benefits.push(
+    {
+      key: 'maxDuration',
+      type: 'metric',
+      value: t(`subscription.maxDuration.${key}`),
+      label: t('subscription.maxDurationLabel')
+    },
+    {
+      key: 'gpu',
+      type: 'feature',
+      label: t('subscription.gpuLabel')
+    },
+    {
+      key: 'addCredits',
+      type: 'feature',
+      label: t('subscription.addCreditsLabel')
+    }
+  )
+
+  if (getTierFeatures(key).customLoRAs) {
+    benefits.push({
+      key: 'customLoRAs',
+      type: 'feature',
+      label: t('subscription.customLoRAsLabel')
+    })
+  }
+
+  return benefits
+})
+
+const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
+  useSubscriptionCredits()
+
+const { handleAddApiCredits, handleRefresh } = useSubscriptionActions()
+
+// Focus-based polling: refresh balance when user returns from Stripe checkout
+const PENDING_TOPUP_KEY = 'pending_topup_timestamp'
+const TOPUP_EXPIRY_MS = 5 * 60 * 1000 // 5 minutes
+
+function handleWindowFocus() {
+  const timestampStr = localStorage.getItem(PENDING_TOPUP_KEY)
+  if (!timestampStr) return
+
+  const timestamp = parseInt(timestampStr, 10)
+
+  // Clear expired tracking (older than 5 minutes)
+  if (Date.now() - timestamp > TOPUP_EXPIRY_MS) {
+    localStorage.removeItem(PENDING_TOPUP_KEY)
+    return
+  }
+
+  // Refresh and clear tracking to prevent repeated calls
+  void handleRefresh()
+  localStorage.removeItem(PENDING_TOPUP_KEY)
+}
+
+onMounted(() => {
+  window.addEventListener('focus', handleWindowFocus)
+  void Promise.all([fetchStatus(), fetchBalance()])
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('focus', handleWindowFocus)
+})
+</script>
+
+<style scoped>
+:deep(.bg-comfy-menu-secondary) {
+  background-color: transparent;
+}
+</style>

src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue

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

src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue

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

src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue

@@ -0,0 +1,295 @@
+<template>
+  <div
+    class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+  >
+    <!-- Header -->
+    <div class="flex py-8 items-center justify-between px-8">
+      <h2 class="text-lg font-bold text-base-foreground m-0">
+        {{
+          isInsufficientCredits
+            ? $t('credits.topUp.addMoreCreditsToRun')
+            : $t('credits.topUp.addMoreCredits')
+        }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        @click="() => handleClose()"
+      >
+        <i class="icon-[lucide--x] size-6" />
+      </button>
+    </div>
+    <p
+      v-if="isInsufficientCredits"
+      class="text-sm text-muted-foreground m-0 px-8"
+    >
+      {{ $t('credits.topUp.insufficientWorkflowMessage') }}
+    </p>
+
+    <!-- Preset amount buttons -->
+    <div class="px-8">
+      <h3 class="m-0 text-sm font-normal text-muted-foreground">
+        {{ $t('credits.topUp.selectAmount') }}
+      </h3>
+      <div class="flex gap-2 pt-3">
+        <Button
+          v-for="amount in PRESET_AMOUNTS"
+          :key="amount"
+          :autofocus="amount === 50"
+          variant="secondary"
+          size="lg"
+          :class="
+            cn(
+              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
+              selectedPreset === amount && 'bg-secondary-background-selected'
+            )
+          "
+          @click="handlePresetClick(amount)"
+        >
+          ${{ amount }}
+        </Button>
+      </div>
+    </div>
+    <!-- Amount (USD) / Credits -->
+    <div class="flex gap-2 px-8 pt-8">
+      <!-- You Pay -->
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="text-sm text-muted-foreground">
+          {{ $t('credits.topUp.youPay') }}
+        </div>
+        <FormattedNumberStepper
+          :model-value="payAmount"
+          :min="0"
+          :max="MAX_AMOUNT"
+          :step="getStepAmount"
+          @update:model-value="handlePayAmountChange"
+          @max-reached="showCeilingWarning = true"
+        >
+          <template #prefix>
+            <span class="shrink-0 text-base font-semibold text-base-foreground"
+              >$</span
+            >
+          </template>
+        </FormattedNumberStepper>
+      </div>
+
+      <!-- You Get -->
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="text-sm text-muted-foreground">
+          {{ $t('credits.topUp.youGet') }}
+        </div>
+        <FormattedNumberStepper
+          v-model="creditsModel"
+          :min="0"
+          :max="usdToCredits(MAX_AMOUNT)"
+          :step="getCreditsStepAmount"
+          @max-reached="showCeilingWarning = true"
+        >
+          <template #prefix>
+            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
+          </template>
+        </FormattedNumberStepper>
+      </div>
+    </div>
+
+    <!-- Warnings -->
+
+    <p
+      v-if="isBelowMin"
+      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+    >
+      <i class="icon-[lucide--component] size-4" />
+      {{
+        $t('credits.topUp.minRequired', {
+          credits: formatNumber(usdToCredits(MIN_AMOUNT))
+        })
+      }}
+    </p>
+    <p
+      v-if="showCeilingWarning"
+      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+    >
+      <i class="icon-[lucide--component] size-4" />
+      {{
+        $t('credits.topUp.maxAllowed', {
+          credits: formatNumber(usdToCredits(MAX_AMOUNT))
+        })
+      }}
+      <span>{{ $t('credits.topUp.needMore') }}</span>
+      <a
+        href="https://www.comfy.org/cloud/enterprise"
+        target="_blank"
+        class="ml-1 text-inherit"
+        >{{ $t('credits.topUp.contactUs') }}</a
+      >
+    </p>
+
+    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+      <Button
+        :disabled="!isValidAmount || loading || isPolling"
+        :loading="loading || isPolling"
+        variant="primary"
+        size="lg"
+        class="h-10 justify-center"
+        @click="handleBuy"
+      >
+        {{ $t('subscription.addCredits') }}
+      </Button>
+      <div class="flex items-center justify-center gap-1">
+        <a
+          :href="pricingUrl"
+          target="_blank"
+          class="flex items-center gap-1 text-sm text-muted-foreground no-underline transition-colors hover:text-base-foreground"
+        >
+          {{ $t('credits.topUp.viewPricing') }}
+          <i class="icon-[lucide--external-link] size-4" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { creditsToUsd, usdToCredits } from '@/base/credits/comfyCredits'
+import Button from '@/components/ui/button/Button.vue'
+import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useExternalLink } from '@/composables/useExternalLink'
+import { useTelemetry } from '@/platform/telemetry'
+import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useBillingOperationStore } from '@/platform/workspace/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 settingsDialog = useSettingsDialog()
+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)
+      settingsDialog.show('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/platform/workspace/components/WorkspaceProfilePic.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="flex size-8 items-center justify-center rounded-md text-base font-semibold text-white"
+    :style="{
+      background: gradient,
+      textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)'
+    }"
+  >
+    {{ letter }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const { workspaceName } = defineProps<{
+  workspaceName: string
+}>()
+
+const letter = computed(() => workspaceName?.charAt(0)?.toUpperCase() ?? '?')
+
+const gradient = computed(() => {
+  const seed = letter.value.charCodeAt(0)
+
+  function mulberry32(a: number) {
+    return function () {
+      let t = (a += 0x6d2b79f5)
+      t = Math.imul(t ^ (t >>> 15), t | 1)
+      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+    }
+  }
+
+  const rand = mulberry32(seed)
+
+  const hue1 = Math.floor(rand() * 360)
+  const hue2 = (hue1 + 40 + Math.floor(rand() * 80)) % 360
+  const sat = 65 + Math.floor(rand() * 20)
+  const light = 55 + Math.floor(rand() * 15)
+
+  return `linear-gradient(135deg, hsl(${hue1}, ${sat}%, ${light}%), hsl(${hue2}, ${sat}%, ${light}%))`
+})
+</script>

src/platform/workspace/components/WorkspaceSwitcherPopover.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="flex w-80 flex-col overflow-hidden rounded-lg">
+    <div class="flex flex-col overflow-y-auto">
+      <!-- Loading state -->
+      <div v-if="isFetchingWorkspaces" class="flex flex-col gap-2 p-2">
+        <div
+          v-for="i in 2"
+          :key="i"
+          class="flex h-[54px] animate-pulse items-center gap-2 rounded px-2 py-4"
+        >
+          <div class="size-8 rounded-full bg-secondary-background" />
+          <div class="flex flex-1 flex-col gap-1">
+            <div class="h-4 w-24 rounded bg-secondary-background" />
+            <div class="h-3 w-16 rounded bg-secondary-background" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Workspace list -->
+      <template v-else>
+        <template v-for="workspace in availableWorkspaces" :key="workspace.id">
+          <div class="border-b border-border-default p-2">
+            <div
+              :class="
+                cn(
+                  'group flex h-[54px] w-full items-center gap-2 rounded px-2 py-4',
+                  'hover:bg-secondary-background-hover',
+                  isCurrentWorkspace(workspace) && 'bg-secondary-background'
+                )
+              "
+            >
+              <button
+                class="flex flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0"
+                @click="handleSelectWorkspace(workspace)"
+              >
+                <WorkspaceProfilePic
+                  class="size-8 text-sm"
+                  :workspace-name="workspace.name"
+                />
+                <div class="flex min-w-0 flex-1 flex-col items-start gap-1">
+                  <div class="flex items-center gap-1.5">
+                    <span class="text-sm text-base-foreground">
+                      {{
+                        workspace.type === 'personal'
+                          ? $t('workspaceSwitcher.personal')
+                          : workspace.name
+                      }}
+                    </span>
+                    <span
+                      v-if="getTierLabel(workspace)"
+                      class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                    >
+                      {{ getTierLabel(workspace) }}
+                    </span>
+                  </div>
+                  <span class="text-xs text-muted-foreground">
+                    {{ getRoleLabel(workspace.role) }}
+                  </span>
+                </div>
+                <i
+                  v-if="isCurrentWorkspace(workspace)"
+                  class="pi pi-check text-sm text-base-foreground"
+                />
+              </button>
+            </div>
+          </div>
+        </template>
+      </template>
+
+      <!-- Create workspace button -->
+      <div class="px-2 py-2">
+        <div
+          :class="
+            cn(
+              'flex h-12 w-full items-center gap-2 rounded px-2 py-2',
+              canCreateWorkspace
+                ? 'cursor-pointer hover:bg-secondary-background-hover'
+                : 'cursor-default'
+            )
+          "
+          @click="canCreateWorkspace && handleCreateWorkspace()"
+        >
+          <div
+            :class="
+              cn(
+                'flex size-8 items-center justify-center rounded-full bg-secondary-background',
+                !canCreateWorkspace && 'opacity-50'
+              )
+            "
+          >
+            <i class="pi pi-plus text-sm text-muted-foreground" />
+          </div>
+          <div class="flex min-w-0 flex-1 flex-col">
+            <span
+              v-if="canCreateWorkspace"
+              class="text-sm text-muted-foreground"
+            >
+              {{ $t('workspaceSwitcher.createWorkspace') }}
+            </span>
+            <span v-else class="text-sm text-muted-foreground">
+              {{ $t('workspaceSwitcher.maxWorkspacesReached') }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useWorkspaceSwitch } from '@/platform/workspace/composables/useWorkspaceSwitch'
+import type {
+  SubscriptionTier,
+  WorkspaceRole,
+  WorkspaceType
+} from '@/platform/workspace/api/workspaceApi'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { cn } from '@/utils/tailwindUtil'
+
+interface AvailableWorkspace {
+  id: string
+  name: string
+  type: WorkspaceType
+  role: WorkspaceRole
+  isSubscribed: boolean
+  subscriptionPlan: string | null
+  subscriptionTier: SubscriptionTier | null
+}
+
+const emit = defineEmits<{
+  select: [workspace: AvailableWorkspace]
+  create: []
+}>()
+
+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 workspaceStore = useTeamWorkspaceStore()
+const { workspaceId, workspaces, canCreateWorkspace, isFetchingWorkspaces } =
+  storeToRefs(workspaceStore)
+
+const availableWorkspaces = computed<AvailableWorkspace[]>(() =>
+  workspaces.value.map((w) => ({
+    id: w.id,
+    name: w.name,
+    type: w.type,
+    role: w.role,
+    isSubscribed: w.isSubscribed,
+    subscriptionPlan: w.subscriptionPlan,
+    subscriptionTier: w.subscriptionTier
+  }))
+)
+
+function isCurrentWorkspace(workspace: AvailableWorkspace): boolean {
+  return workspace.id === workspaceId.value
+}
+
+function getRoleLabel(role: AvailableWorkspace['role']): string {
+  if (role === 'owner') return t('workspaceSwitcher.roleOwner')
+  if (role === 'member') return t('workspaceSwitcher.roleMember')
+  return ''
+}
+
+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
+  }
+
+  // For non-active workspaces, use cached store data
+  if (!workspace.isSubscribed) return null
+
+  if (workspace.subscriptionTier) {
+    return formatTierName(workspace.subscriptionTier, false)
+  }
+
+  if (!workspace.subscriptionPlan) return null
+
+  // Parse plan slug (format: TIER_DURATION, e.g. "CREATOR_MONTHLY", "PRO_YEARLY")
+  const planSlug = workspace.subscriptionPlan
+
+  // Extract tier from plan slug (e.g., "CREATOR_MONTHLY" -> "CREATOR")
+  const tierMatch = Object.keys(tierKeyMap).find((tier) =>
+    planSlug.startsWith(tier)
+  )
+  if (!tierMatch) return null
+
+  const isYearly = planSlug.includes('YEARLY') || planSlug.includes('ANNUAL')
+  return formatTierName(tierMatch, isYearly)
+}
+
+async function handleSelectWorkspace(workspace: AvailableWorkspace) {
+  const success = await switchWithConfirmation(workspace.id)
+  if (success) {
+    emit('select', workspace)
+  }
+}
+
+function handleCreateWorkspace() {
+  emit('create')
+}
+</script>

src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue

@@ -0,0 +1,112 @@
+<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('workspacePanel.createWorkspaceDialog.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')"
+        @click="onCancel"
+      >
+        <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">
+        {{ $t('workspacePanel.createWorkspaceDialog.message') }}
+      </p>
+      <div class="flex flex-col gap-2">
+        <label class="text-sm text-base-foreground">
+          {{ $t('workspacePanel.createWorkspaceDialog.nameLabel') }}
+        </label>
+        <input
+          v-model="workspaceName"
+          type="text"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          :placeholder="
+            $t('workspacePanel.createWorkspaceDialog.namePlaceholder')
+          "
+          @keydown.enter="isValidName && onCreate()"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        :loading
+        :disabled="!isValidName"
+        @click="onCreate"
+      >
+        {{ $t('workspacePanel.createWorkspaceDialog.create') }}
+      </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 { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { onConfirm } = defineProps<{
+  onConfirm?: (name: string) => void | Promise<void>
+}>()
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+const toast = useToast()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+const workspaceName = ref('')
+
+const isValidName = computed(() => {
+  const name = workspaceName.value.trim()
+  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_'.,()&+]*$/
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'create-workspace' })
+}
+
+async function onCreate() {
+  if (!isValidName.value) return
+  loading.value = true
+  try {
+    const name = workspaceName.value.trim()
+    // Call optional callback if provided
+    await onConfirm?.(name)
+    dialogStore.closeDialog({ key: 'create-workspace' })
+    // Create workspace and switch to it (triggers reload internally)
+    await workspaceStore.createWorkspace(name)
+  } catch (error) {
+    console.error('[CreateWorkspaceDialog] Failed to create workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToCreateWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] 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('workspacePanel.deleteDialog.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')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{
+          workspaceName
+            ? $t('workspacePanel.deleteDialog.messageWithName', {
+                name: workspaceName
+              })
+            : $t('workspacePanel.deleteDialog.message')
+        }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onDelete">
+        {{ $t('g.delete') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { workspaceId, workspaceName } = defineProps<{
+  workspaceId?: string
+  workspaceName?: string
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'delete-workspace' })
+}
+
+async function onDelete() {
+  loading.value = true
+  try {
+    // Delete workspace (uses workspaceId if provided, otherwise current workspace)
+    await workspaceStore.deleteWorkspace(workspaceId)
+    dialogStore.closeDialog({ key: 'delete-workspace' })
+    window.location.reload()
+  } catch (error) {
+    console.error('[DeleteWorkspaceDialog] Failed to delete workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToDeleteWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue

@@ -0,0 +1,104 @@
+<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('workspacePanel.editWorkspaceDialog.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')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-4 px-4 py-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-sm text-base-foreground">
+          {{ $t('workspacePanel.editWorkspaceDialog.nameLabel') }}
+        </label>
+        <input
+          v-model="newWorkspaceName"
+          type="text"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          @keydown.enter="isValidName && onSave()"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        :loading
+        :disabled="!isValidName"
+        @click="onSave"
+      >
+        {{ $t('workspacePanel.editWorkspaceDialog.save') }}
+      </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 { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+const newWorkspaceName = ref(workspaceStore.workspaceName)
+
+const isValidName = computed(() => {
+  const name = newWorkspaceName.value.trim()
+  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_'.,()&+]*$/
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'edit-workspace' })
+}
+
+async function onSave() {
+  if (!isValidName.value) return
+  loading.value = true
+  try {
+    await workspaceStore.updateWorkspaceName(newWorkspaceName.value.trim())
+    dialogStore.closeDialog({ key: 'edit-workspace' })
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.toast.workspaceUpdated.title'),
+      detail: t('workspacePanel.toast.workspaceUpdated.message'),
+      life: 5000
+    })
+  } catch (error) {
+    console.error('[EditWorkspaceDialog] Failed to update workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToUpdateWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    class="flex w-full max-w-[512px] 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">
+        {{
+          step === 'email'
+            ? $t('workspacePanel.inviteMemberDialog.title')
+            : $t('workspacePanel.inviteMemberDialog.linkStep.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')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body: Email Step -->
+    <template v-if="step === 'email'">
+      <div class="flex flex-col gap-4 px-4 py-4">
+        <p class="m-0 text-sm text-muted-foreground">
+          {{ $t('workspacePanel.inviteMemberDialog.message') }}
+        </p>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          :placeholder="$t('workspacePanel.inviteMemberDialog.placeholder')"
+        />
+      </div>
+
+      <!-- Footer: Email Step -->
+      <div class="flex items-center justify-end gap-4 px-4 py-4">
+        <Button variant="muted-textonly" @click="onCancel">
+          {{ $t('g.cancel') }}
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          :loading
+          :disabled="!isValidEmail"
+          @click="onCreateLink"
+        >
+          {{ $t('workspacePanel.inviteMemberDialog.createLink') }}
+        </Button>
+      </div>
+    </template>
+
+    <!-- Body: Link Step -->
+    <template v-else>
+      <div class="flex flex-col gap-4 px-4 py-4">
+        <p class="m-0 text-sm text-muted-foreground">
+          {{ $t('workspacePanel.inviteMemberDialog.linkStep.message') }}
+        </p>
+        <p class="m-0 text-sm font-medium text-base-foreground">
+          {{ email }}
+        </p>
+        <div class="relative">
+          <input
+            :value="generatedLink"
+            readonly
+            class="w-full cursor-pointer rounded-lg border border-border-default bg-transparent px-3 py-2 pr-10 text-sm text-base-foreground focus:outline-none"
+            @click="onSelectLink"
+          />
+          <div
+            class="absolute right-3 top-2.5 cursor-pointer"
+            @click="onCopyLink"
+          >
+            <i
+              :class="
+                cn(
+                  'pi size-4',
+                  justCopied ? 'pi-check text-green-500' : 'pi-copy'
+                )
+              "
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer: Link Step -->
+      <div class="flex items-center justify-end gap-4 px-4 py-4">
+        <Button variant="muted-textonly" @click="onCancel">
+          {{ $t('g.cancel') }}
+        </Button>
+        <Button variant="primary" size="lg" @click="onCopyLink">
+          {{ $t('workspacePanel.inviteMemberDialog.linkStep.copyLink') }}
+        </Button>
+      </div>
+    </template>
+  </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 { cn } from '@/utils/tailwindUtil'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const dialogStore = useDialogStore()
+const toast = useToast()
+const { t } = useI18n()
+const workspaceStore = useTeamWorkspaceStore()
+
+const loading = ref(false)
+const email = ref('')
+const step = ref<'email' | 'link'>('email')
+const generatedLink = ref('')
+const justCopied = ref(false)
+
+const isValidEmail = computed(() => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email.value)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'invite-member' })
+}
+
+async function onCreateLink() {
+  if (!isValidEmail.value) return
+  loading.value = true
+  try {
+    generatedLink.value = await workspaceStore.createInviteLink(email.value)
+    step.value = 'link'
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed'),
+      detail: error instanceof Error ? error.message : undefined,
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onCopyLink() {
+  try {
+    await navigator.clipboard.writeText(generatedLink.value)
+    justCopied.value = true
+    setTimeout(() => {
+      justCopied.value = false
+    }, 759)
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopied'),
+      life: 2000
+    })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed'),
+      life: 3000
+    })
+  }
+}
+
+function onSelectLink(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.select()
+}
+</script>

src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="flex w-full max-w-[512px] 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">
+        {{
+          isActiveSubscription
+            ? $t('workspacePanel.inviteUpsellDialog.titleSingleSeat')
+            : $t('workspacePanel.inviteUpsellDialog.titleNotSubscribed')
+        }}
+      </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')"
+        @click="onDismiss"
+      >
+        <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">
+        {{
+          isActiveSubscription
+            ? $t('workspacePanel.inviteUpsellDialog.messageSingleSeat')
+            : $t('workspacePanel.inviteUpsellDialog.messageNotSubscribed')
+        }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onDismiss">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="primary" size="lg" @click="onUpgrade">
+        {{
+          isActiveSubscription
+            ? $t('workspacePanel.inviteUpsellDialog.upgradeToCreator')
+            : $t('workspacePanel.inviteUpsellDialog.viewPlans')
+        }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const dialogStore = useDialogStore()
+const { isActiveSubscription, showSubscriptionDialog } = useBillingContext()
+
+function onDismiss() {
+  dialogStore.closeDialog({ key: 'invite-member-upsell' })
+}
+
+function onUpgrade() {
+  dialogStore.closeDialog({ key: 'invite-member-upsell' })
+  showSubscriptionDialog()
+}
+</script>

src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] 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('workspacePanel.leaveDialog.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')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.leaveDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onLeave">
+        {{ $t('workspacePanel.leaveDialog.leave') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'leave-workspace' })
+}
+
+async function onLeave() {
+  loading.value = true
+  try {
+    // leaveWorkspace() handles switching to personal workspace internally and reloads
+    await workspaceStore.leaveWorkspace()
+    dialogStore.closeDialog({ key: 'leave-workspace' })
+    window.location.reload()
+  } catch (error) {
+    console.error('[LeaveWorkspaceDialog] Failed to leave workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToLeaveWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] 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('workspacePanel.removeMemberDialog.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')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.removeMemberDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onRemove">
+        {{ $t('workspacePanel.removeMemberDialog.remove') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { memberId } = defineProps<{
+  memberId: string
+}>()
+
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const toast = useToast()
+const { t } = useI18n()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'remove-member' })
+}
+
+async function onRemove() {
+  loading.value = true
+  try {
+    await workspaceStore.removeMember(memberId)
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.removeMemberDialog.success'),
+      life: 2000
+    })
+    dialogStore.closeDialog({ key: 'remove-member' })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.removeMemberDialog.error'),
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] 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('workspacePanel.revokeInviteDialog.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')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.revokeInviteDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onRevoke">
+        {{ $t('workspacePanel.revokeInviteDialog.revoke') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { inviteId } = defineProps<{
+  inviteId: string
+}>()
+
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const toast = useToast()
+const { t } = useI18n()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'revoke-invite' })
+}
+
+async function onRevoke() {
+  loading.value = true
+  try {
+    await workspaceStore.revokeInvite(inviteId)
+    dialogStore.closeDialog({ key: 'revoke-invite' })
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: error instanceof Error ? error.message : undefined,
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue

@@ -0,0 +1,563 @@
+<template>
+  <div class="grow overflow-auto pt-6">
+    <div
+      class="flex size-full flex-col gap-2 rounded-2xl border border-interface-stroke border-inter p-6"
+    >
+      <!-- Section Header -->
+      <div class="flex w-full items-center gap-9">
+        <div class="flex min-w-0 flex-1 items-baseline gap-2">
+          <span class="text-base font-semibold text-base-foreground">
+            <template v-if="activeView === 'active'">
+              {{
+                $t('workspacePanel.members.membersCount', {
+                  count:
+                    isSingleSeatPlan || isPersonalWorkspace
+                      ? 1
+                      : members.length,
+                  maxSeats: maxSeats
+                })
+              }}
+            </template>
+            <template v-else-if="permissions.canViewPendingInvites">
+              {{
+                $t(
+                  'workspacePanel.members.pendingInvitesCount',
+                  pendingInvites.length
+                )
+              }}
+            </template>
+          </span>
+        </div>
+        <div
+          v-if="uiConfig.showSearch && !isSingleSeatPlan"
+          class="flex items-start gap-2"
+        >
+          <SearchBox
+            v-model="searchQuery"
+            :placeholder="$t('g.search')"
+            size="lg"
+            class="w-64"
+          />
+        </div>
+      </div>
+
+      <!-- Members Content -->
+      <div class="flex min-h-0 flex-1 flex-col">
+        <!-- Table Header with Tab Buttons and Column Headers -->
+        <div
+          v-if="uiConfig.showMembersList"
+          :class="
+            cn(
+              'grid w-full items-center py-2',
+              isSingleSeatPlan
+                ? 'grid-cols-1 py-0'
+                : activeView === 'pending'
+                  ? uiConfig.pendingGridCols
+                  : uiConfig.headerGridCols
+            )
+          "
+        >
+          <!-- Tab buttons in first column -->
+          <div v-if="!isSingleSeatPlan" class="flex items-center gap-2">
+            <Button
+              :variant="
+                activeView === 'active' ? 'secondary' : 'muted-textonly'
+              "
+              size="md"
+              @click="activeView = 'active'"
+            >
+              {{ $t('workspacePanel.members.tabs.active') }}
+            </Button>
+            <Button
+              v-if="uiConfig.showPendingTab"
+              :variant="
+                activeView === 'pending' ? 'secondary' : 'muted-textonly'
+              "
+              size="md"
+              @click="activeView = 'pending'"
+            >
+              {{
+                $t(
+                  'workspacePanel.members.tabs.pendingCount',
+                  pendingInvites.length
+                )
+              }}
+            </Button>
+          </div>
+          <!-- Date column headers -->
+          <template v-if="activeView === 'pending'">
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-start"
+              @click="toggleSort('inviteDate')"
+            >
+              {{ $t('workspacePanel.members.columns.inviteDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-start"
+              @click="toggleSort('expiryDate')"
+            >
+              {{ $t('workspacePanel.members.columns.expiryDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <div />
+          </template>
+          <template v-else>
+            <template v-if="!isSingleSeatPlan">
+              <Button
+                variant="muted-textonly"
+                size="sm"
+                class="justify-end"
+                @click="toggleSort('joinDate')"
+              >
+                {{ $t('workspacePanel.members.columns.joinDate') }}
+                <i class="icon-[lucide--chevrons-up-down] size-4" />
+              </Button>
+              <!-- Empty cell for action column header (OWNER only) -->
+              <div v-if="permissions.canRemoveMembers" />
+            </template>
+          </template>
+        </div>
+
+        <!-- Members List -->
+        <div class="min-h-0 flex-1 overflow-y-auto">
+          <!-- Active Members -->
+          <template v-if="activeView === 'active'">
+            <!-- Personal Workspace: show only current user -->
+            <template v-if="isPersonalWorkspace">
+              <div
+                :class="
+                  cn(
+                    'grid w-full items-center rounded-lg p-2',
+                    uiConfig.membersGridCols
+                  )
+                "
+              >
+                <div class="flex items-center gap-3">
+                  <UserAvatar
+                    class="size-8"
+                    :photo-url="userPhotoUrl"
+                    :pt:icon:class="{ 'text-xl!': !userPhotoUrl }"
+                  />
+                  <div class="flex min-w-0 flex-1 flex-col gap-1">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm text-base-foreground">
+                        {{ userDisplayName }}
+                        <span class="text-muted-foreground">
+                          ({{ $t('g.you') }})
+                        </span>
+                      </span>
+                      <span
+                        v-if="uiConfig.showRoleBadge"
+                        class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                      >
+                        {{ $t('workspaceSwitcher.roleOwner') }}
+                      </span>
+                    </div>
+                    <span class="text-sm text-muted-foreground">
+                      {{ userEmail }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <!-- Team Workspace: sorted list (owner first, current user second, then rest) -->
+            <template v-else>
+              <div
+                v-for="(member, index) in filteredMembers"
+                :key="member.id"
+                :class="
+                  cn(
+                    'grid w-full items-center rounded-lg p-2',
+                    isSingleSeatPlan ? 'grid-cols-1' : uiConfig.membersGridCols,
+                    index % 2 === 1 && 'bg-secondary-background/50'
+                  )
+                "
+              >
+                <div class="flex items-center gap-3">
+                  <UserAvatar
+                    class="size-8"
+                    :photo-url="
+                      isCurrentUser(member) ? userPhotoUrl : undefined
+                    "
+                    :pt:icon:class="{
+                      'text-xl!': !isCurrentUser(member) || !userPhotoUrl
+                    }"
+                  />
+                  <div class="flex min-w-0 flex-1 flex-col gap-1">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm text-base-foreground">
+                        {{ member.name }}
+                        <span
+                          v-if="isCurrentUser(member)"
+                          class="text-muted-foreground"
+                        >
+                          ({{ $t('g.you') }})
+                        </span>
+                      </span>
+                      <span
+                        v-if="uiConfig.showRoleBadge"
+                        class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                      >
+                        {{ getRoleBadgeLabel(member.role) }}
+                      </span>
+                    </div>
+                    <span class="text-sm text-muted-foreground">
+                      {{ member.email }}
+                    </span>
+                  </div>
+                </div>
+                <!-- Join date -->
+                <span
+                  v-if="uiConfig.showDateColumn && !isSingleSeatPlan"
+                  class="text-sm text-muted-foreground text-right"
+                >
+                  {{ formatDate(member.joinDate) }}
+                </span>
+                <!-- Remove member action (OWNER only, can't remove yourself) -->
+                <div
+                  v-if="permissions.canRemoveMembers && !isSingleSeatPlan"
+                  class="flex items-center justify-end"
+                >
+                  <Button
+                    v-if="!isCurrentUser(member)"
+                    v-tooltip="{
+                      value: $t('g.moreOptions'),
+                      showDelay: 300
+                    }"
+                    variant="muted-textonly"
+                    size="icon"
+                    :aria-label="$t('g.moreOptions')"
+                    @click="showMemberMenu($event, member)"
+                  >
+                    <i class="pi pi-ellipsis-h" />
+                  </Button>
+                </div>
+              </div>
+
+              <!-- Member actions menu (shared for all members) -->
+              <Menu ref="memberMenu" :model="memberMenuItems" :popup="true" />
+            </template>
+          </template>
+
+          <!-- Upsell Banner -->
+          <div
+            v-if="isSingleSeatPlan"
+            class="flex items-center gap-2 rounded-xl border bg-secondary-background border-border-default px-4 py-3 mt-4 justify-center"
+          >
+            <p class="m-0 text-sm text-foreground">
+              {{
+                isActiveSubscription
+                  ? $t('workspacePanel.members.upsellBannerUpgrade')
+                  : $t('workspacePanel.members.upsellBannerSubscribe')
+              }}
+            </p>
+            <Button
+              variant="muted-textonly"
+              class="cursor-pointer underline text-sm"
+              @click="showSubscriptionDialog()"
+            >
+              {{ $t('workspacePanel.members.viewPlans') }}
+            </Button>
+          </div>
+
+          <!-- Pending Invites -->
+          <template v-if="activeView === 'pending'">
+            <div
+              v-for="(invite, index) in filteredPendingInvites"
+              :key="invite.id"
+              :class="
+                cn(
+                  'grid w-full items-center rounded-lg p-2',
+                  uiConfig.pendingGridCols,
+                  index % 2 === 1 && 'bg-secondary-background/50'
+                )
+              "
+            >
+              <!-- Invite info -->
+              <div class="flex items-center gap-3">
+                <div
+                  class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
+                >
+                  <span class="text-sm font-bold text-base-foreground">
+                    {{ getInviteInitial(invite.email) }}
+                  </span>
+                </div>
+                <div class="flex min-w-0 flex-1 flex-col gap-1">
+                  <span class="text-sm text-base-foreground">
+                    {{ getInviteDisplayName(invite.email) }}
+                  </span>
+                  <span class="text-sm text-muted-foreground">
+                    {{ invite.email }}
+                  </span>
+                </div>
+              </div>
+              <!-- Invite date -->
+              <span class="text-sm text-muted-foreground">
+                {{ formatDate(invite.inviteDate) }}
+              </span>
+              <!-- Expiry date -->
+              <span class="text-sm text-muted-foreground">
+                {{ formatDate(invite.expiryDate) }}
+              </span>
+              <!-- Actions -->
+              <div class="flex items-center justify-end gap-2">
+                <Button
+                  v-tooltip="{
+                    value: $t('workspacePanel.members.actions.copyLink'),
+                    showDelay: 300
+                  }"
+                  variant="secondary"
+                  size="md"
+                  :aria-label="$t('workspacePanel.members.actions.copyLink')"
+                  @click="handleCopyInviteLink(invite)"
+                >
+                  <i class="icon-[lucide--link] size-4" />
+                </Button>
+                <Button
+                  v-tooltip="{
+                    value: $t('workspacePanel.members.actions.revokeInvite'),
+                    showDelay: 300
+                  }"
+                  variant="secondary"
+                  size="md"
+                  :aria-label="
+                    $t('workspacePanel.members.actions.revokeInvite')
+                  "
+                  @click="handleRevokeInvite(invite)"
+                >
+                  <i class="icon-[lucide--mail-x] size-4" />
+                </Button>
+              </div>
+            </div>
+            <div
+              v-if="filteredPendingInvites.length === 0"
+              class="flex w-full items-center justify-center py-8 text-sm text-muted-foreground"
+            >
+              {{ $t('workspacePanel.members.noInvites') }}
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <!-- Personal Workspace Message -->
+    <div v-if="isPersonalWorkspace" class="flex items-center">
+      <p class="text-sm text-muted-foreground">
+        {{ $t('workspacePanel.members.personalWorkspaceMessage') }}
+      </p>
+      <button
+        class="underline bg-transparent border-none cursor-pointer"
+        @click="handleCreateWorkspace"
+      >
+        {{ $t('workspacePanel.members.createNewWorkspace') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Menu from 'primevue/menu'
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import type {
+  PendingInvite,
+  WorkspaceMember
+} from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogService } from '@/services/dialogService'
+import { cn } from '@/utils/tailwindUtil'
+
+const { d, t } = useI18n()
+const toast = useToast()
+const { userPhotoUrl, userEmail, userDisplayName } = useCurrentUser()
+const {
+  showRemoveMemberDialog,
+  showRevokeInviteDialog,
+  showCreateWorkspaceDialog
+} = useDialogService()
+const workspaceStore = useTeamWorkspaceStore()
+const {
+  members,
+  pendingInvites,
+  isInPersonalWorkspace: isPersonalWorkspace
+} = storeToRefs(workspaceStore)
+const { copyInviteLink } = workspaceStore
+const { permissions, uiConfig } = useWorkspaceUI()
+const {
+  isActiveSubscription,
+  subscription,
+  showSubscriptionDialog,
+  getMaxSeats
+} = useBillingContext()
+
+const maxSeats = computed(() => {
+  if (isPersonalWorkspace.value) return 1
+  const tier = subscription.value?.tier
+  if (!tier) return 1
+  const tierKey = TIER_TO_KEY[tier]
+  if (!tierKey) return 1
+  return getMaxSeats(tierKey)
+})
+
+const isSingleSeatPlan = computed(() => {
+  if (isPersonalWorkspace.value) return false
+  if (!isActiveSubscription.value) return true
+  return maxSeats.value <= 1
+})
+
+const searchQuery = ref('')
+const activeView = ref<'active' | 'pending'>('active')
+const sortField = ref<'inviteDate' | 'expiryDate' | 'joinDate'>('inviteDate')
+const sortDirection = ref<'asc' | 'desc'>('desc')
+
+const memberMenu = ref<InstanceType<typeof Menu> | null>(null)
+const selectedMember = ref<WorkspaceMember | null>(null)
+
+function getInviteDisplayName(email: string): string {
+  return email.split('@')[0]
+}
+
+function getInviteInitial(email: string): string {
+  return email.charAt(0).toUpperCase()
+}
+
+const memberMenuItems = computed(() => [
+  {
+    label: t('workspacePanel.members.actions.removeMember'),
+    icon: 'pi pi-user-minus',
+    command: () => {
+      if (selectedMember.value) {
+        handleRemoveMember(selectedMember.value)
+      }
+    }
+  }
+])
+
+function showMemberMenu(event: Event, member: WorkspaceMember) {
+  selectedMember.value = member
+  memberMenu.value?.toggle(event)
+}
+
+function isCurrentUser(member: WorkspaceMember): boolean {
+  return member.email.toLowerCase() === userEmail.value?.toLowerCase()
+}
+
+// All members sorted: owners first, current user second, then rest by join date
+const filteredMembers = computed(() => {
+  let result = [...members.value]
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(
+      (member) =>
+        member.name.toLowerCase().includes(query) ||
+        member.email.toLowerCase().includes(query)
+    )
+  }
+
+  result.sort((a, b) => {
+    // Owners always come first
+    if (a.role === 'owner' && b.role !== 'owner') return -1
+    if (a.role !== 'owner' && b.role === 'owner') return 1
+
+    // Current user comes second (after owner)
+    const aIsCurrentUser = isCurrentUser(a)
+    const bIsCurrentUser = isCurrentUser(b)
+    if (aIsCurrentUser && !bIsCurrentUser) return -1
+    if (!aIsCurrentUser && bIsCurrentUser) return 1
+
+    // Then sort by join date
+    const aValue = a.joinDate.getTime()
+    const bValue = b.joinDate.getTime()
+    return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
+  })
+
+  return result
+})
+
+function getRoleBadgeLabel(role: 'owner' | 'member'): string {
+  return role === 'owner'
+    ? t('workspaceSwitcher.roleOwner')
+    : t('workspaceSwitcher.roleMember')
+}
+
+const filteredPendingInvites = computed(() => {
+  let result = [...pendingInvites.value]
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter((invite) =>
+      invite.email.toLowerCase().includes(query)
+    )
+  }
+
+  const field = sortField.value === 'joinDate' ? 'inviteDate' : sortField.value
+  result.sort((a, b) => {
+    const aDate = a[field]
+    const bDate = b[field]
+    if (!aDate || !bDate) return 0
+    const aValue = aDate.getTime()
+    const bValue = bDate.getTime()
+    return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
+  })
+
+  return result
+})
+
+function toggleSort(field: 'inviteDate' | 'expiryDate' | 'joinDate') {
+  if (sortField.value === field) {
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortField.value = field
+    sortDirection.value = 'desc'
+  }
+}
+
+function formatDate(date: Date): string {
+  return d(date, { dateStyle: 'medium' })
+}
+
+async function handleCopyInviteLink(invite: PendingInvite) {
+  try {
+    await copyInviteLink(invite.id)
+    toast.add({
+      severity: 'success',
+      summary: t('g.copied'),
+      life: 2000
+    })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      life: 3000
+    })
+  }
+}
+
+function handleRevokeInvite(invite: PendingInvite) {
+  showRevokeInviteDialog(invite.id)
+}
+
+function handleCreateWorkspace() {
+  showCreateWorkspaceDialog()
+}
+
+function handleRemoveMember(member: WorkspaceMember) {
+  showRemoveMemberDialog(member.id)
+}
+</script>

src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="flex h-full w-full flex-col">
+    <header class="mb-8 flex items-center gap-4">
+      <WorkspaceProfilePic
+        class="size-12 !text-3xl"
+        :workspace-name="workspaceName"
+      />
+      <h1 class="text-3xl text-base-foreground">
+        {{ workspaceName }}
+      </h1>
+    </header>
+    <TabsRoot v-model="activeTab">
+      <div class="flex w-full items-center">
+        <TabsList class="flex items-center gap-2 pb-1">
+          <TabsTrigger
+            value="plan"
+            :class="
+              cn(
+                tabTriggerBase,
+                activeTab === 'plan' ? tabTriggerActive : tabTriggerInactive
+              )
+            "
+          >
+            {{ $t('workspacePanel.tabs.planCredits') }}
+          </TabsTrigger>
+          <TabsTrigger
+            value="members"
+            :class="
+              cn(
+                tabTriggerBase,
+                activeTab === 'members' ? tabTriggerActive : tabTriggerInactive
+              )
+            "
+          >
+            {{
+              $t('workspacePanel.tabs.membersCount', {
+                count: members.length
+              })
+            }}
+          </TabsTrigger>
+        </TabsList>
+
+        <Button
+          v-if="permissions.canInviteMembers"
+          v-tooltip="
+            inviteTooltip
+              ? { value: inviteTooltip, showDelay: 0 }
+              : { value: $t('workspacePanel.inviteMember'), showDelay: 300 }
+          "
+          variant="secondary"
+          size="lg"
+          :disabled="!isSingleSeatPlan && isInviteLimitReached"
+          :class="
+            !isSingleSeatPlan &&
+            isInviteLimitReached &&
+            'opacity-50 cursor-not-allowed'
+          "
+          :aria-label="$t('workspacePanel.inviteMember')"
+          @click="handleInviteMember"
+        >
+          <i class="pi pi-plus text-sm" />
+        </Button>
+        <template v-if="permissions.canAccessWorkspaceMenu">
+          <Button
+            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+            variant="muted-textonly"
+            size="icon"
+            :aria-label="$t('g.moreOptions')"
+            @click="menu?.toggle($event)"
+          >
+            <i class="pi pi-ellipsis-h" />
+          </Button>
+          <Menu ref="menu" :model="menuItems" :popup="true">
+            <template #item="{ item }">
+              <button
+                v-tooltip="
+                  item.disabled && deleteTooltip
+                    ? { value: deleteTooltip, showDelay: 0 }
+                    : null
+                "
+                type="button"
+                :disabled="!!item.disabled"
+                :class="
+                  cn(
+                    'flex w-full items-center gap-2 px-3 py-2 bg-transparent border-none cursor-pointer',
+                    item.class,
+                    item.disabled && 'pointer-events-auto cursor-not-allowed'
+                  )
+                "
+                @click="
+                  item.command?.({
+                    originalEvent: $event,
+                    item
+                  })
+                "
+              >
+                <i :class="item.icon" />
+                <span>{{ item.label }}</span>
+              </button>
+            </template>
+          </Menu>
+        </template>
+      </div>
+
+      <TabsContent value="plan" class="mt-4">
+        <SubscriptionPanelContentWorkspace />
+      </TabsContent>
+      <TabsContent value="members" class="mt-4">
+        <MembersPanelContent :key="workspaceRole" />
+      </TabsContent>
+    </TabsRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Menu from 'primevue/menu'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
+
+import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
+import MembersPanelContent from '@/platform/workspace/components/dialogs/settings/MembersPanelContent.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
+import SubscriptionPanelContentWorkspace from '@/platform/workspace/components/SubscriptionPanelContentWorkspace.vue'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogService } from '@/services/dialogService'
+import { cn } from '@/utils/tailwindUtil'
+
+const tabTriggerBase =
+  'flex items-center justify-center shrink-0 px-2.5 py-2 text-sm rounded-lg cursor-pointer transition-all duration-200 outline-hidden border-none'
+const tabTriggerActive =
+  'bg-interface-menu-component-surface-hovered text-text-primary font-bold'
+const tabTriggerInactive =
+  'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'
+
+const { defaultTab = 'plan' } = defineProps<{
+  defaultTab?: string
+}>()
+
+const { t } = useI18n()
+const {
+  showLeaveWorkspaceDialog,
+  showDeleteWorkspaceDialog,
+  showInviteMemberDialog,
+  showInviteMemberUpsellDialog,
+  showEditWorkspaceDialog
+} = useDialogService()
+const { isActiveSubscription, subscription, getMaxSeats } = useBillingContext()
+
+const isSingleSeatPlan = computed(() => {
+  if (!isActiveSubscription.value) return true
+  const tier = subscription.value?.tier
+  if (!tier) return true
+  const tierKey = TIER_TO_KEY[tier]
+  if (!tierKey) return true
+  return getMaxSeats(tierKey) <= 1
+})
+const workspaceStore = useTeamWorkspaceStore()
+const { workspaceName, members, isInviteLimitReached, isWorkspaceSubscribed } =
+  storeToRefs(workspaceStore)
+const { fetchMembers, fetchPendingInvites } = workspaceStore
+
+const { workspaceRole, permissions, uiConfig } = useWorkspaceUI()
+const activeTab = ref(defaultTab)
+
+const menu = ref<InstanceType<typeof Menu> | null>(null)
+
+function handleLeaveWorkspace() {
+  showLeaveWorkspaceDialog()
+}
+
+function handleDeleteWorkspace() {
+  showDeleteWorkspaceDialog()
+}
+
+function handleEditWorkspace() {
+  showEditWorkspaceDialog()
+}
+
+// Disable delete when workspace has an active subscription (to prevent accidental deletion)
+// Use workspace's own subscription status, not the global isActiveSubscription
+const isDeleteDisabled = computed(
+  () =>
+    uiConfig.value.workspaceMenuAction === 'delete' &&
+    isWorkspaceSubscribed.value
+)
+
+const deleteTooltip = computed(() => {
+  if (!isDeleteDisabled.value) return null
+  const tooltipKey = uiConfig.value.workspaceMenuDisabledTooltip
+  return tooltipKey ? t(tooltipKey) : null
+})
+
+const inviteTooltip = computed(() => {
+  if (isSingleSeatPlan.value) return null
+  if (!isInviteLimitReached.value) return null
+  return t('workspacePanel.inviteLimitReached')
+})
+
+function handleInviteMember() {
+  if (isSingleSeatPlan.value) {
+    showInviteMemberUpsellDialog()
+    return
+  }
+  if (isInviteLimitReached.value) return
+  showInviteMemberDialog()
+}
+
+const menuItems = computed(() => {
+  const items = []
+
+  // Add edit option for owners
+  if (uiConfig.value.showEditWorkspaceMenuItem) {
+    items.push({
+      label: t('workspacePanel.menu.editWorkspace'),
+      icon: 'pi pi-pencil',
+      command: handleEditWorkspace
+    })
+  }
+
+  const action = uiConfig.value.workspaceMenuAction
+  if (action === 'delete') {
+    items.push({
+      label: t('workspacePanel.menu.deleteWorkspace'),
+      icon: 'pi pi-trash',
+      class: isDeleteDisabled.value
+        ? 'text-danger/50 cursor-not-allowed'
+        : 'text-danger',
+      disabled: isDeleteDisabled.value,
+      command: isDeleteDisabled.value ? undefined : handleDeleteWorkspace
+    })
+  } else if (action === 'leave') {
+    items.push({
+      label: t('workspacePanel.menu.leaveWorkspace'),
+      icon: 'pi pi-sign-out',
+      command: handleLeaveWorkspace
+    })
+  }
+
+  return items
+})
+
+onMounted(() => {
+  fetchMembers()
+  fetchPendingInvites()
+})
+</script>

src/platform/workspace/components/toasts/InviteAcceptedToast.vue

@@ -0,0 +1,42 @@
+<template>
+  <Toast group="invite-accepted" position="top-right">
+    <template #message="slotProps">
+      <div class="flex items-center gap-2 justify-between w-full">
+        <div class="flex flex-col justify-start">
+          <div class="text-base">
+            {{ slotProps.message.summary }}
+          </div>
+          <div class="mt-1 text-sm text-foreground">
+            {{ slotProps.message.detail.text }} <br />
+            {{ slotProps.message.detail.workspaceName }}
+          </div>
+        </div>
+        <Button
+          size="md"
+          variant="inverted"
+          @click="viewWorkspace(slotProps.message.detail.workspaceId)"
+        >
+          {{ t('workspace.viewWorkspace') }}
+        </Button>
+      </div>
+    </template>
+  </Toast>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue'
+import Toast from 'primevue/toast'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useWorkspaceSwitch } from '@/platform/workspace/composables/useWorkspaceSwitch'
+
+const { t } = useI18n()
+const toast = useToast()
+const { switchWithConfirmation } = useWorkspaceSwitch()
+
+function viewWorkspace(workspaceId: string) {
+  void switchWithConfirmation(workspaceId)
+  toast.removeGroup('invite-accepted')
+}
+</script>

src/platform/workspace/composables/useWorkspaceBilling.ts

@@ -0,0 +1,311 @@
+import { computed, onBeforeUnmount, ref, shallowRef } from 'vue'
+
+import { useBillingPlans } from '@/platform/cloud/subscription/composables/useBillingPlans'
+import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type {
+  BillingBalanceResponse,
+  BillingStatusResponse,
+  PreviewSubscribeResponse,
+  SubscribeResponse
+} from '@/platform/workspace/api/workspaceApi'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+import type {
+  BalanceInfo,
+  BillingActions,
+  BillingState,
+  SubscriptionInfo
+} from '../../../composables/billing/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: status.renewal_date ?? null,
+      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/platform/workspace/composables/useWorkspaceSwitch.test.ts

@@ -0,0 +1,161 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useWorkspaceSwitch } from '@/platform/workspace/composables/useWorkspaceSwitch'
+import type { WorkspaceWithRole } from '@/platform/workspace/api/workspaceApi'
+
+const mockSwitchWorkspace = vi.hoisted(() => vi.fn())
+const mockActiveWorkspace = vi.hoisted(() => ({
+  value: null as WorkspaceWithRole | null
+}))
+
+vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
+  useTeamWorkspaceStore: () => ({
+    switchWorkspace: mockSwitchWorkspace
+  })
+}))
+
+vi.mock('pinia', () => ({
+  storeToRefs: () => ({
+    activeWorkspace: mockActiveWorkspace
+  })
+}))
+
+const mockModifiedWorkflows = vi.hoisted(
+  () => [] as Array<{ isModified: boolean }>
+)
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({
+    get modifiedWorkflows() {
+      return mockModifiedWorkflows
+    }
+  })
+}))
+
+const mockConfirm = vi.hoisted(() => vi.fn())
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    confirm: mockConfirm
+  })
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
+describe('useWorkspaceSwitch', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockActiveWorkspace.value = {
+      id: 'workspace-1',
+      name: 'Test Workspace',
+      type: 'personal',
+      role: 'owner',
+      created_at: '2026-01-01T00:00:00Z',
+      joined_at: '2026-01-01T00:00:00Z'
+    }
+    mockModifiedWorkflows.length = 0
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  describe('hasUnsavedChanges', () => {
+    it('returns true when there are modified workflows', () => {
+      mockModifiedWorkflows.push({ isModified: true })
+      const { hasUnsavedChanges } = useWorkspaceSwitch()
+
+      expect(hasUnsavedChanges()).toBe(true)
+    })
+
+    it('returns true when multiple workflows are modified', () => {
+      mockModifiedWorkflows.push({ isModified: true }, { isModified: true })
+      const { hasUnsavedChanges } = useWorkspaceSwitch()
+
+      expect(hasUnsavedChanges()).toBe(true)
+    })
+
+    it('returns false when no workflows are modified', () => {
+      mockModifiedWorkflows.length = 0
+      const { hasUnsavedChanges } = useWorkspaceSwitch()
+
+      expect(hasUnsavedChanges()).toBe(false)
+    })
+  })
+
+  describe('switchWithConfirmation', () => {
+    it('returns true immediately if switching to the same workspace', async () => {
+      const { switchWithConfirmation } = useWorkspaceSwitch()
+
+      const result = await switchWithConfirmation('workspace-1')
+
+      expect(result).toBe(true)
+      expect(mockSwitchWorkspace).not.toHaveBeenCalled()
+      expect(mockConfirm).not.toHaveBeenCalled()
+    })
+
+    it('switches directly without dialog when no unsaved changes', async () => {
+      mockModifiedWorkflows.length = 0
+      mockSwitchWorkspace.mockResolvedValue(undefined)
+      const { switchWithConfirmation } = useWorkspaceSwitch()
+
+      const result = await switchWithConfirmation('workspace-2')
+
+      expect(result).toBe(true)
+      expect(mockConfirm).not.toHaveBeenCalled()
+      expect(mockSwitchWorkspace).toHaveBeenCalledWith('workspace-2')
+    })
+
+    it('shows confirmation dialog when there are unsaved changes', async () => {
+      mockModifiedWorkflows.push({ isModified: true })
+      mockConfirm.mockResolvedValue(true)
+      mockSwitchWorkspace.mockResolvedValue(undefined)
+      const { switchWithConfirmation } = useWorkspaceSwitch()
+
+      await switchWithConfirmation('workspace-2')
+
+      expect(mockConfirm).toHaveBeenCalledWith({
+        title: 'workspace.unsavedChanges.title',
+        message: 'workspace.unsavedChanges.message',
+        type: 'dirtyClose'
+      })
+    })
+
+    it('returns false if user cancels the confirmation dialog', async () => {
+      mockModifiedWorkflows.push({ isModified: true })
+      mockConfirm.mockResolvedValue(false)
+      const { switchWithConfirmation } = useWorkspaceSwitch()
+
+      const result = await switchWithConfirmation('workspace-2')
+
+      expect(result).toBe(false)
+      expect(mockSwitchWorkspace).not.toHaveBeenCalled()
+    })
+
+    it('calls switchWorkspace after user confirms', async () => {
+      mockModifiedWorkflows.push({ isModified: true })
+      mockConfirm.mockResolvedValue(true)
+      mockSwitchWorkspace.mockResolvedValue(undefined)
+      const { switchWithConfirmation } = useWorkspaceSwitch()
+
+      const result = await switchWithConfirmation('workspace-2')
+
+      expect(result).toBe(true)
+      expect(mockSwitchWorkspace).toHaveBeenCalledWith('workspace-2')
+    })
+
+    it('returns false if switchWorkspace throws an error', async () => {
+      mockModifiedWorkflows.length = 0
+      mockSwitchWorkspace.mockRejectedValue(new Error('Switch failed'))
+      const { switchWithConfirmation } = useWorkspaceSwitch()
+
+      const result = await switchWithConfirmation('workspace-2')
+
+      expect(result).toBe(false)
+    })
+  })
+})

src/platform/workspace/composables/useWorkspaceSwitch.ts

@@ -0,0 +1,49 @@
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogService } from '@/services/dialogService'
+
+export function useWorkspaceSwitch() {
+  const { t } = useI18n()
+  const workspaceStore = useTeamWorkspaceStore()
+  const { activeWorkspace } = storeToRefs(workspaceStore)
+  const workflowStore = useWorkflowStore()
+  const dialogService = useDialogService()
+
+  function hasUnsavedChanges(): boolean {
+    return workflowStore.modifiedWorkflows.length > 0
+  }
+
+  async function switchWithConfirmation(workspaceId: string): Promise<boolean> {
+    if (activeWorkspace.value?.id === workspaceId) {
+      return true
+    }
+
+    if (hasUnsavedChanges()) {
+      const confirmed = await dialogService.confirm({
+        title: t('workspace.unsavedChanges.title'),
+        message: t('workspace.unsavedChanges.message'),
+        type: 'dirtyClose'
+      })
+
+      if (!confirmed) {
+        return false
+      }
+    }
+
+    try {
+      await workspaceStore.switchWorkspace(workspaceId)
+      // Note: switchWorkspace triggers page reload internally
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  return {
+    hasUnsavedChanges,
+    switchWithConfirmation
+  }
+}

src/platform/workspace/stores/billingOperationStore.test.ts

@@ -0,0 +1,506 @@
+import { setActivePinia, createPinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi, afterEach } from 'vitest'
+
+import type { BillingOpStatusResponse } from '@/platform/workspace/api/workspaceApi'
+
+const mockFetchStatus = vi.fn()
+const mockFetchBalance = vi.fn()
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    fetchStatus: mockFetchStatus,
+    fetchBalance: mockFetchBalance
+  })
+}))
+
+const mockToastAdd = vi.fn()
+const mockToastRemove = vi.fn()
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: () => ({
+    add: mockToastAdd,
+    remove: mockToastRemove
+  })
+}))
+
+vi.mock('@/platform/workspace/api/workspaceApi', () => ({
+  workspaceApi: {
+    getBillingOpStatus: vi.fn()
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
+  useSettingsDialog: () => ({
+    show: vi.fn(),
+    hide: vi.fn(),
+    showAbout: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    closeDialog: vi.fn()
+  })
+}))
+
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+
+import { useBillingOperationStore } from './billingOperationStore'
+
+describe('billingOperationStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('startOperation', () => {
+    it('creates a pending operation', () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      expect(store.operations.size).toBe(1)
+      const operation = store.getOperation('op-1')
+      expect(operation).toBeDefined()
+      expect(operation?.status).toBe('pending')
+      expect(operation?.type).toBe('subscription')
+      expect(store.hasPendingOperations).toBe(true)
+    })
+
+    it('does not create duplicate operations', () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+      store.startOperation('op-1', 'topup')
+
+      expect(store.operations.size).toBe(1)
+      expect(store.getOperation('op-1')?.type).toBe('subscription')
+    })
+
+    it('shows immediate processing toast for subscription operations', () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'info',
+        summary: 'billingOperation.subscriptionProcessing',
+        group: 'billing-operation'
+      })
+    })
+
+    it('shows immediate processing toast for topup operations', () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'topup')
+
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'info',
+        summary: 'billingOperation.topupProcessing',
+        group: 'billing-operation'
+      })
+    })
+  })
+
+  describe('polling success', () => {
+    it('updates status and shows toast on success', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'succeeded',
+        started_at: new Date().toISOString(),
+        completed_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      const operation = store.getOperation('op-1')
+      expect(operation?.status).toBe('succeeded')
+      expect(store.hasPendingOperations).toBe(false)
+
+      expect(mockFetchStatus).toHaveBeenCalled()
+      expect(mockFetchBalance).toHaveBeenCalled()
+
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'success',
+        summary: 'billingOperation.subscriptionSuccess',
+        life: 5000
+      })
+    })
+
+    it('shows topup success message for topup operations', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'succeeded',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'topup')
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'success',
+        summary: 'billingOperation.topupSuccess',
+        life: 5000
+      })
+    })
+
+    it('removes the received toast when operation succeeds', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'succeeded',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      const receivedToast = mockToastAdd.mock.calls[0][0]
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      expect(mockToastRemove).toHaveBeenCalledWith(receivedToast)
+    })
+  })
+
+  describe('polling failure', () => {
+    it('updates status and shows error toast on failure', async () => {
+      const errorMessage = 'Payment declined'
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'failed',
+        error_message: errorMessage,
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      const operation = store.getOperation('op-1')
+      expect(operation?.status).toBe('failed')
+      expect(operation?.errorMessage).toBe(errorMessage)
+      expect(store.hasPendingOperations).toBe(false)
+
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'billingOperation.subscriptionFailed',
+        detail: errorMessage,
+        life: 5000
+      })
+    })
+
+    it('uses default message when no error_message in response', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'failed',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'topup')
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'billingOperation.topupFailed',
+        detail: undefined,
+        life: 5000
+      })
+    })
+  })
+
+  describe('polling timeout', () => {
+    it('times out after 2 minutes and shows error toast', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      await vi.advanceTimersByTimeAsync(121_000)
+      await vi.runAllTimersAsync()
+
+      const operation = store.getOperation('op-1')
+      expect(operation?.status).toBe('timeout')
+      expect(store.hasPendingOperations).toBe(false)
+
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'billingOperation.subscriptionTimeout',
+        life: 5000
+      })
+    })
+
+    it('shows topup timeout message for topup operations', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'topup')
+
+      await vi.advanceTimersByTimeAsync(121_000)
+      await vi.runAllTimersAsync()
+
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'billingOperation.topupTimeout',
+        life: 5000
+      })
+    })
+  })
+
+  describe('exponential backoff', () => {
+    it('uses exponential backoff for polling intervals', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      await vi.advanceTimersByTimeAsync(0)
+      expect(workspaceApi.getBillingOpStatus).toHaveBeenCalledTimes(1)
+
+      await vi.advanceTimersByTimeAsync(1500)
+      expect(workspaceApi.getBillingOpStatus).toHaveBeenCalledTimes(2)
+
+      await vi.advanceTimersByTimeAsync(2250)
+      expect(workspaceApi.getBillingOpStatus).toHaveBeenCalledTimes(3)
+    })
+
+    it('caps polling interval at 8 seconds', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      await vi.advanceTimersByTimeAsync(60_000)
+
+      const callCountBefore = vi.mocked(workspaceApi.getBillingOpStatus).mock
+        .calls.length
+
+      await vi.advanceTimersByTimeAsync(8000)
+
+      expect(
+        vi.mocked(workspaceApi.getBillingOpStatus).mock.calls.length
+      ).toBeGreaterThan(callCountBefore)
+    })
+  })
+
+  describe('network errors', () => {
+    it('continues polling on network errors', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus)
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockResolvedValueOnce({
+          id: 'op-1',
+          status: 'succeeded',
+          started_at: new Date().toISOString()
+        } satisfies BillingOpStatusResponse)
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      await vi.advanceTimersByTimeAsync(0)
+      expect(store.getOperation('op-1')?.status).toBe('pending')
+
+      await vi.advanceTimersByTimeAsync(1500)
+      expect(store.getOperation('op-1')?.status).toBe('pending')
+
+      await vi.advanceTimersByTimeAsync(2250)
+      expect(store.getOperation('op-1')?.status).toBe('succeeded')
+    })
+  })
+
+  describe('clearOperation', () => {
+    it('removes operation from the store', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'succeeded',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      expect(store.operations.size).toBe(1)
+
+      store.clearOperation('op-1')
+
+      expect(store.operations.size).toBe(0)
+      expect(store.getOperation('op-1')).toBeUndefined()
+    })
+  })
+
+  describe('multiple operations', () => {
+    it('can track multiple operations concurrently', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockImplementation(
+        async (opId: string) => ({
+          id: opId,
+          status: 'pending' as const,
+          started_at: new Date().toISOString()
+        })
+      )
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+      store.startOperation('op-2', 'topup')
+
+      expect(store.operations.size).toBe(2)
+      expect(store.hasPendingOperations).toBe(true)
+
+      vi.mocked(workspaceApi.getBillingOpStatus).mockImplementation(
+        async (opId: string) => ({
+          id: opId,
+          status:
+            opId === 'op-1' ? ('succeeded' as const) : ('pending' as const),
+          started_at: new Date().toISOString()
+        })
+      )
+
+      await vi.advanceTimersByTimeAsync(1500)
+
+      expect(store.getOperation('op-1')?.status).toBe('succeeded')
+      expect(store.getOperation('op-2')?.status).toBe('pending')
+      expect(store.hasPendingOperations).toBe(true)
+    })
+  })
+
+  describe('isSettingUp', () => {
+    it('returns true when there is a pending subscription operation', () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      expect(store.isSettingUp).toBe(true)
+    })
+
+    it('returns false when there is no pending subscription operation', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'succeeded',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      expect(store.isSettingUp).toBe(false)
+    })
+
+    it('returns false when only topup operations are pending', () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'topup')
+
+      expect(store.isSettingUp).toBe(false)
+    })
+  })
+
+  describe('isAddingCredits', () => {
+    it('returns true when there is a pending topup operation', () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'topup')
+
+      expect(store.isAddingCredits).toBe(true)
+    })
+
+    it('returns false when there is no pending topup operation', async () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'succeeded',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'topup')
+
+      await vi.advanceTimersByTimeAsync(0)
+
+      expect(store.isAddingCredits).toBe(false)
+    })
+
+    it('returns false when only subscription operations are pending', () => {
+      vi.mocked(workspaceApi.getBillingOpStatus).mockResolvedValue({
+        id: 'op-1',
+        status: 'pending',
+        started_at: new Date().toISOString()
+      })
+
+      const store = useBillingOperationStore()
+      store.startOperation('op-1', 'subscription')
+
+      expect(store.isAddingCredits).toBe(false)
+    })
+  })
+})

src/platform/workspace/stores/billingOperationStore.ts

@@ -0,0 +1,244 @@
+import type { ToastMessageOptions } from 'primevue/toast'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const INITIAL_INTERVAL_MS = 1000
+const MAX_INTERVAL_MS = 8000
+const BACKOFF_MULTIPLIER = 1.5
+const TIMEOUT_MS = 120_000 // 2 minutes
+
+type OperationType = 'subscription' | 'topup'
+type OperationStatus = 'pending' | 'succeeded' | 'failed' | 'timeout'
+
+interface BillingOperation {
+  opId: string
+  type: OperationType
+  status: OperationStatus
+  errorMessage: string | null
+  startedAt: number
+}
+
+export const useBillingOperationStore = defineStore('billingOperation', () => {
+  const operations = ref<Map<string, BillingOperation>>(new Map())
+  const timeouts = new Map<string, ReturnType<typeof setTimeout>>()
+  const intervals = new Map<string, number>()
+  const receivedToasts = new Map<string, ToastMessageOptions>()
+
+  const hasPendingOperations = computed(() =>
+    [...operations.value.values()].some((op) => op.status === 'pending')
+  )
+
+  const isSettingUp = computed(() =>
+    [...operations.value.values()].some(
+      (op) => op.status === 'pending' && op.type === 'subscription'
+    )
+  )
+
+  const isAddingCredits = computed(() =>
+    [...operations.value.values()].some(
+      (op) => op.status === 'pending' && op.type === 'topup'
+    )
+  )
+
+  function getOperation(opId: string) {
+    return operations.value.get(opId)
+  }
+
+  function startOperation(opId: string, type: OperationType) {
+    if (operations.value.has(opId)) return
+
+    const operation: BillingOperation = {
+      opId,
+      type,
+      status: 'pending',
+      errorMessage: null,
+      startedAt: Date.now()
+    }
+
+    operations.value = new Map(operations.value).set(opId, operation)
+    intervals.set(opId, INITIAL_INTERVAL_MS)
+
+    // Show immediate feedback toast (persists until operation completes)
+    const messageKey =
+      type === 'subscription'
+        ? 'billingOperation.subscriptionProcessing'
+        : 'billingOperation.topupProcessing'
+
+    const toastMessage: ToastMessageOptions = {
+      severity: 'info',
+      summary: t(messageKey),
+      group: 'billing-operation'
+    }
+    receivedToasts.set(opId, toastMessage)
+    useToastStore().add(toastMessage)
+
+    void poll(opId)
+  }
+
+  async function poll(opId: string) {
+    const operation = operations.value.get(opId)
+    if (!operation || operation.status !== 'pending') return
+
+    if (Date.now() - operation.startedAt > TIMEOUT_MS) {
+      handleTimeout(opId)
+      return
+    }
+
+    try {
+      const response = await workspaceApi.getBillingOpStatus(opId)
+
+      if (response.status === 'succeeded') {
+        await handleSuccess(opId)
+        return
+      }
+
+      if (response.status === 'failed') {
+        handleFailure(opId, response.error_message ?? null)
+        return
+      }
+
+      scheduleNextPoll(opId)
+    } catch {
+      if (Date.now() - operation.startedAt > TIMEOUT_MS) {
+        handleTimeout(opId)
+        return
+      }
+      scheduleNextPoll(opId)
+    }
+  }
+
+  function scheduleNextPoll(opId: string) {
+    const currentInterval = intervals.get(opId) ?? INITIAL_INTERVAL_MS
+    const nextInterval = Math.min(
+      currentInterval * BACKOFF_MULTIPLIER,
+      MAX_INTERVAL_MS
+    )
+    intervals.set(opId, nextInterval)
+
+    const timeoutId = setTimeout(() => void poll(opId), nextInterval)
+    timeouts.set(opId, timeoutId)
+  }
+
+  async function handleSuccess(opId: string) {
+    const operation = operations.value.get(opId)
+    if (!operation) return
+
+    updateOperationStatus(opId, 'succeeded', null)
+    cleanup(opId)
+
+    const billingContext = useBillingContext()
+    await Promise.all([
+      billingContext.fetchStatus(),
+      billingContext.fetchBalance()
+    ])
+
+    // Close any open billing dialogs and show settings
+    const dialogStore = useDialogStore()
+    dialogStore.closeDialog({ key: 'subscription-required' })
+    dialogStore.closeDialog({ key: 'top-up-credits' })
+    useSettingsDialog().show('workspace')
+
+    const toastStore = useToastStore()
+    const messageKey =
+      operation.type === 'subscription'
+        ? 'billingOperation.subscriptionSuccess'
+        : 'billingOperation.topupSuccess'
+
+    toastStore.add({
+      severity: 'success',
+      summary: t(messageKey),
+      life: 5000
+    })
+  }
+
+  function handleFailure(opId: string, errorMessage: string | null) {
+    const operation = operations.value.get(opId)
+    if (!operation) return
+
+    const defaultMessage =
+      operation.type === 'subscription'
+        ? t('billingOperation.subscriptionFailed')
+        : t('billingOperation.topupFailed')
+
+    updateOperationStatus(opId, 'failed', errorMessage ?? defaultMessage)
+    cleanup(opId)
+
+    useToastStore().add({
+      severity: 'error',
+      summary: defaultMessage,
+      detail: errorMessage ?? undefined,
+      life: 5000
+    })
+  }
+
+  function handleTimeout(opId: string) {
+    const operation = operations.value.get(opId)
+    if (!operation) return
+
+    const message =
+      operation.type === 'subscription'
+        ? t('billingOperation.subscriptionTimeout')
+        : t('billingOperation.topupTimeout')
+
+    updateOperationStatus(opId, 'timeout', message)
+    cleanup(opId)
+
+    useToastStore().add({
+      severity: 'error',
+      summary: message,
+      life: 5000
+    })
+  }
+
+  function updateOperationStatus(
+    opId: string,
+    status: OperationStatus,
+    errorMessage: string | null
+  ) {
+    const operation = operations.value.get(opId)
+    if (!operation) return
+
+    const updated = { ...operation, status, errorMessage }
+    operations.value = new Map(operations.value).set(opId, updated)
+  }
+
+  function cleanup(opId: string) {
+    const timeoutId = timeouts.get(opId)
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeouts.delete(opId)
+    }
+    intervals.delete(opId)
+
+    // Remove the "received" toast
+    const receivedToast = receivedToasts.get(opId)
+    if (receivedToast) {
+      useToastStore().remove(receivedToast)
+      receivedToasts.delete(opId)
+    }
+  }
+
+  function clearOperation(opId: string) {
+    cleanup(opId)
+    const newMap = new Map(operations.value)
+    newMap.delete(opId)
+    operations.value = newMap
+  }
+
+  return {
+    operations,
+    hasPendingOperations,
+    isSettingUp,
+    isAddingCredits,
+    getOperation,
+    startOperation,
+    clearOperation
+  }
+})

src/platform/workspace/stores/teamWorkspaceStore.test.ts

@@ -25,7 +25,7 @@ const mockWorkspaceAuthStore = vi.hoisted(() => ({
   clearWorkspaceContext: vi.fn()
 }))
 
-vi.mock('@/stores/workspaceAuthStore', () => ({
+vi.mock('@/platform/workspace/stores/workspaceAuthStore', () => ({
   useWorkspaceAuthStore: () => mockWorkspaceAuthStore
 }))
 

src/platform/workspace/stores/teamWorkspaceStore.ts

@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
 
-import { WORKSPACE_STORAGE_KEYS } from '@/platform/auth/workspace/workspaceConstants'
+import { WORKSPACE_STORAGE_KEYS } from '@/platform/workspace/workspaceConstants'
 import { clearPreservedQuery } from '@/platform/navigation/preservedQueryManager'
 import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
-import { useWorkspaceAuthStore } from '@/stores/workspaceAuthStore'
+import { useWorkspaceAuthStore } from '@/platform/workspace/stores/workspaceAuthStore'
 
 import type {
   ListMembersParams,

src/platform/workspace/stores/useWorkspaceAuth.test.ts

@@ -0,0 +1,672 @@
+import { createPinia, setActivePinia, storeToRefs } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  useWorkspaceAuthStore,
+  WorkspaceAuthError
+} from '@/platform/workspace/stores/workspaceAuthStore'
+
+import { WORKSPACE_STORAGE_KEYS } from '@/platform/workspace/workspaceConstants'
+
+const mockGetIdToken = vi.fn()
+
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: () => ({
+    getIdToken: mockGetIdToken
+  })
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    apiURL: (route: string) => `https://api.example.com/api${route}`
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: true }))
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get teamWorkspacesEnabled() {
+        return mockTeamWorkspacesEnabled.value
+      }
+    }
+  })
+}))
+
+const mockWorkspace = {
+  id: 'workspace-123',
+  name: 'Test Workspace',
+  type: 'team' as const
+}
+
+const mockWorkspaceWithRole = {
+  ...mockWorkspace,
+  role: 'owner' as const
+}
+
+const mockTokenResponse = {
+  token: 'workspace-token-abc',
+  expires_at: new Date(Date.now() + 3600 * 1000).toISOString(),
+  workspace: mockWorkspace,
+  role: 'owner' as const,
+  permissions: ['owner:*']
+}
+
+describe('useWorkspaceAuthStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    sessionStorage.clear()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('initial state', () => {
+    it('has correct initial state values', () => {
+      const store = useWorkspaceAuthStore()
+      const {
+        currentWorkspace,
+        workspaceToken,
+        isAuthenticated,
+        isLoading,
+        error
+      } = storeToRefs(store)
+
+      expect(currentWorkspace.value).toBeNull()
+      expect(workspaceToken.value).toBeNull()
+      expect(isAuthenticated.value).toBe(false)
+      expect(isLoading.value).toBe(false)
+      expect(error.value).toBeNull()
+    })
+  })
+
+  describe('initializeFromSession', () => {
+    it('returns true and populates state when valid session data exists', () => {
+      const futureExpiry = Date.now() + 3600 * 1000
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
+        JSON.stringify(mockWorkspaceWithRole)
+      )
+      sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, 'valid-token')
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.EXPIRES_AT,
+        futureExpiry.toString()
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { currentWorkspace, workspaceToken } = storeToRefs(store)
+
+      const result = store.initializeFromSession()
+
+      expect(result).toBe(true)
+      expect(currentWorkspace.value).toEqual(mockWorkspaceWithRole)
+      expect(workspaceToken.value).toBe('valid-token')
+    })
+
+    it('returns false when sessionStorage is empty', () => {
+      const store = useWorkspaceAuthStore()
+
+      const result = store.initializeFromSession()
+
+      expect(result).toBe(false)
+    })
+
+    it('returns false and clears storage when token is expired', () => {
+      const pastExpiry = Date.now() - 1000
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
+        JSON.stringify(mockWorkspaceWithRole)
+      )
+      sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, 'expired-token')
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.EXPIRES_AT,
+        pastExpiry.toString()
+      )
+
+      const store = useWorkspaceAuthStore()
+
+      const result = store.initializeFromSession()
+
+      expect(result).toBe(false)
+      expect(
+        sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE)
+      ).toBeNull()
+      expect(sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.TOKEN)).toBeNull()
+      expect(
+        sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.EXPIRES_AT)
+      ).toBeNull()
+    })
+
+    it('returns false and clears storage when data is malformed', () => {
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
+        'invalid-json{'
+      )
+      sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, 'some-token')
+      sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.EXPIRES_AT, 'not-a-number')
+
+      const store = useWorkspaceAuthStore()
+
+      const result = store.initializeFromSession()
+
+      expect(result).toBe(false)
+      expect(
+        sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE)
+      ).toBeNull()
+      expect(sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.TOKEN)).toBeNull()
+      expect(
+        sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.EXPIRES_AT)
+      ).toBeNull()
+    })
+
+    it('returns false when partial session data exists (missing token)', () => {
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
+        JSON.stringify(mockWorkspaceWithRole)
+      )
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.EXPIRES_AT,
+        (Date.now() + 3600 * 1000).toString()
+      )
+
+      const store = useWorkspaceAuthStore()
+
+      const result = store.initializeFromSession()
+
+      expect(result).toBe(false)
+    })
+  })
+
+  describe('switchWorkspace', () => {
+    it('successfully exchanges Firebase token for workspace token', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve(mockTokenResponse)
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { currentWorkspace, workspaceToken, isAuthenticated } =
+        storeToRefs(store)
+
+      await store.switchWorkspace('workspace-123')
+
+      expect(currentWorkspace.value).toEqual(mockWorkspaceWithRole)
+      expect(workspaceToken.value).toBe('workspace-token-abc')
+      expect(isAuthenticated.value).toBe(true)
+    })
+
+    it('stores workspace data in sessionStorage', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve(mockTokenResponse)
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+
+      await store.switchWorkspace('workspace-123')
+
+      expect(
+        sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE)
+      ).toBe(JSON.stringify(mockWorkspaceWithRole))
+      expect(sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.TOKEN)).toBe(
+        'workspace-token-abc'
+      )
+      expect(
+        sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.EXPIRES_AT)
+      ).toBeTruthy()
+    })
+
+    it('sets isLoading to true during operation', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      let resolveResponse: (value: unknown) => void
+      const responsePromise = new Promise((resolve) => {
+        resolveResponse = resolve
+      })
+      vi.stubGlobal('fetch', vi.fn().mockReturnValue(responsePromise))
+
+      const store = useWorkspaceAuthStore()
+      const { isLoading } = storeToRefs(store)
+
+      const switchPromise = store.switchWorkspace('workspace-123')
+      expect(isLoading.value).toBe(true)
+
+      resolveResponse!({
+        ok: true,
+        json: () => Promise.resolve(mockTokenResponse)
+      })
+      await switchPromise
+
+      expect(isLoading.value).toBe(false)
+    })
+
+    it('throws WorkspaceAuthError with code NOT_AUTHENTICATED when Firebase token unavailable', async () => {
+      mockGetIdToken.mockResolvedValue(undefined)
+
+      const store = useWorkspaceAuthStore()
+      const { error } = storeToRefs(store)
+
+      await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
+        WorkspaceAuthError
+      )
+
+      expect(error.value).toBeInstanceOf(WorkspaceAuthError)
+      expect((error.value as WorkspaceAuthError).code).toBe('NOT_AUTHENTICATED')
+    })
+
+    it('throws WorkspaceAuthError with code ACCESS_DENIED on 403 response', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: false,
+          status: 403,
+          statusText: 'Forbidden',
+          json: () => Promise.resolve({ message: 'Access denied' })
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { error } = storeToRefs(store)
+
+      await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
+        WorkspaceAuthError
+      )
+
+      expect(error.value).toBeInstanceOf(WorkspaceAuthError)
+      expect((error.value as WorkspaceAuthError).code).toBe('ACCESS_DENIED')
+    })
+
+    it('throws WorkspaceAuthError with code WORKSPACE_NOT_FOUND on 404 response', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: false,
+          status: 404,
+          statusText: 'Not Found',
+          json: () => Promise.resolve({ message: 'Workspace not found' })
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { error } = storeToRefs(store)
+
+      await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
+        WorkspaceAuthError
+      )
+
+      expect(error.value).toBeInstanceOf(WorkspaceAuthError)
+      expect((error.value as WorkspaceAuthError).code).toBe(
+        'WORKSPACE_NOT_FOUND'
+      )
+    })
+
+    it('throws WorkspaceAuthError with code INVALID_FIREBASE_TOKEN on 401 response', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: false,
+          status: 401,
+          statusText: 'Unauthorized',
+          json: () => Promise.resolve({ message: 'Invalid token' })
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { error } = storeToRefs(store)
+
+      await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
+        WorkspaceAuthError
+      )
+
+      expect(error.value).toBeInstanceOf(WorkspaceAuthError)
+      expect((error.value as WorkspaceAuthError).code).toBe(
+        'INVALID_FIREBASE_TOKEN'
+      )
+    })
+
+    it('throws WorkspaceAuthError with code TOKEN_EXCHANGE_FAILED on other errors', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: false,
+          status: 500,
+          statusText: 'Internal Server Error',
+          json: () => Promise.resolve({ message: 'Server error' })
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { error } = storeToRefs(store)
+
+      await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
+        WorkspaceAuthError
+      )
+
+      expect(error.value).toBeInstanceOf(WorkspaceAuthError)
+      expect((error.value as WorkspaceAuthError).code).toBe(
+        'TOKEN_EXCHANGE_FAILED'
+      )
+    })
+
+    it('sends correct request to API', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(mockTokenResponse)
+      })
+      vi.stubGlobal('fetch', mockFetch)
+
+      const store = useWorkspaceAuthStore()
+
+      await store.switchWorkspace('workspace-123')
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        'https://api.example.com/api/auth/token',
+        {
+          method: 'POST',
+          headers: {
+            Authorization: 'Bearer firebase-token-xyz',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ workspace_id: 'workspace-123' })
+        }
+      )
+    })
+  })
+
+  describe('clearWorkspaceContext', () => {
+    it('clears all state refs', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve(mockTokenResponse)
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { currentWorkspace, workspaceToken, error, isAuthenticated } =
+        storeToRefs(store)
+
+      await store.switchWorkspace('workspace-123')
+      expect(isAuthenticated.value).toBe(true)
+
+      store.clearWorkspaceContext()
+
+      expect(currentWorkspace.value).toBeNull()
+      expect(workspaceToken.value).toBeNull()
+      expect(error.value).toBeNull()
+      expect(isAuthenticated.value).toBe(false)
+    })
+
+    it('clears sessionStorage', async () => {
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
+        JSON.stringify(mockWorkspaceWithRole)
+      )
+      sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, 'some-token')
+      sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.EXPIRES_AT, '12345')
+
+      const store = useWorkspaceAuthStore()
+
+      store.clearWorkspaceContext()
+
+      expect(
+        sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE)
+      ).toBeNull()
+      expect(sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.TOKEN)).toBeNull()
+      expect(
+        sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.EXPIRES_AT)
+      ).toBeNull()
+    })
+  })
+
+  describe('getWorkspaceAuthHeader', () => {
+    it('returns null when no workspace token', () => {
+      const store = useWorkspaceAuthStore()
+
+      const header = store.getWorkspaceAuthHeader()
+
+      expect(header).toBeNull()
+    })
+
+    it('returns proper Authorization header when workspace token exists', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve(mockTokenResponse)
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+
+      await store.switchWorkspace('workspace-123')
+      const header = store.getWorkspaceAuthHeader()
+
+      expect(header).toEqual({
+        Authorization: 'Bearer workspace-token-abc'
+      })
+    })
+  })
+
+  describe('token refresh scheduling', () => {
+    it('schedules token refresh 5 minutes before expiry', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      const expiresInMs = 3600 * 1000
+      const tokenResponseWithFutureExpiry = {
+        ...mockTokenResponse,
+        expires_at: new Date(Date.now() + expiresInMs).toISOString()
+      }
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(tokenResponseWithFutureExpiry)
+      })
+      vi.stubGlobal('fetch', mockFetch)
+
+      const store = useWorkspaceAuthStore()
+
+      await store.switchWorkspace('workspace-123')
+
+      expect(mockFetch).toHaveBeenCalledTimes(1)
+
+      const refreshBufferMs = 5 * 60 * 1000
+      const refreshDelay = expiresInMs - refreshBufferMs
+
+      vi.advanceTimersByTime(refreshDelay - 1)
+      expect(mockFetch).toHaveBeenCalledTimes(1)
+
+      await vi.advanceTimersByTimeAsync(1)
+
+      expect(mockFetch).toHaveBeenCalledTimes(2)
+    })
+
+    it('clears context when refresh fails with ACCESS_DENIED', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      const expiresInMs = 3600 * 1000
+      const tokenResponseWithFutureExpiry = {
+        ...mockTokenResponse,
+        expires_at: new Date(Date.now() + expiresInMs).toISOString()
+      }
+      const mockFetch = vi
+        .fn()
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(tokenResponseWithFutureExpiry)
+        })
+        .mockResolvedValueOnce({
+          ok: false,
+          status: 403,
+          statusText: 'Forbidden',
+          json: () => Promise.resolve({ message: 'Access denied' })
+        })
+      vi.stubGlobal('fetch', mockFetch)
+
+      const store = useWorkspaceAuthStore()
+      const { currentWorkspace, workspaceToken } = storeToRefs(store)
+
+      await store.switchWorkspace('workspace-123')
+      expect(workspaceToken.value).toBe('workspace-token-abc')
+
+      const refreshBufferMs = 5 * 60 * 1000
+      const refreshDelay = expiresInMs - refreshBufferMs
+
+      vi.advanceTimersByTime(refreshDelay)
+      await vi.waitFor(() => {
+        expect(currentWorkspace.value).toBeNull()
+      })
+
+      expect(workspaceToken.value).toBeNull()
+    })
+  })
+
+  describe('refreshToken', () => {
+    it('does nothing when no current workspace', async () => {
+      const mockFetch = vi.fn()
+      vi.stubGlobal('fetch', mockFetch)
+
+      const store = useWorkspaceAuthStore()
+
+      await store.refreshToken()
+
+      expect(mockFetch).not.toHaveBeenCalled()
+    })
+
+    it('refreshes token for current workspace', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(mockTokenResponse)
+      })
+      vi.stubGlobal('fetch', mockFetch)
+
+      const store = useWorkspaceAuthStore()
+      const { workspaceToken } = storeToRefs(store)
+
+      await store.switchWorkspace('workspace-123')
+      expect(mockFetch).toHaveBeenCalledTimes(1)
+
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            ...mockTokenResponse,
+            token: 'refreshed-token'
+          })
+      })
+
+      await store.refreshToken()
+      expect(mockFetch).toHaveBeenCalledTimes(2)
+      expect(workspaceToken.value).toBe('refreshed-token')
+    })
+  })
+
+  describe('isAuthenticated computed', () => {
+    it('returns true when both workspace and token are present', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          ok: true,
+          json: () => Promise.resolve(mockTokenResponse)
+        })
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { isAuthenticated } = storeToRefs(store)
+
+      await store.switchWorkspace('workspace-123')
+
+      expect(isAuthenticated.value).toBe(true)
+    })
+
+    it('returns false when workspace is null', () => {
+      const store = useWorkspaceAuthStore()
+      const { isAuthenticated } = storeToRefs(store)
+
+      expect(isAuthenticated.value).toBe(false)
+    })
+
+    it('returns false when currentWorkspace is set but workspaceToken is null', async () => {
+      mockGetIdToken.mockResolvedValue(null)
+
+      const store = useWorkspaceAuthStore()
+      const { currentWorkspace, workspaceToken, isAuthenticated } =
+        storeToRefs(store)
+
+      currentWorkspace.value = mockWorkspaceWithRole
+      workspaceToken.value = null
+
+      expect(isAuthenticated.value).toBe(false)
+    })
+  })
+
+  describe('feature flag disabled', () => {
+    beforeEach(() => {
+      mockTeamWorkspacesEnabled.value = false
+    })
+
+    afterEach(() => {
+      mockTeamWorkspacesEnabled.value = true
+    })
+
+    it('initializeFromSession returns false when flag disabled', () => {
+      const futureExpiry = Date.now() + 3600 * 1000
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
+        JSON.stringify(mockWorkspaceWithRole)
+      )
+      sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, 'valid-token')
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.EXPIRES_AT,
+        futureExpiry.toString()
+      )
+
+      const store = useWorkspaceAuthStore()
+      const { currentWorkspace, workspaceToken } = storeToRefs(store)
+
+      const result = store.initializeFromSession()
+
+      expect(result).toBe(false)
+      expect(currentWorkspace.value).toBeNull()
+      expect(workspaceToken.value).toBeNull()
+    })
+
+    it('switchWorkspace is a no-op when flag disabled', async () => {
+      mockGetIdToken.mockResolvedValue('firebase-token-xyz')
+      const mockFetch = vi.fn()
+      vi.stubGlobal('fetch', mockFetch)
+
+      const store = useWorkspaceAuthStore()
+      const { currentWorkspace, workspaceToken, isLoading } = storeToRefs(store)
+
+      await store.switchWorkspace('workspace-123')
+
+      expect(mockFetch).not.toHaveBeenCalled()
+      expect(currentWorkspace.value).toBeNull()
+      expect(workspaceToken.value).toBeNull()
+      expect(isLoading.value).toBe(false)
+    })
+  })
+})

src/platform/workspace/stores/workspaceAuthStore.ts

@@ -0,0 +1,375 @@
+import { defineStore } from 'pinia'
+import { computed, ref, shallowRef } from 'vue'
+import { z } from 'zod'
+import { fromZodError } from 'zod-validation-error'
+
+import { t } from '@/i18n'
+import {
+  TOKEN_REFRESH_BUFFER_MS,
+  WORKSPACE_STORAGE_KEYS
+} from '@/platform/workspace/workspaceConstants'
+import { api } from '@/scripts/api'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import type { AuthHeader } from '@/types/authTypes'
+import type { WorkspaceWithRole } from '@/platform/workspace/workspaceTypes'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+
+const WorkspaceWithRoleSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  type: z.enum(['personal', 'team']),
+  role: z.enum(['owner', 'member'])
+})
+
+const WorkspaceTokenResponseSchema = z.object({
+  token: z.string(),
+  expires_at: z.string(),
+  workspace: z.object({
+    id: z.string(),
+    name: z.string(),
+    type: z.enum(['personal', 'team'])
+  }),
+  role: z.enum(['owner', 'member']),
+  permissions: z.array(z.string())
+})
+
+export class WorkspaceAuthError extends Error {
+  constructor(
+    message: string,
+    public readonly code?: string
+  ) {
+    super(message)
+    this.name = 'WorkspaceAuthError'
+  }
+}
+
+export const useWorkspaceAuthStore = defineStore('workspaceAuth', () => {
+  const { flags } = useFeatureFlags()
+
+  // State
+  const currentWorkspace = shallowRef<WorkspaceWithRole | null>(null)
+  const workspaceToken = ref<string | null>(null)
+  const isLoading = ref(false)
+  const error = ref<Error | null>(null)
+
+  // Timer state
+  let refreshTimerId: ReturnType<typeof setTimeout> | null = null
+
+  // Request ID to prevent stale refresh operations from overwriting newer workspace contexts
+  let refreshRequestId = 0
+
+  // Getters
+  const isAuthenticated = computed(
+    () => currentWorkspace.value !== null && workspaceToken.value !== null
+  )
+
+  // Private helpers
+  function stopRefreshTimer(): void {
+    if (refreshTimerId !== null) {
+      clearTimeout(refreshTimerId)
+      refreshTimerId = null
+    }
+  }
+
+  function scheduleTokenRefresh(expiresAt: number): void {
+    stopRefreshTimer()
+    const now = Date.now()
+    const refreshAt = expiresAt - TOKEN_REFRESH_BUFFER_MS
+    const delay = Math.max(0, refreshAt - now)
+
+    refreshTimerId = setTimeout(() => {
+      void refreshToken()
+    }, delay)
+  }
+
+  function persistToSession(
+    workspace: WorkspaceWithRole,
+    token: string,
+    expiresAt: number
+  ): void {
+    try {
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
+        JSON.stringify(workspace)
+      )
+      sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, token)
+      sessionStorage.setItem(
+        WORKSPACE_STORAGE_KEYS.EXPIRES_AT,
+        expiresAt.toString()
+      )
+    } catch {
+      console.warn('Failed to persist workspace context to sessionStorage')
+    }
+  }
+
+  function clearSessionStorage(): void {
+    try {
+      sessionStorage.removeItem(WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE)
+      sessionStorage.removeItem(WORKSPACE_STORAGE_KEYS.TOKEN)
+      sessionStorage.removeItem(WORKSPACE_STORAGE_KEYS.EXPIRES_AT)
+    } catch {
+      console.warn('Failed to clear workspace context from sessionStorage')
+    }
+  }
+
+  // Actions
+  function init(): void {
+    initializeFromSession()
+  }
+
+  function destroy(): void {
+    stopRefreshTimer()
+  }
+
+  function initializeFromSession(): boolean {
+    if (!flags.teamWorkspacesEnabled) {
+      return false
+    }
+
+    try {
+      const workspaceJson = sessionStorage.getItem(
+        WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE
+      )
+      const token = sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.TOKEN)
+      const expiresAtStr = sessionStorage.getItem(
+        WORKSPACE_STORAGE_KEYS.EXPIRES_AT
+      )
+
+      if (!workspaceJson || !token || !expiresAtStr) {
+        return false
+      }
+
+      const expiresAt = parseInt(expiresAtStr, 10)
+      if (isNaN(expiresAt) || expiresAt <= Date.now()) {
+        clearSessionStorage()
+        return false
+      }
+
+      const parsedWorkspace = JSON.parse(workspaceJson)
+      const parseResult = WorkspaceWithRoleSchema.safeParse(parsedWorkspace)
+
+      if (!parseResult.success) {
+        clearSessionStorage()
+        return false
+      }
+
+      currentWorkspace.value = parseResult.data
+      workspaceToken.value = token
+      error.value = null
+
+      scheduleTokenRefresh(expiresAt)
+      return true
+    } catch {
+      clearSessionStorage()
+      return false
+    }
+  }
+
+  async function switchWorkspace(workspaceId: string): Promise<void> {
+    if (!flags.teamWorkspacesEnabled) {
+      return
+    }
+
+    // Only increment request ID when switching to a different workspace
+    // This invalidates stale refresh operations for the old workspace
+    // but allows refresh operations for the same workspace to complete
+    if (currentWorkspace.value?.id !== workspaceId) {
+      refreshRequestId++
+    }
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const firebaseAuthStore = useFirebaseAuthStore()
+      const firebaseToken = await firebaseAuthStore.getIdToken()
+      if (!firebaseToken) {
+        throw new WorkspaceAuthError(
+          t('workspaceAuth.errors.notAuthenticated'),
+          'NOT_AUTHENTICATED'
+        )
+      }
+
+      const response = await fetch(api.apiURL('/auth/token'), {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${firebaseToken}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ workspace_id: workspaceId })
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        const message = errorData.message || response.statusText
+
+        if (response.status === 401) {
+          throw new WorkspaceAuthError(
+            t('workspaceAuth.errors.invalidFirebaseToken'),
+            'INVALID_FIREBASE_TOKEN'
+          )
+        }
+        if (response.status === 403) {
+          throw new WorkspaceAuthError(
+            t('workspaceAuth.errors.accessDenied'),
+            'ACCESS_DENIED'
+          )
+        }
+        if (response.status === 404) {
+          throw new WorkspaceAuthError(
+            t('workspaceAuth.errors.workspaceNotFound'),
+            'WORKSPACE_NOT_FOUND'
+          )
+        }
+
+        throw new WorkspaceAuthError(
+          t('workspaceAuth.errors.tokenExchangeFailed', { error: message }),
+          'TOKEN_EXCHANGE_FAILED'
+        )
+      }
+
+      const rawData = await response.json()
+      const parseResult = WorkspaceTokenResponseSchema.safeParse(rawData)
+
+      if (!parseResult.success) {
+        throw new WorkspaceAuthError(
+          t('workspaceAuth.errors.tokenExchangeFailed', {
+            error: fromZodError(parseResult.error).message
+          }),
+          'TOKEN_EXCHANGE_FAILED'
+        )
+      }
+
+      const data = parseResult.data
+      const expiresAt = new Date(data.expires_at).getTime()
+
+      if (isNaN(expiresAt)) {
+        throw new WorkspaceAuthError(
+          t('workspaceAuth.errors.tokenExchangeFailed', {
+            error: 'Invalid expiry timestamp'
+          }),
+          'TOKEN_EXCHANGE_FAILED'
+        )
+      }
+
+      const workspaceWithRole: WorkspaceWithRole = {
+        ...data.workspace,
+        role: data.role
+      }
+
+      currentWorkspace.value = workspaceWithRole
+      workspaceToken.value = data.token
+
+      persistToSession(workspaceWithRole, data.token, expiresAt)
+      scheduleTokenRefresh(expiresAt)
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err))
+      throw error.value
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function refreshToken(): Promise<void> {
+    if (!currentWorkspace.value) {
+      return
+    }
+
+    const workspaceId = currentWorkspace.value.id
+    // Capture the current request ID to detect if workspace context changed during refresh
+    const capturedRequestId = refreshRequestId
+    const maxRetries = 3
+    const baseDelayMs = 1000
+
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      // Check if workspace context changed since refresh started (user switched workspaces)
+      if (capturedRequestId !== refreshRequestId) {
+        console.warn(
+          'Aborting stale token refresh: workspace context changed during refresh'
+        )
+        return
+      }
+
+      try {
+        await switchWorkspace(workspaceId)
+        return
+      } catch (err) {
+        const isAuthError = err instanceof WorkspaceAuthError
+
+        const isPermanentError =
+          isAuthError &&
+          (err.code === 'ACCESS_DENIED' ||
+            err.code === 'WORKSPACE_NOT_FOUND' ||
+            err.code === 'INVALID_FIREBASE_TOKEN' ||
+            err.code === 'NOT_AUTHENTICATED')
+
+        if (isPermanentError) {
+          // Only clear context if this refresh is still for the current workspace
+          if (capturedRequestId === refreshRequestId) {
+            console.error('Workspace access revoked or auth invalid:', err)
+            clearWorkspaceContext()
+          }
+          return
+        }
+
+        const isTransientError =
+          isAuthError && err.code === 'TOKEN_EXCHANGE_FAILED'
+
+        if (isTransientError && attempt < maxRetries) {
+          const delay = baseDelayMs * Math.pow(2, attempt)
+          console.warn(
+            `Token refresh failed (attempt ${attempt + 1}/${maxRetries + 1}), retrying in ${delay}ms:`,
+            err
+          )
+          await new Promise((resolve) => setTimeout(resolve, delay))
+          continue
+        }
+
+        // Only clear context if this refresh is still for the current workspace
+        if (capturedRequestId === refreshRequestId) {
+          console.error('Failed to refresh workspace token after retries:', err)
+          clearWorkspaceContext()
+        }
+      }
+    }
+  }
+
+  function getWorkspaceAuthHeader(): AuthHeader | null {
+    if (!workspaceToken.value) {
+      return null
+    }
+    return {
+      Authorization: `Bearer ${workspaceToken.value}`
+    }
+  }
+
+  function clearWorkspaceContext(): void {
+    // Increment request ID to invalidate any in-flight stale refresh operations
+    refreshRequestId++
+    stopRefreshTimer()
+    currentWorkspace.value = null
+    workspaceToken.value = null
+    error.value = null
+    clearSessionStorage()
+  }
+
+  return {
+    // State
+    currentWorkspace,
+    workspaceToken,
+    isLoading,
+    error,
+
+    // Getters
+    isAuthenticated,
+
+    // Actions
+    init,
+    destroy,
+    initializeFromSession,
+    switchWorkspace,
+    refreshToken,
+    getWorkspaceAuthHeader,
+    clearWorkspaceContext
+  }
+})

src/platform/workspace/workspaceConstants.ts

@@ -0,0 +1,10 @@
+export const WORKSPACE_STORAGE_KEYS = {
+  // sessionStorage keys (cleared on browser close)
+  CURRENT_WORKSPACE: 'Comfy.Workspace.Current',
+  TOKEN: 'Comfy.Workspace.Token',
+  EXPIRES_AT: 'Comfy.Workspace.ExpiresAt',
+  // localStorage key (persists across browser sessions)
+  LAST_WORKSPACE_ID: 'Comfy.Workspace.LastWorkspaceId'
+} as const
+
+export const TOKEN_REFRESH_BUFFER_MS = 5 * 60 * 1000

src/platform/workspace/workspaceTypes.ts

@@ -0,0 +1,6 @@
+export interface WorkspaceWithRole {
+  id: string
+  name: string
+  type: 'personal' | 'team'
+  role: 'owner' | 'member'
+}