diff --git a/browser_tests/fixtures/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts
index 30b0da08e..ea5a0b78f 100644
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -119,8 +119,7 @@ class NodeSlotReference {
           window['app'].canvas.ds.convertOffsetToCanvas(rawPos)
 
         // Debug logging - convert Float64Arrays to regular arrays for visibility
-        // eslint-disable-next-line no-console
-        console.log(
+        console.warn(
           `NodeSlotReference debug for ${type} slot ${index} on node ${id}:`,
           {
             nodePos: [node.pos[0], node.pos[1]],
diff --git a/browser_tests/tests/featureFlags.spec.ts b/browser_tests/tests/featureFlags.spec.ts
index 707976829..9155ae910 100644
--- a/browser_tests/tests/featureFlags.spec.ts
+++ b/browser_tests/tests/featureFlags.spec.ts
@@ -27,7 +27,7 @@ test.describe('Feature Flags', () => {
         try {
           const parsed = JSON.parse(data)
           if (parsed.type === 'feature_flags') {
-            window.__capturedMessages.clientFeatureFlags = parsed
+            window.__capturedMessages!.clientFeatureFlags = parsed
           }
         } catch (e) {
           // Not JSON, ignore
@@ -41,7 +41,7 @@ test.describe('Feature Flags', () => {
           window['app']?.api?.serverFeatureFlags &&
           Object.keys(window['app'].api.serverFeatureFlags).length > 0
         ) {
-          window.__capturedMessages.serverFeatureFlags =
+          window.__capturedMessages!.serverFeatureFlags =
             window['app'].api.serverFeatureFlags
           clearInterval(checkInterval)
         }
@@ -57,8 +57,8 @@ test.describe('Feature Flags', () => {
     // Wait for both client and server feature flags
     await newPage.waitForFunction(
       () =>
-        window.__capturedMessages.clientFeatureFlags !== null &&
-        window.__capturedMessages.serverFeatureFlags !== null,
+        window.__capturedMessages!.clientFeatureFlags !== null &&
+        window.__capturedMessages!.serverFeatureFlags !== null,
       { timeout: 10000 }
     )
 
@@ -66,27 +66,27 @@ test.describe('Feature Flags', () => {
     const messages = await newPage.evaluate(() => window.__capturedMessages)
 
     // Verify client sent feature flags
-    expect(messages.clientFeatureFlags).toBeTruthy()
-    expect(messages.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
-    expect(messages.clientFeatureFlags).toHaveProperty('data')
-    expect(messages.clientFeatureFlags.data).toHaveProperty(
+    expect(messages!.clientFeatureFlags).toBeTruthy()
+    expect(messages!.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
+    expect(messages!.clientFeatureFlags).toHaveProperty('data')
+    expect(messages!.clientFeatureFlags!.data).toHaveProperty(
       'supports_preview_metadata'
     )
     expect(
-      typeof messages.clientFeatureFlags.data.supports_preview_metadata
+      typeof messages!.clientFeatureFlags!.data.supports_preview_metadata
     ).toBe('boolean')
 
     // Verify server sent feature flags back
-    expect(messages.serverFeatureFlags).toBeTruthy()
-    expect(messages.serverFeatureFlags).toHaveProperty(
+    expect(messages!.serverFeatureFlags).toBeTruthy()
+    expect(messages!.serverFeatureFlags).toHaveProperty(
       'supports_preview_metadata'
     )
-    expect(typeof messages.serverFeatureFlags.supports_preview_metadata).toBe(
+    expect(typeof messages!.serverFeatureFlags!.supports_preview_metadata).toBe(
       'boolean'
     )
-    expect(messages.serverFeatureFlags).toHaveProperty('max_upload_size')
-    expect(typeof messages.serverFeatureFlags.max_upload_size).toBe('number')
-    expect(Object.keys(messages.serverFeatureFlags).length).toBeGreaterThan(0)
+    expect(messages!.serverFeatureFlags).toHaveProperty('max_upload_size')
+    expect(typeof messages!.serverFeatureFlags!.max_upload_size).toBe('number')
+    expect(Object.keys(messages!.serverFeatureFlags!).length).toBeGreaterThan(0)
 
     await newPage.close()
   })
@@ -96,7 +96,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
-      return window['app'].api.serverFeatureFlags
+      return window['app']!.api.serverFeatureFlags
     })
 
     // Verify we received real feature flags from the backend
@@ -115,7 +115,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test serverSupportsFeature with real backend flags
     const supportsPreviewMetadata = await comfyPage.page.evaluate(() => {
-      return window['app'].api.serverSupportsFeature(
+      return window['app']!.api.serverSupportsFeature(
         'supports_preview_metadata'
       )
     })
@@ -124,15 +124,17 @@ test.describe('Feature Flags', () => {
 
     // Test non-existent feature - should always return false
     const supportsNonExistent = await comfyPage.page.evaluate(() => {
-      return window['app'].api.serverSupportsFeature('non_existent_feature_xyz')
+      return window['app']!.api.serverSupportsFeature(
+        'non_existent_feature_xyz'
+      )
     })
     expect(supportsNonExistent).toBe(false)
 
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
       // Temporarily modify serverFeatureFlags to test behavior
-      const original = window['app'].api.serverFeatureFlags
-      window['app'].api.serverFeatureFlags = {
+      const original = window['app']!.api.serverFeatureFlags
+      window['app']!.api.serverFeatureFlags = {
         bool_true: true,
         bool_false: false,
         string_value: 'yes',
@@ -141,15 +143,15 @@ test.describe('Feature Flags', () => {
       }
 
       const results = {
-        bool_true: window['app'].api.serverSupportsFeature('bool_true'),
-        bool_false: window['app'].api.serverSupportsFeature('bool_false'),
-        string_value: window['app'].api.serverSupportsFeature('string_value'),
-        number_value: window['app'].api.serverSupportsFeature('number_value'),
-        null_value: window['app'].api.serverSupportsFeature('null_value')
+        bool_true: window['app']!.api.serverSupportsFeature('bool_true'),
+        bool_false: window['app']!.api.serverSupportsFeature('bool_false'),
+        string_value: window['app']!.api.serverSupportsFeature('string_value'),
+        number_value: window['app']!.api.serverSupportsFeature('number_value'),
+        null_value: window['app']!.api.serverSupportsFeature('null_value')
       }
 
       // Restore original
-      window['app'].api.serverFeatureFlags = original
+      window['app']!.api.serverFeatureFlags = original
       return results
     })
 
@@ -166,20 +168,20 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test getServerFeature method
     const previewMetadataValue = await comfyPage.page.evaluate(() => {
-      return window['app'].api.getServerFeature('supports_preview_metadata')
+      return window['app']!.api.getServerFeature('supports_preview_metadata')
     })
     expect(typeof previewMetadataValue).toBe('boolean')
 
     // Test getting max_upload_size
     const maxUploadSize = await comfyPage.page.evaluate(() => {
-      return window['app'].api.getServerFeature('max_upload_size')
+      return window['app']!.api.getServerFeature('max_upload_size')
     })
     expect(typeof maxUploadSize).toBe('number')
     expect(maxUploadSize).toBeGreaterThan(0)
 
     // Test getServerFeature with default value for non-existent feature
     const defaultValue = await comfyPage.page.evaluate(() => {
-      return window['app'].api.getServerFeature(
+      return window['app']!.api.getServerFeature(
         'non_existent_feature_xyz',
         'default'
       )
@@ -192,7 +194,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test getServerFeatures returns all flags
     const allFeatures = await comfyPage.page.evaluate(() => {
-      return window['app'].api.getServerFeatures()
+      return window['app']!.api.getServerFeatures()
     })
 
     expect(allFeatures).toBeTruthy()
@@ -205,14 +207,14 @@ test.describe('Feature Flags', () => {
   test('Client feature flags are immutable', async ({ comfyPage }) => {
     // Test that getClientFeatureFlags returns a copy
     const immutabilityTest = await comfyPage.page.evaluate(() => {
-      const flags1 = window['app'].api.getClientFeatureFlags()
-      const flags2 = window['app'].api.getClientFeatureFlags()
+      const flags1 = window['app']!.api.getClientFeatureFlags()
+      const flags2 = window['app']!.api.getClientFeatureFlags()
 
       // Modify the first object
       flags1.test_modification = true
 
       // Get flags again to check if original was modified
-      const flags3 = window['app'].api.getClientFeatureFlags()
+      const flags3 = window['app']!.api.getClientFeatureFlags()
 
       return {
         areEqual: flags1 === flags2,
@@ -238,14 +240,14 @@ test.describe('Feature Flags', () => {
   }) => {
     const immutabilityTest = await comfyPage.page.evaluate(() => {
       // Get a copy of server features
-      const features1 = window['app'].api.getServerFeatures()
+      const features1 = window['app']!.api.getServerFeatures()
 
       // Try to modify it
       features1.supports_preview_metadata = false
       features1.new_feature = 'added'
 
       // Get another copy
-      const features2 = window['app'].api.getServerFeatures()
+      const features2 = window['app']!.api.getServerFeatures()
 
       return {
         modifiedValue: features1.supports_preview_metadata,
@@ -274,7 +276,8 @@ test.describe('Feature Flags', () => {
     // Set up monitoring before navigation
     await newPage.addInitScript(() => {
       // Track when various app components are ready
-      ;(window as any).__appReadiness = {
+
+      window.__appReadiness = {
         featureFlagsReceived: false,
         apiInitialized: false,
         appInitialized: false
@@ -286,7 +289,10 @@ test.describe('Feature Flags', () => {
           window['app']?.api?.serverFeatureFlags?.supports_preview_metadata !==
           undefined
         ) {
-          ;(window as any).__appReadiness.featureFlagsReceived = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            featureFlagsReceived: true
+          }
           clearInterval(checkFeatureFlags)
         }
       }, 10)
@@ -294,7 +300,10 @@ test.describe('Feature Flags', () => {
       // Monitor API initialization
       const checkApi = setInterval(() => {
         if (window['app']?.api) {
-          ;(window as any).__appReadiness.apiInitialized = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            apiInitialized: true
+          }
           clearInterval(checkApi)
         }
       }, 10)
@@ -302,7 +311,10 @@ test.describe('Feature Flags', () => {
       // Monitor app initialization
       const checkApp = setInterval(() => {
         if (window['app']?.graph) {
-          ;(window as any).__appReadiness.appInitialized = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            appInitialized: true
+          }
           clearInterval(checkApp)
         }
       }, 10)
@@ -331,8 +343,8 @@ test.describe('Feature Flags', () => {
     // Get readiness state
     const readiness = await newPage.evaluate(() => {
       return {
-        ...(window as any).__appReadiness,
-        currentFlags: window['app'].api.serverFeatureFlags
+        ...window.__appReadiness,
+        currentFlags: window['app']!.api.serverFeatureFlags
       }
     })
 
diff --git a/browser_tests/tests/nodeHelp.spec.ts b/browser_tests/tests/nodeHelp.spec.ts
index cfb04bc46..709c19a4b 100644
--- a/browser_tests/tests/nodeHelp.spec.ts
+++ b/browser_tests/tests/nodeHelp.spec.ts
@@ -2,15 +2,17 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import { fitToViewInstant } from '../helpers/fitToView'
+import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 // TODO: there might be a better solution for this
 // Helper function to pan canvas and select node
-async function selectNodeWithPan(comfyPage: any, nodeRef: any) {
+async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   const nodePos = await nodeRef.getPosition()
 
   await comfyPage.page.evaluate((pos) => {
-    const app = window['app']
+    const app = window['app']!
     const canvas = app.canvas
     canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
     canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
@@ -345,7 +347,7 @@ This is documentation for a custom node.
 
       // Find and select a custom/group node
       const nodeRefs = await comfyPage.page.evaluate(() => {
-        return window['app'].graph.nodes.map((n: any) => n.id)
+        return window['app']!.graph!.nodes.map((n) => n.id)
       })
       if (nodeRefs.length > 0) {
         const firstNode = await comfyPage.getNodeRefById(nodeRefs[0])
diff --git a/browser_tests/tests/selectionToolboxSubmenus.spec.ts b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
index f526b07e0..fd4c55faf 100644
--- a/browser_tests/tests/selectionToolboxSubmenus.spec.ts
+++ b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -15,7 +16,7 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     await comfyPage.nextFrame()
   })
 
-  const openMoreOptions = async (comfyPage: any) => {
+  const openMoreOptions = async (comfyPage: ComfyPage) => {
     const ksamplerNodes = await comfyPage.getNodeRefsByTitle('KSampler')
     if (ksamplerNodes.length === 0) {
       throw new Error('No KSampler nodes found')
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
index 315758f5c..9b007afb2 100644
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
@@ -419,7 +419,7 @@ test.describe('Vue Node Link Interaction', () => {
     // This avoids relying on an exact path hit-test position.
     await comfyPage.page.evaluate(
       ([targetNodeId, targetSlot, clientPoint]) => {
-        const app = (window as any)['app']
+        const app = window['app']
         const graph = app?.canvas?.graph ?? app?.graph
         if (!graph) throw new Error('Graph not available')
         const node = graph.getNodeById(targetNodeId)
@@ -505,7 +505,7 @@ test.describe('Vue Node Link Interaction', () => {
     // This avoids relying on an exact path hit-test position.
     await comfyPage.page.evaluate(
       ([targetNodeId, targetSlot, clientPoint]) => {
-        const app = (window as any)['app']
+        const app = window['app']
         const graph = app?.canvas?.graph ?? app?.graph
         if (!graph) throw new Error('Graph not available')
         const node = graph.getNodeById(targetNodeId)
diff --git a/package.json b/package.json
index 8f240b1c5..810d73c9e 100644
--- a/package.json
+++ b/package.json
@@ -169,6 +169,7 @@
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",
+    "jsonata": "catalog:",
     "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
diff --git a/packages/shared-frontend-utils/src/formatUtil.test.ts b/packages/shared-frontend-utils/src/formatUtil.test.ts
index ac15a78b1..75d8b8db2 100644
--- a/packages/shared-frontend-utils/src/formatUtil.test.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.test.ts
@@ -120,8 +120,8 @@ describe('formatUtil', () => {
       })
 
       it('should handle null and undefined gracefully', () => {
-        expect(getMediaTypeFromFilename(null as any)).toBe('image')
-        expect(getMediaTypeFromFilename(undefined as any)).toBe('image')
+        expect(getMediaTypeFromFilename(null)).toBe('image')
+        expect(getMediaTypeFromFilename(undefined)).toBe('image')
       })
 
       it('should handle special characters in filenames', () => {
diff --git a/packages/shared-frontend-utils/src/formatUtil.ts b/packages/shared-frontend-utils/src/formatUtil.ts
index 032d1c9ed..fde399eb9 100644
--- a/packages/shared-frontend-utils/src/formatUtil.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.ts
@@ -537,7 +537,9 @@ export function truncateFilename(
  * @param filename The filename to analyze
  * @returns The media type: 'image', 'video', 'audio', or '3D'
  */
-export function getMediaTypeFromFilename(filename: string): MediaType {
+export function getMediaTypeFromFilename(
+  filename: string | null | undefined
+): MediaType {
   if (!filename) return 'image'
   const ext = filename.split('.').pop()?.toLowerCase()
   if (!ext) return 'image'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15ccfa824..eced908c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -186,6 +186,9 @@ catalogs:
     jsdom:
       specifier: ^27.4.0
       version: 27.4.0
+    jsonata:
+      specifier: ^2.1.0
+      version: 2.1.0
     knip:
       specifier: ^5.75.1
       version: 5.75.1
@@ -449,6 +452,9 @@ importers:
       glob:
         specifier: ^11.0.3
         version: 11.0.3
+      jsonata:
+        specifier: 'catalog:'
+        version: 2.1.0
       jsondiffpatch:
         specifier: ^0.6.0
         version: 0.6.0
@@ -6045,6 +6051,10 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonata@2.1.0:
+    resolution: {integrity: sha512-OCzaRMK8HobtX8fp37uIVmL8CY1IGc/a6gLsDqz3quExFR09/U78HUzWYr7T31UEB6+Eu0/8dkVD5fFDOl9a8w==}
+    engines: {node: '>= 8'}
+
   jsonc-eslint-parser@2.4.0:
     resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -14403,6 +14413,8 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonata@2.1.0: {}
+
   jsonc-eslint-parser@2.4.0:
     dependencies:
       acorn: 8.15.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 5856550a0..0c91ec424 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -62,6 +62,7 @@ catalog:
   happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
+  jsonata: ^2.1.0
   jsdom: ^27.4.0
   knip: ^5.75.1
   lint-staged: ^16.2.7
diff --git a/src/base/common/async.ts b/src/base/common/async.ts
index a97f6f1bd..d5aa30679 100644
--- a/src/base/common/async.ts
+++ b/src/base/common/async.ts
@@ -14,6 +14,7 @@ interface IdleDeadline {
 interface IDisposable {
   dispose(): void
 }
+type GlobalWindow = typeof globalThis
 
 /**
  * Internal implementation function that handles the actual scheduling logic.
@@ -21,7 +22,7 @@ interface IDisposable {
  * or fall back to setTimeout-based implementation.
  */
 let _runWhenIdle: (
-  targetWindow: any,
+  targetWindow: GlobalWindow,
   callback: (idle: IdleDeadline) => void,
   timeout?: number
 ) => IDisposable
@@ -37,7 +38,7 @@ export let runWhenGlobalIdle: (
 
   // Self-invoking function to set up the idle callback implementation
 ;(function () {
-  const safeGlobal: any = globalThis
+  const safeGlobal: GlobalWindow = globalThis as GlobalWindow
 
   if (
     typeof safeGlobal.requestIdleCallback !== 'function' ||
diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts
index 6640f9b88..944ce714c 100644
--- a/src/components/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -1,5 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
+import type { MenuItem } from 'primevue/menuitem'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -42,7 +43,8 @@ function createWrapper() {
           queueProgressOverlay: {
             viewJobHistory: 'View job history',
             expandCollapsedQueue: 'Expand collapsed queue',
-            activeJobsShort: '{count} active | {count} active'
+            activeJobsShort: '{count} active | {count} active',
+            clearQueueTooltip: 'Clear queue'
           }
         }
       }
@@ -56,7 +58,12 @@ function createWrapper() {
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
         CurrentUserButton: true,
-        LoginButton: true
+        LoginButton: true,
+        ContextMenu: {
+          name: 'ContextMenu',
+          props: ['model'],
+          template: '<div />'
+        }
       },
       directives: {
         tooltip: () => {}
@@ -134,4 +141,24 @@ describe('TopMenuSection', () => {
     const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
     expect(queueButton.text()).toContain('3 active')
   })
+
+  it('disables the clear queue context menu item when no queued jobs exist', () => {
+    const wrapper = createWrapper()
+    const menu = wrapper.findComponent({ name: 'ContextMenu' })
+    const model = menu.props('model') as MenuItem[]
+    expect(model[0]?.label).toBe('Clear queue')
+    expect(model[0]?.disabled).toBe(true)
+  })
+
+  it('enables the clear queue context menu item when queued jobs exist', async () => {
+    const wrapper = createWrapper()
+    const queueStore = useQueueStore()
+    queueStore.pendingTasks = [createTask('pending-1', 'pending')]
+
+    await nextTick()
+
+    const menu = wrapper.findComponent({ name: 'ContextMenu' })
+    const model = menu.props('model') as MenuItem[]
+    expect(model[0]?.disabled).toBe(false)
+  })
 })
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index a20537038..b6b7bc4f3 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -49,6 +49,7 @@
             class="px-3"
             data-testid="queue-overlay-toggle"
             @click="toggleQueueOverlay"
+            @contextmenu.stop.prevent="showQueueContextMenu"
           >
             <span class="text-sm font-normal tabular-nums">
               {{ activeJobsLabel }}
@@ -57,6 +58,7 @@
               {{ t('sideToolbar.queueProgressOverlay.expandCollapsedQueue') }}
             </span>
           </Button>
+          <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
           <CurrentUserButton
             v-if="isLoggedIn && !isIntegratedTabBar"
             class="shrink-0"
@@ -84,6 +86,8 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import ContextMenu from 'primevue/contextmenu'
+import type { MenuItem } from 'primevue/menuitem'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -101,6 +105,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -119,6 +124,7 @@ const { t, n } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
+const executionStore = useExecutionStore()
 const queueUIStore = useQueueUIStore()
 const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
@@ -144,6 +150,18 @@ const queueHistoryTooltipConfig = computed(() =>
 const customNodesManagerTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.customNodesManager'))
 )
+const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
+const queueContextMenuItems = computed<MenuItem[]>(() => [
+  {
+    label: t('sideToolbar.queueProgressOverlay.clearQueueTooltip'),
+    icon: 'icon-[lucide--list-x] text-destructive-background',
+    class: '*:text-destructive-background',
+    disabled: queueStore.pendingTasks.length === 0,
+    command: () => {
+      void handleClearQueue()
+    }
+  }
+])
 
 // Use either release red dot or conflict red dot
 const shouldShowRedDot = computed((): boolean => {
@@ -170,6 +188,19 @@ const toggleQueueOverlay = () => {
   commandStore.execute('Comfy.Queue.ToggleOverlay')
 }
 
+const showQueueContextMenu = (event: MouseEvent) => {
+  queueContextMenu.value?.show(event)
+}
+
+const handleClearQueue = async () => {
+  const pendingPromptIds = queueStore.pendingTasks
+    .map((task) => task.promptId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
+  await commandStore.execute('Comfy.ClearPendingTasks')
+  executionStore.clearInitializationByPromptIds(pendingPromptIds)
+}
+
 const openCustomNodeManager = async () => {
   try {
     await managerState.openManager({
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts b/src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
index faa20f654..b99e54ea1 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
+import type { Mock } from 'vitest'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -151,8 +152,8 @@ describe('BaseTerminal', () => {
     // Trigger the selection change callback that was registered during mount
     expect(mockTerminal.onSelectionChange).toHaveBeenCalled()
     // Access the mock calls - TypeScript can't infer the mock structure dynamically
-    const selectionCallback = (mockTerminal.onSelectionChange as any).mock
-      .calls[0][0]
+    const mockCalls = (mockTerminal.onSelectionChange as Mock).mock.calls
+    const selectionCallback = mockCalls[0][0] as () => void
     selectionCallback()
     await nextTick()
 
diff --git a/src/components/common/FormRadioGroup.test.ts b/src/components/common/FormRadioGroup.test.ts
index a014b8ecd..2ec26e9af 100644
--- a/src/components/common/FormRadioGroup.test.ts
+++ b/src/components/common/FormRadioGroup.test.ts
@@ -7,6 +7,7 @@ import { createApp } from 'vue'
 import type { SettingOption } from '@/platform/settings/types'
 
 import FormRadioGroup from './FormRadioGroup.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
 describe('FormRadioGroup', () => {
   beforeAll(() => {
@@ -14,7 +15,8 @@ describe('FormRadioGroup', () => {
     app.use(PrimeVue)
   })
 
-  const mountComponent = (props: any, options = {}) => {
+  type FormRadioGroupProps = ComponentProps<typeof FormRadioGroup>
+  const mountComponent = (props: FormRadioGroupProps, options = {}) => {
     return mount(FormRadioGroup, {
       global: {
         plugins: [PrimeVue],
@@ -92,9 +94,9 @@ describe('FormRadioGroup', () => {
 
     it('handles custom object with optionLabel and optionValue', () => {
       const options = [
-        { name: 'First Option', id: 1 },
-        { name: 'Second Option', id: 2 },
-        { name: 'Third Option', id: 3 }
+        { name: 'First Option', id: '1' },
+        { name: 'Second Option', id: '2' },
+        { name: 'Third Option', id: '3' }
       ]
 
       const wrapper = mountComponent({
@@ -108,9 +110,9 @@ describe('FormRadioGroup', () => {
       const radioButtons = wrapper.findAllComponents(RadioButton)
       expect(radioButtons).toHaveLength(3)
 
-      expect(radioButtons[0].props('value')).toBe(1)
-      expect(radioButtons[1].props('value')).toBe(2)
-      expect(radioButtons[2].props('value')).toBe(3)
+      expect(radioButtons[0].props('value')).toBe('1')
+      expect(radioButtons[1].props('value')).toBe('2')
+      expect(radioButtons[2].props('value')).toBe('3')
 
       const labels = wrapper.findAll('label')
       expect(labels[0].text()).toBe('First Option')
@@ -167,10 +169,7 @@ describe('FormRadioGroup', () => {
     })
 
     it('handles object with missing properties gracefully', () => {
-      const options = [
-        { label: 'Option 1', val: 'opt1' },
-        { text: 'Option 2', value: 'opt2' }
-      ]
+      const options = [{ label: 'Option 1', val: 'opt1' }]
 
       const wrapper = mountComponent({
         modelValue: 'opt1',
@@ -179,11 +178,10 @@ describe('FormRadioGroup', () => {
       })
 
       const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(2)
+      expect(radioButtons).toHaveLength(1)
 
       const labels = wrapper.findAll('label')
       expect(labels[0].text()).toBe('Unknown')
-      expect(labels[1].text()).toBe('Option 2')
     })
   })
 
diff --git a/src/components/common/FormRadioGroup.vue b/src/components/common/FormRadioGroup.vue
index 19889132b..6155bed0f 100644
--- a/src/components/common/FormRadioGroup.vue
+++ b/src/components/common/FormRadioGroup.vue
@@ -28,7 +28,7 @@ import type { SettingOption } from '@/platform/settings/types'
 
 const props = defineProps<{
   modelValue: any
-  options: (SettingOption | string)[]
+  options?: (string | SettingOption | Record<string, string>)[]
   optionLabel?: string
   optionValue?: string
   id?: string
diff --git a/src/components/common/UrlInput.test.ts b/src/components/common/UrlInput.test.ts
index e3fc81d29..9c34c11c5 100644
--- a/src/components/common/UrlInput.test.ts
+++ b/src/components/common/UrlInput.test.ts
@@ -7,6 +7,7 @@ import { beforeEach, describe, expect, it } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
 import UrlInput from './UrlInput.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
 describe('UrlInput', () => {
   beforeEach(() => {
@@ -14,7 +15,13 @@ describe('UrlInput', () => {
     app.use(PrimeVue)
   })
 
-  const mountComponent = (props: any, options = {}) => {
+  const mountComponent = (
+    props: ComponentProps<typeof UrlInput> & {
+      placeholder?: string
+      disabled?: boolean
+    },
+    options = {}
+  ) => {
     return mount(UrlInput, {
       global: {
         plugins: [PrimeVue],
@@ -169,25 +176,25 @@ describe('UrlInput', () => {
       await input.setValue('  https://leading-space.com')
       await input.trigger('input')
       await nextTick()
-      expect(wrapper.vm.internalValue).toBe('https://leading-space.com')
+      expect(input.element.value).toBe('https://leading-space.com')
 
       // Test trailing whitespace
       await input.setValue('https://trailing-space.com  ')
       await input.trigger('input')
       await nextTick()
-      expect(wrapper.vm.internalValue).toBe('https://trailing-space.com')
+      expect(input.element.value).toBe('https://trailing-space.com')
 
       // Test both leading and trailing whitespace
       await input.setValue('  https://both-spaces.com  ')
       await input.trigger('input')
       await nextTick()
-      expect(wrapper.vm.internalValue).toBe('https://both-spaces.com')
+      expect(input.element.value).toBe('https://both-spaces.com')
 
       // Test whitespace in the middle of the URL
       await input.setValue('https:// middle-space.com')
       await input.trigger('input')
       await nextTick()
-      expect(wrapper.vm.internalValue).toBe('https://middle-space.com')
+      expect(input.element.value).toBe('https://middle-space.com')
     })
 
     it('trims whitespace when value set externally', async () => {
@@ -196,15 +203,17 @@ describe('UrlInput', () => {
         placeholder: 'Enter URL'
       })
 
+      const input = wrapper.find('input')
+
       // Check initial value is trimmed
-      expect(wrapper.vm.internalValue).toBe('https://initial-value.com')
+      expect(input.element.value).toBe('https://initial-value.com')
 
       // Update props with whitespace
       await wrapper.setProps({ modelValue: '  https://updated-value.com  ' })
       await nextTick()
 
       // Check updated value is trimmed
-      expect(wrapper.vm.internalValue).toBe('https://updated-value.com')
+      expect(input.element.value).toBe('https://updated-value.com')
     })
   })
 })
diff --git a/src/components/common/UserAvatar.test.ts b/src/components/common/UserAvatar.test.ts
index 0c6b26e4e..0b5df7052 100644
--- a/src/components/common/UserAvatar.test.ts
+++ b/src/components/common/UserAvatar.test.ts
@@ -1,3 +1,5 @@
+import type { ComponentProps } from 'vue-component-type-helpers'
+
 import { mount } from '@vue/test-utils'
 import Avatar from 'primevue/avatar'
 import PrimeVue from 'primevue/config'
@@ -27,7 +29,7 @@ describe('UserAvatar', () => {
     app.use(PrimeVue)
   })
 
-  const mountComponent = (props: any = {}) => {
+  const mountComponent = (props: ComponentProps<typeof UserAvatar> = {}) => {
     return mount(UserAvatar, {
       global: {
         plugins: [PrimeVue, i18n],
diff --git a/src/components/common/WorkspaceProfilePic.vue b/src/components/common/WorkspaceProfilePic.vue
new file mode 100644
index 000000000..642317267
--- /dev/null
+++ b/src/components/common/WorkspaceProfilePic.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="flex size-6 items-center justify-center rounded-md text-base font-semibold text-white"
+    :style="{
+      background: gradient,
+      textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)'
+    }"
+  >
+    {{ letter }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const { workspaceName } = defineProps<{
+  workspaceName: string
+}>()
+
+const letter = computed(() => workspaceName?.charAt(0)?.toUpperCase() ?? '?')
+
+const gradient = computed(() => {
+  const seed = letter.value.charCodeAt(0)
+
+  function mulberry32(a: number) {
+    return function () {
+      let t = (a += 0x6d2b79f5)
+      t = Math.imul(t ^ (t >>> 15), t | 1)
+      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+    }
+  }
+
+  const rand = mulberry32(seed)
+
+  const hue1 = Math.floor(rand() * 360)
+  const hue2 = (hue1 + 40 + Math.floor(rand() * 80)) % 360
+  const sat = 65 + Math.floor(rand() * 20)
+  const light = 55 + Math.floor(rand() * 15)
+
+  return `linear-gradient(135deg, hsl(${hue1}, ${sat}%, ${light}%), hsl(${hue2}, ${sat}%, ${light}%))`
+})
+</script>
diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index afc056d61..2a1f0ef3d 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -4,7 +4,12 @@
     v-for="item in dialogStore.dialogStack"
     :key="item.key"
     v-model:visible="item.visible"
-    class="global-dialog"
+    :class="[
+      'global-dialog',
+      item.key === 'global-settings' && teamWorkspacesEnabled
+        ? 'settings-dialog-workspace'
+        : ''
+    ]"
     v-bind="item.dialogComponentProps"
     :pt="item.dialogComponentProps.pt"
     :aria-labelledby="item.key"
@@ -38,7 +43,15 @@
 <script setup lang="ts">
 import Dialog from 'primevue/dialog'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
+import { computed } from 'vue'
+
+const { flags } = useFeatureFlags()
+const teamWorkspacesEnabled = computed(
+  () => isCloud && flags.teamWorkspacesEnabled
+)
 
 const dialogStore = useDialogStore()
 </script>
@@ -55,4 +68,27 @@ const dialogStore = useDialogStore()
   @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
   @apply pt-0;
 }
+
+/* Workspace mode: wider settings dialog */
+.settings-dialog-workspace {
+  width: 100%;
+  max-width: 1440px;
+}
+
+.settings-dialog-workspace .p-dialog-content {
+  width: 100%;
+}
+
+.manager-dialog {
+  height: 80vh;
+  max-width: 1724px;
+  max-height: 1026px;
+}
+
+@media (min-width: 3000px) {
+  .manager-dialog {
+    max-width: 2200px;
+    max-height: 1320px;
+  }
+}
 </style>
diff --git a/src/components/dialog/content/setting/SettingItem.test.ts b/src/components/dialog/content/setting/SettingItem.test.ts
index 17e3bab06..673fe5894 100644
--- a/src/components/dialog/content/setting/SettingItem.test.ts
+++ b/src/components/dialog/content/setting/SettingItem.test.ts
@@ -18,7 +18,7 @@ vi.mock('@/utils/formatUtil', () => ({
 }))
 
 describe('SettingItem', () => {
-  const mountComponent = (props: any, options = {}): any => {
+  const mountComponent = (props: Record<string, unknown>, options = {}) => {
     return mount(SettingItem, {
       global: {
         plugins: [PrimeVue, i18n, createPinia()],
@@ -32,6 +32,7 @@ describe('SettingItem', () => {
           'i-material-symbols:experiment-outline': true
         }
       },
+      // @ts-expect-error - Test utility accepts flexible props for testing edge cases
       props,
       ...options
     })
@@ -48,8 +49,9 @@ describe('SettingItem', () => {
       }
     })
 
-    // Get the options property of the FormItem
-    const options = wrapper.vm.formItem.options
+    // Check the FormItem component's item prop for the options
+    const formItem = wrapper.findComponent({ name: 'FormItem' })
+    const options = formItem.props('item').options
     expect(options).toEqual([
       { text: 'Correctly Translated', value: 'Correctly Translated' }
     ])
@@ -67,7 +69,8 @@ describe('SettingItem', () => {
     })
 
     // Should not throw an error and tooltip should be preserved as-is
-    expect(wrapper.vm.formItem.tooltip).toBe(
+    const formItem = wrapper.findComponent({ name: 'FormItem' })
+    expect(formItem.props('item').tooltip).toBe(
       'This will load a larger version of @mtb/markdown-parser that bundles shiki'
     )
   })
diff --git a/src/components/dialog/content/setting/UsageLogsTable.test.ts b/src/components/dialog/content/setting/UsageLogsTable.test.ts
index b98664668..72a4fbdba 100644
--- a/src/components/dialog/content/setting/UsageLogsTable.test.ts
+++ b/src/components/dialog/content/setting/UsageLogsTable.test.ts
@@ -12,6 +12,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import type { AuditLog } from '@/services/customerEventsService'
 import { EventType } from '@/services/customerEventsService'
 
 import UsageLogsTable from './UsageLogsTable.vue'
@@ -19,7 +20,7 @@ import UsageLogsTable from './UsageLogsTable.vue'
 type ComponentInstance = InstanceType<typeof UsageLogsTable> & {
   loading: boolean
   error: string | null
-  events: any[]
+  events: Partial<AuditLog>[]
   pagination: {
     page: number
     limit: number
diff --git a/src/components/dialog/content/setting/WorkspacePanel.vue b/src/components/dialog/content/setting/WorkspacePanel.vue
new file mode 100644
index 000000000..aff8f3733
--- /dev/null
+++ b/src/components/dialog/content/setting/WorkspacePanel.vue
@@ -0,0 +1,11 @@
+<template>
+  <TabPanel value="Workspace" class="h-full">
+    <WorkspacePanelContent />
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import TabPanel from 'primevue/tabpanel'
+
+import WorkspacePanelContent from '@/components/dialog/content/setting/WorkspacePanelContent.vue'
+</script>
diff --git a/src/components/dialog/content/setting/WorkspacePanelContent.vue b/src/components/dialog/content/setting/WorkspacePanelContent.vue
new file mode 100644
index 000000000..9366a573f
--- /dev/null
+++ b/src/components/dialog/content/setting/WorkspacePanelContent.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="flex h-full w-full flex-col">
+    <div class="pb-8 flex items-center gap-4">
+      <WorkspaceProfilePic
+        class="size-12 !text-3xl"
+        :workspace-name="workspaceName"
+      />
+      <h1 class="text-3xl text-base-foreground">
+        {{ workspaceName }}
+      </h1>
+    </div>
+    <Tabs :value="activeTab" @update:value="setActiveTab">
+      <div class="flex w-full items-center">
+        <TabList class="w-full">
+          <Tab value="plan">{{ $t('workspacePanel.tabs.planCredits') }}</Tab>
+        </TabList>
+
+        <template v-if="permissions.canAccessWorkspaceMenu">
+          <Button
+            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+            variant="muted-textonly"
+            size="icon"
+            :aria-label="$t('g.moreOptions')"
+            @click="menu?.toggle($event)"
+          >
+            <i class="pi pi-ellipsis-h" />
+          </Button>
+          <Menu ref="menu" :model="menuItems" :popup="true">
+            <template #item="{ item }">
+              <div
+                v-tooltip="
+                  item.disabled && deleteTooltip
+                    ? { value: deleteTooltip, showDelay: 0 }
+                    : null
+                "
+                :class="[
+                  'flex items-center gap-2 px-3 py-2',
+                  item.class,
+                  item.disabled ? 'pointer-events-auto' : ''
+                ]"
+                @click="
+                  item.command?.({
+                    originalEvent: $event,
+                    item
+                  })
+                "
+              >
+                <i :class="item.icon" />
+                <span>{{ item.label }}</span>
+              </div>
+            </template>
+          </Menu>
+        </template>
+      </div>
+
+      <TabPanels>
+        <TabPanel value="plan">
+          <SubscriptionPanelContent />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Menu from 'primevue/menu'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import TabPanel from 'primevue/tabpanel'
+import TabPanels from 'primevue/tabpanels'
+import Tabs from 'primevue/tabs'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
+import Button from '@/components/ui/button/Button.vue'
+import SubscriptionPanelContent from '@/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogService } from '@/services/dialogService'
+
+const { defaultTab = 'plan' } = defineProps<{
+  defaultTab?: string
+}>()
+
+const { t } = useI18n()
+const {
+  showLeaveWorkspaceDialog,
+  showDeleteWorkspaceDialog,
+  showEditWorkspaceDialog
+} = useDialogService()
+const workspaceStore = useTeamWorkspaceStore()
+const { workspaceName, isWorkspaceSubscribed } = storeToRefs(workspaceStore)
+
+const { activeTab, setActiveTab, permissions, uiConfig } = useWorkspaceUI()
+
+const menu = ref<InstanceType<typeof Menu> | null>(null)
+
+function handleLeaveWorkspace() {
+  showLeaveWorkspaceDialog()
+}
+
+function handleDeleteWorkspace() {
+  showDeleteWorkspaceDialog()
+}
+
+function handleEditWorkspace() {
+  showEditWorkspaceDialog()
+}
+
+// Disable delete when workspace has an active subscription (to prevent accidental deletion)
+// Use workspace's own subscription status, not the global isActiveSubscription
+const isDeleteDisabled = computed(
+  () =>
+    uiConfig.value.workspaceMenuAction === 'delete' &&
+    isWorkspaceSubscribed.value
+)
+
+const deleteTooltip = computed(() => {
+  if (!isDeleteDisabled.value) return null
+  const tooltipKey = uiConfig.value.workspaceMenuDisabledTooltip
+  return tooltipKey ? t(tooltipKey) : null
+})
+
+const menuItems = computed(() => {
+  const items = []
+
+  // Add edit option for owners
+  if (uiConfig.value.showEditWorkspaceMenuItem) {
+    items.push({
+      label: t('workspacePanel.menu.editWorkspace'),
+      icon: 'pi pi-pencil',
+      command: handleEditWorkspace
+    })
+  }
+
+  const action = uiConfig.value.workspaceMenuAction
+  if (action === 'delete') {
+    items.push({
+      label: t('workspacePanel.menu.deleteWorkspace'),
+      icon: 'pi pi-trash',
+      class: isDeleteDisabled.value
+        ? 'text-danger/50 cursor-not-allowed'
+        : 'text-danger',
+      disabled: isDeleteDisabled.value,
+      command: isDeleteDisabled.value ? undefined : handleDeleteWorkspace
+    })
+  } else if (action === 'leave') {
+    items.push({
+      label: t('workspacePanel.menu.leaveWorkspace'),
+      icon: 'pi pi-sign-out',
+      command: handleLeaveWorkspace
+    })
+  }
+
+  return items
+})
+
+onMounted(() => {
+  setActiveTab(defaultTab)
+})
+</script>
diff --git a/src/components/dialog/content/setting/WorkspaceSidebarItem.vue b/src/components/dialog/content/setting/WorkspaceSidebarItem.vue
new file mode 100644
index 000000000..cab92c7a8
--- /dev/null
+++ b/src/components/dialog/content/setting/WorkspaceSidebarItem.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="flex items-center gap-2">
+    <WorkspaceProfilePic
+      class="size-6 text-xs"
+      :workspace-name="workspaceName"
+    />
+
+    <span>{{ workspaceName }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
+</script>
diff --git a/src/components/dialog/content/signin/ApiKeyForm.test.ts b/src/components/dialog/content/signin/ApiKeyForm.test.ts
index 5d6a726b8..4d073cb08 100644
--- a/src/components/dialog/content/signin/ApiKeyForm.test.ts
+++ b/src/components/dialog/content/signin/ApiKeyForm.test.ts
@@ -1,3 +1,5 @@
+import type { ComponentProps } from 'vue-component-type-helpers'
+
 import { Form } from '@primevue/forms'
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
@@ -63,7 +65,7 @@ describe('ApiKeyForm', () => {
     mockLoading.mockReset()
   })
 
-  const mountComponent = (props: any = {}) => {
+  const mountComponent = (props: ComponentProps<typeof ApiKeyForm> = {}) => {
     return mount(ApiKeyForm, {
       global: {
         plugins: [PrimeVue, createPinia(), i18n],
diff --git a/src/components/dialog/content/signin/SignInForm.test.ts b/src/components/dialog/content/signin/SignInForm.test.ts
index da898532a..c27d15929 100644
--- a/src/components/dialog/content/signin/SignInForm.test.ts
+++ b/src/components/dialog/content/signin/SignInForm.test.ts
@@ -112,8 +112,10 @@ describe('SignInForm', () => {
 
       // Mock getElementById to track focus
       const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
+      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
+      vi.spyOn(document, 'getElementById').mockReturnValue(
+        mockElement as HTMLElement
+      )
 
       // Click forgot password link while email is empty
       await forgotPasswordSpan.trigger('click')
@@ -138,7 +140,10 @@ describe('SignInForm', () => {
 
     it('calls handleForgotPassword with email when link is clicked', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Spy on handleForgotPassword
       const handleForgotPasswordSpy = vi.spyOn(
@@ -161,7 +166,10 @@ describe('SignInForm', () => {
   describe('Form Submission', () => {
     it('emits submit event when onSubmit is called with valid data', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Call onSubmit directly with valid data
       component.onSubmit({
@@ -181,7 +189,10 @@ describe('SignInForm', () => {
 
     it('does not emit submit event when form is invalid', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Call onSubmit with invalid form
       component.onSubmit({ valid: false, values: {} })
@@ -254,12 +265,17 @@ describe('SignInForm', () => {
   describe('Focus Behavior', () => {
     it('focuses email input when handleForgotPassword is called with invalid email', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Mock getElementById to track focus
       const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
+      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
+      vi.spyOn(document, 'getElementById').mockReturnValue(
+        mockElement as HTMLElement
+      )
 
       // Call handleForgotPassword with no email
       await component.handleForgotPassword('', false)
@@ -273,12 +289,17 @@ describe('SignInForm', () => {
 
     it('does not focus email input when valid email is provided', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Mock getElementById
       const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
+      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
+      vi.spyOn(document, 'getElementById').mockReturnValue(
+        mockElement as HTMLElement
+      )
 
       // Call handleForgotPassword with valid email
       await component.handleForgotPassword('test@example.com', true)
diff --git a/src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue b/src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue
new file mode 100644
index 000000000..b9444ce58
--- /dev/null
+++ b/src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue
@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.createWorkspaceDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-4 px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.createWorkspaceDialog.message') }}
+      </p>
+      <div class="flex flex-col gap-2">
+        <label class="text-sm text-base-foreground">
+          {{ $t('workspacePanel.createWorkspaceDialog.nameLabel') }}
+        </label>
+        <input
+          v-model="workspaceName"
+          type="text"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          :placeholder="
+            $t('workspacePanel.createWorkspaceDialog.namePlaceholder')
+          "
+          @keydown.enter="isValidName && onCreate()"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        :loading
+        :disabled="!isValidName"
+        @click="onCreate"
+      >
+        {{ $t('workspacePanel.createWorkspaceDialog.create') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { onConfirm } = defineProps<{
+  onConfirm?: (name: string) => void | Promise<void>
+}>()
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+const toast = useToast()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+const workspaceName = ref('')
+
+const isValidName = computed(() => {
+  const name = workspaceName.value.trim()
+  // Allow alphanumeric, spaces, hyphens, underscores (safe characters)
+  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_]*$/
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'create-workspace' })
+}
+
+async function onCreate() {
+  if (!isValidName.value) return
+  loading.value = true
+  try {
+    const name = workspaceName.value.trim()
+    // Call optional callback if provided
+    await onConfirm?.(name)
+    dialogStore.closeDialog({ key: 'create-workspace' })
+    // Create workspace and switch to it (triggers reload internally)
+    await workspaceStore.createWorkspace(name)
+  } catch (error) {
+    console.error('[CreateWorkspaceDialog] Failed to create workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToCreateWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/components/dialog/content/workspace/DeleteWorkspaceDialogContent.vue b/src/components/dialog/content/workspace/DeleteWorkspaceDialogContent.vue
new file mode 100644
index 000000000..dea2da18d
--- /dev/null
+++ b/src/components/dialog/content/workspace/DeleteWorkspaceDialogContent.vue
@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.deleteDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{
+          workspaceName
+            ? $t('workspacePanel.deleteDialog.messageWithName', {
+                name: workspaceName
+              })
+            : $t('workspacePanel.deleteDialog.message')
+        }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onDelete">
+        {{ $t('g.delete') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { workspaceId, workspaceName } = defineProps<{
+  workspaceId?: string
+  workspaceName?: string
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'delete-workspace' })
+}
+
+async function onDelete() {
+  loading.value = true
+  try {
+    // Delete workspace (uses workspaceId if provided, otherwise current workspace)
+    await workspaceStore.deleteWorkspace(workspaceId)
+    dialogStore.closeDialog({ key: 'delete-workspace' })
+    window.location.reload()
+  } catch (error) {
+    console.error('[DeleteWorkspaceDialog] Failed to delete workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToDeleteWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/components/dialog/content/workspace/EditWorkspaceDialogContent.vue b/src/components/dialog/content/workspace/EditWorkspaceDialogContent.vue
new file mode 100644
index 000000000..62b650a4e
--- /dev/null
+++ b/src/components/dialog/content/workspace/EditWorkspaceDialogContent.vue
@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.editWorkspaceDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-4 px-4 py-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-sm text-base-foreground">
+          {{ $t('workspacePanel.editWorkspaceDialog.nameLabel') }}
+        </label>
+        <input
+          v-model="newWorkspaceName"
+          type="text"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          @keydown.enter="isValidName && onSave()"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        :loading
+        :disabled="!isValidName"
+        @click="onSave"
+      >
+        {{ $t('workspacePanel.editWorkspaceDialog.save') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+const newWorkspaceName = ref(workspaceStore.workspaceName)
+
+const isValidName = computed(() => {
+  const name = newWorkspaceName.value.trim()
+  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_]*$/
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'edit-workspace' })
+}
+
+async function onSave() {
+  if (!isValidName.value) return
+  loading.value = true
+  try {
+    await workspaceStore.updateWorkspaceName(newWorkspaceName.value.trim())
+    dialogStore.closeDialog({ key: 'edit-workspace' })
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.toast.workspaceUpdated.title'),
+      detail: t('workspacePanel.toast.workspaceUpdated.message'),
+      life: 5000
+    })
+  } catch (error) {
+    console.error('[EditWorkspaceDialog] Failed to update workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToUpdateWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/components/dialog/content/workspace/LeaveWorkspaceDialogContent.vue b/src/components/dialog/content/workspace/LeaveWorkspaceDialogContent.vue
new file mode 100644
index 000000000..6a3d16c36
--- /dev/null
+++ b/src/components/dialog/content/workspace/LeaveWorkspaceDialogContent.vue
@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.leaveDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.leaveDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onLeave">
+        {{ $t('workspacePanel.leaveDialog.leave') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'leave-workspace' })
+}
+
+async function onLeave() {
+  loading.value = true
+  try {
+    // leaveWorkspace() handles switching to personal workspace internally and reloads
+    await workspaceStore.leaveWorkspace()
+    dialogStore.closeDialog({ key: 'leave-workspace' })
+    window.location.reload()
+  } catch (error) {
+    console.error('[LeaveWorkspaceDialog] Failed to leave workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToLeaveWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index 151dfd405..849a9ba25 100644
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -1,4 +1,4 @@
-<!-- A button that shows current authenticated user's avatar -->
+<!-- A button that shows workspace icon (Cloud) or user avatar -->
 <template>
   <div>
     <Button
@@ -16,7 +16,16 @@
           )
         "
       >
-        <UserAvatar :photo-url="photoURL" :class="compact && 'size-full'" />
+        <WorkspaceProfilePic
+          v-if="showWorkspaceIcon"
+          :workspace-name="workspaceName"
+          :class="compact && 'size-full'"
+        />
+        <UserAvatar
+          v-else
+          :photo-url="photoURL"
+          :class="compact && 'size-full'"
+        />
 
         <i v-if="showArrow" class="icon-[lucide--chevron-down] size-3 px-1" />
       </div>
@@ -27,38 +36,65 @@
       :show-arrow="false"
       :pt="{
         root: {
-          class: 'rounded-lg'
+          class: 'rounded-lg w-80'
         }
       }"
     >
-      <CurrentUserPopover @close="closePopover" />
+      <!-- Workspace mode: workspace-aware popover -->
+      <CurrentUserPopoverWorkspace
+        v-if="teamWorkspacesEnabled"
+        @close="closePopover"
+      />
+      <!-- Legacy mode: original popover -->
+      <CurrentUserPopover v-else @close="closePopover" />
     </Popover>
   </div>
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
+import { computed, defineAsyncComponent, ref } from 'vue'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
+import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import CurrentUserPopover from './CurrentUserPopover.vue'
 
+const CurrentUserPopoverWorkspace = defineAsyncComponent(
+  () => import('./CurrentUserPopoverWorkspace.vue')
+)
+
 const { showArrow = true, compact = false } = defineProps<{
   showArrow?: boolean
   compact?: boolean
 }>()
 
+const { flags } = useFeatureFlags()
+const teamWorkspacesEnabled = computed(() => flags.teamWorkspacesEnabled)
+
 const { isLoggedIn, userPhotoUrl } = useCurrentUser()
 
-const popover = ref<InstanceType<typeof Popover> | null>(null)
 const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
 
+const showWorkspaceIcon = computed(() => isCloud && teamWorkspacesEnabled.value)
+
+const workspaceName = computed(() => {
+  if (!showWorkspaceIcon.value) return ''
+  const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
+  return workspaceName.value
+})
+
+const popover = ref<InstanceType<typeof Popover> | null>(null)
+
 const closePopover = () => {
   popover.value?.hide()
 }
diff --git a/src/components/topbar/CurrentUserPopoverWorkspace.vue b/src/components/topbar/CurrentUserPopoverWorkspace.vue
new file mode 100644
index 000000000..51aa19dd5
--- /dev/null
+++ b/src/components/topbar/CurrentUserPopoverWorkspace.vue
@@ -0,0 +1,337 @@
+<!-- A popover that shows current user information and actions -->
+<template>
+  <div
+    class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+  >
+    <!-- User Info Section -->
+    <div class="flex flex-col items-center px-0 py-3 mb-4">
+      <UserAvatar
+        class="mb-1"
+        :photo-url="userPhotoUrl"
+        :pt:icon:class="{
+          'text-2xl!': !userPhotoUrl
+        }"
+        size="large"
+      />
+
+      <!-- User Details -->
+      <h3 class="my-0 mb-1 truncate text-base font-bold text-base-foreground">
+        {{ userDisplayName || $t('g.user') }}
+      </h3>
+      <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
+        {{ userEmail }}
+      </p>
+    </div>
+
+    <!-- Workspace Selector -->
+    <div
+      class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 hover:bg-secondary-background-hover"
+      @click="toggleWorkspaceSwitcher"
+    >
+      <div class="flex min-w-0 flex-1 items-center gap-2">
+        <WorkspaceProfilePic
+          class="size-6 shrink-0 text-xs"
+          :workspace-name="workspaceName"
+        />
+        <span class="truncate text-sm text-base-foreground">{{
+          workspaceName
+        }}</span>
+        <div
+          v-if="workspaceTierName"
+          class="shrink-0 rounded bg-secondary-background-hover px-1.5 py-0.5 text-xs"
+        >
+          {{ workspaceTierName }}
+        </div>
+        <span v-else class="shrink-0 text-xs text-muted-foreground">
+          {{ $t('workspaceSwitcher.subscribe') }}
+        </span>
+      </div>
+      <i class="pi pi-chevron-down shrink-0 text-sm text-muted-foreground" />
+    </div>
+
+    <Popover
+      ref="workspaceSwitcherPopover"
+      append-to="body"
+      :pt="{
+        content: {
+          class: 'p-0'
+        }
+      }"
+    >
+      <WorkspaceSwitcherPopover
+        @select="workspaceSwitcherPopover?.hide()"
+        @create="handleCreateWorkspace"
+      />
+    </Popover>
+
+    <!-- Credits Section (PERSONAL and OWNER only) -->
+    <template v-if="showCreditsSection">
+      <div class="flex items-center gap-2 px-4 py-2">
+        <i class="icon-[lucide--component] text-sm text-amber-400" />
+        <Skeleton
+          v-if="isLoadingBalance"
+          width="4rem"
+          height="1.25rem"
+          class="w-full"
+        />
+        <span v-else class="text-base font-semibold text-base-foreground">{{
+          displayedCredits
+        }}</span>
+        <i
+          v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
+          class="icon-[lucide--circle-help] mr-auto cursor-help text-base text-muted-foreground"
+        />
+        <!-- Subscribed: Show Add Credits button -->
+        <Button
+          v-if="isActiveSubscription && isWorkspaceSubscribed"
+          variant="secondary"
+          size="sm"
+          class="text-base-foreground"
+          data-testid="add-credits-button"
+          @click="handleTopUp"
+        >
+          {{ $t('subscription.addCredits') }}
+        </Button>
+        <!-- Unsubscribed: Show Subscribe button (disabled until billing is ready) -->
+        <SubscribeButton
+          v-else
+          disabled
+          :fluid="false"
+          :label="$t('workspaceSwitcher.subscribe')"
+          size="sm"
+          variant="gradient"
+        />
+      </div>
+
+      <Divider class="mx-0 my-2" />
+    </template>
+
+    <!-- Plans & Pricing (PERSONAL and OWNER only) -->
+    <div
+      v-if="showPlansAndPricing"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="plans-pricing-menu-item"
+      @click="handleOpenPlansAndPricing"
+    >
+      <i class="icon-[lucide--receipt-text] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('subscription.plansAndPricing')
+      }}</span>
+      <span
+        v-if="canUpgrade"
+        class="rounded-full bg-base-foreground px-1.5 py-0.5 text-xs font-bold text-base-background"
+      >
+        {{ $t('subscription.upgrade') }}
+      </span>
+    </div>
+
+    <!-- Manage Plan (PERSONAL and OWNER, only if subscribed) -->
+    <div
+      v-if="showManagePlan"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="manage-plan-menu-item"
+      @click="handleOpenPlanAndCreditsSettings"
+    >
+      <i class="icon-[lucide--file-text] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('subscription.managePlan')
+      }}</span>
+    </div>
+
+    <!-- Partner Nodes Pricing (always shown) -->
+    <div
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="partner-nodes-menu-item"
+      @click="handleOpenPartnerNodesInfo"
+    >
+      <i class="icon-[lucide--tag] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('subscription.partnerNodesCredits')
+      }}</span>
+    </div>
+
+    <Divider class="mx-0 my-2" />
+
+    <!-- Workspace Settings (always shown) -->
+    <div
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="workspace-settings-menu-item"
+      @click="handleOpenWorkspaceSettings"
+    >
+      <i class="icon-[lucide--users] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('userSettings.workspaceSettings')
+      }}</span>
+    </div>
+
+    <!-- Account Settings (always shown) -->
+    <div
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="user-settings-menu-item"
+      @click="handleOpenUserSettings"
+    >
+      <i class="icon-[lucide--settings-2] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('userSettings.accountSettings')
+      }}</span>
+    </div>
+
+    <Divider class="mx-0 my-2" />
+
+    <!-- Logout (always shown) -->
+    <div
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
+      data-testid="logout-menu-item"
+      @click="handleLogout"
+    >
+      <i class="icon-[lucide--log-out] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
+        $t('auth.signOut.signOut')
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Divider from 'primevue/divider'
+import Popover from 'primevue/popover'
+import Skeleton from 'primevue/skeleton'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+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 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'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogService } from '@/services/dialogService'
+
+const workspaceStore = useTeamWorkspaceStore()
+const {
+  workspaceName,
+  isInPersonalWorkspace: isPersonalWorkspace,
+  isWorkspaceSubscribed,
+  subscriptionPlan
+} = storeToRefs(workspaceStore)
+const { workspaceRole } = useWorkspaceUI()
+const workspaceSwitcherPopover = ref<InstanceType<typeof Popover> | null>(null)
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { buildDocsUrl, docsPaths } = useExternalLink()
+
+const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
+  useCurrentUser()
+const authActions = useFirebaseAuthActions()
+const dialogService = useDialogService()
+const { isActiveSubscription } = useSubscription()
+const { totalCredits, isLoadingBalance } = useSubscriptionCredits()
+const subscriptionDialog = useSubscriptionDialog()
+const { t } = useI18n()
+
+const displayedCredits = computed(() =>
+  isWorkspaceSubscribed.value ? totalCredits.value : '0'
+)
+
+// Workspace subscription tier name (not user tier)
+const workspaceTierName = computed(() => {
+  if (!isWorkspaceSubscribed.value) return null
+  if (!subscriptionPlan.value) return null
+  // Convert plan to display name
+  if (subscriptionPlan.value === 'PRO_MONTHLY')
+    return t('subscription.tiers.pro.name')
+  if (subscriptionPlan.value === 'PRO_YEARLY')
+    return t('subscription.tierNameYearly', {
+      name: t('subscription.tiers.pro.name')
+    })
+  return null
+})
+
+const canUpgrade = computed(() => {
+  // PRO is currently the only/highest tier, so no upgrades available
+  // This will need updating when additional tiers are added
+  return false
+})
+
+const showPlansAndPricing = computed(
+  () => isPersonalWorkspace.value || workspaceRole.value === 'owner'
+)
+const showManagePlan = computed(
+  () => showPlansAndPricing.value && isActiveSubscription.value
+)
+const showCreditsSection = computed(
+  () => isPersonalWorkspace.value || workspaceRole.value === 'owner'
+)
+
+const handleOpenUserSettings = () => {
+  dialogService.showSettingsDialog('user')
+  emit('close')
+}
+
+const handleOpenWorkspaceSettings = () => {
+  dialogService.showSettingsDialog('workspace')
+  emit('close')
+}
+
+const handleOpenPlansAndPricing = () => {
+  subscriptionDialog.show()
+  emit('close')
+}
+
+const handleOpenPlanAndCreditsSettings = () => {
+  if (isCloud) {
+    dialogService.showSettingsDialog('workspace')
+  } else {
+    dialogService.showSettingsDialog('credits')
+  }
+
+  emit('close')
+}
+
+const handleTopUp = () => {
+  // Track purchase credits entry from avatar popover
+  useTelemetry()?.trackAddApiCreditButtonClicked()
+  dialogService.showTopUpCreditsDialog()
+  emit('close')
+}
+
+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
+    '_blank'
+  )
+  emit('close')
+}
+
+const handleLogout = async () => {
+  await handleSignOut()
+  emit('close')
+}
+
+const handleCreateWorkspace = () => {
+  workspaceSwitcherPopover.value?.hide()
+  dialogService.showCreateWorkspaceDialog()
+  emit('close')
+}
+
+const toggleWorkspaceSwitcher = (event: MouseEvent) => {
+  workspaceSwitcherPopover.value?.toggle(event)
+}
+
+onMounted(() => {
+  void authActions.fetchBalance()
+})
+</script>
diff --git a/src/components/topbar/WorkspaceSwitcherPopover.vue b/src/components/topbar/WorkspaceSwitcherPopover.vue
new file mode 100644
index 000000000..c8236535d
--- /dev/null
+++ b/src/components/topbar/WorkspaceSwitcherPopover.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="flex w-80 flex-col overflow-hidden rounded-lg">
+    <div class="flex flex-col overflow-y-auto">
+      <!-- Loading state -->
+      <div v-if="isFetchingWorkspaces" class="flex flex-col gap-2 p-2">
+        <div
+          v-for="i in 2"
+          :key="i"
+          class="flex h-[54px] animate-pulse items-center gap-2 rounded px-2 py-4"
+        >
+          <div class="size-8 rounded-full bg-secondary-background" />
+          <div class="flex flex-1 flex-col gap-1">
+            <div class="h-4 w-24 rounded bg-secondary-background" />
+            <div class="h-3 w-16 rounded bg-secondary-background" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Workspace list -->
+      <template v-else>
+        <template v-for="workspace in availableWorkspaces" :key="workspace.id">
+          <div class="border-b border-border-default p-2">
+            <div
+              :class="
+                cn(
+                  'group flex h-[54px] w-full items-center gap-2 rounded px-2 py-4',
+                  'hover:bg-secondary-background-hover',
+                  isCurrentWorkspace(workspace) && 'bg-secondary-background'
+                )
+              "
+            >
+              <button
+                class="flex flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0"
+                @click="handleSelectWorkspace(workspace)"
+              >
+                <WorkspaceProfilePic
+                  class="size-8 text-sm"
+                  :workspace-name="workspace.name"
+                />
+                <div class="flex min-w-0 flex-1 flex-col items-start gap-1">
+                  <span class="text-sm text-base-foreground">
+                    {{ workspace.name }}
+                  </span>
+                  <span
+                    v-if="workspace.type !== 'personal'"
+                    class="text-sm text-muted-foreground"
+                  >
+                    {{ getRoleLabel(workspace.role) }}
+                  </span>
+                </div>
+                <i
+                  v-if="isCurrentWorkspace(workspace)"
+                  class="pi pi-check text-sm text-base-foreground"
+                />
+              </button>
+            </div>
+          </div>
+        </template>
+      </template>
+
+      <!-- <Divider class="mx-0 my-0" /> -->
+
+      <!-- Create workspace button -->
+      <div class="px-2 py-2">
+        <div
+          :class="
+            cn(
+              'flex h-12 w-full items-center gap-2 rounded px-2 py-2',
+              canCreateWorkspace
+                ? 'cursor-pointer hover:bg-secondary-background-hover'
+                : 'cursor-default'
+            )
+          "
+          @click="canCreateWorkspace && handleCreateWorkspace()"
+        >
+          <div
+            :class="
+              cn(
+                'flex size-8 items-center justify-center rounded-full bg-secondary-background',
+                !canCreateWorkspace && 'opacity-50'
+              )
+            "
+          >
+            <i class="pi pi-plus text-sm text-muted-foreground" />
+          </div>
+          <div class="flex min-w-0 flex-1 flex-col">
+            <span
+              v-if="canCreateWorkspace"
+              class="text-sm text-muted-foreground"
+            >
+              {{ $t('workspaceSwitcher.createWorkspace') }}
+            </span>
+            <span v-else class="text-sm text-muted-foreground">
+              {{ $t('workspaceSwitcher.maxWorkspacesReached') }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
+import { useWorkspaceSwitch } from '@/platform/auth/workspace/useWorkspaceSwitch'
+import type {
+  WorkspaceRole,
+  WorkspaceType
+} from '@/platform/workspace/api/workspaceApi'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+import { cn } from '@/utils/tailwindUtil'
+
+interface AvailableWorkspace {
+  id: string
+  name: string
+  type: WorkspaceType
+  role: WorkspaceRole
+}
+
+const emit = defineEmits<{
+  select: [workspace: AvailableWorkspace]
+  create: []
+}>()
+
+const { t } = useI18n()
+const { switchWithConfirmation } = useWorkspaceSwitch()
+
+const workspaceStore = useTeamWorkspaceStore()
+const { workspaceId, workspaces, canCreateWorkspace, isFetchingWorkspaces } =
+  storeToRefs(workspaceStore)
+
+const availableWorkspaces = computed<AvailableWorkspace[]>(() =>
+  workspaces.value.map((w) => ({
+    id: w.id,
+    name: w.name,
+    type: w.type,
+    role: w.role
+  }))
+)
+
+function isCurrentWorkspace(workspace: AvailableWorkspace): boolean {
+  return workspace.id === workspaceId.value
+}
+
+function getRoleLabel(role: AvailableWorkspace['role']): string {
+  if (role === 'owner') return t('workspaceSwitcher.roleOwner')
+  if (role === 'member') return t('workspaceSwitcher.roleMember')
+  return ''
+}
+
+async function handleSelectWorkspace(workspace: AvailableWorkspace) {
+  const success = await switchWithConfirmation(workspace.id)
+  if (success) {
+    emit('select', workspace)
+  }
+}
+
+function handleCreateWorkspace() {
+  emit('create')
+}
+</script>
diff --git a/src/components/ui/button/button.variants.ts b/src/components/ui/button/button.variants.ts
index 768332325..faf9a4444 100644
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -26,7 +26,8 @@ export const buttonVariants = cva({
       md: 'h-8 rounded-lg p-2 text-xs',
       lg: 'h-10 rounded-lg px-4 py-2 text-sm',
       icon: 'size-8',
-      'icon-sm': 'size-5 p-0'
+      'icon-sm': 'size-5 p-0',
+      unset: ''
     }
   },
 
diff --git a/src/components/ui/tags-input/TagsInput.vue b/src/components/ui/tags-input/TagsInput.vue
index f4a3fa001..c07dcdf7f 100644
--- a/src/components/ui/tags-input/TagsInput.vue
+++ b/src/components/ui/tags-input/TagsInput.vue
@@ -71,7 +71,7 @@ onClickOutside(rootEl, () => {
     <i
       v-if="!disabled && !isEditing"
       aria-hidden="true"
-      class="icon-[lucide--square-pen] absolute bottom-2 right-2 size-4 text-muted-foreground"
+      class="icon-[lucide--square-pen] absolute bottom-2 right-2 size-4 text-muted-foreground transition-opacity opacity-0 group-hover:opacity-100"
     />
   </TagsInputRoot>
 </template>
diff --git a/src/composables/node/useNodeBadge.ts b/src/composables/node/useNodeBadge.ts
index 2f31ad0ac..91fa1115d 100644
--- a/src/composables/node/useNodeBadge.ts
+++ b/src/composables/node/useNodeBadge.ts
@@ -73,6 +73,14 @@ export const useNodeBadge = () => {
   onMounted(() => {
     const nodePricing = useNodePricing()
 
+    watch(
+      () => nodePricing.pricingRevision.value,
+      () => {
+        if (!showApiPricingBadge.value) return
+        app.canvas?.setDirty(true, true)
+      }
+    )
+
     extensionStore.registerExtension({
       name: 'Comfy.NodeBadge',
       nodeCreated(node: LGraphNode) {
@@ -111,17 +119,16 @@ export const useNodeBadge = () => {
         node.badges.push(() => badge.value)
 
         if (node.constructor.nodeData?.api_node && showApiPricingBadge.value) {
-          // Get the pricing function to determine if this node has dynamic pricing
+          // JSONata rules are dynamic if they depend on any widgets/inputs/input_groups
           const pricingConfig = nodePricing.getNodePricingConfig(node)
           const hasDynamicPricing =
-            typeof pricingConfig?.displayPrice === 'function'
-
-          let creditsBadge
-          const createBadge = () => {
-            const price = nodePricing.getNodeDisplayPrice(node)
-            return priceBadge.getCreditsBadge(price)
-          }
+            !!pricingConfig &&
+            ((pricingConfig.depends_on?.widgets?.length ?? 0) > 0 ||
+              (pricingConfig.depends_on?.inputs?.length ?? 0) > 0 ||
+              (pricingConfig.depends_on?.input_groups?.length ?? 0) > 0)
 
+          // Keep the existing widget-watch wiring ONLY to trigger redraws on widget change.
+          // (We no longer rely on it to hold the current badge value.)
           if (hasDynamicPricing) {
             // For dynamic pricing nodes, use computed that watches widget changes
             const relevantWidgetNames = nodePricing.getRelevantWidgetNames(
@@ -133,13 +140,63 @@ export const useNodeBadge = () => {
               triggerCanvasRedraw: true
             })
 
-            creditsBadge = computedWithWidgetWatch(createBadge)
-          } else {
-            // For static pricing nodes, use regular computed
-            creditsBadge = computed(createBadge)
+            // Ensure watchers are installed; ignore the returned value.
+            // (This call is what registers the widget listeners in most implementations.)
+            computedWithWidgetWatch(() => 0)
+
+            // Hook into connection changes to trigger price recalculation
+            // This handles both connect and disconnect in VueNodes mode
+            const relevantInputs = pricingConfig?.depends_on?.inputs ?? []
+            const inputGroupPrefixes =
+              pricingConfig?.depends_on?.input_groups ?? []
+            const hasRelevantInputs =
+              relevantInputs.length > 0 || inputGroupPrefixes.length > 0
+
+            if (hasRelevantInputs) {
+              const originalOnConnectionsChange = node.onConnectionsChange
+              node.onConnectionsChange = function (
+                type,
+                slotIndex,
+                isConnected,
+                link,
+                ioSlot
+              ) {
+                originalOnConnectionsChange?.call(
+                  this,
+                  type,
+                  slotIndex,
+                  isConnected,
+                  link,
+                  ioSlot
+                )
+                // Only trigger if this input affects pricing
+                const inputName = ioSlot?.name
+                if (!inputName) return
+                const isRelevantInput =
+                  relevantInputs.includes(inputName) ||
+                  inputGroupPrefixes.some((prefix) =>
+                    inputName.startsWith(prefix + '.')
+                  )
+                if (isRelevantInput) {
+                  nodePricing.triggerPriceRecalculation(node)
+                }
+              }
+            }
           }
 
-          node.badges.push(() => creditsBadge.value)
+          let lastLabel = nodePricing.getNodeDisplayPrice(node)
+          let lastBadge = priceBadge.getCreditsBadge(lastLabel)
+
+          const creditsBadgeGetter: () => LGraphBadge = () => {
+            const label = nodePricing.getNodeDisplayPrice(node)
+            if (label !== lastLabel) {
+              lastLabel = label
+              lastBadge = priceBadge.getCreditsBadge(label)
+            }
+            return lastBadge
+          }
+
+          node.badges.push(creditsBadgeGetter)
         }
       },
       init() {
diff --git a/src/composables/node/useNodePricing.test.ts b/src/composables/node/useNodePricing.test.ts
index c811a4796..e1996579d 100644
--- a/src/composables/node/useNodePricing.test.ts
+++ b/src/composables/node/useNodePricing.test.ts
@@ -1,2478 +1,891 @@
 import { describe, expect, it } from 'vitest'
 
-import { formatCreditsFromUsd } from '@/base/credits/comfyCredits'
+import { CREDITS_PER_USD, formatCredits } from '@/base/credits/comfyCredits'
 import { useNodePricing } from '@/composables/node/useNodePricing'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
+import type { PriceBadge } from '@/schemas/nodeDefSchema'
 
-// Helper function to create a mock node
-function createMockNode(
+// -----------------------------------------------------------------------------
+// Test Types
+// -----------------------------------------------------------------------------
+
+interface MockNodeWidget {
+  name: string
+  value: unknown
+  type: string
+}
+
+interface MockNodeInput {
+  name: string
+  link: number | null
+}
+
+interface MockNodeData {
+  name: string
+  api_node: boolean
+  price_badge?: PriceBadge
+}
+
+interface MockNode {
+  id: string
+  widgets: MockNodeWidget[]
+  inputs: MockNodeInput[]
+  constructor: { nodeData: MockNodeData }
+}
+
+// -----------------------------------------------------------------------------
+// Test Helpers
+// -----------------------------------------------------------------------------
+
+/**
+ * Determine if a number should display 1 decimal place.
+ * Shows decimal only when the first decimal digit is non-zero.
+ */
+const shouldShowDecimal = (value: number): boolean => {
+  const rounded = Math.round(value * 10) / 10
+  return rounded % 1 !== 0
+}
+
+const creditValue = (usd: number): string => {
+  const rawCredits = usd * CREDITS_PER_USD
+  return formatCredits({
+    value: rawCredits,
+    numberOptions: {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: shouldShowDecimal(rawCredits) ? 1 : 0
+    }
+  })
+}
+
+const creditsLabel = (usd: number, suffix = '/Run'): string =>
+  `${creditValue(usd)} credits${suffix}`
+
+/**
+ * Create a mock node with price_badge for testing JSONata-based pricing.
+ */
+function createMockNodeWithPriceBadge(
   nodeTypeName: string,
-  widgets: Array<{ name: string; value: any }> = [],
-  isApiNode = true,
-  inputs: Array<{
-    name: string
-    connected?: boolean
-    useLinksArray?: boolean
-  }> = []
+  priceBadge: PriceBadge,
+  widgets: Array<{ name: string; value: unknown }> = [],
+  inputs: Array<{ name: string; connected?: boolean }> = []
 ): LGraphNode {
   const mockWidgets = widgets.map(({ name, value }) => ({
     name,
     value,
     type: 'combo'
-  })) as IComboWidget[]
+  }))
 
-  const mockInputs =
-    inputs.length > 0
-      ? inputs.map(({ name, connected, useLinksArray }) =>
-          useLinksArray
-            ? { name, links: connected ? [1] : [] }
-            : { name, link: connected ? 1 : null }
-        )
-      : undefined
+  const mockInputs: MockNodeInput[] = inputs.map(({ name, connected }) => ({
+    name,
+    link: connected ? 1 : null
+  }))
 
-  const node: any = {
+  const node: MockNode = {
     id: Math.random().toString(),
     widgets: mockWidgets,
+    inputs: mockInputs,
     constructor: {
       nodeData: {
         name: nodeTypeName,
-        api_node: isApiNode
+        api_node: true,
+        price_badge: priceBadge
       }
     }
   }
 
-  if (mockInputs) {
-    node.inputs = mockInputs
-    // Provide the common helpers some frontend code may call
-    node.findInputSlot = function (portName: string) {
-      return this.inputs?.findIndex((i: any) => i.name === portName) ?? -1
-    }
-    node.isInputConnected = function (idx: number) {
-      const port = this.inputs?.[idx]
-      if (!port) return false
-      if (typeof port.link !== 'undefined') return port.link != null
-      if (Array.isArray(port.links)) return port.links.length > 0
-      return false
-    }
-  }
-
-  return node as LGraphNode
+  return node as unknown as LGraphNode
 }
 
-describe('useNodePricing', () => {
-  describe('static pricing', () => {
-    it('should return static price for FluxProCannyNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('FluxProCannyNode')
+/** Helper to create a price badge with defaults */
+const priceBadge = (
+  expr: string,
+  widgets: Array<{ name: string; type: string }> = [],
+  inputs: string[] = [],
+  inputGroups: string[] = []
+): PriceBadge => ({
+  engine: 'jsonata',
+  expr,
+  depends_on: { widgets, inputs, input_groups: inputGroups }
+})
 
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+describe('useNodePricing', () => {
+  describe('static expressions', () => {
+    it('should evaluate simple static USD price', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestStaticNode',
+        priceBadge('{"type":"usd","usd":0.05}')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(creditsLabel(0.05))
     })
 
-    it('should return static price for StabilityStableImageUltraNode', () => {
+    it('should evaluate static text result', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('StabilityStableImageUltraNode')
+      const node = createMockNodeWithPriceBadge(
+        'TestTextNode',
+        priceBadge('{"type":"text","text":"Free"}')
+      )
 
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.08))
-    })
-
-    it('should return empty string for non-API nodes', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('RegularNode', [], false)
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('')
-    })
-
-    it('should return empty string for unknown node types', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('UnknownAPINode')
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('')
+      expect(price).toBe('Free')
     })
   })
 
-  describe('dynamic pricing - Flux2ProImageNode', () => {
-    it('should return precise price for text-to-image 1024x1024 (no refs)', () => {
+  describe('widget value normalization', () => {
+    it('should handle INT widget as number', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Flux2ProImageNode', [
-        { name: 'width', value: 1024 },
-        { name: 'height', value: 1024 }
-      ])
-
-      // 1024x1024 => 1 MP => $0.03
-      expect(getNodeDisplayPrice(node)).toBe(creditsLabel(0.03))
-    })
-
-    it('should return minimum estimate when refs are connected (1024x1024)', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode(
-        'Flux2ProImageNode',
-        [
-          { name: 'width', value: 1024 },
-          { name: 'height', value: 1024 }
-        ],
-        true,
-        // connect the 'images' input
-        [{ name: 'images', connected: true }]
+      const node = createMockNodeWithPriceBadge(
+        'TestIntNode',
+        priceBadge('{"type":"usd","usd": widgets.count * 0.01}', [
+          { name: 'count', type: 'INT' }
+        ]),
+        [{ name: 'count', value: 5 }]
       )
 
-      // 1024x1024 => 1 MP output = $0.03, min input add = $0.015 => ~$0.045 min
-      expect(getNodeDisplayPrice(node)).toBe(
-        creditsRangeLabel(0.045, 0.15, { approximate: true })
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.05))
+    })
+
+    it('should handle FLOAT widget as number', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestFloatNode',
+        priceBadge('{"type":"usd","usd": widgets.rate * 10}', [
+          { name: 'rate', type: 'FLOAT' }
+        ]),
+        [{ name: 'rate', value: 0.05 }]
       )
-    })
-
-    it('should show fallback when width/height are missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Flux2ProImageNode', [])
-      expect(getNodeDisplayPrice(node)).toBe(creditsRangeLabel(0.03, 0.15))
-    })
-  })
-
-  describe('dynamic pricing - KlingTextToVideoNode', () => {
-    it('should return high price for kling-v2-1-master model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingTextToVideoNode', [
-        { name: 'mode', value: 'standard / 5s / v2-1-master' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.4))
-    })
-
-    it('should return high price for kling-v2-master model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingTextToVideoNode', [
-        { name: 'mode', value: 'standard / 5s / v2-master' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.4))
-    })
-
-    it('should return low price for kling-v2-turbo model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingTextToVideoNode', [
-        { name: 'mode', value: 'pro / 5s / v2-5-turbo' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.35))
-    })
-
-    it('should return high price for kling-v2-turbo model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingTextToVideoNode', [
-        { name: 'mode', value: 'pro / 10s / v2-5-turbo' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.7))
-    })
-
-    it('should return standard price for kling-v1-6 model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingTextToVideoNode', [
-        { name: 'mode', value: 'standard / 5s / v1-6' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.28))
-    })
-
-    it('should return range when mode widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingTextToVideoNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.14, 2.8, {
-          note: '(varies with model, mode & duration)'
-        })
-      )
-    })
-  })
-
-  describe('dynamic pricing - KlingImage2VideoNode', () => {
-    it('should return high price for kling-v2-master model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingImage2VideoNode', [
-        { name: 'model_name', value: 'v2-master' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.4))
-    })
-
-    it('should return high price for kling-v2-1-master model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingImage2VideoNode', [
-        { name: 'model_name', value: 'v2-1-master' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.4))
-    })
-
-    it('should return high price for kling-v2-5-turbo model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingImage2VideoNode', [
-        { name: 'model_name', value: 'v2-5-turbo' },
-        { name: 'mode', value: 'pro mode / 10s duration / kling-v2-5-turbo' },
-        { name: 'duration', value: '10' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.7))
-    })
-
-    it('should return standard price for kling-v1-6 model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingImage2VideoNode', [
-        { name: 'model_name', value: 'v1-6' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.28))
-    })
-
-    it('should return range when model_name widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingImage2VideoNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.14, 2.8, {
-          note: '(varies with model, mode & duration)'
-        })
-      )
-    })
-  })
-
-  describe('dynamic pricing - OpenAIDalle3', () => {
-    it('should return $0.04 for 1024x1024 standard quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [
-        { name: 'size', value: '1024x1024' },
-        { name: 'quality', value: 'standard' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.04))
-    })
-
-    it('should return $0.08 for 1024x1024 hd quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [
-        { name: 'size', value: '1024x1024' },
-        { name: 'quality', value: 'hd' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.08))
-    })
-
-    it('should return $0.08 for 1792x1024 standard quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [
-        { name: 'size', value: '1792x1024' },
-        { name: 'quality', value: 'standard' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.08))
-    })
-
-    it('should return $0.16 for 1792x1024 hd quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [
-        { name: 'size', value: '1792x1024' },
-        { name: 'quality', value: 'hd' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.12))
-    })
-
-    it('should return $0.08 for 1024x1792 standard quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [
-        { name: 'size', value: '1024x1792' },
-        { name: 'quality', value: 'standard' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.08))
-    })
-
-    it('should return $0.16 for 1024x1792 hd quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [
-        { name: 'size', value: '1024x1792' },
-        { name: 'quality', value: 'hd' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.12))
-    })
-
-    it('should return range when widgets are missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.04, 0.12, { note: '(varies with size & quality)' })
-      )
-    })
-
-    it('should return range when size widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [
-        { name: 'quality', value: 'hd' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.04, 0.12, { note: '(varies with size & quality)' })
-      )
-    })
-
-    it('should return range when quality widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle3', [
-        { name: 'size', value: '1024x1024' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.04, 0.12, { note: '(varies with size & quality)' })
-      )
-    })
-  })
-  // ============================== OpenAIVideoSora2 ==============================
-  describe('dynamic pricing - OpenAIVideoSora2', () => {
-    it('should require model, duration & size when widgets are missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [])
-      expect(getNodeDisplayPrice(node)).toBe('Set model, duration & size')
-    })
-
-    it('should require duration when duration is invalid or zero', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const nodeNaN = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2-pro' },
-        { name: 'duration', value: 'oops' },
-        { name: 'size', value: '720x1280' }
-      ])
-      expect(getNodeDisplayPrice(nodeNaN)).toBe('Set model, duration & size')
-
-      const nodeZero = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2-pro' },
-        { name: 'duration', value: 0 },
-        { name: 'size', value: '720x1280' }
-      ])
-      expect(getNodeDisplayPrice(nodeZero)).toBe('Set model, duration & size')
-    })
-
-    it('should require size when size is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2-pro' },
-        { name: 'duration', value: 8 }
-      ])
-      expect(getNodeDisplayPrice(node)).toBe('Set model, duration & size')
-    })
-
-    it('should compute pricing for sora-2-pro with 1024x1792', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2-pro' },
-        { name: 'duration', value: 8 },
-        { name: 'size', value: '1024x1792' }
-      ])
-      expect(getNodeDisplayPrice(node)).toBe(creditsLabel(4.0)) // 0.5 * 8
-    })
-
-    it('should compute pricing for sora-2-pro with 720x1280', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2-pro' },
-        { name: 'duration', value: 12 },
-        { name: 'size', value: '720x1280' }
-      ])
-      expect(getNodeDisplayPrice(node)).toBe(creditsLabel(3.6)) // 0.3 * 12
-    })
-
-    it('should reject unsupported size for sora-2-pro', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2-pro' },
-        { name: 'duration', value: 8 },
-        { name: 'size', value: '640x640' }
-      ])
-      expect(getNodeDisplayPrice(node)).toBe(
-        'Invalid size. Must be 720x1280, 1280x720, 1024x1792, or 1792x1024.'
-      )
-    })
-
-    it('should compute pricing for sora-2 (720x1280 only)', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2' },
-        { name: 'duration', value: 10 },
-        { name: 'size', value: '720x1280' }
-      ])
-      expect(getNodeDisplayPrice(node)).toBe(creditsLabel(1.0)) // 0.1 * 10
-    })
-
-    it('should reject non-720 sizes for sora-2', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2' },
-        { name: 'duration', value: 8 },
-        { name: 'size', value: '1024x1792' }
-      ])
-      expect(getNodeDisplayPrice(node)).toBe(
-        'sora-2 supports only 720x1280 or 1280x720'
-      )
-    })
-    it('should accept duration_s alias for duration', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'sora-2-pro' },
-        { name: 'duration_s', value: 4 },
-        { name: 'size', value: '1792x1024' }
-      ])
-      expect(getNodeDisplayPrice(node)).toBe(creditsLabel(2.0)) // 0.5 * 4
-    })
-
-    it('should be case-insensitive for model and size', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIVideoSora2', [
-        { name: 'model', value: 'SoRa-2-PrO' },
-        { name: 'duration', value: 12 },
-        { name: 'size', value: '1280x720' }
-      ])
-      expect(getNodeDisplayPrice(node)).toBe(creditsLabel(3.6)) // 0.3 * 12
-    })
-  })
-
-  // ============================== MinimaxHailuoVideoNode ==============================
-  describe('dynamic pricing - MinimaxHailuoVideoNode', () => {
-    it('should return $0.28 for 6s duration and 768P resolution', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('MinimaxHailuoVideoNode', [
-        { name: 'duration', value: '6' },
-        { name: 'resolution', value: '768P' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.28))
-    })
-
-    it('should return $0.60 for 10s duration and 768P resolution', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('MinimaxHailuoVideoNode', [
-        { name: 'duration', value: '10' },
-        { name: 'resolution', value: '768P' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.56))
-    })
-
-    it('should return $0.49 for 6s duration and 1080P resolution', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('MinimaxHailuoVideoNode', [
-        { name: 'duration', value: '6' },
-        { name: 'resolution', value: '1080P' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.49))
-    })
-
-    it('should return range when duration widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('MinimaxHailuoVideoNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.28, 0.56, {
-          note: '(varies with resolution & duration)'
-        })
-      )
-    })
-  })
-
-  describe('dynamic pricing - OpenAIDalle2', () => {
-    it('should return $0.02 for 1024x1024 size', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle2', [
-        { name: 'size', value: '1024x1024' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.02))
-    })
-
-    it('should return $0.018 for 512x512 size', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle2', [
-        { name: 'size', value: '512x512' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.018))
-    })
-
-    it('should return $0.016 for 256x256 size', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle2', [
-        { name: 'size', value: '256x256' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.016))
-    })
-
-    it('should return range when size widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle2', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.016, 0.02, {
-          suffix: ' x n/Run',
-          note: '(varies with size & n)'
-        })
-      )
-    })
-  })
-
-  describe('dynamic pricing - OpenAIGPTImage1', () => {
-    it('should return high price range for high quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIGPTImage1', [
-        { name: 'quality', value: 'high' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.167, 0.3))
-    })
-
-    it('should return medium price range for medium quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIGPTImage1', [
-        { name: 'quality', value: 'medium' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.046, 0.07))
-    })
-
-    it('should return low price range for low quality', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIGPTImage1', [
-        { name: 'quality', value: 'low' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.011, 0.02))
-    })
-
-    it('should return range when quality widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIGPTImage1', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.011, 0.3, {
-          suffix: ' x n/Run',
-          note: '(varies with quality & n)'
-        })
-      )
-    })
-  })
-
-  describe('dynamic pricing - IdeogramV3', () => {
-    it('should return correct prices for IdeogramV3 node', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-
-      const testCases = [
-        {
-          rendering_speed: 'Quality',
-          character_image: false,
-          expected: creditsLabel(0.13)
-        },
-        {
-          rendering_speed: 'Quality',
-          character_image: true,
-          expected: creditsLabel(0.29)
-        },
-        {
-          rendering_speed: 'Default',
-          character_image: false,
-          expected: creditsLabel(0.09)
-        },
-        {
-          rendering_speed: 'Default',
-          character_image: true,
-          expected: creditsLabel(0.21)
-        },
-        {
-          rendering_speed: 'Turbo',
-          character_image: false,
-          expected: creditsLabel(0.04)
-        },
-        {
-          rendering_speed: 'Turbo',
-          character_image: true,
-          expected: creditsLabel(0.14)
-        }
-      ]
-
-      testCases.forEach(({ rendering_speed, character_image, expected }) => {
-        const node = createMockNode(
-          'IdeogramV3',
-          [{ name: 'rendering_speed', value: rendering_speed }],
-          true,
-          [{ name: 'character_image', connected: character_image }]
-        )
-        expect(getNodeDisplayPrice(node)).toBe(expected)
-      })
-    })
-
-    it('should return range when rendering_speed widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('IdeogramV3', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.04, 0.11, {
-          suffix: ' x num_images/Run',
-          note: '(varies with rendering speed & num_images)'
-        })
-      )
-    })
-
-    it('should multiply price by num_images for Quality rendering speed', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('IdeogramV3', [
-        { name: 'rendering_speed', value: 'Quality' },
-        { name: 'num_images', value: 3 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.39)) // 0.09 * 3 * 1.43
-    })
-
-    it('should multiply price by num_images for Turbo rendering speed', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('IdeogramV3', [
-        { name: 'rendering_speed', value: 'Turbo' },
-        { name: 'num_images', value: 5 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.21)) // 0.03 * 5 * 1.43
-    })
-  })
-
-  describe('dynamic pricing - VeoVideoGenerationNode', () => {
-    it('should return $5.00 for 10s duration', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('VeoVideoGenerationNode', [
-        { name: 'duration_seconds', value: '10' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(5.0))
-    })
-
-    it('should return $2.50 for 5s duration', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('VeoVideoGenerationNode', [
-        { name: 'duration_seconds', value: '5' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(2.5))
-    })
-
-    it('should return range when duration widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('VeoVideoGenerationNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(2.5, 5.0, { note: '(varies with duration)' })
-      )
-    })
-  })
-
-  describe('dynamic pricing - Veo3VideoGenerationNode', () => {
-    it('should return $0.80 for veo-3.0-fast-generate-001 without audio', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-fast-generate-001' },
-        { name: 'generate_audio', value: false }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.8))
-    })
-
-    it('should return $1.20 for veo-3.0-fast-generate-001 with audio', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-fast-generate-001' },
-        { name: 'generate_audio', value: true }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.2))
-    })
-
-    it('should return $1.60 for veo-3.0-generate-001 without audio', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-generate-001' },
-        { name: 'generate_audio', value: false }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.6))
-    })
-
-    it('should return $3.20 for veo-3.0-generate-001 with audio', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-generate-001' },
-        { name: 'generate_audio', value: true }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(3.2))
-    })
-
-    it('should return range when widgets are missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.8, 3.2, {
-          note: 'varies with model & audio generation'
-        })
-      )
-    })
-
-    it('should return range when only model widget is present', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-generate-001' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.8, 3.2, {
-          note: 'varies with model & audio generation'
-        })
-      )
-    })
-
-    it('should return range when only generate_audio widget is present', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'generate_audio', value: true }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.8, 3.2, {
-          note: 'varies with model & audio generation'
-        })
-      )
-    })
-  })
-
-  describe('dynamic pricing - LumaVideoNode', () => {
-    it('should return $2.19 for ray-flash-2 4K 5s', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('LumaVideoNode', [
-        { name: 'model', value: 'ray-flash-2' },
-        { name: 'resolution', value: '4K' },
-        { name: 'duration', value: '5s' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(3.13))
-    })
-
-    it('should return $6.37 for ray-2 4K 5s', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('LumaVideoNode', [
-        { name: 'model', value: 'ray-2' },
-        { name: 'resolution', value: '4K' },
-        { name: 'duration', value: '5s' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(9.11))
-    })
-
-    it('should return $0.35 for ray-1-6 model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('LumaVideoNode', [
-        { name: 'model', value: 'ray-1-6' },
-        { name: 'resolution', value: '1080p' },
-        { name: 'duration', value: '5s' }
-      ])
 
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(creditsLabel(0.5))
     })
 
-    it('should return range when widgets are missing', () => {
+    it('should handle COMBO widget with numeric value', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('LumaVideoNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.2, 16.4, {
-          note: 'varies with model, resolution & duration'
-        })
+      const node = createMockNodeWithPriceBadge(
+        'TestComboNumericNode',
+        priceBadge('{"type":"usd","usd": widgets.duration * 0.07}', [
+          { name: 'duration', type: 'COMBO' }
+        ]),
+        [{ name: 'duration', value: 5 }]
       )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.35))
+    })
+
+    it('should handle COMBO widget with string value', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestComboStringNode',
+        priceBadge(
+          '(widgets.mode = "pro") ? {"type":"usd","usd":0.10} : {"type":"usd","usd":0.05}',
+          [{ name: 'mode', type: 'COMBO' }]
+        ),
+        [{ name: 'mode', value: 'Pro' }] // Should be lowercased to "pro"
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.1))
+    })
+
+    it('should handle BOOLEAN widget', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestBooleanNode',
+        priceBadge('{"type":"usd","usd": widgets.premium ? 0.10 : 0.05}', [
+          { name: 'premium', type: 'BOOLEAN' }
+        ]),
+        [{ name: 'premium', value: true }]
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.1))
+    })
+
+    it('should handle STRING widget (lowercased)', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestStringNode',
+        priceBadge(
+          '$contains(widgets.model, "pro") ? {"type":"usd","usd":0.10} : {"type":"usd","usd":0.05}',
+          [{ name: 'model', type: 'STRING' }]
+        ),
+        [{ name: 'model', value: 'ProModel' }] // Should be lowercased to "promodel"
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.1))
     })
   })
 
-  describe('dynamic pricing - PixverseTextToVideoNode', () => {
-    it('should return range for 5s 1080p quality', () => {
+  describe('complex expressions', () => {
+    it('should handle lookup tables', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('PixverseTextToVideoNode', [
-        { name: 'duration', value: '5s' },
-        { name: 'quality', value: '1080p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.45, 1.2, {
-          note: 'varies with duration, quality & motion mode'
-        })
+      const node = createMockNodeWithPriceBadge(
+        'TestLookupNode',
+        priceBadge(
+          `(
+            $rates := {"720p": 0.05, "1080p": 0.10};
+            {"type":"usd","usd": $lookup($rates, widgets.resolution)}
+          )`,
+          [{ name: 'resolution', type: 'COMBO' }]
+        ),
+        [{ name: 'resolution', value: '1080p' }]
       )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.1))
     })
 
-    it('should return range for 5s 540p normal quality', () => {
+    it('should handle multiple widgets', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('PixverseTextToVideoNode', [
-        { name: 'duration', value: '5s' },
-        { name: 'quality', value: '540p' },
-        { name: 'motion_mode', value: 'normal' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.45, 1.2, {
-          note: 'varies with duration, quality & motion mode'
-        })
+      const node = createMockNodeWithPriceBadge(
+        'TestMultiWidgetNode',
+        priceBadge(
+          `(
+            $rate := (widgets.mode = "pro") ? 0.10 : 0.05;
+            {"type":"usd","usd": $rate * widgets.duration}
+          )`,
+          [
+            { name: 'mode', type: 'COMBO' },
+            { name: 'duration', type: 'INT' }
+          ]
+        ),
+        [
+          { name: 'mode', value: 'pro' },
+          { name: 'duration', value: 10 }
+        ]
       )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(1.0))
     })
 
-    it('should return range when widgets are missing', () => {
+    it('should handle conditional pricing based on widget values', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('PixverseTextToVideoNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.45, 1.2, {
-          note: 'varies with duration, quality & motion mode'
-        })
+      const node = createMockNodeWithPriceBadge(
+        'TestConditionalNode',
+        priceBadge(
+          `(
+            $mode := (widgets.resolution = "720p") ? "std" : "pro";
+            $rates := {"std": 0.084, "pro": 0.112};
+            {"type":"usd","usd": $lookup($rates, $mode) * widgets.duration}
+          )`,
+          [
+            { name: 'resolution', type: 'COMBO' },
+            { name: 'duration', type: 'COMBO' }
+          ]
+        ),
+        [
+          { name: 'resolution', value: '1080p' },
+          { name: 'duration', value: 5 }
+        ]
       )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.56))
     })
   })
 
-  describe('dynamic pricing - KlingDualCharacterVideoEffectNode', () => {
-    it('should return range for v2-master 5s mode', () => {
+  describe('range and list results', () => {
+    it('should format range_usd result', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingDualCharacterVideoEffectNode', [
-        { name: 'mode', value: 'standard / 5s / v2-master' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.14, 2.8, {
-          note: '(varies with model, mode & duration)'
-        })
+      const node = createMockNodeWithPriceBadge(
+        'TestRangeNode',
+        priceBadge('{"type":"range_usd","min_usd":0.05,"max_usd":0.10}')
       )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toMatch(/\d+\.?\d*-\d+\.?\d* credits\/Run/)
     })
 
-    it('should return range for v1-6 5s mode', () => {
+    it('should format list_usd result', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingDualCharacterVideoEffectNode', [
-        { name: 'mode', value: 'standard / 5s / v1-6' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.14, 2.8, {
-          note: '(varies with model, mode & duration)'
-        })
+      const node = createMockNodeWithPriceBadge(
+        'TestListNode',
+        priceBadge('{"type":"list_usd","usd":[0.05, 0.10, 0.15]}')
       )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toMatch(/\d+\.?\d*\/\d+\.?\d*\/\d+\.?\d* credits\/Run/)
     })
 
-    it('should return range when mode widget is missing', () => {
+    it('should respect custom suffix in format options', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingDualCharacterVideoEffectNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.14, 2.8, {
-          note: '(varies with model, mode & duration)'
-        })
+      const node = createMockNodeWithPriceBadge(
+        'TestSuffixNode',
+        priceBadge('{"type":"usd","usd":0.07,"format":{"suffix":"/second"}}')
       )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.07, '/second'))
+    })
+
+    it('should add approximate prefix when specified', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestApproximateNode',
+        priceBadge('{"type":"usd","usd":0.05,"format":{"approximate":true}}')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toMatch(/^~\d+\.?\d* credits\/Run$/)
+    })
+
+    it('should add note suffix when specified', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestNoteNode',
+        priceBadge('{"type":"usd","usd":0.05,"format":{"note":"(estimated)"}}')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toMatch(/credits\/Run \(estimated\)$/)
+    })
+
+    it('should combine approximate prefix and note suffix', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestCombinedFormatNode',
+        priceBadge(
+          '{"type":"usd","usd":0.05,"format":{"approximate":true,"note":"(beta)","suffix":"/image"}}'
+        )
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toMatch(/^~\d+\.?\d* credits\/image \(beta\)$/)
+    })
+
+    it('should use custom separator for list_usd', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestListSeparatorNode',
+        priceBadge(
+          '{"type":"list_usd","usd":[0.05, 0.10],"format":{"separator":" or "}}'
+        )
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toMatch(/\d+\.?\d* or \d+\.?\d* credits\/Run/)
     })
   })
 
-  describe('dynamic pricing - KlingSingleImageVideoEffectNode', () => {
-    it('should return $0.28 for fuzzyfuzzy effect', () => {
+  describe('input connectivity', () => {
+    it('should handle connected input check', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingSingleImageVideoEffectNode', [
-        { name: 'effect_scene', value: 'fuzzyfuzzy' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.28))
-    })
-
-    it('should return $0.49 for dizzydizzy effect', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingSingleImageVideoEffectNode', [
-        { name: 'effect_scene', value: 'dizzydizzy' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.49))
-    })
-
-    it('should return range when effect_scene widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingSingleImageVideoEffectNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.28, 0.49, { note: '(varies with effect scene)' })
+      const node = createMockNodeWithPriceBadge(
+        'TestInputNode',
+        priceBadge(
+          'inputs.image.connected ? {"type":"usd","usd":0.10} : {"type":"usd","usd":0.05}',
+          [],
+          ['image']
+        ),
+        [],
+        [{ name: 'image', connected: true }]
       )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.1))
+    })
+
+    it('should handle disconnected input check', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestInputDisconnectedNode',
+        priceBadge(
+          'inputs.image.connected ? {"type":"usd","usd":0.10} : {"type":"usd","usd":0.05}',
+          [],
+          ['image']
+        ),
+        [],
+        [{ name: 'image', connected: false }]
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.05))
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should return empty string for non-API nodes', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node: MockNode = {
+        id: 'test',
+        widgets: [],
+        inputs: [],
+        constructor: {
+          nodeData: {
+            name: 'RegularNode',
+            api_node: false
+          }
+        }
+      }
+
+      const price = getNodeDisplayPrice(node as unknown as LGraphNode)
+      expect(price).toBe('')
+    })
+
+    it('should return empty string for nodes without price_badge', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node: MockNode = {
+        id: 'test',
+        widgets: [],
+        inputs: [],
+        constructor: {
+          nodeData: {
+            name: 'ApiNodeNoPricing',
+            api_node: true
+          }
+        }
+      }
+
+      const price = getNodeDisplayPrice(node as unknown as LGraphNode)
+      expect(price).toBe('')
+    })
+
+    it('should handle null widget value gracefully', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestNullWidgetNode',
+        priceBadge(
+          '{"type":"usd","usd": (widgets.count != null) ? widgets.count * 0.01 : 0.05}',
+          [{ name: 'count', type: 'INT' }]
+        ),
+        [{ name: 'count', value: null }]
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.05))
+    })
+
+    it('should handle missing widget gracefully', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestMissingWidgetNode',
+        priceBadge(
+          '{"type":"usd","usd": (widgets.count != null) ? widgets.count * 0.01 : 0.05}',
+          [{ name: 'count', type: 'INT' }]
+        ),
+        []
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.05))
+    })
+
+    it('should handle undefined widget value gracefully', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestUndefinedWidgetNode',
+        priceBadge(
+          '{"type":"usd","usd": (widgets.count != null) ? widgets.count * 0.01 : 0.05}',
+          [{ name: 'count', type: 'INT' }]
+        ),
+        [{ name: 'count', value: undefined }]
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(creditsLabel(0.05))
+    })
+  })
+
+  describe('getNodePricingConfig', () => {
+    it('should return pricing config for nodes with price_badge', () => {
+      const { getNodePricingConfig } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestConfigNode',
+        priceBadge('{"type":"usd","usd":0.05}')
+      )
+
+      const config = getNodePricingConfig(node)
+      expect(config).toBeDefined()
+      expect(config?.engine).toBe('jsonata')
+      expect(config?.expr).toBe('{"type":"usd","usd":0.05}')
+      expect(config?.depends_on).toBeDefined()
+    })
+
+    it('should return undefined for nodes without price_badge', () => {
+      const { getNodePricingConfig } = useNodePricing()
+      const node: MockNode = {
+        id: 'test',
+        widgets: [],
+        inputs: [],
+        constructor: {
+          nodeData: {
+            name: 'NoPricingNode',
+            api_node: true
+          }
+        }
+      }
+
+      const config = getNodePricingConfig(node as unknown as LGraphNode)
+      expect(config).toBeUndefined()
+    })
+
+    it('should return undefined for non-API nodes', () => {
+      const { getNodePricingConfig } = useNodePricing()
+      const node: MockNode = {
+        id: 'test',
+        widgets: [],
+        inputs: [],
+        constructor: {
+          nodeData: {
+            name: 'RegularNode',
+            api_node: false
+          }
+        }
+      }
+
+      const config = getNodePricingConfig(node as unknown as LGraphNode)
+      expect(config).toBeUndefined()
+    })
+  })
+
+  describe('getNodeRevisionRef', () => {
+    it('should return a ref for a node ID', () => {
+      const { getNodeRevisionRef } = useNodePricing()
+      const ref = getNodeRevisionRef('node-1')
+
+      expect(ref).toBeDefined()
+      expect(ref.value).toBe(0)
+    })
+
+    it('should return the same ref for the same node ID', () => {
+      const { getNodeRevisionRef } = useNodePricing()
+      const ref1 = getNodeRevisionRef('node-same')
+      const ref2 = getNodeRevisionRef('node-same')
+
+      expect(ref1).toBe(ref2)
+    })
+
+    it('should return different refs for different node IDs', () => {
+      const { getNodeRevisionRef } = useNodePricing()
+      const ref1 = getNodeRevisionRef('node-a')
+      const ref2 = getNodeRevisionRef('node-b')
+
+      expect(ref1).not.toBe(ref2)
+    })
+
+    it('should handle both string and number node IDs', () => {
+      const { getNodeRevisionRef } = useNodePricing()
+      // Number ID gets stringified, so '123' and 123 should return the same ref
+      const refFromNumber = getNodeRevisionRef(123)
+      const refFromString = getNodeRevisionRef('123')
+
+      expect(refFromNumber).toBe(refFromString)
+    })
+  })
+
+  describe('triggerPriceRecalculation', () => {
+    it('should not throw for API nodes with price_badge', () => {
+      const { triggerPriceRecalculation } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestTriggerNode',
+        priceBadge('{"type":"usd","usd":0.05}')
+      )
+
+      expect(() => triggerPriceRecalculation(node)).not.toThrow()
+    })
+
+    it('should not throw for non-API nodes', () => {
+      const { triggerPriceRecalculation } = useNodePricing()
+      const node: MockNode = {
+        id: 'test',
+        widgets: [],
+        inputs: [],
+        constructor: {
+          nodeData: {
+            name: 'RegularNode',
+            api_node: false
+          }
+        }
+      }
+
+      expect(() =>
+        triggerPriceRecalculation(node as unknown as LGraphNode)
+      ).not.toThrow()
     })
   })
 
   describe('error handling', () => {
-    it('should gracefully handle errors in dynamic pricing functions', () => {
+    it('should return empty string for invalid JSONata expression', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      // Create a node with malformed widget data that could cause errors
-      const node = {
-        id: 'test-node',
-        widgets: null, // This could cause errors when accessing .find()
+      const node = createMockNodeWithPriceBadge(
+        'TestInvalidExprNode',
+        // Invalid JSONata syntax (unclosed parenthesis)
+        priceBadge('{"type":"usd","usd": (widgets.count * 0.01')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      // Should not crash, just return empty
+      expect(price).toBe('')
+    })
+
+    it('should return empty string for expression that throws at runtime', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestRuntimeErrorNode',
+        // Expression that will fail at runtime (calling function on undefined)
+        priceBadge('$lookup(undefined, "key")')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('')
+    })
+
+    it('should return empty string for invalid PricingResult type', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestInvalidResultTypeNode',
+        // Returns object with invalid type field
+        priceBadge('{"type":"invalid_type","value":123}')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('')
+    })
+
+    it('should return empty string for PricingResult missing type field', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestMissingTypeNode',
+        // Returns object without type field
+        priceBadge('{"usd":0.05}')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('')
+    })
+
+    it('should return empty string for non-object result', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestNonObjectNode',
+        // Returns a plain number instead of PricingResult object
+        priceBadge('0.05')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('')
+    })
+
+    it('should return empty string for null result', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestNullResultNode',
+        priceBadge('null')
+      )
+
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('')
+    })
+  })
+
+  describe('input_groups connectivity', () => {
+    it('should count connected inputs in a group', async () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+
+      // Create a node with autogrow-style inputs (group.input1, group.input2, etc.)
+      const node: MockNode = {
+        id: Math.random().toString(),
+        widgets: [],
+        inputs: [
+          { name: 'videos.clip1', link: 1 }, // connected
+          { name: 'videos.clip2', link: 2 }, // connected
+          { name: 'videos.clip3', link: null }, // disconnected
+          { name: 'other_input', link: 3 } // connected but not in group
+        ],
         constructor: {
           nodeData: {
-            name: 'KlingTextToVideoNode',
-            api_node: true
-          }
-        }
-      } as unknown as LGraphNode
-
-      // Should not throw an error and return empty string as fallback
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.14, 2.8, {
-          note: '(varies with model, mode & duration)'
-        })
-      )
-    })
-
-    it('should handle completely broken widget structure', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      // Create a node with no widgets property at all
-      const node = {
-        id: 'test-node',
-        // No widgets property
-        constructor: {
-          nodeData: {
-            name: 'OpenAIDalle3',
-            api_node: true
-          }
-        }
-      } as unknown as LGraphNode
-
-      // Should gracefully fall back to the default range
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.04, 0.12, { note: '(varies with size & quality)' })
-      )
-    })
-  })
-
-  describe('helper methods', () => {
-    describe('getNodePricingConfig', () => {
-      it('should return pricing config for known API nodes', () => {
-        const { getNodePricingConfig } = useNodePricing()
-        const node = createMockNode('KlingTextToVideoNode')
-
-        const config = getNodePricingConfig(node)
-        expect(config).toBeDefined()
-        expect(typeof config.displayPrice).toBe('function')
-      })
-
-      it('should return undefined for unknown nodes', () => {
-        const { getNodePricingConfig } = useNodePricing()
-        const node = createMockNode('UnknownNode')
-
-        const config = getNodePricingConfig(node)
-        expect(config).toBeUndefined()
-      })
-    })
-
-    describe('getRelevantWidgetNames', () => {
-      it('should return correct widget names for KlingTextToVideoNode', () => {
-        const { getRelevantWidgetNames } = useNodePricing()
-
-        const widgetNames = getRelevantWidgetNames('KlingTextToVideoNode')
-        expect(widgetNames).toEqual(['mode', 'model_name', 'duration'])
-      })
-
-      it('should return correct widget names for KlingImage2VideoNode', () => {
-        const { getRelevantWidgetNames } = useNodePricing()
-
-        const widgetNames = getRelevantWidgetNames('KlingImage2VideoNode')
-        expect(widgetNames).toEqual(['mode', 'model_name', 'duration'])
-      })
-
-      it('should return correct widget names for OpenAIDalle3', () => {
-        const { getRelevantWidgetNames } = useNodePricing()
-
-        const widgetNames = getRelevantWidgetNames('OpenAIDalle3')
-        expect(widgetNames).toEqual(['size', 'quality'])
-      })
-
-      it('should return correct widget names for VeoVideoGenerationNode', () => {
-        const { getRelevantWidgetNames } = useNodePricing()
-
-        const widgetNames = getRelevantWidgetNames('VeoVideoGenerationNode')
-        expect(widgetNames).toEqual(['duration_seconds'])
-      })
-
-      it('should return correct widget names for Veo3VideoGenerationNode', () => {
-        const { getRelevantWidgetNames } = useNodePricing()
-
-        const widgetNames = getRelevantWidgetNames('Veo3VideoGenerationNode')
-        expect(widgetNames).toEqual(['model', 'generate_audio'])
-      })
-
-      it('should return correct widget names for LumaVideoNode', () => {
-        const { getRelevantWidgetNames } = useNodePricing()
-
-        const widgetNames = getRelevantWidgetNames('LumaVideoNode')
-        expect(widgetNames).toEqual(['model', 'resolution', 'duration'])
-      })
-
-      it('should return correct widget names for KlingSingleImageVideoEffectNode', () => {
-        const { getRelevantWidgetNames } = useNodePricing()
-
-        const widgetNames = getRelevantWidgetNames(
-          'KlingSingleImageVideoEffectNode'
-        )
-        expect(widgetNames).toEqual(['effect_scene'])
-      })
-
-      it('should return empty array for unknown node types', () => {
-        const { getRelevantWidgetNames } = useNodePricing()
-
-        const widgetNames = getRelevantWidgetNames('UnknownNode')
-        expect(widgetNames).toEqual([])
-      })
-
-      describe('Ideogram nodes with num_images parameter', () => {
-        it('should return correct widget names for IdeogramV1', () => {
-          const { getRelevantWidgetNames } = useNodePricing()
-
-          const widgetNames = getRelevantWidgetNames('IdeogramV1')
-          expect(widgetNames).toEqual(['num_images', 'turbo'])
-        })
-
-        it('should return correct widget names for IdeogramV2', () => {
-          const { getRelevantWidgetNames } = useNodePricing()
-
-          const widgetNames = getRelevantWidgetNames('IdeogramV2')
-          expect(widgetNames).toEqual(['num_images', 'turbo'])
-        })
-
-        it('should return correct widget names for IdeogramV3', () => {
-          const { getRelevantWidgetNames } = useNodePricing()
-
-          const widgetNames = getRelevantWidgetNames('IdeogramV3')
-          expect(widgetNames).toEqual([
-            'rendering_speed',
-            'num_images',
-            'character_image'
-          ])
-        })
-      })
-
-      describe('Recraft nodes with n parameter', () => {
-        it('should return correct widget names for RecraftTextToImageNode', () => {
-          const { getRelevantWidgetNames } = useNodePricing()
-
-          const widgetNames = getRelevantWidgetNames('RecraftTextToImageNode')
-          expect(widgetNames).toEqual(['n'])
-        })
-
-        it('should return correct widget names for RecraftTextToVectorNode', () => {
-          const { getRelevantWidgetNames } = useNodePricing()
-
-          const widgetNames = getRelevantWidgetNames('RecraftTextToVectorNode')
-          expect(widgetNames).toEqual(['n'])
-        })
-      })
-    })
-
-    describe('Ideogram nodes dynamic pricing', () => {
-      it('should calculate dynamic pricing for IdeogramV1 based on num_images value', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('IdeogramV1', [
-          { name: 'num_images', value: 3 }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.26)) // 0.06 * 3 * 1.43
-      })
-
-      it('should calculate dynamic pricing for IdeogramV2 based on num_images value', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('IdeogramV2', [
-          { name: 'num_images', value: 4 }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.46)) // 0.08 * 4 * 1.43
-      })
-
-      it('should fall back to static display when num_images widget is missing for IdeogramV1', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('IdeogramV1', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.03, 0.09, { suffix: ' x num_images/Run' })
-        )
-      })
-
-      it('should fall back to static display when num_images widget is missing for IdeogramV2', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('IdeogramV2', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.07, 0.11, { suffix: ' x num_images/Run' })
-        )
-      })
-
-      it('should handle edge case when num_images value is 1 for IdeogramV1', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('IdeogramV1', [
-          { name: 'num_images', value: 1 }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.09)) // 0.06 * 1 * 1.43 (turbo=false by default)
-      })
-    })
-
-    describe('Recraft nodes dynamic pricing', () => {
-      it('should calculate dynamic pricing for RecraftTextToImageNode based on n value', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RecraftTextToImageNode', [
-          { name: 'n', value: 3 }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.12)) // 0.04 * 3
-      })
-
-      it('should calculate dynamic pricing for RecraftTextToVectorNode based on n value', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RecraftTextToVectorNode', [
-          { name: 'n', value: 2 }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.16)) // 0.08 * 2
-      })
-
-      it('should fall back to static display when n widget is missing', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RecraftTextToImageNode', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.04, { suffix: ' x n/Run' }))
-      })
-
-      it('should handle edge case when n value is 1', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RecraftImageInpaintingNode', [
-          { name: 'n', value: 1 }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.04)) // 0.04 * 1
-      })
-    })
-  })
-
-  describe('OpenAI nodes dynamic pricing with n parameter', () => {
-    it('should calculate dynamic pricing for OpenAIDalle2 based on size and n', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle2', [
-        { name: 'size', value: '1024x1024' },
-        { name: 'n', value: 3 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.06)) // 0.02 * 3
-    })
-
-    it('should calculate dynamic pricing for OpenAIGPTImage1 based on quality and n', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIGPTImage1', [
-        { name: 'quality', value: 'low' },
-        { name: 'n', value: 2 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.011, 0.02, { suffix: ' x 2/Run' }))
-    })
-
-    it('should fall back to static display when n widget is missing for OpenAIDalle2', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('OpenAIDalle2', [
-        { name: 'size', value: '512x512' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.018)) // n defaults to 1
-    })
-  })
-
-  describe('KlingImageGenerationNode dynamic pricing with n parameter', () => {
-    it('should calculate dynamic pricing for text-to-image with kling-v1', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingImageGenerationNode', [
-        { name: 'model_name', value: 'kling-v1' },
-        { name: 'n', value: 4 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.014)) // 0.0035 * 4
-    })
-
-    it('should calculate dynamic pricing for text-to-image with kling-v1-5', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      // Mock node without image input (text-to-image mode)
-      const node = createMockNode('KlingImageGenerationNode', [
-        { name: 'model_name', value: 'kling-v1-5' },
-        { name: 'n', value: 2 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.028)) // For kling-v1-5 text-to-image: 0.014 * 2
-    })
-
-    it('should fall back to static display when model widget is missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('KlingImageGenerationNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsRangeLabel(0.0035, 0.028, {
-          suffix: ' x n/Run',
-          note: '(varies with modality & model)'
-        })
-      )
-    })
-  })
-
-  describe('New Recraft nodes dynamic pricing', () => {
-    it('should calculate dynamic pricing for RecraftGenerateImageNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('RecraftGenerateImageNode', [
-        { name: 'n', value: 3 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.12)) // 0.04 * 3
-    })
-
-    it('should calculate dynamic pricing for RecraftVectorizeImageNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('RecraftVectorizeImageNode', [
-        { name: 'n', value: 5 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.05)) // 0.01 * 5
-    })
-
-    it('should calculate dynamic pricing for RecraftGenerateVectorImageNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('RecraftGenerateVectorImageNode', [
-        { name: 'n', value: 2 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.16)) // 0.08 * 2
-    })
-  })
-
-  describe('Widget names for reactive updates', () => {
-    it('should include n parameter for OpenAI nodes', () => {
-      const { getRelevantWidgetNames } = useNodePricing()
-
-      expect(getRelevantWidgetNames('OpenAIDalle2')).toEqual(['size', 'n'])
-      expect(getRelevantWidgetNames('OpenAIGPTImage1')).toEqual([
-        'quality',
-        'n'
-      ])
-    })
-
-    it('should include n parameter for Kling and new Recraft nodes', () => {
-      const { getRelevantWidgetNames } = useNodePricing()
-
-      expect(getRelevantWidgetNames('KlingImageGenerationNode')).toEqual([
-        'modality',
-        'model_name',
-        'n'
-      ])
-      expect(getRelevantWidgetNames('RecraftVectorizeImageNode')).toEqual(['n'])
-      expect(getRelevantWidgetNames('RecraftGenerateImageNode')).toEqual(['n'])
-      expect(getRelevantWidgetNames('RecraftGenerateVectorImageNode')).toEqual([
-        'n'
-      ])
-      expect(
-        getRelevantWidgetNames('RecraftGenerateColorFromImageNode')
-      ).toEqual(['n'])
-    })
-
-    it('should include relevant widget names for new nodes', () => {
-      const { getRelevantWidgetNames } = useNodePricing()
-
-      expect(getRelevantWidgetNames('RunwayImageToVideoNodeGen3a')).toEqual([
-        'duration'
-      ])
-      expect(getRelevantWidgetNames('RunwayImageToVideoNodeGen4')).toEqual([
-        'duration'
-      ])
-      expect(getRelevantWidgetNames('RunwayFirstLastFrameNode')).toEqual([
-        'duration'
-      ])
-      expect(getRelevantWidgetNames('TripoTextToModelNode')).toEqual([
-        'model_version',
-        'quad',
-        'style',
-        'texture',
-        'pbr',
-        'texture_quality',
-        'geometry_quality'
-      ])
-      expect(getRelevantWidgetNames('TripoImageToModelNode')).toEqual([
-        'model_version',
-        'quad',
-        'style',
-        'texture',
-        'pbr',
-        'texture_quality',
-        'geometry_quality'
-      ])
-    })
-  })
-
-  describe('New API nodes pricing', () => {
-    describe('RunwayML nodes', () => {
-      it('should return static price for RunwayTextToImageNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RunwayTextToImageNode')
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.11))
-      })
-
-      it('should calculate dynamic pricing for RunwayImageToVideoNodeGen3a', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RunwayImageToVideoNodeGen3a', [
-          { name: 'duration', value: 10 }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.0715 * 10))
-      })
-
-      it('should return fallback for RunwayImageToVideoNodeGen3a without duration', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RunwayImageToVideoNodeGen3a', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.0715, { suffix: '/second' }))
-      })
-
-      it('should handle zero duration for RunwayImageToVideoNodeGen3a', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RunwayImageToVideoNodeGen3a', [
-          { name: 'duration', value: 0 }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.0)) // 0.05 * 0 = 0
-      })
-
-      it('should handle NaN duration for RunwayImageToVideoNodeGen3a', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RunwayImageToVideoNodeGen3a', [
-          { name: 'duration', value: 'invalid' }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.0715 * 5))
-      })
-    })
-
-    describe('Rodin nodes', () => {
-      it('should return base price for Rodin3D_Regular', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('Rodin3D_Regular')
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.4))
-      })
-
-      it('should return addon price for Rodin3D_Detail', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('Rodin3D_Detail')
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.4))
-      })
-
-      it('should return addon price for Rodin3D_Smooth', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('Rodin3D_Smooth')
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.4))
-      })
-    })
-
-    describe('Tripo nodes', () => {
-      it('should return v2.5 standard pricing for TripoTextToModelNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoTextToModelNode', [
-          { name: 'model_version', value: 'v2.5' },
-          { name: 'quad', value: false },
-          { name: 'style', value: 'any style' },
-          { name: 'texture', value: false },
-          { name: 'texture_quality', value: 'standard' }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.15)) // any style, no quad, no texture
-      })
-
-      it('should return v2.5 detailed pricing for TripoTextToModelNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoTextToModelNode', [
-          { name: 'model_version', value: 'v2.5' },
-          { name: 'quad', value: true },
-          { name: 'style', value: 'any style' },
-          { name: 'texture', value: false },
-          { name: 'texture_quality', value: 'detailed' }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.3)) // any style, quad, no texture, detailed
-      })
-
-      it('should return v2.0 detailed pricing for TripoImageToModelNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoImageToModelNode', [
-          { name: 'model_version', value: 'v2.0' },
-          { name: 'quad', value: true },
-          { name: 'style', value: 'any style' },
-          { name: 'texture', value: false },
-          { name: 'texture_quality', value: 'detailed' }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.4)) // any style, quad, no texture, detailed
-      })
-
-      it('should return legacy pricing for TripoTextToModelNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoTextToModelNode', [
-          { name: 'model_version', value: 'v2.0' },
-          { name: 'quad', value: false },
-          { name: 'style', value: 'none' },
-          { name: 'texture', value: false },
-          { name: 'texture_quality', value: 'standard' }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.1)) // none style, no quad, no texture
-      })
-
-      it('should return static price for TripoRefineNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoRefineNode')
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.3))
-      })
-
-      it('should return fallback for TripoTextToModelNode without model', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoTextToModelNode', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.1, 0.65, {
-            note: 'varies with quad, style, texture & quality'
-          })
-        )
-      })
-
-      it('should return texture-based pricing for TripoTextureNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const standardNode = createMockNode('TripoTextureNode', [
-          { name: 'texture_quality', value: 'standard' }
-        ])
-        const detailedNode = createMockNode('TripoTextureNode', [
-          { name: 'texture_quality', value: 'detailed' }
-        ])
-
-        expect(getNodeDisplayPrice(standardNode)).toBe(creditsLabel(0.1))
-        expect(getNodeDisplayPrice(detailedNode)).toBe(creditsLabel(0.2))
-      })
-
-      it('should handle various Tripo parameter combinations', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        // Test different parameter combinations
-        const testCases = [
-          {
-            model_version: 'v3.0',
-            quad: false,
-            style: 'none',
-            texture: false,
-            expected: creditsLabel(0.1)
-          },
-          {
-            model_version: 'v3.0',
-            quad: false,
-            style: 'any style',
-            texture: false,
-            expected: creditsLabel(0.15)
-          },
-          {
-            model_version: 'v3.0',
-            quad: true,
-            style: 'any style',
-            texture: false,
-            expected: creditsLabel(0.2)
-          },
-          {
-            model_version: 'v3.0',
-            quad: true,
-            style: 'any style',
-            texture: true,
-            expected: creditsLabel(0.3)
-          }
-        ]
-
-        testCases.forEach(({ quad, style, texture, expected }) => {
-          const node = createMockNode('TripoTextToModelNode', [
-            { name: 'model_version', value: 'v2.0' },
-            { name: 'quad', value: quad },
-            { name: 'style', value: style },
-            { name: 'texture', value: texture },
-            { name: 'texture_quality', value: 'standard' }
-          ])
-          expect(getNodeDisplayPrice(node)).toBe(expected)
-        })
-      })
-
-      it('should return static price for TripoRetargetNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoRetargetNode')
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.1))
-      })
-
-      it('should return dynamic pricing for TripoMultiviewToModelNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        // Test basic case - no style, no quad, no texture
-        const basicNode = createMockNode('TripoMultiviewToModelNode', [
-          { name: 'model_version', value: 'v3.0' },
-          { name: 'quad', value: false },
-          { name: 'style', value: 'none' },
-          { name: 'texture', value: false },
-          { name: 'texture_quality', value: 'standard' }
-        ])
-        expect(getNodeDisplayPrice(basicNode)).toBe(creditsLabel(0.2))
-
-        // Test high-end case - any style, quad, texture, detailed
-        const highEndNode = createMockNode('TripoMultiviewToModelNode', [
-          { name: 'model_version', value: 'v3.0' },
-          { name: 'quad', value: true },
-          { name: 'style', value: 'stylized' },
-          { name: 'texture', value: true },
-          { name: 'texture_quality', value: 'detailed' }
-        ])
-        expect(getNodeDisplayPrice(highEndNode)).toBe(creditsLabel(0.5))
-      })
-
-      it('should return fallback for TripoMultiviewToModelNode without widgets', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoMultiviewToModelNode', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.1, 0.65, {
-            note: '(varies with quad, style, texture & quality)'
-          })
-        )
-      })
-    })
-
-    describe('Gemini and OpenAI Chat nodes', () => {
-      it('should return specific pricing for supported Gemini models', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        const testCases = [
-          {
-            model: 'gemini-2.5-pro-preview-05-06',
-            expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gemini-2.5-pro',
-            expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gemini-3-pro-preview',
-            expected: creditsListLabel([0.002, 0.012], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gemini-2.5-flash-preview-04-17',
-            expected: creditsListLabel([0.0003, 0.0025], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gemini-2.5-flash',
-            expected: creditsListLabel([0.0003, 0.0025], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          { model: 'unknown-gemini-model', expected: 'Token-based' }
-        ]
-
-        testCases.forEach(({ model, expected }) => {
-          const node = createMockNode('GeminiNode', [
-            { name: 'model', value: model }
-          ])
-          expect(getNodeDisplayPrice(node)).toBe(expected)
-        })
-      })
-
-      it('should return fallback for GeminiNode without model widget', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('GeminiNode', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe('Token-based')
-      })
-
-      it('should return token-based pricing for OpenAIChatNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('OpenAIChatNode', [
-          { name: 'model', value: 'unknown-model' }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe('Token-based')
-      })
-
-      it('should return correct pricing for all exposed OpenAI models', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        const testCases = [
-          {
-            model: 'o4-mini',
-            expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'o1-pro',
-            expected: creditsListLabel([0.15, 0.6], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'o1',
-            expected: creditsListLabel([0.015, 0.06], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'o3-mini',
-            expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'o3',
-            expected: creditsListLabel([0.01, 0.04], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-4o',
-            expected: creditsListLabel([0.0025, 0.01], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-4.1-nano',
-            expected: creditsListLabel([0.0001, 0.0004], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-4.1-mini',
-            expected: creditsListLabel([0.0004, 0.0016], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-4.1',
-            expected: creditsListLabel([0.002, 0.008], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-5-nano',
-            expected: creditsListLabel([0.00005, 0.0004], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-5-mini',
-            expected: creditsListLabel([0.00025, 0.002], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-5',
-            expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          }
-        ]
-
-        testCases.forEach(({ model, expected }) => {
-          const node = createMockNode('OpenAIChatNode', [
-            { name: 'model', value: model }
-          ])
-          expect(getNodeDisplayPrice(node)).toBe(expected)
-        })
-      })
-
-      it('should handle model ordering correctly (specific before general)', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        // Test that more specific patterns are matched before general ones
-        const testCases = [
-          {
-            model: 'gpt-4.1-nano-test',
-            expected: creditsListLabel([0.0001, 0.0004], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-4.1-mini-test',
-            expected: creditsListLabel([0.0004, 0.0016], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'gpt-4.1-test',
-            expected: creditsListLabel([0.002, 0.008], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'o1-pro-test',
-            expected: creditsListLabel([0.15, 0.6], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'o1-test',
-            expected: creditsListLabel([0.015, 0.06], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          {
-            model: 'o3-mini-test',
-            expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
-            })
-          },
-          { model: 'unknown-model', expected: 'Token-based' }
-        ]
-
-        testCases.forEach(({ model, expected }) => {
-          const node = createMockNode('OpenAIChatNode', [
-            { name: 'model', value: model }
-          ])
-          expect(getNodeDisplayPrice(node)).toBe(expected)
-        })
-      })
-
-      it('should return fallback for OpenAIChatNode without model widget', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('OpenAIChatNode', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe('Token-based')
-      })
-
-      it('should return static price for GeminiImageNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('GeminiImageNode')
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsLabel(0.039, {
-            approximate: true,
-            suffix: '/Image (1K)'
-          })
-        )
-      })
-    })
-
-    describe('Additional RunwayML edge cases', () => {
-      it('should handle edge cases for RunwayML duration-based pricing', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        // Test edge cases
-        const RATE_PER_SECOND = 0.0715
-        const testCases = [
-          { duration: 0, expected: creditsLabel(0) },
-          { duration: 1, expected: creditsLabel(RATE_PER_SECOND) },
-          { duration: 30, expected: creditsLabel(RATE_PER_SECOND * 30) }
-        ]
-
-        testCases.forEach(({ duration, expected }) => {
-          const node = createMockNode('RunwayImageToVideoNodeGen3a', [
-            { name: 'duration', value: duration }
-          ])
-          expect(getNodeDisplayPrice(node)).toBe(expected)
-        })
-      })
-
-      it('should handle invalid duration values gracefully', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('RunwayImageToVideoNodeGen3a', [
-          { name: 'duration', value: 'invalid-string' }
-        ])
-        // When Number('invalid-string') returns NaN, it falls back to 5 seconds
-        expect(getNodeDisplayPrice(node)).toBe(creditsLabel(0.0715 * 5))
-      })
-
-      it('should handle missing duration widget gracefully', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const nodes = [
-          'RunwayImageToVideoNodeGen3a',
-          'RunwayImageToVideoNodeGen4',
-          'RunwayFirstLastFrameNode'
-        ]
-
-        nodes.forEach((nodeType) => {
-          const node = createMockNode(nodeType, [])
-          expect(getNodeDisplayPrice(node)).toBe(
-            creditsLabel(0.0715, { suffix: '/second' })
-          )
-        })
-      })
-    })
-
-    describe('Complete Rodin node coverage', () => {
-      it('should return correct pricing for all Rodin variants', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        const testCases = [
-          { nodeType: 'Rodin3D_Regular', expected: creditsLabel(0.4) },
-          { nodeType: 'Rodin3D_Sketch', expected: creditsLabel(0.4) },
-          { nodeType: 'Rodin3D_Detail', expected: creditsLabel(0.4) },
-          { nodeType: 'Rodin3D_Smooth', expected: creditsLabel(0.4) }
-        ]
-
-        testCases.forEach(({ nodeType, expected }) => {
-          const node = createMockNode(nodeType)
-          expect(getNodeDisplayPrice(node)).toBe(expected)
-        })
-      })
-    })
-
-    describe('Comprehensive Tripo edge case testing', () => {
-      it('should handle TripoImageToModelNode with various parameter combinations', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        const testCases = [
-          {
-            quad: false,
-            style: 'none',
-            texture: false,
-            expected: creditsLabel(0.2)
-          },
-          {
-            quad: false,
-            style: 'none',
-            texture: true,
-            expected: creditsLabel(0.3)
-          },
-          {
-            quad: true,
-            style: 'any style',
-            texture: true,
-            textureQuality: 'detailed',
-            expected: creditsLabel(0.5)
-          },
-          {
-            quad: false,
-            style: 'any style',
-            texture: true,
-            textureQuality: 'standard',
-            expected: creditsLabel(0.35)
-          }
-        ]
-
-        testCases.forEach(
-          ({ quad, style, texture, textureQuality, expected }) => {
-            const widgets = [
-              { name: 'model_version', value: 'v3.0' },
-              { name: 'quad', value: quad },
-              { name: 'style', value: style },
-              { name: 'texture', value: texture }
-            ]
-            if (textureQuality) {
-              widgets.push({ name: 'texture_quality', value: textureQuality })
+            name: 'TestInputGroupNode',
+            api_node: true,
+            price_badge: {
+              engine: 'jsonata',
+              expr: '{"type":"usd","usd": inputGroups.videos * 0.05}',
+              depends_on: {
+                widgets: [],
+                inputs: [],
+                input_groups: ['videos']
+              }
             }
-            const node = createMockNode('TripoImageToModelNode', widgets)
-            expect(getNodeDisplayPrice(node)).toBe(expected)
           }
-        )
+        }
+      }
+
+      getNodeDisplayPrice(node as unknown as LGraphNode)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node as unknown as LGraphNode)
+      // 2 connected inputs in 'videos' group * 0.05 = 0.10
+      expect(price).toBe(creditsLabel(0.1))
+    })
+  })
+
+  describe('decimal formatting', () => {
+    describe('shouldShowDecimal helper', () => {
+      it('should return true when first decimal digit is non-zero', () => {
+        expect(shouldShowDecimal(10.5)).toBe(true)
+        expect(shouldShowDecimal(10.1)).toBe(true)
+        expect(shouldShowDecimal(10.9)).toBe(true)
+        expect(shouldShowDecimal(1.5)).toBe(true)
       })
 
-      it('should return correct fallback for TripoImageToModelNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoImageToModelNode', [])
+      it('should return false for whole numbers', () => {
+        expect(shouldShowDecimal(10)).toBe(false)
+        expect(shouldShowDecimal(10.0)).toBe(false)
+        expect(shouldShowDecimal(1)).toBe(false)
+        expect(shouldShowDecimal(100)).toBe(false)
+      })
 
+      it('should return false when decimal rounds to zero', () => {
+        // 10.04 rounds to 10.0, so no decimal shown
+        expect(shouldShowDecimal(10.04)).toBe(false)
+        expect(shouldShowDecimal(10.049)).toBe(false)
+      })
+
+      it('should return true when decimal rounds to non-zero', () => {
+        // 10.05 rounds to 10.1, so decimal shown
+        expect(shouldShowDecimal(10.05)).toBe(true)
+        expect(shouldShowDecimal(10.06)).toBe(true)
+        // 10.45 rounds to 10.5
+        expect(shouldShowDecimal(10.45)).toBe(true)
+      })
+    })
+
+    describe('credit value formatting', () => {
+      it('should show decimal for USD values that result in fractional credits', () => {
+        // $0.05 * 211 = 10.55 credits → "10.6"
+        const value1 = creditValue(0.05)
+        expect(value1).toBe('10.6')
+
+        // $0.10 * 211 = 21.1 credits → "21.1"
+        const value2 = creditValue(0.1)
+        expect(value2).toBe('21.1')
+      })
+
+      it('should not show decimal for USD values that result in whole credits', () => {
+        // $1.00 * 211 = 211 credits → "211"
+        const value = creditValue(1.0)
+        expect(value).toBe('211')
+      })
+
+      it('should not show decimal when credits round to whole number', () => {
+        // Find a USD value that results in credits close to a whole number
+        // $0.0473933... * 211 ≈ 10.0 credits
+        // Let's use a value that gives us ~10.02 credits which rounds to 10.0
+        const usd = 10.02 / CREDITS_PER_USD // ~0.0475 USD → ~10.02 credits
+        const value = creditValue(usd)
+        expect(value).toBe('10')
+      })
+    })
+
+    describe('integration with pricing display', () => {
+      it('should display decimal in badge for fractional credits', async () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        // $0.05 * 211 = 10.55 credits → "10.6 credits/Run"
+        const node = createMockNodeWithPriceBadge(
+          'TestDecimalNode',
+          priceBadge('{"type":"usd","usd":0.05}')
+        )
+
+        getNodeDisplayPrice(node)
+        await new Promise((r) => setTimeout(r, 50))
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.1, 0.65, {
-            note: 'varies with quad, style, texture & quality'
-          })
-        )
+        expect(price).toBe('10.6 credits/Run')
       })
 
-      it('should handle missing texture quality widget', () => {
+      it('should not display decimal in badge for whole credits', async () => {
         const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoTextToModelNode', [])
+        // $1.00 * 211 = 211 credits → "211 credits/Run"
+        const node = createMockNodeWithPriceBadge(
+          'TestWholeCreditsNode',
+          priceBadge('{"type":"usd","usd":1.00}')
+        )
 
+        getNodeDisplayPrice(node)
+        await new Promise((r) => setTimeout(r, 50))
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.1, 0.65, {
-            note: 'varies with quad, style, texture & quality'
-          })
-        )
+        expect(price).toBe('211 credits/Run')
       })
 
-      it('should handle missing model version widget', () => {
+      it('should handle range with mixed decimal display', async () => {
         const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoTextToModelNode', [
-          { name: 'texture_quality', value: 'detailed' }
-        ])
+        // min: $0.05 * 211 = 10.55 → 10.6
+        // max: $1.00 * 211 = 211 → 211
+        const node = createMockNodeWithPriceBadge(
+          'TestMixedRangeNode',
+          priceBadge('{"type":"range_usd","min_usd":0.05,"max_usd":1.00}')
+        )
 
+        getNodeDisplayPrice(node)
+        await new Promise((r) => setTimeout(r, 50))
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.1, 0.65, {
-            note: 'varies with quad, style, texture & quality'
-          })
-        )
+        expect(price).toBe('10.6-211 credits/Run')
       })
-
-      it('should return correct pricing for exposed ByteDance models', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-
-        const testCases = [
-          {
-            node_name: 'ByteDanceImageNode',
-            model: 'seedream-3-0-t2i-250415',
-            expected: creditsLabel(0.03)
-          },
-          {
-            node_name: 'ByteDanceImageEditNode',
-            model: 'seededit-3-0-i2i-250628',
-            expected: creditsLabel(0.03)
-          }
-        ]
-
-        testCases.forEach(({ node_name, model, expected }) => {
-          const node = createMockNode(node_name, [
-            { name: 'model', value: model }
-          ])
-          expect(getNodeDisplayPrice(node)).toBe(expected)
-        })
-      })
-    })
-  })
-
-  describe('dynamic pricing - ByteDanceSeedreamNode', () => {
-    it('should return $0.03 x images/Run', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceSeedreamNode', [
-        { name: 'model', value: 'seedream-4-0-250828' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsLabel(0.03, {
-          suffix: ' x images/Run',
-          approximate: true
-        })
-      )
-    })
-  })
-
-  describe('dynamic pricing - ByteDance Seedance video nodes', () => {
-    it('should return base 10s range for PRO 1080p on ByteDanceTextToVideoNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceTextToVideoNode', [
-        { name: 'model', value: 'seedance-1-0-pro' },
-        { name: 'duration', value: '10' },
-        { name: 'resolution', value: '1080p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(1.18, 1.22))
-    })
-
-    it('should scale to half for 5s PRO 1080p on ByteDanceTextToVideoNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceTextToVideoNode', [
-        { name: 'model', value: 'seedance-1-0-pro' },
-        { name: 'duration', value: '5' },
-        { name: 'resolution', value: '1080p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.59, 0.61))
-    })
-
-    it('should scale for 8s PRO 480p on ByteDanceImageToVideoNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceImageToVideoNode', [
-        { name: 'model', value: 'seedance-1-0-pro' },
-        { name: 'duration', value: '8' },
-        { name: 'resolution', value: '480p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.23 * 0.8, 0.24 * 0.8))
-    })
-
-    it('should scale correctly for 12s PRO 720p on ByteDanceFirstLastFrameNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceFirstLastFrameNode', [
-        { name: 'model', value: 'seedance-1-0-pro' },
-        { name: 'duration', value: '10' },
-        { name: 'resolution', value: '720p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.51, 0.56))
-    })
-
-    it('should collapse to a single value when min and max round equal for LITE 480p 3s on ByteDanceImageReferenceNode', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceImageReferenceNode', [
-        { name: 'model', value: 'seedance-1-0-lite' },
-        { name: 'duration', value: '3' },
-        { name: 'resolution', value: '480p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.05)) // 0.17..0.18 scaled by 0.3 both round to 0.05
-    })
-
-    it('should return Token-based when required widgets are missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const missingModel = createMockNode('ByteDanceFirstLastFrameNode', [
-        { name: 'duration', value: '10' },
-        { name: 'resolution', value: '1080p' }
-      ])
-      const missingResolution = createMockNode('ByteDanceImageToVideoNode', [
-        { name: 'model', value: 'seedance-1-0-pro' },
-        { name: 'duration', value: '10' }
-      ])
-      const missingDuration = createMockNode('ByteDanceTextToVideoNode', [
-        { name: 'model', value: 'seedance-1-0-lite' },
-        { name: 'resolution', value: '720p' }
-      ])
-
-      expect(getNodeDisplayPrice(missingModel)).toBe('Token-based')
-      expect(getNodeDisplayPrice(missingResolution)).toBe('Token-based')
-      expect(getNodeDisplayPrice(missingDuration)).toBe('Token-based')
-    })
-  })
-
-  describe('dynamic pricing - WanTextToVideoApi', () => {
-    it('should return $1.50 for 10s at 1080p', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanTextToVideoApi', [
-        { name: 'duration', value: '10' },
-        { name: 'size', value: '1080p: 4:3 (1632x1248)' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.5)) // 0.15 * 10
-    })
-
-    it('should return $0.50 for 5s at 720p', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanTextToVideoApi', [
-        { name: 'duration', value: 5 },
-        { name: 'size', value: '720p: 16:9 (1280x720)' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.5)) // 0.10 * 5
-    })
-
-    it('should return $0.15 for 3s at 480p', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanTextToVideoApi', [
-        { name: 'duration', value: '3' },
-        { name: 'size', value: '480p: 1:1 (624x624)' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.15)) // 0.05 * 3
-    })
-
-    it('should fall back when widgets are missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const missingBoth = createMockNode('WanTextToVideoApi', [])
-      const missingSize = createMockNode('WanTextToVideoApi', [
-        { name: 'duration', value: '5' }
-      ])
-      const missingDuration = createMockNode('WanTextToVideoApi', [
-        { name: 'size', value: '1080p' }
-      ])
-
-      expect(getNodeDisplayPrice(missingBoth)).toBe(
-        creditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-      )
-      expect(getNodeDisplayPrice(missingSize)).toBe(
-        creditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-      )
-      expect(getNodeDisplayPrice(missingDuration)).toBe(
-        creditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-      )
-    })
-
-    it('should fall back on invalid duration', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanTextToVideoApi', [
-        { name: 'duration', value: 'invalid' },
-        { name: 'size', value: '1080p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.05, 0.15, { suffix: '/second' }))
-    })
-
-    it('should fall back on unknown resolution', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanTextToVideoApi', [
-        { name: 'duration', value: '10' },
-        { name: 'size', value: '2K' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.05, 0.15, { suffix: '/second' }))
-    })
-  })
-
-  describe('dynamic pricing - WanImageToVideoApi', () => {
-    it('should return $0.80 for 8s at 720p', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanImageToVideoApi', [
-        { name: 'duration', value: 8 },
-        { name: 'resolution', value: '720p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.8)) // 0.10 * 8
-    })
-
-    it('should return $0.60 for 12s at 480P', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanImageToVideoApi', [
-        { name: 'duration', value: '12' },
-        { name: 'resolution', value: '480P' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.6)) // 0.05 * 12
-    })
-
-    it('should return $1.50 for 10s at 1080p', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanImageToVideoApi', [
-        { name: 'duration', value: '10' },
-        { name: 'resolution', value: '1080p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.5)) // 0.15 * 10
-    })
-
-    it('should handle "5s" string duration at 1080P', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanImageToVideoApi', [
-        { name: 'duration', value: '5s' },
-        { name: 'resolution', value: '1080P' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.75)) // 0.15 * 5
-    })
-
-    it('should fall back when widgets are missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const missingBoth = createMockNode('WanImageToVideoApi', [])
-      const missingRes = createMockNode('WanImageToVideoApi', [
-        { name: 'duration', value: '5' }
-      ])
-      const missingDuration = createMockNode('WanImageToVideoApi', [
-        { name: 'resolution', value: '1080p' }
-      ])
-
-      expect(getNodeDisplayPrice(missingBoth)).toBe(
-        creditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-      )
-      expect(getNodeDisplayPrice(missingRes)).toBe(
-        creditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-      )
-      expect(getNodeDisplayPrice(missingDuration)).toBe(
-        creditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-      )
-    })
-
-    it('should fall back on invalid duration', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanImageToVideoApi', [
-        { name: 'duration', value: 'invalid' },
-        { name: 'resolution', value: '720p' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.05, 0.15, { suffix: '/second' }))
-    })
-
-    it('should fall back on unknown resolution', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('WanImageToVideoApi', [
-        { name: 'duration', value: '10' },
-        { name: 'resolution', value: 'weird-res' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.05, 0.15, { suffix: '/second' }))
-    })
-  })
-
-  describe('dynamic pricing - LtxvApiTextToVideo', () => {
-    it('should return $0.30 for Pro 1080p 5s', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('LtxvApiTextToVideo', [
-        { name: 'model', value: 'LTX-2 (Pro)' },
-        { name: 'duration', value: '5' },
-        { name: 'resolution', value: '1920x1080' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.3)) // 0.06 * 5
-    })
-
-    it('should parse "10s" duration strings', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('LtxvApiTextToVideo', [
-        { name: 'model', value: 'LTX-2 (Fast)' },
-        { name: 'duration', value: '10' },
-        { name: 'resolution', value: '3840x2160' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(1.6)) // 0.16 * 10
-    })
-
-    it('should fall back when a required widget is missing (no resolution)', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('LtxvApiTextToVideo', [
-        { name: 'model', value: 'LTX-2 (Pro)' },
-        { name: 'duration', value: '5' }
-        // missing resolution
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.04, 0.24, { suffix: '/second' }))
-    })
-
-    it('should fall back for unknown model', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('LtxvApiTextToVideo', [
-        { name: 'model', value: 'LTX-3 (Pro)' },
-        { name: 'duration', value: 5 },
-        { name: 'resolution', value: '1920x1080' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.04, 0.24, { suffix: '/second' }))
     })
   })
 })
-const CREDIT_NUMBER_OPTIONS: Intl.NumberFormatOptions = {
-  minimumFractionDigits: 0,
-  maximumFractionDigits: 0
-}
-
-type CreditFormatOptions = {
-  suffix?: string
-  note?: string
-  approximate?: boolean
-}
-
-const creditValue = (usd: number): string =>
-  formatCreditsFromUsd({
-    usd,
-    numberOptions: CREDIT_NUMBER_OPTIONS
-  })
-
-const prefix = (approximate?: boolean) => (approximate ? '~' : '')
-const suffix = (value?: string) => value ?? '/Run'
-const note = (value?: string) => {
-  if (!value) return ''
-  const trimmed = value.trim()
-  const hasParens = trimmed.startsWith('(') && trimmed.endsWith(')')
-  const content = hasParens ? trimmed : `(${trimmed})`
-  return ` ${content}`
-}
-
-const creditsLabel = (
-  usd: number,
-  {
-    suffix: suffixOverride,
-    note: noteOverride,
-    approximate
-  }: CreditFormatOptions = {}
-): string =>
-  `${prefix(approximate)}${creditValue(usd)} credits${suffix(suffixOverride)}${note(noteOverride)}`
-
-const creditsRangeLabel = (
-  minUsd: number,
-  maxUsd: number,
-  options?: CreditFormatOptions
-): string => {
-  const min = creditValue(minUsd)
-  const max = creditValue(maxUsd)
-  const value = min === max ? min : `${min}-${max}`
-  return `${prefix(options?.approximate)}${value} credits${suffix(options?.suffix)}${note(options?.note)}`
-}
-
-const creditsListLabel = (
-  usdValues: number[],
-  options?: CreditFormatOptions & { separator?: string }
-): string => {
-  const parts = usdValues.map((value) => creditValue(value))
-  const value = parts.join(options?.separator ?? '/')
-  return `${prefix(options?.approximate)}${value} credits${suffix(options?.suffix)}${note(options?.note)}`
-}
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index 95c432747..5d08e5794 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -1,23 +1,45 @@
-import { formatCreditsFromUsd } from '@/base/credits/comfyCredits'
-import type { INodeInputSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
+// JSONata-based pricing badge evaluation for API nodes.
+//
+// Pricing declarations are read from ComfyUI node definitions (price_badge field).
+// The Frontend evaluates these declarations locally using a JSONata engine.
+//
+// JSONata v2.x NOTE:
+// - jsonata(expression).evaluate(input) returns a Promise in JSONata 2.x.
+// - Therefore, pricing evaluation is async. This file implements:
+//   - sync getter (returns cached label / last-known label),
+//   - async evaluation + cache,
+//   - reactive tick to update UI when async evaluation completes.
+
+import { readonly, ref } from 'vue'
+import type { Ref } from 'vue'
+import { CREDITS_PER_USD, formatCredits } from '@/base/credits/comfyCredits'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  ComfyNodeDef,
+  PriceBadge,
+  WidgetDependency
+} from '@/schemas/nodeDefSchema'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import type { Expression } from 'jsonata'
+import jsonata from 'jsonata'
 
 /**
- * Meshy credit pricing constant.
- * 1 Meshy credit = $0.04 USD
- * Change this value to update all Meshy node prices.
+ * Determine if a number should display 1 decimal place.
+ * Shows decimal only when the first decimal digit is non-zero.
  */
-const MESHY_CREDIT_PRICE_USD = 0.04
-
-/** Convert Meshy credits to USD */
-const meshyCreditsToUsd = (credits: number): number =>
-  credits * MESHY_CREDIT_PRICE_USD
-
-const DEFAULT_NUMBER_OPTIONS: Intl.NumberFormatOptions = {
-  minimumFractionDigits: 0,
-  maximumFractionDigits: 0
+const shouldShowDecimal = (value: number): boolean => {
+  const rounded = Math.round(value * 10) / 10
+  return rounded % 1 !== 0
 }
 
+const getNumberOptions = (credits: number): Intl.NumberFormatOptions => ({
+  minimumFractionDigits: 0,
+  maximumFractionDigits: shouldShowDecimal(credits) ? 1 : 0
+})
+
 type CreditFormatOptions = {
   suffix?: string
   note?: string
@@ -25,11 +47,14 @@ type CreditFormatOptions = {
   separator?: string
 }
 
-const formatCreditsValue = (usd: number): string =>
-  formatCreditsFromUsd({
-    usd,
-    numberOptions: DEFAULT_NUMBER_OPTIONS
+const formatCreditsValue = (usd: number): string => {
+  // Use raw credits value (before rounding) to determine decimal display
+  const rawCredits = usd * CREDITS_PER_USD
+  return formatCredits({
+    value: rawCredits,
+    numberOptions: getNumberOptions(rawCredits)
   })
+}
 
 const makePrefix = (approximate?: boolean) => (approximate ? '~' : '')
 
@@ -63,2616 +88,567 @@ const formatCreditsListLabel = (
   return `${makePrefix(approximate)}${value} credits${makeSuffix(suffix)}${appendNote(note)}`
 }
 
-/**
- * Function that calculates dynamic pricing based on node widget values
- */
-type PricingFunction = (node: LGraphNode) => string
-
-/**
- * Safely executes a pricing function with error handling
- * Returns null if the function throws an error, allowing the node to still render
- */
-function safePricingExecution(
-  fn: PricingFunction,
-  node: LGraphNode,
-  fallback: string = ''
-): string {
-  try {
-    return fn(node)
-  } catch (error) {
-    // Log error in development but don't throw to avoid breaking node rendering
-    if (process.env.NODE_ENV === 'development') {
-      console.warn(
-        'Pricing calculation failed for node:',
-        node.constructor?.nodeData?.name,
-        error
-      )
+// -----------------------------
+// JSONata pricing types
+// -----------------------------
+type PricingResult =
+  | { type: 'text'; text: string }
+  | { type: 'usd'; usd: number; format?: CreditFormatOptions }
+  | {
+      type: 'range_usd'
+      min_usd: number
+      max_usd: number
+      format?: CreditFormatOptions
     }
-    return fallback
-  }
-}
+  | { type: 'list_usd'; usd: number[]; format?: CreditFormatOptions }
 
-/**
- * Helper function to calculate Runway duration-based pricing
- * @param node - The LiteGraph node
- * @returns Formatted price string
- */
-const calculateRunwayDurationPrice = (node: LGraphNode): string => {
-  const durationWidget = node.widgets?.find(
-    (w) => w.name === 'duration'
-  ) as IComboWidget
+const PRICING_RESULT_TYPES = ['text', 'usd', 'range_usd', 'list_usd'] as const
 
-  if (!durationWidget) return formatCreditsLabel(0.0715, { suffix: '/second' })
-
-  const duration = Number(durationWidget.value)
-  const validDuration = isNaN(duration) ? 5 : duration
-  const cost = 0.0715 * validDuration
-  return formatCreditsLabel(cost)
-}
-
-const makeOmniProDurationCalculator =
-  (pricePerSecond: number): PricingFunction =>
-  (node: LGraphNode): string => {
-    const durationWidget = node.widgets?.find(
-      (w) => w.name === 'duration'
-    ) as IComboWidget
-    if (!durationWidget)
-      return formatCreditsLabel(pricePerSecond, { suffix: '/second' })
-
-    const seconds = parseFloat(String(durationWidget.value))
-    if (!Number.isFinite(seconds))
-      return formatCreditsLabel(pricePerSecond, { suffix: '/second' })
-
-    const cost = pricePerSecond * seconds
-    return formatCreditsLabel(cost)
-  }
-
-const klingMotionControlPricingCalculator: PricingFunction = (
-  node: LGraphNode
-): string => {
-  const modeWidget = node.widgets?.find(
-    (w) => w.name === 'mode'
-  ) as IComboWidget
-
-  if (!modeWidget) {
-    return formatCreditsListLabel([0.07, 0.112], {
-      suffix: '/second',
-      note: '(std/pro)'
-    })
-  }
-
-  const mode = String(modeWidget.value).toLowerCase()
-
-  if (mode === 'pro') return formatCreditsLabel(0.112, { suffix: '/second' })
-  if (mode === 'std') return formatCreditsLabel(0.07, { suffix: '/second' })
-
-  return formatCreditsListLabel([0.07, 0.112], {
-    suffix: '/second',
-    note: '(std/pro)'
-  })
-}
-
-const pixversePricingCalculator = (node: LGraphNode): string => {
-  const durationWidget = node.widgets?.find(
-    (w) => w.name === 'duration_seconds'
-  ) as IComboWidget
-  const qualityWidget = node.widgets?.find(
-    (w) => w.name === 'quality'
-  ) as IComboWidget
-  const motionModeWidget = node.widgets?.find(
-    (w) => w.name === 'motion_mode'
-  ) as IComboWidget
-
-  if (!durationWidget || !qualityWidget) {
-    return formatCreditsRangeLabel(0.45, 1.2, {
-      note: '(varies with duration, quality & motion mode)'
-    })
-  }
-
-  const duration = String(durationWidget.value)
-  const quality = String(qualityWidget.value)
-  const motionMode = String(motionModeWidget?.value)
-
-  // Basic pricing based on duration and quality
-  if (duration.includes('5')) {
-    if (quality.includes('1080p')) return formatCreditsLabel(1.2)
-    if (quality.includes('720p') && motionMode?.includes('fast'))
-      return formatCreditsLabel(1.2)
-    if (quality.includes('720p') && motionMode?.includes('normal'))
-      return formatCreditsLabel(0.6)
-    if (quality.includes('540p') && motionMode?.includes('fast'))
-      return formatCreditsLabel(0.9)
-    if (quality.includes('540p') && motionMode?.includes('normal'))
-      return formatCreditsLabel(0.45)
-    if (quality.includes('360p') && motionMode?.includes('fast'))
-      return formatCreditsLabel(0.9)
-    if (quality.includes('360p') && motionMode?.includes('normal'))
-      return formatCreditsLabel(0.45)
-  } else if (duration.includes('8')) {
-    if (quality.includes('540p') && motionMode?.includes('normal'))
-      return formatCreditsLabel(0.9)
-    if (quality.includes('540p') && motionMode?.includes('fast'))
-      return formatCreditsLabel(1.2)
-    if (quality.includes('360p') && motionMode?.includes('normal'))
-      return formatCreditsLabel(0.9)
-    if (quality.includes('360p') && motionMode?.includes('fast'))
-      return formatCreditsLabel(1.2)
-    if (quality.includes('1080p') && motionMode?.includes('normal'))
-      return formatCreditsLabel(1.2)
-    if (quality.includes('1080p') && motionMode?.includes('fast'))
-      return formatCreditsLabel(1.2)
-    if (quality.includes('720p') && motionMode?.includes('normal'))
-      return formatCreditsLabel(1.2)
-    if (quality.includes('720p') && motionMode?.includes('fast'))
-      return formatCreditsLabel(1.2)
-  }
-
-  return formatCreditsLabel(0.9)
-}
-
-const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
-  const modelWidget = node.widgets?.find(
-    (w) => w.name === 'model'
-  ) as IComboWidget
-  const durationWidget = node.widgets?.find(
-    (w) => w.name === 'duration'
-  ) as IComboWidget
-  const resolutionWidget = node.widgets?.find(
-    (w) => w.name === 'resolution'
-  ) as IComboWidget
-  const generateAudioWidget = node.widgets?.find(
-    (w) => w.name === 'generate_audio'
-  ) as IComboWidget | undefined
-
-  if (!modelWidget || !durationWidget || !resolutionWidget) return 'Token-based'
-
-  const model = String(modelWidget.value).toLowerCase()
-  const resolution = String(resolutionWidget.value).toLowerCase()
-  const seconds = parseFloat(String(durationWidget.value))
-  const generateAudio =
-    generateAudioWidget &&
-    String(generateAudioWidget.value).toLowerCase() === 'true'
-  const priceByModel: Record<string, Record<string, [number, number]>> = {
-    'seedance-1-5-pro': {
-      '480p': [0.12, 0.12],
-      '720p': [0.26, 0.26],
-      '1080p': [0.58, 0.59]
-    },
-    'seedance-1-0-pro': {
-      '480p': [0.23, 0.24],
-      '720p': [0.51, 0.56],
-      '1080p': [1.18, 1.22]
-    },
-    'seedance-1-0-pro-fast': {
-      '480p': [0.09, 0.1],
-      '720p': [0.21, 0.23],
-      '1080p': [0.47, 0.49]
-    },
-    'seedance-1-0-lite': {
-      '480p': [0.17, 0.18],
-      '720p': [0.37, 0.41],
-      '1080p': [0.85, 0.88]
-    }
-  }
-
-  const modelKey = model.includes('seedance-1-5-pro')
-    ? 'seedance-1-5-pro'
-    : model.includes('seedance-1-0-pro-fast')
-      ? 'seedance-1-0-pro-fast'
-      : model.includes('seedance-1-0-pro')
-        ? 'seedance-1-0-pro'
-        : model.includes('seedance-1-0-lite')
-          ? 'seedance-1-0-lite'
-          : ''
-
-  const resKey = resolution.includes('1080')
-    ? '1080p'
-    : resolution.includes('720')
-      ? '720p'
-      : resolution.includes('480')
-        ? '480p'
-        : ''
-
-  const baseRange =
-    modelKey && resKey ? priceByModel[modelKey]?.[resKey] : undefined
-  if (!baseRange) return 'Token-based'
-
-  const [min10s, max10s] = baseRange
-  const scale = seconds / 10
-  const audioMultiplier =
-    modelKey === 'seedance-1-5-pro' && generateAudio ? 2 : 1
-  const minCost = min10s * scale * audioMultiplier
-  const maxCost = max10s * scale * audioMultiplier
-
-  if (minCost === maxCost) return formatCreditsLabel(minCost)
-  return formatCreditsRangeLabel(minCost, maxCost)
-}
-
-const ltxvPricingCalculator = (node: LGraphNode): string => {
-  const modelWidget = node.widgets?.find(
-    (w) => w.name === 'model'
-  ) as IComboWidget
-  const durationWidget = node.widgets?.find(
-    (w) => w.name === 'duration'
-  ) as IComboWidget
-  const resolutionWidget = node.widgets?.find(
-    (w) => w.name === 'resolution'
-  ) as IComboWidget
-
-  const fallback = formatCreditsRangeLabel(0.04, 0.24, {
-    suffix: '/second'
-  })
-  if (!modelWidget || !durationWidget || !resolutionWidget) return fallback
-
-  const model = String(modelWidget.value).toLowerCase()
-  const resolution = String(resolutionWidget.value).toLowerCase()
-  const seconds = parseFloat(String(durationWidget.value))
-  const priceByModel: Record<string, Record<string, number>> = {
-    'ltx-2 (pro)': {
-      '1920x1080': 0.06,
-      '2560x1440': 0.12,
-      '3840x2160': 0.24
-    },
-    'ltx-2 (fast)': {
-      '1920x1080': 0.04,
-      '2560x1440': 0.08,
-      '3840x2160': 0.16
-    }
-  }
-
-  const modelTable = priceByModel[model]
-  if (!modelTable) return fallback
-
-  const pps = modelTable[resolution]
-  if (!pps) return fallback
-
-  const cost = pps * seconds
-  return formatCreditsLabel(cost)
-}
-
-const klingVideoWithAudioPricingCalculator: PricingFunction = (
-  node: LGraphNode
-): string => {
-  const durationWidget = node.widgets?.find(
-    (w) => w.name === 'duration'
-  ) as IComboWidget
-  const generateAudioWidget = node.widgets?.find(
-    (w) => w.name === 'generate_audio'
-  ) as IComboWidget
-
-  if (!durationWidget || !generateAudioWidget) {
-    return formatCreditsRangeLabel(0.35, 1.4, {
-      note: '(varies with duration & audio)'
-    })
-  }
-
-  const duration = String(durationWidget.value)
-  const generateAudio =
-    String(generateAudioWidget.value).toLowerCase() === 'true'
-
-  if (duration === '5') {
-    return generateAudio ? formatCreditsLabel(0.7) : formatCreditsLabel(0.35)
-  }
-
-  if (duration === '10') {
-    return generateAudio ? formatCreditsLabel(1.4) : formatCreditsLabel(0.7)
-  }
-
-  // Fallback for unexpected duration values
-  return formatCreditsRangeLabel(0.35, 1.4, {
-    note: '(varies with duration & audio)'
-  })
-}
-
-// ---- constants ----
-const SORA_SIZES = {
-  BASIC: new Set(['720x1280', '1280x720']),
-  PRO: new Set(['1024x1792', '1792x1024'])
-}
-const ALL_SIZES = new Set([...SORA_SIZES.BASIC, ...SORA_SIZES.PRO])
-
-// ---- sora-2 pricing helpers ----
-function validateSora2Selection(
-  modelRaw: string,
-  duration: number,
-  sizeRaw: string
-): string | undefined {
-  const model = modelRaw?.toLowerCase() ?? ''
-  const size = sizeRaw?.toLowerCase() ?? ''
-
-  if (!duration || Number.isNaN(duration)) return 'Set duration (4s / 8s / 12s)'
-  if (!size) return 'Set size (720x1280, 1280x720, 1024x1792, 1792x1024)'
-  if (!ALL_SIZES.has(size))
-    return 'Invalid size. Must be 720x1280, 1280x720, 1024x1792, or 1792x1024.'
-
-  if (model.includes('sora-2-pro')) return undefined
-
-  if (model.includes('sora-2') && !SORA_SIZES.BASIC.has(size))
-    return 'sora-2 supports only 720x1280 or 1280x720'
-
-  if (!model.includes('sora-2')) return 'Unsupported model'
-
-  return undefined
-}
-
-function perSecForSora2(modelRaw: string, sizeRaw: string): number {
-  const model = modelRaw?.toLowerCase() ?? ''
-  const size = sizeRaw?.toLowerCase() ?? ''
-
-  if (model.includes('sora-2-pro')) {
-    return SORA_SIZES.PRO.has(size) ? 0.5 : 0.3
-  }
-  if (model.includes('sora-2')) return 0.1
-
-  return SORA_SIZES.PRO.has(size) ? 0.5 : 0.1
-}
-
-function formatRunPrice(perSec: number, duration: number) {
-  return formatCreditsLabel(Number((perSec * duration).toFixed(2)))
-}
-
-// ---- pricing calculator ----
-const sora2PricingCalculator: PricingFunction = (node: LGraphNode): string => {
-  const getWidgetValue = (name: string) =>
-    String(node.widgets?.find((w) => w.name === name)?.value ?? '')
-
-  const model = getWidgetValue('model')
-  const size = getWidgetValue('size')
-  const duration = Number(
-    node.widgets?.find((w) => ['duration', 'duration_s'].includes(w.name))
-      ?.value
+/** Type guard to validate that a value is a PricingResult. */
+const isPricingResult = (value: unknown): value is PricingResult =>
+  typeof value === 'object' &&
+  value !== null &&
+  'type' in value &&
+  typeof (value as { type: unknown }).type === 'string' &&
+  PRICING_RESULT_TYPES.includes(
+    (value as { type: string }).type as (typeof PRICING_RESULT_TYPES)[number]
   )
 
-  if (!model || !size || !duration) return 'Set model, duration & size'
+/**
+ * Widget values are normalized based on their declared type:
+ * - INT/FLOAT → number (or null if not parseable)
+ * - BOOLEAN → boolean (or null if not parseable)
+ * - STRING/COMBO/other → string (lowercased, trimmed)
+ */
+type NormalizedWidgetValue = string | number | boolean | null
 
-  const validationError = validateSora2Selection(model, duration, size)
-  if (validationError) return validationError
+type JsonataPricingRule = {
+  engine: 'jsonata'
+  depends_on: {
+    widgets: WidgetDependency[]
+    inputs: string[]
+    input_groups: string[]
+  }
+  expr: string
+  result_defaults?: CreditFormatOptions
+}
 
-  const perSec = perSecForSora2(model, size)
-  return formatRunPrice(perSec, duration)
+type CompiledJsonataPricingRule = JsonataPricingRule & {
+  _compiled: Expression | null
 }
 
 /**
- * Pricing for Tripo 3D generation nodes (Text / Image / Multiview)
- * based on Tripo credits:
- *
- * Turbo / V3 / V2.5 / V2.0:
- *   Text  -> 10 (no texture) / 20 (standard texture)
- *   Image -> 20 (no texture) / 30 (standard texture)
- *   Multiview -> 20 (no texture) / 30 (standard texture)
- *
- * V1.4:
- *   Text  -> 20
- *   Image -> 30
- *   (Multiview treated same as Image if used)
- *
- * Advanced extras (added on top of generation credits):
- *   quad               -> +5 credits
- *   style              -> +5 credits (if style != "None")
- *   HD texture         -> +10 credits (texture_quality = "detailed")
- *   detailed geometry  -> +20 credits (geometry_quality = "detailed")
- *
- * 1 credit = $0.01
+ * Shape of nodeData attached to LGraphNode constructor for API nodes.
+ * Uses Pick from schema type to ensure consistency.
  */
-const calculateTripo3DGenerationPrice = (
+type NodeConstructorData = Partial<
+  Pick<ComfyNodeDef, 'name' | 'api_node' | 'price_badge'>
+>
+
+/**
+ * Extract nodeData from an LGraphNode's constructor.
+ * Centralizes the `as any` cast needed to access this runtime property.
+ */
+const getNodeConstructorData = (
+  node: LGraphNode
+): NodeConstructorData | undefined =>
+  (node.constructor as { nodeData?: NodeConstructorData }).nodeData
+
+type JsonataEvalContext = {
+  widgets: Record<string, NormalizedWidgetValue>
+  inputs: Record<string, { connected: boolean }>
+  /** Count of connected inputs per autogrow group */
+  inputGroups: Record<string, number>
+}
+
+// -----------------------------
+// Normalization helpers
+// -----------------------------
+const asFiniteNumber = (v: unknown): number | null => {
+  if (v === null || v === undefined) return null
+
+  if (typeof v === 'number') return Number.isFinite(v) ? v : null
+
+  if (typeof v === 'string') {
+    const t = v.trim()
+    if (t === '') return null
+    const n = Number(t)
+    return Number.isFinite(n) ? n : null
+  }
+
+  // Do not coerce booleans/objects into numbers for pricing purposes.
+  return null
+}
+
+/**
+ * Normalize widget value based on its declared type.
+ * Returns the value in its natural type for simpler JSONata expressions.
+ */
+const normalizeWidgetValue = (
+  raw: unknown,
+  declaredType: string
+): NormalizedWidgetValue => {
+  if (raw === undefined || raw === null) {
+    return null
+  }
+
+  const upperType = declaredType.toUpperCase()
+
+  // Numeric types
+  if (upperType === 'INT' || upperType === 'FLOAT') {
+    return asFiniteNumber(raw)
+  }
+
+  // Boolean type
+  if (upperType === 'BOOLEAN') {
+    if (typeof raw === 'boolean') return raw
+    if (typeof raw === 'string') {
+      const ls = raw.trim().toLowerCase()
+      if (ls === 'true') return true
+      if (ls === 'false') return false
+    }
+    return null
+  }
+
+  // COMBO type - preserve string/numeric values (for options like [5, "10"])
+  if (upperType === 'COMBO') {
+    if (typeof raw === 'number') return raw
+    if (typeof raw === 'boolean') return raw
+    return String(raw).trim().toLowerCase()
+  }
+
+  // String/other types - return as lowercase trimmed string
+  return String(raw).trim().toLowerCase()
+}
+
+const buildJsonataContext = (
   node: LGraphNode,
-  task: 'text' | 'image' | 'multiview'
+  rule: JsonataPricingRule
+): JsonataEvalContext => {
+  const widgets: Record<string, NormalizedWidgetValue> = {}
+  for (const dep of rule.depends_on.widgets) {
+    const widget = node.widgets?.find((x: IBaseWidget) => x.name === dep.name)
+    widgets[dep.name] = normalizeWidgetValue(widget?.value, dep.type)
+  }
+
+  const inputs: Record<string, { connected: boolean }> = {}
+  for (const name of rule.depends_on.inputs) {
+    const slot = node.inputs?.find((x: INodeInputSlot) => x.name === name)
+    inputs[name] = { connected: slot?.link != null }
+  }
+
+  // Count connected inputs per autogrow group
+  const inputGroups: Record<string, number> = {}
+  for (const groupName of rule.depends_on.input_groups) {
+    const prefix = groupName + '.'
+    inputGroups[groupName] =
+      node.inputs?.filter(
+        (inp: INodeInputSlot) =>
+          inp.name?.startsWith(prefix) && inp.link != null
+      ).length ?? 0
+  }
+
+  return { widgets, inputs, inputGroups }
+}
+
+const safeValueForSig = (v: unknown): string => {
+  if (v === null || v === undefined) return ''
+  if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean')
+    return String(v)
+  try {
+    return JSON.stringify(v)
+  } catch {
+    return String(v)
+  }
+}
+
+// Signature determines whether we need to re-evaluate when widgets/inputs change.
+const buildSignature = (
+  ctx: JsonataEvalContext,
+  rule: JsonataPricingRule
 ): string => {
-  const getWidget = (name: string): IComboWidget | undefined =>
-    node.widgets?.find((w) => w.name === name) as IComboWidget | undefined
+  const parts: string[] = []
+  for (const dep of rule.depends_on.widgets) {
+    parts.push(`w:${dep.name}=${safeValueForSig(ctx.widgets[dep.name])}`)
+  }
+  for (const name of rule.depends_on.inputs) {
+    parts.push(`i:${name}=${ctx.inputs[name]?.connected ? '1' : '0'}`)
+  }
+  for (const name of rule.depends_on.input_groups) {
+    parts.push(`g:${name}=${ctx.inputGroups[name] ?? 0}`)
+  }
+  return parts.join('|')
+}
 
-  const getString = (name: string, defaultValue: string): string => {
-    const widget = getWidget(name)
-    if (!widget || widget.value === undefined || widget.value === null) {
-      return defaultValue
+// -----------------------------
+// Result formatting
+// -----------------------------
+const formatPricingResult = (
+  result: unknown,
+  defaults: CreditFormatOptions = {}
+): string => {
+  if (!isPricingResult(result)) {
+    if (result !== undefined && result !== null) {
+      console.warn('[pricing/jsonata] invalid result format:', result)
     }
-    return String(widget.value)
+    return ''
   }
 
-  const getBool = (name: string, defaultValue: boolean): boolean => {
-    const widget = getWidget(name)
-    if (!widget || widget.value === undefined || widget.value === null) {
-      return defaultValue
-    }
-
-    const v = widget.value
-    if (typeof v === 'number') return v !== 0
-    const lower = String(v).toLowerCase()
-    if (lower === 'true') return true
-    if (lower === 'false') return false
-
-    return defaultValue
+  if (result.type === 'text') {
+    return result.text ?? ''
   }
 
-  // ---- read widget values with sensible defaults (mirroring backend) ----
-  const modelVersionRaw = getString('model_version', '').toLowerCase()
-  if (modelVersionRaw === '')
-    return formatCreditsRangeLabel(0.1, 0.65, {
-      note: '(varies with quad, style, texture & quality)'
+  if (result.type === 'usd') {
+    const usd = asFiniteNumber(result.usd)
+    if (usd === null) return ''
+    const fmt = { ...defaults, ...(result.format ?? {}) }
+    return formatCreditsLabel(usd, fmt)
+  }
+
+  if (result.type === 'range_usd') {
+    const minUsd = asFiniteNumber(result.min_usd)
+    const maxUsd = asFiniteNumber(result.max_usd)
+    if (minUsd === null || maxUsd === null) return ''
+    const fmt = { ...defaults, ...(result.format ?? {}) }
+    return formatCreditsRangeLabel(minUsd, maxUsd, fmt)
+  }
+
+  if (result.type === 'list_usd') {
+    const arr = Array.isArray(result.usd) ? result.usd : null
+    if (!arr) return ''
+
+    const usdValues = arr
+      .map(asFiniteNumber)
+      .filter((x): x is number => x != null)
+
+    if (usdValues.length === 0) return ''
+
+    const fmt = { ...defaults, ...(result.format ?? {}) }
+    return formatCreditsListLabel(usdValues, fmt)
+  }
+
+  return ''
+}
+
+// -----------------------------
+// Compile rules (non-fatal)
+// -----------------------------
+const compileRule = (rule: JsonataPricingRule): CompiledJsonataPricingRule => {
+  try {
+    return { ...rule, _compiled: jsonata(rule.expr) }
+  } catch (e) {
+    // Do not crash app on bad expressions; just disable rule.
+    console.error('[pricing/jsonata] failed to compile expr:', rule.expr, e)
+    return { ...rule, _compiled: null }
+  }
+}
+
+// -----------------------------
+// Rule cache (per-node-type)
+// -----------------------------
+// Cache compiled rules by node type name to avoid recompiling on every evaluation.
+const compiledRulesCache = new Map<string, CompiledJsonataPricingRule | null>()
+
+/**
+ * Convert a PriceBadge from node definition to a JsonataPricingRule.
+ */
+const priceBadgeToRule = (priceBadge: PriceBadge): JsonataPricingRule => ({
+  engine: priceBadge.engine ?? 'jsonata',
+  depends_on: {
+    widgets: priceBadge.depends_on?.widgets ?? [],
+    inputs: priceBadge.depends_on?.inputs ?? [],
+    input_groups: priceBadge.depends_on?.input_groups ?? []
+  },
+  expr: priceBadge.expr
+})
+
+/**
+ * Get or compile a pricing rule for a node type.
+ */
+const getCompiledRuleForNodeType = (
+  nodeName: string,
+  priceBadge: PriceBadge | undefined
+): CompiledJsonataPricingRule | null => {
+  if (!priceBadge) return null
+
+  // Check cache first
+  if (compiledRulesCache.has(nodeName)) {
+    return compiledRulesCache.get(nodeName) ?? null
+  }
+
+  // Compile and cache
+  const rule = priceBadgeToRule(priceBadge)
+  const compiled = compileRule(rule)
+  compiledRulesCache.set(nodeName, compiled)
+  return compiled
+}
+
+// -----------------------------
+// Async evaluation + cache (JSONata 2.x)
+// -----------------------------
+
+// Reactive tick to force UI updates when async evaluations resolve.
+// We purposely read pricingTick.value inside getNodeDisplayPrice to create a dependency.
+const pricingTick = ref(0)
+
+// Per-node revision tracking for VueNodes mode (more efficient than global tick)
+// Uses plain Map with individual refs per node for fine-grained reactivity
+// Keys are stringified node IDs to handle both string and number ID types
+const nodeRevisions = new Map<string, Ref<number>>()
+
+/**
+ * Get or create a revision ref for a specific node.
+ * Each node has its own independent ref, so updates to one won't trigger others.
+ */
+const getNodeRevisionRef = (nodeId: string | number): Ref<number> => {
+  const key = String(nodeId)
+  let rev = nodeRevisions.get(key)
+  if (!rev) {
+    rev = ref(0)
+    nodeRevisions.set(key, rev)
+  }
+  return rev
+}
+
+// WeakMaps avoid memory leaks when nodes are removed.
+type CacheEntry = { sig: string; label: string }
+type InflightEntry = { sig: string; promise: Promise<void> }
+
+const cache = new WeakMap<LGraphNode, CacheEntry>()
+const desiredSig = new WeakMap<LGraphNode, string>()
+const inflight = new WeakMap<LGraphNode, InflightEntry>()
+
+const DEBUG_JSONATA_PRICING = false
+
+const scheduleEvaluation = (
+  node: LGraphNode,
+  rule: CompiledJsonataPricingRule,
+  ctx: JsonataEvalContext,
+  sig: string
+) => {
+  desiredSig.set(node, sig)
+
+  const running = inflight.get(node)
+  if (running && running.sig === sig) return
+
+  if (!rule._compiled) return
+
+  const nodeName = getNodeConstructorData(node)?.name ?? ''
+
+  const promise = Promise.resolve(rule._compiled.evaluate(ctx))
+    .then((res) => {
+      const label = formatPricingResult(res, rule.result_defaults ?? {})
+
+      // Ignore stale results: if the node changed while we were evaluating,
+      // desiredSig will no longer match.
+      if (desiredSig.get(node) !== sig) return
+
+      cache.set(node, { sig, label })
+
+      if (DEBUG_JSONATA_PRICING) {
+        console.warn('[pricing/jsonata] resolved', nodeName, {
+          sig,
+          res,
+          label
+        })
+      }
     })
-  const styleRaw = getString('style', 'None')
-  const hasStyle = styleRaw.toLowerCase() !== 'none'
+    .catch((err) => {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('[pricing/jsonata] evaluation failed', nodeName, err)
+      }
 
-  // Backend defaults: texture=true, pbr=true, quad=false, qualities="standard"
-  const hasTexture = getBool('texture', false)
-  const hasPbr = getBool('pbr', false)
-  const quad = getBool('quad', false)
+      // Cache empty to avoid retry-spam for same signature
+      if (desiredSig.get(node) === sig) {
+        cache.set(node, { sig, label: '' })
+      }
+    })
+    .finally(() => {
+      const cur = inflight.get(node)
+      if (cur && cur.sig === sig) inflight.delete(node)
 
-  const textureQualityRaw = getString(
-    'texture_quality',
-    'standard'
-  ).toLowerCase()
-  const geometryQualityRaw = getString(
-    'geometry_quality',
-    'standard'
-  ).toLowerCase()
-
-  const isHdTexture = textureQualityRaw === 'detailed'
-  const isDetailedGeometry = geometryQualityRaw === 'detailed'
-
-  const withTexture = hasTexture || hasPbr
-
-  let baseCredits: number
-
-  if (modelVersionRaw.includes('v1.4')) {
-    // V1.4 model: Text=20, Image=30, Refine=30
-    if (task === 'text') {
-      baseCredits = 20
-    } else {
-      // treat Multiview same as Image if V1.4 is ever used there
-      baseCredits = 30
-    }
-  } else {
-    // V3.0, V2.5, V2.0 models
-    if (!withTexture) {
-      if (task === 'text') {
-        baseCredits = 10 // Text to 3D without texture
+      if (LiteGraph.vueNodesMode) {
+        // VueNodes mode: bump per-node revision (only this node re-renders)
+        getNodeRevisionRef(node.id).value++
       } else {
-        baseCredits = 20 // Image/Multiview to 3D without texture
+        // Nodes 1.0 mode: bump global tick to trigger setDirtyCanvas
+        pricingTick.value++
       }
-    } else {
-      if (task === 'text') {
-        baseCredits = 20 // Text to 3D with standard texture
-      } else {
-        baseCredits = 30 // Image/Multiview to 3D with standard texture
-      }
-    }
-  }
+    })
 
-  // ---- advanced extras on top of base generation ----
-  let credits = baseCredits
-
-  if (hasStyle) credits += 5 // Style
-  if (quad) credits += 5 // Quad Topology
-  if (isHdTexture) credits += 10 // HD Texture
-  if (isDetailedGeometry) credits += 20 // Detailed Geometry Quality
-
-  const dollars = credits * 0.01
-  return formatCreditsLabel(dollars)
+  inflight.set(node, { sig, promise })
 }
 
 /**
- * Meshy Image to 3D pricing calculator.
- * Pricing based on should_texture widget:
- *   - Without texture: 20 credits
- *   - With texture: 30 credits
+ * Get the pricing rule for a node from its nodeData.price_badge field.
  */
-const calculateMeshyImageToModelPrice = (node: LGraphNode): string => {
-  const shouldTextureWidget = node.widgets?.find(
-    (w) => w.name === 'should_texture'
-  ) as IComboWidget
+const getRuleForNode = (
+  node: LGraphNode
+): CompiledJsonataPricingRule | undefined => {
+  const nodeData = getNodeConstructorData(node)
+  if (!nodeData?.api_node) return undefined
 
-  if (!shouldTextureWidget) {
-    return formatCreditsRangeLabel(
-      meshyCreditsToUsd(20),
-      meshyCreditsToUsd(30),
-      { note: '(varies with texture)' }
-    )
-  }
+  const nodeName = nodeData?.name ?? ''
+  const priceBadge = nodeData?.price_badge
 
-  const shouldTexture = String(shouldTextureWidget.value).toLowerCase()
-  const credits = shouldTexture === 'true' ? 30 : 20
-  return formatCreditsLabel(meshyCreditsToUsd(credits))
+  if (!priceBadge) return undefined
+
+  const compiled = getCompiledRuleForNodeType(nodeName, priceBadge)
+  return compiled ?? undefined
 }
 
-/**
- * Meshy Multi-Image to 3D pricing calculator.
- * Pricing based on should_texture widget:
- *   - Without texture: 5 credits
- *   - With texture: 15 credits
- */
-const calculateMeshyMultiImageToModelPrice = (node: LGraphNode): string => {
-  const shouldTextureWidget = node.widgets?.find(
-    (w) => w.name === 'should_texture'
-  ) as IComboWidget
-
-  if (!shouldTextureWidget) {
-    return formatCreditsRangeLabel(
-      meshyCreditsToUsd(5),
-      meshyCreditsToUsd(15),
-      { note: '(varies with texture)' }
-    )
-  }
-
-  const shouldTexture = String(shouldTextureWidget.value).toLowerCase()
-  const credits = shouldTexture === 'true' ? 15 : 5
-  return formatCreditsLabel(meshyCreditsToUsd(credits))
-}
-
-/**
- * Static pricing data for API nodes, now supporting both strings and functions
- */
-const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
-  {
-    FluxProCannyNode: {
-      displayPrice: formatCreditsLabel(0.05)
-    },
-    FluxProDepthNode: {
-      displayPrice: formatCreditsLabel(0.05)
-    },
-    FluxProExpandNode: {
-      displayPrice: formatCreditsLabel(0.05)
-    },
-    FluxProFillNode: {
-      displayPrice: formatCreditsLabel(0.05)
-    },
-    FluxProUltraImageNode: {
-      displayPrice: formatCreditsLabel(0.06)
-    },
-    FluxProKontextProNode: {
-      displayPrice: formatCreditsLabel(0.04)
-    },
-    FluxProKontextMaxNode: {
-      displayPrice: formatCreditsLabel(0.08)
-    },
-    Flux2ProImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const widthW = node.widgets?.find(
-          (w) => w.name === 'width'
-        ) as IComboWidget
-        const heightW = node.widgets?.find(
-          (w) => w.name === 'height'
-        ) as IComboWidget
-
-        const w = Number(widthW?.value)
-        const h = Number(heightW?.value)
-        if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
-          // global min/max for this node given schema bounds (1MP..4MP output)
-          return formatCreditsRangeLabel(0.03, 0.15)
-        }
-
-        // Is the 'images' input connected?
-        const imagesInput = node.inputs?.find(
-          (i) => i.name === 'images'
-        ) as INodeInputSlot
-        const hasRefs =
-          typeof imagesInput?.link !== 'undefined' && imagesInput.link != null
-
-        // Output cost: ceil((w*h)/MP); first MP $0.03, each additional $0.015
-        const MP = 1024 * 1024
-        const outMP = Math.max(1, Math.floor((w * h + MP - 1) / MP))
-        const outputCost = 0.03 + 0.015 * Math.max(outMP - 1, 0)
-
-        if (hasRefs) {
-          // Unknown ref count/size on the frontend:
-          // min extra is $0.015, max extra is $0.120 (8 MP cap / 8 refs)
-          const minTotal = outputCost + 0.015
-          const maxTotal = outputCost + 0.12
-          return formatCreditsRangeLabel(minTotal, maxTotal, {
-            approximate: true
-          })
-        }
-
-        // Precise text-to-image price
-        return formatCreditsLabel(outputCost)
-      }
-    },
-    Flux2MaxImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const widthW = node.widgets?.find(
-          (w) => w.name === 'width'
-        ) as IComboWidget
-        const heightW = node.widgets?.find(
-          (w) => w.name === 'height'
-        ) as IComboWidget
-
-        const w = Number(widthW?.value)
-        const h = Number(heightW?.value)
-        if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
-          // global min/max for this node given schema bounds (1MP..4MP output)
-          return formatCreditsRangeLabel(0.07, 0.35)
-        }
-
-        // Is the 'images' input connected?
-        const imagesInput = node.inputs?.find(
-          (i) => i.name === 'images'
-        ) as INodeInputSlot
-        const hasRefs =
-          typeof imagesInput?.link !== 'undefined' && imagesInput.link != null
-
-        // Output cost: ceil((w*h)/MP); first MP $0.07, each additional $0.03
-        const MP = 1024 * 1024
-        const outMP = Math.max(1, Math.floor((w * h + MP - 1) / MP))
-        const outputCost = 0.07 + 0.03 * Math.max(outMP - 1, 0)
-
-        if (hasRefs) {
-          // Unknown ref count/size on the frontend:
-          // min extra is $0.03, max extra is $0.24 (8 MP cap / 8 refs)
-          const minTotal = outputCost + 0.03
-          const maxTotal = outputCost + 0.24
-          return formatCreditsRangeLabel(minTotal, maxTotal)
-        }
-
-        return formatCreditsLabel(outputCost)
-      }
-    },
-    OpenAIVideoSora2: {
-      displayPrice: sora2PricingCalculator
-    },
-    IdeogramV1: {
-      displayPrice: (node: LGraphNode): string => {
-        const numImagesWidget = node.widgets?.find(
-          (w) => w.name === 'num_images'
-        ) as IComboWidget
-        const turboWidget = node.widgets?.find(
-          (w) => w.name === 'turbo'
-        ) as IComboWidget
-
-        if (!numImagesWidget)
-          return formatCreditsRangeLabel(0.03, 0.09, {
-            suffix: ' x num_images/Run'
-          })
-
-        const numImages = Number(numImagesWidget.value) || 1
-        const turbo = String(turboWidget?.value).toLowerCase() === 'true'
-        const basePrice = turbo ? 0.0286 : 0.0858
-        const cost = Number((basePrice * numImages).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    IdeogramV2: {
-      displayPrice: (node: LGraphNode): string => {
-        const numImagesWidget = node.widgets?.find(
-          (w) => w.name === 'num_images'
-        ) as IComboWidget
-        const turboWidget = node.widgets?.find(
-          (w) => w.name === 'turbo'
-        ) as IComboWidget
-
-        if (!numImagesWidget)
-          return formatCreditsRangeLabel(0.07, 0.11, {
-            suffix: ' x num_images/Run'
-          })
-
-        const numImages = Number(numImagesWidget.value) || 1
-        const turbo = String(turboWidget?.value).toLowerCase() === 'true'
-        const basePrice = turbo ? 0.0715 : 0.1144
-        const cost = Number((basePrice * numImages).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    IdeogramV3: {
-      displayPrice: (node: LGraphNode): string => {
-        const renderingSpeedWidget = node.widgets?.find(
-          (w) => w.name === 'rendering_speed'
-        ) as IComboWidget
-        const numImagesWidget = node.widgets?.find(
-          (w) => w.name === 'num_images'
-        ) as IComboWidget
-        const characterInput = node.inputs?.find(
-          (i) => i.name === 'character_image'
-        ) as INodeInputSlot
-        const hasCharacter =
-          typeof characterInput?.link !== 'undefined' &&
-          characterInput.link != null
-
-        if (!renderingSpeedWidget)
-          return formatCreditsRangeLabel(0.04, 0.11, {
-            suffix: ' x num_images/Run',
-            note: '(varies with rendering speed & num_images)'
-          })
-
-        const numImages = Number(numImagesWidget?.value) || 1
-        let basePrice = 0.0858 // default balanced price
-
-        const renderingSpeed = String(renderingSpeedWidget.value)
-        if (renderingSpeed.toLowerCase().includes('quality')) {
-          if (hasCharacter) {
-            basePrice = 0.286
-          } else {
-            basePrice = 0.1287
-          }
-        } else if (renderingSpeed.toLowerCase().includes('default')) {
-          if (hasCharacter) {
-            basePrice = 0.2145
-          } else {
-            basePrice = 0.0858
-          }
-        } else if (renderingSpeed.toLowerCase().includes('turbo')) {
-          if (hasCharacter) {
-            basePrice = 0.143
-          } else {
-            basePrice = 0.0429
-          }
-        }
-
-        const totalCost = Number((basePrice * numImages).toFixed(2))
-        return formatCreditsLabel(totalCost)
-      }
-    },
-    KlingCameraControlI2VNode: {
-      displayPrice: formatCreditsLabel(0.49)
-    },
-    KlingCameraControlT2VNode: {
-      displayPrice: formatCreditsLabel(0.14)
-    },
-    KlingDualCharacterVideoEffectNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modeWidget = node.widgets?.find(
-          (w) => w.name === 'mode'
-        ) as IComboWidget
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model_name'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        if (!modeWidget || !modelWidget || !durationWidget)
-          return formatCreditsRangeLabel(0.14, 2.8, {
-            note: '(varies with model, mode & duration)'
-          })
-
-        const modeValue = String(modeWidget.value)
-        const durationValue = String(durationWidget.value)
-        const modelValue = String(modelWidget.value)
-
-        // Same pricing matrix as KlingTextToVideoNode
-        if (modelValue.includes('v1-6') || modelValue.includes('v1-5')) {
-          if (modeValue.includes('pro')) {
-            return durationValue.includes('10')
-              ? formatCreditsLabel(0.98)
-              : formatCreditsLabel(0.49)
-          } else {
-            return durationValue.includes('10')
-              ? formatCreditsLabel(0.56)
-              : formatCreditsLabel(0.28)
-          }
-        } else if (modelValue.includes('v1')) {
-          if (modeValue.includes('pro')) {
-            return durationValue.includes('10')
-              ? formatCreditsLabel(0.98)
-              : formatCreditsLabel(0.49)
-          } else {
-            return durationValue.includes('10')
-              ? formatCreditsLabel(0.28)
-              : formatCreditsLabel(0.14)
-          }
-        }
-
-        return formatCreditsLabel(0.14)
-      }
-    },
-    KlingImage2VideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modeWidget = node.widgets?.find(
-          (w) => w.name === 'mode'
-        ) as IComboWidget
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model_name'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!modeWidget) {
-          if (!modelWidget)
-            return formatCreditsRangeLabel(0.14, 2.8, {
-              note: '(varies with model, mode & duration)'
-            })
-
-          const modelValue = String(modelWidget.value)
-          if (
-            modelValue.includes('v2-1-master') ||
-            modelValue.includes('v2-master')
-          ) {
-            return formatCreditsLabel(1.4)
-          } else if (
-            modelValue.includes('v1-6') ||
-            modelValue.includes('v1-5')
-          ) {
-            return formatCreditsLabel(0.28)
-          }
-          return formatCreditsLabel(0.14)
-        }
-
-        const modeValue = String(modeWidget.value)
-        const durationValue = String(durationWidget.value)
-        const modelValue = String(modelWidget.value)
-
-        // Same pricing matrix as KlingTextToVideoNode
-        if (modelValue.includes('v2-5-turbo')) {
-          if (durationValue.includes('10')) {
-            return formatCreditsLabel(0.7)
-          }
-          return formatCreditsLabel(0.35) // 5s default
-        } else if (
-          modelValue.includes('v2-1-master') ||
-          modelValue.includes('v2-master')
-        ) {
-          if (durationValue.includes('10')) {
-            return formatCreditsLabel(2.8)
-          }
-          return formatCreditsLabel(1.4) // 5s default
-        } else if (
-          modelValue.includes('v2-1') ||
-          modelValue.includes('v1-6') ||
-          modelValue.includes('v1-5')
-        ) {
-          if (modeValue.includes('pro')) {
-            return durationValue.includes('10')
-              ? formatCreditsLabel(0.98)
-              : formatCreditsLabel(0.49)
-          } else {
-            return durationValue.includes('10')
-              ? formatCreditsLabel(0.56)
-              : formatCreditsLabel(0.28)
-          }
-        } else if (modelValue.includes('v1')) {
-          if (modeValue.includes('pro')) {
-            return durationValue.includes('10')
-              ? formatCreditsLabel(0.98)
-              : formatCreditsLabel(0.49)
-          } else {
-            return durationValue.includes('10')
-              ? formatCreditsLabel(0.28)
-              : formatCreditsLabel(0.14)
-          }
-        }
-
-        return formatCreditsLabel(0.14)
-      }
-    },
-    KlingImageGenerationNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const imageInputWidget = node.inputs?.find((i) => i.name === 'image')
-        // If link is not null => image is connected => modality is image to image
-        const modality = imageInputWidget?.link
-          ? 'image to image'
-          : 'text to image'
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model_name'
-        ) as IComboWidget
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-
-        if (!modelWidget)
-          return formatCreditsRangeLabel(0.0035, 0.028, {
-            suffix: ' x n/Run',
-            note: '(varies with modality & model)'
-          })
-
-        const model = String(modelWidget.value)
-        const n = Number(nWidget?.value) || 1
-        let basePrice = 0.014 // default
-
-        if (modality.includes('text to image')) {
-          if (model.includes('kling-v1-5') || model.includes('kling-v2')) {
-            basePrice = 0.014
-          } else if (model.includes('kling-v1')) {
-            basePrice = 0.0035
-          }
-        } else if (modality.includes('image to image')) {
-          if (model.includes('kling-v1-5')) {
-            basePrice = 0.028
-          } else if (model.includes('kling-v1')) {
-            basePrice = 0.0035
-          }
-        }
-
-        const totalCost = basePrice * n
-        return formatCreditsLabel(totalCost)
-      }
-    },
-    KlingLipSyncAudioToVideoNode: {
-      displayPrice: formatCreditsLabel(0.1, { approximate: true })
-    },
-    KlingLipSyncTextToVideoNode: {
-      displayPrice: formatCreditsLabel(0.1, { approximate: true })
-    },
-    KlingSingleImageVideoEffectNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const effectSceneWidget = node.widgets?.find(
-          (w) => w.name === 'effect_scene'
-        ) as IComboWidget
-
-        if (!effectSceneWidget)
-          return formatCreditsRangeLabel(0.28, 0.49, {
-            note: '(varies with effect scene)'
-          })
-
-        const effectScene = String(effectSceneWidget.value)
-        if (
-          effectScene.includes('fuzzyfuzzy') ||
-          effectScene.includes('squish')
-        ) {
-          return formatCreditsLabel(0.28)
-        } else if (effectScene.includes('dizzydizzy')) {
-          return formatCreditsLabel(0.49)
-        } else if (effectScene.includes('bloombloom')) {
-          return formatCreditsLabel(0.49)
-        } else if (effectScene.includes('expansion')) {
-          return formatCreditsLabel(0.28)
-        }
-
-        return formatCreditsLabel(0.28)
-      }
-    },
-    KlingStartEndFrameNode: {
-      displayPrice: (node: LGraphNode): string => {
-        // Same pricing as KlingTextToVideoNode per CSV ("Same as text to video")
-        const modeWidget = node.widgets?.find(
-          (w) => w.name === 'mode'
-        ) as IComboWidget
-        if (!modeWidget)
-          return formatCreditsRangeLabel(0.14, 2.8, {
-            note: '(varies with model, mode & duration)'
-          })
-
-        const modeValue = String(modeWidget.value)
-
-        // Same pricing matrix as KlingTextToVideoNode
-        if (modeValue.includes('v2-5-turbo')) {
-          if (modeValue.includes('10')) {
-            return formatCreditsLabel(0.7)
-          }
-          return formatCreditsLabel(0.35) // 5s default
-        } else if (modeValue.includes('v2-1')) {
-          if (modeValue.includes('10s')) {
-            return formatCreditsLabel(0.98) // pro, 10s
-          }
-          return formatCreditsLabel(0.49) // pro, 5s default
-        } else if (modeValue.includes('v2-master')) {
-          if (modeValue.includes('10s')) {
-            return formatCreditsLabel(2.8)
-          }
-          return formatCreditsLabel(1.4) // 5s default
-        } else if (modeValue.includes('v1-6')) {
-          if (modeValue.includes('pro')) {
-            return modeValue.includes('10s')
-              ? formatCreditsLabel(0.98)
-              : formatCreditsLabel(0.49)
-          } else {
-            return modeValue.includes('10s')
-              ? formatCreditsLabel(0.56)
-              : formatCreditsLabel(0.28)
-          }
-        } else if (modeValue.includes('v1')) {
-          if (modeValue.includes('pro')) {
-            return modeValue.includes('10s')
-              ? formatCreditsLabel(0.98)
-              : formatCreditsLabel(0.49)
-          } else {
-            return modeValue.includes('10s')
-              ? formatCreditsLabel(0.28)
-              : formatCreditsLabel(0.14)
-          }
-        }
-
-        return formatCreditsLabel(0.14)
-      }
-    },
-    KlingTextToVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modeWidget = node.widgets?.find(
-          (w) => w.name === 'mode'
-        ) as IComboWidget
-        if (!modeWidget)
-          return formatCreditsRangeLabel(0.14, 2.8, {
-            note: '(varies with model, mode & duration)'
-          })
-
-        const modeValue = String(modeWidget.value)
-
-        // Pricing matrix from CSV data based on mode string content
-        if (modeValue.includes('v2-5-turbo')) {
-          if (modeValue.includes('10')) {
-            return formatCreditsLabel(0.7)
-          }
-          return formatCreditsLabel(0.35) // 5s default
-        } else if (modeValue.includes('v2-1-master')) {
-          if (modeValue.includes('10s')) {
-            return formatCreditsLabel(2.8) // price is the same as for v2-master model
-          }
-          return formatCreditsLabel(1.4) // price is the same as for v2-master model
-        } else if (modeValue.includes('v2-master')) {
-          if (modeValue.includes('10s')) {
-            return formatCreditsLabel(2.8)
-          }
-          return formatCreditsLabel(1.4) // 5s default
-        } else if (modeValue.includes('v1-6')) {
-          if (modeValue.includes('pro')) {
-            return modeValue.includes('10s')
-              ? formatCreditsLabel(0.98)
-              : formatCreditsLabel(0.49)
-          } else {
-            return modeValue.includes('10s')
-              ? formatCreditsLabel(0.56)
-              : formatCreditsLabel(0.28)
-          }
-        } else if (modeValue.includes('v1')) {
-          if (modeValue.includes('pro')) {
-            return modeValue.includes('10s')
-              ? formatCreditsLabel(0.98)
-              : formatCreditsLabel(0.49)
-          } else {
-            return modeValue.includes('10s')
-              ? formatCreditsLabel(0.28)
-              : formatCreditsLabel(0.14)
-          }
-        }
-
-        return formatCreditsLabel(0.14)
-      }
-    },
-    KlingVideoExtendNode: {
-      displayPrice: formatCreditsLabel(0.28)
-    },
-    KlingVirtualTryOnNode: {
-      displayPrice: formatCreditsLabel(0.07)
-    },
-    KlingOmniProTextToVideoNode: {
-      displayPrice: makeOmniProDurationCalculator(0.112)
-    },
-    KlingOmniProFirstLastFrameNode: {
-      displayPrice: makeOmniProDurationCalculator(0.112)
-    },
-    KlingOmniProImageToVideoNode: {
-      displayPrice: makeOmniProDurationCalculator(0.112)
-    },
-    KlingOmniProVideoToVideoNode: {
-      displayPrice: makeOmniProDurationCalculator(0.168)
-    },
-    KlingMotionControl: {
-      displayPrice: klingMotionControlPricingCalculator
-    },
-    KlingOmniProEditVideoNode: {
-      displayPrice: formatCreditsLabel(0.168, { suffix: '/second' })
-    },
-    KlingOmniProImageNode: {
-      displayPrice: formatCreditsLabel(0.028)
-    },
-    KlingTextToVideoWithAudio: {
-      displayPrice: klingVideoWithAudioPricingCalculator
-    },
-    KlingImageToVideoWithAudio: {
-      displayPrice: klingVideoWithAudioPricingCalculator
-    },
-    LumaImageToVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        // Same pricing as LumaVideoNode per CSV
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!modelWidget || !resolutionWidget || !durationWidget) {
-          return formatCreditsRangeLabel(0.2, 16.4, {
-            note: '(varies with model, resolution & duration)'
-          })
-        }
-
-        const model = String(modelWidget.value)
-        const resolution = String(resolutionWidget.value).toLowerCase()
-        const duration = String(durationWidget.value)
-
-        if (model.includes('ray-flash-2')) {
-          if (duration.includes('5s')) {
-            if (resolution.includes('4k')) return formatCreditsLabel(3.13)
-            if (resolution.includes('1080p')) return formatCreditsLabel(0.79)
-            if (resolution.includes('720p')) return formatCreditsLabel(0.34)
-            if (resolution.includes('540p')) return formatCreditsLabel(0.2)
-          } else if (duration.includes('9s')) {
-            if (resolution.includes('4k')) return formatCreditsLabel(5.65)
-            if (resolution.includes('1080p')) return formatCreditsLabel(1.42)
-            if (resolution.includes('720p')) return formatCreditsLabel(0.61)
-            if (resolution.includes('540p')) return formatCreditsLabel(0.36)
-          }
-        } else if (model.includes('ray-2')) {
-          if (duration.includes('5s')) {
-            if (resolution.includes('4k')) return formatCreditsLabel(9.11)
-            if (resolution.includes('1080p')) return formatCreditsLabel(2.27)
-            if (resolution.includes('720p')) return formatCreditsLabel(1.02)
-            if (resolution.includes('540p')) return formatCreditsLabel(0.57)
-          } else if (duration.includes('9s')) {
-            if (resolution.includes('4k')) return formatCreditsLabel(16.4)
-            if (resolution.includes('1080p')) return formatCreditsLabel(4.1)
-            if (resolution.includes('720p')) return formatCreditsLabel(1.83)
-            if (resolution.includes('540p')) return formatCreditsLabel(1.03)
-          }
-        } else if (model.includes('ray-1-6')) {
-          return formatCreditsLabel(0.5)
-        }
-
-        return formatCreditsLabel(0.79)
-      }
-    },
-    LumaVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!modelWidget || !resolutionWidget || !durationWidget) {
-          return formatCreditsRangeLabel(0.2, 16.4, {
-            note: '(varies with model, resolution & duration)'
-          })
-        }
-
-        const model = String(modelWidget.value)
-        const resolution = String(resolutionWidget.value).toLowerCase()
-        const duration = String(durationWidget.value)
-
-        if (model.includes('ray-flash-2')) {
-          if (duration.includes('5s')) {
-            if (resolution.includes('4k')) return formatCreditsLabel(3.13)
-            if (resolution.includes('1080p')) return formatCreditsLabel(0.79)
-            if (resolution.includes('720p')) return formatCreditsLabel(0.34)
-            if (resolution.includes('540p')) return formatCreditsLabel(0.2)
-          } else if (duration.includes('9s')) {
-            if (resolution.includes('4k')) return formatCreditsLabel(5.65)
-            if (resolution.includes('1080p')) return formatCreditsLabel(1.42)
-            if (resolution.includes('720p')) return formatCreditsLabel(0.61)
-            if (resolution.includes('540p')) return formatCreditsLabel(0.36)
-          }
-        } else if (model.includes('ray-2')) {
-          if (duration.includes('5s')) {
-            if (resolution.includes('4k')) return formatCreditsLabel(9.11)
-            if (resolution.includes('1080p')) return formatCreditsLabel(2.27)
-            if (resolution.includes('720p')) return formatCreditsLabel(1.02)
-            if (resolution.includes('540p')) return formatCreditsLabel(0.57)
-          } else if (duration.includes('9s')) {
-            if (resolution.includes('4k')) return formatCreditsLabel(16.4)
-            if (resolution.includes('1080p')) return formatCreditsLabel(4.1)
-            if (resolution.includes('720p')) return formatCreditsLabel(1.83)
-            if (resolution.includes('540p')) return formatCreditsLabel(1.03)
-          }
-        } else if (model.includes('ray-1-6')) {
-          return formatCreditsLabel(0.5)
-        }
-
-        return formatCreditsLabel(0.79)
-      }
-    },
-    MinimaxImageToVideoNode: {
-      displayPrice: formatCreditsLabel(0.43)
-    },
-    MinimaxTextToVideoNode: {
-      displayPrice: formatCreditsLabel(0.43)
-    },
-    MinimaxHailuoVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!resolutionWidget || !durationWidget) {
-          return formatCreditsRangeLabel(0.28, 0.56, {
-            note: '(varies with resolution & duration)'
-          })
-        }
-
-        const resolution = String(resolutionWidget.value)
-        const duration = String(durationWidget.value)
-
-        if (resolution.includes('768P')) {
-          if (duration.includes('6')) return formatCreditsLabel(0.28)
-          if (duration.includes('10')) return formatCreditsLabel(0.56)
-        } else if (resolution.includes('1080P')) {
-          if (duration.includes('6')) return formatCreditsLabel(0.49)
-        }
-
-        return formatCreditsLabel(0.43) // default median
-      }
-    },
-    OpenAIDalle2: {
-      displayPrice: (node: LGraphNode): string => {
-        const sizeWidget = node.widgets?.find(
-          (w) => w.name === 'size'
-        ) as IComboWidget
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-
-        if (!sizeWidget)
-          return formatCreditsRangeLabel(0.016, 0.02, {
-            suffix: ' x n/Run',
-            note: '(varies with size & n)'
-          })
-
-        const size = String(sizeWidget.value)
-        const n = Number(nWidget?.value) || 1
-        let basePrice = 0.02 // default
-
-        if (size.includes('1024x1024')) {
-          basePrice = 0.02
-        } else if (size.includes('512x512')) {
-          basePrice = 0.018
-        } else if (size.includes('256x256')) {
-          basePrice = 0.016
-        }
-
-        const totalCost = Number((basePrice * n).toFixed(3))
-        return formatCreditsLabel(totalCost)
-      }
-    },
-    OpenAIDalle3: {
-      displayPrice: (node: LGraphNode): string => {
-        // Get size and quality widgets
-        const sizeWidget = node.widgets?.find(
-          (w) => w.name === 'size'
-        ) as IComboWidget
-        const qualityWidget = node.widgets?.find(
-          (w) => w.name === 'quality'
-        ) as IComboWidget
-
-        if (!sizeWidget || !qualityWidget)
-          return formatCreditsRangeLabel(0.04, 0.12, {
-            note: '(varies with size & quality)'
-          })
-
-        const size = String(sizeWidget.value)
-        const quality = String(qualityWidget.value)
-
-        // Pricing matrix based on CSV data
-        if (size.includes('1024x1024')) {
-          return quality.includes('hd')
-            ? formatCreditsLabel(0.08)
-            : formatCreditsLabel(0.04)
-        } else if (size.includes('1792x1024') || size.includes('1024x1792')) {
-          return quality.includes('hd')
-            ? formatCreditsLabel(0.12)
-            : formatCreditsLabel(0.08)
-        }
-
-        // Default value
-        return formatCreditsLabel(0.04)
-      }
-    },
-    OpenAIGPTImage1: {
-      displayPrice: (node: LGraphNode): string => {
-        const qualityWidget = node.widgets?.find(
-          (w) => w.name === 'quality'
-        ) as IComboWidget
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-
-        if (!qualityWidget)
-          return formatCreditsRangeLabel(0.011, 0.3, {
-            suffix: ' x n/Run',
-            note: '(varies with quality & n)'
-          })
-
-        const quality = String(qualityWidget.value)
-        const n = Number(nWidget?.value) || 1
-        let range: [number, number] = [0.046, 0.07] // default medium
-
-        if (quality.includes('high')) {
-          range = [0.167, 0.3]
-        } else if (quality.includes('medium')) {
-          range = [0.046, 0.07]
-        } else if (quality.includes('low')) {
-          range = [0.011, 0.02]
-        }
-
-        if (n === 1) {
-          return formatCreditsRangeLabel(range[0], range[1])
-        }
-        return formatCreditsRangeLabel(range[0], range[1], {
-          suffix: ` x ${n}/Run`
-        })
-      }
-    },
-    PixverseImageToVideoNode: {
-      displayPrice: pixversePricingCalculator
-    },
-    PixverseTextToVideoNode: {
-      displayPrice: pixversePricingCalculator
-    },
-    PixverseTransitionVideoNode: {
-      displayPrice: pixversePricingCalculator
-    },
-    RecraftCreativeUpscaleNode: {
-      displayPrice: formatCreditsLabel(0.25)
-    },
-    RecraftCrispUpscaleNode: {
-      displayPrice: formatCreditsLabel(0.004)
-    },
-    RecraftGenerateColorFromImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-        if (!nWidget) return formatCreditsLabel(0.04, { suffix: ' x n/Run' })
-
-        const n = Number(nWidget.value) || 1
-        const cost = Number((0.04 * n).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    RecraftGenerateImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-        if (!nWidget) return formatCreditsLabel(0.04, { suffix: ' x n/Run' })
-
-        const n = Number(nWidget.value) || 1
-        const cost = Number((0.04 * n).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    RecraftGenerateVectorImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-        if (!nWidget) return formatCreditsLabel(0.08, { suffix: ' x n/Run' })
-
-        const n = Number(nWidget.value) || 1
-        const cost = Number((0.08 * n).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    RecraftImageInpaintingNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-        if (!nWidget) return formatCreditsLabel(0.04, { suffix: ' x n/Run' })
-
-        const n = Number(nWidget.value) || 1
-        const cost = Number((0.04 * n).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    RecraftImageToImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-        if (!nWidget) return formatCreditsLabel(0.04, { suffix: ' x n/Run' })
-
-        const n = Number(nWidget.value) || 1
-        const cost = Number((0.04 * n).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    RecraftRemoveBackgroundNode: {
-      displayPrice: formatCreditsLabel(0.01)
-    },
-    RecraftReplaceBackgroundNode: {
-      displayPrice: formatCreditsLabel(0.04)
-    },
-    RecraftTextToImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-        if (!nWidget) return formatCreditsLabel(0.04, { suffix: ' x n/Run' })
-
-        const n = Number(nWidget.value) || 1
-        const cost = Number((0.04 * n).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    RecraftTextToVectorNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-        if (!nWidget) return formatCreditsLabel(0.08, { suffix: ' x n/Run' })
-
-        const n = Number(nWidget.value) || 1
-        const cost = Number((0.08 * n).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    RecraftVectorizeImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const nWidget = node.widgets?.find(
-          (w) => w.name === 'n'
-        ) as IComboWidget
-        if (!nWidget) return formatCreditsLabel(0.01, { suffix: ' x n/Run' })
-
-        const n = Number(nWidget.value) || 1
-        const cost = Number((0.01 * n).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    StabilityStableImageSD_3_5Node: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-
-        if (!modelWidget)
-          return formatCreditsRangeLabel(0.035, 0.065, {
-            note: '(varies with model)'
-          })
-
-        const model = String(modelWidget.value).toLowerCase()
-        if (model.includes('large')) {
-          return formatCreditsLabel(0.065)
-        } else if (model.includes('medium')) {
-          return formatCreditsLabel(0.035)
-        }
-
-        return formatCreditsLabel(0.035)
-      }
-    },
-    StabilityStableImageUltraNode: {
-      displayPrice: formatCreditsLabel(0.08)
-    },
-    StabilityUpscaleConservativeNode: {
-      displayPrice: formatCreditsLabel(0.25)
-    },
-    StabilityUpscaleCreativeNode: {
-      displayPrice: formatCreditsLabel(0.25)
-    },
-    StabilityUpscaleFastNode: {
-      displayPrice: formatCreditsLabel(0.01)
-    },
-    StabilityTextToAudio: {
-      displayPrice: formatCreditsLabel(0.2)
-    },
-    StabilityAudioToAudio: {
-      displayPrice: formatCreditsLabel(0.2)
-    },
-    StabilityAudioInpaint: {
-      displayPrice: formatCreditsLabel(0.2)
-    },
-    VeoVideoGenerationNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration_seconds'
-        ) as IComboWidget
-
-        if (!durationWidget)
-          return formatCreditsRangeLabel(2.5, 5.0, {
-            note: '(varies with duration)'
-          })
-
-        const price = 0.5 * Number(durationWidget.value)
-        return formatCreditsLabel(price)
-      }
-    },
-    Veo3VideoGenerationNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const generateAudioWidget = node.widgets?.find(
-          (w) => w.name === 'generate_audio'
-        ) as IComboWidget
-
-        if (!modelWidget || !generateAudioWidget) {
-          return formatCreditsRangeLabel(0.8, 3.2, {
-            note: '(varies with model & audio generation)'
-          })
-        }
-
-        const model = String(modelWidget.value)
-        const generateAudio =
-          String(generateAudioWidget.value).toLowerCase() === 'true'
-
-        if (
-          model.includes('veo-3.0-fast-generate-001') ||
-          model.includes('veo-3.1-fast-generate')
-        ) {
-          return generateAudio
-            ? formatCreditsLabel(1.2)
-            : formatCreditsLabel(0.8)
-        } else if (
-          model.includes('veo-3.0-generate-001') ||
-          model.includes('veo-3.1-generate')
-        ) {
-          return generateAudio
-            ? formatCreditsLabel(3.2)
-            : formatCreditsLabel(1.6)
-        }
-
-        // Default fallback
-        return formatCreditsRangeLabel(0.8, 3.2)
-      }
-    },
-    Veo3FirstLastFrameNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const generateAudioWidget = node.widgets?.find(
-          (w) => w.name === 'generate_audio'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!modelWidget || !generateAudioWidget || !durationWidget) {
-          return formatCreditsRangeLabel(0.4, 3.2, {
-            note: '(varies with model & audio generation)'
-          })
-        }
-
-        const model = String(modelWidget.value)
-        const generateAudio =
-          String(generateAudioWidget.value).toLowerCase() === 'true'
-        const seconds = parseFloat(String(durationWidget.value))
-
-        let pricePerSecond: number | null = null
-        if (model.includes('veo-3.1-fast-generate')) {
-          pricePerSecond = generateAudio ? 0.15 : 0.1
-        } else if (model.includes('veo-3.1-generate')) {
-          pricePerSecond = generateAudio ? 0.4 : 0.2
-        }
-        if (pricePerSecond === null) {
-          return formatCreditsRangeLabel(0.4, 3.2)
-        }
-        const cost = pricePerSecond * seconds
-        return formatCreditsLabel(cost)
-      }
-    },
-    LumaImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const aspectRatioWidget = node.widgets?.find(
-          (w) => w.name === 'aspect_ratio'
-        ) as IComboWidget
-
-        if (!modelWidget || !aspectRatioWidget) {
-          return formatCreditsRangeLabel(0.0064, 0.026, {
-            note: '(varies with model & aspect ratio)'
-          })
-        }
-
-        const model = String(modelWidget.value)
-
-        if (model.includes('photon-flash-1')) {
-          return formatCreditsLabel(0.0027)
-        } else if (model.includes('photon-1')) {
-          return formatCreditsLabel(0.0104)
-        }
-
-        return formatCreditsLabel(0.0246)
-      }
-    },
-    LumaImageModifyNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-
-        if (!modelWidget) {
-          return formatCreditsRangeLabel(0.0027, 0.0104, {
-            note: '(varies with model)'
-          })
-        }
-
-        const model = String(modelWidget.value)
-
-        if (model.includes('photon-flash-1')) {
-          return formatCreditsLabel(0.0027)
-        } else if (model.includes('photon-1')) {
-          return formatCreditsLabel(0.0104)
-        }
-
-        return formatCreditsLabel(0.0246)
-      }
-    },
-    MoonvalleyTxt2VideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const lengthWidget = node.widgets?.find(
-          (w) => w.name === 'length'
-        ) as IComboWidget
-
-        // If no length widget exists, default to 5s pricing
-        if (!lengthWidget) return formatCreditsLabel(1.5)
-
-        const length = String(lengthWidget.value)
-        if (length === '5s') {
-          return formatCreditsLabel(1.5)
-        } else if (length === '10s') {
-          return formatCreditsLabel(3.0)
-        }
-
-        return formatCreditsLabel(1.5)
-      }
-    },
-    MoonvalleyImg2VideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const lengthWidget = node.widgets?.find(
-          (w) => w.name === 'length'
-        ) as IComboWidget
-
-        // If no length widget exists, default to 5s pricing
-        if (!lengthWidget) return formatCreditsLabel(1.5)
-
-        const length = String(lengthWidget.value)
-        if (length === '5s') {
-          return formatCreditsLabel(1.5)
-        } else if (length === '10s') {
-          return formatCreditsLabel(3.0)
-        }
-
-        return formatCreditsLabel(1.5)
-      }
-    },
-    MoonvalleyVideo2VideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const lengthWidget = node.widgets?.find(
-          (w) => w.name === 'length'
-        ) as IComboWidget
-
-        // If no length widget exists, default to 5s pricing
-        if (!lengthWidget) return formatCreditsLabel(2.25)
-
-        const length = String(lengthWidget.value)
-        if (length === '5s') {
-          return formatCreditsLabel(2.25)
-        } else if (length === '10s') {
-          return formatCreditsLabel(4.0)
-        }
-
-        return formatCreditsLabel(2.25)
-      }
-    },
-    // Runway nodes - using actual node names from ComfyUI
-    RunwayTextToImageNode: {
-      displayPrice: formatCreditsLabel(0.11)
-    },
-    RunwayImageToVideoNodeGen3a: {
-      displayPrice: calculateRunwayDurationPrice
-    },
-    RunwayImageToVideoNodeGen4: {
-      displayPrice: calculateRunwayDurationPrice
-    },
-    RunwayFirstLastFrameNode: {
-      displayPrice: calculateRunwayDurationPrice
-    },
-    // Rodin nodes - all have the same pricing structure
-    Rodin3D_Regular: {
-      displayPrice: formatCreditsLabel(0.4)
-    },
-    Rodin3D_Detail: {
-      displayPrice: formatCreditsLabel(0.4)
-    },
-    Rodin3D_Smooth: {
-      displayPrice: formatCreditsLabel(0.4)
-    },
-    Rodin3D_Sketch: {
-      displayPrice: formatCreditsLabel(0.4)
-    },
-    // Tripo nodes - using actual node names from ComfyUI
-    TripoTextToModelNode: {
-      displayPrice: (node: LGraphNode): string =>
-        calculateTripo3DGenerationPrice(node, 'text')
-    },
-    TripoImageToModelNode: {
-      displayPrice: (node: LGraphNode): string =>
-        calculateTripo3DGenerationPrice(node, 'image')
-    },
-    TripoMultiviewToModelNode: {
-      displayPrice: (node: LGraphNode): string =>
-        calculateTripo3DGenerationPrice(node, 'multiview')
-    },
-    TripoTextureNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const textureQualityWidget = node.widgets?.find(
-          (w) => w.name === 'texture_quality'
-        ) as IComboWidget
-
-        if (!textureQualityWidget)
-          return formatCreditsRangeLabel(0.1, 0.2, {
-            note: '(varies with quality)'
-          })
-
-        const textureQuality = String(textureQualityWidget.value)
-        return textureQuality.includes('detailed')
-          ? formatCreditsLabel(0.2)
-          : formatCreditsLabel(0.1)
-      }
-    },
-    TripoRigNode: {
-      displayPrice: '$0.25/Run'
-    },
-    TripoConversionNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const getWidgetValue = (name: string) =>
-          node.widgets?.find((w) => w.name === name)?.value
-
-        const getNumber = (name: string, defaultValue: number): number => {
-          const raw = getWidgetValue(name)
-          if (raw === undefined || raw === null || raw === '')
-            return defaultValue
-          if (typeof raw === 'number')
-            return Number.isFinite(raw) ? raw : defaultValue
-          const n = Number(raw)
-          return Number.isFinite(n) ? n : defaultValue
-        }
-
-        const getBool = (name: string, defaultValue: boolean): boolean => {
-          const v = getWidgetValue(name)
-          if (v === undefined || v === null) return defaultValue
-
-          if (typeof v === 'number') return v !== 0
-          const lower = String(v).toLowerCase()
-          if (lower === 'true') return true
-          if (lower === 'false') return false
-          return defaultValue
-        }
-
-        let hasAdvancedParam = false
-
-        // ---- booleans that trigger advanced when true ----
-        if (getBool('quad', false)) hasAdvancedParam = true
-        if (getBool('force_symmetry', false)) hasAdvancedParam = true
-        if (getBool('flatten_bottom', false)) hasAdvancedParam = true
-        if (getBool('pivot_to_center_bottom', false)) hasAdvancedParam = true
-        if (getBool('with_animation', false)) hasAdvancedParam = true
-        if (getBool('pack_uv', false)) hasAdvancedParam = true
-        if (getBool('bake', false)) hasAdvancedParam = true
-        if (getBool('export_vertex_colors', false)) hasAdvancedParam = true
-        if (getBool('animate_in_place', false)) hasAdvancedParam = true
-
-        // ---- numeric params with special default sentinels ----
-        const faceLimit = getNumber('face_limit', -1)
-        if (faceLimit !== -1) hasAdvancedParam = true
-
-        const textureSize = getNumber('texture_size', 4096)
-        if (textureSize !== 4096) hasAdvancedParam = true
-
-        const flattenBottomThreshold = getNumber(
-          'flatten_bottom_threshold',
-          0.0
-        )
-        if (flattenBottomThreshold !== 0.0) hasAdvancedParam = true
-
-        const scaleFactor = getNumber('scale_factor', 1.0)
-        if (scaleFactor !== 1.0) hasAdvancedParam = true
-
-        // ---- string / combo params with non-default values ----
-        const textureFormatRaw = String(
-          getWidgetValue('texture_format') ?? 'JPEG'
-        ).toUpperCase()
-        if (textureFormatRaw !== 'JPEG') hasAdvancedParam = true
-
-        const partNamesRaw = String(getWidgetValue('part_names') ?? '')
-        if (partNamesRaw.trim().length > 0) hasAdvancedParam = true
-
-        const fbxPresetRaw = String(
-          getWidgetValue('fbx_preset') ?? 'blender'
-        ).toLowerCase()
-        if (fbxPresetRaw !== 'blender') hasAdvancedParam = true
-
-        const exportOrientationRaw = String(
-          getWidgetValue('export_orientation') ?? 'default'
-        ).toLowerCase()
-        if (exportOrientationRaw !== 'default') hasAdvancedParam = true
-
-        const credits = hasAdvancedParam ? 10 : 5
-        return formatCreditsLabel(credits * 0.01)
-      }
-    },
-    TripoRetargetNode: {
-      displayPrice: formatCreditsLabel(0.1)
-    },
-    TripoRefineNode: {
-      displayPrice: formatCreditsLabel(0.3)
-    },
-    MeshyTextToModelNode: {
-      displayPrice: formatCreditsLabel(meshyCreditsToUsd(20))
-    },
-    MeshyRefineNode: {
-      displayPrice: formatCreditsLabel(meshyCreditsToUsd(10))
-    },
-    MeshyImageToModelNode: {
-      displayPrice: calculateMeshyImageToModelPrice
-    },
-    MeshyMultiImageToModelNode: {
-      displayPrice: calculateMeshyMultiImageToModelPrice
-    },
-    MeshyRigModelNode: {
-      displayPrice: formatCreditsLabel(meshyCreditsToUsd(5))
-    },
-    MeshyAnimateModelNode: {
-      displayPrice: formatCreditsLabel(meshyCreditsToUsd(3))
-    },
-    MeshyTextureNode: {
-      displayPrice: formatCreditsLabel(meshyCreditsToUsd(10))
-    },
-    // Google/Gemini nodes
-    GeminiNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-
-        if (!modelWidget) return 'Token-based'
-
-        const model = String(modelWidget.value)
-
-        if (model.includes('gemini-2.5-flash-preview-04-17')) {
-          return formatCreditsListLabel([0.0003, 0.0025], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gemini-2.5-flash')) {
-          return formatCreditsListLabel([0.0003, 0.0025], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gemini-2.5-pro-preview-05-06')) {
-          return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gemini-2.5-pro')) {
-          return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gemini-3-pro-preview')) {
-          return formatCreditsListLabel([0.002, 0.012], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        }
-        // For other Gemini models, show token-based pricing info
-        return 'Token-based'
-      }
-    },
-    GeminiImageNode: {
-      displayPrice: formatCreditsLabel(0.039, {
-        suffix: '/Image (1K)',
-        approximate: true
-      })
-    },
-    GeminiImage2Node: {
-      displayPrice: (node: LGraphNode): string => {
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-
-        if (!resolutionWidget) return 'Token-based'
-
-        const resolution = String(resolutionWidget.value)
-        if (resolution.includes('1K')) {
-          return formatCreditsLabel(0.134, {
-            suffix: '/Image',
-            approximate: true
-          })
-        } else if (resolution.includes('2K')) {
-          return formatCreditsLabel(0.134, {
-            suffix: '/Image',
-            approximate: true
-          })
-        } else if (resolution.includes('4K')) {
-          return formatCreditsLabel(0.24, {
-            suffix: '/Image',
-            approximate: true
-          })
-        }
-        return 'Token-based'
-      }
-    },
-    // OpenAI nodes
-    OpenAIChatNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-
-        if (!modelWidget) return 'Token-based'
-
-        const model = String(modelWidget.value)
-
-        // Specific pricing for exposed models based on official pricing data (converted to per 1K tokens)
-        if (model.includes('o4-mini')) {
-          return formatCreditsListLabel([0.0011, 0.0044], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('o1-pro')) {
-          return formatCreditsListLabel([0.15, 0.6], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('o1')) {
-          return formatCreditsListLabel([0.015, 0.06], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('o3-mini')) {
-          return formatCreditsListLabel([0.0011, 0.0044], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('o3')) {
-          return formatCreditsListLabel([0.01, 0.04], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gpt-4o')) {
-          return formatCreditsListLabel([0.0025, 0.01], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gpt-4.1-nano')) {
-          return formatCreditsListLabel([0.0001, 0.0004], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gpt-4.1-mini')) {
-          return formatCreditsListLabel([0.0004, 0.0016], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gpt-4.1')) {
-          return formatCreditsListLabel([0.002, 0.008], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gpt-5-nano')) {
-          return formatCreditsListLabel([0.00005, 0.0004], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gpt-5-mini')) {
-          return formatCreditsListLabel([0.00025, 0.002], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        } else if (model.includes('gpt-5')) {
-          return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
-          })
-        }
-        return 'Token-based'
-      }
-    },
-    ViduTextToVideoNode: {
-      displayPrice: formatCreditsLabel(0.4)
-    },
-    ViduImageToVideoNode: {
-      displayPrice: formatCreditsLabel(0.4)
-    },
-    ViduReferenceVideoNode: {
-      displayPrice: formatCreditsLabel(0.4)
-    },
-    ViduStartEndToVideoNode: {
-      displayPrice: formatCreditsLabel(0.4)
-    },
-    ByteDanceImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-
-        if (!modelWidget) return 'Token-based'
-
-        const model = String(modelWidget.value)
-
-        if (model.includes('seedream-3-0-t2i')) {
-          return formatCreditsLabel(0.03)
-        }
-        return 'Token-based'
-      }
-    },
-    ByteDanceImageEditNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-
-        if (!modelWidget) return 'Token-based'
-
-        const model = String(modelWidget.value)
-
-        if (model.includes('seededit-3-0-i2i')) {
-          return formatCreditsLabel(0.03)
-        }
-        return 'Token-based'
-      }
-    },
-    ByteDanceSeedreamNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-
-        const model = String(modelWidget?.value ?? '').toLowerCase()
-        let pricePerImage = 0.03 // default for seedream-4-0-250828 and fallback
-        if (model.includes('seedream-4-5-251128')) {
-          pricePerImage = 0.04
-        } else if (model.includes('seedream-4-0-250828')) {
-          pricePerImage = 0.03
-        }
-        return formatCreditsLabel(pricePerImage, {
-          suffix: ' x images/Run',
-          approximate: true
-        })
-      }
-    },
-    ByteDanceTextToVideoNode: {
-      displayPrice: byteDanceVideoPricingCalculator
-    },
-    ByteDanceImageToVideoNode: {
-      displayPrice: byteDanceVideoPricingCalculator
-    },
-    ByteDanceFirstLastFrameNode: {
-      displayPrice: byteDanceVideoPricingCalculator
-    },
-    ByteDanceImageReferenceNode: {
-      displayPrice: byteDanceVideoPricingCalculator
-    },
-    WanTextToVideoApi: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'size'
-        ) as IComboWidget
-
-        if (!durationWidget || !resolutionWidget)
-          return formatCreditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-
-        const seconds = parseFloat(String(durationWidget.value))
-        const resolutionStr = String(resolutionWidget.value).toLowerCase()
-
-        const resKey = resolutionStr.includes('1080')
-          ? '1080p'
-          : resolutionStr.includes('720')
-            ? '720p'
-            : resolutionStr.includes('480')
-              ? '480p'
-              : (resolutionStr.match(/^\s*(\d{3,4}p)/)?.[1] ?? '')
-
-        const pricePerSecond: Record<string, number> = {
-          '480p': 0.05,
-          '720p': 0.1,
-          '1080p': 0.15
-        }
-
-        const pps = pricePerSecond[resKey]
-        if (isNaN(seconds) || !pps)
-          return formatCreditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-
-        const cost = Number((pps * seconds).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    WanImageToVideoApi: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-
-        if (!durationWidget || !resolutionWidget)
-          return formatCreditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-
-        const seconds = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget.value).trim().toLowerCase()
-
-        const pricePerSecond: Record<string, number> = {
-          '480p': 0.05,
-          '720p': 0.1,
-          '1080p': 0.15
-        }
-
-        const pps = pricePerSecond[resolution]
-        if (isNaN(seconds) || !pps)
-          return formatCreditsRangeLabel(0.05, 0.15, { suffix: '/second' })
-
-        const cost = Number((pps * seconds).toFixed(2))
-        return formatCreditsLabel(cost)
-      }
-    },
-    WanTextToImageApi: {
-      displayPrice: formatCreditsLabel(0.03)
-    },
-    WanImageToImageApi: {
-      displayPrice: formatCreditsLabel(0.03)
-    },
-    LtxvApiTextToVideo: {
-      displayPrice: ltxvPricingCalculator
-    },
-    LtxvApiImageToVideo: {
-      displayPrice: ltxvPricingCalculator
-    },
-    WanReferenceVideoApi: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const sizeWidget = node.widgets?.find(
-          (w) => w.name === 'size'
-        ) as IComboWidget
-
-        if (!durationWidget || !sizeWidget) {
-          return formatCreditsRangeLabel(0.7, 1.5, {
-            note: '(varies with size & duration)'
-          })
-        }
-
-        const seconds = parseFloat(String(durationWidget.value))
-        const sizeStr = String(sizeWidget.value).toLowerCase()
-
-        const rate = sizeStr.includes('1080p') ? 0.15 : 0.1
-        const inputMin = 2 * rate
-        const inputMax = 5 * rate
-        const outputPrice = seconds * rate
-
-        const minTotal = inputMin + outputPrice
-        const maxTotal = inputMax + outputPrice
-
-        return formatCreditsRangeLabel(minTotal, maxTotal)
-      }
-    },
-    Vidu2TextToVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-
-        if (!durationWidget || !resolutionWidget) {
-          return formatCreditsRangeLabel(0.075, 0.6, {
-            note: '(varies with duration & resolution)'
-          })
-        }
-
-        const duration = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget.value).toLowerCase()
-
-        // Text-to-Video uses Q2 model only
-        // 720P: Starts at $0.075, +$0.025/sec
-        // 1080P: Starts at $0.10, +$0.05/sec
-        let basePrice: number
-        let pricePerSecond: number
-
-        if (resolution.includes('1080')) {
-          basePrice = 0.1
-          pricePerSecond = 0.05
-        } else {
-          // 720P default
-          basePrice = 0.075
-          pricePerSecond = 0.025
-        }
-
-        if (!Number.isFinite(duration) || duration <= 0) {
-          return formatCreditsRangeLabel(0.075, 0.6, {
-            note: '(varies with duration & resolution)'
-          })
-        }
-
-        const cost = basePrice + pricePerSecond * (duration - 1)
-        return formatCreditsLabel(cost)
-      }
-    },
-    Vidu2ImageToVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-
-        if (!modelWidget || !durationWidget || !resolutionWidget) {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        const model = String(modelWidget.value).toLowerCase()
-        const duration = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget.value).toLowerCase()
-        const is1080p = resolution.includes('1080')
-
-        let basePrice: number
-        let pricePerSecond: number
-
-        if (model.includes('q2-pro-fast')) {
-          // Q2-pro-fast: 720P $0.04+$0.01/sec, 1080P $0.08+$0.02/sec
-          basePrice = is1080p ? 0.08 : 0.04
-          pricePerSecond = is1080p ? 0.02 : 0.01
-        } else if (model.includes('q2-pro')) {
-          // Q2-pro: 720P $0.075+$0.05/sec, 1080P $0.275+$0.075/sec
-          basePrice = is1080p ? 0.275 : 0.075
-          pricePerSecond = is1080p ? 0.075 : 0.05
-        } else if (model.includes('q2-turbo')) {
-          // Q2-turbo: 720P special pricing, 1080P $0.175+$0.05/sec
-          if (is1080p) {
-            basePrice = 0.175
-            pricePerSecond = 0.05
-          } else {
-            // 720P: $0.04 at 1s, $0.05 at 2s, +$0.05/sec beyond 2s
-            if (duration <= 1) {
-              return formatCreditsLabel(0.04)
-            }
-            if (duration <= 2) {
-              return formatCreditsLabel(0.05)
-            }
-            const cost = 0.05 + 0.05 * (duration - 2)
-            return formatCreditsLabel(cost)
-          }
-        } else {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        if (!Number.isFinite(duration) || duration <= 0) {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        const cost = basePrice + pricePerSecond * (duration - 1)
-        return formatCreditsLabel(cost)
-      }
-    },
-    Vidu2ReferenceVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-        const audioWidget = node.widgets?.find(
-          (w) => w.name === 'audio'
-        ) as IComboWidget
-
-        if (!durationWidget) {
-          return formatCreditsRangeLabel(0.125, 1.5, {
-            note: '(varies with duration, resolution & audio)'
-          })
-        }
-
-        const duration = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget?.value ?? '').toLowerCase()
-        const is1080p = resolution.includes('1080')
-
-        // Check if audio is enabled (adds $0.75)
-        const audioValue = audioWidget?.value
-        const hasAudio =
-          audioValue !== undefined &&
-          audioValue !== null &&
-          String(audioValue).toLowerCase() !== 'false' &&
-          String(audioValue).toLowerCase() !== 'none' &&
-          audioValue !== ''
-
-        // Reference-to-Video uses Q2 model
-        // 720P: Starts at $0.125, +$0.025/sec
-        // 1080P: Starts at $0.375, +$0.05/sec
-        let basePrice: number
-        let pricePerSecond: number
-
-        if (is1080p) {
-          basePrice = 0.375
-          pricePerSecond = 0.05
-        } else {
-          // 720P default
-          basePrice = 0.125
-          pricePerSecond = 0.025
-        }
-
-        let cost = basePrice
-        if (Number.isFinite(duration) && duration > 0) {
-          cost = basePrice + pricePerSecond * (duration - 1)
-        }
-
-        // Audio adds $0.75 on top
-        if (hasAudio) {
-          cost += 0.075
-        }
-
-        return formatCreditsLabel(cost)
-      }
-    },
-    Vidu2StartEndToVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-
-        if (!modelWidget || !durationWidget || !resolutionWidget) {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        const model = String(modelWidget.value).toLowerCase()
-        const duration = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget.value).toLowerCase()
-        const is1080p = resolution.includes('1080')
-
-        let basePrice: number
-        let pricePerSecond: number
-
-        if (model.includes('q2-pro-fast')) {
-          // Q2-pro-fast: 720P $0.04+$0.01/sec, 1080P $0.08+$0.02/sec
-          basePrice = is1080p ? 0.08 : 0.04
-          pricePerSecond = is1080p ? 0.02 : 0.01
-        } else if (model.includes('q2-pro')) {
-          // Q2-pro: 720P $0.075+$0.05/sec, 1080P $0.275+$0.075/sec
-          basePrice = is1080p ? 0.275 : 0.075
-          pricePerSecond = is1080p ? 0.075 : 0.05
-        } else if (model.includes('q2-turbo')) {
-          // Q2-turbo: 720P special pricing, 1080P $0.175+$0.05/sec
-          if (is1080p) {
-            basePrice = 0.175
-            pricePerSecond = 0.05
-          } else {
-            // 720P: $0.04 at 1s, $0.05 at 2s, +$0.05/sec beyond 2s
-            if (!Number.isFinite(duration) || duration <= 1) {
-              return formatCreditsLabel(0.04)
-            }
-            if (duration <= 2) {
-              return formatCreditsLabel(0.05)
-            }
-            const cost = 0.05 + 0.05 * (duration - 2)
-            return formatCreditsLabel(cost)
-          }
-        } else {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        if (!Number.isFinite(duration) || duration <= 0) {
-          return formatCreditsLabel(basePrice)
-        }
-
-        const cost = basePrice + pricePerSecond * (duration - 1)
-        return formatCreditsLabel(cost)
-      }
-    }
-  }
-
-/**
- * Composable to get node pricing information for API nodes
- */
+// -----------------------------
+// Public composable API
+// -----------------------------
 export const useNodePricing = () => {
   /**
-   * Get the price display for a node
+   * Sync getter:
+   * - returns cached label for the current node signature when available
+   * - schedules async evaluation when needed
+   * - remains non-fatal on errors (returns safe fallback '')
    */
   const getNodeDisplayPrice = (node: LGraphNode): string => {
-    if (!node.constructor?.nodeData?.api_node) return ''
+    // Make this function reactive: when async evaluation completes, we bump pricingTick,
+    // which causes this getter to recompute in Vue render/computed contexts.
+    void pricingTick.value
 
-    const nodeName = node.constructor.nodeData.name
-    const priceConfig = apiNodeCosts[nodeName]
+    const nodeData = getNodeConstructorData(node)
+    if (!nodeData?.api_node) return ''
 
-    if (!priceConfig) return ''
+    const rule = getRuleForNode(node)
+    if (!rule) return ''
+    if (rule.engine !== 'jsonata') return ''
+    if (!rule._compiled) return ''
 
-    // If it's a function, call it with the node to get dynamic pricing
-    if (typeof priceConfig.displayPrice === 'function') {
-      return safePricingExecution(priceConfig.displayPrice, node, '')
+    const ctx = buildJsonataContext(node, rule)
+    const sig = buildSignature(ctx, rule)
+
+    const cached = cache.get(node)
+    if (cached && cached.sig === sig) {
+      return cached.label
     }
 
-    // Otherwise return the static price
-    return priceConfig.displayPrice
+    // Cache miss: start async evaluation.
+    // Return last-known label (if any) to avoid flicker; otherwise return empty.
+    scheduleEvaluation(node, rule, ctx, sig)
+    return cached?.label ?? ''
   }
 
-  const getNodePricingConfig = (node: LGraphNode) =>
-    apiNodeCosts[node.constructor.nodeData?.name ?? '']
+  /**
+   * Expose raw pricing config for tooling/debug UI.
+   * (Strips compiled expression from returned object.)
+   */
+  const getNodePricingConfig = (node: LGraphNode) => {
+    const rule = getRuleForNode(node)
+    if (!rule) return undefined
+    const { _compiled, ...config } = rule
+    return config
+  }
 
+  /**
+   * Caller compatibility helper:
+   * returns union of widget dependencies + input dependencies for a node type.
+   */
   const getRelevantWidgetNames = (nodeType: string): string[] => {
-    const widgetMap: Record<string, string[]> = {
-      KlingTextToVideoNode: ['mode', 'model_name', 'duration'],
-      KlingImage2VideoNode: ['mode', 'model_name', 'duration'],
-      KlingImageGenerationNode: ['modality', 'model_name', 'n'],
-      KlingDualCharacterVideoEffectNode: ['mode', 'model_name', 'duration'],
-      KlingSingleImageVideoEffectNode: ['effect_scene'],
-      KlingStartEndFrameNode: ['mode', 'model_name', 'duration'],
-      KlingTextToVideoWithAudio: ['duration', 'generate_audio'],
-      KlingImageToVideoWithAudio: ['duration', 'generate_audio'],
-      KlingOmniProTextToVideoNode: ['duration'],
-      KlingOmniProFirstLastFrameNode: ['duration'],
-      KlingOmniProImageToVideoNode: ['duration'],
-      KlingOmniProVideoToVideoNode: ['duration'],
-      KlingMotionControl: ['mode'],
-      MinimaxHailuoVideoNode: ['resolution', 'duration'],
-      OpenAIDalle3: ['size', 'quality'],
-      OpenAIDalle2: ['size', 'n'],
-      OpenAIVideoSora2: ['model', 'size', 'duration'],
-      OpenAIGPTImage1: ['quality', 'n'],
-      IdeogramV1: ['num_images', 'turbo'],
-      IdeogramV2: ['num_images', 'turbo'],
-      IdeogramV3: ['rendering_speed', 'num_images', 'character_image'],
-      FluxProKontextProNode: [],
-      FluxProKontextMaxNode: [],
-      Flux2ProImageNode: ['width', 'height', 'images'],
-      Flux2MaxImageNode: ['width', 'height', 'images'],
-      VeoVideoGenerationNode: ['duration_seconds'],
-      Veo3VideoGenerationNode: ['model', 'generate_audio'],
-      Veo3FirstLastFrameNode: ['model', 'generate_audio', 'duration'],
-      LumaVideoNode: ['model', 'resolution', 'duration'],
-      LumaImageToVideoNode: ['model', 'resolution', 'duration'],
-      LumaImageNode: ['model', 'aspect_ratio'],
-      LumaImageModifyNode: ['model', 'aspect_ratio'],
-      PixverseTextToVideoNode: ['duration_seconds', 'quality', 'motion_mode'],
-      PixverseTransitionVideoNode: [
-        'duration_seconds',
-        'motion_mode',
-        'quality'
-      ],
-      PixverseImageToVideoNode: ['duration_seconds', 'quality', 'motion_mode'],
-      StabilityStableImageSD_3_5Node: ['model'],
-      RecraftTextToImageNode: ['n'],
-      RecraftImageToImageNode: ['n'],
-      RecraftImageInpaintingNode: ['n'],
-      RecraftTextToVectorNode: ['n'],
-      RecraftVectorizeImageNode: ['n'],
-      RecraftGenerateColorFromImageNode: ['n'],
-      RecraftGenerateImageNode: ['n'],
-      RecraftGenerateVectorImageNode: ['n'],
-      MoonvalleyTxt2VideoNode: ['length'],
-      MoonvalleyImg2VideoNode: ['length'],
-      MoonvalleyVideo2VideoNode: ['length'],
-      // Runway nodes
-      RunwayImageToVideoNodeGen3a: ['duration'],
-      RunwayImageToVideoNodeGen4: ['duration'],
-      RunwayFirstLastFrameNode: ['duration'],
-      // Tripo nodes
-      TripoTextToModelNode: [
-        'model_version',
-        'quad',
-        'style',
-        'texture',
-        'pbr',
-        'texture_quality',
-        'geometry_quality'
-      ],
-      TripoImageToModelNode: [
-        'model_version',
-        'quad',
-        'style',
-        'texture',
-        'pbr',
-        'texture_quality',
-        'geometry_quality'
-      ],
-      TripoMultiviewToModelNode: [
-        'model_version',
-        'quad',
-        'texture',
-        'pbr',
-        'texture_quality',
-        'geometry_quality'
-      ],
-      TripoConversionNode: [
-        'quad',
-        'face_limit',
-        'texture_size',
-        'texture_format',
-        'force_symmetry',
-        'flatten_bottom',
-        'flatten_bottom_threshold',
-        'pivot_to_center_bottom',
-        'scale_factor',
-        'with_animation',
-        'pack_uv',
-        'bake',
-        'part_names',
-        'fbx_preset',
-        'export_vertex_colors',
-        'export_orientation',
-        'animate_in_place'
-      ],
-      TripoTextureNode: ['texture_quality'],
-      // Meshy nodes
-      MeshyImageToModelNode: ['should_texture'],
-      MeshyMultiImageToModelNode: ['should_texture'],
-      // Google/Gemini nodes
-      GeminiNode: ['model'],
-      GeminiImage2Node: ['resolution'],
-      // OpenAI nodes
-      OpenAIChatNode: ['model'],
-      // ByteDance
-      ByteDanceImageNode: ['model'],
-      ByteDanceImageEditNode: ['model'],
-      ByteDanceSeedreamNode: [
-        'model',
-        'sequential_image_generation',
-        'max_images'
-      ],
-      ByteDanceTextToVideoNode: [
-        'model',
-        'duration',
-        'resolution',
-        'generate_audio'
-      ],
-      ByteDanceImageToVideoNode: [
-        'model',
-        'duration',
-        'resolution',
-        'generate_audio'
-      ],
-      ByteDanceFirstLastFrameNode: [
-        'model',
-        'duration',
-        'resolution',
-        'generate_audio'
-      ],
-      ByteDanceImageReferenceNode: ['model', 'duration', 'resolution'],
-      WanTextToVideoApi: ['duration', 'size'],
-      WanImageToVideoApi: ['duration', 'resolution'],
-      WanReferenceVideoApi: ['duration', 'size'],
-      LtxvApiTextToVideo: ['model', 'duration', 'resolution'],
-      LtxvApiImageToVideo: ['model', 'duration', 'resolution'],
-      Vidu2TextToVideoNode: ['model', 'duration', 'resolution'],
-      Vidu2ImageToVideoNode: ['model', 'duration', 'resolution'],
-      Vidu2ReferenceVideoNode: ['audio', 'duration', 'resolution'],
-      Vidu2StartEndToVideoNode: ['model', 'duration', 'resolution']
+    const nodeDefStore = useNodeDefStore()
+    const nodeDef = nodeDefStore.nodeDefsByName[nodeType]
+    if (!nodeDef) return []
+
+    const priceBadge = nodeDef.price_badge
+    if (!priceBadge) return []
+
+    const dependsOn = priceBadge.depends_on ?? {
+      widgets: [],
+      inputs: [],
+      input_groups: []
     }
-    return widgetMap[nodeType] || []
+
+    // Extract widget names
+    const widgetNames = (dependsOn.widgets ?? []).map((w) => w.name)
+
+    // Keep stable output (dedupe while preserving order)
+    const out: string[] = []
+    for (const n of [
+      ...widgetNames,
+      ...(dependsOn.inputs ?? []),
+      ...(dependsOn.input_groups ?? [])
+    ]) {
+      if (!out.includes(n)) out.push(n)
+    }
+    return out
+  }
+
+  /**
+   * Check if a node type has dynamic pricing (depends on widgets, inputs, or input_groups).
+   */
+  const hasDynamicPricing = (nodeType: string): boolean => {
+    const nodeDefStore = useNodeDefStore()
+    const nodeDef = nodeDefStore.nodeDefsByName[nodeType]
+    if (!nodeDef) return false
+
+    const priceBadge = nodeDef.price_badge
+    if (!priceBadge) return false
+
+    const dependsOn = priceBadge.depends_on
+    if (!dependsOn) return false
+
+    return (
+      (dependsOn.widgets?.length ?? 0) > 0 ||
+      (dependsOn.inputs?.length ?? 0) > 0 ||
+      (dependsOn.input_groups?.length ?? 0) > 0
+    )
+  }
+
+  /**
+   * Get input_groups prefixes for a node type (for watching connection changes).
+   */
+  const getInputGroupPrefixes = (nodeType: string): string[] => {
+    const nodeDefStore = useNodeDefStore()
+    const nodeDef = nodeDefStore.nodeDefsByName[nodeType]
+    if (!nodeDef) return []
+
+    const priceBadge = nodeDef.price_badge
+    if (!priceBadge) return []
+
+    return priceBadge.depends_on?.input_groups ?? []
+  }
+
+  /**
+   * Get regular input names for a node type (for watching connection changes).
+   */
+  const getInputNames = (nodeType: string): string[] => {
+    const nodeDefStore = useNodeDefStore()
+    const nodeDef = nodeDefStore.nodeDefsByName[nodeType]
+    if (!nodeDef) return []
+
+    const priceBadge = nodeDef.price_badge
+    if (!priceBadge) return []
+
+    return priceBadge.depends_on?.inputs ?? []
+  }
+
+  /**
+   * Trigger price recalculation for a node (call when inputs change).
+   * Forces re-evaluation by calling getNodeDisplayPrice which will detect
+   * the signature change and schedule a new evaluation.
+   */
+  const triggerPriceRecalculation = (node: LGraphNode): void => {
+    const nodeData = getNodeConstructorData(node)
+    if (!nodeData?.api_node) return
+
+    // Call getNodeDisplayPrice to trigger evaluation if signature changed
+    getNodeDisplayPrice(node)
   }
 
   return {
     getNodeDisplayPrice,
     getNodePricingConfig,
-    getRelevantWidgetNames
+    getRelevantWidgetNames,
+    hasDynamicPricing,
+    getInputGroupPrefixes,
+    getInputNames,
+    getNodeRevisionRef, // Each node has its own independent ref, so updates to one won't trigger others
+    triggerPriceRecalculation,
+    pricingRevision: readonly(pricingTick) // reactive invalidation signal
   }
 }
diff --git a/src/extensions/core/cloudFeedbackTopbarButton.ts b/src/extensions/core/cloudFeedbackTopbarButton.ts
index 144506d7e..b19f057a7 100644
--- a/src/extensions/core/cloudFeedbackTopbarButton.ts
+++ b/src/extensions/core/cloudFeedbackTopbarButton.ts
@@ -1,10 +1,17 @@
 import { t } from '@/i18n'
+import { getDistribution, ZENDESK_FIELDS } from '@/platform/support/config'
 import { useExtensionService } from '@/services/extensionService'
 import type { ActionBarButton } from '@/types/comfy'
 
-// Zendesk feedback URL - update this with the actual URL
-const ZENDESK_FEEDBACK_URL =
-  'https://support.comfy.org/hc/en-us/requests/new?ticket_form_id=43066738713236'
+const ZENDESK_BASE_URL = 'https://support.comfy.org/hc/en-us/requests/new'
+const ZENDESK_FEEDBACK_FORM_ID = '43066738713236'
+
+const distribution = getDistribution()
+const params = new URLSearchParams({
+  ticket_form_id: ZENDESK_FEEDBACK_FORM_ID,
+  [ZENDESK_FIELDS.DISTRIBUTION]: distribution
+})
+const feedbackUrl = `${ZENDESK_BASE_URL}?${params.toString()}`
 
 const buttons: ActionBarButton[] = [
   {
@@ -12,7 +19,7 @@ const buttons: ActionBarButton[] = [
     label: t('actionbar.feedback'),
     tooltip: t('actionbar.feedbackTooltip'),
     onClick: () => {
-      window.open(ZENDESK_FEEDBACK_URL, '_blank', 'noopener,noreferrer')
+      window.open(feedbackUrl, '_blank', 'noopener,noreferrer')
     }
   }
 ]
diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts
index e1675dfb2..367f7eb92 100644
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -32,13 +32,17 @@ if (isCloud) {
   await import('./cloudRemoteConfig')
   await import('./cloudBadges')
   await import('./cloudSessionCookie')
-  await import('./cloudFeedbackTopbarButton')
 
   if (window.__CONFIG__?.subscription_required) {
     await import('./cloudSubscription')
   }
 }
 
+// Feedback button for cloud and nightly builds
+if (isCloud || isNightly) {
+  await import('./cloudFeedbackTopbarButton')
+}
+
 // Nightly-only extensions
 if (isNightly && !isCloud) {
   await import('./nightlyBadges')
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index f3602479e..6e5bcd411 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -88,6 +88,7 @@
     "reportIssueTooltip": "Submit the error report to Comfy Org",
     "reportSent": "Report Submitted",
     "copyToClipboard": "Copy to Clipboard",
+    "copyAll": "Copy All",
     "openNewIssue": "Open New Issue",
     "showReport": "Show Report",
     "imageFailedToLoad": "Image failed to load",
@@ -1297,7 +1298,10 @@
     "VueNodes": "Nodes 2.0",
     "Nodes 2_0": "Nodes 2.0",
     "Execution": "Execution",
-    "PLY": "PLY"
+    "PLY": "PLY",
+    "Workspace": "Workspace",
+    "General": "General",
+    "Other": "Other"
   },
   "serverConfigItems": {
     "listen": {
@@ -2021,6 +2025,8 @@
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
+    "managePayment": "Manage Payment",
+    "cancelSubscription": "Cancel Subscription",
     "partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
     "partnerNodesDescription": "For running commercial/proprietary models",
     "totalCredits": "Total credits",
@@ -2075,6 +2081,9 @@
     "subscribeToRunFull": "Subscribe to Run",
     "subscribeNow": "Subscribe Now",
     "subscribeToComfyCloud": "Subscribe to Comfy Cloud",
+    "workspaceNotSubscribed": "This workspace is not on a subscription",
+    "subscriptionRequiredMessage": "A subscription is required for members to run workflows on Cloud",
+    "contactOwnerToSubscribe": "Contact the workspace owner to subscribe",
     "description": "Choose the best plan for you",
     "haveQuestions": "Have questions or wondering about enterprise?",
     "contactUs": "Contact us",
@@ -2110,12 +2119,64 @@
   "userSettings": {
     "title": "My Account Settings",
     "accountSettings": "Account settings",
+    "workspaceSettings": "Workspace settings",
     "name": "Name",
     "email": "Email",
     "provider": "Sign-in Provider",
     "notSet": "Not set",
     "updatePassword": "Update Password"
   },
+  "workspacePanel": {
+    "tabs": {
+      "planCredits": "Plan & Credits"
+    },
+    "menu": {
+      "editWorkspace": "Edit workspace details",
+      "leaveWorkspace": "Leave Workspace",
+      "deleteWorkspace": "Delete Workspace",
+      "deleteWorkspaceDisabledTooltip": "Cancel your workspace's active subscription first"
+    },
+    "editWorkspaceDialog": {
+      "title": "Edit workspace details",
+      "nameLabel": "Workspace name",
+      "save": "Save"
+    },
+    "leaveDialog": {
+      "title": "Leave this workspace?",
+      "message": "You won't be able to join again unless you contact the workspace owner.",
+      "leave": "Leave"
+    },
+    "deleteDialog": {
+      "title": "Delete this workspace?",
+      "message": "Any unused credits or unsaved assets will be lost. This action cannot be undone.",
+      "messageWithName": "Delete \"{name}\"? Any unused credits or unsaved assets will be lost. This action cannot be undone."
+    },
+    "createWorkspaceDialog": {
+      "title": "Create a new workspace",
+      "message": "Workspaces let members share a single credits pool. You'll become the owner after creating this.",
+      "nameLabel": "Workspace name*",
+      "namePlaceholder": "Enter workspace name",
+      "create": "Create"
+    },
+    "toast": {
+      "workspaceUpdated": {
+        "title": "Workspace updated",
+        "message": "Workspace details have been saved."
+      },
+      "failedToUpdateWorkspace": "Failed to update workspace",
+      "failedToCreateWorkspace": "Failed to create workspace",
+      "failedToDeleteWorkspace": "Failed to delete workspace",
+      "failedToLeaveWorkspace": "Failed to leave workspace"
+    }
+  },
+  "workspaceSwitcher": {
+    "switchWorkspace": "Switch workspace",
+    "subscribe": "Subscribe",
+    "roleOwner": "Owner",
+    "roleMember": "Member",
+    "createWorkspace": "Create new workspace",
+    "maxWorkspacesReached": "You can only own 10 workspaces. Delete one to create a new one."
+  },
   "selectionToolbox": {
     "executeButton": {
       "tooltip": "Execute to selected output nodes (Highlighted with orange border)",
@@ -2431,6 +2492,7 @@
       "selectModelPrompt": "Select a model to see its information",
       "basicInfo": "Basic Info",
       "displayName": "Display Name",
+      "editDisplayName": "Edit display name",
       "fileName": "File Name",
       "source": "Source",
       "viewOnSource": "View on {source}",
@@ -2678,4 +2740,4 @@
       "tooltip": "You are using a nightly version of ComfyUI. Please use the feedback button to share your thoughts about these features."
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/platform/assets/components/modelInfo/ModelInfoField.vue b/src/platform/assets/components/modelInfo/ModelInfoField.vue
index 34ff0a326..13a3206e7 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoField.vue
+++ b/src/platform/assets/components/modelInfo/ModelInfoField.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="flex flex-col gap-1 px-4 py-2 text-sm text-muted-foreground">
-    <span>{{ label }}</span>
+  <div class="flex flex-col gap-2 px-4 py-2 text-sm text-base-foreground">
+    <div class="flex items-center justify-between relative">
+      <span>{{ label }}</span>
+      <slot name="label-action" />
+    </div>
     <slot />
   </div>
 </template>
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts b/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts
index 89300617f..981c1a01e 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts
@@ -1,12 +1,18 @@
 import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 
 import ModelInfoPanel from './ModelInfoPanel.vue'
 
+vi.mock('@/composables/useCopyToClipboard', () => ({
+  useCopyToClipboard: () => ({
+    copyToClipboard: vi.fn()
+  })
+}))
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
index c69cb6429..834f33afa 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
@@ -10,17 +10,29 @@
         </span>
       </template>
       <ModelInfoField :label="t('assetBrowser.modelInfo.displayName')">
-        <EditableText
-          :model-value="displayName"
-          :is-editing="isEditingDisplayName"
-          :class="cn('break-all', !isImmutable && 'text-base-foreground')"
-          @dblclick="isEditingDisplayName = !isImmutable"
-          @edit="handleDisplayNameEdit"
-          @cancel="isEditingDisplayName = false"
-        />
+        <div class="group flex justify-between">
+          <EditableText
+            :model-value="displayName"
+            :is-editing="isEditingDisplayName"
+            :class="cn('break-all text-muted-foreground flex-auto')"
+            @dblclick="isEditingDisplayName = !isImmutable"
+            @edit="handleDisplayNameEdit"
+            @cancel="isEditingDisplayName = false"
+          />
+          <Button
+            v-if="!isImmutable && !isEditingDisplayName"
+            size="icon-sm"
+            variant="muted-textonly"
+            class="transition-opacity opacity-0 group-hover:opacity-100"
+            :aria-label="t('assetBrowser.modelInfo.editDisplayName')"
+            @click="isEditingDisplayName = !isImmutable"
+          >
+            <i class="icon-[lucide--square-pen] self-center size-4" />
+          </Button>
+        </div>
       </ModelInfoField>
       <ModelInfoField :label="t('assetBrowser.modelInfo.fileName')">
-        <span class="break-all">{{ asset.name }}</span>
+        <span class="break-all text-muted-foreground">{{ asset.name }}</span>
       </ModelInfoField>
       <ModelInfoField
         v-if="sourceUrl"
@@ -51,7 +63,7 @@
         </span>
       </template>
       <ModelInfoField :label="t('assetBrowser.modelInfo.modelType')">
-        <Select v-model="selectedModelType" :disabled="isImmutable">
+        <Select v-if="!isImmutable" v-model="selectedModelType">
           <SelectTrigger class="w-full">
             <SelectValue
               :placeholder="t('assetBrowser.modelInfo.selectModelType')"
@@ -67,6 +79,12 @@
             </SelectItem>
           </SelectContent>
         </Select>
+        <div v-else class="p-2 text-sm text-muted-foreground">
+          {{
+            modelTypes.find((o) => o.value === selectedModelType)?.name ??
+            t('assetBrowser.unknown')
+          }}
+        </div>
       </ModelInfoField>
       <ModelInfoField :label="t('assetBrowser.modelInfo.compatibleBaseModels')">
         <TagsInput
@@ -124,14 +142,31 @@
         v-if="triggerPhrases.length > 0"
         :label="t('assetBrowser.modelInfo.triggerPhrases')"
       >
-        <div class="flex flex-wrap gap-1">
-          <span
+        <template #label-action>
+          <Button
+            variant="muted-textonly"
+            size="icon-sm"
+            :title="t('g.copyAll')"
+            :aria-label="t('g.copyAll')"
+            class="p-0"
+            @click="copyToClipboard(triggerPhrases.join(', '))"
+          >
+            <i class="icon-[lucide--copy] size-4 min-w-4 min-h-4 opacity-60" />
+          </Button>
+        </template>
+        <div class="flex flex-wrap gap-1 pt-1">
+          <Button
             v-for="phrase in triggerPhrases"
             :key="phrase"
-            class="rounded px-2 py-0.5 text-xs"
+            variant="muted-textonly"
+            size="unset"
+            :title="t('g.copyToClipboard')"
+            class="text-pretty whitespace-normal text-left text-xs"
+            @click="copyToClipboard(phrase)"
           >
             {{ phrase }}
-          </span>
+            <i class="icon-[lucide--copy] size-4 min-w-4 min-h-4 opacity-60" />
+          </Button>
         </div>
       </ModelInfoField>
       <ModelInfoField
@@ -170,7 +205,9 @@ import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
+import Button from '@/components/ui/button/Button.vue'
 import Select from '@/components/ui/select/Select.vue'
 import SelectContent from '@/components/ui/select/SelectContent.vue'
 import SelectItem from '@/components/ui/select/SelectItem.vue'
@@ -201,6 +238,7 @@ import { cn } from '@/utils/tailwindUtil'
 import ModelInfoField from './ModelInfoField.vue'
 
 const { t } = useI18n()
+const { copyToClipboard } = useCopyToClipboard()
 
 const descriptionTextarea = useTemplateRef<HTMLTextAreaElement>(
   'descriptionTextarea'
@@ -219,6 +257,7 @@ const assetsStore = useAssetsStore()
 const { modelTypes } = useModelTypes()
 
 const pendingUpdates = ref<AssetUserMetadata>({})
+const pendingModelType = ref<string | undefined>(undefined)
 const isEditingDisplayName = ref(false)
 
 const isImmutable = computed(() => asset.is_immutable ?? true)
@@ -239,10 +278,17 @@ watch(
   }
 )
 
+watch(
+  () => asset.tags,
+  () => {
+    pendingModelType.value = undefined
+  }
+)
+
 const debouncedFlushMetadata = useDebounceFn(() => {
   if (isImmutable.value) return
   assetsStore.updateAssetMetadata(
-    asset.id,
+    asset,
     { ...(asset.user_metadata ?? {}), ...pendingUpdates.value },
     cacheKey
   )
@@ -267,7 +313,7 @@ const debouncedSaveModelType = useDebounceFn((newModelType: string) => {
   const newTags = asset.tags
     .filter((tag) => tag !== currentModelType)
     .concat(newModelType)
-  assetsStore.updateAssetTags(asset.id, newTags, cacheKey)
+  assetsStore.updateAssetTags(asset, newTags, cacheKey)
 }, 500)
 
 const baseModels = computed({
@@ -288,9 +334,11 @@ const userDescription = computed({
 })
 
 const selectedModelType = computed({
-  get: () => getAssetModelType(asset) ?? undefined,
+  get: () => pendingModelType.value ?? getAssetModelType(asset) ?? undefined,
   set: (value: string | undefined) => {
-    if (value) debouncedSaveModelType(value)
+    if (!value) return
+    pendingModelType.value = value
+    debouncedSaveModelType(value)
   }
 })
 </script>
diff --git a/src/platform/assets/schemas/assetSchema.ts b/src/platform/assets/schemas/assetSchema.ts
index f66d816d4..d6941e18c 100644
--- a/src/platform/assets/schemas/assetSchema.ts
+++ b/src/platform/assets/schemas/assetSchema.ts
@@ -106,6 +106,16 @@ const zAssetUserMetadata = z.object({
 
 export type AssetUserMetadata = z.infer<typeof zAssetUserMetadata>
 
+export const tagsOperationResultSchema = z.object({
+  total_tags: z.array(z.string()),
+  added: z.array(z.string()).optional(),
+  removed: z.array(z.string()).optional(),
+  already_present: z.array(z.string()).optional(),
+  not_present: z.array(z.string()).optional()
+})
+
+export type TagsOperationResult = z.infer<typeof tagsOperationResultSchema>
+
 // Legacy interface for backward compatibility (now aligned with Zod schema)
 export interface ModelFolderInfo {
   name: string
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index 61b6461ad..c3b150911 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -5,7 +5,8 @@ import { st } from '@/i18n'
 import {
   assetItemSchema,
   assetResponseSchema,
-  asyncUploadResponseSchema
+  asyncUploadResponseSchema,
+  tagsOperationResultSchema
 } from '@/platform/assets/schemas/assetSchema'
 import type {
   AssetItem,
@@ -14,7 +15,8 @@ import type {
   AssetUpdatePayload,
   AsyncUploadResponse,
   ModelFile,
-  ModelFolder
+  ModelFolder,
+  TagsOperationResult
 } from '@/platform/assets/schemas/assetSchema'
 import { api } from '@/scripts/api'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
@@ -471,6 +473,66 @@ function createAssetService() {
     return await res.json()
   }
 
+  /**
+   * Add tags to an asset
+   * @param id - The asset ID (UUID)
+   * @param tags - Tags to add
+   * @returns Promise<TagsOperationResult>
+   */
+  async function addAssetTags(
+    id: string,
+    tags: string[]
+  ): Promise<TagsOperationResult> {
+    const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}/tags`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tags })
+    })
+
+    if (!res.ok) {
+      throw new Error(
+        `Unable to add tags to asset ${id}: Server returned ${res.status}`
+      )
+    }
+
+    const result = await res.json()
+    const parseResult = tagsOperationResultSchema.safeParse(result)
+    if (!parseResult.success) {
+      throw fromZodError(parseResult.error)
+    }
+    return parseResult.data
+  }
+
+  /**
+   * Remove tags from an asset
+   * @param id - The asset ID (UUID)
+   * @param tags - Tags to remove
+   * @returns Promise<TagsOperationResult>
+   */
+  async function removeAssetTags(
+    id: string,
+    tags: string[]
+  ): Promise<TagsOperationResult> {
+    const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}/tags`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tags })
+    })
+
+    if (!res.ok) {
+      throw new Error(
+        `Unable to remove tags from asset ${id}: Server returned ${res.status}`
+      )
+    }
+
+    const result = await res.json()
+    const parseResult = tagsOperationResultSchema.safeParse(result)
+    if (!parseResult.success) {
+      throw fromZodError(parseResult.error)
+    }
+    return parseResult.data
+  }
+
   /**
    * Uploads an asset asynchronously using the /api/assets/download endpoint
    * Returns immediately with either the asset (if already exists) or a task to track
@@ -546,6 +608,8 @@ function createAssetService() {
     getAssetsByTag,
     deleteAsset,
     updateAsset,
+    addAssetTags,
+    removeAssetTags,
     getAssetMetadata,
     uploadAssetFromUrl,
     uploadAssetFromBase64,
diff --git a/src/platform/cloud/subscription/components/SubscribeButton.vue b/src/platform/cloud/subscription/components/SubscribeButton.vue
index 1cf5096ce..8b7f05e79 100644
--- a/src/platform/cloud/subscription/components/SubscribeButton.vue
+++ b/src/platform/cloud/subscription/components/SubscribeButton.vue
@@ -2,7 +2,7 @@
   <Button
     :size
     :loading="isLoading"
-    :disabled="isPolling"
+    :disabled="disabled || isPolling"
     variant="primary"
     :style="
       variant === 'gradient'
@@ -32,12 +32,14 @@ const {
   size = 'lg',
   fluid = true,
   variant = 'default',
-  label
+  label,
+  disabled = false
 } = defineProps<{
   label?: string
   size?: 'sm' | 'lg'
   variant?: 'default' | 'gradient'
   fluid?: boolean
+  disabled?: boolean
 }>()
 
 const emit = defineEmits<{
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index 7a521b504..e395cb7d1 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -17,208 +17,10 @@
         </div>
       </div>
 
-      <div class="grow overflow-auto">
-        <div class="rounded-2xl border border-interface-stroke p-6">
-          <div>
-            <div class="flex items-center justify-between gap-2">
-              <div class="flex flex-col gap-2">
-                <div class="text-sm font-bold text-text-primary">
-                  {{ subscriptionTierName }}
-                </div>
-                <div class="flex items-baseline gap-1 font-inter font-semibold">
-                  <span class="text-2xl">${{ tierPrice }}</span>
-                  <span class="text-base">{{
-                    $t('subscription.perMonth')
-                  }}</span>
-                </div>
-                <div
-                  v-if="isActiveSubscription"
-                  class="text-sm text-text-secondary"
-                >
-                  <template v-if="isCancelled">
-                    {{
-                      $t('subscription.expiresDate', {
-                        date: formattedEndDate
-                      })
-                    }}
-                  </template>
-                  <template v-else>
-                    {{
-                      $t('subscription.renewsDate', {
-                        date: formattedRenewalDate
-                      })
-                    }}
-                  </template>
-                </div>
-              </div>
-
-              <Button
-                v-if="isActiveSubscription"
-                variant="secondary"
-                class="ml-auto rounded-lg px-4 py-2 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
-                @click="
-                  async () => {
-                    await authActions.accessBillingPortal()
-                  }
-                "
-              >
-                {{ $t('subscription.manageSubscription') }}
-              </Button>
-              <Button
-                v-if="isActiveSubscription"
-                variant="primary"
-                class="rounded-lg px-4 py-2 text-sm font-normal text-text-primary"
-                @click="showSubscriptionDialog"
-              >
-                {{ $t('subscription.upgradePlan') }}
-              </Button>
-
-              <SubscribeButton
-                v-else
-                :label="$t('subscription.subscribeNow')"
-                size="sm"
-                :fluid="false"
-                class="text-xs"
-                @subscribed="handleRefresh"
-              />
-            </div>
-          </div>
-
-          <div class="flex flex-col lg:flex-row gap-6 pt-9">
-            <div class="flex flex-col shrink-0">
-              <div class="flex flex-col gap-3">
-                <div
-                  :class="
-                    cn(
-                      'relative flex flex-col gap-6 rounded-2xl p-5',
-                      'bg-modal-panel-background'
-                    )
-                  "
-                >
-                  <Button
-                    variant="muted-textonly"
-                    size="icon-sm"
-                    class="absolute top-4 right-4"
-                    :loading="isLoadingBalance"
-                    @click="handleRefresh"
-                  >
-                    <i class="pi pi-sync text-text-secondary text-sm" />
-                  </Button>
-
-                  <div class="flex flex-col gap-2">
-                    <div class="text-sm text-muted">
-                      {{ $t('subscription.totalCredits') }}
-                    </div>
-                    <Skeleton
-                      v-if="isLoadingBalance"
-                      width="8rem"
-                      height="2rem"
-                    />
-                    <div v-else class="text-2xl font-bold">
-                      {{ totalCredits }}
-                    </div>
-                  </div>
-
-                  <!-- Credit Breakdown -->
-                  <table class="text-sm text-muted">
-                    <tbody>
-                      <tr>
-                        <td class="pr-4 font-bold text-left align-middle">
-                          <Skeleton
-                            v-if="isLoadingBalance"
-                            width="5rem"
-                            height="1rem"
-                          />
-                          <span v-else>{{ includedCreditsDisplay }}</span>
-                        </td>
-                        <td class="align-middle" :title="creditsRemainingLabel">
-                          {{ creditsRemainingLabel }}
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="pr-4 font-bold text-left align-middle">
-                          <Skeleton
-                            v-if="isLoadingBalance"
-                            width="3rem"
-                            height="1rem"
-                          />
-                          <span v-else>{{ prepaidCredits }}</span>
-                        </td>
-                        <td
-                          class="align-middle"
-                          :title="$t('subscription.creditsYouveAdded')"
-                        >
-                          {{ $t('subscription.creditsYouveAdded') }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-
-                  <div class="flex items-center justify-between">
-                    <a
-                      :href="usageHistoryUrl"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-sm underline text-center text-muted"
-                    >
-                      {{ $t('subscription.viewUsageHistory') }}
-                    </a>
-                    <Button
-                      v-if="isActiveSubscription"
-                      variant="secondary"
-                      class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
-                      @click="handleAddApiCredits"
-                    >
-                      {{ $t('subscription.addCredits') }}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="flex flex-col gap-2">
-              <div class="text-sm text-text-primary">
-                {{ $t('subscription.yourPlanIncludes') }}
-              </div>
-
-              <div class="flex flex-col gap-0">
-                <div
-                  v-for="benefit in tierBenefits"
-                  :key="benefit.key"
-                  class="flex items-center gap-2 py-2"
-                >
-                  <i
-                    v-if="benefit.type === 'feature'"
-                    class="pi pi-check text-xs text-text-primary"
-                  />
-                  <span
-                    v-else-if="benefit.type === 'metric' && benefit.value"
-                    class="text-sm font-normal whitespace-nowrap text-text-primary"
-                  >
-                    {{ benefit.value }}
-                  </span>
-                  <span class="text-sm text-muted">
-                    {{ benefit.label }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- View More Details - Outside main content -->
-        <div class="flex items-center gap-2 py-4">
-          <i class="pi pi-external-link text-muted"></i>
-          <a
-            href="https://www.comfy.org/cloud/pricing"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-sm underline hover:opacity-80 text-muted"
-          >
-            {{ $t('subscription.viewMoreDetailsPlans') }}
-          </a>
-        </div>
-      </div>
+      <!-- Workspace mode: workspace-aware subscription content -->
+      <SubscriptionPanelContentWorkspace v-if="teamWorkspacesEnabled" />
+      <!-- Legacy mode: user-level subscription content -->
+      <SubscriptionPanelContentLegacy v-else />
 
       <div
         class="flex items-center justify-between border-t border-interface-stroke pt-3"
@@ -265,171 +67,32 @@
 </template>
 
 <script setup lang="ts">
-import Skeleton from 'primevue/skeleton'
 import TabPanel from 'primevue/tabpanel'
-import { computed, onBeforeUnmount, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { defineAsyncComponent } from 'vue'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
-import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import SubscriptionPanelContentLegacy from '@/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
-import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
-import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
-import {
-  DEFAULT_TIER_KEY,
-  TIER_TO_KEY,
-  getTierCredits,
-  getTierFeatures,
-  getTierPrice
-} from '@/platform/cloud/subscription/constants/tierPricing'
-import { cn } from '@/utils/tailwindUtil'
+import { isCloud } from '@/platform/distribution/types'
+
+const SubscriptionPanelContentWorkspace = defineAsyncComponent(
+  () =>
+    import('@/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue')
+)
+
+const { flags } = useFeatureFlags()
+const teamWorkspacesEnabled = isCloud && flags.teamWorkspacesEnabled
 
 const { buildDocsUrl, docsPaths } = useExternalLink()
-const authActions = useFirebaseAuthActions()
-const { t, n } = useI18n()
 
-const {
-  isActiveSubscription,
-  isCancelled,
-  formattedRenewalDate,
-  formattedEndDate,
-  subscriptionTier,
-  subscriptionTierName,
-  subscriptionStatus,
-  isYearlySubscription,
-  handleInvoiceHistory
-} = useSubscription()
+const { isActiveSubscription, handleInvoiceHistory } = useSubscription()
 
-const { show: showSubscriptionDialog } = useSubscriptionDialog()
-
-const tierKey = computed(() => {
-  const tier = subscriptionTier.value
-  if (!tier) return DEFAULT_TIER_KEY
-  return TIER_TO_KEY[tier] ?? DEFAULT_TIER_KEY
-})
-const tierPrice = computed(() =>
-  getTierPrice(tierKey.value, isYearlySubscription.value)
-)
-const usageHistoryUrl = computed(
-  () => `${getComfyPlatformBaseUrl()}/profile/usage`
-)
-
-const refillsDate = computed(() => {
-  if (!subscriptionStatus.value?.renewal_date) return ''
-  const date = new Date(subscriptionStatus.value.renewal_date)
-  const day = String(date.getDate()).padStart(2, '0')
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const year = String(date.getFullYear()).slice(-2)
-  return `${month}/${day}/${year}`
-})
-
-const creditsRemainingLabel = computed(() =>
-  isYearlySubscription.value
-    ? t('subscription.creditsRemainingThisYear', {
-        date: refillsDate.value
-      })
-    : t('subscription.creditsRemainingThisMonth', {
-        date: refillsDate.value
-      })
-)
-
-const planTotalCredits = computed(() => {
-  const credits = getTierCredits(tierKey.value)
-  const total = isYearlySubscription.value ? credits * 12 : credits
-  return n(total)
-})
-
-const includedCreditsDisplay = computed(
-  () => `${monthlyBonusCredits.value} / ${planTotalCredits.value}`
-)
-
-// Tier benefits for v-for loop
-type BenefitType = 'metric' | 'feature'
-
-interface Benefit {
-  key: string
-  type: BenefitType
-  label: string
-  value?: string
-}
-
-const tierBenefits = computed((): Benefit[] => {
-  const key = tierKey.value
-
-  const benefits: Benefit[] = [
-    {
-      key: 'maxDuration',
-      type: 'metric',
-      value: t(`subscription.maxDuration.${key}`),
-      label: t('subscription.maxDurationLabel')
-    },
-    {
-      key: 'gpu',
-      type: 'feature',
-      label: t('subscription.gpuLabel')
-    },
-    {
-      key: 'addCredits',
-      type: 'feature',
-      label: t('subscription.addCreditsLabel')
-    }
-  ]
-
-  if (getTierFeatures(key).customLoRAs) {
-    benefits.push({
-      key: 'customLoRAs',
-      type: 'feature',
-      label: t('subscription.customLoRAsLabel')
-    })
-  }
-
-  return benefits
-})
-
-const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
-  useSubscriptionCredits()
-
-const {
-  isLoadingSupport,
-  handleAddApiCredits,
-  handleMessageSupport,
-  handleRefresh,
-  handleLearnMoreClick
-} = useSubscriptionActions()
-
-// Focus-based polling: refresh balance when user returns from Stripe checkout
-const PENDING_TOPUP_KEY = 'pending_topup_timestamp'
-const TOPUP_EXPIRY_MS = 5 * 60 * 1000 // 5 minutes
-
-function handleWindowFocus() {
-  const timestampStr = localStorage.getItem(PENDING_TOPUP_KEY)
-  if (!timestampStr) return
-
-  const timestamp = parseInt(timestampStr, 10)
-
-  // Clear expired tracking (older than 5 minutes)
-  if (Date.now() - timestamp > TOPUP_EXPIRY_MS) {
-    localStorage.removeItem(PENDING_TOPUP_KEY)
-    return
-  }
-
-  // Refresh and clear tracking to prevent repeated calls
-  void handleRefresh()
-  localStorage.removeItem(PENDING_TOPUP_KEY)
-}
-
-onMounted(() => {
-  window.addEventListener('focus', handleWindowFocus)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('focus', handleWindowFocus)
-})
+const { isLoadingSupport, handleMessageSupport, handleLearnMoreClick } =
+  useSubscriptionActions()
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
@@ -438,9 +101,3 @@ const handleOpenPartnerNodesInfo = () => {
   )
 }
 </script>
-
-<style scoped>
-:deep(.bg-comfy-menu-secondary) {
-  background-color: transparent;
-}
-</style>
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue b/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
new file mode 100644
index 000000000..a6d5f063b
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
@@ -0,0 +1,357 @@
+<template>
+  <div class="grow overflow-auto">
+    <div class="rounded-2xl border border-interface-stroke p-6">
+      <div>
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex flex-col gap-2">
+            <div class="text-sm font-bold text-text-primary">
+              {{ subscriptionTierName }}
+            </div>
+            <div class="flex items-baseline gap-1 font-inter font-semibold">
+              <span class="text-2xl">${{ tierPrice }}</span>
+              <span class="text-base">{{ $t('subscription.perMonth') }}</span>
+            </div>
+            <div
+              v-if="isActiveSubscription"
+              class="text-sm text-text-secondary"
+            >
+              <template v-if="isCancelled">
+                {{
+                  $t('subscription.expiresDate', {
+                    date: formattedEndDate
+                  })
+                }}
+              </template>
+              <template v-else>
+                {{
+                  $t('subscription.renewsDate', {
+                    date: formattedRenewalDate
+                  })
+                }}
+              </template>
+            </div>
+          </div>
+
+          <Button
+            v-if="isActiveSubscription"
+            variant="secondary"
+            class="ml-auto rounded-lg px-4 py-2 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+            @click="
+              async () => {
+                await authActions.accessBillingPortal()
+              }
+            "
+          >
+            {{ $t('subscription.manageSubscription') }}
+          </Button>
+          <Button
+            v-if="isActiveSubscription"
+            variant="primary"
+            class="rounded-lg px-4 py-2 text-sm font-normal text-text-primary"
+            @click="showSubscriptionDialog"
+          >
+            {{ $t('subscription.upgradePlan') }}
+          </Button>
+
+          <SubscribeButton
+            v-if="!isActiveSubscription"
+            :label="$t('subscription.subscribeNow')"
+            size="sm"
+            :fluid="false"
+            class="text-xs"
+            @subscribed="handleRefresh"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col lg:flex-row gap-6 pt-9">
+        <div class="flex flex-col shrink-0">
+          <div class="flex flex-col gap-3">
+            <div
+              :class="
+                cn(
+                  'relative flex flex-col gap-6 rounded-2xl p-5',
+                  'bg-modal-panel-background'
+                )
+              "
+            >
+              <Button
+                variant="muted-textonly"
+                size="icon-sm"
+                class="absolute top-4 right-4"
+                :loading="isLoadingBalance"
+                @click="handleRefresh"
+              >
+                <i class="pi pi-sync text-text-secondary text-sm" />
+              </Button>
+
+              <div class="flex flex-col gap-2">
+                <div class="text-sm text-muted">
+                  {{ $t('subscription.totalCredits') }}
+                </div>
+                <Skeleton v-if="isLoadingBalance" width="8rem" height="2rem" />
+                <div v-else class="text-2xl font-bold">
+                  {{ totalCredits }}
+                </div>
+              </div>
+
+              <!-- Credit Breakdown -->
+              <table class="text-sm text-muted">
+                <tbody>
+                  <tr>
+                    <td class="pr-4 font-bold text-left align-middle">
+                      <Skeleton
+                        v-if="isLoadingBalance"
+                        width="5rem"
+                        height="1rem"
+                      />
+                      <span v-else>{{ includedCreditsDisplay }}</span>
+                    </td>
+                    <td class="align-middle" :title="creditsRemainingLabel">
+                      {{ creditsRemainingLabel }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="pr-4 font-bold text-left align-middle">
+                      <Skeleton
+                        v-if="isLoadingBalance"
+                        width="3rem"
+                        height="1rem"
+                      />
+                      <span v-else>{{ prepaidCredits }}</span>
+                    </td>
+                    <td
+                      class="align-middle"
+                      :title="$t('subscription.creditsYouveAdded')"
+                    >
+                      {{ $t('subscription.creditsYouveAdded') }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <div class="flex items-center justify-between">
+                <a
+                  href="https://platform.comfy.org/profile/usage"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-sm underline text-center text-muted"
+                >
+                  {{ $t('subscription.viewUsageHistory') }}
+                </a>
+                <Button
+                  v-if="isActiveSubscription"
+                  variant="secondary"
+                  class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                  @click="handleAddApiCredits"
+                >
+                  {{ $t('subscription.addCredits') }}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <div class="text-sm text-text-primary">
+            {{ $t('subscription.yourPlanIncludes') }}
+          </div>
+
+          <div class="flex flex-col gap-0">
+            <div
+              v-for="benefit in tierBenefits"
+              :key="benefit.key"
+              class="flex items-center gap-2 py-2"
+            >
+              <i
+                v-if="benefit.type === 'feature'"
+                class="pi pi-check text-xs text-text-primary"
+              />
+              <span
+                v-else-if="benefit.type === 'metric' && benefit.value"
+                class="text-sm font-normal whitespace-nowrap text-text-primary"
+              >
+                {{ benefit.value }}
+              </span>
+              <span class="text-sm text-muted">
+                {{ benefit.label }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- View More Details - Outside main content -->
+    <div class="flex items-center gap-2 py-4">
+      <i class="pi pi-external-link text-muted"></i>
+      <a
+        href="https://www.comfy.org/cloud/pricing"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-sm underline hover:opacity-80 text-muted"
+      >
+        {{ $t('subscription.viewMoreDetailsPlans') }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
+import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
+import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import {
+  DEFAULT_TIER_KEY,
+  TIER_TO_KEY,
+  getTierCredits,
+  getTierFeatures,
+  getTierPrice
+} from '@/platform/cloud/subscription/constants/tierPricing'
+import { cn } from '@/utils/tailwindUtil'
+
+const authActions = useFirebaseAuthActions()
+const { t, n } = useI18n()
+
+const {
+  isActiveSubscription,
+  isCancelled,
+  formattedRenewalDate,
+  formattedEndDate,
+  subscriptionTier,
+  subscriptionTierName,
+  subscriptionStatus,
+  isYearlySubscription
+} = useSubscription()
+
+const { show: showSubscriptionDialog } = useSubscriptionDialog()
+
+const tierKey = computed(() => {
+  const tier = subscriptionTier.value
+  if (!tier) return DEFAULT_TIER_KEY
+  return TIER_TO_KEY[tier] ?? DEFAULT_TIER_KEY
+})
+const tierPrice = computed(() =>
+  getTierPrice(tierKey.value, isYearlySubscription.value)
+)
+
+const refillsDate = computed(() => {
+  if (!subscriptionStatus.value?.renewal_date) return ''
+  const date = new Date(subscriptionStatus.value.renewal_date)
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = String(date.getFullYear()).slice(-2)
+  return `${month}/${day}/${year}`
+})
+
+const creditsRemainingLabel = computed(() =>
+  isYearlySubscription.value
+    ? t('subscription.creditsRemainingThisYear', {
+        date: refillsDate.value
+      })
+    : t('subscription.creditsRemainingThisMonth', {
+        date: refillsDate.value
+      })
+)
+
+const planTotalCredits = computed(() => {
+  const credits = getTierCredits(tierKey.value)
+  const total = isYearlySubscription.value ? credits * 12 : credits
+  return n(total)
+})
+
+const includedCreditsDisplay = computed(
+  () => `${monthlyBonusCredits.value} / ${planTotalCredits.value}`
+)
+
+// Tier benefits for v-for loop
+type BenefitType = 'metric' | 'feature'
+
+interface Benefit {
+  key: string
+  type: BenefitType
+  label: string
+  value?: string
+}
+
+const tierBenefits = computed((): Benefit[] => {
+  const key = tierKey.value
+
+  const benefits: Benefit[] = [
+    {
+      key: 'maxDuration',
+      type: 'metric',
+      value: t(`subscription.maxDuration.${key}`),
+      label: t('subscription.maxDurationLabel')
+    },
+    {
+      key: 'gpu',
+      type: 'feature',
+      label: t('subscription.gpuLabel')
+    },
+    {
+      key: 'addCredits',
+      type: 'feature',
+      label: t('subscription.addCreditsLabel')
+    }
+  ]
+
+  if (getTierFeatures(key).customLoRAs) {
+    benefits.push({
+      key: 'customLoRAs',
+      type: 'feature',
+      label: t('subscription.customLoRAsLabel')
+    })
+  }
+
+  return benefits
+})
+
+const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
+  useSubscriptionCredits()
+
+const { handleAddApiCredits, handleRefresh } = useSubscriptionActions()
+
+// Focus-based polling: refresh balance when user returns from Stripe checkout
+const PENDING_TOPUP_KEY = 'pending_topup_timestamp'
+const TOPUP_EXPIRY_MS = 5 * 60 * 1000 // 5 minutes
+
+function handleWindowFocus() {
+  const timestampStr = localStorage.getItem(PENDING_TOPUP_KEY)
+  if (!timestampStr) return
+
+  const timestamp = parseInt(timestampStr, 10)
+
+  // Clear expired tracking (older than 5 minutes)
+  if (Date.now() - timestamp > TOPUP_EXPIRY_MS) {
+    localStorage.removeItem(PENDING_TOPUP_KEY)
+    return
+  }
+
+  // Refresh and clear tracking to prevent repeated calls
+  void handleRefresh()
+  localStorage.removeItem(PENDING_TOPUP_KEY)
+}
+
+onMounted(() => {
+  window.addEventListener('focus', handleWindowFocus)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('focus', handleWindowFocus)
+})
+</script>
+
+<style scoped>
+:deep(.bg-comfy-menu-secondary) {
+  background-color: transparent;
+}
+</style>
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue b/src/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue
new file mode 100644
index 000000000..7605849e8
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="grow overflow-auto">
+    <div class="rounded-2xl border border-interface-stroke p-6">
+      <div>
+        <div class="flex items-center justify-between gap-2">
+          <!-- OWNER Unsubscribed State -->
+          <template v-if="isOwnerUnsubscribed">
+            <div class="flex flex-col gap-2">
+              <div class="text-sm font-bold text-text-primary">
+                {{ $t('subscription.workspaceNotSubscribed') }}
+              </div>
+              <div class="text-sm text-text-secondary">
+                {{ $t('subscription.subscriptionRequiredMessage') }}
+              </div>
+            </div>
+            <Button
+              variant="primary"
+              class="ml-auto rounded-lg px-4 py-2 text-sm font-normal"
+              @click="handleSubscribeWorkspace"
+            >
+              {{ $t('subscription.subscribeNow') }}
+            </Button>
+          </template>
+
+          <!-- MEMBER View - read-only, no subscription data yet -->
+          <template v-else-if="isMemberView">
+            <div class="flex flex-col gap-2">
+              <div class="text-sm font-bold text-text-primary">
+                {{ $t('subscription.workspaceNotSubscribed') }}
+              </div>
+              <div class="text-sm text-text-secondary">
+                {{ $t('subscription.contactOwnerToSubscribe') }}
+              </div>
+            </div>
+          </template>
+
+          <!-- Normal Subscribed State (Owner with subscription) -->
+          <template v-else>
+            <div class="flex flex-col gap-2">
+              <div class="text-sm font-bold text-text-primary">
+                {{ subscriptionTierName }}
+              </div>
+              <div class="flex items-baseline gap-1 font-inter font-semibold">
+                <span class="text-2xl">${{ tierPrice }}</span>
+                <span class="text-base">{{ $t('subscription.perMonth') }}</span>
+              </div>
+              <div
+                v-if="isActiveSubscription"
+                class="text-sm text-text-secondary"
+              >
+                <template v-if="isCancelled">
+                  {{
+                    $t('subscription.expiresDate', {
+                      date: formattedEndDate
+                    })
+                  }}
+                </template>
+                <template v-else>
+                  {{
+                    $t('subscription.renewsDate', {
+                      date: formattedRenewalDate
+                    })
+                  }}
+                </template>
+              </div>
+            </div>
+
+            <template
+              v-if="isActiveSubscription && permissions.canManageSubscription"
+            >
+              <Button
+                variant="secondary"
+                class="ml-auto rounded-lg px-4 py-2 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                @click="
+                  async () => {
+                    await authActions.accessBillingPortal()
+                  }
+                "
+              >
+                {{ $t('subscription.managePayment') }}
+              </Button>
+              <Button
+                variant="primary"
+                class="rounded-lg px-4 py-2 text-sm font-normal text-text-primary"
+                @click="showSubscriptionDialog"
+              >
+                {{ $t('subscription.upgradePlan') }}
+              </Button>
+              <Button
+                v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+                variant="muted-textonly"
+                size="icon"
+                :aria-label="$t('g.moreOptions')"
+                @click="planMenu?.toggle($event)"
+              >
+                <i class="pi pi-ellipsis-h" />
+              </Button>
+              <Menu ref="planMenu" :model="planMenuItems" :popup="true" />
+            </template>
+          </template>
+        </div>
+      </div>
+
+      <div class="flex flex-col lg:flex-row gap-6 pt-9">
+        <div class="flex flex-col shrink-0">
+          <div class="flex flex-col gap-3">
+            <div
+              :class="
+                cn(
+                  'relative flex flex-col gap-6 rounded-2xl p-5',
+                  'bg-modal-panel-background'
+                )
+              "
+            >
+              <Button
+                variant="muted-textonly"
+                size="icon-sm"
+                class="absolute top-4 right-4"
+                :loading="isLoadingBalance"
+                @click="handleRefresh"
+              >
+                <i class="pi pi-sync text-text-secondary text-sm" />
+              </Button>
+
+              <div class="flex flex-col gap-2">
+                <div class="text-sm text-muted">
+                  {{ $t('subscription.totalCredits') }}
+                </div>
+                <Skeleton v-if="isLoadingBalance" width="8rem" height="2rem" />
+                <div v-else class="text-2xl font-bold">
+                  {{ showZeroState ? '0' : totalCredits }}
+                </div>
+              </div>
+
+              <!-- Credit Breakdown -->
+              <table class="text-sm text-muted">
+                <tbody>
+                  <tr>
+                    <td class="pr-4 font-bold text-left align-middle">
+                      <Skeleton
+                        v-if="isLoadingBalance"
+                        width="5rem"
+                        height="1rem"
+                      />
+                      <span v-else>{{
+                        showZeroState ? '0 / 0' : includedCreditsDisplay
+                      }}</span>
+                    </td>
+                    <td class="align-middle" :title="creditsRemainingLabel">
+                      {{ creditsRemainingLabel }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="pr-4 font-bold text-left align-middle">
+                      <Skeleton
+                        v-if="isLoadingBalance"
+                        width="3rem"
+                        height="1rem"
+                      />
+                      <span v-else>{{
+                        showZeroState ? '0' : prepaidCredits
+                      }}</span>
+                    </td>
+                    <td
+                      class="align-middle"
+                      :title="$t('subscription.creditsYouveAdded')"
+                    >
+                      {{ $t('subscription.creditsYouveAdded') }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <div class="flex items-center justify-between">
+                <a
+                  href="https://platform.comfy.org/profile/usage"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-sm underline text-center text-muted"
+                >
+                  {{ $t('subscription.viewUsageHistory') }}
+                </a>
+                <Button
+                  v-if="isActiveSubscription && !showZeroState"
+                  variant="secondary"
+                  class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                  @click="handleAddApiCredits"
+                >
+                  {{ $t('subscription.addCredits') }}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <div class="text-sm text-text-primary">
+            {{ $t('subscription.yourPlanIncludes') }}
+          </div>
+
+          <div class="flex flex-col gap-0">
+            <div
+              v-for="benefit in tierBenefits"
+              :key="benefit.key"
+              class="flex items-center gap-2 py-2"
+            >
+              <i
+                v-if="benefit.type === 'feature'"
+                class="pi pi-check text-xs text-text-primary"
+              />
+              <span
+                v-else-if="benefit.type === 'metric' && benefit.value"
+                class="text-sm font-normal whitespace-nowrap text-text-primary"
+              >
+                {{ benefit.value }}
+              </span>
+              <span class="text-sm text-muted">
+                {{ benefit.label }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- View More Details - Outside main content -->
+    <div class="flex items-center gap-2 py-4">
+      <i class="pi pi-external-link text-muted"></i>
+      <a
+        href="https://www.comfy.org/cloud/pricing"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-sm underline hover:opacity-80 text-muted"
+      >
+        {{ $t('subscription.viewMoreDetailsPlans') }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Menu from 'primevue/menu'
+import Skeleton from 'primevue/skeleton'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
+import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
+import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import {
+  DEFAULT_TIER_KEY,
+  TIER_TO_KEY,
+  getTierCredits,
+  getTierFeatures,
+  getTierPrice
+} from '@/platform/cloud/subscription/constants/tierPricing'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const authActions = useFirebaseAuthActions()
+const workspaceStore = useTeamWorkspaceStore()
+const { isWorkspaceSubscribed } = storeToRefs(workspaceStore)
+const { subscribeWorkspace } = workspaceStore
+const { permissions, workspaceRole } = useWorkspaceUI()
+const { t, n } = useI18n()
+
+// OWNER with unsubscribed workspace - can see subscribe button
+const isOwnerUnsubscribed = computed(
+  () => workspaceRole.value === 'owner' && !isWorkspaceSubscribed.value
+)
+
+// MEMBER view - members can't manage subscription, show read-only zero state
+const isMemberView = computed(() => !permissions.value.canManageSubscription)
+
+// Show zero state for credits (no real billing data yet)
+const showZeroState = computed(
+  () => isOwnerUnsubscribed.value || isMemberView.value
+)
+
+// Demo: Subscribe workspace to PRO monthly plan
+function handleSubscribeWorkspace() {
+  subscribeWorkspace('PRO_MONTHLY')
+}
+
+const {
+  isActiveSubscription,
+  isCancelled,
+  formattedRenewalDate,
+  formattedEndDate,
+  subscriptionTier,
+  subscriptionTierName,
+  subscriptionStatus,
+  isYearlySubscription
+} = useSubscription()
+
+const { show: showSubscriptionDialog } = useSubscriptionDialog()
+
+const planMenu = ref<InstanceType<typeof Menu> | null>(null)
+
+const planMenuItems = computed(() => [
+  {
+    label: t('subscription.cancelSubscription'),
+    icon: 'pi pi-times',
+    command: async () => {
+      await authActions.accessBillingPortal()
+    }
+  }
+])
+
+const tierKey = computed(() => {
+  const tier = subscriptionTier.value
+  if (!tier) return DEFAULT_TIER_KEY
+  return TIER_TO_KEY[tier] ?? DEFAULT_TIER_KEY
+})
+const tierPrice = computed(() =>
+  getTierPrice(tierKey.value, isYearlySubscription.value)
+)
+
+const refillsDate = computed(() => {
+  if (!subscriptionStatus.value?.renewal_date) return ''
+  const date = new Date(subscriptionStatus.value.renewal_date)
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = String(date.getFullYear()).slice(-2)
+  return `${month}/${day}/${year}`
+})
+
+const creditsRemainingLabel = computed(() =>
+  isYearlySubscription.value
+    ? t('subscription.creditsRemainingThisYear', {
+        date: refillsDate.value
+      })
+    : t('subscription.creditsRemainingThisMonth', {
+        date: refillsDate.value
+      })
+)
+
+const planTotalCredits = computed(() => {
+  const credits = getTierCredits(tierKey.value)
+  const total = isYearlySubscription.value ? credits * 12 : credits
+  return n(total)
+})
+
+const includedCreditsDisplay = computed(
+  () => `${monthlyBonusCredits.value} / ${planTotalCredits.value}`
+)
+
+// Tier benefits for v-for loop
+type BenefitType = 'metric' | 'feature'
+
+interface Benefit {
+  key: string
+  type: BenefitType
+  label: string
+  value?: string
+}
+
+const tierBenefits = computed((): Benefit[] => {
+  const key = tierKey.value
+
+  const benefits: Benefit[] = [
+    {
+      key: 'maxDuration',
+      type: 'metric',
+      value: t(`subscription.maxDuration.${key}`),
+      label: t('subscription.maxDurationLabel')
+    },
+    {
+      key: 'gpu',
+      type: 'feature',
+      label: t('subscription.gpuLabel')
+    },
+    {
+      key: 'addCredits',
+      type: 'feature',
+      label: t('subscription.addCreditsLabel')
+    }
+  ]
+
+  if (getTierFeatures(key).customLoRAs) {
+    benefits.push({
+      key: 'customLoRAs',
+      type: 'feature',
+      label: t('subscription.customLoRAsLabel')
+    })
+  }
+
+  return benefits
+})
+
+const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
+  useSubscriptionCredits()
+
+const { handleAddApiCredits, handleRefresh } = useSubscriptionActions()
+
+// Focus-based polling: refresh balance when user returns from Stripe checkout
+const PENDING_TOPUP_KEY = 'pending_topup_timestamp'
+const TOPUP_EXPIRY_MS = 5 * 60 * 1000 // 5 minutes
+
+function handleWindowFocus() {
+  const timestampStr = localStorage.getItem(PENDING_TOPUP_KEY)
+  if (!timestampStr) return
+
+  const timestamp = parseInt(timestampStr, 10)
+
+  // Clear expired tracking (older than 5 minutes)
+  if (Date.now() - timestamp > TOPUP_EXPIRY_MS) {
+    localStorage.removeItem(PENDING_TOPUP_KEY)
+    return
+  }
+
+  // Refresh and clear tracking to prevent repeated calls
+  void handleRefresh()
+  localStorage.removeItem(PENDING_TOPUP_KEY)
+}
+
+onMounted(() => {
+  window.addEventListener('focus', handleWindowFocus)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('focus', handleWindowFocus)
+})
+</script>
+
+<style scoped>
+:deep(.bg-comfy-menu-secondary) {
+  background-color: transparent;
+}
+</style>
diff --git a/src/platform/cloud/subscription/composables/useSubscription.test.ts b/src/platform/cloud/subscription/composables/useSubscription.test.ts
index 9409709d3..ffa370a90 100644
--- a/src/platform/cloud/subscription/composables/useSubscription.test.ts
+++ b/src/platform/cloud/subscription/composables/useSubscription.test.ts
@@ -64,7 +64,7 @@ vi.mock('@/services/dialogService', () => ({
 
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({
-    getAuthHeader: mockGetAuthHeader
+    getFirebaseAuthHeader: mockGetAuthHeader
   })),
   FirebaseAuthStoreError: class extends Error {}
 }))
diff --git a/src/platform/cloud/subscription/composables/useSubscription.ts b/src/platform/cloud/subscription/composables/useSubscription.ts
index e80c3642e..f5948ee69 100644
--- a/src/platform/cloud/subscription/composables/useSubscription.ts
+++ b/src/platform/cloud/subscription/composables/useSubscription.ts
@@ -38,7 +38,7 @@ function useSubscriptionInternal() {
   const { reportError, accessBillingPortal } = useFirebaseAuthActions()
   const { showSubscriptionRequiredDialog } = useDialogService()
 
-  const { getAuthHeader } = useFirebaseAuthStore()
+  const { getFirebaseAuthHeader } = useFirebaseAuthStore()
   const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
   const { isLoggedIn } = useCurrentUser()
@@ -168,7 +168,7 @@ function useSubscriptionInternal() {
    * @returns Subscription status or null if no subscription exists
    */
   async function fetchSubscriptionStatus(): Promise<CloudSubscriptionStatusResponse | null> {
-    const authHeader = await getAuthHeader()
+    const authHeader = await getFirebaseAuthHeader()
     if (!authHeader) {
       throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
     }
@@ -217,7 +217,7 @@ function useSubscriptionInternal() {
 
   const initiateSubscriptionCheckout =
     async (): Promise<CloudSubscriptionCheckoutResponse> => {
-      const authHeader = await getAuthHeader()
+      const authHeader = await getFirebaseAuthHeader()
       if (!authHeader) {
         throw new FirebaseAuthStoreError(
           t('toastMessages.userNotAuthenticated')
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index 13da10437..628301735 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -1,6 +1,18 @@
 <template>
-  <div class="settings-container">
-    <ScrollPanel class="settings-sidebar w-48 shrink-0 p-2 2xl:w-64">
+  <div
+    :class="
+      teamWorkspacesEnabled
+        ? 'flex h-[80vh] w-full overflow-hidden'
+        : 'settings-container'
+    "
+  >
+    <ScrollPanel
+      :class="
+        teamWorkspacesEnabled
+          ? 'w-48 shrink-0 p-2 2xl:w-64'
+          : 'settings-sidebar w-48 shrink-0 p-2 2xl:w-64'
+      "
+    >
       <SearchBox
         v-model:model-value="searchQuery"
         class="settings-search-box mb-2 w-full"
@@ -20,16 +32,40 @@
           (option: SettingTreeNode) =>
             !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
         "
-        class="w-full border-none"
+        :class="
+          teamWorkspacesEnabled
+            ? 'w-full border-none bg-transparent'
+            : 'w-full border-none'
+        "
       >
-        <template #optiongroup>
+        <!-- Workspace mode: custom group headers -->
+        <template v-if="teamWorkspacesEnabled" #optiongroup="{ option }">
+          <h3 class="text-xs font-semibold uppercase text-muted m-0 pt-6 pb-2">
+            {{ option.translatedLabel ?? option.label }}
+          </h3>
+        </template>
+        <!-- Legacy mode: divider between groups -->
+        <template v-else #optiongroup>
           <Divider class="my-0" />
         </template>
+        <!-- Workspace mode: custom workspace item -->
+        <template v-if="teamWorkspacesEnabled" #option="{ option }">
+          <WorkspaceSidebarItem v-if="option.key === 'workspace'" />
+          <span v-else>{{ option.translatedLabel }}</span>
+        </template>
       </Listbox>
     </ScrollPanel>
     <Divider layout="vertical" class="mx-1 hidden md:flex 2xl:mx-4" />
     <Divider layout="horizontal" class="flex md:hidden" />
-    <Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
+    <Tabs
+      :value="tabValue"
+      :lazy="true"
+      :class="
+        teamWorkspacesEnabled
+          ? 'h-full flex-1 overflow-x-auto'
+          : 'settings-content h-full w-full'
+      "
+    >
       <TabPanels class="settings-tab-panels h-full w-full pr-0">
         <PanelTemplate value="Search Results">
           <SettingsPanel :setting-groups="searchResults" />
@@ -48,7 +84,7 @@
         </PanelTemplate>
 
         <Suspense v-for="panel in panels" :key="panel.node.key">
-          <component :is="panel.component" />
+          <component :is="panel.component" v-bind="panel.props" />
           <template #fallback>
             <div>{{ $t('g.loadingPanel', { panel: panel.node.label }) }}</div>
           </template>
@@ -69,7 +105,10 @@ import { computed, watch } from 'vue'
 import SearchBox from '@/components/common/SearchBox.vue'
 import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
 import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
+import WorkspaceSidebarItem from '@/components/dialog/content/setting/WorkspaceSidebarItem.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
 import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
 import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
 import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
@@ -86,8 +125,15 @@ const { defaultPanel } = defineProps<{
     | 'server-config'
     | 'user'
     | 'credits'
+    | 'subscription'
+    | 'workspace'
 }>()
 
+const { flags } = useFeatureFlags()
+const teamWorkspacesEnabled = computed(
+  () => isCloud && flags.teamWorkspacesEnabled
+)
+
 const {
   activeCategory,
   defaultCategory,
@@ -162,6 +208,7 @@ watch(activeCategory, (_, oldValue) => {
 </style>
 
 <style scoped>
+/* Legacy mode styles (when teamWorkspacesEnabled is false) */
 .settings-container {
   display: flex;
   height: 70vh;
@@ -190,7 +237,7 @@ watch(activeCategory, (_, oldValue) => {
   }
 }
 
-/* Hide the first group separator */
+/* Hide the first group separator in legacy mode */
 .settings-sidebar :deep(.p-listbox-option-group:nth-child(1)) {
   display: none;
 }
diff --git a/src/platform/settings/composables/useSettingUI.ts b/src/platform/settings/composables/useSettingUI.ts
index 79a54fba4..3b4fc44a0 100644
--- a/src/platform/settings/composables/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -3,19 +3,21 @@ import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'
-import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 
 interface SettingPanelItem {
   node: SettingTreeNode
   component: Component
+  props?: Record<string, unknown>
 }
 
 export function useSettingUI(
@@ -27,15 +29,21 @@ export function useSettingUI(
     | 'user'
     | 'credits'
     | 'subscription'
+    | 'workspace'
 ) {
   const { t } = useI18n()
   const { isLoggedIn } = useCurrentUser()
   const settingStore = useSettingStore()
   const activeCategory = ref<SettingTreeNode | null>(null)
 
+  const { flags } = useFeatureFlags()
   const { shouldRenderVueNodes } = useVueFeatureFlags()
   const { isActiveSubscription } = useSubscription()
 
+  const teamWorkspacesEnabled = computed(
+    () => isCloud && flags.teamWorkspacesEnabled
+  )
+
   const settingRoot = computed<SettingTreeNode>(() => {
     const root = buildTree(
       Object.values(settingStore.settingsById).filter(
@@ -64,6 +72,33 @@ export function useSettingUI(
     () => settingRoot.value.children ?? []
   )
 
+  // Core setting categories (built-in to ComfyUI) in display order
+  // 'Other' includes floating settings that don't have a specific category
+  const CORE_CATEGORIES_ORDER = [
+    'Comfy',
+    'LiteGraph',
+    'Appearance',
+    '3D',
+    'Mask Editor',
+    'Other'
+  ]
+  const CORE_CATEGORIES = new Set(CORE_CATEGORIES_ORDER)
+
+  const coreSettingCategories = computed<SettingTreeNode[]>(() => {
+    const categories = settingCategories.value.filter((node) =>
+      CORE_CATEGORIES.has(node.label)
+    )
+    return categories.sort(
+      (a, b) =>
+        CORE_CATEGORIES_ORDER.indexOf(a.label) -
+        CORE_CATEGORIES_ORDER.indexOf(b.label)
+    )
+  })
+
+  const customNodeSettingCategories = computed<SettingTreeNode[]>(() =>
+    settingCategories.value.filter((node) => !CORE_CATEGORIES.has(node.label))
+  )
+
   // Define panel items
   const aboutPanel: SettingPanelItem = {
     node: {
@@ -118,6 +153,22 @@ export function useSettingUI(
     )
   }
 
+  // Workspace panel: only available on cloud with team workspaces enabled
+  const workspacePanel: SettingPanelItem = {
+    node: {
+      key: 'workspace',
+      label: 'Workspace',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/WorkspacePanel.vue')
+    )
+  }
+
+  const shouldShowWorkspacePanel = computed(
+    () => teamWorkspacesEnabled.value && isLoggedIn.value
+  )
+
   const keybindingPanel: SettingPanelItem = {
     node: {
       key: 'keybinding',
@@ -156,13 +207,14 @@ export function useSettingUI(
       aboutPanel,
       creditsPanel,
       userPanel,
+      ...(shouldShowWorkspacePanel.value ? [workspacePanel] : []),
       keybindingPanel,
       extensionPanel,
       ...(isElectron() ? [serverConfigPanel] : []),
       ...(shouldShowPlanCreditsPanel.value && subscriptionPanel
         ? [subscriptionPanel]
         : [])
-    ].filter((panel) => panel.component)
+    ].filter((panel) => panel !== null && panel.component)
   )
 
   /**
@@ -186,7 +238,47 @@ export function useSettingUI(
     )
   })
 
-  const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() => [
+  // Sidebar structure when team workspaces is enabled
+  const workspaceMenuTreeNodes = computed<SettingTreeNode[]>(() => [
+    // Workspace settings
+    translateCategory({
+      key: 'workspace',
+      label: 'Workspace',
+      children: [
+        ...(shouldShowWorkspacePanel.value ? [workspacePanel.node] : []),
+        ...(isLoggedIn.value &&
+        !(isCloud && window.__CONFIG__?.subscription_required)
+          ? [creditsPanel.node]
+          : [])
+      ].map(translateCategory)
+    }),
+    // General settings - Profile + all core settings + special panels
+    translateCategory({
+      key: 'general',
+      label: 'General',
+      children: [
+        translateCategory(userPanel.node),
+        ...coreSettingCategories.value.map(translateCategory),
+        translateCategory(keybindingPanel.node),
+        translateCategory(extensionPanel.node),
+        translateCategory(aboutPanel.node),
+        ...(isElectron() ? [translateCategory(serverConfigPanel.node)] : [])
+      ]
+    }),
+    // Custom node settings (only shown if custom nodes have registered settings)
+    ...(customNodeSettingCategories.value.length > 0
+      ? [
+          translateCategory({
+            key: 'other',
+            label: 'Other',
+            children: customNodeSettingCategories.value.map(translateCategory)
+          })
+        ]
+      : [])
+  ])
+
+  // Sidebar structure when team workspaces is disabled (legacy)
+  const legacyMenuTreeNodes = computed<SettingTreeNode[]>(() => [
     // Account settings - show different panels based on distribution and auth state
     {
       key: 'account',
@@ -223,6 +315,12 @@ export function useSettingUI(
     }
   ])
 
+  const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() =>
+    teamWorkspacesEnabled.value
+      ? workspaceMenuTreeNodes.value
+      : legacyMenuTreeNodes.value
+  )
+
   onMounted(() => {
     activeCategory.value = defaultCategory.value
   })
diff --git a/src/platform/support/config.ts b/src/platform/support/config.ts
index 584518712..b93690c8a 100644
--- a/src/platform/support/config.ts
+++ b/src/platform/support/config.ts
@@ -1,9 +1,9 @@
-import { isCloud } from '@/platform/distribution/types'
+import { isCloud, isNightly } from '@/platform/distribution/types'
 
 /**
  * Zendesk ticket form field IDs.
  */
-const ZENDESK_FIELDS = {
+export const ZENDESK_FIELDS = {
   /** Distribution tag (cloud vs OSS) */
   DISTRIBUTION: 'tf_42243568391700',
   /** User email (anonymous requester) */
@@ -14,6 +14,16 @@ const ZENDESK_FIELDS = {
   USER_ID: 'tf_42515251051412'
 } as const
 
+/**
+ * Gets the distribution identifier for Zendesk tracking.
+ * Helps distinguish feedback from different build types.
+ */
+export function getDistribution(): 'ccloud' | 'oss-nightly' | 'oss' {
+  if (isCloud) return 'ccloud'
+  if (isNightly) return 'oss-nightly'
+  return 'oss'
+}
+
 const SUPPORT_BASE_URL = 'https://support.comfy.org/hc/en-us/requests/new'
 
 /**
@@ -28,7 +38,7 @@ export function buildSupportUrl(params?: {
   userId?: string | null
 }): string {
   const searchParams = new URLSearchParams({
-    [ZENDESK_FIELDS.DISTRIBUTION]: isCloud ? 'ccloud' : 'oss'
+    [ZENDESK_FIELDS.DISTRIBUTION]: getDistribution()
   })
 
   if (params?.userEmail) {
diff --git a/src/platform/telemetry/utils/surveyNormalization.ts b/src/platform/telemetry/utils/surveyNormalization.ts
index ae281ca34..fdffd62c7 100644
--- a/src/platform/telemetry/utils/surveyNormalization.ts
+++ b/src/platform/telemetry/utils/surveyNormalization.ts
@@ -526,7 +526,7 @@ const useCaseFuse = new Fuse(USE_CASE_CATEGORIES, FUSE_OPTIONS)
 /**
  * Normalize industry responses using Fuse.js fuzzy search
  */
-export function normalizeIndustry(rawIndustry: string): string {
+export function normalizeIndustry(rawIndustry: unknown): string {
   if (!rawIndustry || typeof rawIndustry !== 'string') {
     return 'Other / Undefined'
   }
@@ -554,7 +554,7 @@ export function normalizeIndustry(rawIndustry: string): string {
 /**
  * Normalize use case responses using Fuse.js fuzzy search
  */
-export function normalizeUseCase(rawUseCase: string): string {
+export function normalizeUseCase(rawUseCase: unknown): string {
   if (!rawUseCase || typeof rawUseCase !== 'string') {
     return 'Other / Undefined'
   }
diff --git a/src/platform/workspace/api/workspaceApi.ts b/src/platform/workspace/api/workspaceApi.ts
index d8dc02690..9f1647e2c 100644
--- a/src/platform/workspace/api/workspaceApi.ts
+++ b/src/platform/workspace/api/workspaceApi.ts
@@ -4,8 +4,8 @@ import { t } from '@/i18n'
 import { api } from '@/scripts/api'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
-type WorkspaceType = 'personal' | 'team'
-type WorkspaceRole = 'owner' | 'member'
+export type WorkspaceType = 'personal' | 'team'
+export type WorkspaceRole = 'owner' | 'member'
 
 interface Workspace {
   id: string
diff --git a/src/platform/workspace/composables/useWorkspaceUI.ts b/src/platform/workspace/composables/useWorkspaceUI.ts
new file mode 100644
index 000000000..477d9026b
--- /dev/null
+++ b/src/platform/workspace/composables/useWorkspaceUI.ts
@@ -0,0 +1,125 @@
+import { computed, ref } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+
+import type { WorkspaceRole, WorkspaceType } from '../api/workspaceApi'
+import { useTeamWorkspaceStore } from '../stores/teamWorkspaceStore'
+
+/** Permission flags for workspace actions */
+interface WorkspacePermissions {
+  canLeaveWorkspace: boolean
+  canAccessWorkspaceMenu: boolean
+  canManageSubscription: boolean
+}
+
+/** UI configuration for workspace role */
+interface WorkspaceUIConfig {
+  showEditWorkspaceMenuItem: boolean
+  workspaceMenuAction: 'leave' | 'delete' | null
+  workspaceMenuDisabledTooltip: string | null
+}
+
+function getPermissions(
+  type: WorkspaceType,
+  role: WorkspaceRole
+): WorkspacePermissions {
+  if (type === 'personal') {
+    return {
+      canLeaveWorkspace: false,
+      canAccessWorkspaceMenu: false,
+      canManageSubscription: true
+    }
+  }
+
+  if (role === 'owner') {
+    return {
+      canLeaveWorkspace: true,
+      canAccessWorkspaceMenu: true,
+      canManageSubscription: true
+    }
+  }
+
+  // member role
+  return {
+    canLeaveWorkspace: true,
+    canAccessWorkspaceMenu: true,
+    canManageSubscription: false
+  }
+}
+
+function getUIConfig(
+  type: WorkspaceType,
+  role: WorkspaceRole
+): WorkspaceUIConfig {
+  if (type === 'personal') {
+    return {
+      showEditWorkspaceMenuItem: false,
+      workspaceMenuAction: null,
+      workspaceMenuDisabledTooltip: null
+    }
+  }
+
+  if (role === 'owner') {
+    return {
+      showEditWorkspaceMenuItem: true,
+      workspaceMenuAction: 'delete',
+      workspaceMenuDisabledTooltip:
+        'workspacePanel.menu.deleteWorkspaceDisabledTooltip'
+    }
+  }
+
+  // member role
+  return {
+    showEditWorkspaceMenuItem: false,
+    workspaceMenuAction: 'leave',
+    workspaceMenuDisabledTooltip: null
+  }
+}
+
+/**
+ * Internal implementation of UI configuration composable.
+ */
+function useWorkspaceUIInternal() {
+  const store = useTeamWorkspaceStore()
+
+  // Tab management (shared UI state)
+  const activeTab = ref<string>('plan')
+
+  function setActiveTab(tab: string | number) {
+    activeTab.value = String(tab)
+  }
+
+  const workspaceType = computed<WorkspaceType>(
+    () => store.activeWorkspace?.type ?? 'personal'
+  )
+
+  const workspaceRole = computed<WorkspaceRole>(
+    () => store.activeWorkspace?.role ?? 'owner'
+  )
+
+  const permissions = computed<WorkspacePermissions>(() =>
+    getPermissions(workspaceType.value, workspaceRole.value)
+  )
+
+  const uiConfig = computed<WorkspaceUIConfig>(() =>
+    getUIConfig(workspaceType.value, workspaceRole.value)
+  )
+
+  return {
+    // Tab management
+    activeTab: computed(() => activeTab.value),
+    setActiveTab,
+
+    // Permissions and config
+    permissions,
+    uiConfig,
+    workspaceType,
+    workspaceRole
+  }
+}
+
+/**
+ * UI configuration composable derived from workspace state.
+ * Controls what UI elements are visible/enabled based on role and workspace type.
+ * Uses createSharedComposable to ensure tab state is shared across components.
+ */
+export const useWorkspaceUI = createSharedComposable(useWorkspaceUIInternal)
diff --git a/src/platform/workspace/stores/teamWorkspaceStore.test.ts b/src/platform/workspace/stores/teamWorkspaceStore.test.ts
index e31267bdf..a66be714a 100644
--- a/src/platform/workspace/stores/teamWorkspaceStore.test.ts
+++ b/src/platform/workspace/stores/teamWorkspaceStore.test.ts
@@ -208,14 +208,33 @@ describe('useTeamWorkspaceStore', () => {
       expect(store.activeWorkspaceId).toBe(mockPersonalWorkspace.id)
     })
 
-    it('sets error state when workspaces fetch fails', async () => {
+    it('sets error state when workspaces fetch fails after retries', async () => {
+      vi.useFakeTimers()
       mockWorkspaceApi.list.mockRejectedValue(new Error('Network error'))
 
       const store = useTeamWorkspaceStore()
 
-      await expect(store.initialize()).rejects.toThrow('Network error')
+      // Start initialization and catch rejections to prevent unhandled promise warning
+      let initError: unknown = null
+      const initPromise = store.initialize().catch((e: unknown) => {
+        initError = e
+      })
+
+      // Fast-forward through all retry delays (1s, 2s, 4s)
+      await vi.advanceTimersByTimeAsync(1000)
+      await vi.advanceTimersByTimeAsync(2000)
+      await vi.advanceTimersByTimeAsync(4000)
+
+      await initPromise
+
+      expect(initError).toBeInstanceOf(Error)
+      expect((initError as Error).message).toBe('Network error')
       expect(store.initState).toBe('error')
       expect(store.error).toBeInstanceOf(Error)
+      // Should have been called 4 times (initial + 3 retries)
+      expect(mockWorkspaceApi.list).toHaveBeenCalledTimes(4)
+
+      vi.useRealTimers()
     })
 
     it('does not reinitialize if already initialized', async () => {
diff --git a/src/platform/workspace/stores/teamWorkspaceStore.ts b/src/platform/workspace/stores/teamWorkspaceStore.ts
index 33c721c09..79fc8ae6a 100644
--- a/src/platform/workspace/stores/teamWorkspaceStore.ts
+++ b/src/platform/workspace/stores/teamWorkspaceStore.ts
@@ -85,6 +85,8 @@ function setLastWorkspaceId(workspaceId: string): void {
 
 const MAX_OWNED_WORKSPACES = 10
 const MAX_WORKSPACE_MEMBERS = 50
+const MAX_INIT_RETRIES = 3
+const BASE_RETRY_DELAY_MS = 1000
 
 export const useTeamWorkspaceStore = defineStore('teamWorkspace', () => {
   const initState = ref<InitState>('uninitialized')
@@ -174,6 +176,7 @@ export const useTeamWorkspaceStore = defineStore('teamWorkspace', () => {
    * Initialize the workspace store.
    * Fetches workspaces and resolves the active workspace from session/localStorage.
    * Delegates token management to workspaceAuthStore.
+   * Retries on transient failures with exponential backoff.
    * Call once on app boot.
    */
   async function initialize(): Promise<void> {
@@ -185,60 +188,115 @@ export const useTeamWorkspaceStore = defineStore('teamWorkspace', () => {
 
     const workspaceAuthStore = useWorkspaceAuthStore()
 
-    try {
-      // 1. Try to restore workspace context from session (page refresh case)
-      const hasValidSession = workspaceAuthStore.initializeFromSession()
+    for (let attempt = 0; attempt <= MAX_INIT_RETRIES; attempt++) {
+      try {
+        // 1. Try to restore workspace context from session (page refresh case)
+        const hasValidSession = workspaceAuthStore.initializeFromSession()
 
-      if (hasValidSession && workspaceAuthStore.currentWorkspace) {
-        // Valid session exists - fetch workspace list and sync state
+        if (hasValidSession && workspaceAuthStore.currentWorkspace) {
+          // Valid session exists - fetch workspace list and verify access
+          const response = await workspaceApi.list()
+          workspaces.value = response.workspaces.map(createWorkspaceState)
+
+          if (workspaces.value.length === 0) {
+            throw new Error('No workspaces available')
+          }
+
+          // Verify session workspace exists in fetched list
+          const sessionWorkspaceId = workspaceAuthStore.currentWorkspace.id
+          const sessionWorkspaceExists = workspaces.value.some(
+            (w) => w.id === sessionWorkspaceId
+          )
+
+          if (sessionWorkspaceExists) {
+            activeWorkspaceId.value = sessionWorkspaceId
+            initState.value = 'ready'
+            isFetchingWorkspaces.value = false
+            return
+          }
+
+          // Session workspace not found (deleted/access revoked) - fallback to default
+          workspaceAuthStore.clearWorkspaceContext()
+
+          const personal = workspaces.value.find((w) => w.type === 'personal')
+          const fallbackWorkspaceId = personal?.id ?? workspaces.value[0].id
+
+          try {
+            await workspaceAuthStore.switchWorkspace(fallbackWorkspaceId)
+          } catch {
+            console.error(
+              '[teamWorkspaceStore] Token exchange failed during fallback'
+            )
+          }
+
+          activeWorkspaceId.value = fallbackWorkspaceId
+          setLastWorkspaceId(fallbackWorkspaceId)
+          initState.value = 'ready'
+          isFetchingWorkspaces.value = false
+          return
+        }
+
+        // 2. No valid session - fetch workspaces and pick default
         const response = await workspaceApi.list()
         workspaces.value = response.workspaces.map(createWorkspaceState)
-        activeWorkspaceId.value = workspaceAuthStore.currentWorkspace.id
+
+        if (workspaces.value.length === 0) {
+          throw new Error('No workspaces available')
+        }
+
+        // 3. Determine target workspace (priority: localStorage > personal)
+        let targetWorkspaceId: string | null = null
+
+        const lastId = getLastWorkspaceId()
+        if (lastId && workspaces.value.some((w) => w.id === lastId)) {
+          targetWorkspaceId = lastId
+        }
+
+        if (!targetWorkspaceId) {
+          const personal = workspaces.value.find((w) => w.type === 'personal')
+          targetWorkspaceId = personal?.id ?? workspaces.value[0].id
+        }
+
+        // 4. Exchange Firebase token for workspace token
+        try {
+          await workspaceAuthStore.switchWorkspace(targetWorkspaceId)
+        } catch {
+          // Log but don't fail initialization - API calls will fall back to Firebase token
+          console.error(
+            '[teamWorkspaceStore] Token exchange failed during init'
+          )
+        }
+
+        // 5. Set active workspace
+        activeWorkspaceId.value = targetWorkspaceId
+        setLastWorkspaceId(targetWorkspaceId)
+
         initState.value = 'ready'
+        isFetchingWorkspaces.value = false
         return
+      } catch (e) {
+        const isNoWorkspacesError =
+          e instanceof Error && e.message === 'No workspaces available'
+
+        // Don't retry on permanent errors (no workspaces available)
+        if (isNoWorkspacesError || attempt >= MAX_INIT_RETRIES) {
+          error.value = e instanceof Error ? e : new Error('Unknown error')
+          initState.value = 'error'
+          isFetchingWorkspaces.value = false
+          throw e
+        }
+
+        // Retry with exponential backoff for transient errors
+        const delay = BASE_RETRY_DELAY_MS * Math.pow(2, attempt)
+        const errorMessage = e instanceof Error ? e.message : String(e)
+        console.warn(
+          `[teamWorkspaceStore] Init failed (attempt ${attempt + 1}/${MAX_INIT_RETRIES + 1}), retrying in ${delay}ms: ${errorMessage}`
+        )
+        await new Promise((resolve) => setTimeout(resolve, delay))
       }
-
-      // 2. No valid session - fetch workspaces and pick default
-      const response = await workspaceApi.list()
-      workspaces.value = response.workspaces.map(createWorkspaceState)
-
-      if (workspaces.value.length === 0) {
-        throw new Error('No workspaces available')
-      }
-
-      // 3. Determine target workspace (priority: localStorage > personal)
-      let targetWorkspaceId: string | null = null
-
-      const lastId = getLastWorkspaceId()
-      if (lastId && workspaces.value.some((w) => w.id === lastId)) {
-        targetWorkspaceId = lastId
-      }
-
-      if (!targetWorkspaceId) {
-        const personal = workspaces.value.find((w) => w.type === 'personal')
-        targetWorkspaceId = personal?.id ?? workspaces.value[0].id
-      }
-
-      // 4. Exchange Firebase token for workspace token
-      try {
-        await workspaceAuthStore.switchWorkspace(targetWorkspaceId)
-      } catch {
-        // Log but don't fail initialization - API calls will fall back to Firebase token
-        console.error('[teamWorkspaceStore] Token exchange failed during init')
-      }
-
-      // 5. Set active workspace
-      activeWorkspaceId.value = targetWorkspaceId
-      setLastWorkspaceId(targetWorkspaceId)
-
-      initState.value = 'ready'
-    } catch (e) {
-      error.value = e instanceof Error ? e : new Error('Unknown error')
-      initState.value = 'error'
-      throw e
-    } finally {
-      isFetchingWorkspaces.value = false
     }
+
+    isFetchingWorkspaces.value = false
   }
 
   /**
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 0f24cf873..bb1bf3831 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -99,6 +99,7 @@ import { computed, onErrorCaptured, ref, toValue, watch } from 'vue'
 import EditableText from '@/components/common/EditableText.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useNodePricing } from '@/composables/node/useNodePricing'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
 import { LGraphEventMode, RenderShape } from '@/lib/litegraph/src/litegraph'
@@ -183,9 +184,67 @@ const statusBadge = computed((): NodeBadgeProps | undefined =>
       : undefined
 )
 
-const nodeBadges = computed<NodeBadgeProps[]>(() =>
-  [...(nodeData?.badges ?? [])].map(toValue)
+// Use per-node pricing revision to re-compute badges only when this node's pricing updates
+const {
+  getRelevantWidgetNames,
+  hasDynamicPricing,
+  getInputGroupPrefixes,
+  getInputNames,
+  getNodeRevisionRef
+} = useNodePricing()
+// Cache pricing metadata (won't change during node lifetime)
+const isDynamicPricing = computed(() =>
+  nodeData?.apiNode ? hasDynamicPricing(nodeData.type) : false
 )
+const relevantPricingWidgets = computed(() =>
+  nodeData?.apiNode ? getRelevantWidgetNames(nodeData.type) : []
+)
+const inputGroupPrefixes = computed(() =>
+  nodeData?.apiNode ? getInputGroupPrefixes(nodeData.type) : []
+)
+const relevantInputNames = computed(() =>
+  nodeData?.apiNode ? getInputNames(nodeData.type) : []
+)
+const nodeBadges = computed<NodeBadgeProps[]>(() => {
+  // For ALL API nodes: access per-node revision ref to detect when async pricing evaluation completes
+  // This is needed even for static pricing because JSONata 2.x evaluation is async
+  if (nodeData?.apiNode && nodeData?.id != null) {
+    // Access per-node revision ref to establish dependency (each node has its own ref)
+    void getNodeRevisionRef(nodeData.id).value
+
+    // For dynamic pricing, also track widget values and input connections
+    if (isDynamicPricing.value) {
+      // Access only the widget values that affect pricing
+      const relevantNames = relevantPricingWidgets.value
+      if (relevantNames.length > 0) {
+        nodeData?.widgets?.forEach((w) => {
+          if (relevantNames.includes(w.name)) w.value
+        })
+      }
+      // Access input connections for regular inputs
+      const inputNames = relevantInputNames.value
+      if (inputNames.length > 0) {
+        nodeData?.inputs?.forEach((inp) => {
+          if (inp.name && inputNames.includes(inp.name)) {
+            void inp.link // Access link to create reactive dependency
+          }
+        })
+      }
+      // Access input connections for input_groups (e.g., autogrow inputs)
+      const groupPrefixes = inputGroupPrefixes.value
+      if (groupPrefixes.length > 0) {
+        nodeData?.inputs?.forEach((inp) => {
+          if (
+            groupPrefixes.some((prefix) => inp.name?.startsWith(prefix + '.'))
+          ) {
+            void inp.link // Access link to create reactive dependency
+          }
+        })
+      }
+    }
+  }
+  return [...(nodeData?.badges ?? [])].map(toValue)
+})
 const isPinned = computed(() => Boolean(nodeData?.flags?.pinned))
 const isApiNode = computed(() => Boolean(nodeData?.apiNode))
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index 5a201779b..d32522220 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -159,14 +159,15 @@ function handleMouseMove(e: PointerEvent) {
 function handleMouseUp() {
   const newValue = dragValue.value
   if (newValue === undefined) return
-  modelValue.value = newValue
-  dragValue.value = undefined
 
-  if (dragDelta.value === 0) {
+  if (newValue === modelValue.value) {
     textEdit.value = true
     inputField.value?.focus()
     inputField.value?.setSelectionRange(0, -1)
   }
+
+  modelValue.value = newValue
+  dragValue.value = undefined
   dragDelta.value = 0
 }
 
@@ -202,9 +203,13 @@ const sliderWidth = computed(() => {
       :class="cn(WidgetInputBaseClass, 'grow text-xs flex h-7 relative')"
     >
       <div
-        class="bg-primary-background/15 absolute left-0 bottom-0 h-full rounded-lg pointer-events-none"
-        :style="{ width: `${sliderWidth}%` }"
-      />
+        class="absolute size-full rounded-lg pointer-events-none overflow-clip"
+      >
+        <div
+          class="bg-primary-background/15 size-full"
+          :style="{ width: `${sliderWidth}%` }"
+        />
+      </div>
       <Button
         v-if="!buttonsDisabled"
         data-testid="decrement"
diff --git a/src/schemas/nodeDefSchema.ts b/src/schemas/nodeDefSchema.ts
index bb36da228..0a03388cd 100644
--- a/src/schemas/nodeDefSchema.ts
+++ b/src/schemas/nodeDefSchema.ts
@@ -197,6 +197,50 @@ const zComfyOutputTypesSpec = z.array(
   z.union([zComfyNodeDataType, zComfyComboOutput])
 )
 
+/**
+ * Widget dependency with type information.
+ * Provides strong type enforcement for JSONata evaluation context.
+ */
+const zWidgetDependency = z.object({
+  name: z.string(),
+  type: z.string()
+})
+
+export type WidgetDependency = z.infer<typeof zWidgetDependency>
+
+/**
+ * Schema for price badge depends_on field.
+ * Specifies which widgets and inputs the pricing expression depends on.
+ * Widgets must be specified as objects with name and type.
+ */
+const zPriceBadgeDepends = z.object({
+  widgets: z.array(zWidgetDependency).optional().default([]),
+  inputs: z.array(z.string()).optional().default([]),
+  /**
+   * Autogrow input group names to track.
+   * For each group, the count of connected inputs will be available in the
+   * JSONata context as `g.<groupName>`.
+   * Example: `input_groups: ["reference_videos"]` makes `g.reference_videos`
+   * available with the count of connected inputs like `reference_videos.character1`, etc.
+   */
+  input_groups: z.array(z.string()).optional().default([])
+})
+
+/**
+ * Schema for price badge definition.
+ * Used to calculate and display pricing information for API nodes.
+ * The `expr` field contains a JSONata expression that returns a PricingResult.
+ */
+const zPriceBadge = z.object({
+  engine: z.literal('jsonata').optional().default('jsonata'),
+  depends_on: zPriceBadgeDepends
+    .optional()
+    .default({ widgets: [], inputs: [], input_groups: [] }),
+  expr: z.string()
+})
+
+export type PriceBadge = z.infer<typeof zPriceBadge>
+
 export const zComfyNodeDef = z.object({
   input: zComfyInputsSpec.optional(),
   output: zComfyOutputTypesSpec.optional(),
@@ -224,7 +268,18 @@ export const zComfyNodeDef = z.object({
    * Used to ensure consistent widget ordering regardless of JSON serialization.
    * Keys are 'required', 'optional', etc., values are arrays of input names.
    */
-  input_order: z.record(z.array(z.string())).optional()
+  input_order: z.record(z.array(z.string())).optional(),
+  /**
+   * Alternative names for search. Useful for synonyms, abbreviations,
+   * or old names after renaming a node.
+   */
+  search_aliases: z.array(z.string()).optional(),
+  /**
+   * Price badge definition for API nodes.
+   * Contains a JSONata expression to calculate pricing based on widget values
+   * and input connectivity.
+   */
+  price_badge: zPriceBadge.optional()
 })
 
 export const zAutogrowOptions = z.object({
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index a9427f85b..0a794ab9d 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -162,7 +162,7 @@ export class ComfyApp {
 
   // TODO: Migrate internal usage to the
   /** @deprecated Use {@link rootGraph} instead */
-  get graph(): unknown {
+  get graph(): LGraph | undefined {
     return this.rootGraphInternal!
   }
 
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index e70b7fcb0..a5fc807e1 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -102,6 +102,7 @@ export const useDialogService = () => {
       | 'user'
       | 'credits'
       | 'subscription'
+      | 'workspace'
   ) {
     const props = panel ? { props: { defaultPanel: panel } } : undefined
 
@@ -519,6 +520,75 @@ export const useDialogService = () => {
     show()
   }
 
+  // Workspace dialogs - dynamically imported to avoid bundling when feature flag is off
+  const workspaceDialogPt = {
+    headless: true,
+    pt: {
+      header: { class: 'p-0! hidden' },
+      content: { class: 'p-0! m-0! rounded-2xl' },
+      root: { class: 'rounded-2xl' }
+    }
+  } as const
+
+  async function showDeleteWorkspaceDialog(options?: {
+    workspaceId?: string
+    workspaceName?: string
+  }) {
+    const { default: component } =
+      await import('@/components/dialog/content/workspace/DeleteWorkspaceDialogContent.vue')
+    return dialogStore.showDialog({
+      key: 'delete-workspace',
+      component,
+      props: options,
+      dialogComponentProps: workspaceDialogPt
+    })
+  }
+
+  async function showCreateWorkspaceDialog(
+    onConfirm?: (name: string) => void | Promise<void>
+  ) {
+    const { default: component } =
+      await import('@/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue')
+    return dialogStore.showDialog({
+      key: 'create-workspace',
+      component,
+      props: { onConfirm },
+      dialogComponentProps: {
+        ...workspaceDialogPt,
+        pt: {
+          ...workspaceDialogPt.pt,
+          root: { class: 'rounded-2xl max-w-[400px] w-full' }
+        }
+      }
+    })
+  }
+
+  async function showLeaveWorkspaceDialog() {
+    const { default: component } =
+      await import('@/components/dialog/content/workspace/LeaveWorkspaceDialogContent.vue')
+    return dialogStore.showDialog({
+      key: 'leave-workspace',
+      component,
+      dialogComponentProps: workspaceDialogPt
+    })
+  }
+
+  async function showEditWorkspaceDialog() {
+    const { default: component } =
+      await import('@/components/dialog/content/workspace/EditWorkspaceDialogContent.vue')
+    return dialogStore.showDialog({
+      key: 'edit-workspace',
+      component,
+      dialogComponentProps: {
+        ...workspaceDialogPt,
+        pt: {
+          ...workspaceDialogPt.pt,
+          root: { class: 'rounded-2xl max-w-[400px] w-full' }
+        }
+      }
+    })
+  }
+
   return {
     showLoadWorkflowWarning,
     showMissingModelsWarning,
@@ -536,6 +606,10 @@ export const useDialogService = () => {
     confirm,
     showLayoutDialog,
     showImportFailedNodeDialog,
-    showNodeConflictDialog
+    showNodeConflictDialog,
+    showDeleteWorkspaceDialog,
+    showCreateWorkspaceDialog,
+    showLeaveWorkspaceDialog,
+    showEditWorkspaceDialog
   }
 }
diff --git a/src/services/nodeSearchService.ts b/src/services/nodeSearchService.ts
index d54c97e1f..75dccf268 100644
--- a/src/services/nodeSearchService.ts
+++ b/src/services/nodeSearchService.ts
@@ -14,7 +14,7 @@ export class NodeSearchService {
   constructor(data: ComfyNodeDefImpl[]) {
     this.nodeFuseSearch = new FuseSearch(data, {
       fuseOptions: {
-        keys: ['name', 'display_name'],
+        keys: ['name', 'display_name', 'search_aliases'],
         includeScore: true,
         threshold: 0.3,
         shouldSort: false,
diff --git a/src/stores/assetsStore.ts b/src/stores/assetsStore.ts
index 21d19838f..0293f9b32 100644
--- a/src/stores/assetsStore.ts
+++ b/src/stores/assetsStore.ts
@@ -1,4 +1,5 @@
 import { useAsyncState, whenever } from '@vueuse/core'
+import { difference } from 'es-toolkit'
 import { defineStore } from 'pinia'
 import { computed, reactive, ref, shallowReactive } from 'vue'
 import {
@@ -455,32 +456,71 @@ export const useAssetsStore = defineStore('assets', () => {
 
       /**
        * Update asset metadata with optimistic cache update
-       * @param assetId The asset ID to update
+       * @param asset The asset to update
        * @param userMetadata The user_metadata to save
        * @param cacheKey Optional cache key to target for optimistic update
        */
       async function updateAssetMetadata(
-        assetId: string,
+        asset: AssetItem,
         userMetadata: Record<string, unknown>,
         cacheKey?: string
       ) {
-        updateAssetInCache(assetId, { user_metadata: userMetadata }, cacheKey)
-        await assetService.updateAsset(assetId, { user_metadata: userMetadata })
+        const originalMetadata = asset.user_metadata
+        updateAssetInCache(asset.id, { user_metadata: userMetadata }, cacheKey)
+
+        try {
+          const updatedAsset = await assetService.updateAsset(asset.id, {
+            user_metadata: userMetadata
+          })
+          updateAssetInCache(asset.id, updatedAsset, cacheKey)
+        } catch (error) {
+          console.error('Failed to update asset metadata:', error)
+          updateAssetInCache(
+            asset.id,
+            { user_metadata: originalMetadata },
+            cacheKey
+          )
+        }
       }
 
       /**
-       * Update asset tags with optimistic cache update
-       * @param assetId The asset ID to update
-       * @param tags The tags array to save
+       * Update asset tags using add/remove endpoints
+       * @param asset The asset to update (used to read current tags)
+       * @param newTags The desired tags array
        * @param cacheKey Optional cache key to target for optimistic update
        */
       async function updateAssetTags(
-        assetId: string,
-        tags: string[],
+        asset: AssetItem,
+        newTags: string[],
         cacheKey?: string
       ) {
-        updateAssetInCache(assetId, { tags }, cacheKey)
-        await assetService.updateAsset(assetId, { tags })
+        const originalTags = asset.tags
+        const tagsToAdd = difference(newTags, originalTags)
+        const tagsToRemove = difference(originalTags, newTags)
+
+        if (tagsToAdd.length === 0 && tagsToRemove.length === 0) return
+
+        updateAssetInCache(asset.id, { tags: newTags }, cacheKey)
+
+        try {
+          const removeResult =
+            tagsToRemove.length > 0
+              ? await assetService.removeAssetTags(asset.id, tagsToRemove)
+              : undefined
+
+          const addResult =
+            tagsToAdd.length > 0
+              ? await assetService.addAssetTags(asset.id, tagsToAdd)
+              : undefined
+
+          const finalTags = (addResult ?? removeResult)?.total_tags
+          if (finalTags) {
+            updateAssetInCache(asset.id, { tags: finalTags }, cacheKey)
+          }
+        } catch (error) {
+          console.error('Failed to update asset tags:', error)
+          updateAssetInCache(asset.id, { tags: originalTags }, cacheKey)
+        }
       }
 
       return {
diff --git a/src/stores/firebaseAuthStore.ts b/src/stores/firebaseAuthStore.ts
index 943318240..6073a4304 100644
--- a/src/stores/firebaseAuthStore.ts
+++ b/src/stores/firebaseAuthStore.ts
@@ -512,6 +512,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
     sendPasswordReset,
     updatePassword: _updatePassword,
     deleteAccount: _deleteAccount,
-    getAuthHeader
+    getAuthHeader,
+    getFirebaseAuthHeader
   }
 })
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index 27a46ad21..217b784ca 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -14,7 +14,8 @@ import type {
 import type {
   ComfyInputsSpec as ComfyInputSpecV1,
   ComfyNodeDef as ComfyNodeDefV1,
-  ComfyOutputTypesSpec as ComfyOutputSpecV1
+  ComfyOutputTypesSpec as ComfyOutputSpecV1,
+  PriceBadge
 } from '@/schemas/nodeDefSchema'
 import { NodeSearchService } from '@/services/nodeSearchService'
 import { useSubgraphStore } from '@/stores/subgraphStore'
@@ -66,6 +67,12 @@ export class ComfyNodeDefImpl
    * Order of inputs for each category (required, optional, hidden)
    */
   readonly input_order?: Record<string, string[]>
+  /**
+   * Price badge definition for API nodes.
+   * Contains a JSONata expression to calculate pricing based on widget values
+   * and input connectivity.
+   */
+  readonly price_badge?: PriceBadge
 
   // V2 fields
   readonly inputs: Record<string, InputSpecV2>
@@ -134,6 +141,7 @@ export class ComfyNodeDefImpl
     this.output_name = obj.output_name
     this.output_tooltips = obj.output_tooltips
     this.input_order = obj.input_order
+    this.price_badge = obj.price_badge
 
     // Initialize V2 fields
     const defV2 = transformNodeDefV1ToV2(obj)
diff --git a/src/types/index.ts b/src/types/index.ts
index 25f8e2090..947c9b3ad 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -64,6 +64,17 @@ export type {
   ToastMessageOptions
 }
 
+interface CapturedMessages {
+  clientFeatureFlags: { type: string; data: Record<string, unknown> } | null
+  serverFeatureFlags: Record<string, unknown> | null
+}
+
+interface AppReadiness {
+  featureFlagsReceived: boolean
+  apiInitialized: boolean
+  appInitialized: boolean
+}
+
 declare global {
   interface Window {
     /** For use by extensions and in the browser console. Where possible, import `app` from '@/scripts/app' instead. */
@@ -71,5 +82,11 @@ declare global {
 
     /** For use by extensions and in the browser console. Where possible, import `app` and access via `app.graph` instead. */
     graph?: unknown
+
+    /** For use in tests to capture WebSocket messages */
+    __capturedMessages?: CapturedMessages
+
+    /** For use in tests to track app initialization state */
+    __appReadiness?: AppReadiness
   }
 }
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 6dc309c1a..f18d8a74b 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -52,6 +52,7 @@ import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import { i18n, loadLocale } from '@/i18n'
 import ModelImportProgressDialog from '@/platform/assets/components/ModelImportProgressDialog.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -252,6 +253,27 @@ const onReconnected = () => {
   }
 }
 
+// Initialize workspace store when feature flag and auth become available
+// Uses watch because remoteConfig loads asynchronously after component mount
+if (isCloud) {
+  const { flags } = useFeatureFlags()
+
+  watch(
+    () => [flags.teamWorkspacesEnabled, firebaseAuthStore.isAuthenticated],
+    async ([enabled, isAuthenticated]) => {
+      if (!enabled || !isAuthenticated) return
+
+      const { useTeamWorkspaceStore } =
+        await import('@/platform/workspace/stores/teamWorkspaceStore')
+      const workspaceStore = useTeamWorkspaceStore()
+      if (workspaceStore.initState === 'uninitialized') {
+        await workspaceStore.initialize()
+      }
+    },
+    { immediate: true }
+  )
+}
+
 onMounted(() => {
   api.addEventListener('status', onStatus)
   api.addEventListener('execution_success', onExecutionSuccess)
@@ -352,7 +374,10 @@ const onGraphReady = () => {
         })
 
         // Broadcast our heartbeat
-        tabCountChannel?.postMessage({ type: 'heartbeat', tabId: currentTabId })
+        tabCountChannel?.postMessage({
+          type: 'heartbeat',
+          tabId: currentTabId
+        })
 
         // Track tab count (include current tab)
         const tabCount = activeTabs.size + 1