feat: route all billing through cloud server

- useBillingContext always returns 'workspace' type when team workspaces
  enabled (no personal workspace special case)
- getComfyApiBaseUrl returns '' in cloud mode to proxy through cloud
- comfyRegistryService uses getComfyApiBaseUrl instead of hardcoded URL
- Remove createCustomer from all auth actions (no legacy Stripe customers)
- useSubscriptionDialog simplified to just teamWorkspacesEnabled flag

.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()`"
           }
         ]
       }

CODEOWNERS

@@ -2,57 +2,57 @@
 *                                                 @Comfy-org/comfy_frontend_devs
 
 # Desktop/Electron
-/apps/desktop-ui/                                 @benceruleanlu
-/src/stores/electronDownloadStore.ts              @benceruleanlu
-/src/extensions/core/electronAdapter.ts           @benceruleanlu
-/vite.electron.config.mts                         @benceruleanlu
+/apps/desktop-ui/                                 @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/stores/electronDownloadStore.ts              @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/extensions/core/electronAdapter.ts           @benceruleanlu @Comfy-org/comfy_frontend_devs
+/vite.electron.config.mts                         @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Common UI Components
-/src/components/chip/                             @viva-jinyi
-/src/components/card/                             @viva-jinyi
-/src/components/button/                           @viva-jinyi
-/src/components/input/                            @viva-jinyi
+/src/components/chip/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/card/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/button/                           @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/input/                            @viva-jinyi @Comfy-org/comfy_frontend_devs
 
 # Topbar
-/src/components/topbar/                           @pythongosssss
+/src/components/topbar/                           @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Thumbnail
-/src/renderer/core/thumbnail/                     @pythongosssss
+/src/renderer/core/thumbnail/                     @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Legacy UI
-/scripts/ui/                                      @pythongosssss
+/scripts/ui/                                      @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Link rendering
-/src/renderer/core/canvas/links/                  @benceruleanlu
+/src/renderer/core/canvas/links/                  @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88
+/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @Comfy-org/comfy_frontend_devs
 
 # Node help system
-/src/utils/nodeHelpUtil.ts                        @benceruleanlu
-/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
-/src/services/nodeHelpService.ts                  @benceruleanlu
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/services/nodeHelpService.ts                  @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Selection toolbox
-/src/components/graph/selectionToolbox/           @Myestery
+/src/components/graph/selectionToolbox/           @Myestery @Comfy-org/comfy_frontend_devs
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery @Comfy-org/comfy_frontend_devs
 
 # Workflow Templates
-/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
-/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
 
 # 3D
-/src/extensions/core/load3d.ts                    @jtydhr88
-/src/components/load3d/                           @jtydhr88
+/src/extensions/core/load3d.ts                    @jtydhr88 @Comfy-org/comfy_frontend_devs
+/src/components/load3d/                           @jtydhr88 @Comfy-org/comfy_frontend_devs
 
 # Manager
-/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata @Comfy-org/comfy_frontend_devs
 
 # Translations
 /src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs

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 {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.39.8",
+  "version": "1.39.9",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -18,7 +18,7 @@
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' nx serve",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
-    "dev:electron": "nx serve --config vite.electron.config.mts",
+    "dev:electron": "cross-env DISTRIBUTION=desktop nx serve --config vite.electron.config.mts",
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",

src/App.vue

@@ -19,7 +19,8 @@ import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-import { electronAPI, isElectron } from './utils/envUtil'
+import { electronAPI } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
 import { app } from '@/scripts/app'
 
 const workspaceStore = useWorkspaceStore()
@@ -42,7 +43,7 @@ const showContextMenu = (event: MouseEvent) => {
 onMounted(() => {
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
-  if (isElectron()) {
+  if (isDesktop) {
     document.addEventListener('contextmenu', showContextMenu)
   }
 

src/components/TopMenuSection.test.ts

@@ -18,9 +18,8 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
-import { isElectron } from '@/utils/envUtil'
 
-const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
+const mockData = vi.hoisted(() => ({ isLoggedIn: false, isDesktop: false }))
 
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: () => {
@@ -30,7 +29,13 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
   }
 }))
 
-vi.mock('@/utils/envUtil')
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false,
+  isNightly: false,
+  get isDesktop() {
+    return mockData.isDesktop
+  }
+}))
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({
     currentUser: null,
@@ -107,6 +112,8 @@ describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
     localStorage.clear()
+    mockData.isDesktop = false
+    mockData.isLoggedIn = false
   })
 
   describe('authentication state', () => {
@@ -129,7 +136,7 @@ describe('TopMenuSection', () => {
 
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
-          vi.mocked(isElectron).mockReturnValue(true)
+          mockData.isDesktop = true
           const wrapper = createWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)

src/components/TopMenuSection.vue

@@ -153,7 +153,7 @@ import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isElectron } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
@@ -163,7 +163,6 @@ const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
-const isDesktop = isElectron()
 const { t, n } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()

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/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -55,10 +55,17 @@ vi.mock('@/composables/bottomPanelTabs/useTerminal', () => ({
 }))
 
 vi.mock('@/utils/envUtil', () => ({
-  isElectron: vi.fn(() => false),
   electronAPI: vi.fn(() => null)
 }))
 
+const mockData = vi.hoisted(() => ({ isDesktop: false }))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isDesktop() {
+    return mockData.isDesktop
+  }
+}))
+
 // Mock clipboard API
 Object.defineProperty(navigator, 'clipboard', {
   value: {

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -35,7 +35,8 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { electronAPI } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
@@ -85,7 +86,7 @@ const showContextMenu = (event: MouseEvent) => {
   electronAPI()?.showContextMenu({ type: 'text' })
 }
 
-if (isElectron()) {
+if (isDesktop) {
   useEventListener(terminalEl, 'contextmenu', showContextMenu)
 }
 

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -422,8 +422,9 @@ import { createGridStyle } from '@/utils/gridUtil'
 
 const { t } = useI18n()
 
-const { onClose: originalOnClose } = defineProps<{
+const { onClose: originalOnClose, initialCategory = 'all' } = defineProps<{
   onClose: () => void
+  initialCategory?: string
 }>()
 
 // Track session time for telemetry
@@ -547,7 +548,7 @@ const allTemplates = computed(() => {
 })
 
 // Navigation
-const selectedNavItem = ref<string | null>('all')
+const selectedNavItem = ref<string | null>(initialCategory)
 
 // Filter templates based on selected navigation item
 const navigationFilteredTemplates = computed(() => {

src/components/dialog/content/MissingModelsWarning.vue

@@ -13,7 +13,7 @@
   </div>
   <ListBox :options="missingModels" class="comfy-missing-models">
     <template #option="{ option }">
-      <Suspense v-if="isElectron()">
+      <Suspense v-if="isDesktop">
         <ElectronFileDownload
           :url="option.url"
           :label="option.label"
@@ -40,7 +40,7 @@ import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { isElectron } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
 
 // TODO: Read this from server internal API rather than hardcoding here
 // as some installations may wish to use custom sources

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/helpcenter/HelpCenterMenuContent.vue

@@ -159,13 +159,13 @@ import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { isCloud } from '@/platform/distribution/types'
+import { isCloud, isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { electronAPI } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
@@ -241,7 +241,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'desktop-guide',
       type: 'item',
       label: t('helpCenter.desktopUserGuide'),
-      visible: isElectron(),
+      visible: isDesktop,
       action: () => {
         trackResourceClick('docs', true)
         openExternalLink(
@@ -257,7 +257,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'dev-tools',
       type: 'item',
       label: t('helpCenter.openDevTools'),
-      visible: isElectron(),
+      visible: isDesktop,
       action: () => {
         openDevTools()
         emit('close')
@@ -266,13 +266,13 @@ const moreItems = computed<MenuItem[]>(() => {
     {
       key: 'divider-1',
       type: 'divider',
-      visible: isElectron()
+      visible: isDesktop
     },
     {
       key: 'reinstall',
       type: 'item',
       label: t('helpCenter.reinstall'),
-      visible: isElectron(),
+      visible: isDesktop,
       action: () => {
         onReinstall()
         emit('close')
@@ -374,7 +374,7 @@ const menuItems = computed<MenuItem[]>(() => {
     })
   }
   // Update ComfyUI - only for non-desktop, non-cloud with new manager UI
-  if (!isElectron() && !isCloud && isNewManagerUI.value) {
+  if (!isDesktop && !isCloud && isNewManagerUI.value) {
     items.push({
       key: 'update-comfyui',
       type: 'item',
@@ -551,13 +551,13 @@ const onSubmenuLeave = (): void => {
 }
 
 const openDevTools = (): void => {
-  if (isElectron()) {
+  if (isDesktop) {
     electronAPI().openDevTools()
   }
 }
 
 const onReinstall = (): void => {
-  if (isElectron()) {
+  if (isDesktop) {
     void electronAPI().reinstall()
   }
 }

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/ModelLibrarySidebarTab.vue

@@ -35,7 +35,7 @@
       </div>
     </template>
     <template #body>
-      <ElectronDownloadItems v-if="isElectron()" />
+      <ElectronDownloadItems v-if="isDesktop" />
 
       <Divider type="dashed" class="m-2" />
       <TreeExplorer
@@ -69,7 +69,7 @@ import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
 import { ResourceState, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
-import { isElectron } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
 import { buildTree } from '@/utils/treeUtil'
 
 const modelStore = useModelStore()

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,30 @@ 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'
+
+  // 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 +339,9 @@ const toggleWorkspaceSwitcher = (event: MouseEvent) => {
   workspaceSwitcherPopover.value?.toggle(event)
 }
 
-onMounted(() => {
-  void authActions.fetchBalance()
-})
+const refreshBalance = () => {
+  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/WorkflowTabs.vue

@@ -115,7 +115,7 @@ import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workfl
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isElectron } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 
 import WorkflowOverflowMenu from './WorkflowOverflowMenu.vue'
@@ -148,8 +148,6 @@ const showOverflowArrows = ref(false)
 const leftArrowEnabled = ref(false)
 const rightArrowEnabled = ref(false)
 
-const isDesktop = isElectron()
-
 const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
   value: workflow.path,
   workflow

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,178 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useBillingContext } from './useBillingContext'
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      teamWorkspacesEnabled: true
+    }
+  })
+}))
+
+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,
+      updateActiveWorkspace: vi.fn(),
+      _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 }),
+    getPaymentPortalUrl: vi
+      .fn()
+      .mockResolvedValue({ url: 'https://example.com/billing' })
+  }
+}))
+
+describe('useBillingContext', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+  })
+
+  it('returns workspace type for personal workspace when feature flag enabled', () => {
+    const { type } = useBillingContext()
+    expect(type.value).toBe('workspace')
+  })
+
+  it('provides subscription info from workspace billing', async () => {
+    const { subscription, initialize } = useBillingContext()
+    await initialize()
+
+    expect(subscription.value).toEqual({
+      isActive: true,
+      tier: 'PRO',
+      duration: 'MONTHLY',
+      planSlug: null,
+      renewalDate: null,
+      endDate: null,
+      isCancelled: false,
+      hasFunds: true
+    })
+  })
+
+  it('provides balance info from workspace billing', async () => {
+    const { balance, initialize } = useBillingContext()
+    await initialize()
+
+    expect(balance.value).toEqual({
+      amountMicros: 10000000,
+      currency: 'usd',
+      effectiveBalanceMicros: undefined,
+      prepaidBalanceMicros: undefined,
+      cloudCreditBalanceMicros: undefined
+    })
+  })
+
+  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.toBeDefined()
+  })
+
+  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,240 @@
+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: always use workspace (/billing)
+   */
+  const type = computed<BillingType>(() => {
+    if (!flags.teamWorkspacesEnabled) return 'legacy'
+    return '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) 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/sidebarTabs/useModelLibrarySidebarTab.ts

@@ -1,9 +1,9 @@
 import { markRaw } from 'vue'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
+import { isDesktop } from '@/platform/distribution/types'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
-import { isElectron } from '@/utils/envUtil'
 
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
@@ -15,7 +15,7 @@ export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {
-      if (isElectron()) {
+      if (isDesktop) {
         const electronDownloadStore = useElectronDownloadStore()
         if (electronDownloadStore.inProgressDownloads.length > 0) {
           return electronDownloadStore.inProgressDownloads.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/composables/useExternalLink.test.ts

@@ -1,8 +1,15 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+const mockData = vi.hoisted(() => ({ isDesktop: false }))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isDesktop() {
+    return mockData.isDesktop
+  }
+}))
+
 // Mock the environment utilities
 vi.mock('@/utils/envUtil', () => ({
-  isElectron: vi.fn(),
   electronAPI: vi.fn()
 }))
 
@@ -20,14 +27,14 @@ vi.mock('@/i18n', () => ({
 
 // Import after mocking to get the mocked versions
 import { useExternalLink } from '@/composables/useExternalLink'
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { electronAPI } from '@/utils/envUtil'
 
 describe('useExternalLink', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     // Reset to default state
     i18n.global.locale.value = 'en'
-    vi.mocked(isElectron).mockReturnValue(false)
+    mockData.isDesktop = false
   })
 
   describe('staticUrls', () => {
@@ -95,7 +102,7 @@ describe('useExternalLink', () => {
 
     it('should add platform suffix when requested', () => {
       i18n.global.locale.value = 'en'
-      vi.mocked(isElectron).mockReturnValue(true)
+      mockData.isDesktop = true
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'darwin'
       } as ReturnType<typeof electronAPI>)
@@ -107,7 +114,7 @@ describe('useExternalLink', () => {
 
     it('should add platform suffix with trailing slash', () => {
       i18n.global.locale.value = 'en'
-      vi.mocked(isElectron).mockReturnValue(true)
+      mockData.isDesktop = true
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'win32'
       } as ReturnType<typeof electronAPI>)
@@ -119,7 +126,7 @@ describe('useExternalLink', () => {
 
     it('should combine locale and platform', () => {
       i18n.global.locale.value = 'zh'
-      vi.mocked(isElectron).mockReturnValue(true)
+      mockData.isDesktop = true
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'darwin'
       } as ReturnType<typeof electronAPI>)
@@ -136,7 +143,7 @@ describe('useExternalLink', () => {
 
     it('should not add platform when not desktop', () => {
       i18n.global.locale.value = 'en'
-      vi.mocked(isElectron).mockReturnValue(false)
+      mockData.isDesktop = false
 
       const { buildDocsUrl } = useExternalLink()
       const url = buildDocsUrl('/installation/desktop', { platform: true })

src/composables/useExternalLink.ts

@@ -1,6 +1,7 @@
 import { computed } from 'vue'
 
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
+import { electronAPI } from '@/utils/envUtil'
 import { i18n } from '@/i18n'
 
 /**
@@ -30,7 +31,7 @@ export function useExternalLink() {
   })
 
   const platform = computed(() => {
-    if (!isElectron()) {
+    if (!isDesktop) {
       return null
     }
 

src/composables/useWorkflowTemplateSelectorDialog.test.ts

@@ -0,0 +1,132 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockDialogService = vi.hoisted(() => ({
+  showLayoutDialog: vi.fn()
+}))
+
+const mockDialogStore = vi.hoisted(() => ({
+  closeDialog: vi.fn()
+}))
+
+const mockNewUserService = vi.hoisted(() => ({
+  isNewUser: vi.fn()
+}))
+
+const mockTelemetry = vi.hoisted(() => ({
+  trackTemplateLibraryOpened: vi.fn()
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => mockDialogService
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => mockDialogStore
+}))
+
+vi.mock('@/services/useNewUserService', () => ({
+  useNewUserService: () => mockNewUserService
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => mockTelemetry
+}))
+
+vi.mock(
+  '@/components/custom/widget/WorkflowTemplateSelectorDialog.vue',
+  () => ({
+    default: { name: 'MockWorkflowTemplateSelectorDialog' }
+  })
+)
+
+import { useWorkflowTemplateSelectorDialog } from './useWorkflowTemplateSelectorDialog'
+
+describe('useWorkflowTemplateSelectorDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('show', () => {
+    it('defaults to "all" category for non-new users', () => {
+      mockNewUserService.isNewUser.mockReturnValue(false)
+
+      const dialog = useWorkflowTemplateSelectorDialog()
+      dialog.show()
+
+      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledWith(
+        expect.objectContaining({
+          props: expect.objectContaining({
+            initialCategory: 'all'
+          })
+        })
+      )
+    })
+
+    it('defaults to "basics-getting-started" category for new users', () => {
+      mockNewUserService.isNewUser.mockReturnValue(true)
+
+      const dialog = useWorkflowTemplateSelectorDialog()
+      dialog.show()
+
+      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledWith(
+        expect.objectContaining({
+          props: expect.objectContaining({
+            initialCategory: 'basics-getting-started'
+          })
+        })
+      )
+    })
+
+    it('defaults to "all" when new user status is undetermined', () => {
+      mockNewUserService.isNewUser.mockReturnValue(null)
+
+      const dialog = useWorkflowTemplateSelectorDialog()
+      dialog.show()
+
+      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledWith(
+        expect.objectContaining({
+          props: expect.objectContaining({
+            initialCategory: 'all'
+          })
+        })
+      )
+    })
+
+    it('uses explicit initialCategory when provided', () => {
+      mockNewUserService.isNewUser.mockReturnValue(true)
+
+      const dialog = useWorkflowTemplateSelectorDialog()
+      dialog.show('command', { initialCategory: 'custom-category' })
+
+      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledWith(
+        expect.objectContaining({
+          props: expect.objectContaining({
+            initialCategory: 'custom-category'
+          })
+        })
+      )
+    })
+
+    it('tracks telemetry with source', () => {
+      mockNewUserService.isNewUser.mockReturnValue(false)
+
+      const dialog = useWorkflowTemplateSelectorDialog()
+      dialog.show('sidebar')
+
+      expect(mockTelemetry.trackTemplateLibraryOpened).toHaveBeenCalledWith({
+        source: 'sidebar'
+      })
+    })
+  })
+
+  describe('hide', () => {
+    it('closes the dialog', () => {
+      const dialog = useWorkflowTemplateSelectorDialog()
+      dialog.hide()
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'global-workflow-template-selector'
+      })
+    })
+  })
+})

src/composables/useWorkflowTemplateSelectorDialog.ts

@@ -1,26 +1,37 @@
 import WorkflowTemplateSelectorDialog from '@/components/custom/widget/WorkflowTemplateSelectorDialog.vue'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
+import { useNewUserService } from '@/services/useNewUserService'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const DIALOG_KEY = 'global-workflow-template-selector'
+const GETTING_STARTED_CATEGORY_ID = 'basics-getting-started'
 
 export const useWorkflowTemplateSelectorDialog = () => {
   const dialogService = useDialogService()
   const dialogStore = useDialogStore()
+  const newUserService = useNewUserService()
 
   function hide() {
     dialogStore.closeDialog({ key: DIALOG_KEY })
   }
 
-  function show(source: 'sidebar' | 'menu' | 'command' = 'command') {
+  function show(
+    source: 'sidebar' | 'menu' | 'command' = 'command',
+    options?: { initialCategory?: string }
+  ) {
     useTelemetry()?.trackTemplateLibraryOpened({ source })
 
+    const initialCategory =
+      options?.initialCategory ??
+      (newUserService.isNewUser() ? GETTING_STARTED_CATEGORY_ID : 'all')
+
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,
       component: WorkflowTemplateSelectorDialog,
       props: {
-        onClose: hide
+        onClose: hide,
+        initialCategory
       },
       dialogComponentProps: {
         pt: {

src/config/comfyApi.ts

@@ -23,11 +23,9 @@ export function getComfyApiBaseUrl(): string {
     return BUILD_TIME_API_BASE_URL
   }
 
-  return configValueOrDefault(
-    remoteConfig.value,
-    'comfy_api_base_url',
-    BUILD_TIME_API_BASE_URL
-  )
+  // In cloud mode, proxy all comfy-api requests through the cloud server
+  // instead of calling api.comfy.org directly
+  return ''
 }
 
 export function getComfyPlatformBaseUrl(): string {

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