fix: simplify and deduplicate output selection counting

## Summary
useI18n() requires an active Vue component instance via
getCurrentInstance(), which returns null after an await in the setup
context. Since terminal tabs are loaded via dynamic import (await),
useI18n() was silently failing, preventing terminal tab registration.

Replace useI18n() calls with static English strings for the title field,
which is only used in command labels. The titleKey field already handles
reactive i18n in the UI via BottomPanel.vue's getTabDisplayTitle().

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/8624

## Screenshots (if applicable)
before


https://github.com/user-attachments/assets/44e0118e-5566-4299-84cf-72b63d85521a


after


https://github.com/user-attachments/assets/3e99fb81-7a81-4065-a889-3ab5a393d8cf

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8717-fix-terminal-tabs-fail-to-register-due-to-useI18n-after-await-3006d73d3650810fb011c08862434bd5)
by [Unito](https://www.unito.io)

.claude/skills/writing-playwright-tests/SKILL.md

@@ -0,0 +1,200 @@
+---
+name: writing-playwright-tests
+description: 'Writes Playwright e2e tests for ComfyUI_frontend. Use when creating, modifying, or debugging browser tests. Triggers on: playwright, e2e test, browser test, spec file.'
+---
+
+# Writing Playwright Tests for ComfyUI_frontend
+
+## Golden Rules
+
+1. **ALWAYS look at existing tests first.** Search `browser_tests/tests/` for similar patterns before writing new tests.
+
+2. **ALWAYS read the fixture code.** The APIs are in `browser_tests/fixtures/` - read them directly instead of guessing.
+
+3. **Use premade JSON workflow assets** instead of building workflows programmatically.
+   - Assets live in `browser_tests/assets/`
+   - Load with `await comfyPage.workflow.loadWorkflow('feature/my_workflow')`
+   - Create new assets by starting with `browser_tests/assets/default.json` and manually editing the JSON to match your desired graph state
+
+## Vue Nodes vs LiteGraph: Decision Guide
+
+Choose based on **what you're testing**, not personal preference:
+
+| Testing...                                     | Use                              | Why                                      |
+| ---------------------------------------------- | -------------------------------- | ---------------------------------------- |
+| Vue-rendered node UI, DOM widgets, CSS states  | `comfyPage.vueNodes.*`           | Nodes are DOM elements, use locators     |
+| Canvas interactions, connections, legacy nodes | `comfyPage.nodeOps.*`            | Canvas-based, use coordinates/references |
+| Both in same test                              | Pick primary, minimize switching | Avoid confusion                          |
+
+**Vue Nodes requires explicit opt-in:**
+
+```typescript
+await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+await comfyPage.vueNodes.waitForNodes()
+```
+
+**Vue Node state uses CSS classes:**
+
+```typescript
+const BYPASS_CLASS = /before:bg-bypass\/60/
+await expect(node).toHaveClass(BYPASS_CLASS)
+```
+
+## Common Issues
+
+These are frequent causes of flaky tests - check them first, but investigate if they don't apply:
+
+| Symptom                            | Common Cause              | Typical Fix                                                                            |
+| ---------------------------------- | ------------------------- | -------------------------------------------------------------------------------------- |
+| Test passes locally, fails in CI   | Missing nextFrame()       | Add `await comfyPage.nextFrame()` after canvas ops (not needed after `loadWorkflow()`) |
+| Keyboard shortcuts don't work      | Missing focus             | Add `await comfyPage.canvas.click()` first                                             |
+| Double-click doesn't trigger       | Timing too fast           | Add `{ delay: 5 }` option                                                              |
+| Elements end up in wrong position  | Drag animation incomplete | Use `{ steps: 10 }` not `{ steps: 1 }`                                                 |
+| Widget value wrong after drag-drop | Upload incomplete         | Add `{ waitForUpload: true }`                                                          |
+| Test fails when run with others    | Test pollution            | Add `afterEach` with `resetView()`                                                     |
+| Local screenshots don't match CI   | Platform differences      | Screenshots are Linux-only, use PR label                                               |
+
+## Test Tags
+
+Add appropriate tags to every test:
+
+| Tag           | When to Use                               |
+| ------------- | ----------------------------------------- |
+| `@smoke`      | Quick essential tests                     |
+| `@slow`       | Tests > 10 seconds                        |
+| `@screenshot` | Visual regression tests                   |
+| `@canvas`     | Canvas interactions                       |
+| `@node`       | Node-related                              |
+| `@widget`     | Widget-related                            |
+| `@mobile`     | Mobile viewport (runs on Pixel 5 project) |
+| `@2x`         | HiDPI tests (runs on 2x scale project)    |
+
+```typescript
+test.describe('Feature', { tag: ['@screenshot', '@canvas'] }, () => {
+```
+
+## Retry Patterns
+
+**Never use `waitForTimeout`** - it's always wrong.
+
+| Pattern                  | Use Case                                             |
+| ------------------------ | ---------------------------------------------------- |
+| Auto-retrying assertions | `toBeVisible()`, `toHaveText()`, etc. (prefer these) |
+| `expect.poll()`          | Single value polling                                 |
+| `expect().toPass()`      | Multiple assertions that must all pass               |
+
+```typescript
+// Prefer auto-retrying assertions when possible
+await expect(node).toBeVisible()
+
+// Single value polling
+await expect.poll(() => widget.getValue(), { timeout: 2000 }).toBe(100)
+
+// Multiple conditions
+await expect(async () => {
+  expect(await node1.getValue()).toBe('foo')
+  expect(await node2.getValue()).toBe('bar')
+}).toPass({ timeout: 2000 })
+```
+
+## Screenshot Baselines
+
+- **Screenshots are Linux-only.** Don't commit local screenshots.
+- **To update baselines:** Add PR label `New Browser Test Expectations`
+- **Mask dynamic content:**
+  ```typescript
+  await expect(comfyPage.canvas).toHaveScreenshot('page.png', {
+    mask: [page.locator('.timestamp')]
+  })
+  ```
+
+## CI Debugging
+
+1. Download artifacts from failed CI run
+2. Extract and view trace: `npx playwright show-trace trace.zip`
+3. CI deploys HTML report to Cloudflare Pages (link in PR comment)
+4. Reproduce CI: `CI=true pnpm test:browser`
+5. Local runs: `pnpm test:browser:local`
+
+## Anti-Patterns
+
+Avoid these common mistakes:
+
+1. **Arbitrary waits** - Use retrying assertions instead
+
+   ```typescript
+   // ❌ await page.waitForTimeout(500)
+   // ✅ await expect(element).toBeVisible()
+   ```
+
+2. **Implementation-tied selectors** - Use test IDs or semantic selectors
+
+   ```typescript
+   // ❌ page.locator('div.container > button.btn-primary')
+   // ✅ page.getByTestId('submit-button')
+   ```
+
+3. **Missing nextFrame after canvas ops** - Canvas needs sync time
+
+   ```typescript
+   await node.drag({ x: 50, y: 50 })
+   await comfyPage.nextFrame() // Required
+   ```
+
+4. **Shared state between tests** - Tests must be independent
+   ```typescript
+   // ❌ let sharedData  // Outside test
+   // ✅ Define state inside each test
+   ```
+
+## Quick Start Template
+
+```typescript
+// Path depends on test file location - adjust '../' segments accordingly
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+test.describe('FeatureName', { tag: ['@canvas'] }, () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.canvasOps.resetView()
+  })
+
+  test('should do something', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow('myWorkflow')
+
+    const node = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    // ... test logic
+
+    await expect(comfyPage.canvas).toHaveScreenshot('expected.png')
+  })
+})
+```
+
+## Finding Patterns
+
+```bash
+# Find similar tests
+grep -r "KSampler" browser_tests/tests/
+
+# Find usage of a fixture method
+grep -r "loadWorkflow" browser_tests/tests/
+
+# Find tests with specific tag
+grep -r '@screenshot' browser_tests/tests/
+```
+
+## Key Files to Read
+
+| Purpose           | Path                                       |
+| ----------------- | ------------------------------------------ |
+| Main fixture      | `browser_tests/fixtures/ComfyPage.ts`      |
+| Helper classes    | `browser_tests/fixtures/helpers/`          |
+| Component objects | `browser_tests/fixtures/components/`       |
+| Test selectors    | `browser_tests/fixtures/selectors.ts`      |
+| Vue Node helpers  | `browser_tests/fixtures/VueNodeHelpers.ts` |
+| Test assets       | `browser_tests/assets/`                    |
+| Existing tests    | `browser_tests/tests/`                     |
+
+**Read the fixture code directly** - it's the source of truth for available methods.

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

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

.gitignore

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

.oxlintrc.json

@@ -60,11 +60,6 @@
           {
             "name": "primevue/sidebar",
             "message": "Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from 'primevue/drawer'"
-          },
-          {
-            "name": "@/i18n--to-enable",
-            "importNames": ["st", "t", "te", "d"],
-            "message": "Don't import `@/i18n` directly, prefer `useI18n()`"
           }
         ]
       }

browser_tests/AGENTS.md

@@ -4,11 +4,40 @@ See `@docs/guidance/playwright.md` for Playwright best practices (auto-loaded fo
 
 ## Directory Structure
 
-- `assets/` - Test data (JSON workflows, fixtures)
-- Tests use premade JSON workflows to load desired graph state
+```text
+browser_tests/
+├── assets/           - Test data (JSON workflows, images)
+├── fixtures/
+│   ├── ComfyPage.ts      - Main fixture (delegates to helpers)
+│   ├── ComfyMouse.ts     - Mouse interaction helper
+│   ├── VueNodeHelpers.ts - Vue Nodes 2.0 helpers
+│   ├── selectors.ts      - Centralized TestIds
+│   ├── components/       - Page object components
+│   │   ├── ContextMenu.ts
+│   │   ├── SettingDialog.ts
+│   │   ├── SidebarTab.ts
+│   │   └── Topbar.ts
+│   ├── helpers/          - Focused helper classes
+│   │   ├── CanvasHelper.ts
+│   │   ├── CommandHelper.ts
+│   │   ├── KeyboardHelper.ts
+│   │   ├── NodeOperationsHelper.ts
+│   │   ├── SettingsHelper.ts
+│   │   ├── WorkflowHelper.ts
+│   │   └── ...
+│   └── utils/            - Utility functions
+├── helpers/          - Test-specific utilities
+└── tests/            - Test files (*.spec.ts)
+```
 
 ## After Making Changes
 
 - Run `pnpm typecheck:browser` after modifying TypeScript files in this directory
 - Run `pnpm exec eslint browser_tests/path/to/file.ts` to lint specific files
 - Run `pnpm exec oxlint browser_tests/path/to/file.ts` to check with oxlint
+
+## Skill Documentation
+
+A Playwright test-writing skill exists at `.claude/skills/writing-playwright-tests/SKILL.md`.
+
+The skill documents **meta-level guidance only** (gotchas, anti-patterns, decision guides). It does **not** duplicate fixture APIs - agents should read the fixture code directly in `browser_tests/fixtures/`.

browser_tests/tests/nodeGhostPlacement.spec.ts

@@ -0,0 +1,162 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+type ComfyPage = Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
+
+async function setVueMode(comfyPage: ComfyPage, enabled: boolean) {
+  await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', enabled)
+  if (enabled) {
+    await comfyPage.vueNodes.waitForNodes()
+  }
+}
+
+async function addGhostAtCenter(comfyPage: ComfyPage) {
+  await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+  await comfyPage.nextFrame()
+
+  const viewport = comfyPage.page.viewportSize()!
+  const centerX = Math.round(viewport.width / 2)
+  const centerY = Math.round(viewport.height / 2)
+
+  await comfyPage.page.mouse.move(centerX, centerY)
+  await comfyPage.nextFrame()
+
+  const nodeId = await comfyPage.page.evaluate(
+    ([clientX, clientY]) => {
+      const node = window.LiteGraph!.createNode('VAEDecode')!
+      const event = new MouseEvent('click', { clientX, clientY })
+      window.app!.graph.add(node, { ghost: true, dragEvent: event })
+      return node.id
+    },
+    [centerX, centerY] as const
+  )
+  await comfyPage.nextFrame()
+
+  return { nodeId, centerX, centerY }
+}
+
+function getNodeById(comfyPage: ComfyPage, nodeId: number | string) {
+  return comfyPage.page.evaluate((id) => {
+    const node = window.app!.graph.getNodeById(id)
+    if (!node) return null
+    return { ghost: !!node.flags.ghost }
+  }, nodeId)
+}
+
+for (const mode of ['litegraph', 'vue'] as const) {
+  test.describe(`Ghost node placement (${mode} mode)`, () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await setVueMode(comfyPage, mode === 'vue')
+    })
+
+    test('positions ghost node at cursor', async ({ comfyPage }) => {
+      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+      await comfyPage.nextFrame()
+
+      const viewport = comfyPage.page.viewportSize()!
+      const centerX = Math.round(viewport.width / 2)
+      const centerY = Math.round(viewport.height / 2)
+
+      await comfyPage.page.mouse.move(centerX, centerY)
+      await comfyPage.nextFrame()
+
+      const result = await comfyPage.page.evaluate(
+        ([clientX, clientY]) => {
+          const node = window.LiteGraph!.createNode('VAEDecode')!
+          const event = new MouseEvent('click', { clientX, clientY })
+          window.app!.graph.add(node, { ghost: true, dragEvent: event })
+
+          const canvas = window.app!.canvas
+          const rect = canvas.canvas.getBoundingClientRect()
+          const cursorCanvasX =
+            (clientX - rect.left) / canvas.ds.scale - canvas.ds.offset[0]
+          const cursorCanvasY =
+            (clientY - rect.top) / canvas.ds.scale - canvas.ds.offset[1]
+
+          return {
+            diffX: node.pos[0] + node.size[0] / 2 - cursorCanvasX,
+            diffY: node.pos[1] - 10 - cursorCanvasY
+          }
+        },
+        [centerX, centerY] as const
+      )
+      await comfyPage.nextFrame()
+
+      expect(Math.abs(result.diffX)).toBeLessThan(5)
+      expect(Math.abs(result.diffY)).toBeLessThan(5)
+    })
+
+    test('left-click confirms ghost placement', async ({ comfyPage }) => {
+      const { nodeId, centerX, centerY } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.mouse.click(centerX, centerY)
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).not.toBeNull()
+      expect(after!.ghost).toBe(false)
+    })
+
+    test('Escape cancels ghost placement', async ({ comfyPage }) => {
+      const { nodeId } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).toBeNull()
+    })
+
+    test('Delete cancels ghost placement', async ({ comfyPage }) => {
+      const { nodeId } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.keyboard.press('Delete')
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).toBeNull()
+    })
+
+    test('Backspace cancels ghost placement', async ({ comfyPage }) => {
+      const { nodeId } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.keyboard.press('Backspace')
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).toBeNull()
+    })
+
+    test('right-click cancels ghost placement', async ({ comfyPage }) => {
+      const { nodeId, centerX, centerY } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.mouse.click(centerX, centerY, { button: 'right' })
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).toBeNull()
+    })
+  })
+}

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -31,7 +31,12 @@ test.describe('Vue Integer Widget', () => {
     await expect(seedWidget).toBeVisible()
 
     // Delete the node that is linked to the slot (freeing up the widget)
-    await comfyPage.vueNodes.getNodeByTitle('Int').click()
+    // Click on the header to select the node (clicking center may land on
+    // the widget area where pointerdown.stop prevents node selection)
+    await comfyPage.vueNodes
+      .getNodeByTitle('Int')
+      .locator('.lg-node-header')
+      .click()
     await comfyPage.vueNodes.deleteSelected()
 
     // Test widget works when unlinked

eslint.config.ts

@@ -279,5 +279,46 @@ export default defineConfig([
       'import-x/no-duplicates': 'off',
       'import-x/consistent-type-specifier-style': 'off'
     }
+  },
+
+  // i18n import enforcement
+  // Vue components must use the useI18n() composable, not the global t/d/st/te
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '@/i18n',
+              importNames: ['t', 'd', 'te'],
+              message:
+                "In Vue components, use `const { t } = useI18n()` instead of importing from '@/i18n'."
+            }
+          ]
+        }
+      ]
+    }
+  },
+  // Non-composable .ts files must use the global t/d/te, not useI18n()
+  {
+    files: ['**/*.ts'],
+    ignores: ['**/use[A-Z]*.ts', '**/*.test.ts', 'src/i18n.ts'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'vue-i18n',
+              importNames: ['useI18n'],
+              message:
+                "useI18n() requires Vue setup context. Use `import { t } from '@/i18n'` instead."
+            }
+          ]
+        }
+      ]
+    }
   }
 ])

global.d.ts

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

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

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

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

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

src/components/dialog/content/TopUpCreditsDialogContentWorkspace.vue

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

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

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

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

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

src/components/dialog/header/SettingDialogHeader.vue

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

src/components/graph/GraphCanvas.vue

@@ -76,6 +76,13 @@
     />
   </TransformPane>
 
+  <LinkOverlayCanvas
+    v-if="shouldRenderVueNodes && comfyApp.canvas && comfyAppReady"
+    :canvas="comfyApp.canvas"
+    @ready="onLinkOverlayReady"
+    @dispose="onLinkOverlayDispose"
+  />
+
   <!-- Selection rectangle overlay - rendered in DOM layer to appear above DOM widgets -->
   <SelectionRectangle v-if="comfyAppReady" />
 
@@ -104,6 +111,7 @@ import {
   watch,
   watchEffect
 } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import TopMenuSection from '@/components/TopMenuSection.vue'
@@ -111,6 +119,7 @@ import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
+import LinkOverlayCanvas from '@/components/graph/LinkOverlayCanvas.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
@@ -129,7 +138,6 @@ import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import { t } from '@/i18n'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
@@ -167,6 +175,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useInviteUrlLoader } from '@/platform/workspace/composables/useInviteUrlLoader'
 
+const { t } = useI18n()
 const emit = defineEmits<{
   ready: []
 }>()
@@ -241,6 +250,18 @@ const allNodes = computed((): VueNodeData[] =>
   Array.from(vueNodeLifecycle.nodeManager.value?.vueNodeData?.values() ?? [])
 )
 
+function onLinkOverlayReady(el: HTMLCanvasElement) {
+  if (!canvasStore.canvas) return
+  canvasStore.canvas.overlayCanvas = el
+  canvasStore.canvas.overlayCtx = el.getContext('2d')
+}
+
+function onLinkOverlayDispose() {
+  if (!canvasStore.canvas) return
+  canvasStore.canvas.overlayCanvas = null
+  canvasStore.canvas.overlayCtx = null
+}
+
 watchEffect(() => {
   LiteGraph.nodeOpacity = settingStore.get('Comfy.Node.Opacity')
 })

src/components/graph/LinkOverlayCanvas.vue

@@ -0,0 +1,43 @@
+<template>
+  <canvas
+    ref="canvasRef"
+    class="pointer-events-none absolute inset-0 size-full"
+  />
+</template>
+
+<script setup lang="ts">
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+
+import { useRafFn } from '@vueuse/core'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const { canvas } = defineProps<{
+  canvas: LGraphCanvas
+}>()
+
+const emit = defineEmits<{
+  ready: [canvas: HTMLCanvasElement]
+  dispose: []
+}>()
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+
+useRafFn(() => {
+  const el = canvasRef.value
+  const mainCanvas = canvas.canvas
+  if (!el || !mainCanvas) return
+
+  if (el.width !== mainCanvas.width || el.height !== mainCanvas.height) {
+    el.width = mainCanvas.width
+    el.height = mainCanvas.height
+  }
+})
+
+onMounted(() => {
+  if (canvasRef.value) emit('ready', canvasRef.value)
+})
+
+onBeforeUnmount(() => {
+  emit('dispose')
+})
+</script>

src/components/graph/NodeTooltip.vue

@@ -61,7 +61,7 @@ async function showTooltip(tooltip: string | null | undefined) {
 function onIdle() {
   const { canvas } = comfyApp
   const node = canvas?.node_over
-  if (!node) return
+  if (!node || node.flags?.ghost) return
 
   const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 }
   const nodeDef = nodeDefStore.nodeDefsByName[node.type ?? '']

src/components/load3d/Load3dViewerContent.vue

@@ -94,6 +94,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 import CameraControls from '@/components/load3d/controls/viewer/ViewerCameraControls.vue'
@@ -104,11 +105,11 @@ import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneContro
 import Button from '@/components/ui/button/Button.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
-import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
+const { t } = useI18n()
 const props = defineProps<{
   node?: LGraphNode
   modelUrl?: string

src/components/load3d/controls/ModelControls.vue

@@ -94,15 +94,16 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import type {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
 
+const { t } = useI18n()
 const {
   hideMaterialMode = false,
   isPlyModel = false,

src/components/load3d/controls/ViewerControls.vue

@@ -19,13 +19,15 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
+const { t } = useI18n()
 const { node } = defineProps<{
   node: LGraphNode
 }>()

src/components/load3d/controls/viewer/ViewerCameraControls.vue

@@ -30,10 +30,11 @@
 import Select from 'primevue/select'
 import Slider from 'primevue/slider'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { CameraType } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
 
+const { t } = useI18n()
 const cameras = [
   { title: t('load3d.cameraType.perspective'), value: 'perspective' },
   { title: t('load3d.cameraType.orthographic'), value: 'orthographic' }

src/components/load3d/controls/viewer/ViewerModelControls.vue

@@ -25,13 +25,14 @@
 <script setup lang="ts">
 import Select from 'primevue/select'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
 
+const { t } = useI18n()
 const { hideMaterialMode = false, isPlyModel = false } = defineProps<{
   hideMaterialMode?: boolean
   isPlyModel?: boolean

src/components/maskeditor/BrushSettingsPanel.vue

@@ -160,14 +160,15 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { BrushShape } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import SliderControl from './controls/SliderControl.vue'
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 
 const colorInputRef = ref<HTMLInputElement>()

src/components/maskeditor/ColorSelectSettingsPanel.vue

@@ -61,14 +61,16 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 import { ColorComparisonMethod } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
 import DropdownControl from './controls/DropdownControl.vue'
 import SliderControl from './controls/SliderControl.vue'
 import ToggleControl from './controls/ToggleControl.vue'
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 
 const methodOptions = Object.values(ColorComparisonMethod)

src/components/maskeditor/ImageLayerSettingsPanel.vue

@@ -131,12 +131,12 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useCanvasManager } from '@/composables/maskeditor/useCanvasManager'
 import type { useToolManager } from '@/composables/maskeditor/useToolManager'
 import type { ImageLayer } from '@/extensions/core/maskeditor/types'
 import { MaskBlendMode, Tools } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
 import SliderControl from './controls/SliderControl.vue'
@@ -145,6 +145,7 @@ const { toolManager } = defineProps<{
   toolManager?: ReturnType<typeof useToolManager>
 }>()
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 const canvasManager = useCanvasManager()
 

src/components/maskeditor/PaintBucketSettingsPanel.vue

@@ -27,11 +27,13 @@
 </template>
 
 <script setup lang="ts">
-import { t } from '@/i18n'
+import { useI18n } from 'vue-i18n'
+
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
 import SliderControl from './controls/SliderControl.vue'
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 
 const onToleranceChange = (value: number) => {

src/components/maskeditor/ToolPanel.vue

@@ -31,18 +31,19 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { useToolManager } from '@/composables/maskeditor/useToolManager'
 import { iconsHtml } from '@/extensions/core/maskeditor/constants'
 import type { Tools } from '@/extensions/core/maskeditor/types'
 import { allTools } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
 const { toolManager } = defineProps<{
   toolManager: ReturnType<typeof useToolManager>
 }>()
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 
 const onToolSelect = (tool: Tools) => {

src/components/maskeditor/dialog/TopBarHeader.vue

@@ -128,15 +128,16 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useCanvasTools } from '@/composables/maskeditor/useCanvasTools'
 import { useCanvasTransform } from '@/composables/maskeditor/useCanvasTransform'
 import { useMaskEditorSaver } from '@/composables/maskeditor/useMaskEditorSaver'
-import { t } from '@/i18n'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 const dialogStore = useDialogStore()
 const canvasTools = useCanvasTools()

src/components/queue/QueueInlineProgressSummary.vue

@@ -44,6 +44,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+
 const executionStore = useExecutionStore()
 const {
   totalPercent,

src/components/rightSidePanel/RightSidePanel.vue

@@ -36,6 +36,7 @@ const canvasStore = useCanvasStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
+
 const { findParentGroup } = useGraphHierarchy()
 
 const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore)

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -46,6 +46,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+
 const canvasStore = useCanvasStore()
 const favoritedWidgetsStore = useFavoritedWidgetsStore()
 const isEditing = ref(false)

src/components/sidebar/ModeToggle.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { t } from '@/i18n'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
+const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const keybindingStore = useKeybindingStore()
 

src/components/sidebar/SideToolbar.vue

@@ -58,6 +58,7 @@
 import { useResizeObserver } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.vue'
 import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
@@ -66,7 +67,6 @@ import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPa
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -84,6 +84,7 @@ import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
 import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
+const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const userStore = useUserStore()

src/components/sidebar/tabs/AssetsSidebarTab.test.ts

@@ -0,0 +1,314 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+const mocks = vi.hoisted(() => ({
+  shiftKey: { value: true },
+  ctrlKey: { value: false },
+  metaKey: { value: false },
+  outputMedia: [] as AssetItem[]
+}))
+
+vi.mock('@vueuse/core', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(actual as object),
+    useDebounceFn: <T extends (...args: never[]) => unknown>(fn: T) => fn,
+    useElementHover: () => ref(false),
+    useResizeObserver: () => undefined,
+    useStorage: <T>(_key: string, initialValue: T) => ref(initialValue),
+    useKeyModifier: (key: string) => {
+      if (key === 'Shift') return mocks.shiftKey
+      if (key === 'Control') return mocks.ctrlKey
+      if (key === 'Meta') return mocks.metaKey
+      return ref(false)
+    }
+  }
+})
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params ? `${key}:${JSON.stringify(params)}` : key,
+    n: (value: number) => String(value)
+  }),
+  createI18n: () => ({
+    global: {
+      t: (key: string, params?: Record<string, unknown>) =>
+        params ? `${key}:${JSON.stringify(params)}` : key
+    }
+  })
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({
+    add: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/assets/composables/media/useMediaAssets', () => ({
+  useMediaAssets: (type: 'input' | 'output') => ({
+    loading: ref(false),
+    error: ref(null),
+    media: ref(type === 'output' ? mocks.outputMedia : []),
+    fetchMediaList: vi.fn(async () => {}),
+    hasMore: ref(false),
+    isLoadingMore: ref(false),
+    loadMore: vi.fn(async () => {})
+  })
+}))
+
+vi.mock('@/platform/assets/composables/useMediaAssetFiltering', () => ({
+  useMediaAssetFiltering: (baseAssets: { value: AssetItem[] }) => ({
+    searchQuery: ref(''),
+    sortBy: ref('newest'),
+    mediaTypeFilters: ref([]),
+    filteredAssets: computed(() => baseAssets.value)
+  })
+}))
+
+vi.mock('@/platform/assets/composables/useOutputStacks', () => ({
+  useOutputStacks: ({ assets }: { assets: { value: AssetItem[] } }) => ({
+    assetItems: computed(() =>
+      assets.value.map((asset) => ({ key: asset.id, asset }))
+    ),
+    selectableAssets: computed(() => assets.value),
+    isStackExpanded: () => false,
+    toggleStack: vi.fn(async () => {})
+  })
+}))
+
+vi.mock('@/platform/assets/composables/useMediaAssetActions', () => ({
+  useMediaAssetActions: () => ({
+    downloadMultipleAssets: vi.fn(),
+    deleteAssets: vi.fn(async () => true),
+    addMultipleToWorkflow: vi.fn(async () => {}),
+    openMultipleWorkflows: vi.fn(async () => {}),
+    exportMultipleWorkflows: vi.fn(async () => {})
+  })
+}))
+
+vi.mock('@/platform/assets/composables/media/assetMappers', () => ({
+  getAssetType: (tags: unknown) =>
+    Array.isArray(tags) && tags.includes('output') ? 'output' : 'input'
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: () => false
+  })
+}))
+
+vi.mock('@/stores/queueStore', () => {
+  class ResultItemImpl {
+    filename: string
+    subfolder: string
+    type: string
+    nodeId: string
+    mediaType: string
+
+    constructor({
+      filename,
+      subfolder,
+      type,
+      nodeId,
+      mediaType
+    }: {
+      filename: string
+      subfolder: string
+      type: string
+      nodeId: string
+      mediaType: string
+    }) {
+      this.filename = filename
+      this.subfolder = subfolder
+      this.type = type
+      this.nodeId = nodeId
+      this.mediaType = mediaType
+    }
+  }
+
+  return {
+    useQueueStore: () => ({
+      activeJobsCount: ref(0),
+      pendingTasks: []
+    }),
+    ResultItemImpl
+  }
+})
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: vi.fn(async () => {})
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    showDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/executionStore', () => ({
+  useExecutionStore: () => ({
+    clearInitializationByPromptIds: vi.fn()
+  })
+}))
+
+vi.mock('@/utils/formatUtil', () => ({
+  formatDuration: (duration: number) => `${duration}ms`,
+  getMediaTypeFromFilename: () => 'image'
+}))
+
+vi.mock('@/utils/tailwindUtil', () => ({
+  cn: (...classes: Array<string | false | null | undefined>) =>
+    classes.filter(Boolean).join(' ')
+}))
+
+vi.mock('@/platform/assets/utils/outputAssetUtil', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(actual as object),
+    resolveOutputAssetItems: vi.fn(async () => [])
+  }
+})
+
+import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
+
+const sidebarTabTemplateStub = {
+  template: `
+    <div>
+      <slot name="alt-title" />
+      <slot name="tool-buttons" />
+      <slot name="header" />
+      <slot name="body" />
+      <slot name="footer" />
+    </div>
+  `
+}
+
+const buttonStub = {
+  template: '<button @click="$emit(\'click\', $event)"><slot /></button>'
+}
+
+const assetsSidebarGridViewStub = {
+  props: {
+    assets: {
+      type: Array,
+      required: true
+    }
+  },
+  template: `
+    <div>
+      <button
+        v-for="asset in assets"
+        :key="asset.id"
+        :data-testid="'asset-' + asset.id"
+        @click.stop="$emit('select-asset', asset, assets)"
+      >
+        {{ asset.name }}
+      </button>
+    </div>
+  `
+}
+
+function createAsset(
+  id: string,
+  name: string,
+  userMetadata?: Record<string, unknown>
+): AssetItem {
+  return {
+    id,
+    name,
+    tags: ['output'],
+    user_metadata: userMetadata
+  }
+}
+
+describe('AssetsSidebarTab', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mocks.shiftKey.value = true
+    mocks.ctrlKey.value = false
+    mocks.metaKey.value = false
+    mocks.outputMedia = []
+  })
+
+  it('shows deduplicated selected count for parent stack and selected children', async () => {
+    const outputs = [
+      {
+        filename: 'parent.png',
+        nodeId: '1',
+        subfolder: 'outputs',
+        url: 'https://example.com/parent.png'
+      }
+    ]
+
+    const parent = createAsset('parent', 'parent.png', {
+      promptId: 'prompt-1',
+      nodeId: '1',
+      subfolder: 'outputs',
+      outputCount: 4,
+      allOutputs: outputs
+    })
+    const child1 = createAsset('child-1', 'child-1.png', {
+      promptId: 'prompt-1',
+      nodeId: '2',
+      subfolder: 'outputs'
+    })
+    const child2 = createAsset('child-2', 'child-2.png', {
+      promptId: 'prompt-1',
+      nodeId: '3',
+      subfolder: 'outputs'
+    })
+    const child3 = createAsset('child-3', 'child-3.png', {
+      promptId: 'prompt-1',
+      nodeId: '4',
+      subfolder: 'outputs'
+    })
+
+    mocks.outputMedia = [parent, child1, child2, child3]
+
+    const wrapper = mount(AssetsSidebarTab, {
+      global: {
+        stubs: {
+          SidebarTabTemplate: sidebarTabTemplateStub,
+          Button: buttonStub,
+          TabList: true,
+          Tab: true,
+          Divider: true,
+          ProgressSpinner: true,
+          NoResultsPlaceholder: true,
+          MediaAssetFilterBar: true,
+          AssetsSidebarListView: true,
+          AssetsSidebarGridView: assetsSidebarGridViewStub,
+          ResultGallery: true,
+          MediaAssetContextMenu: true
+        },
+        mocks: {
+          $t: (key: string, params?: Record<string, unknown>) =>
+            params ? `${key}:${JSON.stringify(params)}` : key
+        }
+      }
+    })
+
+    await wrapper.find('[data-testid="asset-parent"]').trigger('click')
+    await wrapper.find('[data-testid="asset-child-3"]').trigger('click')
+
+    await flushPromises()
+
+    expect(wrapper.text()).toContain(
+      'mediaAsset.selection.selectedCount:{"count":4}'
+    )
+    expect(wrapper.text()).not.toContain(
+      'mediaAsset.selection.selectedCount:{"count":7}'
+    )
+  })
+})

src/components/toast/GlobalToast.vue

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

src/components/topbar/CloudBadge.vue

@@ -10,8 +10,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { t } from '@/i18n'
 import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
 
 import TopbarBadge from './TopbarBadge.vue'
@@ -31,6 +31,8 @@ withDefaults(
   }
 )
 
+const { t } = useI18n()
+
 const cloudBadge = computed<TopbarBadgeType>(() => ({
   label: t('g.beta'),
   text: 'Comfy Cloud'

src/components/topbar/CurrentUserButton.test.ts

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

src/components/topbar/CurrentUserButton.vue

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

src/components/topbar/CurrentUserPopoverLegacy.test.ts

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

src/components/topbar/CurrentUserPopoverWorkspace.vue

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

src/components/topbar/LoginButton.vue

@@ -37,17 +37,18 @@
 import Popover from 'primevue/popover'
 import type { HTMLAttributes } from 'vue'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { t } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
 
 const { class: className } = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
+const { t } = useI18n()
 const { isLoggedIn, handleSignIn } = useCurrentUser()
 const { buildDocsUrl } = useExternalLink()
 const apiNodesOverviewUrl = buildDocsUrl(

src/components/topbar/WorkspaceSwitcherPopover.vue

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

src/composables/auth/useFirebaseAuthActions.ts

@@ -2,11 +2,11 @@ import { FirebaseError } from 'firebase/app'
 import { AuthErrorCodes } from 'firebase/auth'
 import { ref } from 'vue'
 
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { ErrorRecoveryStrategy } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogService } from '@/services/dialogService'
@@ -83,7 +83,7 @@ export const useFirebaseAuthActions = () => {
   )
 
   const purchaseCredits = wrapWithErrorHandlingAsync(async (amount: number) => {
-    const { isActiveSubscription } = useSubscription()
+    const { isActiveSubscription } = useBillingContext()
     if (!isActiveSubscription.value) return
 
     const response = await authStore.initiateCreditPurchase({

src/composables/billing/types.ts

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

src/composables/billing/useBillingContext.test.ts

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

src/composables/billing/useBillingContext.ts

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

src/composables/billing/useLegacyBilling.ts

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

src/composables/billing/useWorkspaceBilling.ts

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

src/composables/bottomPanelTabs/useTerminalTabs.ts

@@ -1,15 +1,13 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import LogsTerminal from '@/components/bottomPanel/tabs/terminal/LogsTerminal.vue'
 import CommandTerminal from '@/components/bottomPanel/tabs/terminal/CommandTerminal.vue'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
 
 export function useLogsTerminalTab(): BottomPanelExtension {
-  const { t } = useI18n()
   return {
     id: 'logs-terminal',
-    title: t('g.logs'),
+    title: 'Logs',
     titleKey: 'g.logs',
     component: markRaw(LogsTerminal),
     type: 'vue'
@@ -17,10 +15,9 @@ export function useLogsTerminalTab(): BottomPanelExtension {
 }
 
 export function useCommandTerminalTab(): BottomPanelExtension {
-  const { t } = useI18n()
   return {
     id: 'command-terminal',
-    title: t('g.terminal'),
+    title: 'Terminal',
     titleKey: 'g.terminal',
     component: markRaw(CommandTerminal),
     type: 'vue'

src/composables/graph/useGraphNodeManager.ts

@@ -70,6 +70,7 @@ export interface VueNodeData {
   color?: string
   flags?: {
     collapsed?: boolean
+    ghost?: boolean
     pinned?: boolean
   }
   hasErrors?: boolean
@@ -526,6 +527,15 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
                 }
               })
               break
+            case 'flags.ghost':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                flags: {
+                  ...currentData.flags,
+                  ghost: Boolean(propertyEvent.newValue)
+                }
+              })
+              break
             case 'flags.pinned':
               vueNodeData.set(nodeId, {
                 ...currentData,

src/composables/graph/useVueNodeLifecycle.ts

@@ -9,7 +9,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
-import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
 import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
 import { app as comfyApp } from '@/scripts/app'
 
@@ -33,10 +32,7 @@ function useVueNodeLifecycleIndividual() {
     const nodes = activeGraph._nodes.map((node: LGraphNode) => ({
       id: node.id.toString(),
       pos: [node.pos[0], node.pos[1]] as [number, number],
-      size: [node.size[0], removeNodeTitleHeight(node.size[1])] as [
-        number,
-        number
-      ]
+      size: [node.size[0], node.size[1]] as [number, number]
     }))
     layoutStore.initializeFromLiteGraph(nodes)
 

src/composables/sidebarTabs/useAssetsSidebarTab.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { useAssetsSidebarTab } from '@/composables/sidebarTabs/useAssetsSidebarTab'
+
+const { mockGetSetting, mockPendingTasks } = vi.hoisted(() => ({
+  mockGetSetting: vi.fn(),
+  mockPendingTasks: [] as unknown[]
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: mockGetSetting
+  })
+}))
+
+vi.mock('@/components/sidebar/tabs/AssetsSidebarTab.vue', () => ({
+  default: {}
+}))
+
+vi.mock('@/stores/queueStore', () => ({
+  useQueueStore: () => ({
+    pendingTasks: mockPendingTasks
+  })
+}))
+
+describe('useAssetsSidebarTab', () => {
+  it('hides icon badge when QPO V2 is disabled', () => {
+    mockGetSetting.mockReturnValue(false)
+    mockPendingTasks.splice(0, mockPendingTasks.length, {}, {})
+
+    const sidebarTab = useAssetsSidebarTab()
+
+    expect(typeof sidebarTab.iconBadge).toBe('function')
+    expect((sidebarTab.iconBadge as () => string | null)()).toBeNull()
+  })
+
+  it('shows pending task count when QPO V2 is enabled', () => {
+    mockGetSetting.mockReturnValue(true)
+    mockPendingTasks.splice(0, mockPendingTasks.length, {}, {}, {})
+
+    const sidebarTab = useAssetsSidebarTab()
+
+    expect(typeof sidebarTab.iconBadge).toBe('function')
+    expect((sidebarTab.iconBadge as () => string | null)()).toBe('3')
+  })
+})

src/composables/sidebarTabs/useAssetsSidebarTab.ts

@@ -1,6 +1,7 @@
 import { markRaw } from 'vue'
 
 import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useQueueStore } from '@/stores/queueStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
@@ -14,6 +15,12 @@ export const useAssetsSidebarTab = (): SidebarTabExtension => {
     component: markRaw(AssetsSidebarTab),
     type: 'vue',
     iconBadge: () => {
+      const settingStore = useSettingStore()
+
+      if (!settingStore.get('Comfy.Queue.QPOV2')) {
+        return null
+      }
+
       const queueStore = useQueueStore()
       return queueStore.pendingTasks.length > 0
         ? queueStore.pendingTasks.length.toString()

src/composables/useCoreCommands.test.ts

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

src/composables/useCoreCommands.ts

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

src/extensions/core/cloudRemoteConfig.ts

@@ -1,7 +1,7 @@
 import { watchDebounced } from '@vueuse/core'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
 import { useExtensionService } from '@/services/extensionService'
 
@@ -14,7 +14,7 @@ useExtensionService().registerExtension({
 
   setup: async () => {
     const { isLoggedIn } = useCurrentUser()
-    const { isActiveSubscription } = useSubscription()
+    const { isActiveSubscription } = useBillingContext()
 
     // Refresh config when auth or subscription status changes
     // Primary auth refresh is handled by WorkspaceAuthGate on mount

src/extensions/core/cloudSubscription.ts

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

src/extensions/core/load3dLazy.ts

@@ -8,26 +8,36 @@
  */
 
 import { useExtensionService } from '@/services/extensionService'
+import { app } from '@/scripts/app'
+import { useExtensionStore } from '@/stores/extensionStore'
+
+import type { ComfyExtension } from '@/types/comfy'
 
 const LOAD3D_NODE_TYPES = new Set(['Load3D', 'Preview3D', 'SaveGLB'])
 
 let load3dExtensionsLoaded = false
-let load3dExtensionsLoading: Promise<void> | null = null
+let load3dExtensionsLoading: Promise<ComfyExtension[]> | null = null
 
 /**
- * Dynamically load the 3D extensions (and THREE.js) on demand
+ * Dynamically load the 3D extensions (and THREE.js) on demand.
+ * Returns the list of newly registered extensions so the caller can
+ * replay hooks that they missed.
  */
-async function loadLoad3dExtensions(): Promise<void> {
-  if (load3dExtensionsLoaded) return
+async function loadLoad3dExtensions(): Promise<ComfyExtension[]> {
+  if (load3dExtensionsLoaded) return []
 
   if (load3dExtensionsLoading) {
     return load3dExtensionsLoading
   }
 
   load3dExtensionsLoading = (async () => {
+    const before = new Set(useExtensionStore().enabledExtensions)
     // Import both extensions - they will self-register via useExtensionService()
     await Promise.all([import('./load3d'), import('./saveMesh')])
     load3dExtensionsLoaded = true
+    return useExtensionStore().enabledExtensions.filter(
+      (ext) => !before.has(ext)
+    )
   })()
 
   return load3dExtensionsLoading
@@ -44,10 +54,15 @@ function isLoad3dNodeType(nodeTypeName: string): boolean {
 useExtensionService().registerExtension({
   name: 'Comfy.Load3DLazy',
 
-  async beforeRegisterNodeDef(_nodeType, nodeData) {
-    // When a 3D node type is being registered, load the 3D extensions
+  async beforeRegisterNodeDef(nodeType, nodeData) {
     if (isLoad3dNodeType(nodeData.name)) {
-      await loadLoad3dExtensions()
+      // Load the 3D extensions and replay their beforeRegisterNodeDef hooks,
+      // since invokeExtensionsAsync already captured the extensions snapshot
+      // before these new extensions were registered.
+      const newExtensions = await loadLoad3dExtensions()
+      for (const ext of newExtensions) {
+        await ext.beforeRegisterNodeDef?.(nodeType, nodeData, app)
+      }
     }
   }
 })

src/i18n.ts

@@ -201,7 +201,6 @@ export const i18n = createI18n({
 })
 
 /** Convenience shorthand: i18n.global */
-/** @deprecated use useI18n */
 export const { t, te, d } = i18n.global
 
 /**

src/lib/litegraph/src/LGraph.ts

@@ -102,6 +102,16 @@ export interface LGraphConfig {
   links_ontop?: boolean
 }
 
+/** Options for {@link LGraph.add} method. */
+interface GraphAddOptions {
+  /** If true, skip recomputing execution order after adding the node. */
+  skipComputeOrder?: boolean
+  /** If true, the node will be semi-transparent and follow the cursor until placed or cancelled. */
+  ghost?: boolean
+  /** Mouse event for ghost placement. Used to position node under cursor. */
+  dragEvent?: MouseEvent
+}
+
 export interface GroupNodeConfigEntry {
   input?: Record<string, { name?: string; visible?: boolean }>
   output?: Record<number, { name?: string; visible?: boolean }>
@@ -862,12 +872,35 @@ export class LGraph
   /**
    * Adds a new node instance to this graph
    * @param node the instance of the node
+   * @param options Additional options for adding the node
    */
   add(
     node: LGraphNode | LGraphGroup,
-    skip_compute_order?: boolean
+    options?: GraphAddOptions
+  ): LGraphNode | null | undefined
+  /**
+   * Adds a new node instance to this graph
+   * @param node the instance of the node
+   * @param skipComputeOrder If true, skip recomputing execution order
+   * @deprecated Use options object instead
+   */
+  add(
+    node: LGraphNode | LGraphGroup,
+    skipComputeOrder?: boolean
+  ): LGraphNode | null | undefined
+  add(
+    node: LGraphNode | LGraphGroup,
+    skipComputeOrderOrOptions?: boolean | GraphAddOptions
   ): LGraphNode | null | undefined {
     if (!node) return
+
+    // Handle backwards compatibility: 2nd arg can be boolean or options
+    const opts: GraphAddOptions =
+      typeof skipComputeOrderOrOptions === 'object'
+        ? skipComputeOrderOrOptions
+        : { skipComputeOrder: skipComputeOrderOrOptions ?? false }
+    const shouldSkipComputeOrder = opts.skipComputeOrder ?? false
+
     const { state } = this
 
     // Ensure created items are snapped
@@ -914,6 +947,11 @@ export class LGraph
       }
     }
 
+    // Set ghost flag before registration so VueNodeData picks it up
+    if (opts.ghost) {
+      node.flags.ghost = true
+    }
+
     node.graph = this
     this._version++
 
@@ -924,13 +962,17 @@ export class LGraph
 
     if (this.config.align_to_grid) node.alignToGrid()
 
-    if (!skip_compute_order) this.updateExecutionOrder()
+    if (!shouldSkipComputeOrder) this.updateExecutionOrder()
 
     this.onNodeAdded?.(node)
 
     this.setDirtyCanvas(true)
     this.change()
 
+    if (opts.ghost) {
+      this.canvasAction((c) => c.startGhostPlacement(node, opts.dragEvent))
+    }
+
     // to chain actions
     return node
   }

src/lib/litegraph/src/LGraphCanvas.slotHitDetection.test.ts

@@ -0,0 +1,210 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  LGraph,
+  LGraphCanvas,
+  LGraphNode,
+  LiteGraph
+} from '@/lib/litegraph/src/litegraph'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+
+vi.mock('@/renderer/core/layout/store/layoutStore', () => ({
+  layoutStore: {
+    querySlotAtPoint: vi.fn(),
+    queryRerouteAtPoint: vi.fn(),
+    getNodeLayoutRef: vi.fn(() => ({ value: null })),
+    getSlotLayout: vi.fn()
+  }
+}))
+
+describe('LGraphCanvas slot hit detection', () => {
+  let graph: LGraph
+  let canvas: LGraphCanvas
+  let node: LGraphNode
+  let canvasElement: HTMLCanvasElement
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    canvasElement = document.createElement('canvas')
+    canvasElement.width = 800
+    canvasElement.height = 600
+
+    const ctx = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      translate: vi.fn(),
+      scale: vi.fn(),
+      fillRect: vi.fn(),
+      strokeRect: vi.fn(),
+      fillText: vi.fn(),
+      measureText: vi.fn().mockReturnValue({ width: 50 }),
+      beginPath: vi.fn(),
+      moveTo: vi.fn(),
+      lineTo: vi.fn(),
+      stroke: vi.fn(),
+      fill: vi.fn(),
+      closePath: vi.fn(),
+      arc: vi.fn(),
+      rect: vi.fn(),
+      clip: vi.fn(),
+      clearRect: vi.fn(),
+      setTransform: vi.fn(),
+      roundRect: vi.fn(),
+      getTransform: vi
+        .fn()
+        .mockReturnValue({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }),
+      font: '',
+      fillStyle: '',
+      strokeStyle: '',
+      lineWidth: 1,
+      globalAlpha: 1,
+      textAlign: 'left' as CanvasTextAlign,
+      textBaseline: 'alphabetic' as CanvasTextBaseline
+    } as unknown as CanvasRenderingContext2D
+
+    canvasElement.getContext = vi.fn().mockReturnValue(ctx)
+    canvasElement.getBoundingClientRect = vi.fn().mockReturnValue({
+      left: 0,
+      top: 0,
+      width: 800,
+      height: 600
+    })
+
+    graph = new LGraph()
+    canvas = new LGraphCanvas(canvasElement, graph, {
+      skip_render: true
+    })
+
+    // Create a test node with an output slot
+    node = new LGraphNode('Test Node')
+    node.pos = [100, 100]
+    node.size = [150, 80]
+    node.addOutput('output', 'number')
+    graph.add(node)
+
+    // Enable Vue nodes mode for the test
+    LiteGraph.vueNodesMode = true
+  })
+
+  afterEach(() => {
+    LiteGraph.vueNodesMode = false
+  })
+
+  describe('processMouseDown slot fallback in Vue nodes mode', () => {
+    it('should query layoutStore.querySlotAtPoint when clicking outside node bounds', () => {
+      // Click position outside node bounds (node is at 100,100 with size 150x80)
+      // So node covers x: 100-250, y: 100-180
+      // Click at x=255 is outside the right edge
+      const clickX = 255
+      const clickY = 120
+
+      // Verify the click is outside the node bounds
+      expect(node.isPointInside(clickX, clickY)).toBe(false)
+      expect(graph.getNodeOnPos(clickX, clickY)).toBeNull()
+
+      // Mock the slot query to return our node's slot
+      vi.mocked(layoutStore.querySlotAtPoint).mockReturnValue({
+        nodeId: String(node.id),
+        index: 0,
+        type: 'output',
+        position: { x: 252, y: 120 },
+        bounds: { x: 246, y: 110, width: 20, height: 20 }
+      })
+
+      // Call processMouseDown - this should trigger the slot fallback
+      canvas.processMouseDown(
+        new MouseEvent('pointerdown', {
+          button: 1, // Middle button
+          clientX: clickX,
+          clientY: clickY
+        })
+      )
+
+      // The fix should query the layout store when no node is found at click position
+      expect(layoutStore.querySlotAtPoint).toHaveBeenCalledWith({
+        x: clickX,
+        y: clickY
+      })
+    })
+
+    it('should NOT query layoutStore when node is found directly at click position', () => {
+      // Initialize node's bounding rect
+      node.updateArea()
+
+      // Populate visible_nodes (normally done during render)
+      canvas.visible_nodes = [node]
+
+      // Click inside the node bounds
+      const clickX = 150
+      const clickY = 140
+
+      // Verify the click is inside the node bounds
+      expect(node.isPointInside(clickX, clickY)).toBe(true)
+      expect(graph.getNodeOnPos(clickX, clickY)).toBe(node)
+
+      // Call processMouseDown
+      canvas.processMouseDown(
+        new MouseEvent('pointerdown', {
+          button: 1,
+          clientX: clickX,
+          clientY: clickY
+        })
+      )
+
+      // Should NOT query the layout store since node was found directly
+      expect(layoutStore.querySlotAtPoint).not.toHaveBeenCalled()
+    })
+
+    it('should NOT query layoutStore when not in Vue nodes mode', () => {
+      LiteGraph.vueNodesMode = false
+
+      const clickX = 255
+      const clickY = 120
+
+      // Call processMouseDown
+      canvas.processMouseDown(
+        new MouseEvent('pointerdown', {
+          button: 1,
+          clientX: clickX,
+          clientY: clickY
+        })
+      )
+
+      // Should NOT query the layout store in non-Vue mode
+      expect(layoutStore.querySlotAtPoint).not.toHaveBeenCalled()
+    })
+
+    it('should find node via slot query for input slots extending beyond left edge', () => {
+      node.addInput('input', 'number')
+
+      // Click position left of node (node starts at x=100)
+      const clickX = 95
+      const clickY = 140
+
+      // Verify outside bounds
+      expect(node.isPointInside(clickX, clickY)).toBe(false)
+
+      vi.mocked(layoutStore.querySlotAtPoint).mockReturnValue({
+        nodeId: String(node.id),
+        index: 0,
+        type: 'input',
+        position: { x: 98, y: 140 },
+        bounds: { x: 88, y: 130, width: 20, height: 20 }
+      })
+
+      canvas.processMouseDown(
+        new MouseEvent('pointerdown', {
+          button: 1,
+          clientX: clickX,
+          clientY: clickY
+        })
+      )
+
+      expect(layoutStore.querySlotAtPoint).toHaveBeenCalledWith({
+        x: clickX,
+        y: clickY
+      })
+    })
+  })
+})

src/lib/litegraph/src/LGraphCanvas.ts

@@ -203,6 +203,9 @@ interface LGraphCanvasState {
    * Downstream consumers may reset to false once actioned.
    */
   selectionChanged: boolean
+
+  /** ID of node currently in ghost placement mode (semi-transparent, following cursor). */
+  ghostNodeId: NodeId | null
 }
 
 /**
@@ -313,7 +316,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     readOnly: false,
     hoveringOver: CanvasItem.Nothing,
     shouldSetCursor: true,
-    selectionChanged: false
+    selectionChanged: false,
+    ghostNodeId: null
   }
 
   private _subgraph?: Subgraph
@@ -684,6 +688,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 
   canvas: HTMLCanvasElement & ICustomEventTarget<LGraphCanvasEventMap>
   bgcanvas: HTMLCanvasElement
+  overlayCanvas: HTMLCanvasElement | null = null
+  overlayCtx: CanvasRenderingContext2D | null = null
   ctx: CanvasRenderingContext2D
   _events_binded?: boolean
   _mousedown_callback?(e: PointerEvent): void
@@ -2163,6 +2169,14 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   }
 
   processMouseDown(e: MouseEvent): void {
+    if (this.state.ghostNodeId != null) {
+      if (e.button === 0) this.finalizeGhostPlacement(false)
+      if (e.button === 2) this.finalizeGhostPlacement(true)
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
+
     if (
       this.dragZoomEnabled &&
       e.ctrlKey &&
@@ -2197,9 +2211,21 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 
     if (!is_inside) return
 
-    const node =
+    let node =
       graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes) ?? undefined
 
+    // In Vue nodes mode, slots extend beyond node bounds due to CSS transforms.
+    // If no node was found, check if the click is on a slot and use its owning node.
+    if (!node && LiteGraph.vueNodesMode) {
+      const slotLayout = layoutStore.querySlotAtPoint({
+        x: e.canvasX,
+        y: e.canvasY
+      })
+      if (slotLayout) {
+        node = graph.getNodeById(slotLayout.nodeId) ?? undefined
+      }
+    }
+
     this.mouse[0] = x
     this.mouse[1] = y
     this.graph_mouse[0] = e.canvasX
@@ -3541,6 +3567,76 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     this.onNodeMoved?.(findFirstNode(this.selectedItems))
   }
 
+  /**
+   * Starts ghost placement mode for a node.
+   * The node will be semi-transparent and follow the cursor until the user
+   * clicks to place it, or presses Escape/right-clicks to cancel.
+   * @param node The node to place
+   * @param dragEvent Optional mouse event for positioning under cursor
+   */
+  startGhostPlacement(node: LGraphNode, dragEvent?: MouseEvent): void {
+    this.emitBeforeChange()
+    this.graph?.beforeChange()
+
+    if (dragEvent) {
+      this.adjustMouseEvent(dragEvent)
+      const e = dragEvent as CanvasPointerEvent
+      node.pos[0] = e.canvasX - node.size[0] / 2
+      node.pos[1] = e.canvasY + 10
+      // Update last_mouse to prevent jump on first drag move
+      this.last_mouse = [e.clientX, e.clientY]
+    } else {
+      node.pos[0] = this.graph_mouse[0] - node.size[0] / 2
+      node.pos[1] = this.graph_mouse[1] + 10
+    }
+
+    // Sync position to layout store for Vue node rendering
+    if (LiteGraph.vueNodesMode) {
+      const mutations = this.initLayoutMutations()
+      mutations.moveNode(node.id, { x: node.pos[0], y: node.pos[1] })
+    }
+
+    this.state.ghostNodeId = node.id
+
+    this.deselectAll()
+    this.select(node)
+    this.isDragging = true
+  }
+
+  /**
+   * Finalizes ghost placement mode.
+   * @param cancelled If true, the node is removed; otherwise it's placed
+   */
+  finalizeGhostPlacement(cancelled: boolean): void {
+    const nodeId = this.state.ghostNodeId
+    if (nodeId == null) return
+
+    this.state.ghostNodeId = null
+    this.isDragging = false
+
+    const node = this.graph?.getNodeById(nodeId)
+    if (!node) return
+
+    if (cancelled) {
+      this.deselect(node)
+      this.graph?.remove(node)
+    } else {
+      delete node.flags.ghost
+      this.graph?.trigger('node:property:changed', {
+        nodeId: node.id,
+        property: 'flags.ghost',
+        oldValue: true,
+        newValue: false
+      })
+    }
+
+    this.dirty_canvas = true
+    this.dirty_bgcanvas = true
+
+    this.graph?.afterChange()
+    this.emitAfterChange()
+  }
+
   /**
    * Called when a mouse up event has to be processed
    */
@@ -3711,6 +3807,17 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     const { graph } = this
     if (!graph) return
 
+    // Cancel ghost placement
+    if (
+      (e.key === 'Escape' || e.key === 'Delete' || e.key === 'Backspace') &&
+      this.state.ghostNodeId != null
+    ) {
+      this.finalizeGhostPlacement(true)
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
+
     let block_default = false
     // @ts-expect-error EventTarget.localName is not in standard types
     if (e.target.localName == 'input') return
@@ -4744,7 +4851,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   drawFrontCanvas(): void {
     this.dirty_canvas = false
 
-    const { ctx, canvas, graph, linkConnector } = this
+    const { ctx, canvas, graph } = this
 
     // @ts-expect-error start2D method not in standard CanvasRenderingContext2D
     if (ctx.start2D && !this.viewport) {
@@ -4844,78 +4951,14 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         this.drawConnections(ctx)
       }
 
-      if (linkConnector.isConnecting) {
-        // current connection (the one being dragged by the mouse)
-        const { renderLinks } = linkConnector
-        const highlightPos = this._getHighlightPosition()
-        ctx.lineWidth = this.connections_width
-
-        for (const renderLink of renderLinks) {
-          const {
-            fromSlot,
-            fromPos: pos,
-            fromDirection,
-            dragDirection
-          } = renderLink
-          const connShape = fromSlot.shape
-          const connType = fromSlot.type
-
-          const colour = resolveConnectingLinkColor(connType)
-
-          // the connection being dragged by the mouse
-          if (this.linkRenderer) {
-            this.linkRenderer.renderDraggingLink(
-              ctx,
-              pos,
-              highlightPos,
-              colour,
-              fromDirection,
-              dragDirection,
-              {
-                ...this.buildLinkRenderContext(),
-                linkMarkerShape: LinkMarkerShape.None
-              }
-            )
-          }
-
-          ctx.fillStyle = colour
-          ctx.beginPath()
-          if (connType === LiteGraph.EVENT || connShape === RenderShape.BOX) {
-            ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10)
-            ctx.rect(
-              highlightPos[0] - 6 + 0.5,
-              highlightPos[1] - 5 + 0.5,
-              14,
-              10
-            )
-          } else if (connShape === RenderShape.ARROW) {
-            ctx.moveTo(pos[0] + 8, pos[1] + 0.5)
-            ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5)
-            ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5)
-            ctx.closePath()
-          } else {
-            ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2)
-            ctx.arc(highlightPos[0], highlightPos[1], 4, 0, Math.PI * 2)
-          }
-          ctx.fill()
-        }
-
-        // Gradient half-border over target node
-        this._renderSnapHighlight(ctx, highlightPos)
-      }
-
-      // on top of link center
-      if (
-        !this.isDragging &&
-        this.over_link_center &&
-        this.render_link_tooltip
-      ) {
-        this.drawLinkTooltip(ctx, this.over_link_center)
+      if (!LiteGraph.vueNodesMode || !this.overlayCtx) {
+        this._drawConnectingLinks(ctx)
       } else {
-        this.onDrawLinkTooltip?.(ctx, null)
+        this._drawOverlayLinks()
       }
 
-      // custom info
+      this._drawLinkTooltip(ctx)
+
       this.onDrawForeground?.(ctx, this.visible_area)
 
       ctx.restore()
@@ -4926,9 +4969,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     if (area) ctx.restore()
   }
 
-  /** @returns If the pointer is over a link centre marker, the link segment it belongs to.  Otherwise, `undefined`.  */
   private _getLinkCentreOnPos(e: CanvasPointerEvent): LinkSegment | undefined {
-    // Skip hit detection if center markers are disabled
     if (this.linkMarkerShape === LinkMarkerShape.None) {
       return undefined
     }
@@ -4945,6 +4986,90 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     }
   }
 
+  private _drawConnectingLinks(ctx: CanvasRenderingContext2D): void {
+    const { linkConnector } = this
+    if (!linkConnector.isConnecting) return
+
+    const { renderLinks } = linkConnector
+    const highlightPos = this._getHighlightPosition()
+    ctx.lineWidth = this.connections_width
+
+    for (const renderLink of renderLinks) {
+      const {
+        fromSlot,
+        fromPos: pos,
+        fromDirection,
+        dragDirection
+      } = renderLink
+      const connShape = fromSlot.shape
+      const connType = fromSlot.type
+
+      const colour = resolveConnectingLinkColor(connType)
+
+      if (this.linkRenderer) {
+        this.linkRenderer.renderDraggingLink(
+          ctx,
+          pos,
+          highlightPos,
+          colour,
+          fromDirection,
+          dragDirection,
+          {
+            ...this.buildLinkRenderContext(),
+            linkMarkerShape: LinkMarkerShape.None
+          }
+        )
+      }
+
+      ctx.fillStyle = colour
+      ctx.beginPath()
+      if (connType === LiteGraph.EVENT || connShape === RenderShape.BOX) {
+        ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10)
+        ctx.rect(highlightPos[0] - 6 + 0.5, highlightPos[1] - 5 + 0.5, 14, 10)
+      } else if (connShape === RenderShape.ARROW) {
+        ctx.moveTo(pos[0] + 8, pos[1] + 0.5)
+        ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5)
+        ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5)
+        ctx.closePath()
+      } else {
+        ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2)
+        ctx.arc(highlightPos[0], highlightPos[1], 4, 0, Math.PI * 2)
+      }
+      ctx.fill()
+    }
+
+    this._renderSnapHighlight(ctx, highlightPos)
+  }
+
+  private _drawLinkTooltip(ctx: CanvasRenderingContext2D): void {
+    if (!this.isDragging && this.over_link_center && this.render_link_tooltip) {
+      this.drawLinkTooltip(ctx, this.over_link_center)
+    } else {
+      this.onDrawLinkTooltip?.(ctx, null)
+    }
+  }
+
+  private _drawOverlayLinks(): void {
+    const octx = this.overlayCtx
+    const overlayCanvas = this.overlayCanvas
+    if (!octx || !overlayCanvas) return
+
+    octx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height)
+
+    if (!this.linkConnector.isConnecting) return
+
+    octx.save()
+
+    const scale = window.devicePixelRatio
+    octx.setTransform(scale, 0, 0, scale, 0, 0)
+
+    this.ds.toCanvasContext(octx)
+
+    this._drawConnectingLinks(octx)
+
+    octx.restore()
+  }
+
   /** Get the target snap / highlight point in graph space */
   private _getHighlightPosition(): Readonly<Point> {
     return LiteGraph.snaps_for_comfy
@@ -5793,6 +5918,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   }
 
   private getNodeModeAlpha(node: LGraphNode) {
+    if (node.flags.ghost) return 0.3
     return node.mode === LGraphEventMode.BYPASS
       ? 0.2
       : node.mode === LGraphEventMode.NEVER

src/lib/litegraph/src/interfaces.ts

@@ -332,6 +332,8 @@ export interface INodeFlags {
   collapsed?: boolean
   /** Configuration setting for {@link LGraphNode.connectInputToOutput} */
   keepAllLinksOnBypass?: boolean
+  /** Node is in ghost placement mode (semi-transparent, following cursor) */
+  ghost?: boolean
 }
 
 /**

src/locales/en/main.json

@@ -2036,6 +2036,7 @@
       "videosEstimate": "~{count} videos*",
       "templateNote": "*Generated with Wan Fun Control template",
       "buy": "Buy",
+      "purchaseSuccess": "Credits added successfully!",
       "purchaseError": "Purchase Failed",
       "purchaseErrorDetail": "Failed to purchase credits: {error}",
       "unknownError": "An unknown error occurred",
@@ -2068,19 +2069,49 @@
       "tooltip": "We've unified payments across Comfy. Everything now runs on Comfy Credits:\n- Partner Nodes (formerly API nodes)\n- Cloud workflows\n\nYour existing Partner node balance has been converted into credits."
     }
   },
+  "billingOperation": {
+    "subscriptionProcessing": "Processing payment — setting up your workspace...",
+    "subscriptionSuccess": "Subscription updated successfully",
+    "subscriptionFailed": "Subscription update failed",
+    "subscriptionTimeout": "Subscription verification timed out",
+    "topupProcessing": "Processing payment — adding credits...",
+    "topupSuccess": "Credits added successfully",
+    "topupFailed": "Top-up failed",
+    "topupTimeout": "Top-up verification timed out"
+  },
   "subscription": {
+    "chooseBestPlanWorkspace": "Choose the best plan for your workspace",
     "title": "Subscription",
     "titleUnsubscribed": "Subscribe to Comfy Cloud",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Comfy Cloud Logo",
     "beta": "BETA",
     "perMonth": "/ month",
+    "member": "member",
     "usdPerMonth": "USD / mo",
+    "usdPerMonthPerMember": "USD / mo / member",
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
     "managePayment": "Manage Payment",
     "cancelSubscription": "Cancel Subscription",
+    "canceled": "Canceled",
+    "resubscribe": "Resubscribe",
+    "resubscribeTo": "Resubscribe to {plan}",
+    "resubscribeSuccess": "Subscription reactivated successfully",
+    "canceledCard": {
+      "title": "Your subscription has been canceled",
+      "description": "You won't be charged again. Your features remain active until {date}."
+    },
+    "cancelSuccess": "Subscription cancelled successfully",
+    "cancelDialog": {
+      "title": "Cancel subscription",
+      "description": "Your access continues until {date}. You won't be charged again, and your workspace and credits will be preserved. You can resubscribe anytime.",
+      "endOfBillingPeriod": "end of billing period",
+      "keepSubscription": "Keep subscription",
+      "confirmCancel": "Cancel subscription",
+      "failed": "Failed to cancel subscription"
+    },
     "partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
     "partnerNodesDescription": "For running commercial/proprietary models",
     "totalCredits": "Total credits",
@@ -2129,7 +2160,10 @@
     "required": {
       "title": "Subscribe to",
       "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
-      "subscribe": "Subscribe"
+      "subscribe": "Subscribe",
+      "pollingSuccess": "Subscription activated successfully!",
+      "pollingFailed": "Subscription activation failed",
+      "pollingTimeout": "Timed out waiting for subscription. Please refresh and try again."
     },
     "subscribeToRun": "Subscribe",
     "subscribeToRunFull": "Subscribe to Run",
@@ -2139,6 +2173,7 @@
     "subscriptionRequiredMessage": "A subscription is required for members to run workflows on Cloud",
     "contactOwnerToSubscribe": "Contact the workspace owner to subscribe",
     "description": "Choose the best plan for you",
+    "descriptionWorkspace": "Choose the best plan for your workspace",
     "haveQuestions": "Have questions or wondering about enterprise?",
     "contactUs": "Contact us",
     "viewEnterprise": "View enterprise",
@@ -2150,7 +2185,13 @@
     "currentPlan": "Current Plan",
     "subscribeTo": "Subscribe to {plan}",
     "monthlyCreditsLabel": "Monthly credits",
+    "monthlyCreditsPerMemberLabel": "Monthly credits / member",
+    "maxMembersLabel": "Max. members",
     "yearlyCreditsLabel": "Total yearly credits",
+    "membersLabel": "Up to {count} members",
+    "nextMonthInvoice": "Next month invoice",
+    "invoiceHistory": "Invoice history",
+    "memberCount": "{count} member | {count} members",
     "maxDurationLabel": "Max run duration",
     "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
     "addCreditsLabel": "Add more credits whenever",
@@ -2172,6 +2213,27 @@
     "billingComingSoon": {
       "title": "Coming Soon",
       "message": "Team billing is coming soon. You'll be able to subscribe to a plan for your workspace with per-seat pricing. Stay tuned for updates."
+    },
+    "preview": {
+      "confirmPayment": "Confirm your payment",
+      "confirmPlanChange": "Confirm your plan change",
+      "startingToday": "Starting today",
+      "starting": "Starting {date}",
+      "ends": "Ends {date}",
+      "eachMonthCreditsRefill": "Each month credits refill to",
+      "perMember": "/ member",
+      "showMoreFeatures": "Show more features",
+      "hideFeatures": "Hide features",
+      "proratedRefund": "Prorated refund for {plan}",
+      "proratedCharge": "Prorated charge for {plan}",
+      "totalDueToday": "Total due today",
+      "nextPaymentDue": "Next payment due {date}. Cancel anytime.",
+      "termsAgreement": "By continuing, you agree to Comfy Org's {terms} and {privacy}.",
+      "terms": "Terms",
+      "privacyPolicy": "Privacy Policy",
+      "addCreditCard": "Add credit card",
+      "confirm": "Confirm",
+      "backToAllPlans": "Back to all plans"
     }
   },
   "userSettings": {

src/main.ts

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

src/platform/assets/components/UploadModelUpgradeModal.vue

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

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

@@ -36,6 +36,39 @@ function createMockAssets(count: number): AssetItem[] {
   }))
 }
 
+type OutputStub = {
+  filename: string
+  nodeId: string
+  subfolder: string
+  url: string
+}
+
+function createOutputAsset(
+  id: string,
+  name: string,
+  metadata: Record<string, unknown>
+): AssetItem {
+  return {
+    id,
+    name,
+    tags: ['output'],
+    user_metadata: metadata
+  }
+}
+
+function createOutput(
+  filename: string,
+  nodeId: string,
+  subfolder: string
+): OutputStub {
+  return {
+    filename,
+    nodeId,
+    subfolder,
+    url: `https://example.com/${filename}`
+  }
+}
+
 describe('useAssetSelection', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
@@ -272,4 +305,80 @@ describe('useAssetSelection', () => {
       expect(selected[0].id).toBe('asset-1')
     })
   })
+
+  describe('getTotalOutputCount', () => {
+    it('deduplicates overlapping parent stack and selected children with partial parent outputs', () => {
+      const { getTotalOutputCount } = useAssetSelection()
+      const outputs = [createOutput('parent.png', '1', 'outputs')]
+
+      const parent = createOutputAsset('parent', 'parent.png', {
+        promptId: 'prompt-1',
+        nodeId: '1',
+        subfolder: 'outputs',
+        outputCount: 4,
+        allOutputs: outputs
+      })
+
+      const child1 = createOutputAsset('child-1', 'child-1.png', {
+        promptId: 'prompt-1',
+        nodeId: '2',
+        subfolder: 'outputs'
+      })
+      const child2 = createOutputAsset('child-2', 'child-2.png', {
+        promptId: 'prompt-1',
+        nodeId: '3',
+        subfolder: 'outputs'
+      })
+      const child3 = createOutputAsset('child-3', 'child-3.png', {
+        promptId: 'prompt-1',
+        nodeId: '4',
+        subfolder: 'outputs'
+      })
+
+      expect(getTotalOutputCount([parent, child1, child2, child3])).toBe(4)
+    })
+
+    it('deduplicates when parent includes full output list', () => {
+      const { getTotalOutputCount } = useAssetSelection()
+      const parent = createOutputAsset('parent', 'parent.png', {
+        promptId: 'prompt-1',
+        nodeId: '1',
+        subfolder: 'outputs',
+        outputCount: 4,
+        allOutputs: [
+          createOutput('parent.png', '1', 'outputs'),
+          createOutput('child-1.png', '2', 'outputs'),
+          createOutput('child-2.png', '3', 'outputs'),
+          createOutput('child-3.png', '4', 'outputs')
+        ]
+      })
+      const child = createOutputAsset('child-1', 'child-1.png', {
+        promptId: 'prompt-1',
+        nodeId: '2',
+        subfolder: 'outputs'
+      })
+
+      expect(getTotalOutputCount([parent, child])).toBe(4)
+    })
+
+    it('falls back to outputCount when only unresolved stack count exists', () => {
+      const { getTotalOutputCount } = useAssetSelection()
+      const parent = createOutputAsset('parent', 'parent.png', {
+        promptId: 'prompt-1',
+        nodeId: '1',
+        subfolder: 'outputs',
+        outputCount: 4
+      })
+
+      expect(getTotalOutputCount([parent])).toBe(4)
+    })
+
+    it('counts non-output metadata assets as one each', () => {
+      const { getTotalOutputCount } = useAssetSelection()
+      const assetA: AssetItem = { id: 'a', name: 'a.png', tags: ['input'] }
+      const assetB: AssetItem = { id: 'b', name: 'b.png', tags: ['input'] }
+
+      expect(getTotalOutputCount([assetA, assetB])).toBe(2)
+    })
+  })
 })

src/platform/assets/composables/useAssetSelection.ts

@@ -1,9 +1,71 @@
 import { useKeyModifier } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { getOutputKey } from '@/platform/assets/utils/outputAssetUtil'
 import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
 
+type PromptSelection = {
+  expectedOutputCount: number
+  outputKeys: Set<string>
+}
+
+function getPromptSelection(
+  selectionsByPromptId: Map<string, PromptSelection>,
+  promptId: string
+): PromptSelection {
+  const existingSelection = selectionsByPromptId.get(promptId)
+  if (existingSelection) {
+    return existingSelection
+  }
+
+  const selection: PromptSelection = {
+    expectedOutputCount: 0,
+    outputKeys: new Set<string>()
+  }
+  selectionsByPromptId.set(promptId, selection)
+  return selection
+}
+
+function updateExpectedOutputCount(
+  selection: PromptSelection,
+  outputCount: OutputAssetMetadata['outputCount']
+) {
+  if (
+    typeof outputCount === 'number' &&
+    outputCount > selection.expectedOutputCount
+  ) {
+    selection.expectedOutputCount = outputCount
+  }
+}
+
+function resolveOutputKeysForSelection(
+  asset: AssetItem,
+  metadata: OutputAssetMetadata
+): string[] {
+  const allOutputKeys = (metadata.allOutputs ?? [])
+    .map((output) => getOutputKey(output))
+    .filter((key): key is string => key !== null)
+
+  if (allOutputKeys.length > 0) {
+    return allOutputKeys
+  }
+
+  const assetOutputKey = getOutputKey({
+    nodeId: metadata.nodeId,
+    subfolder: metadata.subfolder,
+    filename: asset.name
+  })
+
+  return [assetOutputKey ?? `asset:${asset.id}`]
+}
+
+function getPromptSelectionCount(selection: PromptSelection): number {
+  return Math.max(selection.outputKeys.size, selection.expectedOutputCount)
+}
+
 export function useAssetSelection() {
   const selectionStore = useAssetSelectionStore()
 
@@ -150,7 +212,38 @@ export function useAssetSelection() {
    * Get the total output count for given assets
    */
   function getTotalOutputCount(assets: AssetItem[]): number {
-    return assets.reduce((sum, asset) => sum + getOutputCount(asset), 0)
+    const nonOutputAssetIds = new Set<string>()
+    const promptSelectionsByPromptId = new Map<string, PromptSelection>()
+
+    for (const asset of assets) {
+      const outputMetadata = getOutputAssetMetadata(asset.user_metadata)
+      const promptId = outputMetadata?.promptId
+
+      if (!promptId) {
+        nonOutputAssetIds.add(asset.id)
+        continue
+      }
+
+      const promptSelection = getPromptSelection(
+        promptSelectionsByPromptId,
+        promptId
+      )
+      updateExpectedOutputCount(promptSelection, outputMetadata.outputCount)
+
+      for (const outputKey of resolveOutputKeysForSelection(
+        asset,
+        outputMetadata
+      )) {
+        promptSelection.outputKeys.add(outputKey)
+      }
+    }
+
+    let totalOutputCount = nonOutputAssetIds.size
+    for (const selection of promptSelectionsByPromptId.values()) {
+      totalOutputCount += getPromptSelectionCount(selection)
+    }
+
+    return totalOutputCount
   }
 
   /**

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

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

src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue

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

src/platform/cloud/onboarding/components/CloudTemplate.vue

@@ -62,14 +62,17 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 import Button from '@/components/ui/button/Button.vue'
-import { t } from '@/i18n'
 import videoPoster from '@/platform/cloud/onboarding/assets/videos/thumbnail.png'
 import videoSrc from '@/platform/cloud/onboarding/assets/videos/video.mp4'
 import CloudLogo from '@/platform/cloud/onboarding/components/CloudLogo.vue'
 import CloudTemplateFooter from '@/platform/cloud/onboarding/components/CloudTemplateFooter.vue'
 import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
+const { t } = useI18n()
+
 const handleDownloadClick = () => {
   window.open('https://www.comfy.org/download', '_blank')
 }

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

@@ -14,15 +14,18 @@ const mockSubscriptionTier = ref<
 const mockIsYearlySubscription = ref(false)
 const mockAccessBillingPortal = vi.fn()
 const mockReportError = vi.fn()
+const mockTrackBeginCheckout = vi.fn()
 const mockGetFirebaseAuthHeader = vi.fn(() =>
   Promise.resolve({ Authorization: 'Bearer test-token' })
 )
+const mockGetCheckoutAttribution = vi.hoisted(() => vi.fn(() => ({})))
 
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: () => ({
     isActiveSubscription: computed(() => mockIsActiveSubscription.value),
     subscriptionTier: computed(() => mockSubscriptionTier.value),
-    isYearlySubscription: computed(() => mockIsYearlySubscription.value)
+    isYearlySubscription: computed(() => mockIsYearlySubscription.value),
+    subscriptionStatus: ref(null)
   })
 }))
 
@@ -53,11 +56,22 @@ vi.mock('@/composables/useErrorHandling', () => ({
 
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: () => ({
-    getFirebaseAuthHeader: mockGetFirebaseAuthHeader
+    getFirebaseAuthHeader: mockGetFirebaseAuthHeader,
+    userId: 'user-123'
   }),
   FirebaseAuthStoreError: class extends Error {}
 }))
 
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    trackBeginCheckout: mockTrackBeginCheckout
+  })
+}))
+
+vi.mock('@/platform/telemetry/utils/checkoutAttribution', () => ({
+  getCheckoutAttribution: mockGetCheckoutAttribution
+}))
+
 vi.mock('@/platform/distribution/types', () => ({
   isCloud: true
 }))
@@ -79,6 +93,17 @@ const i18n = createI18n({
         currentPlan: 'Current Plan',
         subscribeTo: 'Subscribe to {plan}',
         changeTo: 'Change to {plan}',
+        tierNameYearly: '{name} Yearly',
+        yearlyCreditsLabel: 'Yearly credits',
+        monthlyCreditsLabel: 'Monthly credits',
+        maxDurationLabel: 'Max duration',
+        gpuLabel: 'GPU',
+        addCreditsLabel: 'Add more credits',
+        customLoRAsLabel: 'Custom LoRAs',
+        videoEstimateLabel: 'Video estimate',
+        videoEstimateHelp: 'How is this calculated?',
+        videoEstimateExplanation: 'Based on average usage.',
+        videoEstimateTryTemplate: 'Try template',
         maxDuration: {
           standard: '30 min',
           creator: '30 min',
@@ -126,6 +151,7 @@ describe('PricingTable', () => {
     mockIsActiveSubscription.value = false
     mockSubscriptionTier.value = null
     mockIsYearlySubscription.value = false
+    mockTrackBeginCheckout.mockReset()
     vi.mocked(global.fetch).mockResolvedValue({
       ok: true,
       json: async () => ({ checkout_url: 'https://checkout.stripe.com/test' })
@@ -148,6 +174,13 @@ describe('PricingTable', () => {
       await creatorButton?.trigger('click')
       await flushPromises()
 
+      expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
+        user_id: 'user-123',
+        tier: 'creator',
+        cycle: 'yearly',
+        checkout_type: 'change',
+        previous_tier: 'standard'
+      })
       expect(mockAccessBillingPortal).toHaveBeenCalledWith('creator-yearly')
     })
 

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

@@ -252,7 +252,6 @@ import { useI18n } from 'vue-i18n'
 import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { t } from '@/i18n'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import {
   TIER_PRICING,
@@ -266,6 +265,9 @@ import { performSubscriptionCheckout } from '@/platform/cloud/subscription/utils
 import { isPlanDowngrade } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import { getCheckoutAttribution } from '@/platform/telemetry/utils/checkoutAttribution'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import type { components } from '@/types/comfyRegistryTypes'
 
 type SubscriptionTier = components['schemas']['SubscriptionTier']
@@ -292,6 +294,8 @@ interface PricingTierConfig {
   isPopular?: boolean
 }
 
+const { t, n } = useI18n()
+
 const billingCycleOptions: BillingCycleOption[] = [
   { label: t('subscription.yearly'), value: 'yearly' },
   { label: t('subscription.monthly'), value: 'monthly' }
@@ -326,10 +330,10 @@ const tiers: PricingTierConfig[] = [
     isPopular: false
   }
 ]
-
-const { n } = useI18n()
 const { isActiveSubscription, subscriptionTier, isYearlySubscription } =
   useSubscription()
+const telemetry = useTelemetry()
+const { userId } = useFirebaseAuthStore()
 const { accessBillingPortal, reportError } = useFirebaseAuthActions()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
@@ -410,6 +414,19 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
 
     try {
       if (isActiveSubscription.value) {
+        const checkoutAttribution = getCheckoutAttribution()
+        if (userId) {
+          telemetry?.trackBeginCheckout({
+            user_id: userId,
+            tier: tierKey,
+            cycle: currentBillingCycle.value,
+            checkout_type: 'change',
+            ...checkoutAttribution,
+            ...(currentTierKey.value
+              ? { previous_tier: currentTierKey.value }
+              : {})
+          })
+        }
         // Pass the target tier to create a deep link to subscription update confirmation
         const checkoutTier = getCheckoutTier(tierKey, currentBillingCycle.value)
         const targetPlan = {
@@ -430,7 +447,11 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
           await accessBillingPortal(checkoutTier)
         }
       } else {
-        await performSubscriptionCheckout(tierKey, currentBillingCycle.value)
+        await performSubscriptionCheckout(
+          tierKey,
+          currentBillingCycle.value,
+          true
+        )
       }
     } finally {
       isLoading.value = false